@morscherlab/mint-sdk 1.4.0-beta.16 → 1.4.0-beta.18

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 (78) hide show
  1. package/README.md +14 -3
  2. package/dist/{AlertBox-SnsbVow-.js → AlertBox-CzLg0UaL.js} +2 -2
  3. package/dist/{AlertBox-SnsbVow-.js.map → AlertBox-CzLg0UaL.js.map} +1 -1
  4. package/dist/{AppSidebar-CB0-RQ4m.js → AppSidebar-6oTT-gPO.js} +43 -13
  5. package/dist/AppSidebar-6oTT-gPO.js.map +1 -0
  6. package/dist/{ExperimentPopover-ChKCrklH.js → ExperimentPopover-9l4QZlvQ.js} +2 -2
  7. package/dist/{ExperimentPopover-ChKCrklH.js.map → ExperimentPopover-9l4QZlvQ.js.map} +1 -1
  8. package/dist/{ExperimentSelectorModal-BqifjNaN.js → ExperimentSelectorModal-pR5fK3pA.js} +3 -3
  9. package/dist/{ExperimentSelectorModal-BqifjNaN.js.map → ExperimentSelectorModal-pR5fK3pA.js.map} +1 -1
  10. package/dist/{SegmentedControl-hOgBVdju.js → SegmentedControl-CJ7EAmOq.js} +2 -2
  11. package/dist/{SegmentedControl-hOgBVdju.js.map → SegmentedControl-CJ7EAmOq.js.map} +1 -1
  12. package/dist/{SettingsModal-CoZK3EDN.js → SettingsModal-Dyitgzfp.js} +6 -6
  13. package/dist/{SettingsModal-CoZK3EDN.js.map → SettingsModal-Dyitgzfp.js.map} +1 -1
  14. package/dist/components/AppTopBar.vue.d.ts +7 -0
  15. package/dist/components/JobsStatusTray.vue.d.ts +11 -4
  16. package/dist/components/PluginWorkspaceView.props.d.ts +3 -0
  17. package/dist/components/PluginWorkspaceView.vue.d.ts +3 -0
  18. package/dist/components/internal/WorkspaceShellInternal.vue.d.ts +8 -0
  19. package/dist/composables/useJobCenter.d.ts +11 -3
  20. package/dist/{controlSchemaModel-CIH5Hqpw.js → controlSchemaModel-DCUOx8ll.js} +2 -2
  21. package/dist/{controlSchemaModel-CIH5Hqpw.js.map → controlSchemaModel-DCUOx8ll.js.map} +1 -1
  22. package/dist/{data-OZ94DhVC.js → data-BIiV4kKw.js} +9 -9
  23. package/dist/{data-OZ94DhVC.js.map → data-BIiV4kKw.js.map} +1 -1
  24. package/dist/data.js +7 -7
  25. package/dist/index.js +16 -16
  26. package/dist/{install-BKgb5qZw.js → install-Dg-Z6ze5.js} +13 -13
  27. package/dist/{install-BKgb5qZw.js.map → install-Dg-Z6ze5.js.map} +1 -1
  28. package/dist/install.js +1 -1
  29. package/dist/{lab-ZDKlx1Oo.js → lab-BHVT1qN2.js} +9 -9
  30. package/dist/{lab-ZDKlx1Oo.js.map → lab-BHVT1qN2.js.map} +1 -1
  31. package/dist/lab.js +4 -4
  32. package/dist/{records-B4yl2oIu.js → records-CR_pYzIP.js} +62 -62
  33. package/dist/{records-B4yl2oIu.js.map → records-CR_pYzIP.js.map} +1 -1
  34. package/dist/{runtime-Cz1GJa_O.js → runtime-cHv1phcc.js} +379 -31
  35. package/dist/runtime-cHv1phcc.js.map +1 -0
  36. package/dist/runtime.d.ts +1 -1
  37. package/dist/runtime.js +6 -6
  38. package/dist/{shell-kq9p4VsX.js → shell-BDuZf2zb.js} +4 -4
  39. package/dist/{shell-kq9p4VsX.js.map → shell-BDuZf2zb.js.map} +1 -1
  40. package/dist/shell.js +4 -4
  41. package/dist/styles.css +163 -307
  42. package/dist/types/components.d.ts +2 -0
  43. package/dist/{useExperimentSamples-BLx29CkM.js → useExperimentSamples-Dno1fFMq.js} +3 -3
  44. package/dist/{useExperimentSamples-BLx29CkM.js.map → useExperimentSamples-Dno1fFMq.js.map} +1 -1
  45. package/dist/{useListReorder-C_8RYeVP.js → useListReorder-CQ9OCScc.js} +76 -76
  46. package/dist/useListReorder-CQ9OCScc.js.map +1 -0
  47. package/dist/{useRackEditor-BhYlXKFM.js → useRackEditor-wL3kPrRT.js} +6 -6
  48. package/dist/{useRackEditor-BhYlXKFM.js.map → useRackEditor-wL3kPrRT.js.map} +1 -1
  49. package/dist/useRealtime-BW02xy4Z.js +398 -0
  50. package/dist/useRealtime-BW02xy4Z.js.map +1 -0
  51. package/dist/{useRequest-C9uwM79q.js → useRequest-CDkrXNU7.js} +2 -2
  52. package/dist/{useRequest-C9uwM79q.js.map → useRequest-CDkrXNU7.js.map} +1 -1
  53. package/package.json +1 -1
  54. package/src/__tests__/components/AppTopBar.test.ts +33 -2
  55. package/src/__tests__/components/GeneratedPluginView.test.ts +1 -1
  56. package/src/__tests__/components/JobsStatusTray.test.ts +137 -71
  57. package/src/__tests__/components/PluginWorkspaceView.test.ts +56 -1
  58. package/src/__tests__/composables/useJobCenter.test.ts +223 -3
  59. package/src/__tests__/docs/frontendDocsCatalog.test.ts +3 -3
  60. package/src/__tests__/styles/v2AuditRules.test.ts +8 -0
  61. package/src/components/AppTopBar.vue +14 -0
  62. package/src/components/GeneratedPluginView.vue +4 -9
  63. package/src/components/JobsStatusTray.story.vue +78 -43
  64. package/src/components/JobsStatusTray.vue +171 -279
  65. package/src/components/PluginWorkspaceView.props.ts +3 -0
  66. package/src/components/PluginWorkspaceView.vue +17 -0
  67. package/src/components/internal/WorkspaceShellInternal.vue +12 -0
  68. package/src/composables/useJobCenter.ts +127 -6
  69. package/src/runtime.ts +0 -1
  70. package/src/styles/components/app-top-bar.css +7 -0
  71. package/src/styles/components/jobs-status-tray.css +129 -296
  72. package/src/styles/variables.css +16 -0
  73. package/src/types/components.ts +2 -0
  74. package/dist/AppSidebar-CB0-RQ4m.js.map +0 -1
  75. package/dist/runtime-Cz1GJa_O.js.map +0 -1
  76. package/dist/useListReorder-C_8RYeVP.js.map +0 -1
  77. package/dist/useRealtime-CUMbW_ln.js +0 -699
  78. package/dist/useRealtime-CUMbW_ln.js.map +0 -1
