@markdy/renderer-dom 1.0.16 → 1.0.18

package/dist/index.js

@@ -2626,28 +2626,37 @@ function ensureSceneStyles(doc) {
   transform: translateY(-1px) scale(1.02);
 }
 .markdy-badge {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  z-index: 25;
   display: inline-flex;
   align-items: center;
   gap: 4px;
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--md-control-text, #94a3b8);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  color: var(--md-text-muted, #94a3b8);
   text-decoration: none;
-  padding: 3px 8px;
-  border-radius: 999px;
-  background: var(--md-control-bg, rgba(255, 255, 255, 0.05));
-  border: 1px solid var(--md-control-border, rgba(148, 163, 184, 0.18));
-  margin-left: auto;
-  flex-shrink: 0;
-  transition: all 0.15s ease;
-  white-space: nowrap;
+  padding: 2.5px 7px;
+  border-radius: 5px;
+  background: var(--md-surface, rgba(15, 23, 42, 0.45));
+  border: 1px solid var(--md-border, rgba(148, 163, 184, 0.15));
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  opacity: 0.65;
+  transition: all 0.2s ease;
+  pointer-events: auto;
+  user-select: none;
 }
 .markdy-badge:hover {
+  opacity: 1;
   color: var(--accent, #10b981);
-  background: var(--accent-light, rgba(16, 185, 129, 0.12));
   border-color: var(--accent, #10b981);
+  background: var(--md-surface-raised, rgba(15, 23, 42, 0.75));
   transform: translateY(-1px);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
 }
 .markdy-speed-group {
   display: inline-flex;
@@ -2997,6 +3006,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,
@@ -3238,18 +3310,6 @@ function createDiagram(opts) {
     else container.appendChild(footer);
     return footer;
   }
-  let badge = null;
-  if (copyright) {
-    badge = document.createElement("a");
-    badge.className = "markdy-badge";
-    badge.href = `${MARKDY_PLAYGROUND_URL}#code=${encodeCodeForPlaygroundHash(code)}`;
-    badge.target = "_blank";
-    badge.rel = "noopener noreferrer";
-    badge.title = "Open and edit in Markdy Playground";
-    badge.style.marginLeft = "auto";
-    badge.innerHTML = `<span style="opacity:0.9">\u26A1</span> Markdy`;
-    ensureFooter().appendChild(badge);
-  }
   ensureSceneStyles(document);
   ensureNodeStyles(document);
   const scene = document.createElement("div");
@@ -3266,6 +3326,17 @@ function createDiagram(opts) {
   });
   applyThemeToScene(scene, plan.theme);
   viewport.appendChild(scene);
+  let badge = null;
+  if (copyright) {
+    badge = document.createElement("a");
+    badge.className = "markdy-badge";
+    badge.href = "https://markdy.com";
+    badge.target = "_blank";
+    badge.rel = "noopener noreferrer";
+    badge.title = "Powered by Markdy - Diagram as Code";
+    badge.textContent = "Powered by Markdy";
+    viewport.appendChild(badge);
+  }
   const viewportTransform = document.createElement("div");
   viewportTransform.className = "markdy-viewport-transform";
   Object.assign(viewportTransform.style, {
@@ -3695,6 +3766,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 +4050,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) {
@@ -4104,7 +4238,7 @@ function createDiagram(opts) {
       mountCodeControl(toolsGroup);
     }
     if (toolsGroup.children.length > 0) toolbar.appendChild(toolsGroup);
-    ensureFooter().insertBefore(toolbar, badge ?? null);
+    ensureFooter().appendChild(toolbar);
     syncControls();
   }
   viewport.style.cursor = interactiveViewport ? "grab" : "pointer";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "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.18"
   },
   "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.18"
   },
   "scripts": {
     "build": "tsup",