@sequent-org/moodboard 1.4.32 → 1.4.33

package/src/ui/styles/index.css

@@ -2,5 +2,6 @@
 @import './toolbar.css';
 @import './topbar.css';
 @import './panels.css';
+@import './shape-properties-panel.css';
 @import './chat.css';
 

package/src/ui/styles/panels.css

@@ -7,7 +7,7 @@
     display: inline-flex;
     align-items: center;
     gap: 6px;
-    padding: 8px 10px;
+    padding: 8px;
     background: #fff;
     border: 1px solid #e0e0e0;
     border-radius: 9999px;
@@ -76,6 +76,73 @@
 }
 .moodboard-zoombar__menu-item:hover { background: #f5f5f5; }
 
+.moodboard-commentsbar {
+    position: absolute;
+    bottom: 16px;
+    right: 260px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px;
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 9999px;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+    z-index: 3000;
+    pointer-events: auto;
+    font-family: 'Roboto', Arial, sans-serif;
+}
+
+.moodboard-commentsbar__filter {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 30px;
+    padding: 0 12px;
+    border: none;
+    border-radius: 9999px;
+    background: none;
+    font-family: inherit;
+    font-size: 13px;
+    color: #444;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all 0.2s ease;
+}
+.moodboard-commentsbar__filter:hover { background: #e6e6e6; }
+.moodboard-commentsbar__filter[aria-pressed="true"] {
+    background: #EEF2FF;
+    color: #4338CA;
+}
+
+.moodboard-commentsbar__divider {
+    width: 1px;
+    height: 20px;
+    background: #e0e0e0;
+}
+
+.moodboard-commentsbar__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border: none;
+    border-radius: 50%;
+    background: none;
+    padding: 0;
+    color: #444;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+.moodboard-commentsbar__button:hover { background: #e6e6e6; }
+
+.moodboard-commentsbar__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
 .moodboard-mapbar {
     position: absolute;
     right: 16px;
@@ -83,7 +150,7 @@
     display: inline-flex;
     align-items: center;
     gap: 6px;
-    padding: 8px 10px;
+    padding: 8px;
     background: #fff;
     border: 1px solid #e0e0e0;
     border-radius: 9999px;
@@ -230,3 +297,46 @@
     position: relative;
 }
 
+.text-properties-panel .tpp-format-btn {
+    height: 28px;
+    min-width: 28px;
+    padding: 0 4px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    background: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: #444;
+    flex-shrink: 0;
+    transition: background 0.15s;
+}
+.text-properties-panel .tpp-format-btn:hover { background: #f0f0f0; }
+.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;
+    border-radius: 4px;
+    padding: 4px 6px;
+    font-size: 12px;
+    background-color: #fff;
+    height: 28px;
+    cursor: pointer;
+    font-family: 'Roboto', Arial, sans-serif;
+}
+.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;
+    accent-color: #6155F5;
+    cursor: pointer;
+    flex-shrink: 0;
+}
+

package/src/ui/styles/shape-properties-panel.css

@@ -0,0 +1,250 @@
+/* Shape Properties Panel */
+
+.shape-properties-panel {
+    position: absolute;
+    pointer-events: auto;
+    display: none;
+    flex-direction: column;
+    align-items: stretch;
+    background-color: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 12px;
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
+    font-size: 12px;
+    font-family: 'Roboto', Arial, sans-serif;
+    z-index: 10000;
+    white-space: nowrap;
+    user-select: none;
+    min-width: 0;
+}
+
+.spp-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 2px;
+    padding: 6px 14px;
+    height: 40px;
+    box-sizing: border-box;
+}
+
+.spp-row + .spp-row {
+    border-top: 1px solid #f0f0f0;
+}
+
+.spp-sep {
+    width: 1px;
+    height: 18px;
+    background: #e0e0e0;
+    margin: 0 6px;
+    flex-shrink: 0;
+}
+
+/* Icon buttons */
+.spp-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    background: none;
+    cursor: pointer;
+    padding: 0;
+    color: #444;
+    flex-shrink: 0;
+    transition: background 0.12s;
+}
+.spp-btn:hover { background: #f0f0f0; }
+.spp-btn.spp-btn--active {
+    background: #EFF6FF;
+    border-color: #2563EB;
+    color: #2563EB;
+}
+
+/* Popover trigger buttons (wider, show label) */
+.spp-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    height: 28px;
+    padding: 0 8px;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    background: #fff;
+    cursor: pointer;
+    font-size: 12px;
+    font-family: 'Roboto', Arial, sans-serif;
+    color: #333;
+    flex-shrink: 0;
+    transition: background 0.12s;
+}
+.spp-trigger:hover { background: #f5f5f5; }
+.spp-trigger svg { flex-shrink: 0; }
+
+/* Label */
+.spp-label {
+    font-size: 11px;
+    color: #888;
+    margin-right: 4px;
+    flex-shrink: 0;
+}
+
+/* Color swatch button */
+.spp-color-btn {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    padding: 0;
+    flex-shrink: 0;
+    display: block;
+    box-sizing: border-box;
+    position: relative;
+}
+
+/* Select */
+.spp-select {
+    height: 26px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 0 6px;
+    font-size: 12px;
+    font-family: 'Roboto', Arial, sans-serif;
+    background: #fff;
+    cursor: pointer;
+    color: #333;
+    flex-shrink: 0;
+}
+.spp-select--font { min-width: 110px; }
+.spp-select--size { min-width: 54px; }
+
+/* Radius row: compact */
+.spp-radius-group {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+.spp-radius-slider {
+    width: 64px;
+    height: 4px;
+    cursor: pointer;
+    accent-color: #2563EB;
+}
+
+/* ── Popovers ─────────────────────────────────────────────────────────────── */
+
+.spp-popover {
+    position: absolute;
+    z-index: 10001;
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 10px;
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
+    padding: 10px;
+    display: none;
+}
+
+/* Shape kind grid */
+.spp-kind-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 40px);
+    gap: 6px;
+}
+.spp-kind-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border: 1px solid #e0e0e0;
+    border-radius: 7px;
+    background: #fafafa;
+    cursor: pointer;
+    padding: 0;
+    gap: 2px;
+    font-size: 9px;
+    color: #666;
+    transition: background 0.12s, border-color 0.12s;
+}
+.spp-kind-btn:hover { background: #f0f0f0; border-color: #ccc; }
+.spp-kind-btn.spp-kind-btn--active {
+    background: #EFF6FF;
+    border-color: #2563EB;
+    color: #2563EB;
+}
+.spp-kind-btn svg { display: block; }
+
+/* Color palette */
+.spp-color-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 26px);
+    gap: 5px;
+    margin-bottom: 6px;
+}
+.spp-color-swatch {
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    border: 1px solid #ddd;
+    cursor: pointer;
+    padding: 0;
+    box-sizing: border-box;
+    position: relative;
+    display: block;
+    transition: transform 0.1s;
+}
+.spp-color-swatch:hover { transform: scale(1.1); }
+.spp-color-swatch--white { border-color: #ccc; }
+.spp-color-swatch .spp-tick {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 8px;
+    height: 5px;
+    transform: translate(-50%, -50%) rotate(315deg) scaleX(-1);
+    border-right: 2px solid #111;
+    border-bottom: 2px solid #111;
+    display: none;
+    pointer-events: none;
+}
+.spp-color-swatch--active .spp-tick { display: block; }
+
+/* Border popover layout */
+.spp-border-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-width: 200px;
+}
+.spp-border-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.spp-border-label {
+    font-size: 11px;
+    color: #888;
+    min-width: 68px;
+    flex-shrink: 0;
+}
+.spp-style-btns {
+    display: flex;
+    gap: 4px;
+}
+.spp-slider-full {
+    flex: 1;
+    height: 4px;
+    cursor: pointer;
+    accent-color: #2563EB;
+    min-width: 80px;
+}
+.spp-slider-value {
+    font-size: 11px;
+    color: #555;
+    min-width: 28px;
+    text-align: right;
+}

