@morscherlab/mint-sdk 1.0.15 → 1.0.16

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 (56) hide show
  1. package/dist/{BaseSelect-DksaKYq_.js → BaseSelect-ekgr9fDo.js} +4 -1
  2. package/dist/BaseSelect-ekgr9fDo.js.map +1 -0
  3. package/dist/{ExperimentSelectorModal-DIFyL5ta.js → ExperimentSelectorModal-BOzDs8TU.js} +2 -2
  4. package/dist/{ExperimentSelectorModal-CHsU-LIh.js → ExperimentSelectorModal-CX0oBzpV.js} +2 -2
  5. package/dist/{ExperimentSelectorModal-CHsU-LIh.js.map → ExperimentSelectorModal-CX0oBzpV.js.map} +1 -1
  6. package/dist/{SettingsModal-LEKI6Ebl.js → SettingsModal-BTyXD0uP.js} +3 -3
  7. package/dist/{SettingsModal-LEKI6Ebl.js.map → SettingsModal-BTyXD0uP.js.map} +1 -1
  8. package/dist/SettingsModal-DXcSKk9D.js +5 -0
  9. package/dist/__tests__/components/MobileSupportGate.test.d.ts +1 -0
  10. package/dist/__tests__/composables/useMobileSupportGate.test.d.ts +1 -0
  11. package/dist/components/AutoGroupModal.vue.d.ts +6 -0
  12. package/dist/components/BaseInput.vue.d.ts +1 -0
  13. package/dist/components/MobileSupportGate.vue.d.ts +40 -0
  14. package/dist/components/SampleSelector.colors.d.ts +2 -1
  15. package/dist/components/index.d.ts +1 -0
  16. package/dist/components/index.js +6 -6
  17. package/dist/{components-Cyk8QEyL.js → components-D0CzE0XK.js} +1061 -473
  18. package/dist/components-D0CzE0XK.js.map +1 -0
  19. package/dist/composables/index.d.ts +1 -0
  20. package/dist/composables/index.js +7 -7
  21. package/dist/composables/useMobileSupportGate.d.ts +14 -0
  22. package/dist/{composables-D9mexHSW.js → composables-Da-4XOe2.js} +3 -3
  23. package/dist/{composables-D9mexHSW.js.map → composables-Da-4XOe2.js.map} +1 -1
  24. package/dist/index.js +10 -10
  25. package/dist/install.js +5 -5
  26. package/dist/styles.css +3705 -2286
  27. package/dist/templates/index.js +3 -3
  28. package/dist/{templates-Do43ZIMb.js → templates-Dnf8UNxg.js} +2 -2
  29. package/dist/{templates-Do43ZIMb.js.map → templates-Dnf8UNxg.js.map} +1 -1
  30. package/dist/{useControlSchema-0n8Bcftq.js → useControlSchema-Dkm-W_lg.js} +2 -2
  31. package/dist/{useControlSchema-0n8Bcftq.js.map → useControlSchema-Dkm-W_lg.js.map} +1 -1
  32. package/dist/{useFormBuilder-COfYWDuC.js → useFormBuilder-BOJ52N4M.js} +2 -2
  33. package/dist/{useFormBuilder-COfYWDuC.js.map → useFormBuilder-BOJ52N4M.js.map} +1 -1
  34. package/dist/{useProtocolTemplates-DODHlhxr.js → useProtocolTemplates-r2GOnnH1.js} +55 -5
  35. package/dist/useProtocolTemplates-r2GOnnH1.js.map +1 -0
  36. package/package.json +1 -1
  37. package/src/__tests__/components/MobileSupportGate.test.ts +120 -0
  38. package/src/__tests__/components/SampleSelector.test.ts +119 -0
  39. package/src/__tests__/composables/useMobileSupportGate.test.ts +74 -0
  40. package/src/components/AutoGroupModal.story.vue +46 -0
  41. package/src/components/AutoGroupModal.vue +578 -2
  42. package/src/components/BaseInput.vue +2 -0
  43. package/src/components/MobileSupportGate.story.vue +52 -0
  44. package/src/components/MobileSupportGate.vue +115 -0
  45. package/src/components/SampleSelector.colors.ts +7 -2
  46. package/src/components/SampleSelector.story.vue +34 -0
  47. package/src/components/SampleSelector.vue +22 -1
  48. package/src/components/index.ts +1 -0
  49. package/src/composables/index.ts +8 -0
  50. package/src/composables/useMobileSupportGate.ts +80 -0
  51. package/src/styles/components/auto-group-modal.css +744 -0
  52. package/src/styles/components/mobile-support-gate.css +119 -0
  53. package/dist/BaseSelect-DksaKYq_.js.map +0 -1
  54. package/dist/SettingsModal-L7Ejny45.js +0 -5
  55. package/dist/components-Cyk8QEyL.js.map +0 -1
  56. package/dist/useProtocolTemplates-DODHlhxr.js.map +0 -1
