@markdy/renderer-dom 0.8.17 → 0.8.19

package/README.md

@@ -77,7 +77,7 @@ diagram.destroy();    // clean up DOM + cancel animations
 | `sceneBoundaryProgress` | `boolean` | `progressBar ?? true` | Preferred flag for the rainbow scene-boundary progress bar |
 | `playbackRate` | `number` | `1` | Normalized timeline speed multiplier; `1` is Markdy's normal pace |
 | `interactiveViewport` | `boolean` | `false` | Enable wheel zoom and drag pan on the rendered viewport |
-| `controls` | `boolean` | `false` | Show a compact toolbar with play/pause, restart, speed, and view reset controls when viewport interaction is enabled |
+| `controls` | `boolean` | `false` | Show a compact toolbar with play/pause, restart, speed, and view reset controls; also enables viewport interaction |
 | `onWarning` | `(warning: Diagnostic) => void` | `console.warn` | Called for each soft parse warning |
 | `onTimeUpdate` | `(seconds: number, durationSeconds: number) => void` | — | Called whenever playback or seek changes the current time |
 | `onPlayStateChange` | `(playing: boolean) => void` | — | Called when playback starts or pauses |

package/dist/index.d.ts

@@ -24,7 +24,7 @@ interface DiagramOptions {
     playbackRate?: number;
     /** Enable wheel zoom and drag pan on the rendered viewport. Defaults to false. */
     interactiveViewport?: boolean;
-    /** Show built-in playback and viewport controls. Defaults to false. */
+    /** Show built-in playback and viewport controls. Also enables viewport interaction. Defaults to false. */
     controls?: boolean;
     onWarning?: (warning: Diagnostic) => void;
     onTimeUpdate?: (seconds: number, durationSeconds: number) => void;

package/dist/index.js

@@ -1863,8 +1863,8 @@ function createDiagram(opts) {
     progressBar,
     sceneBoundaryProgress,
     playbackRate: initialPlaybackRate = DEFAULT_PLAYBACK_RATE,
-    interactiveViewport = false,
     controls = false,
+    interactiveViewport = controls,
     onWarning = (w) => console.warn(`[markdy] line ${w.line}: ${w.message}`),
     onTimeUpdate,
     onPlayStateChange
@@ -1909,6 +1909,25 @@ function createDiagram(opts) {
     progressEl.style.webkitMaskComposite = "xor";
     progressEl.style.padding = "2px";
   }
+  let footer = null;
+  function ensureFooter() {
+    if (footer) return footer;
+    footer = document.createElement("div");
+    footer.className = "markdy-footer";
+    Object.assign(footer.style, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      flexWrap: "wrap",
+      gap: "6px",
+      width: "100%",
+      boxSizing: "border-box",
+      padding: "4px 6px 0"
+    });
+    if (container.parentNode) container.parentNode.insertBefore(footer, container.nextSibling);
+    else container.appendChild(footer);
+    return footer;
+  }
   let badge = null;
   if (copyright) {
     badge = document.createElement("a");
@@ -1917,17 +1936,17 @@ function createDiagram(opts) {
     badge.rel = "noopener noreferrer";
     badge.textContent = "Powered by Markdy";
     Object.assign(badge.style, {
-      display: "block",
+      display: "inline-flex",
+      alignItems: "center",
       textAlign: "right",
       fontSize: "10px",
       fontFamily: "system-ui, sans-serif",
       color: "#999",
       textDecoration: "none",
-      padding: "3px 6px 0",
+      padding: "0",
       opacity: "0.7"
     });
-    if (container.parentNode) container.parentNode.insertBefore(badge, container.nextSibling);
-    else container.appendChild(badge);
+    ensureFooter().appendChild(badge);
   }
   ensureSceneStyles(document);
   ensureNodeStyles(document);
@@ -2228,6 +2247,7 @@ function createDiagram(opts) {
       resizeObserver.disconnect();
       if (progressEl?.parentNode === viewport) viewport.removeChild(progressEl);
       if (badge?.parentNode) badge.parentNode.removeChild(badge);
+      if (footer?.parentNode) footer.parentNode.removeChild(footer);
       if (viewport.parentNode === container) container.removeChild(viewport);
     }
   };
@@ -2246,16 +2266,16 @@ function createDiagram(opts) {
     button.title = ariaLabel;
     Object.assign(button.style, {
       appearance: "none",
-      border: "1px solid rgba(15, 23, 42, 0.16)",
-      borderRadius: "6px",
-      background: "rgba(255, 255, 255, 0.92)",
-      color: "#111827",
+      border: "1px solid rgba(148, 163, 184, 0.55)",
+      borderRadius: "5px",
+      background: "rgba(248, 250, 252, 0.92)",
+      color: "#475569",
       cursor: "pointer",
-      font: "600 11px/1.2 system-ui, sans-serif",
-      padding: "6px 8px",
-      minWidth: "34px",
+      font: "600 10px/1.1 system-ui, sans-serif",
+      padding: "4px 6px",
+      minWidth: "28px",
       whiteSpace: "nowrap",
-      boxShadow: "0 1px 2px rgba(15, 23, 42, 0.08)"
+      boxShadow: "none"
     });
     return button;
   }
@@ -2265,23 +2285,20 @@ function createDiagram(opts) {
     toolbar.setAttribute("role", "toolbar");
     toolbar.setAttribute("aria-label", "Diagram controls");
     Object.assign(toolbar.style, {
-      position: "absolute",
-      left: "50%",
-      bottom: "10px",
-      zIndex: "10000",
+      position: "static",
       display: "flex",
       alignItems: "center",
-      justifyContent: "center",
+      justifyContent: "flex-end",
       flexWrap: "wrap",
-      gap: "6px",
-      maxWidth: "calc(100% - 20px)",
-      padding: "6px",
-      border: "1px solid rgba(15, 23, 42, 0.12)",
-      borderRadius: "8px",
-      background: "rgba(255, 255, 255, 0.78)",
-      boxShadow: "0 10px 28px rgba(15, 23, 42, 0.16)",
-      backdropFilter: "blur(10px)",
-      transform: "translateX(-50%)",
+      gap: "4px",
+      maxWidth: "100%",
+      padding: "0",
+      border: "0",
+      borderRadius: "0",
+      background: "transparent",
+      boxShadow: "none",
+      backdropFilter: "none",
+      transform: "none",
       pointerEvents: "auto"
     });
     for (const eventName of ["click", "dblclick", "pointerdown", "pointermove", "pointerup", "wheel"]) {
@@ -2313,7 +2330,7 @@ function createDiagram(opts) {
       resetButton.addEventListener("click", resetViewportTransform);
       toolbar.appendChild(resetButton);
     }
-    viewport.appendChild(toolbar);
+    ensureFooter().insertBefore(toolbar, badge ?? null);
     syncControls();
   }
   viewport.style.cursor = interactiveViewport ? "grab" : "pointer";

package/package.json

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