opus-react 0.3.1 → 0.3.2

package/dist/index.css

@@ -9468,7 +9468,7 @@
 /* components/ResizeHandle/ResizeHandle.module.css */
 .opus_PaKREB_handle {
   z-index: 1;
-  background: color-mix(in srgb, var(--opus-border) 62%, transparent);
+  background: color-mix(in srgb, var(--opus-accent) 8%, transparent);
   touch-action: none;
   border: 0;
   flex: 0 0 8px;
@@ -9493,7 +9493,7 @@
 }
 
 .opus_PaKREB_handle[data-background="accent"] {
-  background: color-mix(in srgb, var(--opus-accent) 14%, transparent);
+  background: color-mix(in srgb, var(--opus-accent) 8%, transparent);
 }
 
 .opus_PaKREB_handle[data-background="contrast"] {
@@ -9501,7 +9501,7 @@
 }
 
 .opus_PaKREB_handle:hover, .opus_PaKREB_handle:focus-visible {
-  background: color-mix(in srgb, var(--opus-border) 72%, transparent);
+  background: color-mix(in srgb, var(--opus-accent) 22%, transparent);
 }
 
 .opus_PaKREB_handle[data-background="none"]:hover, .opus_PaKREB_handle[data-background="none"]:focus-visible {
@@ -9510,7 +9510,7 @@
 
 .opus_PaKREB_handle:after {
   content: "";
-  background: color-mix(in srgb, var(--opus-muted) 45%, transparent);
+  background: color-mix(in srgb, var(--opus-accent) 32%, transparent);
   border-radius: 999px;
   transition: background .16s, inset .16s;
   position: absolute;
@@ -9565,8 +9565,10 @@
 
 .opus_PaKREB_grip {
   z-index: 1;
-  border: 1px solid color-mix(in srgb, var(--opus-muted) 52%, var(--opus-panel));
-  background-color: color-mix(in srgb, var(--opus-muted) 42%, var(--opus-panel));
+  border: 1px solid color-mix(in srgb, var(--opus-accent) 52%, #070912);
+  background-color: color-mix(in srgb, var(--opus-accent) 52%, #070912);
+  box-shadow: 0 1px 3px #00000047,
+    0 0 4px color-mix(in srgb, var(--opus-accent) 7%, transparent);
   pointer-events: none;
   border-radius: 999px;
   justify-content: center;
@@ -9578,7 +9580,6 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  box-shadow: 0 1px 3px #00000047, inset 0 1px #ffffff1f;
 }
 
 .opus_PaKREB_handle[data-orientation="vertical"] .opus_PaKREB_grip {
@@ -9594,7 +9595,7 @@
 }
 
 .opus_PaKREB_dot {
-  background: light-dark(#fff, #070912);
+  background: #070912;
   border-radius: 50%;
   flex: 0 0 4px;
   width: 4px;
@@ -9602,8 +9603,8 @@
 }
 
 .opus_PaKREB_handle:hover .opus_PaKREB_grip, .opus_PaKREB_handle:focus-visible .opus_PaKREB_grip {
-  border-color: color-mix(in srgb, var(--opus-accent) 68%, var(--opus-border));
-  background-color: color-mix(in srgb, var(--opus-accent) 68%, var(--opus-panel));
+  border-color: var(--opus-accent);
+  background-color: var(--opus-accent);
   box-shadow: 0 1px 4px #00000052,
     0 0 5px color-mix(in srgb, var(--opus-accent) 14%, transparent);
 }
@@ -10772,7 +10773,7 @@
   word-break: normal;
   flex: auto;
   justify-content: center;
-  align-items: flex-start;
+  align-items: center;
   margin: 0;
   padding: 0 2px;
   font-size: .8rem;
@@ -10782,10 +10783,19 @@
 }
 
 /* components/Tiles/Tiles.module.css */
+.opus_zD82gC_viewport {
+  width: 100%;
+  min-width: 0;
+  position: relative;
+}
+
 .opus_zD82gC_row {
-  --tile-size: 96px;
+  --tile-width: 106px;
+  --tile-height: 101px;
   grid-auto-flow: column;
-  grid-auto-columns: var(--tile-size);
+  grid-auto-columns: var(--tile-width);
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
   background: none;
   border: 0;
   justify-content: start;
@@ -10799,28 +10809,81 @@
   overflow-x: auto;
 }
 
+.opus_zD82gC_moreButton {
+  z-index: 2;
+  width: 24px;
+  height: 76px;
+  color: color-mix(in srgb, var(--accent-color, #9b72ff) 72%, white);
+  cursor: pointer;
+  background: color-mix(in srgb, var(--surface-raised, #11182a) 84%, var(--accent-color, #9b72ff) 16%);
+  border: 1px solid color-mix(in srgb, var(--accent-color, #9b72ff) 42%, transparent);
+  backdrop-filter: blur(8px);
+  place-items: center;
+  padding: 0;
+  font-size: 14px;
+  transition: color .16s, background-color .16s, border-color .16s, box-shadow .16s;
+  display: grid;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.opus_zD82gC_moreButton svg {
+  width: 9px;
+  height: 14px;
+  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent-color, #9b72ff) 72%, transparent));
+  transition: filter .16s;
+}
+
+.opus_zD82gC_previousButton {
+  box-shadow: 10px 0 24px color-mix(in srgb, var(--surface-base, #080b18) 80%, transparent);
+  border-left: 0;
+  border-radius: 0 18px 18px 0;
+  left: 0;
+}
+
+.opus_zD82gC_nextButton {
+  box-shadow: -10px 0 24px color-mix(in srgb, var(--surface-base, #080b18) 80%, transparent);
+  border-right: 0;
+  border-radius: 18px 0 0 18px;
+  right: 0;
+}
+
+.opus_zD82gC_moreButton:hover, .opus_zD82gC_moreButton:focus-visible {
+  color: var(--surface-base, #080b18);
+  background: var(--accent-color, #9b72ff);
+  outline: none;
+}
+
+.opus_zD82gC_moreButton:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color, #9b72ff) 35%, transparent);
+}
+
 .opus_zD82gC_row[data-layout="fill"] {
   grid-auto-columns: unset;
   justify-content: stretch;
 }
 
 .opus_zD82gC_tile {
-  width: var(--tile-size);
-  height: var(--tile-size);
+  width: var(--tile-width);
+  height: var(--tile-height);
 }
 
 .opus_zD82gC_tileItem {
+  scroll-snap-align: start;
+  scroll-snap-stop: normal;
   min-width: 0;
 }
 
 .opus_zD82gC_row[data-layout="fill"] .opus_zD82gC_tile {
   width: 100%;
-  height: var(--tile-size);
+  height: var(--tile-height);
 }
 
 @media (width <= 900px) {
   .opus_zD82gC_row {
-    --tile-size: 92px;
+    --tile-width: 102px;
+    --tile-height: 97px;
   }
 }
 
@@ -10959,6 +11022,18 @@
   color: #ef4444;
 }
 
+.opus_8DpwUV_trend[data-trend-tone="positive"] {
+  color: #22c55e;
+}
+
+.opus_8DpwUV_trend[data-trend-tone="negative"] {
+  color: #ef4444;
+}
+
+.opus_8DpwUV_trend[data-trend-tone="warning"] {
+  color: #f59e0b;
+}
+
 .opus_8DpwUV_comparison {
   color: var(--tile-muted);
   margin: 0;
@@ -11008,24 +11083,86 @@
 }
 
 /* components/StatTiles/StatTiles.module.css */
+.opus_uhJd8v_viewport {
+  width: calc(100% + var(--stat-tiles-edge-offset, 0px) + var(--stat-tiles-edge-offset, 0px));
+  min-width: 0;
+  margin-inline-start: calc(0px - var(--stat-tiles-edge-offset, 0px));
+  position: relative;
+}
+
 .opus_uhJd8v_row {
   --stat-tile-size: 12.75rem;
+  --stat-tile-min: 9rem;
   --stat-tile-height: 6.75rem;
   grid-auto-flow: column;
   grid-auto-columns: var(--stat-tile-size);
+  scroll-behavior: smooth;
+  width: 100%;
+  min-width: 0;
+  scroll-padding-inline: var(--stat-tiles-edge-offset, 0px);
+  scroll-snap-type: x mandatory;
+  padding: 0 var(--stat-tiles-edge-offset, 0px);
+  box-sizing: border-box;
   background: none;
   border: 0;
   justify-content: start;
   align-items: start;
   gap: 12px;
-  width: 100%;
-  min-width: 0;
-  padding: 0;
   display: grid;
   position: relative;
   overflow-x: auto;
 }
 
+.opus_uhJd8v_moreButton {
+  z-index: 2;
+  width: 24px;
+  height: 76px;
+  color: color-mix(in srgb, var(--accent-color, #9b72ff) 72%, white);
+  cursor: pointer;
+  background: color-mix(in srgb, var(--surface-raised, #11182a) 84%, var(--accent-color, #9b72ff) 16%);
+  border: 1px solid color-mix(in srgb, var(--accent-color, #9b72ff) 42%, transparent);
+  backdrop-filter: blur(8px);
+  place-items: center;
+  padding: 0;
+  font-size: 14px;
+  transition: color .16s, background-color .16s, border-color .16s, box-shadow .16s;
+  display: grid;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.opus_uhJd8v_moreButton svg {
+  width: 9px;
+  height: 14px;
+  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent-color, #9b72ff) 72%, transparent));
+  transition: filter .16s;
+}
+
+.opus_uhJd8v_moreButton:hover, .opus_uhJd8v_moreButton:focus-visible {
+  color: var(--surface-base, #080b18);
+  background: var(--accent-color, #9b72ff);
+  outline: none;
+}
+
+.opus_uhJd8v_moreButton:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color, #9b72ff) 35%, transparent);
+}
+
+.opus_uhJd8v_previousButton {
+  box-shadow: 10px 0 24px color-mix(in srgb, var(--surface-base, #080b18) 80%, transparent);
+  border-left: 0;
+  border-radius: 0 18px 18px 0;
+  left: 0;
+}
+
+.opus_uhJd8v_nextButton {
+  box-shadow: -10px 0 24px color-mix(in srgb, var(--surface-base, #080b18) 80%, transparent);
+  border-right: 0;
+  border-radius: 18px 0 0 18px;
+  right: 0;
+}
+
 .opus_uhJd8v_row[data-layout="fill"] {
   grid-auto-columns: unset;
   justify-content: stretch;
@@ -11036,6 +11173,8 @@
 }
 
 .opus_uhJd8v_statTileItem {
+  scroll-snap-align: start;
+  scroll-snap-stop: normal;
   min-width: 0;
 }
 
@@ -12450,6 +12589,44 @@
   grid-area: opus_ThZ-Bi_composer;
 }
 
+.opus_ThZ-Bi_root[data-active-tab="notes"] .opus_ThZ-Bi_composer, .opus_ThZ-Bi_root[data-active-tab="notes"] .opus_ThZ-Bi_feed, .opus_ThZ-Bi_root[data-active-tab="notes"] .opus_ThZ-Bi_footer {
+  animation: .18s ease-out both opus_ThZ-Bi_notesActivityEnterFromLeft;
+}
+
+.opus_ThZ-Bi_root[data-active-tab="activity"] .opus_ThZ-Bi_feed, .opus_ThZ-Bi_root[data-active-tab="activity"] .opus_ThZ-Bi_footer {
+  animation: .18s ease-out both opus_ThZ-Bi_notesActivityEnterFromRight;
+}
+
+@keyframes opus_ThZ-Bi_notesActivityEnterFromLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes opus_ThZ-Bi_notesActivityEnterFromRight {
+  from {
+    opacity: 0;
+    transform: translateX(6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .opus_ThZ-Bi_root[data-active-tab] .opus_ThZ-Bi_composer, .opus_ThZ-Bi_root[data-active-tab] .opus_ThZ-Bi_feed, .opus_ThZ-Bi_root[data-active-tab] .opus_ThZ-Bi_footer {
+    animation: none;
+  }
+}
+
 .opus_ThZ-Bi_threadItems {
   --thread-child-avatar-size: var(--notes-activity-avatar-size);
   --thread-indent: .325rem;
@@ -16338,6 +16515,54 @@ button.opus_H9TUGj_root:hover, button.opus_H9TUGj_root:focus-visible {
   }
 }
 
+/* components/WelcomeMessage/WelcomeMessage.module.css */
+.opus_cZqjKS_root {
+  min-width: 0;
+}
+
+.opus_cZqjKS_heading {
+  color: var(--dashboard-section-text, var(--opus-text));
+  letter-spacing: -.025em;
+  margin: 0;
+  font-size: clamp(1.5rem, 2.4vw, 2rem);
+  font-weight: 650;
+  line-height: 1.15;
+}
+
+.opus_cZqjKS_wave {
+  transform-origin: 70% 70%;
+  margin-left: .45em;
+  font-size: .88em;
+  display: inline-block;
+}
+
+.opus_cZqjKS_subtitle {
+  color: var(--dashboard-section-muted, var(--opus-muted));
+  margin: 8px 0 0;
+  font-size: .95rem;
+  line-height: 1.5;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .opus_cZqjKS_root:hover .opus_cZqjKS_wave {
+    animation: .65s ease-in-out opus_cZqjKS_welcome-wave;
+  }
+}
+
+@keyframes opus_cZqjKS_welcome-wave {
+  0%, 100% {
+    transform: rotate(0);
+  }
+
+  30% {
+    transform: rotate(15deg);
+  }
+
+  65% {
+    transform: rotate(-8deg);
+  }
+}
+
 /* components/FontPicker/FontPicker.module.css */
 .opus_ub1fhz_field {
   align-items: center;