@khanacademy/perseus-editor 7.0.3 → 8.1.0

package/dist/es/index.js

@@ -1,5 +1,5 @@
-import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
-import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusError, Errors, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, WidgetJsonifyDeprecated, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, PerseusI18nContext, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, lockedFigureColors, lockedFigureFillStyles, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, displaySigFigs, widgets } from '@khanacademy/perseus';
+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, WidgetJsonifyDeprecated, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, PerseusI18nContext, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, lockedFigureColors, lockedFigureFillStyles, getLineCoords, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, displaySigFigs, widgets } from '@khanacademy/perseus';
 import * as React from 'react';
 import { useRef, useEffect } from 'react';
 import _ from 'underscore';
@@ -33,10 +33,11 @@ import Switch from '@khanacademy/wonder-blocks-switch';
 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 = "7.0.3";
+const libVersion = "8.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -226,7 +227,7 @@ class SectionControlButton extends React.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$G.button
+      style: styles$H.button
     }, ({
       hovered,
       focused,
@@ -234,7 +235,7 @@ class SectionControlButton extends React.Component {
     }) => /*#__PURE__*/React.createElement(InlineIcon$b, icon));
   }
 }
-const styles$G = StyleSheet.create({
+const styles$H = StyleSheet.create({
   button: {
     backgroundColor: color.gold,
     margin: 2,
@@ -20739,13 +20740,13 @@ class WidgetSelect extends React.Component {
  * that collapse a region.
  */
 function ToggleableCaret(props) {
-  const iconStyle = props.isExpanded ? styles$F.expanded : styles$F.collapsed;
+  const iconStyle = props.isExpanded ? styles$G.expanded : styles$G.collapsed;
   return /*#__PURE__*/React.createElement(PhosphorIcon, {
     icon: caretRight,
     style: iconStyle
   });
 }
-const styles$F = StyleSheet.create({
+const styles$G = StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20778,16 +20779,16 @@ class TexErrorView extends React.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$E.errorContainer
+      style: styles$F.errorContainer
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$E.title,
+      style: styles$F.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React.createElement(ToggleableCaret, {
       isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React.createElement(View, {
-      style: styles$E.errorExplanation
+      style: styles$F.errorExplanation
     }, "If your math doesn't display correctly, these errors might help you troubleshoot. Message #content-kitchen for help."), showErrors && errorList.map((e, index) => /*#__PURE__*/React.createElement(View, {
-      style: styles$E.error,
+      style: styles$F.error,
       key: index
     }, /*#__PURE__*/React.createElement(View, {
       style: {
@@ -20796,7 +20797,7 @@ class TexErrorView extends React.Component {
     }, e.math), /*#__PURE__*/React.createElement(View, null, e.message))));
   }
 }
-const styles$E = StyleSheet.create({
+const styles$F = StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -24590,7 +24591,7 @@ class SimpleButton extends React.Component {
       } = _this$props,
       otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: css(styles$D.baseButton, color === "green" && styles$D.green, color === "orange" && styles$D.orange),
+      className: css(styles$E.baseButton, color === "green" && styles$E.green, color === "orange" && styles$E.orange),
       onClick: onClick
     }, otherProps), children);
   }
@@ -24605,7 +24606,7 @@ SimpleButton.defaultProps = {
   color: "green",
   onClick: () => {}
 };
-const styles$D = StyleSheet.create({
+const styles$E = StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24825,23 +24826,23 @@ const LeafContainer = ({
 }) => {
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.containerHeader)
+    className: css(styles$D.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$C.containerTitle)
+    className: css(styles$D.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.container)
+    className: css(styles$D.container)
   }, /*#__PURE__*/React.createElement("span", {
-    className: css(styles$C.row, styles$C.rowHeading)
+    className: css(styles$D.row, styles$D.rowHeading)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnLeft)
+    className: css(styles$D.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "pod-title " + css(styles$C.containerHeader)
+    className: "pod-title " + css(styles$D.containerHeader)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.containerTitle)
+    className: css(styles$D.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnRight)
+    className: css(styles$D.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24854,11 +24855,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.container)
+    className: css(styles$D.container)
   }, controls && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnLeft, styles$C.containerHeader)
+    className: css(styles$D.columnLeft, styles$D.containerHeader)
   }, controls), /*#__PURE__*/React.createElement("div", null, children), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnLeft)
+    className: css(styles$D.columnLeft)
   }, /*#__PURE__*/React.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24871,28 +24872,28 @@ const ObjectContainer = ({
   path
 }) => {
   const headingEditor = /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.containerHeader)
+    className: css(styles$D.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$C.containerTitle)
+    className: css(styles$D.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.containerHeader, styles$C.previewCollectionHeader)
+    className: css(styles$D.containerHeader, styles$D.previewCollectionHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$C.containerTitle)
+    className: css(styles$D.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.container)
+    className: css(styles$D.container)
   }, hasBothHeadings && /*#__PURE__*/React.createElement("span", {
-    className: css(styles$C.row)
+    className: css(styles$D.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnLeft)
+    className: css(styles$D.columnLeft)
   }, headingEditor), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnRight)
+    className: css(styles$D.columnRight)
   }, headingPreview)), /*#__PURE__*/React.createElement("div", {
-    className: css(path.length > 0 && styles$C.contentIndent)
+    className: css(path.length > 0 && styles$D.contentIndent)
   }, children));
 };
 
