@khanacademy/perseus-editor 11.0.2 → 11.2.0

package/dist/index.js

@@ -83,7 +83,7 @@ var arrowCounterClockwise__default = /*#__PURE__*/_interopDefaultLegacy(arrowCou
 
 // 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";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -278,13 +278,13 @@ class SectionControlButton extends React__namespace.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$I.button
+      style: styles$L.button
     }, _ref => {
       return /*#__PURE__*/React__namespace.createElement(InlineIcon$a, icon);
     });
   }
 }
-const styles$I = aphrodite.StyleSheet.create({
+const styles$L = aphrodite.StyleSheet.create({
   button: {
     backgroundColor: wonderBlocksTokens.color.gold,
     margin: 2,
@@ -20789,13 +20789,13 @@ class WidgetSelect extends React__namespace.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__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
     icon: caretRight__default["default"],
     style: iconStyle
   });
 }
-const styles$H = aphrodite.StyleSheet.create({
+const styles$K = aphrodite.StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20825,16 +20825,16 @@ class TexErrorView extends React__namespace.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$G.errorContainer
+      style: styles$J.errorContainer
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$G.title,
+      style: styles$J.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React__namespace.createElement(ToggleableCaret, {
       isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$G.error,
+      style: styles$J.error,
       key: index
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: {
@@ -20843,7 +20843,7 @@ class TexErrorView extends React__namespace.Component {
     }, e.math), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, e.message))));
   }
 }
-const styles$G = aphrodite.StyleSheet.create({
+const styles$J = aphrodite.StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -24593,12 +24593,12 @@ class SimpleButton extends React__namespace.Component {
       ...otherProps
     } = this.props;
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
-      className: aphrodite.css(styles$F.baseButton, color === "green" && styles$F.green, color === "orange" && styles$F.orange),
+      className: aphrodite.css(styles$I.baseButton, color === "green" && styles$I.green, color === "orange" && styles$I.orange),
       onClick: onClick
     }, otherProps), children);
   }
 }
-const styles$F = aphrodite.StyleSheet.create({
+const styles$I = aphrodite.StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24811,23 +24811,23 @@ const LeafContainer = _ref2 => {
   } = _ref2;
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$E.containerHeader)
+    className: aphrodite.css(styles$H.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$E.containerTitle)
+    className: aphrodite.css(styles$H.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$E.container)
+    className: aphrodite.css(styles$H.container)
   }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$E.row, styles$E.rowHeading)
+    className: aphrodite.css(styles$H.row, styles$H.rowHeading)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$E.columnLeft)
+    className: aphrodite.css(styles$H.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: "pod-title " + aphrodite.css(styles$E.containerHeader)
+    className: "pod-title " + aphrodite.css(styles$H.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$E.containerTitle)
+    className: aphrodite.css(styles$H.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$E.columnRight)
+    className: aphrodite.css(styles$H.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24840,11 +24840,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$E.container)
+    className: aphrodite.css(styles$H.container)
   }, controls && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$E.columnLeft, styles$E.containerHeader)
+    className: aphrodite.css(styles$H.columnLeft, styles$H.containerHeader)
   }, controls), /*#__PURE__*/React__namespace.createElement("div", null, children), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$E.columnLeft)
+    className: aphrodite.css(styles$H.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24858,28 +24858,28 @@ const ObjectContainer = _ref3 => {
     path
   } = _ref3;
   const headingEditor = /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$E.containerHeader)
+    className: aphrodite.css(styles$H.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$E.containerTitle)
+    className: aphrodite.css(styles$H.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$E.containerHeader, styles$E.previewCollectionHeader)
+    className: aphrodite.css(styles$H.containerHeader, styles$H.previewCollectionHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$E.containerTitle)
+    className: aphrodite.css(styles$H.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$E.container)
+    className: aphrodite.css(styles$H.container)
   }, hasBothHeadings && /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$E.row)
+    className: aphrodite.css(styles$H.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$E.columnLeft)
+    className: aphrodite.css(styles$H.columnLeft)
   }, headingEditor), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$E.columnRight)
+    className: aphrodite.css(styles$H.columnRight)
   }, headingPreview)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(path.length > 0 && styles$E.contentIndent)
+    className: aphrodite.css(path.length > 0 && styles$H.contentIndent)
   }, children));
 };
 
