@markdy/renderer-dom 1.0.20 → 1.0.22

package/dist/index.js

@@ -189,11 +189,24 @@ function toPathD(points, cornerRadius = 14, existingPaths = []) {
   }
   return parts.join(" ");
 }
-function selfLoopPath(rect) {
+function selfLoopPath(rect, bounds) {
   const top = rect.y;
+  const loopHeight = 36;
+  if (bounds && top - loopHeight < 16) {
+    const bottom = rect.y + rect.height;
+    const left2 = rect.x + rect.width * 0.3;
+    const right2 = rect.x + rect.width * 0.7;
+    const apex2 = Math.min(bounds.height - 16, bottom + loopHeight);
+    return [
+      { x: round1(right2), y: round1(bottom) },
+      { x: round1(right2), y: round1(apex2) },
+      { x: round1(left2), y: round1(apex2) },
+      { x: round1(left2), y: round1(bottom) }
+    ];
+  }
   const left = rect.x + rect.width * 0.3;
   const right = rect.x + rect.width * 0.7;
-  const apex = top - 40;
+  const apex = Math.max(12, top - loopHeight);
   return [
     { x: round1(left), y: round1(top) },
     { x: round1(left), y: round1(apex) },
@@ -737,7 +750,7 @@ function createEdgeRuntime(svg, from, to, kind, label, theme, sceneId, routeObst
   const color = theme.edges[kind];
   const style = EDGE_STYLES[kind];
   const isSelfLoop = from.id === to.id;
-  const points = isSelfLoop ? dedupePoints(selfLoopPath(from)) : dedupePoints(routeEdgePoints(from, to, routeObstacles, bounds, lane));
+  const points = isSelfLoop ? dedupePoints(selfLoopPath(from, bounds)) : dedupePoints(routeEdgePoints(from, to, routeObstacles, bounds, lane));
   const d = toPathD(points, 14, existingPaths);
   const len = polylineLength(points);
   const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
@@ -1776,7 +1789,7 @@ function ensureNodeStyles(doc) {
   filter: drop-shadow(0 0 1px var(--md-hairline, rgba(15, 23, 42, 0.2))) drop-shadow(0 4px 12px var(--md-shadow, rgba(2, 6, 23, 0.15)));
 }
 .markdy-node[data-shape="diamond"][data-focal="1"] {
-  filter: drop-shadow(0 0 1.5px var(--md-accent)) drop-shadow(0 4px 16px color-mix(in srgb, var(--md-accent) 30%, transparent));
+  filter: drop-shadow(0 0 1.5px var(--md-accent)) drop-shadow(0 4px 14px var(--md-shadow, rgba(2, 6, 23, 0.15)));
 }
 .markdy-node[data-shape="diamond"] .markdy-node__body {
   justify-content: center;
@@ -1868,13 +1881,10 @@ function ensureNodeStyles(doc) {
   background: var(--md-node-surface, var(--md-surface));
 }
 .markdy-node[data-focal="1"] {
-  background:
-    linear-gradient(180deg,
-      color-mix(in srgb, var(--md-accent) 12%, var(--md-node-surface-raised, var(--md-surface-raised, #ffffff))),
-      color-mix(in srgb, var(--md-accent) 6%, var(--md-node-surface, var(--md-surface, #ffffff))));
   box-shadow:
-    0 2px 8px color-mix(in srgb, var(--md-accent) 20%, transparent),
-    inset 0 0 0 1.5px color-mix(in srgb, var(--md-accent) 60%, transparent);
+    0 2px 10px -2px var(--md-shadow, rgba(2, 6, 23, 0.18)),
+    inset 0 0 0 1.5px var(--md-accent),
+    0 0 0 1px color-mix(in srgb, var(--md-accent) 25%, transparent);
 }
 .markdy-scene-root[data-markdy-theme="nebula"] .markdy-node {
   border: 1px solid color-mix(in srgb, var(--md-role-color, var(--md-accent)) 34%, transparent);
@@ -1885,7 +1895,7 @@ function ensureNodeStyles(doc) {
 .markdy-scene-root[data-markdy-theme="nebula"] .markdy-node[data-focal="1"] {
   box-shadow:
     0 0 34px -8px color-mix(in srgb, var(--md-accent) 78%, transparent),
-    inset 0 0 0 1px var(--md-accent);
+    inset 0 0 0 1.5px var(--md-accent);
 }
 .markdy-scene-root[data-flat="1"] .markdy-node {
   box-shadow: inset 0 0 0 1px var(--md-hairline, color-mix(in srgb, var(--md-border) 50%, transparent));
@@ -1894,11 +1904,7 @@ function ensureNodeStyles(doc) {
   box-shadow: inset 0 0 0 1px var(--md-hairline, color-mix(in srgb, var(--md-border) 50%, transparent));
 }
 .markdy-scene-root[data-flat="1"] .markdy-node[data-focal="1"] {
-  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--md-accent) 60%, transparent);
-  background:
-    linear-gradient(180deg,
-      color-mix(in srgb, var(--md-accent) 10%, var(--md-node-surface-raised, var(--md-surface-raised, #ffffff))),
-      color-mix(in srgb, var(--md-accent) 5%, var(--md-node-surface, var(--md-surface, #ffffff))));
+  box-shadow: inset 0 0 0 1.5px var(--md-accent);
 }
 .markdy-node[data-kind="external"] {
   border: 1.2px dashed color-mix(in srgb, var(--md-ink, var(--md-text)) 30%, transparent);
@@ -2716,21 +2722,29 @@ 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;
   width: 100%;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  padding: 6px 12px;
+  padding: 8px 12px 4px;
   color: var(--md-text, #f8fafc);
   background: transparent;
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
   border-top: none;
-  z-index: 20;
+  z-index: 100;
 }
 .markdy-controls {
   display: flex;
@@ -2743,6 +2757,8 @@ function ensureSceneStyles(doc) {
   max-width: 100%;
   overflow-x: auto;
   scrollbar-width: none;
+  padding: 4px 2px;
+  margin: -4px -2px;
 }
 .markdy-controls::-webkit-scrollbar {
   display: none;
@@ -2804,6 +2820,8 @@ function ensureSceneStyles(doc) {
   transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .markdy-controls button:hover:not([aria-pressed="true"]) {
+  position: relative;
+  z-index: 2;
   background: var(--md-control-hover-bg, rgba(255, 255, 255, 0.1));
   color: var(--md-control-hover-text, #f8fafc);
   border-color: var(--md-control-hover-border, rgba(148, 163, 184, 0.35));
@@ -2811,12 +2829,16 @@ function ensureSceneStyles(doc) {
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
 }
 .markdy-controls button[aria-pressed="true"] {
+  position: relative;
+  z-index: 2;
   background: var(--accent, #10b981) !important;
   color: #ffffff !important;
   border-color: var(--accent, #10b981) !important;
   box-shadow: 0 0 10px var(--accent-glow, rgba(16, 185, 129, 0.4)) !important;
 }
 .markdy-controls button:focus-visible {
+  position: relative;
+  z-index: 3;
   outline: 2px solid var(--accent, #10b981);
   outline-offset: 1px;
 }
@@ -2910,10 +2932,10 @@ function ensureSceneStyles(doc) {
 .markdy-code-panel-overlay {
   position: fixed;
   inset: 0;
-  z-index: 9000;
-  background: rgba(2, 6, 23, 0.55);
-  backdrop-filter: blur(3px);
-  -webkit-backdrop-filter: blur(3px);
+  z-index: 100000;
+  background: rgba(2, 6, 23, 0.65);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3176,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;
@@ -3216,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;
@@ -3432,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, {
@@ -3448,6 +3469,7 @@ function createDiagram(opts) {
   let progressEl = null;
   if (showProgress) {
     progressEl = document.createElement("div");
+    progressEl.className = progressMode === "bar" ? "markdy-progress-bar" : "markdy-boundary-progress";
     Object.assign(progressEl.style, {
       position: "absolute",
       ...progressMode === "bar" ? { left: "0", right: "0", bottom: "0", height: "3px" } : { inset: "0" },
@@ -3483,6 +3505,8 @@ function createDiagram(opts) {
     footer.className = "markdy-footer";
     applyThemeVariables(footer, plan.theme);
     Object.assign(footer.style, {
+      position: "relative",
+      zIndex: "100",
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
@@ -3490,11 +3514,10 @@ function createDiagram(opts) {
       gap: "6px",
       width: "100%",
       boxSizing: "border-box",
-      padding: "4px 6px 0",
+      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;
@@ -4039,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);
     }
   };
@@ -4299,7 +4325,8 @@ function createDiagram(opts) {
       body.appendChild(pre);
       panel.append(header, body);
       overlay.appendChild(panel);
-      document.body.appendChild(overlay);
+      const mountHost = document.fullscreenElement ?? document.body;
+      mountHost.appendChild(overlay);
       closeBtn.focus();
       let closing = false;
       function removePanel() {
@@ -4347,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`;
@@ -4361,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();
@@ -4395,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.20",
+  "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.20"
+    "@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.20"
+    "@markdy/stdlib-systems": "1.0.22"
   },
   "scripts": {
     "build": "tsup",