@morscherlab/mint-sdk 1.4.0-beta.8 → 1.4.0

package/src/styles/components/onboarding.css

@@ -0,0 +1,368 @@
+/* Onboarding: the top-bar Help button and checklist chip, the Help panel,
+ * the tour layer (scrim, hole, card) and the what's-new dots. */
+
+:root {
+  --mint-onboarding-scrim: rgba(15, 23, 42, 0.45);
+}
+
+html.dark {
+  --mint-onboarding-scrim: rgba(2, 6, 23, 0.62);
+}
+
+/* ---- Top bar ---- */
+
+.mint-onboarding-help {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.mint-topbar__settings-btn--open {
+  background: var(--color-primary-soft);
+  color: var(--_ink-primary);
+}
+
+.mint-onboarding-help__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  height: 2rem;
+  padding: 0 0.625rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text-primary);
+  font: 500 0.8125rem/1 var(--font-sans);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--mint-transition), border-color var(--mint-transition);
+}
+
+.mint-onboarding-help__chip:hover {
+  background: var(--bg-hover);
+}
+
+.mint-onboarding-help__chip--open {
+  border-color: var(--color-primary);
+  background: var(--color-primary-soft);
+  color: var(--_ink-primary);
+}
+
+.mint-onboarding-help__chip:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+}
+
+.mint-onboarding-help__count {
+  color: var(--text-muted);
+  font: 500 0.75rem/1 var(--font-mono);
+}
+
+.mint-onboarding-help__bar {
+  width: 1.75rem;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--bg-tertiary);
+  overflow: hidden;
+}
+
+.mint-onboarding-help__bar > span {
+  display: block;
+  height: 100%;
+  background: var(--color-primary);
+  transition: width var(--mint-transition);
+}
+
+.mint-onboarding-help__badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background: var(--color-primary);
+  color: var(--text-on-accent);
+  font: 600 11px/16px var(--font-sans);
+  text-align: center;
+  box-shadow: 0 0 0 2px var(--bg-card);
+}
+
+/* ---- Help panel ---- */
+
+.mint-onboarding-help__panel {
+  position: fixed;
+  z-index: var(--mint-z-tray);
+  width: 18rem;
+  padding: 0 0 4px;
+  overflow: hidden;
+}
+
+.mint-onboarding-help__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 0.75rem 0.5rem;
+}
+
+.mint-onboarding-help__heading {
+  color: var(--text-secondary);
+  font-size: 0.6875rem;
+  font-weight: 600;
+}
+
+.mint-onboarding-help__progress {
+  height: 3px;
+  margin: 0 0.75rem 0.25rem;
+  border-radius: 2px;
+  background: var(--bg-tertiary);
+  overflow: hidden;
+}
+
+.mint-onboarding-help__progress > span {
+  display: block;
+  height: 100%;
+  background: var(--color-primary);
+  transition: width var(--mint-transition);
+}
+
+.mint-onboarding-help__todos {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.mint-onboarding-help__todo {
+  display: grid;
+  grid-template-columns: 1rem 1fr auto;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 1.875rem;
+  padding: 0 0.75rem;
+  color: var(--text-primary);
+  font-size: 0.8125rem;
+}
+
+.mint-onboarding-help__check {
+  display: grid;
+  place-items: center;
+  width: 1rem;
+  height: 1rem;
+  box-sizing: border-box;
+  border: 1.5px solid var(--border-color);
+  border-radius: 50%;
+}
+
+.mint-onboarding-help__todo--done .mint-onboarding-help__check {
+  border: 0;
+  background: var(--color-primary);
+  color: var(--text-on-accent);
+}
+
+.mint-onboarding-help__todo--done .mint-onboarding-help__todo-title {
+  color: var(--text-muted);
+}
+
+.mint-onboarding-help__link {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--_ink-primary);
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.mint-onboarding-help__link:hover {
+  text-decoration: underline;
+}
+
+.mint-onboarding-help__link:focus-visible {
+  outline: none;
+  border-radius: var(--radius-sm);
+  box-shadow: var(--focus-ring-offset);
+}
+
+.mint-onboarding-help__hide {
+  display: block;
+  text-align: left;
+  margin: 0.25rem 0.75rem 0.5rem;
+  color: var(--text-secondary);
+}
+
+.mint-onboarding-help__section {
+  padding: 0.625rem 0.75rem 0.25rem;
+  border-top: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  font-size: 0.6875rem;
+  font-weight: 600;
+}
+
+.mint-onboarding-help__icon {
+  width: 0.8125rem;
+  height: 0.8125rem;
+  flex-shrink: 0;
+  color: var(--text-muted);
+}
+
+.mint-onboarding-help__panel > .mint-menu-item {
+  width: calc(100% - 8px);
+  margin: 0 4px;
+}
+
+.mint-onboarding-help__new {
+  margin-left: auto;
+  padding: 3px 4px;
+  border-radius: var(--radius-sm);
+  background: var(--color-primary);
+  color: var(--text-on-accent);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  line-height: 1;
+}
+
+/* ---- Tour layer ---- */
+
+.mint-onboarding {
+  position: fixed;
+  inset: 0;
+  z-index: var(--mint-z-tour);
+  pointer-events: none;
+}
+
+/* Takes every click outside the card. An advanceOn 'click' step cuts the hole out of it. */
+.mint-onboarding__blocker {
+  position: absolute;
+  inset: 0;
+  pointer-events: auto;
+}
+
+.mint-onboarding__hole {
+  position: fixed;
+  border-radius: var(--radius-lg);
+  box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 9999px var(--mint-onboarding-scrim);
+  pointer-events: none;
+  transition: left 200ms ease, top 200ms ease, width 200ms ease, height 200ms ease;
+}
+
+.mint-onboarding__card {
+  position: fixed;
+  display: grid;
+  gap: 0.5rem;
+  box-sizing: border-box;
+  width: 17rem;
+  max-width: calc(100vw - 24px);
+  padding: 0.875rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  background: var(--bg-card);
+  box-shadow: var(--shadow-lg);
+  color: var(--text-primary);
+  pointer-events: auto;
+}
+
+.mint-onboarding__card:focus {
+  outline: none;
+}
+
+.mint-onboarding__close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  display: grid;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+
+.mint-onboarding__close:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.mint-onboarding__close:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+}
+
+.mint-onboarding__title {
+  margin: 0;
+  padding-right: 1.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.mint-onboarding__body {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  line-height: 1.45;
+}
+
+.mint-onboarding__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.375rem;
+  margin-top: 0.25rem;
+}
+
+.mint-onboarding__count {
+  color: var(--text-muted);
+  font: 500 0.75rem/1.5rem var(--font-mono);
+  margin-top: -0.375rem;
+}
+
+/* Read by screen readers only. */
+.mint-onboarding__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.mint-onboarding__hint {
+  margin-right: auto;
+  color: var(--text-muted);
+  font-size: 0.75rem;
+}
+
+/* A dot at the top-right corner of an element with unseen news. */
+.mint-onboarding__dot {
+  position: fixed;
+  z-index: 40;
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--color-primary);
+  box-shadow: 0 0 0 2px var(--bg-card);
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+}
+
+.mint-onboarding__dot:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mint-onboarding-help__chip,
+  .mint-onboarding-help__bar > span,
+  .mint-onboarding-help__progress > span,
+  .mint-onboarding__hole {
+    transition: none;
+  }
+}

