@khanacademy/perseus-editor 11.4.1 → 11.6.0

package/dist/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var perseusCore = require('@khanacademy/perseus-core');
 var perseus = require('@khanacademy/perseus');
-var React = require('react');
+var React$1 = require('react');
 var _ = require('underscore');
 var createReactClass = require('create-react-class');
 var Clickable = require('@khanacademy/wonder-blocks-clickable');
@@ -13,17 +13,19 @@ var aphrodite = require('aphrodite');
 var $ = require('jquery');
 var PropTypes = require('prop-types');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+var Switch = require('@khanacademy/wonder-blocks-switch');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var caretRight = require('@phosphor-icons/core/bold/caret-right-bold.svg');
 var classNames = require('classnames');
 var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
+var keypadContext = require('@khanacademy/keypad-context');
+var mathInput = require('@khanacademy/math-input');
 var ReactDOM = require('react-dom');
 var kmath = require('@khanacademy/kmath');
 var KAS = require('@khanacademy/kas');
 var Button = require('@khanacademy/wonder-blocks-button');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
-var mathInput = require('@khanacademy/math-input');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
 var wonderBlocksAccordion = require('@khanacademy/wonder-blocks-accordion');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
@@ -32,7 +34,10 @@ var caretDoubleUpIcon = require('@phosphor-icons/core/bold/caret-double-up-bold.
 var caretDownIcon = require('@phosphor-icons/core/bold/caret-down-bold.svg');
 var caretUpIcon = require('@phosphor-icons/core/bold/caret-up-bold.svg');
 var trashIcon = require('@phosphor-icons/core/bold/trash-bold.svg');
-var Switch = require('@khanacademy/wonder-blocks-switch');
+var arrowFatDown = require('@phosphor-icons/core/regular/arrow-fat-down.svg');
+var arrowFatLeft = require('@phosphor-icons/core/regular/arrow-fat-left.svg');
+var arrowFatRight = require('@phosphor-icons/core/regular/arrow-fat-right.svg');
+var arrowFatUp = require('@phosphor-icons/core/regular/arrow-fat-up.svg');
 var minusCircle = require('@phosphor-icons/core/regular/minus-circle.svg');
 var plusCircle = require('@phosphor-icons/core/regular/plus-circle.svg');
 var Banner = require('@khanacademy/wonder-blocks-banner');
@@ -58,12 +63,13 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React$1);
 var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
 var createReactClass__default = /*#__PURE__*/_interopDefaultLegacy(createReactClass);
 var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
 var $__default = /*#__PURE__*/_interopDefaultLegacy($);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var caretRight__default = /*#__PURE__*/_interopDefaultLegacy(caretRight);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
@@ -75,7 +81,10 @@ var caretDoubleUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(caretDoubleU
 var caretDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(caretDownIcon);
 var caretUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(caretUpIcon);
 var trashIcon__default = /*#__PURE__*/_interopDefaultLegacy(trashIcon);
-var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
+var arrowFatDown__default = /*#__PURE__*/_interopDefaultLegacy(arrowFatDown);
+var arrowFatLeft__default = /*#__PURE__*/_interopDefaultLegacy(arrowFatLeft);
+var arrowFatRight__default = /*#__PURE__*/_interopDefaultLegacy(arrowFatRight);
+var arrowFatUp__default = /*#__PURE__*/_interopDefaultLegacy(arrowFatUp);
 var minusCircle__default = /*#__PURE__*/_interopDefaultLegacy(minusCircle);
 var plusCircle__default = /*#__PURE__*/_interopDefaultLegacy(plusCircle);
 var Banner__default = /*#__PURE__*/_interopDefaultLegacy(Banner);
@@ -83,7 +92,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.4.1";
+const libVersion = "11.6.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -278,13 +287,13 @@ class SectionControlButton extends React__namespace.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$R.button
+      style: styles$T.button
     }, _ref => {
       return /*#__PURE__*/React__namespace.createElement(InlineIcon$a, icon);
     });
   }
 }