package/src/ui/styles/toolbar.css

@@ -46,8 +46,6 @@
 .moodboard-toolbar__button--active { background: #80D8FF !important; color: inherit !important; border-radius: 50%; }
 .moodboard-toolbar__button--disabled { opacity: 0.4; cursor: not-allowed; }
 .moodboard-toolbar__button svg { width: 20px; height: 20px; transition: transform 0.2s ease; color: #212121; }
-.moodboard-toolbar__button--text-add svg { height: 16px; width: auto; }
-.moodboard-toolbar__button--text-add:hover svg { transform: none; }
 .moodboard-toolbar__button:hover svg { transform: none; }
 .moodboard-toolbar__button--image2 svg { color: #7c3aed; }
 
@@ -63,6 +61,7 @@
 .moodboard-toolbar__button--comments:hover,
 .moodboard-toolbar__button--attachments:hover,
 .moodboard-toolbar__button--emoji:hover,
+.moodboard-toolbar__button--reactions:hover,
 .moodboard-toolbar__button--frame:hover,
 .moodboard-toolbar__button--mindmap:hover,
 .moodboard-toolbar__button--clear:hover,
@@ -74,6 +73,12 @@
 .moodboard-toolbar__popup--shapes { width: auto; }
 .moodboard-toolbar__popup--draw { width: auto; padding: 10px; }
 .moodboard-toolbar__popup--emoji { width: 360px; max-height: 420px; overflow: auto; padding: 8px 10px; }
+.moodboard-toolbar__popup--reactions { width: 232px; padding: 10px; }
+.moodboard-reactions__grid { display: grid; grid-template-columns: repeat(4, 48px); gap: 6px; }
+.moodboard-reactions__btn { width: 48px; height: 48px; border: none; background: #f5f5f5; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 4px; transition: background 0.15s; }
+.moodboard-reactions__btn:hover { background: #e0f4ff; }
+.moodboard-reactions__img { width: 36px; height: 36px; object-fit: contain; }
+.moodboard-reactions__empty { font-size: 12px; color: #999; padding: 8px; text-align: center; }
 
 /* Divider inside toolbar */
 .moodboard-toolbar__divider { width: 100%; height: 1px; background: #e0e0e0; margin: 6px 0; }

package/src/ui/styles/topbar.css

@@ -7,7 +7,7 @@
     display: inline-flex;
     align-items: center;
     gap: 6px;
-    padding: 8px 10px; /* горизонтальные отступы по 30px */
+    padding: 8px;
     background: #fff;
     border: 1px solid #e0e0e0;
     border-radius: 9999px; /* полностью круглые края */