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

package/src/styles/components/experiment-selector-modal.css

@@ -1,93 +1,112 @@
-/* ExperimentSelectorModal: filters beside the shared ResourcePickerList search (8b). */
+/* ExperimentSelectorModal: filter triggers beside the shared ResourcePickerList search,
+   which wraps the row. */
 
-.mint-experiment-selector__filters-advanced {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-  padding: 0 1.25rem;
+/* The search and filters sit in a toolbar band under the header hairline; the
+   list starts directly below the band's border. */
+.mint-resource-picker.mint-experiment-selector {
+  gap: 0;
 }
 
-.mint-experiment-selector__filter-select {
-  flex-shrink: 0;
-  width: 10rem;
+.mint-experiment-selector .mint-resource-picker__toolbar {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.mint-experiment-selector .mint-resource-picker__frame {
+  border-top: 0;
+}
+
+.mint-experiment-selector .mint-resource-picker__error {
+  margin-top: 1rem;
 }
 
-/* "Filters" toggle button */
-.mint-experiment-selector__filters-toggle {
+.mint-experiment-selector .mint-resource-picker__search {
+  min-height: var(--form-height-md);
+}
+
+/* Status / Project / Type menu triggers and the Mine toggle */
+.mint-experiment-selector__toggle {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
-  min-height: 2.25rem;
-  padding: 0.5rem 0.75rem;
+  max-width: 180px;
+  height: var(--form-height-sm);
+  padding: 0 0.5rem 0 0.625rem;
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
-  background: var(--bg-primary);
-  color: var(--text-secondary);
-  font-size: 0.8125rem;
+  background: var(--bg-card);
+  font-family: inherit;
+  font-size: 0.75rem;
   font-weight: 500;
+  color: var(--text-secondary-strong);
   cursor: pointer;
   white-space: nowrap;
-  position: relative;
   transition:
-    background-color 0.15s ease,
-    border-color 0.15s ease,
-    color 0.15s ease,
-    box-shadow 0.15s ease;
+    background-color var(--mint-transition),
+    border-color var(--mint-transition),
+    color var(--mint-transition);
 }
 
-.mint-experiment-selector__filters-toggle:hover {
-  border-color: var(--color-primary);
-  background-color: var(--bg-hover);
-  color: var(--text-primary);
+.mint-experiment-selector__toggle:hover {
+  border-color: var(--border-strong);
 }
 
-.mint-experiment-selector__filters-toggle:focus-visible {
+.mint-experiment-selector__toggle:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
 
-.mint-experiment-selector__filters-toggle--active {
-  color: var(--color-primary);
-  border-color: var(--color-primary);
-  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
+.mint-experiment-selector__toggle--active,
+.mint-experiment-selector__toggle--active:hover {
+  background: var(--color-primary-soft);
+  border-color: var(--color-primary-border);
+  color: var(--text-primary);
 }
 
-html.dark .mint-experiment-selector__filters-toggle--active {
-  background-color: color-mix(in srgb, var(--color-primary) 16%, transparent);
+/* A long project name ends in an ellipsis. */
+.mint-experiment-selector__toggle-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-/* Active filter badge dot */
-.mint-experiment-selector__filters-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background-color: var(--color-primary);
+.mint-experiment-selector__toggle svg {
   flex-shrink: 0;
 }
 
-/* Group toggle checkbox label */
-.mint-experiment-selector__group-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  min-height: 2.25rem;
-  font-size: 0.8125rem;
-  color: var(--text-secondary);
-  cursor: pointer;
-  white-space: nowrap;
-  user-select: none;
-  margin-left: auto;
+/* Status dot of the active status filter */
+.mint-experiment-selector__dot {
+  flex-shrink: 0;
+  width: 0.375rem;
+  height: 0.375rem;
+  margin: 0 1px;
+  border-radius: 9999px;
+  background-color: var(--text-muted);
 }
 
-.mint-experiment-selector__group-checkbox {
-  width: 1rem;
-  height: 1rem;
-  accent-color: var(--color-primary);
+.mint-experiment-selector__dot--primary { background-color: var(--color-primary); }
+.mint-experiment-selector__dot--success { background-color: var(--mint-success); }
+.mint-experiment-selector__dot--warning { background-color: var(--mint-warning); }
+.mint-experiment-selector__dot--error { background-color: var(--mint-error); }
+.mint-experiment-selector__dot--info { background-color: var(--mint-info); }
+
+/* "Clear N" text button */
+.mint-experiment-selector__clear-filters {
+  padding: 0 0.25rem;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: none;
+  font-family: inherit;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--_ink-primary);
   cursor: pointer;
 }
 
-.mint-experiment-selector__group-checkbox:focus-visible {
+.mint-experiment-selector__clear-filters:hover {
+  text-decoration: underline;
+}
+
+.mint-experiment-selector__clear-filters:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }

package/src/styles/components/file-picker.css

@@ -82,7 +82,7 @@
   color: var(--text-secondary);
   white-space: nowrap;
   cursor: pointer;
-  transition: background-color 150ms ease;
+  transition: background-color var(--mint-transition);
 }
 .mint-picker__crumb:hover {
   background: var(--bg-hover);
@@ -115,7 +115,7 @@
   font: inherit;
   font-size: 12px;
   cursor: pointer;
-  transition: background-color 150ms ease;
+  transition: background-color var(--mint-transition);
 }
 .mint-picker__scope,
 .mint-picker__sort {
@@ -213,7 +213,7 @@
   font-size: 13px;
   color: var(--text-primary);
   cursor: pointer;
-  transition: background-color 150ms ease;
+  transition: background-color var(--mint-transition);
 }
 .mint-picker__row:hover {
   background: var(--bg-hover);

package/src/styles/components/file-uploader.css

@@ -14,16 +14,17 @@
 
 .mint-file-uploader__dropzone {
   position: relative;
-  border: 2px dashed var(--border-color);
+  border: 1px dashed var(--border-strong);
   border-radius: var(--radius-lg);
   cursor: pointer;
-  background: var(--bg-secondary);
-  transition: border-color 0.15s ease, background-color 0.15s ease;
+  background: var(--bg-primary);
+  transition: border-color var(--mint-transition), background-color var(--mint-transition);
 }
 
-.mint-file-uploader__dropzone:hover {
+.mint-file-uploader__dropzone:hover,
+.mint-file-uploader__dropzone--dragover {
   border-color: var(--color-primary);
-  background: color-mix(in srgb, var(--color-primary) 3%, var(--bg-secondary));
+  background: var(--color-primary-soft);
 }
 
 .mint-file-uploader__dropzone:focus-visible {
@@ -31,11 +32,6 @@
   outline-offset: 2px;
 }
 
-.mint-file-uploader__dropzone--dragover {
-  border-color: var(--color-primary);
-  background: color-mix(in srgb, var(--color-primary) 5%, var(--bg-secondary));
-}
-
 .mint-file-uploader__dropzone--disabled {
   opacity: var(--mint-disabled-opacity);
   cursor: not-allowed;
@@ -69,19 +65,14 @@
 }
 
 .mint-file-uploader__icon {
-  width: 2rem;
-  height: 2rem;
-  color: var(--text-muted);
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--text-secondary);
   margin-bottom: 0.5rem;
 }
 
-.mint-file-uploader__dropzone:hover .mint-file-uploader__icon,
-.mint-file-uploader__dropzone--dragover .mint-file-uploader__icon {
-  color: var(--color-primary);
-}
-
 .mint-file-uploader__text {
-  color: var(--text-secondary);
+  color: var(--text-primary);
   font-size: 0.8125rem;
   font-weight: 500;
   margin: 0;
@@ -104,10 +95,12 @@
 .mint-file-uploader__list {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
   list-style: none;
   margin: 0;
   padding: 0;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
 }
 
 .mint-file-uploader-item-enter-active {
@@ -132,21 +125,19 @@
   transition: transform 0.2s ease-out;
 }
 
-/* File row */
+/* File row — hairline rows inside one bordered list. */
 .mint-file-uploader__file {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
+  gap: 0.625rem;
   padding: 0.5rem 0.625rem;
-  border-radius: var(--radius-md);
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  transition: border-color 0.15s ease;
+  background-color: var(--bg-card);
+  border-bottom: 1px solid var(--border-light);
 }
 
-.mint-file-uploader__file:hover {
-  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--border-color));
+.mint-file-uploader__file:last-child {
+  border-bottom: 0;
 }
 
 .mint-file-uploader__file-info {
@@ -182,7 +173,8 @@
 }
 
 .mint-file-uploader__file-name {
-  font-size: 0.8125rem;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
   font-weight: 500;
   color: var(--text-primary);
   white-space: nowrap;
@@ -205,20 +197,20 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: 1.75rem;
-  height: 1.75rem;
+  width: 1.5rem;
+  height: 1.5rem;
   padding: 0;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius);
   color: var(--text-muted);
   background: transparent;
   border: none;
   cursor: pointer;
-  transition: color 0.15s ease, background-color 0.15s ease;
+  transition: color var(--mint-transition), background-color var(--mint-transition);
 }
 
 .mint-file-uploader__remove-btn:hover {
-  color: var(--mint-error);
-  background-color: var(--mint-error-bg);
+  color: var(--text-primary);
+  background-color: var(--bg-hover);
 }
 
 .mint-file-uploader__remove-icon {
@@ -235,14 +227,9 @@
   align-items: center;
   justify-content: space-between;
   padding: 0.75rem;
-  border-radius: var(--radius-md);
-  background-color: var(--bg-secondary);
+  border-radius: var(--radius-lg);
+  background-color: var(--bg-card);
   border: 1px solid var(--border-color);
-  transition: border-color 0.15s ease;
-}
-
-.mint-file-uploader__folder-summary:hover {
-  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--border-color));
 }
 
 .mint-file-uploader__folder-info {
@@ -256,17 +243,19 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2.25rem;
-  height: 2.25rem;
+  width: 2rem;
+  height: 2rem;
   flex-shrink: 0;
-  border-radius: var(--radius-sm);
-  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
+  box-sizing: border-box;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-color);
+  background: var(--bg-card);
 }
 
 .mint-file-uploader__folder-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-  color: var(--color-primary);
+  width: 1rem;
+  height: 1rem;
+  color: var(--text-secondary);
 }
 
 .mint-file-uploader__folder-details {

package/src/styles/components/form-builder.css

@@ -63,7 +63,7 @@
 .mint-form-actions {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--border-color);
+  gap: 0.5rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--border-light);
 }

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

@@ -17,7 +17,7 @@
   background-color: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: border-color var(--mint-transition), box-shadow var(--mint-transition);
 }
 
 .mint-formula-input__field--sm { min-height: var(--form-height-sm); }

package/src/styles/components/icon-button.css

@@ -6,26 +6,16 @@
   align-items: center;
   justify-content: center;
   border-radius: var(--radius-md);
-  /* Flat surface (1d): no gradient overlay, no hover lift. */
+  /* Flat surface (1d): no gradient overlay, no hover lift, no shadow. */
   transition:
-    color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    border-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
-    box-shadow 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
+    color var(--mint-transition),
+    background-color var(--mint-transition),
+    border-color var(--mint-transition);
   cursor: pointer;
   border: none;
   box-sizing: border-box;
 }
 
