@sequent-org/moodboard 1.4.55 → 1.4.56

package/package.json

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

package/src/initNoBundler.js

@@ -356,7 +356,7 @@ 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 {
             width: 28px !important;

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/TextEditorInteractionController.js

@@ -164,6 +164,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 +208,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 +300,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) {

package/src/ui/HtmlTextLayer.js

@@ -173,6 +173,12 @@ export class HtmlTextLayer {
                     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 });

package/src/ui/TextPropertiesPanel.js

@@ -349,7 +349,11 @@ export class TextPropertiesPanel {
         const panelY = screenY - this.panel.offsetHeight - 20;
 
         const containerRect = this.container.getBoundingClientRect();
-        const finalX = Math.max(10, Math.min(panelX, containerRect.width - this.panel.offsetWidth - 10));
+        const toolbarEl = document.querySelector('.moodboard-toolbar');
+        const toolbarRight = toolbarEl
+            ? toolbarEl.getBoundingClientRect().right - containerRect.left + 10
+            : 10;
+        const finalX = Math.max(toolbarRight, Math.min(panelX, containerRect.width - this.panel.offsetWidth - 10));
         const finalY = Math.max(10, panelY);
 
         this.panel.style.left = `${Math.round(finalX)}px`;

package/src/ui/styles/panels.css

@@ -195,7 +195,7 @@
     flex-direction: row;
     align-items: center;
     gap: 8px;
-    padding: 12px 22px;
+    padding: 0 22px;
     background-color: #ffffff;
     border: 1px solid #e0e0e0;
     border-radius: 9999px;
@@ -206,6 +206,10 @@
     height: 36px;
 }
 
+.text-properties-panel * {
+    max-height: 36px;
+}
+
 /* Frame properties toolbar — mirror image toolbar look */
 .frame-properties-panel {
     position: absolute;
@@ -604,18 +608,151 @@
 
 .text-properties-panel .tpp-label--spaced { margin-left: 6px; }
 
-.text-properties-panel .font-select,
-.text-properties-panel .font-size-select {
-    border: 1px solid #ddd;
-    border-radius: 4px;
+.text-properties-panel .font-select-wrapper {
+    position: relative;
+    display: inline-block;
+}
+
+.text-properties-panel .font-select {
+    box-sizing: border-box;
+    min-width: 90px;
+    width: 90px;
+    height: 38px;
     padding: 4px 8px;
     font-size: 13px;
     background-color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    user-select: none;
+}
+
+.text-properties-panel .font-select:focus { outline: none; box-shadow: none; }
+
+.text-properties-panel .font-select__label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.text-properties-panel .font-dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    min-width: 180px;
+    max-height: 280px;
+    overflow-y: auto;
+    background: #fff;
+    border: 1px solid #E5E7EB;
+    border-radius: 8px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
+    padding: 4px;
+    display: none;
+    z-index: 10000;
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+}
+
+.text-properties-panel .font-dropdown.is-open { display: block; }
+
+.text-properties-panel .font-dropdown:hover {
+    scrollbar-color: rgba(170, 170, 170, 0.7) transparent;
+}
+
+.text-properties-panel .font-dropdown::-webkit-scrollbar { width: 9px; }
+.text-properties-panel .font-dropdown::-webkit-scrollbar-button {
+    display: none;
+    height: 0;
+    width: 0;
+}
+.text-properties-panel .font-dropdown::-webkit-scrollbar-track { background: transparent; }
+.text-properties-panel .font-dropdown::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 4px;
+}
+.text-properties-panel .font-dropdown:hover::-webkit-scrollbar-thumb {
+    background: rgba(170, 170, 170, 0.7);
+}
+
+.text-properties-panel .font-dropdown__item {
+    display: block;
+    width: 100%;
+    padding: 6px 10px;
+    border: none;
+    background: transparent;
+    text-align: left;
+    font-size: 14px;
+    color: #111;
+    cursor: pointer;
+    border-radius: 4px;
+    white-space: nowrap;
+}
+
+.text-properties-panel .font-dropdown__item:hover {
+    background: #f3f4f6;
+}
+
+.text-properties-panel .font-dropdown__item.is-active {
+    background: #2563eb;
+    color: #fff;
+}
+.text-properties-panel .font-size-wrapper {
+    display: flex;
+    align-items: center;
+    position: relative;
+    border: none;
+    border-radius: 4px;
+    background-color: #fff;
+    height: 38px;
+    box-sizing: border-box;
+}
+
+.text-properties-panel .font-size-select {
+    outline: none;
+    height: 100%;
+    width: 32px;
+    border: none;
+    background: transparent;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    padding: 0 4px 0 8px;
+    font-size: 13px;
     cursor: pointer;
 }
 
