@sequent-org/moodboard 1.4.54 → 1.4.56

package/src/ui/styles/chat.css

@@ -692,29 +692,25 @@
     overflow: hidden;
 }
 
-/* Overlay-заглушка на полотне доски во время генерации изображения */
-@keyframes moodboard-pending-shimmer {
-    0%   { background-position: 200% 0; }
-    100% { background-position: -100% 0; }
-}
-
+/* Overlay-заглушка (скелетон) на полотне доски во время генерации изображения.
+   Тот же вид, что у скелетона 3D/видео: белая карточка, бегущий блик,
+   пульсирующая иконка. Появление — слайдом (нужно для раскладки батча). */
 .moodboard-chat__pending-overlay {
     position: fixed;
+    box-sizing: border-box;
     --moodboard-chat-board-animation-ms: 520ms;
     --moodboard-chat-pending-enter-x: 320px;
-    background: linear-gradient(
-        90deg,
-        #5F7179 0%,
-        #7A8D96 50%,
-        #5F7179 100%
-    );
-    background-size: 200% 100%;
-    animation: moodboard-pending-shimmer 5.76s linear infinite;
+    background: #ffffff;
     border-radius: 12px;
-    box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.12);
+    box-shadow:
+        0 0 0 1px rgba(17, 24, 39, 0.08),
+        0 8px 24px rgba(15, 23, 42, 0.10);
     overflow: hidden;
     pointer-events: none;
     z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     transition:
         left var(--moodboard-chat-board-animation-ms) cubic-bezier(0.22, 1, 0.36, 1),
         transform var(--moodboard-chat-board-animation-ms) cubic-bezier(0.22, 1, 0.36, 1),
@@ -722,6 +718,21 @@
     will-change: transform, opacity;
 }
 
+/* Бегущий блик по поверхности скелетона */
+.moodboard-chat__pending-overlay::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+        100deg,
+        transparent 30%,
+        rgba(17, 24, 39, 0.07) 50%,
+        transparent 70%
+    );
+    background-size: 220% 100%;
+    animation: moodboard-chat-skeleton-sweep 1.6s linear infinite;
+}
+
 .moodboard-chat__pending-overlay--enter {
     opacity: 0;
     transform: translateX(var(--moodboard-chat-pending-enter-x));
@@ -732,17 +743,19 @@
     transform: translateX(0);
 }
 
-.moodboard-chat__pending-image-label {
-    position: absolute;
-    bottom: var(--moodboard-chat-pending-label-bottom, 10px);
-    left: var(--moodboard-chat-pending-label-left, 12px);
-    font-family: 'GeistSans', 'GeistSans Fallback', 'Roboto', Arial, sans-serif;
-    font-size: var(--moodboard-chat-pending-label-font-size, 20px);
-    font-weight: 400;
-    color: #ffffff;
-    pointer-events: none;
-    white-space: nowrap;
-    text-align: left;
+.moodboard-chat__pending-overlay-icon {
+    position: relative;
+    z-index: 1;
+    width: 34%;
+    max-width: 72px;
+    color: #9CA3AF;
+    animation: moodboard-chat-skeleton-pulse 1.8s ease-in-out infinite;
+}
+
+.moodboard-chat__pending-overlay-icon svg {
+    width: 100%;
+    height: 100%;
+    display: block;
 }
 
 /* ── Прогресс генерации 3D-модели в композере ───────────────────────── */
@@ -845,8 +858,8 @@
     display: none;
 }
 
-/* ── Скелетон 3D-модели на доске ─────────────────────────────────────── */
-.moodboard-chat__3d-skeleton {
+/* ── Скелетон генерируемого объекта на доске (3D / изображение / видео) ─── */
+.moodboard-chat__board-skeleton {
     position: fixed;
     box-sizing: border-box;
     background: #ffffff;
@@ -869,7 +882,7 @@
 }
 
 /* Бегущий блик по поверхности скелетона */
-.moodboard-chat__3d-skeleton::after {
+.moodboard-chat__board-skeleton::after {
     content: '';
     position: absolute;
     inset: 0;
@@ -883,7 +896,7 @@
     animation: moodboard-chat-skeleton-sweep 1.6s linear infinite;
 }
 
-.moodboard-chat__3d-skeleton-icon {
+.moodboard-chat__board-skeleton-icon {
     position: relative;
     z-index: 1;
     width: 34%;
@@ -892,18 +905,18 @@
     animation: moodboard-chat-skeleton-pulse 1.8s ease-in-out infinite;
 }
 
-.moodboard-chat__3d-skeleton-icon svg {
+.moodboard-chat__board-skeleton-icon svg {
     width: 100%;
     height: 100%;
     display: block;
 }
 
-.moodboard-chat__3d-skeleton--enter {
+.moodboard-chat__board-skeleton--enter {
     opacity: 0;
     transform: scale(0.92);
 }
 
-.moodboard-chat__3d-skeleton--entered {
+.moodboard-chat__board-skeleton--entered {
     opacity: 1;
     transform: scale(1);
 }

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 {