@sequent-org/moodboard 1.4.45 → 1.4.48

package/src/ui/styles/chat.css

@@ -745,6 +745,179 @@
     text-align: left;
 }
 
+/* ── Прогресс генерации 3D-модели в композере ───────────────────────── */
+.moodboard-chat__3d-overlay {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 2px 6px 4px 10px;
+}
+
+.moodboard-chat__3d-overlay-inner {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.moodboard-chat__3d-overlay-stage {
+    flex: 0 0 auto;
+    font-family: 'GeistSans', 'GeistSans Fallback', 'Roboto', Arial, sans-serif;
+    font-size: 12px;
+    line-height: 1;
+    white-space: nowrap;
+    /* «Живой» переливающийся текст, как у статус-бара генерации изображений */
+    background: linear-gradient(
+        90deg,
+        #9CA3AF 0%,
+        #9CA3AF 20%,
+        #4B5563 40%,
+        #4B5563 60%,
+        #9CA3AF 80%,
+        #9CA3AF 100%
+    );
+    background-size: 200% 100%;
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    animation: moodboard-chat-shimmer 1.8s linear infinite;
+}
+
+.moodboard-chat__3d-overlay-bar-wrap {
+    position: relative;
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 6px;
+    border-radius: 999px;
+    background: rgba(17, 24, 39, 0.08);
+    overflow: hidden;
+}
+
+.moodboard-chat__3d-overlay-bar-fill {
+    height: 100%;
+    width: 0;
+    border-radius: inherit;
+    /* Двухцветная гамма мудборда: тёмный → светло-серый → тёмный, мягкое переливание */
+    background-image: linear-gradient(90deg, #111827 0%, #9CA3AF 50%, #111827 100%);
+    background-size: 300% 100%;
+    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
+    animation: moodboard-chat-bar-shimmer 2.5s linear infinite;
+}
+
+/* Indeterminate: прогресс ещё не пришёл — скользящая полоса вместо застывшего 0% */
+.moodboard-chat__3d-overlay-bar-fill.is-indeterminate {
+    width: 35% !important;
+    transition: none;
+    animation: moodboard-chat-bar-indeterminate 1.5s ease-in-out infinite;
+}
+
+@keyframes moodboard-chat-bar-shimmer {
+    from { background-position: 100% 0; }
+    to   { background-position: 0% 0; }
+}
+
+@keyframes moodboard-chat-bar-indeterminate {
+    0%   { transform: translateX(-160%); }
+    100% { transform: translateX(450%); }
+}
+
+.moodboard-chat__3d-overlay-percent {
+    flex: 0 0 auto;
+    min-width: 30px;
+    text-align: right;
+    font-family: 'GeistSans', 'GeistSans Fallback', 'Roboto', Arial, sans-serif;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1;
+    color: #111827;
+    font-variant-numeric: tabular-nums;
+}
+
+/* Состояние ошибки: красный текст, полоса и проценты скрыты */
+.moodboard-chat__3d-overlay.is-error .moodboard-chat__3d-overlay-stage {
+    background: none;
+    -webkit-text-fill-color: #B91C1C;
+    color: #B91C1C;
+    animation: none;
+}
+
+.moodboard-chat__3d-overlay.is-error .moodboard-chat__3d-overlay-bar-wrap,
+.moodboard-chat__3d-overlay.is-error .moodboard-chat__3d-overlay-percent {
+    display: none;
+}
+
+/* ── Скелетон 3D-модели на доске ─────────────────────────────────────── */
+.moodboard-chat__3d-skeleton {
+    position: fixed;
+    box-sizing: border-box;
+    background: #ffffff;
+    border-radius: 12px;
+    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, 520ms) cubic-bezier(0.22, 1, 0.36, 1),
+        top var(--moodboard-chat-board-animation-ms, 520ms) cubic-bezier(0.22, 1, 0.36, 1),
+        opacity 360ms ease,
+        transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
+    will-change: transform, opacity;
+}
+
+/* Бегущий блик по поверхности скелетона */
+.moodboard-chat__3d-skeleton::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__3d-skeleton-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__3d-skeleton-icon svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+
+.moodboard-chat__3d-skeleton--enter {
+    opacity: 0;
+    transform: scale(0.92);
+}
+
+.moodboard-chat__3d-skeleton--entered {
+    opacity: 1;
+    transform: scale(1);
+}
+
+@keyframes moodboard-chat-skeleton-sweep {
+    from { background-position: 160% 0; }
+    to   { background-position: -60% 0; }
+}
+
+@keyframes moodboard-chat-skeleton-pulse {
+    0%, 100% { opacity: 0.4; transform: translateY(0) scale(1); }
+    50%      { opacity: 0.85; transform: translateY(-2px) scale(1.05); }
+}
+
 /* Блок ошибки сервера */
 .moodboard-chat__error-block {
     display: none;
@@ -805,6 +978,43 @@
 .moodboard-chat__settings-textarea:focus,
 .moodboard-chat__settings-input:focus { border-color: #6366F1; }
 
+/* Мини-поповер видео-пилюли (Seed / CFG / Негатив) */
+.moodboard-chat__pill-popover {
+    padding: 10px;
+    min-width: 220px;
+}
+.moodboard-chat__pill-popover-body {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.moodboard-chat__pill-popover-body .moodboard-chat__settings-input {
+    width: 100%;
+    box-sizing: border-box;
+}
+.moodboard-chat__settings-hint {
+    font-size: 11px;
+    line-height: 1.4;
+    color: #6B7280;
+}
+
+/* Тумблеры видео (Звук, Водяной знак): однозначное вкл/выкл */
+.moodboard-chat__pill--toggle {
+    border: 1px solid #E5E7EB;
+    padding: 3px 8px;
+}
+.moodboard-chat__pill--toggle[data-active="true"] {
+    background: #4F46E5;
+    border-color: #4F46E5;
+}
+.moodboard-chat__pill--toggle[data-active="true"]:hover:not(:disabled) {
+    background: #4338CA;
+}
+.moodboard-chat__pill--toggle[data-active="true"] .moodboard-chat__pill-label,
+.moodboard-chat__pill--toggle[data-active="true"] .moodboard-chat__pill-icon-wrap {
+    color: #FFFFFF;
+}
+
 .moodboard-chat__settings-popup-row {
     display: flex; align-items: center; gap: 8px; justify-content: flex-end;
 }
@@ -845,6 +1055,31 @@
     background-size: 12px 12px;
 }
 
+/* Меню выбора модели — компактные строки с иконкой единого размера */
+#chat-menu-model {
+    min-width: 0;
+}
+
+#chat-menu-model .moodboard-chat__menu-item--rich {
+    align-items: center;
+    min-width: 268px;
+    padding: 6px 8px;
+    gap: 10px;
+}
+
+#chat-menu-model .moodboard-chat__menu-item-icon {
+    width: 24px;
+    height: 24px;
+    background: transparent;
+    border-radius: 0;
+}
+
+#chat-menu-model .moodboard-chat__menu-item-icon svg {
+    width: 22px;
+    height: 22px;
+    display: block;
+}
+
 /* Меню выбора количества изображений */
 #chat-menu-count {
     width: auto;