@@ -24999,11 +24999,11 @@ const ItemNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$E.row)
+    className: aphrodite.css(styles$H.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$E.columnLeft)
+    className: aphrodite.css(styles$H.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$E.sticky)
+    className: aphrodite.css(sticky && styles$H.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25011,9 +25011,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$E.columnRight)
+    className: aphrodite.css(styles$H.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$E.sticky)
+    className: aphrodite.css(sticky && styles$H.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25029,13 +25029,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$E.row)
+    className: aphrodite.css(styles$H.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$E.columnLeft)
+    className: aphrodite.css(styles$H.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$E.sticky)
+    className: aphrodite.css(sticky && styles$H.sticky)
   }, /*#__PURE__*/React__namespace.createElement(HintEditor, _extends({}, data, {
-    className: aphrodite.css(styles$E.hintEditor),
+    className: aphrodite.css(styles$H.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25050,9 +25050,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$E.columnRight)
+    className: aphrodite.css(styles$H.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$E.sticky)
+    className: aphrodite.css(sticky && styles$H.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25069,9 +25069,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$E.columnLeft)
+    className: aphrodite.css(styles$H.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$E.tagsEditor)
+    className: aphrodite.css(styles$H.tagsEditor)
   }, /*#__PURE__*/React__namespace.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25102,23 +25102,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementUp",
-      className: aphrodite.css(styles$E.control)
+      className: aphrodite.css(styles$H.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$E.verticalFlip)
+      className: aphrodite.css(styles$H.verticalFlip)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementDown",
-      className: aphrodite.css(styles$E.control)
+      className: aphrodite.css(styles$H.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconChevronDown))), /*#__PURE__*/React__namespace.createElement("div", {
       key: "removeArrayElement",
-      className: aphrodite.css(styles$E.control)
+      className: aphrodite.css(styles$H.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25126,7 +25126,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconTrash$4)))];
     return /*#__PURE__*/React__namespace.createElement("div", {
       key: i,
-      className: aphrodite.css(styles$E.arrayElement, !elementIsLeaf && styles$E.arrayElementAndNotLeaf)
+      className: aphrodite.css(styles$H.arrayElement, !elementIsLeaf && styles$H.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25152,7 +25152,7 @@ const ObjectNodeContent = props => {
   // made sense to the shape's author is the order in which we'll iterate :)
   const children = Object.keys(shape.shape).map(subkey => /*#__PURE__*/React__namespace.createElement("div", {
     key: subkey,
-    className: aphrodite.css(styles$E.objectElement)
+    className: aphrodite.css(styles$H.objectElement)
   }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25322,7 +25322,7 @@ class MultiRendererEditor extends React__namespace.Component {
     }, this._renderContent());
   }
 }
-const styles$E = aphrodite.StyleSheet.create({
+const styles$H = aphrodite.StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25821,7 +25821,7 @@ class CSProgramEditor extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  TextInput: TextInput$8
+  TextInput: TextInput$9
 } = perseus.components;
 class DefinitionEditor extends React__namespace.Component {
   static propTypes = {
@@ -25855,7 +25855,7 @@ class DefinitionEditor extends React__namespace.Component {
       target: "_blank"
     }, "Definition style guide"), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$8, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$9, {
       value: this.props.togglePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26265,7 +26265,7 @@ class ExampleWidgetEditor extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  TextInput: TextInput$7
+  TextInput: TextInput$8
 } = perseus.components;
 const defaultExplanationProps = {
   showPrompt: "Explain",
@@ -26302,14 +26302,14 @@ class ExplanationEditor extends React__namespace.Component {
       className: "perseus-widget-explanation-editor"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$7, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$8, {
       value: this.props.showPrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("showPrompt")
     }))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$7, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$8, {
       value: this.props.hidePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26515,7 +26515,8 @@ const SortableItem = createReactClass__default["default"]({
 
 const {
   InfoTip: InfoTip$i,
-  PropCheckBox: PropCheckBox$a
+  PropCheckBox: PropCheckBox$a,
+  TextInput: TextInput$7
 } = perseus.components;
 
 // types for iterables
@@ -26635,7 +26636,20 @@ class ExpressionEditor extends React__namespace.Component {
       className: "perseus-widget-expression-editor"
     }, /*#__PURE__*/React__namespace.createElement("h3", {
       className: "expression-editor-h3"
-    }, "Global Options"), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(PropCheckBox$a, {
+    }, "Global Options"), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Visible label:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$7, {
+      value: this.props.visibleLabel,
+      onChange: this.change("visibleLabel")
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+      className: "perseus-widget-row"
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Aria label:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$7, {
+      value: this.props.ariaLabel,
+      onChange: this.change("ariaLabel")
+    })), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.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__namespace.createElement("a", {
+      href: "https://www.w3.org/WAI/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels",
+      target: "_blank"
+    }, "this article.")))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(PropCheckBox$a, {
       times: this.props.times,
       onChange: this.props.onChange,
       labelAlignment: "right",
@@ -26664,7 +26678,7 @@ class ExpressionEditor extends React__namespace.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 ___default["default"](form).pick(formSerializables);
     });
@@ -26943,10 +26957,10 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("label", {
-      className: aphrodite.css(styles$D.title)
+      className: aphrodite.css(styles$G.title)
     }, "Title:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$6, {
       value: this.props.title,
-      className: aphrodite.css(styles$D.input)
+      className: aphrodite.css(styles$G.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -26971,7 +26985,7 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$3, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$D.hintsTitle)
+      className: aphrodite.css(styles$G.hintsTitle)
     }, "Hint"), /*#__PURE__*/React__namespace.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -27003,7 +27017,7 @@ class GradedGroupEditor extends React__namespace.Component {
     };
   };
 }
-const styles$D = aphrodite.StyleSheet.create({
+const styles$G = aphrodite.StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -28374,13 +28388,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$C.outerWrapper
+    style: styles$F.outerWrapper
   }, /*#__PURE__*/React__namespace.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$C = aphrodite.StyleSheet.create({
+const styles$F = aphrodite.StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29450,16 +29464,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React__namespace.createElement("label", {
-    className: aphrodite.css(styles$B.label)
+    className: aphrodite.css(styles$E.label)
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$B.row, style]
+    style: [styles$E.row, style]
   }, labelSide === "start" || /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$B.spaceEnd
+    style: styles$E.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$B.spaceStart
+    style: styles$E.spaceStart
   }, label)));
 };
