@morscherlab/mint-sdk 1.4.0-beta.7 → 1.4.0-beta.9

package/src/styles/components/experiment-popover.css

@@ -1,95 +1,72 @@
-/* ExperimentPopover — aligned with refresh design (AppTopBar page selector) */
+/* ExperimentPopover — top-bar experiment control (design v2).
+   With Save shown, trigger and Save join into one bordered group:
+   [ code  name ▾ | Save ]. Flat: no lift, no glow, no coloured shadow. */
 
 /* Container */
 .mint-experiment-popover {
   position: relative;
-}
-
-/* Split trigger container */
-.mint-experiment-popover__split {
   display: inline-flex;
-  align-items: stretch;
+  min-width: 0;
 }
 
-/* When split has save, trigger loses its right border and radii so it meets
-   the save button flush. */
-.mint-experiment-popover__split--with-save .mint-experiment-popover__trigger {
-  border-right: none;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+/* Joined group — one border around both halves; the trigger drops its own. */
+.mint-experiment-popover--save {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: var(--bg-card);
 }
 
-/* ─── Trigger (left / main chip) ───
-   Shows the experiment name, truncated to preserve topbar density. */
+/* ─── Trigger ───
+   Code badge + name, truncated at maxNameWidth (inline style). */
 .mint-experiment-popover__trigger {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  height: var(--form-height-sm);
-  padding: 0 0.75rem;
-  border: 1px solid var(--border-color);
-  background: var(--bg-card);
+  min-width: 0;
+  height: 30px;
+  padding: 0 0.5rem 0 0.375rem;
+  border: 1px solid transparent;
   border-radius: var(--radius-md);
+  background: transparent;
   color: var(--text-primary);
+  font: inherit;
   font-size: 0.8125rem;
   font-weight: 500;
-  font-family: inherit;
-  cursor: pointer;
   white-space: nowrap;
-  max-width: 220px;
+  cursor: pointer;
   box-sizing: border-box;
-  transform: translateY(0);
   transition:
-    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    border-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
+    background-color var(--mint-transition),
+    color var(--mint-transition);
 }
 
-/* Hover (single-trigger mode) — lift + soft shadow. Gated :not(--active) so
-   the chip doesn't bounce while its panel is open. */
-.mint-experiment-popover__split:not(.mint-experiment-popover__split--with-save)
-  .mint-experiment-popover__trigger:hover:not(.mint-experiment-popover__trigger--active) {
-  background: var(--bg-hover);
-  box-shadow: var(--shadow-sm);
-  transform: translateY(-1px);
+.mint-experiment-popover--save .mint-experiment-popover__trigger {
+  border: 0;
+  border-radius: calc(var(--radius-md) - 1px) 0 0 calc(var(--radius-md) - 1px);
 }
 
-.mint-experiment-popover__split:not(.mint-experiment-popover__split--with-save)
-  .mint-experiment-popover__trigger:active:not(.mint-experiment-popover__trigger--active) {
-  transform: translateY(0);
-  box-shadow: none;
-  transition-duration: 0.05s;
+.mint-experiment-popover__trigger:hover,
+.mint-experiment-popover__trigger--active {
+  background: var(--bg-hover);
 }
 
-/* Active (panel open) — ring treatment, same language as the page selector */
-.mint-experiment-popover__trigger--active {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--color-primary-soft);
+.mint-experiment-popover__trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
 }
 
+/* Empty — dashed "Attach experiment" chip; click selects directly. */
 .mint-experiment-popover__trigger--empty {
-  color: var(--text-muted);
+  border: 1px dashed var(--border-strong);
+  color: var(--text-secondary);
 }
 
 .mint-experiment-popover__trigger-icon {
-  width: 1rem;
-  height: 1rem;
   flex-shrink: 0;
-  color: var(--color-primary);
-}
-
-.mint-experiment-popover__trigger--empty .mint-experiment-popover__trigger-icon {
-  color: var(--text-muted);
-}
-
-.mint-experiment-popover__trigger--active .mint-experiment-popover__trigger-icon {
-  color: var(--color-primary);
 }
 
 .mint-experiment-popover__trigger-text {
-  flex: 1;
+  flex: 0 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -97,308 +74,239 @@
   text-align: left;
 }
 
-/* Experiment code fallback in the trigger — monospace, tabular */
-.mint-experiment-popover__trigger-code {
-  font-family: var(--font-mono, 'Fira Code', monospace);
-  font-size: 0.75rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-  color: var(--text-primary);
-  font-variant-numeric: tabular-nums;
-}
-
-.mint-experiment-popover__trigger--empty .mint-experiment-popover__trigger-code {
+.mint-experiment-popover__trigger-chevron {
+  flex-shrink: 0;
   color: var(--text-muted);
+  transition: transform var(--mint-transition);
 }
 
-.mint-experiment-popover__trigger--active .mint-experiment-popover__trigger-code {
-  color: var(--color-primary);
+.mint-experiment-popover__trigger--active .mint-experiment-popover__trigger-chevron {
+  transform: rotate(180deg);
 }
 
 /* ─── Unresolved states ───
-   An experiment is bound but has no name yet. The chip must not read "No
-   experiment", and it must never fall back to the numeric id — a name only
-   ever comes from the platform. */
+   An experiment is bound but has no name yet. The chip must not read as empty,
+   and it must never fall back to the numeric id — a name only ever comes from
+   the platform. */
 .mint-experiment-popover__trigger--loading {
   cursor: progress;
 }
 
-.mint-experiment-popover__trigger--loading .mint-experiment-popover__trigger-icon {
-  color: var(--text-muted);
-}
-
 .mint-experiment-popover__trigger--error {
   border-color: var(--mint-error-border);
   background: var(--mint-error-bg);
   color: var(--mint-error);
 }
 
-.mint-experiment-popover__trigger--error .mint-experiment-popover__trigger-icon,
 .mint-experiment-popover__trigger--error .mint-experiment-popover__trigger-chevron {
   color: var(--mint-error);
 }
 
 /* Placeholder bar standing in for the name while it resolves. */
 .mint-experiment-popover__trigger-skeleton {
-  flex: 1;
-  min-width: 4.5rem;
+  width: 7rem;
   height: 0.625rem;
   border-radius: var(--radius-sm);
   background-color: var(--bg-tertiary);
   animation: mint-skeleton-breathe 1.6s ease-in-out infinite; /* 3e breathe, keyframes in skeleton.css */
 }
 
-.mint-experiment-popover__trigger-chevron {
-  width: 0.8125rem;
-  height: 0.8125rem;
-  flex-shrink: 0;
-  color: var(--text-muted);
-  transition: transform 0.2s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
-}
-
-.mint-experiment-popover__trigger--active .mint-experiment-popover__trigger-chevron {
-  transform: rotate(180deg);
-  color: var(--color-primary);
-}
-
-/* ─── Save trigger (right half of split) — filled-button treatment ─── */
-.mint-experiment-popover__save-trigger {
-  display: flex;
+/* ─── Save (right half of the group) — accent fill ─── */
+.mint-experiment-popover__save {
+  position: relative;
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: var(--form-height-sm);
-  height: var(--form-height-sm);
-  border: 1px solid var(--color-primary);
-  border-left: 1px solid rgba(255, 255, 255, 0.25);
-  background-color: var(--color-primary);
-  border-top-right-radius: var(--radius-md);
-  border-bottom-right-radius: var(--radius-md);
-  color: white;
-  cursor: pointer;
+  gap: 6px;
   flex-shrink: 0;
-  box-sizing: border-box;
-  transition:
-    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    border-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    opacity 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
+  height: 30px;
+  padding: 0 12px 0 10px;
+  border: 0;
+  border-left: 1px solid var(--border-color);
+  border-radius: 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0;
+  background: var(--color-primary);
+  color: var(--text-on-accent);
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--mint-transition), opacity var(--mint-transition);
 }
 
-.mint-experiment-popover__save-trigger--disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
+.mint-experiment-popover__save:hover:not(:disabled) {
+  background: var(--color-primary-hover);
 }
 
-.mint-experiment-popover__save-trigger--loading {
-  opacity: 0.7;
-  pointer-events: none;
+.mint-experiment-popover__save:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
 }
 
-/* Success state: green surface */
-.mint-experiment-popover__save-trigger--success {
-  background-color: var(--mint-success);
-  border-color: var(--mint-success);
-  border-left-color: rgba(255, 255, 255, 0.3);
+.mint-experiment-popover__save--loading {
+  cursor: progress;
+  opacity: 0.85;
 }
 
-.mint-experiment-popover__save-trigger-icon {
-  width: 0.9375rem;
-  height: 0.9375rem;
+.mint-experiment-popover__save--disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
 }
 
-.mint-experiment-popover__spinner--inline {
-  width: 0.8125rem;
-  height: 0.8125rem;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-top-color: white;
-  border-radius: 50%;
-  animation: mint-experiment-popover-spin 0.6s linear infinite;
+.mint-experiment-popover__save--success,
+.mint-experiment-popover__save--success:hover:not(:disabled) {
+  background: var(--mint-success);
 }
 
-/* ─── Split unit ─── */
-/* No lift: the save half is flat like every filled control (3g, per 1d). */
-
-/* Per-half color-on-hover (only when the SPECIFIC half is being pointed at) */
-.mint-experiment-popover__split--with-save
-  .mint-experiment-popover__trigger:hover:not(.mint-experiment-popover__trigger--active) {
-  background: var(--bg-hover);
-  border-color: var(--color-primary);
+.mint-experiment-popover__save svg {
+  flex-shrink: 0;
 }
 
-.mint-experiment-popover__split--with-save
-  .mint-experiment-popover__save-trigger:hover:not(:disabled):not(.mint-experiment-popover__save-trigger--disabled) {
-  background-color: var(--color-primary-hover);
-  border-color: var(--color-primary-hover);
+.mint-experiment-popover__save-spinner {
+  animation: mint-experiment-popover-spin 1s linear infinite;
 }
 
-.mint-experiment-popover__split--with-save
-  .mint-experiment-popover__save-trigger--success:hover:not(:disabled) {
-  background-color: var(--mint-success-hover);
-  border-color: var(--mint-success-hover);
+/* Unsaved-changes dot, top-right, ringed in the accent. */
+.mint-experiment-popover__dirty {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-on-accent);
+  box-shadow: 0 0 0 1.5px var(--color-primary);
 }
 
-/* ─── Popover panel ─── */
+/* ─── Panel ───
+   Left-aligned under the control and at least as wide as it; --end hangs it
+   from the right edge when the left-aligned panel would leave the viewport. */
 .mint-experiment-popover__panel {
   position: absolute;
-  top: calc(100% + 0.5rem);
-  right: 0;
-  width: 17.5rem;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 50;
+  width: 300px;
+  min-width: 100%;
+  padding: 4px;
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-md);
-  z-index: 50;
-  overflow: hidden;
+  box-shadow: var(--mint-shadow-pop);
+  box-sizing: border-box;
 }
 
-/* Header */
-.mint-experiment-popover__header {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  padding: 0.75rem 1rem 0.5rem;
-  border-bottom: 1px solid var(--border-light);
+.mint-experiment-popover--save .mint-experiment-popover__panel {
+  top: calc(100% + 6px);
+  left: -1px;
 }
 
-.mint-experiment-popover__title {
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--text-primary);
+.mint-experiment-popover__panel--end {
+  left: auto;
+  right: 0;
 }
 
-.mint-experiment-popover__subtitle {
-  font-size: 0.6875rem;
-  font-weight: 400;
-  color: var(--text-muted);
+.mint-experiment-popover--save .mint-experiment-popover__panel--end {
+  left: auto;
+  right: -1px;
 }
 
-.mint-experiment-popover__body {
-  padding: 0.75rem 1rem;
+.mint-experiment-popover__head {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  padding: 8px 8px 6px;
 }
 
-/* Select experiment button (no experiment state) */
-.mint-experiment-popover__select-btn {
+.mint-experiment-popover__name {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  gap: 0.375rem;
-  width: 100%;
-  height: 2.125rem;
-  padding: 0 0.75rem;
-  border: 1px solid var(--color-primary);
-  background-color: var(--color-primary-soft);
-  border-radius: var(--radius-md);
-  color: var(--color-primary);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  font-family: inherit;
-  cursor: pointer;
-  transform: translateY(0);
-  transition:
-    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
-}
-
-.mint-experiment-popover__select-btn:hover {
-  background-color: var(--color-primary);
-  color: white;
-  box-shadow: var(--shadow-sm);
-  transform: translateY(-1px);
+  gap: 6px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--text-primary);
+  overflow-wrap: anywhere;
 }
 
-.mint-experiment-popover__select-btn:active {
-  transform: translateY(0);
-  box-shadow: none;
-  transition-duration: 0.05s;
+.mint-experiment-popover__head--error .mint-experiment-popover__name {
+  color: var(--mint-error);
 }
 
-/* Experiment card (selected state) */
-.mint-experiment-popover__card {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.625rem;
-  padding: 0.625rem;
-  background: var(--bg-tertiary);
-  border-radius: var(--radius-md);
+.mint-experiment-popover__message {
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: var(--text-secondary);
+  overflow-wrap: anywhere;
 }
 
-.mint-experiment-popover__card-icon {
-  width: 2rem;
-  height: 2rem;
-  flex-shrink: 0;
-  border-radius: var(--radius-sm);
-  background: var(--color-primary-soft);
+.mint-experiment-popover__meta {
   display: grid;
-  place-items: center;
+  grid-template-columns: 72px 1fr;
+  gap: 4px 8px;
+  margin: 0;
+  padding: 2px 8px 8px;
+  font-size: 0.75rem;
 }
 
-.mint-experiment-popover__card-icon svg {
-  width: 1rem;
-  height: 1rem;
-  color: var(--color-primary);
+.mint-experiment-popover__meta dt {
+  color: var(--text-muted);
 }
 
-.mint-experiment-popover__card-info {
-  flex: 1;
+.mint-experiment-popover__meta dd {
+  margin: 0;
   min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
+  color: var(--text-primary);
+  overflow-wrap: anywhere;
 }
 
-/* Experiment code in the card — small mono badge at the top of info */
-.mint-experiment-popover__card-code {
-  align-self: flex-start;
-  font-family: var(--font-mono, 'Fira Code', monospace);
-  font-size: 0.6875rem;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  color: var(--color-primary);
-  background: var(--color-primary-soft);
-  padding: 0.0625rem 0.375rem;
-  border-radius: 9999px;
-  line-height: 1.3;
-  font-variant-numeric: tabular-nums;
+.mint-experiment-popover__separator {
+  height: 1px;
+  margin: 4px -4px;
+  background: var(--border-light);
 }
 
-.mint-experiment-popover__card-name {
-  font-size: 0.8125rem;
-  font-weight: 600;
+/* Full-width menu rows (Change / Open / Detach). */
+.mint-experiment-popover__option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 30px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: var(--radius);
+  background: transparent;
   color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1.3;
-}
-
-.mint-experiment-popover__card-status {
-  font-size: 0.6875rem;
-  color: var(--text-muted);
-  line-height: 1.3;
+  font: inherit;
+  font-size: 0.8125rem;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  box-sizing: border-box;
 }
 
-/* ─── Card: unresolved variants ─── */
-.mint-experiment-popover__card--error {
-  background: var(--mint-error-bg);
+.mint-experiment-popover__option:hover,
+.mint-experiment-popover__option:focus-visible {
+  outline: none;
+  background: var(--bg-hover);
 }
 
-.mint-experiment-popover__card-icon--error {
-  background: transparent;
+.mint-experiment-popover__option:focus-visible {
+  box-shadow: var(--focus-ring);
 }
 
-.mint-experiment-popover__card-icon--error svg {
-  color: var(--mint-error);
+.mint-experiment-popover__option-icon {
+  flex-shrink: 0;
+  color: var(--text-muted);
 }
 
-.mint-experiment-popover__card-message {
-  font-size: 0.6875rem;
-  color: var(--text-secondary);
-  line-height: 1.4;
-  overflow-wrap: anywhere;
+.mint-experiment-popover__option--danger,
+.mint-experiment-popover__option--danger .mint-experiment-popover__option-icon {
+  color: var(--_ink-error);
 }
 
-/* Placeholder lines mirroring the code / name / status stack of a real card. */
+/* Placeholder lines mirroring the code / name stack of a resolved header. */
 .mint-experiment-popover__skeleton-line {
   display: block;
   height: 0.625rem;
@@ -410,60 +318,10 @@
 .mint-experiment-popover__skeleton-line--code {
   width: 3.5rem;
   height: 0.75rem;
-  border-radius: 9999px;
 }
 
 .mint-experiment-popover__skeleton-line--name {
   width: 100%;
-  margin-top: 0.25rem;
-}
-
-.mint-experiment-popover__skeleton-line--status {
-  width: 45%;
-  margin-top: 0.25rem;
-}
-
-/* Action row sits BELOW the card (was inside) so the buttons have
-   room to breathe and don't compete with the info stack. */
-.mint-experiment-popover__card-actions {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 0.25rem;
-  margin-top: 0.5rem;
-}
-
-.mint-experiment-popover__change-btn,
-.mint-experiment-popover__detach-btn {
-  padding: 0.3125rem 0.625rem;
-  border: none;
-  background: transparent;
-  border-radius: var(--radius-sm);
-  font-size: 0.75rem;
-  font-weight: 500;
-  font-family: inherit;
-  cursor: pointer;
-  transition:
-    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
-}
-
-.mint-experiment-popover__change-btn {
-  color: var(--color-primary);
-}
-
-.mint-experiment-popover__change-btn:hover {
-  background: var(--color-primary-soft);
-}
-
-.mint-experiment-popover__detach-btn {
-  color: var(--text-muted);
-  font-weight: 400;
-}
-
-.mint-experiment-popover__detach-btn:hover {
-  color: var(--mint-error);
-  background: rgba(239, 68, 68, 0.08);
 }
 
 @keyframes mint-experiment-popover-spin {
@@ -472,19 +330,6 @@
 
 /* Respect motion preferences */
 @media (prefers-reduced-motion: reduce) {
-  .mint-experiment-popover__trigger,
-  .mint-experiment-popover__save-trigger,
-  .mint-experiment-popover__select-btn {
-    transition-property: background-color, border-color, box-shadow, color, opacity;
-    transition-duration: 0.15s;
-    transition-timing-function: ease;
-  }
-  .mint-experiment-popover__trigger:hover,
-  .mint-experiment-popover__trigger:active,
-  .mint-experiment-popover__select-btn:hover,
-  .mint-experiment-popover__select-btn:active {
-    transform: none;
-  }
   .mint-experiment-popover__trigger-chevron {
     transition: none;
   }