@markdy/renderer-dom 1.0.18 → 1.0.19

package/README.md

@@ -13,7 +13,7 @@ Web Animations API renderer for [MarkdyScript](../../docs/SYNTAX.md) scenes. Tra
 - **Seek-safe** — manual `currentTime` control enables reliable `seek()` in any direction
 - **Playback-rate controls** — set normalized timeline speed to slow down or speed up diagrams without rebuilding animations
 - **Interactive viewport** — opt into wheel zoom and drag pan while click-to-pause stays available
-- **Embed controls** — opt into a compact playback toolbar with restart, speed, and view reset controls
+- **Embed controls** — opt into only the playback, timeline, viewport, export, and sharing controls a scene needs
 - **Semantic themes** — `paper`, `editorial`, `nebula`, `midnight`, `blueprint`, and `graphite`, with per-role node and edge colors
 - **Single dependency** — only `@markdy/core`
 
@@ -70,21 +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` | `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 |
+| `autoplay` | `boolean` | `player.playback.autoplay ?? true` | Override whether playback starts immediately |
+| `loop` | `boolean` | `player.playback.loop ?? true` | Override whether playback loops at the end |
+| `copyright` | `boolean` | `player.chrome.badge ?? true` | Show the linked badge at the footer's right edge |
 | `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 \|\| player.interaction` | Enable wheel zoom and drag pan on the rendered viewport |
