@morscherlab/mint-sdk 1.4.0-beta.17 → 1.4.0-beta.19

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 (76) 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 +15 -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 +41 -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-DBnmeBZX.js} +9 -9
  23. package/dist/{data-OZ94DhVC.js.map → data-DBnmeBZX.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-C5psB1H0.js} +13 -13
  27. package/dist/{install-BKgb5qZw.js.map → install-C5psB1H0.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-CoHhBP10.js} +398 -31
  35. package/dist/runtime-CoHhBP10.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 +151 -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-C3whhVvb.js +508 -0
  50. package/dist/useRealtime-C3whhVvb.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 +373 -71
  57. package/src/__tests__/components/PluginWorkspaceView.test.ts +56 -1
  58. package/src/__tests__/composables/useJobCenter.test.ts +262 -3
  59. package/src/__tests__/docs/frontendDocsCatalog.test.ts +4 -3
  60. package/src/components/AppTopBar.vue +14 -0
  61. package/src/components/GeneratedPluginView.vue +4 -9
  62. package/src/components/JobsStatusTray.story.vue +97 -43
  63. package/src/components/JobsStatusTray.vue +287 -290
  64. package/src/components/PluginWorkspaceView.props.ts +3 -0
  65. package/src/components/PluginWorkspaceView.vue +17 -0
  66. package/src/components/internal/WorkspaceShellInternal.vue +12 -0
  67. package/src/composables/useJobCenter.ts +188 -6
  68. package/src/runtime.ts +2 -1
  69. package/src/styles/components/app-top-bar.css +7 -0
  70. package/src/styles/components/jobs-status-tray.css +134 -296
  71. package/src/types/components.ts +2 -0
  72. package/dist/AppSidebar-CB0-RQ4m.js.map +0 -1
  73. package/dist/runtime-Cz1GJa_O.js.map +0 -1
  74. package/dist/useListReorder-C_8RYeVP.js.map +0 -1
  75. package/dist/useRealtime-CUMbW_ln.js +0 -699
  76. 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
  }
@@ -2626,6 +2626,13 @@ button, input, select, textarea {
2626
2626
  flex-shrink: 0;
2627
2627
  }
2628
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
+
2629
2636
  .mint-topbar__job-icon--spin {
2630
2637
  animation: mint-topbar-job-spin 1s linear infinite;
2631
2638
  }
@@ -4327,11 +4334,9 @@ button, input, select, textarea {
4327
4334
  }
4328
4335
  }
4329
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. */
4330
4339
  .mint-jobs-tray {
4331
- position: fixed;
4332
- right: max(1.25rem, env(safe-area-inset-right));
4333
- bottom: max(1.25rem, env(safe-area-inset-bottom));
4334
- z-index: 1000;
4335
4340
  color: var(--text-primary);
4336
4341
  font-family: var(--font-sans);
4337
4342
  }
@@ -4341,146 +4346,79 @@ button, input, select, textarea {
4341
4346
  --border-light: var(--border-color);
4342
4347
  }
4343
4348
 
