@morscherlab/mint-sdk 1.4.0-beta.1 → 1.4.0-beta.11

package/src/styles/components/progress-bar.css

@@ -22,13 +22,13 @@
 }
 
 /* ========================================================================
-   Rail variant (default) — single filled track, pill ends
+   Rail variant (default) — single filled track, square-ish ends (v2: no capsules)
    ======================================================================== */
 
 .mint-progress__track {
   width: 100%;
   background-color: var(--bg-tertiary);
-  border-radius: 9999px; /* pill ends — spec */
+  border-radius: var(--radius-sm);
   overflow: hidden;
 }
 
@@ -38,7 +38,7 @@
 
 .mint-progress__bar {
   height: 100%;
-  border-radius: 9999px;
+  border-radius: var(--radius-sm);
   transition: width 0.3s ease;
 }
 

package/src/styles/components/protocol-step-editor.css

@@ -72,7 +72,7 @@
   padding: 0.75rem;
   background-color: var(--bg-secondary);
   border: 1px solid var(--border-color);
-  border-radius: var(--radius);
+  border-radius: var(--radius-md);
 }
 
 .mint-protocol-editor__preview-icon {
@@ -81,8 +81,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--bg-tertiary);
-  border-radius: 9999px;
   flex-shrink: 0;
 }
 

package/src/styles/components/resource-card.css

@@ -299,9 +299,9 @@
   gap: 0.25rem;
   padding: 0.375rem 0.75rem;
   background-color: var(--color-primary);
-  color: white;
+  color: var(--text-on-accent);
   border: none;
-  border-radius: var(--radius);
+  border-radius: var(--radius-md);
   font-size: 0.8125rem;
   font-weight: 500;
   cursor: pointer;

package/src/styles/components/resource-picker-list.css

@@ -1,13 +1,12 @@
 /* ResourcePickerList: shared list for ExperimentSelectorModal and ArtifactSelectorModal.
-   No frame of its own (the modal is the card); rows are inset and rounded, groups are
-   pinned bars. */
+   No frame of its own (the modal is the card); rows are inset and rounded. */
 
-/* The modal is the only card: the list runs edge to edge, and the toolbar, group
-   bars and row text keep the modal's 1.25rem gutter themselves. */
+/* The modal is the only card: the list runs edge to edge, and the toolbar and
+   row text keep the modal's 1.25rem gutter themselves. */
 .mint-modal__body:has(> .mint-resource-picker) {
   padding: 0;
 }
-.mint-modal__container:has(.mint-resource-picker) .mint-modal__header {
+.mint-modal__container:has(.mint-resource-picker:not(.mint-experiment-selector)) .mint-modal__header {
   border-bottom: none;
   padding-bottom: 0.75rem;
 }
@@ -43,57 +42,6 @@
   scrollbar-width: thin;
 }
 
