[Preview NG] Migrate Perseus to the new preview system

[jeremywiebe]

Summary:

This PR is part of a series building a typed, hook-based preview system for the Perseus editor. The new system replaces the untyped window.iframeDataStore + raw postMessage(string) communication with structured, validated message passing via usePreviewController and usePreviewPresenter hooks. The new system is being built alongside the old one — no existing behavior changes until the final PR in the series flips the switch.

Previous PRs in this series:

• [Preview NG] Type findWidgets functions and add JSDoc to HintRenderer props #3464
• [Preview NG] Remove unused bold support from hint preview #3467
• [Preview NG] Add typed preview message protocol with validators #3474
• [Preview NG] Add functions to sanitize objects for sending to Preview #3492
• [Preview NG] Introduce hooks to manage preview communication #3495
• [Preview NG] Export preview system hooks from @khanacademy/perseus-editor #3499
• [Preview NG] Add PreviewWithIframe component #3578

---

This is the Preview NG changeover PR! After this lands, Perseus will be exclusively using the new Preview communication system (no more legacy iframeDataStore + string-postMessage preview protocol). This means that all Storybook preview code now uses the new usePreviewPresenter hook, and all four editors (EditorPage, ArticleEditor, HintEditor, ItemEditor) switch from IframeContentRenderer to PreviewWithIframe (introduced in #3578).

The legacy IframeContentRenderer remains because some client's still use it directly. When this change is released, I will switch clients over as part of the Perseus release. The legacy component will be deleted in a later cleanup pass once that's done.

Screen.Recording.2026-05-06.at.1.20.24.PM.mov

NOTE: the issue of the keypad being clipped by the preview iframe is a longstanding issue and is unrelated to the changes in this PR.

Issue: LEMS-3741

Test plan:

• pnpm tsc clean
• pnpm lint clean for touched files
• pnpm test
• Reviewer: open Storybook, navigate to the editor stories, and confirm each editor's preview renders content (question, hint, article single section, article-all). The behaviour should be identical to main.

[github-actions]

🗄️ Schema Change: No Changes ✅

[github-actions]

Size Change: +399 B (+0.08%)

Total Size: 504 kB

📦 View Changed

Filename	Size	Change
packages/perseus-editor/dist/es/index.js	104 kB	+399 B (+0.38%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	20.6 kB
packages/keypad-context/dist/es/index.js	1 kB
packages/kmath/dist/es/index.js	6.31 kB
packages/math-input/dist/es/index.js	98.5 kB
packages/math-input/dist/es/strings.js	1.61 kB
packages/perseus-core/dist/es/index.item-splitting.js	12 kB
packages/perseus-core/dist/es/index.js	25.5 kB
packages/perseus-linter/dist/es/index.js	9.41 kB
packages/perseus-score/dist/es/index.js	9.78 kB
packages/perseus-utils/dist/es/index.js	403 B
packages/perseus/dist/es/index.js	198 kB
packages/perseus/dist/es/strings.js	8.5 kB
packages/pure-markdown/dist/es/index.js	1.39 kB
packages/simple-markdown/dist/es/index.js	6.71 kB

_{compressed-size-action}

[github-actions]

🛠️ Item Splitting: No Changes ✅

[github-actions]

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (9c745c5) and published it to npm. You
can install it using the tag PR3581.

Example:

pnpm add @khanacademy/perseus@PR3581

If you are working in Khan Academy's frontend, you can run the below command.

./dev/tools/bump_perseus_version.ts -t PR3581

If you are working in Khan Academy's webapp, you can run the below command.

./dev/tools/bump_perseus_version.js -t PR3581

[jeremywiebe]

This moves us away from string refs (see _updatePreviewFrames in it original form)

[claude]

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.

_{Tip: disable this comment in your organization's Code Review settings.}