-const styles$B = aphrodite.StyleSheet.create({
+const styles$E = aphrodite.StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -29536,11 +29550,11 @@ class Spring extends React__namespace.Component {
     } = this.props;
     return React__namespace.createElement(wonderBlocksCore.View, {
       "aria-hidden": "true",
-      style: [styles$A.grow, style]
+      style: [styles$D.grow, style]
     });
   }
 }
-const styles$A = aphrodite.StyleSheet.create({
+const styles$D = aphrodite.StyleSheet.create({
   grow: {
     flexGrow: 1
   }
@@ -29577,11 +29591,11 @@ function Heading(_ref) {
     onToggle
   } = _ref;
   return /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
-    style: [styles$z.container, !isCollapsible && styles$z.notClickable],
+    style: [styles$C.container, !isCollapsible && styles$C.notClickable],
     disabled: !isCollapsible,
     onClick: () => isCollapsible && onToggle?.(!isOpen)
   }, () => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$z.heading
+    style: styles$C.heading
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
     style: {
       fontSize: 14,
@@ -29591,7 +29605,7 @@ function Heading(_ref) {
     isExpanded: isOpen
   })));
 }
-const styles$z = aphrodite.StyleSheet.create({
+const styles$C = aphrodite.StyleSheet.create({
   container: {
     marginTop: wonderBlocksTokens.spacing.small_12,
     // NOTE(jeremy): This is the inverse of the @editorPadding CSS
@@ -29739,10 +29753,57 @@ function getDefaultGraphStartCoords(graph, range, step) {
         ...graph,
         startCoords: undefined
       }, range, step);
+    case "circle":
+      const startCoords = perseus.getCircleCoords({
+        ...graph,
+        startCoords: undefined
+      });
+      const radius = kmath.vector.length(kmath.vector.subtract(startCoords.radiusPoint, startCoords.center));
+      return {
+        center: startCoords.center,
+        radius
+      };
+    case "sinusoid":
+      return perseus.getSinusoidCoords({
+        ...graph,
+        startCoords: undefined
+      }, range, step);
+    case "quadratic":
+      return perseus.getQuadraticCoords({
+        ...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.
@@ -29756,19 +29817,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__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$y.container
+    style: styles$B.container
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionMenu, {
     menuText: "Add locked figure",
-    style: styles$y.addElementSelect
-  }, figureTypes.map(figureType => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionItem, {
+    style: styles$B.addElementSelect
+  }, figureTypesCurrent.map(figureType => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionItem, {
     key: `${id}-${figureType}`,
     label: figureType,
     onClick: () => onChange(figureType)
   }))));
 };
-const styles$y = aphrodite.StyleSheet.create({
+const styles$B = aphrodite.StyleSheet.create({
   container: {
     marginTop: wonderBlocksTokens.spacing.xSmall_8
   },
@@ -29799,19 +29861,19 @@ const AngleInput = props => {
   }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$x.row
+    style: styles$A.row
   }, "angle (degrees)", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     type: "number",
     value: angleInput,
     onChange: handleAngleChange,
-    style: styles$x.textField
+    style: styles$A.textField
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }));
 };
-const styles$x = aphrodite.StyleSheet.create({
+const styles$A = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29860,32 +29922,32 @@ const CoordinatePairInput = props => {
     onChange(newCoords);
   }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$w.row, style]
+    style: [styles$z.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$w.row
+    style: styles$z.row
   }, labels ? labels[0] : "x coord", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     type: "number",
     value: coordState[0],
     onChange: newValue => handleCoordChange(newValue, 0),
-    style: [styles$w.textField, error ? styles$w.errorField : undefined]
+    style: [styles$z.textField, error ? styles$z.errorField : undefined]
   })), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$w.row
+    style: styles$z.row
   }, labels ? labels[1] : "y coord", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     type: "number",
     value: coordState[1],
     onChange: newValue => handleCoordChange(newValue, 1),
-    style: [styles$w.textField, error ? styles$w.errorField : undefined]
+    style: [styles$z.textField, error ? styles$z.errorField : undefined]
   })));
 };
