@khanacademy/perseus-editor 14.4.0 → 14.5.0

package/dist/es/index.js

@@ -25,6 +25,7 @@ import { useMathInputI18n, createMathField } from '@khanacademy/math-input';
 import { vector, number } from '@khanacademy/kmath';
 import { SingleSelect, OptionItem, ActionMenu, ActionItem } from '@khanacademy/wonder-blocks-dropdown';
 import Banner from '@khanacademy/wonder-blocks-banner';
+import plusCircle from '@phosphor-icons/core/regular/plus-circle.svg';
 import { AccordionSection } from '@khanacademy/wonder-blocks-accordion';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 import caretDoubleDownIcon from '@phosphor-icons/core/bold/caret-double-down-bold.svg';
@@ -34,7 +35,6 @@ import caretUpIcon from '@phosphor-icons/core/bold/caret-up-bold.svg';
 import trashIcon from '@phosphor-icons/core/bold/trash-bold.svg';
 import copyIcon from '@phosphor-icons/core/assets/regular/copy.svg';
 import autoPasteIcon from '@phosphor-icons/core/assets/regular/note-pencil.svg';
-import plusCircle from '@phosphor-icons/core/regular/plus-circle.svg';
 import { vec } from 'mafs';
 import arrowFatDown from '@phosphor-icons/core/regular/arrow-fat-down.svg';
 import arrowFatLeft from '@phosphor-icons/core/regular/arrow-fat-left.svg';
@@ -45,7 +45,7 @@ import arrowCounterClockwise from '@phosphor-icons/core/bold/arrow-counter-clock
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "14.4.0";
+const libVersion = "14.5.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -21904,8 +21904,7 @@ class IframeContentRenderer extends React.Component {
       this._lastData = data;
 
       // We can't use JSON.stringify/parse for this because the apiOptions
-      // includes the functions GroupMetadataEditor, groupAnnotator,
-      // onFocusChange, and onInputError.
+      // includes the functions GroupMetadataEditor, groupAnnotator, and onFocusChange.
       // @ts-expect-error - TS2339 - Property 'iframeDataStore' does not exist on type 'Window & typeof globalThis'.
       window.iframeDataStore[this.iframeID] = data;
       frame.contentWindow.postMessage(this.iframeID, "*");
@@ -29688,7 +29687,10 @@ function InteractiveGraphDescription(props) {
   }, "Title", /*#__PURE__*/React.createElement(TextField, {
     value: ariaLabelValue,
     onChange: newValue => onChange({
-      fullGraphAriaLabel: newValue
+      fullGraphAriaLabel:
+      // Save as undefined if the new value
+      // is an empty string.
+      newValue || undefined
     }),
     style: styles$F.spaceAbove
   })), /*#__PURE__*/React.createElement(Strut, {
@@ -29700,7 +29702,10 @@ function InteractiveGraphDescription(props) {
     resizeType: "vertical",
     value: ariaDescriptionValue,
     onChange: newValue => onChange({
-      fullGraphAriaDescription: newValue
+      fullGraphAriaDescription:
+      // Save as undefined if the new value
+      // is an empty string.
+      newValue || undefined
     }),
     style: styles$F.spaceAbove
   }))));
@@ -30718,15 +30723,205 @@ const styles$t = StyleSheet.create({
   }
 });
 
