@markdy/renderer-dom 0.7.28 → 0.8.0

package/dist/index.js

@@ -1,1698 +1,12 @@
 // src/player.ts
-import { parse } from "@markdy/core";
-
-// src/types.ts
-function stateFrom(def) {
-  return {
-    x: def.x,
-    y: def.y,
-    scale: def.scale ?? 1,
-    rotate: def.rotate ?? 0,
-    opacity: def.opacity ?? 1
-  };
-}
-function tx(s) {
-  return `translate(${s.x}px, ${s.y}px) scale(${s.scale}) rotate(${s.rotate}deg)`;
-}
-function txCaption(s) {
-  return `translate(calc(${s.x}px - 50%), calc(${s.y}px - 50%)) scale(${s.scale}) rotate(${s.rotate}deg)`;
-}
-var EASE_MAP = {
-  linear: "linear",
-  in: "ease-in",
-  out: "ease-out",
-  inout: "ease-in-out",
-  // Named cubic-bezier presets for authors who want a more polished feel
-  // than the four raw CSS keywords above without hand-writing a curve.
-  smooth: "cubic-bezier(0.4, 0, 0.2, 1)",
-  snappy: "cubic-bezier(0.16, 1, 0.3, 1)",
-  overshoot: "cubic-bezier(0.34, 1.56, 0.64, 1)",
-  sharp: "cubic-bezier(0.4, 0, 1, 1)"
-};
-var CUBIC_BEZIER_RE = /^cubic-bezier\(\s*-?\d*\.?\d+\s*,\s*-?\d*\.?\d+\s*,\s*-?\d*\.?\d+\s*,\s*-?\d*\.?\d+\s*\)$/;
-function toEasing(val) {
-  const str = String(val ?? "");
-  if (EASE_MAP[str]) return EASE_MAP[str];
-  if (CUBIC_BEZIER_RE.test(str)) return str;
-  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";
-  const isFemale = def.args[1] === "f";
-  const startFace = def.args[2] || (isFemale ? "\u{1F642}" : "\u{1F636}");
-  const ink = "currentColor";
-  const WRAP_W = 80;
-  const FACE_FS = 40;
-  const SHIRT_FS = isFemale ? 48 : 44;
-  const vShirtW = SHIRT_FS * 0.9;
-  const shLx = (WRAP_W - vShirtW) / 2 + vShirtW * 0.18;
-  const shRx = WRAP_W - shLx;
-  const shY = Math.round(SHIRT_FS * 0.28);
-  const ARM_W = 36, ARM_H = 22;
-  const LEG_H = 54, LEG_STICK_H = 34;
-  const JOINT_SIZE = 6;
-  const wrap = document.createElement("div");
-  Object.assign(wrap.style, {
-    position: "relative",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    width: `${WRAP_W}px`,
-    overflow: "visible"
-  });
-  const faceEl = document.createElement("span");
-  faceEl.dataset.figFace = "";
-  faceEl.dataset.figHead = "";
-  faceEl.textContent = startFace;
-  Object.assign(faceEl.style, {
-    fontSize: `${FACE_FS}px`,
-    lineHeight: "1",
-    flexShrink: "0",
-    userSelect: "none",
-    pointerEvents: "none",
-    zIndex: "5"
-  });
-  const neck = document.createElement("div");
-  Object.assign(neck.style, {
-    width: "10px",
-    height: "10px",
-    background: skinColor,
-    borderRadius: "4px",
-    flexShrink: "0",
-    marginTop: "-3px",
-    marginBottom: "-3px",
-    zIndex: "4"
-  });
-  const shirtRow = document.createElement("div");
-  Object.assign(shirtRow.style, {
-    position: "relative",
-    width: `${WRAP_W}px`,
-    height: `${SHIRT_FS}px`,
-    textAlign: "center",
-    flexShrink: "0",
-    zIndex: "2",
-    overflow: "visible"
-  });
-  const torso = document.createElement("span");
-  torso.dataset.figBody = "";
-  torso.textContent = isFemale ? "\u{1F457}" : "\u{1F455}";
-  Object.assign(torso.style, {
-    fontSize: `${SHIRT_FS}px`,
-    lineHeight: "1",
-    userSelect: "none",
-    pointerEvents: "none"
-  });
-  shirtRow.appendChild(torso);
-  const shoulderL = buildJoint("left", skinColor, JOINT_SIZE, shLx, shY, WRAP_W);
-  const shoulderR = buildJoint("right", skinColor, JOINT_SIZE, shRx, shY, WRAP_W);
-  shoulderL.dataset.figShoulderL = "";
-  shoulderR.dataset.figShoulderR = "";
-  shirtRow.appendChild(shoulderL);
-  shirtRow.appendChild(shoulderR);
-  const armHandEmoji = isFemale ? "\u{1F485}" : "\u{1F91C}";
-  shirtRow.appendChild(
-    buildArm("left", armHandEmoji, skinColor, {
-      w: ARM_W,
-      h: ARM_H,
-      anchorX: WRAP_W - shLx,
-      anchorY: shY,
-      restDeg: 20,
-      flipFist: !isFemale
-    })
-  );
-  shirtRow.appendChild(
-    buildArm("right", armHandEmoji, skinColor, {
-      w: ARM_W,
-      h: ARM_H,
-      anchorX: shRx,
-      anchorY: shY,
-      restDeg: -20,
-      flipFist: false
-    })
-  );
-  const hipRow = document.createElement("div");
-  Object.assign(hipRow.style, {
-    position: "relative",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    flexShrink: "0",
-    overflow: "visible"
-  });
-  const hipBridge = document.createElement("div");
-  Object.assign(hipBridge.style, {
-    width: "28px",
-    height: "4px",
-    background: skinColor,
-    borderRadius: "2px",
-    marginBottom: "1px",
-    zIndex: "3"
-  });
-  hipRow.appendChild(hipBridge);
-  const legsRow = document.createElement("div");
-  Object.assign(legsRow.style, {
-    display: "flex",
-    justifyContent: "center",
-    gap: "10px",
-    flexShrink: "0",
-    overflow: "visible",
-    position: "relative"
-  });
-  const legL = buildLeg(true, isFemale, ink, skinColor, LEG_H, LEG_STICK_H, JOINT_SIZE);
-  const legR = buildLeg(false, isFemale, ink, skinColor, LEG_H, LEG_STICK_H, JOINT_SIZE);
-  legsRow.append(legL, legR);
-  hipRow.appendChild(legsRow);
-  wrap.append(faceEl, neck, shirtRow, hipRow);
-  return wrap;
-}
-function buildJoint(side, skinColor, size, anchorX, anchorY, wrapW) {
-  const joint = document.createElement("div");
-  const isLeft = side === "left";
-  Object.assign(joint.style, {
-    position: "absolute",
-    width: `${size}px`,
-    height: `${size}px`,
-    borderRadius: "50%",
-    background: skinColor,
-    ...isLeft ? { right: `${wrapW - anchorX - size / 2}px` } : { left: `${anchorX - size / 2}px` },
-    top: `${anchorY - size / 2}px`,
-    zIndex: "5",
-    pointerEvents: "none"
-  });
-  return joint;
-}
-function buildArm(side, handEmoji, skinColor, g) {
-  const arm = document.createElement("div");
-  const ds = arm.dataset;
-  ds[side === "left" ? "figArmL" : "figArmR"] = "";
-  const isLeft = side === "left";
-  const origin = isLeft ? "right center" : "left center";
-  Object.assign(arm.style, {
-    position: "absolute",
-    width: `${g.w}px`,
-    height: `${g.h}px`,
-    ...isLeft ? { right: `${g.anchorX}px` } : { left: `${g.anchorX}px` },
-    top: `${g.anchorY - g.h / 2}px`,
-    transformOrigin: origin,
-    transform: `rotate(${g.restDeg}deg)`,
-    zIndex: "4",
-    overflow: "visible"
-  });
-  const stick = document.createElement("div");
-  Object.assign(stick.style, {
-    position: "absolute",
-    ...isLeft ? { right: "5px" } : { left: "5px" },
-    top: `${g.h / 2 - 2}px`,
-    width: "18px",
-    height: "4px",
-    background: skinColor,
-    borderRadius: "2px"
-  });
-  const fist = document.createElement("span");
-  fist.textContent = handEmoji;
-  Object.assign(fist.style, {
-    position: "absolute",
-    fontSize: "17px",
-    lineHeight: "1",
-    ...isLeft ? { left: "0" } : { right: "0" },
-    top: `${g.h / 2 - 10}px`,
-    ...g.flipFist ? { transform: "scaleX(-1)" } : {},
-    userSelect: "none",
-    pointerEvents: "none"
-  });
-  arm.append(stick, fist);
-  return arm;
-}
-function buildLeg(isLeft, isFemale, ink, skinColor, legH, stickH, jointSize) {
-  const leg = document.createElement("div");
-  const ds = leg.dataset;
-  ds[isLeft ? "figLegL" : "figLegR"] = "";
-  Object.assign(leg.style, {
-    position: "relative",
-    width: "20px",
-    height: `${legH}px`,
-    transformOrigin: "top center",
-    transform: "rotate(0deg)",
-    overflow: "visible"
-  });
-  const hipJoint = document.createElement("div");
-  hipJoint.dataset[isLeft ? "figHipL" : "figHipR"] = "";
-  Object.assign(hipJoint.style, {
-    position: "absolute",
-    width: `${jointSize}px`,
-    height: `${jointSize}px`,
-    borderRadius: "50%",
-    background: skinColor,
-    left: "50%",
-    top: `-${jointSize / 2}px`,
-    transform: "translateX(-50%)",
-    zIndex: "3",
-    pointerEvents: "none"
-  });
-  const stick = document.createElement("div");
-  Object.assign(stick.style, {
-    position: "absolute",
-    width: "4px",
-    height: `${stickH}px`,
-    background: ink,
-    borderRadius: "2px",
-    left: "50%",
-    top: "0",
-    transform: "translateX(-50%)"
-  });
-  const knee = document.createElement("div");
-  Object.assign(knee.style, {
-    position: "absolute",
-    width: "4px",
-    height: "4px",
-    borderRadius: "50%",
-    background: skinColor,
-    left: "50%",
-    top: `${stickH * 0.55}px`,
-    transform: "translateX(-50%)",
-    zIndex: "2",
-    pointerEvents: "none"
-  });
-  const shoe = document.createElement("span");
-  shoe.textContent = isFemale ? "\u{1F460}" : "\u{1F45F}";
-  Object.assign(shoe.style, {
-    position: "absolute",
-    fontSize: "17px",
-    lineHeight: "1",
-    bottom: "0",
-    userSelect: "none",
-    pointerEvents: "none"
-  });
-  if (isLeft) {
-    shoe.style.left = "0";
-    shoe.style.transform = "scaleX(-1)";
-  } else {
-    shoe.style.right = "0";
-  }
-  leg.append(hipJoint, stick, knee, shoe);
-  return leg;
-}
-var PART_SEL = {
-  head: "[data-fig-head]",
-  face: "[data-fig-face]",
-  body: "[data-fig-body]",
-  arm_left: "[data-fig-arm-l]",
-  arm_right: "[data-fig-arm-r]",
-  leg_left: "[data-fig-leg-l]",
-  leg_right: "[data-fig-leg-r]"
-};
-function readRotation(el) {
-  const m = /rotate\((-?[\d.]+)deg\)/.exec(el.style.transform ?? "");
-  return m ? Number(m[1]) : 0;
-}
-
-// 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) {
-    case "sprite": {
-      const assetName = def.args[0] ?? "";
-      const assetDef = assetDefs[assetName];
-      if (assetDef?.type === "icon") {
-        const span = document.createElement("span");
-        span.className = "iconify";
-        span.style.display = "inline-block";
-        span.style.fontSize = `${def.size ?? 32}px`;
-        span.style.lineHeight = "1";
-        span.dataset.icon = assetDef.value;
-        span.setAttribute("aria-label", assetDef.value.split(":").pop() ?? "icon");
-        el = span;
-      } else {
-        const img = document.createElement("img");
-        img.src = assetOverrides[assetName] ?? assetDef?.value ?? "";
-        img.alt = assetName;
-        img.style.display = "block";
-        img.style.maxWidth = "100%";
-        img.style.maxHeight = "200px";
-        img.style.objectFit = "contain";
-        img.setAttribute("draggable", "false");
-        el = img;
-      }
-      break;
-    }
-    case "text": {
-      const div = document.createElement("div");
-      div.textContent = def.args[0] ?? "";
-      div.style.fontSize = `${def.size ?? 24}px`;
-      div.style.fontFamily = "sans-serif";
-      div.style.whiteSpace = "nowrap";
-      div.style.userSelect = "none";
-      div.style.pointerEvents = "none";
-      el = div;
-      break;
-    }
-    case "caption": {
-      const div = document.createElement("div");
-      div.textContent = def.args[0] ?? "";
-      div.dataset.markdyCaption = def.anchor ?? "top";
-      Object.assign(div.style, {
-        fontSize: `${def.size ?? 32}px`,
-        fontFamily: "system-ui, -apple-system, sans-serif",
-        fontWeight: "700",
-        whiteSpace: "nowrap",
-        textAlign: "center",
-        lineHeight: "1.1",
-        padding: "6px 14px",
-        borderRadius: "4px",
-        background: "rgba(0, 0, 0, 0.55)",
-        color: "#fff",
-        textShadow: "0 2px 6px rgba(0, 0, 0, 0.45)",
-        userSelect: "none",
-        pointerEvents: "none"
-        // Center the caption on its (x, y) point (x = sceneWidth/2).
-        // We combine translate-centering with the actor transform in the
-        // dataset below so the player can re-apply on state changes.
-      });
-      el = div;
-      break;
-    }
-    case "figure": {
-      el = createFigureEl(def);
-      break;
-    }
-    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] ?? "";
-      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;
-    }
-  }
-  el.dataset.markdyActor = name;
-  el.style.position = "absolute";
-  el.style.left = "0";
-  el.style.top = "0";
-  el.style.transformOrigin = "center center";
-  el.style.transform = def.type === "caption" ? txCaption(stateFrom(def)) : tx(stateFrom(def));
-  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;
-}
-
-// src/camera.ts
-function freshCameraState() {
-  return { x: 0, y: 0, zoom: 1 };
-}
-function cameraTx(s) {
-  return `translate(${-s.x}px, ${-s.y}px) scale(${s.zoom})`;
-}
-var DEFAULT_SHAKE_INTENSITY = 8;
-function buildCameraAction(ev, scene, ast, baseOpts, anims, state) {
-  switch (ev.action) {
-    case "pan": {
-      const to = ev.params.to;
-      if (!to) break;
-      const next = {
-        ...state,
-        x: to[0] - ast.meta.width / 2,
-        y: to[1] - ast.meta.height / 2
-      };
-      anims.push(
-        scene.animate([{ transform: cameraTx(state) }, { transform: cameraTx(next) }], baseOpts)
-      );
-      state.x = next.x;
-      state.y = next.y;
-      break;
-    }
-    case "zoom": {
-      const next = {
-        ...state,
-        zoom: typeof ev.params.to === "number" ? ev.params.to : state.zoom
-      };
-      anims.push(
-        scene.animate([{ transform: cameraTx(state) }, { transform: cameraTx(next) }], baseOpts)
-      );
-      state.zoom = next.zoom;
-      break;
-    }
-    case "shake": {
-      const mag = typeof ev.params.intensity === "number" ? ev.params.intensity : DEFAULT_SHAKE_INTENSITY;
-      const at = (dx, dy, offset) => ({
-        transform: cameraTx({ ...state, x: state.x + dx, y: state.y + dy }),
-        offset
-      });
-      anims.push(
-        scene.animate(
-          [
-            at(0, 0, 0),
-            at(-mag, -mag * 0.4, 0.15),
-            at(mag, mag * 0.4, 0.35),
-            at(-mag * 0.6, mag * 0.3, 0.55),
-            at(mag * 0.5, -mag * 0.3, 0.75),
-            at(0, 0, 1)
-          ],
-          { ...baseOpts, easing: "linear" }
-        )
-      );
-      break;
-    }
-    default:
-      break;
-  }
-}
-
-// src/stage.ts
-function offscreenState(s, direction, sceneWidth, sceneHeight) {
-  const out = { ...s };
-  switch (direction) {
-    case "left":
-      out.x = -sceneWidth * 1.1;
-      break;
-    case "right":
-      out.x = sceneWidth * 2.1;
-      break;
-    case "top":
-      out.y = -sceneHeight * 1.1;
-      break;
-    case "bottom":
-      out.y = sceneHeight * 2.1;
-      break;
-  }
-  return out;
-}
-function preInitInlineStyles(ast, actorEls, states, events, txFor) {
-  const firstEventByActor = /* @__PURE__ */ new Map();
-  for (const ev of events) {
-    if (ev.actor === "camera") continue;
-    if (!firstEventByActor.has(ev.actor)) firstEventByActor.set(ev.actor, ev);
-  }
-  for (const [name, def] of Object.entries(ast.actors)) {
-    const el = actorEls.get(name);
-    const s = states.get(name);
-    if (!el || !s) continue;
-    const firstEv = firstEventByActor.get(name);
-    if (!firstEv) continue;
-    if (firstEv.action === "enter") {
-      const from = String(firstEv.params.from ?? "left");
-      el.style.transform = txFor(name)(offscreenState(s, from, ast.meta.width, ast.meta.height));
-    }
-    if (firstEv.action === "fade_in" && (def.opacity === void 0 || def.opacity > 0)) {
-      el.style.opacity = "0";
-    }
-  }
-}
-
-// src/actions/figure.ts
-function sideOf(ctx) {
-  return String(ctx.ev.params.side ?? "right") === "left" ? "left" : "right";
-}
-function partEl(ctx, part) {
-  const selector = PART_SEL[part];
-  return selector ? ctx.el.querySelector(selector) : null;
-}
-function rotateKeyframe(deg, offset) {
-  return offset === void 0 ? { transform: `rotate(${deg}deg)` } : { transform: `rotate(${deg}deg)`, offset };
-}
-function swingLimb(ctx, part, extendDeg, peakOffset) {
-  const el = partEl(ctx, part);
-  if (!el) return;
-  const rest = readRotation(el);
-  ctx.anims.push(
-    el.animate([rotateKeyframe(rest), rotateKeyframe(extendDeg, peakOffset), rotateKeyframe(rest)], {
-      ...ctx.baseOpts,
-      easing: "ease-in-out",
-      fill: "forwards"
-    })
-  );
-}
-var punch = (ctx) => {
-  const side = sideOf(ctx);
-  swingLimb(ctx, side === "left" ? "arm_left" : "arm_right", side === "left" ? -75 : 75, 0.35);
-};
-var kick = (ctx) => {
-  const side = sideOf(ctx);
-  swingLimb(ctx, side === "left" ? "leg_left" : "leg_right", side === "left" ? -100 : 100, 0.38);
-};
-var wave = (ctx) => {
-  const side = sideOf(ctx);
-  const el = partEl(ctx, side === "left" ? "arm_left" : "arm_right");
-  if (!el) return;
-  const rest = readRotation(el);
-  const up = side === "left" ? 70 : -70;
-  const inward = side === "left" ? 50 : -50;
-  ctx.anims.push(
-    el.animate(
-      [
-        rotateKeyframe(rest, 0),
-        rotateKeyframe(up, 0.2),
-        rotateKeyframe(inward, 0.4),
-        rotateKeyframe(up, 0.55),
-        rotateKeyframe(inward, 0.7),
-        rotateKeyframe(up, 0.85),
-        rotateKeyframe(rest, 1)
-      ],
-      { ...ctx.baseOpts, easing: "ease-in-out", fill: "forwards" }
-    )
-  );
-};
-var nod = (ctx) => {
-  const el = partEl(ctx, "head");
-  if (!el) return;
-  const rest = readRotation(el);
-  const down = 15;
-  ctx.anims.push(
-    el.animate(
-      [
-        rotateKeyframe(rest, 0),
-        rotateKeyframe(down, 0.35),
-        rotateKeyframe(rest, 0.65),
-        rotateKeyframe(down, 0.8),
-        rotateKeyframe(rest, 1)
-      ],
-      { ...ctx.baseOpts, easing: "ease-in-out", fill: "forwards" }
-    )
-  );
-};
-function commitRotation(el, deg) {
-  el.style.transform = el.style.transform.replace(/rotate\([^)]*\)/, `rotate(${deg}deg)`);
-}
-var rotatePart = (ctx) => {
-  const el = partEl(ctx, String(ctx.ev.params.part ?? ""));
-  if (!el) return;
-  const from = readRotation(el);
-  const to = typeof ctx.ev.params.to === "number" ? ctx.ev.params.to : from;
-  ctx.anims.push(
-    el.animate([rotateKeyframe(from), rotateKeyframe(to)], { ...ctx.baseOpts, fill: "forwards" })
-  );
-  commitRotation(el, to);
-};
-var POSEABLE_PARTS = ["arm_left", "arm_right", "leg_left", "leg_right", "head", "body"];
-var pose = (ctx) => {
-  for (const part of POSEABLE_PARTS) {
-    const to = ctx.ev.params[part];
-    if (typeof to !== "number") continue;
-    const el = partEl(ctx, part);
-    if (!el) continue;
-    ctx.anims.push(
-      el.animate([rotateKeyframe(readRotation(el)), rotateKeyframe(to)], {
-        ...ctx.baseOpts,
-        fill: "forwards"
-      })
-    );
-    commitRotation(el, to);
-  }
-};
-var face = (ctx) => {
-  const el = ctx.el.querySelector("[data-fig-face]");
-  if (!el) return;
-  const emoji = String(ctx.ev.params.text ?? ctx.ev.params._0 ?? "");
-  if (emoji) ctx.faceSwaps.push({ timeMs: ctx.ev.time * 1e3, el, emoji });
-};
-
-// src/actions/transform.ts
-var move = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
-  const to = ev.params.to;
-  const toX = to?.[0] ?? state.x;
-  const toY = to?.[1] ?? state.y;
-  anims.push(el.animate([{ transform: tx2(state) }, { transform: tx2({ ...state, x: toX, y: toY }) }], baseOpts));
-  state.x = toX;
-  state.y = toY;
-};
-var enter = ({ ev, el, state, baseOpts, ast, anims, tx: tx2 }) => {
-  const from = String(ev.params.from ?? "left");
-  const fromState = offscreenState(state, from, ast.meta.width, ast.meta.height);
-  anims.push(
-    el.animate(
-      [
-        { transform: tx2(fromState), opacity: state.opacity },
-        { transform: tx2(state), opacity: 1 }
-      ],
-      baseOpts
-    )
-  );
-  state.opacity = 1;
-};
-var exit = ({ ev, el, state, baseOpts, ast, anims, tx: tx2 }) => {
-  const to = String(ev.params.to ?? "right");
-  const toState = offscreenState(state, to, ast.meta.width, ast.meta.height);
-  anims.push(
-    el.animate(
-      [
-        { transform: tx2(state), opacity: state.opacity },
-        { transform: tx2(toState), opacity: 0 }
-      ],
-      baseOpts
-    )
-  );
-  state.x = toState.x;
-  state.y = toState.y;
-  state.opacity = 0;
-};
-var fadeIn = ({ el, state, baseOpts, anims }) => {
-  anims.push(el.animate([{ opacity: 0 }, { opacity: 1 }], baseOpts));
-  state.opacity = 1;
-};
-var fadeOut = ({ el, state, baseOpts, anims }) => {
-  anims.push(el.animate([{ opacity: state.opacity }, { opacity: 0 }], baseOpts));
-  state.opacity = 0;
-};
-var scale = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
-  const to = typeof ev.params.to === "number" ? ev.params.to : state.scale;
-  anims.push(el.animate([{ transform: tx2(state) }, { transform: tx2({ ...state, scale: to }) }], baseOpts));
-  state.scale = to;
-};
-var rotate = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
-  const to = typeof ev.params.to === "number" ? ev.params.to : state.rotate;
-  anims.push(el.animate([{ transform: tx2(state) }, { transform: tx2({ ...state, rotate: to }) }], baseOpts));
-  state.rotate = to;
-};
-var shake = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
-  const mag = typeof ev.params.intensity === "number" ? ev.params.intensity : 5;
-  anims.push(
-    el.animate(
-      [
-        { transform: tx2(state), offset: 0 },
-        { transform: tx2({ ...state, x: state.x + mag }), offset: 0.2 },
-        { transform: tx2({ ...state, x: state.x - mag }), offset: 0.4 },
-        { transform: tx2({ ...state, x: state.x + mag }), offset: 0.6 },
-        { transform: tx2({ ...state, x: state.x - mag }), offset: 0.8 },
-        { transform: tx2(state), offset: 1 }
-      ],
-      { ...baseOpts, easing: "linear" }
-    )
-  );
-};
-var jump = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
-  const height = typeof ev.params.height === "number" ? ev.params.height : 30;
-  anims.push(
-    el.animate(
-      [
-        { transform: tx2(state), offset: 0 },
-        { transform: tx2({ ...state, scale: state.scale * 0.9 }), offset: 0.1 },
-        { transform: tx2({ ...state, y: state.y - height, scale: state.scale * 1.1 }), offset: 0.45 },
-        { transform: tx2({ ...state, y: state.y - height * 0.3, scale: state.scale * 1.05 }), offset: 0.7 },
-        { transform: tx2({ ...state, scale: state.scale * 0.92 }), offset: 0.88 },
-        { transform: tx2(state), offset: 1 }
-      ],
-      { ...baseOpts, easing: "ease-in-out" }
-    )
-  );
-};
-var bounce = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
-  const intensity = typeof ev.params.intensity === "number" ? ev.params.intensity : 15;
-  const count = typeof ev.params.count === "number" ? ev.params.count : 3;
-  const keyframes = [{ transform: tx2(state), offset: 0 }];
-  for (let i = 0; i < count; i++) {
-    const amp = intensity * Math.pow(0.55, i);
-    const baseOffset = (i + 0.5) / (count + 0.5);
-    const peakOffset = Math.min(baseOffset, 0.98);
-    const valleyOffset = Math.min(baseOffset + 0.25 / (count + 0.5), 0.99);
-    keyframes.push({ transform: tx2({ ...state, y: state.y - amp }), offset: peakOffset });
-    if (i < count - 1) {
-      keyframes.push({ transform: tx2(state), offset: valleyOffset });
-    }
-  }
-  keyframes.push({ transform: tx2(state), offset: 1 });
-  anims.push(el.animate(keyframes, { ...baseOpts, easing: "ease-out" }));
-};
-
-// src/actions/effects.ts
-function numeric(value, fallback) {
-  return typeof value === "number" ? value : fallback;
-}
-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
-    )
-  );
-};
+import { parseAndCompile } from "@markdy/core";
 
 // src/geometry/rect.ts
