Add store header OCR and market observation outbox

index.html

@@ -48,7 +48,7 @@
             <div>
               <p class="eyebrow">Образец интерфейса</p>
               <h2 id="calibration-title">Калибровка</h2>
-              <p>Отметь окно продажи, верхнее имя торговца и точные строки всплывающего описания предмета.</p>
+              <p>Отметь торговое окно, его заголовок и точные строки всплывающего описания предмета.</p>
             </div>
             <div class="button-row">
               <select id="calibration-source" aria-label="Окно для снимка"></select>
@@ -60,6 +60,23 @@
             </div>
           </div>
 
+          <details class="calibration-guide" open>
+            <summary>Как связаны области калибровки</summary>
+            <div class="calibration-guide__content">
+              <ol>
+                <li><strong>Маркер магазина</strong><span>Ищется по всему кадру. Лучше выбрать стабильные `Adena` и `Confirm`, не включая числа.</span></li>
+                <li><strong>Заголовок магазина</strong><span>Строка `Private Store(Buy/Sell) - имя` даёт тип сделки и торговца. Она привязана к найденному маркеру.</span></li>
+                <li><strong>Зона tooltip</strong><span>Тоже привязана к маркеру, поэтому перемещается вместе с торговым окном.</span></li>
+                <li><strong>Якорь Price :</strong><span>Ищется внутри зоны tooltip. Он позволяет самому tooltip перемещаться при наведении на разные иконки.</span></li>
+                <li><strong>Название и цена</strong><span>Привязаны к найденному `Price :` и читаются из двух точных строк.</span></li>
+              </ol>
+              <div class="pipeline-map" aria-label="Последовательность распознавания">
+                <span>Кадр</span><b>→</b><span>Магазин</span><b>→</b><span>Тип + торговец</span>
+                <i>и</i><span>Tooltip</span><b>→</b><span>Название + цена</span>
+              </div>
+            </div>
+          </details>
+
           <div class="calibration-layout">
             <div class="canvas-stage">
               <div id="canvas-empty" class="empty-state">
@@ -73,8 +90,8 @@
               <div class="field-stack">
                 <label for="region-type">Что выделяем</label>
                 <select id="region-type">
-                  <option value="saleAnchor">Маркер продажи</option>
-                  <option value="merchant">Имя торговца</option>
+                  <option value="saleAnchor">Маркер магазина</option>
+                  <option value="storeHeader">Заголовок магазина</option>
                   <option value="tooltipSearch">Зона поиска tooltip</option>
                   <option value="tooltipAnchor">Якорь Price :</option>
                   <option value="itemName">Название предмета</option>
@@ -82,7 +99,7 @@
                 </select>
               </div>
 
-              <p id="draw-hint" class="hint">Выдели постоянный нижний фрагмент окна продажи, например подпись Adena и кнопку Confirm. Числа лучше не включать.</p>
+              <p id="draw-hint" class="hint">Выдели постоянный нижний фрагмент торгового окна, например подпись Adena и кнопку Confirm. Числа лучше не включать.</p>
 
               <div class="field-stack">
                 <div class="range-label">
@@ -102,6 +119,7 @@
 
               <div class="inspector__actions">
                 <button id="save-calibration" class="button button--primary" type="button">Сохранить</button>
+                <button id="test-calibration" class="button" type="button" disabled>Проверить на скриншоте</button>
                 <button id="clear-calibration" class="button button--quiet" type="button">Сбросить</button>
               </div>
             </aside>