@khanacademy/perseus-editor 14.1.3 → 14.2.0

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import { addLibraryVersionToPerseusDebug, PerseusError, Errors } from '@khanacademy/perseus-core';
-import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, PerseusI18nContext, KhanColors, getAngleCoords, getPolygonCoords, getPointCoords, getQuadraticCoords, getSinusoidCoords, getCircleCoords, getLinearSystemCoords, getSegmentCoords, getLineCoords, lockedFigureColors, lockedFigureFillStyles, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, makeSafeUrl, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, widgets } from '@khanacademy/perseus';
+import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, PerseusI18nContext, KhanColors, lockedFigureColors, lockedFigureFillStyles, getAngleCoords, getPolygonCoords, getPointCoords, getQuadraticCoords, getSinusoidCoords, getCircleCoords, getLinearSystemCoords, getSegmentCoords, getLineCoords, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, makeSafeUrl, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, widgets } from '@khanacademy/perseus';
 export { widgets } from '@khanacademy/perseus';
 import * as React from 'react';
 import { useRef, useEffect, useState, useId } from 'react';
@@ -19,11 +19,12 @@ import { Checkbox as Checkbox$1, LabeledTextField, TextField, TextArea } from '@
 import ReactDOM from 'react-dom';
 import * as KAS from '@khanacademy/kas';
 import Button from '@khanacademy/wonder-blocks-button';
