opus-react 0.3.0 → 0.3.1

package/dist/index.css

@@ -2179,7 +2179,7 @@
   color: var(--opus-text);
   font-size: var(--opus-control-font-size);
   cursor: text;
-  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-columns: auto minmax(0, 1fr) auto;
   transition: border-color .16s, box-shadow .16s;
   display: grid;
   box-shadow: inset 0 1px #ffffff0d, 0 14px 30px #0000000f;
@@ -2195,6 +2195,15 @@
   border-color: color-mix(in srgb, var(--opus-error) 75%, transparent);
 }
 
+.opus_1Q5xBh_endAdornment {
+  min-width: 0;
+  color: var(--opus-muted);
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+  display: inline-flex;
+}
+
 .opus_1Q5xBh_prefixIcon {
   width: var(--opus-control-prefix-size, 14px);
   height: var(--opus-control-prefix-size, 14px);
@@ -2426,6 +2435,9 @@
   min-height: var(--opus-control-height);
   border: 1px solid var(--opus-border-strong);
   background: color-mix(in srgb, var(--opus-input-bg) 88%, transparent);
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
   border-radius: 999px;
   padding: 2px;
   transition: background .22s, border-color .22s, box-shadow .22s;
@@ -2434,6 +2446,11 @@
   box-shadow: inset 0 1px #ffffff0d, 0 8px 20px #0000000f;
 }
 
