@khanacademy/perseus-editor 8.0.0 → 8.2.0

package/dist/index.js

@@ -36,6 +36,7 @@ var Switch = require('@khanacademy/wonder-blocks-switch');
 var minusCircle = require('@phosphor-icons/core/regular/minus-circle.svg');
 var plusCircle = require('@phosphor-icons/core/regular/plus-circle.svg');
 var Banner = require('@khanacademy/wonder-blocks-banner');
+var arrowCounterClockwise = require('@phosphor-icons/core/bold/arrow-counter-clockwise-bold.svg');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -78,10 +79,11 @@ var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var minusCircle__default = /*#__PURE__*/_interopDefaultLegacy(minusCircle);
 var plusCircle__default = /*#__PURE__*/_interopDefaultLegacy(plusCircle);
 var Banner__default = /*#__PURE__*/_interopDefaultLegacy(Banner);
+var arrowCounterClockwise__default = /*#__PURE__*/_interopDefaultLegacy(arrowCounterClockwise);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "8.0.0";
+const libVersion = "8.2.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -276,13 +278,13 @@ class SectionControlButton extends React__namespace.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$G.button
+      style: styles$H.button
     }, _ref => {
       return /*#__PURE__*/React__namespace.createElement(InlineIcon$b, icon);
     });
   }
 }
-const styles$G = aphrodite.StyleSheet.create({
+const styles$H = aphrodite.StyleSheet.create({
   button: {
     backgroundColor: wonderBlocksTokens.color.gold,
     margin: 2,
@@ -20787,13 +20789,13 @@ class WidgetSelect extends React__namespace.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__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
     icon: caretRight__default["default"],
     style: iconStyle
   });
 }
-const styles$F = aphrodite.StyleSheet.create({
+const styles$G = aphrodite.StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20823,16 +20825,16 @@ class TexErrorView extends React__namespace.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$E.errorContainer
+      style: styles$F.errorContainer
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$E.title,
+      style: styles$F.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React__namespace.createElement(ToggleableCaret, {
       isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$E.error,
+      style: styles$F.error,
       key: index
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: {
@@ -20841,7 +20843,7 @@ class TexErrorView extends React__namespace.Component {
     }, e.math), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, e.message))));
   }
 }
-const styles$E = aphrodite.StyleSheet.create({
+const styles$F = aphrodite.StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -24591,12 +24593,12 @@ class SimpleButton extends React__namespace.Component {
       ...otherProps
     } = this.props;
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
-      className: aphrodite.css(styles$D.baseButton, color === "green" && styles$D.green, color === "orange" && styles$D.orange),
+      className: aphrodite.css(styles$E.baseButton, color === "green" && styles$E.green, color === "orange" && styles$E.orange),
       onClick: onClick
     }, otherProps), children);
   }
 }
-const styles$D = aphrodite.StyleSheet.create({
+const styles$E = aphrodite.StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24809,23 +24811,23 @@ const LeafContainer = _ref2 => {
   } = _ref2;
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$C.containerHeader)
+    className: aphrodite.css(styles$D.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$C.containerTitle)
+    className: aphrodite.css(styles$D.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$C.container)
+    className: aphrodite.css(styles$D.container)
   }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$C.row, styles$C.rowHeading)
+    className: aphrodite.css(styles$D.row, styles$D.rowHeading)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$C.columnLeft)
+    className: aphrodite.css(styles$D.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: "pod-title " + aphrodite.css(styles$C.containerHeader)
+    className: "pod-title " + aphrodite.css(styles$D.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$C.containerTitle)
+    className: aphrodite.css(styles$D.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$C.columnRight)
+    className: aphrodite.css(styles$D.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24838,11 +24840,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$C.container)
+    className: aphrodite.css(styles$D.container)
   }, controls && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$C.columnLeft, styles$C.containerHeader)
+    className: aphrodite.css(styles$D.columnLeft, styles$D.containerHeader)
   }, controls), /*#__PURE__*/React__namespace.createElement("div", null, children), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$C.columnLeft)
+    className: aphrodite.css(styles$D.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24856,28 +24858,28 @@ const ObjectContainer = _ref3 => {
     path
   } = _ref3;
   const headingEditor = /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$C.containerHeader)
+    className: aphrodite.css(styles$D.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$C.containerTitle)
+    className: aphrodite.css(styles$D.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$C.containerHeader, styles$C.previewCollectionHeader)
+    className: aphrodite.css(styles$D.containerHeader, styles$D.previewCollectionHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$C.containerTitle)
+    className: aphrodite.css(styles$D.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$C.container)
+    className: aphrodite.css(styles$D.container)
   }, hasBothHeadings && /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$C.row)
+    className: aphrodite.css(styles$D.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$C.columnLeft)
+    className: aphrodite.css(styles$D.columnLeft)
   }, headingEditor), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$C.columnRight)