package/src/styles/components/auto-group-modal.css CHANGED
@@ -4,7 +4,679 @@
4
4
  flex: 1;
5
5
  display: flex;
6
6
  flex-direction: column;
7
+ gap: 0.625rem;
7
8
  min-height: 0;
9
+ min-width: 0;
10
+ }
11
+
12
+ /* --- Workflow tabs --- */
13
+ .mint-auto-group__workflow-bar {
14
+ display: flex;
15
+ align-items: flex-end;
16
+ justify-content: space-between;
17
+ gap: 0.25rem;
18
+ min-width: 0;
19
+ padding-bottom: 0;
20
+ border-bottom: 1px solid var(--border-color);
21
+ }
22
+
23
+ .mint-auto-group__workflow-bar--manual {
24
+ gap: 0.75rem;
25
+ }
26
+
27
+ .mint-auto-group__workflow-tabs {
28
+ display: flex;
29
+ flex-shrink: 0;
30
+ gap: 0.25rem;
31
+ }
32
+
33
+ .mint-auto-group__workflow-tab {
34
+ min-height: 1.75rem;
35
+ margin-bottom: -1px;
36
+ padding: 0.25rem 0.625rem;
37
+ border: 0;
38
+ border-bottom: 2px solid transparent;
39
+ border-radius: 0;
40
+ background: transparent;
41
+ color: var(--text-muted);
42
+ font-size: 0.75rem;
43
+ font-weight: 600;
44
+ cursor: pointer;
45
+ line-height: 1.25;
46
+ transition: border-color 0.15s ease, color 0.15s ease;
47
+ }
48
+
49
+ .mint-auto-group__workflow-tab:hover {
50
+ color: var(--text-primary);
51
+ }
52
+
53
+ .mint-auto-group__workflow-tab:focus-visible {
54
+ outline: none;
55
+ box-shadow: 0 0 0 2px var(--color-primary-soft);
56
+ }
57
+
58
+ .mint-auto-group__workflow-tab--active {
59
+ border-bottom-color: var(--color-primary);
60
+ color: var(--color-primary);
61
+ }
62
+
63
+ .mint-auto-group__manual-mode {
64
+ display: flex;
65
+ flex-direction: column;
66
+ gap: 0.625rem;
67
+ min-height: 0;
68
+ min-width: 0;
69
+ }
70
+
71
+ .mint-auto-group__manual-summary {
72
+ display: flex;
73
+ align-items: center;
74
+ justify-content: space-between;
75
+ flex: 1;
76
+ gap: 0.75rem;
77
+ min-width: 0;
78
+ padding-bottom: 0.25rem;
79
+ }
80
+
81
+ .mint-auto-group__manual-summary-text {
82
+ display: flex;
83
+ flex-direction: column;
84
+ gap: 0.125rem;
85
+ min-width: 0;
86
+ }
87
+
88
+ .mint-auto-group__manual-summary-text strong {
89
+ color: var(--text-primary);
90
+ font-size: 0.8125rem;
91
+ font-weight: 600;
92
+ line-height: 1.25;
93
+ }
94
+
95
+ .mint-auto-group__manual-eyebrow {
96
+ color: var(--text-muted);
97
+ font-size: 0.625rem;
98
+ font-weight: 700;
99
+ letter-spacing: 0.05em;
100
+ line-height: 1.2;
101
+ text-transform: uppercase;
102
+ }
103
+
104
+ .mint-auto-group__manual-stats {
105
+ display: flex;
106
+ align-items: center;
107
+ gap: 0.375rem;
108
+ flex-wrap: wrap;
109
+ justify-content: flex-end;
110
+ color: var(--text-secondary);
111
+ font-size: 0.6875rem;
112
+ }
113
+
114
+ .mint-auto-group__manual-stats span {
115
+ display: inline-flex;
116
+ align-items: center;
117
+ gap: 0.25rem;
118
+ min-height: 1.375rem;
119
+ padding: 0.0625rem 0.4375rem;
120
+ border: 1px solid var(--border-light);
121
+ border-radius: 9999px;
122
+ background: var(--bg-secondary);
123
+ font-variant-numeric: tabular-nums;
124
+ white-space: nowrap;
125
+ }
126
+
127
+ .mint-auto-group__manual-stats strong {
128
+ color: var(--text-primary);
129
+ font-family: 'Fira Code', monospace;
130
+ font-size: 0.6875rem;
131
+ }
132
+
133
+ .mint-auto-group__manual-grid {
134
+ display: grid;
135
+ grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
136
+ gap: 0.625rem;
137
+ min-height: 31rem;
138
+ min-width: 0;
139
+ }
140
+
141
+ .mint-auto-group__manual-panel {
142
+ min-width: 0;
143
+ min-height: 0;
144
+ display: flex;
145
+ flex-direction: column;
146
+ gap: 0.5rem;
147
+ padding: 0.625rem;
148
+ border: 1px solid var(--border);
149
+ border-radius: var(--radius);
150
+ background: var(--bg-primary);
151
+ box-shadow: inset 0 1px 0 var(--bg-secondary);
152
+ }
153
+
154
+ .mint-auto-group__manual-panel-head {
155
+ display: flex;
156
+ align-items: center;
157
+ justify-content: space-between;
158
+ gap: 0.625rem;
159
+ }
160
+
161
+ .mint-auto-group__manual-panel-head > div:first-child {
162
+ display: flex;
163
+ align-items: center;
164
+ gap: 0.4375rem;
165
+ min-width: 0;
166
+ }
167
+
168
+ .mint-auto-group__manual-panel-head h3 {
169
+ margin: 0;
170
+ color: var(--text-primary);
171
+ font-size: 0.78125rem;
172
+ font-weight: 600;
173
+ line-height: 1.35;
174
+ }
175
+
176
+ .mint-auto-group__manual-step {
177
+ display: inline-grid;
178
+ place-items: center;
179
+ width: 1.25rem;
180
+ height: 1.25rem;
181
+ border-radius: 9999px;
182
+ background: var(--color-primary-soft);
183
+ color: var(--color-primary);
184
+ font-family: 'Fira Code', monospace;
185
+ font-size: 0.6875rem;
186
+ font-weight: 700;
187
+ flex-shrink: 0;
188
+ }
189
+
190
+ .mint-auto-group__manual-panel-meta {
191
+ display: flex;
192
+ align-items: center;
193
+ gap: 0.5rem;
194
+ color: var(--text-muted);
195
+ font-size: 0.75rem;
196
+ white-space: nowrap;
197
+ }
198
+
199
+ .mint-auto-group__manual-filter {
200
+ display: inline-flex;
201
+ align-items: center;
202
+ gap: 0.375rem;
203
+ cursor: pointer;
204
+ }
205
+
206
+ .mint-auto-group__manual-checkbox {
207
+ width: 0.875rem;
208
+ height: 0.875rem;
209
+ flex-shrink: 0;
210
+ accent-color: var(--color-primary);
211
+ cursor: pointer;
212
+ }
213
+
214
+ .mint-auto-group__manual-search {
215
+ position: relative;
216
+ display: flex;
217
+ align-items: center;
218
+ }
219
+
220
+ .mint-auto-group__manual-search-icon {
221
+ position: absolute;
222
+ left: 0.6875rem;
223
+ width: 0.875rem;
224
+ height: 0.875rem;
225
+ color: var(--text-muted);
226
+ pointer-events: none;
227
+ }
228
+
229
+ .mint-auto-group__manual-search-input {
230
+ width: 100%;
231
+ min-height: 2rem;
232
+ padding: 0.375rem 0.625rem 0.375rem 2rem;
233
+ border: 1px solid var(--border);
234
+ border-radius: var(--radius-sm);
235
+ background: var(--bg-secondary);
236
+ color: var(--text-primary);
237
+ font-size: 0.8125rem;
238
+ box-sizing: border-box;
239
+ transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
240
+ }
241
+
242
+ .mint-auto-group__manual-search-input::placeholder {
243
+ color: var(--text-muted);
244
+ }
245
+
246
+ .mint-auto-group__manual-search-input:focus-visible {
247
+ outline: none;
248
+ border-color: var(--color-primary);
249
+ box-shadow: 0 0 0 2px var(--color-primary-soft);
250
+ }
251
+
252
+ .mint-auto-group__manual-selectbar {
253
+ display: grid;
254
+ grid-template-columns: auto minmax(0, 1fr) auto;
255
+ align-items: center;
256
+ gap: 0.5rem;
257
+ min-height: 1.875rem;
258
+ padding: 0.25rem 0.5rem;
259
+ border: 1px solid var(--border-light);
260
+ border-radius: var(--radius-sm);
261
+ background: var(--bg-secondary);
262
+ color: var(--text-secondary);
263
+ cursor: pointer;
264
+ font-size: 0.75rem;
265
+ transition: border-color 0.15s ease, background-color 0.15s ease;
266
+ }
267
+
268
+ .mint-auto-group__manual-selectbar:hover {
269
+ border-color: var(--border-color);
270
+ background: var(--bg-primary);
271
+ }
272
+
273
+ .mint-auto-group__manual-selectbar-count {
274
+ color: var(--text-muted);
275
+ font-variant-numeric: tabular-nums;
276
+ white-space: nowrap;
277
+ }
278
+
279
+ .mint-auto-group__manual-list,
280
+ .mint-auto-group__manual-cohorts {
281
+ scrollbar-width: thin;
282
+ scrollbar-color: var(--scrollbar-thumb) transparent;
283
+ }
284
+
285
+ .mint-auto-group__manual-list::-webkit-scrollbar,
286
+ .mint-auto-group__manual-cohorts::-webkit-scrollbar {
287
+ width: 6px;
288
+ }
289
+
290
+ .mint-auto-group__manual-list::-webkit-scrollbar-track,
291
+ .mint-auto-group__manual-cohorts::-webkit-scrollbar-track {
292
+ background: transparent;
293
+ }
294
+
295
+ .mint-auto-group__manual-list::-webkit-scrollbar-thumb,
296
+ .mint-auto-group__manual-cohorts::-webkit-scrollbar-thumb {
297
+ background: var(--scrollbar-thumb);
298
+ border-radius: 3px;
299
+ }
300
+
301
+ .mint-auto-group__manual-list::-webkit-scrollbar-thumb:hover,
302
+ .mint-auto-group__manual-cohorts::-webkit-scrollbar-thumb:hover {
303
+ background: var(--scrollbar-hover);
304
+ }
305
+
306
+ .mint-auto-group__manual-list {
307
+ flex: 1;
308
+ min-height: 0;
309
+ overflow-y: auto;
310
+ display: flex;
311
+ flex-direction: column;
312
+ gap: 0.25rem;
313
+ padding-right: 0.25rem;
314
+ }
315
+
316
+ .mint-auto-group__manual-sample {
317
+ position: relative;
318
+ display: grid;
319
+ grid-template-columns: auto minmax(0, 1fr) auto;
320
+ align-items: center;
321
+ gap: 0.5rem;
322
+ min-height: 2rem;
323
+ padding: 0.25rem 0.5rem;
324
+ border: 1px solid var(--border-light);
325
+ border-radius: var(--radius-sm);
326
+ background: var(--bg-secondary);
327
+ cursor: pointer;
328
+ box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
329
+ transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
330
+ }
331
+
332
+ .mint-auto-group__manual-sample:hover,
333
+ .mint-auto-group__manual-sample--selected {
334
+ border-color: var(--color-primary);
335
+ background: var(--color-primary-soft);
336
+ }
337
+
338
+ .mint-auto-group__manual-sample--selected {
339
+ box-shadow: inset 2px 0 0 var(--color-primary), 0 1px 0 rgba(15, 23, 42, 0.02);
340
+ }
341
+
342
+ .mint-auto-group__manual-sample-name {
343
+ min-width: 0;
344
+ overflow: hidden;
345
+ color: var(--text-primary);
346
+ font-family: 'Fira Code', monospace;
347
+ font-size: 0.75rem;
348
+ line-height: 1.4;
349
+ text-overflow: ellipsis;
350
+ white-space: nowrap;
351
+ }
352
+
353
+ .mint-auto-group__manual-status {
354
+ display: inline-flex;
355
+ align-items: center;
356
+ gap: 0.375rem;
357
+ max-width: 9rem;
358
+ min-width: 0;
359
+ overflow: hidden;
360
+ padding: 0.125rem 0.5rem;
361
+ border: 1px solid var(--border-light);
362
+ border-radius: 9999px;
363
+ background: var(--bg-primary);
364
+ color: var(--text-secondary);
365
+ font-size: 0.6875rem;
366
+ line-height: 1.4;
367
+ text-overflow: ellipsis;
368
+ white-space: nowrap;
369
+ }
370
+
371
+ .mint-auto-group__manual-status--empty {
372
+ border-color: transparent;
373
+ background: var(--bg-tertiary);
374
+ color: var(--text-muted);
375
+ }
376
+
377
+ .mint-auto-group__manual-dot,
378
+ .mint-auto-group__manual-chip-dot {
379
+ width: 0.5rem;
380
+ height: 0.5rem;
381
+ flex-shrink: 0;
382
+ border-radius: 9999px;
383
+ background: var(--text-muted);
384
+ }
385
+
386
+ .mint-auto-group__manual-tooltip {
387
+ position: absolute;
388
+ left: 2rem;
389
+ bottom: calc(100% + 0.375rem);
390
+ z-index: 30;
391
+ display: none;
392
+ max-width: min(34rem, calc(100vw - 3rem));
393
+ padding: 0.375rem 0.5rem;
394
+ border: 1px solid var(--border-color);
395
+ border-radius: var(--radius-sm);
396
+ background: var(--bg-primary);
397
+ box-shadow: var(--shadow-md);
398
+ color: var(--text-primary);
399
+ font-family: 'Fira Code', monospace;
400
+ font-size: 0.6875rem;
401
+ line-height: 1.4;
402
+ overflow-wrap: anywhere;
403
+ pointer-events: none;
404
+ }
405
+
406
+ .mint-auto-group__manual-sample:hover .mint-auto-group__manual-tooltip,
407
+ .mint-auto-group__manual-sample:focus-within .mint-auto-group__manual-tooltip {
408
+ display: block;
409
+ }
410
+
411
+ .mint-auto-group__manual-empty {
412
+ display: grid;
413
+ place-items: center;
414
+ min-height: 4rem;
415
+ border: 1px dashed var(--border);
416
+ border-radius: var(--radius-sm);
417
+ color: var(--text-muted);
418
+ font-size: 0.75rem;
419
+ }
420
+
421
+ .mint-auto-group__manual-selection-footer {
422
+ display: flex;
423
+ align-items: center;
424
+ justify-content: space-between;
425
+ gap: 0.5rem;
426
+ padding-top: 0.5rem;
427
+ border-top: 1px solid var(--border);
428
+ color: var(--text-secondary);
429
+ font-size: 0.75rem;
430
+ }
431
+
432
+ .mint-auto-group__manual-link {
433
+ border: 0;
434
+ background: transparent;
435
+ color: var(--color-primary);
436
+ cursor: pointer;
437
+ font-size: 0.75rem;
438
+ padding: 0;
439
+ }
440
+
441
+ .mint-auto-group__manual-link:disabled {
442
+ color: var(--text-muted);
443
+ cursor: not-allowed;
444
+ }
445
+
446
+ .mint-auto-group__manual-assignment {
447
+ display: flex;
448
+ flex-direction: column;
449
+ gap: 0.5rem;
450
+ padding: 0.625rem;
451
+ border: 1px solid var(--border);
452
+ border-radius: var(--radius-sm);
453
+ background: var(--bg-secondary);
454
+ box-shadow: inset 0 1px 0 var(--bg-primary);
455
+ }
456
+
457
+ .mint-auto-group__manual-assignment--empty {
458
+ background: var(--bg-tertiary);
459
+ }
460
+
461
+ .mint-auto-group__manual-selected-summary {
462
+ display: flex;
463
+ align-items: center;
464
+ gap: 0.5rem;
465
+ color: var(--text-secondary);
466
+ font-size: 0.75rem;
467
+ }
468
+
469
+ .mint-auto-group__manual-fields {
470
+ display: grid;
471
+ grid-template-columns: 1fr 1fr;
472
+ gap: 0.5rem;
473
+ }
474
+
475
+ .mint-auto-group__manual-field {
476
+ display: flex;
477
+ flex-direction: column;
478
+ gap: 0.25rem;
479
+ min-width: 0;
480
+ }
481
+
482
+ .mint-auto-group__manual-field > span {
483
+ color: var(--text-muted);
484
+ font-size: 0.6875rem;
485
+ font-weight: 700;
486
+ letter-spacing: 0.05em;
487
+ line-height: 1.2;
488
+ text-transform: uppercase;
489
+ }
490
+
491
+ .mint-auto-group__manual-field small {
492
+ color: var(--text-muted);
493
+ font-size: 0.6875rem;
494
+ font-weight: 500;
495
+ letter-spacing: 0;
496
+ text-transform: none;
497
+ }
498
+
499
+ .mint-auto-group__manual-combo {
500
+ position: relative;
501
+ display: flex;
502
+ align-items: center;
503
+ }
504
+
505
+ .mint-auto-group__manual-combo .mint-input {
506
+ width: 100%;
507
+ padding-right: 2rem;
508
+ border-color: var(--border-color);
509
+ }
510
+
511
+ .mint-auto-group__manual-combo > .mint-auto-group__manual-dot + .mint-input {
512
+ padding-left: 1.75rem;
513
+ }
514
+
515
+ .mint-auto-group__manual-combo > .mint-auto-group__manual-dot {
516
+ position: absolute;
517
+ left: 0.625rem;
518
+ z-index: 1;
519
+ }
520
+
521
+ .mint-auto-group__manual-combo-icon {
522
+ position: absolute;
523
+ right: 0.625rem;
524
+ width: 0.875rem;
525
+ height: 0.875rem;
526
+ color: var(--text-muted);
527
+ pointer-events: none;
528
+ }
529
+
530
+ .mint-auto-group__manual-swatches {
531
+ display: flex;
532
+ gap: 0.3125rem;
533
+ flex-wrap: wrap;
534
+ }
535
+
536
+ .mint-auto-group__manual-swatch {
537
+ width: 1.125rem;
538
+ height: 1.125rem;
539
+ padding: 0;
540
+ border: 2px solid var(--bg-primary);
541
+ border-radius: 9999px;
542
+ box-shadow: 0 0 0 1px var(--border);
543
+ cursor: pointer;
544
+ }
545
+
546
+ .mint-auto-group__manual-swatch:hover,
547
+ .mint-auto-group__manual-swatch:focus-visible {
548
+ outline: none;
549
+ box-shadow: 0 0 0 2px var(--color-primary-soft);
550
+ }
551
+
552
+ .mint-auto-group__manual-swatch--active {
553
+ box-shadow: 0 0 0 2px var(--color-primary);
554
+ }
555
+
556
+ .mint-auto-group__manual-target {
557
+ display: flex;
558
+ align-items: center;
559
+ justify-content: space-between;
560
+ gap: 0.75rem;
561
+ min-width: 0;
562
+ padding: 0.375rem 0.5rem;
563
+ border: 1px dashed var(--border-color);
564
+ border-radius: var(--radius-sm);
565
+ color: var(--text-muted);
566
+ font-size: 0.75rem;
567
+ }
568
+
569
+ .mint-auto-group__manual-target code {
570
+ min-width: 0;
571
+ overflow: hidden;
572
+ color: var(--text-primary);
573
+ font-family: 'Fira Code', monospace;
574
+ font-size: 0.75rem;
575
+ text-overflow: ellipsis;
576
+ white-space: nowrap;
577
+ }
578
+
579
+ .mint-auto-group__manual-assign {
580
+ display: inline-flex;
581
+ align-items: center;
582
+ justify-content: center;
583
+ gap: 0.5rem;
584
+ width: 100%;
585
+ }
586
+
587
+ .mint-auto-group__manual-btn-icon {
588
+ width: 1rem;
589
+ height: 1rem;
590
+ flex-shrink: 0;
591
+ }
592
+
593
+ .mint-auto-group__manual-cohorts {
594
+ flex: 1;
595
+ min-height: 0;
596
+ overflow-y: auto;
597
+ display: flex;
598
+ flex-direction: column;
599
+ gap: 0.25rem;
600
+ padding-right: 0.25rem;
601
+ }
602
+
603
+ .mint-auto-group__manual-cohorts-head {
604
+ position: sticky;
605
+ top: 0;
606
+ z-index: 1;
607
+ display: flex;
608
+ align-items: center;
609
+ justify-content: space-between;
610
+ gap: 0.5rem;
611
+ padding: 0.125rem 0 0.25rem;
612
+ background: var(--bg-primary);
613
+ color: var(--text-muted);
614
+ font-size: 0.6875rem;
615
+ font-weight: 700;
616
+ letter-spacing: 0.05em;
617
+ text-transform: uppercase;
618
+ }
619
+
620
+ .mint-auto-group__manual-chip {
621
+ display: grid;
622
+ grid-template-columns: auto minmax(0, 1fr) auto;
623
+ align-items: center;
624
+ gap: 0.5rem;
625
+ min-height: 1.875rem;
626
+ width: 100%;
627
+ padding: 0.25rem 0.5rem;
628
+ border: 1px solid var(--border-light);
629
+ border-radius: var(--radius-sm);
630
+ background: var(--bg-secondary);
631
+ color: var(--text-primary);
632
+ cursor: pointer;
633
+ font-size: 0.75rem;
634
+ text-align: left;
635
+ transition: border-color 0.15s ease, background-color 0.15s ease;
636
+ }
637
+
638
+ .mint-auto-group__manual-chip:hover {
639
+ border-color: var(--color-primary);
640
+ background: var(--bg-primary);
641
+ }
642
+
643
+ .mint-auto-group__manual-chip--major {
644
+ background: var(--bg-primary);
645
+ font-weight: 600;
646
+ }
647
+
648
+ .mint-auto-group__manual-chip--sub {
649
+ grid-template-columns: minmax(0, 1fr) auto;
650
+ margin-left: 1rem;
651
+ width: calc(100% - 1rem);
652
+ color: var(--text-secondary);
653
+ }
654
+
655
+ .mint-auto-group__manual-chip-main,
656
+ .mint-auto-group__manual-chip-sub {
657
+ min-width: 0;
658
+ overflow: hidden;
659
+ text-overflow: ellipsis;
660
+ white-space: nowrap;
661
+ }
662
+
663
+ .mint-auto-group__manual-chip-sub {
664
+ padding-left: 0.5rem;
665
+ }
666
+
667
+ .mint-auto-group__manual-chip-count {
668
+ display: inline-grid;
669
+ place-items: center;
670
+ min-width: 1.5rem;
671
+ min-height: 1.25rem;
672
+ padding: 0 0.375rem;
673
+ border: 1px solid var(--border-light);
674
+ border-radius: 9999px;
675
+ background: var(--bg-primary);
676
+ color: var(--text-secondary);
677
+ font-family: 'Fira Code', monospace;
678
+ font-size: 0.6875rem;
679
+ font-variant-numeric: tabular-nums;
8
680
  }
