Preview Mesh Batch (VTK): fullscreen with in-fullscreen navigation

Adds a fullscreen button to the nav bar that expands the whole widget (viewer
+ nav bar), so the < > arrows and the dropdown stay visible and clickable in
fullscreen. Arrow KEYS (left/right) also navigate while the widget has focus
(container is made focusable and focused on entering fullscreen).

Navigation is already client-side (showIndex), so it works identically in
fullscreen with no re-execution. All listeners are on the pack's own
container element (never document), keeping it isolation-clean.

Caveat: when the mouse focus is inside the iframe 3D view, arrow KEYS go to
the iframe, not the container -- the on-screen arrow buttons always work; key
nav works when the nav bar/container holds focus. (Forwarding keys out of the
iframe would be a follow-up.)

javascript/js/mesh_preview_vtk_batch.js

@@ -100,10 +100,18 @@ app.registerExtension({
                 dropdown.innerHTML = '<option value="0">1 / 1</option>';
 
                 // Assemble navigation bar
+                // Fullscreen toggle -- expands the whole widget (viewer + this nav
+                // bar) so the arrows and dropdown stay usable in fullscreen.
+                const fsButton = document.createElement("button");
+                fsButton.textContent = "⛶";  // fullscreen glyph
+                fsButton.title = "Fullscreen (← → to navigate)";
+                fsButton.style.cssText = "padding:4px 10px;cursor:pointer;background:#333;color:#ccc;border:1px solid #555;border-radius:3px;font-size:13px;line-height:1;";
+
                 navBar.appendChild(prevButton);
                 navBar.appendChild(indexLabel);
                 navBar.appendChild(dropdown);
                 navBar.appendChild(nextButton);
+                navBar.appendChild(fsButton);
 
                 // Create mesh info panel
                 const infoPanel = document.createElement("div");
@@ -188,6 +196,27 @@ app.registerExtension({
                 nextButton.addEventListener("click", () => showIndex(currentIndex + 1));
                 dropdown.addEventListener("change", () => showIndex(Number(dropdown.value)));
 
+                // Fullscreen the whole widget. The arrow BUTTONS stay clickable in
+                // fullscreen; arrow KEYS also navigate while the widget (nav bar) has
+                // focus. All listeners are on our own `container`, never document, so
+                // this stays isolation-clean.
+                container.tabIndex = 0;   // focusable -> can receive keydown in fullscreen
+                const isFs = () => (document.fullscreenElement || document.webkitFullscreenElement) === container;
+                fsButton.addEventListener("click", () => {
+                    if (isFs()) {
+                        (document.exitFullscreen || document.webkitExitFullscreen)?.call(document);
+                    } else {
+                        (container.requestFullscreen || container.webkitRequestFullscreen)?.call(container);
+                    }
+                });
+                ["fullscreenchange", "webkitfullscreenchange"].forEach((ev) =>
+                    container.addEventListener(ev, () => { if (isFs()) container.focus(); }));
+                container.addEventListener("keydown", (e) => {
+                    if (!isFs()) return;   // only hijack arrows while WE are fullscreen
+                    if (e.key === "ArrowLeft") { showIndex(currentIndex - 1); e.preventDefault(); }
+                    else if (e.key === "ArrowRight") { showIndex(currentIndex + 1); e.preventDefault(); }
+                });
+
                 // Update button states
                 const updateNavigationButtons = () => {
                     prevButton.disabled = currentIndex === 0;