@sequent-org/moodboard 1.4.59 → 1.4.61

package/package.json

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

package/src/assets/icons/ban.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ban-icon lucide-ban"><circle cx="12" cy="12" r="10"/><path d="M4.929 4.929 19.07 19.071"/></svg>

package/src/core/PixiEngine.js

@@ -249,13 +249,20 @@ export class PixiEngine {
         if (pixiObject) {
             console.log('🗑️ PixiEngine: удаляем объект из сцены:', objectId);
 
-            // Видео: останавливаем HTMLVideoElement и снимаем listeners до уничтожения
-            // спрайта. Без этого видео продолжает играть и тикать текстуру — утечка.
-            // Хук сужен до 'video', чтобы не задеть destroy() фреймов/коннекторов,
-            // у которых контейнер уничтожается общим путём ниже (иначе двойной destroy).
             const mbMeta = pixiObject._mb;
-            if (mbMeta?.type === 'video' && typeof mbMeta.instance?.destroy === 'function') {
-                try { mbMeta.instance.destroy(); } catch (_) {}
+            const mbInstance = mbMeta?.instance;
+
+            // Видео: останавливаем HTMLVideoElement и снимаем listeners до уничтожения спрайта.
+            // Фрейм и другие объекты с instance.destroy(): снимаем подписки с EventBus ДО того,
+            // как PIXI-контейнер будет уничтожен. FrameObject.destroy() сам уничтожает контейнер,
+            // поэтому после него ручной pixiObject.destroy() не нужен — флаг handledByInstance.
+            let handledByInstance = false;
+            if (typeof mbInstance?.destroy === 'function') {
+                try { mbInstance.destroy(); } catch (_) {}
+                // Типы, чей instance.destroy() полностью берёт на себя PIXI-cleanup
+                if (mbMeta.type === 'frame') {
+                    handledByInstance = true;
+                }
             }
 
             // Удаляем из родительского контейнера
@@ -266,7 +273,12 @@ export class PixiEngine {
             }
             
             // ИСПРАВЛЕНИЕ: Полная очистка для изображений/эмоджи
-            if (pixiObject instanceof PIXI.Sprite) {
+            if (handledByInstance) {
+                // instance.destroy() уже уничтожил PIXI-контейнер и снял все подписки
+                if (this.hoverLift) {
+                    try { this.hoverLift.detach(pixiObject); } catch (_) {}
+                }
+            } else if (pixiObject instanceof PIXI.Sprite) {
                 console.log('🗑️ PixiEngine: очищаем ресурсы изображения/эмоджи');
                 
                 // Очищаем текстуру (data URL, blob URL — освобождаем память)

package/src/objects/FrameObject.js

@@ -138,6 +138,7 @@ export class FrameObject {
 
     /** Скрыть/показать серую рамку (при выделении скрываем, чтобы не накладывалась на синюю) */
     setBorderVisible(visible) {
+        if (this._destroyed || !this.container) return;
         if (this._borderVisible === visible) return;
         this._borderVisible = visible;
         this._redrawPreserveTransform(this.width, this.height, this.fillColor);
@@ -332,6 +333,7 @@ export class FrameObject {
      */
     _onZoomChange(data) {
         if (!data || typeof data.percentage !== 'number') return;
+        if (!this.titleLayer || this.container?.destroyed) return;
         
         const worldScale = data.percentage / 100;
         this.currentWorldScale = worldScale;
@@ -342,7 +344,7 @@ export class FrameObject {
      * Масштаб и позиция слоя заголовка — компенсируем зум, держим постоянный экранный размер
      */
     _updateTitleScale() {
-        if (!this.titleLayer) return;
+        if (!this.titleLayer || this.titleLayer.destroyed || this.container?.destroyed) return;
 
         const compensationScale = 1 / this.currentWorldScale;
 
@@ -590,9 +592,13 @@ export class FrameObject {
     }
 
     /**
-     * Метод для отписки от событий при уничтожении объекта
+     * Метод для отписки от событий при уничтожении объекта.
+     * Идемпотентен: повторный вызов безопасен.
      */
     destroy() {
+        if (this._destroyed) return;
+        this._destroyed = true;
+
         if (this.eventBus) {
             if (this._boundOnZoomChange) {
                 this.eventBus.off(Events.UI.ZoomPercent, this._boundOnZoomChange);
@@ -605,9 +611,16 @@ export class FrameObject {
                 this._boundOnSelectionAdd = this._boundOnSelectionRemove = this._boundOnSelectionClear = null;
             }
         }
-        if (this.container) {
+
+        if (this.container && !this.container.destroyed) {
             this.container.destroy({ children: true });
         }
+
+        this.container = null;
+        this.titleLayer = null;
+        this.titleText = null;
+        this.titleBg = null;
+        this.graphics = null;
     }
 }
 

package/src/services/text/TextBoxMetrics.js

@@ -98,6 +98,92 @@ export function applyTextStyles(el, { fontSizePx, baseFontSizePx, fontFamily, pr
     el.style.textRendering = 'optimizeLegibility';
 }
 
+// Канвас и кеш для измерения видимых границ глифов (см. computeSingleLineCenterDelta).
+// getContext оборачиваем в try/catch: в jsdom (тесты) он не реализован и иначе шумит в stderr.
+let _vCenterCtx = null;
+try {
+    if (typeof document !== 'undefined') {
+        _vCenterCtx = document.createElement('canvas').getContext('2d');
+    }
+} catch (_) {
+    _vCenterCtx = null;
+}
+const _vCenterCache = new Map();
+const _VCENTER_CACHE_LIMIT = 512;
+
+/**
+ * Дельта высоты (px) для вертикального центрирования видимых глифов в однострочном
+ * текстовом боксе.
+ *
+ * Проблема: line-box шрифта резервирует сверху место под прописные и верхние выносные,
+ * которого строчный текст не занимает. Из-за этого буквы визуально прижаты к низу рамки
+ * (сверху пустого места больше, снизу меньше), и на отдельных стадиях зума перекос
+ * усиливается округлением. Возвращаем «верхний резерв − нижний резерв»: добавив это к
+ * высоте бокса, уравниваем зазоры сверху и снизу вокруг реальных букв.
+ *
+ * Измеряем по фактически отрисованному элементу (его computed-стили, baseline и
+ * округление на текущем зуме), поэтому остаточная асимметрия не превышает 1px на любой
+ * стадии. Результат кешируется по сигнатуре «шрифт+размер+контент», чтобы не запускать
+ * измерение на каждый кадр пана/зума.
+ *
+ * @param {HTMLElement} el — элемент .mb-text с уже выставленной height:auto
+ * @returns {number|null} целочисленная дельта (может быть отрицательной), либо null,
+ *   если центрирование неприменимо (пустой/многострочный текст, окружение без layout/canvas)
+ */
+export function computeSingleLineCenterDelta(el) {
+    if (!el || !_vCenterCtx || typeof el.getBoundingClientRect !== 'function' || typeof window === 'undefined') {
+        return null;
+    }
+    const text = el.textContent || '';
+    if (!text.trim() || text.includes('\n')) {
+        return null;
+    }
+    let cs;
+    try {
+        cs = window.getComputedStyle(el);
+    } catch (_) {
+        return null;
+    }
+    const key = `${cs.fontFamily}|${cs.fontWeight}|${cs.fontStyle}|${cs.lineHeight}|${cs.fontSize}|${text}`;
+    const cached = _vCenterCache.get(key);
+    if (cached !== undefined) {
+        return cached;
+    }
+
+    let delta = null;
+    try {
+        const elRect = el.getBoundingClientRect();
+        const lineBoxHeight = el.scrollHeight;
+        // Базовая линия строки: inline-block нулевой высоты, выровненный по baseline,
+        // верхней гранью садится ровно на базовую линию текста.
+        const marker = document.createElement('span');
+        marker.style.cssText = 'display:inline-block;width:0;height:0;vertical-align:baseline;';
+        el.appendChild(marker);
+        const baselineRel = marker.getBoundingClientRect().top - elRect.top;
+        el.removeChild(marker);
+
+        _vCenterCtx.font = `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
+        const m = _vCenterCtx.measureText(text);
+        const ascent = m.actualBoundingBoxAscent;
+        const descent = m.actualBoundingBoxDescent;
+        if (Number.isFinite(ascent) && Number.isFinite(descent) && lineBoxHeight > 0) {
+            const inkTop = baselineRel - ascent;
+            const inkBottom = baselineRel + descent;
+            const topReserve = inkTop;
+            const bottomReserve = lineBoxHeight - inkBottom;
+            delta = Math.round(topReserve - bottomReserve);
+        }
+    } catch (_) {
+        delta = null;
+    }
+
+    if (_vCenterCache.size >= _VCENTER_CACHE_LIMIT) {
+        _vCenterCache.clear();
+    }
+    _vCenterCache.set(key, delta);
+    return delta;
+}
+
 /**
  * Применяет параметры размера поля для inline-редактора (textarea/backdrop).
  * Отдельно от applyTextStyles, чтобы не дублировать логику в статическом слое.

package/src/tools/manager/ToolManagerLifecycle.js

@@ -1,3 +1,5 @@
+import { Events } from '../../core/events/Events.js';
+
 const PASSIVE_FALSE = { passive: false };
 
 export class ToolManagerLifecycle {
@@ -70,12 +72,49 @@ export class ToolManagerLifecycle {
 
         manager._onWindowWheel = (event) => {
             try {
-                if (event && event.ctrlKey && manager.isMouseOverContainer) {
-                    event.preventDefault();
+                if (!event || !(event.ctrlKey || event.metaKey)) return;
+                // Гасим браузерный зум страницы при Ctrl/Cmd+колесо в пределах мудборда,
+                // независимо от того, над холстом курсор или над HTML-панелью
+                event.preventDefault();
+
+                // _onWheel (на canvas) ловит зум, когда цель события — сам canvas.
+                // HTML-оверлеи (textarea редактора текста, ручки и т.п.) — соседи canvas,
+                // а не его потомки, поэтому их wheel-события не всплывают через canvas.
+                // Ловим их здесь: эмитируем WheelZoom, если событие пришло изнутри
+                // контейнера мудборда, но НЕ с самого canvas (чтобы не дублировать).
+                if (event.target !== manager.container) {
+                    const parent = manager.container && manager.container.parentElement;
+                    if (parent && parent.contains(event.target)) {
+                        const canvasRect = manager.container.getBoundingClientRect();
+                        const x = event.clientX - canvasRect.left;
+                        const y = event.clientY - canvasRect.top;
+                        manager.eventBus.emit(Events.Tool.WheelZoom, { x, y, delta: event.deltaY });
+                    }
                 }
             } catch (_) {}
         };
         window.addEventListener('wheel', manager._onWindowWheel, PASSIVE_FALSE);
+
+        // Перехватываем браузерный зум страницы (Ctrl +/-/0) и масштабируем только холст
+        manager._onWindowZoomKeys = (event) => {
+            try {
+                if (!event || !(event.ctrlKey || event.metaKey) || event.altKey) return;
+                const key = event.key;
+                let zoomEvent = null;
+                if (key === '=' || key === '+') {
+                    zoomEvent = Events.UI.ZoomIn;
+                } else if (key === '-' || key === '_') {
+                    zoomEvent = Events.UI.ZoomOut;
+                } else if (key === '0') {
+                    zoomEvent = Events.UI.ZoomReset;
+                }
+                if (!zoomEvent) return;
+                event.preventDefault();
+                event.stopPropagation();
+                manager.eventBus.emit(zoomEvent);
+            } catch (_) {}
+        };
+        window.addEventListener('keydown', manager._onWindowZoomKeys, true);
     }
 
     static destroy(manager) {
@@ -112,6 +151,13 @@ export class ToolManagerLifecycle {
             manager._onWindowWheel = null;
         }
 
+        if (manager._onWindowZoomKeys) {
+            try {
+                window.removeEventListener('keydown', manager._onWindowZoomKeys, true);
+            } catch (_) {}
+            manager._onWindowZoomKeys = null;
+        }
+
         if (manager.gestures) {
             manager.gestures.destroy();
         }

package/src/tools/object-tools/connector/ConnectorDragController.js

@@ -172,6 +172,9 @@ export class ConnectorDragController {
             if (Math.abs(e.clientX - this._startX) < DRAG_THRESHOLD
              && Math.abs(e.clientY - this._startY) < DRAG_THRESHOLD) return;
             this._dragging = true;
+            // Гасим hover-lift на время протягивания: цель не должна масштабироваться
+            // и подниматься, иначе её границы вылезают за рамку подсветки.
+            this.core?.pixi?.hoverLift?.setConnecting(true);
             const world = this._world();
             if (world) {
                 this._previewGraphics   = new PIXI.Graphics();
@@ -192,6 +195,10 @@ export class ConnectorDragController {
         if (objectId && objectId !== this._sourceTerminal?.boundId) {
             const bounds = this._objectBounds(objectId);
             if (bounds) {
+                // Рамку строим строго по логическим bounds — коннектор привязывается
+                // к ним же. Hover-трансформацию (scale/lift) не учитываем: иначе рамка
+                // выпирает за периметр объекта (раздув ×scale + подъём центра вверх) и
+                // отстаёт от анимации, т.к. перерисовывается только на pointermove.
                 this._highlightGraphics.lineStyle({ width: 2, color: 0x2563EB, alpha: 0.85 });
                 this._highlightGraphics.drawRect(bounds.x, bounds.y, bounds.width, bounds.height);
                 // Подводим превью к коннектору, если курсор в зоне магнита
@@ -220,6 +227,7 @@ export class ConnectorDragController {
         const source      = this._sourceTerminal;
         this._dragging        = false;
         this._sourceTerminal  = null;
+        this.core?.pixi?.hoverLift?.setConnecting(false);
         this._clearGraphics();
 
         if (!source) return;
@@ -331,6 +339,7 @@ export class ConnectorDragController {
     destroy() {
         document.removeEventListener('pointermove', this._boundMove);
         document.removeEventListener('pointerup',   this._boundUp);
+        this.core?.pixi?.hoverLift?.setConnecting(false);
         if (this._pendingDupListener) {
             this.eventBus?.off(Events.Tool.DuplicateReady, this._pendingDupListener);
             this._pendingDupListener = null;

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

@@ -1,9 +1,33 @@
 import { Events } from '../../../core/events/Events.js';
 import {
+    applyNoteEditorBox,
     createNoteEditorUpdater,
     registerNoteEditorSync,
 } from './TextEditorSyncService.js';
 
+// Разметка иконки запрета (assets/icons/ban.svg). stroke=currentColor — цвет задаётся CSS.
+const NOTE_BAN_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M4.929 4.929 19.07 19.071"/></svg>';
+
+/**
+ * Создаёт (или переиспользует) оверлей запрета ввода внутри wrapper редактора записки
+ * и возвращает функцию переключения его видимости.
+ * @param {HTMLElement} wrapper
+ * @returns {(visible: boolean) => void}
+ */
+function ensureNoteLimitBan(wrapper) {
+    let banEl = wrapper.querySelector('.moodboard-note-limit-ban');
+    if (!banEl) {
+        banEl = document.createElement('div');
+        banEl.className = 'moodboard-note-limit-ban';
+        banEl.innerHTML = NOTE_BAN_SVG;
+        banEl.style.display = 'none';
+        wrapper.appendChild(banEl);
+    }
+    return (visible) => {
+        banEl.style.display = visible ? 'flex' : 'none';
+    };
+}
+
 export function setupNoteInlineEditor(controller, params) {
     const {
         objectId,
@@ -35,63 +59,50 @@ export function setupNoteInlineEditor(controller, params) {
         }
     }
 
-    // Текст у записки центрирован по обеим осям; textarea тоже центрируем
-    const horizontalPadding = 16; // немного больше, чем раньше
-    // Преобразуем мировые размеры/отступы в CSS-пиксели с учётом текущего зума
-    const viewResLocal = (controller.app?.renderer?.resolution) || (view.width && view.clientWidth ? (view.width / view.clientWidth) : 1);
+    // Текст у записки центрирован по обеим осям; редактор повторяет блок текста.
+    const horizontalPadding = 16;
+    // Мировые размеры/отступы → CSS-пиксели. Множитель = worldScale, БЕЗ деления на
+    // renderer.resolution: screenPos берётся из toGlobal (см. InlineEditorPositioningService),
+    // который уже возвращает CSS-px независимо от res, а сама записка рисуется в PIXI, где
+    // 1 мировая единица = worldScale CSS-px. Лишнее /res занижало ширину блока и слагаемое
+    // центрирования (noteWidth*scale/2) → при зуме браузера ≠100% (res≠1) редактор уезжал влево.
     const worldLayerRefForCss = controller.textEditor.world || (controller.app?.stage);
     const sForCss = worldLayerRefForCss?.scale?.x || 1;
-    const sCssLocal = sForCss / viewResLocal;
-    const editorWidthWorld = Math.min(360, Math.max(1, noteWidth - (horizontalPadding * 2)));
-    const editorHeightWorld = Math.min(180, Math.max(1, noteHeight - (horizontalPadding * 2)));
-    const editorWidthPx = Math.max(1, Math.round(editorWidthWorld * sCssLocal));
-    const editorHeightPx = Math.max(1, Math.round(editorHeightWorld * sCssLocal));
-    const textCenterXWorld = noteWidth / 2;
-    const textCenterYWorld = noteHeight / 2;
-    const editorLeftWorld = textCenterXWorld - (editorWidthWorld / 2);
-    const editorTopWorld = textCenterYWorld - (editorHeightWorld / 2);
-    wrapper.style.left = `${Math.round(screenPos.x + editorLeftWorld * sCssLocal)}px`;
-    wrapper.style.top = `${Math.round(screenPos.y + editorTopWorld * sCssLocal)}px`;
-    // Устанавливаем размеры редактора (центрируем по контенту) в CSS-пикселях
-    textarea.style.width = `${editorWidthPx}px`;
-    textarea.style.height = `${editorHeightPx}px`;
-    wrapper.style.width = `${editorWidthPx}px`;
-    wrapper.style.height = `${editorHeightPx}px`;
+    const sCssLocal = sForCss;
 
-    // Для записок: авто-ресайз редактора под содержимое с сохранением центрирования
-    textarea.style.textAlign = 'center';
-    const maxEditorWidthPx = Math.max(1, Math.round((noteWidth - (horizontalPadding * 2)) * sCssLocal));
-    const maxEditorHeightPx = Math.max(1, Math.round((noteHeight - (horizontalPadding * 2)) * sCssLocal));
-    const MIN_NOTE_EDITOR_W = 20;
-    const MIN_NOTE_EDITOR_H = Math.max(1, computeLineHeightPx(effectiveFontPx));
+    const backdrop = wrapper.querySelector('.moodboard-text-backdrop');
 
-    const autoSizeNote = () => {
-        // Сначала сбрасываем размеры, чтобы измерить естественные
-        textarea.style.width = 'auto';
-        textarea.style.height = 'auto';
+    // Оверлей запрета ввода: показывается по центру записки, когда достигнут лимит
+    // строк (NOTE_MAX_LINES). Иконка — assets/icons/ban.svg (stroke=currentColor).
+    const setBanVisible = ensureNoteLimitBan(wrapper);
 
-        // Ширина по содержимому, но не шире границ записки (в CSS-пикселях)
-        const naturalW = Math.ceil(textarea.scrollWidth + 1);
-        const targetW = Math.min(maxEditorWidthPx, Math.max(MIN_NOTE_EDITOR_W, naturalW));
-        textarea.style.width = `${targetW}px`;
-        wrapper.style.width = `${targetW}px`;
+    // Внутренний блок текста = границы записки минус отступы, ограничение ширины 360 —
+    // как в NoteObject._getVisibleTextWidth.
+    const MIN_NOTE_EDITOR_H = Math.max(1, computeLineHeightPx(effectiveFontPx));
+    const innerWorldW = Math.max(1, Math.min(360, noteWidth - (horizontalPadding * 2)));
+    const innerWorldH = Math.max(1, noteHeight - (horizontalPadding * 2));
+    const boxW = Math.max(1, Math.round(innerWorldW * sCssLocal));
+    const innerH = Math.max(MIN_NOTE_EDITOR_H, Math.round(innerWorldH * sCssLocal));
 
-        // Высота по содержимому, c нижним пределом = одна строка
-        const computed = (typeof window !== 'undefined') ? window.getComputedStyle(textarea) : null;
-        const lineH = (computed ? parseFloat(computed.lineHeight) : computeLineHeightPx(effectiveFontPx));
-        const naturalH = Math.ceil(textarea.scrollHeight);
-        const targetH = Math.min(maxEditorHeightPx, Math.max(MIN_NOTE_EDITOR_H, naturalH));
-        textarea.style.height = `${targetH}px`;
-        wrapper.style.height = `${targetH}px`;
+    const autoSizeNote = () => {
+        const result = applyNoteEditorBox(textarea, backdrop, {
+            boxW,
+            innerH,
+            effectiveFontPx,
+        });
+        wrapper.style.width = `${boxW}px`;
+        wrapper.style.height = `${result.contentH}px`;
 
-        // Центрируем wrapper внутри записки после смены размеров (в CSS-пикселях)
-        const left = Math.round(screenPos.x + (noteWidth * sCssLocal) / 2 - (targetW / 2));
-        const top = Math.round(screenPos.y + (noteHeight * sCssLocal) / 2 - (targetH / 2));
+        // Центрируем блок контента внутри записки по обеим осям (как PIXI-текст).
+        const left = Math.round(screenPos.x + (noteWidth * sCssLocal) / 2 - (boxW / 2));
+        const top = Math.round(screenPos.y + (noteHeight * sCssLocal) / 2 - (result.contentH / 2));
         wrapper.style.left = `${left}px`;
         wrapper.style.top = `${top}px`;
+        return result;
     };
     // Первый вызов — синхронизировать с текущим содержимым
-    autoSizeNote();
+    const initial = autoSizeNote();
+    setBanVisible(!!(initial && initial.full));
 
     // Динамическое обновление позиции/размера редактора при зуме/панорамировании/трансформациях
     const updateNoteEditor = createNoteEditorUpdater(controller, {
@@ -109,5 +120,5 @@ export function setupNoteInlineEditor(controller, params) {
     });
     registerNoteEditorSync(controller, { objectId, updateNoteEditor });
 
-    return { updateNoteEditor };
+    return { updateNoteEditor, setBanVisible };
 }

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

@@ -8,6 +8,45 @@ const propertiesToCopy = [
 ];
 
 let mirrorDiv = null;
+let glyphMeasureCanvas = null;
+
+// Возвращает выступ чернил (ink) глифа за его advance width в CSS-px. У рукописных и
+// наклонных шрифтов (например Caveat) правый край буквы выходит за ширину продвижения,
+// по которой считается позиция каретки, поэтому она визуально наезжает на символ.
+// actualBoundingBoxRight — расстояние от точки отрисовки до правого края чернил;
+// разница с width даёт величину выступа. <=0 для обычных прямых шрифтов.
+function measureGlyphRightOverflow(computed, ch) {
+    if (!ch || ch === '\n') {
+        return 0;
+    }
+    try {
+        if (typeof document === 'undefined') {
+            return 0;
+        }
+        if (!glyphMeasureCanvas) {
+            glyphMeasureCanvas = document.createElement('canvas');
+        }
+        const ctx = glyphMeasureCanvas.getContext('2d');
+        if (!ctx) {
+            return 0;
+        }
+        const fontStyle = computed.fontStyle || 'normal';
+        const fontWeight = computed.fontWeight || 'normal';
+        const fontSize = computed.fontSize || '16px';
+        const fontFamily = computed.fontFamily || 'sans-serif';
+        ctx.font = `${fontStyle} ${fontWeight} ${fontSize} ${fontFamily}`;
+        const metrics = ctx.measureText(ch);
+        const advance = metrics.width || 0;
+        const inkRight = metrics.actualBoundingBoxRight;
+        if (!Number.isFinite(inkRight)) {
+            return 0;
+        }
+        const overflow = inkRight - advance;
+        return overflow > 0 ? overflow : 0;
+    } catch (_) {
+        return 0;
+    }
+}
 
 export function getCaretCoordinates(element, position) {
     if (!mirrorDiv) {
@@ -84,8 +123,21 @@ export function updateCustomCaret(textarea, caretEl) {
     // Calculate width based on font size to match stroke thickness
     const computed = window.getComputedStyle(textarea);
     const fontSize = parseFloat(computed.fontSize) || 16;
-    // Caveat has thicker strokes, Arial is standard. A good heuristic is ~0.06 to 0.08 of font size, min 2px.
-    const caretWidth = Math.max(2, Math.round(fontSize * 0.07));
+
+    // Сдвиг каретки вправо складывается из выступа чернил последней буквы (у рукописных/
+    // наклонных шрифтов глиф вылазит за advance width) и межбуквенного интервала текста.
+    // Применяем только в конце строки — в середине следующий символ и так перекрывает выступ.
+    const value = textarea.value || '';
+    const atLineEnd = pos >= value.length || value[pos] === '\n';
+    const lastChar = pos > 0 ? value[pos - 1] : '';
+    const inkOverflow = atLineEnd ? measureGlyphRightOverflow(computed, lastChar) : 0;
+    const letterSpacing = parseFloat(computed.letterSpacing);
+    const spacingGap = Number.isFinite(letterSpacing) ? Math.max(0, letterSpacing) : 0;
+    const caretGap = inkOverflow + spacingGap;
+    // Толщина каретки пропорциональна шрифту (≈7% размера). Минимум 1px — при сильном
+    // отдалении каретка остаётся видимой и не нарушает пропорцию. Жёсткий пол 2px убран,
+    // чтобы при уменьшении масштаба каретка масштабировалась вместе с текстом.
+    const caretWidth = Math.max(1, Math.round(fontSize * 0.07));
 
     // Цвет текста в textarea теперь прозрачный (видимый текст рисует backdrop-слой),
     // поэтому цвет каретки берём из backdrop, иначе она станет невидимой.
@@ -101,7 +153,7 @@ export function updateCustomCaret(textarea, caretEl) {
     }
 
     caretEl.style.top = `${top - 2}px`;
-    caretEl.style.left = `${left - Math.floor(caretWidth / 2)}px`;
+    caretEl.style.left = `${left - Math.floor(caretWidth / 2) + caretGap}px`;
     caretEl.style.height = `${coords.height}px`;
     caretEl.style.width = `${caretWidth}px`;
     caretEl.style.backgroundColor = caretColor;

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

@@ -8,6 +8,7 @@ import {
     showStaticTextAfterEditing,
     updateGlobalTextEditorHandlesLayer,
 } from './TextEditorLifecycleRegistry.js';
+import { unregisterEditorListeners } from './InlineEditorListenersRegistry.js';
 
 export function applyTextEditorCaretFromClick({ create, objectId, object, textarea }) {
     try {
@@ -213,6 +214,7 @@ export function bindTextEditorInteractions(controller, {
     isShape,
     autoSize,
     updateNoteEditor,
+    setNoteBanVisible,
     finalize,
     listType,
 }) {
@@ -286,6 +288,12 @@ export function bindTextEditorInteractions(controller, {
     const keydownHandler = (e) => {
         const isList = listType && listType !== 'none';
         if (e.key === 'Enter') {
+            // В записке Enter переносит каретку на новую строку (нативное поведение
+            // textarea), а не завершает ввод. Завершение — по клику вне записки (blur)
+            // или по Escape. Высота поля пересчитывается через 'input' → updateNoteEditor.
+            if (isNote) {
+                return;
+            }
             if (isList && !e.shiftKey) {
                 e.preventDefault();
                 const start = textarea.selectionStart;
@@ -320,7 +328,31 @@ export function bindTextEditorInteractions(controller, {
     // уносил текст вправо от фигуры. Поэтому ввод в фигуре границы не меняет.
     let inputHandler;
     if (isNote) {
-        inputHandler = () => { try { if (updateNoteEditor) updateNoteEditor(); } catch (_) {} };
+        // Лимит строк записки: если очередной ввод превышает вместимость (>25 строк или
+        // не влезает по высоте при минимальном шрифте), откатываем значение и показываем
+        // иконку запрета. Иначе пересчитываем подгонку и держим иконку, пока записка полна.
+        let lastGoodValue = textarea.value;
+        let lastGoodSel = textarea.selectionStart || 0;
+        inputHandler = () => {
+            try {
+                const res = updateNoteEditor ? updateNoteEditor() : null;
+                // Откатываем только рост текста, превысивший вместимость. Удаление/замену
+                // на более короткое значение всегда принимаем, иначе из переполненного
+                // состояния нельзя выйти.
+                const growing = textarea.value.length > lastGoodValue.length;
+                if (res && res.fits === false && growing) {
+                    const restorePos = Math.min(lastGoodSel, lastGoodValue.length);
+                    textarea.value = lastGoodValue;
+                    textarea.selectionStart = textarea.selectionEnd = restorePos;
+                    if (updateNoteEditor) updateNoteEditor();
+                    if (setNoteBanVisible) setNoteBanVisible(true);
+                } else {
+                    lastGoodValue = textarea.value;
+                    lastGoodSel = textarea.selectionStart || 0;
+                    if (setNoteBanVisible) setNoteBanVisible(!!(res && res.full));
+                }
+            } catch (_) {}
+        };
     } else if (isShape) {
         inputHandler = () => {};
     } else {
@@ -359,6 +391,10 @@ export function bindTextEditorInteractions(controller, {
     };
 
     const caretUpdateHandler = () => {
+        // _caretSuppressed выставляется registerRegularTextEditorSync на время зума:
+        // не перерисовываем каретку, пока она должна быть скрыта (избегаем мигания
+        // каретки старого размера в промежуточных кадрах при Ctrl±).
+        if (controller.textEditor && controller.textEditor._caretSuppressed) return;
         if (controller.textEditor && controller.textEditor.caret) {
             updateCustomCaret(textarea, controller.textEditor.caret);
         }
@@ -444,6 +480,9 @@ export function closeTextEditorFromState(controller, commit) {
         }
     }
 
+    if (Array.isArray(controller.textEditor._listeners)) {
+        try { unregisterEditorListeners(controller.eventBus, controller.textEditor._listeners); } catch (_) {}
+    }
     if (typeof removeDomListeners === 'function') {
         try { removeDomListeners(); } catch (_) {}
     }

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

@@ -71,6 +71,13 @@ export function cleanupActiveTextEditor(controller, wrapper) {
             unregisterEditorListeners(controller.eventBus, controller.textEditor._listeners);
         }
     } catch (_) {}
+    // Снимаем таймер дебаунса и флаг подавления каретки (редактор мог закрыться в процессе зума)
+    try {
+        if (typeof controller.textEditor?._caretHideTimer === 'function') {
+            controller.textEditor._caretHideTimer();
+        }
+        if (controller.textEditor) controller.textEditor._caretSuppressed = false;
+    } catch (_) {}
 
     wrapper.remove();
     controller.textEditor = {

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

@@ -71,9 +71,10 @@ export function positionRegularTextEditor({
     } catch (_) {}
 
     const leftPx = Math.round(baseLeftPx - padLeft);
-    const topPx = create
-        ? Math.round(baseTopPx - padTop - (lineHeightPx / 2))
-        : Math.round(baseTopPx + staticPadTop - padTop + 1);
+    // Верх текста редактора привязываем к точке клика (= верх рамки ручек и будущего
+    // статического текста). Прежний create-якорь `- lineHeightPx/2` (центрирование каретки
+    // по клику) поднимал текст на пол-строки выше рамки mb-handles-box-obj_.
+    const topPx = Math.round(baseTopPx + staticPadTop - padTop + 1);
 
     wrapper.style.left = `${leftPx}px`;
     wrapper.style.top = `${topPx}px`;