Support multi-screenshot calibration and cached shop context

index.html

@@ -13,8 +13,13 @@
           <p class="eyebrow">Локальный прототип</p>
           <h1>L2 Market Parser</h1>
         </div>
-        <div id="global-status" class="status" data-tone="neutral" role="status" aria-live="polite">
-          Готов к работе
+        <div class="status-stack">
+          <div id="global-status" class="status" data-tone="neutral" role="status" aria-live="polite">
+            Готов к работе
+          </div>
+          <div id="sync-status" class="sync-status" data-tone="neutral" role="status" aria-live="polite">
+            Синхронизация: проверяется
+          </div>
         </div>
       </header>
 
@@ -54,18 +59,20 @@
               <select id="calibration-source" aria-label="Окно для снимка"></select>
               <button id="capture-reference" class="button" type="button">Снимок из окна</button>
               <label class="button file-button">
-                Загрузить скриншот
-                <input id="reference-file" type="file" accept="image/*" />
+                Загрузить скриншоты
+                <input id="reference-file" type="file" accept="image/*" multiple />
               </label>
             </div>
           </div>
 
+          <div id="reference-list" class="reference-strip" aria-label="Снимки калибровки" hidden></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>Заголовок магазина</strong><span>Строка `Private Store(Buy/Sell) - имя` запоминается до закрытия торгового окна. Если tooltip её перекрыл, используется последний распознанный магазин.</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>
@@ -74,6 +81,7 @@
                 <span>Кадр</span><b>→</b><span>Магазин</span><b>→</b><span>Тип + торговец</span>
                 <i>и</i><span>Tooltip</span><b>→</b><span>Название + цена</span>
               </div>
+              <p>Снимки могут иметь разный размер, а торговое окно может находиться в разных местах. На первом выдели маркер и видимый заголовок. На втором калибратор найдёт маркер по всему кадру, после чего выдели tooltip и его строки.</p>
             </div>
           </details>
 
@@ -119,7 +127,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="test-calibration" class="button" type="button" disabled>Проверить снимки</button>
                 <button id="clear-calibration" class="button button--quiet" type="button">Сбросить</button>
               </div>
             </aside>