@pixerate/editor 0.280.0 → 0.281.0

package/dist/canvas/index.js

@@ -2058,8 +2058,8 @@ function snapResize(rect2, handle, targets, options = {}) {
   const ratio = rect2.height > 0 ? rect2.width / rect2.height : 0;
   if (options.keepAspectRatio && ratio > 0 && (hitX || hitY)) {
     if (axes.x !== 0 && axes.y !== 0) {
-      const dist = (h, horizontal) => h ? Math.abs(h.value - (horizontal ? axes.x < 0 ? x0 : x1 : axes.y < 0 ? y0 : y1)) : Infinity;
-      const useX = dist(hitX, true) <= dist(hitY, false);
+      const dist2 = (h, horizontal) => h ? Math.abs(h.value - (horizontal ? axes.x < 0 ? x0 : x1 : axes.y < 0 ? y0 : y1)) : Infinity;
+      const useX = dist2(hitX, true) <= dist2(hitY, false);
       if (useX && hitX) {
         setEdge(true, hitX.value);
         const height = (nx1 - nx0) / ratio;
@@ -5219,7 +5219,7 @@ var defaultLabel = (node) => typeof node.data?.label === "string" && node.data.l
 function getTimelineRows(nodes, ids, options = {}) {
   const byId = new Map(nodes.map((n3) => [n3.id, n3]));
   const selection = options.selection ?? [];
-  const labelOf3 = options.labelOf ?? defaultLabel;
+  const labelOf4 = options.labelOf ?? defaultLabel;
   const rows = [];
   for (const id of new Set(ids)) {
     const node = byId.get(id);
@@ -5230,7 +5230,7 @@ function getTimelineRows(nodes, ids, options = {}) {
       rows.push({
         id: `${id}:${property}`,
         nodeId: id,
-        nodeLabel: labelOf3(node),
+        nodeLabel: labelOf4(node),
         property,
         label,
         enabled: track.enabled !== false,
@@ -8058,8 +8058,8 @@ function findStrokesAtPoint(point, nodes, radius = 12) {
     }
     const localPoint = [point[0] - rect2.x, point[1] - rect2.y];
     try {
-      const dist = distanceToBezierPath(shape.d, localPoint);
-      if (dist <= effectiveRadius) {
+      const dist2 = distanceToBezierPath(shape.d, localPoint);
+      if (dist2 <= effectiveRadius) {
         matches2.push(node);
       }
     } catch {
@@ -11314,8 +11314,8 @@ function calculateCursorArrowRotation(cursor, targetCenter, isAgentOrServiceAcco
   }
   const dx = targetCenter.x - cursor.x;
   const dy = targetCenter.y - cursor.y;
-  const dist = Math.hypot(dx, dy);
-  if (dist < 2) {
+  const dist2 = Math.hypot(dx, dy);
+  if (dist2 < 2) {
     return { shouldPoint: true, rotationDeg: currentRotation };
   }
   const angleDeg = Math.atan2(dy, dx) * (180 / Math.PI);
@@ -12966,6 +12966,665 @@ function createCanvasStickerHost(options) {
     }
   };
 }
+
+// src/canvas/edgePaths.ts
+var DIRECTIONS = {
+  left: { x: -1, y: 0 },
+  right: { x: 1, y: 0 },
+  top: { x: 0, y: -1 },
+  bottom: { x: 0, y: 1 }
+};
+function controlOffset(distance, curvature) {
+  return distance >= 0 ? 0.5 * distance : curvature * 25 * Math.sqrt(-distance);
+}
+function curvatureControl(pos, x1, y1, x2, y2, c) {
+  switch (pos) {
+    case "left":
+      return [x1 - controlOffset(x1 - x2, c), y1];
+    case "right":
+      return [x1 + controlOffset(x2 - x1, c), y1];
+    case "top":
+      return [x1, y1 - controlOffset(y1 - y2, c)];
+    default:
+      return [x1, y1 + controlOffset(y2 - y1, c)];
+  }
+}
+function simpleControl(pos, x1, y1, x2, y2) {
+  return pos === "left" || pos === "right" ? [0.5 * (x1 + x2), y1] : [x1, 0.5 * (y1 + y2)];
+}
+function cubicPath(p, s, t) {
+  const { sourceX: sx, sourceY: sy, targetX: tx, targetY: ty } = p;
+  return {
+    path: `M${sx},${sy} C${s[0]},${s[1]} ${t[0]},${t[1]} ${tx},${ty}`,
+    labelX: sx * 0.125 + s[0] * 0.375 + t[0] * 0.375 + tx * 0.125,
+    labelY: sy * 0.125 + s[1] * 0.375 + t[1] * 0.375 + ty * 0.125
+  };
+}
+function edgeCenter(sx, sy, tx, ty) {
+  const xOffset = Math.abs(tx - sx) / 2;
+  const yOffset = Math.abs(ty - sy) / 2;
+  return [tx < sx ? tx + xOffset : tx - xOffset, ty < sy ? ty + yOffset : ty - yOffset];
+}
+var dist = (a, b) => Math.hypot(b.x - a.x, b.y - a.y);
+function stepPoints(source, sourcePosition, target, targetPosition, offset) {
+  const sourceDir = DIRECTIONS[sourcePosition];
+  const targetDir = DIRECTIONS[targetPosition];
+  const sourceGapped = { x: source.x + sourceDir.x * offset, y: source.y + sourceDir.y * offset };
+  const targetGapped = { x: target.x + targetDir.x * offset, y: target.y + targetDir.y * offset };
+  const dir = sourcePosition === "left" || sourcePosition === "right" ? { x: sourceGapped.x < targetGapped.x ? 1 : -1, y: 0 } : { x: 0, y: sourceGapped.y < targetGapped.y ? 1 : -1 };
+  const axis = dir.x !== 0 ? "x" : "y";
+  const currDir = dir[axis];
+  let points;
+  let centerX;
+  let centerY;
+  const sourceGapOffset = { x: 0, y: 0 };
+  const targetGapOffset = { x: 0, y: 0 };
+  if (sourceDir[axis] * targetDir[axis] === -1) {
+    centerX = (sourceGapped.x + targetGapped.x) / 2;
+    centerY = (sourceGapped.y + targetGapped.y) / 2;
+    const verticalSplit = [{ x: centerX, y: sourceGapped.y }, { x: centerX, y: targetGapped.y }];
+    const horizontalSplit = [{ x: sourceGapped.x, y: centerY }, { x: targetGapped.x, y: centerY }];
+    points = sourceDir[axis] === currDir ? axis === "x" ? verticalSplit : horizontalSplit : axis === "x" ? horizontalSplit : verticalSplit;
+  } else {
+    const sourceTarget = [{ x: sourceGapped.x, y: targetGapped.y }];
+    const targetSource = [{ x: targetGapped.x, y: sourceGapped.y }];
+    points = axis === "x" ? sourceDir.x === currDir ? targetSource : sourceTarget : sourceDir.y === currDir ? sourceTarget : targetSource;
+    if (sourcePosition === targetPosition) {
+      const diff = Math.abs(source[axis] - target[axis]);
+      if (diff <= offset) {
+        const gapOffset = Math.min(offset - 1, offset - diff);
+        if (sourceDir[axis] === currDir) sourceGapOffset[axis] = (sourceGapped[axis] > source[axis] ? -1 : 1) * gapOffset;
+        else targetGapOffset[axis] = (targetGapped[axis] > target[axis] ? -1 : 1) * gapOffset;
+      }
+    } else {
+      const opposite = axis === "x" ? "y" : "x";
+      const isSameDir = sourceDir[axis] === targetDir[opposite];
+      const sourceGt = sourceGapped[opposite] > targetGapped[opposite];
+      const sourceLt = sourceGapped[opposite] < targetGapped[opposite];
+      const flip = sourceDir[axis] === 1 && (!isSameDir && sourceGt || isSameDir && sourceLt) || sourceDir[axis] !== 1 && (!isSameDir && sourceLt || isSameDir && sourceGt);
+      if (flip) points = axis === "x" ? sourceTarget : targetSource;
+    }
+    const sourceGapPoint = { x: sourceGapped.x + sourceGapOffset.x, y: sourceGapped.y + sourceGapOffset.y };
+    const targetGapPoint = { x: targetGapped.x + targetGapOffset.x, y: targetGapped.y + targetGapOffset.y };
+    const maxX = Math.max(Math.abs(sourceGapPoint.x - points[0].x), Math.abs(targetGapPoint.x - points[0].x));
+    const maxY = Math.max(Math.abs(sourceGapPoint.y - points[0].y), Math.abs(targetGapPoint.y - points[0].y));
+    if (maxX >= maxY) {
+      centerX = (sourceGapPoint.x + targetGapPoint.x) / 2;
+      centerY = points[0].y;
+    } else {
+      centerX = points[0].x;
+      centerY = (sourceGapPoint.y + targetGapPoint.y) / 2;
+    }
+  }
+  const gappedSource = { x: sourceGapped.x + sourceGapOffset.x, y: sourceGapped.y + sourceGapOffset.y };
+  const gappedTarget = { x: targetGapped.x + targetGapOffset.x, y: targetGapped.y + targetGapOffset.y };
+  const first = points[0];
+  const last = points[points.length - 1];
+  const path = [
+    source,
+    ...gappedSource.x !== first.x || gappedSource.y !== first.y ? [gappedSource] : [],
+    ...points,
+    ...gappedTarget.x !== last.x || gappedTarget.y !== last.y ? [gappedTarget] : [],
+    target
+  ];
+  return [path, centerX, centerY];
+}
+function bend(a, b, c, size2) {
+  const bendSize = Math.min(dist(a, b) / 2, dist(b, c) / 2, size2);
+  const { x, y } = b;
+  if (a.x === x && x === c.x || a.y === y && y === c.y) return `L${x} ${y}`;
+  if (a.y === y) {
+    const xDir2 = a.x < c.x ? -1 : 1;
+    const yDir2 = a.y < c.y ? 1 : -1;
+    return `L ${x + bendSize * xDir2},${y}Q ${x},${y} ${x},${y + bendSize * yDir2}`;
+  }
+  const xDir = a.x < c.x ? 1 : -1;
+  const yDir = a.y < c.y ? -1 : 1;
+  return `L ${x},${y + bendSize * yDir}Q ${x},${y} ${x + bendSize * xDir},${y}`;
+}
+function getCanvasEdgePath(params) {
+  const { sourceX: sx, sourceY: sy, targetX: tx, targetY: ty } = params;
+  const sourcePosition = params.sourcePosition ?? "bottom";
+  const targetPosition = params.targetPosition ?? "top";
+  switch (params.type ?? "default") {
+    case "straight": {
+      const [labelX, labelY] = edgeCenter(sx, sy, tx, ty);
+      return { path: `M ${sx},${sy}L ${tx},${ty}`, labelX, labelY };
+    }
+    case "simplebezier":
+      return cubicPath(params, simpleControl(sourcePosition, sx, sy, tx, ty), simpleControl(targetPosition, tx, ty, sx, sy));
+    case "step":
+    case "smoothstep": {
+      const radius = params.type === "step" ? 0 : params.borderRadius ?? 5;
+      const [points, labelX, labelY] = stepPoints({ x: sx, y: sy }, sourcePosition, { x: tx, y: ty }, targetPosition, params.offset ?? 20);
+      let path = "";
+      points.forEach((p, i) => {
+        path += i > 0 && i < points.length - 1 ? bend(points[i - 1], p, points[i + 1], radius) : `${i === 0 ? "M" : "L"}${p.x} ${p.y}`;
+      });
+      return { path, labelX, labelY };
+    }
+    default: {
+      const c = params.curvature ?? 0.25;
+      return cubicPath(params, curvatureControl(sourcePosition, sx, sy, tx, ty, c), curvatureControl(targetPosition, tx, ty, sx, sy, c));
+    }
+  }
+}
+function measureSvgPath(d, segments = 24) {
+  const pts = [];
+  const tokens = d.match(/[a-zA-Z]|-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/gi) ?? [];
+  let i = 0;
+  let cmd = "";
+  let cur = { x: 0, y: 0 };
+  let start = { x: 0, y: 0 };
+  let lastCtrl = null;
+  let lastCmd = "";
+  const num4 = () => Number(tokens[i++]);
+  const push2 = (p) => {
+    pts.push(p);
+    cur = p;
+  };
+  const cubic = (c1, c2, end) => {
+    const p0 = cur;
+    for (let k = 1; k <= segments; k++) {
+      const t = k / segments;
+      const u = 1 - t;
+      push2({
+        x: u * u * u * p0.x + 3 * u * u * t * c1.x + 3 * u * t * t * c2.x + t * t * t * end.x,
+        y: u * u * u * p0.y + 3 * u * u * t * c1.y + 3 * u * t * t * c2.y + t * t * t * end.y
+      });
+    }
+  };
+  const quad = (c, end) => {
+    const p0 = cur;
+    for (let k = 1; k <= segments; k++) {
+      const t = k / segments;
+      const u = 1 - t;
+      push2({ x: u * u * p0.x + 2 * u * t * c.x + t * t * end.x, y: u * u * p0.y + 2 * u * t * c.y + t * t * end.y });
+    }
+  };
+  while (i < tokens.length) {
+    if (/^[a-zA-Z]$/.test(tokens[i])) cmd = tokens[i++];
+    else if (!cmd) break;
+    const rel = cmd === cmd.toLowerCase();
+    const at = (x, y) => rel ? { x: cur.x + x, y: cur.y + y } : { x, y };
+    switch (cmd.toUpperCase()) {
+      case "M": {
+        const p = at(num4(), num4());
+        push2(p);
+        start = p;
+        cmd = rel ? "l" : "L";
+        lastCtrl = null;
+        lastCmd = "M";
+        continue;
+      }
+      case "L":
+        push2(at(num4(), num4()));
+        lastCtrl = null;
+        break;
+      case "H": {
+        const x = num4();
+        push2({ x: rel ? cur.x + x : x, y: cur.y });
+        lastCtrl = null;
+        break;
+      }
+      case "V": {
+        const y = num4();
+        push2({ x: cur.x, y: rel ? cur.y + y : y });
+        lastCtrl = null;
+        break;
+      }
+      case "C": {
+        const c1 = at(num4(), num4());
+        const c2 = at(num4(), num4());
+        const end = at(num4(), num4());
+        cubic(c1, c2, end);
+        lastCtrl = c2;
+        break;
+      }
+      case "S": {
+        const c1 = lastCtrl && /[CS]/i.test(lastCmd) ? { x: 2 * cur.x - lastCtrl.x, y: 2 * cur.y - lastCtrl.y } : cur;
+        const c2 = at(num4(), num4());
+        const end = at(num4(), num4());
+        cubic(c1, c2, end);
+        lastCtrl = c2;
+        break;
+      }
+      case "Q": {
+        const c = at(num4(), num4());
+        const end = at(num4(), num4());
+        quad(c, end);
+        lastCtrl = c;
+        break;
+      }
+      case "T": {
+        const c = lastCtrl && /[QT]/i.test(lastCmd) ? { x: 2 * cur.x - lastCtrl.x, y: 2 * cur.y - lastCtrl.y } : cur;
+        const end = at(num4(), num4());
+        quad(c, end);
+        lastCtrl = c;
+        break;
+      }
+      case "A": {
+        for (let skip = 0; skip < 5; skip++) num4();
+        push2(at(num4(), num4()));
+        lastCtrl = null;
+        break;
+      }
+      case "Z":
+        push2(start);
+        lastCtrl = null;
+        break;
+      default:
+        i = tokens.length;
+    }
+    lastCmd = cmd;
+    if (cmd.toUpperCase() === "Z") cmd = "";
+  }
+  const cumulative = [0];
+  for (let k = 1; k < pts.length; k++) cumulative.push(cumulative[k - 1] + dist(pts[k - 1], pts[k]));
+  const length = cumulative[cumulative.length - 1] ?? 0;
+  const angleAt = (k) => {
+    for (let j = Math.max(1, k); j < pts.length; j++) {
+      if (cumulative[j] > cumulative[j - 1]) return Math.atan2(pts[j].y - pts[j - 1].y, pts[j].x - pts[j - 1].x);
+    }
+    for (let j = Math.min(k, pts.length - 1); j >= 1; j--) {
+      if (cumulative[j] > cumulative[j - 1]) return Math.atan2(pts[j].y - pts[j - 1].y, pts[j].x - pts[j - 1].x);
+    }
+    return 0;
+  };
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const p of pts) {
+    if (p.x < minX) minX = p.x;
+    if (p.y < minY) minY = p.y;
+    if (p.x > maxX) maxX = p.x;
+    if (p.y > maxY) maxY = p.y;
+  }
+  const bounds = pts.length ? { x: minX, y: minY, width: maxX - minX, height: maxY - minY } : { x: 0, y: 0, width: 0, height: 0 };
+  return {
+    length,
+    bounds,
+    pointAt(distance) {
+      if (pts.length === 0) return { x: 0, y: 0, angle: 0 };
+      if (pts.length === 1 || length === 0) return { ...pts[0], angle: 0 };
+      const s = Math.min(Math.max(distance, 0), length);
+      let lo = 1;
+      let hi = pts.length - 1;
+      while (lo < hi) {
+        const mid = lo + hi >> 1;
+        if (cumulative[mid] < s) lo = mid + 1;
+        else hi = mid;
+      }
+      const piece = cumulative[lo] - cumulative[lo - 1];
+      const t = piece > 0 ? (s - cumulative[lo - 1]) / piece : 0;
+      const a = pts[lo - 1];
+      const b = pts[lo];
+      return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t, angle: angleAt(lo) };
+    }
+  };
+}
+
+// src/canvas/edgeAnimation.ts
+var CANVAS_EDGE_ANIMATION_KINDS = [
+  {
+    kind: "dots",
+    title: "Travelling dots",
+    description: "Dots that travel along the edge, evenly spaced. Good for data or messages flowing between nodes.",
+    defaults: { speed: 80, direction: "forward", size: 3, count: 3, length: 0, gap: 0, glow: 0, trackOpacity: 1 }
+  },
+  {
+    kind: "dash",
+    title: "Marching dashes",
+    description: 'The edge drawn as dashes that march along it. A quiet "this is live" signal.',
+    defaults: { speed: 40, direction: "forward", size: 2, count: 0, length: 8, gap: 6, glow: 0, trackOpacity: 0 }
+  },
+  {
+    kind: "beam",
+    title: "Beam",
+    description: "A short glowing streak that shoots along the edge and leaves it before the next one starts. Good for a request or a trigger.",
+    defaults: { speed: 200, direction: "forward", size: 3, count: 1, length: 40, gap: 0, glow: 4, trackOpacity: 0.35 }
+  },
+  {
+    kind: "pulse",
+    title: "Pulse",
+    description: "The whole edge glows brighter and fades again. Good for an active or highlighted connection.",
+    defaults: { speed: 0, direction: "forward", size: 4, count: 0, length: 0, gap: 0, glow: 3, trackOpacity: 1, duration: 1600 }
+  }
+];
+var KINDS = CANVAS_EDGE_ANIMATION_KINDS.map((k) => k.kind);
+var DIRECTIONS2 = ["forward", "reverse", "alternate"];
+var kindInfo = (kind) => CANVAS_EDGE_ANIMATION_KINDS.find((k) => k.kind === kind);
+var FIELDS = {
+  speed: { min: 1, max: 1e4, description: "canvas units per second" },
+  duration: { min: 100, max: 6e5, description: "ms" },
+  size: { min: 0.5, max: 100, description: "canvas units" },
+  count: { min: 1, max: 50, int: true, description: "dots or beams" },
+  length: { min: 1, max: 1e4, description: "canvas units" },
+  gap: { min: 0, max: 1e4, description: "canvas units" },
+  glow: { min: 0, max: 50, description: "canvas units" },
+  trackOpacity: { min: 0, max: 1, description: "0\u20131" }
+};
+function normalizeCanvasEdgeAnimation(input) {
+  if (!input || typeof input !== "object" || Array.isArray(input)) throw new Error('An edge animation is an object with a "kind" (dots, dash, beam or pulse).');
+  const raw = input;
+  if (!KINDS.includes(raw.kind)) {
+    throw new Error(`Unknown edge animation kind ${JSON.stringify(raw.kind)}. Use one of: ${KINDS.join(", ")}.`);
+  }
+  const out = { kind: raw.kind };
+  for (const [key, spec] of Object.entries(FIELDS)) {
+    const value = raw[key];
+    if (value === void 0 || value === null) continue;
+    if (typeof value !== "number" || !Number.isFinite(value) || value < spec.min || value > spec.max || spec.int && !Number.isInteger(value)) {
+      throw new Error(`Edge animation "${key}" must be ${spec.int ? "a whole number" : "a number"} from ${spec.min} to ${spec.max} (${spec.description}); got ${JSON.stringify(value)}.`);
+    }
+    out[key] = value;
+  }
+  if (raw.direction !== void 0 && raw.direction !== null) {
+    if (!DIRECTIONS2.includes(raw.direction)) {
+      throw new Error(`Edge animation "direction" must be one of: ${DIRECTIONS2.join(", ")}; got ${JSON.stringify(raw.direction)}.`);
+    }
+    out.direction = raw.direction;
+  }
+  if (raw.color !== void 0 && raw.color !== null) {
+    if (typeof raw.color !== "string" || raw.color.trim() === "" || /[;{}<>]/.test(raw.color)) {
+      throw new Error(`Edge animation "color" must be a CSS colour such as "#38bdf8" or "rgb(56 189 248)"; got ${JSON.stringify(raw.color)}.`);
+    }
+    out.color = raw.color.trim();
+  }
+  if (raw.paused !== void 0 && raw.paused !== null) {
+    if (typeof raw.paused !== "boolean") throw new Error(`Edge animation "paused" must be true or false; got ${JSON.stringify(raw.paused)}.`);
+    out.paused = raw.paused;
+  }
+  return out;
+}
+function getCanvasEdgeAnimation(edge) {
+  const value = edge?.data?.animation;
+  if (value === void 0 || value === null) return null;
+  try {
+    return normalizeCanvasEdgeAnimation(value);
+  } catch {
+    return null;
+  }
+}
+function setCanvasEdgeAnimation(edge, animation) {
+  const { animation: _old, ...rest } = edge.data ?? {};
+  if (animation === null) return { ...edge, data: rest };
+  return { ...edge, data: { ...rest, animation: normalizeCanvasEdgeAnimation(animation) } };
+}
+function resolveCanvasEdgeAnimation(animation) {
+  const d = kindInfo(animation.kind).defaults;
+  return {
+    kind: animation.kind,
+    speed: animation.speed ?? d.speed,
+    direction: animation.direction ?? d.direction,
+    size: animation.size ?? d.size,
+    count: animation.count ?? d.count,
+    length: animation.length ?? d.length,
+    gap: animation.gap ?? d.gap,
+    glow: animation.glow ?? d.glow,
+    trackOpacity: animation.trackOpacity ?? d.trackOpacity,
+    paused: animation.paused ?? false,
+    ...animation.color !== void 0 ? { color: animation.color } : {},
+    ...animation.duration !== void 0 ? { duration: animation.duration } : d.duration !== void 0 ? { duration: d.duration } : {}
+  };
+}
+var round4 = (n3) => Math.round(n3 * 1e3) / 1e3;
+var idSafe = (id) => id.replace(/[^a-zA-Z0-9_-]/g, "_");
+function cycleSeconds(anim, distance) {
+  if (anim.duration !== void 0) return anim.duration / 1e3;
+  return Math.max(distance / anim.speed, 0.05);
+}
+function getCanvasEdgeAnimationRender(animation, options) {
+  const anim = resolveCanvasEdgeAnimation(normalizeCanvasEdgeAnimation(animation));
+  const measured2 = options.measured ?? measureSvgPath(options.path);
+  const length = measured2.length;
+  const color = anim.color ?? options.stroke ?? "currentColor";
+  const moving = !anim.paused && !options.reducedMotion && length > 0;
+  const margin = anim.size * 2 + anim.glow * 3 + 2;
+  const b = measured2.bounds;
+  const glowFilter = anim.glow > 0 ? {
+    id: `pixerate-edge-glow-${idSafe(options.id)}`,
+    stdDeviation: round4(anim.glow / 2),
+    x: round4(b.x - margin),
+    y: round4(b.y - margin),
+    width: round4(b.width + margin * 2),
+    height: round4(b.height + margin * 2)
+  } : void 0;
+  const filter = glowFilter ? `url(#${glowFilter.id})` : void 0;
+  const alternate = anim.direction === "alternate";
+  const reverse = anim.direction === "reverse";
+  const elements = [];
+  if (anim.kind === "dots") {
+    const oneWay = cycleSeconds(anim, length);
+    const dur = alternate ? oneWay * 2 : oneWay;
+    const keyPoints = alternate ? "0;1;0" : reverse ? "1;0" : "0;1";
+    const keyTimes = alternate ? "0;0.5;1" : "0;1";
+    for (let i = 0; i < anim.count; i++) {
+      const phase = i / anim.count;
+      const s = alternate ? phase < 0.5 ? phase * 2 : 2 - phase * 2 : reverse ? 1 - phase : phase;
+      elements.push({
+        type: "dot",
+        key: `dot-${i}`,
+        r: anim.size,
+        fill: color,
+        filter,
+        at: measured2.pointAt(s * length),
+        motion: { dur: round4(dur), begin: round4(-phase * dur), keyPoints, keyTimes }
+      });
+    }
+  } else if (anim.kind === "dash") {
+    const period = anim.length + anim.gap;
+    const dur = cycleSeconds(anim, period);
+    const to = reverse ? period : -period;
+    elements.push({
+      type: "stroke",
+      key: "dash",
+      stroke: color,
+      strokeWidth: anim.size,
+      strokeLinecap: "butt",
+      strokeDasharray: `${round4(anim.length)} ${round4(anim.gap)}`,
+      strokeDashoffset: 0,
+      filter,
+      animate: [{ attributeName: "stroke-dashoffset", values: alternate ? `0;${round4(-period)};0` : `0;${round4(to)}`, dur: round4(alternate ? dur * 2 : dur), begin: 0 }]
+    });
+  } else if (anim.kind === "beam") {
+    const period = (length + anim.length) / anim.count;
+    const beam = Math.min(anim.length, period * 0.9);
+    const oneWay = cycleSeconds(anim, period);
+    const from = beam;
+    const to = beam - period;
+    const values = alternate ? `${round4(from)};${round4(to)};${round4(from)}` : reverse ? `${round4(to)};${round4(from)}` : `${round4(from)};${round4(to)}`;
+    elements.push({
+      type: "stroke",
+      key: "beam",
+      stroke: color,
+      strokeWidth: anim.size,
+      strokeLinecap: "round",
+      strokeDasharray: `${round4(beam)} ${round4(Math.max(period - beam, 1e-3))}`,
+      // Held still, the beam sits in the middle of the edge rather than off its start.
+      strokeDashoffset: round4(moving ? reverse ? to : from : beam / 2 - length / 2),
+      filter,
+      animate: [{ attributeName: "stroke-dashoffset", values, dur: round4(alternate ? oneWay * 2 : oneWay), begin: 0 }]
+    });
+  } else {
+    const dur = (anim.duration ?? 1600) / 1e3;
+    elements.push({
+      type: "stroke",
+      key: "pulse",
+      stroke: color,
+      strokeWidth: anim.size,
+      strokeLinecap: "round",
+      opacity: 0.2,
+      filter,
+      animate: [
+        { attributeName: "stroke-opacity", values: "0.2;1;0.2", dur: round4(dur), begin: 0 },
+        { attributeName: "stroke-width", values: `${round4(anim.size)};${round4(anim.size * 1.75)};${round4(anim.size)}`, dur: round4(dur), begin: 0 }
+      ]
+    });
+  }
+  return { kind: anim.kind, length: round4(length), trackOpacity: anim.trackOpacity, moving, glowFilter, elements };
+}
+function valuesAt(values, t) {
+  if (values.length === 1) return values[0];
+  const f = Math.min(Math.max(t, 0), 1) * (values.length - 1);
+  const i = Math.min(Math.floor(f), values.length - 2);
+  return values[i] + (values[i + 1] - values[i]) * (f - i);
+}
+function sampleCanvasEdgeAnimation(animation, path, timeMs) {
+  const measured2 = typeof path === "string" ? measureSvgPath(path) : path;
+  const render = getCanvasEdgeAnimationRender(animation, { path: "", id: "sample", measured: measured2 });
+  const anim = resolveCanvasEdgeAnimation(normalizeCanvasEdgeAnimation(animation));
+  const seconds = anim.paused ? 0 : timeMs / 1e3;
+  const progress = (t) => {
+    const p = (seconds - t.begin) / t.dur;
+    return p - Math.floor(p);
+  };
+  const frame = { kind: anim.kind, length: render.length, dots: [], segments: [], opacity: 1, strokeWidth: anim.size };
+  for (const el of render.elements) {
+    if (el.type === "dot") {
+      const points = el.motion.keyPoints.split(";").map(Number);
+      frame.dots.push(measured2.pointAt(valuesAt(points, progress(el.motion)) * measured2.length));
+      continue;
+    }
+    for (const a of el.animate) {
+      const value = anim.paused && a.attributeName === "stroke-dashoffset" ? el.strokeDashoffset ?? 0 : valuesAt(a.values.split(";").map(Number), progress(a));
+      if (a.attributeName === "stroke-opacity") frame.opacity = value;
+      else if (a.attributeName === "stroke-width") frame.strokeWidth = value;
+      else if (el.strokeDasharray) {
+        const [on, off] = el.strokeDasharray.split(" ").map(Number);
+        const period = on + off;
+        const start = Math.floor((0 + value) / period) - 1;
+        for (let k = start; k * period - value < measured2.length; k++) {
+          const from = k * period - value;
+          const to = from + on;
+          const a0 = Math.max(from, 0);
+          const b0 = Math.min(to, measured2.length);
+          if (b0 > a0) frame.segments.push([round4(a0), round4(b0)]);
+        }
+      }
+    }
+    if (anim.kind === "pulse" && frame.segments.length === 0) frame.segments.push([0, render.length]);
+  }
+  return frame;
+}
+
+// src/canvas/edge-animation-tools.ts
+var READ3 = { readOnlyHint: true, destructiveHint: false, idempotentHint: true, openWorldHint: false };
+var WRITE_IDEMPOTENT2 = { readOnlyHint: false, destructiveHint: false, idempotentHint: true, openWorldHint: false };
+var EDGE_IDS = {
+  type: "array",
+  minItems: 1,
+  uniqueItems: true,
+  items: { type: "string", minLength: 1 },
+  description: "Ids of the edges to change, from list_edge_animations. All of them change in one undo step."
+};
+var CANVAS_EDGE_ANIMATION_SCHEMA = {
+  type: "object",
+  properties: {
+    kind: {
+      type: "string",
+      enum: CANVAS_EDGE_ANIMATION_KINDS.map((k) => k.kind),
+      description: "What moves: dots (travelling dots), dash (marching dashes), beam (a glowing streak that shoots along), pulse (the edge glows and fades)."
+    },
+    speed: { type: "number", minimum: 1, maximum: 1e4, description: "Travel speed in canvas units per second (dots, dash, beam). Defaults: dots 80, dash 40, beam 200." },
+    duration: { type: "number", minimum: 100, maximum: 6e5, description: "One cycle in ms; overrides speed. The pulse timing (default 1600)." },
+    direction: { type: "string", enum: ["forward", "reverse", "alternate"], description: "forward = source to target (default), reverse = target to source, alternate = back and forth." },
+    color: { type: "string", minLength: 1, description: 'CSS colour, e.g. "#38bdf8". Default: the edge stroke colour.' },
+    size: { type: "number", minimum: 0.5, maximum: 100, description: "Dot radius, or stroke width of dashes, beams and the pulse, in canvas units. Defaults: dots 3, dash 2, beam 3, pulse 4." },
+    count: { type: "integer", minimum: 1, maximum: 50, description: "How many dots or beams are on the edge at once. Defaults: dots 3, beam 1." },
+    length: { type: "number", minimum: 1, maximum: 1e4, description: "Dash or beam length in canvas units. Defaults: dash 8, beam 40." },
+    gap: { type: "number", minimum: 0, maximum: 1e4, description: "Gap between dashes in canvas units (dash). Default 6." },
+    glow: { type: "number", minimum: 0, maximum: 50, description: "Glow (blur) radius in canvas units; 0 is none. Defaults: beam 4, pulse 3, others 0." },
+    trackOpacity: { type: "number", minimum: 0, maximum: 1, description: "Opacity of the edge's own line under the animation, 0-1. Defaults: dash 0 (the dashes are the line), beam 0.35, others 1." },
+    paused: { type: "boolean", description: "Hold the animation still at its first frame. Default false." }
+  },
+  required: ["kind"],
+  additionalProperties: false
+};
+var labelOf3 = (edge) => typeof edge.label === "string" && edge.label !== "" ? edge.label : void 0;
+function createCanvasEdgeAnimationToolProvider(target, options = {}) {
+  const readOnlyReason = () => {
+    const ro = typeof options.readOnly === "function" ? options.readOnly() : options.readOnly;
+    return ro ? typeof ro === "string" ? ro : "Edges are read-only on this canvas." : null;
+  };
+  const checkIds = (ids) => {
+    const known = new Set(target.getEdges().map((e) => e.id));
+    const missing = ids.filter((id) => !known.has(id));
+    if (missing.length) {
+      throw new Error(`No edge${missing.length > 1 ? "s" : ""} ${missing.map((id) => `"${id}"`).join(", ")} on the canvas. Call list_edge_animations for edge ids.`);
+    }
+  };
+  const apply = (label, next) => {
+    const before = /* @__PURE__ */ new Map();
+    for (const edge of target.getEdges()) if (next.has(edge.id)) before.set(edge.id, getCanvasEdgeAnimation(edge));
+    const write = (values) => () => target.setEdges((current) => current.map((edge) => values.has(edge.id) ? setCanvasEdgeAnimation(edge, values.get(edge.id) ?? null) : edge));
+    if (target.history) target.history.execute({ name: label, execute: write(next), undo: write(before) });
+    else write(next)();
+  };
+  const listTool = {
+    name: "list_edge_animations",
+    title: "List edge animations",
+    description: "Lists the canvas edges (id, source, target, label, animation or null) and the animation kinds with their defaults, plus the readOnly reason if edges cannot change. Call it before set_edge_animation or clear_edge_animation: it is the source of edge ids.",
+    inputSchema: { type: "object", properties: {}, additionalProperties: false },
+    annotations: { title: "List edge animations", ...READ3 },
+    handler: () => ({
+      edges: target.getEdges().map((e) => ({
+        id: e.id,
+        source: e.source,
+        target: e.target,
+        ...labelOf3(e) ? { label: labelOf3(e) } : {},
+        animation: getCanvasEdgeAnimation(e)
+      })),
+      kinds: CANVAS_EDGE_ANIMATION_KINDS.map((k) => ({ kind: k.kind, title: k.title, description: k.description, defaults: k.defaults })),
+      readOnly: readOnlyReason()
+    })
+  };
+  const setTool = {
+    name: "set_edge_animation",
+    title: "Animate edges",
+    description: "Sets the animation of one or more edges (replacing any they had): travelling dots, marching dashes, a beam or a pulse, with optional speed, direction, colour, size, count, length, glow and track opacity. Fields left out use the kind's defaults. One undo step. Returns the edge ids and the animation as it will play, with every default filled in.",
+    inputSchema: {
+      type: "object",
+      properties: { edges: EDGE_IDS, animation: { ...CANVAS_EDGE_ANIMATION_SCHEMA, description: "The animation. Only kind is required." } },
+      required: ["edges", "animation"],
+      additionalProperties: false
+    },
+    annotations: { title: "Animate edges", ...WRITE_IDEMPOTENT2 },
+    handler: (args) => {
+      const reason = readOnlyReason();
+      if (reason) throw new Error(reason);
+      const ids = args.edges;
+      checkIds(ids);
+      const animation = normalizeCanvasEdgeAnimation(args.animation);
+      apply(ids.length === 1 ? "Animate edge" : `Animate ${ids.length} edges`, new Map(ids.map((id) => [id, animation])));
+      return { edges: ids, animation, resolved: resolveCanvasEdgeAnimation(animation) };
+    }
+  };
+  const clearTool = {
+    name: "clear_edge_animation",
+    title: "Stop edge animations",
+    description: "Removes the animation from one or more edges, leaving the plain edge. Edges without one are left alone. One undo step. Returns the ids cleared and those that had no animation.",
+    inputSchema: { type: "object", properties: { edges: EDGE_IDS }, required: ["edges"], additionalProperties: false },
+    annotations: { title: "Stop edge animations", ...WRITE_IDEMPOTENT2 },
+    handler: (args) => {
+      const reason = readOnlyReason();
+      if (reason) throw new Error(reason);
+      const ids = args.edges;
+      checkIds(ids);
+      const animated = new Set(target.getEdges().filter((e) => getCanvasEdgeAnimation(e) || e.data?.animation !== void 0).map((e) => e.id));
+      const cleared = ids.filter((id) => animated.has(id));
+      if (cleared.length) apply(cleared.length === 1 ? "Stop edge animation" : `Stop ${cleared.length} edge animations`, new Map(cleared.map((id) => [id, null])));
+      return { cleared, unchanged: ids.filter((id) => !animated.has(id)) };
+    }
+  };
+  return {
+    id: options.id ?? "canvas-edge-animation",
+    namespace: options.namespace,
+    title: "Canvas edge animation",
+    description: "Animate canvas edges with travelling dots, marching dashes, beams or a pulse.",
+    skill: "pixerate-canvas",
+    tools: () => readOnlyReason() ? [listTool] : [listTool, setTool, clearTool],
+    subscribe: options.subscribe
+  };
+}
 export {
   ANIMATABLE_PROPERTIES,
   ANIMATION_DATA_KEY,
@@ -12980,6 +13639,8 @@ export {
   CANVAS_CAPTURE_OVERLAY_SELECTORS,
   CANVAS_CAPTURE_VIEWPORT_SELECTOR,
   CANVAS_COMPONENT_DRAG_TYPE,
+  CANVAS_EDGE_ANIMATION_KINDS,
+  CANVAS_EDGE_ANIMATION_SCHEMA,
   CANVAS_EFFECT_MISSING_PATTERN,
   CANVAS_EFFECT_PLACES,
   CANVAS_GRADIENT_PRESETS,
@@ -13113,6 +13774,7 @@ export {
   createCanvasComponent,
   createCanvasComponentsController,
   createCanvasDrawController,
+  createCanvasEdgeAnimationToolProvider,
   createCanvasEditorDocument,
   createCanvasEffectsController,
   createCanvasEffectsToolProvider,
@@ -13211,6 +13873,9 @@ export {
   getBindableTokenProperties,
   getBrushedShapeSvg,
   getCanvasComponentDragId,
+  getCanvasEdgeAnimation,
+  getCanvasEdgeAnimationRender,
+  getCanvasEdgePath,
   getCanvasTokenProperty,
   getCenteredNodePosition,
   getChildLayout,
@@ -13312,6 +13977,7 @@ export {
   measureBetween,
   measureLabel,
   measureSelection,
+  measureSvgPath,
   measureToLine,
   mergeNodeUpdates,
   mermaidEdgeDash,
@@ -13338,6 +14004,7 @@ export {
   nearestHandlePositions,
   nodeSizeOf,
   normalizeBezierPath,
+  normalizeCanvasEdgeAnimation,
   normalizeKeyframes,
   offsetPath,
   offsetShapeNodes,
@@ -13406,6 +14073,7 @@ export {
   resetCanvasInstanceOverrides,
   resizeHandleAxes,
   resolveCanvasBrushSpec,
+  resolveCanvasEdgeAnimation,
   resolveCanvasGradient,
   resolveCanvasTokens,
   resolveEasing,
@@ -13419,6 +14087,7 @@ export {
   runCanvasNodeEffect,
   runMultiNodeTransition,
   sampleAnimationFrames,
+  sampleCanvasEdgeAnimation,
   sanitizeCanvasDocument,
   scaleKeyframes,
   sceneColor,
@@ -13435,6 +14104,7 @@ export {
   sequenceScene,
   serializeCanvasNodes,
   setCanvasComponentProperty,
+  setCanvasEdgeAnimation,
   setCanvasInstanceProperties,
   setCanvasTokenMode,
   setCanvasVariantProperties,