revise August 2022 media performance articles

web/public/assets/editorial/2022/media-performance-2022-diagnosis-rollback.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="720" viewBox="0 0 1200 720" role="img" aria-labelledby="title desc">
+  <title id="title">Разбор медиа-проблемы и обратимая правка</title><desc id="desc">Диаграмма делит жалобу на поздний hero, движение layout и спор о приоритете. Каждая ветка получает отдельные факты, после чего выполняется одна обратимая правка и повторяется тот же браузерный сценарий. Диаграмма не измеряет LCP и CLS.</desc>
+  <rect width="1200" height="720" fill="#111827"/><g font-family="Arial, sans-serif"><text x="58" y="72" fill="#f9fafb" font-size="34" font-weight="700">Диагностика: одна гипотеза, одна обратимая правка</text>
+  <rect x="450" y="115" width="300" height="78" rx="14" fill="#7c2d12" stroke="#fdba74" stroke-width="2"/><text x="507" y="163" fill="#fff7ed" font-size="23" font-weight="700">Жалоба о media slot</text>
+  <g fill="#1e3a8a" stroke="#93c5fd" stroke-width="2"><rect x="70" y="275" width="275" height="130" rx="14"/><rect x="462" y="275" width="275" height="130" rx="14"/><rect x="855" y="275" width="275" height="130" rx="14"/></g>
+  <g fill="#f8fafc" font-size="20" font-weight="700"><text x="112" y="318">Late hero</text><text x="502" y="318">Layout movement</text><text x="895" y="318">Priority dispute</text></g><g fill="#cbd5e1" font-size="16"><text x="95" y="350">slot + source mapping</text><text x="95" y="375">browser conditions + trace</text><text x="488" y="350">geometry contract</text><text x="488" y="375">real DOM/layout scenario</text><text x="880" y="350">product intent</text><text x="880" y="375">competing resources + trace</text></g>
+  <rect x="385" y="495" width="430" height="86" rx="14" fill="#14532d" stroke="#86efac" stroke-width="2"/><text x="455" y="530" fill="#f0fdf4" font-size="22" font-weight="700">Одна узкая правка + rollback</text><text x="441" y="558" fill="#dcfce7" font-size="16">geometry ИЛИ source mapping ИЛИ composition</text>
+  <g stroke="#94a3b8" stroke-width="3" fill="none"><path d="M600 193V230H207V275"/><path d="M600 193V275"/><path d="M600 193V230H992V275"/><path d="M207 405V450H600V495"/><path d="M600 405V495"/><path d="M992 405V450H600"/></g><g fill="#94a3b8"><path d="M199 267l8 8-8 8z"/><path d="M592 267l8 8-8 8z"/><path d="M984 267l8 8-8 8z"/><path d="M592 487l8 8-8 8z"/></g>
+  <rect x="145" y="640" width="910" height="45" rx="9" fill="#3f1d2e"/><text x="262" y="669" fill="#fecdd3" font-size="19" font-weight="700">Наблюдение повторяют при тех же условиях; схема не измеряет реальный LCP или CLS</text></g>
+</svg>

