1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
<svg aria-label="Compiler graph" width="847" height="572" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 847 572" style="font-family: sans-serif;"><style>
html, body { height:100%; margin:0; font-family:sans-serif; }
.viewer { height:100%; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.source { padding:8px; border-bottom:1px solid #ccc; }
#program { width:min(600px,80vw); vertical-align:middle; }
#status { margin-top:4px; }
#graph { min-height:0; overflow:hidden; position:relative; background:#fafbfc; }
#elk { width:100%; height:100%; }
#graph svg { display:block; }
.tools { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:8px; font-size:12px; }
.hint { color:#616c78; }
.ctrl { color:#b63838; } .mem { color:#2867b2; } .data { color:#536477; }
.edge { fill:none; stroke-width:1.5; }
.edge.CTRL { stroke-width:2; }
.edge.ASSOC { stroke-dasharray:4 4; }
.edge.PARSER { stroke-dasharray:5 4; }
.parser rect { fill:#f6f0ff; stroke:#7956a5; stroke-width:1.5; stroke-dasharray:5 4; }
.edge.selected { stroke-width:3.5; }
.edge.bundle { stroke-width:4; }
.edge.bundle.selected { stroke-width:6; }
.edge-hit { fill:none; stroke:transparent; stroke-width:12; vector-effect:non-scaling-stroke; pointer-events:stroke; cursor:pointer; }
.edge-jump { fill:transparent; pointer-events:all; cursor:pointer; }
.node { cursor:pointer; }
.box { stroke:#758191; stroke-width:1; }
.node.held .box { stroke-dasharray:5 3; }
.node.near .box { stroke:#c18221; stroke-width:2; }
.node.focus .box { stroke:#9c4900; stroke-width:3; }
.node.selected .box { stroke:#1569b9; stroke-width:3; }
.node.folded .box { stroke-width:4; }
.node.folding .box { fill:#f4ccd7; }
.fold-tag { font-size:9px; font-weight:700; fill:#963751; }
.peep-area { fill:#fff3d9; fill-opacity:.8; stroke:#c18221; stroke-width:2; pointer-events:none; }
.node.peep-edit .box { stroke:#9c4900; stroke-width:3; }
.node.error .box { stroke:#b42318; stroke-width:4; }
#event.error { color:#b42318; font-weight:600; white-space:pre-wrap; overflow-wrap:anywhere; }
.peep-ghosts { pointer-events:none; }
.region-box { stroke:#9da9b8; stroke-width:1.5; }
.fold-btn { cursor:pointer; }
.fold-btn rect { fill:white; stroke:#596674; }
.fold-btn text { font-size:14px; fill:#152330; }
.fold-btn:focus rect { stroke:#1569b9; stroke-width:2; }
.shortcut { cursor:pointer; }
.shortcut path { fill:none; stroke-width:1.5; }
.shortcut rect { fill:#fff8ec; stroke:#b63838; stroke-dasharray:3 2; }
.shortcut text { font-size:11px; fill:#783030; }
.shortcut.selected rect, .shortcut:focus rect { stroke-width:2.5; }
.label { font-size:12px; fill:#152330; font-weight:600; }
.node-id { font-size:10px; fill:#596674; font-weight:400; }
.type { font-size:11px; fill:#455768; }
.port { stroke:#536477; stroke-width:1; }
.row { stroke:#b6afcf; stroke-width:1; }
.bind { font-size:12px; fill:#152330; }
.slot { font-size:10px; fill:#364352; paint-order:stroke; stroke:#fafbfc; stroke-width:3; }
#detail { position:absolute; top:8px; right:8px; margin:0; padding:12px; max-width:320px;
max-height:45%; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere;
background:#fffffff2; border:1px solid #bac5d0; border-radius:4px; font-size:12px; }
.controls { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; padding:6px; }
.button { color:white; background:black; font-size:20px; min-width:30px; }
.button:disabled { background:grey; }
.count { font-size:20px; min-width:35px; text-align:center; }
#N { width:6ch; }
#scrub { width:clamp(120px,35vw,600px); }
</style><defs><marker id="arrow-CTRL" viewBox="0 -4 8 8" refX="8" refY="0" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,-4L8,0L0,4Z" fill="#b63838"/></marker><marker id="arrow-DATA" viewBox="0 -4 8 8" refX="8" refY="0" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,-4L8,0L0,4Z" fill="#536477"/></marker><marker id="arrow-MEM" viewBox="0 -4 8 8" refX="8" refY="0" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,-4L8,0L0,4Z" fill="#2867b2"/></marker><marker id="arrow-ASSOC" viewBox="0 -4 8 8" refX="8" refY="0" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,-4L8,0L0,4Z" fill="#9396a3"/></marker><marker id="arrow-PARSER" viewBox="0 -4 8 8" refX="8" refY="0" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,-4L8,0L0,4Z" fill="#7956a5"/></marker></defs><rect width="100%" height="100%" fill="rgb(250, 251, 252)"/><g><g class="regions" style="opacity: 1;"/><rect class="peep-area" rx="36" style="opacity: 0;"/><g class="edges"><path class="edge CTRL" id="e3i0" d="M236,471 C236,495 411.5,498 411.5,522" stroke="#b63838" marker-start="url(#arrow-CTRL)" style="opacity: 1;"><title>#3[0] → #18 · CTRL</title></path><path class="edge CTRL" id="e3i1" d="M388,471 C388,495 435.5,498 435.5,522" stroke="#b63838" marker-start="url(#arrow-CTRL)" style="opacity: 1;"><title>#3[1] → #24 · CTRL</title></path><path class="edge DATA" id="e8i1" d="M356,118 L356,138 L611,138 L611,166" stroke="#536477" marker-start="url(#arrow-DATA)" style="opacity: 1;"><title>#8[1] → #4 · DATA</title></path><path class="edge DATA" id="e8i2" d="M666,118 L666,128 L641,128 L641,166" stroke="#536477" marker-start="url(#arrow-DATA)" style="opacity: 1;"><title>#8[2] → #7 · DATA</title></path><path class="edge DATA" id="e10i1" d="M356,118 L356,138 L307,138 L307,166" stroke="#536477" marker-start="url(#arrow-DATA)" style="opacity: 1;"><title>#10[1] → #4 · DATA</title></path><path class="edge DATA" id="e10i2" d="M84,118 L84,148 L337,148 L337,166" stroke="#536477" marker-start="url(#arrow-DATA)" style="opacity: 1;"><title>#10[2] → #9 · DATA</title></path><path class="edge CTRL" id="e11i0" d="M236,118 L236,270" stroke="#b63838" marker-start="url(#arrow-CTRL)" style="opacity: 1;"><title>#11[0] → #1 · CTRL</title></path><path class="edge DATA" id="e11i1" d="M307,222 L307,232 L316,232 L316,270" stroke="#536477" marker-start="url(#arrow-DATA)" style="opacity: 1;"><title>#11[1] → #10 · DATA</title></path><path class="edge DATA" id="e17i1" d="M356,118 L356,138 L459,138 L459,166" stroke="#536477" marker-start="url(#arrow-DATA)" style="opacity: 1;"><title>#17[1] → #4 · DATA</title></path><path class="edge DATA" id="e17i2" d="M514,118 L514,128 L489,128 L489,166" stroke="#536477" marker-start="url(#arrow-DATA)" style="opacity: 1;"><title>#17[2] → #16 · DATA</title></path><path class="edge CTRL" id="e18i0" d="M216,370 L216,418" stroke="#b63838" marker-start="url(#arrow-CTRL)" style="opacity: 1;"><title>#18[0] → #5 · CTRL</title></path><path class="edge DATA" id="e18i1" d="M459,222 L459,380 L256,380 L256,418" stroke="#536477" marker-start="url(#arrow-DATA)" style="opacity: 1;"><title>#18[1] → #17 · DATA</title></path><path class="edge DATA" id="e21i1" d="M611,222 L611,284.6666666666667" stroke="#536477" marker-start="url(#arrow-DATA)" style="opacity: 1;"><title>#21[1] → #8 · DATA</title></path><path class="edge DATA" id="e21i2" d="M763,222 L763,232 L641,232 L641,284.6666666666667" stroke="#536477" marker-start="url(#arrow-DATA)" style="opacity: 1;"><title>#21[2] → #20 · DATA</title></path><path class="edge CTRL" id="e24i0" d="M336,370 L336,390 L368,390 L368,418" stroke="#b63838" marker-start="url(#arrow-CTRL)" style="opacity: 1;"><title>#24[0] → #6 · CTRL</title></path><path class="edge DATA" id="e24i1" d="M611,340.6666666666667 L611,390 L408,390 L408,418" stroke="#536477" marker-start="url(#arrow-DATA)" style="opacity: 1;"><title>#24[1] → #21 · DATA</title></path></g><g class="edge-hits"/><g class="parser" style="opacity: 1;"/><g class="nodes"><g class="node" id="n1" data-id="1" transform="translate(176,68)" style="opacity: 1;"><path class="box" d="M0,0H120V44H0Z" fill="#fff1c4"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>$ctrl</tspan><tspan class="node-id"> #1/0</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#1 $ctrl
Projection 0 of #2
Type not computed
[0] → #2 CTRL</title></g><g class="node" id="n2" data-id="2" transform="translate(176,24)" style="opacity: 1;"><path class="box" d="M0,0H240V44H0Z" fill="#fff1c4"/><text class="label" text-anchor="middle" x="120" y="18"><tspan>Start</tspan><tspan class="node-id"> #2</tspan></text><text class="type" text-anchor="middle" y="35" x="120"/><title>#2 Start
Type not computed
</title></g><g class="node" id="n3" data-id="3" transform="translate(387.5,522)" style="opacity: 1;"><path class="box" d="M0,0H72V26H0Z" fill="#fff1c4"/><text class="label" text-anchor="middle" x="36" y="17"><tspan>Stop</tspan><tspan class="node-id"> #3</tspan></text><text class="type" text-anchor="middle" y="35" x="36"/><title>#3 Stop
Type not computed
[0] → #18 CTRL
[1] → #24 CTRL</title><circle class="port" cx="24" cy="0" r="3" fill="#536477"/><circle class="port" cx="48" cy="0" r="3" fill="#536477"/><text class="slot" x="24" y="-7" text-anchor="middle">0</text><text class="slot" x="48" y="-7" text-anchor="middle">1</text></g><g class="node" id="n4" data-id="4" transform="translate(296,68)" style="opacity: 1;"><path class="box" d="M0,0H120V44H0Z" fill="#edf3f7"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>arg</tspan><tspan class="node-id"> #4/1</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#4 arg
Projection 1 of #2
Type not computed
[0] → #2 DATA</title></g><g class="node" id="n5" data-id="5" transform="translate(156,320)" style="opacity: 1;"><path class="box" d="M0,0H120V44H0Z" fill="#fff1c4"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>True</tspan><tspan class="node-id"> #5/0</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#5 True
Projection 0 of #11
Type not computed
[0] → #11 CTRL</title></g><g class="node" id="n6" data-id="6" transform="translate(276,320)" style="opacity: 1;"><path class="box" d="M0,0H120V44H0Z" fill="#fff1c4"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>False</tspan><tspan class="node-id"> #6/1</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#6 False
Projection 1 of #11
Type not computed
[0] → #11 CTRL</title></g><g class="node" id="n7" data-id="7" transform="translate(606,68)" style="opacity: 1;"><path class="box" d="M14,0H106Q120,0 120,14V30Q120,44 106,44H14Q0,44 0,30V14Q0,0 14,0Z" fill="#edf3f7"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>2</tspan><tspan class="node-id"> #7</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#7 2
Type not computed
</title></g><g class="node" id="n8" data-id="8" transform="translate(551,172)" style="opacity: 1;"><path class="box" d="M14,0H106Q120,0 120,14V30Q120,44 106,44H14Q0,44 0,30V14Q0,0 14,0Z" fill="#edf3f7"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>*</tspan><tspan class="node-id"> #8</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#8 *
Type not computed
[0] → — DATA
[1] → #4 DATA
[2] → #7 DATA</title><circle class="port" cx="30" cy="-3" r="3" fill="white"/><circle class="port" cx="60" cy="-3" r="3" fill="#536477"/><circle class="port" cx="90" cy="-3" r="3" fill="#536477"/><text class="slot" x="30" y="-10" text-anchor="middle">0</text><text class="slot" x="60" y="-10" text-anchor="middle">1</text><text class="slot" x="90" y="-10" text-anchor="middle">2</text></g><g class="node" id="n9" data-id="9" transform="translate(24,68)" style="opacity: 1;"><path class="box" d="M14,0H106Q120,0 120,14V30Q120,44 106,44H14Q0,44 0,30V14Q0,0 14,0Z" fill="#edf3f7"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>10</tspan><tspan class="node-id"> #9</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#9 10
Type not computed
</title></g><g class="node" id="n10" data-id="10" transform="translate(247,172)" style="opacity: 1;"><path class="box" d="M14,0H106Q120,0 120,14V30Q120,44 106,44H14Q0,44 0,30V14Q0,0 14,0Z" fill="#edf3f7"/><text class="label" text-anchor="middle" x="60" y="18"><tspan><</tspan><tspan class="node-id"> #10</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#10 <
Type not computed
[0] → — DATA
[1] → #4 DATA
[2] → #9 DATA</title><circle class="port" cx="30" cy="-3" r="3" fill="white"/><circle class="port" cx="60" cy="-3" r="3" fill="#536477"/><circle class="port" cx="90" cy="-3" r="3" fill="#536477"/><text class="slot" x="30" y="-10" text-anchor="middle">0</text><text class="slot" x="60" y="-10" text-anchor="middle">1</text><text class="slot" x="90" y="-10" text-anchor="middle">2</text></g><g class="node" id="n11" data-id="11" transform="translate(156,276)" style="opacity: 1;"><path class="box" d="M0,0H240V44H0Z" fill="#fff1c4"/><text class="label" text-anchor="middle" x="120" y="18"><tspan>If</tspan><tspan class="node-id"> #11</tspan></text><text class="type" text-anchor="middle" y="35" x="120"/><title>#11 If
Type not computed
[0] → #1 CTRL
[1] → #10 DATA</title><circle class="port" cx="80" cy="-3" r="3" fill="#536477"/><circle class="port" cx="160" cy="-3" r="3" fill="#536477"/><text class="slot" x="80" y="-10" text-anchor="middle">0</text><text class="slot" x="160" y="-10" text-anchor="middle">1</text></g><g class="node" id="n16" data-id="16" transform="translate(454,68)" style="opacity: 1;"><path class="box" d="M14,0H106Q120,0 120,14V30Q120,44 106,44H14Q0,44 0,30V14Q0,0 14,0Z" fill="#edf3f7"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>2</tspan><tspan class="node-id"> #16</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#16 2
Type not computed
</title></g><g class="node" id="n17" data-id="17" transform="translate(399,172)" style="opacity: 1;"><path class="box" d="M14,0H106Q120,0 120,14V30Q120,44 106,44H14Q0,44 0,30V14Q0,0 14,0Z" fill="#edf3f7"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>*</tspan><tspan class="node-id"> #17</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#17 *
Type not computed
[0] → — DATA
[1] → #4 DATA
[2] → #16 DATA</title><circle class="port" cx="30" cy="-3" r="3" fill="white"/><circle class="port" cx="60" cy="-3" r="3" fill="#536477"/><circle class="port" cx="90" cy="-3" r="3" fill="#536477"/><text class="slot" x="30" y="-10" text-anchor="middle">0</text><text class="slot" x="60" y="-10" text-anchor="middle">1</text><text class="slot" x="90" y="-10" text-anchor="middle">2</text></g><g class="node" id="n18" data-id="18" transform="translate(176,424)" style="opacity: 1;"><path class="box" d="M0,0H120V44H0Z" fill="#fff1c4"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>Return</tspan><tspan class="node-id"> #18</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#18 Return
Type not computed
[0] → #5 CTRL
[1] → #17 DATA</title><circle class="port" cx="40" cy="-3" r="3" fill="#536477"/><circle class="port" cx="80" cy="-3" r="3" fill="#536477"/><text class="slot" x="40" y="-10" text-anchor="middle">0</text><text class="slot" x="80" y="-10" text-anchor="middle">1</text></g><g class="node" id="n20" data-id="20" transform="translate(703,172)" style="opacity: 1;"><path class="box" d="M14,0H106Q120,0 120,14V30Q120,44 106,44H14Q0,44 0,30V14Q0,0 14,0Z" fill="#edf3f7"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>1</tspan><tspan class="node-id"> #20</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#20 1
Type not computed
</title></g><g class="node" id="n21" data-id="21" transform="translate(551,290.6666666666667)" style="opacity: 1;"><path class="box" d="M14,0H106Q120,0 120,14V30Q120,44 106,44H14Q0,44 0,30V14Q0,0 14,0Z" fill="#edf3f7"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>+</tspan><tspan class="node-id"> #21</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#21 +
Type not computed
[0] → — DATA
[1] → #8 DATA
[2] → #20 DATA</title><circle class="port" cx="30" cy="-3" r="3" fill="white"/><circle class="port" cx="60" cy="-3" r="3" fill="#536477"/><circle class="port" cx="90" cy="-3" r="3" fill="#536477"/><text class="slot" x="30" y="-10" text-anchor="middle">0</text><text class="slot" x="60" y="-10" text-anchor="middle">1</text><text class="slot" x="90" y="-10" text-anchor="middle">2</text></g><g class="node" id="n24" data-id="24" transform="translate(328,424)" style="opacity: 1;"><path class="box" d="M0,0H120V44H0Z" fill="#fff1c4"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>Return</tspan><tspan class="node-id"> #24</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#24 Return
Type not computed
[0] → #6 CTRL
[1] → #21 DATA</title><circle class="port" cx="40" cy="-3" r="3" fill="#536477"/><circle class="port" cx="80" cy="-3" r="3" fill="#536477"/><text class="slot" x="40" y="-10" text-anchor="middle">0</text><text class="slot" x="80" y="-10" text-anchor="middle">1</text></g></g><g class="region-heads" style="opacity: 1;"/><g class="shortcuts" style="opacity: 1;"/><g class="peep-ghosts" pointer-events="none"/></g></svg>
|