-const styles$R = aphrodite.StyleSheet.create({
+const styles$T = aphrodite.StyleSheet.create({
   button: {
     backgroundColor: wonderBlocksTokens.color.gold,
     margin: 2,
@@ -20606,6 +20615,111 @@ const DragTarget = createReactClass__default["default"]({
   }
 });
 
+const mediaDefaultSpecLargeMarginWidth = wonderBlocksTokens.spacing.large_24;
+const MEDIA_DEFAULT_SPEC = {
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: wonderBlocksTokens.spacing.medium_16,
+    marginWidth: wonderBlocksTokens.spacing.medium_16
+  },
+  medium: {
+    query: "(min-width: 768px) and (max-width: 1023px)",
+    totalColumns: 8,
+    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
+    marginWidth: wonderBlocksTokens.spacing.large_24
+  },
+  large: {
+    query: "(min-width: 1024px)",
+    totalColumns: 12,
+    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
+    marginWidth: mediaDefaultSpecLargeMarginWidth,
+    maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
+  }
+};
+({
+  large: {
+    query: "(min-width: 1px)",
+    totalColumns: 12,
+    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
+    marginWidth: wonderBlocksTokens.spacing.medium_16
+  }
+});
+({
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: wonderBlocksTokens.spacing.medium_16,
+    marginWidth: wonderBlocksTokens.spacing.medium_16
+  },
+  large: {
+    query: "(min-width: 768px)",
+    totalColumns: 12,
+    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
+    marginWidth: wonderBlocksTokens.spacing.xxLarge_48
+  }
+});
+
+const defaultContext = {
+  ssrSize: "large",
+  mediaSpec: MEDIA_DEFAULT_SPEC
+};
+const MediaLayoutContext = React__namespace.createContext(defaultContext);
+MediaLayoutContext.displayName = "MediaLayoutContext";
+
+class Spring extends React__namespace.Component {
+  render() {
+    const {
+      style
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksCore.View, {
+      "aria-hidden": "true",
+      style: [styles$S.grow, style]
+    });
+  }
+}
+const styles$S = aphrodite.StyleSheet.create({
+  grow: {
+    flexGrow: 1
+  }
+});
+
+class Strut extends React__namespace.Component {
+  render() {
+    const {
+      size,
+      style
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksCore.View, {
+      "aria-hidden": "true",
+      style: [strutStyle(size), style]
+    });
+  }
+}
+const strutStyle = size => {
+  return {
+    width: size,
+    MsFlexBasis: size,
+    MsFlexPreferredSize: size,
+    WebkitFlexBasis: size,
+    flexBasis: size,
+    flexShrink: 0
+  };
+};
+
+const Spacing = {
+  xxxxSmall_2: 2,
+  xxxSmall_4: 4,
+  xxSmall_6: 6,
+  xSmall_8: 8,
+  small_12: 12,
+  medium_16: 16,
+  large_24: 24,
+  xLarge_32: 32,
+  xxLarge_48: 48,
+  xxxLarge_64: 64
+};
+
 const {
   InlineIcon: InlineIcon$9
 } = perseus.components;
@@ -20665,11 +20779,11 @@ class WidgetEditor extends React__namespace.Component {
     };
     this.props.onChange(newWidgetInfo, cb, silent);
   };
-  _toggleStatic = e => {
-    e.preventDefault();
-    const newWidgetInfo = Object.assign({}, this.state.widgetInfo, {
-      static: !this.state.widgetInfo.static
-    });
+  _setStatic = value => {
+    const newWidgetInfo = {
+      ...this.state.widgetInfo,
+      static: value
+    };
     this.props.onChange(newWidgetInfo);
   };
   _handleAlignmentChange = e => {
@@ -20717,13 +20831,10 @@ class WidgetEditor extends React__namespace.Component {
       className: "perseus-widget-editor-title-id",
       href: "#",
       onClick: this._toggleWidget
-    }, this.props.id, this.state.showWidget ? /*#__PURE__*/React__namespace.createElement(InlineIcon$9, iconChevronDown$1) : /*#__PURE__*/React__namespace.createElement(InlineIcon$9, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React__namespace.createElement("input", {
-      type: "button"
-      // @ts-expect-error - TS2322 - Type '(e: Event) => void' is not assignable to type 'MouseEventHandler<HTMLInputElement>'.
-      ,
-      onClick: this._toggleStatic,
-      className: "simple-button--small",
-      value: widgetInfo.static ? "Unset as static" : "Set as static"
+    }, this.props.id, this.state.showWidget ? /*#__PURE__*/React__namespace.createElement(InlineIcon$9, iconChevronDown$1) : /*#__PURE__*/React__namespace.createElement(InlineIcon$9, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React__namespace.createElement(LabeledSwitch$1, {
+      label: "Static",
+      checked: !!widgetInfo.static,
+      onChange: this._setStatic
     }), supportedAlignments.length > 1 && /*#__PURE__*/React__namespace.createElement("select", {
       className: "alignment",
       value: widgetInfo.alignment,
@@ -20746,6 +20857,21 @@ class WidgetEditor extends React__namespace.Component {
     }, widgetInfo.options))));
   }
 }
+function LabeledSwitch$1(props) {
+  const {
+    label,
+    ...switchProps
+  } = props;
+  const ids = wonderBlocksCore.useUniqueIdWithMock();
+  const id = ids.get("switch");
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("label", {
+    htmlFor: id
+  }, label), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: Spacing.xxSmall_6
+  }), /*#__PURE__*/React__namespace.createElement(Switch__default["default"], _extends({
+    id: id
+  }, switchProps)));
+}
 
 class WidgetSelect extends React__namespace.Component {
   shouldComponentUpdate() {
@@ -20789,13 +20915,13 @@ class WidgetSelect extends React__namespace.Component {
  * that collapse a region.
  */
 function ToggleableCaret(props) {
-  const iconStyle = props.isExpanded ? styles$Q.expanded : styles$Q.collapsed;
+  const iconStyle = props.isExpanded ? styles$R.expanded : styles$R.collapsed;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
     icon: caretRight__default["default"],
     style: iconStyle
   });
 }
-const styles$Q = aphrodite.StyleSheet.create({
+const styles$R = aphrodite.StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20825,16 +20951,16 @@ class TexErrorView extends React__namespace.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$P.errorContainer
+      style: styles$Q.errorContainer
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$P.title,
+      style: styles$Q.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$P.errorExplanation
+      style: styles$Q.errorExplanation
     }, "If your math doesn't display correctly, these errors might help you troubleshoot. Message #content-kitchen for help."), showErrors && errorList.map((e, index) => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$P.error,
+      style: styles$Q.error,
       key: index
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: {
@@ -20843,7 +20969,7 @@ class TexErrorView extends React__namespace.Component {
     }, e.math), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, e.message))));
   }
 }
-const styles$P = aphrodite.StyleSheet.create({
+const styles$Q = aphrodite.StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -23920,7 +24046,7 @@ class ItemExtrasEditor extends React__namespace.Component {
   }
 }
 const ItemExtraCheckbox = props => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-  style: [styles$O.checkbox, props.indent ? styles$O.indented : undefined]
+  style: [styles$P.checkbox, props.indent ? styles$P.indented : undefined]
 }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
   label: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
@@ -23930,7 +24056,7 @@ const ItemExtraCheckbox = props => /*#__PURE__*/React__namespace.createElement(w
   checked: props.checked,
   onChange: newCheckedState => props.onChange(newCheckedState)
 }));