+    className: aphrodite.css(styles$D.columnRight)
   }, headingPreview)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(path.length > 0 && styles$C.contentIndent)
+    className: aphrodite.css(path.length > 0 && styles$D.contentIndent)
   }, children));
 };
 
@@ -24997,11 +24999,11 @@ const ItemNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$C.row)
+    className: aphrodite.css(styles$D.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$C.columnLeft)
+    className: aphrodite.css(styles$D.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$C.sticky)
+    className: aphrodite.css(sticky && styles$D.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25009,9 +25011,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$C.columnRight)
+    className: aphrodite.css(styles$D.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$C.sticky)
+    className: aphrodite.css(sticky && styles$D.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25027,13 +25029,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$C.row)
+    className: aphrodite.css(styles$D.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$C.columnLeft)
+    className: aphrodite.css(styles$D.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$C.sticky)
+    className: aphrodite.css(sticky && styles$D.sticky)
   }, /*#__PURE__*/React__namespace.createElement(HintEditor, _extends({}, data, {
-    className: aphrodite.css(styles$C.hintEditor),
+    className: aphrodite.css(styles$D.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25048,9 +25050,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$C.columnRight)
+    className: aphrodite.css(styles$D.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$C.sticky)
+    className: aphrodite.css(sticky && styles$D.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25067,9 +25069,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$C.columnLeft)
+    className: aphrodite.css(styles$D.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$C.tagsEditor)
+    className: aphrodite.css(styles$D.tagsEditor)
   }, /*#__PURE__*/React__namespace.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25100,23 +25102,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementUp",
-      className: aphrodite.css(styles$C.control)
+      className: aphrodite.css(styles$D.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$C.verticalFlip)
+      className: aphrodite.css(styles$D.verticalFlip)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementDown",
-      className: aphrodite.css(styles$C.control)
+      className: aphrodite.css(styles$D.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown))), /*#__PURE__*/React__namespace.createElement("div", {
       key: "removeArrayElement",
-      className: aphrodite.css(styles$C.control)
+      className: aphrodite.css(styles$D.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25124,7 +25126,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconTrash$4)))];
     return /*#__PURE__*/React__namespace.createElement("div", {
       key: i,
-      className: aphrodite.css(styles$C.arrayElement, !elementIsLeaf && styles$C.arrayElementAndNotLeaf)
+      className: aphrodite.css(styles$D.arrayElement, !elementIsLeaf && styles$D.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25150,7 +25152,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__namespace.createElement("div", {
     key: subkey,
-    className: aphrodite.css(styles$C.objectElement)
+    className: aphrodite.css(styles$D.objectElement)
   }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25320,7 +25322,7 @@ class MultiRendererEditor extends React__namespace.Component {
     }, this._renderContent());
   }
 }
-const styles$C = aphrodite.StyleSheet.create({
+const styles$D = aphrodite.StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25472,47 +25474,47 @@ const StatefulArticleEditor = createReactClass__default["default"]({
       screen
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
-      style: styles$B.controlBar
+      style: styles$C.controlBar
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$B.controls
+      style: styles$C.controls
     }, "Mode:", " ", /*#__PURE__*/React__namespace.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__namespace.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__namespace.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__namespace.createElement("span", {
-      style: styles$B.controls
+      style: styles$C.controls
     }, "Screen:", " ", /*#__PURE__*/React__namespace.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__namespace.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__namespace.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__namespace.createElement("div", {
-      style: styles$B.editor
+      style: styles$C.editor
     }, /*#__PURE__*/React__namespace.createElement(ArticleEditor, this.state)));
   }
 });
-const styles$B = {
+const styles$C = {
   controlBar: {
     marginBottom: 25,
     marginTop: 5
@@ -27051,10 +27053,10 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("label", {
-      className: aphrodite.css(styles$A.title)
+      className: aphrodite.css(styles$B.title)
     }, "Title:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$6, {
       value: this.props.title,
-      className: aphrodite.css(styles$A.input)
+      className: aphrodite.css(styles$B.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -27079,7 +27081,7 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$A.hintsTitle)
+      className: aphrodite.css(styles$B.hintsTitle)
     }, "Hint"), /*#__PURE__*/React__namespace.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -27111,7 +27113,7 @@ class GradedGroupEditor extends React__namespace.Component {
     };
   };
 }
-const styles$A = aphrodite.StyleSheet.create({
+const styles$B = aphrodite.StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -28482,13 +28484,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$z.outerWrapper
+    style: styles$A.outerWrapper
   }, /*#__PURE__*/React__namespace.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$z = aphrodite.StyleSheet.create({
+const styles$A = aphrodite.StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29558,16 +29560,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React__namespace.createElement("label", {
-    className: aphrodite.css(styles$y.label)
+    className: aphrodite.css(styles$z.label)
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$y.row, style]
+    style: [styles$z.row, style]
   }, labelSide === "start" || /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$y.spaceEnd
+    style: styles$z.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$y.spaceStart
+    style: styles$z.spaceStart
   }, label)));
 };
