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

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;
@@ -28,9 +29,11 @@
   font-size: 0.8125rem;
 }
 
-/* Semantic tones — every color resolves from a token. `--mint-pill-tone` is the
-   accent (soft-tint background, dot, outline border); `--mint-pill-ink` the text. */
+/* Tones — every color resolves from a token. `--mint-pill-tone` is the accent
+   (soft-tint background, dot, outline border); `--mint-pill-ink` the text. A
+   `color` prop sets `--mint-pill-tone` inline. */
 .mint-pill--primary { --mint-pill-tone: var(--color-primary); --mint-pill-ink: var(--color-primary-hover); }
+.mint-pill--cta     { --mint-pill-tone: var(--color-cta);     --mint-pill-ink: var(--color-cta-hover); }
 .mint-pill--success { --mint-pill-tone: var(--mint-success);  --mint-pill-ink: var(--mint-success-hover); }
 .mint-pill--warning { --mint-pill-tone: var(--mint-warning);  --mint-pill-ink: var(--mint-warning-text); }
 .mint-pill--error   { --mint-pill-tone: var(--mint-error);    --mint-pill-ink: var(--mint-error-hover); }
@@ -38,6 +41,7 @@
 .mint-pill--neutral { --mint-pill-tone: var(--text-secondary); --mint-pill-ink: var(--text-secondary-strong); }
 
 html.dark .mint-pill--primary,
+html.dark .mint-pill--cta,
 html.dark .mint-pill--success,
 html.dark .mint-pill--warning,
 html.dark .mint-pill--error,
@@ -45,32 +49,24 @@ html.dark .mint-pill--info {
   --mint-pill-ink: var(--mint-pill-tone);
 }
 
