@powerduck/tree 0.7.4 → 0.7.7

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.
@@ -1,592 +1 @@
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
- }
1
+ .pde-tree-root{--tree-color-accent: var(--color-accent, #f28c28);--tree-color-accent-active: var(--color-accent-active, #c9640d);--tree-color-accent-bg: var(--color-accent-bg, #fff8ef);--tree-color-accent-bg-soft: var(--color-accent-bg-soft, #f0f5ff);--tree-color-border-default: var(--color-border-default, #e0e4e8);--tree-color-border-strong: var(--color-border-strong, #ccd2d8);--tree-color-border-subtle: var(--color-border-subtle, #eceff1);--tree-color-danger: var(--color-danger, #FF0000);--tree-color-danger-soft: var(--color-danger-soft, #fff2f1);--tree-color-dynamic: var(--color-dynamic, #4d7ec8);--tree-color-focus-ring: var(--color-focus-ring, rgba(242, 140, 40, .28));--tree-color-info: var(--color-info, #4f79bf);--tree-color-info-soft: var(--color-info-soft, #f0f5ff);--tree-color-success: var(--color-success, #428961);--tree-color-success-soft: var(--color-success-soft, #eff8f2);--tree-color-surface: var(--color-surface, #ffffff);--tree-color-surface-hover: var(--color-surface-hover, #f4f5f6);--tree-color-surface-selected: var(--color-surface-selected, #eef0f2);--tree-color-surface-subtle: var(--color-surface-subtle, #f8f9fa);--tree-color-text-accent: var(--color-text-accent, #d97818);--tree-color-text-disabled: var(--color-text-disabled, #c2c6cc);--tree-color-text-primary: var(--color-text-primary, #26282b);--tree-color-text-secondary: var(--color-text-secondary, #6f747c);--tree-color-text-tertiary: var(--color-text-tertiary, #989da5);--tree-color-warning: var(--color-warning, #d98a22);--tree-color-warning-soft: var(--color-warning-soft, #fff8e8);--tree-shadow-lg: var(--shadow-lg, 0 16px 40px rgba(28, 32, 36, .1), 0 4px 12px rgba(28, 32, 36, .05))}.pde-tree-root[data-theme=dark],[data-theme=dark] .pde-tree-root:not([data-theme=light]){--tree-color-accent: var(--color-accent, #f4a04a);--tree-color-accent-active: var(--color-accent-active, #df7d20);--tree-color-accent-bg: var(--color-accent-bg, #2d2419);--tree-color-accent-bg-soft: var(--color-accent-bg-soft, #1d304f);--tree-color-border-default: var(--color-border-default, #3b4149);--tree-color-border-strong: var(--color-border-strong, #525a65);--tree-color-border-subtle: var(--color-border-subtle, #2d3239);--tree-color-danger: var(--color-danger, #ef7c7c);--tree-color-danger-soft: var(--color-danger-soft, #402020);--tree-color-dynamic: var(--color-dynamic, #7eb0f3);--tree-color-focus-ring: var(--color-focus-ring, rgba(244, 160, 74, .36));--tree-color-info: var(--color-info, #82aef2);--tree-color-info-soft: var(--color-info-soft, #1d304f);--tree-color-success: var(--color-success, #67bd89);--tree-color-success-soft: var(--color-success-soft, #1c3928);--tree-color-surface: var(--color-surface, #1f2125);--tree-color-surface-hover: var(--color-surface-hover, #2b2f35);--tree-color-surface-selected: var(--color-surface-selected, #343941);--tree-color-surface-subtle: var(--color-surface-subtle, #25282d);--tree-color-text-accent: var(--color-text-accent, #ffc98c);--tree-color-text-disabled: var(--color-text-disabled, #626b76);--tree-color-text-primary: var(--color-text-primary, #edf0f3);--tree-color-text-secondary: var(--color-text-secondary, #b8bec7);--tree-color-text-tertiary: var(--color-text-tertiary, #89919c);--tree-color-warning: var(--color-warning, #e7b45c);--tree-color-warning-soft: var(--color-warning-soft, #382f19);--tree-shadow-lg: var(--shadow-lg, 0 18px 44px rgba(0, 0, 0, .42), 0 6px 16px rgba(0, 0, 0, .22))}.pde-tree-root{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;font-family:var(--font-family-ui, Inter, ui-sans-serif, system-ui, sans-serif);font-size:var(--font-size-sm, 13px);line-height:var(--line-height-normal, 20px);color:var(--tree-color-text-primary, #26282b);background:var(--tree-color-surface, #ffffff)}.pde-tree-toolbar{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--tree-color-border-subtle, #eceff1);flex-shrink:0}.pde-tree-searchRow{display:flex;align-items:center;padding:6px 8px;border-bottom:1px solid var(--tree-color-border-subtle, #eceff1);flex-shrink:0;gap:6px}.pde-tree-searchInputWrap{position:relative;flex:1;min-width:0;display:flex;align-items:center}.pde-tree-searchIcon{position:absolute;left:8px;display:flex;align-items:center;color:var(--tree-color-text-tertiary, #989da5);pointer-events:none;z-index:1}.pde-tree-searchInput{width:100%;height:28px;padding:0 8px 0 28px;font-size:var(--font-size-sm, 13px);font-family:inherit;color:var(--tree-color-text-primary, #26282b);background:var(--tree-color-surface-subtle, #f8f9fa);border:1px solid var(--tree-color-border-default, #e0e4e8);border-radius:var(--radius-sm, 4px);outline:none;transition:border-color var(--transition-fast, .14s ease),box-shadow var(--transition-fast, .14s ease),background var(--transition-fast, .14s ease)}.pde-tree-searchInput:hover{border-color:var(--tree-color-border-strong, #ccd2d8)}.pde-tree-searchInput:focus{border-color:var(--tree-color-accent, #f28c28);box-shadow:0 0 0 2px var(--tree-color-focus-ring, rgba(242, 140, 40, .28));background:var(--tree-color-surface, #ffffff)}.pde-tree-searchInput::placeholder{color:var(--tree-color-text-tertiary, #989da5)}.pde-tree-iconButton{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;font-size:var(--icon-size-sm, 14px);color:var(--tree-color-text-secondary, #6f747c);background:transparent;border:none;border-radius:var(--radius-sm, 4px);cursor:pointer;transition:color var(--transition-fast, .14s ease);flex-shrink:0}.pde-tree-iconButton:hover:not(:disabled){color:var(--tree-color-accent, #f28c28)}.pde-tree-iconButton:active:not(:disabled){color:var(--tree-color-accent-active, #c9640d)}.pde-tree-iconButton:disabled{opacity:.35;cursor:not-allowed}.pde-tree-treeContainer{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:2px 0}.pde-tree-treeContainer:focus{outline:none}.pde-tree-treeContainer::-webkit-scrollbar{width:6px}.pde-tree-treeContainer::-webkit-scrollbar-track{background:transparent}.pde-tree-treeContainer::-webkit-scrollbar-thumb{background:var(--tree-color-border-default, #e0e4e8);border-radius:3px}.pde-tree-treeContainer::-webkit-scrollbar-thumb:hover{background:var(--tree-color-border-strong, #ccd2d8)}.pde-tree-indentGuide{position:absolute;top:0;bottom:0;width:1px;background:var(--tree-color-border-subtle, #eceff1);pointer-events:none}.pde-tree-nodeRow{display:flex;align-items:center;gap:4px;height:28px;padding:0 8px;cursor:default;user-select:none;white-space:nowrap;position:relative;outline:none;transition:background var(--transition-fast, .14s ease)}.pde-tree-nodeRow:hover{background:var(--tree-color-surface-hover, #f4f5f6)}.pde-tree-nodeRowSelected{background:var(--tree-color-surface-selected, #eef0f2)}.pde-tree-nodeRowSelected:before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--tree-color-accent, #f28c28);border-radius:1px}.pde-tree-nodeRowSelected:hover{background:var(--tree-color-surface-selected, #eef0f2)}.pde-tree-nodeRowSelected .pde-tree-nodeLabel{font-weight:var(--font-weight-medium, 500);color:var(--tree-color-text-primary, #26282b)}.pde-tree-branchControl,.pde-tree-leafItem{cursor:pointer}.pde-tree-expandIcon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex-shrink:0;color:var(--tree-color-text-tertiary, #989da5)}.pde-tree-expandIconPlaceholder{width:14px;flex-shrink:0}.pde-tree-dragHandle{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex-shrink:0;color:var(--tree-color-text-tertiary, #989da5);cursor:grab;opacity:0;transition:opacity var(--transition-fast, .14s ease),color var(--transition-fast, .14s ease)}.pde-tree-dragHandle:hover{color:var(--tree-color-text-primary, #26282b);opacity:1}.pde-tree-dragHandle:active{cursor:grabbing}.pde-tree-dragHandleDisabled{cursor:not-allowed;opacity:.2!important}.pde-tree-nodeRow:hover .pde-tree-dragHandle{opacity:.6}.pde-tree-nodeRow:hover .pde-tree-dragHandle:hover{opacity:1}.pde-tree-nodeIcon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex-shrink:0;color:var(--tree-color-text-tertiary, #989da5)}.pde-tree-primitiveDot{width:5px;height:5px;border-radius:50%;background:currentColor;display:inline-block}.pde-tree-nodeLabel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-sm, 13px)}.pde-tree-nodeLabelBranch{font-weight:var(--font-weight-medium, 500)}.pde-tree-deprecatedLabel{text-decoration:line-through;color:var(--tree-color-text-tertiary, #989da5)}.pde-tree-nodeSuffix{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.pde-tree-countBadge{margin-left:auto;font-size:10px;font-weight:var(--font-weight-medium, 500);color:var(--tree-color-text-tertiary, #989da5);background:var(--tree-color-surface-subtle, #f8f9fa);border:1px solid var(--tree-color-border-subtle, #eceff1);border-radius:var(--radius-full, 9999px);padding:0 5px;line-height:14px;min-width:16px;text-align:center}.pde-tree-methodBadge{display:inline-flex;align-items:center;justify-content:center;width:40px;height:18px;font-size:10px;font-weight:var(--font-weight-semibold, 600);letter-spacing:.3px;border-radius:var(--radius-xs, 3px);flex-shrink:0;margin-right:6px;font-family:var(--font-family-ui, Inter, ui-sans-serif, system-ui, sans-serif)}.pde-tree-methodGet{color:var(--tree-color-success, #428961);background:var(--tree-color-success-soft, #eff8f2)}.pde-tree-methodPost{color:var(--tree-color-info, #4f79bf);background:var(--tree-color-info-soft, #f0f5ff)}.pde-tree-methodPut{color:var(--tree-color-warning, #d98a22);background:var(--tree-color-warning-soft, #fff8e8)}.pde-tree-methodPatch{color:var(--tree-color-dynamic, #4d7ec8);background:var(--tree-color-accent-bg-soft, #f0f5ff)}.pde-tree-methodDelete{color:var(--tree-color-danger, #c95555);background:var(--tree-color-danger-soft, #fff2f1)}.pde-tree-methodOther{color:var(--tree-color-text-secondary, #6f747c);background:var(--tree-color-surface-subtle, #f8f9fa)}.pde-tree-requiredDot{width:4px;height:4px;border-radius:50%;background:var(--tree-color-danger, #c95555);flex-shrink:0}.pde-tree-highlight{background:var(--tree-color-accent-bg, #fff8ef);color:var(--tree-color-text-accent, #d97818);border-radius:2px;padding:0 1px;font-weight:var(--font-weight-medium, 500)}.pde-tree-emptyState{display:flex;align-items:center;justify-content:center;padding:24px 16px;color:var(--tree-color-text-tertiary, #989da5);font-size:var(--font-size-xs, 12px)}.pde-tree-nodeDragging{opacity:.35}.pde-tree-dropIndicatorBefore:before{content:"";position:absolute;top:0;left:8px;right:8px;height:2px;background:var(--tree-color-accent, #f28c28);border-radius:1px;pointer-events:none;z-index:2}.pde-tree-dropIndicatorAfter:after{content:"";position:absolute;bottom:0;left:8px;right:8px;height:2px;background:var(--tree-color-accent, #f28c28);border-radius:1px;pointer-events:none;z-index:2}.pde-tree-dropIndicatorChild{background:var(--tree-color-accent-bg, #fff8ef)!important;box-shadow:inset 0 0 0 1px var(--tree-color-accent, #f28c28);border-radius:var(--radius-sm, 4px)}.pde-tree-moreButton{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;flex-shrink:0;color:var(--tree-color-text-tertiary, #989da5);background:transparent;border:none;border-radius:var(--radius-xs, 3px);cursor:pointer;opacity:0;transition:opacity var(--transition-fast, .14s ease),color var(--transition-fast, .14s ease)}.pde-tree-nodeRow:hover .pde-tree-moreButton{opacity:1}.pde-tree-moreButton:hover{color:var(--tree-color-accent, #f28c28)}.pde-tree-moreButtonActive{opacity:1!important;color:var(--tree-color-accent, #f28c28)}.pde-tree-contextMenu{position:fixed;z-index:1000;width:min(248px,calc(100vw - 16px));min-width:0;max-width:calc(100vw - 16px);padding:4px;background:var(--tree-color-surface, #ffffff);border:1px solid var(--tree-color-border-default, #e0e4e8);border-radius:var(--radius-md, 6px);box-shadow:var(--tree-shadow-lg, 0 16px 40px rgba(28, 32, 36, .1));font-size:var(--font-size-xs, 12px);font-family:inherit;color:var(--tree-color-text-primary);max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain}.pde-tree-contextMenuItem{display:flex;align-items:center;gap:8px;width:100%;height:30px;padding:0 8px;text-align:left;font-size:var(--font-size-sm, 13px);font-family:inherit;color:var(--tree-color-text-primary, #26282b);background:transparent;border:none;border-radius:var(--radius-xs, 3px);cursor:pointer;transition:background var(--transition-fast, .14s ease);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pde-tree-contextMenuItem:hover:not(:disabled){background:var(--tree-color-surface-hover, #f4f5f6)}.pde-tree-contextMenuItem:disabled{color:var(--tree-color-text-disabled, #c2c6cc);cursor:not-allowed}.pde-tree-contextMenuItemDanger,.pde-tree-contextMenuItemDanger .pde-tree-contextMenuIcon{color:var(--tree-color-danger, #c95555)}.pde-tree-contextMenuItemDanger:hover:not(:disabled){background:var(--tree-color-danger-soft, #fff2f1)}.pde-tree-contextMenuItemConfirming{background:var(--tree-color-danger-soft, #fff2f1);color:var(--tree-color-danger, #c95555);font-weight:var(--font-weight-semibold, 600)}.pde-tree-contextMenuItemConfirming:hover:not(:disabled){background:var(--tree-color-danger-soft, #fff2f1);color:var(--tree-color-danger, #c95555)}.pde-tree-contextMenuItemConfirming .pde-tree-contextMenuIcon{color:var(--tree-color-danger, #c95555)}.pde-tree-contextMenuItem:focus{outline:none;box-shadow:none}.pde-tree-contextMenuIcon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex-shrink:0;color:var(--tree-color-text-secondary, #6f747c)}.pde-tree-contextMenuSeparator{height:1px;margin:4px 0;background:var(--tree-color-border-subtle, #eceff1)}.pde-tree-variant-doc{background:var(--tree-color-surface, #ffffff);font-size:var(--font-size-sm, 13px)}.pde-tree-variant-doc .pde-tree-nodeRow{height:28px;border-radius:0;padding:0 12px;position:relative}.pde-tree-variant-doc .pde-tree-nodeRow:hover,.pde-tree-variant-doc .pde-tree-nodeRowSelected{background:var(--tree-color-surface-hover, #f4f5f6)}.pde-tree-variant-doc .pde-tree-nodeRowSelected:before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--tree-color-accent, #f28c28);border-radius:1px}.pde-tree-variant-doc .pde-tree-nodeLabelBranch{font-size:11px;font-weight:var(--font-weight-semibold, 600);letter-spacing:.6px;text-transform:uppercase;color:var(--tree-color-text-tertiary, #989da5)}.pde-tree-variant-doc .pde-tree-nodeRow:has(.pde-tree-nodeLabelBranch){padding-top:10px;padding-bottom:2px;height:auto;min-height:28px}.pde-tree-variant-doc .pde-tree-leafItem .pde-tree-nodeLabel{font-weight:var(--font-weight-regular, 400);color:var(--tree-color-text-secondary, #6f747c);transition:color var(--transition-fast, .14s ease)}.pde-tree-variant-doc .pde-tree-nodeRow:hover .pde-tree-nodeLabel{color:var(--tree-color-text-primary, #26282b)}.pde-tree-variant-doc .pde-tree-nodeRowSelected .pde-tree-nodeLabel{color:var(--tree-color-text-primary, #26282b);font-weight:var(--font-weight-medium, 500)}.pde-tree-variant-doc .pde-tree-dragHandle{display:none}.pde-tree-variant-doc .pde-tree-methodBadge{font-size:10px;font-weight:var(--font-weight-semibold, 600);width:38px;height:18px;margin-right:4px}.pde-tree-variant-doc .pde-tree-indentGuide{background:var(--tree-color-border-subtle, #eceff1);opacity:.6}.pde-tree-variant-doc .pde-tree-searchRow{padding:8px 12px;border-bottom:1px solid var(--tree-color-border-subtle, #eceff1)}.pde-tree-variant-doc .pde-tree-searchInput{background:var(--tree-color-surface-subtle, #f8f9fa);border:1px solid transparent;height:30px}.pde-tree-variant-doc .pde-tree-searchInput:focus{background:var(--tree-color-surface, #ffffff);border-color:var(--tree-color-border-default, #e0e4e8)}.pde-tree-variant-api{font-size:var(--font-size-sm, 13px)}.pde-tree-variant-api .pde-tree-nodeRow{height:28px}.pde-tree-variant-api .pde-tree-methodBadge{min-width:34px;font-size:10px}.pde-tree-kind-section{height:32px!important}.pde-tree-kind-section .pde-tree-nodeLabel{font-size:11px;font-weight:var(--font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.06em;color:var(--tree-color-text-secondary, #6f747c)}.pde-tree-kind-section .pde-tree-nodeIcon{color:var(--tree-color-accent, #f28c28)}.pde-tree-kind-section.pde-tree-nodeRowSelected .pde-tree-nodeLabel{color:var(--tree-color-text-primary, #26282b)}.pde-tree-variant-schema{font-size:var(--font-size-sm, 13px)}.pde-tree-variant-schema .pde-tree-nodeRow{height:28px}.pde-tree-variant-schema .pde-tree-requiredDot{width:5px;height:5px}.pde-tree-variant-schema .pde-tree-branchControl .pde-tree-nodeIcon{color:var(--tree-color-warning, #d98a22)}.pde-tree-variant-schema .pde-tree-leafItem .pde-tree-nodeIcon{color:var(--tree-color-info, #4f79bf)}.pde-tree-root{min-width:0;--tree-row-height: 28px}.pde-tree-root,.pde-tree-root *,.pde-tree-contextMenu,.pde-tree-contextMenu *{box-sizing:border-box}.pde-tree-root[data-size=xs]{--tree-row-height: 24px}.pde-tree-root[data-size=md]{--tree-row-height: 32px}.pde-tree-treeContainer{padding:4px 6px;overscroll-behavior:contain}.pde-tree-root .pde-tree-nodeRow{border-radius:var(--radius-md, 6px);min-width:0}.pde-tree-treeContainer[data-virtualized=true] .pde-tree-nodeRow{height:var(--tree-row-height)!important;min-height:var(--tree-row-height);margin:0;padding-block:0}.pde-tree-root .pde-tree-searchRow{background:transparent;padding:8px;gap:6px}.pde-tree-root .pde-tree-searchInput{height:var(--control-height-md, 32px);border-radius:var(--radius-md, 6px)}.pde-tree-root .pde-tree-iconButton{width:var(--control-height-md, 32px);height:var(--control-height-md, 32px);border-radius:var(--radius-md, 6px)}.pde-tree-iconButton:hover:not(:disabled),.pde-tree-moreButton:hover{background:var(--tree-color-surface-hover);color:var(--tree-color-text-primary)}.pde-tree-root :is(button,input,[role=treeitem]):focus-visible{outline:2px solid var(--tree-color-accent);outline-offset:-2px}.pde-tree-nodeRow:focus-within .pde-tree-moreButton,.pde-tree-moreButton:focus-visible{opacity:1}.pde-tree-root .pde-tree-moreButton{width:24px;height:24px;border-radius:var(--radius-sm, 4px)}.pde-tree-root .pde-tree-nodeSuffix{max-width:35%;overflow:hidden}.pde-tree-contextMenu{font-family:var(--font-family-ui, Inter, ui-sans-serif, system-ui, sans-serif);border-radius:var(--radius-lg, 8px)}.pde-tree-contextMenuItem{height:auto;min-height:32px;white-space:normal;padding:6px 9px;line-height:20px}.pde-tree-contextMenuItem>span:last-child{min-width:0;overflow-wrap:anywhere}.pde-tree-contextMenuItem:focus-visible{outline:2px solid var(--tree-color-accent);outline-offset:-2px;background:var(--tree-color-surface-hover)}.pde-tree-treeContainer,.pde-tree-contextMenu{scrollbar-width:thin;scrollbar-color:transparent transparent}.pde-tree-treeContainer::-webkit-scrollbar,.pde-tree-contextMenu::-webkit-scrollbar{width:6px;height:6px}.pde-tree-treeContainer::-webkit-scrollbar-thumb,.pde-tree-contextMenu::-webkit-scrollbar-thumb{background:transparent;border-radius:9999px}.pde-tree-treeContainer:hover,.pde-tree-treeContainer:focus-within,.pde-tree-contextMenu:hover,.pde-tree-contextMenu:focus-within{scrollbar-color:var(--tree-color-border-strong) transparent}.pde-tree-treeContainer:hover::-webkit-scrollbar-thumb,.pde-tree-treeContainer:focus-within::-webkit-scrollbar-thumb,.pde-tree-contextMenu:hover::-webkit-scrollbar-thumb,.pde-tree-contextMenu:focus-within::-webkit-scrollbar-thumb{background:var(--tree-color-border-strong)}@media(hover:none){.pde-tree-moreButton,.pde-tree-dragHandle{opacity:1}.pde-tree-treeContainer,.pde-tree-contextMenu{scrollbar-color:var(--tree-color-border-strong) transparent}}@media(prefers-reduced-motion:reduce){.pde-tree-root *,.pde-tree-contextMenu *{transition:none;animation:none;scroll-behavior:auto}}
@@ -1,5 +1,6 @@
1
+ import * as react from 'react';
1
2
  import { ReactNode } from 'react';
2
- import { T as TreeNode } from '../types-DVz8c2Yd.cjs';
3
+ import { T as TreeNode } from '../types-CH939NGV.cjs';
3
4
  import { ReorderResult } from '../core/index.cjs';
4
5
 
5
6
  /**
@@ -90,6 +91,8 @@ interface TreeProps<TMetadata = unknown> {
90
91
  className?: string;
91
92
  /** Inline styles. */
92
93
  style?: React.CSSProperties;
94
+ /** Optional standalone theme. Omit to inherit host theme tokens. */
95
+ theme?: "light" | "dark";
93
96
  /** Size variant. Default "sm". */
94
97
  size?: "xs" | "sm" | "md";
95
98
  /** Visual variant for different use cases. Default "default".
@@ -100,6 +103,8 @@ interface TreeProps<TMetadata = unknown> {
100
103
  variant?: "default" | "api" | "schema" | "doc";
101
104
  /** Whether to show indent guides. Default true. */
102
105
  showIndentGuides?: boolean;
106
+ /** Window fixed-height rows above 500 visible nodes by default. Disabled for doc variants and custom row renderers. */
107
+ virtualized?: boolean | "auto";
103
108
  /** Maximum height before scrolling. Default undefined (no limit). */
104
109
  maxHeight?: number | string;
105
110
  /** Callback ref for the root DOM element. */
@@ -177,7 +182,7 @@ declare function useTreeSearch<TMetadata>(nodes: TreeNode<TMetadata>[]): {
177
182
  /**
178
183
  * Manages tree expansion state.
179
184
  *
180
- * Supports controlled (via onExpandedChange) and uncontrolled usage.
185
+ * Keeps local state and notifies consumers through onExpandedChange.
181
186
  * Provides expandAll, collapseAll, and expandToDepth helpers.
182
187
  */
183
188
  declare function useTreeExpansion<TMetadata>(nodes: TreeNode<TMetadata>[], options?: {
@@ -195,6 +200,7 @@ declare function useTreeExpansion<TMetadata>(nodes: TreeNode<TMetadata>[], optio
195
200
  allBranchIds: string[];
196
201
  setNodeElementRef: (id: string, element: HTMLElement | null) => void;
197
202
  scrollToNode: (id: string) => void;
203
+ nodeElementRefs: react.RefObject<Map<string, HTMLElement>>;
198
204
  };
199
205
 
200
206
  /**