-const styles$y = aphrodite.StyleSheet.create({
+const styles$z = aphrodite.StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -29644,11 +29646,11 @@ class Spring extends React__namespace.Component {
     } = this.props;
     return React__namespace.createElement(wonderBlocksCore.View, {
       "aria-hidden": "true",
-      style: [styles$x.grow, style]
+      style: [styles$y.grow, style]
     });
   }
 }
-const styles$x = aphrodite.StyleSheet.create({
+const styles$y = aphrodite.StyleSheet.create({
   grow: {
     flexGrow: 1
   }
@@ -29677,6 +29679,39 @@ const strutStyle = size => {
   };
 };
 
+function Heading(_ref) {
+  let {
+    title,
+    isOpen,
+    isCollapsible,
+    onToggle
+  } = _ref;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      backgroundColor: wonderBlocksTokens.color.offBlack8,
+      padding: wonderBlocksTokens.spacing.xSmall_8,
+      marginTop: wonderBlocksTokens.spacing.small_12,
+      // NOTE(jeremy): This is the inverse of the @editorPadding CSS
+      // variable found in perseus-editor.less. For now, it must
+      // match otherwise there's a gap from this header to the edge
+      // of the editor borders.
+      marginInline: -10,
+      cursor: isCollapsible ? "pointer" : "default",
+      userSelect: "none"
+    },
+    onClick: () => isCollapsible && onToggle?.(!isOpen)
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
+    style: {
+      fontSize: 14,
+      fontWeight: 600
+    }
+  }, title), isCollapsible && /*#__PURE__*/React__namespace.createElement(ToggleableCaret, {
+    isExpanded: isOpen
+  }));
+}
+
 function focusWithChromeStickyFocusBugWorkaround(element) {
   // NOTE(marksandstrom) Chrome sticky focus bug.
   //
@@ -29798,17 +29833,17 @@ const LockedFigureSelect = props => {
   } = props;
   const figureTypes = props.showM2Features ? ["point", "line", "vector", "ellipse", "polygon"] : ["point", "line"];
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$w.container
+    style: styles$x.container
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionMenu, {
     menuText: "Add locked figure",
-    style: styles$w.addElementSelect
+    style: styles$x.addElementSelect
   }, figureTypes.map(figureType => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionItem, {
     key: `${id}-${figureType}`,
     label: figureType,
     onClick: () => onChange(figureType)
   }, figureType))));
 };
-const styles$w = aphrodite.StyleSheet.create({
+const styles$x = aphrodite.StyleSheet.create({
   container: {
     marginTop: wonderBlocksTokens.spacing.xSmall_8
   },
@@ -29839,19 +29874,19 @@ const AngleInput = props => {
   }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$v.row
+    style: styles$w.row
   }, "angle (degrees)", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     type: "number",
     value: angleInput,
     onChange: handleAngleChange,
-    style: styles$v.textField
+    style: styles$w.textField
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }));
 };
