@sequent-org/moodboard 1.4.55 → 1.4.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.4.55",
+  "version": "1.4.57",
   "type": "module",
   "description": "Interactive moodboard",
   "main": "./src/index.js",

package/src/core/commands/PasteObjectCommand.js

@@ -87,7 +87,13 @@ export class PasteObjectCommand extends BaseCommand {
         
         // Создаем PIXI объект
         this.coreMoodboard.pixi.createObject(this.newObjectData);
-        
+
+        // Уведомляем слои (HtmlTextLayer и др.), которые ждут { objectId, objectData }
+        this.coreMoodboard.eventBus.emit(Events.Object.Created, {
+            objectId: this.newObjectId,
+            objectData: this.newObjectData,
+        });
+
         this.emit(Events.Object.Pasted, {
             originalId: originalData.id,
             newId: this.newObjectId,

package/src/core/commands/UpdateContentCommand.js

@@ -47,6 +47,14 @@ export class UpdateContentCommand extends BaseCommand {
             if (!object.properties) {
                 object.properties = {};
             }
+            // Пересчитываем диапазоны ссылок при изменении контента
+            if (Array.isArray(object.properties.links) && object.properties.links.length > 0) {
+                object.properties.links = _adjustLinks(
+                    object.properties.links,
+                    object.properties.content ?? '',
+                    content
+                );
+            }
             object.properties.content = content;
 
             const isMindmap = object.type === 'mindmap';
@@ -93,3 +101,44 @@ export class UpdateContentCommand extends BaseCommand {
         });
     }
 }
+
+/**
+ * Пересчитывает диапазоны ссылок после изменения контента.
+ * Алгоритм: находим наибольший общий префикс и суффикс, определяем
+ * изменённый диапазон; ссылки внутри него удаляем, за ним — сдвигаем.
+ * @param {Array<{start:number,end:number,url:string}>} links
+ * @param {string} oldText
+ * @param {string} newText
+ * @returns {Array<{start:number,end:number,url:string}>}
+ */
+function _adjustLinks(links, oldText, newText) {
+    if (!links || links.length === 0) return links;
+
+    let prefixLen = 0;
+    const minLen = Math.min(oldText.length, newText.length);
+    while (prefixLen < minLen && oldText[prefixLen] === newText[prefixLen]) prefixLen++;
+
+    let oldSuffix = 0;
+    while (
+        oldSuffix < oldText.length - prefixLen &&
+        oldSuffix < newText.length - prefixLen &&
+        oldText[oldText.length - 1 - oldSuffix] === newText[newText.length - 1 - oldSuffix]
+    ) oldSuffix++;
+
+    const oldChangeEnd = oldText.length - oldSuffix; // конец изменённого диапазона в старом тексте
+    const newChangeEnd = newText.length - oldSuffix;  // конец изменённого диапазона в новом тексте
+    const delta = newChangeEnd - oldChangeEnd;         // сдвиг для символов после изменения
+
+    return links.reduce((acc, link) => {
+        const { start, end, url } = link;
+        if (end <= prefixLen) {
+            // Ссылка полностью в неизменённом префиксе — оставляем
+            acc.push({ start, end, url });
+        } else if (start >= oldChangeEnd) {
+            // Ссылка полностью после изменения — сдвигаем
+            acc.push({ start: start + delta, end: end + delta, url });
+        }
+        // Ссылка перекрывает изменённый диапазон — удаляем (стала некорректной)
+        return acc;
+    }, []);
+}

package/src/core/flows/ObjectLifecycleFlow.js

@@ -309,7 +309,16 @@ export function setupObjectLifecycleFlow(core) {
         const objects = core.state.getObjects();
         const object = objects.find(obj => obj.id === data.objectId);
         if (object) {
-            data.size = { width: object.width, height: object.height };
+            let w = object.width;
+            let h = object.height;
+            if (typeof w !== 'number' || typeof h !== 'number') {
+                const pixiObj = core.pixi.objects.get(data.objectId);
+                if (pixiObj) {
+                    if (typeof w !== 'number') w = pixiObj.width;
+                    if (typeof h !== 'number') h = pixiObj.height;
+                }
+            }
+            data.size = { width: w, height: h };
         }
     });
 

package/src/initNoBundler.js

