@khanacademy/perseus 47.0.0 → 48.0.0

package/dist/index.js

@@ -2412,9 +2412,6 @@ function scoreExpression(userInput, rubric, strings, locale) {
   // We matched a graded answer form, so we can now tell the user
   // whether their input was correct or incorrect, and hand out
   // points accordingly
-  // TODO(eater): Seems silly to translate result to this
-  // invalid/points thing and immediately translate it back in
-  // ItemRenderer.scoreInput()
   return {
     type: "points",
     earned: matchingAnswerForm.considered === "correct" ? 1 : 0,
@@ -3363,7 +3360,7 @@ const supportsPassiveEvents = () => {
     window.addEventListener("testPassive", null, opts);
     // @ts-expect-error - TS2769 - No overload matches this call.
     window.removeEventListener("testPassive", null, opts);
-  } catch (e) {
+  } catch {
     // Intentionally left empty!
   }
   return supportsPassive;
@@ -3604,7 +3601,9 @@ function changeViewportTag(contentString, callback) {
     // finished resetting.
     // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
     // eslint-disable-next-line no-restricted-syntax
-    callback && setTimeout(callback, 0);
+    if (callback != null) {
+      setTimeout(callback, 0);
+    }
   }, 0);
 }
 
@@ -16964,7 +16963,7 @@ class ImageLoader extends React__namespace.Component {
       onKeyUp = e => {
         // 13 is enter key, 32 is space key
         if (e.keyCode === 13 || e.keyCode === 32) {
-          imgProps.onClick && imgProps.onClick(e);
+          imgProps.onClick?.(e);
         }
       };
       onKeyDown = e => {
@@ -17033,7 +17032,7 @@ const doJSONP = function (url, options) {
 
   // A cleanup function to run when we're done.
   function cleanup() {
-    document.head && document.head.removeChild(script);
+    document.head?.removeChild(script);
     delete window[options.callbackName];
   }
 
@@ -17057,7 +17056,7 @@ const doJSONP = function (url, options) {
   });
 
   // Insert the script to start the download.
-  document.head && document.head.appendChild(script);
+  document.head?.appendChild(script);
 };
 
 // For offline exercises in the mobile app, we download the graphie data
@@ -17396,7 +17395,7 @@ class SvgImage extends React__namespace.Component {
     $image.width() < this.props.width || this.props.zoomToFullSizeOnMobile) {
       ZoomService.handleZoomClick(e, this.props.zoomToFullSizeOnMobile);
     }
-    this.props.trackInteraction && this.props.trackInteraction();
+    this.props.trackInteraction?.();
   };
   handleUpdate = status => {
     this.props.onUpdate();
@@ -19803,8 +19802,8 @@ class WidgetContainer extends React__namespace.Component {
     };
 
     // Note: if you add more props here, please consider whether or not
-    // it should be auto-serialized (e.g. used in scoreInput()). See
-    // widget-jsonify-deprecated.jsx and widget-prop-denylist.jsx
+    // it should be auto-serialized.
+    // See widget-jsonify-deprecated.jsx and widget-prop-denylist.jsx
 
     // We default to an empty object for style instead of null
     // because of a strange bug where the static styles aren't applied
@@ -21100,15 +21099,6 @@ class Renderer extends React__namespace.Component {
     return combinedScore;
   }
 
-  /**
-   * @deprecated use scorePerseusItem
-   */
-  guessAndScore = () => {
-    const totalGuess = this.getUserInput();
-    const totalScore = this.score();
-    return [totalGuess, totalScore];
-  };
-
   // TranslationLinter callback
   handletranslationLintErrors = lintErrors => {
     if (!this._isMounted) {
@@ -21786,11 +21776,11 @@ class SimpleKeypadInput extends React__namespace.Component {
               keypadType: mathInput.KeypadType.FRACTION
             }, () => {
               if (_this._isMounted) {
-                onFocus && onFocus();
+                onFocus?.();
               }
             });
           } else {
-            onFocus && onFocus();
+            onFocus?.();
           }
         },
         value: value == null ? "" : "" + value
