@markdy/renderer-dom 0.7.26 → 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,6 +1162,8 @@ 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;
 }
 
@@ -776,27 +1484,185 @@ var bounce = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
   anims.push(el.animate(keyframes, { ...baseOpts, easing: "ease-out" }));
 };
 
+// src/actions/effects.ts
+function numeric(value, fallback) {
+  return typeof value === "number" ? value : fallback;
+}
+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: 180, height: 84 },
-  client: { width: 180, height: 84 },
-  db: { width: 180, height: 84 },
-  queue: { width: 180, height: 84 },
+  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 }
+  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) {
   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);
-  return { x1: state.x, y1: state.y, x2: state.x + width, y2: state.y + height };
+  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 - dx,
+    y1: state.y - dy,
+    x2: state.x + width + dx,
+    y2: state.y + height + dy
+  };
 }
 function inflateRect(rect, pad) {
   return {
@@ -849,19 +1715,58 @@ function polylineLength(points) {
   }
   return Math.max(1, total);
 }
-function pointAtDistance(points, dist) {
-  let remain = Math.max(0, 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 : Math.min(1, 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 sourceType = ast.actors[sourceName]?.type ?? "box";
@@ -898,17 +1803,25 @@ 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
@@ -938,6 +1851,41 @@ function ensureEdgeLayer(scene) {
   scene.appendChild(svg);
   return svg;
 }
+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";
@@ -951,38 +1899,51 @@ function buildEdge(ctx, targetName) {
   const length = polylineLength(points);
   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(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 labelText = String(ev.params.label ?? "");
   if (labelText) {
-    const midPoint = pointAtDistance(points, length * 0.5);
+    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);
   }
-  ensureEdgeLayer(scene).appendChild(group);
+  svg.appendChild(group);
   anims.push(
     path.animate([{ strokeDashoffset: length }, { strokeDashoffset: 0 }], baseOpts),
     marker.animate(
@@ -1164,9 +2125,18 @@ var ACTION_HANDLERS = Object.freeze({
   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,
@@ -1196,7 +2166,7 @@ var DEFAULT_EASE_BY_ACTION = {
   exit: "in",
   fade_out: "in"
 };
-function buildAnimations(ast, actorEls, scene, assetOverrides, faceSwaps) {
+function buildAnimations(ast, actorEls, actorLayer, cameraLayer, assetOverrides, faceSwaps) {
   const anims = [];
   const states = /* @__PURE__ */ new Map();
   for (const [name, def] of Object.entries(ast.actors)) {
@@ -1222,7 +2192,7 @@ function buildAnimations(ast, actorEls, scene, assetOverrides, faceSwaps) {
       easing: toEasing(ev.params.ease ?? DEFAULT_EASE_BY_ACTION[ev.action])
     };
     if (ev.actor === "camera") {
-      buildCameraAction(ev, scene, ast, baseOpts, anims, cameraState);
+      buildCameraAction(ev, cameraLayer, ast, baseOpts, anims, cameraState);
       continue;
     }
     const el = actorEls.get(ev.actor);
@@ -1239,7 +2209,7 @@ function buildAnimations(ast, actorEls, scene, assetOverrides, faceSwaps) {
       ast,
       states,
       actorEls,
-      scene,
+      scene: actorLayer,
       assetOverrides,
       faceSwaps,
       anims,
@@ -1251,6 +2221,134 @@ function buildAnimations(ast, actorEls, scene, assetOverrides, faceSwaps) {
 }
 
 // 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));
+    }
+    if (ev.action === "move" || ev.action === "spring") {
+      const to = numericPair(ev.params.to);
+      if (to) positionsByActor.get(ev.actor)?.push(to);
+    }
+  }
+  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));
+    }
+  }
+  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
+  };
+}
 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];
@@ -1350,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",
@@ -1364,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",
@@ -1374,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})`;
@@ -1384,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();