@markdy/renderer-dom 0.7.24 → 0.7.26

package/dist/index.js

@@ -21,10 +21,20 @@ var EASE_MAP = {
   linear: "linear",
   in: "ease-in",
   out: "ease-out",
-  inout: "ease-in-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) {
-  return EASE_MAP[String(val ?? "")] ?? "linear";
+  const str = String(val ?? "");
+  if (EASE_MAP[str]) return EASE_MAP[str];
+  if (CUBIC_BEZIER_RE.test(str)) return str;
+  return "linear";
 }
 
 // src/figure.ts
@@ -449,73 +459,69 @@ function createActorEl(name, def, assetDefs, assetOverrides) {
   return el;
 }
 
-// src/animations.ts
-function isSceneDark(scene) {
-  const bg = scene.style.background || "white";
-  let hex = bg.trim().replace(/^#/, "");
-  if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-  if (hex.length === 6) {
-    const r = parseInt(hex.slice(0, 2), 16);
-    const g = parseInt(hex.slice(2, 4), 16);
-    const b = parseInt(hex.slice(4, 6), 16);
-    return 0.299 * r + 0.587 * g + 0.114 * b <= 140;
-  }
-  const dark = { black: true, "#000": true, "#000000": true };
-  return dark[bg.toLowerCase()] ?? false;
+// src/camera.ts
+function freshCameraState() {
+  return { x: 0, y: 0, zoom: 1 };
 }
-function buildAnimations(ast, actorEls, scene, assetOverrides, faceSwaps) {
-  const anims = [];
-  const states = /* @__PURE__ */ new Map();
-  for (const [name, def] of Object.entries(ast.actors)) {
-    states.set(name, stateFrom(def));
-  }
-  const captionActors = /* @__PURE__ */ new Set();
-  for (const [name, def] of Object.entries(ast.actors)) {
-    if (def.type === "caption") captionActors.add(name);
-  }
-  const txFor = (actorName) => captionActors.has(actorName) ? txCaption : tx;
-  const events = [...ast.events].sort((a, b) => a.time - b.time);
-  preInitInlineStyles(ast, actorEls, states, events, txFor);
-  const cameraState = freshCameraState();
-  for (const ev of events) {
-    const delayMs = ev.time * 1e3;
-    const durMs = Math.max(
-      1,
-      (typeof ev.params.dur === "number" ? ev.params.dur : 0.5) * 1e3
-    );
-    const easing = toEasing(ev.params.ease);
-    const baseOpts = {
-      delay: delayMs,
-      duration: durMs,
-      fill: "forwards",
-      easing
-    };
-    if (ev.actor === "camera") {
-      buildCameraAction(ev, scene, ast, baseOpts, anims, cameraState);
-      continue;
+function cameraTx(s) {
+  return `translate(${-s.x}px, ${-s.y}px) scale(${s.zoom})`;
+}
+var DEFAULT_SHAKE_INTENSITY = 8;
+function buildCameraAction(ev, scene, ast, baseOpts, anims, state) {
+  switch (ev.action) {
+    case "pan": {
+      const to = ev.params.to;
+      if (!to) break;
+      const next = {
+        ...state,
+        x: to[0] - ast.meta.width / 2,
+        y: to[1] - ast.meta.height / 2
+      };
+      anims.push(
+        scene.animate([{ transform: cameraTx(state) }, { transform: cameraTx(next) }], baseOpts)
+      );
+      state.x = next.x;
+      state.y = next.y;
+      break;
     }
-    const el = actorEls.get(ev.actor);
-    const s = states.get(ev.actor);
-    if (!el || !s) continue;
-    buildAction(
-      ev,
-      el,
-      s,
-      baseOpts,
-      delayMs,
-      durMs,
-      ast,
-      states,
-      actorEls,
-      scene,
-      assetOverrides,
-      faceSwaps,
-      anims,
-      txFor(ev.actor)
-    );
+    case "zoom": {
+      const next = {
+        ...state,
+        zoom: typeof ev.params.to === "number" ? ev.params.to : state.zoom
+      };
+      anims.push(
+        scene.animate([{ transform: cameraTx(state) }, { transform: cameraTx(next) }], baseOpts)
+      );
+      state.zoom = next.zoom;
+      break;
+    }
+    case "shake": {
+      const mag = typeof ev.params.intensity === "number" ? ev.params.intensity : DEFAULT_SHAKE_INTENSITY;
+      const at = (dx, dy, offset) => ({
+        transform: cameraTx({ ...state, x: state.x + dx, y: state.y + dy }),
+        offset
+      });
+      anims.push(
+        scene.animate(
+          [
+            at(0, 0, 0),
+            at(-mag, -mag * 0.4, 0.15),
+            at(mag, mag * 0.4, 0.35),
+            at(-mag * 0.6, mag * 0.3, 0.55),
+            at(mag * 0.5, -mag * 0.3, 0.75),
+            at(0, 0, 1)
+          ],
+          { ...baseOpts, easing: "linear" }
+        )
+      );
+      break;
+    }
+    default:
+      break;
   }
-  return anims;
 }
+
+// src/stage.ts
 function offscreenState(s, direction, sceneWidth, sceneHeight) {
   const out = { ...s };
   switch (direction) {
@@ -545,114 +551,252 @@ function preInitInlineStyles(ast, actorEls, states, events, txFor) {
     const s = states.get(name);
     if (!el || !s) continue;
     const firstEv = firstEventByActor.get(name);
-    const txFn = txFor(name);
-    if (firstEv?.action === "enter") {
+    if (!firstEv) continue;
+    if (firstEv.action === "enter") {
       const from = String(firstEv.params.from ?? "left");
-      const offscreen = offscreenState(s, from, ast.meta.width, ast.meta.height);
-      el.style.transform = txFn(offscreen);
+      el.style.transform = txFor(name)(offscreenState(s, from, ast.meta.width, ast.meta.height));
     }
-    if (firstEv?.action === "fade_in" && (def.opacity === void 0 || def.opacity > 0)) {
+    if (firstEv.action === "fade_in" && (def.opacity === void 0 || def.opacity > 0)) {
       el.style.opacity = "0";
     }
   }
 }
-function freshCameraState() {
-  return { x: 0, y: 0, zoom: 1 };
+
+// src/actions/figure.ts
+function sideOf(ctx) {
+  return String(ctx.ev.params.side ?? "right") === "left" ? "left" : "right";
 }
-function cameraTx(s) {
-  return `translate(${-s.x}px, ${-s.y}px) scale(${s.zoom})`;
+function partEl(ctx, part) {
+  const selector = PART_SEL[part];
+  return selector ? ctx.el.querySelector(selector) : null;
 }
-function buildCameraAction(ev, scene, ast, baseOpts, anims, cameraState) {
-  const s = cameraState;
-  switch (ev.action) {
-    case "pan": {
-      const to = ev.params.to;
-      if (!to) break;
-      const sceneW = ast.meta.width;
-      const sceneH = ast.meta.height;
-      const targetX = to[0] - sceneW / 2;
-      const targetY = to[1] - sceneH / 2;
-      const next = { ...s, x: targetX, y: targetY };
-      anims.push(
-        scene.animate(
-          [{ transform: cameraTx(s) }, { transform: cameraTx(next) }],
-          baseOpts
-        )
-      );
-      s.x = next.x;
-      s.y = next.y;
-      break;
-    }
-    case "zoom": {
-      const to = typeof ev.params.to === "number" ? ev.params.to : s.zoom;
-      const next = { ...s, zoom: to };
-      anims.push(
-        scene.animate(
-          [{ transform: cameraTx(s) }, { transform: cameraTx(next) }],
-          baseOpts
-        )
-      );
-      s.zoom = next.zoom;
-      break;
-    }
-    case "shake": {
-      const mag = typeof ev.params.intensity === "number" ? ev.params.intensity : 8;
-      anims.push(
-        scene.animate(
-          [
-            { transform: cameraTx(s), offset: 0 },
-            { transform: cameraTx({ ...s, x: s.x - mag, y: s.y - mag * 0.4 }), offset: 0.15 },
-            { transform: cameraTx({ ...s, x: s.x + mag, y: s.y + mag * 0.4 }), offset: 0.35 },
-            { transform: cameraTx({ ...s, x: s.x - mag * 0.6, y: s.y + mag * 0.3 }), offset: 0.55 },
-            { transform: cameraTx({ ...s, x: s.x + mag * 0.5, y: s.y - mag * 0.3 }), offset: 0.75 },
-            { transform: cameraTx(s), offset: 1 }
-          ],
-          { ...baseOpts, easing: "linear" }
-        )
-      );
-      break;
+function rotateKeyframe(deg, offset) {
+  return offset === void 0 ? { transform: `rotate(${deg}deg)` } : { transform: `rotate(${deg}deg)`, offset };
+}
+function swingLimb(ctx, part, extendDeg, peakOffset) {
+  const el = partEl(ctx, part);
+  if (!el) return;
+  const rest = readRotation(el);
+  ctx.anims.push(
+    el.animate([rotateKeyframe(rest), rotateKeyframe(extendDeg, peakOffset), rotateKeyframe(rest)], {
+      ...ctx.baseOpts,
+      easing: "ease-in-out",
+      fill: "forwards"
+    })
+  );
+}
+var punch = (ctx) => {
+  const side = sideOf(ctx);
+  swingLimb(ctx, side === "left" ? "arm_left" : "arm_right", side === "left" ? -75 : 75, 0.35);
+};
+var kick = (ctx) => {
+  const side = sideOf(ctx);
+  swingLimb(ctx, side === "left" ? "leg_left" : "leg_right", side === "left" ? -100 : 100, 0.38);
+};
+var wave = (ctx) => {
+  const side = sideOf(ctx);
+  const el = partEl(ctx, side === "left" ? "arm_left" : "arm_right");
+  if (!el) return;
+  const rest = readRotation(el);
+  const up = side === "left" ? 70 : -70;
+  const inward = side === "left" ? 50 : -50;
+  ctx.anims.push(
+    el.animate(
+      [
+        rotateKeyframe(rest, 0),
+        rotateKeyframe(up, 0.2),
+        rotateKeyframe(inward, 0.4),
+        rotateKeyframe(up, 0.55),
+        rotateKeyframe(inward, 0.7),
+        rotateKeyframe(up, 0.85),
+        rotateKeyframe(rest, 1)
+      ],
+      { ...ctx.baseOpts, easing: "ease-in-out", fill: "forwards" }
+    )
+  );
+};
+var nod = (ctx) => {
+  const el = partEl(ctx, "head");
+  if (!el) return;
+  const rest = readRotation(el);
+  const down = 15;
+  ctx.anims.push(
+    el.animate(
+      [
+        rotateKeyframe(rest, 0),
+        rotateKeyframe(down, 0.35),
+        rotateKeyframe(rest, 0.65),
+        rotateKeyframe(down, 0.8),
+        rotateKeyframe(rest, 1)
+      ],
+      { ...ctx.baseOpts, easing: "ease-in-out", fill: "forwards" }
+    )
+  );
+};
+function commitRotation(el, deg) {
+  el.style.transform = el.style.transform.replace(/rotate\([^)]*\)/, `rotate(${deg}deg)`);
+}
+var rotatePart = (ctx) => {
+  const el = partEl(ctx, String(ctx.ev.params.part ?? ""));
+  if (!el) return;
+  const from = readRotation(el);
+  const to = typeof ctx.ev.params.to === "number" ? ctx.ev.params.to : from;
+  ctx.anims.push(
+    el.animate([rotateKeyframe(from), rotateKeyframe(to)], { ...ctx.baseOpts, fill: "forwards" })
+  );
+  commitRotation(el, to);
+};
+var POSEABLE_PARTS = ["arm_left", "arm_right", "leg_left", "leg_right", "head", "body"];
+var pose = (ctx) => {
+  for (const part of POSEABLE_PARTS) {
+    const to = ctx.ev.params[part];
+    if (typeof to !== "number") continue;
+    const el = partEl(ctx, part);
+    if (!el) continue;
+    ctx.anims.push(
+      el.animate([rotateKeyframe(readRotation(el)), rotateKeyframe(to)], {
+        ...ctx.baseOpts,
+        fill: "forwards"
+      })
+    );
+    commitRotation(el, to);
+  }
+};
+var face = (ctx) => {
+  const el = ctx.el.querySelector("[data-fig-face]");
+  if (!el) return;
+  const emoji = String(ctx.ev.params.text ?? ctx.ev.params._0 ?? "");
+  if (emoji) ctx.faceSwaps.push({ timeMs: ctx.ev.time * 1e3, el, emoji });
+};
+
+// src/actions/transform.ts
+var move = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
+  const to = ev.params.to;
+  const toX = to?.[0] ?? state.x;
+  const toY = to?.[1] ?? state.y;
+  anims.push(el.animate([{ transform: tx2(state) }, { transform: tx2({ ...state, x: toX, y: toY }) }], baseOpts));
+  state.x = toX;
+  state.y = toY;
+};
+var enter = ({ ev, el, state, baseOpts, ast, anims, tx: tx2 }) => {
+  const from = String(ev.params.from ?? "left");
+  const fromState = offscreenState(state, from, ast.meta.width, ast.meta.height);
+  anims.push(
+    el.animate(
+      [
+        { transform: tx2(fromState), opacity: state.opacity },
+        { transform: tx2(state), opacity: 1 }
+      ],
+      baseOpts
+    )
+  );
+  state.opacity = 1;
+};
+var exit = ({ ev, el, state, baseOpts, ast, anims, tx: tx2 }) => {
+  const to = String(ev.params.to ?? "right");
+  const toState = offscreenState(state, to, ast.meta.width, ast.meta.height);
+  anims.push(
+    el.animate(
+      [
+        { transform: tx2(state), opacity: state.opacity },
+        { transform: tx2(toState), opacity: 0 }
+      ],
+      baseOpts
+    )
+  );
+  state.x = toState.x;
+  state.y = toState.y;
+  state.opacity = 0;
+};
+var fadeIn = ({ el, state, baseOpts, anims }) => {
+  anims.push(el.animate([{ opacity: 0 }, { opacity: 1 }], baseOpts));
+  state.opacity = 1;
+};
+var fadeOut = ({ el, state, baseOpts, anims }) => {
+  anims.push(el.animate([{ opacity: state.opacity }, { opacity: 0 }], baseOpts));
+  state.opacity = 0;
+};
+var scale = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
+  const to = typeof ev.params.to === "number" ? ev.params.to : state.scale;
+  anims.push(el.animate([{ transform: tx2(state) }, { transform: tx2({ ...state, scale: to }) }], baseOpts));
+  state.scale = to;
+};
+var rotate = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
+  const to = typeof ev.params.to === "number" ? ev.params.to : state.rotate;
+  anims.push(el.animate([{ transform: tx2(state) }, { transform: tx2({ ...state, rotate: to }) }], baseOpts));
+  state.rotate = to;
+};
+var shake = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
+  const mag = typeof ev.params.intensity === "number" ? ev.params.intensity : 5;
+  anims.push(
+    el.animate(
+      [
+        { transform: tx2(state), offset: 0 },
+        { transform: tx2({ ...state, x: state.x + mag }), offset: 0.2 },
+        { transform: tx2({ ...state, x: state.x - mag }), offset: 0.4 },
+        { transform: tx2({ ...state, x: state.x + mag }), offset: 0.6 },
+        { transform: tx2({ ...state, x: state.x - mag }), offset: 0.8 },
+        { transform: tx2(state), offset: 1 }
+      ],
+      { ...baseOpts, easing: "linear" }
+    )
+  );
+};
+var jump = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
+  const height = typeof ev.params.height === "number" ? ev.params.height : 30;
+  anims.push(
+    el.animate(
+      [
+        { transform: tx2(state), offset: 0 },
+        { transform: tx2({ ...state, scale: state.scale * 0.9 }), offset: 0.1 },
+        { transform: tx2({ ...state, y: state.y - height, scale: state.scale * 1.1 }), offset: 0.45 },
+        { transform: tx2({ ...state, y: state.y - height * 0.3, scale: state.scale * 1.05 }), offset: 0.7 },
+        { transform: tx2({ ...state, scale: state.scale * 0.92 }), offset: 0.88 },
+        { transform: tx2(state), offset: 1 }
+      ],
+      { ...baseOpts, easing: "ease-in-out" }
+    )
+  );
+};
+var bounce = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
+  const intensity = typeof ev.params.intensity === "number" ? ev.params.intensity : 15;
+  const count = typeof ev.params.count === "number" ? ev.params.count : 3;
+  const keyframes = [{ transform: tx2(state), offset: 0 }];
+  for (let i = 0; i < count; i++) {
+    const amp = intensity * Math.pow(0.55, i);
+    const baseOffset = (i + 0.5) / (count + 0.5);
+    const peakOffset = Math.min(baseOffset, 0.98);
+    const valleyOffset = Math.min(baseOffset + 0.25 / (count + 0.5), 0.99);
+    keyframes.push({ transform: tx2({ ...state, y: state.y - amp }), offset: peakOffset });
+    if (i < count - 1) {
+      keyframes.push({ transform: tx2(state), offset: valleyOffset });
     }
-    default:
-      break;
   }
-}
-var FLOW_STROKE_BY_ACTION = {
-  request: "#38bdf8",
-  response: "#a78bfa",
-  emit: "#f59e0b"
+  keyframes.push({ transform: tx2(state), offset: 1 });
+  anims.push(el.animate(keyframes, { ...baseOpts, easing: "ease-out" }));
 };
+
+// src/geometry/rect.ts
+var ACTOR_SIZES = {
+  service: { width: 180, height: 84 },
+  client: { width: 180, height: 84 },
+  db: { width: 180, height: 84 },
+  queue: { width: 180, height: 84 },
+  box: { width: 100, height: 100 },
+  caption: { width: 260, height: 56 },
+  figure: { width: 120, height: 170 }
+};
+var DEFAULT_ACTOR_SIZE = { width: 140, height: 42 };
 function actorSizeByType(type) {
-  switch (type) {
-    case "service":
-    case "client":
-    case "db":
-    case "queue":
-      return { width: 180, height: 84 };
-    case "box":
-      return { width: 100, height: 100 };
-    case "caption":
-      return { width: 260, height: 56 };
-    case "figure":
-      return { width: 120, height: 170 };
-    default:
-      return { width: 140, height: 42 };
-  }
+  return ACTOR_SIZES[type] ?? DEFAULT_ACTOR_SIZE;
 }
 function actorCenter(state, actorType) {
   const { width, height } = actorSizeByType(actorType);
-  return {
-    x: state.x + width / 2,
-    y: state.y + height / 2
-  };
+  return { x: state.x + width / 2, y: state.y + height / 2 };
 }
 function actorRect(state, actorType) {
   const { width, height } = actorSizeByType(actorType);
-  return {
-    x1: state.x,
-    y1: state.y,
-    x2: state.x + width,
-    y2: state.y + height
-  };
+  return { x1: state.x, y1: state.y, x2: state.x + width, y2: state.y + height };
 }
 function inflateRect(rect, pad) {
   return {
@@ -690,12 +834,14 @@ function countPathIntersections(points, obstacles) {
   }
   return hits;
 }
-function toPathD(points) {
-  return points.map((p, i) => `${i === 0 ? "M" : "L"} ${round1(p.x)} ${round1(p.y)}`).join(" ");
-}
+
+// src/geometry/path.ts
 function round1(n) {
   return Math.round(n * 10) / 10;
 }
+function toPathD(points) {
+  return points.map((p, i) => `${i === 0 ? "M" : "L"} ${round1(p.x)} ${round1(p.y)}`).join(" ");
+}
 function polylineLength(points) {
   let total = 0;
   for (let i = 0; i < points.length - 1; i++) {
@@ -704,13 +850,13 @@ function polylineLength(points) {
   return Math.max(1, total);
 }
 function pointAtDistance(points, dist) {
-  let remain = dist;
+  let remain = Math.max(0, dist);
   for (let i = 0; i < points.length - 1; i++) {
     const a = points[i];
     const b = points[i + 1];
     const seg = Math.hypot(b.x - a.x, b.y - a.y);
     if (remain <= seg || i === points.length - 2) {
-      const t = seg <= 0 ? 0 : remain / seg;
+      const t = seg <= 0 ? 0 : Math.min(1, remain / seg);
       return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
     }
     remain -= seg;
@@ -718,11 +864,13 @@ function pointAtDistance(points, dist) {
   return points[0];
 }
 function routeFlowPath(sourceName, targetName, sourceState, targetState, states, ast, lane) {
-  const sourceRect = actorRect(sourceState, ast.actors[sourceName]?.type ?? "box");
-  const targetRect = actorRect(targetState, ast.actors[targetName]?.type ?? "box");
+  const sourceType = ast.actors[sourceName]?.type ?? "box";
+  const targetType = ast.actors[targetName]?.type ?? "box";
+  const sourceRect = actorRect(sourceState, sourceType);
+  const targetRect = actorRect(targetState, targetType);
   const laneShift = lane * 18;
-  const sourceCenter = actorCenter(sourceState, ast.actors[sourceName]?.type ?? "box");
-  const targetCenter = actorCenter(targetState, ast.actors[targetName]?.type ?? "box");
+  const sourceCenter = actorCenter(sourceState, sourceType);
+  const targetCenter = actorCenter(targetState, targetType);
   const horizontalPrimary = Math.abs(targetCenter.x - sourceCenter.x) >= Math.abs(targetCenter.y - sourceCenter.y);
   const source = horizontalPrimary ? { x: targetCenter.x >= sourceCenter.x ? sourceRect.x2 : sourceRect.x1, y: sourceCenter.y } : { x: sourceCenter.x, y: targetCenter.y >= sourceCenter.y ? sourceRect.y2 : sourceRect.y1 };
   const target = horizontalPrimary ? { x: targetCenter.x >= sourceCenter.x ? targetRect.x1 : targetRect.x2, y: targetCenter.y } : { x: targetCenter.x, y: targetCenter.y >= sourceCenter.y ? targetRect.y1 : targetRect.y2 };
@@ -762,11 +910,22 @@ function routeFlowPath(sourceName, targetName, sourceState, targetState, states,
   }
   return best;
 }
+
+// src/actions/flow.ts
+var EDGE_LAYER_ATTR = "data-markdy-edge-layer";
+var STROKE_BY_ACTION = {
+  request: "#38bdf8",
+  response: "#a78bfa",
+  emit: "#f59e0b"
+};
+var DEFAULT_STROKE = "#38bdf8";
+var LABEL_MAX_CHARS = 28;
+var EDGE_FADE_MS = 140;
 function ensureEdgeLayer(scene) {
-  const existing = scene.querySelector("svg[data-markdy-edge-layer='1']");
+  const existing = scene.querySelector(`svg[${EDGE_LAYER_ATTR}='1']`);
   if (existing) return existing;
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.setAttribute("data-markdy-edge-layer", "1");
+  svg.setAttribute(EDGE_LAYER_ATTR, "1");
   Object.assign(svg.style, {
     position: "absolute",
     inset: "0",
@@ -779,23 +938,19 @@ function ensureEdgeLayer(scene) {
   scene.appendChild(svg);
   return svg;
 }
-function renderFlowEdge(ev, sourceName, targetName, sourceState, targetState, states, ast, lane, scene, baseOpts, anims) {
-  const styleToken = String(ev.params.style ?? "");
-  const isDashed = styleToken === "dashed" || styleToken === "fire_and_forget" || ev.action === "response";
-  const stroke = FLOW_STROKE_BY_ACTION[ev.action] ?? "#38bdf8";
-  const points = routeFlowPath(
-    sourceName,
-    targetName,
-    sourceState,
-    targetState,
-    states,
-    ast,
-    lane
-  );
+function isDashed(ctx) {
+  const style = String(ctx.ev.params.style ?? "");
+  return style === "dashed" || style === "fire_and_forget" || ctx.ev.action === "response";
+}
+function buildEdge(ctx, targetName) {
+  const { ev, state, states, ast, scene, baseOpts, anims } = ctx;
+  const targetState = states.get(targetName);
+  if (!targetState) return;
+  const lane = ev.line % 5 - 2;
+  const points = routeFlowPath(ev.actor, targetName, state, targetState, states, ast, lane);
   const length = polylineLength(points);
-  const midPoint = pointAtDistance(points, length * 0.5);
   const pathD = toPathD(points);
-  const svg = ensureEdgeLayer(scene);
+  const stroke = STROKE_BY_ACTION[ev.action] ?? DEFAULT_STROKE;
   const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
   group.setAttribute("data-markdy-flow-edge", "1");
   const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
@@ -804,7 +959,7 @@ function renderFlowEdge(ev, sourceName, targetName, sourceState, targetState, st
   path.setAttribute("stroke", stroke);
   path.setAttribute("stroke-width", "2.5");
   path.setAttribute("data-markdy-flow-action", ev.action);
-  path.style.strokeDasharray = isDashed ? "8 6" : `${length}`;
+  path.style.strokeDasharray = isDashed(ctx) ? "8 6" : `${length}`;
   path.style.strokeDashoffset = `${length}`;
   group.appendChild(path);
   const marker = document.createElementNS("http://www.w3.org/2000/svg", "circle");
@@ -814,491 +969,285 @@ function renderFlowEdge(ev, sourceName, targetName, sourceState, targetState, st
   marker.style.offsetDistance = "0%";
   marker.style.opacity = "0";
   group.appendChild(marker);
-  const labelRaw = String(ev.params.label ?? "");
-  if (labelRaw) {
-    const label = labelRaw.length > 28 ? `${labelRaw.slice(0, 27)}\u2026` : labelRaw;
-    const labelEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
-    labelEl.setAttribute("x", `${round1(midPoint.x)}`);
-    labelEl.setAttribute("y", `${round1(midPoint.y - 8)}`);
-    labelEl.setAttribute("text-anchor", "middle");
-    labelEl.setAttribute("font-size", "12");
-    labelEl.setAttribute("fill", "#cbd5e1");
-    labelEl.textContent = label;
-    labelEl.setAttribute("data-full-label", labelRaw);
-    group.appendChild(labelEl);
+  const labelText = String(ev.params.label ?? "");
+  if (labelText) {
+    const midPoint = pointAtDistance(points, length * 0.5);
+    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("fill", "#cbd5e1");
+    label.setAttribute("data-full-label", labelText);
+    label.textContent = labelText.length > LABEL_MAX_CHARS ? `${labelText.slice(0, LABEL_MAX_CHARS - 1)}\u2026` : labelText;
+    group.appendChild(label);
   }
-  svg.appendChild(group);
-  anims.push(path.animate([{ strokeDashoffset: length }, { strokeDashoffset: 0 }], baseOpts));
+  ensureEdgeLayer(scene).appendChild(group);
   anims.push(
+    path.animate([{ strokeDashoffset: length }, { strokeDashoffset: 0 }], baseOpts),
     marker.animate(
-      [{ offsetDistance: "0%", opacity: 1 }, { offsetDistance: "100%", opacity: 1 }],
+      [
+        { offsetDistance: "0%", opacity: 1 },
+        { offsetDistance: "100%", opacity: 1 }
+      ],
       baseOpts
-    )
+    ),
+    group.animate([{ opacity: 1 }, { opacity: 0 }], {
+      delay: Number(baseOpts.delay ?? 0) + Number(baseOpts.duration ?? 0),
+      duration: EDGE_FADE_MS,
+      fill: "forwards"
+    })
   );
-  const fadeOutDelay = Number(baseOpts.delay ?? 0) + Number(baseOpts.duration ?? 0);
+}
+var flowEdge = (ctx) => {
+  const targetName = String(ctx.ev.params.to ?? "");
+  if (targetName) buildEdge(ctx, targetName);
+};
+
+// src/theme.ts
+var DARK_LUMINANCE_THRESHOLD = 140;
+var NAMED_DARK = {
+  black: true,
+  "#000": true,
+  "#000000": true
+};
+function isSceneDark(scene) {
+  const bg = scene.style.background || "white";
+  let hex = bg.trim().replace(/^#/, "");
+  if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  if (hex.length === 6) {
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    return 0.299 * r + 0.587 * g + 0.114 * b <= DARK_LUMINANCE_THRESHOLD;
+  }
+  return NAMED_DARK[bg.toLowerCase()] ?? false;
+}
+function speechBubbleTheme(dark) {
+  return dark ? {
+    background: "#1e2530",
+    border: "#475569",
+    text: "#e2e8f0",
+    shadow: "0 2px 8px rgba(0,0,0,0.35)"
+  } : {
+    background: "white",
+    border: "#222",
+    text: "#222",
+    shadow: "0 2px 8px rgba(0,0,0,0.12)"
+  };
+}
+
+// src/actions/speech.ts
+var MAX_FADE_MS = 200;
+var FADE_FRACTION = 0.15;
+var say = ({ ev, el, state, delayMs, durMs, scene, anims }) => {
+  const text = String(ev.params.text ?? "");
+  const theme = speechBubbleTheme(isSceneDark(scene));
+  const inverseScale = 1 / (state.scale || 1);
+  const bubble = document.createElement("div");
+  bubble.textContent = text;
+  Object.assign(bubble.style, {
+    position: "absolute",
+    bottom: "calc(100% + 10px)",
+    left: "50%",
+    transform: `translateX(-50%) scale(${inverseScale})`,
+    transformOrigin: "center bottom",
+    background: theme.background,
+    border: `2px solid ${theme.border}`,
+    color: theme.text,
+    borderRadius: "12px",
+    padding: "6px 14px",
+    fontFamily: "system-ui, sans-serif",
+    fontSize: "15px",
+    lineHeight: "1.3",
+    whiteSpace: "nowrap",
+    maxWidth: "220px",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    pointerEvents: "none",
+    zIndex: "10",
+    boxShadow: theme.shadow,
+    opacity: "0"
+  });
+  const tail = document.createElement("span");
+  Object.assign(tail.style, {
+    position: "absolute",
+    bottom: "-10px",
+    left: "50%",
+    transform: "translateX(-50%)",
+    width: "0",
+    height: "0",
+    borderLeft: "7px solid transparent",
+    borderRight: "7px solid transparent",
+    borderTop: `10px solid ${theme.border}`
+  });
+  bubble.appendChild(tail);
+  el.style.overflow = "visible";
+  el.appendChild(bubble);
+  const fadeMs = Math.min(MAX_FADE_MS, durMs * FADE_FRACTION);
   anims.push(
-    group.animate([{ opacity: 1 }, { opacity: 0 }], {
-      delay: fadeOutDelay,
-      duration: 140,
+    bubble.animate([{ opacity: 0 }, { opacity: 1 }], {
+      delay: delayMs,
+      duration: fadeMs,
+      fill: "forwards"
+    }),
+    bubble.animate([{ opacity: 1 }, { opacity: 0 }], {
+      delay: delayMs + durMs - fadeMs,
+      duration: fadeMs,
       fill: "forwards"
     })
   );
+};
+
+// src/actions/projectile.ts
+var PROJECTILE_SIZE_PX = 32;
+function createProjectile(assetName, assetDef, assetOverrides) {
+  if (assetDef.type === "image") {
+    const img = document.createElement("img");
+    img.src = assetOverrides[assetName] ?? assetDef.value;
+    img.alt = assetName;
+    img.setAttribute("draggable", "false");
+    img.style.width = `${PROJECTILE_SIZE_PX}px`;
+    img.style.height = `${PROJECTILE_SIZE_PX}px`;
+    return img;
+  }
+  const span = document.createElement("span");
+  span.className = "iconify";
+  span.dataset.icon = assetDef.value;
+  span.style.fontSize = `${PROJECTILE_SIZE_PX}px`;
+  span.style.lineHeight = "1";
+  span.style.display = "inline-block";
+  return span;
 }
-function buildAction(ev, el, s, baseOpts, delayMs, durMs, ast, states, _actorEls, scene, assetOverrides, faceSwaps, anims, txFn) {
-  switch (ev.action) {
-    case "request":
-    case "response":
-    case "emit": {
-      const targetActorName = String(ev.params.to ?? "");
-      if (!targetActorName) break;
-      const targetState = states.get(targetActorName);
-      if (!targetState) break;
-      const lane = ev.line % 5 - 2;
-      renderFlowEdge(
-        ev,
-        ev.actor,
-        targetActorName,
-        s,
-        targetState,
-        states,
-        ast,
-        lane,
-        scene,
-        baseOpts,
-        anims
-      );
-      break;
-    }
-    // ── move ────────────────────────────────────────────────────────────────
-    case "move": {
-      const toArr = ev.params.to;
-      const toX = toArr?.[0] ?? s.x;
-      const toY = toArr?.[1] ?? s.y;
-      anims.push(
-        el.animate(
-          [{ transform: txFn(s) }, { transform: txFn({ ...s, x: toX, y: toY }) }],
-          baseOpts
-        )
-      );
-      s.x = toX;
-      s.y = toY;
-      break;
-    }
-    // ── enter ───────────────────────────────────────────────────────────────
-    // Slides the actor from the given screen edge into its current (s)
-    // position while also restoring opacity to 1. The opacity restore makes
-    // `enter` symmetric with `exit` so actors can re-enter after exiting
-    // without needing a separate fade_in.
-    case "enter": {
-      const from = String(ev.params.from ?? "left");
-      const fromState = offscreenState(s, from, ast.meta.width, ast.meta.height);
-      anims.push(
-        el.animate(
-          [
-            { transform: txFn(fromState), opacity: s.opacity },
-            { transform: txFn(s), opacity: 1 }
-          ],
-          baseOpts
-        )
-      );
-      s.opacity = 1;
-      break;
-    }
-    // ── exit ────────────────────────────────────────────────────────────────
-    // Mirror of enter: slides off-screen in the given direction while also
-    // fading opacity to 0. Universal — works on any actor type (caption, text,
-    // figure, box, sprite). Leaves `s` at the off-screen state since the
-    // actor is conceptually gone after this.
-    case "exit": {
-      const to = String(ev.params.to ?? "right");
-      const toState = offscreenState(s, to, ast.meta.width, ast.meta.height);
-      anims.push(
-        el.animate(
-          [
-            { transform: txFn(s), opacity: s.opacity },
-            { transform: txFn(toState), opacity: 0 }
-          ],
-          baseOpts
-        )
-      );
-      s.x = toState.x;
-      s.y = toState.y;
-      s.opacity = 0;
-      break;
-    }
-    // ── fade_in ─────────────────────────────────────────────────────────────
-    case "fade_in": {
-      anims.push(el.animate([{ opacity: 0 }, { opacity: 1 }], baseOpts));
-      s.opacity = 1;
-      break;
-    }
-    // ── fade_out ────────────────────────────────────────────────────────────
-    case "fade_out": {
-      anims.push(
-        el.animate([{ opacity: s.opacity }, { opacity: 0 }], baseOpts)
-      );
-      s.opacity = 0;
-      break;
-    }
-    // ── scale ───────────────────────────────────────────────────────────────
-    case "scale": {
-      const toScale = typeof ev.params.to === "number" ? ev.params.to : s.scale;
-      anims.push(
-        el.animate(
-          [{ transform: txFn(s) }, { transform: txFn({ ...s, scale: toScale }) }],
-          baseOpts
-        )
-      );
-      s.scale = toScale;
-      break;
-    }
-    // ── rotate ──────────────────────────────────────────────────────────────
-    case "rotate": {
-      const toDeg = typeof ev.params.to === "number" ? ev.params.to : s.rotate;
-      anims.push(
-        el.animate(
-          [{ transform: txFn(s) }, { transform: txFn({ ...s, rotate: toDeg }) }],
-          baseOpts
-        )
-      );
-      s.rotate = toDeg;
-      break;
-    }
-    // ── shake ───────────────────────────────────────────────────────────────
-    case "shake": {
-      const mag = typeof ev.params.intensity === "number" ? ev.params.intensity : 5;
-      anims.push(
-        el.animate(
-          [
-            { transform: txFn(s), offset: 0 },
-            { transform: txFn({ ...s, x: s.x + mag }), offset: 0.2 },
-            { transform: txFn({ ...s, x: s.x - mag }), offset: 0.4 },
-            { transform: txFn({ ...s, x: s.x + mag }), offset: 0.6 },
-            { transform: txFn({ ...s, x: s.x - mag }), offset: 0.8 },
-            { transform: txFn(s), offset: 1 }
-          ],
-          { ...baseOpts, easing: "linear" }
-        )
-      );
-      break;
-    }
-    // ── punch ───────────────────────────────────────────────────────────────
-    case "punch": {
-      const pSide = String(ev.params.side ?? "right");
-      const pArmEl = el.querySelector(
-        pSide === "left" ? "[data-fig-arm-l]" : "[data-fig-arm-r]"
-      );
-      if (!pArmEl) break;
-      const pRest = readRotation(pArmEl);
-      const pExtend = pSide === "left" ? -75 : 75;
-      anims.push(
-        pArmEl.animate(
-          [
-            { transform: `rotate(${pRest}deg)` },
-            { transform: `rotate(${pExtend}deg)`, offset: 0.35 },
-            { transform: `rotate(${pRest}deg)` }
-          ],
-          { ...baseOpts, easing: "ease-in-out", fill: "forwards" }
-        )
-      );
-      break;
-    }
-    // ── kick ────────────────────────────────────────────────────────────────
-    case "kick": {
-      const kSide = String(ev.params.side ?? "right");
-      const kLegEl = el.querySelector(
-        kSide === "left" ? "[data-fig-leg-l]" : "[data-fig-leg-r]"
-      );
-      if (!kLegEl) break;
-      const kRest = readRotation(kLegEl);
-      const kExtend = kSide === "left" ? -100 : 100;
-      anims.push(
-        kLegEl.animate(
-          [
-            { transform: `rotate(${kRest}deg)` },
-            { transform: `rotate(${kExtend}deg)`, offset: 0.38 },
-            { transform: `rotate(${kRest}deg)` }
-          ],
-          { ...baseOpts, easing: "ease-in-out", fill: "forwards" }
-        )
-      );
-      break;
-    }
-    // ── rotate_part ─────────────────────────────────────────────────────────
-    case "rotate_part": {
-      const rpName = String(ev.params.part ?? "");
-      const rpSel = PART_SEL[rpName];
-      if (!rpSel) break;
-      const rpEl = el.querySelector(rpSel);
-      if (!rpEl) break;
-      const rpFrom = readRotation(rpEl);
-      const rpTo = typeof ev.params.to === "number" ? ev.params.to : rpFrom;
-      anims.push(
-        rpEl.animate(
-          [
-            { transform: `rotate(${rpFrom}deg)` },
-            { transform: `rotate(${rpTo}deg)` }
-          ],
-          { ...baseOpts, fill: "forwards" }
-        )
-      );
-      rpEl.style.transform = rpEl.style.transform.replace(
-        /rotate\([^)]*\)/,
-        `rotate(${rpTo}deg)`
-      );
-      break;
-    }
-    // ── face ────────────────────────────────────────────────────────────────
-    case "face": {
-      const fEl = el.querySelector("[data-fig-face]");
-      if (!fEl) break;
-      const emoji = String(ev.params.text ?? ev.params._0 ?? "");
-      if (emoji) faceSwaps.push({ timeMs: ev.time * 1e3, el: fEl, emoji });
-      break;
-    }
-    // ── say ─────────────────────────────────────────────────────────────────
-    case "say": {
-      const text = String(ev.params.text ?? "");
-      const inverseScale = 1 / (s.scale || 1);
-      const sceneDark = isSceneDark(scene);
-      const bubbleBg = sceneDark ? "#1e2530" : "white";
-      const bubbleBorder = sceneDark ? "#475569" : "#222";
-      const bubbleText = sceneDark ? "#e2e8f0" : "#222";
-      const bubbleShadow = sceneDark ? "0 2px 8px rgba(0,0,0,0.35)" : "0 2px 8px rgba(0,0,0,0.12)";
-      const bubble = document.createElement("div");
-      bubble.textContent = text;
-      bubble.style.opacity = "0";
-      Object.assign(bubble.style, {
-        position: "absolute",
-        bottom: "calc(100% + 10px)",
-        left: "50%",
-        transform: `translateX(-50%) scale(${inverseScale})`,
-        transformOrigin: "center bottom",
-        background: bubbleBg,
-        border: `2px solid ${bubbleBorder}`,
-        color: bubbleText,
-        borderRadius: "12px",
-        padding: "6px 14px",
-        fontFamily: "system-ui, sans-serif",
-        fontSize: "15px",
-        lineHeight: "1.3",
-        whiteSpace: "nowrap",
-        maxWidth: "220px",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        pointerEvents: "none",
-        zIndex: "10",
-        boxShadow: bubbleShadow
-      });
-      const tail = document.createElement("span");
-      Object.assign(tail.style, {
-        position: "absolute",
-        bottom: "-10px",
-        left: "50%",
-        transform: "translateX(-50%)",
-        width: "0",
-        height: "0",
-        borderLeft: "7px solid transparent",
-        borderRight: "7px solid transparent",
-        borderTop: `10px solid ${bubbleBorder}`
-      });
-      bubble.appendChild(tail);
-      el.style.overflow = "visible";
-      el.appendChild(bubble);
-      const fadeDur = Math.min(200, durMs * 0.15);
-      anims.push(
-        bubble.animate([{ opacity: 0 }, { opacity: 1 }], {
-          delay: delayMs,
-          duration: fadeDur,
-          fill: "forwards"
-        }),
-        bubble.animate([{ opacity: 1 }, { opacity: 0 }], {
-          delay: delayMs + durMs - fadeDur,
-          duration: fadeDur,
-          fill: "forwards"
-        })
-      );
-      break;
-    }
-    // ── pose ────────────────────────────────────────────────────────────────
-    // Sets multiple body parts to target angles simultaneously.
-    // Usage: @1.0: hero.pose(arm_left=45, arm_right=-45, leg_left=10, dur=0.4)
-    case "pose": {
-      const poseParts = ["arm_left", "arm_right", "leg_left", "leg_right", "head", "body"];
-      for (const partName of poseParts) {
-        if (typeof ev.params[partName] !== "number") continue;
-        const pSel = PART_SEL[partName];
-        if (!pSel) continue;
-        const pEl = el.querySelector(pSel);
-        if (!pEl) continue;
-        const fromDeg = readRotation(pEl);
-        const toDeg = ev.params[partName];
-        anims.push(
-          pEl.animate(
-            [
-              { transform: `rotate(${fromDeg}deg)` },
-              { transform: `rotate(${toDeg}deg)` }
-            ],
-            { ...baseOpts, fill: "forwards" }
-          )
-        );
-        pEl.style.transform = pEl.style.transform.replace(
-          /rotate\([^)]*\)/,
-          `rotate(${toDeg}deg)`
-        );
-      }
-      break;
-    }
-    // ── wave ────────────────────────────────────────────────────────────────
-    // Built-in wave gesture: raises arm, oscillates, returns.
-    // Usage: @2.0: hero.wave(side=right, dur=0.8)
-    case "wave": {
-      const wSide = String(ev.params.side ?? "right");
-      const wArmEl = el.querySelector(
-        wSide === "left" ? "[data-fig-arm-l]" : "[data-fig-arm-r]"
-      );
-      if (!wArmEl) break;
-      const wRest = readRotation(wArmEl);
-      const wUp = wSide === "left" ? 70 : -70;
-      const wMid1 = wSide === "left" ? 50 : -50;
-      const wMid2 = wSide === "left" ? 70 : -70;
-      anims.push(
-        wArmEl.animate(
-          [
-            { transform: `rotate(${wRest}deg)`, offset: 0 },
-            { transform: `rotate(${wUp}deg)`, offset: 0.2 },
-            { transform: `rotate(${wMid1}deg)`, offset: 0.4 },
-            { transform: `rotate(${wMid2}deg)`, offset: 0.55 },
-            { transform: `rotate(${wMid1}deg)`, offset: 0.7 },
-            { transform: `rotate(${wMid2}deg)`, offset: 0.85 },
-            { transform: `rotate(${wRest}deg)`, offset: 1 }
-          ],
-          { ...baseOpts, easing: "ease-in-out", fill: "forwards" }
-        )
-      );
-      break;
-    }
-    // ── jump ────────────────────────────────────────────────────────────────
-    // Jumps the actor up with squash/stretch effect.
-    // Usage: @3.0: hero.jump(height=30, dur=0.5)
-    case "jump": {
-      const jHeight = typeof ev.params.height === "number" ? ev.params.height : 30;
-      anims.push(
-        el.animate(
-          [
-            { transform: txFn(s), offset: 0 },
-            { transform: txFn({ ...s, scale: s.scale * 0.9 }), offset: 0.1 },
-            { transform: txFn({ ...s, y: s.y - jHeight, scale: s.scale * 1.1 }), offset: 0.45 },
-            { transform: txFn({ ...s, y: s.y - jHeight * 0.3, scale: s.scale * 1.05 }), offset: 0.7 },
-            { transform: txFn({ ...s, scale: s.scale * 0.92 }), offset: 0.88 },
-            { transform: txFn(s), offset: 1 }
-          ],
-          { ...baseOpts, easing: "ease-in-out" }
-        )
-      );
-      break;
-    }
-    // ── nod ─────────────────────────────────────────────────────────────────
-    // Nods the head down and back up. Figure actors only.
-    // Usage: @2.0: hero.nod(dur=0.4)
-    case "nod": {
-      const nHeadEl = el.querySelector("[data-fig-head]");
-      if (!nHeadEl) break;
-      const nRest = readRotation(nHeadEl);
-      const nDown = 15;
-      anims.push(
-        nHeadEl.animate(
-          [
-            { transform: `rotate(${nRest}deg)`, offset: 0 },
-            { transform: `rotate(${nDown}deg)`, offset: 0.35 },
-            { transform: `rotate(${nRest}deg)`, offset: 0.65 },
-            { transform: `rotate(${nDown}deg)`, offset: 0.8 },
-            { transform: `rotate(${nRest}deg)`, offset: 1 }
-          ],
-          { ...baseOpts, easing: "ease-in-out", fill: "forwards" }
-        )
-      );
-      break;
-    }
-    // ── bounce ──────────────────────────────────────────────────────────────
-    // Bounces the actor vertically with diminishing amplitude.
-    // Usage: @1.0: hero.bounce(intensity=15, count=3, dur=0.6)
-    case "bounce": {
-      const bIntensity = typeof ev.params.intensity === "number" ? ev.params.intensity : 15;
-      const bCount = typeof ev.params.count === "number" ? ev.params.count : 3;
-      const keyframes = [{ transform: txFn(s), offset: 0 }];
-      for (let bi = 0; bi < bCount; bi++) {
-        const amp = bIntensity * Math.pow(0.55, bi);
-        const baseOffset = (bi + 0.5) / (bCount + 0.5);
-        const peakOffset = Math.min(baseOffset, 0.98);
-        const valleyOffset = Math.min(baseOffset + 0.25 / (bCount + 0.5), 0.99);
-        keyframes.push({
-          transform: txFn({ ...s, y: s.y - amp }),
-          offset: peakOffset
-        });
-        if (bi < bCount - 1) {
-          keyframes.push({
-            transform: txFn(s),
-            offset: valleyOffset
-          });
-        }
-      }
-      keyframes.push({ transform: txFn(s), offset: 1 });
-      anims.push(
-        el.animate(keyframes, { ...baseOpts, easing: "ease-out" })
-      );
-      break;
-    }
-    // ── throw ───────────────────────────────────────────────────────────────
-    case "throw": {
-      const assetName = String(ev.params.asset ?? "");
-      const targetActorName = String(ev.params.to ?? "");
-      const targetState = states.get(targetActorName);
-      const assetDef = ast.assets[assetName];
-      if (!assetDef || !targetState) break;
-      let projectile;
-      if (assetDef.type === "image") {
-        const img = document.createElement("img");
-        img.src = assetOverrides[assetName] ?? assetDef.value;
-        img.alt = assetName;
-        img.setAttribute("draggable", "false");
-        img.style.width = "32px";
-        img.style.height = "32px";
-        projectile = img;
-      } else {
-        const span = document.createElement("span");
-        span.className = "iconify";
-        span.dataset.icon = assetDef.value;
-        span.style.fontSize = "32px";
-        span.style.lineHeight = "1";
-        span.style.display = "inline-block";
-        projectile = span;
-      }
-      Object.assign(projectile.style, {
-        position: "absolute",
-        left: "0",
-        top: "0",
-        pointerEvents: "none",
-        zIndex: "9",
-        opacity: "0"
-      });
-      scene.appendChild(projectile);
-      const throwAnim = projectile.animate(
-        [
-          { transform: tx(s), opacity: 1 },
-          { transform: tx(targetState), opacity: 0 }
-        ],
-        { ...baseOpts, easing: "ease-in" }
-      );
-      throwAnim.addEventListener("finish", () => {
-        if (projectile.parentNode === scene) scene.removeChild(projectile);
-      });
-      anims.push(throwAnim);
-      break;
+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,
+  scale,
+  rotate,
+  shake,
+  jump,
+  bounce,
+  say,
+  throw: throwAsset,
+  // Figure-only — the parser rejects these on other actor types
+  punch,
+  kick,
+  wave,
+  nod,
+  rotate_part: rotatePart,
+  pose,
+  face,
+  // System-diagram flow edges (@markdy/stdlib-systems)
+  request: flowEdge,
+  response: flowEdge,
+  emit: flowEdge
+});
+function handlerFor(action) {
+  return ACTION_HANDLERS[action];
+}
+
+// src/animations.ts
+var DEFAULT_DURATION_S = 0.5;
+var DEFAULT_EASE_BY_ACTION = {
+  enter: "out",
+  fade_in: "out",
+  exit: "in",
+  fade_out: "in"
+};
+function buildAnimations(ast, actorEls, scene, assetOverrides, faceSwaps) {
+  const anims = [];
+  const states = /* @__PURE__ */ new Map();
+  for (const [name, def] of Object.entries(ast.actors)) {
+    states.set(name, stateFrom(def));
+  }
+  const captionActors = new Set(
+    Object.entries(ast.actors).filter(([, def]) => def.type === "caption").map(([name]) => name)
+  );
+  const txFor = (actorName) => captionActors.has(actorName) ? txCaption : tx;
+  const events = [...ast.events].sort((a, b) => a.time - b.time);
+  preInitInlineStyles(ast, actorEls, states, events, txFor);
+  const cameraState = freshCameraState();
+  for (const ev of events) {
+    const delayMs = ev.time * 1e3;
+    const durMs = Math.max(
+      1,
+      (typeof ev.params.dur === "number" ? ev.params.dur : DEFAULT_DURATION_S) * 1e3
+    );
+    const baseOpts = {
+      delay: delayMs,
+      duration: durMs,
+      fill: "forwards",
+      easing: toEasing(ev.params.ease ?? DEFAULT_EASE_BY_ACTION[ev.action])
+    };
+    if (ev.actor === "camera") {
+      buildCameraAction(ev, scene, ast, baseOpts, anims, cameraState);
+      continue;
     }
-    default:
-      break;
+    const el = actorEls.get(ev.actor);
+    const state = states.get(ev.actor);
+    const handler = handlerFor(ev.action);
+    if (!el || !state || !handler) continue;
+    const ctx = {
+      ev,
+      el,
+      state,
+      baseOpts,
+      delayMs,
+      durMs,
+      ast,
+      states,
+      actorEls,
+      scene,
+      assetOverrides,
+      faceSwaps,
+      anims,
+      tx: txFor(ev.actor)
+    };
+    handler(ctx);
   }
+  return anims;
 }
 
 // src/player.ts
@@ -1328,10 +1277,13 @@ function createPlayer(opts) {
     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} (${w.kind})`),
+    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 viewport = document.createElement("div");
   Object.assign(viewport.style, {
@@ -1456,6 +1408,7 @@ function createPlayer(opts) {
       anim.currentTime = sceneMs;
     }
     applyFaceSwaps();
+    onTimeUpdate?.(sceneMs / 1e3, durationSeconds);
   }
   function applyFaceSwaps() {
     if (faceSwaps.length === 0) return;
@@ -1489,6 +1442,7 @@ function createPlayer(opts) {
         sceneMs = totalDurationMs;
         applyCurrentTime();
         isPlaying = false;
+        onPlayStateChange?.(false);
         lastRafTs = null;
         rafId = null;
         return;
@@ -1502,12 +1456,14 @@ function createPlayer(opts) {
     play() {
       if (isPlaying) return;
       isPlaying = true;
+      onPlayStateChange?.(true);
       lastRafTs = null;
       rafId = requestAnimationFrame(rafTick);
     },
     pause() {
       if (!isPlaying) return;
       isPlaying = false;
+      onPlayStateChange?.(false);
       if (rafId !== null) {
         cancelAnimationFrame(rafId);
         rafId = null;
@@ -1515,10 +1471,28 @@ function createPlayer(opts) {
       lastRafTs = null;
     },
     seek(seconds) {
-      sceneMs = seconds * 1e3;
+      const nextMs = seconds * 1e3;
+      sceneMs = totalDurationMs > 0 ? Math.min(Math.max(nextMs, 0), totalDurationMs) : Math.max(nextMs, 0);
       applyCurrentTime();
       if (totalDurationMs > 0) updateProgressBar(sceneMs / totalDurationMs);
     },
+    currentTime() {
+      return sceneMs / 1e3;
+    },
+    duration() {
+      return durationSeconds;
+    },
+    isPlaying() {
+      return isPlaying;
+    },
+    chapters() {
+      return ast.chapters;
+    },
+    seekToChapter(name) {
+      const chapter = ast.chapters.find((c) => c.name === name);
+      if (!chapter) return;
+      player.seek(chapter.startTime);
+    },
     destroy() {
       player.pause();
       for (const anim of allAnims) anim.cancel();