@@ -22029,9 +22019,6 @@ function scoreInputNumber(userInput, rubric, strings) {
   // If `currentValue` is not TeX, this should be a no-op.
   const currentValue = ParseTex$1(userInput.currentValue);
   const result = val(currentValue);
-
-  // TODO(eater): Seems silly to translate result to this invalid/points
-  // thing and immediately translate it back in ItemRenderer.scoreInput()
   if (result.empty) {
     return {
       type: "invalid",
@@ -22395,10 +22382,6 @@ function scoreNumericInput(userInput, rubric, strings) {
     message: matchedAnswer?.message ?? null,
     guess: localValue
   };
-
-  // TODO(eater): Seems silly to translate result to this
-  // invalid/points thing and immediately translate it
-  // back in ItemRenderer.scoreInput()
   if (result.empty) {
     return {
       type: "invalid",
@@ -25255,7 +25238,7 @@ const scrollElementToOffset = function (elementOrWindow, offset) {
       // TODO(jeff, WEB-1378): Use Wonder Blocks Timing API
       // eslint-disable-next-line no-restricted-syntax
       clearInterval(scrollInterval);
-      callback && callback();
+      callback?.();
     }
   }, tickLength);
 };
@@ -27317,7 +27300,7 @@ class CSProgram extends React__namespace.Component {
     let data = {};
     try {
       data = JSON.parse(e.originalEvent.data);
-    } catch (err) {
+    } catch {
       return;
     }
     if (___default["default"].isUndefined(data.testsPassed)) {
@@ -27616,7 +27599,7 @@ class Dropdown extends React__namespace.Component {
       key: "placeholder",
       value: "0",
       disabled: true,
-      label: this.props.placeholder
+      label: this.props.placeholder || " "
     }), ...this.props.choices.map((choice, i) => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
       key: String(i + 1),
       value: String(i + 1),
@@ -27637,15 +27620,14 @@ class Dropdown extends React__namespace.Component {
       }
     }, this.props.visibleLabel && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
       tag: "label",
-      id: ids.get("dropdown-label")
+      htmlFor: ids.get("dropdown")
     }, this.props.visibleLabel), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
       id: ids.get("dropdown"),
       placeholder: "",
       onChange: value => this._handleChange(parseInt(value)),
       selectedValue: String(this.props.selected),
       disabled: this.props.apiOptions.readOnly,
-      "aria-label": this.props.ariaLabel || this.context.strings.selectAnAnswer,
-      "aria-labelledby": ids.get("dropdown-label")
+      "aria-label": this.props.ariaLabel || this.props.visibleLabel || this.context.strings.selectAnAnswer
       // This is currently necessary for SRs to read the labels properly.
       // However, WB is working on a change to add the "combobox" role to
       // all dropdowns.
@@ -28345,7 +28327,6 @@ class GradedGroupSet extends React__namespace.Component {
     currentGroup: 0
   };
   shouldComponentUpdate(nextProps, nextState) {
-    nextProps.gradedGroups;
     return nextProps !== this.props || nextState !== this.state;
   }
   change = (() => {
@@ -29869,7 +29850,7 @@ class Iframe extends React__namespace.Component {
     let data = {};
     try {
       data = JSON.parse(e.originalEvent.data);
-    } catch (err) {
+    } catch {
       return;
     }
     if (___default["default"].isUndefined(data.testsPassed)) {
@@ -30964,10 +30945,10 @@ class Graph extends React__namespace.Component {
       this.props.onMouseDown(coord);
     }, this) : undefined;
     const onMouseOver = $instructionsWrapper ? function () {
-      $instructionsWrapper && $instructionsWrapper.css("opacity", invisible);
+      $instructionsWrapper?.css("opacity", invisible);
     } : undefined;
     const onMouseOut = $instructionsWrapper ? function () {
-      $instructionsWrapper && $instructionsWrapper.css("opacity", visible);
+      $instructionsWrapper?.css("opacity", visible);
     } : undefined;
     /* eslint-enable indent */
 
@@ -31680,6 +31661,7 @@ function replaceOutsideTeX(mathString) {
   const parsed = mathOnlyParser(mathString);
   let result = "";
   for (const piece of parsed) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     piece.type === "math" ? result += "$" + piece.content + "$" : piece.type === "specialCharacter" ? result += escapeIfUnescaped(piece.content) : result += piece.content;
   }
   return `\\text{${result}}`;
@@ -32532,11 +32514,39 @@ const LegacyGrid = _ref => {
   return null;
 };
 
+/**
+ * The Perseus "data schema" file.
+ *
+ * This file, and the types in it, represents the "data schema" that Perseus
+ * uses. The @khanacademy/perseus-editor package edits and produces objects
+ * that conform to the types in this file. Similarly, the top-level renderers
+ * in @khanacademy/perseus, consume objects that conform to these types.
+ *
+ * WARNING: This file should not import any types from elsewhere so that it is
+ * easy to reason about changes that alter the Perseus schema. This helps
+ * ensure that it is not changed accidentally when upgrading a dependant
+ * package or other part of Perseus code. Note that TypeScript does type
+ * checking via something called "structural typing". This means that as long
+ * as the shape of a type matches, the name it goes by doesn't matter. As a
+ * result, a `Coord` type that looks like this `[x: number, y: number]` is
+ * _identical_, in TypeScript's eyes, to this `Vector2` type `[x: number, y:
+ * number]`. Also, with tuples, the labels for each entry is ignored, so `[x:
+ * number, y: number]` is compatible with `[min: number, max: number]`. The
+ * labels are for humans, not TypeScript. :)
+ *
+ * If you make changes to types in this file, be very sure that:
+ *
+ *   a) the changes are backwards compatible. If they are not, old data from
+ *      previous versions of the "schema" could become unrenderable, or worse,
+ *      introduce hard-to-diagnose bugs.
+ *   b) the parsing code (`util/parse-perseus-json/`) is updated to handle
+ *      the new format _as well as_ the old format.
+ */
+
 // TODO(FEI-4010): Remove `Perseus` prefix for all types here
-// TODO(FEI-4011): Use types generated by https://github.com/jaredly/generate-perseus-flowtypes
 
-// Range is replaced within this file with Interval, but it is used elsewhere
-// and exported from the package, so we need to keep it around.
+// Same name as Mafs
+
 /**
  * Our core set of Perseus widgets.
  *
@@ -32580,6 +32590,7 @@ const LegacyGrid = _ref => {
  *
  * @see {@link https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation}
  */
+
 /**
  * A map of widget IDs to widget options. This is most often used as the type
  * for a set of widgets defined in a `PerseusItem` but can also be useful to
@@ -32592,6 +32603,7 @@ const LegacyGrid = _ref => {
  * @see {@link PerseusWidgetTypes} additional widgets can be added to this map type
  * by augmenting the PerseusWidgetTypes with new widget types!
  */
+
 /**
  * A "PerseusItem" is a classic Perseus item. It is rendered by the
  * `ServerItemRenderer` and the layout is pre-set.
@@ -32599,10 +32611,12 @@ const LegacyGrid = _ref => {
  * To render more complex Perseus items, see the `Item` type in the multi item
  * area.
  */
+
 /**
  * A "PerseusArticle" is an item that is meant to be rendered as an article.
  * This item is never scored and is rendered by the `ArticleRenderer`.
  */
+
 const ItemExtras = [
 // The user might benefit from using a Scientific Calculator.  Provided on Khan Academy when true
 "calculator",
@@ -34619,42 +34633,64 @@ function renderPointGraph(state, dispatch) {
   };
 }
 function PointGraph(props) {
-  const numPoints = props.graphState.numPoints;
+  const {
+    numPoints
+  } = props.graphState;
+  const graphConfig = useGraphConfig();
+  const pointsRef = React__namespace.useRef([]);
+
+  // Dimensions to build the graph overlay for Unlimited Point.
+  const {
+    range: [x, y]
+  } = graphConfig;
+  const [[left, top]] = useTransformVectorsToPixels([x[0], y[1]]);
+
+  // This useEffect is to handle the focus snapping for Unlimited Point.
+  React__namespace.useEffect(() => {
+    const focusedIndex = props.graphState.focusedPointIndex;
+    if (focusedIndex != null) {
+      pointsRef.current[focusedIndex]?.focus();
+    }
+  }, [props.graphState.focusedPointIndex, pointsRef]);
+  const statefulProps = {
+    ...props,
+    graphConfig,
+    pointsRef,
+    top,
+    left
+  };
   if (numPoints === "unlimited") {
-    return UnlimitedPointGraph(props);
+    return UnlimitedPointGraph(statefulProps);
   }
-  return LimitedPointGraph(props);
+  return LimitedPointGraph(statefulProps);
 }
-function LimitedPointGraph(props) {
+function LimitedPointGraph(statefulProps) {
   const {
     dispatch
-  } = props;
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, props.graphState.coords.map((point, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+  } = statefulProps;
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, statefulProps.graphState.coords.map((point, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     key: i,
     point: point,
     sequenceNumber: i + 1,
     onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination))
   })));
 }
-function UnlimitedPointGraph(props) {
+function UnlimitedPointGraph(statefulProps) {
   const {
-    dispatch
-  } = props;
-  const graphConfig = useGraphConfig();
+    dispatch,
+    graphConfig,
+    pointsRef,
+    top,
+    left
+  } = statefulProps;
+  const {
+    coords
+  } = statefulProps.graphState;
   const {
-    range: [[minX, maxX], [minY, maxY]]
+    graphDimensionsInPixels
   } = graphConfig;
-  const width = maxX - minX;
-  const height = maxY - minY;
-  const [[widthPx, heightPx]] = useTransformDimensionsToPixels([width, height]);
-  const [[left, top]] = useTransformVectorsToPixels([minX, maxY]);
-  const itemsRef = React__namespace.useRef([]);
-  React__namespace.useEffect(() => {
-    const focusedIndex = props.graphState.focusedPointIndex;
-    if (focusedIndex != null) {
-      itemsRef.current[focusedIndex]?.focus();
-    }
-  }, [props.graphState.focusedPointIndex, itemsRef]);
+  const widthPx = graphDimensionsInPixels[0];
+  const heightPx = graphDimensionsInPixels[1];
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("rect", {
     style: {
       fill: "rgba(0,0,0,0)",
@@ -34671,13 +34707,13 @@ function UnlimitedPointGraph(props) {
       const graphCoordinates = pixelsToVectors([[x, y]], graphConfig);
       dispatch(actions.pointGraph.addPoint(graphCoordinates[0]));
     }
-  }), props.graphState.coords.map((point, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+  }), coords.map((point, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     key: i,
     point: point,
     sequenceNumber: i + 1,
     onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination)),
     ref: ref => {
-      itemsRef.current[i] = ref;
+      pointsRef.current[i] = ref;
     },
     onFocus: () => {
       dispatch(actions.pointGraph.focusPoint(i));
@@ -34728,36 +34764,42 @@ function renderPolygonGraph(state, dispatch) {
     interactiveElementsDescription: null
   };
 }
-const LimitedPolygonGraph = props => {
-  const [hovered, setHovered] = React__namespace.useState(false);
-  // This is more so required for the re-rendering that occurs when state
-  // updates; specifically with regard to line weighting and polygon focus.
-  const [focusVisible, setFocusVisible] = React__namespace.useState(false);
+const PolygonGraph = props => {
   const {
     dispatch
   } = props;
   const {
+    numSides,
     coords,
-    showAngles,
-    showSides,
-    range,
     snapStep,
     snapTo = "grid"
   } = props.graphState;
+  const graphConfig = useGraphConfig();
+
+  // Ref to implement the dragging behavior on a Limited/Closed Polygon.
+  const polygonRef = React__namespace.useRef(null);
+  // Ref to manage dynamic focus for the points in Unlimited Polygon
+  const pointsRef = React__namespace.useRef([]);
+  // Ref to manage the last move time for a Limited Polygon.
+  const lastMoveTimeRef = React__namespace.useRef(0);
+
+  // Dimensions to build the graph overlay for Unlimited Polgyon.
   const {
-    disableKeyboardInteraction
-  } = useGraphConfig();
+    range: [x, y]
+  } = graphConfig;
+  const [[left, top]] = useTransformVectorsToPixels([x[0], y[1]]);
 
   // TODO(benchristel): can the default set of points be removed here? I don't
   // think coords can be null.
   const points = coords ?? [[0, 0]];
-  const ref = React__namespace.useRef(null);
+
+  // Logic to build the dragging experience. Primarily used by Limited Polygon.
   const dragReferencePoint = points[0];
   const constrain = ["angles", "sides"].includes(snapTo) ? p => p : p => snap(snapStep, p);
   const {
     dragging
   } = useDraggable({
-    gestureTarget: ref,
+    gestureTarget: polygonRef,
     point: dragReferencePoint,
     onMove: newPoint => {
       const delta = mafs.vec.sub(newPoint, dragReferencePoint);
@@ -34765,7 +34807,61 @@ const LimitedPolygonGraph = props => {
     },
     constrainKeyboardMovement: constrain
   });
-  const lastMoveTime = React__namespace.useRef(0);
+
+  // Hover/focus state for Limited Polgyon effects.
+  const [hovered, setHovered] = React__namespace.useState(false);
+  // This is more so required for the re-rendering that occurs when state
+  // updates; specifically with regard to line weighting and polygon focus.
+  const [focusVisible, setFocusVisible] = React__namespace.useState(false);
+
+  // This useEffect is to handle the focus snapping for Unlimited Polygon.
+  React__namespace.useEffect(() => {
+    const focusedIndex = props.graphState.focusedPointIndex;
+    if (focusedIndex != null) {
+      pointsRef.current[focusedIndex]?.focus();
+    }
+  }, [props.graphState.focusedPointIndex, pointsRef]);
+  const statefulProps = {
+    ...props,
+    graphConfig,
+    polygonRef,
+    pointsRef,
+    lastMoveTimeRef,
+    left,
+    top,
+    dragging,
+    points,
+    constrain,
+    hovered,
+    setHovered,
+    focusVisible,
+    setFocusVisible
+  };
+  return numSides === "unlimited" ? UnlimitedPolygonGraph(statefulProps) : LimitedPolygonGraph(statefulProps);
+};
+const LimitedPolygonGraph = statefulProps => {
+  const {
+    dispatch,
+    hovered,
+    setHovered,
+    focusVisible,
+    setFocusVisible,
+    graphConfig,
+    polygonRef,
+    lastMoveTimeRef,
+    dragging,
+    points,
+    constrain
+  } = statefulProps;
+  const {
+    showAngles,
+    showSides,
+    range,
+    snapTo = "grid"
+  } = statefulProps.graphState;
+  const {
+    disableKeyboardInteraction
+  } = graphConfig;
   const lines = getLines(points);
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Polygon, {
     points: [...points],
@@ -34804,7 +34900,7 @@ const LimitedPolygonGraph = props => {
     points: [...points],
     color: "transparent",
     svgPolygonProps: {
-      ref,
+      ref: polygonRef,
       tabIndex: disableKeyboardInteraction ? -1 : 0,
       strokeWidth: TARGET_SIZE,
       style: {
@@ -34816,13 +34912,13 @@ const LimitedPolygonGraph = props => {
       // Required to remove line weighting when user clicks away
       // from the focused polygon
       onKeyDownCapture: () => {
-        setFocusVisible(hasFocusVisible(ref.current));
+        setFocusVisible(hasFocusVisible(polygonRef.current));
       },
       // Required for lines to darken on focus
-      onFocus: () => setFocusVisible(hasFocusVisible(ref.current)),
+      onFocus: () => setFocusVisible(hasFocusVisible(polygonRef.current)),
       // Required for line weighting to update on blur. Without this,
       // the user has to hover over the shape for it to update
-      onBlur: () => setFocusVisible(hasFocusVisible(ref.current)),
+      onBlur: () => setFocusVisible(hasFocusVisible(polygonRef.current)),
       className: "movable-polygon"
     }
   }), points.map((point, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
@@ -34834,94 +34930,86 @@ const LimitedPolygonGraph = props => {
       const now = Date.now();
       const targetFPS = 40;
       const moveThresholdTime = 1000 / targetFPS;
-      if (now - lastMoveTime.current > moveThresholdTime) {
+      if (now - lastMoveTimeRef.current > moveThresholdTime) {
         dispatch(actions.polygon.movePoint(i, destination));
-        lastMoveTime.current = now;
+        lastMoveTimeRef.current = now;
       }
     }
   })));
 };
-const UnlimitedPolygonGraph = props => {
+const UnlimitedPolygonGraph = statefulProps => {
   const {
-    dispatch
-  } = props;
+    dispatch,
+    graphConfig,
+    left,
+    top,
+    pointsRef,
+    points
+  } = statefulProps;
   const {
     coords,
     closedPolygon
-  } = props.graphState;
-  const graphConfig = useGraphConfig();
-  const {
-    range: [x, y],
-    graphDimensionsInPixels
-  } = graphConfig;
-  const widthPx = graphDimensionsInPixels[0];
-  const heightPx = graphDimensionsInPixels[1];
-  const [[left, top]] = useTransformVectorsToPixels([x[0], y[1]]);
-  const pointRef = React__namespace.useRef([]);
+  } = statefulProps.graphState;
 
-  // TODO(benchristel): can the default set of points be removed here? I don't
-  // think coords can be null.
-  const points = coords ?? [[0, 0]];
-  React__namespace.useEffect(() => {
-    const focusedIndex = props.graphState.focusedPointIndex;
-    if (focusedIndex != null) {
-      pointRef.current[focusedIndex]?.focus();
-    }
-  }, [props.graphState.focusedPointIndex, pointRef]);
+  // If the polygon is closed, return a LimitedPolygon component.
   if (closedPolygon) {
     const closedPolygonProps = {
-      ...props,
+      ...statefulProps,
       numSides: coords.length
     };
     return /*#__PURE__*/React__namespace.createElement(LimitedPolygonGraph, closedPolygonProps);
-  } else {
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("rect", {
+  }
+  const {
+    graphDimensionsInPixels
+  } = graphConfig;
+  const widthPx = graphDimensionsInPixels[0];
+  const heightPx = graphDimensionsInPixels[1];
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("rect", {
+    style: {
+      fill: "rgba(0,0,0,0)",
+      cursor: "crosshair"
+    },
+    width: widthPx,
+    height: heightPx,
+    x: left,
+    y: top,
+    onClick: event => {
+      const elementRect = event.currentTarget.getBoundingClientRect();
+      const x = event.clientX - elementRect.x;
+      const y = event.clientY - elementRect.y;
+      const graphCoordinates = pixelsToVectors([[x, y]], graphConfig);
+      dispatch(actions.polygon.addPoint(graphCoordinates[0]));
+    }
+  }), /*#__PURE__*/React__namespace.createElement(mafs.Polyline, {
+    points: [...points],
+    color: "var(--movable-line-stroke-color)",
+    svgPolylineProps: {
+      strokeWidth: "var(--movable-line-stroke-weight)",
       style: {
-        fill: "rgba(0,0,0,0)",
-        cursor: "crosshair"
-      },
-      width: widthPx,
-      height: heightPx,
-      x: left,
-      y: top,
-      onClick: event => {
-        const elementRect = event.currentTarget.getBoundingClientRect();
-        const x = event.clientX - elementRect.x;
-        const y = event.clientY - elementRect.y;
-        const graphCoordinates = pixelsToVectors([[x, y]], graphConfig);
-        dispatch(actions.polygon.addPoint(graphCoordinates[0]));
-      }
-    }), /*#__PURE__*/React__namespace.createElement(mafs.Polyline, {
-      points: [...points],
-      color: "var(--movable-line-stroke-color)",
-      svgPolylineProps: {
-        strokeWidth: "var(--movable-line-stroke-weight)",
-        style: {
-          fill: "transparent"
-        }
+        fill: "transparent"
       }
-    }), props.graphState.coords.map((point, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
-      key: i,
-      point: point,
-      sequenceNumber: i + 1,
-      onMove: destination => dispatch(actions.polygon.movePoint(i, destination)),
-      ref: ref => {
-        pointRef.current[i] = ref;
-      },
-      onFocus: () => {
-        dispatch(actions.polygon.focusPoint(i));
-      },
-      onClick: () => {
-        // If the point being clicked is the first point and
-        // there's enough points to form a polygon (3 or more)
-        // Close the shape before setting focus.
-        if (i === 0 && props.graphState.coords.length >= 3) {
-          dispatch(actions.polygon.closePolygon());
-        }
-        dispatch(actions.polygon.clickPoint(i));
+    }
+  }), coords.map((point, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+    key: i,
+    point: point,
+    sequenceNumber: i + 1,
+    onMove: destination => dispatch(actions.polygon.movePoint(i, destination)),
+    ref: ref => {
+      pointsRef.current[i] = ref;
+    },
+    onFocus: () => {
+      dispatch(actions.polygon.focusPoint(i));
+    },
+    onClick: () => {
+      // If the point being clicked is the first point and
+      // there's enough points to form a polygon (3 or more)
+      // Close the shape before setting focus.
+      if (i === 0 && coords.length >= 3) {
+        dispatch(actions.polygon.closePolygon());
       }
-    })));
-  }
+      dispatch(actions.polygon.clickPoint(i));
+    }
+  })));
 };
 function getLines(points) {
   return points.map((point, i) => {
@@ -34933,17 +35021,13 @@ const hasFocusVisible = element => {
   const matches = selector => element?.matches(selector) ?? false;
   try {
     return matches(":focus-visible");
-  } catch (e) {
+  } catch {
     // jsdom doesn't support :focus-visible
     // (see https://github.com/jsdom/jsdom/issues/3426),
     // so the call to matches(":focus-visible") will fail in tests.
     return matches(":focus");
   }
 };
-const PolygonGraph = props => {
-  const numSides = props.graphState.numSides;
-  return numSides === "unlimited" ? UnlimitedPolygonGraph(props) : LimitedPolygonGraph(props);
-};
 
 function renderQuadraticGraph(state, dispatch) {
   return {
@@ -40364,7 +40448,7 @@ class Sortable extends React__namespace.Component {
     this.setState({
       items
     }, () => {
-      this.props.onMeasure && this.props.onMeasure({
+      this.props.onMeasure?.({
         widths: widths,
         heights: heights
       });
@@ -40414,7 +40498,7 @@ class Sortable extends React__namespace.Component {
     this.setState({
       items: nextItems
     });
-    this.props.onChange && this.props.onChange({});
+    this.props.onChange?.({});
   }
   onMouseMove(key) {
     // Dragging: Rearrange items based on draggable's position
@@ -40494,7 +40578,7 @@ class Sortable extends React__namespace.Component {
       // HACK: We need to know *that* the widget changed, but currently it's
       // not set up in a nice way to tell us *how* it changed, since the
       // permutation of the items is stored in state.
-      this.props.onChange && this.props.onChange({});
+      this.props.onChange?.({});
     });
 
     // @ts-expect-error - TS2339 - Property 'animationFrameRequest' does not exist on type 'Sortable'.
@@ -43219,7 +43303,7 @@ class Card extends React__namespace.Component {
         dragging: true
       });
       this.bindMouseMoveUp();
-      this.props.onMouseDown && this.props.onMouseDown(loc, this);
+      this.props.onMouseDown?.(loc, this);
     }
   };
   onMouseMove = event => {
@@ -43229,7 +43313,7 @@ class Card extends React__namespace.Component {
     event.preventDefault();
     const loc = Util.extractPointerLocation(event);
     if (loc) {
-      this.props.onMouseMove && this.props.onMouseMove(loc);
+      this.props.onMouseMove?.(loc);
     }
   };
   onMouseUp = event => {
@@ -43240,7 +43324,7 @@ class Card extends React__namespace.Component {
         dragging: false
       });
       this.unbindMouseMoveUp();
-      this.props.onMouseUp && this.props.onMouseUp(loc);
+      this.props.onMouseUp?.(loc);
     }
   };
   render() {
@@ -45446,7 +45530,7 @@ const init = function () {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "47.0.0";
+const libVersion = "48.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -46206,28 +46290,6 @@ class ServerItemRenderer extends React__namespace.Component {
     return this.questionRenderer.getUserInputMap();
   }
 
-  /**
-   * Grades the item.
-   *
-   * @deprecated use scorePerseusItem
-   */
-  scoreInput() {
-    const guess = this.getUserInput();
-    const score = scorePerseusItem(this.props.item.question, guess, this.context.strings, this.context.locale);
-
-    // Continue to include an empty guess for the now defunct answer area.
-    // TODO(alex): Check whether we rely on the format here for
-    //             analyzing ProblemLogs. If not, remove this layer.
-    const maxCompatGuess = [this.questionRenderer.getUserInput(), []];
-    const keScore = keScoreFromPerseusScore(score, maxCompatGuess, this.questionRenderer.getSerializedState());
-    const emptyQuestionAreaWidgets = this.questionRenderer.emptyWidgets();
-    this.setState({
-      questionCompleted: keScore.correct,
-      questionHighlightedWidgets: emptyQuestionAreaWidgets
-    });
-    return keScore;
-  }
-
   /**
    * Returns an array of all widget IDs in the order they occur in
    * the question content.