9
681
 
10
682
  /* --- Mode toggle --- */
@@ -289,6 +961,10 @@
289
961
  gap: 0.5rem;
290
962
  }
291
963
 
964
+ .mint-auto-group__nav--manual {
965
+ width: 100%;
966
+ }
967
+
292
968
  .mint-auto-group__nav-spacer {
293
969
  flex: 1;
294
970
  }
@@ -580,3 +1256,71 @@
580
1256
  .mint-auto-group__fingerprint { margin-top: 14px; }
581
1257
  .mint-auto-group__fingerprint summary { cursor: pointer; font-size: 12px; color: var(--text-muted); }
582
1258
  .mint-auto-group__fingerprint pre { font-family: 'Fira Code', monospace; font-size: 11px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; overflow-x: auto; }
1259
+
1260
+ @media (max-width: 760px) {
1261
+ .mint-auto-group__workflow-bar--manual {
1262
+ align-items: stretch;
1263
+ flex-direction: column;
1264
+ gap: 0.5rem;
1265
+ }
1266
+
1267
+ .mint-auto-group__manual-summary,
1268
+ .mint-auto-group__manual-panel-head,
1269
+ .mint-auto-group__manual-panel-meta {
1270
+ align-items: flex-start;
1271
+ flex-direction: column;
1272
+ }
1273
+
1274
+ .mint-auto-group__manual-stats {
1275
+ justify-content: flex-start;
1276
+ }
1277
+
1278
+ .mint-auto-group__manual-grid,
1279
+ .mint-auto-group__manual-fields,
1280
+ .mint-auto-group__preview-grid,
1281
+ .mint-auto-group__workspace {
1282
+ grid-template-columns: 1fr;
1283
+ }
1284
+
1285
+ .mint-auto-group__manual-grid {
1286
+ min-height: 0;
1287
+ }
1288
+
1289
+ .mint-auto-group__manual-list,
1290
+ .mint-auto-group__manual-cohorts {
1291
+ max-height: 18rem;
1292
+ }
1293
+
1294
+ .mint-auto-group__manual-sample {
1295
+ grid-template-columns: auto minmax(0, 1fr);
1296
+ }
1297
+
1298
+ .mint-auto-group__manual-status {
1299
+ grid-column: 2;
1300
+ justify-self: start;
1301
+ max-width: 100%;
1302
+ }
1303
+
1304
+ .mint-auto-group__nav--manual {
1305
+ display: grid;
1306
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
1307
+ gap: 0.5rem;
1308
+ }
1309
+
1310
+ .mint-auto-group__nav--manual .mint-auto-group__nav-spacer {
1311
+ display: none;
1312
+ }
1313
+
1314
+ .mint-auto-group__nav--manual .mint-button {
1315
+ width: 100%;
1316
+ justify-content: center;
1317
+ }
1318
+ }
1319
+
1320
+ @media (prefers-reduced-motion: reduce) {
1321
+ .mint-auto-group__workflow-tab,
1322
+ .mint-auto-group__manual-sample,
1323
+ .mint-auto-group__token-row {
1324
+ transition: none;
1325
+ }
1326
+ }