-const styles$O = aphrodite.StyleSheet.create({
+const styles$P = aphrodite.StyleSheet.create({
   indented: {
     marginInlineStart: wonderBlocksTokens.spacing.large_24
   }
@@ -24357,6 +24483,64 @@ var i18n = {
   findImagesInItemData: findImagesInItemData
 };
 
+/**
+ * The `ContentPreview` component provides a simple preview system for Perseus
+ * Content. Due to how Persus styles are built, the preview styling matches the
+ * current device based on the viewport width (using `@media` queries for
+ * `min-width` and `max-width`).
+ *
+ * The preview will render the mobile variant (styling and layout) when the
+ * `previewDevice` is phone or tablet. Note that the styling cannot be matched
+ * 100% due to the above `@media` query limitation.
+ */
+function ContentPreview(_ref) {
+  let {
+    question,
+    apiOptions,
+    seamless,
+    linterContext,
+    legacyPerseusLint,
+    previewDevice,
+    strings
+  } = _ref;
+  const isMobile = previewDevice !== "desktop";
+  const className = isMobile ? "perseus-mobile" : "";
+  return /*#__PURE__*/React.createElement(wonderBlocksCore.View, {
+    className: `framework-perseus ${className}`,
+    style: [styles$O.container, !seamless ? styles$O.gutter : undefined]
+  }, /*#__PURE__*/React.createElement(keypadContext.StatefulKeypadContextProvider, null, /*#__PURE__*/React.createElement(keypadContext.KeypadContext.Consumer, null, _ref2 => {
+    let {
+      setKeypadActive,
+      keypadElement,
+      setKeypadElement
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(perseus.Renderer, _extends({
+      strings: strings,
+      apiOptions: {
+        ...apiOptions,
+        isMobile
+      },
+      keypadElement: keypadElement,
+      linterContext: linterContext,
+      legacyPerseusLint: legacyPerseusLint
+    }, question)), /*#__PURE__*/React.createElement(mathInput.MobileKeypad, {
+      onAnalyticsEvent: () => Promise.resolve(),
+      onDismiss: () => setKeypadActive(false),
+      onElementMounted: setKeypadElement
+    }));
+  })));
+}
+const styles$O = aphrodite.StyleSheet.create({
+  container: {
+    padding: wonderBlocksTokens.spacing.xxxSmall_4,
+    containerType: "inline-size",
+    containerName: "perseus-root"
+  },
+  gutter: {
+    marginRight: perseus.constants.lintGutterWidth
+  }
+});
+
 var isObject = function (obj) {
   return obj === Object(obj);
 };
@@ -26346,98 +26530,6 @@ class ExplanationEditor extends React__namespace.Component {
   }
 }
 
-const mediaDefaultSpecLargeMarginWidth = wonderBlocksTokens.spacing.large_24;
-const MEDIA_DEFAULT_SPEC = {
-  small: {
-    query: "(max-width: 767px)",
-    totalColumns: 4,
-    gutterWidth: wonderBlocksTokens.spacing.medium_16,
-    marginWidth: wonderBlocksTokens.spacing.medium_16
-  },
-  medium: {
-    query: "(min-width: 768px) and (max-width: 1023px)",
-    totalColumns: 8,
-    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
-    marginWidth: wonderBlocksTokens.spacing.large_24
-  },
-  large: {
-    query: "(min-width: 1024px)",
-    totalColumns: 12,
-    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
-    marginWidth: mediaDefaultSpecLargeMarginWidth,
-    maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
-  }
-};
-({
-  large: {
-    query: "(min-width: 1px)",
-    totalColumns: 12,
-    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
-    marginWidth: wonderBlocksTokens.spacing.medium_16
-  }
-});
-({
-  small: {
-    query: "(max-width: 767px)",
-    totalColumns: 4,
-    gutterWidth: wonderBlocksTokens.spacing.medium_16,
-    marginWidth: wonderBlocksTokens.spacing.medium_16
-  },
-  large: {
-    query: "(min-width: 768px)",
-    totalColumns: 12,
-    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
-    marginWidth: wonderBlocksTokens.spacing.xxLarge_48
-  }
-});
-
-const defaultContext = {
-  ssrSize: "large",
-  mediaSpec: MEDIA_DEFAULT_SPEC
-};
-const MediaLayoutContext = React__namespace.createContext(defaultContext);
-MediaLayoutContext.displayName = "MediaLayoutContext";
-
-class Spring extends React__namespace.Component {
-  render() {
-    const {
-      style
-    } = this.props;
-    return React__namespace.createElement(wonderBlocksCore.View, {
-      "aria-hidden": "true",
-      style: [styles$L.grow, style]
-    });
-  }
-}
-const styles$L = aphrodite.StyleSheet.create({
-  grow: {
-    flexGrow: 1
-  }
-});
-
-class Strut extends React__namespace.Component {
-  render() {
-    const {
-      size,
-      style
-    } = this.props;
-    return React__namespace.createElement(wonderBlocksCore.View, {
-      "aria-hidden": "true",
-      style: [strutStyle(size), style]
-    });
-  }
-}
-const strutStyle = size => {
-  return {
-    width: size,
-    MsFlexBasis: size,
-    MsFlexPreferredSize: size,
-    WebkitFlexBasis: size,
-    flexBasis: size,
-    flexShrink: 0
-  };
-};
-
 const PT = PropTypes__default["default"];
 
 /**
@@ -26611,7 +26703,7 @@ const SortableItem = createReactClass__default["default"]({
     }
     return /*#__PURE__*/React__namespace.createElement("li", {
       draggable: this.props.draggable,
-      className: [dragState, aphrodite.css(styles$K.sortableListItem)].join(" "),
+      className: [dragState, aphrodite.css(styles$L.sortableListItem)].join(" "),
       onDragStart: this.handleDragStart,
       onDrop: this.handleDrop,
       onDragEnter: this.handleDragEnter,
@@ -26619,7 +26711,7 @@ const SortableItem = createReactClass__default["default"]({
     }, this.props.component);
   }
 });
-const styles$K = aphrodite.StyleSheet.create({
+const styles$L = aphrodite.StyleSheet.create({
   sortableListItem: {
     margin: "5px 0"
   }
@@ -26739,13 +26831,13 @@ class ExpressionEditor extends React__namespace.Component {
       onChange: this.handleToggleDiv
     }));
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.HeadingSmall, null, "Global Options"), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$J.paddedY)
+      className: aphrodite.css(styles$K.paddedY)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
       label: "Visible label",
       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: aphrodite.css(styles$J.paddedY)
+      className: aphrodite.css(styles$K.paddedY)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
       label: "Aria label",
       value: this.props.ariaLabel || "",
@@ -26754,13 +26846,13 @@ class ExpressionEditor extends React__namespace.Component {
       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", {
-      className: aphrodite.css(styles$J.paddedY)
+      className: aphrodite.css(styles$K.paddedY)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
       label: "Function variables",
       value: this.state.functionsInternal,
       onChange: this.handleFunctions
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means \"f of x\" and not \"f times x\"."))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$J.paddedY)
+      className: aphrodite.css(styles$K.paddedY)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Use \xD7 instead of \u22C5 for multiplication",
       checked: this.props.times,
