1---
2// Two nodes in a circular reference — the differentiator.
3const accent = "var(--alc-accent-deep)";
4---
5
6<svg viewBox="0 0 280 130" width="100%" height="100%" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
7 <defs>
8 <marker id="iac-arrow" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="6" markerHeight="6" orient="auto">
9 <path d="M0 0 L8 4 L0 8 Z" fill={accent} />
10 </marker>
11 </defs>
12
13 <!-- left node -->
14 <g transform="translate(50 40)">
15 <rect x="0" y="0" width="60" height="46" rx="8" fill="rgba(184, 138, 74, 0.10)" stroke={accent} stroke-width="1.4" />
16 <text x="30" y="20" text-anchor="middle" font-family="var(--alc-font-sans)" font-size="11" font-weight="600" fill="var(--alc-fg-1)">Worker A</text>
17 <text x="30" y="34" text-anchor="middle" font-family="var(--alc-font-mono)" font-size="9" fill="var(--alc-fg-3)">bind(B)</text>
18 </g>
19
20 <!-- right node -->
21 <g transform="translate(170 40)">
22 <rect x="0" y="0" width="60" height="46" rx="8" fill="rgba(184, 138, 74, 0.10)" stroke={accent} stroke-width="1.4" />
23 <text x="30" y="20" text-anchor="middle" font-family="var(--alc-font-sans)" font-size="11" font-weight="600" fill="var(--alc-fg-1)">Worker B</text>
24 <text x="30" y="34" text-anchor="middle" font-family="var(--alc-font-mono)" font-size="9" fill="var(--alc-fg-3)">bind(A)</text>
25 </g>
26
27 <!-- top arrow A -> B -->
28 <path d="M 110 50 C 130 28, 150 28, 170 50" stroke={accent} stroke-width="1.4" fill="none" marker-end="url(#iac-arrow)" />
29 <!-- bottom arrow B -> A -->
30 <path d="M 170 76 C 150 98, 130 98, 110 76" stroke={accent} stroke-width="1.4" fill="none" marker-end="url(#iac-arrow)" />
31
32 <!-- caption -->
33 <text x="140" y="118" text-anchor="middle" font-family="var(--alc-font-hand)" font-size="13" fill={accent} font-style="italic">
34 circular references — supported
35 </text>
36</svg>