fix(sandpack): make the Clear button actually reset the preview

[Dextheking1]

Summary

Fixes #8657.

After editing the code in an interactive sandbox and pressing Clear, the editor reverted to the original sample code but the preview kept running the edited code (e.g. the red dot kept following the cursor).

Root cause

handleClear in NavigationBar.tsx called sandpack.resetAllFiles() and then refresh() synchronously in the same tick. The refresh reboots the preview iframe while the Sandpack client still holds the edited files; the reset files only reach the client through the debounced file watcher (recompileDelay, 200ms), and that "compile" message is lost while the iframe is rebooting (IFrameProtocol.dispatch does not queue). When the rebooted bundler initializes, the client recompiles with its stale edited files, so the reset never takes effect in the preview.

Fix

After a confirmed reset, don't call refresh() — let the file watcher push the original files so the bundler recompiles the preview with them (the standard Sandpack reset flow). refresh() is still called when there was nothing to reset, preserving the Reload behavior.

Test plan

• This repo has no component test runner (no jest/vitest), so no automated regression test was added.
• prettier --check and eslint on the changed file: clean.
• tsc --noEmit: no new errors (the 48 reported errors are pre-existing on the base commit, caused by the local install resolving different @types/react versions than the yarn lockfile; identical count before and after this change, none in the touched file).
• Verified by reading the sandpack-react 2.13.5 / sandpack-client sources that the reset path (resetAllFiles -> file watcher -> updateSandbox) delivers the original files to the running bundler without an iframe reboot.

---

Built with a small AI agent loop under my direction; I wrote and reviewed the code and accept responsibility for it. — Benjamin (@Dextheking1)

[github-actions]

Size changes

Details

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

🎉 Global Bundle Size Decreased

Page	Size (compressed)
global	115.15 KB (-1 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!