-const styles$w = aphrodite.StyleSheet.create({
+const styles$z = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29918,14 +29980,14 @@ const PerseusEditorAccordion = props => {
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksAccordion.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__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$v.accordionPanel, panelStyle]
+    style: [styles$y.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$v = aphrodite.StyleSheet.create({
+const styles$y = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: wonderBlocksTokens.color.fadedBlue8,
     marginTop: wonderBlocksTokens.spacing.xSmall_8
@@ -29956,13 +30018,13 @@ const ColorSwatch = props => {
     "aria-label":
     // Don't include an aria label for decorative circles.
     !decorative ? `${color}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$u.colorSwatch, {
+    style: [styles$x.colorSwatch, {
       border: `4px solid ${perseus.lockedFigureColors[color]}`,
       backgroundColor: filled ? perseus.lockedFigureColors[color] : wonderBlocksTokens.color.white
     }]
   });
 };
-const styles$u = aphrodite.StyleSheet.create({
+const styles$x = aphrodite.StyleSheet.create({
   colorSwatch: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -29981,10 +30043,10 @@ const ColorSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$t.row, style]
+    style: [styles$w.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$t.row
+    style: styles$w.row
   }, "color", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30003,7 +30065,7 @@ const ColorSelect = props => {
     })
   })))));
 };
-const styles$t = aphrodite.StyleSheet.create({
+const styles$w = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30019,17 +30081,17 @@ const EllipseSwatch = props => {
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$s.container, {
+    style: [styles$v.container, {
       border: `4px ${strokeStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$s.innerCircle, {
+    style: [styles$v.innerCircle, {
       backgroundColor: perseus.lockedFigureColors[color],
       opacity: perseus.lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$s = aphrodite.StyleSheet.create({
+const styles$v = aphrodite.StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30060,40 +30122,40 @@ const LockedFigureSettingsActions = props => {
     onRemove
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$r.container
+    style: styles$u.container
   }, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     startIcon: trashIcon__default["default"],
     "aria-label": `Delete locked ${figureType}`,
     onClick: onRemove,
     kind: "tertiary",
-    style: styles$r.deleteButton
-  }, "Delete"), /*#__PURE__*/React__namespace.createElement(Spring, null), props.showM2Features && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
+    style: styles$u.deleteButton
+  }, "Delete"), /*#__PURE__*/React__namespace.createElement(Spring, null), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretDoubleUpIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} to the back`,
     onClick: () => onMove("back"),
-    style: styles$r.iconButton
+    style: styles$u.iconButton
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretUpIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} backward`,
     onClick: () => onMove("backward"),
-    style: styles$r.iconButton
+    style: styles$u.iconButton
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretDownIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} forward`,
     onClick: () => onMove("forward"),
-    style: styles$r.iconButton
+    style: styles$u.iconButton
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretDoubleDownIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} to the front`,
     onClick: () => onMove("front"),
-    style: styles$r.iconButton
-  })));
+    style: styles$u.iconButton
+  }));
 };
-const styles$r = aphrodite.StyleSheet.create({
+const styles$u = aphrodite.StyleSheet.create({
   container: {
     width: "100%",
     flexDirection: "row",
@@ -30140,7 +30202,7 @@ const LockedEllipseSettings = props => {
     /*#__PURE__*/
     // Summary: Ellipse, center, radius, color (opacity, dashed)
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$q.row
+      style: styles$t.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Ellipse (${center[0]}, ${center[1]}), radius ${radius[0]}, ${radius[1]}`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(EllipseSwatch, {
@@ -30149,19 +30211,19 @@ const LockedEllipseSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$q.row
+    style: styles$t.row
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: center,
-    style: styles$q.spaceUnder,
+    style: styles$t.spaceUnder,
     onChange: newCoords => onChangeProps({
       center: newCoords
     })
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$q.spaceUnder
+    style: styles$t.spaceUnder
   }, /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, "The coordinates for the center of the ellipse."))), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: radius,
     labels: ["x radius", "y radius"],
-    style: styles$q.spaceUnder,
+    style: styles$t.spaceUnder,
     onChange: newCoords => onChangeProps({
       radius: newCoords
     })
@@ -30173,7 +30235,7 @@ const LockedEllipseSettings = props => {
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xSmall_8
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$q.row, styles$q.spaceUnder]
+    style: [styles$t.row, styles$t.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30181,7 +30243,7 @@ const LockedEllipseSettings = props => {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$q.row
+    style: styles$t.row
   }, "fill", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30198,7 +30260,7 @@ const LockedEllipseSettings = props => {
     label: option
   }))))), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$q.row
+    style: styles$t.row
   }, "stroke", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30216,13 +30278,12 @@ const LockedEllipseSettings = props => {
     value: "dashed",
     label: "dashed"
   }))), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
-    showM2Features: props.showM2Features,
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
   }));
 };
-const styles$q = aphrodite.StyleSheet.create({
+const styles$t = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30243,7 +30304,7 @@ const LabeledSwitch = props => {
   const ids = wonderBlocksCore.useUniqueIdWithMock();
   const switchId = ids.get("switch");
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$p.row, style]
+    style: [styles$s.row, style]
   }, /*#__PURE__*/React__namespace.createElement(Switch__default["default"], {
     id: switchId,
     checked: checked,
@@ -30255,7 +30316,7 @@ const LabeledSwitch = props => {
     htmlFor: switchId
   }, label));
 };
-const styles$p = aphrodite.StyleSheet.create({
+const styles$s = aphrodite.StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30289,13 +30350,13 @@ const DefiningPointSettings = props => {
   return /*#__PURE__*/React__namespace.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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$o.row
+      style: styles$r.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `${label || "Point"} (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), showPoint && /*#__PURE__*/React__namespace.createElement(ColorSwatch, {
@@ -30305,7 +30366,7 @@ const DefiningPointSettings = props => {
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: coord,
     error: !!error,
-    style: styles$o.spaceUnder,
+    style: styles$r.spaceUnder,
     onChange: newCoords => {
       onChangeProps({
         coord: newCoords
@@ -30314,12 +30375,12 @@ const DefiningPointSettings = props => {
   }), onTogglePoint && /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "show point on graph",
     checked: !!showPoint,
-    style: showPoint && styles$o.spaceUnder,
+    style: showPoint && styles$r.spaceUnder,
     onChange: onTogglePoint
   }), showPoint && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$o.spaceUnder
+    style: styles$r.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30330,7 +30391,7 @@ const DefiningPointSettings = props => {
     }
   })));
 };
-const styles$o = aphrodite.StyleSheet.create({
+const styles$r = aphrodite.StyleSheet.create({
   container: {
     marginTop: wonderBlocksTokens.spacing.xSmall_8,
     marginBottom: 0,
@@ -30357,15 +30418,15 @@ const LineSwatch = props => {
     lineStyle
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$n.container
+    style: styles$q.container
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, ${lineStyle}`,
-    style: [styles$n.lineSwatch, {
+    style: [styles$q.lineSwatch, {
       border: `5px ${lineStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }));
 };
-const styles$n = aphrodite.StyleSheet.create({
+const styles$q = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: wonderBlocksTokens.color.white,
     justifyContent: "center",
@@ -30424,7 +30485,7 @@ const LockedLineSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$m.row
+      style: styles$p.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
@@ -30433,7 +30494,7 @@ const LockedLineSettings = props => {
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$m.row, styles$m.spaceUnder]
+    style: [styles$p.row, styles$p.spaceUnder]
   }, "kind", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxxSmall_4
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30454,7 +30515,7 @@ const LockedLineSettings = props => {
     value: "segment",
     label: "segment"
   }))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$m.row
+    style: styles$p.row
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
@@ -30462,7 +30523,7 @@ const LockedLineSettings = props => {
     size: wonderBlocksTokens.spacing.small_12
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$m.row
+    style: styles$p.row
   }, "style", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxxSmall_4
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30473,7 +30534,7 @@ const LockedLineSettings = props => {
     // Placeholder is required, but never gets used.
     ,
     placeholder: "",
-    style: styles$m.selectMarginOffset
+    style: styles$p.selectMarginOffset
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "solid",
     label: "solid"
@@ -30481,7 +30542,7 @@ const LockedLineSettings = props => {
     value: "dashed",
     label: "dashed"
   })))), isInvalid && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    style: styles$m.errorText
+    style: styles$p.errorText
   }, lengthZeroStr), /*#__PURE__*/React__namespace.createElement(DefiningPointSettings, _extends({
     label: "Point 1",
     showPoint: showPoint1,
@@ -30501,13 +30562,12 @@ const LockedLineSettings = props => {
     }),
     onChangeProps: newProps => handleChangePoint(newProps, 1)
   })), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