-/* Variants */
-.mint-pill--default,
-.mint-pill--neutral {
-  background-color: var(--bg-tertiary);
-  color: var(--text-secondary);
-}
-
-.mint-pill--primary,
-.mint-pill--success,
-.mint-pill--warning,
-.mint-pill--error,
-.mint-pill--info {
+/* Variant: Soft (default) — tinted fill; neutral without `color` is a plain tertiary surface. */
+.mint-pill--soft {
   background-color: color-mix(in srgb, var(--mint-pill-tone) 12%, transparent);
   color: var(--mint-pill-ink);
 }
 
-html.dark .mint-pill--primary,
-html.dark .mint-pill--success,
-html.dark .mint-pill--warning,
-html.dark .mint-pill--error,
-html.dark .mint-pill--info {
+html.dark .mint-pill--soft {
   background-color: color-mix(in srgb, var(--mint-pill-tone) 22%, transparent);
 }
 
+.mint-pill--soft.mint-pill--neutral:where(:not(.mint-pill--accent)) {
+  background-color: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+
 /* Status dot */
 .mint-pill__dot {
+  position: relative;
   flex-shrink: 0;
   width: 0.375rem;
   height: 0.375rem;
@@ -78,32 +74,42 @@ html.dark .mint-pill--info {
   background-color: var(--mint-pill-tone, currentColor);
 }
 
+/* Pulse — expanding ring via ::before, 1.8s loop */
+.mint-pill__dot--pulse::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background-color: var(--mint-pill-tone, currentColor);
+  animation: mint-pill-pulse 1.8s ease-out infinite;
+  pointer-events: none;
+}
+
+@keyframes mint-pill-pulse {
+  0%   { transform: scale(0.6); opacity: 0.6; }
+  100% { transform: scale(1.8); opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mint-pill__dot--pulse::before { animation: none; opacity: 0; }
+}
+
 /* ========================================================================
    Variant: Outline
    ========================================================================
-   Transparent bg, 1px semantic border, semantic text. Quietest treatment.
-   Good on tinted surfaces or in dense lists where Soft Tint's bg would
-   clash.
+   Transparent bg, 1px border in the tone color, tone text. Quietest
+   treatment. Good on tinted surfaces or in dense lists where the soft
+   tint would clash.
    ======================================================================== */
 
 .mint-pill--outline {
   background-color: transparent;
-  border: 1px solid var(--border-color);
-  color: var(--text-secondary);
-}
-
-.mint-pill--outline.mint-pill--neutral { border-color: var(--text-muted); color: var(--text-primary); }
-
-.mint-pill--outline.mint-pill--primary,
-.mint-pill--outline.mint-pill--success,
-.mint-pill--outline.mint-pill--warning,
-.mint-pill--outline.mint-pill--error,
-.mint-pill--outline.mint-pill--info {
-  background-color: transparent;
-  border-color: var(--mint-pill-tone);
+  border: 1px solid var(--mint-pill-tone);
   color: var(--mint-pill-ink);
 }
 
+.mint-pill--outline.mint-pill--neutral:where(:not(.mint-pill--accent)) { border-color: var(--text-muted); color: var(--text-primary); }
+
 /* Disabled */
 .mint-pill--disabled {
   opacity: var(--mint-disabled-opacity);
@@ -151,7 +157,7 @@ html.dark .mint-pill--info {
   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,29 +14,41 @@
 .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;   }
 
-/* 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;
-}
+/* 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); }
+.mint-plugin-icon--success { --mint-plugin-icon-tone: var(--mint-success); }
+.mint-plugin-icon--warning { --mint-plugin-icon-tone: var(--mint-warning); }
+.mint-plugin-icon--error   { --mint-plugin-icon-tone: var(--mint-error); }
+.mint-plugin-icon--info    { --mint-plugin-icon-tone: var(--mint-info); }
+
+/* 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

@@ -0,0 +1,194 @@
+/* PresenceAvatars: an avatar stack that opens a list of who is here.
+ * The editing cue is a ring plus a pencil badge, so it does not depend on
+ * colour only. Light mode uses --color-cta-hover (3:1 on the card), dark
+ * mode --color-cta. --mint-presence-surface is the colour the avatars are
+ * cut out of; set it when the stack sits on another surface. */
+
+.mint-presence {
+  --mint-presence-editing: var(--color-cta-hover);
+  --mint-presence-surface: var(--bg-secondary);
+  position: relative;
+  display: inline-flex;
+}
+
+:where(html.dark) .mint-presence {
+  --mint-presence-editing: var(--color-cta);
+}
+
+.mint-presence__trigger {
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  padding: 0.125rem 0.25rem;
+  border: none;
+  border-radius: var(--radius-md);
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  transition: background-color var(--mint-transition);
+}
+
+.mint-presence__trigger:hover,
+.mint-presence__trigger[aria-expanded='true'] {
+  background: var(--bg-hover);
+}
+
+.mint-presence__trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+}
+
+.mint-presence__stack {
+  display: inline-flex;
+  align-items: center;
+}
+
+.mint-presence__stack > * + * {
+  margin-left: -6px;
+}
+
+.mint-presence__avatar {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  line-height: 0;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px var(--mint-presence-surface);
+}
+
+.mint-presence__avatar--editing {
+  z-index: 1;
+  box-shadow: 0 0 0 2px var(--mint-presence-surface), 0 0 0 4px var(--mint-presence-editing);
+}
+
+.mint-presence__stack > .mint-presence__avatar--editing {
+  margin-right: 4px;
+}
+
+.mint-presence__badge {
+  position: absolute;
+  right: -4px;
+  bottom: -4px;
+  display: grid;
+  place-items: center;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: var(--mint-presence-editing);
+  color: var(--text-on-accent);
+  box-shadow: 0 0 0 2px var(--mint-presence-surface);
+}
+
+.mint-presence__badge svg {
+  width: 7px;
+  height: 7px;
+  stroke-width: 3;
+}
+
+.mint-presence__more {
+  display: inline-grid;
+  place-items: center;
+  min-width: 24px;
+  height: 24px;
+  padding: 0 5px;
+  box-sizing: border-box;
+  border-radius: 9999px;
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  line-height: 1;
+  box-shadow: 0 0 0 2px var(--mint-presence-surface);
+}
+
+.mint-presence__panel {
+  --mint-presence-surface: var(--bg-card);
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 50;
+  width: 17rem;
+  max-width: calc(100vw - 2rem);
+  padding: 0.375rem;
+  border-radius: var(--radius-lg);
+}
+
+.mint-presence__head {
+  display: flex;
+  align-items: baseline;
+  gap: 0.375rem;
+  margin-bottom: 0.25rem;
+  padding: 0.375rem 0.5rem 0.5rem;
+  border-bottom: 1px solid var(--border-light);
+  color: var(--text-secondary);
+  font-size: 0.6875rem;
+  font-weight: 600;
+}
+
+.mint-presence__count {
+  font-family: var(--font-mono);
+}
+
+.mint-presence__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.mint-presence__row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.3125rem 0.5rem;
+  border-radius: var(--radius);
+}
+
+.mint-presence__row + .mint-presence__row {
+  margin-top: 0.125rem;
+}
+
+.mint-presence__name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-primary);
+  font-size: 0.78125rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mint-presence__activity {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--text-secondary);
+  font-size: 0.71875rem;
+  white-space: nowrap;
+}
+
+.mint-presence__activity svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+/* Mixed toward --text-primary so the label reads at 4.5:1 in both themes. */
+.mint-presence__activity--editing {
+  color: color-mix(in srgb, var(--mint-presence-editing) 75%, var(--text-primary));
+  font-weight: 600;
+}
+
+.mint-presence__rest,
+.mint-presence__foot {
+  margin: 0;
+  padding: 0.375rem 0.5rem 0.25rem;
+  color: var(--text-secondary);
+  font-size: 0.6875rem;
+  line-height: 1.5;
+}
+
+.mint-presence__foot {
+  margin-top: 0.25rem;
+  border-top: 1px solid var(--border-light);
+}

package/src/styles/components/progress-bar.css

@@ -46,6 +46,8 @@
 .mint-progress__bar--success { background-color: var(--mint-success); }
 .mint-progress__bar--warning { background-color: var(--mint-warning); }
 .mint-progress__bar--error   { background-color: var(--mint-error); }
+.mint-progress__bar--cta     { background-color: var(--color-cta); }
+.mint-progress__bar--neutral { background-color: var(--text-muted); }
 .mint-progress__bar--info    { background-color: var(--color-primary); } /* 6b: progress fill is always primary; --mint-info is for the running dot */
 
 .mint-progress__bar--indeterminate {

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