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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (118) hide show
  1. package/dist/{AlertBox-CIhqsWbN.js → AlertBox-CexONPhA.js} +2 -2
  2. package/dist/{AlertBox-CIhqsWbN.js.map → AlertBox-CexONPhA.js.map} +1 -1
  3. package/dist/{AppSidebar-BDrd7Kwn.js → AppSidebar-FxlF5_dI.js} +55 -40
  4. package/dist/AppSidebar-FxlF5_dI.js.map +1 -0
  5. package/dist/{ConfirmDialog-CjWoxAD1.js → ConfirmDialog-D9QXFpsy.js} +2 -2
  6. package/dist/ConfirmDialog-D9QXFpsy.js.map +1 -0
  7. package/dist/{ExperimentPopover-BM92LlrQ.js → ExperimentPopover-Bbd6RaoH.js} +3 -3
  8. package/dist/{ExperimentPopover-BM92LlrQ.js.map → ExperimentPopover-Bbd6RaoH.js.map} +1 -1
  9. package/dist/{ExperimentSelectorModal-LsB1ABmh.js → ExperimentSelectorModal-CUkKmgfr.js} +35 -6
  10. package/dist/ExperimentSelectorModal-CUkKmgfr.js.map +1 -0
  11. package/dist/{SegmentedControl-Dz41vAFM.js → SegmentedControl-C-sckoJZ.js} +2 -2
  12. package/dist/{SegmentedControl-Dz41vAFM.js.map → SegmentedControl-C-sckoJZ.js.map} +1 -1
  13. package/dist/{SettingsModal-C-MSR-bk.js → SettingsModal-BIC0dAYc.js} +6 -6
  14. package/dist/{SettingsModal-C-MSR-bk.js.map → SettingsModal-BIC0dAYc.js.map} +1 -1
  15. package/dist/components/FormBuilder.vue.d.ts +1 -1
  16. package/dist/components/PluginIcon.vue.d.ts +2 -2
  17. package/dist/components/SectionCard.vue.d.ts +13 -1
  18. package/dist/components/SettingsModal.vue.d.ts +1 -1
  19. package/dist/components/internal/FormSchemaInternal.vue.d.ts +9 -9
  20. package/dist/components/internal/FormSectionRenderer.vue.d.ts +4 -4
  21. package/dist/composables/useExperimentSelector.d.ts +2 -0
  22. package/dist/composables/useOnboarding.d.ts +1 -1
  23. package/dist/{controlSchemaModel-BbXbMgc6.js → controlSchemaModel-C_XqpkgE.js} +2 -2
  24. package/dist/{controlSchemaModel-BbXbMgc6.js.map → controlSchemaModel-C_XqpkgE.js.map} +1 -1
  25. package/dist/{data-LzdkEZJ-.js → data-CfY7o8QC.js} +9 -9
  26. package/dist/{data-LzdkEZJ-.js.map → data-CfY7o8QC.js.map} +1 -1
  27. package/dist/data.js +7 -7
  28. package/dist/index.d.ts +0 -1
  29. package/dist/index.js +14 -19
  30. package/dist/index.js.map +1 -1
  31. package/dist/{install-UTqrAgHe.js → install-QF3Sh82O.js} +15 -39
  32. package/dist/install-QF3Sh82O.js.map +1 -0
  33. package/dist/install.js +1 -1
  34. package/dist/{lab-CbdDLAVr.js → lab-BcX5JBSY.js} +34 -112
  35. package/dist/lab-BcX5JBSY.js.map +1 -0
  36. package/dist/lab.js +4 -4
  37. package/dist/{records-CWRztE5M.js → records-BAymyHAn.js} +10 -110
  38. package/dist/records-BAymyHAn.js.map +1 -0
  39. package/dist/{runtime-DrL6lKAb.js → runtime-DngeJtdq.js} +82 -45
  40. package/dist/runtime-DngeJtdq.js.map +1 -0
  41. package/dist/runtime.js +6 -6
  42. package/dist/{shell-Ch7cJnjo.js → shell-CWZi97nW.js} +4 -4
  43. package/dist/{shell-Ch7cJnjo.js.map → shell-CWZi97nW.js.map} +1 -1
  44. package/dist/shell.js +4 -4
  45. package/dist/styles.css +181 -125
  46. package/dist/styles.d.ts +1 -0
  47. package/dist/types/index.d.ts +1 -1
  48. package/dist/types/instrument.d.ts +5 -17
  49. package/dist/{useExperimentSamples-Cz2v3V_q.js → useExperimentSamples-DEDAKa2E.js} +3 -3
  50. package/dist/{useExperimentSamples-Cz2v3V_q.js.map → useExperimentSamples-DEDAKa2E.js.map} +1 -1
  51. package/dist/{useListReorder-QqJc1dpX.js → useListReorder-W1bzK_bo.js} +15 -3
  52. package/dist/useListReorder-W1bzK_bo.js.map +1 -0
  53. package/dist/{useRackEditor-BHGM1Ngz.js → useRackEditor-Bmtuo0aj.js} +155 -26
  54. package/dist/useRackEditor-Bmtuo0aj.js.map +1 -0
  55. package/dist/{useRealtime-CNQbrS01.js → useRealtime-jOetF2mM.js} +3 -3
  56. package/dist/{useRealtime-CNQbrS01.js.map → useRealtime-jOetF2mM.js.map} +1 -1
  57. package/dist/{useRequest-Bfsh7gIm.js → useRequest-D9-3BS-3.js} +2 -2
  58. package/dist/{useRequest-Bfsh7gIm.js.map → useRequest-D9-3BS-3.js.map} +1 -1
  59. package/package.json +7 -4
  60. package/src/__tests__/components/AppTopBarOnboarding.test.ts +10 -0
  61. package/src/__tests__/components/ConfirmDialog.test.ts +2 -2
  62. package/src/__tests__/components/ExperimentSelectorModal.test.ts +16 -0
  63. package/src/__tests__/components/SectionCard.test.ts +33 -0
  64. package/src/__tests__/components/deprecationTags.test.ts +4 -18
  65. package/src/__tests__/composables/useJobsEndpoint.test.ts +50 -0
  66. package/src/__tests__/composables/useOnboarding.test.ts +2 -2
  67. package/src/__tests__/docs/frontendDocsCatalog.test.ts +3 -3
  68. package/src/components/AppSidebar.vue +2 -2
  69. package/src/components/CollapsibleCard.vue +1 -1
  70. package/src/components/ConfirmDialog.vue +1 -1
  71. package/src/components/ExperimentSelectorModal.vue +35 -0
  72. package/src/components/FileUploader.vue +3 -35
  73. package/src/components/GeneratedPluginView.vue +35 -81
  74. package/src/components/GeneratedResultRenderer.vue +2 -1
  75. package/src/components/InstrumentStatusPanels.vue +3 -3
  76. package/src/components/PlotlyChart.vue +1 -1
  77. package/src/components/PluginIcon.story.vue +2 -2
  78. package/src/components/PluginIcon.vue +2 -2
  79. package/src/components/SectionCard.vue +42 -6
  80. package/src/components/internal/AppTopBarOnboardingInternal.vue +30 -14
  81. package/src/composables/index.ts +1 -2
  82. package/src/composables/useExperimentSelector.ts +4 -0
  83. package/src/composables/useJobsEndpoint.ts +15 -4
  84. package/src/composables/useOnboarding.ts +3 -3
  85. package/src/generated-ui/main.ts +3 -1
  86. package/src/index.ts +0 -3
  87. package/src/styles/components/alert-box.css +1 -1
  88. package/src/styles/components/app-sidebar.css +5 -5
  89. package/src/styles/components/button.css +3 -3
  90. package/src/styles/components/checkbox.css +1 -1
  91. package/src/styles/components/collapsible-card.css +1 -1
  92. package/src/styles/components/confirm-dialog.css +2 -2
  93. package/src/styles/components/file-uploader.css +3 -3
  94. package/src/styles/components/icon-button.css +3 -3
  95. package/src/styles/components/loading-spinner.css +1 -1
  96. package/src/styles/components/onboarding.css +39 -0
  97. package/src/styles/components/pill.css +1 -1
  98. package/src/styles/components/plugin-icon.css +2 -2
  99. package/src/styles/components/presence-avatars.css +4 -4
  100. package/src/styles/components/progress-bar.css +1 -1
  101. package/src/styles/components/section-card.css +65 -6
  102. package/src/styles/components/sequence-input.css +1 -1
  103. package/src/styles/components/slider.css +1 -1
  104. package/src/styles/components/toggle.css +1 -1
  105. package/src/styles/variables.css +10 -4
  106. package/src/types/index.ts +0 -1
  107. package/src/types/instrument.ts +5 -18
  108. package/dist/AppSidebar-BDrd7Kwn.js.map +0 -1
  109. package/dist/ConfirmDialog-CjWoxAD1.js.map +0 -1
  110. package/dist/ExperimentSelectorModal-LsB1ABmh.js.map +0 -1
  111. package/dist/deprecatedRootExports.d.ts +0 -191
  112. package/dist/install-UTqrAgHe.js.map +0 -1
  113. package/dist/lab-CbdDLAVr.js.map +0 -1
  114. package/dist/records-CWRztE5M.js.map +0 -1
  115. package/dist/runtime-DrL6lKAb.js.map +0 -1
  116. package/dist/useListReorder-QqJc1dpX.js.map +0 -1
  117. package/dist/useRackEditor-BHGM1Ngz.js.map +0 -1
  118. package/src/deprecatedRootExports.ts +0 -226