-    showM2Features: props.showM2Features,
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
   }));
 };
-const styles$m = aphrodite.StyleSheet.create({
+const styles$p = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30552,7 +30612,7 @@ const LockedPointSettings = props => {
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$l.row
+      style: styles$o.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Point (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(ColorSwatch, {
@@ -30561,7 +30621,7 @@ const LockedPointSettings = props => {
     }))
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: coord,
-    style: styles$l.spaceUnder,
+    style: styles$o.spaceUnder,
     onChange: newCoord => {
       onChangeProps({
         coord: newCoord
@@ -30570,7 +30630,7 @@ const LockedPointSettings = props => {
   }), /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$l.spaceUnder
+    style: styles$o.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30580,13 +30640,12 @@ const LockedPointSettings = props => {
       });
     }
   }), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
-    showM2Features: props.showM2Features,
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
   }));
 };
-const styles$l = aphrodite.StyleSheet.create({
+const styles$o = aphrodite.StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30604,17 +30663,17 @@ const PolygonSwatch = props => {
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$k.container, {
+    style: [styles$n.container, {
       border: `4px ${strokeStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$k.innerSquare, {
+    style: [styles$n.innerSquare, {
       backgroundColor: perseus.lockedFigureColors[color],
       opacity: perseus.lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$k = aphrodite.StyleSheet.create({
+const styles$n = aphrodite.StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30656,7 +30715,7 @@ const LockedPolygonSettings = props => {
     /*#__PURE__*/
     // Summary: Polygon, number of sides, style swatch
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$j.row
+      style: styles$m.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Polygon, ${points.length} sides`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(PolygonSwatch, {
@@ -30665,7 +30724,7 @@ const LockedPolygonSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$j.row, styles$j.spaceUnder]
+    style: [styles$m.row, styles$m.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30673,7 +30732,7 @@ const LockedPolygonSettings = props => {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$j.row
+    style: styles$m.row
   }, "fill", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30690,7 +30749,7 @@ const LockedPolygonSettings = props => {
     label: option
   }))))), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$j.row, styles$j.spaceUnder]
+    style: [styles$m.row, styles$m.spaceUnder]
   }, "stroke", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30713,17 +30772,17 @@ const LockedPolygonSettings = props => {
     onChange: newValue => onChangeProps({
       showVertices: newValue
     }),
-    style: styles$j.spaceUnder
+    style: styles$m.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.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__namespace.createElement(wonderBlocksCore.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__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `${pointLabel}:`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.medium_16
     }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
@@ -30751,7 +30810,7 @@ const LockedPolygonSettings = props => {
           points: newPoints
         });
       },
-      style: styles$j.icon
+      style: styles$m.icon
     }));
   }), /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     kind: "tertiary",
