@khanacademy/perseus 24.2.0 → 25.0.0

package/dist/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var KAS = require('@khanacademy/kas');
 var mathInput = require('@khanacademy/math-input');
+var perseusCore = require('@khanacademy/perseus-core');
 var PerseusLinter = require('@khanacademy/perseus-linter');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var Tooltip$1 = require('@khanacademy/wonder-blocks-tooltip');
@@ -40,7 +41,6 @@ var Switch = require('@khanacademy/wonder-blocks-switch');
 var Pill = require('@khanacademy/wonder-blocks-pill');
 var reactPopper = require('react-popper');
 var Link = require('@khanacademy/wonder-blocks-link');
-var perseusCore = require('@khanacademy/perseus-core');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -803,52 +803,9 @@ var dependencies = /*#__PURE__*/Object.freeze({
 // TODO(LP-11481): Change the primary API we use for logging in Perseus to use
 // getDependencies() internally... simplify usage to just using a "singleton"
 // which get's the injected logger.
-/**
- * @typedef {Object} Errors utility for referencing the Perseus error taxonomy.
- */
-const Errors = Object.freeze({
-  /**
-   * @property {ErrorKind} Unknown The kind of error is not known.
-   */
-  Unknown: "Unknown",
-  /**
-   * @property {ErrorKind} Internal The error is internal to the executing code.
-   */
-  Internal: "Internal",
-  /**
-   * @property {ErrorKind} InvalidInput There was a problem with the provided
-   * input, such as the wrong format or a null value.
-   */
-  InvalidInput: "InvalidInput",
-  /**
-   * @property {ErrorKind} NotAllowed There was a problem due to the state of
-   * the system not matching the requested operation or input. For example,
-   * trying to create a username that is valid, but is already taken by
-   * another user. Use {@link InvalidInput} instead when the input isn't
-   * valid regardless of the state of the system. Use {@link NotFound} when
-   * the failure is due to not being able to find a resource.
-   */
-  NotAllowed: "NotAllowed",
-  /**
-   * @property {ErrorKind} TransientService There was a problem when making a
-   * request to a service.
-   */
-  TransientService: "TransientService",
-  /**
-   * @property {ErrorKind} Service There was a non-transient problem when
-   * making a request to service.
-   */
-  Service: "Service"
-});
-
-/**
- * @type {ErrorKind} The kind of error being reported
- */
-
 /**
  * Provides logging infrastructure for Perseus
  */
-
 const Log = {
   // Logs a message
   log: (message, extra) => {
@@ -860,16 +817,6 @@ const Log = {
   }
 };
 
-class PerseusError extends Error {
-  kind;
-  metadata;
-  constructor(message, kind, options) {
-    super(message);
-    this.kind = kind;
-    this.metadata = options?.metadata;
-  }
-}
-
 /**
  * These are things that widgets should exclude when serializing themselves.
  *
@@ -973,9 +920,9 @@ const change = function (newPropsOrSinglePropName, propValue, callback) {
     // string propName
     propValue, callback);
   }
-  throw new PerseusError("Invalid types sent to this.change(): " +
+  throw new perseusCore.PerseusError("Invalid types sent to this.change(): " +
   // eslint-disable-next-line prefer-rest-params
-  ___default["default"].toArray(arguments).join() + "\n" + USAGE, Errors.Internal);
+  ___default["default"].toArray(arguments).join() + "\n" + USAGE, perseusCore.Errors.Internal);
 };
 const propTypes = {
   onChange: PropTypes__default["default"].func.isRequired
@@ -2148,9 +2095,9 @@ const KhanAnswerTypes = {
     parseSolution: function (solutionString, options) {
       let solution = KAS__namespace.parse(solutionString, options);
       if (!solution.parsed) {
-        throw new PerseusError("The provided solution (" + solutionString + ") didn't parse.", Errors.InvalidInput);
+        throw new perseusCore.PerseusError("The provided solution (" + solutionString + ") didn't parse.", perseusCore.Errors.InvalidInput);
       } else if (options.simplified && !solution.expr.isSimplified()) {
-        throw new PerseusError("The provided solution (" + solutionString + ") isn't fully expanded and simplified.", Errors.InvalidInput);
+        throw new perseusCore.PerseusError("The provided solution (" + solutionString + ") isn't fully expanded and simplified.", perseusCore.Errors.InvalidInput);
       } else {
         solution = solution.expr;
       }
@@ -2341,7 +2288,7 @@ class Expression extends React__namespace.Component {
       // in the function variables list for the expression.
       if (!expression.parsed) {
         /* c8 ignore next */
-        Log.error("Unable to parse solution answer for expression", Errors.InvalidInput, {
+        Log.error("Unable to parse solution answer for expression", perseusCore.Errors.InvalidInput, {
           loggedMetadata: {
             rubric: JSON.stringify(rubric)
           }
@@ -3032,7 +2979,7 @@ function combineScores(scoreA, scoreB) {
    * The above checks cover all combinations of score type, so if we get here
    * then something is amiss with our inputs.
    */
-  throw new PerseusError("PerseusScore with unknown type encountered", Errors.InvalidInput, {
+  throw new perseusCore.PerseusError("PerseusScore with unknown type encountered", perseusCore.Errors.InvalidInput, {
     metadata: {
       scoreA: JSON.stringify(scoreA),
       scoreB: JSON.stringify(scoreB)
@@ -3062,9 +3009,9 @@ function keScoreFromPerseusScore(score, guess, state) {
       state: state
     };
   }
-  throw new PerseusError(
+  throw new perseusCore.PerseusError(
   // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
-  "Invalid score type: " + score.type, Errors.InvalidInput, {
+  "Invalid score type: " + score.type, perseusCore.Errors.InvalidInput, {
     metadata: {
       score: JSON.stringify(score),
       guess: JSON.stringify(guess),
@@ -4433,7 +4380,7 @@ const MovableHelperMethods = {
         return memo;
       }
       // Anything else is an error
-      throw new PerseusError("Constraint returned invalid result: " + result, Errors.Internal);
+      throw new perseusCore.PerseusError("Constraint returned invalid result: " + result, perseusCore.Errors.Internal);
     }, current, this);
   },
   /**
@@ -4539,7 +4486,7 @@ const FUNCTION_ARRAY_OPTIONS = ["add", "modify", "draw", "remove", "constraints"
 const InteractiveUtil = {
   assert: function (isTrue, message) {
     if (!isTrue) {
-      throw new PerseusError("Assertion Error" + (message ? ": " + message : ""), Errors.Internal);
+      throw new perseusCore.PerseusError("Assertion Error" + (message ? ": " + message : ""), perseusCore.Errors.Internal);
     }
   },
   /**
@@ -9068,7 +9015,7 @@ var Tex$1 = {
 const {
   processMath: processMath$1
 } = Tex$1;
-function polar(r, th) {
+function polar$1(r, th) {
   if (typeof r === "number") {
     r = [r, r];
   }
@@ -9120,7 +9067,7 @@ class Graphie$1 {
     // TODO(jeremy): This can be removed once we're confident that callers
     // obey the Typescript types.
     if (options.range == null) {
-      throw new PerseusError("range should be specified in graph init", Errors.Internal);
+      throw new perseusCore.PerseusError("range should be specified in graph init", perseusCore.Errors.Internal);
     }
     this.#bounds = new GraphBounds(...options.range);
     this.#drawingTransform = new DrawingTransform(this.raphael, scale, this.bounds());
@@ -9404,8 +9351,8 @@ class Graphie$1 {
       endAngle = (endAngle % 360 + 360) % 360;
       const cent = this.scalePoint(center);
       const radii = this.scaleVector(radius);
-      const startVector = polar(radius, startAngle);
-      const endVector = polar(radius, endAngle);
+      const startVector = polar$1(radius, startAngle);
+      const endVector = polar$1(radius, endAngle);
 
       // We round the coordinates to make testing easier, because trig
       // operations return unround numbers.
@@ -13707,7 +13654,7 @@ function MovableAngle(graphie, options) {
 
   // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
   if (!this.points || this.points.length !== 3) {
-    throw new PerseusError("MovableAngle requires 3 points", Errors.InvalidInput);
+    throw new perseusCore.PerseusError("MovableAngle requires 3 points", perseusCore.Errors.InvalidInput);
   }
 
   // Handle coordinates that are not MovablePoints (i.e. [2, 4])
@@ -13834,7 +13781,7 @@ ___default["default"].extend(MovableAngle.prototype, {
           let angle = GraphUtils.findAngle(newPoint, vertex);
           angle = Math.round((angle - snapOffset) / snap) * snap + snapOffset;
           const distance = GraphUtils.getDistance(newPoint, vertex);
-          return kmath.vector.add(vertex, polar(distance, angle));
+          return kmath.vector.add(vertex, polar$1(distance, angle));
         }
         return true;
       };
@@ -13998,9 +13945,9 @@ function GraphieMovable$1(descriptor) {
   ___default["default"].extend(this, descriptor);
 }
 const abstractMethod = function () {
-  throw new PerseusError("Abstract method! Must be implemented by Graphie Movable" +
+  throw new perseusCore.PerseusError("Abstract method! Must be implemented by Graphie Movable" +
   // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-  this.constructor.displayName, Errors.NotAllowed);
+  this.constructor.displayName, perseusCore.Errors.NotAllowed);
 };
 ___default["default"].extend(GraphieMovable$1.prototype, {
   movableProps: [],
@@ -14040,7 +13987,7 @@ const createClass = function (spec) {
   const GraphieClass = function (props) {
     // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
     if (!(this instanceof GraphieClass)) {
-      throw new PerseusError("Use createElement or JSX with graphie movables", Errors.NotAllowed);
+      throw new perseusCore.PerseusError("Use createElement or JSX with graphie movables", perseusCore.Errors.NotAllowed);
     }
     // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
     this.props = rewriteProps(props, props.children || []);
@@ -14359,7 +14306,7 @@ class Movable {
         return memo;
       }
       // Anything else is an error
-      throw new PerseusError("Constraint returned invalid result: " + result, Errors.Internal);
+      throw new perseusCore.PerseusError("Constraint returned invalid result: " + result, perseusCore.Errors.Internal);
     }, current);
   }
 
@@ -15709,7 +15656,7 @@ class MovablePoint$4 {
         return memo;
       }
       // Anything else is an error
-      throw new PerseusError("Constraint returned invalid result: " + result, Errors.Internal);
+      throw new perseusCore.PerseusError("Constraint returned invalid result: " + result, perseusCore.Errors.Internal);
     }, current);
   }
 
@@ -16794,7 +16741,7 @@ const Path = GraphieClasses.createClass({
     this.path.toFront();
   }
 });
-const Arc = GraphieClasses.createSimpleClass((graphie, props) => {
+const Arc$1 = GraphieClasses.createSimpleClass((graphie, props) => {
   let center = props.center;
   let radius = props.radius;
   if (props.unscaled) {
@@ -16810,7 +16757,7 @@ const Rect$1 = GraphieClasses.createSimpleClass((graphie, props) => {
   return graphie.rect(props.x, props.y, props.width, props.height, props.style);
 });
 var Movables = {
-  Arc: Arc,
+  Arc: Arc$1,
   Circle: Circle,
   Label: Label$1,
   Line: Line$3,
@@ -16864,7 +16811,7 @@ class Graphie extends React__namespace.Component {
     // would have horrible performance implications. In order to avoid
     // those, we just warn here.
     if (this.props.setup !== prevProps.setup) {
-      Log.error("<Graphie> was given a new setup function. " + "This is a bad idea; please refactor your code to give " + "the same setup function reference to <Graphie> on " + "every render.", Errors.Internal);
+      Log.error("<Graphie> was given a new setup function. " + "This is a bad idea; please refactor your code to give " + "the same setup function reference to <Graphie> on " + "every render.", perseusCore.Errors.Internal);
     }
     if (!deepEq$2(this.props.options, prevProps.options) || !deepEq$2(this.props.box, prevProps.box) || !deepEq$2(this.props.range, prevProps.range)) {
       this._setupGraphie();
@@ -17043,7 +16990,7 @@ class Graphie extends React__namespace.Component {
         // This generally is a bad idea, so warn about it if this
         // is being caused by implicit keys
         if (keyProp == null) {
-          Log.error("Replacing a <Graphie> child with a " + "child of a different type. Please add keys " + "to your <Graphie> children", Errors.Internal);
+          Log.error("Replacing a <Graphie> child with a " + "child of a different type. Please add keys " + "to your <Graphie> children", perseusCore.Errors.Internal);
         }
         prevMovable.remove();
         child.add(graphie);
@@ -17320,7 +17267,7 @@ function getLocalizedDataUrl(url) {
 function getUrlHash(url) {
   const match = url.match(hashRegex);
   if (match == null) {
-    throw new PerseusError("not a valid URL", Errors.InvalidInput);
+    throw new perseusCore.PerseusError("not a valid URL", perseusCore.Errors.InvalidInput);
   }
   return match && match[1];
 }
@@ -17457,7 +17404,7 @@ class SvgImage extends React__namespace.Component {
           // If there is isn't any localized data, fall back to
           // the original, unlocalized data
           retrieveData(Util.getDataUrl(this.props.src), (x, status, error) => {
-            Log.error("Data load failed for svg-image", Errors.Service, {
+            Log.error("Data load failed for svg-image", perseusCore.Errors.Service, {
               cause: error,
               loggedMetadata: {
                 dataUrl: Util.getDataUrl(this.props.src),
@@ -17468,7 +17415,7 @@ class SvgImage extends React__namespace.Component {
         });
       } else {
         retrieveData(Util.getDataUrl(this.props.src), (x, status, error) => {
-          Log.error("Data load failed for svg-image", Errors.Service, {
+          Log.error("Data load failed for svg-image", perseusCore.Errors.Service, {
             cause: error,
             loggedMetadata: {
               dataUrl: Util.getDataUrl(this.props.src),
@@ -17720,7 +17667,7 @@ class SvgImage extends React__namespace.Component {
       } else if (this.state.imageDimensions) {
         box = [this.state.imageDimensions[0] * this.props.scale, this.state.imageDimensions[1] * this.props.scale];
       } else {
-        throw new PerseusError("svg-image has no dimensions", Errors.InvalidInput, {
+        throw new perseusCore.PerseusError("svg-image has no dimensions", perseusCore.Errors.InvalidInput, {
           metadata: {
             src: this.props.src
           }
@@ -18148,7 +18095,7 @@ class ErrorBoundary extends React__namespace.Component {
     // differentiate between the different errors that are thrown, they
     // all end up being grouped as a single Sentry event, which is very
     // unhelpful.
-    "Unhandled Perseus error: " + error.message, Errors.Internal, {
+    "Unhandled Perseus error: " + error.message, perseusCore.Errors.Internal, {
       cause: error,
       loggedMetadata: {
         componentStack: !!info && "componentStack" in info ? info.componentStack : "componentStack not provided",
@@ -19201,7 +19148,7 @@ const replaceWidget = (name, replacementName) => {
   // that doesn't exist at all.
   if (!substituteWidget) {
     const errorMsg = `Failed to replace ${name} with ${replacementName}`;
-    throw new PerseusError(errorMsg, Errors.Internal);
+    throw new perseusCore.PerseusError(errorMsg, perseusCore.Errors.Internal);
   }
   registerWidget(name, substituteWidget);
 };
@@ -19215,7 +19162,7 @@ const replaceDeprecatedWidgets = () => {
 const registerEditors = editorsToRegister => {
   editorsToRegister.forEach(editor => {
     if (!editor.widgetName) {
-      throw new PerseusError(`Editor ${editor.displayName} doesn't have a widgetName property`, Errors.Internal);
+      throw new perseusCore.PerseusError(`Editor ${editor.displayName} doesn't have a widgetName property`, perseusCore.Errors.Internal);
     }
     editors[editor.widgetName] = editor;
   });
@@ -19233,7 +19180,7 @@ const replaceEditor = (name, replacementName) => {
   const substituteEditor = editors[replacementName];
   if (!substituteEditor && Log) {
     const errorMsg = `Failed to replace editor ${name} with ${replacementName}`;
-    Log.error(errorMsg, Errors.Internal);
+    Log.error(errorMsg, perseusCore.Errors.Internal);
     return;
   }
   editors[name] = substituteEditor;
@@ -19307,7 +19254,7 @@ const upgradeWidgetInfoToLatestVersion = oldWidgetInfo => {
   // suspect we have legacy data (potentially unpublished) and we should
   // figure that out before depending solely on types.
   if (!___default["default"].isString(type)) {
-    throw new PerseusError("widget type must be a string, but was: " + type, Errors.Internal);
+    throw new perseusCore.PerseusError("widget type must be a string, but was: " + type, perseusCore.Errors.Internal);
   }
   const widgetExports = widgets[type];
   if (widgetExports == null) {
@@ -19358,7 +19305,7 @@ const upgradeWidgetInfoToLatestVersion = oldWidgetInfo => {
         // This is a Log.error because it is unlikely to be hit in
         // local testing, and a Log.error is slightly less scary in
         // prod than a `throw new Error`
-        Log.error("No upgrade found for widget. Cannot render.", Errors.Internal, {
+        Log.error("No upgrade found for widget. Cannot render.", perseusCore.Errors.Internal, {
           loggedMetadata: {
             type,
             fromMajorVersion: nextVersion - 1,
@@ -19431,7 +19378,7 @@ const getRendererPropsForWidgetInfo = (widgetInfo, strings, problemNum) => {
 };
 const traverseChildWidgets$3 = (widgetInfo, traverseRenderer) => {
   if (!traverseRenderer) {
-    throw new PerseusError("traverseRenderer must be provided, but was not", Errors.Internal);
+    throw new perseusCore.PerseusError("traverseRenderer must be provided, but was not", perseusCore.Errors.Internal);
   }
   if (!widgetInfo || !widgetInfo.type || !widgets[widgetInfo.type]) {
     return widgetInfo;
@@ -19500,12 +19447,12 @@ const validAlignments = ["block", "inline-block", "inline", "float-left", "float
 const validateAlignments = () => {
   ___default["default"].each(widgets, function (widgetInfo) {
     if (widgetInfo.defaultAlignment && !___default["default"].contains(validAlignments, widgetInfo.defaultAlignment)) {
-      throw new PerseusError("Widget '" + widgetInfo.displayName + "' has an invalid defaultAlignment value: " + widgetInfo.defaultAlignment, Errors.InvalidInput);
+      throw new perseusCore.PerseusError("Widget '" + widgetInfo.displayName + "' has an invalid defaultAlignment value: " + widgetInfo.defaultAlignment, perseusCore.Errors.InvalidInput);
     }
     if (widgetInfo.supportedAlignments) {
       const unknownAlignments = ___default["default"].difference(widgetInfo.supportedAlignments, validAlignments);
       if (unknownAlignments.length) {
-        throw new PerseusError("Widget '" + widgetInfo.displayName + "' has an invalid value for supportedAlignments: " + unknownAlignments.join(" "), Errors.InvalidInput);
+        throw new perseusCore.PerseusError("Widget '" + widgetInfo.displayName + "' has an invalid value for supportedAlignments: " + unknownAlignments.join(" "), perseusCore.Errors.InvalidInput);
       }
     }
   });
@@ -20131,7 +20078,7 @@ class Renderer extends React__namespace.Component {
 
     // If the two lists of IDs match (ignoring order)
     if (serializedWidgetIds.length !== widgetPropIds.length || ___default["default"].intersection(serializedWidgetIds, widgetPropIds).length !== serializedWidgetIds.length) {
-      Log.error("Refusing to restore bad serialized state:", Errors.Internal, {
+      Log.error("Refusing to restore bad serialized state:", perseusCore.Errors.Internal, {
         loggedMetadata: {
           serializedState: JSON.stringify(serializedState),
           currentProps: JSON.stringify(this.state.widgetProps)
@@ -20289,7 +20236,7 @@ class Renderer extends React__namespace.Component {
     return function (id) {
       let focusPath = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       if (!___default["default"].isArray(focusPath)) {
-        throw new PerseusError("widget props.onFocus focusPath must be an Array, " + "but was" + JSON.stringify(focusPath), Errors.Internal);
+        throw new perseusCore.PerseusError("widget props.onFocus focusPath must be an Array, " + "but was" + JSON.stringify(focusPath), perseusCore.Errors.Internal);
       }
       _this2._setCurrentFocus([id].concat(focusPath));
     };
@@ -20773,7 +20720,7 @@ class Renderer extends React__namespace.Component {
         // object return value.
         // The result of focus was a {path, id} object itself
         path = [id].concat(focusResult.path || []);
-        Log.error("Renderer received a focus result of type 'object' " + "instead of the expected type 'boolean'", Errors.Internal, {
+        Log.error("Renderer received a focus result of type 'object' " + "instead of the expected type 'boolean'", perseusCore.Errors.Internal, {
           loggedMetadata: {
             focusResult: JSON.stringify(focusResult),
             currentProps: JSON.stringify(this.state.widgetProps)
@@ -28657,6 +28604,129 @@ const useTransformDimensionsToPixels = function () {
   return dimensionsToPixels(dimens, graphState);
 };
 
+// Restricts `value` to be between `min` and `max`.
+function clamp(value, min, max) {
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+}
+
+// Rounds each component of `point` to the nearest multiple of the
+// corresponding component of `snapStep`. E.g. if the snap step is [2, 3],
+// the x-coord of the point will be rounded to the nearest multiple of 2, and
+// the y-coord of the point will be rounded to the nearest multiple of 3.
+function snap(snapStep, point) {
+  const [requestedX, requestedY] = point;
+  const [snapX, snapY] = snapStep;
+  return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
+}
+
+// Use X and Y to index into arrays that represent coordinate pairs.
+// e.g. point[X]
+const X = 0;
+const Y = 1;
+
+// Use MIN and MAX to index into arrays that represent intervals.
+// e.g. range[MAX]
+const MIN = 0;
+const MAX = 1;
+function size(_ref) {
+  let [min, max] = _ref;
+  return max - min;
+}
+
+// Removes an equal amount from each end of the interval.
+//
+// If the given amount cannot be removed (because the interval is too small),
+// half the interval's size is removed from each end instead, so the interval
+// ends up with size = 0, and both MAX and MIN equal to its former midpoint.
+//
+// If `amount` is negative, the interval is expanded instead.
+function trim(amount, interval) {
+  if (amount * 2 > size(interval)) {
+    const middle = average(...interval);
+    return [middle, middle];
+  }
+  return [interval[MIN] + amount, interval[MAX] - amount];
+}
+function average(a, b) {
+  return (a + b) / 2;
+}
+
+// Restricts the `point` to be within `box`, by clamping each coordinate to the
+// corresponding interval.
+function clampToBox(box, point) {
+  return [clamp(point[X], ...box[X]), clamp(point[Y], ...box[Y])];
+}
+
+// Reduces the size of `box`, trimming each corner by the given positive
+// `amount`. If a component of `amount` is negative, the box is expanded in
+// that dimension instead.
+function inset(amount, box) {
+  return [trim(amount[X], box[X]), trim(amount[Y], box[Y])];
+}
+
+// [L]inear Int[erp]olation: gets the weighted average of two values `a` and
+// `b`, with the given `fraction` specifying how much weight `a` and `b` get:
+// - if `fraction` is 0, `lerp` returns `a`.
+// - if `fraction` is 0.5, `lerp` returns the average of `a` and `b`.
+// - if `fraction` is 1, `lerp` returns `b`.
+function lerp(a, b, fraction) {
+  return (b - a) * clamp(fraction, 0, 1) + a;
+}
+
+// Determines whether two line segments have exactly one intersection point.
+// The segments are treated as "open" - that is, not inclusive of their
+// endpoints.
+// Algorithm from https://stackoverflow.com/a/24392281/7347484
+const segmentsIntersect = (_ref, _ref2) => {
+  let [[a, b], [c, d]] = _ref;
+  let [[p, q], [r, s]] = _ref2;
+  const determinant = (c - a) * (s - q) - (r - p) * (d - b);
+  if (determinant === 0) {
+    return false;
+  } else {
+    const lambda = ((s - q) * (r - a) + (p - r) * (s - b)) / determinant;
+    const gamma = ((b - d) * (r - a) + (c - a) * (s - b)) / determinant;
+    return 0 < lambda && lambda < 1 && 0 < gamma && gamma < 1;
+  }
+};
+
+// This file contains helper functions for working with angles.
+
+function convertDegreesToRadians(degrees) {
+  return degrees / 180 * Math.PI;
+}
+
+// Returns a value between -180 and 180, inclusive. The angle is measured
+// between the positive x-axis and the given vector.
+function calculateAngleInDegrees(_ref) {
+  let [x, y] = _ref;
+  return Math.atan2(y, x) * 180 / Math.PI;
+}
+function polar(r, th) {
+  if (typeof r === "number") {
+    r = [r, r];
+  }
+  th = th * Math.PI / 180;
+  return [r[0] * Math.cos(th), r[1] * Math.sin(th)];
+}
+const findAngle = (point1, point2, vertex) => {
+  if (vertex === undefined) {
+    const x = point1[0] - point2[0];
+    const y = point1[1] - point2[1];
+    if (!x && !y) {
+      return 0;
+    }
+    return (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
+  }
+  return findAngle(point1, vertex) - findAngle(point2, vertex);
+};
+
 function AxisLabels() {
   const {
     range,
@@ -28664,8 +28734,8 @@ function AxisLabels() {
     width,
     height
   } = useGraphConfig();
-  const yAxisLabelLocation = [0, range[1][1]];
-  const xAxisLabelLocation = [range[0][1], 0];
+  const yAxisLabelLocation = [0, range[Y][MAX]];
+  const xAxisLabelLocation = [range[X][MAX], 0];
   const [xAxisLabelText, yAxisLabelText] = labels;
   const graphInfo = {
     range,
@@ -28836,6 +28906,32 @@ const LockedEllipse = props => {
   });
 };
 
+const LockedFunction = props => {
+  const {
+    color,
+    strokeStyle,
+    directionalAxis,
+    domain
+  } = props;
+  const plotProps = {
+    color: lockedFigureColors[color],
+    style: strokeStyle,
+    domain
+  };
+  const equation = props.equationParsed || KAS__namespace.parse(props.equation).expr;
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    className: "locked-function"
+  }, directionalAxis === "x" && /*#__PURE__*/React__namespace.createElement(mafs.Plot.OfX, _extends({
+    y: x => equation.eval({
+      x
+    })
+  }, plotProps)), directionalAxis === "y" && /*#__PURE__*/React__namespace.createElement(mafs.Plot.OfY, _extends({
+    x: y => equation.eval({
+      y
+    })
+  }, plotProps)));
+};
+
 function pathBuilder() {
   return new PathBuilder();
 }
@@ -28934,7 +29030,7 @@ function Arrowhead(props) {
   const [point] = useTransformVectorsToPixels(props.tip);
   return /*#__PURE__*/React__namespace.createElement("g", {
     className: "interactive-graph-arrowhead",
-    transform: `translate(${point[0]} ${point[1]}) rotate(${props.angle})`
+    transform: `translate(${point[X]} ${point[Y]}) rotate(${props.angle})`
   }, /*#__PURE__*/React__namespace.createElement("g", {
     transform: "translate(-1.5)"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -28949,52 +29045,6 @@ function Arrowhead(props) {
   })));
 }
 
-function calculateAngleInDegrees(_ref) {
-  let [x, y] = _ref;
-  return Math.atan2(y, x) * 180 / Math.PI;
-}
-
-/**
- * Given a ray and a rectangular box, find the point where the ray intersects
- * the edge of the box. Assumes the `initialPoint` is inside the box.
- * @param initialPoint - The starting point of the ray.
- * @param throughPoint - A point that the ray passes through. Must be different from initialPoint.
- * @param box - The box with which to intersect the ray, in the form [[xMin, xMax], [yMin, yMax]]
- */
-const getIntersectionOfRayWithBox = (initialPoint, throughPoint, box) => {
-  const [[xMin, xMax], [yMin, yMax]] = box;
-  const [aX, aY] = initialPoint;
-  const [bX, bY] = throughPoint;
-  const yDiff = bY - aY;
-  const xDiff = bX - aX;
-  const slope = yDiff / xDiff;
-  const inverseSlope = 1 / slope;
-  const xExtreme = xDiff < 0 ? xMin : xMax;
-  const yExtreme = yDiff < 0 ? yMin : yMax;
-  const yAtXExtreme = aY + (xExtreme - aX) * slope;
-  const xAtYExtreme = aX + (yExtreme - aY) * inverseSlope;
-  switch (true) {
-    // does the ray exit the graph bounding box via the left or right edge?
-    case isBetween(yAtXExtreme, yMin, yMax):
-      return [xExtreme, yAtXExtreme];
-
-    // does the ray exit the graph bounding box via the top or bottom edge?
-    case isBetween(xAtYExtreme, xMin, xMax):
-      return [xAtYExtreme, yExtreme];
-    default:
-      return [xExtreme, yExtreme];
-  }
-};
-const getLines = points => {
-  return points.map((point, i) => {
-    const next = points[(i + 1) % points.length];
-    return [point, next];
-  });
-};
-function isBetween(x, low, high) {
-  return x >= low && x <= high;
-}
-
 function SVGLine(props) {
   const {
     start,
@@ -29004,10 +29054,10 @@ function SVGLine(props) {
     testId
   } = props;
   return /*#__PURE__*/React__namespace.createElement("line", {
-    x1: start[0],
-    y1: start[1],
-    x2: end[0],
-    y2: end[1],
+    x1: start[X],
+    y1: start[Y],
+    x2: end[X],
+    y2: end[Y],
     style: style,
     className: className,
     "data-testid": testId
@@ -29040,6 +29090,41 @@ function Vector(props) {
   }));
 }
 
+/**
+ * Given a ray and a rectangular box, find the point where the ray intersects
+ * the edge of the box. Assumes the `initialPoint` is inside the box.
+ * @param initialPoint - The starting point of the ray.
+ * @param throughPoint - A point that the ray passes through. Must be different from initialPoint.
+ * @param box - The box with which to intersect the ray, in the form [[xMin, xMax], [yMin, yMax]]
+ */
+const getIntersectionOfRayWithBox = (initialPoint, throughPoint, box) => {
+  const [[xMin, xMax], [yMin, yMax]] = box;
+  const [aX, aY] = initialPoint;
+  const [bX, bY] = throughPoint;
+  const yDiff = bY - aY;
+  const xDiff = bX - aX;
+  const slope = yDiff / xDiff;
+  const inverseSlope = 1 / slope;
+  const xExtreme = xDiff < 0 ? xMin : xMax;
+  const yExtreme = yDiff < 0 ? yMin : yMax;
+  const yAtXExtreme = aY + (xExtreme - aX) * slope;
+  const xAtYExtreme = aX + (yExtreme - aY) * inverseSlope;
+  switch (true) {
+    // does the ray exit the graph bounding box via the left or right edge?
+    case isBetween(yAtXExtreme, yMin, yMax):
+      return [xExtreme, yAtXExtreme];
+
+    // does the ray exit the graph bounding box via the top or bottom edge?
+    case isBetween(xAtYExtreme, xMin, xMax):
+      return [xAtYExtreme, yExtreme];
+    default:
+      return [xExtreme, yExtreme];
+  }
+};
+function isBetween(x, low, high) {
+  return x >= low && x <= high;
+}
+
 const LockedLine = props => {
   const {
     color,
@@ -29092,8 +29177,8 @@ const LockedLine = props => {
   return /*#__PURE__*/React__namespace.createElement("g", {
     className: kind === "ray" ? "locked-ray" : "locked-line"
   }, line, showPoint1 && /*#__PURE__*/React__namespace.createElement(mafs.Point, {
-    x: point1.coord[0],
-    y: point1.coord[1],
+    x: point1.coord[X],
+    y: point1.coord[Y],
     svgCircleProps: {
       style: {
         fill: point1.filled ? lockedFigureColors[point1.color] : wonderBlocksTokens.color.white,
@@ -29102,8 +29187,8 @@ const LockedLine = props => {
       }
     }
   }), showPoint2 && /*#__PURE__*/React__namespace.createElement(mafs.Point, {
-    x: point2.coord[0],
-    y: point2.coord[1],
+    x: point2.coord[X],
+    y: point2.coord[Y],
     svgCircleProps: {
       style: {
         fill: point2.filled ? lockedFigureColors[point2.color] : wonderBlocksTokens.color.white,
@@ -29151,8 +29236,8 @@ const LockedPolygon = props => {
     color: lockedFigureColors[color]
   }), showVertices && points.map((point, index) => /*#__PURE__*/React__namespace.createElement(mafs.Point, {
     key: `locked-polygon-point-${index}`,
-    x: point[0],
-    y: point[1],
+    x: point[X],
+    y: point[Y],
     color: lockedFigureColors[color]
   })));
 };
@@ -29199,6 +29284,10 @@ const GraphLockedLayer = props => {
         return /*#__PURE__*/React__namespace.createElement(LockedPolygon, _extends({
           key: `polygon-${index}`
         }, figure));
+      case "function":
+        return /*#__PURE__*/React__namespace.createElement(LockedFunction, _extends({
+          key: `function-${index}`
+        }, figure));
       default:
         /**
          * Devlopment-time future-proofing: This should
@@ -29291,24 +29380,18 @@ const normalizePoints = (range, step, coordsList, noSnap) => coordsList.map(coor
 coords.map((coord, i) => {
   const axisRange = range[i];
   if (noSnap) {
-    return axisRange[0] + (axisRange[1] - axisRange[0]) * coord;
+    return axisRange[MIN] + size(axisRange) * coord;
   }
   const axisStep = step[i];
-  const nSteps = Math.floor((axisRange[1] - axisRange[0]) / axisStep);
+  const nSteps = Math.floor(size(axisRange) / axisStep);
   const tick = Math.round(coord * nSteps);
-  return axisRange[0] + axisStep * tick;
+  return axisRange[MIN] + axisStep * tick;
 }));
 
 // same as normalizeCoords in interactive-graph.tsx
 const normalizeCoords = (coordsList, ranges) => coordsList.map(coords => coords.map((coord, i) => {
-  const extent = ranges[i][1] - ranges[i][0];
-  return (coord + ranges[i][1]) / extent;
+  return (coord + ranges[i][1]) / size(ranges[i]);
 }));
-function snap(snapStep, point) {
-  const [requestedX, requestedY] = point;
-  const [snapX, snapY] = snapStep;
-  return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
-}
 
 // Returns the closest point to the given `point` that is within the graph
 // bounds given in `state`.
@@ -29318,19 +29401,8 @@ function bound$1(_ref) {
     range,
     point
   } = _ref;
-  const [requestedX, requestedY] = point;
-  const [snapX, snapY] = snapStep;
-  const [[minX, maxX], [minY, maxY]] = range;
-  return [clamp(requestedX, minX + snapX, maxX - snapX), clamp(requestedY, minY + snapY, maxY - snapY)];
-}
-function clamp(value, min, max) {
-  if (value < min) {
-    return min;
-  }
-  if (value > max) {
-    return max;
-  }
-  return value;
+  const boundingBox = inset(snapStep, range);
+  return clampToBox(boundingBox, point);
 }
 
 var isProduction = process.env.NODE_ENV === 'production';
@@ -29400,8 +29472,8 @@ function useDraggable(args) {
         metaKey,
         shiftKey
       } = state;
-      const direction = [yDownDirection[0], -yDownDirection[1]];
-      const span = Math.abs(direction[0]) ? xSpan : ySpan;
+      const direction = [yDownDirection[X], -yDownDirection[Y]];
+      const span = Math.abs(direction[X]) ? xSpan : ySpan;
       let divisions = 50;
       if (altKey || metaKey) {
         divisions = 200;
@@ -29512,8 +29584,7 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
   })?.[0] ?? "blue";
   const pointClasses = `movable-point ${dragging ? "movable-point--dragging" : ""} ${focusClass(focusBehavior)}`;
   const [[x, y]] = useTransformVectorsToPixels(point);
-  const [xMin, xMax] = range[0];
-  const [yMin, yMax] = range[1];
+  const [[xMin, xMax], [yMin, yMax]] = range;
   const [[verticalStartX]] = useTransformVectorsToPixels([xMin, 0]);
   const [[verticalEndX]] = useTransformVectorsToPixels([xMax, 0]);
   const [[_, horizontalStartY]] = useTransformVectorsToPixels([0, yMin]);
@@ -29570,7 +29641,7 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, showHairlines && hairlines, showTooltips ? /*#__PURE__*/React__namespace.createElement(Tooltip__default["default"], {
     autoUpdate: true,
     backgroundColor: wbColorName,
-    content: `(${point[0]}, ${point[1]})`,
+    content: `(${point[X]}, ${point[Y]})`,
     contentStyle: {
       color: "white"
     }
@@ -29755,16 +29826,7 @@ function trimRange(range, graphDimensionsInPixels) {
   const graphUnitsPerPixelY = size(yRange) / pixelsTall;
   const graphUnitsToTrimX = pixelsToTrim * graphUnitsPerPixelX;
   const graphUnitsToTrimY = pixelsToTrim * graphUnitsPerPixelY;
-  return [trim(xRange, graphUnitsToTrimX), trim(yRange, graphUnitsToTrimY)];
-}
-function trim(interval, amount) {
-  if (size(interval) < amount * 2) {
-    return [0, 0];
-  }
-  return [interval[0] + amount, interval[1] - amount];
-}
-function size(interval) {
-  return interval[1] - interval[0];
+  return inset([graphUnitsToTrimX, graphUnitsToTrimY], range);
 }
 
 const SegmentGraph = props => {
@@ -29899,7 +29961,7 @@ const SvgDefs = () => /*#__PURE__*/React__default["default"].createElement("defs
   in: "SourceGraphic"
 })));
 
-const Angle = _ref => {
+const PolygonAngle = _ref => {
   let {
     centerPoint,
     endPoints,
@@ -29927,7 +29989,7 @@ const Angle = _ref => {
   // Used to calculate the inside of the angle and to create square
   const [x3, y3] = mafs.vec.add(centerPoint, mafs.vec.add(mafs.vec.sub([x1, y1], centerPoint), mafs.vec.sub([x2, y2], centerPoint)));
   if (!showAngles) {
-    return isRightAngle(angle) ? /*#__PURE__*/React__namespace.createElement(RightAngleSquare, {
+    return isRightPolygonAngle(angle) ? /*#__PURE__*/React__namespace.createElement(RightAngleSquare, {
       start: [x1, y1],
       vertex: [x2, y2],
       end: [x3, y3]
@@ -29964,35 +30026,138 @@ const Angle = _ref => {
     start: [x1, y1],
     vertex: [x2, y2],
     end: [x3, y3]
-  }) : /*#__PURE__*/React__namespace.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React__namespace.createElement("path", {
-    d: arc,
-    strokeWidth: 0.02,
-    fill: "none"
-  })), /*#__PURE__*/React__namespace.createElement(TextLabel, {
+  }) : /*#__PURE__*/React__namespace.createElement(Arc, {
+    arc: arc
+  }), /*#__PURE__*/React__namespace.createElement(TextLabel, {
     x: x3,
     y: y3,
     attach: y3 - centerY > 0 ? "s" : "n",
     attachDistance: Math.abs(y3 - centerY) < 0.2 || mafs.vec.dist([x3, y3], centerPoint) < 0.3 ? 20 : 10
   }, angleLabel, "\xB0"));
 };
+const Angle = _ref2 => {
+  let {
+    vertex,
+    coords,
+    showAngles,
+    allowReflexAngles,
+    range
+  } = _ref2;
+  // Check if the points are clockwise or not, depending on whether we allow reflex angles
+  const areClockwise = clockwise$1([...coords, vertex]);
+  const shouldReverseCoords = areClockwise && !allowReflexAngles;
+
+  // Reverse the coordinates accordingly to ensure the angle is calculated correctly
+  const clockwiseCoords = shouldReverseCoords ? coords : coords.reverse();
+
+  // Calculate the angles between the two points
+  const startAngle = findAngle(clockwiseCoords[0], vertex);
+  const endAngle = findAngle(clockwiseCoords[1], vertex);
+  const angle = (startAngle + 360 - endAngle) % 360;
+
+  // Check if the angle is reflexive
+  const isReflexive = angle > 180;
+
+  // Break out the necessary points for the arc calculation
+  const [centerX, centerY] = vertex;
+  const [point1, point2] = clockwiseCoords;
+  const [startX, startY] = point1;
+  const [endX, endY] = point2;
+  const a = mafs.vec.dist(vertex, point1);
+  const b = mafs.vec.dist(vertex, point2);
+
+  // Set the radius of the arc
+  const radius = 2;
+
+  // Calculate the end points of the arc
+  const y1 = centerY + (startY - centerY) / a * radius;
+  const x2 = centerX + (endX - centerX) / b * radius;
+  const x1 = centerX + (startX - centerX) / a * radius;
+  const y2 = centerY + (endY - centerY) / b * radius;
+
+  // Used to calculate the inside of the angle and to create square
+  const [x3, y3] = mafs.vec.add(vertex, mafs.vec.add(mafs.vec.sub([x1, y1], vertex), mafs.vec.sub([x2, y2], vertex)));
+
+  // Determine whether the arc should be drawn outside the angle
+  const isOutside = shouldDrawArcOutside([x3, y3], vertex, range, [[vertex, point1], [vertex, point2]]);
+
+  // Determine the flags for the arc
+  // If the angle is outside OR reflexive, we want to draw a large arc
+  // If the angle is outside AND reflexive, we want to sweep the arc
+  const largeArcFlag = isOutside || isReflexive ? 1 : 0;
+  const sweepFlag = isOutside && isReflexive ? 1 : 0;
+
+  // Create the SVG path for the arc
+  const arc = `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${x2} ${y2}`;
+
+  // We only ever want to show whole angles
+  const angleLabel = parseFloat(angle.toFixed(0)); // Only want to show whole angles
+
+  // Calculate the text position based on the angle and whether we allow reflex angles
+  // Let's try the angle bisector method to find the midpoint of the arc
+  const [textX, textY] = calculateBisectorPoint(point1, point2, vertex, isReflexive, allowReflexAngles, radius);
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("filter", {
+    id: "background",
+    x: "-5%",
+    width: "110%",
+    y: "0%",
+    height: "100%"
+  }, /*#__PURE__*/React__namespace.createElement("feFlood", {
+    floodColor: "#FFF",
+    floodOpacity: "0.5"
+  }), /*#__PURE__*/React__namespace.createElement("feComposite", {
+    operator: "over",
+    in: "SourceGraphic"
+  }))), isRightAngle(angle) ? /*#__PURE__*/React__namespace.createElement(RightAngleSquare, {
+    start: [x1, y1],
+    vertex: [x2, y2],
+    end: [x3, y3],
+    className: "arc-right-angle"
+  }) : /*#__PURE__*/React__namespace.createElement(Arc, {
+    arc: arc,
+    className: "angle-arc"
+  }), showAngles && /*#__PURE__*/React__namespace.createElement(TextLabel, {
+    x: textX,
+    y: textY,
+    color: wonderBlocksTokens.color.blue
+  }, angleLabel, "\xB0"));
+};
 
 /**
  * This is broken out into its own component so that it can be used for an early return
  * (see line 55 or https://github.com/Khan/perseus/blob/84bbd882b11d16871e1b813a0b901f3b903d5479/packages/perseus/src/widgets/interactive-graphs/graphs/components/angle.tsx#L53-L57)
  */
-const RightAngleSquare = _ref2 => {
+const RightAngleSquare = _ref3 => {
   let {
     start: [x1, y1],
     vertex: [x2, y2],
-    end: [x3, y3]
-  } = _ref2;
+    end: [x3, y3],
+    className
+  } = _ref3;
   return /*#__PURE__*/React__namespace.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React__namespace.createElement("path", {
     d: `M ${x1} ${y1} L ${x3} ${y3} M ${x3} ${y3} L ${x2} ${y2}`,
     strokeWidth: 0.02,
-    fill: "none"
+    fill: "none",
+    className: className
+  }));
+};
+
+// We're conditionally adding the class name here so that we can style the arc differently
+// based on whether it's an angle or a polygon angle
+const Arc = _ref4 => {
+  let {
+    arc,
+    className
+  } = _ref4;
+  return /*#__PURE__*/React__namespace.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React__namespace.createElement("path", {
+    d: arc,
+    strokeWidth: 0.02,
+    fill: "none",
+    className: className
   }));
 };
-const isRightAngle = angle => Math.abs(angle - Math.PI / 2) < 0.01;
+const isRightPolygonAngle = angle => Math.abs(angle - Math.PI / 2) < 0.01;
+const isRightAngle = angle => Math.round(angle) === 90;
 
 /**
  * Determines if an angle is an inside (false) or outside (true) angle.
@@ -30006,27 +30171,81 @@ const shouldDrawArcOutside = (midpoint, vertex, range, polygonLines) => {
   // Create a ray from the midpoint (inside angle) to the edge of the range
   const rangeIntersectionPoint = getIntersectionOfRayWithBox(midpoint, vertex, range);
   let lineIntersectionCount = 0;
-  polygonLines.forEach(line => linesIntersect([vertex, rangeIntersectionPoint], line) && lineIntersectionCount++);
+  polygonLines.forEach(line => segmentsIntersect([vertex, rangeIntersectionPoint], line) && lineIntersectionCount++);
 
   // If the number of intersections is even, the angle is inside the polygon
   return !isEven(lineIntersectionCount);
 };
+const isEven = n => n % 2 === 0;
 
-// https://stackoverflow.com/a/24392281/7347484
-// The "intersects" function in geometry doesn't seem to work for this use case
-const linesIntersect = (_ref3, _ref4) => {
-  let [[a, b], [c, d]] = _ref3;
-  let [[p, q], [r, s]] = _ref4;
-  const determinant = (c - a) * (s - q) - (r - p) * (d - b);
-  if (determinant === 0) {
-    return false;
+// This function calculates the bisector point of an angle formed by two points
+// and a vertex. It is used to position the angle label so that it is always
+// outside the arc at the exact midpoint of the angle.
+// Reflex angles make use of polar coordinates to determine the correct direction
+function calculateBisectorPoint(point1, point2, vertex, isReflex, allowReflex, arcRadius) {
+  const [originX, originY] = vertex;
+  const [x1, y1] = point1;
+  const [x2, y2] = point2;
+
+  // Convert the Cartesian Coordinates to vectors
+  const vectorA = [x1 - originX, y1 - originY];
+  const vectorB = [x2 - originX, y2 - originY];
+
+  // Calculate the average angle of the vectors
+  // so that we can point the bisector in the correct direction using polar coordinates
+  const angleA = Math.atan2(vectorA[1], vectorA[0]);
+  const angleB = Math.atan2(vectorB[1], vectorB[0]);
+
+  // Calculate the average of these two angles
+  let averageAngle = (angleA + angleB) / 2;
+  const angleRadians = Math.abs(angleA - angleB);
+
+  // Adjust the average angle to point in the correct direction
+  // and to account for reflex angles and a bug with 180 degrees
+  // that occurs due to our angleOffsetDegrees option in the graph
+  if (allowReflex) {
+    // If the resulting angles are less than 180 degrees,
+    // or if the user has flipped the points on the interactive element
+    // ensure that we have the correct direction for the reflex angle
+    if (angleRadians <= Math.PI && isReflex || angleB > angleA) {
+      averageAngle += Math.PI; // Add 180 degrees
+    }
   } else {
-    const lambda = ((s - q) * (r - a) + (p - r) * (s - b)) / determinant;
-    const gamma = ((b - d) * (r - a) + (c - a) * (s - b)) / determinant;
-    return 0 < lambda && lambda < 1 && 0 < gamma && gamma < 1;
+    // If the resulting angles are greater than 180 degrees, adjust
+    // to get the correct angle, as we already know that the angle is not reflexive
+    // This fixes a bug that occurs at 180 degrees due to our angleOffsetDegrees option in the graph
+    if (angleRadians > Math.PI) {
+      averageAngle -= Math.PI; // Subract 180 degrees
+    }
   }
-};
-const isEven = n => n % 2 === 0;
+
+  // Convert the average angle back to Cartesian coordinates
+  const sum = [Math.cos(averageAngle), Math.sin(averageAngle)];
+
+  // Calculate the magnitude of the sum to normalize it
+  const sumMagnitude = Math.sqrt(sum[0] ** 2 + sum[1] ** 2);
+  const bisectorDirection = [sum[0] / sumMagnitude, sum[1] / sumMagnitude];
+
+  // Calculate the initial distance of the bisector direction from the origin
+  const initialDistance = Math.sqrt(bisectorDirection[0] ** 2 + bisectorDirection[1] ** 2);
+
+  // Determine the minimum radius to ensure that the text is always outside the arc
+  const requiredDistance = arcRadius * 1.75;
+  let radius = requiredDistance / initialDistance;
+
+  // Apply radius only if the initial distance is less than required
+  if (initialDistance >= requiredDistance) {
+    radius = 1; // Use the unit vector as is
+  }
+
+  // Scale the bisector direction by the radius
+  const bisectorPoint = [bisectorDirection[0] * radius, bisectorDirection[1] * radius];
+
+  // Add the vertex to the bisector point to get the final position
+  // to ensure that the angle label moves with the interactive element
+  const scaledBisector = mafs.vec.add(bisectorPoint, vertex);
+  return scaledBisector;
+}
 
 const StyledMovablePoint = props => {
   const {
@@ -30108,7 +30327,7 @@ const PolygonGraph = props => {
     if (!pt1 || !pt2) {
       return null;
     }
-    return /*#__PURE__*/React__namespace.createElement(Angle, {
+    return /*#__PURE__*/React__namespace.createElement(PolygonAngle, {
       key: "angle-" + i,
       centerPoint: point,
       endPoints: [pt1, pt2],
@@ -30150,6 +30369,12 @@ const PolygonGraph = props => {
     onMove: destination => dispatch(movePoint(i, destination))
   })));
 };
+function getLines(points) {
+  return points.map((point, i) => {
+    const next = points[(i + 1) % points.length];
+    return [point, next];
+  });
+}
 
 function getGradableGraph(state, initialGraph) {
   if (!state.hasBeenInteractedWith) {
@@ -30212,6 +30437,13 @@ function getGradableGraph(state, initialGraph) {
       coords: state.coords
     };
   }
+  if (state.type === "angle" && initialGraph.type === "angle") {
+    return {
+      ...initialGraph,
+      coords: state.coords,
+      allowReflexAngles: state.allowReflexAngles
+    };
+  }
   throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
 }
 
@@ -30274,16 +30506,16 @@ function MovableCircle(props) {
     className: `movable-circle ${dragging ? "movable-circle--dragging" : ""}`
   }, /*#__PURE__*/React__namespace.createElement("ellipse", {
     className: "focus-ring",
-    cx: centerPx[0],
-    cy: centerPx[1],
-    rx: radiiPx[0] + 3,
-    ry: radiiPx[1] + 3
+    cx: centerPx[X],
+    cy: centerPx[Y],
+    rx: radiiPx[X] + 3,
+    ry: radiiPx[Y] + 3
   }), /*#__PURE__*/React__namespace.createElement("ellipse", {
     className: "circle",
-    cx: centerPx[0],
-    cy: centerPx[1],
-    rx: radiiPx[0],
-    ry: radiiPx[1]
+    cx: centerPx[X],
+    cy: centerPx[Y],
+    rx: radiiPx[X],
+    ry: radiiPx[Y]
   }), /*#__PURE__*/React__namespace.createElement(DragHandle, {
     center: center
   }));
@@ -30299,10 +30531,10 @@ function DragHandle(props) {
   const topLeft = mafs.vec.sub(centerPx, mafs.vec.scale(dragHandleDimensions, 0.5));
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("rect", {
     className: "movable-circle-handle",
-    x: topLeft[0],
-    y: topLeft[1],
-    width: dragHandleDimensions[0],
-    height: dragHandleDimensions[1],
+    x: topLeft[X],
+    y: topLeft[Y],
+    width: dragHandleDimensions[X],
+    height: dragHandleDimensions[Y],
     rx: cornerRadius,
     ry: cornerRadius
   }), dragHandleDotPositions.map(offsetPx => {
@@ -30437,15 +30669,15 @@ const getSinusoidCoefficients = coords => {
   const p2 = coords[1];
 
   // If the x-coordinates are the same, we are unable to calculate the coefficients
-  if (p2[0] === p1[0]) {
+  if (p2[X] === p1[X]) {
     return;
   }
 
   // Resulting coefficients are canonical for this sine curve
-  const amplitude = p2[1] - p1[1];
-  const angularFrequency = Math.PI / (2 * (p2[0] - p1[0]));
-  const phase = p1[0] * angularFrequency;
-  const verticalOffset = p1[1];
+  const amplitude = p2[Y] - p1[Y];
+  const angularFrequency = Math.PI / (2 * (p2[X] - p1[X]));
+  const phase = p1[X] * angularFrequency;
+  const verticalOffset = p1[Y];
   return {
     amplitude,
     angularFrequency,
@@ -30454,6 +30686,75 @@ const getSinusoidCoefficients = coords => {
   };
 };
 
+function AngleGraph(props) {
+  const {
+    dispatch,
+    graphState
+  } = props;
+  const {
+    graphDimensionsInPixels
+  } = useGraphConfig();
+  const {
+    coords,
+    showAngles,
+    range,
+    allowReflexAngles,
+    angleOffsetDeg,
+    snapDegrees
+  } = graphState;
+
+  // Break the coords into the two end points and the center point
+  const endPoints = [coords[0], coords[2]];
+  const centerPoint = coords[1];
+
+  // Convert the vectors to pixels for rendering the svg lines
+  const angleLines = [[centerPoint, endPoints[0]], [centerPoint, endPoints[1]]];
+  const linePixelCoords = [useTransformVectorsToPixels(centerPoint, endPoints[0]), useTransformVectorsToPixels(centerPoint, endPoints[1])];
+
+  // Create the SVG lines for the angle
+  const svgLines = linePixelCoords.map((_ref, i) => {
+    let [startPtPx, endPtPx] = _ref;
+    const trimmedRange = trimRange(range, graphDimensionsInPixels);
+    const endExtend = getIntersectionOfRayWithBox(angleLines[i][0], angleLines[i][1], trimmedRange);
+    return /*#__PURE__*/React__namespace.createElement("g", {
+      key: `line-${i}`
+    }, /*#__PURE__*/React__namespace.createElement(SVGLine, {
+      start: startPtPx,
+      end: endPtPx,
+      style: {
+        stroke: "var(--movable-line-stroke-color)",
+        strokeWidth: "var(--movable-line-stroke-weight)"
+      }
+    }), /*#__PURE__*/React__namespace.createElement(Vector, {
+      tail: angleLines[i][1],
+      tip: endExtend,
+      color: "var(--movable-line-stroke-color)"
+    }));
+  });
+
+  // Create the angle indicator parameters
+  const angleParams = {
+    vertex: centerPoint,
+    coords: endPoints,
+    allowReflexAngles: allowReflexAngles || false,
+    // Whether to allow reflex angles or not
+    angleOffsetDeg: angleOffsetDeg || 0,
+    // The angle offset from the x-axis
+    snapDegrees: snapDegrees || 1,
+    // The multiple of degrees to snap to
+    range: range,
+    showAngles: showAngles || false // Whether to show the angle or not
+  };
+
+  // Render the lines, angle, and then movable points
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, svgLines, /*#__PURE__*/React__namespace.createElement(Angle, angleParams), coords.map((point, i) => /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
+    key: "point-" + i,
+    snapTo: "angles",
+    point: point,
+    onMove: destination => dispatch(movePoint(i, destination))
+  })));
+}
+
 // Universal padding for the axis ticks to ensure that the labels
 // have enough space to render without overlapping the tick lines
 const tickPadding = 5;
@@ -30463,10 +30764,8 @@ const AxisTickLabels = () => {
     tickStep,
     range
   } = graphConfig;
-  const [xMin, xMax] = range[0];
-  const [yMin, yMax] = range[1];
-  const yTickStep = tickStep[1];
-  const xTickStep = tickStep[0];
+  const [[xMin, xMax], [yMin, yMax]] = range;
+  const [xTickStep, yTickStep] = tickStep;
   const yGridTicks = generateTickLocations$1(yTickStep, yMin, yMax);
   const xGridTicks = generateTickLocations$1(xTickStep, xMin, xMax);
   return /*#__PURE__*/React__namespace.createElement("div", {
@@ -30748,13 +31047,13 @@ const YGridTick = _ref => {
 
   // If the graph is zoomed in, we want to make sure the ticks are still visible
   // even if they are outside the graph's range.
-  if (graphInfo.range[0][0] > 0) {
+  if (graphInfo.range[X][MIN] > 0) {
     // If the graph is on the positive side of the x-axis, lock the ticks to the left side of the graph
-    xPointOnAxis = graphInfo.range[0][0];
+    xPointOnAxis = graphInfo.range[X][MIN];
   }
-  if (graphInfo.range[0][1] < 0) {
+  if (graphInfo.range[X][MAX] < 0) {
     // If the graph is on the negative side of the x-axis, lock the ticks to the right side of the graph
-    xPointOnAxis = graphInfo.range[0][1];
+    xPointOnAxis = graphInfo.range[X][MAX];
   }
   const pointOnAxis = [xPointOnAxis, y];
   const [[xPosition, yPosition]] = useTransformVectorsToPixels(pointOnAxis);
@@ -30789,13 +31088,13 @@ const XGridTick = _ref2 => {
   let yPointOnAxis = 0;
   // If the graph is zoomed in, we want to make sure the ticks are still visible
   // even if they are outside the graph's range.
-  if (graphInfo.range[1][0] > 0) {
+  if (graphInfo.range[Y][MIN] > 0) {
     // If the graph is on the positive side of the y-axis, lock the ticks to the top of the graph
-    yPointOnAxis = graphInfo.range[1][0];
+    yPointOnAxis = graphInfo.range[Y][MIN];
   }
-  if (graphInfo.range[1][1] < 0) {
+  if (graphInfo.range[Y][MAX] < 0) {
     // If the graph is on the negative side of the x-axis, lock the ticks to the bottom of the graph
-    yPointOnAxis = graphInfo.range[1][1];
+    yPointOnAxis = graphInfo.range[Y][MAX];
   }
   const pointOnAxis = [x, yPointOnAxis];
   const [[xPosition, yPosition]] = useTransformVectorsToPixels(pointOnAxis);
@@ -30850,10 +31149,8 @@ const AxisTicks = () => {
     width,
     height
   };
-  const [xMin, xMax] = range[0];
-  const [yMin, yMax] = range[1];
-  const yTickStep = tickStep[1];
-  const xTickStep = tickStep[0];
+  const [[xMin, xMax], [yMin, yMax]] = range;
+  const [xTickStep, yTickStep] = tickStep;
   const yGridTicks = generateTickLocations(yTickStep, yMin, yMax);
   const xGridTicks = generateTickLocations(xTickStep, xMin, xMax);
   return /*#__PURE__*/React__namespace.createElement("g", {
@@ -30892,8 +31189,8 @@ const axisOptions = (props, axisIndex) => {
 };
 const Grid = props => {
   return props.markings === "none" ? null : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Coordinates.Cartesian, {
-    xAxis: axisOptions(props, 0),
-    yAxis: axisOptions(props, 1)
+    xAxis: axisOptions(props, X),
+    yAxis: axisOptions(props, Y)
   }),
   // Only render the axis ticks and arrows if the markings are set to a full "graph"
   props.markings === "graph" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisTicks, null), /*#__PURE__*/React__namespace.createElement(AxisArrows, null)));
@@ -31390,7 +31687,7 @@ const PropCheckBox = createReactClass__default["default"]({
       return !___default["default"].has(this.DEFAULT_PROPS, localPropName);
     }, this);
     if (!propName) {
-      throw new PerseusError("Attempted to create a PropCheckBox with no prop!", Errors.InvalidInput);
+      throw new perseusCore.PerseusError("Attempted to create a PropCheckBox with no prop!", perseusCore.Errors.InvalidInput);
     }
     return propName;
   },
@@ -31501,7 +31798,7 @@ const LegacyGrid = _ref => {
     height
   } = backgroundImage ?? {};
   if (url && typeof url === "string") {
-    const scale = box[0] / interactiveSizes$1.defaultBoxSize;
+    const scale = box[X] / interactiveSizes$1.defaultBoxSize;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: {
         position: "absolute",
@@ -31569,9 +31866,9 @@ function Protractor() {
   const angle = calculateAngleInDegrees(rotationHandleOffset) - calculateAngleInDegrees(centerToRotationHandle);
   return /*#__PURE__*/React__namespace.createElement("g", {
     ref: draggableRef,
-    transform: `translate(${topLeftPx[0]}, ${topLeftPx[1]}), rotate(${angle})`,
+    transform: `translate(${topLeftPx[X]}, ${topLeftPx[Y]}), rotate(${angle})`,
     style: {
-      transformOrigin: `${-centerToTopLeft[0]}px ${-centerToTopLeft[1]}px`
+      transformOrigin: `${-centerToTopLeft[X]}px ${-centerToTopLeft[Y]}px`
     }
   }, /*#__PURE__*/React__namespace.createElement("image", {
     href: protractorImage
@@ -31583,7 +31880,7 @@ function Protractor() {
 function RotationArrow() {
   const radius = 175;
   const angleDeg = 10;
-  const angleRad = degreesToRadians(angleDeg);
+  const angleRad = convertDegreesToRadians(angleDeg);
   const endX = radius * (1 - Math.cos(angleRad));
   const endY = radius * -Math.sin(angleRad);
   const rotationArrow = pathBuilder().move(0, 0).circularArc(radius, endX, endY, {
@@ -31662,17 +31959,135 @@ function useDraggablePx(args) {
   });
 }
 
-// [L]inear Int[erp]olation: gets the weighted average of two values `a` and
-// `b`, with the given `fraction` specifying how much weight `a` and `b` get:
-// - if `fraction` is 0, `lerp` returns `a`.
-// - if `fraction` is 0.5, `lerp` returns the average of `a` and `b`.
-// - if `fraction` is 1, `lerp` returns `b`.
-function lerp(a, b, fraction) {
-  return (b - a) * fraction + a;
-}
-function degreesToRadians(degrees) {
-  return degrees / 180 * Math.PI;
-}
+const MafsGraph = props => {
+  const {
+    state,
+    dispatch,
+    labels
+  } = props;
+  const [width, height] = props.box;
+  const tickStep = props.step;
+  return /*#__PURE__*/React__namespace.createElement(GraphConfigContext.Provider, {
+    value: {
+      range: state.range,
+      snapStep: state.snapStep,
+      markings: props.markings,
+      tickStep: tickStep,
+      gridStep: props.gridStep,
+      showTooltips: !!props.showTooltips,
+      graphDimensionsInPixels: props.box,
+      width,
+      height,
+      labels
+    }
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    className: "mafs-graph",
+    style: {
+      width,
+      height,
+      position: "relative",
+      padding: "25px 25px 0 0",
+      boxSizing: "content-box",
+      marginLeft: "20px",
+      marginBottom: "20px"
+    }
+  }, /*#__PURE__*/React__namespace.createElement(LegacyGrid, {
+    box: props.box,
+    backgroundImage: props.backgroundImage
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: {
+      position: "absolute",
+      bottom: 0,
+      left: 0
+    }
+  }, props.markings === "graph" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisLabels, null), /*#__PURE__*/React__namespace.createElement(AxisTickLabels, null)), /*#__PURE__*/React__namespace.createElement(mafs.Mafs, {
+    preserveAspectRatio: false,
+    viewBox: {
+      x: state.range[X],
+      y: state.range[Y],
+      padding: 0
+    },
+    pan: false,
+    zoom: false,
+    width: width,
+    height: height
+  }, /*#__PURE__*/React__namespace.createElement(SvgDefs, null), /*#__PURE__*/React__namespace.createElement(Grid, {
+    tickStep: props.step,
+    gridStep: props.gridStep,
+    range: state.range,
+    containerSizeClass: props.containerSizeClass,
+    markings: props.markings
+  }), props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLayer, {
+    lockedFigures: props.lockedFigures,
+    range: state.range
+  }), "/* Protractor */", props.showProtractor && /*#__PURE__*/React__namespace.createElement(Protractor, null), renderGraph({
+    state,
+    dispatch
+  })))));
+};
+const renderGraph = props => {
+  const {
+    state,
+    dispatch
+  } = props;
+  const {
+    type
+  } = state;
+  switch (type) {
+    case "angle":
+      return /*#__PURE__*/React__namespace.createElement(AngleGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "segment":
+      return /*#__PURE__*/React__namespace.createElement(SegmentGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "linear-system":
+      return /*#__PURE__*/React__namespace.createElement(LinearSystemGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "linear":
+      return /*#__PURE__*/React__namespace.createElement(LinearGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "ray":
+      return /*#__PURE__*/React__namespace.createElement(RayGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "polygon":
+      return /*#__PURE__*/React__namespace.createElement(PolygonGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "point":
+      return /*#__PURE__*/React__namespace.createElement(PointGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "circle":
+      return /*#__PURE__*/React__namespace.createElement(CircleGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "quadratic":
+      return /*#__PURE__*/React__namespace.createElement(QuadraticGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "sinusoid":
+      return /*#__PURE__*/React__namespace.createElement(SinusoidGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    default:
+      return new wonderStuffCore.UnreachableCaseError(type);
+  }
+};
 
 function initializeGraphState(params) {
   const {
@@ -31745,7 +32160,19 @@ function initializeGraphState(params) {
         coords: getSinusoidCoords(graph, range, step)
       };
     case "angle":
-      throw new Error("Mafs not yet implemented for graph type: " + graph.type);
+      return {
+        ...shared,
+        type: graph.type,
+        showAngles: Boolean(graph.showAngles),
+        coords: getAngleCoords({
+          graph,
+          range,
+          step
+        }),
+        angleOffsetDeg: Number(graph.angleOffsetDeg),
+        allowReflexAngles: Boolean(graph.allowReflexAngles),
+        snapDegrees: Number(graph.snapDegrees)
+      };
     default:
       throw new wonderStuffCore.UnreachableCaseError(graph);
   }
@@ -31877,6 +32304,43 @@ function getCircleCoords(graph) {
     radiusPoint: [2, 0]
   };
 }
+const getAngleCoords = params => {
+  const {
+    graph,
+    range,
+    step
+  } = params;
+  if (graph.coords) {
+    return graph.coords;
+  }
+  const {
+    snapDegrees,
+    angleOffsetDeg
+  } = graph;
+  const snap = snapDegrees || 1;
+  let angle = snap;
+  while (angle < 20) {
+    angle += snap;
+  }
+  angle = angle * Math.PI / 180;
+  const offset = (angleOffsetDeg || 0) * Math.PI / 180;
+  let defaultCoords = [[0.85, 0.5], [0.5, 0.5]];
+  defaultCoords = normalizePoints(range, step, defaultCoords, true);
+
+  // @ts-expect-error - TS2345 - Argument of type 'number[]' is not assignable to parameter of type 'readonly Coord[]'. | TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
+  const radius = magnitude(vector(...defaultCoords));
+
+  // We're adding a placeholder for the third point to appease ts and so that we
+  // can calculate it after we've adjusted the first point by the angleOffsetDeg
+  const coords = [...defaultCoords, [0, 0]];
+
+  // Adjust the lower point by angleOffsetDeg degrees
+  coords[0] = [coords[1][0] + radius * Math.cos(offset), coords[1][1] + radius * Math.sin(offset)];
+  // Position the upper point angle radians from the
+  // lower point
+  coords[2] = [coords[1][0] + radius * Math.cos(angle + offset), coords[1][1] + radius * Math.sin(angle + offset)];
+  return coords;
+};
 
 function interactiveGraphReducer(state, action) {
   switch (action.type) {
@@ -31940,6 +32404,7 @@ function doMoveControlPoint(state, action) {
           coords: newCoords
         };
       }
+    case "angle":
     case "circle":
       throw new Error("FIXME implement circle reducer");
     case "point":
@@ -32044,12 +32509,32 @@ function doMoveAll(state, action) {
 }
 function doMovePoint(state, action) {
   switch (state.type) {
+    case "angle":
+      // If the index is 1, we are moving the vertex of the angle,
+      // which will move the other two points as well
+      if (action.index === 1) {
+        const updatedCoords = boundAndSnapAngleVertex(state, action);
+        return {
+          ...state,
+          hasBeenInteractedWith: true,
+          coords: updatedCoords
+        };
+      }
+      return {
+        ...state,
+        hasBeenInteractedWith: true,
+        coords: setAtIndex({
+          array: state.coords,
+          index: action.index,
+          newValue: boundAndSnapAngleEndPoints(action.destination, state, action.index)
+        })
+      };
     case "polygon":
       let newValue;
       if (state.snapTo === "sides") {
         newValue = boundAndSnapToSides(action.destination, state, action.index);
       } else if (state.snapTo === "angles") {
-        newValue = boundAndSnapToAngle(action.destination, state, action.index);
+        newValue = boundAndSnapToPolygonAngle(action.destination, state, action.index);
       } else {
         newValue = boundAndSnapToGrid(action.destination, state);
       }
@@ -32090,7 +32575,7 @@ function doMovePoint(state, action) {
         // vertical line. If they are, then we don't want to move the point
         const newCoords = [...state.coords];
         newCoords[action.index] = boundDestination;
-        if (newCoords[0][0] === newCoords[1][0]) {
+        if (newCoords[0][X] === newCoords[1][X]) {
           return state;
         }
         return {
@@ -32150,13 +32635,13 @@ function doMoveCenter(state, action) {
         // if it otherwise would be off the chart
         // ex: if the handle is on the right and we move the center
         // to the rightmost position, move the handle to the left
-        const [xMin, xMax] = state.range[0];
+        const [xMin, xMax] = state.range[X];
         const [radX] = newRadiusPoint;
         if (radX < xMin || radX > xMax) {
-          const xJumpDist = (radX - constrainedCenter[0]) * 2;
+          const xJumpDist = (radX - constrainedCenter[X]) * 2;
           const possibleNewX = radX - xJumpDist;
           if (possibleNewX >= xMin && possibleNewX <= xMax) {
-            newRadiusPoint[0] = possibleNewX;
+            newRadiusPoint[X] = possibleNewX;
           }
         }
         return {
@@ -32174,11 +32659,11 @@ function doMoveRadiusPoint(state, action) {
   switch (state.type) {
     case "circle":
       {
-        const [xMin, xMax] = state.range[0];
+        const [xMin, xMax] = state.range[X];
         const nextRadiusPoint = [
         // Constrain to graph range
         // The +0 is to convert -0 to +0
-        Math.min(Math.max(xMin, action.destination[0] + 0), xMax), state.center[1]];
+        clamp(action.destination[X] + 0, xMin, xMax), state.center[1]];
         if (___default["default"].isEqual(nextRadiusPoint, state.center)) {
           return state;
         }
@@ -32216,10 +32701,10 @@ function doChangeRange(state, action) {
 }
 const getDeltaVertex = (maxMoves, minMoves, delta) => {
   const [deltaX, deltaY] = delta;
-  const maxXMove = Math.min(...maxMoves.map(move => move[0]));
-  const maxYMove = Math.min(...maxMoves.map(move => move[1]));
-  const minXMove = Math.max(...minMoves.map(move => move[0]));
-  const minYMove = Math.max(...minMoves.map(move => move[1]));
+  const maxXMove = Math.min(...maxMoves.map(move => move[X]));
+  const maxYMove = Math.min(...maxMoves.map(move => move[Y]));
+  const minXMove = Math.max(...minMoves.map(move => move[X]));
+  const minYMove = Math.max(...minMoves.map(move => move[Y]));
   const dx = clamp(deltaX, minXMove, maxXMove);
   const dy = clamp(deltaY, minYMove, maxYMove);
   return [dx, dy];
@@ -32253,11 +32738,130 @@ function boundAndSnapToGrid(point, _ref) {
     point
   }));
 }
-function boundAndSnapToAngle(destinationPoint, _ref2, index) {
+function boundAndSnapAngleVertex(_ref2, _ref3) {
   let {
     range,
-    coords
+    coords,
+    snapStep
   } = _ref2;
+  let {
+    destination
+  } = _ref3;
+  // Needed to prevent updating the original coords before the checks for
+  // degenerate triangles and overlapping sides
+  const coordsCopy = [...coords];
+
+  // Get the current and upcoming positions of the vertex
+  const startingVertex = coordsCopy[1];
+  const newVertex = bound$1({
+    snapStep,
+    range,
+    point: snap(snapStep, destination)
+  });
+
+  // Get the vector from the starting vertex to the new vertex
+  const delta = mafs.vec.add(newVertex, reverseVector(startingVertex));
+
+  // Apply the delta to each of the other two points so that the angle is maintained
+  let valid = true;
+  const newPoints = {};
+  for (const i of [0, 2]) {
+    const oldPoint = coordsCopy[i];
+    let newPoint = mafs.vec.add(oldPoint, delta);
+    let angle = findAngle(newVertex, newPoint);
+    angle *= Math.PI / 180;
+    newPoint = constrainToBoundsOnAngle(newPoint, angle, range, snapStep);
+    newPoints[i] = newPoint;
+
+    // Check if the new point is too close to the vertex
+    if (tooClose(newVertex, newPoint)) {
+      valid = false;
+    }
+  }
+
+  // Update the vertex after snapping to the snapStep
+  newPoints[1] = newVertex;
+  // Only move points if all new positions are valid
+  if (valid) {
+    Object.entries(newPoints).forEach(_ref4 => {
+      let [i, newPoint] = _ref4;
+      coordsCopy[i] = newPoint;
+    });
+  }
+  return coordsCopy;
+}
+
+// This function is used to ensure that the vertex of
+// an angle is not too close to the other points
+function tooClose(point1, point2, range) {
+  const safeDistance = 2;
+  const distance = mafs.vec.dist(point1, point2);
+  return distance < safeDistance;
+}
+function constrainToBoundsOnAngle(point, angle, range, snapStep) {
+  // We're subtracting the snapStep from the lower bound and adding it to the upper bound
+  // to ensure that the point is within the bounds of the graph even after snapping to the nearest degree
+  const lower = [range[0][0] + snapStep[0], range[1][0] + snapStep[0]];
+  const upper = [range[0][1] - snapStep[1], range[1][1] - snapStep[1]];
+  let result = point;
+  if (result[0] < lower[0]) {
+    result = [lower[0], result[1] + (lower[0] - result[0]) * Math.tan(angle)];
+  } else if (result[0] > upper[0]) {
+    result = [upper[0], result[1] - (result[0] - upper[0]) * Math.tan(angle)];
+  }
+  if (result[1] < lower[1]) {
+    result = [result[0] + (lower[1] - result[1]) / Math.tan(angle), lower[1]];
+  } else if (result[1] > upper[1]) {
+    result = [result[0] - (result[1] - upper[1]) / Math.tan(angle), upper[1]];
+  }
+  return result;
+}
+function boundAndSnapAngleEndPoints(destinationPoint, _ref5, index) {
+  let {
+    range,
+    coords,
+    snapDegrees,
+    angleOffsetDeg,
+    snapStep
+  } = _ref5;
+  const snap = snapDegrees || 1;
+  const offsetDegrees = angleOffsetDeg || 0;
+
+  // Needed to prevent updating the original coords before the checks for
+  // degenerate triangles and overlapping sides
+  const coordsCopy = [...coords];
+
+  // We want to subtract or add the snapStep to the lower and upper bounds
+  // respectively to ensure that the point is within the bounds of the graph
+  // even after snapping to the nearest degree
+  const angleRange = [[range[0][0] + snapStep[0], range[0][1] - snapStep[0]], [range[1][0] + snapStep[1], range[1][1] - snapStep[1]]];
+
+  // Takes the destination point and makes sure it is within the bounds of the graph
+  // SnapStep is [0, 0] because we don't want to snap these points to the grid at all
+  const boundPoint = bound$1({
+    snapStep: [0, 0],
+    range: angleRange,
+    point: destinationPoint
+  });
+  coordsCopy[index] = boundPoint;
+
+  // Get the vertex of the angle
+  const vertex = coords[1];
+
+  // Gets the angle between the coords and the vertex
+  let angle = findAngle(coordsCopy[index], vertex);
+
+  // Snap the angle to the nearest multiple of snapDegrees (if provided)
+  angle = Math.round((angle - offsetDegrees) / snap) * snap + offsetDegrees;
+  const distance = mafs.vec.dist(coordsCopy[index], vertex);
+  const snappedValue = mafs.vec.add(vertex, polar(distance, angle));
+  return snappedValue;
+}
+function boundAndSnapToPolygonAngle(destinationPoint, _ref6, index) {
+  let {
+    range,
+    coords
+  } = _ref6;
   const startingPoint = coords[index];
 
   // Needed to prevent updating the original coords before the checks for
@@ -32285,7 +32889,7 @@ function boundAndSnapToAngle(destinationPoint, _ref2, index) {
     angles[rel(j)] = Math.round(angles[rel(j)]);
   });
   const getAngle = function (a, vertex, b) {
-    const angle = GraphUtils.findAngle(coordsCopy[rel(a)], coordsCopy[rel(b)], coordsCopy[rel(vertex)]);
+    const angle = findAngle(coordsCopy[rel(a)], coordsCopy[rel(b)], coordsCopy[rel(vertex)]);
     return (angle + 360) % 360;
   };
   const innerAngles = [angles[rel(-1)] - getAngle(-2, -1, 1), angles[rel(1)] - getAngle(-1, 1, 2)];
@@ -32313,7 +32917,7 @@ function boundAndSnapToAngle(destinationPoint, _ref2, index) {
   const side = Math.sin(innerAngles[1] * Math.PI / 180) / Math.sin(innerAngles[2] * Math.PI / 180) * knownSide;
 
   // Angle at the second vertex of the polygon
-  const outerAngle = GraphUtils.findAngle(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
+  const outerAngle = findAngle(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
 
   // Uses the length of the side of the polygon (radial coordinate)
   // and the angle between the first and second sides of the
@@ -32321,11 +32925,11 @@ function boundAndSnapToAngle(destinationPoint, _ref2, index) {
   const offset = polar(side, outerAngle + (onLeft ? 1 : -1) * innerAngles[0]);
   return kmath.vector.add(coordsCopy[rel(-1)], offset);
 }
-function boundAndSnapToSides(destinationPoint, _ref3, index) {
+function boundAndSnapToSides(destinationPoint, _ref7, index) {
   let {
     range,
     coords
-  } = _ref3;
+  } = _ref7;
   const startingPoint = coords[index];
 
   // Needed to prevent updating the original coords before the checks for
@@ -32364,7 +32968,7 @@ function boundAndSnapToSides(destinationPoint, _ref3, index) {
   const innerAngle = lawOfCosines(sides[0], sides[2], sides[1]);
 
   // Angle at the second vertex of the polygon
-  const outerAngle = GraphUtils.findAngle(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
+  const outerAngle = findAngle(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
 
   // Returns true if the points form a counter-clockwise turn;
   // a.k.a if the point is on the left or right of the polygon.
@@ -32382,12 +32986,12 @@ function boundAndSnapToSides(destinationPoint, _ref3, index) {
 }
 
 // Returns the vector from the given point to the top-right corner of the graph when snapped to the grid
-function maxMove(_ref4) {
+function maxMove(_ref8) {
   let {
     snapStep,
     range,
     point
-  } = _ref4;
+  } = _ref8;
   const topRight = bound$1({
     snapStep,
     range,
@@ -32397,12 +33001,12 @@ function maxMove(_ref4) {
 }
 
 // Returns the vector from the given point to the bottom-left corner of the graph when snapped to the grid
-function minMove(_ref5) {
+function minMove(_ref9) {
   let {
     snapStep,
     range,
     point
-  } = _ref5;
+  } = _ref9;
   const bottomLeft = bound$1({
     snapStep,
     range,
@@ -32435,65 +33039,6 @@ function setAtIndex(args) {
   return copy;
 }
 
-const renderGraph = props => {
-  const {
-    state,
-    dispatch
-  } = props;
-  const {
-    type
-  } = state;
-  switch (type) {
-    case "segment":
-      return /*#__PURE__*/React__namespace.createElement(SegmentGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
-    case "linear-system":
-      return /*#__PURE__*/React__namespace.createElement(LinearSystemGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
-    case "linear":
-      return /*#__PURE__*/React__namespace.createElement(LinearGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
-    case "ray":
-      return /*#__PURE__*/React__namespace.createElement(RayGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
-    case "polygon":
-      return /*#__PURE__*/React__namespace.createElement(PolygonGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
-    case "point":
-      return /*#__PURE__*/React__namespace.createElement(PointGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
-    case "circle":
-      return /*#__PURE__*/React__namespace.createElement(CircleGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
-    case "quadratic":
-      return /*#__PURE__*/React__namespace.createElement(QuadraticGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
-    case "sinusoid":
-      return /*#__PURE__*/React__namespace.createElement(SinusoidGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
-    default:
-      return new wonderStuffCore.UnreachableCaseError(type);
-  }
-};
-
 // Rather than be tightly bound to how data was structured in
 // the legacy interactive graph, this lets us store state
 // however we want and we just transform it before handing it off
@@ -32563,72 +33108,6 @@ const StatefulMafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref)
     dispatch: dispatch
   }));
 });
-const MafsGraph = props => {
-  const {
-    state,
-    dispatch,
-    labels
-  } = props;
-  const [width, height] = props.box;
-  const tickStep = props.step;
-  return /*#__PURE__*/React__namespace.createElement(GraphConfigContext.Provider, {
-    value: {
-      range: state.range,
-      snapStep: state.snapStep,
-      markings: props.markings,
-      tickStep: tickStep,
-      gridStep: props.gridStep,
-      showTooltips: !!props.showTooltips,
-      graphDimensionsInPixels: props.box,
-      width,
-      height,
-      labels
-    }
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    className: "mafs-graph",
-    style: {
-      width,
-      height,
-      position: "relative",
-      padding: "25px 25px 0 0",
-      boxSizing: "content-box",
-      marginLeft: "20px",
-      marginBottom: "20px"
-    }
-  }, /*#__PURE__*/React__namespace.createElement(LegacyGrid, {
-    box: props.box,
-    backgroundImage: props.backgroundImage
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: {
-      position: "absolute",
-      bottom: 0,
-      left: 0
-    }
-  }, props.markings === "graph" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisLabels, null), /*#__PURE__*/React__namespace.createElement(AxisTickLabels, null)), /*#__PURE__*/React__namespace.createElement(mafs.Mafs, {
-    preserveAspectRatio: false,
-    viewBox: {
-      x: state.range[0],
-      y: state.range[1],
-      padding: 0
-    },
-    pan: false,
-    zoom: false,
-    width: width,
-    height: height
-  }, /*#__PURE__*/React__namespace.createElement(SvgDefs, null), /*#__PURE__*/React__namespace.createElement(Grid, {
-    tickStep: props.step,
-    gridStep: props.gridStep,
-    range: state.range,
-    containerSizeClass: props.containerSizeClass,
-    markings: props.markings
-  }), props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLayer, {
-    lockedFigures: props.lockedFigures,
-    range: state.range
-  }), "/* Protractor */", props.showProtractor && /*#__PURE__*/React__namespace.createElement(Protractor, null), renderGraph({
-    state,
-    dispatch
-  })))));
-};
 
 const {
   DeprecationMixin
@@ -32677,7 +33156,7 @@ const _isClickToAddPoints = props => {
   return props.graph.type === "point" && props.graph.numPoints === UNLIMITED || props.graph.type === "polygon" && props.graph.numSides === UNLIMITED;
 };
 const makeInvalidTypeError = (functionName, graphType) => {
-  return new PerseusError(`${functionName} called but current graph type is not a '${graphType}'`, Errors.NotAllowed, {
+  return new perseusCore.PerseusError(`${functionName} called but current graph type is not a '${graphType}'`, perseusCore.Errors.NotAllowed, {
     metadata: {
       graphType
     }
@@ -32776,7 +33255,7 @@ class LegacyInteractiveGraph extends React__namespace.Component {
     // This function should only be called when this.isClickToAddPoints()
     // is true
     if (!this.isClickToAddPoints()) {
-      throw new PerseusError("handleAddPointsClick should not be registered" + "when isClickToAddPoints() is false", Errors.NotAllowed);
+      throw new perseusCore.PerseusError("handleAddPointsClick should not be registered" + "when isClickToAddPoints() is false", perseusCore.Errors.NotAllowed);
     }
     if (!this.isCoordInTrash(coord)) {
       let point;
@@ -33492,7 +33971,7 @@ class LegacyInteractiveGraph extends React__namespace.Component {
         // Solve for side by using the law of sines
         const side = Math.sin(innerAngles[1] * Math.PI / 180) / Math.sin(innerAngles[2] * Math.PI / 180) * knownSide;
         const outerAngle = GraphUtils.findAngle(coords[rel(1)], coords[rel(-1)]);
-        const offset = polar(side, outerAngle + (onLeft ? 1 : -1) * innerAngles[0]);
+        const offset = polar$1(side, outerAngle + (onLeft ? 1 : -1) * innerAngles[0]);
         return this.graphie?.addPoints(coords[rel(-1)], offset);
       }
       // @ts-expect-error - TS2339 - Property 'snapTo' does not exist on type 'PerseusGraphType'.
@@ -33516,7 +33995,7 @@ class LegacyInteractiveGraph extends React__namespace.Component {
         const innerAngle = lawOfCosines(sides[0], sides[2], sides[1]);
         const outerAngle = GraphUtils.findAngle(coords[rel(1)], coords[rel(-1)]);
         const onLeft = sign(ccw(coords[rel(-1)], coords[rel(1)], coords[i])) === 1;
-        const offset = polar(sides[0], outerAngle + (onLeft ? 1 : -1) * innerAngle);
+        const offset = polar$1(sides[0], outerAngle + (onLeft ? 1 : -1) * innerAngle);
         return this.graphie?.addPoints(coords[rel(-1)], offset);
       }
       // Snap to grid (already done)
@@ -33914,7 +34393,7 @@ class InteractiveGraph extends React__namespace.Component {
     if (this.legacyGraphRef.current) {
       return this.legacyGraphRef.current.getUserInput();
     }
-    throw new PerseusError("Cannot getUserInput from a graph that has never rendered", Errors.NotAllowed);
+    throw new perseusCore.PerseusError("Cannot getUserInput from a graph that has never rendered", perseusCore.Errors.NotAllowed);
   };
   simpleValidate(rubric) {
     return InteractiveGraph.validate(this.getUserInput?.(), rubric, this);
@@ -34123,11 +34602,9 @@ class InteractiveGraph extends React__namespace.Component {
     const radius = magnitude(vector(...coords));
 
     // Adjust the lower point by angleOffsetDeg degrees
-    // @ts-expect-error - TS2542 - Index signature in type 'readonly Coord[]' only permits reading.
     coords[0] = [coords[1][0] + radius * Math.cos(offset), coords[1][1] + radius * Math.sin(offset)];
     // Position the upper point angle radians from the
     // lower point
-    // @ts-expect-error - TS2542 - Index signature in type 'readonly Coord[]' only permits reading.
     coords[2] = [coords[1][0] + radius * Math.cos(angle + offset), coords[1][1] + radius * Math.sin(angle + offset)];
     return coords;
   }
@@ -39642,7 +40119,7 @@ class Card extends React__namespace.Component {
     // Event handlers should be unbound before component unmounting, but
     // just in case...
     if (this.mouseMoveUpBound) {
-      Log.error("Removing an element with bound event handlers.", Errors.Internal);
+      Log.error("Removing an element with bound event handlers.", perseusCore.Errors.Internal);
       this.unbindMouseMoveUp();
       Util.resetTouchHandlers();
     }
@@ -40463,7 +40940,7 @@ function deserializeHighlight(serializedHighlight, wordRanges) {
   } = serializedHighlight.range;
   const firstWord = wordRanges[firstWordIndex];
   if (!firstWord) {
-    throw new PerseusError(`first word index ${firstWord} is out of bounds: ` + `must be 0–${wordRanges.length - 1} inclusive`, Errors.InvalidInput, {
+    throw new perseusCore.PerseusError(`first word index ${firstWord} is out of bounds: ` + `must be 0–${wordRanges.length - 1} inclusive`, perseusCore.Errors.InvalidInput, {
       metadata: {
         firstWord,
         wordRanges: JSON.stringify(wordRanges)
@@ -40472,7 +40949,7 @@ function deserializeHighlight(serializedHighlight, wordRanges) {
   }
   const lastWord = wordRanges[lastWordIndex];
   if (!lastWord) {
-    throw new PerseusError(`last word index ${lastWord} is out of bounds: ` + `must be 0–${wordRanges.length - 1} inclusive`, Errors.InvalidInput, {
+    throw new perseusCore.PerseusError(`last word index ${lastWord} is out of bounds: ` + `must be 0–${wordRanges.length - 1} inclusive`, perseusCore.Errors.InvalidInput, {
       metadata: {
         lastWord,
         wordRanges: JSON.stringify(wordRanges)
@@ -41225,7 +41702,7 @@ class WordIndexer extends React__namespace.PureComponent {
   _getWordRanges() {
     const container = this._container;
     if (!container) {
-      throw new PerseusError("invariant violation: `this._container` is not defined, but " + "this method is only called after mount/update", Errors.NotAllowed);
+      throw new perseusCore.PerseusError("invariant violation: `this._container` is not defined, but " + "this method is only called after mount/update", perseusCore.Errors.NotAllowed);
     }
 
     // Create a TreeWalker that visits text nodes and element nodes.
@@ -41691,6 +42168,7 @@ const rules = {
       }, /*#__PURE__*/React__namespace.createElement("span", {
         style: SQUARE_LABEL_STYLE
       }, node.content)), /*#__PURE__*/React__namespace.createElement(AltText, {
+        key: "alt-text",
         id: "questionMarker",
         number: node.content
       }), node.space ? "\u00A0" : null];
@@ -41715,6 +42193,7 @@ const rules = {
       }, /*#__PURE__*/React__namespace.createElement("span", {
         style: CIRCLE_LABEL_STYLE
       }, node.content)), /*#__PURE__*/React__namespace.createElement(AltText, {
+        key: "alt-text",
         id: "circleMarker",
         number: node.content
       }), node.space ? "\u00A0" : null];
@@ -41738,6 +42217,7 @@ const rules = {
         className: "perseus-passage-bracket-label",
         "aria-hidden": "true"
       }, "[", node.content, "]"), /*#__PURE__*/React__namespace.createElement(AltText, {
+        key: "alt-text",
         id: "sentenceMarker",
         number: node.content
       }), node.space ? "\u00A0" : null];
@@ -44747,7 +45227,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "24.2.0";
+const libVersion = "25.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -46123,9 +46603,9 @@ tree, shape, path, mappers
     // @ts-expect-error - TS2315 - Type 'ArrayNode' is not generic.
     const array = tree;
     if (!Array.isArray(array)) {
-      throw new PerseusError(`Invalid object of type "${typeof array}" found at path ` +
+      throw new perseusCore.PerseusError(`Invalid object of type "${typeof array}" found at path ` +
       // @ts-expect-error - TS2769 - No overload matches this call.
-      `${["<root>"].concat(path).join(".")}. Expected array.`, Errors.Internal);
+      `${["<root>"].concat(path).join(".")}. Expected array.`, perseusCore.Errors.Internal);
     }
     const elementShape = shape.elementShape;
     // @ts-expect-error - TS2315 - Type 'ArrayNode' is not generic.
@@ -46135,30 +46615,30 @@ tree, shape, path, mappers
   if (shape.type === "object") {
     const object = tree;
     if (object && typeof object !== "object") {
-      throw new PerseusError(`Invalid object of type "${typeof object}" found at ` +
+      throw new perseusCore.PerseusError(`Invalid object of type "${typeof object}" found at ` +
       // @ts-expect-error - TS2769 - No overload matches this call.
-      `path ${["<root>"].concat(path).join(".")}. Expected ` + `"object" type.`, Errors.InvalidInput);
+      `path ${["<root>"].concat(path).join(".")}. Expected ` + `"object" type.`, perseusCore.Errors.InvalidInput);
     }
     const valueShapes = shape.shape;
     if (!valueShapes) {
-      throw new PerseusError(`Unexpected shape ${JSON.stringify(shape)} at path ` +
+      throw new perseusCore.PerseusError(`Unexpected shape ${JSON.stringify(shape)} at path ` +
       // @ts-expect-error - TS2769 - No overload matches this call.
-      `${["<root>"].concat(path).join(".")}.`, Errors.InvalidInput);
+      `${["<root>"].concat(path).join(".")}.`, perseusCore.Errors.InvalidInput);
     }
     const newObject = {};
     Object.keys(valueShapes).forEach(key => {
       if (!(key in object)) {
-        throw new PerseusError(`Key "${key}" is missing from shape at path ` +
+        throw new perseusCore.PerseusError(`Key "${key}" is missing from shape at path ` +
         // @ts-expect-error - TS2769 - No overload matches this call.
-        `${["<root>"].concat(path).join(".")}.`, Errors.InvalidInput);
+        `${["<root>"].concat(path).join(".")}.`, perseusCore.Errors.InvalidInput);
       }
       newObject[key] = mapTree(object[key], valueShapes[key], path.concat(key), mappers);
     });
     return newObject;
   }
-  throw new PerseusError(
+  throw new perseusCore.PerseusError(
   // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
-  `unexpected shape type ${shape.type}`, Errors.InvalidInput);
+  `unexpected shape type ${shape.type}`, perseusCore.Errors.InvalidInput);
 }
 
 /**
@@ -46210,9 +46690,9 @@ function buildEmptyItemTreeForShape(shape) {
     });
     return object;
   }
-  throw new PerseusError(
+  throw new perseusCore.PerseusError(
   // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
-  `unexpected shape type ${shape.type}`, Errors.InvalidInput);
+  `unexpected shape type ${shape.type}`, perseusCore.Errors.InvalidInput);
 }
 
 /**
@@ -46287,7 +46767,7 @@ function inferItemTreeShape(node) {
     });
     return shapes.shape(valueShapes);
   }
-  throw new PerseusError(`unexpected multi-item node ${JSON.stringify(node)}`, Errors.InvalidInput);
+  throw new perseusCore.PerseusError(`unexpected multi-item node ${JSON.stringify(node)}`, perseusCore.Errors.InvalidInput);
 }
 
 /**
@@ -46365,7 +46845,7 @@ class MultiRenderer extends React__namespace.Component {
         renderError: null
       };
     } catch (e) {
-      Log.error("Error building tree state", Errors.Internal, {
+      Log.error("Error building tree state", perseusCore.Errors.Internal, {
         cause: e
       });
       return {
@@ -46729,9 +47209,9 @@ function buildTreePropTypeForShape(shape) {
     });
     return PropTypes__default["default"].shape(propTypeShape);
   }
-  throw new PerseusError(
+  throw new perseusCore.PerseusError(
   // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
-  `unexpected shape type ${shape.type}`, Errors.InvalidInput);
+  `unexpected shape type ${shape.type}`, perseusCore.Errors.InvalidInput);
 }
 
 /**
@@ -46854,7 +47334,7 @@ const isRendererContentRenderableBy = function (rendererOptions, rendererContent
 };
 const isItemRenderableByVersion = function (itemData, rendererContentVersion) {
   if (itemData == null || rendererContentVersion == null) {
-    throw new PerseusError("missing parameter to Perseus.isRenderable.item", Errors.InvalidInput);
+    throw new perseusCore.PerseusError("missing parameter to Perseus.isRenderable.item", perseusCore.Errors.InvalidInput);
   }
   if (itemData._multi) {
     const shape = inferItemShape$1(itemData);
@@ -47775,7 +48255,6 @@ exports.DashPicker = DashPicker;
 exports.Dependencies = dependencies;
 exports.EditorJsonify = EditorJsonify;
 exports.ElementContainer = ElementContainer;
-exports.Errors = Errors;
 exports.Expression = Expression;
 exports.GrapherUtil = util;
 exports.GrapherWidget = Grapher$1;
@@ -47792,7 +48271,6 @@ exports.Log = Log;
 exports.MatrixWidget = Matrix$1;
 exports.MultiItems = MultiItems;
 exports.NumericInput = NumericInput$1;
-exports.PerseusError = PerseusError;
 exports.PerseusExpressionAnswerFormConsidered = PerseusExpressionAnswerFormConsidered;
 exports.PerseusI18nContext = PerseusI18nContext;
 exports.PerseusI18nContextProvider = PerseusI18nContextProvider;