@@ -26770,7 +26862,7 @@ class ExpressionEditor extends React__namespace.Component {
         });
       }
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$J.paddedY)
+      className: aphrodite.css(styles$K.paddedY)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.HeadingXSmall, null, "Button Sets"), buttonSetChoices), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.HeadingSmall, null, "Answers"), /*#__PURE__*/React__namespace.createElement("p", {
       style: {
         margin: "4px 0"
@@ -26958,18 +27050,18 @@ class AnswerOption extends React__namespace.Component {
       color: "destructive",
       light: true
     }, "Delete");
-    const answerStatusCss = aphrodite.css(styles$J.answerStatus, this.props.considered === "wrong" && styles$J.answerStatusWrong, this.props.considered === "correct" && styles$J.answerStatusCorrect, this.props.considered === "ungraded" && styles$J.answerStatusUngraded);
+    const answerStatusCss = aphrodite.css(styles$K.answerStatus, this.props.considered === "wrong" && styles$K.answerStatusWrong, this.props.considered === "correct" && styles$K.answerStatusCorrect, this.props.considered === "ungraded" && styles$K.answerStatusUngraded);
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$J.answerOption)
+      className: aphrodite.css(styles$K.answerOption)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$J.answerHandle)
+      className: aphrodite.css(styles$K.answerHandle)
     }), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$J.answerBody)
+      className: aphrodite.css(styles$K.answerBody)
     }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("button", {
       onClick: this.toggleConsidered,
       className: answerStatusCss
     }, this.props.considered), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(perseus.Expression, this.props.expressionProps))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$J.paddedY, styles$J.paddedX)
+      className: aphrodite.css(styles$K.paddedY, styles$K.paddedX)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Answer expression must have the same form.",
       checked: this.props.form,
@@ -26979,7 +27071,7 @@ class AnswerOption extends React__namespace.Component {
         });
       }
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$J.paddedY, styles$J.paddedX)
+      className: aphrodite.css(styles$K.paddedY, styles$K.paddedX)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Answer expression must be fully expanded and simplified.",
       checked: this.props.simplify,
@@ -26989,7 +27081,7 @@ class AnswerOption extends React__namespace.Component {
         });
       }
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "The student's answer must be fully expanded and simplified. Answering this equation (x^2+2x+1) with this factored equation (x+1)^2 will render this response \"Your answer is not fully expanded and simplified.\""))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$J.buttonRow, styles$J.paddedY)
+      className: aphrodite.css(styles$K.buttonRow, styles$K.paddedY)
     }, removeButton)));
   }
   handleImSure = () => {
@@ -27012,7 +27104,7 @@ class AnswerOption extends React__namespace.Component {
     });
   };
 }
-const styles$J = aphrodite.StyleSheet.create({
+const styles$K = aphrodite.StyleSheet.create({
   paddedX: {
     paddingLeft: wonderBlocksTokens.spacing.xSmall_8,
     paddingRight: wonderBlocksTokens.spacing.xSmall_8
@@ -27114,10 +27206,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$I.title)
+      className: aphrodite.css(styles$J.title)
     }, "Title:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$6, {
       value: this.props.title,
-      className: aphrodite.css(styles$I.input)
+      className: aphrodite.css(styles$J.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -27142,7 +27234,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$I.hintsTitle)
+      className: aphrodite.css(styles$J.hintsTitle)
     }, "Hint"), /*#__PURE__*/React__namespace.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -27174,7 +27266,7 @@ class GradedGroupEditor extends React__namespace.Component {
     };
   };
 }
-const styles$I = aphrodite.StyleSheet.create({
+const styles$J = aphrodite.StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -28521,13 +28613,13 @@ class InputNumberEditor extends React__namespace.Component {
  * it's just the input itself for use writing TeX.
  */
 function MathquillInput(props) {
-  const mathFieldWrapperRef = React.useRef(null);
-  const mathFieldInstance = React.useRef();
+  const mathFieldWrapperRef = React$1.useRef(null);
+  const mathFieldInstance = React$1.useRef();
   const {
     locale,
     strings
   } = mathInput.useMathInputI18n();
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     // If we have the mount for the input, but not the input
     // make a new Mathquill input
     if (mathFieldWrapperRef.current && !mathFieldInstance.current) {
@@ -28561,13 +28653,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$H.outerWrapper
+    style: styles$I.outerWrapper
   }, /*#__PURE__*/React__namespace.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$H = aphrodite.StyleSheet.create({
+const styles$I = aphrodite.StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29637,16 +29729,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React__namespace.createElement("label", {
-    className: aphrodite.css(styles$G.label)
+    className: aphrodite.css(styles$H.label)
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$G.row, style]
+    style: [styles$H.row, style]
   }, labelSide === "start" || /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$G.spaceEnd
+    style: styles$H.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$G.spaceStart
+    style: styles$H.spaceStart
   }, label)));
 };
-const styles$G = aphrodite.StyleSheet.create({
+const styles$H = aphrodite.StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -29672,11 +29764,11 @@ function Heading(_ref) {
     onToggle
   } = _ref;
   return /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
-    style: [styles$F.container, !isCollapsible && styles$F.notClickable],
+    style: [styles$G.container, !isCollapsible && styles$G.notClickable],
     disabled: !isCollapsible,
     onClick: () => isCollapsible && onToggle?.(!isOpen)
   }, () => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$F.heading
+    style: styles$G.heading
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
     style: {
       fontSize: 14,
@@ -29686,7 +29778,7 @@ function Heading(_ref) {
     isExpanded: isOpen
   })));
 }
