@advdominion/lightbox-gallery@5.1.0

Удалена Lerna
Publish
2026-10-10 22:46:05 +04:00 · 2026-09-24 21:54:19 +04:00 · 2026-09-24 21:45:58 +04:00 · 2026-09-24 21:45:32 +04:00 · 2026-09-24 21:20:46 +04:00 · 2026-09-24 16:51:07 +04:00
19 changed files with 944 additions and 4909 deletions
@@ -4,5 +4,5 @@
  "quoteProps": "consistent",
  "sortImports": true,
  "sortPackageJson": false,
-  "ignorePatterns": [".docker", ".yarn", "html"]
+  "ignorePatterns": [".vscode", ".yarn"]
 }
@@ -61,38 +61,12 @@
    "unicorn/filename-case": ["warn", { "cases": { "kebabCase": true, "pascalCase": true } }],
    "unicorn/no-empty-file": "warn",
    "unicorn/no-nested-ternary": "off",
+    "unicorn/prefer-ternary": "off",
    "unicorn/no-useless-switch-case": "off",
    "unicorn/prefer-global-this": "off",
    "vue/define-props-destructuring": "off",
    "vue/max-props": "off"
  },
-  "overrides": [
-    {
-      "files": ["build-scripts/*.js"],
-      "rules": {
-        "eslint/no-console": "off"
-      }
-    },
-    {
-      "files": ["src/scripts/mocks/**/*.js"],
-      "rules": {
-        "eslint/no-console": "off",
-        "unicorn/prefer-ternary": "off"
-      }
-    },
-    {
-      "files": ["src/scripts/blocks/**/*.js"],
-      "rules": {
-        "unicorn/prefer-top-level-await": "off"
-      }
-    },
-    {
-      "files": ["src/scripts/composables/*.js"],
-      "rules": {
-        "unicorn/filename-case": ["warn", { "cases": { "camelCase": true } }]
-      }
-    }
-  ],
  "ignorePatterns": [".yarn"],
  "options": {
    "maxWarnings": 10
@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "arcanis.vscode-zipfs",
+    "oxc.oxc-vscode"
+  ]
+}
@@ -0,0 +1,10 @@
+{
+  "editor.defaultFormatter": "oxc.oxc-vscode",
+  "editor.formatOnSave": true,
+  "search.exclude": {
+    "**/.yarn": true,
+    "**/.pnp.*": true
+  },
+  "oxc.path.oxfmt": ".yarn/sdks/oxfmt/bin/oxfmt",
+  "oxc.path.oxlint": ".yarn/sdks/oxlint/bin/oxlint"
+}
@@ -1,3 +1,5 @@
 # This file is automatically generated by @yarnpkg/sdks.
 # Manual changes might be lost!