-const styles$v = aphrodite.StyleSheet.create({
+const styles$w = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29876,6 +29911,12 @@ const CoordinatePairInput = props => {
   const [coordState, setCoordState] = React__namespace.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__namespace.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];
@@ -29894,32 +29935,32 @@ const CoordinatePairInput = props => {
     onChange(newCoords);
   }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$u.row, style]
+    style: [styles$v.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$u.row
+    style: styles$v.row
   }, labels ? labels[0] : "x coord", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.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__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$u.row
+    style: styles$v.row
   }, labels ? labels[1] : "y coord", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.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 = aphrodite.StyleSheet.create({
+const styles$v = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29952,14 +29993,14 @@ const PerseusEditorAccordion = props => {
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksAccordion.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__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$t.accordionPanel, panelStyle]
+    style: [styles$u.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$t = aphrodite.StyleSheet.create({
+const styles$u = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: wonderBlocksTokens.color.fadedBlue8,
     marginTop: wonderBlocksTokens.spacing.xSmall_8
@@ -29990,13 +30031,13 @@ const ColorSwatch = props => {
     "aria-label":
     // Don't include an aria label for decorative circles.
     !decorative ? `${color}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$s.colorSwatch, {
+    style: [styles$t.colorSwatch, {
       border: `4px solid ${perseus.lockedFigureColors[color]}`,
       backgroundColor: filled ? perseus.lockedFigureColors[color] : wonderBlocksTokens.color.white
     }]
   });
 };
-const styles$s = aphrodite.StyleSheet.create({
+const styles$t = aphrodite.StyleSheet.create({
   colorSwatch: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30015,10 +30056,10 @@ const ColorSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$r.row, style]
+    style: [styles$s.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$r.row
+    style: styles$s.row
   }, "color", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30037,7 +30078,7 @@ const ColorSelect = props => {
     })
   }, colorName)))));
 };
-const styles$r = aphrodite.StyleSheet.create({
+const styles$s = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30053,17 +30094,17 @@ const EllipseSwatch = props => {
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$q.container, {
+    style: [styles$r.container, {
       border: `4px ${strokeStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$q.innerCircle, {
+    style: [styles$r.innerCircle, {
       backgroundColor: perseus.lockedFigureColors[color],
       opacity: perseus.lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$q = aphrodite.StyleSheet.create({
+const styles$r = aphrodite.StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30094,40 +30135,40 @@ const LockedFigureSettingsActions = props => {
     onRemove
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$p.container
+    style: styles$q.container
   }, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     startIcon: trashIcon__default["default"],
     "aria-label": `Delete locked ${figureType}`,
     onClick: onRemove,
     kind: "tertiary",
-    style: styles$p.deleteButton
+    style: styles$q.deleteButton
   }, "Delete"), /*#__PURE__*/React__namespace.createElement(Spring, null), props.showM2Features && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretDoubleUpIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} to the back`,
     onClick: () => onMove("back"),
-    style: styles$p.iconButton
+    style: styles$q.iconButton
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretUpIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} backward`,
     onClick: () => onMove("backward"),
-    style: styles$p.iconButton
+    style: styles$q.iconButton
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretDownIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} forward`,
     onClick: () => onMove("forward"),
-    style: styles$p.iconButton
+    style: styles$q.iconButton
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretDoubleDownIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} to the front`,
     onClick: () => onMove("front"),
-    style: styles$p.iconButton
+    style: styles$q.iconButton
   })));
 };
-const styles$p = aphrodite.StyleSheet.create({
+const styles$q = aphrodite.StyleSheet.create({
   container: {
     width: "100%",
     flexDirection: "row",
@@ -30174,7 +30215,7 @@ const LockedEllipseSettings = props => {
     /*#__PURE__*/
     // Summary: Ellipse, center, radius, color (opacity, dashed)
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$o.row
+      style: styles$p.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Ellipse (${center[0]}, ${center[1]}), radius ${radius[0]}, ${radius[1]}`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(EllipseSwatch, {
@@ -30183,19 +30224,19 @@ const LockedEllipseSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$o.row
+    style: styles$p.row
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: center,
-    style: styles$o.spaceUnder,
+    style: styles$p.spaceUnder,
     onChange: newCoords => onChangeProps({
       center: newCoords
     })
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$o.spaceUnder
+    style: styles$p.spaceUnder
   }, /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, "The coordinates for the center of the ellipse."))), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: radius,
     labels: ["x radius", "y radius"],
-    style: styles$o.spaceUnder,
+    style: styles$p.spaceUnder,
     onChange: newCoords => onChangeProps({
       radius: newCoords
     })
@@ -30207,7 +30248,7 @@ const LockedEllipseSettings = props => {
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xSmall_8
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$o.row, styles$o.spaceUnder]
+    style: [styles$p.row, styles$p.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30215,7 +30256,7 @@ const LockedEllipseSettings = props => {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$o.row
+    style: styles$p.row
   }, "fill", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30232,7 +30273,7 @@ const LockedEllipseSettings = props => {
     label: option
   }, option))))), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$o.row
+    style: styles$p.row
   }, "stroke", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30256,7 +30297,7 @@ const LockedEllipseSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$o = aphrodite.StyleSheet.create({
+const styles$p = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30277,7 +30318,7 @@ const LabeledSwitch = props => {
   const ids = wonderBlocksCore.useUniqueIdWithMock();
   const switchId = ids.get("switch");
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$n.row, style]
+    style: [styles$o.row, style]
   }, /*#__PURE__*/React__namespace.createElement(Switch__default["default"], {
     id: switchId,
     checked: checked,
@@ -30289,7 +30330,7 @@ const LabeledSwitch = props => {
     htmlFor: switchId
   }, label));
 };
-const styles$n = aphrodite.StyleSheet.create({
+const styles$o = aphrodite.StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30323,13 +30364,13 @@ const DefiningPointSettings = props => {
   return /*#__PURE__*/React__namespace.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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$m.row
+      style: styles$n.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `${label || "Point"} (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), showPoint && /*#__PURE__*/React__namespace.createElement(ColorSwatch, {
@@ -30339,7 +30380,7 @@ const DefiningPointSettings = props => {
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: coord,
     error: !!error,
-    style: styles$m.spaceUnder,
+    style: styles$n.spaceUnder,
     onChange: newCoords => {
       onChangeProps({
         coord: newCoords
@@ -30348,12 +30389,12 @@ const DefiningPointSettings = props => {
   }), onTogglePoint && /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "show point on graph",
     checked: !!showPoint,
-    style: showPoint && styles$m.spaceUnder,
+    style: showPoint && styles$n.spaceUnder,
     onChange: onTogglePoint
   }), showPoint && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$m.spaceUnder
+    style: styles$n.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30364,7 +30405,7 @@ const DefiningPointSettings = props => {
     }
   })));
 };
-const styles$m = aphrodite.StyleSheet.create({
+const styles$n = aphrodite.StyleSheet.create({
   container: {
     marginTop: wonderBlocksTokens.spacing.xSmall_8,
     marginBottom: 0,
@@ -30391,15 +30432,15 @@ const LineSwatch = props => {
     lineStyle
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$l.container
+    style: styles$m.container
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, ${lineStyle}`,
-    style: [styles$l.lineSwatch, {
+    style: [styles$m.lineSwatch, {
       border: `5px ${lineStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }));
 };
-const styles$l = aphrodite.StyleSheet.create({
+const styles$m = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: wonderBlocksTokens.color.white,
     justifyContent: "center",
@@ -30458,7 +30499,7 @@ const LockedLineSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$k.row
+      style: styles$l.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
@@ -30467,7 +30508,7 @@ const LockedLineSettings = props => {
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$k.row, styles$k.spaceUnder]
+    style: [styles$l.row, styles$l.spaceUnder]
   }, "kind", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxxSmall_4
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30488,7 +30529,7 @@ const LockedLineSettings = props => {
     value: "segment",
     label: "segment"
   }))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$k.row
+    style: styles$l.row
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
@@ -30496,7 +30537,7 @@ const LockedLineSettings = props => {
     size: wonderBlocksTokens.spacing.small_12
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$k.row
+    style: styles$l.row
   }, "style", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxxSmall_4
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30507,7 +30548,7 @@ const LockedLineSettings = props => {
     // Placeholder is required, but never gets used.
     ,
     placeholder: "",
-    style: styles$k.selectMarginOffset
+    style: styles$l.selectMarginOffset
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "solid",
     label: "solid"
@@ -30515,7 +30556,7 @@ const LockedLineSettings = props => {
     value: "dashed",
     label: "dashed"
   })))), isInvalid && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    style: styles$k.errorText
+    style: styles$l.errorText
   }, lengthZeroStr), /*#__PURE__*/React__namespace.createElement(DefiningPointSettings, _extends({
     label: "Point 1",
     showPoint: showPoint1,
@@ -30541,7 +30582,7 @@ const LockedLineSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$k = aphrodite.StyleSheet.create({
+const styles$l = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30586,7 +30627,7 @@ const LockedPointSettings = props => {
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$j.row
+      style: styles$k.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Point (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(ColorSwatch, {
@@ -30595,7 +30636,7 @@ const LockedPointSettings = props => {
     }))
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: coord,
-    style: styles$j.spaceUnder,
+    style: styles$k.spaceUnder,
     onChange: newCoord => {
       onChangeProps({
         coord: newCoord
@@ -30604,7 +30645,7 @@ const LockedPointSettings = props => {
   }), /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$j.spaceUnder
+    style: styles$k.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30620,7 +30661,7 @@ const LockedPointSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$j = aphrodite.StyleSheet.create({
+const styles$k = aphrodite.StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30638,17 +30679,17 @@ const PolygonSwatch = props => {
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$i.container, {
+    style: [styles$j.container, {
       border: `4px ${strokeStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$i.innerSquare, {
+    style: [styles$j.innerSquare, {
       backgroundColor: perseus.lockedFigureColors[color],
       opacity: perseus.lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$i = aphrodite.StyleSheet.create({
+const styles$j = aphrodite.StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30690,7 +30731,7 @@ const LockedPolygonSettings = props => {
     /*#__PURE__*/
     // Summary: Polygon, number of sides, style swatch
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$h.row
+      style: styles$i.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Polygon, ${points.length} sides`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(PolygonSwatch, {
@@ -30699,7 +30740,7 @@ const LockedPolygonSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$h.row, styles$h.spaceUnder]
+    style: [styles$i.row, styles$i.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30707,7 +30748,7 @@ const LockedPolygonSettings = props => {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$h.row
+    style: styles$i.row
   }, "fill", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30724,7 +30765,7 @@ const LockedPolygonSettings = props => {
     label: option
   }, option))))), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$h.row, styles$h.spaceUnder]
+    style: [styles$i.row, styles$i.spaceUnder]
   }, "stroke", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30747,17 +30788,17 @@ const LockedPolygonSettings = props => {
     onChange: newValue => onChangeProps({
       showVertices: newValue
     }),
-    style: styles$h.spaceUnder
+    style: styles$i.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.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__namespace.createElement(wonderBlocksCore.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__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `${pointLabel}:`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.medium_16
     }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
@@ -30785,7 +30826,7 @@ const LockedPolygonSettings = props => {
           points: newPoints
         });
       },
-      style: styles$h.icon
+      style: styles$i.icon
     }));
   }), /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     kind: "tertiary",
@@ -30802,7 +30843,7 @@ const LockedPolygonSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$h = aphrodite.StyleSheet.create({
+const styles$i = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30860,7 +30901,7 @@ const LockedVectorSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$g.row
+      style: styles$h.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
@@ -30868,19 +30909,19 @@ const LockedVectorSettings = props => {
       lineStyle: "solid"
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$g.row, styles$g.spaceUnder]
+    style: [styles$h.row, styles$h.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
   })), isInvalid && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    style: styles$g.errorText
+    style: styles$h.errorText
   }, lengthErrorMessage), /*#__PURE__*/React__namespace.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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$g.row
+      style: styles$h.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Tail (${tail[0]}, ${tail[1]})`))
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: tail,
@@ -30891,10 +30932,10 @@ const LockedVectorSettings = props => {
   })), /*#__PURE__*/React__namespace.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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$g.row
+      style: styles$h.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Tip (${tip[0]}, ${tip[1]})`))
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: tip,
@@ -30909,7 +30950,7 @@ const LockedVectorSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$g = aphrodite.StyleSheet.create({
+const styles$h = aphrodite.StyleSheet.create({
   accordionPanel: {
     paddingBottom: wonderBlocksTokens.spacing.medium_16
   },
@@ -30968,6 +31009,7 @@ const LockedFiguresSection = props => {
   // expand/collapse all button. Set the whole array to false initially.
   const collapsedStateArray = Array((props.figures ?? []).length).fill(false);
   const [expandedStates, setExpandedStates] = React__namespace.useState(collapsedStateArray);
+  const [isExpanded, setIsExpanded] = React__namespace.useState(true);
   const uniqueId = wonderBlocksCore.useUniqueIdWithMock().get("locked-figures-section");
   const {
     figures,
@@ -31057,7 +31099,12 @@ const LockedFiguresSection = props => {
   const allCollapsed = expandedStates.every(value => !value);
   const buttonLabel = allCollapsed ? "Expand all" : "Collapse all";
   const showExpandButton = !!figures?.length;
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, figures?.map((figure, index) => {
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Heading, {
+    title: "Locked Figures",
+    isOpen: isExpanded,
+    onToggle: () => setIsExpanded(!isExpanded),
+    isCollapsible: true
+  }), isExpanded && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, figures?.map((figure, index) => {
     if (figure.type === "function") {
       // TODO(LEMS-1947): Add locked function settings.
       // Remove this block once function locked figure settings are
@@ -31080,7 +31127,7 @@ const LockedFiguresSection = props => {
       onRemove: () => removeLockedFigure(index)
     }));
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$f.buttonContainer
+    style: styles$g.buttonContainer
   }, /*#__PURE__*/React__namespace.createElement(LockedFigureSelect, {
     showM2Features: props.showM2Features,
     showM2bFeatures: props.showM2bFeatures,
@@ -31091,10 +31138,10 @@ const LockedFiguresSection = props => {
   }), showExpandButton && /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     kind: "secondary",
     onClick: () => toggleExpanded(allCollapsed),
-    style: styles$f.button
-  }, buttonLabel)));
+    style: styles$g.button
+  }, buttonLabel))));
 };
-const styles$f = aphrodite.StyleSheet.create({
+const styles$g = aphrodite.StyleSheet.create({
   buttonContainer: {
     flexDirection: "row",
     alignItems: "center"
@@ -31130,7 +31177,7 @@ const GraphPointsCountSelector = _ref => {
     // Never uses placeholder, always has value
     ,
     placeholder: "",
-    style: styles$e.singleSelectShort
+    style: styles$f.singleSelectShort
   }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     key: n,
     value: `${n}`,
@@ -31141,7 +31188,7 @@ const GraphPointsCountSelector = _ref => {
     label: "unlimited"
   })]);
 };
-const styles$e = aphrodite.StyleSheet.create({
+const styles$f = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31154,7 +31201,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__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "linear",
     label: "Linear function"
@@ -31187,7 +31234,7 @@ const GraphTypeSelector = props => {
     label: "Angle"
   }));
 };
-const styles$d = aphrodite.StyleSheet.create({
+const styles$e = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31195,30 +31242,27 @@ const styles$d = aphrodite.StyleSheet.create({
   }
 });
 
-function Heading(_ref) {
-  let {
-    title,
-    isOpen,
-    onToggle
-  } = _ref;
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+function InteractiveGraphCorrectAnswer(props) {
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Heading, {
+    title: "Correct Answer",
+    isOpen: true,
+    isCollapsible: false
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelXSmall, {
     style: {
-      flexDirection: "row",
-      justifyContent: "space-between",
-      backgroundColor: wonderBlocksTokens.color.offBlack8,
-      padding: wonderBlocksTokens.spacing.xSmall_8,
-      marginTop: wonderBlocksTokens.spacing.small_12,
-      // NOTE(jeremy): This is the inverse of the @editorPadding CSS
-      // variable found in perseus-editor.less. For now, it must
-      // match otherwise there's a gap from this header to the edge
-      // of the editor borders.
-      marginInline: -10,
-      cursor: "pointer"
-    },
-    onClick: () => onToggle?.(!isOpen)
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, null, title), /*#__PURE__*/React__namespace.createElement(ToggleableCaret, {
-    isExpanded: isOpen
-  }));
+      paddingTop: wonderBlocksTokens.spacing.xxSmall_6,
+      paddingBottom: wonderBlocksTokens.spacing.xxSmall_6,
+      color: wonderBlocksTokens.color.offBlack64
+    }
+  }, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.BodyMonospace, {
+    style: {
+      fontSize: 12,
+      backgroundColor: "#eee",
+      paddingInline: wonderBlocksTokens.spacing.xxSmall_6,
+      borderColor: "#ccc",
+      borderStyle: "solid",
+      borderWidth: 1
+    }
+  }, props.equationString)), props.children));
 }
 
 /* eslint-disable react/forbid-prop-types, react/no-unsafe */
