@khanacademy/perseus 42.0.3 → 43.0.0

package/dist/index.js

@@ -24,7 +24,7 @@ var kmath = require('@khanacademy/kmath');
 var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
 var wonderBlocksProgressSpinner = require('@khanacademy/wonder-blocks-progress-spinner');
 var SimpleMarkdown = require('@khanacademy/simple-markdown');
-var SimpleMarkdown$1 = require('@khanacademy/pure-markdown');
+var pureMarkdown = require('@khanacademy/pure-markdown');
 var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
 var Button = require('@khanacademy/wonder-blocks-button');
 var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
@@ -77,7 +77,6 @@ var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
 var $__default = /*#__PURE__*/_interopDefaultLegacy($);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var SimpleMarkdown__default = /*#__PURE__*/_interopDefaultLegacy(SimpleMarkdown);
-var SimpleMarkdown__namespace = /*#__PURE__*/_interopNamespace(SimpleMarkdown$1);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Banner__default = /*#__PURE__*/_interopDefaultLegacy(Banner);
 var caretDown__default = /*#__PURE__*/_interopDefaultLegacy(caretDown);
@@ -369,6 +368,8 @@ const mockStrings = {
   addPoint: "Add Point",
   removePoint: "Remove Point",
   graphKeyboardPrompt: "Press Shift + Enter to interact with the graph",
+  closePolygon: "Close shape",
+  openPolygon: "Re-open shape",
   srPointAtCoordinates: _ref27 => {
     let {
       num,
@@ -530,7 +531,10 @@ class InnerMathInput extends React__namespace.Component {
         locale
       } = this.context;
       // Initialize MathQuill.MathField instance
-      this.__mathField = mathInput.createMathField(this.__mathFieldWrapperRef, locale, this.props.mathInputStrings, baseConfig => ({
+      this.__mathField = mathInput.createMathField(this.__mathFieldWrapperRef, locale, this.props.mathInputStrings,
+      // TODO(LEMS-2656): remove TS suppression
+      // @ts-expect-error: Type 'EditableMathQuill' is not assignable to type 'MathFieldInterface'.
+      baseConfig => ({
         ...baseConfig,
         handlers: {
           edit: debounce(mathField => {
@@ -2259,6 +2263,24 @@ const KhanAnswerTypes = {
   }
 };
 
+/**
+ * Checks user input from the expression widget to see if it is scorable.
+ *
+ * Note: Most of the expression widget's validation requires the Rubric because
+ * of its use of KhanAnswerTypes as a core part of scoring.
+ *
+ * @see `scoreExpression()` for more details.
+ */
+function validateExpression(userInput) {
+  if (userInput === "") {
+    return {
+      type: "invalid",
+      message: null
+    };
+  }
+  return null;
+}
+
 /* Content creators input a list of answers which are matched from top to
  * bottom. The intent is that they can include spcific solutions which should
  * be graded as correct or incorrect (or ungraded!) first, then get more
@@ -2278,6 +2300,10 @@ const KhanAnswerTypes = {
  * - Otherwise, pass through the resulting points and message.
  */
 function scoreExpression(userInput, rubric, strings, locale) {
+  const validationError = validateExpression(userInput);
+  if (validationError) {
+    return validationError;
+  }
   const options = ___default["default"].clone(rubric);
   ___default["default"].extend(options, {
     decimal_separator: getDecimalSeparator(locale)
@@ -2535,11 +2561,17 @@ class Expression extends React__namespace.Component {
     }
     return true;
   };
+
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'FocusPath' is not assignable to type 'InputPath'.
   focusInputPath(inputPath) {
     // eslint-disable-next-line react/no-string-refs
     // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
     this.refs.input.focus();
   }
+
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'FocusPath' is not assignable to type 'InputPath'.
   blurInputPath(inputPath) {
     // eslint-disable-next-line react/no-string-refs
     // @ts-expect-error - TS2339 - Property 'blur' does not exist on type 'ReactInstance'.
@@ -2713,7 +2745,7 @@ const keypadConfigurationForProps = widgetOptions => {
     times: widgetOptions.times
   };
 };
-const propUpgrades$3 = {
+const propUpgrades$2 = {
   /* c8 ignore next */
   "1": v0props => ({
     times: v0props.times,
@@ -2773,10 +2805,14 @@ var Expression$1 = {
     major: 1,
     minor: 0
   },
-  propUpgrades: propUpgrades$3,
+  propUpgrades: propUpgrades$2,
   // For use by the editor
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusExpressionUserInput'.
   scorer: scoreExpression,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'Rubric' is not assignable to type 'PerseusExpressionRubric'.
   getOneCorrectAnswerFromRubric(rubric) {
     const correctAnswers = (rubric.answerForms || []).filter(answerForm => answerForm.considered === "correct");
     if (correctAnswers.length === 0) {
@@ -2859,6 +2895,8 @@ const nestedMap$2 = function (children, func, context) {
       return nestedMap$2(child, func);
     });
   }
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: T | ReadonlyArray<T> is not assignable to T
   return func.call(context, children);
 };
 
@@ -14637,7 +14675,9 @@ const constraints$2 = {
       });
 
       // bound the delta by the calculated bounds
-      const boundedDelta = ___default["default"].reduce(deltaBounds, function (delta, bound) {
+      const boundedDelta = ___default["default"].reduce(deltaBounds,
+      // @ts-expect-error: Type 'number[]' is not assignable to type 'Coord'.
+      function (delta, bound) {
         const lower = bound[0];
         const upper = bound[1];
         const deltaX = Math.max(lower[0], Math.min(upper[0], delta[0]));
@@ -15172,6 +15212,7 @@ const constraints$1 = {
     };
   },
   snap: function (snap) {
+    // @ts-expect-error: Type 'boolean | Coord' is not assignable to type 'Coord'.
     return function (coord) {
       if (snap === null) {
         // TODO(benchristel), NOTE(kevinb): this should probably return
@@ -15194,6 +15235,8 @@ const constraints$1 = {
         return optionalPaddingPx;
       }
     })();
+
+    // @ts-expect-error: Type 'boolean | Coord' is not assignable to type 'Coord'.
     return function (coord, prev, options) {
       const graphie = this.graphie;
       range = range || graphie.range;
@@ -16097,15 +16140,15 @@ const constraints = {
       });
 
       // bound the delta by the calculated bounds
-      const boundedDelta = ___default["default"].reduce(deltaBounds, function (delta, bound) {
+      const boundedDelta = ___default["default"].reduce(deltaBounds,
+      // @ts-expect-error - TS2345 - Type 'number[]' is not assignable to type 'Coord'.
+      function (delta, bound) {
         const lower = bound[0];
         const upper = bound[1];
         const deltaX = Math.max(lower[0], Math.min(upper[0], delta[0]));
         const deltaY = Math.max(lower[1], Math.min(upper[1], delta[1]));
         return [deltaX, deltaY];
       }, delta);
-
-      // @ts-expect-error - TS2322 - Type 'number[]' is not assignable to type 'Coord'.
       return kmath.vector.add(prevCoord, boundedDelta);
     };
   }
@@ -17022,6 +17065,7 @@ class ImageLoader extends React__namespace.Component {
 
     this.img = new Image();
     this.img.onload = this.handleLoad;
+    // @ts-expect-error: Type 'string | Event' is not assignable to type 'Event'.
     this.img.onerror = this.handleError;
     this.img.src = this.props.src;
   };
@@ -18080,6 +18124,7 @@ class InteractionTracker {
       this.widgetType = widgetType;
       this.widgetID = widgetID;
       this.setting = setting;
+      // @ts-expect-error: Type 'T | undefined' is not assignable to type 'T'.
       this.track = this._track;
     }
   }
@@ -18514,10 +18559,10 @@ const styles$C = aphrodite.StyleSheet.create({
 
 /* eslint-disable no-useless-escape, no-prototype-builtins */
 const rules$1 = {
-  ...SimpleMarkdown$1.pureMarkdownRules,
+  ...pureMarkdown.pureMarkdownRules,
   // NOTE: basically ignored by JIPT. wraps everything at the outer layer
   columns: {
-    ...SimpleMarkdown$1.pureMarkdownRules.columns,
+    ...pureMarkdown.pureMarkdownRules.columns,
     react: (node, output, state) => {
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: "perseus-two-columns",
@@ -18545,7 +18590,7 @@ const rules$1 = {
   // for exercises the renderer just renders the crowdin id to the
   // renderer div.
   crowdinId: {
-    ...SimpleMarkdown$1.pureMarkdownRules.crowdinId,
+    ...pureMarkdown.pureMarkdownRules.crowdinId,
     react: (node, output, state) => node.id
   },
   // Ensure that the table is focusable in sequential keyboard navigation
@@ -18554,7 +18599,7 @@ const rules$1 = {
   // left/right gesture. Note, setting `tabindex` doesn't appear required for
   // iOS 14.4, in order for VoiceOver to work.
   table: {
-    ...SimpleMarkdown$1.pureMarkdownRules.table,
+    ...pureMarkdown.pureMarkdownRules.table,
     react: function (node, output, state) {
       const table = SimpleMarkdown__default["default"].defaultRules.table.react(node, output, state);
       if (!state.isMobile) {
@@ -18572,7 +18617,7 @@ const rules$1 = {
   // our table regex into tableCapture[1..], and we pass tableCapture to
   // our nptable regex
   titledTable: {
-    ...SimpleMarkdown$1.pureMarkdownRules.titledTable,
+    ...pureMarkdown.pureMarkdownRules.titledTable,
     react: (node, output, state) => {
       let contents;
       if (!node.table) {
@@ -18632,7 +18677,7 @@ const rules$1 = {
     }
   },
   widget: {
-    ...SimpleMarkdown$1.pureMarkdownRules.widget,
+    ...pureMarkdown.pureMarkdownRules.widget,
     react: (node, output, state) => {
       // The actual output is handled in the renderer, where
       // we know the current widget props/state. This is
@@ -18643,7 +18688,7 @@ const rules$1 = {
     }
   },
   blockMath: {
-    ...SimpleMarkdown$1.pureMarkdownRules.blockMath,
+    ...pureMarkdown.pureMarkdownRules.blockMath,
     react: (node, output, state) => {
       const {
         TeX
@@ -18657,7 +18702,7 @@ const rules$1 = {
     }
   },
   math: {
-    ...SimpleMarkdown$1.pureMarkdownRules.math,
+    ...pureMarkdown.pureMarkdownRules.math,
     react: (node, output, state) => {
       const {
         TeX
@@ -18671,7 +18716,7 @@ const rules$1 = {
     }
   },
   unescapedDollar: {
-    ...SimpleMarkdown$1.pureMarkdownRules.unescapedDollar,
+    ...pureMarkdown.pureMarkdownRules.unescapedDollar,
     react: (node, output, state) => {
       // Unescaped dollar signs render correctly, but result in
       // untranslatable text after the i18n python linter flags it
@@ -18681,7 +18726,7 @@ const rules$1 = {
   // Extend the SimpleMarkdown link parser to make the link open in a new
   // window and handle reverse tabnapping phishing attacks
   link: {
-    ...SimpleMarkdown$1.pureMarkdownRules.link,
+    ...pureMarkdown.pureMarkdownRules.link,
     react: function (node, output, state) {
       const link = SimpleMarkdown__default["default"].defaultRules.link.react(node, output, state);
       const href = link.props.href;
@@ -18708,7 +18753,7 @@ const rules$1 = {
     }
   },
   codeBlock: {
-    ...SimpleMarkdown$1.pureMarkdownRules.codeBlock,
+    ...pureMarkdown.pureMarkdownRules.codeBlock,
     react: (node, output, state) => {
       // ideally this should be a different rule, with only an
       // output function, but right now that breaks the parser.
@@ -18726,7 +18771,7 @@ const rules$1 = {
   // transform the tree to add lint nodes. This rule is here
   // just for the react() function
   lint: {
-    ...SimpleMarkdown$1.pureMarkdownRules.lint,
+    ...pureMarkdown.pureMarkdownRules.lint,
     react: (node, output, state) => {
       return /*#__PURE__*/React__namespace.createElement(Lint, {
         message: node.message,
@@ -18875,342 +18920,6 @@ class QuestionParagraph extends React__namespace.Component {
   }
 }
 
-// Methods to convert input-number widgets to numeric-input widgets
-
-const inputNumberToNumericInput = json => {
-  // First we need to create a map of the old input-number keys to the new numeric-input keys
-  // so that we can ensure we update the content and widgets accordingly
-  const renameMap = getInputNumberRenameMap(json);
-
-  // Then we can use this to update the JSON
-  return convertInputNumberJson(json, renameMap);
-};
-
-// We need to be able to run this code recursively in order to convert nested input-number widgets
-const convertInputNumberJson = (json, renameMap) => {
-  const updatedContent = convertDeprecatedWidgetsInContent(json, renameMap);
-  const updatedWidgets = convertInputNumberWidgetOptions(json, renameMap);
-  const modernizedJson = {
-    ...json,
-    content: updatedContent,
-    widgets: updatedWidgets
-  };
-  return modernizedJson;
-};
-
-// Convert the input-number json in the widgets of a PerseusRenderer object
-const convertInputNumberWidgetOptions = (json, renameMap) => {
-  const widgets = {
-    ...json.widgets
-  };
-  // The question.widgets is a dictionary map of widgets, so we need to loop through in order to convert input-number to numeric-input
-  // which can exist as both the key or as a value on widget.type.
-  for (const key of Object.keys(widgets)) {
-    // Loop through the keys of the widgets dictionary
-    if (widgets[key].options.widgets) {
-      widgets[key].options = {
-        ...inputNumberToNumericInput(widgets[key].options)
-      };
-    }
-    // Check if the widget is an input-number
-    if (widgets[key].type === "input-number") {
-      // If the answerType is not number or percent, we need to provide
-      // the answer form for the numeric-input widget
-      const provideAnswerForm = widgets[key].options.answerType !== "number" && widgets[key].options.answerType !== "percent";
-      // We need to determine the mathFormat for the numeric-input widget
-      const mathFormat = widgets[key].options.answerType === "rational" ? "proper" // input-number uses "rational" for proper fractions
-      : widgets[key].options.answerType; // Otherwise, we can use the answerType directly
-
-      // We need to update the answers prop to match the numeric-input widget format
-      const answers = [{
-        value: widgets[key].options.value,
-        simplify: widgets[key].options.simplify,
-        // Input Number doesn't have a strict prop, so we default to false
-        strict: false,
-        // We only want to set maxError if the inexact prop is true
-        maxError: widgets[key].options.inexact ? widgets[key].options.maxError : 0,
-        status: "correct",
-        // Input-number only allows correct answers
-        message: ""
-      }];
-
-      // Add the required answerForms if provided/applicable
-      if (provideAnswerForm) {
-        answers[0].answerForms = [mathFormat];
-      }
-
-      // Update the options prop to match the numeric-input widget format
-      const upgradedWidgetOptions = {
-        answers,
-        size: widgets[key].options.size,
-        coefficient: false,
-        // input-number doesn't have a coefficient prop
-        labelText: "",
-        // input-number doesn't have a labelText prop
-        static: false,
-        // static is always false for numeric-input
-        rightAlign: widgets[key].options.rightAlign || false
-      };
-      const upgradedWidget = {
-        options: upgradedWidgetOptions,
-        type: "numeric-input"
-      };
-      const newWidgetName = renameMap[key];
-      // Create the new key entry
-      widgets[newWidgetName] = upgradedWidget;
-
-      // We need to delete the old widget key
-      delete widgets[key];
-    }
-  }
-  return widgets;
-};
-
-// Convert the deprecated widget refs in the content string
-// of a PerseusRenderer object to their renamed equivalents
-const convertDeprecatedWidgetsInContent = (json, renameMap) => {
-  return Object.keys(renameMap).reduce((newContent, oldKey) => {
-    const newKey = renameMap[oldKey];
-    return newKey ? newContent.replace(oldKey, newKey) : newContent;
-  }, json.content);
-};
-
-// Create a map of the old input-number keys to the new numeric-input keys
-const getInputNumberRenameMap = json => {
-  const numericRegex = /(?<=\[\[\u2603 )(numeric-input \d+)(?=\]\])/g;
-  const inputNumberRegex = /(?<=\[\[\u2603 )(input-number \d+)(?=\]\])/g;
-
-  // Get all the content strings within the json, which might be nested within widgets
-  const allContentStrings = json.content;
-
-  // Loop through the content strings to get all the input-number widgets
-  const renameMap = {};
-  const inputNumberMatches = [...(allContentStrings.match(inputNumberRegex) || [])];
-
-  // We want to count any pre-existing numeric-input widgets
-  // so that we can start the new ids at the next number
-  const numericMatches = [...(allContentStrings.match(numericRegex) || [])];
-  let currentNumericCount = numericMatches.reduce((count, match) => {
-    const id = parseInt(match.split(" ")[1], 10);
-    return id >= count ? id + 1 : count; // We want to start at the next highest number
-  }, 1);
-
-  // Now that we have all the necessary information, we can create the renameMap
-  for (const match of inputNumberMatches) {
-    const oldKey = match;
-    const newKey = `numeric-input ${currentNumericCount}`;
-    renameMap[oldKey] = newKey;
-    currentNumericCount++;
-  }
-  return renameMap;
-};
-
-// Convert the user input data keys from input-number to numeric-input
-const convertUserInputNumberData = (userInputMap, renameMap) => {
-  const updatedUserInputMap = {
-    ...userInputMap
-  };
-  for (const key of Object.keys(userInputMap)) {
-    if (key.includes("input-number")) {
-      const updatedKey = renameMap[key];
-      updatedUserInputMap[updatedKey] = userInputMap[key];
-      delete updatedUserInputMap[key];
-    }
-  }
-  return updatedUserInputMap;
-};
-
-// Used to convert InputNumber widgets to NumericInput widgets for scoring
-const convertInputNumberForScoring = (rubric, userInputMap) => {
-  // First we need to create a map of the old input-number keys to the new numeric-input keys
-  // so that we can ensure we update the content, widgets, AND userInput accordingly
-  const renameMap = getInputNumberRenameMap(rubric);
-  const convertedRubric = convertInputNumberJson(rubric, renameMap);
-  const convertedUserData = convertUserInputNumberData(userInputMap, renameMap);
-  return {
-    convertedRubric,
-    convertedUserData
-  };
-};
-
-const widgetRegExes = [/input-number \d+/]; // We can add more regexes here in the future
-
-// This utils in this file are used to modernize our Perseus JSON structure,
-// so that we can convert deprecated widgets to their modern equivalents when
-// content creators use the Editor Page to update content containing these widgets.
-// Currently, we're only converting input-number to numeric-input,
-// but we can add more conversions here in the future.
-
-// Modernize the json content of a PerseusRenderer object
-// by converting deprecated widgets to their modern equivalents
-const convertDeprecatedWidgets = json => {
-  // Currently we're only converting input-number to numeric-input,
-  // But we can add more conversions here in the future
-  return inputNumberToNumericInput(json);
-};
-const conversionRequired = json => {
-  // If there's no content, then there's no conversion required
-  if (!json.content) {
-    return false;
-  }
-  // Check the content string for any top-level input-number widgets
-  if (widgetRegExes.some(regex => regex.test(json.content))) {
-    return true;
-  }
-
-  // If there's no deprecated widget in the top-level, then check for any nested widgets
-  for (const key of Object.keys(json.widgets)) {
-    if (json.widgets[key].options.widgets) {
-      const nestedJson = json.widgets[key].options;
-      if (conversionRequired(nestedJson)) {
-        return true;
-      }
-    }
-  }
-  return false;
-};
-
-/**
- * Convert the deprecated widgets in the rubric and user data to their
- * modern equivalents for scoring. These need to be updated together
- * in order to ensure that the widgetKeys match between the rubric and user data.
- */
-const convertDeprecatedWidgetsForScoring = (rubric, userInputMap) => {
-  return convertInputNumberForScoring(rubric, userInputMap);
-};
-
-// These are all the current widgets that require user-input and are supported for automatic scoring
-const QUESTION_WIDGETS = ["numeric-input", "input-number", "radio", "interactive-graph", "interactive-number-line", "categorizer", "plotter", "orderer", "protractor", "matcher", "sorter"];
-
-/**
- * Regex for widget placeholders in a string.
- *
- * First capture group is the widget ID (ex. 'radio 1')
- * Second capture group is the widget type (ex. "radio)
- * exec return will look like: ['[[☃ radio 1]]', 'radio 1', 'radio']
- */
-function getWidgetRegex() {
-  return /\[\[☃ ([A-Za-z0-9- ]+)\]\]/g;
-}
-
-/**
- * Add a widget placeholder using the widget ID.
- * ex. addWidget("radio 1") => "[[☃ radio 1]]"
- *
- * @param {string} id
- * @returns {string}
- */
-function addWidget(id) {
-  return `[[☃ ${id}]]`;
-}
-
-/**
- * Get a widget type by a widget's ID
- * (please don't derive type from ID)
- *
- * @param {string} widgetId the ID of the widget
- * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
- * @returns {string} the widget type (ie "radio")
- */
-function getWidgetTypeByWidgetId(WidgetId, widgetMap) {
-  const widget = widgetMap[WidgetId];
-  return widget?.type ?? null;
-}
-
-/**
- * Does the content have a specific type of widget?
- *
- * @param {string} type the type of the widget in question (ie "radio")
- * @param {string} content the string to search through
- * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
- * @returns {boolean} if the content includes the widget type
- */
-function contentHasWidgetType(type, content, widgetMap) {
-  return getWidgetIdsFromContentByType(type, content, widgetMap).length > 0;
-}
-
-/**
- * Extract all widget IDs, which includes the widget type and instance number.
- * example output: ['radio 1', 'categorizer 1', 'categorizor 2']
- *
- * Content should contain Perseus widget placeholders,
- * which look like: '[[☃ radio 1]]'.
- *
- * @param {string} content
- * @returns {ReadonlyArray<string>} widgetIds
- */
-function getWidgetIdsFromContent(content) {
-  const widgets = [];
-  const localWidgetRegex = getWidgetRegex();
-  let match = localWidgetRegex.exec(content);
-  while (match !== null) {
-    widgets.push(match[1]);
-    match = localWidgetRegex.exec(content);
-  }
-  return widgets;
-}
-
-/**
- * Get a list of widget IDs from content,
- * but only for specific widget types
- *
- * @param {string} type the type of widget (ie "radio")
- * @param {string} content the string to parse
- * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
- * @returns {ReadonlyArray<string>} the widget type (ie "radio")
- */
-function getWidgetIdsFromContentByType(type, content, widgetMap) {
-  const rv = [];
-  const widgetIdsInContent = getWidgetIdsFromContent(content);
-  widgetIdsInContent.forEach(widgetId => {
-    const widget = widgetMap[widgetId];
-    if (widget?.type === type) {
-      rv.push(widgetId);
-    }
-  });
-  return rv;
-}
-
-/**
- * Pull the widget map out of ItemData
- *
- * @param {PerseusItem} PerseusItem containing a widgetMap
- * @returns {WidgetMap} the widget map in the PerseusItem
- */
-function getWidgetsMapFromItemData(itemData) {
-  return itemData.question.widgets;
-}
-
-/**
- * Get the widget information from a WidgetMap
- *
- * @param {string} widgetId the ID of the widget
- * @returns {PerseusWidget | null} the widget data if it exists, otherwise null
- */
-function getWidgetFromWidgetMap(widgetId, widgetMap) {
-  return widgetMap[widgetId] ?? null;
-}
-
-/**
- * Get select widgets from a widget map.
- * Useful for multi-items that needs to split
- * one PerseusItem into several
- *
- * @param {ReadonlyArray<string>} widgetIds to extract
- * @param {PerseusWidgetsMap} widgetMap to extract from
- * @return {PerseusWidgetsMap} a new widget map with requested widgets
- */
-function getWidgetsFromWidgetMap(widgetIds, widgetMap) {
-  const widgets = {};
-  widgetIds.forEach(widgetId => {
-    const widget = getWidgetFromWidgetMap(widgetId, widgetMap);
-    if (widget) {
-      widgets[widgetId] = widget;
-    }
-  });
-  return widgets;
-}
-
 const DEFAULT_ALIGNMENT$1 = "block";
 // NOTE(kevinb): "default" is not one in `validAlignments`.
 const DEFAULT_SUPPORTED_ALIGNMENTS = ["default"];
@@ -19261,9 +18970,6 @@ const replaceDeprecatedWidgets = () => {
   replaceWidget("sequence", "deprecated-standin");
   replaceWidget("simulator", "deprecated-standin");
   replaceWidget("unit-input", "deprecated-standin");
-
-  // Input-Number is a special case as it is being replaced by Numeric-Input
-  replaceWidget("input-number", "numeric-input");
 };
 const registerEditors = editorsToRegister => {
   editorsToRegister.forEach(editor => {
@@ -19298,11 +19004,6 @@ const replaceDeprecatedEditors = () => {
   replaceEditor("sequence", "deprecated-standin");
   replaceEditor("simulator", "deprecated-standin");
   replaceEditor("unit-input", "deprecated-standin");
-
-  // We're replacing the input-number editor with the numeric-input editor here,
-  // but we're also modifying the JSON content to convert input-number into the
-  // numeric-input format over in editor-page.tsx on line 92.
-  replaceEditor("input-number", "numeric-input");
 };
 const getWidget = name => {
   // TODO(alex): Consider referring to these as renderers to avoid
@@ -19349,8 +19050,10 @@ const getVersionVector = () => {
 const getPublicWidgets = () => {
   // TODO(alex): Update underscore.js so that _.pick can take a function.
   // @ts-expect-error - TS2740 - Type 'Pick<{ [key: string]: Readonly<{ name: string; displayName: string; getWidget?: (() => ComponentType<any>) | undefined; accessible?: boolean | ((props: any) => boolean) | undefined; hidden?: boolean | undefined; ... 10 more ...; widget: ComponentType<...>; }>; }, string>' is missing the following properties from type 'readonly Readonly<{ name: string; displayName: string; getWidget?: (() => ComponentType<any>) | undefined; accessible?: boolean | ((props: any) => boolean) | undefined; hidden?: boolean | undefined; ... 10 more ...; widget: ComponentType<...>; }>[]': length, concat, join, slice, and 18 more.
-  return ___default["default"].pick(widgets, ___default["default"].reject(___default["default"].keys(widgets), function (name) {
-    return widgets[name].hidden || name === "input-number";
+  return ___default["default"].pick(widgets,
+  // @ts-expect-error - TS2345 - Argument of type '(name: string) => boolean | undefined' is not assignable to parameter of type 'Iteratee<string[], boolean, string>'.
+  ___default["default"].reject(___default["default"].keys(widgets), function (name) {
+    return widgets[name].hidden;
   }));
 };
 const isAccessible = widgetInfo => {
@@ -19671,34 +19374,6 @@ widgetIds, userInputMap, strings, locale) {
     }
   });
 }
-
-// TODO: combine scorePerseusItem with scoreWidgetsFunctional
-// once scorePerseusItem is the only one calling scoreWidgetsFunctional
-function scorePerseusItem(perseusRenderData, userInputMap,
-// TODO(LEMS-2461,LEMS-2391): these probably
-// need to be removed before we move this to the server
-strings, locale) {
-  let convertedRenderData = perseusRenderData;
-  let convertedUserInputMap = userInputMap;
-
-  // Check if the PerseusRenderer object contains any deprecated widgets that need to be converted
-  const mustConvertData = conversionRequired(perseusRenderData);
-  if (mustConvertData) {
-    const {
-      convertedRubric,
-      convertedUserData
-    } = convertDeprecatedWidgetsForScoring(perseusRenderData, userInputMap);
-    convertedRenderData = convertedRubric;
-    convertedUserInputMap = convertedUserData;
-  }
-
-  // There seems to be a chance that PerseusRenderer.widgets might include
-  // widget data for widgets that are not in PerseusRenderer.content,
-  // so this checks that the widgets are being used before scoring them
-  const usedWidgetIds = getWidgetIdsFromContent(convertedRenderData.content);
-  const scores = scoreWidgetsFunctional(convertedRenderData.widgets, usedWidgetIds, convertedUserInputMap, strings, locale);
-  return Util.flattenScores(scores);
-}
 function scoreWidgetsFunctional(widgets,
 // This is a port of old code, I'm not sure why
 // we need widgetIds vs the keys of the widgets object
@@ -19719,7 +19394,7 @@ widgetIds, userInputMap, strings, locale) {
     const userInput = userInputMap[id];
     const scorer = getWidgetScorer(widget.type);
     if (widget.type === "group") {
-      const scores = scoreWidgetsFunctional(widget.options.widgets, getWidgetIdsFromContent(widget.options.content), userInputMap[id], strings, locale);
+      const scores = scoreWidgetsFunctional(widget.options.widgets, Object.keys(widget.options.widgets), userInputMap[id], strings, locale);
       widgetScores[id] = Util.flattenScores(scores);
     } else if (scorer) {
       widgetScores[id] = scorer(userInput, widget.options, strings, locale);
@@ -20768,7 +20443,7 @@ class Renderer extends React__namespace.Component {
       // Instead, we center them with css magic in styles.less
       // /cry(aria)
       this._foundTextNodes = true;
-      if (this.widgetIds.includes(node.id)) {
+      if (___default["default"].contains(this.widgetIds, node.id)) {
         // We don't want to render a duplicate widget key/ref,
         // as this causes problems with react (for obvious
         // reasons). Instead we just notify the
@@ -21093,7 +20768,7 @@ class Renderer extends React__namespace.Component {
   };
   getInputPaths = () => {
     const inputPaths = [];
-    this.widgetIds.forEach(widgetId => {
+    ___default["default"].each(this.widgetIds, widgetId => {
       const widget = this.getWidgetInstance(widgetId);
       if (widget && widget.getInputPaths) {
         // Grab all input paths and add widgetID to the front
@@ -21101,7 +20776,7 @@ class Renderer extends React__namespace.Component {
         // Prefix paths with their widgetID and add to collective
         // list of paths.
         // @ts-expect-error - TS2345 - Argument of type '(inputPath: string) => void' is not assignable to parameter of type 'CollectionIterator<FocusPath, void, readonly FocusPath[]>'.
-        widgetInputPaths.forEach(inputPath => {
+        ___default["default"].each(widgetInputPaths, inputPath => {
           const relativeInputPath = [widgetId].concat(inputPath);
           inputPaths.push(relativeInputPath);
         });
@@ -21294,30 +20969,33 @@ class Renderer extends React__namespace.Component {
   }
 
   /**
-   * Scores the content.
-   *
-   * @deprecated use scorePerseusItem
+   * Returns an object mapping from widget ID to perseus-style score.
+   * The keys of this object are the values of the array returned
+   * from `getWidgetIds`.
    */
-  score() {
-    const scores = scoreWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.props.strings, this.context.locale);
-    const combinedScore = Util.flattenScores(scores);
-    return combinedScore;
+  scoreWidgets() {
+    return scoreWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.props.strings, this.context.locale);
   }
 
   /**
-   * @deprecated use scorePerseusItem
+   * Grades the content.
    */
-  guessAndScore = () => {
+  score() {
+    const scores = this.scoreWidgets();
+    const combinedScore = Util.flattenScores(scores);
+    return combinedScore;
+  }
+  guessAndScore() {
     const totalGuess = this.getUserInput();
     const totalScore = this.score();
     return [totalGuess, totalScore];
-  };
+  }
   examples = () => {
     const widgetIds = this.widgetIds;
-    const examples = widgetIds.map(widgetId => {
+    const examples = ___default["default"].compact(___default["default"].map(widgetIds, widgetId => {
       const widget = this.getWidgetInstance(widgetId);
       return widget != null && widget.examples ? widget.examples() : null;
-    }).filter(Boolean);
+    }));
 
     // no widgets with examples
     if (!examples.length) {
@@ -22322,11 +22000,17 @@ class InputNumber extends React__namespace.Component {
     this.refs.input.focus();
     return true;
   };
+
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'FocusPath' is not assignable to type 'Path'.
   focusInputPath = inputPath => {
     // eslint-disable-next-line react/no-string-refs
     // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
     this.refs.input.focus();
   };
+
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'FocusPath' is not assignable to type 'Path'.
   blurInputPath = inputPath => {
     // eslint-disable-next-line react/no-string-refs
     // @ts-expect-error - TS2339 - Property 'blur' does not exist on type 'ReactInstance'.
@@ -22342,6 +22026,9 @@ class InputNumber extends React__namespace.Component {
     /* c8 ignore next */
     return [[]];
   };
+
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'FocusPath' is not assignable to type 'Path'.
   setInputValue = (path, newValue, cb) => {
     this.props.onChange({
       currentValue: newValue
@@ -22452,6 +22139,8 @@ var InputNumber$1 = {
   widget: InputNumber,
   transform: propTransform$3,
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusInputNumberUserInput'.
   scorer: scoreInputNumber,
   getOneCorrectAnswerFromRubric(rubric) {
     if (rubric.value == null) {
@@ -22745,7 +22434,7 @@ class NumericInput extends React__namespace.Component {
         height: "auto"
       }
     });
-    return /*#__PURE__*/React__namespace.createElement(InputWithExamples, {
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(InputWithExamples, {
       ref: ref => this.inputRef = ref,
       value: this.props.currentValue,
       onChange: this.handleChange,
@@ -22757,7 +22446,7 @@ class NumericInput extends React__namespace.Component {
       id: this.props.widgetId,
       disabled: this.props.apiOptions.readOnly,
       style: styles.input
-    });
+    }));
   }
 }
 
@@ -22815,69 +22504,19 @@ const propsTransform = function (widgetOptions) {
   });
   return rendererProps;
 };
-
-// This function is being used to replace the input-number widget
-// with the numeric-input widget
-const propUpgrades$2 = {
-  /* c8 ignore next */
-  "1": initialProps => {
-    // If the initialProps has simplify, it means we're upgrading from
-    // input-number to numeric-input. In this case, we need to upgrade
-    // the widget options accordingly.
-    if (initialProps.simplify !== undefined) {
-      // If the answerType is not number or percent, we need to provide
-      // the answer form for the numeric-input widget
-      const provideAnswerForm = initialProps.answerType !== "number" && initialProps.answerType !== "percent";
-
-      // We need to determine the mathFormat for the numeric-input widget
-      const mathFormat = initialProps.answerType === "rational" ? "proper" // input-number uses "rational" for proper fractions
-      : initialProps.answerType; // Otherwise, we can use the answerType directly
-
-      // If adjusting this logic, also adjust the logic in the convertInputNumberWidgetOptions
-      // function in input-number.ts in the Perseus Editor package's util folder
-      const answers = [{
-        value: initialProps.value,
-        simplify: initialProps.simplify,
-        answerForms: provideAnswerForm ? [mathFormat] : undefined,
-        strict: initialProps.inexact,
-        // We only want to set maxError if the inexact prop is true
-        maxError: initialProps.inexact ? initialProps.maxError : 0,
-        status: "correct",
-        // Input-number only allows correct answers
-        message: ""
-      }];
-      return {
-        answers,
-        size: initialProps.size,
-        coefficient: false,
-        // input-number doesn't have a coefficient prop
-        labelText: "",
-        // input-number doesn't have a labelText prop
-        static: false,
-        // static is always false for numeric-input
-        rightAlign: initialProps.rightAlign || false
-      };
-    } else {
-      // Otherwise simply return the initialProps as there's no differences
-      // between v0 and v1 for numeric-input
-      return initialProps;
-    }
-  }
-};
 var NumericInput$1 = {
   name: "numeric-input",
   displayName: "Numeric input",
   defaultAlignment: "inline-block",
   accessible: true,
   widget: NumericInput,
-  version: {
-    major: 1,
-    minor: 0
-  },
   transform: propsTransform,
-  propUpgrades: propUpgrades$2,
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusNumericInputUserInput'.
   scorer: scoreNumericInput,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'Rubric' is not assignable to type 'PerseusNumericInputRubric'
   getOneCorrectAnswerFromRubric(rubric) {
     const correctAnswers = rubric.answers.filter(answer => answer.status === "correct");
     const answerStrings = correctAnswers.map(answer => {
@@ -24696,6 +24335,9 @@ const CIRCLE_LABEL_STYLE = {
   borderRadius: "50%",
   textAlign: "center"
 };
+
+// TODO(LEMS-2656): remove TS suppression
+// @ts-expect-error: State is not assignable to ParseState
 const builtParser = SimpleMarkdown__default["default"].parserFor(rules);
 const parse$2 = (source, state) => {
   // @ts-expect-error - TS2322 - Type 'ParseState | {}' is not assignable to type 'ParseState | null | undefined'.
@@ -27151,6 +26793,8 @@ var Radio = {
   },
   propUpgrades: propUpgrades$1,
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type UserInput is not assignable to type PerseusRadioUserInput
   scorer: scoreRadio
 };
 
@@ -27374,6 +27018,8 @@ var Categorizer$1 = {
     return ___default["default"].pick(editorProps, "items", "categories", "values", "randomizeItems");
   },
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusCSProgramUserInput'.
   scorer: scoreCategorizer
 };
 
@@ -27611,6 +27257,8 @@ var CSProgram$1 = {
   supportedAlignments: ["block", "full-width"],
   widget: CSProgram,
   hidden: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusCSProgramUserInput'.
   scorer: scoreCSProgram
 };
 
@@ -27826,6 +27474,8 @@ var Dropdown$1 = {
   accessible: true,
   widget: Dropdown,
   transform: optionsTransform,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusDropdownUserInput'.
   scorer: scoreDropdown
 };
 
@@ -29412,6 +29062,8 @@ class FunctionGrapher extends React__namespace.Component {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
+      // TODO(LEMS-2656): remove TS suppression
+      // @ts-expect-error: Argument of type 'any[]' is not assignable to parameter of type '[newPropsOrSinglePropName: string | { [key: string]: any; }, propValue?: any, callback?: (() => unknown) | undefined]'. Target requires 1 element(s) but source may have fewer.
       return change.apply(_this, args);
     };
   })();
@@ -29769,6 +29421,8 @@ var Grapher$1 = {
   widget: Grapher,
   transform: propTransform$2,
   staticTransform: staticTransform$4,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusGrapherUserInput'.
   scorer: scoreGrapher
 };
 
@@ -29892,9 +29546,6 @@ class Group extends React__namespace.Component {
         this.change("widgets", this.rendererRef.props.widgets);
       }
     };
-
-    // TODO(LEMS-2391): replace this when there's a separate check
-    // for valid/invalid state
     const score = this.rendererRef?.score();
     const isValid = score && score.type !== "invalid";
     const isInvalid = score && score.type === "invalid";
@@ -30102,6 +29753,8 @@ var Iframe$1 = {
   widget: Iframe,
   // Let's not expose it to all content creators yet
   hidden: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusIframeUserInput'.
   scorer: scoreIframe
 };
 
@@ -31787,7 +31440,7 @@ function isUnlimitedGraphState(state) {
 function replaceOutsideTeX(mathString) {
   // All the information we need is in the first section,
   // whether it's typed as "blockmath" or "paragraph"
-  const firstSection = SimpleMarkdown__namespace.parse(mathString)[0];
+  const firstSection = pureMarkdown.parse(mathString)[0];
 
   // If it's blockMath, the outer level has the full math content.
   if (firstSection.type === "blockMath") {
@@ -31840,6 +31493,38 @@ function escapeSpecialChars(str) {
   return str.replace(/([$\\{}])/g, "\\$1");
 }
 
+/**
+ * Parse a string of text and math into a list of objects with type and content
+ *
+ * Example: "Pi is about $\frac{22}{7}$" ==>
+ *    [
+ *      {type: "text", content: "Pi is about "},
+ *      {type: "math", content: "\\frac{22}{7}"},
+ *    ]
+ */
+const mathOnlyParser = SimpleMarkdown__default["default"].parserFor({
+  math: {
+    ...pureMarkdown.pureMarkdownRules.math,
+    order: 0
+  },
+  text: {
+    order: 1,
+    match: SimpleMarkdown__default["default"].anyScopeRegex(/^([^$\\{}]+)/),
+    parse: capture => ({
+      content: capture[0]
+    })
+  },
+  specialCharacter: {
+    order: 2,
+    match: SimpleMarkdown__default["default"].anyScopeRegex(/^(\\[\S\s]|\$|\\$|{|})/),
+    parse: capture => ({
+      content: capture[0]
+    })
+  }
+}, {
+  inline: true
+});
+
 function AxisLabels() {
   const {
     range,
@@ -32786,12 +32471,17 @@ const ItemExtras = [
 // prettier-ignore
 
 // prettier-ignore
-// While this widget is deprecated, we still need the type for conversion purposes
+
 // prettier-ignore
+
 // prettier-ignore
+
 // prettier-ignore
+
 //prettier-ignore
+
 // A background image applied to various widgets.
+
 const PerseusExpressionAnswerFormConsidered = ["correct", "wrong", "ungraded"];
 
 // 2D range: xMin, xMax, yMin, yMax
@@ -33293,7 +32983,9 @@ const actions = {
     removePoint,
     focusPoint,
     blurPoint,
-    clickPoint
+    clickPoint,
+    closePolygon,
+    openPolygon
   },
   quadratic: {
     movePoint
@@ -33372,6 +33064,18 @@ function changeKeyboardInvitationVisibility(shouldShow) {
     shouldShow
   };
 }
+const CLOSE_POLYGON = "close-polygon";
+function closePolygon() {
+  return {
+    type: CLOSE_POLYGON
+  };
+}
+const OPEN_POLYGON = "open-polygon";
+function openPolygon() {
+  return {
+    type: OPEN_POLYGON
+  };
+}
 const MOVE_ALL = "move-all";
 function moveAll(delta) {
   return {
@@ -34915,33 +34619,17 @@ const LimitedPolygonGraph = props => {
     }
   })));
 };
-
-// TODO(catjohnson): reduce redundancy between LimitedPolygonGraph and UnlimitedPolygonGraph
-// both components are vary similar, however more implementation is needed to be added before
-// it is clear what can and can't be shared between components.
 const UnlimitedPolygonGraph = props => {
-  const [hovered, setHovered] = React__namespace.useState(false);
-  // This is more so required for the re-rendering that occurs when state
-  // updates; specifically with regard to line weighting and polygon focus.
-  const [focusVisible, setFocusVisible] = React__namespace.useState(false);
   const {
     dispatch
   } = props;
   const {
     coords,
-    showAngles,
-    showSides,
-    range,
-    snapStep,
-    snapTo = "grid"
+    closedPolygon
   } = props.graphState;
   const graphConfig = useGraphConfig();
-
-  // TODO(catjohnson): Explore abstracting this code as it is similar to point.tsx
-  // and hopefully we can cut down ont the unlimited graph redundancy.
   const {
     range: [x, y],
-    disableKeyboardInteraction,
     graphDimensionsInPixels
   } = graphConfig;
   const widthPx = graphDimensionsInPixels[0];
@@ -34952,116 +34640,66 @@ const UnlimitedPolygonGraph = props => {
   // TODO(benchristel): can the default set of points be removed here? I don't
   // think coords can be null.
   const points = coords ?? [[0, 0]];
-  const polygonRef = React__namespace.useRef(null);
-  const dragReferencePoint = points[0];
-  const constrain = ["angles", "sides"].includes(snapTo) ? p => p : p => snap(snapStep, p);
-  const {
-    dragging
-  } = useDraggable({
-    gestureTarget: polygonRef,
-    point: dragReferencePoint,
-    onMove: newPoint => {
-      const delta = mafs.vec.sub(newPoint, dragReferencePoint);
-      dispatch(actions.polygon.moveAll(delta));
-    },
-    constrainKeyboardMovement: constrain
-  });
-  const lines = getLines(points);
   React__namespace.useEffect(() => {
     const focusedIndex = props.graphState.focusedPointIndex;
     if (focusedIndex != null) {
       pointRef.current[focusedIndex]?.focus();
     }
   }, [props.graphState.focusedPointIndex, pointRef]);
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("rect", {
-    style: {
-      fill: "rgba(0,0,0,0)",
-      cursor: "crosshair"
-    },
-    width: widthPx,
-    height: heightPx,
-    x: left,
-    y: top,
-    onClick: event => {
-      const elementRect = event.currentTarget.getBoundingClientRect();
-      const x = event.clientX - elementRect.x;
-      const y = event.clientY - elementRect.y;
-      const graphCoordinates = pixelsToVectors([[x, y]], graphConfig);
-      dispatch(actions.polygon.addPoint(graphCoordinates[0]));
-    }
-  }), /*#__PURE__*/React__namespace.createElement(mafs.Polygon, {
-    points: [...points],
-    color: "var(--movable-line-stroke-color)",
-    svgPolygonProps: {
-      strokeWidth: focusVisible ? "var(--movable-line-stroke-weight-active)" : "var(--movable-line-stroke-weight)",
+  if (closedPolygon) {
+    const closedPolygonProps = {
+      ...props,
+      numSides: coords.length
+    };
+    return /*#__PURE__*/React__namespace.createElement(LimitedPolygonGraph, closedPolygonProps);
+  } else {
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("rect", {
       style: {
-        fill: "transparent"
+        fill: "rgba(0,0,0,0)",
+        cursor: "crosshair"
+      },
+      width: widthPx,
+      height: heightPx,
+      x: left,
+      y: top,
+      onClick: event => {
+        const elementRect = event.currentTarget.getBoundingClientRect();
+        const x = event.clientX - elementRect.x;
+        const y = event.clientY - elementRect.y;
+        const graphCoordinates = pixelsToVectors([[x, y]], graphConfig);
+        dispatch(actions.polygon.addPoint(graphCoordinates[0]));
+      }
+    }), /*#__PURE__*/React__namespace.createElement(mafs.Polyline, {
+      points: [...points],
+      color: "var(--movable-line-stroke-color)",
+      svgPolylineProps: {
+        strokeWidth: "var(--movable-line-stroke-weight)",
+        style: {
+          fill: "transparent"
+        }
       }
-    }
-  }), props.graphState.coords.map((point, i) => {
-    const pt1 = points.at(i - 1);
-    const pt2 = points[(i + 1) % points.length];
-    if (!pt1 || !pt2) {
-      return null;
-    }
-    return /*#__PURE__*/React__namespace.createElement(PolygonAngle, {
-      key: "angle-" + i,
-      centerPoint: point,
-      endPoints: [pt1, pt2],
-      range: range,
-      polygonLines: lines,
-      showAngles: !!showAngles,
-      snapTo: snapTo
-    });
-  }), showSides && lines.map((_ref2, i) => {
-    let [start, end] = _ref2;
-    const [x, y] = mafs.vec.midpoint(start, end);
-    const length = parseFloat(mafs.vec.dist(start, end).toFixed(snapTo === "sides" ? 0 : 1));
-    return /*#__PURE__*/React__namespace.createElement(TextLabel, {
-      key: "side-" + i,
-      x: x,
-      y: y
-    }, !Number.isInteger(length) && "≈ ", length);
-  }), /*#__PURE__*/React__namespace.createElement(mafs.Polygon, {
-    points: [...points],
-    color: "transparent",
-    svgPolygonProps: {
-      ref: polygonRef,
-      tabIndex: disableKeyboardInteraction ? -1 : 0,
-      strokeWidth: TARGET_SIZE,
-      style: {
-        cursor: dragging ? "grabbing" : "grab",
-        fill: hovered ? "var(--mafs-blue)" : "transparent"
+    }), props.graphState.coords.map((point, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+      key: i,
+      point: point,
+      sequenceNumber: i + 1,
+      onMove: destination => dispatch(actions.polygon.movePoint(i, destination)),
+      ref: ref => {
+        pointRef.current[i] = ref;
       },
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      // Required to remove line weighting when user clicks away
-      // from the focused polygon
-      onKeyDownCapture: () => {
-        setFocusVisible(hasFocusVisible(polygonRef.current));
+      onFocus: () => {
+        dispatch(actions.polygon.focusPoint(i));
       },
-      // Required for lines to darken on focus
-      onFocus: () => setFocusVisible(hasFocusVisible(polygonRef.current)),
-      // Required for line weighting to update on blur. Without this,
-      // the user has to hover over the shape for it to update
-      onBlur: () => setFocusVisible(hasFocusVisible(polygonRef.current)),
-      className: "movable-polygon"
-    }
-  }), props.graphState.coords.map((point, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
-    key: i,
-    point: point,
-    sequenceNumber: i + 1,
-    onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination)),
-    ref: ref => {
-      pointRef.current[i] = ref;
-    },
-    onFocus: () => {
-      dispatch(actions.pointGraph.focusPoint(i));
-    },
-    onClick: () => {
-      dispatch(actions.pointGraph.clickPoint(i));
-    }
-  })));
+      onClick: () => {
+        // If the point being clicked is the first point and
+        // there's enough points to form a polygon (3 or more)
+        // Close the shape before setting focus.
+        if (i === 0 && props.graphState.coords.length >= 3) {
+          dispatch(actions.polygon.closePolygon());
+        }
+        dispatch(actions.polygon.clickPoint(i));
+      }
+    })));
+  }
 };
 function getLines(points) {
   return points.map((point, i) => {
@@ -35660,23 +35298,47 @@ const renderPointGraphControls = props => {
     }
   }, perseusStrings.removePoint));
 };
-
-/**
- * TODO(catjohnson): The polygon controls will be vastly different from the point controls.
- * Will be keeping this function as is for the time being, even if it's a copy of the point graph
- * controls.
- */
 const renderPolygonGraphControls = props => {
   const {
     interactionMode,
     showRemovePointButton,
-    focusedPointIndex
+    focusedPointIndex,
+    closedPolygon,
+    coords
   } = props.state;
   const {
     perseusStrings
   } = props;
   const shouldShowRemoveButton = showRemovePointButton && focusedPointIndex !== null;
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+
+  // If polygon is closed, show open button.
+  // If polygon is open, show close button.
+  const polygonButton = closedPolygon ? /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+    kind: "secondary",
+    style: {
+      width: "100%",
+      marginLeft: "20px"
+    },
+    tabIndex: 0,
+    onClick: () => {
+      props.dispatch(actions.polygon.openPolygon());
+    }
+  }, perseusStrings.openPolygon) : /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+    kind: "secondary"
+    // Conditional disable when there are less than 3 points in
+    // the graph
+    ,
+    disabled: coords.length < 3,
+    style: {
+      width: "100%",
+      marginLeft: "20px"
+    },
+    tabIndex: 0,
+    onClick: () => {
+      props.dispatch(actions.polygon.closePolygon());
+    }
+  }, perseusStrings.closePolygon);
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
       flexDirection: "row",
       width: props.width
@@ -35686,8 +35348,13 @@ const renderPolygonGraphControls = props => {
     style: {
       width: "100%",
       marginLeft: "20px"
-    },
-    tabIndex: 0,
+    }
+    // Disable button when polygon is closed.
+    ,
+    disabled: closedPolygon
+    // Do not make the button tabbable when it is disabled.
+    ,
+    tabIndex: closedPolygon ? -1 : 0,
     onClick: () => {
       props.dispatch(actions.polygon.addPoint([0, 0]));
     }
@@ -35695,19 +35362,21 @@ const renderPolygonGraphControls = props => {
     id: REMOVE_BUTTON_ID,
     kind: "secondary",
     color: "destructive"
+    // Disable button when polygon is closed.
+    ,
+    disabled: closedPolygon || !shouldShowRemoveButton
     // This button is meant to be interacted with by the mouse only
     // Never allow learners to tab to this button
     ,
     tabIndex: -1,
     style: {
       width: "100%",
-      marginLeft: "20px",
-      visibility: shouldShowRemoveButton ? "visible" : "hidden"
+      marginLeft: "20px"
     },
     onClick: _event => {
       props.dispatch(actions.polygon.removePoint(props.state.focusedPointIndex));
     }
-  }, perseusStrings.removePoint));
+  }, perseusStrings.removePoint), polygonButton));
 };
 const renderGraphControls = props => {
   const {
@@ -35758,14 +35427,17 @@ function handleBlurEvent(_event, state, dispatch) {
 }
 function handleKeyboardEvent(event, state, dispatch) {
   if (isUnlimitedGraphState(state)) {
-    if (event.key === "Backspace") {
+    if (event.key === "Backspace" || event.key === "Delete") {
       // TODO(benchristel): Checking classList here is a hack to prevent
       // points from being deleted if the user presses the backspace key
       // while the whole graph is focused. Instead of doing this, we
       // should move the keyboard event handler to the movable point
       // handle element.
       if (document.activeElement?.classList.contains("movable-point__focusable-handle")) {
-        dispatch(actions.global.deleteIntent());
+        // Only allow delete if type is point or a polygon that is open.
+        if (state.type === "point" || state.type === "polygon" && !state.closedPolygon) {
+          dispatch(actions.global.deleteIntent());
+        }
       }
 
       // After removing a point blur
@@ -36015,7 +35687,8 @@ function initializeGraphState(params) {
         focusedPointIndex: null,
         showRemovePointButton: false,
         interactionMode: "mouse",
-        showKeyboardInteractionInvitation: false
+        showKeyboardInteractionInvitation: false,
+        closedPolygon: false
       };
     case "point":
       return {
@@ -36299,6 +35972,10 @@ function interactiveGraphReducer(state, action) {
       return doDeleteIntent(state);
     case CLICK_POINT:
       return doClickPoint(state, action);
+    case CLOSE_POLYGON:
+      return doClosePolygon(state);
+    case OPEN_POLYGON:
+      return doOpenPolygon(state);
     case CHANGE_INTERACTION_MODE:
       return doChangeInteractionMode(state, action);
     case CHANGE_KEYBOARD_INVITATION_VISIBILITY:
@@ -36355,6 +36032,24 @@ function doClickPoint(state, action) {
   }
   return state;
 }
+function doClosePolygon(state) {
+  if (isUnlimitedGraphState(state) && state.type === "polygon") {
+    return {
+      ...state,
+      closedPolygon: true
+    };
+  }
+  return state;
+}
+function doOpenPolygon(state) {
+  if (isUnlimitedGraphState(state) && state.type === "polygon") {
+    return {
+      ...state,
+      closedPolygon: false
+    };
+  }
+  return state;
+}
 function doChangeInteractionMode(state, action) {
   if (isUnlimitedGraphState(state)) {
     const nextKeyboardInvitation = action.mode === "keyboard" ? false : state.showKeyboardInteractionInvitation;
@@ -36728,14 +36423,15 @@ function doAddPoint(state, action) {
       return state;
     }
   }
+  const newCoords = [...state.coords, snappedPoint];
 
   // If there's no point in spot where we want the new point to go we add it there
   return {
     ...state,
     hasBeenInteractedWith: true,
-    coords: [...state.coords, snappedPoint],
+    coords: newCoords,
     showRemovePointButton: false,
-    focusedPointIndex: state.coords.length
+    focusedPointIndex: newCoords.length - 1
   };
 }
 function doRemovePoint(state, action) {
@@ -39031,6 +38727,8 @@ var InteractiveGraph$1 = {
   displayName: "Interactive graph (Assessments only)",
   widget: InteractiveGraph,
   staticTransform: staticTransform$3,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusInteractiveGraphUserInput'.
   scorer: scoreInteractiveGraph
 };
 
@@ -40040,6 +39738,8 @@ var LabelImage$1 = {
   widget: LabelImageWithDependencies,
   accessible: true,
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusLabelImageUserInput'.
   scorer: scoreLabelImage
 };
 
@@ -40979,6 +40679,8 @@ var Matcher$1 = {
   displayName: "Matcher (two column)",
   widget: Matcher,
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusMatcherUserInput'.
   scorer: scoreMatcher
 };
 
@@ -40995,7 +40697,35 @@ const getPromptJSON$8 = (renderProps, userInput) => {
   };
 };
 
+/**
+ * Checks user input from the matrix widget to see if it is scorable.
+ *
+ * Note: The matrix widget cannot do much validation without the Scoring
+ * Data because of its use of KhanAnswerTypes as a core part of scoring.
+ *
+ * @see `scoreMatrix()` for more details.
+ */
+function validateMatrix(userInput, validationData, strings) {
+  const supplied = userInput.answers;
+  const suppliedSize = getMatrixSize(supplied);
+  for (let row = 0; row < suppliedSize[0]; row++) {
+    for (let col = 0; col < suppliedSize[1]; col++) {
+      if (supplied[row][col] == null || supplied[row][col].toString().length === 0) {
+        return {
+          type: "invalid",
+          message: strings.fillAllCells
+        };
+      }
+    }
+  }
+  return null;
+}
+
 function scoreMatrix(userInput, rubric, strings) {
+  const validationResult = validateMatrix(userInput, rubric, strings);
+  if (validationResult != null) {
+    return validationResult;
+  }
   const solution = rubric.answers;
   const supplied = userInput.answers;
   const solutionSize = getMatrixSize(solution);
@@ -41003,13 +40733,9 @@ function scoreMatrix(userInput, rubric, strings) {
   const incorrectSize = solutionSize[0] !== suppliedSize[0] || solutionSize[1] !== suppliedSize[1];
   const createValidator = KhanAnswerTypes.number.createValidatorFunctional;
   let message = null;
-  let hasEmptyCell = false;
   let incorrect = false;
   ___default["default"](suppliedSize[0]).times(row => {
     ___default["default"](suppliedSize[1]).times(col => {
-      if (supplied[row][col] == null || supplied[row][col].toString().length === 0) {
-        hasEmptyCell = true;
-      }
       if (!incorrectSize) {
         const validator = createValidator(
         // @ts-expect-error - TS2345 - Argument of type 'number' is not assignable to parameter of type 'string'.
@@ -41027,12 +40753,6 @@ function scoreMatrix(userInput, rubric, strings) {
       }
     });
   });
-  if (hasEmptyCell) {
-    return {
-      type: "invalid",
-      message: strings.fillAllCells
-    };
-  }
   if (incorrectSize) {
     return {
       type: "points",
@@ -41460,6 +41180,8 @@ var Matrix$1 = {
   transform: propTransform$1,
   staticTransform: staticTransform$2,
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusMatrixUserInput'.
   scorer: scoreMatrix
 };
 
@@ -43095,6 +42817,8 @@ var NumberLine$1 = {
   widget: NumberLine,
   transform: numberLineTransform,
   staticTransform: staticTransform$1,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusNumberLineUserInput'.
   scorer: scoreNumberLine
 };
 
@@ -43669,6 +43393,8 @@ var Orderer$1 = {
   hidden: true,
   widget: Orderer,
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type UserInput is not assignable to type PerseusOrdererUserInput
   scorer: scoreOrderer
 };
 
@@ -44761,6 +44487,8 @@ var Plotter$1 = {
   hidden: true,
   widget: Plotter,
   staticTransform: staticTransform,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type UserInput is not assignable to type PerseusPlotterUserInput
   scorer: scorePlotter
 };
 
@@ -44944,6 +44672,8 @@ var Sorter$1 = {
   displayName: "Sorter",
   widget: Sorter,
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type UserInput is not assignable to type PerseusSorterUserInput
   scorer: scoreSorter
 };
 
@@ -45236,6 +44966,8 @@ var Table$1 = {
   transform: propTransform,
   hidden: true,
   isLintable: true,
+  // TODO(LEMS-2656): remove TS suppression
+  // @ts-expect-error: Type UserInput is not assignable to type PerseusTableUserInput
   scorer: scoreTable
 };
 
@@ -45421,7 +45153,7 @@ const init = function () {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "42.0.3";
+const libVersion = "43.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -46026,13 +45758,6 @@ class ServerItemRenderer extends React__namespace.Component {
         this.props.onRendered(true);
       }
     }
-    if (this.props.score && this.props.score !== prevProps.score) {
-      const emptyQuestionAreaWidgets = this.questionRenderer.emptyWidgets();
-      this.setState({
-        questionCompleted: this.props.score.correct,
-        questionHighlightedWidgets: emptyQuestionAreaWidgets
-      });
-    }
   }
   componentWillUnmount() {
     if (this.blurTimeoutID != null) {
@@ -46121,7 +45846,7 @@ class ServerItemRenderer extends React__namespace.Component {
 
   /**
    * Accepts a question area widgetId, or an answer area widgetId of
-   * the form "answer-numeric-input 1", or the string "answer-area"
+   * the form "answer-input-number 1", or the string "answer-area"
    * for the whole answer area (if the answer area is a single widget).
    */
   _setWidgetProps(widgetId, newProps, callback) {
@@ -46168,37 +45893,18 @@ class ServerItemRenderer extends React__namespace.Component {
     return this.questionRenderer.getPromptJSON();
   }
 
-  /**
-   * Returns an array of the widget `.getUserInput()` results
-   *
-   * TODO: can we remove this? Seems to be just for backwards
-   * compatibility with old Perseus Chrome logging
-   * @deprecated use getUserInput
-   */
-  getUserInputLegacy() {
-    return this.questionRenderer.getUserInput();
-  }
-
-  /**
-   * Returns an object of the widget `.getUserInput()` results
-   */
-  getUserInput() {
-    return this.questionRenderer.getUserInputMap();
-  }
-
   /**
    * Grades the item.
-   *
-   * @deprecated use scorePerseusItem
    */
   scoreInput() {
-    const guess = this.getUserInput();
-    const score = scorePerseusItem(this.props.item.question, guess, this.context.strings, this.context.locale);
+    const guessAndScore = this.questionRenderer.guessAndScore();
+    const guess = guessAndScore[0];
+    const score = guessAndScore[1];
 
     // Continue to include an empty guess for the now defunct answer area.
     // TODO(alex): Check whether we rely on the format here for
     //             analyzing ProblemLogs. If not, remove this layer.
-    const maxCompatGuess = [this.questionRenderer.getUserInput(), []];
+    const maxCompatGuess = [guess, []];
     const keScore = Util.keScoreFromPerseusScore(score, maxCompatGuess, this.questionRenderer.getSerializedState());
     const emptyQuestionAreaWidgets = this.questionRenderer.emptyWidgets();
     this.setState({
@@ -48060,6 +47766,138 @@ const registerAllWidgetsForTesting = () => {
   replaceDeprecatedWidgets();
 };
 
+// These are all the current widgets that require user-input and are supported for automatic scoring
+const QUESTION_WIDGETS = ["numeric-input", "input-number", "radio", "interactive-graph", "interactive-number-line", "categorizer", "plotter", "orderer", "protractor", "matcher", "sorter"];
+
+/**
+ * Regex for widget placeholders in a string.
+ *
+ * First capture group is the widget ID (ex. 'radio 1')
+ * Second capture group is the widget type (ex. "radio)
+ * exec return will look like: ['[[☃ radio 1]]', 'radio 1', 'radio']
+ */
+function getWidgetRegex() {
+  return /\[\[☃ ([A-Za-z0-9- ]+)\]\]/g;
+}
+
+/**
+ * Add a widget placeholder using the widget ID.
+ * ex. addWidget("radio 1") => "[[☃ radio 1]]"
+ *
+ * @param {string} id
+ * @returns {string}
+ */
+function addWidget(id) {
+  return `[[☃ ${id}]]`;
+}
+
+/**
+ * Get a widget type by a widget's ID
+ * (please don't derive type from ID)
+ *
+ * @param {string} widgetId the ID of the widget
+ * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
+ * @returns {string} the widget type (ie "radio")
+ */
+function getWidgetTypeByWidgetId(WidgetId, widgetMap) {
+  const widget = widgetMap[WidgetId];
+  return widget?.type ?? null;
+}
+
+/**
+ * Does the content have a specific type of widget?
+ *
+ * @param {string} type the type of the widget in question (ie "radio")
+ * @param {string} content the string to search through
+ * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
+ * @returns {boolean} if the content includes the widget type
+ */
+function contentHasWidgetType(type, content, widgetMap) {
+  return getWidgetIdsFromContentByType(type, content, widgetMap).length > 0;
+}
+
+/**
+ * Extract all widget IDs, which includes the widget type and instance number.
+ * example output: ['radio 1', 'categorizer 1', 'categorizor 2']
+ *
+ * Content should contain Perseus widget placeholders,
+ * which look like: '[[☃ radio 1]]'.
+ *
+ * @param {string} content
+ * @returns {ReadonlyArray<string>} widgetIds
+ */
+function getWidgetIdsFromContent(content) {
+  const widgets = [];
+  const localWidgetRegex = getWidgetRegex();
+  let match = localWidgetRegex.exec(content);
+  while (match !== null) {
+    widgets.push(match[1]);
+    match = localWidgetRegex.exec(content);
+  }
+  return widgets;
+}
+
+/**
+ * Get a list of widget IDs from content,
+ * but only for specific widget types
+ *
+ * @param {string} type the type of widget (ie "radio")
+ * @param {string} content the string to parse
+ * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
+ * @returns {ReadonlyArray<string>} the widget type (ie "radio")
+ */
+function getWidgetIdsFromContentByType(type, content, widgetMap) {
+  const rv = [];
+  const widgetIdsInContent = getWidgetIdsFromContent(content);
+  widgetIdsInContent.forEach(widgetId => {
+    const widget = widgetMap[widgetId];
+    if (widget?.type === type) {
+      rv.push(widgetId);
+    }
+  });
+  return rv;
+}
+
+/**
+ * Pull the widget map out of ItemData
+ *
+ * @param {PerseusItem} PerseusItem containing a widgetMap
+ * @returns {WidgetMap} the widget map in the PerseusItem
+ */
+function getWidgetsMapFromItemData(itemData) {
+  return itemData.question.widgets;
+}
+
+/**
+ * Get the widget information from a WidgetMap
+ *
+ * @param {string} widgetId the ID of the widget
+ * @returns {PerseusWidget | null} the widget data if it exists, otherwise null
+ */
+function getWidgetFromWidgetMap(widgetId, widgetMap) {
+  return widgetMap[widgetId] ?? null;
+}
+
+/**
+ * Get select widgets from a widget map.
+ * Useful for multi-items that needs to split
+ * one PerseusItem into several
+ *
+ * @param {ReadonlyArray<string>} widgetIds to extract
+ * @param {PerseusWidgetsMap} widgetMap to extract from
+ * @return {PerseusWidgetsMap} a new widget map with requested widgets
+ */
+function getWidgetsFromWidgetMap(widgetIds, widgetMap) {
+  const widgets = {};
+  widgetIds.forEach(widgetId => {
+    const widget = getWidgetFromWidgetMap(widgetId, widgetMap);
+    if (widget) {
+      widgets[widgetId] = widget;
+    }
+  });
+  return widgets;
+}
+
 /**
  * This function extracts the answers from the widgets.
  *
@@ -50061,8 +49899,6 @@ exports.buildMapper = buildMapper;
 exports.components = components;
 exports.containerSizeClass = containerSizeClass;
 exports.contentHasWidgetType = contentHasWidgetType;
-exports.conversionRequired = conversionRequired;
-exports.convertDeprecatedWidgets = convertDeprecatedWidgets;
 exports.convertWidgetNameToEnum = convertWidgetNameToEnum;
 exports.displaySigFigs = displaySigFigs;
 exports.generateTestCategorizerWidget = generateTestCategorizerWidget;
@@ -50109,12 +49945,12 @@ exports.libVersion = libVersion;
 exports.lockedFigureColors = lockedFigureColors;
 exports.lockedFigureFillStyles = lockedFigureFillStyles;
 exports.makeSafeUrl = makeSafeUrl;
+exports.mathOnlyParser = mathOnlyParser;
 exports.mediaQueries = mediaQueries;
 exports.parsePerseusItem = parsePerseusItem;
 exports.plotterPlotTypes = plotterPlotTypes;
 exports.preprocessTex = preprocessTex;
 exports.registerAllWidgetsForTesting = registerAllWidgetsForTesting;
-exports.scorePerseusItem = scorePerseusItem;
 exports.shapes = shapes;
 exports.shouldHaveIndividualAnswer = shouldHaveIndividualAnswer;
 exports.traverse = traverse;