package/dist/shell.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { i as useEventListener, r as useFocusTrap } from "./useDropdownState-Bb2N4m40.js";
2
- import { E as useMenuKeyboard, H as useListSelection, R as useRovingFocus, U as useSelectionLimit } from "./records-B4yl2oIu.js";
3
- import { B as compareSortValues, V as useSortedItems, i as useReorderAnnouncer, n as reorderList, r as useListReorder, t as REORDER_ANNOUNCER_STYLE } from "./useListReorder-C_8RYeVP.js";
4
- import { C as usePluginWorkspace, S as AppLayout_default, _ as provideOnboarding, f as AppTopBar_default, g as defineOnboarding, h as ONBOARDING_KEY, m as ANCHOR_WAIT_MS, t as AppSidebar_default, v as useOnboarding } from "./AppSidebar-CB0-RQ4m.js";
2
+ import { E as useMenuKeyboard, H as useListSelection, R as useRovingFocus, U as useSelectionLimit } from "./records-CR_pYzIP.js";
3
+ import { B as compareSortValues, V as useSortedItems, i as useReorderAnnouncer, n as reorderList, r as useListReorder, t as REORDER_ANNOUNCER_STYLE } from "./useListReorder-CQ9OCScc.js";
4
+ import { C as usePluginWorkspace, S as AppLayout_default, _ as provideOnboarding, f as AppTopBar_default, g as defineOnboarding, h as ONBOARDING_KEY, m as ANCHOR_WAIT_MS, t as AppSidebar_default, v as useOnboarding } from "./AppSidebar-6oTT-gPO.js";
5
5
  import { t as useDebouncedWatch } from "./useDebouncedWatch-BPwyl6eS.js";
6
6
  import { t as useExpansionSet } from "./useExpansionSet-CvoNMZJi.js";
7
- import { a as useManualLayoutResize, i as resizedVerticalSplitPercent, n as resizedLeadingPanelWidth, o as LayoutResizeHandle_default, r as resizedTrailingPanelWidth } from "./shell-kq9p4VsX.js";
7
+ import { a as useManualLayoutResize, i as resizedVerticalSplitPercent, n as resizedLeadingPanelWidth, o as LayoutResizeHandle_default, r as resizedTrailingPanelWidth } from "./shell-BDuZf2zb.js";
8
8
  export { ANCHOR_WAIT_MS, AppLayout_default as AppLayout, AppSidebar_default as AppSidebar, AppTopBar_default as AppTopBar, LayoutResizeHandle_default as LayoutResizeHandle, ONBOARDING_KEY, REORDER_ANNOUNCER_STYLE, compareSortValues, defineOnboarding, provideOnboarding, reorderList, resizedLeadingPanelWidth, resizedTrailingPanelWidth, resizedVerticalSplitPercent, useDebouncedWatch, useEventListener, useExpansionSet, useFocusTrap, useListReorder, useListSelection, useManualLayoutResize, useMenuKeyboard, useOnboarding, usePluginWorkspace, useReorderAnnouncer, useRovingFocus, useSelectionLimit, useSortedItems };