@@ -203,9 +203,9 @@ export function injectCriticalStyles() {
             min-height: 20px;
         }
         
-        .current-color-button, .current-bgcolor-button, .fpp-color-button {
-            width: 28px !important;
-            height: 28px !important;
+        .current-color-button, .fpp-color-button {
+            width: 24px !important;
+            height: 24px !important;
             border: 1px solid #ddd;
             border-radius: 50%;
             cursor: pointer;
@@ -214,6 +214,18 @@ export function injectCriticalStyles() {
             display: block;
             box-sizing: border-box;
         }
+
+        .current-bgcolor-button {
+            width: 20px !important;
+            height: 20px !important;
+            border: none;
+            border-radius: 50%;
+            cursor: pointer;
+            margin: 0;
+            padding: 0;
+            display: block;
+            box-sizing: border-box;
+        }
         
         /* Скрыть до полной загрузки стилей */
         .moodboard-toolbar__popup {
@@ -356,9 +368,9 @@ export function forceInjectPanelStyles() {
         }
         
         .font-select { min-width: 110px !important; }
-        .font-size-select { min-width: 56px !important; }
+        .font-size-select { min-width: 32px !important; }
         
-        .current-color-button, .current-bgcolor-button, .fpp-color-button {
+        .current-color-button, .fpp-color-button {
             width: 28px !important;
             height: 28px !important;
             border: 1px solid #ddd !important;
@@ -369,6 +381,18 @@ export function forceInjectPanelStyles() {
             display: block !important;
             box-sizing: border-box !important;
         }
+
+        .current-bgcolor-button {
+            width: 20px !important;
+            height: 20px !important;
+            border: none !important;
+            border-radius: 50% !important;
+            cursor: pointer !important;
+            margin: 0 !important;
+            padding: 0 !important;
+            display: block !important;
+            box-sizing: border-box !important;
+        }
     `;
 
     const style = document.createElement('style');

package/src/tools/object-tools/TextTool.js

@@ -108,7 +108,6 @@ export class TextTool extends BaseTool {
     startEditingNew(textData, x, y) {
         this.isEditing = true;
         this.editingObject = textData;
-        
         this.createTextInput(x, y, '');
         this.emit('text:edit:start', { object: textData });
     }
@@ -166,7 +165,7 @@ export class TextTool extends BaseTool {
         });
         
         // Обработчики событий input
-        this.textInput.addEventListener('blur', () => this.finishEditing());
+        this.textInput.addEventListener('blur', (e) => this.handleBlur(e));
         this.textInput.addEventListener('keydown', (e) => this.handleInputKeys(e));
         this.textInput.addEventListener('input', (e) => this.handleTextChange(e));
         
@@ -183,6 +182,13 @@ export class TextTool extends BaseTool {
         this.adjustInputSize();
     }
     
+    /**
+     * Обработка blur
+     */
+    handleBlur(event) {
+        this.finishEditing();
+    }
+    
     /**
      * Обработка клавиш в input
      */
@@ -328,7 +334,7 @@ export class TextTool extends BaseTool {
         // TODO: Реализовать поиск текстового объекта по координатам
         return null; // Временная заглушка
     }
-    
+
     /**
      * Обработка клавиш во время редактирования (глобальные)
      */

package/src/tools/object-tools/selection/SelectInputRouter.js

@@ -1,7 +1,7 @@
 import { Events } from '../../../core/events/Events.js';
 
 const DRAG_START_THRESHOLD_PX = 4;
-const TEXT_EDITOR_STYLE_KEYS = ['fontFamily', 'fontSize', 'color', 'backgroundColor', 'markdown', 'bold', 'italic', 'underline', 'strikethrough', 'textAlign', 'lineHeight', 'listType', 'listChecked'];
+const TEXT_EDITOR_STYLE_KEYS = ['fontFamily', 'fontSize', 'color', 'highlightColor', 'backgroundColor', 'markdown', 'bold', 'italic', 'underline', 'strikethrough', 'textAlign', 'lineHeight', 'listType', 'listChecked'];
 
 function pickTextEditorProperties(properties = {}) {
     const picked = {};

package/src/tools/object-tools/selection/TextEditorInteractionController.js

@@ -92,7 +92,9 @@ export function createTextEditorFinalize(controller, {
                 const scaleX = worldLayerRef?.scale?.x || 1;
                 const viewResLocal = (controller.app?.renderer?.resolution) || (view.width && view.clientWidth ? (view.width / view.clientWidth) : 1);
                 const wPx = Math.max(1, wrapper.offsetWidth);
-                const hPx = Math.max(1, wrapper.offsetHeight);
+                const _taStyle = typeof window !== 'undefined' ? window.getComputedStyle(textarea) : null;
+                const _taPaddingV = _taStyle ? (parseFloat(_taStyle.paddingTop) || 0) + (parseFloat(_taStyle.paddingBottom) || 0) : 0;
+                const hPx = Math.max(1, wrapper.offsetHeight - _taPaddingV);
                 const newW = Math.max(1, Math.round(wPx * viewResLocal / scaleX));
                 const newH = Math.max(1, Math.round(hPx * viewResLocal / scaleX));
                 const sizeReq = { objectId, size: null };
@@ -135,14 +137,22 @@ export function createTextEditorFinalize(controller, {
             const worldLayerRef = controller.textEditor.world || (controller.app?.stage);
             const scaleX = worldLayerRef?.scale?.x || 1;
             const wPx = Math.max(1, wrapper.offsetWidth);
-            const hPx = Math.max(1, wrapper.offsetHeight);
+            const _taStyle2 = typeof window !== 'undefined' ? window.getComputedStyle(textarea) : null;
+            const _taPaddingV2 = _taStyle2 ? (parseFloat(_taStyle2.paddingTop) || 0) + (parseFloat(_taStyle2.paddingBottom) || 0) : 0;
+            const hPx = Math.max(1, wrapper.offsetHeight - _taPaddingV2);
             const wWorld = Math.max(1, Math.round(wPx * viewRes / scaleX));
             const hWorld = Math.max(1, Math.round(hPx * viewRes / scaleX));
             controller.eventBus.emit(Events.UI.ToolbarAction, {
                 type: objectType,
                 id: objectType,
                 position: { x: position.x, y: position.y },
-                properties: { content: value, fontSize, width: wWorld, height: hWorld },
+                properties: { 
+                    content: value, 
+                    fontSize, 
+                    width: wWorld, 
+                    height: hWorld,
+                    highlightColor: properties.highlightColor
+                },
             });
         } else {
             if (isNewCreation) {
@@ -164,6 +174,22 @@ export function createTextEditorFinalize(controller, {
     };
 }
 
+// Классы DOM-элементов, клики по которым не должны закрывать пустой текстовый редактор.
+const UI_BLOCK_SELECTOR = [
+    '.moodboard-toolbar',
+    '.text-properties-layer',
+    '.moodboard-topbar',
+    '.moodboard-zoom-panel',
+    '.moodboard-ui-layer',
+].join(', ');
+
+/**
+ * Возвращает true, если элемент находится внутри UI-панелей (тулбар, панель свойств текста и т.п.).
+ */
+function _isInsideToolbarUI(target) {
+    return !!(target && typeof target.closest === 'function' && target.closest(UI_BLOCK_SELECTOR));
+}
+
 export function bindTextEditorInteractions(controller, {
     textarea,
     isNewCreation,
@@ -192,6 +218,46 @@ export function bindTextEditorInteractions(controller, {
         }, 0);
     };
 
+    // Перехватываем mousedown на тулбаре/панелях в capture-фазе, чтобы:
+    // 1. Предотвратить потерю фокуса textarea (e.preventDefault()).
+    // 2. Заблокировать последующий click до ToolbarActionRouter (одноразовый capture-обработчик).
+    // Работает только пока поле ввода пусто и объект только что создан — если текст уже есть,
+    // клик по другому инструменту отрабатывает штатно (commit + переключение).
+    let _pendingClickBlocker = null;
+    const mousedownCaptureHandler = (e) => {
+        if (!controller?.textEditor?.active) return;
+        if (e.target === textarea) return;
+        if (!_isInsideToolbarUI(e.target)) return;
+
+        const value = (textarea.value || '').trim();
+        if (!isNewCreation || value.length > 0) return;
+
+        // Пустое новое поле + клик по UI: не даём сместить фокус с textarea.
+        e.preventDefault();
+
+        // Блокируем следующий click-события, чтобы ToolbarActionRouter не переключил инструмент.
+        if (_pendingClickBlocker) {
+            document.removeEventListener('click', _pendingClickBlocker, true);
+        }
+        _pendingClickBlocker = (ce) => {
+            if (_isInsideToolbarUI(ce.target)) {
+                ce.stopPropagation();
+                ce.preventDefault();
+            }
+            document.removeEventListener('click', _pendingClickBlocker, true);
+            _pendingClickBlocker = null;
+        };
+        document.addEventListener('click', _pendingClickBlocker, true);
+
+        // Страховочный возврат фокуса на случай, если браузер всё-таки убрал фокус.
+        setTimeout(() => {
+            if (controller?.textEditor?.active && textarea) {
+                try { textarea.focus(); } catch (_) {}
+            }
+        }, 0);
+    };
+    document.addEventListener('mousedown', mousedownCaptureHandler, true);
+
     const keydownHandler = (e) => {
         const isList = listType && listType !== 'none';
         if (e.key === 'Enter') {
@@ -244,6 +310,11 @@ export function bindTextEditorInteractions(controller, {
         textarea.removeEventListener('blur', blurHandler);
         textarea.removeEventListener('keydown', keydownHandler);
         textarea.removeEventListener('input', inputHandler);
+        document.removeEventListener('mousedown', mousedownCaptureHandler, true);
+        if (_pendingClickBlocker) {
+            document.removeEventListener('click', _pendingClickBlocker, true);
+            _pendingClickBlocker = null;
+        }
     };
 
     if (controller.textEditor) {
@@ -316,14 +387,18 @@ export function closeTextEditorFromState(controller, commit) {
         }
         return;
     }
-    if (objectId == null) {
-        controller.eventBus.emit(Events.UI.ToolbarAction, {
-            type: objectType,
-            id: objectType,
-            position: { x: position.x, y: position.y },
-            properties: { content: value, fontSize: properties.fontSize },
-        });
-    } else {
+        if (objectId == null) {
+            controller.eventBus.emit(Events.UI.ToolbarAction, {
+                type: objectType,
+                id: objectType,
+                position: { x: position.x, y: position.y },
+                properties: { 
+                    content: value, 
+                    fontSize: properties.fontSize,
+                    highlightColor: properties.highlightColor
+                },
+            });
+        } else {
         if (isNewCreation) {
             const oldContent = typeof initialContent === 'string' ? initialContent : '';
             controller.eventBus.emit(Events.Object.ContentChange, {

package/src/tools/object-tools/selection/TextInlineEditorController.js

@@ -437,7 +437,7 @@ export function openTextEditor(object, create = false) {
         // +25% — запас на Caveat vs Arial: при незагруженном Caveat span рендерится в Arial,
         // а Caveat (рукописный шрифт) заметно шире для кириллицы.
         const startWidth = Math.max(1, Math.ceil(measureTextEditorPlaceholderWidth(textarea, 'Напишите что-нибудь') * 1.25));
-        const startHeight = Math.max(1, lhInitial - BASELINE_FIX + 10); // +5px сверху и +5px снизу
+        const startHeight = Math.max(1, lhInitial - BASELINE_FIX + 2); // +1px сверху и +1px снизу (паддинги textarea)
         textarea.style.width = `${startWidth}px`;
         textarea.style.height = `${startHeight}px`;
         wrapper.style.width = `${startWidth}px`;
@@ -502,7 +502,7 @@ export function openTextEditor(object, create = false) {
         wrapper,
         world: this.textEditor.world,
         position,
-        properties: { fontSize },
+        properties: { fontSize, highlightColor: properties.highlightColor },
         objectType,
         listType: properties.listType || 'none',
         _phStyle: styleEl,

package/src/ui/FramePropertiesPanel.js

@@ -1043,7 +1043,14 @@ export class FramePropertiesPanel {
             const isOpen = dropdown.classList.contains('is-open');
             this._closeMenus();
             if (!isOpen) {
+                const rect = mainBtn.getBoundingClientRect();
+                dropdown.style.top = (rect.bottom + 6) + 'px';
+                dropdown.style.left = (rect.right - 220) + 'px';
                 dropdown.classList.add('is-open');
+                requestAnimationFrame(() => {
+                    const left = Math.max(4, rect.right - dropdown.offsetWidth);
+                    dropdown.style.left = left + 'px';
+                });
                 mainBtn.classList.add('is-active');
                 this._attachOutside();
             }

package/src/ui/HtmlTextLayer.js

@@ -67,6 +67,44 @@ function resolveLineHeightRatio(baseFontSizePx, properties) {
     return 1.18;
 }
 
+/**
+ * Строит безопасный HTML-фрагмент с кликабельными ссылками по массиву диапазонов.
+ * Символы вне ссылок экранируются через textContent. Диапазоны не должны пересекаться.
+ * @param {string} content
+ * @param {Array<{start:number, end:number, url:string}>} links
+ * @returns {string} готовый innerHTML
+ */
+function _buildHtmlWithLinks(content, links) {
+    if (!links || links.length === 0) return _escapeHtml(content);
+
+    const sorted = [...links]
+        .filter(l => typeof l.start === 'number' && typeof l.end === 'number' && l.end > l.start && l.url)
+        .sort((a, b) => a.start - b.start);
+
+    let result = '';
+    let pos = 0;
+    for (const link of sorted) {
+        const s = Math.max(0, link.start);
+        const e = Math.min(content.length, link.end);
+        if (s < pos) continue; // пропускаем пересечения
+        if (s > pos) result += _escapeHtml(content.slice(pos, s));
+        const linkText = _escapeHtml(content.slice(s, e));
+        const href = _escapeAttr(link.url);
+        result += `<a href="${href}" target="_blank" rel="noopener noreferrer" class="mb-text-link">${linkText}</a>`;
+        pos = e;
+    }
+    if (pos < content.length) result += _escapeHtml(content.slice(pos));
+    return result;
+}
+
+function _escapeHtml(str) {
+    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function _escapeAttr(str) {
+    return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}
+
 /**
  * HtmlTextLayer — рисует текст как HTML-элементы поверх PIXI для максимальной чёткости
  * Синхронизирует позицию/размер/масштаб с миром (worldLayer) и состоянием объектов
@@ -108,6 +146,10 @@ export class HtmlTextLayer {
             if (objectData.type === 'text' || objectData.type === 'simple-text' || objectData.type === 'shape') {
                 this._ensureTextEl(objectId, objectData);
                 this.updateOne(objectId);
+                // Нормализуем высоту по реальному scrollHeight .mb-text,
+                // чтобы начальная рамка совпадала с той, что получается после
+                // любого изменения свойства (там тоже вызывается _autoFitTextHeight).
+                this._autoFitTextHeight(objectId);
             }
         });
         this.eventBus.on(Events.Object.Deleted, ({ objectId }) => {
@@ -166,13 +208,20 @@ export class HtmlTextLayer {
             if (el && typeof content === 'string') {
                 const _obj = this.core?.state?.state?.objects?.find(o => o.id === objectId);
                 const isMarkdown = resolveMarkdown(_obj?.properties, content);
-                this._syncElementContent(el, content, isMarkdown);
+                const _links = !isMarkdown ? (_obj?.properties?.links || null) : null;
+                this._syncElementContent(el, content, isMarkdown, _links);
                 if (el.classList.contains('mb-text--md') !== isMarkdown) {
                     el.classList.toggle('mb-text--md', isMarkdown);
                     el.style.whiteSpace = isMarkdown ? 'normal' : 'pre';
                     el.style.overflowWrap = isMarkdown ? 'break-word' : '';
                     if (!isMarkdown) el.style.padding = '0';
                 }
+                // После коммита текста высота .mb-text осталась от пустого редактора (схлопнута),
+                // а ResizeUpdate при завершении редактирования отрабатывает раньше синхронизации
+                // контента. Без пере-подгонки DOM-бокс не оборачивает глифы, и рамка выделения,
+                // строящаяся по getBoundingClientRect этого блока, оказывается выше текста.
+                this._autoFitTextHeight(objectId);
+                this.updateOne(objectId);
                 console.log(`🔍 HtmlTextLayer: содержимое обновлено для ${objectId}:`, content);
             } else {
                 console.warn(`❌ HtmlTextLayer: не удалось обновить содержимое для ${objectId}:`, { el: !!el, content });
@@ -205,6 +254,20 @@ export class HtmlTextLayer {
                     el.style.backgroundColor = updates.backgroundColor === 'transparent' ? '' : updates.backgroundColor;
                     console.log(`🔍 HtmlTextLayer: обновлен фон для ${objectId}:`, updates.backgroundColor);
                 }
+                if (updates.highlightColor !== undefined) {
+                    if (updates.highlightColor === 'transparent') {
+                        el.style.removeProperty('--highlight-color');
+                        // Не сбрасываем backgroundColor, так как он может быть установлен отдельно
+                    } else {
+                        el.style.setProperty('--highlight-color', updates.highlightColor);
+                        // Для обычного текста без Quill мы можем просто установить backgroundColor
+                        // если нет выделения
+                        if (!el.querySelector('span[style*="background-color"]')) {
+                            el.style.backgroundColor = updates.highlightColor;
+                        }
+                    }
+                    console.log(`🔍 HtmlTextLayer: обновлен цвет фона текста для ${objectId}:`, updates.highlightColor);
+                }
                 // После изменения свойств текста — автоподгон высоты рамки под контент и принудительное обновление
                 this._autoFitTextHeight(objectId);
                 this.updateOne(objectId);
@@ -416,7 +479,8 @@ export class HtmlTextLayer {
         const initDec = [props.underline && 'underline', props.strikethrough && 'line-through'].filter(Boolean).join(' ');
         el.style.textDecoration = initDec || '';
         el.style.textAlign = props.textAlign || '';
-        this._syncElementContent(el, content, isMarkdown);
+        const initLinks = !isMarkdown ? (props.links || null) : null;
+        this._syncElementContent(el, content, isMarkdown, initLinks);
         // Базовые размеры сохраняем в dataset
         const fs = objectData.fontSize || objectData.properties?.fontSize || 32;
         const bw = Math.max(1, objectData.width || objectData.properties?.baseW || 160);
@@ -623,7 +687,8 @@ export class HtmlTextLayer {
                 el.style.padding = '';
             } else {
                 el.dataset.renderedList = '';
-                const contentChanged = this._syncElementContent(el, content, isMarkdown);
+                const plainLinks = !isMarkdown ? (props.links || null) : null;
+                const contentChanged = this._syncElementContent(el, content, isMarkdown, plainLinks);
                 if (contentChanged) {
                     console.log(`🔍 HtmlTextLayer: содержимое обновлено в updateOne для ${objectId}:`, content);
                 }
@@ -680,18 +745,26 @@ export class HtmlTextLayer {
         });
     }
 
-    /** Обновляет innerHTML/textContent только при реальной смене content или флага markdown */
-    _syncElementContent(el, content, isMarkdown) {
+    /** Обновляет innerHTML/textContent только при реальной смене content, флага markdown или ссылок */
+    _syncElementContent(el, content, isMarkdown, links) {
         if (typeof content !== 'string') return false;
         const mdFlag = isMarkdown ? '1' : '0';
-        if (el.dataset.renderedContent === content && el.dataset.renderedMd === mdFlag) return false;
+        const linksKey = (Array.isArray(links) && links.length > 0) ? JSON.stringify(links) : '';
+        if (
+            el.dataset.renderedContent === content &&
+            el.dataset.renderedMd === mdFlag &&
+            (el.dataset.renderedLinks || '') === linksKey
+        ) return false;
         if (isMarkdown) {
             el.innerHTML = renderRichText(content);
+        } else if (linksKey) {
+            el.innerHTML = _buildHtmlWithLinks(content, links);
         } else {
             el.textContent = content;
         }
         el.dataset.renderedContent = content;
         el.dataset.renderedMd = mdFlag;
+        el.dataset.renderedLinks = linksKey;
         return true;
     }
 

package/src/ui/ImagePropertiesPanel.js

@@ -1105,7 +1105,14 @@ export class ImagePropertiesPanel {
             });
 
             if (!isOpen) {
+                const rect = mainBtn.getBoundingClientRect();
+                dropdown.style.top = (rect.bottom + 6) + 'px';
+                dropdown.style.left = (rect.right - 220) + 'px';
                 dropdown.classList.add('is-open');
+                requestAnimationFrame(() => {
+                    const left = Math.max(4, rect.right - dropdown.offsetWidth);
+                    dropdown.style.left = left + 'px';
+                });
                 mainBtn.classList.add('is-active');
             } else {
                 infoPopover.classList.remove('is-open');