@@ -30762,13 +30821,12 @@ const LockedPolygonSettings = props => {
       });
     }
   }, "Add point")), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
-    showM2Features: props.showM2Features,
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
   }));
 };
-const styles$j = aphrodite.StyleSheet.create({
+const styles$m = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30826,7 +30884,7 @@ const LockedVectorSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$i.row
+      style: styles$l.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
@@ -30834,19 +30892,19 @@ const LockedVectorSettings = props => {
       lineStyle: "solid"
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$i.row, styles$i.spaceUnder]
+    style: [styles$l.row, styles$l.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
   })), isInvalid && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    style: styles$i.errorText
+    style: styles$l.errorText
   }, lengthErrorMessage), /*#__PURE__*/React__namespace.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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$i.row
+      style: styles$l.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Tail (${tail[0]}, ${tail[1]})`))
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: tail,
@@ -30857,10 +30915,10 @@ const LockedVectorSettings = props => {
   })), /*#__PURE__*/React__namespace.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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$i.row
+      style: styles$l.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Tip (${tip[0]}, ${tip[1]})`))
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: tip,
@@ -30869,13 +30927,12 @@ const LockedVectorSettings = props => {
       handleChangePoint(newProps, 1);
     }
   })), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
-    showM2Features: props.showM2Features,
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
   }));
 };
-const styles$i = aphrodite.StyleSheet.create({
+const styles$l = aphrodite.StyleSheet.create({
   accordionPanel: {
     paddingBottom: wonderBlocksTokens.spacing.medium_16
   },
@@ -30912,19 +30969,11 @@ const LockedFigureSettings = props => {
     case "line":
       return /*#__PURE__*/React__namespace.createElement(LockedLineSettings, props);
     case "vector":
-      if (props.showM2Features) {
-        return /*#__PURE__*/React__namespace.createElement(LockedVectorSettings, props);
-      }
-      break;
+      return /*#__PURE__*/React__namespace.createElement(LockedVectorSettings, props);
     case "ellipse":
-      if (props.showM2Features) {
-        return /*#__PURE__*/React__namespace.createElement(LockedEllipseSettings, props);
-      }
-      break;
+      return /*#__PURE__*/React__namespace.createElement(LockedEllipseSettings, props);
     case "polygon":
-      if (props.showM2Features) {
-        return /*#__PURE__*/React__namespace.createElement(LockedPolygonSettings, props);
-      }
+      return /*#__PURE__*/React__namespace.createElement(LockedPolygonSettings, props);
   }
   return null;
 };
@@ -31038,7 +31087,6 @@ const LockedFiguresSection = props => {
     }
     return /*#__PURE__*/React__namespace.createElement(LockedFigureSettings, _extends({
       key: `${uniqueId}-locked-${figure}-${index}`,
-      showM2Features: props.showM2Features,
       showM2bFeatures: props.showM2bFeatures,
       expanded: expandedStates[index],
       onToggle: newValue => {
@@ -31052,9 +31100,8 @@ const LockedFiguresSection = props => {
       onRemove: () => removeLockedFigure(index)
     }));
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$h.buttonContainer
+    style: styles$k.buttonContainer
   }, /*#__PURE__*/React__namespace.createElement(LockedFigureSelect, {
-    showM2Features: props.showM2Features,
     showM2bFeatures: props.showM2bFeatures,
     id: `${uniqueId}-select`,
     onChange: addLockedFigure
@@ -31063,10 +31110,10 @@ const LockedFiguresSection = props => {
   }), showExpandButton && /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     kind: "secondary",
     onClick: () => toggleExpanded(allCollapsed),
-    style: styles$h.button
+    style: styles$k.button
   }, buttonLabel))));
 };
-const styles$h = aphrodite.StyleSheet.create({
+const styles$k = aphrodite.StyleSheet.create({
   buttonContainer: {
     flexDirection: "row",
     alignItems: "center"
@@ -31102,7 +31149,7 @@ const GraphPointsCountSelector = _ref => {
     // Never uses placeholder, always has value
     ,
     placeholder: "",
-    style: styles$g.singleSelectShort
+    style: styles$j.singleSelectShort
   }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     key: n,
     value: `${n}`,
@@ -31113,7 +31160,7 @@ const GraphPointsCountSelector = _ref => {
     label: "unlimited"
   })]);
 };
-const styles$g = aphrodite.StyleSheet.create({
+const styles$j = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31126,7 +31173,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__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "linear",
     label: "Linear function"
@@ -31159,7 +31206,7 @@ const GraphTypeSelector = props => {
     label: "Angle"
   }));
 };
-const styles$f = aphrodite.StyleSheet.create({
+const styles$i = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31588,10 +31635,10 @@ class InteractiveGraphSettings extends React__namespace.Component {
       onChange: this.change
     }))), /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Background image URL:",
-      style: styles$e.resetSpaceTop
+      style: styles$h.resetSpaceTop
     }, /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
-      className: aphrodite.css(styles$e.backgroundUrlInput),
+      className: aphrodite.css(styles$h.backgroundUrlInput),
       ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
