@markdy/renderer-dom 0.8.18 → 0.8.20

package/README.md

@@ -70,18 +70,21 @@ diagram.destroy();    // clean up DOM + cancel animations
 |---|---|---|---|
 | `container` | `HTMLElement` | *(required)* | DOM element to mount the scene into |
 | `code` | `string` | *(required)* | MarkdyScript source code |
-| `autoplay` | `boolean` | `true` | Start playing immediately |
-| `loop` | `boolean` | `true` | Loop the animation when it reaches the end |
-| `copyright` | `boolean` | `true` | Show a small "Powered by Markdy" badge below the animation |
-| `progressBar` | `boolean` | `true` | Deprecated compatibility flag for the rainbow scene-boundary progress bar |
-| `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; also enables viewport interaction |
+| `autoplay` | `boolean` | `plan.meta.autoplay ?? true` | Start playing immediately |
+| `loop` | `boolean` | `plan.meta.loop ?? true` | Loop the animation when it reaches the end |
+| `copyright` | `boolean` | `plan.meta.copyright ?? true` | Show a small "Powered by Markdy" badge below the animation |
+| `progressBar` | `boolean \| string` | `true` | Deprecated compatibility flag for the scene-boundary progress bar |
+| `sceneBoundaryProgress` | `boolean \| string` | `true` | Show boundary progress bar, or pass a custom color/gradient string |
+| `progressColor` | `string` | `plan.meta.progressColor ?? "rainbow"` | Custom progress bar color (e.g. `"#3b82f6"`) or gradient (e.g. `"#ec4899, #8b5cf6"`) |
+| `playbackRate` | `number` | `plan.meta.playbackRate ?? 1` | Normalized timeline speed multiplier; `1` is Markdy's normal pace |
+| `interactiveViewport` | `boolean` | `controls \|\| plan.meta.interactiveViewport` | Enable wheel zoom and drag pan on the rendered viewport |
+| `controls` | `boolean` | `plan.meta.controls ?? false` | Show left-aligned footer controls toolbar (play/pause, restart, speed, reset view); 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 |
 
+> **Note:** Directives declared inside the MarkdyScript code (e.g. `controls true`, `interactive true`, `progressColor "#3b82f6"`) apply automatically if the corresponding JavaScript option is omitted (`undefined`). Options passed to `createDiagram()` override the in-script declarations.
+
 ### `Diagram`
 
 | Method | Description |

package/dist/index.d.ts

@@ -17,9 +17,13 @@ interface DiagramOptions {
      */
     assets?: Record<string, string>;
     /** @deprecated Prefer sceneBoundaryProgress. */
-    progressBar?: boolean;
-    /** Show rainbow progress around scene boundary. Defaults to true. */
-    sceneBoundaryProgress?: boolean;
+    progressBar?: boolean | string;
+    /** Show rainbow progress around scene boundary, or specify a custom color/gradient. Defaults to true. */
+    sceneBoundaryProgress?: boolean | string;
+    /** Custom progress bar color or gradient. Defaults to rainbow. */
+    progressColor?: string;
+    /** @deprecated Prefer progressColor. */
+    progressBarColor?: string;
     /** Playback speed multiplier. Defaults to 1, where 1 is Markdy's normal pace. */
     playbackRate?: number;
     /** Enable wheel zoom and drag pan on the rendered viewport. Defaults to false. */

package/dist/index.js

@@ -1769,6 +1769,34 @@ function ensureSceneStyles(doc) {
   transform: translateY(8px);
   will-change: opacity, transform;
 }
+.markdy-footer {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+.markdy-controls button {
+  touch-action: manipulation;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
+}
+.markdy-controls button:hover:not([aria-pressed="true"]) {
+  background: rgba(241, 245, 249, 1);
+  color: #1e293b;
+  border-color: rgba(100, 116, 139, 0.6);
+}
+.markdy-controls button:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 1px;
+}
+.markdy-controls button:active {
+  transform: scale(0.96);
+}
+.markdy-footer a {
+  transition: opacity 0.15s ease, color 0.15s ease;
+}
+.markdy-footer a:hover {
+  opacity: 1 !important;
+  color: #64748b !important;
+}
 `;
   doc.head.appendChild(style);
 }