-.mint-icon-button:hover:not(.mint-icon-button--disabled):not(.mint-icon-button--ghost):not(:focus-visible) {
-  box-shadow: var(--shadow-sm);
-}
-
-.mint-icon-button:active:not(.mint-icon-button--disabled) {
-  box-shadow: none;
-  transition-duration: 0.05s;
-}
-
 .mint-icon-button:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring-offset);
@@ -48,7 +38,7 @@
 /* Variants */
 .mint-icon-button--primary {
   background-color: var(--color-primary);
-  color: white;
+  color: var(--text-on-accent);
 }
 
 .mint-icon-button--primary:hover:not(.mint-icon-button--disabled) {
@@ -63,11 +53,12 @@
 
 .mint-icon-button--secondary:hover:not(.mint-icon-button--disabled) {
   background-color: var(--bg-tertiary);
+  border-color: var(--border-strong);
 }
 
 .mint-icon-button--cta {
   background-color: var(--color-cta);
-  color: white;
+  color: var(--text-on-accent);
 }
 
 .mint-icon-button--cta:hover:not(.mint-icon-button--disabled) {
@@ -83,13 +74,20 @@
   background-color: var(--mint-error-hover);
 }
 
+/* Success shares the accent fill (one accent). */
 .mint-icon-button--success {
-  background-color: var(--mint-success);
-  color: white;
+  background-color: var(--color-primary);
+  color: var(--text-on-accent);
 }
 
 .mint-icon-button--success:hover:not(.mint-icon-button--disabled) {
-  background-color: var(--mint-success-hover);
+  background-color: var(--color-primary-hover);
+}
+
+.mint-icon-button--primary:active:not(.mint-icon-button--disabled),
+.mint-icon-button--cta:active:not(.mint-icon-button--disabled),
+.mint-icon-button--success:active:not(.mint-icon-button--disabled) {
+  background-color: var(--color-primary-pressed);
 }
 
 .mint-icon-button--ghost {
@@ -174,10 +172,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   .mint-icon-button {
-    transition:
-      color 0.15s ease,
-      background-color 0.15s ease,
-      border-color 0.15s ease,
-      box-shadow 0.15s ease;
+    transition: none;
   }
 }

package/src/styles/components/input.css

@@ -45,21 +45,22 @@
   cursor: not-allowed;
 }
 
