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

package/src/styles/components/onboarding.css

@@ -39,6 +39,44 @@ html.dark {
   transition: background-color var(--mint-transition), border-color var(--mint-transition);
 }
 
+/* The close button sits inside the chip border, so the chip keeps room for it. */
+.mint-onboarding-help__chip-group {
+  position: relative;
+  display: inline-flex;
+}
+
+.mint-onboarding-help__chip-group .mint-onboarding-help__chip {
+  padding-right: 2rem;
+}
+
+.mint-onboarding-help__chip-close {
+  position: absolute;
+  top: 50%;
+  right: 0.25rem;
+  display: grid;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  transform: translateY(-50%);
+  transition: background-color var(--mint-transition), color var(--mint-transition);
+}
+
+.mint-onboarding-help__chip-close:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.mint-onboarding-help__chip-close:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+}
+
 .mint-onboarding-help__chip:hover {
   background: var(--bg-hover);
 }
@@ -360,6 +398,7 @@ html.dark {
 
 @media (prefers-reduced-motion: reduce) {
   .mint-onboarding-help__chip,
+  .mint-onboarding-help__chip-close,
   .mint-onboarding-help__bar > span,
   .mint-onboarding-help__progress > span,
   .mint-onboarding__hole {

package/src/styles/components/pill.css

@@ -33,7 +33,7 @@
    (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--cta     { --mint-pill-tone: var(--color-primary);     --mint-pill-ink: var(--color-primary-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); }

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

@@ -16,10 +16,10 @@
 .mint-plugin-icon--topbar { width: 2.25rem; height: 2.25rem; }
 .mint-plugin-icon--lg { width: 3rem;   height: 3rem;   }
 
-/* Tones (deprecated with the tone/color props, removed in 1.5): the v2 tile no longer reads the variable. */
+/* Tones (deprecated with the tone/color props, removed in 2.0): 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--cta     { --mint-plugin-icon-tone: var(--color-primary); }
 .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); }

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

@@ -1,18 +1,18 @@
 /* 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
+ * colour only. Light mode uses --color-primary-hover (3:1 on the card), dark
+ * mode --color-primary. --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-editing: var(--color-primary-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-editing: var(--color-primary);
 }
 
 .mint-presence__trigger {

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

@@ -46,7 +46,7 @@
 .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--cta     { background-color: var(--color-primary); }
 .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 */
 

package/src/styles/components/section-card.css

@@ -27,6 +27,11 @@
   min-height: 0;
 }
 
+/* A collapsed fill card gives its track back to its siblings. */
+.mint-section-card--fill.mint-section-card--collapsed {
+  flex: none;
+}
+
 .mint-section-card--fill .mint-section-card__body {
   flex: 1;
   min-height: 0;
@@ -41,7 +46,7 @@
   min-height: 2.5rem;
   /* 4px block padding: a 28px header control plus padding plus the 1px rule
      stays inside the 40px strip (6px made it 41px). */
-  padding: 0.25rem 0.625rem 0.25rem 0.75rem;
+  padding: 0.25rem 0.625rem 0.25rem var(--mint-section-card-inset);
   border-bottom: 1px solid var(--border-color);
   flex-shrink: 0;
 }
@@ -50,6 +55,45 @@
   border-bottom-color: var(--border-light);
 }
 
+/* A collapsed card is its header alone: no rule under it. */
+.mint-section-card__header--collapsed {
+  border-bottom-color: transparent;
+}
+
+.mint-section-card__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mint-section-card-gap);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.mint-section-card__toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+  border-radius: var(--radius-sm);
+}
+
+.mint-section-card__chevron {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--text-muted);
+  transition: transform var(--mint-transition);
+}
+
+.mint-section-card__toggle[aria-expanded="false"] .mint-section-card__chevron {
+  transform: rotate(-90deg);
+}
+
+.mint-section-card__toggle:hover .mint-section-card__chevron {
+  color: var(--text-secondary);
+}
+
 /* Muted icon, no tinted chip: every accent renders the same. */
 .mint-section-card__icon-chip {
   display: inline-flex;
@@ -97,7 +141,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5rem 1rem;
+  /* Text starts on the card inset; controls end where the header's do. */
+  padding: 0.5rem 0.625rem 0.5rem var(--mint-section-card-inset);
   border-top: 1px solid var(--border-color);
   background: var(--bg-primary);
   font-size: 0.75rem;
@@ -118,7 +163,7 @@
   display: flex;
   align-items: center;
   gap: var(--mint-section-card-gap);
-  padding: 0.375rem 0.75rem;
+  padding: 0.375rem var(--mint-section-card-inset);
   background: var(--bg-secondary);
   transition: background-color var(--mint-transition);
 }