+.opus_SwerMA_toggle:focus-visible {
+  outline: 2px solid var(--opus-accent);
+  outline-offset: 2px;
+}
+
 .opus_SwerMA_indicator {
   z-index: 0;
   width: var(--theme-option-size);
@@ -2459,7 +2476,6 @@
   width: var(--theme-option-size);
   height: calc(var(--opus-control-height) - 4px);
   color: var(--opus-muted);
-  cursor: pointer;
   background: none;
   border: 0;
   border-radius: 999px;
@@ -9567,14 +9583,14 @@
 
 .opus_PaKREB_handle[data-orientation="vertical"] .opus_PaKREB_grip {
   flex-direction: column;
-  width: 12px;
-  height: 30px;
+  width: 10px;
+  height: 26px;
 }
 
 .opus_PaKREB_handle[data-orientation="horizontal"] .opus_PaKREB_grip {
   flex-direction: row;
-  width: 30px;
-  height: 12px;
+  width: 26px;
+  height: 10px;
 }
 
 .opus_PaKREB_dot {
@@ -15940,6 +15956,388 @@ button.opus_H9TUGj_root:hover, button.opus_H9TUGj_root:focus-visible {
   font-size: .68rem;
 }
 
+/* components/ApplicationHeader/ApplicationHeader.module.css */
+.opus_TjZbi8_root {
+  --application-header-bg: var(--dashboard-section-bg, #070d18);
+  --application-header-border: var(--dashboard-section-border, #60a5fa33);
+  border: 1px solid var(--application-header-border);
+  background: radial-gradient(110% 180% at 0 0, #6d28d97a, #0000 58%), radial-gradient(90% 140% at 22% 20%, #312e8142, #0000 62%), linear-gradient(#070c1a 0%, #06101d 100%);
+  border-radius: 24px 24px 0 0;
+  grid-template-columns: 242px minmax(0, 1fr);
+  align-items: center;
+  gap: 0;
+  width: 100%;
+  min-width: 0;
+  min-height: 72px;
+  padding: 0;
+  display: grid;
+  box-shadow: inset 0 1px #ffffff0f, 0 12px 28px #020617ad;
+  container-type: inline-size;
+}
+
+.opus_TjZbi8_root[data-connected="true"] {
+  border-bottom-color: var(--application-header-border);
+  border-radius: 14px;
+  min-height: 82px;
+}
+
+.opus_TjZbi8_brand {
+  border-radius: 8px;
+  align-items: center;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  padding: 6px 18px;
+  display: inline-flex;
+}
+
+.opus_TjZbi8_brand:focus-visible {
+  outline: 2px solid var(--opus-accent);
+  outline-offset: 4px;
+}
+
+.opus_TjZbi8_logo {
+  object-fit: contain;
+  object-position: center;
+  width: 178px;
+  max-width: 100%;
+  height: 58px;
+  display: block;
+}
+
+.opus_TjZbi8_search {
+  --opus-control-height: 40px;
+  --opus-control-font-size: .88rem;
+  min-width: 0;
+}
+
+.opus_TjZbi8_actions {
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  display: flex;
+}
+
+.opus_TjZbi8_actionGroup {
+  align-items: center;
+  gap: 8px;
+  display: inline-flex;
+}
+
+.opus_TjZbi8_actions > [role="separator"] {
+  background: color-mix(in srgb, var(--opus-muted) 38%, transparent);
+  flex: 0 0 1px;
+  align-self: center;
+  min-height: 30px;
+}
+
+.opus_TjZbi8_createButton {
+  border: 1px solid color-mix(in srgb, var(--opus-accent) 34%, var(--opus-border));
+  background: color-mix(in srgb, var(--opus-accent) 10%, var(--opus-panel));
+  width: 2.1rem;
+  height: 2.1rem;
+  color: color-mix(in srgb, var(--opus-accent) 78%, white);
+  cursor: pointer;
+  border-radius: 10px;
+  flex: none;
+  place-items: center;
+  padding: 0;
+  font-size: 1rem;
+  transition: background .16s, border-color .16s, transform .16s;
+  display: inline-grid;
+}
+
+.opus_TjZbi8_createButton svg {
+  width: .78rem;
+  height: .78rem;
+}
+
+.opus_TjZbi8_createButton:hover {
+  border-color: color-mix(in srgb, var(--opus-accent) 72%, var(--opus-border));
+  background: color-mix(in srgb, var(--opus-accent) 18%, var(--opus-panel));
+}
+
+.opus_TjZbi8_createButton:active {
+  transform: translateY(1px);
+}
+
+.opus_TjZbi8_createButton:focus-visible {
+  outline: 2px solid var(--opus-accent);
+  outline-offset: 2px;
+}
+
+.opus_TjZbi8_createMenuIcon {
+  flex: 0 0 1rem;
+  justify-content: center;
+  align-items: center;
+  width: 1rem;
+  height: 1rem;
+  display: inline-flex;
+}
+
+.opus_TjZbi8_createMenuIcon svg {
+  width: .875rem;
+  height: .875rem;
+}
+
+.opus_TjZbi8_profile {
+  width: min(190px, 18vw);
+  min-width: 150px;
+}
+
+@container (width <= 1200px) {
+  .opus_TjZbi8_profile {
+    width: 46px;
+    min-width: 46px;
+    overflow: hidden;
+  }
+}
+
+.opus_TjZbi8_content {
+  background: radial-gradient(75% 120% at 0 0, #1d4ed81a, #0000 60%), linear-gradient(#0e182b, #07111f);
+  border: 1px solid #60a5fa2e;
+  border-top-color: #797bf86b;
+  border-radius: 22px 22px 0 0;
+  grid-template-columns: minmax(280px, 430px) minmax(0, 1fr);
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  min-width: 0;
+  height: calc(100% + 2px);
+  min-height: 72px;
+  margin-block: -1px;
+  padding: 0 18px 0 16px;
+  display: grid;
+  box-shadow: inset 0 1px #ffffff0d, -10px 0 28px #02061742;
+}
+
+.opus_TjZbi8_root[data-connected="true"] .opus_TjZbi8_content {
+  border-color: #0000;
+  border-left-color: var(--application-header-border);
+  background: radial-gradient(75% 120% at 0 0, #1d4ed81a, #0000 60%), linear-gradient(90deg, #0d172a 0%, #07111f 66%, #0000 100%);
+  border-right: 0;
+  border-radius: 14px 0 0 14px;
+  height: 62px;
+  min-height: 62px;
+  margin-block: 0;
+  position: relative;
+}
+
+.opus_TjZbi8_root[data-connected="true"] .opus_TjZbi8_content:before, .opus_TjZbi8_root[data-connected="true"] .opus_TjZbi8_content:after {
+  background: linear-gradient(90deg,
+    var(--application-header-border) 0%,
+    var(--application-header-border) 66%,
+    transparent 100%);
+  content: "";
+  pointer-events: none;
+  height: 1px;
+  position: absolute;
+  left: 10px;
+  right: 0;
+}
+
+.opus_TjZbi8_root[data-connected="true"] .opus_TjZbi8_content:before {
+  top: -1px;
+}
+
+.opus_TjZbi8_root[data-connected="true"] .opus_TjZbi8_content:after {
+  bottom: -1px;
+}
+
+[data-shell-theme="light"] .opus_TjZbi8_root, [data-theme="light"] .opus_TjZbi8_root {
+  --application-header-bg: #f7f8fffa;
+  --application-header-border: #b4b3e8;
+  --dashboard-section-bg: #f7f8fffa;
+  --dashboard-section-panel: #fff;
+  --dashboard-section-text: #17132f;
+  --dashboard-section-muted: #655f83;
+  color: #17132f;
+  background: radial-gradient(110% 180% at 0 0, #7c3aed47, #0000 60%), radial-gradient(90% 140% at 22% 20%, #a78bfa38, #0000 64%), linear-gradient(#f5f3ff 0%, #eef2ff 100%);
+  box-shadow: inset 0 1px #ffffffe6, 0 12px 28px #4338ca24;
+}
+
+[data-shell-theme="light"] .opus_TjZbi8_content, [data-theme="light"] .opus_TjZbi8_content {
+  background: radial-gradient(75% 120% at 0 0, #dbeafe8a, #0000 62%), linear-gradient(#fffffffa, #f5f7fffa);
+  border-color: #b5aae4 #babbe6 #babbe6;
+  box-shadow: inset 0 1px #fffffffa, -10px 0 28px #4338ca14;
+}
+
+[data-shell-theme="light"] .opus_TjZbi8_root[data-connected="true"] .opus_TjZbi8_content, [data-theme="light"] .opus_TjZbi8_root[data-connected="true"] .opus_TjZbi8_content {
+  border-color: #0000;
+  border-left-color: var(--application-header-border);
+  background: radial-gradient(75% 120% at 0 0, #dbeafe8a, #0000 62%), linear-gradient(90deg, #fffffffa 0%, #f5f7ff 66%, #0000 100%);
+  border-right: 0;
+}
+
+@media (width <= 1100px) {
+  .opus_TjZbi8_root {
+    grid-template-columns: 150px minmax(0, 1fr);
+  }
+
+  .opus_TjZbi8_content {
+    grid-template-columns: minmax(220px, 1fr) auto;
+  }
+
+  .opus_TjZbi8_logo {
+    width: 132px;
+    max-width: 132px;
+    height: 48px;
+  }
+
+  .opus_TjZbi8_profile {
+    width: 46px;
+    min-width: 46px;
+    overflow: hidden;
+  }
+}
+
+@media (width <= 780px) {
+  .opus_TjZbi8_root {
+    grid-template-columns: 120px minmax(0, 1fr);
+    min-height: 64px;
+  }
+
+  .opus_TjZbi8_content {
+    grid-template-columns: minmax(0, 1fr) auto;
+    min-height: 62px;
+  }
+
+  .opus_TjZbi8_search {
+    display: none;
+  }
+
+  .opus_TjZbi8_actions {
+    grid-column: 2;
+  }
+
+  .opus_TjZbi8_actions > :nth-of-type(n+5) {
+    display: none;
+  }
+}
+
+@media (width <= 520px) {
+  .opus_TjZbi8_root {
+    padding: 10px 12px;
+  }
+
+  .opus_TjZbi8_actions {
+    gap: 6px;
+  }
+
+  .opus_TjZbi8_profile {
+    display: none;
+  }
+}
+
+/* components/ApplicationFooter/ApplicationFooter.module.css */
+.opus_mphyzH_root {
+  --application-footer-border: var(--dashboard-section-border, #60a5fa33);
+  border: 1px solid var(--application-footer-border);
+  width: 100%;
+  min-width: 0;
+  min-height: 58px;
+  color: var(--dashboard-section-text, var(--opus-text));
+  background: radial-gradient(110% 180% at 0 100%, #6d28d957, #0000 58%), radial-gradient(90% 140% at 22% 80%, #312e8138, #0000 62%), linear-gradient(#070c1a 0%, #06101d 100%);
+  border-radius: 14px;
+  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
+  align-items: center;
+  padding: 8px 18px;
+  display: grid;
+  box-shadow: inset 0 1px #ffffff0f, 0 12px 28px #020617ad;
+}
+
+.opus_mphyzH_brand, .opus_mphyzH_actions, .opus_mphyzH_actionSlot {
+  align-items: center;
+  display: flex;
+}
+
+.opus_mphyzH_brand {
+  gap: 8px;
+  min-width: 0;
+}
+
+.opus_mphyzH_logo {
+  object-fit: contain;
+  width: 86px;
+  height: 34px;
+}
+
+.opus_mphyzH_product {
+  color: var(--opus-muted);
+  font-weight: 650;
+}
+
+.opus_mphyzH_version {
+  color: var(--opus-muted);
+  margin-left: 10px;
+  font-size: .72rem;
+}
+
+.opus_mphyzH_copyright {
+  color: var(--opus-muted);
+  text-align: center;
+}
+
+.opus_mphyzH_actions {
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.opus_mphyzH_actionSlot {
+  gap: 8px;
+}
+
+.opus_mphyzH_actionSlot [role="separator"] {
+  height: 24px;
+}
+
+.opus_mphyzH_action {
+  width: 32px;
+  height: 32px;
+  color: var(--opus-muted);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 8px;
+  place-items: center;
+  padding: 0;
+  display: grid;
+}
+
+.opus_mphyzH_action:hover, .opus_mphyzH_action:focus-visible {
+  background: color-mix(in srgb, var(--opus-text) 7%, transparent);
+  color: var(--opus-text);
+  outline: none;
+}
+
+.opus_mphyzH_action:focus-visible {
+  outline: 2px solid var(--opus-accent);
+  outline-offset: 2px;
+}
+
+.opus_mphyzH_action svg {
+  width: 15px;
+  height: 15px;
+}
+
+[data-shell-theme="light"] .opus_mphyzH_root, [data-theme="light"] .opus_mphyzH_root {
+  --application-footer-border: #b4b3e8;
+  color: #17132f;
+  background: radial-gradient(110% 180% at 0 100%, #7c3aed3d, #0000 60%), radial-gradient(90% 140% at 22% 80%, #a78bfa2e, #0000 64%), linear-gradient(#f5f3ff 0%, #eef2ff 100%);
+  box-shadow: inset 0 1px #ffffffe6, 0 12px 28px #4338ca24;
+}
+
+@media (width <= 720px) {
+  .opus_mphyzH_root {
+    grid-template-columns: 1fr auto;
+  }
+
+  .opus_mphyzH_copyright, .opus_mphyzH_version {
+    display: none;
+  }
+}
+
 /* components/FontPicker/FontPicker.module.css */
 .opus_ub1fhz_field {
   align-items: center;