@khanacademy/perseus-editor 6.3.0 → 6.5.0

package/dist/index.js

@@ -25,10 +25,10 @@ var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
 var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var Banner = require('@khanacademy/wonder-blocks-banner');
-var wonderBlocksAccordion = require('@khanacademy/wonder-blocks-accordion');
 var Button = require('@khanacademy/wonder-blocks-button');
-var trashIcon = require('@phosphor-icons/core/bold/trash-bold.svg');
 var Switch = require('@khanacademy/wonder-blocks-switch');
+var wonderBlocksAccordion = require('@khanacademy/wonder-blocks-accordion');
+var trashIcon = require('@phosphor-icons/core/bold/trash-bold.svg');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -62,12 +62,12 @@ var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var KAS__namespace = /*#__PURE__*/_interopNamespace(KAS);
 var Banner__default = /*#__PURE__*/_interopDefaultLegacy(Banner);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
-var trashIcon__default = /*#__PURE__*/_interopDefaultLegacy(trashIcon);
 var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
+var trashIcon__default = /*#__PURE__*/_interopDefaultLegacy(trashIcon);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "6.3.0";
+const libVersion = "6.5.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -262,13 +262,13 @@ class SectionControlButton extends React__namespace.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$v.button
+      style: styles$z.button
     }, _ref => {
       return /*#__PURE__*/React__namespace.createElement(InlineIcon$b, icon);
     });
   }
 }
-const styles$v = aphrodite.StyleSheet.create({
+const styles$z = aphrodite.StyleSheet.create({
   button: {
     backgroundColor: wonderBlocksTokens.color.gold,
     margin: 2,
@@ -20768,6 +20768,27 @@ class WidgetSelect extends React__namespace.Component {
   }
 }
 
+/**
+ * Displays a caret in either expanded or collapsed state. For use in headings
+ * that collapse a region.
+ */
+function ToggleableCaret(props) {
+  const iconStyle = props.isExpanded ? styles$y.expanded : styles$y.collapsed;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
+    icon: caretRight__default["default"],
+    style: iconStyle
+  });
+}
+const styles$y = aphrodite.StyleSheet.create({
+  collapsed: {
+    transition: ".15s"
+  },
+  expanded: {
+    transform: "rotate(90deg)",
+    transition: ".15s"
+  }
+});
+
 /**
  * Displays a collapsable list of TeX rendering errors.
  */
@@ -20787,19 +20808,17 @@ class TexErrorView extends React__namespace.Component {
     const {
       showErrors
     } = this.state;
-    const iconStyle = showErrors ? styles$u.iconExpanded : styles$u.iconCollapsed;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$u.errorContainer
+      style: styles$x.errorContainer
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$u.title,
+      style: styles$x.title,
       onClick: this.handleToggleTexErrors
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-      icon: caretRight__default["default"],
-      style: iconStyle
+    }, /*#__PURE__*/React__namespace.createElement(ToggleableCaret, {
+      isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$u.errorExplanation
+      style: styles$x.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$u.error,
+      style: styles$x.error,
       key: index
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: {
@@ -20808,7 +20827,7 @@ class TexErrorView extends React__namespace.Component {
     }, e.math), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, e.message))));
   }
 }
-const styles$u = aphrodite.StyleSheet.create({
+const styles$x = aphrodite.StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -20828,13 +20847,6 @@ const styles$u = aphrodite.StyleSheet.create({
   },
   error: {
     padding: "4px 10px"
-  },
-  iconCollapsed: {
-    transition: ".15s"
-  },
-  iconExpanded: {
-    transform: "rotate(90deg)",
-    transition: ".15s"
   }
 });
 
@@ -24565,12 +24577,12 @@ class SimpleButton extends React__namespace.Component {
       ...otherProps
     } = this.props;
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
-      className: aphrodite.css(styles$t.baseButton, color === "green" && styles$t.green, color === "orange" && styles$t.orange),
+      className: aphrodite.css(styles$w.baseButton, color === "green" && styles$w.green, color === "orange" && styles$w.orange),
       onClick: onClick
     }, otherProps), children);
   }
 }
-const styles$t = aphrodite.StyleSheet.create({
+const styles$w = aphrodite.StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24783,23 +24795,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$s.containerHeader)
+    className: aphrodite.css(styles$v.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$s.containerTitle)
+    className: aphrodite.css(styles$v.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.container)
+    className: aphrodite.css(styles$v.container)
   }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$s.row, styles$s.rowHeading)
+    className: aphrodite.css(styles$v.row, styles$v.rowHeading)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.columnLeft)
+    className: aphrodite.css(styles$v.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: "pod-title " + aphrodite.css(styles$s.containerHeader)
+    className: "pod-title " + aphrodite.css(styles$v.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.containerTitle)
+    className: aphrodite.css(styles$v.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.columnRight)
+    className: aphrodite.css(styles$v.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24812,11 +24824,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.container)
+    className: aphrodite.css(styles$v.container)
   }, controls && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.columnLeft, styles$s.containerHeader)
+    className: aphrodite.css(styles$v.columnLeft, styles$v.containerHeader)
   }, controls), /*#__PURE__*/React__namespace.createElement("div", null, children), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.columnLeft)
+    className: aphrodite.css(styles$v.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24830,28 +24842,28 @@ const ObjectContainer = _ref3 => {
     path
   } = _ref3;
   const headingEditor = /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.containerHeader)
+    className: aphrodite.css(styles$v.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$s.containerTitle)
+    className: aphrodite.css(styles$v.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.containerHeader, styles$s.previewCollectionHeader)
+    className: aphrodite.css(styles$v.containerHeader, styles$v.previewCollectionHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$s.containerTitle)
+    className: aphrodite.css(styles$v.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.container)
+    className: aphrodite.css(styles$v.container)
   }, hasBothHeadings && /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$s.row)
