@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

package/src/styles/components/reagent-editor.css

@@ -23,9 +23,7 @@
   gap: 0.375rem;
   font-size: 0.6875rem;
   font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   margin-bottom: 0.75rem;
 }
 
@@ -146,7 +144,7 @@
   border: 1px solid var(--border-color);
   border-radius: var(--radius);
   outline: none;
-  text-transform: uppercase;
+  text-transform: capitalize;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
@@ -341,9 +339,7 @@
 .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);
+  color: var(--text-secondary);
 }
 
 .mint-reagent-editor__table-row {

package/src/styles/components/reagent-list.css

@@ -7,6 +7,11 @@
   overflow: hidden;
 }
 
+/* Dark --border-light equals --bg-card; row and band hairlines need --border-color there. */
+:where(html.dark) .mint-reagent-list {
+  --border-light: var(--border-color);
+}
+
 /* Header */
 .mint-reagent-list__header {
   display: flex;
@@ -32,7 +37,7 @@
 
 .mint-reagent-list__search:focus-within {
   border-color: var(--color-primary);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
+  box-shadow: var(--focus-ring-soft);
 }
 
 .mint-reagent-list__search-icon {
@@ -55,26 +60,7 @@
   color: var(--text-muted);
 }
 
-/* Add button */
-.mint-reagent-list__add-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-primary);
-  background: transparent;
-  border: 1px solid var(--color-primary);
-  border-radius: var(--radius);
-  cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-
-.mint-reagent-list__add-btn:hover {
-  background-color: rgba(59, 130, 246, 0.1);
-}
-
+/* Add button — a BaseButton (secondary, sm); only the icon size is local. */
 .mint-reagent-list__add-btn svg {
   width: 0.875rem;
   height: 0.875rem;
@@ -111,16 +97,14 @@
 }
 
 .mint-reagent-list__table thead {
-  background-color: var(--bg-tertiary) !important;
+  background-color: var(--bg-primary) !important;
 }
 
 .mint-reagent-list__table th {
   padding: 0.5rem 0.75rem !important;
-  font-size: 0.625rem !important;
-  font-weight: 600 !important;
-  text-transform: uppercase !important;
-  letter-spacing: 0.05em !important;
-  color: var(--text-muted) !important;
+  font-size: 0.75rem !important;
+  font-weight: 500 !important;
+  color: var(--text-secondary) !important;
   text-align: left !important;
   border-top: none !important;
   border-left: none !important;
@@ -135,7 +119,7 @@
 }
 
 .mint-reagent-list__table th.mint-reagent-list__col--sortable:hover {
-  color: var(--text-secondary);
+  color: var(--text-primary) !important;
 }
 
 /* Sortable headers are real buttons; strip the native chrome so the cell keeps
@@ -162,9 +146,20 @@
   height: 0.75rem;
   margin-left: 0.25rem;
   vertical-align: middle;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+/* 2a: an unsorted column shows its arrow only on hover; the sorted header is --text-primary. */
+.mint-reagent-list__col--sortable:hover .mint-reagent-list__sort-icon:not(.mint-reagent-list__sort-icon--active) {
   opacity: 0.5;
 }
 
+.mint-reagent-list__table th[aria-sort="ascending"],
+.mint-reagent-list__table th[aria-sort="descending"] {
+  color: var(--text-primary) !important;
+}
+
 .mint-reagent-list__sort-icon--active {
   opacity: 1;
   color: var(--color-primary);
@@ -180,21 +175,10 @@
 }
 
 .mint-reagent-list__row:not(:last-child) td {
-  border-bottom: 1px solid var(--border-color) !important;
-}
-
-/* Row status indicators */
-.mint-reagent-list__row--low-stock {
-  border-left: 3px solid var(--mint-warning);
+  border-bottom: 1px solid var(--border-light) !important;
 }
 
-.mint-reagent-list__row--expired {
-  border-left: 3px solid var(--mint-error);
-}
-
-.mint-reagent-list__row--expiring-soon {
-  border-left: 3px solid #f59e0b;
-}
+/* Row status lives in the cells (dot / clock / strike), not a left border (3d). */
 
 /* Cell */
 .mint-reagent-list__cell {
@@ -222,12 +206,7 @@
 /* Expired text */
 .mint-reagent-list__expired-text {
   text-decoration: line-through;
-  color: var(--mint-error);
-}
-
-/* Expiring soon text */
-.mint-reagent-list__expiring-text {
-  color: var(--mint-warning);
+  color: var(--_ink-error);
 }
 
 /* Stock bar */
@@ -245,49 +224,59 @@
   overflow: hidden;
 }
 
+/* Fill is always primary (6b); low stock is the dot + "Low" text, not a red bar (3d). */
 .mint-reagent-list__stock-fill {
   height: 100%;
   border-radius: 3px;
+  background-color: var(--color-primary);
   transition: width 0.3s ease;
 }
 