@@ -31540,6 +31584,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Heading, {
       title: "Common Graph Settings",
       isOpen: this.state.isExpanded,
+      isCollapsible: true,
       onToggle: () => this.setState({
         isExpanded: !this.state.isExpanded
       })
@@ -31634,10 +31679,10 @@ class InteractiveGraphSettings extends React__namespace.Component {
       onChange: this.change
     }))), /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Background image URL:",
-      style: styles$c.resetSpaceTop
+      style: styles$d.resetSpaceTop
     }, /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
-      className: aphrodite.css(styles$c.backgroundUrlInput),
+      className: aphrodite.css(styles$d.backgroundUrlInput),
       ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
@@ -31653,28 +31698,28 @@ class InteractiveGraphSettings extends React__namespace.Component {
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$c, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$c.rulerSection
+      style: styles$d.rulerSection
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$c.checkboxRow
+      style: styles$d.checkboxRow
     }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$7, {
       label: "Show ruler",
       showRuler: this.props.showRuler,
       onChange: this.change,
-      style: styles$c.resetSpaceTop
+      style: styles$d.resetSpaceTop
     }), /*#__PURE__*/React__namespace.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__namespace.createElement(Banner__default["default"], {
       layout: "floating",
       text: "The ruler and protractor are not accessible. Please consider an alternate approach.",
       kind: "warning"
     }), this.props.showRuler && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$c.spaceTop
