@khanacademy/perseus-editor 11.0.2 → 11.2.0

package/dist/es/index.js

@@ -1,11 +1,11 @@
 import { addLibraryVersionToPerseusDebug, PerseusError, Errors } from '@khanacademy/perseus-core';
-import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, WidgetJsonifyDeprecated, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, PerseusI18nContext, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, getLinearSystemCoords, getSegmentCoords, getLineCoords, lockedFigureColors, lockedFigureFillStyles, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, widgets } from '@khanacademy/perseus';
+import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, WidgetJsonifyDeprecated, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, PerseusI18nContext, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, getQuadraticCoords, getSinusoidCoords, getCircleCoords, getLinearSystemCoords, getSegmentCoords, getLineCoords, lockedFigureColors, lockedFigureFillStyles, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, widgets } from '@khanacademy/perseus';
 import * as React from 'react';
 import { useRef, useEffect } from 'react';
 import _ from 'underscore';
 import createReactClass from 'create-react-class';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
-import { color, spacing } from '@khanacademy/wonder-blocks-tokens';
+import { color, spacing, font } from '@khanacademy/wonder-blocks-tokens';
 import { StyleSheet, css } from 'aphrodite';
 import $ from 'jquery';
 import PropTypes from 'prop-types';
@@ -37,7 +37,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 = "11.0.2";
+const libVersion = "11.2.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -227,7 +227,7 @@ class SectionControlButton extends React.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$I.button
+      style: styles$L.button
     }, ({
       hovered,
       focused,
@@ -235,7 +235,7 @@ class SectionControlButton extends React.Component {
     }) => /*#__PURE__*/React.createElement(InlineIcon$a, icon));
   }
 }
-const styles$I = StyleSheet.create({
+const styles$L = StyleSheet.create({
   button: {
     backgroundColor: color.gold,
     margin: 2,
@@ -20740,13 +20740,13 @@ class WidgetSelect extends React.Component {
  * that collapse a region.
  */
 function ToggleableCaret(props) {
-  const iconStyle = props.isExpanded ? styles$H.expanded : styles$H.collapsed;
+  const iconStyle = props.isExpanded ? styles$K.expanded : styles$K.collapsed;
   return /*#__PURE__*/React.createElement(PhosphorIcon, {
     icon: caretRight,
     style: iconStyle
   });
 }
-const styles$H = StyleSheet.create({
+const styles$K = StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20779,16 +20779,16 @@ class TexErrorView extends React.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$G.errorContainer
+      style: styles$J.errorContainer
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$G.title,
+      style: styles$J.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React.createElement(ToggleableCaret, {
       isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React.createElement(View, {
-      style: styles$G.errorExplanation
+      style: styles$J.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$G.error,
+      style: styles$J.error,
       key: index
     }, /*#__PURE__*/React.createElement(View, {
       style: {
@@ -20797,7 +20797,7 @@ class TexErrorView extends React.Component {
     }, e.math), /*#__PURE__*/React.createElement(View, null, e.message))));
   }
 }
-const styles$G = StyleSheet.create({
+const styles$J = StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -24591,7 +24591,7 @@ class SimpleButton extends React.Component {
       } = _this$props,
       otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: css(styles$F.baseButton, color === "green" && styles$F.green, color === "orange" && styles$F.orange),
+      className: css(styles$I.baseButton, color === "green" && styles$I.green, color === "orange" && styles$I.orange),
       onClick: onClick
     }, otherProps), children);
   }
@@ -24606,7 +24606,7 @@ SimpleButton.defaultProps = {
   color: "green",
   onClick: () => {}
 };
-const styles$F = StyleSheet.create({
+const styles$I = StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24826,23 +24826,23 @@ const LeafContainer = ({
 }) => {
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$E.containerHeader)
+    className: css(styles$H.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$E.containerTitle)
+    className: css(styles$H.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$E.container)
+    className: css(styles$H.container)
   }, /*#__PURE__*/React.createElement("span", {
-    className: css(styles$E.row, styles$E.rowHeading)
+    className: css(styles$H.row, styles$H.rowHeading)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$E.columnLeft)
+    className: css(styles$H.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "pod-title " + css(styles$E.containerHeader)
+    className: "pod-title " + css(styles$H.containerHeader)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$E.containerTitle)
+    className: css(styles$H.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$E.columnRight)
+    className: css(styles$H.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24855,11 +24855,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$E.container)
+    className: css(styles$H.container)
   }, controls && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$E.columnLeft, styles$E.containerHeader)
+    className: css(styles$H.columnLeft, styles$H.containerHeader)
   }, controls), /*#__PURE__*/React.createElement("div", null, children), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$E.columnLeft)
+    className: css(styles$H.columnLeft)
   }, /*#__PURE__*/React.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24872,28 +24872,28 @@ const ObjectContainer = ({
   path
 }) => {
   const headingEditor = /*#__PURE__*/React.createElement("div", {
-    className: css(styles$E.containerHeader)
+    className: css(styles$H.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$E.containerTitle)
+    className: css(styles$H.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$E.containerHeader, styles$E.previewCollectionHeader)
+    className: css(styles$H.containerHeader, styles$H.previewCollectionHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$E.containerTitle)
+    className: css(styles$H.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$E.container)
+    className: css(styles$H.container)
   }, hasBothHeadings && /*#__PURE__*/React.createElement("span", {
-    className: css(styles$E.row)
+    className: css(styles$H.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$E.columnLeft)
+    className: css(styles$H.columnLeft)
   }, headingEditor), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$E.columnRight)
+    className: css(styles$H.columnRight)
   }, headingPreview)), /*#__PURE__*/React.createElement("div", {
-    className: css(path.length > 0 && styles$E.contentIndent)
+    className: css(path.length > 0 && styles$H.contentIndent)
   }, children));
 };
 