-/* Size variants */
+/* Size variants — the vertical padding stays under --form-height-*, so the
+   density token sets the height (28/32/40px, comfortable 32/36/48px). */
 .mint-input--sm {
-  padding: 0.375rem 0.625rem;
+  padding: 0.25rem 0.625rem;
   font-size: 0.8125rem;
   min-height: var(--form-height-sm);
 }
 
 .mint-input--md {
-  padding: 0.5rem 0.75rem;
+  padding: 0.375rem 0.75rem;
   font-size: 0.875rem;
   min-height: var(--form-height-md);
 }
 
 .mint-input--lg {
-  padding: 0.75rem 1rem;
+  padding: 0.5rem 1rem;
   font-size: 1rem;
   min-height: var(--form-height-lg);
 }

package/src/styles/components/instrument-monitor.css

@@ -6,46 +6,36 @@
   gap: 0.375rem;
   color: var(--text-secondary-strong);
   font-size: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
   line-height: 1.35;
   white-space: nowrap;
 }
 
 .mint-instrument-state__dot {
   flex-shrink: 0;
-  width: 0.375rem;
-  height: 0.375rem;
+  width: 0.5rem;
+  height: 0.5rem;
   border-radius: 9999px;
   background: var(--mint-instrument-tone);
 }
 
 .mint-instrument-state--success { --mint-instrument-tone: var(--mint-success); }
 .mint-instrument-state--warning { --mint-instrument-tone: var(--mint-warning); }