-import { HeadingSmall, HeadingXSmall, LabelSmall, LabelLarge, LabelMedium, LabelXSmall, BodyMonospace } from '@khanacademy/wonder-blocks-typography';
+import { HeadingSmall, HeadingXSmall, LabelLarge, LabelXSmall, BodyMonospace, LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import { isTruthy, UnreachableCaseError } from '@khanacademy/wonder-stuff-core';
 import { useMathInputI18n, createMathField } from '@khanacademy/math-input';
 import { vector, number } from '@khanacademy/kmath';
-import { ActionMenu, ActionItem, SingleSelect, OptionItem } from '@khanacademy/wonder-blocks-dropdown';
+import { SingleSelect, OptionItem, ActionMenu, ActionItem } from '@khanacademy/wonder-blocks-dropdown';
+import Banner from '@khanacademy/wonder-blocks-banner';
 import { AccordionSection } from '@khanacademy/wonder-blocks-accordion';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 import caretDoubleDownIcon from '@phosphor-icons/core/bold/caret-double-down-bold.svg';
@@ -39,12 +40,11 @@ import arrowFatRight from '@phosphor-icons/core/regular/arrow-fat-right.svg';
 import arrowFatUp from '@phosphor-icons/core/regular/arrow-fat-up.svg';
 import minusCircle from '@phosphor-icons/core/regular/minus-circle.svg';
 import plusCircle from '@phosphor-icons/core/regular/plus-circle.svg';
-import Banner from '@khanacademy/wonder-blocks-banner';
 import arrowCounterClockwise from '@phosphor-icons/core/bold/arrow-counter-clockwise-bold.svg';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "14.1.3";
+const libVersion = "14.2.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -29496,39 +29496,95 @@ 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.createElement("label", {
-    className: css(styles$J.label)
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$J.row, style]
-  }, labelSide === "start" || /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$J.spaceEnd
-  }, label), children, labelSide === "end" && /*#__PURE__*/React.createElement(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 = ({
+  numPoints: _numPoints = 1,
+  onChange
+}) => {
+  return /*#__PURE__*/React.createElement(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.createElement(OptionItem, {
+    key: n,
+    value: `${n}`,
+    label: `${n} point${n > 1 ? "s" : ""}`
+  })), /*#__PURE__*/React.createElement(OptionItem, {
+    key: "unlimited",
+    value: UNLIMITED,
+    label: "unlimited"
+  })]);
 };
 const styles$J = StyleSheet.create({
-  label: {
-    width: "fit-content"
-  },
-  row: {
-    flexDirection: "row",
-    marginTop: spacing.xSmall_8,
-    alignItems: "center",
-    width: "fit-content"
-  },
-  spaceStart: {
-    marginInlineStart: spacing.xSmall_8
-  },
-  spaceEnd: {
-    marginInlineEnd: 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.createElement(SingleSelect, {
+    selectedValue: props.graphType,
+    onChange: props.onChange,
+    placeholder: "Select an answer type",
+    style: styles$I.singleSelectShort
+  }, props.showNoneOption && /*#__PURE__*/React.createElement(OptionItem, {
+    value: "none",
+    label: "None"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "linear",
+    label: "Linear function"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "quadratic",
+    label: "Quadratic function"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "sinusoid",
+    label: "Sinusoid function"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "circle",
+    label: "Circle"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "point",
+    label: "Point(s)"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "linear-system",
+    label: "Linear System"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "polygon",
+    label: "Polygon"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "segment",
+    label: "Line Segment(s)"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "ray",
+    label: "Ray"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "angle",
+    label: "Angle"
+  }));
+};
+const styles$I = StyleSheet.create({
+  singleSelectShort: {
+    // Non-standard spacing, but it's the smallest we can go
+    // without running into styling issues with the dropdown.
+    height: 26
   }
 });
 
@@ -29539,11 +29595,11 @@ function Heading({
   onToggle
 }) {
   return /*#__PURE__*/React.createElement(Clickable, {
-    style: [styles$I.container, !isCollapsible && styles$I.notClickable],
+    style: [styles$H.container, !isCollapsible && styles$H.notClickable],
     disabled: !isCollapsible,
     onClick: () => isCollapsible && (onToggle == null ? void 0 : onToggle(!isOpen))
   }, () => /*#__PURE__*/React.createElement(View, {
-    style: styles$I.heading
+    style: styles$H.heading
   }, /*#__PURE__*/React.createElement(LabelLarge, {
     style: {
       fontSize: 14,
@@ -29553,7 +29609,7 @@ function Heading({
     isExpanded: isOpen
   })));
 }
-const styles$I = StyleSheet.create({
+const styles$H = StyleSheet.create({
   container: {
     marginTop: spacing.small_12,
     // NOTE(jeremy): This is the inverse of the @editorPadding CSS
@@ -29577,350 +29633,760 @@ const styles$I = 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"), _extends({}, 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 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 getLineCoords(_extends({}, graph, {
-        startCoords: undefined
-      }), range, step);
-    case "segment":
-      return getSegmentCoords(_extends({}, graph, {
-        startCoords: undefined
-      }), range, step);
-    case "linear-system":
-      return getLinearSystemCoords(_extends({}, graph, {
-        startCoords: undefined
-      }), range, step);
-    case "circle":
-      const startCoords = getCircleCoords(_extends({}, graph, {
-        startCoords: undefined
-      }));
-      const radius = vector.length(vector.subtract(startCoords.radiusPoint, startCoords.center));
-      return {
-        center: startCoords.center,
-        radius
-      };
-    case "sinusoid":
-      return getSinusoidCoords(_extends({}, graph, {
-        startCoords: undefined
-      }), range, step);
-    case "quadratic":
-      return getQuadraticCoords(_extends({}, graph, {
-        startCoords: undefined
-      }), range, step);
-    case "point":
-      return getPointCoords(_extends({}, graph, {
-        startCoords: undefined
-      }), range, step);
-    case "polygon":
-      return getPolygonCoords(_extends({}, graph, {
-        startCoords: undefined
-      }), range, step);
-    case "angle":
-      return getAngleCoords({
-        graph: _extends({}, graph, {
-          startCoords: undefined
-        }),
-        range,
-        step
-      });
-    default:
-      return undefined;
-  }
+function InteractiveGraphCorrectAnswer(props) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
+    title: "Correct Answer",
+    isOpen: true,
+    isCollapsible: false
+  }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(LabelXSmall, {
+    style: {
+      paddingTop: spacing.xxSmall_6,
+      paddingBottom: spacing.xxSmall_6,
+      color: color.offBlack64
+    }
+  }, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."), /*#__PURE__*/React.createElement(BodyMonospace, {
+    style: {
+      fontSize: 12,
+      backgroundColor: "#eee",
+      paddingInline: 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.createElement(View, {
-    style: styles$H.container
-  }, /*#__PURE__*/React.createElement(ActionMenu, {
-    menuText: "Add locked figure",
-    style: styles$H.addElementSelect
-  }, figureTypes.map(figureType => /*#__PURE__*/React.createElement(ActionItem, {
-    key: `${id}-${figureType}`,
-    label: figureType,
-    onClick: () => onChange(figureType)
+  const [isOpen, setIsOpen] = React.useState(true);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
+    title: "Description",
+    isCollapsible: true,
+    isOpen: isOpen,
+    onToggle: setIsOpen
+  }), isOpen && /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(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.createElement(LabelLarge, {
+    tag: "label"
+  }, "Title", /*#__PURE__*/React.createElement(TextField, {
+    value: ariaLabelValue,
+    onChange: newValue => onChange({
+      fullGraphAriaLabel: newValue
+    }),
+    style: styles$G.spaceAbove
+  })), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), /*#__PURE__*/React.createElement(LabelLarge, {
+    tag: "label"
+  }, "Description", /*#__PURE__*/React.createElement(TextArea, {
+    rows: 8,
+    resizeType: "vertical",
+    value: ariaDescriptionValue,
+    onChange: newValue => onChange({
+      fullGraphAriaDescription: newValue
+    }),
+    style: styles$G.spaceAbove
   }))));
-};
-const styles$H = StyleSheet.create({
-  container: {
-    marginTop: spacing.xSmall_8
+}
+const styles$G = StyleSheet.create({
+  caption: {
+    color: color.offBlack64,
+    paddingTop: spacing.xxSmall_6,
+    paddingBottom: spacing.xxSmall_6
   },
-  addElementSelect: {
-    backgroundColor: color.fadedBlue8,
-    borderRadius: spacing.xxxSmall_4
+  spaceAbove: {
+    marginTop: 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.useRef(null);
-  React.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 == null || ref.addEventListener("wheel", ignoreScroll);
-    return () => {
-      ref == null || ref.removeEventListener("wheel", ignoreScroll);
-    };
-  }, [inputRef]);
-  return /*#__PURE__*/React.createElement(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.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.createElement(LabelMedium, {
-    tag: "label",
-    style: styles$G.row
-  }, "angle (degrees)", /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xxSmall_6
-  }), /*#__PURE__*/React.createElement(ScrolllessNumberTextField, {
-    value: angleInput,
-    onChange: handleAngleChange,
-    style: styles$G.textField
-  }), /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xxSmall_6
-  }));
+  return /*#__PURE__*/React.createElement("label", {
+    className: css(styles$F.label)
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles$F.row, style]
+  }, labelSide === "start" || /*#__PURE__*/React.createElement(LabelSmall, {
+    style: styles$F.spaceEnd
+  }, label), children, labelSide === "end" && /*#__PURE__*/React.createElement(LabelSmall, {
+    style: styles$F.spaceStart
+  }, label)));
 };
-const styles$G = StyleSheet.create({
+const styles$F = StyleSheet.create({
+  label: {
+    width: "fit-content"
+  },
   row: {
-    display: "flex",
     flexDirection: "row",
-    alignItems: "center"
+    marginTop: spacing.xSmall_8,
+    alignItems: "center",
+    width: "fit-content"
   },
-  textField: {
-    width: spacing.xxxLarge_64
+  spaceStart: {
+    marginInlineStart: spacing.xSmall_8
+  },
+  spaceEnd: {
+    marginInlineEnd: spacing.xSmall_8
   }
 });
 
-const CoordinatePairInput = props => {
-  const {
-    coord,
-    labels,
-    error,
-    style,
+const {
+  ButtonGroup: ButtonGroup$2,
+  InfoTip: InfoTip$d,
+  RangeInput: RangeInput$4
+} = 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.Component {
+  static stateFromProps(props) {
+    return {
+      labelsTextbox: props.labels,
+      gridStepTextbox: props.gridStep,
+      snapStepTextbox: props.snapStep,
+      stepTextbox: props.step,
+      rangeTextbox: props.range,
+      // Shallow-copied clone
+      backgroundImage: _extends({}, props.backgroundImage)
+    };
+  }
+  constructor(props) {
+    super(props);
+    this._isMounted = false;
+    this.bgUrlRef = /*#__PURE__*/React.createRef();
+    this.labelXRef = /*#__PURE__*/React.createRef();
+    this.labelYRef = /*#__PURE__*/React.createRef();
+    this.change = (...args) => {
+      return Changeable.change.apply(this, args);
+    };
+    this.changeBackgroundUrl = e => {
+      var _this$bgUrlRef$curren;
+      // Only continue on blur or "enter"
+      if (e.type === "keypress" && e.key !== "Enter") {
+        return;
+      }
+      const setUrl = (url, width, height) => {
+        // Shallow-copied clone
+        const image = _extends({}, this.props.backgroundImage);
+        image.url = url;
+        image.width = width;
+        image.height = height;
+        this.setState({
+          backgroundImage: image
+        }, this.changeGraph);
+      };
+      const url = (_this$bgUrlRef$curren = this.bgUrlRef.current) == null ? void 0 : _this$bgUrlRef$curren.value;
+      if (url) {
+        Util.getImageSize(url, (width, height) => {
+          if (this._isMounted) {
+            setUrl(url, width, height);
+          }
+        });
+      } else {
+        setUrl(null, 0, 0);
+      }
+    };
+    this.renderLabelChoices = choices => {
+      return choices.map(nameAndValue => /*#__PURE__*/React.createElement("option", {
+        key: nameAndValue[1],
+        value: nameAndValue[1]
+      }, nameAndValue[0]));
+    };
+    this.validRange = range => {
+      const numbers = _.every(range, function (num) {
+        return _.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;
+    };
+    this.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;
+    };
+    this.validSnapStep = (step, range) => {
+      return this.validateStepValue({
+        step: step,
+        range: range,
+        name: "Snap step",
+        minTicks: 5,
+        maxTicks: 60
+      });
+    };
+    this.validGridStep = (step, range) => {
+      return this.validateStepValue({
+        step: step,
+        range: range,
+        name: "Grid step",
+        minTicks: 3,
+        maxTicks: 60
+      });
+    };
+    this.validStep = (step, range) => {
+      return this.validateStepValue({
+        step: step,
+        range: range,
+        name: "Step",
+        minTicks: 3,
+        maxTicks: 20
+      });
+    };
+    this.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;
+    };
+    this.validateGraphSettings = (range, step, gridStep, snapStep, image) => {
+      const self = this;
+      let msg;
+      const goodRange = _.every(range, function (range) {
+        msg = self.validRange(range);
+        return msg === true;
+      });
+      if (!goodRange) {
+        return msg;
+      }
+      const goodStep = _.every(step, function (step, i) {
+        msg = self.validStep(step, range[i]);
+        return msg === true;
+      });
+      if (!goodStep) {
+        return msg;
+      }
+      const goodGridStep = _.every(gridStep, function (gridStep, i) {
+        msg = self.validGridStep(gridStep, range[i]);
+        return msg === true;
+      });
+      if (!goodGridStep) {
+        return msg;
+      }
+      const goodSnapStep = _.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;
+    };
+    this.changeLabel = (i, e) => {
+      const val = e.target.value;
+      const labels = this.state.labelsTextbox.slice();
+      labels[i] = val;
+      this.setState({
+        labelsTextbox: labels
+      }, this.changeGraph);
+    };
+    this.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 = Util.scaleFromExtent(ranges[i], this.props.box[i]);
+      if (this.validRange(ranges[i]) === true) {
+        step[i] = Util.tickStepFromExtent(ranges[i], this.props.box[i]);
+        const gridStepValue = 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);
+    };
+    this.changeStep = step => {
+      this.setState({
+        stepTextbox: step
+      }, this.changeGraph);
+    };
+    this.changeSnapStep = snapStep => {
+      this.setState({
+        snapStepTextbox: snapStep
+      }, this.changeGraph);
+    };
+    this.changeGridStep = gridStep => {
+      this.setState({
+        gridStepTextbox: gridStep,
+        snapStepTextbox: _.map(gridStep, function (step) {
+          return step / 2;
+        })
+      }, this.changeGraph);
+    };
+    this.changeGraph = () => {
+      const labels = this.state.labelsTextbox;
+      const range = _.map(this.state.rangeTextbox, function (range) {
+        return _.map(range, Number);
+      });
+      const step = _.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
+        });
+      }
+    };
+    this.state = _extends({
+      isExpanded: true
+    }, InteractiveGraphSettings.stateFromProps(props));
+  }
+  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 = _.debounce(this.changeGraph, 300);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    // Make sure that state updates when switching
+    // between different items in a multi-item editor.
+    if (!_.isEqual(this.props.labels, nextProps.labels) || !_.isEqual(this.props.gridStep, nextProps.gridStep) || !_.isEqual(this.props.snapStep, nextProps.snapStep) || !_.isEqual(this.props.step, nextProps.step) || !_.isEqual(this.props.range, nextProps.range) || !_.isEqual(this.props.backgroundImage, nextProps.backgroundImage)) {
+      this.setState(InteractiveGraphSettings.stateFromProps(nextProps));
+    }
+  }
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
+      title: "Common Graph Settings",
+      isOpen: this.state.isExpanded,
+      isCollapsible: true,
+      onToggle: () => this.setState({
+        isExpanded: !this.state.isExpanded
+      })
+    }), this.state.isExpanded && /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement("div", {
+      className: "graph-settings"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "x Label"
+    }, /*#__PURE__*/React.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.createElement("div", {
+      className: "perseus-widget-right-col"
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "y Label"
+    }, /*#__PURE__*/React.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.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "x Range"
+    }, /*#__PURE__*/React.createElement(RangeInput$4, {
+      value: this.state.rangeTextbox[0],
+      onChange: vals => this.changeRange(0, vals)
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-right-col"
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "y Range"
+    }, /*#__PURE__*/React.createElement(RangeInput$4, {
+      value: this.state.rangeTextbox[1],
+      onChange: vals => this.changeRange(1, vals)
+    })))), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Tick Step"
+    }, /*#__PURE__*/React.createElement(RangeInput$4, {
+      value: this.state.stepTextbox,
+      onChange: this.changeStep
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-right-col"
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Grid Step"
+    }, /*#__PURE__*/React.createElement(RangeInput$4, {
+      value: this.state.gridStepTextbox,
+      onChange: this.changeGridStep
+    })))), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Snap Step"
+    }, /*#__PURE__*/React.createElement(RangeInput$4, {
+      value: this.state.snapStepTextbox,
+      onChange: this.changeSnapStep
+    })))), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Markings:"
+    }, /*#__PURE__*/React.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.createElement("div", {
+      className: "perseus-widget-left-col"
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
+      label: "Show tooltips",
+      checked: this.props.showTooltips,
+      onChange: value => {
+        this.change({
+          showTooltips: value
+        });
+      }
+    }))), /*#__PURE__*/React.createElement(LabeledRow, {
+      label: "Background image URL:",
+      style: styles$E.resetSpaceTop
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "text",
+      className: css(styles$E.backgroundUrlInput),
+      ref: this.bgUrlRef,
+      value: this.state.backgroundImage.url || "",
+      onChange: e => {
+        // Shallow-copied clone
+        const image = _extends({}, this.props.backgroundImage);
+        image.url = e.target.value;
+        this.setState({
+          backgroundImage: image
+        });
+      },
+      onKeyPress: this.changeBackgroundUrl,
+      onBlur: this.changeBackgroundUrl
+    }), /*#__PURE__*/React.createElement(InfoTip$d, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React.createElement(View, {
+      style: styles$E.protractorSection
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles$E.checkboxRow
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
+      label: "Show protractor",
+      checked: this.props.showProtractor,
+      onChange: value => {
+        this.change({
+          showProtractor: value
+        });
+      },
+      style: styles$E.resetSpaceTop
+    })), this.props.showProtractor && /*#__PURE__*/React.createElement(Banner, {
+      layout: "floating",
+      text: "The protractor is not accessible. Please consider an alternate approach.",
+      kind: "warning"
+    }))));
+  }
+}
+InteractiveGraphSettings.defaultProps = {
+  box: [interactiveSizes.defaultBoxSizeSmall, 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
+};
+const styles$E = StyleSheet.create({
+  resetSpaceTop: {
+    marginTop: 0
+  },
+  backgroundUrlInput: {
+    border: `1px solid ${color.offBlack32}`,
+    borderRadius: spacing.xxxSmall_4,
+    padding: spacing.xxxSmall_4
+  },
+  checkboxRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: spacing.xSmall_8
+  },
+  protractorSection: {
+    marginTop: spacing.xSmall_8,
+    borderTop: `1px solid ${color.offBlack16}`,
+    paddingTop: spacing.xSmall_8,
+    paddingBottom: spacing.xSmall_8,
+    borderBottom: `1px solid ${color.offBlack16}`
+  }
+});
+
+const SegmentCountSelector = ({
+  numSegments: _numSegments = 1,
+  onChange
+}) => /*#__PURE__*/React.createElement(SingleSelect, {
+  key: "segment-select",
+  selectedValue: `${_numSegments}`
+  // Never uses placeholder, always has value
+  ,
+  placeholder: "",
+  onChange: newValue => {
+    const num = +newValue;
+    onChange(num);
+  },
+  style: styles$D.singleSelectShort
+}, _.range(1, 7).map(n => /*#__PURE__*/React.createElement(OptionItem, {
+  key: n,
+  value: `${n}`,
+  label: `${n} segment${n > 1 ? "s" : ""}`
+})));
+const styles$D = 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.createElement(View, {
+    style: styles$C.container
+  }, /*#__PURE__*/React.createElement(ActionMenu, {
+    menuText: "Add locked figure",
+    style: styles$C.addElementSelect
+  }, figureTypes.map(figureType => /*#__PURE__*/React.createElement(ActionItem, {
+    key: `${id}-${figureType}`,
+    label: figureType,
+    onClick: () => onChange(figureType)
+  }))));
+};
+const styles$C = StyleSheet.create({
+  container: {
+    marginTop: spacing.xSmall_8
+  },
+  addElementSelect: {
+    backgroundColor: color.fadedBlue8,
+    borderRadius: 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.useRef(null);
+  React.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 == null || ref.addEventListener("wheel", ignoreScroll);
+    return () => {
+      ref == null || ref.removeEventListener("wheel", ignoreScroll);
+    };
+  }, [inputRef]);
+  return /*#__PURE__*/React.createElement(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.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.createElement(LabelMedium, {
+    tag: "label",
+    style: styles$B.row
+  }, "angle (degrees)", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(ScrolllessNumberTextField, {
+    value: angleInput,
+    onChange: handleAngleChange,
+    style: styles$B.textField
+  }), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }));
+};
+const styles$B = StyleSheet.create({
+  row: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  textField: {
+    width: spacing.xxxLarge_64
+  }
+});
+
+const CoordinatePairInput = props => {
+  const {
+    coord,
+    labels,
+    error,
+    style,
     onChange
   } = props;
 
@@ -29953,30 +30419,30 @@ const CoordinatePairInput = props => {
     onChange(newCoords);
   }
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$F.row, style]
+    style: [styles$A.row, style]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$F.row
+    style: styles$A.row
   }, labels ? labels[0] : "x coord", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.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.createElement(Strut, {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$F.row
+    style: styles$A.row
   }, labels ? labels[1] : "y coord", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.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 = StyleSheet.create({
+const styles$A = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30009,14 +30475,14 @@ const PerseusEditorAccordion = props => {
   }, /*#__PURE__*/React.createElement(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.createElement(View, {
-    style: [styles$E.accordionPanel, panelStyle]
+    style: [styles$z.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$E = StyleSheet.create({
+const styles$z = StyleSheet.create({
   container: {
     backgroundColor: color.fadedBlue8,
     marginTop: spacing.xSmall_8
@@ -30047,13 +30513,13 @@ const ColorSwatch = props => {
     "aria-label":
     // Don't include an aria label for decorative circles.
     !decorative ? `${color$1}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$D.colorSwatch, {
+    style: [styles$y.colorSwatch, {
       border: `4px solid ${lockedFigureColors[color$1]}`,
       backgroundColor: filled ? lockedFigureColors[color$1] : color.white
     }]
   });
 };
-const styles$D = StyleSheet.create({
+const styles$y = StyleSheet.create({
   colorSwatch: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30072,10 +30538,10 @@ const ColorSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$C.row, style]
+    style: [styles$x.row, style]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$C.row
+    style: styles$x.row
   }, "color", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30094,7 +30560,7 @@ const ColorSelect = props => {
     })
   })))));
 };
-const styles$C = StyleSheet.create({
+const styles$x = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30113,17 +30579,17 @@ const EllipseSwatch = props => {
   } = props;
   return /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$B.container, {
+    style: [styles$w.container, {
       border: `4px ${strokeStyle} ${lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$B.innerCircle, {
+    style: [styles$w.innerCircle, {
       backgroundColor: lockedFigureColors[color],
       opacity: fillStyle === "white" ? 0 : lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$B = StyleSheet.create({
+const styles$w = StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30149,7 +30615,7 @@ const LineStrokeSelect = props => {
   } = props;
   return /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$A.lineStrokeSelect
+    style: styles$v.lineStrokeSelect
   }, "stroke", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxxSmall_4
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30166,7 +30632,7 @@ const LineStrokeSelect = props => {
     label: "dashed"
   })));
 };
-const styles$A = StyleSheet.create({
+const styles$v = StyleSheet.create({
   lineStrokeSelect: {
     display: "flex",
     flexDirection: "row",
@@ -30188,40 +30654,40 @@ const LockedFigureSettingsActions = props => {
     onRemove
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$z.container
+    style: styles$u.container
   }, /*#__PURE__*/React.createElement(Button, {
     startIcon: trashIcon,
     "aria-label": `Delete locked ${figureType}`,
     onClick: onRemove,
     kind: "tertiary",
-    style: styles$z.deleteButton
+    style: styles$u.deleteButton
   }, "Delete"), /*#__PURE__*/React.createElement(Spring, null), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDoubleUpIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} to the back`,
     onClick: () => onMove("back"),
-    style: styles$z.iconButton
+    style: styles$u.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretUpIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} backward`,
     onClick: () => onMove("backward"),
-    style: styles$z.iconButton
+    style: styles$u.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDownIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} forward`,
     onClick: () => onMove("forward"),
-    style: styles$z.iconButton
+    style: styles$u.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDoubleDownIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} to the front`,
     onClick: () => onMove("front"),
-    style: styles$z.iconButton
+    style: styles$u.iconButton
   }));
 };
-const styles$z = StyleSheet.create({
+const styles$u = StyleSheet.create({
   container: {
     width: "100%",
     flexDirection: "row",
@@ -30240,7 +30706,7 @@ const styles$z = StyleSheet.create({
 });
 
 const {
-  InfoTip: InfoTip$d
+  InfoTip: InfoTip$c
 } = components;
 const LockedEllipseSettings = props => {
   const {
@@ -30268,7 +30734,7 @@ const LockedEllipseSettings = props => {
     /*#__PURE__*/
     // Summary: Ellipse, center, radius, color (opacity, dashed)
     React.createElement(View, {
-      style: styles$y.row
+      style: styles$t.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Ellipse (${center[0]}, ${center[1]}), radius ${radius[0]}, ${radius[1]}`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(EllipseSwatch, {
@@ -30277,19 +30743,19 @@ const LockedEllipseSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: styles$y.row
+    style: styles$t.row
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: center,
-    style: styles$y.spaceUnder,
+    style: styles$t.spaceUnder,
     onChange: newCoords => onChangeProps({
       center: newCoords
     })
   }), /*#__PURE__*/React.createElement(View, {
-    style: styles$y.spaceUnder
-  }, /*#__PURE__*/React.createElement(InfoTip$d, null, "The coordinates for the center of the ellipse."))), /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    style: styles$t.spaceUnder
+  }, /*#__PURE__*/React.createElement(InfoTip$c, null, "The coordinates for the center of the ellipse."))), /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: radius,
     labels: ["x radius", "y radius"],
-    style: styles$y.spaceUnder,
+    style: styles$t.spaceUnder,
     onChange: newCoords => onChangeProps({
       radius: newCoords
     })
@@ -30301,7 +30767,7 @@ const LockedEllipseSettings = props => {
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xSmall_8
   }), /*#__PURE__*/React.createElement(View, {
-    style: [styles$y.row, styles$y.spaceUnder]
+    style: [styles$t.row, styles$t.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30309,7 +30775,7 @@ const LockedEllipseSettings = props => {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$y.row, styles$y.truncatedWidth]
+    style: [styles$t.row, styles$t.truncatedWidth]
   }, "fill", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30335,7 +30801,7 @@ const LockedEllipseSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$y = StyleSheet.create({
+const styles$t = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30356,15 +30822,15 @@ const LineSwatch = props => {
     lineStyle
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$x.container
+    style: styles$s.container
   }, /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, ${lineStyle}`,
-    style: [styles$x.lineSwatch, {
+    style: [styles$s.lineSwatch, {
       border: `5px ${lineStyle} ${lockedFigureColors[color]}`
     }]
   }));
 };
-const styles$x = StyleSheet.create({
+const styles$s = StyleSheet.create({
   container: {
     backgroundColor: color.white,
     justifyContent: "center",
@@ -30449,9 +30915,9 @@ const LockedFunctionSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$w.row
+      style: styles$r.row
     }, /*#__PURE__*/React.createElement(LabelLarge, {
-      style: styles$w.accordionHeader
+      style: styles$r.accordionHeader
     }, lineLabel), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(LineSwatch, {
@@ -30459,7 +30925,7 @@ const LockedFunctionSettings = props => {
       lineStyle: strokeStyle
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$w.row, styles$w.spaceUnder]
+    style: [styles$r.row, styles$r.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: newValue => {
@@ -30473,14 +30939,14 @@ const LockedFunctionSettings = props => {
       handlePropChange("strokeStyle", newValue);
     }
   })), /*#__PURE__*/React.createElement(View, {
-    style: [styles$w.row, styles$w.rowSpace]
+    style: [styles$r.row, styles$r.rowSpace]
   }, /*#__PURE__*/React.createElement(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: ""
@@ -30499,17 +30965,17 @@ const LockedFunctionSettings = props => {
     onChange: newValue => {
       handlePropChange("equation", newValue);
     },
-    style: [styles$w.textField]
+    style: [styles$r.textField]
   })), /*#__PURE__*/React.createElement(View, {
-    style: [styles$w.row, styles$w.rowSpace]
+    style: [styles$r.row, styles$r.rowSpace]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$w.dropdownLabel, styles$w.domainMin]
+    style: [styles$r.dropdownLabel, styles$r.domainMin]
   }, `${domainRangeText} min`, /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
-    style: styles$w.domainMinField,
+    style: styles$r.domainMinField,
     value: domainEntries[0],
     onChange: newValue => {
       handleDomainChange(0, newValue);
@@ -30519,12 +30985,12 @@ const LockedFunctionSettings = props => {
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
     "aria-label": `${domainRangeText} max`,
-    style: [styles$w.dropdownLabel, styles$w.domainMax]
+    style: [styles$r.dropdownLabel, styles$r.domainMax]
   }, "max", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
-    style: styles$w.domainMaxField,
+    style: styles$r.domainMaxField,
     value: domainEntries[1],
     onChange: newValue => {
       handleDomainChange(1, newValue);
@@ -30532,11 +30998,11 @@ const LockedFunctionSettings = props => {
   }))), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     header: /*#__PURE__*/React.createElement(LabelLarge, null, "Example Functions"),
     expanded: false,
-    containerStyle: styles$w.exampleWorkspace,
-    panelStyle: styles$w.exampleAccordionPanel
+    containerStyle: styles$r.exampleWorkspace,
+    panelStyle: styles$r.exampleAccordionPanel
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$w.dropdownLabel
+    style: styles$r.dropdownLabel
   }, "Choose a category", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30550,7 +31016,7 @@ const LockedFunctionSettings = props => {
       label: category
     });
   }))), exampleCategorySelected && /*#__PURE__*/React.createElement("ul", {
-    className: css(styles$w.exampleContainer)
+    className: css(styles$r.exampleContainer)
   }, exampleContent.map((example, index) => /*#__PURE__*/React.createElement(ExampleItem, {
     category: exampleCategory,
     example: example,
@@ -30572,29 +31038,29 @@ const ExampleItem = props => {
   const exampleId = useId();
   return /*#__PURE__*/React.createElement("li", {
     key: `${category}-${index}`,
-    className: css(styles$w.exampleRow)
+    className: css(styles$r.exampleRow)
   }, /*#__PURE__*/React.createElement(IconButton, {
     icon: autoPasteIcon,
     "aria-label": "paste example",
     "aria-describedby": exampleId,
     onClick: () => pasteEquationFn("equation", example),
     size: "medium",
-    style: styles$w.copyPasteButton
+    style: styles$r.copyPasteButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: copyIcon,
     "aria-label": "copy example",
     "aria-describedby": exampleId,
     onClick: () => navigator.clipboard.writeText(example),
     size: "medium",
-    style: styles$w.copyPasteButton
+    style: styles$r.copyPasteButton
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxxSmall_4
   }), /*#__PURE__*/React.createElement(View, {
-    style: styles$w.exampleContent,
+    style: styles$r.exampleContent,
     id: exampleId
   }, example));
 };
-const styles$w = StyleSheet.create({
+const styles$r = StyleSheet.create({
   accordionHeader: {
     textOverflow: "ellipsis",
     // A maximum width needs to be specified in order for the ellipsis to work.
@@ -30712,14 +31178,14 @@ function LockedLabelSettings(props) {
     expanded: expanded,
     onToggle: onToggle,
     header: /*#__PURE__*/React.createElement(View, {
-      style: [styles$v.row, styles$v.accordionHeaderContainer]
+      style: [styles$q.row, styles$q.accordionHeaderContainer]
     }, /*#__PURE__*/React.createElement(LabelLarge, null, "Label (", coord[0], ", ", coord[1], ")"), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), text !== "" && /*#__PURE__*/React.createElement(LabelLarge, {
       style: [{
         backgroundColor: color.white,
         color: lockedFigureColors[color$1]
-      }, styles$v.accordionHeader]
+      }, styles$q.accordionHeader]
     }, text))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: coord,
@@ -30728,10 +31194,10 @@ function LockedLabelSettings(props) {
         coord: newCoords
       });
     },
-    style: styles$v.spaceUnder
+    style: styles$q.spaceUnder
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$v.row, styles$v.spaceUnder]
+    style: [styles$q.row, styles$q.spaceUnder]
   }, "TeX", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xSmall_8
   }), /*#__PURE__*/React.createElement(TextField, {
@@ -30741,7 +31207,7 @@ function LockedLabelSettings(props) {
       text: newValue
     })
   })), /*#__PURE__*/React.createElement(View, {
-    style: styles$v.row
+    style: styles$q.row
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: color$1,
     onChange: newColor => {
@@ -30749,12 +31215,12 @@ function LockedLabelSettings(props) {
         color: newColor
       });
     },
-    style: styles$v.spaceUnder
+    style: styles$q.spaceUnder
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$v.row
+    style: styles$q.row
   }, "size", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xSmall_8
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30781,7 +31247,7 @@ function LockedLabelSettings(props) {
     onRemove: onRemove
   }));
 }
-const styles$v = StyleSheet.create({
+const styles$q = StyleSheet.create({
   accordionHeaderContainer: {
     // Stop the label summary from wrapping.
     whiteSpace: "nowrap"
@@ -30815,7 +31281,7 @@ const LabeledSwitch = props => {
   const ids = useUniqueIdWithMock();
   const switchId = ids.get("switch");
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$u.row, style]
+    style: [styles$p.row, style]
   }, /*#__PURE__*/React.createElement(Switch, {
     id: switchId,
     checked: checked,
@@ -30827,7 +31293,7 @@ const LabeledSwitch = props => {
     htmlFor: switchId
   }, label));
 };
-const styles$u = StyleSheet.create({
+const styles$p = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30861,13 +31327,13 @@ const DefiningPointSettings = props => {
   return /*#__PURE__*/React.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.createElement(View, {
-      style: styles$t.row
+      style: styles$o.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `${label || "Point"} (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), showPoint && /*#__PURE__*/React.createElement(ColorSwatch, {
@@ -30877,7 +31343,7 @@ const DefiningPointSettings = props => {
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: coord,
     error: !!error,
-    style: styles$t.spaceUnder,
+    style: styles$o.spaceUnder,
     onChange: newCoords => {
       onChangeProps({
         coord: newCoords
@@ -30886,12 +31352,12 @@ const DefiningPointSettings = props => {
   }), onTogglePoint && /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "show point on graph",
     checked: !!showPoint,
-    style: showPoint && styles$t.spaceUnder,
+    style: showPoint && styles$o.spaceUnder,
     onChange: onTogglePoint
   }), showPoint && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$t.spaceUnder
+    style: styles$o.spaceUnder
   }), /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30902,7 +31368,7 @@ const DefiningPointSettings = props => {
     }
   })));
 };
-const styles$t = StyleSheet.create({
+const styles$o = StyleSheet.create({
   container: {
     marginTop: spacing.xSmall_8,
     marginBottom: 0,
@@ -30965,7 +31431,7 @@ const LockedLineSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$s.row
+      style: styles$n.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, lineLabel), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(LineSwatch, {
@@ -30974,7 +31440,7 @@ const LockedLineSettings = props => {
     }))
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$s.row, styles$s.spaceUnder]
+    style: [styles$n.row, styles$n.spaceUnder]
   }, "kind", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxxSmall_4
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30995,7 +31461,7 @@ const LockedLineSettings = props => {
     value: "segment",
     label: "segment"
   }))), /*#__PURE__*/React.createElement(View, {
-    style: styles$s.row
+    style: styles$n.row
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
@@ -31007,7 +31473,7 @@ const LockedLineSettings = props => {
       lineStyle: value
     })
   })), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
-    style: styles$s.errorText
+    style: styles$n.errorText
   }, lengthZeroStr), /*#__PURE__*/React.createElement(DefiningPointSettings, _extends({
     label: "Point 1",
     showPoint: showPoint1,
@@ -31032,7 +31498,7 @@ const LockedLineSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$s = StyleSheet.create({
+const styles$n = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -31073,7 +31539,7 @@ const LockedPointSettings = props => {
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React.createElement(View, {
-      style: styles$r.row
+      style: styles$m.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Point (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(ColorSwatch, {
@@ -31082,7 +31548,7 @@ const LockedPointSettings = props => {
     }))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: coord,
-    style: styles$r.spaceUnder,
+    style: styles$m.spaceUnder,
     onChange: newCoord => {
       onChangeProps({
         coord: newCoord
@@ -31091,7 +31557,7 @@ const LockedPointSettings = props => {
   }), /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$r.spaceUnder
+    style: styles$m.spaceUnder
   }), /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -31106,7 +31572,7 @@ const LockedPointSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$r = StyleSheet.create({
+const styles$m = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -31124,17 +31590,17 @@ const PolygonSwatch = props => {
   } = props;
   return /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$q.container, {
+    style: [styles$l.container, {
       border: `4px ${strokeStyle} ${lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$q.innerSquare, {
+    style: [styles$l.innerSquare, {
       backgroundColor: lockedFigureColors[color],
       opacity: fillStyle === "white" ? 0 : lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$q = StyleSheet.create({
+const styles$l = StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -31200,7 +31666,7 @@ const LockedPolygonSettings = props => {
     /*#__PURE__*/
     // Summary: Polygon, number of sides, style swatch
     React.createElement(View, {
-      style: styles$p.row
+      style: styles$k.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Polygon, ${points.length} sides`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(PolygonSwatch, {
@@ -31209,7 +31675,7 @@ const LockedPolygonSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$p.row, styles$p.spaceUnder]
+    style: [styles$k.row, styles$k.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -31217,7 +31683,7 @@ const LockedPolygonSettings = props => {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$p.row, styles$p.truncatedWidth]
+    style: [styles$k.row, styles$k.truncatedWidth]
   }, "fill", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -31243,17 +31709,17 @@ const LockedPolygonSettings = props => {
     onChange: newValue => onChangeProps({
       showVertices: newValue
     }),
-    style: styles$p.spaceUnder
+    style: styles$k.spaceUnder
   }), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     header: /*#__PURE__*/React.createElement(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.createElement(View, {
       key: `locked-polygon-point-index-${index}`,
-      style: [styles$p.row, styles$p.spaceUnder]
+      style: [styles$k.row, styles$k.spaceUnder]
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `${pointLabel}:`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.medium_16
     }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
@@ -31281,10 +31747,10 @@ const LockedPolygonSettings = props => {
           points: newPoints
         });
       },
-      style: styles$p.icon
+      style: styles$k.icon
     }));
   }), /*#__PURE__*/React.createElement(View, {
-    style: [styles$p.row, styles$p.polygonActionsContainer]
+    style: [styles$k.row, styles$k.polygonActionsContainer]
   }, /*#__PURE__*/React.createElement(Button, {
     kind: "tertiary",
     startIcon: plusCircle,
@@ -31294,30 +31760,30 @@ const LockedPolygonSettings = props => {
       });
     }
   }, "Add point"), /*#__PURE__*/React.createElement(Spring, null), /*#__PURE__*/React.createElement(View, {
-    style: styles$p.movementButtonsContainer
+    style: styles$k.movementButtonsContainer
   }, /*#__PURE__*/React.createElement(IconButton, {
     "aria-label": "Move polygon up",
-    style: styles$p.iconButton,
+    style: styles$k.iconButton,
     size: "small",
     icon: arrowFatUp,
     onClick: () => handlePolygonMove("up")
   }), /*#__PURE__*/React.createElement(View, {
-    style: styles$p.row
+    style: styles$k.row
   }, /*#__PURE__*/React.createElement(IconButton, {
     "aria-label": "Move polygon left",
-    style: styles$p.iconButton,
+    style: styles$k.iconButton,
     size: "small",
     icon: arrowFatLeft,
     onClick: () => handlePolygonMove("left")
   }), /*#__PURE__*/React.createElement(IconButton, {
     "aria-label": "Move polygon down",
-    style: styles$p.iconButton,
+    style: styles$k.iconButton,
     size: "small",
     icon: arrowFatDown,
     onClick: () => handlePolygonMove("down")
   }), /*#__PURE__*/React.createElement(IconButton, {
     "aria-label": "Move polygon right",
-    style: styles$p.iconButton,
+    style: styles$k.iconButton,
     size: "small",
     icon: arrowFatRight,
     onClick: () => handlePolygonMove("right")
@@ -31327,7 +31793,7 @@ const LockedPolygonSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$p = StyleSheet.create({
+const styles$k = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -31357,923 +31823,480 @@ const styles$p = StyleSheet.create({
   spaceUnder: {
     marginBottom: 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 = 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.createElement(PerseusEditorAccordion, {
-    expanded: props.expanded,
-    onToggle: props.onToggle,
-    header: /*#__PURE__*/React.createElement(View, {
-      style: styles$o.row
-    }, /*#__PURE__*/React.createElement(LabelLarge, null, lineLabel), /*#__PURE__*/React.createElement(Strut, {
-      size: spacing.xSmall_8
-    }), /*#__PURE__*/React.createElement(LineSwatch, {
-      color: lineColor,
-      lineStyle: "solid"
-    }))
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$o.row, styles$o.spaceUnder]
-  }, /*#__PURE__*/React.createElement(ColorSelect, {
-    selectedValue: lineColor,
-    onChange: handleColorChange
-  })), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
-    style: styles$o.errorText
-  }, lengthErrorMessage), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
-    expanded: true // Initial state is expanded
-    ,
-    containerStyle: styles$o.container,
-    panelStyle: styles$o.accordionPanel,
-    header: /*#__PURE__*/React.createElement(View, {
-      style: styles$o.row
-    }, /*#__PURE__*/React.createElement(LabelLarge, null, `Tail (${tail[0]}, ${tail[1]})`))
-  }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
-    coord: tail,
-    error: isInvalid,
-    onChange: newProps => {
-      handleChangePoint(newProps, 0);
-    }
-  })), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
-    expanded: true // Initial state is expanded
-    ,
-    containerStyle: styles$o.container,
-    panelStyle: styles$o.accordionPanel,
-    header: /*#__PURE__*/React.createElement(View, {
-      style: styles$o.row
-    }, /*#__PURE__*/React.createElement(LabelLarge, null, `Tip (${tip[0]}, ${tip[1]})`))
-  }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
-    coord: tip,
-    error: isInvalid,
-    onChange: newProps => {
-      handleChangePoint(newProps, 1);
-    }
-  })), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
-    figureType: props.type,
-    onMove: onMove,
-    onRemove: onRemove
-  }));
-};
-const styles$o = StyleSheet.create({
-  accordionPanel: {
-    paddingBottom: spacing.medium_16
-  },
-  container: {
-    marginTop: spacing.xSmall_8,
-    marginBottom: 0,
-    marginLeft: -spacing.xxxSmall_4,
-    marginRight: -spacing.xxxSmall_4,
-    backgroundColor: color.white
-  },
-  errorText: {
-    color: color.red,
-    marginTop: 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.createElement(LockedPointSettings, props);
-    case "line":
-      return /*#__PURE__*/React.createElement(LockedLineSettings, props);
-    case "vector":
-      return /*#__PURE__*/React.createElement(LockedVectorSettings, props);
-    case "ellipse":
-      return /*#__PURE__*/React.createElement(LockedEllipseSettings, props);
-    case "polygon":
-      return /*#__PURE__*/React.createElement(LockedPolygonSettings, props);
-    case "function":
-      return /*#__PURE__*/React.createElement(LockedFunctionSettings, props);
-    case "label":
-      if (props.showLabelsFlag) {
-        return /*#__PURE__*/React.createElement(LockedLabelSettings, props);
-      }
-      break;
-  }
-  return null;
-};
-
-const LockedFiguresSection = props => {
-  var _props$figures;
-  // 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 = props.figures) != null ? _props$figures : []).length).fill(false);
-  const [expandedStates, setExpandedStates] = React.useState(collapsedStateArray);
-  const [isExpanded, setIsExpanded] = React.useState(true);
-  const uniqueId = 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), _extends({}, lockedFigures[index], figureProps), ...lockedFigures.slice(index + 1)]
-    };
-    onChange(newFigures);
-  }
-  function toggleExpanded(newValue) {
-    setExpandedStates(Array(figures == null ? void 0 : figures.length).fill(newValue));
-  }
-  const allCollapsed = expandedStates.every(value => !value);
-  const buttonLabel = allCollapsed ? "Expand all" : "Collapse all";
-  const showExpandButton = !!(figures != null && figures.length);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
-    title: "Locked Figures",
-    isOpen: isExpanded,
-    onToggle: () => setIsExpanded(!isExpanded),
-    isCollapsible: true
-  }), isExpanded && /*#__PURE__*/React.createElement(View, null, figures == null ? void 0 : figures.map((figure, index) => {
-    return /*#__PURE__*/React.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.createElement(View, {
-    style: styles$n.buttonContainer
-  }, /*#__PURE__*/React.createElement(LockedFigureSelect, {
-    showLabelsFlag: props.showLabelsFlag,
-    id: `${uniqueId}-select`,
-    onChange: addLockedFigure
-  }), /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.small_12
-  }), showExpandButton && /*#__PURE__*/React.createElement(Button, {
-    kind: "secondary",
-    onClick: () => toggleExpanded(allCollapsed),
-    style: styles$n.button
-  }, buttonLabel))));
-};
-const styles$n = StyleSheet.create({
-  buttonContainer: {
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  button: {
-    marginTop: spacing.xSmall_8,
-    flexGrow: 1
+  truncatedWidth: {
+    // Allow truncation, stop bleeding over the edge.
+    minWidth: 0
   }
 });
 
-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;
-};
+/**
+ * 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]})`;
 
-const GraphPointsCountSelector = ({
-  numPoints: _numPoints = 1,
-  onChange
-}) => {
-  return /*#__PURE__*/React.createElement(SingleSelect, {
-    selectedValue: `${_numPoints}`,
-    onChange: newValue => {
-      onChange(parsePointCount(newValue));
+  // Check if the line has length 0.
+  const isInvalid = vector.equal(tail, tip);
+  function handleChangePoint(newCoord, index) {
+    if (typeof newCoord !== "undefined") {
+      const newPoints = [...points];
+      newPoints[index] = [...newCoord];
+      onChangeProps({
+        points: newPoints
+      });
     }
-    // Never uses placeholder, always has value
-    ,
-    placeholder: "",
-    style: styles$m.singleSelectShort
-  }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React.createElement(OptionItem, {
-    key: n,
-    value: `${n}`,
-    label: `${n} point${n > 1 ? "s" : ""}`
-  })), /*#__PURE__*/React.createElement(OptionItem, {
-    key: "unlimited",
-    value: UNLIMITED,
-    label: "unlimited"
-  })]);
-};
-const styles$m = 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.createElement(SingleSelect, {
-    selectedValue: props.graphType,
-    onChange: props.onChange,
-    placeholder: "Select a graph type",
-    style: styles$l.singleSelectShort
-  }, /*#__PURE__*/React.createElement(OptionItem, {
-    value: "linear",
-    label: "Linear function"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "quadratic",
-    label: "Quadratic function"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "sinusoid",
-    label: "Sinusoid function"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "circle",
-    label: "Circle"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "point",
-    label: "Point(s)"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "linear-system",
-    label: "Linear System"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "polygon",
-    label: "Polygon"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "segment",
-    label: "Line Segment(s)"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "ray",
-    label: "Ray"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "angle",
-    label: "Angle"
-  }));
-};
-const styles$l = StyleSheet.create({
-  singleSelectShort: {
-    // Non-standard spacing, but it's the smallest we can go
-    // without running into styling issues with the dropdown.
-    height: 26
+  function handleColorChange(newColor) {
+    onChangeProps({
+      color: newColor
+    });
   }
-});
-
-function InteractiveGraphCorrectAnswer(props) {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
-    title: "Correct Answer",
-    isOpen: true,
-    isCollapsible: false
-  }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(LabelXSmall, {
-    style: {
-      paddingTop: spacing.xxSmall_6,
-      paddingBottom: spacing.xxSmall_6,
-      color: color.offBlack64
+  return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
+    expanded: props.expanded,
+    onToggle: props.onToggle,
+    header: /*#__PURE__*/React.createElement(View, {
+      style: styles$j.row
+    }, /*#__PURE__*/React.createElement(LabelLarge, null, lineLabel), /*#__PURE__*/React.createElement(Strut, {
+      size: spacing.xSmall_8
+    }), /*#__PURE__*/React.createElement(LineSwatch, {
+      color: lineColor,
+      lineStyle: "solid"
+    }))
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles$j.row, styles$j.spaceUnder]
+  }, /*#__PURE__*/React.createElement(ColorSelect, {
+    selectedValue: lineColor,
+    onChange: handleColorChange
+  })), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
+    style: styles$j.errorText
+  }, lengthErrorMessage), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
+    expanded: true // Initial state is expanded
+    ,
+    containerStyle: styles$j.container,
+    panelStyle: styles$j.accordionPanel,
+    header: /*#__PURE__*/React.createElement(View, {
+      style: styles$j.row
+    }, /*#__PURE__*/React.createElement(LabelLarge, null, `Tail (${tail[0]}, ${tail[1]})`))
+  }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: tail,
+    error: isInvalid,
+    onChange: newProps => {
+      handleChangePoint(newProps, 0);
     }
-  }, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."), /*#__PURE__*/React.createElement(BodyMonospace, {
-    style: {
-      fontSize: 12,
-      backgroundColor: "#eee",
-      paddingInline: spacing.xxSmall_6,
-      borderColor: "#ccc",
-      borderStyle: "solid",
-      borderWidth: 1
+  })), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
+    expanded: true // Initial state is expanded
+    ,
+    containerStyle: styles$j.container,
+    panelStyle: styles$j.accordionPanel,
+    header: /*#__PURE__*/React.createElement(View, {
+      style: styles$j.row
+    }, /*#__PURE__*/React.createElement(LabelLarge, null, `Tip (${tip[0]}, ${tip[1]})`))
+  }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: tip,
+    error: isInvalid,
+    onChange: newProps => {
+      handleChangePoint(newProps, 1);
     }
-  }, props.equationString)), props.children));
-}
-
-function InteractiveGraphDescription(props) {
-  const {
-    ariaLabelValue,
-    ariaDescriptionValue,
-    onChange
-  } = props;
-  const [isOpen, setIsOpen] = React.useState(true);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
-    title: "Description",
-    isCollapsible: true,
-    isOpen: isOpen,
-    onToggle: setIsOpen
-  }), isOpen && /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(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.createElement(LabelLarge, {
-    tag: "label"
-  }, "Title", /*#__PURE__*/React.createElement(TextField, {
-    value: ariaLabelValue,
-    onChange: newValue => onChange({
-      fullGraphAriaLabel: newValue
-    }),
-    style: styles$k.spaceAbove
-  })), /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.small_12
-  }), /*#__PURE__*/React.createElement(LabelLarge, {
-    tag: "label"
-  }, "Description", /*#__PURE__*/React.createElement(TextArea, {
-    rows: 8,
-    resizeType: "vertical",
-    value: ariaDescriptionValue,
-    onChange: newValue => onChange({
-      fullGraphAriaDescription: newValue
-    }),
-    style: styles$k.spaceAbove
-  }))));
-}
-const styles$k = StyleSheet.create({
-  caption: {
-    color: color.offBlack64,
-    paddingTop: spacing.xxSmall_6,
-    paddingBottom: spacing.xxSmall_6
+  })), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
+    figureType: props.type,
+    onMove: onMove,
+    onRemove: onRemove
+  }));
+};
+const styles$j = StyleSheet.create({
+  accordionPanel: {
+    paddingBottom: spacing.medium_16
   },
-  spaceAbove: {
-    marginTop: spacing.xxxSmall_4
+  container: {
+    marginTop: spacing.xSmall_8,
+    marginBottom: 0,
+    marginLeft: -spacing.xxxSmall_4,
+    marginRight: -spacing.xxxSmall_4,
+    backgroundColor: color.white
+  },
+  errorText: {
+    color: color.red,
+    marginTop: spacing.xSmall_8
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
   }
 });
 
-const {
-  ButtonGroup: ButtonGroup$2,
-  InfoTip: InfoTip$c,
-  RangeInput: RangeInput$4
-} = 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.Component {
-  static stateFromProps(props) {
-    return {
-      labelsTextbox: props.labels,
-      gridStepTextbox: props.gridStep,
-      snapStepTextbox: props.snapStep,
-      stepTextbox: props.step,
-      rangeTextbox: props.range,
-      // Shallow-copied clone
-      backgroundImage: _extends({}, props.backgroundImage)
-    };
-  }
-  constructor(props) {
-    super(props);
-    this._isMounted = false;
-    this.bgUrlRef = /*#__PURE__*/React.createRef();
-    this.labelXRef = /*#__PURE__*/React.createRef();
-    this.labelYRef = /*#__PURE__*/React.createRef();
-    this.change = (...args) => {
-      return Changeable.change.apply(this, args);
-    };
-    this.changeBackgroundUrl = e => {
-      var _this$bgUrlRef$curren;
-      // Only continue on blur or "enter"
-      if (e.type === "keypress" && e.key !== "Enter") {
-        return;
+/**
+ * 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.createElement(LockedPointSettings, props);
+    case "line":
+      return /*#__PURE__*/React.createElement(LockedLineSettings, props);
+    case "vector":
+      return /*#__PURE__*/React.createElement(LockedVectorSettings, props);
+    case "ellipse":
+      return /*#__PURE__*/React.createElement(LockedEllipseSettings, props);
+    case "polygon":
+      return /*#__PURE__*/React.createElement(LockedPolygonSettings, props);
+    case "function":
+      return /*#__PURE__*/React.createElement(LockedFunctionSettings, props);
+    case "label":
+      if (props.showLabelsFlag) {
+        return /*#__PURE__*/React.createElement(LockedLabelSettings, props);
       }
-      const setUrl = (url, width, height) => {
-        // Shallow-copied clone
-        const image = _extends({}, this.props.backgroundImage);
-        image.url = url;
-        image.width = width;
-        image.height = height;
-        this.setState({
-          backgroundImage: image
-        }, this.changeGraph);
+      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
       };
-      const url = (_this$bgUrlRef$curren = this.bgUrlRef.current) == null ? void 0 : _this$bgUrlRef$curren.value;
-      if (url) {
-        Util.getImageSize(url, (width, height) => {
-          if (this._isMounted) {
-            setUrl(url, width, height);
-          }
-        });
-      } else {
-        setUrl(null, 0, 0);
-      }
-    };
-    this.renderLabelChoices = choices => {
-      return choices.map(nameAndValue => /*#__PURE__*/React.createElement("option", {
-        key: nameAndValue[1],
-        value: nameAndValue[1]
-      }, nameAndValue[0]));
-    };
-    this.validRange = range => {
-      const numbers = _.every(range, function (num) {
-        return _.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;
-    };
-    this.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;
-    };
-    this.validSnapStep = (step, range) => {
-      return this.validateStepValue({
-        step: step,
-        range: range,
-        name: "Snap step",
-        minTicks: 5,
-        maxTicks: 60
-      });
-    };
-    this.validGridStep = (step, range) => {
-      return this.validateStepValue({
-        step: step,
-        range: range,
-        name: "Grid step",
-        minTicks: 3,
-        maxTicks: 60
-      });
-    };
-    this.validStep = (step, range) => {
-      return this.validateStepValue({
-        step: step,
-        range: range,
-        name: "Step",
-        minTicks: 3,
-        maxTicks: 20
-      });
-    };
-    this.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;
-    };
-    this.validateGraphSettings = (range, step, gridStep, snapStep, image) => {
-      const self = this;
-      let msg;
-      const goodRange = _.every(range, function (range) {
-        msg = self.validRange(range);
-        return msg === true;
-      });
-      if (!goodRange) {
-        return msg;
-      }
-      const goodStep = _.every(step, function (step, i) {
-        msg = self.validStep(step, range[i]);
-        return msg === true;
-      });
-      if (!goodStep) {
-        return msg;
-      }
-      const goodGridStep = _.every(gridStep, function (gridStep, i) {
-        msg = self.validGridStep(gridStep, range[i]);
-        return msg === true;
-      });
-      if (!goodGridStep) {
-        return msg;
-      }
-      const goodSnapStep = _.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;
-    };
-    this.changeLabel = (i, e) => {
-      const val = e.target.value;
-      const labels = this.state.labelsTextbox.slice();
-      labels[i] = val;
-      this.setState({
-        labelsTextbox: labels
-      }, this.changeGraph);
-    };
-    this.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 = Util.scaleFromExtent(ranges[i], this.props.box[i]);
-      if (this.validRange(ranges[i]) === true) {
-        step[i] = Util.tickStepFromExtent(ranges[i], this.props.box[i]);
-        const gridStepValue = 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);
-    };
-    this.changeStep = step => {
-      this.setState({
-        stepTextbox: step
-      }, this.changeGraph);
-    };
-    this.changeSnapStep = snapStep => {
-      this.setState({
-        snapStepTextbox: snapStep
-      }, this.changeGraph);
-    };
-    this.changeGridStep = gridStep => {
-      this.setState({
-        gridStepTextbox: gridStep,
-        snapStepTextbox: _.map(gridStep, function (step) {
-          return step / 2;
-        })
-      }, this.changeGraph);
-    };
-    this.changeGraph = () => {
-      const labels = this.state.labelsTextbox;
-      const range = _.map(this.state.rangeTextbox, function (range) {
-        return _.map(range, Number);
-      });
-      const step = _.map(this.state.stepTextbox, Number);
-      const gridStep = this.state.gridStepTextbox;
-      const snapStep = this.state.snapStepTextbox;
-      const image = this.state.backgroundImage;
+    case "line":
+      return {
+        type: "line",
+        kind: "line",
+        points: [getDefaultFigureForType("point"), _extends({}, 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 UnreachableCaseError(type);
+  }
+}
 
-      // 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
-        });
-      }
+const LockedFiguresSection = props => {
+  var _props$figures;
+  // 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 = props.figures) != null ? _props$figures : []).length).fill(false);
+  const [expandedStates, setExpandedStates] = React.useState(collapsedStateArray);
+  const [isExpanded, setIsExpanded] = React.useState(true);
+  const uniqueId = useUniqueIdWithMock().get("locked-figures-section");
+  const {
+    figures,
+    onChange
+  } = props;
+  function addLockedFigure(newFigure) {
+    const lockedFigures = figures || [];
+    const newProps = {
+      lockedFigures: [...lockedFigures, getDefaultFigureForType(newFigure)]
     };
-    this.state = _extends({
-      isExpanded: true
-    }, InteractiveGraphSettings.stateFromProps(props));
+    onChange(newProps);
+    setExpandedStates([...expandedStates, true]);
   }
-  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 = _.debounce(this.changeGraph, 300);
+  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);
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    // Make sure that state updates when switching
-    // between different items in a multi-item editor.
-    if (!_.isEqual(this.props.labels, nextProps.labels) || !_.isEqual(this.props.gridStep, nextProps.gridStep) || !_.isEqual(this.props.snapStep, nextProps.snapStep) || !_.isEqual(this.props.step, nextProps.step) || !_.isEqual(this.props.range, nextProps.range) || !_.isEqual(this.props.backgroundImage, nextProps.backgroundImage)) {
-      this.setState(InteractiveGraphSettings.stateFromProps(nextProps));
+  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);
     }
   }
-  componentWillUnmount() {
-    this._isMounted = false;
+  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), _extends({}, lockedFigures[index], figureProps), ...lockedFigures.slice(index + 1)]
+    };
+    onChange(newFigures);
   }
-  render() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
-      title: "Common Graph Settings",
-      isOpen: this.state.isExpanded,
-      isCollapsible: true,
-      onToggle: () => this.setState({
-        isExpanded: !this.state.isExpanded
-      })
-    }), this.state.isExpanded && /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement("div", {
-      className: "graph-settings"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "x Label"
-    }, /*#__PURE__*/React.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.createElement("div", {
-      className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "y Label"
-    }, /*#__PURE__*/React.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.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "x Range"
-    }, /*#__PURE__*/React.createElement(RangeInput$4, {
-      value: this.state.rangeTextbox[0],
-      onChange: vals => this.changeRange(0, vals)
-    }))), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "y Range"
-    }, /*#__PURE__*/React.createElement(RangeInput$4, {
-      value: this.state.rangeTextbox[1],
-      onChange: vals => this.changeRange(1, vals)
-    })))), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Tick Step"
-    }, /*#__PURE__*/React.createElement(RangeInput$4, {
-      value: this.state.stepTextbox,
-      onChange: this.changeStep
-    }))), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Grid Step"
-    }, /*#__PURE__*/React.createElement(RangeInput$4, {
-      value: this.state.gridStepTextbox,
-      onChange: this.changeGridStep
-    })))), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Snap Step"
-    }, /*#__PURE__*/React.createElement(RangeInput$4, {
-      value: this.state.snapStepTextbox,
-      onChange: this.changeSnapStep
-    })))), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Markings:"
-    }, /*#__PURE__*/React.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.createElement("div", {
-      className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(Checkbox$1, {
-      label: "Show tooltips",
-      checked: this.props.showTooltips,
-      onChange: value => {
-        this.change({
-          showTooltips: value
-        });
-      }
-    }))), /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Background image URL:",
-      style: styles$j.resetSpaceTop
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "text",
-      className: css(styles$j.backgroundUrlInput),
-      ref: this.bgUrlRef,
-      value: this.state.backgroundImage.url || "",
-      onChange: e => {
-        // Shallow-copied clone
-        const image = _extends({}, this.props.backgroundImage);
-        image.url = e.target.value;
-        this.setState({
-          backgroundImage: image
-        });
-      },
-      onKeyPress: this.changeBackgroundUrl,
-      onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React.createElement(InfoTip$c, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React.createElement(View, {
-      style: styles$j.protractorSection
-    }, /*#__PURE__*/React.createElement(View, {
-      style: styles$j.checkboxRow
-    }, /*#__PURE__*/React.createElement(Checkbox$1, {
-      label: "Show protractor",
-      checked: this.props.showProtractor,
-      onChange: value => {
-        this.change({
-          showProtractor: value
-        });
-      },
-      style: styles$j.resetSpaceTop
-    })), this.props.showProtractor && /*#__PURE__*/React.createElement(Banner, {
-      layout: "floating",
-      text: "The protractor is not accessible. Please consider an alternate approach.",
-      kind: "warning"
-    }))));
+  function toggleExpanded(newValue) {
+    setExpandedStates(Array(figures == null ? void 0 : figures.length).fill(newValue));
   }