-| `controls` | `boolean` | `player.controls` | Show the footer toolbar (play, prev/next beat, restart, seek, speed, fit, reset view, SVG, share); also enables viewport interaction |
+| `sceneBoundaryProgress` | `boolean \| string` | `player.chrome.progress` | Override boundary progress, or pass a custom color/gradient |
+| `progressColor` | `string` | `player.chrome.color` or rainbow | Override the progress color or gradient |
+| `playbackRate` | `number` | `player.playback.rate ?? 1` | Override the initial timeline multiplier |
+| `interactiveViewport` | `boolean` | `player.interaction` | `true` supplies default gestures; `false` suppresses script gestures |
+| `controls` | `boolean` | `player.controls` | `true` supplies legacy toolbar defaults; `false` suppresses script controls |
 | `shareUrl` | `string` | Markdy playground | Base URL used by the Share control when building `#code=` links |
 | `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.
+> **Note:** Prefer grouped `player:` configuration in MarkdyScript. Omitted host options preserve it; host `false` suppresses controls or interaction, while host `true` supplies legacy defaults for leaves the script does not set. A speed selector renders only with at least two distinct positive `speeds` values.
 
 ### `Diagram`
 

package/dist/index.d.ts

@@ -26,11 +26,11 @@ interface DiagramOptions {
     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. */
+    /** Host interaction override. `true` enables default gestures; `false` suppresses script interaction. */
     interactiveViewport?: boolean;
     /** Base URL for the Share control. Defaults to the Markdy playground. */
     shareUrl?: string;
-    /** Show built-in playback and viewport controls. Also enables viewport interaction. Defaults to false. */
+    /** Host controls override. `true` enables the legacy default set; `false` suppresses script controls. */
     controls?: boolean;
     onWarning?: (warning: Diagnostic) => void;
     onTimeUpdate?: (seconds: number, durationSeconds: number) => void;

package/dist/index.js

@@ -2511,6 +2511,7 @@ function ensureSceneStyles(doc) {
   justify-content: space-between;
   gap: 8px;
   padding: 6px 12px;
+  color: var(--md-text, #f8fafc);
   background: var(--md-footer-bg, rgba(15, 23, 42, 0.85));
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
@@ -2521,7 +2522,9 @@ function ensureSceneStyles(doc) {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  width: 100%;
+  flex: 1 1 auto;
+  width: auto;
+  min-width: 0;
   gap: 8px;
   max-width: 100%;
   overflow-x: auto;
@@ -2555,7 +2558,6 @@ function ensureSceneStyles(doc) {
   align-items: center;
   gap: 4px;
   flex-shrink: 0;
-  margin-left: auto;
 }
 .markdy-control-divider {
   width: 1px;
@@ -2626,37 +2628,24 @@ function ensureSceneStyles(doc) {
   transform: translateY(-1px) scale(1.02);
 }
 .markdy-badge {
-  position: absolute;
-  top: 10px;
-  right: 12px;
-  z-index: 25;
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  text-align: right;
+  font-family: system-ui, sans-serif;
   font-size: 10px;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  color: var(--md-text-muted, #94a3b8);
+  font-weight: 400;
+  color: var(--md-control-text, #94a3b8);
   text-decoration: none;
-  padding: 2.5px 7px;
-  border-radius: 5px;
-  background: var(--md-surface, rgba(15, 23, 42, 0.45));
-  border: 1px solid var(--md-border, rgba(148, 163, 184, 0.15));
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-  opacity: 0.65;
-  transition: all 0.2s ease;
-  pointer-events: auto;
-  user-select: none;
+  padding: 0;
+  opacity: 0.7;
+  margin-left: auto;
+  flex-shrink: 0;
+  transition: opacity 0.15s ease, color 0.15s ease;
+  white-space: nowrap;
 }
 .markdy-badge:hover {
   opacity: 1;
-  color: var(--accent, #10b981);
-  border-color: var(--accent, #10b981);
-  background: var(--md-surface-raised, rgba(15, 23, 42, 0.75));
-  transform: translateY(-1px);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+  color: var(--md-text, #f8fafc);
 }
 .markdy-speed-group {
   display: inline-flex;
@@ -2689,57 +2678,6 @@ function ensureSceneStyles(doc) {
   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;
@@ -2925,44 +2863,61 @@ function ensureSceneStyles(doc) {
 .markdy-control-seek::-webkit-slider-runnable-track {
   width: 100%;
   height: 4.5px;
-  background: rgba(148, 163, 184, 0.35);
+  background: linear-gradient(
+    to right,
+    var(--accent, #10b981) 0%,
+    var(--accent, #10b981) var(--seek-pct, 0%),
+    rgba(148, 163, 184, 0.35) var(--seek-pct, 0%),
+    rgba(148, 163, 184, 0.35) 100%
+  );
   border-radius: 9999px;
-  transition: background 0.15s ease;
-}
-.markdy-control-seek:hover::-webkit-slider-runnable-track {
-  background: rgba(148, 163, 184, 0.55);
 }
 .markdy-control-seek::-webkit-slider-thumb {
+  appearance: none;
   -webkit-appearance: none;
   height: 13px;
   width: 13px;
   border-radius: 50%;
-  background: #2563eb;
+  background: var(--accent, #10b981);
   border: 2px solid #ffffff;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   margin-top: -4.25px;
   cursor: grab;
-  transition: transform 0.1s ease, background 0.15s ease;
+  transition: transform 0.1s ease, box-shadow 0.15s ease;
+}
+.markdy-control-seek:hover::-webkit-slider-thumb {
+  transform: scale(1.2);
+  box-shadow: 0 0 8px var(--accent-glow, rgba(16, 185, 129, 0.6));
 }
 .markdy-control-seek:active::-webkit-slider-thumb {
   cursor: grabbing;
   transform: scale(1.2);
-  background: #1d4ed8;
 }
 .markdy-control-seek::-moz-range-track {
   width: 100%;
   height: 4.5px;
-  background: rgba(148, 163, 184, 0.35);
+  background: linear-gradient(
+    to right,
+    var(--accent, #10b981) 0%,
+    var(--accent, #10b981) var(--seek-pct, 0%),
+    rgba(148, 163, 184, 0.35) var(--seek-pct, 0%),
+    rgba(148, 163, 184, 0.35) 100%
+  );
   border-radius: 9999px;
 }
 .markdy-control-seek::-moz-range-thumb {
   height: 13px;
   width: 13px;
   border-radius: 50%;
-  background: #2563eb;
+  background: var(--accent, #10b981);
   border: 2px solid #ffffff;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   cursor: grab;
+  transition: transform 0.1s ease, box-shadow 0.15s ease;
+}
+.markdy-control-seek:hover::-moz-range-thumb {
+  transform: scale(1.2);
+  box-shadow: 0 0 8px var(--accent-glow, rgba(16, 185, 129, 0.6));
 }
 
 [data-markdy-theme="midnight"] .markdy-controls button,
@@ -2983,9 +2938,9 @@ function ensureSceneStyles(doc) {
 [data-markdy-theme="nebula"] .markdy-controls button:hover:not([aria-pressed="true"]),
 :root[data-theme="dark"] .markdy-controls button:hover:not([aria-pressed="true"]),
 .theme-dark .markdy-controls button:hover:not([aria-pressed="true"]) {
-  background: rgba(51, 65, 85, 0.95);
-  color: #f8fafc;
-  border-color: #94a3b8;
+  background: var(--md-control-hover-bg, rgba(51, 65, 85, 0.95));
+  color: var(--md-control-hover-text, #f8fafc);
+  border-color: var(--md-control-hover-border, #94a3b8);
 }
 [data-markdy-theme="midnight"] .markdy-controls button[aria-pressed="true"],
 [data-markdy-theme="blueprint"] .markdy-controls button[aria-pressed="true"],
@@ -2994,10 +2949,10 @@ function ensureSceneStyles(doc) {
 [data-markdy-theme="nebula"] .markdy-controls button[aria-pressed="true"],
 :root[data-theme="dark"] .markdy-controls button[aria-pressed="true"],
 .theme-dark .markdy-controls button[aria-pressed="true"] {
-  background: #3b82f6 !important;
+  background: var(--accent, #3b82f6) !important;
   color: #ffffff !important;
-  border-color: #3b82f6 !important;
-  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5) !important;
+  border-color: var(--accent, #3b82f6) !important;
+  box-shadow: 0 0 10px var(--accent-glow, rgba(59, 130, 246, 0.5)) !important;
 }
 .markdy-footer a {
   transition: opacity 0.15s ease, color 0.15s ease;
@@ -3091,41 +3046,56 @@ function ensureSceneStyles(doc) {
 `;
   doc.head.appendChild(style);
 }
