@khanacademy/perseus 26.0.0 → 27.0.0

package/dist/es/index.js

@@ -501,6 +501,7 @@ class InnerMathInput extends React.Component {
     }), /*#__PURE__*/React.createElement(Popover, {
       opened: this.state.keypadOpen,
       onClose: () => this.closeKeypad(),
+      portal: false,
       dismissEnabled: true,
       content: () => {
         var _this$props$keypadBut, _this$props;
@@ -730,7 +731,7 @@ const denylist = [
 // (technically the renderer still adds them)
 "key", "ref",
 // added by src/renderer.jsx
-"containerSizeClass", "widgetId", "onChange", "problemNum", "apiOptions", "questionCompleted", "findWidgets",
+"containerSizeClass", "widgetId", "onChange", "problemNum", "apiOptions", "questionCompleted", "findWidgets", "hintMode",
 // added by src/editor.jsx, for widgets removing themselves
 // this is soooo not the right place for this, but alas.
 "onRemove",
@@ -19014,6 +19015,7 @@ const replaceDeprecatedWidgets = () => {
   replaceWidget("reaction-diagram", "deprecated-standin");
   replaceWidget("sequence", "deprecated-standin");
   replaceWidget("simulator", "deprecated-standin");
+  replaceWidget("unit-input", "deprecated-standin");
 };
 const registerEditors = editorsToRegister => {
   editorsToRegister.forEach(editor => {
@@ -19047,6 +19049,7 @@ const replaceDeprecatedEditors = () => {
   replaceEditor("reaction-diagram", "deprecated-standin");
   replaceEditor("sequence", "deprecated-standin");
   replaceEditor("simulator", "deprecated-standin");
+  replaceEditor("unit-input", "deprecated-standin");
 };
 const getWidget = name => {
   var _widgets$name;
@@ -19731,6 +19734,7 @@ class Renderer extends React.Component {
         onBlur: _.partial(this._onWidgetBlur, id),
         findWidgets: this.findWidgets,
         reviewModeRubric: reviewModeRubric,
+        hintMode: this.props.hintMode,
         onChange: (newProps, cb, silent = false) => {
           this._setWidgetProps(id, newProps, cb, silent);
         },
@@ -20930,6 +20934,7 @@ Renderer.defaultProps = {
   findExternalWidgets: () => [],
   alwaysUpdate: false,
   reviewMode: false,
+  hintMode: false,
   serializedState: null,
   onSerializedStateUpdated: () => {},
   linterContext: PerseusLinter.linterContextDefault
@@ -28298,7 +28303,8 @@ const defaultGraphConfig = {
   graphDimensionsInPixels: [1, 1],
   width: 0,
   height: 0,
-  labels: []
+  labels: [],
+  hintMode: false
 };
 const GraphConfigContext = /*#__PURE__*/createContext(defaultGraphConfig);
 function useGraphConfig() {
@@ -29766,8 +29772,6 @@ const ItemExtras = [
 
 // prettier-ignore
 
-// prettier-ignore
-
 //prettier-ignore
 
 // A background image applied to various widgets.
@@ -30292,6 +30296,16 @@ function useDraggable(args) {
     const isKeyboard = type.includes("key");
     if (isKeyboard) {
       event == null || event.preventDefault();
+
+      // When a key is held down, we see multiple "keydown" events,
+      // followed by a single "keyup" event.
+      // For a single keypress, we only see a "keydown" event, no
+      // "keyup".
+      // We never want to process the keyup event as an intent to
+      // move so we bail on further processing here.
+      if (type === "keyup") {
+        return;
+      }
       const {
         direction: yDownDirection,
         altKey,
@@ -30392,7 +30406,8 @@ const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
   const {
     range,
     markings,
-    showTooltips
+    showTooltips,
+    hintMode
   } = useGraphConfig();
   const {
     point,
@@ -30434,7 +30449,7 @@ const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
       cursor
     },
     "data-testid": "movable-point",
-    tabIndex: tabIndex(focusBehavior)
+    tabIndex: hintMode ? -1 : tabIndex(focusBehavior)
   }, /*#__PURE__*/React.createElement("circle", {
     className: "movable-point-hitbox",
     r: hitboxSizePx / 2,
@@ -30522,7 +30537,8 @@ const MovableLine = props => {
 };
 function useControlPoint(point, color, onMovePoint) {
   const {
-    snapStep
+    snapStep,
+    hintMode
   } = useGraphConfig();
   const [focused, setFocused] = useState(false);
   const keyboardHandleRef = useRef(null);
@@ -30544,7 +30560,7 @@ function useControlPoint(point, color, onMovePoint) {
   const focusableHandle = /*#__PURE__*/React.createElement("g", {
     "data-testid": "movable-point__focusable-handle",
     className: "movable-point__focusable-handle",
-    tabIndex: 0,
+    tabIndex: hintMode ? -1 : 0,
     ref: keyboardHandleRef,
     onFocus: () => setFocused(true),
     onBlur: () => setFocused(false)
@@ -30577,7 +30593,8 @@ const Line$1 = props => {
   const {
     range,
     graphDimensionsInPixels,
-    snapStep
+    snapStep,
+    hintMode
   } = useGraphConfig();
   let startExtend = undefined;
   let endExtend = undefined;
@@ -30599,7 +30616,7 @@ const Line$1 = props => {
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("g", {
     ref: line,
-    tabIndex: 0,
+    tabIndex: hintMode ? -1 : 0,
     className: "movable-line",
     "data-testid": "movable-line",
     style: {
@@ -31110,6 +31127,9 @@ const PolygonGraph = props => {
     snapStep,
     snapTo
   } = props.graphState;
+  const {
+    hintMode
+  } = useGraphConfig();
 
   // TODO(benchristel): can the default set of points be removed here? I don't
   // think coords can be null.
@@ -31129,12 +31149,16 @@ const PolygonGraph = props => {
     constrain: p => ["angles", "sides"].includes(snapToValue) ? p : snap(snapStep, p)
   });
   const active = hovered || focused || dragging;
+  const lastMoveTime = React.useRef(0);
   const lines = getLines(points);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Polygon, {
     points: [...points],
     color: "var(--movable-line-stroke-color)",
     svgPolygonProps: {
-      strokeWidth: active ? "var(--movable-line-stroke-weight-active)" : "var(--movable-line-stroke-weight)"
+      strokeWidth: active ? "var(--movable-line-stroke-weight-active)" : "var(--movable-line-stroke-weight)",
+      style: {
+        fill: "transparent"
+      }
     }
   }), points.map((point, i) => {
     const pt1 = points.at(i - 1);
@@ -31165,10 +31189,11 @@ const PolygonGraph = props => {
     color: "transparent",
     svgPolygonProps: {
       ref,
-      tabIndex: 0,
+      tabIndex: hintMode ? -1 : 0,
       strokeWidth: TARGET_SIZE,
       style: {
-        cursor: dragging ? "grabbing" : "grab"
+        cursor: dragging ? "grabbing" : "grab",
+        fill: hovered ? "var(--mafs-blue)" : "transparent"
       },
       onFocus: () => setFocused(true),
       onBlur: () => setFocused(false),
@@ -31180,7 +31205,15 @@ const PolygonGraph = props => {
     key: "point-" + i,
     snapTo: snapTo,
     point: point,
-    onMove: destination => dispatch(actions.polygon.movePoint(i, destination))
+    onMove: destination => {
+      const now = Date.now();
+      const targetFPS = 40;
+      const moveThresholdTime = 1000 / targetFPS;
+      if (now - lastMoveTime.current > moveThresholdTime) {
+        dispatch(actions.polygon.movePoint(i, destination));
+        lastMoveTime.current = now;
+      }
+    }
   })));
 };
 function getLines(points) {
@@ -31289,7 +31322,8 @@ function MovableCircle(props) {
     onMove
   } = props;
   const {
-    snapStep
+    snapStep,
+    hintMode
   } = useGraphConfig();
   const draggableRef = useRef(null);
   const {
@@ -31304,7 +31338,7 @@ function MovableCircle(props) {
   const [radiiPx] = useTransformDimensionsToPixels([radius, radius]);
   return /*#__PURE__*/React.createElement("g", {
     ref: draggableRef,
-    tabIndex: 0,
+    tabIndex: hintMode ? -1 : 0,
     className: `movable-circle ${dragging ? "movable-circle--dragging" : ""}`
   }, /*#__PURE__*/React.createElement("ellipse", {
     className: "focus-ring",
@@ -31707,7 +31741,8 @@ const MafsGraph = props => {
   const {
     state,
     dispatch,
-    labels
+    labels,
+    hintMode
   } = props;
   const [width, height] = props.box;
   const tickStep = props.step;
@@ -31722,7 +31757,8 @@ const MafsGraph = props => {
       graphDimensionsInPixels: props.box,
       width,
       height,
-      labels
+      labels,
+      hintMode
     }
   }, /*#__PURE__*/React.createElement(View, {
     className: "mafs-graph",
@@ -31733,7 +31769,8 @@ const MafsGraph = props => {
       padding: "25px 25px 0 0",
       boxSizing: "content-box",
       marginLeft: "20px",
-      marginBottom: "20px"
+      marginBottom: "20px",
+      pointerEvents: hintMode ? "none" : "auto"
     }
   }, /*#__PURE__*/React.createElement(LegacyGrid, {
     box: props.box,
@@ -31764,7 +31801,7 @@ const MafsGraph = props => {
   }), props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLayer, {
     lockedFigures: props.lockedFigures,
     range: state.range
-  }), "/* Protractor */", props.showProtractor && /*#__PURE__*/React.createElement(Protractor, null), renderGraph({
+  }), props.showProtractor && /*#__PURE__*/React.createElement(Protractor, null), renderGraph({
     state,
     dispatch
   })))));
@@ -32793,7 +32830,6 @@ function mafsStateToInteractiveGraph(state) {
   return _extends({}, state);
 }
 const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _graph$startCoords;
   const {
     onChange,
     graph
@@ -32828,7 +32864,6 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   const snapTo = graph.type === "polygon" ? graph.snapTo : null;
   const showAngles = graph.type === "polygon" ? graph.showAngles : null;
   const showSides = graph.type === "polygon" ? graph.showSides : null;
-  const startCoords = (_graph$startCoords = graph.startCoords) != null ? _graph$startCoords : null;
   const originalPropsRef = useRef(props);
   const latestPropsRef = useLatestRef(props);
   useEffect(() => {
@@ -32839,7 +32874,7 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (latestPropsRef.current !== originalPropsRef.current) {
       dispatch(reinitialize(latestPropsRef.current));
     }
-  }, [graph.type, numSegments, numSides, snapTo, showAngles, showSides, startCoords, latestPropsRef, startCoords]);
+  }, [graph.type, numSegments, numSides, snapTo, showAngles, showSides, latestPropsRef, graph.startCoords]);
   return /*#__PURE__*/React.createElement(MafsGraph, _extends({}, props, {
     state: state,
     dispatch: dispatch
@@ -34100,9 +34135,6 @@ class LegacyInteractiveGraph extends React.Component {
       markings: this.props.markings,
       backgroundImage: this.props.backgroundImage,
       showProtractor: this.props.showProtractor,
-      showRuler: this.props.showRuler,
-      rulerLabel: this.props.rulerLabel,
-      rulerTicks: this.props.rulerTicks,
       onMouseDown: onMouseDown,
       onGraphieUpdated: this.setGraphie,
       setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable,
@@ -34119,9 +34151,6 @@ LegacyInteractiveGraph.defaultProps = {
   markings: "graph",
   showTooltips: false,
   showProtractor: false,
-  showRuler: false,
-  rulerLabel: "",
-  rulerTicks: 10,
   graph: {
     type: "linear"
   }
@@ -34159,7 +34188,8 @@ class InteractiveGraph extends React.Component {
         gridStep: gridStep,
         snapStep: snapStep,
         box: box,
-        showTooltips: !!this.props.showTooltips
+        showTooltips: !!this.props.showTooltips,
+        hintMode: this.props.hintMode
       }));
     }
     return /*#__PURE__*/React.createElement(LegacyInteractiveGraph, _extends({
@@ -34719,9 +34749,6 @@ InteractiveGraph.defaultProps = {
   markings: "graph",
   showTooltips: false,
   showProtractor: false,
-  showRuler: false,
-  rulerLabel: "",
-  rulerTicks: 10,
   graph: {
     type: "linear"
   }
@@ -43850,914 +43877,6 @@ var Table$1 = {
   isLintable: true
 };
 
-var isObject = function isObject(obj) {
-  return obj === Object(obj);
-};
-var merge = function merge() {
-  var obj = {};
-  for (var i = 0; i < arguments.length; i++) {
-    var source = arguments[i];
-    if (source) {
-      for (var prop in source) {
-        obj[prop] = source[prop];
-      }
-    }
-  }
-  return obj;
-};
-var clone = function clone(obj) {
-  if (!isObject(obj)) {
-    return obj;
-  }
-  return Array.isArray(obj) ? obj.slice() : merge(obj);
-};
-
-/* TODO batch *all* mutations
- * idea: freeze / thaw implementations for all types
- * lens constructor thaws, freeze delegates to type's freeze
- */
-
-// equivalents, without requiring it
-// find the implementation to use for a given object
-var dispatch = function dispatch(x) {
-  if (Array.isArray(x)) {
-    return arr;
-  } else if (isObject(x)) {
-    return obj;
-  } else if (typeof x === "string") {
-    return str;
-  }
-};
-
-// This is underscore with a different name
-var lens = function lens(obj) {
-  if (obj instanceof lens) {
-    return obj;
-  }
-  if (!(this instanceof lens)) {
-    return new lens(obj);
-  }
-  var ops = dispatch(obj);
-  this._wrapped = ops.thaw ? ops.thaw(obj) : obj;
-};
-lens.prototype.freeze = function () {
-  var obj = this._wrapped;
-  var ops = dispatch(obj);
-  return ops.freeze ? ops.freeze(obj) : obj;
-};
-lens.prototype.zoom = function (lensArr) {
-  if (this._zoomStack === undefined) {
-    this._zoomStack = [];
-  }
-  this._zoomStack.push({
-    zoom: lensArr,
-    wrapped: this._wrapped
-  });
-  this._wrapped = lens(this._wrapped).get(lensArr);
-  return this;
-};
-lens.prototype.deZoom = function () {
-  var frame = this._zoomStack.pop();
-  this._wrapped = lens(frame.wrapped).set(frame.zoom, this._wrapped).freeze();
-  return this;
-};
-lens.prototype.get = function (lensArr) {
-  var obj = this._wrapped;
-  for (var i = 0; i < lensArr.length; i++) {
-    obj = dispatch(obj).get(obj, lensArr[i]);
-  }
-  return obj;
-};
-lens.prototype.mod = function (lensArr, f) {
-  var obj = this._wrapped;
-  var newObj = clone(obj);
-  var ops = dispatch(obj);
-  if (lensArr.length === 0) {
-    this._wrapped = f(this._wrapped);
-  } else if (lensArr.length === 1) {
-    this._wrapped = ops.mod(newObj, lensArr[0], f);
-  } else {
-    var monocle = lensArr[0];
-    var shortLens = lensArr.slice(1);
-
-    // newObj = ops.mod(obj[monocle], shortLens, f);
-
-    newObj[monocle] = lens(obj[monocle]).mod(shortLens, f).freeze();
-    this._wrapped = newObj;
-  }
-  return this;
-};
-
-// TODO - move to individual files
-lens.prototype.merge = function (lensArr, props) {
-  this._wrapped = lens(this._wrapped).mod(lensArr, function (oldProps) {
-    return merge(oldProps, props);
-  }).freeze();
-  return this;
-};
-
-// Lens must have length >= 1 or there would be nothing to return
-lens.prototype.del = function (lensArr) {
-  var obj = this._wrapped;
-  var ops = dispatch(obj);
-  if (lensArr.length === 1) {
-    this._wrapped = ops.del(obj, lensArr[0]);
-  } else {
-    var monocle = lensArr[0];
-    var shortLens = lensArr.slice(1);
-    var newObj = clone(obj);
-    newObj[monocle] = lens(obj[monocle]).del(shortLens).freeze();
-    this._wrapped = newObj;
-  }
-  return this;
-};
-lens.prototype.set = function (lensArr, set) {
-  return this.mod(lensArr, function () {
-    return set;
-  });
-};
-
-// ARRAY FUNCTIONS
-
-const arr = {
-  get: function (arr, monocle) {
-    return arr[monocle];
-  },
-  set: function (arr, monocle, val) {
-    var newArr = arr.splice();
-    newArr[monocle] = val;
-    return newArr;
-  },
-  mod: function (arr, monocle, f) {
-    var newArr = arr.slice();
-    newArr[monocle] = f(arr[monocle]);
-    return newArr;
-  },
-  del: function (arr, monocle) {
-    var newArr = arr.slice();
-    newArr.splice(monocle, 1);
-    return newArr;
-  }
-};
-
-/*
-// Lens must point to a member of an array. We'll insert into that array.
-lens.prototype.insertAt = function(lensArr, toInsert) {
-    var obj = this._wrapped;
-
-    var arrLens = lensArr.slice(0, -1);
-    var arr = lens(obj).get(arrLens).slice(); // slice to copy
-
-    var arrIdx = lensArr[lensArr.length-1];
-    arr.splice(arrIdx, 0, toInsert);
-    return lens(obj).set(arrLens, arr);
-};
-
-lens.prototype.insertBefore = lens.prototype.insertAt;
-lens.prototype.insertAfter = function(lensArr, toInsert) {
-    var newLens = lensArr.slice();
-    newLens[newLens.length-1] += 1;
-    return lens(this._wrapped).insertAt(newLens, toInsert);
-};
-*/
-
-// OBJECT FUNCTIONS
-
-const obj = {
-  get: function (obj, monocle) {
-    return obj[monocle];
-  },
-  set: function (obj, monocle, val) {
-    var newObj = clone(obj);
-    newObj[monocle] = val;
-    return newObj;
-  },
-  mod: function (obj, monocle, f) {
-    var newObj = clone(obj);
-    newObj[monocle] = f(obj[monocle]);
-    return newObj;
-  },
-  del: function (obj, monocle) {
-    var newObj = clone(obj);
-    delete newObj[monocle];
-    return newObj;
-  }
-};
-
-// STRING FUNCTIONS
-
-const str = {
-  get: function (arr, monocle) {
-    return arr[monocle];
-  },
-  set: function (arr, monocle, val) {
-    var newArr = arr.splice();
-    newArr[monocle] = val;
-    return newArr;
-  },
-  mod: function (arr, monocle, f) {
-    var newArr = arr.splice();
-    newArr[monocle] = f(arr[monocle]);
-    return newArr;
-  },
-  del: function (arr, monocle) {
-    var newArr = arr.slice();
-    newArr.splice(monocle);
-    return newArr;
-  }
-};
-
-/* eslint-disable eqeqeq, @typescript-eslint/no-unused-vars */
-/*
- * A class for formatting number to significant digits.
- * Copyright (C) 2001 Stephen Ostermiller
- * http://ostermiller.org/contact.pl?regarding?JavaScript+Significant+Figures
- *
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; either version 2 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- */
-
-/**
- * An object tho both scans floating points to
- * determine the number of significant figures.
- * and can display a floating point using any number
- * of significant figures.
- *
- * @param s A string representation of a floating point.
- */
-class SignificantFigures {
-  constructor(s) {
-    this.order = void 0;
-    this.mantissa = void 0;
-    this.positive = void 0;
-    this.sigFigs = void 0;
-    this.sigDecs = void 0;
-    this.order = parseOrder(s);
-    this.mantissa = parseMantissa(s);
-    this.positive = parseSign(s);
-
-    /**
-     * Get the number of significant figures this object uses.
-     * Leading zeros are not significant.  Traling zeros up to
-     * and after the decimal point are significant.
-     * Significant figures is good to know when the number is
-     * used in multiplication.
-     *
-     * @return the number of significant figures.
-     */
-    this.sigFigs = this.mantissa.length;
-
-    /**
-     * Get the least significant decimal this object uses.
-     * This is useful to know if a number is being used
-     * in addition.
-     * 400 - 2 the hundreds place (10^2) is the least significant decimal.
-     * 75 - 0 the ones place (10^0) is the least significant decimal.
-     * .543 - -3 the 1/1000's place (10^-3) is the least significant decimal.
-     *
-     * @return an integer representing the least significant decimal place.
-     */
-    this.sigDecs = this.order - this.mantissa.length;
-  }
-}
-
-/**
- * Format a floating point for display using the specified
- * number of significant figures and least significant decimal.
- * Scientific notation may used by this method if this
- * object is very small, very large, has many significant
- * figures, or the number of significant figures would be
- * ambiguous in the output if scientific notation were not
- * used.
- *
- * @param f A floating point number that should be displayed
- * @param sigFigs desired number of significant figures (integer).
- * @param sigDecs the least significant decimal place (integer).
- * @param scientific true iff scientific notation should always be used.
- * @return a string of this object formatted correctly.
- */
-function displaySigFigs(f, sigFigs, sigDecs, scientific) {
-  const s = "" + f;
-  let order = parseOrder(s);
-  let mantissa = parseMantissa(s);
-  let positive = parseSign(s);
-  let add;
-  let decAdd;
-  let sigAdd;
-  let zeroScientific = false;
-  if (f == 0 || mantissa == "" || mantissa == "0") {
-    mantissa = "";
-    for (let i = 0; i < sigFigs; i++) {
-      mantissa += "0";
-    }
-    order = sigFigs + sigDecs;
-    if (sigDecs < 0 && -sigDecs >= sigFigs) {
-      zeroScientific = true;
-    }
-  } else {
-    decAdd = order - mantissa.length - sigDecs;
-    sigAdd = sigFigs - mantissa.length;
-    add = Math.min(sigAdd, decAdd);
-    if (add < 0) {
-      let rounded = round(mantissa, -add);
-      if (rounded.length > mantissa.length + add) {
-        order++;
-        if (decAdd > sigAdd) {
-          rounded = round(rounded, 1);
-        }
-      }
-      mantissa = rounded;
-    } else if (add > 0) {
-      for (let i = 0; i < add; i++) {
-        mantissa += "0";
-      }
-    }
-    if (mantissa == "" || mantissa == "0") {
-      mantissa = "0";
-      positive = true;
-      order = 1 + sigDecs;
-      if (order != 0) {
-        zeroScientific = true;
-      }
-    }
-  }
-  const useScientific = scientific || mantissa.length > 20 || order > 4 || order < -2 || order - mantissa.length > 0 && trailingZeros(mantissa) > 0 || zeroScientific;
-  let returnVal = "";
-  if (!positive) {
-    returnVal += "-";
-  }
-  if (useScientific) {
-    returnVal += mantissa.charAt(0);
-    if (mantissa.length > 1) {
-      returnVal += "." + mantissa.substring(1, mantissa.length);
-    }
-    if (order - 1 != 0) {
-      returnVal += " x 10^" + (order - 1);
-    }
-  } else {
-    let wholePart = "";
-    let fractPart = "";
-    let needDot = true;
-    if (order > 0) {
-      if (mantissa.length > order) {
-        wholePart = mantissa.substring(0, order);
-        fractPart = mantissa.substring(order, mantissa.length);
-      } else {
-        wholePart = mantissa;
-        needDot = trailingZeros(mantissa) != 0;
-        for (let i = 0; i < order - mantissa.length; i++) {
-          wholePart += "0";
-        }
-      }
-    } else {
-      for (let i = 0; i < -order; i++) {
-        fractPart += "0";
-      }
-      fractPart += mantissa;
-    }
-    returnVal += (wholePart == "" ? "0" : wholePart) + (needDot ? "." : "") + fractPart;
-  }
-  return returnVal;
-}
-
-/**
- * Count the significant trailing zeros on this object.
- *
- * @return the number of trailing zeros
- */
-function trailingZeros(mantissa) {
-  let zeros = 0;
-  for (let i = mantissa.length - 1; i >= 0; i--) {
-    const c = mantissa.charAt(i);
-    if (c == "0") {
-      zeros++;
-    } else {
-      return zeros;
-    }
-  }
-  return zeros;
-}
-
-/**
- * Parse a string representation of a floating point
- * and pull out the sign.
- *
- * @param s the string representation of a floating point.
- * @return true iff this is a positive number
- */
-function parseSign(s) {
-  let beginning = true;
-  let seenDot = false;
-  let seenSomething = false;
-  let zeros = "";
-  let all = "";
-  let pos = true;
-  for (let i = 0; i < s.length; i++) {
-    const c = s.charAt(i);
-    if (c >= "1" && c <= "9") {
-      all += zeros + c;
-      zeros = "";
-      seenSomething = true;
-      beginning = false;
-    } else if (c == "0") {
-      if (seenDot) {
-        if (seenSomething) {
-          all += zeros + c;
-          zeros = "";
-        }
-      } else {
-        if (seenSomething) {
-          zeros += c;
-        }
-      }
-      beginning = false;
-    } else if (!seenDot && c == ".") {
-      all += zeros;
-      zeros = "";
-      seenDot = true;
-      beginning = false;
-    } else if (c == "e" || c == "E" && i + 1 < s.length) {
-      parseInt(s.substring(i + 1, s.length));
-      i = s.length;
-    } else if (beginning && (c == "+" || c == "-")) {
-      if (c == "-") {
-        pos = !pos;
-      }
-    }
-  }
-  if (all == "") {
-    return true;
-  }
-  return pos;
-}
-
-/**
- * Parse a string representation of a floating point
- * and pull out the mantissa.
- *
- * @param s the string representation of a floating point.
- * @return the mantissa of this number.
- */
-function parseMantissa(s) {
-  let seenDot = false;
-  let seenSomething = false;
-  let zeros = "";
-  let leadZeros = "";
-  let all = "";
-  for (let i = 0; i < s.length; i++) {
-    const c = s.charAt(i);
-    if (c >= "1" && c <= "9") {
-      all += zeros + c;
-      zeros = "";
-      seenSomething = true;
-    } else if (c == "0") {
-      if (seenDot) {
-        if (seenSomething) {
-          all += zeros + c;
-          zeros = "";
-        } else {
-          leadZeros += c;
-        }
-      } else {
-        if (seenSomething) {
-          leadZeros += c;
-          zeros += c;
-        } else {
-          leadZeros += c;
-        }
-      }
-    } else if (!seenDot && c == ".") {
-      all += zeros;
-      zeros = "";
-      seenDot = true;
-    } else if (c == "e" || c == "E" && i + 1 < s.length) {
-      parseInt(s.substring(i + 1, s.length));
-      i = s.length;
-    } else ;
-  }
-  if (all == "") {
-    return leadZeros;
-  }
-  return all;
-}
-
-/**
- * Parse a string representation of a floating point
- * and pull out the exponent.
- *
- * @param s the string representation of a floating point.
- * @return (integer) the number after the e.
- */
-function parseOrder(s) {
-  let seenDot = false;
-  let seenSomething = false;
-  let zeros = "";
-  let all = "";
-  let decPlaces = 0;
-  let totalDecs = 0;
-  for (let i = 0; i < s.length; i++) {
-    const c = s.charAt(i);
-    if (c >= "1" && c <= "9") {
-      all += zeros + c;
-      zeros = "";
-      seenSomething = true;
-      if (!seenDot) {
-        totalDecs++;
-        decPlaces++;
-      }
-    } else if (c == "0") {
-      if (seenDot) {
-        if (seenSomething) {
-          all += zeros + c;
-          zeros = "";
-        } else {
-          decPlaces--;
-        }
-      } else {
-        totalDecs++;
-        if (seenSomething) {
-          decPlaces++;
-          zeros += c;
-        }
-      }
-    } else if (!seenDot && c == ".") {
-      all += zeros;
-      zeros = "";
-      seenDot = true;
-    } else if (c == "e" || c == "E" && i + 1 < s.length) {
-      const raised = parseInt(s.substring(i + 1, s.length));
-      decPlaces += raised;
-      totalDecs += raised;
-      i = s.length;
-    } else ;
-  }
-  if (all == "") {
-    return totalDecs;
-  }
-  return decPlaces;
-}
-
-/**
- * Remove the specified number of digits from string by
- * rounding.  Proper rounding rules for scientific purposes
- * are followed.
- * This method may cause an extra significant figure
- * to be added to the number.  For example, if 999999
- * were rounded, A one would carry over and become
- * a significant figure.  Those who call this method
- * should check for this and call round again if needed.
- *
- * @param mantissa A string representing an whole number of arbitrary length.
- * @param digits A number of digits to remove
- * @return A string represted the rounded version of mantissa
- */
-function round(mantissa, digits) {
-  const last = mantissa.length - digits - 1;
-  if (last < 0) {
-    return "";
-  }
-  if (last >= mantissa.length - 1) {
-    return mantissa;
-  }
-  const nextToLast = mantissa.charAt(last + 1);
-  const lastChar = mantissa.charAt(last);
-  let roundUp = false;
-  if (nextToLast > "5") {
-    roundUp = true;
-  } else if (nextToLast == "5") {
-    for (let j = last + 2; j < mantissa.length; j++) {
-      if (mantissa.charAt(j) != "0") {
-        roundUp = true;
-      }
-    }
-    // @ts-expect-error - TS2362 - The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
-    if (lastChar % 2 == 1) {
-      roundUp = true;
-    }
-  }
-  let result = "";
-  for (let i = last; i >= 0; i--) {
-    const c = mantissa.charAt(i);
-    if (roundUp) {
-      let nextChar;
-      if (c == "9") {
-        nextChar = "0";
-      } else {
-        switch (c) {
-          case "0":
-            nextChar = "1";
-            break;
-          case "1":
-            nextChar = "2";
-            break;
-          case "2":
-            nextChar = "3";
-            break;
-          case "3":
-            nextChar = "4";
-            break;
-          case "4":
-            nextChar = "5";
-            break;
-          case "5":
-            nextChar = "6";
-            break;
-          case "6":
-            nextChar = "7";
-            break;
-          case "7":
-            nextChar = "8";
-            break;
-          case "8":
-            nextChar = "9";
-            break;
-        }
-        roundUp = false;
-      }
-      result = nextChar + result;
-    } else {
-      result = c + result;
-    }
-  }
-  if (roundUp) {
-    result = "1" + result;
-  }
-  return result;
-}
-
-// TODO(joel): teach KAS how to accept an answer only if it's expressed in
-const ALL = "all";
-const countSigfigs = function countSigfigs(value) {
-  return new SignificantFigures(value).sigFigs;
-};
-/* I just wrote this, but it's old by analogy to `OldExpression`, in that it's
- * the version that non-mathquill platforms get stuck with. Constructed with an
- * <input>, a parser, popsicle sticks, and glue.
- *
- * In the same way as OldExpression, this parses continuously as you type, then
- * shows and hides an error buddy. The error message is only shown after a
- * rolling two second delay, but hidden immediately on further typing.
- */
-class OldUnitInput extends React.Component {
-  constructor(..._args) {
-    super(..._args);
-    this._errorTimeout = void 0;
-    this._showError = () => {
-      if (this.props.value === "") {
-        return;
-      }
-
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2769 - No overload matches this call.
-      const $error = $(ReactDOM__default.findDOMNode(this.refs.error));
-      // @ts-expect-error - TS2339 - Property 'is' does not exist on type 'JQueryStatic'.
-      if (!$error.is(":visible")) {
-        $error
-        // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-        .css({
-          top: 50,
-          opacity: 0.1
-        }).show().animate({
-          top: 0,
-          opacity: 1.0
-        }, 300);
-      }
-    };
-    this._hideError = () => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2769 - No overload matches this call.
-      const $error = $(ReactDOM__default.findDOMNode(this.refs.error));
-      // @ts-expect-error - TS2339 - Property 'is' does not exist on type 'JQueryStatic'.
-      if ($error.is(":visible")) {
-        // @ts-expect-error - TS2339 - Property 'animate' does not exist on type 'JQueryStatic'.
-        $error.animate({
-          top: 50,
-          opacity: 0.1
-        }, 300, function () {
-          // eslint-disable-next-line @babel/no-invalid-this
-          // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-          // eslint-disable-next-line @babel/no-invalid-this
-          $(this).hide();
-        });
-      }
-    };
-    this.change = (...args) => {
-      // @ts-expect-error - TS2345 - Argument of type 'readonly any[]' is not assignable to parameter of type 'any[]'.
-      return change.apply(this, args);
-    };
-    this.handleBlur = () => {
-      this.props.onBlur([]);
-      // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-      // eslint-disable-next-line no-restricted-syntax
-      // @ts-expect-error - TS2769 - No overload matches this call.
-      clearTimeout(this._errorTimeout);
-      if (!KAS.unitParse(this.props.value).parsed) {
-        this._showError();
-      }
-    };
-    this.handleChange = event => {
-      this._hideError();
-      this.props.onChange({
-        value: event.target.value
-      });
-    };
-    this.simpleValidate = (rubric, onInputError) => {
-      return OldUnitInput.validate(this.getUserInput(), rubric, this.context.strings);
-    };
-    this.getUserInput = () => {
-      return this.props.value;
-    };
-    // begin mobile stuff
-    this.getInputPaths = () => {
-      // The widget itself is an input, so we return a single empty list to
-      // indicate this.
-      return [[]];
-    };
-    this.focusInputPath = inputPath => {
-      // eslint-disable-next-line react/no-string-refs
-      const input = ReactDOM__default.findDOMNode(this.refs.input);
-      if (input) {
-        /**
-         * TODO(somewhatabstract, JIRA-XXXX):
-         * Change to using a ref callback so that focus() can be
-         * accessed.
-         */
-        // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-        input.focus();
-      }
-    };
-    this.handleFocus = () => {
-      this.props.onFocus([]);
-    };
-    this.blurInputPath = inputPath => {
-      // eslint-disable-next-line react/no-string-refs
-      const input = ReactDOM__default.findDOMNode(this.refs.input);
-      if (input) {
-        /**
-         * TODO(somewhatabstract, JIRA-XXXX):
-         * Change to using a ref callback so that focus() can be
-         * accessed.
-         */
-        // @ts-expect-error - TS2339 - Property 'blur' does not exist on type 'Element | Text'.
-        input.blur();
-      }
-    };
-    this.setInputValue = (path, newValue, cb) => {
-      this.props.onChange({
-        value: newValue
-      }, cb);
-    };
-    this.getDOMNodeForPath = () => {
-      // eslint-disable-next-line react/no-string-refs
-      return ReactDOM__default.findDOMNode(this.refs.input);
-    };
-    this.getGrammarTypeForPath = inputPath => {
-      return "unit";
-    };
-  }
-  static validate(userInput, rubric, strings) {
-    const answer = KAS.unitParse(rubric.value).expr;
-    const guess = KAS.unitParse(userInput);
-    if (!guess.parsed) {
-      return {
-        type: "invalid",
-        message: strings.dontUnderstandUnits
-      };
-    }
-
-    // Note: we check sigfigs, then numerical correctness, then units, so
-    // the most significant things come last, that way the user will see
-    // the most important message.
-    let message = null;
-
-    // did the user specify the right number of sigfigs?
-    // TODO(joel) - add a grading mode where the wrong number of sigfigs
-    // isn't marked wrong
-    const sigfigs = rubric.sigfigs;
-    const sigfigsCorrect = countSigfigs(guess.coefficient) === sigfigs;
-    if (!sigfigsCorrect) {
-      message = strings.checkSigFigs;
-    }
-
-    // now we need to check that the answer is correct to the precision we
-    // require.
-    let numericallyCorrect;
-    try {
-      const x = new KAS.Var("x");
-      const equality = new KAS.Eq(answer.simplify(), "=", new KAS.Mul(x, guess.expr.simplify()));
-      const conversion = equality.solveLinearEquationForVariable(x);
-
-      // Make sure the conversion factor between the user's input answer
-      // and the canonical answer is 1, to sigfig places.
-      // TODO(joel) is this sound?
-      numericallyCorrect = Number(conversion.eval()).toPrecision(sigfigs) === Number(1).toPrecision(sigfigs);
-    } catch (e) {
-      numericallyCorrect = false;
-    }
-    if (!numericallyCorrect) {
-      message = strings.answerNumericallyIncorrect;
-    }
-    let kasCorrect;
-    const guessUnit = primUnits(guess.expr.simplify());
-    const answerUnit = primUnits(answer.simplify());
-    if (rubric.accepting === ALL) {
-      // We're accepting all units - KAS does the hard work of figuring
-      // out if the user's unit is equivalent to the author's unit.
-      kasCorrect = KAS.compare(guessUnit, answerUnit).equal;
-    } else {
-      // Are any of the accepted units the same as what the user entered?
-      kasCorrect = _(rubric.acceptingUnits).any(unit => {
-        const thisAnswerUnit = primUnits(KAS.unitParse(unit).unit.simplify());
-        return KAS.compare(thisAnswerUnit, guessUnit
-        // TODO(joel) - make this work as intended.
-        // { form: true }
-        ).equal;
-      });
-    }
-    if (!kasCorrect) {
-      message = strings.checkUnits;
-    }
-    const correct = kasCorrect && numericallyCorrect && sigfigsCorrect;
-    return {
-      type: "points",
-      earned: correct ? 1 : 0,
-      total: 1,
-      message
-    };
-  }
-  componentDidUpdate() {
-    // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-    // eslint-disable-next-line no-restricted-syntax
-    // @ts-expect-error - TS2769 - No overload matches this call.
-    clearTimeout(this._errorTimeout);
-    if (KAS.unitParse(this.props.value).parsed) {
-      this._hideError();
-    } else {
-      // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-      // eslint-disable-next-line no-restricted-syntax
-      // @ts-expect-error - TS2322 - Type 'Timeout' is not assignable to type 'number'.
-      this._errorTimeout = setTimeout(this._showError, 2000);
-    }
-  }
-  componentWillUnmount() {
-    // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-    // eslint-disable-next-line no-restricted-syntax
-    // @ts-expect-error - TS2769 - No overload matches this call.
-    clearTimeout(this._errorTimeout);
-  }
-  // end mobile stuff
-  // TODO(joel) think about showing the error buddy
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "old-unit-input"
-    }, /*#__PURE__*/React.createElement("input", {
-      onChange: this.handleChange,
-      ref: "input" // eslint-disable-line react/no-string-refs
-      ,
-      className: ClassNames.INTERACTIVE,
-      value: this.props.value,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur
-    }), /*#__PURE__*/React.createElement("div", {
-      ref: "error",
-      className: "error",
-      style: {
-        display: "none"
-      }
-    }, this.context.strings.dontUnderstand));
-  }
-}
-
-// Extract the primitive units from a unit expression. This first simplifies
-// `expr` to a `Mul` like "5 kg m / s^2" then removes the first term.
-OldUnitInput.contextType = PerseusI18nContext;
-OldUnitInput.defaultProps = {
-  apiOptions: ApiOptions.defaults,
-  value: ""
-};
-const primUnits = function primUnits(expr) {
-  return expr.simplify().asMul().partition()[1].flatten().simplify();
-};
-var Unit = {
-  name: "unit-input",
-  displayName: "Unit input",
-  defaultAlignment: "inline-block",
-  widget: OldUnitInput,
-  transform: x => lens(x).del(["value"]).freeze(),
-  version: {
-    major: 0,
-    minor: 1
-  },
-  hidden: true
-};
-
 /**
  * This is a component that adds a link to the transcript for embedded videos in articles.
  */
@@ -44930,7 +44049,7 @@ var Video$1 = {
 };
 
 /* eslint-disable import/no-named-as-default */
-var extraWidgets = [Categorizer$1, CSProgram$1, Dropdown$1, Explanation$1, Definition$1, Grapher$1, GradedGroup$1, GradedGroupSet$1, Group$1, Iframe$1, Image$1, Interactive, InteractiveGraph$1, LabelImage$1, Matrix$1, Matcher$1, Measurer$1, Molecule$1, NumberLine$1, Orderer$1, Passage$1, PassageRef$1, PassageRefTarget$1, Plotter$1, PythonProgram$1, Sorter$1, Table$1, Unit, Video$1, DeprecatedStandin$1];
+var extraWidgets = [Categorizer$1, CSProgram$1, Dropdown$1, Explanation$1, Definition$1, Grapher$1, GradedGroup$1, GradedGroupSet$1, Group$1, Iframe$1, Image$1, Interactive, InteractiveGraph$1, LabelImage$1, Matrix$1, Matcher$1, Measurer$1, Molecule$1, NumberLine$1, Orderer$1, Passage$1, PassageRef$1, PassageRefTarget$1, Plotter$1, PythonProgram$1, Sorter$1, Table$1, Video$1, DeprecatedStandin$1];
 
 /**
  * This should be called by all clients, specifying whether extra widgets are
@@ -44970,7 +44089,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "26.0.0";
+const libVersion = "27.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45212,6 +44331,7 @@ class HintRenderer extends React.Component {
       // eslint-disable-next-line react/no-string-refs
       , {
         ref: "renderer",
+        hintMode: true,
         widgets: hint.widgets,
         content: hint.content || "",
         images: hint.images,
@@ -46519,6 +45639,223 @@ function treeToItem(node) {
   };
 }
 
+var isObject = function isObject(obj) {
+  return obj === Object(obj);
+};
+var merge = function merge() {
+  var obj = {};
+  for (var i = 0; i < arguments.length; i++) {
+    var source = arguments[i];
+    if (source) {
+      for (var prop in source) {
+        obj[prop] = source[prop];
+      }
+    }
+  }
+  return obj;
+};
+var clone = function clone(obj) {
+  if (!isObject(obj)) {
+    return obj;
+  }
+  return Array.isArray(obj) ? obj.slice() : merge(obj);
+};
+
+/* TODO batch *all* mutations
+ * idea: freeze / thaw implementations for all types
+ * lens constructor thaws, freeze delegates to type's freeze
+ */
+
+// equivalents, without requiring it
+// find the implementation to use for a given object
+var dispatch = function dispatch(x) {
+  if (Array.isArray(x)) {
+    return arr;
+  } else if (isObject(x)) {
+    return obj;
+  } else if (typeof x === "string") {
+    return str;
+  }
+};
+
+// This is underscore with a different name
+var lens = function lens(obj) {
+  if (obj instanceof lens) {
+    return obj;
+  }
+  if (!(this instanceof lens)) {
+    return new lens(obj);
+  }
+  var ops = dispatch(obj);
+  this._wrapped = ops.thaw ? ops.thaw(obj) : obj;
+};
+lens.prototype.freeze = function () {
+  var obj = this._wrapped;
+  var ops = dispatch(obj);
+  return ops.freeze ? ops.freeze(obj) : obj;
+};
+lens.prototype.zoom = function (lensArr) {
+  if (this._zoomStack === undefined) {
+    this._zoomStack = [];
+  }
+  this._zoomStack.push({
+    zoom: lensArr,
+    wrapped: this._wrapped
+  });
+  this._wrapped = lens(this._wrapped).get(lensArr);
+  return this;
+};
+lens.prototype.deZoom = function () {
+  var frame = this._zoomStack.pop();
+  this._wrapped = lens(frame.wrapped).set(frame.zoom, this._wrapped).freeze();
+  return this;
+};
+lens.prototype.get = function (lensArr) {
+  var obj = this._wrapped;
+  for (var i = 0; i < lensArr.length; i++) {
+    obj = dispatch(obj).get(obj, lensArr[i]);
+  }
+  return obj;
+};
+lens.prototype.mod = function (lensArr, f) {
+  var obj = this._wrapped;
+  var newObj = clone(obj);
+  var ops = dispatch(obj);
+  if (lensArr.length === 0) {
+    this._wrapped = f(this._wrapped);
+  } else if (lensArr.length === 1) {
+    this._wrapped = ops.mod(newObj, lensArr[0], f);
+  } else {
+    var monocle = lensArr[0];
+    var shortLens = lensArr.slice(1);
+
+    // newObj = ops.mod(obj[monocle], shortLens, f);
+
+    newObj[monocle] = lens(obj[monocle]).mod(shortLens, f).freeze();
+    this._wrapped = newObj;
+  }
+  return this;
+};
+
+// TODO - move to individual files
+lens.prototype.merge = function (lensArr, props) {
+  this._wrapped = lens(this._wrapped).mod(lensArr, function (oldProps) {
+    return merge(oldProps, props);
+  }).freeze();
+  return this;
+};
+
+// Lens must have length >= 1 or there would be nothing to return
+lens.prototype.del = function (lensArr) {
+  var obj = this._wrapped;
+  var ops = dispatch(obj);
+  if (lensArr.length === 1) {
+    this._wrapped = ops.del(obj, lensArr[0]);
+  } else {
+    var monocle = lensArr[0];
+    var shortLens = lensArr.slice(1);
+    var newObj = clone(obj);
+    newObj[monocle] = lens(obj[monocle]).del(shortLens).freeze();
+    this._wrapped = newObj;
+  }
+  return this;
+};
+lens.prototype.set = function (lensArr, set) {
+  return this.mod(lensArr, function () {
+    return set;
+  });
+};
+
+// ARRAY FUNCTIONS
+
+const arr = {
+  get: function (arr, monocle) {
+    return arr[monocle];
+  },
+  set: function (arr, monocle, val) {
+    var newArr = arr.splice();
+    newArr[monocle] = val;
+    return newArr;
+  },
+  mod: function (arr, monocle, f) {
+    var newArr = arr.slice();
+    newArr[monocle] = f(arr[monocle]);
+    return newArr;
+  },
+  del: function (arr, monocle) {
+    var newArr = arr.slice();
+    newArr.splice(monocle, 1);
+    return newArr;
+  }
+};
+
+/*
+// Lens must point to a member of an array. We'll insert into that array.
+lens.prototype.insertAt = function(lensArr, toInsert) {
+    var obj = this._wrapped;
+
+    var arrLens = lensArr.slice(0, -1);
+    var arr = lens(obj).get(arrLens).slice(); // slice to copy
+
+    var arrIdx = lensArr[lensArr.length-1];
+    arr.splice(arrIdx, 0, toInsert);
+    return lens(obj).set(arrLens, arr);
+};
+
+lens.prototype.insertBefore = lens.prototype.insertAt;
+lens.prototype.insertAfter = function(lensArr, toInsert) {
+    var newLens = lensArr.slice();
+    newLens[newLens.length-1] += 1;
+    return lens(this._wrapped).insertAt(newLens, toInsert);
+};
+*/
+
+// OBJECT FUNCTIONS
+
+const obj = {
+  get: function (obj, monocle) {
+    return obj[monocle];
+  },
+  set: function (obj, monocle, val) {
+    var newObj = clone(obj);
+    newObj[monocle] = val;
+    return newObj;
+  },
+  mod: function (obj, monocle, f) {
+    var newObj = clone(obj);
+    newObj[monocle] = f(obj[monocle]);
+    return newObj;
+  },
+  del: function (obj, monocle) {
+    var newObj = clone(obj);
+    delete newObj[monocle];
+    return newObj;
+  }
+};
+
+// STRING FUNCTIONS
+
+const str = {
+  get: function (arr, monocle) {
+    return arr[monocle];
+  },
+  set: function (arr, monocle, val) {
+    var newArr = arr.splice();
+    newArr[monocle] = val;
+    return newArr;
+  },
+  mod: function (arr, monocle, f) {
+    var newArr = arr.splice();
+    newArr[monocle] = f(arr[monocle]);
+    return newArr;
+  },
+  del: function (arr, monocle) {
+    var newArr = arr.slice();
+    newArr.splice(monocle);
+    return newArr;
+  }
+};
+
 const _excluded = ["item", "children", "shape", "serializedState", "onSerializedStateUpdated"];
 
 // TODO(mdr)
@@ -47118,6 +46455,372 @@ function violatingWidgets(itemData) {
   return _.uniq(widgets);
 }
 
+/* eslint-disable eqeqeq, @typescript-eslint/no-unused-vars */
+
+/**
+ * Format a floating point for display using the specified
+ * number of significant figures and least significant decimal.
+ * Scientific notation may used by this method if this
+ * object is very small, very large, has many significant
+ * figures, or the number of significant figures would be
+ * ambiguous in the output if scientific notation were not
+ * used.
+ *
+ * @param f A floating point number that should be displayed
+ * @param sigFigs desired number of significant figures (integer).
+ * @param sigDecs the least significant decimal place (integer).
+ * @param scientific true iff scientific notation should always be used.
+ * @return a string of this object formatted correctly.
+ */
+function displaySigFigs(f, sigFigs, sigDecs, scientific) {
+  const s = "" + f;
+  let order = parseOrder(s);
+  let mantissa = parseMantissa(s);
+  let positive = parseSign(s);
+  let add;
+  let decAdd;
+  let sigAdd;
+  let zeroScientific = false;
+  if (f == 0 || mantissa == "" || mantissa == "0") {
+    mantissa = "";
+    for (let i = 0; i < sigFigs; i++) {
+      mantissa += "0";
+    }
+    order = sigFigs + sigDecs;
+    if (sigDecs < 0 && -sigDecs >= sigFigs) {
+      zeroScientific = true;
+    }
+  } else {
+    decAdd = order - mantissa.length - sigDecs;
+    sigAdd = sigFigs - mantissa.length;
+    add = Math.min(sigAdd, decAdd);
+    if (add < 0) {
+      let rounded = round(mantissa, -add);
+      if (rounded.length > mantissa.length + add) {
+        order++;
+        if (decAdd > sigAdd) {
+          rounded = round(rounded, 1);
+        }
+      }
+      mantissa = rounded;
+    } else if (add > 0) {
+      for (let i = 0; i < add; i++) {
+        mantissa += "0";
+      }
+    }
+    if (mantissa == "" || mantissa == "0") {
+      mantissa = "0";
+      positive = true;
+      order = 1 + sigDecs;
+      if (order != 0) {
+        zeroScientific = true;
+      }
+    }
+  }
+  const useScientific = scientific || mantissa.length > 20 || order > 4 || order < -2 || order - mantissa.length > 0 && trailingZeros(mantissa) > 0 || zeroScientific;
+  let returnVal = "";
+  if (!positive) {
+    returnVal += "-";
+  }
+  if (useScientific) {
+    returnVal += mantissa.charAt(0);
+    if (mantissa.length > 1) {
+      returnVal += "." + mantissa.substring(1, mantissa.length);
+    }
+    if (order - 1 != 0) {
+      returnVal += " x 10^" + (order - 1);
+    }
+  } else {
+    let wholePart = "";
+    let fractPart = "";
+    let needDot = true;
+    if (order > 0) {
+      if (mantissa.length > order) {
+        wholePart = mantissa.substring(0, order);
+        fractPart = mantissa.substring(order, mantissa.length);
+      } else {
+        wholePart = mantissa;
+        needDot = trailingZeros(mantissa) != 0;
+        for (let i = 0; i < order - mantissa.length; i++) {
+          wholePart += "0";
+        }
+      }
+    } else {
+      for (let i = 0; i < -order; i++) {
+        fractPart += "0";
+      }
+      fractPart += mantissa;
+    }
+    returnVal += (wholePart == "" ? "0" : wholePart) + (needDot ? "." : "") + fractPart;
+  }
+  return returnVal;
+}
+
+/**
+ * Count the significant trailing zeros on this object.
+ *
+ * @return the number of trailing zeros
+ */
+function trailingZeros(mantissa) {
+  let zeros = 0;
+  for (let i = mantissa.length - 1; i >= 0; i--) {
+    const c = mantissa.charAt(i);
+    if (c == "0") {
+      zeros++;
+    } else {
+      return zeros;
+    }
+  }
+  return zeros;
+}
+
+/**
+ * Parse a string representation of a floating point
+ * and pull out the sign.
+ *
+ * @param s the string representation of a floating point.
+ * @return true iff this is a positive number
+ */
+function parseSign(s) {
+  let beginning = true;
+  let seenDot = false;
+  let seenSomething = false;
+  let zeros = "";
+  let all = "";
+  let pos = true;
+  for (let i = 0; i < s.length; i++) {
+    const c = s.charAt(i);
+    if (c >= "1" && c <= "9") {
+      all += zeros + c;
+      zeros = "";
+      seenSomething = true;
+      beginning = false;
+    } else if (c == "0") {
+      if (seenDot) {
+        if (seenSomething) {
+          all += zeros + c;
+          zeros = "";
+        }
+      } else {
+        if (seenSomething) {
+          zeros += c;
+        }
+      }
+      beginning = false;
+    } else if (!seenDot && c == ".") {
+      all += zeros;
+      zeros = "";
+      seenDot = true;
+      beginning = false;
+    } else if (c == "e" || c == "E" && i + 1 < s.length) {
+      parseInt(s.substring(i + 1, s.length));
+      i = s.length;
+    } else if (beginning && (c == "+" || c == "-")) {
+      if (c == "-") {
+        pos = !pos;
+      }
+    }
+  }
+  if (all == "") {
+    return true;
+  }
+  return pos;
+}
+
+/**
+ * Parse a string representation of a floating point
+ * and pull out the mantissa.
+ *
+ * @param s the string representation of a floating point.
+ * @return the mantissa of this number.
+ */
+function parseMantissa(s) {
+  let seenDot = false;
+  let seenSomething = false;
+  let zeros = "";
+  let leadZeros = "";
+  let all = "";
+  for (let i = 0; i < s.length; i++) {
+    const c = s.charAt(i);
+    if (c >= "1" && c <= "9") {
+      all += zeros + c;
+      zeros = "";
+      seenSomething = true;
+    } else if (c == "0") {
+      if (seenDot) {
+        if (seenSomething) {
+          all += zeros + c;
+          zeros = "";
+        } else {
+          leadZeros += c;
+        }
+      } else {
+        if (seenSomething) {
+          leadZeros += c;
+          zeros += c;
+        } else {
+          leadZeros += c;
+        }
+      }
+    } else if (!seenDot && c == ".") {
+      all += zeros;
+      zeros = "";
+      seenDot = true;
+    } else if (c == "e" || c == "E" && i + 1 < s.length) {
+      parseInt(s.substring(i + 1, s.length));
+      i = s.length;
+    } else ;
+  }
+  if (all == "") {
+    return leadZeros;
+  }
+  return all;
+}
+
+/**
+ * Parse a string representation of a floating point
+ * and pull out the exponent.
+ *
+ * @param s the string representation of a floating point.
+ * @return (integer) the number after the e.
+ */
+function parseOrder(s) {
+  let seenDot = false;
+  let seenSomething = false;
+  let zeros = "";
+  let all = "";
+  let decPlaces = 0;
+  let totalDecs = 0;
+  for (let i = 0; i < s.length; i++) {
+    const c = s.charAt(i);
+    if (c >= "1" && c <= "9") {
+      all += zeros + c;
+      zeros = "";
+      seenSomething = true;
+      if (!seenDot) {
+        totalDecs++;
+        decPlaces++;
+      }
+    } else if (c == "0") {
+      if (seenDot) {
+        if (seenSomething) {
+          all += zeros + c;
+          zeros = "";
+        } else {
+          decPlaces--;
+        }
+      } else {
+        totalDecs++;
+        if (seenSomething) {
+          decPlaces++;
+          zeros += c;
+        }
+      }
+    } else if (!seenDot && c == ".") {
+      all += zeros;
+      zeros = "";
+      seenDot = true;
+    } else if (c == "e" || c == "E" && i + 1 < s.length) {
+      const raised = parseInt(s.substring(i + 1, s.length));
+      decPlaces += raised;
+      totalDecs += raised;
+      i = s.length;
+    } else ;
+  }
+  if (all == "") {
+    return totalDecs;
+  }
+  return decPlaces;
+}
+
+/**
+ * Remove the specified number of digits from string by
+ * rounding.  Proper rounding rules for scientific purposes
+ * are followed.
+ * This method may cause an extra significant figure
+ * to be added to the number.  For example, if 999999
+ * were rounded, A one would carry over and become
+ * a significant figure.  Those who call this method
+ * should check for this and call round again if needed.
+ *
+ * @param mantissa A string representing an whole number of arbitrary length.
+ * @param digits A number of digits to remove
+ * @return A string represted the rounded version of mantissa
+ */
+function round(mantissa, digits) {
+  const last = mantissa.length - digits - 1;
+  if (last < 0) {
+    return "";
+  }
+  if (last >= mantissa.length - 1) {
+    return mantissa;
+  }
+  const nextToLast = mantissa.charAt(last + 1);
+  const lastChar = mantissa.charAt(last);
+  let roundUp = false;
+  if (nextToLast > "5") {
+    roundUp = true;
+  } else if (nextToLast == "5") {
+    for (let j = last + 2; j < mantissa.length; j++) {
+      if (mantissa.charAt(j) != "0") {
+        roundUp = true;
+      }
+    }
+    // @ts-expect-error - TS2362 - The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
+    if (lastChar % 2 == 1) {
+      roundUp = true;
+    }
+  }
+  let result = "";
+  for (let i = last; i >= 0; i--) {
+    const c = mantissa.charAt(i);
+    if (roundUp) {
+      let nextChar;
+      if (c == "9") {
+        nextChar = "0";
+      } else {
+        switch (c) {
+          case "0":
+            nextChar = "1";
+            break;
+          case "1":
+            nextChar = "2";
+            break;
+          case "2":
+            nextChar = "3";
+            break;
+          case "3":
+            nextChar = "4";
+            break;
+          case "4":
+            nextChar = "5";
+            break;
+          case "5":
+            nextChar = "6";
+            break;
+          case "6":
+            nextChar = "7";
+            break;
+          case "7":
+            nextChar = "8";
+            break;
+          case "8":
+            nextChar = "9";
+            break;
+        }
+        roundUp = false;
+      }
+      result = nextChar + result;
+    } else {
+      result = c + result;
+    }
+  }
+  if (roundUp) {
+    result = "1" + result;
+  }
+  return result;
+}
+
 /**
  * Some tests require some or all of the widgets and editors to be registered
  * in order for them to work. Requiring this file will register all of the
@@ -47837,9 +47540,6 @@ function generateTestInteractiveGraphWidget() {
       markings: "graph",
       labels: ["x", "y"],
       showProtractor: false,
-      showRuler: false,
-      rulerLabel: "mm",
-      rulerTicks: 2,
       range: [[-10, 10], [-10, 10]],
       graph: {
         type: "angle"
@@ -47951,7 +47651,6 @@ const widgetNameToEnum = {
   simulator: "SIMULATOR",
   sorter: "SORTER",
   table: "TABLE",
-  "unit-input": "UNIT",
   video: "VIDEO"
 };
 function convertWidgetNameToEnum(name) {
@@ -47970,5 +47669,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAnswerFromUserInput, getAnswersFromWidgets, getCorrectAnswerForWidgetId, getLineCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAnswerFromUserInput, getAnswersFromWidgets, getCorrectAnswerForWidgetId, getLineCoords, getLinearSystemCoords, getSegmentCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map