-}
-InteractiveGraphSettings.defaultProps = {
-  box: [interactiveSizes.defaultBoxSizeSmall, 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
+  const allCollapsed = expandedStates.every(value => !value);
+  const buttonLabel = allCollapsed ? "Expand all" : "Collapse all";
+  const showExpandButton = !!(figures != null && figures.length);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
+    title: "Locked Figures",
+    isOpen: isExpanded,
+    onToggle: () => setIsExpanded(!isExpanded),
+    isCollapsible: true
+  }), isExpanded && /*#__PURE__*/React.createElement(View, null, figures == null ? void 0 : figures.map((figure, index) => {
+    return /*#__PURE__*/React.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.createElement(View, {
+    style: styles$i.buttonContainer
+  }, /*#__PURE__*/React.createElement(LockedFigureSelect, {
+    showLabelsFlag: props.showLabelsFlag,
+    id: `${uniqueId}-select`,
+    onChange: addLockedFigure
+  }), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), showExpandButton && /*#__PURE__*/React.createElement(Button, {
+    kind: "secondary",
+    onClick: () => toggleExpanded(allCollapsed),
+    style: styles$i.button
+  }, buttonLabel))));
 };
-const styles$j = StyleSheet.create({
-  resetSpaceTop: {
-    marginTop: 0
-  },
-  backgroundUrlInput: {
-    border: `1px solid ${color.offBlack32}`,
-    borderRadius: spacing.xxxSmall_4,
-    padding: spacing.xxxSmall_4
-  },
-  checkboxRow: {
+const styles$i = StyleSheet.create({
+  buttonContainer: {
     flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: spacing.xSmall_8
+    alignItems: "center"
   },
-  protractorSection: {
+  button: {
     marginTop: spacing.xSmall_8,
-    borderTop: `1px solid ${color.offBlack16}`,
-    paddingTop: spacing.xSmall_8,
-    paddingBottom: spacing.xSmall_8,
-    borderBottom: `1px solid ${color.offBlack16}`
+    flexGrow: 1
   }
 });
 
-const SegmentCountSelector = ({
-  numSegments: _numSegments = 1,
-  onChange
-}) => /*#__PURE__*/React.createElement(SingleSelect, {
-  key: "segment-select",
-  selectedValue: `${_numSegments}`
-  // Never uses placeholder, always has value
-  ,
-  placeholder: "",
-  onChange: newValue => {
-    const num = +newValue;
-    onChange(num);
-  },
-  style: styles$i.singleSelectShort
-}, _.range(1, 7).map(n => /*#__PURE__*/React.createElement(OptionItem, {
-  key: n,
-  value: `${n}`,
-  label: `${n} segment${n > 1 ? "s" : ""}`
-})));
-const styles$i = StyleSheet.create({
-  singleSelectShort: {
-    // Non-standard spacing, but it's the smallest we can go
-    // without running into styling issues with the dropdown.
-    height: 26
+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 getLineCoords(_extends({}, graph, {
+        startCoords: undefined
+      }), range, step);
+    case "segment":
+      return getSegmentCoords(_extends({}, graph, {
+        startCoords: undefined
+      }), range, step);
+    case "linear-system":
+      return getLinearSystemCoords(_extends({}, graph, {
+        startCoords: undefined
+      }), range, step);
+    case "circle":
+      const startCoords = getCircleCoords(_extends({}, graph, {
+        startCoords: undefined
+      }));
+      const radius = vector.length(vector.subtract(startCoords.radiusPoint, startCoords.center));
+      return {
+        center: startCoords.center,
+        radius
+      };
+    case "sinusoid":
+      return getSinusoidCoords(_extends({}, graph, {
+        startCoords: undefined
+      }), range, step);
+    case "quadratic":
+      return getQuadraticCoords(_extends({}, graph, {
+        startCoords: undefined
+      }), range, step);
+    case "point":
+      return getPointCoords(_extends({}, graph, {
+        startCoords: undefined
+      }), range, step);
+    case "polygon":
+      return getPolygonCoords(_extends({}, graph, {
+        startCoords: undefined
+      }), range, step);
+    case "angle":
+      return getAngleCoords({
+        graph: _extends({}, 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 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 UnreachableCaseError(graph);
+  }
+};
 
 const StartCoordsAngle = props => {
   const {
@@ -32783,13 +32806,12 @@ class InteractiveGraphEditor extends React.Component {
     // eslint-disable-next-line react/no-string-refs
     const graph = this.refs.graph;
     if (graph) {
-      var _this$props$graph2;
       // @ts-expect-error TS2339 Property 'getUserInput' does not exist on type 'ReactInstance'. Property 'getUserInput' does not exist on type 'Component<any, {}, any>'.
       const correct = graph && graph.getUserInput();
       _.extend(json, {
         graph: {
           type: correct.type,
-          startCoords: (_this$props$graph2 = this.props.graph) == null ? void 0 : _this$props$graph2.startCoords
+          startCoords: this.props.graph && getStartCoords(this.props.graph)
         },
         correct: correct
       });
@@ -32804,7 +32826,7 @@ class InteractiveGraphEditor extends React.Component {
     return json;
   }
   render() {
-    var _this$props$graph$typ, _this$props$graph3, _this$props$apiOption, _this$props$fullGraph, _this$props$fullGraph2, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10, _this$props$correct11, _this$props$graph9, _this$props$apiOption2, _this$props$apiOption3;
+    var _this$props$graph$typ, _this$props$graph2, _this$props$apiOption, _this$props$apiOption2, _this$props$fullGraph, _this$props$fullGraph2, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10, _this$props$correct11, _this$props$graph8, _this$props$apiOption3, _this$props$apiOption4;
     let graph;
     let equationString;
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, interactiveSizes.defaultBoxSize);
@@ -32872,9 +32894,9 @@ class InteractiveGraphEditor extends React.Component {
       }, this.props.valid);
     }
     return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Type of Graph:"
+      label: "Answer type:"
     }, /*#__PURE__*/React.createElement(GraphTypeSelector, {
-      graphType: (_this$props$graph$typ = (_this$props$graph3 = this.props.graph) == null ? void 0 : _this$props$graph3.type) != null ? _this$props$graph$typ : InteractiveGraph.defaultProps.graph.type,
+      graphType: (_this$props$graph$typ = (_this$props$graph2 = this.props.graph) == null ? void 0 : _this$props$graph2.type) != null ? _this$props$graph$typ : InteractiveGraph.defaultProps.graph.type,
       onChange: type => {
         this.props.onChange({
           graph: {
@@ -32884,8 +32906,9 @@ class InteractiveGraphEditor extends React.Component {
             type
           }
         });
-      }
-    })), this.props.graph && ((_this$props$apiOption = this.props.apiOptions) == null || (_this$props$apiOption = _this$props$apiOption.flags) == null || (_this$props$apiOption = _this$props$apiOption.mafs) == null ? void 0 : _this$props$apiOption[this.props.graph.type]) && /*#__PURE__*/React.createElement(InteractiveGraphDescription, {
+      },
+      showNoneOption: (_this$props$apiOption = this.props.apiOptions) == null || (_this$props$apiOption = _this$props$apiOption.flags) == null || (_this$props$apiOption = _this$props$apiOption.mafs) == null ? void 0 : _this$props$apiOption["none"]
+    })), this.props.graph && ((_this$props$apiOption2 = this.props.apiOptions) == null || (_this$props$apiOption2 = _this$props$apiOption2.flags) == null || (_this$props$apiOption2 = _this$props$apiOption2.mafs) == null ? void 0 : _this$props$apiOption2[this.props.graph.type]) && /*#__PURE__*/React.createElement(InteractiveGraphDescription, {
       ariaLabelValue: (_this$props$fullGraph = this.props.fullGraphAriaLabel) != null ? _this$props$fullGraph : "",
       ariaDescriptionValue: (_this$props$fullGraph2 = this.props.fullGraphAriaDescription) != null ? _this$props$fullGraph2 : "",
       onChange: this.props.onChange
@@ -32914,8 +32937,8 @@ class InteractiveGraphEditor extends React.Component {
       selectedValue: (_this$props$correct4 = this.props.correct) != null && _this$props$correct4.numSides ? `${this.props.correct.numSides}` : "3",
       placeholder: "",
       onChange: newValue => {
-        var _this$props$graph4;
-        invariant(((_this$props$graph4 = this.props.graph) == null ? void 0 : _this$props$graph4.type) === "polygon");
+        var _this$props$graph3;
+        invariant(((_this$props$graph3 = this.props.graph) == null ? void 0 : _this$props$graph3.type) === "polygon");
         const updates = {
           numSides: parsePointCount(newValue),
           coords: null,
@@ -32942,9 +32965,9 @@ class InteractiveGraphEditor extends React.Component {
       ,
       placeholder: "",
       onChange: newValue => {
-        var _this$props$graph5, _this$props$graph6;
+        var _this$props$graph4, _this$props$graph5;
         invariant(this.props.correct.type === "polygon", `Expected correct answer type to be polygon, but got ${this.props.correct.type}`);
-        invariant(((_this$props$graph5 = this.props.graph) == null ? void 0 : _this$props$graph5.type) === "polygon", `Expected graph type to be polygon, but got ${(_this$props$graph6 = this.props.graph) == null ? void 0 : _this$props$graph6.type}`);
+        invariant(((_this$props$graph4 = this.props.graph) == null ? void 0 : _this$props$graph4.type) === "polygon", `Expected graph type to be polygon, but got ${(_this$props$graph5 = this.props.graph) == null ? void 0 : _this$props$graph5.type}`);
         const updates = {
           snapTo: newValue,
           coords: null
@@ -32972,8 +32995,8 @@ class InteractiveGraphEditor extends React.Component {
       // Don't show indeterminate checkbox state
       !!((_this$props$correct8 = this.props.correct) != null && _this$props$correct8.showAngles),
       onChange: () => {
-        var _this$props$graph7;
-        if (((_this$props$graph7 = this.props.graph) == null ? void 0 : _this$props$graph7.type) === "polygon") {
+        var _this$props$graph6;
+        if (((_this$props$graph6 = this.props.graph) == null ? void 0 : _this$props$graph6.type) === "polygon") {
           invariant(this.props.correct.type === "polygon", `Expected graph type to be polygon, but got ${this.props.correct.type}`);
           this.props.onChange({
             correct: _extends({}, this.props.correct, {
@@ -32993,8 +33016,8 @@ class InteractiveGraphEditor extends React.Component {
       // Don't show indeterminate checkbox state
       !!((_this$props$correct9 = this.props.correct) != null && _this$props$correct9.showSides),
       onChange: () => {
-        var _this$props$graph8;
-        if (((_this$props$graph8 = this.props.graph) == null ? void 0 : _this$props$graph8.type) === "polygon" && this.props.correct.type === "polygon") {
+        var _this$props$graph7;
+        if (((_this$props$graph7 = this.props.graph) == null ? void 0 : _this$props$graph7.type) === "polygon" && this.props.correct.type === "polygon") {
           this.props.onChange({
             correct: _extends({}, this.props.correct, {
               showSides: !this.props.correct.showSides
@@ -33022,7 +33045,7 @@ class InteractiveGraphEditor extends React.Component {
           }
         });
       }
-    })), ((_this$props$graph9 = this.props.graph) == null ? void 0 : _this$props$graph9.type) && shouldShowStartCoordsUI(this.props.graph, this.props.static) && /*#__PURE__*/React.createElement(StartCoordsSettings, _extends({}, this.props.graph, {
+    })), ((_this$props$graph8 = this.props.graph) == null ? void 0 : _this$props$graph8.type) && shouldShowStartCoordsUI(this.props.graph, this.props.static) && /*#__PURE__*/React.createElement(StartCoordsSettings, _extends({}, this.props.graph, {
       range: this.props.range,
       step: this.props.step,
       onChange: this.changeStartCoords
@@ -33106,8 +33129,8 @@ class InteractiveGraphEditor extends React.Component {
     })), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Congruency requires only that the angle measures are the same. An exact match implies congruency, but also requires that the angles have the same orientation and that the vertices are in the same position."))),
     // Only show the "Add locked figure" dropdown if the graph
     // is using Mafs.
-    this.props.graph && ((_this$props$apiOption2 = this.props.apiOptions) == null || (_this$props$apiOption2 = _this$props$apiOption2.flags) == null || (_this$props$apiOption2 = _this$props$apiOption2.mafs) == null ? void 0 : _this$props$apiOption2[this.props.graph.type]) && /*#__PURE__*/React.createElement(LockedFiguresSection, {
-      showLabelsFlag: (_this$props$apiOption3 = this.props.apiOptions) == null || (_this$props$apiOption3 = _this$props$apiOption3.flags) == null || (_this$props$apiOption3 = _this$props$apiOption3.mafs) == null ? void 0 : _this$props$apiOption3["interactive-graph-locked-features-labels"],
+    this.props.graph && ((_this$props$apiOption3 = this.props.apiOptions) == null || (_this$props$apiOption3 = _this$props$apiOption3.flags) == null || (_this$props$apiOption3 = _this$props$apiOption3.mafs) == null ? void 0 : _this$props$apiOption3[this.props.graph.type]) && /*#__PURE__*/React.createElement(LockedFiguresSection, {
+      showLabelsFlag: (_this$props$apiOption4 = this.props.apiOptions) == null || (_this$props$apiOption4 = _this$props$apiOption4.flags) == null || (_this$props$apiOption4 = _this$props$apiOption4.mafs) == null ? void 0 : _this$props$apiOption4["interactive-graph-locked-features-labels"],
       figures: this.props.lockedFigures,
       onChange: this.props.onChange
     }));
@@ -33144,6 +33167,9 @@ function mergeGraphs(a, b) {
     case "linear-system":
       invariant(b.type === "linear-system");
       return _extends({}, a, b);
+    case "none":
+      invariant(b.type === "none");
+      return _extends({}, a, b);
     case "point":
       invariant(b.type === "point");
       return _extends({}, a, b);