+    className: aphrodite.css(styles$v.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.columnLeft)
+    className: aphrodite.css(styles$v.columnLeft)
   }, headingEditor), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.columnRight)
+    className: aphrodite.css(styles$v.columnRight)
   }, headingPreview)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(path.length > 0 && styles$s.contentIndent)
+    className: aphrodite.css(path.length > 0 && styles$v.contentIndent)
   }, children));
 };
 
@@ -24971,11 +24983,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$s.row)
+    className: aphrodite.css(styles$v.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.columnLeft)
+    className: aphrodite.css(styles$v.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$s.sticky)
+    className: aphrodite.css(sticky && styles$v.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -24983,9 +24995,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.columnRight)
+    className: aphrodite.css(styles$v.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$s.sticky)
+    className: aphrodite.css(sticky && styles$v.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25001,13 +25013,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.row)
+    className: aphrodite.css(styles$v.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.columnLeft)
+    className: aphrodite.css(styles$v.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$s.sticky)
+    className: aphrodite.css(sticky && styles$v.sticky)
   }, /*#__PURE__*/React__namespace.createElement(HintEditor, _extends({}, data, {
-    className: aphrodite.css(styles$s.hintEditor),
+    className: aphrodite.css(styles$v.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25022,9 +25034,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.columnRight)
+    className: aphrodite.css(styles$v.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$s.sticky)
+    className: aphrodite.css(sticky && styles$v.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25041,9 +25053,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.columnLeft)
+    className: aphrodite.css(styles$v.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$s.tagsEditor)
+    className: aphrodite.css(styles$v.tagsEditor)
   }, /*#__PURE__*/React__namespace.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25074,23 +25086,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementUp",
-      className: aphrodite.css(styles$s.control)
+      className: aphrodite.css(styles$v.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$s.verticalFlip)
+      className: aphrodite.css(styles$v.verticalFlip)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementDown",
-      className: aphrodite.css(styles$s.control)
+      className: aphrodite.css(styles$v.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown))), /*#__PURE__*/React__namespace.createElement("div", {
       key: "removeArrayElement",
-      className: aphrodite.css(styles$s.control)
+      className: aphrodite.css(styles$v.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25098,7 +25110,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconTrash$4)))];
     return /*#__PURE__*/React__namespace.createElement("div", {
       key: i,
-      className: aphrodite.css(styles$s.arrayElement, !elementIsLeaf && styles$s.arrayElementAndNotLeaf)
+      className: aphrodite.css(styles$v.arrayElement, !elementIsLeaf && styles$v.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25124,7 +25136,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$s.objectElement)
+    className: aphrodite.css(styles$v.objectElement)
   }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25294,7 +25306,7 @@ class MultiRendererEditor extends React__namespace.Component {
     }, this._renderContent());
   }
 }
-const styles$s = aphrodite.StyleSheet.create({
+const styles$v = aphrodite.StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25446,47 +25458,47 @@ const StatefulArticleEditor = createReactClass__default["default"]({
       screen
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
-      style: styles$r.controlBar
+      style: styles$u.controlBar
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$r.controls
+      style: styles$u.controls
     }, "Mode:", " ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         mode: "edit"
       }),
-      style: mode === "edit" ? styles$r.controlSelected : styles$r.control
+      style: mode === "edit" ? styles$u.controlSelected : styles$u.control
     }, "EDIT"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         mode: "preview"
       }),
-      style: mode === "preview" ? styles$r.controlSelected : styles$r.control
+      style: mode === "preview" ? styles$u.controlSelected : styles$u.control
     }, "PREVIEW"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         mode: "json"
       }),
-      style: mode === "json" ? styles$r.controlSelected : styles$r.control
+      style: mode === "json" ? styles$u.controlSelected : styles$u.control
     }, "JSON")), /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$r.controls
+      style: styles$u.controls
     }, "Screen:", " ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         screen: "phone"
       }),
-      style: screen === "phone" ? styles$r.controlSelected : styles$r.control
+      style: screen === "phone" ? styles$u.controlSelected : styles$u.control
     }, "PHONE"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         screen: "tablet"
       }),
-      style: screen === "tablet" ? styles$r.controlSelected : styles$r.control
+      style: screen === "tablet" ? styles$u.controlSelected : styles$u.control
     }, "TABLET"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         screen: "desktop"
       }),
-      style: screen === "desktop" ? styles$r.controlSelected : styles$r.control
+      style: screen === "desktop" ? styles$u.controlSelected : styles$u.control
     }, "DESKTOP"))), /*#__PURE__*/React__namespace.createElement("div", {
-      style: styles$r.editor
+      style: styles$u.editor
     }, /*#__PURE__*/React__namespace.createElement(ArticleEditor, this.state)));
   }
 });
-const styles$r = {
+const styles$u = {
   controlBar: {
     marginBottom: 25,
     marginTop: 5
@@ -27025,10 +27037,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$q.title)
+      className: aphrodite.css(styles$t.title)
     }, "Title:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$6, {
       value: this.props.title,
-      className: aphrodite.css(styles$q.input)
+      className: aphrodite.css(styles$t.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -27053,7 +27065,7 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$q.hintsTitle)
+      className: aphrodite.css(styles$t.hintsTitle)
     }, "Hint"), /*#__PURE__*/React__namespace.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -27085,7 +27097,7 @@ class GradedGroupEditor extends React__namespace.Component {
     };
   };
 }
