@markdy/renderer-dom 0.7.25 → 0.7.27

package/dist/index.js

@@ -309,6 +309,730 @@ function readRotation(el) {
 }
 
 // src/actors.ts
+var ARCHITECTURE_NODE_TYPES = /* @__PURE__ */ new Set([
+  "service",
+  "api",
+  "microservice",
+  "client",
+  "user",
+  "db",
+  "database",
+  "queue",
+  "cache",
+  "cloud",
+  "region",
+  "container",
+  "cluster"
+]);
+var SHOWCASE_SURFACE_TYPES = /* @__PURE__ */ new Set(["parking_map", "ascii_map", "game_scene", "byte_viz"]);
+var ARCHITECTURE_STYLE_ID = "markdy-architecture-node-styles";
+var SHOWCASE_STYLE_ID = "markdy-showcase-surface-styles";
+function ensureShowcaseStyles(doc) {
+  if (doc.getElementById(SHOWCASE_STYLE_ID)) return;
+  const style = doc.createElement("style");
+  style.id = SHOWCASE_STYLE_ID;
+  style.textContent = `
+.markdy-showcase {
+  --surface-a: rgba(15, 23, 42, 0.9);
+  --accent: #38bdf8;
+  --accent-2: #22c55e;
+  position: relative;
+  box-sizing: border-box;
+  width: 390px;
+  height: 250px;
+  overflow: hidden;
+  border: 1px solid rgba(148, 163, 184, 0.34);
+  border-radius: 24px;
+  color: #e5f3ff;
+  background:
+    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 34%),
+    radial-gradient(circle at 90% 15%, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 34%),
+    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.025) 32%, var(--surface-a));
+  box-shadow:
+    0 26px 70px rgba(2, 6, 23, 0.42),
+    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
+    0 1px 0 rgba(255, 255, 255, 0.18) inset,
+    0 0 44px color-mix(in srgb, var(--accent) 24%, transparent);
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  isolation: isolate;
+  contain: layout paint style;
+  backdrop-filter: blur(16px) saturate(1.2);
+  -webkit-backdrop-filter: blur(16px) saturate(1.2);
+}
+.markdy-showcase::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background:
+    linear-gradient(90deg, transparent 0 48%, rgba(255, 255, 255, 0.09) 50%, transparent 52%) 0 0 / 34px 34px,
+    linear-gradient(0deg, transparent 0 48%, rgba(255, 255, 255, 0.055) 50%, transparent 52%) 0 0 / 34px 34px;
+  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent 82%);
+  opacity: 0.48;
+  animation: markdyGridDrift 7s linear infinite;
+}
+.markdy-showcase::after {
+  content: "";
+  position: absolute;
+  inset: -40% -20%;
+  z-index: -1;
+  background: conic-gradient(from 90deg, transparent, color-mix(in srgb, var(--accent) 20%, transparent), transparent 32%);
+  opacity: 0.6;
+  animation: markdyAurora 9s linear infinite;
+}
+.markdy-showcase--byte_viz { width: 420px; }
+.markdy-showcase__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px 8px;
+}
+.markdy-showcase__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 15px;
+  font-weight: 820;
+  letter-spacing: 0.01em;
+  color: #f8fafc;
+}
+.markdy-showcase__pill {
+  flex: 0 0 auto;
+  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
+  border-radius: 999px;
+  padding: 4px 8px;
+  color: #bae6fd;
+  background: rgba(8, 47, 73, 0.54);
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 22%, transparent);
+}
+.markdy-showcase__body { position: absolute; inset: 48px 14px 14px; }
+.markdy-showcase--parking_map { --accent: #38bdf8; --accent-2: #22c55e; }
+.parking-map__road {
+  position: absolute;
+  left: 14px;
+  right: 14px;
+  top: 78px;
+  height: 50px;
+  border-radius: 999px;
+  background:
+    repeating-linear-gradient(90deg, rgba(226, 232, 240, 0.78) 0 18px, transparent 18px 34px) center / 100% 3px no-repeat,
+    linear-gradient(90deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.88));
+  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.28) inset;
+}
+.parking-map__scan {
+  position: absolute;
+  left: 28px;
+  top: 42px;
+  width: 66px;
+  height: 124px;
+  border-radius: 18px;
+  border: 1px solid rgba(56, 189, 248, 0.55);
+  background: linear-gradient(180deg, rgba(56, 189, 248, 0.22), transparent);
+  box-shadow: 0 0 24px rgba(56, 189, 248, 0.28);
+  animation: markdyScanPulse 1.8s ease-in-out infinite;
+}
+.parking-map__car {
+  position: absolute;
+  left: 48px;
+  top: 86px;
+  width: 46px;
+  height: 22px;
+  border-radius: 11px 15px 15px 11px;
+  background: linear-gradient(90deg, #22d3ee, #818cf8);
+  box-shadow: 0 0 18px rgba(56, 189, 248, 0.55), 0 8px 18px rgba(2, 6, 23, 0.35);
+  animation: markdyCarGlide 3.8s cubic-bezier(.4,0,.2,1) infinite;
+}
+.parking-map__car::before,
+.parking-map__car::after {
+  content: "";
+  position: absolute;
+  bottom: -4px;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: #020617;
+  border: 2px solid #cbd5e1;
+}
+.parking-map__car::before { left: 7px; }
+.parking-map__car::after { right: 7px; }
+.parking-map__slots {
+  position: absolute;
+  right: 12px;
+  top: 24px;
+  display: grid;
+  grid-template-columns: repeat(4, 44px);
+  gap: 8px;
+}
+.parking-map__slot {
+  height: 34px;
+  border-radius: 10px;
+  border: 1px solid rgba(148, 163, 184, 0.34);
+  background: rgba(15, 23, 42, 0.7);
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.035) inset;
+}
+.parking-map__slot:nth-child(3),
+.parking-map__slot:nth-child(6),
+.parking-map__slot:nth-child(8) {
+  border-color: rgba(34, 197, 94, 0.78);
+  background: rgba(20, 83, 45, 0.5);
+  animation: markdySlotGlow 1.7s ease-in-out infinite;
+}
+.parking-map__route {
+  position: absolute;
+  left: 91px;
+  right: 95px;
+  top: 109px;
+  height: 3px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, transparent, #22c55e, #38bdf8, transparent);
+  filter: drop-shadow(0 0 8px #22c55e);
+  animation: markdyRouteFlow 1.5s linear infinite;
+}
+.parking-map__stats {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  bottom: 5px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+.parking-map__stat,
+.ascii-map__badge,
+.game-scene__hud,
+.byte-viz__badge {
+  border: 1px solid rgba(148, 163, 184, 0.24);
+  border-radius: 12px;
+  padding: 8px;
+  background: rgba(2, 6, 23, 0.42);
+  color: #cbd5e1;
+  font-size: 10px;
+  font-weight: 760;
+}
+.parking-map__stat strong,
+.byte-viz__badge strong {
+  display: block;
+  margin-top: 2px;
+  color: #f8fafc;
+  font-size: 16px;
+}
+.markdy-showcase--ascii_map { --accent: #22c55e; --accent-2: #38bdf8; }
+.ascii-map__terminal {
+  position: absolute;
+  inset: 0;
+  border-radius: 18px;
+  border: 1px solid rgba(34, 197, 94, 0.34);
+  background: linear-gradient(180deg, rgba(2, 6, 23, 0.72), rgba(2, 6, 23, 0.36));
+  box-shadow: 0 0 28px rgba(34, 197, 94, 0.16) inset;
+}
+.ascii-map__chrome {
+  height: 28px;
+  padding-left: 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
+}
+.ascii-map__chrome span {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: #ef4444;
+  box-shadow: 14px 0 #f59e0b, 28px 0 #22c55e;
+}
+.ascii-map__code {
+  position: absolute;
+  left: 16px;
+  top: 46px;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 19px;
+  line-height: 1.55;
+  color: #bbf7d0;
+  text-shadow: 0 0 12px rgba(34, 197, 94, 0.45);
+}
+.ascii-map__code b {
+  color: #67e8f9;
+  animation: markdyBlink 1.2s steps(2, end) infinite;
+}
+.ascii-map__minimap {
+  position: absolute;
+  right: 18px;
+  top: 48px;
+  width: 102px;
+  height: 122px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 7px;
+}
+.ascii-map__mini-slot {
+  border-radius: 7px;
+  border: 1px solid rgba(148, 163, 184, 0.28);
+  background: rgba(15, 23, 42, 0.72);
+}
+.ascii-map__mini-slot:nth-child(2),
+.ascii-map__mini-slot:nth-child(6) {
+  border-color: rgba(34, 197, 94, 0.85);
+  background: rgba(20, 83, 45, 0.56);
+}
+.ascii-map__transform {
+  position: absolute;
+  left: 16px;
+  right: 16px;
+  bottom: 10px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 8px;
+}
+.markdy-showcase--game_scene { --accent: #f59e0b; --accent-2: #22c55e; }
+.game-scene__world {
+  position: absolute;
+  inset: 0;
+  border-radius: 18px;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 80% 18%, rgba(245, 158, 11, 0.22), transparent 26%),
+    linear-gradient(160deg, #172554, #020617 72%);
+}
+.game-scene__world::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,0.06) 22px 24px);
+  animation: markdyRoadMove 4s linear infinite;
+}
+.game-scene__road {
+  position: absolute;
+  left: -35px;
+  right: -35px;
+  top: 94px;
+  height: 76px;
+  transform: rotate(-8deg);
+  background:
+    repeating-linear-gradient(90deg, #e2e8f0 0 24px, transparent 24px 46px) center / 100% 4px no-repeat,
+    linear-gradient(180deg, #334155, #0f172a);
+  box-shadow: 0 18px 32px rgba(2, 6, 23, 0.42);
+}
+.game-scene__car {
+  position: absolute;
+  left: 88px;
+  top: 126px;
+  width: 58px;
+  height: 30px;
+  border-radius: 12px 18px 18px 12px;
+  background: linear-gradient(90deg, #fb7185, #f59e0b);
+  transform: rotate(-8deg);
+  box-shadow: 0 0 24px rgba(245, 158, 11, 0.52);
+  animation: markdyCarPark 3.4s cubic-bezier(.2,1,.3,1) infinite;
+}
+.game-scene__spot {
+  position: absolute;
+  right: 54px;
+  top: 85px;
+  width: 90px;
+  height: 68px;
+  border: 3px solid rgba(34, 197, 94, 0.78);
+  border-left-style: dashed;
+  border-radius: 10px;
+  filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.48));
+}
+.game-scene__cones {
+  position: absolute;
+  right: 80px;
+  bottom: 34px;
+  display: flex;
+  gap: 14px;
+}
+.game-scene__cone {
+  width: 0;
+  height: 0;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 26px solid #f97316;
+  filter: drop-shadow(0 5px 8px rgba(2, 6, 23, 0.35));
+}
+.game-scene__hud {
+  position: absolute;
+  left: 14px;
+  top: 14px;
+  min-width: 120px;
+  border-color: rgba(245, 158, 11, 0.38);
+}
+.game-scene__hud strong { color: #fed7aa; font-size: 18px; }
+.game-scene__perfect {
+  position: absolute;
+  left: 132px;
+  top: 54px;
+  color: #fef3c7;
+  font-size: 21px;
+  font-weight: 900;
+  letter-spacing: 0.05em;
+  text-shadow: 0 0 18px rgba(245, 158, 11, 0.7);
+  animation: markdyPerfectPop 1.6s ease-in-out infinite;
+}
+.markdy-showcase--byte_viz { --accent: #a78bfa; --accent-2: #38bdf8; }
+.byte-viz__pipeline {
+  position: absolute;
+  inset: 4px;
+  display: grid;
+  grid-template-columns: 98px 1fr 122px;
+  gap: 12px;
+  align-items: stretch;
+}
+.byte-viz__glyph {
+  display: grid;
+  place-items: center;
+  border-radius: 22px;
+  border: 1px solid rgba(167, 139, 250, 0.45);
+  background: radial-gradient(circle at 30% 20%, rgba(167, 139, 250, 0.42), rgba(15, 23, 42, 0.78));
+  color: #fff;
+  font-size: 72px;
+  font-weight: 920;
+  box-shadow: 0 0 34px rgba(167, 139, 250, 0.32) inset;
+}
+.byte-viz__middle { display: grid; gap: 10px; }
+.byte-viz__row {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+.byte-viz__chip {
+  flex: 1 1 0;
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  border-radius: 12px;
+  padding: 8px 10px;
+  background: rgba(2, 6, 23, 0.42);
+  color: #ddd6fe;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 12px;
+  font-weight: 800;
+}
+.byte-viz__arrow {
+  color: #67e8f9;
+  filter: drop-shadow(0 0 8px #38bdf8);
+  animation: markdyArrowPulse 1.1s ease-in-out infinite;
+}
+.byte-viz__bits {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 5px;
+}
+.byte-viz__bit {
+  display: grid;
+  place-items: center;
+  height: 31px;
+  border-radius: 8px;
+  background: rgba(15, 23, 42, 0.82);
+  border: 1px solid rgba(56, 189, 248, 0.28);
+  color: #bae6fd;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 12px;
+  font-weight: 900;
+  animation: markdyBitFlip 1.9s ease-in-out infinite;
+}
+.byte-viz__bit:nth-child(2n) { animation-delay: 0.12s; }
+.byte-viz__bit:nth-child(3n) { animation-delay: 0.24s; }
+.byte-viz__side { display: grid; gap: 9px; }
+@keyframes markdyGridDrift { to { background-position: 34px 34px, 34px 34px; } }
+@keyframes markdyAurora { to { transform: rotate(1turn); } }
+@keyframes markdyScanPulse { 50% { transform: translateX(18px); opacity: 0.72; } }
+@keyframes markdyCarGlide { 0%, 12% { transform: translateX(0); } 68%, 100% { transform: translateX(198px); } }
+@keyframes markdySlotGlow { 50% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.38); } }
+@keyframes markdyRouteFlow { to { filter: hue-rotate(70deg) drop-shadow(0 0 9px #38bdf8); } }
+@keyframes markdyBlink { 50% { opacity: 0.25; } }
+@keyframes markdyRoadMove { to { background-position: 44px 0; } }
+@keyframes markdyCarPark { 0%, 12% { transform: translateX(0) rotate(-8deg); } 70%, 100% { transform: translateX(164px) translateY(-31px) rotate(-1deg); } }
+@keyframes markdyPerfectPop { 0%, 100% { transform: scale(0.92); opacity: 0.72; } 50% { transform: scale(1.05); opacity: 1; } }
+@keyframes markdyArrowPulse { 50% { transform: translateX(3px); opacity: 0.72; } }
+@keyframes markdyBitFlip { 50% { transform: translateY(-2px); border-color: rgba(167, 139, 250, 0.75); } }
+`;
+  doc.head.appendChild(style);
+}
+function createShowcaseSurfaceEl(type, def) {
+  ensureShowcaseStyles(document);
+  const label = def.args[0] || type.replace("_", " ");
+  const root = document.createElement("div");
+  root.className = `markdy-showcase markdy-showcase--${type}`;
+  root.setAttribute("role", "img");
+  root.setAttribute("aria-label", label);
+  if (type === "parking_map") {
+    root.innerHTML = `
+      <div class="markdy-showcase__top"><div class="markdy-showcase__title"></div><div class="markdy-showcase__pill">live ops</div></div>
+      <div class="markdy-showcase__body">
+        <div class="parking-map__scan"></div><div class="parking-map__road"></div><div class="parking-map__route"></div><div class="parking-map__car"></div>
+        <div class="parking-map__slots"><span class="parking-map__slot"></span><span class="parking-map__slot"></span><span class="parking-map__slot"></span><span class="parking-map__slot"></span><span class="parking-map__slot"></span><span class="parking-map__slot"></span><span class="parking-map__slot"></span><span class="parking-map__slot"></span></div>
+        <div class="parking-map__stats"><div class="parking-map__stat">occupancy<strong>87%</strong></div><div class="parking-map__stat">OCR<strong>18ms</strong></div><div class="parking-map__stat">route<strong>A-17</strong></div></div>
+      </div>`;
+  } else if (type === "ascii_map") {
+    root.innerHTML = `
+      <div class="markdy-showcase__top"><div class="markdy-showcase__title"></div><div class="markdy-showcase__pill">parser</div></div>
+      <div class="markdy-showcase__body">
+        <div class="ascii-map__terminal"><div class="ascii-map__chrome"><span></span></div><div class="ascii-map__code">[P1][P2][<b>  </b>][EV]<br />[IN]===LANE===[OUT]<br />0101 0000 0100 0001</div><div class="ascii-map__minimap"><i class="ascii-map__mini-slot"></i><i class="ascii-map__mini-slot"></i><i class="ascii-map__mini-slot"></i><i class="ascii-map__mini-slot"></i><i class="ascii-map__mini-slot"></i><i class="ascii-map__mini-slot"></i></div><div class="ascii-map__transform"><div class="ascii-map__badge">tokens</div><div class="ascii-map__badge">graph</div><div class="ascii-map__badge">slots</div></div></div>
+      </div>`;
+  } else if (type === "game_scene") {
+    root.innerHTML = `
+      <div class="markdy-showcase__top"><div class="markdy-showcase__title"></div><div class="markdy-showcase__pill">60 fps</div></div>
+      <div class="markdy-showcase__body">
+        <div class="game-scene__world"><div class="game-scene__hud">combo<br /><strong>x4.2</strong></div><div class="game-scene__perfect">PERFECT PARK</div><div class="game-scene__road"></div><div class="game-scene__spot"></div><div class="game-scene__car"></div><div class="game-scene__cones"><i class="game-scene__cone"></i><i class="game-scene__cone"></i><i class="game-scene__cone"></i></div></div>
+      </div>`;
+  } else {
+    root.innerHTML = `
+      <div class="markdy-showcase__top"><div class="markdy-showcase__title"></div><div class="markdy-showcase__pill">UTF-8</div></div>
+      <div class="markdy-showcase__body">
+        <div class="byte-viz__pipeline"><div class="byte-viz__glyph">A</div><div class="byte-viz__middle"><div class="byte-viz__row"><div class="byte-viz__chip">char</div><span class="byte-viz__arrow">-></span><div class="byte-viz__chip">U+0041</div></div><div class="byte-viz__row"><div class="byte-viz__chip">0x41</div><span class="byte-viz__arrow">-></span><div class="byte-viz__chip">01000001</div></div><div class="byte-viz__bits"><span class="byte-viz__bit">0</span><span class="byte-viz__bit">1</span><span class="byte-viz__bit">0</span><span class="byte-viz__bit">0</span><span class="byte-viz__bit">0</span><span class="byte-viz__bit">0</span><span class="byte-viz__bit">0</span><span class="byte-viz__bit">1</span></div></div><div class="byte-viz__side"><div class="byte-viz__badge">bytes<strong>1</strong></div><div class="byte-viz__badge">planes<strong>BMP</strong></div><div class="byte-viz__badge">glyph<strong>paint</strong></div></div></div>
+      </div>`;
+  }
+  const title = root.querySelector(".markdy-showcase__title");
+  if (title) title.textContent = label;
+  return root;
+}
+function ensureArchitectureStyles(doc) {
+  if (doc.getElementById(ARCHITECTURE_STYLE_ID)) return;
+  const style = doc.createElement("style");
+  style.id = ARCHITECTURE_STYLE_ID;
+  style.textContent = `
+.markdy-arch-node {
+  --markdy-node-accent: #38bdf8;
+  --markdy-node-accent-2: #22c55e;
+  --markdy-node-surface: rgba(15, 23, 42, 0.82);
+  --markdy-node-border: rgba(148, 163, 184, 0.34);
+  --markdy-node-glow: rgba(56, 189, 248, 0.24);
+  position: relative;
+  isolation: isolate;
+  width: 184px;
+  min-height: 88px;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  padding: 13px 14px;
+  border: 1px solid var(--markdy-node-border);
+  border-radius: 14px;
+  color: #e5eefb;
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.02) 34%, rgba(15, 23, 42, 0.88) 100%),
+    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--markdy-node-accent) 34%, transparent), transparent 42%),
+    var(--markdy-node-surface);
+  box-shadow:
+    0 16px 34px rgba(2, 6, 23, 0.28),
+    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
+    0 1px 0 rgba(255, 255, 255, 0.12) inset,
+    0 0 28px var(--markdy-node-glow);
+  overflow: hidden;
+  contain: layout paint style;
+  backdrop-filter: blur(14px) saturate(1.18);
+  -webkit-backdrop-filter: blur(14px) saturate(1.18);
+}
+.markdy-arch-node::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background:
+    linear-gradient(90deg, transparent 0 24%, rgba(255, 255, 255, 0.06) 50%, transparent 76%) -180px 0 / 180px 100% no-repeat,
+    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 10px);
+  opacity: 0.6;
+}
+.markdy-arch-node::after {
+  content: "";
+  position: absolute;
+  left: 14px;
+  right: 14px;
+  bottom: 9px;
+  height: 2px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, transparent, var(--markdy-node-accent), var(--markdy-node-accent-2), transparent);
+  opacity: 0.82;
+  filter: drop-shadow(0 0 6px var(--markdy-node-accent));
+}
+.markdy-arch-node__icon {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  border-radius: 11px;
+  background:
+    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.28), transparent 42%),
+    linear-gradient(145deg, var(--markdy-node-accent), color-mix(in srgb, var(--markdy-node-accent) 38%, #020617));
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.16) inset,
+    0 10px 20px color-mix(in srgb, var(--markdy-node-accent) 25%, transparent);
+}
+.markdy-arch-node__icon::before,
+.markdy-arch-node__icon::after {
+  content: "";
+  position: absolute;
+  box-sizing: border-box;
+  border-color: rgba(255, 255, 255, 0.9);
+}
+.markdy-arch-node__label {
+  min-width: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 15px;
+  font-weight: 720;
+  line-height: 1.08;
+  color: #f8fafc;
+  text-shadow: 0 1px 12px rgba(15, 23, 42, 0.8);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.markdy-arch-node__type {
+  display: block;
+  margin-top: 5px;
+  font-size: 9px;
+  font-weight: 740;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--markdy-node-accent) 70%, #e2e8f0);
+  opacity: 0.86;
+}
+.markdy-arch-node[data-markdy-system-type="service"],
+.markdy-arch-node[data-markdy-system-type="api"],
+.markdy-arch-node[data-markdy-system-type="microservice"] {
+  --markdy-node-accent: #38bdf8;
+  --markdy-node-accent-2: #818cf8;
+}
+.markdy-arch-node[data-markdy-system-type="client"],
+.markdy-arch-node[data-markdy-system-type="user"] {
+  --markdy-node-accent: #f59e0b;
+  --markdy-node-accent-2: #fb7185;
+}
+.markdy-arch-node[data-markdy-system-type="database"],
+.markdy-arch-node[data-markdy-system-type="db"] {
+  --markdy-node-accent: #22c55e;
+  --markdy-node-accent-2: #14b8a6;
+  border-radius: 18px 18px 24px 24px;
+}
+.markdy-arch-node[data-markdy-system-type="cache"] {
+  --markdy-node-accent: #a3e635;
+  --markdy-node-accent-2: #22c55e;
+  border-style: dashed;
+}
+.markdy-arch-node[data-markdy-system-type="queue"] {
+  --markdy-node-accent: #a78bfa;
+  --markdy-node-accent-2: #38bdf8;
+}
+.markdy-arch-node[data-markdy-system-type="cloud"],
+.markdy-arch-node[data-markdy-system-type="region"] {
+  --markdy-node-accent: #60a5fa;
+  --markdy-node-accent-2: #67e8f9;
+  border-radius: 999px;
+}
+.markdy-arch-node[data-markdy-system-type="container"],
+.markdy-arch-node[data-markdy-system-type="cluster"] {
+  --markdy-node-accent: #c084fc;
+  --markdy-node-accent-2: #f472b6;
+  border-radius: 10px;
+}
+.markdy-arch-node[data-markdy-system-type="service"] .markdy-arch-node__icon::before,
+.markdy-arch-node[data-markdy-system-type="api"] .markdy-arch-node__icon::before,
+.markdy-arch-node[data-markdy-system-type="microservice"] .markdy-arch-node__icon::before {
+  inset: 9px 7px;
+  border-top: 3px solid rgba(255, 255, 255, 0.92);
+  border-bottom: 3px solid rgba(255, 255, 255, 0.92);
+}
+.markdy-arch-node[data-markdy-system-type="service"] .markdy-arch-node__icon::after,
+.markdy-arch-node[data-markdy-system-type="api"] .markdy-arch-node__icon::after,
+.markdy-arch-node[data-markdy-system-type="microservice"] .markdy-arch-node__icon::after {
+  inset: 14px 7px auto;
+  border-top: 3px solid rgba(255, 255, 255, 0.92);
+}
+.markdy-arch-node[data-markdy-system-type="client"] .markdy-arch-node__icon::before,
+.markdy-arch-node[data-markdy-system-type="user"] .markdy-arch-node__icon::before {
+  left: 8px;
+  right: 8px;
+  top: 8px;
+  height: 13px;
+  border: 2px solid rgba(255, 255, 255, 0.92);
+  border-radius: 3px;
+}
+.markdy-arch-node[data-markdy-system-type="client"] .markdy-arch-node__icon::after,
+.markdy-arch-node[data-markdy-system-type="user"] .markdy-arch-node__icon::after {
+  left: 12px;
+  right: 12px;
+  bottom: 7px;
+  border-top: 2px solid rgba(255, 255, 255, 0.92);
+}
+.markdy-arch-node[data-markdy-system-type="database"] .markdy-arch-node__icon::before,
+.markdy-arch-node[data-markdy-system-type="db"] .markdy-arch-node__icon::before,
+.markdy-arch-node[data-markdy-system-type="cache"] .markdy-arch-node__icon::before {
+  inset: 7px 7px 9px;
+  border: 2px solid rgba(255, 255, 255, 0.92);
+  border-radius: 50% / 16%;
+}
+.markdy-arch-node[data-markdy-system-type="database"] .markdy-arch-node__icon::after,
+.markdy-arch-node[data-markdy-system-type="db"] .markdy-arch-node__icon::after,
+.markdy-arch-node[data-markdy-system-type="cache"] .markdy-arch-node__icon::after {
+  left: 8px;
+  right: 8px;
+  top: 12px;
+  border-top: 2px solid rgba(255, 255, 255, 0.72);
+}
+.markdy-arch-node[data-markdy-system-type="queue"] .markdy-arch-node__icon::before {
+  inset: 9px 8px;
+  border: 2px solid rgba(255, 255, 255, 0.92);
+  border-radius: 999px;
+}
+.markdy-arch-node[data-markdy-system-type="queue"] .markdy-arch-node__icon::after {
+  left: 13px;
+  top: 9px;
+  width: 8px;
+  height: 14px;
+  border-left: 2px solid rgba(255, 255, 255, 0.82);
+  border-right: 2px solid rgba(255, 255, 255, 0.82);
+}
+.markdy-arch-node[data-markdy-system-type="cloud"] .markdy-arch-node__icon::before,
+.markdy-arch-node[data-markdy-system-type="region"] .markdy-arch-node__icon::before {
+  left: 7px;
+  right: 7px;
+  bottom: 9px;
+  height: 12px;
+  border: 2px solid rgba(255, 255, 255, 0.92);
+  border-radius: 999px;
+}
+.markdy-arch-node[data-markdy-system-type="cloud"] .markdy-arch-node__icon::after,
+.markdy-arch-node[data-markdy-system-type="region"] .markdy-arch-node__icon::after {
+  left: 10px;
+  top: 7px;
+  width: 13px;
+  height: 13px;
+  border-top: 2px solid rgba(255, 255, 255, 0.92);
+  border-left: 2px solid rgba(255, 255, 255, 0.92);
+  border-radius: 999px 0 0 0;
+}
+.markdy-arch-node[data-markdy-system-type="container"] .markdy-arch-node__icon::before,
+.markdy-arch-node[data-markdy-system-type="cluster"] .markdy-arch-node__icon::before {
+  inset: 8px;
+  border: 2px solid rgba(255, 255, 255, 0.92);
+  border-radius: 4px;
+}
+.markdy-arch-node[data-markdy-system-type="container"] .markdy-arch-node__icon::after,
+.markdy-arch-node[data-markdy-system-type="cluster"] .markdy-arch-node__icon::after {
+  left: 10px;
+  right: 10px;
+  top: 14px;
+  border-top: 2px solid rgba(255, 255, 255, 0.72);
+}
+`;
+  doc.head.appendChild(style);
+}
+function isArchitectureNodeType(type) {
+  return ARCHITECTURE_NODE_TYPES.has(type);
+}
+function isShowcaseSurfaceType(type) {
+  return SHOWCASE_SURFACE_TYPES.has(type);
+}
+function architectureTypeLabel(type) {
+  if (type === "db") return "database";
+  if (type === "api") return "service";
+  return type;
+}
 function createActorEl(name, def, assetDefs, assetOverrides) {
   let el;
   switch (def.type) {
@@ -377,62 +1101,44 @@ function createActorEl(name, def, assetDefs, assetOverrides) {
       el = createFigureEl(def);
       break;
     }
+    case "parking_map":
+    case "ascii_map":
+    case "game_scene":
+    case "byte_viz": {
+      el = createShowcaseSurfaceEl(def.type, def);
+      break;
+    }
     case "service":
+    case "api":
+    case "microservice":
     case "client":
+    case "user":
     case "db":
-    case "queue": {
+    case "database":
+    case "queue":
+    case "cache":
+    case "cloud":
+    case "region":
+    case "container":
+    case "cluster": {
+      ensureArchitectureStyles(document);
       const card = document.createElement("div");
+      card.className = "markdy-arch-node";
+      card.dataset.markdySystemType = def.type;
+      card.setAttribute("role", "img");
+      card.setAttribute("aria-label", `${architectureTypeLabel(def.type)} ${def.args[0] ?? name}`);
+      const icon = document.createElement("span");
+      icon.className = "markdy-arch-node__icon";
+      icon.setAttribute("aria-hidden", "true");
       const label = document.createElement("div");
+      label.className = "markdy-arch-node__label";
       label.textContent = def.args[0] ?? "";
-      Object.assign(label.style, {
-        fontFamily: "system-ui, -apple-system, sans-serif",
-        fontSize: `${def.size ?? 16}px`,
-        fontWeight: "600",
-        color: "#e2e8f0",
-        textAlign: "center",
-        lineHeight: "1.2",
-        pointerEvents: "none",
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        maxWidth: "100%"
-      });
-      Object.assign(card.style, {
-        width: "180px",
-        height: "84px",
-        boxSizing: "border-box",
-        border: "1px solid #475569",
-        background: "#0f172a",
-        display: "grid",
-        placeItems: "center",
-        padding: "10px 12px"
-      });
-      if (def.type === "service") {
-        card.style.borderRadius = "12px";
-        card.style.background = "linear-gradient(180deg, #1e293b 0%, #0f172a 100%)";
-      } else if (def.type === "client") {
-        const bar = document.createElement("div");
-        Object.assign(bar.style, {
-          position: "absolute",
-          top: "8px",
-          left: "8px",
-          right: "8px",
-          height: "8px",
-          borderRadius: "6px",
-          background: "#334155"
-        });
-        card.style.position = "relative";
-        card.style.borderRadius = "10px";
-        card.style.paddingTop = "20px";
-        card.appendChild(bar);
-      } else if (def.type === "db") {
-        card.style.borderRadius = "50% / 14%";
-        card.style.background = "linear-gradient(180deg, #334155 0%, #0f172a 70%)";
-        card.style.boxShadow = "inset 0 10px 0 rgba(226, 232, 240, 0.12)";
-      } else if (def.type === "queue") {
-        card.style.borderRadius = "8px";
-        card.style.boxShadow = "-6px -6px 0 rgba(30, 41, 59, 0.9), -12px -12px 0 rgba(15, 23, 42, 0.9)";
-      }
+      label.style.fontSize = `${def.size ?? 15}px`;
+      const typeLabel = document.createElement("span");
+      typeLabel.className = "markdy-arch-node__type";
+      typeLabel.textContent = architectureTypeLabel(def.type);
+      label.appendChild(typeLabel);
+      card.appendChild(icon);
       card.appendChild(label);
       el = card;
       break;
@@ -456,82 +1162,74 @@ function createActorEl(name, def, assetDefs, assetOverrides) {
   el.style.opacity = String(def.opacity ?? 1);
   if (def.z !== void 0) el.style.zIndex = String(def.z);
   else if (def.type === "caption") el.style.zIndex = "100";
+  else if (isShowcaseSurfaceType(def.type)) el.style.zIndex = "25";
+  else if (isArchitectureNodeType(def.type)) el.style.zIndex = "10";
   return el;
 }
 
-// src/animations.ts
-var DEFAULT_EASE_BY_ACTION = {
-  enter: "out",
-  fade_in: "out",
-  exit: "in",
-  fade_out: "in"
-};
-function isSceneDark(scene) {
-  const bg = scene.style.background || "white";
-  let hex = bg.trim().replace(/^#/, "");
-  if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-  if (hex.length === 6) {
-    const r = parseInt(hex.slice(0, 2), 16);
-    const g = parseInt(hex.slice(2, 4), 16);
-    const b = parseInt(hex.slice(4, 6), 16);
-    return 0.299 * r + 0.587 * g + 0.114 * b <= 140;
-  }
-  const dark = { black: true, "#000": true, "#000000": true };
-  return dark[bg.toLowerCase()] ?? false;
+// src/camera.ts
+function freshCameraState() {
+  return { x: 0, y: 0, zoom: 1 };
 }
-function buildAnimations(ast, actorEls, scene, assetOverrides, faceSwaps) {
-  const anims = [];
-  const states = /* @__PURE__ */ new Map();
-  for (const [name, def] of Object.entries(ast.actors)) {
-    states.set(name, stateFrom(def));
-  }
-  const captionActors = /* @__PURE__ */ new Set();
-  for (const [name, def] of Object.entries(ast.actors)) {
-    if (def.type === "caption") captionActors.add(name);
-  }
-  const txFor = (actorName) => captionActors.has(actorName) ? txCaption : tx;
-  const events = [...ast.events].sort((a, b) => a.time - b.time);
-  preInitInlineStyles(ast, actorEls, states, events, txFor);
-  const cameraState = freshCameraState();
-  for (const ev of events) {
-    const delayMs = ev.time * 1e3;
-    const durMs = Math.max(
-      1,
-      (typeof ev.params.dur === "number" ? ev.params.dur : 0.5) * 1e3
-    );
-    const easing = toEasing(ev.params.ease ?? DEFAULT_EASE_BY_ACTION[ev.action]);
-    const baseOpts = {
-      delay: delayMs,
-      duration: durMs,
-      fill: "forwards",
-      easing
-    };
-    if (ev.actor === "camera") {
-      buildCameraAction(ev, scene, ast, baseOpts, anims, cameraState);
-      continue;
+function cameraTx(s) {
+  return `translate(${-s.x}px, ${-s.y}px) scale(${s.zoom})`;
+}
+var DEFAULT_SHAKE_INTENSITY = 8;
+function buildCameraAction(ev, scene, ast, baseOpts, anims, state) {
+  switch (ev.action) {
+    case "pan": {
+      const to = ev.params.to;
+      if (!to) break;
+      const next = {
+        ...state,
+        x: to[0] - ast.meta.width / 2,
+        y: to[1] - ast.meta.height / 2
+      };
+      anims.push(
+        scene.animate([{ transform: cameraTx(state) }, { transform: cameraTx(next) }], baseOpts)
+      );
+      state.x = next.x;
+      state.y = next.y;
+      break;
     }
-    const el = actorEls.get(ev.actor);
-    const s = states.get(ev.actor);
-    if (!el || !s) continue;
-    buildAction(
-      ev,
-      el,
-      s,
-      baseOpts,
-      delayMs,
-      durMs,
-      ast,
-      states,
-      actorEls,
-      scene,
-      assetOverrides,
-      faceSwaps,
-      anims,
-      txFor(ev.actor)
-    );
+    case "zoom": {
+      const next = {
+        ...state,
+        zoom: typeof ev.params.to === "number" ? ev.params.to : state.zoom
+      };
+      anims.push(
+        scene.animate([{ transform: cameraTx(state) }, { transform: cameraTx(next) }], baseOpts)
+      );
+      state.zoom = next.zoom;
+      break;
+    }
+    case "shake": {
+      const mag = typeof ev.params.intensity === "number" ? ev.params.intensity : DEFAULT_SHAKE_INTENSITY;
+      const at = (dx, dy, offset) => ({
+        transform: cameraTx({ ...state, x: state.x + dx, y: state.y + dy }),
+        offset
+      });
+      anims.push(
+        scene.animate(
+          [
+            at(0, 0, 0),
+            at(-mag, -mag * 0.4, 0.15),
+            at(mag, mag * 0.4, 0.35),
+            at(-mag * 0.6, mag * 0.3, 0.55),
+            at(mag * 0.5, -mag * 0.3, 0.75),
+            at(0, 0, 1)
+          ],
+          { ...baseOpts, easing: "linear" }
+        )
+      );
+      break;
+    }
+    default:
+      break;
   }
-  return anims;
 }
+
+// src/stage.ts
 function offscreenState(s, direction, sceneWidth, sceneHeight) {
   const out = { ...s };
   switch (direction) {
@@ -561,113 +1259,409 @@ function preInitInlineStyles(ast, actorEls, states, events, txFor) {
     const s = states.get(name);
     if (!el || !s) continue;
     const firstEv = firstEventByActor.get(name);
-    const txFn = txFor(name);
-    if (firstEv?.action === "enter") {
+    if (!firstEv) continue;
+    if (firstEv.action === "enter") {
       const from = String(firstEv.params.from ?? "left");
-      const offscreen = offscreenState(s, from, ast.meta.width, ast.meta.height);
-      el.style.transform = txFn(offscreen);
+      el.style.transform = txFor(name)(offscreenState(s, from, ast.meta.width, ast.meta.height));
     }
-    if (firstEv?.action === "fade_in" && (def.opacity === void 0 || def.opacity > 0)) {
+    if (firstEv.action === "fade_in" && (def.opacity === void 0 || def.opacity > 0)) {
       el.style.opacity = "0";
     }
   }
 }
-function freshCameraState() {
-  return { x: 0, y: 0, zoom: 1 };
+
+// src/actions/figure.ts
+function sideOf(ctx) {
+  return String(ctx.ev.params.side ?? "right") === "left" ? "left" : "right";
 }
-function cameraTx(s) {
-  return `translate(${-s.x}px, ${-s.y}px) scale(${s.zoom})`;
+function partEl(ctx, part) {
+  const selector = PART_SEL[part];
+  return selector ? ctx.el.querySelector(selector) : null;
 }
-function buildCameraAction(ev, scene, ast, baseOpts, anims, cameraState) {
-  const s = cameraState;
-  switch (ev.action) {
-    case "pan": {
-      const to = ev.params.to;
-      if (!to) break;
-      const sceneW = ast.meta.width;
-      const sceneH = ast.meta.height;
-      const targetX = to[0] - sceneW / 2;
-      const targetY = to[1] - sceneH / 2;
-      const next = { ...s, x: targetX, y: targetY };
-      anims.push(
-        scene.animate(
-          [{ transform: cameraTx(s) }, { transform: cameraTx(next) }],
-          baseOpts
-        )
-      );
-      s.x = next.x;
-      s.y = next.y;
-      break;
-    }
-    case "zoom": {
-      const to = typeof ev.params.to === "number" ? ev.params.to : s.zoom;
-      const next = { ...s, zoom: to };
-      anims.push(
-        scene.animate(
-          [{ transform: cameraTx(s) }, { transform: cameraTx(next) }],
-          baseOpts
-        )
-      );
-      s.zoom = next.zoom;
-      break;
-    }
-    case "shake": {
-      const mag = typeof ev.params.intensity === "number" ? ev.params.intensity : 8;
-      anims.push(
-        scene.animate(
-          [
-            { transform: cameraTx(s), offset: 0 },
-            { transform: cameraTx({ ...s, x: s.x - mag, y: s.y - mag * 0.4 }), offset: 0.15 },
-            { transform: cameraTx({ ...s, x: s.x + mag, y: s.y + mag * 0.4 }), offset: 0.35 },
-            { transform: cameraTx({ ...s, x: s.x - mag * 0.6, y: s.y + mag * 0.3 }), offset: 0.55 },
-            { transform: cameraTx({ ...s, x: s.x + mag * 0.5, y: s.y - mag * 0.3 }), offset: 0.75 },
-            { transform: cameraTx(s), offset: 1 }
-          ],
-          { ...baseOpts, easing: "linear" }
-        )
-      );
-      break;
+function rotateKeyframe(deg, offset) {
+  return offset === void 0 ? { transform: `rotate(${deg}deg)` } : { transform: `rotate(${deg}deg)`, offset };
+}
+function swingLimb(ctx, part, extendDeg, peakOffset) {
+  const el = partEl(ctx, part);
+  if (!el) return;
+  const rest = readRotation(el);
+  ctx.anims.push(
+    el.animate([rotateKeyframe(rest), rotateKeyframe(extendDeg, peakOffset), rotateKeyframe(rest)], {
+      ...ctx.baseOpts,
+      easing: "ease-in-out",
+      fill: "forwards"
+    })
+  );
+}
+var punch = (ctx) => {
+  const side = sideOf(ctx);
+  swingLimb(ctx, side === "left" ? "arm_left" : "arm_right", side === "left" ? -75 : 75, 0.35);
+};
+var kick = (ctx) => {
+  const side = sideOf(ctx);
+  swingLimb(ctx, side === "left" ? "leg_left" : "leg_right", side === "left" ? -100 : 100, 0.38);
+};
+var wave = (ctx) => {
+  const side = sideOf(ctx);
+  const el = partEl(ctx, side === "left" ? "arm_left" : "arm_right");
+  if (!el) return;
+  const rest = readRotation(el);
+  const up = side === "left" ? 70 : -70;
+  const inward = side === "left" ? 50 : -50;
+  ctx.anims.push(
+    el.animate(
+      [
+        rotateKeyframe(rest, 0),
+        rotateKeyframe(up, 0.2),
+        rotateKeyframe(inward, 0.4),
+        rotateKeyframe(up, 0.55),
+        rotateKeyframe(inward, 0.7),
+        rotateKeyframe(up, 0.85),
+        rotateKeyframe(rest, 1)
+      ],
+      { ...ctx.baseOpts, easing: "ease-in-out", fill: "forwards" }
+    )
+  );
+};
+var nod = (ctx) => {
+  const el = partEl(ctx, "head");
+  if (!el) return;
+  const rest = readRotation(el);
+  const down = 15;
+  ctx.anims.push(
+    el.animate(
+      [
+        rotateKeyframe(rest, 0),
+        rotateKeyframe(down, 0.35),
+        rotateKeyframe(rest, 0.65),
+        rotateKeyframe(down, 0.8),
+        rotateKeyframe(rest, 1)
+      ],
+      { ...ctx.baseOpts, easing: "ease-in-out", fill: "forwards" }
+    )
+  );
+};
+function commitRotation(el, deg) {
+  el.style.transform = el.style.transform.replace(/rotate\([^)]*\)/, `rotate(${deg}deg)`);
+}
+var rotatePart = (ctx) => {
+  const el = partEl(ctx, String(ctx.ev.params.part ?? ""));
+  if (!el) return;
+  const from = readRotation(el);
+  const to = typeof ctx.ev.params.to === "number" ? ctx.ev.params.to : from;
+  ctx.anims.push(
+    el.animate([rotateKeyframe(from), rotateKeyframe(to)], { ...ctx.baseOpts, fill: "forwards" })
+  );
+  commitRotation(el, to);
+};
+var POSEABLE_PARTS = ["arm_left", "arm_right", "leg_left", "leg_right", "head", "body"];
+var pose = (ctx) => {
+  for (const part of POSEABLE_PARTS) {
+    const to = ctx.ev.params[part];
+    if (typeof to !== "number") continue;
+    const el = partEl(ctx, part);
+    if (!el) continue;
+    ctx.anims.push(
+      el.animate([rotateKeyframe(readRotation(el)), rotateKeyframe(to)], {
+        ...ctx.baseOpts,
+        fill: "forwards"
+      })
+    );
+    commitRotation(el, to);
+  }
+};
+var face = (ctx) => {
+  const el = ctx.el.querySelector("[data-fig-face]");
+  if (!el) return;
+  const emoji = String(ctx.ev.params.text ?? ctx.ev.params._0 ?? "");
+  if (emoji) ctx.faceSwaps.push({ timeMs: ctx.ev.time * 1e3, el, emoji });
+};
+
+// src/actions/transform.ts
+var move = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
+  const to = ev.params.to;
+  const toX = to?.[0] ?? state.x;
+  const toY = to?.[1] ?? state.y;
+  anims.push(el.animate([{ transform: tx2(state) }, { transform: tx2({ ...state, x: toX, y: toY }) }], baseOpts));
+  state.x = toX;
+  state.y = toY;
+};
+var enter = ({ ev, el, state, baseOpts, ast, anims, tx: tx2 }) => {
+  const from = String(ev.params.from ?? "left");
+  const fromState = offscreenState(state, from, ast.meta.width, ast.meta.height);
+  anims.push(
+    el.animate(
+      [
+        { transform: tx2(fromState), opacity: state.opacity },
+        { transform: tx2(state), opacity: 1 }
+      ],
+      baseOpts
+    )
+  );
+  state.opacity = 1;
+};
+var exit = ({ ev, el, state, baseOpts, ast, anims, tx: tx2 }) => {
+  const to = String(ev.params.to ?? "right");
+  const toState = offscreenState(state, to, ast.meta.width, ast.meta.height);
+  anims.push(
+    el.animate(
+      [
+        { transform: tx2(state), opacity: state.opacity },
+        { transform: tx2(toState), opacity: 0 }
+      ],
+      baseOpts
+    )
+  );
+  state.x = toState.x;
+  state.y = toState.y;
+  state.opacity = 0;
+};
+var fadeIn = ({ el, state, baseOpts, anims }) => {
+  anims.push(el.animate([{ opacity: 0 }, { opacity: 1 }], baseOpts));
+  state.opacity = 1;
+};
+var fadeOut = ({ el, state, baseOpts, anims }) => {
+  anims.push(el.animate([{ opacity: state.opacity }, { opacity: 0 }], baseOpts));
+  state.opacity = 0;
+};
+var scale = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
+  const to = typeof ev.params.to === "number" ? ev.params.to : state.scale;
+  anims.push(el.animate([{ transform: tx2(state) }, { transform: tx2({ ...state, scale: to }) }], baseOpts));
+  state.scale = to;
+};
+var rotate = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
+  const to = typeof ev.params.to === "number" ? ev.params.to : state.rotate;
+  anims.push(el.animate([{ transform: tx2(state) }, { transform: tx2({ ...state, rotate: to }) }], baseOpts));
+  state.rotate = to;
+};
+var shake = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
+  const mag = typeof ev.params.intensity === "number" ? ev.params.intensity : 5;
+  anims.push(
+    el.animate(
+      [
+        { transform: tx2(state), offset: 0 },
+        { transform: tx2({ ...state, x: state.x + mag }), offset: 0.2 },
+        { transform: tx2({ ...state, x: state.x - mag }), offset: 0.4 },
+        { transform: tx2({ ...state, x: state.x + mag }), offset: 0.6 },
+        { transform: tx2({ ...state, x: state.x - mag }), offset: 0.8 },
+        { transform: tx2(state), offset: 1 }
+      ],
+      { ...baseOpts, easing: "linear" }
+    )
+  );
+};
+var jump = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
+  const height = typeof ev.params.height === "number" ? ev.params.height : 30;
+  anims.push(
+    el.animate(
+      [
+        { transform: tx2(state), offset: 0 },
+        { transform: tx2({ ...state, scale: state.scale * 0.9 }), offset: 0.1 },
+        { transform: tx2({ ...state, y: state.y - height, scale: state.scale * 1.1 }), offset: 0.45 },
+        { transform: tx2({ ...state, y: state.y - height * 0.3, scale: state.scale * 1.05 }), offset: 0.7 },
+        { transform: tx2({ ...state, scale: state.scale * 0.92 }), offset: 0.88 },
+        { transform: tx2(state), offset: 1 }
+      ],
+      { ...baseOpts, easing: "ease-in-out" }
+    )
+  );
+};
+var bounce = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
+  const intensity = typeof ev.params.intensity === "number" ? ev.params.intensity : 15;
+  const count = typeof ev.params.count === "number" ? ev.params.count : 3;
+  const keyframes = [{ transform: tx2(state), offset: 0 }];
+  for (let i = 0; i < count; i++) {
+    const amp = intensity * Math.pow(0.55, i);
+    const baseOffset = (i + 0.5) / (count + 0.5);
+    const peakOffset = Math.min(baseOffset, 0.98);
+    const valleyOffset = Math.min(baseOffset + 0.25 / (count + 0.5), 0.99);
+    keyframes.push({ transform: tx2({ ...state, y: state.y - amp }), offset: peakOffset });
+    if (i < count - 1) {
+      keyframes.push({ transform: tx2(state), offset: valleyOffset });
     }
-    default:
-      break;
   }
+  keyframes.push({ transform: tx2(state), offset: 1 });
+  anims.push(el.animate(keyframes, { ...baseOpts, easing: "ease-out" }));
+};
+
+// src/actions/effects.ts
+function numeric(value, fallback) {
+  return typeof value === "number" ? value : fallback;
 }
-var FLOW_STROKE_BY_ACTION = {
-  request: "#38bdf8",
-  response: "#a78bfa",
-  emit: "#f59e0b"
+function stringParam(value, fallback) {
+  return typeof value === "string" && value.length > 0 ? value : fallback;
+}
+var spring = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
+  const to = ev.params.to;
+  const toX = to?.[0] ?? state.x;
+  const toY = to?.[1] ?? state.y;
+  const stiffness = numeric(ev.params.stiffness, 0.18);
+  const overshootX = toX + (toX - state.x) * stiffness;
+  const overshootY = toY + (toY - state.y) * stiffness;
+  anims.push(
+    el.animate(
+      [
+        { transform: tx2(state), offset: 0 },
+        { transform: tx2({ ...state, x: overshootX, y: overshootY }), offset: 0.72 },
+        { transform: tx2({ ...state, x: toX, y: toY }), offset: 1 }
+      ],
+      { ...baseOpts, easing: "cubic-bezier(.2,1.35,.35,1)" }
+    )
+  );
+  state.x = toX;
+  state.y = toY;
 };
+var followPath = ({ ev, el, baseOpts, anims }) => {
+  const path = stringParam(ev.params.path, "M 0 0 L 120 0");
+  const rotate2 = ev.params.rotate === false ? "0deg" : "auto";
+  anims.push(
+    el.animate(
+      [
+        { offsetPath: `path('${path}')`, offsetDistance: "0%", offsetRotate: rotate2 },
+        { offsetPath: `path('${path}')`, offsetDistance: "100%", offsetRotate: rotate2 }
+      ],
+      baseOpts
+    )
+  );
+};
+var pulse = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
+  const amount = numeric(ev.params.amount, 1.08);
+  anims.push(
+    el.animate(
+      [
+        { transform: tx2(state), offset: 0 },
+        { transform: tx2({ ...state, scale: state.scale * amount }), offset: 0.48 },
+        { transform: tx2(state), offset: 1 }
+      ],
+      { ...baseOpts, easing: "ease-in-out" }
+    )
+  );
+};
+var glow = ({ ev, el, baseOpts, anims }) => {
+  const color = stringParam(ev.params.color, "#38bdf8");
+  const strength = numeric(ev.params.strength, 24);
+  anims.push(
+    el.animate(
+      [
+        { filter: "drop-shadow(0 0 0 transparent)", boxShadow: "0 0 0 rgba(0,0,0,0)" },
+        { filter: `drop-shadow(0 0 ${strength}px ${color})`, boxShadow: `0 0 ${strength}px ${color}` },
+        { filter: "drop-shadow(0 0 0 transparent)", boxShadow: "0 0 0 rgba(0,0,0,0)" }
+      ],
+      { ...baseOpts, easing: "ease-in-out" }
+    )
+  );
+};
+var ripple = ({ ev, el, delayMs, durMs, anims }) => {
+  const color = stringParam(ev.params.color, "#38bdf8");
+  const size = numeric(ev.params.size, 140);
+  const ring = document.createElement("span");
+  ring.setAttribute("data-markdy-ripple", "1");
+  Object.assign(ring.style, {
+    position: "absolute",
+    left: "50%",
+    top: "50%",
+    width: `${size}px`,
+    height: `${size}px`,
+    marginLeft: `${-size / 2}px`,
+    marginTop: `${-size / 2}px`,
+    border: `2px solid ${color}`,
+    borderRadius: "999px",
+    pointerEvents: "none",
+    opacity: "0"
+  });
+  el.appendChild(ring);
+  anims.push(
+    ring.animate(
+      [
+        { transform: "scale(0.2)", opacity: 0.6 },
+        { transform: "scale(1)", opacity: 0 }
+      ],
+      { delay: delayMs, duration: durMs, fill: "forwards", easing: "ease-out" }
+    )
+  );
+};
+var blur = ({ ev, el, baseOpts, anims }) => {
+  const from = numeric(ev.params.from, 0);
+  const to = numeric(ev.params.to, 8);
+  anims.push(el.animate([{ filter: `blur(${from}px)` }, { filter: `blur(${to}px)` }], baseOpts));
+};
+var lineReveal = ({ ev, el, baseOpts, anims }) => {
+  const from = stringParam(ev.params.from, "left");
+  const start = from === "right" ? "inset(0 0 0 100%)" : "inset(0 100% 0 0)";
+  anims.push(el.animate([{ clipPath: start }, { clipPath: "inset(0 0 0 0)" }], baseOpts));
+};
+var mask = ({ ev, el, baseOpts, anims }) => {
+  const from = numeric(ev.params.from, 0);
+  const to = numeric(ev.params.to, 120);
+  anims.push(
+    el.animate(
+      [
+        { clipPath: `circle(${from}% at 50% 50%)` },
+        { clipPath: `circle(${to}% at 50% 50%)` }
+      ],
+      baseOpts
+    )
+  );
+};
+var parallax = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
+  const depth = numeric(ev.params.depth, 0.35);
+  const by = ev.params.by;
+  const dx = (by?.[0] ?? 24) * depth;
+  const dy = (by?.[1] ?? 0) * depth;
+  anims.push(
+    el.animate(
+      [
+        { transform: tx2(state) },
+        { transform: tx2({ ...state, x: state.x + dx, y: state.y + dy }) }
+      ],
+      baseOpts
+    )
+  );
+};
+
+// src/geometry/rect.ts
+var ACTOR_SIZES = {
+  service: { width: 184, height: 88 },
+  api: { width: 184, height: 88 },
+  microservice: { width: 184, height: 88 },
+  client: { width: 184, height: 88 },
+  user: { width: 184, height: 88 },
+  db: { width: 184, height: 88 },
+  database: { width: 184, height: 88 },
+  queue: { width: 184, height: 88 },
+  cache: { width: 184, height: 88 },
+  cloud: { width: 184, height: 88 },
+  region: { width: 184, height: 88 },
+  container: { width: 184, height: 88 },
+  cluster: { width: 184, height: 88 },
+  box: { width: 100, height: 100 },
+  caption: { width: 260, height: 56 },
+  figure: { width: 120, height: 170 },
+  parking_map: { width: 390, height: 250 },
+  ascii_map: { width: 390, height: 250 },
+  game_scene: { width: 390, height: 250 },
+  byte_viz: { width: 420, height: 250 }
+};
+var DEFAULT_ACTOR_SIZE = { width: 140, height: 42 };
 function actorSizeByType(type) {
-  switch (type) {
-    case "service":
-    case "client":
-    case "db":
-    case "queue":
-      return { width: 180, height: 84 };
-    case "box":
-      return { width: 100, height: 100 };
-    case "caption":
-      return { width: 260, height: 56 };
-    case "figure":
-      return { width: 120, height: 170 };
-    default:
-      return { width: 140, height: 42 };
-  }
+  return ACTOR_SIZES[type] ?? DEFAULT_ACTOR_SIZE;
 }
 function actorCenter(state, actorType) {
-  const { width, height } = actorSizeByType(actorType);
-  return {
-    x: state.x + width / 2,
-    y: state.y + height / 2
-  };
+  const rect = actorRect(state, actorType);
+  return { x: rect.x1 + (rect.x2 - rect.x1) / 2, y: rect.y1 + (rect.y2 - rect.y1) / 2 };
 }
 function actorRect(state, actorType) {
   const { width, height } = actorSizeByType(actorType);
+  const scale2 = Math.max(1e-3, state.scale);
+  const scaledWidth = width * scale2;
+  const scaledHeight = height * scale2;
+  const dx = (scaledWidth - width) / 2;
+  const dy = (scaledHeight - height) / 2;
   return {
-    x1: state.x,
-    y1: state.y,
-    x2: state.x + width,
-    y2: state.y + height
+    x1: state.x - dx,
+    y1: state.y - dy,
+    x2: state.x + width + dx,
+    y2: state.y + height + dy
   };
 }
 function inflateRect(rect, pad) {
@@ -706,12 +1700,14 @@ function countPathIntersections(points, obstacles) {
   }
   return hits;
 }
-function toPathD(points) {
-  return points.map((p, i) => `${i === 0 ? "M" : "L"} ${round1(p.x)} ${round1(p.y)}`).join(" ");
-}
+
+// src/geometry/path.ts
 function round1(n) {
   return Math.round(n * 10) / 10;
 }
+function toPathD(points) {
+  return points.map((p, i) => `${i === 0 ? "M" : "L"} ${round1(p.x)} ${round1(p.y)}`).join(" ");
+}
 function polylineLength(points) {
   let total = 0;
   for (let i = 0; i < points.length - 1; i++) {
@@ -719,26 +1715,67 @@ function polylineLength(points) {
   }
   return Math.max(1, total);
 }
-function pointAtDistance(points, dist) {
-  let remain = dist;
+function segmentLength(a, b) {
+  return Math.hypot(b.x - a.x, b.y - a.y);
+}
+function labelPointForPath(points, lane) {
+  if (points.length < 2) return points[0] ?? { x: 0, y: 0 };
+  let bestIndex = 0;
+  let bestLength = -1;
   for (let i = 0; i < points.length - 1; i++) {
-    const a = points[i];
-    const b = points[i + 1];
-    const seg = Math.hypot(b.x - a.x, b.y - a.y);
-    if (remain <= seg || i === points.length - 2) {
-      const t = seg <= 0 ? 0 : remain / seg;
-      return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
+    const len = segmentLength(points[i], points[i + 1]);
+    if (len > bestLength) {
+      bestIndex = i;
+      bestLength = len;
     }
-    remain -= seg;
   }
-  return points[0];
+  const a = points[bestIndex];
+  const b = points[bestIndex + 1];
+  const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+  const offset = lane * 8;
+  if (Math.abs(a.x - b.x) >= Math.abs(a.y - b.y)) {
+    return { x: mid.x, y: mid.y - 10 - offset };
+  }
+  return { x: mid.x + 10 + offset, y: mid.y };
+}
+function clamp(n, min, max) {
+  if (max < min) return n;
+  return Math.min(max, Math.max(min, n));
+}
+function clampPointToScene(point, ast) {
+  const pad = 14;
+  return {
+    x: round1(clamp(point.x, pad, ast.meta.width - pad)),
+    y: round1(clamp(point.y, pad, ast.meta.height - pad))
+  };
+}
+function routeLength(points) {
+  let total = 0;
+  for (let i = 0; i < points.length - 1; i++) total += segmentLength(points[i], points[i + 1]);
+  return total;
+}
+function routeBends(points) {
+  let bends = 0;
+  for (let i = 1; i < points.length - 1; i++) {
+    const prev = points[i - 1];
+    const cur = points[i];
+    const next = points[i + 1];
+    const dx1 = Math.sign(cur.x - prev.x);
+    const dy1 = Math.sign(cur.y - prev.y);
+    const dx2 = Math.sign(next.x - cur.x);
+    const dy2 = Math.sign(next.y - cur.y);
+    if (dx1 !== dx2 || dy1 !== dy2) bends++;
+  }
+  return bends;
 }
 function routeFlowPath(sourceName, targetName, sourceState, targetState, states, ast, lane) {
-  const sourceRect = actorRect(sourceState, ast.actors[sourceName]?.type ?? "box");
-  const targetRect = actorRect(targetState, ast.actors[targetName]?.type ?? "box");
+  const sourceType = ast.actors[sourceName]?.type ?? "box";
+  const targetType = ast.actors[targetName]?.type ?? "box";
+  const sourceRect = actorRect(sourceState, sourceType);
+  const targetRect = actorRect(targetState, targetType);
   const laneShift = lane * 18;
-  const sourceCenter = actorCenter(sourceState, ast.actors[sourceName]?.type ?? "box");
-  const targetCenter = actorCenter(targetState, ast.actors[targetName]?.type ?? "box");
+  const sourceCenter = actorCenter(sourceState, sourceType);
+  const targetCenter = actorCenter(targetState, targetType);
   const horizontalPrimary = Math.abs(targetCenter.x - sourceCenter.x) >= Math.abs(targetCenter.y - sourceCenter.y);
   const source = horizontalPrimary ? { x: targetCenter.x >= sourceCenter.x ? sourceRect.x2 : sourceRect.x1, y: sourceCenter.y } : { x: sourceCenter.x, y: targetCenter.y >= sourceCenter.y ? sourceRect.y2 : sourceRect.y1 };
   const target = horizontalPrimary ? { x: targetCenter.x >= sourceCenter.x ? targetRect.x1 : targetRect.x2, y: targetCenter.y } : { x: targetCenter.x, y: targetCenter.y >= sourceCenter.y ? targetRect.y1 : targetRect.y2 };
@@ -766,23 +1803,42 @@ function routeFlowPath(sourceName, targetName, sourceState, targetState, states,
     [source, { x: source.x, y: topLane }, { x: target.x, y: topLane }, target],
     [source, { x: source.x, y: bottomLane }, { x: target.x, y: bottomLane }, target]
   );
+  const minObstacleX = obstacles.length ? Math.min(...obstacles.map((o) => o.x1)) : Math.min(source.x, target.x);
+  const maxObstacleX = obstacles.length ? Math.max(...obstacles.map((o) => o.x2)) : Math.max(source.x, target.x);
+  const leftLane = Math.max(16, minObstacleX - 24 - lane * 12);
+  const rightLane = Math.min(ast.meta.width - 16, maxObstacleX + 24 + lane * 12);
+  candidates.push(
+    [source, { x: leftLane, y: source.y }, { x: leftLane, y: target.y }, target],
+    [source, { x: rightLane, y: source.y }, { x: rightLane, y: target.y }, target]
+  );
   let best = candidates[0];
-  let bestHits = Number.POSITIVE_INFINITY;
+  let bestScore = Number.POSITIVE_INFINITY;
   for (const candidate of candidates) {
     const hits = countPathIntersections(candidate, obstacles);
-    if (hits < bestHits) {
+    const score = hits * 1e5 + routeBends(candidate) * 800 + routeLength(candidate);
+    if (score < bestScore) {
       best = candidate;
-      bestHits = hits;
-      if (hits === 0) break;
+      bestScore = score;
     }
   }
-  return best;
+  return best.map((point) => clampPointToScene(point, ast));
 }
+
+// src/actions/flow.ts
+var EDGE_LAYER_ATTR = "data-markdy-edge-layer";
+var STROKE_BY_ACTION = {
+  request: "#38bdf8",
+  response: "#a78bfa",
+  emit: "#f59e0b"
+};
+var DEFAULT_STROKE = "#38bdf8";
+var LABEL_MAX_CHARS = 28;
+var EDGE_FADE_MS = 140;
 function ensureEdgeLayer(scene) {
-  const existing = scene.querySelector("svg[data-markdy-edge-layer='1']");
+  const existing = scene.querySelector(`svg[${EDGE_LAYER_ATTR}='1']`);
   if (existing) return existing;
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.setAttribute("data-markdy-edge-layer", "1");
+  svg.setAttribute(EDGE_LAYER_ATTR, "1");
   Object.assign(svg.style, {
     position: "absolute",
     inset: "0",
@@ -795,529 +1851,504 @@ function ensureEdgeLayer(scene) {
   scene.appendChild(svg);
   return svg;
 }
-function renderFlowEdge(ev, sourceName, targetName, sourceState, targetState, states, ast, lane, scene, baseOpts, anims) {
-  const styleToken = String(ev.params.style ?? "");
-  const isDashed = styleToken === "dashed" || styleToken === "fire_and_forget" || ev.action === "response";
-  const stroke = FLOW_STROKE_BY_ACTION[ev.action] ?? "#38bdf8";
-  const points = routeFlowPath(
-    sourceName,
-    targetName,
-    sourceState,
-    targetState,
-    states,
-    ast,
-    lane
-  );
+function ensureEdgeDefs(svg) {
+  if (svg.querySelector("defs[data-markdy-flow-defs='1']")) return;
+  const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+  defs.setAttribute("data-markdy-flow-defs", "1");
+  const glow2 = document.createElementNS("http://www.w3.org/2000/svg", "filter");
+  glow2.setAttribute("id", "markdy-flow-glow");
+  glow2.setAttribute("x", "-40%");
+  glow2.setAttribute("y", "-40%");
+  glow2.setAttribute("width", "180%");
+  glow2.setAttribute("height", "180%");
+  const blur2 = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur");
+  blur2.setAttribute("stdDeviation", "3");
+  blur2.setAttribute("result", "coloredBlur");
+  const merge = document.createElementNS("http://www.w3.org/2000/svg", "feMerge");
+  const glowNode = document.createElementNS("http://www.w3.org/2000/svg", "feMergeNode");
+  glowNode.setAttribute("in", "coloredBlur");
+  const sourceNode = document.createElementNS("http://www.w3.org/2000/svg", "feMergeNode");
+  sourceNode.setAttribute("in", "SourceGraphic");
+  merge.append(glowNode, sourceNode);
+  glow2.append(blur2, merge);
+  const arrow = document.createElementNS("http://www.w3.org/2000/svg", "marker");
+  arrow.setAttribute("id", "markdy-flow-arrow");
+  arrow.setAttribute("viewBox", "0 0 10 10");
+  arrow.setAttribute("refX", "8");
+  arrow.setAttribute("refY", "5");
+  arrow.setAttribute("markerWidth", "6");
+  arrow.setAttribute("markerHeight", "6");
+  arrow.setAttribute("orient", "auto-start-reverse");
+  const arrowPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  arrowPath.setAttribute("d", "M 1 1 L 9 5 L 1 9 z");
+  arrowPath.setAttribute("fill", "context-stroke");
+  arrow.appendChild(arrowPath);
+  defs.append(glow2, arrow);
+  svg.prepend(defs);
+}
+function isDashed(ctx) {
+  const style = String(ctx.ev.params.style ?? "");
+  return style === "dashed" || style === "fire_and_forget" || ctx.ev.action === "response";
+}
+function buildEdge(ctx, targetName) {
+  const { ev, state, states, ast, scene, baseOpts, anims } = ctx;
+  const targetState = states.get(targetName);
+  if (!targetState) return;
+  const lane = ev.line % 5 - 2;
+  const points = routeFlowPath(ev.actor, targetName, state, targetState, states, ast, lane);
   const length = polylineLength(points);
-  const midPoint = pointAtDistance(points, length * 0.5);
   const pathD = toPathD(points);
+  const stroke = STROKE_BY_ACTION[ev.action] ?? DEFAULT_STROKE;
   const svg = ensureEdgeLayer(scene);
+  ensureEdgeDefs(svg);
   const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
   group.setAttribute("data-markdy-flow-edge", "1");
   const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
   path.setAttribute("d", pathD);
   path.setAttribute("fill", "none");
   path.setAttribute("stroke", stroke);
-  path.setAttribute("stroke-width", "2.5");
+  path.setAttribute("stroke-width", "3");
+  path.setAttribute("stroke-linecap", "round");
+  path.setAttribute("stroke-linejoin", "round");
+  path.setAttribute("marker-end", "url(#markdy-flow-arrow)");
+  path.setAttribute("filter", "url(#markdy-flow-glow)");
   path.setAttribute("data-markdy-flow-action", ev.action);
-  path.style.strokeDasharray = isDashed ? "8 6" : `${length}`;
+  path.style.strokeDasharray = isDashed(ctx) ? "8 6" : `${length}`;
   path.style.strokeDashoffset = `${length}`;
   group.appendChild(path);
   const marker = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-  marker.setAttribute("r", "3");
+  marker.setAttribute("r", "4.5");
   marker.setAttribute("fill", stroke);
+  marker.setAttribute("filter", "url(#markdy-flow-glow)");
   marker.style.offsetPath = `path('${pathD}')`;
   marker.style.offsetDistance = "0%";
   marker.style.opacity = "0";
   group.appendChild(marker);
-  const labelRaw = String(ev.params.label ?? "");
-  if (labelRaw) {
-    const label = labelRaw.length > 28 ? `${labelRaw.slice(0, 27)}\u2026` : labelRaw;
-    const labelEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
-    labelEl.setAttribute("x", `${round1(midPoint.x)}`);
-    labelEl.setAttribute("y", `${round1(midPoint.y - 8)}`);
-    labelEl.setAttribute("text-anchor", "middle");
-    labelEl.setAttribute("font-size", "12");
-    labelEl.setAttribute("fill", "#cbd5e1");
-    labelEl.textContent = label;
-    labelEl.setAttribute("data-full-label", labelRaw);
-    group.appendChild(labelEl);
+  const labelText = String(ev.params.label ?? "");
+  if (labelText) {
+    const midPoint = labelPointForPath(points, lane);
+    const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
+    label.setAttribute("x", `${round1(midPoint.x)}`);
+    label.setAttribute("y", `${round1(midPoint.y - 8)}`);
+    label.setAttribute("text-anchor", "middle");
+    label.setAttribute("font-size", "12");
+    label.setAttribute("font-weight", "700");
+    label.setAttribute("paint-order", "stroke");
+    label.setAttribute("stroke", "rgba(2, 6, 23, 0.88)");
+    label.setAttribute("stroke-width", "5");
+    label.setAttribute("stroke-linejoin", "round");
+    label.setAttribute("fill", "#cbd5e1");
+    label.setAttribute("filter", "url(#markdy-flow-glow)");
+    label.setAttribute("data-full-label", labelText);
+    label.textContent = labelText.length > LABEL_MAX_CHARS ? `${labelText.slice(0, LABEL_MAX_CHARS - 1)}\u2026` : labelText;
+    group.appendChild(label);
   }
   svg.appendChild(group);
-  anims.push(path.animate([{ strokeDashoffset: length }, { strokeDashoffset: 0 }], baseOpts));
   anims.push(
+    path.animate([{ strokeDashoffset: length }, { strokeDashoffset: 0 }], baseOpts),
     marker.animate(
-      [{ offsetDistance: "0%", opacity: 1 }, { offsetDistance: "100%", opacity: 1 }],
+      [
+        { offsetDistance: "0%", opacity: 1 },
+        { offsetDistance: "100%", opacity: 1 }
+      ],
       baseOpts
-    )
+    ),
+    group.animate([{ opacity: 1 }, { opacity: 0 }], {
+      delay: Number(baseOpts.delay ?? 0) + Number(baseOpts.duration ?? 0),
+      duration: EDGE_FADE_MS,
+      fill: "forwards"
+    })
   );
-  const fadeOutDelay = Number(baseOpts.delay ?? 0) + Number(baseOpts.duration ?? 0);
+}
+var flowEdge = (ctx) => {
+  const targetName = String(ctx.ev.params.to ?? "");
+  if (targetName) buildEdge(ctx, targetName);
+};
+
+// src/theme.ts
+var DARK_LUMINANCE_THRESHOLD = 140;
+var NAMED_DARK = {
+  black: true,
+  "#000": true,
+  "#000000": true
+};
+function isSceneDark(scene) {
+  const bg = scene.style.background || "white";
+  let hex = bg.trim().replace(/^#/, "");
+  if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  if (hex.length === 6) {
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    return 0.299 * r + 0.587 * g + 0.114 * b <= DARK_LUMINANCE_THRESHOLD;
+  }
+  return NAMED_DARK[bg.toLowerCase()] ?? false;
+}
+function speechBubbleTheme(dark) {
+  return dark ? {
+    background: "#1e2530",
+    border: "#475569",
+    text: "#e2e8f0",
+    shadow: "0 2px 8px rgba(0,0,0,0.35)"
+  } : {
+    background: "white",
+    border: "#222",
+    text: "#222",
+    shadow: "0 2px 8px rgba(0,0,0,0.12)"
+  };
+}
+
+// src/actions/speech.ts
+var MAX_FADE_MS = 200;
+var FADE_FRACTION = 0.15;
+var say = ({ ev, el, state, delayMs, durMs, scene, anims }) => {
+  const text = String(ev.params.text ?? "");
+  const theme = speechBubbleTheme(isSceneDark(scene));
+  const inverseScale = 1 / (state.scale || 1);
+  const bubble = document.createElement("div");
+  bubble.textContent = text;
+  Object.assign(bubble.style, {
+    position: "absolute",
+    bottom: "calc(100% + 10px)",
+    left: "50%",
+    transform: `translateX(-50%) scale(${inverseScale})`,
+    transformOrigin: "center bottom",
+    background: theme.background,
+    border: `2px solid ${theme.border}`,
+    color: theme.text,
+    borderRadius: "12px",
+    padding: "6px 14px",
+    fontFamily: "system-ui, sans-serif",
+    fontSize: "15px",
+    lineHeight: "1.3",
+    whiteSpace: "nowrap",
+    maxWidth: "220px",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    pointerEvents: "none",
+    zIndex: "10",
+    boxShadow: theme.shadow,
+    opacity: "0"
+  });
+  const tail = document.createElement("span");
+  Object.assign(tail.style, {
+    position: "absolute",
+    bottom: "-10px",
+    left: "50%",
+    transform: "translateX(-50%)",
+    width: "0",
+    height: "0",
+    borderLeft: "7px solid transparent",
+    borderRight: "7px solid transparent",
+    borderTop: `10px solid ${theme.border}`
+  });
+  bubble.appendChild(tail);
+  el.style.overflow = "visible";
+  el.appendChild(bubble);
+  const fadeMs = Math.min(MAX_FADE_MS, durMs * FADE_FRACTION);
   anims.push(
-    group.animate([{ opacity: 1 }, { opacity: 0 }], {
-      delay: fadeOutDelay,
-      duration: 140,
+    bubble.animate([{ opacity: 0 }, { opacity: 1 }], {
+      delay: delayMs,
+      duration: fadeMs,
+      fill: "forwards"
+    }),
+    bubble.animate([{ opacity: 1 }, { opacity: 0 }], {
+      delay: delayMs + durMs - fadeMs,
+      duration: fadeMs,
       fill: "forwards"
     })
   );
+};
+
+// src/actions/projectile.ts
+var PROJECTILE_SIZE_PX = 32;
+function createProjectile(assetName, assetDef, assetOverrides) {
+  if (assetDef.type === "image") {
+    const img = document.createElement("img");
+    img.src = assetOverrides[assetName] ?? assetDef.value;
+    img.alt = assetName;
+    img.setAttribute("draggable", "false");
+    img.style.width = `${PROJECTILE_SIZE_PX}px`;
+    img.style.height = `${PROJECTILE_SIZE_PX}px`;
+    return img;
+  }
+  const span = document.createElement("span");
+  span.className = "iconify";
+  span.dataset.icon = assetDef.value;
+  span.style.fontSize = `${PROJECTILE_SIZE_PX}px`;
+  span.style.lineHeight = "1";
+  span.style.display = "inline-block";
+  return span;
 }
-function buildAction(ev, el, s, baseOpts, delayMs, durMs, ast, states, _actorEls, scene, assetOverrides, faceSwaps, anims, txFn) {
-  switch (ev.action) {
-    case "request":
-    case "response":
-    case "emit": {
-      const targetActorName = String(ev.params.to ?? "");
-      if (!targetActorName) break;
-      const targetState = states.get(targetActorName);
-      if (!targetState) break;
-      const lane = ev.line % 5 - 2;
-      renderFlowEdge(
-        ev,
-        ev.actor,
-        targetActorName,
-        s,
-        targetState,
-        states,
-        ast,
-        lane,
-        scene,
-        baseOpts,
-        anims
-      );
-      break;
-    }
-    // ── move ────────────────────────────────────────────────────────────────
-    case "move": {
-      const toArr = ev.params.to;
-      const toX = toArr?.[0] ?? s.x;
-      const toY = toArr?.[1] ?? s.y;
-      anims.push(
-        el.animate(
-          [{ transform: txFn(s) }, { transform: txFn({ ...s, x: toX, y: toY }) }],
-          baseOpts
-        )
-      );
-      s.x = toX;
-      s.y = toY;
-      break;
-    }
-    // ── enter ───────────────────────────────────────────────────────────────
-    // Slides the actor from the given screen edge into its current (s)
-    // position while also restoring opacity to 1. The opacity restore makes
-    // `enter` symmetric with `exit` so actors can re-enter after exiting
-    // without needing a separate fade_in.
-    case "enter": {
-      const from = String(ev.params.from ?? "left");
-      const fromState = offscreenState(s, from, ast.meta.width, ast.meta.height);
-      anims.push(
-        el.animate(
-          [
-            { transform: txFn(fromState), opacity: s.opacity },
-            { transform: txFn(s), opacity: 1 }
-          ],
-          baseOpts
-        )
-      );
-      s.opacity = 1;
-      break;
-    }
-    // ── exit ────────────────────────────────────────────────────────────────
-    // Mirror of enter: slides off-screen in the given direction while also
-    // fading opacity to 0. Universal — works on any actor type (caption, text,
-    // figure, box, sprite). Leaves `s` at the off-screen state since the
-    // actor is conceptually gone after this.
-    case "exit": {
-      const to = String(ev.params.to ?? "right");
-      const toState = offscreenState(s, to, ast.meta.width, ast.meta.height);
-      anims.push(
-        el.animate(
-          [
-            { transform: txFn(s), opacity: s.opacity },
-            { transform: txFn(toState), opacity: 0 }
-          ],
-          baseOpts
-        )
-      );
-      s.x = toState.x;
-      s.y = toState.y;
-      s.opacity = 0;
-      break;
-    }
-    // ── fade_in ─────────────────────────────────────────────────────────────
-    case "fade_in": {
-      anims.push(el.animate([{ opacity: 0 }, { opacity: 1 }], baseOpts));
-      s.opacity = 1;
-      break;
-    }
-    // ── fade_out ────────────────────────────────────────────────────────────
-    case "fade_out": {
-      anims.push(
-        el.animate([{ opacity: s.opacity }, { opacity: 0 }], baseOpts)
-      );
-      s.opacity = 0;
-      break;
-    }
-    // ── scale ───────────────────────────────────────────────────────────────
-    case "scale": {
-      const toScale = typeof ev.params.to === "number" ? ev.params.to : s.scale;
-      anims.push(
-        el.animate(
-          [{ transform: txFn(s) }, { transform: txFn({ ...s, scale: toScale }) }],
-          baseOpts
-        )
-      );
-      s.scale = toScale;
-      break;
-    }
-    // ── rotate ──────────────────────────────────────────────────────────────
-    case "rotate": {
-      const toDeg = typeof ev.params.to === "number" ? ev.params.to : s.rotate;
-      anims.push(
-        el.animate(
-          [{ transform: txFn(s) }, { transform: txFn({ ...s, rotate: toDeg }) }],
-          baseOpts
-        )
-      );
-      s.rotate = toDeg;
-      break;
-    }
-    // ── shake ───────────────────────────────────────────────────────────────
-    case "shake": {
-      const mag = typeof ev.params.intensity === "number" ? ev.params.intensity : 5;
-      anims.push(
-        el.animate(
-          [
-            { transform: txFn(s), offset: 0 },
-            { transform: txFn({ ...s, x: s.x + mag }), offset: 0.2 },
-            { transform: txFn({ ...s, x: s.x - mag }), offset: 0.4 },
-            { transform: txFn({ ...s, x: s.x + mag }), offset: 0.6 },
-            { transform: txFn({ ...s, x: s.x - mag }), offset: 0.8 },
-            { transform: txFn(s), offset: 1 }
-          ],
-          { ...baseOpts, easing: "linear" }
-        )
-      );
-      break;
-    }
-    // ── punch ───────────────────────────────────────────────────────────────
-    case "punch": {
-      const pSide = String(ev.params.side ?? "right");
-      const pArmEl = el.querySelector(
-        pSide === "left" ? "[data-fig-arm-l]" : "[data-fig-arm-r]"
-      );
-      if (!pArmEl) break;
-      const pRest = readRotation(pArmEl);
-      const pExtend = pSide === "left" ? -75 : 75;
-      anims.push(
-        pArmEl.animate(
-          [
-            { transform: `rotate(${pRest}deg)` },
-            { transform: `rotate(${pExtend}deg)`, offset: 0.35 },
-            { transform: `rotate(${pRest}deg)` }
-          ],
-          { ...baseOpts, easing: "ease-in-out", fill: "forwards" }
-        )
-      );
-      break;
-    }
-    // ── kick ────────────────────────────────────────────────────────────────
-    case "kick": {
-      const kSide = String(ev.params.side ?? "right");
-      const kLegEl = el.querySelector(
-        kSide === "left" ? "[data-fig-leg-l]" : "[data-fig-leg-r]"
-      );
-      if (!kLegEl) break;
-      const kRest = readRotation(kLegEl);
-      const kExtend = kSide === "left" ? -100 : 100;
-      anims.push(
-        kLegEl.animate(
-          [
-            { transform: `rotate(${kRest}deg)` },
-            { transform: `rotate(${kExtend}deg)`, offset: 0.38 },
-            { transform: `rotate(${kRest}deg)` }
-          ],
-          { ...baseOpts, easing: "ease-in-out", fill: "forwards" }
-        )
-      );
-      break;
-    }
-    // ── rotate_part ─────────────────────────────────────────────────────────
-    case "rotate_part": {
-      const rpName = String(ev.params.part ?? "");
-      const rpSel = PART_SEL[rpName];
-      if (!rpSel) break;
-      const rpEl = el.querySelector(rpSel);
-      if (!rpEl) break;
-      const rpFrom = readRotation(rpEl);
-      const rpTo = typeof ev.params.to === "number" ? ev.params.to : rpFrom;
-      anims.push(
-        rpEl.animate(
-          [
-            { transform: `rotate(${rpFrom}deg)` },
-            { transform: `rotate(${rpTo}deg)` }
-          ],
-          { ...baseOpts, fill: "forwards" }
-        )
-      );
-      rpEl.style.transform = rpEl.style.transform.replace(
-        /rotate\([^)]*\)/,
-        `rotate(${rpTo}deg)`
-      );
-      break;
-    }
-    // ── face ────────────────────────────────────────────────────────────────
-    case "face": {
-      const fEl = el.querySelector("[data-fig-face]");
-      if (!fEl) break;
-      const emoji = String(ev.params.text ?? ev.params._0 ?? "");
-      if (emoji) faceSwaps.push({ timeMs: ev.time * 1e3, el: fEl, emoji });
-      break;
-    }
-    // ── say ─────────────────────────────────────────────────────────────────
-    case "say": {
-      const text = String(ev.params.text ?? "");
-      const inverseScale = 1 / (s.scale || 1);
-      const sceneDark = isSceneDark(scene);
-      const bubbleBg = sceneDark ? "#1e2530" : "white";
-      const bubbleBorder = sceneDark ? "#475569" : "#222";
-      const bubbleText = sceneDark ? "#e2e8f0" : "#222";
-      const bubbleShadow = sceneDark ? "0 2px 8px rgba(0,0,0,0.35)" : "0 2px 8px rgba(0,0,0,0.12)";
-      const bubble = document.createElement("div");
-      bubble.textContent = text;
-      bubble.style.opacity = "0";
-      Object.assign(bubble.style, {
-        position: "absolute",
-        bottom: "calc(100% + 10px)",
-        left: "50%",
-        transform: `translateX(-50%) scale(${inverseScale})`,
-        transformOrigin: "center bottom",
-        background: bubbleBg,
-        border: `2px solid ${bubbleBorder}`,
-        color: bubbleText,
-        borderRadius: "12px",
-        padding: "6px 14px",
-        fontFamily: "system-ui, sans-serif",
-        fontSize: "15px",
-        lineHeight: "1.3",
-        whiteSpace: "nowrap",
-        maxWidth: "220px",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        pointerEvents: "none",
-        zIndex: "10",
-        boxShadow: bubbleShadow
-      });
-      const tail = document.createElement("span");
-      Object.assign(tail.style, {
-        position: "absolute",
-        bottom: "-10px",
-        left: "50%",
-        transform: "translateX(-50%)",
-        width: "0",
-        height: "0",
-        borderLeft: "7px solid transparent",
-        borderRight: "7px solid transparent",
-        borderTop: `10px solid ${bubbleBorder}`
-      });
-      bubble.appendChild(tail);
-      el.style.overflow = "visible";
-      el.appendChild(bubble);
-      const fadeDur = Math.min(200, durMs * 0.15);
-      anims.push(
-        bubble.animate([{ opacity: 0 }, { opacity: 1 }], {
-          delay: delayMs,
-          duration: fadeDur,
-          fill: "forwards"
-        }),
-        bubble.animate([{ opacity: 1 }, { opacity: 0 }], {
-          delay: delayMs + durMs - fadeDur,
-          duration: fadeDur,
-          fill: "forwards"
-        })
-      );
-      break;
-    }
-    // ── pose ────────────────────────────────────────────────────────────────
-    // Sets multiple body parts to target angles simultaneously.
-    // Usage: @1.0: hero.pose(arm_left=45, arm_right=-45, leg_left=10, dur=0.4)
-    case "pose": {
-      const poseParts = ["arm_left", "arm_right", "leg_left", "leg_right", "head", "body"];
-      for (const partName of poseParts) {
-        if (typeof ev.params[partName] !== "number") continue;
-        const pSel = PART_SEL[partName];
-        if (!pSel) continue;
-        const pEl = el.querySelector(pSel);
-        if (!pEl) continue;
-        const fromDeg = readRotation(pEl);
-        const toDeg = ev.params[partName];
-        anims.push(
-          pEl.animate(
-            [
-              { transform: `rotate(${fromDeg}deg)` },
-              { transform: `rotate(${toDeg}deg)` }
-            ],
-            { ...baseOpts, fill: "forwards" }
-          )
-        );
-        pEl.style.transform = pEl.style.transform.replace(
-          /rotate\([^)]*\)/,
-          `rotate(${toDeg}deg)`
-        );
-      }
-      break;
-    }
-    // ── wave ────────────────────────────────────────────────────────────────
-    // Built-in wave gesture: raises arm, oscillates, returns.
-    // Usage: @2.0: hero.wave(side=right, dur=0.8)
-    case "wave": {
-      const wSide = String(ev.params.side ?? "right");
-      const wArmEl = el.querySelector(
-        wSide === "left" ? "[data-fig-arm-l]" : "[data-fig-arm-r]"
-      );
-      if (!wArmEl) break;
-      const wRest = readRotation(wArmEl);
-      const wUp = wSide === "left" ? 70 : -70;
-      const wMid1 = wSide === "left" ? 50 : -50;
-      const wMid2 = wSide === "left" ? 70 : -70;
-      anims.push(
-        wArmEl.animate(
-          [
-            { transform: `rotate(${wRest}deg)`, offset: 0 },
-            { transform: `rotate(${wUp}deg)`, offset: 0.2 },
-            { transform: `rotate(${wMid1}deg)`, offset: 0.4 },
-            { transform: `rotate(${wMid2}deg)`, offset: 0.55 },
-            { transform: `rotate(${wMid1}deg)`, offset: 0.7 },
-            { transform: `rotate(${wMid2}deg)`, offset: 0.85 },
-            { transform: `rotate(${wRest}deg)`, offset: 1 }
-          ],
-          { ...baseOpts, easing: "ease-in-out", fill: "forwards" }
-        )
-      );
-      break;
-    }
-    // ── jump ────────────────────────────────────────────────────────────────
-    // Jumps the actor up with squash/stretch effect.
-    // Usage: @3.0: hero.jump(height=30, dur=0.5)
-    case "jump": {
-      const jHeight = typeof ev.params.height === "number" ? ev.params.height : 30;
-      anims.push(
-        el.animate(
-          [
-            { transform: txFn(s), offset: 0 },
-            { transform: txFn({ ...s, scale: s.scale * 0.9 }), offset: 0.1 },
-            { transform: txFn({ ...s, y: s.y - jHeight, scale: s.scale * 1.1 }), offset: 0.45 },
-            { transform: txFn({ ...s, y: s.y - jHeight * 0.3, scale: s.scale * 1.05 }), offset: 0.7 },
-            { transform: txFn({ ...s, scale: s.scale * 0.92 }), offset: 0.88 },
-            { transform: txFn(s), offset: 1 }
-          ],
-          { ...baseOpts, easing: "ease-in-out" }
-        )
-      );
-      break;
+var throwAsset = ({
+  ev,
+  state,
+  baseOpts,
+  ast,
+  states,
+  scene,
+  assetOverrides,
+  anims
+}) => {
+  const assetName = String(ev.params.asset ?? "");
+  const targetState = states.get(String(ev.params.to ?? ""));
+  const assetDef = ast.assets[assetName];
+  if (!assetDef || !targetState) return;
+  const projectile = createProjectile(assetName, assetDef, assetOverrides);
+  Object.assign(projectile.style, {
+    position: "absolute",
+    left: "0",
+    top: "0",
+    pointerEvents: "none",
+    zIndex: "9",
+    opacity: "0"
+  });
+  scene.appendChild(projectile);
+  const anim = projectile.animate(
+    [
+      { transform: tx(state), opacity: 1 },
+      { transform: tx(targetState), opacity: 0 }
+    ],
+    { ...baseOpts, easing: "ease-in" }
+  );
+  anim.addEventListener("finish", () => {
+    if (projectile.parentNode === scene) scene.removeChild(projectile);
+  });
+  anims.push(anim);
+};
+
+// src/actions/registry.ts
+var ACTION_HANDLERS = Object.freeze({
+  // Universal — every actor type
+  move,
+  enter,
+  exit,
+  fade_in: fadeIn,
+  fade_out: fadeOut,
+  spring,
+  follow_path: followPath,
+  scale,
+  rotate,
+  shake,
+  pulse,
+  glow,
+  ripple,
+  blur,
+  line_reveal: lineReveal,
+  mask,
+  parallax,
+  jump,
+  bounce,
+  say,
+  throw: throwAsset,
+  // Figure-only — the parser rejects these on other actor types
+  punch,
+  kick,
+  wave,
+  nod,
+  rotate_part: rotatePart,
+  pose,
+  face,
+  // System-diagram flow edges (@markdy/stdlib-systems)
+  request: flowEdge,
+  response: flowEdge,
+  emit: flowEdge
+});
+function handlerFor(action) {
+  return ACTION_HANDLERS[action];
+}
+
+// src/animations.ts
+var DEFAULT_DURATION_S = 0.5;
+var DEFAULT_EASE_BY_ACTION = {
+  enter: "out",
+  fade_in: "out",
+  exit: "in",
+  fade_out: "in"
+};
+function buildAnimations(ast, actorEls, actorLayer, cameraLayer, assetOverrides, faceSwaps) {
+  const anims = [];
+  const states = /* @__PURE__ */ new Map();
+  for (const [name, def] of Object.entries(ast.actors)) {
+    states.set(name, stateFrom(def));
+  }
+  const captionActors = new Set(
+    Object.entries(ast.actors).filter(([, def]) => def.type === "caption").map(([name]) => name)
+  );
+  const txFor = (actorName) => captionActors.has(actorName) ? txCaption : tx;
+  const events = [...ast.events].sort((a, b) => a.time - b.time);
+  preInitInlineStyles(ast, actorEls, states, events, txFor);
+  const cameraState = freshCameraState();
+  for (const ev of events) {
+    const delayMs = ev.time * 1e3;
+    const durMs = Math.max(
+      1,
+      (typeof ev.params.dur === "number" ? ev.params.dur : DEFAULT_DURATION_S) * 1e3
+    );
+    const baseOpts = {
+      delay: delayMs,
+      duration: durMs,
+      fill: "forwards",
+      easing: toEasing(ev.params.ease ?? DEFAULT_EASE_BY_ACTION[ev.action])
+    };
+    if (ev.actor === "camera") {
+      buildCameraAction(ev, cameraLayer, ast, baseOpts, anims, cameraState);
+      continue;
     }
-    // ── nod ─────────────────────────────────────────────────────────────────
-    // Nods the head down and back up. Figure actors only.
-    // Usage: @2.0: hero.nod(dur=0.4)
-    case "nod": {
-      const nHeadEl = el.querySelector("[data-fig-head]");
-      if (!nHeadEl) break;
-      const nRest = readRotation(nHeadEl);
-      const nDown = 15;
-      anims.push(
-        nHeadEl.animate(
-          [
-            { transform: `rotate(${nRest}deg)`, offset: 0 },
-            { transform: `rotate(${nDown}deg)`, offset: 0.35 },
-            { transform: `rotate(${nRest}deg)`, offset: 0.65 },
-            { transform: `rotate(${nDown}deg)`, offset: 0.8 },
-            { transform: `rotate(${nRest}deg)`, offset: 1 }
-          ],
-          { ...baseOpts, easing: "ease-in-out", fill: "forwards" }
-        )
-      );
-      break;
+    const el = actorEls.get(ev.actor);
+    const state = states.get(ev.actor);
+    const handler = handlerFor(ev.action);
+    if (!el || !state || !handler) continue;
+    const ctx = {
+      ev,
+      el,
+      state,
+      baseOpts,
+      delayMs,
+      durMs,
+      ast,
+      states,
+      actorEls,
+      scene: actorLayer,
+      assetOverrides,
+      faceSwaps,
+      anims,
+      tx: txFor(ev.actor)
+    };
+    handler(ctx);
+  }
+  return anims;
+}
+
+// src/player.ts
+var SCENE_STYLE_ID = "markdy-scene-ambience-styles";
+var SAFE_FRAME_PADDING = 28;
+function ensureSceneStyles(doc) {
+  if (doc.getElementById(SCENE_STYLE_ID)) return;
+  const style = doc.createElement("style");
+  style.id = SCENE_STYLE_ID;
+  style.textContent = `
+.markdy-scene-root {
+  --markdy-scene-grid: rgba(148, 163, 184, 0.13);
+  --markdy-scene-grid-strong: rgba(148, 163, 184, 0.2);
+  --markdy-scene-vignette: rgba(2, 6, 23, 0.72);
+  --markdy-scene-accent: rgba(56, 189, 248, 0.16);
+  isolation: isolate;
+}
+.markdy-scene-root::before,
+.markdy-scene-root::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.markdy-scene-root::before {
+  z-index: 0;
+  background:
+    linear-gradient(var(--markdy-scene-grid) 1px, transparent 1px) 0 0 / 32px 32px,
+    linear-gradient(90deg, var(--markdy-scene-grid) 1px, transparent 1px) 0 0 / 32px 32px,
+    linear-gradient(var(--markdy-scene-grid-strong) 1px, transparent 1px) 0 0 / 160px 160px,
+    linear-gradient(90deg, var(--markdy-scene-grid-strong) 1px, transparent 1px) 0 0 / 160px 160px;
+  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
+  opacity: 0.82;
+}
+.markdy-scene-root::after {
+  z-index: 1;
+  background:
+    radial-gradient(ellipse at 50% 0%, var(--markdy-scene-accent), transparent 42%),
+    linear-gradient(180deg, transparent 0%, rgba(2, 6, 23, 0.08) 58%, var(--markdy-scene-vignette) 100%),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.035));
+  mix-blend-mode: screen;
+  opacity: 0.8;
+}
+.markdy-scene-root[data-markdy-scene-tone="light"] {
+  --markdy-scene-grid: rgba(15, 23, 42, 0.09);
+  --markdy-scene-grid-strong: rgba(15, 23, 42, 0.14);
+  --markdy-scene-vignette: rgba(241, 245, 249, 0.74);
+  --markdy-scene-accent: rgba(14, 165, 233, 0.12);
+}
+.markdy-scene-content {
+  z-index: 2;
+}
+.markdy-scene-actor-layer {
+  position: absolute;
+  inset: 0;
+  overflow: visible;
+  transform-origin: 0 0;
+  will-change: transform;
+}
+`;
+  doc.head.appendChild(style);
+}
+function unionRect(a, b) {
+  if (!a) return b;
+  return {
+    x1: Math.min(a.x1, b.x1),
+    y1: Math.min(a.y1, b.y1),
+    x2: Math.max(a.x2, b.x2),
+    y2: Math.max(a.y2, b.y2)
+  };
+}
+function numericPair(value) {
+  if (!Array.isArray(value) || value.length < 2) return null;
+  const [x, y] = value;
+  return typeof x === "number" && typeof y === "number" ? [x, y] : null;
+}
+function computeContentBounds(ast) {
+  let bounds = null;
+  const maxScaleByActor = /* @__PURE__ */ new Map();
+  const positionsByActor = /* @__PURE__ */ new Map();
+  for (const [name, def] of Object.entries(ast.actors)) {
+    maxScaleByActor.set(name, Math.max(1e-3, def.scale ?? 1));
+    positionsByActor.set(name, [[def.x, def.y]]);
+  }
+  for (const ev of ast.events) {
+    if (ev.actor === "camera") continue;
+    if (ev.action === "scale" && typeof ev.params.to === "number") {
+      maxScaleByActor.set(ev.actor, Math.max(maxScaleByActor.get(ev.actor) ?? 1, ev.params.to));
     }
-    // ── bounce ──────────────────────────────────────────────────────────────
-    // Bounces the actor vertically with diminishing amplitude.
-    // Usage: @1.0: hero.bounce(intensity=15, count=3, dur=0.6)
-    case "bounce": {
-      const bIntensity = typeof ev.params.intensity === "number" ? ev.params.intensity : 15;
-      const bCount = typeof ev.params.count === "number" ? ev.params.count : 3;
-      const keyframes = [{ transform: txFn(s), offset: 0 }];
-      for (let bi = 0; bi < bCount; bi++) {
-        const amp = bIntensity * Math.pow(0.55, bi);
-        const baseOffset = (bi + 0.5) / (bCount + 0.5);
-        const peakOffset = Math.min(baseOffset, 0.98);
-        const valleyOffset = Math.min(baseOffset + 0.25 / (bCount + 0.5), 0.99);
-        keyframes.push({
-          transform: txFn({ ...s, y: s.y - amp }),
-          offset: peakOffset
-        });
-        if (bi < bCount - 1) {
-          keyframes.push({
-            transform: txFn(s),
-            offset: valleyOffset
-          });
-        }
-      }
-      keyframes.push({ transform: txFn(s), offset: 1 });
-      anims.push(
-        el.animate(keyframes, { ...baseOpts, easing: "ease-out" })
-      );
-      break;
+    if (ev.action === "move" || ev.action === "spring") {
+      const to = numericPair(ev.params.to);
+      if (to) positionsByActor.get(ev.actor)?.push(to);
     }
-    // ── throw ───────────────────────────────────────────────────────────────
-    case "throw": {
-      const assetName = String(ev.params.asset ?? "");
-      const targetActorName = String(ev.params.to ?? "");
-      const targetState = states.get(targetActorName);
-      const assetDef = ast.assets[assetName];
-      if (!assetDef || !targetState) break;
-      let projectile;
-      if (assetDef.type === "image") {
-        const img = document.createElement("img");
-        img.src = assetOverrides[assetName] ?? assetDef.value;
-        img.alt = assetName;
-        img.setAttribute("draggable", "false");
-        img.style.width = "32px";
-        img.style.height = "32px";
-        projectile = img;
-      } else {
-        const span = document.createElement("span");
-        span.className = "iconify";
-        span.dataset.icon = assetDef.value;
-        span.style.fontSize = "32px";
-        span.style.lineHeight = "1";
-        span.style.display = "inline-block";
-        projectile = span;
-      }
-      Object.assign(projectile.style, {
-        position: "absolute",
-        left: "0",
-        top: "0",
-        pointerEvents: "none",
-        zIndex: "9",
-        opacity: "0"
-      });
-      scene.appendChild(projectile);
-      const throwAnim = projectile.animate(
-        [
-          { transform: tx(s), opacity: 1 },
-          { transform: tx(targetState), opacity: 0 }
-        ],
-        { ...baseOpts, easing: "ease-in" }
-      );
-      throwAnim.addEventListener("finish", () => {
-        if (projectile.parentNode === scene) scene.removeChild(projectile);
-      });
-      anims.push(throwAnim);
-      break;
+  }
+  for (const [name, def] of Object.entries(ast.actors)) {
+    const positions = positionsByActor.get(name) ?? [[def.x, def.y]];
+    const scale2 = maxScaleByActor.get(name) ?? def.scale ?? 1;
+    for (const [x, y] of positions) {
+      bounds = unionRect(bounds, actorRect({ ...stateFrom(def), x, y, scale: scale2 }, def.type));
     }
-    default:
-      break;
   }
+  return bounds;
+}
+function computeSafeFrame(ast) {
+  const bounds = computeContentBounds(ast);
+  if (!bounds) return { x: 0, y: 0, scale: 1 };
+  const boundsWidth = Math.max(1, bounds.x2 - bounds.x1);
+  const boundsHeight = Math.max(1, bounds.y2 - bounds.y1);
+  const availableWidth = Math.max(1, ast.meta.width - SAFE_FRAME_PADDING * 2);
+  const availableHeight = Math.max(1, ast.meta.height - SAFE_FRAME_PADDING * 2);
+  const scale2 = Math.min(1, availableWidth / boundsWidth, availableHeight / boundsHeight);
+  const scaledWidth = boundsWidth * scale2;
+  const scaledHeight = boundsHeight * scale2;
+  function axisOffset(min, max, sceneSize, scaledSize) {
+    const paddedMin = SAFE_FRAME_PADDING;
+    const paddedMax = sceneSize - SAFE_FRAME_PADDING;
+    const scaledMin = min * scale2;
+    const scaledMax = max * scale2;
+    if (scaledSize > paddedMax - paddedMin) return (sceneSize - scaledSize) / 2 - scaledMin;
+    if (scaledMin < paddedMin) return paddedMin - scaledMin;
+    if (scaledMax > paddedMax) return paddedMax - scaledMax;
+    return 0;
+  }
+  const x = axisOffset(bounds.x1, bounds.x2, ast.meta.width, scaledWidth);
+  const y = axisOffset(bounds.y1, bounds.y2, ast.meta.height, scaledHeight);
+  return {
+    x: Math.round(x * 1e3) / 1e3,
+    y: Math.round(y * 1e3) / 1e3,
+    scale: Math.round(scale2 * 1e3) / 1e3
+  };
 }
-
-// src/player.ts
 function bgToTextColor(bg) {
   let hex = bg.trim().replace(/^#/, "");
   if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
@@ -1417,6 +2448,9 @@ function createPlayer(opts) {
     }
   }
   const scene = document.createElement("div");
+  ensureSceneStyles(document);
+  scene.className = "markdy-scene-root";
+  scene.dataset.markdySceneTone = bgToTextColor(ast.meta.bg) === "#1a1a1a" ? "light" : "dark";
   Object.assign(scene.style, {
     position: "absolute",
     top: "0",
@@ -1431,6 +2465,7 @@ function createPlayer(opts) {
   });
   viewport.appendChild(scene);
   const sceneContent = document.createElement("div");
+  sceneContent.className = "markdy-scene-content";
   Object.assign(sceneContent.style, {
     position: "absolute",
     top: "0",
@@ -1441,6 +2476,12 @@ function createPlayer(opts) {
     willChange: "transform"
   });
   scene.appendChild(sceneContent);
+  const actorLayer = document.createElement("div");
+  actorLayer.className = "markdy-scene-actor-layer";
+  const safeFrame = computeSafeFrame(ast);
+  actorLayer.dataset.markdySafeFrame = `${safeFrame.x},${safeFrame.y},${safeFrame.scale}`;
+  actorLayer.style.transform = `translate(${safeFrame.x}px, ${safeFrame.y}px) scale(${safeFrame.scale})`;
+  sceneContent.appendChild(actorLayer);
   function scaleScene() {
     const s = viewport.clientWidth / ast.meta.width;
     scene.style.transform = `scale(${s})`;
@@ -1451,11 +2492,11 @@ function createPlayer(opts) {
   const actorEls = /* @__PURE__ */ new Map();
   for (const [name, def] of Object.entries(ast.actors)) {
     const el = createActorEl(name, def, ast.assets, assetOverrides);
-    sceneContent.appendChild(el);
+    actorLayer.appendChild(el);
     actorEls.set(name, el);
   }
   const faceSwaps = [];
-  const allAnims = buildAnimations(ast, actorEls, sceneContent, assetOverrides, faceSwaps);
+  const allAnims = buildAnimations(ast, actorEls, actorLayer, sceneContent, assetOverrides, faceSwaps);
   faceSwaps.sort((a, b) => a.timeMs - b.timeMs);
   for (const anim of allAnims) {
     anim.pause();