fix: единая загрузка примеров и стабильный первый кадр (api#301)

components/browser-upload.php

@@ -3,6 +3,8 @@
 (() => {
     if (window.ZoomzillaUpload) return;
     const android = /Android/i.test(navigator.userAgent);
+    const mobile = android || /iPhone|iPad|iPod/i.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+    document.documentElement.dataset.uploadDevice = android ? 'android' : (mobile ? 'mobile' : 'desktop');
     let uploadQueue = Promise.resolve();
     window.ZoomzillaUpload = {
         // Резерв из пяти точек задаётся CSS: слово и соседняя иконка не двигаются.
@@ -22,7 +24,6 @@
             output.textContent = '.'.repeat(dots);
         },
         bindPicker(form, mainInput, fullAccept, onFiles) {
-            const mobile = android || /iPhone|iPad|iPod/i.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
             if (mobile) form.dataset.mobileUpload = '1';
             const sync = () => {
                 const input = typeof mainInput === 'function' ? mainInput() : mainInput;

components/example-loader.php

@@ -0,0 +1,227 @@
+<?php
+/** Общая inline-логика Index/Preland: синхронная копия в обоих репозиториях. */
+return <<<'JS'
+window.ZoomzillaExamples = {
+    attach(mount) {
+        const root = document.getElementById('examples');
+        if (!root) return;
+        const element = root.querySelector('#image-compare');
+        const visual = root.querySelector('[data-examples-visual]');
+        const retry = root.querySelector('[data-examples-retry]');
+        const items = [...root.querySelectorAll('.image-examples-item')];
+        const media = window.matchMedia('(max-width: 767.98px)');
+        const images = new Map();
+        const imageAttempts = new Map();
+        const pairs = new Map();
+        const failed = new Set();
+        const retrying = new Set();
+        const attemptedAt = new Map();
+        let generation = 0;
+        let active = 1;
+        let locked = true;
+        let mounted = false;
+        let backgroundGeneration = 0;
+        let retryQueue = Promise.resolve();
+        const device = () => media.matches ? 'mob' : 'desk';
+        const itemNumber = item => Number(item.dataset.example);
+        const pairKey = (number, variant) => variant + ':' + number;
+
+        window.examples = {
+            el: root,
+            hide() { window.scrollTo(0, 0); root.style.display = 'none'; },
+            show() { root.style.display = ''; },
+            setTitle(html) { const title = document.getElementById('form-title'); if (title) title.innerHTML = html; }
+        };
+
+        function loadImage(url, priority = 'low') {
+            if (images.has(url)) return images.get(url);
+            const promise = new Promise((resolve, reject) => {
+                const image = new Image();
+                image.decoding = 'async';
+                image.fetchPriority = priority;
+                const timer = window.setTimeout(() => finish(new Error('example_timeout')), 15000);
+                let finished = false;
+                function finish(error) {
+                    if (finished) return;
+                    finished = true;
+                    window.clearTimeout(timer);
+                    image.onload = image.onerror = null;
+                    if (error) { imageAttempts.set(url, (imageAttempts.get(url) || 0) + 1); reject(error); }
+                    else resolve(image);
+                }
+                image.onerror = () => finish(new Error('example_image_failed'));
+                image.onload = async () => {
+                    try {
+                        if (!image.naturalWidth) throw new Error('example_image_empty');
+                        if (image.decode) await image.decode();
+                        finish();
+                    } catch (error) { finish(error); }
+                };
+                // WebKit может запомнить сетевой отказ URL: повтору нужен новый запрос,
+                // при этом успешно декодированные изображения остаются в нашем кеше.
+                const attempt = imageAttempts.get(url) || 0;
+                image.src = attempt ? url + (url.includes('?') ? '&' : '?') + '_example_retry=' + attempt : url;
+            });
+            images.set(url, promise);
+            promise.catch(() => { if (images.get(url) === promise) images.delete(url); });
+            return promise;
+        }
+
+        async function loadCandidates(item, role, variant, priority) {
+            const suffix = variant === 'mob' ? 'Mob' : '';
+            const candidates = [item.dataset[role + suffix]];
+            if (role === 'thumb') {
+                for (const format of ['Webp', 'Jpg']) {
+                    const fallback = item.dataset['thumb' + suffix + format];
+                    if (fallback) candidates.push(fallback);
+                }
+            }
+            let failure;
+            for (const url of candidates) {
+                try { return await loadImage(url, priority); } catch (error) { failure = error; }
+            }
+            throw failure;
+        }
+
+        async function preparePair(item, variant, priority = 'low') {
+            const key = pairKey(itemNumber(item), variant);
+            if (pairs.has(key)) return pairs.get(key);
+            const pair = await Promise.all([
+                loadCandidates(item, 'source', variant, priority),
+                loadCandidates(item, 'result', variant, priority)
+            ]);
+            pairs.set(key, pair);
+            failed.delete(key);
+            return pair;
+        }
+
+        function replaceImage(previous, next) {
+            if (previous === next) return;
+            for (const attribute of [...previous.attributes]) {
+                if (!['src', 'srcset', 'sizes'].includes(attribute.name)) next.setAttribute(attribute.name, attribute.value);
+            }
+            previous.replaceWith(next);
+        }
+
+        function refreshItems() {
+            for (const item of items) {
+                const ready = !locked && pairs.has(pairKey(itemNumber(item), device()));
+                item.setAttribute('aria-disabled', String(!ready));
+                item.tabIndex = ready ? 0 : -1;
+                item.classList.toggle('active', itemNumber(item) === active);
+            }
+        }
+
+        function commitPair(number, pair) {
+            // Обе декодированные DOM-картинки заменяются в одном JS-такте, без промежуточного paint.
+            replaceImage(element.querySelector('#image-compare-source'), pair[0]);
+            replaceImage(element.querySelector('#image-compare-result'), pair[1]);
+            active = number;
+            if (!mounted) { mount(element); mounted = true; }
+            element.dispatchEvent(new Event('examples:images'));
+            refreshItems();
+        }
+
+        function select(item) {
+            const number = itemNumber(item);
+            const pair = pairs.get(pairKey(number, device()));
+            if (locked) return;
+            if (!pair) { retryFailed(item); return; }
+            if (number === active) return;
+            commitPair(number, pair);
+        }
+
+        async function retryFailed(item) {
+            const variant = device();
+            const key = pairKey(itemNumber(item), variant);
+            if (locked || backgroundGeneration === generation || !failed.has(key) || retrying.has(key) || Date.now() - (attemptedAt.get(key) || 0) < 1000) return;
+            const token = generation;
+            retrying.add(key);
+            attemptedAt.set(key, Date.now());
+            const request = retryQueue.then(() => {
+                if (token === generation && !locked) return preparePair(item, variant);
+            });
+            retryQueue = request.catch(() => {});
+            try { await request; } catch (_) { /* Сеть может всё ещё быть недоступна. */ }
+            finally { retrying.delete(key); if (!locked && device() === variant) refreshItems(); }
+        }
+
+        for (const item of items) {
+            item.setAttribute('role', 'button');
+            item.addEventListener('click', event => { event.preventDefault(); select(item); });
+            // Повтор не выбирает неготовую пару и не меняет оформление миниатюры.
+            item.addEventListener('pointerenter', () => retryFailed(item));
+            item.addEventListener('touchstart', () => retryFailed(item), {passive: true});
+            item.addEventListener('keydown', event => {
+                if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); select(item); }
+            });
+        }
+        // Сравнение заблокировано также при смене device-варианта, пока новая пара не готова.
+        for (const name of ['mousedown', 'mousemove', 'touchstart', 'touchmove', 'pointerdown', 'pointermove', 'keydown']) {
+            element.addEventListener(name, event => { if (locked) event.stopImmediatePropagation(); }, true);
+        }
+
+        async function run() {
+            const token = ++generation;
+            const variant = device();
+            locked = true;
+            root.dataset.examplesState = 'loading';
+            root.setAttribute('aria-busy', 'true');
+            retry.hidden = true;
+            refreshItems();
+            try {
+                const item = items.find(item => itemNumber(item) === active);
+                const pair = await preparePair(item, variant, 'high');
+                if (token !== generation) return;
+                // Только после выбранной пары разрешены запросы всех миниатюр.
+                const thumbs = await Promise.all(items.map(item => loadCandidates(item, 'thumb', variant, 'auto')));
+                if (document.fonts) await new Promise((resolve, reject) => {
+                    const timer = window.setTimeout(() => reject(new Error('example_font_timeout')), 15000);
+                    document.fonts.ready.then(() => { window.clearTimeout(timer); resolve(); }, error => { window.clearTimeout(timer); reject(error); });
+                });
+                if (token !== generation) return;
+                items.forEach((item, index) => replaceImage(item.querySelector('.image-examples-image img'), thumbs[index]));
+                commitPair(active, pair);
+                locked = false;
+                visual.style.visibility = 'visible';
+                visual.inert = false;
+                visual.removeAttribute('aria-hidden');
+                root.dataset.examplesState = 'ready';
+                root.setAttribute('aria-busy', 'false');
+                refreshItems();
+                // Остальные пары последовательно; две стороны одной пары — параллельно.
+                backgroundGeneration = token;
+                for (const next of items) {
+                    if (token !== generation) return;
+                    if (itemNumber(next) === active) continue;
+                    try { await preparePair(next, variant); } catch (_) { failed.add(pairKey(itemNumber(next), variant)); }
+                    if (token === generation) refreshItems();
+                }
+                if (backgroundGeneration === token) backgroundGeneration = 0;
+                // Один тихий повтор после очереди; затем — по возврату сети или обращению к миниатюре.
+                if (token === generation && items.some(item => failed.has(pairKey(itemNumber(item), variant)))) {
+                    await new Promise(resolve => window.setTimeout(resolve, 1000));
+                    for (const next of items) {
+                        if (token !== generation) return;
+                        await retryFailed(next);
+                    }
+                }
+            } catch (_) {
+                if (token !== generation) return;
+                root.dataset.examplesState = 'error';
+                root.setAttribute('aria-busy', 'false');
+                retry.hidden = false;
+            }
+        }
+        retry.addEventListener('click', run);
+        window.addEventListener('online', () => {
+            if (root.dataset.examplesState === 'error') run();
+            else { attemptedAt.clear(); items.forEach(retryFailed); }
+        });
+        media.addEventListener('change', run);
+        refreshItems();
+        if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', run, {once: true});
+        else run();
+    }
+};
+JS;

components/examples.php

@@ -1,101 +1,39 @@
 <?php
-
 $demoBasePath = rtrim($assetsUriPrefix, '/') . "/{$indpic}";
 $demoLocalPath = __DIR__ . "/../{$indpic}";
-
 $getAssetUrl = function (int $number, string $device, string $role) use ($demoBasePath, $demoLocalPath): string {
-	$relativePath = sprintf('%02d', $number) . "_{$device}_{$role}.avif";
-    $fullPath = $demoLocalPath . '/' . ltrim($relativePath, '/');
+    $relativePath = sprintf('%02d', $number) . "_{$device}_{$role}.avif";
+    $fullPath = $demoLocalPath . '/' . $relativePath;
     $version = file_exists($fullPath) ? filemtime($fullPath) : '1';
-    return $demoBasePath . '/' . ltrim($relativePath, '/') . '?v=' . $version;
+    return $demoBasePath . '/' . $relativePath . '?v=' . $version;
 };
-
 $labelBefore = Yii::t('app', 'До');
-$labelAfter  = Yii::t('app', 'После');
-
-$sourceMob  = $getAssetUrl(1, 'mob', '1-source');
-$sourceOrig = $getAssetUrl(1, 'desk', '1-source');
-
-$resultMob  = $getAssetUrl(1, 'mob', '2-result');
-$resultOrig = $getAssetUrl(1, 'desk', '2-result');
-
+$labelAfter = Yii::t('app', 'После');
 ?>
-
-<div id="examples">
-
-    <div class="image-compare" id="image-compare">
-        <img src="<?= $sourceMob ?>"
-             srcset="<?= $sourceMob ?> 768w, <?= $sourceOrig ?> 1696w"
-             sizes="(max-width: 767.98px) 100vw, 728px"
-             id="image-compare-source"
-             fetchpriority="high"
-             loading="eager"
-             width="728"
-             height="395"
-             alt="<?= htmlspecialchars($labelBefore) ?>">
-
-        <img src="<?= $resultMob ?>"
-             srcset="<?= $resultMob ?> 768w, <?= $resultOrig ?> 1696w"
-             sizes="(max-width: 767.98px) 100vw, 728px"
-             id="image-compare-result"
-             fetchpriority="high"
-             loading="eager"
-             width="728"
-             height="395"
-             alt="<?= htmlspecialchars($labelAfter) ?>">
-    </div>
-
-    <div class="image-examples">
-        <div class="image-examples-label"><?= Yii::t('app', 'Примеры улучшения') ?></div>
-        <div class="image-examples-list">
-            <?php for ($i = 1; $i <= 5; $i++): 
-                $thumbMob  = $getAssetUrl($i, 'mob', '3-thumb');
-                $thumbOrig = $getAssetUrl($i, 'desk', '3-thumb');
-            ?>
-                <div class="image-examples-item <?= $i === 1 ? 'active' : '' ?>" 
-                     data-index="<?= $i ?>"
-                     data-source="<?= $getAssetUrl($i, 'desk', '1-source') ?>"
-                     data-result="<?= $getAssetUrl($i, 'desk', '2-result') ?>"
-                     data-source-mob="<?= $getAssetUrl($i, 'mob', '1-source') ?>"
-                     data-result-mob="<?= $getAssetUrl($i, 'mob', '2-result') ?>">
-                    <div class="image-examples-image">
-                        <?php if ($i === 1): ?>
-                            <picture>
-                                <source media="(max-width: 767.98px)" srcset="<?= $thumbMob ?>">
-                                <img src="<?= $thumbOrig ?>" width="53" height="53" alt="Example 1">
-                            </picture>
-                        <?php else: ?>
-                            <picture class="deferred-picture">
-                                <source media="(max-width: 767.98px)" data-srcset="<?= $thumbMob ?>">
-                                <img data-src="<?= $thumbOrig ?>" width="53" height="53" alt="Example <?= $i ?>" class="deferred-thumb">
-                            </picture>
-                        <?php endif; ?>
-                    </div>
+<div id="examples" data-examples-state="loading" aria-busy="true">
+    <div data-examples-visual style="visibility:hidden" aria-hidden="true" inert>
+        <div class="image-compare" id="image-compare">
+            <img id="image-compare-source" width="728" height="395" alt="<?= htmlspecialchars($labelBefore) ?>">
+            <img id="image-compare-result" width="728" height="395" alt="<?= htmlspecialchars($labelAfter) ?>">
+        </div>
+        <div class="image-examples">
+            <div class="image-examples-label"><?= Yii::t('app', 'Примеры улучшения') ?></div>
+            <div class="image-examples-list">
+                <?php for ($i=1; $i<=5; $i++): ?>
+                <div class="image-examples-item <?= $i===1 ? 'active' : '' ?>" data-example="<?= $i ?>" data-index="<?= $i ?>"
+                     data-source="<?= $getAssetUrl($i, 'desk', '1-source') ?>" data-result="<?= $getAssetUrl($i, 'desk', '2-result') ?>"
+                     data-source-mob="<?= $getAssetUrl($i, 'mob', '1-source') ?>" data-result-mob="<?= $getAssetUrl($i, 'mob', '2-result') ?>"
+                     data-thumb="<?= $getAssetUrl($i, 'desk', '3-thumb') ?>" data-thumb-mob="<?= $getAssetUrl($i, 'mob', '3-thumb') ?>" aria-disabled="true" tabindex="-1">
+                    <div class="image-examples-image"><picture><img width="100" height="100" alt="Example <?= $i ?>"></picture></div>
                 </div>
-            <?php endfor; ?>
+                <?php endfor; ?>
+            </div>
         </div>
     </div>
-
+    <button type="button" class="btn button-outline examples-retry" data-examples-retry hidden><?= Yii::t('app', 'Повторить') ?></button>
 </div>
-
 <script>
-    const examples = {
-        el: document.getElementById('examples'),
-        titleEl: document.getElementById('form-title'),
-
-        hide() {
-            window.scrollTo(0, 0);
-            window.scrollTo({ top: 0, behavior: 'instant' });
-            if (this.el) this.el.style.display = 'none';
-        },
-        show() {
-            if (this.el) this.el.style.display = '';
-        },
-        setTitle(html) {
-            if (this.titleEl) this.titleEl.innerHTML = html;
-        }
-    };
-
+<?= require __DIR__ . '/example-loader.php' ?>
     function setupNativeCompare(element, labelBefore, labelAfter) {
         if (!element || element.classList.contains('native-icv') || element.classList.contains('icv')) return null;
 
@@ -132,15 +70,18 @@ $resultOrig = $getAssetUrl(1, 'desk', '2-result');
         element.appendChild(lblBefore);
         element.appendChild(lblAfter);
 
+        let sliderPercent = 50;
+        element.addEventListener('examples:images', () => updateSlider(sliderPercent));
         function updateSlider(percent) {
+            sliderPercent = percent;
             percent = Math.max(0, Math.min(100, percent));
             beforeWrap.style.width = percent + '%';
             handle.style.left = percent + '%';
-            sourceImg.style.width = element.clientWidth + 'px';
+            element.querySelector('#image-compare-source').style.width = element.clientWidth + 'px';
         }
 
         window.addEventListener('resize', () => {
-            sourceImg.style.width = element.clientWidth + 'px';
+            element.querySelector('#image-compare-source').style.width = element.clientWidth + 'px';
         });
 
         let isDragging = false;
@@ -175,140 +116,10 @@ $resultOrig = $getAssetUrl(1, 'desk', '2-result');
 
         updateSlider(50);
 
-        return {
-            setImages(sourceUrl, resultUrl) {
-                sourceImg.removeAttribute('srcset');
-                resultImg.removeAttribute('srcset');
-                sourceImg.src = sourceUrl;
-                resultImg.src = resultUrl;
-            }
-        };
     }
 
-    function initCompareViewer() {
-        const element = document.getElementById('image-compare');
-        const beforeTxt = '<?= addslashes($labelBefore) ?>';
-        const afterTxt = '<?= addslashes($labelAfter) ?>';
 
-        if (element && typeof ImageCompare !== 'undefined') {
-            const options = {
-                controlColor: "#FFFFFF",
-                controlShadow: true,
-                addCircle: true,
-                addCircleBlur: true,
-                showLabels: true,
-                labelOptions: { before: beforeTxt, after: afterTxt, onHover: false },
-                smoothing: true,
-                smoothingAmount: 100,
-                hoverStart: false,
-                verticalMode: false,
-                startingPoint: 50,
-                fluidMode: false
-            };
-            window.icvInstance = new ImageCompare(element, options).mount();
-        } else if (element) {
-            window.nativeCompareInstance = setupNativeCompare(element, beforeTxt, afterTxt);
-        }
-
-        const exampleItems = document.querySelectorAll('.image-examples-item');
-        exampleItems.forEach(item => {
-            item.onclick = function() {
-                const isMobile = window.innerWidth < 768;
-                // На мобильном берем source_mob, на ПК — полный оригинал
-                const source = (isMobile && this.getAttribute('data-source-mob')) 
-                    ? this.getAttribute('data-source-mob') 
-                    : this.getAttribute('data-source');
-                const result = (isMobile && this.getAttribute('data-result-mob')) 
-                    ? this.getAttribute('data-result-mob') 
-                    : this.getAttribute('data-result');
-
-                if (window.icvInstance) {
-                    window.icvInstance.images.start.element.removeAttribute('srcset');
-                    window.icvInstance.images.end.element.removeAttribute('srcset');
-                    window.icvInstance.images.start.element.src = source;
-                    window.icvInstance.images.end.element.src = result;
-                } else if (window.nativeCompareInstance) {
-                    window.nativeCompareInstance.setImages(source, result);
-                } else {
-                    const sourceEl = document.getElementById('image-compare-source');
-                    const resultEl = document.getElementById('image-compare-result');
-                    if (sourceEl) {
-                        sourceEl.removeAttribute('srcset');
-                        sourceEl.src = source;
-                    }
-                    if (resultEl) {
-                        resultEl.removeAttribute('srcset');
-                        resultEl.src = result;
-                    }
-                }
-
-                exampleItems.forEach(el => el.classList.remove('active'));
-                this.classList.add('active');
-            };
-        });
-    }
-
-    function initStrictImagePipeline() {
-        initCompareViewer();
-
-        const preloadUrl = (url) => {
-            return new Promise(resolve => {
-                const img = new Image();
-                img.onload = img.onerror = resolve;
-                img.src = url;
-            });
-        };
-
-        const deferredPics = document.querySelectorAll('.deferred-picture');
-        const thumbPromises = [];
-
-        deferredPics.forEach(pic => {
-            const source = pic.querySelector('source');
-            const img = pic.querySelector('img');
-
-            if (source && source.getAttribute('data-srcset')) {
-                source.srcset = source.getAttribute('data-srcset');
-            }
-            if (img && img.getAttribute('data-src')) {
-                const p = new Promise(resolve => {
-                    img.onload = img.onerror = resolve;
-                    img.src = img.getAttribute('data-src');
-                });
-                thumbPromises.push(p);
-            }
-        });
-
-        Promise.all(thumbPromises).then(() => {
-            const queue = [2, 3, 4, 5];
-
-            async function loadSequentially() {
-                const isMobile = window.innerWidth < 768;
-                for (const num of queue) {
-                    const item = document.querySelector(`.image-examples-item[data-index="${num}"]`);
-                    if (!item) continue;
-
-                    const s = (isMobile && item.getAttribute('data-source-mob')) 
-                        ? item.getAttribute('data-source-mob') 
-                        : item.getAttribute('data-source');
-                    const r = (isMobile && item.getAttribute('data-result-mob')) 
-                        ? item.getAttribute('data-result-mob') 
-                        : item.getAttribute('data-result');
-
-                    await Promise.all([preloadUrl(s), preloadUrl(r)]);
-                }
-            }
-
-            if ('requestIdleCallback' in window) {
-                requestIdleCallback(() => loadSequentially());
-            } else {
-                setTimeout(loadSequentially, 150);
-            }
-        });
-    }
-
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initStrictImagePipeline);
-    } else {
-        initStrictImagePipeline();
-    }
+window.ZoomzillaExamples.attach(element => {
+    setupNativeCompare(element, <?= json_encode($labelBefore, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?>, <?= json_encode($labelAfter, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?>);
+});
 </script>

components/form.php

@@ -1,5 +1,5 @@
 <?php
-require __DIR__ . '/browser-upload.php';
+require_once __DIR__ . '/browser-upload.php';
 echo '<script>', require __DIR__ . '/navigation-guard.php', '</script>';
 echo '<script>', require __DIR__ . '/upload-recovery.php', '</script>';
 
@@ -18,7 +18,7 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
 
 	<div class="dropzone-form-inner">
 		<div class="dropzone-form-icon">
-			<img src="<?= $assetsUriPrefix; ?>/images/dropzone-icon.svg" alt="" height="64" width="64">
+			<img src="<?= $assetsUriPrefix; ?>/images/dropzone-icon.svg" alt="" height="65" width="64">
 		</div>
 		<div id="form-title" class="dropzone-form-text"><?= Yii::t('app', 'Загрузите изображение') ?> <br class="d-md-none"><?= Yii::t('app', 'для улучшения') ?></div>
 		<div class="dropzone-form-format">
@@ -35,7 +35,7 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
 		</div>
 		<div class="dropzone-form-action">
 			<button type="button" class="dropzone-form-button">
-				<span data-upload-label><?= Yii::t('app', 'Загрузить изображение') ?></span>
+				<span data-upload-label><?= Yii::t('app', preg_match('/Android/i', $_SERVER['HTTP_USER_AGENT'] ?? '') ? 'Выбрать фото' : 'Загрузить изображение') ?></span>
 				<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<path d="M13.3333 14.6667C15.6345 14.6667 17.5 12.8012 17.5 10.5C17.5 8.43079 15.9917 6.71387 14.0145 6.38874C14.0113 6.38821 14.0086 6.38583 14.0078 6.38267C13.4802 4.43373 11.6992 3 9.58333 3C7.05203 3 5 5.05203 5 7.58333C5 7.75477 5.00941 7.924 5.02775 8.09055C5.0282 8.0947 5.0255 8.09856 5.02145 8.09957C3.57289 8.4621 2.5 9.77242 2.5 11.3333C2.5 13.1743 3.99238 14.6667 5.83333 14.6667H6.66667M10 8.83726V18M10 8.83726L7.5 11.3333M10 8.83726L12.5 11.3333" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 				</svg>
@@ -45,6 +45,7 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
 	</div>
 
 	<input type="file" id="dropzone-file-input" name="file" accept="<?= htmlspecialchars($basePickerAccept, ENT_QUOTES, 'UTF-8') ?>" style="display: none;">
+    <span data-upload-markup-ready hidden></span>
 </form>
 
 <script>

components/upload-picker-links.php

@@ -1,22 +1,5 @@
 <?php /* CSS синхронна API upload-picker-links; отдельный хост без Yii assets. */ ?>
-<style>
-[data-picker-or][hidden], [data-files-picker][hidden] { display: none !important; }
-#dropzone-form[data-mobile-upload] { padding: 16px; }
-#dropzone-form[data-mobile-upload] .dropzone-form-icon img { width: 44px; height: 44px; }
-#dropzone-form[data-mobile-upload] .dropzone-form-text { margin-top: 8px; font-size: 16px; line-height: 24px; }
-#dropzone-form[data-mobile-upload] .dropzone-form-format { margin-top: 10px; flex-direction: column; gap: 6px; }
-#dropzone-form[data-mobile-upload] .dropzone-form-format-label { font-size: 11px; line-height: 16px; }
-#dropzone-form[data-mobile-upload] .dropzone-form-format-list { flex-wrap: nowrap; gap: 4px; justify-content: center; }
-#dropzone-form[data-mobile-upload] .dropzone-form-format-item { padding: 3px 5px; border-radius: 6px; font-size: 11px; line-height: 15px; white-space: nowrap; }
-#dropzone-form[data-mobile-upload] .dropzone-form-action { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
-#dropzone-form[data-mobile-upload] .dropzone-form-button { width: 100%; pointer-events: auto; }
-#dropzone-form[data-mobile-upload] [data-picker-or] { display: block; margin: 0; font-size: 10px; line-height: 14px; color: #979aa0; }
-#dropzone-form[data-mobile-upload] [data-files-picker] { display: block; position: relative; margin: -2px 0 0; font-size: 12px; line-height: 18px; text-decoration: underline; text-underline-offset: 3px; pointer-events: auto; }
-#dropzone-form.theme-dark [data-files-picker], .theme-dark #dropzone-form [data-files-picker] { color: #b6caff; }
-/* Расширяем область нажатия вниз, не меняя утверждённый видимый зазор4px. */
-#dropzone-form [data-files-picker]::after { content: ''; position: absolute; inset: 0 -8px -14px; }
-#dropzone-form[data-mobile-upload] .dropzone-form-format-item[data-format-optional] { display: none; }
-</style>
+
 <span data-picker-or hidden><?= Yii::t('app', 'или') ?></span>
 <a href="#" data-files-picker hidden><?= Yii::t('app', 'Выбрать файлы (PDF и др.)') ?></a>
 <input type="file" data-other-files style="display:none">

components/upload-picker-style.php

@@ -0,0 +1,21 @@
+<?php
+/** Синхронная inline-CSS API/Preland: мобильный вид до инициализации picker. */
+return <<<'CSS'
+[data-picker-or][hidden], [data-files-picker][hidden] { display: none !important; }
+:is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) { padding: 16px; }
+:is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) .dropzone-form-icon img { width: 44px; height: 44px; }
+:is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) .dropzone-form-text { margin-top: 8px; font-size: 16px; line-height: 24px; }
+:is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) .dropzone-form-format { margin-top: 10px; flex-direction: column; gap: 6px; }
+:is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) .dropzone-form-format-label { font-size: 11px; line-height: 16px; }
+:is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) .dropzone-form-format-list { flex-wrap: nowrap; gap: 4px; justify-content: center; }
+:is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) .dropzone-form-format-item { padding: 3px 5px; border-radius: 6px; font-size: 11px; line-height: 15px; white-space: nowrap; }
+:is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) .dropzone-form-action { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
+:is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) .dropzone-form-button { width: 100%; pointer-events: auto; }
+:is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) [data-picker-or] { display: block; margin: 0; font-size: 10px; line-height: 14px; color: #979aa0; }
+:is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) [data-files-picker] { display: block; position: relative; margin: -2px 0 0; font-size: 12px; line-height: 18px; text-decoration: underline; text-underline-offset: 3px; pointer-events: auto; }
+#dropzone-form.theme-dark [data-files-picker], .theme-dark #dropzone-form [data-files-picker] { color: #b6caff; }
+/* Расширяем область нажатия вниз, не меняя утверждённый видимый зазор4px. */
+#dropzone-form [data-files-picker]::after { content: ''; position: absolute; inset: 0 -8px -14px; }
+:is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) .dropzone-form-format-item[data-format-optional] { display: none; }
+html[data-upload-device=android] #dropzone-form [data-picker-or][hidden], html[data-upload-device=android] #dropzone-form [data-files-picker][hidden] { display: block !important; }
+CSS;