package/src/ui/styles/panels.css

@@ -340,3 +340,267 @@
     flex-shrink: 0;
 }
 
+/* Image properties toolbar */
+.image-properties-panel {
+    position: absolute;
+    pointer-events: auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    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;
+    z-index: 1000;
+    user-select: none;
+    white-space: nowrap;
+}
+
+.ipp-filename {
+    padding: 0 6px;
+    font-size: 13px;
+    color: #374151;
+    font-weight: 400;
+    max-width: 140px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: text;
+    border-radius: 4px;
+    outline: none;
+    transition: background 0.15s;
+}
+
+.ipp-filename:hover,
+.ipp-filename:focus {
+    background: #F3F4F6;
+}
+
+.ipp-filename:focus {
+    text-overflow: clip;
+}
+
+.ipp-divider {
+    width: 1px;
+    height: 18px;
+    background: #E5E7EB;
+    margin: 0 4px;
+    flex-shrink: 0;
+}
+
+.ipp-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: 6px;
+    background: none;
+    color: #6B7280;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background 0.15s, color 0.15s;
+}
+
+.ipp-btn:hover {
+    background: #F3F4F6;
+    color: #111827;
+}
+
+.ipp-btn:active,
+.ipp-btn.is-active {
+    background: #E5E7EB;
+    color: #111827;
+}
+
+.ipp-icon-frame-wrap {
+    position: relative;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    overflow: hidden;
+    transition: transform 100ms ease-in-out;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAySURBVHgB3Y2xDQAwDMJIr+D/5+CLtAewVMoUjyDLJakRIJlmHHyyQah+pMM2RgobhAuV0grHtNJqlwAAAABJRU5ErkJggg==);
+}
+
+.ipp-icon-frame {
+    position: relative;
+    display: inline-block;
+    width: inherit;
+    height: inherit;
+    border-radius: 50%;
+    box-shadow: rgba(0, 0, 0, 0.25) 0 0 0 1px inset;
+}
+
+.ipp-icon-frame::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 50%;
+    height: 50%;
+    background-color: rgb(250, 250, 250);
+    box-shadow: rgba(0, 0, 0, 0.25) 0 0 0 1px;
+    border-radius: 50%;
+    pointer-events: none;
+}
+
+/* Split Button (Crop) */
+.ipp-btn-split-wrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    border-radius: 6px;
+    background: transparent;
+    transition: background 0.15s;
+    flex-shrink: 0;
+}
+
+.ipp-btn-split-wrapper:hover {
+    background: #F3F4F6;
+}
+
+.ipp-btn-split-main {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: 6px 0 0 6px;
+    background: transparent;
+    color: #6B7280;
+    cursor: pointer;
+    transition: color 0.15s;
+}
+
+.ipp-btn-split-expand {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: 0 6px 6px 0;
+    background: transparent;
+    color: #6B7280;
+    cursor: pointer;
+    transition: color 0.15s;
+}
+
+.ipp-btn-split-main:hover,
+.ipp-btn-split-expand:hover {
+    color: #111827;
+}
+
+.ipp-btn-split-wrapper:active {
+    background: #E5E7EB;
+}
+
+.ipp-btn-split-expand svg {
+    transition: transform 0.2s ease;
+}
+
+.ipp-btn-split-expand.is-expanded svg {
+    transform: rotate(180deg);
+}
+
+/* Crop Dropdown */
+.ipp-crop-dropdown {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 50%;
+    transform: translateX(-50%);
+    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: 170px;
+    z-index: 1001;
+}
+
+.ipp-crop-dropdown.is-open {
+    display: flex;
+}
+
+/* More Dropdown */
+.ipp-more-dropdown {
+    position: absolute;
+    top: calc(100% + 6px);
+    right: 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: 220px;
+    z-index: 1001;
+}
+
+.ipp-more-dropdown.is-open {
+    display: flex;
+}
+
+.ipp-dropdown-item {
+    display: flex;
+    align-items: center;
+    padding: 6px 8px;
+    border: none;
+    background: transparent;
+    border-radius: 6px;
+    cursor: pointer;
+    color: #374151;
+    gap: 10px;
+    font-size: 13px;
+    font-family: inherit;
+    text-align: left;
+    transition: background 0.15s;
+    width: 100%;
+}
+
+.ipp-dropdown-item:hover {
+    background: #F3F4F6;
+}
+
+.ipp-dropdown-item-ratio {
+    margin-left: auto;
+    color: #9CA3AF;
+    font-size: 12px;
+}
+
+.ipp-dropdown-item-shortcut {
+    margin-left: auto;
+    color: #9CA3AF;
+    font-size: 12px;
+}
+
+.ipp-dropdown-divider {
+    height: 1px;
+    background: #E5E7EB;
+    margin: 4px 2px;
+}
+
+.ipp-dropdown-icon {
+    width: 16px;
+    height: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: #6B7280;
+}
+