@khanacademy/perseus-editor 14.3.0 → 14.5.0

package/dist/es/index.js

@@ -25,6 +25,7 @@ import { useMathInputI18n, createMathField } from '@khanacademy/math-input';
 import { vector, number } from '@khanacademy/kmath';
 import { SingleSelect, OptionItem, ActionMenu, ActionItem } from '@khanacademy/wonder-blocks-dropdown';
 import Banner from '@khanacademy/wonder-blocks-banner';
+import plusCircle from '@phosphor-icons/core/regular/plus-circle.svg';
 import { AccordionSection } from '@khanacademy/wonder-blocks-accordion';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 import caretDoubleDownIcon from '@phosphor-icons/core/bold/caret-double-down-bold.svg';
@@ -34,7 +35,7 @@ import caretUpIcon from '@phosphor-icons/core/bold/caret-up-bold.svg';
 import trashIcon from '@phosphor-icons/core/bold/trash-bold.svg';
 import copyIcon from '@phosphor-icons/core/assets/regular/copy.svg';
 import autoPasteIcon from '@phosphor-icons/core/assets/regular/note-pencil.svg';
-import plusCircle from '@phosphor-icons/core/regular/plus-circle.svg';
+import { vec } from 'mafs';
 import arrowFatDown from '@phosphor-icons/core/regular/arrow-fat-down.svg';
 import arrowFatLeft from '@phosphor-icons/core/regular/arrow-fat-left.svg';
 import arrowFatRight from '@phosphor-icons/core/regular/arrow-fat-right.svg';
@@ -44,7 +45,7 @@ import arrowCounterClockwise from '@phosphor-icons/core/bold/arrow-counter-clock
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "14.3.0";
+const libVersion = "14.5.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -229,7 +230,7 @@ class SectionControlButton extends React.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$U.button
+      style: styles$T.button
     }, ({
       hovered,
       focused,
@@ -237,7 +238,7 @@ class SectionControlButton extends React.Component {
     }) => /*#__PURE__*/React.createElement(InlineIcon$b, icon));
   }
 }
-const styles$U = StyleSheet.create({
+const styles$T = StyleSheet.create({
   button: {
     backgroundColor: color.gold,
     margin: 2,
@@ -20628,11 +20629,11 @@ class Spring extends React.Component {
     } = this.props;
     return React.createElement(View, {
       "aria-hidden": "true",
-      style: [styles$T.grow, style]
+      style: [styles$S.grow, style]
     });
   }
 }
-const styles$T = StyleSheet.create({
+const styles$S = StyleSheet.create({
   grow: {
     flexGrow: 1
   }
@@ -20698,6 +20699,7 @@ const _upgradeWidgetInfo = props => {
 // eslint-disable-next-line react/no-unsafe
 class WidgetEditor extends React.Component {
   constructor(props) {
+    var _props$widgetIsOpen;
     super(props);
     this.widget = void 0;
     this._toggleWidget = e => {
@@ -20751,7 +20753,7 @@ class WidgetEditor extends React.Component {
       };
     };
     this.state = {
-      showWidget: false,
+      showWidget: (_props$widgetIsOpen = props.widgetIsOpen) != null ? _props$widgetIsOpen : true,
       widgetInfo: _upgradeWidgetInfo(props)
     };
     this.widget = /*#__PURE__*/React.createRef();
@@ -20762,6 +20764,12 @@ class WidgetEditor extends React.Component {
     this.setState({
       widgetInfo: _upgradeWidgetInfo(nextProps)
     });
+    // user can update internal state while the widget is handled globally
+    if (nextProps.widgetIsOpen != null && nextProps.widgetIsOpen !== this.props.widgetIsOpen) {
+      this.setState({
+        showWidget: nextProps.widgetIsOpen
+      });
+    }
   }
   render() {
     const widgetInfo = this.state.widgetInfo;
@@ -20869,13 +20877,13 @@ class WidgetSelect extends React.Component {
  * that collapse a region.
  */
 function ToggleableCaret(props) {
-  const iconStyle = props.isExpanded ? styles$S.expanded : styles$S.collapsed;
+  const iconStyle = props.isExpanded ? styles$R.expanded : styles$R.collapsed;
   return /*#__PURE__*/React.createElement(PhosphorIcon, {
     icon: caretRight,
     style: iconStyle
   });
 }
-const styles$S = StyleSheet.create({
+const styles$R = StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20908,16 +20916,16 @@ class TexErrorView extends React.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$R.errorContainer
+      style: styles$Q.errorContainer
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$R.title,
+      style: styles$Q.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React.createElement(ToggleableCaret, {
       isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React.createElement(View, {
-      style: styles$R.errorExplanation
+      style: styles$Q.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$R.error,
+      style: styles$Q.error,
       key: index
     }, /*#__PURE__*/React.createElement(View, {
       style: {
@@ -20926,7 +20934,7 @@ class TexErrorView extends React.Component {
     }, e.math), /*#__PURE__*/React.createElement(View, null, e.message))));
   }
 }
-const styles$R = StyleSheet.create({
+const styles$Q = StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -21574,7 +21582,8 @@ class Editor extends React.Component {
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onRemove: this._handleWidgetEditorRemove.bind(this, id),
-      apiOptions: this.props.apiOptions
+      apiOptions: this.props.apiOptions,
+      widgetIsOpen: this.props.widgetIsOpen
     }, this.props.widgets[id]));
   }
   render() {
@@ -21895,8 +21904,7 @@ class IframeContentRenderer extends React.Component {
       this._lastData = data;
 
       // We can't use JSON.stringify/parse for this because the apiOptions
-      // includes the functions GroupMetadataEditor, groupAnnotator,
-      // onFocusChange, and onInputError.
+      // includes the functions GroupMetadataEditor, groupAnnotator, and onFocusChange.
       // @ts-expect-error - TS2339 - Property 'iframeDataStore' does not exist on type 'Window & typeof globalThis'.
       window.iframeDataStore[this.iframeID] = data;
       frame.contentWindow.postMessage(this.iframeID, "*");
@@ -24039,7 +24047,7 @@ ItemExtrasEditor.defaultProps = {
   zTable: false
 };
 const ItemExtraCheckbox = props => /*#__PURE__*/React.createElement(View, {
-  style: [styles$Q.checkbox, props.indent ? styles$Q.indented : undefined]
+  style: [styles$P.checkbox, props.indent ? styles$P.indented : undefined]
 }, /*#__PURE__*/React.createElement(Checkbox$1, {
   label: /*#__PURE__*/React.createElement(View, {
     style: {
@@ -24049,7 +24057,7 @@ const ItemExtraCheckbox = props => /*#__PURE__*/React.createElement(View, {
   checked: props.checked,
   onChange: newCheckedState => props.onChange(newCheckedState)
 }));
-const styles$Q = StyleSheet.create({
+const styles$P = StyleSheet.create({
   indented: {
     marginInlineStart: spacing.large_24
   }
@@ -24119,7 +24127,8 @@ class ItemEditor extends React.Component {
       imageUploader: this.props.imageUploader,
       onChange: this.handleEditorChange,
       apiOptions: this.props.apiOptions,
-      showWordCount: true
+      showWordCount: true,
+      widgetIsOpen: this.props.widgetIsOpen
     }, this.props.question))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-editor-right-cell"
     }, /*#__PURE__*/React.createElement("div", {
@@ -24167,6 +24176,7 @@ const {
 } = components;
 class EditorPage extends React.Component {
   constructor(props) {
+    var _this$props$widgetsAr;
     super(props);
     this._isMounted = void 0;
     this.renderer = void 0;
@@ -24199,7 +24209,8 @@ class EditorPage extends React.Component {
       json: _.pick(this.props, "question", "answerArea", "hints", "itemDataVersion"),
       gradeMessage: "",
       wasAnswered: false,
-      highlightLint: true
+      highlightLint: true,
+      widgetsAreOpen: (_this$props$widgetsAr = this.props.widgetsAreOpen) != null ? _this$props$widgetsAr : true
     };
     this._isMounted = false;
   }
@@ -24327,6 +24338,7 @@ class EditorPage extends React.Component {
       wasAnswered: this.state.wasAnswered,
       gradeMessage: this.state.gradeMessage,
       deviceType: this.props.previewDevice,
+      widgetIsOpen: this.state.widgetsAreOpen,
       apiOptions: deviceBasedApiOptions,
       previewURL: this.props.previewURL
     }), (!this.props.developerMode || !this.props.jsonMode) && /*#__PURE__*/React.createElement(CombinedHintsEditor, {
@@ -24707,7 +24719,7 @@ class SimpleButton extends React.Component {
       } = _this$props,
       otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: css(styles$P.baseButton, color === "green" && styles$P.green, color === "orange" && styles$P.orange),
+      className: css(styles$O.baseButton, color === "green" && styles$O.green, color === "orange" && styles$O.orange),
       onClick: onClick
     }, otherProps), children);
   }
@@ -24722,7 +24734,7 @@ SimpleButton.defaultProps = {
   color: "green",
   onClick: () => {}
 };
-const styles$P = StyleSheet.create({
+const styles$O = StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24942,23 +24954,23 @@ const LeafContainer = ({
 }) => {
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$O.containerHeader)
+    className: css(styles$N.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$O.containerTitle)
+    className: css(styles$N.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$O.container)
+    className: css(styles$N.container)
   }, /*#__PURE__*/React.createElement("span", {
-    className: css(styles$O.row, styles$O.rowHeading)
+    className: css(styles$N.row, styles$N.rowHeading)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$O.columnLeft)
+    className: css(styles$N.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "pod-title " + css(styles$O.containerHeader)
+    className: "pod-title " + css(styles$N.containerHeader)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$O.containerTitle)
+    className: css(styles$N.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$O.columnRight)
+    className: css(styles$N.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24971,11 +24983,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$O.container)
+    className: css(styles$N.container)
   }, controls && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$O.columnLeft, styles$O.containerHeader)
+    className: css(styles$N.columnLeft, styles$N.containerHeader)
   }, controls), /*#__PURE__*/React.createElement("div", null, children), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$O.columnLeft)
+    className: css(styles$N.columnLeft)
   }, /*#__PURE__*/React.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24988,28 +25000,28 @@ const ObjectContainer = ({
   path
 }) => {
   const headingEditor = /*#__PURE__*/React.createElement("div", {
-    className: css(styles$O.containerHeader)
+    className: css(styles$N.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$O.containerTitle)
+    className: css(styles$N.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$O.containerHeader, styles$O.previewCollectionHeader)
+    className: css(styles$N.containerHeader, styles$N.previewCollectionHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$O.containerTitle)
+    className: css(styles$N.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$O.container)
+    className: css(styles$N.container)
   }, hasBothHeadings && /*#__PURE__*/React.createElement("span", {
-    className: css(styles$O.row)
+    className: css(styles$N.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$O.columnLeft)
+    className: css(styles$N.columnLeft)
   }, headingEditor), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$O.columnRight)
+    className: css(styles$N.columnRight)
   }, headingPreview)), /*#__PURE__*/React.createElement("div", {
-    className: css(path.length > 0 && styles$O.contentIndent)
+    className: css(path.length > 0 && styles$N.contentIndent)
   }, children));
 };
 
@@ -25132,11 +25144,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$O.row)
+    className: css(styles$N.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$O.columnLeft)
+    className: css(styles$N.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$O.sticky)
+    className: css(sticky && styles$N.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25144,9 +25156,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$O.columnRight)
+    className: css(styles$N.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$O.sticky)
+    className: css(sticky && styles$N.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25162,13 +25174,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$O.row)
+    className: css(styles$N.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$O.columnLeft)
+    className: css(styles$N.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$O.sticky)
+    className: css(sticky && styles$N.sticky)
   }, /*#__PURE__*/React.createElement(HintEditor, _extends({}, data, {
-    className: css(styles$O.hintEditor),
+    className: css(styles$N.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25183,9 +25195,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$O.columnRight)
+    className: css(styles$N.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$O.sticky)
+    className: css(sticky && styles$N.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25202,9 +25214,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$O.columnLeft)
+    className: css(styles$N.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$O.tagsEditor)
+    className: css(styles$N.tagsEditor)
   }, /*#__PURE__*/React.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25235,23 +25247,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementUp",
-      className: css(styles$O.control)
+      className: css(styles$N.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$O.verticalFlip)
+      className: css(styles$N.verticalFlip)
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementDown",
-      className: css(styles$O.control)
+      className: css(styles$N.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$O.control)
+      className: css(styles$N.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25259,7 +25271,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconTrash$4)))];
     return /*#__PURE__*/React.createElement("div", {
       key: i,
-      className: css(styles$O.arrayElement, !elementIsLeaf && styles$O.arrayElementAndNotLeaf)
+      className: css(styles$N.arrayElement, !elementIsLeaf && styles$N.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25285,7 +25297,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$O.objectElement)
+    className: css(styles$N.objectElement)
   }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25452,7 +25464,7 @@ class MultiRendererEditor extends React.Component {
     }, this._renderContent());
   }
 }
-const styles$O = StyleSheet.create({
+const styles$N = StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -26398,7 +26410,7 @@ const SortableItem = createReactClass({
     }
     return /*#__PURE__*/React.createElement("li", {
       draggable: this.props.draggable,
-      className: [dragState, css(styles$N.sortableListItem)].join(" "),
+      className: [dragState, css(styles$M.sortableListItem)].join(" "),
       onDragStart: this.handleDragStart,
       onDrop: this.handleDrop,
       onDragEnter: this.handleDragEnter,
@@ -26406,7 +26418,7 @@ const SortableItem = createReactClass({
     }, this.props.component);
   }
 });
-const styles$N = StyleSheet.create({
+const styles$M = StyleSheet.create({
   sortableListItem: {
     margin: "5px 0"
   }
@@ -26654,13 +26666,13 @@ class ExpressionEditor extends React.Component {
       onChange: this.handleToggleDiv
     }));
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(HeadingSmall, null, "Global Options"), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$M.paddedY)
+      className: css(styles$L.paddedY)
     }, /*#__PURE__*/React.createElement(LabeledTextField, {
       label: "Visible label",
       value: this.props.visibleLabel || "",
       onChange: this.change("visibleLabel")
     }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Optional visible text; strongly encouraged to help learners using dictation software, but can be omitted if the surrounding content provides enough context."))), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$M.paddedY)
+      className: css(styles$L.paddedY)
     }, /*#__PURE__*/React.createElement(LabeledTextField, {
       label: "Aria label",
       value: this.props.ariaLabel || "",
@@ -26669,13 +26681,13 @@ class ExpressionEditor extends React.Component {
       href: "https://www.w3.org/WAI/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels",
       target: "_blank"
     }, "this article.")))), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$M.paddedY)
+      className: css(styles$L.paddedY)
     }, /*#__PURE__*/React.createElement(LabeledTextField, {
       label: "Function variables",
       value: this.state.functionsInternal,
       onChange: this.handleFunctions
     }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means \"f of x\" and not \"f times x\"."))), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$M.paddedY)
+      className: css(styles$L.paddedY)
     }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Use \xD7 instead of \u22C5 for multiplication",
       checked: this.props.times,
@@ -26685,7 +26697,7 @@ class ExpressionEditor extends React.Component {
         });
       }
     }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$M.paddedY)