index.php

@@ -105,7 +105,3 @@ function renderComponent(string $name, array $params = []): void
 }
 
 require_once __DIR__ . '/template.php';
-?>
-<style>
-    <?= file_get_contents(__DIR__ . '/style.min.css'); ?>
-</style>

style.css

@@ -2808,11 +2808,11 @@ body:not(.theme-dark) .theme-light-hidden {
   .index-mobile-fit #image-compare .icv__img { position: absolute; top: 0; bottom: 0; left: 0; width: 100cqw; height: 100%; object-fit: cover; object-position: center; }
   .index-mobile-fit #image-compare .icv__img-b { left: auto; right: 0; }
   .index-mobile-fit #image-compare.native-icv img { width: 100cqw !important; }
-  .index-mobile-fit #dropzone-form[data-mobile-upload] { padding: 12px; margin-top: 12px; }
-  .index-mobile-fit #dropzone-form[data-mobile-upload] .dropzone-form-icon img { width: 36px; height: 36px; }
-  .index-mobile-fit #dropzone-form[data-mobile-upload] .dropzone-form-text { margin-top: 6px; }
-  .index-mobile-fit #dropzone-form[data-mobile-upload] .dropzone-form-format { margin-top: 8px; }
-  .index-mobile-fit #dropzone-form[data-mobile-upload] .dropzone-form-action { margin-top: 10px; }
+  .index-mobile-fit :is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) { padding: 12px; margin-top: 12px; }
+  .index-mobile-fit :is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) .dropzone-form-icon img { width: 36px; height: 36px; }
+  .index-mobile-fit :is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) .dropzone-form-text { margin-top: 6px; }
+  .index-mobile-fit :is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) .dropzone-form-format { margin-top: 8px; }
+  .index-mobile-fit :is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) .dropzone-form-action { margin-top: 10px; }
   .index-mobile-fit .image-examples { max-width: min(100%, 50svh); margin: 12px auto 0; }
   .index-mobile-fit .image-examples-label { display: none; }
   .index-mobile-fit .image-examples-list { gap: 8px; }
