@sequent-org/moodboard 1.4.55 → 1.4.57

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,27 @@
     height: 36px;
 }
 
+.text-properties-panel.is-locked {
+    min-width: 0;
+    padding: 0 6px;
+    gap: 4px;
+}
+
+.text-properties-panel * {
+    max-height: 36px;
+}
+
+.text-properties-panel [id^="tpp-color-dropdown"],
+.text-properties-panel [id^="tpp-color-dropdown"] *,
+.text-properties-panel [id^="tpp-bgcolor-dropdown"],
+.text-properties-panel [id^="tpp-bgcolor-dropdown"] *,
+.text-properties-panel [id^="tpp-highlight-dropdown"],
+.text-properties-panel [id^="tpp-highlight-dropdown"] *,
+.text-properties-panel .tpp-more-dropdown,
+.text-properties-panel .tpp-more-dropdown * {
+    max-height: none;
+}
+
 /* Frame properties toolbar — mirror image toolbar look */
 .frame-properties-panel {
     position: absolute;
@@ -604,24 +625,156 @@
 
 .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;
-    padding: 4px 8px;
+.text-properties-panel .font-select-wrapper {
+    position: relative;
+    display: inline-block;
+}
+
+.text-properties-panel .font-select {
+    box-sizing: border-box;
+    min-width: 70px;
+    width: 70px;
+    height: 38px;
+    padding: 4px 0px;
     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-select { min-width: 110px; }
-.text-properties-panel .font-size-select { min-width: 56px; }
+.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-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: #6B7280;
+}
+
+.text-properties-panel .font-size-stepper:hover {
+    background: #f5f5f5;
+    color: #111827;
+}
+
+.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 {
-    width: 28px;
-    height: 28px;
-    border: 1px solid #ddd;
+    width: 20px;
+    height: 20px;
+    border: none;
     border-radius: 50%;
     background-color: #000;
     cursor: pointer;
@@ -632,6 +785,54 @@
     position: relative;
 }
 
+.text-properties-panel .current-color-button {
+    width: 28px;
+    height: 28px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    background-color: transparent;
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    position: relative;
+    transition: background 0.15s;
+    color: #6B7280;
+}
+
+.text-properties-panel .current-color-button:hover {
+    background: #f0f0f0;
+    color: #111827;
+}
+
+.text-properties-panel .current-highlight-button {
+    width: 28px;
+    height: 28px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    background-color: transparent;
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    position: relative;
+    transition: background 0.15s;
+    color: #6B7280;
+}
+
+.text-properties-panel .current-highlight-button:hover {
+    background: #f0f0f0;
+    color: #111827;
+}
+
 .text-properties-panel .tpp-format-btn {
     height: 28px;
     min-width: 28px;
@@ -643,30 +844,187 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: #444;
+    color: #6B7280;
     flex-shrink: 0;
-    transition: background 0.15s;
+    transition: background 0.15s, color 0.15s;
 }
-.text-properties-panel .tpp-format-btn:hover { background: #f0f0f0; }
+.text-properties-panel .tpp-format-btn:hover { background: #f0f0f0; color: #111827; }
 .text-properties-panel .tpp-format-btn.is-active {
     background: #e8eaff;
     border-color: #6155F5;
     color: #6155F5;
 }
 
-.text-properties-panel .tpp-align-select,
-.text-properties-panel .tpp-list-select {
-    border: 1px solid #ddd;
+.text-properties-panel .tpp-format-btns-wrapper {
+    width: 24px;
+    height: 24px;
+}
+
+.text-properties-panel .tpp-format-btn.tpp-format-trigger {
+    width: 24px;
+    min-width: 24px;
+    height: 24px;
+    padding: 0;
+}
+
+.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-format-modal {
+    max-height: none;
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    flex-direction: row;
+    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-format-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-format-modal-option:hover {
+    background: #f3f4f6;
+}
+
+.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;
+    color: #374151;
+    transition: background 0.1s;
+    flex-shrink: 0;
+}
+
+.text-properties-panel .tpp-align-modal-option:hover {
+    background: #f3f4f6;
+}
+
+.text-properties-panel .tpp-lh-control {
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+.text-properties-panel .tpp-lh-control svg {
+    width: 22px;
+    height: 22px;
+}
+
+.text-properties-panel .tpp-lh-modal {
+    max-height: none;
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 50%;
+    transform: translateX(-50%);
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    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: 8px 12px;
+    z-index: 4000;
 }
-.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;
@@ -872,7 +1230,7 @@
 }
 
 /* More Dropdown */
-.ipp-more-dropdown {
+.ipp-more-dropdown, .tpp-more-dropdown {
     position: absolute;
     top: calc(100% + 6px);
     right: 0;
@@ -887,11 +1245,15 @@
     z-index: 1001;
 }
 
-.ipp-more-dropdown.is-open {
+.ipp-more-dropdown.is-open, .tpp-more-dropdown.is-open {
     display: flex;
+    position: fixed;
+    min-width: 0;
+    max-width: 214px;
+    width: 214px;
 }
 
-.ipp-dropdown-item {
+.ipp-dropdown-item, .tpp-dropdown-item {
     display: flex;
     align-items: center;
     padding: 6px 8px;
@@ -908,7 +1270,7 @@
     width: 100%;
 }
 
-.ipp-dropdown-item:hover {
+.ipp-dropdown-item:hover, .tpp-dropdown-item:hover {
     background: #F3F4F6;
 }
 
@@ -918,19 +1280,19 @@
     font-size: 12px;
 }
 
-.ipp-dropdown-item-shortcut {
+.ipp-dropdown-item-shortcut, .tpp-dropdown-item-shortcut {
     margin-left: auto;
     color: #9CA3AF;
     font-size: 12px;
 }
 
-.ipp-dropdown-divider {
+.ipp-dropdown-divider, .tpp-dropdown-divider {
     height: 1px;
     background: #E5E7EB;
     margin: 4px 2px;
 }
 
-.ipp-dropdown-icon {
+.ipp-dropdown-icon, .tpp-dropdown-icon {
     width: 16px;
     height: 16px;
     display: inline-flex;
@@ -1366,3 +1728,81 @@
     opacity: 1;
 }
 
+/* ── Кнопка «Ссылка» в панели свойств текста ────────────────── */
+.tpp-link-btn:disabled,
+.tpp-link-btn--disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+/* ── Форма ввода URL ─────────────────────────────────────────── */
+.tpp-link-form {
+    position: fixed;
+    z-index: 10010;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    background: #ffffff;
+    border: 1px solid #E5E7EB;
+    border-radius: 10px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.07);
+    padding: 10px 12px;
+    min-width: 260px;
+    max-width: 340px;
+}
+
+.tpp-link-form-label {
+    font-size: 11px;
+    color: #6B7280;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+}
+
+.tpp-link-form-row {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+}
+
+.tpp-link-input {
+    flex: 1;
+    height: 30px;
+    padding: 0 8px;
+    border: 1px solid #D1D5DB;
+    border-radius: 6px;
+    font-size: 13px;
+    font-family: inherit;
+    outline: none;
+    color: #111827;
+    transition: border-color 0.15s;
+}
+
+.tpp-link-input:focus {
+    border-color: #6366F1;
+}
+
+.tpp-link-input--error {
+    border-color: #EF4444;
+}
+
+.tpp-link-form-ok {
+    height: 30px;
+    padding: 0 12px;
+    background: #6366F1;
+    color: #ffffff;
+    border: none;
+    border-radius: 6px;
+    font-size: 13px;
+    font-family: inherit;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background 0.15s;
+}
+
+.tpp-link-form-ok:hover {
+    background: #4F46E5;
+}
+

package/src/ui/styles/workspace.css

@@ -288,7 +288,7 @@
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
     font-size: 13px;
     font-family: 'Roboto', Arial, sans-serif;
-    min-width: 320px;
+    min-width: auto;
     height: 36px;
 }
 
@@ -321,6 +321,21 @@
     letter-spacing: normal;
 }
 
+/* Веб-ссылка внутри текстового объекта. pointer-events: auto переопределяет
+   pointer-events: none у родительского .mb-text и .moodboard-html-layer,
+   чтобы по ссылке можно было реально перейти. */
+.mb-text-link {
+    color: #2563EB;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    pointer-events: auto;
+    cursor: pointer;
+}
+
+.mb-text-link:hover {
+    color: #1D4ED8;
+}
+
 /* Markdown-режим текстового объекта: блочный рендер, перенос по словам */
 .mb-text--md {
     white-space: normal;
@@ -684,13 +699,10 @@
 }
 
 .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 {
-    width: 28px;
-    height: 20px;
-    border: 1px solid #ddd;
     border-radius: 4px;
     background-color: #000;
     cursor: pointer;
@@ -700,6 +712,18 @@
     box-sizing: border-box;
     position: relative;
 }
+
+.text-properties-panel .current-color-button {
+    width: 20px;
+    height: 20px;
+    border: 1px solid #ddd;
+}
+
+.text-properties-panel .current-bgcolor-button {
+    width: 20px;
+    height: 20px;
+    border: none;
+}
 /* MoodBoard Workspace Styles */
 
 /* Основные контейнеры */
@@ -1548,8 +1572,8 @@
     transition: all 0.2s ease;
     outline: none;
     outline-offset: 0;
-    padding-top: 5px;
-    padding-bottom: 5px;
+    padding-top: 1px;
+    padding-bottom: 1px;
 }
 
 .moodboard-text-input:focus {