+      style: styles$d.spaceTop
     }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Ruler label:",
-      style: styles$c.resetSpaceTop
+      style: styles$d.resetSpaceTop
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
       id: "ruler-label-select",
       selectedValue: this.props.rulerLabel,
@@ -31684,7 +31729,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
         });
       },
       placeholder: "None",
-      style: styles$c.singleSelectShort
+      style: styles$d.singleSelectShort
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
       value: "",
       label: "None",
@@ -31725,7 +31770,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
         });
       },
       placeholder: "10",
-      style: styles$c.singleSelectShort
+      style: styles$d.singleSelectShort
     }, [1, 2, 4, 8, 10, 16].map(value => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
       key: value,
       value: `${value}`,
@@ -31733,7 +31778,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
     }))))))));
   }
 }
-const styles$c = aphrodite.StyleSheet.create({
+const styles$d = aphrodite.StyleSheet.create({
   resetSpaceTop: {
     marginTop: 0
   },
@@ -31780,14 +31825,14 @@ const SegmentCountSelector = _ref => {
       const num = +newValue;
       onChange(num);
     },
-    style: styles$b.singleSelectShort
+    style: styles$c.singleSelectShort
   }, ___default["default"].range(1, 7).map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     key: n,
     value: `${n}`,
     label: `${n} segment${n > 1 ? "s" : ""}`
   })));
 };
