@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/react.js CHANGED
@@ -261,21 +261,21 @@ var __webpack_modules__ = {
261
261
  module.id,
262
262
  `.toggle-bPZtik {
263
263
  border-radius: var(--c15t-radius-full, 9999px);
264
- background-color: var(--c15t-switch-track, #ccc);
264
+ background-color: var(--c15t-switch-track, #d9d9d9);
265
265
  cursor: pointer;
266
- width: 36px;
267
- height: 20px;
268
- transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
266
+ width: 2rem;
267
+ height: 1.25rem;
268
+ 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));
269
269
  border: none;
270
270
  align-items: center;
271
- padding: 0;
271
+ padding: .125rem;
272
272
  display: inline-flex;
273
273
  position: relative;
274
274
  }
275
275
 
276
276
  .toggle-bPZtik:focus-visible {
277
- outline: 2px solid var(--c15t-primary, #335cff);
278
- outline-offset: 2px;
277
+ box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
278
+ outline: none;
279
279
  }
280
280
 
281
281
  .toggleActive-Ldlasg {
@@ -285,16 +285,16 @@ var __webpack_modules__ = {
285
285
  .toggleThumb-hjGfoX {
286
286
  border-radius: var(--c15t-radius-full, 9999px);
287
287
  background-color: var(--c15t-switch-thumb, #fff);
288
- width: 16px;
289
- height: 16px;
290
- transition: transform var(--c15t-duration-fast, .1s) var(--c15t-easing-spring, cubic-bezier(.34, 1.56, .64, 1));
288
+ width: .75rem;
289
+ height: .75rem;
290
+ box-shadow: 0 0 0 1px var(--c15t-border, #e3e3e3);
291
+ transition: transform var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
291
292
  position: absolute;
292
293
  left: 2px;
293
- box-shadow: 0 1px 2px #0003;
294
294
  }
295
295
 
296
296
  .toggleActive-Ldlasg .toggleThumb-hjGfoX {
297
- transform: translateX(16px);
297
+ transform: translateX(1rem);
298
298
  }
299
299
 
300
300
  .toggle-bPZtik:disabled, .toggleDisabled-ZcD8nZ {
@@ -307,13 +307,14 @@ var __webpack_modules__ = {
307
307
  }
308
308
 
309
309
  .badge-yA0giZ {
310
- border-radius: var(--c15t-radius-sm, .25rem);
310
+ border-radius: var(--c15t-radius-full, 9999px);
311
311
  font-size: var(--c15t-devtools-font-size-xs, .75rem);
312
312
  font-weight: var(--c15t-font-weight-medium, 500);
313
+ line-height: var(--c15t-line-height-tight, 1.25);
313
314
  white-space: nowrap;
315
+ justify-content: center;
314
316
  align-items: center;
315
- padding: 2px 6px;
316
- line-height: 1;
317
+ padding: .1875rem .4375rem;
317
318
  display: inline-flex;
318
319
  }
319
320
 
@@ -346,35 +347,36 @@ var __webpack_modules__ = {
346
347
  justify-content: center;
347
348
  align-items: center;
348
349
  gap: var(--c15t-space-xs, .25rem);
349
- border: 1px solid var(--c15t-border, #e3e3e3);
350
+ border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
350
351
  border-radius: var(--c15t-radius-md, .5rem);
351
- background-color: var(--c15t-surface, #fff);
352
- min-height: 30px;
352
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
353
+ min-height: 2rem;
353
354
  color: var(--c15t-text, #171717);
354
- font-family: inherit;
355
- font-size: 12px;
355
+ font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
356
+ font-size: var(--c15t-font-size-sm, .875rem);
356
357
  font-weight: var(--c15t-font-weight-medium, 500);
358
+ line-height: var(--c15t-line-height-tight, 1.25);
359
+ box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000000d);
357
360
  cursor: pointer;
358
361
  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));
359
- padding: 5px 10px;
360
- line-height: 1;
362
+ padding: .375rem .625rem;
361
363
  display: inline-flex;
362
- box-shadow: 0 1px 1px #0000000a;
363
364
  }
364
365
 
365
366
  .btn-evRVlh:hover {
366
- background-color: var(--c15t-surface-hover, #f7f7f7);
367
+ background-color: var(--c15t-devtools-surface-subtle, #f7f7f7);
367
368
  border-color: var(--c15t-border-hover, #c9c9c9);
368
- box-shadow: 0 2px 6px #00000014;
369
+ box-shadow: var(--c15t-shadow-md, 0 4px 12px #00000014);
369
370
  }
370
371
 
371
372
  .btn-evRVlh:focus-visible {
372
- outline: 2px solid var(--c15t-primary, #335cff);
373
- outline-offset: 1px;
373
+ box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000000d), 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
374
+ outline: none;
374
375
  }
375
376
 
376
377
  .btn-evRVlh:active {
377
- box-shadow: 0 1px 2px #00000014;
378
+ box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000000d);
379
+ transform: scale(.98);
378
380
  }
379
381
 
380
382
  .btn-evRVlh:disabled {
@@ -387,6 +389,7 @@ var __webpack_modules__ = {
387
389
  background-color: var(--c15t-primary, #335cff);
388
390
  border-color: var(--c15t-primary, #335cff);
389
391
  color: var(--c15t-text-on-primary, #fff);
392
+ box-shadow: none;
390
393
  }
391
394
 
392
395
  .btnPrimary-dA6nqY:hover {
@@ -398,6 +401,7 @@ var __webpack_modules__ = {
398
401
  background-color: var(--c15t-devtools-badge-error, #ef4343);
399
402
  border-color: var(--c15t-devtools-badge-error, #ef4343);
400
403
  color: var(--c15t-text-on-primary, #fff);
404
+ box-shadow: none;
401
405
  }
402
406
 
403
407
  .btnDanger-eDnqOX:hover {
@@ -406,10 +410,10 @@ var __webpack_modules__ = {
406
410
  }
407
411
 
408
412
  .btnSmall-TjXoqZ {
413
+ min-height: 1.75rem;
414
+ font-size: var(--c15t-devtools-font-size-xs, .75rem);
409
415
  border-radius: var(--c15t-radius-sm, .375rem);
410
- min-height: 26px;
411
- padding: 3px 8px;
412
- font-size: 11px;
416
+ padding: .25rem .5rem;
413
417
  }
414
418
 
415
419
  .btnIcon-fiYQAh {
@@ -419,19 +423,22 @@ var __webpack_modules__ = {
419
423
  }
420
424
 
421
425
  .input-IeTcCs {
422
- width: 100%;
423
- padding: var(--c15t-space-xs, .25rem) var(--c15t-space-sm, .5rem);
424
- border: 1px solid var(--c15t-border, #e3e3e3);
426
+ border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
425
427
  border-radius: var(--c15t-radius-md, .5rem);
426
- background-color: var(--c15t-surface, #fff);
428
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
429
+ width: 100%;
430
+ min-height: 2rem;
427
431
  color: var(--c15t-text, #171717);
428
- font-family: inherit;
429
- font-size: var(--c15t-font-size-sm, .875rem);
430
- transition: border-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
432
+ font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
433
+ font-size: var(--c15t-devtools-font-size-xs, .75rem);
434
+ line-height: var(--c15t-line-height-tight, 1.25);
435
+ 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));
436
+ padding: .375rem .625rem;
431
437
  }
432
438
 
433
439
  .input-IeTcCs:focus {
434
- border-color: var(--c15t-primary, #335cff);
440
+ border-color: var(--c15t-devtools-focus-ring, #335cff);
441
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--c15t-devtools-focus-ring, #335cff) 25%, transparent);
435
442
  outline: none;
436
443
  }
437
444
 
@@ -440,30 +447,35 @@ var __webpack_modules__ = {
440
447
  }
441
448
 
442
449
  .inputSmall-pJyXcL {
443
- padding: 2px var(--c15t-space-xs, .25rem);
450
+ min-height: 1.625rem;
444
451
  font-size: var(--c15t-devtools-font-size-xs, .75rem);
452
+ padding: .25rem .4375rem;
445
453
  }
446
454
 
447
455
  .select-byJ1WM {
448
- width: 100%;
449
- padding: var(--c15t-space-xs, .25rem) var(--c15t-space-sm, .5rem);
450
- border: 1px solid var(--c15t-border, #e3e3e3);
456
+ border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
451
457
  border-radius: var(--c15t-radius-md, .5rem);
452
- background-color: var(--c15t-surface, #fff);
458
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
459
+ width: 100%;
460
+ min-height: 2rem;
453
461
  color: var(--c15t-text, #171717);
454
- font-family: inherit;
462
+ font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
455
463
  font-size: var(--c15t-devtools-font-size-xs, .75rem);
464
+ line-height: var(--c15t-line-height-tight, 1.25);
456
465
  cursor: pointer;
466
+ 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));
467
+ padding: .375rem .625rem;
457
468
  }
458
469
 
459
470
  .select-byJ1WM:focus {
460
- border-color: var(--c15t-primary, #335cff);
471
+ border-color: var(--c15t-devtools-focus-ring, #335cff);
472
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--c15t-devtools-focus-ring, #335cff) 25%, transparent);
461
473
  outline: none;
462
474
  }
463
475
 
464
476
  .grid-LlrmEz {
465
477
  gap: var(--c15t-space-sm, .5rem);
466
- padding: var(--c15t-space-sm, .5rem) var(--c15t-space-md, 1rem);
478
+ padding: var(--c15t-space-md, 1rem);
467
479
  display: grid;
468
480
  }
469
481
 
@@ -476,42 +488,51 @@ var __webpack_modules__ = {
476
488
  }
477
489
 
478
490
  .gridCard-Qm5xxI {
479
- padding: var(--c15t-space-sm, .5rem) var(--c15t-space-md, .75rem);
480
- border: 1px solid var(--c15t-border, #e3e3e3);
481
- border-radius: var(--c15t-radius-md, .5rem);
482
- background-color: var(--c15t-surface, #fff);
483
- transition: border-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
484
491
  justify-content: space-between;
485
492
  align-items: center;
493
+ gap: var(--c15t-space-sm, .5rem);
494
+ border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
495
+ border-radius: var(--c15t-radius-md, .5rem);
496
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
497
+ min-height: 2.75rem;
498
+ box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000000d);
499
+ 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));
500
+ padding: .5625rem .75rem;
486
501
  display: flex;
487
502
  }
488
503
 
489
504
  .gridCard-Qm5xxI:hover {
490
505
  border-color: var(--c15t-border-hover, #c9c9c9);
506
+ background-color: var(--c15t-devtools-surface-subtle, #fafafa);
491
507
  }
492
508
 
493
509
  .gridCardTitle-HjXETp {
494
510
  font-size: var(--c15t-devtools-font-size-xs, .75rem);
495
511
  font-weight: var(--c15t-font-weight-medium, 500);
496
512
  color: var(--c15t-text, #171717);
513
+ line-height: var(--c15t-line-height-tight, 1.25);
497
514
  }
498
515
 
499
516
  .listItem-XUKGIo {
500
- padding: var(--c15t-space-xs, .25rem) var(--c15t-space-md, 1rem);
501
- border-bottom: 1px solid var(--c15t-border, #e3e3e3);
502
517
  justify-content: space-between;
503
518
  align-items: center;
519
+ gap: var(--c15t-space-sm, .5rem);
520
+ border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
521
+ border-radius: var(--c15t-radius-md, .5rem);
522
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
523
+ margin-bottom: .375rem;
524
+ padding: .625rem .75rem;
504
525
  display: flex;
505
526
  }
506
527
 
507
528
  .listItem-XUKGIo:last-child {
508
- border-bottom: none;
529
+ margin-bottom: 0;
509
530
  }
510
531
 
511
532
  .listItemContent-WDBF1N {
512
533
  flex-direction: column;
513
534
  flex: 1;
514
- gap: 2px;
535
+ gap: .1875rem;
515
536
  min-width: 0;
516
537
  display: flex;
517
538
  }
@@ -525,6 +546,7 @@ var __webpack_modules__ = {
525
546
  .listItemDescription-E6JHyZ {
526
547
  font-size: var(--c15t-devtools-font-size-xs, .75rem);
527
548
  color: var(--c15t-text-muted, #737373);
549
+ line-height: var(--c15t-line-height-tight, 1.25);
528
550
  text-overflow: ellipsis;
529
551
  white-space: nowrap;
530
552
  overflow: hidden;
@@ -538,8 +560,8 @@ var __webpack_modules__ = {
538
560
  }
539
561
 
540
562
  .section-a197cB {
541
- padding: var(--c15t-space-sm, .5rem) var(--c15t-space-md, 1rem);
542
- border-bottom: 1px solid var(--c15t-border, #e3e3e3);
563
+ border-bottom: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
564
+ padding: .75rem 1rem;
543
565
  }
544
566
 
545
567
  .section-a197cB:last-child {
@@ -547,9 +569,10 @@ var __webpack_modules__ = {
547
569
  }
548
570
 
549
571
  .sectionHeader-Xcljcw {
550
- margin-bottom: var(--c15t-space-sm, .5rem);
551
572
  justify-content: space-between;
552
573
  align-items: center;
574
+ gap: .5rem;
575
+ margin-bottom: .625rem;
553
576
  display: flex;
554
577
  }
555
578
 
@@ -558,47 +581,49 @@ var __webpack_modules__ = {
558
581
  font-weight: var(--c15t-font-weight-semibold, 600);
559
582
  color: var(--c15t-text-muted, #737373);
560
583
  text-transform: uppercase;
561
- letter-spacing: .5px;
584
+ letter-spacing: .04em;
562
585
  }
563
586
 
564
587
  .overrideField-keNdpJ {
565
588
  flex-direction: column;
566
- gap: 3px;
589
+ gap: .3125rem;
567
590
  margin-bottom: 0;
568
591
  display: flex;
569
592
  }
570
593
 
571
594
  .overrideLabel-ApMoTw {
595
+ font-size: var(--c15t-devtools-font-size-xs, .75rem);
596
+ font-weight: var(--c15t-font-weight-semibold, 600);
572
597
  color: var(--c15t-text-muted, #737373);
573
- font-size: 11px;
574
- font-weight: 600;
598
+ line-height: var(--c15t-line-height-tight, 1.25);
575
599
  }
576
600
 
577
601
  .overrideHint-yCfwGt {
578
- color: var(--c15t-devtools-text-muted, #737373);
579
- margin-top: 6px;
580
- font-size: 11px;
602
+ font-size: var(--c15t-devtools-font-size-xs, .75rem);
603
+ color: var(--c15t-text-muted, #737373);
604
+ line-height: var(--c15t-line-height-tight, 1.25);
605
+ margin-top: .5rem;
581
606
  }
582
607
 
583
608
  .overrideActions-imdcn7 {
584
- border-top: 1px dashed var(--c15t-border, #e3e3e3);
609
+ border-top: 1px dashed var(--c15t-devtools-border-strong, #e3e3e3);
585
610
  justify-content: space-between;
586
611
  align-items: center;
587
- gap: 8px;
588
- margin-top: 8px;
589
- padding-top: 8px;
612
+ gap: .5rem;
613
+ margin-top: .625rem;
614
+ padding-top: .625rem;
590
615
  display: flex;
591
616
  }
592
617
 
593
618
  .overrideActionButtons-gYOx1e {
594
619
  flex-wrap: wrap;
595
- gap: 6px;
620
+ gap: .375rem;
596
621
  display: flex;
597
622
  }
598
623
 
599
624
  .overrideStatus-sty_qS {
625
+ font-size: var(--c15t-devtools-font-size-xs, .75rem);
600
626
  color: var(--c15t-text-muted, #737373);
601
- font-size: 11px;
602
627
  }
603
628
 
604
629
  .overrideStatusDirty-OUdDMw {
@@ -606,9 +631,10 @@ var __webpack_modules__ = {
606
631
  }
607
632
 
608
633
  .infoRow-RlB_0h {
609
- padding: var(--c15t-space-xs, .25rem) 0;
610
634
  justify-content: space-between;
611
635
  align-items: center;
636
+ gap: .5rem;
637
+ padding: .25rem 0;
612
638
  display: flex;
613
639
  }
614
640
 
@@ -621,6 +647,7 @@ var __webpack_modules__ = {
621
647
  font-size: var(--c15t-devtools-font-size-xs, .75rem);
622
648
  font-weight: var(--c15t-font-weight-medium, 500);
623
649
  color: var(--c15t-text, #171717);
650
+ font-variant-numeric: tabular-nums;
624
651
  font-family: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;
625
652
  }
626
653
 
@@ -631,18 +658,27 @@ var __webpack_modules__ = {
631
658
  flex-direction: column;
632
659
  justify-content: center;
633
660
  align-items: center;
661
+ gap: .375rem;
634
662
  display: flex;
635
663
  }
636
664
 
637
665
  .emptyStateIcon-WHFkX8 {
666
+ opacity: .55;
638
667
  width: 32px;
639
668
  height: 32px;
640
- margin-bottom: var(--c15t-space-sm, .5rem);
641
- opacity: .5;
642
669
  }
643
670
 
644
671
  .emptyStateText-TaLvAJ {
645
672
  font-size: var(--c15t-font-size-sm, .875rem);
673
+ line-height: var(--c15t-line-height-normal, 1.5);
674
+ }
675
+
676
+ .disconnectedState-dOtZBG {
677
+ padding: var(--c15t-space-xl, 2rem);
678
+ text-align: center;
679
+ font-size: var(--c15t-font-size-sm, .875rem);
680
+ color: var(--c15t-text-muted, #737373);
681
+ line-height: var(--c15t-line-height-normal, 1.5);
646
682
  }
647
683
 
648
684
  @media (prefers-reduced-motion: reduce) {
@@ -709,7 +745,8 @@ var __webpack_modules__ = {
709
745
  infoValue: "infoValue-flMl_e",
710
746
  emptyState: "emptyState-QcmzTQ",
711
747
  emptyStateIcon: "emptyStateIcon-WHFkX8",
712
- emptyStateText: "emptyStateText-TaLvAJ"
748
+ emptyStateText: "emptyStateText-TaLvAJ",
749
+ disconnectedState: "disconnectedState-dOtZBG"
713
750
  };
714
751
  const __rspack_default_export = ___CSS_LOADER_EXPORT___;
715
752
  },
@@ -738,9 +775,9 @@ var __webpack_modules__ = {
738
775
  .floatingButton-Gw8MtJ {
739
776
  width: var(--c15t-devtools-button-size, 40px);
740
777
  height: var(--c15t-devtools-button-size, 40px);
741
- border: 1px solid var(--c15t-border, #e3e3e3);
778
+ border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
742
779
  border-radius: var(--c15t-radius-full, 9999px);
743
- background-color: var(--c15t-surface, #fff);
780
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
744
781
  box-shadow: var(--c15t-shadow-lg, 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a);
745
782
  cursor: grab;
746
783
  z-index: var(--c15t-devtools-z-index, 99999);
@@ -768,13 +805,13 @@ var __webpack_modules__ = {
768
805
  }
769
806
 
770
807
  .floatingButton-Gw8MtJ:focus-visible {
771
- outline: 2px solid var(--c15t-primary, #335cff);
772
- outline-offset: 2px;
808
+ box-shadow: var(--c15t-shadow-lg, 0 8px 24px #0000001f), 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
809
+ outline: none;
773
810
  }
774
811
 
775
812
  .floatingButton-Gw8MtJ:active {
776
813
  cursor: grabbing;
777
- transform: scale(1.02);
814
+ transform: scale(.98);
778
815
  }
779
816
 
780
817
  .floatingButtonIcon-cHWefk {
@@ -815,6 +852,7 @@ var __webpack_modules__ = {
815
852
 
816
853
  .backdrop-LhVMB5 {
817
854
  background-color: var(--c15t-overlay, #00000080);
855
+ backdrop-filter: blur(1px);
818
856
  z-index: calc(var(--c15t-devtools-z-index, 99999) + 1);
819
857
  position: fixed;
820
858
  inset: 0;
@@ -823,10 +861,10 @@ var __webpack_modules__ = {
823
861
  .panel-jtWove {
824
862
  width: var(--c15t-devtools-panel-width, 480px);
825
863
  max-height: var(--c15t-devtools-panel-max-height, 560px);
826
- background-color: var(--c15t-surface, #fff);
827
- border: 1px solid var(--c15t-border, #e3e3e3);
864
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
865
+ border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
828
866
  border-radius: var(--c15t-radius-lg, .75rem);
829
- box-shadow: var(--c15t-shadow-lg, 0 8px 24px #0000001f);
867
+ box-shadow: var(--c15t-shadow-lg, 0 10px 28px #00000029);
830
868
  z-index: calc(var(--c15t-devtools-z-index, 99999) + 2);
831
869
  flex-direction: column;
832
870
  display: flex;
@@ -859,11 +897,11 @@ var __webpack_modules__ = {
859
897
  }
860
898
 
861
899
  .header-xluoTr {
862
- padding: var(--c15t-space-sm, .5rem) var(--c15t-space-md, 1rem);
863
- border-bottom: 1px solid var(--c15t-border, #e3e3e3);
900
+ border-bottom: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
864
901
  background-color: var(--c15t-devtools-surface-muted, #f5f5f5);
865
902
  justify-content: space-between;
866
903
  align-items: center;
904
+ padding: .6875rem .875rem;
867
905
  display: flex;
868
906
  }
869
907
 
@@ -872,6 +910,7 @@ var __webpack_modules__ = {
872
910
  gap: var(--c15t-space-sm, .5rem);
873
911
  font-size: var(--c15t-font-size-sm, .875rem);
874
912
  font-weight: var(--c15t-font-weight-semibold, 600);
913
+ line-height: var(--c15t-line-height-tight, 1.25);
875
914
  color: var(--c15t-text, #171717);
876
915
  display: flex;
877
916
  }
@@ -883,9 +922,9 @@ var __webpack_modules__ = {
883
922
  }
884
923
 
885
924
  .closeButton-Yto0Nb {
886
- border-radius: var(--c15t-radius-sm, .25rem);
887
- width: 28px;
888
- height: 28px;
925
+ border-radius: var(--c15t-radius-md, .5rem);
926
+ width: 2rem;
927
+ height: 2rem;
889
928
  color: var(--c15t-text-muted, #737373);
890
929
  cursor: pointer;
891
930
  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));
@@ -898,13 +937,13 @@ var __webpack_modules__ = {
898
937
  }
899
938
 
900
939
  .closeButton-Yto0Nb:hover {
901
- background-color: var(--c15t-surface-hover, #f7f7f7);
940
+ background-color: var(--c15t-devtools-surface-subtle, #f7f7f7);
902
941
  color: var(--c15t-text, #171717);
903
942
  }
904
943
 
905
944
  .closeButton-Yto0Nb:focus-visible {
906
- outline: 2px solid var(--c15t-primary, #335cff);
907
- outline-offset: 1px;
945
+ box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
946
+ outline: none;
908
947
  }
909
948
 
910
949
  .closeButtonIcon-fVlR1I {
@@ -912,33 +951,71 @@ var __webpack_modules__ = {
912
951
  height: 16px;
913
952
  }
914
953
 
954
+ .inlineActionButton-Ky8BmN {
955
+ border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
956
+ border-radius: var(--c15t-radius-sm, .375rem);
957
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
958
+ min-height: 1.625rem;
959
+ color: var(--c15t-text, #171717);
960
+ font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
961
+ font-size: var(--c15t-devtools-font-size-xs, .75rem);
962
+ font-weight: var(--c15t-font-weight-medium, 500);
963
+ line-height: var(--c15t-line-height-tight, 1.25);
964
+ cursor: pointer;
965
+ 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));
966
+ justify-content: center;
967
+ align-items: center;
968
+ padding: .25rem .5rem;
969
+ display: inline-flex;
970
+ }
971
+
972
+ .inlineActionButton-Ky8BmN:hover {
973
+ background-color: var(--c15t-devtools-surface-subtle, #f7f7f7);
974
+ border-color: var(--c15t-border-hover, #c9c9c9);
975
+ }
976
+
977
+ .inlineActionButton-Ky8BmN:focus-visible {
978
+ box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
979
+ outline: none;
980
+ }
981
+
915
982
  .content-yDMYfG {
983
+ scrollbar-gutter: stable;
916
984
  overscroll-behavior: contain;
917
985
  -webkit-overflow-scrolling: touch;
986
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
918
987
  flex: auto;
919
988
  min-height: 200px;
920
- overflow: hidden auto;
989
+ overflow: hidden scroll;
921
990
  }
922
991
 
923
992
  .footer-ESbmwQ {
924
- padding: var(--c15t-space-xs, .25rem) var(--c15t-space-md, 1rem);
925
- border-top: 1px solid var(--c15t-border, #e3e3e3);
993
+ border-top: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
926
994
  background-color: var(--c15t-devtools-surface-muted, #f5f5f5);
927
995
  font-size: var(--c15t-devtools-font-size-xs, .75rem);
928
996
  color: var(--c15t-text-muted, #737373);
929
997
  justify-content: space-between;
930
998
  align-items: center;
999
+ gap: .5rem;
1000
+ padding: .5rem .75rem;
931
1001
  display: flex;
932
1002
  }
933
1003
 
934
1004
  .footerStatus-rlb99A {
935
1005
  align-items: center;
936
- gap: var(--c15t-space-xs, .25rem);
1006
+ gap: .375rem;
1007
+ min-width: 0;
937
1008
  display: flex;
938
1009
  }
939
1010
 
1011
+ .footerMeta-Vdtxdk {
1012
+ opacity: .75;
1013
+ white-space: nowrap;
1014
+ }
1015
+
940
1016
  .statusDot-hYJoej {
941
1017
  border-radius: var(--c15t-radius-full, 9999px);
1018
+ flex-shrink: 0;
942
1019
  width: 6px;
943
1020
  height: 6px;
944
1021
  }
@@ -977,6 +1054,7 @@ var __webpack_modules__ = {
977
1054
  font-size: var(--c15t-font-size-sm, .875rem);
978
1055
  color: var(--c15t-text-muted, #737373);
979
1056
  max-width: 280px;
1057
+ line-height: var(--c15t-line-height-normal, 1.5);
980
1058
  }
981
1059
 
982
1060
  @media (prefers-reduced-motion: reduce) {
@@ -993,17 +1071,17 @@ var __webpack_modules__ = {
993
1071
  }
994
1072
 
995
1073
  .dropdownMenu-aKK18l {
996
- min-width: 200px;
997
- padding: var(--c15t-space-xs, .25rem);
998
- border: 1px solid var(--c15t-border, #e3e3e3);
1074
+ border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
999
1075
  border-radius: var(--c15t-radius-lg, .75rem);
1000
- background-color: var(--c15t-surface, #fff);
1076
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
1077
+ min-width: 200px;
1001
1078
  box-shadow: var(--c15t-shadow-lg, 0 8px 24px #0000001f);
1002
1079
  z-index: calc(var(--c15t-devtools-z-index, 99999) + 1);
1003
1080
  opacity: 0;
1004
1081
  transform-origin: 0 100%;
1005
1082
  pointer-events: none;
1006
1083
  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));
1084
+ padding: .375rem;
1007
1085
  position: fixed;
1008
1086
  transform: scale(.95)translateY(8px);
1009
1087
  }
@@ -1031,34 +1109,35 @@ var __webpack_modules__ = {
1031
1109
  }
1032
1110
 
1033
1111
  .menuItem-kBbHRP {
1034
- align-items: center;
1035
- gap: var(--c15t-space-sm, .5rem);
1036
- width: 100%;
1037
- padding: var(--c15t-space-sm, .5rem) var(--c15t-space-md, .75rem);
1038
1112
  border-radius: var(--c15t-radius-md, .5rem);
1113
+ width: 100%;
1039
1114
  color: var(--c15t-text, #171717);
1040
- font-size: var(--c15t-font-size-sm, .875rem);
1115
+ font-size: var(--c15t-devtools-font-size-xs, .75rem);
1041
1116
  font-weight: var(--c15t-font-weight-medium, 500);
1117
+ line-height: var(--c15t-line-height-tight, 1.25);
1042
1118
  text-align: left;
1043
1119
  cursor: pointer;
1044
1120
  transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
1045
1121
  background: none;
1046
1122
  border: none;
1123
+ align-items: center;
1124
+ gap: .625rem;
1125
+ padding: .5rem .625rem;
1047
1126
  display: flex;
1048
1127
  }
1049
1128
 
1050
1129
  .menuItem-kBbHRP:hover {
1051
- background-color: var(--c15t-surface-hover, #f2f2f2);
1130
+ background-color: var(--c15t-devtools-surface-subtle, #f2f2f2);
1052
1131
  }
1053
1132
 
1054
1133
  .menuItem-kBbHRP:focus-visible {
1055
- outline: 2px solid var(--c15t-primary, #335cff);
1056
- outline-offset: -2px;
1134
+ box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
1135
+ outline: none;
1057
1136
  }
1058
1137
 
1059
1138
  .menuItemIcon-P3pP5K {
1060
- width: 20px;
1061
- height: 20px;
1139
+ width: 1rem;
1140
+ height: 1rem;
1062
1141
  color: var(--c15t-text-muted, #737373);
1063
1142
  flex-shrink: 0;
1064
1143
  }
@@ -1071,6 +1150,7 @@ var __webpack_modules__ = {
1071
1150
  font-size: var(--c15t-devtools-font-size-xs, .75rem);
1072
1151
  color: var(--c15t-text-muted, #737373);
1073
1152
  font-weight: var(--c15t-font-weight-normal, 400);
1153
+ margin-top: .125rem;
1074
1154
  }
1075
1155
 
1076
1156
  .menuItemContent-hBlruV {
@@ -1086,8 +1166,8 @@ var __webpack_modules__ = {
1086
1166
  .menuItemToggleTrack-gDp_f3 {
1087
1167
  background-color: var(--c15t-switch-track, #d9d9d9);
1088
1168
  border-radius: var(--c15t-radius-full, 9999px);
1089
- width: 36px;
1090
- height: 20px;
1169
+ width: 2rem;
1170
+ height: 1.25rem;
1091
1171
  transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
1092
1172
  position: relative;
1093
1173
  }
@@ -1095,21 +1175,22 @@ var __webpack_modules__ = {
1095
1175
  .menuItemToggleThumb-ioqqyc {
1096
1176
  background-color: var(--c15t-switch-thumb, #fff);
1097
1177
  border-radius: var(--c15t-radius-full, 9999px);
1098
- width: 16px;
1099
- height: 16px;
1100
- box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000001a);
1178
+ width: .75rem;
1179
+ height: .75rem;
1180
+ box-shadow: 0 0 0 1px var(--c15t-border, #e3e3e3);
1101
1181
  transition: transform var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
1102
1182
  position: absolute;
1103
- top: 2px;
1183
+ top: 50%;
1104
1184
  left: 2px;
1185
+ transform: translateY(-50%);
1105
1186
  }
1106
1187
 
1107
1188
  .menuItemToggleChecked-K3BPtk .menuItemToggleTrack-gDp_f3 {
1108
- background-color: var(--c15t-switch-track-checked, #335cff);
1189
+ background-color: var(--c15t-switch-track-active, #335cff);
1109
1190
  }
1110
1191
 
1111
1192
  .menuItemToggleChecked-K3BPtk .menuItemToggleThumb-ioqqyc {
1112
- transform: translateX(16px);
1193
+ transform: translate(1rem, -50%);
1113
1194
  }
1114
1195
 
1115
1196
  .menuDivider-JIBdhU {
@@ -1145,9 +1226,11 @@ var __webpack_modules__ = {
1145
1226
  headerLogo: "headerLogo-PxJ_w1",
1146
1227
  closeButton: "closeButton-Yto0Nb",
1147
1228
  closeButtonIcon: "closeButtonIcon-fVlR1I",
1229
+ inlineActionButton: "inlineActionButton-Ky8BmN",
1148
1230
  content: "content-yDMYfG",
1149
1231
  footer: "footer-ESbmwQ",
1150
1232
  footerStatus: "footerStatus-rlb99A",
1233
+ footerMeta: "footerMeta-Vdtxdk",
1151
1234
  statusDot: "statusDot-hYJoej",
1152
1235
  statusConnected: "statusConnected-hPSUgS",
1153
1236
  statusDisconnected: "statusDisconnected-HIpcee",
@@ -1186,62 +1269,63 @@ var __webpack_modules__ = {
1186
1269
  ___CSS_LOADER_EXPORT___.push([
1187
1270
  module.id,
1188
1271
  `.tabList-IyuiBE {
1272
+ border-bottom: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
1273
+ background-color: var(--c15t-devtools-surface-subtle, #fafafa);
1189
1274
  align-items: center;
1190
- gap: var(--c15t-space-xs, .25rem);
1191
- padding: var(--c15t-space-sm, .5rem) var(--c15t-space-sm, .5rem);
1192
- border-bottom: 1px solid var(--c15t-border, #e3e3e3);
1193
- background-color: var(--c15t-surface, #fff);
1194
- scrollbar-width: none;
1195
- -ms-overflow-style: none;
1196
- scroll-padding-inline-end: var(--c15t-space-sm, .5rem);
1275
+ gap: .375rem;
1276
+ padding: .75rem;
1197
1277
  display: flex;
1198
- overflow-x: auto;
1199
1278
  }
1200
1279
 
1201
- .tabList-IyuiBE:after {
1202
- content: "";
1203
- flex: 0 0 var(--c15t-space-sm, .5rem);
1204
- }
1205
-
1206
- .tabList-IyuiBE::-webkit-scrollbar {
1207
- display: none;
1280
+ .tabStrip-_KrWe4 {
1281
+ align-items: center;
1282
+ gap: var(--c15t-space-xs, .25rem);
1283
+ flex: auto;
1284
+ min-width: 0;
1285
+ display: flex;
1286
+ overflow: hidden;
1208
1287
  }
1209
1288
 
1210
1289
  .tab-yfDEqg {
1211
- align-items: center;
1212
- gap: var(--c15t-space-xs, .25rem);
1213
1290
  border-radius: var(--c15t-radius-md, .5rem);
1291
+ min-height: 1.875rem;
1214
1292
  color: var(--c15t-text-muted, #737373);
1215
- font-family: inherit;
1216
- font-size: 11px;
1293
+ font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
1294
+ font-size: var(--c15t-devtools-font-size-xs, .75rem);
1217
1295
  font-weight: var(--c15t-font-weight-medium, 500);
1296
+ line-height: var(--c15t-line-height-tight, 1.25);
1218
1297
  cursor: pointer;
1219
1298
  white-space: nowrap;
1220
- 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));
1299
+ 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));
1221
1300
  background-color: #0000;
1222
- border: none;
1223
- padding: 3px 7px;
1301
+ border: 1px solid #0000;
1302
+ flex-shrink: 0;
1303
+ align-items: center;
1304
+ gap: .375rem;
1305
+ padding: .25rem .625rem;
1224
1306
  display: flex;
1225
1307
  }
1226
1308
 
1227
1309
  .tab-yfDEqg:hover {
1228
- background-color: var(--c15t-surface-hover, #f7f7f7);
1310
+ background-color: var(--c15t-devtools-surface-muted, #f7f7f7);
1229
1311
  color: var(--c15t-text, #171717);
1230
1312
  }
1231
1313
 
1232
1314
  .tab-yfDEqg:focus-visible {
1233
- outline: 2px solid var(--c15t-primary, #335cff);
1234
- outline-offset: 1px;
1315
+ box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
1316
+ outline: none;
1235
1317
  }
1236
1318
 
1237
1319
  .tabActive-r4hing {
1238
- background-color: var(--c15t-primary, #335cff);
1239
- color: var(--c15t-text-on-primary, #fff);
1320
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
1321
+ border-color: var(--c15t-devtools-border-strong, #e3e3e3);
1322
+ color: var(--c15t-text, #171717);
1323
+ box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000000d);
1240
1324
  }
1241
1325
 
1242
1326
  .tabActive-r4hing:hover {
1243
- background-color: var(--c15t-primary-hover, #03f);
1244
- color: var(--c15t-text-on-primary, #fff);
1327
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
1328
+ color: var(--c15t-text, #171717);
1245
1329
  }
1246
1330
 
1247
1331
  .tabIcon-U9tnu0 {
@@ -1250,6 +1334,131 @@ var __webpack_modules__ = {
1250
1334
  height: 14px;
1251
1335
  }
1252
1336
 
1337
+ .tabHidden-HBXYSd {
1338
+ display: none;
1339
+ }
1340
+
1341
+ .overflowContainer-TTw9DO {
1342
+ flex-shrink: 0;
1343
+ position: relative;
1344
+ }
1345
+
1346
+ .overflowContainerHidden-sQa_XZ {
1347
+ display: none;
1348
+ }
1349
+
1350
+ .overflowButton-tKq4FF {
1351
+ border-radius: var(--c15t-radius-md, .5rem);
1352
+ width: 1.875rem;
1353
+ height: 1.875rem;
1354
+ color: var(--c15t-text-muted, #737373);
1355
+ cursor: pointer;
1356
+ 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));
1357
+ background-color: #0000;
1358
+ border: 1px solid #0000;
1359
+ justify-content: center;
1360
+ align-items: center;
1361
+ padding: 0;
1362
+ display: inline-flex;
1363
+ }
1364
+
1365
+ .overflowButton-tKq4FF:hover {
1366
+ background-color: var(--c15t-devtools-surface-muted, #f7f7f7);
1367
+ color: var(--c15t-text, #171717);
1368
+ }
1369
+
1370
+ .overflowButton-tKq4FF:focus-visible {
1371
+ box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
1372
+ outline: none;
1373
+ }
1374
+
1375
+ .overflowButtonIcon-FSurfC {
1376
+ justify-content: center;
1377
+ align-items: center;
1378
+ width: 14px;
1379
+ height: 14px;
1380
+ display: inline-flex;
1381
+ }
1382
+
1383
+ .overflowMenu-TST0eZ {
1384
+ border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
1385
+ border-radius: var(--c15t-radius-md, .5rem);
1386
+ background-color: var(--c15t-devtools-surface-elevated, #fff);
1387
+ min-width: 10rem;
1388
+ box-shadow: var(--c15t-shadow-md, 0 4px 12px #00000014);
1389
+ opacity: 0;
1390
+ transform-origin: 100% 0;
1391
+ pointer-events: none;
1392
+ z-index: 10;
1393
+ 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));
1394
+ flex-direction: column;
1395
+ gap: .125rem;
1396
+ padding: .3125rem;
1397
+ display: flex;
1398
+ position: absolute;
1399
+ top: calc(100% + .375rem);
1400
+ right: 0;
1401
+ transform: translateY(-4px)scale(.98);
1402
+ }
1403
+
1404
+ .overflowMenu-TST0eZ[data-state="open"] {
1405
+ opacity: 1;
1406
+ pointer-events: auto;
1407
+ transform: translateY(0)scale(1);
1408
+ }
1409
+
1410
+ .overflowItem-y5Pz7k {
1411
+ border-radius: var(--c15t-radius-sm, .375rem);
1412
+ min-height: 1.75rem;
1413
+ color: var(--c15t-text, #171717);
1414
+ font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
1415
+ font-size: var(--c15t-devtools-font-size-xs, .75rem);
1416
+ font-weight: var(--c15t-font-weight-medium, 500);
1417
+ line-height: var(--c15t-line-height-tight, 1.25);
1418
+ text-align: left;
1419
+ cursor: pointer;
1420
+ white-space: nowrap;
1421
+ 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));
1422
+ background-color: #0000;
1423
+ border: none;
1424
+ align-items: center;
1425
+ gap: .5rem;
1426
+ padding: .3125rem .5rem;
1427
+ display: inline-flex;
1428
+ }
1429
+
1430
+ .overflowItem-y5Pz7k:hover {
1431
+ background-color: var(--c15t-devtools-surface-subtle, #fafafa);
1432
+ }
1433
+
1434
+ .overflowItem-y5Pz7k:focus-visible {
1435
+ box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
1436
+ outline: none;
1437
+ }
1438
+
1439
+ .overflowItemActive-mzVG1T {
1440
+ background-color: var(--c15t-devtools-accent-soft, #ebefff);
1441
+ color: var(--c15t-text, #171717);
1442
+ }
1443
+
1444
+ .overflowItemDisabled-dcHX3K {
1445
+ opacity: .5;
1446
+ cursor: not-allowed;
1447
+ }
1448
+
1449
+ .overflowItemIcon-fz291V {
1450
+ flex-shrink: 0;
1451
+ justify-content: center;
1452
+ align-items: center;
1453
+ width: 14px;
1454
+ height: 14px;
1455
+ display: inline-flex;
1456
+ }
1457
+
1458
+ .overflowItemHidden-k4aawi {
1459
+ display: none;
1460
+ }
1461
+
1253
1462
  .tabDisabled-lDuv5l {
1254
1463
  opacity: .5;
1255
1464
  cursor: not-allowed;
@@ -1270,7 +1479,7 @@ var __webpack_modules__ = {
1270
1479
  }
1271
1480
 
1272
1481
  @media (prefers-reduced-motion: reduce) {
1273
- .tab-yfDEqg {
1482
+ .tab-yfDEqg, .overflowButton-tKq4FF, .overflowMenu-TST0eZ, .overflowItem-y5Pz7k {
1274
1483
  transition: none;
1275
1484
  }
1276
1485
  }
@@ -1286,9 +1495,21 @@ var __webpack_modules__ = {
1286
1495
  ]);
1287
1496
  ___CSS_LOADER_EXPORT___.locals = {
1288
1497
  tabList: "tabList-IyuiBE",
1498
+ tabStrip: "tabStrip-_KrWe4",
1289
1499
  tab: "tab-yfDEqg",
1290
1500
  tabActive: "tabActive-r4hing",
1291
1501
  tabIcon: "tabIcon-U9tnu0",
1502
+ tabHidden: "tabHidden-HBXYSd",
1503
+ overflowContainer: "overflowContainer-TTw9DO",
1504
+ overflowContainerHidden: "overflowContainerHidden-sQa_XZ",
1505
+ overflowButton: "overflowButton-tKq4FF",
1506
+ overflowButtonIcon: "overflowButtonIcon-FSurfC",
1507
+ overflowMenu: "overflowMenu-TST0eZ",
1508
+ overflowItem: "overflowItem-y5Pz7k",
1509
+ overflowItemActive: "overflowItemActive-mzVG1T",
1510
+ overflowItemDisabled: "overflowItemDisabled-dcHX3K",
1511
+ overflowItemIcon: "overflowItemIcon-fz291V",
1512
+ overflowItemHidden: "overflowItemHidden-k4aawi",
1292
1513
  tabDisabled: "tabDisabled-lDuv5l",
1293
1514
  tabPanel: "tabPanel-QKO8FX",
1294
1515
  tabPanelActive: "tabPanelActive-mrNlGE"
@@ -1312,6 +1533,15 @@ var __webpack_modules__ = {
1312
1533
  --c15t-devtools-button-size: 40px;
1313
1534
  --c15t-devtools-z-index: 99999;
1314
1535
  --c15t-devtools-surface-muted: var(--c15t-surface-hover, #f7f7f7);
1536
+ --c15t-devtools-surface-subtle: #fafafa;
1537
+ --c15t-devtools-surface-elevated: var(--c15t-surface, #fff);
1538
+ --c15t-devtools-border-strong: var(--c15t-border, #e3e3e3);
1539
+ --c15t-devtools-code-surface: #f7f7f7;
1540
+ --c15t-devtools-accent-soft: #ebefff;
1541
+ --c15t-devtools-focus-ring: var(--c15t-primary, #335cff);
1542
+ --c15t-devtools-text-muted: var(--c15t-text-muted, #737373);
1543
+ --c15t-devtools-font-size-sm: var(--c15t-font-size-sm, .875rem);
1544
+ --c15t-surface-muted: var(--c15t-devtools-surface-muted, #f7f7f7);
1315
1545
  --c15t-devtools-font-size-xs: .75rem;
1316
1546
  --c15t-devtools-badge-success: #21c45d;
1317
1547
  --c15t-devtools-badge-success-bg: #e4fbed;
@@ -1325,8 +1555,37 @@ var __webpack_modules__ = {
1325
1555
  --c15t-devtools-badge-neutral-bg: #f0f0f0;
1326
1556
  }
1327
1557
 
1558
+ :is(:global(.c15t-light), :global(.light)) {
1559
+ --c15t-devtools-surface-muted: var(--c15t-surface-hover, #f7f7f7);
1560
+ --c15t-devtools-surface-subtle: #fafafa;
1561
+ --c15t-devtools-surface-elevated: var(--c15t-surface, #fff);
1562
+ --c15t-devtools-border-strong: var(--c15t-border, #e3e3e3);
1563
+ --c15t-devtools-code-surface: #f7f7f7;
1564
+ --c15t-devtools-accent-soft: #ebefff;
1565
+ --c15t-devtools-badge-success-bg: #e4fbed;
1566
+ --c15t-devtools-badge-error-bg: #fde7e7;
1567
+ --c15t-devtools-badge-warning-bg: #fef7dc;
1568
+ --c15t-devtools-badge-info-bg: #dcebfe;
1569
+ --c15t-devtools-badge-neutral-bg: #f0f0f0;
1570
+ }
1571
+
1572
+ @supports (color: color-mix(in srgb, white, black)) {
1573
+ :root {
1574
+ --c15t-devtools-surface-muted: color-mix(in srgb, var(--c15t-surface-hover, #f7f7f7) 85%, var(--c15t-surface, #fff));
1575
+ --c15t-devtools-surface-subtle: color-mix(in srgb, var(--c15t-surface-hover, #f7f7f7) 55%, var(--c15t-surface, #fff));
1576
+ --c15t-devtools-border-strong: color-mix(in srgb, var(--c15t-border, #e3e3e3) 80%, var(--c15t-text-muted, #737373));
1577
+ --c15t-devtools-code-surface: color-mix(in srgb, var(--c15t-surface-hover, #f7f7f7) 70%, var(--c15t-surface, #fff));
1578
+ --c15t-devtools-accent-soft: color-mix(in srgb, var(--c15t-primary, #335cff) 12%, transparent);
1579
+ }
1580
+ }
1581
+
1328
1582
  :is(:global(.c15t-dark), :global(.dark)) {
1329
1583
  --c15t-devtools-surface-muted: var(--c15t-surface-hover, #292929);
1584
+ --c15t-devtools-surface-subtle: #242424;
1585
+ --c15t-devtools-surface-elevated: var(--c15t-surface, #1a1a1a);
1586
+ --c15t-devtools-border-strong: var(--c15t-border, #3d3d3d);
1587
+ --c15t-devtools-code-surface: #212121;
1588
+ --c15t-devtools-accent-soft: #335cff33;
1330
1589
  --c15t-devtools-badge-success-bg: #21c45d33;
1331
1590
  --c15t-devtools-badge-error-bg: #ef434333;
1332
1591
  --c15t-devtools-badge-warning-bg: #f59f0a33;
@@ -1335,8 +1594,13 @@ var __webpack_modules__ = {
1335
1594
  }
1336
1595
 
1337
1596
  @media (prefers-color-scheme: dark) {
1338
- :root {
1597
+ :global(:root:not(.light):not(.c15t-light)) {
1339
1598
  --c15t-devtools-surface-muted: var(--c15t-surface-hover, #292929);
1599
+ --c15t-devtools-surface-subtle: #242424;
1600
+ --c15t-devtools-surface-elevated: var(--c15t-surface, #1a1a1a);
1601
+ --c15t-devtools-border-strong: var(--c15t-border, #3d3d3d);
1602
+ --c15t-devtools-code-surface: #212121;
1603
+ --c15t-devtools-accent-soft: #335cff33;
1340
1604
  --c15t-devtools-badge-success-bg: #21c45d33;
1341
1605
  --c15t-devtools-badge-error-bg: #ef434333;
1342
1606
  --c15t-devtools-badge-warning-bg: #f59f0a33;
@@ -1844,7 +2108,7 @@ function renderer_button(options = {}) {
1844
2108
  type: options.type ?? 'button'
1845
2109
  });
1846
2110
  }
1847
- function span(options = {}) {
2111
+ function renderer_span(options = {}) {
1848
2112
  return createElement({
1849
2113
  ...options,
1850
2114
  tag: 'span'
@@ -1923,7 +2187,8 @@ panel_module_options.domAPI = styleDomAPI_default();
1923
2187
  panel_module_options.insertStyleElement = insertStyleElement_default();
1924
2188
  injectStylesIntoStyleTag_default()(panel_module.A, panel_module_options);
1925
2189
  const styles_panel_module = panel_module.A && panel_module.A.locals ? panel_module.A.locals : void 0;
1926
- const PREFERENCE_TRIGGER_SELECTORS = '[data-c15t-trigger], [aria-label*="privacy settings"], [aria-label*="preference"]';
2190
+ const PREFERENCE_TRIGGER_SELECTORS = '[data-c15t-trigger], [aria-label*="privacy settings" i], [aria-label*="preference" i]';
2191
+ const PREVIOUS_DISPLAY_ATTR = 'data-c15t-devtools-prev-display';
1927
2192
  function detectPreferenceTrigger() {
1928
2193
  const triggers = document.querySelectorAll(PREFERENCE_TRIGGER_SELECTORS);
1929
2194
  return triggers.length > 0;
@@ -1933,7 +2198,19 @@ function getPreferenceTriggerElements() {
1933
2198
  }
1934
2199
  function setPreferenceTriggerVisibility(visible) {
1935
2200
  const elements = getPreferenceTriggerElements();
1936
- for (const el of elements)el.style.display = visible ? '' : 'none';
2201
+ for (const el of elements){
2202
+ if (visible) {
2203
+ const previousDisplay = el.getAttribute(PREVIOUS_DISPLAY_ATTR);
2204
+ if (null === previousDisplay) el.style.removeProperty('display');
2205
+ else {
2206
+ el.style.display = previousDisplay;
2207
+ el.removeAttribute(PREVIOUS_DISPLAY_ATTR);
2208
+ }
2209
+ continue;
2210
+ }
2211
+ if (!el.hasAttribute(PREVIOUS_DISPLAY_ATTR)) el.setAttribute(PREVIOUS_DISPLAY_ATTR, el.style.display);
2212
+ el.style.display = 'none';
2213
+ }
1937
2214
  }
1938
2215
  function getPreferenceCenterOpener(namespace = 'c15tStore') {
1939
2216
  const win = window;
@@ -1946,7 +2223,7 @@ function getPreferenceCenterOpener(namespace = 'c15tStore') {
1946
2223
  }
1947
2224
  return null;
1948
2225
  }
1949
- const version = '2.0.0-rc.3';
2226
+ const version = '2.0.0-rc.4';
1950
2227
  const DEVTOOLS_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 446 445" aria-label="c15t">
1951
2228
  <path fill="currentColor" d="M223.178.313c39.064 0 70.732 31.668 70.732 70.732-.001 39.064-31.668 70.731-70.732 70.731-12.181 0-23.642-3.079-33.649-8.502l-55.689 55.689a70.267 70.267 0 0 1 5.574 13.441h167.531c8.695-29.217 35.762-50.523 67.804-50.523 39.064 0 70.731 31.668 70.731 70.732s-31.668 70.732-70.731 70.732c-32.042 0-59.108-21.306-67.803-50.523H139.413a70.417 70.417 0 0 1-7.888 17.396l54.046 54.046c10.893-6.851 23.786-10.815 37.605-10.815 39.064 0 70.732 31.669 70.732 70.733 0 39.064-31.668 70.731-70.732 70.731s-70.732-31.667-70.732-70.731c0-10.518 2.296-20.499 6.414-29.471l-57.78-57.78c-8.972 4.117-18.952 6.414-29.47 6.414-39.063 0-70.731-31.668-70.732-70.732 0-39.064 31.669-70.732 70.733-70.732 12.18 0 23.642 3.079 33.649 8.502l55.688-55.688c-5.423-10.007-8.502-21.469-8.502-33.65 0-39.064 31.668-70.733 70.732-70.733Zm0 343.555c-16.742 0-30.314 13.572-30.314 30.314 0 16.741 13.572 30.313 30.314 30.313s30.314-13.572 30.314-30.313c0-16.742-13.572-30.314-30.314-30.314ZM71.611 192.299c-16.742 0-30.315 13.572-30.315 30.314s13.573 30.314 30.315 30.314c16.741 0 30.313-13.572 30.313-30.314 0-16.741-13.572-30.314-30.313-30.314Zm303.138 0c-16.729 0-30.294 13.551-30.315 30.275l.001.039-.001.038c.021 16.725 13.586 30.276 30.315 30.276 16.741 0 30.313-13.572 30.313-30.314 0-16.741-13.572-30.314-30.313-30.314ZM223.178 40.73c-16.742 0-30.314 13.573-30.314 30.315s13.573 30.313 30.314 30.313c16.742 0 30.313-13.572 30.314-30.313 0-16.742-13.572-30.314-30.314-30.315Z"/>
1952
2229
  </svg>`;
@@ -2027,7 +2304,7 @@ function createDropdownMenu(options) {
2027
2304
  const labelContainer = renderer_div({
2028
2305
  className: styles_panel_module.menuItemContent ?? ''
2029
2306
  });
2030
- const label = span({
2307
+ const label = renderer_span({
2031
2308
  className: styles_panel_module.menuItemLabel ?? '',
2032
2309
  text: item.label
2033
2310
  });
@@ -2149,6 +2426,11 @@ function getPositionClass(position) {
2149
2426
  return styles_panel_module.positionTopLeft ?? '';
2150
2427
  }
2151
2428
  }
2429
+ function formatRetryDelay(delayMs) {
2430
+ if (null === delayMs) return 'n/a';
2431
+ if (delayMs < 1000) return `${delayMs}ms`;
2432
+ return `${(delayMs / 1000).toFixed(1)}s`;
2433
+ }
2152
2434
  function createPanel(options) {
2153
2435
  const { stateManager, storeConnector, onRenderContent, namespace = 'c15tStore', enableUnifiedMode = true } = options;
2154
2436
  let removePortal = null;
@@ -2280,7 +2562,7 @@ function createPanel(options) {
2280
2562
  }));
2281
2563
  return logoWrapper;
2282
2564
  })(),
2283
- span({
2565
+ renderer_span({
2284
2566
  text: 'c15t DevTools'
2285
2567
  })
2286
2568
  ]
@@ -2324,38 +2606,41 @@ function createPanel(options) {
2324
2606
  const isConnected = storeConnector.isConnected();
2325
2607
  const storeState = storeConnector.getState();
2326
2608
  const isLoading = storeState?.isLoadingConsentInfo ?? false;
2609
+ const diagnostics = storeConnector.getDiagnostics();
2327
2610
  const statusChildren = [
2328
- span({
2611
+ renderer_span({
2329
2612
  className: `${styles_panel_module.statusDot} ${isConnected ? styles_panel_module.statusConnected : styles_panel_module.statusDisconnected}`
2330
2613
  }),
2331
- span({
2614
+ renderer_span({
2332
2615
  text: isConnected ? 'Connected' : 'Disconnected'
2333
2616
  })
2334
2617
  ];
2335
- if (isLoading) statusChildren.push(span({
2336
- style: {
2337
- marginLeft: '4px',
2338
- opacity: '0.7'
2339
- },
2618
+ if (isLoading) statusChildren.push(renderer_span({
2619
+ className: styles_panel_module.footerMeta,
2340
2620
  text: '\u00b7 Fetching /init\u2026'
2341
2621
  }));
2622
+ else if (!isConnected) statusChildren.push(renderer_span({
2623
+ className: styles_panel_module.footerMeta,
2624
+ text: `· ${diagnostics.namespace} · retry ${diagnostics.reconnectAttempts} · next ${formatRetryDelay(diagnostics.nextRetryInMs)}`
2625
+ }));
2342
2626
  footerElement.appendChild(renderer_div({
2343
2627
  className: styles_panel_module.footerStatus,
2344
2628
  children: statusChildren
2345
2629
  }));
2346
2630
  if (!isConnected) footerElement.appendChild(renderer_button({
2347
- className: styles_panel_module.closeButton,
2631
+ className: styles_panel_module.inlineActionButton,
2348
2632
  text: 'Retry',
2349
2633
  onClick: ()=>{
2350
2634
  storeConnector.retryConnection();
2351
2635
  }
2352
2636
  }));
2353
- footerElement.appendChild(span({
2637
+ footerElement.appendChild(renderer_span({
2354
2638
  text: `v${version}`
2355
2639
  }));
2356
2640
  }
2357
2641
  function renderErrorState(container) {
2358
2642
  clearElement(container);
2643
+ const diagnostics = storeConnector.getDiagnostics();
2359
2644
  const errorState = renderer_div({
2360
2645
  className: styles_panel_module.errorState,
2361
2646
  children: [
@@ -2377,8 +2662,25 @@ function createPanel(options) {
2377
2662
  className: styles_panel_module.errorMessage,
2378
2663
  text: 'c15t consent manager is not initialized. Make sure you have set up the ConsentManagerProvider in your app.'
2379
2664
  }),
2665
+ renderer_div({
2666
+ className: styles_panel_module.errorMessage,
2667
+ style: {
2668
+ marginTop: '4px',
2669
+ fontSize: 'var(--c15t-devtools-font-size-xs)'
2670
+ },
2671
+ text: `Namespace: ${diagnostics.namespace} · Retries: ${diagnostics.reconnectAttempts} · Next retry: ${formatRetryDelay(diagnostics.nextRetryInMs)}`
2672
+ }),
2673
+ diagnostics.lastError ? renderer_div({
2674
+ className: styles_panel_module.errorMessage,
2675
+ style: {
2676
+ marginTop: '4px',
2677
+ fontSize: 'var(--c15t-devtools-font-size-xs)',
2678
+ color: 'var(--c15t-text-muted)'
2679
+ },
2680
+ text: `Last error: ${diagnostics.lastError}`
2681
+ }) : null,
2380
2682
  renderer_button({
2381
- className: styles_panel_module.closeButton,
2683
+ className: styles_panel_module.inlineActionButton,
2382
2684
  text: 'Retry Connection',
2383
2685
  onClick: ()=>{
2384
2686
  storeConnector.retryConnection();
@@ -2441,6 +2743,10 @@ function createPanel(options) {
2441
2743
  if (contentContainer) if (storeConnector.isConnected()) onRenderContent(contentContainer);
2442
2744
  else renderErrorState(contentContainer);
2443
2745
  });
2746
+ const unsubscribeDiagnostics = storeConnector.subscribeDiagnostics(()=>{
2747
+ updateFooter();
2748
+ if (contentContainer && !storeConnector.isConnected()) renderErrorState(contentContainer);
2749
+ });
2444
2750
  container.appendChild(floatingButton);
2445
2751
  removePortal = createPortal(container);
2446
2752
  return {
@@ -2450,6 +2756,7 @@ function createPanel(options) {
2450
2756
  destroy: ()=>{
2451
2757
  unsubscribeState();
2452
2758
  unsubscribeStore();
2759
+ unsubscribeDiagnostics();
2453
2760
  if (dropdownMenu) {
2454
2761
  dropdownMenu.destroy();
2455
2762
  dropdownMenu = null;
@@ -2499,6 +2806,11 @@ const EVENTS_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
2499
2806
  <path d="M12 20h9"></path>
2500
2807
  <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"></path>
2501
2808
  </svg>`;
2809
+ const MORE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
2810
+ <circle cx="12" cy="5" r="1.75"></circle>
2811
+ <circle cx="12" cy="12" r="1.75"></circle>
2812
+ <circle cx="12" cy="19" r="1.75"></circle>
2813
+ </svg>`;
2502
2814
  const TABS = [
2503
2815
  {
2504
2816
  id: 'location',
@@ -2534,12 +2846,56 @@ const TABS = [
2534
2846
  function tabs_createTabs(options) {
2535
2847
  const { onTabChange, disabledTabs = [] } = options;
2536
2848
  let activeTab = options.activeTab;
2849
+ let isOverflowMenuOpen = false;
2850
+ let visibleTabIds = [];
2851
+ let hiddenTabIds = [];
2537
2852
  const tabButtons = new Map();
2853
+ const overflowButtons = new Map();
2538
2854
  const tabList = renderer_div({
2539
- className: styles_tabs_module.tabList,
2855
+ className: styles_tabs_module.tabList
2856
+ });
2857
+ const tabStrip = renderer_div({
2858
+ className: styles_tabs_module.tabStrip,
2540
2859
  role: 'tablist',
2541
2860
  ariaLabel: 'DevTools tabs'
2542
2861
  });
2862
+ tabList.appendChild(tabStrip);
2863
+ const overflowMenu = renderer_div({
2864
+ className: styles_tabs_module.overflowMenu,
2865
+ role: 'menu',
2866
+ ariaLabel: 'All tabs'
2867
+ });
2868
+ overflowMenu.dataset.state = 'closed';
2869
+ const overflowButton = renderer_button({
2870
+ className: styles_tabs_module.overflowButton,
2871
+ ariaLabel: 'More tabs',
2872
+ ariaExpanded: 'false',
2873
+ onClick: ()=>toggleOverflowMenu(),
2874
+ onKeyDown: (e)=>{
2875
+ if ('ArrowDown' === e.key || 'Enter' === e.key || ' ' === e.key) {
2876
+ e.preventDefault();
2877
+ openOverflowMenu();
2878
+ focusFirstEnabledOverflowItem();
2879
+ }
2880
+ }
2881
+ });
2882
+ overflowButton.setAttribute('aria-haspopup', 'menu');
2883
+ const overflowIcon = renderer_div({
2884
+ className: styles_tabs_module.overflowButtonIcon
2885
+ });
2886
+ overflowIcon.appendChild(createSvgElement(MORE_ICON, {
2887
+ width: 14,
2888
+ height: 14
2889
+ }));
2890
+ overflowButton.appendChild(overflowIcon);
2891
+ const overflowContainer = renderer_div({
2892
+ className: styles_tabs_module.overflowContainer,
2893
+ children: [
2894
+ overflowButton,
2895
+ overflowMenu
2896
+ ]
2897
+ });
2898
+ tabList.appendChild(overflowContainer);
2543
2899
  for (const tab of TABS){
2544
2900
  const isActive = tab.id === activeTab;
2545
2901
  const isDisabled = disabledTabs.includes(tab.id);
@@ -2553,6 +2909,7 @@ function tabs_createTabs(options) {
2553
2909
  disabled: isDisabled,
2554
2910
  onClick: ()=>{
2555
2911
  if (!isDisabled) {
2912
+ closeOverflowMenu();
2556
2913
  setActiveTab(tab.id);
2557
2914
  onTabChange(tab.id);
2558
2915
  }
@@ -2569,11 +2926,188 @@ function tabs_createTabs(options) {
2569
2926
  tabButton.appendChild(iconWrapper);
2570
2927
  tabButton.appendChild(document.createTextNode(tab.label));
2571
2928
  tabButtons.set(tab.id, tabButton);
2572
- tabList.appendChild(tabButton);
2929
+ tabStrip.appendChild(tabButton);
2930
+ const overflowItem = renderer_button({
2931
+ className: `${styles_tabs_module.overflowItem} ${isActive ? styles_tabs_module.overflowItemActive : ''} ${isDisabled ? styles_tabs_module.overflowItemDisabled : ''}`,
2932
+ role: 'menuitemradio',
2933
+ ariaChecked: isActive ? 'true' : 'false',
2934
+ disabled: isDisabled,
2935
+ onClick: ()=>{
2936
+ if (!isDisabled) {
2937
+ setActiveTab(tab.id);
2938
+ onTabChange(tab.id);
2939
+ closeOverflowMenu();
2940
+ tabButtons.get(tab.id)?.focus();
2941
+ }
2942
+ },
2943
+ onKeyDown: (e)=>handleOverflowKeyDown(e, tab.id)
2944
+ });
2945
+ const overflowItemIcon = renderer_div({
2946
+ className: styles_tabs_module.overflowItemIcon
2947
+ });
2948
+ overflowItemIcon.appendChild(createSvgElement(tab.icon, {
2949
+ width: 14,
2950
+ height: 14
2951
+ }));
2952
+ overflowItem.appendChild(overflowItemIcon);
2953
+ overflowItem.appendChild(document.createTextNode(tab.label));
2954
+ overflowButtons.set(tab.id, overflowItem);
2955
+ overflowMenu.appendChild(overflowItem);
2573
2956
  }
2574
- function handleKeyDown(e, currentTab) {
2575
- const tabIds = TABS.map((t)=>t.id);
2576
- const enabledTabIds = tabIds.filter((id)=>!disabledTabs.includes(id));
2957
+ function applyActiveState(tab) {
2958
+ for (const [tabId, tabButton] of tabButtons){
2959
+ const isActive = tabId === tab;
2960
+ if (styles_tabs_module.tabActive) tabButton.classList.toggle(styles_tabs_module.tabActive, isActive);
2961
+ tabButton.setAttribute('aria-selected', isActive ? 'true' : 'false');
2962
+ tabButton.tabIndex = isActive ? 0 : -1;
2963
+ }
2964
+ for (const [tabId, overflowItem] of overflowButtons){
2965
+ const isActive = tabId === tab;
2966
+ if (styles_tabs_module.overflowItemActive) overflowItem.classList.toggle(styles_tabs_module.overflowItemActive, isActive);
2967
+ overflowItem.setAttribute('aria-checked', isActive ? 'true' : 'false');
2968
+ }
2969
+ }
2970
+ function updateVisibleTabs() {
2971
+ const allTabIds = TABS.map((t)=>t.id);
2972
+ const iabEnabled = !disabledTabs.includes('iab');
2973
+ const preferredSecondTab = iabEnabled ? 'iab' : 'consents';
2974
+ const overflowSecondTab = iabEnabled ? 'consents' : 'iab';
2975
+ const showOverflowSecondTabInStrip = activeTab === overflowSecondTab;
2976
+ const stripSecondTab = showOverflowSecondTabInStrip ? overflowSecondTab : preferredSecondTab;
2977
+ const forcedOverflowTab = showOverflowSecondTabInStrip ? preferredSecondTab : overflowSecondTab;
2978
+ const layoutTabIds = [
2979
+ 'location',
2980
+ stripSecondTab,
2981
+ "scripts",
2982
+ 'actions',
2983
+ 'events',
2984
+ forcedOverflowTab
2985
+ ];
2986
+ const forcedOverflowTabIds = new Set();
2987
+ forcedOverflowTabIds.add(forcedOverflowTab);
2988
+ for (const [index, tabId] of layoutTabIds.entries()){
2989
+ const tabButton = tabButtons.get(tabId);
2990
+ if (tabButton) tabButton.style.order = String(index);
2991
+ const overflowItem = overflowButtons.get(tabId);
2992
+ if (overflowItem) overflowItem.style.order = String(index);
2993
+ }
2994
+ for (const tabId of allTabIds){
2995
+ const tabButton = tabButtons.get(tabId);
2996
+ if (tabButton && styles_tabs_module.tabHidden) tabButton.classList.remove(styles_tabs_module.tabHidden);
2997
+ }
2998
+ if (styles_tabs_module.overflowContainerHidden) overflowContainer.classList.remove(styles_tabs_module.overflowContainerHidden);
2999
+ const stripGap = Number.parseFloat(getComputedStyle(tabStrip).gap || '0');
3000
+ const calculateVisibleTabs = (availableWidth)=>{
3001
+ if (availableWidth <= 0) return [];
3002
+ const nextVisible = [];
3003
+ let usedWidth = 0;
3004
+ for (const tabId of layoutTabIds){
3005
+ if (forcedOverflowTabIds.has(tabId)) continue;
3006
+ const tabButton = tabButtons.get(tabId);
3007
+ if (!tabButton) continue;
3008
+ const width = tabButton.getBoundingClientRect().width;
3009
+ const nextUsed = 0 === nextVisible.length ? width : usedWidth + stripGap + width;
3010
+ if (nextUsed <= availableWidth) {
3011
+ nextVisible.push(tabId);
3012
+ usedWidth = nextUsed;
3013
+ } else break;
3014
+ }
3015
+ return nextVisible;
3016
+ };
3017
+ const measureStripWidth = ()=>tabStrip.getBoundingClientRect().width;
3018
+ const showOverflowContainer = ()=>{
3019
+ if (styles_tabs_module.overflowContainerHidden) overflowContainer.classList.remove(styles_tabs_module.overflowContainerHidden);
3020
+ };
3021
+ const hideOverflowContainer = ()=>{
3022
+ if (styles_tabs_module.overflowContainerHidden) overflowContainer.classList.add(styles_tabs_module.overflowContainerHidden);
3023
+ };
3024
+ const measureVisibleWidth = (tabIds)=>{
3025
+ let width = 0;
3026
+ for (const [index, tabId] of tabIds.entries()){
3027
+ const tabButton = tabButtons.get(tabId);
3028
+ if (tabButton) {
3029
+ width += tabButton.getBoundingClientRect().width;
3030
+ if (index > 0) width += stripGap;
3031
+ }
3032
+ }
3033
+ return width;
3034
+ };
3035
+ if (0 === forcedOverflowTabIds.size) {
3036
+ hideOverflowContainer();
3037
+ const visibleWithoutOverflow = calculateVisibleTabs(measureStripWidth());
3038
+ if (visibleWithoutOverflow.length === layoutTabIds.length) visibleTabIds = visibleWithoutOverflow;
3039
+ else {
3040
+ showOverflowContainer();
3041
+ visibleTabIds = calculateVisibleTabs(measureStripWidth());
3042
+ }
3043
+ } else {
3044
+ showOverflowContainer();
3045
+ const withOverflow = calculateVisibleTabs(measureStripWidth());
3046
+ visibleTabIds = withOverflow.length > 0 ? withOverflow : [
3047
+ activeTab
3048
+ ];
3049
+ }
3050
+ if (!visibleTabIds.includes(activeTab) && !disabledTabs.includes(activeTab)) if (visibleTabIds.length > 0) visibleTabIds[visibleTabIds.length - 1] = activeTab;
3051
+ else visibleTabIds = [
3052
+ activeTab
3053
+ ];
3054
+ visibleTabIds = [
3055
+ ...new Set(visibleTabIds)
3056
+ ];
3057
+ const maxStripWidth = measureStripWidth();
3058
+ while(visibleTabIds.length > 1 && measureVisibleWidth(visibleTabIds) > maxStripWidth + 0.5){
3059
+ let removeIndex = visibleTabIds.length - 1;
3060
+ if (visibleTabIds[removeIndex] === activeTab) removeIndex = Math.max(0, removeIndex - 1);
3061
+ visibleTabIds.splice(removeIndex, 1);
3062
+ }
3063
+ hiddenTabIds = layoutTabIds.filter((tabId)=>!visibleTabIds.includes(tabId) || forcedOverflowTabIds.has(tabId) && tabId !== activeTab);
3064
+ for (const tabId of allTabIds){
3065
+ const tabButton = tabButtons.get(tabId);
3066
+ if (tabButton) {
3067
+ if (styles_tabs_module.tabHidden) tabButton.classList.toggle(styles_tabs_module.tabHidden, hiddenTabIds.includes(tabId));
3068
+ }
3069
+ }
3070
+ for (const tabId of allTabIds){
3071
+ const overflowItem = overflowButtons.get(tabId);
3072
+ if (overflowItem) {
3073
+ if (styles_tabs_module.overflowItemHidden) overflowItem.classList.toggle(styles_tabs_module.overflowItemHidden, !hiddenTabIds.includes(tabId));
3074
+ }
3075
+ }
3076
+ if (styles_tabs_module.overflowContainerHidden) overflowContainer.classList.toggle(styles_tabs_module.overflowContainerHidden, 0 === hiddenTabIds.length);
3077
+ if (0 === hiddenTabIds.length) closeOverflowMenu();
3078
+ }
3079
+ function focusFirstEnabledOverflowItem() {
3080
+ const firstEnabled = hiddenTabIds.find((tabId)=>!disabledTabs.includes(tabId));
3081
+ if (firstEnabled) overflowButtons.get(firstEnabled)?.focus();
3082
+ }
3083
+ function openOverflowMenu() {
3084
+ if (isOverflowMenuOpen || 0 === hiddenTabIds.length) return;
3085
+ isOverflowMenuOpen = true;
3086
+ overflowMenu.dataset.state = 'open';
3087
+ overflowButton.setAttribute('aria-expanded', 'true');
3088
+ document.addEventListener('click', handleOutsideClick);
3089
+ document.addEventListener('keydown', handleEscapeKey);
3090
+ }
3091
+ function closeOverflowMenu() {
3092
+ if (!isOverflowMenuOpen) return;
3093
+ isOverflowMenuOpen = false;
3094
+ overflowMenu.dataset.state = 'closed';
3095
+ overflowButton.setAttribute('aria-expanded', 'false');
3096
+ document.removeEventListener('click', handleOutsideClick);
3097
+ document.removeEventListener('keydown', handleEscapeKey);
3098
+ }
3099
+ function toggleOverflowMenu() {
3100
+ if (isOverflowMenuOpen) closeOverflowMenu();
3101
+ else openOverflowMenu();
3102
+ }
3103
+ function handleOutsideClick(e) {
3104
+ if (!overflowContainer.contains(e.target)) closeOverflowMenu();
3105
+ }
3106
+ function handleEscapeKey(e) {
3107
+ if ('Escape' === e.key) closeOverflowMenu();
3108
+ }
3109
+ function handleKeyDown(e, currentTab) {
3110
+ const enabledTabIds = visibleTabIds.filter((tabId)=>!disabledTabs.includes(tabId));
2577
3111
  const currentIndex = enabledTabIds.indexOf(currentTab);
2578
3112
  let newIndex = currentIndex;
2579
3113
  switch(e.key){
@@ -2600,23 +3134,152 @@ function tabs_createTabs(options) {
2600
3134
  tabButtons.get(newTab)?.focus();
2601
3135
  }
2602
3136
  }
3137
+ function handleOverflowKeyDown(e, currentTab) {
3138
+ const enabledTabIds = hiddenTabIds.filter((tabId)=>!disabledTabs.includes(tabId));
3139
+ const currentIndex = enabledTabIds.indexOf(currentTab);
3140
+ if ('Escape' === e.key) {
3141
+ e.preventDefault();
3142
+ closeOverflowMenu();
3143
+ overflowButton.focus();
3144
+ return;
3145
+ }
3146
+ let newIndex = currentIndex;
3147
+ switch(e.key){
3148
+ case 'ArrowDown':
3149
+ newIndex = (currentIndex + 1) % enabledTabIds.length;
3150
+ break;
3151
+ case 'ArrowUp':
3152
+ newIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabIds.length - 1;
3153
+ break;
3154
+ default:
3155
+ return;
3156
+ }
3157
+ e.preventDefault();
3158
+ const newTab = enabledTabIds[newIndex];
3159
+ if (newTab) overflowButtons.get(newTab)?.focus();
3160
+ }
2603
3161
  function setActiveTab(tab) {
2604
3162
  activeTab = tab;
2605
- for (const [tabId, tabButton] of tabButtons){
2606
- const isActive = tabId === tab;
2607
- if (styles_tabs_module.tabActive) tabButton.classList.toggle(styles_tabs_module.tabActive, isActive);
2608
- tabButton.setAttribute('aria-selected', isActive ? 'true' : 'false');
2609
- tabButton.tabIndex = isActive ? 0 : -1;
2610
- }
3163
+ applyActiveState(tab);
3164
+ updateVisibleTabs();
2611
3165
  }
3166
+ const handleWindowResize = ()=>{
3167
+ updateVisibleTabs();
3168
+ };
3169
+ let resizeObserver = null;
3170
+ if ('undefined' != typeof ResizeObserver) {
3171
+ resizeObserver = new ResizeObserver(()=>{
3172
+ updateVisibleTabs();
3173
+ });
3174
+ resizeObserver.observe(tabList);
3175
+ } else window.addEventListener('resize', handleWindowResize);
3176
+ applyActiveState(activeTab);
3177
+ requestAnimationFrame(()=>{
3178
+ updateVisibleTabs();
3179
+ });
2612
3180
  return {
2613
3181
  element: tabList,
2614
3182
  setActiveTab,
2615
3183
  destroy: ()=>{
3184
+ closeOverflowMenu();
3185
+ if (resizeObserver) {
3186
+ resizeObserver.disconnect();
3187
+ resizeObserver = null;
3188
+ } else window.removeEventListener('resize', handleWindowResize);
2616
3189
  tabButtons.clear();
3190
+ overflowButtons.clear();
2617
3191
  }
2618
3192
  };
2619
3193
  }
3194
+ function debug_bundle_createDebugBundle(payload) {
3195
+ const { namespace, devToolsState, connection, recentEvents, storeState } = payload;
3196
+ const bundle = {
3197
+ generatedAt: new Date().toISOString(),
3198
+ namespace,
3199
+ devToolsState,
3200
+ connection,
3201
+ recentEvents,
3202
+ storeState,
3203
+ overrides: storeState?.overrides ?? null,
3204
+ iab: storeState?.iab ? {
3205
+ tcString: (storeState?.iab).tcString ?? null,
3206
+ purposeCount: Object.keys((storeState?.iab).purposeConsents ?? {}).length,
3207
+ vendorCount: Object.keys((storeState?.iab).vendorConsents ?? {}).length
3208
+ } : null
3209
+ };
3210
+ return JSON.stringify(bundle, null, 2);
3211
+ }
3212
+ function debug_bundle_sanitizeStoreState(state) {
3213
+ if (!state) return null;
3214
+ try {
3215
+ return JSON.parse(JSON.stringify(state, (_key, value)=>'function' == typeof value ? void 0 : value));
3216
+ } catch {
3217
+ return {
3218
+ error: 'Unable to serialize store state'
3219
+ };
3220
+ }
3221
+ }
3222
+ function debug_bundle_downloadDebugBundle(content) {
3223
+ const blob = new Blob([
3224
+ content
3225
+ ], {
3226
+ type: 'application/json'
3227
+ });
3228
+ const url = URL.createObjectURL(blob);
3229
+ const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
3230
+ const anchor = document.createElement('a');
3231
+ anchor.href = url;
3232
+ anchor.download = `c15t-debug-bundle-${timestamp}.json`;
3233
+ anchor.click();
3234
+ URL.revokeObjectURL(url);
3235
+ }
3236
+ const DEVTOOLS_OVERRIDES_STORAGE_KEY = 'c15t-devtools-overrides';
3237
+ function normalizeStringValue(value) {
3238
+ if ('string' != typeof value) return;
3239
+ const normalized = value.trim();
3240
+ return normalized.length > 0 ? normalized : void 0;
3241
+ }
3242
+ function normalizeBooleanValue(value) {
3243
+ return 'boolean' == typeof value ? value : void 0;
3244
+ }
3245
+ function normalizeOverrides(value) {
3246
+ if (!value || 'object' != typeof value) return null;
3247
+ const source = value;
3248
+ const overrides = {
3249
+ country: normalizeStringValue(source.country),
3250
+ region: normalizeStringValue(source.region),
3251
+ language: normalizeStringValue(source.language),
3252
+ gpc: normalizeBooleanValue(source.gpc)
3253
+ };
3254
+ return hasPersistedOverrides(overrides) ? overrides : null;
3255
+ }
3256
+ function hasPersistedOverrides(overrides) {
3257
+ return Boolean(overrides.country || overrides.region || overrides.language || void 0 !== overrides.gpc);
3258
+ }
3259
+ function override_storage_loadPersistedOverrides(storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
3260
+ if ('undefined' == typeof window) return null;
3261
+ try {
3262
+ const stored = localStorage.getItem(storageKey);
3263
+ if (!stored) return null;
3264
+ const parsed = JSON.parse(stored);
3265
+ return normalizeOverrides(parsed);
3266
+ } catch {
3267
+ return null;
3268
+ }
3269
+ }
3270
+ function override_storage_persistOverrides(overrides, storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
3271
+ if ('undefined' == typeof window) return;
3272
+ try {
3273
+ if (!hasPersistedOverrides(overrides)) return void localStorage.removeItem(storageKey);
3274
+ localStorage.setItem(storageKey, JSON.stringify(overrides));
3275
+ } catch {}
3276
+ }
3277
+ function override_storage_clearPersistedOverrides(storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
3278
+ if ('undefined' == typeof window) return;
3279
+ try {
3280
+ localStorage.removeItem(storageKey);
3281
+ } catch {}
3282
+ }
2620
3283
  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");
2621
3284
  var components_module_options = {};
2622
3285
  components_module_options.styleTagTransform = styleTagTransform_default();
@@ -2653,7 +3316,7 @@ function createBadge(options) {
2653
3316
  info: styles_components_module.badgeInfo,
2654
3317
  neutral: styles_components_module.badgeNeutral
2655
3318
  }[variant];
2656
- return span({
3319
+ return renderer_span({
2657
3320
  className: `${styles_components_module.badge} ${variantClass}`,
2658
3321
  text
2659
3322
  });
@@ -2684,31 +3347,19 @@ function createButton(options) {
2684
3347
  btn.appendChild(document.createTextNode(text));
2685
3348
  return btn;
2686
3349
  }
2687
- function createListItem(options) {
2688
- const { title, description, actions = [] } = options;
2689
- const content = renderer_div({
2690
- className: styles_components_module.listItemContent,
2691
- children: [
2692
- span({
2693
- className: styles_components_module.listItemTitle,
2694
- text: title
2695
- }),
2696
- description ? span({
2697
- className: styles_components_module.listItemDescription,
2698
- text: description
2699
- }) : null
2700
- ]
2701
- });
2702
- const actionsContainer = renderer_div({
2703
- className: styles_components_module.listItemActions,
2704
- children: actions
2705
- });
2706
- return renderer_div({
2707
- className: styles_components_module.listItem,
2708
- children: [
2709
- content,
2710
- actionsContainer
2711
- ]
3350
+ function createInput(options) {
3351
+ const { value, placeholder, ariaLabel, small = false, onInput } = options;
3352
+ const sizeClass = small ? styles_components_module.inputSmall : '';
3353
+ return input({
3354
+ className: `${styles_components_module.input} ${sizeClass}`.trim(),
3355
+ type: 'text',
3356
+ value,
3357
+ placeholder,
3358
+ ariaLabel,
3359
+ onInput: (event)=>{
3360
+ const target = event.target;
3361
+ onInput?.(target?.value ?? '');
3362
+ }
2712
3363
  });
2713
3364
  }
2714
3365
  function createSection(options) {
@@ -2716,7 +3367,7 @@ function createSection(options) {
2716
3367
  const header = renderer_div({
2717
3368
  className: styles_components_module.sectionHeader,
2718
3369
  children: [
2719
- span({
3370
+ renderer_span({
2720
3371
  className: styles_components_module.sectionTitle,
2721
3372
  text: title
2722
3373
  }),
@@ -2736,11 +3387,11 @@ function createInfoRow(options) {
2736
3387
  return renderer_div({
2737
3388
  className: styles_components_module.infoRow,
2738
3389
  children: [
2739
- span({
3390
+ renderer_span({
2740
3391
  className: styles_components_module.infoLabel,
2741
3392
  text: label
2742
3393
  }),
2743
- span({
3394
+ renderer_span({
2744
3395
  className: styles_components_module.infoValue,
2745
3396
  text: value
2746
3397
  })
@@ -2760,7 +3411,7 @@ function createEmptyState(options) {
2760
3411
  }));
2761
3412
  children.push(iconWrapper);
2762
3413
  }
2763
- children.push(span({
3414
+ children.push(renderer_span({
2764
3415
  className: styles_components_module.emptyStateText,
2765
3416
  text
2766
3417
  }));
@@ -2780,7 +3431,7 @@ function createGrid(options) {
2780
3431
  function createGridCard(options) {
2781
3432
  const { title, action } = options;
2782
3433
  const children = [
2783
- span({
3434
+ renderer_span({
2784
3435
  className: styles_components_module.gridCardTitle,
2785
3436
  text: title
2786
3437
  })
@@ -2791,6 +3442,18 @@ function createGridCard(options) {
2791
3442
  children
2792
3443
  });
2793
3444
  }
3445
+ function createDisconnectedState(message = 'Store not connected') {
3446
+ return renderer_div({
3447
+ className: styles_components_module.disconnectedState,
3448
+ style: {
3449
+ padding: '24px',
3450
+ textAlign: 'center',
3451
+ color: 'var(--c15t-text-muted)',
3452
+ fontSize: 'var(--c15t-devtools-font-size-sm)'
3453
+ },
3454
+ text: message
3455
+ });
3456
+ }
2794
3457
  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">
2795
3458
  <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
2796
3459
  <path d="M21 3v5h-5"></path>
@@ -2818,19 +3481,11 @@ const TERMINAL_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 2
2818
3481
  <polyline points="4 17 10 11 4 5"></polyline>
2819
3482
  <line x1="12" y1="19" x2="20" y2="19"></line>
2820
3483
  </svg>`;
2821
- function actions_renderActionsPanel(container, options) {
2822
- const { getState, onResetConsents, onRefetchBanner, onShowBanner, onOpenPreferences, onCopyState } = options;
3484
+ function renderActionsPanel(container, options) {
3485
+ const { getState, onResetConsents, onRefetchBanner, onShowBanner, onOpenPreferences, onCopyState, onExportDebugBundle } = options;
2823
3486
  clearElement(container);
2824
3487
  const state = getState();
2825
- if (!state) return void container.appendChild(renderer_div({
2826
- style: {
2827
- padding: '24px',
2828
- textAlign: 'center',
2829
- color: 'var(--c15t-text-muted)',
2830
- fontSize: 'var(--c15t-devtools-font-size-sm)'
2831
- },
2832
- text: 'Store not connected'
2833
- }));
3488
+ if (!state) return void container.appendChild(createDisconnectedState());
2834
3489
  const actionCards = [
2835
3490
  createActionCard({
2836
3491
  icon: actions_EYE_ICON,
@@ -2851,6 +3506,12 @@ function actions_renderActionsPanel(container, options) {
2851
3506
  icon: COPY_ICON,
2852
3507
  label: 'Copy State',
2853
3508
  onClick: onCopyState
3509
+ }),
3510
+ createActionCard({
3511
+ icon: REFRESH_ICON,
3512
+ label: 'Export Debug',
3513
+ onClick: ()=>onExportDebugBundle?.(),
3514
+ disabled: !onExportDebugBundle
2854
3515
  })
2855
3516
  ];
2856
3517
  const grid = createGrid({
@@ -2888,7 +3549,7 @@ function actions_renderActionsPanel(container, options) {
2888
3549
  },
2889
3550
  children: [
2890
3551
  createIconWrapper(TERMINAL_ICON, 14),
2891
- span({
3552
+ renderer_span({
2892
3553
  style: {
2893
3554
  fontSize: 'var(--c15t-devtools-font-size-xs)',
2894
3555
  fontWeight: '600',
@@ -2911,10 +3572,10 @@ function actions_renderActionsPanel(container, options) {
2911
3572
  color: 'var(--c15t-text-muted)'
2912
3573
  },
2913
3574
  children: [
2914
- span({
3575
+ renderer_span({
2915
3576
  text: `window.${getNamespace(state)}.getState()`
2916
3577
  }),
2917
- span({
3578
+ renderer_span({
2918
3579
  text: 'window.__c15tDevTools.open()'
2919
3580
  })
2920
3581
  ]
@@ -2924,7 +3585,7 @@ function actions_renderActionsPanel(container, options) {
2924
3585
  container.appendChild(consoleSection);
2925
3586
  }
2926
3587
  function createActionCard(options) {
2927
- const { icon, label, onClick } = options;
3588
+ const { icon, label, onClick, disabled = false } = options;
2928
3589
  const card = renderer_div({
2929
3590
  className: styles_components_module.gridCard ?? '',
2930
3591
  style: {
@@ -2935,11 +3596,12 @@ function createActionCard(options) {
2935
3596
  gap: '6px',
2936
3597
  padding: '16px 8px',
2937
3598
  cursor: 'pointer',
2938
- transition: 'background-color var(--c15t-duration-fast) var(--c15t-easing)'
3599
+ transition: 'background-color var(--c15t-duration-fast) var(--c15t-easing)',
3600
+ opacity: disabled ? '0.55' : '1'
2939
3601
  },
2940
3602
  children: [
2941
3603
  createIconWrapper(icon, 20),
2942
- span({
3604
+ renderer_span({
2943
3605
  style: {
2944
3606
  fontSize: 'var(--c15t-devtools-font-size-xs)',
2945
3607
  fontWeight: '500',
@@ -2950,13 +3612,15 @@ function createActionCard(options) {
2950
3612
  })
2951
3613
  ]
2952
3614
  });
2953
- card.addEventListener('click', onClick);
2954
- card.addEventListener('mouseenter', ()=>{
2955
- card.style.backgroundColor = 'var(--c15t-surface-hover)';
2956
- });
2957
- card.addEventListener('mouseleave', ()=>{
2958
- card.style.backgroundColor = '';
2959
- });
3615
+ if (!disabled) {
3616
+ card.addEventListener('click', onClick);
3617
+ card.addEventListener('mouseenter', ()=>{
3618
+ card.style.backgroundColor = 'var(--c15t-surface-hover)';
3619
+ });
3620
+ card.addEventListener('mouseleave', ()=>{
3621
+ card.style.backgroundColor = '';
3622
+ });
3623
+ }
2960
3624
  return card;
2961
3625
  }
2962
3626
  function createIconWrapper(icon, size) {
@@ -2977,19 +3641,12 @@ function createIconWrapper(icon, size) {
2977
3641
  function getNamespace(state) {
2978
3642
  return state.config?.meta?.namespace || 'c15tStore';
2979
3643
  }
2980
- function consents_renderConsentsPanel(container, options) {
3644
+ const consentSearchByContainer = new WeakMap();
3645
+ function renderConsentsPanel(container, options) {
2981
3646
  const { getState, onConsentChange, onSave, onAcceptAll, onRejectAll, onReset } = options;
2982
3647
  clearElement(container);
2983
3648
  const state = getState();
2984
- if (!state) return void container.appendChild(renderer_div({
2985
- style: {
2986
- padding: '24px',
2987
- textAlign: 'center',
2988
- color: 'var(--c15t-text-muted)',
2989
- fontSize: 'var(--c15t-devtools-font-size-sm)'
2990
- },
2991
- text: 'Store not connected'
2992
- }));
3649
+ if (!state) return void container.appendChild(createDisconnectedState());
2993
3650
  const isIabMode = 'iab' === state.model;
2994
3651
  const savedConsents = state.consents || {};
2995
3652
  const selectedConsents = state.selectedConsents || {};
@@ -3003,15 +3660,40 @@ function consents_renderConsentsPanel(container, options) {
3003
3660
  ct.name,
3004
3661
  ct
3005
3662
  ]));
3663
+ const searchQuery = consentSearchByContainer.get(container) ?? '';
3006
3664
  const consentEntries = Object.entries(displayConsents);
3007
- if (0 === consentEntries.length) container.appendChild(renderer_div({
3665
+ const filteredConsentEntries = consentEntries.filter(([name])=>{
3666
+ if (!searchQuery) return true;
3667
+ const consentType = consentTypeMap.get(name);
3668
+ const displayName = consentType?.name || name;
3669
+ return `${name} ${displayName}`.toLowerCase().includes(searchQuery);
3670
+ });
3671
+ const showSearchInput = consentEntries.length > 4;
3672
+ if (showSearchInput) container.appendChild(renderer_div({
3673
+ style: {
3674
+ padding: '8px 0 10px'
3675
+ },
3676
+ children: [
3677
+ createInput({
3678
+ value: searchQuery,
3679
+ placeholder: 'Filter consents…',
3680
+ ariaLabel: 'Filter consents',
3681
+ small: true,
3682
+ onInput: (value)=>{
3683
+ consentSearchByContainer.set(container, value.trim().toLowerCase());
3684
+ renderConsentsPanel(container, options);
3685
+ }
3686
+ })
3687
+ ]
3688
+ }));
3689
+ if (0 === filteredConsentEntries.length) container.appendChild(renderer_div({
3008
3690
  style: {
3009
3691
  padding: '24px',
3010
3692
  textAlign: 'center',
3011
3693
  color: 'var(--c15t-devtools-text-muted)',
3012
3694
  fontSize: 'var(--c15t-devtools-font-size-sm)'
3013
3695
  },
3014
- text: 'No consents configured'
3696
+ text: 0 === consentEntries.length ? 'No consents configured' : 'No matching consents'
3015
3697
  }));
3016
3698
  else {
3017
3699
  if (isIabMode) {
@@ -3029,7 +3711,7 @@ function consents_renderConsentsPanel(container, options) {
3029
3711
  container.appendChild(iabNotice);
3030
3712
  }
3031
3713
  const gridCards = [];
3032
- for (const [name, value] of consentEntries){
3714
+ for (const [name, value] of filteredConsentEntries){
3033
3715
  const consentType = consentTypeMap.get(name);
3034
3716
  const isNecessary = 'necessary' === name;
3035
3717
  const displayName = consentType?.name || name;
@@ -3119,7 +3801,7 @@ function consents_renderConsentsPanel(container, options) {
3119
3801
  gap: '8px'
3120
3802
  },
3121
3803
  children: [
3122
- span({
3804
+ renderer_span({
3123
3805
  style: {
3124
3806
  fontSize: 'var(--c15t-devtools-font-size-xs)',
3125
3807
  color: 'var(--c15t-devtools-badge-warning)'
@@ -3133,7 +3815,7 @@ function consents_renderConsentsPanel(container, options) {
3133
3815
  onClick: onSave
3134
3816
  })
3135
3817
  ]
3136
- }) : span({
3818
+ }) : renderer_span({
3137
3819
  style: {
3138
3820
  fontSize: 'var(--c15t-devtools-font-size-xs)',
3139
3821
  color: 'var(--c15t-text-muted)'
@@ -3147,15 +3829,26 @@ function consents_renderConsentsPanel(container, options) {
3147
3829
  function formatConsentName(name) {
3148
3830
  return name.replace(/_/g, ' ').replace(/\b\w/g, (l)=>l.toUpperCase());
3149
3831
  }
3150
- let activeFilter = 'all';
3151
- let selectedEventId = null;
3152
- function events_renderEventsPanel(container, options) {
3832
+ const panelStateByContainer = new WeakMap();
3833
+ function getPanelState(container) {
3834
+ const existing = panelStateByContainer.get(container);
3835
+ if (existing) return existing;
3836
+ const initialState = {
3837
+ activeFilter: 'all',
3838
+ selectedEventId: null,
3839
+ searchQuery: ''
3840
+ };
3841
+ panelStateByContainer.set(container, initialState);
3842
+ return initialState;
3843
+ }
3844
+ function renderEventsPanel(container, options) {
3153
3845
  const { getEvents, onClear } = options;
3846
+ const panelState = getPanelState(container);
3154
3847
  clearElement(container);
3155
3848
  const allEvents = getEvents();
3156
- const events = allEvents.filter((event)=>matchesFilter(event, activeFilter));
3157
- if (!events.some((event)=>event.id === selectedEventId)) selectedEventId = events[0]?.id ?? null;
3158
- const selectedEvent = events.find((event)=>event.id === selectedEventId) ?? null;
3849
+ const events = allEvents.filter((event)=>matchesFilter(event, panelState.activeFilter)).filter((event)=>matchesSearch(event, panelState.searchQuery));
3850
+ if (!events.some((event)=>event.id === panelState.selectedEventId)) panelState.selectedEventId = events[0]?.id ?? null;
3851
+ const selectedEvent = events.find((event)=>event.id === panelState.selectedEventId) ?? null;
3159
3852
  const header = renderer_div({
3160
3853
  style: {
3161
3854
  display: 'flex',
@@ -3165,7 +3858,7 @@ function events_renderEventsPanel(container, options) {
3165
3858
  gap: '8px'
3166
3859
  },
3167
3860
  children: [
3168
- span({
3861
+ renderer_span({
3169
3862
  style: {
3170
3863
  fontSize: 'var(--c15t-devtools-font-size-xs)',
3171
3864
  fontWeight: '600',
@@ -3191,8 +3884,8 @@ function events_renderEventsPanel(container, options) {
3191
3884
  small: true,
3192
3885
  onClick: ()=>{
3193
3886
  onClear();
3194
- selectedEventId = null;
3195
- events_renderEventsPanel(container, options);
3887
+ panelState.selectedEventId = null;
3888
+ renderEventsPanel(container, options);
3196
3889
  }
3197
3890
  })
3198
3891
  ]
@@ -3207,12 +3900,30 @@ function events_renderEventsPanel(container, options) {
3207
3900
  gap: '6px',
3208
3901
  padding: '0 16px 8px'
3209
3902
  },
3210
- children: EVENT_FILTERS.map((filter)=>createFilterButton(filter, filter === activeFilter, ()=>{
3211
- activeFilter = filter;
3212
- selectedEventId = null;
3213
- events_renderEventsPanel(container, options);
3903
+ children: EVENT_FILTERS.map((filter)=>createFilterButton(filter, filter === panelState.activeFilter, ()=>{
3904
+ panelState.activeFilter = filter;
3905
+ panelState.selectedEventId = null;
3906
+ renderEventsPanel(container, options);
3214
3907
  }))
3215
3908
  }));
3909
+ container.appendChild(renderer_div({
3910
+ style: {
3911
+ padding: '0 16px 8px'
3912
+ },
3913
+ children: [
3914
+ createInput({
3915
+ value: panelState.searchQuery,
3916
+ placeholder: 'Search events…',
3917
+ ariaLabel: 'Search events',
3918
+ small: true,
3919
+ onInput: (value)=>{
3920
+ panelState.searchQuery = value.trim().toLowerCase();
3921
+ panelState.selectedEventId = null;
3922
+ renderEventsPanel(container, options);
3923
+ }
3924
+ })
3925
+ ]
3926
+ }));
3216
3927
  const eventList = renderer_div({
3217
3928
  style: {
3218
3929
  display: 'flex',
@@ -3232,9 +3943,9 @@ function events_renderEventsPanel(container, options) {
3232
3943
  },
3233
3944
  text: 'No events match this filter'
3234
3945
  }));
3235
- else for (const event of events)eventList.appendChild(createEventItem(event, event.id === selectedEventId, ()=>{
3236
- selectedEventId = event.id;
3237
- events_renderEventsPanel(container, options);
3946
+ else for (const event of events)eventList.appendChild(createEventItem(event, event.id === panelState.selectedEventId, ()=>{
3947
+ panelState.selectedEventId = event.id;
3948
+ renderEventsPanel(container, options);
3238
3949
  }));
3239
3950
  container.appendChild(eventList);
3240
3951
  container.appendChild(createPayloadSection(selectedEvent));
@@ -3261,6 +3972,11 @@ function matchesFilter(event, filter) {
3261
3972
  if ('network' === filter) return 'network' === event.type;
3262
3973
  return 'iab' === event.type;
3263
3974
  }
3975
+ function matchesSearch(event, query) {
3976
+ if (!query) return true;
3977
+ const haystack = `${event.type} ${event.message} ${JSON.stringify(event.data ?? {})}`;
3978
+ return haystack.toLowerCase().includes(query);
3979
+ }
3264
3980
  function createPayloadSection(event) {
3265
3981
  const payload = event?.data ? JSON.stringify(event.data, null, 2) : null;
3266
3982
  return renderer_div({
@@ -3313,7 +4029,7 @@ function createEventItem(event, selected, onSelect) {
3313
4029
  },
3314
4030
  onClick: onSelect,
3315
4031
  children: [
3316
- span({
4032
+ renderer_span({
3317
4033
  style: {
3318
4034
  color,
3319
4035
  fontSize: '8px',
@@ -3321,7 +4037,7 @@ function createEventItem(event, selected, onSelect) {
3321
4037
  },
3322
4038
  text: icon
3323
4039
  }),
3324
- span({
4040
+ renderer_span({
3325
4041
  style: {
3326
4042
  color: 'var(--c15t-text-muted)',
3327
4043
  fontFamily: 'monospace',
@@ -3330,7 +4046,7 @@ function createEventItem(event, selected, onSelect) {
3330
4046
  },
3331
4047
  text: time
3332
4048
  }),
3333
- span({
4049
+ renderer_span({
3334
4050
  style: {
3335
4051
  color: 'var(--c15t-text)',
3336
4052
  flex: '1'
@@ -3398,38 +4114,15 @@ function getEventColor(type) {
3398
4114
  return 'var(--c15t-text-muted)';
3399
4115
  }
3400
4116
  }
3401
- function iab_renderIabPanel(container, options) {
4117
+ const iabSearchByContainer = new WeakMap();
4118
+ function renderIabPanel(container, options) {
3402
4119
  const { getState, onSetPurposeConsent, onSetVendorConsent, onSetSpecialFeatureOptIn, onAcceptAll, onRejectAll, onSave, onReset } = options;
3403
4120
  clearElement(container);
3404
4121
  const state = getState();
3405
- if (!state) return void container.appendChild(renderer_div({
3406
- style: {
3407
- padding: '24px',
3408
- textAlign: 'center',
3409
- color: 'var(--c15t-text-muted)',
3410
- fontSize: 'var(--c15t-devtools-font-size-sm)'
3411
- },
3412
- text: 'Store not connected'
3413
- }));
3414
- if ('iab' !== state.model) return void container.appendChild(renderer_div({
3415
- style: {
3416
- padding: '24px',
3417
- textAlign: 'center',
3418
- color: 'var(--c15t-text-muted)',
3419
- fontSize: 'var(--c15t-devtools-font-size-sm)'
3420
- },
3421
- text: 'IAB TCF mode is not configured'
3422
- }));
4122
+ if (!state) return void container.appendChild(createDisconnectedState());
4123
+ if ('iab' !== state.model) return void container.appendChild(createDisconnectedState('IAB TCF mode is not configured'));
3423
4124
  const iabState = state.iab;
3424
- if (!iabState) return void container.appendChild(renderer_div({
3425
- style: {
3426
- padding: '24px',
3427
- textAlign: 'center',
3428
- color: 'var(--c15t-text-muted)',
3429
- fontSize: 'var(--c15t-devtools-font-size-sm)'
3430
- },
3431
- text: 'IAB state not available'
3432
- }));
4125
+ if (!iabState) return void container.appendChild(createDisconnectedState('IAB state not available'));
3433
4126
  const tcString = iabState.tcString;
3434
4127
  const tcStringSection = createSection({
3435
4128
  title: 'TC String',
@@ -3461,9 +4154,30 @@ function iab_renderIabPanel(container, options) {
3461
4154
  });
3462
4155
  container.appendChild(tcStringSection);
3463
4156
  const gvl = iabState.gvl;
4157
+ const searchQuery = iabSearchByContainer.get(container) ?? '';
4158
+ container.appendChild(createSection({
4159
+ title: 'Filter',
4160
+ children: [
4161
+ createInput({
4162
+ value: searchQuery,
4163
+ placeholder: 'Filter purposes or vendors…',
4164
+ ariaLabel: 'Filter IAB purposes and vendors',
4165
+ small: true,
4166
+ onInput: (value)=>{
4167
+ iabSearchByContainer.set(container, value.trim().toLowerCase());
4168
+ renderIabPanel(container, options);
4169
+ }
4170
+ })
4171
+ ]
4172
+ }));
3464
4173
  const purposeConsents = iabState.purposeConsents || {};
3465
4174
  const purposes = gvl?.purposes || {};
3466
- const purposeEntries = Object.entries(purposeConsents);
4175
+ const purposeEntries = Object.entries(purposeConsents).filter(([purposeId])=>{
4176
+ if (!searchQuery) return true;
4177
+ const purposeInfo = purposes[purposeId];
4178
+ const purposeName = purposeInfo?.name || `Purpose ${purposeId}`;
4179
+ return `${purposeId} ${purposeName}`.toLowerCase().includes(searchQuery);
4180
+ });
3467
4181
  if (purposeEntries.length > 0) {
3468
4182
  const purposeList = renderer_div({
3469
4183
  style: {
@@ -3491,7 +4205,12 @@ function iab_renderIabPanel(container, options) {
3491
4205
  }
3492
4206
  const specialFeatureOptIns = iabState.specialFeatureOptIns || {};
3493
4207
  const specialFeatures = gvl?.specialFeatures || {};
3494
- const specialFeatureEntries = Object.entries(specialFeatureOptIns);
4208
+ const specialFeatureEntries = Object.entries(specialFeatureOptIns).filter(([featureId])=>{
4209
+ if (!searchQuery) return true;
4210
+ const featureInfo = specialFeatures[featureId];
4211
+ const featureName = featureInfo?.name || `Special Feature ${featureId}`;
4212
+ return `${featureId} ${featureName}`.toLowerCase().includes(searchQuery);
4213
+ });
3495
4214
  if (specialFeatureEntries.length > 0) {
3496
4215
  const specialFeatureList = renderer_div({
3497
4216
  style: {
@@ -3519,7 +4238,12 @@ function iab_renderIabPanel(container, options) {
3519
4238
  }
3520
4239
  const vendorConsents = iabState.vendorConsents || {};
3521
4240
  const vendors = gvl?.vendors || {};
3522
- const vendorEntries = Object.entries(vendorConsents);
4241
+ const vendorEntries = Object.entries(vendorConsents).filter(([vendorId])=>{
4242
+ if (!searchQuery) return true;
4243
+ const vendorInfo = vendors[vendorId];
4244
+ const vendorName = vendorInfo?.name || `Vendor ${vendorId}`;
4245
+ return `${vendorId} ${vendorName}`.toLowerCase().includes(searchQuery);
4246
+ });
3523
4247
  const iabVendors = [];
3524
4248
  const customVendors = [];
3525
4249
  for (const [vendorId, consent] of vendorEntries){
@@ -3645,7 +4369,7 @@ function createPurposeRow(id, name, consent, onChange, ariaKind = 'purpose') {
3645
4369
  borderBottom: '1px solid var(--c15t-border)'
3646
4370
  },
3647
4371
  children: [
3648
- span({
4372
+ renderer_span({
3649
4373
  style: {
3650
4374
  color: 'var(--c15t-text)',
3651
4375
  overflow: 'hidden',
@@ -3699,7 +4423,7 @@ function createVendorRow(id, name, consent, type, onChange) {
3699
4423
  marginRight: '8px'
3700
4424
  },
3701
4425
  children: [
3702
- 'custom' === type ? span({
4426
+ 'custom' === type ? renderer_span({
3703
4427
  style: {
3704
4428
  fontSize: '9px',
3705
4429
  padding: '1px 4px',
@@ -3710,7 +4434,7 @@ function createVendorRow(id, name, consent, type, onChange) {
3710
4434
  },
3711
4435
  text: 'CUSTOM'
3712
4436
  }) : null,
3713
- span({
4437
+ renderer_span({
3714
4438
  style: {
3715
4439
  color: 'var(--c15t-text)',
3716
4440
  overflow: 'hidden',
@@ -3738,19 +4462,11 @@ function truncateText(text, maxLength) {
3738
4462
  if (text.length <= maxLength) return text;
3739
4463
  return `${text.slice(0, maxLength - 3)}...`;
3740
4464
  }
3741
- function location_renderLocationPanel(container, options) {
4465
+ function renderLocationPanel(container, options) {
3742
4466
  const { getState, onApplyOverrides, onClearOverrides } = options;
3743
4467
  clearElement(container);
3744
4468
  const state = getState();
3745
- if (!state) return void container.appendChild(renderer_div({
3746
- style: {
3747
- padding: '24px',
3748
- textAlign: 'center',
3749
- color: 'var(--c15t-text-muted)',
3750
- fontSize: 'var(--c15t-devtools-font-size-sm)'
3751
- },
3752
- text: 'Store not connected'
3753
- }));
4469
+ if (!state) return void container.appendChild(createDisconnectedState());
3754
4470
  const locationInfo = state.locationInfo;
3755
4471
  const overrides = state.overrides;
3756
4472
  const translationConfig = state.translationConfig;
@@ -3790,7 +4506,7 @@ function location_renderLocationPanel(container, options) {
3790
4506
  selectOptions: GPC_OPTIONS,
3791
4507
  value: initialDraft.gpc
3792
4508
  });
3793
- const formStatus = span({
4509
+ const formStatus = renderer_span({
3794
4510
  className: styles_components_module.overrideStatus,
3795
4511
  text: 'In sync'
3796
4512
  });
@@ -3836,7 +4552,7 @@ function location_renderLocationPanel(container, options) {
3836
4552
  title: 'Override Settings',
3837
4553
  children: [
3838
4554
  overrideFieldsGrid,
3839
- span({
4555
+ renderer_span({
3840
4556
  className: styles_components_module.overrideHint,
3841
4557
  text: 'GPC override only affects opt-out or unregulated jurisdictions.'
3842
4558
  }),
@@ -3924,7 +4640,7 @@ function createOverrideInput(options) {
3924
4640
  element: renderer_div({
3925
4641
  className: styles_components_module.overrideField,
3926
4642
  children: [
3927
- span({
4643
+ renderer_span({
3928
4644
  className: styles_components_module.overrideLabel,
3929
4645
  text: label
3930
4646
  }),
@@ -3945,7 +4661,7 @@ function createOverrideSelect(options) {
3945
4661
  element: renderer_div({
3946
4662
  className: styles_components_module.overrideField,
3947
4663
  children: [
3948
- span({
4664
+ renderer_span({
3949
4665
  className: styles_components_module.overrideLabel,
3950
4666
  text: label
3951
4667
  }),
@@ -4156,14 +4872,14 @@ function createCompactInfoCard(label, value) {
4156
4872
  gap: '1px'
4157
4873
  },
4158
4874
  children: [
4159
- span({
4875
+ renderer_span({
4160
4876
  style: {
4161
4877
  fontSize: 'var(--c15t-devtools-font-size-xs)',
4162
4878
  color: 'var(--c15t-text-muted)'
4163
4879
  },
4164
4880
  text: label
4165
4881
  }),
4166
- span({
4882
+ renderer_span({
4167
4883
  style: {
4168
4884
  fontSize: 'var(--c15t-font-size-sm)',
4169
4885
  fontWeight: '500',
@@ -4339,21 +5055,21 @@ function createResourceRow(resource, variant, onDismiss) {
4339
5055
  borderBottom: '1px solid var(--c15t-border)'
4340
5056
  },
4341
5057
  children: [
4342
- span({
5058
+ renderer_span({
4343
5059
  style: {
4344
5060
  color: iconColor,
4345
5061
  flexShrink: '0'
4346
5062
  },
4347
5063
  text: icon
4348
5064
  }),
4349
- span({
5065
+ renderer_span({
4350
5066
  style: {
4351
5067
  color: 'var(--c15t-text-muted)',
4352
5068
  flexShrink: '0'
4353
5069
  },
4354
5070
  text: `${resource.type}:`
4355
5071
  }),
4356
- span({
5072
+ renderer_span({
4357
5073
  style: {
4358
5074
  fontWeight: '500',
4359
5075
  color: 'var(--c15t-text)',
@@ -4399,23 +5115,37 @@ const CODE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" f
4399
5115
  <polyline points="16 18 22 12 16 6"></polyline>
4400
5116
  <polyline points="8 6 2 12 8 18"></polyline>
4401
5117
  </svg>`;
4402
- function scripts_renderScriptsPanel(container, options) {
5118
+ const scriptsSearchByContainer = new WeakMap();
5119
+ function renderScriptsPanel(container, options) {
4403
5120
  const { getState, getEvents } = options;
4404
5121
  clearElement(container);
4405
5122
  const state = getState();
4406
- if (!state) return void container.appendChild(renderer_div({
4407
- style: {
4408
- padding: '24px',
4409
- textAlign: 'center',
4410
- color: 'var(--c15t-text-muted)',
4411
- fontSize: 'var(--c15t-devtools-font-size-sm)'
4412
- },
4413
- text: 'Store not connected'
4414
- }));
5123
+ if (!state) return void container.appendChild(createDisconnectedState());
4415
5124
  const scripts = state.scripts || [];
4416
5125
  const loadedScripts = state.loadedScripts || {};
4417
5126
  const networkBlocker = state.networkBlocker;
4418
5127
  const events = getEvents?.() ?? [];
5128
+ const searchQuery = scriptsSearchByContainer.get(container) ?? '';
5129
+ const filteredScripts = scripts.filter((script)=>{
5130
+ if (!searchQuery) return true;
5131
+ const category = 'string' == typeof script.category ? script.category : JSON.stringify(script.category);
5132
+ return `${script.id} ${category}`.toLowerCase().includes(searchQuery);
5133
+ });
5134
+ if (scripts.length > 4) container.appendChild(createSection({
5135
+ title: 'Filter',
5136
+ children: [
5137
+ createInput({
5138
+ value: searchQuery,
5139
+ placeholder: "Filter scripts…",
5140
+ ariaLabel: "Filter scripts",
5141
+ small: true,
5142
+ onInput: (value)=>{
5143
+ scriptsSearchByContainer.set(container, value.trim().toLowerCase());
5144
+ renderScriptsPanel(container, options);
5145
+ }
5146
+ })
5147
+ ]
5148
+ }));
4419
5149
  if (0 === scripts.length) {
4420
5150
  const scriptsSection = createSection({
4421
5151
  title: 'Configured Scripts',
@@ -4432,10 +5162,19 @@ function scripts_renderScriptsPanel(container, options) {
4432
5162
  style: {
4433
5163
  display: 'flex',
4434
5164
  flexDirection: 'column',
4435
- gap: '4px'
5165
+ borderTop: '1px solid var(--c15t-border)',
5166
+ borderBottom: '1px solid var(--c15t-border)'
4436
5167
  }
4437
5168
  });
4438
- for (const script of scripts){
5169
+ if (0 === filteredScripts.length) scriptsList.appendChild(renderer_div({
5170
+ style: {
5171
+ padding: '10px 0',
5172
+ fontSize: 'var(--c15t-devtools-font-size-xs)',
5173
+ color: 'var(--c15t-text-muted)'
5174
+ },
5175
+ text: "No matching scripts"
5176
+ }));
5177
+ for (const script of filteredScripts){
4439
5178
  const scriptId = script.id;
4440
5179
  const isLoaded = true === loadedScripts[scriptId];
4441
5180
  const category = script.category;
@@ -4459,21 +5198,68 @@ function scripts_renderScriptsPanel(container, options) {
4459
5198
  text: status.charAt(0).toUpperCase() + status.slice(1),
4460
5199
  variant: statusVariant
4461
5200
  });
4462
- const item = createListItem({
4463
- title: scriptId,
4464
- description: `Category: ${categoryDisplay}`,
4465
- actions: [
4466
- badge
4467
- ]
4468
- });
4469
- scriptsList.appendChild(item);
4470
- }
4471
- const scriptsSection = createSection({
4472
- title: `Configured Scripts (${scripts.length})`,
4473
- children: [
4474
- scriptsList
4475
- ]
4476
- });
5201
+ const row = renderer_div({
5202
+ style: {
5203
+ display: 'flex',
5204
+ alignItems: 'center',
5205
+ justifyContent: 'space-between',
5206
+ gap: '8px',
5207
+ padding: '8px 0',
5208
+ borderBottom: '1px solid var(--c15t-border)'
5209
+ },
5210
+ children: [
5211
+ renderer_div({
5212
+ style: {
5213
+ display: 'flex',
5214
+ flexDirection: 'column',
5215
+ gap: '2px',
5216
+ minWidth: '0',
5217
+ flex: '1'
5218
+ },
5219
+ children: [
5220
+ renderer_div({
5221
+ style: {
5222
+ fontSize: 'var(--c15t-font-size-sm)',
5223
+ fontWeight: '500',
5224
+ color: 'var(--c15t-text)',
5225
+ overflow: 'hidden',
5226
+ textOverflow: 'ellipsis',
5227
+ whiteSpace: 'nowrap'
5228
+ },
5229
+ text: scriptId
5230
+ }),
5231
+ renderer_div({
5232
+ style: {
5233
+ fontSize: 'var(--c15t-devtools-font-size-xs)',
5234
+ color: 'var(--c15t-text-muted)',
5235
+ overflow: 'hidden',
5236
+ textOverflow: 'ellipsis',
5237
+ whiteSpace: 'nowrap'
5238
+ },
5239
+ text: `Category: ${categoryDisplay}`
5240
+ })
5241
+ ]
5242
+ }),
5243
+ renderer_div({
5244
+ style: {
5245
+ flexShrink: '0'
5246
+ },
5247
+ children: [
5248
+ badge
5249
+ ]
5250
+ })
5251
+ ]
5252
+ });
5253
+ scriptsList.appendChild(row);
5254
+ }
5255
+ const lastRow = scriptsList.lastElementChild;
5256
+ if (lastRow) lastRow.style.borderBottom = 'none';
5257
+ const scriptsSection = createSection({
5258
+ title: `Configured Scripts (${filteredScripts.length}/${scripts.length})`,
5259
+ children: [
5260
+ scriptsList
5261
+ ]
5262
+ });
4477
5263
  container.appendChild(scriptsSection);
4478
5264
  }
4479
5265
  const networkSection = createSection({
@@ -4611,53 +5397,6 @@ function scripts_truncateText(text, maxLength) {
4611
5397
  if (text.length <= maxLength) return text;
4612
5398
  return `${text.slice(0, maxLength - 3)}...`;
4613
5399
  }
4614
- const DEVTOOLS_OVERRIDES_STORAGE_KEY = 'c15t-devtools-overrides';
4615
- function normalizeStringValue(value) {
4616
- if ('string' != typeof value) return;
4617
- const normalized = value.trim();
4618
- return normalized.length > 0 ? normalized : void 0;
4619
- }
4620
- function normalizeBooleanValue(value) {
4621
- return 'boolean' == typeof value ? value : void 0;
4622
- }
4623
- function normalizeOverrides(value) {
4624
- if (!value || 'object' != typeof value) return null;
4625
- const source = value;
4626
- const overrides = {
4627
- country: normalizeStringValue(source.country),
4628
- region: normalizeStringValue(source.region),
4629
- language: normalizeStringValue(source.language),
4630
- gpc: normalizeBooleanValue(source.gpc)
4631
- };
4632
- return hasPersistedOverrides(overrides) ? overrides : null;
4633
- }
4634
- function hasPersistedOverrides(overrides) {
4635
- return Boolean(overrides.country || overrides.region || overrides.language || void 0 !== overrides.gpc);
4636
- }
4637
- function override_storage_loadPersistedOverrides(storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
4638
- if ('undefined' == typeof window) return null;
4639
- try {
4640
- const stored = localStorage.getItem(storageKey);
4641
- if (!stored) return null;
4642
- const parsed = JSON.parse(stored);
4643
- return normalizeOverrides(parsed);
4644
- } catch {
4645
- return null;
4646
- }
4647
- }
4648
- function override_storage_persistOverrides(overrides, storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
4649
- if ('undefined' == typeof window) return;
4650
- try {
4651
- if (!hasPersistedOverrides(overrides)) return void localStorage.removeItem(storageKey);
4652
- localStorage.setItem(storageKey, JSON.stringify(overrides));
4653
- } catch {}
4654
- }
4655
- function override_storage_clearPersistedOverrides(storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
4656
- if ('undefined' == typeof window) return;
4657
- try {
4658
- localStorage.removeItem(storageKey);
4659
- } catch {}
4660
- }
4661
5400
  const STORAGE_KEYS = {
4662
5401
  C15T: 'c15t',
4663
5402
  PENDING_SYNC: 'c15t:pending-consent-sync',
@@ -4683,7 +5422,7 @@ function clearAllLocalStorage() {
4683
5422
  localStorage.removeItem(STORAGE_KEYS.EUCONSENT);
4684
5423
  } catch {}
4685
5424
  }
4686
- async function reset_consents_resetAllConsents(store, stateManager) {
5425
+ async function resetAllConsents(store, stateManager) {
4687
5426
  const storeState = store.getState();
4688
5427
  storeState.resetConsents();
4689
5428
  clearAllCookies();
@@ -4694,7 +5433,222 @@ async function reset_consents_resetAllConsents(store, stateManager) {
4694
5433
  message: 'All consents reset (storage cleared)'
4695
5434
  });
4696
5435
  }
5436
+ function panel_renderer_createPanelRenderer(config) {
5437
+ const { storeConnector, stateManager, enableEventLogging = true, onPersistOverrides, onClearPersistedOverrides, onCopyState, onExportDebugBundle } = config;
5438
+ const getStoreState = ()=>storeConnector.getState();
5439
+ const logEvent = (type, message, data)=>{
5440
+ if (enableEventLogging) stateManager.addEvent({
5441
+ type,
5442
+ message,
5443
+ data
5444
+ });
5445
+ };
5446
+ const resetConsents = async ()=>{
5447
+ const store = storeConnector.getStore();
5448
+ if (store) await resetAllConsents(store, enableEventLogging ? stateManager : void 0);
5449
+ };
5450
+ const renderPanel = (container, tab)=>{
5451
+ switch(tab){
5452
+ case 'consents':
5453
+ renderConsentsPanel(container, {
5454
+ getState: getStoreState,
5455
+ onConsentChange: (name, value)=>{
5456
+ const store = storeConnector.getStore();
5457
+ if (store) {
5458
+ const consentName = String(name);
5459
+ store.getState().setSelectedConsent(consentName, value);
5460
+ logEvent('info', `${consentName} toggled to ${value} (not saved)`, {
5461
+ name: consentName,
5462
+ value
5463
+ });
5464
+ }
5465
+ },
5466
+ onSave: ()=>{
5467
+ const store = storeConnector.getStore();
5468
+ if (store) {
5469
+ store.getState().saveConsents('custom');
5470
+ logEvent('consent_save', 'Saved consent preferences');
5471
+ }
5472
+ },
5473
+ onAcceptAll: ()=>{
5474
+ const store = storeConnector.getStore();
5475
+ if (store) {
5476
+ store.getState().saveConsents('all');
5477
+ logEvent('consent_save', 'Accepted all consents');
5478
+ }
5479
+ },
5480
+ onRejectAll: ()=>{
5481
+ const store = storeConnector.getStore();
5482
+ if (store) {
5483
+ store.getState().saveConsents('necessary');
5484
+ logEvent('consent_save', 'Rejected all optional consents');
5485
+ }
5486
+ },
5487
+ onReset: resetConsents
5488
+ });
5489
+ break;
5490
+ case 'location':
5491
+ renderLocationPanel(container, {
5492
+ getState: getStoreState,
5493
+ onApplyOverrides: async (overrides)=>{
5494
+ const store = storeConnector.getStore();
5495
+ if (store) {
5496
+ await store.getState().setOverrides({
5497
+ country: overrides.country,
5498
+ region: overrides.region,
5499
+ language: overrides.language,
5500
+ gpc: overrides.gpc
5501
+ });
5502
+ logEvent('info', 'Overrides updated', {
5503
+ country: overrides.country,
5504
+ region: overrides.region,
5505
+ language: overrides.language,
5506
+ gpc: overrides.gpc
5507
+ });
5508
+ onPersistOverrides?.({
5509
+ country: overrides.country,
5510
+ region: overrides.region,
5511
+ language: overrides.language,
5512
+ gpc: overrides.gpc
5513
+ });
5514
+ }
5515
+ },
5516
+ onClearOverrides: async ()=>{
5517
+ const store = storeConnector.getStore();
5518
+ if (store) {
5519
+ await store.getState().setOverrides({
5520
+ country: void 0,
5521
+ region: void 0,
5522
+ language: void 0,
5523
+ gpc: void 0
5524
+ });
5525
+ logEvent('info', 'Overrides cleared');
5526
+ onClearPersistedOverrides?.();
5527
+ }
5528
+ }
5529
+ });
5530
+ break;
5531
+ case "scripts":
5532
+ renderScriptsPanel(container, {
5533
+ getState: getStoreState,
5534
+ getEvents: ()=>stateManager.getState().eventLog
5535
+ });
5536
+ break;
5537
+ case 'iab':
5538
+ renderIabPanel(container, {
5539
+ getState: getStoreState,
5540
+ onSetPurposeConsent: (purposeId, value)=>{
5541
+ const iab = storeConnector.getStore()?.getState().iab;
5542
+ if (!iab) return;
5543
+ iab.setPurposeConsent(purposeId, value);
5544
+ logEvent('iab', `IAB purpose ${purposeId} set to ${value}`);
5545
+ },
5546
+ onSetVendorConsent: (vendorId, value)=>{
5547
+ const iab = storeConnector.getStore()?.getState().iab;
5548
+ if (!iab) return;
5549
+ iab.setVendorConsent(vendorId, value);
5550
+ logEvent('iab', `IAB vendor ${vendorId} set to ${value}`);
5551
+ },
5552
+ onSetSpecialFeatureOptIn: (featureId, value)=>{
5553
+ const iab = storeConnector.getStore()?.getState().iab;
5554
+ if (!iab) return;
5555
+ iab.setSpecialFeatureOptIn(featureId, value);
5556
+ logEvent('iab', `IAB feature ${featureId} set to ${value}`);
5557
+ },
5558
+ onAcceptAll: ()=>{
5559
+ const iab = storeConnector.getStore()?.getState().iab;
5560
+ if (!iab) return;
5561
+ iab.acceptAll();
5562
+ logEvent('iab', 'IAB accept all selected');
5563
+ },
5564
+ onRejectAll: ()=>{
5565
+ const iab = storeConnector.getStore()?.getState().iab;
5566
+ if (!iab) return;
5567
+ iab.rejectAll();
5568
+ logEvent('iab', 'IAB reject all selected');
5569
+ },
5570
+ onSave: ()=>{
5571
+ const iab = storeConnector.getStore()?.getState().iab;
5572
+ if (!iab) return;
5573
+ iab.save().then(()=>logEvent('iab', 'IAB preferences saved')).catch((error)=>{
5574
+ logEvent('error', `Failed to save IAB preferences: ${String(error)}`);
5575
+ });
5576
+ },
5577
+ onReset: resetConsents
5578
+ });
5579
+ break;
5580
+ case 'events':
5581
+ renderEventsPanel(container, {
5582
+ getEvents: ()=>stateManager.getState().eventLog,
5583
+ onClear: ()=>{
5584
+ stateManager.clearEventLog();
5585
+ logEvent('info', 'Event log cleared');
5586
+ }
5587
+ });
5588
+ break;
5589
+ case 'actions':
5590
+ renderActionsPanel(container, {
5591
+ getState: getStoreState,
5592
+ onResetConsents: resetConsents,
5593
+ onRefetchBanner: async ()=>{
5594
+ const store = storeConnector.getStore();
5595
+ if (store) {
5596
+ await store.getState().initConsentManager();
5597
+ logEvent('info', 'Banner data refetched');
5598
+ }
5599
+ },
5600
+ onShowBanner: ()=>{
5601
+ const store = storeConnector.getStore();
5602
+ if (store) {
5603
+ store.getState().setActiveUI('banner', {
5604
+ force: true
5605
+ });
5606
+ logEvent('info', 'Banner shown');
5607
+ }
5608
+ },
5609
+ onOpenPreferences: ()=>{
5610
+ const store = storeConnector.getStore();
5611
+ if (store) {
5612
+ store.getState().setActiveUI('dialog');
5613
+ logEvent('info', 'Preferences dialog opened');
5614
+ }
5615
+ },
5616
+ onCopyState: ()=>{
5617
+ const state = getStoreState();
5618
+ if (state) if (onCopyState) {
5619
+ const result = onCopyState(state);
5620
+ if (result instanceof Promise) result.then((ok)=>{
5621
+ logEvent(ok ? 'info' : 'error', ok ? 'State copied to clipboard' : 'Failed to copy state');
5622
+ }).catch(()=>{
5623
+ logEvent('error', 'Failed to copy state');
5624
+ });
5625
+ else logEvent(result ? 'info' : 'error', result ? 'State copied to clipboard' : 'Failed to copy state');
5626
+ } else navigator.clipboard.writeText(JSON.stringify(state, null, 2)).then(()=>{
5627
+ logEvent('info', 'State copied to clipboard');
5628
+ }).catch(()=>{
5629
+ logEvent('error', 'Failed to copy state');
5630
+ });
5631
+ },
5632
+ onExportDebugBundle: onExportDebugBundle ? ()=>{
5633
+ try {
5634
+ onExportDebugBundle();
5635
+ logEvent('info', 'Debug bundle exported');
5636
+ } catch {
5637
+ logEvent('error', 'Failed to export debug bundle');
5638
+ }
5639
+ } : void 0
5640
+ });
5641
+ break;
5642
+ }
5643
+ };
5644
+ return {
5645
+ renderPanel,
5646
+ getStoreState,
5647
+ resetConsents
5648
+ };
5649
+ }
4697
5650
  const STORAGE_KEY = 'c15t-devtools-events';
5651
+ const ACTIVE_TAB_STORAGE_KEY = 'c15t-devtools-active-tab';
4698
5652
  function loadPersistedEvents() {
4699
5653
  if ('undefined' == typeof window) return [];
4700
5654
  try {
@@ -4709,11 +5663,29 @@ function persistEvents(events) {
4709
5663
  sessionStorage.setItem(STORAGE_KEY, JSON.stringify(events));
4710
5664
  } catch {}
4711
5665
  }
5666
+ function isDevToolsTab(value) {
5667
+ return 'consents' === value || 'location' === value || "scripts" === value || 'iab' === value || 'events' === value || 'actions' === value;
5668
+ }
5669
+ function loadPersistedActiveTab() {
5670
+ if ('undefined' == typeof window) return null;
5671
+ try {
5672
+ const stored = localStorage.getItem(ACTIVE_TAB_STORAGE_KEY);
5673
+ if (isDevToolsTab(stored)) return stored;
5674
+ } catch {}
5675
+ return null;
5676
+ }
5677
+ function persistActiveTab(tab) {
5678
+ if ('undefined' == typeof window) return;
5679
+ try {
5680
+ localStorage.setItem(ACTIVE_TAB_STORAGE_KEY, tab);
5681
+ } catch {}
5682
+ }
4712
5683
  function state_manager_createStateManager(initialState = {}) {
4713
5684
  const persistedEvents = loadPersistedEvents();
5685
+ const persistedActiveTab = loadPersistedActiveTab();
4714
5686
  let state = {
4715
5687
  isOpen: false,
4716
- activeTab: 'location',
5688
+ activeTab: persistedActiveTab ?? 'location',
4717
5689
  position: 'bottom-right',
4718
5690
  isConnected: false,
4719
5691
  eventLog: persistedEvents,
@@ -4754,6 +5726,7 @@ function state_manager_createStateManager(initialState = {}) {
4754
5726
  setState({
4755
5727
  activeTab: tab
4756
5728
  });
5729
+ persistActiveTab(tab);
4757
5730
  },
4758
5731
  setPosition: (position)=>{
4759
5732
  setState({
@@ -4799,22 +5772,52 @@ function store_connector_createStoreConnector(options = {}) {
4799
5772
  let reconnectAttempts = 0;
4800
5773
  let hasNotifiedDisconnect = false;
4801
5774
  const listeners = new Set();
5775
+ const diagnosticsListeners = new Set();
5776
+ let diagnostics = {
5777
+ namespace,
5778
+ reconnectAttempts: 0,
5779
+ nextRetryInMs: null,
5780
+ lastError: null,
5781
+ isPolling: false,
5782
+ disconnectNotified: false
5783
+ };
4802
5784
  const INITIAL_RETRY_DELAY_MS = 100;
4803
5785
  const MAX_RETRY_DELAY_MS = 2000;
4804
5786
  const DISCONNECT_NOTIFY_ATTEMPTS = 5;
5787
+ function updateDiagnostics(partial, notify = true) {
5788
+ diagnostics = {
5789
+ ...diagnostics,
5790
+ ...partial
5791
+ };
5792
+ if (!notify) return;
5793
+ for (const listener of diagnosticsListeners)listener(diagnostics);
5794
+ }
4805
5795
  function clearReconnectTimer() {
4806
5796
  if (reconnectTimeout) {
4807
5797
  clearTimeout(reconnectTimeout);
4808
5798
  reconnectTimeout = null;
5799
+ updateDiagnostics({
5800
+ isPolling: false,
5801
+ nextRetryInMs: null
5802
+ });
4809
5803
  }
4810
5804
  }
4811
5805
  function resetReconnectState() {
4812
5806
  reconnectAttempts = 0;
4813
5807
  hasNotifiedDisconnect = false;
5808
+ updateDiagnostics({
5809
+ reconnectAttempts: 0,
5810
+ nextRetryInMs: null,
5811
+ lastError: null,
5812
+ disconnectNotified: false
5813
+ });
4814
5814
  }
4815
5815
  function notifyDisconnectedOnce() {
4816
5816
  if (hasNotifiedDisconnect) return;
4817
5817
  hasNotifiedDisconnect = true;
5818
+ updateDiagnostics({
5819
+ disconnectNotified: true
5820
+ });
4818
5821
  onDisconnect?.();
4819
5822
  }
4820
5823
  function tryConnect() {
@@ -4835,16 +5838,31 @@ function store_connector_createStoreConnector(options = {}) {
4835
5838
  onConnect?.(currentState, store);
4836
5839
  clearReconnectTimer();
4837
5840
  resetReconnectState();
5841
+ updateDiagnostics({
5842
+ lastError: null
5843
+ });
4838
5844
  return true;
4839
5845
  }
5846
+ updateDiagnostics({
5847
+ lastError: `Store "${namespace}" not found on window`
5848
+ });
4840
5849
  return false;
4841
5850
  }
4842
5851
  function scheduleReconnect(immediate = false) {
4843
5852
  if (store || reconnectTimeout) return;
4844
5853
  const delay = immediate ? 0 : Math.min(INITIAL_RETRY_DELAY_MS * 2 ** Math.min(reconnectAttempts, 5), MAX_RETRY_DELAY_MS);
5854
+ updateDiagnostics({
5855
+ isPolling: true,
5856
+ nextRetryInMs: delay,
5857
+ reconnectAttempts
5858
+ });
4845
5859
  reconnectTimeout = setTimeout(()=>{
4846
5860
  reconnectTimeout = null;
4847
5861
  reconnectAttempts++;
5862
+ updateDiagnostics({
5863
+ reconnectAttempts,
5864
+ nextRetryInMs: null
5865
+ });
4848
5866
  if (tryConnect()) return;
4849
5867
  if (reconnectAttempts >= DISCONNECT_NOTIFY_ATTEMPTS) notifyDisconnectedOnce();
4850
5868
  scheduleReconnect();
@@ -4866,6 +5884,14 @@ function store_connector_createStoreConnector(options = {}) {
4866
5884
  listeners.delete(listener);
4867
5885
  };
4868
5886
  },
5887
+ getDiagnostics: ()=>diagnostics,
5888
+ subscribeDiagnostics: (listener)=>{
5889
+ diagnosticsListeners.add(listener);
5890
+ listener(diagnostics);
5891
+ return ()=>{
5892
+ diagnosticsListeners.delete(listener);
5893
+ };
5894
+ },
4869
5895
  retryConnection: ()=>{
4870
5896
  if (store) return;
4871
5897
  resetReconnectState();
@@ -4879,6 +5905,134 @@ function store_connector_createStoreConnector(options = {}) {
4879
5905
  }
4880
5906
  store = null;
4881
5907
  listeners.clear();
5908
+ diagnosticsListeners.clear();
5909
+ }
5910
+ };
5911
+ }
5912
+ const REGISTRY_KEY = '__c15tDevToolsInstrumentationRegistry';
5913
+ let fallbackRegistry = null;
5914
+ function getRegistry() {
5915
+ if ('undefined' == typeof window) {
5916
+ if (!fallbackRegistry) fallbackRegistry = new Map();
5917
+ return fallbackRegistry;
5918
+ }
5919
+ const host = window;
5920
+ const existing = host[REGISTRY_KEY];
5921
+ if (existing) return existing;
5922
+ const registry = new Map();
5923
+ host[REGISTRY_KEY] = registry;
5924
+ return registry;
5925
+ }
5926
+ function getBlockedRequestMessage(payload) {
5927
+ const data = payload;
5928
+ const method = 'string' == typeof data?.method ? data.method.toUpperCase() : 'REQUEST';
5929
+ const url = 'string' == typeof data?.url ? data.url : 'unknown-url';
5930
+ return `Network blocked: ${method} ${url}`;
5931
+ }
5932
+ function emitEvent(entry, event) {
5933
+ for (const listener of entry.listeners)listener(event);
5934
+ }
5935
+ function ensureNetworkBlockerWrapped(entry) {
5936
+ const blocker = entry.store.getState().networkBlocker;
5937
+ if (!blocker) return;
5938
+ if (blocker.onRequestBlocked === entry.wrappedNetworkBlockedCallback) return;
5939
+ entry.originalNetworkBlockedCallback = blocker.onRequestBlocked;
5940
+ entry.wrappedNetworkBlockedCallback = (payload)=>{
5941
+ emitEvent(entry, {
5942
+ type: 'network',
5943
+ message: getBlockedRequestMessage(payload),
5944
+ data: payload
5945
+ });
5946
+ if ('function' == typeof entry.originalNetworkBlockedCallback) entry.originalNetworkBlockedCallback(payload);
5947
+ };
5948
+ entry.store.getState().setNetworkBlocker({
5949
+ ...blocker,
5950
+ onRequestBlocked: entry.wrappedNetworkBlockedCallback
5951
+ });
5952
+ }
5953
+ function restoreInstrumentation(entry) {
5954
+ entry.stopWatchingStore?.();
5955
+ entry.stopWatchingStore = null;
5956
+ const state = entry.store.getState();
5957
+ state.setCallback('onBannerFetched', entry.originalCallbacks.onBannerFetched);
5958
+ state.setCallback('onConsentSet', entry.originalCallbacks.onConsentSet);
5959
+ state.setCallback('onError', entry.originalCallbacks.onError);
5960
+ state.setCallback('onBeforeConsentRevocationReload', entry.originalCallbacks.onBeforeConsentRevocationReload);
5961
+ const blocker = state.networkBlocker;
5962
+ if (blocker && blocker.onRequestBlocked === entry.wrappedNetworkBlockedCallback) state.setNetworkBlocker({
5963
+ ...blocker,
5964
+ onRequestBlocked: entry.originalNetworkBlockedCallback
5965
+ });
5966
+ entry.wrappedNetworkBlockedCallback = null;
5967
+ }
5968
+ function createInstrumentationEntry(store) {
5969
+ const entry = {
5970
+ store,
5971
+ listeners: new Set(),
5972
+ originalCallbacks: {
5973
+ ...store.getState().callbacks
5974
+ },
5975
+ originalNetworkBlockedCallback: store.getState().networkBlocker?.onRequestBlocked,
5976
+ wrappedNetworkBlockedCallback: null,
5977
+ stopWatchingStore: null
5978
+ };
5979
+ store.getState().setCallback('onBannerFetched', (payload)=>{
5980
+ const jurisdiction = payload.jurisdiction;
5981
+ emitEvent(entry, {
5982
+ type: 'info',
5983
+ message: `Banner fetched: ${String(jurisdiction)}`,
5984
+ data: payload
5985
+ });
5986
+ if ('function' == typeof entry.originalCallbacks.onBannerFetched) entry.originalCallbacks.onBannerFetched(payload);
5987
+ });
5988
+ store.getState().setCallback('onConsentSet', (payload)=>{
5989
+ emitEvent(entry, {
5990
+ type: 'consent_set',
5991
+ message: 'Consent preferences updated',
5992
+ data: payload
5993
+ });
5994
+ if ('function' == typeof entry.originalCallbacks.onConsentSet) entry.originalCallbacks.onConsentSet(payload);
5995
+ });
5996
+ store.getState().setCallback('onError', (payload)=>{
5997
+ const errorMessage = payload.error;
5998
+ emitEvent(entry, {
5999
+ type: 'error',
6000
+ message: `Error: ${String(errorMessage)}`,
6001
+ data: payload
6002
+ });
6003
+ if ('function' == typeof entry.originalCallbacks.onError) entry.originalCallbacks.onError(payload);
6004
+ });
6005
+ store.getState().setCallback('onBeforeConsentRevocationReload', (payload)=>{
6006
+ emitEvent(entry, {
6007
+ type: 'info',
6008
+ message: 'Consent revocation - page will reload',
6009
+ data: payload
6010
+ });
6011
+ if ('function' == typeof entry.originalCallbacks.onBeforeConsentRevocationReload) entry.originalCallbacks.onBeforeConsentRevocationReload(payload);
6012
+ });
6013
+ ensureNetworkBlockerWrapped(entry);
6014
+ entry.stopWatchingStore = store.subscribe(()=>{
6015
+ ensureNetworkBlockerWrapped(entry);
6016
+ });
6017
+ return entry;
6018
+ }
6019
+ function store_instrumentation_registerStoreInstrumentation(options) {
6020
+ const { namespace, store, onEvent } = options;
6021
+ const registry = getRegistry();
6022
+ let entry = registry.get(namespace);
6023
+ if (!entry || entry.store !== store) {
6024
+ if (entry) restoreInstrumentation(entry);
6025
+ entry = createInstrumentationEntry(store);
6026
+ registry.set(namespace, entry);
6027
+ }
6028
+ entry.listeners.add(onEvent);
6029
+ return ()=>{
6030
+ const current = registry.get(namespace);
6031
+ if (!current) return;
6032
+ current.listeners.delete(onEvent);
6033
+ if (0 === current.listeners.size) {
6034
+ restoreInstrumentation(current);
6035
+ registry.delete(namespace);
4882
6036
  }
4883
6037
  };
4884
6038
  }
@@ -4905,12 +6059,6 @@ function normalizeOverridesForPersistence(overrides) {
4905
6059
  function persistedOverridesEqual(a, b) {
4906
6060
  return a.country === b.country && a.region === b.region && a.language === b.language && a.gpc === b.gpc;
4907
6061
  }
4908
- function getBlockedRequestMessage(payload) {
4909
- const data = payload;
4910
- const method = 'string' == typeof data?.method ? data.method.toUpperCase() : 'REQUEST';
4911
- const url = 'string' == typeof data?.url ? data.url : 'unknown-url';
4912
- return `Network blocked: ${method} ${url}`;
4913
- }
4914
6062
  function prefersReducedMotion() {
4915
6063
  return 'undefined' != typeof window && 'function' == typeof window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
4916
6064
  }
@@ -4971,74 +6119,43 @@ function createPanelHeightAnimator() {
4971
6119
  destroy: clearAnimationState
4972
6120
  };
4973
6121
  }
6122
+ function createStateCopy(state) {
6123
+ return {
6124
+ consents: state.consents,
6125
+ selectedConsents: state.selectedConsents,
6126
+ consentInfo: state.consentInfo,
6127
+ locationInfo: state.locationInfo,
6128
+ model: state.model,
6129
+ overrides: state.overrides,
6130
+ scripts: state.scripts?.map((script)=>({
6131
+ id: script.id
6132
+ })),
6133
+ loadedScripts: state.loadedScripts
6134
+ };
6135
+ }
4974
6136
  function createDevTools(options = {}) {
4975
6137
  const { namespace = 'c15tStore', position = 'bottom-right', defaultOpen = false } = options;
4976
6138
  const stateManager = state_manager_createStateManager({
4977
6139
  position,
4978
6140
  isOpen: defaultOpen
4979
6141
  });
4980
- let originalCallbacks = {};
4981
- let originalNetworkBlockedCallback;
4982
- let hasWrappedNetworkBlockerCallback = false;
6142
+ let detachInstrumentation = null;
4983
6143
  const storeConnector = store_connector_createStoreConnector({
4984
6144
  namespace,
4985
- onConnect: (state, store)=>{
6145
+ onConnect: (_state, store)=>{
6146
+ detachInstrumentation?.();
6147
+ detachInstrumentation = store_instrumentation_registerStoreInstrumentation({
6148
+ namespace,
6149
+ store,
6150
+ onEvent: (event)=>{
6151
+ stateManager.addEvent(event);
6152
+ }
6153
+ });
4986
6154
  stateManager.setConnected(true);
4987
6155
  stateManager.addEvent({
4988
6156
  type: 'info',
4989
6157
  message: 'Connected to c15tStore'
4990
6158
  });
4991
- originalCallbacks = {
4992
- ...state.callbacks
4993
- };
4994
- store.getState().setCallback('onBannerFetched', (payload)=>{
4995
- stateManager.addEvent({
4996
- type: 'info',
4997
- message: `Banner fetched: ${String(payload.jurisdiction)}`,
4998
- data: payload
4999
- });
5000
- if ('function' == typeof originalCallbacks.onBannerFetched) originalCallbacks.onBannerFetched(payload);
5001
- });
5002
- store.getState().setCallback('onConsentSet', (payload)=>{
5003
- stateManager.addEvent({
5004
- type: 'consent_set',
5005
- message: 'Consent preferences updated',
5006
- data: payload
5007
- });
5008
- if ('function' == typeof originalCallbacks.onConsentSet) originalCallbacks.onConsentSet(payload);
5009
- });
5010
- store.getState().setCallback('onError', (payload)=>{
5011
- stateManager.addEvent({
5012
- type: 'error',
5013
- message: `Error: ${payload.error}`,
5014
- data: payload
5015
- });
5016
- if ('function' == typeof originalCallbacks.onError) originalCallbacks.onError(payload);
5017
- });
5018
- store.getState().setCallback('onBeforeConsentRevocationReload', (payload)=>{
5019
- stateManager.addEvent({
5020
- type: 'info',
5021
- message: 'Consent revocation - page will reload',
5022
- data: payload
5023
- });
5024
- if ('function' == typeof originalCallbacks.onBeforeConsentRevocationReload) originalCallbacks.onBeforeConsentRevocationReload(payload);
5025
- });
5026
- const currentNetworkBlocker = store.getState().networkBlocker;
5027
- if (currentNetworkBlocker && !hasWrappedNetworkBlockerCallback) {
5028
- originalNetworkBlockedCallback = currentNetworkBlocker.onRequestBlocked;
5029
- hasWrappedNetworkBlockerCallback = true;
5030
- store.getState().setNetworkBlocker({
5031
- ...currentNetworkBlocker,
5032
- onRequestBlocked: (payload)=>{
5033
- stateManager.addEvent({
5034
- type: 'network',
5035
- message: getBlockedRequestMessage(payload),
5036
- data: payload
5037
- });
5038
- if ('function' == typeof originalNetworkBlockedCallback) originalNetworkBlockedCallback(payload);
5039
- }
5040
- });
5041
- }
5042
6159
  const persistedOverrides = override_storage_loadPersistedOverrides();
5043
6160
  if (persistedOverrides) {
5044
6161
  const currentOverrides = normalizeOverridesForPersistence(store.getState().overrides);
@@ -5068,6 +6185,8 @@ function createDevTools(options = {}) {
5068
6185
  },
5069
6186
  onDisconnect: ()=>{
5070
6187
  stateManager.setConnected(false);
6188
+ detachInstrumentation?.();
6189
+ detachInstrumentation = null;
5071
6190
  stateManager.addEvent({
5072
6191
  type: 'error',
5073
6192
  message: 'Disconnected from c15tStore'
@@ -5075,6 +6194,31 @@ function createDevTools(options = {}) {
5075
6194
  },
5076
6195
  onStateChange: ()=>{}
5077
6196
  });
6197
+ const panelRenderer = panel_renderer_createPanelRenderer({
6198
+ storeConnector,
6199
+ stateManager,
6200
+ enableEventLogging: true,
6201
+ onPersistOverrides: override_storage_persistOverrides,
6202
+ onClearPersistedOverrides: override_storage_clearPersistedOverrides,
6203
+ onCopyState: async (state)=>{
6204
+ try {
6205
+ await navigator.clipboard.writeText(JSON.stringify(createStateCopy(state), null, 2));
6206
+ return true;
6207
+ } catch {
6208
+ return false;
6209
+ }
6210
+ },
6211
+ onExportDebugBundle: ()=>{
6212
+ const bundle = debug_bundle_createDebugBundle({
6213
+ namespace,
6214
+ devToolsState: stateManager.getState(),
6215
+ connection: storeConnector.getDiagnostics(),
6216
+ recentEvents: stateManager.getState().eventLog.slice(0, 100),
6217
+ storeState: debug_bundle_sanitizeStoreState(storeConnector.getState())
6218
+ });
6219
+ debug_bundle_downloadDebugBundle(bundle);
6220
+ }
6221
+ });
5078
6222
  let tabsInstance = null;
5079
6223
  const panelHeightAnimator = createPanelHeightAnimator();
5080
6224
  const panelInstance = createPanel({
@@ -5082,19 +6226,24 @@ function createDevTools(options = {}) {
5082
6226
  storeConnector,
5083
6227
  namespace,
5084
6228
  onRenderContent: (container)=>{
5085
- renderContent(container, stateManager, storeConnector);
6229
+ renderContent(container);
5086
6230
  }
5087
6231
  });
5088
- function renderContent(container, stateManager, storeConnector) {
6232
+ function renderContent(container) {
5089
6233
  const panel = container.parentElement;
5090
6234
  const previousPanelHeight = panel?.getBoundingClientRect().height ?? 0;
5091
6235
  clearElement(container);
5092
6236
  const storeState = storeConnector.getState();
5093
6237
  const disabledTabs = [];
5094
6238
  if (!storeState || 'iab' !== storeState.model) disabledTabs.push('iab');
6239
+ let currentActiveTab = stateManager.getState().activeTab;
6240
+ if (disabledTabs.includes(currentActiveTab)) {
6241
+ stateManager.setActiveTab('consents');
6242
+ currentActiveTab = 'consents';
6243
+ }
5095
6244
  if (tabsInstance) tabsInstance.destroy();
5096
6245
  tabsInstance = tabs_createTabs({
5097
- activeTab: stateManager.getState().activeTab,
6246
+ activeTab: currentActiveTab,
5098
6247
  onTabChange: (tab)=>{
5099
6248
  stateManager.setActiveTab(tab);
5100
6249
  },
@@ -5109,284 +6258,9 @@ function createDevTools(options = {}) {
5109
6258
  }
5110
6259
  });
5111
6260
  container.appendChild(panelContent);
5112
- const state = stateManager.getState();
5113
- const getStoreState = ()=>storeConnector.getState();
5114
- switch(state.activeTab){
5115
- case 'consents':
5116
- consents_renderConsentsPanel(panelContent, {
5117
- getState: getStoreState,
5118
- onConsentChange: (name, value)=>{
5119
- const store = storeConnector.getStore();
5120
- if (store) {
5121
- const consentName = String(name);
5122
- store.getState().setSelectedConsent(consentName, value);
5123
- stateManager.addEvent({
5124
- type: 'info',
5125
- message: `${consentName} toggled to ${value} (not saved)`,
5126
- data: {
5127
- name: consentName,
5128
- value
5129
- }
5130
- });
5131
- }
5132
- },
5133
- onSave: ()=>{
5134
- const store = storeConnector.getStore();
5135
- if (store) {
5136
- store.getState().saveConsents('custom');
5137
- stateManager.addEvent({
5138
- type: 'consent_save',
5139
- message: 'Saved consent preferences'
5140
- });
5141
- }
5142
- },
5143
- onAcceptAll: ()=>{
5144
- const store = storeConnector.getStore();
5145
- if (store) {
5146
- store.getState().saveConsents('all');
5147
- stateManager.addEvent({
5148
- type: 'consent_save',
5149
- message: 'Accepted all consents'
5150
- });
5151
- }
5152
- },
5153
- onRejectAll: ()=>{
5154
- const store = storeConnector.getStore();
5155
- if (store) {
5156
- store.getState().saveConsents('necessary');
5157
- stateManager.addEvent({
5158
- type: 'consent_save',
5159
- message: 'Rejected all optional consents'
5160
- });
5161
- }
5162
- },
5163
- onReset: async ()=>{
5164
- const store = storeConnector.getStore();
5165
- if (store) await reset_consents_resetAllConsents(store, stateManager);
5166
- }
5167
- });
5168
- break;
5169
- case 'location':
5170
- location_renderLocationPanel(panelContent, {
5171
- getState: getStoreState,
5172
- onApplyOverrides: async (overrides)=>{
5173
- const store = storeConnector.getStore();
5174
- if (store) {
5175
- await store.getState().setOverrides({
5176
- country: overrides.country,
5177
- region: overrides.region,
5178
- language: overrides.language,
5179
- gpc: overrides.gpc
5180
- });
5181
- override_storage_persistOverrides({
5182
- country: overrides.country,
5183
- region: overrides.region,
5184
- language: overrides.language,
5185
- gpc: overrides.gpc
5186
- });
5187
- stateManager.addEvent({
5188
- type: 'info',
5189
- message: 'Overrides updated',
5190
- data: {
5191
- country: overrides.country,
5192
- region: overrides.region,
5193
- language: overrides.language,
5194
- gpc: overrides.gpc
5195
- }
5196
- });
5197
- }
5198
- },
5199
- onClearOverrides: async ()=>{
5200
- const store = storeConnector.getStore();
5201
- if (store) {
5202
- await store.getState().setOverrides({
5203
- country: void 0,
5204
- region: void 0,
5205
- language: void 0,
5206
- gpc: void 0
5207
- });
5208
- override_storage_clearPersistedOverrides();
5209
- stateManager.addEvent({
5210
- type: 'info',
5211
- message: 'Overrides cleared'
5212
- });
5213
- }
5214
- }
5215
- });
5216
- break;
5217
- case "scripts":
5218
- scripts_renderScriptsPanel(panelContent, {
5219
- getState: getStoreState,
5220
- getEvents: ()=>stateManager.getState().eventLog
5221
- });
5222
- break;
5223
- case 'iab':
5224
- iab_renderIabPanel(panelContent, {
5225
- getState: getStoreState,
5226
- onSetPurposeConsent: (purposeId, value)=>{
5227
- const iab = storeConnector.getStore()?.getState().iab;
5228
- if (!iab) return;
5229
- iab.setPurposeConsent(purposeId, value);
5230
- stateManager.addEvent({
5231
- type: 'iab',
5232
- message: `IAB purpose ${purposeId} set to ${value}`,
5233
- data: {
5234
- purposeId,
5235
- value
5236
- }
5237
- });
5238
- },
5239
- onSetVendorConsent: (vendorId, value)=>{
5240
- const iab = storeConnector.getStore()?.getState().iab;
5241
- if (!iab) return;
5242
- iab.setVendorConsent(vendorId, value);
5243
- stateManager.addEvent({
5244
- type: 'iab',
5245
- message: `IAB vendor ${vendorId} set to ${value}`,
5246
- data: {
5247
- vendorId,
5248
- value
5249
- }
5250
- });
5251
- },
5252
- onSetSpecialFeatureOptIn: (featureId, value)=>{
5253
- const iab = storeConnector.getStore()?.getState().iab;
5254
- if (!iab) return;
5255
- iab.setSpecialFeatureOptIn(featureId, value);
5256
- stateManager.addEvent({
5257
- type: 'iab',
5258
- message: `IAB feature ${featureId} set to ${value}`,
5259
- data: {
5260
- featureId,
5261
- value
5262
- }
5263
- });
5264
- },
5265
- onAcceptAll: ()=>{
5266
- const iab = storeConnector.getStore()?.getState().iab;
5267
- if (!iab) return;
5268
- iab.acceptAll();
5269
- stateManager.addEvent({
5270
- type: 'iab',
5271
- message: 'IAB accept all selected'
5272
- });
5273
- },
5274
- onRejectAll: ()=>{
5275
- const iab = storeConnector.getStore()?.getState().iab;
5276
- if (!iab) return;
5277
- iab.rejectAll();
5278
- stateManager.addEvent({
5279
- type: 'iab',
5280
- message: 'IAB reject all selected'
5281
- });
5282
- },
5283
- onSave: ()=>{
5284
- const iab = storeConnector.getStore()?.getState().iab;
5285
- if (!iab) return;
5286
- iab.save().then(()=>{
5287
- stateManager.addEvent({
5288
- type: 'iab',
5289
- message: 'IAB preferences saved'
5290
- });
5291
- }).catch((error)=>{
5292
- stateManager.addEvent({
5293
- type: 'error',
5294
- message: `Failed to save IAB preferences: ${String(error)}`
5295
- });
5296
- });
5297
- },
5298
- onReset: async ()=>{
5299
- const store = storeConnector.getStore();
5300
- if (store) await reset_consents_resetAllConsents(store, stateManager);
5301
- }
5302
- });
5303
- break;
5304
- case 'events':
5305
- events_renderEventsPanel(panelContent, {
5306
- getEvents: ()=>stateManager.getState().eventLog,
5307
- onClear: ()=>{
5308
- stateManager.clearEventLog();
5309
- stateManager.addEvent({
5310
- type: 'info',
5311
- message: 'Event log cleared'
5312
- });
5313
- }
5314
- });
5315
- break;
5316
- case 'actions':
5317
- actions_renderActionsPanel(panelContent, {
5318
- getState: getStoreState,
5319
- onResetConsents: async ()=>{
5320
- const store = storeConnector.getStore();
5321
- if (store) await reset_consents_resetAllConsents(store, stateManager);
5322
- },
5323
- onRefetchBanner: async ()=>{
5324
- const store = storeConnector.getStore();
5325
- if (store) {
5326
- await store.getState().initConsentManager();
5327
- stateManager.addEvent({
5328
- type: 'info',
5329
- message: 'Banner data refetched'
5330
- });
5331
- }
5332
- },
5333
- onShowBanner: ()=>{
5334
- const store = storeConnector.getStore();
5335
- if (store) {
5336
- store.getState().setActiveUI('banner', {
5337
- force: true
5338
- });
5339
- stateManager.addEvent({
5340
- type: 'info',
5341
- message: 'Banner shown'
5342
- });
5343
- }
5344
- },
5345
- onOpenPreferences: ()=>{
5346
- const store = storeConnector.getStore();
5347
- if (store) {
5348
- store.getState().setActiveUI('dialog');
5349
- stateManager.addEvent({
5350
- type: 'info',
5351
- message: 'Preference center opened'
5352
- });
5353
- }
5354
- },
5355
- onCopyState: ()=>{
5356
- const state = storeConnector.getState();
5357
- if (state) {
5358
- const stateCopy = {
5359
- consents: state.consents,
5360
- consentInfo: state.consentInfo,
5361
- locationInfo: state.locationInfo,
5362
- model: state.model,
5363
- overrides: state.overrides,
5364
- scripts: state.scripts?.map((s)=>({
5365
- id: s.id
5366
- })),
5367
- loadedScripts: state.loadedScripts
5368
- };
5369
- navigator.clipboard.writeText(JSON.stringify(stateCopy, null, 2)).then(()=>{
5370
- stateManager.addEvent({
5371
- type: 'info',
5372
- message: 'State copied to clipboard'
5373
- });
5374
- }).catch(()=>{
5375
- stateManager.addEvent({
5376
- type: 'error',
5377
- message: 'Failed to copy state'
5378
- });
5379
- });
5380
- }
5381
- }
5382
- });
5383
- break;
5384
- }
6261
+ panelRenderer.renderPanel(panelContent, currentActiveTab);
5385
6262
  if (panel) panelHeightAnimator.animate(panel, previousPanelHeight);
5386
6263
  }
5387
- storeConnector.subscribe(()=>{
5388
- panelInstance.update();
5389
- });
5390
6264
  const instance = {
5391
6265
  open: ()=>stateManager.setOpen(true),
5392
6266
  close: ()=>stateManager.setOpen(false),
@@ -5400,20 +6274,8 @@ function createDevTools(options = {}) {
5400
6274
  };
5401
6275
  },
5402
6276
  destroy: ()=>{
5403
- const store = storeConnector.getStore();
5404
- if (store) {
5405
- store.getState().setCallback('onBannerFetched', originalCallbacks.onBannerFetched);
5406
- store.getState().setCallback('onConsentSet', originalCallbacks.onConsentSet);
5407
- store.getState().setCallback('onError', originalCallbacks.onError);
5408
- store.getState().setCallback('onBeforeConsentRevocationReload', originalCallbacks.onBeforeConsentRevocationReload);
5409
- if (hasWrappedNetworkBlockerCallback) {
5410
- const currentNetworkBlocker = store.getState().networkBlocker;
5411
- if (currentNetworkBlocker) store.getState().setNetworkBlocker({
5412
- ...currentNetworkBlocker,
5413
- onRequestBlocked: originalNetworkBlockedCallback
5414
- });
5415
- }
5416
- }
6277
+ detachInstrumentation?.();
6278
+ detachInstrumentation = null;
5417
6279
  panelHeightAnimator.destroy();
5418
6280
  tabsInstance?.destroy();
5419
6281
  panelInstance.destroy();