-const styles$q = aphrodite.StyleSheet.create({
+const styles$t = aphrodite.StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -28456,13 +28468,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$p.outerWrapper
+    style: styles$s.outerWrapper
   }, /*#__PURE__*/React__namespace.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$p = aphrodite.StyleSheet.create({
+const styles$s = aphrodite.StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29548,7 +29560,7 @@ const GraphPointsCountSelector = _ref => {
     // Never uses placeholder, always has value
     ,
     placeholder: "",
-    style: styles$o.singleSelectShort
+    style: styles$r.singleSelectShort
   }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     key: n,
     value: `${n}`,
@@ -29559,7 +29571,7 @@ const GraphPointsCountSelector = _ref => {
     label: "unlimited"
   })]);
 };
-const styles$o = aphrodite.StyleSheet.create({
+const styles$r = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -29572,7 +29584,7 @@ const GraphTypeSelector = props => {
     selectedValue: props.graphType,
     onChange: props.onChange,
     placeholder: "Select a graph type",
-    style: styles$n.singleSelectShort
+    style: styles$q.singleSelectShort
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "linear",
     label: "Linear function"
@@ -29605,7 +29617,7 @@ const GraphTypeSelector = props => {
     label: "Angle"
   }));
 };
-const styles$n = aphrodite.StyleSheet.create({
+const styles$q = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -29622,16 +29634,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React__namespace.createElement("label", {
-    className: aphrodite.css(styles$m.label)
+    className: aphrodite.css(styles$p.label)
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$m.row, style]
+    style: [styles$p.row, style]
   }, labelSide === "start" || /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$m.spaceEnd
+    style: styles$p.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$m.spaceStart
+    style: styles$p.spaceStart
   }, label)));
 };
-const styles$m = aphrodite.StyleSheet.create({
+const styles$p = aphrodite.StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -29664,6 +29676,31 @@ const defaultBackgroundImage$1 = {
 function numSteps(range, step) {
   return Math.floor((range[1] - range[0]) / step);
 }
+function Heading(_ref) {
+  let {
+    title,
+    isOpen,
+    onToggle
+  } = _ref;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      backgroundColor: wonderBlocksTokens.color.offBlack8,
+      padding: wonderBlocksTokens.spacing.xSmall_8,
+      marginTop: wonderBlocksTokens.spacing.small_12,
+      // NOTE(jeremy): This is the inverse of the @editorPadding CSS
+      // variable found in perseus-editor.less. For now, it must
+      // match otherwise there's a gap from this header to the edge
+      // of the editor borders.
+      marginInline: -10,
+      cursor: "pointer"
+    },
+    onClick: () => onToggle?.(!isOpen)
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, null, title), /*#__PURE__*/React__namespace.createElement(ToggleableCaret, {
+    isExpanded: isOpen
+  }));
+}
 class InteractiveGraphSettings extends React__namespace.Component {
   _isMounted = false;
   bgUrlRef = /*#__PURE__*/React__namespace.createRef();
@@ -29684,7 +29721,10 @@ class InteractiveGraphSettings extends React__namespace.Component {
   }
   constructor(props) {
     super(props);
-    this.state = InteractiveGraphSettings.stateFromProps(props);
+    this.state = {
+      isExpanded: true,
+      ...InteractiveGraphSettings.stateFromProps(props)
+    };
   }
   static defaultProps = {
     box: [perseus.interactiveSizes.defaultBoxSizeSmall, perseus.interactiveSizes.defaultBoxSizeSmall],
@@ -29962,7 +30002,13 @@ class InteractiveGraphSettings extends React__namespace.Component {
   };
 
   render() {
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Heading, {
+      title: "Common Graph Settings",
+      isOpen: this.state.isExpanded,
+      onToggle: () => this.setState({
+        isExpanded: !this.state.isExpanded
+      })
+    }), this.state.isExpanded && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement("div", {
       className: "graph-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
@@ -30053,10 +30099,10 @@ class InteractiveGraphSettings extends React__namespace.Component {
       onChange: this.change
     }))), /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Background image URL:",
-      style: styles$l.resetSpaceTop
+      style: styles$o.resetSpaceTop
     }, /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
-      className: aphrodite.css(styles$l.backgroundUrlInput),
+      className: aphrodite.css(styles$o.backgroundUrlInput),
       ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
@@ -30072,28 +30118,28 @@ class InteractiveGraphSettings extends React__namespace.Component {
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$c, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$l.rulerSection
+      style: styles$o.rulerSection
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$l.checkboxRow
+      style: styles$o.checkboxRow
     }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$7, {
       label: "Show ruler",
       showRuler: this.props.showRuler,
       onChange: this.change,
-      style: styles$l.resetSpaceTop
+      style: styles$o.resetSpaceTop
     }), /*#__PURE__*/React__namespace.createElement(PropCheckBox$7, {
       label: "Show protractor",
       showProtractor: this.props.showProtractor,
       onChange: this.change,
-      style: styles$l.resetSpaceTop
+      style: styles$o.resetSpaceTop
     })), (this.props.showRuler || this.props.showProtractor) && /*#__PURE__*/React__namespace.createElement(Banner__default["default"], {
       layout: "floating",
       text: "The ruler and protractor are not accessible. Please consider an alternate approach.",
       kind: "warning"
     }), this.props.showRuler && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$l.spaceTop
+      style: styles$o.spaceTop
     }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Ruler label:",
-      style: styles$l.resetSpaceTop
+      style: styles$o.resetSpaceTop
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
       id: "ruler-label-select",
       selectedValue: this.props.rulerLabel,
@@ -30103,7 +30149,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
         });
       },
       placeholder: "None",