+/**
+ * LockedLabelSettings is a component that allows the user to edit the
+ * settings of specifically a locked label on the graph within the
+ * Interactive Graph widget.
+ *
+ * Used in the interactive graph editor's locked figures section.
+ */
+function LockedLabelSettings(props) {
+  const {
+    type,
+    coord,
+    color: color$1,
+    size,
+    text,
+    expanded,
+    onChangeProps,
+    onMove,
+    onRemove,
+    onToggle,
+    containerStyle
+  } = props;
+  return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
+    expanded: expanded,
+    onToggle: onToggle,
+    header: /*#__PURE__*/React.createElement(View, {
+      style: [styles$s.row, styles$s.accordionHeaderContainer]
+    }, /*#__PURE__*/React.createElement(LabelLarge, null, "Label (", coord[0], ", ", coord[1], ")"), /*#__PURE__*/React.createElement(Strut, {
+      size: spacing.xSmall_8
+    }), text !== "" && /*#__PURE__*/React.createElement(LabelLarge, {
+      style: [{
+        backgroundColor: color.white,
+        color: lockedFigureColors[color$1]
+      }, styles$s.accordionHeader]
+    }, text)),
+    containerStyle: containerStyle
+  }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
+    coord: coord,
+    onChange: newCoords => {
+      onChangeProps({
+        coord: newCoords
+      });
+    },
+    style: styles$s.spaceUnder
+  }), /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    style: [styles$s.row, styles$s.spaceUnder]
+  }, "TeX", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xSmall_8
+  }), /*#__PURE__*/React.createElement(TextField, {
+    value: text,
+    placeholder: "ex. x^2 or \\frac{1}{2}",
+    onChange: newValue => onChangeProps({
+      text: newValue
+    })
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles$s.row
+  }, onMove && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorSelect, {
+    selectedValue: color$1,
+    onChange: newColor => {
+      onChangeProps({
+        color: newColor
+      });
+    },
+    style: styles$s.spaceUnder
+  }), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.medium_16
+  })), /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    style: styles$s.row
+  }, "size", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xSmall_8
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
+    selectedValue: size,
+    onChange: newValue => onChangeProps({
+      size: newValue
+    })
+    // Placeholder is required, but never gets used since
+    // we have a label for the select.
+    ,
+    placeholder: ""
+  }, /*#__PURE__*/React.createElement(OptionItem, {
+    value: "small",
+    label: "small"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "medium",
+    label: "medium"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "large",
+    label: "large"
+  })))), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
+    figureType: type,
+    onMove: onMove,
+    onRemove: onRemove
+  }));
+}
+const styles$s = StyleSheet.create({
+  accordionHeaderContainer: {
+    // Stop the label summary from wrapping.
+    whiteSpace: "nowrap"
+  },
+  accordionHeader: {
+    padding: spacing.xxxSmall_4,
+    marginInlineEnd: spacing.xSmall_8,
+    borderRadius: spacing.xxxSmall_4,
+    textOverflow: "ellipsis",
+    overflow: "hidden"
+  },
+  row: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    // Allow truncation, stop bleeding over the edge.
+    minWidth: 0
+  },
+  spaceUnder: {
+    marginBottom: spacing.xSmall_8
+  }
+});
+
+const DEFAULT_COLOR = "grayH";
+function getDefaultFigureForType(type) {
+  switch (type) {
+    case "point":
+      return {
+        type: "point",
+        coord: [0, 0],
+        color: DEFAULT_COLOR,
+        filled: true
+      };
+    case "line":
+      return {
+        type: "line",
+        kind: "line",
+        points: [getDefaultFigureForType("point"), _extends({}, getDefaultFigureForType("point"), {
+          coord: [2, 2]
+        })],
+        color: DEFAULT_COLOR,
+        lineStyle: "solid",
+        showPoint1: false,
+        showPoint2: false
+      };
+    case "vector":
+      return {
+        type: "vector",
+        points: [[0, 0], [2, 2]],
+        color: DEFAULT_COLOR
+      };
+    case "ellipse":
+      return {
+        type: "ellipse",
+        center: [0, 0],
+        radius: [1, 1],
+        angle: 0,
+        color: DEFAULT_COLOR,
+        fillStyle: "none",
+        strokeStyle: "solid"
+      };
+    case "polygon":
+      return {
+        type: "polygon",
+        points: [[0, 2], [-1, 0], [1, 0]],
+        color: DEFAULT_COLOR,
+        showVertices: false,
+        fillStyle: "none",
+        strokeStyle: "solid"
+      };
+    case "function":
+      return {
+        type: "function",
+        color: DEFAULT_COLOR,
+        strokeStyle: "solid",
+        equation: "x^2",
+        directionalAxis: "x"
+      };
+    case "label":
+      return {
+        type: "label",
+        coord: [0, 0],
+        text: "",
+        color: DEFAULT_COLOR,
+        size: "medium"
+      };
+    default:
+      throw new UnreachableCaseError(type);
+  }
+}
+
 const {
   InfoTip: InfoTip$c
 } = components;
 const LockedEllipseSettings = props => {
+  var _flags$mafs;
   const {
+    flags,
     center,
     radius,
     angle,
     color,
+    labels,
     fillStyle,
     strokeStyle,
     expanded,
@@ -30735,9 +30930,47 @@ const LockedEllipseSettings = props => {
     onMove,
     onRemove
   } = props;
+  function handleCenterChange(newCoord) {
+    const xOffset = newCoord[0] - center[0];
+    const yOffset = newCoord[1] - center[1];
+    const newProps = {
+      center: newCoord
+    };
+
+    // Update the coord by the same amount as the point for all labels
+    newProps.labels = labels == null ? void 0 : labels.map(label => _extends({}, label, {
+      coord: [label.coord[0] + xOffset, label.coord[1] + yOffset]
+    }));
+    onChangeProps(newProps);
+  }
   function handleColorChange(newValue) {
-    onChangeProps({
+    const newProps = {
+      color: newValue
+    };
+
+    // Update the color of the all labels to match the point
+    newProps.labels = labels == null ? void 0 : labels.map(label => _extends({}, label, {
       color: newValue
+    }));
+    onChangeProps(newProps);
+  }
+  function handleLabelChange(updatedLabel, labelIndex) {
+    if (!labels) {
+      return;
+    }
+    const updatedLabels = [...labels];
+    updatedLabels[labelIndex] = _extends({}, labels[labelIndex], updatedLabel);
+    onChangeProps({
+      labels: updatedLabels
+    });
+  }
+  function handleLabelRemove(labelIndex) {
+    if (!labels) {
+      return;
+    }
+    const updatedLabels = labels.filter((_, index) => index !== labelIndex);
+    onChangeProps({
+      labels: updatedLabels
     });
   }
   return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
@@ -30747,7 +30980,7 @@ const LockedEllipseSettings = props => {
     /*#__PURE__*/
     // Summary: Ellipse, center, radius, color (opacity, dashed)
     React.createElement(View, {
-      style: styles$s.row
+      style: styles$r.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Ellipse (${center[0]}, ${center[1]}), radius ${radius[0]}, ${radius[1]}`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(EllipseSwatch, {
@@ -30756,19 +30989,17 @@ const LockedEllipseSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: styles$s.row
+    style: styles$r.row
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: center,
-    style: styles$s.spaceUnder,
-    onChange: newCoords => onChangeProps({
-      center: newCoords
-    })
+    style: styles$r.spaceUnder,
+    onChange: handleCenterChange
   }), /*#__PURE__*/React.createElement(View, {
-    style: styles$s.spaceUnder
+    style: styles$r.spaceUnder
   }, /*#__PURE__*/React.createElement(InfoTip$c, null, "The coordinates for the center of the ellipse."))), /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: radius,
     labels: ["x radius", "y radius"],
-    style: styles$s.spaceUnder,
+    style: styles$r.spaceUnder,
     onChange: newCoords => onChangeProps({
       radius: newCoords
     })
@@ -30780,7 +31011,7 @@ const LockedEllipseSettings = props => {
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xSmall_8
   }), /*#__PURE__*/React.createElement(View, {
-    style: [styles$s.row, styles$s.spaceUnder]
+    style: [styles$r.row, styles$r.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30788,7 +31019,7 @@ const LockedEllipseSettings = props => {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$s.row, styles$s.truncatedWidth]
+    style: [styles$r.row, styles$r.truncatedWidth]
   }, "fill", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30808,13 +31039,40 @@ const LockedEllipseSettings = props => {
     onChange: value => onChangeProps({
       strokeStyle: value
     })
-  }), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
+  }), (flags == null || (_flags$mafs = flags["mafs"]) == null ? void 0 : _flags$mafs["locked-ellipse-labels"]) && /*#__PURE__*/React.createElement(React.Fragment, null, labels == null ? void 0 : labels.map((label, labelIndex) => /*#__PURE__*/React.createElement(LockedLabelSettings, _extends({}, label, {
+    expanded: true,
+    onChangeProps: newLabel => {
+      handleLabelChange(newLabel, labelIndex);
+    },
+    onRemove: () => {
+      handleLabelRemove(labelIndex);
+    },
+    containerStyle: styles$r.labelContainer
+  }))), /*#__PURE__*/React.createElement(Button, {
+    kind: "tertiary",
+    startIcon: plusCircle,
+    onClick: () => {
+      var _labels$length;
+      const newLabel = _extends({}, getDefaultFigureForType("label"), {
+        coord: [center[0],
+        // Additional vertical offset for each
+        // label so they don't overlap.
+        center[1] - ((_labels$length = labels == null ? void 0 : labels.length) != null ? _labels$length : 0)],
+        // Default to the same color as the ellipse
+        color: color
+      });
+      onChangeProps({
+        labels: [...(labels != null ? labels : []), newLabel]
+      });
+    },
+    style: styles$r.addButton
+  }, "Add visible label")), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
   }));
 };
-const styles$s = StyleSheet.create({
+const styles$r = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30826,6 +31084,12 @@ const styles$s = StyleSheet.create({
   truncatedWidth: {
     // Allow truncation, stop bleeding over the edge.
     minWidth: 0
+  },
+  addButton: {
+    alignSelf: "start"
+  },
+  labelContainer: {
+    backgroundColor: color.white
   }
 });
 
@@ -30835,15 +31099,15 @@ const LineSwatch = props => {
     lineStyle
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$r.container
+    style: styles$q.container
   }, /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, ${lineStyle}`,
-    style: [styles$r.lineSwatch, {
+    style: [styles$q.lineSwatch, {
       border: `5px ${lineStyle} ${lockedFigureColors[color]}`
     }]
   }));
 };
-const styles$r = StyleSheet.create({
+const styles$q = StyleSheet.create({
   container: {
     backgroundColor: color.white,
     justifyContent: "center",
@@ -30861,19 +31125,16 @@ const examples = {
   trigonometric: ["sin(x) * 3", "arctan(2x) + 4"]
 };
 
-/**
- * LockedFunctionSettings is a component that allows the user to edit the
- * settings of specifically a locked function on the graph.
- *
- * Used in the interactive graph editor's locked figures section.
- */
 const LockedFunctionSettings = props => {
+  var _flags$mafs;
   const {
+    flags,
     color: lineColor,
     strokeStyle,
     equation,
     directionalAxis,
     domain,
+    labels,
     onChangeProps,
     onMove,
     onRemove
@@ -30924,13 +31185,43 @@ const LockedFunctionSettings = props => {
   const exampleCategories = Object.keys(examples);
   const exampleCategorySelected = exampleCategory !== "";
   const exampleContent = exampleCategorySelected ? examples[exampleCategory] : ["Select category to see example equations"];
+  function handleColorChange(newValue) {
+    const newProps = {
+      color: newValue
+    };
+
+    // Update the color of the all labels to match the point
+    newProps.labels = labels == null ? void 0 : labels.map(label => _extends({}, label, {
+      color: newValue
+    }));
+    onChangeProps(newProps);
+  }
+  function handleLabelChange(updatedLabel, labelIndex) {
+    if (!labels) {
+      return;
+    }
+    const updatedLabels = [...labels];
+    updatedLabels[labelIndex] = _extends({}, labels[labelIndex], updatedLabel);
+    onChangeProps({
+      labels: updatedLabels
+    });
+  }
+  function handleLabelRemove(labelIndex) {
+    if (!labels) {
+      return;
+    }
+    const updatedLabels = labels.filter((_, index) => index !== labelIndex);
+    onChangeProps({
+      labels: updatedLabels
+    });
+  }
   return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$q.row
+      style: styles$p.row
     }, /*#__PURE__*/React.createElement(LabelLarge, {
-      style: styles$q.accordionHeader
+      style: styles$p.accordionHeader
     }, lineLabel), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(LineSwatch, {
@@ -30938,12 +31229,10 @@ const LockedFunctionSettings = props => {
       lineStyle: strokeStyle
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$q.row, styles$q.spaceUnder]
+    style: [styles$p.row, styles$p.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: lineColor,
-    onChange: newValue => {
-      handlePropChange("color", newValue);
-    }
+    onChange: handleColorChange
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.small_12
   }), /*#__PURE__*/React.createElement(LineStrokeSelect, {
@@ -30952,14 +31241,14 @@ const LockedFunctionSettings = props => {
       handlePropChange("strokeStyle", newValue);
     }
   })), /*#__PURE__*/React.createElement(View, {
-    style: [styles$q.row, styles$q.rowSpace]
+    style: [styles$p.row, styles$p.rowSpace]
   }, /*#__PURE__*/React.createElement(SingleSelect, {
     selectedValue: directionalAxis,
     onChange: newValue => {
       handlePropChange("directionalAxis", newValue);
     },
     "aria-label": "equation prefix",
-    style: [styles$q.dropdownLabel, styles$q.axisMenu]
+    style: [styles$p.dropdownLabel, styles$p.axisMenu]
     // Placeholder is required, but never gets used.
     ,
     placeholder: ""
@@ -30978,17 +31267,17 @@ const LockedFunctionSettings = props => {
     onChange: newValue => {
       handlePropChange("equation", newValue);
     },
-    style: [styles$q.textField]
+    style: [styles$p.textField]
   })), /*#__PURE__*/React.createElement(View, {
-    style: [styles$q.row, styles$q.rowSpace]
+    style: [styles$p.row, styles$p.rowSpace]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$q.dropdownLabel, styles$q.domainMin]
+    style: [styles$p.dropdownLabel, styles$p.domainMin]
   }, `${domainRangeText} min`, /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
-    style: styles$q.domainMinField,
+    style: styles$p.domainMinField,
     value: domainEntries[0],
     onChange: newValue => {
       handleDomainChange(0, newValue);
@@ -30998,12 +31287,12 @@ const LockedFunctionSettings = props => {
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
     "aria-label": `${domainRangeText} max`,
-    style: [styles$q.dropdownLabel, styles$q.domainMax]
+    style: [styles$p.dropdownLabel, styles$p.domainMax]
   }, "max", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
-    style: styles$q.domainMaxField,
+    style: styles$p.domainMaxField,
     value: domainEntries[1],
     onChange: newValue => {
       handleDomainChange(1, newValue);
@@ -31011,11 +31300,11 @@ const LockedFunctionSettings = props => {
   }))), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     header: /*#__PURE__*/React.createElement(LabelLarge, null, "Example Functions"),
     expanded: false,
-    containerStyle: styles$q.exampleWorkspace,
-    panelStyle: styles$q.exampleAccordionPanel
+    containerStyle: styles$p.exampleWorkspace,
+    panelStyle: styles$p.exampleAccordionPanel
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$q.dropdownLabel
+    style: styles$p.dropdownLabel
   }, "Choose a category", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -31029,13 +31318,41 @@ const LockedFunctionSettings = props => {
       label: category
     });
   }))), exampleCategorySelected && /*#__PURE__*/React.createElement("ul", {
-    className: css(styles$q.exampleContainer)
+    className: css(styles$p.exampleContainer)
   }, exampleContent.map((example, index) => /*#__PURE__*/React.createElement(ExampleItem, {
     category: exampleCategory,
     example: example,
     index: index,
     pasteEquationFn: handlePropChange
-  })))), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
+  })))), (flags == null || (_flags$mafs = flags["mafs"]) == null ? void 0 : _flags$mafs["locked-function-labels"]) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: styles$p.horizontalRule
+  }), labels == null ? void 0 : labels.map((label, labelIndex) => /*#__PURE__*/React.createElement(LockedLabelSettings, _extends({}, label, {
+    expanded: true,
+    onChangeProps: newLabel => {
+      handleLabelChange(newLabel, labelIndex);
+    },
+    onRemove: () => {
+      handleLabelRemove(labelIndex);
+    },
+    containerStyle: styles$p.labelContainer
+  }))), /*#__PURE__*/React.createElement(Button, {
+    kind: "tertiary",
+    startIcon: plusCircle,
+    onClick: () => {
+      var _labels$length;
+      const newLabel = _extends({}, getDefaultFigureForType("label"), {
+        // Vertical offset for each label so they
+        // don't overlap.
+        coord: [0, -((_labels$length = labels == null ? void 0 : labels.length) != null ? _labels$length : 0)],
+        // Default to the same color as the function
+        color: lineColor
+      });
+      onChangeProps({
+        labels: [...(labels != null ? labels : []), newLabel]
+      });
+    },
+    style: styles$p.addButton
+  }, "Add visible label")), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
@@ -31051,29 +31368,29 @@ const ExampleItem = props => {
   const exampleId = useId();
   return /*#__PURE__*/React.createElement("li", {
     key: `${category}-${index}`,
-    className: css(styles$q.exampleRow)
+    className: css(styles$p.exampleRow)
   }, /*#__PURE__*/React.createElement(IconButton, {
     icon: autoPasteIcon,
     "aria-label": "paste example",
     "aria-describedby": exampleId,
     onClick: () => pasteEquationFn("equation", example),
     size: "medium",
-    style: styles$q.copyPasteButton
+    style: styles$p.copyPasteButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: copyIcon,
     "aria-label": "copy example",
     "aria-describedby": exampleId,
     onClick: () => navigator.clipboard.writeText(example),
     size: "medium",
-    style: styles$q.copyPasteButton
+    style: styles$p.copyPasteButton
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxxSmall_4
   }), /*#__PURE__*/React.createElement(View, {
-    style: styles$q.exampleContent,
+    style: styles$p.exampleContent,
     id: exampleId
   }, example));
 };