package/dist/styles.css CHANGED
@@ -121,14 +121,14 @@
121
121
  overflow-wrap: anywhere;
122
122
  }
123
123
 
124
- .mint-generated-workspace[data-v-41f5ec2e] {
124
+ .mint-generated-workspace[data-v-c8ff991b] {
125
125
  position: relative;
126
126
  min-width: 0;
127
127
  min-height: calc(100vh - 5rem);
128
128
  padding: clamp(1rem, 2.5vw, 2.5rem);
129
129
  background: var(--bg-primary);
130
130
  }
131
- .mint-generated-workspace__loading[data-v-41f5ec2e] {
131
+ .mint-generated-workspace__loading[data-v-c8ff991b] {
132
132
  display: flex;
133
133
  min-height: 24rem;
134
134
  align-items: center;
@@ -136,7 +136,7 @@
136
136
  gap: 0.75rem;
137
137
  color: var(--text-secondary);
138
138
  }
139
- .mint-generated-workspace__header[data-v-41f5ec2e] {
139
+ .mint-generated-workspace__header[data-v-c8ff991b] {
140
140
  display: flex;
141
141
  align-items: flex-start;
142
142
  justify-content: space-between;
@@ -144,29 +144,29 @@
144
144
  max-width: 76rem;
145
145
  margin: 0 auto 1.25rem;
146
146
  }
147
- .mint-generated-workspace__header h1[data-v-41f5ec2e] {
147
+ .mint-generated-workspace__header h1[data-v-c8ff991b] {
148
148
  margin: 0;
149
149
  color: var(--text-primary);
150
150
  font-size: clamp(1.35rem, 2vw, 1.8rem);
151
151
  line-height: 1.2;
152
152
  }
153
- .mint-generated-workspace__header p[data-v-41f5ec2e]:not(.mint-generated-workspace__eyebrow) {
153
+ .mint-generated-workspace__header p[data-v-c8ff991b]:not(.mint-generated-workspace__eyebrow) {
154
154
  margin: 0.4rem 0 0;
155
155
  color: var(--text-secondary);
156
156
  }
157
- .mint-generated-workspace__eyebrow[data-v-41f5ec2e] {
157
+ .mint-generated-workspace__eyebrow[data-v-c8ff991b] {
158
158
  margin: 0 0 0.35rem;
159
159
  color: var(--text-secondary);
160
160
  font-size: 0.72rem;
161
161
  font-weight: 700;
162
162
  }
163
- .mint-generated-workspace__resources[data-v-41f5ec2e] {
163
+ .mint-generated-workspace__resources[data-v-c8ff991b] {
164
164
  display: flex;
165
165
  flex-wrap: wrap;
166
166
  justify-content: flex-end;
167
167
  gap: 0.4rem;
168
168
  }
169
- .mint-generated-workspace__resources span[data-v-41f5ec2e] {
169
+ .mint-generated-workspace__resources span[data-v-c8ff991b] {
170
170
  padding: 0.3rem 0.55rem;
171
171
  border: 1px solid var(--border-color);
172
172
  border-radius: 999px;
@@ -175,7 +175,7 @@
175
175
  font-size: 0.75rem;
176
176
  font-weight: 600;
177
177
  }
178
- .mint-generated-workspace__result[data-v-41f5ec2e] {
178
+ .mint-generated-workspace__result[data-v-c8ff991b] {
179
179
  max-width: 76rem;
180
180
  min-height: 24rem;
181
181
  margin: 0 auto;
@@ -186,10 +186,10 @@
186
186
  box-shadow: var(--shadow-sm);
187
187
  }
188
188
  @media (max-width: 640px) {
189
- .mint-generated-workspace__header[data-v-41f5ec2e] {
189
+ .mint-generated-workspace__header[data-v-c8ff991b] {
190
190
  flex-direction: column;
191
191
  }
192
- .mint-generated-workspace__resources[data-v-41f5ec2e] {
192
+ .mint-generated-workspace__resources[data-v-c8ff991b] {
193
193
  justify-content: flex-start;
194
194
  }
195
195
  }
@@ -701,6 +701,22 @@ body {
701
701
  transition: background-color 0.15s, color 0.15s;
702
702
  }
703
703
 
704
+ /* No page-level rubber-band bounce or pull-to-refresh; overflow: hidden does
705
+ not stop it. Panels still scroll, and their overscroll stops at their own
706
+ edge. A browser tab keeps the horizontal swipe for back and forward; an
707
+ installed PWA has no history swipe, so it drops both axes. */
708
+ html,
709
+ body {
710
+ overscroll-behavior-y: none;
711
+ }
712
+
713
+ @media (display-mode: standalone) {
714
+ html,
715
+ body {
716
+ overscroll-behavior: none;
717
+ }
718
+ }
719
+
704
720
  code, pre {
705
721
  font-family: var(--font-mono);
706
722
  }
@@ -2610,6 +2626,13 @@ button, input, select, textarea {
2610
2626
  flex-shrink: 0;
2611
2627
  }
2612
2628
 
2629
+ .mint-topbar__job-count {
2630
+ color: var(--text-muted);
2631
+ font-family: var(--font-mono);
2632
+ font-size: 0.6875rem;
2633
+ font-variant-numeric: tabular-nums;
2634
+ }
2635
+
2613
2636
  .mint-topbar__job-icon--spin {
2614
2637
  animation: mint-topbar-job-spin 1s linear infinite;
2615
2638
  }
@@ -4311,11 +4334,9 @@ button, input, select, textarea {
4311
4334
  }
4312
4335
  }
4313
4336
 
4337
+ /* The compact jobs panel of design v2: opened from the top-bar run slot, one list
4338
+ (Active, then Finished), one row per job. Non-modal: the page is not dimmed. */
4314
4339
  .mint-jobs-tray {
4315
- position: fixed;
4316
- right: max(1.25rem, env(safe-area-inset-right));
4317
- bottom: max(1.25rem, env(safe-area-inset-bottom));
4318
- z-index: 1000;
4319
4340
  color: var(--text-primary);
4320
4341
  font-family: var(--font-sans);
4321
4342
  }
@@ -4325,146 +4346,79 @@ button, input, select, textarea {
4325
4346
  --border-light: var(--border-color);
4326
4347
  }
4327
4348
 
4328
- .mint-jobs-tray__trigger {
4329
- display: inline-flex;
4330
- min-height: 2.75rem;
4331
- align-items: center;
4332
- gap: 0.625rem;
4333
- padding: 0.5rem 1rem;
4334
- border: 0;
4335
- border-radius: var(--radius-lg);
4336
- background: var(--color-primary);
4337
- color: var(--text-on-accent);
4338
- box-shadow: var(--mint-shadow-pop);
4339
- cursor: pointer;
4340
- transition: background var(--mint-transition);
4341
- }
4342
-
4343
- .mint-jobs-tray__trigger:hover {
4344
- background: var(--color-primary-hover);
4345
- }
4346
-
4347
- .mint-jobs-tray__trigger:focus-visible,
4348
- .mint-jobs-tray__panel:focus-visible,
4349
- .mint-jobs-tray button:focus-visible {
4350
- outline: none;
4351
- box-shadow: var(--focus-ring-offset);
4352
- }
4353
-
4354
- .mint-jobs-tray__trigger-icon {
4355
- width: 1.125rem;
4356
- height: 1.125rem;
4357
- stroke-width: 1.8;
4358
- stroke-linecap: round;
4359
- stroke-linejoin: round;
4360
- }
4361
-
4362
- .mint-jobs-tray__trigger-icon--active {
4363
- animation: mint-jobs-tray-pulse 1.8s ease-in-out infinite;
4364
- }
4365
-
4366
- .mint-jobs-tray__trigger-label {
4367
- font-size: 0.875rem;
4368
- font-weight: 600;
4369
- }
4370
-
4371
- .mint-jobs-tray__count,
4372
- .mint-jobs-tray__tab-count {
4373
- display: inline-flex;
4374
- min-width: 1.25rem;
4375
- height: 1.25rem;
4376
- align-items: center;
4377
- justify-content: center;
4378
- padding: 0 0.375rem;
4379
- border-radius: var(--radius-sm);
4380
- font: 600 0.6875rem/1 var(--font-mono);
4381
- }
4382
-
4383
- /* Inverted on the accent fill: accent ink on the on-accent colour, in both themes. */
4384
- .mint-jobs-tray__count {
4385
- background: var(--text-on-accent);
4386
- color: var(--_ink-primary);
4387
- }
4388
-
4389
- .mint-jobs-tray__backdrop {
4349
+ /* Transparent: catches clicks outside the panel. */
4350
+ .mint-jobs-tray__scrim {
4390
4351
  position: fixed;
4391
4352
  inset: 0;
4392
- z-index: -2;
4393
- background: rgb(15 23 42 / 0.22);
4353
+ z-index: 999;
4394
4354
  }
4395
4355
 
4396
4356
  .mint-jobs-tray__panel {
4397
- position: absolute;
4398
- right: 0;
4399
- bottom: 3.75rem;
4357
+ position: fixed;
4358
+ top: calc(4.5rem + env(safe-area-inset-top));
4359
+ right: max(1rem, env(safe-area-inset-right));
4360
+ z-index: 1000;
4400
4361
  display: flex;
4401
- width: min(21.25rem, calc(100vw - 2rem));
4402
- max-height: min(42rem, calc(100vh - 7rem));
4362
+ width: min(360px, calc(100vw - 2rem));
4363
+ max-height: 75vh;
4403
4364
  flex-direction: column;
4404
4365
  overflow: hidden;
4405
4366
  border: 1px solid var(--border-color);
4406
4367
  border-radius: var(--radius-lg);
4407
4368
  background: var(--bg-card);
4408
4369
  box-shadow: var(--mint-shadow-pop);
4370
+ font-size: 0.8125rem;
4409
4371
  }
4410
4372
 
4411
- .mint-jobs-tray__header,
4412
- .mint-jobs-tray__job-heading,
4413
- .mint-jobs-tray__job-footer,
4414
- .mint-jobs-tray__header-actions,
4415
- .mint-jobs-tray__clear-row {
4416
- display: flex;
4417
- align-items: center;
4373
+ /* The panel takes focus only so Escape and Tab start inside it; it shows no ring. */
4374
+ .mint-jobs-tray__panel:focus {
4375
+ outline: none;
4418
4376
  }
4419
4377
 
4420
- .mint-jobs-tray__header {
4421
- justify-content: space-between;
4422
- height: 2.5rem;
4423
- padding: 0 0.5rem 0 0.75rem;
4424
- border-bottom: 1px solid var(--border-color);
4378
+ .mint-jobs-tray button:focus-visible {
4379
+ outline: none;
4380
+ box-shadow: var(--focus-ring);
4425
4381
  }
4426
4382
 
4427
- .mint-jobs-tray__header > div:first-child {
4383
+ .mint-jobs-tray__head {
4428
4384
  display: flex;
4429
- align-items: baseline;
4385
+ flex-shrink: 0;
4386
+ align-items: center;
4430
4387
  gap: 0.5rem;
4431
- min-width: 0;
4388
+ height: 40px;
4389
+ padding: 0 0.5rem 0 0.75rem;
4390
+ border-bottom: 1px solid var(--border-color);
4432
4391
  }
4433
4392
 
4434
4393
  .mint-jobs-tray__title {
4435
- flex-shrink: 0;
4436
4394
  margin: 0;
4437
- color: var(--text-primary);
4438
4395
  font-size: 0.8125rem;
4439
4396
  font-weight: 600;
4440
4397
  white-space: nowrap;
4441
4398
  }
4442
4399
 
4443
- .mint-jobs-tray__subtitle {
4400
+ .mint-jobs-tray__head-count {
4401
+ flex: 1;
4444
4402
  min-width: 0;
4445
- margin: 0;
4446
4403
  overflow: hidden;
4447
- color: var(--text-muted);
4448
- font: 0.6875rem/1.3 var(--font-mono);
4404
+ color: var(--text-secondary);
4405
+ font-family: var(--font-mono);
4406
+ font-size: 0.6875rem;
4449
4407
  text-overflow: ellipsis;
4450
4408
  white-space: nowrap;
4451
4409
  }
4452
4410
 
4453
- .mint-jobs-tray__header-actions {
4454
- gap: 0.25rem;
4455
- }
4456
-
4457
4411
  .mint-jobs-tray__icon-button {
4458
- display: inline-flex;
4459
- width: 2rem;
4460
- height: 2rem;
4461
- align-items: center;
4462
- justify-content: center;
4412
+ display: inline-grid;
4413
+ width: 28px;
4414
+ height: 28px;
4415
+ flex-shrink: 0;
4416
+ place-items: center;
4463
4417
  padding: 0;
4464
4418
  border: 0;
4465
4419
  border-radius: var(--radius-md);
4466
4420
  background: transparent;
4467
- color: var(--text-secondary-strong);
4421
+ color: var(--text-secondary);
4468
4422
  cursor: pointer;
4469
4423
  transition: background var(--mint-transition), color var(--mint-transition);
4470
4424
  }
@@ -4474,175 +4428,143 @@ button, input, select, textarea {
4474
4428
  color: var(--text-primary);
4475
4429
  }
4476
4430
 
4477
- .mint-jobs-tray__icon-button svg {
4478
- width: 1rem;
4479
- height: 1rem;
4480
- stroke-width: 1.8;
4481
- stroke-linecap: round;
4482
- stroke-linejoin: round;
4483
- }
4484
-
4485
- .mint-jobs-tray__icon-button--danger {
4431
+ .mint-jobs-tray__icon-button--danger,
4432
+ .mint-jobs-tray__icon-button--danger:hover {
4486
4433
  color: var(--mint-error);
4487
4434
  }
4488
4435
 
4489
- .mint-jobs-tray__tabs {
4490
- display: grid;
4491
- grid-template-columns: 1fr 1fr;
4492
- border-bottom: 1px solid var(--border-color);
4493
- }
4494
-
4495
- .mint-jobs-tray__tab {
4496
- position: relative;
4497
- display: inline-flex;
4498
- min-height: 2.75rem;
4499
- align-items: center;
4500
- justify-content: center;
4501
- gap: 0.375rem;
4502
- padding: 0.5rem 1rem;
4503
- border: 0;
4504
- background: transparent;
4505
- color: var(--text-secondary-strong);
4506
- font: 500 0.8125rem/1 var(--font-sans);
4507
- cursor: pointer;
4508
- }
4509
-
4510
- .mint-jobs-tray__tab--active {
4511
- color: var(--_ink-primary);
4512
- }
4513
-
4514
- .mint-jobs-tray__tab--active::after {
4515
- position: absolute;
4516
- right: 1rem;
4517
- bottom: 0;
4518
- left: 1rem;
4519
- height: 2px;
4520
- background: var(--color-primary);
4521
- content: '';
4522
- }
4523
-
4524
- .mint-jobs-tray__tab-count {
4525
- background: var(--bg-tertiary);
4526
- color: currentColor;
4527
- }
4528
-
4529
4436
  .mint-jobs-tray__error {
4530
- margin: 0.75rem 1rem;
4531
- padding: 0.625rem 0.75rem;
4437
+ margin: 0.5rem 0.75rem 0;
4438
+ padding: 0.5rem 0.75rem;
4532
4439
  border: 1px solid var(--mint-error-border);
4533
4440
  border-radius: var(--radius-md);
4534
4441
  background: var(--mint-error-bg);
4535
- color: var(--mint-error);
4442
+ color: var(--_ink-error);
4536
4443
  font-size: 0.75rem;
4537
4444
  }
4538
4445
 
4539
4446
  .mint-jobs-tray__body {
4540
4447
  flex: 1;
4448
+ min-height: 0;
4541
4449
  overflow-y: auto;
4542
4450
  scrollbar-color: var(--scrollbar-thumb) transparent;
4543
4451
  }
4544
4452
 
4545
4453
  .mint-jobs-tray__empty {
4546
4454
  margin: 0;
4547
- padding: 3rem 1rem;
4455
+ padding: 1.5rem 0.75rem;
4548
4456
  color: var(--text-secondary);
4549
4457
  text-align: center;
4550
- font-size: 0.8125rem;
4551
4458
  }
4552
4459
 
4553
- /* 2f: rows + hairlines, no card per job. */
4554
- .mint-jobs-tray__job {
4555
- padding: 0.625rem 0.75rem;
4460
+ .mint-jobs-tray__section {
4461
+ display: flex;
4462
+ align-items: center;
4463
+ gap: 0.375rem;
4464
+ padding: 0.625rem 0.75rem 0.25rem;
4465
+ color: var(--text-secondary);
4466
+ font-size: 0.6875rem;
4467
+ font-weight: 600;
4468
+ }
4469
+
4470
+ .mint-jobs-tray__section-count {
4471
+ color: var(--text-muted);
4472
+ font-family: var(--font-mono);
4473
+ font-weight: 500;
4474
+ }
4475
+
4476
+ .mint-jobs-tray__section-action {
4477
+ margin-left: auto;
4478
+ padding: 0;
4479
+ border: 0;
4480
+ border-radius: var(--radius-sm);
4481
+ background: transparent;
4482
+ color: var(--text-secondary);
4483
+ font: inherit;
4484
+ font-weight: 500;
4485
+ cursor: pointer;
4486
+ }
4487
+
4488
+ .mint-jobs-tray__section-action:hover {
4489
+ color: var(--mint-error);
4490
+ }
4491
+
4492
+ /* Rows + hairlines, no card per job. */
4493
+ .mint-jobs-tray__row {
4494
+ display: grid;
4495
+ grid-template-columns: 16px minmax(0, 1fr) auto;
4496
+ align-items: center;
4497
+ gap: 0.25rem 0.625rem;
4498
+ padding: 0.5rem 0.5rem 0.5rem 0.75rem;
4556
4499
  border-bottom: 1px solid var(--border-light);
4557
4500
  }
4558
4501
 
4502
+ .mint-jobs-tray__row:hover {
4503
+ background: var(--bg-hover);
4504
+ }
4505
+
4559
4506
  /* The one state that needs a person: tinted and pinned first. */
4560
- .mint-jobs-tray__job--awaiting-input {
4507
+ .mint-jobs-tray__row--awaiting-input,
4508
+ .mint-jobs-tray__row--awaiting-input:hover {
4561
4509
  background: var(--mint-warning-bg);
4562
4510
  }
4563
4511
 
4564
- .mint-jobs-tray__job-heading,
4565
- .mint-jobs-tray__job-footer {
4566
- justify-content: space-between;
4567
- gap: 0.75rem;
4512
+ .mint-jobs-tray__status {
4513
+ color: var(--text-muted);
4568
4514
  }
4569
4515
 
4570
- .mint-jobs-tray__job-identity {
4571
- flex: 1;
4572
- min-width: 0;
4516
+ .mint-jobs-tray__status--running {
4517
+ color: var(--color-primary);
4518
+ animation: mint-jobs-tray-spin 1s linear infinite;
4573
4519
  }
4574
4520
 
4575
- .mint-jobs-tray__job-select {
4576
- display: block;
4577
- max-width: 100%;
4521
+ .mint-jobs-tray__status--awaiting-input { color: var(--mint-warning); }
4522
+ .mint-jobs-tray__status--completed { color: var(--mint-success); }
4523
+ .mint-jobs-tray__status--failed { color: var(--mint-error); }
4524
+
4525
+ @keyframes mint-jobs-tray-spin {
4526
+ to { transform: rotate(360deg); }
4527
+ }
4528
+
4529
+ .mint-jobs-tray__row-title {
4530
+ min-width: 0;
4578
4531
  padding: 0;
4579
4532
  overflow: hidden;
4580
4533
  border: 0;
4534
+ border-radius: var(--radius-sm);
4581
4535
  background: transparent;
4582
4536
  color: var(--text-primary);
4583
- cursor: pointer;
4584
- font-size: 0.8125rem;
4537
+ font: inherit;
4585
4538
  font-weight: 500;
4586
4539
  text-align: left;
4587
4540
  text-overflow: ellipsis;
4588
4541
  white-space: nowrap;
4542
+ cursor: pointer;
4589
4543
  }
4590
4544
 
4591
- .mint-jobs-tray__kind {
4592
- display: block;
4593
- margin-top: 0.125rem;
4594
- color: var(--text-secondary);
4595
- font: 0.6875rem/1.3 var(--font-mono);
4596
- }
4597
-
4598
- /* Status: tone dot + neutral text. Only "waiting for input" and "failed"
4599
- color their text. */
4600
- .mint-jobs-tray__status {
4601
- display: inline-flex;
4602
- flex: 0 0 auto;
4545
+ .mint-jobs-tray__tools {
4546
+ display: flex;
4603
4547
  align-items: center;
4604
- gap: 0.375rem;
4605
- color: var(--text-secondary-strong);
4606
- font-size: 0.75rem;
4607
- --mint-jobs-tray-tone: var(--text-muted);
4608
- }
4609
-
4610
- .mint-jobs-tray__status-dot {
4611
- width: 0.375rem;
4612
- height: 0.375rem;
4613
- border-radius: 9999px;
4614
- background: var(--mint-jobs-tray-tone);
4615
- }
4616
-
4617
- .mint-jobs-tray__status--running { --mint-jobs-tray-tone: var(--color-primary); }
4618
- .mint-jobs-tray__status--completed { --mint-jobs-tray-tone: var(--mint-success); }
4619
-
4620
- .mint-jobs-tray__status--awaiting-input {
4621
- --mint-jobs-tray-tone: var(--mint-warning);
4622
- color: var(--mint-warning-text);
4623
- font-weight: 600;
4624
- }
4625
-
4626
- .mint-jobs-tray__status--failed {
4627
- --mint-jobs-tray-tone: var(--mint-error);
4628
- color: var(--_ink-error);
4548
+ gap: 2px;
4629
4549
  }
4630
4550
 
4631
- .mint-jobs-tray__percent {
4632
- flex: 0 0 auto;
4633
- min-width: 2.125rem;
4634
- color: var(--text-primary);
4551
+ .mint-jobs-tray__value {
4552
+ margin-right: 0.375rem;
4553
+ color: var(--text-secondary);
4635
4554
  font-family: var(--font-mono);
4636
- font-size: 0.75rem;
4555
+ font-size: 0.6875rem;
4637
4556
  font-variant-numeric: tabular-nums;
4638
- text-align: right;
4557
+ }
4558
+
4559
+ .mint-jobs-tray__progress,
4560
+ .mint-jobs-tray__detail {
4561
+ grid-column: 2 / 4;
4639
4562
  }
4640
4563
 
4641
4564
  .mint-jobs-tray__progress {
4642
- height: 4px;
4643
- margin-top: 0.375rem;
4565
+ height: 2px;
4644
4566
  overflow: hidden;
4645
- border-radius: 2px;
4567
+ border-radius: 1px;
4646
4568
  background: var(--bg-tertiary);
4647
4569
  }
4648
4570
 
@@ -4653,56 +4575,17 @@ button, input, select, textarea {
4653
4575
  transition: width var(--mint-transition);
4654
4576
  }
4655
4577
 
4656
- .mint-jobs-tray__job-footer {
4657
- min-height: 1.75rem;
4658
- margin-top: 0.375rem;
4578
+ .mint-jobs-tray__detail {
4579
+ min-width: 0;
4580
+ overflow: hidden;
4659
4581
  color: var(--text-secondary);
4660
4582
  font-size: 0.75rem;
4583
+ text-overflow: ellipsis;
4584
+ white-space: nowrap;
4661
4585
  }
4662
4586
 
4663
- .mint-jobs-tray__action {
4664
- min-height: 1.75rem;
4665
- padding: 0.375rem 0.625rem;
4666
- border: 1px solid var(--border-color);
4667
- border-radius: var(--radius);
4668
- background: var(--bg-secondary);
4669
- color: var(--text-secondary-strong);
4670
- font: 500 0.75rem/1 var(--font-sans);
4671
- cursor: pointer;
4672
- transition: background var(--mint-transition), border-color var(--mint-transition), color var(--mint-transition);
4673
- }
4674
-
4675
- .mint-jobs-tray__job-actions {
4676
- display: inline-flex;
4677
- align-items: center;
4678
- gap: 0.25rem;
4679
- }
4680
-
4681
- /* 2f: the inline action of a row waiting for input is the primary one. */
4682
- .mint-jobs-tray__job--awaiting-input .mint-jobs-tray__action:not(.mint-jobs-tray__action--danger) {
4683
- border-color: var(--color-primary);
4684
- background: var(--color-primary);
4685
- color: var(--text-on-accent);
4686
- }
4687
-
4688
- .mint-jobs-tray__job--awaiting-input .mint-jobs-tray__action:not(.mint-jobs-tray__action--danger):hover {
4689
- border-color: var(--color-primary-hover);
4690
- background: var(--color-primary-hover);
4691
- }
4692
-
4693
- .mint-jobs-tray__action--danger {
4694
- border-color: var(--mint-error-border);
4695
- color: var(--mint-error);
4696
- }
4697
-
4698
- .mint-jobs-tray__action--danger:hover {
4699
- background: var(--mint-error-bg);
4700
- }
4701
-
4702
- .mint-jobs-tray__clear-row {
4703
- justify-content: flex-end;
4704
- padding: 0.5rem 0.75rem;
4705
- border-bottom: 1px solid var(--border-light);
4587
+ .mint-jobs-tray__detail--error {
4588
+ color: var(--_ink-error);
4706
4589
  }
4707
4590
 
4708
4591
  .mint-jobs-tray button:disabled {
@@ -4710,12 +4593,10 @@ button, input, select, textarea {
4710
4593
  cursor: not-allowed;
4711
4594
  }
4712
4595
 
4713
- /* Overlays fade in 180ms; no lift or scale (v2). */
4596
+ /* Overlays fade in; no lift or scale (v2). */
4714
4597
  .mint-jobs-tray-fade-enter-active,
4715
- .mint-jobs-tray-fade-leave-active,
4716
- .mint-jobs-tray-slide-enter-active,
4717
- .mint-jobs-tray-slide-leave-active {
4718
- transition: opacity 180ms ease;
4598
+ .mint-jobs-tray-fade-leave-active {
4599
+ transition: opacity 150ms ease;
4719
4600
  }
4720
4601
 
4721
4602
  .mint-jobs-tray-fade-enter-from,
@@ -4723,31 +4604,6 @@ button, input, select, textarea {
4723
4604
  opacity: 0;
4724
4605
  }
4725
4606
 
4726
- .mint-jobs-tray-slide-enter-from,
4727
- .mint-jobs-tray-slide-leave-to {
4728
- opacity: 0;
4729
- }
4730
-
4731
- @keyframes mint-jobs-tray-pulse {
4732
- 50% { opacity: 0.55; }
4733
- }
4734
-
4735
- @media (max-width: 480px) {
4736
- .mint-jobs-tray {
4737
- right: max(1rem, env(safe-area-inset-right));
4738
- bottom: max(1rem, env(safe-area-inset-bottom));
4739
- }
4740
-
4741
- .mint-jobs-tray__panel {
4742
- position: fixed;
4743
- right: 1rem;
4744
- bottom: 4.75rem;
4745
- left: 1rem;
4746
- width: auto;
4747
- max-height: calc(100vh - 6.75rem - env(safe-area-inset-bottom));
4748
- }
4749
- }
4750
-
4751
4607
  @media (prefers-reduced-motion: reduce) {
4752
4608
  .mint-jobs-tray *,
4753
4609
  .mint-jobs-tray *::before,
@@ -262,6 +262,8 @@ export interface PluginWorkspaceViewSpec {
262
262
  disabled?: import('vue').MaybeRefOrGetter<boolean>;
263
263
  reason?: import('vue').MaybeRefOrGetter<string | undefined>;
264
264
  };
265
+ /** Job source: the top bar shows the viewer's job and opens a JobsStatusTray. Read once at setup, like `experiment`. */
266
+ jobs?: import('vue').MaybeRefOrGetter<import('../composables/useJobCenter').PluginJobCenterSource | undefined>;
265
267
  }
266
268
  export type { WellPlateFormat, WellState, WellPlateSelectionMode, WellPlateSize, WellShape, Well, WellClassValue, WellClassResolver, WellStyleResolver, HeatmapColorScale, HeatmapConfig, SlotPosition, WellExtendedData, WellEditData, WellEditField, WellSampleDropData, WellSampleDropContext, WellSampleDropParser, WellLegendItem, PlateCondition, ColumnCondition, RowCondition, Rack, PlateEditorClearConfirm, WellPlateSpec, PlateEditorSpec, SampleType, ProtocolStepType, ProtocolStepStatus, ProtocolStep, SampleGroup, FileUploaderMode, MoleculeData, TreeNodeType, BadgeVariant, TreeNode, } from './componentLabTypes';
267
269
  /** One series in the ChartContainer header legend. */