-const styles$b = aphrodite.StyleSheet.create({
+const styles$c = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31795,6 +31840,77 @@ const styles$b = aphrodite.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__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+        style: styles$b.tile
+      }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 1"), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
+        coord: startCoords[0],
+        onChange: value => onChange([value, startCoords[1]])
+      })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+        style: styles$b.tile
+      }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 2"), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
+        coord: startCoords[1],
+        onChange: value => onChange([startCoords[0], value])
+      })));
+    default:
+      return null;
+  }
+};
+const StartCoordSettings = props => {
+  const {
+    type,
+    range,
+    step,
+    onChange
+  } = props;
+  const [isOpen, setIsOpen] = React__namespace.useState(true);
+  if (type !== "linear" && type !== "ray") {
+    return null;
+  }
+  const defaultStartCoords = perseus.getLineCoords({
+    type: type
+  }, range, step);
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$b.container
+  }, /*#__PURE__*/React__namespace.createElement(Heading, {
+    isCollapsible: true,
+    title: "Start coordinates",
+    isOpen: isOpen,
+    onToggle: () => setIsOpen(!isOpen)
+  }), isOpen && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(StartCoordSettingsInner, {
+    type: type,
+    startCoords: props.startCoords ?? defaultStartCoords,
+    onChange: onChange
+  }), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+    startIcon: arrowCounterClockwise__default["default"],
+    kind: "tertiary",
+    size: "small",
+    onClick: () => {
+      onChange(defaultStartCoords);
+    }
+  }, "Use default start coords")));
+};
+const styles$b = aphrodite.StyleSheet.create({
+  tile: {
+    backgroundColor: wonderBlocksTokens.color.fadedBlue8,
+    marginTop: wonderBlocksTokens.spacing.xSmall_8,
+    padding: wonderBlocksTokens.spacing.small_12,
+    borderRadius: wonderBlocksTokens.spacing.xSmall_8
+  }
+});
+
 const {
   InfoTip: InfoTip$b
 } = perseus.components;