-.text-properties-panel .font-select { min-width: 110px; }
-.text-properties-panel .font-size-select { min-width: 56px; }
+.text-properties-panel .font-size-steppers {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 20px;
+    border-left: none;
+}
+
+.text-properties-panel .font-size-stepper {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    color: #666;
+}
+
+.text-properties-panel .font-size-stepper:hover {
+    background: #f5f5f5;
+    color: #333;
+}
+
+.text-properties-panel .font-size-stepper--down {
+    border-bottom-right-radius: 4px;
+    margin-top: -2px;
+}
 
 .text-properties-panel .current-color-button,
 .text-properties-panel .current-bgcolor-button {
@@ -654,19 +791,101 @@
     color: #6155F5;
 }
 
-.text-properties-panel .tpp-align-select,
-.text-properties-panel .tpp-list-select {
-    border: 1px solid #ddd;
+.text-properties-panel .tpp-list-btns {
+    display: flex;
+    gap: 2px;
+    align-items: center;
+    position: relative;
+}
+.text-properties-panel .tpp-list-btns svg {
+    width: 22px;
+    height: 22px;
+}
+
+.text-properties-panel .tpp-list-modal {
+    max-height: none;
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    flex-direction: column;
+    gap: 2px;
+    background: #ffffff;
+    border: 1px solid #E5E7EB;
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
+    padding: 4px;
+    z-index: 4000;
+}
+
+.text-properties-panel .tpp-list-modal-option {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    background: transparent;
     border-radius: 4px;
-    padding: 4px 6px;
-    font-size: 12px;
-    background-color: #fff;
+    cursor: pointer;
+    color: #374151;
+    transition: background 0.1s;
+    flex-shrink: 0;
+}
+
+.text-properties-panel .tpp-list-modal-option:hover {
+    background: #f3f4f6;
+}
+
+.text-properties-panel .tpp-align-btns {
+    display: flex;
+    gap: 2px;
+    align-items: center;
+    position: relative;
+}
+
+.text-properties-panel .tpp-align-btns img,
+.text-properties-panel .tpp-align-btns svg,
+.text-properties-panel .tpp-align-modal img,
+.text-properties-panel .tpp-align-modal svg {
+    width: 24px;
+    height: 24px;
+}
+
+.text-properties-panel .tpp-align-modal {
+    max-height: none;
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    flex-direction: column;
+    gap: 2px;
+    background: #ffffff;
+    border: 1px solid #E5E7EB;
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
+    padding: 4px;
+    z-index: 4000;
+}
+
+.text-properties-panel .tpp-align-modal-option {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
     height: 28px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    border-radius: 4px;
     cursor: pointer;
-    font-family: 'Roboto', Arial, sans-serif;
+    color: #374151;
+    transition: background 0.1s;
+    flex-shrink: 0;
+}
+
+.text-properties-panel .tpp-align-modal-option:hover {
+    background: #f3f4f6;
 }
-.text-properties-panel .tpp-align-select { min-width: 86px; }
-.text-properties-panel .tpp-list-select { min-width: 110px; }
 
 .text-properties-panel .tpp-lh-slider {
     width: 68px;

package/src/ui/styles/workspace.css

@@ -684,7 +684,7 @@
 }
 
 .text-properties-panel .font-select { min-width: 110px; }
-.text-properties-panel .font-size-select { min-width: 56px; }
+.text-properties-panel .font-size-select { min-width: 32px; }
 
 .text-properties-panel .current-color-button,
 .text-properties-panel .current-bgcolor-button {

package/src/ui/text-properties/TextFormatControls.js

@@ -11,6 +11,15 @@ const SVG_ITALIC = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="1
 const SVG_UNDERLINE = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" y1="20" x2="20" y2="20"/></svg>';
 const SVG_STRIKE = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4H9a3 3 0 0 0-2.83 4"/><path d="M14 12a4 4 0 0 1 0 8H6"/><line x1="4" y1="12" x2="20" y2="12"/></svg>';
 
+const SVG_ALIGN_LEFT = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4.75 5.73633H19.25"/><path d="M4.75 18.2637H13.25"/><path d="M4.75 14.0879H19.25"/><path d="M4.75 9.91211L13.25 9.91211"/></svg>';
+const SVG_ALIGN_CENTER = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4.75 5.73633H19.25"/><path d="M7.75 18.2637H16.25"/><path d="M4.75 14.0879H19.25"/><path d="M7.75 9.91211L16.25 9.91211"/></svg>';
+const SVG_ALIGN_RIGHT = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4.75 5.73633H19.25"/><path d="M10.75 18.2637H19.25"/><path d="M4.75 14.0879H19.25"/><path d="M10.75 9.91211L19.25 9.91211"/></svg>';
+const SVG_ALIGN_JUSTIFY = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4.75 5.73633H19.25"/><path d="M4.75 9.91211H19.25"/><path d="M4.75 14.0879H19.25"/><path d="M4.75 18.2637H19.25"/></svg>';
+
+const SVG_LIST_BULLET = '<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.28516 5.49609H19.2852M8.28516 11H19.2852M8.28516 16.4961H19.2852M4.21484 17.25C4.62906 17.25 4.96484 16.9142 4.96484 16.5C4.96484 16.0858 4.62906 15.75 4.21484 15.75C3.80063 15.75 3.46484 16.0858 3.46484 16.5C3.46484 16.9142 3.80063 17.25 4.21484 17.25ZM4.21484 11.75C4.62906 11.75 4.96484 11.4142 4.96484 11C4.96484 10.5858 4.62906 10.25 4.21484 10.25C3.80063 10.25 3.46484 10.5858 3.46484 11C3.46484 11.4142 3.80063 11.75 4.21484 11.75ZM4.21484 6.24609C4.62906 6.24609 4.96484 5.91031 4.96484 5.49609C4.96484 5.08188 4.62906 4.74609 4.21484 4.74609C3.80063 4.74609 3.46484 5.08188 3.46484 5.49609C3.46484 5.91031 3.80063 6.24609 4.21484 6.24609Z"/></svg>';
+const SVG_LIST_NUMBERED = '<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M8.28516 5.49505H19.2852M8.28516 10.999H19.2852M8.28516 16.4951H19.2852M3.30078 5.32812L4.67578 4.64062V9.45312M3.39531 13.2839C3.45867 13.1269 3.55438 12.9853 3.67622 12.8678C3.79808 12.7505 3.9433 12.6602 4.10242 12.6027C4.26156 12.5453 4.43101 12.5221 4.59972 12.5345C4.76844 12.547 4.93262 12.595 5.08156 12.6752C5.23049 12.7555 5.36082 12.8662 5.46407 13.0002C5.56729 13.1343 5.6411 13.2885 5.68067 13.453C5.72022 13.6175 5.72466 13.7885 5.69366 13.9549C5.66266 14.1211 5.59693 14.279 5.50078 14.4182L3.30078 17.3573H5.70703"/></svg>';
+const SVG_LIST_CHECK = '<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M8.28516 5.49609H19.2852M8.28516 11H19.2852M8.28516 16.4961H19.2852M2.9 5.2L3.9 6.2L5.7 4.2M2.9 10.7L3.9 11.7L5.7 9.7M2.9 16.2L3.9 17.2L5.7 15.2"/></svg>';
+
 function makeSep() {
     const d = document.createElement('div');
     d.style.cssText = 'width:1px;height:18px;background:#e0e0e0;margin:0 6px;flex-shrink:0;';
@@ -27,16 +36,216 @@ function makeToggleBtn(svgStr, title, prop) {
     return btn;
 }
 
-function makeSelect(className, options) {
-    const sel = document.createElement('select');
-    sel.className = className;
-    options.forEach(({ value, label }) => {
-        const opt = document.createElement('option');
-        opt.value = value;
-        opt.textContent = label;
-        sel.appendChild(opt);
+function makeListButtons() {
+    const container = document.createElement('div');
+    container.className = 'tpp-list-btns';
+
+    const listOptions = [
+        { value: 'bullet', title: 'Маркированный список', svg: SVG_LIST_BULLET },
+        { value: 'numbered', title: 'Нумерованный список', svg: SVG_LIST_NUMBERED },
+        { value: 'checkbox', title: 'Список с флажками', svg: SVG_LIST_CHECK },
+    ];
+
+    let currentValue = 'none';
+    const changeListeners = [];
+
+    // Кнопка-триггер: всегда показывает иконку bullet-list и открывает модальное окно
+    const triggerBtn = document.createElement('button');
+    triggerBtn.type = 'button';
+    triggerBtn.title = 'Список';
+    triggerBtn.className = 'tpp-format-btn tpp-list-trigger';
+    triggerBtn.innerHTML = SVG_LIST_BULLET;
+
+    const modal = document.createElement('div');
+    modal.className = 'tpp-list-modal';
+    modal.style.display = 'none';
+
+    listOptions.forEach(({ value, title, svg }) => {
+        const optBtn = document.createElement('button');
+        optBtn.type = 'button';
+        optBtn.title = title;
+        optBtn.className = 'tpp-list-modal-option';
+        optBtn.dataset.listValue = value;
+        optBtn.innerHTML = svg;
+        optBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            // Клик по выбранному элементу снимает форматирование (none).
+            currentValue = currentValue === value ? 'none' : value;
+            closeModal();
+            updateActive();
+            changeListeners.forEach((cb) => cb({ target: proxy }));
+        });
+        modal.appendChild(optBtn);
+    });
+
+    container.appendChild(triggerBtn);
+    container.appendChild(modal);
+
+    function openModal() {
+        modal.style.display = 'flex';
+        updateModalActive();
+        setTimeout(() => {
+            document.addEventListener('click', closeOnOutside);
+        }, 0);
+    }
+
+    function closeModal() {
+        modal.style.display = 'none';
+        document.removeEventListener('click', closeOnOutside);
+    }
+
+    function closeOnOutside(e) {
+        if (!container.contains(e.target)) {
+            closeModal();
+        }
+    }
+
+    function updateActive() {
+        triggerBtn.classList.toggle('is-active', currentValue !== 'none');
+        updateModalActive();
+    }
+
+    function updateModalActive() {
+        modal.querySelectorAll('.tpp-list-modal-option').forEach((btn) => {
+            const isActive = btn.dataset.listValue === currentValue;
+            btn.style.color = isActive ? 'rgb(53, 56, 205)' : '';
+        });
+    }
+
+    triggerBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (modal.style.display === 'none') {
+            openModal();
+        } else {
+            closeModal();
+        }
+    });
+
+    const proxy = {
+        get value() {
+            return currentValue;
+        },
+        set value(v) {
+            currentValue = v || 'none';
+            updateActive();
+        },
+        addEventListener(event, cb) {
+            if (event === 'change') changeListeners.push(cb);
+        },
+        _container: container,
+    };
+
+    updateActive();
+    return proxy;
+}
+
+function makeAlignButtons() {
+    const container = document.createElement('div');
+    container.className = 'tpp-align-btns';
+
+    const alignOptions = [
+        { value: 'left', title: 'По левому краю', svg: SVG_ALIGN_LEFT },
+        { value: 'center', title: 'По центру', svg: SVG_ALIGN_CENTER },
+        { value: 'right', title: 'По правому краю', svg: SVG_ALIGN_RIGHT },
+        { value: 'justify', title: 'По ширине', svg: SVG_ALIGN_JUSTIFY },
+    ];
+
+    let currentValue = 'left';
+    const changeListeners = [];
+
+    // Единственная кнопка — отображает текущее выравнивание и открывает модальное окно
+    const triggerBtn = document.createElement('button');
+    triggerBtn.type = 'button';
+    triggerBtn.className = 'tpp-format-btn tpp-align-btn tpp-align-trigger';
+    triggerBtn.dataset.alignValue = 'left';
+
+    // Модальный попап
+    const modal = document.createElement('div');
+    modal.className = 'tpp-align-modal';
+    modal.style.display = 'none';
+
+    alignOptions.forEach(({ value, title, svg }) => {
+        const optBtn = document.createElement('button');
+        optBtn.type = 'button';
+        optBtn.title = title;
+        optBtn.className = 'tpp-align-modal-option';
+        optBtn.dataset.alignValue = value;
+        optBtn.innerHTML = svg;
+        optBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            currentValue = value;
+            closeModal();
+            updateActive();
+            changeListeners.forEach((cb) => cb({ target: proxy }));
+        });
+        modal.appendChild(optBtn);
+    });
+
+    container.appendChild(triggerBtn);
+    container.appendChild(modal);
+
+    function openModal() {
+        modal.style.display = 'flex';
+        updateModalActive();
+        // Закрытие по клику вне
+        setTimeout(() => {
+            document.addEventListener('click', closeOnOutside);
+        }, 0);
+    }
+
+    function closeModal() {
+        modal.style.display = 'none';
+        document.removeEventListener('click', closeOnOutside);
+    }
+
+    function closeOnOutside(e) {
+        if (!container.contains(e.target)) {
+            closeModal();
+        }
+    }
+
+    function updateActive() {
+        const opt = alignOptions.find((o) => o.value === currentValue);
+        if (opt) {
+            triggerBtn.innerHTML = opt.svg;
+            triggerBtn.title = opt.title;
+            triggerBtn.dataset.alignValue = currentValue;
+        }
+        updateModalActive();
+    }
+
+    function updateModalActive() {
+        modal.querySelectorAll('.tpp-align-modal-option').forEach((btn) => {
+            const isActive = btn.dataset.alignValue === currentValue;
+            btn.style.color = isActive ? 'rgb(53, 56, 205)' : '';
+        });
+    }
+
+    triggerBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (modal.style.display === 'none') {
+            openModal();
+        } else {
+            closeModal();
+        }
     });