-.mint-resource-picker__group {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-shrink: 0;
-  width: 100%;
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  height: 30px;
-  padding: 0 1.25rem;
-  border: 0;
-  border-bottom: 1px solid var(--border-light);
-  background-color: var(--bg-primary);
-  font-family: inherit;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-secondary);
-  text-align: left;
-  cursor: pointer;
-  transition: background-color 150ms ease;
-}
-.mint-resource-picker__group:hover {
-  background-color: var(--bg-hover);
-}
-.mint-resource-picker__group:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--color-primary);
-}
-.mint-resource-picker__chevron {
-  width: 12px;
-  height: 12px;
-  flex-shrink: 0;
-  transition: transform 150ms ease;
-}
-.mint-resource-picker__group[aria-expanded='false'] .mint-resource-picker__chevron {
-  transform: rotate(-90deg);
-}
-.mint-resource-picker__group-label {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.mint-resource-picker__group-count {
-  font: 11px var(--font-mono);
-  font-variant-numeric: tabular-nums;
-  color: var(--text-muted);
-}
-
 .mint-resource-picker__row {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
@@ -108,7 +56,7 @@
   padding: 10px 12px;
   border-radius: var(--radius-md);
   cursor: pointer;
-  transition: background-color 150ms ease;
+  transition: background-color var(--mint-transition);
 }
 .mint-resource-picker__row:hover {
   background-color: var(--bg-hover);
@@ -116,6 +64,7 @@
 .mint-resource-picker__row--selected,
 .mint-resource-picker__row--selected:hover {
   background-color: var(--color-primary-soft);
+  box-shadow: inset 2px 0 0 var(--color-primary);
 }
 /* Keyboard focus is the ring alone; it never adds a fill or a bar. */
 .mint-resource-picker__row--active {

package/src/styles/components/sample-hierarchy-tree.css

@@ -31,7 +31,7 @@
   padding: 0 0.5rem 0 0.25rem;
   border-radius: var(--radius);
   cursor: pointer;
-  transition: background-color 0.15s ease;
+  transition: background-color var(--mint-transition);
 }
 
 .mint-sample-tree__node-header:hover {
@@ -81,7 +81,7 @@
   border-radius: var(--radius-sm);
   color: var(--text-secondary);
   cursor: pointer;
-  transition: color 0.15s ease, transform 0.15s ease;
+  transition: color var(--mint-transition), transform var(--mint-transition);
   flex-shrink: 0;
 }
 
@@ -98,7 +98,7 @@
 .mint-sample-tree__toggle svg {
   width: 0.75rem;
   height: 0.75rem;
-  transition: transform 0.15s ease;
+  transition: transform var(--mint-transition);
 }
 
 .mint-sample-tree__node--expanded > .mint-sample-tree__node-header .mint-sample-tree__toggle svg {
@@ -199,7 +199,7 @@
   padding: 0.125rem 0.375rem;
   font-size: 0.6875rem;
   font-weight: 600;
-  border-radius: 9999px;
+  border-radius: var(--radius);
   flex-shrink: 0;
 }
 

package/src/styles/components/sample-selector.css

@@ -3,20 +3,62 @@
 .mint-sample-selector {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.5rem;
   height: 100%;
-  /* No padding/background/border - let parent container provide styling */
+  box-sizing: border-box;
+  padding-bottom: 0.5rem;
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  background-color: var(--bg-card);
+}
+
+/* Card header: "Samples · N selected" and the grouping actions */
+.mint-sample-selector__header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 2.5rem;
+  padding: 0.375rem 0.375rem 0.375rem 0.75rem;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--border-light);
+  font-size: 0.8125rem;
+}
+
+.mint-sample-selector__title {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.mint-sample-selector__selected {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+
+.mint-sample-selector__header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  margin-left: auto;
+}
+
+.mint-sample-selector__grouped,
+.mint-sample-selector__flat,
+.mint-sample-selector__state {
+  padding: 0 0.5rem;
 }
 
-/* Select-all header row (7c): a table header, not a button */
+/* Select-all header row (7c): a table header, not a button. The margin matches the
+   body inset above, so its columns line up with the tree's. */
 .mint-sample-selector__select-all {
   display: flex;
   align-items: center;
   gap: 0.625rem;
   min-height: 2.25rem;
+  margin: 0 0.5rem;
   padding: 0 0.75rem;
   border-bottom: 1px solid var(--border-color);
-  background-color: var(--bg-primary);
   cursor: pointer;
 }
 
@@ -24,21 +66,21 @@
    group checkboxes (header pad + chevron + gap) and its count over the group counts
    (scroll gutter + header pad + delete button + gap). */
 .mint-sample-selector__select-all--grouped {
-  padding-left: 1.875rem;
-  padding-right: 2.375rem;
+  padding-left: 1.75rem;
+  padding-right: 2.25rem;
 }
 
 .mint-sample-selector__select-all-label {
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   font-weight: 500;
-  color: var(--text-secondary);
+  color: var(--text-primary);
 }
 
 .mint-sample-selector__select-all-count {
   margin-left: auto;
   font-family: var(--font-mono);
-  font-size: 0.75rem;
-  color: var(--text-primary);
+  font-size: 0.6875rem;
+  color: var(--text-muted);
   font-variant-numeric: tabular-nums;
 }
 
@@ -47,42 +89,6 @@
   flex-shrink: 0;
 }
 