-.mint-instrument-state--info    { --mint-instrument-tone: var(--mint-info); }
 .mint-instrument-state--muted   { --mint-instrument-tone: var(--text-muted); }
 
 .mint-instrument-state--error {
   --mint-instrument-tone: var(--mint-error);
   color: var(--_ink-error);
-  font-weight: 600;
 }
 
 /* Offline: hollow dot — shape, not a fainter color. */
 .mint-instrument-state--offline .mint-instrument-state__dot {
   background: transparent;
-  box-shadow: inset 0 0 0 1.5px var(--_control-border-strong);
+  box-shadow: inset 0 0 0 1.5px var(--text-muted);
 }
 
-/* Never reported: a short dash. */
+/* Never reported: a hollow square. */
 .mint-instrument-state--never .mint-instrument-state__dot {
-  width: 0.5rem;
-  height: 2px;
-  border-radius: 1px;
-  background: var(--_control-border-strong);
-}
-
-/* Inactive: a hollow square. */
-.mint-instrument-state--inactive .mint-instrument-state__dot {
   width: 7px;
   height: 7px;
   border-radius: 1.5px;
@@ -53,6 +43,14 @@
   box-shadow: inset 0 0 0 1.5px var(--text-muted);
 }
 
+/* Inactive: a short dash. */
+.mint-instrument-state--inactive .mint-instrument-state__dot {
+  width: 8px;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--text-muted);
+}
+
 .mint-instrument-state--pulse .mint-instrument-state__dot {
   animation: mint-instrument-pulse 1.6s ease-in-out infinite;
 }