package/src/styles/components/pill.css

@@ -4,7 +4,8 @@
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
-  border-radius: 9999px;
+  /* Tags, not capsules: only the status dot stays round. */
+  border-radius: var(--radius);
   font-weight: 500;
   line-height: 1;
   white-space: nowrap;
@@ -156,7 +157,7 @@ html.dark .mint-pill--soft {
   padding: 0.0625rem;
   margin-left: 0.125rem;
   margin-right: -0.125rem;
-  border-radius: 9999px;
+  border-radius: var(--radius-sm);
   background: transparent;
   border: none;
   cursor: pointer;

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

@@ -211,7 +211,6 @@
   border-color: transparent;
   background: var(--_slot);
   color: white;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
 }
 
 .mint-plate-editor__slot:focus-visible {

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

@@ -1,12 +1,12 @@
-/* PluginIcon — BEM. Renders a plugin's icon inside a sized chip with two
-   visual variants. Tintable via `--mint-plugin-icon-tone` custom property. */
+/* PluginIcon — BEM. Renders a plugin's icon inside a sized chip. Both
+   variants draw one accent-soft tile; an image mark fills the tile instead. */
 
 .mint-plugin-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  border-radius: var(--radius-md, 0.5rem);
+  border-radius: var(--radius-md);
   overflow: hidden;
 }
 