-/* Action Buttons Row */
-.mint-sample-selector__actions {
-  position: relative;
-}
-
-.mint-sample-selector__actions-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 0.375rem;
-  min-width: 0;
-}
-
-/* Layout only; BaseButton sm owns size, padding and type. */
-.mint-sample-selector__action-btn {
-  width: 100%;
-  min-width: 0; /* Allow labels to ellipsize inside tight containers */
-}
-
-.mint-sample-selector__action-btn--reset {
-  width: auto;
-}
-
-.mint-sample-selector__action-icon {
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-}
-
-.mint-sample-selector__action-label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 /* Grouped View */
 .mint-sample-selector__grouped {
   display: flex;
@@ -120,7 +126,7 @@
   border-radius: var(--radius-sm);
   color: var(--text-muted);
   cursor: pointer;
-  transition: background-color 0.15s ease;
+  transition: background-color var(--mint-transition);
 }
 
 .mint-sample-selector__expand-btn:hover {
@@ -182,10 +188,11 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.375rem 0.5rem;
-  border-radius: var(--radius-sm);
+  min-height: 1.75rem;
+  padding: 0 0.375rem;
+  border-radius: var(--radius-md);
   cursor: grab;
-  transition: background-color 0.15s ease, box-shadow 0.12s ease, opacity 0.12s ease;
+  transition: background-color var(--mint-transition), box-shadow var(--mint-transition), opacity var(--mint-transition);
 }
 
 .mint-sample-selector__major-header:active {
@@ -217,7 +224,7 @@
   height: 0.875rem;
   color: var(--text-muted);
   flex-shrink: 0;
-  transition: transform 0.2s ease;
+  transition: transform var(--mint-transition);
 }
 
 .mint-sample-selector__chevron--small {
@@ -246,14 +253,13 @@
 
 .mint-sample-selector__color-dot--clickable {
   cursor: pointer;
-  transition: transform 0.15s ease;
+  transition: box-shadow var(--mint-transition);
   border: none;
   padding: 0;
   background: none;
 }
 
 .mint-sample-selector__color-dot--clickable:hover {
-  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);
 }
 
@@ -267,7 +273,7 @@
 .mint-sample-selector__count-badge {
   font-family: var(--font-mono);
   font-size: 0.6875rem;
-  color: var(--text-secondary);
+  color: var(--text-muted);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
@@ -283,7 +289,7 @@
   border-radius: var(--radius-sm);
   color: var(--mint-error);
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: all var(--mint-transition);
 }
 
 .mint-sample-selector__delete-btn:hover {
@@ -317,7 +323,7 @@
 .mint-sample-selector__sub-group {
   margin-bottom: 0.125rem;
   border-radius: var(--radius);
-  transition: background-color 0.15s ease, box-shadow 0.15s ease;
+  transition: background-color var(--mint-transition), box-shadow var(--mint-transition);
 }
 
 .mint-sample-selector__sub-group--drag-over {
@@ -329,10 +335,11 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.25rem 0.5rem;
-  border-radius: var(--radius-sm);
+  min-height: 1.75rem;
+  padding: 0 0.375rem;
+  border-radius: var(--radius-md);
   cursor: grab;
-  transition: background-color 0.15s ease, box-shadow 0.12s ease, opacity 0.12s ease;
+  transition: background-color var(--mint-transition), box-shadow var(--mint-transition), opacity var(--mint-transition);
 }
 
 .mint-sample-selector__sub-header:active {
@@ -369,9 +376,9 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.125rem 0.5rem;
-  border-radius: var(--radius-sm);
-  transition: background-color 0.15s ease, opacity 0.15s ease;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-md);
+  transition: background-color var(--mint-transition), opacity var(--mint-transition);
   cursor: grab;
 }
 
@@ -399,7 +406,7 @@
   flex-shrink: 0;
   color: var(--text-muted);
   opacity: 0;
-  transition: opacity 0.15s ease;
+  transition: opacity var(--mint-transition);
   cursor: grab;
 }
 
@@ -425,7 +432,7 @@
   color: var(--mint-warning);
   cursor: pointer;
   opacity: 0;