@@ -25015,11 +25016,11 @@ const ItemNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.row)
+    className: css(styles$D.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnLeft)
+    className: css(styles$D.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$C.sticky)
+    className: css(sticky && styles$D.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25027,9 +25028,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnRight)
+    className: css(styles$D.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$C.sticky)
+    className: css(sticky && styles$D.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25045,13 +25046,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.row)
+    className: css(styles$D.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnLeft)
+    className: css(styles$D.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$C.sticky)
+    className: css(sticky && styles$D.sticky)
   }, /*#__PURE__*/React.createElement(HintEditor, _extends({}, data, {
-    className: css(styles$C.hintEditor),
+    className: css(styles$D.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25066,9 +25067,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnRight)
+    className: css(styles$D.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$C.sticky)
+    className: css(sticky && styles$D.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25085,9 +25086,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnLeft)
+    className: css(styles$D.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.tagsEditor)
+    className: css(styles$D.tagsEditor)
   }, /*#__PURE__*/React.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25118,23 +25119,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementUp",
-      className: css(styles$C.control)
+      className: css(styles$D.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$C.verticalFlip)
+      className: css(styles$D.verticalFlip)
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementDown",
-      className: css(styles$C.control)
+      className: css(styles$D.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconChevronDown))), /*#__PURE__*/React.createElement("div", {
       key: "removeArrayElement",
-      className: css(styles$C.control)
+      className: css(styles$D.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25142,7 +25143,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconTrash$4)))];
     return /*#__PURE__*/React.createElement("div", {
       key: i,
-      className: css(styles$C.arrayElement, !elementIsLeaf && styles$C.arrayElementAndNotLeaf)
+      className: css(styles$D.arrayElement, !elementIsLeaf && styles$D.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25168,7 +25169,7 @@ const ObjectNodeContent = props => {
   // made sense to the shape's author is the order in which we'll iterate :)
   const children = Object.keys(shape.shape).map(subkey => /*#__PURE__*/React.createElement("div", {
     key: subkey,
-    className: css(styles$C.objectElement)
+    className: css(styles$D.objectElement)
   }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25335,7 +25336,7 @@ class MultiRendererEditor extends React.Component {
     }, this._renderContent());
   }
 }
-const styles$C = StyleSheet.create({
+const styles$D = StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25487,47 +25488,47 @@ const StatefulArticleEditor = createReactClass({
       screen
     } = this.state;
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      style: styles$B.controlBar
+      style: styles$C.controlBar
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$B.controls
+      style: styles$C.controls
     }, "Mode:", " ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "edit"
       }),
-      style: mode === "edit" ? styles$B.controlSelected : styles$B.control
+      style: mode === "edit" ? styles$C.controlSelected : styles$C.control
     }, "EDIT"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "preview"
       }),
-      style: mode === "preview" ? styles$B.controlSelected : styles$B.control
+      style: mode === "preview" ? styles$C.controlSelected : styles$C.control
     }, "PREVIEW"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "json"
       }),
-      style: mode === "json" ? styles$B.controlSelected : styles$B.control
+      style: mode === "json" ? styles$C.controlSelected : styles$C.control
     }, "JSON")), /*#__PURE__*/React.createElement("span", {
-      style: styles$B.controls
+      style: styles$C.controls
     }, "Screen:", " ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "phone"
       }),
-      style: screen === "phone" ? styles$B.controlSelected : styles$B.control
+      style: screen === "phone" ? styles$C.controlSelected : styles$C.control
     }, "PHONE"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "tablet"
       }),
-      style: screen === "tablet" ? styles$B.controlSelected : styles$B.control
+      style: screen === "tablet" ? styles$C.controlSelected : styles$C.control
     }, "TABLET"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "desktop"
       }),
-      style: screen === "desktop" ? styles$B.controlSelected : styles$B.control
+      style: screen === "desktop" ? styles$C.controlSelected : styles$C.control
     }, "DESKTOP"))), /*#__PURE__*/React.createElement("div", {
-      style: styles$B.editor
+      style: styles$C.editor
     }, /*#__PURE__*/React.createElement(ArticleEditor, this.state)));
   }
 });