@@ -2914,3 +2914,27 @@ body { isolation: isolate; }
 }
 @media (max-width: 767.98px) { .wrapper { --site-header-height: 68px; } }
 /* /api#298 */
+
+/* api#301: геометрия примеров существует до загрузки изображений и viewer. */
+.index-mobile-fit #examples { position: relative; }
+.index-mobile-fit #image-compare { position: relative; width: 100%; aspect-ratio: 1696 / 920; overflow: hidden; }
+.index-mobile-fit #image-compare > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.index-mobile-fit #examples .examples-retry { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); }
+.index-mobile-fit #examples .examples-retry[hidden] { display: none; }
+.index-mobile-fit #examples .image-examples-item { cursor: pointer; }
+.index-mobile-fit #examples .image-examples-item.active { border-color: #007bff; }
+/* /api#301 */
+@media (min-width: 768px) {
+  /* Обе колонки занимают свои ячейки и при частично полученном HTML. */
+  .index-mobile-fit > .container > .row { display: grid; grid-template-columns: 5fr 7fr; }
+  .index-mobile-fit > .container > .row > .col-md-5 { grid-column: 1; grid-row: 1; max-width: none; }
+  .index-mobile-fit > .container > .row > .col-md-7 { grid-column: 2; grid-row: 1; max-width: none; }
+}
+/* Разметка может прийти частями: показываем только полностью полученную форму. */
+.index-mobile-fit #dropzone-form:not(:has([data-upload-markup-ready])) { visibility: hidden; }
+@media (max-width: 767.98px) {
+  /* Высоты существующего компактного вида: 243/201px контент + 24px padding. */
+  html[data-upload-device=android] .index-mobile-fit #dropzone-form { min-height: 267px; }
+  html[data-upload-device=mobile] .index-mobile-fit #dropzone-form { min-height: 225px; }
+  html[data-upload-device=android] .index-mobile-fit .dropzone-form-action { min-height: 90px; }
+}