@@ -14,9 +14,9 @@
 .mint-plugin-icon--sm { width: 1.5rem; height: 1.5rem; }
 .mint-plugin-icon--md { width: 2rem;   height: 2rem;   }
 .mint-plugin-icon--topbar { width: 2.25rem; height: 2.25rem; }
-.mint-plugin-icon--lg { width: 3rem;   height: 3rem; border-radius: 0.75rem; }
+.mint-plugin-icon--lg { width: 3rem;   height: 3rem;   }
 
-/* Tones — a `color` prop sets `--mint-plugin-icon-tone` inline and wins over the class. */
+/* Tones (deprecated with the tone/color props, removed in 1.5): the v2 tile no longer reads the variable. */
 .mint-plugin-icon--neutral { --mint-plugin-icon-tone: var(--text-secondary); }
 .mint-plugin-icon--primary { --mint-plugin-icon-tone: var(--color-primary); }
 .mint-plugin-icon--cta     { --mint-plugin-icon-tone: var(--color-cta); }
@@ -25,27 +25,30 @@
 .mint-plugin-icon--error   { --mint-plugin-icon-tone: var(--mint-error); }
 .mint-plugin-icon--info    { --mint-plugin-icon-tone: var(--mint-info); }
 
-/* Variants — `--mint-plugin-icon-tone` falls back to --color-primary */
-.mint-plugin-icon--solid {
-  background-color: var(--mint-plugin-icon-tone, var(--color-primary));
-  color: white;
-}
+/* Variants — no solid colour fills: both render the accent-soft tile. */
+.mint-plugin-icon--solid,
 .mint-plugin-icon--tinted {
-  background-color: color-mix(in srgb, var(--mint-plugin-icon-tone, var(--color-primary)) 12%, transparent);
-  color: var(--mint-plugin-icon-tone, var(--color-primary));
+  background-color: var(--color-primary-soft);
+  color: var(--_ink-primary);
+  box-shadow: inset 0 0 0 1px var(--color-primary-border);
+}
+
+/* An image mark fills the whole tile on a clear background, borderless. */
+.mint-plugin-icon:has(> .mint-plugin-icon__img) {
+  background: transparent;
+  box-shadow: none;
 }
 
-/* Inner svg/img — sized to ~62% of chip */
-.mint-plugin-icon--sm .mint-plugin-icon__svg,
-.mint-plugin-icon--sm .mint-plugin-icon__img { width: 0.9375rem; height: 0.9375rem; }
-.mint-plugin-icon--md .mint-plugin-icon__svg,
-.mint-plugin-icon--md .mint-plugin-icon__img { width: 1.125rem;  height: 1.125rem;  }
-.mint-plugin-icon--topbar .mint-plugin-icon__svg,
-.mint-plugin-icon--topbar .mint-plugin-icon__img { width: 1.25rem; height: 1.25rem; }
-.mint-plugin-icon--lg .mint-plugin-icon__svg,
-.mint-plugin-icon--lg .mint-plugin-icon__img { width: 1.5rem;    height: 1.5rem;    }
-
-.mint-plugin-icon__img {
+/* Inner svg — sized to ~62% of chip */
+.mint-plugin-icon--sm .mint-plugin-icon__svg     { width: 0.9375rem; height: 0.9375rem; }
+.mint-plugin-icon--md .mint-plugin-icon__svg     { width: 1.125rem;  height: 1.125rem;  }
+.mint-plugin-icon--topbar .mint-plugin-icon__svg { width: 1.25rem;   height: 1.25rem;   }
+.mint-plugin-icon--lg .mint-plugin-icon__svg     { width: 1.5rem;    height: 1.5rem;    }
+
+.mint-plugin-icon .mint-plugin-icon__img {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--radius-md);
   object-fit: contain;
 }
 

package/src/styles/components/popover.css

@@ -21,9 +21,9 @@
   flex-direction: column;
   padding: 4px;
   border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-lg);
   background: var(--bg-card);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--mint-shadow-pop);
 }
 
 .mint-menu-item {

package/src/styles/components/presence-avatars.css

@@ -76,7 +76,7 @@
   height: 13px;
   border-radius: 50%;
   background: var(--mint-presence-editing);
-  color: white;
+  color: var(--text-on-accent);
   box-shadow: 0 0 0 2px var(--mint-presence-surface);
 }
 

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;
 }