@khanacademy/perseus 26.1.0 → 27.0.0

package/dist/index.js

@@ -19195,6 +19195,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 => {
@@ -19228,6 +19229,7 @@ const replaceDeprecatedEditors = () => {
   replaceEditor("reaction-diagram", "deprecated-standin");
   replaceEditor("sequence", "deprecated-standin");
   replaceEditor("simulator", "deprecated-standin");
+  replaceEditor("unit-input", "deprecated-standin");
 };
 const getWidget = name => {
   // TODO(alex): Consider referring to these as renderers to avoid
@@ -28588,7 +28590,8 @@ const defaultGraphConfig = {
   graphDimensionsInPixels: [1, 1],
   width: 0,
   height: 0,
-  labels: []
+  labels: [],
+  hintMode: false
 };
 const GraphConfigContext = /*#__PURE__*/React.createContext(defaultGraphConfig);
 function useGraphConfig() {
@@ -30073,8 +30076,6 @@ const ItemExtras = [
 
 // prettier-ignore
 
-// prettier-ignore
-
 //prettier-ignore
 
 // A background image applied to various widgets.
@@ -30600,6 +30601,16 @@ function useDraggable(args) {
     const isKeyboard = type.includes("key");
     if (isKeyboard) {
       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,
@@ -30700,7 +30711,8 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
   const {
     range,
     markings,
-    showTooltips
+    showTooltips,
+    hintMode
   } = useGraphConfig();
   const {
     point,
@@ -30745,7 +30757,7 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
       cursor
     },
     "data-testid": "movable-point",
-    tabIndex: tabIndex(focusBehavior)
+    tabIndex: hintMode ? -1 : tabIndex(focusBehavior)
   }, /*#__PURE__*/React__namespace.createElement("circle", {
     className: "movable-point-hitbox",
     r: hitboxSizePx / 2,
@@ -30833,7 +30845,8 @@ const MovableLine = props => {
 };
 function useControlPoint(point, color, onMovePoint) {
   const {
-    snapStep
+    snapStep,
+    hintMode
   } = useGraphConfig();
   const [focused, setFocused] = React.useState(false);
   const keyboardHandleRef = React.useRef(null);
@@ -30855,7 +30868,7 @@ function useControlPoint(point, color, onMovePoint) {
   const focusableHandle = /*#__PURE__*/React__namespace.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)
@@ -30888,7 +30901,8 @@ const Line$1 = props => {
   const {
     range,
     graphDimensionsInPixels,
-    snapStep
+    snapStep,
+    hintMode
   } = useGraphConfig();
   let startExtend = undefined;
   let endExtend = undefined;
@@ -30910,7 +30924,7 @@ const Line$1 = props => {
   });
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("g", {
     ref: line,
-    tabIndex: 0,
+    tabIndex: hintMode ? -1 : 0,
     className: "movable-line",
     "data-testid": "movable-line",
     style: {
@@ -31429,6 +31443,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.
@@ -31448,12 +31465,16 @@ const PolygonGraph = props => {
     constrain: p => ["angles", "sides"].includes(snapToValue) ? p : snap(snapStep, p)
   });
   const active = hovered || focused || dragging;
+  const lastMoveTime = React__namespace.useRef(0);
   const lines = getLines(points);
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.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);
@@ -31485,10 +31506,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),
@@ -31500,7 +31522,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) {
@@ -31621,7 +31651,8 @@ function MovableCircle(props) {
     onMove
   } = props;
   const {
-    snapStep
+    snapStep,
+    hintMode
   } = useGraphConfig();
   const draggableRef = React.useRef(null);
   const {
@@ -31636,7 +31667,7 @@ function MovableCircle(props) {
   const [radiiPx] = useTransformDimensionsToPixels([radius, radius]);
   return /*#__PURE__*/React__namespace.createElement("g", {
     ref: draggableRef,
-    tabIndex: 0,
+    tabIndex: hintMode ? -1 : 0,
     className: `movable-circle ${dragging ? "movable-circle--dragging" : ""}`
   }, /*#__PURE__*/React__namespace.createElement("ellipse", {
     className: "focus-ring",
@@ -32040,7 +32071,8 @@ const MafsGraph = props => {
   const {
     state,
     dispatch,
-    labels
+    labels,
+    hintMode
   } = props;
   const [width, height] = props.box;
   const tickStep = props.step;
@@ -32055,7 +32087,8 @@ const MafsGraph = props => {
       graphDimensionsInPixels: props.box,
       width,
       height,
-      labels
+      labels,
+      hintMode
     }
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     className: "mafs-graph",
@@ -32066,7 +32099,8 @@ const MafsGraph = props => {
       padding: "25px 25px 0 0",
       boxSizing: "content-box",
       marginLeft: "20px",
-      marginBottom: "20px"
+      marginBottom: "20px",
+      pointerEvents: hintMode ? "none" : "auto"
     }
   }, /*#__PURE__*/React__namespace.createElement(LegacyGrid, {
     box: props.box,
@@ -32097,7 +32131,7 @@ const MafsGraph = props => {
   }), props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLayer, {
     lockedFigures: props.lockedFigures,
     range: state.range
-  }), "/* Protractor */", props.showProtractor && /*#__PURE__*/React__namespace.createElement(Protractor, null), renderGraph({
+  }), props.showProtractor && /*#__PURE__*/React__namespace.createElement(Protractor, null), renderGraph({
     state,
     dispatch
   })))));
@@ -33198,7 +33232,6 @@ const StatefulMafsGraph = /*#__PURE__*/React__namespace.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 ?? null;
   const originalPropsRef = React.useRef(props);
   const latestPropsRef = wonderBlocksCore.useLatestRef(props);
   React.useEffect(() => {
@@ -33209,7 +33242,7 @@ const StatefulMafsGraph = /*#__PURE__*/React__namespace.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__namespace.createElement(MafsGraph, _extends({}, props, {
     state: state,
     dispatch: dispatch
@@ -33300,9 +33333,6 @@ class LegacyInteractiveGraph extends React__namespace.Component {
     markings: "graph",
     showTooltips: false,
     showProtractor: false,
-    showRuler: false,
-    rulerLabel: "",
-    rulerTicks: 10,
     graph: {
       type: "linear"
     }
@@ -34465,9 +34495,6 @@ class LegacyInteractiveGraph extends React__namespace.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,
@@ -34486,9 +34513,6 @@ class InteractiveGraph extends React__namespace.Component {
     markings: "graph",
     showTooltips: false,
     showProtractor: false,
-    showRuler: false,
-    rulerLabel: "",
-    rulerTicks: 10,
     graph: {
       type: "linear"
     }
@@ -44207,1231 +44231,316 @@ var Table$1 = {
   isLintable: true
 };
 
-var isObject = function (obj) {
-  return obj === Object(obj);
+/**
+ * This is a component that adds a link to the transcript for embedded videos in articles.
+ */
+const IS_URL$1 = /^https?:\/\//;
+const getYoutubeId = url => {
+  const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+  const match = url.match(regExp);
+  if (match && match[7].length === 11) {
+    return match[7];
+  }
+  return "videoNotFound";
 };
-var merge = function () {
-  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];
+
+// will accept a youtube link or a video's slug name from embedded video and then query accordingly.
+
+/**
+ * Video Transcript Link Component.
+ */
+const VideoTranscriptLink = props => {
+  const {
+    location
+  } = props;
+  const {
+    useVideo
+  } = getDependencies();
+  const [id, kind] = IS_URL$1.test(location) ? [getYoutubeId(location), "YOUTUBE_ID"] : [location, "READABLE_ID"];
+  // The result value conforms to the wonder-blocks-data `Result` type
+  // which is used by our GraphQL framework.
+  // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'VideoKind'.
+  const result = useVideo(id, kind);
+  const {
+    strings
+  } = usePerseusI18n();
+  switch (result.status) {
+    case "loading":
+      return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, strings.loading);
+    case "success":
+      {
+        const video = result.data?.video;
+        return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+          style: styles$4.transcriptLink
+        }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.Text, null, video?.title), /*#__PURE__*/React__namespace.createElement(wonderBlocksLayout.Strut, {
+          size: 10
+        }), /*#__PURE__*/React__namespace.createElement(Link__default["default"], {
+          href: "/transcript/" + (video?.contentId || "videoNotFound"),
+          target: "_blank",
+          className: "visited-no-recolor"
+        }, strings.videoTranscript));
       }
-    }
+    case "error":
+      return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, strings.somethingWrong);
+    case "aborted":
+      return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, strings.somethingWrong);
+    default:
+      return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, strings.somethingWrong);
   }
-  return obj;
 };
-var clone = function (obj) {
-  if (!isObject(obj)) {
-    return obj;
+const styles$4 = aphrodite.StyleSheet.create({
+  transcriptLink: {
+    flexDirection: "row",
+    width: "100%",
+    justifyContent: "center"
   }
-  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
+/**
+ * This is a video widget for embedding videos in articles.
  */
+// Current default is 720p, based on the typical videos we upload currently
+const DEFAULT_WIDTH = 1280;
+const DEFAULT_HEIGHT = 720;
+const KA_EMBED = "{host}/embed_video?slug={slug}" + "&internal_video_only=1";
+const IS_URL = /^https?:\/\//;
+const IS_KA_SITE = /(khanacademy\.org|localhost)/;
+const IS_VIMEO = /(vimeo\.com)/;
 
-// equivalents, without requiring it
-// find the implementation to use for a given object
-var dispatch = function (x) {
-  if (Array.isArray(x)) {
-    return arr;
-  } else if (isObject(x)) {
-    return obj;
-  } else if (typeof x === "string") {
-    return str;
-  }
-};
+// exports has no 'transform'
 
-// This is underscore with a different name
-var lens = function (obj) {
-  if (obj instanceof lens) {
-    return obj;
+/**
+ * Video renderer.
+ */
+class Video extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
+  /**
+   * This is the widget's grading function.
+   * Points for videos are tallied by the embedded video itself, in the case
+   * of Khan Academy videos.
+   */
+  static validate(userInput, rubric) {
+    return {
+      type: "points",
+      earned: 0,
+      total: 0,
+      message: null
+    };
   }
-  if (!(this instanceof lens)) {
-    return new lens(obj);
+  getUserInput = () => {
+    return null;
+  };
+  simpleValidate = rubric => {
+    return Video.validate(null, rubric);
+  };
+  change = (() => {
+    var _this = this;
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
+      return change.apply(_this, args);
+    };
+  })();
+  render() {
+    const {
+      InitialRequestUrl
+    } = getDependencies();
+    const location = this.props.location;
+    if (!location) {
+      return /*#__PURE__*/React__namespace.createElement("div", null);
+    }
+    let url;
+    if (IS_URL.test(location)) {
+      url = location;
+      if (IS_VIMEO.test(url)) {
+        // If this is a vimeo video, we need to add the query string
+        // parameter "dnt" so that analytics/tracking cookies aren't set.
+        // https://help.vimeo.com/hc/en-us/articles/12426260232977-Player-parameters-overview
+        if (url.indexOf("?") === -1) {
+          url += "?dnt=1";
+        } else {
+          url += "&dnt=1";
+        }
+      }
+    } else {
+      url = KA_EMBED.replace("{slug}", location);
+      let embedHostname = "https://www.khanacademy.org";
+      if (IS_KA_SITE.test(InitialRequestUrl.host)) {
+        embedHostname = InitialRequestUrl.origin;
+      }
+      url = url.replace("{host}", embedHostname);
+    }
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(FixedToResponsive, {
+      width: DEFAULT_WIDTH,
+      height: DEFAULT_HEIGHT
+      // The key is here for the benefit of the editor, to ensure that
+      // any changes cause a re-rendering of the frame.
+      ,
+      key: location + this.props.alignment
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: a11y.srOnly
+    }, this.context.strings.videoWrapper), /*#__PURE__*/React__namespace.createElement("iframe", {
+      // TODO(joshuan): Consider not using iframes when we're
+      // loading this from webapp. This iframe is problematic
+      // for screenreaders.
+      className: "perseus-video-widget",
+      sandbox: "allow-same-origin allow-scripts",
+      width: DEFAULT_WIDTH,
+      height: DEFAULT_HEIGHT,
+      src: url,
+      allowFullScreen: true
+    })), /*#__PURE__*/React__namespace.createElement(VideoTranscriptLink, {
+      location: location
+    }));
   }
-  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;
+}
+var Video$1 = {
+  name: "video",
+  displayName: "Video",
+  defaultAlignment: "block",
+  supportedAlignments: ["block", "float-left", "float-right", "full-width"],
+  widget: Video
 };
-lens.prototype.zoom = function (lensArr) {
-  if (this._zoomStack === undefined) {
-    this._zoomStack = [];
+
+/* 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, Video$1, DeprecatedStandin$1];
+
+/**
+ * This should be called by all clients, specifying whether extra widgets are
+ * needed via `loadExtraWidgets`. It is idempotent, so it's not a problem to
+ * call it multiple times.
+ *
+ * skipMathJax:
+ *   If false/undefined, MathJax will be configured, and the
+ *   promise will wait for MathJax to load (if it hasn't already).
+ */
+const init = function (options) {
+  registerWidgets(basicWidgets);
+  registerWidgets(extraWidgets);
+  replaceDeprecatedWidgets();
+
+  // Pass skipMathJax: true if MathJax is already loaded and configured.
+  const skipMathJax = options.skipMathJax;
+  if (skipMathJax) {
+    // @ts-expect-error - TS2322 - Type 'Promise<void>' is not assignable to type 'Promise<undefined>'.
+    return Promise.resolve();
   }
-  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;
+  return new Promise((resolve, reject) => {
+    MathJax.Hub.Config({
+      messageStyle: "none",
+      skipStartupTypeset: "none",
+      "HTML-CSS": {
+        availableFonts: ["TeX"],
+        imageFont: null,
+        scale: 100,
+        showMathMenu: false
+      }
+    });
+    MathJax.Hub.Configured();
+    MathJax.Hub.Queue(resolve);
   });
 };
 
-// ARRAY FUNCTIONS
+// This file is processed by a Rollup plugin (replace) to inject the production
+const libName = "@khanacademy/perseus";
+const libVersion = "27.0.0";
+perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
-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;
-  }
+const apiVersion = {
+  major: 12,
+  minor: 0
 };
-
-/*
-// 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);
+const itemDataVersion = {
+  major: 0,
+  minor: 1
 };
 
-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);
-};
-*/
+var allWidgets = [...basicWidgets, ...extraWidgets];
 
-// OBJECT FUNCTIONS
+registerWidgets(allWidgets);
+const ItemVersion = getVersionVector();
+ItemVersion["::renderer::"] = itemDataVersion;
 
-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;
+class ArticleRenderer extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
+  _currentFocus;
+  sectionRenderers = [];
+  static defaultProps = {
+    apiOptions: ApiOptions.defaults,
+    useNewStyles: false,
+    linterContext: PerseusLinter__namespace.linterContextDefault
+  };
+  constructor(props) {
+    super(props);
   }
-};
-
-// 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;
+  componentDidMount() {
+    this._currentFocus = null;
   }
-};
-
-/* 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.
- */
+  shouldComponentUpdate(nextProps) {
+    return nextProps !== this.props;
+  }
+  _handleFocusChange = (newFocusPath, oldFocusPath) => {
+    // TODO(charlie): DRY this up--some of this logic is repeated in
+    // ItemRenderer.
+    if (newFocusPath) {
+      this._setCurrentFocus(newFocusPath);
+    } else {
+      this._onRendererBlur(oldFocusPath);
+    }
+  };
+  _setCurrentFocus = newFocusPath => {
+    const {
+      keypadElement,
+      apiOptions
+    } = this.props;
+    const {
+      isMobile
+    } = apiOptions;
+    const prevFocusPath = this._currentFocus;
+    this._currentFocus = newFocusPath;
 
-/**
- * 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 {
-  order;
-  mantissa;
-  positive;
-  sigFigs;
-  sigDecs;
-  constructor(s) {
-    this.order = parseOrder(s);
-    this.mantissa = parseMantissa(s);
-    this.positive = parseSign(s);
+    // Use the section prefix to extract the relevant Renderer's input
+    // paths, so as to check whether the focused path represents an
+    // input.
+    let didFocusInput = false;
+    let focusedInput;
+    if (this._currentFocus) {
+      const [sectionIndex, ...focusPath] = this._currentFocus;
+      const inputPaths = this.sectionRenderers[sectionIndex].getInputPaths();
+      didFocusInput = inputPaths.some(inputPath => {
+        return Util.inputPathsEqual(inputPath, focusPath);
+      });
+      focusedInput = this.sectionRenderers[sectionIndex].getDOMNodeForPath(focusPath);
+    }
+    const {
+      onFocusChange
+    } = this.props.apiOptions;
+    if (onFocusChange) {
+      // Wait for the keypad to mount before getting the height
+      setTimeout(() => {
+        const keypadDomNode = keypadElement?.getDOMNode();
+        const keypadHeight = keypadDomNode && didFocusInput ? keypadDomNode.getBoundingClientRect().height : 0;
+        onFocusChange(this._currentFocus, prevFocusPath, keypadHeight, didFocusInput ? focusedInput : null);
+      }, 0);
+    }
+    if (keypadElement && isMobile) {
+      if (didFocusInput) {
+        keypadElement.activate();
+      } else {
+        keypadElement.dismiss();
+      }
+    }
+  };
+  _onRendererBlur = blurPath => {
+    const blurringFocusPath = this._currentFocus;
 
-    /**
-     * 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 (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__namespace.Component {
-  static contextType = PerseusI18nContext;
-  _errorTimeout;
-  static defaultProps = {
-    apiOptions: ApiOptions.defaults,
-    value: ""
-  };
-  static validate(userInput, rubric, strings) {
-    const answer = KAS__namespace.unitParse(rubric.value).expr;
-    const guess = KAS__namespace.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__namespace.Var("x");
-      const equality = new KAS__namespace.Eq(answer.simplify(), "=", new KAS__namespace.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__namespace.compare(guessUnit, answerUnit).equal;
-    } else {
-      // Are any of the accepted units the same as what the user entered?
-      kasCorrect = ___default["default"](rubric.acceptingUnits).any(unit => {
-        const thisAnswerUnit = primUnits(KAS__namespace.unitParse(unit).unit.simplify());
-        return KAS__namespace.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__namespace.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);
-  }
-  _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 = $__default["default"](ReactDOM__default["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);
-    }
-  };
-  _hideError = () => {
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2769 - No overload matches this call.
-    const $error = $__default["default"](ReactDOM__default["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
-        $__default["default"](this).hide();
-      });
-    }
-  };
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      // @ts-expect-error - TS2345 - Argument of type 'readonly any[]' is not assignable to parameter of type 'any[]'.
-      return change.apply(_this, args);
-    };
-  })();
-  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__namespace.unitParse(this.props.value).parsed) {
-      this._showError();
-    }
-  };
-  handleChange = event => {
-    this._hideError();
-    this.props.onChange({
-      value: event.target.value
-    });
-  };
-  simpleValidate = (rubric, onInputError) => {
-    return OldUnitInput.validate(this.getUserInput(), rubric, this.context.strings);
-  };
-  getUserInput = () => {
-    return this.props.value;
-  };
-
-  // begin mobile stuff
-
-  getInputPaths = () => {
-    // The widget itself is an input, so we return a single empty list to
-    // indicate this.
-    return [[]];
-  };
-  focusInputPath = inputPath => {
-    // eslint-disable-next-line react/no-string-refs
-    const input = ReactDOM__default["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();
-    }
-  };
-  handleFocus = () => {
-    this.props.onFocus([]);
-  };
-  blurInputPath = inputPath => {
-    // eslint-disable-next-line react/no-string-refs
-    const input = ReactDOM__default["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();
-    }
-  };
-  setInputValue = (path, newValue, cb) => {
-    this.props.onChange({
-      value: newValue
-    }, cb);
-  };
-  getDOMNodeForPath = () => {
-    // eslint-disable-next-line react/no-string-refs
-    return ReactDOM__default["default"].findDOMNode(this.refs.input);
-  };
-  getGrammarTypeForPath = inputPath => {
-    return "unit";
-  };
-
-  // end mobile stuff
-
-  // TODO(joel) think about showing the error buddy
-  render() {
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "old-unit-input"
-    }, /*#__PURE__*/React__namespace.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__namespace.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.
-const primUnits = function (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.
- */
-const IS_URL$1 = /^https?:\/\//;
-const getYoutubeId = url => {
-  const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
-  const match = url.match(regExp);
-  if (match && match[7].length === 11) {
-    return match[7];
-  }
-  return "videoNotFound";
-};
-
-// will accept a youtube link or a video's slug name from embedded video and then query accordingly.
-
-/**
- * Video Transcript Link Component.
- */
-const VideoTranscriptLink = props => {
-  const {
-    location
-  } = props;
-  const {
-    useVideo
-  } = getDependencies();
-  const [id, kind] = IS_URL$1.test(location) ? [getYoutubeId(location), "YOUTUBE_ID"] : [location, "READABLE_ID"];
-  // The result value conforms to the wonder-blocks-data `Result` type
-  // which is used by our GraphQL framework.
-  // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'VideoKind'.
-  const result = useVideo(id, kind);
-  const {
-    strings
-  } = usePerseusI18n();
-  switch (result.status) {
-    case "loading":
-      return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, strings.loading);
-    case "success":
-      {
-        const video = result.data?.video;
-        return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-          style: styles$4.transcriptLink
-        }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.Text, null, video?.title), /*#__PURE__*/React__namespace.createElement(wonderBlocksLayout.Strut, {
-          size: 10
-        }), /*#__PURE__*/React__namespace.createElement(Link__default["default"], {
-          href: "/transcript/" + (video?.contentId || "videoNotFound"),
-          target: "_blank",
-          className: "visited-no-recolor"
-        }, strings.videoTranscript));
-      }
-    case "error":
-      return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, strings.somethingWrong);
-    case "aborted":
-      return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, strings.somethingWrong);
-    default:
-      return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, strings.somethingWrong);
-  }
-};
-const styles$4 = aphrodite.StyleSheet.create({
-  transcriptLink: {
-    flexDirection: "row",
-    width: "100%",
-    justifyContent: "center"
-  }
-});
-
-/**
- * This is a video widget for embedding videos in articles.
- */
-// Current default is 720p, based on the typical videos we upload currently
-const DEFAULT_WIDTH = 1280;
-const DEFAULT_HEIGHT = 720;
-const KA_EMBED = "{host}/embed_video?slug={slug}" + "&internal_video_only=1";
-const IS_URL = /^https?:\/\//;
-const IS_KA_SITE = /(khanacademy\.org|localhost)/;
-const IS_VIMEO = /(vimeo\.com)/;
-
-// exports has no 'transform'
-
-/**
- * Video renderer.
- */
-class Video extends React__namespace.Component {
-  static contextType = PerseusI18nContext;
-  /**
-   * This is the widget's grading function.
-   * Points for videos are tallied by the embedded video itself, in the case
-   * of Khan Academy videos.
-   */
-  static validate(userInput, rubric) {
-    return {
-      type: "points",
-      earned: 0,
-      total: 0,
-      message: null
-    };
-  }
-  getUserInput = () => {
-    return null;
-  };
-  simpleValidate = rubric => {
-    return Video.validate(null, rubric);
-  };
-  change = (() => {
-    var _this = this;
-    return function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
-      return change.apply(_this, args);
-    };
-  })();
-  render() {
-    const {
-      InitialRequestUrl
-    } = getDependencies();
-    const location = this.props.location;
-    if (!location) {
-      return /*#__PURE__*/React__namespace.createElement("div", null);
-    }
-    let url;
-    if (IS_URL.test(location)) {
-      url = location;
-      if (IS_VIMEO.test(url)) {
-        // If this is a vimeo video, we need to add the query string
-        // parameter "dnt" so that analytics/tracking cookies aren't set.
-        // https://help.vimeo.com/hc/en-us/articles/12426260232977-Player-parameters-overview
-        if (url.indexOf("?") === -1) {
-          url += "?dnt=1";
-        } else {
-          url += "&dnt=1";
-        }
-      }
-    } else {
-      url = KA_EMBED.replace("{slug}", location);
-      let embedHostname = "https://www.khanacademy.org";
-      if (IS_KA_SITE.test(InitialRequestUrl.host)) {
-        embedHostname = InitialRequestUrl.origin;
-      }
-      url = url.replace("{host}", embedHostname);
-    }
-    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(FixedToResponsive, {
-      width: DEFAULT_WIDTH,
-      height: DEFAULT_HEIGHT
-      // The key is here for the benefit of the editor, to ensure that
-      // any changes cause a re-rendering of the frame.
-      ,
-      key: location + this.props.alignment
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: a11y.srOnly
-    }, this.context.strings.videoWrapper), /*#__PURE__*/React__namespace.createElement("iframe", {
-      // TODO(joshuan): Consider not using iframes when we're
-      // loading this from webapp. This iframe is problematic
-      // for screenreaders.
-      className: "perseus-video-widget",
-      sandbox: "allow-same-origin allow-scripts",
-      width: DEFAULT_WIDTH,
-      height: DEFAULT_HEIGHT,
-      src: url,
-      allowFullScreen: true
-    })), /*#__PURE__*/React__namespace.createElement(VideoTranscriptLink, {
-      location: location
-    }));
-  }
-}
-var Video$1 = {
-  name: "video",
-  displayName: "Video",
-  defaultAlignment: "block",
-  supportedAlignments: ["block", "float-left", "float-right", "full-width"],
-  widget: Video
-};
-
-/* 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];
-
-/**
- * This should be called by all clients, specifying whether extra widgets are
- * needed via `loadExtraWidgets`. It is idempotent, so it's not a problem to
- * call it multiple times.
- *
- * skipMathJax:
- *   If false/undefined, MathJax will be configured, and the
- *   promise will wait for MathJax to load (if it hasn't already).
- */
-const init = function (options) {
-  registerWidgets(basicWidgets);
-  registerWidgets(extraWidgets);
-  replaceDeprecatedWidgets();
-
-  // Pass skipMathJax: true if MathJax is already loaded and configured.
-  const skipMathJax = options.skipMathJax;
-  if (skipMathJax) {
-    // @ts-expect-error - TS2322 - Type 'Promise<void>' is not assignable to type 'Promise<undefined>'.
-    return Promise.resolve();
-  }
-  return new Promise((resolve, reject) => {
-    MathJax.Hub.Config({
-      messageStyle: "none",
-      skipStartupTypeset: "none",
-      "HTML-CSS": {
-        availableFonts: ["TeX"],
-        imageFont: null,
-        scale: 100,
-        showMathMenu: false
-      }
-    });
-    MathJax.Hub.Configured();
-    MathJax.Hub.Queue(resolve);
-  });
-};
-
-// This file is processed by a Rollup plugin (replace) to inject the production
-const libName = "@khanacademy/perseus";
-const libVersion = "26.1.0";
-perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
-
-const apiVersion = {
-  major: 12,
-  minor: 0
-};
-const itemDataVersion = {
-  major: 0,
-  minor: 1
-};
-
-var allWidgets = [...basicWidgets, ...extraWidgets];
-
-registerWidgets(allWidgets);
-const ItemVersion = getVersionVector();
-ItemVersion["::renderer::"] = itemDataVersion;
-
-class ArticleRenderer extends React__namespace.Component {
-  static contextType = PerseusI18nContext;
-  _currentFocus;
-  sectionRenderers = [];
-  static defaultProps = {
-    apiOptions: ApiOptions.defaults,
-    useNewStyles: false,
-    linterContext: PerseusLinter__namespace.linterContextDefault
-  };
-  constructor(props) {
-    super(props);
-  }
-  componentDidMount() {
-    this._currentFocus = null;
-  }
-  shouldComponentUpdate(nextProps) {
-    return nextProps !== this.props;
-  }
-  _handleFocusChange = (newFocusPath, oldFocusPath) => {
-    // TODO(charlie): DRY this up--some of this logic is repeated in
-    // ItemRenderer.
-    if (newFocusPath) {
-      this._setCurrentFocus(newFocusPath);
-    } else {
-      this._onRendererBlur(oldFocusPath);
-    }
-  };
-  _setCurrentFocus = newFocusPath => {
-    const {
-      keypadElement,
-      apiOptions
-    } = this.props;
-    const {
-      isMobile
-    } = apiOptions;
-    const prevFocusPath = this._currentFocus;
-    this._currentFocus = newFocusPath;
-
-    // Use the section prefix to extract the relevant Renderer's input
-    // paths, so as to check whether the focused path represents an
-    // input.
-    let didFocusInput = false;
-    let focusedInput;
-    if (this._currentFocus) {
-      const [sectionIndex, ...focusPath] = this._currentFocus;
-      const inputPaths = this.sectionRenderers[sectionIndex].getInputPaths();
-      didFocusInput = inputPaths.some(inputPath => {
-        return Util.inputPathsEqual(inputPath, focusPath);
-      });
-      focusedInput = this.sectionRenderers[sectionIndex].getDOMNodeForPath(focusPath);
-    }
-    const {
-      onFocusChange
-    } = this.props.apiOptions;
-    if (onFocusChange) {
-      // Wait for the keypad to mount before getting the height
-      setTimeout(() => {
-        const keypadDomNode = keypadElement?.getDOMNode();
-        const keypadHeight = keypadDomNode && didFocusInput ? keypadDomNode.getBoundingClientRect().height : 0;
-        onFocusChange(this._currentFocus, prevFocusPath, keypadHeight, didFocusInput ? focusedInput : null);
-      }, 0);
-    }
-    if (keypadElement && isMobile) {
-      if (didFocusInput) {
-        keypadElement.activate();
-      } else {
-        keypadElement.dismiss();
-      }
-    }
-  };
-  _onRendererBlur = blurPath => {
-    const blurringFocusPath = this._currentFocus;
-
-    // Failsafe: abort if ID is different, because focus probably happened
-    // before blur.
-    if (!Util.inputPathsEqual(blurPath, blurringFocusPath)) {
-      return;
-    }
+    // Failsafe: abort if ID is different, because focus probably happened
+    // before blur.
+    if (!Util.inputPathsEqual(blurPath, blurringFocusPath)) {
+      return;
+    }
 
     // Wait until after any new focus events fire this tick before declaring
     // that nothing is focused, since if there were a focus change across
@@ -46869,31 +45978,248 @@ function inferItemTreeShape(node) {
   if (typeof node === "object" && node.__type === "hint") {
     return shapes.hint;
   }
-  if (typeof node === "object") {
-    const valueShapes = {};
-    Object.keys(node).forEach(key => {
-      valueShapes[key] = inferItemTreeShape(node[key]);
-    });
-    return shapes.shape(valueShapes);
+  if (typeof node === "object") {
+    const valueShapes = {};
+    Object.keys(node).forEach(key => {
+      valueShapes[key] = inferItemTreeShape(node[key]);
+    });
+    return shapes.shape(valueShapes);
+  }
+  throw new perseusCore.PerseusError(`unexpected multi-item node ${JSON.stringify(node)}`, perseusCore.Errors.InvalidInput);
+}
+
+/**
+ * Convert the given Item to an ItemTree, by unwrapping the `_multi` key.
+ */
+function itemToTree(item) {
+  return item._multi;
+}
+
+/**
+ * Convert the given ItemTree to an Item, by wrapping it in the `_multi` key.
+ */
+function treeToItem(node) {
+  return {
+    _multi: node
+  };
+}
+
+var isObject = function (obj) {
+  return obj === Object(obj);
+};
+var merge = function () {
+  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 (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 (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 (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;
   }
-  throw new perseusCore.PerseusError(`unexpected multi-item node ${JSON.stringify(node)}`, perseusCore.Errors.InvalidInput);
-}
+};
 
-/**
- * Convert the given Item to an ItemTree, by unwrapping the `_multi` key.
- */
-function itemToTree(item) {
-  return item._multi;
-}
+// STRING FUNCTIONS
 
-/**
- * Convert the given ItemTree to an Item, by wrapping it in the `_multi` key.
- */
-function treeToItem(node) {
-  return {
-    _multi: node
-  };
-}
+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;
+  }
+};
 
 // TODO(mdr)
 // TODO(mdr)
@@ -47035,467 +46361,833 @@ class MultiRenderer extends React__namespace.Component {
   }
 
   /**
-   * Construct a Renderer for the given HintNode, and keep track of the hint
-   * itself for future use, too.
+   * Construct a Renderer for the given HintNode, and keep track of the hint
+   * itself for future use, too.
+   */
+  _makeHintRendererData(hint) {
+    // TODO(mdr): Once HintsRenderer supports inter-widget communication,
+    //     give it a ref. Until then, leave the ref null forever, to avoid
+    //     confusing the findWidgets functions.
+    //
+    // NOTE(davidflanagan): As a partial step toward inter-widget
+    // communication we're going to pass a findExternalWidgets function
+    // (using a dummy data object). This allows passage-ref widgets in
+    // hints to use findWidget() to find the passage widgets they reference.
+    // Note that this is one-way only, however. It does not allow
+    // widgets in the question to find widgets in the hints, for example.
+    const findExternalWidgets = criterion => this._findWidgets({}, criterion);
+    return {
+      hint,
+      findExternalWidgets,
+      // _annotateRendererArray() needs this
+      ref: null,
+      makeRenderer: () => /*#__PURE__*/React__namespace.createElement(HintsRenderer, _extends({}, this._getRendererProps(), {
+        findExternalWidgets: findExternalWidgets,
+        hints: [hint]
+      }))
+    };
+  }
+
+  /**
+   * Construct a tree of interconnected RendererDatas, corresponding to the
+   * given item. Called in `_tryMakeRendererState`, in order to store this
+   * tree in the component state.
+   */
+  _makeRendererDataTree(item, shape) {
+    const itemTree = itemToTree(item);
+    return this.rendererDataTreeMapper.mapTree(itemTree, shape);
+  }
+
+  /**
+   * Return all widgets that meet the given criterion, from all Renderers
+   * except the Renderer that triggered this call.
+   *
+   * This function is provided to each Renderer's `findExternalWidgets` prop,
+   * which enables widgets in different Renderers to discover each other and
+   * communicate.
+   */
+  _findWidgets(callingData, filterCriterion) {
+    const results = [];
+    this._mapRenderers(data => {
+      if (callingData !== data && data.ref) {
+        results.push(...data.ref.findInternalWidgets(filterCriterion));
+      }
+    });
+    return results;
+  }
+
+  /**
+   * Copy the renderer tree, apply the given transformation to the leaf nodes
+   * and the optional given transformation to the array nodes, and return the
+   * result.
+   *
+   * Used to provide structured data to the call site (the Renderer tree on
+   * `render`, the Score tree on `getScores`, etc.), and to traverse the
+   * renderer tree even when we disregard the output (like in
+   * `_findWidgets`).
+   */
+  _mapRenderers(
+  // eslint-disable-next-line no-restricted-syntax
+  leafMapper
+  // @ts-expect-error - TS2315 - Type 'Tree' is not generic.
+  ) {
+    const {
+      rendererDataTree
+    } = this.state;
+    if (!rendererDataTree) {
+      return null;
+    }
+    const mapper = buildMapper().setContentMapper(leafMapper).setHintMapper(leafMapper);
+    return mapper.mapTree(rendererDataTree, this.props.shape);
+  }
+  _scoreFromRef(ref) {
+    if (!ref) {
+      return null;
+    }
+    const [guess, score] = ref.guessAndScore();
+    let state;
+    if (ref.getSerializedState) {
+      state = ref.getSerializedState();
+    }
+    return Util.keScoreFromPerseusScore(score, guess, state);
+  }
+
+  /**
+   * Return a tree in the shape of the multi-item, with scores at each of
+   * the content nodes and `null` at the other leaf nodes.
+   */
+  getScores() {
+    return this._mapRenderers(data => this._scoreFromRef(data.ref));
+  }
+
+  /**
+   * Return a single composite score for all rendered content nodes.
+   * The `guess` is a tree in the shape of the multi-item, with an individual
+   * guess at each content node and `null` at the other leaf nodes.
+   */
+  score() {
+    const scores = [];
+    const state = [];
+    const guess = this._mapRenderers(data => {
+      if (!data.ref) {
+        return null;
+      }
+      if (data.ref.getSerializedState) {
+        state.push(data.ref.getSerializedState());
+      }
+      scores.push(data.ref.score());
+      return data.ref?.getUserInput();
+    });
+    const combinedScore = scores.reduce(Util.combineScores);
+    return Util.keScoreFromPerseusScore(combinedScore, guess, state);
+  }
+
+  /**
+   * Return a tree in the shape of the multi-item, with serialized state at
+   * each of the content nodes and `null` at the other leaf nodes.
+   *
+   * If the lastSerializedState argument is supplied, this function will fill
+   * in the state of not-currently-rendered content and hint nodes with the
+   * values from the previous serialized state. If no lastSerializedState is
+   * supplied, `null` will be returned for not-currently-rendered content and
+   * hint nodes.
+   */
+  _getSerializedState(lastSerializedState) {
+    return this._mapRenderers((data, _, path) => {
+      if (data.ref) {
+        return data.ref.getSerializedState();
+      }
+      if (lastSerializedState) {
+        return lens(lastSerializedState).get(path);
+      }
+      return null;
+    });
+  }
+
+  /**
+   * Given a tree in the shape of the multi-item, with serialized state at
+   * each of the content nodes, restore each state to the corresponding
+   * renderer if currently mounted.
+   */
+  restoreSerializedState(serializedState, callback) {
+    // We want to call our async callback only once all of the childrens'
+    // callbacks have run. We add one to this counter before we call out to
+    // each renderer and decrement it when it runs our callback.
+    let numCallbacks = 0;
+    const countCallback = () => {
+      numCallbacks--;
+      if (callback && numCallbacks === 0) {
+        callback();
+      }
+    };
+    this._mapRenderers((data, _, path) => {
+      if (!data.ref) {
+        return;
+      }
+      const state = lens(serializedState).get(path);
+      if (!state) {
+        return;
+      }
+      numCallbacks++;
+      data.ref?.restoreSerializedState(state, countCallback);
+    });
+  }
+
+  /**
+   * Given an array of renderers, if it happens to be an array of *hint*
+   * renderers, then attach a `firstN` method to the array, which allows the
+   * layout to render the hints together in one HintsRenderer.
    */
-  _makeHintRendererData(hint) {
-    // TODO(mdr): Once HintsRenderer supports inter-widget communication,
-    //     give it a ref. Until then, leave the ref null forever, to avoid
-    //     confusing the findWidgets functions.
-    //
-    // NOTE(davidflanagan): As a partial step toward inter-widget
-    // communication we're going to pass a findExternalWidgets function
-    // (using a dummy data object). This allows passage-ref widgets in
-    // hints to use findWidget() to find the passage widgets they reference.
-    // Note that this is one-way only, however. It does not allow
-    // widgets in the question to find widgets in the hints, for example.
-    const findExternalWidgets = criterion => this._findWidgets({}, criterion);
-    return {
-      hint,
-      findExternalWidgets,
-      // _annotateRendererArray() needs this
-      ref: null,
-      makeRenderer: () => /*#__PURE__*/React__namespace.createElement(HintsRenderer, _extends({}, this._getRendererProps(), {
-        findExternalWidgets: findExternalWidgets,
-        hints: [hint]
-      }))
-    };
+  _annotateRendererArray(renderers, rendererDatas, shape) {
+    if (shape.elementShape.type === "hint") {
+      // The shape says that these are HintRendererDatas, even though
+      // it's not provable at compile time, so perform a cast.
+      const hintRendererDatas = rendererDatas;
+      renderers = [...renderers];
+      renderers.firstN = n => /*#__PURE__*/React__namespace.createElement(HintsRenderer, _extends({}, this._getRendererProps(), {
+        findExternalWidgets: hintRendererDatas[0] ? hintRendererDatas[0].findExternalWidgets : undefined,
+        hints: hintRendererDatas.map(d => d.hint),
+        hintsVisible: n
+      }));
+    }
+    return renderers;
   }
 
   /**
-   * Construct a tree of interconnected RendererDatas, corresponding to the
-   * given item. Called in `_tryMakeRendererState`, in order to store this
-   * tree in the component state.
+   * Return a tree in the shape of the multi-item, with a Renderer at each
+   * content node and a HintRenderer at each hint node.
+   *
+   * This is generated by running each of the `makeRenderer` functions at the
+   * leaf nodes.
    */
-  _makeRendererDataTree(item, shape) {
-    const itemTree = itemToTree(item);
-    return this.rendererDataTreeMapper.mapTree(itemTree, shape);
+  _getRenderers() {
+    return this.getRenderersMapper.mapTree(this.state.rendererDataTree, this.props.shape);
+  }
+  render() {
+    if (this.state.renderError) {
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        className: aphrodite.css(styles.error)
+      }, this.context.strings.errorRendering({
+        error: String(this.state.renderError)
+      }));
+    }
+
+    // Pass the renderer tree to the `children` function, which will
+    // determine the actual content of this component.
+    return /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
+      value: this.props.dependencies
+    }, this.props.children({
+      renderers: this._getRenderers()
+    }));
+  }
+}
+const styles = aphrodite.StyleSheet.create({
+  error: {
+    color: "red"
+  }
+});
+
+/**
+ * Utility functions to build React PropTypes for multi-items and shapes.
+ *
+ * If you're writing new components, though, consider using the Item and Shape
+ * types instead.
+ */
+
+/**
+ * Return a PropType that accepts Items of the given shape, and rejects other
+ * objects.
+ *
+ * Usage: `propTypes: {item: buildPropTypeForShape(myShape)}`
+ */
+function buildPropTypeForShape(shape) {
+  return PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
+    _multi: buildTreePropTypeForShape(shape)
+  }), PropTypes__default["default"].oneOf([null, undefined])]);
+}
+
+/**
+ * Return a PropType that accepts ItemTrees of the given shape, and rejects
+ * other objects.
+ */
+function buildTreePropTypeForShape(shape) {
+  if (shape.type === "content") {
+    return PropTypes__default["default"].shape({
+      // TODO(mdr): Remove #LegacyContentNode support.
+      __type: PropTypes__default["default"].oneOf(["content", "item"]).isRequired,
+      content: PropTypes__default["default"].string,
+      images: PropTypes__default["default"].objectOf(PropTypes__default["default"].any),
+      widgets: PropTypes__default["default"].objectOf(PropTypes__default["default"].any)
+    });
+  }
+  if (shape.type === "hint") {
+    return PropTypes__default["default"].shape({
+      __type: PropTypes__default["default"].oneOf(["hint"]).isRequired,
+      content: PropTypes__default["default"].string,
+      images: PropTypes__default["default"].objectOf(PropTypes__default["default"].any),
+      widgets: PropTypes__default["default"].objectOf(PropTypes__default["default"].any),
+      replace: PropTypes__default["default"].bool
+    });
+  }
+  if (shape.type === "tags") {
+    return PropTypes__default["default"].arrayOf(PropTypes__default["default"].string.isRequired);
+  }
+  if (shape.type === "array") {
+    const elementPropType = buildTreePropTypeForShape(shape.elementShape);
+    return PropTypes__default["default"].arrayOf(elementPropType.isRequired);
+  }
+  if (shape.type === "object") {
+    const valueShapes = shape.shape;
+    const propTypeShape = {};
+    Object.keys(valueShapes).forEach(key => {
+      propTypeShape[key] = buildTreePropTypeForShape(valueShapes[key]).isRequired;
+    });
+    return PropTypes__default["default"].shape(propTypeShape);
+  }
+  throw new perseusCore.PerseusError(
+  // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
+  `unexpected shape type ${shape.type}`, perseusCore.Errors.InvalidInput);
+}
+
+/**
+ * This library provides support for Perseus multi-items: structured Perseus
+ * content that content creators can easily create, and that applications can
+ * easily render into different parts of the layout.
+ *
+ * For more details about application and motivation, see:
+ * https://sites.google.com/a/khanacademy.org/forge/for-developers/perseus-items-and-multi-items
+ *
+ * This file primarily exposes the `MultiRenderer` component, which performs
+ * multi-rendering. To multi-render a question, pass in the content of the item
+ * to the `MultiRenderer` component as a props. Then, pass in a function which
+ * takes an object of renderers (in the same structure as the content), and
+ * return a render tree. The `MultiRenderer` component will allow you to
+ * combine scores, serialized state, etc. without having to manually call on
+ * each of the functions. It also handles inter-widgets requests between the
+ * different renderers.
+ * For more details, see `multi-items/multi-renderer.jsx`.
+ *
+ * Example:
+ *
+ *   item = {_multi: {
+ *       left: <content data>,
+ *       right: [<content data>, <content data>],
+ *   }}
+ *   shape = shapes.shape({
+ *       left: shapes.content,
+ *       right: shapes.arrayOf(shapes.content),
+ *   })
+ *
+ *   <MultiRenderer item={item} shape={shape}>
+ *       {({renderers}) =>
+ *           <div>
+ *               <div id="left">{renderers.left}</div>
+ *               <ul id="right">
+ *                   {renderers.right.map(r => <li>{r}</li>)}
+ *               </ul>
+ *           </div>
+ *       }
+ *   </MultiRenderer>
+ *
+ * This file also exposes `shapes`, which helps you construct a runtime type
+ * declaration for your particular class of multi-item. This can then be used
+ * to create a MultirendererEditor for your multi-item shape, and to validate
+ * that a multi-item conforms to the shape via `buildPropTypeForShape`.
+ * For more details, see `multi-items/shapes.js`.
+ *
+ * This file also exposes some utility functions for working with generic
+ * multi-items, like `findContentNodesInItem`, `findHintNodesInItem`,
+ * `inferItemShape`, and `buildEmptyItemForShape`.
+ * For more details, see `multi-items/items.js`.
+ */
+var MultiItems = {
+  // Tools for rendering your multi-items
+  MultiRenderer,
+  // Tools for declaring your multi-item shapes
+  shapes,
+  buildPropTypeForShape,
+  // Tools for generically manipulating multi-items
+  buildEmptyItemForShape,
+  findContentNodesInItem: findContentNodesInItem$2,
+  findHintNodesInItem,
+  inferItemShape: inferItemShape$2
+};
+
+/**
+ * Calculates whether a perseus item is renderable by a specific
+ * perseus-item-data version.
+ *
+ * This is done inside of the perseus repo so that it can traverse
+ * widget-specific data that might need to do a sub-traversal.
+ * This supports widgets that contain renderers, such as the
+ * group or sequence widgets.
+ */
+const {
+  findContentNodesInItem: findContentNodesInItem$1,
+  inferItemShape: inferItemShape$1
+} = MultiItems;
+const isUpgradedWidgetInfoRenderableBy = function (widgetInfo, widgetRendererVersion) {
+  if (widgetRendererVersion == null) {
+    // If the widget does not exist in this version, this will
+    // be null, and that version of perseus cannot render the
+    // widget (it doesn't even know the widget exists!)
+    return false;
+  }
+  const widgetVersion = widgetInfo.version || {
+    major: 0,
+    minor: 0
+  };
+  if (widgetRendererVersion.major > widgetVersion.major) {
+    return true;
+  }
+  if (widgetRendererVersion.major < widgetVersion.major) {
+    return false;
+  }
+  // If the major versions are the same, the minor version acts
+  // like a tie-breaker.
+  // For example, input-number 3.2 can render an input-number
+  // 2.4, 3.0, or 3.2, but not an input number 3.3 or 4.0.
+  return widgetRendererVersion.minor >= widgetVersion.minor;
+};
+const isRawWidgetInfoRenderableBy = function (widgetInfo, rendererContentVersion) {
+  // Empty/non-existant widgets are always safe to render
+  if (widgetInfo == null || widgetInfo.type == null) {
+    return true;
   }
 
-  /**
-   * Return all widgets that meet the given criterion, from all Renderers
-   * except the Renderer that triggered this call.
-   *
-   * This function is provided to each Renderer's `findExternalWidgets` prop,
-   * which enables widgets in different Renderers to discover each other and
-   * communicate.
-   */
-  _findWidgets(callingData, filterCriterion) {
-    const results = [];
-    this._mapRenderers(data => {
-      if (callingData !== data && data.ref) {
-        results.push(...data.ref.findInternalWidgets(filterCriterion));
+  // NOTE: This doesn't modify the widget info if the widget info
+  // is at a later version than is supported.
+  const upgradedWidgetInfo = upgradeWidgetInfoToLatestVersion(widgetInfo);
+  return isUpgradedWidgetInfoRenderableBy(upgradedWidgetInfo, rendererContentVersion[upgradedWidgetInfo.type]);
+};
+const isRendererContentRenderableBy = function (rendererOptions, rendererContentVersion) {
+  let isRenderable = true;
+  traverse(rendererOptions, null, function (widgetInfo) {
+    isRenderable = isRenderable && isRawWidgetInfoRenderableBy(widgetInfo, rendererContentVersion);
+  });
+  return isRenderable;
+};
+const isItemRenderableByVersion = function (itemData, rendererContentVersion) {
+  if (itemData == null || rendererContentVersion == null) {
+    throw new perseusCore.PerseusError("missing parameter to Perseus.isRenderable.item", perseusCore.Errors.InvalidInput);
+  }
+  if (itemData._multi) {
+    const shape = inferItemShape$1(itemData);
+    let isRenderable = true;
+    findContentNodesInItem$1(itemData, shape, node => {
+      const nodeIsRenderable = isRendererContentRenderableBy(node, rendererContentVersion);
+      if (!nodeIsRenderable) {
+        isRenderable = false;
       }
     });
-    return results;
+    return isRenderable;
   }
+  return isRendererContentRenderableBy(itemData.question, rendererContentVersion);
+};
 
-  /**
-   * Copy the renderer tree, apply the given transformation to the leaf nodes
-   * and the optional given transformation to the array nodes, and return the
-   * result.
-   *
-   * Used to provide structured data to the call site (the Renderer tree on
-   * `render`, the Score tree on `getScores`, etc.), and to traverse the
-   * renderer tree even when we disregard the output (like in
-   * `_findWidgets`).
-   */
-  _mapRenderers(
-  // eslint-disable-next-line no-restricted-syntax
-  leafMapper
-  // @ts-expect-error - TS2315 - Type 'Tree' is not generic.
-  ) {
-    const {
-      rendererDataTree
-    } = this.state;
-    if (!rendererDataTree) {
-      return null;
-    }
-    const mapper = buildMapper().setContentMapper(leafMapper).setHintMapper(leafMapper);
-    return mapper.mapTree(rendererDataTree, this.props.shape);
-  }
-  _scoreFromRef(ref) {
-    if (!ref) {
-      return null;
-    }
-    const [guess, score] = ref.guessAndScore();
-    let state;
-    if (ref.getSerializedState) {
-      state = ref.getSerializedState();
+/**
+ * Identifies whether or not a given perseus item requires the use of a mouse
+ * or screen, based on the widgets it contains.
+ */
+const {
+  findContentNodesInItem,
+  inferItemShape
+} = MultiItems;
+
+// Iterate over a single Perseus renderer, mutating `widgets` by appending
+// violating widget types discovered in this item.
+function traverseRenderer(itemData, widgets) {
+  traverse(itemData, null, function (info) {
+    if (info.type && !isAccessible(info)) {
+      widgets.push(info.type);
     }
-    return Util.keScoreFromPerseusScore(score, guess, state);
-  }
+  });
+}
 
-  /**
-   * Return a tree in the shape of the multi-item, with scores at each of
-   * the content nodes and `null` at the other leaf nodes.
-   */
-  getScores() {
-    return this._mapRenderers(data => this._scoreFromRef(data.ref));
+// Returns a list of widgets that cause a given perseus item to require
+// the use of a screen or mouse.
+//
+// For now we'll just check the `accessible` field on each of the widgets
+// in the item data, but in the future we may specify accessibility on
+// each widget with higher granularity.
+function violatingWidgets(itemData) {
+  // TODO(jordan): Hints as well
+  const widgets = [];
+  if (itemData._multi) {
+    const shape = inferItemShape(itemData);
+    findContentNodesInItem(itemData, shape, content => traverseRenderer(content, widgets));
+  } else {
+    traverseRenderer(itemData.question, widgets);
   }
 
-  /**
-   * Return a single composite score for all rendered content nodes.
-   * The `guess` is a tree in the shape of the multi-item, with an individual
-   * guess at each content node and `null` at the other leaf nodes.
-   */
-  score() {
-    const scores = [];
-    const state = [];
-    const guess = this._mapRenderers(data => {
-      if (!data.ref) {
-        return null;
-      }
-      if (data.ref.getSerializedState) {
-        state.push(data.ref.getSerializedState());
-      }
-      scores.push(data.ref.score());
-      return data.ref?.getUserInput();
-    });
-    const combinedScore = scores.reduce(Util.combineScores);
-    return Util.keScoreFromPerseusScore(combinedScore, guess, state);
-  }
+  // Uniquify the list of widgets (by type)
+  return ___default["default"].uniq(widgets);
+}
 
-  /**
-   * Return a tree in the shape of the multi-item, with serialized state at
-   * each of the content nodes and `null` at the other leaf nodes.
-   *
-   * If the lastSerializedState argument is supplied, this function will fill
-   * in the state of not-currently-rendered content and hint nodes with the
-   * values from the previous serialized state. If no lastSerializedState is
-   * supplied, `null` will be returned for not-currently-rendered content and
-   * hint nodes.
-   */
-  _getSerializedState(lastSerializedState) {
-    return this._mapRenderers((data, _, path) => {
-      if (data.ref) {
-        return data.ref.getSerializedState();
-      }
-      if (lastSerializedState) {
-        return lens(lastSerializedState).get(path);
-      }
-      return null;
-    });
-  }
+/* eslint-disable eqeqeq, @typescript-eslint/no-unused-vars */
 
-  /**
-   * Given a tree in the shape of the multi-item, with serialized state at
-   * each of the content nodes, restore each state to the corresponding
-   * renderer if currently mounted.
-   */
-  restoreSerializedState(serializedState, callback) {
-    // We want to call our async callback only once all of the childrens'
-    // callbacks have run. We add one to this counter before we call out to
-    // each renderer and decrement it when it runs our callback.
-    let numCallbacks = 0;
-    const countCallback = () => {
-      numCallbacks--;
-      if (callback && numCallbacks === 0) {
-        callback();
+/**
+ * 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);
+        }
       }
-    };
-    this._mapRenderers((data, _, path) => {
-      if (!data.ref) {
-        return;
+      mantissa = rounded;
+    } else if (add > 0) {
+      for (let i = 0; i < add; i++) {
+        mantissa += "0";
       }
-      const state = lens(serializedState).get(path);
-      if (!state) {
-        return;
+    }
+    if (mantissa == "" || mantissa == "0") {
+      mantissa = "0";
+      positive = true;
+      order = 1 + sigDecs;
+      if (order != 0) {
+        zeroScientific = true;
       }
-      numCallbacks++;
-      data.ref?.restoreSerializedState(state, countCallback);
-    });
-  }
-
-  /**
-   * Given an array of renderers, if it happens to be an array of *hint*
-   * renderers, then attach a `firstN` method to the array, which allows the
-   * layout to render the hints together in one HintsRenderer.
-   */
-  _annotateRendererArray(renderers, rendererDatas, shape) {
-    if (shape.elementShape.type === "hint") {
-      // The shape says that these are HintRendererDatas, even though
-      // it's not provable at compile time, so perform a cast.
-      const hintRendererDatas = rendererDatas;
-      renderers = [...renderers];
-      renderers.firstN = n => /*#__PURE__*/React__namespace.createElement(HintsRenderer, _extends({}, this._getRendererProps(), {
-        findExternalWidgets: hintRendererDatas[0] ? hintRendererDatas[0].findExternalWidgets : undefined,
-        hints: hintRendererDatas.map(d => d.hint),
-        hintsVisible: n
-      }));
     }
-    return renderers;
   }
-
-  /**
-   * Return a tree in the shape of the multi-item, with a Renderer at each
-   * content node and a HintRenderer at each hint node.
-   *
-   * This is generated by running each of the `makeRenderer` functions at the
-   * leaf nodes.
-   */
-  _getRenderers() {
-    return this.getRenderersMapper.mapTree(this.state.rendererDataTree, this.props.shape);
+  const useScientific = scientific || mantissa.length > 20 || order > 4 || order < -2 || order - mantissa.length > 0 && trailingZeros(mantissa) > 0 || zeroScientific;
+  let returnVal = "";
+  if (!positive) {
+    returnVal += "-";
   }
-  render() {
-    if (this.state.renderError) {
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: aphrodite.css(styles.error)
-      }, this.context.strings.errorRendering({
-        error: String(this.state.renderError)
-      }));
+  if (useScientific) {
+    returnVal += mantissa.charAt(0);
+    if (mantissa.length > 1) {
+      returnVal += "." + mantissa.substring(1, mantissa.length);
     }
-
-    // Pass the renderer tree to the `children` function, which will
-    // determine the actual content of this component.
-    return /*#__PURE__*/React__namespace.createElement(DependenciesContext.Provider, {
-      value: this.props.dependencies
-    }, this.props.children({
-      renderers: this._getRenderers()
-    }));
+    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;
 }
-const styles = aphrodite.StyleSheet.create({
-  error: {
-    color: "red"
-  }
-});
 
 /**
- * Utility functions to build React PropTypes for multi-items and shapes.
+ * Count the significant trailing zeros on this object.
  *
- * If you're writing new components, though, consider using the Item and Shape
- * types instead.
+ * @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;
+}
 
 /**
- * Return a PropType that accepts Items of the given shape, and rejects other
- * objects.
+ * Parse a string representation of a floating point
+ * and pull out the sign.
  *
- * Usage: `propTypes: {item: buildPropTypeForShape(myShape)}`
+ * @param s the string representation of a floating point.
+ * @return true iff this is a positive number
  */
-function buildPropTypeForShape(shape) {
-  return PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
-    _multi: buildTreePropTypeForShape(shape)
-  }), PropTypes__default["default"].oneOf([null, undefined])]);
+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;
 }
 
 /**
- * Return a PropType that accepts ItemTrees of the given shape, and rejects
- * other objects.
+ * 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 buildTreePropTypeForShape(shape) {
-  if (shape.type === "content") {
-    return PropTypes__default["default"].shape({
-      // TODO(mdr): Remove #LegacyContentNode support.
-      __type: PropTypes__default["default"].oneOf(["content", "item"]).isRequired,
-      content: PropTypes__default["default"].string,
-      images: PropTypes__default["default"].objectOf(PropTypes__default["default"].any),
-      widgets: PropTypes__default["default"].objectOf(PropTypes__default["default"].any)
-    });
-  }
-  if (shape.type === "hint") {
-    return PropTypes__default["default"].shape({
-      __type: PropTypes__default["default"].oneOf(["hint"]).isRequired,
-      content: PropTypes__default["default"].string,
-      images: PropTypes__default["default"].objectOf(PropTypes__default["default"].any),
-      widgets: PropTypes__default["default"].objectOf(PropTypes__default["default"].any),
-      replace: PropTypes__default["default"].bool
-    });
+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 (shape.type === "tags") {
-    return PropTypes__default["default"].arrayOf(PropTypes__default["default"].string.isRequired);
+  if (all == "") {
+    return leadZeros;
   }
-  if (shape.type === "array") {
-    const elementPropType = buildTreePropTypeForShape(shape.elementShape);
-    return PropTypes__default["default"].arrayOf(elementPropType.isRequired);
+  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 (shape.type === "object") {
-    const valueShapes = shape.shape;
-    const propTypeShape = {};
-    Object.keys(valueShapes).forEach(key => {
-      propTypeShape[key] = buildTreePropTypeForShape(valueShapes[key]).isRequired;
-    });
-    return PropTypes__default["default"].shape(propTypeShape);
+  if (all == "") {
+    return totalDecs;
   }
-  throw new perseusCore.PerseusError(
-  // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
-  `unexpected shape type ${shape.type}`, perseusCore.Errors.InvalidInput);
+  return decPlaces;
 }
 
 /**
- * This library provides support for Perseus multi-items: structured Perseus
- * content that content creators can easily create, and that applications can
- * easily render into different parts of the layout.
- *
- * For more details about application and motivation, see:
- * https://sites.google.com/a/khanacademy.org/forge/for-developers/perseus-items-and-multi-items
- *
- * This file primarily exposes the `MultiRenderer` component, which performs
- * multi-rendering. To multi-render a question, pass in the content of the item
- * to the `MultiRenderer` component as a props. Then, pass in a function which
- * takes an object of renderers (in the same structure as the content), and
- * return a render tree. The `MultiRenderer` component will allow you to
- * combine scores, serialized state, etc. without having to manually call on
- * each of the functions. It also handles inter-widgets requests between the
- * different renderers.
- * For more details, see `multi-items/multi-renderer.jsx`.
- *
- * Example:
- *
- *   item = {_multi: {
- *       left: <content data>,
- *       right: [<content data>, <content data>],
- *   }}
- *   shape = shapes.shape({
- *       left: shapes.content,
- *       right: shapes.arrayOf(shapes.content),
- *   })
- *
- *   <MultiRenderer item={item} shape={shape}>
- *       {({renderers}) =>
- *           <div>
- *               <div id="left">{renderers.left}</div>
- *               <ul id="right">
- *                   {renderers.right.map(r => <li>{r}</li>)}
- *               </ul>
- *           </div>
- *       }
- *   </MultiRenderer>
- *
- * This file also exposes `shapes`, which helps you construct a runtime type
- * declaration for your particular class of multi-item. This can then be used
- * to create a MultirendererEditor for your multi-item shape, and to validate
- * that a multi-item conforms to the shape via `buildPropTypeForShape`.
- * For more details, see `multi-items/shapes.js`.
- *
- * This file also exposes some utility functions for working with generic
- * multi-items, like `findContentNodesInItem`, `findHintNodesInItem`,
- * `inferItemShape`, and `buildEmptyItemForShape`.
- * For more details, see `multi-items/items.js`.
- */
-var MultiItems = {
-  // Tools for rendering your multi-items
-  MultiRenderer,
-  // Tools for declaring your multi-item shapes
-  shapes,
-  buildPropTypeForShape,
-  // Tools for generically manipulating multi-items
-  buildEmptyItemForShape,
-  findContentNodesInItem: findContentNodesInItem$2,
-  findHintNodesInItem,
-  inferItemShape: inferItemShape$2
-};
-
-/**
- * Calculates whether a perseus item is renderable by a specific
- * perseus-item-data version.
+ * 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.
  *
- * This is done inside of the perseus repo so that it can traverse
- * widget-specific data that might need to do a sub-traversal.
- * This supports widgets that contain renderers, such as the
- * group or sequence widgets.
+ * @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
  */
-const {
-  findContentNodesInItem: findContentNodesInItem$1,
-  inferItemShape: inferItemShape$1
-} = MultiItems;
-const isUpgradedWidgetInfoRenderableBy = function (widgetInfo, widgetRendererVersion) {
-  if (widgetRendererVersion == null) {
-    // If the widget does not exist in this version, this will
-    // be null, and that version of perseus cannot render the
-    // widget (it doesn't even know the widget exists!)
-    return false;
-  }
-  const widgetVersion = widgetInfo.version || {
-    major: 0,
-    minor: 0
-  };
-  if (widgetRendererVersion.major > widgetVersion.major) {
-    return true;
-  }
-  if (widgetRendererVersion.major < widgetVersion.major) {
-    return false;
-  }
-  // If the major versions are the same, the minor version acts
-  // like a tie-breaker.
-  // For example, input-number 3.2 can render an input-number
-  // 2.4, 3.0, or 3.2, but not an input number 3.3 or 4.0.
-  return widgetRendererVersion.minor >= widgetVersion.minor;
-};
-const isRawWidgetInfoRenderableBy = function (widgetInfo, rendererContentVersion) {
-  // Empty/non-existant widgets are always safe to render
-  if (widgetInfo == null || widgetInfo.type == null) {
-    return true;
+function round(mantissa, digits) {
+  const last = mantissa.length - digits - 1;
+  if (last < 0) {
+    return "";
   }
-
-  // NOTE: This doesn't modify the widget info if the widget info
-  // is at a later version than is supported.
-  const upgradedWidgetInfo = upgradeWidgetInfoToLatestVersion(widgetInfo);
-  return isUpgradedWidgetInfoRenderableBy(upgradedWidgetInfo, rendererContentVersion[upgradedWidgetInfo.type]);
-};
-const isRendererContentRenderableBy = function (rendererOptions, rendererContentVersion) {
-  let isRenderable = true;
-  traverse(rendererOptions, null, function (widgetInfo) {
-    isRenderable = isRenderable && isRawWidgetInfoRenderableBy(widgetInfo, rendererContentVersion);
-  });
-  return isRenderable;
-};
-const isItemRenderableByVersion = function (itemData, rendererContentVersion) {
-  if (itemData == null || rendererContentVersion == null) {
-    throw new perseusCore.PerseusError("missing parameter to Perseus.isRenderable.item", perseusCore.Errors.InvalidInput);
+  if (last >= mantissa.length - 1) {
+    return mantissa;
   }
-  if (itemData._multi) {
-    const shape = inferItemShape$1(itemData);
-    let isRenderable = true;
-    findContentNodesInItem$1(itemData, shape, node => {
-      const nodeIsRenderable = isRendererContentRenderableBy(node, rendererContentVersion);
-      if (!nodeIsRenderable) {
-        isRenderable = false;
+  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;
       }
-    });
-    return isRenderable;
+    }
+    // @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;
+    }
   }
-  return isRendererContentRenderableBy(itemData.question, rendererContentVersion);
-};
-
-/**
- * Identifies whether or not a given perseus item requires the use of a mouse
- * or screen, based on the widgets it contains.
- */
-const {
-  findContentNodesInItem,
-  inferItemShape
-} = MultiItems;
-
-// Iterate over a single Perseus renderer, mutating `widgets` by appending
-// violating widget types discovered in this item.
-function traverseRenderer(itemData, widgets) {
-  traverse(itemData, null, function (info) {
-    if (info.type && !isAccessible(info)) {
-      widgets.push(info.type);
+  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;
     }
-  });
-}
-
-// Returns a list of widgets that cause a given perseus item to require
-// the use of a screen or mouse.
-//
-// For now we'll just check the `accessible` field on each of the widgets
-// in the item data, but in the future we may specify accessibility on
-// each widget with higher granularity.
-function violatingWidgets(itemData) {
-  // TODO(jordan): Hints as well
-  const widgets = [];
-  if (itemData._multi) {
-    const shape = inferItemShape(itemData);
-    findContentNodesInItem(itemData, shape, content => traverseRenderer(content, widgets));
-  } else {
-    traverseRenderer(itemData.question, widgets);
   }
-
-  // Uniquify the list of widgets (by type)
-  return ___default["default"].uniq(widgets);
+  if (roundUp) {
+    result = "1" + result;
+  }
+  return result;
 }
 
 /**
@@ -48219,9 +47911,6 @@ function generateTestInteractiveGraphWidget() {
       markings: "graph",
       labels: ["x", "y"],
       showProtractor: false,
-      showRuler: false,
-      rulerLabel: "mm",
-      rulerTicks: 2,
       range: [[-10, 10], [-10, 10]],
       graph: {
         type: "angle"
@@ -48333,7 +48022,6 @@ const widgetNameToEnum = {
   simulator: "SIMULATOR",
   sorter: "SORTER",
   table: "TABLE",
-  "unit-input": "UNIT",
   video: "VIDEO"
 };
 function convertWidgetNameToEnum(name) {
@@ -48415,6 +48103,8 @@ exports.getAnswerFromUserInput = getAnswerFromUserInput;
 exports.getAnswersFromWidgets = getAnswersFromWidgets;
 exports.getCorrectAnswerForWidgetId = getCorrectAnswerForWidgetId;
 exports.getLineCoords = getLineCoords;
+exports.getLinearSystemCoords = getLinearSystemCoords;
+exports.getSegmentCoords = getSegmentCoords;
 exports.getValidWidgetIds = getValidWidgetIds;
 exports.getWidgetFromWidgetMap = getWidgetFromWidgetMap;
 exports.getWidgetIdsFromContent = getWidgetIdsFromContent;