style.min.css

@@ -7,11 +7,11 @@
   .index-mobile-fit #image-compare .icv__img { position: absolute; top: 0; bottom: 0; left: 0; width: 100cqw; height: 100%; object-fit: cover; object-position: center; }
   .index-mobile-fit #image-compare .icv__img-b { left: auto; right: 0; }
   .index-mobile-fit #image-compare.native-icv img { width: 100cqw !important; }
-  .index-mobile-fit #dropzone-form[data-mobile-upload] { padding: 12px; margin-top: 12px; }
-  .index-mobile-fit #dropzone-form[data-mobile-upload] .dropzone-form-icon img { width: 36px; height: 36px; }
-  .index-mobile-fit #dropzone-form[data-mobile-upload] .dropzone-form-text { margin-top: 6px; }
-  .index-mobile-fit #dropzone-form[data-mobile-upload] .dropzone-form-format { margin-top: 8px; }
-  .index-mobile-fit #dropzone-form[data-mobile-upload] .dropzone-form-action { margin-top: 10px; }
+  .index-mobile-fit :is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) { padding: 12px; margin-top: 12px; }
+  .index-mobile-fit :is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) .dropzone-form-icon img { width: 36px; height: 36px; }
+  .index-mobile-fit :is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) .dropzone-form-text { margin-top: 6px; }
+  .index-mobile-fit :is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) .dropzone-form-format { margin-top: 8px; }
+  .index-mobile-fit :is(#dropzone-form[data-mobile-upload], html[data-upload-device="mobile"] #dropzone-form, html[data-upload-device="android"] #dropzone-form) .dropzone-form-action { margin-top: 10px; }
   .index-mobile-fit .image-examples { max-width: min(100%, 50svh); margin: 12px auto 0; }
   .index-mobile-fit .image-examples-label { display: none; }
   .index-mobile-fit .image-examples-list { gap: 8px; }
@@ -115,3 +115,27 @@ body { isolation: isolate; }
 }
 @media (max-width: 767.98px) { .wrapper { --site-header-height: 68px; } }
 /* /api#298 */
