@c15t/dev-tools 2.0.0-rc.3 → 2.0.0-rc.4

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 (54) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/components/panel.d.ts.map +1 -1
  3. package/dist/components/tabs.d.ts.map +1 -1
  4. package/dist/components/ui.d.ts +8 -0
  5. package/dist/components/ui.d.ts.map +1 -1
  6. package/dist/core/debug-bundle.d.ts +14 -0
  7. package/dist/core/debug-bundle.d.ts.map +1 -0
  8. package/dist/core/devtools.d.ts.map +1 -1
  9. package/dist/core/panel-renderer.d.ts +5 -0
  10. package/dist/core/panel-renderer.d.ts.map +1 -1
  11. package/dist/core/state-manager.d.ts.map +1 -1
  12. package/dist/core/store-connector.d.ts +16 -0
  13. package/dist/core/store-connector.d.ts.map +1 -1
  14. package/dist/core/store-instrumentation.d.ts +13 -0
  15. package/dist/core/store-instrumentation.d.ts.map +1 -0
  16. package/dist/index.cjs +1681 -905
  17. package/dist/index.js +1680 -904
  18. package/dist/panels/actions.d.ts +1 -0
  19. package/dist/panels/actions.d.ts.map +1 -1
  20. package/dist/panels/consents.d.ts.map +1 -1
  21. package/dist/panels/events.d.ts.map +1 -1
  22. package/dist/panels/iab.d.ts.map +1 -1
  23. package/dist/panels/location.d.ts.map +1 -1
  24. package/dist/panels/scripts.d.ts.map +1 -1
  25. package/dist/react.cjs +1610 -748
  26. package/dist/react.js +1610 -748
  27. package/dist/tanstack.cjs +1565 -532
  28. package/dist/tanstack.js +1565 -532
  29. package/dist/utils/preference-trigger.d.ts.map +1 -1
  30. package/dist/version.d.ts +1 -1
  31. package/package.json +9 -9
  32. package/tsconfig.json +9 -1
  33. package/dist/__tests__/components/ui.test.d.ts +0 -2
  34. package/dist/__tests__/components/ui.test.d.ts.map +0 -1
  35. package/dist/__tests__/core/override-storage.test.d.ts +0 -2
  36. package/dist/__tests__/core/override-storage.test.d.ts.map +0 -1
  37. package/dist/__tests__/core/renderer.test.d.ts +0 -2
  38. package/dist/__tests__/core/renderer.test.d.ts.map +0 -1
  39. package/dist/__tests__/core/reset-consents.test.d.ts +0 -2
  40. package/dist/__tests__/core/reset-consents.test.d.ts.map +0 -1
  41. package/dist/__tests__/core/state-manager.test.d.ts +0 -2
  42. package/dist/__tests__/core/state-manager.test.d.ts.map +0 -1
  43. package/dist/__tests__/core/store-connector.test.d.ts +0 -2
  44. package/dist/__tests__/core/store-connector.test.d.ts.map +0 -1
  45. package/dist/__tests__/panels/dom-scanner.test.d.ts +0 -2
  46. package/dist/__tests__/panels/dom-scanner.test.d.ts.map +0 -1
  47. package/dist/__tests__/panels/events.test.d.ts +0 -2
  48. package/dist/__tests__/panels/events.test.d.ts.map +0 -1
  49. package/dist/__tests__/panels/iab.test.d.ts +0 -2
  50. package/dist/__tests__/panels/iab.test.d.ts.map +0 -1
  51. package/dist/__tests__/panels/scripts.test.d.ts +0 -2
  52. package/dist/__tests__/panels/scripts.test.d.ts.map +0 -1
  53. package/dist/__tests__/utils/preference-trigger.test.d.ts +0 -2
  54. package/dist/__tests__/utils/preference-trigger.test.d.ts.map +0 -1
