@khanacademy/perseus-editor 14.4.0 → 14.5.0

package/dist/index.js

@@ -27,6 +27,7 @@ var mathInput = require('@khanacademy/math-input');
 var kmath = require('@khanacademy/kmath');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
 var Banner = require('@khanacademy/wonder-blocks-banner');
+var plusCircle = require('@phosphor-icons/core/regular/plus-circle.svg');
 var wonderBlocksAccordion = require('@khanacademy/wonder-blocks-accordion');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
 var caretDoubleDownIcon = require('@phosphor-icons/core/bold/caret-double-down-bold.svg');
@@ -36,7 +37,6 @@ var caretUpIcon = require('@phosphor-icons/core/bold/caret-up-bold.svg');
 var trashIcon = require('@phosphor-icons/core/bold/trash-bold.svg');
 var copyIcon = require('@phosphor-icons/core/assets/regular/copy.svg');
 var autoPasteIcon = require('@phosphor-icons/core/assets/regular/note-pencil.svg');
-var plusCircle = require('@phosphor-icons/core/regular/plus-circle.svg');
 var mafs = require('mafs');
 var arrowFatDown = require('@phosphor-icons/core/regular/arrow-fat-down.svg');
 var arrowFatLeft = require('@phosphor-icons/core/regular/arrow-fat-left.svg');
@@ -78,6 +78,7 @@ var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var KAS__namespace = /*#__PURE__*/_interopNamespace(KAS);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Banner__default = /*#__PURE__*/_interopDefaultLegacy(Banner);
+var plusCircle__default = /*#__PURE__*/_interopDefaultLegacy(plusCircle);
 var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 var caretDoubleDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(caretDoubleDownIcon);
 var caretDoubleUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(caretDoubleUpIcon);
@@ -86,7 +87,6 @@ var caretUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(caretUpIcon);
 var trashIcon__default = /*#__PURE__*/_interopDefaultLegacy(trashIcon);
 var copyIcon__default = /*#__PURE__*/_interopDefaultLegacy(copyIcon);
 var autoPasteIcon__default = /*#__PURE__*/_interopDefaultLegacy(autoPasteIcon);
-var plusCircle__default = /*#__PURE__*/_interopDefaultLegacy(plusCircle);
 var arrowFatDown__default = /*#__PURE__*/_interopDefaultLegacy(arrowFatDown);
 var arrowFatLeft__default = /*#__PURE__*/_interopDefaultLegacy(arrowFatLeft);
 var arrowFatRight__default = /*#__PURE__*/_interopDefaultLegacy(arrowFatRight);
@@ -96,7 +96,7 @@ var arrowCounterClockwise__default = /*#__PURE__*/_interopDefaultLegacy(arrowCou
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "14.4.0";
+const libVersion = "14.5.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -21943,8 +21943,7 @@ class IframeContentRenderer extends React__namespace.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, "*");
@@ -29777,7 +29776,10 @@ function InteractiveGraphDescription(props) {
   }, "Title", /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.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__namespace.createElement(Strut, {
@@ -29789,7 +29791,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
   }))));
