@markdy/renderer-dom 1.0.12 → 1.0.14

package/dist/index.js

@@ -1636,6 +1636,16 @@ function ensureNodeStyles(doc) {
   transform: rotate(0deg);
   clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
 }
+.markdy-node[data-shape="diamond"] .markdy-node__body {
+  justify-content: center;
+  padding: 6px 16%;
+  text-align: center;
+}
+.markdy-node[data-shape="diamond"] .markdy-node__label {
+  flex: 0 1 auto;
+  line-height: 1.18;
+  text-align: center;
+}
 .markdy-node[data-shape="pill"] {
   border-radius: 999px;
   min-height: 54px;
@@ -2100,11 +2110,11 @@ function createNodeEl(node, theme, assets) {
   el.setAttribute("aria-label", el.title);
   const body = document.createElement("div");
   body.className = "markdy-node__body";
-  const icon = createNodeMediaEl(document, node, assets);
   const label = document.createElement("div");
   label.className = "markdy-node__label";
   label.textContent = node.label;
-  body.append(icon, label);
+  if (node.shape !== "diamond") body.append(createNodeMediaEl(document, node, assets));
+  body.append(label);
   const value = node.props?.value ?? node.props?.metric;
   if (value !== void 0 && value !== null) {
     const valueEl = document.createElement("div");
@@ -2493,15 +2503,26 @@ function ensureSceneStyles(doc) {
   will-change: opacity, transform;
 }
 .markdy-footer {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   width: 100%;
   box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 6px 12px;
+  background: var(--md-footer-bg, rgba(15, 23, 42, 0.85));
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-top: 1px solid var(--md-footer-border, rgba(148, 163, 184, 0.15));
+  z-index: 20;
 }
 .markdy-controls {
   display: flex;
   align-items: center;
-  flex-wrap: nowrap;
-  gap: 2.5px;
+  justify-content: flex-start;
+  width: 100%;
+  gap: 8px;
   max-width: 100%;
   overflow-x: auto;
   scrollbar-width: none;
@@ -2509,65 +2530,367 @@ function ensureSceneStyles(doc) {
 .markdy-controls::-webkit-scrollbar {
   display: none;
 }
-@media (max-width: 640px) {
-  .markdy-controls {
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 3px;
-  }
+.markdy-controls-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+.markdy-controls-playback {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+.markdy-controls-timeline {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1 1 180px;
+  min-width: 110px;
+  max-width: 340px;
+}
+.markdy-controls-tools {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+.markdy-control-divider {
+  width: 1px;
+  height: 14px;
+  background: var(--md-divider, rgba(148, 163, 184, 0.2));
+  margin: 0 2px;
+  flex-shrink: 0;
 }
 .markdy-controls button {
   appearance: none;
+  -webkit-appearance: none;
   touch-action: manipulation;
   user-select: none;
   -webkit-user-select: none;
-  border: 1px solid var(--md-control-border, rgba(148, 163, 184, 0.45));
-  border-radius: 5px;
-  background: var(--md-control-bg, rgba(248, 250, 252, 0.92));
-  color: var(--md-control-text, #334155);
+  border: 1px solid var(--md-control-border, rgba(148, 163, 184, 0.2));
+  border-radius: 7px;
+  background: var(--md-control-bg, rgba(255, 255, 255, 0.04));
+  color: var(--md-control-text, #94a3b8);
   cursor: pointer;
-  font: 600 10px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  padding: 2.5px 5.5px;
-  min-height: 23px;
-  min-width: 22px;
+  font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  height: 27px;
+  min-width: 27px;
+  padding: 0 6px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 2px;
+  gap: 5px;
   white-space: nowrap;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
   transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .markdy-controls button:hover:not([aria-pressed="true"]) {
-  background: var(--md-control-hover-bg, #ffffff);
-  color: var(--md-control-hover-text, #0f172a);
-  border-color: var(--md-control-hover-border, #94a3b8);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  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));
+  transform: translateY(-1px);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
 }
 .markdy-controls button[aria-pressed="true"] {
-  background: #0f172a !important;
+  background: var(--accent, #10b981) !important;
   color: #ffffff !important;
-  border-color: #0f172a !important;
-  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25) !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 {
-  outline: 2px solid #3b82f6;
+  outline: 2px solid var(--accent, #10b981);
   outline-offset: 1px;
 }
 .markdy-controls button:active {
   transform: scale(0.95);
 }
-.markdy-control-play::before { content: "\u25B6"; font-size: 7.5px; margin-right: 1px; }
-.markdy-control-play[aria-label*="Pause"]::before,
-.markdy-control-play[title*="Pause"]::before { content: "\u23F8"; font-size: 7.5px; margin-right: 1px; }
-.markdy-control-restart::before { content: "\u21BA"; font-size: 10px; font-weight: 700; margin-right: 1px; }
-.markdy-control-prev-beat::before { content: "\u23EE"; font-size: 7.5px; margin-right: 1px; }
-.markdy-control-next-beat::before { content: "\u23ED"; font-size: 7.5px; margin-right: 1px; }
-.markdy-control-fit::before { content: "\u26F6"; font-size: 8.5px; margin-right: 1px; }
-.markdy-control-reset-view::before { content: "\u2299"; font-size: 8.5px; margin-right: 1px; }
-.markdy-control-fullscreen::before { content: "\u26F6"; font-size: 8.5px; margin-right: 1px; }
-.markdy-control-svg::before { content: "\u{1F4E5}"; font-size: 8.5px; margin-right: 1px; }
-.markdy-control-share::before { content: "\u{1F517}"; font-size: 8.5px; margin-right: 1px; }
+.markdy-icon {
+  display: inline-block;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+.markdy-control-play {
+  background: var(--accent, #10b981) !important;
+  color: #ffffff !important;
+  border-color: var(--accent, #10b981) !important;
+  padding: 0 10px !important;
+  font-weight: 700 !important;
+  box-shadow: 0 2px 8px var(--accent-glow, rgba(16, 185, 129, 0.35)) !important;
+}
+.markdy-control-play:hover {
+  filter: brightness(1.08);
+  box-shadow: 0 2px 12px var(--accent-glow, rgba(16, 185, 129, 0.55)) !important;
+  transform: translateY(-1px) scale(1.02);
+}
+.markdy-badge {
+  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);
+  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;
+}
+.markdy-badge:hover {
+  color: var(--accent, #10b981);
+  background: var(--accent-light, rgba(16, 185, 129, 0.12));
+  border-color: var(--accent, #10b981);
+  transform: translateY(-1px);
+}
+.markdy-speed-group {
+  display: inline-flex;
+  align-items: center;
+  background: var(--md-segmented-bg, rgba(0, 0, 0, 0.18));
+  border: 1px solid var(--md-control-border, rgba(148, 163, 184, 0.18));
+  border-radius: 8px;
+  padding: 2px;
+  gap: 1px;
+}
+.markdy-speed-group .markdy-control-rate {
+  border: none;
+  background: transparent;
+  border-radius: 5px;
+  height: 22px;
+  min-width: 25px;
+  padding: 0 5px;
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--md-control-text, #94a3b8);
+  box-shadow: none;
+}
+.markdy-speed-group .markdy-control-rate:hover:not([aria-pressed="true"]) {
+  background: rgba(255, 255, 255, 0.08);
+  color: #ffffff;
+  transform: none;
+}
+.markdy-speed-group .markdy-control-rate[aria-pressed="true"] {
+  background: var(--accent, #10b981) !important;
+  color: #ffffff !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
+}
+.markdy-control-seek {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  height: 5px;
+  border-radius: 999px;
+  background: linear-gradient(
+    to right,
+    var(--accent, #10b981) 0%,
+    var(--accent, #10b981) var(--seek-pct, 0%),
+    rgba(148, 163, 184, 0.22) var(--seek-pct, 0%),
+    rgba(148, 163, 184, 0.22) 100%
+  );
+  outline: none;
+  cursor: pointer;
+  margin: 0;
+  transition: height 0.15s ease;
+}
+.markdy-control-seek:hover {
+  height: 7px;
+}
+.markdy-control-seek::-webkit-slider-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #ffffff;
+  border: 2px solid var(--accent, #10b981);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.markdy-control-seek:hover::-webkit-slider-thumb {
+  transform: scale(1.25);
+  box-shadow: 0 0 8px var(--accent-glow, rgba(16, 185, 129, 0.6));
+}
+.markdy-control-seek::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #ffffff;
+  border: 2px solid var(--accent, #10b981);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.markdy-control-seek:hover::-moz-range-thumb {
+  transform: scale(1.25);
+  box-shadow: 0 0 8px var(--accent-glow, rgba(16, 185, 129, 0.6));
+}
+.markdy-control-time {
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--md-control-text, #94a3b8);
+  white-space: nowrap;
+  flex-shrink: 0;
+  letter-spacing: -0.02em;
+}
+.markdy-btn-flashed {
+  background: rgba(16, 185, 129, 0.2) !important;
+  color: #10b981 !important;
+  border-color: #10b981 !important;
+}
+/* \u2500\u2500 Code panel overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.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);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  box-sizing: border-box;
+  opacity: 0;
+  animation: markdy-fade-in 0.18s ease forwards;
+}
+.markdy-code-panel-overlay[data-closing="1"] {
+  animation: markdy-fade-out 0.15s ease forwards;
+}
+@keyframes markdy-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes markdy-fade-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+.markdy-code-panel {
+  position: relative;
+  background: #0f172a;
+  border: 1px solid rgba(71, 85, 105, 0.7);
+  border-radius: 12px;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
+  width: 100%;
+  max-width: 780px;
+  max-height: min(680px, 82vh);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transform: translateY(10px) scale(0.98);
+  animation: markdy-panel-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+.markdy-code-panel-overlay[data-closing="1"] .markdy-code-panel {
+  animation: markdy-panel-out 0.15s ease forwards;
+}
+@keyframes markdy-panel-in {
+  from { transform: translateY(12px) scale(0.97); opacity: 0; }
+  to   { transform: translateY(0) scale(1);       opacity: 1; }
+}
+@keyframes markdy-panel-out {
+  from { transform: translateY(0) scale(1);       opacity: 1; }
+  to   { transform: translateY(8px) scale(0.98);  opacity: 0; }
+}
+.markdy-code-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px 10px;
+  border-bottom: 1px solid rgba(71, 85, 105, 0.4);
+  flex-shrink: 0;
+}
+.markdy-code-panel__title {
+  font: 600 12px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  color: #94a3b8;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.markdy-code-panel__actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.markdy-code-panel__copy,
+.markdy-code-panel__playground,
+.markdy-code-panel__close {
+  appearance: none;
+  border: 1px solid rgba(71, 85, 105, 0.55);
+  border-radius: 6px;
+  background: rgba(30, 41, 59, 0.8);
+  color: #94a3b8;
+  cursor: pointer;
+  font: 600 10.5px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  text-decoration: none;
+  padding: 3px 9px;
+  min-height: 24px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+}
+.markdy-code-panel__playground {
+  background: var(--accent-light, rgba(16, 185, 129, 0.15));
+  color: var(--accent, #10b981);
+  border-color: var(--accent, #10b981);
+  font-weight: 700;
+}
+.markdy-code-panel__playground:hover {
+  background: var(--accent, #10b981);
+  color: #ffffff;
+  border-color: var(--accent, #10b981);
+  transform: translateY(-1px);
+}
+.markdy-code-panel__copy:hover,
+.markdy-code-panel__close:hover {
+  background: rgba(51, 65, 85, 0.95);
+  color: #e2e8f0;
+  border-color: #64748b;
+}
+.markdy-code-panel__copy:focus-visible,
+.markdy-code-panel__playground:focus-visible,
+.markdy-code-panel__close:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 1px;
+}
+.markdy-code-panel__body {
+  overflow-y: auto;
+  flex: 1 1 auto;
+  padding: 16px 20px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(71, 85, 105, 0.5) transparent;
+}
+.markdy-code-panel__body::-webkit-scrollbar {
+  width: 5px;
+}
+.markdy-code-panel__body::-webkit-scrollbar-track {
+  background: transparent;
+}
+.markdy-code-panel__body::-webkit-scrollbar-thumb {
+  background: rgba(71, 85, 105, 0.5);
+  border-radius: 9999px;
+}
+.markdy-code-panel__pre {
+  margin: 0;
+  font: 400 12.5px/1.65 "JetBrains Mono", ui-monospace, "Cascadia Code", "Fira Code", monospace;
+  color: #e2e8f0;
+  white-space: pre;
+  tab-size: 2;
+  overflow-x: auto;
+}
+/* Syntax tinting \u2014 purely decorative, lightweight regex-free colorization */
+.markdy-code-panel__pre .t-keyword  { color: #7dd3fc; }
+.markdy-code-panel__pre .t-string   { color: #86efac; }
+.markdy-code-panel__pre .t-comment  { color: #64748b; font-style: italic; }
+.markdy-code-panel__pre .t-edge     { color: #f9a8d4; }
+.markdy-code-panel__pre .t-number   { color: #fcd34d; }
 .markdy-control-rate {
   font-family: "JetBrains Mono", monospace, system-ui;
   font-size: 9px;
@@ -2839,7 +3162,9 @@ function createDiagram(opts) {
     resetView: resetViewButton,
     fullscreen: fullscreenButton,
     svg: svgButton,
-    share: shareButton
+    share: shareButton,
+    code: codeButton,
+    theme: themeButton
   } = player.controls;
   const copyright = player.chrome.badge;
   const progressMode = player.chrome.progress;
@@ -2916,22 +3241,13 @@ function createDiagram(opts) {
   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.textContent = "Powered by Markdy";
-    Object.assign(badge.style, {
-      display: "inline-flex",
-      alignItems: "center",
-      textAlign: "right",
-      fontSize: "10px",
-      fontFamily: "system-ui, sans-serif",
-      color: "#999",
-      textDecoration: "none",
-      padding: "0",
-      opacity: "0.7",
-      marginLeft: "auto"
-    });
+    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);
@@ -2973,7 +3289,7 @@ function createDiagram(opts) {
   Object.assign(structuralEdgeHost.style, {
     position: "absolute",
     inset: "0",
-    zIndex: "45",
+    zIndex: "55",
     pointerEvents: "none"
   });
   cameraLayer.appendChild(structuralEdgeHost);
@@ -3159,8 +3475,24 @@ function createDiagram(opts) {
   let controlsPlayButton = null;
   let controlsRateButtons = [];
   let controlsSeekBar = null;
+  let controlsTimeEl = null;
   let controlsFitButton = null;
   let fitViewActive = false;
+  const ICONS2 = {
+    play: '<svg class="markdy-icon" width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>',
+    pause: '<svg class="markdy-icon" width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>',
+    restart: '<svg class="markdy-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>',
+    prevBeat: '<svg class="markdy-icon" width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6 8.5 6V6z"/></svg>',
+    nextBeat: '<svg class="markdy-icon" width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>',
+    fit: '<svg class="markdy-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>',
+    resetView: '<svg class="markdy-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/></svg>',
+    fullscreen: '<svg class="markdy-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>',
+    svg: '<svg class="markdy-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>',
+    share: '<svg class="markdy-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>',
+    code: '<svg class="markdy-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>',
+    theme: '<svg class="markdy-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 3v18"/><path d="M12 3a9 9 0 0 1 0 18z" fill="currentColor"/></svg>',
+    check: '<svg class="markdy-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>'
+  };
   function applyViewportTransform() {
     viewportTransform.style.transform = `translate(${viewportPanX}px, ${viewportPanY}px) scale(${viewportScale})`;
   }
@@ -3247,7 +3579,7 @@ function createDiagram(opts) {
   function syncControls() {
     if (controlsPlayButton) {
       const playing = isPlaying;
-      controlsPlayButton.textContent = playing ? "Pause" : "Play";
+      controlsPlayButton.innerHTML = `${playing ? ICONS2.pause : ICONS2.play}${playing ? "Pause" : "Play"}`;
       const playLabel = playing ? "Pause diagram" : "Play diagram";
       controlsPlayButton.setAttribute("aria-label", playLabel);
       controlsPlayButton.title = playLabel;
@@ -3257,7 +3589,16 @@ function createDiagram(opts) {
       const active = Math.abs(rate - playbackRate) < 1e-3;
       button.setAttribute("aria-pressed", active ? "true" : "false");
     }
-    if (controlsSeekBar) controlsSeekBar.value = String(sceneMs / 1e3);
+    if (controlsSeekBar) {
+      controlsSeekBar.value = String(sceneMs / 1e3);
+      const pct = totalDurationMs > 0 ? sceneMs / totalDurationMs * 100 : 0;
+      controlsSeekBar.style.setProperty("--seek-pct", `${pct}%`);
+    }
+    if (controlsTimeEl) {
+      const cur = (sceneMs / 1e3).toFixed(1);
+      const tot = durationSeconds.toFixed(1);
+      controlsTimeEl.textContent = `${cur}s / ${tot}s`;
+    }
     if (controlsFitButton) {
       controlsFitButton.setAttribute("aria-pressed", fitViewActive ? "true" : "false");
     }
@@ -3367,17 +3708,21 @@ function createDiagram(opts) {
       diagram.play();
     }
   }
-  function makeControlButton(label, ariaLabel) {
+  function makeControlButton(label, ariaLabel, iconSvg) {
     const button = document.createElement("button");
     button.type = "button";
-    button.textContent = label;
     button.setAttribute("aria-label", ariaLabel);
     button.title = ariaLabel;
+    if (iconSvg) {
+      button.innerHTML = `${iconSvg}${label}`;
+    } else {
+      button.textContent = label;
+    }
     return button;
   }
   function mountPlayControl(toolbar) {
     if (!playButton) return;
-    controlsPlayButton = makeControlButton("Play", "Play diagram");
+    controlsPlayButton = makeControlButton("Play", "Play diagram", ICONS2.play);
     controlsPlayButton.className = "markdy-control-play";
     controlsPlayButton.addEventListener("click", togglePlayback);
     toolbar.appendChild(controlsPlayButton);
@@ -3386,14 +3731,15 @@ function createDiagram(opts) {
     const wanted = position === "prev" ? prevBeatButton : nextBeatButton;
     if (!wanted || plan.beats.length < 2) return;
     const label = position === "prev" ? "Prev" : "Next";
-    const button = makeControlButton(label, `${label === "Prev" ? "Previous" : "Next"} beat`);
+    const icon = position === "prev" ? ICONS2.prevBeat : ICONS2.nextBeat;
+    const button = makeControlButton(label, `${label === "Prev" ? "Previous" : "Next"} beat`, icon);
     button.className = `markdy-control-${position}-beat`;
     button.addEventListener("click", () => position === "prev" ? diagram.prevBeat() : diagram.nextBeat());
     toolbar.appendChild(button);
   }
   function mountRestartControl(toolbar) {
     if (!restartButton) return;
-    const button = makeControlButton("Restart", "Restart diagram");
+    const button = makeControlButton("Restart", "Restart diagram", ICONS2.restart);
     button.className = "markdy-control-restart";
     button.addEventListener("click", () => {
       diagram.seek(0);
@@ -3413,6 +3759,10 @@ function createDiagram(opts) {
     controlsSeekBar.setAttribute("aria-label", "Seek diagram timeline");
     controlsSeekBar.addEventListener("input", () => diagram.seek(Number(controlsSeekBar?.value ?? 0)));
     toolbar.appendChild(controlsSeekBar);
+    controlsTimeEl = document.createElement("span");
+    controlsTimeEl.className = "markdy-control-time";
+    controlsTimeEl.textContent = `${(sceneMs / 1e3).toFixed(1)}s / ${durationSeconds.toFixed(1)}s`;
+    toolbar.appendChild(controlsTimeEl);
   }
   function mountSpeedControls(toolbar) {
     if (!speedControls) return;
@@ -3427,11 +3777,14 @@ function createDiagram(opts) {
     });
   }
   function flashControlLabel(button, message) {
-    const original = button.textContent ?? "";
-    button.textContent = message;
+    const originalHtml = button.innerHTML;
+    const isSuccess = !message.toLowerCase().includes("fail");
+    button.innerHTML = isSuccess ? `${ICONS2.check}${message}` : message;
+    button.classList.add("markdy-btn-flashed");
     setTimeout(() => {
-      button.textContent = original;
-    }, 1400);
+      button.innerHTML = originalHtml;
+      button.classList.remove("markdy-btn-flashed");
+    }, 1500);
   }
   function downloadFile(filename, contents, type) {
     const blob = new Blob([contents], { type });
@@ -3447,7 +3800,7 @@ function createDiagram(opts) {
   }
   function mountSvgControl(toolbar) {
     if (!svgButton) return;
-    const button = makeControlButton("SVG", "Export diagram as SVG");
+    const button = makeControlButton("SVG", "Export diagram as SVG", ICONS2.svg);
     button.className = "markdy-control-svg";
     button.addEventListener("click", async () => {
       const resumeAt = sceneMs;
@@ -3459,6 +3812,7 @@ function createDiagram(opts) {
         const svg = exportDiagramAsVectorSvg2(container);
         const name = (plan.title || "markdy-diagram").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
         downloadFile(`${name || "markdy-diagram"}.svg`, svg, "image/svg+xml");
+        flashControlLabel(button, "Saved");
       } catch (error) {
         onWarning({ severity: "warning", message: `SVG export failed: ${String(error)}`, line: 0 });
         flashControlLabel(button, "Failed");
@@ -3471,7 +3825,7 @@ function createDiagram(opts) {
   }
   function mountShareControl(toolbar) {
     if (!shareButton) return;
-    const button = makeControlButton("Share", "Copy a share link for this diagram");
+    const button = makeControlButton("Share", "Copy a share link for this diagram", ICONS2.share);
     button.className = "markdy-control-share";
     button.addEventListener("click", async () => {
       try {
@@ -3486,9 +3840,132 @@ function createDiagram(opts) {
     });
     toolbar.appendChild(button);
   }
+  function mountThemeControl(toolbar) {
+    if (!themeButton) return;
+    const button = makeControlButton("Theme", "Toggle dark/light theme palette", ICONS2.theme);
+    button.className = "markdy-control-theme";
+    button.addEventListener("click", () => {
+      const darkThemes = ["midnight", "blueprint", "graphite", "nebula", "terminal"];
+      const lightThemes = ["paper", "editorial", "sketchy"];
+      const currentName = plan.theme.name || "paper";
+      const isDark = darkThemes.includes(currentName);
+      const targetThemes = isDark ? lightThemes : darkThemes;
+      const nextTheme = targetThemes[Math.floor(Math.random() * targetThemes.length)];
+      flashControlLabel(button, nextTheme);
+      container.dispatchEvent(
+        new CustomEvent("markdy-theme-switch", {
+          bubbles: true,
+          detail: { theme: nextTheme, isDark: !isDark }
+        })
+      );
+    });
+    toolbar.appendChild(button);
+  }
+  function tintCode(raw) {
+    return raw.split("\n").map((line) => {
+      if (/^\s*\/\//.test(line)) {
+        return `<span class="t-comment">${escHtml(line)}</span>`;
+      }
+      line = line.replace(/(->|<-|~>|--|<~)/g, '<span class="t-edge">$1</span>');
+      line = line.replace(/"([^"]*)"/g, '"<span class="t-string">$1</span>"');
+      line = line.replace(
+        /^(\s*)(scene|beat|group|player|show|frame|glow|focus|layout|edge|annotation|start|end|decision|service|browser|gateway|database|cache|queue|worker|function|pod|user|client|hub|station|metric|mobile)\b/,
+        '$1<span class="t-keyword">$2</span>'
+      );
+      line = line.replace(/\b(\d[\d.]*(?:ms|px|s)?)\b/g, '<span class="t-number">$1</span>');
+      return line;
+    }).join("\n");
+  }
+  function escHtml(str) {
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
+  function mountCodeControl(toolbar) {
+    if (!codeButton) return;
+    const button = makeControlButton("Code", "View MarkdyScript source");
+    button.className = "markdy-control-code";
+    button.setAttribute("aria-haspopup", "dialog");
+    button.addEventListener("click", () => {
+      const overlay = document.createElement("div");
+      overlay.className = "markdy-code-panel-overlay";
+      overlay.setAttribute("role", "dialog");
+      overlay.setAttribute("aria-modal", "true");
+      overlay.setAttribute("aria-label", "MarkdyScript source code");
+      const panel = document.createElement("div");
+      panel.className = "markdy-code-panel";
+      const header = document.createElement("div");
+      header.className = "markdy-code-panel__header";
+      const title = document.createElement("div");
+      title.className = "markdy-code-panel__title";
+      title.textContent = "MarkdyScript source";
+      const actions = document.createElement("div");
+      actions.className = "markdy-code-panel__actions";
+      const copyBtn = document.createElement("button");
+      copyBtn.type = "button";
+      copyBtn.className = "markdy-code-panel__copy";
+      copyBtn.textContent = "Copy";
+      copyBtn.setAttribute("aria-label", "Copy source code to clipboard");
+      copyBtn.addEventListener("click", async () => {
+        try {
+          await navigator.clipboard.writeText(code);
+          copyBtn.textContent = "Copied \u2713";
+          setTimeout(() => {
+            copyBtn.textContent = "Copy";
+          }, 1800);
+        } catch {
+          copyBtn.textContent = "Failed";
+          setTimeout(() => {
+            copyBtn.textContent = "Copy";
+          }, 1800);
+        }
+      });
+      const playgroundBtn = document.createElement("a");
+      playgroundBtn.className = "markdy-code-panel__playground";
+      playgroundBtn.href = `${shareUrl ?? MARKDY_PLAYGROUND_URL}#code=${encodeCodeForPlaygroundHash(code)}`;
+      playgroundBtn.target = "_blank";
+      playgroundBtn.rel = "noopener noreferrer";
+      playgroundBtn.textContent = "Open in Studio \u2197";
+      playgroundBtn.setAttribute("aria-label", "Open diagram in Markdy Studio playground");
+      const closeBtn = document.createElement("button");
+      closeBtn.type = "button";
+      closeBtn.className = "markdy-code-panel__close";
+      closeBtn.textContent = "\u2715 Close";
+      closeBtn.setAttribute("aria-label", "Close code panel");
+      actions.append(copyBtn, playgroundBtn, closeBtn);
+      header.append(title, actions);
+      const body = document.createElement("div");
+      body.className = "markdy-code-panel__body";
+      const pre = document.createElement("pre");
+      pre.className = "markdy-code-panel__pre";
+      pre.innerHTML = tintCode(code);
+      body.appendChild(pre);
+      panel.append(header, body);
+      overlay.appendChild(panel);
+      document.body.appendChild(overlay);
+      closeBtn.focus();
+      function closePanel() {
+        overlay.dataset.closing = "1";
+        overlay.addEventListener("animationend", () => overlay.remove(), { once: true });
+      }
+      closeBtn.addEventListener("click", closePanel);
+      overlay.addEventListener("click", (e) => {
+        if (e.target === overlay) closePanel();
+      });
+      function handleEscape(e) {
+        if (e.key === "Escape") {
+          closePanel();
+          document.removeEventListener("keydown", handleEscape);
+        }
+      }
+      document.addEventListener("keydown", handleEscape);
+      overlay.addEventListener("animationend", () => {
+        if (overlay.dataset.closing === "1") document.removeEventListener("keydown", handleEscape);
+      }, { once: true });
+    });
+    toolbar.appendChild(button);
+  }
   function mountFitControl(toolbar) {
     if (!fitViewButton) return;
-    controlsFitButton = makeControlButton("Fit", "Fit all items in view and ignore camera zoom");
+    controlsFitButton = makeControlButton("Fit", "Fit all items in view and ignore camera zoom", ICONS2.fit);
     controlsFitButton.className = "markdy-control-fit";
     controlsFitButton.setAttribute("aria-pressed", "false");
     controlsFitButton.addEventListener("click", toggleFitView);
@@ -3496,14 +3973,14 @@ function createDiagram(opts) {
   }
   function mountResetViewControl(toolbar) {
     if (!resetViewButton) return;
-    const button = makeControlButton("Reset", "Reset diagram view");
+    const button = makeControlButton("Reset", "Reset diagram view", ICONS2.resetView);
     button.className = "markdy-control-reset-view";
     button.addEventListener("click", resetViewportTransform);
     toolbar.appendChild(button);
   }
   function mountFullscreenControl(toolbar) {
     if (!fullscreenButton) return;
-    const button = makeControlButton("Full", "Toggle fullscreen view");
+    const button = makeControlButton("Full", "Toggle fullscreen view", ICONS2.fullscreen);
     button.className = "markdy-control-fullscreen";
     button.setAttribute("aria-pressed", "false");
     const host = container.parentElement ?? container;
@@ -3584,17 +4061,49 @@ function createDiagram(opts) {
     for (const eventName of ["click", "dblclick", "pointerdown", "pointermove", "pointerup", "wheel"]) {
       toolbar.addEventListener(eventName, (event) => event.stopPropagation());
     }
-    mountPlayControl(toolbar);
-    mountBeatNavControls(toolbar, "prev");
-    mountBeatNavControls(toolbar, "next");
-    mountRestartControl(toolbar);
-    mountSeekControl(toolbar);
-    mountSpeedControls(toolbar);
-    mountFitControl(toolbar);
-    mountResetViewControl(toolbar);
-    mountFullscreenControl(toolbar);
-    mountSvgControl(toolbar);
-    mountShareControl(toolbar);
+    const playbackGroup = document.createElement("div");
+    playbackGroup.className = "markdy-controls-group markdy-controls-playback";
+    mountPlayControl(playbackGroup);
+    mountBeatNavControls(playbackGroup, "prev");
+    mountBeatNavControls(playbackGroup, "next");
+    mountRestartControl(playbackGroup);
+    if (playbackGroup.children.length > 0) toolbar.appendChild(playbackGroup);
+    if (seekBar) {
+      const timelineGroup = document.createElement("div");
+      timelineGroup.className = "markdy-controls-group markdy-controls-timeline";
+      mountSeekControl(timelineGroup);
+      toolbar.appendChild(timelineGroup);
+    }
+    const toolsGroup = document.createElement("div");
+    toolsGroup.className = "markdy-controls-group markdy-controls-tools";
+    if (speedControls) {
+      const speedGroup = document.createElement("div");
+      speedGroup.className = "markdy-speed-group";
+      mountSpeedControls(speedGroup);
+      toolsGroup.appendChild(speedGroup);
+    }
+    if (fitViewButton || resetViewButton || fullscreenButton) {
+      if (toolsGroup.children.length > 0) {
+        const divider = document.createElement("div");
+        divider.className = "markdy-control-divider";
+        toolsGroup.appendChild(divider);
+      }
+      mountFitControl(toolsGroup);
+      mountResetViewControl(toolsGroup);
+      mountFullscreenControl(toolsGroup);
+    }
+    if (svgButton || shareButton || codeButton || themeButton) {
+      if (toolsGroup.children.length > 0) {
+        const divider = document.createElement("div");
+        divider.className = "markdy-control-divider";
+        toolsGroup.appendChild(divider);
+      }
+      mountThemeControl(toolsGroup);
+      mountSvgControl(toolsGroup);
+      mountShareControl(toolsGroup);
+      mountCodeControl(toolsGroup);
+    }
+    if (toolsGroup.children.length > 0) toolbar.appendChild(toolsGroup);
     ensureFooter().insertBefore(toolbar, badge ?? null);
     syncControls();
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "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.12"
+    "@markdy/core": "1.0.14"
   },
   "devDependencies": {
     "jsdom": "^29.1.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.7",
-    "@markdy/stdlib-systems": "1.0.12"
+    "@markdy/stdlib-systems": "1.0.14"
   },
   "scripts": {
     "build": "tsup",