<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="720" viewBox="0 0 1200 720" role="img" aria-label="TCOLEXPAND tile operation diagram">

<defs>

  <marker id="arrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L0,8 L8,4 z" fill="#C46A1C"/></marker>

  <marker id="axisArrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L0,8 L8,4 z" fill="#64748b"/></marker>

</defs>

<style>

svg { font-family: Arial, Helvetica, sans-serif; }

.title { font-size: 30px; font-weight: 700; fill: #0f172a; }

.subtitle { font-size: 14px; fill: #334155; }

.meta { font-size: 12px; fill: #64748b; }

.frame { fill: white; }

.panel { fill: #FFF4E8; stroke: #e2e8f0; stroke-width: 1.5; rx: 14; }

.tileLabel { font-size: 14px; font-weight: 700; fill: #0f172a; }

.tileBorder { fill: none; stroke: #475569; stroke-width: 1.5; }

.cell { fill: #ffffff; stroke: #94a3b8; stroke-width: 1; }

.cellMasked { fill: #e2e8f0; }

.cellHL { stroke-width: 2; }

.cellText { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 10px; fill: #0f172a; }

.arrow { stroke-width: 1.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }

.axisLine { stroke: #64748b; stroke-width: 1.5; fill: none; }

.axisText { font-size: 10px; fill: #64748b; font-weight: 700; }

.opCircle { fill: #ffffff; stroke-width: 2; }

.opRect { fill: #ffffff; stroke-width: 2; }

.opText { font-size: 10px; font-weight: 800; fill: #0f172a; }

.procBox { fill: #f8fafc; stroke: #cbd5e1; stroke-width: 1.5; rx: 12; }

.procTitle { font-size: 14px; font-weight: 700; fill: #0f172a; }

.procText { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 12px; fill: #0f172a; }

.smallLabel { font-size: 12px; fill: #334155; }

.scalarBox { fill: #ffffff; stroke: #cbd5e1; stroke-width: 1.5; }

.scalarValue { font-size: 16px; font-weight: 700; }

.validBox { fill: none; stroke-width: 2; stroke-dasharray: 6 4; }

</style>

<rect x="0" y="0" width="1200" height="720" class="frame" />

<rect x="24" y="24" width="1152" height="672" class="panel" />

<text x="40" y="46" class="title">TCOLEXPAND</text>

<text x="40" y="72" class="subtitle">Broadcast the first element of each source column across the destination column.</text>

<text x="40" y="92" class="meta">Template: reduce_expand</text>

<text x="1160" y="92" class="meta" text-anchor="end">Legend: outline=example; dashed=valid rows/cols (Rv,Cv); shaded=masked; r down / c right; ortho arrows=dataflow</text>

<line x1="36" y1="104" x2="1164" y2="104" stroke="#e2e8f0" stroke-width="1.5" />

<text x="600" y="168" class="tileLabel" text-anchor="middle">src</text>

<rect x="545" y="178" width="110" height="110" class="tileBorder" />

<rect x="545" y="178" width="22" height="22" class="cell" />

<rect x="567" y="178" width="22" height="22" class="cell" />

<rect x="589" y="178" width="22" height="22" class="cell cellHL" stroke="#C46A1C" />

<rect x="611" y="178" width="22" height="22" class="cell" />

<rect x="633" y="178" width="22" height="22" class="cell cellMasked" />

<rect x="545" y="200" width="22" height="22" class="cell" />

<rect x="567" y="200" width="22" height="22" class="cell" />

<rect x="589" y="200" width="22" height="22" class="cell" />

<rect x="611" y="200" width="22" height="22" class="cell" />

<rect x="633" y="200" width="22" height="22" class="cell cellMasked" />

<rect x="545" y="222" width="22" height="22" class="cell" />

<rect x="567" y="222" width="22" height="22" class="cell" />

<rect x="589" y="222" width="22" height="22" class="cell" />

<rect x="611" y="222" width="22" height="22" class="cell" />

<rect x="633" y="222" width="22" height="22" class="cell cellMasked" />

<rect x="545" y="244" width="22" height="22" class="cell" />

<rect x="567" y="244" width="22" height="22" class="cell" />

<rect x="589" y="244" width="22" height="22" class="cell" />

<rect x="611" y="244" width="22" height="22" class="cell" />

<rect x="633" y="244" width="22" height="22" class="cell cellMasked" />

<rect x="545" y="266" width="22" height="22" class="cell cellMasked" />

<rect x="567" y="266" width="22" height="22" class="cell cellMasked" />

<rect x="589" y="266" width="22" height="22" class="cell cellMasked" />

<rect x="611" y="266" width="22" height="22" class="cell cellMasked" />

<rect x="633" y="266" width="22" height="22" class="cell cellMasked" />

<rect x="545" y="178" width="88" height="88" class="validBox" stroke="#C46A1C" />

<text x="549" y="262" class="axisText">Rv</text>

<text x="629" y="190" class="axisText" text-anchor="end">Cv</text>

<path d="M 555 188 L 589 188" class="axisLine" marker-end="url(#axisArrow)" />

<path d="M 555 188 L 555 222" class="axisLine" marker-end="url(#axisArrow)" />

<text x="593" y="192" class="axisText">c</text>

<text x="553" y="226" class="axisText" text-anchor="end">r</text>

<text x="600" y="350" class="tileLabel" text-anchor="middle">dst</text>

<rect x="545" y="360" width="110" height="110" class="tileBorder" />

<rect x="545" y="360" width="22" height="22" class="cell" />

<rect x="567" y="360" width="22" height="22" class="cell" />

<rect x="589" y="360" width="22" height="22" class="cell cellHL" stroke="#C46A1C" />

<rect x="611" y="360" width="22" height="22" class="cell" />

<rect x="633" y="360" width="22" height="22" class="cell cellMasked" />

<rect x="545" y="382" width="22" height="22" class="cell" />

<rect x="567" y="382" width="22" height="22" class="cell" />

<rect x="589" y="382" width="22" height="22" class="cell cellHL" stroke="#C46A1C" />

<rect x="611" y="382" width="22" height="22" class="cell" />

<rect x="633" y="382" width="22" height="22" class="cell cellMasked" />

<rect x="545" y="404" width="22" height="22" class="cell" />

<rect x="567" y="404" width="22" height="22" class="cell" />

<rect x="589" y="404" width="22" height="22" class="cell cellHL" stroke="#C46A1C" />

<rect x="611" y="404" width="22" height="22" class="cell" />

<rect x="633" y="404" width="22" height="22" class="cell cellMasked" />

<rect x="545" y="426" width="22" height="22" class="cell" />

<rect x="567" y="426" width="22" height="22" class="cell" />

<rect x="589" y="426" width="22" height="22" class="cell cellHL" stroke="#C46A1C" />

<rect x="611" y="426" width="22" height="22" class="cell" />

<rect x="633" y="426" width="22" height="22" class="cell cellMasked" />

<rect x="545" y="448" width="22" height="22" class="cell cellMasked" />

<rect x="567" y="448" width="22" height="22" class="cell cellMasked" />

<rect x="589" y="448" width="22" height="22" class="cell cellMasked cellHL" stroke="#C46A1C" />

<rect x="611" y="448" width="22" height="22" class="cell cellMasked" />

<rect x="633" y="448" width="22" height="22" class="cell cellMasked" />

<rect x="545" y="360" width="88" height="88" class="validBox" stroke="#C46A1C" />

<text x="549" y="444" class="axisText">Rv</text>

<text x="629" y="372" class="axisText" text-anchor="end">Cv</text>

<path d="M 555 370 L 589 370" class="axisLine" marker-end="url(#axisArrow)" />

<path d="M 555 370 L 555 404" class="axisLine" marker-end="url(#axisArrow)" />

<text x="593" y="374" class="axisText">c</text>

<text x="553" y="408" class="axisText" text-anchor="end">r</text>

<text x="600" y="140" class="subtitle" text-anchor="middle" fill="#C46A1C">dst[r,c] = src[0,c]</text>

<path d="M 600 300 L 600 348" class="arrow" stroke="#C46A1C" marker-end="url(#arrow)" />

<rect x="40" y="502" width="1120" height="194" class="procBox" />

<text x="56" y="528" class="procTitle">Procedure (conceptual)</text>

<text x="56" y="554" class="procText" xml:space="preserve">

  <tspan x="56" dy="0">for c in 0..Cv-1:</tspan>

  <tspan x="56" dy="16">  v = src[0,c]</tspan>

  <tspan x="56" dy="16">  for r in 0..Rv-1:</tspan>

  <tspan x="56" dy="16">    dst[r,c] = v</tspan>

</text>

<text x="56" y="680" class="meta">Note: semantics apply to the valid region unless stated otherwise.</text>

</svg>