-function applyThemeToScene(scene, theme) {
-  scene.style.background = theme.canvas;
-  scene.style.color = theme.text;
-  scene.style.setProperty("--md-canvas", theme.canvas);
-  scene.style.setProperty("--md-surface", theme.surface);
-  scene.style.setProperty("--md-surface-raised", theme.surfaceRaised);
-  scene.style.setProperty("--md-border", theme.border);
-  scene.style.setProperty("--md-text", theme.text);
-  scene.style.setProperty("--md-text-muted", theme.textMuted);
-  scene.style.setProperty("--md-paper", theme.paper ?? theme.canvas);
-  scene.style.setProperty("--md-ink", theme.ink ?? theme.text);
-  scene.style.setProperty("--md-muted", theme.muted ?? theme.textMuted);
-  scene.style.setProperty("--md-rule", theme.rule ?? theme.border);
-  scene.style.setProperty("--md-grid-minor", theme.gridMinor);
-  scene.style.setProperty("--md-grid-major", theme.gridMajor);
-  scene.style.setProperty("--md-vignette", theme.vignette);
-  scene.style.setProperty("--md-accent", theme.accent);
-  if (theme.link) scene.style.setProperty("--md-link", theme.link);
-  if (theme.soft) scene.style.setProperty("--md-soft", theme.soft);
-  if (theme.accentTint) scene.style.setProperty("--md-accent-tint", theme.accentTint);
-  scene.style.setProperty("--md-node-surface", theme.nodeSurface ?? theme.surface);
-  scene.style.setProperty("--md-node-surface-raised", theme.nodeSurfaceRaised ?? theme.surfaceRaised);
-  scene.style.setProperty("--md-hairline", theme.hairline ?? `color-mix(in srgb, ${theme.border} 50%, transparent)`);
-  scene.style.setProperty("--md-shadow", theme.shadow ?? "rgba(2, 6, 23, 0.55)");
-  if (theme.fonts?.title) scene.style.setProperty("--md-font-title", theme.fonts.title);
-  if (theme.fonts?.nodeName) scene.style.setProperty("--md-font-node", theme.fonts.nodeName);
-  if (theme.fonts?.mono) scene.style.setProperty("--md-font-mono", theme.fonts.mono);
-  if (theme.radiusMd) scene.style.setProperty("--md-radius-md", `${theme.radiusMd}px`);
+function applyThemeVariables(element, theme) {
+  element.style.setProperty("--md-canvas", theme.canvas);
+  element.style.setProperty("--md-surface", theme.surface);
+  element.style.setProperty("--md-surface-raised", theme.surfaceRaised);
+  element.style.setProperty("--md-border", theme.border);
+  element.style.setProperty("--md-text", theme.text);
+  element.style.setProperty("--md-text-muted", theme.textMuted);
+  element.style.setProperty("--md-paper", theme.paper ?? theme.canvas);
+  element.style.setProperty("--md-ink", theme.ink ?? theme.text);
+  element.style.setProperty("--md-muted", theme.muted ?? theme.textMuted);
+  element.style.setProperty("--md-rule", theme.rule ?? theme.border);
+  element.style.setProperty("--md-grid-minor", theme.gridMinor);
+  element.style.setProperty("--md-grid-major", theme.gridMajor);
+  element.style.setProperty("--md-vignette", theme.vignette);
+  element.style.setProperty("--md-accent", theme.accent);
+  element.style.setProperty("--accent", theme.accent);
+  element.style.setProperty("--accent-glow", `color-mix(in srgb, ${theme.accent} 40%, transparent)`);
+  element.style.setProperty("--accent-light", theme.accentTint ?? `color-mix(in srgb, ${theme.accent} 15%, transparent)`);
+  if (theme.link) element.style.setProperty("--md-link", theme.link);
+  if (theme.soft) element.style.setProperty("--md-soft", theme.soft);
+  if (theme.accentTint) element.style.setProperty("--md-accent-tint", theme.accentTint);
+  element.style.setProperty("--md-node-surface", theme.nodeSurface ?? theme.surface);
+  element.style.setProperty("--md-node-surface-raised", theme.nodeSurfaceRaised ?? theme.surfaceRaised);
+  element.style.setProperty("--md-hairline", theme.hairline ?? `color-mix(in srgb, ${theme.border} 50%, transparent)`);
+  element.style.setProperty("--md-shadow", theme.shadow ?? "rgba(2, 6, 23, 0.55)");
+  element.style.setProperty("--md-footer-bg", `color-mix(in srgb, ${theme.surface} 92%, transparent)`);
+  element.style.setProperty("--md-footer-border", theme.border);
+  element.style.setProperty("--md-control-bg", theme.surfaceRaised);
+  element.style.setProperty("--md-control-border", theme.border);
+  element.style.setProperty("--md-control-text", theme.textMuted);
+  element.style.setProperty("--md-control-hover-bg", theme.canvas);
+  element.style.setProperty("--md-control-hover-text", theme.text);
+  element.style.setProperty("--md-control-hover-border", theme.accent);
+  element.style.setProperty("--md-divider", theme.border);
+  if (theme.fonts?.title) element.style.setProperty("--md-font-title", theme.fonts.title);
+  if (theme.fonts?.nodeName) element.style.setProperty("--md-font-node", theme.fonts.nodeName);
+  if (theme.fonts?.mono) element.style.setProperty("--md-font-mono", theme.fonts.mono);
+  if (theme.radiusMd) element.style.setProperty("--md-radius-md", `${theme.radiusMd}px`);
   if (theme.spacing) {
     for (const [key, value] of Object.entries(theme.spacing)) {
-      scene.style.setProperty(`--md-space-${key}`, `${value}px`);
+      element.style.setProperty(`--md-space-${key}`, `${value}px`);
     }
   }
-  scene.dataset.markdyTheme = theme.name;
-  if (theme.flatCards) scene.dataset.flat = "1";
+  element.dataset.markdyTheme = theme.name;
+  if (theme.flatCards) element.dataset.flat = "1";
+}
+function applyThemeToScene(scene, theme) {
+  applyThemeVariables(scene, theme);
+  scene.style.background = theme.canvas;
+  scene.style.color = theme.text;
 }
 
 // src/diagram.ts
@@ -3296,11 +3266,12 @@ function createDiagram(opts) {
     if (footer) return footer;
     footer = document.createElement("div");
     footer.className = "markdy-footer";
+    applyThemeVariables(footer, plan.theme);
     Object.assign(footer.style, {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      flexWrap: "wrap",
+      flexWrap: "nowrap",
       gap: "6px",
       width: "100%",
       boxSizing: "border-box",
@@ -3310,6 +3281,21 @@ function createDiagram(opts) {
     else container.appendChild(footer);
     return footer;
   }
+  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.title = "Open and edit in Markdy Playground";
+    badge.textContent = "Powered by Markdy";
+    ensureFooter().appendChild(badge);
+    const badgeLink = badge;
+    void compressMarkdyToUrlHash(code).then((hash) => {
+      badgeLink.href = `${MARKDY_PLAYGROUND_URL}#code=${hash}`;
+    }).catch(() => void 0);
+  }
   ensureSceneStyles(document);
   ensureNodeStyles(document);
   const scene = document.createElement("div");
@@ -3326,17 +3312,6 @@ function createDiagram(opts) {
   });
   applyThemeToScene(scene, plan.theme);
   viewport.appendChild(scene);
-  let badge = null;
-  if (copyright) {
-    badge = document.createElement("a");
-    badge.className = "markdy-badge";
-    badge.href = "https://markdy.com";
-    badge.target = "_blank";
-    badge.rel = "noopener noreferrer";
-    badge.title = "Powered by Markdy - Diagram as Code";
-    badge.textContent = "Powered by Markdy";
-    viewport.appendChild(badge);
-  }
   const viewportTransform = document.createElement("div");
   viewportTransform.className = "markdy-viewport-transform";
   Object.assign(viewportTransform.style, {
@@ -3548,6 +3523,7 @@ function createDiagram(opts) {
   let controlsSeekBar = null;
   let controlsTimeEl = null;
   let controlsFitButton = null;
+  let closeCodePanel = 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>',
@@ -3767,8 +3743,9 @@ function createDiagram(opts) {
       for (const anim of allAnims) anim.cancel();
       resizeObserver?.disconnect();
       removeFullscreenListeners?.();
+      closeCodePanel?.();
+      closeCodePanel = null;
       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);
     }
@@ -3935,19 +3912,33 @@ function createDiagram(opts) {
   }
   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>'
+      if (/^\s*\/\//.test(line)) return `<span class="t-comment">${escHtml(line)}</span>`;
+      const keyword = line.match(
+        /^(\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/
       );
-      line = line.replace(/\b(\d[\d.]*(?:ms|px|s)?)\b/g, '<span class="t-number">$1</span>');
-      return line;
+      const prefix = keyword ? `${escHtml(keyword[1])}<span class="t-keyword">${keyword[2]}</span>` : "";
+      return prefix + tintInlineCode(line.slice(keyword?.[0].length ?? 0));
     }).join("\n");
   }
+  function tintInlineCode(raw) {
+    const tokenPattern = /"[^"]*"|->|<-|~>|--|<~|\b\d[\d.]*(?:ms|px|s)?\b/g;
+    let output = "";
+    let cursor = 0;
+    for (const match of raw.matchAll(tokenPattern)) {
+      const token = match[0];
+      const index = match.index ?? 0;
+      output += escHtml(raw.slice(cursor, index));
+      if (token.startsWith('"')) {
+        output += `"<span class="t-string">${escHtml(token.slice(1, -1))}</span>"`;
+      } else if (/^\d/.test(token)) {
+        output += `<span class="t-number">${token}</span>`;
+      } else {
+        output += `<span class="t-edge">${escHtml(token)}</span>`;
+      }
+      cursor = index + token.length;
+    }
+    return output + escHtml(raw.slice(cursor));
+  }
   function escHtml(str) {
     return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   }
@@ -3957,6 +3948,7 @@ function createDiagram(opts) {
     button.className = "markdy-control-code";
     button.setAttribute("aria-haspopup", "dialog");
     button.addEventListener("click", () => {
+      closeCodePanel?.();
       const overlay = document.createElement("div");
       overlay.className = "markdy-code-panel-overlay";
       overlay.setAttribute("role", "dialog");
@@ -4014,24 +4006,28 @@ function createDiagram(opts) {
       overlay.appendChild(panel);
       document.body.appendChild(overlay);
       closeBtn.focus();
+      let closing = false;
+      function removePanel() {
+        document.removeEventListener("keydown", handleEscape);
+        overlay.remove();
+        if (closeCodePanel === removePanel) closeCodePanel = null;
+      }
       function closePanel() {
+        if (closing) return;
+        closing = true;
         overlay.dataset.closing = "1";
-        overlay.addEventListener("animationend", () => overlay.remove(), { once: true });
+        document.removeEventListener("keydown", handleEscape);
+        overlay.addEventListener("animationend", removePanel, { 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);
-        }
+        if (e.key === "Escape") closePanel();
       }
       document.addEventListener("keydown", handleEscape);
-      overlay.addEventListener("animationend", () => {
-        if (overlay.dataset.closing === "1") document.removeEventListener("keydown", handleEscape);
-      }, { once: true });
+      closeCodePanel = removePanel;
     });
     toolbar.appendChild(button);
   }
@@ -4238,7 +4234,7 @@ function createDiagram(opts) {
       mountCodeControl(toolsGroup);
     }
     if (toolsGroup.children.length > 0) toolbar.appendChild(toolsGroup);
-    ensureFooter().appendChild(toolbar);
+    ensureFooter().insertBefore(toolbar, badge);
     syncControls();
   }
   viewport.style.cursor = interactiveViewport ? "grab" : "pointer";

package/package.json

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