@@ -1856,24 +1884,36 @@ function createDiagram(opts) {
   const {
     container,
     code,
-    autoplay = true,
-    loop = true,
-    copyright = true,
     assets,
     progressBar,
     sceneBoundaryProgress,
-    playbackRate: initialPlaybackRate = DEFAULT_PLAYBACK_RATE,
-    controls = false,
-    interactiveViewport = controls,
+    progressColor,
+    progressBarColor,
+    playbackRate: initialPlaybackRate,
+    controls: explicitControls,
+    interactiveViewport: explicitInteractiveViewport,
+    autoplay: explicitAutoplay,
+    loop: explicitLoop,
+    copyright: explicitCopyright,
     onWarning = (w) => console.warn(`[markdy] line ${w.line}: ${w.message}`),
     onTimeUpdate,
     onPlayStateChange
   } = opts;
-  const showSceneBoundaryProgress = sceneBoundaryProgress ?? progressBar ?? true;
   const { ast, plan } = parseAndCompile(code);
   for (const w of ast.diagnostics) {
     if (w.severity === "warning") onWarning(w);
   }
+  const controls = explicitControls ?? plan.meta.controls ?? false;
+  const interactiveViewport = explicitInteractiveViewport ?? (explicitControls !== void 0 ? explicitControls : plan.meta.interactiveViewport ?? plan.meta.controls ?? false);
+  const autoplay = explicitAutoplay ?? plan.meta.autoplay ?? true;
+  const loop = explicitLoop ?? plan.meta.loop ?? true;
+  const copyright = explicitCopyright ?? plan.meta.copyright ?? true;
+  const rawPlaybackRate = initialPlaybackRate ?? plan.meta.playbackRate ?? DEFAULT_PLAYBACK_RATE;
+  let playbackRate = Number.isFinite(rawPlaybackRate) && rawPlaybackRate > 0 ? rawPlaybackRate : DEFAULT_PLAYBACK_RATE;
+  const showSceneBoundaryProgress = sceneBoundaryProgress === false || sceneBoundaryProgress === void 0 && progressBar === false ? false : plan.meta.progressColor === "none" ? false : true;
+  const rawColor = progressColor ?? progressBarColor ?? (typeof sceneBoundaryProgress === "string" && sceneBoundaryProgress !== "true" && sceneBoundaryProgress !== "false" ? sceneBoundaryProgress : typeof progressBar === "string" && progressBar !== "true" && progressBar !== "false" ? progressBar : void 0) ?? (plan.meta.progressColor && plan.meta.progressColor !== "none" ? plan.meta.progressColor : void 0);
+  const customColor = rawColor && rawColor.trim() !== "rainbow" ? rawColor.trim() : null;
+  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;
   const viewport = document.createElement("div");
@@ -1901,14 +1941,33 @@ function createDiagram(opts) {
   function updateProgressBar(pct) {
     if (!progressEl) return;
     const deg = pct * 360;
-    const 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%)";
-    progressEl.style.background = `conic-gradient(from ${tlAngleNorm}deg, ${rainbow} ${deg}deg, transparent ${deg}deg)`;
+    const colorStops = customColor ? customColor.includes(",") ? customColor : `${customColor} 0deg, ${customColor}` : DEFAULT_RAINBOW;
+    progressEl.style.background = `conic-gradient(from ${tlAngleNorm}deg, ${colorStops} ${deg}deg, transparent ${deg}deg)`;
     progressEl.style.mask = "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)";
     progressEl.style.webkitMask = progressEl.style.mask;
     progressEl.style.maskComposite = "exclude";
     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: "space-between",
+      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 +1976,18 @@ 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",
-      opacity: "0.7"
+      padding: "0",
+      opacity: "0.7",
+      marginLeft: "auto"
     });
-    if (container.parentNode) container.parentNode.insertBefore(badge, container.nextSibling);
-    else container.appendChild(badge);
+    ensureFooter().appendChild(badge);
   }
   ensureSceneStyles(document);
   ensureNodeStyles(document);
@@ -2061,7 +2121,6 @@ function createDiagram(opts) {
     anim.currentTime = 0;
   }
   let sceneMs = 0;
-  let playbackRate = Number.isFinite(initialPlaybackRate) && initialPlaybackRate > 0 ? initialPlaybackRate : DEFAULT_PLAYBACK_RATE;
   let lastRafTs = null;
   let isPlaying = false;
   let rafId = null;
@@ -2139,15 +2198,19 @@ function createDiagram(opts) {
   }
   function syncControls() {
     if (controlsPlayButton) {
-      controlsPlayButton.textContent = isPlaying ? "Pause" : "Play";
-      controlsPlayButton.setAttribute("aria-label", isPlaying ? "Pause diagram" : "Play diagram");
+      const playing = isPlaying;
+      controlsPlayButton.textContent = playing ? "Pause" : "Play";
+      const playLabel = playing ? "Pause diagram" : "Play diagram";
+      controlsPlayButton.setAttribute("aria-label", playLabel);
+      controlsPlayButton.title = playLabel;
     }
     for (const button of controlsRateButtons) {
       const rate = Number(button.dataset.rate ?? "1");
       const active = Math.abs(rate - playbackRate) < 1e-3;
       button.setAttribute("aria-pressed", active ? "true" : "false");
-      button.style.background = active ? "rgba(15, 23, 42, 0.92)" : "rgba(255, 255, 255, 0.92)";
-      button.style.color = active ? "#ffffff" : "#111827";
+      button.style.background = active ? "#1e293b" : "rgba(248, 250, 252, 0.92)";
+      button.style.color = active ? "#ffffff" : "#475569";
+      button.style.borderColor = active ? "#0f172a" : "rgba(148, 163, 184, 0.55)";
     }
   }
   function emitPlayStateChange(playing) {
@@ -2228,6 +2291,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 +2310,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 +2329,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-start",
       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 +2374,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.18",
+  "version": "0.8.20",
   "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.18"
+    "@markdy/core": "0.8.20"
   },
   "devDependencies": {
     "jsdom": "^29.1.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.7",
-    "@markdy/stdlib-systems": "0.8.18"
+    "@markdy/stdlib-systems": "0.8.20"
   },
   "scripts": {
     "build": "tsup",