@@ -30824,15 +30829,205 @@ const styles$t = aphrodite.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,
+    size,
+    text,
+    expanded,
+    onChangeProps,
+    onMove,
+    onRemove,
+    onToggle,
+    containerStyle
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
+    expanded: expanded,
+    onToggle: onToggle,
+    header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: [styles$s.row, styles$s.accordionHeaderContainer]
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Label (", coord[0], ", ", coord[1], ")"), /*#__PURE__*/React__namespace.createElement(Strut, {
+      size: wonderBlocksTokens.spacing.xSmall_8
+    }), text !== "" && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
+      style: [{
+        backgroundColor: wonderBlocksTokens.color.white,
+        color: perseus.lockedFigureColors[color]
+      }, styles$s.accordionHeader]
+    }, text)),
+    containerStyle: containerStyle
+  }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
+    coord: coord,
+    onChange: newCoords => {
+      onChangeProps({
+        coord: newCoords
+      });
+    },
+    style: styles$s.spaceUnder
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    tag: "label",
+    style: [styles$s.row, styles$s.spaceUnder]
+  }, "TeX", /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xSmall_8
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
+    value: text,
+    placeholder: "ex. x^2 or \\frac{1}{2}",
+    onChange: newValue => onChangeProps({
+      text: newValue
+    })
+  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$s.row
+  }, onMove && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
+    selectedValue: color,
+    onChange: newColor => {
+      onChangeProps({
+        color: newColor
+      });
+    },
+    style: styles$s.spaceUnder
+  }), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.medium_16
+  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    tag: "label",
+    style: styles$s.row
+  }, "size", /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xSmall_8
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.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__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "small",
+    label: "small"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "medium",
+    label: "medium"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "large",
+    label: "large"
+  })))), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
+    figureType: type,
+    onMove: onMove,
+    onRemove: onRemove
+  }));
+}
+const styles$s = aphrodite.StyleSheet.create({
+  accordionHeaderContainer: {
+    // Stop the label summary from wrapping.
+    whiteSpace: "nowrap"
+  },
+  accordionHeader: {
+    padding: wonderBlocksTokens.spacing.xxxSmall_4,
+    marginInlineEnd: wonderBlocksTokens.spacing.xSmall_8,
+    borderRadius: wonderBlocksTokens.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: wonderBlocksTokens.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"), {
+          ...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 wonderStuffCore.UnreachableCaseError(type);
+  }
+}
+
 const {
   InfoTip: InfoTip$c
 } = perseus.components;
 const LockedEllipseSettings = props => {
   const {
+    flags,
     center,
     radius,
     angle,
     color,
+    labels,
     fillStyle,
     strokeStyle,
     expanded,
@@ -30841,9 +31036,52 @@ 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?.map(label => ({
+      ...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?.map(label => ({
+      ...label,
       color: newValue
+    }));
+    onChangeProps(newProps);
+  }
+  function handleLabelChange(updatedLabel, labelIndex) {
+    if (!labels) {
+      return;
+    }
+    const updatedLabels = [...labels];
+    updatedLabels[labelIndex] = {
+      ...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__namespace.createElement(PerseusEditorAccordion, {
@@ -30853,7 +31091,7 @@ const LockedEllipseSettings = props => {
     /*#__PURE__*/
     // Summary: Ellipse, center, radius, color (opacity, dashed)
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$s.row
+      style: styles$r.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Ellipse (${center[0]}, ${center[1]}), radius ${radius[0]}, ${radius[1]}`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(EllipseSwatch, {
@@ -30862,19 +31100,17 @@ const LockedEllipseSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$s.row
+    style: styles$r.row
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: center,
-    style: styles$s.spaceUnder,
-    onChange: newCoords => onChangeProps({
-      center: newCoords
-    })
+    style: styles$r.spaceUnder,
+    onChange: handleCenterChange
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$s.spaceUnder
+    style: styles$r.spaceUnder
   }, /*#__PURE__*/React__namespace.createElement(InfoTip$c, null, "The coordinates for the center of the ellipse."))), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: radius,
     labels: ["x radius", "y radius"],
-    style: styles$s.spaceUnder,
+    style: styles$r.spaceUnder,
     onChange: newCoords => onChangeProps({
       radius: newCoords
     })
@@ -30886,7 +31122,7 @@ const LockedEllipseSettings = props => {
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xSmall_8
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$s.row, styles$s.spaceUnder]
+    style: [styles$r.row, styles$r.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30894,7 +31130,7 @@ const LockedEllipseSettings = props => {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$s.row, styles$s.truncatedWidth]
+    style: [styles$r.row, styles$r.truncatedWidth]
   }, "fill", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30914,13 +31150,40 @@ const LockedEllipseSettings = props => {
     onChange: value => onChangeProps({
       strokeStyle: value
     })
-  }), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
+  }), flags?.["mafs"]?.["locked-ellipse-labels"] && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, labels?.map((label, labelIndex) => /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, _extends({}, label, {
+    expanded: true,
+    onChangeProps: newLabel => {
+      handleLabelChange(newLabel, labelIndex);
+    },
+    onRemove: () => {
+      handleLabelRemove(labelIndex);
+    },
+    containerStyle: styles$r.labelContainer
+  }))), /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+    kind: "tertiary",
+    startIcon: plusCircle__default["default"],
+    onClick: () => {
+      const newLabel = {
+        ...getDefaultFigureForType("label"),
+        coord: [center[0],
+        // Additional vertical offset for each
+        // label so they don't overlap.
+        center[1] - (labels?.length ?? 0)],
+        // Default to the same color as the ellipse
+        color: color
+      };
+      onChangeProps({
+        labels: [...(labels ?? []), newLabel]
+      });
+    },
+    style: styles$r.addButton
+  }, "Add visible label")), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
   }));
 };
-const styles$s = aphrodite.StyleSheet.create({
+const styles$r = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30932,24 +31195,30 @@ const styles$s = aphrodite.StyleSheet.create({
   truncatedWidth: {
     // Allow truncation, stop bleeding over the edge.
     minWidth: 0
-  }
-});
-
-const LineSwatch = props => {
+  },
+  addButton: {
+    alignSelf: "start"
+  },
+  labelContainer: {
+    backgroundColor: wonderBlocksTokens.color.white
+  }
+});
+
+const LineSwatch = props => {
   const {
     color,
     lineStyle
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$r.container
+    style: styles$q.container
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, ${lineStyle}`,
-    style: [styles$r.lineSwatch, {
+    style: [styles$q.lineSwatch, {
       border: `5px ${lineStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }));
 };
-const styles$r = aphrodite.StyleSheet.create({
+const styles$q = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: wonderBlocksTokens.color.white,
     justifyContent: "center",
@@ -30967,19 +31236,15 @@ 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 => {
   const {
+    flags,
     color: lineColor,
     strokeStyle,
     equation,
     directionalAxis,
     domain,
+    labels,
     onChangeProps,
     onMove,
     onRemove
@@ -31030,13 +31295,47 @@ 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?.map(label => ({
+      ...label,
+      color: newValue
+    }));
+    onChangeProps(newProps);
+  }
+  function handleLabelChange(updatedLabel, labelIndex) {
+    if (!labels) {
+      return;
+    }
+    const updatedLabels = [...labels];
+    updatedLabels[labelIndex] = {
+      ...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__namespace.createElement(PerseusEditorAccordion, {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$q.row
+      style: styles$p.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
-      style: styles$q.accordionHeader
+      style: styles$p.accordionHeader
     }, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
@@ -31044,12 +31343,10 @@ const LockedFunctionSettings = props => {
       lineStyle: strokeStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$q.row, styles$q.spaceUnder]
+    style: [styles$p.row, styles$p.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: lineColor,
-    onChange: newValue => {
-      handlePropChange("color", newValue);
-    }
+    onChange: handleColorChange
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.small_12
   }), /*#__PURE__*/React__namespace.createElement(LineStrokeSelect, {
@@ -31058,14 +31355,14 @@ const LockedFunctionSettings = props => {
       handlePropChange("strokeStyle", newValue);
     }
   })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$q.row, styles$q.rowSpace]
+    style: [styles$p.row, styles$p.rowSpace]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.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: ""
@@ -31084,17 +31381,17 @@ const LockedFunctionSettings = props => {
     onChange: newValue => {
       handlePropChange("equation", newValue);
     },
-    style: [styles$q.textField]
+    style: [styles$p.textField]
   })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$q.row, styles$q.rowSpace]
+    style: [styles$p.row, styles$p.rowSpace]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$q.dropdownLabel, styles$q.domainMin]
+    style: [styles$p.dropdownLabel, styles$p.domainMin]
   }, `${domainRangeText} min`, /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     type: "number",
-    style: styles$q.domainMinField,
+    style: styles$p.domainMinField,
     value: domainEntries[0],
     onChange: newValue => {
       handleDomainChange(0, newValue);
@@ -31104,12 +31401,12 @@ const LockedFunctionSettings = props => {
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
     "aria-label": `${domainRangeText} max`,
-    style: [styles$q.dropdownLabel, styles$q.domainMax]
+    style: [styles$p.dropdownLabel, styles$p.domainMax]
   }, "max", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     type: "number",
-    style: styles$q.domainMaxField,
+    style: styles$p.domainMaxField,
     value: domainEntries[1],
     onChange: newValue => {
       handleDomainChange(1, newValue);
@@ -31117,11 +31414,11 @@ const LockedFunctionSettings = props => {
   }))), /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Example Functions"),
     expanded: false,
-    containerStyle: styles$q.exampleWorkspace,
-    panelStyle: styles$q.exampleAccordionPanel
+    containerStyle: styles$p.exampleWorkspace,
+    panelStyle: styles$p.exampleAccordionPanel
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$q.dropdownLabel
+    style: styles$p.dropdownLabel
   }, "Choose a category", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -31135,13 +31432,41 @@ const LockedFunctionSettings = props => {
       label: category
     });
   }))), exampleCategorySelected && /*#__PURE__*/React__namespace.createElement("ul", {
-    className: aphrodite.css(styles$q.exampleContainer)
+    className: aphrodite.css(styles$p.exampleContainer)
   }, exampleContent.map((example, index) => /*#__PURE__*/React__namespace.createElement(ExampleItem, {
     category: exampleCategory,
     example: example,
     index: index,
     pasteEquationFn: handlePropChange
-  })))), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
+  })))), flags?.["mafs"]?.["locked-function-labels"] && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$p.horizontalRule
+  }), labels?.map((label, labelIndex) => /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, _extends({}, label, {
+    expanded: true,
+    onChangeProps: newLabel => {
+      handleLabelChange(newLabel, labelIndex);
+    },
+    onRemove: () => {
+      handleLabelRemove(labelIndex);
+    },
+    containerStyle: styles$p.labelContainer
+  }))), /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+    kind: "tertiary",
+    startIcon: plusCircle__default["default"],
+    onClick: () => {
+      const newLabel = {
+        ...getDefaultFigureForType("label"),
+        // Vertical offset for each label so they
+        // don't overlap.
+        coord: [0, -(labels?.length ?? 0)],
+        // Default to the same color as the function
+        color: lineColor
+      };
+      onChangeProps({
+        labels: [...(labels ?? []), newLabel]
+      });
+    },
+    style: styles$p.addButton
+  }, "Add visible label")), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
@@ -31157,29 +31482,29 @@ const ExampleItem = props => {
   const exampleId = React.useId();
   return /*#__PURE__*/React__namespace.createElement("li", {
     key: `${category}-${index}`,
-    className: aphrodite.css(styles$q.exampleRow)
+    className: aphrodite.css(styles$p.exampleRow)
   }, /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: autoPasteIcon__default["default"],
     "aria-label": "paste example",
     "aria-describedby": exampleId,
     onClick: () => pasteEquationFn("equation", example),
     size: "medium",
-    style: styles$q.copyPasteButton
+    style: styles$p.copyPasteButton
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: copyIcon__default["default"],
     "aria-label": "copy example",
     "aria-describedby": exampleId,
     onClick: () => navigator.clipboard.writeText(example),
     size: "medium",
-    style: styles$q.copyPasteButton
+    style: styles$p.copyPasteButton
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxxSmall_4
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$q.exampleContent,
+    style: styles$p.exampleContent,
     id: exampleId
   }, example));
 };
-const styles$q = aphrodite.StyleSheet.create({
+const styles$p = aphrodite.StyleSheet.create({
   accordionHeader: {
     textOverflow: "ellipsis",
     // A maximum width needs to be specified in order for the ellipsis to work.
@@ -31270,125 +31595,19 @@ const styles$q = aphrodite.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,
-    size,
-    text,
-    expanded,
-    onChangeProps,
-    onMove,
-    onRemove,
-    onToggle,
-    containerStyle
-  } = props;
-  return /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
-    expanded: expanded,
-    onToggle: onToggle,
-    header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$p.row, styles$p.accordionHeaderContainer]
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Label (", coord[0], ", ", coord[1], ")"), /*#__PURE__*/React__namespace.createElement(Strut, {
-      size: wonderBlocksTokens.spacing.xSmall_8
-    }), text !== "" && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
-      style: [{
-        backgroundColor: wonderBlocksTokens.color.white,
-        color: perseus.lockedFigureColors[color]
-      }, styles$p.accordionHeader]
-    }, text)),
-    containerStyle: containerStyle
-  }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
-    coord: coord,
-    onChange: newCoords => {
-      onChangeProps({
-        coord: newCoords
-      });
-    },
-    style: styles$p.spaceUnder
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    tag: "label",
-    style: [styles$p.row, styles$p.spaceUnder]
-  }, "TeX", /*#__PURE__*/React__namespace.createElement(Strut, {
-    size: wonderBlocksTokens.spacing.xSmall_8
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
-    value: text,
-    placeholder: "ex. x^2 or \\frac{1}{2}",
-    onChange: newValue => onChangeProps({
-      text: newValue
-    })
-  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$p.row
-  }, onMove && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
-    selectedValue: color,
-    onChange: newColor => {
-      onChangeProps({
-        color: newColor
-      });
-    },
-    style: styles$p.spaceUnder
-  }), /*#__PURE__*/React__namespace.createElement(Strut, {
-    size: wonderBlocksTokens.spacing.medium_16
-  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    tag: "label",
-    style: styles$p.row
-  }, "size", /*#__PURE__*/React__namespace.createElement(Strut, {
-    size: wonderBlocksTokens.spacing.xSmall_8
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.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__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    value: "small",
-    label: "small"
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    value: "medium",
-    label: "medium"
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    value: "large",
-    label: "large"
-  })))), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
-    figureType: type,
-    onMove: onMove,
-    onRemove: onRemove
-  }));
-}
-const styles$p = aphrodite.StyleSheet.create({
-  accordionHeaderContainer: {
-    // Stop the label summary from wrapping.
-    whiteSpace: "nowrap"
   },
-  accordionHeader: {
-    padding: wonderBlocksTokens.spacing.xxxSmall_4,
-    marginInlineEnd: wonderBlocksTokens.spacing.xSmall_8,
-    borderRadius: wonderBlocksTokens.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: wonderBlocksTokens.spacing.small_12,
+    marginBottom: wonderBlocksTokens.spacing.xxxSmall_4,
+    height: 1,
+    backgroundColor: wonderBlocksTokens.color.offBlack16
   },
-  spaceUnder: {
-    marginBottom: wonderBlocksTokens.spacing.xSmall_8
+  labelContainer: {
+    backgroundColor: wonderBlocksTokens.color.white
   }
 });
 
@@ -31421,77 +31640,6 @@ const styles$o = aphrodite.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"), {
-          ...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 wonderStuffCore.UnreachableCaseError(type);
-  }
-}
-
 const LockedPointSettings = props => {
   const {
     flags,
@@ -31516,10 +31664,12 @@ const LockedPointSettings = props => {
     };
 
     // Update the color of the all labels to match the point
-    newProps.labels = labels.map(label => ({
-      ...label,
-      color: newValue
-    }));
+    if (labels) {
+      newProps.labels = labels.map(label => ({
+        ...label,
+        color: newValue
+      }));
+    }
     onChangeProps(newProps);
   }
   function handleCoordChange(newCoord) {
@@ -31530,13 +31680,18 @@ const LockedPointSettings = props => {
     };
 
     // Update the coord by the same amount as the point for all labels
-    newProps.labels = labels.map(label => ({
-      ...label,
-      coord: [label.coord[0] + xOffset, label.coord[1] + yOffset]
-    }));
+    if (labels) {
+      newProps.labels = labels.map(label => ({
+        ...label,
+        coord: [label.coord[0] + xOffset, label.coord[1] + yOffset]
+      }));
+    }
     onChangeProps(newProps);
   }
   function handleLabelChange(updatedLabel, labelIndex) {
+    if (!labels) {
+      return;
+    }
     const updatedLabels = [...labels];
     updatedLabels[labelIndex] = {
       ...labels[labelIndex],
@@ -31547,6 +31702,9 @@ const LockedPointSettings = props => {
     });
   }
   function handleLabelRemove(labelIndex) {
+    if (!labels) {
+      return;
+    }
     const updatedLabels = labels.filter((_, index) => index !== labelIndex);
     onChangeProps({
       labels: updatedLabels
@@ -31589,7 +31747,7 @@ const LockedPointSettings = props => {
         filled: !newValue
       });
     }
-  })), (!isDefiningPoint && flags?.["mafs"]?.["locked-point-labels"] || isDefiningPoint && flags?.["mafs"]?.["locked-line-labels"]) && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, labels.map((label, labelIndex) => /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, _extends({}, label, {
+  })), (!isDefiningPoint && flags?.["mafs"]?.["locked-point-labels"] || isDefiningPoint && flags?.["mafs"]?.["locked-line-labels"]) && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, labels?.map((label, labelIndex) => /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, _extends({}, label, {
     containerStyle: !isDefiningPoint && styles$n.lockedPointLabelContainer,
     expanded: true,
     onChangeProps: newLabel => {
@@ -31610,12 +31768,12 @@ const LockedPointSettings = props => {
         coord: [coord[0] + 0.5,
         // Additional offset for each label so
         // they don't overlap.
-        coord[1] - 1 * labels?.length],
+        coord[1] - 1 * (labels?.length ?? 0)],
         // Default to the same color as the point
         color: pointColor
       };
       onChangeProps({
-        labels: [...labels, newLabel]
+        labels: [...(labels ?? []), newLabel]
       });
     },
     style: styles$n.addButton
@@ -31688,7 +31846,7 @@ const LockedLineSettings = props => {
     const oldMidpoint = mafs.vec.midpoint(points[0].coord, points[1].coord);
     const newMidpoint = mafs.vec.midpoint(newPoints[0].coord, newPoints[1].coord);
     const offset = [newMidpoint[0] - oldMidpoint[0], newMidpoint[1] - oldMidpoint[1]];
-    const newLabels = labels.map((label, labelIndex) => ({
+    const newLabels = labels?.map((label, labelIndex) => ({
       ...label,
       coord: [label.coord[0] + offset[0], label.coord[1] + offset[1]]
     }));
@@ -31698,7 +31856,7 @@ const LockedLineSettings = props => {
     });
   }
   function handleColorChange(newColor) {
-    const newLabels = labels.map(label => ({
+    const newLabels = labels?.map(label => ({
       ...label,
       color: newColor
     }));
@@ -31708,14 +31866,14 @@ const LockedLineSettings = props => {
       points: [{
         ...point1,
         color: newColor,
-        labels: point1.labels.map(label => ({
+        labels: point1.labels?.map(label => ({
           ...label,
           color: newColor
         }))
       }, {
         ...point2,
         color: newColor,
-        labels: point2.labels.map(label => ({
+        labels: point2.labels?.map(label => ({
           ...label,
           color: newColor
         }))
@@ -31725,6 +31883,9 @@ const LockedLineSettings = props => {
     });
   }
   function handleLabelChange(updatedLabel, labelIndex) {
+    if (!labels) {
+      return;
+    }
     const updatedLabels = [...labels];
     updatedLabels[labelIndex] = {
       ...labels[labelIndex],
@@ -31735,6 +31896,9 @@ const LockedLineSettings = props => {
     });
   }
   function handleLabelRemove(labelIndex) {
+    if (!labels) {
+      return;
+    }
     const updatedLabels = labels.filter((_, index) => index !== labelIndex);
     onChangeProps({
       labels: updatedLabels
@@ -31811,7 +31975,7 @@ const LockedLineSettings = props => {
     onChangeProps: newProps => handleChangePoint(newProps, 1)
   })), flags?.["mafs"]?.["locked-line-labels"] && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: styles$m.horizontalRule
-  }), labels.map((label, labelIndex) => /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, _extends({}, label, {
+  }), labels?.map((label, labelIndex) => /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, _extends({}, label, {
     expanded: true,
     onChangeProps: newLabel => {
       handleLabelChange(newLabel, labelIndex);
@@ -31827,15 +31991,15 @@ const LockedLineSettings = props => {
       // Additional vertical offset for each label so
       // they don't overlap.
       const offsetPerLabel = [0, -1];
-      const labelLocation = mafs.vec.add(mafs.vec.scale(offsetPerLabel, labels.length), mafs.vec.midpoint(points[0].coord, points[1].coord));
+      const labelLocation = mafs.vec.add(mafs.vec.scale(offsetPerLabel, labels?.length ?? 0), mafs.vec.midpoint(points[0].coord, points[1].coord));
       const newLabel = {
         ...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 ?? []), newLabel]
       });
     },
     style: styles$m.addButton
@@ -32130,17 +32294,13 @@ const styles$k = aphrodite.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 => {
   const {
+    flags,
     points,
     color: lineColor,
+    labels,
     onChangeProps,
     onMove,
     onRemove
@@ -32154,14 +32314,53 @@ const LockedVectorSettings = props => {
     if (typeof newCoord !== "undefined") {
       const newPoints = [...points];
       newPoints[index] = [...newCoord];
+
+      // Update labels to match the new points
+      const oldMidpoint = mafs.vec.midpoint(tail, tip);
+      const newMidpoint = mafs.vec.midpoint(newPoints[0], newPoints[1]);
+      const offset = mafs.vec.sub(newMidpoint, oldMidpoint);
+      const newLabels = labels?.map(label => ({
+        ...label,
+        coord: mafs.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?.map(label => ({
+      ...label,
+      color: newColor
+    }));
+    onChangeProps(newProps);
+  }
+  function handleLabelChange(updatedLabel, labelIndex) {
+    if (!labels) {
+      return;
+    }
+    const updatedLabels = [...labels];
+    updatedLabels[labelIndex] = {
+      ...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__namespace.createElement(PerseusEditorAccordion, {
@@ -32210,7 +32409,37 @@ const LockedVectorSettings = props => {
     onChange: newProps => {
       handleChangePoint(newProps, 1);
     }
-  })), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
+  })), flags?.["mafs"]?.["locked-vector-labels"] && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$j.horizontalRule
+  }), labels?.map((label, labelIndex) => /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, _extends({}, label, {
+    expanded: true,
+    onChangeProps: newLabel => {
+      handleLabelChange(newLabel, labelIndex);
+    },
+    onRemove: () => {
+      handleLabelRemove(labelIndex);
+    },
+    containerStyle: styles$j.labelContainer
+  }))), /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+    kind: "tertiary",
+    startIcon: plusCircle__default["default"],
+    onClick: () => {
+      // Additional vertical offset for each label so
+      // they don't overlap.
+      const offsetPerLabel = [0, -1];
+      const labelLocation = mafs.vec.add(mafs.vec.scale(offsetPerLabel, labels?.length ?? 0), mafs.vec.midpoint(tail, tip));
+      const newLabel = {
+        ...getDefaultFigureForType("label"),
+        coord: labelLocation,
+        // Default to the same color as the vector
+        color: lineColor
+      };
+      onChangeProps({
+        labels: [...(labels ?? []), newLabel]
+      });
+    },
+    style: styles$j.addButton
+  }, "Add visible label")), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
@@ -32234,6 +32463,18 @@ const styles$j = aphrodite.StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
+  },
+  addButton: {
+    alignSelf: "start"
+  },
+  horizontalRule: {
+    marginTop: wonderBlocksTokens.spacing.small_12,
+    marginBottom: wonderBlocksTokens.spacing.xxxSmall_4,
+    height: 1,
+    backgroundColor: wonderBlocksTokens.color.offBlack16
+  },
+  labelContainer: {
+    backgroundColor: wonderBlocksTokens.color.white
   }
 });