-const styles$B = {
+const styles$C = {
   controlBar: {
     marginBottom: 25,
     marginTop: 5
@@ -27017,10 +27018,10 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", {
-      className: css(styles$A.title)
+      className: css(styles$B.title)
     }, "Title:", " ", /*#__PURE__*/React.createElement(TextInput$6, {
       value: this.props.title,
-      className: css(styles$A.input)
+      className: css(styles$B.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -27045,7 +27046,7 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement(InlineIcon$4, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$A.hintsTitle)
+      className: css(styles$B.hintsTitle)
     }, "Hint"), /*#__PURE__*/React.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -27082,7 +27083,7 @@ GradedGroupEditor.defaultProps = {
   images: {},
   hint: null
 };
-const styles$A = StyleSheet.create({
+const styles$B = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -28421,13 +28422,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$z.outerWrapper
+    style: styles$A.outerWrapper
   }, /*#__PURE__*/React.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$z = StyleSheet.create({
+const styles$A = StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29473,16 +29474,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React.createElement("label", {
-    className: css(styles$y.label)
+    className: css(styles$z.label)
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$y.row, style]
+    style: [styles$z.row, style]
   }, labelSide === "start" || /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$y.spaceEnd
+    style: styles$z.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$y.spaceStart
+    style: styles$z.spaceStart
   }, label)));
 };
-const styles$y = StyleSheet.create({
+const styles$z = StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -29559,11 +29560,11 @@ class Spring extends React.Component {
     } = this.props;
     return React.createElement(View, {
       "aria-hidden": "true",
-      style: [styles$x.grow, style]
+      style: [styles$y.grow, style]
     });
   }
 }
-const styles$x = StyleSheet.create({
+const styles$y = StyleSheet.create({
   grow: {
     flexGrow: 1
   }
@@ -29712,17 +29713,17 @@ const LockedFigureSelect = props => {
   } = props;
   const figureTypes = props.showM2Features ? ["point", "line", "vector", "ellipse", "polygon"] : ["point", "line"];
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$w.container
+    style: styles$x.container
   }, /*#__PURE__*/React.createElement(ActionMenu, {
     menuText: "Add locked figure",
-    style: styles$w.addElementSelect
+    style: styles$x.addElementSelect
   }, figureTypes.map(figureType => /*#__PURE__*/React.createElement(ActionItem, {
     key: `${id}-${figureType}`,
     label: figureType,
     onClick: () => onChange(figureType)
   }, figureType))));
 };
-const styles$w = StyleSheet.create({
+const styles$x = StyleSheet.create({
   container: {
     marginTop: spacing.xSmall_8
   },
@@ -29753,19 +29754,19 @@ const AngleInput = props => {
   }
   return /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$v.row
+    style: styles$w.row
   }, "angle (degrees)", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
     value: angleInput,
     onChange: handleAngleChange,
-    style: styles$v.textField
+    style: styles$w.textField
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }));
 };
-const styles$v = StyleSheet.create({
+const styles$w = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29790,6 +29791,12 @@ const CoordinatePairInput = props => {
   const [coordState, setCoordState] = React.useState([
   // Using strings to make it easier to work with the text fields.
   coord[0].toString(), coord[1].toString()]);
+
+  // Update the local state when the props change. (Such as when the graph
+  // type is changed, and the coordinates are reset.)
+  React.useEffect(() => {
+    setCoordState([coord[0].toString(), coord[1].toString()]);
+  }, [coord]);
   function handleCoordChange(newValue, coordIndex) {
     // Update the local state (update the input field value).
     const newCoordState = [...coordState];
@@ -29808,32 +29815,32 @@ const CoordinatePairInput = props => {
     onChange(newCoords);
   }
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$u.row, style]
+    style: [styles$v.row, style]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$u.row
+    style: styles$v.row
   }, labels ? labels[0] : "x coord", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
     value: coordState[0],
     onChange: newValue => handleCoordChange(newValue, 0),
-    style: [styles$u.textField, error ? styles$u.errorField : undefined]
+    style: [styles$v.textField, error ? styles$v.errorField : undefined]
   })), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$u.row
+    style: styles$v.row
   }, labels ? labels[1] : "y coord", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
     value: coordState[1],
     onChange: newValue => handleCoordChange(newValue, 1),
-    style: [styles$u.textField, error ? styles$u.errorField : undefined]
+    style: [styles$v.textField, error ? styles$v.errorField : undefined]
   })));
 };
