@markdy/renderer-dom 1.0.20 → 1.0.21

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);
@@ -2718,19 +2724,20 @@ function ensureSceneStyles(doc) {
 }
 .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 +2750,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 +2813,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 +2822,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 +2925,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;
@@ -3448,6 +3463,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 +3499,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,7 +3508,7 @@ 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);
@@ -4299,7 +4317,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() {

package/package.json

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