@khanacademy/perseus 20.1.0 → 20.3.0

package/dist/index.css

@@ -2363,7 +2363,7 @@ img.zoom-img {
 }
 .framework-perseus .perseus-renderer > .paragraph > ul:not(.perseus-widget-radio),
 .framework-perseus .perseus-renderer > .paragraph > ol {
-  margin: -11px 0px 22px 0px;
+  margin: 0px 0px 22px 0px;
 }
 .framework-perseus .paragraph ul:not(.perseus-widget-radio, .indicatorContainer) {
   padding-left: 35px;
@@ -4258,18 +4258,24 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     --mafs-bg: transparent;
     --mafs-fg: rgb(33, 36, 44); /* WB color.offBlack */
 
-    --mafs-line-color: rgb(33, 36, 44, 0.64); /* WB color.offBlack64 */
-    --grid-line-subdivision-color: rgba(33, 36, 44, 0.16);
+    --mafs-line-color: rgba(33, 36, 44, 0.16); /* WB color.offBlack16*/
 
     --mafs-blue: #1865f2; /* WB color.blue */
     --mafs-red: #d92916; /* WB color.red */
     --mafs-green: #00a60e; /* WB color.green */
     --mafs-violet: #9059ff; /* WB color.purple */
     --mafs-yellow: #ffb100; /* WB color.gold */
+
+    /* overridden on a per-point basis */
+    --movable-point-color: var(--mafs-blue);
+    --movable-point-center-radius: 6px;
+    --movable-point-ring-radius: calc(2px + var(--movable-point-center-radius));
+    --movable-point-halo-radius: calc(3px + var(--movable-point-ring-radius));
+    --movable-point-hover-expansion: 2px;
 }
 
 .MafsView .movable-segment {
-    --mafs-segment-stroke-color: var(--mafs-line-color);
+    --mafs-segment-stroke-color: rgba(33, 36, 44, 0.64); /* offBlack64 */
     --mafs-segment-stroke-weight: 2px;
 }
 
@@ -4282,3 +4288,51 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
 .MafsView .movable-segment:focus {
     outline: none;
 }
+
+.MafsView .movable-point-hitbox {
+    fill: transparent;
+}
+
+.MafsView :is(.movable-point-center, .movable-point-ring, .movable-point-halo) {
+    transition: r 0.15s ease-out;
+}
+
+.MafsView .movable-point-center {
+    r: var(--movable-point-center-radius);
+}
+
+.MafsView .movable-point-halo {
+    r: var(--movable-point-halo-radius);
+    fill: var(--movable-point-color);
+    opacity: 0.25;
+    filter: drop-shadow(0 5px 5px #0008);
+}
+
+.MafsView .movable-point-ring {
+    r: var(--movable-point-ring-radius);
+    fill: #fff;
+}
+
+.MafsView .movable-point:hover .movable-point-center {
+    r: calc(
+        var(--movable-point-hover-expansion) +
+            var(--movable-point-center-radius)
+    );
+}
+
+.MafsView .movable-point:hover .movable-point-ring {
+    r: calc(
+        var(--movable-point-hover-expansion) + var(--movable-point-ring-radius)
+    );
+}
+
+.MafsView .movable-point:hover .movable-point-halo {
+    r: calc(
+        var(--movable-point-hover-expansion) + var(--movable-point-halo-radius)
+    );
+}
+
+.MafsView .movable-point:focus-visible .movable-point-halo {
+    outline: 2px solid blue;
+    border-radius: 99px;
+}

package/dist/index.d.ts

@@ -83,7 +83,7 @@ export type { ILogger, LogErrorOptions, ErrorKind } from "./logging/log";
 export type { ServerItemRenderer as ServerItemRendererComponent } from "./server-item-renderer";
 export type { Alignment, APIOptions, APIOptionsWithDefaults, ChangeHandler, DeviceType, DomInsertCheckFn, EditorMode, FocusPath, Hint, ImageDict, ImageUploader, JiptLabelStore, JiptRenderer, PerseusDependencies, PerseusScore, Version, VideoData, VideoKind, WidgetDict, WidgetExports, } from "./types";
 export type { ParsedValue } from "./util";
-export type { PerseusAnswerArea, PerseusExpressionWidgetOptions, Range, Size, MathFormat, InputNumberWidget, // TODO(jeremy): remove?
+export type { LockedFigure, LockedFigureType, LockedPoint, PerseusGraphType, PerseusAnswerArea, PerseusExpressionWidgetOptions, Range, Size, MathFormat, InputNumberWidget, // TODO(jeremy): remove?
 PerseusImageBackground, PerseusInputNumberWidgetOptions, PerseusInteractiveGraphWidgetOptions, PerseusItem, PerseusPlotterWidgetOptions, PerseusPythonProgramWidgetOptions, PerseusRadioWidgetOptions, PerseusExampleWidgetOptions, PerseusExampleGraphieWidgetOptions, PerseusSimpleMarkdownTesterWidgetOptions, PerseusRenderer, PerseusWidget, PerseusWidgetsMap, } from "./perseus-types";
 export type { Coord } from "./interactive2/types";
 export type { MarkerType } from "./widgets/label-image/types";

package/dist/index.js

@@ -29,6 +29,8 @@ var Button = require('@khanacademy/wonder-blocks-button');
 var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
 var Banner = require('@khanacademy/wonder-blocks-banner');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
+var caretDown = require('@phosphor-icons/core/assets/regular/caret-down.svg');
+var caretUp = require('@phosphor-icons/core/assets/regular/caret-up.svg');
 var debounce$1 = require('lodash.debounce');
 var mafs = require('mafs');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
@@ -79,6 +81,8 @@ var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var SimpleMarkdown__default = /*#__PURE__*/_interopDefaultLegacy(SimpleMarkdown);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Banner__default = /*#__PURE__*/_interopDefaultLegacy(Banner);
+var caretDown__default = /*#__PURE__*/_interopDefaultLegacy(caretDown);
+var caretUp__default = /*#__PURE__*/_interopDefaultLegacy(caretUp);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce$1);
 var questionIcon__default = /*#__PURE__*/_interopDefaultLegacy(questionIcon);
 var createReactClass__default = /*#__PURE__*/_interopDefaultLegacy(createReactClass);
@@ -2705,11 +2709,14 @@ function combineScores(scoreA, scoreB) {
     }
   });
 }
