@pipelex/mthds-ui 0.6.3 → 0.6.5
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.
- package/dist/{chunk-FHRUYFGV.js → chunk-ILX53OYM.js} +374 -98
- package/dist/chunk-ILX53OYM.js.map +1 -0
- package/dist/chunk-L24K3TZU.js +1 -0
- package/dist/graph/index.d.ts +62 -7
- package/dist/graph/index.js +20 -4
- package/dist/graph/react/detail/DetailPanel.css +82 -79
- package/dist/graph/react/graph-core.css +153 -76
- package/dist/graph/react/index.css +129 -160
- package/dist/graph/react/index.css.map +1 -1
- package/dist/graph/react/index.d.ts +23 -2
- package/dist/graph/react/index.js +266 -160
- package/dist/graph/react/index.js.map +1 -1
- package/dist/graph/react/stuff/StuffViewer.css +38 -11
- package/dist/graph/react/viewer/GraphToolbar.css +22 -24
- package/dist/index.d.ts +2 -2
- package/dist/index.js +20 -4
- package/dist/standalone/graph-standalone.html +304 -199
- package/dist/standalone/graph-viewer.css +295 -190
- package/dist/standalone/graph-viewer.js +9 -9
- package/dist/{types-C7rr1Egj.d.ts → types-DJTrDxjV.d.ts} +29 -10
- package/package.json +3 -1
- package/dist/chunk-FHRUYFGV.js.map +0 -1
- package/dist/chunk-IZ4FH2WM.js +0 -1
- /package/dist/{chunk-IZ4FH2WM.js.map → chunk-L24K3TZU.js.map} +0 -0
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
/* ─── Detail Panel — sliding side panel for node inspection ─────────────── */
|
|
2
|
+
/* Token-only — all colors come from the active theme palette on the */
|
|
3
|
+
/* container. See `graphConfig.ts` for token definitions. */
|
|
2
4
|
|
|
3
5
|
.detail-panel {
|
|
4
6
|
position: absolute;
|
|
@@ -6,13 +8,13 @@
|
|
|
6
8
|
right: 0;
|
|
7
9
|
width: 380px;
|
|
8
10
|
height: 100%;
|
|
9
|
-
background:
|
|
10
|
-
border-left: 1px solid
|
|
11
|
+
background: var(--surface-panel);
|
|
12
|
+
border-left: 1px solid var(--border-default);
|
|
11
13
|
z-index: 10;
|
|
12
14
|
display: flex;
|
|
13
15
|
flex-direction: column;
|
|
14
|
-
font-family:
|
|
15
|
-
color:
|
|
16
|
+
font-family: var(--font-sans);
|
|
17
|
+
color: var(--text-default);
|
|
16
18
|
overflow: hidden;
|
|
17
19
|
transition: transform 0.2s ease;
|
|
18
20
|
}
|
|
@@ -49,7 +51,8 @@
|
|
|
49
51
|
|
|
50
52
|
.detail-panel-resize-handle:hover::before,
|
|
51
53
|
.detail-panel--dragging .detail-panel-resize-handle::before {
|
|
52
|
-
background:
|
|
54
|
+
background: var(--color-accent);
|
|
55
|
+
opacity: 0.6;
|
|
53
56
|
}
|
|
54
57
|
|
|
55
58
|
/* Grip indicator — visible on hover */
|
|
@@ -68,7 +71,7 @@
|
|
|
68
71
|
|
|
69
72
|
.detail-panel-resize-handle:hover::after,
|
|
70
73
|
.detail-panel--dragging .detail-panel-resize-handle::after {
|
|
71
|
-
background:
|
|
74
|
+
background: var(--color-accent);
|
|
72
75
|
}
|
|
73
76
|
|
|
74
77
|
/* Disable transition during drag for smooth resizing */
|
|
@@ -92,15 +95,15 @@
|
|
|
92
95
|
align-items: center;
|
|
93
96
|
justify-content: center;
|
|
94
97
|
border-radius: 4px;
|
|
95
|
-
color:
|
|
98
|
+
color: var(--text-dim);
|
|
96
99
|
font-size: 18px;
|
|
97
100
|
line-height: 1;
|
|
98
101
|
z-index: 3;
|
|
99
102
|
}
|
|
100
103
|
|
|
101
104
|
.detail-panel-close:hover {
|
|
102
|
-
color:
|
|
103
|
-
background:
|
|
105
|
+
color: var(--text-muted);
|
|
106
|
+
background: var(--surface-elevated);
|
|
104
107
|
}
|
|
105
108
|
|
|
106
109
|
.detail-panel-content {
|
|
@@ -118,7 +121,7 @@
|
|
|
118
121
|
position: sticky;
|
|
119
122
|
top: -20px;
|
|
120
123
|
z-index: 1;
|
|
121
|
-
background:
|
|
124
|
+
background: var(--surface-panel);
|
|
122
125
|
padding-top: 20px;
|
|
123
126
|
margin-top: -20px;
|
|
124
127
|
display: flex;
|
|
@@ -133,7 +136,7 @@
|
|
|
133
136
|
font-weight: 700;
|
|
134
137
|
text-transform: uppercase;
|
|
135
138
|
letter-spacing: 0.06em;
|
|
136
|
-
color:
|
|
139
|
+
color: var(--text-dim);
|
|
137
140
|
margin-bottom: 6px;
|
|
138
141
|
}
|
|
139
142
|
|
|
@@ -154,24 +157,24 @@
|
|
|
154
157
|
}
|
|
155
158
|
|
|
156
159
|
.detail-badge--operator {
|
|
157
|
-
background:
|
|
158
|
-
color:
|
|
160
|
+
background: var(--color-pipe);
|
|
161
|
+
color: var(--text-on-accent);
|
|
159
162
|
}
|
|
160
163
|
|
|
161
164
|
.detail-badge--controller {
|
|
162
|
-
background:
|
|
163
|
-
color:
|
|
165
|
+
background: var(--color-batch-item);
|
|
166
|
+
color: var(--text-on-accent);
|
|
164
167
|
}
|
|
165
168
|
|
|
166
169
|
.detail-pipe-code {
|
|
167
|
-
font-family:
|
|
170
|
+
font-family: var(--font-mono);
|
|
168
171
|
font-size: 14px;
|
|
169
172
|
font-weight: 600;
|
|
170
|
-
color:
|
|
173
|
+
color: var(--color-pipe);
|
|
171
174
|
}
|
|
172
175
|
|
|
173
176
|
.detail-pipe-code--controller {
|
|
174
|
-
color:
|
|
177
|
+
color: var(--color-batch-item);
|
|
175
178
|
}
|
|
176
179
|
|
|
177
180
|
.detail-status {
|
|
@@ -195,13 +198,13 @@
|
|
|
195
198
|
|
|
196
199
|
.detail-duration {
|
|
197
200
|
font-size: 11px;
|
|
198
|
-
color:
|
|
199
|
-
font-family:
|
|
201
|
+
color: var(--text-dim);
|
|
202
|
+
font-family: var(--font-mono);
|
|
200
203
|
}
|
|
201
204
|
|
|
202
205
|
.detail-description {
|
|
203
206
|
font-size: 12px;
|
|
204
|
-
color:
|
|
207
|
+
color: var(--text-muted);
|
|
205
208
|
line-height: 1.5;
|
|
206
209
|
}
|
|
207
210
|
|
|
@@ -214,17 +217,17 @@
|
|
|
214
217
|
font-size: 11px;
|
|
215
218
|
padding: 3px 8px;
|
|
216
219
|
border-radius: 4px;
|
|
217
|
-
background:
|
|
218
|
-
border: 1px solid
|
|
220
|
+
background: var(--surface-sunken);
|
|
221
|
+
border: 1px solid var(--border-subtle);
|
|
219
222
|
}
|
|
220
223
|
|
|
221
224
|
.detail-io-name {
|
|
222
|
-
font-family:
|
|
223
|
-
color:
|
|
225
|
+
font-family: var(--font-mono);
|
|
226
|
+
color: var(--text-default);
|
|
224
227
|
}
|
|
225
228
|
|
|
226
229
|
.detail-io-concept {
|
|
227
|
-
color:
|
|
230
|
+
color: var(--text-dim);
|
|
228
231
|
font-size: 10px;
|
|
229
232
|
}
|
|
230
233
|
|
|
@@ -237,11 +240,11 @@
|
|
|
237
240
|
/* ─── Blueprint-specific sections ───────────────────────────────────────── */
|
|
238
241
|
|
|
239
242
|
.detail-prompt-block {
|
|
240
|
-
font-family:
|
|
243
|
+
font-family: var(--font-mono);
|
|
241
244
|
font-size: 11px;
|
|
242
|
-
color:
|
|
243
|
-
background:
|
|
244
|
-
border: 1px solid
|
|
245
|
+
color: var(--text-muted);
|
|
246
|
+
background: var(--surface-sunken);
|
|
247
|
+
border: 1px solid var(--border-subtle);
|
|
245
248
|
border-radius: 6px;
|
|
246
249
|
padding: 10px 12px;
|
|
247
250
|
white-space: pre-wrap;
|
|
@@ -266,16 +269,16 @@
|
|
|
266
269
|
align-items: center;
|
|
267
270
|
gap: 4px;
|
|
268
271
|
font-size: 9px;
|
|
269
|
-
color:
|
|
272
|
+
color: var(--text-dim);
|
|
270
273
|
padding: 2px 6px;
|
|
271
274
|
border-radius: 3px;
|
|
272
|
-
background:
|
|
273
|
-
border: 1px solid
|
|
275
|
+
background: var(--surface-sunken);
|
|
276
|
+
border: 1px solid var(--border-subtle);
|
|
274
277
|
transition: color 0.15s;
|
|
275
278
|
}
|
|
276
279
|
|
|
277
280
|
.detail-prompt-expand-btn:hover {
|
|
278
|
-
color:
|
|
281
|
+
color: var(--text-muted);
|
|
279
282
|
}
|
|
280
283
|
|
|
281
284
|
.detail-kv-row {
|
|
@@ -288,13 +291,13 @@
|
|
|
288
291
|
}
|
|
289
292
|
|
|
290
293
|
.detail-kv-key {
|
|
291
|
-
color:
|
|
294
|
+
color: var(--text-dim);
|
|
292
295
|
flex-shrink: 0; /* label stays at its natural width */
|
|
293
296
|
}
|
|
294
297
|
|
|
295
298
|
.detail-kv-value {
|
|
296
|
-
font-family:
|
|
297
|
-
color:
|
|
299
|
+
font-family: var(--font-mono);
|
|
300
|
+
color: var(--text-default);
|
|
298
301
|
flex: 1 1 0;
|
|
299
302
|
min-width: 0;
|
|
300
303
|
text-align: right;
|
|
@@ -311,17 +314,17 @@
|
|
|
311
314
|
}
|
|
312
315
|
|
|
313
316
|
.detail-field-block-label {
|
|
314
|
-
font-family:
|
|
317
|
+
font-family: var(--font-mono);
|
|
315
318
|
font-size: 10px;
|
|
316
|
-
color:
|
|
319
|
+
color: var(--text-dim);
|
|
317
320
|
}
|
|
318
321
|
|
|
319
322
|
.detail-field-block-value {
|
|
320
|
-
font-family:
|
|
323
|
+
font-family: var(--font-mono);
|
|
321
324
|
font-size: 11px;
|
|
322
|
-
color:
|
|
323
|
-
background:
|
|
324
|
-
border: 1px solid
|
|
325
|
+
color: var(--text-default);
|
|
326
|
+
background: var(--surface-sunken);
|
|
327
|
+
border: 1px solid var(--border-subtle);
|
|
325
328
|
border-radius: 6px;
|
|
326
329
|
padding: 8px 10px;
|
|
327
330
|
white-space: pre-wrap;
|
|
@@ -345,20 +348,20 @@
|
|
|
345
348
|
margin-top: 6px;
|
|
346
349
|
margin-bottom: 4px;
|
|
347
350
|
padding: 4px 0 4px 8px;
|
|
348
|
-
border-left: 2px solid
|
|
351
|
+
border-left: 2px solid var(--color-success);
|
|
349
352
|
}
|
|
350
353
|
|
|
351
354
|
.detail-nested-header-name {
|
|
352
|
-
font-family:
|
|
355
|
+
font-family: var(--font-mono);
|
|
353
356
|
font-size: 11px;
|
|
354
357
|
font-weight: 600;
|
|
355
|
-
color:
|
|
358
|
+
color: var(--text-default);
|
|
356
359
|
}
|
|
357
360
|
|
|
358
361
|
.detail-nested-header-meta {
|
|
359
|
-
font-family:
|
|
362
|
+
font-family: var(--font-mono);
|
|
360
363
|
font-size: 9px;
|
|
361
|
-
color:
|
|
364
|
+
color: var(--text-dim);
|
|
362
365
|
text-transform: uppercase;
|
|
363
366
|
letter-spacing: 0.04em;
|
|
364
367
|
}
|
|
@@ -374,39 +377,39 @@
|
|
|
374
377
|
.detail-schema-table th {
|
|
375
378
|
text-align: left;
|
|
376
379
|
font-weight: 700;
|
|
377
|
-
color:
|
|
380
|
+
color: var(--text-dim);
|
|
378
381
|
font-size: 9px;
|
|
379
382
|
text-transform: uppercase;
|
|
380
383
|
letter-spacing: 0.06em;
|
|
381
384
|
padding: 4px 6px;
|
|
382
|
-
border-bottom: 1px solid
|
|
385
|
+
border-bottom: 1px solid var(--border-default);
|
|
383
386
|
}
|
|
384
387
|
|
|
385
388
|
.detail-schema-table td {
|
|
386
389
|
padding: 4px 6px;
|
|
387
|
-
border-bottom: 1px solid
|
|
388
|
-
color:
|
|
390
|
+
border-bottom: 1px solid var(--border-subtle);
|
|
391
|
+
color: var(--text-muted);
|
|
389
392
|
}
|
|
390
393
|
|
|
391
394
|
.detail-schema-field {
|
|
392
|
-
font-family:
|
|
393
|
-
color:
|
|
395
|
+
font-family: var(--font-mono);
|
|
396
|
+
color: var(--text-default);
|
|
394
397
|
}
|
|
395
398
|
|
|
396
399
|
.detail-schema-type {
|
|
397
|
-
color:
|
|
400
|
+
color: var(--color-accent);
|
|
398
401
|
}
|
|
399
402
|
|
|
400
403
|
.detail-schema-required {
|
|
401
|
-
color:
|
|
404
|
+
color: var(--color-pipe);
|
|
402
405
|
font-size: 9px;
|
|
403
406
|
}
|
|
404
407
|
|
|
405
408
|
/* ─── Error section ─────────────────────────────────────────────────────── */
|
|
406
409
|
|
|
407
410
|
.detail-error {
|
|
408
|
-
background:
|
|
409
|
-
border: 1px solid
|
|
411
|
+
background: var(--color-error-bg);
|
|
412
|
+
border: 1px solid var(--color-error-border);
|
|
410
413
|
border-radius: 6px;
|
|
411
414
|
padding: 10px 12px;
|
|
412
415
|
}
|
|
@@ -414,20 +417,20 @@
|
|
|
414
417
|
.detail-error-type {
|
|
415
418
|
font-size: 12px;
|
|
416
419
|
font-weight: 600;
|
|
417
|
-
color:
|
|
420
|
+
color: var(--color-error);
|
|
418
421
|
margin-bottom: 4px;
|
|
419
422
|
}
|
|
420
423
|
|
|
421
424
|
.detail-error-message {
|
|
422
425
|
font-size: 11px;
|
|
423
|
-
color:
|
|
426
|
+
color: var(--text-muted);
|
|
424
427
|
line-height: 1.5;
|
|
425
428
|
}
|
|
426
429
|
|
|
427
430
|
.detail-error-stack {
|
|
428
|
-
font-family:
|
|
431
|
+
font-family: var(--font-mono);
|
|
429
432
|
font-size: 10px;
|
|
430
|
-
color:
|
|
433
|
+
color: var(--text-dim);
|
|
431
434
|
margin-top: 8px;
|
|
432
435
|
max-height: 150px;
|
|
433
436
|
overflow-y: auto;
|
|
@@ -450,20 +453,20 @@
|
|
|
450
453
|
font-size: 11px;
|
|
451
454
|
padding: 4px 8px;
|
|
452
455
|
border-radius: 4px;
|
|
453
|
-
background:
|
|
454
|
-
border: 1px solid
|
|
456
|
+
background: var(--surface-sunken);
|
|
457
|
+
border: 1px solid var(--border-subtle);
|
|
455
458
|
}
|
|
456
459
|
|
|
457
460
|
.detail-step-index {
|
|
458
|
-
color:
|
|
461
|
+
color: var(--text-dim);
|
|
459
462
|
font-size: 10px;
|
|
460
463
|
font-weight: 700;
|
|
461
464
|
min-width: 16px;
|
|
462
465
|
}
|
|
463
466
|
|
|
464
467
|
.detail-step-code {
|
|
465
|
-
font-family:
|
|
466
|
-
color:
|
|
468
|
+
font-family: var(--font-mono);
|
|
469
|
+
color: var(--text-default);
|
|
467
470
|
}
|
|
468
471
|
|
|
469
472
|
/* ─── Tags/Metrics ──────────────────────────────────────────────────────── */
|
|
@@ -478,48 +481,48 @@
|
|
|
478
481
|
font-size: 10px;
|
|
479
482
|
padding: 2px 6px;
|
|
480
483
|
border-radius: 3px;
|
|
481
|
-
background:
|
|
482
|
-
border: 1px solid
|
|
484
|
+
background: var(--surface-sunken);
|
|
485
|
+
border: 1px solid var(--border-subtle);
|
|
483
486
|
}
|
|
484
487
|
|
|
485
488
|
.detail-tag-key {
|
|
486
|
-
color:
|
|
489
|
+
color: var(--text-dim);
|
|
487
490
|
}
|
|
488
491
|
|
|
489
492
|
.detail-tag-value {
|
|
490
|
-
color:
|
|
491
|
-
font-family:
|
|
493
|
+
color: var(--text-default);
|
|
494
|
+
font-family: var(--font-mono);
|
|
492
495
|
}
|
|
493
496
|
|
|
494
497
|
/* ─── Concept panel header ──────────────────────────────────────────────── */
|
|
495
498
|
|
|
496
499
|
.detail-concept-code {
|
|
497
|
-
font-family:
|
|
500
|
+
font-family: var(--font-mono);
|
|
498
501
|
font-size: 14px;
|
|
499
502
|
font-weight: 600;
|
|
500
|
-
color:
|
|
503
|
+
color: var(--color-success);
|
|
501
504
|
}
|
|
502
505
|
|
|
503
506
|
.detail-concept-domain {
|
|
504
507
|
font-size: 11px;
|
|
505
|
-
color:
|
|
508
|
+
color: var(--text-dim);
|
|
506
509
|
}
|
|
507
510
|
|
|
508
511
|
.detail-refines {
|
|
509
512
|
font-size: 11px;
|
|
510
|
-
color:
|
|
513
|
+
color: var(--text-muted);
|
|
511
514
|
}
|
|
512
515
|
|
|
513
516
|
.detail-refines-code {
|
|
514
|
-
font-family:
|
|
515
|
-
color:
|
|
517
|
+
font-family: var(--font-mono);
|
|
518
|
+
color: var(--color-accent);
|
|
516
519
|
}
|
|
517
520
|
|
|
518
521
|
/* ─── Not available fallback ────────────────────────────────────────────── */
|
|
519
522
|
|
|
520
523
|
.detail-not-available {
|
|
521
524
|
font-size: 12px;
|
|
522
|
-
color:
|
|
525
|
+
color: var(--text-dim);
|
|
523
526
|
font-style: italic;
|
|
524
527
|
padding: 8px 0;
|
|
525
528
|
}
|