-import { TECHNICAL_NODE_TYPES } from "@markdy/core";
-var SYSTEM_NODE_SIZE = { width: 184, height: 88 };
-var ACTOR_SIZES = {
-  ...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 },
-  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 rect = actorRect(state, actorType);
-  return { x: rect.x1 + (rect.x2 - rect.x1) / 2, y: rect.y1 + (rect.y2 - rect.y1) / 2 };
+function boxRect(box) {
+  return { x1: box.x, y1: box.y, x2: box.x + box.width, y2: box.y + box.height };
 }
-function actorRect(state, actorType) {
-  const { width, height } = actorSizeByType(actorType);
-  const scale2 = Math.max(1e-3, state.scale);
-  const scaledWidth = width * scale2;
-  const scaledHeight = height * scale2;
-  const dx = (scaledWidth - width) / 2;
-  const dy = (scaledHeight - height) / 2;
-  return {
-    x1: state.x - dx,
-    y1: state.y - dy,
-    x2: state.x + width + dx,
-    y2: state.y + height + dy
-  };
+function rectCenter(rect) {
+  return { x: (rect.x1 + rect.x2) / 2, y: (rect.y1 + rect.y2) / 2 };
 }
 function inflateRect(rect, pad) {
   return {
@@ -1764,19 +78,19 @@ function labelPointForPath(points, lane) {
   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: round1(mid.x), y: round1(mid.y - 10 - offset) };
   }
-  return { x: mid.x + 10 + offset, y: mid.y };
+  return { x: round1(mid.x + 10 + offset), y: round1(mid.y) };
 }
 function clamp(n, min, max) {
   if (max < min) return n;
   return Math.min(max, Math.max(min, n));
 }
-function clampPointToScene(point, ast) {
+function clampPointToScene(point, bounds) {
   const pad = 14;
   return {
-    x: round1(clamp(point.x, pad, ast.meta.width - pad)),
-    y: round1(clamp(point.y, pad, ast.meta.height - pad))
+    x: round1(clamp(point.x, pad, bounds.width - pad)),
+    y: round1(clamp(point.y, pad, bounds.height - pad))
   };
 }
 function routeLength(points) {
@@ -1798,23 +112,14 @@ function routeBends(points) {
   }
   return bends;
 }
-function routeFlowPath(sourceName, targetName, sourceState, targetState, states, ast, lane) {
-  const sourceType = ast.actors[sourceName]?.type ?? "box";
-  const targetType = ast.actors[targetName]?.type ?? "box";
-  const sourceRect = actorRect(sourceState, sourceType);
-  const targetRect = actorRect(targetState, targetType);
+function routeOrthogonal(sourceRect, targetRect, obstacles, bounds, lane = 0) {
   const laneShift = lane * 18;
-  const sourceCenter = actorCenter(sourceState, sourceType);
-  const targetCenter = actorCenter(targetState, targetType);
+  const sourceCenter = rectCenter(sourceRect);
+  const targetCenter = rectCenter(targetRect);
   const horizontalPrimary = Math.abs(targetCenter.x - sourceCenter.x) >= Math.abs(targetCenter.y - sourceCenter.y);
   const source = horizontalPrimary ? { x: targetCenter.x >= sourceCenter.x ? sourceRect.x2 : sourceRect.x1, y: sourceCenter.y } : { x: sourceCenter.x, y: targetCenter.y >= sourceCenter.y ? sourceRect.y2 : sourceRect.y1 };
   const target = horizontalPrimary ? { x: targetCenter.x >= sourceCenter.x ? targetRect.x1 : targetRect.x2, y: targetCenter.y } : { x: targetCenter.x, y: targetCenter.y >= sourceCenter.y ? targetRect.y1 : targetRect.y2 };
-  const obstacles = [];
-  for (const [name, state] of states.entries()) {
-    if (name === sourceName || name === targetName) continue;
-    const type = ast.actors[name]?.type ?? "box";
-    obstacles.push(inflateRect(actorRect(state, type), 8));
-  }
+  const infl = obstacles.map((o) => inflateRect(o, 8));
   const candidates = [];
   if (Math.abs(source.y - target.y) < 1e-3 || Math.abs(source.x - target.x) < 1e-3) {
     candidates.push([source, target]);
@@ -1825,18 +130,18 @@ function routeFlowPath(sourceName, targetName, sourceState, targetState, states,
     [source, { x: midX, y: source.y }, { x: midX, y: target.y }, target],
     [source, { x: source.x, y: midY }, { x: target.x, y: midY }, target]
   );
-  const minObstacleY = obstacles.length ? Math.min(...obstacles.map((o) => o.y1)) : Math.min(source.y, target.y);
-  const maxObstacleY = obstacles.length ? Math.max(...obstacles.map((o) => o.y2)) : Math.max(source.y, target.y);
+  const minObstacleY = infl.length ? Math.min(...infl.map((o) => o.y1)) : Math.min(source.y, target.y);
+  const maxObstacleY = infl.length ? Math.max(...infl.map((o) => o.y2)) : Math.max(source.y, target.y);
   const topLane = Math.max(16, minObstacleY - 24 - lane * 12);
-  const bottomLane = Math.min(ast.meta.height - 16, maxObstacleY + 24 + lane * 12);
+  const bottomLane = Math.min(bounds.height - 16, maxObstacleY + 24 + lane * 12);
   candidates.push(
     [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 minObstacleX = infl.length ? Math.min(...infl.map((o) => o.x1)) : Math.min(source.x, target.x);
+  const maxObstacleX = infl.length ? Math.max(...infl.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);
+  const rightLane = Math.min(bounds.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]
@@ -1844,26 +149,32 @@ function routeFlowPath(sourceName, targetName, sourceState, targetState, states,
   let best = candidates[0];
   let bestScore = Number.POSITIVE_INFINITY;
   for (const candidate of candidates) {
-    const hits = countPathIntersections(candidate, obstacles);
+    const hits = countPathIntersections(candidate, infl);
     const score = hits * 1e5 + routeBends(candidate) * 800 + routeLength(candidate);
     if (score < bestScore) {
       best = candidate;
       bestScore = score;
     }
   }
-  return best.map((point) => clampPointToScene(point, ast));
+  return best.map((point) => clampPointToScene(point, bounds));
 }
 
-// src/actions/flow.ts
+// src/edges.ts
 var EDGE_LAYER_ATTR = "data-markdy-edge-layer";
-var STROKE_BY_ACTION = {
-  request: "#38bdf8",
-  response: "#a78bfa",
-  emit: "#f59e0b"
+var EDGE_STYLES = {
+  request: { dash: "", marker: "arrow" },
+  response: { dash: "6 4", marker: "arrow-open" },
+  event: { dash: "2 6", marker: "dot" },
+  dependency: { dash: "4 4", marker: "none" }
 };
-var DEFAULT_STROKE = "#38bdf8";
-var LABEL_MAX_CHARS = 28;
-var EDGE_FADE_MS = 140;
+function dedupePoints(points) {
+  const out = [];
+  for (const p of points) {
+    const last = out[out.length - 1];
+    if (!last || Math.abs(last.x - p.x) > 0.01 || Math.abs(last.y - p.y) > 0.01) out.push(p);
+  }
+  return out.length >= 2 ? out : points;
+}
 function ensureEdgeLayer(scene) {
   const existing = scene.querySelector(`svg[${EDGE_LAYER_ATTR}='1']`);
   if (existing) return existing;
@@ -1881,388 +192,322 @@ function ensureEdgeLayer(scene) {
   scene.appendChild(svg);
   return svg;
 }
-function ensureEdgeDefs(svg) {
-  if (svg.querySelector("defs[data-markdy-flow-defs='1']")) return;
+function ensureDefs(svg, theme, id) {
+  const key = `data-markdy-defs-${id}`;
+  if (svg.querySelector(`defs[${key}='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);
+  defs.setAttribute(key, "1");
+  for (const [kind, color] of Object.entries(theme.edges)) {
+    const arrow = document.createElementNS("http://www.w3.org/2000/svg", "marker");
+    arrow.setAttribute("id", `${id}-arrow-${kind}`);
+    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 path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", "M 1 1 L 9 5 L 1 9 z");
+    path.setAttribute("fill", color);
+    arrow.appendChild(path);
+    defs.appendChild(arrow);
+  }
   svg.prepend(defs);
 }
-function isDashed(ctx) {
-  const style = String(ctx.ev.params.style ?? "");
-  return style === "dashed" || style === "fire_and_forget" || ctx.ev.action === "response";
-}
-function buildEdge(ctx, targetName) {
-  const { ev, state, states, ast, scene, baseOpts, anims } = ctx;
-  const targetState = states.get(targetName);
-  if (!targetState) return;
-  const lane = ev.line % 5 - 2;
-  const points = routeFlowPath(ev.actor, targetName, state, targetState, states, ast, lane);
-  const length = polylineLength(points);
-  const pathD = toPathD(points);
-  const stroke = STROKE_BY_ACTION[ev.action] ?? DEFAULT_STROKE;
-  const svg = ensureEdgeLayer(scene);
-  ensureEdgeDefs(svg);
+function createEdgeRuntime(svg, from, to, kind, label, theme, sceneId, obstacles, bounds) {
+  ensureDefs(svg, theme, sceneId);
+  const color = theme.edges[kind];
+  const style = EDGE_STYLES[kind];
+  const points = dedupePoints(routeOrthogonal(boxRect(from), boxRect(to), obstacles, bounds));
+  const d = toPathD(points);
+  const len = polylineLength(points);
   const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
-  group.setAttribute("data-markdy-flow-edge", "1");
+  group.setAttribute("data-edge-kind", kind);
+  group.style.opacity = "0";
   const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  path.setAttribute("d", pathD);
+  path.setAttribute("d", d);
   path.setAttribute("fill", "none");
-  path.setAttribute("stroke", stroke);
-  path.setAttribute("stroke-width", "3");
-  path.setAttribute("stroke-linecap", "round");
+  path.setAttribute("stroke", color);
+  path.setAttribute("stroke-width", kind === "dependency" ? "1.5" : "2.5");
   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", "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 = 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);
+  path.setAttribute("stroke-linecap", "round");
+  if (style.dash) path.setAttribute("stroke-dasharray", style.dash);
+  if (style.marker !== "none") {
+    path.setAttribute("marker-end", `url(#${sceneId}-arrow-${kind})`);
+  }
+  path.style.filter = `drop-shadow(0 0 4px ${color}55)`;
+  const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  dot.setAttribute("r", "4");
+  dot.setAttribute("fill", color);
+  dot.style.opacity = "0";
+  dot.style.filter = `drop-shadow(0 0 6px ${color})`;
+  group.append(path, dot);
+  let labelEl;
+  if (label) {
+    const mid = labelPointForPath(points, 0);
+    labelEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
+    labelEl.setAttribute("x", String(mid.x));
+    labelEl.setAttribute("y", String(mid.y));
+    labelEl.setAttribute("text-anchor", "middle");
+    labelEl.setAttribute("font-size", "11");
+    labelEl.setAttribute("font-family", "ui-monospace, SFMono-Regular, Menlo, monospace");
+    labelEl.setAttribute("fill", theme.textMuted);
+    labelEl.textContent = label;
+    labelEl.style.opacity = "0";
+    group.appendChild(labelEl);
   }
   svg.appendChild(group);
-  anims.push(
-    path.animate([{ strokeDashoffset: length }, { strokeDashoffset: 0 }], baseOpts),
-    marker.animate(
-      [
-        { offsetDistance: "0%", opacity: 1 },
-        { offsetDistance: "100%", opacity: 1 }
-      ],
-      baseOpts
-    ),
-    group.animate([{ opacity: 1 }, { opacity: 0 }], {
-      delay: Number(baseOpts.delay ?? 0) + Number(baseOpts.duration ?? 0),
-      duration: EDGE_FADE_MS,
-      fill: "forwards"
-    })
-  );
-}
-var flowEdge = (ctx) => {
-  const targetName = String(ctx.ev.params.to ?? "");
-  if (targetName) buildEdge(ctx, targetName);
-};
-
-// src/theme.ts
-var DARK_LUMINANCE_THRESHOLD = 140;
-var NAMED_DARK = {
-  black: true,
-  "#000": true,
-  "#000000": true
-};
-function isSceneDark(scene) {
-  const bg = scene.style.background || "white";
-  let hex = bg.trim().replace(/^#/, "");
-  if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-  if (hex.length === 6) {
-    const r = parseInt(hex.slice(0, 2), 16);
-    const g = parseInt(hex.slice(2, 4), 16);
-    const b = parseInt(hex.slice(4, 6), 16);
-    return 0.299 * r + 0.587 * g + 0.114 * b <= DARK_LUMINANCE_THRESHOLD;
-  }
-  return NAMED_DARK[bg.toLowerCase()] ?? false;
-}
-function speechBubbleTheme(dark) {
-  return dark ? {
-    background: "#1e2530",
-    border: "#475569",
-    text: "#e2e8f0",
-    shadow: "0 2px 8px rgba(0,0,0,0.35)"
-  } : {
-    background: "white",
-    border: "#222",
-    text: "#222",
-    shadow: "0 2px 8px rgba(0,0,0,0.12)"
-  };
-}
-
-// src/actions/speech.ts
-var MAX_FADE_MS = 200;
-var FADE_FRACTION = 0.15;
-var say = ({ ev, el, state, delayMs, durMs, scene, anims }) => {
-  const text = String(ev.params.text ?? "");
-  const theme = speechBubbleTheme(isSceneDark(scene));
-  const inverseScale = 1 / (state.scale || 1);
-  const bubble = document.createElement("div");
-  bubble.textContent = text;
-  Object.assign(bubble.style, {
-    position: "absolute",
-    bottom: "calc(100% + 10px)",
-    left: "50%",
-    transform: `translateX(-50%) scale(${inverseScale})`,
-    transformOrigin: "center bottom",
-    background: theme.background,
-    border: `2px solid ${theme.border}`,
-    color: theme.text,
-    borderRadius: "12px",
-    padding: "6px 14px",
-    fontFamily: "system-ui, sans-serif",
-    fontSize: "15px",
-    lineHeight: "1.3",
-    whiteSpace: "nowrap",
-    maxWidth: "220px",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    pointerEvents: "none",
-    zIndex: "10",
-    boxShadow: theme.shadow,
-    opacity: "0"
-  });
-  const tail = document.createElement("span");
-  Object.assign(tail.style, {
-    position: "absolute",
-    bottom: "-10px",
-    left: "50%",
-    transform: "translateX(-50%)",
-    width: "0",
-    height: "0",
-    borderLeft: "7px solid transparent",
-    borderRight: "7px solid transparent",
-    borderTop: `10px solid ${theme.border}`
+  return { group, path, label: labelEl, dot, pathLen: len, points };
+}
+function dotTravelKeyframes(points) {
+  const total = polylineLength(points);
+  const frames = [];
+  let acc = 0;
+  let lastOffset = -1;
+  points.forEach((p, i) => {
+    if (i > 0) acc += Math.hypot(p.x - points[i - 1].x, p.y - points[i - 1].y);
+    let offset = total > 0 ? acc / total : i === points.length - 1 ? 1 : 0;
+    if (offset <= lastOffset) offset = Math.min(1, lastOffset + 1e-4);
+    lastOffset = offset;
+    frames.push({
+      offset,
+      transform: `translate(${p.x}px, ${p.y}px)`,
+      opacity: i === 0 || i === points.length - 1 ? 0 : 1
+    });
   });
-  bubble.appendChild(tail);
-  el.style.overflow = "visible";
-  el.appendChild(bubble);
-  const fadeMs = Math.min(MAX_FADE_MS, durMs * FADE_FRACTION);
+  return frames;
+}
+function animateEdgeReveal(runtime, startMs, durMs) {
+  const anims = [];
+  const { path, dot, label, group, pathLen, points } = runtime;
+  path.style.strokeDasharray = String(pathLen);
+  path.style.strokeDashoffset = String(pathLen);
+  const drawMs = Math.min(220, durMs * 0.5);
   anims.push(
-    bubble.animate([{ opacity: 0 }, { opacity: 1 }], {
-      delay: delayMs,
-      duration: fadeMs,
-      fill: "forwards"
-    }),
-    bubble.animate([{ opacity: 1 }, { opacity: 0 }], {
-      delay: delayMs + durMs - fadeMs,
-      duration: fadeMs,
-      fill: "forwards"
-    })
+    group.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 120, delay: startMs, fill: "forwards" }),
+    path.animate(
+      [{ strokeDashoffset: pathLen }, { strokeDashoffset: 0 }],
+      { duration: drawMs, delay: startMs, fill: "forwards", easing: "ease-out" }
+    )
   );
-};
-
-// src/actions/projectile.ts
-var PROJECTILE_SIZE_PX = 32;
-function createProjectile(assetName, assetDef, assetOverrides) {
-  if (assetDef.type === "image") {
-    const img = document.createElement("img");
-    img.src = assetOverrides[assetName] ?? assetDef.value;
-    img.alt = assetName;
-    img.setAttribute("draggable", "false");
-    img.style.width = `${PROJECTILE_SIZE_PX}px`;
-    img.style.height = `${PROJECTILE_SIZE_PX}px`;
-    return img;
+  if (label) {
+    anims.push(label.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 180, delay: startMs + 80, fill: "forwards" }));
+  }
+  if (points.length >= 2) {
+    anims.push(
+      dot.animate(dotTravelKeyframes(points), {
+        duration: Math.max(drawMs, durMs),
+        delay: startMs,
+        fill: "forwards",
+        easing: "ease-in-out"
+      })
+    );
   }
-  const span = document.createElement("span");
-  span.className = "iconify";
-  span.dataset.icon = assetDef.value;
-  span.style.fontSize = `${PROJECTILE_SIZE_PX}px`;
-  span.style.lineHeight = "1";
-  span.style.display = "inline-block";
-  return span;
-}
-var throwAsset = ({
-  ev,
-  state,
-  baseOpts,
-  ast,
-  states,
-  scene,
-  assetOverrides,
-  anims
-}) => {
-  const assetName = String(ev.params.asset ?? "");
-  const targetState = states.get(String(ev.params.to ?? ""));
-  const assetDef = ast.assets[assetName];
-  if (!assetDef || !targetState) return;
-  const projectile = createProjectile(assetName, assetDef, assetOverrides);
-  Object.assign(projectile.style, {
-    position: "absolute",
-    left: "0",
-    top: "0",
-    pointerEvents: "none",
-    zIndex: "9",
-    opacity: "0"
-  });
-  scene.appendChild(projectile);
-  const anim = projectile.animate(
-    [
-      { transform: tx(state), opacity: 1 },
-      { transform: tx(targetState), opacity: 0 }
-    ],
-    { ...baseOpts, easing: "ease-in" }
-  );
-  anim.addEventListener("finish", () => {
-    if (projectile.parentNode === scene) scene.removeChild(projectile);
-  });
-  anims.push(anim);
-};
-
-// src/actions/registry.ts
-var ACTION_HANDLERS = Object.freeze({
-  // Universal — every actor type
-  move,
-  enter,
-  exit,
-  fade_in: fadeIn,
-  fade_out: fadeOut,
-  spring,
-  follow_path: followPath,
-  scale,
-  rotate,
-  shake,
-  pulse,
-  glow,
-  ripple,
-  blur,
-  line_reveal: lineReveal,
-  mask,
-  parallax,
-  jump,
-  bounce,
-  say,
-  throw: throwAsset,
-  // Figure-only — the parser rejects these on other actor types
-  punch,
-  kick,
-  wave,
-  nod,
-  rotate_part: rotatePart,
-  pose,
-  face,
-  // System-diagram flow edges (@markdy/stdlib-systems)
-  request: flowEdge,
-  response: flowEdge,
-  emit: flowEdge
-});
-function handlerFor(action) {
-  return ACTION_HANDLERS[action];
+  return anims;
 }
-
-// src/animations.ts
-var DEFAULT_DURATION_S = 0.5;
-var DEFAULT_EASE_BY_ACTION = {
-  enter: "out",
-  fade_in: "out",
-  exit: "in",
-  fade_out: "in"
-};
-function buildAnimations(ast, actorEls, actorLayer, cameraLayer, assetOverrides, faceSwaps) {
+function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds) {
   const anims = [];
-  const states = /* @__PURE__ */ new Map();
-  for (const [name, def] of Object.entries(ast.actors)) {
-    states.set(name, stateFrom(def));
-  }
-  const captionActors = new Set(
-    Object.entries(ast.actors).filter(([, def]) => def.type === "caption").map(([name]) => name)
+  const nodeById = new Map(nodes.map((n) => [n.id, n]));
+  const rectById = new Map(nodes.map((n) => [n.id, boxRect(n)]));
+  const svg = ensureEdgeLayer(scene);
+  const sceneId = `md-${Math.random().toString(36).slice(2, 8)}`;
+  anims.push(
+    titleEl.animate(
+      [{ opacity: 0, transform: "translateY(-6px)" }, { opacity: 1, transform: "translateY(0)" }],
+      { duration: 420, delay: 0, fill: "forwards", easing: "ease-out" }
+    )
   );
-  const txFor = (actorName) => captionActors.has(actorName) ? txCaption : tx;
-  const events = [...ast.events].sort((a, b) => a.time - b.time);
-  preInitInlineStyles(ast, actorEls, states, events, txFor);
-  const cameraState = freshCameraState();
-  for (const ev of events) {
-    const delayMs = ev.time * 1e3;
-    const durMs = Math.max(
-      1,
-      (typeof ev.params.dur === "number" ? ev.params.dur : DEFAULT_DURATION_S) * 1e3
-    );
-    const baseOpts = {
-      delay: delayMs,
-      duration: durMs,
-      fill: "forwards",
-      easing: toEasing(ev.params.ease ?? DEFAULT_EASE_BY_ACTION[ev.action])
-    };
-    if (ev.actor === "camera") {
-      buildCameraAction(ev, cameraLayer, ast, baseOpts, anims, cameraState);
+  for (const cue of cues) {
+    const startMs = cue.start * 1e3;
+    const durMs = cue.duration * 1e3;
+    if (cue.kind === "show") {
+      cue.targets.forEach((id, idx) => {
+        const el = nodeEls.get(id);
+        if (!el) return;
+        const delay = startMs + (typeof cue.params.stagger === "number" ? cue.params.stagger * 1e3 * idx : 0);
+        anims.push(
+          el.animate(
+            [{ opacity: 0, transform: "translateY(8px)" }, { opacity: 1, transform: "translateY(0)" }],
+            { duration: durMs, delay, fill: "forwards", easing: "ease-out" }
+          )
+        );
+      });
+      continue;
+    }
+    if (cue.kind === "hide") {
+      for (const id of cue.targets) {
+        const el = nodeEls.get(id);
+        if (!el) continue;
+        anims.push(el.animate([{ opacity: 1 }, { opacity: 0 }], { duration: durMs, delay: startMs, fill: "forwards" }));
+      }
+      continue;
+    }
+    if (cue.kind === "glow") {
+      for (const id of cue.targets) {
+        const el = nodeEls.get(id);
+        if (!el) continue;
+        if (cue.params.color) el.style.setProperty("--md-glow-color", String(cue.params.color));
+        el.dataset.glow = "1";
+        anims.push(
+          el.animate(
+            [{ filter: "brightness(1)" }, { filter: "brightness(1.15)" }, { filter: "brightness(1)" }],
+            { duration: durMs, delay: startMs, fill: "forwards" }
+          )
+        );
+      }
+      continue;
+    }
+    if (cue.kind === "focus") {
+      for (const id of cue.targets) {
+        const el = nodeEls.get(id);
+        if (!el) continue;
+        el.dataset.focused = "1";
+        anims.push(
+          el.animate(
+            [{ transform: "scale(1)" }, { transform: "scale(1.03)" }, { transform: "scale(1)" }],
+            { duration: durMs, delay: startMs, fill: "forwards" }
+          )
+        );
+      }
       continue;
     }
-    const el = actorEls.get(ev.actor);
-    const state = states.get(ev.actor);
-    const handler = handlerFor(ev.action);
-    if (!el || !state || !handler) continue;
-    const ctx = {
-      ev,
-      el,
-      state,
-      baseOpts,
-      delayMs,
-      durMs,
-      ast,
-      states,
-      actorEls,
-      scene: actorLayer,
-      assetOverrides,
-      faceSwaps,
-      anims,
-      tx: txFor(ev.actor)
-    };
-    handler(ctx);
+    if (cue.kind === "flow" && cue.segments?.[0]) {
+      const seg = cue.segments[0];
+      const from = nodeById.get(seg.from);
+      const to = nodeById.get(seg.to);
+      if (!from || !to) continue;
+      const obstacles = [];
+      for (const [id, rect] of rectById) {
+        if (id !== seg.from && id !== seg.to) obstacles.push(rect);
+      }
+      const runtime = createEdgeRuntime(svg, from, to, seg.op, seg.label, theme, sceneId, obstacles, bounds);
+      anims.push(...animateEdgeReveal(runtime, startMs, durMs));
+    }
   }
+  for (const a of anims) a.pause();
   return anims;
 }
 
-// src/player.ts
+// src/nodes.ts
+var STYLE_ID = "markdy-diagram-node-styles";
+function ensureNodeStyles(doc) {
+  if (doc.getElementById(STYLE_ID)) return;
+  const style = doc.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `
+.markdy-node {
+  position: absolute;
+  box-sizing: border-box;
+  width: var(--md-node-w, 184px);
+  height: var(--md-node-h, 88px);
+  border-radius: 16px;
+  border: 1px solid var(--md-border);
+  background: linear-gradient(145deg, var(--md-surface-raised), var(--md-surface));
+  color: var(--md-text);
+  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.28), 0 0 0 1px rgba(255,255,255,0.04) inset;
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateY(8px);
+  transition: box-shadow 0.3s ease;
+}
+.markdy-node[data-visible="1"] {
+  opacity: 1;
+  transform: translateY(0);
+}
+.markdy-node[data-focused="1"] {
+  box-shadow: 0 0 0 2px var(--md-accent), 0 16px 40px rgba(2, 6, 23, 0.35);
+}
+.markdy-node[data-glow="1"] {
+  box-shadow: 0 0 24px var(--md-glow-color, var(--md-accent)), 0 0 0 1px var(--md-glow-color, var(--md-accent)) inset;
+}
+.markdy-node__rail {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: var(--md-role-color, var(--md-accent));
+  border-radius: 16px 0 0 16px;
+}
+.markdy-node__type {
+  padding: 10px 14px 0 18px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--md-text-muted);
+}
+.markdy-node__label {
+  padding: 2px 14px 0 18px;
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 1.25;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.markdy-node[data-role="client"] { border-radius: 20px 20px 8px 8px; }
+.markdy-node[data-role="data"] { border-radius: 16px 16px 28px 28px; }
+.markdy-node[data-role="flow"] { transform: rotate(0deg); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
+.markdy-node[data-role="network"] { clip-path: polygon(8% 0%, 92% 0%, 100% 50%, 92% 100%, 8% 100%, 0% 50%); }
+.markdy-scene-title {
+  position: absolute;
+  left: 64px;
+  top: 28px;
+  right: 64px;
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--md-text);
+  opacity: 0;
+  transform: translateY(-6px);
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+}
+.markdy-scene-title[data-visible="1"] {
+  opacity: 1;
+  transform: translateY(0);
+}
+`;
+  doc.head.appendChild(style);
+}
+function createNodeEl(node, theme) {
+  const el = document.createElement("div");
+  el.className = "markdy-node markdy-scene-actor";
+  el.dataset.actor = node.id;
+  el.dataset.role = node.role;
+  el.style.left = `${node.x}px`;
+  el.style.top = `${node.y}px`;
+  el.style.setProperty("--md-node-w", `${node.width}px`);
+  el.style.setProperty("--md-node-h", `${node.height}px`);
+  const roleColor = theme.roles[node.role] ?? theme.accent;
+  el.style.setProperty("--md-role-color", roleColor);
+  const rail = document.createElement("div");
+  rail.className = "markdy-node__rail";
+  const type = document.createElement("div");
+  type.className = "markdy-node__type";
+  type.textContent = node.kind.replace(/_/g, " ");
+  const label = document.createElement("div");
+  label.className = "markdy-node__label";
+  label.textContent = node.label;
+  el.append(rail, type, label);
+  return el;
+}
+function createTitleEl(title) {
+  const el = document.createElement("div");
+  el.className = "markdy-scene-title";
+  el.textContent = title;
+  return el;
+}
+
+// src/theme.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,
@@ -2275,149 +520,69 @@ function ensureSceneStyles(doc) {
 .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;
+    linear-gradient(var(--md-grid-minor) 1px, transparent 1px) 0 0 / 32px 32px,
+    linear-gradient(90deg, var(--md-grid-minor) 1px, transparent 1px) 0 0 / 32px 32px,
+    linear-gradient(var(--md-grid-major) 1px, transparent 1px) 0 0 / 160px 160px,
+    linear-gradient(90deg, var(--md-grid-major) 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;
+    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--md-accent) 16%, transparent), transparent 42%),
+    linear-gradient(180deg, transparent 0%, rgba(2, 6, 23, 0.08) 58%, var(--md-vignette) 100%);
   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-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];
-  if (hex.length === 6) {
-    const r = parseInt(hex.slice(0, 2), 16);
-    const g = parseInt(hex.slice(2, 4), 16);
-    const b = parseInt(hex.slice(4, 6), 16);
-    return 0.299 * r + 0.587 * g + 0.114 * b > 140 ? "#1a1a1a" : "#f0f0f0";
-  }
-  const named = {
-    white: "#1a1a1a",
-    black: "#f0f0f0",
-    transparent: "#1a1a1a"
-  };
-  return named[bg.toLowerCase()] ?? "#1a1a1a";
+function applyThemeToScene(scene, theme) {
+  scene.style.background = theme.canvas;
+  scene.style.color = theme.text;
+  scene.style.setProperty("--md-canvas", theme.canvas);
+  scene.style.setProperty("--md-surface", theme.surface);
+  scene.style.setProperty("--md-surface-raised", theme.surfaceRaised);
+  scene.style.setProperty("--md-border", theme.border);
+  scene.style.setProperty("--md-text", theme.text);
+  scene.style.setProperty("--md-text-muted", theme.textMuted);
+  scene.style.setProperty("--md-grid-minor", theme.gridMinor);
+  scene.style.setProperty("--md-grid-major", theme.gridMajor);
+  scene.style.setProperty("--md-vignette", theme.vignette);
+  scene.style.setProperty("--md-accent", theme.accent);
+  scene.dataset.markdyTheme = theme.name;
 }
+
+// src/player.ts
 function createPlayer(opts) {
   const {
     container,
     code,
-    assets: assetOverrides = {},
-    imports,
     autoplay = true,
     loop = true,
     copyright = true,
     progressBar = true,
-    onWarning = (w) => console.warn(`[markdy] line ${w.line}: ${w.message} (${w.kind})`),
+    onWarning = (w) => console.warn(`[markdy] line ${w.line}: ${w.message}`),
     onTimeUpdate,
     onPlayStateChange
   } = opts;
-  const ast = parse(code, imports ? { imports } : void 0);
-  const totalDurationMs = (ast.meta.duration ?? 0) * 1e3;
-  const durationSeconds = totalDurationMs / 1e3;
-  for (const w of ast.warnings) onWarning(w);
+  const { ast, plan } = parseAndCompile(code);
+  for (const w of ast.diagnostics) {
+    if (w.severity === "warning") onWarning(w);
+  }
+  const totalDurationMs = plan.duration * 1e3;
+  const durationSeconds = plan.duration;
   const viewport = document.createElement("div");
   Object.assign(viewport.style, {
     position: "relative",
     width: "100%",
-    aspectRatio: `${ast.meta.width} / ${ast.meta.height}`,
+    aspectRatio: `${plan.meta.width} / ${plan.meta.height}`,
     overflow: "hidden"
   });
   container.appendChild(viewport);
@@ -2433,13 +598,14 @@ function createPlayer(opts) {
     });
     viewport.appendChild(progressEl);
   }
-  const tlAngle = (Math.atan2(-ast.meta.width / 2, ast.meta.height / 2) * 180 / Math.PI + 360) % 360;
+  const tlAngle = Math.atan2(-plan.meta.width / 2, plan.meta.height / 2) * 180 / Math.PI;
+  const tlAngleNorm = (tlAngle % 360 + 360) % 360;
   function updateProgressBar(pct) {
     if (!progressEl) return;
     const deg = pct * 360;
     const rainbow = "hsl(0,90%,60%), hsl(45,90%,55%), hsl(90,80%,50%), hsl(180,80%,50%), hsl(270,80%,55%), hsl(330,90%,60%)";
-    progressEl.style.background = `conic-gradient(from ${tlAngle}deg, ${rainbow} ${deg}deg, transparent ${deg}deg)`;
-    progressEl.style.mask = `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`;
+    progressEl.style.background = `conic-gradient(from ${tlAngleNorm}deg, ${rainbow} ${deg}deg, transparent ${deg}deg)`;
+    progressEl.style.mask = "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)";
     progressEl.style.webkitMask = progressEl.style.mask;
     progressEl.style.maskComposite = "exclude";
     progressEl.style.webkitMaskComposite = "xor";
@@ -2456,78 +622,57 @@ function createPlayer(opts) {
       display: "block",
       textAlign: "right",
       fontSize: "10px",
-      fontFamily: "system-ui, -apple-system, sans-serif",
+      fontFamily: "system-ui, sans-serif",
       color: "#999",
       textDecoration: "none",
       padding: "3px 6px 0",
-      opacity: "0.7",
-      transition: "opacity 0.2s",
-      maxWidth: container.style.maxWidth || "100%",
-      width: "100%"
-    });
-    badge.addEventListener("mouseenter", () => {
-      badge.style.opacity = "1";
+      opacity: "0.7"
     });
-    badge.addEventListener("mouseleave", () => {
-      badge.style.opacity = "0.7";
-    });
-    if (container.parentNode) {
-      container.parentNode.insertBefore(badge, container.nextSibling);
-    } else {
-      container.appendChild(badge);
-    }
+    if (container.parentNode) container.parentNode.insertBefore(badge, container.nextSibling);
+    else container.appendChild(badge);
   }
-  const scene = document.createElement("div");
   ensureSceneStyles(document);
+  ensureNodeStyles(document);
+  const scene = document.createElement("div");
   scene.className = "markdy-scene-root";
-  scene.dataset.markdySceneTone = bgToTextColor(ast.meta.bg) === "#1a1a1a" ? "light" : "dark";
   Object.assign(scene.style, {
     position: "absolute",
     top: "0",
     left: "0",
-    width: `${ast.meta.width}px`,
-    height: `${ast.meta.height}px`,
-    background: ast.meta.bg,
-    color: bgToTextColor(ast.meta.bg),
+    width: `${plan.meta.width}px`,
+    height: `${plan.meta.height}px`,
     overflow: "hidden",
     userSelect: "none",
     transformOrigin: "0 0"
   });
+  applyThemeToScene(scene, plan.theme);
   viewport.appendChild(scene);
   const sceneContent = document.createElement("div");
   sceneContent.className = "markdy-scene-content";
-  Object.assign(sceneContent.style, {
-    position: "absolute",
-    top: "0",
-    left: "0",
-    width: "100%",
-    height: "100%",
-    transformOrigin: "50% 50%",
-    willChange: "transform"
-  });
+  Object.assign(sceneContent.style, { position: "absolute", inset: "0" });
   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);
+  const titleEl = createTitleEl(plan.title);
+  actorLayer.appendChild(titleEl);
+  const nodeEls = /* @__PURE__ */ new Map();
+  for (const node of plan.nodes) {
+    const el = createNodeEl(node, plan.theme);
+    actorLayer.appendChild(el);
+    nodeEls.set(node.id, el);
+  }
   function scaleScene() {
-    const s = viewport.clientWidth / ast.meta.width;
+    const s = viewport.clientWidth / plan.meta.width;
     scene.style.transform = `scale(${s})`;
   }
   scaleScene();
   const resizeObserver = new ResizeObserver(scaleScene);
   resizeObserver.observe(viewport);
-  const actorEls = /* @__PURE__ */ new Map();
-  for (const [name, def] of Object.entries(ast.actors)) {
-    const el = createActorEl(name, def, ast.assets, assetOverrides);
-    actorLayer.appendChild(el);
-    actorEls.set(name, el);
-  }
-  const faceSwaps = [];
-  const allAnims = buildAnimations(ast, actorEls, actorLayer, sceneContent, assetOverrides, faceSwaps);
-  faceSwaps.sort((a, b) => a.timeMs - b.timeMs);
+  const allAnims = buildCueAnimations(plan.cues, nodeEls, plan.nodes, plan.theme, sceneContent, titleEl, {
+    width: plan.meta.width,
+    height: plan.meta.height
+  });
   for (const anim of allAnims) {
     anim.pause();
     anim.currentTime = 0;
@@ -2536,47 +681,16 @@ function createPlayer(opts) {
   let lastRafTs = null;
   let isPlaying = false;
   let rafId = null;
-  for (const { el } of faceSwaps) {
-    if (!el.dataset["figFaceInitial"]) {
-      el.dataset["figFaceInitial"] = el.textContent ?? "";
-    }
-  }
   function applyCurrentTime() {
-    for (const anim of allAnims) {
-      anim.currentTime = sceneMs;
-    }
-    applyFaceSwaps();
+    for (const anim of allAnims) anim.currentTime = sceneMs;
     onTimeUpdate?.(sceneMs / 1e3, durationSeconds);
   }
-  function applyFaceSwaps() {
-    if (faceSwaps.length === 0) return;
-    const elEmoji = /* @__PURE__ */ new Map();
-    for (const { timeMs, el, emoji } of faceSwaps) {
-      if (timeMs <= sceneMs) elEmoji.set(el, emoji);
-    }
-    for (const [el, emoji] of elEmoji) {
-      if (el.textContent !== emoji) el.textContent = emoji;
-    }
-    const elFirst = /* @__PURE__ */ new Map();
-    for (const { el, emoji } of faceSwaps) {
-      if (!elFirst.has(el)) elFirst.set(el, emoji);
-    }
-    for (const [el, firstEmoji] of elFirst) {
-      if (!elEmoji.has(el)) {
-        const initial = el.dataset["figFaceInitial"] ?? firstEmoji;
-        if (el.textContent !== initial) el.textContent = initial;
-      }
-    }
-  }
   function rafTick(timestamp) {
-    if (lastRafTs !== null) {
-      sceneMs += timestamp - lastRafTs;
-    }
+    if (lastRafTs !== null) sceneMs += timestamp - lastRafTs;
     lastRafTs = timestamp;
     if (totalDurationMs > 0 && sceneMs >= totalDurationMs) {
-      if (loop) {
-        sceneMs = sceneMs % totalDurationMs;
-      } else {
+      if (loop) sceneMs = sceneMs % totalDurationMs;
+      else {
         sceneMs = totalDurationMs;
         applyCurrentTime();
         isPlaying = false;
@@ -2602,15 +716,12 @@ function createPlayer(opts) {
       if (!isPlaying) return;
       isPlaying = false;
       onPlayStateChange?.(false);
-      if (rafId !== null) {
-        cancelAnimationFrame(rafId);
-        rafId = null;
-      }
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      rafId = null;
       lastRafTs = null;
     },
     seek(seconds) {
-      const nextMs = seconds * 1e3;
-      sceneMs = totalDurationMs > 0 ? Math.min(Math.max(nextMs, 0), totalDurationMs) : Math.max(nextMs, 0);
+      sceneMs = totalDurationMs > 0 ? Math.min(Math.max(seconds * 1e3, 0), totalDurationMs) : Math.max(seconds * 1e3, 0);
       applyCurrentTime();
       if (totalDurationMs > 0) updateProgressBar(sceneMs / totalDurationMs);
     },
@@ -2623,13 +734,12 @@ function createPlayer(opts) {
     isPlaying() {
       return isPlaying;
     },
-    chapters() {
-      return ast.chapters;
+    beats() {
+      return plan.beats;
     },
-    seekToChapter(name) {
-      const chapter = ast.chapters.find((c) => c.name === name);
-      if (!chapter) return;
-      player.seek(chapter.startTime);
+    seekToBeat(name) {
+      const beat = plan.beats.find((b) => b.name === name);
+      if (beat) player.seek(beat.start);
     },
     destroy() {
       player.pause();
@@ -2642,12 +752,9 @@ function createPlayer(opts) {
   };
   viewport.style.cursor = "pointer";
   viewport.addEventListener("click", () => {
-    if (isPlaying) {
-      player.pause();
-    } else {
-      if (!loop && sceneMs >= totalDurationMs) {
-        sceneMs = 0;
-      }
+    if (isPlaying) player.pause();
+    else {
+      if (!loop && sceneMs >= totalDurationMs) sceneMs = 0;
       player.play();
     }
   });