+      className: css(styles$L.paddedY)
     }, /*#__PURE__*/React.createElement(HeadingXSmall, null, "Button Sets"), buttonSetChoices), /*#__PURE__*/React.createElement(HeadingSmall, null, "Answers"), /*#__PURE__*/React.createElement("p", {
       style: {
         margin: "4px 0"
@@ -26756,18 +26768,18 @@ class AnswerOption extends React.Component {
       color: "destructive",
       light: true
     }, "Delete");
-    const answerStatusCss = css(styles$M.answerStatus, this.props.considered === "wrong" && styles$M.answerStatusWrong, this.props.considered === "correct" && styles$M.answerStatusCorrect, this.props.considered === "ungraded" && styles$M.answerStatusUngraded);
+    const answerStatusCss = css(styles$L.answerStatus, this.props.considered === "wrong" && styles$L.answerStatusWrong, this.props.considered === "correct" && styles$L.answerStatusCorrect, this.props.considered === "ungraded" && styles$L.answerStatusUngraded);
     return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$M.answerOption)
+      className: css(styles$L.answerOption)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$M.answerHandle)
+      className: css(styles$L.answerHandle)
     }), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$M.answerBody)
+      className: css(styles$L.answerBody)
     }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
       onClick: this.toggleConsidered,
       className: answerStatusCss
     }, this.props.considered), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Expression, this.props.expressionProps))), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$M.paddedY, styles$M.paddedX)
+      className: css(styles$L.paddedY, styles$L.paddedX)
     }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Answer expression must have the same form.",
       checked: this.props.form,
@@ -26777,7 +26789,7 @@ class AnswerOption extends React.Component {
         });
       }
     }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$M.paddedY, styles$M.paddedX)
+      className: css(styles$L.paddedY, styles$L.paddedX)
     }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Answer expression must be fully expanded and simplified.",
       checked: this.props.simplify,
@@ -26787,11 +26799,11 @@ class AnswerOption extends React.Component {
         });
       }
     }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be fully expanded and simplified. Answering this equation (x^2+2x+1) with this factored equation (x+1)^2 will render this response \"Your answer is not fully expanded and simplified.\""))), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$M.buttonRow, styles$M.paddedY)
+      className: css(styles$L.buttonRow, styles$L.paddedY)
     }, removeButton)));
   }
 }
