@markdy/renderer-dom 1.0.21 → 1.0.22

package/dist/index.js

@@ -2722,6 +2722,13 @@ function ensureSceneStyles(doc) {
   transform: translateY(8px);
   will-change: opacity, transform;
 }
+.markdy-diagram-root {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+}
 .markdy-footer {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   position: relative;
@@ -3191,37 +3198,13 @@ function ensureSceneStyles(doc) {
   color: #64748b !important;
 }
 /* Fullscreen & Fallback Pseudo-Fullscreen Views */
+.markdy-diagram-root:fullscreen,
+.markdy-diagram-root:-webkit-full-screen,
+.markdy-diagram-root:-moz-full-screen,
+.markdy-diagram-root:-ms-fullscreen,
+.markdy-viewport:fullscreen,
+.markdy-viewport:-webkit-full-screen,
 .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;
@@ -3231,21 +3214,34 @@ function ensureSceneStyles(doc) {
   max-width: 100vw !important;
   max-height: 100vh !important;
   background-color: var(--md-canvas, #0b101b) !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;
-  box-sizing: border-box !important;
   overflow: hidden !important;
 }
+.markdy-diagram-root:fullscreen .markdy-viewport,
+.markdy-diagram-root:-webkit-full-screen .markdy-viewport,
+.markdy-diagram-root:-moz-full-screen .markdy-viewport,
+.markdy-diagram-root:-ms-fullscreen .markdy-viewport,
+.markdy-fullscreen-host .markdy-viewport,
 .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;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
 }
+.markdy-diagram-root:fullscreen .markdy-footer,
+.markdy-diagram-root:-webkit-full-screen .markdy-footer,
+.markdy-diagram-root:-moz-full-screen .markdy-footer,
+.markdy-diagram-root:-ms-fullscreen .markdy-footer,
+.markdy-fullscreen-host .markdy-footer,
 .markdy--pseudo-fullscreen .markdy-footer {
   flex-shrink: 0 !important;
   width: 100% !important;
@@ -3447,6 +3443,16 @@ function createDiagram(opts) {
   const DEFAULT_RAINBOW = "hsl(0,90%,60%), hsl(45,90%,55%), hsl(90,80%,50%), hsl(180,80%,50%), hsl(270,80%,55%), hsl(330,90%,60%)";
   const totalDurationMs = plan.duration * 1e3;
   const durationSeconds = plan.duration;
+  container.classList.add("markdy-diagram-root");
+  Object.assign(container.style, {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    boxSizing: "border-box",
+    width: "100%"
+  });
+  if (container.style.aspectRatio) container.style.aspectRatio = "unset";
+  if (container.style.overflow === "hidden") container.style.overflow = "visible";
   const viewport = document.createElement("div");
   viewport.className = "markdy-viewport";
   Object.assign(viewport.style, {
@@ -3511,8 +3517,7 @@ function createDiagram(opts) {
       padding: "6px 8px 2px",
       background: "transparent"
     });
-    if (container.parentNode) container.parentNode.insertBefore(footer, container.nextSibling);
-    else container.appendChild(footer);
+    container.appendChild(footer);
     return footer;
   }
   let badge = null;
@@ -4057,8 +4062,11 @@ function createDiagram(opts) {
       removeFullscreenListeners?.();
       closeCodePanel?.();
       closeCodePanel = null;
+      container.classList.remove("markdy-diagram-root");
+      container.classList.remove("markdy-fullscreen-host");
+      container.classList.remove("markdy--pseudo-fullscreen");
       if (progressEl?.parentNode === viewport) viewport.removeChild(progressEl);
-      if (footer?.parentNode) footer.parentNode.removeChild(footer);
+      if (footer?.parentNode === container) container.removeChild(footer);
       if (viewport.parentNode === container) container.removeChild(viewport);
     }
   };
@@ -4366,10 +4374,10 @@ function createDiagram(opts) {
     const button = makeControlButton("Full", "Toggle fullscreen view", ICONS2.fullscreen);
     button.className = "markdy-control-fullscreen";
     button.setAttribute("aria-pressed", "false");
-    const host = footer && footer.parentElement ? footer.parentElement : container.parentElement ?? container;
+    const host = container;
     let isPseudoFull = false;
     function syncFullscreenState() {
-      const isFull = isPseudoFull || document.fullscreenElement === host || document.fullscreenElement === container || document.fullscreenElement === viewport || document.webkitFullscreenElement === host || document.webkitFullscreenElement === container;
+      const isFull = isPseudoFull || document.fullscreenElement === host || document.fullscreenElement === viewport || document.webkitFullscreenElement === host || document.webkitFullscreenElement === viewport || document.mozFullScreenElement === host || document.msFullscreenElement === host;
       button.setAttribute("aria-pressed", isFull ? "true" : "false");
       button.title = isFull ? "Exit fullscreen" : "Toggle fullscreen view";
       button.innerHTML = isFull ? `${ICONS2.fullscreen}Exit` : `${ICONS2.fullscreen}Full`;
@@ -4380,15 +4388,16 @@ function createDiagram(opts) {
         host.classList.remove("markdy--pseudo-fullscreen");
       }
       requestAnimationFrame(() => {
+        scaleScene();
         applyViewportTransform();
         syncControls();
       });
     }
     async function toggleFullscreen() {
       try {
-        const isCurrentlyFull = isPseudoFull || document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
+        const isCurrentlyFull = isPseudoFull || document.fullscreenElement === host || document.fullscreenElement === viewport || document.webkitFullscreenElement === host || document.mozFullScreenElement === host || document.msFullscreenElement === host;
         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);
+          const req = host.requestFullscreen?.bind(host) || host.webkitRequestFullscreen?.bind(host) || host.mozRequestFullScreen?.bind(host) || host.msRequestFullscreen?.bind(host) || viewport.requestFullscreen?.bind(viewport) || viewport.webkitRequestFullscreen?.bind(viewport);
           if (req) {
             try {
               await req();
@@ -4414,7 +4423,7 @@ function createDiagram(opts) {
             }
           }
         }
-      } catch (err) {
+      } catch {
         if (!isPseudoFull) {
           isPseudoFull = true;
           host.classList.add("markdy--pseudo-fullscreen");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "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.21"
+    "@markdy/core": "1.0.22"
   },
   "devDependencies": {
     "jsdom": "^29.1.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.7",
-    "@markdy/stdlib-systems": "1.0.21"
+    "@markdy/stdlib-systems": "1.0.22"
   },
   "scripts": {
     "build": "tsup",