@morscherlab/mint-sdk 1.0.39 → 1.0.42

package/dist/styles.css

@@ -2855,10 +2855,11 @@
 }
 .mint-button--secondary {
   background-color: var(--bg-secondary);
-  color: var(--text-primary);
+  color: var(--text-secondary-strong);
   border: 1px solid var(--border-color);
-  /* Intentionally tighter + fainter than the colored variants —
-     secondary shouldn't "float" the way filled buttons do. */
+  /* Secondary is lower-emphasis through surface, border, and shadow, but keeps
+     medium label weight so it still reads as an actionable button. */
+  font-weight: 500;
   box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
 }
 .mint-button--secondary:hover:not(.mint-button--disabled) {
@@ -2894,7 +2895,9 @@
 }
 .mint-button--ghost {
   background-color: transparent;
-  color: var(--text-primary);
+  color: var(--text-secondary-strong);
+  /* Lowest-emphasis variant: regular (400) weight, below secondary. */
+  font-weight: 400;
 }
 .mint-button--ghost:hover:not(.mint-button--disabled) {
   background-color: var(--bg-tertiary);
@@ -2904,8 +2907,14 @@
 .mint-button--sm {
   padding: 0.375rem 0.75rem;
   font-size: 0.875rem;
+  /* Small buttons live in dense/secondary contexts — regular (400) weight
+     keeps the compact label from reading too heavy. Applies to all variants. */
+  font-weight: 400;
   min-height: var(--form-height-sm);
 }
+.mint-button--secondary.mint-button--sm {
+  font-weight: 500;
+}
 .mint-button--md {
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
@@ -3113,6 +3122,9 @@ to {
 }
 .mint-modal__close {
   flex-shrink: 0;
+  /* Always pin the close affordance to the right edge of the header, even when
+     there is no title/subtitle (no flex-1 header-text to push it over). */
+  margin-left: auto;
   width: 1.75rem;
   height: 1.75rem;
   padding: 0;
@@ -7096,10 +7108,9 @@ to {
 }
 .mint-page-selector__item-label {
   flex: 1;
-}
-.mint-page-selector__item-hint {
-  font-size: 0.65625rem;
-  color: var(--text-muted);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 /* AppTopBar pillNav — centered top-level navigation pills */
@@ -10971,143 +10982,414 @@ to {
     transform: rotate(360deg);
 }
 }
-/* AutoGroupModal - Smart grouping wizard */
-.mint-auto-group {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.625rem;
-  min-height: 0;
-  min-width: 0;
+/* SampleHierarchyTree Component Styles */
+.mint-sample-tree {
+  font-size: 0.875rem;
 }
-.mint-modal__body:has(> .mint-auto-group .mint-auto-group__manual-mode) {
-  overflow: hidden;
+.mint-sample-tree--sm {
+  font-size: 0.75rem;
 }
-.mint-auto-group:has(.mint-auto-group__manual-mode) {
-  height: min(34rem, calc(100vh - 12rem));
-  min-height: min(26rem, calc(100vh - 12rem));
-  overflow: hidden;
+.mint-sample-tree--lg {
+  font-size: 1rem;
 }
 
-/* --- Workflow tabs --- */
-.mint-auto-group__workflow-bar {
+/* Node */
+.mint-sample-tree__node {
+  user-select: none;
+}
+
+/* Node header (clickable row) */
+.mint-sample-tree__node-header {
   display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 0.25rem;
-  min-width: 0;
-  padding-bottom: 0;
-  border-bottom: 1px solid var(--border-color);
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
 }
-.mint-auto-group__workflow-bar--manual {
-  gap: 0.75rem;
+.mint-sample-tree__node-header:hover {
+  background-color: var(--bg-hover);
 }
-.mint-auto-group__workflow-tabs {
-  display: flex;
-  flex-shrink: 0;
+.mint-sample-tree__node--selected > .mint-sample-tree__node-header {
+  background-color: rgba(59, 130, 246, 0.1);
+}
+.mint-sample-tree--sm .mint-sample-tree__node-header {
+  padding: 0.25rem 0.375rem;
   gap: 0.25rem;
 }
-.mint-auto-group__workflow-tab {
-  min-height: 1.75rem;
-  margin-bottom: -1px;
-  padding: 0.25rem 0.625rem;
-  border: 0;
-  border-bottom: 2px solid transparent;
-  border-radius: 0;
+.mint-sample-tree--lg .mint-sample-tree__node-header {
+  padding: 0.5rem 0.625rem;
+  gap: 0.5rem;
+}
+
+/* Toggle button */
+.mint-sample-tree__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
   background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
   color: var(--text-muted);
-  font-size: 0.75rem;
-  font-weight: 600;
   cursor: pointer;
-  line-height: 1.25;
-  transition: border-color 0.15s ease, color 0.15s ease;
+  transition: color 0.15s ease, transform 0.15s ease;
+  flex-shrink: 0;
 }
-.mint-auto-group__workflow-tab:hover {
+.mint-sample-tree__toggle:hover {
   color: var(--text-primary);
+  background-color: var(--bg-tertiary);
 }
-.mint-auto-group__workflow-tab:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--color-primary-soft);
+.mint-sample-tree__toggle svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  transition: transform 0.15s ease;
 }
-.mint-auto-group__workflow-tab--active {
-  border-bottom-color: var(--color-primary);
-  color: var(--color-primary);
+.mint-sample-tree__node--expanded > .mint-sample-tree__node-header .mint-sample-tree__toggle svg {
+  transform: rotate(90deg);
 }
-.mint-auto-group__manual-mode {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.625rem;
-  min-height: 0;
-  min-width: 0;
-  overflow: hidden;
+.mint-sample-tree--sm .mint-sample-tree__toggle {
+  width: 1rem;
+  height: 1rem;
 }
-.mint-auto-group__manual-summary {
+.mint-sample-tree--sm .mint-sample-tree__toggle svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.mint-sample-tree--lg .mint-sample-tree__toggle {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mint-sample-tree--lg .mint-sample-tree__toggle svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Placeholder for leaf nodes (no toggle) */
+.mint-sample-tree__toggle-placeholder {
+  width: 1.25rem;
+  flex-shrink: 0;
+}
+.mint-sample-tree--sm .mint-sample-tree__toggle-placeholder {
+  width: 1rem;
+}
+.mint-sample-tree--lg .mint-sample-tree__toggle-placeholder {
+  width: 1.5rem;
+}
+
+/* Icon */
+.mint-sample-tree__icon {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  flex: 1;
-  gap: 0.75rem;
-  min-width: 0;
-  padding-bottom: 0.25rem;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
 }
-.mint-auto-group__manual-summary-text {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  min-width: 0;
+.mint-sample-tree__icon svg {
+  width: 1rem;
+  height: 1rem;
 }
-.mint-auto-group__manual-summary-text strong {
-  color: var(--text-primary);
-  font-size: 0.8125rem;
-  font-weight: 600;
-  line-height: 1.25;
+.mint-sample-tree--sm .mint-sample-tree__icon {
+  width: 1rem;
+  height: 1rem;
 }
-.mint-auto-group__manual-eyebrow {
+.mint-sample-tree--sm .mint-sample-tree__icon svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.mint-sample-tree--lg .mint-sample-tree__icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mint-sample-tree--lg .mint-sample-tree__icon svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+/* Icon colors by type */
+.mint-sample-tree__icon--study {
   color: var(--text-muted);
-  font-size: 0.625rem;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  line-height: 1.2;
-  text-transform: uppercase;
 }
-.mint-auto-group__manual-stats {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  flex-wrap: wrap;
-  justify-content: flex-end;
+.mint-sample-tree__icon--experiment {
+  color: var(--color-primary);
+}
+.mint-sample-tree__icon--plate {
+  color: var(--mint-info);
+}
+.mint-sample-tree__icon--sample {
+  color: var(--mint-success);
+}
+.mint-sample-tree__icon--cell_line {
+  color: var(--color-purple);
+}
+.mint-sample-tree__icon--passage {
   color: var(--text-secondary);
-  font-size: 0.6875rem;
 }
-.mint-auto-group__manual-stats span {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  min-height: 1.375rem;
-  padding: 0.0625rem 0.4375rem;
-  border: 1px solid var(--border-light);
-  border-radius: 9999px;
-  background: var(--bg-secondary);
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
+.mint-sample-tree__icon--clone {
+  color: var(--mint-warning);
 }
-.mint-auto-group__manual-stats strong {
-  color: var(--text-primary);
-  font-family: 'Fira Code', monospace;
-  font-size: 0.6875rem;
+.mint-sample-tree__icon--treatment {
+  color: var(--color-cta);
 }
-.mint-auto-group__manual-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
-  gap: 0.625rem;
+.mint-sample-tree__icon--folder {
+  color: var(--text-muted);
+}
+.mint-sample-tree__icon--custom {
+  color: var(--text-secondary);
+}
+
+/* Label */
+.mint-sample-tree__label {
   flex: 1;
-  min-height: 0;
   min-width: 0;
+  color: var(--text-primary);
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.mint-auto-group__manual-panel {
-  min-width: 0;
+
+/* Badge */
+.mint-sample-tree__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  border-radius: 9999px;
+  flex-shrink: 0;
+}
+.mint-sample-tree--sm .mint-sample-tree__badge {
+  min-width: 1rem;
+  padding: 0.0625rem 0.25rem;
+  font-size: 0.5rem;
+}
+.mint-sample-tree--lg .mint-sample-tree__badge {
+  min-width: 1.5rem;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+}
+.mint-sample-tree__badge--default {
+  background-color: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+.mint-sample-tree__badge--success {
+  background-color: var(--mint-success-bg);
+  color: var(--mint-success);
+}
+.mint-sample-tree__badge--warning {
+  background-color: var(--mint-warning-bg);
+  color: var(--mint-warning);
+}
+.mint-sample-tree__badge--error {
+  background-color: var(--mint-error-bg);
+  color: var(--mint-error);
+}
+
+/* Children container */
+.mint-sample-tree__children {
+  margin-left: 1.25rem;
+  padding-left: 0.75rem;
+  border-left: 1px solid var(--border-color);
+  overflow: hidden;
+}
+.mint-sample-tree--sm .mint-sample-tree__children {
+  margin-left: 1rem;
+  padding-left: 0.5rem;
+}
+.mint-sample-tree--lg .mint-sample-tree__children {
+  margin-left: 1.5rem;
+  padding-left: 1rem;
+}
+
+/* Animation */
+.mint-sample-tree__children--entering {
+  animation: mint-tree-expand 0.15s ease-out;
+}
+.mint-sample-tree__children--leaving {
+  animation: mint-tree-collapse 0.15s ease-out forwards;
+}
+@keyframes mint-tree-expand {
+from {
+    opacity: 0;
+    max-height: 0;
+}
+to {
+    opacity: 1;
+    max-height: 1000px;
+}
+}
+@keyframes mint-tree-collapse {
+from {
+    opacity: 1;
+    max-height: 1000px;
+}
+to {
+    opacity: 0;
+    max-height: 0;
+}
+}
+
+/* Empty state */
+.mint-sample-tree__empty {
+  padding: 1rem;
+  text-align: center;
+  color: var(--text-muted);
+}
+.mint-sample-tree__empty-icon {
+  width: 2rem;
+  height: 2rem;
+  margin: 0 auto 0.5rem;
+  opacity: 0.5;
+}
+.mint-sample-tree__empty-text {
+  font-size: 0.875rem;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  padding: 0 !important;
+}
+/* AutoGroupModal - Smart grouping wizard */
+.mint-auto-group {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  min-height: 0;
+  min-width: 0;
+}
+.mint-modal__body:has(> .mint-auto-group .mint-auto-group__manual-mode) {
+  overflow: hidden;
+}
+.mint-auto-group:has(.mint-auto-group__manual-mode) {
+  height: min(34rem, calc(100vh - 12rem));
+  min-height: min(26rem, calc(100vh - 12rem));
+  overflow: hidden;
+}
+
+/* --- Workflow tabs --- */
+.mint-auto-group__workflow-bar {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 0.25rem;
+  min-width: 0;
+  padding-bottom: 0;
+  border-bottom: 1px solid var(--border-color);
+}
+.mint-auto-group__workflow-bar--manual {
+  gap: 0.75rem;
+}
+.mint-auto-group__workflow-tabs {
+  display: flex;
+  flex-shrink: 0;
+  gap: 0.25rem;
+}
+.mint-auto-group__workflow-tab {
+  min-height: 1.75rem;
+  margin-bottom: -1px;
+  padding: 0.25rem 0.625rem;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+  cursor: pointer;
+  line-height: 1.25;
+  transition: border-color 0.15s ease, color 0.15s ease;
+}
+.mint-auto-group__workflow-tab:hover {
+  color: var(--text-primary);
+}
+.mint-auto-group__workflow-tab:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-primary-soft);
+}
+.mint-auto-group__workflow-tab--active {
+  border-bottom-color: var(--color-primary);
+  color: var(--color-primary);
+}
+.mint-auto-group__manual-mode {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+.mint-auto-group__manual-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  gap: 0.75rem;
+  min-width: 0;
+  padding-bottom: 0.25rem;
+}
+.mint-auto-group__manual-summary-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+}
+.mint-auto-group__manual-summary-text strong {
+  color: var(--text-primary);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+.mint-auto-group__manual-eyebrow {
+  color: var(--text-muted);
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+.mint-auto-group__manual-stats {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  color: var(--text-secondary);
+  font-size: 0.6875rem;
+}
+.mint-auto-group__manual-stats span {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  min-height: 1.375rem;
+  padding: 0.0625rem 0.4375rem;
+  border: 1px solid var(--border-light);
+  border-radius: 9999px;
+  background: var(--bg-secondary);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.mint-auto-group__manual-stats strong {
+  color: var(--text-primary);
+  font-family: 'Fira Code', monospace;
+  font-size: 0.6875rem;
+}
+.mint-auto-group__manual-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
+  gap: 0.625rem;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+.mint-auto-group__manual-panel {
+  min-width: 0;
   min-height: 0;
   overflow: hidden;
   display: flex;
@@ -11738,7 +12020,7 @@ to {
   font-size: 0.8125rem;
   color: var(--mint-error);
   background: var(--mint-error-bg);
-  border: 1px solid rgba(239, 68, 68, 0.3);
+  border: 1px solid var(--mint-error-border);
   border-radius: var(--radius);
 }
 
@@ -11759,7 +12041,7 @@ to {
 }
 .mint-auto-group__experiment-error {
   padding: 1.5rem;
-  border: 1px solid rgba(239, 68, 68, 0.3);
+  border: 1px solid var(--mint-error-border);
   border-radius: var(--radius-md);
   background: var(--mint-error-bg);
   font-size: 0.8125rem;
@@ -11790,7 +12072,7 @@ to {
 .mint-auto-group__link-btn:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 1px;
-  border-radius: 2px;
+  border-radius: var(--radius-sm);
 }
 .mint-auto-group__experiment-loaded {
   padding: 1.5rem;
@@ -12167,21 +12449,12 @@ to {
 }
 .mint-auto-group__preview-panel h4 { margin: 0 0 10px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em;
 }
-.mint-auto-group__preview-group { border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden;
-}
-.mint-auto-group__preview-group[open] { background: var(--bg-secondary);
-}
-.mint-auto-group__preview-group summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; padding: 0.5rem 0.875rem;
-}
-.mint-auto-group__preview-group[open] summary { border-bottom: 1px solid var(--border);
-}
-.mint-auto-group__preview-dot { width: 10px; height: 10px; border-radius: 9999px; flex-shrink: 0;
-}
-.mint-auto-group__preview-count { margin-left: auto; font-family: 'Fira Code', monospace; font-size: 12px; color: var(--text-secondary); background: var(--bg-primary); border: 1px solid var(--border); padding: 2px 8px; border-radius: 9999px;
-}
-.mint-auto-group__preview-samples { display: flex; flex-wrap: wrap; gap: 6px; padding: 0.5rem 0.875rem 0.625rem;
+
+/* Nested experimental groups render as a collapsible SampleHierarchyTree; cap
+   its height so a large batch scrolls inside the panel instead of the modal. */
+.mint-auto-group__preview-tree { max-height: 320px; overflow-y: auto;
 }
-.mint-auto-group__preview-sample { font-family: 'Fira Code', monospace; font-size: 11.5px; color: var(--text-primary); background: var(--bg-primary); border: 1px solid var(--border); padding: 3px 8px; border-radius: 9999px;
+.mint-auto-group__preview-empty { margin: 0; font-size: 13px; color: var(--text-muted);
 }
 .mint-auto-group__qc-chips { display: flex; flex-wrap: wrap; gap: 6px;
 }
@@ -12462,6 +12735,10 @@ to {
 .mint-sample-selector__expand-btn:hover {
   background-color: var(--bg-hover);
 }
+.mint-sample-selector__expand-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
 .mint-sample-selector__expand-icon {
   width: 0.875rem;
   height: 0.875rem;
@@ -12571,6 +12848,10 @@ to {
   transform: scale(1.25);
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(0, 0, 0, 0.06);
 }
+.mint-sample-selector__color-dot--clickable:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
 
 /* Count Badge */
 .mint-sample-selector__count-badge {
@@ -12602,8 +12883,15 @@ to {
   background-color: var(--mint-error-bg);
   color: var(--mint-error);
 }
-.mint-sample-selector__delete-btn--hidden {
-  opacity: 0;
+
+/* Reveal the hover-hidden delete button when reached by keyboard, and ring it. */
+.mint-sample-selector__delete-btn:focus-visible {
+  outline: none;
+  opacity: 1;
+  box-shadow: var(--focus-ring);
+}
+.mint-sample-selector__delete-btn--hidden {
+  opacity: 0;
 }
 .mint-sample-selector__delete-btn svg {
   width: 0.875rem;
@@ -14730,448 +15018,177 @@ to {
 .mint-reagent-editor__add-btn:hover:not(:disabled) {
   filter: brightness(0.88);
 }
-.mint-reagent-editor__add-btn:active:not(:disabled) {
-  transform: scale(0.92);
-}
-.mint-reagent-editor__add-btn:disabled {
-  opacity: var(--mint-disabled-opacity);
-  cursor: not-allowed;
-}
-
-/* Level table */
-.mint-reagent-editor__table {
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  overflow: hidden;
-  max-height: 14rem;
-  display: flex;
-  flex-direction: column;
-}
-.mint-reagent-editor__table-body {
-  flex: 1;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--scrollbar-thumb) transparent;
-}
-.mint-reagent-editor__table-header {
-  display: flex;
-  align-items: center;
-  padding: 0.375rem 0.5rem;
-  background-color: var(--bg-tertiary);
-  border-bottom: 1px solid var(--border-color);
-}
-.mint-reagent-editor__table-header .mint-reagent-editor__table-col {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: var(--text-muted);
-}
-.mint-reagent-editor__table-row {
-  display: flex;
-  align-items: center;
-  padding: 0.25rem 0.5rem;
-  border-bottom: 1px solid var(--border-color);
-  border-left: 2px solid transparent;
-  transition: background-color 0.1s ease, border-left-color 0.1s ease;
-}
-.mint-reagent-editor__table-row:last-child {
-  border-bottom: none;
-}
-.mint-reagent-editor__table-row:hover {
-  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 5%, var(--bg-secondary));
-  border-left-color: var(--reagent-color, var(--color-primary));
-}
-.mint-reagent-editor__table-col--level {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  align-items: baseline;
-  gap: 0.25rem;
-}
-.mint-reagent-editor__table-col--reps {
-  width: 5.5rem;
-  flex-shrink: 0;
-}
-.mint-reagent-editor__table-col--action {
-  width: 1.75rem;
-  flex-shrink: 0;
-  display: flex;
-  justify-content: center;
-}
-.mint-reagent-editor__level-value {
-  font-family: 'Fira Code', monospace;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.mint-reagent-editor__level-unit {
-  font-family: 'Fira Code', monospace;
-  font-size: 0.6875rem;
-  color: var(--text-muted);
-}
-.mint-reagent-editor__remove-level-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.375rem;
-  height: 1.375rem;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--text-muted);
-  border: none;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.1s ease, color 0.1s ease, background-color 0.1s ease;
-}
-.mint-reagent-editor__table-row:hover .mint-reagent-editor__remove-level-btn {
-  opacity: 1;
-}
-.mint-reagent-editor__remove-level-btn:hover {
-  color: var(--mint-error);
-  background-color: var(--mint-error-bg);
-}
-
-/* Empty state */
-.mint-reagent-editor__empty {
-  text-align: center;
-  padding: 1.25rem 0.75rem;
-  font-size: 0.8125rem;
-  color: var(--text-muted);
-  font-style: italic;
-}
-
-/* Position summary — reagent-tinted background */
-.mint-reagent-editor__summary {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.625rem;
-  padding: 0.625rem 1rem;
-  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 6%, var(--bg-tertiary));
-  border-bottom: 1px solid var(--border-color);
-}
-.mint-reagent-editor__summary-item {
-  display: flex;
-  align-items: baseline;
-  gap: 0.25rem;
-}
-.mint-reagent-editor__summary-value {
-  font-family: 'Fira Code', monospace;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--reagent-color, var(--text-primary));
-}
-.mint-reagent-editor__summary-label {
-  font-size: 0.6875rem;
-  color: var(--text-muted);
-}
-.mint-reagent-editor__summary-dot {
-  width: 3px;
-  height: 3px;
-  border-radius: 50%;
-  background-color: var(--reagent-color, var(--text-muted));
-  opacity: 0.5;
-  flex-shrink: 0;
-}
-
-/* Overflow warning */
-.mint-reagent-editor__summary--overflow {
-  background-color: var(--mint-warning-bg);
-}
-.mint-reagent-editor__summary--overflow .mint-reagent-editor__summary-value {
-  color: var(--mint-warning-hover);
-}
-.mint-reagent-editor__summary--overflow .mint-reagent-editor__summary-dot {
-  background-color: var(--mint-warning);
-}
-.mint-reagent-editor__summary-warning {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  color: var(--mint-warning-hover);
-  margin-left: 0.25rem;
-}
-
-/* Footer */
-.mint-reagent-editor__footer {
-  padding: 0.75rem 1rem;
-}
-.mint-reagent-editor__footer .mint-button {
-  width: 100%;
-}
-/* SampleHierarchyTree Component Styles */
-.mint-sample-tree {
-  font-size: 0.875rem;
-}
-.mint-sample-tree--sm {
-  font-size: 0.75rem;
-}
-.mint-sample-tree--lg {
-  font-size: 1rem;
-}
-
-/* Node */
-.mint-sample-tree__node {
-  user-select: none;
-}
-
-/* Node header (clickable row) */
-.mint-sample-tree__node-header {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.375rem 0.5rem;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-.mint-sample-tree__node-header:hover {
-  background-color: var(--bg-hover);
-}
-.mint-sample-tree__node--selected > .mint-sample-tree__node-header {
-  background-color: rgba(59, 130, 246, 0.1);
-}
-.mint-sample-tree--sm .mint-sample-tree__node-header {
-  padding: 0.25rem 0.375rem;
-  gap: 0.25rem;
-}
-.mint-sample-tree--lg .mint-sample-tree__node-header {
-  padding: 0.5rem 0.625rem;
-  gap: 0.5rem;
-}
-
-/* Toggle button */
-.mint-sample-tree__toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: var(--radius-sm);
-  color: var(--text-muted);
-  cursor: pointer;
-  transition: color 0.15s ease, transform 0.15s ease;
-  flex-shrink: 0;
-}
-.mint-sample-tree__toggle:hover {
-  color: var(--text-primary);
-  background-color: var(--bg-tertiary);
-}
-.mint-sample-tree__toggle svg {
-  width: 0.875rem;
-  height: 0.875rem;
-  transition: transform 0.15s ease;
-}
-.mint-sample-tree__node--expanded > .mint-sample-tree__node-header .mint-sample-tree__toggle svg {
-  transform: rotate(90deg);
-}
-.mint-sample-tree--sm .mint-sample-tree__toggle {
-  width: 1rem;
-  height: 1rem;
-}
-.mint-sample-tree--sm .mint-sample-tree__toggle svg {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-.mint-sample-tree--lg .mint-sample-tree__toggle {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.mint-sample-tree--lg .mint-sample-tree__toggle svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-/* Placeholder for leaf nodes (no toggle) */
-.mint-sample-tree__toggle-placeholder {
-  width: 1.25rem;
-  flex-shrink: 0;
-}
-.mint-sample-tree--sm .mint-sample-tree__toggle-placeholder {
-  width: 1rem;
-}
-.mint-sample-tree--lg .mint-sample-tree__toggle-placeholder {
-  width: 1.5rem;
-}
-
-/* Icon */
-.mint-sample-tree__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
-  flex-shrink: 0;
-}
-.mint-sample-tree__icon svg {
-  width: 1rem;
-  height: 1rem;
-}
-.mint-sample-tree--sm .mint-sample-tree__icon {
-  width: 1rem;
-  height: 1rem;
-}
-.mint-sample-tree--sm .mint-sample-tree__icon svg {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-.mint-sample-tree--lg .mint-sample-tree__icon {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.mint-sample-tree--lg .mint-sample-tree__icon svg {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-/* Icon colors by type */
-.mint-sample-tree__icon--study {
-  color: var(--text-muted);
-}
-.mint-sample-tree__icon--experiment {
-  color: var(--color-primary);
-}
-.mint-sample-tree__icon--plate {
-  color: var(--mint-info);
-}
-.mint-sample-tree__icon--sample {
-  color: var(--mint-success);
-}
-.mint-sample-tree__icon--cell_line {
-  color: var(--color-purple);
+.mint-reagent-editor__add-btn:active:not(:disabled) {
+  transform: scale(0.92);
 }
-.mint-sample-tree__icon--passage {
-  color: var(--text-secondary);
+.mint-reagent-editor__add-btn:disabled {
+  opacity: var(--mint-disabled-opacity);
+  cursor: not-allowed;
 }
-.mint-sample-tree__icon--clone {
-  color: var(--mint-warning);
+
+/* Level table */
+.mint-reagent-editor__table {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  overflow: hidden;
+  max-height: 14rem;
+  display: flex;
+  flex-direction: column;
 }
-.mint-sample-tree__icon--treatment {
-  color: var(--color-cta);
+.mint-reagent-editor__table-body {
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) transparent;
 }
-.mint-sample-tree__icon--folder {
+.mint-reagent-editor__table-header {
+  display: flex;
+  align-items: center;
+  padding: 0.375rem 0.5rem;
+  background-color: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-color);
+}
+.mint-reagent-editor__table-header .mint-reagent-editor__table-col {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
   color: var(--text-muted);
 }
-.mint-sample-tree__icon--custom {
-  color: var(--text-secondary);
+.mint-reagent-editor__table-row {
+  display: flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  border-bottom: 1px solid var(--border-color);
+  border-left: 2px solid transparent;
+  transition: background-color 0.1s ease, border-left-color 0.1s ease;
 }
-
-/* Label */
-.mint-sample-tree__label {
+.mint-reagent-editor__table-row:last-child {
+  border-bottom: none;
+}
+.mint-reagent-editor__table-row:hover {
+  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 5%, var(--bg-secondary));
+  border-left-color: var(--reagent-color, var(--color-primary));
+}
+.mint-reagent-editor__table-col--level {
   flex: 1;
   min-width: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
+}
+.mint-reagent-editor__table-col--reps {
+  width: 5.5rem;
+  flex-shrink: 0;
+}
+.mint-reagent-editor__table-col--action {
+  width: 1.75rem;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+}
+.mint-reagent-editor__level-value {
+  font-family: 'Fira Code', monospace;
+  font-size: 0.8125rem;
+  font-weight: 500;
   color: var(--text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-/* Badge */
-.mint-sample-tree__badge {
-  display: inline-flex;
+.mint-reagent-editor__level-unit {
+  font-family: 'Fira Code', monospace;
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+}
+.mint-reagent-editor__remove-level-btn {
+  display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 1.25rem;
-  padding: 0.125rem 0.375rem;
-  font-size: 0.625rem;
-  font-weight: 600;
-  border-radius: 9999px;
-  flex-shrink: 0;
-}
-.mint-sample-tree--sm .mint-sample-tree__badge {
-  min-width: 1rem;
-  padding: 0.0625rem 0.25rem;
-  font-size: 0.5rem;
-}
-.mint-sample-tree--lg .mint-sample-tree__badge {
-  min-width: 1.5rem;
-  padding: 0.125rem 0.5rem;
-  font-size: 0.75rem;
-}
-.mint-sample-tree__badge--default {
-  background-color: var(--bg-tertiary);
-  color: var(--text-secondary);
-}
-.mint-sample-tree__badge--success {
-  background-color: var(--mint-success-bg);
-  color: var(--mint-success);
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-muted);
+  border: none;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.1s ease, color 0.1s ease, background-color 0.1s ease;
 }
-.mint-sample-tree__badge--warning {
-  background-color: var(--mint-warning-bg);
-  color: var(--mint-warning);
+.mint-reagent-editor__table-row:hover .mint-reagent-editor__remove-level-btn {
+  opacity: 1;
 }
-.mint-sample-tree__badge--error {
-  background-color: var(--mint-error-bg);
+.mint-reagent-editor__remove-level-btn:hover {
   color: var(--mint-error);
+  background-color: var(--mint-error-bg);
 }
 
-/* Children container */
-.mint-sample-tree__children {
-  margin-left: 1.25rem;
-  padding-left: 0.75rem;
-  border-left: 1px solid var(--border-color);
-  overflow: hidden;
-}
-.mint-sample-tree--sm .mint-sample-tree__children {
-  margin-left: 1rem;
-  padding-left: 0.5rem;
-}
-.mint-sample-tree--lg .mint-sample-tree__children {
-  margin-left: 1.5rem;
-  padding-left: 1rem;
+/* Empty state */
+.mint-reagent-editor__empty {
+  text-align: center;
+  padding: 1.25rem 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+  font-style: italic;
 }
 
-/* Animation */
-.mint-sample-tree__children--entering {
-  animation: mint-tree-expand 0.15s ease-out;
+/* Position summary — reagent-tinted background */
+.mint-reagent-editor__summary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.625rem;
+  padding: 0.625rem 1rem;
+  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 6%, var(--bg-tertiary));
+  border-bottom: 1px solid var(--border-color);
 }
-.mint-sample-tree__children--leaving {
-  animation: mint-tree-collapse 0.15s ease-out forwards;
+.mint-reagent-editor__summary-item {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
 }
-@keyframes mint-tree-expand {
-from {
-    opacity: 0;
-    max-height: 0;
+.mint-reagent-editor__summary-value {
+  font-family: 'Fira Code', monospace;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--reagent-color, var(--text-primary));
 }
-to {
-    opacity: 1;
-    max-height: 1000px;
+.mint-reagent-editor__summary-label {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+}
+.mint-reagent-editor__summary-dot {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background-color: var(--reagent-color, var(--text-muted));
+  opacity: 0.5;
+  flex-shrink: 0;
 }
+
+/* Overflow warning */
+.mint-reagent-editor__summary--overflow {
+  background-color: var(--mint-warning-bg);
 }
-@keyframes mint-tree-collapse {
-from {
-    opacity: 1;
-    max-height: 1000px;
+.mint-reagent-editor__summary--overflow .mint-reagent-editor__summary-value {
+  color: var(--mint-warning-hover);
 }
-to {
-    opacity: 0;
-    max-height: 0;
+.mint-reagent-editor__summary--overflow .mint-reagent-editor__summary-dot {
+  background-color: var(--mint-warning);
 }
+.mint-reagent-editor__summary-warning {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--mint-warning-hover);
+  margin-left: 0.25rem;
 }
 
-/* Empty state */
-.mint-sample-tree__empty {
-  padding: 1rem;
-  text-align: center;
-  color: var(--text-muted);
-}
-.mint-sample-tree__empty-icon {
-  width: 2rem;
-  height: 2rem;
-  margin: 0 auto 0.5rem;
-  opacity: 0.5;
+/* Footer */
+.mint-reagent-editor__footer {
+  padding: 0.75rem 1rem;
 }
-.mint-sample-tree__empty-text {
-  font-size: 0.875rem;
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  padding: 0 !important;
+.mint-reagent-editor__footer .mint-button {
+  width: 100%;
 }
 /* ProtocolStepEditor Component Styles */
 .mint-protocol-editor {
@@ -17987,6 +18004,11 @@ to { transform: rotate(360deg);
   --text-primary: #1E293B;
   --text-secondary: #64748B;
   --text-muted: #94A3B8;
+  /* De-emphasized label for low-emphasis interactive controls (secondary/ghost
+     buttons). A true dark gray — softer than --text-primary's near-black — that
+     still clears WCAG AA (4.5:1) on the secondary hover surface (--bg-tertiary),
+     where --text-secondary would drop to ~4.35:1. */
+  --text-secondary-strong: #475569;
 
   /* Brand colors */
   --color-primary: #6366F1;
@@ -18093,6 +18115,9 @@ html.dark {
   --text-primary: #F8FAFC;
   --text-secondary: #94A3B8;
   --text-muted: #64748B;
+  /* Dark-mode analog: soft light-gray instead of near-white, AA-safe (7.2:1)
+     on the dark secondary hover surface (--bg-tertiary #334155). */
+  --text-secondary-strong: #CBD5E1;
 
   /* Scrollbar */
   --scrollbar-track: #1E293B;
@@ -19876,10 +19901,11 @@ code, pre {
 }
 .mint-button--secondary {
   background-color: var(--bg-secondary);
-  color: var(--text-primary);
+  color: var(--text-secondary-strong);
   border: 1px solid var(--border-color);
-  /* Intentionally tighter + fainter than the colored variants —
-     secondary shouldn't "float" the way filled buttons do. */
+  /* Secondary is lower-emphasis through surface, border, and shadow, but keeps
+     medium label weight so it still reads as an actionable button. */
+  font-weight: 500;
   box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
 }
 .mint-button--secondary:hover:not(.mint-button--disabled) {
@@ -19915,7 +19941,9 @@ code, pre {
 }
 .mint-button--ghost {
   background-color: transparent;
-  color: var(--text-primary);
+  color: var(--text-secondary-strong);
+  /* Lowest-emphasis variant: regular (400) weight, below secondary. */
+  font-weight: 400;
 }
 .mint-button--ghost:hover:not(.mint-button--disabled) {
   background-color: var(--bg-tertiary);
@@ -19924,8 +19952,14 @@ code, pre {
 .mint-button--sm {
   padding: 0.375rem 0.75rem;
   font-size: 0.875rem;
+  /* Small buttons live in dense/secondary contexts — regular (400) weight
+     keeps the compact label from reading too heavy. Applies to all variants. */
+  font-weight: 400;
   min-height: var(--form-height-sm);
 }
+.mint-button--secondary.mint-button--sm {
+  font-weight: 500;
+}
 .mint-button--md {
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
@@ -22278,6 +22312,9 @@ code, pre {
 }
 .mint-modal__close {
   flex-shrink: 0;
+  /* Always pin the close affordance to the right edge of the header, even when
+     there is no title/subtitle (no flex-1 header-text to push it over). */
+  margin-left: auto;
   width: 1.75rem;
   height: 1.75rem;
   padding: 0;
@@ -24612,6 +24649,10 @@ html.dark .mint-toast__item .mint-toast__message {
 .mint-sample-selector__expand-btn:hover {
   background-color: var(--bg-hover);
 }
+.mint-sample-selector__expand-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
 .mint-sample-selector__expand-icon {
   width: 0.875rem;
   height: 0.875rem;
@@ -24716,6 +24757,10 @@ html.dark .mint-toast__item .mint-toast__message {
   transform: scale(1.25);
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(0, 0, 0, 0.06);
 }
+.mint-sample-selector__color-dot--clickable:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
 /* Count Badge */
 .mint-sample-selector__count-badge {
   font-size: 0.625rem;
@@ -24745,6 +24790,12 @@ html.dark .mint-toast__item .mint-toast__message {
   background-color: var(--mint-error-bg);
   color: var(--mint-error);
 }
+/* Reveal the hover-hidden delete button when reached by keyboard, and ring it. */
+.mint-sample-selector__delete-btn:focus-visible {
+  outline: none;
+  opacity: 1;
+  box-shadow: var(--focus-ring);
+}
 .mint-sample-selector__delete-btn--hidden {
   opacity: 0;
 }
@@ -25822,7 +25873,7 @@ html.dark .mint-toast__item .mint-toast__message {
   font-size: 0.8125rem;
   color: var(--mint-error);
   background: var(--mint-error-bg);
-  border: 1px solid rgba(239, 68, 68, 0.3);
+  border: 1px solid var(--mint-error-border);
   border-radius: var(--radius);
 }
 /* --- Experiment mode --- */
@@ -25842,7 +25893,7 @@ html.dark .mint-toast__item .mint-toast__message {
 }
 .mint-auto-group__experiment-error {
   padding: 1.5rem;
-  border: 1px solid rgba(239, 68, 68, 0.3);
+  border: 1px solid var(--mint-error-border);
   border-radius: var(--radius-md);
   background: var(--mint-error-bg);
   font-size: 0.8125rem;
@@ -25873,7 +25924,7 @@ html.dark .mint-toast__item .mint-toast__message {
 .mint-auto-group__link-btn:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 1px;
-  border-radius: 2px;
+  border-radius: var(--radius-sm);
 }
 .mint-auto-group__experiment-loaded {
   padding: 1.5rem;
@@ -26188,14 +26239,10 @@ html.dark .mint-toast__item .mint-toast__message {
 .mint-auto-group__preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
 .mint-auto-group__preview-panel { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
 .mint-auto-group__preview-panel h4 { margin: 0 0 10px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
-.mint-auto-group__preview-group { border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; }
-.mint-auto-group__preview-group[open] { background: var(--bg-secondary); }
-.mint-auto-group__preview-group summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; padding: 0.5rem 0.875rem; }
-.mint-auto-group__preview-group[open] summary { border-bottom: 1px solid var(--border); }
-.mint-auto-group__preview-dot { width: 10px; height: 10px; border-radius: 9999px; flex-shrink: 0; }
-.mint-auto-group__preview-count { margin-left: auto; font-family: 'Fira Code', monospace; font-size: 12px; color: var(--text-secondary); background: var(--bg-primary); border: 1px solid var(--border); padding: 2px 8px; border-radius: 9999px; }
-.mint-auto-group__preview-samples { display: flex; flex-wrap: wrap; gap: 6px; padding: 0.5rem 0.875rem 0.625rem; }
-.mint-auto-group__preview-sample { font-family: 'Fira Code', monospace; font-size: 11.5px; color: var(--text-primary); background: var(--bg-primary); border: 1px solid var(--border); padding: 3px 8px; border-radius: 9999px; }
+/* Nested experimental groups render as a collapsible SampleHierarchyTree; cap
+   its height so a large batch scrolls inside the panel instead of the modal. */
+.mint-auto-group__preview-tree { max-height: 320px; overflow-y: auto; }
+.mint-auto-group__preview-empty { margin: 0; font-size: 13px; color: var(--text-muted); }
 .mint-auto-group__qc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
 .mint-auto-group__qc-chip { background: var(--mint-warning-bg); color: #92400E; border: 1px solid var(--mint-warning-border); padding: 4px 10px; border-radius: 9999px; font-size: 12px; }
 .mint-auto-group__fingerprint { margin-top: 14px; }