web/public/assets/editorial/2022/media-performance-2022-slot-contract.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="700" viewBox="0 0 1200 700" role="img" aria-labelledby="title desc">
+  <title id="title">Контракт media slot: разметка, геометрия, load, decode и внешнее наблюдение</title><desc id="desc">Пять последовательных слоёв отделены от браузерных метрик. Диаграмма указывает, что учебная модель не создаёт DOM, не выполняет сеть и не измеряет LCP или CLS.</desc>
+  <rect width="1200" height="700" fill="#0b1220"/><text x="70" y="78" fill="#f8fafc" font-family="Arial, sans-serif" font-size="34" font-weight="700">Один media slot: сначала факты contract</text>
+  <g font-family="Arial, sans-serif"><g fill="#172554" stroke="#60a5fa" stroke-width="2"><rect x="70" y="155" width="205" height="160" rx="14"/><rect x="315" y="155" width="205" height="160" rx="14"/><rect x="560" y="155" width="205" height="160" rx="14"/><rect x="805" y="155" width="205" height="160" rx="14"/></g><rect x="385" y="405" width="430" height="130" rx="14" fill="#153e36" stroke="#5eead4" stroke-width="2"/>
+  <g fill="#f8fafc" font-size="22" font-weight="700"><text x="93" y="198">1. Markup</text><text x="338" y="198">2. Geometry</text><text x="583" y="198">3. Intent + load</text><text x="828" y="198">4. Decode label</text><text x="485" y="450">5. External observation record</text></g>
+  <g fill="#cbd5e1" font-size="17"><text x="93" y="235">src, alt, variant</text><text x="338" y="235">width × height</text><text x="583" y="235">critical / deferred</text><text x="828" y="235">только teaching token</text><text x="455" y="487">browser report передаётся извне</text><text x="455" y="514">это не измерение метрики</text></g>
+  <g stroke="#94a3b8" stroke-width="3" fill="none"><path d="M275 235H315"/><path d="M520 235H560"/><path d="M765 235H805"/><path d="M908 315V365H600V405"/></g><g fill="#94a3b8"><path d="M307 228l8 7-8 7z"/><path d="M552 228l8 7-8 7z"/><path d="M797 228l8 7-8 7z"/><path d="M593 397l7 8 7-8z"/></g>
+  <rect x="150" y="590" width="900" height="56" rx="10" fill="#3f1d2e"/><text x="224" y="625" fill="#fecdd3" font-family="Arial, sans-serif" font-size="20" font-weight="700">Граница: нет DOM, CSS layout, сети, scheduler, PerformanceObserver, LCP или CLS</text></g>
+</svg>

web/public/assets/editorial/2022/media-performance-2022-state-boundary.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="700" viewBox="0 0 1200 700" role="img" aria-labelledby="title desc">
+  <title id="title">Состояния учебного media contract и граница браузерного наблюдения</title><desc id="desc">Схема показывает, что разметка и геометрия являются независимыми входами, затем идут planned load, declared load и declared decode. Внешнее наблюдение находится за границей fixture и не делает её метрикой LCP или CLS.</desc>
+  <rect width="1200" height="700" fill="#101827"/><text x="60" y="72" fill="#f9fafb" font-family="Arial, sans-serif" font-size="33" font-weight="700">State machine без подмены браузера</text>
+  <g font-family="Arial, sans-serif"><g stroke-width="2"><rect x="70" y="150" width="180" height="95" rx="14" fill="#1e3a8a" stroke="#93c5fd"/><rect x="70" y="300" width="180" height="95" rx="14" fill="#1e3a8a" stroke="#93c5fd"/><rect x="340" y="225" width="190" height="95" rx="14" fill="#4c1d95" stroke="#c4b5fd"/><rect x="620" y="225" width="190" height="95" rx="14" fill="#4c1d95" stroke="#c4b5fd"/><rect x="900" y="225" width="190" height="95" rx="14" fill="#4c1d95" stroke="#c4b5fd"/><rect x="625" y="465" width="285" height="105" rx="14" fill="#134e4a" stroke="#99f6e4"/></g>
+  <g fill="#fff" font-size="20" font-weight="700"><text x="103" y="192">markup declared</text><text x="100" y="342">geometry reserved</text><text x="367" y="267">load planned</text><text x="648" y="267">load declared</text><text x="924" y="267">decode declared</text><text x="660" y="508">external observation</text></g><g fill="#cbd5e1" font-size="16"><text x="100" y="218">src + alt</text><text x="100" y="368">positive dimensions</text><text x="372" y="293">intent only</text><text x="647" y="293">not network event</text><text x="927" y="293">not decode API</text><text x="685" y="536">caller-supplied record</text></g>
+  <g stroke="#a5b4fc" stroke-width="3" fill="none"><path d="M250 197H295V272H340"/><path d="M250 347H295V272"/><path d="M530 272H620"/><path d="M810 272H900"/><path d="M995 320V400H767V465"/></g><g fill="#a5b4fc"><path d="M332 264l8 8-8 8z"/><path d="M612 264l8 8-8 8z"/><path d="M892 264l8 8-8 8z"/><path d="M759 457l8 8-8 8z"/></g>
+  <rect x="90" y="615" width="1020" height="48" rx="10" fill="#3b1c2b"/><text x="183" y="646" fill="#fecdd3" font-size="19" font-weight="700">Fixture проверяет порядок labels; browser, layout, LCP и CLS остаются за её границей</text></g>
+</svg>