<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="720" viewBox="0 0 1200 720" role="img" aria-label="TQUANT 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="#C53A79"/></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: #FDF0F6; 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">TQUANT</text>

<text x="40" y="72" class="subtitle">Quantize a tile (e.g. FP32 to FP8) producing exponent/scaling/max outputs.</text>

<text x="40" y="92" class="meta">Template: complex</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="140" class="subtitle" text-anchor="middle" fill="#C53A79">dst, exp, max, scaling = quantize(src, mode)</text>

<text x="600" y="168" class="tileLabel" text-anchor="middle">src (fp32)</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" />

<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 cellHL" stroke="#C53A79" />

<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="#C53A79" />

<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="410" y="350" class="tileLabel" text-anchor="middle">exp tile</text>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<text x="600" y="350" class="tileLabel" text-anchor="middle">dst (quant)</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" />

<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="#C53A79" />

<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" />

<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" />

<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" />

<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="#C53A79" />

<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="790" y="394" class="tileLabel" text-anchor="middle">max/scale</text>

<rect x="735" y="404" width="110" height="22" class="tileBorder" />

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

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

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

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

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

<rect x="735" y="404" width="88" height="22" class="validBox" stroke="#C53A79" />

<text x="739" y="422" class="axisText">Rv</text>

<text x="819" y="416" class="axisText" text-anchor="end">Cv</text>

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

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

<path d="M 600 300 L 600 336 L 790 336 L 790 392" class="arrow" stroke="#C53A79" 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">max = max(abs(src))</tspan>

  <tspan x="56" dy="16">scaling = compute_scaling(max, mode)</tspan>

  <tspan x="56" dy="16">for r,c in valid(src):</tspan>

  <tspan x="56" dy="16">  (dst[r,c], exp[r,c]) = quantize(src[r,c], scaling, mode)</tspan>

</text>

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

</svg>