-const styles$q = StyleSheet.create({
+const styles$p = StyleSheet.create({
   accordionHeader: {
     textOverflow: "ellipsis",
     // A maximum width needs to be specified in order for the ellipsis to work.
@@ -31164,125 +31481,19 @@ const styles$q = StyleSheet.create({
   },
   textField: {
     flexGrow: "1"
-  }
-});
-
-/**
- * LockedLabelSettings is a component that allows the user to edit the
- * settings of specifically a locked label on the graph within the
- * Interactive Graph widget.
- *
- * Used in the interactive graph editor's locked figures section.
- */
-function LockedLabelSettings(props) {
-  const {
-    type,
-    coord,
-    color: color$1,
-    size,
-    text,
-    expanded,
-    onChangeProps,
-    onMove,
-    onRemove,
-    onToggle,
-    containerStyle
-  } = props;
-  return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
-    expanded: expanded,
-    onToggle: onToggle,
-    header: /*#__PURE__*/React.createElement(View, {
-      style: [styles$p.row, styles$p.accordionHeaderContainer]
-    }, /*#__PURE__*/React.createElement(LabelLarge, null, "Label (", coord[0], ", ", coord[1], ")"), /*#__PURE__*/React.createElement(Strut, {
-      size: spacing.xSmall_8
-    }), text !== "" && /*#__PURE__*/React.createElement(LabelLarge, {
-      style: [{
-        backgroundColor: color.white,
-        color: lockedFigureColors[color$1]
-      }, styles$p.accordionHeader]
-    }, text)),
-    containerStyle: containerStyle
-  }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
-    coord: coord,
-    onChange: newCoords => {
-      onChangeProps({
-        coord: newCoords
-      });
-    },
-    style: styles$p.spaceUnder
-  }), /*#__PURE__*/React.createElement(LabelMedium, {
-    tag: "label",
-    style: [styles$p.row, styles$p.spaceUnder]
-  }, "TeX", /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xSmall_8
-  }), /*#__PURE__*/React.createElement(TextField, {
-    value: text,
-    placeholder: "ex. x^2 or \\frac{1}{2}",
-    onChange: newValue => onChangeProps({
-      text: newValue
-    })
-  })), /*#__PURE__*/React.createElement(View, {
-    style: styles$p.row
-  }, onMove && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorSelect, {
-    selectedValue: color$1,
-    onChange: newColor => {
-      onChangeProps({
-        color: newColor
-      });
-    },
-    style: styles$p.spaceUnder
-  }), /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.medium_16
-  })), /*#__PURE__*/React.createElement(LabelMedium, {
-    tag: "label",
-    style: styles$p.row
-  }, "size", /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xSmall_8
-  }), /*#__PURE__*/React.createElement(SingleSelect, {
-    selectedValue: size,
-    onChange: newValue => onChangeProps({
-      size: newValue
-    })
-    // Placeholder is required, but never gets used since
-    // we have a label for the select.
-    ,
-    placeholder: ""
-  }, /*#__PURE__*/React.createElement(OptionItem, {
-    value: "small",
-    label: "small"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "medium",
-    label: "medium"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "large",
-    label: "large"
-  })))), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
-    figureType: type,
-    onMove: onMove,
-    onRemove: onRemove
-  }));
-}
-const styles$p = StyleSheet.create({
-  accordionHeaderContainer: {
-    // Stop the label summary from wrapping.
-    whiteSpace: "nowrap"
   },
-  accordionHeader: {
-    padding: spacing.xxxSmall_4,
-    marginInlineEnd: spacing.xSmall_8,
-    borderRadius: spacing.xxxSmall_4,
-    textOverflow: "ellipsis",
-    overflow: "hidden"
+  // Label settings styles
+  addButton: {
+    alignSelf: "start"
   },
-  row: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    // Allow truncation, stop bleeding over the edge.
-    minWidth: 0
+  horizontalRule: {
+    marginTop: spacing.small_12,
+    marginBottom: spacing.xxxSmall_4,
+    height: 1,
+    backgroundColor: color.offBlack16
   },
-  spaceUnder: {
-    marginBottom: spacing.xSmall_8
+  labelContainer: {
+    backgroundColor: color.white
   }
 });
 
@@ -31315,76 +31526,6 @@ const styles$o = StyleSheet.create({
   }
 });
 
-const DEFAULT_COLOR = "grayH";
-function getDefaultFigureForType(type) {
-  switch (type) {
-    case "point":
-      return {
-        type: "point",
-        coord: [0, 0],
-        color: DEFAULT_COLOR,
-        filled: true,
-        labels: []
-      };
-    case "line":
-      return {
-        type: "line",
-        kind: "line",
-        points: [getDefaultFigureForType("point"), _extends({}, getDefaultFigureForType("point"), {
-          coord: [2, 2]
-        })],
-        color: DEFAULT_COLOR,
-        lineStyle: "solid",
-        showPoint1: false,
-        showPoint2: false,
-        labels: []
-      };
-    case "vector":
-      return {
-        type: "vector",
-        points: [[0, 0], [2, 2]],
-        color: DEFAULT_COLOR
-      };
-    case "ellipse":
-      return {
-        type: "ellipse",
-        center: [0, 0],
-        radius: [1, 1],
-        angle: 0,
-        color: DEFAULT_COLOR,
-        fillStyle: "none",
-        strokeStyle: "solid"
-      };
-    case "polygon":
-      return {
-        type: "polygon",
-        points: [[0, 2], [-1, 0], [1, 0]],
-        color: DEFAULT_COLOR,
-        showVertices: false,
-        fillStyle: "none",
-        strokeStyle: "solid"
-      };
-    case "function":
-      return {
-        type: "function",
-        color: DEFAULT_COLOR,
-        strokeStyle: "solid",
-        equation: "x^2",
-        directionalAxis: "x"
-      };
-    case "label":
-      return {
-        type: "label",
-        coord: [0, 0],
-        text: "",
-        color: DEFAULT_COLOR,
-        size: "medium"
-      };
-    default:
-      throw new UnreachableCaseError(type);
-  }
-}
-
 const LockedPointSettings = props => {
   var _flags$mafs, _flags$mafs2;
   const {
@@ -31410,9 +31551,11 @@ const LockedPointSettings = props => {
     };
 
     // Update the color of the all labels to match the point
-    newProps.labels = labels.map(label => _extends({}, label, {
-      color: newValue
-    }));
+    if (labels) {
+      newProps.labels = labels.map(label => _extends({}, label, {
+        color: newValue
+      }));
+    }
     onChangeProps(newProps);
   }
   function handleCoordChange(newCoord) {
@@ -31423,12 +31566,17 @@ const LockedPointSettings = props => {
     };
 
     // Update the coord by the same amount as the point for all labels
-    newProps.labels = labels.map(label => _extends({}, label, {
-      coord: [label.coord[0] + xOffset, label.coord[1] + yOffset]
-    }));
+    if (labels) {
+      newProps.labels = labels.map(label => _extends({}, label, {
+        coord: [label.coord[0] + xOffset, label.coord[1] + yOffset]
+      }));
+    }
     onChangeProps(newProps);
   }
   function handleLabelChange(updatedLabel, labelIndex) {
+    if (!labels) {
+      return;
+    }
     const updatedLabels = [...labels];
     updatedLabels[labelIndex] = _extends({}, labels[labelIndex], updatedLabel);
     onChangeProps({
@@ -31436,6 +31584,9 @@ const LockedPointSettings = props => {
     });
   }
   function handleLabelRemove(labelIndex) {
+    if (!labels) {
+      return;
+    }
     const updatedLabels = labels.filter((_, index) => index !== labelIndex);
     onChangeProps({
       labels: updatedLabels
@@ -31478,7 +31629,7 @@ const LockedPointSettings = props => {
         filled: !newValue
       });
     }
-  })), (!isDefiningPoint && (flags == null || (_flags$mafs = flags["mafs"]) == null ? void 0 : _flags$mafs["locked-point-labels"]) || isDefiningPoint && (flags == null || (_flags$mafs2 = flags["mafs"]) == null ? void 0 : _flags$mafs2["locked-line-labels"])) && /*#__PURE__*/React.createElement(React.Fragment, null, labels.map((label, labelIndex) => /*#__PURE__*/React.createElement(LockedLabelSettings, _extends({}, label, {
+  })), (!isDefiningPoint && (flags == null || (_flags$mafs = flags["mafs"]) == null ? void 0 : _flags$mafs["locked-point-labels"]) || isDefiningPoint && (flags == null || (_flags$mafs2 = flags["mafs"]) == null ? void 0 : _flags$mafs2["locked-line-labels"])) && /*#__PURE__*/React.createElement(React.Fragment, null, labels == null ? void 0 : labels.map((label, labelIndex) => /*#__PURE__*/React.createElement(LockedLabelSettings, _extends({}, label, {
     containerStyle: !isDefiningPoint && styles$n.lockedPointLabelContainer,
     expanded: true,
     onChangeProps: newLabel => {
@@ -31491,6 +31642,7 @@ const LockedPointSettings = props => {
     kind: "tertiary",
     startIcon: plusCircle,
     onClick: () => {
+      var _labels$length;
       const newLabel = _extends({}, getDefaultFigureForType("label"), {
         // Place the label at the same position
         // as the point. Add a small offset to
@@ -31498,12 +31650,12 @@ const LockedPointSettings = props => {
         coord: [coord[0] + 0.5,
         // Additional offset for each label so
         // they don't overlap.
-        coord[1] - 1 * (labels == null ? void 0 : labels.length)],
+        coord[1] - 1 * ((_labels$length = labels == null ? void 0 : labels.length) != null ? _labels$length : 0)],
         // Default to the same color as the point
         color: pointColor
       });
       onChangeProps({
-        labels: [...labels, newLabel]
+        labels: [...(labels != null ? labels : []), newLabel]
       });
     },
     style: styles$n.addButton
@@ -31574,7 +31726,7 @@ const LockedLineSettings = props => {
     const oldMidpoint = vec.midpoint(points[0].coord, points[1].coord);
     const newMidpoint = vec.midpoint(newPoints[0].coord, newPoints[1].coord);
     const offset = [newMidpoint[0] - oldMidpoint[0], newMidpoint[1] - oldMidpoint[1]];
-    const newLabels = labels.map((label, labelIndex) => _extends({}, label, {
+    const newLabels = labels == null ? void 0 : labels.map((label, labelIndex) => _extends({}, label, {
       coord: [label.coord[0] + offset[0], label.coord[1] + offset[1]]
     }));
     onChangeProps({
@@ -31583,7 +31735,8 @@ const LockedLineSettings = props => {
     });
   }
   function handleColorChange(newColor) {
-    const newLabels = labels.map(label => _extends({}, label, {
+    var _point1$labels, _point2$labels;
+    const newLabels = labels == null ? void 0 : labels.map(label => _extends({}, label, {
       color: newColor
     }));
     onChangeProps({
@@ -31591,12 +31744,12 @@ const LockedLineSettings = props => {
       // Keep the line's points' colors in sync with the line color.
       points: [_extends({}, point1, {
         color: newColor,
-        labels: point1.labels.map(label => _extends({}, label, {
+        labels: (_point1$labels = point1.labels) == null ? void 0 : _point1$labels.map(label => _extends({}, label, {
           color: newColor
         }))
       }), _extends({}, point2, {
         color: newColor,
-        labels: point2.labels.map(label => _extends({}, label, {
+        labels: (_point2$labels = point2.labels) == null ? void 0 : _point2$labels.map(label => _extends({}, label, {
           color: newColor
         }))
       })],
@@ -31605,6 +31758,9 @@ const LockedLineSettings = props => {
     });
   }
   function handleLabelChange(updatedLabel, labelIndex) {
+    if (!labels) {
+      return;
+    }
     const updatedLabels = [...labels];
     updatedLabels[labelIndex] = _extends({}, labels[labelIndex], updatedLabel);
     onChangeProps({
@@ -31612,6 +31768,9 @@ const LockedLineSettings = props => {
     });
   }
   function handleLabelRemove(labelIndex) {
+    if (!labels) {
+      return;
+    }
     const updatedLabels = labels.filter((_, index) => index !== labelIndex);
     onChangeProps({
       labels: updatedLabels
@@ -31688,7 +31847,7 @@ const LockedLineSettings = props => {
     onChangeProps: newProps => handleChangePoint(newProps, 1)
   })), (flags == null || (_flags$mafs = flags["mafs"]) == null ? void 0 : _flags$mafs["locked-line-labels"]) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
     style: styles$m.horizontalRule
-  }), labels.map((label, labelIndex) => /*#__PURE__*/React.createElement(LockedLabelSettings, _extends({}, label, {
+  }), labels == null ? void 0 : labels.map((label, labelIndex) => /*#__PURE__*/React.createElement(LockedLabelSettings, _extends({}, label, {
     expanded: true,
     onChangeProps: newLabel => {
       handleLabelChange(newLabel, labelIndex);
@@ -31701,17 +31860,18 @@ const LockedLineSettings = props => {
     kind: "tertiary",
     startIcon: plusCircle,
     onClick: () => {
+      var _labels$length;
       // Additional vertical offset for each label so
       // they don't overlap.
       const offsetPerLabel = [0, -1];
-      const labelLocation = vec.add(vec.scale(offsetPerLabel, labels.length), vec.midpoint(points[0].coord, points[1].coord));
+      const labelLocation = vec.add(vec.scale(offsetPerLabel, (_labels$length = labels == null ? void 0 : labels.length) != null ? _labels$length : 0), vec.midpoint(points[0].coord, points[1].coord));
       const newLabel = _extends({}, getDefaultFigureForType("label"), {
         coord: labelLocation,
-        // Default to the same color as the point
+        // Default to the same color as the line
         color: lineColor
       });
       onChangeProps({
-        labels: [...labels, newLabel]
+        labels: [...(labels != null ? labels : []), newLabel]
       });
     },
     style: styles$m.addButton
@@ -31994,17 +32154,14 @@ const styles$k = StyleSheet.create({
   }
 });
 
-/**
- * LockedVectorSettings is a component that allows the user to edit the
- * settings of specifically a locked vector on the graph.
- *
- * Used in the interactive graph editor's locked figures section.
- */
 const lengthErrorMessage = "The vector cannot have length 0.";
 const LockedVectorSettings = props => {
+  var _flags$mafs;
   const {
+    flags,
     points,
     color: lineColor,
+    labels,
     onChangeProps,
     onMove,
     onRemove
@@ -32018,14 +32175,48 @@ const LockedVectorSettings = props => {
     if (typeof newCoord !== "undefined") {
       const newPoints = [...points];
       newPoints[index] = [...newCoord];
+
+      // Update labels to match the new points
+      const oldMidpoint = vec.midpoint(tail, tip);
+      const newMidpoint = vec.midpoint(newPoints[0], newPoints[1]);
+      const offset = vec.sub(newMidpoint, oldMidpoint);
+      const newLabels = labels == null ? void 0 : labels.map(label => _extends({}, label, {
+        coord: vec.add(label.coord, offset)
+      }));
       onChangeProps({
-        points: newPoints
+        points: newPoints,
+        labels: newLabels
       });
     }
   }
   function handleColorChange(newColor) {
-    onChangeProps({
+    const newProps = {
+      color: newColor
+    };
+
+    // Update the color of the all labels to match the point
+    newProps.labels = labels == null ? void 0 : labels.map(label => _extends({}, label, {
       color: newColor
+    }));
+    onChangeProps(newProps);
+  }
+  function handleLabelChange(updatedLabel, labelIndex) {
+    if (!labels) {
+      return;
+    }
+    const updatedLabels = [...labels];
+    updatedLabels[labelIndex] = _extends({}, labels[labelIndex], updatedLabel);
+    onChangeProps({
+      labels: updatedLabels
+    });
+  }
+  function handleLabelRemove(labelIndex) {
+    if (!labels) {
+      return;
+    }
+    const updatedLabels = labels.filter((_, index) => index !== labelIndex);
+    onChangeProps({
+      labels: updatedLabels
     });
   }
   return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
@@ -32074,7 +32265,37 @@ const LockedVectorSettings = props => {
     onChange: newProps => {
       handleChangePoint(newProps, 1);
     }
-  })), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
+  })), (flags == null || (_flags$mafs = flags["mafs"]) == null ? void 0 : _flags$mafs["locked-vector-labels"]) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: styles$j.horizontalRule
+  }), labels == null ? void 0 : labels.map((label, labelIndex) => /*#__PURE__*/React.createElement(LockedLabelSettings, _extends({}, label, {
+    expanded: true,
+    onChangeProps: newLabel => {
+      handleLabelChange(newLabel, labelIndex);
+    },
+    onRemove: () => {
+      handleLabelRemove(labelIndex);
+    },
+    containerStyle: styles$j.labelContainer
+  }))), /*#__PURE__*/React.createElement(Button, {
+    kind: "tertiary",
+    startIcon: plusCircle,
+    onClick: () => {
+      var _labels$length;
+      // Additional vertical offset for each label so
+      // they don't overlap.
+      const offsetPerLabel = [0, -1];
+      const labelLocation = vec.add(vec.scale(offsetPerLabel, (_labels$length = labels == null ? void 0 : labels.length) != null ? _labels$length : 0), vec.midpoint(tail, tip));
+      const newLabel = _extends({}, getDefaultFigureForType("label"), {
+        coord: labelLocation,
+        // Default to the same color as the vector
+        color: lineColor
+      });
+      onChangeProps({
+        labels: [...(labels != null ? labels : []), newLabel]
+      });
+    },
+    style: styles$j.addButton
+  }, "Add visible label")), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
@@ -32098,6 +32319,18 @@ const styles$j = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
+  },
+  addButton: {
+    alignSelf: "start"
+  },
+  horizontalRule: {
+    marginTop: spacing.small_12,
+    marginBottom: spacing.xxxSmall_4,
+    height: 1,
+    backgroundColor: color.offBlack16
+  },
+  labelContainer: {
+    backgroundColor: color.white
   }
 });