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

package/src/styles/components/jobs-status-tray.css

@@ -4,7 +4,12 @@
   bottom: max(1.25rem, env(safe-area-inset-bottom));
   z-index: 1000;
   color: var(--text-primary);
-  font-family: 'Fira Sans', system-ui, sans-serif;
+  font-family: var(--font-sans);
+}
+
+/* Dark --border-light equals --bg-card; row and band hairlines need --border-color there. */
+:where(html.dark) .mint-jobs-tray {
+  --border-light: var(--border-color);
 }
 
 .mint-jobs-tray__trigger {
@@ -19,11 +24,10 @@
   color: white;
   box-shadow: var(--shadow-lg);
   cursor: pointer;
-  transition: transform var(--mint-transition), background var(--mint-transition), box-shadow var(--mint-transition);
+  transition: background var(--mint-transition), box-shadow var(--mint-transition);
 }
 
 .mint-jobs-tray__trigger:hover {
-  transform: translateY(-1px);
   background: var(--color-primary-hover);
 }
 
@@ -60,12 +64,13 @@
   justify-content: center;
   padding: 0 0.375rem;
   border-radius: 9999px;
-  font: 600 0.6875rem/1 'Fira Code', monospace;
+  font: 600 0.6875rem/1 var(--font-mono);
 }
 
 .mint-jobs-tray__count {
-  background: var(--bg-secondary);
-  color: var(--color-primary);
+  /* Darken, not lighten: white text keeps >= 4.5:1 on any primary (indigo or the platform teal). */
+  background: rgb(0 0 0 / 0.4);
+  color: inherit;
 }
 
 .mint-jobs-tray__backdrop {
@@ -87,7 +92,7 @@
   overflow: hidden;
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
-  background: var(--bg-secondary);
+  background: var(--bg-card);
   box-shadow: var(--shadow-lg);
 }
 
@@ -102,21 +107,28 @@
 
 .mint-jobs-tray__header {
   justify-content: space-between;
-  padding: 1rem 1.125rem;
+  padding: 0.75rem 0.75rem 0.75rem 1rem;
   border-bottom: 1px solid var(--border-color);
 }
 
+.mint-jobs-tray__header > div:first-child {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
 .mint-jobs-tray__title {
   margin: 0;
   color: var(--text-primary);
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 600;
 }
 
 .mint-jobs-tray__subtitle {
-  margin: 0.2rem 0 0;
+  margin: 0;
   color: var(--text-secondary);
-  font: 0.6875rem/1.3 'Fira Code', monospace;
+  font: 0.6875rem/1.3 var(--font-mono);
 }
 
 .mint-jobs-tray__header-actions {
@@ -172,7 +184,7 @@
   border: 0;
   background: transparent;
   color: var(--text-secondary-strong);
-  font: 500 0.8125rem/1 'Fira Sans', sans-serif;
+  font: 500 0.8125rem/1 var(--font-sans);
   cursor: pointer;
 }
 
@@ -196,7 +208,7 @@
 }
 
 .mint-jobs-tray__error {
-  margin: 0.75rem 1rem 0;
+  margin: 0.75rem 1rem;
   padding: 0.625rem 0.75rem;
   border: 1px solid var(--mint-error-border);
   border-radius: var(--radius-md);
@@ -208,7 +220,6 @@
 .mint-jobs-tray__body {
   flex: 1;
   overflow-y: auto;
-  padding: 0.875rem;
   scrollbar-color: var(--scrollbar-thumb) transparent;
 }
 
@@ -220,21 +231,15 @@
   font-size: 0.8125rem;
 }
 
+/* 2f: rows + hairlines, no card per job. */
 .mint-jobs-tray__job {
-  padding: 0.875rem;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  background: var(--bg-card);
-  box-shadow: var(--shadow-sm);
-}
-
-.mint-jobs-tray__job + .mint-jobs-tray__job {
-  margin-top: 0.625rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-light);
 }
 
-.mint-jobs-tray__job--active {
-  border-color: var(--mint-info-border);
-  background: linear-gradient(135deg, var(--bg-card), var(--mint-info-bg));
+/* The one state that needs a person: tinted and pinned first. */
+.mint-jobs-tray__job--awaiting-input {
+  background: var(--mint-warning-bg);
 }
 
 .mint-jobs-tray__job-heading,
@@ -244,6 +249,7 @@
 }
 
 .mint-jobs-tray__job-identity {
+  flex: 1;
   min-width: 0;
 }
 