-const styles$M = StyleSheet.create({
+const styles$L = StyleSheet.create({
   paddedX: {
     paddingLeft: spacing.xSmall_8,
     paddingRight: spacing.xSmall_8
@@ -26886,10 +26898,10 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", {
-      className: css(styles$L.title)
+      className: css(styles$K.title)
     }, "Title:", " ", /*#__PURE__*/React.createElement(TextInput$5, {
       value: this.props.title,
-      className: css(styles$L.input)
+      className: css(styles$K.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -26914,7 +26926,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$L.hintsTitle)
+      className: css(styles$K.hintsTitle)
     }, "Hint"), /*#__PURE__*/React.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -26951,7 +26963,7 @@ GradedGroupEditor.defaultProps = {
   images: {},
   hint: null
 };
-const styles$L = StyleSheet.create({
+const styles$K = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -28410,13 +28422,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$K.outerWrapper
+    style: styles$J.outerWrapper
   }, /*#__PURE__*/React.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$K = StyleSheet.create({
+const styles$J = StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29520,7 +29532,7 @@ const GraphPointsCountSelector = ({
     // Never uses placeholder, always has value
     ,
     placeholder: "",
-    style: styles$J.singleSelectShort
+    style: styles$I.singleSelectShort
   }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React.createElement(OptionItem, {
     key: n,
     value: `${n}`,
@@ -29531,7 +29543,7 @@ const GraphPointsCountSelector = ({
     label: "unlimited"
   })]);
 };
-const styles$J = StyleSheet.create({
+const styles$I = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -29544,7 +29556,7 @@ const GraphTypeSelector = props => {
     selectedValue: props.graphType,
     onChange: props.onChange,
     placeholder: "Select an answer type",
-    style: styles$I.singleSelectShort
+    style: styles$H.singleSelectShort
   }, props.showNoneOption && /*#__PURE__*/React.createElement(OptionItem, {
     value: "none",
     label: "None"
@@ -29580,7 +29592,7 @@ const GraphTypeSelector = props => {
     label: "Angle"
   }));
 };
-const styles$I = StyleSheet.create({
+const styles$H = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -29595,11 +29607,11 @@ function Heading({
   onToggle
 }) {
   return /*#__PURE__*/React.createElement(Clickable, {
-    style: [styles$H.container, !isCollapsible && styles$H.notClickable],
+    style: [styles$G.container, !isCollapsible && styles$G.notClickable],
     disabled: !isCollapsible,
     onClick: () => isCollapsible && (onToggle == null ? void 0 : onToggle(!isOpen))
   }, () => /*#__PURE__*/React.createElement(View, {
-    style: styles$H.heading
+    style: styles$G.heading
   }, /*#__PURE__*/React.createElement(LabelLarge, {
     style: {
       fontSize: 14,
@@ -29609,7 +29621,7 @@ function Heading({
     isExpanded: isOpen
   })));
 }
-const styles$H = StyleSheet.create({
+const styles$G = StyleSheet.create({
   container: {
     marginTop: spacing.small_12,
     // NOTE(jeremy): This is the inverse of the @editorPadding CSS
@@ -29669,15 +29681,18 @@ function InteractiveGraphDescription(props) {
     isOpen: isOpen,
     onToggle: setIsOpen
   }), isOpen && /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(LabelXSmall, {
-    style: styles$G.caption
+    style: styles$F.caption
   }, "Use these fields to describe the graph as a whole. These are used by screen readers to describe content to users who are visually impaired."), /*#__PURE__*/React.createElement(LabelLarge, {
     tag: "label"
   }, "Title", /*#__PURE__*/React.createElement(TextField, {
     value: ariaLabelValue,
     onChange: newValue => onChange({
-      fullGraphAriaLabel: newValue
+      fullGraphAriaLabel:
+      // Save as undefined if the new value
+      // is an empty string.
+      newValue || undefined
     }),
-    style: styles$G.spaceAbove
+    style: styles$F.spaceAbove
   })), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.small_12
   }), /*#__PURE__*/React.createElement(LabelLarge, {
@@ -29687,12 +29702,15 @@ function InteractiveGraphDescription(props) {
     resizeType: "vertical",
     value: ariaDescriptionValue,
     onChange: newValue => onChange({
-      fullGraphAriaDescription: newValue
+      fullGraphAriaDescription:
+      // Save as undefined if the new value
+      // is an empty string.
+      newValue || undefined
     }),
-    style: styles$G.spaceAbove
+    style: styles$F.spaceAbove
   }))));
 }
-const styles$G = StyleSheet.create({
+const styles$F = StyleSheet.create({
   caption: {
     color: color.offBlack64,
     paddingTop: spacing.xxSmall_6,
@@ -29712,16 +29730,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React.createElement("label", {
-    className: css(styles$F.label)
+    className: css(styles$E.label)
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$F.row, style]
+    style: [styles$E.row, style]
   }, labelSide === "start" || /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$F.spaceEnd
+    style: styles$E.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$F.spaceStart
+    style: styles$E.spaceStart
   }, label)));
 };
-const styles$F = StyleSheet.create({
+const styles$E = StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -30115,10 +30133,10 @@ class InteractiveGraphSettings extends React.Component {
       }
     }))), /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Background image URL:",
-      style: styles$E.resetSpaceTop
+      style: styles$D.resetSpaceTop
     }, /*#__PURE__*/React.createElement("input", {
       type: "text",
-      className: css(styles$E.backgroundUrlInput),
+      className: css(styles$D.backgroundUrlInput),
       ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
@@ -30132,9 +30150,9 @@ class InteractiveGraphSettings extends React.Component {
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
     }), /*#__PURE__*/React.createElement(InfoTip$d, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React.createElement(View, {
-      style: styles$E.protractorSection
+      style: styles$D.protractorSection
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$E.checkboxRow
+      style: styles$D.checkboxRow
     }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Show protractor",
       checked: this.props.showProtractor,
@@ -30143,7 +30161,7 @@ class InteractiveGraphSettings extends React.Component {
           showProtractor: value
         });
       },
-      style: styles$E.resetSpaceTop
+      style: styles$D.resetSpaceTop
     })), this.props.showProtractor && /*#__PURE__*/React.createElement(Banner, {
       layout: "floating",
       text: "The protractor is not accessible. Please consider an alternate approach.",
@@ -30164,7 +30182,7 @@ InteractiveGraphSettings.defaultProps = {
   showProtractor: false,
   showTooltips: false
 };
-const styles$E = StyleSheet.create({
+const styles$D = StyleSheet.create({
   resetSpaceTop: {
     marginTop: 0
   },
@@ -30201,13 +30219,13 @@ const SegmentCountSelector = ({
     const num = +newValue;
     onChange(num);
   },
-  style: styles$D.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$D = 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.
@@ -30232,17 +30250,17 @@ const LockedFigureSelect = props => {
     figureTypes.push("label");
   }
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$C.container
+    style: styles$B.container
   }, /*#__PURE__*/React.createElement(ActionMenu, {
     menuText: "Add locked figure",
-    style: styles$C.addElementSelect
+    style: styles$B.addElementSelect
   }, figureTypes.map(figureType => /*#__PURE__*/React.createElement(ActionItem, {
     key: `${id}-${figureType}`,
     label: figureType,
     onClick: () => onChange(figureType)
   }))));
 };
-const styles$C = StyleSheet.create({
+const styles$B = StyleSheet.create({
   container: {
     marginTop: spacing.xSmall_8
   },
@@ -30359,18 +30377,18 @@ const AngleInput = props => {
   }
   return /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$B.row
+    style: styles$A.row
   }, "angle (degrees)", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(ScrolllessNumberTextField, {
     value: angleInput,
     onChange: handleAngleChange,
-    style: styles$B.textField
+    style: styles$A.textField
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }));
 };
-const styles$B = StyleSheet.create({
+const styles$A = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30419,30 +30437,30 @@ const CoordinatePairInput = props => {
     onChange(newCoords);
   }
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$A.row, style]
+    style: [styles$z.row, style]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$A.row
+    style: styles$z.row
   }, labels ? labels[0] : "x coord", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(ScrolllessNumberTextField, {
     value: coordState[0],
     onChange: newValue => handleCoordChange(newValue, 0),
-    style: [styles$A.textField, error ? styles$A.errorField : undefined]
+    style: [styles$z.textField, error ? styles$z.errorField : undefined]
   })), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$A.row
+    style: styles$z.row
   }, labels ? labels[1] : "y coord", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(ScrolllessNumberTextField, {
     value: coordState[1],
     onChange: newValue => handleCoordChange(newValue, 1),
-    style: [styles$A.textField, error ? styles$A.errorField : undefined]
+    style: [styles$z.textField, error ? styles$z.errorField : undefined]
   })));
 };
-const styles$A = StyleSheet.create({
+const styles$z = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30475,14 +30493,14 @@ const PerseusEditorAccordion = props => {
   }, /*#__PURE__*/React.createElement(AccordionSection, {
     expanded: expanded,
     onToggle: onToggle,
-    style: [styles$z.container, containerStyle],
-    headerStyle: styles$z.accordionHeader,
+    style: [styles$y.container, containerStyle],
+    headerStyle: styles$y.accordionHeader,
     header: header
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$z.accordionPanel, panelStyle]
+    style: [styles$y.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$z = StyleSheet.create({
+const styles$y = StyleSheet.create({
   container: {
     backgroundColor: color.fadedBlue8,
     marginTop: spacing.xSmall_8
@@ -30513,13 +30531,13 @@ const ColorSwatch = props => {
     "aria-label":
     // Don't include an aria label for decorative circles.
     !decorative ? `${color$1}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$y.colorSwatch, {
+    style: [styles$x.colorSwatch, {
       border: `4px solid ${lockedFigureColors[color$1]}`,
       backgroundColor: filled ? lockedFigureColors[color$1] : color.white
     }]
   });
 };
-const styles$y = StyleSheet.create({
+const styles$x = StyleSheet.create({
   colorSwatch: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30538,10 +30556,10 @@ const ColorSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$x.row, style]
+    style: [styles$w.row, style]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$x.row
+    style: styles$w.row
   }, "color", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30560,7 +30578,7 @@ const ColorSelect = props => {
     })
   })))));
 };
-const styles$x = StyleSheet.create({
+const styles$w = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30579,17 +30597,17 @@ const EllipseSwatch = props => {
   } = props;
   return /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$w.container, {
+    style: [styles$v.container, {
       border: `4px ${strokeStyle} ${lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$w.innerCircle, {
+    style: [styles$v.innerCircle, {
       backgroundColor: lockedFigureColors[color],
       opacity: fillStyle === "white" ? 0 : lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$w = StyleSheet.create({
+const styles$v = StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30615,7 +30633,7 @@ const LineStrokeSelect = props => {
   } = props;
   return /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$v.lineStrokeSelect
+    style: styles$u.lineStrokeSelect
   }, "stroke", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxxSmall_4
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30632,7 +30650,7 @@ const LineStrokeSelect = props => {
     label: "dashed"
   })));
 };
-const styles$v = StyleSheet.create({
+const styles$u = StyleSheet.create({
   lineStrokeSelect: {
     display: "flex",
     flexDirection: "row",
@@ -30654,40 +30672,40 @@ const LockedFigureSettingsActions = props => {
     onRemove
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$u.container
+    style: styles$t.container
   }, /*#__PURE__*/React.createElement(Button, {
     startIcon: trashIcon,
     "aria-label": `Delete locked ${figureType}`,
     onClick: onRemove,
     kind: "tertiary",
-    style: styles$u.deleteButton
+    style: styles$t.deleteButton
   }, "Delete"), onMove && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spring, null), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDoubleUpIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} to the back`,
     onClick: () => onMove("back"),
-    style: styles$u.iconButton
+    style: styles$t.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretUpIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} backward`,
     onClick: () => onMove("backward"),
-    style: styles$u.iconButton
+    style: styles$t.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDownIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} forward`,
     onClick: () => onMove("forward"),
-    style: styles$u.iconButton
+    style: styles$t.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDoubleDownIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} to the front`,
     onClick: () => onMove("front"),
-    style: styles$u.iconButton
+    style: styles$t.iconButton
   })));
 };
-const styles$u = StyleSheet.create({
+const styles$t = StyleSheet.create({
   container: {
     width: "100%",
     flexDirection: "row",
@@ -30705,907 +30723,839 @@ const styles$u = StyleSheet.create({
   }
 });
 
-const {
-  InfoTip: InfoTip$c
-} = components;
-const LockedEllipseSettings = props => {
+/**
+ * LockedLabelSettings is a component that allows the user to edit the
+ * settings of specifically a locked label on the graph within the
+ * Interactive Graph widget.
+ *
+ * Used in the interactive graph editor's locked figures section.
+ */
+function LockedLabelSettings(props) {
   const {
-    center,
-    radius,
-    angle,
-    color,
-    fillStyle,
-    strokeStyle,
+    type,
+    coord,
+    color: color$1,
+    size,
+    text,
     expanded,
-    onToggle,
     onChangeProps,
     onMove,
-    onRemove
+    onRemove,
+    onToggle,
+    containerStyle
   } = props;
-  function handleColorChange(newValue) {
-    onChangeProps({
-      color: newValue
-    });
-  }
   return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: expanded,
     onToggle: onToggle,
-    header:
-    /*#__PURE__*/
-    // Summary: Ellipse, center, radius, color (opacity, dashed)
-    React.createElement(View, {
-      style: styles$t.row
-    }, /*#__PURE__*/React.createElement(LabelLarge, null, `Ellipse (${center[0]}, ${center[1]}), radius ${radius[0]}, ${radius[1]}`), /*#__PURE__*/React.createElement(Strut, {
+    header: /*#__PURE__*/React.createElement(View, {
+      style: [styles$s.row, styles$s.accordionHeaderContainer]
+    }, /*#__PURE__*/React.createElement(LabelLarge, null, "Label (", coord[0], ", ", coord[1], ")"), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
-    }), /*#__PURE__*/React.createElement(EllipseSwatch, {
-      color: props.color,
-      fillStyle: fillStyle,
-      strokeStyle: strokeStyle
-    }))
-  }, /*#__PURE__*/React.createElement(View, {
-    style: styles$t.row
+    }), text !== "" && /*#__PURE__*/React.createElement(LabelLarge, {
+      style: [{
+        backgroundColor: color.white,
+        color: lockedFigureColors[color$1]
+      }, styles$s.accordionHeader]
+    }, text)),
+    containerStyle: containerStyle
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
-    coord: center,
-    style: styles$t.spaceUnder,
-    onChange: newCoords => onChangeProps({
-      center: newCoords
-    })
-  }), /*#__PURE__*/React.createElement(View, {
-    style: styles$t.spaceUnder
-  }, /*#__PURE__*/React.createElement(InfoTip$c, null, "The coordinates for the center of the ellipse."))), /*#__PURE__*/React.createElement(CoordinatePairInput, {
-    coord: radius,
-    labels: ["x radius", "y radius"],
-    style: styles$t.spaceUnder,
-    onChange: newCoords => onChangeProps({
-      radius: newCoords
-    })
-  }), /*#__PURE__*/React.createElement(AngleInput, {
-    angle: angle,
-    onChange: newAngle => onChangeProps({
-      angle: newAngle
-    })
-  }), /*#__PURE__*/React.createElement(Strut, {
+    coord: coord,
+    onChange: newCoords => {
+      onChangeProps({
+        coord: newCoords
+      });
+    },
+    style: styles$s.spaceUnder
+  }), /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    style: [styles$s.row, styles$s.spaceUnder]
+  }, "TeX", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xSmall_8
-  }), /*#__PURE__*/React.createElement(View, {
-    style: [styles$t.row, styles$t.spaceUnder]
-  }, /*#__PURE__*/React.createElement(ColorSelect, {
-    selectedValue: color,
-    onChange: handleColorChange
+  }), /*#__PURE__*/React.createElement(TextField, {
+    value: text,
+    placeholder: "ex. x^2 or \\frac{1}{2}",
+    onChange: newValue => onChangeProps({
+      text: newValue
+    })
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles$s.row
+  }, onMove && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorSelect, {
+    selectedValue: color$1,
+    onChange: newColor => {
+      onChangeProps({
+        color: newColor
+      });
+    },
+    style: styles$s.spaceUnder
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.medium_16
-  }), /*#__PURE__*/React.createElement(LabelMedium, {
+  })), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$t.row, styles$t.truncatedWidth]
-  }, "fill", /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xxSmall_6
+    style: styles$s.row
+  }, "size", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xSmall_8
   }), /*#__PURE__*/React.createElement(SingleSelect, {
-    selectedValue: fillStyle,
-    onChange: value => onChangeProps({
-      fillStyle: value
+    selectedValue: size,
+    onChange: newValue => onChangeProps({
+      size: newValue
     })
-    // Placeholder is required, but never gets used.
+    // Placeholder is required, but never gets used since
+    // we have a label for the select.
     ,
     placeholder: ""
-  }, Object.keys(lockedFigureFillStyles).map(option => /*#__PURE__*/React.createElement(OptionItem, {
-    key: option,
-    value: option,
-    label: option
-  }))))), /*#__PURE__*/React.createElement(LineStrokeSelect, {
-    selectedValue: strokeStyle,
-    onChange: value => onChangeProps({
-      strokeStyle: value
-    })
-  }), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
-    figureType: props.type,
+  }, /*#__PURE__*/React.createElement(OptionItem, {
+    value: "small",
+    label: "small"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "medium",
+    label: "medium"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "large",
+    label: "large"
+  })))), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
+    figureType: type,
     onMove: onMove,
     onRemove: onRemove
   }));
-};
-const styles$t = StyleSheet.create({
+}
+const styles$s = StyleSheet.create({
+  accordionHeaderContainer: {
+    // Stop the label summary from wrapping.
+    whiteSpace: "nowrap"
+  },
+  accordionHeader: {
+    padding: spacing.xxxSmall_4,
+    marginInlineEnd: spacing.xSmall_8,
+    borderRadius: spacing.xxxSmall_4,
+    textOverflow: "ellipsis",
+    overflow: "hidden"
+  },
   row: {
     display: "flex",
     flexDirection: "row",
-    alignItems: "center"
-  },
-  spaceUnder: {
-    marginBottom: spacing.xSmall_8
-  },
-  truncatedWidth: {
+    alignItems: "center",
     // Allow truncation, stop bleeding over the edge.
     minWidth: 0
-  }
-});
-
-const LineSwatch = props => {
-  const {
-    color,
-    lineStyle
-  } = props;
-  return /*#__PURE__*/React.createElement(View, {
-    style: styles$s.container
-  }, /*#__PURE__*/React.createElement(View, {
-    "aria-label": `${color}, ${lineStyle}`,
-    style: [styles$s.lineSwatch, {
-      border: `5px ${lineStyle} ${lockedFigureColors[color]}`
-    }]
-  }));
-};
-const styles$s = StyleSheet.create({
-  container: {
-    backgroundColor: color.white,
-    justifyContent: "center",
-    padding: spacing.xSmall_8,
-    borderRadius: spacing.xxxSmall_4
   },
-  lineSwatch: {
-    width: 40
+  spaceUnder: {
+    marginBottom: spacing.xSmall_8
   }
 });
 
-const examples = {
-  linear: ["x + 5", "1/2x - 2"],
-  polynomial: ["1/2x^2 + 3x - 4", "(1/3)x^3 - 2x^2 + 3x - 4"],
-  trigonometric: ["sin(x) * 3", "arctan(2x) + 4"]
-};
-
-/**
- * LockedFunctionSettings is a component that allows the user to edit the
- * settings of specifically a locked function on the graph.
- *
- * Used in the interactive graph editor's locked figures section.
- */
-const LockedFunctionSettings = props => {
-  const {
-    color: lineColor,
+const DEFAULT_COLOR = "grayH";
+function getDefaultFigureForType(type) {
+  switch (type) {
+    case "point":
+      return {
+        type: "point",
+        coord: [0, 0],
+        color: DEFAULT_COLOR,
+        filled: true
+      };
+    case "line":
+      return {
+        type: "line",
+        kind: "line",
+        points: [getDefaultFigureForType("point"), _extends({}, getDefaultFigureForType("point"), {
+          coord: [2, 2]
+        })],
+        color: DEFAULT_COLOR,
+        lineStyle: "solid",
+        showPoint1: false,
+        showPoint2: false
+      };
+    case "vector":
+      return {
+        type: "vector",
+        points: [[0, 0], [2, 2]],
+        color: DEFAULT_COLOR
+      };
+    case "ellipse":
+      return {
+        type: "ellipse",
+        center: [0, 0],
+        radius: [1, 1],
+        angle: 0,
+        color: DEFAULT_COLOR,
+        fillStyle: "none",
+        strokeStyle: "solid"
+      };
+    case "polygon":
+      return {
+        type: "polygon",
+        points: [[0, 2], [-1, 0], [1, 0]],
+        color: DEFAULT_COLOR,
+        showVertices: false,
+        fillStyle: "none",
+        strokeStyle: "solid"
+      };
+    case "function":
+      return {
+        type: "function",
+        color: DEFAULT_COLOR,
+        strokeStyle: "solid",
+        equation: "x^2",
+        directionalAxis: "x"
+      };
+    case "label":
+      return {
+        type: "label",
+        coord: [0, 0],
+        text: "",
+        color: DEFAULT_COLOR,
+        size: "medium"
+      };
+    default:
+      throw new UnreachableCaseError(type);
+  }
+}
+
+const {
+  InfoTip: InfoTip$c
+} = components;
+const LockedEllipseSettings = props => {
+  var _flags$mafs;
+  const {
+    flags,
+    center,
+    radius,
+    angle,
+    color,
+    labels,
+    fillStyle,
     strokeStyle,
-    equation,
-    directionalAxis,
-    domain,
+    expanded,
+    onToggle,
     onChangeProps,
     onMove,
     onRemove
   } = props;
-  const equationPrefix = directionalAxis === "x" ? "y=" : "x=";
-  const domainRangeText = directionalAxis === "x" ? "domain" : "range";
-  const lineLabel = `Function (${equationPrefix}${equation})`;
-
-  // Tracking the string value of domain/range constraints to handle interim state of
-  //     entering a negative value, as well as representing Infinity as an empty string.
-  // This variable is used when specifying the values of the input fields.
-  const [domainEntries, setDomainEntries] = useState([domain && domain[0] !== -Infinity ? domain[0].toString() : "", domain && domain[1] !== Infinity ? domain[1].toString() : ""]);
-  const [exampleCategory, setExampleCategory] = useState("");
-  useEffect(() => {
-    // "useEffect" used to maintain parity between domain/range constraints and their string representation.
-    setDomainEntries([domain && domain[0] !== -Infinity ? domain[0].toString() : "", domain && domain[1] !== Infinity ? domain[1].toString() : ""]);
-  }, [domain]);
+  function handleCenterChange(newCoord) {
+    const xOffset = newCoord[0] - center[0];
+    const yOffset = newCoord[1] - center[1];
+    const newProps = {
+      center: newCoord
+    };
 
-  // Generic function for handling property changes (except for 'domain/range')
-  function handlePropChange(property, newValue) {
-    const updatedProps = {};
-    updatedProps[property] = newValue;
-    onChangeProps(updatedProps);
+    // Update the coord by the same amount as the point for all labels
+    newProps.labels = labels == null ? void 0 : labels.map(label => _extends({}, label, {
+      coord: [label.coord[0] + xOffset, label.coord[1] + yOffset]
+    }));
+    onChangeProps(newProps);
   }
+  function handleColorChange(newValue) {
+    const newProps = {
+      color: newValue
+    };
 
-  /*
-   Reason for having a separate 'propChange' function for 'domain/range':
-      Domain/Range entries are optional. Their default value is +/- Infinity.
-      Since input fields that are empty evaluate to zero, there needs to be
-          dedicated code to convert empty to Infinity.
-   */
-  function handleDomainChange(limitIndex, newValueString) {
-    const newDomainEntries = [...domainEntries];
-    newDomainEntries[limitIndex] = newValueString;
-    setDomainEntries(newDomainEntries);
-    const newDomain = domain ? [...domain] : [-Infinity, Infinity];
-    let newValue = parseFloat(newValueString);
-    if (newValueString === "" && limitIndex === 0) {
-      newValue = -Infinity;
-    } else if (newValueString === "" && limitIndex === 1) {
-      newValue = Infinity;
+    // Update the color of the all labels to match the point
+    newProps.labels = labels == null ? void 0 : labels.map(label => _extends({}, label, {
+      color: newValue
+    }));
+    onChangeProps(newProps);
+  }
+  function handleLabelChange(updatedLabel, labelIndex) {
+    if (!labels) {
+      return;
     }
-    newDomain[limitIndex] = newValue;
+    const updatedLabels = [...labels];
+    updatedLabels[labelIndex] = _extends({}, labels[labelIndex], updatedLabel);
     onChangeProps({
-      domain: newDomain
+      labels: updatedLabels
+    });
+  }
+  function handleLabelRemove(labelIndex) {
+    if (!labels) {
+      return;
+    }
+    const updatedLabels = labels.filter((_, index) => index !== labelIndex);
+    onChangeProps({
+      labels: updatedLabels
     });
   }
-  const exampleCategories = Object.keys(examples);
-  const exampleCategorySelected = exampleCategory !== "";
-  const exampleContent = exampleCategorySelected ? examples[exampleCategory] : ["Select category to see example equations"];
   return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
-    expanded: props.expanded,
-    onToggle: props.onToggle,
-    header: /*#__PURE__*/React.createElement(View, {
+    expanded: expanded,
+    onToggle: onToggle,
+    header:
+    /*#__PURE__*/
+    // Summary: Ellipse, center, radius, color (opacity, dashed)
+    React.createElement(View, {
       style: styles$r.row
-    }, /*#__PURE__*/React.createElement(LabelLarge, {
-      style: styles$r.accordionHeader
-    }, lineLabel), /*#__PURE__*/React.createElement(Strut, {
+    }, /*#__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(LineSwatch, {
-      color: lineColor,
-      lineStyle: strokeStyle
+    }), /*#__PURE__*/React.createElement(EllipseSwatch, {
+      color: props.color,
+      fillStyle: fillStyle,
+      strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React.createElement(View, {
+    style: styles$r.row
+  }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: center,
+    style: styles$r.spaceUnder,
+    onChange: handleCenterChange
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles$r.spaceUnder
+  }, /*#__PURE__*/React.createElement(InfoTip$c, null, "The coordinates for the center of the ellipse."))), /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: radius,
+    labels: ["x radius", "y radius"],
+    style: styles$r.spaceUnder,
+    onChange: newCoords => onChangeProps({
+      radius: newCoords
+    })
+  }), /*#__PURE__*/React.createElement(AngleInput, {
+    angle: angle,
+    onChange: newAngle => onChangeProps({
+      angle: newAngle
+    })
+  }), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xSmall_8
+  }), /*#__PURE__*/React.createElement(View, {
     style: [styles$r.row, styles$r.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
-    selectedValue: lineColor,
-    onChange: newValue => {
-      handlePropChange("color", newValue);
-    }
+    selectedValue: color,
+    onChange: handleColorChange
   }), /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.small_12
-  }), /*#__PURE__*/React.createElement(LineStrokeSelect, {
-    selectedValue: strokeStyle,
-    onChange: newValue => {
-      handlePropChange("strokeStyle", newValue);
-    }
-  })), /*#__PURE__*/React.createElement(View, {
-    style: [styles$r.row, styles$r.rowSpace]
-  }, /*#__PURE__*/React.createElement(SingleSelect, {
-    selectedValue: directionalAxis,
-    onChange: newValue => {
-      handlePropChange("directionalAxis", newValue);
-    },
-    "aria-label": "equation prefix",
-    style: [styles$r.dropdownLabel, styles$r.axisMenu]
-    // Placeholder is required, but never gets used.
-    ,
-    placeholder: ""
-  }, /*#__PURE__*/React.createElement(OptionItem, {
-    value: "x",
-    label: "y ="
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "y",
-    label: "x ="
-  })), /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xSmall_8
-  }), /*#__PURE__*/React.createElement(TextField, {
-    type: "text",
-    "aria-label": "equation",
-    value: equation,
-    onChange: newValue => {
-      handlePropChange("equation", newValue);
-    },
-    style: [styles$r.textField]
-  })), /*#__PURE__*/React.createElement(View, {
-    style: [styles$r.row, styles$r.rowSpace]
-  }, /*#__PURE__*/React.createElement(LabelMedium, {
-    tag: "label",
-    style: [styles$r.dropdownLabel, styles$r.domainMin]
-  }, `${domainRangeText} min`, /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xxSmall_6
-  }), /*#__PURE__*/React.createElement(TextField, {
-    type: "number",
-    style: styles$r.domainMinField,
-    value: domainEntries[0],
-    onChange: newValue => {
-      handleDomainChange(0, newValue);
-    }
-  })), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    "aria-label": `${domainRangeText} max`,
-    style: [styles$r.dropdownLabel, styles$r.domainMax]
-  }, "max", /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xxSmall_6
-  }), /*#__PURE__*/React.createElement(TextField, {
-    type: "number",
-    style: styles$r.domainMaxField,
-    value: domainEntries[1],
-    onChange: newValue => {
-      handleDomainChange(1, newValue);
-    }
-  }))), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
-    header: /*#__PURE__*/React.createElement(LabelLarge, null, "Example Functions"),
-    expanded: false,
-    containerStyle: styles$r.exampleWorkspace,
-    panelStyle: styles$r.exampleAccordionPanel
-  }, /*#__PURE__*/React.createElement(LabelMedium, {
-    tag: "label",
-    style: styles$r.dropdownLabel
-  }, "Choose a category", /*#__PURE__*/React.createElement(Strut, {
+    style: [styles$r.row, styles$r.truncatedWidth]
+  }, "fill", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
-    selectedValue: exampleCategory,
-    onChange: setExampleCategory,
-    placeholder: "examples"
-  }, exampleCategories.map(category => {
-    return /*#__PURE__*/React.createElement(OptionItem, {
-      key: category,
-      value: category,
-      label: category
-    });
-  }))), exampleCategorySelected && /*#__PURE__*/React.createElement("ul", {
-    className: css(styles$r.exampleContainer)
-  }, exampleContent.map((example, index) => /*#__PURE__*/React.createElement(ExampleItem, {
-    category: exampleCategory,
-    example: example,
-    index: index,
-    pasteEquationFn: handlePropChange
-  })))), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
+    selectedValue: fillStyle,
+    onChange: value => onChangeProps({
+      fillStyle: value
+    })
+    // Placeholder is required, but never gets used.
+    ,
+    placeholder: ""
+  }, Object.keys(lockedFigureFillStyles).map(option => /*#__PURE__*/React.createElement(OptionItem, {
+    key: option,
+    value: option,
+    label: option
+  }))))), /*#__PURE__*/React.createElement(LineStrokeSelect, {
+    selectedValue: strokeStyle,
+    onChange: value => onChangeProps({
+      strokeStyle: value
+    })
+  }), (flags == null || (_flags$mafs = flags["mafs"]) == null ? void 0 : _flags$mafs["locked-ellipse-labels"]) && /*#__PURE__*/React.createElement(React.Fragment, null, labels == null ? void 0 : labels.map((label, labelIndex) => /*#__PURE__*/React.createElement(LockedLabelSettings, _extends({}, label, {
+    expanded: true,
+    onChangeProps: newLabel => {
+      handleLabelChange(newLabel, labelIndex);
+    },
+    onRemove: () => {
+      handleLabelRemove(labelIndex);
+    },
+    containerStyle: styles$r.labelContainer
+  }))), /*#__PURE__*/React.createElement(Button, {
+    kind: "tertiary",
+    startIcon: plusCircle,
+    onClick: () => {
+      var _labels$length;
+      const newLabel = _extends({}, getDefaultFigureForType("label"), {
+        coord: [center[0],
+        // Additional vertical offset for each
+        // label so they don't overlap.
+        center[1] - ((_labels$length = labels == null ? void 0 : labels.length) != null ? _labels$length : 0)],
+        // Default to the same color as the ellipse
+        color: color
+      });
+      onChangeProps({
+        labels: [...(labels != null ? labels : []), newLabel]
+      });
+    },
+    style: styles$r.addButton
+  }, "Add visible label")), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
   }));
 };
