@morscherlab/mint-sdk 1.0.15 → 1.0.17

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