@@ -31881,13 +31997,17 @@ class InteractiveGraphEditor extends React__namespace.Component {
           let correct = this.props.correct;
           // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
           if (correct.type === newProps.graph.type) {
-            correct = ___default["default"].extend({}, correct, newProps.graph);
+            correct = {
+              ...correct,
+              ...newProps.graph
+            };
           } else {
             // Clear options from previous graph
             correct = newProps.graph;
           }
           this.props.onChange({
-            correct: correct
+            correct: correct,
+            graph: this.props.graph
           });
         }
       };
@@ -31927,7 +32047,9 @@ class InteractiveGraphEditor extends React__namespace.Component {
           }
         });
       }
-    })), this.props.correct?.type === "point" && /*#__PURE__*/React__namespace.createElement(LabeledRow, {
+    })), /*#__PURE__*/React__namespace.createElement(InteractiveGraphCorrectAnswer, {
+      equationString: equationString
+    }, graph), this.props.correct?.type === "point" && /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Number of Points:"
     }, /*#__PURE__*/React__namespace.createElement(GraphPointsCountSelector, {
       numPoints: this.props.correct?.numPoints,
@@ -32055,6 +32177,10 @@ class InteractiveGraphEditor extends React__namespace.Component {
           }
         });
       }
+    })), (this.props.graph?.type === "linear" || this.props.graph?.type === "ray") && this.props.apiOptions.flags?.mafs?.["start-coords-ui"] && /*#__PURE__*/React__namespace.createElement(StartCoordSettings, _extends({}, this.props.graph, {
+      range: this.props.range,
+      step: this.props.step,
+      onChange: this.changeStartCoords
     })), /*#__PURE__*/React__namespace.createElement(InteractiveGraphSettings, {
       box: getInteractiveBoxFromSizeClass(sizeClass),
       range: this.props.range,
@@ -32107,18 +32233,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
     }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
       value: "congruent",
       label: "be congruent"
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.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."))), /*#__PURE__*/React__namespace.createElement(LabeledRow, {
-      label: "Correct answer:"
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.BodyMonospace, {
-      style: {
-        fontSize: 12,
-        backgroundColor: "#eee",
-        paddingInline: wonderBlocksTokens.spacing.xxSmall_6,
-        borderColor: "#ccc",
-        borderStyle: "solid",
-        borderWidth: 1
-      }
-    }, equationString), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."))), graph,
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$b, null, /*#__PURE__*/React__namespace.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.apiOptions?.flags?.mafs?.[this.props.graph.type] && /*#__PURE__*/React__namespace.createElement(LockedFiguresSection, {
@@ -32137,6 +32252,23 @@ class InteractiveGraphEditor extends React__namespace.Component {
       correct: correct
     });
   };
+  changeStartCoords = coords => {
+    if (this.props.graph?.type !== "linear" && this.props.graph?.type !== "ray") {
+      return;
+    }
+    const graph = {
+      ...this.props.graph,
+      startCoords: coords
+    };
+    this.props.onChange({
+      graph: graph
+    });
+  };
+
+  // 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 = ___default["default"].pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showRuler", "showTooltips", "rulerLabel", "rulerTicks", "range", "gridStep", "snapStep", "lockedFigures");
 
@@ -32147,7 +32279,8 @@ class InteractiveGraphEditor extends React__namespace.Component {
       const correct = graph && graph.getUserInput();
       ___default["default"].extend(json, {
         graph: {
-          type: correct.type
+          type: correct.type,
+          startCoords: this.props.graph?.startCoords
         },
         correct: correct
       });