@@ -267,48 +273,55 @@
   display: block;
   margin-top: 0.125rem;
   color: var(--text-secondary);
-  font: 0.6875rem/1.3 'Fira Code', monospace;
+  font: 0.6875rem/1.3 var(--font-mono);
 }
 
+/* Status: tone dot + neutral text. Only "waiting for input" and "failed"
+   color their text. */
 .mint-jobs-tray__status {
+  display: inline-flex;
   flex: 0 0 auto;
-  padding: 0.25rem 0.5rem;
-  border: 1px solid var(--border-color);
-  border-radius: 9999px;
-  background: var(--bg-tertiary);
+  align-items: center;
+  gap: 0.375rem;
   color: var(--text-secondary-strong);
-  font-size: 0.6875rem;
-  font-weight: 600;
+  font-size: 0.75rem;
+  --mint-jobs-tray-tone: var(--text-muted);
 }
 
-.mint-jobs-tray__status--awaiting-input,
-.mint-jobs-tray__status--queued {
-  border-color: var(--mint-warning-border);
-  background: var(--mint-warning-bg);
-  color: var(--mint-warning-hover);
+.mint-jobs-tray__status-dot {
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 9999px;
+  background: var(--mint-jobs-tray-tone);
 }
 
-.mint-jobs-tray__status--running {
-  border-color: var(--mint-info-border);
-  background: var(--mint-info-bg);
-  color: var(--mint-info);
-}
+.mint-jobs-tray__status--running { --mint-jobs-tray-tone: var(--mint-info); }
+.mint-jobs-tray__status--completed { --mint-jobs-tray-tone: var(--mint-success); }
 
-.mint-jobs-tray__status--completed {
-  border-color: var(--mint-success-border);
-  background: var(--mint-success-bg);
-  color: var(--mint-success-hover);
+.mint-jobs-tray__status--awaiting-input {
+  --mint-jobs-tray-tone: var(--mint-warning);
+  color: var(--mint-warning-text);
+  font-weight: 600;
 }
 
 .mint-jobs-tray__status--failed {
-  border-color: var(--mint-error-border);
-  background: var(--mint-error-bg);
-  color: var(--mint-error);
+  --mint-jobs-tray-tone: var(--mint-error);
+  color: var(--_ink-error);
+}
+
+.mint-jobs-tray__percent {
+  flex: 0 0 auto;
+  min-width: 2.125rem;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
 }
 
 .mint-jobs-tray__progress {
-  height: 0.375rem;
-  margin-top: 0.75rem;
+  height: 2px;
+  margin-top: 0.5rem;
   overflow: hidden;
   border-radius: 9999px;
   background: var(--bg-tertiary);
@@ -317,16 +330,15 @@
 .mint-jobs-tray__progress span {
   display: block;
   height: 100%;
-  border-radius: inherit;
   background: var(--color-primary);
   transition: width var(--mint-transition);
 }
 
 .mint-jobs-tray__job-footer {
   min-height: 1.75rem;
-  margin-top: 0.625rem;
+  margin-top: 0.375rem;
   color: var(--text-secondary);
-  font-size: 0.6875rem;
+  font-size: 0.75rem;
 }
 
 .mint-jobs-tray__action {
@@ -336,7 +348,7 @@
   border-radius: var(--radius);
   background: var(--bg-secondary);
   color: var(--text-secondary-strong);
-  font: 500 0.6875rem/1 'Fira Sans', sans-serif;
+  font: 500 0.75rem/1 var(--font-sans);
   cursor: pointer;
   transition: background var(--mint-transition), border-color var(--mint-transition), color var(--mint-transition);
 }
@@ -347,6 +359,18 @@
   gap: 0.25rem;
 }
 
+/* 2f: the inline action of a row waiting for input is the primary one. */
+.mint-jobs-tray__job--awaiting-input .mint-jobs-tray__action:not(.mint-jobs-tray__action--danger) {
+  border-color: var(--color-primary);
+  background: var(--color-primary);
+  color: white;
+}
+
+.mint-jobs-tray__job--awaiting-input .mint-jobs-tray__action:not(.mint-jobs-tray__action--danger):hover {
+  border-color: var(--color-primary-hover);
+  background: var(--color-primary-hover);
+}
+
 .mint-jobs-tray__action--danger {
   border-color: var(--mint-error-border);
   color: var(--mint-error);
@@ -358,7 +382,8 @@
 
 .mint-jobs-tray__clear-row {
   justify-content: flex-end;
-  margin-bottom: 0.625rem;
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--border-light);
 }
 
 .mint-jobs-tray button:disabled {
@@ -413,8 +438,4 @@
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
   }
-
-  .mint-jobs-tray__trigger:hover {
-    transform: none;
-  }
 }

package/src/styles/components/loading-spinner.css

@@ -65,3 +65,21 @@
     transform: rotate(360deg);
   }
 }