@@ -25016,11 +25016,11 @@ const ItemNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$E.row)
+    className: css(styles$H.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$E.columnLeft)
+    className: css(styles$H.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$E.sticky)
+    className: css(sticky && styles$H.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25028,9 +25028,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$E.columnRight)
+    className: css(styles$H.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$E.sticky)
+    className: css(sticky && styles$H.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25046,13 +25046,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$E.row)
+    className: css(styles$H.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$E.columnLeft)
+    className: css(styles$H.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$E.sticky)
+    className: css(sticky && styles$H.sticky)
   }, /*#__PURE__*/React.createElement(HintEditor, _extends({}, data, {
-    className: css(styles$E.hintEditor),
+    className: css(styles$H.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25067,9 +25067,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$E.columnRight)
+    className: css(styles$H.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$E.sticky)
+    className: css(sticky && styles$H.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25086,9 +25086,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$E.columnLeft)
+    className: css(styles$H.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$E.tagsEditor)
+    className: css(styles$H.tagsEditor)
   }, /*#__PURE__*/React.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25119,23 +25119,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementUp",
-      className: css(styles$E.control)
+      className: css(styles$H.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$E.verticalFlip)
+      className: css(styles$H.verticalFlip)
     }, /*#__PURE__*/React.createElement(InlineIcon$5, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementDown",
-      className: css(styles$E.control)
+      className: css(styles$H.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
     }, /*#__PURE__*/React.createElement(InlineIcon$5, iconChevronDown))), /*#__PURE__*/React.createElement("div", {
       key: "removeArrayElement",
-      className: css(styles$E.control)
+      className: css(styles$H.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25143,7 +25143,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React.createElement(InlineIcon$5, iconTrash$4)))];
     return /*#__PURE__*/React.createElement("div", {
       key: i,
-      className: css(styles$E.arrayElement, !elementIsLeaf && styles$E.arrayElementAndNotLeaf)
+      className: css(styles$H.arrayElement, !elementIsLeaf && styles$H.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25169,7 +25169,7 @@ const ObjectNodeContent = props => {
   // made sense to the shape's author is the order in which we'll iterate :)
   const children = Object.keys(shape.shape).map(subkey => /*#__PURE__*/React.createElement("div", {
     key: subkey,
-    className: css(styles$E.objectElement)
+    className: css(styles$H.objectElement)
   }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25336,7 +25336,7 @@ class MultiRendererEditor extends React.Component {
     }, this._renderContent());
   }
 }
-const styles$E = StyleSheet.create({
+const styles$H = StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25817,7 +25817,7 @@ CSProgramEditor.defaultProps = {
 };
 
 const {
-  TextInput: TextInput$8
+  TextInput: TextInput$9
 } = components;
 class DefinitionEditor extends React.Component {
   constructor(..._args) {
@@ -25837,7 +25837,7 @@ class DefinitionEditor extends React.Component {
       target: "_blank"
     }, "Definition style guide"), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React.createElement(TextInput$8, {
+    }, /*#__PURE__*/React.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React.createElement(TextInput$9, {
       value: this.props.togglePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26246,7 +26246,7 @@ ExampleWidgetEditor.defaultProps = {
 };
 
 const {
-  TextInput: TextInput$7
+  TextInput: TextInput$8
 } = components;
 const defaultExplanationProps = {
   showPrompt: "Explain",
@@ -26270,14 +26270,14 @@ class ExplanationEditor extends React.Component {
       className: "perseus-widget-explanation-editor"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React.createElement(TextInput$7, {
+    }, /*#__PURE__*/React.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React.createElement(TextInput$8, {
       value: this.props.showPrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("showPrompt")
     }))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React.createElement(TextInput$7, {
+    }, /*#__PURE__*/React.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React.createElement(TextInput$8, {
       value: this.props.hidePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26492,7 +26492,8 @@ const SortableItem = createReactClass({
 
 const {
   InfoTip: InfoTip$i,
-  PropCheckBox: PropCheckBox$a
+  PropCheckBox: PropCheckBox$a,
+  TextInput: TextInput$7
 } = components;
 
 // types for iterables
@@ -26538,7 +26539,7 @@ class ExpressionEditor extends React.Component {
       // it's a little weird to serialize the react key, but saves some
       // effort reconstructing them when this item is loaded later.
       "key"];
-      const serializables = ["answerForms", "buttonSets", "functions", "times"];
+      const serializables = ["answerForms", "buttonSets", "functions", "times", "visibleLabel", "ariaLabel"];
       const answerForms = this.props.answerForms.map(form => {
         return _(form).pick(formSerializables);
       });
@@ -26740,7 +26741,20 @@ class ExpressionEditor extends React.Component {
       className: "perseus-widget-expression-editor"
     }, /*#__PURE__*/React.createElement("h3", {
       className: "expression-editor-h3"
-    }, "Global Options"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PropCheckBox$a, {
+    }, "Global Options"), /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement("label", null, "Visible label:", " ", /*#__PURE__*/React.createElement(TextInput$7, {
+      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: "perseus-widget-row"
+    }, /*#__PURE__*/React.createElement("label", null, "Aria label:", " ", /*#__PURE__*/React.createElement(TextInput$7, {
+      value: this.props.ariaLabel,
+      onChange: this.change("ariaLabel")
+    })), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Label text that's read by screen readers. Highly recommend adding a label here to ensure your exercise is accessible. For more information on writting accessible labels, please see", " ", /*#__PURE__*/React.createElement("a", {
+      href: "https://www.w3.org/WAI/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels",
+      target: "_blank"
+    }, "this article.")))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PropCheckBox$a, {
       times: this.props.times,
       onChange: this.props.onChange,
       labelAlignment: "right",
@@ -26908,10 +26922,10 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", {
-      className: css(styles$D.title)
+      className: css(styles$G.title)
     }, "Title:", " ", /*#__PURE__*/React.createElement(TextInput$6, {
       value: this.props.title,
-      className: css(styles$D.input)
+      className: css(styles$G.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -26936,7 +26950,7 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement(InlineIcon$3, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$D.hintsTitle)
+      className: css(styles$G.hintsTitle)
     }, "Hint"), /*#__PURE__*/React.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -26973,7 +26987,7 @@ GradedGroupEditor.defaultProps = {
   images: {},
   hint: null
 };
-const styles$D = StyleSheet.create({
+const styles$G = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -28312,13 +28326,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$C.outerWrapper
+    style: styles$F.outerWrapper
   }, /*#__PURE__*/React.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$C = StyleSheet.create({
+const styles$F = StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29364,16 +29378,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React.createElement("label", {
-    className: css(styles$B.label)
+    className: css(styles$E.label)
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$B.row, style]
+    style: [styles$E.row, style]
   }, labelSide === "start" || /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$B.spaceEnd
+    style: styles$E.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$B.spaceStart
+    style: styles$E.spaceStart
   }, label)));
 };
-const styles$B = StyleSheet.create({
+const styles$E = StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -29450,11 +29464,11 @@ class Spring extends React.Component {
     } = this.props;
     return React.createElement(View, {
       "aria-hidden": "true",
-      style: [styles$A.grow, style]
+      style: [styles$D.grow, style]
     });
   }
 }
-const styles$A = StyleSheet.create({
+const styles$D = StyleSheet.create({
   grow: {
     flexGrow: 1
   }
@@ -29490,11 +29504,11 @@ function Heading({
   onToggle
 }) {
   return /*#__PURE__*/React.createElement(Clickable, {
-    style: [styles$z.container, !isCollapsible && styles$z.notClickable],
+    style: [styles$C.container, !isCollapsible && styles$C.notClickable],
     disabled: !isCollapsible,
     onClick: () => isCollapsible && (onToggle == null ? void 0 : onToggle(!isOpen))
   }, () => /*#__PURE__*/React.createElement(View, {
-    style: styles$z.heading
+    style: styles$C.heading
   }, /*#__PURE__*/React.createElement(LabelLarge, {
     style: {
       fontSize: 14,
@@ -29504,7 +29518,7 @@ function Heading({
     isExpanded: isOpen
   })));
 }
-const styles$z = StyleSheet.create({
+const styles$C = StyleSheet.create({
   container: {
     marginTop: spacing.small_12,
     // NOTE(jeremy): This is the inverse of the @editorPadding CSS
@@ -29648,10 +29662,54 @@ function getDefaultGraphStartCoords(graph, range, step) {
       return getLinearSystemCoords(_extends({}, graph, {
         startCoords: undefined
       }), range, step);
+    case "circle":
+      const startCoords = getCircleCoords(_extends({}, graph, {
+        startCoords: undefined
+      }));
+      const radius = vector.length(vector.subtract(startCoords.radiusPoint, startCoords.center));
+      return {
+        center: startCoords.center,
+        radius
+      };
+    case "sinusoid":
+      return getSinusoidCoords(_extends({}, graph, {
+        startCoords: undefined
+      }), range, step);
+    case "quadratic":
+      return getQuadraticCoords(_extends({}, graph, {
+        startCoords: undefined
+      }), range, step);
     default:
       return undefined;
   }
 }
+const getSinusoidEquation = startCoords => {
+  // Get coefficients
+  // It's assumed that p1 is the root and p2 is the first peak
+  const p1 = startCoords[0];
+  const p2 = startCoords[1];
+
+  // Resulting coefficients are canonical for this sine curve
+  const amplitude = p2[1] - p1[1];
+  const angularFrequency = Math.PI / (2 * (p2[0] - p1[0]));
+  const phase = p1[0] * angularFrequency;
+  const verticalOffset = p1[1];
+  return "y = " + amplitude.toFixed(3) + "sin(" + angularFrequency.toFixed(3) + "x - " + phase.toFixed(3) + ") + " + verticalOffset.toFixed(3);
+};
+const getQuadraticEquation = startCoords => {
+  const p1 = startCoords[0];
+  const p2 = startCoords[1];
+  const p3 = startCoords[2];
+  const denom = (p1[0] - p2[0]) * (p1[0] - p3[0]) * (p2[0] - p3[0]);
+  if (denom === 0) {
+    // Many of the callers assume that the return value is always defined.
+    return "Division by zero error";
+  }
+  const a = (p3[0] * (p2[1] - p1[1]) + p2[0] * (p1[1] - p3[1]) + p1[0] * (p3[1] - p2[1])) / denom;
+  const b = (p3[0] * p3[0] * (p1[1] - p2[1]) + p2[0] * p2[0] * (p3[1] - p1[1]) + p1[0] * p1[0] * (p2[1] - p3[1])) / denom;
+  const c = (p2[0] * p3[0] * (p2[0] - p3[0]) * p1[1] + p3[0] * p1[0] * (p3[0] - p1[0]) * p2[1] + p1[0] * p2[0] * (p1[0] - p2[0]) * p3[1]) / denom;
+  return "y = " + a.toFixed(3) + "x^2 + " + b.toFixed(3) + "x + " + c.toFixed(3);
+};
 
 /**
  * Dropdown for selecting a locked figure to add to an interactive graph.
@@ -29665,19 +29723,20 @@ const LockedFigureSelect = props => {
     id,
     onChange
   } = props;
-  const figureTypes = props.showM2Features ? ["point", "line", "vector", "ellipse", "polygon"] : ["point", "line"];
+  const figureTypes = ["point", "line", "vector", "ellipse", "polygon"];
+  const figureTypesCurrent = props.showM2bFeatures ? [...figureTypes, "function"] : figureTypes;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$y.container
+    style: styles$B.container
   }, /*#__PURE__*/React.createElement(ActionMenu, {
     menuText: "Add locked figure",
-    style: styles$y.addElementSelect
-  }, figureTypes.map(figureType => /*#__PURE__*/React.createElement(ActionItem, {
+    style: styles$B.addElementSelect
+  }, figureTypesCurrent.map(figureType => /*#__PURE__*/React.createElement(ActionItem, {
     key: `${id}-${figureType}`,
     label: figureType,
     onClick: () => onChange(figureType)
   }))));
 };
-const styles$y = StyleSheet.create({
+const styles$B = StyleSheet.create({
   container: {
     marginTop: spacing.xSmall_8
   },
@@ -29708,19 +29767,19 @@ const AngleInput = props => {
   }
   return /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$x.row
+    style: styles$A.row
   }, "angle (degrees)", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
     value: angleInput,
     onChange: handleAngleChange,
-    style: styles$x.textField
+    style: styles$A.textField
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }));
 };
-const styles$x = StyleSheet.create({
+const styles$A = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29769,32 +29828,32 @@ const CoordinatePairInput = props => {
     onChange(newCoords);
   }
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$w.row, style]
+    style: [styles$z.row, style]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$w.row
+    style: styles$z.row
   }, labels ? labels[0] : "x coord", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
     value: coordState[0],
     onChange: newValue => handleCoordChange(newValue, 0),
-    style: [styles$w.textField, error ? styles$w.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$w.row
+    style: styles$z.row
   }, labels ? labels[1] : "y coord", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
     value: coordState[1],
     onChange: newValue => handleCoordChange(newValue, 1),
-    style: [styles$w.textField, error ? styles$w.errorField : undefined]
+    style: [styles$z.textField, error ? styles$z.errorField : undefined]
   })));
 };
-const styles$w = StyleSheet.create({
+const styles$z = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29827,14 +29886,14 @@ const PerseusEditorAccordion = props => {
   }, /*#__PURE__*/React.createElement(AccordionSection, {
     expanded: expanded,
     onToggle: onToggle,
-    style: [styles$v.container, containerStyle],
-    headerStyle: styles$v.accordionHeader,
+    style: [styles$y.container, containerStyle],
+    headerStyle: styles$y.accordionHeader,
     header: header
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$v.accordionPanel, panelStyle]
+    style: [styles$y.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$v = StyleSheet.create({
+const styles$y = StyleSheet.create({
   container: {
     backgroundColor: color.fadedBlue8,
     marginTop: spacing.xSmall_8
@@ -29865,13 +29924,13 @@ const ColorSwatch = props => {
     "aria-label":
     // Don't include an aria label for decorative circles.
     !decorative ? `${color$1}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$u.colorSwatch, {
+    style: [styles$x.colorSwatch, {
       border: `4px solid ${lockedFigureColors[color$1]}`,
       backgroundColor: filled ? lockedFigureColors[color$1] : color.white
     }]
   });
 };
-const styles$u = 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.
@@ -29890,10 +29949,10 @@ const ColorSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$t.row, style]
+    style: [styles$w.row, style]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$t.row
+    style: styles$w.row
   }, "color", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -29912,7 +29971,7 @@ const ColorSelect = props => {
     })
   })))));
 };
-const styles$t = StyleSheet.create({
+const styles$w = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29928,17 +29987,17 @@ const EllipseSwatch = props => {
   } = props;
   return /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$s.container, {
+    style: [styles$v.container, {
       border: `4px ${strokeStyle} ${lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$s.innerCircle, {
+    style: [styles$v.innerCircle, {
       backgroundColor: lockedFigureColors[color],
       opacity: lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$s = 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.
@@ -29969,40 +30028,40 @@ const LockedFigureSettingsActions = props => {
     onRemove
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$r.container
+    style: styles$u.container
   }, /*#__PURE__*/React.createElement(Button, {
     startIcon: trashIcon,
     "aria-label": `Delete locked ${figureType}`,
     onClick: onRemove,
     kind: "tertiary",
-    style: styles$r.deleteButton
-  }, "Delete"), /*#__PURE__*/React.createElement(Spring, null), props.showM2Features && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, {
+    style: styles$u.deleteButton
+  }, "Delete"), /*#__PURE__*/React.createElement(Spring, null), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDoubleUpIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} to the back`,
     onClick: () => onMove("back"),
-    style: styles$r.iconButton
+    style: styles$u.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretUpIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} backward`,
     onClick: () => onMove("backward"),
-    style: styles$r.iconButton
+    style: styles$u.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDownIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} forward`,
     onClick: () => onMove("forward"),
-    style: styles$r.iconButton
+    style: styles$u.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDoubleDownIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} to the front`,
     onClick: () => onMove("front"),
-    style: styles$r.iconButton
-  })));
+    style: styles$u.iconButton
+  }));
 };
-const styles$r = StyleSheet.create({
+const styles$u = StyleSheet.create({
   container: {
     width: "100%",
     flexDirection: "row",
@@ -30049,7 +30108,7 @@ const LockedEllipseSettings = props => {
     /*#__PURE__*/
     // Summary: Ellipse, center, radius, color (opacity, dashed)
     React.createElement(View, {
-      style: styles$q.row
+      style: styles$t.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Ellipse (${center[0]}, ${center[1]}), radius ${radius[0]}, ${radius[1]}`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(EllipseSwatch, {
@@ -30058,19 +30117,19 @@ const LockedEllipseSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: styles$q.row
+    style: styles$t.row
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: center,
-    style: styles$q.spaceUnder,
+    style: styles$t.spaceUnder,
     onChange: newCoords => onChangeProps({
       center: newCoords
     })
   }), /*#__PURE__*/React.createElement(View, {
-    style: styles$q.spaceUnder
+    style: styles$t.spaceUnder
   }, /*#__PURE__*/React.createElement(InfoTip$d, null, "The coordinates for the center of the ellipse."))), /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: radius,
     labels: ["x radius", "y radius"],
-    style: styles$q.spaceUnder,
+    style: styles$t.spaceUnder,
     onChange: newCoords => onChangeProps({
       radius: newCoords
     })
@@ -30082,7 +30141,7 @@ const LockedEllipseSettings = props => {
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xSmall_8
   }), /*#__PURE__*/React.createElement(View, {
-    style: [styles$q.row, styles$q.spaceUnder]
+    style: [styles$t.row, styles$t.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30090,7 +30149,7 @@ const LockedEllipseSettings = props => {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$q.row
+    style: styles$t.row
   }, "fill", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30107,7 +30166,7 @@ const LockedEllipseSettings = props => {
     label: option
   }))))), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$q.row
+    style: styles$t.row
   }, "stroke", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30125,13 +30184,12 @@ const LockedEllipseSettings = props => {
     value: "dashed",
     label: "dashed"
   }))), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
-    showM2Features: props.showM2Features,
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
   }));
 };
-const styles$q = StyleSheet.create({
+const styles$t = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30152,7 +30210,7 @@ const LabeledSwitch = props => {
   const ids = useUniqueIdWithMock();
   const switchId = ids.get("switch");
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$p.row, style]
+    style: [styles$s.row, style]
   }, /*#__PURE__*/React.createElement(Switch, {
     id: switchId,
     checked: checked,
@@ -30164,7 +30222,7 @@ const LabeledSwitch = props => {
     htmlFor: switchId
   }, label));
 };
-const styles$p = StyleSheet.create({
+const styles$s = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30198,13 +30256,13 @@ const DefiningPointSettings = props => {
   return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: expanded,
     onToggle: onToggle,
-    containerStyle: styles$o.container,
-    panelStyle: styles$o.accordionPanel,
+    containerStyle: styles$r.container,
+    panelStyle: styles$r.accordionPanel,
     header:
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React.createElement(View, {
-      style: styles$o.row
+      style: styles$r.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `${label || "Point"} (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), showPoint && /*#__PURE__*/React.createElement(ColorSwatch, {
@@ -30214,7 +30272,7 @@ const DefiningPointSettings = props => {
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: coord,
     error: !!error,
-    style: styles$o.spaceUnder,
+    style: styles$r.spaceUnder,
     onChange: newCoords => {
       onChangeProps({
         coord: newCoords
@@ -30223,12 +30281,12 @@ const DefiningPointSettings = props => {
   }), onTogglePoint && /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "show point on graph",
     checked: !!showPoint,
-    style: showPoint && styles$o.spaceUnder,
+    style: showPoint && styles$r.spaceUnder,
     onChange: onTogglePoint
   }), showPoint && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$o.spaceUnder
+    style: styles$r.spaceUnder
   }), /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30239,7 +30297,7 @@ const DefiningPointSettings = props => {
     }
   })));
 };
-const styles$o = StyleSheet.create({
+const styles$r = StyleSheet.create({
   container: {
     marginTop: spacing.xSmall_8,
     marginBottom: 0,
@@ -30266,15 +30324,15 @@ const LineSwatch = props => {
     lineStyle
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$n.container
+    style: styles$q.container
   }, /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, ${lineStyle}`,
-    style: [styles$n.lineSwatch, {
+    style: [styles$q.lineSwatch, {
       border: `5px ${lineStyle} ${lockedFigureColors[color]}`
     }]
   }));
 };
-const styles$n = StyleSheet.create({
+const styles$q = StyleSheet.create({
   container: {
     backgroundColor: color.white,
     justifyContent: "center",
@@ -30328,7 +30386,7 @@ const LockedLineSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$m.row
+      style: styles$p.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, lineLabel), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(LineSwatch, {
@@ -30337,7 +30395,7 @@ const LockedLineSettings = props => {
     }))
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$m.row, styles$m.spaceUnder]
+    style: [styles$p.row, styles$p.spaceUnder]
   }, "kind", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxxSmall_4
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30358,7 +30416,7 @@ const LockedLineSettings = props => {
     value: "segment",
     label: "segment"
   }))), /*#__PURE__*/React.createElement(View, {
-    style: styles$m.row
+    style: styles$p.row
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
@@ -30366,7 +30424,7 @@ const LockedLineSettings = props => {
     size: spacing.small_12
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$m.row
+    style: styles$p.row
   }, "style", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxxSmall_4
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30377,7 +30435,7 @@ const LockedLineSettings = props => {
     // Placeholder is required, but never gets used.
     ,
     placeholder: "",
-    style: styles$m.selectMarginOffset
+    style: styles$p.selectMarginOffset
   }, /*#__PURE__*/React.createElement(OptionItem, {
     value: "solid",
     label: "solid"
@@ -30385,7 +30443,7 @@ const LockedLineSettings = props => {
     value: "dashed",
     label: "dashed"
   })))), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
-    style: styles$m.errorText
+    style: styles$p.errorText
   }, lengthZeroStr), /*#__PURE__*/React.createElement(DefiningPointSettings, _extends({
     label: "Point 1",
     showPoint: showPoint1,
@@ -30405,13 +30463,12 @@ const LockedLineSettings = props => {
     }),
     onChangeProps: newProps => handleChangePoint(newProps, 1)
   })), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
-    showM2Features: props.showM2Features,
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
   }));
 };
-const styles$m = StyleSheet.create({
+const styles$p = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30456,7 +30513,7 @@ const LockedPointSettings = props => {
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React.createElement(View, {
-      style: styles$l.row
+      style: styles$o.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Point (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(ColorSwatch, {
@@ -30465,7 +30522,7 @@ const LockedPointSettings = props => {
     }))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: coord,
-    style: styles$l.spaceUnder,
+    style: styles$o.spaceUnder,
     onChange: newCoord => {
       onChangeProps({
         coord: newCoord
@@ -30474,7 +30531,7 @@ const LockedPointSettings = props => {
   }), /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$l.spaceUnder
+    style: styles$o.spaceUnder
   }), /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30484,13 +30541,12 @@ const LockedPointSettings = props => {
       });
     }
   }), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
-    showM2Features: props.showM2Features,
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
   }));
 };
-const styles$l = StyleSheet.create({
+const styles$o = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30508,17 +30564,17 @@ const PolygonSwatch = props => {
   } = props;
   return /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$k.container, {
+    style: [styles$n.container, {
       border: `4px ${strokeStyle} ${lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$k.innerSquare, {
+    style: [styles$n.innerSquare, {
       backgroundColor: lockedFigureColors[color],
       opacity: lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$k = StyleSheet.create({
+const styles$n = StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30560,7 +30616,7 @@ const LockedPolygonSettings = props => {
     /*#__PURE__*/
     // Summary: Polygon, number of sides, style swatch
     React.createElement(View, {
-      style: styles$j.row
+      style: styles$m.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Polygon, ${points.length} sides`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(PolygonSwatch, {
@@ -30569,7 +30625,7 @@ const LockedPolygonSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$j.row, styles$j.spaceUnder]
+    style: [styles$m.row, styles$m.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30577,7 +30633,7 @@ const LockedPolygonSettings = props => {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$j.row
+    style: styles$m.row
   }, "fill", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30594,7 +30650,7 @@ const LockedPolygonSettings = props => {
     label: option
   }))))), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$j.row, styles$j.spaceUnder]
+    style: [styles$m.row, styles$m.spaceUnder]
   }, "stroke", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30617,17 +30673,17 @@ const LockedPolygonSettings = props => {
     onChange: newValue => onChangeProps({
       showVertices: newValue
     }),
-    style: styles$j.spaceUnder
+    style: styles$m.spaceUnder
   }), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     header: /*#__PURE__*/React.createElement(LabelLarge, null, "Points"),
     expanded: true,
-    containerStyle: styles$j.pointAccordionContainer,
-    panelStyle: styles$j.pointAccordionPanel
+    containerStyle: styles$m.pointAccordionContainer,
+    panelStyle: styles$m.pointAccordionPanel
   }, points.map((point, index) => {
     const pointLabel = String.fromCharCode(65 + index);
     return /*#__PURE__*/React.createElement(View, {
       key: `locked-polygon-point-${point[0]}-${point[1]}-index-${index}`,
-      style: [styles$j.row, styles$j.spaceUnder]
+      style: [styles$m.row, styles$m.spaceUnder]
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `${pointLabel}:`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.medium_16
     }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
@@ -30655,7 +30711,7 @@ const LockedPolygonSettings = props => {
           points: newPoints
         });
       },
-      style: styles$j.icon
+      style: styles$m.icon
     }));
   }), /*#__PURE__*/React.createElement(Button, {
     kind: "tertiary",
@@ -30666,13 +30722,12 @@ const LockedPolygonSettings = props => {
       });
     }
   }, "Add point")), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
-    showM2Features: props.showM2Features,
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
   }));
 };
-const styles$j = StyleSheet.create({
+const styles$m = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30730,7 +30785,7 @@ const LockedVectorSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$i.row
+      style: styles$l.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, lineLabel), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(LineSwatch, {
@@ -30738,19 +30793,19 @@ const LockedVectorSettings = props => {
       lineStyle: "solid"
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$i.row, styles$i.spaceUnder]
+    style: [styles$l.row, styles$l.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
   })), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
-    style: styles$i.errorText
+    style: styles$l.errorText
   }, lengthErrorMessage), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: true // Initial state is expanded
     ,
-    containerStyle: styles$i.container,
-    panelStyle: styles$i.accordionPanel,
+    containerStyle: styles$l.container,
+    panelStyle: styles$l.accordionPanel,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$i.row
+      style: styles$l.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Tail (${tail[0]}, ${tail[1]})`))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: tail,
@@ -30761,10 +30816,10 @@ const LockedVectorSettings = props => {
   })), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: true // Initial state is expanded
     ,
-    containerStyle: styles$i.container,
-    panelStyle: styles$i.accordionPanel,
+    containerStyle: styles$l.container,
+    panelStyle: styles$l.accordionPanel,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$i.row
+      style: styles$l.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Tip (${tip[0]}, ${tip[1]})`))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: tip,
@@ -30773,13 +30828,12 @@ const LockedVectorSettings = props => {
       handleChangePoint(newProps, 1);
     }
   })), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
-    showM2Features: props.showM2Features,
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
   }));
 };
-const styles$i = StyleSheet.create({
+const styles$l = StyleSheet.create({
   accordionPanel: {
     paddingBottom: spacing.medium_16
   },
@@ -30816,19 +30870,11 @@ const LockedFigureSettings = props => {
     case "line":
       return /*#__PURE__*/React.createElement(LockedLineSettings, props);
     case "vector":
-      if (props.showM2Features) {
-        return /*#__PURE__*/React.createElement(LockedVectorSettings, props);
-      }
-      break;
+      return /*#__PURE__*/React.createElement(LockedVectorSettings, props);
     case "ellipse":
-      if (props.showM2Features) {
-        return /*#__PURE__*/React.createElement(LockedEllipseSettings, props);
-      }
-      break;
+      return /*#__PURE__*/React.createElement(LockedEllipseSettings, props);
     case "polygon":
-      if (props.showM2Features) {
-        return /*#__PURE__*/React.createElement(LockedPolygonSettings, props);
-      }
+      return /*#__PURE__*/React.createElement(LockedPolygonSettings, props);
   }
   return null;
 };
@@ -30940,7 +30986,6 @@ const LockedFiguresSection = props => {
     }
     return /*#__PURE__*/React.createElement(LockedFigureSettings, _extends({
       key: `${uniqueId}-locked-${figure}-${index}`,
-      showM2Features: props.showM2Features,
       showM2bFeatures: props.showM2bFeatures,
       expanded: expandedStates[index],
       onToggle: newValue => {
@@ -30954,9 +30999,8 @@ const LockedFiguresSection = props => {
       onRemove: () => removeLockedFigure(index)
     }));
   }), /*#__PURE__*/React.createElement(View, {
-    style: styles$h.buttonContainer
+    style: styles$k.buttonContainer
   }, /*#__PURE__*/React.createElement(LockedFigureSelect, {
-    showM2Features: props.showM2Features,
     showM2bFeatures: props.showM2bFeatures,
     id: `${uniqueId}-select`,
     onChange: addLockedFigure
@@ -30965,10 +31009,10 @@ const LockedFiguresSection = props => {
   }), showExpandButton && /*#__PURE__*/React.createElement(Button, {
     kind: "secondary",
     onClick: () => toggleExpanded(allCollapsed),
-    style: styles$h.button
+    style: styles$k.button
   }, buttonLabel))));
 };
-const styles$h = StyleSheet.create({
+const styles$k = StyleSheet.create({
   buttonContainer: {
     flexDirection: "row",
     alignItems: "center"
@@ -31003,7 +31047,7 @@ const GraphPointsCountSelector = ({
     // Never uses placeholder, always has value
     ,
     placeholder: "",
-    style: styles$g.singleSelectShort
+    style: styles$j.singleSelectShort
   }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React.createElement(OptionItem, {
     key: n,
     value: `${n}`,
@@ -31014,7 +31058,7 @@ const GraphPointsCountSelector = ({
     label: "unlimited"
   })]);
 };
-const styles$g = StyleSheet.create({
+const styles$j = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31027,7 +31071,7 @@ const GraphTypeSelector = props => {
     selectedValue: props.graphType,
     onChange: props.onChange,
     placeholder: "Select a graph type",
-    style: styles$f.singleSelectShort
+    style: styles$i.singleSelectShort
   }, /*#__PURE__*/React.createElement(OptionItem, {
     value: "linear",
     label: "Linear function"
@@ -31060,7 +31104,7 @@ const GraphTypeSelector = props => {
     label: "Angle"
   }));
 };
-const styles$f = 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.
@@ -31464,10 +31508,10 @@ class InteractiveGraphSettings extends React.Component {
       onChange: this.change
     }))), /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Background image URL:",
-      style: styles$e.resetSpaceTop
+      style: styles$h.resetSpaceTop
     }, /*#__PURE__*/React.createElement("input", {
       type: "text",
-      className: css(styles$e.backgroundUrlInput),
+      className: css(styles$h.backgroundUrlInput),
       ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
@@ -31481,14 +31525,14 @@ class InteractiveGraphSettings extends React.Component {
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
     }), /*#__PURE__*/React.createElement(InfoTip$c, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React.createElement(View, {
-      style: styles$e.protractorSection
+      style: styles$h.protractorSection
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$e.checkboxRow
+      style: styles$h.checkboxRow
     }, /*#__PURE__*/React.createElement(PropCheckBox$7, {
       label: "Show protractor",
       showProtractor: this.props.showProtractor,
       onChange: this.change,
-      style: styles$e.resetSpaceTop
+      style: styles$h.resetSpaceTop
     })), this.props.showProtractor && /*#__PURE__*/React.createElement(Banner, {
       layout: "floating",
       text: "The protractor is not accessible. Please consider an alternate approach.",
@@ -31509,7 +31553,7 @@ InteractiveGraphSettings.defaultProps = {
   showProtractor: false,
   showTooltips: false
 };
-const styles$e = StyleSheet.create({
+const styles$h = StyleSheet.create({
   resetSpaceTop: {
     marginTop: 0
   },
@@ -31546,13 +31590,13 @@ const SegmentCountSelector = ({
     const num = +newValue;
     onChange(num);
   },
-  style: styles$d.singleSelectShort
+  style: styles$g.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$g = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31560,13 +31604,65 @@ const styles$d = StyleSheet.create({
   }
 });
 
+const StartCoordsCircle = props => {
+  const {
+    startCoords,
+    onChange
+  } = props;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles$f.tile
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles$f.row
+  }, /*#__PURE__*/React.createElement(LabelLarge, null, "Center:"), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: startCoords.center,
+    labels: ["x", "y"],
+    onChange: coord => onChange({
+      center: coord,
+      radius: startCoords.radius
+    })
+  })), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles$f.row
+  }, /*#__PURE__*/React.createElement(LabelLarge, null, "Radius:"), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), /*#__PURE__*/React.createElement(TextField, {
+    value: startCoords.radius.toString(),
+    type: "number",
+    onChange: value => {
+      onChange({
+        center: startCoords.center,
+        radius: parseFloat(value)
+      });
+    },
+    style: styles$f.textField
+  })));
+};
+const styles$f = StyleSheet.create({
+  tile: {
+    backgroundColor: color.fadedBlue8,
+    marginTop: spacing.xSmall_8,
+    padding: spacing.small_12,
+    borderRadius: spacing.xSmall_8
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  textField: {
+    width: spacing.xxxLarge_64
+  }
+});
+
 const StartCoordsLine = props => {
   const {
     startCoords,
     onChange
   } = props;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
-    style: styles$c.tile
+    style: styles$e.tile
   }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 1:"), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.small_12
   }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
@@ -31574,7 +31670,7 @@ const StartCoordsLine = props => {
     labels: ["x", "y"],
     onChange: value => onChange([value, startCoords[1]])
   })), /*#__PURE__*/React.createElement(View, {
-    style: styles$c.tile
+    style: styles$e.tile
   }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 2:"), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.small_12
   }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
@@ -31583,7 +31679,7 @@ const StartCoordsLine = props => {
     onChange: value => onChange([startCoords[0], value])
   })));
 };
-const styles$c = StyleSheet.create({
+const styles$e = StyleSheet.create({
   tile: {
     backgroundColor: color.fadedBlue8,
     marginTop: spacing.xSmall_8,
@@ -31606,7 +31702,7 @@ const StartCoordsMultiline = props => {
     header: /*#__PURE__*/React.createElement(LabelLarge, null, `${graphName} ${i + 1}`),
     expanded: true
   }, /*#__PURE__*/React.createElement(View, {
-    style: styles$b.nestedTile
+    style: styles$d.nestedTile
   }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 1:"), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.small_12
   }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
@@ -31618,7 +31714,7 @@ const StartCoordsMultiline = props => {
       onChange(newCoords);
     }
   })), /*#__PURE__*/React.createElement(View, {
-    style: styles$b.nestedTile
+    style: styles$d.nestedTile
   }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 2:"), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.small_12
   }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
@@ -31631,7 +31727,7 @@ const StartCoordsMultiline = props => {
     }
   })))));
 };
-const styles$b = StyleSheet.create({
+const styles$d = StyleSheet.create({
   nestedTile: {
     paddingBottom: spacing.small_12,
     flexDirection: "row",
@@ -31639,6 +31735,112 @@ const styles$b = StyleSheet.create({
   }
 });
 
+const StartCoordsQuadratic = props => {
+  const {
+    startCoords,
+    onChange
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: styles$c.equationSection
+  }, /*#__PURE__*/React.createElement(LabelMedium, null, "Starting equation:"), /*#__PURE__*/React.createElement(BodyMonospace, {
+    style: styles$c.equationBody
+  }, getQuadraticEquation(startCoords))), /*#__PURE__*/React.createElement(View, {
+    style: styles$c.tile
+  }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 1:"), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: startCoords[0],
+    labels: ["x", "y"],
+    onChange: value => onChange([value, startCoords[1], startCoords[2]])
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles$c.tile
+  }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 2:"), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: startCoords[1],
+    labels: ["x", "y"],
+    onChange: value => onChange([startCoords[0], value, startCoords[2]])
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles$c.tile
+  }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 3:"), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: startCoords[2],
+    labels: ["x", "y"],
+    onChange: value => onChange([startCoords[0], startCoords[1], value])
+  })));
+};
+const styles$c = StyleSheet.create({
+  tile: {
+    backgroundColor: color.fadedBlue8,
+    marginTop: spacing.xSmall_8,
+    padding: spacing.small_12,
+    borderRadius: spacing.xSmall_8,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  equationSection: {
+    marginTop: spacing.small_12
+  },
+  equationBody: {
+    backgroundColor: color.fadedOffBlack8,
+    border: `1px solid ${color.fadedOffBlack32}`,
+    marginTop: spacing.xSmall_8,
+    paddingLeft: spacing.xSmall_8,
+    paddingRight: spacing.xSmall_8,
+    fontSize: font.size.xSmall
+  }
+});
+
+const StartCoordsSinusoid = props => {
+  const {
+    startCoords,
+    onChange
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: styles$b.equationSection
+  }, /*#__PURE__*/React.createElement(LabelMedium, null, "Starting equation:"), /*#__PURE__*/React.createElement(BodyMonospace, {
+    style: styles$b.equationBody
+  }, getSinusoidEquation(startCoords))), /*#__PURE__*/React.createElement(View, {
+    style: styles$b.tile
+  }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 1:"), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: startCoords[0],
+    labels: ["x", "y"],
+    onChange: value => onChange([value, startCoords[1]])
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles$b.tile
+  }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 2:"), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: startCoords[1],
+    labels: ["x", "y"],
+    onChange: value => onChange([startCoords[0], value])
+  })));
+};
+const styles$b = StyleSheet.create({
+  tile: {
+    backgroundColor: color.fadedBlue8,
+    marginTop: spacing.xSmall_8,
+    padding: spacing.small_12,
+    borderRadius: spacing.xSmall_8,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  equationSection: {
+    marginTop: spacing.small_12
+  },
+  equationBody: {
+    backgroundColor: color.fadedOffBlack8,
+    border: `1px solid ${color.fadedOffBlack32}`,
+    marginTop: spacing.xSmall_8,
+    paddingLeft: spacing.xSmall_8,
+    paddingRight: spacing.xSmall_8,
+    fontSize: font.size.xSmall
+  }
+});
+
 const StartCoordsSettingsInner = props => {
   const {
     type,
@@ -31669,6 +31871,28 @@ const StartCoordsSettingsInner = props => {
         startCoords: multiLineCoords,
         onChange: onChange
       });
+    case "circle":
+      const circleCoords = getCircleCoords(props);
+      const radius = vector.length(vector.subtract(circleCoords.radiusPoint, circleCoords.center));
+      return /*#__PURE__*/React.createElement(StartCoordsCircle, {
+        startCoords: {
+          center: circleCoords.center,
+          radius
+        },
+        onChange: onChange
+      });
+    case "sinusoid":
+      const sinusoidCoords = getSinusoidCoords(props, range, step);
+      return /*#__PURE__*/React.createElement(StartCoordsSinusoid, {
+        startCoords: sinusoidCoords,
+        onChange: onChange
+      });
+    case "quadratic":
+      const quadraticCoords = getQuadraticCoords(props, range, step);
+      return /*#__PURE__*/React.createElement(StartCoordsQuadratic, {
+        startCoords: quadraticCoords,
+        onChange: onChange
+      });
     default:
       return null;
   }
@@ -31723,6 +31947,10 @@ const POLYGON_SIDES = _.map(_.range(3, 13), function (value) {
     label: `${value} sides`
   });
 });
+
+// TODO(LEMS-2228): Remove flags once this is fully released
+const startCoordsUiPhase1Types = ["linear", "linear-system", "ray", "segment", "circle"];
+const startCoordsUiPhase2Types = ["sinusoid", "quadratic"];
 /**
  * An editor for the InteractiveGraph widget, which allows the user to
  * specify the graph's properties and the correct answer.
@@ -31774,7 +32002,7 @@ class InteractiveGraphEditor extends React.Component {
     DeprecationMixin.UNSAFE_componentWillMount.call(this);
   }
   render() {
-    var _this$props$graph$typ, _this$props$graph2, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10, _this$props$correct11, _this$props$graph5, _this$props$apiOption, _this$props$apiOption2, _this$props$apiOption3, _this$props$apiOption4;
+    var _this$props$apiOption, _this$props$apiOption2, _this$props$graph$typ, _this$props$graph2, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10, _this$props$correct11, _this$props$graph5, _this$props$apiOption3, _this$props$apiOption4;
     let graph;
     let equationString;
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, interactiveSizes.defaultBoxSize);
@@ -31835,6 +32063,9 @@ class InteractiveGraphEditor extends React.Component {
         className: "perseus-error"
       }, this.props.valid);
     }
+    const startCoordsPhase1 = (_this$props$apiOption = this.props.apiOptions) == null || (_this$props$apiOption = _this$props$apiOption.flags) == null || (_this$props$apiOption = _this$props$apiOption.mafs) == null ? void 0 : _this$props$apiOption["start-coords-ui-phase-1"];
+    const startCoordsPhase2 = (_this$props$apiOption2 = this.props.apiOptions) == null || (_this$props$apiOption2 = _this$props$apiOption2.flags) == null || (_this$props$apiOption2 = _this$props$apiOption2.mafs) == null ? void 0 : _this$props$apiOption2["start-coords-ui-phase-2"];
+    const displayStartCoordsUI = this.props.graph && (startCoordsPhase1 && startCoordsUiPhase1Types.includes(this.props.graph.type) || startCoordsPhase2 && startCoordsUiPhase2Types.includes(this.props.graph.type));
     return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Type of Graph:"
     }, /*#__PURE__*/React.createElement(GraphTypeSelector, {
@@ -31975,7 +32206,9 @@ class InteractiveGraphEditor extends React.Component {
           }
         });
       }
-    })), ((_this$props$graph5 = this.props.graph) == null ? void 0 : _this$props$graph5.type) && ((_this$props$apiOption = this.props.apiOptions.flags) == null || (_this$props$apiOption = _this$props$apiOption.mafs) == null ? void 0 : _this$props$apiOption["start-coords-ui"]) && /*#__PURE__*/React.createElement(StartCoordsSettings, _extends({}, this.props.graph, {
+    })), ((_this$props$graph5 = this.props.graph) == null ? void 0 : _this$props$graph5.type) &&
+    // TODO(LEMS-2228): Remove flags once this is fully released
+    displayStartCoordsUI && /*#__PURE__*/React.createElement(StartCoordsSettings, _extends({}, this.props.graph, {
       range: this.props.range,
       step: this.props.step,
       onChange: this.changeStartCoords
@@ -32031,8 +32264,7 @@ class InteractiveGraphEditor extends React.Component {
     })), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Congruency requires only that the angle measures are the same. An exact match implies congruency, but also requires that the angles have the same orientation and that the vertices are in the same position."))),
     // Only show the "Add locked figure" dropdown if the graph
     // is using Mafs.
-    this.props.graph && ((_this$props$apiOption2 = this.props.apiOptions) == null || (_this$props$apiOption2 = _this$props$apiOption2.flags) == null || (_this$props$apiOption2 = _this$props$apiOption2.mafs) == null ? void 0 : _this$props$apiOption2[this.props.graph.type]) && /*#__PURE__*/React.createElement(LockedFiguresSection, {
-      showM2Features: (_this$props$apiOption3 = this.props.apiOptions) == null || (_this$props$apiOption3 = _this$props$apiOption3.flags) == null || (_this$props$apiOption3 = _this$props$apiOption3.mafs) == null ? void 0 : _this$props$apiOption3["interactive-graph-locked-features-m2"],
+    this.props.graph && ((_this$props$apiOption3 = this.props.apiOptions) == null || (_this$props$apiOption3 = _this$props$apiOption3.flags) == null || (_this$props$apiOption3 = _this$props$apiOption3.mafs) == null ? void 0 : _this$props$apiOption3[this.props.graph.type]) && /*#__PURE__*/React.createElement(LockedFiguresSection, {
       showM2bFeatures: (_this$props$apiOption4 = this.props.apiOptions) == null || (_this$props$apiOption4 = _this$props$apiOption4.flags) == null || (_this$props$apiOption4 = _this$props$apiOption4.mafs) == null ? void 0 : _this$props$apiOption4["interactive-graph-locked-features-m2b"],
       figures: this.props.lockedFigures,
       onChange: this.props.onChange