-const ExampleItem = props => {
-  const {
-    category,
-    example,
-    index,
-    pasteEquationFn
-  } = props;
-  const exampleId = useId();
-  return /*#__PURE__*/React.createElement("li", {
-    key: `${category}-${index}`,
-    className: css(styles$r.exampleRow)
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    icon: autoPasteIcon,
-    "aria-label": "paste example",
-    "aria-describedby": exampleId,
-    onClick: () => pasteEquationFn("equation", example),
-    size: "medium",
-    style: styles$r.copyPasteButton
-  }), /*#__PURE__*/React.createElement(IconButton, {
-    icon: copyIcon,
-    "aria-label": "copy example",
-    "aria-describedby": exampleId,
-    onClick: () => navigator.clipboard.writeText(example),
-    size: "medium",
-    style: styles$r.copyPasteButton
-  }), /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xxxSmall_4
-  }), /*#__PURE__*/React.createElement(View, {
-    style: styles$r.exampleContent,
-    id: exampleId
-  }, example));
-};
 const styles$r = StyleSheet.create({
-  accordionHeader: {
-    textOverflow: "ellipsis",
-    // A maximum width needs to be specified in order for the ellipsis to work.
-    // The 64px in the calculation accounts for the line swatch (56px) and the preceding strut (8px).
-    // Margin and padding won't work here because they would create space between the header text and the swatch.
-    maxWidth: "calc(100% - 64px)",
-    overflow: "hidden",
-    whiteSpace: "nowrap"
-  },
-  axisMenu: {
-    minWidth: "auto"
-  },
-  copyPasteButton: {
-    flexShrink: "0",
-    margin: "0 2px"
-  },
-  domainMin: {
-    justifyContent: "space-between",
-    // The 'width' property is applied to the label, which wraps the text and the input field.
-    // The width of the input fields (min/max) should be the same (to have a consistent look),
-    //     so the following calculation distributes the space accordingly.
-    // For the "domain/range min" block, the text is 82.7px, and the strut is 6px (88.7px total).
-    // The "domain/range max" block is 30.23px, and the strut is 6px (36.23px total).
-    // The calculation takes the remain space after the text & struts (141px total) are removed,
-    //     and divides it between the two input fields equally.
-    // The calculation reads: "Take 1/2 of the non-text space, and add the required space for this label's text"
-    width: "calc(((100% - 141px) / 2) + 88.7px)",
-    // @ts-expect-error // TS2353: textWrap does not exist in type CSSProperties
-    textWrap: "nowrap"
-  },
-  domainMinField: {
-    width: "calc(100% - 88.7px)" // make room for the label
-  },
-
-  domainMax: {
-    // See explanation for "domainMin" for the calculation below.
-    width: "calc(((100% - 141px) / 2) + 36.2px)"
-  },
-  domainMaxField: {
-    width: "calc(100% - 36.2px)" // make room for the label
-  },
-
-  dropdownLabel: {
-    alignItems: "center",
-    display: "flex"
-  },
-  exampleAccordionPanel: {
-    alignItems: "start",
-    paddingBottom: "12px",
-    flexDirection: "row",
-    flexWrap: "wrap"
-  },
-  exampleContainer: {
-    background: "white",
-    border: `1px solid ${color.fadedOffBlack16}`,
-    borderRadius: "4px",
-    flexGrow: "1",
-    listStyleType: "none",
-    // Nothing special about the maxHeight value,
-    //    just a good height to partially show a 3rd example in the list
-    //    to hint at scrollable content.
-    maxHeight: "88px",
-    margin: "8px 0 0 0",
-    overflowY: "scroll",
-    padding: "4px 12px 4px 4px"
-  },
-  exampleContent: {
-    fontFamily: `"Lato", sans-serif`,
-    flexGrow: "1",
-    color: color.offBlack
-  },
-  exampleRow: {
-    alignItems: "center",
+  row: {
     display: "flex",
     flexDirection: "row",
-    minHeight: "44px"
+    alignItems: "center"
   },
-  exampleWorkspace: {
-    background: color.white50
+  spaceUnder: {
+    marginBottom: spacing.xSmall_8
   },
-  rowSpace: {
-    marginTop: spacing.xSmall_8
+  truncatedWidth: {
+    // Allow truncation, stop bleeding over the edge.
+    minWidth: 0
   },
-  row: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center"
+  addButton: {
+    alignSelf: "start"
   },
-  textField: {
-    flexGrow: "1"
+  labelContainer: {
+    backgroundColor: color.white
   }
 });
 
-/**
- * LockedLabelSettings is a component that allows the user to edit the
- * settings of specifically a locked label on the graph within the
- * Interactive Graph widget.
- *
- * Used in the interactive graph editor's locked figures section.
- */
-function LockedLabelSettings(props) {
+const LineSwatch = props => {
   const {
-    type,
-    coord,
-    color: color$1,
-    size,
-    text,
-    expanded,
+    color,
+    lineStyle
+  } = props;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles$q.container
+  }, /*#__PURE__*/React.createElement(View, {
+    "aria-label": `${color}, ${lineStyle}`,
+    style: [styles$q.lineSwatch, {
+      border: `5px ${lineStyle} ${lockedFigureColors[color]}`
+    }]
+  }));
+};
+const styles$q = StyleSheet.create({
+  container: {
+    backgroundColor: color.white,
+    justifyContent: "center",
+    padding: spacing.xSmall_8,
+    borderRadius: spacing.xxxSmall_4
+  },
+  lineSwatch: {
+    width: 40
+  }
+});
+
+const examples = {
+  linear: ["x + 5", "1/2x - 2"],
+  polynomial: ["1/2x^2 + 3x - 4", "(1/3)x^3 - 2x^2 + 3x - 4"],
+  trigonometric: ["sin(x) * 3", "arctan(2x) + 4"]
+};
+
+const LockedFunctionSettings = props => {
+  var _flags$mafs;
+  const {
+    flags,
+    color: lineColor,
+    strokeStyle,
+    equation,
+    directionalAxis,
+    domain,
+    labels,
     onChangeProps,
     onMove,
-    onRemove,
-    onToggle
+    onRemove
   } = props;
-  return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
-    expanded: expanded,
-    onToggle: onToggle,
-    header: /*#__PURE__*/React.createElement(View, {
-      style: [styles$q.row, styles$q.accordionHeaderContainer]
-    }, /*#__PURE__*/React.createElement(LabelLarge, null, "Label (", coord[0], ", ", coord[1], ")"), /*#__PURE__*/React.createElement(Strut, {
-      size: spacing.xSmall_8
-    }), text !== "" && /*#__PURE__*/React.createElement(LabelLarge, {
-      style: [{
-        backgroundColor: color.white,
-        color: lockedFigureColors[color$1]
-      }, styles$q.accordionHeader]
-    }, text)),
-    containerStyle: !onMove && styles$q.innerLabelAccordionPanel
-  }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
-    coord: coord,
-    onChange: newCoords => {
-      onChangeProps({
-        coord: newCoords
-      });
-    },
-    style: styles$q.spaceUnder
-  }), /*#__PURE__*/React.createElement(LabelMedium, {
-    tag: "label",
-    style: [styles$q.row, styles$q.spaceUnder]
-  }, "TeX", /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xSmall_8
-  }), /*#__PURE__*/React.createElement(TextField, {
-    value: text,
-    placeholder: "ex. x^2 or \\frac{1}{2}",
-    onChange: newValue => onChangeProps({
-      text: newValue
-    })
-  })), /*#__PURE__*/React.createElement(View, {
-    style: styles$q.row
-  }, onMove && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorSelect, {
-    selectedValue: color$1,
-    onChange: newColor => {
-      onChangeProps({
-        color: newColor
-      });
-    },
-    style: styles$q.spaceUnder
-  }), /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.medium_16
-  })), /*#__PURE__*/React.createElement(LabelMedium, {
-    tag: "label",
-    style: styles$q.row
-  }, "size", /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xSmall_8
-  }), /*#__PURE__*/React.createElement(SingleSelect, {
-    selectedValue: size,
-    onChange: newValue => onChangeProps({
-      size: newValue
-    })
-    // Placeholder is required, but never gets used since
-    // we have a label for the select.
-    ,
-    placeholder: ""
-  }, /*#__PURE__*/React.createElement(OptionItem, {
-    value: "small",
-    label: "small"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "medium",
-    label: "medium"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "large",
-    label: "large"
-  })))), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
-    figureType: type,
-    onMove: onMove,
-    onRemove: onRemove
-  }));
-}
-const styles$q = StyleSheet.create({
-  accordionHeaderContainer: {
-    // Stop the label summary from wrapping.
-    whiteSpace: "nowrap"
-  },
-  accordionHeader: {
-    padding: spacing.xxxSmall_4,
-    marginInlineEnd: spacing.xSmall_8,
-    borderRadius: spacing.xxxSmall_4,
-    textOverflow: "ellipsis",
-    overflow: "hidden"
-  },
-  row: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    // Allow truncation, stop bleeding over the edge.
-    minWidth: 0
-  },
-  spaceUnder: {
-    marginBottom: spacing.xSmall_8
-  },
-  innerLabelAccordionPanel: {
-    backgroundColor: color.white
-  }
-});
+  const equationPrefix = directionalAxis === "x" ? "y=" : "x=";
+  const domainRangeText = directionalAxis === "x" ? "domain" : "range";
+  const lineLabel = `Function (${equationPrefix}${equation})`;
 