-const styles$F = aphrodite.StyleSheet.create({
+const styles$G = aphrodite.StyleSheet.create({
   container: {
     marginTop: wonderBlocksTokens.spacing.small_12,
     // NOTE(jeremy): This is the inverse of the @editorPadding CSS
@@ -29904,6 +29996,17 @@ const getQuadraticEquation = startCoords => {
   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);
 };
+const findAngle = (point1, point2) => {
+  const x = point1[0] - point2[0];
+  const y = point1[1] - point2[1];
+  return (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
+};
+const getAngleEquation = startCoords => {
+  const [point1, vertex, point2] = startCoords;
+  const angle = findAngle(point2, vertex) - findAngle(point1, vertex);
+  const roundedAngle = angle.toFixed(0);
+  return `${roundedAngle}\u00B0 angle at (${vertex[0]}, ${vertex[1]})`;
+};
 const shouldShowStartCoordsUI = (flags, graph) => {
   // TODO(LEMS-2228): Remove flags once this is fully released
   const startCoordsUiPhase1Types = ["linear", "linear-system", "ray", "segment", "circle"];
@@ -29949,17 +30052,17 @@ const LockedFigureSelect = props => {
   const figureTypes = ["point", "line", "vector", "ellipse", "polygon"];
   const figureTypesCurrent = props.showM2bFeatures ? [...figureTypes, "function"] : figureTypes;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$E.container
+    style: styles$F.container
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionMenu, {
     menuText: "Add locked figure",
-    style: styles$E.addElementSelect
+    style: styles$F.addElementSelect
   }, figureTypesCurrent.map(figureType => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionItem, {
     key: `${id}-${figureType}`,
     label: figureType,
     onClick: () => onChange(figureType)
   }))));
 };
-const styles$E = aphrodite.StyleSheet.create({
+const styles$F = aphrodite.StyleSheet.create({
   container: {
     marginTop: wonderBlocksTokens.spacing.xSmall_8
   },
@@ -30029,18 +30132,18 @@ const AngleInput = props => {
   }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$D.row
+    style: styles$E.row
   }, "angle (degrees)", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(ScrolllessNumberTextField, {
     value: angleInput,
     onChange: handleAngleChange,
-    style: styles$D.textField
+    style: styles$E.textField
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }));
 };
-const styles$D = aphrodite.StyleSheet.create({
+const styles$E = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30089,30 +30192,30 @@ const CoordinatePairInput = props => {
     onChange(newCoords);
   }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$C.row, style]
+    style: [styles$D.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$C.row
+    style: styles$D.row
   }, labels ? labels[0] : "x coord", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(ScrolllessNumberTextField, {
     value: coordState[0],
     onChange: newValue => handleCoordChange(newValue, 0),
-    style: [styles$C.textField, error ? styles$C.errorField : undefined]
+    style: [styles$D.textField, error ? styles$D.errorField : undefined]
   })), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$C.row
+    style: styles$D.row
   }, labels ? labels[1] : "y coord", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(ScrolllessNumberTextField, {
     value: coordState[1],
     onChange: newValue => handleCoordChange(newValue, 1),
-    style: [styles$C.textField, error ? styles$C.errorField : undefined]
+    style: [styles$D.textField, error ? styles$D.errorField : undefined]
   })));
 };
