@sequent-org/moodboard 1.4.49 → 1.4.51

package/src/ui/HtmlHandlesLayer.js

@@ -27,6 +27,7 @@ export class HtmlHandlesLayer {
         this.handles = {};
         this._drag = null;
       this._handlesSuppressed = false; // скрывать ручки во время перетаскивания/трансформаций
+      this._cropMode = false; // полное подавление во время crop (ни рамка, ни ручки)
         this._groupRotationPreview = null;
 
       // Ссылки на обработчики, чтобы корректно отписаться при destroy()
@@ -96,6 +97,7 @@ export class HtmlHandlesLayer {
     }
 
     update() {
+      if (this._cropMode) return;
       // Дополнительная защита: если слой или core уже уничтожены,
       // выходим, чтобы не получить ошибок при resize/смене DPR
       if (!this.core || !this.core.pixi || !this.core.pixi.app || !this.layer) return;

package/src/ui/ImagePropertiesPanel.js

@@ -2,6 +2,7 @@ import * as PIXI from 'pixi.js';
 import { Events } from '../core/events/Events.js';
 import { EditFileNameCommand } from '../core/commands/EditFileNameCommand.js';
 import { applyRoundedMask } from '../utils/applyRoundedMask.js';
+import { CropController } from '../services/CropController.js';
 
 const ICONS = {
     download: `<svg width="24" height="24" fill="none" viewBox="0 0 24 24" type="download"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 14.75V16.25C4.75 17.9069 6.09315 19.25 7.75 19.25H16.25C17.9069 19.25 19.25 17.9069 19.25 16.25V14.75"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 14.25L12 4.75"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.75 10.75L12 14.25L15.25 10.75"></path></svg>`,
@@ -38,6 +39,9 @@ export class ImagePropertiesPanel {
         this.currentId = null;
         this._handlers = null;
 
+        this._cropController = new CropController({ core, eventBus, container });
+        this._cropController._onActivate = (active) => this._onCropActivate(active);
+
         this._attachEvents();
         this._createPanel();
     }
@@ -125,6 +129,9 @@ export class ImagePropertiesPanel {
     }
 
     showFor(objectId) {
+        if (this.currentId !== objectId) {
+            this._cropController?.cancel();
+        }
         this.currentId = objectId;
         if (this.panel) {
             this.panel.style.display = 'flex';
@@ -148,13 +155,12 @@ export class ImagePropertiesPanel {
     }
 
     _toggleLocked() {
-        const obj = this._getCurrentObject();
-        if (!obj) return;
-        if (!obj.properties) obj.properties = {};
-        obj.properties.locked = !obj.properties.locked;
-        if (typeof this.core?.state?.markDirty === 'function') {
-            this.core.state.markDirty();
-        }
+        if (!this.currentId) return;
+        const newLocked = !this._isLocked();
+        this.eventBus.emit(Events.Object.StateChanged, {
+            objectId: this.currentId,
+            updates: { properties: { locked: newLocked } },
+        });
         this._updateLockUI();
         this.reposition();
     }
@@ -163,7 +169,7 @@ export class ImagePropertiesPanel {
         if (!this._btn_lock) return;
         const locked = this._isLocked();
 
-        this._btn_lock.innerHTML = locked ? ICONS.unlock : ICONS.lock;
+        this._btn_lock.innerHTML = locked ? ICONS.lock : ICONS.unlock;
         this._btn_lock.title = locked ? 'Разблокировать' : 'Заблокировать';
 
         if (Array.isArray(this._lockableEls)) {
@@ -178,6 +184,7 @@ export class ImagePropertiesPanel {
     }
 
     hide() {
+        this._cropController?.cancel();
         this.currentId = null;
         if (this.panel) {
             this.panel.style.display = 'none';
@@ -185,6 +192,36 @@ export class ImagePropertiesPanel {
         this._closeBorderRadiusPopover();
     }
 
+    /**
+     * Вызывается CropController при входе/выходе из режима crop.
+     * Прячет тулбар и ручки выделения на время crop; восстанавливает по завершении.
+     */
+    _onCropActivate(active) {
+        if (!this.panel) return;
+
+        const handlesLayer = typeof window !== 'undefined' ? window.moodboardHtmlHandlesLayer : null;
+        const anchorsLayer = typeof window !== 'undefined' ? window.moodboardConnectionAnchorsLayer : null;
+
+        if (active) {
+            this.panel.style.display = 'none';
+            if (handlesLayer) {
+                handlesLayer._cropMode = true;
+                handlesLayer.hide();
+            }
+            anchorsLayer?.update();
+        } else {
+            // Восстанавливаем тулбар только если объект ещё выделен
+            if (this.currentId) {
+                this.panel.style.display = 'flex';
+            }
+            if (handlesLayer) {
+                handlesLayer._cropMode = false;
+                handlesLayer.update();
+            }
+            anchorsLayer?.update();
+        }
+    }
+
     _closeBorderRadiusPopover() {
         if (this._borderRadiusPopover) {
             this._borderRadiusPopover.classList.remove('is-open');
@@ -316,12 +353,6 @@ export class ImagePropertiesPanel {
         mainBtn.className = 'ipp-btn-split-main';
         mainBtn.title = 'Обрезать';
         mainBtn.innerHTML = ICONS.crop;
-        mainBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            // Логика применения текущего кропа
-        });
-
         const expandBtn = document.createElement('button');
         expandBtn.className = 'ipp-btn-split-expand';
         expandBtn.title = 'Выбрать пропорции';
@@ -330,15 +361,36 @@ export class ImagePropertiesPanel {
         const dropdown = document.createElement('div');
         dropdown.className = 'ipp-crop-dropdown';
 
+        const toggleCropDropdown = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const isOpen = dropdown.classList.contains('is-open');
+            
+            document.querySelectorAll('.ipp-crop-dropdown.is-open, .ipp-more-dropdown.is-open, .ipp-border-radius-popover.is-open, .ipp-border-style-popover.is-open').forEach(el => {
+                el.classList.remove('is-open');
+            });
+            document.querySelectorAll('.ipp-btn-split-expand.is-expanded, .ipp-btn.is-active').forEach(el => {
+                el.classList.remove('is-expanded', 'is-active');
+            });
+
+            if (!isOpen) {
+                dropdown.classList.add('is-open');
+                expandBtn.classList.add('is-expanded');
+            }
+        };
+
+        mainBtn.addEventListener('click', toggleCropDropdown);
+        expandBtn.addEventListener('click', toggleCropDropdown);
+
         const items = [
-            { id: 'custom', label: 'Custom', icon: ICONS.ddCustom },
-            { id: 'original', label: 'Original', icon: ICONS.ddOriginal },
+            { id: 'custom', label: 'Произвольный', icon: ICONS.ddCustom },
+            { id: 'original', label: 'Оригинал', icon: ICONS.ddOriginal },
             { divider: true },
-            { id: 'circle', label: 'Circle', icon: ICONS.ddCircle },
-            { id: 'square', label: 'Square', icon: ICONS.ddSquare },
-            { id: 'portrait', label: 'Portrait', icon: ICONS.ddPortrait, ratio: '3:4' },
-            { id: 'landscape', label: 'Landscape', icon: ICONS.ddLandscape, ratio: '4:3' },
-            { id: 'wide', label: 'Wide', icon: ICONS.ddWide, ratio: '16:9' },
+            { id: 'circle', label: 'Круг', icon: ICONS.ddCircle },
+            { id: 'square', label: 'Квадрат', icon: ICONS.ddSquare },
+            { id: 'portrait', label: 'Портрет', icon: ICONS.ddPortrait, ratio: '3:4' },
+            { id: 'landscape', label: 'Пейзаж', icon: ICONS.ddLandscape, ratio: '4:3' },
+            { id: 'wide', label: 'Широкий', icon: ICONS.ddWide, ratio: '16:9' },
         ];
 
         items.forEach(item => {
@@ -372,33 +424,16 @@ export class ImagePropertiesPanel {
             btn.addEventListener('click', (e) => {
                 e.preventDefault();
                 e.stopPropagation();
-                // Логика выбора пропорции
                 dropdown.classList.remove('is-open');
                 expandBtn.classList.remove('is-expanded');
+                if (this.currentId) {
+                    this._cropController.start(this.currentId, item.id);
+                }
             });
 
             dropdown.appendChild(btn);
         });
 
-        expandBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            const isOpen = dropdown.classList.contains('is-open');
-            
-            // Закрываем все другие дропдауны, если есть (на будущее)
-            document.querySelectorAll('.ipp-crop-dropdown.is-open, .ipp-more-dropdown.is-open').forEach(el => {
-                el.classList.remove('is-open');
-            });
-            document.querySelectorAll('.ipp-btn-split-expand.is-expanded, .ipp-btn.is-active').forEach(el => {
-                el.classList.remove('is-expanded', 'is-active');
-            });
-
-            if (!isOpen) {
-                dropdown.classList.add('is-open');
-                expandBtn.classList.add('is-expanded');
-            }
-        });
-
         wrapper.appendChild(mainBtn);
         wrapper.appendChild(expandBtn);
         wrapper.appendChild(dropdown);
@@ -1442,6 +1477,7 @@ export class ImagePropertiesPanel {
     }
 
     destroy() {
+        this._cropController?.destroy();
         if (!this.eventBus || !this._handlers) return;
 
         this.eventBus.off(Events.Tool.SelectionAdd, this._handlers.onSelectionAdd);

package/src/ui/connectors/ConnectionAnchorsLayer.js

@@ -144,6 +144,10 @@ export class ConnectionAnchorsLayer {
     update() {
         if (!this.layer) return;
         if (this._commentPopoverOpen) return;
+        if (typeof window !== 'undefined' && window.moodboardHtmlHandlesLayer?._cropMode) {
+            this.layer.innerHTML = '';
+            return;
+        }
         this.layer.innerHTML = '';
         
         const selection = Array.from(this.core?.selectTool?.selectedObjects || []);

package/src/ui/handles/HandlesDomRenderer.js

@@ -1157,6 +1157,7 @@ export class HandlesDomRenderer {
         let isFrameTarget = false;
         let isMindmapTarget = false;
         let isMindmapOnlyGroupTarget = false;
+        let isLockedTarget = false;
         let isRevitScreenshotTarget = false;
         let revitViewPayload = null;
         let isModel3dScreenshotTarget = false;
@@ -1167,11 +1168,12 @@ export class HandlesDomRenderer {
         const hiddenIncomingSide = { value: null };
         if (id !== '__group__') {
             const req = { objectId: id, pixiObject: null };
-            this.host.eventBus.emit(Events.Tool.GetObjectPixi, req);
+            this.host.eventBus.emit('tool:get:object:pixi', req);
             const mbType = req.pixiObject && req.pixiObject._mb && req.pixiObject._mb.type;
             isFileTarget = mbType === 'file';
             isFrameTarget = mbType === 'frame';
             isMindmapTarget = mbType === 'mindmap';
+            isLockedTarget = !!req.pixiObject?._mb?.properties?.locked;
             isRevitScreenshotTarget = mbType === 'revit-screenshot-img';
             revitViewPayload = req.pixiObject?._mb?.properties?.view || null;
             isModel3dScreenshotTarget = mbType === 'model3d-screenshot-img';
@@ -1199,9 +1201,14 @@ export class HandlesDomRenderer {
             if (selectionIds.length > 0) {
                 const byId = new Map((this.host.core?.state?.state?.objects || []).map((obj) => [obj?.id, obj]));
                 isMindmapOnlyGroupTarget = selectionIds.every((selectedId) => byId.get(selectedId)?.type === 'mindmap');
+                isLockedTarget = selectionIds.some(selId => {
+                    const req = { objectId: selId, pixiObject: null };
+                    this.host.eventBus.emit('tool:get:object:pixi', req);
+                    return !!req.pixiObject?._mb?.properties?.locked;
+                });
             }
         }
-        const isNonResizableTarget = isFileTarget || isMindmapTarget || isMindmapOnlyGroupTarget;
+        const isNonResizableTarget = isFileTarget || isMindmapTarget || isMindmapOnlyGroupTarget || isLockedTarget;
 
         const left = Math.round(cssRect.left);
         const top = Math.round(cssRect.top);

package/src/ui/handles/HandlesEventBridge.js

@@ -114,6 +114,7 @@ export class HandlesEventBridge {
             [Events.UI.ZoomPercent, () => this.host.update()],
             [Events.Tool.PanUpdate, () => this.host.update()],
             [Events.Viewport.Changed, () => this.host.update()],
+            [Events.Object.TransformUpdated, () => this.host.update()],
             [Events.History.Changed, (data) => {
                 if (data?.lastUndone || data?.lastRedone) {
                     this.host._endGroupRotationPreview();

package/src/ui/styles/panels.css

@@ -206,49 +206,119 @@
     height: 36px;
 }
 
-/* Frame properties panel — mirror text panel look */
+/* Frame properties toolbar — mirror image toolbar look */
 .frame-properties-panel {
     position: absolute;
     pointer-events: auto;
-    display: inline-flex;
+    display: flex;
+    flex-direction: row;
     align-items: center;
-    gap: 8px;
-    padding: 12px 32px;
-    background-color: #ffffff;
-    border: 1px solid #e0e0e0;
-    border-radius: 9999px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+    gap: 2px;
+    padding: 4px 8px;
+    background: #ffffff;
+    border: 1px solid #E5E7EB;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     font-size: 13px;
-    font-family: 'Roboto', Arial, sans-serif;
-    min-width: 320px;
+    z-index: 3000;
+    user-select: none;
+    white-space: nowrap;
+}
+
+/* Ratio split-dropdown (двухстрочная кнопка «Ratio / значение») */
+.fpp-ratio {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+}
+
+.fpp-ratio-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
     height: 36px;
+    padding: 0 8px;
+    border: none;
+    background: none;
+    border-radius: 6px;
+    cursor: pointer;
+    color: #374151;
+    font-family: inherit;
+    transition: background 0.15s;
 }
 
-.frame-properties-panel .fpp-label {
-    font-family: 'Roboto', Arial, sans-serif;
-    font-size: 12px;
-    color: #666;
-    font-weight: 500;
+.fpp-ratio-btn:hover {
+    background: #F3F4F6;
 }
 
-.frame-properties-panel .fpp-select,
-.frame-properties-panel .fpp-input {
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    padding: 4px 8px;
+.fpp-ratio-text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    line-height: 1.15;
+}
+
+.fpp-ratio-caption {
+    font-size: 10px;
+    color: #9CA3AF;
+}
+
+.fpp-ratio-value {
     font-size: 13px;
-    background-color: #fff;
+    color: #374151;
+    font-weight: 500;
 }
 
-.frame-properties-panel .fpp-select {
-    height: 28px;
-    line-height: 28px;
+.fpp-ratio-btn svg {
+    color: #6B7280;
+    transition: transform 0.2s ease;
+}
+
+.fpp-ratio-btn.is-active svg {
+    transform: rotate(180deg);
 }
 
-.frame-properties-panel .fpp-color-button {
+.fpp-ratio-dropdown {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 0;
+    background: #ffffff;
+    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: 6px;
+    display: none;
+    flex-direction: column;
+    min-width: 180px;
+    z-index: 1001;
+}
+
+.fpp-ratio-dropdown.is-open {
+    display: flex;
+}
+
+/* Кружок цвета фона */
+.fpp-color-wrap {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     width: 28px;
     height: 28px;
-    border: 1px solid #ddd;
+    border-radius: 6px;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background 0.15s;
+}
+
+.fpp-color-wrap:hover {
+    background: #F3F4F6;
+}
+
+.fpp-color-button {
+    width: 20px;
+    height: 20px;
+    border: 1px solid #D1D5DB;
     border-radius: 50%;
     background-color: #ffffff;
     cursor: pointer;
@@ -256,9 +326,274 @@
     padding: 0;
     display: block;
     box-sizing: border-box;
+    position: relative;
+}
+
+/* transparent indicator — diagonal slash via pseudo */
+.fpp-color-button--none {
+    background-color: #ffffff !important;
+    border-color: #D1D5DB;
+}
+.fpp-color-button--none::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to top-right,
+        transparent calc(50% - 0.75px),
+        #EF4444 calc(50% - 0.75px),
+        #EF4444 calc(50% + 0.75px),
+        transparent calc(50% + 0.75px)
+    );
+    border-radius: 50%;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   Colour popup dropdown
+   ═══════════════════════════════════════════════════════════════ */
+
+.fpp-color-popup {
+    position: absolute;
+    background: #ffffff;
+    border: 1px solid #E5E7EB;
+    border-radius: 12px;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.10), 0 4px 10px rgba(0,0,0,0.05);
+    padding: 12px;
+    display: none;
+    flex-direction: column;
+    gap: 14px;
+    min-width: 196px;
+    z-index: 1001;
+    box-sizing: border-box;
+}
+.fpp-color-popup.is-open { display: flex; }
+
+.fpp-section { display: flex; flex-direction: column; gap: 8px; }
+
+.fpp-section-label {
+    font-family: 'Roboto', Arial, sans-serif;
+    font-size: 11px;
+    font-weight: 500;
+    color: #9CA3AF;
+    letter-spacing: 0.02em;
+    user-select: none;
+}
+
+/* Background type row */
+.fpp-bg-type-row { display: flex; gap: 4px; }
+
+.fpp-bg-type-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 32px;
+    border: 1.5px solid transparent;
+    border-radius: 6px;
+    background: #F9FAFB;
+    cursor: pointer;
+    color: #374151;
+    padding: 0;
+    transition: background 0.12s, border-color 0.12s;
+}
+.fpp-bg-type-btn:hover { background: #F3F4F6; border-color: #E5E7EB; }
+.fpp-bg-type-btn.is-active { border-color: #374151; background: #F3F4F6; }
+
+/* Color swatch grid */
+.fpp-color-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 28px);
+    gap: 6px;
+}
+
+.fpp-color-swatch {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 1.5px solid rgba(0,0,0,0.12);
+    background-color: var(--swatch-color, #ffffff);
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.10s, box-shadow 0.10s;
+    flex-shrink: 0;
+}
+.fpp-color-swatch:hover { transform: scale(1.12); box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
+.fpp-color-swatch.is-selected { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #374151; }
+
+.fpp-color-swatch--none {
+    background-color: #ffffff;
+    border-color: #D1D5DB;
+}
+.fpp-color-swatch--none svg { pointer-events: none; }
+
+/* Disabled colour section when transparent is selected */
+.fpp-section--color.is-disabled .fpp-color-swatch:not(.fpp-color-swatch--none) {
+    opacity: 0.32;
+    pointer-events: none;
+    cursor: default;
+}
+
+/* Custom colours row */
+.fpp-custom-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+}
+
+.fpp-add-color-btn {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 1.5px dashed #D1D5DB;
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #9CA3AF;
+    padding: 0;
+    flex-shrink: 0;
+    transition: border-color 0.12s, color 0.12s;
+}
+.fpp-add-color-btn:hover { border-color: #9CA3AF; color: #374151; }
+
+/* ═══════════════════════════════════════════════════════════════
+   HSV colour picker
+   ═══════════════════════════════════════════════════════════════ */
+
+.fpp-color-picker {
+    position: absolute;
+    background: #ffffff;
+    border: 1px solid #E5E7EB;
+    border-radius: 12px;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
+    padding: 12px;
+    display: none;
+    flex-direction: column;
+    gap: 10px;
+    z-index: 1002;
+    width: 236px;
+    box-sizing: border-box;
 }
+.fpp-color-picker.is-open { display: flex; }
 
-.frame-properties-panel .fpp-section { display: inline-flex; align-items: center; gap: 6px; }
+.fpp-color-picker__canvas-wrap {
+    position: relative;
+    width: 212px;
+    height: 148px;
+    border-radius: 6px;
+    overflow: hidden;
+    cursor: crosshair;
+    flex-shrink: 0;
+}
+.fpp-color-picker__canvas {
+    display: block;
+    width: 212px;
+    height: 148px;
+}
+.fpp-color-picker__cursor {
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    border: 2px solid #ffffff;
+    box-shadow: 0 0 0 1px rgba(0,0,0,0.30);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    top: 0;
+    left: 0;
+}
+
+.fpp-color-picker__hue-wrap { width: 100%; }
+
+.fpp-color-picker__hue-slider {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 10px;
+    border-radius: 5px;
+    background: linear-gradient(to right,
+        hsl(0,100%,50%), hsl(30,100%,50%), hsl(60,100%,50%), hsl(90,100%,50%),
+        hsl(120,100%,50%), hsl(150,100%,50%), hsl(180,100%,50%), hsl(210,100%,50%),
+        hsl(240,100%,50%), hsl(270,100%,50%), hsl(300,100%,50%), hsl(330,100%,50%),
+        hsl(360,100%,50%));
+    outline: none;
+    cursor: pointer;
+    border: none;
+}
+.fpp-color-picker__hue-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #ffffff;
+    border: 2px solid rgba(0,0,0,0.28);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.20);
+    cursor: pointer;
+}
+.fpp-color-picker__hue-slider::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #ffffff;
+    border: 2px solid rgba(0,0,0,0.28);
+    cursor: pointer;
+}
+
+.fpp-color-picker__bottom {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.fpp-color-picker__eyedropper {
+    width: 30px;
+    height: 30px;
+    border: 1px solid #E5E7EB;
+    border-radius: 6px;
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: #6B7280;
+    padding: 0;
+    flex-shrink: 0;
+    transition: background 0.12s, color 0.12s;
+}
+.fpp-color-picker__eyedropper:hover { background: #F3F4F6; color: #374151; }
+
+.fpp-color-picker__hex-input {
+    flex: 1;
+    height: 30px;
+    border: 1px solid #E5E7EB;
+    border-radius: 6px;
+    padding: 0 8px;
+    font-size: 13px;
+    font-family: 'Roboto Mono', 'Courier New', monospace;
+    color: #374151;
+    outline: none;
+    background: #ffffff;
+}
+.fpp-color-picker__hex-input:focus { border-color: #9CA3AF; }
+
+.fpp-color-picker__apply {
+    width: 100%;
+    height: 30px;
+    border: none;
+    border-radius: 6px;
+    background: #374151;
+    color: #ffffff;
+    font-size: 13px;
+    font-family: 'Roboto', Arial, sans-serif;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.12s;
+}
+.fpp-color-picker__apply:hover { background: #1F2937; }
 
 .text-properties-panel .tpp-label {
     font-family: 'Roboto', Arial, sans-serif;