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

package/src/styles/components/unit-input.css

@@ -13,7 +13,7 @@
   align-items: stretch;
   background-color: var(--bg-secondary);
   border: 1px solid var(--border-color);
-  border-radius: 0.5rem;
+  border-radius: var(--radius-md);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   overflow: hidden;
 }
@@ -22,8 +22,8 @@
 .mint-unit-input__controls--md { min-height: var(--form-height-md); }
 .mint-unit-input__controls--lg { min-height: var(--form-height-lg); }
 
-.mint-unit-input__controls:hover:not(:has(:disabled)) {
-  border-color: var(--text-muted);
+.mint-unit-input__controls:hover:not(:focus-within):not(:has(:disabled)) {
+  border-color: var(--_field-border-hover);
 }
 
 .mint-unit-input__controls:focus-within {
@@ -31,7 +31,8 @@
   box-shadow: var(--focus-ring-soft);
 }
 
-.mint-unit-input--error .mint-unit-input__controls {
+.mint-unit-input--error .mint-unit-input__controls,
+.mint-unit-input--error .mint-unit-input__controls:hover {
   border-color: var(--mint-error);
 }
 
@@ -39,9 +40,13 @@
   box-shadow: var(--focus-ring-soft-error);
 }
 
+/* Disabled per 1e: tinted field + muted text, no opacity. */
 .mint-unit-input--disabled .mint-unit-input__controls {
-  opacity: var(--mint-disabled-opacity);
-  background-color: var(--bg-secondary);
+  background-color: var(--bg-tertiary);
+}
+
+.mint-unit-input--disabled .mint-unit-input__value {
+  color: var(--text-muted);
 }
 
 /* ---------- Value input — Fira Code, left-aligned ---------- */
@@ -54,7 +59,8 @@
   color: var(--text-primary);
   border: none;
   outline: none;
-  font-family: var(--font-mono, 'Fira Code', monospace);
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
@@ -74,50 +80,94 @@
 .mint-unit-input__value--md { padding: 0.5rem 0.75rem;    font-size: 0.875rem; }
 .mint-unit-input__value--lg { padding: 0.75rem 1rem;      font-size: 1rem; }
 
-/* ---------- Unit chip ---------- */
+/* ---------- Unit segment = BaseInput #suffix look (1e / 4b) ---------- */
 
 .mint-unit-input__unit {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
-  padding: 0 0.25rem;
-  background-color: var(--color-primary-soft);
-  border-left: 1px solid var(--border-color);
+  justify-content: space-between;
+  width: 64px; /* fixed: switching µL / mL / nL never changes the field width */
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 0.5rem 0 0.625rem;
+  border: 0;
+  border-left: 1px solid var(--border-light);
+  border-radius: 0;
+  background-color: var(--bg-primary);
+  color: var(--text-secondary-strong);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  line-height: 1;
+  white-space: nowrap;
+  transition: background-color 0.15s ease;
 }
 
-.mint-unit-input__unit-select {
-  background: transparent;
-  border: none;
-  color: var(--color-primary-hover);
-  font-size: 0.75rem;
-  font-weight: 500;
-  padding: 0 0.375rem;
+button.mint-unit-input__unit {
   cursor: pointer;
-  outline: none;
-  text-transform: none;
-  font-family: var(--font-mono, 'Fira Code', monospace);
-  line-height: 1;
 }
 
-.mint-unit-input__unit-select--sm { font-size: 0.6875rem; }
-.mint-unit-input__unit-select--md { font-size: 0.75rem; }
-.mint-unit-input__unit-select--lg { font-size: 0.8125rem; }
+/* Keyboard focus: the whole field carries the focus ring (:focus-within); the segment tints. */
+button.mint-unit-input__unit:hover:not(:disabled),
+button.mint-unit-input__unit:focus-visible,
+.mint-unit-input__unit--open {
+  background-color: var(--bg-hover);
+}
+
+button.mint-unit-input__unit:focus-visible {
+  outline: none;
+}
 
-.mint-unit-input__unit-select:disabled {
-  cursor: not-allowed;
+.mint-unit-input__unit:disabled {
   color: var(--text-muted);
+  cursor: not-allowed;
+}
+
+.mint-unit-input__chevron {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  color: var(--text-secondary);
+  transition: transform 0.15s ease;
+}
+
+.mint-unit-input__unit--open .mint-unit-input__chevron {
+  transform: rotate(180deg);
 }
 
-/* ---------- Conversion hint ---------- */
+/* ---------- Unit menu (.mint-popover + .mint-menu-item) ---------- */
+
+.mint-unit-input__menu {
+  position: fixed;
+  z-index: 1000;
+  width: 148px;
+}
 
-.mint-unit-input__conversion-hint {
+.mint-unit-input__menu .mint-menu-item {
+  font-family: var(--font-mono);
   font-size: 0.75rem;
-  color: var(--text-muted);
-  font-style: italic;
-  padding: 0 0.75rem;
 }
 
-.mint-unit-input__unit-group {
-  /* optgroup styling — browsers vary here; minimal override */
-  font-weight: 600;
-  font-style: normal;
+.mint-unit-input__menu-group {
+  padding: 4px 8px 2px;
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+}
+
+/* ---------- Conversion hint: the number users check, so readable ---------- */
+
+.mint-unit-input__hint {
+  padding-left: 0.125rem;
+  color: var(--text-secondary-strong);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mint-unit-input__controls,
+  .mint-unit-input__unit,
+  .mint-unit-input__chevron {
+    transition: none;
+  }
 }

package/src/styles/components/well-edit-popup.css

@@ -1,4 +1,6 @@
-/* WellEditPopup Component Styles */
+/* WellEditPopup (SDK control refresh 3b).
+ * Surface = .mint-popover; fields = FormField row + BaseInput / SegmentedControl /
+ * NumberInput; buttons = BaseButton. This file owns placement and layout only. */
 
 .mint-well-edit-popup__backdrop {
   position: fixed;
@@ -9,250 +11,170 @@
 .mint-well-edit-popup {
   position: fixed;
   z-index: 50;
-  width: 320px;
-  border-radius: var(--radius-md);
+  width: 300px;
+  padding: 0;
   overflow: hidden;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--border-color);
+  transition: opacity var(--mint-transition);
 }
 
-.mint-well-edit-popup__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem 1rem;
-  border-bottom: 1px solid var(--border-color);
+.mint-well-edit-popup--inline {
+  position: static;
+  width: auto;
+  overflow: visible;
 }
 
-.mint-well-edit-popup__header-left {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
+/* Inline, the host panel owns the padding and the surface. */
+.mint-well-edit-popup--inline .mint-well-edit-popup__header {
+  padding: 0 0 0 2px;
+  border-bottom: 0;
 }
 
-.mint-well-edit-popup__well-id {
-  width: 2rem;
-  height: 2rem;
-  border-radius: var(--radius-sm);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.875rem;
-  font-family: monospace;
-  font-weight: 600;
-  background-color: var(--bg-tertiary);
-  color: var(--text-primary);
-  border: 1px solid var(--border-color);
-}
-
-.mint-well-edit-popup__title {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text-primary);
+/* 7a rail: round 18px swatch, group name at 12px. */
+.mint-well-edit-popup--inline .mint-well-edit-popup__marker {
+  width: 18px;
+  height: 18px;
+  border-radius: 9999px;
+  font-weight: 700;
 }
 
-.mint-well-edit-popup__close {
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: var(--radius-sm);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: background-color 0.15s;
-  background: none;
-  border: none;
-  color: var(--text-muted);
+.mint-well-edit-popup--inline .mint-well-edit-popup__title {
+  font-size: 0.75rem;
 }
 
-.mint-well-edit-popup__close:hover {
-  background-color: rgba(128, 128, 128, 0.1);
+.mint-well-edit-popup--inline .mint-form-field__label {
+  font-size: 0.75rem;
+  font-weight: 400;
 }
 
-.mint-well-edit-popup__body {
-  padding: 0.75rem 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
+.mint-well-edit-popup--inline .mint-well-edit-popup__body {
+  padding: 10px 0 12px;
 }
 
-.mint-well-edit-popup__label {
-  display: block;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--text-muted);
-  margin-bottom: 0.25rem;
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
+.mint-well-edit-popup--inline .mint-well-edit-popup__footer {
+  padding: 10px 0 0;
+  background: transparent;
 }
 
-.mint-well-edit-popup__input {
-  width: 100%;
-  height: 2rem;
-  padding: 0 0.5rem;
-  font-size: 0.875rem;
-  border-radius: var(--radius);
-  background-color: var(--bg-tertiary);
-  border: 1px solid var(--border-color);
-  color: var(--text-primary);
+.mint-well-edit-popup:focus {
   outline: none;
-  transition: border-color 0.15s, box-shadow 0.15s;
-  box-sizing: border-box;
 }
 
-.mint-well-edit-popup__input:focus-visible {
-  border-color: #10b981;
-  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
-}
-
-.mint-well-edit-popup__input--mono {
-  font-family: monospace;
-  font-size: 0.75rem;
+.mint-well-edit-popup__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 6px 6px 12px;
+  border-bottom: 1px solid var(--border-light);
 }
 
-.mint-well-edit-popup__row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.75rem;
+/* 3a marker: shape per type, group color. */
+.mint-well-edit-popup__marker {
+  display: flex;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 600;
 }
 
-/* Sample type buttons */
-.mint-well-edit-popup__type-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 0.25rem;
+.mint-well-edit-popup__well-id {
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  font-weight: 600;
 }
 
-.mint-well-edit-popup__type-btn {
-  height: 2rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all 0.15s;
-  border: 1px solid var(--border-color);
-  background-color: var(--bg-tertiary);
-  color: var(--text-muted);
+.mint-well-edit-popup__title {
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
 }
 
-.mint-well-edit-popup__type-btn--sample {
-  background-color: rgba(16, 185, 129, 0.15);
-  border-color: rgba(16, 185, 129, 0.4);
-  color: #10b981;
+.mint-well-edit-popup__close {
+  margin-left: auto;
 }
 
-.mint-well-edit-popup__type-btn--blank {
-  background-color: rgba(249, 115, 22, 0.15);
-  border-color: rgba(249, 115, 22, 0.4);
-  color: #f97316;
+.mint-well-edit-popup__body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
 }
 
-.mint-well-edit-popup__type-btn--qc {
-  background-color: rgba(139, 92, 246, 0.15);
-  border-color: rgba(139, 92, 246, 0.4);
-  color: #8b5cf6;
+/* FormField row: a fixed label column, the control takes the rest. */
+.mint-well-edit-popup .mint-form-field--row .mint-form-field__label-row {
+  flex: 0 0 64px;
 }
 
-.mint-well-edit-popup__type-btn--iqc {
-  background-color: rgba(236, 72, 153, 0.15);
-  border-color: rgba(236, 72, 153, 0.4);
-  color: #ec4899;
+.mint-well-edit-popup .mint-form-field--row .mint-form-field__control {
+  flex: 1 1 0;
 }
 
-/* Injection count buttons */
-.mint-well-edit-popup__count-grid {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr) 2.5rem;
-  gap: 0.25rem;
+/* The hint sits under the control, past the label column (FormField pins margin). */
+.mint-well-edit-popup .mint-form-field--row .mint-form-field__hint {
+  box-sizing: border-box;
+  padding-left: calc(64px + 0.75rem);
+  font-size: 0.75rem;
 }
 
-.mint-well-edit-popup__count-btn {
-  height: 2rem;
-  font-size: 0.875rem;
-  font-weight: 500;
+.mint-well-edit-popup__disclosure {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  gap: 4px;
+  padding: 2px 4px 2px 0;
+  border: 0;
   border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all 0.15s;
-  border: 1px solid var(--border-color);
-  background-color: var(--bg-tertiary);
+  background: transparent;
   color: var(--text-secondary);
+  font-family: inherit;
+  font-size: 0.75rem;
+  cursor: pointer;
 }
 
-.mint-well-edit-popup__count-btn--active {
-  background-color: rgba(99, 102, 241, 0.15);
-  border-color: rgba(99, 102, 241, 0.4);
-  color: #6366f1;
-}
-
-.mint-well-edit-popup__count-input {
-  height: 2rem;
-  padding: 0 0.25rem;
-  font-size: 0.875rem;
-  text-align: center;
-  border-radius: var(--radius-sm);
-  background-color: var(--bg-tertiary);
-  border: 1px solid var(--border-color);
+.mint-well-edit-popup__disclosure:hover {
   color: var(--text-primary);
-  outline: none;
-  box-sizing: border-box;
 }
 
-.mint-well-edit-popup__count-input:focus-visible {
-  border-color: #6366f1;
-  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+.mint-well-edit-popup__disclosure:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
 }
 
-/* Advanced toggle */
-.mint-well-edit-popup__advanced-toggle {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  user-select: none;
-  padding-top: 0.25rem;
+.mint-well-edit-popup__chevron {
+  transition: transform var(--mint-transition);
 }
 
-.mint-well-edit-popup__advanced-toggle span {
-  font-size: 0.875rem;
-  color: var(--text-primary);
+.mint-well-edit-popup__disclosure[aria-expanded='true'] .mint-well-edit-popup__chevron {
+  transform: rotate(90deg);
 }
 
-/* Footer */
-.mint-well-edit-popup__footer {
+.mint-well-edit-popup__advanced {
   display: flex;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  border-top: 1px solid var(--border-color);
-}
-
-.mint-well-edit-popup__btn {
-  flex: 1;
-  height: 2.25rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: all 0.15s;
-  border: none;
-}
-
-.mint-well-edit-popup__btn--clear {
-  background-color: var(--bg-tertiary);
-  color: var(--text-secondary);
-  border: 1px solid var(--border-color);
+  flex-direction: column;
+  gap: 10px;
 }
 
-.mint-well-edit-popup__btn--clear:hover {
-  background-color: rgba(239, 68, 68, 0.1);
-  color: #ef4444;
+.mint-well-edit-popup__mono {
+  font-family: var(--font-mono);
 }
 
-.mint-well-edit-popup__btn--save {
-  background-color: #10b981;
-  color: white;
+.mint-well-edit-popup__footer {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 12px;
+  border-top: 1px solid var(--border-light);
+  background: var(--bg-primary);
 }
 
-.mint-well-edit-popup__btn--save:hover {
-  background-color: #059669;
+@media (prefers-reduced-motion: reduce) {
+  .mint-well-edit-popup,
+  .mint-well-edit-popup__chevron {
+    transition: none;
+  }
 }

package/src/styles/components/well-plate.css

@@ -105,26 +105,26 @@
 
 /* Well states */
 .mint-well-plate__well--selected {
-  box-shadow: 0 0 0 2px #10b981, 0 0 0 3px var(--bg-card);
+  box-shadow: 0 0 0 2px var(--mint-success), 0 0 0 3px var(--bg-card);
 }
 
 .mint-well-plate__well--drag-over {
-  box-shadow: 0 0 0 2px #6366f1;
-  background-color: rgba(99, 102, 241, 0.2);
+  box-shadow: 0 0 0 2px var(--color-primary);
+  background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
 }
 
 .mint-well-plate__well--hovered {
-  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mint-success) 50%, transparent);
 }
 
 .mint-well-plate__well--drag-source {
-  box-shadow: 0 0 0 2px #f59e0b;
+  box-shadow: 0 0 0 2px var(--mint-warning);
   opacity: 0.5;
 }
 
 .mint-well-plate__well--drag-target {
-  box-shadow: 0 0 0 2px #10b981, 0 0 0 3px var(--bg-card);
-  background-color: rgba(16, 185, 129, 0.2);
+  box-shadow: 0 0 0 2px var(--mint-success), 0 0 0 3px var(--bg-card);
+  background-color: color-mix(in srgb, var(--mint-success) 20%, transparent);
 }
 
 /* Optional semantic classes for `wellClass` callbacks. */

package/src/styles/index.css

@@ -5,6 +5,9 @@
 /* CSS Variables and base styles */
 @import './variables.css';
 
+/* Shared surfaces — before component styles so components can refine them */
+@import './components/popover.css';
+
 /* Component styles - alphabetically ordered */
 @import './components/action-menu.css';
 @import './components/adduct-text.css';
@@ -16,7 +19,6 @@
 @import './components/button.css';
 @import './components/checkbox.css';
 @import './components/collapsible-card.css';
-@import './components/color-slider.css';
 @import './components/date-picker.css';
 @import './components/experiment-timeline.css';
 @import './components/file-uploader.css';
@@ -28,7 +30,7 @@
 @import './components/input.css';
 @import './components/modal.css';
 @import './components/number-input.css';
-@import './components/plate-map-editor.css';
+@import './components/plate-editor.css';
 @import './components/radio-group.css';
 @import './components/sample-legend.css';
 @import './components/section-card.css';
@@ -57,14 +59,11 @@
 @import './components/sequence-progress-bar.css';
 @import './components/multi-select.css';
 @import './components/pill.css';
-@import './components/dropdown-button.css';
 @import './components/calendar.css';
 @import './components/dataframe.css';
 @import './components/data-state.css';
 @import './components/well-edit-popup.css';
-@import './components/rack-editor.css';
 @import './components/loading-spinner.css';
-@import './components/lcms-sequence-table.css';
 @import './components/divider.css';
 @import './components/status-indicator.css';
 @import './components/progress-bar.css';
@@ -91,16 +90,15 @@
 @import './components/form-builder.css';
 @import './components/experiment-data-viewer.css';
 @import './components/experiment-code-badge.css';
+@import './components/resource-picker-list.css';
 @import './components/experiment-selector-modal.css';
 @import './components/artifact-selector-modal.css';
-@import './components/file-browser-modal.css';
 @import './components/artifact-save-dialog.css';
 @import './components/experiment-popover.css';
 @import './components/fit-panel.css';
 @import './components/app-avatar-menu.css';
 @import './components/app-page-selector.css';
 @import './components/app-pill-nav.css';
-@import './components/app-plugin-switcher.css';
 @import './components/mobile-support-gate.css';
 @import './components/plugin-icon.css';
 @import './components/reagent-editor.css';