-  transition: all 0.15s ease;
+  transition: all var(--mint-transition);
 }
 
 .mint-sample-selector__remove-btn:hover {
@@ -464,10 +471,11 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.375rem 0.5rem;
-  border-radius: var(--radius-sm);
+  min-height: 1.75rem;
+  padding: 0 0.375rem;
+  border-radius: var(--radius-md);
   cursor: pointer;
-  transition: background-color 0.15s ease;
+  transition: background-color var(--mint-transition);
 }
 
 .mint-sample-selector__ungrouped-header:hover {
@@ -484,11 +492,12 @@
 .mint-sample-selector__ungrouped-count {
   /* Joins the group count column: the groups' delete button + gap and the tree's scroll gutter. */
   margin-right: 1.875rem;
+  font-family: var(--font-mono);
   font-size: 0.6875rem;
   padding: 0.125rem 0.375rem;
   background-color: var(--bg-tertiary);
   color: var(--text-secondary);
-  border-radius: 9999px;
+  border-radius: var(--radius);
   font-variant-numeric: tabular-nums;
 }
 
@@ -543,11 +552,11 @@
 
 .mint-sample-selector__search-icon {
   position: absolute;
-  left: 0.75rem;
+  left: 0.625rem;
   top: 50%;
   transform: translateY(-50%);
-  width: 1rem;
-  height: 1rem;
+  width: 0.875rem;
+  height: 0.875rem;
   color: var(--text-muted);
   pointer-events: none;
 }
@@ -555,18 +564,24 @@
 .mint-sample-selector__search-input {
   width: 100%;
   box-sizing: border-box;
-  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
-  font-size: 0.875rem;
+  height: var(--form-height-md);
+  padding: 0 0.625rem 0 2rem;
+  font-family: inherit;
+  font-size: 0.8125rem;
   color: var(--text-primary);
-  background-color: var(--bg-tertiary);
+  background-color: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   outline: none;
-  transition: border-color 0.15s ease;
+  transition: border-color var(--mint-transition), box-shadow var(--mint-transition);
+}
+
+.mint-sample-selector__search-input:hover {
+  border-color: var(--border-strong);
 }
 
 .mint-sample-selector__search-input:focus-visible {
-  box-shadow: var(--focus-ring);
+  box-shadow: var(--focus-ring-soft);
   border-color: var(--color-primary);
 }
 
@@ -585,9 +600,10 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.375rem 0.5rem;
-  border-radius: var(--radius-sm);
-  transition: background-color 0.15s ease;
+  min-height: 1.75rem;
+  padding: 0 0.375rem;
+  border-radius: var(--radius-md);
+  transition: background-color var(--mint-transition);
 }
 
 .mint-sample-selector__flat-item:hover {

package/src/styles/components/schedule-calendar.css

@@ -29,7 +29,7 @@
   border: none;
   cursor: pointer;
   color: var(--text-muted);
-  transition: background-color 0.15s ease, color 0.15s ease;
+  transition: background-color var(--mint-transition), color var(--mint-transition);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -54,7 +54,7 @@
   color: var(--text-primary);
   font-size: 0.75rem;
   font-weight: 500;
-  transition: background-color 0.15s ease, border-color 0.15s ease;
+  transition: background-color var(--mint-transition), border-color var(--mint-transition);
   margin-left: 0.5rem;
 }
 
@@ -85,7 +85,7 @@
   color: var(--text-muted);
   font-size: 0.75rem;
   font-weight: 500;