-    return sel;
+
+    const proxy = {
+        get value() {
+            return currentValue;
+        },
+        set value(v) {
+            currentValue = v;
+            updateActive();
+        },
+        addEventListener(event, cb) {
+            if (event === 'change') changeListeners.push(cb);
+        },
+        _container: container,
+    };
+
+    updateActive();
+    return proxy;
 }
 
 export function createTextFormatControls(panelInstance, panel) {
@@ -53,21 +262,11 @@ export function createTextFormatControls(panelInstance, panel) {
 
     panel.appendChild(makeSep());
 
-    panelInstance.alignControl = makeSelect('tpp-align-select', [
-        { value: 'left', label: '≡ Лево' },
-        { value: 'center', label: '≡ Центр' },
-        { value: 'right', label: '≡ Право' },
-        { value: 'justify', label: '≡ По ширине' },
-    ]);
-    panel.appendChild(panelInstance.alignControl);
-
-    panelInstance.listControl = makeSelect('tpp-list-select', [
-        { value: 'none', label: 'Список: нет' },
-        { value: 'bullet', label: '• Маркер' },
-        { value: 'numbered', label: '1. Нумерация' },
-        { value: 'checkbox', label: '☐ Флажки' },
-    ]);
-    panel.appendChild(panelInstance.listControl);
+    panelInstance.alignControl = makeAlignButtons();
+    panel.appendChild(panelInstance.alignControl._container);
+
+    panelInstance.listControl = makeListButtons();
+    panel.appendChild(panelInstance.listControl._container);
 
     panel.appendChild(makeSep());
 

package/src/ui/text-properties/TextPropertiesPanelBindings.js

@@ -7,19 +7,80 @@ function hidePresetTicks(buttons) {
     });
 }
 
