@markdy/renderer-dom 1.0.16 → 1.0.17

package/dist/index.js

@@ -2997,6 +2997,69 @@ function ensureSceneStyles(doc) {
   opacity: 1 !important;
   color: #64748b !important;
 }
+/* Fullscreen & Fallback Pseudo-Fullscreen Views */
+.markdy-fullscreen-host,
+:fullscreen {
+  background-color: var(--md-canvas, #0b101b) !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  max-width: 100vw !important;
+  max-height: 100vh !important;
+  box-sizing: border-box !important;
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  padding: 16px 20px 12px !important;
+  overflow: hidden !important;
+}
+.markdy-fullscreen-host .markdy-viewport,
+:fullscreen .markdy-viewport {
+  flex: 1 1 auto !important;
+  width: 100% !important;
+  height: 100% !important;
+  max-width: 100% !important;
+  max-height: calc(100vh - 64px) !important;
+}
+.markdy-fullscreen-host .markdy-footer,
+:fullscreen .markdy-footer {
+  flex-shrink: 0 !important;
+  width: 100% !important;
+  max-width: 1400px !important;
+  margin: 0 auto !important;
+  padding: 8px 12px 4px !important;
+}
+.markdy--pseudo-fullscreen {
+  position: fixed !important;
+  inset: 0 !important;
+  z-index: 999999 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  max-width: 100vw !important;
+  max-height: 100vh !important;
+  background-color: var(--md-canvas, #0b101b) !important;
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  padding: 16px 20px 12px !important;
+  box-sizing: border-box !important;
+  overflow: hidden !important;
+}
+.markdy--pseudo-fullscreen .markdy-viewport {
+  flex: 1 1 auto !important;
+  width: 100% !important;
+  height: 100% !important;
+  max-width: 100% !important;
+  max-height: calc(100vh - 64px) !important;
+}
+.markdy--pseudo-fullscreen .markdy-footer {
+  flex-shrink: 0 !important;
+  width: 100% !important;
+  max-width: 1400px !important;
+  margin: 0 auto !important;
+  padding: 8px 12px 4px !important;
+}
 @media (prefers-reduced-motion: reduce) {
   .markdy-node,
   .markdy-beat-caption,
@@ -3695,6 +3758,7 @@ function createDiagram(opts) {
       }
       for (const anim of allAnims) anim.cancel();
       resizeObserver?.disconnect();
+      removeFullscreenListeners?.();
       if (progressEl?.parentNode === viewport) viewport.removeChild(progressEl);
       if (badge?.parentNode) badge.parentNode.removeChild(badge);
       if (footer?.parentNode) footer.parentNode.removeChild(footer);
@@ -3978,37 +4042,99 @@ function createDiagram(opts) {
     button.addEventListener("click", resetViewportTransform);
     toolbar.appendChild(button);
   }
+  let removeFullscreenListeners = null;
   function mountFullscreenControl(toolbar) {
     if (!fullscreenButton) return;
     const button = makeControlButton("Full", "Toggle fullscreen view", ICONS2.fullscreen);
     button.className = "markdy-control-fullscreen";
     button.setAttribute("aria-pressed", "false");
-    const host = container.parentElement ?? container;
+    const host = footer && footer.parentElement ? footer.parentElement : container.parentElement ?? container;
+    let isPseudoFull = false;
     function syncFullscreenState() {
-      const isFull = document.fullscreenElement === host || document.fullscreenElement === container || document.fullscreenElement === viewport;
+      const isFull = isPseudoFull || document.fullscreenElement === host || document.fullscreenElement === container || document.fullscreenElement === viewport || document.webkitFullscreenElement === host || document.webkitFullscreenElement === container;
       button.setAttribute("aria-pressed", isFull ? "true" : "false");
       button.title = isFull ? "Exit fullscreen" : "Toggle fullscreen view";
+      button.innerHTML = isFull ? `${ICONS2.fullscreen}Exit` : `${ICONS2.fullscreen}Full`;
+      if (isFull) {
+        host.classList.add("markdy-fullscreen-host");
+      } else {
+        host.classList.remove("markdy-fullscreen-host");
+        host.classList.remove("markdy--pseudo-fullscreen");
+      }
+      requestAnimationFrame(() => {
+        applyViewportTransform();
+        syncControls();
+      });
     }
-    button.addEventListener("click", async () => {
+    async function toggleFullscreen() {
       try {
-        if (!document.fullscreenElement) {
-          if (host.requestFullscreen) {
-            await host.requestFullscreen();
-          } else if (host.webkitRequestFullscreen) {
-            await host.webkitRequestFullscreen();
+        const isCurrentlyFull = isPseudoFull || document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
+        if (!isCurrentlyFull) {
+          const req = host.requestFullscreen?.bind(host) || host.webkitRequestFullscreen?.bind(host) || host.mozRequestFullScreen?.bind(host) || host.msRequestFullscreen?.bind(host) || container.requestFullscreen?.bind(container) || container.webkitRequestFullscreen?.bind(container);
+          if (req) {
+            try {
+              await req();
+            } catch {
+              isPseudoFull = true;
+              host.classList.add("markdy--pseudo-fullscreen");
+              syncFullscreenState();
+            }
+          } else {
+            isPseudoFull = true;
+            host.classList.add("markdy--pseudo-fullscreen");
+            syncFullscreenState();
           }
         } else {
-          if (document.exitFullscreen) {
-            await document.exitFullscreen();
-          } else if (document.webkitExitFullscreen) {
-            await document.webkitExitFullscreen();
+          if (isPseudoFull) {
+            isPseudoFull = false;
+            host.classList.remove("markdy--pseudo-fullscreen");
+            syncFullscreenState();
+          } else {
+            const exit = document.exitFullscreen?.bind(document) || document.webkitExitFullscreen?.bind(document) || document.mozCancelFullScreen?.bind(document) || document.msExitFullscreen?.bind(document);
+            if (exit) {
+              await exit();
+            }
           }
         }
       } catch (err) {
-        onWarning({ severity: "warning", message: `Fullscreen toggle failed: ${String(err)}`, line: 0 });
+        if (!isPseudoFull) {
+          isPseudoFull = true;
+          host.classList.add("markdy--pseudo-fullscreen");
+          syncFullscreenState();
+        } else {
+          isPseudoFull = false;
+          host.classList.remove("markdy--pseudo-fullscreen");
+          syncFullscreenState();
+        }
       }
+    }
+    button.addEventListener("click", (e) => {
+      e.stopPropagation();
+      toggleFullscreen();
     });
+    const handleEscKey = (e) => {
+      if (e.key === "Escape" && isPseudoFull) {
+        isPseudoFull = false;
+        host.classList.remove("markdy--pseudo-fullscreen");
+        syncFullscreenState();
+      }
+    };
     document.addEventListener("fullscreenchange", syncFullscreenState);
+    document.addEventListener("webkitfullscreenchange", syncFullscreenState);
+    document.addEventListener("mozfullscreenchange", syncFullscreenState);
+    document.addEventListener("MSFullscreenChange", syncFullscreenState);
+    window.addEventListener("keydown", handleEscKey);
+    removeFullscreenListeners = () => {
+      document.removeEventListener("fullscreenchange", syncFullscreenState);
+      document.removeEventListener("webkitfullscreenchange", syncFullscreenState);
+      document.removeEventListener("mozfullscreenchange", syncFullscreenState);
+      document.removeEventListener("MSFullscreenChange", syncFullscreenState);
+      window.removeEventListener("keydown", handleEscKey);
+      if (isPseudoFull) {
+        host.classList.remove("markdy--pseudo-fullscreen");
+        host.classList.remove("markdy-fullscreen-host");
+      }
+    };
     toolbar.appendChild(button);
   }
   function handleKeyDown(event) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "Browser renderer for diagram-native animated MarkdyScript architecture diagrams, built on the Web Animations API.",
   "license": "MIT",
   "type": "module",
@@ -45,14 +45,14 @@
   },
   "dependencies": {
     "html2canvas": "^1.4.1",
-    "@markdy/core": "1.0.16"
+    "@markdy/core": "1.0.17"
   },
   "devDependencies": {
     "jsdom": "^29.1.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.7",
-    "@markdy/stdlib-systems": "1.0.16"
+    "@markdy/stdlib-systems": "1.0.17"
   },
   "scripts": {
     "build": "tsup",