-  transition: background-color 0.15s ease, color 0.15s ease;
+  transition: background-color var(--mint-transition), color var(--mint-transition);
 }
 
 .mint-schedule__view-btn:not(:last-child) {
@@ -99,12 +99,12 @@
 
 .mint-schedule__view-btn--active {
   background-color: var(--color-primary);
-  color: white;
+  color: var(--text-on-accent);
 }
 
 .mint-schedule__view-btn--active:hover {
   background-color: var(--color-primary);
-  color: white;
+  color: var(--text-on-accent);
 }
 
 /* Body (week/day view) */
@@ -202,7 +202,7 @@
 
 .mint-schedule__day-header--today .mint-schedule__day-header-number {
   background-color: var(--color-primary);
-  color: white;
+  color: var(--text-on-accent);
 }
 
 .mint-schedule__slot {
@@ -239,7 +239,7 @@
   color: var(--text-primary);
   background-color: color-mix(in srgb, var(--event-color) 16%, var(--bg-card));
   border: 1px solid color-mix(in srgb, var(--event-color) 35%, transparent);
-  transition: box-shadow 0.15s ease;
+  transition: box-shadow var(--mint-transition);
 }
 
 .mint-schedule__event:hover {
@@ -395,7 +395,7 @@
   border-right: 1px solid var(--border-color);
   padding: 0.25rem;
   cursor: pointer;
-  transition: background-color 0.15s ease;
+  transition: background-color var(--mint-transition);
 }
 
 .mint-schedule__month-cell:nth-child(7n) {

package/src/styles/components/searchable-select.css

@@ -6,7 +6,7 @@
   width: 100%;
   min-height: var(--form-height-md);
   gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
+  padding: 0.375rem 0.75rem;
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   background: var(--bg-secondary);
@@ -14,11 +14,11 @@
   font: inherit;
   font-size: 0.8125rem;
   cursor: pointer;
-  transition: border-color 150ms ease, box-shadow 150ms ease;
+  transition: border-color var(--mint-transition), box-shadow var(--mint-transition);
 }
 
-.mint-searchable-select--sm .mint-searchable-select__trigger { min-height: var(--form-height-sm); padding: 0.3rem 0.5rem; font-size: 0.75rem; }
-.mint-searchable-select--lg .mint-searchable-select__trigger { min-height: var(--form-height-lg); padding: 0.75rem 1rem; font-size: 1rem; }
+.mint-searchable-select--sm .mint-searchable-select__trigger { min-height: var(--form-height-sm); padding: 0.25rem 0.5rem; font-size: 0.75rem; }
+.mint-searchable-select--lg .mint-searchable-select__trigger { min-height: var(--form-height-lg); padding: 0.5rem 1rem; font-size: 1rem; }
 .mint-searchable-select__trigger:hover:not(:disabled) { border-color: var(--_field-border-hover); }
 .mint-searchable-select__trigger:focus-visible,
 .mint-searchable-select__trigger[aria-expanded='true'] { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring-soft); }
@@ -41,17 +41,17 @@
   overflow: hidden;
 }
 
-.mint-searchable-select__search-wrap { position: relative; margin: 0 0 0.25rem; padding: 0.25rem 0.25rem 0.5rem; border-bottom: 1px solid var(--border-light); }
-.mint-searchable-select__search-wrap svg { position: absolute; top: calc(50% - 0.125rem); left: 0.75rem; width: 0.875rem; height: 0.875rem; color: var(--text-secondary); transform: translateY(-50%); pointer-events: none; }
-.mint-searchable-select__search { width: 100%; min-height: var(--form-height-sm); padding: 0.375rem 0.625rem 0.375rem 1.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-size: 0.8125rem; box-sizing: border-box; transition: border-color 150ms ease, box-shadow 150ms ease; }
-.mint-searchable-select__search:hover { border-color: var(--_field-border-hover); }
-.mint-searchable-select__search:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring-soft); }
+.mint-searchable-select__search-wrap { position: relative; margin: 0 0 0.25rem; padding: 0 0 0.25rem; border-bottom: 1px solid var(--border-light); }
+.mint-searchable-select__search-wrap svg { position: absolute; top: calc(50% - 0.125rem); left: 0.5rem; width: 0.875rem; height: 0.875rem; color: var(--text-muted); transform: translateY(-50%); pointer-events: none; }
+/* Borderless search row; the open popover is the focus context. */
+.mint-searchable-select__search { width: 100%; min-height: 28px; padding: 0 0.5rem 0 1.75rem; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 0.8125rem; box-sizing: border-box; }
+.mint-searchable-select__search:focus-visible { outline: none; }
+.mint-searchable-select__search::placeholder { color: var(--text-muted); }
 .mint-searchable-select__list { min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
 /* Rows = .mint-menu-item (2d); __option* stay as aliases. */
-.mint-searchable-select__empty { padding: 1rem; text-align: center; color: var(--text-secondary); font-size: 0.75rem; }
+.mint-searchable-select__empty { padding: 0.5rem; color: var(--text-muted); font-size: 0.75rem; }
 .mint-searchable-select__footer { margin: 0.25rem -0.25rem -0.25rem; padding: 0.625rem; border-top: 1px solid var(--border-light); color: var(--text-secondary); font-size: 0.75rem; }
 
 @media (prefers-reduced-motion: reduce) {
-  .mint-searchable-select__trigger,
-  .mint-searchable-select__search { transition: none; }
+  .mint-searchable-select__trigger { transition: none; }
 }