@markdy/renderer-dom 0.7.26 → 0.7.28

package/dist/index.js

@@ -37,6 +37,9 @@ function toEasing(val) {
   return "linear";
 }
 
+// src/actors.ts
+import { TECHNICAL_NODE_KINDS, VISUAL_PRIMITIVE_TYPES } from "@markdy/core";
+
 // src/figure.ts
 function createFigureEl(def) {
   const skinColor = def.args[0] || "#ffdbac";
@@ -309,6 +312,766 @@ function readRotation(el) {
 }
 
 // src/actors.ts
+var ARCHITECTURE_NODE_TYPES = new Set(Object.keys(TECHNICAL_NODE_KINDS));
+var LEGACY_VISUAL_PRIMITIVE_TYPES = ["parking_map", "ascii_map", "game_scene", "byte_viz"];
+var VISUAL_PRIMITIVE_TYPE_SET = /* @__PURE__ */ new Set([
+  ...VISUAL_PRIMITIVE_TYPES,
+  ...LEGACY_VISUAL_PRIMITIVE_TYPES
+]);
+var ARCHITECTURE_STYLE_ID = "markdy-architecture-node-styles";
+var VISUAL_PRIMITIVE_STYLE_ID = "markdy-visual-primitive-styles";
+function ensureVisualPrimitiveStyles(doc) {
+  if (doc.getElementById(VISUAL_PRIMITIVE_STYLE_ID)) return;
+  const style = doc.createElement("style");
+  style.id = VISUAL_PRIMITIVE_STYLE_ID;
+  style.textContent = `
+.markdy-visual {
+  --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;
+  line-height: 1.2;
+  isolation: isolate;
+  contain: layout paint style;
+  backdrop-filter: blur(16px) saturate(1.2);
+  -webkit-backdrop-filter: blur(16px) saturate(1.2);
+}
+.markdy-visual,
+.markdy-visual * {
+  box-sizing: border-box;
+}
+.markdy-visual::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-visual::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-visual[data-tone="green"] { --accent: #22c55e; --accent-2: #38bdf8; }
+.markdy-visual[data-tone="amber"] { --accent: #f59e0b; --accent-2: #22c55e; }
+.markdy-visual[data-tone="purple"] { --accent: #a78bfa; --accent-2: #38bdf8; }
+.markdy-visual[data-tone="rose"] { --accent: #fb7185; --accent-2: #f59e0b; }
+.markdy-visual__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px 8px;
+}
+.markdy-visual__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-visual__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-visual__body { position: absolute; inset: 48px 14px 14px; }
+.markdy-visual--metric {
+  width: 112px;
+  height: 44px;
+  border-radius: 14px;
+}
+.markdy-visual--grid {
+  width: 190px;
+  height: 92px;
+  border-radius: 18px;
+}
+.markdy-visual--lane {
+  width: 300px;
+  height: 44px;
+  border-radius: 999px;
+}
+.markdy-visual--marker {
+  width: 50px;
+  height: 24px;
+  border-radius: 999px;
+}
+.markdy-visual--token_strip {
+  width: 300px;
+  height: 54px;
+  border-radius: 16px;
+}
+.markdy-visual--glyph_card {
+  width: 98px;
+  height: 120px;
+  border-radius: 22px;
+}
+.visual-panel__scan {
+  position: absolute;
+  left: 18px;
+  top: 18px;
+  width: 92px;
+  height: 122px;
+  border-radius: 24px;
+  border: 1px solid color-mix(in srgb, var(--accent) 54%, transparent);
+  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
+  box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 28%, transparent);
+  animation: markdyScanPulse 1.8s ease-in-out infinite;
+}
+.visual-panel__rails {
+  position: absolute;
+  left: 18px;
+  right: 18px;
+  bottom: 42px;
+  height: 48px;
+  border-radius: 999px;
+  background:
+    repeating-linear-gradient(90deg, rgba(226, 232, 240, 0.74) 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;
+}
+.visual-panel__pulse {
+  position: absolute;
+  left: 110px;
+  right: 78px;
+  bottom: 64px;
+  height: 3px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, transparent, var(--accent-2), var(--accent), transparent);
+  filter: drop-shadow(0 0 8px var(--accent-2));
+  animation: markdyRouteFlow 1.5s linear infinite;
+}
+.visual-panel__cells {
+  position: absolute;
+  right: 18px;
+  top: 22px;
+  display: grid;
+  grid-template-columns: repeat(4, 42px);
+  gap: 7px;
+}
+.visual-panel__cell {
+  height: 30px;
+  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;
+}
+.visual-panel__cell:nth-child(3),
+.visual-panel__cell:nth-child(6),
+.visual-panel__cell:nth-child(8) {
+  border-color: color-mix(in srgb, var(--accent-2) 78%, transparent);
+  background: color-mix(in srgb, var(--accent-2) 35%, rgba(15, 23, 42, 0.7));
+  animation: markdySlotGlow 1.7s ease-in-out infinite;
+}
+.visual-terminal__chrome {
+  height: 28px;
+  padding-left: 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
+}
+.visual-terminal__chrome span {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: #ef4444;
+  box-shadow: 14px 0 #f59e0b, 28px 0 #22c55e;
+}
+.visual-terminal__lines {
+  position: absolute;
+  left: 16px;
+  right: 16px;
+  top: 46px;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 18px;
+  line-height: 1.55;
+  color: color-mix(in srgb, var(--accent-2) 62%, #f8fafc);
+  text-shadow: 0 0 12px color-mix(in srgb, var(--accent-2) 38%, transparent);
+}
+.visual-terminal__line {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.visual-metric {
+  height: 100%;
+  padding: 7px 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.visual-metric strong {
+  flex: 0 0 auto;
+  color: #f8fafc;
+  font-size: 15px;
+  line-height: 1;
+}
+.visual-metric span {
+  min-width: 0;
+  overflow: hidden;
+  color: #94a3b8;
+  font-size: 8px;
+  font-weight: 840;
+  letter-spacing: 0.08em;
+  line-height: 1;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+}
+.visual-grid {
+  position: absolute;
+  inset: 10px;
+  display: grid;
+  gap: 7px;
+}
+.visual-grid__cell {
+  border-radius: 8px;
+  border: 1px solid rgba(148, 163, 184, 0.3);
+  background: rgba(15, 23, 42, 0.74);
+}
+.visual-grid__cell.is-active {
+  border-color: color-mix(in srgb, var(--accent-2) 78%, transparent);
+  background: color-mix(in srgb, var(--accent-2) 35%, rgba(15, 23, 42, 0.74));
+  box-shadow: 0 0 18px color-mix(in srgb, var(--accent-2) 26%, transparent);
+}
+.visual-lane {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background:
+    repeating-linear-gradient(90deg, rgba(226, 232, 240, 0.76) 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, 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent);
+}
+.visual-lane::after {
+  content: "";
+  position: absolute;
+  left: 18%;
+  right: 18%;
+  top: 50%;
+  height: 3px;
+  border-radius: 999px;
+  transform: translateY(-50%);
+  background: linear-gradient(90deg, transparent, var(--accent-2), var(--accent), transparent);
+  filter: drop-shadow(0 0 8px var(--accent-2));
+  animation: markdyRouteFlow 1.5s linear infinite;
+}
+.visual-marker {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--accent), #818cf8);
+  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent), 0 8px 18px rgba(2, 6, 23, 0.35);
+}
+.visual-marker::before,
+.visual-marker::after {
+  content: "";
+  position: absolute;
+  bottom: -3px;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: #020617;
+  border: 2px solid #cbd5e1;
+}
+.visual-marker::before { left: 9px; }
+.visual-marker::after { right: 9px; }
+.visual-tokens {
+  height: 100%;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+.visual-token {
+  flex: 1 1 0;
+  min-width: 0;
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  border-radius: 12px;
+  padding: 8px 10px;
+  background: rgba(2, 6, 23, 0.42);
+  color: color-mix(in srgb, var(--accent) 45%, #f8fafc);
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 12px;
+  font-weight: 800;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.visual-glyph {
+  height: 100%;
+  display: grid;
+  place-items: center;
+  padding: 10px;
+  text-align: center;
+}
+.visual-glyph strong {
+  color: #f8fafc;
+  font-size: 56px;
+  line-height: 1;
+}
+.visual-glyph span {
+  margin-top: 6px;
+  color: #cbd5e1;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+@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 markdySlotGlow { 50% { box-shadow: 0 0 20px color-mix(in srgb, var(--accent-2) 32%, transparent); } }
+@keyframes markdyRouteFlow { to { filter: hue-rotate(70deg) drop-shadow(0 0 9px var(--accent)); } }
+`;
+  doc.head.appendChild(style);
+}
+function escapeHtml(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+}
+function toneArg(def, index, fallback = "cyan") {
+  const tone = def.args[index]?.trim().toLowerCase() || fallback;
+  return /^(cyan|green|amber|purple|rose)$/.test(tone) ? tone : fallback;
+}
+function parseGridSpec(spec) {
+  const match = /^(\d+)x(\d+)$/i.exec(spec?.trim() ?? "");
+  const cols = match ? Number(match[1]) : 4;
+  const rows = match ? Number(match[2]) : 2;
+  return {
+    cols: Math.min(Math.max(cols, 1), 8),
+    rows: Math.min(Math.max(rows, 1), 4)
+  };
+}
+function activeCellSet(value) {
+  return new Set(
+    (value ?? "").split(/[|\s]+/).map((part) => Number(part.trim())).filter((part) => Number.isInteger(part) && part > 0)
+  );
+}
+function canonicalVisualType(type) {
+  switch (type) {
+    case "surface":
+      return "panel";
+    case "stat":
+      return "metric";
+    case "matrix":
+      return "grid";
+    case "track":
+      return "lane";
+    case "dot":
+      return "marker";
+    case "chips":
+      return "token_strip";
+    case "glyph":
+      return "glyph_card";
+    case "parking_map":
+    case "game_scene":
+    case "byte_viz":
+      return "panel";
+    case "ascii_map":
+      return "terminal";
+    default:
+      return type;
+  }
+}
+function legacyVisualArgs(type, args) {
+  const label = args[0] || type.replace("_", " ");
+  switch (type) {
+    case "parking_map":
+      return [label, "live ops", "cyan"];
+    case "ascii_map":
+      return [label, "[P1][P2][  ][EV]", "[IN]===LANE===[OUT]", "0101 0000 0100 0001", "green"];
+    case "game_scene":
+      return [label, "60 fps", "amber"];
+    case "byte_viz":
+      return [label, "UTF-8", "purple"];
+    default:
+      return args;
+  }
+}
+function createVisualPrimitiveEl(type, def) {
+  ensureVisualPrimitiveStyles(document);
+  const visualType = canonicalVisualType(type);
+  const args = legacyVisualArgs(type, def.args);
+  const label = args[0] || type.replace("_", " ");
+  const root = document.createElement("div");
+  root.className = `markdy-visual markdy-visual--${visualType}`;
+  root.dataset.visualType = visualType;
+  root.setAttribute("role", "img");
+  root.setAttribute("aria-label", label);
+  if (visualType === "panel") {
+    const tag = escapeHtml(args[1] || "live");
+    root.dataset.tone = toneArg({ ...def, args }, 2);
+    root.innerHTML = `
+      <div class="markdy-visual__top"><div class="markdy-visual__title">${escapeHtml(label)}</div><div class="markdy-visual__pill">${tag}</div></div>
+      <div class="markdy-visual__body">
+        <div class="visual-panel__scan"></div>
+        <div class="visual-panel__cells">${Array.from({ length: 8 }, () => '<span class="visual-panel__cell"></span>').join("")}</div>
+        <div class="visual-panel__rails"></div>
+        <div class="visual-panel__pulse"></div>
+      </div>`;
+  } else if (visualType === "terminal") {
+    root.dataset.tone = toneArg({ ...def, args }, 4, "green");
+    const lines = [args[1], args[2], args[3]].filter((line) => typeof line === "string" && line.length > 0).map((line) => `<div class="visual-terminal__line">${escapeHtml(line)}</div>`).join("");
+    root.innerHTML = `
+      <div class="markdy-visual__top"><div class="markdy-visual__title">${escapeHtml(label)}</div><div class="markdy-visual__pill">terminal</div></div>
+      <div class="markdy-visual__body"><div class="visual-terminal__chrome"><span></span></div><div class="visual-terminal__lines">${lines}</div></div>`;
+  } else if (visualType === "metric") {
+    root.dataset.tone = toneArg({ ...def, args }, 2);
+    root.innerHTML = `<div class="visual-metric"><strong>${escapeHtml(args[1] || "\u2014")}</strong><span>${escapeHtml(label)}</span></div>`;
+  } else if (visualType === "grid") {
+    root.dataset.tone = toneArg({ ...def, args }, 3, "green");
+    const { cols, rows } = parseGridSpec(args[1]);
+    const active = activeCellSet(args[2]);
+    root.innerHTML = `<div class="visual-grid" style="grid-template-columns: repeat(${cols}, 1fr);">${Array.from({ length: cols * rows }, (_, i) => `<span class="visual-grid__cell${active.has(i + 1) ? " is-active" : ""}"></span>`).join("")}</div>`;
+  } else if (visualType === "lane") {
+    root.dataset.tone = toneArg({ ...def, args }, 1);
+    root.innerHTML = `<div class="visual-lane"></div>`;
+  } else if (visualType === "marker") {
+    root.dataset.tone = toneArg({ ...def, args }, 1);
+    root.innerHTML = `<div class="visual-marker"></div>`;
+  } else if (visualType === "token_strip") {
+    root.dataset.tone = toneArg({ ...def, args }, 1, "purple");
+    const tokens = (args[0] || "token").split("|").map((token) => token.trim()).filter(Boolean);
+    root.innerHTML = `<div class="visual-tokens">${tokens.map((token) => `<span class="visual-token">${escapeHtml(token)}</span>`).join("")}</div>`;
+  } else {
+    root.dataset.tone = toneArg({ ...def, args }, 2, "purple");
+    root.innerHTML = `<div class="visual-glyph"><div><strong>${escapeHtml(args[0] || "A")}</strong><span>${escapeHtml(args[1] || "glyph")}</span></div></div>`;
+  }
+  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-kind="compute"],
+.markdy-arch-node[data-markdy-system-kind="code"] {
+  --markdy-node-accent: #38bdf8;
+  --markdy-node-accent-2: #818cf8;
+}
+.markdy-arch-node[data-markdy-system-kind="client"] {
+  --markdy-node-accent: #f59e0b;
+  --markdy-node-accent-2: #fb7185;
+}
+.markdy-arch-node[data-markdy-system-kind="data"] {
+  --markdy-node-accent: #22c55e;
+  --markdy-node-accent-2: #14b8a6;
+}
+.markdy-arch-node[data-markdy-system-kind="messaging"] {
+  --markdy-node-accent: #a78bfa;
+  --markdy-node-accent-2: #38bdf8;
+}
+.markdy-arch-node[data-markdy-system-kind="network"] {
+  --markdy-node-accent: #60a5fa;
+  --markdy-node-accent-2: #67e8f9;
+}
+.markdy-arch-node[data-markdy-system-kind="platform"] {
+  --markdy-node-accent: #c084fc;
+  --markdy-node-accent-2: #f472b6;
+}
+.markdy-arch-node[data-markdy-system-kind="security"] {
+  --markdy-node-accent: #fb7185;
+  --markdy-node-accent-2: #f59e0b;
+}
+.markdy-arch-node[data-markdy-system-kind="delivery"] {
+  --markdy-node-accent: #facc15;
+  --markdy-node-accent-2: #22c55e;
+}
+.markdy-arch-node[data-markdy-system-kind="observability"] {
+  --markdy-node-accent: #2dd4bf;
+  --markdy-node-accent-2: #38bdf8;
+}
+.markdy-arch-node[data-markdy-system-kind="flow"] {
+  --markdy-node-accent: #e879f9;
+  --markdy-node-accent-2: #a78bfa;
+}
+.markdy-arch-node[data-markdy-system-kind="distributed"] {
+  --markdy-node-accent: #94a3b8;
+  --markdy-node-accent-2: #38bdf8;
+}
+.markdy-arch-node[data-markdy-system-kind="data"] {
+  border-radius: 18px 18px 24px 24px;
+}
+.markdy-arch-node[data-markdy-system-kind="network"] {
+  border-radius: 999px;
+}
+.markdy-arch-node[data-markdy-system-kind="platform"] {
+  border-radius: 10px;
+}
+.markdy-arch-node[data-markdy-system-kind="security"] {
+  border-style: solid;
+}
+.markdy-arch-node[data-markdy-system-kind="compute"] .markdy-arch-node__icon::before,
+.markdy-arch-node[data-markdy-system-kind="code"] .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-kind="compute"] .markdy-arch-node__icon::after,
+.markdy-arch-node[data-markdy-system-kind="code"] .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-kind="client"] .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-kind="client"] .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-kind="data"] .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-kind="data"] .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-kind="messaging"] .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-kind="messaging"] .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-kind="network"] .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-kind="network"] .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-kind="platform"] .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-kind="platform"] .markdy-arch-node__icon::after {
+  left: 10px;
+  right: 10px;
+  top: 14px;
+  border-top: 2px solid rgba(255, 255, 255, 0.72);
+}
+.markdy-arch-node[data-markdy-system-kind="security"] .markdy-arch-node__icon::before {
+  left: 9px;
+  right: 9px;
+  top: 7px;
+  bottom: 7px;
+  border: 2px solid rgba(255, 255, 255, 0.92);
+  border-radius: 10px 10px 14px 14px;
+}
+.markdy-arch-node[data-markdy-system-kind="security"] .markdy-arch-node__icon::after {
+  left: 14px;
+  right: 14px;
+  top: 14px;
+  border-top: 2px solid rgba(255, 255, 255, 0.82);
+}
+.markdy-arch-node[data-markdy-system-kind="delivery"] .markdy-arch-node__icon::before,
+.markdy-arch-node[data-markdy-system-kind="observability"] .markdy-arch-node__icon::before,
+.markdy-arch-node[data-markdy-system-kind="distributed"] .markdy-arch-node__icon::before {
+  inset: 8px;
+  border: 2px solid rgba(255, 255, 255, 0.92);
+  border-radius: 999px;
+}
+.markdy-arch-node[data-markdy-system-kind="delivery"] .markdy-arch-node__icon::after,
+.markdy-arch-node[data-markdy-system-kind="observability"] .markdy-arch-node__icon::after,
+.markdy-arch-node[data-markdy-system-kind="distributed"] .markdy-arch-node__icon::after {
+  left: 15px;
+  top: 7px;
+  bottom: 7px;
+  border-left: 2px solid rgba(255, 255, 255, 0.82);
+}
+.markdy-arch-node[data-markdy-system-kind="flow"] .markdy-arch-node__icon::before {
+  inset: 8px;
+  border: 2px solid rgba(255, 255, 255, 0.92);
+  transform: rotate(45deg);
+}
+.markdy-arch-node[data-markdy-system-kind="flow"] .markdy-arch-node__icon::after {
+  left: 14px;
+  right: 14px;
+  top: 15px;
+  border-top: 2px solid rgba(255, 255, 255, 0.82);
+}
+`;
+  doc.head.appendChild(style);
+}
+function isArchitectureNodeType(type) {
+  return ARCHITECTURE_NODE_TYPES.has(type);
+}
+function isVisualPrimitiveType(type) {
+  return VISUAL_PRIMITIVE_TYPE_SET.has(type);
+}
+function architectureTypeLabel(type) {
+  if (type === "db") return "database";
+  if (type === "api") return "service";
+  return type;
+}
+function architectureNodeKind(type) {
+  return TECHNICAL_NODE_KINDS[type] ?? "compute";
+}
 function createActorEl(name, def, assetDefs, assetOverrides) {
   let el;
   switch (def.type) {
@@ -377,75 +1140,43 @@ function createActorEl(name, def, assetDefs, assetOverrides) {
       el = createFigureEl(def);
       break;
     }
-    case "service":
-    case "client":
-    case "db":
-    case "queue": {
+    default: {
+      if (VISUAL_PRIMITIVE_TYPE_SET.has(def.type)) {
+        el = createVisualPrimitiveEl(def.type, def);
+        break;
+      }
+      if (!isArchitectureNodeType(def.type)) {
+        const div = document.createElement("div");
+        div.style.width = "100px";
+        div.style.height = "100px";
+        div.style.background = "#999";
+        div.style.boxSizing = "border-box";
+        el = div;
+        break;
+      }
+      ensureArchitectureStyles(document);
       const card = document.createElement("div");
+      card.className = "markdy-arch-node";
+      card.dataset.markdySystemType = def.type;
+      card.dataset.markdySystemKind = architectureNodeKind(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;
     }
-    default: {
-      const div = document.createElement("div");
-      div.style.width = "100px";
-      div.style.height = "100px";
-      div.style.background = "#999";
-      div.style.boxSizing = "border-box";
-      el = div;
-      break;
-    }
   }
   el.dataset.markdyActor = name;
   el.style.position = "absolute";
@@ -456,6 +1187,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 (isVisualPrimitiveType(def.type)) el.style.zIndex = "25";
+  else if (isArchitectureNodeType(def.type)) el.style.zIndex = "10";
   return el;
 }
 
@@ -776,27 +1509,190 @@ 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
+import { TECHNICAL_NODE_TYPES } from "@markdy/core";
+var SYSTEM_NODE_SIZE = { width: 184, height: 88 };
 var ACTOR_SIZES = {
-  service: { width: 180, height: 84 },
-  client: { width: 180, height: 84 },
-  db: { width: 180, height: 84 },
-  queue: { width: 180, height: 84 },
+  ...Object.fromEntries(TECHNICAL_NODE_TYPES.map((type) => [type, SYSTEM_NODE_SIZE])),
   box: { width: 100, height: 100 },
   caption: { width: 260, height: 56 },
-  figure: { width: 120, height: 170 }
+  figure: { width: 120, height: 170 },
+  panel: { width: 390, height: 250 },
+  surface: { width: 390, height: 250 },
+  terminal: { width: 390, height: 250 },
+  metric: { width: 112, height: 44 },
+  stat: { width: 112, height: 44 },
+  grid: { width: 190, height: 92 },
+  matrix: { width: 190, height: 92 },
+  lane: { width: 300, height: 44 },
+  track: { width: 300, height: 44 },
+  marker: { width: 50, height: 24 },
+  dot: { width: 50, height: 24 },
+  token_strip: { width: 300, height: 54 },
+  chips: { width: 300, height: 54 },
+  glyph_card: { width: 98, height: 120 },
+  glyph: { width: 98, height: 120 },
+  parking_map: { width: 390, height: 250 },
+  ascii_map: { width: 390, height: 250 },
+  game_scene: { width: 390, height: 250 },
+  byte_viz: { width: 390, 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 +1745,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 +1833,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 +1881,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 +1929,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 +2155,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 +2196,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 +2222,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 +2239,7 @@ function buildAnimations(ast, actorEls, scene, assetOverrides, faceSwaps) {
       ast,
       states,
       actorEls,
-      scene,
+      scene: actorLayer,
       assetOverrides,
       faceSwaps,
       anims,
@@ -1251,6 +2251,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 +2478,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 +2495,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 +2506,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 +2522,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();