@@ -1,6 +1,5 @@
1
1
  // Package-root composables: the L1 and L2 names of spec 3.3. Subpath composables are
2
- // exported from `lab.ts`, `shell.ts`, `data.ts` and `runtime.ts`; `deprecatedRootExports.ts`
3
- // keeps the other 1.3 root names until MINT 1.5.
2
+ // exported from `lab.ts`, `shell.ts`, `data.ts` and `runtime.ts`.
4
3
  export { useTheme } from './useTheme'
5
4
  export { useToast } from './useToast'
6
5
  export { usePlatform } from './usePlatform'
@@ -30,6 +30,8 @@ export interface UseExperimentSelectorOptions {
30
30
  immediate?: boolean
31
31
  /** Keep `statusCounts` in step with the non-status filters (one stats request per change). */
32
32
  withStatusCounts?: boolean
33
+ /** Filter values to start from, for example the ones a caller saved at the last visit. */
34
+ initialFilters?: Partial<ExperimentFilters>
33
35
  }
34
36
 
35
37
  export interface UseExperimentSelectorReturn {
@@ -89,6 +91,7 @@ export function useExperimentSelector(
89
91
  allowedExperimentTypes: optionAllowedExperimentTypes,
90
92
  apiBaseUrl,
91
93
  withStatusCounts = false,
94
+ initialFilters,
92
95
  } = options
93
96
  const platformBase = apiBaseUrl ?? getPlatformApiUrl()
94
97
  const api = useApi()
@@ -124,6 +127,7 @@ export function useExperimentSelector(
124
127
  experimentType: undefined,
125
128
  datePreset: undefined,
126
129
  mine: undefined,
130
+ ...initialFilters,
127
131
  })