@@ -153,12 +198,26 @@ button.mint-section-card__row:hover {
 /* Comfortable density gives the header and rows back their height. */
 [data-density="comfortable"] .mint-section-card__header {
   min-height: 2.75rem;
-  padding: 0.25rem 0.75rem 0.25rem 0.875rem;
+  padding-right: 0.75rem;
+}
+
+[data-density="comfortable"] .mint-section-card__footer {
+  padding-right: 0.75rem;
 }
 
 [data-density="comfortable"] .mint-section-card__row {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  /* Same left inset as the header, so row content lines up under the header. */
-  padding-left: 0.875rem;
+}
+
+/* A table that is the card body's own child starts and ends on the card's text
+   inset, so its first column lines up under the header title. A table inside a
+   padded wrapper keeps its padding, and the checkbox and actions columns stay
+   centred controls. The table's size padding uses !important, so this must too. */
+.mint-section-card__body > .mint-dataframe :is(.mint-dataframe__th, .mint-dataframe__td):first-child:not(.mint-dataframe__th--checkbox, .mint-dataframe__td--checkbox) {
+  padding-left: var(--mint-section-card-inset) !important;
+}
+
+.mint-section-card__body > .mint-dataframe :is(.mint-dataframe__th, .mint-dataframe__td):last-child:not(.mint-dataframe__th--actions, .mint-dataframe__td--actions) {
+  padding-right: var(--mint-section-card-inset) !important;
 }

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

@@ -226,7 +226,7 @@
 .mint-sequence-input__problem--error .mint-sequence-input__problem-shape { fill: var(--mint-error); }
 
 .mint-sequence-input__problem-mark {
-  stroke: white;
+  stroke: var(--text-on-danger);
   stroke-width: 1.6;
   stroke-linecap: round;
 }

package/src/styles/components/slider.css

@@ -56,7 +56,7 @@
   box-sizing: border-box;
   transform: translateX(-50%) translateY(-50%);
   border-radius: 9999px;
-  background-color: #FFFFFF;
+  background-color: var(--control-knob);
   border: 1px solid color-mix(in srgb, var(--text-secondary) 40%, transparent);
   box-shadow: var(--shadow-sm);
   pointer-events: none;

package/src/styles/components/toggle.css

@@ -151,7 +151,7 @@
   top: 50%;
   left: 2px;
   border-radius: 9999px;
-  background-color: #FFFFFF;
+  background-color: var(--control-knob);
   box-shadow: var(--shadow-sm);
   transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1);
   pointer-events: none;

package/src/styles/variables.css

@@ -3,8 +3,6 @@
  * @import '@morscherlab/mint-sdk/styles';
  */
 
-@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');
-
 /* Tailwind v4's layer order, declared first so the SDK's base and utilities
    layers sort the same way with or without Tailwind in the host. */
 @layer theme, base, components, utilities;
@@ -61,12 +59,16 @@
   --mint-primary: var(--color-primary);
   /* Text and icons on an accent fill (filled buttons, Save). */
   --text-on-accent: #FFFFFF;
-  /* Retired hues, aliased to the accent until 1.5 (mint doctor warns on use). */
+  /* Text on a --mint-error fill (danger buttons); white in both themes, 3.76:1 on #EF4444. */
+  --text-on-danger: #FFFFFF;
+  /* Knob of a toggle or slider, and the mark of a disabled checkbox; white in both themes. */
+  --control-knob: #FFFFFF;
+  /* Retired hues, aliased to the accent until 2.0 (mint doctor warns on use). */
   --color-cta: var(--color-primary);
   --color-cta-hover: var(--color-primary-hover);
   --color-purple: var(--color-primary);
 
