@powerduck/tree 0.7.3

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.
@@ -0,0 +1,592 @@
1
+ /* src/react/Tree.css */
2
+ .pde-tree-root {
3
+ display: flex;
4
+ flex-direction: column;
5
+ width: 100%;
6
+ height: 100%;
7
+ min-height: 0;
8
+ font-family: var(--font-family-ui, Inter, ui-sans-serif, system-ui, sans-serif);
9
+ font-size: var(--font-size-sm, 13px);
10
+ line-height: var(--line-height-normal, 20px);
11
+ color: var(--color-text-primary, #26282b);
12
+ background: var(--color-surface, #ffffff);
13
+ }
14
+ .pde-tree-toolbar {
15
+ display: flex;
16
+ align-items: center;
17
+ gap: 6px;
18
+ padding: 6px 8px;
19
+ border-bottom: 1px solid var(--color-border-subtle, #eceff1);
20
+ flex-shrink: 0;
21
+ }
22
+ .pde-tree-searchRow {
23
+ display: flex;
24
+ align-items: center;
25
+ padding: 6px 8px;
26
+ border-bottom: 1px solid var(--color-border-subtle, #eceff1);
27
+ flex-shrink: 0;
28
+ gap: 6px;
29
+ }
30
+ .pde-tree-searchInputWrap {
31
+ position: relative;
32
+ flex: 1;
33
+ min-width: 0;
34
+ display: flex;
35
+ align-items: center;
36
+ }
37
+ .pde-tree-searchIcon {
38
+ position: absolute;
39
+ left: 8px;
40
+ display: flex;
41
+ align-items: center;
42
+ color: var(--color-text-tertiary, #989da5);
43
+ pointer-events: none;
44
+ z-index: 1;
45
+ }
46
+ .pde-tree-searchInput {
47
+ width: 100%;
48
+ height: 28px;
49
+ padding: 0 8px 0 28px;
50
+ font-size: var(--font-size-sm, 13px);
51
+ font-family: inherit;
52
+ color: var(--color-text-primary, #26282b);
53
+ background: var(--color-surface-subtle, #f8f9fa);
54
+ border: 1px solid var(--color-border-default, #e0e4e8);
55
+ border-radius: var(--radius-sm, 4px);
56
+ outline: none;
57
+ transition:
58
+ border-color var(--transition-fast, 140ms ease),
59
+ box-shadow var(--transition-fast, 140ms ease),
60
+ background var(--transition-fast, 140ms ease);
61
+ }
62
+ .pde-tree-searchInput:hover {
63
+ border-color: var(--color-border-strong, #ccd2d8);
64
+ }
65
+ .pde-tree-searchInput:focus {
66
+ border-color: var(--color-accent, #f28c28);
67
+ box-shadow: 0 0 0 2px var(--color-focus-ring, rgba(242, 140, 40, 0.28));
68
+ background: var(--color-surface, #ffffff);
69
+ }
70
+ .pde-tree-searchInput::placeholder {
71
+ color: var(--color-text-tertiary, #989da5);
72
+ }
73
+ .pde-tree-iconButton {
74
+ display: inline-flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+ width: 28px;
78
+ height: 28px;
79
+ padding: 0;
80
+ font-size: var(--icon-size-sm, 14px);
81
+ color: var(--color-text-secondary, #6f747c);
82
+ background: transparent;
83
+ border: none;
84
+ border-radius: var(--radius-sm, 4px);
85
+ cursor: pointer;
86
+ transition: color var(--transition-fast, 140ms ease);
87
+ flex-shrink: 0;
88
+ }
89
+ .pde-tree-iconButton:hover:not(:disabled) {
90
+ color: var(--color-accent, #f28c28);
91
+ }
92
+ .pde-tree-iconButton:active:not(:disabled) {
93
+ color: var(--color-accent-active, #c9640d);
94
+ }
95
+ .pde-tree-iconButton:disabled {
96
+ opacity: 0.35;
97
+ cursor: not-allowed;
98
+ }
99
+ .pde-tree-treeContainer {
100
+ flex: 1;
101
+ min-height: 0;
102
+ overflow-y: auto;
103
+ overflow-x: hidden;
104
+ padding: 2px 0;
105
+ }
106
+ .pde-tree-treeContainer:focus {
107
+ outline: none;
108
+ }
109
+ .pde-tree-treeContainer::-webkit-scrollbar {
110
+ width: 6px;
111
+ }
112
+ .pde-tree-treeContainer::-webkit-scrollbar-track {
113
+ background: transparent;
114
+ }
115
+ .pde-tree-treeContainer::-webkit-scrollbar-thumb {
116
+ background: var(--color-border-default, #e0e4e8);
117
+ border-radius: 3px;
118
+ }
119
+ .pde-tree-treeContainer::-webkit-scrollbar-thumb:hover {
120
+ background: var(--color-border-strong, #ccd2d8);
121
+ }
122
+ .pde-tree-indentGuide {
123
+ position: absolute;
124
+ top: 0;
125
+ bottom: 0;
126
+ width: 1px;
127
+ background: var(--color-border-subtle, #eceff1);
128
+ pointer-events: none;
129
+ }
130
+ .pde-tree-nodeRow {
131
+ display: flex;
132
+ align-items: center;
133
+ gap: 4px;
134
+ height: 28px;
135
+ padding: 0 8px;
136
+ cursor: default;
137
+ user-select: none;
138
+ white-space: nowrap;
139
+ position: relative;
140
+ outline: none;
141
+ transition: background var(--transition-fast, 140ms ease);
142
+ }
143
+ .pde-tree-nodeRow:hover {
144
+ background: var(--color-surface-hover, #f4f5f6);
145
+ }
146
+ .pde-tree-nodeRowSelected {
147
+ background: var(--color-surface-selected, #eef0f2);
148
+ }
149
+ .pde-tree-nodeRowSelected::before {
150
+ content: "";
151
+ position: absolute;
152
+ left: 0;
153
+ top: 4px;
154
+ bottom: 4px;
155
+ width: 2px;
156
+ background: var(--color-accent, #f28c28);
157
+ border-radius: 1px;
158
+ }
159
+ .pde-tree-nodeRowSelected:hover {
160
+ background: var(--color-surface-selected, #eef0f2);
161
+ }
162
+ .pde-tree-nodeRowSelected .pde-tree-nodeLabel {
163
+ font-weight: var(--font-weight-medium, 500);
164
+ color: var(--color-text-primary, #26282b);
165
+ }
166
+ .pde-tree-branchControl {
167
+ cursor: pointer;
168
+ }
169
+ .pde-tree-leafItem {
170
+ cursor: pointer;
171
+ }
172
+ .pde-tree-expandIcon {
173
+ display: inline-flex;
174
+ align-items: center;
175
+ justify-content: center;
176
+ width: 14px;
177
+ height: 14px;
178
+ flex-shrink: 0;
179
+ color: var(--color-text-tertiary, #989da5);
180
+ }
181
+ .pde-tree-expandIconPlaceholder {
182
+ width: 14px;
183
+ flex-shrink: 0;
184
+ }
185
+ .pde-tree-dragHandle {
186
+ display: inline-flex;
187
+ align-items: center;
188
+ justify-content: center;
189
+ width: 14px;
190
+ height: 14px;
191
+ flex-shrink: 0;
192
+ color: var(--color-text-tertiary, #989da5);
193
+ cursor: grab;
194
+ opacity: 0;
195
+ transition: opacity var(--transition-fast, 140ms ease), color var(--transition-fast, 140ms ease);
196
+ }
197
+ .pde-tree-dragHandle:hover {
198
+ color: var(--color-text-primary, #26282b);
199
+ opacity: 1;
200
+ }
201
+ .pde-tree-dragHandle:active {
202
+ cursor: grabbing;
203
+ }
204
+ .pde-tree-dragHandleDisabled {
205
+ cursor: not-allowed;
206
+ opacity: 0.2 !important;
207
+ }
208
+ .pde-tree-nodeRow:hover .pde-tree-dragHandle {
209
+ opacity: 0.6;
210
+ }
211
+ .pde-tree-nodeRow:hover .pde-tree-dragHandle:hover {
212
+ opacity: 1;
213
+ }
214
+ .pde-tree-nodeIcon {
215
+ display: inline-flex;
216
+ align-items: center;
217
+ justify-content: center;
218
+ width: 14px;
219
+ height: 14px;
220
+ flex-shrink: 0;
221
+ color: var(--color-text-tertiary, #989da5);
222
+ }
223
+ .pde-tree-primitiveDot {
224
+ width: 5px;
225
+ height: 5px;
226
+ border-radius: 50%;
227
+ background: currentColor;
228
+ display: inline-block;
229
+ }
230
+ .pde-tree-nodeLabel {
231
+ flex: 1;
232
+ min-width: 0;
233
+ overflow: hidden;
234
+ text-overflow: ellipsis;
235
+ white-space: nowrap;
236
+ font-weight: var(--font-weight-regular, 400);
237
+ font-size: var(--font-size-sm, 13px);
238
+ }
239
+ .pde-tree-nodeLabelBranch {
240
+ font-weight: var(--font-weight-medium, 500);
241
+ }
242
+ .pde-tree-deprecatedLabel {
243
+ text-decoration: line-through;
244
+ color: var(--color-text-tertiary, #989da5);
245
+ }
246
+ .pde-tree-nodeSuffix {
247
+ display: inline-flex;
248
+ align-items: center;
249
+ gap: 4px;
250
+ flex-shrink: 0;
251
+ }
252
+ .pde-tree-countBadge {
253
+ margin-left: auto;
254
+ font-size: 10px;
255
+ font-weight: var(--font-weight-medium, 500);
256
+ color: var(--color-text-tertiary, #989da5);
257
+ background: var(--color-surface-subtle, #f8f9fa);
258
+ border: 1px solid var(--color-border-subtle, #eceff1);
259
+ border-radius: var(--radius-full, 9999px);
260
+ padding: 0 5px;
261
+ line-height: 14px;
262
+ min-width: 16px;
263
+ text-align: center;
264
+ }
265
+ .pde-tree-methodBadge {
266
+ display: inline-flex;
267
+ align-items: center;
268
+ justify-content: center;
269
+ width: 40px;
270
+ height: 18px;
271
+ font-size: 10px;
272
+ font-weight: var(--font-weight-semibold, 600);
273
+ letter-spacing: 0.3px;
274
+ border-radius: var(--radius-xs, 3px);
275
+ flex-shrink: 0;
276
+ margin-right: 6px;
277
+ font-family: var(--font-family-ui, Inter, ui-sans-serif, system-ui, sans-serif);
278
+ }
279
+ .pde-tree-methodGet {
280
+ color: var(--color-success, #428961);
281
+ background: var(--color-success-soft, #eff8f2);
282
+ }
283
+ .pde-tree-methodPost {
284
+ color: var(--color-info, #4f79bf);
285
+ background: var(--color-info-soft, #f0f5ff);
286
+ }
287
+ .pde-tree-methodPut {
288
+ color: var(--color-warning, #d98a22);
289
+ background: var(--color-warning-soft, #fff8e8);
290
+ }
291
+ .pde-tree-methodPatch {
292
+ color: var(--color-dynamic, #4d7ec8);
293
+ background: var(--color-accent-bg-soft, #f0f5ff);
294
+ }
295
+ .pde-tree-methodDelete {
296
+ color: var(--color-danger, #c95555);
297
+ background: var(--color-danger-soft, #fff2f1);
298
+ }
299
+ .pde-tree-methodOther {
300
+ color: var(--color-text-secondary, #6f747c);
301
+ background: var(--color-surface-subtle, #f8f9fa);
302
+ }
303
+ .pde-tree-requiredDot {
304
+ width: 4px;
305
+ height: 4px;
306
+ border-radius: 50%;
307
+ background: var(--color-danger, #c95555);
308
+ flex-shrink: 0;
309
+ }
310
+ .pde-tree-highlight {
311
+ background: var(--color-accent-bg, #fff8ef);
312
+ color: var(--color-text-accent, #d97818);
313
+ border-radius: 2px;
314
+ padding: 0 1px;
315
+ font-weight: var(--font-weight-medium, 500);
316
+ }
317
+ .pde-tree-emptyState {
318
+ display: flex;
319
+ align-items: center;
320
+ justify-content: center;
321
+ padding: 24px 16px;
322
+ color: var(--color-text-tertiary, #989da5);
323
+ font-size: var(--font-size-xs, 12px);
324
+ }
325
+ .pde-tree-nodeDragging {
326
+ opacity: 0.35;
327
+ }
328
+ .pde-tree-dropIndicatorBefore::before {
329
+ content: "";
330
+ position: absolute;
331
+ top: 0;
332
+ left: 8px;
333
+ right: 8px;
334
+ height: 2px;
335
+ background: var(--color-accent, #f28c28);
336
+ border-radius: 1px;
337
+ pointer-events: none;
338
+ z-index: 2;
339
+ }
340
+ .pde-tree-dropIndicatorAfter::after {
341
+ content: "";
342
+ position: absolute;
343
+ bottom: 0;
344
+ left: 8px;
345
+ right: 8px;
346
+ height: 2px;
347
+ background: var(--color-accent, #f28c28);
348
+ border-radius: 1px;
349
+ pointer-events: none;
350
+ z-index: 2;
351
+ }
352
+ .pde-tree-dropIndicatorChild {
353
+ background: var(--color-accent-bg, #fff8ef) !important;
354
+ box-shadow: inset 0 0 0 1px var(--color-accent, #f28c28);
355
+ border-radius: var(--radius-sm, 4px);
356
+ }
357
+ .pde-tree-moreButton {
358
+ display: inline-flex;
359
+ align-items: center;
360
+ justify-content: center;
361
+ width: 20px;
362
+ height: 20px;
363
+ padding: 0;
364
+ flex-shrink: 0;
365
+ color: var(--color-text-tertiary, #989da5);
366
+ background: transparent;
367
+ border: none;
368
+ border-radius: var(--radius-xs, 3px);
369
+ cursor: pointer;
370
+ opacity: 0;
371
+ transition: opacity var(--transition-fast, 140ms ease), color var(--transition-fast, 140ms ease);
372
+ }
373
+ .pde-tree-nodeRow:hover .pde-tree-moreButton {
374
+ opacity: 1;
375
+ }
376
+ .pde-tree-moreButton:hover {
377
+ color: var(--color-accent, #f28c28);
378
+ }
379
+ .pde-tree-moreButtonActive {
380
+ opacity: 1 !important;
381
+ color: var(--color-accent, #f28c28);
382
+ }
383
+ .pde-tree-contextMenu {
384
+ position: fixed;
385
+ z-index: 1000;
386
+ min-width: 180px;
387
+ max-width: 280px;
388
+ padding: 4px;
389
+ background: var(--color-surface, #ffffff);
390
+ border: 1px solid var(--color-border-default, #e0e4e8);
391
+ border-radius: var(--radius-md, 6px);
392
+ box-shadow: var(--shadow-lg, 0 16px 40px rgba(28, 32, 36, 0.1));
393
+ font-size: var(--font-size-xs, 12px);
394
+ font-family: inherit;
395
+ animation: pde-tree-menuFadeIn 120ms ease;
396
+ }
397
+ @keyframes pde-tree-menuFadeIn {
398
+ from {
399
+ opacity: 0;
400
+ transform: translateY(-2px);
401
+ }
402
+ to {
403
+ opacity: 1;
404
+ transform: translateY(0);
405
+ }
406
+ }
407
+ .pde-tree-contextMenuItem {
408
+ display: flex;
409
+ align-items: center;
410
+ gap: 8px;
411
+ width: 100%;
412
+ height: 30px;
413
+ padding: 0 8px;
414
+ text-align: left;
415
+ font-size: var(--font-size-sm, 13px);
416
+ font-family: inherit;
417
+ color: var(--color-text-primary, #26282b);
418
+ background: transparent;
419
+ border: none;
420
+ border-radius: var(--radius-xs, 3px);
421
+ cursor: pointer;
422
+ transition: background var(--transition-fast, 140ms ease);
423
+ white-space: nowrap;
424
+ overflow: hidden;
425
+ text-overflow: ellipsis;
426
+ }
427
+ .pde-tree-contextMenuItem:hover:not(:disabled) {
428
+ background: var(--color-surface-hover, #f4f5f6);
429
+ }
430
+ .pde-tree-contextMenuItem:disabled {
431
+ color: var(--color-text-disabled, #c2c6cc);
432
+ cursor: not-allowed;
433
+ }
434
+ .pde-tree-contextMenuItemDanger {
435
+ color: var(--color-danger, #c95555);
436
+ }
437
+ .pde-tree-contextMenuItemDanger .pde-tree-contextMenuIcon {
438
+ color: var(--color-danger, #c95555);
439
+ }
440
+ .pde-tree-contextMenuItemDanger:hover:not(:disabled) {
441
+ background: var(--color-danger-soft, #fff2f1);
442
+ }
443
+ .pde-tree-contextMenuItemConfirming {
444
+ background: var(--color-danger-soft, #fff2f1);
445
+ color: var(--color-danger, #c95555);
446
+ font-weight: var(--font-weight-semibold, 600);
447
+ }
448
+ .pde-tree-contextMenuItemConfirming:hover:not(:disabled) {
449
+ background: var(--color-danger-soft, #fff2f1);
450
+ color: var(--color-danger, #c95555);
451
+ }
452
+ .pde-tree-contextMenuItemConfirming .pde-tree-contextMenuIcon {
453
+ color: var(--color-danger, #c95555);
454
+ }
455
+ .pde-tree-contextMenuItem:focus {
456
+ outline: none;
457
+ box-shadow: none;
458
+ }
459
+ .pde-tree-contextMenuIcon {
460
+ display: inline-flex;
461
+ align-items: center;
462
+ justify-content: center;
463
+ width: 14px;
464
+ height: 14px;
465
+ flex-shrink: 0;
466
+ color: var(--color-text-secondary, #6f747c);
467
+ }
468
+ .pde-tree-contextMenuSeparator {
469
+ height: 1px;
470
+ margin: 4px 0;
471
+ background: var(--color-border-subtle, #eceff1);
472
+ }
473
+ .pde-tree-variant-doc {
474
+ background: var(--color-surface, #ffffff);
475
+ font-size: var(--font-size-sm, 13px);
476
+ }
477
+ .pde-tree-variant-doc .pde-tree-nodeRow {
478
+ height: 28px;
479
+ border-radius: 0;
480
+ padding: 0 12px;
481
+ position: relative;
482
+ }
483
+ .pde-tree-variant-doc .pde-tree-nodeRow:hover {
484
+ background: var(--color-surface-hover, #f4f5f6);
485
+ }
486
+ .pde-tree-variant-doc .pde-tree-nodeRowSelected {
487
+ background: var(--color-surface-hover, #f4f5f6);
488
+ }
489
+ .pde-tree-variant-doc .pde-tree-nodeRowSelected::before {
490
+ content: "";
491
+ position: absolute;
492
+ left: 0;
493
+ top: 4px;
494
+ bottom: 4px;
495
+ width: 2px;
496
+ background: var(--color-accent, #f28c28);
497
+ border-radius: 1px;
498
+ }
499
+ .pde-tree-variant-doc .pde-tree-nodeLabelBranch {
500
+ font-size: 11px;
501
+ font-weight: var(--font-weight-semibold, 600);
502
+ letter-spacing: 0.6px;
503
+ text-transform: uppercase;
504
+ color: var(--color-text-tertiary, #989da5);
505
+ }
506
+ .pde-tree-variant-doc .pde-tree-nodeRow:has(.pde-tree-nodeLabelBranch) {
507
+ padding-top: 10px;
508
+ padding-bottom: 2px;
509
+ height: auto;
510
+ min-height: 28px;
511
+ }
512
+ .pde-tree-variant-doc .pde-tree-leafItem .pde-tree-nodeLabel {
513
+ font-weight: var(--font-weight-regular, 400);
514
+ color: var(--color-text-secondary, #6f747c);
515
+ transition: color var(--transition-fast, 140ms ease);
516
+ }
517
+ .pde-tree-variant-doc .pde-tree-nodeRow:hover .pde-tree-nodeLabel {
518
+ color: var(--color-text-primary, #26282b);
519
+ }
520
+ .pde-tree-variant-doc .pde-tree-nodeRowSelected .pde-tree-nodeLabel {
521
+ color: var(--color-text-primary, #26282b);
522
+ font-weight: var(--font-weight-medium, 500);
523
+ }
524
+ .pde-tree-variant-doc .pde-tree-dragHandle {
525
+ display: none;
526
+ }
527
+ .pde-tree-variant-doc .pde-tree-methodBadge {
528
+ font-size: 10px;
529
+ font-weight: var(--font-weight-semibold, 600);
530
+ width: 40px;
531
+ height: 18px;
532
+ margin-right: 6px;
533
+ }
534
+ .pde-tree-variant-doc .pde-tree-indentGuide {
535
+ background: var(--color-border-subtle, #eceff1);
536
+ opacity: 0.6;
537
+ }
538
+ .pde-tree-variant-doc .pde-tree-searchRow {
539
+ padding: 8px 12px;
540
+ border-bottom: 1px solid var(--color-border-subtle, #eceff1);
541
+ }
542
+ .pde-tree-variant-doc .pde-tree-searchInput {
543
+ background: var(--color-surface-subtle, #f8f9fa);
544
+ border: 1px solid transparent;
545
+ height: 30px;
546
+ }
547
+ .pde-tree-variant-doc .pde-tree-searchInput:focus {
548
+ background: var(--color-surface, #ffffff);
549
+ border-color: var(--color-border-default, #e0e4e8);
550
+ }
551
+ .pde-tree-variant-api {
552
+ font-size: var(--font-size-sm, 13px);
553
+ }
554
+ .pde-tree-variant-api .pde-tree-nodeRow {
555
+ height: 28px;
556
+ }
557
+ .pde-tree-variant-api .pde-tree-methodBadge {
558
+ min-width: 34px;
559
+ font-size: 10px;
560
+ }
561
+ .pde-tree-kind-section {
562
+ height: 32px !important;
563
+ }
564
+ .pde-tree-kind-section .pde-tree-nodeLabel {
565
+ font-size: 11px;
566
+ font-weight: var(--font-weight-semibold, 600);
567
+ text-transform: uppercase;
568
+ letter-spacing: 0.06em;
569
+ color: var(--color-text-secondary, #6f747c);
570
+ }
571
+ .pde-tree-kind-section .pde-tree-nodeIcon {
572
+ color: var(--color-accent, #f28c28);
573
+ }
574
+ .pde-tree-kind-section.pde-tree-nodeRowSelected .pde-tree-nodeLabel {
575
+ color: var(--color-text-primary, #26282b);
576
+ }
577
+ .pde-tree-variant-schema {
578
+ font-size: var(--font-size-sm, 13px);
579
+ }
580
+ .pde-tree-variant-schema .pde-tree-nodeRow {
581
+ height: 28px;
582
+ }
583
+ .pde-tree-variant-schema .pde-tree-requiredDot {
584
+ width: 5px;
585
+ height: 5px;
586
+ }
587
+ .pde-tree-variant-schema .pde-tree-branchControl .pde-tree-nodeIcon {
588
+ color: var(--color-warning, #d98a22);
589
+ }
590
+ .pde-tree-variant-schema .pde-tree-leafItem .pde-tree-nodeIcon {
591
+ color: var(--color-info, #4f79bf);
592
+ }