128
132
 
129
133
  function normalizeExperimentTypes(values: string[] | null | undefined): string[] | null {
@@ -677,16 +677,27 @@ export function useJobsEndpoint(
677
677
  ]))
678
678
  jobs.value = nextJobs
679
679
  for (const job of nextJobs) settleJobWaiters(job)
680
- for (const jobId of previousJobIds) {
681
- if (!nextJobIds.has(jobId)) {
682
- rejectJobWaiters(jobId, new Error(`Job ${jobId} is no longer available`))
683
- }
680
+ for (const jobId of [...jobWaiters.keys()]) {
681
+ if (!nextJobIds.has(jobId)) void confirmMissingJob(jobId)
684
682
  }
685
683
  pruneResultState()
686
684
  pruneJobRevisions()
687
685
  return nextJobs
688
686
  }
689
687
 
688
+ /**
689
+ * A stream snapshot built before a submit can arrive after the submit reply,
690
+ * so a waited job missing from it is gone only once the server says so.
691
+ */
692
+ async function confirmMissingJob(jobId: string): Promise<void> {
693
+ try {
694
+ await getJob(jobId)
695
+ } catch (cause) {
696
+ if (isRetryableJobLookupError(cause)) return
697
+ rejectJobWaiters(jobId, new Error(`Job ${jobId} is no longer available`))
698
+ }
699
+ }
700
+
690
701
  function upsertJob(
691
702
  input: GeneratedAnalysisJobInput,
692
703
  fallbackDefinitionId?: string,
@@ -108,7 +108,7 @@ export interface OnboardingState {
108
108
  showNews: (id: string) => void
109
109
  next: () => void
110
110
  back: () => void
111
- /** End the run (× or Esc). Every step of the tour counts as seen. */
111
+ /** End the run (× or Esc). Every step of every tour of the app counts as seen; Help can still play them. */
112
112
  dismiss: () => void
113
113
  complete: (taskId: string) => void
114
114
  setChecklistHidden: (hidden: boolean) => void
@@ -381,8 +381,8 @@ export function provideOnboarding(definition: OnboardingDefinition, options: Pro
381
381
 
382
382
  function dismiss() {
383
383
  autoStartAbort?.abort()
384
- const tour = run?.tour
385
- if (tour) markSeen(...tour.steps.map((step) => stepKey(tour, step)))
384
+ // × on a tour ends all tours of the app, so the user closes tours at most once per app.
385
+ if (run?.tour) markSeen(...(definition.tours ?? []).flatMap((tour) => tour.steps.map((step) => stepKey(tour, step))))
386
386
  stop()
387
387
  }
388
388
 
@@ -2,6 +2,7 @@ import { createPinia } from 'pinia'
2
2
  import { createApp, h } from 'vue'
3
3
 
4
4
  import GeneratedPluginView from '../components/GeneratedPluginView.vue'
5
+ import { useSettingsStore } from '../stores/settings'
5
6
  import '../styles/index.css'
6
7
 
7
8
  function generatedApiBase(location: Location): string {
@@ -13,9 +14,10 @@ const app = createApp({
13
14
  name: 'MintGeneratedUiApp',
14
15
  render: () => h(GeneratedPluginView, {
15
16
  baseUrl: generatedApiBase(window.location),
16
- showStandaloneLabel: true,
17
17
  }),
18
18
  })
19
19
 
20
20
  app.use(createPinia())
21
+ // Theme, palette and density apply before the first paint, as in the platform.
22
+ useSettingsStore().initialize()
21
23
  app.mount('#app')
package/src/index.ts CHANGED
@@ -16,8 +16,5 @@ export * from './composables'
16
16
  // Stores
17
17
  export * from './stores'
18
18
 
19
- // Root names outside L1 and L2, deprecated until MINT 1.5
20
- export * from './deprecatedRootExports'
21
-
22
19
  // Types
23
20
  export type * from './types'
@@ -31,7 +31,7 @@
31
31
  .mint-alert__icon--info { background-color: var(--mint-info-bg); color: var(--mint-info); }
32
32
  .mint-alert__icon--neutral { background-color: var(--bg-tertiary); color: var(--text-secondary); }
33
33
  .mint-alert__icon--primary { background-color: var(--color-primary-soft); color: var(--color-primary); }
34
- .mint-alert__icon--cta { background-color: var(--color-primary-soft); color: var(--color-cta-hover); }
34
+ .mint-alert__icon--cta { background-color: var(--color-primary-soft); color: var(--_ink-primary); }
35
35
 
36
36
  .mint-alert__content {
37
37
  flex: 1;
@@ -97,8 +97,8 @@
97
97
  min-width: 1.375rem;
98
98
  padding: 0.125rem 0.375rem;
99
99
  border-radius: var(--radius);
100
- background: color-mix(in srgb, var(--color-cta) 14%, transparent);
101
- color: var(--color-cta);
100
+ background: color-mix(in srgb, var(--color-primary) 14%, transparent);
101
+ color: var(--color-primary);
102
102
  font-size: 0.6875rem;
103
103
  font-weight: 700;
104
104
  line-height: 1.1;
@@ -369,7 +369,7 @@
369
369
  width: 11px;
370
370
  height: 11px;
371
371
  border-radius: 9999px;
372
- background: white;
372
+ background: var(--control-knob);
373
373
  box-shadow: var(--shadow-sm);
374
374
  transition: left 180ms var(--mint-ease-out-quart);
375
375
  }
@@ -469,7 +469,7 @@
469
469
  padding: 0 0.25rem;
470
470
  border-radius: var(--radius);
471
471
  background: var(--mint-sidebar-tone);
472
- color: white;
472
+ color: var(--text-on-accent);
473
473
  font-size: 0.6875rem;
474
474
  font-weight: 700;
475
475
  line-height: 1rem;
@@ -492,7 +492,7 @@
492
492
  .mint-sidebar__rail-badge--cta,
493
493
  .mint-sidebar__tag--cta,
494
494
  .mint-sidebar__group-action--cta {
495
- --mint-sidebar-tone: var(--color-cta);
495
+ --mint-sidebar-tone: var(--color-primary);
496
496
  }
497
497
 
498
498
  .mint-sidebar__rail-badge--success,
@@ -68,17 +68,17 @@
68
68
  }
69
69
 
70
70
  .mint-button--cta {
71
- background-color: var(--color-cta);
71
+ background-color: var(--color-primary);
72
72
  color: var(--text-on-accent);
73
73
  }
74
74
 
75
75
  .mint-button--cta:hover:not(.mint-button--disabled) {
76
- background-color: var(--color-cta-hover);
76
+ background-color: var(--color-primary-hover);
77
77
  }
78
78
 
79
79
  .mint-button--danger {
80
80
  background-color: var(--mint-error);
81
- color: white;
81
+ color: var(--text-on-danger);
82
82
  }
83
83
 
84
84
  .mint-button--danger:hover:not(.mint-button--disabled) {
@@ -133,7 +133,7 @@
133
133
  .mint-checkbox__native:disabled + .mint-checkbox__box.mint-checkbox__box--indeterminate {
134
134
  background-color: var(--text-muted);
135
135
  border-color: var(--text-muted);
136
- color: #FFFFFF;
136
+ color: var(--control-knob);
137
137
  }
138
138
 
139
139
  .mint-checkbox__box--sm {
@@ -159,7 +159,7 @@
159
159
 
160
160
  .mint-collapsible-card__badge--cta,
161
161
  .mint-collapsible-card__action--cta {
162
- --mint-sidebar-badge-color: var(--color-cta);
162
+ --mint-sidebar-badge-color: var(--color-primary);
163
163
  }
164
164
 
165
165
  .mint-collapsible-card__badge--success,
@@ -48,8 +48,8 @@
48
48
  }
49
49
 
50
50
  .mint-confirm__icon--cta {
51
- background-color: color-mix(in srgb, var(--color-cta) 12%, transparent);
52
- color: var(--color-cta);
51
+ background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
52
+ color: var(--color-primary);
53
53
  }
54
54
 
55
55
  .mint-confirm__icon--neutral {
@@ -160,9 +160,9 @@
160
160
  font-size: 0.6875rem;
161
161
  font-weight: 700;
162
162
  font-family: var(--font-mono);
163
- color: var(--badge-color);
164
- background-color: color-mix(in srgb, var(--badge-color) 10%, transparent);
165
- border: 1px solid color-mix(in srgb, var(--badge-color) 20%, transparent);
163
+ color: var(--text-secondary);
164
+ background-color: var(--bg-tertiary);
165
+ border: 1px solid var(--border-color);
166
166
  }
167
167
 
168
168
  .mint-file-uploader__file-meta {
@@ -57,17 +57,17 @@
57
57
  }
58
58
 
59
59
  .mint-icon-button--cta {
60
- background-color: var(--color-cta);
60
+ background-color: var(--color-primary);
61
61
  color: var(--text-on-accent);
62
62
  }
63
63
 
64
64
  .mint-icon-button--cta:hover:not(.mint-icon-button--disabled) {
65
- background-color: var(--color-cta-hover);
65
+ background-color: var(--color-primary-hover);
66
66
  }
67
67
 
68
68
  .mint-icon-button--danger {
69
69
  background-color: var(--mint-error);
70
- color: white;
70
+ color: var(--text-on-danger);
71
71
  }
72
72
 
73
73
  .mint-icon-button--danger:hover:not(.mint-icon-button--disabled) {
@@ -33,7 +33,7 @@
33
33
 
34
34
  /* Tones */
35
35
  .mint-spinner--primary { color: var(--color-primary); }
36
- .mint-spinner--cta { color: var(--color-cta); }
36
+ .mint-spinner--cta { color: var(--color-primary); }
37
37
  .mint-spinner--success { color: var(--mint-success); }
38
38
  .mint-spinner--warning { color: var(--mint-warning); }
39
39
  .mint-spinner--error { color: var(--mint-error); }
@@ -39,6 +39,44 @@ html.dark {
39
39
  transition: background-color var(--mint-transition), border-color var(--mint-transition);
40
40
  }
41
41
 
42
+ /* The close button sits inside the chip border, so the chip keeps room for it. */
43
+ .mint-onboarding-help__chip-group {
44
+ position: relative;
45
+ display: inline-flex;
46
+ }
47
+
48
+ .mint-onboarding-help__chip-group .mint-onboarding-help__chip {
49
+ padding-right: 2rem;
50
+ }
51
+
52
+ .mint-onboarding-help__chip-close {
53
+ position: absolute;
54
+ top: 50%;
55
+ right: 0.25rem;
56
+ display: grid;
57
+ place-items: center;
58
+ width: 1.5rem;
59
+ height: 1.5rem;
60
+ padding: 0;
61
+ border: 0;
62
+ border-radius: var(--radius-sm);
63
+ background: transparent;
64
+ color: var(--text-muted);
65
+ cursor: pointer;
66
+ transform: translateY(-50%);
67
+ transition: background-color var(--mint-transition), color var(--mint-transition);
68
+ }
69
+
70
+ .mint-onboarding-help__chip-close:hover {
71
+ background: var(--bg-tertiary);
72
+ color: var(--text-primary);
73
+ }
74
+
75
+ .mint-onboarding-help__chip-close:focus-visible {
76
+ outline: none;
77
+ box-shadow: var(--focus-ring-offset);
78
+ }
79
+
42
80
  .mint-onboarding-help__chip:hover {
43
81
  background: var(--bg-hover);
44
82
  }
@@ -360,6 +398,7 @@ html.dark {
360
398
 
361
399
  @media (prefers-reduced-motion: reduce) {
362
400
  .mint-onboarding-help__chip,
401
+ .mint-onboarding-help__chip-close,
363
402
  .mint-onboarding-help__bar > span,
364
403
  .mint-onboarding-help__progress > span,
365
404
  .mint-onboarding__hole {
@@ -33,7 +33,7 @@
33
33
  (soft-tint background, dot, outline border); `--mint-pill-ink` the text. A
34
34
  `color` prop sets `--mint-pill-tone` inline. */
35
35
  .mint-pill--primary { --mint-pill-tone: var(--color-primary); --mint-pill-ink: var(--color-primary-hover); }
36
- .mint-pill--cta { --mint-pill-tone: var(--color-cta); --mint-pill-ink: var(--color-cta-hover); }
36
+ .mint-pill--cta { --mint-pill-tone: var(--color-primary); --mint-pill-ink: var(--color-primary-hover); }
37
37
  .mint-pill--success { --mint-pill-tone: var(--mint-success); --mint-pill-ink: var(--mint-success-hover); }
38
38
  .mint-pill--warning { --mint-pill-tone: var(--mint-warning); --mint-pill-ink: var(--mint-warning-text); }
39
39
  .mint-pill--error { --mint-pill-tone: var(--mint-error); --mint-pill-ink: var(--mint-error-hover); }
@@ -16,10 +16,10 @@
16
16
  .mint-plugin-icon--topbar { width: 2.25rem; height: 2.25rem; }
17
17
  .mint-plugin-icon--lg { width: 3rem; height: 3rem; }
18
18
 
19
- /* Tones (deprecated with the tone/color props, removed in 1.5): the v2 tile no longer reads the variable. */
19
+ /* Tones (deprecated with the tone/color props, removed in 2.0): the v2 tile no longer reads the variable. */
20
20
  .mint-plugin-icon--neutral { --mint-plugin-icon-tone: var(--text-secondary); }
21
21
  .mint-plugin-icon--primary { --mint-plugin-icon-tone: var(--color-primary); }
22
- .mint-plugin-icon--cta { --mint-plugin-icon-tone: var(--color-cta); }
22
+ .mint-plugin-icon--cta { --mint-plugin-icon-tone: var(--color-primary); }
23
23
  .mint-plugin-icon--success { --mint-plugin-icon-tone: var(--mint-success); }
24
24
  .mint-plugin-icon--warning { --mint-plugin-icon-tone: var(--mint-warning); }
25
25
  .mint-plugin-icon--error { --mint-plugin-icon-tone: var(--mint-error); }
@@ -1,18 +1,18 @@
1
1
  /* PresenceAvatars: an avatar stack that opens a list of who is here.
2
2
  * The editing cue is a ring plus a pencil badge, so it does not depend on
3
- * colour only. Light mode uses --color-cta-hover (3:1 on the card), dark
4
- * mode --color-cta. --mint-presence-surface is the colour the avatars are
3
+ * colour only. Light mode uses --color-primary-hover (3:1 on the card), dark
4
+ * mode --color-primary. --mint-presence-surface is the colour the avatars are
5
5
  * cut out of; set it when the stack sits on another surface. */
6
6
 
7
7
  .mint-presence {
8
- --mint-presence-editing: var(--color-cta-hover);
8
+ --mint-presence-editing: var(--color-primary-hover);
9
9
  --mint-presence-surface: var(--bg-secondary);
10
10
  position: relative;
11
11
  display: inline-flex;
12
12
  }
13
13
 
14
14
  :where(html.dark) .mint-presence {
15
- --mint-presence-editing: var(--color-cta);
15
+ --mint-presence-editing: var(--color-primary);
16
16
  }
17
17
 
18
18
  .mint-presence__trigger {
@@ -46,7 +46,7 @@
46
46
  .mint-progress__bar--success { background-color: var(--mint-success); }
47
47
  .mint-progress__bar--warning { background-color: var(--mint-warning); }
48
48
  .mint-progress__bar--error { background-color: var(--mint-error); }
49
- .mint-progress__bar--cta { background-color: var(--color-cta); }
49
+ .mint-progress__bar--cta { background-color: var(--color-primary); }
50
50
  .mint-progress__bar--neutral { background-color: var(--text-muted); }
51
51
  .mint-progress__bar--info { background-color: var(--color-primary); } /* 6b: progress fill is always primary; --mint-info is for the running dot */
52
52
 
@@ -27,6 +27,11 @@
27
27
  min-height: 0;
28
28
  }
29
29
 
30
+ /* A collapsed fill card gives its track back to its siblings. */
31
+ .mint-section-card--fill.mint-section-card--collapsed {
32
+ flex: none;
33
+ }
34
+
30
35
  .mint-section-card--fill .mint-section-card__body {
31
36
  flex: 1;
32
37
  min-height: 0;
@@ -41,7 +46,7 @@
41
46
  min-height: 2.5rem;
42
47
  /* 4px block padding: a 28px header control plus padding plus the 1px rule
43
48
  stays inside the 40px strip (6px made it 41px). */
44
- padding: 0.25rem 0.625rem 0.25rem 0.75rem;
49
+ padding: 0.25rem 0.625rem 0.25rem var(--mint-section-card-inset);
45
50
  border-bottom: 1px solid var(--border-color);
46
51
  flex-shrink: 0;
47
52
  }
@@ -50,6 +55,45 @@
50
55
  border-bottom-color: var(--border-light);
51
56
  }
52
57
 
58
+ /* A collapsed card is its header alone: no rule under it. */
59
+ .mint-section-card__header--collapsed {
60
+ border-bottom-color: transparent;
61
+ }
62
+
63
+ .mint-section-card__toggle {
64
+ display: inline-flex;
65
+ align-items: center;
66
+ gap: var(--mint-section-card-gap);
67
+ margin: 0;
68
+ padding: 0;
69
+ border: 0;
70
+ background: none;
71
+ color: inherit;
72
+ font: inherit;
73
+ cursor: pointer;
74
+ }
75
+
76
+ .mint-section-card__toggle:focus-visible {
77
+ outline: none;
78
+ box-shadow: var(--focus-ring-offset);
79
+ border-radius: var(--radius-sm);
80
+ }
81
+
82
+ .mint-section-card__chevron {
83
+ width: 0.875rem;
84
+ height: 0.875rem;
85
+ color: var(--text-muted);
86
+ transition: transform var(--mint-transition);
87
+ }
88
+
89
+ .mint-section-card__toggle[aria-expanded="false"] .mint-section-card__chevron {
90
+ transform: rotate(-90deg);
91
+ }
92
+
93
+ .mint-section-card__toggle:hover .mint-section-card__chevron {
94
+ color: var(--text-secondary);
95
+ }
96
+
53
97
  /* Muted icon, no tinted chip: every accent renders the same. */
54
98
  .mint-section-card__icon-chip {
55
99
  display: inline-flex;
@@ -97,7 +141,8 @@
97
141
  display: flex;
98
142
  align-items: center;
99
143
  justify-content: space-between;
100
- padding: 0.5rem 1rem;
144
+ /* Text starts on the card inset; controls end where the header's do. */
145
+ padding: 0.5rem 0.625rem 0.5rem var(--mint-section-card-inset);
101
146
  border-top: 1px solid var(--border-color);
102
147
  background: var(--bg-primary);
103
148
  font-size: 0.75rem;
@@ -118,7 +163,7 @@
118
163
  display: flex;
119
164
  align-items: center;
120
165
  gap: var(--mint-section-card-gap);
121
- padding: 0.375rem 0.75rem;
166
+ padding: 0.375rem var(--mint-section-card-inset);
122
167
  background: var(--bg-secondary);
123
168
  transition: background-color var(--mint-transition);
124
169
  }
@@ -153,12 +198,26 @@ button.mint-section-card__row:hover {
153
198
  /* Comfortable density gives the header and rows back their height. */
154
199
  [data-density="comfortable"] .mint-section-card__header {
155
200
  min-height: 2.75rem;
156
- padding: 0.25rem 0.75rem 0.25rem 0.875rem;
201
+ padding-right: 0.75rem;
202
+ }
203
+
204
+ [data-density="comfortable"] .mint-section-card__footer {
205
+ padding-right: 0.75rem;
157
206
  }
158
207
 
159
208
  [data-density="comfortable"] .mint-section-card__row {
160
209
  padding-top: 0.5rem;
161
210
  padding-bottom: 0.5rem;
162
- /* Same left inset as the header, so row content lines up under the header. */
163
- padding-left: 0.875rem;
211
+ }
212
+
213
+ /* A table that is the card body's own child starts and ends on the card's text
214
+ inset, so its first column lines up under the header title. A table inside a
215
+ padded wrapper keeps its padding, and the checkbox and actions columns stay
216
+ centred controls. The table's size padding uses !important, so this must too. */
217
+ .mint-section-card__body > .mint-dataframe :is(.mint-dataframe__th, .mint-dataframe__td):first-child:not(.mint-dataframe__th--checkbox, .mint-dataframe__td--checkbox) {
218
+ padding-left: var(--mint-section-card-inset) !important;
219
+ }
220
+
221
+ .mint-section-card__body > .mint-dataframe :is(.mint-dataframe__th, .mint-dataframe__td):last-child:not(.mint-dataframe__th--actions, .mint-dataframe__td--actions) {
222
+ padding-right: var(--mint-section-card-inset) !important;
164
223
  }
@@ -226,7 +226,7 @@
226
226
  .mint-sequence-input__problem--error .mint-sequence-input__problem-shape { fill: var(--mint-error); }
227
227
 
228
228
  .mint-sequence-input__problem-mark {
229
- stroke: white;
229
+ stroke: var(--text-on-danger);
230
230
  stroke-width: 1.6;
231
231
  stroke-linecap: round;
232
232
  }
@@ -56,7 +56,7 @@
56
56
  box-sizing: border-box;
57
57
  transform: translateX(-50%) translateY(-50%);
58
58
  border-radius: 9999px;
59
- background-color: #FFFFFF;
59
+ background-color: var(--control-knob);
60
60
  border: 1px solid color-mix(in srgb, var(--text-secondary) 40%, transparent);
61
61
  box-shadow: var(--shadow-sm);
62
62
  pointer-events: none;
@@ -151,7 +151,7 @@
151
151
  top: 50%;
152
152
  left: 2px;
153
153
  border-radius: 9999px;
154
- background-color: #FFFFFF;
154
+ background-color: var(--control-knob);
155
155
  box-shadow: var(--shadow-sm);
156
156
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1);
157
157
  pointer-events: none;
@@ -3,8 +3,6 @@
3
3
  * @import '@morscherlab/mint-sdk/styles';
4
4
  */
5
5
 
6
- @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');
7
-
8
6
  /* Tailwind v4's layer order, declared first so the SDK's base and utilities
9
7
  layers sort the same way with or without Tailwind in the host. */
10
8
  @layer theme, base, components, utilities;
@@ -61,12 +59,16 @@
61
59
  --mint-primary: var(--color-primary);
62
60
  /* Text and icons on an accent fill (filled buttons, Save). */
63
61
  --text-on-accent: #FFFFFF;
64
- /* Retired hues, aliased to the accent until 1.5 (mint doctor warns on use). */
62
+ /* Text on a --mint-error fill (danger buttons); white in both themes, 3.76:1 on #EF4444. */
63
+ --text-on-danger: #FFFFFF;
64
+ /* Knob of a toggle or slider, and the mark of a disabled checkbox; white in both themes. */
65
+ --control-knob: #FFFFFF;
66
+ /* Retired hues, aliased to the accent until 2.0 (mint doctor warns on use). */
65
67
  --color-cta: var(--color-primary);
66
68
  --color-cta-hover: var(--color-primary-hover);
67
69
  --color-purple: var(--color-primary);
68
70
 
69
- /* Entity colors — retired hues, aliased to slate until 1.5. Entities are told
71
+ /* Entity colors — retired hues, aliased to slate until 2.0. Entities are told
70
72
  apart by icon and label, not by hue. Only -hover has no neutral token. */
71
73
  --color-experiment: var(--text-secondary-strong);
72
74
  --color-experiment-hover: #334155;
@@ -136,6 +138,9 @@
136
138
  --mint-gutter: 0.5rem;
137
139
  /* Distance from the outermost cards to the window edge, in every density. */
138
140
  --mint-page-inset: 1rem;
141
+ /* Text inset of a SectionCard: its title, row text and table edge columns
142
+ start here, and page chrome over a card (breadcrumbs) can line up with it. */
143
+ --mint-section-card-inset: 0.75rem;
139
144
 
140
145
  /* Semantic colors */
141
146
  --mint-success: #10B981;
@@ -379,6 +384,7 @@ html.dark [data-palette="forest"] {
379
384
  /* Comfortable density (html[data-density], written by the settings store):
380
385
  the pre-v2 control heights and a wider gutter. */
381
386
  [data-density="comfortable"] {
387
+ --mint-section-card-inset: 0.875rem;
382
388
  --form-height-sm: 2rem;
383
389
  --form-height-md: 2.25rem;
384
390
  --form-height-lg: 3rem;
@@ -219,7 +219,6 @@ export type {
219
219
  InstrumentLiveProgress,
220
220
  InstrumentLiveStatus,
221
221
  InstrumentState,
222
- InstrumentStatus,
223
222
  InstrumentStatusReporter,
224
223
  SampleInfo,
225
224
  SampleInfo as InstrumentSampleInfo,
@@ -24,24 +24,6 @@ export interface SequenceProgress {
24
24
  sample_durations?: readonly number[]
25
25
  }
26
26
 
27
- /** @deprecated Scheduled for removal in MINT 1.4; instrument monitor types move to the mld-ms plugins. */
28
- export interface InstrumentStatus {
29
- instrument_id: string
30
- instrument_name?: string | null
31
- monitor_id?: string | null
32
- state: InstrumentState
33
- active_method?: string | null
34
- current_sample?: SampleInfo | null
35
- sequence_progress?: SequenceProgress | null
36
- timestamp?: string | Date
37
- last_seen?: string | Date | null
38
- connected?: boolean
39
- sequence_file?: string | null
40
- sequence_row_index?: number | null
41
- current_raw_file?: string | null
42
- method_elapsed_pct?: number | null
43
- }
44
-
45
27
  /** A state the platform derives for an instrument: its reported state, `never` (no report yet) or `inactive`. */
46
28
  export type InstrumentBadgeState = InstrumentState | 'never' | 'inactive'
47
29
 
@@ -91,7 +73,12 @@ export interface InstrumentLiveStatus {
91
73
  current_sample?: SampleInfo | null
92
74
  sequence_progress?: InstrumentLiveProgress | null
93
75
  has_unacknowledged_alerts: boolean
76
+ /** False when `latest_critical_at` is before `alerts_since`. */
94
77
  has_unacknowledged_critical: boolean
78
+ /** Time of the newest unacknowledged critical alert, as the plugin reported it (ISO 8601). */
79
+ latest_critical_at?: string | null
80
+ /** Start of the platform alert window (ISO 8601); null when the window is off. */
81
+ alerts_since?: string | null
95
82
  /** Server receive time of the latest report (ISO 8601). */
96
83
  last_seen: string
97
84
  /** When the state last changed (ISO 8601). */