+function setFontDropdownOpen(panel, isOpen) {
+    if (!panel.fontDropdown || !panel.fontSelect) {
+        return;
+    }
+    panel.fontDropdown.classList.toggle('is-open', isOpen);
+    panel.fontSelect.classList.toggle('is-active', isOpen);
+    panel.fontSelect.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+}
+
 export function bindTextPropertiesPanelControls(panel) {
     if (panel._bindingsAttached) {
         return;
     }
 
-    panel.fontSelect.addEventListener('change', (event) => {
-        panel._changeFontFamily(event.target.value);
+    panel.fontSelect.addEventListener('click', (event) => {
+        event.stopPropagation();
+        const willOpen = !panel.fontDropdown.classList.contains('is-open');
+        setFontDropdownOpen(panel, willOpen);
     });
 
+    panel.fontSelect.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            const willOpen = !panel.fontDropdown.classList.contains('is-open');
+            setFontDropdownOpen(panel, willOpen);
+        } else if (event.key === 'Escape') {
+            setFontDropdownOpen(panel, false);
+        }
+    });
+
+    panel.fontDropdown.querySelectorAll('.font-dropdown__item').forEach((item) => {
+        item.addEventListener('click', (event) => {
+            event.stopPropagation();
+            const value = item.dataset.value;
+            panel.fontSelect.value = value;
+            panel._changeFontFamily(value);
+            setFontDropdownOpen(panel, false);
+        });
+    });
+
+    panel._onFontDocumentClick = (event) => {
+        if (!panel._fontSelectWrapper || !event.target) {
+            return;
+        }
+        if (!panel._fontSelectWrapper.contains(event.target)) {
+            setFontDropdownOpen(panel, false);
+        }
+    };
+    document.addEventListener('click', panel._onFontDocumentClick);
+
     panel.fontSizeSelect.addEventListener('change', (event) => {
         panel._changeFontSize(parseInt(event.target.value, 10));
     });
 