-const styles$C = aphrodite.StyleSheet.create({
+const styles$D = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30145,14 +30248,14 @@ const PerseusEditorAccordion = props => {
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksAccordion.AccordionSection, {
     expanded: expanded,
     onToggle: onToggle,
-    style: [styles$B.container, containerStyle],
-    headerStyle: styles$B.accordionHeader,
+    style: [styles$C.container, containerStyle],
+    headerStyle: styles$C.accordionHeader,
     header: header
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$B.accordionPanel, panelStyle]
+    style: [styles$C.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$B = aphrodite.StyleSheet.create({
+const styles$C = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: wonderBlocksTokens.color.fadedBlue8,
     marginTop: wonderBlocksTokens.spacing.xSmall_8
@@ -30183,13 +30286,13 @@ const ColorSwatch = props => {
     "aria-label":
     // Don't include an aria label for decorative circles.
     !decorative ? `${color}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$A.colorSwatch, {
+    style: [styles$B.colorSwatch, {
       border: `4px solid ${perseus.lockedFigureColors[color]}`,
       backgroundColor: filled ? perseus.lockedFigureColors[color] : wonderBlocksTokens.color.white
     }]
   });
 };
-const styles$A = aphrodite.StyleSheet.create({
+const styles$B = 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.
@@ -30208,10 +30311,10 @@ const ColorSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$z.row, style]
+    style: [styles$A.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$z.row
+    style: styles$A.row
   }, "color", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30230,7 +30333,7 @@ const ColorSelect = props => {
     })
   })))));
 };
-const styles$z = aphrodite.StyleSheet.create({
+const styles$A = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30249,17 +30352,17 @@ const EllipseSwatch = props => {
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$y.container, {
+    style: [styles$z.container, {
       border: `4px ${strokeStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$y.innerCircle, {
+    style: [styles$z.innerCircle, {
       backgroundColor: perseus.lockedFigureColors[color],
       opacity: fillStyle === "white" ? 0 : perseus.lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$y = aphrodite.StyleSheet.create({
+const styles$z = 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.
@@ -30285,7 +30388,7 @@ const LineStrokeSelect = props => {
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$x.lineStrokeSelect
+    style: styles$y.lineStrokeSelect
   }, "stroke", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxxSmall_4
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30302,7 +30405,7 @@ const LineStrokeSelect = props => {
     label: "dashed"
   })));
 };
-const styles$x = aphrodite.StyleSheet.create({
+const styles$y = aphrodite.StyleSheet.create({
   lineStrokeSelect: {
     display: "flex",
     flexDirection: "row",
@@ -30324,40 +30427,40 @@ const LockedFigureSettingsActions = props => {
     onRemove
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$w.container
+    style: styles$x.container
   }, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     startIcon: trashIcon__default["default"],
     "aria-label": `Delete locked ${figureType}`,
     onClick: onRemove,
     kind: "tertiary",
-    style: styles$w.deleteButton
+    style: styles$x.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$w.iconButton
+    style: styles$x.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$w.iconButton
+    style: styles$x.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$w.iconButton
+    style: styles$x.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$w.iconButton
+    style: styles$x.iconButton
   }));
 };
-const styles$w = aphrodite.StyleSheet.create({
+const styles$x = aphrodite.StyleSheet.create({
   container: {
     width: "100%",
     flexDirection: "row",
@@ -30404,7 +30507,7 @@ const LockedEllipseSettings = props => {
     /*#__PURE__*/
     // Summary: Ellipse, center, radius, color (opacity, dashed)
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$v.row
+      style: styles$w.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, {
@@ -30413,19 +30516,19 @@ const LockedEllipseSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$v.row
+    style: styles$w.row
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: center,
-    style: styles$v.spaceUnder,
+    style: styles$w.spaceUnder,
     onChange: newCoords => onChangeProps({
       center: newCoords
     })
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$v.spaceUnder
+    style: styles$w.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$v.spaceUnder,
+    style: styles$w.spaceUnder,
     onChange: newCoords => onChangeProps({
       radius: newCoords
     })
@@ -30437,7 +30540,7 @@ const LockedEllipseSettings = props => {
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xSmall_8
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$v.row, styles$v.spaceUnder]
+    style: [styles$w.row, styles$w.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30445,7 +30548,7 @@ const LockedEllipseSettings = props => {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$v.row, styles$v.truncatedWidth]
+    style: [styles$w.row, styles$w.truncatedWidth]
   }, "fill", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30471,7 +30574,7 @@ const LockedEllipseSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$v = aphrodite.StyleSheet.create({
+const styles$w = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30492,15 +30595,15 @@ const LineSwatch = props => {
     lineStyle
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$u.container
+    style: styles$v.container
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, ${lineStyle}`,
-    style: [styles$u.lineSwatch, {
+    style: [styles$v.lineSwatch, {
       border: `5px ${lineStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }));
 };
-const styles$u = aphrodite.StyleSheet.create({
+const styles$v = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: wonderBlocksTokens.color.white,
     justifyContent: "center",
@@ -30535,8 +30638,8 @@ const LockedFunctionSettings = props => {
   // Tracking the string value of domain constraints to handle interim state of
   //     entering a negative value, as well as representing Infinity as an empty string.
   // This variable is used when specifying the values of the input fields.
-  const [domainEntries, setDomainEntries] = React.useState([domain && domain[0] !== -Infinity ? domain[0].toString() : "", domain && domain[1] !== Infinity ? domain[1].toString() : ""]);
-  React.useEffect(() => {
+  const [domainEntries, setDomainEntries] = React$1.useState([domain && domain[0] !== -Infinity ? domain[0].toString() : "", domain && domain[1] !== Infinity ? domain[1].toString() : ""]);
+  React$1.useEffect(() => {
     // "useEffect" used to maintain parity between domain constraints and their string representation.
     setDomainEntries([domain && domain[0] !== -Infinity ? domain[0].toString() : "", domain && domain[1] !== Infinity ? domain[1].toString() : ""]);
   }, [domain]);
@@ -30574,9 +30677,9 @@ const LockedFunctionSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$t.row
+      style: styles$u.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
-      style: styles$t.accordionHeader
+      style: styles$u.accordionHeader
     }, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
@@ -30584,7 +30687,7 @@ const LockedFunctionSettings = props => {
       lineStyle: strokeStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$t.row, styles$t.spaceUnder]
+    style: [styles$u.row, styles$u.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: newValue => {
@@ -30598,14 +30701,14 @@ const LockedFunctionSettings = props => {
       handlePropChange("strokeStyle", newValue);
     }
   })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$t.row, styles$t.rowSpace]
+    style: [styles$u.row, styles$u.rowSpace]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
     selectedValue: directionalAxis,
     onChange: newValue => {
       handlePropChange("directionalAxis", newValue);
     },
     "aria-label": "equation prefix",
-    style: styles$t.equationPrefix
+    style: styles$u.equationPrefix
     // Placeholder is required, but never gets used.
     ,
     placeholder: ""
@@ -30624,17 +30727,17 @@ const LockedFunctionSettings = props => {
     onChange: newValue => {
       handlePropChange("equation", newValue);
     },
-    style: [styles$t.textField]
+    style: [styles$u.textField]
   })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$t.row, styles$t.rowSpace]
+    style: [styles$u.row, styles$u.rowSpace]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$t.domainMin
+    style: styles$u.domainMin
   }, "domain min", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     type: "number",
-    style: styles$t.domainMinField,
+    style: styles$u.domainMinField,
     value: domainEntries[0],
     onChange: newValue => {
       handleDomainChange(0, newValue);
@@ -30644,12 +30747,12 @@ const LockedFunctionSettings = props => {
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
     "aria-label": "domain max",
-    style: styles$t.domainMax
+    style: styles$u.domainMax
   }, "max", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     type: "number",
-    style: styles$t.domainMaxField,
+    style: styles$u.domainMaxField,
     value: domainEntries[1],
     onChange: newValue => {
       handleDomainChange(1, newValue);
@@ -30660,7 +30763,7 @@ const LockedFunctionSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$t = aphrodite.StyleSheet.create({
+const styles$u = aphrodite.StyleSheet.create({
   accordionHeader: {
     textOverflow: "ellipsis",
     // A maximum width needs to be specified in order for the ellipsis to work.
@@ -30725,7 +30828,7 @@ const LabeledSwitch = props => {
   const ids = wonderBlocksCore.useUniqueIdWithMock();
   const switchId = ids.get("switch");
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$s.row, style]
+    style: [styles$t.row, style]
   }, /*#__PURE__*/React__namespace.createElement(Switch__default["default"], {
     id: switchId,
     checked: checked,
@@ -30737,7 +30840,7 @@ const LabeledSwitch = props => {
     htmlFor: switchId
   }, label));
 };
-const styles$s = aphrodite.StyleSheet.create({
+const styles$t = aphrodite.StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30771,13 +30874,13 @@ const DefiningPointSettings = props => {
   return /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     expanded: expanded,
     onToggle: onToggle,
-    containerStyle: styles$r.container,
-    panelStyle: styles$r.accordionPanel,
+    containerStyle: styles$s.container,
+    panelStyle: styles$s.accordionPanel,
     header:
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$r.row
+      style: styles$s.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, {
@@ -30787,7 +30890,7 @@ const DefiningPointSettings = props => {
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: coord,
     error: !!error,
-    style: styles$r.spaceUnder,
+    style: styles$s.spaceUnder,
     onChange: newCoords => {
       onChangeProps({
         coord: newCoords
@@ -30796,12 +30899,12 @@ const DefiningPointSettings = props => {
   }), onTogglePoint && /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "show point on graph",
     checked: !!showPoint,
-    style: showPoint && styles$r.spaceUnder,
+    style: showPoint && styles$s.spaceUnder,
     onChange: onTogglePoint
   }), showPoint && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$r.spaceUnder
+    style: styles$s.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30812,7 +30915,7 @@ const DefiningPointSettings = props => {
     }
   })));
 };
-const styles$r = aphrodite.StyleSheet.create({
+const styles$s = aphrodite.StyleSheet.create({
   container: {
     marginTop: wonderBlocksTokens.spacing.xSmall_8,
     marginBottom: 0,
@@ -30880,7 +30983,7 @@ const LockedLineSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$q.row
+      style: styles$r.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
@@ -30889,7 +30992,7 @@ const LockedLineSettings = props => {
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$q.row, styles$q.spaceUnder]
+    style: [styles$r.row, styles$r.spaceUnder]
   }, "kind", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxxSmall_4
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30910,7 +31013,7 @@ const LockedLineSettings = props => {
     value: "segment",
     label: "segment"
   }))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$q.row
+    style: styles$r.row
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
@@ -30922,7 +31025,7 @@ const LockedLineSettings = props => {
       lineStyle: value
     })
   })), isInvalid && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    style: styles$q.errorText
+    style: styles$r.errorText
   }, lengthZeroStr), /*#__PURE__*/React__namespace.createElement(DefiningPointSettings, _extends({
     label: "Point 1",
     showPoint: showPoint1,
@@ -30947,7 +31050,7 @@ const LockedLineSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$q = aphrodite.StyleSheet.create({
+const styles$r = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30988,7 +31091,7 @@ const LockedPointSettings = props => {
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$p.row
+      style: styles$q.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, {
@@ -30997,7 +31100,7 @@ const LockedPointSettings = props => {
     }))
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: coord,
-    style: styles$p.spaceUnder,
+    style: styles$q.spaceUnder,
     onChange: newCoord => {
       onChangeProps({
         coord: newCoord
@@ -31006,7 +31109,7 @@ const LockedPointSettings = props => {
   }), /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$p.spaceUnder
+    style: styles$q.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -31021,7 +31124,7 @@ const LockedPointSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$p = aphrodite.StyleSheet.create({
+const styles$q = aphrodite.StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -31039,17 +31142,17 @@ const PolygonSwatch = props => {
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$o.container, {
+    style: [styles$p.container, {
       border: `4px ${strokeStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$o.innerSquare, {
+    style: [styles$p.innerSquare, {
       backgroundColor: perseus.lockedFigureColors[color],
       opacity: fillStyle === "white" ? 0 : perseus.lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$o = aphrodite.StyleSheet.create({
+const styles$p = 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.
@@ -31084,6 +31187,42 @@ const LockedPolygonSettings = props => {
       color: newValue
     });
   }
+  function handlePolygonMove(movement) {
+    switch (movement) {
+      case "up":
+        onChangeProps({
+          points: points.map(_ref => {
+            let [x, y] = _ref;
+            return [x, y + 1];
+          })
+        });
+        break;
+      case "down":
+        onChangeProps({
+          points: points.map(_ref2 => {
+            let [x, y] = _ref2;
+            return [x, y - 1];
+          })
+        });
+        break;
+      case "left":
+        onChangeProps({
+          points: points.map(_ref3 => {
+            let [x, y] = _ref3;
+            return [x - 1, y];
+          })
+        });
+        break;
+      case "right":
+        onChangeProps({
+          points: points.map(_ref4 => {
+            let [x, y] = _ref4;
+            return [x + 1, y];
+          })
+        });
+        break;
+    }
+  }
   return /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     expanded: expanded,
     onToggle: onToggle,
@@ -31091,7 +31230,7 @@ const LockedPolygonSettings = props => {
     /*#__PURE__*/
     // Summary: Polygon, number of sides, style swatch
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$n.row
+      style: styles$o.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, {
@@ -31100,7 +31239,7 @@ const LockedPolygonSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$n.row, styles$n.spaceUnder]
+    style: [styles$o.row, styles$o.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -31108,7 +31247,7 @@ const LockedPolygonSettings = props => {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$n.row, styles$n.truncatedWidth]
+    style: [styles$o.row, styles$o.truncatedWidth]
   }, "fill", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -31134,17 +31273,17 @@ const LockedPolygonSettings = props => {
     onChange: newValue => onChangeProps({
       showVertices: newValue
     }),
-    style: styles$n.spaceUnder
+    style: styles$o.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Points"),
     expanded: true,
-    containerStyle: styles$n.pointAccordionContainer,
-    panelStyle: styles$n.pointAccordionPanel
+    containerStyle: styles$o.pointAccordionContainer,
+    panelStyle: styles$o.pointAccordionPanel
   }, points.map((point, index) => {
     const pointLabel = String.fromCharCode(65 + index);
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       key: `locked-polygon-point-index-${index}`,
-      style: [styles$n.row, styles$n.spaceUnder]
+      style: [styles$o.row, styles$o.spaceUnder]
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `${pointLabel}:`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.medium_16
     }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
@@ -31172,9 +31311,11 @@ const LockedPolygonSettings = props => {
           points: newPoints
         });
       },
-      style: styles$n.icon
+      style: styles$o.icon
     }));
-  }), /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$o.row, styles$o.polygonActionsContainer]
+  }, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     kind: "tertiary",
     startIcon: plusCircle__default["default"],
     onClick: () => {
@@ -31182,13 +31323,41 @@ const LockedPolygonSettings = props => {
         points: [...points, [0, 0]]
       });
     }
-  }, "Add point")), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
+  }, "Add point"), /*#__PURE__*/React__namespace.createElement(Spring, null), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$o.movementButtonsContainer
+  }, /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
+    "aria-label": "Move polygon up",
+    style: styles$o.iconButton,
+    size: "small",
+    icon: arrowFatUp__default["default"],
+    onClick: () => handlePolygonMove("up")
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$o.row
+  }, /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
+    "aria-label": "Move polygon left",
+    style: styles$o.iconButton,
+    size: "small",
+    icon: arrowFatLeft__default["default"],
+    onClick: () => handlePolygonMove("left")
+  }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
+    "aria-label": "Move polygon down",
+    style: styles$o.iconButton,
+    size: "small",
+    icon: arrowFatDown__default["default"],
+    onClick: () => handlePolygonMove("down")
+  }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
+    "aria-label": "Move polygon right",
+    style: styles$o.iconButton,
+    size: "small",
+    icon: arrowFatRight__default["default"],
+    onClick: () => handlePolygonMove("right")
+  }))))), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
   }));
 };
-const styles$n = aphrodite.StyleSheet.create({
+const styles$o = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -31203,6 +31372,18 @@ const styles$n = aphrodite.StyleSheet.create({
   icon: {
     marginInlineStart: wonderBlocksTokens.spacing.xxxSmall_4
   },
+  polygonActionsContainer: {
+    width: "100%"
+  },
+  iconButton: {
+    margin: 0
+  },
+  movementButtonsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    minWidth: "fit-content"
+  },
   spaceUnder: {
     marginBottom: wonderBlocksTokens.spacing.xSmall_8
   },
@@ -31250,7 +31431,7 @@ const LockedVectorSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$m.row
+      style: styles$n.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
@@ -31258,19 +31439,19 @@ const LockedVectorSettings = props => {
       lineStyle: "solid"
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$m.row, styles$m.spaceUnder]
+    style: [styles$n.row, styles$n.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
   })), isInvalid && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    style: styles$m.errorText
+    style: styles$n.errorText
   }, lengthErrorMessage), /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     expanded: true // Initial state is expanded
     ,
-    containerStyle: styles$m.container,
-    panelStyle: styles$m.accordionPanel,
+    containerStyle: styles$n.container,
+    panelStyle: styles$n.accordionPanel,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$m.row
+      style: styles$n.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Tail (${tail[0]}, ${tail[1]})`))
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: tail,
@@ -31281,10 +31462,10 @@ const LockedVectorSettings = props => {
   })), /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     expanded: true // Initial state is expanded
     ,
-    containerStyle: styles$m.container,
-    panelStyle: styles$m.accordionPanel,
+    containerStyle: styles$n.container,
+    panelStyle: styles$n.accordionPanel,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$m.row
+      style: styles$n.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Tip (${tip[0]}, ${tip[1]})`))
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: tip,
@@ -31298,7 +31479,7 @@ const LockedVectorSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$m = aphrodite.StyleSheet.create({
+const styles$n = aphrodite.StyleSheet.create({
   accordionPanel: {
     paddingBottom: wonderBlocksTokens.spacing.medium_16
   },
@@ -31465,7 +31646,7 @@ const LockedFiguresSection = props => {
       onRemove: () => removeLockedFigure(index)
     }));
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$l.buttonContainer
+    style: styles$m.buttonContainer
   }, /*#__PURE__*/React__namespace.createElement(LockedFigureSelect, {
     showM2bFeatures: props.showM2bFeatures,
     id: `${uniqueId}-select`,
@@ -31475,10 +31656,10 @@ const LockedFiguresSection = props => {
   }), showExpandButton && /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     kind: "secondary",
     onClick: () => toggleExpanded(allCollapsed),
-    style: styles$l.button
+    style: styles$m.button
   }, buttonLabel))));
 };
-const styles$l = aphrodite.StyleSheet.create({
+const styles$m = aphrodite.StyleSheet.create({
   buttonContainer: {
     flexDirection: "row",
     alignItems: "center"
@@ -31514,7 +31695,7 @@ const GraphPointsCountSelector = _ref => {
     // Never uses placeholder, always has value
     ,
     placeholder: "",
-    style: styles$k.singleSelectShort
+    style: styles$l.singleSelectShort
   }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     key: n,
     value: `${n}`,
@@ -31525,7 +31706,7 @@ const GraphPointsCountSelector = _ref => {
     label: "unlimited"
   })]);
 };
-const styles$k = aphrodite.StyleSheet.create({
+const styles$l = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31538,7 +31719,7 @@ const GraphTypeSelector = props => {
     selectedValue: props.graphType,
     onChange: props.onChange,
     placeholder: "Select a graph type",
-    style: styles$j.singleSelectShort
+    style: styles$k.singleSelectShort
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "linear",
     label: "Linear function"
@@ -31571,7 +31752,7 @@ const GraphTypeSelector = props => {
     label: "Angle"
   }));
 };
-const styles$j = aphrodite.StyleSheet.create({
+const styles$k = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -32003,10 +32184,10 @@ class InteractiveGraphSettings extends React__namespace.Component {
       }
     }))), /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Background image URL:",
-      style: styles$i.resetSpaceTop
+      style: styles$j.resetSpaceTop
     }, /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
-      className: aphrodite.css(styles$i.backgroundUrlInput),
+      className: aphrodite.css(styles$j.backgroundUrlInput),
       ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
@@ -32022,9 +32203,9 @@ 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$i.protractorSection
+      style: styles$j.protractorSection
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$i.checkboxRow
+      style: styles$j.checkboxRow
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Show protractor",
       checked: this.props.showProtractor,
@@ -32033,7 +32214,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
           showProtractor: value
         });
       },
-      style: styles$i.resetSpaceTop
+      style: styles$j.resetSpaceTop
     })), this.props.showProtractor && /*#__PURE__*/React__namespace.createElement(Banner__default["default"], {
       layout: "floating",
       text: "The protractor is not accessible. Please consider an alternate approach.",
@@ -32041,7 +32222,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
     }))));
   }
 }
-const styles$i = aphrodite.StyleSheet.create({
+const styles$j = aphrodite.StyleSheet.create({
   resetSpaceTop: {
     marginTop: 0
   },
@@ -32080,14 +32261,14 @@ const SegmentCountSelector = _ref => {
       const num = +newValue;
       onChange(num);
     },
-    style: styles$h.singleSelectShort
+    style: styles$i.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$h = 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.
@@ -32097,14 +32278,60 @@ const styles$h = aphrodite.StyleSheet.create({
 
 const StartCoordsAngle = props => {
   const {
-    startCoords
+    startCoords,
+    onChange
   } = props;
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, "WIP", /*#__PURE__*/React__namespace.createElement("br", null), " Start coords:", startCoords.map((coord, index) => {
-    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      key: index
-    }, `Point ${index + 1}: (${coord[0]}, ${coord[1]})`);
-  }));
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$h.equationSection
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, "Starting equation:"), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.BodyMonospace, {
+    style: styles$h.equationBody
+  }, getAngleEquation(startCoords))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$h.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$h.tile
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Vertex:"), /*#__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$h.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[2],
+    labels: ["x", "y"],
+    onChange: value => onChange([startCoords[0], startCoords[1], value])
+  })));
 };
+const styles$h = 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 StartCoordsCircle = props => {
   const {
@@ -36993,6 +37220,7 @@ exports.AllEditors = AllEditors;
 exports.AllWidgets = AllWidgets;
 exports.ArticleDiff = ArticleDiff;
 exports.ArticleEditor = ArticleEditor;
+exports.ContentPreview = ContentPreview;
 exports.DeviceFramer = DeviceFramer;
 exports.Editor = Editor;
 exports.EditorPage = EditorPage;