+integrations:
+  - vscode
@@ -1,6 +1,6 @@
 {
  "name": "oxfmt",
-  "version": "0.55.0-sdk",
+  "version": "0.70.0-sdk",
  "main": "dist/index.js",
  "type": "commonjs",
  "bin": {
@@ -1,6 +1,6 @@
 {
  "name": "oxlint",
-  "version": "1.70.0-sdk",
+  "version": "1.85.0-sdk",
  "main": "dist/index.js",
  "type": "commonjs",
  "bin": {
@@ -4,8 +4,5 @@ packageExtensions:
  '@advdominion/stylelint-config@*':
    dependencies:
      stylelint: '*'
-  lerna@*:
-    dependencies:
-      ci-info: '*'

 yarnPath: .yarn/releases/yarn-4.18.0.cjs
@@ -8,8 +8,18 @@

 ## Публикация новых версий

+1. Вручную поднять `version` в `packages/<пакет>/package.json`
+2. Опубликовать пакет:
+
 ```bash
-yarn lerna publish
+yarn workspace @advdominion/<пакет> npm publish
+```
+
+3. Поставить git-тег:
+
+```bash
+git tag @advdominion/<пакет>@<версия>
+git push origin @advdominion/<пакет>@<версия>
 ```

 ## Обновление зависимостей
@@ -21,7 +31,7 @@ yarn upgrade-interactive

 yarn dedupe

-yarn dlx @yarnpkg/sdks base
+yarn dlx @yarnpkg/sdks

 yarn install
 ```
@@ -1,4 +0,0 @@
-{
-  "version": "independent",
-  "npmClient": "yarn"
-}
@@ -10,9 +10,8 @@
  },
  "devDependencies": {
    "husky": "^9.1.7",
-    "lerna": "^10.0.0",
-    "lint-staged": "^17.3.0",
-    "oxfmt": "^0.63.0",
-    "oxlint": "^1.78.0"
+    "lint-staged": "^17.5.1",
+    "oxfmt": "^0.70.0",
+    "oxlint": "^1.85.0"
  }
 }
@@ -2,403 +2,440 @@

 import { getScrollbarWidth } from '@advdominion/get-scrollbar-width';

-const getYTPlayer = () => {
-        const script = document.createElement('script');
-        script.src = 'https://www.youtube.com/player_api';
-        script.async = true;
-        document.body.append(script);
-    },
-    getVKPlayer = () => {
-        const script = document.createElement('script');
-        script.src = 'https://vk.com/js/api/videoplayer.js';
-        script.async = true;
-        document.body.append(script);
-    },
-    playVideo = (slide) => {
-        const youtube = slide.querySelector('.advdominion-lg__video_youtube'),
-            vk = slide.querySelector('.advdominion-lg__video_vk'),
-            rt = slide.querySelector('.advdominion-lg__video_rt');
+const ESCAPE_MAP = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+};

-        if (youtube) {
-            if (slide.YTPlayer) {
-                if (slide.classList.contains('swiper-slide-active')) {
-                    slide.YTPlayer.playVideo();
-                }
-            } else if (window.YT) {
-                if (GalleryYTPlayer.state) {
-                    slide.YTPlayer = new YT.Player(youtube, {
-                        videoId: youtube.dataset.id,
-                        events: {
-                            onReady(event) {
-                                if (slide.classList.contains('swiper-slide-active')) {
-                                    event.target.playVideo();
-                                }
-                            },
+/*
+    Экранирует HTML в значениях (сейчас — подписи), которые попадают в разметку через insertAdjacentHTML.
+    Без этого подпись с тегами выполнится как разметка. Готового санитайзера с нужной поддержкой браузеров нет.
+*/
+const escapeHtml = (value) => String(value).replaceAll(/[&<>"']/g, (char) => ESCAPE_MAP[char]);
+
+const getYTPlayer = () => {
+    const script = document.createElement('script');
+    script.src = 'https://www.youtube.com/player_api';
+    script.async = true;
+    document.body.append(script);
+};
+
+const getVKPlayer = () => {
+    const script = document.createElement('script');
+    script.src = 'https://vk.com/js/api/videoplayer.js';
+    script.async = true;
+    document.body.append(script);
+};
+
+const playVideo = (slide) => {
+    const youtube = slide.querySelector('.advdominion-lg__video_youtube');
+    const vk = slide.querySelector('.advdominion-lg__video_vk');
+    const rt = slide.querySelector('.advdominion-lg__video_rt');
+
+    if (youtube) {
+        if (slide.YTPlayer) {
+            if (slide.classList.contains('swiper-slide-active')) {
+                slide.YTPlayer.playVideo();
+            }
+        } else if (window.YT) {
+            if (GalleryYTPlayer.state) {
+                slide.YTPlayer = new YT.Player(youtube, {
+                    videoId: youtube.dataset.id,
+                    events: {
+                        onReady(event) {
+                            if (slide.classList.contains('swiper-slide-active')) {
+                                event.target.playVideo();
+                            }
                        },
-                    });
-                } else {
-                    GalleryYTPlayer.addListener(() => {
-                        playVideo(slide);
-                    });
-                }
+                    },
+                });
            } else {
-                getYTPlayer();
                GalleryYTPlayer.addListener(() => {
                    playVideo(slide);
                });
            }
-        } else if (vk) {
-            if (slide.VKPlayer) {
-                if (slide.classList.contains('swiper-slide-active')) {
-                    slide.VKPlayer.play();
-                }
-            } else if (window.VK?.VideoPlayer) {
-                if (GalleryVKPlayer.state) {
-                    slide.VKPlayer = VK.VideoPlayer(vk);
-                    slide.VKPlayer.on('inited', () => {
-                        if (slide.classList.contains('swiper-slide-active')) {
-                            slide.VKPlayer.play();
-                        }
-                    });
-                } else {
-                    GalleryVKPlayer.addListener(() => {
-                        playVideo(slide);
-                    });
-                }
+        } else {
+            getYTPlayer();
+            GalleryYTPlayer.addListener(() => {
+                playVideo(slide);
+            });
+        }
+    } else if (vk) {
+        if (slide.VKPlayer) {
+            if (slide.classList.contains('swiper-slide-active')) {
+                slide.VKPlayer.play();
+            }
+        } else if (window.VK?.VideoPlayer) {
+            if (GalleryVKPlayer.state) {
+                slide.VKPlayer = VK.VideoPlayer(vk); // eslint-disable-line new-cap
+                slide.VKPlayer.on('inited', () => {
+                    if (slide.classList.contains('swiper-slide-active')) {
+                        slide.VKPlayer.play();
+                    }
+                });
            } else {
-                getVKPlayer();
                GalleryVKPlayer.addListener(() => {
                    playVideo(slide);
                });
            }
-        } else if (rt) {
-            const videoId = /embed\/(\w+)/.exec(rt.getAttribute('src'))?.[1],
-                checkInterval = setInterval(() => {
-                    if (window.GalleryRTPlayer) {
-                        if (window.GalleryRTPlayer.has(videoId)) {
-                            clearInterval(checkInterval);
-                            if (slide.classList.contains('swiper-slide-active')) {
-                                rt.contentWindow.postMessage(
-                                    JSON.stringify({
-                                        type: 'player:play',
-                                        data: {},
-                                    }),
-                                    '*',
-                                );
-                            }
-                        }
-                    } else {
-                        clearInterval(checkInterval);
+        } else {
+            getVKPlayer();
+            GalleryVKPlayer.addListener(() => {
+                playVideo(slide);
+            });
+        }
+    } else if (rt) {
+        /*
+            RuTube не отдаёт объект плеера вроде YT.Player или VK.VideoPlayer — о готовности он сообщает
+            через postMessage, а id готовых видео копятся в window.GalleryRTPlayer (см. слушатель ниже).
+            Поэтому ждём появления своего id в этом наборе и только тогда отправляем команду.
+        */
+        const videoId = /embed\/(\w+)/.exec(rt.getAttribute('src'))?.[1];
+        const checkInterval = setInterval(() => {
+            if (window.GalleryRTPlayer) {
+                if (window.GalleryRTPlayer.has(videoId)) {
+                    clearInterval(checkInterval);
+                    if (slide.classList.contains('swiper-slide-active')) {
+                        rt.contentWindow.postMessage(
+                            JSON.stringify({
+                                type: 'player:play',
+                                data: {},
+                            }),
+                            '*',
+                        );
                    }
-                }, 100);
-            slide.checkInterval = checkInterval;
-        }
-    },
-    pauseVideo = (slide) => {
-        const youtube = slide.querySelector('.advdominion-lg__video_youtube'),
-            vk = slide.querySelector('.advdominion-lg__video_vk'),
-            rt = slide.querySelector('.advdominion-lg__video_rt');
-
-        if (youtube && slide.YTPlayer) {
-            slide.YTPlayer.pauseVideo();
-        } else if (vk && slide.VKPlayer) {
-            slide.VKPlayer.pause();
-        } else if (rt) {
-            rt.contentWindow.postMessage(
-                JSON.stringify({
-                    type: 'player:pause',
-                    data: {},
-                }),
-                '*',
-            );
-        }
-    },
-    setVideoSize = (gallery) => {
-        const items = gallery.querySelectorAll('.advdominion-lg__video-wrapper');
-        items[0].style.cssText = '';
-        let height = (items[0].getBoundingClientRect().width * 9) / 16,
-            width = '';
-        if (height > items[0].getBoundingClientRect().height) {
-            height = items[0].getBoundingClientRect().height;
-            width = `${(height * 16) / 9}px`;
-        }
-        for (const item of items) {
-            item.style.cssText = `
-            height: ${height}px;
-            width: ${width};
-        `;
-        }
-    },
-    hide = async (duration = 500, easing = 'linear') => {
-        const gallery = document.body.querySelector('.advdominion-lg');
-
-        await gallery.animate([{ opacity: 1 }, { opacity: 0 }], {
-            duration,
-            easing,
-        }).finished;
-
-        // Очищаем интервалы проверки для видео
-        for (const slide of gallery.querySelectorAll('.advdominion-lg__item_video')) {
-            if (slide.checkInterval) {
-                clearInterval(slide.checkInterval);
+                }
+            } else {
+                clearInterval(checkInterval);
            }
+        }, 100);
+        slide.checkInterval = checkInterval;
+    }
+};
+
+const pauseVideo = (slide) => {
+    const youtube = slide.querySelector('.advdominion-lg__video_youtube');
+    const vk = slide.querySelector('.advdominion-lg__video_vk');
+    const rt = slide.querySelector('.advdominion-lg__video_rt');
+
+    if (youtube && slide.YTPlayer) {
+        slide.YTPlayer.pauseVideo();
+    } else if (vk && slide.VKPlayer) {
+        slide.VKPlayer.pause();
+    } else if (rt) {
+        rt.contentWindow.postMessage(
+            JSON.stringify({
+                type: 'player:pause',
+                data: {},
+            }),
+            '*',
+        );
+    }
+};
+
+const hide = async (duration = 500, easing = 'linear') => {
+    const gallery = document.body.querySelector('.advdominion-lg');
+
+    await gallery.animate([{ opacity: 1 }, { opacity: 0 }], {
+        duration,
+        easing,
+    }).finished;
+
+    // Очищаем интервалы проверки для видео
+    for (const slide of gallery.querySelectorAll('.advdominion-lg__item_video')) {
+        if (slide.checkInterval) {
+            clearInterval(slide.checkInterval);
        }
+    }

-        gallery.remove();
-        delete window.GalleryRTPlayer;
+    gallery.remove();
+    // Сбрасываем накопленные id готовых RuTube-плееров, чтобы следующее открытие начинало с чистого состояния.
+    delete window.GalleryRTPlayer;

-        document.body.style.cssText = `
-        overflow: '';
-        margin-right: '';
-    `;
-    },
-    show = async (duration = 500, easing = 'linear') => {
-        const gallery = document.body.querySelector('.advdominion-lg');
+    document.body.style.overflow = '';
+    document.body.style.marginRight = '';
+};

-        document.body.style.cssText = `
-        overflow: hidden;
-        margin-right: ${getScrollbarWidth()}px
-    `;
+const show = async (duration = 500, easing = 'linear') => {
+    const gallery = document.body.querySelector('.advdominion-lg');

-        await gallery.animate([{ opacity: 0 }, { opacity: 1 }], {
-            duration,
-            easing,
-        }).finished;
-    },
-    init = async (items = [], options = {}, index = 0) => {
-        const [{ default: Swiper }, { Navigation, Pagination }] = await Promise.all([
-                import('swiper'),
-                import('swiper/modules'),
-            ]),
-            isVideoInGallery = {
-                yt: false,
-                vk: false,
-                rt: false,
-            };
-        items = items.map(({ url: item, caption }) => {
-            if (/youtube\.com\/watch\?v=/.test(item)) {
-                isVideoInGallery.yt = true;
-                return `
+    document.body.style.overflow = 'hidden';
+    document.body.style.marginRight = `${getScrollbarWidth()}px`;
+
+    await gallery.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration,
+        easing,
+    }).finished;
+};
+
+const init = async (items = [], options = {}, index = 0) => {
+    // Вторая галерея поверх первой сломала бы закрытие: show/hide ищут только первый элемент .advdominion-lg.
+    if (document.body.querySelector('.advdominion-lg')) {
+        return;
+    }
+    // Один отменяемый контроллер на время жизни галереи: при закрытии снимает все её слушатели.
+    const controller = new AbortController();
+    const [{ default: Swiper }, { Navigation, Pagination }] = await Promise.all([
+        import('swiper'),
+        import('swiper/modules'),
+    ]);
+    const isVideoInGallery = {
+        yt: false,
+        vk: false,
+        rt: false,
+    };
+    const slides = items.map(({ url: item, caption }) => {
+        if (/youtube\.com\/watch\?v=/.test(item)) {
+            isVideoInGallery.yt = true;
+            return `
                <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
-                    <div class="advdominion-lg__video-wrapper">
-                        <div
-                            class="advdominion-lg__video advdominion-lg__video_youtube"
-                            data-id="${/v=([\w-]+)/i.exec(item)[1]}">
-                            Загрузка YouTube-плеера...
-                        </div>
-                    </div>
-                    ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
-                </div>
-            `;
-            } else if (/(?:vkvideo\.ru|vk\.com)\/video/.test(item)) {
-                isVideoInGallery.vk = true;
-                const videoId = /(?:vkvideo\.ru|vk\.com)\/video(-?\d+)_(\d+)/.exec(item);
-                if (videoId === null) {
-                    return `
-                    <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
+                    <div class="advdominion-lg__video-area">
                        <div class="advdominion-lg__video-wrapper">
-                            <div class="advdominion-lg__video advdominion-lg__video_vk">
-                                Ошибка при загрузке VK-плеера
+                            <div
+                                class="advdominion-lg__video advdominion-lg__video_youtube"
+                                data-id="${/v=([\w-]+)/i.exec(item)[1]}">
+                                Загрузка YouTube-плеера...
                            </div>
                        </div>
-                        ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
                    </div>
-                `;
-                }
-                return `
-                <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
-                    <div class="advdominion-lg__video-wrapper">
-                        <iframe
-                            class="advdominion-lg__video advdominion-lg__video_vk"
-                            src="https://vkvideo.ru/video_ext.php?oid=${videoId[1]}&id=${videoId[2]}&hd=4&js_api=1"
-                            allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;">
-                        </iframe>
-                    </div>
-                    ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
+                    ${caption ? `<div class="advdominion-lg__caption">${escapeHtml(caption)}</div>` : ''}
                </div>
            `;
-            } else if (/rutube\.ru/.test(item)) {
-                isVideoInGallery.rt = true;
-                const videoId = /video\/(\w+)/.exec(item);
-                if (videoId === null) {
-                    return `
+        } else if (/(?:vkvideo\.ru|vk\.com)\/video/.test(item)) {
+            isVideoInGallery.vk = true;
+            const videoId = /(?:vkvideo\.ru|vk\.com)\/video(-?\d+)_(\d+)/.exec(item);
+            if (videoId === null) {
+                return `
                    <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
-                        <div class="advdominion-lg__video-wrapper">
-                            <div class="advdominion-lg__video advdominion-lg__video_rt">
-                                Ошибка при загрузке RuTube-плеера
+                        <div class="advdominion-lg__video-area">
+                            <div class="advdominion-lg__video-wrapper">
+                                <div class="advdominion-lg__video advdominion-lg__video_vk">
+                                    Ошибка при загрузке VK-плеера
+                                </div>
                            </div>
                        </div>
-                        ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
+                        ${caption ? `<div class="advdominion-lg__caption">${escapeHtml(caption)}</div>` : ''}
                    </div>
                `;
-                }
-                return `
-                <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
-                    <div class="advdominion-lg__video-wrapper">
-                        <iframe
-                            class="advdominion-lg__video advdominion-lg__video_rt"
-                            src="https://rutube.ru/play/embed/${videoId[1]}"
-                            allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;">
-                        </iframe>
-                    </div>
-                    ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
-                </div>
-            `;
            }
            return `
+                <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
+                    <div class="advdominion-lg__video-area">
+                        <div class="advdominion-lg__video-wrapper">
+                            <iframe
+                                class="advdominion-lg__video advdominion-lg__video_vk"
+                                src="https://vkvideo.ru/video_ext.php?oid=${videoId[1]}&id=${videoId[2]}&hd=4&js_api=1"
+                                allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;">
+                            </iframe>
+                        </div>
+                    </div>
+                    ${caption ? `<div class="advdominion-lg__caption">${escapeHtml(caption)}</div>` : ''}
+                </div>
+            `;
+        } else if (/rutube\.ru/.test(item)) {
+            isVideoInGallery.rt = true;
+            const videoId = /video\/(\w+)/.exec(item);
+            if (videoId === null) {
+                return `
+                    <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
+                        <div class="advdominion-lg__video-area">
+                            <div class="advdominion-lg__video-wrapper">
+                                <div class="advdominion-lg__video advdominion-lg__video_rt">
+                                    Ошибка при загрузке RuTube-плеера
+                                </div>
+                            </div>
+                        </div>
+                        ${caption ? `<div class="advdominion-lg__caption">${escapeHtml(caption)}</div>` : ''}
+                    </div>
+                `;
+            }
+            return `
+                <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
+                    <div class="advdominion-lg__video-area">
+                        <div class="advdominion-lg__video-wrapper">
+                            <iframe
+                                class="advdominion-lg__video advdominion-lg__video_rt"
+                                src="https://rutube.ru/play/embed/${videoId[1]}"
+                                allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;">
+                            </iframe>
+                        </div>
+                    </div>
+                    ${caption ? `<div class="advdominion-lg__caption">${escapeHtml(caption)}</div>` : ''}
+                </div>
+            `;
+        }
+        return `
            <div class="advdominion-lg__item swiper-slide">
                <img class="advdominion-lg__image" src="${item}" alt="" loading="lazy">
-                ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
+                ${caption ? `<div class="advdominion-lg__caption">${escapeHtml(caption)}</div>` : ''}
            </div>
        `;
-        });
+    });

-        if (isVideoInGallery.yt && !window.GalleryYTPlayer) {
-            window.GalleryYTPlayer = {
-                state: false,
-                get init() {
-                    return this.state;
-                },
-                set init(val) {
-                    this.state = val;
-                    for (const i of this.callback) {
-                        i(val);
-                    }
-                },
-                callback: [],
-                addListener(callback) {
-                    this.callback.push(callback);
-                },
-            };
+    /*
+        GalleryYTPlayer и GalleryVKPlayer — простые накопители колбэков до готовности внешнего API.
+        Пока плеер не загружен, playVideo регистрирует себя через addListener и будет вызван снова,
+        когда init станет true.
+    */
+    if (isVideoInGallery.yt && !window.GalleryYTPlayer) {
+        window.GalleryYTPlayer = {
+            state: false,
+            get init() {
+                return this.state;
+            },
+            set init(val) {
+                this.state = val;
+                for (const i of this.callback) {
+                    i(val);
+                }
+            },
+            callback: [],
+            addListener(callback) {
+                this.callback.push(callback);
+            },
+        };

+        /*
+            YouTube вызывает onYouTubeIframeAPIReady только один раз, поэтому нельзя просто перезаписать его:
+            если API уже загружен или колбэк занят другим кодом, он больше не сработает. Поэтому сохраняем
+            прежний обработчик и явно отмечаем готовность, когда API уже присутствует.
+        */
+        if (window.YT?.Player) {
+            window.GalleryYTPlayer.init = true;
+        } else {
+            const prevOnYouTubeIframeAPIReady = window.onYouTubeIframeAPIReady;
            window.onYouTubeIframeAPIReady = () => {
+                prevOnYouTubeIframeAPIReady?.();
                window.GalleryYTPlayer.init = true;
            };
        }
+    }

-        if (isVideoInGallery.vk && !window.GalleryVKPlayer) {
-            window.GalleryVKPlayer = {
-                state: false,
-                get init() {
-                    return this.state;
-                },
-                set init(val) {
-                    this.state = val;
-                    for (const i of this.callback) {
-                        i(val);
-                    }
-                },
-                callback: [],
-                addListener(callback) {
-                    this.callback.push(callback);
-                },
-            };
-
-            const checkInterval = setInterval(() => {
-                if (window.VK?.VideoPlayer) {
-                    clearInterval(checkInterval);
-                    window.GalleryVKPlayer.init = true;
+    if (isVideoInGallery.vk && !window.GalleryVKPlayer) {
+        window.GalleryVKPlayer = {
+            state: false,
+            get init() {
+                return this.state;
+            },
+            set init(val) {
+                this.state = val;
+                for (const i of this.callback) {
+                    i(val);
                }
-            }, 100);
-        }
+            },
+            callback: [],
+            addListener(callback) {
+                this.callback.push(callback);
+            },
+        };

-        if (isVideoInGallery.rt) {
-            window.GalleryRTPlayer = new Set();
-            window.addEventListener('message', (event) => {
+        // У VK нет события готовности API, поэтому проверяем его появление опросом.
+        const checkInterval = setInterval(() => {
+            if (window.VK?.VideoPlayer) {
+                clearInterval(checkInterval);
+                window.GalleryVKPlayer.init = true;
+            }
+        }, 100);
+    }
+
+    if (isVideoInGallery.rt) {
+        window.GalleryRTPlayer = new Set();
+        window.addEventListener(
+            'message',
+            (event) => {
                if (event.origin.includes('rutube.ru') && typeof event.data === 'string') {
                    const message = JSON.parse(event.data);
                    if (message.type === 'player:ready') {
                        window.GalleryRTPlayer.add(message.data.videoId);
                    }
                }
-            });
-        }
+            },
+            { signal: controller.signal },
+        );
+    }

-        document.body.insertAdjacentHTML(
-            'beforeend',
-            `
+    document.body.insertAdjacentHTML(
+        'beforeend',
+        `
            <div class="advdominion-lg">
                <button class="advdominion-lg__close" type="button">
                    <svg class="advdominion-lg__close-icon"><use href="${options.icons.close}" /></svg>
                </button>
                <div class="advdominion-lg__container swiper">
                    <div class="advdominion-lg__wrapper swiper-wrapper">
-                        ${items.join('')}
+                        ${slides.join('')}
                    </div>
                    ${options.pagination || ''}
                    ${options.navigation || ''}
                </div>
            </div>
        `,
-        );
+    );

-        const gallery = document.body.querySelector('.advdominion-lg');
+    const gallery = document.body.querySelector('.advdominion-lg');

-        gallery.querySelector('.advdominion-lg__container').style.cssText = `
+    gallery.querySelector('.advdominion-lg__container').style.cssText = `
        visibility: hidden;
    `;

-        await show(options?.animation?.show?.duration, options?.animation?.show?.easing);
+    await show(options?.animation?.show?.duration, options?.animation?.show?.easing);

-        const swiper = new Swiper(gallery.querySelector('.advdominion-lg__container'), {
-            init: false,
-            initialSlide: index,
-            ...options.swiper,
-            modules: [...new Set([Navigation, Pagination, ...(options.swiper?.modules || [])])],
-        });
+    const swiper = new Swiper(gallery.querySelector('.advdominion-lg__container'), {
+        init: false,
+        initialSlide: index,
+        ...options.swiper,
+        modules: [...new Set([Navigation, Pagination, ...(options.swiper?.modules || [])])],
+    });

-        swiper.on('init', function init() {
-            gallery.querySelector('.advdominion-lg__container').style.cssText = `
+    swiper.on('init', function init() {
+        gallery.querySelector('.advdominion-lg__container').style.cssText = `
            visibility: '';
        `;

-            if (this.slides[this.activeIndex].classList.contains('advdominion-lg__item_video')) {
-                playVideo(this.slides[this.activeIndex]);
-            }
+        if (this.slides[this.activeIndex].classList.contains('advdominion-lg__item_video')) {
+            playVideo(this.slides[this.activeIndex]);
+        }
+    });

-            if (isVideoInGallery.yt || isVideoInGallery.vk || isVideoInGallery.rt) {
-                setVideoSize(gallery);
-            }
-        });
-
-        swiper.on('slideChange', function init() {
-            setTimeout(() => {
-                for (const [index, slide] of Object.entries(this.slides)) {
-                    if (slide.classList.contains('advdominion-lg__item_video')) {
-                        if (Number(index) === this.activeIndex) {
-                            playVideo(slide);
-                        } else {
-                            pauseVideo(slide);
-                        }
+    swiper.on('slideChange', function init() {
+        setTimeout(() => {
+            for (const [index, slide] of Object.entries(this.slides)) {
+                if (slide.classList.contains('advdominion-lg__item_video')) {
+                    if (Number(index) === this.activeIndex) {
+                        playVideo(slide);
+                    } else {
+                        pauseVideo(slide);
                    }
                }
-            }, 0);
-        });
-
-        swiper.on('resize', () => {
-            if (isVideoInGallery.yt || isVideoInGallery.vk || isVideoInGallery.rt) {
-                setVideoSize(gallery);
            }
-        });
+        }, 0);
+    });

-        swiper.init();
+    swiper.init();

-        const closeHandler = () => {
-                hide(options?.animation?.hide?.duration, options?.animation?.hide?.easing);
-            },
-            keydownHandler = (e) => {
-                if (e.key === 'Escape') {
-                    closeHandler();
-                    document.body.removeEventListener('keydown', keydownHandler);
-                }
-            };
-
-        gallery.querySelector('.advdominion-lg__close').addEventListener('click', closeHandler);
-        document.body.addEventListener('keydown', keydownHandler);
+    const closeHandler = () => {
+        hide(options?.animation?.hide?.duration, options?.animation?.hide?.easing);
+        controller.abort();
    };
+    const keydownHandler = (e) => {
+        if (e.key === 'Escape') {
+            closeHandler();
+        }
+    };
+
+    gallery.querySelector('.advdominion-lg__close').addEventListener('click', closeHandler);
+    document.body.addEventListener('keydown', keydownHandler, { signal: controller.signal });
+};

 export const gallery = (container, options) => {
    const items = [];
+    /*
+        Подпись берётся из элемента, на который указывает data-gallery-caption у ссылки,
+        поэтому одна и та же подпись не дублируется в разметке галереи.
+    */
    if (options.single) {
        const element = container.children[0];
        items.push({
@@ -1,6 +1,6 @@
 {
  "name": "@advdominion/lightbox-gallery",
-  "version": "5.0.1",
+  "version": "5.1.0",
  "type": "module",
  "main": "index.js",
  "repository": {
@@ -39,15 +39,31 @@
 .advdominion-lg__item_video.swiper-slide {
 }

+/*
+    Обёртка вокруг видео внутри слайда. Слайд — это колонка из видео и подписи, поэтому обёртка
+    забирает всю высоту, оставшуюся после подписи и отступа, и центрирует в себе видео.
+    container-type: size нужен, чтобы cqw/cqh в .advdominion-lg__video-wrapper считались от этой
+    области, а не от всего слайда: иначе 16:9-блок вырастет на высоту подписи и наедет на неё.
+*/
+.advdominion-lg__video-area {
+    align-items: center;
+    container-type: size;
+    display: flex;
+    flex-grow: 1;
+    justify-content: center;
+    min-height: 0;
+    width: 100%;
+}
+
 .advdominion-lg__image {
    max-height: 100%;
    max-width: 100%;
 }

 .advdominion-lg__video-wrapper {
-    height: 100%;
+    aspect-ratio: 16 / 9;
    position: relative;
-    width: 100%;
+    width: min(100cqw, calc(100cqh * 16 / 9));
 }

 .advdominion-lg__video {
@@ -1,3 +1,22 @@
+## v7.1.1
+
+- Позиция при прокрутке обновляется без принудительного reflow: все измерения геометрии выполняются до записи стилей
+- Массив middleware собирается один раз и переиспользуется между кадрами (сбрасывается при смене `offset`, `shiftPadding`, `arrow`)
+- Классы и стили, зависящие от стороны размещения, применяются только при её смене
+- `@floating-ui/dom` подгружается одним динамическим импортом вместо двух
+- В пример базовых стилей добавлен `will-change: transform` — выносит подсказку на отдельный слой и убирает рывки при прокрутке
+
+## v7.1.0
+
+- Опция `arrow` теперь принимает объект: `active`, `centered`, `padding` (булево значение по-прежнему поддерживается)
+- Добавлено поле `arrow.centered` — фиксирует стрелку по центру всплывающей подсказки, чтобы она не смещалась при прокрутке
+- Автоматически рассчитываем `padding` стрелки, чтобы её повёрнутые углы не выходили за границы всплывающей подсказки
+- `arrow` теперь корректно применяется через `updateOptions` — и до первого показа, и с уже показанной подсказкой (включение/выключение стрелки на лету)
+- Исправлено: `updateOptions({ interactive })` больше не снимает обработчик скрытия по клику вне подсказки (раньше он попадал в общий список слушателей, который очищался при обновлении `interactive`)
+- Устранены гонки при вызове `show`/`hide` подряд: устаревшие асинхронные операции отменяются
+- `autoUpdate` теперь следит за тем же опорным элементом, что и позиционирование, поэтому при `virtualReference` подсказка продолжает обновляться при прокрутке
+- `onCreate` вызывается в самом конце инициализации — раньше внутри него ещё не были доступны `show()`/`hide()`, теперь их можно вызывать прямо в `onCreate`
+
 ## v7.0.1

 - Исправление работы анимации
@@ -9,12 +28,12 @@

 ## v6.0.0

- Корректная работа сообытий mouseenter/mouseleave на тач-устройствах
- Предовтращаем лишние показы всплывающей подсказки
+- Корректная работа с событиями mouseenter/mouseleave на тач-устройствах
+- Предотвращаем лишние показы всплывающей подсказки

 ## v5.0.0

- Регистрируем сообытия mouseenter/mouseleave на тач-устройствах
+- Регистрируем события mouseenter/mouseleave на тач-устройствах

 ## v4.1.1

@@ -22,7 +41,7 @@

 ## v4.1.0

- Отключаем события mouseenter/mouseleave для toch-устройств
+- Отключаем события mouseenter/mouseleave для touch-устройств

 ## v4.0.0

@@ -47,11 +66,11 @@
 ## v2.0.0

 - К `_tooltip.$tooltip` добавлено свойство `_reference` для доступа к элементу, на котором был вызван `createTooltip`
- Для функций `show/hide` добавлен параметр `immediately` для мнгновенного открытия/закрытия всплывающей подсказки (`_tooltip.hide({ immediately: true })`)
+- Для функций `show/hide` добавлен параметр `immediately` для мгновенного открытия/закрытия всплывающей подсказки (`_tooltip.hide({ immediately: true })`)
 - Добавлена опция `shiftPadding` для добавления отступов от краёв области видимости по осям x/y
 - Добавлена опция `animation` для кастомизации анимации при открытии/закрытии всплывающей подсказки (для этого всё внутри `.tooltip` было обёрнуто в `.tooltip__root` и анимация применяется именно к этому блоку)
 - Опция `_tooltip._options` переименована в `_tooltip.options`
- Оптимизция кода, исправление ошибок
+- Оптимизация кода, исправление ошибок
 - Доработки по README.md
 - Доработки по .npmignore

@@ -33,7 +33,7 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
        [{ opacity: 1 }, { opacity: 0 }],
    ],
    appendTo: document.body,
-    arrow: true,
+    arrow: { active: true, centered: false, padding: undefined },
    delay: [0, 0],
    duration: [0, 0],
    easing: ['linear', 'linear'],
@@ -62,6 +62,26 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
 - `'all'` — всплывающая подсказка скрывается при клике по любому элементу на странице (**включая** саму всплывающую подсказку).
 - `'toggle'` — всплывающая подсказка скрывается только при клике по элементу, который её вызывает.

+#### arrow
+
+Настройка отображения и позиционирования стрелки. Поддерживает булево значение (`true`/`false`) для обратной совместимости либо объект:
+
+- `active` (`true`) — показывать ли стрелку. Эквивалент `arrow: true`/`arrow: false`.
+- `centered` (`false`) — фиксировать стрелку по центру всплывающей подсказки, вместо того чтобы следовать за центром элемента, который её вызывает. Полезно, когда подсказка прижата к краю области видимости и стрелка смещается при прокрутке.
+- `padding` (`undefined`) — отступ стрелки от краёв всплывающей подсказки. По умолчанию рассчитывается автоматически исходя из размера стрелки, чтобы её повёрнутые под 45° углы не выходили за границы подсказки.
+
+```js
+createTooltip(document.querySelector('button'), 'Подсказка', {
+    arrow: { active: true, centered: true },
+});
+```
+
+Так же настраивается через data-атрибут:
+
+```html
+<button type="button" data-tooltip-arrow='{"centered":true}'>Кнопка</button>
+```
+
 ##### virtualReference

 Настройка используется для кастомного позиционирования, ожидает объект с методом `getBoundingClientRect`.
@@ -150,6 +170,7 @@ $b: '.tooltip';
    position: absolute;
    top: 0;
    width: max-content;
+    will-change: transform;
    z-index: 200;

    @media (min-width: 900px) {
@@ -1,39 +1,55 @@
 const roundByDPR = (value) => {
-        const dpr = window.devicePixelRatio || 1;
-        return Math.round(value * dpr) / dpr;
-    },
-    attributeToOption = (attribute) => {
-        attribute = attribute.replace('tooltip', '');
-        return attribute.charAt(0).toLowerCase() + attribute.slice(1);
-    };
+    const dpr = window.devicePixelRatio || 1;
+    return Math.round(value * dpr) / dpr;
+};

+const attributeToOption = (attribute) => {
+    const option = attribute.replace('tooltip', '');
+    return option.charAt(0).toLowerCase() + option.slice(1);
+};
+
+/*
+    Приводит опцию arrow к единому виду { active, centered, padding }.
+    Поддерживает булево значение для обратной совместимости: arrow: true/false
+*/
+const normalizeArrow = (arrow) => {
+    const defaults = { active: Boolean(arrow), centered: false, padding: undefined };
+    return typeof arrow === 'object' && arrow !== null ? { ...defaults, active: true, ...arrow } : defaults;
+};
+
+// Слушатель visibilitychange один на всю страницу
 let visibilityListenerRegistered = false;
+
+/*
+    Подсказки, оставшиеся открытыми при уходе со страницы, скрываются,
+    а их отложенный показ отменяется
+*/
 const handleVisibilityChange = () => {
-        if (document.hidden) {
-            // Скрываем все активные всплывающие подсказки
-            for (const $tooltip of document.querySelectorAll('.tooltip')) {
-                const ref = $tooltip._reference;
-                if (ref?._tooltip) {
-                    // Очищаем таймеры появления при скрытии страницы
-                    clearTimeout(ref._tooltip._showTimeout);
-                    if (ref._tooltip.isVisible) {
-                        ref._tooltip.hide({ immediately: true });
-                    }
+    if (document.hidden) {
+        for (const $tooltip of document.querySelectorAll('.tooltip')) {
+            const ref = $tooltip._reference;
+            if (ref?._tooltip) {
+                clearTimeout(ref._tooltip._showTimeout);
+                if (ref._tooltip.isVisible) {
+                    ref._tooltip.hide({ immediately: true });
                }
            }
        }
-    },
-    templates = {
-        arrow: () => `
+    }
+};
+
+const templates = {
+    arrow: () => `
        <div class="tooltip__arrow" style="pointer-events: none; position: absolute; transform: rotate(45deg);"></div>
    `,
-        interactiveHelper: () => `
+    interactiveHelper: () => `
        <div class="tooltip__interactive-helper" style="position: absolute; z-index: -1;"></div>
    `,
-    };
+};

-export const createTooltip = ($el, content, options) => {
-    options = {
+export const createTooltip = ($el, initialContent, initialOptions) => {
+    let content = initialContent;
+    const options = {
        animation: [
            [{ opacity: 0 }, { opacity: 1 }],
            [{ opacity: 1 }, { opacity: 0 }],
@@ -52,7 +68,7 @@ export const createTooltip = ($el, content, options) => {
        trigger: 'mouseenter click',
        virtualReference: undefined,
        zIndex: '',
-        ...options,
+        ...initialOptions,
    };

    for (const [key, value] of Object.entries($el.dataset)) {
@@ -65,9 +81,82 @@ export const createTooltip = ($el, content, options) => {
        }
    }

+    /*
+        Нормализуем arrow после применения data-атрибутов,
+        чтобы поддержать и объект, и булево значение
+    */
+    options.arrow = normalizeArrow(options.arrow);
+
    let rafId;
    const listeners = [];

+    const registerListeners = () => {
+        for (const trigger of options.trigger.split(' ')) {
+            switch (trigger) {
+                case 'mouseenter': {
+                    $el.addEventListener('pointerenter', $el._tooltip.mouseEnterListener);
+                    listeners.push({ el: $el, event: 'pointerenter', listener: $el._tooltip.mouseEnterListener });
+
+                    $el.addEventListener('pointerleave', $el._tooltip.mouseLeaveListener);
+                    listeners.push({ el: $el, event: 'pointerleave', listener: $el._tooltip.mouseLeaveListener });
+                    break;
+                }
+                case 'click': {
+                    $el.addEventListener('click', $el._tooltip.clickListener);
+                    listeners.push({ el: $el, event: 'click', listener: $el._tooltip.clickListener });
+
+                    if (!options.interactive) {
+                        $el.addEventListener('pointerleave', $el._tooltip.mouseLeaveListener);
+                        listeners.push({ el: $el, event: 'pointerleave', listener: $el._tooltip.mouseLeaveListener });
+                    }
+                    break;
+                }
+                case 'focus': {
+                    $el.addEventListener('focus', $el._tooltip.focusListener);
+                    listeners.push({ el: $el, event: 'focus', listener: $el._tooltip.focusListener });
+                    break;
+                }
+                case 'blur': {
+                    $el.addEventListener('blur', $el._tooltip.blurListener);
+                    listeners.push({ el: $el, event: 'blur', listener: $el._tooltip.blurListener });
+                    break;
+                }
+                default: {
+                    break;
+                }
+            }
+        }
+    };
+
+    // Проигрывает анимацию появления (0) или скрытия (1) на корне подсказки
+    const animateRoot = async (index, immediately) => {
+        try {
+            const animation = $el._tooltip.$tooltip.querySelector('.tooltip__root').animate(options.animation[index], {
+                duration: immediately ? 0 : options.duration[index],
+                easing: options.easing[index],
+            });
+            $el._tooltip._currentAnimation = animation;
+            await animation.finished;
+        } catch {} // eslint-disable-line no-empty
+    };
+
+    // Добавляет стрелку, если она включена и ещё не создана
+    const mountArrow = () => {
+        if (options.arrow.active && !$el._tooltip.$arrow && $el._tooltip.$tooltip) {
+            $el._tooltip.$tooltip.querySelector('.tooltip__root').insertAdjacentHTML('afterbegin', templates.arrow());
+            $el._tooltip.$arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
+            // Со стрелкой набор middleware другой
+            $el._tooltip._middleware = undefined;
+        }
+    };
+
+    // Удаляет стрелку из разметки
+    const unmountArrow = () => {
+        $el._tooltip.$arrow?.remove();
+        $el._tooltip.$arrow = undefined;
+        $el._tooltip._middleware = undefined;
+    };
+
    $el._tooltip = {
        options,
        isVisible: false,
@@ -75,11 +164,24 @@ export const createTooltip = ($el, content, options) => {
        $container: undefined,
        $arrow: undefined,
        $interactive: undefined,
+        // Кэши позиционирования
+        _side: undefined,
+        _middleware: undefined,
        _showTimeout: undefined,
        _hideTimeout: undefined,
        _currentAnimation: undefined,
-        autoUpdateCleanup: () => {},
-        updatePosition: async () => {},
+        // Счётчик поколений show/hide: отменяет устаревшие асинхронные операции
+        _generation: 0,
+        /*
+            Заглушки до первого show(): настоящие функции создаются в show().
+            Нужны, чтобы вызовы из updateOptions/destroy не падали с ошибкой
+        */
+        autoUpdateCleanup: () => {
+            // Переопределяется в show() после первого показа
+        },
+        updatePosition: () => {
+            // Переопределяется в show() после первого показа
+        },

        setContent(updatedContent) {
            if (updatedContent !== undefined) {
@@ -100,17 +202,33 @@ export const createTooltip = ($el, content, options) => {
                options[name] = value;
            }

-            if (updatedOptions.arrow !== undefined && $el._tooltip.$tooltip) {
-                if (options.arrow) {
-                    if (!$el._tooltip.$arrow) {
-                        $el._tooltip.$tooltip
-                            .querySelector('.tooltip__root')
-                            .insertAdjacentHTML('afterbegin', templates.arrow());
-                        $el._tooltip.$arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
+            if (
+                updatedOptions.offset !== undefined ||
+                updatedOptions.shiftPadding !== undefined ||
+                updatedOptions.arrow !== undefined
+            ) {
+                $el._tooltip._middleware = undefined;
+            }
+            if (
+                updatedOptions.placement !== undefined ||
+                updatedOptions.offset !== undefined ||
+                updatedOptions.interactive !== undefined
+            ) {
+                $el._tooltip._side = undefined;
+            }
+
+            if (updatedOptions.arrow !== undefined) {
+                /*
+                    Опция могла прийти булевым значением — приводим к единому виду.
+                    Нормализуем всегда, даже если подсказка ещё не создана
+                */
+                options.arrow = normalizeArrow(options.arrow);
+                if ($el._tooltip.$tooltip) {
+                    if (options.arrow.active) {
+                        mountArrow();
+                    } else {
+                        unmountArrow();
                    }
-                } else {
-                    $el._tooltip.$arrow?.remove();
-                    $el._tooltip.$arrow = undefined;
                }
            }

@@ -137,17 +255,13 @@ export const createTooltip = ($el, content, options) => {
            }

            if (updatedOptions.theme !== undefined && $el._tooltip.$tooltip) {
-                const classIndex = [...$el._tooltip.$tooltip.classList].findIndex((className) =>
+                const themeClass = [...$el._tooltip.$tooltip.classList].find((className) =>
                    className.startsWith('tooltip_theme_'),
                );
-                if (classIndex === -1) {
-                    $el._tooltip.$tooltip.classList.add(`tooltip_theme_${options.theme}`);
-                } else {
-                    $el._tooltip.$tooltip.classList.replace(
-                        $el._tooltip.$tooltip.classList[classIndex],
-                        `tooltip_theme_${options.theme}`,
-                    );
+                if (themeClass) {
+                    $el._tooltip.$tooltip.classList.remove(themeClass);
                }
+                $el._tooltip.$tooltip.classList.add(`tooltip_theme_${options.theme}`);
            }

            if (updatedOptions.zIndex !== undefined && $el._tooltip.$tooltip) {
@@ -171,7 +285,7 @@ export const createTooltip = ($el, content, options) => {

            $el._tooltip.$tooltip?.remove();

-            // Вызываем autoUpdateCleanup только если всплывающая подсказка была видна (иначе вызывать её не имеет смысла)
+            // autoUpdateCleanup нужен только для показанной подсказки
            if ($el._tooltip.isVisible) {
                $el._tooltip.autoUpdateCleanup();
            }
@@ -187,16 +301,20 @@ export const createTooltip = ($el, content, options) => {
        },
    };

-    if (options.onCreate) {
-        options.onCreate($el._tooltip);
-    }
-
    $el._tooltip.show = async ({ immediately } = {}) => {
        clearTimeout($el._tooltip._hideTimeout);
+        clearTimeout($el._tooltip._showTimeout);
+
+        $el._tooltip._generation += 1;
+        const generation = $el._tooltip._generation;
+
+        const { computePosition, autoUpdate, offset, flip, shift, arrow } = await import('@floating-ui/dom');
+
+        if (generation !== $el._tooltip._generation) {
+            return;
+        }

        if (!$el._tooltip.$tooltip) {
-            const { computePosition, offset, flip, shift, arrow } = await import('@floating-ui/dom');
-
            $el._tooltip.$tooltip = document.createElement('div');
            $el._tooltip.$tooltip._reference = $el;
            $el._tooltip.$tooltip.classList.add('tooltip', `tooltip_theme_${options.theme}`);
@@ -205,38 +323,60 @@ export const createTooltip = ($el, content, options) => {
            $el._tooltip.$tooltip.innerHTML = `
                <div class="tooltip__root">
                    ${options.interactive ? templates.interactiveHelper() : ''}
-                    ${options.arrow ? templates.arrow() : ''}
                    <div class="tooltip__container"></div>
                </div>
            `;

            $el._tooltip.$container = $el._tooltip.$tooltip.querySelector('.tooltip__container');
-            $el._tooltip.$arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
            $el._tooltip.$interactive = $el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper');

            $el._tooltip.setContent();
+            mountArrow();
+
+            const buildMiddleware = () => {
+                const arrowSize = $el._tooltip.$arrow?.offsetWidth ?? 0;
+                return [
+                    offset({ mainAxis: options.offset[1], crossAxis: options.offset[0] }),
+                    flip(),
+                    shift({
+                        padding: {
+                            top: options.shiftPadding[1],
+                            right: options.shiftPadding[0],
+                            bottom: options.shiftPadding[1],
+                            left: options.shiftPadding[0],
+                        },
+                    }),
+                    arrow({
+                        element: $el._tooltip.$arrow,
+                        /*
+                            Отступ стрелки от краёв подсказки. По умолчанию считаем из размера стрелки:
+                            квадрат со стороной size, повёрнутый на 45°, выступает за свою рамку
+                            на (√2 − 1) / 2 · size — это не даёт его углам вылезать за границы.
+                            Можно задать вручную через arrow.padding
+                        */
+                        padding: options.arrow.padding ?? Math.ceil(((Math.SQRT2 - 1) / 2) * arrowSize),
+                    }),
+                ];
+            };

            $el._tooltip.updatePosition = () => {
                cancelAnimationFrame(rafId);
                rafId = requestAnimationFrame(async () => {
+                    /*
+                        Все чтения геометрии делаем до первой записи стилей, иначе браузер
+                        вынужден делать принудительный reflow на каждом кадре прокрутки
+                    */
+                    const tooltipWidth = $el._tooltip.$tooltip.offsetWidth;
+                    const tooltipHeight = $el._tooltip.$tooltip.offsetHeight;
+                    const arrowWidth = $el._tooltip.$arrow?.offsetWidth ?? 0;
+                    const arrowHeight = $el._tooltip.$arrow?.offsetHeight ?? 0;
+
                    const { x, y, placement, middlewareData } = await computePosition(
                        options.virtualReference ?? $el,
                        $el._tooltip.$tooltip,
                        {
                            placement: options.placement,
-                            middleware: [
-                                offset({ mainAxis: options.offset[1], crossAxis: options.offset[0] }),
-                                flip(),
-                                shift({
-                                    padding: {
-                                        top: options.shiftPadding[1],
-                                        right: options.shiftPadding[0],
-                                        bottom: options.shiftPadding[1],
-                                        left: options.shiftPadding[0],
-                                    },
-                                }),
-                                arrow({ element: $el._tooltip.$arrow }),
-                            ],
+                            middleware: ($el._tooltip._middleware ??= buildMiddleware()),
                        },
                    );

@@ -244,31 +384,52 @@ export const createTooltip = ($el, content, options) => {
                        transform: `translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`,
                    });

-                    const side = placement.split('-')[0],
-                        staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[side];
+                    const side = placement.split('-')[0];
+                    const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[side];

-                    $el._tooltip.$tooltip.classList.remove(
-                        'tooltip_side_top',
-                        'tooltip_side_bottom',
-                        'tooltip_side_left',
-                        'tooltip_side_right',
-                    );
-                    $el._tooltip.$tooltip.classList.add(`tooltip_side_${side}`);
+                    // Стили стороны применяем только при её смене
+                    if (side !== $el._tooltip._side) {
+                        $el._tooltip._side = side;

-                    if ($el._tooltip.$interactive) {
-                        Object.assign($el._tooltip.$interactive.style, {
-                            width: side === 'left' || side === 'right' ? `${options.offset[1]}px` : '100%',
-                            height: side === 'top' || side === 'bottom' ? `${options.offset[1]}px` : '100%',
-                            [staticSide]: `-${options.offset[1]}px`,
-                        });
+                        $el._tooltip.$tooltip.classList.remove(
+                            'tooltip_side_top',
+                            'tooltip_side_bottom',
+                            'tooltip_side_left',
+                            'tooltip_side_right',
+                        );
+                        $el._tooltip.$tooltip.classList.add(`tooltip_side_${side}`);
+
+                        if ($el._tooltip.$interactive) {
+                            Object.assign($el._tooltip.$interactive.style, {
+                                width: side === 'left' || side === 'right' ? `${options.offset[1]}px` : '100%',
+                                height: side === 'top' || side === 'bottom' ? `${options.offset[1]}px` : '100%',
+                                [staticSide]: `-${options.offset[1]}px`,
+                            });
+                        }
                    }

                    if ($el._tooltip.$arrow && middlewareData.arrow) {
-                        const { x, y } = middlewareData.arrow;
-                        Object.assign($el._tooltip.$arrow.style, {
+                        const { $arrow } = $el._tooltip;
+                        let { x, y } = middlewareData.arrow;
+
+                        /*
+                            centered: фиксируем стрелку по центру подсказки, чтобы она не смещалась
+                            вслед за опорным элементом при прокрутке (например, когда подсказка
+                            прижата к краю экрана). Ось центрирования зависит от стороны:
+                            для left/right — вертикаль, для top/bottom — горизонталь
+                        */
+                        if (options.arrow.centered) {
+                            if (side === 'left' || side === 'right') {
+                                y = (tooltipHeight - arrowHeight) / 2;
+                            } else {
+                                x = (tooltipWidth - arrowWidth) / 2;
+                            }
+                        }
+
+                        Object.assign($arrow.style, {
                            left: x === undefined ? '' : `${x}px`,
                            top: y === undefined ? '' : `${y}px`,
-                            [staticSide]: `-${$el._tooltip.$arrow.offsetWidth / 2}px`,
+                            [staticSide]: `-${arrowWidth / 2}px`,
                        });
                    }
                });
@@ -279,14 +440,16 @@ export const createTooltip = ($el, content, options) => {
            }
        }

-        const { autoUpdate } = await import('@floating-ui/dom');
-
        $el._tooltip._showTimeout = setTimeout(
            async () => {
-                const isMouseEnterTrigger = options.trigger.includes('mouseenter'),
-                    isHovering = $el.matches(':hover');
+                if (generation !== $el._tooltip._generation) {
+                    return;
+                }

-                // Проверяем $el._tooltip на сущестование и актуальность показа всплывающей подсказки
+                const isMouseEnterTrigger = options.trigger.includes('mouseenter');
+                const isHovering = $el.matches(':hover');
+
+                // За время задержки состояние могло измениться
                if (
                    !$el._tooltip ||
                    $el._tooltip.isVisible ||
@@ -298,31 +461,25 @@ export const createTooltip = ($el, content, options) => {

                (options.appendTo === 'parent' ? $el.parentElement : options.appendTo).append($el._tooltip.$tooltip);
                $el._tooltip.isVisible = true;
-                $el._tooltip.autoUpdateCleanup = autoUpdate($el, $el._tooltip.$tooltip, $el._tooltip.updatePosition);
+                $el._tooltip.autoUpdateCleanup = autoUpdate(
+                    options.virtualReference ?? $el,
+                    $el._tooltip.$tooltip,
+                    $el._tooltip.updatePosition,
+                );

                if (options.hideOnClick && (options.trigger.includes('click') || options.trigger.includes('manual'))) {
                    document.body.addEventListener('click', $el._tooltip.hideOnClickListener);
-                    listeners.push({
-                        el: document.body,
-                        event: 'click',
-                        listener: $el._tooltip.hideOnClickListener,
-                    });
                }

                if (options.onShow) {
                    options.onShow($el._tooltip);
                }

-                try {
-                    const animation = $el._tooltip.$tooltip
-                        .querySelector('.tooltip__root')
-                        .animate(options.animation[0], {
-                            duration: immediately ? 0 : options.duration[0],
-                            easing: options.easing[0],
-                        });
-                    $el._tooltip._currentAnimation = animation;
-                    await animation.finished;
-                } catch {} // eslint-disable-line no-empty
+                await animateRoot(0, immediately);
+
+                if (generation !== $el._tooltip._generation) {
+                    return;
+                }

                if (options.onShown) {
                    options.onShown($el._tooltip);
@@ -334,9 +491,17 @@ export const createTooltip = ($el, content, options) => {

    $el._tooltip.hide = ({ immediately } = {}) => {
        clearTimeout($el._tooltip._showTimeout);
+
+        $el._tooltip._generation += 1;
+        const generation = $el._tooltip._generation;
+
        $el._tooltip._hideTimeout = setTimeout(
            async () => {
-                // Проверяем $el._tooltip на сущестование
+                if (generation !== $el._tooltip._generation) {
+                    return;
+                }
+
+                // Подсказку могли удалить или скрыть за время задержки
                if (!$el._tooltip || !$el._tooltip.isVisible) {
                    return;
                }
@@ -347,19 +512,10 @@ export const createTooltip = ($el, content, options) => {

                document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);

-                try {
-                    const animation = $el._tooltip.$tooltip
-                        .querySelector('.tooltip__root')
-                        .animate(options.animation[1], {
-                            duration: immediately ? 0 : options.duration[1],
-                            easing: options.easing[1],
-                        });
-                    $el._tooltip._currentAnimation = animation;
-                    await animation.finished;
-                } catch {} // eslint-disable-line no-empty
+                await animateRoot(1, immediately);

-                // Ещё одна проверка на сущестование $el._tooltip после await
-                if (!$el._tooltip) {
+                // Пока шла анимация, подсказку могли скрыть повторно или удалить
+                if (generation !== $el._tooltip._generation || !$el._tooltip) {
                    return;
                }

@@ -446,45 +602,15 @@ export const createTooltip = ($el, content, options) => {
        $el._tooltip.hide();
    };

-    const registerListeners = () => {
-        for (const trigger of options.trigger.split(' ')) {
-            switch (trigger) {
-                case 'mouseenter': {
-                    $el.addEventListener('pointerenter', $el._tooltip.mouseEnterListener);
-                    listeners.push({ el: $el, event: 'pointerenter', listener: $el._tooltip.mouseEnterListener });
-
-                    $el.addEventListener('pointerleave', $el._tooltip.mouseLeaveListener);
-                    listeners.push({ el: $el, event: 'pointerleave', listener: $el._tooltip.mouseLeaveListener });
-                    break;
-                }
-                case 'click': {
-                    $el.addEventListener('click', $el._tooltip.clickListener);
-                    listeners.push({ el: $el, event: 'click', listener: $el._tooltip.clickListener });
-
-                    if (!options.interactive) {
-                        $el.addEventListener('pointerleave', $el._tooltip.mouseLeaveListener);
-                        listeners.push({ el: $el, event: 'pointerleave', listener: $el._tooltip.mouseLeaveListener });
-                    }
-                    break;
-                }
-                case 'focus': {
-                    $el.addEventListener('focus', $el._tooltip.focusListener);
-                    listeners.push({ el: $el, event: 'focus', listener: $el._tooltip.focusListener });
-                    break;
-                }
-                case 'blur': {
-                    $el.addEventListener('blur', $el._tooltip.blurListener);
-                    listeners.push({ el: $el, event: 'blur', listener: $el._tooltip.blurListener });
-                    break;
-                }
-            }
-        }
-    };
-
    registerListeners();

    if (!visibilityListenerRegistered) {
        document.addEventListener('visibilitychange', handleVisibilityChange);
        visibilityListenerRegistered = true;
    }
+
+    // Вызываем onCreate в конце, когда все методы и слушатели уже инициализированы
+    if (options.onCreate) {
+        options.onCreate($el._tooltip);
+    }
 };
@@ -1,6 +1,6 @@
 {
  "name": "@advdominion/tooltip",
-  "version": "7.0.2",
+  "version": "7.1.1",
  "type": "module",
  "main": "index.js",
  "repository": {
Author	SHA1	Message	Date
valentinsilyutin	7dc956cdab	@advdominion/lightbox-gallery@5.1.0	2026-10-10 22:46:05 +04:00
valentinsilyutin	00c2d2bbbb	Удалена Lerna	2026-09-24 21:54:19 +04:00
valentinsilyutin	dcc176f61a	Publish - @advdominion/tooltip@7.1.1	2026-09-24 21:45:58 +04:00
valentinsilyutin	ff07b85241	Новая версия tooltip	2026-09-24 21:45:32 +04:00
valentinsilyutin	15298ef68f	Fix CHANGELOG.md	2026-09-24 21:20:46 +04:00
valentinsilyutin	68a0bd8025	Publish - @advdominion/tooltip@7.1.0	2026-09-24 16:51:07 +04:00
valentinsilyutin	f76c615286	Новая версия tooltip	2026-09-24 16:50:42 +04:00
valentinsilyutin	c5a92339ec	Обновлены зависимости	2026-09-24 16:03:28 +04:00