-const LabeledSwitch = props => {
-  const {
-    checked,
-    label,
-    style,
-    onChange
-  } = props;
-  const ids = useUniqueIdWithMock();
-  const switchId = ids.get("switch");
-  return /*#__PURE__*/React.createElement(View, {
-    style: [styles$p.row, style]
-  }, /*#__PURE__*/React.createElement(Switch, {
-    id: switchId,
-    checked: checked,
-    onChange: onChange
-  }), /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xSmall_8
-  }), /*#__PURE__*/React.createElement(LabelMedium, {
-    tag: "label",
-    htmlFor: switchId
-  }, label));
-};
-const styles$p = StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "center"
+  // Tracking the string value of domain/range constraints to handle interim state of
+  //     entering a negative value, as well as representing Infinity as an empty string.
+  // This variable is used when specifying the values of the input fields.
+  const [domainEntries, setDomainEntries] = useState([domain && domain[0] !== -Infinity ? domain[0].toString() : "", domain && domain[1] !== Infinity ? domain[1].toString() : ""]);
+  const [exampleCategory, setExampleCategory] = useState("");
+  useEffect(() => {
+    // "useEffect" used to maintain parity between domain/range constraints and their string representation.
+    setDomainEntries([domain && domain[0] !== -Infinity ? domain[0].toString() : "", domain && domain[1] !== Infinity ? domain[1].toString() : ""]);
+  }, [domain]);
+
+  // Generic function for handling property changes (except for 'domain/range')
+  function handlePropChange(property, newValue) {
+    const updatedProps = {};
+    updatedProps[property] = newValue;
+    onChangeProps(updatedProps);
   }
-});
 
