@heyramzi/ui 1.54.1 → 2.0.0

package/src/canvas/components/shared/svg/ShapeOutline.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { roughEllipse, roughPolygon, roughRect, seedFrom, sketchColors } from "../../../headless/sketch.js";
+import { penColorVar } from "../../../pen/colors.js";
+import type { ShapeData } from "../../../pen/types.js";
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+	shape: ShapeData;
+	outline: string;
+	ink: string;
+	width?: number;
+	height?: number;
+	/** Draw the outline with the hand instead of the exact path. */
+	hand?: boolean;
+	/** Seeds the hand, so a shape keeps its wobble between renders. */
+	seed?: string;
+}
+
+// =========================
+// PROPS
+// =========================
+let { shape, outline, ink, width, height, hand = false, seed = "" }: Props = $props();
+
+let wash = $derived(shape.fill ? penColorVar(shape.fill) : ink);
+
+let rough = $derived.by(() => {
+	const w = width ?? 0;
+	const h = height ?? 0;
+	if (!hand || w < 4 || h < 4) return [];
+	const pen = { seed: seedFrom(seed), colors: { ...sketchColors("ink", false), stroke: ink } };
+	if (shape.shape === "ellipse") return roughEllipse(w, h, pen);
+	if (shape.shape === "diamond") {
+		return roughPolygon([[w / 2, 1], [w - 1, h / 2], [w / 2, h - 1], [1, h / 2]], pen);
+	}
+	return roughRect(w, h, pen);
+});
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<svg class="pen-shape" {width} {height} viewBox="0 0 {width} {height}" aria-hidden="true">
+	{#if rough.length > 0}
+		{#if shape.filled}
+			<path d={outline} fill={wash} fill-opacity="0.12" stroke="none" pointer-events="all" />
+		{/if}
+		{#each rough as path, i (i)}
+			<path class="pen-line" style:--sw={shape.strokeWidth} d={path.d} fill="none" stroke={ink} stroke-width={shape.strokeWidth} stroke-linecap="round" stroke-linejoin="round" />
+		{/each}
+	{:else}
+	<path
+		class="pen-line"
+		style:--sw={shape.strokeWidth}
+		d={outline}
+		fill={shape.filled ? wash : "none"}
+		fill-opacity={shape.filled ? 0.12 : 0}
+		stroke={ink}
+		stroke-width={shape.strokeWidth}
+		stroke-linejoin="round"
+		pointer-events={shape.filled ? "all" : "stroke"}
+	/>
+	{/if}
+</svg>
+
+<style>
+	.pen-shape {
+		display: block;
+		overflow: visible;
+		pointer-events: none;
+	}
+</style>

package/src/canvas/components/shared/svg/StrokeNode.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import type { NodeProps } from "@xyflow/svelte";
+import "../../../pen/pen.css";
+import { penColorVar } from "../../../pen/colors.js";
+import { strokePath } from "../../../pen/stroke-path.js";
+import { HIGHLIGHTER_OPACITY, type StrokeData } from "../../../pen/types.js";
+
+// =========================
+// PROPS
+// =========================
+let { data, selected, width, height }: NodeProps = $props();
+
+// =========================
+// DERIVED
+// =========================
+let stroke = $derived(data as StrokeData);
+let path = $derived(strokePath(stroke.points, stroke));
+// A wide, invisible line along the centre so a thin stroke is easy to click.
+let hitPoints = $derived(stroke.points.map((point) => `${point[0]},${point[1]}`).join(" "));
+let hitWidth = $derived(Math.max(stroke.size, 14));
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<svg
+	class="pen-stroke"
+	{width}
+	{height}
+	viewBox="0 0 {width} {height}"
+	aria-hidden="true"
+>
+	<polyline
+		class="hit"
+		points={hitPoints}
+		fill="none"
+		stroke="transparent"
+		stroke-width={hitWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<!-- Selected, the ink's own outline widens it about 1.7x (pen.css --select-stroke); no box. -->
+	<path
+		class="ink"
+		d={path}
+		fill={penColorVar(stroke.color)}
+		stroke={selected ? penColorVar(stroke.color) : "none"}
+		stroke-width={selected ? stroke.size * 0.7 : 0}
+		stroke-linejoin="round"
+		opacity={stroke.tool === "highlighter" ? HIGHLIGHTER_OPACITY : 1}
+	/>
+</svg>
+
+<style>
+	.pen-stroke {
+		display: block;
+		overflow: visible;
+		pointer-events: none;
+	}
+	.hit {
+		pointer-events: stroke;
+	}
+	.ink {
+		pointer-events: visiblePainted;
+	}
+</style>

package/src/canvas/components/shared/svg/TextRule.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import type { SketchPath } from "../../../headless/sketch.js";
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+	rule: SketchPath[];
+	ink: string;
+	width: number;
+}
+
+// =========================
+// PROPS
+// =========================
+let { rule, ink, width }: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<svg class="pen-rule" {width} height="10" aria-hidden="true">
+	{#each rule as path, i (i)}
+		<path class="pen-line" style:--sw={path.strokeWidth} d={path.d} fill="none" stroke={ink} stroke-width={path.strokeWidth} stroke-linecap="round" />
+	{/each}
+</svg>
+
+<style>
+	.pen-rule {
+		display: block;
+		overflow: visible;
+		pointer-events: none;
+	}
+</style>

package/src/canvas/edges/bend-handle.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { useStore } from "@xyflow/svelte";
+
+// The grab dot on a selected elbow, one size on screen. Only the edge showing it reads the zoom; a root value restyles every card per frame.
+
+// =========================
+// CONSTANTS
+// =========================
+const MIN_ZOOM = 0.05;
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+	/** The way the run moves: x slides it sideways, y up and down. */
+	axis: "x" | "y";
+	title: string;
+	onpointerdown: (event: PointerEvent) => void;
+	ondblclick: () => void;
+}
+
+// =========================
+// PROPS
+// =========================
+let { axis, title, onpointerdown, ondblclick }: Props = $props();
+
+// =========================
+// STATE
+// =========================
+const store = useStore();
+
+// =========================
+// DERIVED
+// =========================
+let unzoom = $derived(1 / Math.max(store.viewport.zoom, MIN_ZOOM));
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<button
+	type="button"
+	class="cv-bend-handle"
+	class:cv-bend-x={axis === "x"}
+	data-edge-bend
+	{title}
+	aria-label={title}
+	style:scale={unzoom}
+	{onpointerdown}
+	{ondblclick}
+></button>
+
+<!-- =========================== -->
+<!-- STYLES -->
+<!-- =========================== -->
+<style>
+.cv-bend-handle {
+	display: block;
+	box-sizing: border-box;
+	width: 12px;
+	height: 12px;
+	padding: 0;
+	border: 2px solid var(--cv-chrome-surface, var(--background, #fff));
+	border-radius: 9999px;
+	background: var(--cv-chrome-ring, var(--ring, #4a4ad8));
+	cursor: row-resize;
+	touch-action: none;
+}
+
+.cv-bend-x {
+	cursor: col-resize;
+}
+</style>

package/src/canvas/edges/edge-gradient.svelte

@@ -0,0 +1,30 @@
+<svelte:options namespace="svg" />
+
+<script lang="ts">
+interface Props {
+	id: string;
+	from: { x: number; y: number };
+	to: { x: number; y: number };
+	fromColor: string;
+	toColor: string;
+}
+
+let { id, from, to, fromColor, toColor }: Props = $props();
+
+// A zero-length gradient paints nothing, so a link drawn onto itself keeps one pixel of run.
+let flat = $derived(Math.abs(from.x - to.x) < 0.5 && Math.abs(from.y - to.y) < 0.5);
+</script>
+
+<defs>
+	<linearGradient
+		{id}
+		gradientUnits="userSpaceOnUse"
+		x1={from.x}
+		y1={from.y}
+		x2={flat ? from.x : to.x}
+		y2={flat ? from.y + 1 : to.y}
+	>
+		<stop stop-color={fromColor} />
+		<stop offset="1" stop-color={toColor} />
+	</linearGradient>
+</defs>

package/src/canvas/edges/edge-path.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vite-plus/test";
+import { Position } from "@xyflow/svelte";
+import { arrowTips, routeEdgePath } from "./edge-path.js";
+
+const geometry = {
+  sourceX: 0,
+  sourceY: 0,
+  targetX: 200,
+  targetY: 100,
+  sourcePosition: Position.Right,
+  targetPosition: Position.Left,
+};
+
+describe("routeEdgePath", () => {
+  it("draws a straight link as one segment", () => {
+    expect(routeEdgePath("straight", geometry, null).path).toBe("M 0,0L 200,100");
+  });
+
+  it("draws a curve with a cubic", () => {
+    expect(routeEdgePath("curved", geometry, null).path).toContain("C");
+  });
+
+  it("draws an elbow with right angles", () => {
+    const { path } = routeEdgePath("elbow", geometry, null);
+    expect(path).toContain("L");
+    expect(path).not.toContain("C");
+  });
+
+  it("detours a same-side pair past both cards", () => {
+    const anchors = {
+      source: { x: 100, y: 0, side: "right" as const },
+      target: { x: 100, y: 120, side: "right" as const },
+    };
+    const { path, labelX } = routeEdgePath(
+      "elbow",
+      { ...geometry, sourceX: 100, targetX: 100, targetY: 120 },
+      anchors,
+    );
+    expect(labelX).toBe(140);
+    expect(path.startsWith("M 100 0")).toBe(true);
+  });
+});
+
+describe("arrowTips", () => {
+  it("points a straight link's heads along the line", () => {
+    const tips = arrowTips("straight", { ...geometry, targetY: 0 }, null);
+    expect(tips.end.angle).toBeCloseTo(0);
+    expect(tips.start.angle).toBeCloseTo(Math.PI);
+  });
+
+  it("meets a box square on", () => {
+    const anchors = {
+      source: { x: 0, y: 0, side: "right" as const },
+      target: { x: 200, y: 100, side: "top" as const },
+    };
+    expect(arrowTips("elbow", geometry, anchors).end.angle).toBeCloseTo(Math.PI / 2);
+  });
+});

package/src/canvas/edges/edge-path.ts

@@ -0,0 +1,293 @@
+// The path and arrowhead placement for one link, chosen by its route. Pure, so the choice is testable.
+
+import { getBezierPath, getSmoothStepPath, getStraightPath, Position } from "@xyflow/svelte";
+import {
+  bestAnchors,
+  sideDetour,
+  sideFromHandle,
+  type Anchor,
+  type Side,
+} from "../headless/edge-anchors.js";
+import { parseBox } from "../headless/edge-memo.js";
+
+export type EdgeRoute = "elbow" | "curved" | "straight";
+
+export type EdgeGeometry = {
+  sourceX: number;
+  sourceY: number;
+  targetX: number;
+  targetY: number;
+  sourcePosition: Position;
+  targetPosition: Position;
+};
+
+export type Anchors = { source: Anchor; target: Anchor };
+export type Point = { x: number; y: number };
+export type ArrowTip = Point & { angle: number };
+
+/** The movable run of an elbow: it slides along `axis` from `base` within `min` and `max`; `x`, `y` is its middle. */
+export type BendHandle = Point & { axis: "x" | "y"; base: number; min: number; max: number };
+export type RoutedPath = { path: string; labelX: number; labelY: number; bend: BendHandle | null };
+
+/** The corner radius a stepped link shares with the cards it joins. */
+const CORNER = 8;
+/** How far a same-side link runs past the cards, and the least it keeps once bent. */
+const DETOUR = 40;
+const DETOUR_FLOOR = 8;
+
+const OUT: Record<Side, Point> = {
+  top: { x: 0, y: -1 },
+  right: { x: 1, y: 0 },
+  bottom: { x: 0, y: 1 },
+  left: { x: -1, y: 0 },
+};
+
+/** The bend an edge stores in its data: pixels the movable run sits off its unbent place. */
+export function readBend(data: unknown): number {
+  const raw = data && typeof data === "object" ? (data as Record<string, unknown>).bend : null;
+  return typeof raw === "number" && Number.isFinite(raw) ? raw : 0;
+}
+
+/** The bend that puts a handle's run under the pointer, kept inside the handle's limits. */
+export function bendFromPointer(handle: BendHandle, pointer: Point): number {
+  const at = handle.axis === "x" ? pointer.x : pointer.y;
+  return Math.round(Math.min(handle.max, Math.max(handle.min, at)) - handle.base);
+}
+
+function mid(a: number, b: number): number {
+  return (a + b) / 2;
+}
+
+function clamp(value: number, a: number, b: number): number {
+  return Math.min(Math.max(a, b), Math.max(Math.min(a, b), value));
+}
+
+type Elbow = { points: Point[]; handle: BendHandle | null };
+
+/** Out from `s` to the run at `at`, across it, then in to `t`. */
+function runPoints(s: Anchor, t: Anchor, horizontal: boolean, at: number): Point[] {
+  return horizontal
+    ? [s, { x: at, y: s.y }, { x: at, y: t.y }, t]
+    : [s, { x: s.x, y: at }, { x: t.x, y: at }, t];
+}
+
+/** The handle on the run at `at`, or none when the two ends line up and there is nothing to slide. */
+function runHandle(
+  { source: s, target: t }: Anchors,
+  horizontal: boolean,
+  at: number,
+  limits: { base: number; min: number; max: number },
+): BendHandle | null {
+  const span = horizontal ? t.y - s.y : t.x - s.x;
+  if (!(Math.abs(span) > 1)) return null;
+  return {
+    axis: horizontal ? "x" : "y",
+    x: horizontal ? at : mid(s.x, t.x),
+    y: horizontal ? mid(s.y, t.y) : at,
+    ...limits,
+  };
+}
+
+/** Same side: out past both cards, along, back in. The run keeps a margin outside them. */
+function sameSideElbow(anchors: Anchors, bend: number): Elbow {
+  const { source: s, target: t } = anchors;
+  const out = OUT[s.side];
+  const horizontal = out.x !== 0;
+  const base = sideDetour(anchors, DETOUR);
+  const edge = sideDetour(anchors, 0);
+  const outward = horizontal ? out.x : out.y;
+  const at = clamp(base + bend, edge + outward * DETOUR_FLOOR, outward > 0 ? Infinity : -Infinity);
+  const handle = runHandle(anchors, horizontal, at, {
+    base,
+    min: outward > 0 ? edge + DETOUR_FLOOR : -Infinity,
+    max: outward > 0 ? Infinity : edge - DETOUR_FLOOR,
+  });
+  return { points: runPoints(s, t, horizontal, at), handle };
+}
+
+/** Opposite sides: out, across at the middle, in. The across run is what a bend moves. */
+function acrossElbow(anchors: Anchors, bend: number): Elbow {
+  const { source: s, target: t } = anchors;
+  const horizontal = OUT[s.side].x !== 0;
+  const base = horizontal ? mid(s.x, t.x) : mid(s.y, t.y);
+  const lo = horizontal ? Math.min(s.x, t.x) : Math.min(s.y, t.y);
+  const hi = horizontal ? Math.max(s.x, t.x) : Math.max(s.y, t.y);
+  const at = clamp(base + bend, lo, hi);
+  const handle = runHandle(anchors, horizontal, at, { base, min: lo, max: hi });
+  return { points: runPoints(s, t, horizontal, at), handle };
+}
+
+/** Square sides: one corner, when both ends are on the way there. */
+function cornerElbow(anchors: Anchors): Elbow | null {
+  const { source: s, target: t } = anchors;
+  const inward = OUT[t.side];
+  const horizontalOut = OUT[s.side].x !== 0;
+  if (horizontalOut === (inward.x !== 0)) return null;
+  const corner = horizontalOut ? { x: t.x, y: s.y } : { x: s.x, y: t.y };
+  const arriving = horizontalOut ? Math.sign(t.y - s.y) : Math.sign(t.x - s.x);
+  const wanted = horizontalOut ? -inward.y : -inward.x;
+  return arriving === wanted ? { points: [s, corner, t], handle: null } : null;
+}
+
+/** The corners of an elbow between two anchors and the run a bend moves. Null when it must turn back, which getSmoothStepPath routes. */
+function elbowPoints(anchors: Anchors, bend: number): Elbow | null {
+  const { source: s, target: t } = anchors;
+  if (s.side === t.side) return sameSideElbow(anchors, bend);
+
+  const out = OUT[s.side];
+  const inward = OUT[t.side];
+  const ahead = out.x * (t.x - s.x) + out.y * (t.y - s.y);
+  if (ahead <= 0) return null;
+
+  if (out.x === -inward.x && out.y === -inward.y) return acrossElbow(anchors, bend);
+  return cornerElbow(anchors);
+}
+
+/** Corners drawn as the same quadratic arcs getSmoothStepPath draws, so the two routes match. */
+function roundedPath(points: Point[]): string {
+  const pts = points.filter(
+    (p, i) => i === 0 || p.x !== points[i - 1].x || p.y !== points[i - 1].y,
+  );
+  let d = `M ${pts[0].x} ${pts[0].y}`;
+  for (let i = 1; i < pts.length - 1; i++) {
+    const a = pts[i - 1];
+    const b = pts[i];
+    const c = pts[i + 1];
+    const r = Math.min(
+      CORNER,
+      Math.hypot(b.x - a.x, b.y - a.y) / 2,
+      Math.hypot(c.x - b.x, c.y - b.y) / 2,
+    );
+    const collinear = (a.x === b.x && b.x === c.x) || (a.y === b.y && b.y === c.y);
+    if (collinear || !(r > 0.5)) {
+      d += ` L ${b.x} ${b.y}`;
+      continue;
+    }
+    const before = { x: b.x - Math.sign(b.x - a.x) * r, y: b.y - Math.sign(b.y - a.y) * r };
+    const after = { x: b.x + Math.sign(c.x - b.x) * r, y: b.y + Math.sign(c.y - b.y) * r };
+    d += ` L ${before.x} ${before.y} Q ${b.x} ${b.y} ${after.x} ${after.y}`;
+  }
+  const last = pts[pts.length - 1];
+  return `${d} L ${last.x} ${last.y}`;
+}
+
+/** The middle of the longest run, where a label sits when the link has no bend handle. */
+function middleOf(points: Point[]): Point {
+  let best = { length: -1, at: points[0] };
+  for (let i = 1; i < points.length; i++) {
+    const length = Math.hypot(points[i].x - points[i - 1].x, points[i].y - points[i - 1].y);
+    if (length > best.length)
+      best = {
+        length,
+        at: { x: mid(points[i].x, points[i - 1].x), y: mid(points[i].y, points[i - 1].y) },
+      };
+  }
+  return best.at;
+}
+
+/** The corners an elbow turns at, for a hand-ruled drawing to follow. Null for any other route. */
+export function elbowCorners(route: EdgeRoute, anchors: Anchors | null, bend = 0): Point[] | null {
+  if (route !== "elbow" || !anchors) return null;
+  return elbowPoints(anchors, bend)?.points ?? null;
+}
+
+export function routeEdgePath(
+  route: EdgeRoute,
+  geometry: EdgeGeometry,
+  anchors: Anchors | null,
+  bend = 0,
+): RoutedPath {
+  if (route === "straight") {
+    const [path, labelX, labelY] = getStraightPath(geometry);
+    return { path, labelX, labelY, bend: null };
+  }
+  if (route === "curved") {
+    const [path, labelX, labelY] = getBezierPath(geometry);
+    return { path, labelX, labelY, bend: null };
+  }
+  const plan = anchors ? elbowPoints(anchors, bend) : null;
+  if (plan) {
+    const label = plan.handle ?? middleOf(plan.points);
+    return { path: roundedPath(plan.points), labelX: label.x, labelY: label.y, bend: plan.handle };
+  }
+  const [path, labelX, labelY] = getSmoothStepPath({ ...geometry, borderRadius: CORNER });
+  return { path, labelX, labelY, bend: null };
+}
+
+export type LinkInput = {
+  route: EdgeRoute;
+  bend: number;
+  /** Each end's `boxKey`, "" until the card is measured. */
+  fromBox: string;
+  toBox: string;
+  /** The edge's stored handle ids. */
+  sourceHandle?: string | null;
+  targetHandle?: string | null;
+  /** The geometry xyflow measured, used until both cards have a size. */
+  fallback: EdgeGeometry;
+};
+
+export type Link = RoutedPath & {
+  anchors: Anchors | null;
+  geometry: EdgeGeometry;
+  tips: { start: ArrowTip; end: ArrowTip };
+};
+
+/** Everything one link draws: its sides, path, bend handle and arrowheads, from where its cards sit. */
+export function planLink(input: LinkInput): Link {
+  const from = parseBox(input.fromBox);
+  const to = parseBox(input.toBox);
+  let anchors: Anchors | null = null;
+  let geometry = input.fallback;
+  if (from && to) {
+    anchors = bestAnchors(from, to, {
+      source: sideFromHandle(input.sourceHandle),
+      target: sideFromHandle(input.targetHandle),
+    });
+    geometry = {
+      sourceX: anchors.source.x,
+      sourceY: anchors.source.y,
+      sourcePosition: anchors.source.side as Position,
+      targetX: anchors.target.x,
+      targetY: anchors.target.y,
+      targetPosition: anchors.target.side as Position,
+    };
+  }
+  return {
+    ...routeEdgePath(input.route, geometry, anchors, input.bend),
+    anchors,
+    geometry,
+    tips: arrowTips(input.route, geometry, anchors),
+  };
+}
+
+/** The direction a link travels when it meets a box on `side`: straight into it. */
+function into(side: Side): number {
+  switch (side) {
+    case "left":
+      return 0;
+    case "right":
+      return Math.PI;
+    case "top":
+      return Math.PI / 2;
+    case "bottom":
+      return -Math.PI / 2;
+  }
+}
+
+/** Where an arrowhead sits and points at each end: along a straight link's line, square on to the box otherwise. */
+export function arrowTips(
+  route: EdgeRoute,
+  geometry: EdgeGeometry,
+  anchors: Anchors | null,
+): { start: ArrowTip; end: ArrowTip } {
+  const { sourceX, sourceY, targetX, targetY } = geometry;
+  const straight = Math.atan2(targetY - sourceY, targetX - sourceX);
+  const startAngle =
+    route === "straight" || !anchors ? straight + Math.PI : into(anchors.source.side);
+  const endAngle = route === "straight" || !anchors ? straight : into(anchors.target.side);
+  return {
+    start: { x: sourceX, y: sourceY, angle: startAngle },
+    end: { x: targetX, y: targetY, angle: endAngle },
+  };
+}

package/src/canvas/edges/gradient-edge.svelte

@@ -0,0 +1,43 @@
+<svelte:options namespace="svg" />
+
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { BaseEdge } from "@xyflow/svelte";
+import EdgeGradient from "./edge-gradient.svelte";
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+	id: string;
+	path: string;
+	from: { x: number; y: number };
+	to: { x: number; y: number };
+	fromColor: string;
+	toColor?: string;
+	markerEnd?: string;
+	/** The edge's own style. A stroke set here beats the gradient. */
+	style?: string;
+	class?: string;
+}
+
+// =========================
+// PROPS
+// =========================
+let { id, path, from, to, fromColor, toColor = fromColor, markerEnd, style = "", class: className = "" }: Props = $props();
+
+// =========================
+// DERIVED
+// =========================
+let gradientId = $derived(`canvas-gradient-${id.replace(/[^\w-]/g, "_")}`);
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<EdgeGradient id={gradientId} {from} {to} {fromColor} {toColor} />
+<BaseEdge {id} {path} {markerEnd} class="canvas-edge {className}" style="stroke: url(#{gradientId}); {style}" />
+<!-- Hidden until a test run crosses this link; the canvas stylesheet draws the moving dashes. -->
+<path d={path} class="canvas-edge-flow" fill="none" aria-hidden="true" />