-const styles$u = StyleSheet.create({
+const styles$v = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29866,14 +29873,14 @@ const PerseusEditorAccordion = props => {
   }, /*#__PURE__*/React.createElement(AccordionSection, {
     expanded: expanded,
     onToggle: onToggle,
-    style: [styles$t.container, containerStyle],
-    headerStyle: styles$t.accordionHeader,
+    style: [styles$u.container, containerStyle],
+    headerStyle: styles$u.accordionHeader,
     header: header
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$t.accordionPanel, panelStyle]
+    style: [styles$u.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$t = StyleSheet.create({
+const styles$u = StyleSheet.create({
   container: {
     backgroundColor: color.fadedBlue8,
     marginTop: spacing.xSmall_8
@@ -29904,13 +29911,13 @@ const ColorSwatch = props => {
     "aria-label":
     // Don't include an aria label for decorative circles.
     !decorative ? `${color$1}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$s.colorSwatch, {
+    style: [styles$t.colorSwatch, {
       border: `4px solid ${lockedFigureColors[color$1]}`,
       backgroundColor: filled ? lockedFigureColors[color$1] : color.white
     }]
   });
 };
-const styles$s = StyleSheet.create({
+const styles$t = StyleSheet.create({
   colorSwatch: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -29929,10 +29936,10 @@ const ColorSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$r.row, style]
+    style: [styles$s.row, style]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$r.row
+    style: styles$s.row
   }, "color", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -29951,7 +29958,7 @@ const ColorSelect = props => {
     })
   }, colorName)))));
 };
-const styles$r = StyleSheet.create({
+const styles$s = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29967,17 +29974,17 @@ const EllipseSwatch = props => {
   } = props;
   return /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$q.container, {
+    style: [styles$r.container, {
       border: `4px ${strokeStyle} ${lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$q.innerCircle, {
+    style: [styles$r.innerCircle, {
       backgroundColor: lockedFigureColors[color],
       opacity: lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$q = StyleSheet.create({
+const styles$r = StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30008,40 +30015,40 @@ const LockedFigureSettingsActions = props => {
     onRemove
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$p.container
+    style: styles$q.container
   }, /*#__PURE__*/React.createElement(Button, {
     startIcon: trashIcon,
     "aria-label": `Delete locked ${figureType}`,
     onClick: onRemove,
     kind: "tertiary",
-    style: styles$p.deleteButton
+    style: styles$q.deleteButton
   }, "Delete"), /*#__PURE__*/React.createElement(Spring, null), props.showM2Features && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDoubleUpIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} to the back`,
     onClick: () => onMove("back"),
-    style: styles$p.iconButton
+    style: styles$q.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretUpIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} backward`,
     onClick: () => onMove("backward"),
-    style: styles$p.iconButton
+    style: styles$q.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDownIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} forward`,
     onClick: () => onMove("forward"),
-    style: styles$p.iconButton
+    style: styles$q.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDoubleDownIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} to the front`,
     onClick: () => onMove("front"),
-    style: styles$p.iconButton
+    style: styles$q.iconButton
   })));
 };
-const styles$p = StyleSheet.create({
+const styles$q = StyleSheet.create({
   container: {
     width: "100%",
     flexDirection: "row",
@@ -30088,7 +30095,7 @@ const LockedEllipseSettings = props => {
     /*#__PURE__*/
     // Summary: Ellipse, center, radius, color (opacity, dashed)
     React.createElement(View, {
-      style: styles$o.row
+      style: styles$p.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, {
@@ -30097,19 +30104,19 @@ const LockedEllipseSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: styles$o.row
+    style: styles$p.row
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: center,
-    style: styles$o.spaceUnder,
+    style: styles$p.spaceUnder,
     onChange: newCoords => onChangeProps({
       center: newCoords
     })
   }), /*#__PURE__*/React.createElement(View, {
-    style: styles$o.spaceUnder
+    style: styles$p.spaceUnder
   }, /*#__PURE__*/React.createElement(InfoTip$d, null, "The coordinates for the center of the ellipse."))), /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: radius,
     labels: ["x radius", "y radius"],
-    style: styles$o.spaceUnder,
+    style: styles$p.spaceUnder,
     onChange: newCoords => onChangeProps({
       radius: newCoords
     })
@@ -30121,7 +30128,7 @@ const LockedEllipseSettings = props => {
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xSmall_8
   }), /*#__PURE__*/React.createElement(View, {
-    style: [styles$o.row, styles$o.spaceUnder]
+    style: [styles$p.row, styles$p.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30129,7 +30136,7 @@ const LockedEllipseSettings = props => {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$o.row
+    style: styles$p.row
   }, "fill", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30146,7 +30153,7 @@ const LockedEllipseSettings = props => {
     label: option
   }, option))))), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$o.row
+    style: styles$p.row
   }, "stroke", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30170,7 +30177,7 @@ const LockedEllipseSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$o = StyleSheet.create({
+const styles$p = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30191,7 +30198,7 @@ const LabeledSwitch = props => {
   const ids = useUniqueIdWithMock();
   const switchId = ids.get("switch");
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$n.row, style]
+    style: [styles$o.row, style]
   }, /*#__PURE__*/React.createElement(Switch, {
     id: switchId,
     checked: checked,
@@ -30203,7 +30210,7 @@ const LabeledSwitch = props => {
     htmlFor: switchId
   }, label));
 };
-const styles$n = StyleSheet.create({
+const styles$o = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30237,13 +30244,13 @@ const DefiningPointSettings = props => {
   return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: expanded,
     onToggle: onToggle,
-    containerStyle: styles$m.container,
-    panelStyle: styles$m.accordionPanel,
+    containerStyle: styles$n.container,
+    panelStyle: styles$n.accordionPanel,
     header:
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React.createElement(View, {
-      style: styles$m.row
+      style: styles$n.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, {
@@ -30253,7 +30260,7 @@ const DefiningPointSettings = props => {
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: coord,
     error: !!error,
-    style: styles$m.spaceUnder,
+    style: styles$n.spaceUnder,
     onChange: newCoords => {
       onChangeProps({
         coord: newCoords
@@ -30262,12 +30269,12 @@ const DefiningPointSettings = props => {
   }), onTogglePoint && /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "show point on graph",
     checked: !!showPoint,
-    style: showPoint && styles$m.spaceUnder,
+    style: showPoint && styles$n.spaceUnder,
     onChange: onTogglePoint
   }), showPoint && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$m.spaceUnder
+    style: styles$n.spaceUnder
   }), /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30278,7 +30285,7 @@ const DefiningPointSettings = props => {
     }
   })));
 };
-const styles$m = StyleSheet.create({
+const styles$n = StyleSheet.create({
   container: {
     marginTop: spacing.xSmall_8,
     marginBottom: 0,
@@ -30305,15 +30312,15 @@ const LineSwatch = props => {
     lineStyle
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$l.container
+    style: styles$m.container
   }, /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, ${lineStyle}`,
-    style: [styles$l.lineSwatch, {
+    style: [styles$m.lineSwatch, {
       border: `5px ${lineStyle} ${lockedFigureColors[color]}`
     }]
   }));
 };
-const styles$l = StyleSheet.create({
+const styles$m = StyleSheet.create({
   container: {
     backgroundColor: color.white,
     justifyContent: "center",
@@ -30367,7 +30374,7 @@ const LockedLineSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$k.row
+      style: styles$l.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, lineLabel), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(LineSwatch, {
@@ -30376,7 +30383,7 @@ const LockedLineSettings = props => {
     }))
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$k.row, styles$k.spaceUnder]
+    style: [styles$l.row, styles$l.spaceUnder]
   }, "kind", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxxSmall_4
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30397,7 +30404,7 @@ const LockedLineSettings = props => {
     value: "segment",
     label: "segment"
   }))), /*#__PURE__*/React.createElement(View, {
-    style: styles$k.row
+    style: styles$l.row
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
@@ -30405,7 +30412,7 @@ const LockedLineSettings = props => {
     size: spacing.small_12
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$k.row
+    style: styles$l.row
   }, "style", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxxSmall_4
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30416,7 +30423,7 @@ const LockedLineSettings = props => {
     // Placeholder is required, but never gets used.
     ,
     placeholder: "",
-    style: styles$k.selectMarginOffset
+    style: styles$l.selectMarginOffset
   }, /*#__PURE__*/React.createElement(OptionItem, {
     value: "solid",
     label: "solid"
@@ -30424,7 +30431,7 @@ const LockedLineSettings = props => {
     value: "dashed",
     label: "dashed"
   })))), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
-    style: styles$k.errorText
+    style: styles$l.errorText
   }, lengthZeroStr), /*#__PURE__*/React.createElement(DefiningPointSettings, _extends({
     label: "Point 1",
     showPoint: showPoint1,
@@ -30450,7 +30457,7 @@ const LockedLineSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$k = StyleSheet.create({
+const styles$l = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30495,7 +30502,7 @@ const LockedPointSettings = props => {
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React.createElement(View, {
-      style: styles$j.row
+      style: styles$k.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Point (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(ColorSwatch, {
@@ -30504,7 +30511,7 @@ const LockedPointSettings = props => {
     }))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: coord,
-    style: styles$j.spaceUnder,
+    style: styles$k.spaceUnder,
     onChange: newCoord => {
       onChangeProps({
         coord: newCoord
@@ -30513,7 +30520,7 @@ const LockedPointSettings = props => {
   }), /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$j.spaceUnder
+    style: styles$k.spaceUnder
   }), /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30529,7 +30536,7 @@ const LockedPointSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$j = StyleSheet.create({
+const styles$k = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30547,17 +30554,17 @@ const PolygonSwatch = props => {
   } = props;
   return /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$i.container, {
+    style: [styles$j.container, {
       border: `4px ${strokeStyle} ${lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$i.innerSquare, {
+    style: [styles$j.innerSquare, {
       backgroundColor: lockedFigureColors[color],
       opacity: lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$i = StyleSheet.create({
+const styles$j = StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30599,7 +30606,7 @@ const LockedPolygonSettings = props => {
     /*#__PURE__*/
     // Summary: Polygon, number of sides, style swatch
     React.createElement(View, {
-      style: styles$h.row
+      style: styles$i.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Polygon, ${points.length} sides`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(PolygonSwatch, {
@@ -30608,7 +30615,7 @@ const LockedPolygonSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$h.row, styles$h.spaceUnder]
+    style: [styles$i.row, styles$i.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30616,7 +30623,7 @@ const LockedPolygonSettings = props => {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$h.row
+    style: styles$i.row
   }, "fill", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30633,7 +30640,7 @@ const LockedPolygonSettings = props => {
     label: option
   }, option))))), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$h.row, styles$h.spaceUnder]
+    style: [styles$i.row, styles$i.spaceUnder]
   }, "stroke", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30656,17 +30663,17 @@ const LockedPolygonSettings = props => {
     onChange: newValue => onChangeProps({
       showVertices: newValue
     }),
-    style: styles$h.spaceUnder
+    style: styles$i.spaceUnder
   }), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     header: /*#__PURE__*/React.createElement(LabelLarge, null, "Points"),
     expanded: true,
-    containerStyle: styles$h.pointAccordionContainer,
-    panelStyle: styles$h.pointAccordionPanel
+    containerStyle: styles$i.pointAccordionContainer,
+    panelStyle: styles$i.pointAccordionPanel
   }, points.map((point, index) => {
     const pointLabel = String.fromCharCode(65 + index);
     return /*#__PURE__*/React.createElement(View, {
       key: `locked-polygon-point-${point[0]}-${point[1]}-index-${index}`,
-      style: [styles$h.row, styles$h.spaceUnder]
+      style: [styles$i.row, styles$i.spaceUnder]
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `${pointLabel}:`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.medium_16
     }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
@@ -30694,7 +30701,7 @@ const LockedPolygonSettings = props => {
           points: newPoints
         });
       },
-      style: styles$h.icon
+      style: styles$i.icon
     }));
   }), /*#__PURE__*/React.createElement(Button, {
     kind: "tertiary",
@@ -30711,7 +30718,7 @@ const LockedPolygonSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$h = StyleSheet.create({
+const styles$i = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30769,7 +30776,7 @@ const LockedVectorSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$g.row
+      style: styles$h.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, lineLabel), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(LineSwatch, {
@@ -30777,19 +30784,19 @@ const LockedVectorSettings = props => {
       lineStyle: "solid"
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$g.row, styles$g.spaceUnder]
+    style: [styles$h.row, styles$h.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
   })), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
-    style: styles$g.errorText
+    style: styles$h.errorText
   }, lengthErrorMessage), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: true // Initial state is expanded
     ,
-    containerStyle: styles$g.container,
-    panelStyle: styles$g.accordionPanel,
+    containerStyle: styles$h.container,
+    panelStyle: styles$h.accordionPanel,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$g.row
+      style: styles$h.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Tail (${tail[0]}, ${tail[1]})`))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: tail,
@@ -30800,10 +30807,10 @@ const LockedVectorSettings = props => {
   })), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: true // Initial state is expanded
     ,
-    containerStyle: styles$g.container,
-    panelStyle: styles$g.accordionPanel,
+    containerStyle: styles$h.container,
+    panelStyle: styles$h.accordionPanel,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$g.row
+      style: styles$h.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Tip (${tip[0]}, ${tip[1]})`))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: tip,
@@ -30818,7 +30825,7 @@ const LockedVectorSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$g = StyleSheet.create({
+const styles$h = StyleSheet.create({
   accordionPanel: {
     paddingBottom: spacing.medium_16
   },
@@ -30987,7 +30994,7 @@ const LockedFiguresSection = props => {
       onRemove: () => removeLockedFigure(index)
     }));
   }), /*#__PURE__*/React.createElement(View, {
-    style: styles$f.buttonContainer
+    style: styles$g.buttonContainer
   }, /*#__PURE__*/React.createElement(LockedFigureSelect, {
     showM2Features: props.showM2Features,
     showM2bFeatures: props.showM2bFeatures,
@@ -30998,10 +31005,10 @@ const LockedFiguresSection = props => {
   }), showExpandButton && /*#__PURE__*/React.createElement(Button, {
     kind: "secondary",
     onClick: () => toggleExpanded(allCollapsed),
-    style: styles$f.button
+    style: styles$g.button
   }, buttonLabel)));
 };
-const styles$f = StyleSheet.create({
+const styles$g = StyleSheet.create({
   buttonContainer: {
     flexDirection: "row",
     alignItems: "center"
@@ -31036,7 +31043,7 @@ const GraphPointsCountSelector = ({
     // Never uses placeholder, always has value
     ,
     placeholder: "",
-    style: styles$e.singleSelectShort
+    style: styles$f.singleSelectShort
   }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React.createElement(OptionItem, {
     key: n,
     value: `${n}`,
@@ -31047,7 +31054,7 @@ const GraphPointsCountSelector = ({
     label: "unlimited"
   })]);
 };
-const styles$e = StyleSheet.create({
+const styles$f = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31060,7 +31067,7 @@ const GraphTypeSelector = props => {
     selectedValue: props.graphType,
     onChange: props.onChange,
     placeholder: "Select a graph type",
-    style: styles$d.singleSelectShort
+    style: styles$e.singleSelectShort
   }, /*#__PURE__*/React.createElement(OptionItem, {
     value: "linear",
     label: "Linear function"
@@ -31093,7 +31100,7 @@ const GraphTypeSelector = props => {
     label: "Angle"
   }));
 };
-const styles$d = StyleSheet.create({
+const styles$e = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31510,10 +31517,10 @@ class InteractiveGraphSettings extends React.Component {
       onChange: this.change
     }))), /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Background image URL:",
-      style: styles$c.resetSpaceTop
+      style: styles$d.resetSpaceTop
     }, /*#__PURE__*/React.createElement("input", {
       type: "text",
-      className: css(styles$c.backgroundUrlInput),
+      className: css(styles$d.backgroundUrlInput),
       ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
@@ -31527,28 +31534,28 @@ class InteractiveGraphSettings extends React.Component {
       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$c.rulerSection
+      style: styles$d.rulerSection
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$c.checkboxRow
+      style: styles$d.checkboxRow
     }, /*#__PURE__*/React.createElement(PropCheckBox$7, {
       label: "Show ruler",
       showRuler: this.props.showRuler,
       onChange: this.change,
-      style: styles$c.resetSpaceTop
+      style: styles$d.resetSpaceTop
     }), /*#__PURE__*/React.createElement(PropCheckBox$7, {
       label: "Show protractor",
       showProtractor: this.props.showProtractor,
       onChange: this.change,
-      style: styles$c.resetSpaceTop
+      style: styles$d.resetSpaceTop
     })), (this.props.showRuler || this.props.showProtractor) && /*#__PURE__*/React.createElement(Banner, {
       layout: "floating",
       text: "The ruler and protractor are not accessible. Please consider an alternate approach.",
       kind: "warning"
     }), this.props.showRuler && /*#__PURE__*/React.createElement(View, {
-      style: styles$c.spaceTop
+      style: styles$d.spaceTop
     }, /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Ruler label:",
-      style: styles$c.resetSpaceTop
+      style: styles$d.resetSpaceTop
     }, /*#__PURE__*/React.createElement(SingleSelect, {
       id: "ruler-label-select",
       selectedValue: this.props.rulerLabel,
@@ -31558,7 +31565,7 @@ class InteractiveGraphSettings extends React.Component {
         });
       },
       placeholder: "None",
-      style: styles$c.singleSelectShort
+      style: styles$d.singleSelectShort
     }, /*#__PURE__*/React.createElement(OptionItem, {
       value: "",
       label: "None",
@@ -31599,7 +31606,7 @@ class InteractiveGraphSettings extends React.Component {
         });
       },
       placeholder: "10",
-      style: styles$c.singleSelectShort
+      style: styles$d.singleSelectShort
     }, [1, 2, 4, 8, 10, 16].map(value => /*#__PURE__*/React.createElement(OptionItem, {
       key: value,
       value: `${value}`,
@@ -31623,7 +31630,7 @@ InteractiveGraphSettings.defaultProps = {
   rulerLabel: "",
   rulerTicks: 10
 };
-const styles$c = StyleSheet.create({
+const styles$d = StyleSheet.create({
   resetSpaceTop: {
     marginTop: 0
   },
@@ -31668,13 +31675,13 @@ const SegmentCountSelector = ({
     const num = +newValue;
     onChange(num);
   },
-  style: styles$b.singleSelectShort
+  style: styles$c.singleSelectShort
 }, _.range(1, 7).map(n => /*#__PURE__*/React.createElement(OptionItem, {
   key: n,
   value: `${n}`,
   label: `${n} segment${n > 1 ? "s" : ""}`
 })));
-const styles$b = StyleSheet.create({
+const styles$c = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31682,6 +31689,77 @@ const styles$b = StyleSheet.create({
   }
 });
 
+const StartCoordSettingsInner = props => {
+  const {
+    type,
+    startCoords,
+    onChange
+  } = props;
+
+  // Check if coords is of type CollinearTuple
+  switch (type) {
+    case "linear":
+    case "ray":
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+        style: styles$b.tile
+      }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 1"), /*#__PURE__*/React.createElement(CoordinatePairInput, {
+        coord: startCoords[0],
+        onChange: value => onChange([value, startCoords[1]])
+      })), /*#__PURE__*/React.createElement(View, {
+        style: styles$b.tile
+      }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 2"), /*#__PURE__*/React.createElement(CoordinatePairInput, {
+        coord: startCoords[1],
+        onChange: value => onChange([startCoords[0], value])
+      })));
+    default:
+      return null;
+  }
+};
+const StartCoordSettings = props => {
+  var _props$startCoords;
+  const {
+    type,
+    range,
+    step,
+    onChange
+  } = props;
+  const [isOpen, setIsOpen] = React.useState(true);
+  if (type !== "linear" && type !== "ray") {
+    return null;
+  }
+  const defaultStartCoords = getLineCoords({
+    type: type
+  }, range, step);
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles$b.container
+  }, /*#__PURE__*/React.createElement(Heading, {
+    title: "Start coordinates",
+    isOpen: isOpen,
+    onToggle: () => setIsOpen(!isOpen)
+  }), isOpen && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartCoordSettingsInner, {
+    type: type,
+    startCoords: (_props$startCoords = props.startCoords) != null ? _props$startCoords : defaultStartCoords,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), /*#__PURE__*/React.createElement(Button, {
+    startIcon: arrowCounterClockwise,
+    kind: "tertiary",
+    size: "small",
+    onClick: () => {
+      onChange(defaultStartCoords);
+    }
+  }, "Use default start coords")));
+};
+const styles$b = StyleSheet.create({
+  tile: {
+    backgroundColor: color.fadedBlue8,
+    marginTop: spacing.xSmall_8,
+    padding: spacing.small_12,
+    borderRadius: spacing.xSmall_8
+  }
+});
+
 const {
   InfoTip: InfoTip$b
 } = components;
@@ -31729,6 +31807,18 @@ class InteractiveGraphEditor extends React.Component {
         correct: correct
       });
     };
+    this.changeStartCoords = coords => {
+      var _this$props$graph, _this$props$graph2;
+      if (((_this$props$graph = this.props.graph) == null ? void 0 : _this$props$graph.type) !== "linear" && ((_this$props$graph2 = this.props.graph) == null ? void 0 : _this$props$graph2.type) !== "ray") {
+        return;
+      }
+      const graph = _extends({}, this.props.graph, {
+        startCoords: coords
+      });
+      this.props.onChange({
+        graph: graph
+      });
+    };
     this.getSaveWarnings = () => {
       const issues = [];
 
@@ -31747,7 +31837,7 @@ class InteractiveGraphEditor extends React.Component {
     DeprecationMixin.UNSAFE_componentWillMount.call(this);
   }
   render() {
-    var _this$props$graph$typ, _this$props$graph, _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$apiOption, _this$props$apiOption2, _this$props$apiOption3;
+    var _this$props$graph$typ, _this$props$graph3, _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$graph6, _this$props$graph7, _this$props$apiOption, _this$props$apiOption2, _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);
@@ -31779,13 +31869,14 @@ class InteractiveGraphEditor extends React.Component {
           let correct = this.props.correct;
           // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
           if (correct.type === newProps.graph.type) {
-            correct = _.extend({}, correct, newProps.graph);
+            correct = _extends({}, correct, newProps.graph);
           } else {
             // Clear options from previous graph
             correct = newProps.graph;
           }
           this.props.onChange({
-            correct: correct
+            correct: correct,
+            graph: this.props.graph
           });
         }
       };
@@ -31813,7 +31904,7 @@ class InteractiveGraphEditor extends React.Component {
     return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Type of Graph:"
     }, /*#__PURE__*/React.createElement(GraphTypeSelector, {
-      graphType: (_this$props$graph$typ = (_this$props$graph = this.props.graph) == null ? void 0 : _this$props$graph.type) != null ? _this$props$graph$typ : InteractiveGraph.defaultProps.graph.type,
+      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,
       onChange: type => {
         this.props.onChange({
           graph: {
@@ -31899,8 +31990,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$graph2;
-        if (((_this$props$graph2 = this.props.graph) == null ? void 0 : _this$props$graph2.type) === "polygon") {
+        var _this$props$graph4;
+        if (((_this$props$graph4 = this.props.graph) == null ? void 0 : _this$props$graph4.type) === "polygon") {
           this.props.onChange({
             correct: _extends({}, this.props.correct, {
               showAngles: !this.props.correct.showAngles
@@ -31919,8 +32010,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$graph3;
-        if (((_this$props$graph3 = this.props.graph) == null ? void 0 : _this$props$graph3.type) === "polygon") {
+        var _this$props$graph5;
+        if (((_this$props$graph5 = this.props.graph) == null ? void 0 : _this$props$graph5.type) === "polygon") {
           this.props.onChange({
             correct: _extends({}, this.props.correct, {
               showSides: !this.props.correct.showSides
@@ -31948,6 +32039,10 @@ class InteractiveGraphEditor extends React.Component {
           }
         });
       }
+    })), (((_this$props$graph6 = this.props.graph) == null ? void 0 : _this$props$graph6.type) === "linear" || ((_this$props$graph7 = this.props.graph) == null ? void 0 : _this$props$graph7.type) === "ray") && ((_this$props$apiOption = this.props.apiOptions.flags) == null || (_this$props$apiOption = _this$props$apiOption.mafs) == null ? void 0 : _this$props$apiOption["start-coords-ui"]) && /*#__PURE__*/React.createElement(StartCoordSettings, _extends({}, this.props.graph, {
+      range: this.props.range,
+      step: this.props.step,
+      onChange: this.changeStartCoords
     })), /*#__PURE__*/React.createElement(InteractiveGraphSettings, {
       box: getInteractiveBoxFromSizeClass(sizeClass),
       range: this.props.range,
@@ -32014,24 +32109,30 @@ class InteractiveGraphEditor extends React.Component {
     }, equationString), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."))), graph,
     // Only show the "Add locked figure" dropdown if the graph
     // is using Mafs.
-    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(LockedFiguresSection, {
-      showM2Features: (_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["interactive-graph-locked-features-m2"],
-      showM2bFeatures: (_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-m2b"],
+    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, {
+      showM2Features: (_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-m2"],
+      showM2bFeatures: (_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-m2b"],
       figures: this.props.lockedFigures,
       onChange: this.props.onChange
     }));
   }
+  // serialize() is what makes copy/paste work. All the properties included
+  // in the serialization json are included when, for example, a graph
+  // is copied from the question editor and pasted into the hint editor
+  // (double brackets in the markdown).
   serialize() {
     const json = _.pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showRuler", "showTooltips", "rulerLabel", "rulerTicks", "range", "gridStep", "snapStep", "lockedFigures");
 
     // eslint-disable-next-line react/no-string-refs
     const graph = this.refs.graph;
     if (graph) {
+      var _this$props$graph8;
       // @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
+          type: correct.type,
+          startCoords: (_this$props$graph8 = this.props.graph) == null ? void 0 : _this$props$graph8.startCoords
         },
         correct: correct
       });
@@ -34471,9 +34572,14 @@ class NumericInputEditor extends React.Component {
       onChange: this.props.onChange
     }), /*#__PURE__*/React.createElement(InfoTip$7, null, /*#__PURE__*/React.createElement("p", null, "A coefficient style number allows the student to use - for -1 and an empty string to mean 1."))));
     const addAnswerButton = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
-      href: "javascript:void(0)",
+      href: "#",
       className: "simple-button orange",
-      onClick: () => this.addAnswer(),
+      onClick: e => {
+        // preventDefault ensures that href="#"
+        // doesn't scroll to the top of the page
+        e.preventDefault();
+        this.addAnswer();
+      },
       onKeyDown: e => this.onSpace(e, this.addAnswer)
     }, /*#__PURE__*/React.createElement("span", null, "Add new answer")));
     const instructions = {
@@ -34555,21 +34661,36 @@ class NumericInputEditor extends React.Component {
       })) : null, /*#__PURE__*/React.createElement("div", {
         className: "value-divider"
       }), /*#__PURE__*/React.createElement("a", {
-        href: "javascript:void(0)",
+        href: "#",
         className: "answer-status " + answer.status,
-        onClick: () => this.onStatusChange(i),
+        onClick: e => {
+          // preventDefault ensures that href="#"
+          // doesn't scroll to the top of the page
+          e.preventDefault();
+          this.onStatusChange(i);
+        },
         onKeyDown: e => this.onSpace(e, this.onStatusChange)
       }, answer.status), /*#__PURE__*/React.createElement("a", {
-        href: "javascript:void(0)",
+        href: "#",
         className: "answer-trash",
         "aria-label": "Delete answer",
-        onClick: () => this.onTrashAnswer(i),
+        onClick: e => {
+          // preventDefault ensures that href="#"
+          // doesn't scroll to the top of the page
+          e.preventDefault();
+          this.onTrashAnswer(i);
+        },
         onKeyDown: e => this.onSpace(e, this.onTrashAnswer)
       }, /*#__PURE__*/React.createElement(InlineIcon$2, iconTrash$1)), /*#__PURE__*/React.createElement("a", {
-        href: "javascript:void(0)",
+        href: "#",
         className: "options-toggle",
         "aria-label": "Toggle options",
-        onClick: () => this.onToggleOptions(i),
+        onClick: e => {
+          // preventDefault ensures that href="#"
+          // doesn't scroll to the top of the page
+          e.preventDefault();
+          this.onToggleOptions(i);
+        },
         onKeyDown: e => this.onSpace(e, this.onToggleOptions)
       }, /*#__PURE__*/React.createElement(InlineIcon$2, iconGear))), /*#__PURE__*/React.createElement("div", {
         className: "input-answer-editor-message"