-.mint-reagent-list__stock-fill--good {
-  background-color: var(--mint-success);
+.mint-reagent-list__stock-text {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  color: var(--text-secondary-strong);
+  min-width: 2.5rem;
+  white-space: nowrap;
 }
 
-.mint-reagent-list__stock-fill--warning {
-  background-color: var(--mint-warning);
+.mint-reagent-list__stock-value {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
 }
 
-.mint-reagent-list__stock-fill--low {
-  background-color: var(--mint-error);
+/* Low stock: a warning dot before the text. */
+.mint-reagent-list__stock-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
 }
 
-.mint-reagent-list__stock-text {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  min-width: 2.5rem;
+.mint-reagent-list__status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 9999px;
+  background-color: var(--mint-warning);
+  flex-shrink: 0;
 }
 
-/* Badge */
+/* Expiry status: text (+ clock for expiring), no badge fill. */
 .mint-reagent-list__badge {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
-  padding: 0.125rem 0.375rem;
-  font-size: 0.625rem;
-  font-weight: 500;
-  border-radius: var(--radius-sm);
+  margin-left: 0.375rem;
+  font-size: 0.75rem;
 }
 
 .mint-reagent-list__badge--warning {
-  background-color: var(--mint-warning-bg);
-  color: var(--mint-warning);
+  color: var(--mint-warning-text);
 }
 
 .mint-reagent-list__badge--error {
-  background-color: var(--mint-error-bg);
-  color: var(--mint-error);
+  color: var(--_ink-error);
 }
 
 .mint-reagent-list__badge-icon {
@@ -337,7 +326,12 @@
 
 .mint-reagent-list__action-btn:hover {
   color: var(--text-primary);
-  background-color: var(--bg-tertiary);
+  background-color: var(--bg-hover);
+}
+
+.mint-reagent-list__action-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
 }
 
 .mint-reagent-list__action-btn--danger:hover {
@@ -371,7 +365,7 @@
 
 .mint-reagent-list__drag-handle-btn:focus-visible {
   outline: none;
-  box-shadow: var(--focus-ring);
+  box-shadow: var(--focus-ring-offset);
 }
 
 .mint-reagent-list__drag-handle-btn:focus-visible .mint-reagent-list__drag-handle {
@@ -400,7 +394,7 @@
 }
 
 .mint-reagent-list__row--drag-over {
-  background-color: rgba(59, 130, 246, 0.1);
+  background-color: var(--color-primary-soft);
 }
 
 /* External link */

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

@@ -10,9 +10,9 @@
   overflow: hidden;
 }
 
+/* Hover darkens the border only; the shadow stays --shadow-sm (10a). */
 .mint-resource-card:hover {
-  box-shadow: var(--shadow-md);
-  border-color: rgba(59, 130, 246, 0.3);
+  border-color: color-mix(in srgb, var(--text-secondary) 45%, var(--border-color));
 }
 
 /* Compact mode */
@@ -251,9 +251,7 @@
 
 .mint-resource-card__spec-label {
   font-size: 0.6875rem;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
+  color: var(--text-secondary);
 }
 
 .mint-resource-card__spec-value {
@@ -326,7 +324,7 @@
 }
 
 .mint-resource-card--compact .mint-resource-card__book-btn:hover {
-  background-color: rgba(59, 130, 246, 0.1);
+  background-color: var(--bg-hover);
 }
 
 /* Compact layout overrides */

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

@@ -0,0 +1,212 @@
+/* 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. */
+
+/* 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. */
+.mint-modal__body:has(> .mint-resource-picker) {
+  padding: 0;
+}
+.mint-modal__container:has(.mint-resource-picker) .mint-modal__header {
+  border-bottom: none;
+  padding-bottom: 0.75rem;
+}
+
+.mint-resource-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-height: 0;
+}
+.mint-resource-picker__toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0 1.25rem;
+}
+.mint-resource-picker__search {
+  flex: 1;
+  min-width: 10rem;
+}
+
+.mint-resource-picker__frame {
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--border-color);
+}
+.mint-resource-picker__list {
+  padding-bottom: 0.5rem;
+  max-height: min(28rem, calc(100vh - 16rem));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  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);
+  grid-auto-flow: column;
+  grid-auto-columns: auto;
+  align-items: center;
+  gap: 12px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  min-height: 56px;
+  margin: 2px 0.5rem;
+  padding: 10px 12px;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+.mint-resource-picker__row:hover {
+  background-color: var(--bg-hover);
+}
+.mint-resource-picker__row--selected,
+.mint-resource-picker__row--selected:hover {
+  background-color: var(--color-primary-soft);
+}
+/* Keyboard focus is the ring alone; it never adds a fill or a bar. */
+.mint-resource-picker__row--active {
+  box-shadow: inset 0 0 0 2px var(--color-primary);
+}
+
+.mint-resource-picker__text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  line-height: 1.25;
+}
+.mint-resource-picker__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.mint-resource-picker__row--selected .mint-resource-picker__title {
+  color: var(--_ink-primary);
+}
+.mint-resource-picker__code {
+  margin-right: 0.5rem;
+}
+.mint-resource-picker__aside {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  line-height: 1.25;
+  white-space: nowrap;
+}
+.mint-resource-picker__date {
+  font: 12px var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-muted);
+}
+.mint-resource-picker__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+.mint-resource-picker__status::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: currentColor;
+}
+.mint-resource-picker__status--primary { color: var(--_ink-primary); }
+.mint-resource-picker__status--success { color: var(--mint-success); }
+.mint-resource-picker__status--warning { color: var(--mint-warning); }
+.mint-resource-picker__status--error { color: var(--mint-error); }
+.mint-resource-picker__status--info { color: var(--mint-info); }
+.mint-resource-picker__meta {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+.mint-resource-picker__actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.mint-resource-picker__skeleton-row {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 8px;
+  min-height: 56px;
+  padding: 10px 1.25rem;
+}
+.mint-resource-picker__error {
+  margin: 0 1.25rem 1.25rem;
+  padding: 0.75rem;
+  border: 1px solid var(--mint-error-border);
+  border-radius: var(--radius-md);
+  background-color: var(--mint-error-bg);
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+:where(html.dark) .mint-resource-picker {
+  --border-light: var(--border-color);
+}