+    if (panel.fontSizeUpBtn) {
+        panel.fontSizeUpBtn.addEventListener('click', () => {
+            const select = panel.fontSizeSelect;
+            if (select.selectedIndex < select.options.length - 1) {
+                select.selectedIndex++;
+                select.dispatchEvent(new Event('change'));
+            }
+        });
+    }
+
+    if (panel.fontSizeDownBtn) {
+        panel.fontSizeDownBtn.addEventListener('click', () => {
+            const select = panel.fontSizeSelect;
+            if (select.selectedIndex > 0) {
+                select.selectedIndex--;
+                select.dispatchEvent(new Event('change'));
+            }
+        });
+    }
+
     panel.currentColorButton.addEventListener('click', (event) => {
         event.stopPropagation();
         panel._toggleColorDropdown();
@@ -115,5 +176,10 @@ export function unbindTextPropertiesPanelControls(panel) {
         panel._onBgDocumentClick = null;
     }
 
+    if (panel._onFontDocumentClick) {
+        document.removeEventListener('click', panel._onFontDocumentClick);
+        panel._onFontDocumentClick = null;
+    }
+
     panel._bindingsAttached = false;
 }

package/src/ui/text-properties/TextPropertiesPanelRenderer.js

@@ -99,54 +99,109 @@ export function updateCurrentBgColorButton(panelInstance, color) {
 }
 
 function createFontControls(panelInstance, panel) {
-    const fontLabel = document.createElement('span');
-    fontLabel.textContent = 'Шрифт:';
-    fontLabel.className = 'tpp-label';
-    panel.appendChild(fontLabel);
-
-    panelInstance.fontSelect = document.createElement('select');
-    panelInstance.fontSelect.className = 'font-select';
-    panelInstance.fontSelect.className = 'font-select';
+    const fontWrapper = document.createElement('div');
+    fontWrapper.className = 'font-select-wrapper';
+
+    const trigger = document.createElement('div');
+    trigger.className = 'font-select';
+    trigger.setAttribute('role', 'combobox');
+    trigger.setAttribute('tabindex', '0');
+    trigger.setAttribute('aria-haspopup', 'listbox');
+    trigger.setAttribute('aria-expanded', 'false');
+
+    const triggerLabel = document.createElement('span');
+    triggerLabel.className = 'font-select__label';
+    trigger.appendChild(triggerLabel);
+
+    const dropdown = document.createElement('div');
+    dropdown.className = 'font-dropdown';
+    dropdown.setAttribute('role', 'listbox');
+
+    const optionElements = [];
+    const optionRefs = FONT_OPTIONS.map((font) => {
+        const item = document.createElement('button');
+        item.type = 'button';
+        item.className = 'font-dropdown__item';
+        item.setAttribute('role', 'option');
+        item.dataset.value = font.value;
+        item.textContent = font.name;
+        item.style.fontFamily = font.value;
+        dropdown.appendChild(item);
+        optionElements.push(item);
+        return { value: font.value, textContent: font.name, element: item };
+    });
 
-    FONT_OPTIONS.forEach((font) => {
-        const option = document.createElement('option');
-        option.value = font.value;
-        option.textContent = font.name;
-        option.style.fontFamily = font.value;
-        panelInstance.fontSelect.appendChild(option);
+    fontWrapper.appendChild(trigger);
+    fontWrapper.appendChild(dropdown);
+    panel.appendChild(fontWrapper);
+
+    let currentValue = FONT_OPTIONS[0].value;
+    const applyValue = (newValue) => {
+        currentValue = newValue;
+        const match = optionRefs.find((opt) => opt.value === newValue);
+        triggerLabel.textContent = match ? match.textContent : newValue;
+        triggerLabel.style.fontFamily = newValue;
+        optionRefs.forEach((opt) => {
+            opt.element.classList.toggle('is-active', opt.value === newValue);
+        });
+    };
+    applyValue(currentValue);
+
+    Object.defineProperty(trigger, 'value', {
+        configurable: true,
+        get() {
+            return currentValue;
+        },
+        set(newValue) {
+            applyValue(newValue);
+        },
+    });
+    Object.defineProperty(trigger, 'options', {
+        configurable: true,
+        get() {
+            return optionElements;
+        },
     });
 
-    panel.appendChild(panelInstance.fontSelect);
+    panelInstance.fontSelect = trigger;
+    panelInstance.fontDropdown = dropdown;
+    panelInstance._fontSelectWrapper = fontWrapper;
 
-    const sizeLabel = document.createElement('span');
-    sizeLabel.textContent = 'Размер:';
-    sizeLabel.className = 'tpp-label tpp-label--spaced';
-    panel.appendChild(sizeLabel);
+    const fontSizeWrapper = document.createElement('div');
+    fontSizeWrapper.className = 'font-size-wrapper';
 
     panelInstance.fontSizeSelect = document.createElement('select');
     panelInstance.fontSizeSelect.className = 'font-size-select';
-    panelInstance.fontSizeSelect.className = 'font-size-select';
 
     FONT_SIZE_OPTIONS.forEach((size) => {
         const option = document.createElement('option');
         option.value = size;
-        option.textContent = `${size}px`;
+        option.textContent = String(size);
         panelInstance.fontSizeSelect.appendChild(option);
     });
 
-    panel.appendChild(panelInstance.fontSizeSelect);
+    const stepperContainer = document.createElement('div');
+    stepperContainer.className = 'font-size-steppers';
 
-    const colorLabel = document.createElement('span');
-    colorLabel.textContent = 'Цвет:';
-    colorLabel.className = 'tpp-label tpp-label--spaced';
-    panel.appendChild(colorLabel);
+    panelInstance.fontSizeUpBtn = document.createElement('button');
+    panelInstance.fontSizeUpBtn.type = 'button';
+    panelInstance.fontSizeUpBtn.className = 'font-size-stepper font-size-stepper--up';
+    panelInstance.fontSizeUpBtn.innerHTML = '<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg" style="top: 1px;"><path d="M8.25 6.75L5 3.25L1.75 6.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
 
-    createCompactColorSelector(panelInstance, panel);
+    panelInstance.fontSizeDownBtn = document.createElement('button');
+    panelInstance.fontSizeDownBtn.type = 'button';
+    panelInstance.fontSizeDownBtn.className = 'font-size-stepper font-size-stepper--down';
+    panelInstance.fontSizeDownBtn.innerHTML = '<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="bottom: 1px;"><path d="M8.25 3.25L5 6.75L1.75 3.25"></path></svg>';
+
+    stepperContainer.appendChild(panelInstance.fontSizeUpBtn);
+    stepperContainer.appendChild(panelInstance.fontSizeDownBtn);
+
+    fontSizeWrapper.appendChild(panelInstance.fontSizeSelect);
+    fontSizeWrapper.appendChild(stepperContainer);
 
-    const bgColorLabel = document.createElement('span');
-    bgColorLabel.textContent = 'Фон:';
-    bgColorLabel.className = 'tpp-label tpp-label--spaced';
-    panel.appendChild(bgColorLabel);
+    panel.appendChild(fontSizeWrapper);
+
+    createCompactColorSelector(panelInstance, panel);
 
     createCompactBackgroundSelector(panelInstance, panel);
 

package/src/utils/styleLoader.js

@@ -49,7 +49,7 @@ export class StyleLoader {
             }
             
             .font-select { min-width: 110px; }
-            .font-size-select { min-width: 56px; }
+            .font-size-select { min-width: 32px; }
             
             .text-properties-panel .tpp-label--spaced { margin-left: 6px; }