Windowed mounting by default: memory tracks the visible window, not assignment length

.gitignore

@@ -22,3 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Cypress run artifacts
+cypress/screenshots/
+cypress/videos/

README.md

@@ -34,3 +34,37 @@ and the page decides how to display it:
 To consolidate, normalize the documents' `version` fields in the assignment
 source. Saved student state survives such a change: it is keyed on a source
 hash that deliberately ignores `version`.
+
+## Windowed mounting
+
+Every item's viewer component is always mounted, but memory tracks what the
+student can see — the pagination window or viewport — instead of the
+assignment's length. The embedded viewers register with a page-wide
+_windowed mounting_ policy (`mountPolicy` from `@doenet/doenetml-iframe`):
+items only boot their iframe (a multi-MB bundle parse plus a core worker)
+when near the viewport or within the pagination window, simultaneous boots
+are capped, and at most `maxLiveViewers` stay live — the rest are **parked**:
+their state is flushed, their iframe is replaced by a placeholder, and they
+are restored (student's typed work intact) when the student returns to them.
+In paginated mode the current page and its neighbors are kept live, so page
+flips within the window stay instant.
+
+This is the default. Tune it with the `mountPolicy` prop (overrides for
+`maxLiveViewers`, `visibleMargin`, `parkDelayMs`, `flushTimeoutMs`,
+`maxConcurrentBoots`):
+
+```tsx
+<ActivityViewer
+    source={source}
+    flags={{ allowSaveState: true }}
+    mountPolicy={{ maxLiveViewers: 5 }}
+/>
+```
+
+Parking requires a persistence path (`flags.allowSaveState` or
+`flags.allowLocalState`) so no student work can be lost; without one,
+viewers still mount lazily but stay live once booted.
+
+To cut the per-document core cost further, `useSharedCoreWorker` serves all
+documents' cores from a shared worker pool instead of one dedicated ~100 MB
+worker per document (default off; see `@doenet/doenetml-iframe`).

package.json

@@ -38,7 +38,7 @@
         "prettier:check": "prettier --check ."
     },
     "peerDependencies": {
-        "@doenet/doenetml-iframe": "^0.7.20-dev.326",
+        "@doenet/doenetml-iframe": "^0.7.20-dev.332",
         "react": "^19.2.3",
         "react-dom": "^19.2.3"
     },
@@ -49,6 +49,7 @@
         "seedrandom": "^3.0.5"
     },
     "devDependencies": {
+        "@doenet/doenetml-iframe": "0.7.20-dev.332",
         "@eslint/js": "^9.39.1",
         "@types/object-hash": "^3.0.6",
         "@types/react": "^19.2.7",

src/Activity/Activity.tsx

@@ -1,4 +1,5 @@
 import { memo } from "react";
+import type { MountPolicy } from "@doenet/doenetml-iframe";
 import { DoenetMLFlags } from "../types";
 import { ActivityState } from "./activityState";
 import { SelectActivity } from "./SelectActivity";
@@ -13,24 +14,36 @@ export type ActivityCommonProps = {
     forceShowCorrectness?: boolean;
     forceShowSolution?: boolean;
     forceUnsuppressCheckwork?: boolean;
+    /** URL the `<ref>` renderer uses to link to other Doenet activities. */
     doenetViewerUrl?: string;
+    /** URL used to resolve `<image source="doenet:…">` media references. */
+    doenetMediaUrl?: string;
+    standaloneUrl?: string;
+    cssUrl?: string;
+    doenetmlVersion?: string;
     fetchExternalDoenetML?: (arg: string) => Promise<string>;
     darkMode?: "dark" | "light";
     showAnswerResponseMenu?: boolean;
     answerResponseCountsByItem?: Record<string, number>[];
     doenetStates: unknown[];
     stateVersion: number;
+    /** The windowed mounting policy every item's viewer registers with. */
+    mountPolicy: MountPolicy;
+    useSharedCoreWorker?: boolean;
     reportScoreAndStateCallback: (args: unknown) => void;
-    checkRender: (state: ActivityState) => boolean;
     checkHidden: (state: ActivityState) => boolean;
+    /**
+     * Whether an item's viewer should stay booted even while hidden or
+     * off-screen (the paginator marks the current page and its neighbors
+     * so page flips are instant).
+     */
+    checkKeepLive: (state: ActivityState) => boolean;
     allowItemAttemptButtons?: boolean;
     generateNewItemAttempt?: (
         id: string,
         initialQuestionCounter: number,
     ) => void;
     hasRenderedCallback: (id: string) => void;
-    reportVisibility?: boolean;
-    reportVisibilityCallback: (id: string, isVisible: boolean) => void;
     itemAttemptNumbers: number[];
     itemIndexById: ReadonlyMap<string, number>;
     itemWord: string;

src/Activity/SelectActivity.tsx

@@ -15,7 +15,7 @@ export const SelectActivity = memo(function SelectActivity({
     }
 
     return (
-        <div key={state.attemptNumber} hidden={!props.checkRender(state)}>
+        <div key={state.attemptNumber}>
             <div>{selectedActivities}</div>
         </div>
     );

src/Activity/SequenceActivity.tsx

@@ -14,9 +14,5 @@ export const SequenceActivity = memo(function SequenceActivity({
         );
     }
 
-    return (
-        <div hidden={!props.checkRender(state)} key={state.attemptNumber}>
-            {activityList}
-        </div>
-    );
+    return <div key={state.attemptNumber}>{activityList}</div>;
 });