-/**
- * DefiningPointSettings is a component that allows the user to edit the
- * settings of a point that defines a locked figure (ex. line) on the graph.
- *
- * Used in the interactive graph editor's locked figures section.
- */
-const DefiningPointSettings = props => {
-  const {
-    coord,
-    color: pointColor,
-    filled = true,
-    label,
-    showPoint = "false",
-    error,
-    onChangeProps,
-    onTogglePoint,
-    expanded,
-    onToggle
-  } = props;
-  function handleColorChange(newValue) {
+  /*
+   Reason for having a separate 'propChange' function for 'domain/range':
+      Domain/Range entries are optional. Their default value is +/- Infinity.
+      Since input fields that are empty evaluate to zero, there needs to be
+          dedicated code to convert empty to Infinity.
+   */
+  function handleDomainChange(limitIndex, newValueString) {
+    const newDomainEntries = [...domainEntries];
+    newDomainEntries[limitIndex] = newValueString;
+    setDomainEntries(newDomainEntries);
+    const newDomain = domain ? [...domain] : [-Infinity, Infinity];
+    let newValue = parseFloat(newValueString);
+    if (newValueString === "" && limitIndex === 0) {
+      newValue = -Infinity;
+    } else if (newValueString === "" && limitIndex === 1) {
+      newValue = Infinity;
+    }
+    newDomain[limitIndex] = newValue;
     onChangeProps({
+      domain: newDomain
+    });
+  }
+  const exampleCategories = Object.keys(examples);
+  const exampleCategorySelected = exampleCategory !== "";
+  const exampleContent = exampleCategorySelected ? examples[exampleCategory] : ["Select category to see example equations"];
+  function handleColorChange(newValue) {
+    const newProps = {
+      color: newValue
+    };
+
+    // Update the color of the all labels to match the point
+    newProps.labels = labels == null ? void 0 : labels.map(label => _extends({}, label, {
       color: newValue
+    }));
+    onChangeProps(newProps);
+  }
+  function handleLabelChange(updatedLabel, labelIndex) {
+    if (!labels) {
+      return;
+    }
+    const updatedLabels = [...labels];
+    updatedLabels[labelIndex] = _extends({}, labels[labelIndex], updatedLabel);
+    onChangeProps({
+      labels: updatedLabels
+    });
+  }
+  function handleLabelRemove(labelIndex) {
+    if (!labels) {
+      return;
+    }
+    const updatedLabels = labels.filter((_, index) => index !== labelIndex);
+    onChangeProps({
+      labels: updatedLabels
     });
   }
   return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
-    expanded: expanded,
-    onToggle: onToggle,
-    containerStyle: styles$o.container,
-    panelStyle: styles$o.accordionPanel,
-    header:
-    /*#__PURE__*/
-    // Summary: Point, coords, color (filled/open)
-    React.createElement(View, {
-      style: styles$o.row
-    }, /*#__PURE__*/React.createElement(LabelLarge, null, `${label || "Point"} (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React.createElement(Strut, {
+    expanded: props.expanded,
+    onToggle: props.onToggle,
+    header: /*#__PURE__*/React.createElement(View, {
+      style: styles$p.row
+    }, /*#__PURE__*/React.createElement(LabelLarge, {
+      style: styles$p.accordionHeader
+    }, lineLabel), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
-    }), showPoint && /*#__PURE__*/React.createElement(ColorSwatch, {
-      color: pointColor,
-      filled: filled
+    }), /*#__PURE__*/React.createElement(LineSwatch, {
+      color: lineColor,
+      lineStyle: strokeStyle
     }))
-  }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
-    coord: coord,
-    error: !!error,
-    style: styles$o.spaceUnder,
-    onChange: newCoords => {
-      onChangeProps({
-        coord: newCoords
-      });
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles$p.row, styles$p.spaceUnder]
+  }, /*#__PURE__*/React.createElement(ColorSelect, {
+    selectedValue: lineColor,
+    onChange: handleColorChange
+  }), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), /*#__PURE__*/React.createElement(LineStrokeSelect, {
+    selectedValue: strokeStyle,
+    onChange: newValue => {
+      handlePropChange("strokeStyle", newValue);
     }
-  }), onTogglePoint && /*#__PURE__*/React.createElement(LabeledSwitch, {
-    label: "show point on graph",
-    checked: !!showPoint,
-    style: showPoint && styles$o.spaceUnder,
-    onChange: onTogglePoint
-  }), showPoint && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorSelect, {
-    selectedValue: pointColor,
-    onChange: handleColorChange,
-    style: styles$o.spaceUnder
-  }), /*#__PURE__*/React.createElement(LabeledSwitch, {
-    label: "open point",
-    checked: !filled,
+  })), /*#__PURE__*/React.createElement(View, {
+    style: [styles$p.row, styles$p.rowSpace]
+  }, /*#__PURE__*/React.createElement(SingleSelect, {
+    selectedValue: directionalAxis,
     onChange: newValue => {
+      handlePropChange("directionalAxis", newValue);
+    },
+    "aria-label": "equation prefix",
+    style: [styles$p.dropdownLabel, styles$p.axisMenu]
+    // Placeholder is required, but never gets used.
+    ,
+    placeholder: ""
+  }, /*#__PURE__*/React.createElement(OptionItem, {
+    value: "x",
+    label: "y ="
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "y",
+    label: "x ="
+  })), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xSmall_8
+  }), /*#__PURE__*/React.createElement(TextField, {
+    type: "text",
+    "aria-label": "equation",
+    value: equation,
+    onChange: newValue => {
+      handlePropChange("equation", newValue);
+    },
+    style: [styles$p.textField]
+  })), /*#__PURE__*/React.createElement(View, {
+    style: [styles$p.row, styles$p.rowSpace]
+  }, /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    style: [styles$p.dropdownLabel, styles$p.domainMin]
+  }, `${domainRangeText} min`, /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(TextField, {
+    type: "number",
+    style: styles$p.domainMinField,
+    value: domainEntries[0],
+    onChange: newValue => {
+      handleDomainChange(0, newValue);
+    }
+  })), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.medium_16
+  }), /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    "aria-label": `${domainRangeText} max`,
+    style: [styles$p.dropdownLabel, styles$p.domainMax]
+  }, "max", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(TextField, {
+    type: "number",
+    style: styles$p.domainMaxField,
+    value: domainEntries[1],
+    onChange: newValue => {
+      handleDomainChange(1, newValue);
+    }
+  }))), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
+    header: /*#__PURE__*/React.createElement(LabelLarge, null, "Example Functions"),
+    expanded: false,
+    containerStyle: styles$p.exampleWorkspace,
+    panelStyle: styles$p.exampleAccordionPanel
+  }, /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    style: styles$p.dropdownLabel
+  }, "Choose a category", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
+    selectedValue: exampleCategory,
+    onChange: setExampleCategory,
+    placeholder: "examples"
+  }, exampleCategories.map(category => {
+    return /*#__PURE__*/React.createElement(OptionItem, {
+      key: category,
+      value: category,
+      label: category
+    });
+  }))), exampleCategorySelected && /*#__PURE__*/React.createElement("ul", {
+    className: css(styles$p.exampleContainer)
+  }, exampleContent.map((example, index) => /*#__PURE__*/React.createElement(ExampleItem, {
+    category: exampleCategory,
+    example: example,
+    index: index,
+    pasteEquationFn: handlePropChange
+  })))), (flags == null || (_flags$mafs = flags["mafs"]) == null ? void 0 : _flags$mafs["locked-function-labels"]) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: styles$p.horizontalRule
+  }), labels == null ? void 0 : labels.map((label, labelIndex) => /*#__PURE__*/React.createElement(LockedLabelSettings, _extends({}, label, {
+    expanded: true,
+    onChangeProps: newLabel => {
+      handleLabelChange(newLabel, labelIndex);
+    },
+    onRemove: () => {
+      handleLabelRemove(labelIndex);
+    },
+    containerStyle: styles$p.labelContainer
+  }))), /*#__PURE__*/React.createElement(Button, {
+    kind: "tertiary",
+    startIcon: plusCircle,
+    onClick: () => {
+      var _labels$length;
+      const newLabel = _extends({}, getDefaultFigureForType("label"), {
+        // Vertical offset for each label so they
+        // don't overlap.
+        coord: [0, -((_labels$length = labels == null ? void 0 : labels.length) != null ? _labels$length : 0)],
+        // Default to the same color as the function
+        color: lineColor
+      });
       onChangeProps({
-        filled: !newValue
+        labels: [...(labels != null ? labels : []), newLabel]
       });
-    }
-  })));
+    },
+    style: styles$p.addButton
+  }, "Add visible label")), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
+    figureType: props.type,
+    onMove: onMove,
+    onRemove: onRemove
+  }));
 };
-const styles$o = StyleSheet.create({
-  container: {
-    marginTop: spacing.xSmall_8,
-    marginBottom: 0,
-    marginLeft: -spacing.xxxSmall_4,
-    marginRight: -spacing.xxxSmall_4,
-    backgroundColor: color.white
+const ExampleItem = props => {
+  const {
+    category,
+    example,
+    index,
+    pasteEquationFn
+  } = props;
+  const exampleId = useId();
+  return /*#__PURE__*/React.createElement("li", {
+    key: `${category}-${index}`,
+    className: css(styles$p.exampleRow)
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: autoPasteIcon,
+    "aria-label": "paste example",
+    "aria-describedby": exampleId,
+    onClick: () => pasteEquationFn("equation", example),
+    size: "medium",
+    style: styles$p.copyPasteButton
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    icon: copyIcon,
+    "aria-label": "copy example",
+    "aria-describedby": exampleId,
+    onClick: () => navigator.clipboard.writeText(example),
+    size: "medium",
+    style: styles$p.copyPasteButton
+  }), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxxSmall_4
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles$p.exampleContent,
+    id: exampleId
+  }, example));
+};
+const styles$p = StyleSheet.create({
+  accordionHeader: {
+    textOverflow: "ellipsis",
+    // A maximum width needs to be specified in order for the ellipsis to work.
+    // The 64px in the calculation accounts for the line swatch (56px) and the preceding strut (8px).
+    // Margin and padding won't work here because they would create space between the header text and the swatch.
+    maxWidth: "calc(100% - 64px)",
+    overflow: "hidden",
+    whiteSpace: "nowrap"
+  },
+  axisMenu: {
+    minWidth: "auto"
+  },
+  copyPasteButton: {
+    flexShrink: "0",
+    margin: "0 2px"
+  },
+  domainMin: {
+    justifyContent: "space-between",
+    // The 'width' property is applied to the label, which wraps the text and the input field.
+    // The width of the input fields (min/max) should be the same (to have a consistent look),
+    //     so the following calculation distributes the space accordingly.
+    // For the "domain/range min" block, the text is 82.7px, and the strut is 6px (88.7px total).
+    // The "domain/range max" block is 30.23px, and the strut is 6px (36.23px total).
+    // The calculation takes the remain space after the text & struts (141px total) are removed,
+    //     and divides it between the two input fields equally.
+    // The calculation reads: "Take 1/2 of the non-text space, and add the required space for this label's text"
+    width: "calc(((100% - 141px) / 2) + 88.7px)",
+    // @ts-expect-error // TS2353: textWrap does not exist in type CSSProperties
+    textWrap: "nowrap"
+  },
+  domainMinField: {
+    width: "calc(100% - 88.7px)" // make room for the label
+  },
+
+  domainMax: {
+    // See explanation for "domainMin" for the calculation below.
+    width: "calc(((100% - 141px) / 2) + 36.2px)"
   },
-  accordionPanel: {
-    // Need more space since we don't have the actions' margins.
-    paddingBottom: spacing.medium_16
+  domainMaxField: {
+    width: "calc(100% - 36.2px)" // make room for the label
+  },
+
+  dropdownLabel: {
+    alignItems: "center",
+    display: "flex"
+  },
+  exampleAccordionPanel: {
+    alignItems: "start",
+    paddingBottom: "12px",
+    flexDirection: "row",
+    flexWrap: "wrap"
+  },
+  exampleContainer: {
+    background: "white",
+    border: `1px solid ${color.fadedOffBlack16}`,
+    borderRadius: "4px",
+    flexGrow: "1",
+    listStyleType: "none",
+    // Nothing special about the maxHeight value,
+    //    just a good height to partially show a 3rd example in the list
+    //    to hint at scrollable content.
+    maxHeight: "88px",
+    margin: "8px 0 0 0",
+    overflowY: "scroll",
+    padding: "4px 12px 4px 4px"
+  },
+  exampleContent: {
+    fontFamily: `"Lato", sans-serif`,
+    flexGrow: "1",
+    color: color.offBlack
+  },
+  exampleRow: {
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "row",
+    minHeight: "44px"
+  },
+  exampleWorkspace: {
+    background: color.white50
+  },
+  rowSpace: {
+    marginTop: spacing.xSmall_8
   },
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
-  spaceUnder: {
-    marginBottom: spacing.xSmall_8
+  textField: {
+    flexGrow: "1"
+  },
+  // Label settings styles
+  addButton: {
+    alignSelf: "start"
+  },
+  horizontalRule: {
+    marginTop: spacing.small_12,
+    marginBottom: spacing.xxxSmall_4,
+    height: 1,
+    backgroundColor: color.offBlack16
+  },
+  labelContainer: {
+    backgroundColor: color.white
   }
 });
 
-const lengthZeroStr = "The line cannot have length 0.";
-const LockedLineSettings = props => {
+const LabeledSwitch = props => {
   const {
-    kind,
-    points,
-    color: lineColor,
-    lineStyle = "solid",
-    showPoint1,
-    showPoint2,
-    onChangeProps,
-    onMove,
-    onRemove
+    checked,
+    label,
+    style,
+    onChange
   } = props;
-  const [point1, point2] = points;
-  const capitalizeKind = kind.charAt(0).toUpperCase() + kind.slice(1);
-  const lineLabel = `${capitalizeKind} (${point1.coord[0]},
-        ${point1.coord[1]}), (${point2.coord[0]}, ${point2.coord[1]})`;
-
-  // Check if the line has length 0.
-  const isInvalid = vector.equal(point1.coord, point2.coord);
-  function handleChangePoint(newPointProps, index) {
-    const newPoints = [...points];
-    newPoints[index] = _extends({}, points[index], newPointProps);
-    onChangeProps({
-      points: newPoints
-    });
-  }
-  function handleColorChange(newColor) {
-    onChangeProps({
-      color: newColor,
-      // Keep the line's points' colors in sync with the line color.
-      points: [_extends({}, point1, {
-        color: newColor
-      }), _extends({}, point2, {
-        color: newColor
-      })]
-    });
-  }
-  return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
-    expanded: props.expanded,
-    onToggle: props.onToggle,
-    header: /*#__PURE__*/React.createElement(View, {
-      style: styles$n.row
-    }, /*#__PURE__*/React.createElement(LabelLarge, null, lineLabel), /*#__PURE__*/React.createElement(Strut, {
-      size: spacing.xSmall_8
-    }), /*#__PURE__*/React.createElement(LineSwatch, {
-      color: lineColor,
-      lineStyle: lineStyle
-    }))
-  }, /*#__PURE__*/React.createElement(LabelMedium, {
-    tag: "label",
-    style: [styles$n.row, styles$n.spaceUnder]
-  }, "kind", /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xxxSmall_4
-  }), /*#__PURE__*/React.createElement(SingleSelect, {
-    selectedValue: kind,
-    onChange: value => onChangeProps({
-      kind: value
-    })
-    // Placeholder is required, but never gets used.
-    ,
-    placeholder: ""
-  }, /*#__PURE__*/React.createElement(OptionItem, {
-    value: "line",
-    label: "line"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "ray",
-    label: "ray"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "segment",
-    label: "segment"
-  }))), /*#__PURE__*/React.createElement(View, {
-    style: styles$n.row
-  }, /*#__PURE__*/React.createElement(ColorSelect, {
-    selectedValue: lineColor,
-    onChange: handleColorChange
+  const ids = useUniqueIdWithMock();
+  const switchId = ids.get("switch");
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles$o.row, style]
+  }, /*#__PURE__*/React.createElement(Switch, {
+    id: switchId,
+    checked: checked,
+    onChange: onChange
   }), /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.small_12
-  }), /*#__PURE__*/React.createElement(LineStrokeSelect, {
-    selectedValue: lineStyle,
-    onChange: value => onChangeProps({
-      lineStyle: value
-    })
-  })), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
-    style: styles$n.errorText
-  }, lengthZeroStr), /*#__PURE__*/React.createElement(DefiningPointSettings, _extends({
-    label: "Point 1",
-    showPoint: showPoint1,
-    error: isInvalid ? lengthZeroStr : null
-  }, point1, {
-    onTogglePoint: newValue => onChangeProps({
-      showPoint1: newValue
-    }),
-    onChangeProps: newProps => handleChangePoint(newProps, 0)
-  })), /*#__PURE__*/React.createElement(DefiningPointSettings, _extends({
-    label: "Point 2",
-    showPoint: showPoint2,
-    error: isInvalid ? lengthZeroStr : null
-  }, point2, {
-    onTogglePoint: newValue => onChangeProps({
-      showPoint2: newValue
-    }),
-    onChangeProps: newProps => handleChangePoint(newProps, 1)
-  })), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
-    figureType: props.type,
-    onMove: onMove,
-    onRemove: onRemove
-  }));
+    size: spacing.xSmall_8
+  }), /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    htmlFor: switchId
+  }, label));
 };
-const styles$n = StyleSheet.create({
+const styles$o = StyleSheet.create({
   row: {
-    display: "flex",
     flexDirection: "row",
     alignItems: "center"
-  },
-  spaceUnder: {
-    marginBottom: spacing.xSmall_8
-  },
-  errorText: {
-    color: color.red
   }
 });
 
-const DEFAULT_COLOR = "grayH";
-function getDefaultFigureForType(type) {
-  switch (type) {
-    case "point":
-      return {
-        type: "point",
-        coord: [0, 0],
-        color: DEFAULT_COLOR,
-        filled: true,
-        labels: []
-      };
-    case "line":
-      return {
-        type: "line",
-        kind: "line",
-        points: [getDefaultFigureForType("point"), _extends({}, getDefaultFigureForType("point"), {
-          coord: [2, 2]
-        })],
-        color: DEFAULT_COLOR,
-        lineStyle: "solid",
-        showPoint1: false,
-        showPoint2: false
-      };
-    case "vector":
-      return {
-        type: "vector",
-        points: [[0, 0], [2, 2]],
-        color: DEFAULT_COLOR
-      };
-    case "ellipse":
-      return {
-        type: "ellipse",
-        center: [0, 0],
-        radius: [1, 1],
-        angle: 0,
-        color: DEFAULT_COLOR,
-        fillStyle: "none",
-        strokeStyle: "solid"
-      };
-    case "polygon":
-      return {
-        type: "polygon",
-        points: [[0, 2], [-1, 0], [1, 0]],
-        color: DEFAULT_COLOR,
-        showVertices: false,
-        fillStyle: "none",
-        strokeStyle: "solid"
-      };
-    case "function":
-      return {
-        type: "function",
-        color: DEFAULT_COLOR,
-        strokeStyle: "solid",
-        equation: "x^2",
-        directionalAxis: "x"
-      };
-    case "label":
-      return {
-        type: "label",
-        coord: [0, 0],
-        text: "",
-        color: DEFAULT_COLOR,
-        size: "medium"
-      };
-    default:
-      throw new UnreachableCaseError(type);
-  }
-}
-
 const LockedPointSettings = props => {
-  var _flags$mafs;
+  var _flags$mafs, _flags$mafs2;
   const {
     flags,
+    headerLabel,
     coord,
     color: pointColor,
     filled = true,
     labels,
     onChangeProps,
     onMove,
-    onRemove
+    onRemove,
+    // defining point props
+    showPoint,
+    expanded,
+    onTogglePoint,
+    onToggle
   } = props;
+  const isDefiningPoint = !onMove && !onRemove;
   function handleColorChange(newValue) {
     const newProps = {
       color: newValue
     };
 
     // Update the color of the all labels to match the point
-    newProps.labels = labels.map(label => _extends({}, label, {
-      color: newValue
-    }));
+    if (labels) {
+      newProps.labels = labels.map(label => _extends({}, label, {
+        color: newValue
+      }));
+    }
     onChangeProps(newProps);
   }
   function handleCoordChange(newCoord) {
@@ -31616,12 +31566,17 @@ const LockedPointSettings = props => {
     };
 
     // Update the coord by the same amount as the point for all labels
-    newProps.labels = labels.map(label => _extends({}, label, {
-      coord: [label.coord[0] + xOffset, label.coord[1] + yOffset]
-    }));
+    if (labels) {
+      newProps.labels = labels.map(label => _extends({}, label, {
+        coord: [label.coord[0] + xOffset, label.coord[1] + yOffset]
+      }));
+    }
     onChangeProps(newProps);
   }
   function handleLabelChange(updatedLabel, labelIndex) {
+    if (!labels) {
+      return;
+    }
     const updatedLabels = [...labels];
     updatedLabels[labelIndex] = _extends({}, labels[labelIndex], updatedLabel);
     onChangeProps({
@@ -31629,20 +31584,25 @@ const LockedPointSettings = props => {
     });
   }
   function handleLabelRemove(labelIndex) {
+    if (!labels) {
+      return;
+    }
     const updatedLabels = labels.filter((_, index) => index !== labelIndex);
     onChangeProps({
       labels: updatedLabels
     });
   }
   return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
-    expanded: props.expanded,
-    onToggle: props.onToggle,
+    expanded: expanded,
+    onToggle: onToggle,
+    containerStyle: isDefiningPoint ? styles$n.definingContainer : undefined,
+    panelStyle: isDefiningPoint ? styles$n.definingPanel : undefined,
     header:
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React.createElement(View, {
-      style: styles$m.row
-    }, /*#__PURE__*/React.createElement(LabelLarge, null, `Point (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React.createElement(Strut, {
+      style: styles$n.row
+    }, /*#__PURE__*/React.createElement(LabelLarge, null, `${headerLabel || "Point"} (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(ColorSwatch, {
       color: pointColor,
@@ -31650,12 +31610,17 @@ const LockedPointSettings = props => {
     }))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: coord,
-    style: styles$m.spaceUnder,
+    style: styles$n.spaceUnder,
     onChange: handleCoordChange
-  }), /*#__PURE__*/React.createElement(ColorSelect, {
+  }), onTogglePoint && /*#__PURE__*/React.createElement(LabeledSwitch, {
+    label: "show point on graph",
+    checked: !!showPoint,
+    style: showPoint && styles$n.spaceUnder,
+    onChange: onTogglePoint
+  }), (!isDefiningPoint || 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,
@@ -31663,9 +31628,9 @@ const LockedPointSettings = props => {
       onChangeProps({
         filled: !newValue
       });
-    },
-    style: styles$m.spaceUnder
-  }), (flags == null || (_flags$mafs = flags["mafs"]) == null ? void 0 : _flags$mafs["locked-point-labels"]) && /*#__PURE__*/React.createElement(React.Fragment, null, labels.map((label, labelIndex) => /*#__PURE__*/React.createElement(LockedLabelSettings, _extends({}, label, {
+    }
+  })), (!isDefiningPoint && (flags == null || (_flags$mafs = flags["mafs"]) == null ? void 0 : _flags$mafs["locked-point-labels"]) || isDefiningPoint && (flags == null || (_flags$mafs2 = flags["mafs"]) == null ? void 0 : _flags$mafs2["locked-line-labels"])) && /*#__PURE__*/React.createElement(React.Fragment, null, labels == null ? void 0 : labels.map((label, labelIndex) => /*#__PURE__*/React.createElement(LockedLabelSettings, _extends({}, label, {
+    containerStyle: !isDefiningPoint && styles$n.lockedPointLabelContainer,
     expanded: true,
     onChangeProps: newLabel => {
       handleLabelChange(newLabel, labelIndex);
@@ -31677,6 +31642,7 @@ const LockedPointSettings = props => {
     kind: "tertiary",
     startIcon: plusCircle,
     onClick: () => {
+      var _labels$length;
       const newLabel = _extends({}, getDefaultFigureForType("label"), {
         // Place the label at the same position
         // as the point. Add a small offset to
@@ -31684,12 +31650,228 @@ const LockedPointSettings = props => {
         coord: [coord[0] + 0.5,
         // Additional offset for each label so
         // they don't overlap.
-        coord[1] - 1 * (labels == null ? void 0 : labels.length)],
+        coord[1] - 1 * ((_labels$length = labels == null ? void 0 : labels.length) != null ? _labels$length : 0)],
         // Default to the same color as the point
         color: pointColor
       });
       onChangeProps({
-        labels: [...labels, newLabel]
+        labels: [...(labels != null ? labels : []), newLabel]
+      });
+    },
+    style: styles$n.addButton
+  }, "Add visible label")), onRemove && /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
+    figureType: props.type,
+    onMove: onMove,
+    onRemove: onRemove
+  }));
+};
+const styles$n = StyleSheet.create({
+  definingContainer: {
+    marginTop: spacing.xSmall_8,
+    marginBottom: 0,
+    marginLeft: -spacing.xxxSmall_4,
+    marginRight: -spacing.xxxSmall_4,
+    backgroundColor: color.white
+  },
+  definingPanel: {
+    // Need more space since we don't have the actions' margins.
+    paddingBottom: spacing.xxSmall_6
+  },
+  // A regular point (NOT a defining point) has label
+  // accordions with white backgrounds.
+  lockedPointLabelContainer: {
+    backgroundColor: color.white
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  spaceUnder: {
+    marginBottom: spacing.xSmall_8
+  },
+  addButton: {
+    alignSelf: "start"
+  }
+});
+
+const lengthZeroStr = "The line cannot have length 0.";
+const LockedLineSettings = props => {
+  var _flags$mafs;
+  const {
+    flags,
+    kind,
+    points,
+    color: lineColor,
+    lineStyle = "solid",
+    showPoint1,
+    showPoint2,
+    labels,
+    onChangeProps,
+    onMove,
+    onRemove
+  } = props;
+  const [point1, point2] = points;
+  const capitalizeKind = kind.charAt(0).toUpperCase() + kind.slice(1);
+  const lineLabel = `${capitalizeKind} (${point1.coord[0]},
+        ${point1.coord[1]}), (${point2.coord[0]}, ${point2.coord[1]})`;
+
+  // Check if the line has length 0.
+  const isInvalid = vector.equal(point1.coord, point2.coord);
+  function handleChangePoint(newPointProps, index) {
+    const newPoints = [...points];
+    newPoints[index] = _extends({}, points[index], newPointProps);
+
+    // Update labels to be centered between the two points,
+    // retaining existing offset.
+    const oldMidpoint = vec.midpoint(points[0].coord, points[1].coord);
+    const newMidpoint = vec.midpoint(newPoints[0].coord, newPoints[1].coord);
+    const offset = [newMidpoint[0] - oldMidpoint[0], newMidpoint[1] - oldMidpoint[1]];
+    const newLabels = labels == null ? void 0 : labels.map((label, labelIndex) => _extends({}, label, {
+      coord: [label.coord[0] + offset[0], label.coord[1] + offset[1]]
+    }));
+    onChangeProps({
+      points: newPoints,
+      labels: newLabels
+    });
+  }
+  function handleColorChange(newColor) {
+    var _point1$labels, _point2$labels;
+    const newLabels = labels == null ? void 0 : labels.map(label => _extends({}, label, {
+      color: newColor
+    }));
+    onChangeProps({
+      color: newColor,
+      // Keep the line's points' colors in sync with the line color.
+      points: [_extends({}, point1, {
+        color: newColor,
+        labels: (_point1$labels = point1.labels) == null ? void 0 : _point1$labels.map(label => _extends({}, label, {
+          color: newColor
+        }))
+      }), _extends({}, point2, {
+        color: newColor,
+        labels: (_point2$labels = point2.labels) == null ? void 0 : _point2$labels.map(label => _extends({}, label, {
+          color: newColor
+        }))
+      })],
+      // Keep the line's labels' colors in sync with the line color.
+      labels: newLabels
+    });
+  }
+  function handleLabelChange(updatedLabel, labelIndex) {
+    if (!labels) {
+      return;
+    }
+    const updatedLabels = [...labels];
+    updatedLabels[labelIndex] = _extends({}, labels[labelIndex], updatedLabel);
+    onChangeProps({
+      labels: updatedLabels
+    });
+  }
+  function handleLabelRemove(labelIndex) {
+    if (!labels) {
+      return;
+    }
+    const updatedLabels = labels.filter((_, index) => index !== labelIndex);
+    onChangeProps({
+      labels: updatedLabels
+    });
+  }
+  return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
+    expanded: props.expanded,
+    onToggle: props.onToggle,
+    header: /*#__PURE__*/React.createElement(View, {
+      style: styles$m.row
+    }, /*#__PURE__*/React.createElement(LabelLarge, null, lineLabel), /*#__PURE__*/React.createElement(Strut, {
+      size: spacing.xSmall_8
+    }), /*#__PURE__*/React.createElement(LineSwatch, {
+      color: lineColor,
+      lineStyle: lineStyle
+    }))
+  }, /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    style: [styles$m.row, styles$m.spaceUnder]
+  }, "kind", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxxSmall_4
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
+    selectedValue: kind,
+    onChange: value => onChangeProps({
+      kind: value
+    })
+    // Placeholder is required, but never gets used.
+    ,
+    placeholder: ""
+  }, /*#__PURE__*/React.createElement(OptionItem, {
+    value: "line",
+    label: "line"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "ray",
+    label: "ray"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "segment",
+    label: "segment"
+  }))), /*#__PURE__*/React.createElement(View, {
+    style: styles$m.row
+  }, /*#__PURE__*/React.createElement(ColorSelect, {
+    selectedValue: lineColor,
+    onChange: handleColorChange
+  }), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), /*#__PURE__*/React.createElement(LineStrokeSelect, {
+    selectedValue: lineStyle,
+    onChange: value => onChangeProps({
+      lineStyle: value
+    })
+  })), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
+    style: styles$m.errorText
+  }, lengthZeroStr), /*#__PURE__*/React.createElement(LockedPointSettings, _extends({
+    flags: flags,
+    headerLabel: "Point 1",
+    expanded: true,
+    showPoint: showPoint1,
+    error: isInvalid ? lengthZeroStr : null
+  }, point1, {
+    onTogglePoint: newValue => onChangeProps({
+      showPoint1: newValue
+    }),
+    onChangeProps: newProps => handleChangePoint(newProps, 0)
+  })), /*#__PURE__*/React.createElement(LockedPointSettings, _extends({
+    flags: flags,
+    headerLabel: "Point 2",
+    expanded: true,
+    showPoint: showPoint2,
+    error: isInvalid ? lengthZeroStr : null
+  }, point2, {
+    onTogglePoint: newValue => onChangeProps({
+      showPoint2: newValue
+    }),
+    onChangeProps: newProps => handleChangePoint(newProps, 1)
+  })), (flags == null || (_flags$mafs = flags["mafs"]) == null ? void 0 : _flags$mafs["locked-line-labels"]) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: styles$m.horizontalRule
+  }), labels == null ? void 0 : labels.map((label, labelIndex) => /*#__PURE__*/React.createElement(LockedLabelSettings, _extends({}, label, {
+    expanded: true,
+    onChangeProps: newLabel => {
+      handleLabelChange(newLabel, labelIndex);
+    },
+    onRemove: () => {
+      handleLabelRemove(labelIndex);
+    },
+    containerStyle: styles$m.labelContainer
+  }))), /*#__PURE__*/React.createElement(Button, {
+    kind: "tertiary",
+    startIcon: plusCircle,
+    onClick: () => {
+      var _labels$length;
+      // Additional vertical offset for each label so
+      // they don't overlap.
+      const offsetPerLabel = [0, -1];
+      const labelLocation = vec.add(vec.scale(offsetPerLabel, (_labels$length = labels == null ? void 0 : labels.length) != null ? _labels$length : 0), vec.midpoint(points[0].coord, points[1].coord));
+      const newLabel = _extends({}, getDefaultFigureForType("label"), {
+        coord: labelLocation,
+        // Default to the same color as the line
+        color: lineColor
+      });
+      onChangeProps({
+        labels: [...(labels != null ? labels : []), newLabel]
       });
     },
     style: styles$m.addButton
@@ -31701,14 +31883,27 @@ const LockedPointSettings = props => {
 };
 const styles$m = StyleSheet.create({
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
   spaceUnder: {
     marginBottom: spacing.xSmall_8
   },
+  errorText: {
+    color: color.red
+  },
   addButton: {
     alignSelf: "start"
+  },
+  horizontalRule: {
+    marginTop: spacing.small_12,
+    marginBottom: spacing.xxxSmall_4,
+    height: 1,
+    backgroundColor: color.offBlack16
+  },
+  labelContainer: {
+    backgroundColor: color.white
   }
 });
 
@@ -31959,17 +32154,14 @@ const styles$k = StyleSheet.create({
   }
 });
 
-/**
- * LockedVectorSettings is a component that allows the user to edit the
- * settings of specifically a locked vector on the graph.
- *
- * Used in the interactive graph editor's locked figures section.
- */
 const lengthErrorMessage = "The vector cannot have length 0.";
 const LockedVectorSettings = props => {
+  var _flags$mafs;
   const {
+    flags,
     points,
     color: lineColor,
+    labels,
     onChangeProps,
     onMove,
     onRemove
@@ -31983,14 +32175,48 @@ const LockedVectorSettings = props => {
     if (typeof newCoord !== "undefined") {
       const newPoints = [...points];
       newPoints[index] = [...newCoord];
+
+      // Update labels to match the new points
+      const oldMidpoint = vec.midpoint(tail, tip);
+      const newMidpoint = vec.midpoint(newPoints[0], newPoints[1]);
+      const offset = vec.sub(newMidpoint, oldMidpoint);
+      const newLabels = labels == null ? void 0 : labels.map(label => _extends({}, label, {
+        coord: vec.add(label.coord, offset)
+      }));
       onChangeProps({
-        points: newPoints
+        points: newPoints,
+        labels: newLabels
       });
     }
   }
   function handleColorChange(newColor) {
-    onChangeProps({
+    const newProps = {
+      color: newColor
+    };
+
+    // Update the color of the all labels to match the point
+    newProps.labels = labels == null ? void 0 : labels.map(label => _extends({}, label, {
       color: newColor
+    }));
+    onChangeProps(newProps);
+  }
+  function handleLabelChange(updatedLabel, labelIndex) {
+    if (!labels) {
+      return;
+    }
+    const updatedLabels = [...labels];
+    updatedLabels[labelIndex] = _extends({}, labels[labelIndex], updatedLabel);
+    onChangeProps({
+      labels: updatedLabels
+    });
+  }
+  function handleLabelRemove(labelIndex) {
+    if (!labels) {
+      return;
+    }
+    const updatedLabels = labels.filter((_, index) => index !== labelIndex);
+    onChangeProps({
+      labels: updatedLabels
     });
   }
   return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
@@ -32039,7 +32265,37 @@ const LockedVectorSettings = props => {
     onChange: newProps => {
       handleChangePoint(newProps, 1);
     }
-  })), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
+  })), (flags == null || (_flags$mafs = flags["mafs"]) == null ? void 0 : _flags$mafs["locked-vector-labels"]) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: styles$j.horizontalRule
+  }), labels == null ? void 0 : labels.map((label, labelIndex) => /*#__PURE__*/React.createElement(LockedLabelSettings, _extends({}, label, {
+    expanded: true,
+    onChangeProps: newLabel => {
+      handleLabelChange(newLabel, labelIndex);
+    },
+    onRemove: () => {
+      handleLabelRemove(labelIndex);
+    },
+    containerStyle: styles$j.labelContainer
+  }))), /*#__PURE__*/React.createElement(Button, {
+    kind: "tertiary",
+    startIcon: plusCircle,
+    onClick: () => {
+      var _labels$length;
+      // Additional vertical offset for each label so
+      // they don't overlap.
+      const offsetPerLabel = [0, -1];
+      const labelLocation = vec.add(vec.scale(offsetPerLabel, (_labels$length = labels == null ? void 0 : labels.length) != null ? _labels$length : 0), vec.midpoint(tail, tip));
+      const newLabel = _extends({}, getDefaultFigureForType("label"), {
+        coord: labelLocation,
+        // Default to the same color as the vector
+        color: lineColor
+      });
+      onChangeProps({
+        labels: [...(labels != null ? labels : []), newLabel]
+      });
+    },
+    style: styles$j.addButton
+  }, "Add visible label")), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
@@ -32063,6 +32319,18 @@ const styles$j = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
+  },
+  addButton: {
+    alignSelf: "start"
+  },
+  horizontalRule: {
+    marginTop: spacing.small_12,
+    marginBottom: spacing.xxxSmall_4,
+    height: 1,
+    backgroundColor: color.offBlack16
+  },
+  labelContainer: {
+    backgroundColor: color.white
   }
 });