4344
- .mint-jobs-tray__trigger {
4345
- display: inline-flex;
4346
- min-height: 2.75rem;
4347
- align-items: center;
4348
- gap: 0.625rem;
4349
- padding: 0.5rem 1rem;
4350
- border: 0;
4351
- border-radius: var(--radius-lg);
4352
- background: var(--color-primary);
4353
- color: var(--text-on-accent);
4354
- box-shadow: var(--mint-shadow-pop);
4355
- cursor: pointer;
4356
- transition: background var(--mint-transition);
4357
- }
4358
-
4359
- .mint-jobs-tray__trigger:hover {
4360
- background: var(--color-primary-hover);
4361
- }
4362
-
4363
- .mint-jobs-tray__trigger:focus-visible,
4364
- .mint-jobs-tray__panel:focus-visible,
4365
- .mint-jobs-tray button:focus-visible {
4366
- outline: none;
4367
- box-shadow: var(--focus-ring-offset);
4368
- }
4369
-
4370
- .mint-jobs-tray__trigger-icon {
4371
- width: 1.125rem;
4372
- height: 1.125rem;
4373
- stroke-width: 1.8;
4374
- stroke-linecap: round;
4375
- stroke-linejoin: round;
4376
- }
4377
-
4378
- .mint-jobs-tray__trigger-icon--active {
4379
- animation: mint-jobs-tray-pulse 1.8s ease-in-out infinite;
4380
- }
4381
-
4382
- .mint-jobs-tray__trigger-label {
4383
- font-size: 0.875rem;
4384
- font-weight: 600;
4385
- }
4386
-
4387
- .mint-jobs-tray__count,
4388
- .mint-jobs-tray__tab-count {
4389
- display: inline-flex;
4390
- min-width: 1.25rem;
4391
- height: 1.25rem;
4392
- align-items: center;
4393
- justify-content: center;
4394
- padding: 0 0.375rem;
4395
- border-radius: var(--radius-sm);
4396
- font: 600 0.6875rem/1 var(--font-mono);
4397
- }
4398
-
4399
- /* Inverted on the accent fill: accent ink on the on-accent colour, in both themes. */
4400
- .mint-jobs-tray__count {
4401
- background: var(--text-on-accent);
4402
- color: var(--_ink-primary);
4403
- }
4404
-
4405
- .mint-jobs-tray__backdrop {
4349
+ /* Transparent: catches clicks outside the panel. */
4350
+ .mint-jobs-tray__scrim {
4406
4351
  position: fixed;
4407
4352
  inset: 0;
4408
- z-index: -2;
4409
- background: rgb(15 23 42 / 0.22);
4353
+ z-index: 999;
4410
4354
  }
4411
4355
 
4412
4356
  .mint-jobs-tray__panel {
4413
- position: absolute;
4414
- right: 0;
4415
- 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;
4416
4361
  display: flex;
4417
- width: min(21.25rem, calc(100vw - 2rem));
4418
- max-height: min(42rem, calc(100vh - 7rem));
4362
+ width: min(360px, calc(100vw - 2rem));
4363
+ max-height: 75vh;
4419
4364
  flex-direction: column;
4420
4365
  overflow: hidden;
4421
4366
  border: 1px solid var(--border-color);
4422
4367
  border-radius: var(--radius-lg);
4423
4368
  background: var(--bg-card);
4424
4369
  box-shadow: var(--mint-shadow-pop);
4370
+ font-size: 0.8125rem;
4425
4371
  }
4426
4372
 
4427
- .mint-jobs-tray__header,
4428
- .mint-jobs-tray__job-heading,
4429
- .mint-jobs-tray__job-footer,
4430
- .mint-jobs-tray__header-actions,
4431
- .mint-jobs-tray__clear-row {
4432
- display: flex;
4433
- 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;
4434
4376
  }
4435
4377
 
4436
- .mint-jobs-tray__header {
4437
- justify-content: space-between;
4438
- height: 2.5rem;
4439
- padding: 0 0.5rem 0 0.75rem;
4440
- border-bottom: 1px solid var(--border-color);
4378
+ .mint-jobs-tray button:focus-visible {
4379
+ outline: none;
4380
+ box-shadow: var(--focus-ring);
4441
4381
  }
4442
4382
 
4443
- .mint-jobs-tray__header > div:first-child {
4383
+ .mint-jobs-tray__head {
4444
4384
  display: flex;
4445
- align-items: baseline;
4385
+ flex-shrink: 0;
4386
+ align-items: center;
4446
4387
  gap: 0.5rem;
4447
- min-width: 0;
4388
+ height: 40px;
4389
+ padding: 0 0.5rem 0 0.75rem;
4390
+ border-bottom: 1px solid var(--border-color);
4448
4391
  }
4449
4392
 
4450
4393
  .mint-jobs-tray__title {
4451
- flex-shrink: 0;
4452
4394
  margin: 0;
4453
- color: var(--text-primary);
4454
4395
  font-size: 0.8125rem;
4455
4396
  font-weight: 600;
4456
4397
  white-space: nowrap;
4457
4398
  }
4458
4399
 
4459
- .mint-jobs-tray__subtitle {
4400
+ .mint-jobs-tray__head-count {
4401
+ flex: 1;
4460
4402
  min-width: 0;
4461
- margin: 0;
4462
4403
  overflow: hidden;
4463
- color: var(--text-muted);
4464
- font: 0.6875rem/1.3 var(--font-mono);
4404
+ color: var(--text-secondary);
4405
+ font-family: var(--font-mono);
4406
+ font-size: 0.6875rem;
4465
4407
  text-overflow: ellipsis;
4466
4408
  white-space: nowrap;
4467
4409
  }
4468
4410
 
4469
- .mint-jobs-tray__header-actions {
4470
- gap: 0.25rem;
4471
- }
4472
-
4473
4411
  .mint-jobs-tray__icon-button {
4474
- display: inline-flex;
4475
- width: 2rem;
4476
- height: 2rem;
4477
- align-items: center;
4478
- justify-content: center;
4412
+ display: inline-grid;
4413
+ width: 28px;
4414
+ height: 28px;
4415
+ flex-shrink: 0;
4416
+ place-items: center;
4479
4417
  padding: 0;
4480
4418
  border: 0;
4481
4419
  border-radius: var(--radius-md);
4482
4420
  background: transparent;
4483
- color: var(--text-secondary-strong);
4421
+ color: var(--text-secondary);
4484
4422
  cursor: pointer;
4485
4423
  transition: background var(--mint-transition), color var(--mint-transition);
4486
4424
  }
@@ -4490,175 +4428,143 @@ button, input, select, textarea {
4490
4428
  color: var(--text-primary);
4491
4429
  }
4492
4430
 
4493
- .mint-jobs-tray__icon-button svg {
4494
- width: 1rem;
4495
- height: 1rem;
4496
- stroke-width: 1.8;
4497
- stroke-linecap: round;
4498
- stroke-linejoin: round;
4499
- }
4500
-
4501
- .mint-jobs-tray__icon-button--danger {
4431
+ .mint-jobs-tray__icon-button--danger,
4432
+ .mint-jobs-tray__icon-button--danger:hover {
4502
4433
  color: var(--mint-error);
4503
4434
  }
4504
4435
 
4505
- .mint-jobs-tray__tabs {
4506
- display: grid;
4507
- grid-template-columns: 1fr 1fr;
4508
- border-bottom: 1px solid var(--border-color);
4509
- }
4510
-
4511
- .mint-jobs-tray__tab {
4512
- position: relative;
4513
- display: inline-flex;
4514
- min-height: 2.75rem;
4515
- align-items: center;
4516
- justify-content: center;
4517
- gap: 0.375rem;
4518
- padding: 0.5rem 1rem;
4519
- border: 0;
4520
- background: transparent;
4521
- color: var(--text-secondary-strong);
4522
- font: 500 0.8125rem/1 var(--font-sans);
4523
- cursor: pointer;
4524
- }
4525
-
4526
- .mint-jobs-tray__tab--active {
4527
- color: var(--_ink-primary);
4528
- }
4529
-
4530
- .mint-jobs-tray__tab--active::after {
4531
- position: absolute;
4532
- right: 1rem;
4533
- bottom: 0;
4534
- left: 1rem;
4535
- height: 2px;
4536
- background: var(--color-primary);
4537
- content: '';
4538
- }
4539
-
4540
- .mint-jobs-tray__tab-count {
4541
- background: var(--bg-tertiary);
4542
- color: currentColor;
4543
- }
4544
-
4545
4436
  .mint-jobs-tray__error {
4546
- margin: 0.75rem 1rem;
4547
- padding: 0.625rem 0.75rem;
4437
+ margin: 0.5rem 0.75rem 0;
4438
+ padding: 0.5rem 0.75rem;
4548
4439
  border: 1px solid var(--mint-error-border);
4549
4440
  border-radius: var(--radius-md);
4550
4441
  background: var(--mint-error-bg);
4551
- color: var(--mint-error);
4442
+ color: var(--_ink-error);
4552
4443
  font-size: 0.75rem;
4553
4444
  }
4554
4445
 
4555
4446
  .mint-jobs-tray__body {
4556
4447
  flex: 1;
4448
+ min-height: 0;
4557
4449
  overflow-y: auto;
4558
4450
  scrollbar-color: var(--scrollbar-thumb) transparent;
4559
4451
  }
4560
4452
 
4561
4453
  .mint-jobs-tray__empty {
4562
4454
  margin: 0;
4563
- padding: 3rem 1rem;
4455
+ padding: 1.5rem 0.75rem;
4564
4456
  color: var(--text-secondary);
4565
4457
  text-align: center;
4566
- font-size: 0.8125rem;
4567
4458
  }
4568
4459
 
4569
- /* 2f: rows + hairlines, no card per job. */
4570
- .mint-jobs-tray__job {
4571
- 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;
4572
4499
  border-bottom: 1px solid var(--border-light);
4573
4500
  }
4574
4501
 
4502
+ .mint-jobs-tray__row:hover {
4503
+ background: var(--bg-hover);
4504
+ }
4505
+
4575
4506
  /* The one state that needs a person: tinted and pinned first. */
4576
- .mint-jobs-tray__job--awaiting-input {
4507
+ .mint-jobs-tray__row--awaiting-input,
4508
+ .mint-jobs-tray__row--awaiting-input:hover {
4577
4509
  background: var(--mint-warning-bg);
4578
4510
  }
4579
4511
 
4580
- .mint-jobs-tray__job-heading,
4581
- .mint-jobs-tray__job-footer {
4582
- justify-content: space-between;
4583
- gap: 0.75rem;
4512
+ .mint-jobs-tray__status {
4513
+ color: var(--text-muted);
4584
4514
  }
4585
4515
 
4586
- .mint-jobs-tray__job-identity {
4587
- flex: 1;
4588
- min-width: 0;
4516
+ .mint-jobs-tray__status--running {
4517
+ color: var(--color-primary);
4518
+ animation: mint-jobs-tray-spin 1s linear infinite;
4589
4519
  }
4590
4520
 
4591
- .mint-jobs-tray__job-select {
4592
- display: block;
4593
- 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;
4594
4531
  padding: 0;
4595
4532
  overflow: hidden;
4596
4533
  border: 0;
4534
+ border-radius: var(--radius-sm);
4597
4535
  background: transparent;
4598
4536
  color: var(--text-primary);
4599
- cursor: pointer;
4600
- font-size: 0.8125rem;
4537
+ font: inherit;
4601
4538
  font-weight: 500;
4602
4539
  text-align: left;
4603
4540
  text-overflow: ellipsis;
4604
4541
  white-space: nowrap;
4542
+ cursor: pointer;
4605
4543
  }
4606
4544
 
4607
- .mint-jobs-tray__kind {
4608
- display: block;
4609
- margin-top: 0.125rem;
4610
- color: var(--text-secondary);
4611
- font: 0.6875rem/1.3 var(--font-mono);
4612
- }
4613
-
4614
- /* Status: tone dot + neutral text. Only "waiting for input" and "failed"
4615
- color their text. */
4616
- .mint-jobs-tray__status {
4617
- display: inline-flex;
4618
- flex: 0 0 auto;
4545
+ .mint-jobs-tray__tools {
4546
+ display: flex;
4619
4547
  align-items: center;
4620
- gap: 0.375rem;
4621
- color: var(--text-secondary-strong);
4622
- font-size: 0.75rem;
4623
- --mint-jobs-tray-tone: var(--text-muted);
4624
- }
4625
-
4626
- .mint-jobs-tray__status-dot {
4627
- width: 0.375rem;
4628
- height: 0.375rem;
4629
- border-radius: 9999px;
4630
- background: var(--mint-jobs-tray-tone);
4631
- }
4632
-
4633
- .mint-jobs-tray__status--running { --mint-jobs-tray-tone: var(--color-primary); }
4634
- .mint-jobs-tray__status--completed { --mint-jobs-tray-tone: var(--mint-success); }
4635
-
4636
- .mint-jobs-tray__status--awaiting-input {
4637
- --mint-jobs-tray-tone: var(--mint-warning);
4638
- color: var(--mint-warning-text);
4639
- font-weight: 600;
4640
- }
4641
-
4642
- .mint-jobs-tray__status--failed {
4643
- --mint-jobs-tray-tone: var(--mint-error);
4644
- color: var(--_ink-error);
4548
+ gap: 2px;
4645
4549
  }
4646
4550
 
4647
- .mint-jobs-tray__percent {
4648
- flex: 0 0 auto;
4649
- min-width: 2.125rem;
4650
- color: var(--text-primary);
4551
+ .mint-jobs-tray__value {
4552
+ margin-right: 0.375rem;
4553
+ color: var(--text-secondary);
4651
4554
  font-family: var(--font-mono);
4652
- font-size: 0.75rem;
4555
+ font-size: 0.6875rem;
4653
4556
  font-variant-numeric: tabular-nums;
4654
- text-align: right;
4557
+ }
4558
+
4559
+ .mint-jobs-tray__progress,
4560
+ .mint-jobs-tray__detail {
4561
+ grid-column: 2 / 4;
4655
4562
  }
4656
4563
 
4657
4564
  .mint-jobs-tray__progress {
4658
- height: 4px;
4659
- margin-top: 0.375rem;
4565
+ height: 2px;
4660
4566
  overflow: hidden;
4661
- border-radius: 2px;
4567
+ border-radius: 1px;
4662
4568
  background: var(--bg-tertiary);
4663
4569
  }
4664
4570
 
@@ -4669,56 +4575,17 @@ button, input, select, textarea {
4669
4575
  transition: width var(--mint-transition);
4670
4576
  }
4671
4577
 
4672
- .mint-jobs-tray__job-footer {
4673
- min-height: 1.75rem;
4674
- margin-top: 0.375rem;
4578
+ .mint-jobs-tray__detail {
4579
+ min-width: 0;
4580
+ overflow: hidden;
4675
4581
  color: var(--text-secondary);
4676
4582
  font-size: 0.75rem;
4583
+ text-overflow: ellipsis;
4584
+ white-space: nowrap;
4677
4585
  }
4678
4586
 
4679
- .mint-jobs-tray__action {
4680
- min-height: 1.75rem;
4681
- padding: 0.375rem 0.625rem;
4682
- border: 1px solid var(--border-color);
4683
- border-radius: var(--radius);
4684
- background: var(--bg-secondary);
4685
- color: var(--text-secondary-strong);
4686
- font: 500 0.75rem/1 var(--font-sans);
4687
- cursor: pointer;
4688
- transition: background var(--mint-transition), border-color var(--mint-transition), color var(--mint-transition);
4689
- }
4690
-
4691
- .mint-jobs-tray__job-actions {
4692
- display: inline-flex;
4693
- align-items: center;
4694
- gap: 0.25rem;
4695
- }
4696
-
4697
- /* 2f: the inline action of a row waiting for input is the primary one. */
4698
- .mint-jobs-tray__job--awaiting-input .mint-jobs-tray__action:not(.mint-jobs-tray__action--danger) {
4699
- border-color: var(--color-primary);
4700
- background: var(--color-primary);
4701
- color: var(--text-on-accent);
4702
- }
4703
-
4704
- .mint-jobs-tray__job--awaiting-input .mint-jobs-tray__action:not(.mint-jobs-tray__action--danger):hover {
4705
- border-color: var(--color-primary-hover);
4706
- background: var(--color-primary-hover);
4707
- }
4708
-
4709
- .mint-jobs-tray__action--danger {
4710
- border-color: var(--mint-error-border);
4711
- color: var(--mint-error);
4712
- }
4713
-
4714
- .mint-jobs-tray__action--danger:hover {
4715
- background: var(--mint-error-bg);
4716
- }
4717
-
4718
- .mint-jobs-tray__clear-row {
4719
- justify-content: flex-end;
4720
- padding: 0.5rem 0.75rem;
4721
- border-bottom: 1px solid var(--border-light);
4587
+ .mint-jobs-tray__detail--error {
4588
+ color: var(--_ink-error);
4722
4589
  }
4723
4590
 
4724
4591
  .mint-jobs-tray button:disabled {
@@ -4726,12 +4593,10 @@ button, input, select, textarea {
4726
4593
  cursor: not-allowed;
4727
4594
  }
4728
4595
 
4729
- /* Overlays fade in 180ms; no lift or scale (v2). */
4596
+ /* Overlays fade in; no lift or scale (v2). */
4730
4597
  .mint-jobs-tray-fade-enter-active,
4731
- .mint-jobs-tray-fade-leave-active,
4732
- .mint-jobs-tray-slide-enter-active,
4733
- .mint-jobs-tray-slide-leave-active {
4734
- transition: opacity 180ms ease;
4598
+ .mint-jobs-tray-fade-leave-active {
4599
+ transition: opacity 150ms ease;
4735
4600
  }
4736
4601
 
4737
4602
  .mint-jobs-tray-fade-enter-from,
@@ -4739,31 +4604,6 @@ button, input, select, textarea {
4739
4604
  opacity: 0;
4740
4605
  }
4741
4606
 
4742
- .mint-jobs-tray-slide-enter-from,
4743
- .mint-jobs-tray-slide-leave-to {
4744
- opacity: 0;
4745
- }
4746
-
4747
- @keyframes mint-jobs-tray-pulse {
4748
- 50% { opacity: 0.55; }
4749
- }
4750
-
4751
- @media (max-width: 480px) {
4752
- .mint-jobs-tray {
4753
- right: max(1rem, env(safe-area-inset-right));
4754
- bottom: max(1rem, env(safe-area-inset-bottom));
4755
- }
4756
-
4757
- .mint-jobs-tray__panel {
4758
- position: fixed;
4759
- right: 1rem;
4760
- bottom: 4.75rem;
4761
- left: 1rem;
4762
- width: auto;
4763
- max-height: calc(100vh - 6.75rem - env(safe-area-inset-bottom));
4764
- }
4765
- }
4766
-
4767
4607
  @media (prefers-reduced-motion: reduce) {
4768
4608
  .mint-jobs-tray *,
4769
4609
  .mint-jobs-tray *::before,
@@ -4775,6 +4615,10 @@ button, input, select, textarea {
4775
4615
  }
4776
4616
  }
4777
4617
 
4618
+ /* The tray's confirm dialog sits above the tray and its scrim (BaseModal drops class fallthrough). */
4619
+ .mint-modal:has(.mint-jobs-tray__confirm) {
4620
+ z-index: 1001;
4621
+ }
4778
4622
  .mint-layout-resize-handle {
4779
4623
  display: flex;
4780
4624
  flex-shrink: 0;
@@ -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. */