package/dist/tanstack.js CHANGED
@@ -259,21 +259,21 @@ var __webpack_modules__ = {
259
259
  module.id,
260
260
  `.toggle-bPZtik {
261
261
  border-radius: var(--c15t-radius-full, 9999px);
262
- background-color: var(--c15t-switch-track, #ccc);
262
+ background-color: var(--c15t-switch-track, #d9d9d9);
263
263
  cursor: pointer;
264
- width: 36px;
265
- height: 20px;
266
- transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
264
+ width: 2rem;
265
+ height: 1.25rem;
266
+ transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), box-shadow var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
267
267
  border: none;
268
268
  align-items: center;
269
- padding: 0;
269
+ padding: .125rem;
270
270
  display: inline-flex;
271
271
  position: relative;
272
272
  }
273
273
 
274
274
  .toggle-bPZtik:focus-visible {
275
- outline: 2px solid var(--c15t-primary, #335cff);
276
- outline-offset: 2px;
275
+ box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
276
+ outline: none;
277
277
  }
278
278
 
279
279
  .toggleActive-Ldlasg {
@@ -283,16 +283,16 @@ var __webpack_modules__ = {
283
283
  .toggleThumb-hjGfoX {
284
284
  border-radius: var(--c15t-radius-full, 9999px);
285
285
  background-color: var(--c15t-switch-thumb, #fff);
286
- width: 16px;
287
- height: 16px;
288
- transition: transform var(--c15t-duration-fast, .1s) var(--c15t-easing-spring, cubic-bezier(.34, 1.56, .64, 1));
286
+ width: .75rem;
287
+ height: .75rem;
288
+ box-shadow: 0 0 0 1px var(--c15t-border, #e3e3e3);
289
+ transition: transform var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
289
290
  position: absolute;
290
291
  left: 2px;
291
- box-shadow: 0 1px 2px #0003;
292
292
  }
293
293
 
294
294
  .toggleActive-Ldlasg .toggleThumb-hjGfoX {
295
- transform: translateX(16px);
295
+ transform: translateX(1rem);
296
296
  }
297
297
 
298
298
  .toggle-bPZtik:disabled, .toggleDisabled-ZcD8nZ {
@@ -305,13 +305,14 @@ var __webpack_modules__ = {
305
305
  }
306
306
 
307
307
  .badge-yA0giZ {
308
- border-radius: var(--c15t-radius-sm, .25rem);
308
+ border-radius: var(--c15t-radius-full, 9999px);
309
309
  font-size: var(--c15t-devtools-font-size-xs, .75rem);
310
310
  font-weight: var(--c15t-font-weight-medium, 500);
311
+ line-height: var(--c15t-line-height-tight, 1.25);
311
312
  white-space: nowrap;
313
+ justify-content: center;
312
314
  align-items: center;
313
- padding: 2px 6px;
314
- line-height: 1;
315
+ padding: .1875rem .4375rem;
315
316
  display: inline-flex;
316
317
  }
317
318
 
@@ -344,35 +345,36 @@ var __webpack_modules__ = {
344
345
  justify-content: center;
345
346
  align-items: center;
346
347
  gap: var(--c15t-space-xs, .25rem);
347
- border: 1px solid var(--c15t-border, #e3e3e3);
348
+ border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
348
349
  border-radius: var(--c15t-radius-md, .5rem);
349
- background-color: var(--c15t-surface, #fff);
350
- min-height: 30px;
350
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
351
+ min-height: 2rem;
351
352
  color: var(--c15t-text, #171717);
352
- font-family: inherit;
353
- font-size: 12px;
353
+ font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
354
+ font-size: var(--c15t-font-size-sm, .875rem);
354
355
  font-weight: var(--c15t-font-weight-medium, 500);
356
+ line-height: var(--c15t-line-height-tight, 1.25);
357
+ box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000000d);
355
358
  cursor: pointer;
356
359
  transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), border-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), box-shadow var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
357
- padding: 5px 10px;
358
- line-height: 1;
360
+ padding: .375rem .625rem;
359
361
  display: inline-flex;
360
- box-shadow: 0 1px 1px #0000000a;
361
362
  }
362
363
 
363
364
  .btn-evRVlh:hover {
364
- background-color: var(--c15t-surface-hover, #f7f7f7);
365
+ background-color: var(--c15t-devtools-surface-subtle, #f7f7f7);
365
366
  border-color: var(--c15t-border-hover, #c9c9c9);
366
- box-shadow: 0 2px 6px #00000014;
367
+ box-shadow: var(--c15t-shadow-md, 0 4px 12px #00000014);
367
368
  }
368
369
 
369
370
  .btn-evRVlh:focus-visible {
370
- outline: 2px solid var(--c15t-primary, #335cff);
371
- outline-offset: 1px;
371
+ box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000000d), 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
372
+ outline: none;
372
373
  }
373
374
 
374
375
  .btn-evRVlh:active {
375
- box-shadow: 0 1px 2px #00000014;
376
+ box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000000d);
377
+ transform: scale(.98);
376
378
  }
377
379
 
378
380
  .btn-evRVlh:disabled {
@@ -385,6 +387,7 @@ var __webpack_modules__ = {
385
387
  background-color: var(--c15t-primary, #335cff);
386
388
  border-color: var(--c15t-primary, #335cff);
387
389
  color: var(--c15t-text-on-primary, #fff);
390
+ box-shadow: none;
388
391
  }
389
392
 
390
393
  .btnPrimary-dA6nqY:hover {
@@ -396,6 +399,7 @@ var __webpack_modules__ = {
396
399
  background-color: var(--c15t-devtools-badge-error, #ef4343);
397
400
  border-color: var(--c15t-devtools-badge-error, #ef4343);
398
401
  color: var(--c15t-text-on-primary, #fff);
402
+ box-shadow: none;
399
403
  }
400
404
 
401
405
  .btnDanger-eDnqOX:hover {
@@ -404,10 +408,10 @@ var __webpack_modules__ = {
404
408
  }
405
409
 
406
410
  .btnSmall-TjXoqZ {
411
+ min-height: 1.75rem;
412
+ font-size: var(--c15t-devtools-font-size-xs, .75rem);
407
413
  border-radius: var(--c15t-radius-sm, .375rem);
408
- min-height: 26px;
409
- padding: 3px 8px;
410
- font-size: 11px;
414
+ padding: .25rem .5rem;
411
415
  }
412
416
 
413
417
  .btnIcon-fiYQAh {
@@ -417,19 +421,22 @@ var __webpack_modules__ = {
417
421
  }
418
422
 
419
423
  .input-IeTcCs {
420
- width: 100%;
421
- padding: var(--c15t-space-xs, .25rem) var(--c15t-space-sm, .5rem);
422
- border: 1px solid var(--c15t-border, #e3e3e3);
424
+ border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
423
425
  border-radius: var(--c15t-radius-md, .5rem);
424
- background-color: var(--c15t-surface, #fff);
426
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
427
+ width: 100%;
428
+ min-height: 2rem;
425
429
  color: var(--c15t-text, #171717);
426
- font-family: inherit;
427
- font-size: var(--c15t-font-size-sm, .875rem);
428
- transition: border-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
430
+ font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
431
+ font-size: var(--c15t-devtools-font-size-xs, .75rem);
432
+ line-height: var(--c15t-line-height-tight, 1.25);
433
+ transition: border-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), box-shadow var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
434
+ padding: .375rem .625rem;
429
435
  }
430
436
 
431
437
  .input-IeTcCs:focus {
432
- border-color: var(--c15t-primary, #335cff);
438
+ border-color: var(--c15t-devtools-focus-ring, #335cff);
439
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--c15t-devtools-focus-ring, #335cff) 25%, transparent);
433
440
  outline: none;
434
441
  }
435
442
 
@@ -438,30 +445,35 @@ var __webpack_modules__ = {
438
445
  }
439
446
 
440
447
  .inputSmall-pJyXcL {
441
- padding: 2px var(--c15t-space-xs, .25rem);
448
+ min-height: 1.625rem;
442
449
  font-size: var(--c15t-devtools-font-size-xs, .75rem);
450
+ padding: .25rem .4375rem;
443
451
  }
444
452
 
445
453
  .select-byJ1WM {
446
- width: 100%;
447
- padding: var(--c15t-space-xs, .25rem) var(--c15t-space-sm, .5rem);
448
- border: 1px solid var(--c15t-border, #e3e3e3);
454
+ border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
449
455
  border-radius: var(--c15t-radius-md, .5rem);
450
- background-color: var(--c15t-surface, #fff);
456
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
457
+ width: 100%;
458
+ min-height: 2rem;
451
459
  color: var(--c15t-text, #171717);
452
- font-family: inherit;
460
+ font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
453
461
  font-size: var(--c15t-devtools-font-size-xs, .75rem);
462
+ line-height: var(--c15t-line-height-tight, 1.25);
454
463
  cursor: pointer;
464
+ transition: border-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), box-shadow var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
465
+ padding: .375rem .625rem;
455
466
  }
456
467
 
457
468
  .select-byJ1WM:focus {
458
- border-color: var(--c15t-primary, #335cff);
469
+ border-color: var(--c15t-devtools-focus-ring, #335cff);
470
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--c15t-devtools-focus-ring, #335cff) 25%, transparent);
459
471
  outline: none;
460
472
  }
461
473
 
462
474
  .grid-LlrmEz {
463
475
  gap: var(--c15t-space-sm, .5rem);
464
- padding: var(--c15t-space-sm, .5rem) var(--c15t-space-md, 1rem);
476
+ padding: var(--c15t-space-md, 1rem);
465
477
  display: grid;
466
478
  }
467
479
 
@@ -474,42 +486,51 @@ var __webpack_modules__ = {
474
486
  }
475
487
 
476
488
  .gridCard-Qm5xxI {
477
- padding: var(--c15t-space-sm, .5rem) var(--c15t-space-md, .75rem);
478
- border: 1px solid var(--c15t-border, #e3e3e3);
479
- border-radius: var(--c15t-radius-md, .5rem);
480
- background-color: var(--c15t-surface, #fff);
481
- transition: border-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
482
489
  justify-content: space-between;
483
490
  align-items: center;
491
+ gap: var(--c15t-space-sm, .5rem);
492
+ border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
493
+ border-radius: var(--c15t-radius-md, .5rem);
494
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
495
+ min-height: 2.75rem;
496
+ box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000000d);
497
+ transition: border-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
498
+ padding: .5625rem .75rem;
484
499
  display: flex;
485
500
  }
486
501
 
487
502
  .gridCard-Qm5xxI:hover {
488
503
  border-color: var(--c15t-border-hover, #c9c9c9);
504
+ background-color: var(--c15t-devtools-surface-subtle, #fafafa);
489
505
  }
490
506
 
491
507
  .gridCardTitle-HjXETp {
492
508
  font-size: var(--c15t-devtools-font-size-xs, .75rem);
493
509
  font-weight: var(--c15t-font-weight-medium, 500);
494
510
  color: var(--c15t-text, #171717);
511
+ line-height: var(--c15t-line-height-tight, 1.25);
495
512
  }
496
513
 
497
514
  .listItem-XUKGIo {
498
- padding: var(--c15t-space-xs, .25rem) var(--c15t-space-md, 1rem);
499
- border-bottom: 1px solid var(--c15t-border, #e3e3e3);
500
515
  justify-content: space-between;
501
516
  align-items: center;
517
+ gap: var(--c15t-space-sm, .5rem);
518
+ border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
519
+ border-radius: var(--c15t-radius-md, .5rem);
520
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
521
+ margin-bottom: .375rem;
522
+ padding: .625rem .75rem;
502
523
  display: flex;
503
524
  }
504
525
 
505
526
  .listItem-XUKGIo:last-child {
506
- border-bottom: none;
527
+ margin-bottom: 0;
507
528
  }
508
529
 
509
530
  .listItemContent-WDBF1N {
510
531
  flex-direction: column;
511
532
  flex: 1;
512
- gap: 2px;
533
+ gap: .1875rem;
513
534
  min-width: 0;
514
535
  display: flex;
515
536
  }
@@ -523,6 +544,7 @@ var __webpack_modules__ = {
523
544
  .listItemDescription-E6JHyZ {
524
545
  font-size: var(--c15t-devtools-font-size-xs, .75rem);
525
546
  color: var(--c15t-text-muted, #737373);
547
+ line-height: var(--c15t-line-height-tight, 1.25);
526
548
  text-overflow: ellipsis;
527
549
  white-space: nowrap;
528
550
  overflow: hidden;
@@ -536,8 +558,8 @@ var __webpack_modules__ = {
536
558
  }
537
559
 
538
560
  .section-a197cB {
539
- padding: var(--c15t-space-sm, .5rem) var(--c15t-space-md, 1rem);
540
- border-bottom: 1px solid var(--c15t-border, #e3e3e3);
561
+ border-bottom: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
562
+ padding: .75rem 1rem;
541
563
  }
542
564
 
543
565
  .section-a197cB:last-child {
@@ -545,9 +567,10 @@ var __webpack_modules__ = {
545
567
  }
546
568
 
547
569
  .sectionHeader-Xcljcw {
548
- margin-bottom: var(--c15t-space-sm, .5rem);
549
570
  justify-content: space-between;
550
571
  align-items: center;
572
+ gap: .5rem;
573
+ margin-bottom: .625rem;
551
574
  display: flex;
552
575
  }
553
576
 
@@ -556,47 +579,49 @@ var __webpack_modules__ = {
556
579
  font-weight: var(--c15t-font-weight-semibold, 600);
557
580
  color: var(--c15t-text-muted, #737373);
558
581
  text-transform: uppercase;
559
- letter-spacing: .5px;
582
+ letter-spacing: .04em;
560
583
  }
561
584
 
562
585
  .overrideField-keNdpJ {
563
586
  flex-direction: column;
564
- gap: 3px;
587
+ gap: .3125rem;
565
588
  margin-bottom: 0;
566
589
  display: flex;
567
590
  }
568
591
 
569
592
  .overrideLabel-ApMoTw {
593
+ font-size: var(--c15t-devtools-font-size-xs, .75rem);
594
+ font-weight: var(--c15t-font-weight-semibold, 600);
570
595
  color: var(--c15t-text-muted, #737373);
571
- font-size: 11px;
572
- font-weight: 600;
596
+ line-height: var(--c15t-line-height-tight, 1.25);
573
597
  }
574
598
 
575
599
  .overrideHint-yCfwGt {
576
- color: var(--c15t-devtools-text-muted, #737373);
577
- margin-top: 6px;
578
- font-size: 11px;
600
+ font-size: var(--c15t-devtools-font-size-xs, .75rem);
601
+ color: var(--c15t-text-muted, #737373);
602
+ line-height: var(--c15t-line-height-tight, 1.25);
603
+ margin-top: .5rem;
579
604
  }
580
605
 
581
606
  .overrideActions-imdcn7 {
582
- border-top: 1px dashed var(--c15t-border, #e3e3e3);
607
+ border-top: 1px dashed var(--c15t-devtools-border-strong, #e3e3e3);
583
608
  justify-content: space-between;
584
609
  align-items: center;
585
- gap: 8px;
586
- margin-top: 8px;
587
- padding-top: 8px;
610
+ gap: .5rem;
611
+ margin-top: .625rem;
612
+ padding-top: .625rem;
588
613
  display: flex;
589
614
  }
590
615
 
591
616
  .overrideActionButtons-gYOx1e {
592
617
  flex-wrap: wrap;
593
- gap: 6px;
618
+ gap: .375rem;
594
619
  display: flex;
595
620
  }
596
621
 
597
622
  .overrideStatus-sty_qS {
623
+ font-size: var(--c15t-devtools-font-size-xs, .75rem);
598
624
  color: var(--c15t-text-muted, #737373);
599
- font-size: 11px;
600
625
  }
601
626
 
602
627
  .overrideStatusDirty-OUdDMw {
@@ -604,9 +629,10 @@ var __webpack_modules__ = {
604
629
  }
605
630
 
606
631
  .infoRow-RlB_0h {
607
- padding: var(--c15t-space-xs, .25rem) 0;
608
632
  justify-content: space-between;
609
633
  align-items: center;
634
+ gap: .5rem;
635
+ padding: .25rem 0;
610
636
  display: flex;
611
637
  }
612
638
 
@@ -619,6 +645,7 @@ var __webpack_modules__ = {
619
645
  font-size: var(--c15t-devtools-font-size-xs, .75rem);
620
646
  font-weight: var(--c15t-font-weight-medium, 500);
621
647
  color: var(--c15t-text, #171717);
648
+ font-variant-numeric: tabular-nums;
622
649
  font-family: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;
623
650
  }
624
651
 
@@ -629,18 +656,27 @@ var __webpack_modules__ = {
629
656
  flex-direction: column;
630
657
  justify-content: center;
631
658
  align-items: center;
659
+ gap: .375rem;
632
660
  display: flex;
633
661
  }
634
662
 
635
663
  .emptyStateIcon-WHFkX8 {
664
+ opacity: .55;
636
665
  width: 32px;
637
666
  height: 32px;
638
- margin-bottom: var(--c15t-space-sm, .5rem);
639
- opacity: .5;
640
667
  }
641
668
 
642
669
  .emptyStateText-TaLvAJ {
643
670
  font-size: var(--c15t-font-size-sm, .875rem);
671
+ line-height: var(--c15t-line-height-normal, 1.5);
672
+ }
673
+
674
+ .disconnectedState-dOtZBG {
675
+ padding: var(--c15t-space-xl, 2rem);
676
+ text-align: center;
677
+ font-size: var(--c15t-font-size-sm, .875rem);
678
+ color: var(--c15t-text-muted, #737373);
679
+ line-height: var(--c15t-line-height-normal, 1.5);
644
680
  }
645
681
 
646
682
  @media (prefers-reduced-motion: reduce) {
@@ -707,7 +743,8 @@ var __webpack_modules__ = {
707
743
  infoValue: "infoValue-flMl_e",
708
744
  emptyState: "emptyState-QcmzTQ",
709
745
  emptyStateIcon: "emptyStateIcon-WHFkX8",
710
- emptyStateText: "emptyStateText-TaLvAJ"
746
+ emptyStateText: "emptyStateText-TaLvAJ",
747
+ disconnectedState: "disconnectedState-dOtZBG"
711
748
  };
712
749
  const __rspack_default_export = ___CSS_LOADER_EXPORT___;
713
750
  },
@@ -736,9 +773,9 @@ var __webpack_modules__ = {
736
773
  .floatingButton-Gw8MtJ {
737
774
  width: var(--c15t-devtools-button-size, 40px);
738
775
  height: var(--c15t-devtools-button-size, 40px);
739
- border: 1px solid var(--c15t-border, #e3e3e3);
776
+ border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
740
777
  border-radius: var(--c15t-radius-full, 9999px);
741
- background-color: var(--c15t-surface, #fff);
778
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
742
779
  box-shadow: var(--c15t-shadow-lg, 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a);
743
780
  cursor: grab;
744
781
  z-index: var(--c15t-devtools-z-index, 99999);
@@ -766,13 +803,13 @@ var __webpack_modules__ = {
766
803
  }
767
804
 
768
805
  .floatingButton-Gw8MtJ:focus-visible {
769
- outline: 2px solid var(--c15t-primary, #335cff);
770
- outline-offset: 2px;
806
+ box-shadow: var(--c15t-shadow-lg, 0 8px 24px #0000001f), 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
807
+ outline: none;
771
808
  }
772
809
 
773
810
  .floatingButton-Gw8MtJ:active {
774
811
  cursor: grabbing;
775
- transform: scale(1.02);
812
+ transform: scale(.98);
776
813
  }
777
814
 
778
815
  .floatingButtonIcon-cHWefk {
@@ -813,6 +850,7 @@ var __webpack_modules__ = {
813
850
 
814
851
  .backdrop-LhVMB5 {
815
852
  background-color: var(--c15t-overlay, #00000080);
853
+ backdrop-filter: blur(1px);
816
854
  z-index: calc(var(--c15t-devtools-z-index, 99999) + 1);
817
855
  position: fixed;
818
856
  inset: 0;
@@ -821,10 +859,10 @@ var __webpack_modules__ = {
821
859
  .panel-jtWove {
822
860
  width: var(--c15t-devtools-panel-width, 480px);
823
861
  max-height: var(--c15t-devtools-panel-max-height, 560px);
824
- background-color: var(--c15t-surface, #fff);
825
- border: 1px solid var(--c15t-border, #e3e3e3);
862
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
863
+ border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
826
864
  border-radius: var(--c15t-radius-lg, .75rem);
827
- box-shadow: var(--c15t-shadow-lg, 0 8px 24px #0000001f);
865
+ box-shadow: var(--c15t-shadow-lg, 0 10px 28px #00000029);
828
866
  z-index: calc(var(--c15t-devtools-z-index, 99999) + 2);
829
867
  flex-direction: column;
830
868
  display: flex;
@@ -857,11 +895,11 @@ var __webpack_modules__ = {
857
895
  }
858
896
 
859
897
  .header-xluoTr {
860
- padding: var(--c15t-space-sm, .5rem) var(--c15t-space-md, 1rem);
861
- border-bottom: 1px solid var(--c15t-border, #e3e3e3);
898
+ border-bottom: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
862
899
  background-color: var(--c15t-devtools-surface-muted, #f5f5f5);
863
900
  justify-content: space-between;
864
901
  align-items: center;
902
+ padding: .6875rem .875rem;
865
903
  display: flex;
866
904
  }
867
905
 
@@ -870,6 +908,7 @@ var __webpack_modules__ = {
870
908
  gap: var(--c15t-space-sm, .5rem);
871
909
  font-size: var(--c15t-font-size-sm, .875rem);
872
910
  font-weight: var(--c15t-font-weight-semibold, 600);
911
+ line-height: var(--c15t-line-height-tight, 1.25);
873
912
  color: var(--c15t-text, #171717);
874
913
  display: flex;
875
914
  }
@@ -881,9 +920,9 @@ var __webpack_modules__ = {
881
920
  }
882
921
 
883
922
  .closeButton-Yto0Nb {
884
- border-radius: var(--c15t-radius-sm, .25rem);
885
- width: 28px;
886
- height: 28px;
923
+ border-radius: var(--c15t-radius-md, .5rem);
924
+ width: 2rem;
925
+ height: 2rem;
887
926
  color: var(--c15t-text-muted, #737373);
888
927
  cursor: pointer;
889
928
  transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
@@ -896,13 +935,13 @@ var __webpack_modules__ = {
896
935
  }
897
936
 
898
937
  .closeButton-Yto0Nb:hover {
899
- background-color: var(--c15t-surface-hover, #f7f7f7);
938
+ background-color: var(--c15t-devtools-surface-subtle, #f7f7f7);
900
939
  color: var(--c15t-text, #171717);
901
940
  }
902
941
 
903
942
  .closeButton-Yto0Nb:focus-visible {
904
- outline: 2px solid var(--c15t-primary, #335cff);
905
- outline-offset: 1px;
943
+ box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
944
+ outline: none;
906
945
  }
907
946
 
908
947
  .closeButtonIcon-fVlR1I {
@@ -910,33 +949,71 @@ var __webpack_modules__ = {
910
949
  height: 16px;
911
950
  }
912
951
 
952
+ .inlineActionButton-Ky8BmN {
953
+ border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
954
+ border-radius: var(--c15t-radius-sm, .375rem);
955
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
956
+ min-height: 1.625rem;
957
+ color: var(--c15t-text, #171717);
958
+ font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
959
+ font-size: var(--c15t-devtools-font-size-xs, .75rem);
960
+ font-weight: var(--c15t-font-weight-medium, 500);
961
+ line-height: var(--c15t-line-height-tight, 1.25);
962
+ cursor: pointer;
963
+ transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), border-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
964
+ justify-content: center;
965
+ align-items: center;
966
+ padding: .25rem .5rem;
967
+ display: inline-flex;
968
+ }
969
+
970
+ .inlineActionButton-Ky8BmN:hover {
971
+ background-color: var(--c15t-devtools-surface-subtle, #f7f7f7);
972
+ border-color: var(--c15t-border-hover, #c9c9c9);
973
+ }
974
+
975
+ .inlineActionButton-Ky8BmN:focus-visible {
976
+ box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
977
+ outline: none;
978
+ }
979
+
913
980
  .content-yDMYfG {
981
+ scrollbar-gutter: stable;
914
982
  overscroll-behavior: contain;
915
983
  -webkit-overflow-scrolling: touch;
984
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
916
985
  flex: auto;
917
986
  min-height: 200px;
918
- overflow: hidden auto;
987
+ overflow: hidden scroll;
919
988
  }
920
989
 
921
990
  .footer-ESbmwQ {
922
- padding: var(--c15t-space-xs, .25rem) var(--c15t-space-md, 1rem);
923
- border-top: 1px solid var(--c15t-border, #e3e3e3);
991
+ border-top: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
924
992
  background-color: var(--c15t-devtools-surface-muted, #f5f5f5);
925
993
  font-size: var(--c15t-devtools-font-size-xs, .75rem);
926
994
  color: var(--c15t-text-muted, #737373);
927
995
  justify-content: space-between;
928
996
  align-items: center;
997
+ gap: .5rem;
998
+ padding: .5rem .75rem;
929
999
  display: flex;
930
1000
  }
931
1001
 
932
1002
  .footerStatus-rlb99A {
933
1003
  align-items: center;
934
- gap: var(--c15t-space-xs, .25rem);
1004
+ gap: .375rem;
1005
+ min-width: 0;
935
1006
  display: flex;
936
1007
  }
937
1008
 
1009
+ .footerMeta-Vdtxdk {
1010
+ opacity: .75;
1011
+ white-space: nowrap;
1012
+ }
1013
+
938
1014
  .statusDot-hYJoej {
939
1015
  border-radius: var(--c15t-radius-full, 9999px);
1016
+ flex-shrink: 0;
940
1017
  width: 6px;
941
1018
  height: 6px;
942
1019
  }
@@ -975,6 +1052,7 @@ var __webpack_modules__ = {
975
1052
  font-size: var(--c15t-font-size-sm, .875rem);
976
1053
  color: var(--c15t-text-muted, #737373);
977
1054
  max-width: 280px;
1055
+ line-height: var(--c15t-line-height-normal, 1.5);
978
1056
  }
979
1057
 
980
1058
  @media (prefers-reduced-motion: reduce) {
@@ -991,17 +1069,17 @@ var __webpack_modules__ = {
991
1069
  }
992
1070
 
993
1071
  .dropdownMenu-aKK18l {
994
- min-width: 200px;
995
- padding: var(--c15t-space-xs, .25rem);
996
- border: 1px solid var(--c15t-border, #e3e3e3);
1072
+ border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
997
1073
  border-radius: var(--c15t-radius-lg, .75rem);
998
- background-color: var(--c15t-surface, #fff);
1074
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
1075
+ min-width: 200px;
999
1076
  box-shadow: var(--c15t-shadow-lg, 0 8px 24px #0000001f);
1000
1077
  z-index: calc(var(--c15t-devtools-z-index, 99999) + 1);
1001
1078
  opacity: 0;
1002
1079
  transform-origin: 0 100%;
1003
1080
  pointer-events: none;
1004
1081
  transition: opacity var(--c15t-duration-fast, .1s) var(--c15t-easing-out, cubic-bezier(.215, .61, .355, 1)), transform var(--c15t-duration-fast, .1s) var(--c15t-easing-out, cubic-bezier(.215, .61, .355, 1));
1082
+ padding: .375rem;
1005
1083
  position: fixed;
1006
1084
  transform: scale(.95)translateY(8px);
1007
1085
  }
@@ -1029,34 +1107,35 @@ var __webpack_modules__ = {
1029
1107
  }
1030
1108
 
1031
1109
  .menuItem-kBbHRP {
1032
- align-items: center;
1033
- gap: var(--c15t-space-sm, .5rem);
1034
- width: 100%;
1035
- padding: var(--c15t-space-sm, .5rem) var(--c15t-space-md, .75rem);
1036
1110
  border-radius: var(--c15t-radius-md, .5rem);
1111
+ width: 100%;
1037
1112
  color: var(--c15t-text, #171717);
1038
- font-size: var(--c15t-font-size-sm, .875rem);
1113
+ font-size: var(--c15t-devtools-font-size-xs, .75rem);
1039
1114
  font-weight: var(--c15t-font-weight-medium, 500);
1115
+ line-height: var(--c15t-line-height-tight, 1.25);
1040
1116
  text-align: left;
1041
1117
  cursor: pointer;
1042
1118
  transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
1043
1119
  background: none;
1044
1120
  border: none;
1121
+ align-items: center;
1122
+ gap: .625rem;
1123
+ padding: .5rem .625rem;
1045
1124
  display: flex;
1046
1125
  }
1047
1126
 
1048
1127
  .menuItem-kBbHRP:hover {
1049
- background-color: var(--c15t-surface-hover, #f2f2f2);
1128
+ background-color: var(--c15t-devtools-surface-subtle, #f2f2f2);
1050
1129
  }
1051
1130
 
1052
1131
  .menuItem-kBbHRP:focus-visible {
1053
- outline: 2px solid var(--c15t-primary, #335cff);
1054
- outline-offset: -2px;
1132
+ box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
1133
+ outline: none;
1055
1134
  }
1056
1135
 
1057
1136
  .menuItemIcon-P3pP5K {
1058
- width: 20px;
1059
- height: 20px;
1137
+ width: 1rem;
1138
+ height: 1rem;
1060
1139
  color: var(--c15t-text-muted, #737373);
1061
1140
  flex-shrink: 0;
1062
1141
  }
@@ -1069,6 +1148,7 @@ var __webpack_modules__ = {
1069
1148
  font-size: var(--c15t-devtools-font-size-xs, .75rem);
1070
1149
  color: var(--c15t-text-muted, #737373);
1071
1150
  font-weight: var(--c15t-font-weight-normal, 400);
1151
+ margin-top: .125rem;
1072
1152
  }
1073
1153
 
1074
1154
  .menuItemContent-hBlruV {
@@ -1084,8 +1164,8 @@ var __webpack_modules__ = {
1084
1164
  .menuItemToggleTrack-gDp_f3 {
1085
1165
  background-color: var(--c15t-switch-track, #d9d9d9);
1086
1166
  border-radius: var(--c15t-radius-full, 9999px);
1087
- width: 36px;
1088
- height: 20px;
1167
+ width: 2rem;
1168
+ height: 1.25rem;
1089
1169
  transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
1090
1170
  position: relative;
1091
1171
  }
@@ -1093,21 +1173,22 @@ var __webpack_modules__ = {
1093
1173
  .menuItemToggleThumb-ioqqyc {
1094
1174
  background-color: var(--c15t-switch-thumb, #fff);
1095
1175
  border-radius: var(--c15t-radius-full, 9999px);
1096
- width: 16px;
1097
- height: 16px;
1098
- box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000001a);
1176
+ width: .75rem;
1177
+ height: .75rem;
1178
+ box-shadow: 0 0 0 1px var(--c15t-border, #e3e3e3);
1099
1179
  transition: transform var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
1100
1180
  position: absolute;
1101
- top: 2px;
1181
+ top: 50%;
1102
1182
  left: 2px;
1183
+ transform: translateY(-50%);
1103
1184
  }
1104
1185
 
1105
1186
  .menuItemToggleChecked-K3BPtk .menuItemToggleTrack-gDp_f3 {
1106
- background-color: var(--c15t-switch-track-checked, #335cff);
1187
+ background-color: var(--c15t-switch-track-active, #335cff);
1107
1188
  }
1108
1189
 
1109
1190
  .menuItemToggleChecked-K3BPtk .menuItemToggleThumb-ioqqyc {
1110
- transform: translateX(16px);
1191
+ transform: translate(1rem, -50%);
1111
1192
  }
1112
1193
 
1113
1194
  .menuDivider-JIBdhU {
@@ -1143,9 +1224,11 @@ var __webpack_modules__ = {
1143
1224
  headerLogo: "headerLogo-PxJ_w1",
1144
1225
  closeButton: "closeButton-Yto0Nb",
1145
1226
  closeButtonIcon: "closeButtonIcon-fVlR1I",
1227
+ inlineActionButton: "inlineActionButton-Ky8BmN",
1146
1228
  content: "content-yDMYfG",
1147
1229
  footer: "footer-ESbmwQ",
1148
1230
  footerStatus: "footerStatus-rlb99A",
1231
+ footerMeta: "footerMeta-Vdtxdk",
1149
1232
  statusDot: "statusDot-hYJoej",
1150
1233
  statusConnected: "statusConnected-hPSUgS",
1151
1234
  statusDisconnected: "statusDisconnected-HIpcee",
@@ -1184,62 +1267,63 @@ var __webpack_modules__ = {
1184
1267
  ___CSS_LOADER_EXPORT___.push([
1185
1268
  module.id,
1186
1269
  `.tabList-IyuiBE {
1270
+ border-bottom: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
1271
+ background-color: var(--c15t-devtools-surface-subtle, #fafafa);
1187
1272
  align-items: center;
1188
- gap: var(--c15t-space-xs, .25rem);
1189
- padding: var(--c15t-space-sm, .5rem) var(--c15t-space-sm, .5rem);
1190
- border-bottom: 1px solid var(--c15t-border, #e3e3e3);
1191
- background-color: var(--c15t-surface, #fff);
1192
- scrollbar-width: none;
1193
- -ms-overflow-style: none;
1194
- scroll-padding-inline-end: var(--c15t-space-sm, .5rem);
1273
+ gap: .375rem;
1274
+ padding: .75rem;
1195
1275
  display: flex;
1196
- overflow-x: auto;
1197
1276
  }
1198
1277
 
1199
- .tabList-IyuiBE:after {
1200
- content: "";
1201
- flex: 0 0 var(--c15t-space-sm, .5rem);
1202
- }
1203
-
1204
- .tabList-IyuiBE::-webkit-scrollbar {
1205
- display: none;
1278
+ .tabStrip-_KrWe4 {
1279
+ align-items: center;
1280
+ gap: var(--c15t-space-xs, .25rem);
1281
+ flex: auto;
1282
+ min-width: 0;
1283
+ display: flex;
1284
+ overflow: hidden;
1206
1285
  }
1207
1286
 
1208
1287
  .tab-yfDEqg {
1209
- align-items: center;
1210
- gap: var(--c15t-space-xs, .25rem);
1211
1288
  border-radius: var(--c15t-radius-md, .5rem);
1289
+ min-height: 1.875rem;
1212
1290
  color: var(--c15t-text-muted, #737373);
1213
- font-family: inherit;
1214
- font-size: 11px;
1291
+ font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
1292
+ font-size: var(--c15t-devtools-font-size-xs, .75rem);
1215
1293
  font-weight: var(--c15t-font-weight-medium, 500);
1294
+ line-height: var(--c15t-line-height-tight, 1.25);
1216
1295
  cursor: pointer;
1217
1296
  white-space: nowrap;
1218
- transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
1297
+ transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), border-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), box-shadow var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
1219
1298
  background-color: #0000;
1220
- border: none;
1221
- padding: 3px 7px;
1299
+ border: 1px solid #0000;
1300
+ flex-shrink: 0;
1301
+ align-items: center;
1302
+ gap: .375rem;
1303
+ padding: .25rem .625rem;
1222
1304
  display: flex;
1223
1305
  }
1224
1306
 
1225
1307
  .tab-yfDEqg:hover {
1226
- background-color: var(--c15t-surface-hover, #f7f7f7);
1308
+ background-color: var(--c15t-devtools-surface-muted, #f7f7f7);
1227
1309
  color: var(--c15t-text, #171717);
1228
1310
  }
1229
1311
 
1230
1312
  .tab-yfDEqg:focus-visible {
1231
- outline: 2px solid var(--c15t-primary, #335cff);
1232
- outline-offset: 1px;
1313
+ box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
1314
+ outline: none;
1233
1315
  }
1234
1316
 
1235
1317
  .tabActive-r4hing {
1236
- background-color: var(--c15t-primary, #335cff);
1237
- color: var(--c15t-text-on-primary, #fff);
1318
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
1319
+ border-color: var(--c15t-devtools-border-strong, #e3e3e3);
1320
+ color: var(--c15t-text, #171717);
1321
+ box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000000d);
1238
1322
  }
1239
1323
 
1240
1324
  .tabActive-r4hing:hover {
1241
- background-color: var(--c15t-primary-hover, #03f);
1242
- color: var(--c15t-text-on-primary, #fff);
1325
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
1326
+ color: var(--c15t-text, #171717);
1243
1327
  }
1244
1328
 
1245
1329
  .tabIcon-U9tnu0 {
@@ -1248,6 +1332,131 @@ var __webpack_modules__ = {
1248
1332
  height: 14px;
1249
1333
  }
1250
1334
 
1335
+ .tabHidden-HBXYSd {
1336
+ display: none;
1337
+ }
1338
+
1339
+ .overflowContainer-TTw9DO {
1340
+ flex-shrink: 0;
1341
+ position: relative;
1342
+ }
1343
+
1344
+ .overflowContainerHidden-sQa_XZ {
1345
+ display: none;
1346
+ }
1347
+
1348
+ .overflowButton-tKq4FF {
1349
+ border-radius: var(--c15t-radius-md, .5rem);
1350
+ width: 1.875rem;
1351
+ height: 1.875rem;
1352
+ color: var(--c15t-text-muted, #737373);
1353
+ cursor: pointer;
1354
+ transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), border-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
1355
+ background-color: #0000;
1356
+ border: 1px solid #0000;
1357
+ justify-content: center;
1358
+ align-items: center;
1359
+ padding: 0;
1360
+ display: inline-flex;
1361
+ }
1362
+
1363
+ .overflowButton-tKq4FF:hover {
1364
+ background-color: var(--c15t-devtools-surface-muted, #f7f7f7);
1365
+ color: var(--c15t-text, #171717);
1366
+ }
1367
+
1368
+ .overflowButton-tKq4FF:focus-visible {
1369
+ box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
1370
+ outline: none;
1371
+ }
1372
+
1373
+ .overflowButtonIcon-FSurfC {
1374
+ justify-content: center;
1375
+ align-items: center;
1376
+ width: 14px;
1377
+ height: 14px;
1378
+ display: inline-flex;
1379
+ }
1380
+
1381
+ .overflowMenu-TST0eZ {
1382
+ border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
1383
+ border-radius: var(--c15t-radius-md, .5rem);
1384
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
1385
+ min-width: 10rem;
1386
+ box-shadow: var(--c15t-shadow-md, 0 4px 12px #00000014);
1387
+ opacity: 0;
1388
+ transform-origin: 100% 0;
1389
+ pointer-events: none;
1390
+ z-index: 10;
1391
+ transition: opacity var(--c15t-duration-fast, .1s) var(--c15t-easing-out, cubic-bezier(.215, .61, .355, 1)), transform var(--c15t-duration-fast, .1s) var(--c15t-easing-out, cubic-bezier(.215, .61, .355, 1));
1392
+ flex-direction: column;
1393
+ gap: .125rem;
1394
+ padding: .3125rem;
1395
+ display: flex;
1396
+ position: absolute;
1397
+ top: calc(100% + .375rem);
1398
+ right: 0;
1399
+ transform: translateY(-4px)scale(.98);
1400
+ }
1401
+
1402
+ .overflowMenu-TST0eZ[data-state="open"] {
1403
+ opacity: 1;
1404
+ pointer-events: auto;
1405
+ transform: translateY(0)scale(1);
1406
+ }
1407
+
1408
+ .overflowItem-y5Pz7k {
1409
+ border-radius: var(--c15t-radius-sm, .375rem);
1410
+ min-height: 1.75rem;
1411
+ color: var(--c15t-text, #171717);
1412
+ font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
1413
+ font-size: var(--c15t-devtools-font-size-xs, .75rem);
1414
+ font-weight: var(--c15t-font-weight-medium, 500);
1415
+ line-height: var(--c15t-line-height-tight, 1.25);
1416
+ text-align: left;
1417
+ cursor: pointer;
1418
+ white-space: nowrap;
1419
+ transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1)), color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
1420
+ background-color: #0000;
1421
+ border: none;
1422
+ align-items: center;
1423
+ gap: .5rem;
1424
+ padding: .3125rem .5rem;
1425
+ display: inline-flex;
1426
+ }
1427
+
1428
+ .overflowItem-y5Pz7k:hover {
1429
+ background-color: var(--c15t-devtools-surface-subtle, #fafafa);
1430
+ }
1431
+
1432
+ .overflowItem-y5Pz7k:focus-visible {
1433
+ box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
1434
+ outline: none;
1435
+ }
1436
+
1437
+ .overflowItemActive-mzVG1T {
1438
+ background-color: var(--c15t-devtools-accent-soft, #ebefff);
1439
+ color: var(--c15t-text, #171717);
1440
+ }
1441
+
1442
+ .overflowItemDisabled-dcHX3K {
1443
+ opacity: .5;
1444
+ cursor: not-allowed;
1445
+ }
1446
+
1447
+ .overflowItemIcon-fz291V {
1448
+ flex-shrink: 0;
1449
+ justify-content: center;
1450
+ align-items: center;
1451
+ width: 14px;
1452
+ height: 14px;
1453
+ display: inline-flex;
1454
+ }
1455
+
1456
+ .overflowItemHidden-k4aawi {
1457
+ display: none;
1458
+ }
1459
+
1251
1460
  .tabDisabled-lDuv5l {
1252
1461
  opacity: .5;
1253
1462
  cursor: not-allowed;
@@ -1268,7 +1477,7 @@ var __webpack_modules__ = {
1268
1477
  }
1269
1478
 
1270
1479
  @media (prefers-reduced-motion: reduce) {
1271
- .tab-yfDEqg {
1480
+ .tab-yfDEqg, .overflowButton-tKq4FF, .overflowMenu-TST0eZ, .overflowItem-y5Pz7k {
1272
1481
  transition: none;
1273
1482
  }
1274
1483
  }
@@ -1284,9 +1493,21 @@ var __webpack_modules__ = {
1284
1493
  ]);
1285
1494
  ___CSS_LOADER_EXPORT___.locals = {
1286
1495
  tabList: "tabList-IyuiBE",
1496
+ tabStrip: "tabStrip-_KrWe4",
1287
1497
  tab: "tab-yfDEqg",
1288
1498
  tabActive: "tabActive-r4hing",
1289
1499
  tabIcon: "tabIcon-U9tnu0",
1500
+ tabHidden: "tabHidden-HBXYSd",
1501
+ overflowContainer: "overflowContainer-TTw9DO",
1502
+ overflowContainerHidden: "overflowContainerHidden-sQa_XZ",
1503
+ overflowButton: "overflowButton-tKq4FF",
1504
+ overflowButtonIcon: "overflowButtonIcon-FSurfC",
1505
+ overflowMenu: "overflowMenu-TST0eZ",
1506
+ overflowItem: "overflowItem-y5Pz7k",
1507
+ overflowItemActive: "overflowItemActive-mzVG1T",
1508
+ overflowItemDisabled: "overflowItemDisabled-dcHX3K",
1509
+ overflowItemIcon: "overflowItemIcon-fz291V",
1510
+ overflowItemHidden: "overflowItemHidden-k4aawi",
1290
1511
  tabDisabled: "tabDisabled-lDuv5l",
1291
1512
  tabPanel: "tabPanel-QKO8FX",
1292
1513
  tabPanelActive: "tabPanelActive-mrNlGE"
@@ -1310,6 +1531,15 @@ var __webpack_modules__ = {
1310
1531
  --c15t-devtools-button-size: 40px;
1311
1532
  --c15t-devtools-z-index: 99999;
1312
1533
  --c15t-devtools-surface-muted: var(--c15t-surface-hover, #f7f7f7);
1534
+ --c15t-devtools-surface-subtle: #fafafa;
1535
+ --c15t-devtools-surface-elevated: var(--c15t-surface, #fff);
1536
+ --c15t-devtools-border-strong: var(--c15t-border, #e3e3e3);
1537
+ --c15t-devtools-code-surface: #f7f7f7;
1538
+ --c15t-devtools-accent-soft: #ebefff;
1539
+ --c15t-devtools-focus-ring: var(--c15t-primary, #335cff);
1540
+ --c15t-devtools-text-muted: var(--c15t-text-muted, #737373);
1541
+ --c15t-devtools-font-size-sm: var(--c15t-font-size-sm, .875rem);
1542
+ --c15t-surface-muted: var(--c15t-devtools-surface-muted, #f7f7f7);
1313
1543
  --c15t-devtools-font-size-xs: .75rem;
1314
1544
  --c15t-devtools-badge-success: #21c45d;
1315
1545
  --c15t-devtools-badge-success-bg: #e4fbed;
@@ -1323,8 +1553,37 @@ var __webpack_modules__ = {
1323
1553
  --c15t-devtools-badge-neutral-bg: #f0f0f0;
1324
1554
  }
1325
1555
 
1556
+ :is(:global(.c15t-light), :global(.light)) {
1557
+ --c15t-devtools-surface-muted: var(--c15t-surface-hover, #f7f7f7);
1558
+ --c15t-devtools-surface-subtle: #fafafa;
1559
+ --c15t-devtools-surface-elevated: var(--c15t-surface, #fff);
1560
+ --c15t-devtools-border-strong: var(--c15t-border, #e3e3e3);
1561
+ --c15t-devtools-code-surface: #f7f7f7;
1562
+ --c15t-devtools-accent-soft: #ebefff;
1563
+ --c15t-devtools-badge-success-bg: #e4fbed;
1564
+ --c15t-devtools-badge-error-bg: #fde7e7;
1565
+ --c15t-devtools-badge-warning-bg: #fef7dc;
1566
+ --c15t-devtools-badge-info-bg: #dcebfe;
1567
+ --c15t-devtools-badge-neutral-bg: #f0f0f0;
1568
+ }
1569
+
1570
+ @supports (color: color-mix(in srgb, white, black)) {
1571
+ :root {
1572
+ --c15t-devtools-surface-muted: color-mix(in srgb, var(--c15t-surface-hover, #f7f7f7) 85%, var(--c15t-surface, #fff));
1573
+ --c15t-devtools-surface-subtle: color-mix(in srgb, var(--c15t-surface-hover, #f7f7f7) 55%, var(--c15t-surface, #fff));
1574
+ --c15t-devtools-border-strong: color-mix(in srgb, var(--c15t-border, #e3e3e3) 80%, var(--c15t-text-muted, #737373));
1575
+ --c15t-devtools-code-surface: color-mix(in srgb, var(--c15t-surface-hover, #f7f7f7) 70%, var(--c15t-surface, #fff));
1576
+ --c15t-devtools-accent-soft: color-mix(in srgb, var(--c15t-primary, #335cff) 12%, transparent);
1577
+ }
1578
+ }
1579
+
1326
1580
  :is(:global(.c15t-dark), :global(.dark)) {
1327
1581
  --c15t-devtools-surface-muted: var(--c15t-surface-hover, #292929);
1582
+ --c15t-devtools-surface-subtle: #242424;
1583
+ --c15t-devtools-surface-elevated: var(--c15t-surface, #1a1a1a);
1584
+ --c15t-devtools-border-strong: var(--c15t-border, #3d3d3d);
1585
+ --c15t-devtools-code-surface: #212121;
1586
+ --c15t-devtools-accent-soft: #335cff33;
1328
1587
  --c15t-devtools-badge-success-bg: #21c45d33;
1329
1588
  --c15t-devtools-badge-error-bg: #ef434333;
1330
1589
  --c15t-devtools-badge-warning-bg: #f59f0a33;
@@ -1333,8 +1592,13 @@ var __webpack_modules__ = {
1333
1592
  }
1334
1593
 
1335
1594
  @media (prefers-color-scheme: dark) {
1336
- :root {
1595
+ :global(:root:not(.light):not(.c15t-light)) {
1337
1596
  --c15t-devtools-surface-muted: var(--c15t-surface-hover, #292929);
1597
+ --c15t-devtools-surface-subtle: #242424;
1598
+ --c15t-devtools-surface-elevated: var(--c15t-surface, #1a1a1a);
1599
+ --c15t-devtools-border-strong: var(--c15t-border, #3d3d3d);
1600
+ --c15t-devtools-code-surface: #212121;
1601
+ --c15t-devtools-accent-soft: #335cff33;
1338
1602
  --c15t-devtools-badge-success-bg: #21c45d33;
1339
1603
  --c15t-devtools-badge-error-bg: #ef434333;
1340
1604
  --c15t-devtools-badge-warning-bg: #f59f0a33;
@@ -1724,7 +1988,7 @@ panel_module_options.domAPI = styleDomAPI_default();
1724
1988
  panel_module_options.insertStyleElement = insertStyleElement_default();
1725
1989
  injectStylesIntoStyleTag_default()(panel_module.A, panel_module_options);
1726
1990
  panel_module.A && panel_module.A.locals && panel_module.A.locals;
1727
- '[data-c15t-trigger], [aria-label*="privacy settings"], [aria-label*="preference"]';
1991
+ '[data-c15t-trigger], [aria-label*="privacy settings" i], [aria-label*="preference" i]';
1728
1992
  var tabs_module = __webpack_require__("../../node_modules/.bun/@rsbuild+core@1.6.12/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[1].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[1].use[2]!./src/styles/tabs.module.css");
1729
1993
  var tabs_module_options = {};
1730
1994
  tabs_module_options.styleTagTransform = styleTagTransform_default();
@@ -1759,6 +2023,11 @@ const EVENTS_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
1759
2023
  <path d="M12 20h9"></path>
1760
2024
  <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"></path>
1761
2025
  </svg>`;
2026
+ const MORE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
2027
+ <circle cx="12" cy="5" r="1.75"></circle>
2028
+ <circle cx="12" cy="12" r="1.75"></circle>
2029
+ <circle cx="12" cy="19" r="1.75"></circle>
2030
+ </svg>`;
1762
2031
  const TABS = [
1763
2032
  {
1764
2033
  id: 'location',
@@ -1794,12 +2063,56 @@ const TABS = [
1794
2063
  function tabs_createTabs(options) {
1795
2064
  const { onTabChange, disabledTabs = [] } = options;
1796
2065
  let activeTab = options.activeTab;
2066
+ let isOverflowMenuOpen = false;
2067
+ let visibleTabIds = [];
2068
+ let hiddenTabIds = [];
1797
2069
  const tabButtons = new Map();
2070
+ const overflowButtons = new Map();
1798
2071
  const tabList = renderer_div({
1799
- className: styles_tabs_module.tabList,
2072
+ className: styles_tabs_module.tabList
2073
+ });
2074
+ const tabStrip = renderer_div({
2075
+ className: styles_tabs_module.tabStrip,
1800
2076
  role: 'tablist',
1801
2077
  ariaLabel: 'DevTools tabs'
1802
2078
  });
2079
+ tabList.appendChild(tabStrip);
2080
+ const overflowMenu = renderer_div({
2081
+ className: styles_tabs_module.overflowMenu,
2082
+ role: 'menu',
2083
+ ariaLabel: 'All tabs'
2084
+ });
2085
+ overflowMenu.dataset.state = 'closed';
2086
+ const overflowButton = renderer_button({
2087
+ className: styles_tabs_module.overflowButton,
2088
+ ariaLabel: 'More tabs',
2089
+ ariaExpanded: 'false',
2090
+ onClick: ()=>toggleOverflowMenu(),
2091
+ onKeyDown: (e)=>{
2092
+ if ('ArrowDown' === e.key || 'Enter' === e.key || ' ' === e.key) {
2093
+ e.preventDefault();
2094
+ openOverflowMenu();
2095
+ focusFirstEnabledOverflowItem();
2096
+ }
2097
+ }
2098
+ });
2099
+ overflowButton.setAttribute('aria-haspopup', 'menu');
2100
+ const overflowIcon = renderer_div({
2101
+ className: styles_tabs_module.overflowButtonIcon
2102
+ });
2103
+ overflowIcon.appendChild(renderer_createSvgElement(MORE_ICON, {
2104
+ width: 14,
2105
+ height: 14
2106
+ }));
2107
+ overflowButton.appendChild(overflowIcon);
2108
+ const overflowContainer = renderer_div({
2109
+ className: styles_tabs_module.overflowContainer,
2110
+ children: [
2111
+ overflowButton,
2112
+ overflowMenu
2113
+ ]
2114
+ });
2115
+ tabList.appendChild(overflowContainer);
1803
2116
  for (const tab of TABS){
1804
2117
  const isActive = tab.id === activeTab;
1805
2118
  const isDisabled = disabledTabs.includes(tab.id);
@@ -1813,6 +2126,7 @@ function tabs_createTabs(options) {
1813
2126
  disabled: isDisabled,
1814
2127
  onClick: ()=>{
1815
2128
  if (!isDisabled) {
2129
+ closeOverflowMenu();
1816
2130
  setActiveTab(tab.id);
1817
2131
  onTabChange(tab.id);
1818
2132
  }
@@ -1829,29 +2143,206 @@ function tabs_createTabs(options) {
1829
2143
  tabButton.appendChild(iconWrapper);
1830
2144
  tabButton.appendChild(document.createTextNode(tab.label));
1831
2145
  tabButtons.set(tab.id, tabButton);
1832
- tabList.appendChild(tabButton);
2146
+ tabStrip.appendChild(tabButton);
2147
+ const overflowItem = renderer_button({
2148
+ className: `${styles_tabs_module.overflowItem} ${isActive ? styles_tabs_module.overflowItemActive : ''} ${isDisabled ? styles_tabs_module.overflowItemDisabled : ''}`,
2149
+ role: 'menuitemradio',
2150
+ ariaChecked: isActive ? 'true' : 'false',
2151
+ disabled: isDisabled,
2152
+ onClick: ()=>{
2153
+ if (!isDisabled) {
2154
+ setActiveTab(tab.id);
2155
+ onTabChange(tab.id);
2156
+ closeOverflowMenu();
2157
+ tabButtons.get(tab.id)?.focus();
2158
+ }
2159
+ },
2160
+ onKeyDown: (e)=>handleOverflowKeyDown(e, tab.id)
2161
+ });
2162
+ const overflowItemIcon = renderer_div({
2163
+ className: styles_tabs_module.overflowItemIcon
2164
+ });
2165
+ overflowItemIcon.appendChild(renderer_createSvgElement(tab.icon, {
2166
+ width: 14,
2167
+ height: 14
2168
+ }));
2169
+ overflowItem.appendChild(overflowItemIcon);
2170
+ overflowItem.appendChild(document.createTextNode(tab.label));
2171
+ overflowButtons.set(tab.id, overflowItem);
2172
+ overflowMenu.appendChild(overflowItem);
1833
2173
  }
1834
- function handleKeyDown(e, currentTab) {
1835
- const tabIds = TABS.map((t)=>t.id);
1836
- const enabledTabIds = tabIds.filter((id)=>!disabledTabs.includes(id));
1837
- const currentIndex = enabledTabIds.indexOf(currentTab);
1838
- let newIndex = currentIndex;
1839
- switch(e.key){
1840
- case 'ArrowLeft':
1841
- newIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabIds.length - 1;
1842
- break;
1843
- case 'ArrowRight':
1844
- newIndex = currentIndex < enabledTabIds.length - 1 ? currentIndex + 1 : 0;
1845
- break;
1846
- case 'Home':
1847
- newIndex = 0;
1848
- break;
1849
- case 'End':
1850
- newIndex = enabledTabIds.length - 1;
1851
- break;
1852
- default:
1853
- return;
1854
- }
2174
+ function applyActiveState(tab) {
2175
+ for (const [tabId, tabButton] of tabButtons){
2176
+ const isActive = tabId === tab;
2177
+ if (styles_tabs_module.tabActive) tabButton.classList.toggle(styles_tabs_module.tabActive, isActive);
2178
+ tabButton.setAttribute('aria-selected', isActive ? 'true' : 'false');
2179
+ tabButton.tabIndex = isActive ? 0 : -1;
2180
+ }
2181
+ for (const [tabId, overflowItem] of overflowButtons){
2182
+ const isActive = tabId === tab;
2183
+ if (styles_tabs_module.overflowItemActive) overflowItem.classList.toggle(styles_tabs_module.overflowItemActive, isActive);
2184
+ overflowItem.setAttribute('aria-checked', isActive ? 'true' : 'false');
2185
+ }
2186
+ }
2187
+ function updateVisibleTabs() {
2188
+ const allTabIds = TABS.map((t)=>t.id);
2189
+ const iabEnabled = !disabledTabs.includes('iab');
2190
+ const preferredSecondTab = iabEnabled ? 'iab' : 'consents';
2191
+ const overflowSecondTab = iabEnabled ? 'consents' : 'iab';
2192
+ const showOverflowSecondTabInStrip = activeTab === overflowSecondTab;
2193
+ const stripSecondTab = showOverflowSecondTabInStrip ? overflowSecondTab : preferredSecondTab;
2194
+ const forcedOverflowTab = showOverflowSecondTabInStrip ? preferredSecondTab : overflowSecondTab;
2195
+ const layoutTabIds = [
2196
+ 'location',
2197
+ stripSecondTab,
2198
+ "scripts",
2199
+ 'actions',
2200
+ 'events',
2201
+ forcedOverflowTab
2202
+ ];
2203
+ const forcedOverflowTabIds = new Set();
2204
+ forcedOverflowTabIds.add(forcedOverflowTab);
2205
+ for (const [index, tabId] of layoutTabIds.entries()){
2206
+ const tabButton = tabButtons.get(tabId);
2207
+ if (tabButton) tabButton.style.order = String(index);
2208
+ const overflowItem = overflowButtons.get(tabId);
2209
+ if (overflowItem) overflowItem.style.order = String(index);
2210
+ }
2211
+ for (const tabId of allTabIds){
2212
+ const tabButton = tabButtons.get(tabId);
2213
+ if (tabButton && styles_tabs_module.tabHidden) tabButton.classList.remove(styles_tabs_module.tabHidden);
2214
+ }
2215
+ if (styles_tabs_module.overflowContainerHidden) overflowContainer.classList.remove(styles_tabs_module.overflowContainerHidden);
2216
+ const stripGap = Number.parseFloat(getComputedStyle(tabStrip).gap || '0');
2217
+ const calculateVisibleTabs = (availableWidth)=>{
2218
+ if (availableWidth <= 0) return [];
2219
+ const nextVisible = [];
2220
+ let usedWidth = 0;
2221
+ for (const tabId of layoutTabIds){
2222
+ if (forcedOverflowTabIds.has(tabId)) continue;
2223
+ const tabButton = tabButtons.get(tabId);
2224
+ if (!tabButton) continue;
2225
+ const width = tabButton.getBoundingClientRect().width;
2226
+ const nextUsed = 0 === nextVisible.length ? width : usedWidth + stripGap + width;
2227
+ if (nextUsed <= availableWidth) {
2228
+ nextVisible.push(tabId);
2229
+ usedWidth = nextUsed;
2230
+ } else break;
2231
+ }
2232
+ return nextVisible;
2233
+ };
2234
+ const measureStripWidth = ()=>tabStrip.getBoundingClientRect().width;
2235
+ const showOverflowContainer = ()=>{
2236
+ if (styles_tabs_module.overflowContainerHidden) overflowContainer.classList.remove(styles_tabs_module.overflowContainerHidden);
2237
+ };
2238
+ const hideOverflowContainer = ()=>{
2239
+ if (styles_tabs_module.overflowContainerHidden) overflowContainer.classList.add(styles_tabs_module.overflowContainerHidden);
2240
+ };
2241
+ const measureVisibleWidth = (tabIds)=>{
2242
+ let width = 0;
2243
+ for (const [index, tabId] of tabIds.entries()){
2244
+ const tabButton = tabButtons.get(tabId);
2245
+ if (tabButton) {
2246
+ width += tabButton.getBoundingClientRect().width;
2247
+ if (index > 0) width += stripGap;
2248
+ }
2249
+ }
2250
+ return width;
2251
+ };
2252
+ if (0 === forcedOverflowTabIds.size) {
2253
+ hideOverflowContainer();
2254
+ const visibleWithoutOverflow = calculateVisibleTabs(measureStripWidth());
2255
+ if (visibleWithoutOverflow.length === layoutTabIds.length) visibleTabIds = visibleWithoutOverflow;
2256
+ else {
2257
+ showOverflowContainer();
2258
+ visibleTabIds = calculateVisibleTabs(measureStripWidth());
2259
+ }
2260
+ } else {
2261
+ showOverflowContainer();
2262
+ const withOverflow = calculateVisibleTabs(measureStripWidth());
2263
+ visibleTabIds = withOverflow.length > 0 ? withOverflow : [
2264
+ activeTab
2265
+ ];
2266
+ }
2267
+ if (!visibleTabIds.includes(activeTab) && !disabledTabs.includes(activeTab)) if (visibleTabIds.length > 0) visibleTabIds[visibleTabIds.length - 1] = activeTab;
2268
+ else visibleTabIds = [
2269
+ activeTab
2270
+ ];
2271
+ visibleTabIds = [
2272
+ ...new Set(visibleTabIds)
2273
+ ];
2274
+ const maxStripWidth = measureStripWidth();
2275
+ while(visibleTabIds.length > 1 && measureVisibleWidth(visibleTabIds) > maxStripWidth + 0.5){
2276
+ let removeIndex = visibleTabIds.length - 1;
2277
+ if (visibleTabIds[removeIndex] === activeTab) removeIndex = Math.max(0, removeIndex - 1);
2278
+ visibleTabIds.splice(removeIndex, 1);
2279
+ }
2280
+ hiddenTabIds = layoutTabIds.filter((tabId)=>!visibleTabIds.includes(tabId) || forcedOverflowTabIds.has(tabId) && tabId !== activeTab);
2281
+ for (const tabId of allTabIds){
2282
+ const tabButton = tabButtons.get(tabId);
2283
+ if (tabButton) {
2284
+ if (styles_tabs_module.tabHidden) tabButton.classList.toggle(styles_tabs_module.tabHidden, hiddenTabIds.includes(tabId));
2285
+ }
2286
+ }
2287
+ for (const tabId of allTabIds){
2288
+ const overflowItem = overflowButtons.get(tabId);
2289
+ if (overflowItem) {
2290
+ if (styles_tabs_module.overflowItemHidden) overflowItem.classList.toggle(styles_tabs_module.overflowItemHidden, !hiddenTabIds.includes(tabId));
2291
+ }
2292
+ }
2293
+ if (styles_tabs_module.overflowContainerHidden) overflowContainer.classList.toggle(styles_tabs_module.overflowContainerHidden, 0 === hiddenTabIds.length);
2294
+ if (0 === hiddenTabIds.length) closeOverflowMenu();
2295
+ }
2296
+ function focusFirstEnabledOverflowItem() {
2297
+ const firstEnabled = hiddenTabIds.find((tabId)=>!disabledTabs.includes(tabId));
2298
+ if (firstEnabled) overflowButtons.get(firstEnabled)?.focus();
2299
+ }
2300
+ function openOverflowMenu() {
2301
+ if (isOverflowMenuOpen || 0 === hiddenTabIds.length) return;
2302
+ isOverflowMenuOpen = true;
2303
+ overflowMenu.dataset.state = 'open';
2304
+ overflowButton.setAttribute('aria-expanded', 'true');
2305
+ document.addEventListener('click', handleOutsideClick);
2306
+ document.addEventListener('keydown', handleEscapeKey);
2307
+ }
2308
+ function closeOverflowMenu() {
2309
+ if (!isOverflowMenuOpen) return;
2310
+ isOverflowMenuOpen = false;
2311
+ overflowMenu.dataset.state = 'closed';
2312
+ overflowButton.setAttribute('aria-expanded', 'false');
2313
+ document.removeEventListener('click', handleOutsideClick);
2314
+ document.removeEventListener('keydown', handleEscapeKey);
2315
+ }
2316
+ function toggleOverflowMenu() {
2317
+ if (isOverflowMenuOpen) closeOverflowMenu();
2318
+ else openOverflowMenu();
2319
+ }
2320
+ function handleOutsideClick(e) {
2321
+ if (!overflowContainer.contains(e.target)) closeOverflowMenu();
2322
+ }
2323
+ function handleEscapeKey(e) {
2324
+ if ('Escape' === e.key) closeOverflowMenu();
2325
+ }
2326
+ function handleKeyDown(e, currentTab) {
2327
+ const enabledTabIds = visibleTabIds.filter((tabId)=>!disabledTabs.includes(tabId));
2328
+ const currentIndex = enabledTabIds.indexOf(currentTab);
2329
+ let newIndex = currentIndex;
2330
+ switch(e.key){
2331
+ case 'ArrowLeft':
2332
+ newIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabIds.length - 1;
2333
+ break;
2334
+ case 'ArrowRight':
2335
+ newIndex = currentIndex < enabledTabIds.length - 1 ? currentIndex + 1 : 0;
2336
+ break;
2337
+ case 'Home':
2338
+ newIndex = 0;
2339
+ break;
2340
+ case 'End':
2341
+ newIndex = enabledTabIds.length - 1;
2342
+ break;
2343
+ default:
2344
+ return;
2345
+ }
1855
2346
  e.preventDefault();
1856
2347
  const newTab = enabledTabIds[newIndex];
1857
2348
  if (newTab) {
@@ -1860,23 +2351,152 @@ function tabs_createTabs(options) {
1860
2351
  tabButtons.get(newTab)?.focus();
1861
2352
  }
1862
2353
  }
2354
+ function handleOverflowKeyDown(e, currentTab) {
2355
+ const enabledTabIds = hiddenTabIds.filter((tabId)=>!disabledTabs.includes(tabId));
2356
+ const currentIndex = enabledTabIds.indexOf(currentTab);
2357
+ if ('Escape' === e.key) {
2358
+ e.preventDefault();
2359
+ closeOverflowMenu();
2360
+ overflowButton.focus();
2361
+ return;
2362
+ }
2363
+ let newIndex = currentIndex;
2364
+ switch(e.key){
2365
+ case 'ArrowDown':
2366
+ newIndex = (currentIndex + 1) % enabledTabIds.length;
2367
+ break;
2368
+ case 'ArrowUp':
2369
+ newIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabIds.length - 1;
2370
+ break;
2371
+ default:
2372
+ return;
2373
+ }
2374
+ e.preventDefault();
2375
+ const newTab = enabledTabIds[newIndex];
2376
+ if (newTab) overflowButtons.get(newTab)?.focus();
2377
+ }
1863
2378
  function setActiveTab(tab) {
1864
2379
  activeTab = tab;
1865
- for (const [tabId, tabButton] of tabButtons){
1866
- const isActive = tabId === tab;
1867
- if (styles_tabs_module.tabActive) tabButton.classList.toggle(styles_tabs_module.tabActive, isActive);
1868
- tabButton.setAttribute('aria-selected', isActive ? 'true' : 'false');
1869
- tabButton.tabIndex = isActive ? 0 : -1;
1870
- }
2380
+ applyActiveState(tab);
2381
+ updateVisibleTabs();
1871
2382
  }
2383
+ const handleWindowResize = ()=>{
2384
+ updateVisibleTabs();
2385
+ };
2386
+ let resizeObserver = null;
2387
+ if ('undefined' != typeof ResizeObserver) {
2388
+ resizeObserver = new ResizeObserver(()=>{
2389
+ updateVisibleTabs();
2390
+ });
2391
+ resizeObserver.observe(tabList);
2392
+ } else window.addEventListener('resize', handleWindowResize);
2393
+ applyActiveState(activeTab);
2394
+ requestAnimationFrame(()=>{
2395
+ updateVisibleTabs();
2396
+ });
1872
2397
  return {
1873
2398
  element: tabList,
1874
2399
  setActiveTab,
1875
2400
  destroy: ()=>{
2401
+ closeOverflowMenu();
2402
+ if (resizeObserver) {
2403
+ resizeObserver.disconnect();
2404
+ resizeObserver = null;
2405
+ } else window.removeEventListener('resize', handleWindowResize);
1876
2406
  tabButtons.clear();
2407
+ overflowButtons.clear();
1877
2408
  }
1878
2409
  };
1879
2410
  }
2411
+ function debug_bundle_createDebugBundle(payload) {
2412
+ const { namespace, devToolsState, connection, recentEvents, storeState } = payload;
2413
+ const bundle = {
2414
+ generatedAt: new Date().toISOString(),
2415
+ namespace,
2416
+ devToolsState,
2417
+ connection,
2418
+ recentEvents,
2419
+ storeState,
2420
+ overrides: storeState?.overrides ?? null,
2421
+ iab: storeState?.iab ? {
2422
+ tcString: (storeState?.iab).tcString ?? null,
2423
+ purposeCount: Object.keys((storeState?.iab).purposeConsents ?? {}).length,
2424
+ vendorCount: Object.keys((storeState?.iab).vendorConsents ?? {}).length
2425
+ } : null
2426
+ };
2427
+ return JSON.stringify(bundle, null, 2);
2428
+ }
2429
+ function debug_bundle_sanitizeStoreState(state) {
2430
+ if (!state) return null;
2431
+ try {
2432
+ return JSON.parse(JSON.stringify(state, (_key, value)=>'function' == typeof value ? void 0 : value));
2433
+ } catch {
2434
+ return {
2435
+ error: 'Unable to serialize store state'
2436
+ };
2437
+ }
2438
+ }
2439
+ function debug_bundle_downloadDebugBundle(content) {
2440
+ const blob = new Blob([
2441
+ content
2442
+ ], {
2443
+ type: 'application/json'
2444
+ });
2445
+ const url = URL.createObjectURL(blob);
2446
+ const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
2447
+ const anchor = document.createElement('a');
2448
+ anchor.href = url;
2449
+ anchor.download = `c15t-debug-bundle-${timestamp}.json`;
2450
+ anchor.click();
2451
+ URL.revokeObjectURL(url);
2452
+ }
2453
+ const DEVTOOLS_OVERRIDES_STORAGE_KEY = 'c15t-devtools-overrides';
2454
+ function normalizeStringValue(value) {
2455
+ if ('string' != typeof value) return;
2456
+ const normalized = value.trim();
2457
+ return normalized.length > 0 ? normalized : void 0;
2458
+ }
2459
+ function normalizeBooleanValue(value) {
2460
+ return 'boolean' == typeof value ? value : void 0;
2461
+ }
2462
+ function normalizeOverrides(value) {
2463
+ if (!value || 'object' != typeof value) return null;
2464
+ const source = value;
2465
+ const overrides = {
2466
+ country: normalizeStringValue(source.country),
2467
+ region: normalizeStringValue(source.region),
2468
+ language: normalizeStringValue(source.language),
2469
+ gpc: normalizeBooleanValue(source.gpc)
2470
+ };
2471
+ return hasPersistedOverrides(overrides) ? overrides : null;
2472
+ }
2473
+ function hasPersistedOverrides(overrides) {
2474
+ return Boolean(overrides.country || overrides.region || overrides.language || void 0 !== overrides.gpc);
2475
+ }
2476
+ function override_storage_loadPersistedOverrides(storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
2477
+ if ('undefined' == typeof window) return null;
2478
+ try {
2479
+ const stored = localStorage.getItem(storageKey);
2480
+ if (!stored) return null;
2481
+ const parsed = JSON.parse(stored);
2482
+ return normalizeOverrides(parsed);
2483
+ } catch {
2484
+ return null;
2485
+ }
2486
+ }
2487
+ function override_storage_persistOverrides(overrides, storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
2488
+ if ('undefined' == typeof window) return;
2489
+ try {
2490
+ if (!hasPersistedOverrides(overrides)) return void localStorage.removeItem(storageKey);
2491
+ localStorage.setItem(storageKey, JSON.stringify(overrides));
2492
+ } catch {}
2493
+ }
2494
+ function override_storage_clearPersistedOverrides(storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
2495
+ if ('undefined' == typeof window) return;
2496
+ try {
2497
+ localStorage.removeItem(storageKey);
2498
+ } catch {}
2499
+ }
1880
2500
  var components_module = __webpack_require__("../../node_modules/.bun/@rsbuild+core@1.6.12/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[1].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[1].use[2]!./src/styles/components.module.css");
1881
2501
  var components_module_options = {};
1882
2502
  components_module_options.styleTagTransform = styleTagTransform_default();
@@ -1944,31 +2564,19 @@ function createButton(options) {
1944
2564
  btn.appendChild(document.createTextNode(text));
1945
2565
  return btn;
1946
2566
  }
1947
- function createListItem(options) {
1948
- const { title, description, actions = [] } = options;
1949
- const content = renderer_div({
1950
- className: styles_components_module.listItemContent,
1951
- children: [
1952
- renderer_span({
1953
- className: styles_components_module.listItemTitle,
1954
- text: title
1955
- }),
1956
- description ? renderer_span({
1957
- className: styles_components_module.listItemDescription,
1958
- text: description
1959
- }) : null
1960
- ]
1961
- });
1962
- const actionsContainer = renderer_div({
1963
- className: styles_components_module.listItemActions,
1964
- children: actions
1965
- });
1966
- return renderer_div({
1967
- className: styles_components_module.listItem,
1968
- children: [
1969
- content,
1970
- actionsContainer
1971
- ]
2567
+ function createInput(options) {
2568
+ const { value, placeholder, ariaLabel, small = false, onInput } = options;
2569
+ const sizeClass = small ? styles_components_module.inputSmall : '';
2570
+ return input({
2571
+ className: `${styles_components_module.input} ${sizeClass}`.trim(),
2572
+ type: 'text',
2573
+ value,
2574
+ placeholder,
2575
+ ariaLabel,
2576
+ onInput: (event)=>{
2577
+ const target = event.target;
2578
+ onInput?.(target?.value ?? '');
2579
+ }
1972
2580
  });
1973
2581
  }
1974
2582
  function createSection(options) {
@@ -2051,6 +2659,18 @@ function createGridCard(options) {
2051
2659
  children
2052
2660
  });
2053
2661
  }
2662
+ function createDisconnectedState(message = 'Store not connected') {
2663
+ return renderer_div({
2664
+ className: styles_components_module.disconnectedState,
2665
+ style: {
2666
+ padding: '24px',
2667
+ textAlign: 'center',
2668
+ color: 'var(--c15t-text-muted)',
2669
+ fontSize: 'var(--c15t-devtools-font-size-sm)'
2670
+ },
2671
+ text: message
2672
+ });
2673
+ }
2054
2674
  const REFRESH_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
2055
2675
  <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
2056
2676
  <path d="M21 3v5h-5"></path>
@@ -2078,19 +2698,11 @@ const TERMINAL_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 2
2078
2698
  <polyline points="4 17 10 11 4 5"></polyline>
2079
2699
  <line x1="12" y1="19" x2="20" y2="19"></line>
2080
2700
  </svg>`;
2081
- function actions_renderActionsPanel(container, options) {
2082
- const { getState, onResetConsents, onRefetchBanner, onShowBanner, onOpenPreferences, onCopyState } = options;
2701
+ function renderActionsPanel(container, options) {
2702
+ const { getState, onResetConsents, onRefetchBanner, onShowBanner, onOpenPreferences, onCopyState, onExportDebugBundle } = options;
2083
2703
  renderer_clearElement(container);
2084
2704
  const state = getState();
2085
- if (!state) return void container.appendChild(renderer_div({
2086
- style: {
2087
- padding: '24px',
2088
- textAlign: 'center',
2089
- color: 'var(--c15t-text-muted)',
2090
- fontSize: 'var(--c15t-devtools-font-size-sm)'
2091
- },
2092
- text: 'Store not connected'
2093
- }));
2705
+ if (!state) return void container.appendChild(createDisconnectedState());
2094
2706
  const actionCards = [
2095
2707
  createActionCard({
2096
2708
  icon: actions_EYE_ICON,
@@ -2111,6 +2723,12 @@ function actions_renderActionsPanel(container, options) {
2111
2723
  icon: COPY_ICON,
2112
2724
  label: 'Copy State',
2113
2725
  onClick: onCopyState
2726
+ }),
2727
+ createActionCard({
2728
+ icon: REFRESH_ICON,
2729
+ label: 'Export Debug',
2730
+ onClick: ()=>onExportDebugBundle?.(),
2731
+ disabled: !onExportDebugBundle
2114
2732
  })
2115
2733
  ];
2116
2734
  const grid = createGrid({
@@ -2184,7 +2802,7 @@ function actions_renderActionsPanel(container, options) {
2184
2802
  container.appendChild(consoleSection);
2185
2803
  }
2186
2804
  function createActionCard(options) {
2187
- const { icon, label, onClick } = options;
2805
+ const { icon, label, onClick, disabled = false } = options;
2188
2806
  const card = renderer_div({
2189
2807
  className: styles_components_module.gridCard ?? '',
2190
2808
  style: {
@@ -2195,7 +2813,8 @@ function createActionCard(options) {
2195
2813
  gap: '6px',
2196
2814
  padding: '16px 8px',
2197
2815
  cursor: 'pointer',
2198
- transition: 'background-color var(--c15t-duration-fast) var(--c15t-easing)'
2816
+ transition: 'background-color var(--c15t-duration-fast) var(--c15t-easing)',
2817
+ opacity: disabled ? '0.55' : '1'
2199
2818
  },
2200
2819
  children: [
2201
2820
  createIconWrapper(icon, 20),
@@ -2210,13 +2829,15 @@ function createActionCard(options) {
2210
2829
  })
2211
2830
  ]
2212
2831
  });
2213
- card.addEventListener('click', onClick);
2214
- card.addEventListener('mouseenter', ()=>{
2215
- card.style.backgroundColor = 'var(--c15t-surface-hover)';
2216
- });
2217
- card.addEventListener('mouseleave', ()=>{
2218
- card.style.backgroundColor = '';
2219
- });
2832
+ if (!disabled) {
2833
+ card.addEventListener('click', onClick);
2834
+ card.addEventListener('mouseenter', ()=>{
2835
+ card.style.backgroundColor = 'var(--c15t-surface-hover)';
2836
+ });
2837
+ card.addEventListener('mouseleave', ()=>{
2838
+ card.style.backgroundColor = '';
2839
+ });
2840
+ }
2220
2841
  return card;
2221
2842
  }
2222
2843
  function createIconWrapper(icon, size) {
@@ -2237,19 +2858,12 @@ function createIconWrapper(icon, size) {
2237
2858
  function getNamespace(state) {
2238
2859
  return state.config?.meta?.namespace || 'c15tStore';
2239
2860
  }
2240
- function consents_renderConsentsPanel(container, options) {
2861
+ const consentSearchByContainer = new WeakMap();
2862
+ function renderConsentsPanel(container, options) {
2241
2863
  const { getState, onConsentChange, onSave, onAcceptAll, onRejectAll, onReset } = options;
2242
2864
  renderer_clearElement(container);
2243
2865
  const state = getState();
2244
- if (!state) return void container.appendChild(renderer_div({
2245
- style: {
2246
- padding: '24px',
2247
- textAlign: 'center',
2248
- color: 'var(--c15t-text-muted)',
2249
- fontSize: 'var(--c15t-devtools-font-size-sm)'
2250
- },
2251
- text: 'Store not connected'
2252
- }));
2866
+ if (!state) return void container.appendChild(createDisconnectedState());
2253
2867
  const isIabMode = 'iab' === state.model;
2254
2868
  const savedConsents = state.consents || {};
2255
2869
  const selectedConsents = state.selectedConsents || {};
@@ -2263,15 +2877,40 @@ function consents_renderConsentsPanel(container, options) {
2263
2877
  ct.name,
2264
2878
  ct
2265
2879
  ]));
2880
+ const searchQuery = consentSearchByContainer.get(container) ?? '';
2266
2881
  const consentEntries = Object.entries(displayConsents);
2267
- if (0 === consentEntries.length) container.appendChild(renderer_div({
2882
+ const filteredConsentEntries = consentEntries.filter(([name])=>{
2883
+ if (!searchQuery) return true;
2884
+ const consentType = consentTypeMap.get(name);
2885
+ const displayName = consentType?.name || name;
2886
+ return `${name} ${displayName}`.toLowerCase().includes(searchQuery);
2887
+ });
2888
+ const showSearchInput = consentEntries.length > 4;
2889
+ if (showSearchInput) container.appendChild(renderer_div({
2890
+ style: {
2891
+ padding: '8px 0 10px'
2892
+ },
2893
+ children: [
2894
+ createInput({
2895
+ value: searchQuery,
2896
+ placeholder: 'Filter consents…',
2897
+ ariaLabel: 'Filter consents',
2898
+ small: true,
2899
+ onInput: (value)=>{
2900
+ consentSearchByContainer.set(container, value.trim().toLowerCase());
2901
+ renderConsentsPanel(container, options);
2902
+ }
2903
+ })
2904
+ ]
2905
+ }));
2906
+ if (0 === filteredConsentEntries.length) container.appendChild(renderer_div({
2268
2907
  style: {
2269
2908
  padding: '24px',
2270
2909
  textAlign: 'center',
2271
2910
  color: 'var(--c15t-devtools-text-muted)',
2272
2911
  fontSize: 'var(--c15t-devtools-font-size-sm)'
2273
2912
  },
2274
- text: 'No consents configured'
2913
+ text: 0 === consentEntries.length ? 'No consents configured' : 'No matching consents'
2275
2914
  }));
2276
2915
  else {
2277
2916
  if (isIabMode) {
@@ -2289,7 +2928,7 @@ function consents_renderConsentsPanel(container, options) {
2289
2928
  container.appendChild(iabNotice);
2290
2929
  }
2291
2930
  const gridCards = [];
2292
- for (const [name, value] of consentEntries){
2931
+ for (const [name, value] of filteredConsentEntries){
2293
2932
  const consentType = consentTypeMap.get(name);
2294
2933
  const isNecessary = 'necessary' === name;
2295
2934
  const displayName = consentType?.name || name;
@@ -2407,15 +3046,26 @@ function consents_renderConsentsPanel(container, options) {
2407
3046
  function formatConsentName(name) {
2408
3047
  return name.replace(/_/g, ' ').replace(/\b\w/g, (l)=>l.toUpperCase());
2409
3048
  }
2410
- let activeFilter = 'all';
2411
- let selectedEventId = null;
2412
- function events_renderEventsPanel(container, options) {
3049
+ const panelStateByContainer = new WeakMap();
3050
+ function getPanelState(container) {
3051
+ const existing = panelStateByContainer.get(container);
3052
+ if (existing) return existing;
3053
+ const initialState = {
3054
+ activeFilter: 'all',
3055
+ selectedEventId: null,
3056
+ searchQuery: ''
3057
+ };
3058
+ panelStateByContainer.set(container, initialState);
3059
+ return initialState;
3060
+ }
3061
+ function renderEventsPanel(container, options) {
2413
3062
  const { getEvents, onClear } = options;
3063
+ const panelState = getPanelState(container);
2414
3064
  renderer_clearElement(container);
2415
3065
  const allEvents = getEvents();
2416
- const events = allEvents.filter((event)=>matchesFilter(event, activeFilter));
2417
- if (!events.some((event)=>event.id === selectedEventId)) selectedEventId = events[0]?.id ?? null;
2418
- const selectedEvent = events.find((event)=>event.id === selectedEventId) ?? null;
3066
+ const events = allEvents.filter((event)=>matchesFilter(event, panelState.activeFilter)).filter((event)=>matchesSearch(event, panelState.searchQuery));
3067
+ if (!events.some((event)=>event.id === panelState.selectedEventId)) panelState.selectedEventId = events[0]?.id ?? null;
3068
+ const selectedEvent = events.find((event)=>event.id === panelState.selectedEventId) ?? null;
2419
3069
  const header = renderer_div({
2420
3070
  style: {
2421
3071
  display: 'flex',
@@ -2451,8 +3101,8 @@ function events_renderEventsPanel(container, options) {
2451
3101
  small: true,
2452
3102
  onClick: ()=>{
2453
3103
  onClear();
2454
- selectedEventId = null;
2455
- events_renderEventsPanel(container, options);
3104
+ panelState.selectedEventId = null;
3105
+ renderEventsPanel(container, options);
2456
3106
  }
2457
3107
  })
2458
3108
  ]
@@ -2467,12 +3117,30 @@ function events_renderEventsPanel(container, options) {
2467
3117
  gap: '6px',
2468
3118
  padding: '0 16px 8px'
2469
3119
  },
2470
- children: EVENT_FILTERS.map((filter)=>createFilterButton(filter, filter === activeFilter, ()=>{
2471
- activeFilter = filter;
2472
- selectedEventId = null;
2473
- events_renderEventsPanel(container, options);
3120
+ children: EVENT_FILTERS.map((filter)=>createFilterButton(filter, filter === panelState.activeFilter, ()=>{
3121
+ panelState.activeFilter = filter;
3122
+ panelState.selectedEventId = null;
3123
+ renderEventsPanel(container, options);
2474
3124
  }))
2475
3125
  }));
3126
+ container.appendChild(renderer_div({
3127
+ style: {
3128
+ padding: '0 16px 8px'
3129
+ },
3130
+ children: [
3131
+ createInput({
3132
+ value: panelState.searchQuery,
3133
+ placeholder: 'Search events…',
3134
+ ariaLabel: 'Search events',
3135
+ small: true,
3136
+ onInput: (value)=>{
3137
+ panelState.searchQuery = value.trim().toLowerCase();
3138
+ panelState.selectedEventId = null;
3139
+ renderEventsPanel(container, options);
3140
+ }
3141
+ })
3142
+ ]
3143
+ }));
2476
3144
  const eventList = renderer_div({
2477
3145
  style: {
2478
3146
  display: 'flex',
@@ -2492,9 +3160,9 @@ function events_renderEventsPanel(container, options) {
2492
3160
  },
2493
3161
  text: 'No events match this filter'
2494
3162
  }));
2495
- else for (const event of events)eventList.appendChild(createEventItem(event, event.id === selectedEventId, ()=>{
2496
- selectedEventId = event.id;
2497
- events_renderEventsPanel(container, options);
3163
+ else for (const event of events)eventList.appendChild(createEventItem(event, event.id === panelState.selectedEventId, ()=>{
3164
+ panelState.selectedEventId = event.id;
3165
+ renderEventsPanel(container, options);
2498
3166
  }));
2499
3167
  container.appendChild(eventList);
2500
3168
  container.appendChild(createPayloadSection(selectedEvent));
@@ -2521,6 +3189,11 @@ function matchesFilter(event, filter) {
2521
3189
  if ('network' === filter) return 'network' === event.type;
2522
3190
  return 'iab' === event.type;
2523
3191
  }
3192
+ function matchesSearch(event, query) {
3193
+ if (!query) return true;
3194
+ const haystack = `${event.type} ${event.message} ${JSON.stringify(event.data ?? {})}`;
3195
+ return haystack.toLowerCase().includes(query);
3196
+ }
2524
3197
  function createPayloadSection(event) {
2525
3198
  const payload = event?.data ? JSON.stringify(event.data, null, 2) : null;
2526
3199
  return renderer_div({
@@ -2658,38 +3331,15 @@ function getEventColor(type) {
2658
3331
  return 'var(--c15t-text-muted)';
2659
3332
  }
2660
3333
  }
2661
- function iab_renderIabPanel(container, options) {
3334
+ const iabSearchByContainer = new WeakMap();
3335
+ function renderIabPanel(container, options) {
2662
3336
  const { getState, onSetPurposeConsent, onSetVendorConsent, onSetSpecialFeatureOptIn, onAcceptAll, onRejectAll, onSave, onReset } = options;
2663
3337
  renderer_clearElement(container);
2664
3338
  const state = getState();
2665
- if (!state) return void container.appendChild(renderer_div({
2666
- style: {
2667
- padding: '24px',
2668
- textAlign: 'center',
2669
- color: 'var(--c15t-text-muted)',
2670
- fontSize: 'var(--c15t-devtools-font-size-sm)'
2671
- },
2672
- text: 'Store not connected'
2673
- }));
2674
- if ('iab' !== state.model) return void container.appendChild(renderer_div({
2675
- style: {
2676
- padding: '24px',
2677
- textAlign: 'center',
2678
- color: 'var(--c15t-text-muted)',
2679
- fontSize: 'var(--c15t-devtools-font-size-sm)'
2680
- },
2681
- text: 'IAB TCF mode is not configured'
2682
- }));
3339
+ if (!state) return void container.appendChild(createDisconnectedState());
3340
+ if ('iab' !== state.model) return void container.appendChild(createDisconnectedState('IAB TCF mode is not configured'));
2683
3341
  const iabState = state.iab;
2684
- if (!iabState) return void container.appendChild(renderer_div({
2685
- style: {
2686
- padding: '24px',
2687
- textAlign: 'center',
2688
- color: 'var(--c15t-text-muted)',
2689
- fontSize: 'var(--c15t-devtools-font-size-sm)'
2690
- },
2691
- text: 'IAB state not available'
2692
- }));
3342
+ if (!iabState) return void container.appendChild(createDisconnectedState('IAB state not available'));
2693
3343
  const tcString = iabState.tcString;
2694
3344
  const tcStringSection = createSection({
2695
3345
  title: 'TC String',
@@ -2721,9 +3371,30 @@ function iab_renderIabPanel(container, options) {
2721
3371
  });
2722
3372
  container.appendChild(tcStringSection);
2723
3373
  const gvl = iabState.gvl;
3374
+ const searchQuery = iabSearchByContainer.get(container) ?? '';
3375
+ container.appendChild(createSection({
3376
+ title: 'Filter',
3377
+ children: [
3378
+ createInput({
3379
+ value: searchQuery,
3380
+ placeholder: 'Filter purposes or vendors…',
3381
+ ariaLabel: 'Filter IAB purposes and vendors',
3382
+ small: true,
3383
+ onInput: (value)=>{
3384
+ iabSearchByContainer.set(container, value.trim().toLowerCase());
3385
+ renderIabPanel(container, options);
3386
+ }
3387
+ })
3388
+ ]
3389
+ }));
2724
3390
  const purposeConsents = iabState.purposeConsents || {};
2725
3391
  const purposes = gvl?.purposes || {};
2726
- const purposeEntries = Object.entries(purposeConsents);
3392
+ const purposeEntries = Object.entries(purposeConsents).filter(([purposeId])=>{
3393
+ if (!searchQuery) return true;
3394
+ const purposeInfo = purposes[purposeId];
3395
+ const purposeName = purposeInfo?.name || `Purpose ${purposeId}`;
3396
+ return `${purposeId} ${purposeName}`.toLowerCase().includes(searchQuery);
3397
+ });
2727
3398
  if (purposeEntries.length > 0) {
2728
3399
  const purposeList = renderer_div({
2729
3400
  style: {
@@ -2751,7 +3422,12 @@ function iab_renderIabPanel(container, options) {
2751
3422
  }
2752
3423
  const specialFeatureOptIns = iabState.specialFeatureOptIns || {};
2753
3424
  const specialFeatures = gvl?.specialFeatures || {};
2754
- const specialFeatureEntries = Object.entries(specialFeatureOptIns);
3425
+ const specialFeatureEntries = Object.entries(specialFeatureOptIns).filter(([featureId])=>{
3426
+ if (!searchQuery) return true;
3427
+ const featureInfo = specialFeatures[featureId];
3428
+ const featureName = featureInfo?.name || `Special Feature ${featureId}`;
3429
+ return `${featureId} ${featureName}`.toLowerCase().includes(searchQuery);
3430
+ });
2755
3431
  if (specialFeatureEntries.length > 0) {
2756
3432
  const specialFeatureList = renderer_div({
2757
3433
  style: {
@@ -2779,7 +3455,12 @@ function iab_renderIabPanel(container, options) {
2779
3455
  }
2780
3456
  const vendorConsents = iabState.vendorConsents || {};
2781
3457
  const vendors = gvl?.vendors || {};
2782
- const vendorEntries = Object.entries(vendorConsents);
3458
+ const vendorEntries = Object.entries(vendorConsents).filter(([vendorId])=>{
3459
+ if (!searchQuery) return true;
3460
+ const vendorInfo = vendors[vendorId];
3461
+ const vendorName = vendorInfo?.name || `Vendor ${vendorId}`;
3462
+ return `${vendorId} ${vendorName}`.toLowerCase().includes(searchQuery);
3463
+ });
2783
3464
  const iabVendors = [];
2784
3465
  const customVendors = [];
2785
3466
  for (const [vendorId, consent] of vendorEntries){
@@ -2998,19 +3679,11 @@ function truncateText(text, maxLength) {
2998
3679
  if (text.length <= maxLength) return text;
2999
3680
  return `${text.slice(0, maxLength - 3)}...`;
3000
3681
  }
3001
- function location_renderLocationPanel(container, options) {
3682
+ function renderLocationPanel(container, options) {
3002
3683
  const { getState, onApplyOverrides, onClearOverrides } = options;
3003
3684
  renderer_clearElement(container);
3004
3685
  const state = getState();
3005
- if (!state) return void container.appendChild(renderer_div({
3006
- style: {
3007
- padding: '24px',
3008
- textAlign: 'center',
3009
- color: 'var(--c15t-text-muted)',
3010
- fontSize: 'var(--c15t-devtools-font-size-sm)'
3011
- },
3012
- text: 'Store not connected'
3013
- }));
3686
+ if (!state) return void container.appendChild(createDisconnectedState());
3014
3687
  const locationInfo = state.locationInfo;
3015
3688
  const overrides = state.overrides;
3016
3689
  const translationConfig = state.translationConfig;
@@ -3659,29 +4332,43 @@ const CODE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" f
3659
4332
  <polyline points="16 18 22 12 16 6"></polyline>
3660
4333
  <polyline points="8 6 2 12 8 18"></polyline>
3661
4334
  </svg>`;
3662
- function scripts_renderScriptsPanel(container, options) {
4335
+ const scriptsSearchByContainer = new WeakMap();
4336
+ function renderScriptsPanel(container, options) {
3663
4337
  const { getState, getEvents } = options;
3664
4338
  renderer_clearElement(container);
3665
4339
  const state = getState();
3666
- if (!state) return void container.appendChild(renderer_div({
3667
- style: {
3668
- padding: '24px',
3669
- textAlign: 'center',
3670
- color: 'var(--c15t-text-muted)',
3671
- fontSize: 'var(--c15t-devtools-font-size-sm)'
3672
- },
3673
- text: 'Store not connected'
3674
- }));
4340
+ if (!state) return void container.appendChild(createDisconnectedState());
3675
4341
  const scripts = state.scripts || [];
3676
4342
  const loadedScripts = state.loadedScripts || {};
3677
4343
  const networkBlocker = state.networkBlocker;
3678
4344
  const events = getEvents?.() ?? [];
3679
- if (0 === scripts.length) {
3680
- const scriptsSection = createSection({
3681
- title: 'Configured Scripts',
3682
- children: [
3683
- createEmptyState({
3684
- icon: CODE_ICON,
4345
+ const searchQuery = scriptsSearchByContainer.get(container) ?? '';
4346
+ const filteredScripts = scripts.filter((script)=>{
4347
+ if (!searchQuery) return true;
4348
+ const category = 'string' == typeof script.category ? script.category : JSON.stringify(script.category);
4349
+ return `${script.id} ${category}`.toLowerCase().includes(searchQuery);
4350
+ });
4351
+ if (scripts.length > 4) container.appendChild(createSection({
4352
+ title: 'Filter',
4353
+ children: [
4354
+ createInput({
4355
+ value: searchQuery,
4356
+ placeholder: "Filter scripts…",
4357
+ ariaLabel: "Filter scripts",
4358
+ small: true,
4359
+ onInput: (value)=>{
4360
+ scriptsSearchByContainer.set(container, value.trim().toLowerCase());
4361
+ renderScriptsPanel(container, options);
4362
+ }
4363
+ })
4364
+ ]
4365
+ }));
4366
+ if (0 === scripts.length) {
4367
+ const scriptsSection = createSection({
4368
+ title: 'Configured Scripts',
4369
+ children: [
4370
+ createEmptyState({
4371
+ icon: CODE_ICON,
3685
4372
  text: "No scripts configured"
3686
4373
  })
3687
4374
  ]
@@ -3692,10 +4379,19 @@ function scripts_renderScriptsPanel(container, options) {
3692
4379
  style: {
3693
4380
  display: 'flex',
3694
4381
  flexDirection: 'column',
3695
- gap: '4px'
4382
+ borderTop: '1px solid var(--c15t-border)',
4383
+ borderBottom: '1px solid var(--c15t-border)'
3696
4384
  }
3697
4385
  });
3698
- for (const script of scripts){
4386
+ if (0 === filteredScripts.length) scriptsList.appendChild(renderer_div({
4387
+ style: {
4388
+ padding: '10px 0',
4389
+ fontSize: 'var(--c15t-devtools-font-size-xs)',
4390
+ color: 'var(--c15t-text-muted)'
4391
+ },
4392
+ text: "No matching scripts"
4393
+ }));
4394
+ for (const script of filteredScripts){
3699
4395
  const scriptId = script.id;
3700
4396
  const isLoaded = true === loadedScripts[scriptId];
3701
4397
  const category = script.category;
@@ -3719,17 +4415,64 @@ function scripts_renderScriptsPanel(container, options) {
3719
4415
  text: status.charAt(0).toUpperCase() + status.slice(1),
3720
4416
  variant: statusVariant
3721
4417
  });
3722
- const item = createListItem({
3723
- title: scriptId,
3724
- description: `Category: ${categoryDisplay}`,
3725
- actions: [
3726
- badge
4418
+ const row = renderer_div({
4419
+ style: {
4420
+ display: 'flex',
4421
+ alignItems: 'center',
4422
+ justifyContent: 'space-between',
4423
+ gap: '8px',
4424
+ padding: '8px 0',
4425
+ borderBottom: '1px solid var(--c15t-border)'
4426
+ },
4427
+ children: [
4428
+ renderer_div({
4429
+ style: {
4430
+ display: 'flex',
4431
+ flexDirection: 'column',
4432
+ gap: '2px',
4433
+ minWidth: '0',
4434
+ flex: '1'
4435
+ },
4436
+ children: [
4437
+ renderer_div({
4438
+ style: {
4439
+ fontSize: 'var(--c15t-font-size-sm)',
4440
+ fontWeight: '500',
4441
+ color: 'var(--c15t-text)',
4442
+ overflow: 'hidden',
4443
+ textOverflow: 'ellipsis',
4444
+ whiteSpace: 'nowrap'
4445
+ },
4446
+ text: scriptId
4447
+ }),
4448
+ renderer_div({
4449
+ style: {
4450
+ fontSize: 'var(--c15t-devtools-font-size-xs)',
4451
+ color: 'var(--c15t-text-muted)',
4452
+ overflow: 'hidden',
4453
+ textOverflow: 'ellipsis',
4454
+ whiteSpace: 'nowrap'
4455
+ },
4456
+ text: `Category: ${categoryDisplay}`
4457
+ })
4458
+ ]
4459
+ }),
4460
+ renderer_div({
4461
+ style: {
4462
+ flexShrink: '0'
4463
+ },
4464
+ children: [
4465
+ badge
4466
+ ]
4467
+ })
3727
4468
  ]
3728
4469
  });
3729
- scriptsList.appendChild(item);
4470
+ scriptsList.appendChild(row);
3730
4471
  }
4472
+ const lastRow = scriptsList.lastElementChild;
4473
+ if (lastRow) lastRow.style.borderBottom = 'none';
3731
4474
  const scriptsSection = createSection({
3732
- title: `Configured Scripts (${scripts.length})`,
4475
+ title: `Configured Scripts (${filteredScripts.length}/${scripts.length})`,
3733
4476
  children: [
3734
4477
  scriptsList
3735
4478
  ]
@@ -3871,53 +4614,6 @@ function scripts_truncateText(text, maxLength) {
3871
4614
  if (text.length <= maxLength) return text;
3872
4615
  return `${text.slice(0, maxLength - 3)}...`;
3873
4616
  }
3874
- const DEVTOOLS_OVERRIDES_STORAGE_KEY = 'c15t-devtools-overrides';
3875
- function normalizeStringValue(value) {
3876
- if ('string' != typeof value) return;
3877
- const normalized = value.trim();
3878
- return normalized.length > 0 ? normalized : void 0;
3879
- }
3880
- function normalizeBooleanValue(value) {
3881
- return 'boolean' == typeof value ? value : void 0;
3882
- }
3883
- function normalizeOverrides(value) {
3884
- if (!value || 'object' != typeof value) return null;
3885
- const source = value;
3886
- const overrides = {
3887
- country: normalizeStringValue(source.country),
3888
- region: normalizeStringValue(source.region),
3889
- language: normalizeStringValue(source.language),
3890
- gpc: normalizeBooleanValue(source.gpc)
3891
- };
3892
- return hasPersistedOverrides(overrides) ? overrides : null;
3893
- }
3894
- function hasPersistedOverrides(overrides) {
3895
- return Boolean(overrides.country || overrides.region || overrides.language || void 0 !== overrides.gpc);
3896
- }
3897
- function override_storage_loadPersistedOverrides(storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
3898
- if ('undefined' == typeof window) return null;
3899
- try {
3900
- const stored = localStorage.getItem(storageKey);
3901
- if (!stored) return null;
3902
- const parsed = JSON.parse(stored);
3903
- return normalizeOverrides(parsed);
3904
- } catch {
3905
- return null;
3906
- }
3907
- }
3908
- function override_storage_persistOverrides(overrides, storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
3909
- if ('undefined' == typeof window) return;
3910
- try {
3911
- if (!hasPersistedOverrides(overrides)) return void localStorage.removeItem(storageKey);
3912
- localStorage.setItem(storageKey, JSON.stringify(overrides));
3913
- } catch {}
3914
- }
3915
- function override_storage_clearPersistedOverrides(storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
3916
- if ('undefined' == typeof window) return;
3917
- try {
3918
- localStorage.removeItem(storageKey);
3919
- } catch {}
3920
- }
3921
4617
  const STORAGE_KEYS = {
3922
4618
  C15T: 'c15t',
3923
4619
  PENDING_SYNC: 'c15t:pending-consent-sync',
@@ -3943,7 +4639,7 @@ function clearAllLocalStorage() {
3943
4639
  localStorage.removeItem(STORAGE_KEYS.EUCONSENT);
3944
4640
  } catch {}
3945
4641
  }
3946
- async function reset_consents_resetAllConsents(store, stateManager) {
4642
+ async function resetAllConsents(store, stateManager) {
3947
4643
  const storeState = store.getState();
3948
4644
  storeState.resetConsents();
3949
4645
  clearAllCookies();
@@ -3954,7 +4650,222 @@ async function reset_consents_resetAllConsents(store, stateManager) {
3954
4650
  message: 'All consents reset (storage cleared)'
3955
4651
  });
3956
4652
  }
4653
+ function panel_renderer_createPanelRenderer(config) {
4654
+ const { storeConnector, stateManager, enableEventLogging = true, onPersistOverrides, onClearPersistedOverrides, onCopyState, onExportDebugBundle } = config;
4655
+ const getStoreState = ()=>storeConnector.getState();
4656
+ const logEvent = (type, message, data)=>{
4657
+ if (enableEventLogging) stateManager.addEvent({
4658
+ type,
4659
+ message,
4660
+ data
4661
+ });
4662
+ };
4663
+ const resetConsents = async ()=>{
4664
+ const store = storeConnector.getStore();
4665
+ if (store) await resetAllConsents(store, enableEventLogging ? stateManager : void 0);
4666
+ };
4667
+ const renderPanel = (container, tab)=>{
4668
+ switch(tab){
4669
+ case 'consents':
4670
+ renderConsentsPanel(container, {
4671
+ getState: getStoreState,
4672
+ onConsentChange: (name, value)=>{
4673
+ const store = storeConnector.getStore();
4674
+ if (store) {
4675
+ const consentName = String(name);
4676
+ store.getState().setSelectedConsent(consentName, value);
4677
+ logEvent('info', `${consentName} toggled to ${value} (not saved)`, {
4678
+ name: consentName,
4679
+ value
4680
+ });
4681
+ }
4682
+ },
4683
+ onSave: ()=>{
4684
+ const store = storeConnector.getStore();
4685
+ if (store) {
4686
+ store.getState().saveConsents('custom');
4687
+ logEvent('consent_save', 'Saved consent preferences');
4688
+ }
4689
+ },
4690
+ onAcceptAll: ()=>{
4691
+ const store = storeConnector.getStore();
4692
+ if (store) {
4693
+ store.getState().saveConsents('all');
4694
+ logEvent('consent_save', 'Accepted all consents');
4695
+ }
4696
+ },
4697
+ onRejectAll: ()=>{
4698
+ const store = storeConnector.getStore();
4699
+ if (store) {
4700
+ store.getState().saveConsents('necessary');
4701
+ logEvent('consent_save', 'Rejected all optional consents');
4702
+ }
4703
+ },
4704
+ onReset: resetConsents
4705
+ });
4706
+ break;
4707
+ case 'location':
4708
+ renderLocationPanel(container, {
4709
+ getState: getStoreState,
4710
+ onApplyOverrides: async (overrides)=>{
4711
+ const store = storeConnector.getStore();
4712
+ if (store) {
4713
+ await store.getState().setOverrides({
4714
+ country: overrides.country,
4715
+ region: overrides.region,
4716
+ language: overrides.language,
4717
+ gpc: overrides.gpc
4718
+ });
4719
+ logEvent('info', 'Overrides updated', {
4720
+ country: overrides.country,
4721
+ region: overrides.region,
4722
+ language: overrides.language,
4723
+ gpc: overrides.gpc
4724
+ });
4725
+ onPersistOverrides?.({
4726
+ country: overrides.country,
4727
+ region: overrides.region,
4728
+ language: overrides.language,
4729
+ gpc: overrides.gpc
4730
+ });
4731
+ }
4732
+ },
4733
+ onClearOverrides: async ()=>{
4734
+ const store = storeConnector.getStore();
4735
+ if (store) {
4736
+ await store.getState().setOverrides({
4737
+ country: void 0,
4738
+ region: void 0,
4739
+ language: void 0,
4740
+ gpc: void 0
4741
+ });
4742
+ logEvent('info', 'Overrides cleared');
4743
+ onClearPersistedOverrides?.();
4744
+ }
4745
+ }
4746
+ });
4747
+ break;
4748
+ case "scripts":
4749
+ renderScriptsPanel(container, {
4750
+ getState: getStoreState,
4751
+ getEvents: ()=>stateManager.getState().eventLog
4752
+ });
4753
+ break;
4754
+ case 'iab':
4755
+ renderIabPanel(container, {
4756
+ getState: getStoreState,
4757
+ onSetPurposeConsent: (purposeId, value)=>{
4758
+ const iab = storeConnector.getStore()?.getState().iab;
4759
+ if (!iab) return;
4760
+ iab.setPurposeConsent(purposeId, value);
4761
+ logEvent('iab', `IAB purpose ${purposeId} set to ${value}`);
4762
+ },
4763
+ onSetVendorConsent: (vendorId, value)=>{
4764
+ const iab = storeConnector.getStore()?.getState().iab;
4765
+ if (!iab) return;
4766
+ iab.setVendorConsent(vendorId, value);
4767
+ logEvent('iab', `IAB vendor ${vendorId} set to ${value}`);
4768
+ },
4769
+ onSetSpecialFeatureOptIn: (featureId, value)=>{
4770
+ const iab = storeConnector.getStore()?.getState().iab;
4771
+ if (!iab) return;
4772
+ iab.setSpecialFeatureOptIn(featureId, value);
4773
+ logEvent('iab', `IAB feature ${featureId} set to ${value}`);
4774
+ },
4775
+ onAcceptAll: ()=>{
4776
+ const iab = storeConnector.getStore()?.getState().iab;
4777
+ if (!iab) return;
4778
+ iab.acceptAll();
4779
+ logEvent('iab', 'IAB accept all selected');
4780
+ },
4781
+ onRejectAll: ()=>{
4782
+ const iab = storeConnector.getStore()?.getState().iab;
4783
+ if (!iab) return;
4784
+ iab.rejectAll();
4785
+ logEvent('iab', 'IAB reject all selected');
4786
+ },
4787
+ onSave: ()=>{
4788
+ const iab = storeConnector.getStore()?.getState().iab;
4789
+ if (!iab) return;
4790
+ iab.save().then(()=>logEvent('iab', 'IAB preferences saved')).catch((error)=>{
4791
+ logEvent('error', `Failed to save IAB preferences: ${String(error)}`);
4792
+ });
4793
+ },
4794
+ onReset: resetConsents
4795
+ });
4796
+ break;
4797
+ case 'events':
4798
+ renderEventsPanel(container, {
4799
+ getEvents: ()=>stateManager.getState().eventLog,
4800
+ onClear: ()=>{
4801
+ stateManager.clearEventLog();
4802
+ logEvent('info', 'Event log cleared');
4803
+ }
4804
+ });
4805
+ break;
4806
+ case 'actions':
4807
+ renderActionsPanel(container, {
4808
+ getState: getStoreState,
4809
+ onResetConsents: resetConsents,
4810
+ onRefetchBanner: async ()=>{
4811
+ const store = storeConnector.getStore();
4812
+ if (store) {
4813
+ await store.getState().initConsentManager();
4814
+ logEvent('info', 'Banner data refetched');
4815
+ }
4816
+ },
4817
+ onShowBanner: ()=>{
4818
+ const store = storeConnector.getStore();
4819
+ if (store) {
4820
+ store.getState().setActiveUI('banner', {
4821
+ force: true
4822
+ });
4823
+ logEvent('info', 'Banner shown');
4824
+ }
4825
+ },
4826
+ onOpenPreferences: ()=>{
4827
+ const store = storeConnector.getStore();
4828
+ if (store) {
4829
+ store.getState().setActiveUI('dialog');
4830
+ logEvent('info', 'Preferences dialog opened');
4831
+ }
4832
+ },
4833
+ onCopyState: ()=>{
4834
+ const state = getStoreState();
4835
+ if (state) if (onCopyState) {
4836
+ const result = onCopyState(state);
4837
+ if (result instanceof Promise) result.then((ok)=>{
4838
+ logEvent(ok ? 'info' : 'error', ok ? 'State copied to clipboard' : 'Failed to copy state');
4839
+ }).catch(()=>{
4840
+ logEvent('error', 'Failed to copy state');
4841
+ });
4842
+ else logEvent(result ? 'info' : 'error', result ? 'State copied to clipboard' : 'Failed to copy state');
4843
+ } else navigator.clipboard.writeText(JSON.stringify(state, null, 2)).then(()=>{
4844
+ logEvent('info', 'State copied to clipboard');
4845
+ }).catch(()=>{
4846
+ logEvent('error', 'Failed to copy state');
4847
+ });
4848
+ },
4849
+ onExportDebugBundle: onExportDebugBundle ? ()=>{
4850
+ try {
4851
+ onExportDebugBundle();
4852
+ logEvent('info', 'Debug bundle exported');
4853
+ } catch {
4854
+ logEvent('error', 'Failed to export debug bundle');
4855
+ }
4856
+ } : void 0
4857
+ });
4858
+ break;
4859
+ }
4860
+ };
4861
+ return {
4862
+ renderPanel,
4863
+ getStoreState,
4864
+ resetConsents
4865
+ };
4866
+ }
3957
4867
  const STORAGE_KEY = 'c15t-devtools-events';
4868
+ const ACTIVE_TAB_STORAGE_KEY = 'c15t-devtools-active-tab';
3958
4869
  function loadPersistedEvents() {
3959
4870
  if ('undefined' == typeof window) return [];
3960
4871
  try {
@@ -3969,11 +4880,29 @@ function persistEvents(events) {
3969
4880
  sessionStorage.setItem(STORAGE_KEY, JSON.stringify(events));
3970
4881
  } catch {}
3971
4882
  }
4883
+ function isDevToolsTab(value) {
4884
+ return 'consents' === value || 'location' === value || "scripts" === value || 'iab' === value || 'events' === value || 'actions' === value;
4885
+ }
4886
+ function loadPersistedActiveTab() {
4887
+ if ('undefined' == typeof window) return null;
4888
+ try {
4889
+ const stored = localStorage.getItem(ACTIVE_TAB_STORAGE_KEY);
4890
+ if (isDevToolsTab(stored)) return stored;
4891
+ } catch {}
4892
+ return null;
4893
+ }
4894
+ function persistActiveTab(tab) {
4895
+ if ('undefined' == typeof window) return;
4896
+ try {
4897
+ localStorage.setItem(ACTIVE_TAB_STORAGE_KEY, tab);
4898
+ } catch {}
4899
+ }
3972
4900
  function state_manager_createStateManager(initialState = {}) {
3973
4901
  const persistedEvents = loadPersistedEvents();
4902
+ const persistedActiveTab = loadPersistedActiveTab();
3974
4903
  let state = {
3975
4904
  isOpen: false,
3976
- activeTab: 'location',
4905
+ activeTab: persistedActiveTab ?? 'location',
3977
4906
  position: 'bottom-right',
3978
4907
  isConnected: false,
3979
4908
  eventLog: persistedEvents,
@@ -4014,6 +4943,7 @@ function state_manager_createStateManager(initialState = {}) {
4014
4943
  setState({
4015
4944
  activeTab: tab
4016
4945
  });
4946
+ persistActiveTab(tab);
4017
4947
  },
4018
4948
  setPosition: (position)=>{
4019
4949
  setState({
@@ -4059,22 +4989,52 @@ function store_connector_createStoreConnector(options = {}) {
4059
4989
  let reconnectAttempts = 0;
4060
4990
  let hasNotifiedDisconnect = false;
4061
4991
  const listeners = new Set();
4992
+ const diagnosticsListeners = new Set();
4993
+ let diagnostics = {
4994
+ namespace,
4995
+ reconnectAttempts: 0,
4996
+ nextRetryInMs: null,
4997
+ lastError: null,
4998
+ isPolling: false,
4999
+ disconnectNotified: false
5000
+ };
4062
5001
  const INITIAL_RETRY_DELAY_MS = 100;
4063
5002
  const MAX_RETRY_DELAY_MS = 2000;
4064
5003
  const DISCONNECT_NOTIFY_ATTEMPTS = 5;
5004
+ function updateDiagnostics(partial, notify = true) {
5005
+ diagnostics = {
5006
+ ...diagnostics,
5007
+ ...partial
5008
+ };
5009
+ if (!notify) return;
5010
+ for (const listener of diagnosticsListeners)listener(diagnostics);
5011
+ }
4065
5012
  function clearReconnectTimer() {
4066
5013
  if (reconnectTimeout) {
4067
5014
  clearTimeout(reconnectTimeout);
4068
5015
  reconnectTimeout = null;
5016
+ updateDiagnostics({
5017
+ isPolling: false,
5018
+ nextRetryInMs: null
5019
+ });
4069
5020
  }
4070
5021
  }
4071
5022
  function resetReconnectState() {
4072
5023
  reconnectAttempts = 0;
4073
5024
  hasNotifiedDisconnect = false;
5025
+ updateDiagnostics({
5026
+ reconnectAttempts: 0,
5027
+ nextRetryInMs: null,
5028
+ lastError: null,
5029
+ disconnectNotified: false
5030
+ });
4074
5031
  }
4075
5032
  function notifyDisconnectedOnce() {
4076
5033
  if (hasNotifiedDisconnect) return;
4077
5034
  hasNotifiedDisconnect = true;
5035
+ updateDiagnostics({
5036
+ disconnectNotified: true
5037
+ });
4078
5038
  onDisconnect?.();
4079
5039
  }
4080
5040
  function tryConnect() {
@@ -4095,16 +5055,31 @@ function store_connector_createStoreConnector(options = {}) {
4095
5055
  onConnect?.(currentState, store);
4096
5056
  clearReconnectTimer();
4097
5057
  resetReconnectState();
5058
+ updateDiagnostics({
5059
+ lastError: null
5060
+ });
4098
5061
  return true;
4099
5062
  }
5063
+ updateDiagnostics({
5064
+ lastError: `Store "${namespace}" not found on window`
5065
+ });
4100
5066
  return false;
4101
5067
  }
4102
5068
  function scheduleReconnect(immediate = false) {
4103
5069
  if (store || reconnectTimeout) return;
4104
5070
  const delay = immediate ? 0 : Math.min(INITIAL_RETRY_DELAY_MS * 2 ** Math.min(reconnectAttempts, 5), MAX_RETRY_DELAY_MS);
5071
+ updateDiagnostics({
5072
+ isPolling: true,
5073
+ nextRetryInMs: delay,
5074
+ reconnectAttempts
5075
+ });
4105
5076
  reconnectTimeout = setTimeout(()=>{
4106
5077
  reconnectTimeout = null;
4107
5078
  reconnectAttempts++;
5079
+ updateDiagnostics({
5080
+ reconnectAttempts,
5081
+ nextRetryInMs: null
5082
+ });
4108
5083
  if (tryConnect()) return;
4109
5084
  if (reconnectAttempts >= DISCONNECT_NOTIFY_ATTEMPTS) notifyDisconnectedOnce();
4110
5085
  scheduleReconnect();
@@ -4126,6 +5101,14 @@ function store_connector_createStoreConnector(options = {}) {
4126
5101
  listeners.delete(listener);
4127
5102
  };
4128
5103
  },
5104
+ getDiagnostics: ()=>diagnostics,
5105
+ subscribeDiagnostics: (listener)=>{
5106
+ diagnosticsListeners.add(listener);
5107
+ listener(diagnostics);
5108
+ return ()=>{
5109
+ diagnosticsListeners.delete(listener);
5110
+ };
5111
+ },
4129
5112
  retryConnection: ()=>{
4130
5113
  if (store) return;
4131
5114
  resetReconnectState();
@@ -4139,6 +5122,134 @@ function store_connector_createStoreConnector(options = {}) {
4139
5122
  }
4140
5123
  store = null;
4141
5124
  listeners.clear();
5125
+ diagnosticsListeners.clear();
5126
+ }
5127
+ };
5128
+ }
5129
+ const REGISTRY_KEY = '__c15tDevToolsInstrumentationRegistry';
5130
+ let fallbackRegistry = null;
5131
+ function getRegistry() {
5132
+ if ('undefined' == typeof window) {
5133
+ if (!fallbackRegistry) fallbackRegistry = new Map();
5134
+ return fallbackRegistry;
5135
+ }
5136
+ const host = window;
5137
+ const existing = host[REGISTRY_KEY];
5138
+ if (existing) return existing;
5139
+ const registry = new Map();
5140
+ host[REGISTRY_KEY] = registry;
5141
+ return registry;
5142
+ }
5143
+ function getBlockedRequestMessage(payload) {
5144
+ const data = payload;
5145
+ const method = 'string' == typeof data?.method ? data.method.toUpperCase() : 'REQUEST';
5146
+ const url = 'string' == typeof data?.url ? data.url : 'unknown-url';
5147
+ return `Network blocked: ${method} ${url}`;
5148
+ }
5149
+ function emitEvent(entry, event) {
5150
+ for (const listener of entry.listeners)listener(event);
5151
+ }
5152
+ function ensureNetworkBlockerWrapped(entry) {
5153
+ const blocker = entry.store.getState().networkBlocker;
5154
+ if (!blocker) return;
5155
+ if (blocker.onRequestBlocked === entry.wrappedNetworkBlockedCallback) return;
5156
+ entry.originalNetworkBlockedCallback = blocker.onRequestBlocked;
5157
+ entry.wrappedNetworkBlockedCallback = (payload)=>{
5158
+ emitEvent(entry, {
5159
+ type: 'network',
5160
+ message: getBlockedRequestMessage(payload),
5161
+ data: payload
5162
+ });
5163
+ if ('function' == typeof entry.originalNetworkBlockedCallback) entry.originalNetworkBlockedCallback(payload);
5164
+ };
5165
+ entry.store.getState().setNetworkBlocker({
5166
+ ...blocker,
5167
+ onRequestBlocked: entry.wrappedNetworkBlockedCallback
5168
+ });
5169
+ }
5170
+ function restoreInstrumentation(entry) {
5171
+ entry.stopWatchingStore?.();
5172
+ entry.stopWatchingStore = null;
5173
+ const state = entry.store.getState();
5174
+ state.setCallback('onBannerFetched', entry.originalCallbacks.onBannerFetched);
5175
+ state.setCallback('onConsentSet', entry.originalCallbacks.onConsentSet);
5176
+ state.setCallback('onError', entry.originalCallbacks.onError);
5177
+ state.setCallback('onBeforeConsentRevocationReload', entry.originalCallbacks.onBeforeConsentRevocationReload);
5178
+ const blocker = state.networkBlocker;
5179
+ if (blocker && blocker.onRequestBlocked === entry.wrappedNetworkBlockedCallback) state.setNetworkBlocker({
5180
+ ...blocker,
5181
+ onRequestBlocked: entry.originalNetworkBlockedCallback
5182
+ });
5183
+ entry.wrappedNetworkBlockedCallback = null;
5184
+ }
5185
+ function createInstrumentationEntry(store) {
5186
+ const entry = {
5187
+ store,
5188
+ listeners: new Set(),
5189
+ originalCallbacks: {
5190
+ ...store.getState().callbacks
5191
+ },
5192
+ originalNetworkBlockedCallback: store.getState().networkBlocker?.onRequestBlocked,
5193
+ wrappedNetworkBlockedCallback: null,
5194
+ stopWatchingStore: null
5195
+ };
5196
+ store.getState().setCallback('onBannerFetched', (payload)=>{
5197
+ const jurisdiction = payload.jurisdiction;
5198
+ emitEvent(entry, {
5199
+ type: 'info',
5200
+ message: `Banner fetched: ${String(jurisdiction)}`,
5201
+ data: payload
5202
+ });
5203
+ if ('function' == typeof entry.originalCallbacks.onBannerFetched) entry.originalCallbacks.onBannerFetched(payload);
5204
+ });
5205
+ store.getState().setCallback('onConsentSet', (payload)=>{
5206
+ emitEvent(entry, {
5207
+ type: 'consent_set',
5208
+ message: 'Consent preferences updated',
5209
+ data: payload
5210
+ });
5211
+ if ('function' == typeof entry.originalCallbacks.onConsentSet) entry.originalCallbacks.onConsentSet(payload);
5212
+ });
5213
+ store.getState().setCallback('onError', (payload)=>{
5214
+ const errorMessage = payload.error;
5215
+ emitEvent(entry, {
5216
+ type: 'error',
5217
+ message: `Error: ${String(errorMessage)}`,
5218
+ data: payload
5219
+ });
5220
+ if ('function' == typeof entry.originalCallbacks.onError) entry.originalCallbacks.onError(payload);
5221
+ });
5222
+ store.getState().setCallback('onBeforeConsentRevocationReload', (payload)=>{
5223
+ emitEvent(entry, {
5224
+ type: 'info',
5225
+ message: 'Consent revocation - page will reload',
5226
+ data: payload
5227
+ });
5228
+ if ('function' == typeof entry.originalCallbacks.onBeforeConsentRevocationReload) entry.originalCallbacks.onBeforeConsentRevocationReload(payload);
5229
+ });
5230
+ ensureNetworkBlockerWrapped(entry);
5231
+ entry.stopWatchingStore = store.subscribe(()=>{
5232
+ ensureNetworkBlockerWrapped(entry);
5233
+ });
5234
+ return entry;
5235
+ }
5236
+ function store_instrumentation_registerStoreInstrumentation(options) {
5237
+ const { namespace, store, onEvent } = options;
5238
+ const registry = getRegistry();
5239
+ let entry = registry.get(namespace);
5240
+ if (!entry || entry.store !== store) {
5241
+ if (entry) restoreInstrumentation(entry);
5242
+ entry = createInstrumentationEntry(store);
5243
+ registry.set(namespace, entry);
5244
+ }
5245
+ entry.listeners.add(onEvent);
5246
+ return ()=>{
5247
+ const current = registry.get(namespace);
5248
+ if (!current) return;
5249
+ current.listeners.delete(onEvent);
5250
+ if (0 === current.listeners.size) {
5251
+ restoreInstrumentation(current);
5252
+ registry.delete(namespace);
4142
5253
  }
4143
5254
  };
4144
5255
  }
@@ -4162,39 +5273,36 @@ function normalizeOverridesForPersistence(overrides) {
4162
5273
  function persistedOverridesEqual(a, b) {
4163
5274
  return a.country === b.country && a.region === b.region && a.language === b.language && a.gpc === b.gpc;
4164
5275
  }
4165
- function getBlockedRequestMessage(payload) {
4166
- const data = payload;
4167
- const method = 'string' == typeof data?.method ? data.method.toUpperCase() : 'REQUEST';
4168
- const url = 'string' == typeof data?.url ? data.url : 'unknown-url';
4169
- return `Network blocked: ${method} ${url}`;
5276
+ function createStateCopy(state) {
5277
+ return {
5278
+ consents: state.consents,
5279
+ selectedConsents: state.selectedConsents,
5280
+ consentInfo: state.consentInfo,
5281
+ locationInfo: state.locationInfo,
5282
+ model: state.model,
5283
+ overrides: state.overrides,
5284
+ scripts: state.scripts?.map((script)=>({
5285
+ id: script.id
5286
+ })),
5287
+ loadedScripts: state.loadedScripts
5288
+ };
4170
5289
  }
4171
5290
  function createDevToolsPanel(options) {
4172
5291
  const { namespace = 'c15tStore' } = options;
4173
- let originalEmbeddedNetworkBlockedCallback;
4174
- let hasWrappedEmbeddedNetworkBlocker = false;
5292
+ let detachInstrumentation = null;
4175
5293
  const stateManager = state_manager_createStateManager({
4176
5294
  isOpen: true
4177
5295
  });
4178
5296
  const storeConnector = store_connector_createStoreConnector({
4179
5297
  namespace,
4180
5298
  onConnect: (state, store)=>{
5299
+ detachInstrumentation?.();
5300
+ detachInstrumentation = store_instrumentation_registerStoreInstrumentation({
5301
+ namespace,
5302
+ store,
5303
+ onEvent: (event)=>stateManager.addEvent(event)
5304
+ });
4181
5305
  stateManager.setConnected(true);
4182
- const currentNetworkBlocker = state.networkBlocker;
4183
- if (currentNetworkBlocker && !hasWrappedEmbeddedNetworkBlocker) {
4184
- originalEmbeddedNetworkBlockedCallback = currentNetworkBlocker.onRequestBlocked;
4185
- hasWrappedEmbeddedNetworkBlocker = true;
4186
- store.getState().setNetworkBlocker({
4187
- ...currentNetworkBlocker,
4188
- onRequestBlocked: (payload)=>{
4189
- stateManager.addEvent({
4190
- type: 'network',
4191
- message: getBlockedRequestMessage(payload),
4192
- data: payload
4193
- });
4194
- if ('function' == typeof originalEmbeddedNetworkBlockedCallback) originalEmbeddedNetworkBlockedCallback(payload);
4195
- }
4196
- });
4197
- }
4198
5306
  const persistedOverrides = override_storage_loadPersistedOverrides();
4199
5307
  if (persistedOverrides) {
4200
5308
  const currentOverrides = normalizeOverridesForPersistence(state.overrides);
@@ -4206,7 +5314,36 @@ function createDevToolsPanel(options) {
4206
5314
  });
4207
5315
  }
4208
5316
  },
4209
- onDisconnect: ()=>stateManager.setConnected(false)
5317
+ onDisconnect: ()=>{
5318
+ stateManager.setConnected(false);
5319
+ detachInstrumentation?.();
5320
+ detachInstrumentation = null;
5321
+ }
5322
+ });
5323
+ const panelRenderer = panel_renderer_createPanelRenderer({
5324
+ storeConnector,
5325
+ stateManager,
5326
+ enableEventLogging: false,
5327
+ onPersistOverrides: override_storage_persistOverrides,
5328
+ onClearPersistedOverrides: override_storage_clearPersistedOverrides,
5329
+ onCopyState: async (state)=>{
5330
+ try {
5331
+ await navigator.clipboard.writeText(JSON.stringify(createStateCopy(state), null, 2));
5332
+ return true;
5333
+ } catch {
5334
+ return false;
5335
+ }
5336
+ },
5337
+ onExportDebugBundle: ()=>{
5338
+ const bundle = debug_bundle_createDebugBundle({
5339
+ namespace,
5340
+ devToolsState: stateManager.getState(),
5341
+ connection: storeConnector.getDiagnostics(),
5342
+ recentEvents: stateManager.getState().eventLog.slice(0, 100),
5343
+ storeState: debug_bundle_sanitizeStoreState(storeConnector.getState())
5344
+ });
5345
+ debug_bundle_downloadDebugBundle(bundle);
5346
+ }
4210
5347
  });
4211
5348
  const container = renderer_div({
4212
5349
  style: {
@@ -4227,140 +5364,42 @@ function createDevToolsPanel(options) {
4227
5364
  }
4228
5365
  });
4229
5366
  function renderActivePanel() {
4230
- const state = stateManager.getState();
4231
- const getStoreState = ()=>storeConnector.getState();
4232
- switch(state.activeTab){
4233
- case 'consents':
4234
- consents_renderConsentsPanel(contentArea, {
4235
- getState: getStoreState,
4236
- onConsentChange: (name, value)=>{
4237
- storeConnector.getStore()?.getState().setSelectedConsent(name, value);
4238
- },
4239
- onSave: ()=>{
4240
- storeConnector.getStore()?.getState().saveConsents('custom');
4241
- },
4242
- onAcceptAll: ()=>{
4243
- storeConnector.getStore()?.getState().saveConsents('all');
4244
- },
4245
- onRejectAll: ()=>{
4246
- storeConnector.getStore()?.getState().saveConsents('necessary');
4247
- },
4248
- onReset: async ()=>{
4249
- const store = storeConnector.getStore();
4250
- if (store) await reset_consents_resetAllConsents(store);
4251
- }
4252
- });
4253
- break;
4254
- case 'location':
4255
- location_renderLocationPanel(contentArea, {
4256
- getState: getStoreState,
4257
- onApplyOverrides: async (overrides)=>{
4258
- const store = storeConnector.getStore();
4259
- if (store) {
4260
- await store.getState().setOverrides({
4261
- country: overrides.country,
4262
- region: overrides.region,
4263
- language: overrides.language,
4264
- gpc: overrides.gpc
4265
- });
4266
- override_storage_persistOverrides({
4267
- country: overrides.country,
4268
- region: overrides.region,
4269
- language: overrides.language,
4270
- gpc: overrides.gpc
4271
- });
4272
- }
4273
- },
4274
- onClearOverrides: async ()=>{
4275
- await storeConnector.getStore()?.getState().setOverrides({
4276
- country: void 0,
4277
- region: void 0,
4278
- language: void 0,
4279
- gpc: void 0
4280
- });
4281
- override_storage_clearPersistedOverrides();
4282
- }
4283
- });
4284
- break;
4285
- case "scripts":
4286
- scripts_renderScriptsPanel(contentArea, {
4287
- getState: getStoreState,
4288
- getEvents: ()=>stateManager.getState().eventLog
4289
- });
4290
- break;
4291
- case 'iab':
4292
- iab_renderIabPanel(contentArea, {
4293
- getState: getStoreState,
4294
- onSetPurposeConsent: (purposeId, value)=>{
4295
- storeConnector.getStore()?.getState().iab?.setPurposeConsent(purposeId, value);
4296
- },
4297
- onSetVendorConsent: (vendorId, value)=>{
4298
- storeConnector.getStore()?.getState().iab?.setVendorConsent(vendorId, value);
4299
- },
4300
- onSetSpecialFeatureOptIn: (featureId, value)=>{
4301
- storeConnector.getStore()?.getState().iab?.setSpecialFeatureOptIn(featureId, value);
4302
- },
4303
- onAcceptAll: ()=>{
4304
- storeConnector.getStore()?.getState().iab?.acceptAll();
4305
- },
4306
- onRejectAll: ()=>{
4307
- storeConnector.getStore()?.getState().iab?.rejectAll();
4308
- },
4309
- onSave: ()=>{
4310
- storeConnector.getStore()?.getState().iab?.save();
4311
- },
4312
- onReset: async ()=>{
4313
- const store = storeConnector.getStore();
4314
- if (store) await reset_consents_resetAllConsents(store);
4315
- }
4316
- });
4317
- break;
4318
- case 'events':
4319
- events_renderEventsPanel(contentArea, {
4320
- getEvents: ()=>stateManager.getState().eventLog,
4321
- onClear: ()=>{
4322
- stateManager.clearEventLog();
4323
- }
4324
- });
4325
- break;
4326
- case 'actions':
4327
- actions_renderActionsPanel(contentArea, {
4328
- getState: getStoreState,
4329
- onResetConsents: async ()=>{
4330
- const store = storeConnector.getStore();
4331
- if (store) await reset_consents_resetAllConsents(store);
4332
- },
4333
- onRefetchBanner: async ()=>{
4334
- await storeConnector.getStore()?.getState().initConsentManager();
4335
- },
4336
- onShowBanner: ()=>{
4337
- storeConnector.getStore()?.getState().setActiveUI('banner', {
4338
- force: true
4339
- });
4340
- },
4341
- onOpenPreferences: ()=>{
4342
- storeConnector.getStore()?.getState().setActiveUI('dialog');
4343
- },
4344
- onCopyState: ()=>{
4345
- const state = storeConnector.getState();
4346
- if (state) navigator.clipboard.writeText(JSON.stringify(state, null, 2));
4347
- }
4348
- });
4349
- break;
5367
+ const activeTab = syncTabs();
5368
+ panelRenderer.renderPanel(contentArea, activeTab);
5369
+ }
5370
+ let tabsInstance = null;
5371
+ let iabDisabled = true;
5372
+ function getDisabledTabs() {
5373
+ const disabledTabs = [];
5374
+ const storeState = storeConnector.getState();
5375
+ if (!storeState || 'iab' !== storeState.model) disabledTabs.push('iab');
5376
+ return disabledTabs;
5377
+ }
5378
+ function syncTabs() {
5379
+ const disabledTabs = getDisabledTabs();
5380
+ const nextIabDisabled = disabledTabs.includes('iab');
5381
+ let activeTab = stateManager.getState().activeTab;
5382
+ if (disabledTabs.includes(activeTab)) {
5383
+ activeTab = 'consents';
5384
+ stateManager.setActiveTab(activeTab);
4350
5385
  }
5386
+ if (tabsInstance && iabDisabled === nextIabDisabled) tabsInstance.setActiveTab(activeTab);
5387
+ else {
5388
+ tabsInstance?.destroy();
5389
+ tabsInstance = tabs_createTabs({
5390
+ activeTab,
5391
+ onTabChange: (tab)=>{
5392
+ stateManager.setActiveTab(tab);
5393
+ renderActivePanel();
5394
+ },
5395
+ disabledTabs
5396
+ });
5397
+ iabDisabled = nextIabDisabled;
5398
+ if (!tabsInstance.element.parentElement) container.appendChild(tabsInstance.element);
5399
+ }
5400
+ return activeTab;
4351
5401
  }
4352
- const storeState = storeConnector.getState();
4353
- const disabledTabs = [];
4354
- if (!storeState || 'iab' !== storeState.model) disabledTabs.push('iab');
4355
- const tabsInstance = tabs_createTabs({
4356
- activeTab: stateManager.getState().activeTab,
4357
- onTabChange: (tab)=>{
4358
- stateManager.setActiveTab(tab);
4359
- renderActivePanel();
4360
- },
4361
- disabledTabs
4362
- });
4363
- container.appendChild(tabsInstance.element);
5402
+ syncTabs();
4364
5403
  container.appendChild(contentArea);
4365
5404
  renderActivePanel();
4366
5405
  const unsubscribe = storeConnector.subscribe(()=>{
@@ -4369,16 +5408,10 @@ function createDevToolsPanel(options) {
4369
5408
  return {
4370
5409
  element: container,
4371
5410
  destroy: ()=>{
4372
- const store = storeConnector.getStore();
4373
- if (store && hasWrappedEmbeddedNetworkBlocker) {
4374
- const currentNetworkBlocker = store.getState().networkBlocker;
4375
- if (currentNetworkBlocker) store.getState().setNetworkBlocker({
4376
- ...currentNetworkBlocker,
4377
- onRequestBlocked: originalEmbeddedNetworkBlockedCallback
4378
- });
4379
- }
5411
+ detachInstrumentation?.();
5412
+ detachInstrumentation = null;
4380
5413
  unsubscribe();
4381
- tabsInstance.destroy();
5414
+ tabsInstance?.destroy();
4382
5415
  storeConnector.destroy();
4383
5416
  stateManager.destroy();
4384
5417
  }