-      style: styles$l.singleSelectShort
+      style: styles$o.singleSelectShort
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
       value: "",
       label: "None",
@@ -30144,15 +30190,15 @@ class InteractiveGraphSettings extends React__namespace.Component {
         });
       },
       placeholder: "10",
-      style: styles$l.singleSelectShort
+      style: styles$o.singleSelectShort
     }, [1, 2, 4, 8, 10, 16].map(value => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
       key: value,
       value: `${value}`,
       label: `${value}`
-    })))))));
+    }))))))));
   }
 }
-const styles$l = aphrodite.StyleSheet.create({
+const styles$o = aphrodite.StyleSheet.create({
   resetSpaceTop: {
     marginTop: 0
   },
@@ -30184,43 +30230,6 @@ const styles$l = aphrodite.StyleSheet.create({
   }
 });
 
-/**
- * Dropdown for selecting a locked figure to add to an interactive graph.
- * Locked figures are elements (points, segmeents, etc.) that are not
- * interactive, just present in the graph's background.
- *
- * Used in the interactive graph editor's locked figures section.
- */
-const LockedFigureSelect = props => {
-  const {
-    id,
-    onChange
-  } = props;
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$k.container
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionMenu, {
-    menuText: "Add locked figure",
-    style: styles$k.addElementSelect
-  }, [/*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionItem, {
-    key: `${id}-point`,
-    label: "Point",
-    onClick: () => onChange("point")
-  }, "Point"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionItem, {
-    key: `${id}-line`,
-    label: "Line",
-    onClick: () => onChange("line")
-  }, "Line")]));
-};
-const styles$k = aphrodite.StyleSheet.create({
-  container: {
-    marginTop: wonderBlocksTokens.spacing.xSmall_8
-  },
-  addElementSelect: {
-    backgroundColor: wonderBlocksTokens.color.fadedBlue8,
-    borderRadius: wonderBlocksTokens.spacing.xxxSmall_4
-  }
-});
-
 const mediaDefaultSpecLargeMarginWidth = wonderBlocksTokens.spacing.large_24;
 const MEDIA_DEFAULT_SPEC = {
   small: {
@@ -30301,6 +30310,43 @@ const strutStyle = size => {
   };
 };
 
+/**
+ * Dropdown for selecting a locked figure to add to an interactive graph.
+ * Locked figures are elements (points, segmeents, etc.) that are not
+ * interactive, just present in the graph's background.
+ *
+ * Used in the interactive graph editor's locked figures section.
+ */
+const LockedFigureSelect = props => {
+  const {
+    id,
+    onChange
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$n.container
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionMenu, {
+    menuText: "Add locked figure",
+    style: styles$n.addElementSelect
+  }, [/*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionItem, {
+    key: `${id}-point`,
+    label: "Point",
+    onClick: () => onChange("point")
+  }, "Point"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionItem, {
+    key: `${id}-line`,
+    label: "Line",
+    onClick: () => onChange("line")
+  }, "Line")]));
+};
+const styles$n = aphrodite.StyleSheet.create({
+  container: {
+    marginTop: wonderBlocksTokens.spacing.xSmall_8
+  },
+  addElementSelect: {
+    backgroundColor: wonderBlocksTokens.color.fadedBlue8,
+    borderRadius: wonderBlocksTokens.spacing.xxxSmall_4
+  }
+});
+
 const ColorSwatch = props => {
   const {
     color,
@@ -30310,14 +30356,14 @@ const ColorSwatch = props => {
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label":
     // Don't include an aria label for decorative circles.
-    !decorative ? `Color: ${color}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$j.colorSwatch, {
+    !decorative ? `${color}, ${filled ? "filled" : "open"}` : undefined,
+    style: [styles$m.colorSwatch, {
       border: `4px solid ${perseus.lockedFigureColors[color]}`,
       backgroundColor: filled ? perseus.lockedFigureColors[color] : wonderBlocksTokens.color.white
     }]
   });
 };
-const styles$j = aphrodite.StyleSheet.create({
+const styles$m = 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.
@@ -30331,16 +30377,17 @@ const styles$j = aphrodite.StyleSheet.create({
 const possibleColors = Object.keys(perseus.lockedFigureColors);
 const ColorSelect = props => {
   const {
-    id,
     selectedValue,
     style,
     onChange
   } = props;
+  const ids = wonderBlocksCore.useUniqueIdWithMock();
+  const id = ids.get("color-select");
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$i.row, style]
+    style: [styles$l.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     htmlFor: id,
-    style: styles$i.label,
+    style: styles$l.label,
     tag: "label"
   }, "color"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
     id: id,
@@ -30359,7 +30406,7 @@ const ColorSelect = props => {
     })
   }, colorName))));
 };
-const styles$i = aphrodite.StyleSheet.create({
+const styles$l = aphrodite.StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30369,31 +30416,115 @@ const styles$i = aphrodite.StyleSheet.create({
   }
 });
 
-const LineSwatch = props => {
+const CoordinatePairInput = props => {
   const {
-    color,
-    lineStyle
+    coord,
+    error,
+    onChangeProps
   } = props;
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$h.container
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    "aria-label": `${color}, ${lineStyle}`,
-    style: [styles$h.lineSwatch, {
-      border: `5px ${lineStyle} ${perseus.lockedFigureColors[color]}`
-    }]
-  }));
+
+  // Keep track of the coordinates via state as the user is editing them,
+  // before they are updated in the props as a valid number.
+  const [coordState, setCoordState] = React__namespace.useState([
+  // Using strings to make it easier to work with the text fields.
+  coord[0].toString(), coord[1].toString()]);
+
+  // Generate unique IDs so that the programmatic labels can be associated
+  // with their respective text fields.
+  const ids = wonderBlocksCore.useUniqueIdWithMock();
+  const xCoordId = ids.get("x-coord");
+  const yCoordId = ids.get("y-coord");
+  function handleCoordChange(newValue, coordIndex) {
+    // Update the local state (update the input field value).
+    const newCoordState = [...coordState];
+    newCoordState[coordIndex] = newValue;
+    setCoordState(newCoordState);
+
+    // If the new value is not a number, don't update the props.
+    // If it's empty, keep the props the same value instead of setting to 0.
+    if (isNaN(+newValue) || newValue === "") {
+      return;
+    }
+
+    // Update the props (update the graph).
+    const newCoords = [...coord];
+    newCoords[coordIndex] = +newValue;
+    onChangeProps({
+      coord: newCoords
+    });
+  }
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$k.row, styles$k.spaceUnder]
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    htmlFor: xCoordId,
+    style: styles$k.label,
+    tag: "label"
+  }, "x coord"), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
+    id: xCoordId,
+    type: "number",
+    value: coordState[0],
+    onChange: newValue => handleCoordChange(newValue, 0),
+    style: [styles$k.textField, error ? styles$k.errorField : undefined]
+  }), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.medium_16
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    htmlFor: yCoordId,
+    style: styles$k.label,
+    tag: "label"
+  }, "y coord"), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
+    id: yCoordId,
+    type: "number",
+    value: coordState[1],
+    onChange: newValue => handleCoordChange(newValue, 1),
+    style: [styles$k.textField, error ? styles$k.errorField : undefined]
+  })));
 };
-const styles$h = aphrodite.StyleSheet.create({
-  container: {
-    backgroundColor: wonderBlocksTokens.color.white,
-    justifyContent: "center",
-    padding: wonderBlocksTokens.spacing.xSmall_8,
-    borderRadius: wonderBlocksTokens.spacing.xxxSmall_4
+const styles$k = aphrodite.StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
   },
-  lineSwatch: {
-    // Add a white outline so that the color swatch is visible when
-    // the dropdown option is highlighted with its blue background.
-    width: 40
+  spaceUnder: {
+    marginBottom: wonderBlocksTokens.spacing.xSmall_8
+  },
+  label: {
+    marginInlineEnd: wonderBlocksTokens.spacing.xxSmall_6
+  },
+  textField: {
+    width: wonderBlocksTokens.spacing.xxxLarge_64
+  },
+  errorField: {
+    borderColor: wonderBlocksTokens.color.red,
+    backgroundColor: wonderBlocksTokens.color.fadedRed8
+  }
+});
+
+const LabeledSwitch = props => {
+  const {
+    checked,
+    label,
+    style,
+    onChange
+  } = props;
+  const ids = wonderBlocksCore.useUniqueIdWithMock();
+  const switchId = ids.get("switch");
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$j.row, style]
+  }, /*#__PURE__*/React__namespace.createElement(Switch__default["default"], {
+    id: switchId,
+    checked: checked,
+    onChange: onChange
+  }), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xSmall_8
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    tag: "label",
+    htmlFor: switchId
+  }, label));
+};
+const styles$j = aphrodite.StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
   }
 });
 
@@ -30401,8 +30532,10 @@ const LockedFigureSettingsAccordion = props => {
   const {
     children,
     header,
+    expanded,
     containerStyle,
-    panelStyle
+    panelStyle,
+    onToggle
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View
   // More specificity so that we can override the default
@@ -30411,14 +30544,16 @@ const LockedFigureSettingsAccordion = props => {
   , {
     className: "locked-figure-accordion"
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksAccordion.AccordionSection, {
-    style: [styles$g.container, containerStyle],
-    headerStyle: styles$g.accordionHeader,
+    expanded: expanded,
+    onToggle: onToggle,
+    style: [styles$i.container, containerStyle],
+    headerStyle: styles$i.accordionHeader,
     header: header
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$g.accordionPanel, panelStyle]
+    style: [styles$i.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$g = aphrodite.StyleSheet.create({
+const styles$i = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: wonderBlocksTokens.color.fadedBlue8,
     marginTop: wonderBlocksTokens.spacing.xSmall_8
@@ -30440,170 +30575,56 @@ const styles$g = aphrodite.StyleSheet.create({
 });
 
 /**
- * The part of a locked figure settings panel that contains actions
- * for this panel and its associated locked figure, including
- * the delete button.
+ * DefiningPointSettings is a component that allows the user to edit the
+ * settings of a point that defines a locked figure (ex. line) on the graph.
+ *
+ * Used in the interactive graph editor's locked figures section.
  */
-const LockedFigureSettingsActions = props => {
+const DefiningPointSettings = props => {
   const {
-    onRemove,
-    figureAriaLabel
+    coord,
+    color: pointColor,
+    filled = true,
+    label,
+    showPoint = "false",
+    error,
+    onChangeProps,
+    onTogglePoint
   } = props;
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$f.container
-  }, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
-    startIcon: trashIcon__default["default"],
-    "aria-label": `Delete ${figureAriaLabel}`,
-    onClick: onRemove,
-    kind: "tertiary",
-    style: styles$f.deleteButton
-  }, "Delete"));
-};
-const styles$f = aphrodite.StyleSheet.create({
-  container: {
-    width: "100%",
-    flexDirection: "row",
-    alignItems: "center",
-    marginTop: wonderBlocksTokens.spacing.xxxSmall_4
-  },
-  deleteButton: {
-    // Line up the delete icon with the rest of the content.
-    marginInlineStart: -wonderBlocksTokens.spacing.xxxSmall_4
-  }
-});
-
-const LabeledSwitch = props => {
-  const {
-    checked,
-    label,
-    style,
-    onChange
-  } = props;
-  const ids = wonderBlocksCore.useUniqueIdWithMock();
-  const switchId = ids.get("switch");
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$e.row, style]
-  }, /*#__PURE__*/React__namespace.createElement(Switch__default["default"], {
-    id: switchId,
-    checked: checked,
-    onChange: onChange
-  }), /*#__PURE__*/React__namespace.createElement(Strut, {
-    size: wonderBlocksTokens.spacing.xSmall_8
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    tag: "label",
-    htmlFor: switchId
-  }, label));
-};
-const styles$e = aphrodite.StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "center"
-  }
-});
-
-/**
- * LockedPointSettings is a component that allows the user to edit the
- * settings of specifically a locked point on the graph.
- *
- * Used in the interactive graph editor's locked figures section.
- */
-const LockedPointSettings = props => {
-  const {
-    coord,
-    color: pointColor,
-    filled = true,
-    label,
-    toggled = "true",
-    style,
-    onChangeProps,
-    onToggle,
-    onRemove
-  } = props;
-
-  // Keep track of the coordinates via state as the user is editing them,
-  // before they are updated in the props as a valid number.
-  const [coordState, setCoordState] = React__namespace.useState([
-  // Using strings to make it easier to work with the text fields.
-  coord[0].toString(), coord[1].toString()]);
-
-  // Generate unique IDs so that the programmatic labels can be associated
-  // with their respective text fields.
-  const ids = wonderBlocksCore.useUniqueIdWithMock();
-  const xCoordId = ids.get("x-coord");
-  const yCoordId = ids.get("y-coord");
-  const colorSelectId = ids.get("point-color-select");
-  function handleCoordChange(newValue, coordIndex) {
-    // Update the local state (update the input field value).
-    const newCoordState = [...coordState];
-    newCoordState[coordIndex] = newValue;
-    setCoordState(newCoordState);
-
-    // If the new value is not a number, don't update the props.
-    // If it's empty, keep the props the same value instead of setting to 0.
-    if (isNaN(+newValue) || newValue === "") {
-      return;
-    }
-
-    // Update the props (update the graph).
-    const newCoords = [...coord];
-    newCoords[coordIndex] = +newValue;
-    onChangeProps({
-      coord: newCoords
-    });
-  }
   function handleColorChange(newValue) {
     onChangeProps({
       color: newValue
     });
   }
   return /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsAccordion, {
-    containerStyle: style,
-    panelStyle: !onRemove && styles$d.accordionPanelWithoutActions,
+    expanded: props.expanded,
+    onToggle: props.onToggle,
+    containerStyle: styles$h.container,
+    panelStyle: styles$h.accordionPanel,
     header:
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$d.row
+      style: styles$h.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `${label || "Point"} (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
-    }), toggled && /*#__PURE__*/React__namespace.createElement(ColorSwatch, {
+    }), showPoint && /*#__PURE__*/React__namespace.createElement(ColorSwatch, {
       color: pointColor,
       filled: filled
     }))
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$d.row, styles$d.spaceUnder]
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    htmlFor: xCoordId,
-    style: styles$d.label,
-    tag: "label"
-  }, "x coord"), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
-    id: xCoordId,
-    type: "number",
-    value: coordState[0],
-    onChange: newValue => handleCoordChange(newValue, 0),
-    style: styles$d.textField
-  }), /*#__PURE__*/React__namespace.createElement(Strut, {
-    size: wonderBlocksTokens.spacing.medium_16
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    htmlFor: yCoordId,
-    style: styles$d.label,
-    tag: "label"
-  }, "y coord"), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
-    id: yCoordId,
-    type: "number",
-    value: coordState[1],
-    onChange: newValue => handleCoordChange(newValue, 1),
-    style: styles$d.textField
-  })), onToggle && /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
+  }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
+    coord: coord,
+    error: !!error,
+    onChangeProps: onChangeProps
+  }), onTogglePoint && /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "show point on graph",
-    checked: !!toggled,
-    style: toggled && styles$d.spaceUnder,
-    onChange: onToggle
-  }), toggled && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
-    id: colorSelectId,
+    checked: !!showPoint,
+    style: showPoint && styles$h.spaceUnder,
+    onChange: onTogglePoint
+  }), showPoint && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$d.spaceUnder
+    style: styles$h.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30612,13 +30633,17 @@ const LockedPointSettings = props => {
         filled: !newValue
       });
     }
-  })), onRemove && /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
-    onRemove: onRemove,
-    figureAriaLabel: `locked point at ${coord[0]}, ${coord[1]}`
-  }));
+  })));
 };
-const styles$d = aphrodite.StyleSheet.create({
-  accordionPanelWithoutActions: {
+const styles$h = aphrodite.StyleSheet.create({
+  container: {
+    marginTop: wonderBlocksTokens.spacing.xSmall_8,
+    marginBottom: 0,
+    marginLeft: -wonderBlocksTokens.spacing.xxxSmall_4,
+    marginRight: -wonderBlocksTokens.spacing.xxxSmall_4,
+    backgroundColor: wonderBlocksTokens.color.white
+  },
+  accordionPanel: {
     // Need more space since we don't have the actions' margins.
     paddingBottom: wonderBlocksTokens.spacing.medium_16
   },
@@ -30628,15 +30653,69 @@ const styles$d = aphrodite.StyleSheet.create({
   },
   spaceUnder: {
     marginBottom: wonderBlocksTokens.spacing.xSmall_8
+  }
+});
+
+const LineSwatch = props => {
+  const {
+    color,
+    lineStyle
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$g.container
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    "aria-label": `${color}, ${lineStyle}`,
+    style: [styles$g.lineSwatch, {
+      border: `5px ${lineStyle} ${perseus.lockedFigureColors[color]}`
+    }]
+  }));
+};
+const styles$g = aphrodite.StyleSheet.create({
+  container: {
+    backgroundColor: wonderBlocksTokens.color.white,
+    justifyContent: "center",
+    padding: wonderBlocksTokens.spacing.xSmall_8,
+    borderRadius: wonderBlocksTokens.spacing.xxxSmall_4
   },
-  label: {
-    marginInlineEnd: wonderBlocksTokens.spacing.xxSmall_6
+  lineSwatch: {
+    width: 40
+  }
+});
+
+/**
+ * The part of a locked figure settings panel that contains actions
+ * for this panel and its associated locked figure, including
+ * the delete button.
+ */
+const LockedFigureSettingsActions = props => {
+  const {
+    onRemove,
+    figureAriaLabel
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$f.container
+  }, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+    startIcon: trashIcon__default["default"],
+    "aria-label": `Delete ${figureAriaLabel}`,
+    onClick: onRemove,
+    kind: "tertiary",
+    style: styles$f.deleteButton
+  }, "Delete"));
+};
+const styles$f = aphrodite.StyleSheet.create({
+  container: {
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: wonderBlocksTokens.spacing.xxxSmall_4
   },
-  textField: {
-    width: wonderBlocksTokens.spacing.xxxLarge_64
+  deleteButton: {
+    // Line up the delete icon with the rest of the content.
+    marginInlineStart: -wonderBlocksTokens.spacing.xxxSmall_4
   }
 });
 
+const lengthZeroStr = "The line cannot have length 0.";
 const LockedLineSettings = props => {
   const {
     kind,
@@ -30654,11 +30733,11 @@ const LockedLineSettings = props => {
   // with their respective text fields.
   const ids = wonderBlocksCore.useUniqueIdWithMock();
   const kindSelectId = ids.get("line-kind-select");
-  const colorSelectId = ids.get("line-color-select");
   const styleSelectId = ids.get("line-style-select");
   const capitalizeKind = kind.charAt(0).toUpperCase() + kind.slice(1);
   const lineLabel = `${capitalizeKind} (${point1.coord[0]},
         ${point1.coord[1]}), (${point2.coord[0]}, ${point2.coord[1]})`;
+  const isInvalid = point1.coord[0] === point2.coord[0] && point1.coord[1] === point2.coord[1];
   function handleChangePoint(newPointProps, index) {
     const newPoints = [...points];
     newPoints[index] = {
@@ -30683,8 +30762,10 @@ const LockedLineSettings = props => {
     });
   }
   return /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsAccordion, {
+    expanded: props.expanded,
+    onToggle: props.onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$c.row
+      style: styles$e.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
@@ -30692,10 +30773,10 @@ const LockedLineSettings = props => {
       lineStyle: lineStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$c.row, styles$c.spaceUnder]
+    style: [styles$e.row, styles$e.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     htmlFor: kindSelectId,
-    style: styles$c.label,
+    style: styles$e.label,
     tag: "label"
   }, "kind"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
     id: kindSelectId,
@@ -30709,25 +30790,24 @@ const LockedLineSettings = props => {
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "line",
     label: "line"
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    value: "segment",
-    label: "segment"
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "ray",
     label: "ray"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "segment",
+    label: "segment"
   }))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$c.row, styles$c.spaceUnder]
+    style: [styles$e.row, styles$e.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
-    id: colorSelectId,
     selectedValue: lineColor,
     onChange: handleColorChange
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.small_12
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$c.row
+    style: styles$e.row
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     htmlFor: styleSelectId,
-    style: styles$c.label,
+    style: styles$e.label,
     tag: "label"
   }, "style"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
     id: styleSelectId,
@@ -30738,31 +30818,33 @@ const LockedLineSettings = props => {
     // Placeholder is required, but never gets used.
     ,
     placeholder: "",
-    style: styles$c.selectMarginOffset
+    style: styles$e.selectMarginOffset
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "solid",
     label: "solid"
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "dashed",
     label: "dashed"
-  })))), /*#__PURE__*/React__namespace.createElement(LockedPointSettings, _extends({
+  })))), isInvalid && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    style: styles$e.errorText
+  }, lengthZeroStr), /*#__PURE__*/React__namespace.createElement(DefiningPointSettings, _extends({
     label: "Point 1",
-    toggled: showPoint1
+    showPoint: showPoint1,
+    error: isInvalid ? lengthZeroStr : null
   }, point1, {
-    onToggle: newValue => onChangeProps({
+    onTogglePoint: newValue => onChangeProps({
       showPoint1: newValue
     }),
-    onChangeProps: newProps => handleChangePoint(newProps, 0),
-    style: styles$c.lockedPointSettingsContainer
-  })), /*#__PURE__*/React__namespace.createElement(LockedPointSettings, _extends({
+    onChangeProps: newProps => handleChangePoint(newProps, 0)
+  })), /*#__PURE__*/React__namespace.createElement(DefiningPointSettings, _extends({
     label: "Point 2",
-    toggled: showPoint2
+    showPoint: showPoint2,
+    error: isInvalid ? lengthZeroStr : null
   }, point2, {
-    onToggle: newValue => onChangeProps({
+    onTogglePoint: newValue => onChangeProps({
       showPoint2: newValue
     }),
-    onChangeProps: newProps => handleChangePoint(newProps, 1),
-    style: styles$c.lockedPointSettingsContainer
+    onChangeProps: newProps => handleChangePoint(newProps, 1)
   })), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
     onRemove: onRemove,
     figureAriaLabel: `locked line defined by
@@ -30770,14 +30852,7 @@ const LockedLineSettings = props => {
                     ${point2.coord[0]}, ${point2.coord[1]}.`
   }));
 };
-const styles$c = aphrodite.StyleSheet.create({
-  lockedPointSettingsContainer: {
-    marginTop: wonderBlocksTokens.spacing.xSmall_8,
-    marginBottom: 0,
-    marginLeft: -wonderBlocksTokens.spacing.xxxSmall_4,
-    marginRight: -wonderBlocksTokens.spacing.xxxSmall_4,
-    backgroundColor: wonderBlocksTokens.color.white
-  },
+const styles$e = aphrodite.StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30791,6 +30866,72 @@ const styles$c = aphrodite.StyleSheet.create({
   selectMarginOffset: {
     // Align with the point settings accordions.
     marginInlineEnd: -wonderBlocksTokens.spacing.xxxSmall_4
+  },
+  errorText: {
+    color: wonderBlocksTokens.color.red
+  }
+});
+
+/**
+ * LockedPointSettings is a component that allows the user to edit the
+ * settings of specifically a locked point on the graph.
+ *
+ * Used in the interactive graph editor's locked figures section.
+ */
+const LockedPointSettings = props => {
+  const {
+    coord,
+    color: pointColor,
+    filled = true,
+    onChangeProps,
+    onRemove
+  } = props;
+  function handleColorChange(newValue) {
+    onChangeProps({
+      color: newValue
+    });
+  }
+  return /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsAccordion, {
+    expanded: props.expanded,
+    onToggle: props.onToggle,
+    header:
+    /*#__PURE__*/
+    // Summary: Point, coords, color (filled/open)
+    React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$d.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, {
+      color: pointColor,
+      filled: filled
+    }))
+  }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
+    coord: coord,
+    onChangeProps: onChangeProps
+  }), /*#__PURE__*/React__namespace.createElement(ColorSelect, {
+    selectedValue: pointColor,
+    onChange: handleColorChange,
+    style: styles$d.spaceUnder
+  }), /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
+    label: "open point",
+    checked: !filled,
+    onChange: newValue => {
+      onChangeProps({
+        filled: !newValue
+      });
+    }
+  }), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
+    onRemove: onRemove,
+    figureAriaLabel: `locked point at ${coord[0]}, ${coord[1]}`
+  }));
+};
+const styles$d = aphrodite.StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  spaceUnder: {
+    marginBottom: wonderBlocksTokens.spacing.xSmall_8
   }
 });
 
@@ -30882,6 +31023,10 @@ function getDefaultFigureForType(type) {
 }
 
 const LockedFiguresSection = props => {
+  // Keep track of all figures' accordions' expanded states for the
+  // expand/collapse all button. Set the whole array to false initially.
+  const collapsedStateArray = Array((props.figures ?? []).length).fill(false);
+  const [expandedStates, setExpandedStates] = React__namespace.useState(collapsedStateArray);
   const uniqueId = wonderBlocksCore.useUniqueIdWithMock().get("locked-figures-section");
   const {
     figures,
@@ -30893,6 +31038,7 @@ const LockedFiguresSection = props => {
       lockedFigures: [...lockedFigures, getDefaultFigureForType(newFigure)]
     };
     onChange(newProps);
+    setExpandedStates([...expandedStates, true]);
   }
   function removeLockedFigure(index) {
     // eslint-disable-next-line no-alert
@@ -30901,6 +31047,11 @@ const LockedFiguresSection = props => {
       onChange({
         lockedFigures: [...lockedFigures.slice(0, index), ...lockedFigures.slice(index + 1)]
       });
+
+      // Update expanded states
+      const newExpandedStates = [...expandedStates];
+      newExpandedStates.splice(index, 1);
+      setExpandedStates(newExpandedStates);
     }
   }
   function changeProps(index,
@@ -30916,16 +31067,46 @@ const LockedFiguresSection = props => {
     };
     onChange(newFigures);
   }
+  function toggleExpanded(newValue) {
+    setExpandedStates(Array(figures?.length).fill(newValue));
+  }
+  const allCollapsed = expandedStates.every(value => !value);
+  const buttonLabel = allCollapsed ? "Expand all" : "Collapse all";
+  const showExpandButton = !!figures?.length;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, figures?.map((figure, index) => /*#__PURE__*/React__namespace.createElement(LockedFigureSettings, _extends({
+    expanded: expandedStates[index],
+    onToggle: newValue => {
+      const newExpanded = [...expandedStates];
+      newExpanded[index] = newValue;
+      setExpandedStates(newExpanded);
+    },
     key: `${uniqueId}-locked-${figure}-${index}`
   }, figure, {
     onChangeProps: newProps => changeProps(index, newProps),
     onRemove: () => removeLockedFigure(index)
-  }))), /*#__PURE__*/React__namespace.createElement(LockedFigureSelect, {
+  }))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$c.buttonContainer
+  }, /*#__PURE__*/React__namespace.createElement(LockedFigureSelect, {
     id: `${uniqueId}-select`,
     onChange: addLockedFigure
-  }));
+  }), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), showExpandButton && /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+    kind: "secondary",
+    onClick: () => toggleExpanded(allCollapsed),
+    style: styles$c.button
+  }, buttonLabel)));
 };
+const styles$c = aphrodite.StyleSheet.create({
+  buttonContainer: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  button: {
+    marginTop: wonderBlocksTokens.spacing.xSmall_8,
+    flexGrow: 1
+  }
+});
 
 const SegmentCountSelector = _ref => {
   let {