@@ -31607,14 +31654,14 @@ class InteractiveGraphSettings extends React__namespace.Component {
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$c, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$e.protractorSection
+      style: styles$h.protractorSection
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$e.checkboxRow
+      style: styles$h.checkboxRow
     }, /*#__PURE__*/React__namespace.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__namespace.createElement(Banner__default["default"], {
       layout: "floating",
       text: "The protractor is not accessible. Please consider an alternate approach.",
@@ -31622,7 +31669,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
     }))));
   }
 }
-const styles$e = aphrodite.StyleSheet.create({
+const styles$h = aphrodite.StyleSheet.create({
   resetSpaceTop: {
     marginTop: 0
   },
@@ -31661,14 +31708,14 @@ const SegmentCountSelector = _ref => {
       const num = +newValue;
       onChange(num);
     },
-    style: styles$d.singleSelectShort
+    style: styles$g.singleSelectShort
   }, ___default["default"].range(1, 7).map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     key: n,
     value: `${n}`,
     label: `${n} segment${n > 1 ? "s" : ""}`
   })));
 };
-const styles$d = aphrodite.StyleSheet.create({
+const styles$g = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31676,13 +31723,65 @@ const styles$d = aphrodite.StyleSheet.create({
   }
 });
 
+const StartCoordsCircle = props => {
+  const {
+    startCoords,
+    onChange
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$f.tile
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$f.row
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Center:"), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
+    coord: startCoords.center,
+    labels: ["x", "y"],
+    onChange: coord => onChange({
+      center: coord,
+      radius: startCoords.radius
+    })
+  })), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$f.row
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Radius:"), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
+    value: startCoords.radius.toString(),
+    type: "number",
+    onChange: value => {
+      onChange({
+        center: startCoords.center,
+        radius: parseFloat(value)
+      });
+    },
+    style: styles$f.textField
+  })));
+};
+const styles$f = aphrodite.StyleSheet.create({
+  tile: {
+    backgroundColor: wonderBlocksTokens.color.fadedBlue8,
+    marginTop: wonderBlocksTokens.spacing.xSmall_8,
+    padding: wonderBlocksTokens.spacing.small_12,
+    borderRadius: wonderBlocksTokens.spacing.xSmall_8
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  textField: {
+    width: wonderBlocksTokens.spacing.xxxLarge_64
+  }
+});
+
 const StartCoordsLine = props => {
   const {
     startCoords,
     onChange
   } = props;
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$c.tile
+    style: styles$e.tile
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 1:"), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.small_12
   }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
@@ -31690,7 +31789,7 @@ const StartCoordsLine = props => {
     labels: ["x", "y"],
     onChange: value => onChange([value, startCoords[1]])
   })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$c.tile
+    style: styles$e.tile
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 2:"), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.small_12
   }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
@@ -31699,7 +31798,7 @@ const StartCoordsLine = props => {
     onChange: value => onChange([startCoords[0], value])
   })));
 };
-const styles$c = aphrodite.StyleSheet.create({
+const styles$e = aphrodite.StyleSheet.create({
   tile: {
     backgroundColor: wonderBlocksTokens.color.fadedBlue8,
     marginTop: wonderBlocksTokens.spacing.xSmall_8,
@@ -31722,7 +31821,7 @@ const StartCoordsMultiline = props => {
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `${graphName} ${i + 1}`),
     expanded: true
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$b.nestedTile
+    style: styles$d.nestedTile
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 1:"), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.small_12
   }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
@@ -31734,7 +31833,7 @@ const StartCoordsMultiline = props => {
       onChange(newCoords);
     }
   })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$b.nestedTile
+    style: styles$d.nestedTile
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 2:"), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.small_12
   }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
@@ -31747,7 +31846,7 @@ const StartCoordsMultiline = props => {
     }
   })))));
 };