+
+/* Reduced motion: a slow opacity pulse instead of rotation (10c, same as 3e).
+   !important outranks the global reduced-motion block, which caps every animation. */
+@keyframes mint-spinner-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.55;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mint-spinner__svg {
+    animation: mint-spinner-pulse 1.6s ease-in-out infinite !important;
+  }
+}

package/src/styles/components/mobile-support-gate.css

@@ -7,8 +7,8 @@
   place-items: center;
   padding: 1.5rem;
   overflow-x: hidden;
-  background: var(--bg-primary, #f8fafc);
-  color: var(--text-primary, #0f172a);
+  background: var(--bg-primary);
+  color: var(--text-primary);
 }
 
 .mint-mobile-support-gate *,
@@ -23,10 +23,10 @@
   display: grid;
   gap: 1rem;
   padding: 1.5rem;
-  border: 1px solid var(--border-color, #e2e8f0);
+  border: 1px solid var(--border-color);
   border-radius: 0.5rem;
-  background: var(--bg-secondary, #ffffff);
-  box-shadow: var(--shadow-md, 0 10px 30px rgb(15 23 42 / 0.08));
+  background: var(--bg-secondary);
+  box-shadow: var(--shadow-md);
 }
 
 .mint-mobile-support-gate__mark {
@@ -35,10 +35,10 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid color-mix(in srgb, var(--color-primary, #4f46e5) 22%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
   border-radius: 0.5rem;
-  background: color-mix(in srgb, var(--color-primary, #4f46e5) 10%, transparent);
-  color: var(--color-primary, #4f46e5);
+  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  color: var(--color-primary);
 }
 
 .mint-mobile-support-gate__icon {
@@ -54,17 +54,15 @@
 
 .mint-mobile-support-gate__eyebrow {
   margin: 0;
-  color: var(--text-muted, #64748b);
+  color: var(--text-secondary);
   font-size: 0.75rem;
   font-weight: 700;
-  letter-spacing: 0;
   line-height: 1.3;
-  text-transform: uppercase;
 }
 
 .mint-mobile-support-gate__title {
   margin: 0;
-  color: var(--text-primary, #0f172a);
+  color: var(--text-primary);
   font-size: 1.35rem;
   font-weight: 700;
   letter-spacing: 0;
@@ -74,7 +72,7 @@
 
 .mint-mobile-support-gate__message {
   margin: 0;
-  color: var(--text-secondary, #475569);
+  color: var(--text-secondary);
   font-size: 0.95rem;
   line-height: 1.55;
   overflow-wrap: anywhere;
@@ -86,10 +84,10 @@
   align-items: flex-start;
   gap: 0.625rem;
   padding: 0.75rem;
-  border: 1px solid var(--border-color, #e2e8f0);
+  border: 1px solid var(--border-color);
   border-radius: 0.5rem;
-  background: var(--bg-tertiary, #f1f5f9);
-  color: var(--text-secondary, #475569);
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
   font-size: 0.875rem;
   line-height: 1.45;
   overflow-wrap: anywhere;
@@ -100,7 +98,7 @@
   height: 1rem;
   flex: 0 0 auto;
   margin-top: 0.125rem;
-  color: var(--color-primary, #4f46e5);
+  color: var(--color-primary);
 }
 
 @media (max-width: 480px) {

package/src/styles/components/modal.css

@@ -52,10 +52,8 @@
   flex-direction: column;
   background-color: var(--bg-card);
   border: 1px solid var(--border-color);
-  border-radius: 0.875rem;
-  box-shadow:
-    0 1.875rem 3.75rem -1.25rem rgba(15, 23, 42, 0.4),
-    0 0.75rem 1.5rem -0.5rem rgba(15, 23, 42, 0.2);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
   overflow: hidden;
 }
 
@@ -70,22 +68,18 @@
 .mint-modal__container--drawer {
   max-height: 100vh;
   height: 100vh;
-  border-radius: 0.875rem 0 0 0.875rem;   /* radius drops on right edge */
+  border-radius: var(--radius-lg) 0 0 var(--radius-lg);   /* radius drops on right edge */
   border-right: none;
-  box-shadow:
-    -1.25rem 0 3.75rem -1.25rem rgba(15, 23, 42, 0.4),
-    -0.5rem 0 1.5rem -0.5rem rgba(15, 23, 42, 0.2);   /* shadow casts leftward */
+  box-shadow: var(--shadow-lg);
 }
 
 /* ---------- Sheet variant — bottom-edge anchored, top-only radius ---------- */
 
 .mint-modal__container--sheet {
   max-height: calc(100vh - 3rem);
-  border-radius: 0.875rem 0.875rem 0 0;   /* top corners only */
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;   /* top corners only */
   border-bottom: none;
-  box-shadow:
-    0 -1.25rem 3.75rem -1.25rem rgba(15, 23, 42, 0.4),
-    0 -0.5rem 1.5rem -0.5rem rgba(15, 23, 42, 0.2);   /* shadow casts upward */
+  box-shadow: var(--shadow-lg);
 }
 
 /* ========================================================================
@@ -278,7 +272,7 @@
 }
 
 .mint-modal__tab-meta {
-  font-family: 'Fira Code', monospace;
+  font-family: var(--font-mono);
   font-size: 0.6875rem;
   font-weight: 400;
   color: var(--text-muted);
@@ -301,7 +295,7 @@
    ======================================================================== */
 
 .mint-modal__split {
-  flex: 1;
+  flex: 1 1 auto;              /* basis = the fixed height below; `flex: 1` (basis 0) let the pane size to its content */
   min-height: 0;
   display: grid;
   grid-template-columns: 13.5rem minmax(0, 1fr);
@@ -325,32 +319,45 @@
   gap: 2px;
 }
 
+/* Section heading + divider between rail sections (e.g. Plugin / Personal). */
+.mint-modal__rail-section {
+  padding: 0.25rem 0.5rem 0.375rem;
+  font-size: 0.6875rem;
+  color: var(--text-secondary);
+}
+
+.mint-modal__rail-divider {
+  height: 1px;
+  margin: 0.5rem;
+  background-color: var(--border-color);
+}
+
 .mint-modal__rail-item {
   display: flex;
   align-items: center;
-  gap: 0.5625rem;
+  gap: 0.5rem;
   width: 100%;
-  min-height: 2.25rem;
-  padding: 0.4375rem 0.625rem;
+  min-height: 2rem;
+  padding: 0.375rem 0.5rem;
   border: none;
-  border-radius: 0.4375rem;
+  border-radius: var(--radius);
   background: transparent;
   font-family: inherit;
   font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--text-secondary);
+  font-weight: 400;
+  color: var(--text-secondary-strong);
   text-align: left;
   cursor: pointer;
   transition: background-color var(--mint-transition), color var(--mint-transition);
 }
 
-.mint-modal__rail-item:hover:not(.mint-modal__rail-item--disabled) {
-  background-color: var(--bg-tertiary);
+.mint-modal__rail-item:hover:not(.mint-modal__rail-item--disabled, .mint-modal__rail-item--active) {
+  background-color: var(--bg-hover);
 }
 
 .mint-modal__rail-item:focus-visible {
   outline: none;
-  box-shadow: var(--focus-ring-soft);
+  box-shadow: var(--focus-ring-offset);
 }
 
 /* Active = raised card, matching the 1.1 card language (not a primary fill). */
@@ -358,7 +365,7 @@
   background-color: var(--bg-card);
   color: var(--text-primary);
   font-weight: 600;
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+  box-shadow: var(--shadow-sm);
 }
 
 .mint-modal__rail-item--disabled {
@@ -368,9 +375,9 @@
 
 .mint-modal__rail-item-icon {
   flex-shrink: 0;
-  width: 0.9375rem;
-  height: 0.9375rem;
-  color: var(--text-muted);
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--text-secondary);
 }
 
 .mint-modal__rail-item-icon svg {
@@ -412,7 +419,7 @@
 
 .mint-modal__rail-item-meta {
   flex-shrink: 0;
-  font-family: 'Fira Code', monospace;
+  font-family: var(--font-mono);
   font-size: 0.6875rem;
   font-weight: 400;
   color: var(--text-muted);
@@ -487,15 +494,21 @@
 
   .mint-modal__rail-items {
     flex-direction: row;
+    flex-shrink: 0;
   }
 
+  /* Items keep their label width and the strip scrolls, instead of squeezing labels letter by letter. */
   .mint-modal__rail-item {
+    flex-shrink: 0;
     width: auto;
     min-height: 2.375rem;
+    white-space: nowrap;
   }
 
   /* Strip stays compact */
-  .mint-modal__rail-item-description {
+  .mint-modal__rail-item-description,
+  .mint-modal__rail-section,
+  .mint-modal__rail-divider {
     display: none;
   }
 
@@ -613,12 +626,10 @@
     max-width: 100%;
     max-height: calc(100vh - 3rem);
     height: auto;
-    border-radius: 0.875rem 0.875rem 0 0;
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
     border-bottom: none;
     border-right: 1px solid var(--border-color);   /* restore right border for full-width */
-    box-shadow:
-      0 -1.25rem 3.75rem -1.25rem rgba(15, 23, 42, 0.4),
-      0 -0.5rem 1.5rem -0.5rem rgba(15, 23, 42, 0.2);
+    box-shadow: var(--shadow-lg);
   }
 
   /* All size variants collapse to 100% width under mobile */

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

@@ -10,13 +10,24 @@
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
+/* Dark --border-light equals --bg-card; row and band hairlines need --border-color there. */
+:where(html.dark) .mint-molecule-input {
+  --border-light: var(--border-color);
+}
+
+/* Field rules (1a / 1e). */
+.mint-molecule-input:hover:not(:focus-within):not(.mint-molecule-input--error) {
+  border-color: var(--_field-border-hover);
+}
+
 .mint-molecule-input:focus-within {
-  border-color: transparent;
-  box-shadow: var(--focus-ring);
+  border-color: var(--color-primary);
+  box-shadow: var(--focus-ring-soft);
 }
 
 .mint-molecule-input--disabled {
-  opacity: var(--mint-disabled-opacity);
+  background-color: var(--bg-tertiary);
+  color: var(--text-muted);
   pointer-events: none;
 }
 
@@ -29,7 +40,7 @@
 }
 
 .mint-molecule-input--error:focus-within {
-  box-shadow: var(--focus-ring-error);
+  box-shadow: var(--focus-ring-soft-error);
 }
 
 /* Editor container */
@@ -117,18 +128,16 @@
 /* SMILES preview */
 .mint-molecule-input__smiles {
   padding: 0.5rem 0.75rem;
-  font-family: 'Fira Code', monospace;
+  font-family: var(--font-mono);
   font-size: 0.75rem;
-  color: var(--text-secondary);
-  background-color: var(--bg-tertiary);
-  border-top: 1px solid var(--border-color);
+  color: var(--text-secondary-strong);
+  border-top: 1px solid var(--border-light);
   word-break: break-all;
   user-select: all;
 }
 
 .mint-molecule-input__smiles-label {
-  font-weight: 500;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   margin-right: 0.5rem;
 }
 
@@ -152,20 +161,21 @@
 .mint-molecule-input__actions {
   display: flex;
   gap: 0.25rem;
-  padding: 0.5rem;
-  background-color: var(--bg-tertiary);
-  border-top: 1px solid var(--border-color);
+  padding: 0.25rem 0.375rem;
+  border-top: 1px solid var(--border-light);
 }
 
 .mint-molecule-input__action-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0.375rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
   background: transparent;
   border: none;
-  border-radius: var(--radius-sm);
-  color: var(--text-muted);
+  border-radius: var(--radius);
+  color: var(--text-secondary-strong);
   cursor: pointer;
   transition: color 0.15s ease, background-color 0.15s ease;
 }
@@ -175,6 +185,11 @@
   background-color: var(--bg-hover);
 }
 
+.mint-molecule-input__action-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+}
+
 .mint-molecule-input__action-btn:disabled {
   opacity: var(--mint-disabled-opacity);
   cursor: not-allowed;