+function isCorrect(score) {
+  return score.type === "points" && score.earned >= score.total;
+}
 function keScoreFromPerseusScore(score, guess, state) {
   if (score.type === "points") {
     return {
       empty: false,
-      correct: score.earned >= score.total,
+      correct: isCorrect(score),
       message: score.message,
       guess: guess,
       state: state
@@ -15001,7 +15008,7 @@ const DEFAULT_STATE$1 = {
 // TODO(benchristel): this is a memory leak. We add items to
 // tooltipResetFunctions, but never remove them.
 const tooltipResetFunctions = [];
-class MovablePoint$4 {
+class MovablePoint$5 {
   // @ts-expect-error - TS2564: Property 'prevState' has no initializer and is not definitely assigned in the constructor.
 
   _listenerMap = {};
@@ -16129,10 +16136,10 @@ ___default["default"].extend(MovablePolygon.prototype, {
 });
 
 const Interactive2 = {
-  MovablePoint: MovablePoint$4,
+  MovablePoint: MovablePoint$5,
   addMovablePoint: function (graphie, options) {
     const movable = new Movable(graphie, {});
-    return new MovablePoint$4(graphie, movable, options);
+    return new MovablePoint$5(graphie, movable, options);
   },
   MovableLine: MovableLine$3,
   addMovableLine: function (graphie, options) {
@@ -16174,7 +16181,7 @@ const Interactive2 = {
   }
 };
 
-const MovablePoint$3 = GraphieClasses.createClass({
+const MovablePoint$4 = GraphieClasses.createClass({
   displayName: "MovablePoint",
   movableProps: ["children"],
   _getProps: function () {
@@ -16232,7 +16239,7 @@ const MovablePoint$3 = GraphieClasses.createClass({
 });
 
 // Include helper methods, such as MovablePoint.constrain.snap()
-___default["default"].extend(MovablePoint$3, Interactive2.MovablePoint);
+___default["default"].extend(MovablePoint$4, Interactive2.MovablePoint);
 const MovableLine$2 = GraphieClasses.createClass({
   displayName: "MovableLine",
   movableProps: ["children"],
@@ -16402,7 +16409,7 @@ var Movables = {
   Label: Label$1,
   Line: Line$2,
   MovableLine: MovableLine$2,
-  MovablePoint: MovablePoint$3,
+  MovablePoint: MovablePoint$4,
   Parabola: Parabola,
   Path: Path,
   Plot: Plot$2,
@@ -25007,57 +25014,42 @@ class Explanation extends React__namespace.Component {
     this.props.trackInteraction();
   };
   render() {
-    const {
-      isArticle,
-      isMobile
-    } = this.props.apiOptions;
     const promptText = this.state.expanded ? this.props.hidePrompt : this.props.showPrompt;
-    let promptContainer;
-
-    // TODO(diedra): This isn't a valid href;
-    // change this to a button that looks like a link.
-    const href = "javascript:void(0)";
-    const onClick = this._onClick;
-    if (isMobile) {
-      promptContainer = /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles$p.linkContainer)
-      }, /*#__PURE__*/React__namespace.createElement("a", {
-        className: aphrodite.css(styles$p.mobileExplanationLink),
-        href: href,
-        onClick: onClick,
-        role: "button",
-        "aria-expanded": this.state.expanded
-      }, promptText), this.state.expanded && /*#__PURE__*/React__namespace.createElement("svg", {
-        className: aphrodite.css(styles$p.disclosureArrow)
-      }, /*#__PURE__*/React__namespace.createElement("polygon", {
-        style: {
-          fill: backgroundColor
-        },
-        points: `0,${arrowHeight} ` + `${arrowWidth},${arrowHeight} ` + `${arrowWidth / 2},0`
-      })));
-    } else {
-      const viewStyling = isArticle ? [styles$p.explanationLink, styles$p.articleLink] : [styles$p.explanationLink, styles$p.exerciseLink];
-      promptContainer = /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
-        onClick: onClick,
-        "aria-expanded": this.state.expanded
-      }, () => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-        style: viewStyling
-      }, `[${promptText}]`));
-    }
-    const expandedStyle = isMobile ? styles$p.contentExpandedMobile : styles$p.contentExpanded;
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$p.container)
-    }, promptContainer, this.state.expanded && /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$p.content, isMobile && styles$p.contentMobile, this.state.expanded && expandedStyle)
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "content"
+    const caretIcon = this.state.expanded ? caretUp__default["default"] : caretDown__default["default"];
+    const allowTransition = window.matchMedia("(prefers-reduced-motion: no-preference)").matches;
+
+    // Special styling is needed to fit the button in a block of text without throwing off the line spacing.
+    // While the button is not normally included in a block of text, it needs to be able to accommodate such a case.
+    const buttonStyleOverrides = {
+      height: "22px",
+      marginLeft: "-2px",
+      padding: "0 2px"
+    };
+    const contentStyling = [styles$p.content, this.state.expanded ? styles$p.contentExpanded : styles$p.contentCollapsed, allowTransition && (this.state.expanded ? styles$p.transitionExpanded : styles$p.transitionCollapsed)];
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.UniqueIDProvider, {
+      mockOnFirstRender: false,
+      scope: "explanation-widget"
+    }, ids => /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+      "aria-expanded": this.state.expanded,
+      "aria-controls": ids.get("content"),
+      endIcon: caretIcon,
+      kind: "tertiary",
+      onClick: this._onClick,
+      size: "large",
+      style: buttonStyleOverrides
+    }, promptText), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      id: ids.get("content"),
+      style: contentStyling,
+      "aria-hidden": !this.state.expanded,
+      testId: "content-container"
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$p.contentWrapper
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       apiOptions: this.props.apiOptions,
       content: this.props.explanation,
       widgets: this.props.widgets,
       linterContext: this.props.linterContext
-    })));
+    })))));
   }
   getUserInput = () => {
     return {};
@@ -25068,94 +25060,44 @@ class Explanation extends React__namespace.Component {
 }
 const leftBorderSpacing = 23;
 const verticalContentPadding = 10;
-const arrowWidth = 30;
 const arrowHeight = 14;
-const backgroundColor = gray95;
 const styles$p = aphrodite.StyleSheet.create({
-  container: {
-    display: "inline",
+  content: {
+    borderLeft: "0px solid #ccc",
+    display: "inline-grid",
     position: "relative"
   },
-  linkContainer: {
-    display: "inline-block"
-  },
-  explanationLink: {
-    fontStyle: "italic",
-    color: "#007d96"
-  },
-  articleLink: {
-    // Copied from .body-text in articles.less
-    fontSize: 20,
-    lineHeight: "30px"
-  },
-  exerciseLink: {
-    // Copied from .legacy-typography in util.less
-    fontSize: 14,
-    lineHeight: "19.6px"
-  },
-  mobileExplanationLink: {
-    color: kaGreen$1,
-    borderBottom: `dashed 1px ${kaGreen$1}`,
-    textDecoration: "none",
-    // TODO(benkomalo): these should be pulled in from common typography
-    // shared files so we have a single place where the type hierarchy is
-    // defined; one off font sizes for individual components should be
-    // avoided.
-    [mediaQueries.xl]: {
-      fontSize: 22,
-      lineHeight: 1.4
-    },
-    [mediaQueries.lgOrSmaller]: {
-      fontSize: 20,
-      lineHeight: 1.5
-    },
-    [mediaQueries.smOrSmaller]: {
-      fontSize: 18,
-      lineHeight: 1.2
-    }
-  },
-  content: {
-    position: "relative",
-    transition: "margin-top 0.1s"
+  contentCollapsed: {
+    gridTemplateColumns: "0fr",
+    gridTemplateRows: "0fr",
+    marginBottom: 0,
+    marginTop: 0,
+    minWidth: "0",
+    paddingBottom: 0,
+    visibility: "hidden"
   },
   contentExpanded: {
-    borderLeft: "5px solid #ccc",
+    borderLeftWidth: "5px",
+    gridTemplateColumns: "1fr",
+    gridTemplateRows: "1fr",
     marginLeft: -leftBorderSpacing,
+    minWidth: "100%",
     paddingLeft: leftBorderSpacing,
     paddingBottom: verticalContentPadding,
+    visibility: "visible",
     // Note: we still use arrow height as the vertical margin, even on
     // desktop when there is no arrow, but it's good enough.
     marginBottom: arrowHeight,
     marginTop: arrowHeight
   },
-  contentExpandedMobile: {
-    boxSizing: "content-box",
-    paddingTop: 32,
-    paddingBottom: 32,
-    marginTop: arrowHeight
+  contentWrapper: {
+    overflow: "hidden"
   },
-  contentMobile: {
-    background: backgroundColor,
-    // TODO(benkomalo): this is to "full bleed" the background.
-    // The actual content padding differs depending on the host
-    // container, so this needs to be fixed eventually.
-    marginLeft: negativePhoneMargin,
-    marginRight: negativePhoneMargin,
-    paddingLeft: phoneMargin,
-    paddingRight: phoneMargin
-  },
-  disclosureArrow: {
-    // HACK - positioning at "bottom: 0", doesn't actually position it to
-    // the real bottom, because the container is `inline-block`, and it
-    // seems to position it to the baseline? We put in a generous
-    // fudge factor to position it down to be flush with the content box
-    // below it.
-    bottom: -(arrowHeight + 5),
-    height: arrowHeight,
-    left: "50%",
-    marginLeft: -(arrowWidth / 2),
-    position: "absolute",
-    width: arrowWidth
+  transitionCollapsed: {
+    transition: "all 0.25s step-end, grid-template-rows 0.25s, margin-top 0.25s, margin-bottom 0.25s, padding-bottom 0.25s"
+  },
+  transitionExpanded: {
+    transition: "grid-template-rows 0.5s, margin-top 0.5s, margin-bottom 0.5s, padding-bottom 0.5s"
   }
 });
 var Explanation$1 = {
@@ -26482,7 +26424,7 @@ var util = /*#__PURE__*/Object.freeze({
 });
 
 // @ts-expect-error - TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'.
-const MovablePoint$2 = Graphie.MovablePoint;
+const MovablePoint$3 = Graphie.MovablePoint;
 // @ts-expect-error - TS2339 - Property 'MovableLine' does not exist on type 'typeof Graphie'.
 const MovableLine$1 = Graphie.MovableLine;
 function isFlipped(newCoord, oldCoord, line) {
@@ -26528,7 +26470,7 @@ class FunctionGrapher extends React__namespace.Component {
   })();
   render() {
     const pointForCoord = (coord, i) => {
-      return /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
+      return /*#__PURE__*/React__namespace.createElement(MovablePoint$3, {
         key: i,
         coord: coord,
         static: this.props.static,
@@ -26665,7 +26607,7 @@ class FunctionGrapher extends React__namespace.Component {
       }],
       normalStyle: dashed,
       highlightStyle: dashed
-    }, ___default["default"].map(asymptote, (coord, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
+    }, ___default["default"].map(asymptote, (coord, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$3, {
       key: `asymptoteCoord-${i}`,
       coord: coord,
       static: true,
@@ -27428,7 +27370,7 @@ const Label = Graphie.Label;
 // @ts-expect-error - TS2339 - Property 'Line' does not exist on type 'typeof Graphie'.
 const Line$1 = Graphie.Line;
 // @ts-expect-error - TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'.
-const MovablePoint$1 = Graphie.MovablePoint;
+const MovablePoint$2 = Graphie.MovablePoint;
 // @ts-expect-error - TS2339 - Property 'MovableLine' does not exist on type 'typeof Graphie'.
 const MovableLine = Graphie.MovableLine;
 // @ts-expect-error - TS2339 - Property 'Plot' does not exist on type 'typeof Graphie'.
@@ -27682,7 +27624,7 @@ class Interaction extends React__namespace.Component {
           return [coordX, coordY];
         }];
         if (element.options.constraint === "snap") {
-          constraints.push(MovablePoint$1.constraints.snap(element.options.snap));
+          constraints.push(MovablePoint$2.constraints.snap(element.options.snap));
         } else if (element.options.constraint === "x") {
           constraints.push(coord => {
             return [
@@ -27704,7 +27646,7 @@ class Interaction extends React__namespace.Component {
         // TODO(eater): foo_[xyz] are hacky non-props to
         // get the component to update when constraints
         // change
-        return /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+        return /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
           key: element.key,
           coord: [
           // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
@@ -27739,7 +27681,7 @@ class Interaction extends React__namespace.Component {
           return [coordX, coordY];
         }];
         if (element.options.constraint === "snap") {
-          constraints.push(MovablePoint$1.constraints.snap(element.options.snap));
+          constraints.push(MovablePoint$2.constraints.snap(element.options.snap));
         } else if (element.options.constraint === "x") {
           constraints.push(coord => {
             return [
@@ -27780,14 +27722,14 @@ class Interaction extends React__namespace.Component {
           foo_x: element.options.constraint,
           foo_y: element.options.constraintFn,
           foo_z: element.options.snap
-        }, /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+        }, /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
           coord: start,
           static: true,
           normalStyle: {
             stroke: "none",
             fill: "none"
           }
-        }), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+        }), /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
           coord: end,
           static: true,
           normalStyle: {
@@ -28238,33 +28180,6 @@ class Graph extends React__namespace.Component {
       allowScratchpad: true,
       setDrawingAreaAvailable: this.props.setDrawingAreaAvailable
     });
-
-    // Maybe move this out later
-    if (this.props.lockedFigures) {
-      for (const lockedFigure of this.props.lockedFigures) {
-        switch (lockedFigure.type) {
-          case "point":
-            graphie.circle(
-            // center
-            lockedFigure.coord,
-            // radius
-            0.2,
-            // style
-            lockedFigure.style);
-            break;
-          default:
-            /**
-             * Devlopment-time future-proofing: This `never` should
-             * fail during type-checking if we add a new locked
-             * shape type and forget to handle it in any other
-             * switch case here.
-             */
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            lockedFigure.type;
-            throw new Error(`Unknown locked shape type: ${lockedFigure.type}`);
-        }
-      }
-    }
     this._updateProtractor();
     this._updateRuler();
 
@@ -28357,6 +28272,35 @@ class Graph extends React__namespace.Component {
   }
 }
 
+const GraphLockedLayer = props => {
+  const {
+    lockedFigures
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, lockedFigures.map((figure, index) => {
+    switch (figure.type) {
+      case "point":
+        const [x, y] = figure.coord;
+        return /*#__PURE__*/React__namespace.createElement(mafs.Point, {
+          key: `${figure.type}-${index}`,
+          x: x,
+          y: y,
+          svgCircleProps: {
+            style: figure.style
+          }
+        });
+    }
+
+    /**
+     * Devlopment-time future-proofing: This `never` should
+     * fail during type-checking if we add a new locked
+     * shape type and forget to handle it in any other
+     * switch case here.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    throw new wonderStuffCore.UnreachableCaseError(figure.type);
+  }));
+};
+
 const MOVE_CONTROL_POINT = "move-control-point";
 function moveControlPoint(objectIndex, pointIndex, destination) {
   return {
@@ -28375,6 +28319,59 @@ function moveSegment(segmentIndex, delta) {
   };
 }
 
+const MovablePoint$1 = props => {
+  const hitboxRef = React.useRef(null);
+  const {
+    point,
+    onMove
+  } = props;
+  const {
+    dragging
+  } = mafs.useMovable({
+    gestureTarget: hitboxRef,
+    point,
+    onMove,
+    constrain: p => p
+  });
+  const {
+    viewTransform,
+    userTransform
+  } = mafs.useTransformContext();
+  const transformToPx = mafs.vec.matrixMult(viewTransform, userTransform);
+  const [x, y] = mafs.vec.transform(point, transformToPx);
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    ref: hitboxRef,
+    className: "movable-point",
+    tabIndex: 0,
+    style: {
+      cursor: dragging ? "grabbing" : "grab",
+      touchAction: "none",
+      outline: "none",
+      "--movable-point-color": Color__default["default"].blue
+    }
+  }, /*#__PURE__*/React__namespace.createElement("circle", {
+    className: "movable-point-hitbox",
+    r: 30,
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React__namespace.createElement("circle", {
+    className: "movable-point-halo",
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React__namespace.createElement("circle", {
+    className: "movable-point-ring",
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React__namespace.createElement("circle", {
+    className: "movable-point-center",
+    cx: x,
+    cy: y,
+    style: {
+      fill: Color__default["default"].blue
+    }
+  }));
+};
+
 const SegmentGraph = props => {
   const {
     dispatch
@@ -28417,9 +28414,9 @@ const SegmentView = props => {
     viewTransform,
     userTransform
   } = mafs.useTransformContext();
-  const transform = mafs.vec.matrixMult(viewTransform, userTransform);
-  const scaledPoint1 = mafs.vec.transform(pt1, transform);
-  const scaledPoint2 = mafs.vec.transform(pt2, transform);
+  const transformToPx = mafs.vec.matrixMult(viewTransform, userTransform);
+  const pt1Px = mafs.vec.transform(pt1, transformToPx);
+  const pt2Px = mafs.vec.transform(pt2, transformToPx);
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("g", {
     ref: segment,
     tabIndex: 0,
@@ -28428,28 +28425,26 @@ const SegmentView = props => {
       cursor: isDraggingSegment ? "grabbing" : "grab"
     }
   }, /*#__PURE__*/React__namespace.createElement(SVGLine, {
-    start: scaledPoint1,
-    end: scaledPoint2,
+    start: pt1Px,
+    end: pt2Px,
     style: {
       stroke: "transparent",
       strokeWidth: 30
     }
   }), /*#__PURE__*/React__namespace.createElement(SVGLine, {
-    start: scaledPoint1,
-    end: scaledPoint2,
+    start: pt1Px,
+    end: pt2Px,
     style: {
       stroke: "var(--mafs-segment-stroke-color)",
       strokeWidth: "var(--mafs-segment-stroke-weight)"
     }
-  })), /*#__PURE__*/React__namespace.createElement(mafs.MovablePoint, {
+  })), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     point: pt1,
-    color: Color__default["default"].blue,
     onMove: newPoint => {
       props.onMovePoint(0, newPoint);
     }
-  }), /*#__PURE__*/React__namespace.createElement(mafs.MovablePoint, {
+  }), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     point: pt2,
-    color: Color__default["default"].blue,
     onMove: newPoint => {
       props.onMovePoint(1, newPoint);
     }
@@ -29389,7 +29384,9 @@ const MafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     zoom: false,
     width: width,
     height: height
-  }, !legacyGrid && /*#__PURE__*/React__namespace.createElement(Grid, props), renderGraph({
+  }, !legacyGrid && /*#__PURE__*/React__namespace.createElement(Grid, props), props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLayer, {
+    lockedFigures: props.lockedFigures
+  }), renderGraph({
     state,
     dispatch
   }))));
@@ -29568,7 +29565,7 @@ class InteractiveGraph extends React__namespace.Component {
     this.sinusoid = null;
     // eslint-disable-next-line react/no-string-refs
     // @ts-expect-error - TS2339 - Property 'reset' does not exist on type 'ReactInstance'.
-    this.refs.graph.reset();
+    this.refs.graph?.reset();
   };
   setupGraphie = () => {
     this.setTrashCanVisibility(0);
@@ -30644,8 +30641,7 @@ class InteractiveGraph extends React__namespace.Component {
       onMouseDown: onMouseDown,
       onGraphieUpdated: this.setGraphie,
       setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable,
-      isMobile: isMobile,
-      lockedFigures: this.props.lockedFigures
+      isMobile: isMobile
     }));
   }
   static getQuadraticCoefficients(coords) {
@@ -41367,7 +41363,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "20.1.0";
+const libVersion = "20.3.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {