@khanacademy/perseus-editor 14.1.2 → 14.2.0

package/dist/index.js

@@ -26,6 +26,7 @@ var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
 var mathInput = require('@khanacademy/math-input');
 var kmath = require('@khanacademy/kmath');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
+var Banner = require('@khanacademy/wonder-blocks-banner');
 var wonderBlocksAccordion = require('@khanacademy/wonder-blocks-accordion');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
 var caretDoubleDownIcon = require('@phosphor-icons/core/bold/caret-double-down-bold.svg');
@@ -41,7 +42,6 @@ var arrowFatRight = require('@phosphor-icons/core/regular/arrow-fat-right.svg');
 var arrowFatUp = require('@phosphor-icons/core/regular/arrow-fat-up.svg');
 var minusCircle = require('@phosphor-icons/core/regular/minus-circle.svg');
 var plusCircle = require('@phosphor-icons/core/regular/plus-circle.svg');
-var Banner = require('@khanacademy/wonder-blocks-banner');
 var arrowCounterClockwise = require('@phosphor-icons/core/bold/arrow-counter-clockwise-bold.svg');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -76,6 +76,7 @@ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var KAS__namespace = /*#__PURE__*/_interopNamespace(KAS);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var Banner__default = /*#__PURE__*/_interopDefaultLegacy(Banner);
 var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 var caretDoubleDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(caretDoubleDownIcon);
 var caretDoubleUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(caretDoubleUpIcon);
@@ -90,12 +91,11 @@ var arrowFatRight__default = /*#__PURE__*/_interopDefaultLegacy(arrowFatRight);
 var arrowFatUp__default = /*#__PURE__*/_interopDefaultLegacy(arrowFatUp);
 var minusCircle__default = /*#__PURE__*/_interopDefaultLegacy(minusCircle);
 var plusCircle__default = /*#__PURE__*/_interopDefaultLegacy(plusCircle);
-var Banner__default = /*#__PURE__*/_interopDefaultLegacy(Banner);
 var arrowCounterClockwise__default = /*#__PURE__*/_interopDefaultLegacy(arrowCounterClockwise);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "14.1.2";
+const libVersion = "14.2.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -29585,39 +29585,96 @@ function invariant(condition, message) {
     throw new Error(value);
 }
 
-// Renders the given children in a View laid out horizontally.
-const LabeledRow = props => {
-  const {
-    children,
-    label,
-    labelSide = "left",
-    style
-  } = props;
-  return /*#__PURE__*/React__namespace.createElement("label", {
-    className: aphrodite.css(styles$J.label)
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$J.row, style]
-  }, labelSide === "start" || /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$J.spaceEnd
-  }, label), children, labelSide === "end" && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$J.spaceStart
-  }, label)));
+const UNLIMITED = "unlimited";
+// Parses a string (ostensibly from some UI element that only supports string
+// types, such as a <select />) into a numeric point count or the special sigil
+// "unlimited". Note that 0 is a special case, and means "unlimited".
+const parsePointCount = points => {
+  const parsed = parseInt(points, 10);
+  if (isNaN(parsed)) {
+    return UNLIMITED;
+  }
+  return parsed === 0 ? UNLIMITED : parsed;
+};
+
+const GraphPointsCountSelector = _ref => {
+  let {
+    numPoints = 1,
+    onChange
+  } = _ref;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+    selectedValue: `${numPoints}`,
+    onChange: newValue => {
+      onChange(parsePointCount(newValue));
+    }
+    // Never uses placeholder, always has value
+    ,
+    placeholder: "",
+    style: styles$J.singleSelectShort
+  }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    key: n,
+    value: `${n}`,
+    label: `${n} point${n > 1 ? "s" : ""}`
+  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    key: "unlimited",
+    value: UNLIMITED,
+    label: "unlimited"
+  })]);
 };
 const styles$J = aphrodite.StyleSheet.create({
-  label: {
-    width: "fit-content"
-  },
-  row: {
-    flexDirection: "row",
-    marginTop: wonderBlocksTokens.spacing.xSmall_8,
-    alignItems: "center",
-    width: "fit-content"
-  },
-  spaceStart: {
-    marginInlineStart: wonderBlocksTokens.spacing.xSmall_8
-  },
-  spaceEnd: {
-    marginInlineEnd: wonderBlocksTokens.spacing.xSmall_8
+  singleSelectShort: {
+    // Non-standard spacing, but it's the smallest we can go
+    // without running into styling issues with the dropdown.
+    height: 26
+  }
+});
+
+const GraphTypeSelector = props => {
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+    selectedValue: props.graphType,
+    onChange: props.onChange,
+    placeholder: "Select an answer type",
+    style: styles$I.singleSelectShort
+  }, props.showNoneOption && /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "none",
+    label: "None"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "linear",
+    label: "Linear function"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "quadratic",
+    label: "Quadratic function"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "sinusoid",
+    label: "Sinusoid function"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "circle",
+    label: "Circle"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "point",
+    label: "Point(s)"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "linear-system",
+    label: "Linear System"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "polygon",
+    label: "Polygon"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "segment",
+    label: "Line Segment(s)"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "ray",
+    label: "Ray"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "angle",
+    label: "Angle"
+  }));
+};
+const styles$I = aphrodite.StyleSheet.create({
+  singleSelectShort: {
+    // Non-standard spacing, but it's the smallest we can go
+    // without running into styling issues with the dropdown.
+    height: 26
   }
 });
 
@@ -29629,11 +29686,11 @@ function Heading(_ref) {
     onToggle
   } = _ref;
   return /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
-    style: [styles$I.container, !isCollapsible && styles$I.notClickable],
+    style: [styles$H.container, !isCollapsible && styles$H.notClickable],
     disabled: !isCollapsible,
     onClick: () => isCollapsible && onToggle?.(!isOpen)
   }, () => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$I.heading
+    style: styles$H.heading
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
     style: {
       fontSize: 14,
@@ -29643,7 +29700,7 @@ function Heading(_ref) {
     isExpanded: isOpen
   })));
 }
-const styles$I = aphrodite.StyleSheet.create({
+const styles$H = aphrodite.StyleSheet.create({
   container: {
     marginTop: wonderBlocksTokens.spacing.small_12,
     // NOTE(jeremy): This is the inverse of the @editorPadding CSS
@@ -29667,348 +29724,765 @@ const styles$I = aphrodite.StyleSheet.create({
   }
 });
 
-function focusWithChromeStickyFocusBugWorkaround(element) {
-  // NOTE(marksandstrom) Chrome sticky focus bug.
-  //
-  // There is a bug in Chrome related to sticky positioning and
-  // focus: When a child of an element with sticky positioning is
-  // focused with the focus() method, the scrollable area
-  // containing that element will scroll to the top (even though
-  // the element is already visble on the page). For a dropdown
-  // this means that the area will be scrolled to the top when
-  // the user interacts with the dropdown (since we actively
-  // manage dropdown header and option focus for keyboard users).
-  //
-  // To work around this bug the `preventScroll` focus option is
-  // used.
-  //
-  // Using `focusOptions` is an experimental browser feature
-  // "that should not be used in production code". However, since
-  // Chrome is the only browser we support that exhibits this
-  // buggy behavior and using `focusOptions` works around the
-  // bug, it is perfectly reasonable to use the feature in this
-  // case. We are not relying on the effect of the
-  // `preventScroll` option otherwise.
-  //
-  // focusOptions documentation:
-  //
-  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
-  //
-  // Note that there could be cases where we want default focus() behavior.
-  // One that comes to mind is a dropdown with a long list of options that
-  // might be rendered off screen when opened. With this workaround the
-  // selected option would not be scrolled into view if the option is near
-  // the end of the list. We're not aware of any uses of the dropdown where
-  // this is an issue, however, so there isn't currently a way to out of the
-  // `preventScroll` behavior.
-
-  // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element'.
-  element.focus({
-    preventScroll: true
-  });
-}
-const DEFAULT_COLOR = "grayH";
-function getDefaultFigureForType(type) {
-  switch (type) {
-    case "point":
-      return {
-        type: "point",
-        coord: [0, 0],
-        color: DEFAULT_COLOR,
-        filled: true
-      };
-    case "line":
-      return {
-        type: "line",
-        kind: "line",
-        points: [getDefaultFigureForType("point"), {
-          ...getDefaultFigureForType("point"),
-          coord: [2, 2]
-        }],
-        color: DEFAULT_COLOR,
-        lineStyle: "solid",
-        showPoint1: false,
-        showPoint2: false
-      };
-    case "vector":
-      return {
-        type: "vector",
-        points: [[0, 0], [2, 2]],
-        color: DEFAULT_COLOR
-      };
-    case "ellipse":
-      return {
-        type: "ellipse",
-        center: [0, 0],
-        radius: [1, 1],
-        angle: 0,
-        color: DEFAULT_COLOR,
-        fillStyle: "none",
-        strokeStyle: "solid"
-      };
-    case "polygon":
-      return {
-        type: "polygon",
-        points: [[0, 2], [-1, 0], [1, 0]],
-        color: DEFAULT_COLOR,
-        showVertices: false,
-        fillStyle: "none",
-        strokeStyle: "solid"
-      };
-    case "function":
-      return {
-        type: "function",
-        color: DEFAULT_COLOR,
-        strokeStyle: "solid",
-        equation: "x^2",
-        directionalAxis: "x"
-      };
-    case "label":
-      return {
-        type: "label",
-        coord: [0, 0],
-        text: "",
-        color: DEFAULT_COLOR,
-        size: "medium"
-      };
-    default:
-      throw new wonderStuffCore.UnreachableCaseError(type);
-  }
-}
-function degreeToRadian(degrees) {
-  return degrees / 180 * Math.PI;
-}
-function radianToDegree(radians) {
-  return radians / Math.PI * 180;
-}
-function getDefaultGraphStartCoords(graph, range, step) {
-  switch (graph.type) {
-    case "linear":
-    case "ray":
-      return perseus.getLineCoords({
-        ...graph,
-        startCoords: undefined
-      }, range, step);
-    case "segment":
-      return perseus.getSegmentCoords({
-        ...graph,
-        startCoords: undefined
-      }, range, step);
-    case "linear-system":
-      return perseus.getLinearSystemCoords({
-        ...graph,
-        startCoords: undefined
-      }, range, step);
-    case "circle":
-      const startCoords = perseus.getCircleCoords({
-        ...graph,
-        startCoords: undefined
-      });
-      const radius = kmath.vector.length(kmath.vector.subtract(startCoords.radiusPoint, startCoords.center));
-      return {
-        center: startCoords.center,
-        radius
-      };
-    case "sinusoid":
-      return perseus.getSinusoidCoords({
-        ...graph,
-        startCoords: undefined
-      }, range, step);
-    case "quadratic":
-      return perseus.getQuadraticCoords({
-        ...graph,
-        startCoords: undefined
-      }, range, step);
-    case "point":
-      return perseus.getPointCoords({
-        ...graph,
-        startCoords: undefined
-      }, range, step);
-    case "polygon":
-      return perseus.getPolygonCoords({
-        ...graph,
-        startCoords: undefined
-      }, range, step);
-    case "angle":
-      return perseus.getAngleCoords({
-        graph: {
-          ...graph,
-          startCoords: undefined
-        },
-        range,
-        step
-      });
-    default:
-      return undefined;
-  }
+function InteractiveGraphCorrectAnswer(props) {
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Heading, {
+    title: "Correct Answer",
+    isOpen: true,
+    isCollapsible: false
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelXSmall, {
+    style: {
+      paddingTop: wonderBlocksTokens.spacing.xxSmall_6,
+      paddingBottom: wonderBlocksTokens.spacing.xxSmall_6,
+      color: wonderBlocksTokens.color.offBlack64
+    }
+  }, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.BodyMonospace, {
+    style: {
+      fontSize: 12,
+      backgroundColor: "#eee",
+      paddingInline: wonderBlocksTokens.spacing.xxSmall_6,
+      borderColor: "#ccc",
+      borderStyle: "solid",
+      borderWidth: 1
+    }
+  }, props.equationString)), props.children));
 }
-const getSinusoidEquation = startCoords => {
-  // Get coefficients
-  // It's assumed that p1 is the root and p2 is the first peak
-  const p1 = startCoords[0];
-  const p2 = startCoords[1];
-
-  // Resulting coefficients are canonical for this sine curve
-  const amplitude = p2[1] - p1[1];
-  const angularFrequency = Math.PI / (2 * (p2[0] - p1[0]));
-  const phase = p1[0] * angularFrequency;
-  const verticalOffset = p1[1];
-  return "y = " + amplitude.toFixed(3) + "sin(" + angularFrequency.toFixed(3) + "x - " + phase.toFixed(3) + ") + " + verticalOffset.toFixed(3);
-};
-const getQuadraticEquation = startCoords => {
-  const p1 = startCoords[0];
-  const p2 = startCoords[1];
-  const p3 = startCoords[2];
-  const denom = (p1[0] - p2[0]) * (p1[0] - p3[0]) * (p2[0] - p3[0]);
-  if (denom === 0) {
-    // Many of the callers assume that the return value is always defined.
-    return "Division by zero error";
-  }
-  const a = (p3[0] * (p2[1] - p1[1]) + p2[0] * (p1[1] - p3[1]) + p1[0] * (p3[1] - p2[1])) / denom;
-  const b = (p3[0] * p3[0] * (p1[1] - p2[1]) + p2[0] * p2[0] * (p3[1] - p1[1]) + p1[0] * p1[0] * (p2[1] - p3[1])) / denom;
-  const c = (p2[0] * p3[0] * (p2[0] - p3[0]) * p1[1] + p3[0] * p1[0] * (p3[0] - p1[0]) * p2[1] + p1[0] * p2[0] * (p1[0] - p2[0]) * p3[1]) / denom;
-  return "y = " + a.toFixed(3) + "x^2 + " + b.toFixed(3) + "x + " + c.toFixed(3);
-};
-const findAngle = (point1, point2) => {
-  const x = point1[0] - point2[0];
-  const y = point1[1] - point2[1];
-  return (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
-};
-const getAngleEquation = startCoords => {
-  const [point1, vertex, point2] = startCoords;
-  const angle = findAngle(point2, vertex) - findAngle(point1, vertex);
-  const roundedAngle = angle.toFixed(0);
-  return `${roundedAngle}\u00B0 angle at (${vertex[0]}, ${vertex[1]})`;
-};
-const shouldShowStartCoordsUI = (graph, isStatic) => {
-  // We don't show the start coords UI for static graphs, since
-  // the coords shown for this are determined by the coords on the
-  // "correct" graph. The start coords would not be used here.
-  if (isStatic) {
-    return false;
-  }
-  if (graph.type === "point" && graph.numPoints === "unlimited") {
-    return false;
-  }
-  if (graph.type === "polygon" && (graph.numSides === "unlimited" || graph.snapTo === "angles" || graph.snapTo === "sides")) {
-    return false;
-  }
-  return true;
-};
 
-/**
- * Dropdown for selecting a locked figure to add to an interactive graph.
- * Locked figures are elements (points, segmeents, etc.) that are not
- * interactive, just present in the graph's background.
- *
- * Used in the interactive graph editor's locked figures section.
- */
-const LockedFigureSelect = props => {
+function InteractiveGraphDescription(props) {
   const {
-    id,
+    ariaLabelValue,
+    ariaDescriptionValue,
     onChange
   } = props;
-  const figureTypes = ["point", "line", "vector", "ellipse", "polygon", "function"];
-  if (props.showLabelsFlag) {
-    figureTypes.push("label");
-  }
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$H.container
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionMenu, {
-    menuText: "Add locked figure",
-    style: styles$H.addElementSelect
-  }, figureTypes.map(figureType => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionItem, {
-    key: `${id}-${figureType}`,
-    label: figureType,
-    onClick: () => onChange(figureType)
+  const [isOpen, setIsOpen] = React__namespace.useState(true);
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Heading, {
+    title: "Description",
+    isCollapsible: true,
+    isOpen: isOpen,
+    onToggle: setIsOpen
+  }), isOpen && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelXSmall, {
+    style: styles$G.caption
+  }, "Use these fields to describe the graph as a whole. These are used by screen readers to describe content to users who are visually impaired."), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
+    tag: "label"
+  }, "Title", /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
+    value: ariaLabelValue,
+    onChange: newValue => onChange({
+      fullGraphAriaLabel: newValue
+    }),
+    style: styles$G.spaceAbove
+  })), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
+    tag: "label"
+  }, "Description", /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextArea, {
+    rows: 8,
+    resizeType: "vertical",
+    value: ariaDescriptionValue,
+    onChange: newValue => onChange({
+      fullGraphAriaDescription: newValue
+    }),
+    style: styles$G.spaceAbove
   }))));
-};
-const styles$H = aphrodite.StyleSheet.create({
-  container: {
-    marginTop: wonderBlocksTokens.spacing.xSmall_8
+}
+const styles$G = aphrodite.StyleSheet.create({
+  caption: {
+    color: wonderBlocksTokens.color.offBlack64,
+    paddingTop: wonderBlocksTokens.spacing.xxSmall_6,
+    paddingBottom: wonderBlocksTokens.spacing.xxSmall_6
   },
-  addElementSelect: {
-    backgroundColor: wonderBlocksTokens.color.fadedBlue8,
-    borderRadius: wonderBlocksTokens.spacing.xxxSmall_4
+  spaceAbove: {
+    marginTop: wonderBlocksTokens.spacing.xxxSmall_4
   }
 });
 
-/**
- * This is a custom text field of type="number" for use in Perseus Editors.
- *
- * This makes it so that the text field's input number updates on scroll
- * without scrolling the page.
- *
- * NOTE 1: Native HTML number inputs do not update the number value on scroll,
- * they only scroll the page. Inputs in React do NOT work this way (explanation
- * here: https://stackoverflow.com/a/68266494). By default, scrolling on a
- * focused number input in React causes BOTH the input value to change AND
- * the page to scroll. The behavior in this component is an improvement on
- * the React behavior, but it's the opposite of the native HTML behavior.
- *
- * NOTE 2: Firefox seems to have a custom override for this. Even with this
- * stopPropogation, Firefox matches the native HTML behavior.
- */
-const ScrolllessNumberTextField = props => {
-  const inputRef = React__namespace.useRef(null);
-  React__namespace.useEffect(() => {
-    const ref = inputRef.current;
-
-    // stopPropogation makes it so that the page scroll event is not
-    // triggered when the input is focused and the user scrolls.
-    // The input value will still change on scroll.
-    const ignoreScroll = e => {
-      e.stopPropagation();
-    };
-    ref?.addEventListener("wheel", ignoreScroll);
-    return () => {
-      ref?.removeEventListener("wheel", ignoreScroll);
-    };
-  }, [inputRef]);
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, _extends({
-    type: "number"
-  }, props, {
-    ref: inputRef
-  }));
-};
-
-const AngleInput = props => {
+// Renders the given children in a View laid out horizontally.
+const LabeledRow = props => {
   const {
-    angle,
-    onChange
+    children,
+    label,
+    labelSide = "left",
+    style
   } = props;
-  const [angleInput, setAngleInput] = React__namespace.useState(radianToDegree(angle).toString());
-  function handleAngleChange(newValue) {
-    // Update the local state (update the input field value).
-    setAngleInput(newValue);
-
-    // If the new value is not a number, don't update the props.
-    // If it's empty, keep the props the same value instead of setting to 0.
-    if (isNaN(+newValue) || newValue === "") {
-      return;
-    }
-
-    // Update the graph.
-    onChange(degreeToRadian(newValue));
-  }
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    tag: "label",
-    style: styles$G.row
-  }, "angle (degrees)", /*#__PURE__*/React__namespace.createElement(Strut, {
-    size: wonderBlocksTokens.spacing.xxSmall_6
-  }), /*#__PURE__*/React__namespace.createElement(ScrolllessNumberTextField, {
-    value: angleInput,
-    onChange: handleAngleChange,
-    style: styles$G.textField
-  }), /*#__PURE__*/React__namespace.createElement(Strut, {
-    size: wonderBlocksTokens.spacing.xxSmall_6
-  }));
+  return /*#__PURE__*/React__namespace.createElement("label", {
+    className: aphrodite.css(styles$F.label)
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$F.row, style]
+  }, labelSide === "start" || /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
+    style: styles$F.spaceEnd
+  }, label), children, labelSide === "end" && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
+    style: styles$F.spaceStart
+  }, label)));
 };
-const styles$G = aphrodite.StyleSheet.create({
+const styles$F = aphrodite.StyleSheet.create({
+  label: {
+    width: "fit-content"
+  },
   row: {
-    display: "flex",
     flexDirection: "row",
-    alignItems: "center"
+    marginTop: wonderBlocksTokens.spacing.xSmall_8,
+    alignItems: "center",
+    width: "fit-content"
+  },
+  spaceStart: {
+    marginInlineStart: wonderBlocksTokens.spacing.xSmall_8
+  },
+  spaceEnd: {
+    marginInlineEnd: wonderBlocksTokens.spacing.xSmall_8
+  }
+});
+
+/* eslint-disable react/forbid-prop-types, react/no-unsafe */
+const {
+  ButtonGroup: ButtonGroup$2,
+  InfoTip: InfoTip$d,
+  RangeInput: RangeInput$4
+} = perseus.components;
+const defaultBackgroundImage$1 = {
+  url: null,
+  width: 0,
+  height: 0
+};
+function numSteps(range, step) {
+  return Math.floor((range[1] - range[0]) / step);
+}
+class InteractiveGraphSettings extends React__namespace.Component {
+  _isMounted = false;
+  bgUrlRef = /*#__PURE__*/React__namespace.createRef();
+  labelXRef = /*#__PURE__*/React__namespace.createRef();
+  labelYRef = /*#__PURE__*/React__namespace.createRef();
+  static stateFromProps(props) {
+    return {
+      labelsTextbox: props.labels,
+      gridStepTextbox: props.gridStep,
+      snapStepTextbox: props.snapStep,
+      stepTextbox: props.step,
+      rangeTextbox: props.range,
+      // Shallow-copied clone
+      backgroundImage: {
+        ...props.backgroundImage
+      }
+    };
+  }
+  constructor(props) {
+    super(props);
+    this.state = {
+      isExpanded: true,
+      ...InteractiveGraphSettings.stateFromProps(props)
+    };
+  }
+  static defaultProps = {
+    box: [perseus.interactiveSizes.defaultBoxSizeSmall, perseus.interactiveSizes.defaultBoxSizeSmall],
+    labels: ["x", "y"],
+    range: [[-10, 10], [-10, 10]],
+    step: [1, 1],
+    gridStep: [1, 1],
+    snapStep: [1, 1],
+    valid: true,
+    backgroundImage: defaultBackgroundImage$1,
+    markings: "graph",
+    showProtractor: false,
+    showTooltips: false
+  };
+  componentDidMount() {
+    // TODO(scottgrant): This is a hack to remove the deprecated call to
+    // this.isMounted() but is still considered an anti-pattern.
+    this._isMounted = true;
+    this.changeGraph = ___default["default"].debounce(this.changeGraph, 300);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    // Make sure that state updates when switching
+    // between different items in a multi-item editor.
+    if (!___default["default"].isEqual(this.props.labels, nextProps.labels) || !___default["default"].isEqual(this.props.gridStep, nextProps.gridStep) || !___default["default"].isEqual(this.props.snapStep, nextProps.snapStep) || !___default["default"].isEqual(this.props.step, nextProps.step) || !___default["default"].isEqual(this.props.range, nextProps.range) || !___default["default"].isEqual(this.props.backgroundImage, nextProps.backgroundImage)) {
+      this.setState(InteractiveGraphSettings.stateFromProps(nextProps));
+    }
+  }
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return perseus.Changeable.change.apply(_this, args);
+    };
+  })();
+  changeBackgroundUrl = e => {
+    // Only continue on blur or "enter"
+    if (e.type === "keypress" && e.key !== "Enter") {
+      return;
+    }
+    const setUrl = (url, width, height) => {
+      // Shallow-copied clone
+      const image = {
+        ...this.props.backgroundImage
+      };
+      image.url = url;
+      image.width = width;
+      image.height = height;
+      this.setState({
+        backgroundImage: image
+      }, this.changeGraph);
+    };
+    const url = this.bgUrlRef.current?.value;
+    if (url) {
+      perseus.Util.getImageSize(url, (width, height) => {
+        if (this._isMounted) {
+          setUrl(url, width, height);
+        }
+      });
+    } else {
+      setUrl(null, 0, 0);
+    }
+  };
+  renderLabelChoices = choices => {
+    return choices.map(nameAndValue => /*#__PURE__*/React__namespace.createElement("option", {
+      key: nameAndValue[1],
+      value: nameAndValue[1]
+    }, nameAndValue[0]));
+  };
+  validRange = range => {
+    const numbers = ___default["default"].every(range, function (num) {
+      return ___default["default"].isFinite(num);
+    });
+    if (!numbers) {
+      return "Range must be a valid number";
+    }
+    if (range[0] >= range[1]) {
+      return "Range must have a higher number on the right";
+    }
+    return true;
+  };
+  validateStepValue = settings => {
+    const {
+      step,
+      range,
+      name,
+      minTicks,
+      maxTicks
+    } = settings;
+    const nSteps = numSteps(range, step);
+    if (nSteps < minTicks) {
+      return name + " is too large, there must be at least " + minTicks + " ticks.";
+    }
+    if (nSteps > maxTicks) {
+      return name + " is too small, there can be at most " + maxTicks + " ticks.";
+    }
+    return true;
+  };
+  validSnapStep = (step, range) => {
+    return this.validateStepValue({
+      step: step,
+      range: range,
+      name: "Snap step",
+      minTicks: 5,
+      maxTicks: 60
+    });
+  };
+  validGridStep = (step, range) => {
+    return this.validateStepValue({
+      step: step,
+      range: range,
+      name: "Grid step",
+      minTicks: 3,
+      maxTicks: 60
+    });
+  };
+  validStep = (step, range) => {
+    return this.validateStepValue({
+      step: step,
+      range: range,
+      name: "Step",
+      minTicks: 3,
+      maxTicks: 20
+    });
+  };
+  validBackgroundImageSize = image => {
+    // Ignore empty images
+    if (!image.url) {
+      return true;
+    }
+    const validSize = image.width <= 450 && image.height <= 450;
+    if (!validSize) {
+      return "Image must be smaller than 450px x 450px.";
+    }
+    return true;
+  };
+  validateGraphSettings = (range, step, gridStep, snapStep, image) => {
+    const self = this;
+    let msg;
+    const goodRange = ___default["default"].every(range, function (range) {
+      msg = self.validRange(range);
+      return msg === true;
+    });
+    if (!goodRange) {
+      return msg;
+    }
+    const goodStep = ___default["default"].every(step, function (step, i) {
+      msg = self.validStep(step, range[i]);
+      return msg === true;
+    });
+    if (!goodStep) {
+      return msg;
+    }
+    const goodGridStep = ___default["default"].every(gridStep, function (gridStep, i) {
+      msg = self.validGridStep(gridStep, range[i]);
+      return msg === true;
+    });
+    if (!goodGridStep) {
+      return msg;
+    }
+    const goodSnapStep = ___default["default"].every(snapStep, function (snapStep, i) {
+      msg = self.validSnapStep(snapStep, range[i]);
+      return msg === true;
+    });
+    if (!goodSnapStep) {
+      return msg;
+    }
+    const goodImageSize = this.validBackgroundImageSize(image);
+    if (goodImageSize !== true) {
+      msg = goodImageSize;
+      return msg;
+    }
+    return true;
+  };
+  changeLabel = (i, e) => {
+    const val = e.target.value;
+    const labels = this.state.labelsTextbox.slice();
+    labels[i] = val;
+    this.setState({
+      labelsTextbox: labels
+    }, this.changeGraph);
+  };
+  changeRange = (i, values) => {
+    const ranges = this.state.rangeTextbox.slice();
+    ranges[i] = values;
+    const step = this.state.stepTextbox.slice();
+    const gridStep = this.state.gridStepTextbox.slice();
+    const snapStep = this.state.snapStepTextbox.slice();
+    const scale = perseus.Util.scaleFromExtent(ranges[i], this.props.box[i]);
+    if (this.validRange(ranges[i]) === true) {
+      step[i] = perseus.Util.tickStepFromExtent(ranges[i], this.props.box[i]);
+      const gridStepValue = perseus.Util.gridStepFromTickStep(step[i], scale);
+      if (gridStepValue) {
+        gridStep[i] = gridStepValue;
+      }
+      snapStep[i] = gridStep[i] / 2;
+    }
+    this.setState({
+      stepTextbox: step,
+      gridStepTextbox: gridStep,
+      snapStepTextbox: snapStep,
+      rangeTextbox: ranges
+    }, this.changeGraph);
+  };
+  changeStep = step => {
+    this.setState({
+      stepTextbox: step
+    }, this.changeGraph);
+  };
+  changeSnapStep = snapStep => {
+    this.setState({
+      snapStepTextbox: snapStep
+    }, this.changeGraph);
+  };
+  changeGridStep = gridStep => {
+    this.setState({
+      gridStepTextbox: gridStep,
+      snapStepTextbox: ___default["default"].map(gridStep, function (step) {
+        return step / 2;
+      })
+    }, this.changeGraph);
+  };
+  changeGraph = () => {
+    const labels = this.state.labelsTextbox;
+    const range = ___default["default"].map(this.state.rangeTextbox, function (range) {
+      return ___default["default"].map(range, Number);
+    });
+    const step = ___default["default"].map(this.state.stepTextbox, Number);
+    const gridStep = this.state.gridStepTextbox;
+    const snapStep = this.state.snapStepTextbox;
+    const image = this.state.backgroundImage;
+
+    // validationResult is either:
+    //   true -> the settings are valid
+    //   a string -> the settings are invalid, and the explanation
+    //               is contained in the string
+    // TODO(aria): Refactor this to not be confusing
+    const validationResult = this.validateGraphSettings(range, step, gridStep, snapStep, image);
+    if (validationResult === true) {
+      // either true or a string
+      this.change({
+        valid: true,
+        labels: labels,
+        range: range,
+        step: step,
+        gridStep: gridStep,
+        snapStep: snapStep,
+        backgroundImage: image
+      });
+    } else {
+      this.change({
+        valid: validationResult // a string message, not false
+      });
+    }
+  };
+
+  render() {
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Heading, {
+      title: "Common Graph Settings",
+      isOpen: this.state.isExpanded,
+      isCollapsible: true,
+      onToggle: () => this.setState({
+        isExpanded: !this.state.isExpanded
+      })
+    }), this.state.isExpanded && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "graph-settings"
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "x Label"
+    }, /*#__PURE__*/React__namespace.createElement("input", {
+      type: "text",
+      className: "graph-settings-axis-label",
+      ref: this.labelXRef,
+      onChange: e => this.changeLabel(0, e),
+      value: this.state.labelsTextbox[0] || ""
+    }))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-right-col"
+    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "y Label"
+    }, /*#__PURE__*/React__namespace.createElement("input", {
+      type: "text",
+      className: "graph-settings-axis-label",
+      ref: this.labelYRef,
+      onChange: e => this.changeLabel(1, e),
+      value: this.state.labelsTextbox[1] || ""
+    })))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "x Range"
+    }, /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
+      value: this.state.rangeTextbox[0],
+      onChange: vals => this.changeRange(0, vals)
+    }))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-right-col"
+    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "y Range"
+    }, /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
+      value: this.state.rangeTextbox[1],
+      onChange: vals => this.changeRange(1, vals)
+    })))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "Tick Step"
+    }, /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
+      value: this.state.stepTextbox,
+      onChange: this.changeStep
+    }))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-right-col"
+    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "Grid Step"
+    }, /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
+      value: this.state.gridStepTextbox,
+      onChange: this.changeGridStep
+    })))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "Snap Step"
+    }, /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
+      value: this.state.snapStepTextbox,
+      onChange: this.changeSnapStep
+    })))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "Markings:"
+    }, /*#__PURE__*/React__namespace.createElement(ButtonGroup$2, {
+      value: this.props.markings,
+      allowEmpty: false,
+      buttons: [{
+        value: "graph",
+        content: "Graph"
+      }, {
+        value: "grid",
+        content: "Grid"
+      }, {
+        value: "none",
+        content: "None"
+      }],
+      onChange: this.change("markings")
+    }))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+      label: "Show tooltips",
+      checked: this.props.showTooltips,
+      onChange: value => {
+        this.change({
+          showTooltips: value
+        });
+      }
+    }))), /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+      label: "Background image URL:",
+      style: styles$E.resetSpaceTop
+    }, /*#__PURE__*/React__namespace.createElement("input", {
+      type: "text",
+      className: aphrodite.css(styles$E.backgroundUrlInput),
+      ref: this.bgUrlRef,
+      value: this.state.backgroundImage.url || "",
+      onChange: e => {
+        // Shallow-copied clone
+        const image = {
+          ...this.props.backgroundImage
+        };
+        image.url = e.target.value;
+        this.setState({
+          backgroundImage: image
+        });
+      },
+      onKeyPress: this.changeBackgroundUrl,
+      onBlur: this.changeBackgroundUrl
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$E.protractorSection
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$E.checkboxRow
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+      label: "Show protractor",
+      checked: this.props.showProtractor,
+      onChange: value => {
+        this.change({
+          showProtractor: value
+        });
+      },
+      style: styles$E.resetSpaceTop
+    })), this.props.showProtractor && /*#__PURE__*/React__namespace.createElement(Banner__default["default"], {
+      layout: "floating",
+      text: "The protractor is not accessible. Please consider an alternate approach.",
+      kind: "warning"
+    }))));
+  }
+}
+const styles$E = aphrodite.StyleSheet.create({
+  resetSpaceTop: {
+    marginTop: 0
+  },
+  backgroundUrlInput: {
+    border: `1px solid ${wonderBlocksTokens.color.offBlack32}`,
+    borderRadius: wonderBlocksTokens.spacing.xxxSmall_4,
+    padding: wonderBlocksTokens.spacing.xxxSmall_4
+  },
+  checkboxRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: wonderBlocksTokens.spacing.xSmall_8
+  },
+  protractorSection: {
+    marginTop: wonderBlocksTokens.spacing.xSmall_8,
+    borderTop: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
+    paddingTop: wonderBlocksTokens.spacing.xSmall_8,
+    paddingBottom: wonderBlocksTokens.spacing.xSmall_8,
+    borderBottom: `1px solid ${wonderBlocksTokens.color.offBlack16}`
+  }
+});
+
+const SegmentCountSelector = _ref => {
+  let {
+    numSegments = 1,
+    onChange
+  } = _ref;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+    key: "segment-select",
+    selectedValue: `${numSegments}`
+    // Never uses placeholder, always has value
+    ,
+    placeholder: "",
+    onChange: newValue => {
+      const num = +newValue;
+      onChange(num);
+    },
+    style: styles$D.singleSelectShort
+  }, ___default["default"].range(1, 7).map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    key: n,
+    value: `${n}`,
+    label: `${n} segment${n > 1 ? "s" : ""}`
+  })));
+};
+const styles$D = aphrodite.StyleSheet.create({
+  singleSelectShort: {
+    // Non-standard spacing, but it's the smallest we can go
+    // without running into styling issues with the dropdown.
+    height: 26
+  }
+});
+
+/**
+ * Dropdown for selecting a locked figure to add to an interactive graph.
+ * Locked figures are elements (points, segmeents, etc.) that are not
+ * interactive, just present in the graph's background.
+ *
+ * Used in the interactive graph editor's locked figures section.
+ */
+const LockedFigureSelect = props => {
+  const {
+    id,
+    onChange
+  } = props;
+  const figureTypes = ["point", "line", "vector", "ellipse", "polygon", "function"];
+  if (props.showLabelsFlag) {
+    figureTypes.push("label");
+  }
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$C.container
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionMenu, {
+    menuText: "Add locked figure",
+    style: styles$C.addElementSelect
+  }, figureTypes.map(figureType => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionItem, {
+    key: `${id}-${figureType}`,
+    label: figureType,
+    onClick: () => onChange(figureType)
+  }))));
+};
+const styles$C = aphrodite.StyleSheet.create({
+  container: {
+    marginTop: wonderBlocksTokens.spacing.xSmall_8
+  },
+  addElementSelect: {
+    backgroundColor: wonderBlocksTokens.color.fadedBlue8,
+    borderRadius: wonderBlocksTokens.spacing.xxxSmall_4
+  }
+});
+
+/**
+ * This is a custom text field of type="number" for use in Perseus Editors.
+ *
+ * This makes it so that the text field's input number updates on scroll
+ * without scrolling the page.
+ *
+ * NOTE 1: Native HTML number inputs do not update the number value on scroll,
+ * they only scroll the page. Inputs in React do NOT work this way (explanation
+ * here: https://stackoverflow.com/a/68266494). By default, scrolling on a
+ * focused number input in React causes BOTH the input value to change AND
+ * the page to scroll. The behavior in this component is an improvement on
+ * the React behavior, but it's the opposite of the native HTML behavior.
+ *
+ * NOTE 2: Firefox seems to have a custom override for this. Even with this
+ * stopPropogation, Firefox matches the native HTML behavior.
+ */
+const ScrolllessNumberTextField = props => {
+  const inputRef = React__namespace.useRef(null);
+  React__namespace.useEffect(() => {
+    const ref = inputRef.current;
+
+    // stopPropogation makes it so that the page scroll event is not
+    // triggered when the input is focused and the user scrolls.
+    // The input value will still change on scroll.
+    const ignoreScroll = e => {
+      e.stopPropagation();
+    };
+    ref?.addEventListener("wheel", ignoreScroll);
+    return () => {
+      ref?.removeEventListener("wheel", ignoreScroll);
+    };
+  }, [inputRef]);
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, _extends({
+    type: "number"
+  }, props, {
+    ref: inputRef
+  }));
+};
+
+function focusWithChromeStickyFocusBugWorkaround(element) {
+  // NOTE(marksandstrom) Chrome sticky focus bug.
+  //
+  // There is a bug in Chrome related to sticky positioning and
+  // focus: When a child of an element with sticky positioning is
+  // focused with the focus() method, the scrollable area
+  // containing that element will scroll to the top (even though
+  // the element is already visble on the page). For a dropdown
+  // this means that the area will be scrolled to the top when
+  // the user interacts with the dropdown (since we actively
+  // manage dropdown header and option focus for keyboard users).
+  //
+  // To work around this bug the `preventScroll` focus option is
+  // used.
+  //
+  // Using `focusOptions` is an experimental browser feature
+  // "that should not be used in production code". However, since
+  // Chrome is the only browser we support that exhibits this
+  // buggy behavior and using `focusOptions` works around the
+  // bug, it is perfectly reasonable to use the feature in this
+  // case. We are not relying on the effect of the
+  // `preventScroll` option otherwise.
+  //
+  // focusOptions documentation:
+  //
+  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
+  //
+  // Note that there could be cases where we want default focus() behavior.
+  // One that comes to mind is a dropdown with a long list of options that
+  // might be rendered off screen when opened. With this workaround the
+  // selected option would not be scrolled into view if the option is near
+  // the end of the list. We're not aware of any uses of the dropdown where
+  // this is an issue, however, so there isn't currently a way to out of the
+  // `preventScroll` behavior.
+
+  // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element'.
+  element.focus({
+    preventScroll: true
+  });
+}
+function degreeToRadian(degrees) {
+  return degrees / 180 * Math.PI;
+}
+function radianToDegree(radians) {
+  return radians / Math.PI * 180;
+}
+
+const AngleInput = props => {
+  const {
+    angle,
+    onChange
+  } = props;
+  const [angleInput, setAngleInput] = React__namespace.useState(radianToDegree(angle).toString());
+  function handleAngleChange(newValue) {
+    // Update the local state (update the input field value).
+    setAngleInput(newValue);
+
+    // If the new value is not a number, don't update the props.
+    // If it's empty, keep the props the same value instead of setting to 0.
+    if (isNaN(+newValue) || newValue === "") {
+      return;
+    }
+
+    // Update the graph.
+    onChange(degreeToRadian(newValue));
+  }
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    tag: "label",
+    style: styles$B.row
+  }, "angle (degrees)", /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxSmall_6
+  }), /*#__PURE__*/React__namespace.createElement(ScrolllessNumberTextField, {
+    value: angleInput,
+    onChange: handleAngleChange,
+    style: styles$B.textField
+  }), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxSmall_6
+  }));
+};
+const styles$B = aphrodite.StyleSheet.create({
+  row: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
   },
   textField: {
     width: wonderBlocksTokens.spacing.xxxLarge_64
@@ -30053,30 +30527,30 @@ const CoordinatePairInput = props => {
     onChange(newCoords);
   }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$F.row, style]
+    style: [styles$A.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$F.row
+    style: styles$A.row
   }, labels ? labels[0] : "x coord", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(ScrolllessNumberTextField, {
     value: coordState[0],
     onChange: newValue => handleCoordChange(newValue, 0),
-    style: [styles$F.textField, error ? styles$F.errorField : undefined]
+    style: [styles$A.textField, error ? styles$A.errorField : undefined]
   })), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$F.row
+    style: styles$A.row
   }, labels ? labels[1] : "y coord", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(ScrolllessNumberTextField, {
     value: coordState[1],
     onChange: newValue => handleCoordChange(newValue, 1),
-    style: [styles$F.textField, error ? styles$F.errorField : undefined]
+    style: [styles$A.textField, error ? styles$A.errorField : undefined]
   })));
 };
-const styles$F = aphrodite.StyleSheet.create({
+const styles$A = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30109,14 +30583,14 @@ const PerseusEditorAccordion = props => {
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksAccordion.AccordionSection, {
     expanded: expanded,
     onToggle: onToggle,
-    style: [styles$E.container, containerStyle],
-    headerStyle: styles$E.accordionHeader,
+    style: [styles$z.container, containerStyle],
+    headerStyle: styles$z.accordionHeader,
     header: header
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$E.accordionPanel, panelStyle]
+    style: [styles$z.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$E = aphrodite.StyleSheet.create({
+const styles$z = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: wonderBlocksTokens.color.fadedBlue8,
     marginTop: wonderBlocksTokens.spacing.xSmall_8
@@ -30147,13 +30621,13 @@ const ColorSwatch = props => {
     "aria-label":
     // Don't include an aria label for decorative circles.
     !decorative ? `${color}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$D.colorSwatch, {
+    style: [styles$y.colorSwatch, {
       border: `4px solid ${perseus.lockedFigureColors[color]}`,
       backgroundColor: filled ? perseus.lockedFigureColors[color] : wonderBlocksTokens.color.white
     }]
   });
 };
-const styles$D = aphrodite.StyleSheet.create({
+const styles$y = aphrodite.StyleSheet.create({
   colorSwatch: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30172,10 +30646,10 @@ const ColorSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$C.row, style]
+    style: [styles$x.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$C.row
+    style: styles$x.row
   }, "color", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30194,7 +30668,7 @@ const ColorSelect = props => {
     })
   })))));
 };
-const styles$C = aphrodite.StyleSheet.create({
+const styles$x = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30213,17 +30687,17 @@ const EllipseSwatch = props => {
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$B.container, {
+    style: [styles$w.container, {
       border: `4px ${strokeStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$B.innerCircle, {
+    style: [styles$w.innerCircle, {
       backgroundColor: perseus.lockedFigureColors[color],
       opacity: fillStyle === "white" ? 0 : perseus.lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$B = aphrodite.StyleSheet.create({
+const styles$w = aphrodite.StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30249,7 +30723,7 @@ const LineStrokeSelect = props => {
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$A.lineStrokeSelect
+    style: styles$v.lineStrokeSelect
   }, "stroke", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxxSmall_4
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30266,7 +30740,7 @@ const LineStrokeSelect = props => {
     label: "dashed"
   })));
 };
-const styles$A = aphrodite.StyleSheet.create({
+const styles$v = aphrodite.StyleSheet.create({
   lineStrokeSelect: {
     display: "flex",
     flexDirection: "row",
@@ -30288,40 +30762,40 @@ const LockedFigureSettingsActions = props => {
     onRemove
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$z.container
+    style: styles$u.container
   }, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     startIcon: trashIcon__default["default"],
     "aria-label": `Delete locked ${figureType}`,
     onClick: onRemove,
     kind: "tertiary",
-    style: styles$z.deleteButton
+    style: styles$u.deleteButton
   }, "Delete"), /*#__PURE__*/React__namespace.createElement(Spring, null), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretDoubleUpIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} to the back`,
     onClick: () => onMove("back"),
-    style: styles$z.iconButton
+    style: styles$u.iconButton
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretUpIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} backward`,
     onClick: () => onMove("backward"),
-    style: styles$z.iconButton
+    style: styles$u.iconButton
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretDownIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} forward`,
     onClick: () => onMove("forward"),
-    style: styles$z.iconButton
+    style: styles$u.iconButton
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretDoubleDownIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} to the front`,
     onClick: () => onMove("front"),
-    style: styles$z.iconButton
+    style: styles$u.iconButton
   }));
 };
-const styles$z = aphrodite.StyleSheet.create({
+const styles$u = aphrodite.StyleSheet.create({
   container: {
     width: "100%",
     flexDirection: "row",
@@ -30340,7 +30814,7 @@ const styles$z = aphrodite.StyleSheet.create({
 });
 
 const {
-  InfoTip: InfoTip$d
+  InfoTip: InfoTip$c
 } = perseus.components;
 const LockedEllipseSettings = props => {
   const {
@@ -30368,7 +30842,7 @@ const LockedEllipseSettings = props => {
     /*#__PURE__*/
     // Summary: Ellipse, center, radius, color (opacity, dashed)
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$y.row
+      style: styles$t.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Ellipse (${center[0]}, ${center[1]}), radius ${radius[0]}, ${radius[1]}`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(EllipseSwatch, {
@@ -30377,19 +30851,19 @@ const LockedEllipseSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$y.row
+    style: styles$t.row
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: center,
-    style: styles$y.spaceUnder,
+    style: styles$t.spaceUnder,
     onChange: newCoords => onChangeProps({
       center: newCoords
     })
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$y.spaceUnder
-  }, /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, "The coordinates for the center of the ellipse."))), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
+    style: styles$t.spaceUnder
+  }, /*#__PURE__*/React__namespace.createElement(InfoTip$c, null, "The coordinates for the center of the ellipse."))), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: radius,
     labels: ["x radius", "y radius"],
-    style: styles$y.spaceUnder,
+    style: styles$t.spaceUnder,
     onChange: newCoords => onChangeProps({
       radius: newCoords
     })
@@ -30401,7 +30875,7 @@ const LockedEllipseSettings = props => {
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xSmall_8
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$y.row, styles$y.spaceUnder]
+    style: [styles$t.row, styles$t.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30409,7 +30883,7 @@ const LockedEllipseSettings = props => {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$y.row, styles$y.truncatedWidth]
+    style: [styles$t.row, styles$t.truncatedWidth]
   }, "fill", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30435,7 +30909,7 @@ const LockedEllipseSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$y = aphrodite.StyleSheet.create({
+const styles$t = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30456,15 +30930,15 @@ const LineSwatch = props => {
     lineStyle
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$x.container
+    style: styles$s.container
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, ${lineStyle}`,
-    style: [styles$x.lineSwatch, {
+    style: [styles$s.lineSwatch, {
       border: `5px ${lineStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }));
 };
-const styles$x = aphrodite.StyleSheet.create({
+const styles$s = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: wonderBlocksTokens.color.white,
     justifyContent: "center",
@@ -30549,9 +31023,9 @@ const LockedFunctionSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$w.row
+      style: styles$r.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
-      style: styles$w.accordionHeader
+      style: styles$r.accordionHeader
     }, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
@@ -30559,7 +31033,7 @@ const LockedFunctionSettings = props => {
       lineStyle: strokeStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$w.row, styles$w.spaceUnder]
+    style: [styles$r.row, styles$r.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: newValue => {
@@ -30573,14 +31047,14 @@ const LockedFunctionSettings = props => {
       handlePropChange("strokeStyle", newValue);
     }
   })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$w.row, styles$w.rowSpace]
+    style: [styles$r.row, styles$r.rowSpace]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
     selectedValue: directionalAxis,
     onChange: newValue => {
       handlePropChange("directionalAxis", newValue);
     },
     "aria-label": "equation prefix",
-    style: [styles$w.dropdownLabel, styles$w.axisMenu]
+    style: [styles$r.dropdownLabel, styles$r.axisMenu]
     // Placeholder is required, but never gets used.
     ,
     placeholder: ""
@@ -30599,17 +31073,17 @@ const LockedFunctionSettings = props => {
     onChange: newValue => {
       handlePropChange("equation", newValue);
     },
-    style: [styles$w.textField]
+    style: [styles$r.textField]
   })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$w.row, styles$w.rowSpace]
+    style: [styles$r.row, styles$r.rowSpace]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$w.dropdownLabel, styles$w.domainMin]
+    style: [styles$r.dropdownLabel, styles$r.domainMin]
   }, `${domainRangeText} min`, /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     type: "number",
-    style: styles$w.domainMinField,
+    style: styles$r.domainMinField,
     value: domainEntries[0],
     onChange: newValue => {
       handleDomainChange(0, newValue);
@@ -30619,12 +31093,12 @@ const LockedFunctionSettings = props => {
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
     "aria-label": `${domainRangeText} max`,
-    style: [styles$w.dropdownLabel, styles$w.domainMax]
+    style: [styles$r.dropdownLabel, styles$r.domainMax]
   }, "max", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     type: "number",
-    style: styles$w.domainMaxField,
+    style: styles$r.domainMaxField,
     value: domainEntries[1],
     onChange: newValue => {
       handleDomainChange(1, newValue);
@@ -30632,11 +31106,11 @@ const LockedFunctionSettings = props => {
   }))), /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Example Functions"),
     expanded: false,
-    containerStyle: styles$w.exampleWorkspace,
-    panelStyle: styles$w.exampleAccordionPanel
+    containerStyle: styles$r.exampleWorkspace,
+    panelStyle: styles$r.exampleAccordionPanel
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$w.dropdownLabel
+    style: styles$r.dropdownLabel
   }, "Choose a category", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30650,7 +31124,7 @@ const LockedFunctionSettings = props => {
       label: category
     });
   }))), exampleCategorySelected && /*#__PURE__*/React__namespace.createElement("ul", {
-    className: aphrodite.css(styles$w.exampleContainer)
+    className: aphrodite.css(styles$r.exampleContainer)
   }, exampleContent.map((example, index) => /*#__PURE__*/React__namespace.createElement(ExampleItem, {
     category: exampleCategory,
     example: example,
@@ -30672,29 +31146,29 @@ const ExampleItem = props => {
   const exampleId = React.useId();
   return /*#__PURE__*/React__namespace.createElement("li", {
     key: `${category}-${index}`,
-    className: aphrodite.css(styles$w.exampleRow)
+    className: aphrodite.css(styles$r.exampleRow)
   }, /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: autoPasteIcon__default["default"],
     "aria-label": "paste example",
     "aria-describedby": exampleId,
     onClick: () => pasteEquationFn("equation", example),
     size: "medium",
-    style: styles$w.copyPasteButton
+    style: styles$r.copyPasteButton
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: copyIcon__default["default"],
     "aria-label": "copy example",
     "aria-describedby": exampleId,
     onClick: () => navigator.clipboard.writeText(example),
     size: "medium",
-    style: styles$w.copyPasteButton
+    style: styles$r.copyPasteButton
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxxSmall_4
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$w.exampleContent,
+    style: styles$r.exampleContent,
     id: exampleId
   }, example));
 };
-const styles$w = aphrodite.StyleSheet.create({
+const styles$r = aphrodite.StyleSheet.create({
   accordionHeader: {
     textOverflow: "ellipsis",
     // A maximum width needs to be specified in order for the ellipsis to work.
@@ -30812,14 +31286,14 @@ function LockedLabelSettings(props) {
     expanded: expanded,
     onToggle: onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$v.row, styles$v.accordionHeaderContainer]
+      style: [styles$q.row, styles$q.accordionHeaderContainer]
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Label (", coord[0], ", ", coord[1], ")"), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), text !== "" && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
       style: [{
         backgroundColor: wonderBlocksTokens.color.white,
         color: perseus.lockedFigureColors[color]
-      }, styles$v.accordionHeader]
+      }, styles$q.accordionHeader]
     }, text))
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: coord,
@@ -30828,10 +31302,10 @@ function LockedLabelSettings(props) {
         coord: newCoords
       });
     },
-    style: styles$v.spaceUnder
+    style: styles$q.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$v.row, styles$v.spaceUnder]
+    style: [styles$q.row, styles$q.spaceUnder]
   }, "TeX", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xSmall_8
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
@@ -30841,7 +31315,7 @@ function LockedLabelSettings(props) {
       text: newValue
     })
   })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$v.row
+    style: styles$q.row
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: color,
     onChange: newColor => {
@@ -30849,12 +31323,12 @@ function LockedLabelSettings(props) {
         color: newColor
       });
     },
-    style: styles$v.spaceUnder
+    style: styles$q.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$v.row
+    style: styles$q.row
   }, "size", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xSmall_8
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30881,7 +31355,7 @@ function LockedLabelSettings(props) {
     onRemove: onRemove
   }));
 }
-const styles$v = aphrodite.StyleSheet.create({
+const styles$q = aphrodite.StyleSheet.create({
   accordionHeaderContainer: {
     // Stop the label summary from wrapping.
     whiteSpace: "nowrap"
@@ -30915,7 +31389,7 @@ const LabeledSwitch = props => {
   const ids = wonderBlocksCore.useUniqueIdWithMock();
   const switchId = ids.get("switch");
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$u.row, style]
+    style: [styles$p.row, style]
   }, /*#__PURE__*/React__namespace.createElement(Switch__default["default"], {
     id: switchId,
     checked: checked,
@@ -30927,7 +31401,7 @@ const LabeledSwitch = props => {
     htmlFor: switchId
   }, label));
 };
-const styles$u = aphrodite.StyleSheet.create({
+const styles$p = aphrodite.StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30961,13 +31435,13 @@ const DefiningPointSettings = props => {
   return /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     expanded: expanded,
     onToggle: onToggle,
-    containerStyle: styles$t.container,
-    panelStyle: styles$t.accordionPanel,
+    containerStyle: styles$o.container,
+    panelStyle: styles$o.accordionPanel,
     header:
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$t.row
+      style: styles$o.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `${label || "Point"} (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), showPoint && /*#__PURE__*/React__namespace.createElement(ColorSwatch, {
@@ -30977,7 +31451,7 @@ const DefiningPointSettings = props => {
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: coord,
     error: !!error,
-    style: styles$t.spaceUnder,
+    style: styles$o.spaceUnder,
     onChange: newCoords => {
       onChangeProps({
         coord: newCoords
@@ -30986,12 +31460,12 @@ const DefiningPointSettings = props => {
   }), onTogglePoint && /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "show point on graph",
     checked: !!showPoint,
-    style: showPoint && styles$t.spaceUnder,
+    style: showPoint && styles$o.spaceUnder,
     onChange: onTogglePoint
   }), showPoint && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$t.spaceUnder
+    style: styles$o.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -31002,7 +31476,7 @@ const DefiningPointSettings = props => {
     }
   })));
 };
-const styles$t = aphrodite.StyleSheet.create({
+const styles$o = aphrodite.StyleSheet.create({
   container: {
     marginTop: wonderBlocksTokens.spacing.xSmall_8,
     marginBottom: 0,
@@ -31070,7 +31544,7 @@ const LockedLineSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$s.row
+      style: styles$n.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
@@ -31079,7 +31553,7 @@ const LockedLineSettings = props => {
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$s.row, styles$s.spaceUnder]
+    style: [styles$n.row, styles$n.spaceUnder]
   }, "kind", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxxSmall_4
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -31100,7 +31574,7 @@ const LockedLineSettings = props => {
     value: "segment",
     label: "segment"
   }))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$s.row
+    style: styles$n.row
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
@@ -31112,7 +31586,7 @@ const LockedLineSettings = props => {
       lineStyle: value
     })
   })), isInvalid && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    style: styles$s.errorText
+    style: styles$n.errorText
   }, lengthZeroStr), /*#__PURE__*/React__namespace.createElement(DefiningPointSettings, _extends({
     label: "Point 1",
     showPoint: showPoint1,
@@ -31137,7 +31611,7 @@ const LockedLineSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$s = aphrodite.StyleSheet.create({
+const styles$n = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -31178,7 +31652,7 @@ const LockedPointSettings = props => {
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$r.row
+      style: styles$m.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Point (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(ColorSwatch, {
@@ -31187,7 +31661,7 @@ const LockedPointSettings = props => {
     }))
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: coord,
-    style: styles$r.spaceUnder,
+    style: styles$m.spaceUnder,
     onChange: newCoord => {
       onChangeProps({
         coord: newCoord
@@ -31196,7 +31670,7 @@ const LockedPointSettings = props => {
   }), /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$r.spaceUnder
+    style: styles$m.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -31211,7 +31685,7 @@ const LockedPointSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$r = aphrodite.StyleSheet.create({
+const styles$m = aphrodite.StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -31229,17 +31703,17 @@ const PolygonSwatch = props => {
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$q.container, {
+    style: [styles$l.container, {
       border: `4px ${strokeStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$q.innerSquare, {
+    style: [styles$l.innerSquare, {
       backgroundColor: perseus.lockedFigureColors[color],
       opacity: fillStyle === "white" ? 0 : perseus.lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$q = aphrodite.StyleSheet.create({
+const styles$l = aphrodite.StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -31317,7 +31791,7 @@ const LockedPolygonSettings = props => {
     /*#__PURE__*/
     // Summary: Polygon, number of sides, style swatch
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$p.row
+      style: styles$k.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Polygon, ${points.length} sides`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(PolygonSwatch, {
@@ -31326,7 +31800,7 @@ const LockedPolygonSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$p.row, styles$p.spaceUnder]
+    style: [styles$k.row, styles$k.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -31334,7 +31808,7 @@ const LockedPolygonSettings = props => {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$p.row, styles$p.truncatedWidth]
+    style: [styles$k.row, styles$k.truncatedWidth]
   }, "fill", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -31360,17 +31834,17 @@ const LockedPolygonSettings = props => {
     onChange: newValue => onChangeProps({
       showVertices: newValue
     }),
-    style: styles$p.spaceUnder
+    style: styles$k.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Points"),
     expanded: true,
-    containerStyle: styles$p.pointAccordionContainer,
-    panelStyle: styles$p.pointAccordionPanel
+    containerStyle: styles$k.pointAccordionContainer,
+    panelStyle: styles$k.pointAccordionPanel
   }, points.map((point, index) => {
     const pointLabel = String.fromCharCode(65 + index);
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       key: `locked-polygon-point-index-${index}`,
-      style: [styles$p.row, styles$p.spaceUnder]
+      style: [styles$k.row, styles$k.spaceUnder]
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `${pointLabel}:`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.medium_16
     }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
@@ -31398,10 +31872,10 @@ const LockedPolygonSettings = props => {
           points: newPoints
         });
       },
-      style: styles$p.icon
+      style: styles$k.icon
     }));
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$p.row, styles$p.polygonActionsContainer]
+    style: [styles$k.row, styles$k.polygonActionsContainer]
   }, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     kind: "tertiary",
     startIcon: plusCircle__default["default"],
@@ -31411,1006 +31885,555 @@ const LockedPolygonSettings = props => {
       });
     }
   }, "Add point"), /*#__PURE__*/React__namespace.createElement(Spring, null), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$p.movementButtonsContainer
+    style: styles$k.movementButtonsContainer
   }, /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     "aria-label": "Move polygon up",
-    style: styles$p.iconButton,
+    style: styles$k.iconButton,
     size: "small",
     icon: arrowFatUp__default["default"],
     onClick: () => handlePolygonMove("up")
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$p.row
+    style: styles$k.row
   }, /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     "aria-label": "Move polygon left",
-    style: styles$p.iconButton,
-    size: "small",
-    icon: arrowFatLeft__default["default"],
-    onClick: () => handlePolygonMove("left")
-  }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
-    "aria-label": "Move polygon down",
-    style: styles$p.iconButton,
+    style: styles$k.iconButton,
     size: "small",
-    icon: arrowFatDown__default["default"],
-    onClick: () => handlePolygonMove("down")
-  }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
-    "aria-label": "Move polygon right",
-    style: styles$p.iconButton,
-    size: "small",
-    icon: arrowFatRight__default["default"],
-    onClick: () => handlePolygonMove("right")
-  }))))), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
-    figureType: props.type,
-    onMove: onMove,
-    onRemove: onRemove
-  }));
-};
-const styles$p = aphrodite.StyleSheet.create({
-  row: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  pointAccordionContainer: {
-    backgroundColor: wonderBlocksTokens.color.white
-  },
-  pointAccordionPanel: {
-    alignItems: "start"
-  },
-  icon: {
-    marginInlineStart: wonderBlocksTokens.spacing.xxxSmall_4
-  },
-  polygonActionsContainer: {
-    width: "100%"
-  },
-  iconButton: {
-    margin: 0
-  },
-  movementButtonsContainer: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    minWidth: "fit-content"
-  },
-  spaceUnder: {
-    marginBottom: wonderBlocksTokens.spacing.xSmall_8
-  },
-  truncatedWidth: {
-    // Allow truncation, stop bleeding over the edge.
-    minWidth: 0
-  }
-});
-
-/**
- * LockedVectorSettings is a component that allows the user to edit the
- * settings of specifically a locked vector on the graph.
- *
- * Used in the interactive graph editor's locked figures section.
- */
-const lengthErrorMessage = "The vector cannot have length 0.";
-const LockedVectorSettings = props => {
-  const {
-    points,
-    color: lineColor,
-    onChangeProps,
-    onMove,
-    onRemove
-  } = props;
-  const [tail, tip] = points;
-  const lineLabel = `Vector (${tail[0]}, ${tail[1]}), (${tip[0]}, ${tip[1]})`;
-
-  // Check if the line has length 0.
-  const isInvalid = kmath.vector.equal(tail, tip);
-  function handleChangePoint(newCoord, index) {
-    if (typeof newCoord !== "undefined") {
-      const newPoints = [...points];
-      newPoints[index] = [...newCoord];
-      onChangeProps({
-        points: newPoints
-      });
-    }
-  }
-  function handleColorChange(newColor) {
-    onChangeProps({
-      color: newColor
-    });
-  }
-  return /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
-    expanded: props.expanded,
-    onToggle: props.onToggle,
-    header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$o.row
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
-      size: wonderBlocksTokens.spacing.xSmall_8
-    }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
-      color: lineColor,
-      lineStyle: "solid"
-    }))
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$o.row, styles$o.spaceUnder]
-  }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
-    selectedValue: lineColor,
-    onChange: handleColorChange
-  })), isInvalid && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    style: styles$o.errorText
-  }, lengthErrorMessage), /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
-    expanded: true // Initial state is expanded
-    ,
-    containerStyle: styles$o.container,
-    panelStyle: styles$o.accordionPanel,
-    header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$o.row
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Tail (${tail[0]}, ${tail[1]})`))
-  }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
-    coord: tail,
-    error: isInvalid,
-    onChange: newProps => {
-      handleChangePoint(newProps, 0);
-    }
-  })), /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
-    expanded: true // Initial state is expanded
-    ,
-    containerStyle: styles$o.container,
-    panelStyle: styles$o.accordionPanel,
-    header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$o.row
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Tip (${tip[0]}, ${tip[1]})`))
-  }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
-    coord: tip,
-    error: isInvalid,
-    onChange: newProps => {
-      handleChangePoint(newProps, 1);
-    }
-  })), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
-    figureType: props.type,
-    onMove: onMove,
-    onRemove: onRemove
-  }));
-};
-const styles$o = aphrodite.StyleSheet.create({
-  accordionPanel: {
-    paddingBottom: wonderBlocksTokens.spacing.medium_16
-  },
-  container: {
-    marginTop: wonderBlocksTokens.spacing.xSmall_8,
-    marginBottom: 0,
-    marginLeft: -wonderBlocksTokens.spacing.xxxSmall_4,
-    marginRight: -wonderBlocksTokens.spacing.xxxSmall_4,
-    backgroundColor: wonderBlocksTokens.color.white
-  },
-  errorText: {
-    color: wonderBlocksTokens.color.red,
-    marginTop: wonderBlocksTokens.spacing.xSmall_8
-  },
-  row: {
-    flexDirection: "row",
-    alignItems: "center"
-  }
-});
-
-/**
- * LockedFigureSettings takes in a figure and renders the
- * respective settings for that figure type.
- *
- * Used in the interactive graph editor's locked figures section.
- */
-
-// Union this type with other locked figure types when they are added.
-
-const LockedFigureSettings = props => {
-  switch (props.type) {
-    case "point":
-      return /*#__PURE__*/React__namespace.createElement(LockedPointSettings, props);
-    case "line":
-      return /*#__PURE__*/React__namespace.createElement(LockedLineSettings, props);
-    case "vector":
-      return /*#__PURE__*/React__namespace.createElement(LockedVectorSettings, props);
-    case "ellipse":
-      return /*#__PURE__*/React__namespace.createElement(LockedEllipseSettings, props);
-    case "polygon":
-      return /*#__PURE__*/React__namespace.createElement(LockedPolygonSettings, props);
-    case "function":
-      return /*#__PURE__*/React__namespace.createElement(LockedFunctionSettings, props);
-    case "label":
-      if (props.showLabelsFlag) {
-        return /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, props);
-      }
-      break;
-  }
-  return null;
-};
-
-const LockedFiguresSection = props => {
-  // Keep track of all figures' accordions' expanded states for the
-  // expand/collapse all button. Set the whole array to false initially.
-  const collapsedStateArray = Array((props.figures ?? []).length).fill(false);
-  const [expandedStates, setExpandedStates] = React__namespace.useState(collapsedStateArray);
-  const [isExpanded, setIsExpanded] = React__namespace.useState(true);
-  const uniqueId = wonderBlocksCore.useUniqueIdWithMock().get("locked-figures-section");
-  const {
-    figures,
-    onChange
-  } = props;
-  function addLockedFigure(newFigure) {
-    const lockedFigures = figures || [];
-    const newProps = {
-      lockedFigures: [...lockedFigures, getDefaultFigureForType(newFigure)]
-    };
-    onChange(newProps);
-    setExpandedStates([...expandedStates, true]);
-  }
-  function moveLockedFigure(index, movement) {
-    // Don't allow moving the first figure up or the last figure down.
-    if (index === 0 && (movement === "back" || movement === "backward")) {
-      return;
-    }
-    if (figures && index === figures.length - 1 && (movement === "front" || movement === "forward")) {
-      return;
-    }
-    const lockedFigures = figures || [];
-    const newFigures = [...lockedFigures];
-    const newExpandedStates = [...expandedStates];
-
-    // First, remove the figure from its current position
-    // in the figures array and the expanded states array.
-    const [removedFigure] = newFigures.splice(index, 1);
-    newExpandedStates.splice(index, 1);
-
-    // Then, add it back in the new position. Add "true" to the
-    // expanded states array for the new position (it must already
-    // be open since the button to move it is being pressed from there).
-    switch (movement) {
-      case "back":
-        newFigures.unshift(removedFigure);
-        newExpandedStates.unshift(true);
-        break;
-      case "backward":
-        newFigures.splice(index - 1, 0, removedFigure);
-        newExpandedStates.splice(index - 1, 0, true);
-        break;
-      case "forward":
-        newFigures.splice(index + 1, 0, removedFigure);
-        newExpandedStates.splice(index + 1, 0, true);
-        break;
-      case "front":
-        newFigures.push(removedFigure);
-        newExpandedStates.push(true);
-        break;
-    }
-    onChange({
-      lockedFigures: newFigures
-    });
-    setExpandedStates(newExpandedStates);
-  }
-  function removeLockedFigure(index) {
-    // eslint-disable-next-line no-alert
-    if (window.confirm("Are you sure you want to delete this figure?")) {
-      const lockedFigures = figures || [];
-      onChange({
-        lockedFigures: [...lockedFigures.slice(0, index), ...lockedFigures.slice(index + 1)]
-      });
-
-      // Update expanded states
-      const newExpandedStates = [...expandedStates];
-      newExpandedStates.splice(index, 1);
-      setExpandedStates(newExpandedStates);
-    }
-  }
-  function changeProps(index,
-  // Omit the type from the figure props so it doesn't think
-  // we're trying to pass in the props for the wrong type.
-  figureProps) {
-    const lockedFigures = figures || [];
-    const newFigures = {
-      lockedFigures: [...lockedFigures.slice(0, index), {
-        ...lockedFigures[index],
-        ...figureProps
-      }, ...lockedFigures.slice(index + 1)]
-    };
-    onChange(newFigures);
-  }
-  function toggleExpanded(newValue) {
-    setExpandedStates(Array(figures?.length).fill(newValue));
-  }
-  const allCollapsed = expandedStates.every(value => !value);
-  const buttonLabel = allCollapsed ? "Expand all" : "Collapse all";
-  const showExpandButton = !!figures?.length;
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Heading, {
-    title: "Locked Figures",
-    isOpen: isExpanded,
-    onToggle: () => setIsExpanded(!isExpanded),
-    isCollapsible: true
-  }), isExpanded && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, figures?.map((figure, index) => {
-    return /*#__PURE__*/React__namespace.createElement(LockedFigureSettings, _extends({
-      key: `${uniqueId}-locked-${figure}-${index}`,
-      showLabelsFlag: props.showLabelsFlag,
-      expanded: expandedStates[index],
-      onToggle: newValue => {
-        const newExpanded = [...expandedStates];
-        newExpanded[index] = newValue;
-        setExpandedStates(newExpanded);
-      }
-    }, figure, {
-      onChangeProps: newProps => changeProps(index, newProps),
-      onMove: movement => moveLockedFigure(index, movement),
-      onRemove: () => removeLockedFigure(index)
-    }));
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$n.buttonContainer
-  }, /*#__PURE__*/React__namespace.createElement(LockedFigureSelect, {
-    showLabelsFlag: props.showLabelsFlag,
-    id: `${uniqueId}-select`,
-    onChange: addLockedFigure
-  }), /*#__PURE__*/React__namespace.createElement(Strut, {
-    size: wonderBlocksTokens.spacing.small_12
-  }), showExpandButton && /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
-    kind: "secondary",
-    onClick: () => toggleExpanded(allCollapsed),
-    style: styles$n.button
-  }, buttonLabel))));
-};
-const styles$n = aphrodite.StyleSheet.create({
-  buttonContainer: {
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  button: {
-    marginTop: wonderBlocksTokens.spacing.xSmall_8,
-    flexGrow: 1
-  }
-});
-
-const UNLIMITED = "unlimited";
-// Parses a string (ostensibly from some UI element that only supports string
-// types, such as a <select />) into a numeric point count or the special sigil
-// "unlimited". Note that 0 is a special case, and means "unlimited".
-const parsePointCount = points => {
-  const parsed = parseInt(points, 10);
-  if (isNaN(parsed)) {
-    return UNLIMITED;
-  }
-  return parsed === 0 ? UNLIMITED : parsed;
-};
-
-const GraphPointsCountSelector = _ref => {
-  let {
-    numPoints = 1,
-    onChange
-  } = _ref;
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
-    selectedValue: `${numPoints}`,
-    onChange: newValue => {
-      onChange(parsePointCount(newValue));
-    }
-    // Never uses placeholder, always has value
-    ,
-    placeholder: "",
-    style: styles$m.singleSelectShort
-  }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    key: n,
-    value: `${n}`,
-    label: `${n} point${n > 1 ? "s" : ""}`
-  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    key: "unlimited",
-    value: UNLIMITED,
-    label: "unlimited"
-  })]);
-};
-const styles$m = aphrodite.StyleSheet.create({
-  singleSelectShort: {
-    // Non-standard spacing, but it's the smallest we can go
-    // without running into styling issues with the dropdown.
-    height: 26
-  }
-});
-
-const GraphTypeSelector = props => {
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
-    selectedValue: props.graphType,
-    onChange: props.onChange,
-    placeholder: "Select a graph type",
-    style: styles$l.singleSelectShort
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    value: "linear",
-    label: "Linear function"
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    value: "quadratic",
-    label: "Quadratic function"
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    value: "sinusoid",
-    label: "Sinusoid function"
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    value: "circle",
-    label: "Circle"
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    value: "point",
-    label: "Point(s)"
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    value: "linear-system",
-    label: "Linear System"
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    value: "polygon",
-    label: "Polygon"
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    value: "segment",
-    label: "Line Segment(s)"
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    value: "ray",
-    label: "Ray"
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    value: "angle",
-    label: "Angle"
+    icon: arrowFatLeft__default["default"],
+    onClick: () => handlePolygonMove("left")
+  }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
+    "aria-label": "Move polygon down",
+    style: styles$k.iconButton,
+    size: "small",
+    icon: arrowFatDown__default["default"],
+    onClick: () => handlePolygonMove("down")
+  }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
+    "aria-label": "Move polygon right",
+    style: styles$k.iconButton,
+    size: "small",
+    icon: arrowFatRight__default["default"],
+    onClick: () => handlePolygonMove("right")
+  }))))), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
+    figureType: props.type,
+    onMove: onMove,
+    onRemove: onRemove
   }));
 };
-const styles$l = aphrodite.StyleSheet.create({
-  singleSelectShort: {
-    // Non-standard spacing, but it's the smallest we can go
-    // without running into styling issues with the dropdown.
-    height: 26
+const styles$k = aphrodite.StyleSheet.create({
+  row: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  pointAccordionContainer: {
+    backgroundColor: wonderBlocksTokens.color.white
+  },
+  pointAccordionPanel: {
+    alignItems: "start"
+  },
+  icon: {
+    marginInlineStart: wonderBlocksTokens.spacing.xxxSmall_4
+  },
+  polygonActionsContainer: {
+    width: "100%"
+  },
+  iconButton: {
+    margin: 0
+  },
+  movementButtonsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    minWidth: "fit-content"
+  },
+  spaceUnder: {
+    marginBottom: wonderBlocksTokens.spacing.xSmall_8
+  },
+  truncatedWidth: {
+    // Allow truncation, stop bleeding over the edge.
+    minWidth: 0
   }
 });
 
-function InteractiveGraphCorrectAnswer(props) {
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Heading, {
-    title: "Correct Answer",
-    isOpen: true,
-    isCollapsible: false
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelXSmall, {
-    style: {
-      paddingTop: wonderBlocksTokens.spacing.xxSmall_6,
-      paddingBottom: wonderBlocksTokens.spacing.xxSmall_6,
-      color: wonderBlocksTokens.color.offBlack64
-    }
-  }, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.BodyMonospace, {
-    style: {
-      fontSize: 12,
-      backgroundColor: "#eee",
-      paddingInline: wonderBlocksTokens.spacing.xxSmall_6,
-      borderColor: "#ccc",
-      borderStyle: "solid",
-      borderWidth: 1
-    }
-  }, props.equationString)), props.children));
-}
-
-function InteractiveGraphDescription(props) {
+/**
+ * LockedVectorSettings is a component that allows the user to edit the
+ * settings of specifically a locked vector on the graph.
+ *
+ * Used in the interactive graph editor's locked figures section.
+ */
+const lengthErrorMessage = "The vector cannot have length 0.";
+const LockedVectorSettings = props => {
   const {
-    ariaLabelValue,
-    ariaDescriptionValue,
-    onChange
+    points,
+    color: lineColor,
+    onChangeProps,
+    onMove,
+    onRemove
   } = props;
-  const [isOpen, setIsOpen] = React__namespace.useState(true);
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Heading, {
-    title: "Description",
-    isCollapsible: true,
-    isOpen: isOpen,
-    onToggle: setIsOpen
-  }), isOpen && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelXSmall, {
-    style: styles$k.caption
-  }, "Use these fields to describe the graph as a whole. These are used by screen readers to describe content to users who are visually impaired."), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
-    tag: "label"
-  }, "Title", /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
-    value: ariaLabelValue,
-    onChange: newValue => onChange({
-      fullGraphAriaLabel: newValue
-    }),
-    style: styles$k.spaceAbove
-  })), /*#__PURE__*/React__namespace.createElement(Strut, {
-    size: wonderBlocksTokens.spacing.small_12
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
-    tag: "label"
-  }, "Description", /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextArea, {
-    rows: 8,
-    resizeType: "vertical",
-    value: ariaDescriptionValue,
-    onChange: newValue => onChange({
-      fullGraphAriaDescription: newValue
-    }),
-    style: styles$k.spaceAbove
-  }))));
-}
-const styles$k = aphrodite.StyleSheet.create({
-  caption: {
-    color: wonderBlocksTokens.color.offBlack64,
-    paddingTop: wonderBlocksTokens.spacing.xxSmall_6,
-    paddingBottom: wonderBlocksTokens.spacing.xxSmall_6
-  },
-  spaceAbove: {
-    marginTop: wonderBlocksTokens.spacing.xxxSmall_4
-  }
-});
+  const [tail, tip] = points;
+  const lineLabel = `Vector (${tail[0]}, ${tail[1]}), (${tip[0]}, ${tip[1]})`;
 
-/* eslint-disable react/forbid-prop-types, react/no-unsafe */
-const {
-  ButtonGroup: ButtonGroup$2,
-  InfoTip: InfoTip$c,
-  RangeInput: RangeInput$4
-} = perseus.components;
-const defaultBackgroundImage$1 = {
-  url: null,
-  width: 0,
-  height: 0
-};
-function numSteps(range, step) {
-  return Math.floor((range[1] - range[0]) / step);
-}
-class InteractiveGraphSettings extends React__namespace.Component {
-  _isMounted = false;
-  bgUrlRef = /*#__PURE__*/React__namespace.createRef();
-  labelXRef = /*#__PURE__*/React__namespace.createRef();
-  labelYRef = /*#__PURE__*/React__namespace.createRef();
-  static stateFromProps(props) {
-    return {
-      labelsTextbox: props.labels,
-      gridStepTextbox: props.gridStep,
-      snapStepTextbox: props.snapStep,
-      stepTextbox: props.step,
-      rangeTextbox: props.range,
-      // Shallow-copied clone
-      backgroundImage: {
-        ...props.backgroundImage
-      }
-    };
-  }
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: true,
-      ...InteractiveGraphSettings.stateFromProps(props)
-    };
+  // Check if the line has length 0.
+  const isInvalid = kmath.vector.equal(tail, tip);
+  function handleChangePoint(newCoord, index) {
+    if (typeof newCoord !== "undefined") {
+      const newPoints = [...points];
+      newPoints[index] = [...newCoord];
+      onChangeProps({
+        points: newPoints
+      });
+    }
   }
-  static defaultProps = {
-    box: [perseus.interactiveSizes.defaultBoxSizeSmall, perseus.interactiveSizes.defaultBoxSizeSmall],
-    labels: ["x", "y"],
-    range: [[-10, 10], [-10, 10]],
-    step: [1, 1],
-    gridStep: [1, 1],
-    snapStep: [1, 1],
-    valid: true,
-    backgroundImage: defaultBackgroundImage$1,
-    markings: "graph",
-    showProtractor: false,
-    showTooltips: false
-  };
-  componentDidMount() {
-    // TODO(scottgrant): This is a hack to remove the deprecated call to
-    // this.isMounted() but is still considered an anti-pattern.
-    this._isMounted = true;
-    this.changeGraph = ___default["default"].debounce(this.changeGraph, 300);
+  function handleColorChange(newColor) {
+    onChangeProps({
+      color: newColor
+    });
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    // Make sure that state updates when switching
-    // between different items in a multi-item editor.
-    if (!___default["default"].isEqual(this.props.labels, nextProps.labels) || !___default["default"].isEqual(this.props.gridStep, nextProps.gridStep) || !___default["default"].isEqual(this.props.snapStep, nextProps.snapStep) || !___default["default"].isEqual(this.props.step, nextProps.step) || !___default["default"].isEqual(this.props.range, nextProps.range) || !___default["default"].isEqual(this.props.backgroundImage, nextProps.backgroundImage)) {
-      this.setState(InteractiveGraphSettings.stateFromProps(nextProps));
+  return /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
+    expanded: props.expanded,
+    onToggle: props.onToggle,
+    header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$j.row
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
+      size: wonderBlocksTokens.spacing.xSmall_8
+    }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
+      color: lineColor,
+      lineStyle: "solid"
+    }))
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$j.row, styles$j.spaceUnder]
+  }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
+    selectedValue: lineColor,
+    onChange: handleColorChange
+  })), isInvalid && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    style: styles$j.errorText
+  }, lengthErrorMessage), /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
+    expanded: true // Initial state is expanded
+    ,
+    containerStyle: styles$j.container,
+    panelStyle: styles$j.accordionPanel,
+    header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$j.row
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Tail (${tail[0]}, ${tail[1]})`))
+  }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
+    coord: tail,
+    error: isInvalid,
+    onChange: newProps => {
+      handleChangePoint(newProps, 0);
     }
+  })), /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
+    expanded: true // Initial state is expanded
+    ,
+    containerStyle: styles$j.container,
+    panelStyle: styles$j.accordionPanel,
+    header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$j.row
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Tip (${tip[0]}, ${tip[1]})`))
+  }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
+    coord: tip,
+    error: isInvalid,
+    onChange: newProps => {
+      handleChangePoint(newProps, 1);
+    }
+  })), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
+    figureType: props.type,
+    onMove: onMove,
+    onRemove: onRemove
+  }));
+};
+const styles$j = aphrodite.StyleSheet.create({
+  accordionPanel: {
+    paddingBottom: wonderBlocksTokens.spacing.medium_16
+  },
+  container: {
+    marginTop: wonderBlocksTokens.spacing.xSmall_8,
+    marginBottom: 0,
+    marginLeft: -wonderBlocksTokens.spacing.xxxSmall_4,
+    marginRight: -wonderBlocksTokens.spacing.xxxSmall_4,
+    backgroundColor: wonderBlocksTokens.color.white
+  },
+  errorText: {
+    color: wonderBlocksTokens.color.red,
+    marginTop: wonderBlocksTokens.spacing.xSmall_8
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
   }
-  componentWillUnmount() {
-    this._isMounted = false;
-  }
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
+});
+
+/**
+ * LockedFigureSettings takes in a figure and renders the
+ * respective settings for that figure type.
+ *
+ * Used in the interactive graph editor's locked figures section.
+ */
+
+// Union this type with other locked figure types when they are added.
+
+const LockedFigureSettings = props => {
+  switch (props.type) {
+    case "point":
+      return /*#__PURE__*/React__namespace.createElement(LockedPointSettings, props);
+    case "line":
+      return /*#__PURE__*/React__namespace.createElement(LockedLineSettings, props);
+    case "vector":
+      return /*#__PURE__*/React__namespace.createElement(LockedVectorSettings, props);
+    case "ellipse":
+      return /*#__PURE__*/React__namespace.createElement(LockedEllipseSettings, props);
+    case "polygon":
+      return /*#__PURE__*/React__namespace.createElement(LockedPolygonSettings, props);
+    case "function":
+      return /*#__PURE__*/React__namespace.createElement(LockedFunctionSettings, props);
+    case "label":
+      if (props.showLabelsFlag) {
+        return /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, props);
       }
-      return perseus.Changeable.change.apply(_this, args);
-    };
-  })();
-  changeBackgroundUrl = e => {
-    // Only continue on blur or "enter"
-    if (e.type === "keypress" && e.key !== "Enter") {
-      return;
-    }
-    const setUrl = (url, width, height) => {
-      // Shallow-copied clone
-      const image = {
-        ...this.props.backgroundImage
+      break;
+  }
+  return null;
+};
+
+const DEFAULT_COLOR = "grayH";
+function getDefaultFigureForType(type) {
+  switch (type) {
+    case "point":
+      return {
+        type: "point",
+        coord: [0, 0],
+        color: DEFAULT_COLOR,
+        filled: true
       };
-      image.url = url;
-      image.width = width;
-      image.height = height;
-      this.setState({
-        backgroundImage: image
-      }, this.changeGraph);
-    };
-    const url = this.bgUrlRef.current?.value;
-    if (url) {
-      perseus.Util.getImageSize(url, (width, height) => {
-        if (this._isMounted) {
-          setUrl(url, width, height);
-        }
-      });
-    } else {
-      setUrl(null, 0, 0);
-    }
-  };
-  renderLabelChoices = choices => {
-    return choices.map(nameAndValue => /*#__PURE__*/React__namespace.createElement("option", {
-      key: nameAndValue[1],
-      value: nameAndValue[1]
-    }, nameAndValue[0]));
-  };
-  validRange = range => {
-    const numbers = ___default["default"].every(range, function (num) {
-      return ___default["default"].isFinite(num);
-    });
-    if (!numbers) {
-      return "Range must be a valid number";
-    }
-    if (range[0] >= range[1]) {
-      return "Range must have a higher number on the right";
-    }
-    return true;
-  };
-  validateStepValue = settings => {
-    const {
-      step,
-      range,
-      name,
-      minTicks,
-      maxTicks
-    } = settings;
-    const nSteps = numSteps(range, step);
-    if (nSteps < minTicks) {
-      return name + " is too large, there must be at least " + minTicks + " ticks.";
-    }
-    if (nSteps > maxTicks) {
-      return name + " is too small, there can be at most " + maxTicks + " ticks.";
-    }
-    return true;
-  };
-  validSnapStep = (step, range) => {
-    return this.validateStepValue({
-      step: step,
-      range: range,
-      name: "Snap step",
-      minTicks: 5,
-      maxTicks: 60
-    });
-  };
-  validGridStep = (step, range) => {
-    return this.validateStepValue({
-      step: step,
-      range: range,
-      name: "Grid step",
-      minTicks: 3,
-      maxTicks: 60
-    });
-  };
-  validStep = (step, range) => {
-    return this.validateStepValue({
-      step: step,
-      range: range,
-      name: "Step",
-      minTicks: 3,
-      maxTicks: 20
-    });
-  };
-  validBackgroundImageSize = image => {
-    // Ignore empty images
-    if (!image.url) {
-      return true;
-    }
-    const validSize = image.width <= 450 && image.height <= 450;
-    if (!validSize) {
-      return "Image must be smaller than 450px x 450px.";
-    }
-    return true;
-  };
-  validateGraphSettings = (range, step, gridStep, snapStep, image) => {
-    const self = this;
-    let msg;
-    const goodRange = ___default["default"].every(range, function (range) {
-      msg = self.validRange(range);
-      return msg === true;
-    });
-    if (!goodRange) {
-      return msg;
-    }
-    const goodStep = ___default["default"].every(step, function (step, i) {
-      msg = self.validStep(step, range[i]);
-      return msg === true;
-    });
-    if (!goodStep) {
-      return msg;
-    }
-    const goodGridStep = ___default["default"].every(gridStep, function (gridStep, i) {
-      msg = self.validGridStep(gridStep, range[i]);
-      return msg === true;
-    });
-    if (!goodGridStep) {
-      return msg;
-    }
-    const goodSnapStep = ___default["default"].every(snapStep, function (snapStep, i) {
-      msg = self.validSnapStep(snapStep, range[i]);
-      return msg === true;
-    });
-    if (!goodSnapStep) {
-      return msg;
+    case "line":
+      return {
+        type: "line",
+        kind: "line",
+        points: [getDefaultFigureForType("point"), {
+          ...getDefaultFigureForType("point"),
+          coord: [2, 2]
+        }],
+        color: DEFAULT_COLOR,
+        lineStyle: "solid",
+        showPoint1: false,
+        showPoint2: false
+      };
+    case "vector":
+      return {
+        type: "vector",
+        points: [[0, 0], [2, 2]],
+        color: DEFAULT_COLOR
+      };
+    case "ellipse":
+      return {
+        type: "ellipse",
+        center: [0, 0],
+        radius: [1, 1],
+        angle: 0,
+        color: DEFAULT_COLOR,
+        fillStyle: "none",
+        strokeStyle: "solid"
+      };
+    case "polygon":
+      return {
+        type: "polygon",
+        points: [[0, 2], [-1, 0], [1, 0]],
+        color: DEFAULT_COLOR,
+        showVertices: false,
+        fillStyle: "none",
+        strokeStyle: "solid"
+      };
+    case "function":
+      return {
+        type: "function",
+        color: DEFAULT_COLOR,
+        strokeStyle: "solid",
+        equation: "x^2",
+        directionalAxis: "x"
+      };
+    case "label":
+      return {
+        type: "label",
+        coord: [0, 0],
+        text: "",
+        color: DEFAULT_COLOR,
+        size: "medium"
+      };
+    default:
+      throw new wonderStuffCore.UnreachableCaseError(type);
+  }
+}
+
+const LockedFiguresSection = props => {
+  // Keep track of all figures' accordions' expanded states for the
+  // expand/collapse all button. Set the whole array to false initially.
+  const collapsedStateArray = Array((props.figures ?? []).length).fill(false);
+  const [expandedStates, setExpandedStates] = React__namespace.useState(collapsedStateArray);
+  const [isExpanded, setIsExpanded] = React__namespace.useState(true);
+  const uniqueId = wonderBlocksCore.useUniqueIdWithMock().get("locked-figures-section");
+  const {
+    figures,
+    onChange
+  } = props;
+  function addLockedFigure(newFigure) {
+    const lockedFigures = figures || [];
+    const newProps = {
+      lockedFigures: [...lockedFigures, getDefaultFigureForType(newFigure)]
+    };
+    onChange(newProps);
+    setExpandedStates([...expandedStates, true]);
+  }
+  function moveLockedFigure(index, movement) {
+    // Don't allow moving the first figure up or the last figure down.
+    if (index === 0 && (movement === "back" || movement === "backward")) {
+      return;
     }
-    const goodImageSize = this.validBackgroundImageSize(image);
-    if (goodImageSize !== true) {
-      msg = goodImageSize;
-      return msg;
+    if (figures && index === figures.length - 1 && (movement === "front" || movement === "forward")) {
+      return;
     }
-    return true;
-  };
-  changeLabel = (i, e) => {
-    const val = e.target.value;
-    const labels = this.state.labelsTextbox.slice();
-    labels[i] = val;
-    this.setState({
-      labelsTextbox: labels
-    }, this.changeGraph);
-  };
-  changeRange = (i, values) => {
-    const ranges = this.state.rangeTextbox.slice();
-    ranges[i] = values;
-    const step = this.state.stepTextbox.slice();
-    const gridStep = this.state.gridStepTextbox.slice();
-    const snapStep = this.state.snapStepTextbox.slice();
-    const scale = perseus.Util.scaleFromExtent(ranges[i], this.props.box[i]);
-    if (this.validRange(ranges[i]) === true) {
-      step[i] = perseus.Util.tickStepFromExtent(ranges[i], this.props.box[i]);
-      const gridStepValue = perseus.Util.gridStepFromTickStep(step[i], scale);
-      if (gridStepValue) {
-        gridStep[i] = gridStepValue;
-      }
-      snapStep[i] = gridStep[i] / 2;
+    const lockedFigures = figures || [];
+    const newFigures = [...lockedFigures];
+    const newExpandedStates = [...expandedStates];
+
+    // First, remove the figure from its current position
+    // in the figures array and the expanded states array.
+    const [removedFigure] = newFigures.splice(index, 1);
+    newExpandedStates.splice(index, 1);
+
+    // Then, add it back in the new position. Add "true" to the
+    // expanded states array for the new position (it must already
+    // be open since the button to move it is being pressed from there).
+    switch (movement) {
+      case "back":
+        newFigures.unshift(removedFigure);
+        newExpandedStates.unshift(true);
+        break;
+      case "backward":
+        newFigures.splice(index - 1, 0, removedFigure);
+        newExpandedStates.splice(index - 1, 0, true);
+        break;
+      case "forward":
+        newFigures.splice(index + 1, 0, removedFigure);
+        newExpandedStates.splice(index + 1, 0, true);
+        break;
+      case "front":
+        newFigures.push(removedFigure);
+        newExpandedStates.push(true);
+        break;
     }
-    this.setState({
-      stepTextbox: step,
-      gridStepTextbox: gridStep,
-      snapStepTextbox: snapStep,
-      rangeTextbox: ranges
-    }, this.changeGraph);
-  };
-  changeStep = step => {
-    this.setState({
-      stepTextbox: step
-    }, this.changeGraph);
-  };
-  changeSnapStep = snapStep => {
-    this.setState({
-      snapStepTextbox: snapStep
-    }, this.changeGraph);
-  };
-  changeGridStep = gridStep => {
-    this.setState({
-      gridStepTextbox: gridStep,
-      snapStepTextbox: ___default["default"].map(gridStep, function (step) {
-        return step / 2;
-      })
-    }, this.changeGraph);
-  };
-  changeGraph = () => {
-    const labels = this.state.labelsTextbox;
-    const range = ___default["default"].map(this.state.rangeTextbox, function (range) {
-      return ___default["default"].map(range, Number);
+    onChange({
+      lockedFigures: newFigures
     });
-    const step = ___default["default"].map(this.state.stepTextbox, Number);
-    const gridStep = this.state.gridStepTextbox;
-    const snapStep = this.state.snapStepTextbox;
-    const image = this.state.backgroundImage;
-
-    // validationResult is either:
-    //   true -> the settings are valid
-    //   a string -> the settings are invalid, and the explanation
-    //               is contained in the string
-    // TODO(aria): Refactor this to not be confusing
-    const validationResult = this.validateGraphSettings(range, step, gridStep, snapStep, image);
-    if (validationResult === true) {
-      // either true or a string
-      this.change({
-        valid: true,
-        labels: labels,
-        range: range,
-        step: step,
-        gridStep: gridStep,
-        snapStep: snapStep,
-        backgroundImage: image
-      });
-    } else {
-      this.change({
-        valid: validationResult // a string message, not false
+    setExpandedStates(newExpandedStates);
+  }
+  function removeLockedFigure(index) {
+    // eslint-disable-next-line no-alert
+    if (window.confirm("Are you sure you want to delete this figure?")) {
+      const lockedFigures = figures || [];
+      onChange({
+        lockedFigures: [...lockedFigures.slice(0, index), ...lockedFigures.slice(index + 1)]
       });
-    }
-  };
 
-  render() {
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Heading, {
-      title: "Common Graph Settings",
-      isOpen: this.state.isExpanded,
-      isCollapsible: true,
-      onToggle: () => this.setState({
-        isExpanded: !this.state.isExpanded
-      })
-    }), this.state.isExpanded && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "graph-settings"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
-      label: "x Label"
-    }, /*#__PURE__*/React__namespace.createElement("input", {
-      type: "text",
-      className: "graph-settings-axis-label",
-      ref: this.labelXRef,
-      onChange: e => this.changeLabel(0, e),
-      value: this.state.labelsTextbox[0] || ""
-    }))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
-      label: "y Label"
-    }, /*#__PURE__*/React__namespace.createElement("input", {
-      type: "text",
-      className: "graph-settings-axis-label",
-      ref: this.labelYRef,
-      onChange: e => this.changeLabel(1, e),
-      value: this.state.labelsTextbox[1] || ""
-    })))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
-      label: "x Range"
-    }, /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
-      value: this.state.rangeTextbox[0],
-      onChange: vals => this.changeRange(0, vals)
-    }))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
-      label: "y Range"
-    }, /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
-      value: this.state.rangeTextbox[1],
-      onChange: vals => this.changeRange(1, vals)
-    })))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
-      label: "Tick Step"
-    }, /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
-      value: this.state.stepTextbox,
-      onChange: this.changeStep
-    }))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
-      label: "Grid Step"
-    }, /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
-      value: this.state.gridStepTextbox,
-      onChange: this.changeGridStep
-    })))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
-      label: "Snap Step"
-    }, /*#__PURE__*/React__namespace.createElement(RangeInput$4, {
-      value: this.state.snapStepTextbox,
-      onChange: this.changeSnapStep
-    })))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
-      label: "Markings:"
-    }, /*#__PURE__*/React__namespace.createElement(ButtonGroup$2, {
-      value: this.props.markings,
-      allowEmpty: false,
-      buttons: [{
-        value: "graph",
-        content: "Graph"
-      }, {
-        value: "grid",
-        content: "Grid"
-      }, {
-        value: "none",
-        content: "None"
-      }],
-      onChange: this.change("markings")
-    }))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
-      label: "Show tooltips",
-      checked: this.props.showTooltips,
-      onChange: value => {
-        this.change({
-          showTooltips: value
-        });
-      }
-    }))), /*#__PURE__*/React__namespace.createElement(LabeledRow, {
-      label: "Background image URL:",
-      style: styles$j.resetSpaceTop
-    }, /*#__PURE__*/React__namespace.createElement("input", {
-      type: "text",
-      className: aphrodite.css(styles$j.backgroundUrlInput),
-      ref: this.bgUrlRef,
-      value: this.state.backgroundImage.url || "",
-      onChange: e => {
-        // Shallow-copied clone
-        const image = {
-          ...this.props.backgroundImage
-        };
-        image.url = e.target.value;
-        this.setState({
-          backgroundImage: image
-        });
-      },
-      onKeyPress: this.changeBackgroundUrl,
-      onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$c, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$j.protractorSection
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$j.checkboxRow
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
-      label: "Show protractor",
-      checked: this.props.showProtractor,
-      onChange: value => {
-        this.change({
-          showProtractor: value
-        });
-      },
-      style: styles$j.resetSpaceTop
-    })), this.props.showProtractor && /*#__PURE__*/React__namespace.createElement(Banner__default["default"], {
-      layout: "floating",
-      text: "The protractor is not accessible. Please consider an alternate approach.",
-      kind: "warning"
-    }))));
+      // Update expanded states
+      const newExpandedStates = [...expandedStates];
+      newExpandedStates.splice(index, 1);
+      setExpandedStates(newExpandedStates);
+    }
   }
-}
-const styles$j = aphrodite.StyleSheet.create({
-  resetSpaceTop: {
-    marginTop: 0
-  },
-  backgroundUrlInput: {
-    border: `1px solid ${wonderBlocksTokens.color.offBlack32}`,
-    borderRadius: wonderBlocksTokens.spacing.xxxSmall_4,
-    padding: wonderBlocksTokens.spacing.xxxSmall_4
-  },
-  checkboxRow: {
+  function changeProps(index,
+  // Omit the type from the figure props so it doesn't think
+  // we're trying to pass in the props for the wrong type.
+  figureProps) {
+    const lockedFigures = figures || [];
+    const newFigures = {
+      lockedFigures: [...lockedFigures.slice(0, index), {
+        ...lockedFigures[index],
+        ...figureProps
+      }, ...lockedFigures.slice(index + 1)]
+    };
+    onChange(newFigures);
+  }
+  function toggleExpanded(newValue) {
+    setExpandedStates(Array(figures?.length).fill(newValue));
+  }
+  const allCollapsed = expandedStates.every(value => !value);
+  const buttonLabel = allCollapsed ? "Expand all" : "Collapse all";
+  const showExpandButton = !!figures?.length;
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Heading, {
+    title: "Locked Figures",
+    isOpen: isExpanded,
+    onToggle: () => setIsExpanded(!isExpanded),
+    isCollapsible: true
+  }), isExpanded && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, figures?.map((figure, index) => {
+    return /*#__PURE__*/React__namespace.createElement(LockedFigureSettings, _extends({
+      key: `${uniqueId}-locked-${figure}-${index}`,
+      showLabelsFlag: props.showLabelsFlag,
+      expanded: expandedStates[index],
+      onToggle: newValue => {
+        const newExpanded = [...expandedStates];
+        newExpanded[index] = newValue;
+        setExpandedStates(newExpanded);
+      }
+    }, figure, {
+      onChangeProps: newProps => changeProps(index, newProps),
+      onMove: movement => moveLockedFigure(index, movement),
+      onRemove: () => removeLockedFigure(index)
+    }));
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$i.buttonContainer
+  }, /*#__PURE__*/React__namespace.createElement(LockedFigureSelect, {
+    showLabelsFlag: props.showLabelsFlag,
+    id: `${uniqueId}-select`,
+    onChange: addLockedFigure
+  }), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), showExpandButton && /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+    kind: "secondary",
+    onClick: () => toggleExpanded(allCollapsed),
+    style: styles$i.button
+  }, buttonLabel))));
+};
+const styles$i = aphrodite.StyleSheet.create({
+  buttonContainer: {
     flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: wonderBlocksTokens.spacing.xSmall_8
+    alignItems: "center"
   },
-  protractorSection: {
+  button: {
     marginTop: wonderBlocksTokens.spacing.xSmall_8,
-    borderTop: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
-    paddingTop: wonderBlocksTokens.spacing.xSmall_8,
-    paddingBottom: wonderBlocksTokens.spacing.xSmall_8,
-    borderBottom: `1px solid ${wonderBlocksTokens.color.offBlack16}`
+    flexGrow: 1
   }
 });
 
-const SegmentCountSelector = _ref => {
-  let {
-    numSegments = 1,
-    onChange
-  } = _ref;
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
-    key: "segment-select",
-    selectedValue: `${numSegments}`
-    // Never uses placeholder, always has value
-    ,
-    placeholder: "",
-    onChange: newValue => {
-      const num = +newValue;
-      onChange(num);
-    },
-    style: styles$i.singleSelectShort
-  }, ___default["default"].range(1, 7).map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    key: n,
-    value: `${n}`,
-    label: `${n} segment${n > 1 ? "s" : ""}`
-  })));
+function getStartCoords(graph) {
+  if ("startCoords" in graph) {
+    return graph.startCoords;
+  }
+  return undefined;
+}
+function getDefaultGraphStartCoords(graph, range, step) {
+  switch (graph.type) {
+    case "linear":
+    case "ray":
+      return perseus.getLineCoords({
+        ...graph,
+        startCoords: undefined
+      }, range, step);
+    case "segment":
+      return perseus.getSegmentCoords({
+        ...graph,
+        startCoords: undefined
+      }, range, step);
+    case "linear-system":
+      return perseus.getLinearSystemCoords({
+        ...graph,
+        startCoords: undefined
+      }, range, step);
+    case "circle":
+      const startCoords = perseus.getCircleCoords({
+        ...graph,
+        startCoords: undefined
+      });
+      const radius = kmath.vector.length(kmath.vector.subtract(startCoords.radiusPoint, startCoords.center));
+      return {
+        center: startCoords.center,
+        radius
+      };
+    case "sinusoid":
+      return perseus.getSinusoidCoords({
+        ...graph,
+        startCoords: undefined
+      }, range, step);
+    case "quadratic":
+      return perseus.getQuadraticCoords({
+        ...graph,
+        startCoords: undefined
+      }, range, step);
+    case "point":
+      return perseus.getPointCoords({
+        ...graph,
+        startCoords: undefined
+      }, range, step);
+    case "polygon":
+      return perseus.getPolygonCoords({
+        ...graph,
+        startCoords: undefined
+      }, range, step);
+    case "angle":
+      return perseus.getAngleCoords({
+        graph: {
+          ...graph,
+          startCoords: undefined
+        },
+        range,
+        step
+      });
+    default:
+      return undefined;
+  }
+}
+const getSinusoidEquation = startCoords => {
+  // Get coefficients
+  // It's assumed that p1 is the root and p2 is the first peak
+  const p1 = startCoords[0];
+  const p2 = startCoords[1];
+
+  // Resulting coefficients are canonical for this sine curve
+  const amplitude = p2[1] - p1[1];
+  const angularFrequency = Math.PI / (2 * (p2[0] - p1[0]));
+  const phase = p1[0] * angularFrequency;
+  const verticalOffset = p1[1];
+  return "y = " + amplitude.toFixed(3) + "sin(" + angularFrequency.toFixed(3) + "x - " + phase.toFixed(3) + ") + " + verticalOffset.toFixed(3);
 };
-const styles$i = aphrodite.StyleSheet.create({
-  singleSelectShort: {
-    // Non-standard spacing, but it's the smallest we can go
-    // without running into styling issues with the dropdown.
-    height: 26
+const getQuadraticEquation = startCoords => {
+  const p1 = startCoords[0];
+  const p2 = startCoords[1];
+  const p3 = startCoords[2];
+  const denom = (p1[0] - p2[0]) * (p1[0] - p3[0]) * (p2[0] - p3[0]);
+  if (denom === 0) {
+    // Many of the callers assume that the return value is always defined.
+    return "Division by zero error";
   }
-});
+  const a = (p3[0] * (p2[1] - p1[1]) + p2[0] * (p1[1] - p3[1]) + p1[0] * (p3[1] - p2[1])) / denom;
+  const b = (p3[0] * p3[0] * (p1[1] - p2[1]) + p2[0] * p2[0] * (p3[1] - p1[1]) + p1[0] * p1[0] * (p2[1] - p3[1])) / denom;
+  const c = (p2[0] * p3[0] * (p2[0] - p3[0]) * p1[1] + p3[0] * p1[0] * (p3[0] - p1[0]) * p2[1] + p1[0] * p2[0] * (p1[0] - p2[0]) * p3[1]) / denom;
+  return "y = " + a.toFixed(3) + "x^2 + " + b.toFixed(3) + "x + " + c.toFixed(3);
+};
+const findAngle = (point1, point2) => {
+  const x = point1[0] - point2[0];
+  const y = point1[1] - point2[1];
+  return (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
+};
+const getAngleEquation = startCoords => {
+  const [point1, vertex, point2] = startCoords;
+  const angle = findAngle(point2, vertex) - findAngle(point1, vertex);
+  const roundedAngle = angle.toFixed(0);
+  return `${roundedAngle}\u00B0 angle at (${vertex[0]}, ${vertex[1]})`;
+};
+const shouldShowStartCoordsUI = (graph, isStatic) => {
+  // We don't show the start coords UI for static graphs, since
+  // the coords shown for this are determined by the coords on the
+  // "correct" graph. The start coords would not be used here.
+  if (isStatic) {
+    return false;
+  }
+  switch (graph.type) {
+    case "point":
+      return graph.numPoints !== "unlimited";
+    case "polygon":
+      return graph.numSides !== "unlimited" && graph.snapTo !== "angles" && graph.snapTo !== "sides";
+    case "none":
+      return false;
+    case "angle":
+    case "circle":
+    case "linear":
+    case "linear-system":
+    case "quadratic":
+    case "ray":
+    case "segment":
+    case "sinusoid":
+      return true;
+    default:
+      throw new wonderStuffCore.UnreachableCaseError(graph);
+  }
+};
 
 const StartCoordsAngle = props => {
   const {
@@ -32922,7 +32945,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
       ___default["default"].extend(json, {
         graph: {
           type: correct.type,
-          startCoords: this.props.graph?.startCoords
+          startCoords: this.props.graph && getStartCoords(this.props.graph)
         },
         correct: correct
       });
@@ -33017,7 +33040,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
       }, this.props.valid);
     }
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
-      label: "Type of Graph:"
+      label: "Answer type:"
     }, /*#__PURE__*/React__namespace.createElement(GraphTypeSelector, {
       graphType: this.props.graph?.type ?? InteractiveGraph.defaultProps.graph.type,
       onChange: type => {
@@ -33029,7 +33052,8 @@ class InteractiveGraphEditor extends React__namespace.Component {
             type
           }
         });
-      }
+      },
+      showNoneOption: this.props.apiOptions?.flags?.mafs?.["none"]
     })), this.props.graph && this.props.apiOptions?.flags?.mafs?.[this.props.graph.type] && /*#__PURE__*/React__namespace.createElement(InteractiveGraphDescription, {
       ariaLabelValue: this.props.fullGraphAriaLabel ?? "",
       ariaDescriptionValue: this.props.fullGraphAriaDescription ?? "",
@@ -33305,6 +33329,12 @@ function mergeGraphs(a, b) {
         ...a,
         ...b
       };
+    case "none":
+      invariant(b.type === "none");
+      return {
+        ...a,
+        ...b
+      };
     case "point":
       invariant(b.type === "point");
       return {