-  /* Entity colors — retired hues, aliased to slate until 1.5. Entities are told
+  /* Entity colors — retired hues, aliased to slate until 2.0. Entities are told
      apart by icon and label, not by hue. Only -hover has no neutral token. */
   --color-experiment: var(--text-secondary-strong);
   --color-experiment-hover: #334155;
@@ -136,6 +138,9 @@
   --mint-gutter: 0.5rem;
   /* Distance from the outermost cards to the window edge, in every density. */
   --mint-page-inset: 1rem;
+  /* Text inset of a SectionCard: its title, row text and table edge columns
+     start here, and page chrome over a card (breadcrumbs) can line up with it. */
+  --mint-section-card-inset: 0.75rem;
 
   /* Semantic colors */
   --mint-success: #10B981;
@@ -379,6 +384,7 @@ html.dark [data-palette="forest"] {
 /* Comfortable density (html[data-density], written by the settings store):
    the pre-v2 control heights and a wider gutter. */
 [data-density="comfortable"] {
+  --mint-section-card-inset: 0.875rem;
   --form-height-sm: 2rem;
   --form-height-md: 2.25rem;
   --form-height-lg: 3rem;

package/src/types/components.ts

@@ -220,6 +220,7 @@ export type PillNavItemInput = (Omit<PillNavItem, 'children'> & {
 export interface PageSelectorItem {
   id: string
   label: string
+  /** A Lucide icon name (`'activity'`, `'flask-conical'`) or a plugin icon (path, data URL, `mint-icon` JSON). Without one the page shows its first letter. */
   icon?: string
   hint?: string
   to?: string
@@ -239,12 +240,32 @@ export interface PluginWorkspaceTopBarSpec {
   logo?: boolean
   /** Centered pill navigation for the local modes of the current route (bind `v-model:pill`). */
   pills?: PillNavItemInput[]
-  /** Show the theme toggle. */
+  /** @deprecated Ignored: the theme toggle always shows. Removed in 2.0. */
   themeToggle?: boolean
-  /** Settings button and modal; `false` hides the button. A getter can switch it per user. */
+  /**
+   * Settings modal of the always-present settings button. `false` (or a getter that returns it)
+   * gives the modal only its Appearance tab; it no longer hides the button.
+   */
   settings?: import('vue').MaybeRefOrGetter<false | TopBarSettingsConfig>
   /** Standalone badge text when the plugin runs outside the platform; `false` hides it. */
   standaloneLabel?: false | string
+  /** Plugin buttons, before the theme and settings buttons. The first two show; the rest go into a More menu. */
+  actions?: TopBarAction[]
+}
+
+/** One plugin button of the top bar. With `icon` it is an icon button and `label` is its accessible name and tooltip. */
+export interface TopBarAction {
+  id: string
+  label: string
+  /** A Lucide icon name, such as `'database'`. */
+  icon?: string
+  /** A small status dot on the button. */
+  dot?: Tone
+  /** Tooltip; defaults to `label`. */
+  title?: string
+  loading?: boolean
+  disabled?: boolean
+  onSelect: () => void
 }
 
 /** Sidebar part of a PluginWorkspaceView spec; also the `:spec` of AppSidebar. */

package/src/types/generated-ui.ts

@@ -132,6 +132,8 @@ export interface GeneratedJobDefinition {
   cpu: number
   /** Who may submit the job when integrated: `use`, `configure` (`plugins.configure`) or `admin`. */
   access?: 'use' | 'configure' | 'admin'
+  /** The plugins that may start the job through the platform: `'readers'` or plugin names. Absent before SDK 1.5. */
+  callers?: 'readers' | string[]
   /** Defaults to process for manifests generated before lifecycle profiles. */
   lifecycle?: GeneratedJobLifecycle
   /** Defaults to `{ kind: 'process' }` for older manifests. */

package/src/types/index.ts

@@ -31,6 +31,7 @@ export type {
   PageSelectorItem,
   PageSelectorItemInput,
   PluginWorkspaceTopBarSpec,
+  TopBarAction,
   PluginWorkspaceSidebarSpec,
   PluginWorkspaceViewSpec,
   // Well Plate types
@@ -219,7 +220,6 @@ export type {
   InstrumentLiveProgress,
   InstrumentLiveStatus,
   InstrumentState,
-  InstrumentStatus,
   InstrumentStatusReporter,
   SampleInfo,
   SampleInfo as InstrumentSampleInfo,

package/src/types/instrument.ts

@@ -24,24 +24,6 @@ export interface SequenceProgress {
   sample_durations?: readonly number[]
 }
 
-/** @deprecated Scheduled for removal in MINT 1.4; instrument monitor types move to the mld-ms plugins. */
-export interface InstrumentStatus {
-  instrument_id: string
-  instrument_name?: string | null
-  monitor_id?: string | null
-  state: InstrumentState
-  active_method?: string | null
-  current_sample?: SampleInfo | null
-  sequence_progress?: SequenceProgress | null
-  timestamp?: string | Date
-  last_seen?: string | Date | null
-  connected?: boolean
-  sequence_file?: string | null
-  sequence_row_index?: number | null
-  current_raw_file?: string | null
-  method_elapsed_pct?: number | null
-}
-
 /** A state the platform derives for an instrument: its reported state, `never` (no report yet) or `inactive`. */
 export type InstrumentBadgeState = InstrumentState | 'never' | 'inactive'
 
@@ -91,7 +73,12 @@ export interface InstrumentLiveStatus {
   current_sample?: SampleInfo | null
   sequence_progress?: InstrumentLiveProgress | null
   has_unacknowledged_alerts: boolean
+  /** False when `latest_critical_at` is before `alerts_since`. */
   has_unacknowledged_critical: boolean
+  /** Time of the newest unacknowledged critical alert, as the plugin reported it (ISO 8601). */
+  latest_critical_at?: string | null
+  /** Start of the platform alert window (ISO 8601); null when the window is off. */
+  alerts_since?: string | null
   /** Server receive time of the latest report (ISO 8601). */
   last_seen: string
   /** When the state last changed (ISO 8601). */

package/src/utils/deprecation.ts

@@ -0,0 +1,8 @@
+const warned = new Set<string>()
+
+/** Warn once per page load that a deprecated SDK option or slot is in use. */
+export function warnDeprecatedOnce(key: string, message: string): void {
+  if (warned.has(key)) return
+  warned.add(key)
+  console.warn(`[mint-sdk] ${message}`)
+}

package/src/utils/lucideIcon.ts

@@ -0,0 +1,25 @@
+/// <reference path="./lucideIconIndex.d.ts" />
+import type { Component } from 'vue'
+
+/** A Lucide icon name in kebab case, such as `activity` or `flask-conical`. */
+const LUCIDE_NAME = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/
+
+export function isLucideIconName(value?: string): value is string {
+  return !!value && LUCIDE_NAME.test(value)
+}
+
+function pascalCase(name: string): string {
+  return name.replace(/(^|-)([a-z0-9])/g, (_, __, char: string) => char.toUpperCase())
+}
+
+// ponytail: loads the whole Lucide set (~150 KB gzip) as one lazy chunk on first use;
+// switch to a per-icon import map if page icons become common on first paint.
+// The icon index, not the package root: the root is statically imported elsewhere,
+// so a dynamic import of it would put the whole set in the startup bundle.
+let iconSet: Promise<Record<string, Component>> | undefined
+
+/** The Lucide component for `name`, or undefined when Lucide has no such icon. */
+export async function loadLucideIcon(name: string): Promise<Component | undefined> {
+  iconSet ??= import('lucide-vue-next/dist/esm/icons/index.js') as Promise<Record<string, Component>>
+  return (await iconSet)[pascalCase(name)]
+}

package/src/utils/lucideIconIndex.d.ts

@@ -0,0 +1,2 @@
+// The Lucide icon index ships without types; utils/lucideIcon.ts loads it on first use.
+declare module 'lucide-vue-next/dist/esm/icons/index.js'