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