-const styles$b = aphrodite.StyleSheet.create({
+const styles$d = aphrodite.StyleSheet.create({
   nestedTile: {
     paddingBottom: wonderBlocksTokens.spacing.small_12,
     flexDirection: "row",
@@ -31755,6 +31854,112 @@ const styles$b = aphrodite.StyleSheet.create({
   }
 });
 
+const StartCoordsQuadratic = props => {
+  const {
+    startCoords,
+    onChange
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$c.equationSection
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, "Starting equation:"), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.BodyMonospace, {
+    style: styles$c.equationBody
+  }, getQuadraticEquation(startCoords))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$c.tile
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 1:"), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
+    coord: startCoords[0],
+    labels: ["x", "y"],
+    onChange: value => onChange([value, startCoords[1], startCoords[2]])
+  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$c.tile
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 2:"), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
+    coord: startCoords[1],
+    labels: ["x", "y"],
+    onChange: value => onChange([startCoords[0], value, startCoords[2]])
+  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$c.tile
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 3:"), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
+    coord: startCoords[2],
+    labels: ["x", "y"],
+    onChange: value => onChange([startCoords[0], startCoords[1], value])
+  })));
+};
+const styles$c = aphrodite.StyleSheet.create({
+  tile: {
+    backgroundColor: wonderBlocksTokens.color.fadedBlue8,
+    marginTop: wonderBlocksTokens.spacing.xSmall_8,
+    padding: wonderBlocksTokens.spacing.small_12,
+    borderRadius: wonderBlocksTokens.spacing.xSmall_8,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  equationSection: {
+    marginTop: wonderBlocksTokens.spacing.small_12
+  },
+  equationBody: {
+    backgroundColor: wonderBlocksTokens.color.fadedOffBlack8,
+    border: `1px solid ${wonderBlocksTokens.color.fadedOffBlack32}`,
+    marginTop: wonderBlocksTokens.spacing.xSmall_8,
+    paddingLeft: wonderBlocksTokens.spacing.xSmall_8,
+    paddingRight: wonderBlocksTokens.spacing.xSmall_8,
+    fontSize: wonderBlocksTokens.font.size.xSmall
+  }
+});
+
+const StartCoordsSinusoid = props => {
+  const {
+    startCoords,
+    onChange
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$b.equationSection
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, "Starting equation:"), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.BodyMonospace, {
+    style: styles$b.equationBody
+  }, getSinusoidEquation(startCoords))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$b.tile
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 1:"), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
+    coord: startCoords[0],
+    labels: ["x", "y"],
+    onChange: value => onChange([value, startCoords[1]])
+  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$b.tile
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 2:"), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
+    coord: startCoords[1],
+    labels: ["x", "y"],
+    onChange: value => onChange([startCoords[0], value])
+  })));
+};
+const styles$b = aphrodite.StyleSheet.create({
+  tile: {
+    backgroundColor: wonderBlocksTokens.color.fadedBlue8,
+    marginTop: wonderBlocksTokens.spacing.xSmall_8,
+    padding: wonderBlocksTokens.spacing.small_12,
+    borderRadius: wonderBlocksTokens.spacing.xSmall_8,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  equationSection: {
+    marginTop: wonderBlocksTokens.spacing.small_12
+  },
+  equationBody: {
+    backgroundColor: wonderBlocksTokens.color.fadedOffBlack8,
+    border: `1px solid ${wonderBlocksTokens.color.fadedOffBlack32}`,
+    marginTop: wonderBlocksTokens.spacing.xSmall_8,
+    paddingLeft: wonderBlocksTokens.spacing.xSmall_8,
+    paddingRight: wonderBlocksTokens.spacing.xSmall_8,
+    fontSize: wonderBlocksTokens.font.size.xSmall
+  }
+});
+
 const StartCoordsSettingsInner = props => {
   const {
     type,
@@ -31785,6 +31990,28 @@ const StartCoordsSettingsInner = props => {
         startCoords: multiLineCoords,
         onChange: onChange
       });
+    case "circle":
+      const circleCoords = perseus.getCircleCoords(props);
+      const radius = kmath.vector.length(kmath.vector.subtract(circleCoords.radiusPoint, circleCoords.center));
+      return /*#__PURE__*/React__namespace.createElement(StartCoordsCircle, {
+        startCoords: {
+          center: circleCoords.center,
+          radius
+        },
+        onChange: onChange
+      });
+    case "sinusoid":
+      const sinusoidCoords = perseus.getSinusoidCoords(props, range, step);
+      return /*#__PURE__*/React__namespace.createElement(StartCoordsSinusoid, {
+        startCoords: sinusoidCoords,
+        onChange: onChange
+      });
+    case "quadratic":
+      const quadraticCoords = perseus.getQuadraticCoords(props, range, step);
+      return /*#__PURE__*/React__namespace.createElement(StartCoordsQuadratic, {
+        startCoords: quadraticCoords,
+        onChange: onChange
+      });
     default:
       return null;
   }
@@ -31839,6 +32066,10 @@ const POLYGON_SIDES = ___default["default"].map(___default["default"].range(3, 1
     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.
@@ -31932,6 +32163,9 @@ class InteractiveGraphEditor extends React__namespace.Component {
         className: "perseus-error"
       }, this.props.valid);
     }
+    const startCoordsPhase1 = this.props.apiOptions?.flags?.mafs?.["start-coords-ui-phase-1"];
+    const startCoordsPhase2 = this.props.apiOptions?.flags?.mafs?.["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__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Type of Graph:"
     }, /*#__PURE__*/React__namespace.createElement(GraphTypeSelector, {
@@ -32076,7 +32310,9 @@ class InteractiveGraphEditor extends React__namespace.Component {
           }
         });
       }
-    })), this.props.graph?.type && this.props.apiOptions.flags?.mafs?.["start-coords-ui"] && /*#__PURE__*/React__namespace.createElement(StartCoordsSettings, _extends({}, this.props.graph, {
+    })), this.props.graph?.type &&
+    // TODO(LEMS-2228): Remove flags once this is fully released
+    displayStartCoordsUI && /*#__PURE__*/React__namespace.createElement(StartCoordsSettings, _extends({}, this.props.graph, {
       range: this.props.range,
       step: this.props.step,
       onChange: this.changeStartCoords
@@ -32133,7 +32369,6 @@ class InteractiveGraphEditor extends React__namespace.Component {
     // Only show the "Add locked figure" dropdown if the graph
     // is using Mafs.
     this.props.graph && this.props.apiOptions?.flags?.mafs?.[this.props.graph.type] && /*#__PURE__*/React__namespace.createElement(LockedFiguresSection, {
-      showM2Features: this.props.apiOptions?.flags?.mafs?.["interactive-graph-locked-features-m2"],
       showM2bFeatures: this.props.apiOptions?.flags?.mafs?.["interactive-graph-locked-features-m2b"],
       figures: this.props.lockedFigures,
       onChange: this.props.onChange