@doenet/assignment-viewer 0.1.0-alpha-15 → 0.1.0-alpha-16

package/dist/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useMemo, useEffect, useReducer, useCallback, Component } from "react";
+import React, { memo, useState, useMemo, useRef, useReducer, useCallback, useEffect, useSyncExternalStore, Component } from "react";
 import { DoenetViewer } from "@doenet/doenetml-iframe";
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
@@ -1061,7 +1061,7 @@ function generateNewSingleDocAttempt({
   const numVariantsToExclude = numPrevVariants % numVariants;
   const numVariantOptions = numVariants - numVariantsToExclude;
   const variantsToExclude = previousVariants.slice(numPrevVariants - numVariantsToExclude, numPrevVariants).sort((a, b) => a - b);
-  const rngSeed = state.initialVariant.toString() + "|" + state.id.toString() + "|" + state.attemptNumber.toString() + "|" + parentAttempt.toString();
+  const rngSeed = state.initialVariant.toString() + "|" + state.id + "|" + state.attemptNumber.toString() + "|" + parentAttempt.toString();
   const rng = rngClass$3(rngSeed);
   let selectedVariant = Math.floor(rng() * numVariantOptions) + 1;
   for (const excludedVariant of variantsToExclude) {
@@ -1130,7 +1130,7 @@ function initializeSelectState({
   numActivityVariants,
   restrictToVariantSlice
 }) {
-  const rngSeed = variant.toString() + "|" + source.id.toString();
+  const rngSeed = variant.toString() + "|" + source.id;
   const rng = rngClass$2(rngSeed);
   const childStates = [];
   const extendedId = source.id + (restrictToVariantSlice === void 0 ? "" : "|" + restrictToVariantSlice.idx.toString());
@@ -1251,7 +1251,7 @@ function generateNewSelectAttempt({
   if (childOptionsLeft.length !== numLeftInGroup) {
     throw Error("we did something wrong");
   }
-  const rngSeed = state.initialVariant.toString() + "|" + state.id.toString() + "|" + state.attemptNumber.toString() + "|" + parentAttempt.toString();
+  const rngSeed = state.initialVariant.toString() + "|" + state.id + "|" + state.attemptNumber.toString() + "|" + parentAttempt.toString();
   const rng = rngClass$2(rngSeed);
   const childrenChosen = [];
   for (let i = 0; i < Math.min(numToSelect, numLeftInGroup); i++) {
@@ -1341,7 +1341,7 @@ function generateNewSingleDocAttemptForMultiSelect({
   );
   const idxOfAllExcluded = [...otherSelectedIds, ...additionalExcludes].map((id) => childIdToIdx[id]).sort((a, b) => a - b);
   const slotNum = state.selectedChildren.map((a) => a.id).indexOf(childId);
-  const rngSeed = state.initialVariant.toString() + "|" + state.id.toString() + "|" + state.attemptNumber.toString() + "|" + parentAttempt.toString();
+  const rngSeed = state.initialVariant.toString() + "|" + state.id + "|" + state.attemptNumber.toString() + "|" + parentAttempt.toString();
   const rng = rngClass$2(rngSeed);
   let selectedIdx = Math.floor(
     rng() * (numChildren - idxOfAllExcluded.length)
@@ -1487,7 +1487,7 @@ function initializeSequenceState({
   numActivityVariants,
   restrictToVariantSlice
 }) {
-  const rngSeed = variant.toString() + "|" + source.id.toString();
+  const rngSeed = variant.toString() + "|" + source.id;
   const rng = rngClass$1(rngSeed);
   const extendedId = source.id + (restrictToVariantSlice === void 0 ? "" : "|" + restrictToVariantSlice.idx.toString());
   const childStates = source.items.map((activitySource) => {
@@ -1531,7 +1531,7 @@ function generateNewSequenceAttempt({
         ];
       }
     };
-    const rngSeed = state.initialVariant.toString() + "|" + state.id.toString() + "|" + state.attemptNumber.toString() + "|" + parentAttempt.toString();
+    const rngSeed = state.initialVariant.toString() + "|" + state.id + "|" + state.attemptNumber.toString() + "|" + parentAttempt.toString();
     const rng = rngClass$1(rngSeed);
     let startInd = 0;
     while (startInd < state.allChildren.length) {
@@ -2465,6 +2465,20 @@ function isExportedActivityState(obj) {
     ) && typeof typedObj.sourceHash === "string"
   );
 }
+function collectDoenetmlVersions(source) {
+  if (source.type === "singleDoc") {
+    return [source.version];
+  }
+  const versions = [];
+  for (const item of source.items) {
+    for (const version of collectDoenetmlVersions(item)) {
+      if (!versions.includes(version)) {
+        versions.push(version);
+      }
+    }
+  }
+  return versions;
+}
 function initializeActivityState({
   source,
   variant,
@@ -2518,7 +2532,13 @@ function initializeActivityAndDoenetState({
   });
   const numItems = getNumItems(source);
   const itemAttemptNumbers = Array(numItems).fill(1);
-  return { activityState, doenetStates: [], itemAttemptNumbers };
+  return {
+    activityState,
+    doenetStates: [],
+    itemAttemptNumbers,
+    stateVersion: 1,
+    errMsg: null
+  };
 }
 function generateNewActivityAttempt({
   state,
@@ -3015,143 +3035,31 @@ function IconBase(props) {
 function MdError(props) {
   return GenIcon({ "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }, "child": [] }] })(props);
 }
-function SelectActivity({
-  flags,
-  baseId,
-  maxAttemptsAllowed,
-  forceDisable = false,
-  forceShowCorrectness = false,
-  forceShowSolution = false,
-  forceUnsuppressCheckwork = false,
-  doenetViewerUrl,
-  fetchExternalDoenetML,
-  darkMode = "light",
-  showAnswerResponseMenu = false,
-  answerResponseCountsByItem = [],
+const SelectActivity = memo(function SelectActivity2({
   state,
-  doenetStates,
-  loadedStateNum,
-  reportScoreAndStateCallback,
-  checkRender,
-  checkHidden,
-  allowItemAttemptButtons = false,
-  generateNewItemAttempt,
-  hasRenderedCallback,
-  reportVisibility = false,
-  reportVisibilityCallback,
-  itemAttemptNumbers,
-  itemSequence,
-  itemWord
+  ...props
 }) {
   const selectedActivities = [];
-  const selectedIds = [];
   for (const activity of state.selectedChildren) {
     selectedActivities.push(
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Activity,
-        {
-          state: activity,
-          doenetStates,
-          loadedStateNum,
-          flags,
-          baseId,
-          maxAttemptsAllowed,
-          forceDisable,
-          forceShowCorrectness,
-          forceShowSolution,
-          forceUnsuppressCheckwork,
-          doenetViewerUrl,
-          fetchExternalDoenetML,
-          darkMode,
-          showAnswerResponseMenu,
-          answerResponseCountsByItem,
-          reportScoreAndStateCallback,
-          checkRender,
-          checkHidden,
-          allowItemAttemptButtons,
-          generateNewItemAttempt,
-          hasRenderedCallback,
-          reportVisibility,
-          reportVisibilityCallback,
-          itemAttemptNumbers,
-          itemSequence,
-          itemWord
-        },
-        activity.id
-      )
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Activity, { ...props, state: activity }, activity.id)
     );
-    selectedIds.push(activity.id);
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { hidden: !checkRender(state), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: selectedActivities }) }, state.attemptNumber);
-}
-function SequenceActivity({
-  flags,
-  baseId,
-  maxAttemptsAllowed,
-  forceDisable = false,
-  forceShowCorrectness = false,
-  forceShowSolution = false,
-  forceUnsuppressCheckwork = false,
-  doenetViewerUrl,
-  fetchExternalDoenetML,
-  darkMode = "light",
-  showAnswerResponseMenu = false,
-  answerResponseCountsByItem = [],
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: selectedActivities }) }, state.attemptNumber);
+});
+const SequenceActivity = memo(function SequenceActivity2({
   state,
-  doenetStates,
-  loadedStateNum,
-  reportScoreAndStateCallback,
-  checkRender,
-  checkHidden,
-  allowItemAttemptButtons = false,
-  generateNewItemAttempt,
-  hasRenderedCallback,
-  reportVisibility = false,
-  reportVisibilityCallback,
-  itemAttemptNumbers,
-  itemSequence,
-  itemWord
+  ...props
 }) {
   const activityList = [];
   for (const activity of state.orderedChildren) {
     activityList.push(
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Activity,
-        {
-          state: activity,
-          doenetStates,
-          loadedStateNum,
-          flags,
-          baseId,
-          maxAttemptsAllowed,
-          forceDisable,
-          forceShowCorrectness,
-          forceShowSolution,
-          forceUnsuppressCheckwork,
-          doenetViewerUrl,
-          fetchExternalDoenetML,
-          darkMode,
-          showAnswerResponseMenu,
-          answerResponseCountsByItem,
-          reportScoreAndStateCallback,
-          checkRender,
-          checkHidden,
-          allowItemAttemptButtons,
-          generateNewItemAttempt,
-          hasRenderedCallback,
-          reportVisibility,
-          reportVisibilityCallback,
-          itemAttemptNumbers,
-          itemSequence,
-          itemWord
-        },
-        activity.id
-      )
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Activity, { ...props, state: activity }, activity.id)
     );
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { hidden: !checkRender(state), children: activityList }, state.attemptNumber);
-}
-function SingleDocActivity({
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: activityList }, state.attemptNumber);
+});
+const SingleDocActivity = memo(function SingleDocActivity2({
   flags,
   baseId,
   maxAttemptsAllowed,
@@ -3160,80 +3068,66 @@ function SingleDocActivity({
   forceShowSolution = false,
   forceUnsuppressCheckwork = false,
   doenetViewerUrl,
+  doenetImagesUrl,
+  standaloneUrl,
+  cssUrl,
+  doenetmlVersion,
   fetchExternalDoenetML,
   darkMode = "light",
   showAnswerResponseMenu = false,
-  answerResponseCountsByItem = [],
+  answerResponseCounts,
   state,
-  doenetStates,
-  loadedStateNum,
+  doenetState,
+  stateVersion,
+  mountPolicy,
+  useSharedCoreWorker = false,
   reportScoreAndStateCallback,
-  checkRender,
   checkHidden,
+  checkKeepLive,
   allowItemAttemptButtons = false,
   generateNewItemAttempt,
   hasRenderedCallback,
-  reportVisibility = false,
-  reportVisibilityCallback,
-  itemAttemptNumbers,
-  itemSequence,
+  itemAttemptNumber,
   itemWord
 }) {
   const [rendered, setRendered] = useState(false);
   const [attemptNumber, setAttemptNumber] = useState(state.attemptNumber);
-  const [loadedStateNumUsed, setLoadedStateNumUsed] = useState(0);
+  const [stateVersionUsed, setStateVersionUsed] = useState(stateVersion);
   const [initialDoenetState, setInitialDoenetState] = useState(
-    state.doenetStateIdx === null ? null : doenetStates[state.doenetStateIdx] ?? null
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    doenetState ?? null
   );
   const [requestedVariantIndex, setRequestedVariantIndex] = useState(
     state.currentVariant
   );
-  const ref = useRef(null);
-  const itemIdx = useMemo(
-    () => itemSequence.indexOf(state.id),
-    [itemSequence, state.id]
-  );
-  const itemAttemptNumber = itemAttemptNumbers[itemIdx];
-  useEffect(() => {
-    if (reportVisibility && ref.current) {
-      const observer = new IntersectionObserver(
-        ([entry]) => {
-          reportVisibilityCallback(state.id, entry.isIntersecting);
-        },
-        { rootMargin: "1000px 1000px 1000px 1000px" }
-      );
-      observer.observe(ref.current);
-      return () => {
-        observer.disconnect();
-      };
-    }
-  }, [reportVisibility, ref, reportVisibilityCallback, state.id]);
-  if (state.attemptNumber !== attemptNumber || loadedStateNumUsed !== loadedStateNum) {
+  if (state.attemptNumber !== attemptNumber || stateVersionUsed !== stateVersion) {
     setAttemptNumber(state.attemptNumber);
-    setLoadedStateNumUsed(loadedStateNum);
+    setStateVersionUsed(stateVersion);
     setInitialDoenetState(
-      state.doenetStateIdx === null ? null : doenetStates[state.doenetStateIdx] ?? null
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      doenetState ?? null
     );
     setRequestedVariantIndex(state.currentVariant);
   }
-  const initialCounters = {
-    question: state.initialQuestionCounter,
-    problem: state.initialQuestionCounter,
-    exercise: state.initialQuestionCounter
-  };
+  const initialCounters = useMemo(
+    () => ({
+      question: state.initialQuestionCounter,
+      problem: state.initialQuestionCounter,
+      exercise: state.initialQuestionCounter
+    }),
+    [state.initialQuestionCounter]
+  );
   const source = state.source;
   const showAttemptButton = allowItemAttemptButtons && generateNewItemAttempt !== void 0 && !source.isDescription && maxAttemptsAllowed !== 1;
-  const render = checkRender(state);
   const hidden = checkHidden(state);
   const newAttemptsLeft = Math.max(maxAttemptsAllowed - itemAttemptNumber, 0);
   const attemptButtonDisabled = maxAttemptsAllowed > 0 && newAttemptsLeft <= 0;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { hidden: !render || hidden, style: { minHeight: "100px" }, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { hidden, style: { minHeight: "100px" }, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       DoenetViewer,
       {
         doenetML: source.doenetML,
-        doenetmlVersion: source.version,
-        render,
+        doenetmlVersion: doenetmlVersion ?? source.version,
         requestedVariantIndex,
         flags,
         activityId: baseId,
@@ -3243,20 +3137,26 @@ function SingleDocActivity({
         forceShowSolution,
         forceUnsuppressCheckwork,
         doenetViewerUrl,
+        doenetImagesUrl,
+        standaloneUrl,
+        cssUrl,
         fetchExternalDoenetML,
         darkMode,
         showAnswerResponseMenu,
-        answerResponseCounts: answerResponseCountsByItem[itemIdx],
+        answerResponseCounts,
         addVirtualKeyboard: false,
         initialState: initialDoenetState,
         initializeCounters: initialCounters,
+        mountPolicy,
+        keepLive: checkKeepLive(state),
+        useSharedCoreWorker,
         reportScoreAndStateCallback,
         initializedCallback: () => {
           setRendered(true);
           hasRenderedCallback(state.id);
         }
       },
-      state.attemptNumber
+      `${attemptNumber.toString()}-${stateVersionUsed.toString()}`
     ),
     showAttemptButton ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
@@ -3271,7 +3171,8 @@ function SingleDocActivity({
         disabled: attemptButtonDisabled,
         style: {
           marginLeft: "20px",
-          backgroundColor: "rgb(237, 242, 247)",
+          backgroundColor: "var(--buttonSurfaceAlt)",
+          color: "var(--canvasText)",
           opacity: attemptButtonDisabled ? 0.4 : "inherit",
           borderRadius: "10px",
           padding: "5px 20px",
@@ -3287,138 +3188,41 @@ function SingleDocActivity({
         ]
       }
     ) : null
-  ] }) });
-}
-function Activity({
-  flags,
-  baseId,
-  maxAttemptsAllowed,
-  forceDisable = false,
-  forceShowCorrectness = false,
-  forceShowSolution = false,
-  forceUnsuppressCheckwork = false,
-  doenetViewerUrl,
-  fetchExternalDoenetML,
-  darkMode = "light",
-  showAnswerResponseMenu = false,
-  answerResponseCountsByItem = [],
+  ] });
+});
+const Activity = memo(function Activity2({
   state,
-  doenetStates,
-  loadedStateNum,
-  reportScoreAndStateCallback,
-  checkRender,
-  checkHidden,
-  allowItemAttemptButtons = false,
-  generateNewItemAttempt,
-  hasRenderedCallback,
-  reportVisibility = false,
-  reportVisibilityCallback,
-  itemAttemptNumbers,
-  itemSequence,
-  itemWord
+  ...props
 }) {
   switch (state.type) {
     case "singleDoc": {
+      const {
+        doenetStates,
+        itemAttemptNumbers,
+        answerResponseCountsByItem = [],
+        itemIndexById,
+        ...leafProps
+      } = props;
+      const itemIdx = itemIndexById.get(state.id) ?? -1;
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         SingleDocActivity,
         {
-          flags,
-          baseId,
-          maxAttemptsAllowed,
-          forceDisable,
-          forceShowCorrectness,
-          forceShowSolution,
-          forceUnsuppressCheckwork,
-          doenetViewerUrl,
-          fetchExternalDoenetML,
-          darkMode,
-          showAnswerResponseMenu,
-          answerResponseCountsByItem,
+          ...leafProps,
           state,
-          doenetStates,
-          loadedStateNum,
-          reportScoreAndStateCallback,
-          checkRender,
-          checkHidden,
-          allowItemAttemptButtons,
-          generateNewItemAttempt,
-          hasRenderedCallback,
-          reportVisibility,
-          reportVisibilityCallback,
-          itemAttemptNumbers,
-          itemSequence,
-          itemWord
+          doenetState: state.doenetStateIdx === null ? null : doenetStates[state.doenetStateIdx] ?? null,
+          itemAttemptNumber: itemAttemptNumbers[itemIdx],
+          answerResponseCounts: answerResponseCountsByItem[itemIdx]
         }
       );
     }
     case "select": {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        SelectActivity,
-        {
-          flags,
-          baseId,
-          maxAttemptsAllowed,
-          forceDisable,
-          forceShowCorrectness,
-          forceShowSolution,
-          forceUnsuppressCheckwork,
-          doenetViewerUrl,
-          fetchExternalDoenetML,
-          darkMode,
-          showAnswerResponseMenu,
-          answerResponseCountsByItem,
-          state,
-          doenetStates,
-          loadedStateNum,
-          reportScoreAndStateCallback,
-          checkRender,
-          checkHidden,
-          allowItemAttemptButtons,
-          generateNewItemAttempt,
-          hasRenderedCallback,
-          reportVisibility,
-          reportVisibilityCallback,
-          itemAttemptNumbers,
-          itemSequence,
-          itemWord
-        }
-      );
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectActivity, { ...props, state });
     }
     case "sequence": {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        SequenceActivity,
-        {
-          flags,
-          baseId,
-          maxAttemptsAllowed,
-          forceDisable,
-          forceShowCorrectness,
-          forceShowSolution,
-          forceUnsuppressCheckwork,
-          doenetViewerUrl,
-          fetchExternalDoenetML,
-          darkMode,
-          showAnswerResponseMenu,
-          answerResponseCountsByItem,
-          state,
-          doenetStates,
-          loadedStateNum,
-          reportScoreAndStateCallback,
-          checkRender,
-          checkHidden,
-          allowItemAttemptButtons,
-          generateNewItemAttempt,
-          hasRenderedCallback,
-          reportVisibility,
-          reportVisibilityCallback,
-          itemAttemptNumbers,
-          itemSequence,
-          itemWord
-        }
-      );
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(SequenceActivity, { ...props, state });
     }
   }
-}
+});
 function activityDoenetStateReducer(state, action) {
   const activityState = state.activityState;
   switch (action.type) {
@@ -3432,7 +3236,9 @@ function activityDoenetStateReducer(state, action) {
           numActivityVariants: action.numActivityVariants
         }),
         doenetStates: [],
-        itemAttemptNumbers: Array(numItems).fill(1)
+        itemAttemptNumbers: Array(numItems).fill(1),
+        stateVersion: state.stateVersion + 1,
+        errMsg: null
       };
     }
     case "set": {
@@ -3449,15 +3255,25 @@ function activityDoenetStateReducer(state, action) {
         };
         window.postMessage(message);
       }
-      return action.state;
+      return {
+        ...action.state,
+        stateVersion: state.stateVersion + 1,
+        errMsg: null
+      };
     }
     case "generateNewActivityAttempt": {
-      const { state: newActivityState } = generateNewActivityAttempt({
-        state: activityState,
-        numActivityVariants: action.numActivityVariants,
-        initialQuestionCounter: action.initialQuestionCounter,
-        parentAttempt: 1
-      });
+      let newActivityState;
+      try {
+        ({ state: newActivityState } = generateNewActivityAttempt({
+          state: activityState,
+          numActivityVariants: action.numActivityVariants,
+          initialQuestionCounter: action.initialQuestionCounter,
+          parentAttempt: 1
+        }));
+      } catch (e) {
+        const message = e instanceof Error ? e.message : "";
+        return { ...state, errMsg: `Error in activity: ${message}` };
+      }
       const newItemAttemptNumbers = state.itemAttemptNumbers.map(() => 1);
       if (action.allowSaveState && !action.initialAttempt) {
         const itemScores = extractActivityItemCredit(newActivityState);
@@ -3480,7 +3296,9 @@ function activityDoenetStateReducer(state, action) {
       return {
         activityState: newActivityState,
         doenetStates: [],
-        itemAttemptNumbers: newItemAttemptNumbers
+        itemAttemptNumbers: newItemAttemptNumbers,
+        stateVersion: state.stateVersion + 1,
+        errMsg: null
       };
     }
     case "generateSingleDocSubActivityAttempt": {
@@ -3489,17 +3307,25 @@ function activityDoenetStateReducer(state, action) {
           "Should not call generateSingleDocSubActivityAttempt on entire activity"
         );
       }
-      const newActivityState = generateNewSingleDocSubAttempt({
-        singleDocId: action.docId,
-        state: activityState,
-        numActivityVariants: action.numActivityVariants,
-        initialQuestionCounter: action.initialQuestionCounter
-      });
+      const doenetStateIdx = getItemSequence(activityState).indexOf(
+        action.docId
+      );
+      let newActivityState;
+      try {
+        newActivityState = generateNewSingleDocSubAttempt({
+          singleDocId: action.docId,
+          state: activityState,
+          numActivityVariants: action.numActivityVariants,
+          initialQuestionCounter: action.initialQuestionCounter
+        });
+      } catch (e) {
+        const message = e instanceof Error ? e.message : "";
+        return { ...state, errMsg: `Error in activity: ${message}` };
+      }
       const newDoenetMLStates = [...state.doenetStates];
-      newDoenetMLStates[action.doenetStateIdx] = null;
-      const itemIdx = action.itemSequence.indexOf(action.docId);
+      newDoenetMLStates[doenetStateIdx] = null;
       const newItemAttemptNumbers = [...state.itemAttemptNumbers];
-      newItemAttemptNumbers[itemIdx]++;
+      newItemAttemptNumbers[doenetStateIdx]++;
       if (action.allowSaveState) {
         const itemScores = extractActivityItemCredit(newActivityState);
         const itemScoresOld = extractActivityItemCredit(activityState);
@@ -3515,7 +3341,7 @@ function activityDoenetStateReducer(state, action) {
           },
           score: newActivityState.creditAchieved,
           item_scores: itemScores,
-          new_doenet_state_idx: action.doenetStateIdx,
+          new_doenet_state_idx: doenetStateIdx,
           subject: "SPLICE.reportScoreAndState",
           activity_id: action.baseId,
           message_id: nanoid(),
@@ -3527,15 +3353,28 @@ function activityDoenetStateReducer(state, action) {
       return {
         activityState: newActivityState,
         doenetStates: newDoenetMLStates,
-        itemAttemptNumbers: newItemAttemptNumbers
+        itemAttemptNumbers: newItemAttemptNumbers,
+        // Not a stateVersion bump: the remount is driven by the
+        // item's own attemptNumber.
+        stateVersion: state.stateVersion,
+        errMsg: null
       };
     }
     case "updateSingleState": {
-      const newActivityDoenetState = updateSingleDocState(action, state);
+      const doenetStateIdx = getItemSequence(activityState).indexOf(
+        action.docId
+      );
+      if (doenetStateIdx === -1) {
+        return state;
+      }
+      const newActivityDoenetState = updateSingleDocState(
+        action,
+        doenetStateIdx,
+        state
+      );
       if (action.allowSaveState) {
         const newActivityState = newActivityDoenetState.activityState;
         const itemScores = extractActivityItemCredit(newActivityState);
-        const itemUpdated = action.itemSequence.indexOf(action.docId) + 1;
         const message = {
           state: {
             activityState: pruneActivityStateForSave(newActivityState),
@@ -3545,8 +3384,8 @@ function activityDoenetStateReducer(state, action) {
           },
           score: newActivityState.creditAchieved,
           item_scores: itemScores,
-          item_updated: itemUpdated,
-          new_doenet_state_idx: action.doenetStateIdx,
+          item_updated: doenetStateIdx + 1,
+          new_doenet_state_idx: doenetStateIdx,
           subject: "SPLICE.reportScoreAndState",
           activity_id: action.baseId,
           message_id: nanoid()
@@ -3558,7 +3397,7 @@ function activityDoenetStateReducer(state, action) {
   }
   throw Error("Invalid activity action");
 }
-function updateSingleDocState(action, activityDoenetState) {
+function updateSingleDocState(action, doenetStateIdx, activityDoenetState) {
   const allStates = gatherStates(activityDoenetState.activityState);
   const newSingleDocState = allStates[action.docId] = {
     ...allStates[action.docId]
@@ -3570,8 +3409,8 @@ function updateSingleDocState(action, activityDoenetState) {
   }
   newSingleDocState.creditAchieved = action.creditAchieved;
   const doenetStates = [...activityDoenetState.doenetStates];
-  doenetStates[action.doenetStateIdx] = action.doenetState;
-  newSingleDocState.doenetStateIdx = action.doenetStateIdx;
+  doenetStates[doenetStateIdx] = action.doenetState;
+  newSingleDocState.doenetStateIdx = doenetStateIdx;
   const rootActivityState = propagateStateChangeToRoot({
     allStates,
     id: newSingleDocState.id
@@ -3579,9 +3418,19 @@ function updateSingleDocState(action, activityDoenetState) {
   return {
     activityState: rootActivityState,
     doenetStates,
-    itemAttemptNumbers: activityDoenetState.itemAttemptNumbers
+    itemAttemptNumbers: activityDoenetState.itemAttemptNumbers,
+    stateVersion: activityDoenetState.stateVersion,
+    errMsg: null
   };
 }
+function useContentStable(value, key) {
+  const [stable, setStable] = useState({ value, key });
+  if (stable.key !== key) {
+    setStable({ value, key });
+    return value;
+  }
+  return stable.value;
+}
 function Viewer({
   source,
   flags,
@@ -3600,29 +3449,39 @@ function Viewer({
   addVirtualKeyboard: _addVirtualKeyboard = true,
   externalVirtualKeyboardProvided: _externalVirtualKeyboardProvided = false,
   doenetViewerUrl,
+  doenetImagesUrl,
+  standaloneUrl,
+  cssUrl,
+  doenetmlVersion,
   fetchExternalDoenetML,
   darkMode = "light",
   showAnswerResponseMenu = false,
   answerResponseCountsByItem = [],
   showTitle = true,
-  itemWord = "item"
+  itemWord = "item",
+  mountPolicy,
+  useSharedCoreWorker = false
 }) {
-  const [errMsg, setErrMsg] = useState(null);
   const initialPass = useRef(true);
-  const { numActivityVariants, sourceHash, numItems } = useMemo(() => {
+  const { numActivityVariants, sourceHash, numItems, sourceErrMsg } = useMemo(() => {
     try {
       validateIds(source);
       const docStructure = gatherDocumentStructure(source);
       const sourceHash2 = createSourceHash(source);
       const numItems2 = getNumItems(source);
-      return { ...docStructure, sourceHash: sourceHash2, numItems: numItems2 };
+      return {
+        ...docStructure,
+        sourceHash: sourceHash2,
+        numItems: numItems2,
+        sourceErrMsg: null
+      };
     } catch (e) {
       const message = e instanceof Error ? e.message : "";
-      setErrMsg(`Error in activity source: ${message}`);
       return {
         numActivityVariants: {},
         sourceHash: "",
-        numItems: 0
+        numItems: 0,
+        sourceErrMsg: `Error in activity source: ${message}`
       };
     }
   }, [source]);
@@ -3636,39 +3495,37 @@ function Viewer({
     },
     initializeActivityAndDoenetState
   );
-  const [loadedStateNum, setLoadedStateNum] = useState(0);
   const activityState = activityDoenetState.activityState;
-  const itemSequence = getItemSequence(activityState);
+  const stateVersion = activityDoenetState.stateVersion;
+  const runtimeErrMsg = activityDoenetState.errMsg;
+  const computedItemSequence = useMemo(
+    () => getItemSequence(activityState),
+    [activityState]
+  );
+  const itemSequence = useContentStable(
+    computedItemSequence,
+    JSON.stringify(computedItemSequence)
+  );
+  const itemIndexById = useMemo(
+    () => new Map(itemSequence.map((id, idx) => [id, idx])),
+    [itemSequence]
+  );
   const [currentItemIdx, setCurrentItemIdx] = useState(0);
   const currentItemId = itemSequence[currentItemIdx];
   const [itemsRendered, setItemsRendered] = useState([]);
-  const [itemsToRender, setItemsToRender] = useState([]);
-  const [itemsVisible, setItemsVisible] = useState([]);
   const [newAttemptNum, setNewAttemptNum] = useState(0);
   const dialogRef = useRef(null);
   const newItemAttemptInfo = useRef({ id: "", initialQuestionCounter: 0 });
   const attemptNumber = activityState.attemptNumber;
-  function addItemToRender(id) {
-    if (!itemsToRender.includes(id)) {
-      setItemsToRender((was) => {
-        if (was.includes(id)) {
-          return was;
-        }
-        const obj = [...was];
-        obj.push(id);
-        return obj;
-      });
-    }
-  }
-  const checkRender = useCallback(
+  const checkKeepLive = useCallback(
     (state) => {
-      if (state.type === "singleDoc") {
-        return itemsToRender.includes(state.id);
-      } else {
-        return true;
+      if (!paginate || state.type !== "singleDoc") {
+        return false;
       }
+      const itemIdx = itemIndexById.get(state.id);
+      return itemIdx !== void 0 && Math.abs(itemIdx - currentItemIdx) <= 1;
     },
-    [itemsToRender]
+    [paginate, itemIndexById, currentItemIdx]
   );
   const checkHidden = useCallback(
     (state) => {
@@ -3683,7 +3540,7 @@ function Viewer({
   useEffect(() => {
     if (initialPass.current) {
       initialPass.current = false;
-    } else {
+    } else if (sourceErrMsg === null) {
       activityDoenetStateDispatch({
         type: "initialize",
         source,
@@ -3691,8 +3548,17 @@ function Viewer({
         numActivityVariants
       });
     }
-  }, [activityId, source, initialVariantIndex, numActivityVariants]);
+  }, [
+    activityId,
+    source,
+    initialVariantIndex,
+    numActivityVariants,
+    sourceErrMsg
+  ]);
   useEffect(() => {
+    if (sourceErrMsg !== null) {
+      return;
+    }
     const listenersAdded = [];
     function requestLoadState() {
       const message_id = nanoid();
@@ -3724,7 +3590,6 @@ function Viewer({
                 allowSaveState: flags.allowSaveState,
                 baseId: activityId
               });
-              setLoadedStateNum((was) => was + 1);
             }
           }
           window.removeEventListener("message", loadStateListener);
@@ -3733,21 +3598,15 @@ function Viewer({
       window.addEventListener("message", loadStateListener);
       listenersAdded.push(loadStateListener);
     }
-    try {
-      activityDoenetStateDispatch({
-        type: "generateNewActivityAttempt",
-        numActivityVariants,
-        initialQuestionCounter: 1,
-        allowSaveState: flags.allowSaveState,
-        baseId: activityId,
-        sourceHash,
-        initialAttempt: true
-      });
-      setLoadedStateNum((was) => was + 1);
-    } catch (e) {
-      const message = e instanceof Error ? e.message : "";
-      setErrMsg(`Error in activity: ${message}`);
-    }
+    activityDoenetStateDispatch({
+      type: "generateNewActivityAttempt",
+      numActivityVariants,
+      initialQuestionCounter: 1,
+      allowSaveState: flags.allowSaveState,
+      baseId: activityId,
+      sourceHash,
+      initialAttempt: true
+    });
     if (flags.allowLoadState) {
       requestLoadState();
     }
@@ -3763,7 +3622,8 @@ function Viewer({
     userId,
     source,
     numActivityVariants,
-    sourceHash
+    sourceHash,
+    sourceErrMsg
   ]);
   function clickNext() {
     setCurrentItemIdx((was) => Math.min(numItems - 1, was + 1));
@@ -3771,33 +3631,35 @@ function Viewer({
   function clickPrevious() {
     setCurrentItemIdx((was) => Math.max(0, was - 1));
   }
-  function reportScoreAndStateCallback(msg) {
-    if (isSingleDocReportStateMessage(msg)) {
-      activityDoenetStateDispatch({
-        type: "updateSingleState",
-        docId: msg.docId,
-        doenetState: msg.state,
-        doenetStateIdx: itemSequence.indexOf(msg.docId),
-        itemSequence,
-        creditAchieved: msg.score,
-        allowSaveState: flags.allowSaveState,
-        baseId: activityId,
-        sourceHash
-      });
-    }
-  }
-  function generateNewItemAttemptPrompt(id, initialQuestionCounter) {
-    newItemAttemptInfo.current = { id, initialQuestionCounter };
-    setNewAttemptNum((itemSequence.indexOf(id) ?? 0) + 1);
-    dialogRef.current?.showModal();
-  }
+  const reportScoreAndStateCallback = useCallback(
+    (msg) => {
+      if (isSingleDocReportStateMessage(msg)) {
+        activityDoenetStateDispatch({
+          type: "updateSingleState",
+          docId: msg.docId,
+          doenetState: msg.state,
+          creditAchieved: msg.score,
+          allowSaveState: flags.allowSaveState,
+          baseId: activityId,
+          sourceHash
+        });
+      }
+    },
+    [flags.allowSaveState, activityId, sourceHash]
+  );
+  const generateNewItemAttemptPrompt = useCallback(
+    (id, initialQuestionCounter) => {
+      newItemAttemptInfo.current = { id, initialQuestionCounter };
+      setNewAttemptNum((itemIndexById.get(id) ?? 0) + 1);
+      dialogRef.current?.showModal();
+    },
+    [itemIndexById]
+  );
   function generateNewItemAttempt() {
     const { id, initialQuestionCounter } = newItemAttemptInfo.current;
     activityDoenetStateDispatch({
       type: "generateSingleDocSubActivityAttempt",
       docId: id,
-      doenetStateIdx: itemSequence.indexOf(id),
-      itemSequence,
       numActivityVariants,
       initialQuestionCounter,
       allowSaveState: flags.allowSaveState,
@@ -3814,52 +3676,12 @@ function Viewer({
         return arr;
       }
     });
-    setItemsToRender((was) => {
-      const idx = was.indexOf(id);
-      if (idx === -1) {
-        return was;
-      } else {
-        const arr = [...was];
-        arr.splice(idx, 1);
-        return arr;
-      }
-    });
-  }
-  function hasRenderedCallback(id) {
-    setItemsRendered((was) => {
-      if (was.includes(id)) {
-        return was;
-      }
-      const obj = [...was];
-      obj.push(id);
-      return obj;
-    });
-  }
-  function reportVisibilityCallback(id, isVisible) {
-    setItemsVisible((was) => {
-      if (isVisible) {
-        if (was.includes(id)) {
-          return was;
-        } else {
-          const obj = [...was];
-          obj.push(id);
-          return obj;
-        }
-      } else {
-        const idx = was.indexOf(id);
-        if (idx === -1) {
-          return was;
-        } else {
-          const obj = [...was];
-          obj.splice(idx, 1);
-          return obj;
-        }
-      }
-    });
   }
+  const hasRenderedCallback = useCallback((id) => {
+    setItemsRendered((was) => was.includes(id) ? was : [...was, id]);
+  }, []);
   function generateActivityAttempt() {
     setItemsRendered([]);
-    setItemsToRender([]);
     setCurrentItemIdx(0);
     activityDoenetStateDispatch({
       type: "generateNewActivityAttempt",
@@ -3870,8 +3692,8 @@ function Viewer({
       sourceHash
     });
   }
-  if (errMsg !== null) {
-    const errorIcon = /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "1em", color: "#C1292E" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MdError, {}) });
+  const errorIcon = /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "1em", color: "#C1292E" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MdError, {}) });
+  if (sourceErrMsg !== null) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
@@ -3883,33 +3705,11 @@ function Viewer({
         children: [
           errorIcon,
           " ",
-          errMsg
+          sourceErrMsg
         ]
       }
     );
   }
-  if (paginate) {
-    if (!itemsRendered.includes(currentItemId)) {
-      addItemToRender(currentItemId);
-    } else {
-      const nextItemId = itemSequence[currentItemIdx + 1];
-      if (currentItemIdx < numItems - 1 && !itemsRendered.includes(nextItemId)) {
-        addItemToRender(nextItemId);
-      } else {
-        const prevItemId = itemSequence[currentItemIdx - 1];
-        if (currentItemIdx > 0 && !itemsRendered.includes(prevItemId)) {
-          addItemToRender(prevItemId);
-        }
-      }
-    }
-  } else {
-    for (const id of itemSequence) {
-      if (!itemsRendered.includes(id) && itemsVisible.includes(id)) {
-        addItemToRender(id);
-        break;
-      }
-    }
-  }
   const activityAttemptsLeft = Math.max(
     maxAttemptsAllowed - attemptNumber,
     0
@@ -3950,7 +3750,8 @@ function Viewer({
             },
             style: {
               marginLeft: "30px",
-              backgroundColor: "lightgray",
+              backgroundColor: "var(--buttonSurface)",
+              color: "var(--canvasText)",
               borderRadius: "10px",
               padding: "5px 20px"
             },
@@ -3971,7 +3772,8 @@ function Viewer({
             },
             style: {
               marginLeft: "30px",
-              backgroundColor: "lightgray",
+              backgroundColor: "var(--buttonSurface)",
+              color: "var(--canvasText)",
               borderRadius: "10px",
               padding: "5px 20px"
             },
@@ -3991,7 +3793,8 @@ function Viewer({
             style: {
               marginLeft: "20px",
               marginRight: "10px",
-              backgroundColor: "lightgray",
+              backgroundColor: "var(--buttonSurface)",
+              color: "var(--canvasText)",
               borderRadius: "10px",
               padding: "5px 20px"
             },
@@ -4009,7 +3812,8 @@ function Viewer({
             onClick: clickNext,
             style: {
               marginLeft: "10px",
-              backgroundColor: "lightgray",
+              backgroundColor: "var(--buttonSurface)",
+              color: "var(--canvasText)",
               borderRadius: "10px",
               padding: "5px 20px"
             },
@@ -4028,7 +3832,8 @@ function Viewer({
           disabled: newAttemptDisabled,
           style: {
             marginLeft: "30px",
-            backgroundColor: "rgb(237, 242, 247)",
+            backgroundColor: "var(--buttonSurfaceAlt)",
+            color: "var(--canvasText)",
             opacity: newAttemptDisabled ? 0.4 : "inherit",
             borderRadius: "10px",
             padding: "5px 20px",
@@ -4042,6 +3847,22 @@ function Viewer({
         }
       ) : null
     ] }) }),
+    runtimeErrMsg !== null ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        style: {
+          fontSize: "1.3em",
+          marginLeft: "20px",
+          marginTop: "20px"
+        },
+        "data-test": "Activity Error",
+        children: [
+          errorIcon,
+          " ",
+          runtimeErrMsg
+        ]
+      }
+    ) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
@@ -4061,28 +3882,66 @@ function Viewer({
         forceShowSolution,
         forceUnsuppressCheckwork,
         doenetViewerUrl,
+        doenetImagesUrl,
+        standaloneUrl,
+        cssUrl,
+        doenetmlVersion,
         fetchExternalDoenetML,
         darkMode,
         showAnswerResponseMenu,
         answerResponseCountsByItem,
         state: activityState,
         doenetStates: activityDoenetState.doenetStates,
-        loadedStateNum,
+        stateVersion,
+        mountPolicy,
+        useSharedCoreWorker,
         reportScoreAndStateCallback,
-        checkRender,
         checkHidden,
+        checkKeepLive,
         allowItemAttemptButtons: itemLevelAttempts,
         generateNewItemAttempt: generateNewItemAttemptPrompt,
         hasRenderedCallback,
-        reportVisibility: !paginate,
-        reportVisibilityCallback,
         itemAttemptNumbers: activityDoenetState.itemAttemptNumbers,
-        itemSequence,
+        itemIndexById,
         itemWord
       }
     )
   ] });
 }
+const DEFAULT_THEME = "light";
+const noop = () => {
+};
+function canMatchMedia() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function";
+}
+function getSystemTheme() {
+  if (!canMatchMedia()) {
+    return DEFAULT_THEME;
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function subscribeToSystemTheme(onChange) {
+  if (!canMatchMedia()) {
+    return noop;
+  }
+  const mq = window.matchMedia("(prefers-color-scheme: dark)");
+  mq.addEventListener("change", onChange);
+  return () => {
+    mq.removeEventListener("change", onChange);
+  };
+}
+function subscribeToPinnedTheme() {
+  return noop;
+}
+function useResolvedTheme(setting) {
+  const isSystem = setting === "system";
+  const getPinnedSnapshot = () => setting;
+  return useSyncExternalStore(
+    isSystem ? subscribeToSystemTheme : subscribeToPinnedTheme,
+    isSystem ? getSystemTheme : getPinnedSnapshot,
+    isSystem ? () => DEFAULT_THEME : getPinnedSnapshot
+  );
+}
 const defaultFlags = {
   showCorrectness: true,
   readOnly: false,
@@ -4097,9 +3956,10 @@ const defaultFlags = {
   autoSubmit: false
 };
 const rngClass = seedrandom.alea;
+const NO_FLAGS = {};
 function ActivityViewer({
   source,
-  flags: specifiedFlags = {},
+  flags: specifiedFlags = NO_FLAGS,
   activityId = "a",
   userId = null,
   requestedVariantIndex,
@@ -4115,31 +3975,73 @@ function ActivityViewer({
   addVirtualKeyboard = true,
   externalVirtualKeyboardProvided = false,
   doenetViewerUrl,
+  doenetImagesUrl,
+  standaloneUrl,
+  cssUrl,
+  doenetmlVersion,
   fetchExternalDoenetML,
-  darkMode = "light",
+  darkMode = "system",
   showAnswerResponseMenu = false,
   answerResponseCountsByItem = [],
   includeVariantSelector: _includeVariantSelector = false,
   showTitle = true,
-  itemWord = "item"
+  itemWord = "item",
+  reportWarningsCallback,
+  mountPolicy,
+  useSharedCoreWorker = false
 }) {
   const [initialVariantIndex, setInitialVariantIndex] = useState(null);
-  const thisPropSet = {
-    source: JSON.stringify(source),
-    activityId,
-    requestedVariantIndex
-  };
-  const lastPropSet = useRef({ source: "" });
-  const flags = { ...defaultFlags, ...specifiedFlags };
-  let foundPropChange = false;
-  let key;
-  for (key in thisPropSet) {
-    if (thisPropSet[key] !== lastPropSet.current[key]) {
-      foundPropChange = true;
+  const resolvedTheme = useResolvedTheme(darkMode);
+  const warnings = useMemo(() => {
+    let versions;
+    try {
+      versions = collectDoenetmlVersions(source);
+    } catch {
+      return [];
     }
-  }
-  lastPropSet.current = thisPropSet;
-  if (foundPropChange) {
+    if (versions.length > 1) {
+      return [{ type: "mixedDoenetmlVersions", versions }];
+    }
+    return [];
+  }, [source]);
+  const reportWarningsCallbackRef = useRef(reportWarningsCallback);
+  useEffect(() => {
+    reportWarningsCallbackRef.current = reportWarningsCallback;
+  });
+  const lastReportedWarningsKey = useRef(null);
+  useEffect(() => {
+    const warningsKey = JSON.stringify(warnings);
+    if (warningsKey === lastReportedWarningsKey.current) {
+      return;
+    }
+    lastReportedWarningsKey.current = warningsKey;
+    if (warnings.length === 0) {
+      return;
+    }
+    for (const warning of warnings) {
+      console.warn(
+        `ActivityViewer: this assignment mixes DoenetML versions (${warning.versions.join(
+          ", "
+        )}). Each distinct version loads its own multi-MB standalone bundle; normalize the documents' \`version\` fields to avoid the multiplied download/parse cost (saved state survives, as its hash ignores \`version\`).`
+      );
+    }
+    reportWarningsCallbackRef.current?.(warnings);
+  }, [warnings]);
+  const propSetKey = useMemo(
+    () => JSON.stringify([source, activityId, requestedVariantIndex]),
+    [source, activityId, requestedVariantIndex]
+  );
+  const [lastPropSetKey, setLastPropSetKey] = useState(null);
+  const flags = useMemo(
+    () => ({ ...defaultFlags, ...specifiedFlags }),
+    [specifiedFlags]
+  );
+  const resolvedMountPolicy = useContentStable(
+    useMemo(() => ({ mode: "windowed", ...mountPolicy }), [mountPolicy]),
+    JSON.stringify(mountPolicy ?? {})
+  );
+  if (propSetKey !== lastPropSetKey) {
+    setLastPropSetKey(propSetKey);
     if (requestedVariantIndex === void 0) {
       const rng = rngClass((/* @__PURE__ */ new Date()).toString());
       setInitialVariantIndex(Math.floor(rng() * 1e6) + 1);
@@ -4152,7 +4054,7 @@ function ActivityViewer({
   if (initialVariantIndex === null) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "assignment-viewer-root", "data-theme": resolvedTheme, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     Viewer,
     {
       source,
@@ -4172,14 +4074,20 @@ function ActivityViewer({
       addVirtualKeyboard,
       externalVirtualKeyboardProvided,
       doenetViewerUrl,
+      doenetImagesUrl,
+      standaloneUrl,
+      cssUrl,
+      doenetmlVersion,
       fetchExternalDoenetML,
-      darkMode,
+      darkMode: resolvedTheme,
       showAnswerResponseMenu,
       answerResponseCountsByItem,
       showTitle,
-      itemWord
+      itemWord,
+      mountPolicy: resolvedMountPolicy,
+      useSharedCoreWorker
     }
-  ) });
+  ) }) });
 }
 class ErrorBoundary extends Component {
   constructor(props) {