+
+/* api#301: геометрия примеров существует до загрузки изображений и viewer. */
+.index-mobile-fit #examples { position: relative; }
+.index-mobile-fit #image-compare { position: relative; width: 100%; aspect-ratio: 1696 / 920; overflow: hidden; }
+.index-mobile-fit #image-compare > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.index-mobile-fit #examples .examples-retry { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); }
+.index-mobile-fit #examples .examples-retry[hidden] { display: none; }
+.index-mobile-fit #examples .image-examples-item { cursor: pointer; }
+.index-mobile-fit #examples .image-examples-item.active { border-color: #007bff; }
+/* /api#301 */
+@media (min-width: 768px) {
+  /* Обе колонки занимают свои ячейки и при частично полученном HTML. */
+  .index-mobile-fit > .container > .row { display: grid; grid-template-columns: 5fr 7fr; }
+  .index-mobile-fit > .container > .row > .col-md-5 { grid-column: 1; grid-row: 1; max-width: none; }
+  .index-mobile-fit > .container > .row > .col-md-7 { grid-column: 2; grid-row: 1; max-width: none; }
+}
+/* Разметка может прийти частями: показываем только полностью полученную форму. */
+.index-mobile-fit #dropzone-form:not(:has([data-upload-markup-ready])) { visibility: hidden; }
+@media (max-width: 767.98px) {
+  /* Высоты существующего компактного вида: 243/201px контент + 24px padding. */
+  html[data-upload-device=android] .index-mobile-fit #dropzone-form { min-height: 267px; }
+  html[data-upload-device=mobile] .index-mobile-fit #dropzone-form { min-height: 225px; }
+  html[data-upload-device=android] .index-mobile-fit .dropzone-form-action { min-height: 90px; }
+}

template.php

@@ -47,7 +47,9 @@
 		<link rel="preload" as="image" href="<?= $urlSrcOrig ?>" media="(min-width: 768px)" type="image/avif" fetchpriority="high">
 		<link rel="preload" as="image" href="<?= $urlResOrig ?>" media="(min-width: 768px)" type="image/avif" fetchpriority="high">
 
-        <!-- <link rel="stylesheet" href="style.min.css"> -->
+        <style><?= file_get_contents(__DIR__ . '/style.min.css'); ?></style>
+        <style><?= require __DIR__ . '/components/upload-picker-style.php'; ?></style>
+        <?php require_once __DIR__ . '/components/browser-upload.php'; ?>
     </head>
 <body class="<?= (isset($UTM['theme']) && $UTM['theme'] == 'dark') ? 'theme-dark' : '' ?>" style="<?= (isset($UTM['theme']) && $UTM['theme'] == 'dark') ? 'background: black' : '' ?>">
 <div class="wrapper">