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

package/dist/index.js

@@ -259,21 +259,21 @@ var __webpack_modules__ = {
             module.id,
             `.toggle-bPZtik {
   border-radius: var(--c15t-radius-full, 9999px);
-  background-color: var(--c15t-switch-track, #ccc);
+  background-color: var(--c15t-switch-track, #d9d9d9);
   cursor: pointer;
-  width: 36px;
-  height: 20px;
-  transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
+  width: 2rem;
+  height: 1.25rem;
+  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));
   border: none;
   align-items: center;
-  padding: 0;
+  padding: .125rem;
   display: inline-flex;
   position: relative;
 }
 
 .toggle-bPZtik:focus-visible {
-  outline: 2px solid var(--c15t-primary, #335cff);
-  outline-offset: 2px;
+  box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
+  outline: none;
 }
 
 .toggleActive-Ldlasg {
@@ -283,16 +283,16 @@ var __webpack_modules__ = {
 .toggleThumb-hjGfoX {
   border-radius: var(--c15t-radius-full, 9999px);
   background-color: var(--c15t-switch-thumb, #fff);
-  width: 16px;
-  height: 16px;
-  transition: transform var(--c15t-duration-fast, .1s) var(--c15t-easing-spring, cubic-bezier(.34, 1.56, .64, 1));
+  width: .75rem;
+  height: .75rem;
+  box-shadow: 0 0 0 1px var(--c15t-border, #e3e3e3);
+  transition: transform var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
   position: absolute;
   left: 2px;
-  box-shadow: 0 1px 2px #0003;
 }
 
 .toggleActive-Ldlasg .toggleThumb-hjGfoX {
-  transform: translateX(16px);
+  transform: translateX(1rem);
 }
 
 .toggle-bPZtik:disabled, .toggleDisabled-ZcD8nZ {
@@ -305,13 +305,14 @@ var __webpack_modules__ = {
 }
 
 .badge-yA0giZ {
-  border-radius: var(--c15t-radius-sm, .25rem);
+  border-radius: var(--c15t-radius-full, 9999px);
   font-size: var(--c15t-devtools-font-size-xs, .75rem);
   font-weight: var(--c15t-font-weight-medium, 500);
+  line-height: var(--c15t-line-height-tight, 1.25);
   white-space: nowrap;
+  justify-content: center;
   align-items: center;
-  padding: 2px 6px;
-  line-height: 1;
+  padding: .1875rem .4375rem;
   display: inline-flex;
 }
 
@@ -344,35 +345,36 @@ var __webpack_modules__ = {
   justify-content: center;
   align-items: center;
   gap: var(--c15t-space-xs, .25rem);
-  border: 1px solid var(--c15t-border, #e3e3e3);
+  border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
   border-radius: var(--c15t-radius-md, .5rem);
-  background-color: var(--c15t-surface, #fff);
-  min-height: 30px;
+  background-color: var(--c15t-devtools-surface-elevated, #fff);
+  min-height: 2rem;
   color: var(--c15t-text, #171717);
-  font-family: inherit;
-  font-size: 12px;
+  font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
+  font-size: var(--c15t-font-size-sm, .875rem);
   font-weight: var(--c15t-font-weight-medium, 500);
+  line-height: var(--c15t-line-height-tight, 1.25);
+  box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000000d);
   cursor: pointer;
   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));
-  padding: 5px 10px;
-  line-height: 1;
+  padding: .375rem .625rem;
   display: inline-flex;
-  box-shadow: 0 1px 1px #0000000a;
 }
 
 .btn-evRVlh:hover {
-  background-color: var(--c15t-surface-hover, #f7f7f7);
+  background-color: var(--c15t-devtools-surface-subtle, #f7f7f7);
   border-color: var(--c15t-border-hover, #c9c9c9);
-  box-shadow: 0 2px 6px #00000014;
+  box-shadow: var(--c15t-shadow-md, 0 4px 12px #00000014);
 }
 
 .btn-evRVlh:focus-visible {
-  outline: 2px solid var(--c15t-primary, #335cff);
-  outline-offset: 1px;
+  box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000000d), 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
+  outline: none;
 }
 
 .btn-evRVlh:active {
-  box-shadow: 0 1px 2px #00000014;
+  box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000000d);
+  transform: scale(.98);
 }
 
 .btn-evRVlh:disabled {
@@ -385,6 +387,7 @@ var __webpack_modules__ = {
   background-color: var(--c15t-primary, #335cff);
   border-color: var(--c15t-primary, #335cff);
   color: var(--c15t-text-on-primary, #fff);
+  box-shadow: none;
 }
 
 .btnPrimary-dA6nqY:hover {
@@ -396,6 +399,7 @@ var __webpack_modules__ = {
   background-color: var(--c15t-devtools-badge-error, #ef4343);
   border-color: var(--c15t-devtools-badge-error, #ef4343);
   color: var(--c15t-text-on-primary, #fff);
+  box-shadow: none;
 }
 
 .btnDanger-eDnqOX:hover {
@@ -404,10 +408,10 @@ var __webpack_modules__ = {
 }
 
 .btnSmall-TjXoqZ {
+  min-height: 1.75rem;
+  font-size: var(--c15t-devtools-font-size-xs, .75rem);
   border-radius: var(--c15t-radius-sm, .375rem);
-  min-height: 26px;
-  padding: 3px 8px;
-  font-size: 11px;
+  padding: .25rem .5rem;
 }
 
 .btnIcon-fiYQAh {
@@ -417,19 +421,22 @@ var __webpack_modules__ = {
 }
 
 .input-IeTcCs {
-  width: 100%;
-  padding: var(--c15t-space-xs, .25rem) var(--c15t-space-sm, .5rem);
-  border: 1px solid var(--c15t-border, #e3e3e3);
+  border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
   border-radius: var(--c15t-radius-md, .5rem);
-  background-color: var(--c15t-surface, #fff);
+  background-color: var(--c15t-devtools-surface-elevated, #fff);
+  width: 100%;
+  min-height: 2rem;
   color: var(--c15t-text, #171717);
-  font-family: inherit;
-  font-size: var(--c15t-font-size-sm, .875rem);
-  transition: border-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
+  font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
+  font-size: var(--c15t-devtools-font-size-xs, .75rem);
+  line-height: var(--c15t-line-height-tight, 1.25);
+  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));
+  padding: .375rem .625rem;
 }
 
 .input-IeTcCs:focus {
-  border-color: var(--c15t-primary, #335cff);
+  border-color: var(--c15t-devtools-focus-ring, #335cff);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c15t-devtools-focus-ring, #335cff) 25%, transparent);
   outline: none;
 }
 
@@ -438,30 +445,35 @@ var __webpack_modules__ = {
 }
 
 .inputSmall-pJyXcL {
-  padding: 2px var(--c15t-space-xs, .25rem);
+  min-height: 1.625rem;
   font-size: var(--c15t-devtools-font-size-xs, .75rem);
+  padding: .25rem .4375rem;
 }
 
 .select-byJ1WM {
-  width: 100%;
-  padding: var(--c15t-space-xs, .25rem) var(--c15t-space-sm, .5rem);
-  border: 1px solid var(--c15t-border, #e3e3e3);
+  border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
   border-radius: var(--c15t-radius-md, .5rem);
-  background-color: var(--c15t-surface, #fff);
+  background-color: var(--c15t-devtools-surface-elevated, #fff);
+  width: 100%;
+  min-height: 2rem;
   color: var(--c15t-text, #171717);
-  font-family: inherit;
+  font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
   font-size: var(--c15t-devtools-font-size-xs, .75rem);
+  line-height: var(--c15t-line-height-tight, 1.25);
   cursor: pointer;
+  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));
+  padding: .375rem .625rem;
 }
 
 .select-byJ1WM:focus {
-  border-color: var(--c15t-primary, #335cff);
+  border-color: var(--c15t-devtools-focus-ring, #335cff);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c15t-devtools-focus-ring, #335cff) 25%, transparent);
   outline: none;
 }
 
 .grid-LlrmEz {
   gap: var(--c15t-space-sm, .5rem);
-  padding: var(--c15t-space-sm, .5rem) var(--c15t-space-md, 1rem);
+  padding: var(--c15t-space-md, 1rem);
   display: grid;
 }
 
@@ -474,42 +486,51 @@ var __webpack_modules__ = {
 }
 
 .gridCard-Qm5xxI {
-  padding: var(--c15t-space-sm, .5rem) var(--c15t-space-md, .75rem);
-  border: 1px solid var(--c15t-border, #e3e3e3);
-  border-radius: var(--c15t-radius-md, .5rem);
-  background-color: var(--c15t-surface, #fff);
-  transition: border-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
   justify-content: space-between;
   align-items: center;
+  gap: var(--c15t-space-sm, .5rem);
+  border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
+  border-radius: var(--c15t-radius-md, .5rem);
+  background-color: var(--c15t-devtools-surface-elevated, #fff);
+  min-height: 2.75rem;
+  box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000000d);
+  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));
+  padding: .5625rem .75rem;
   display: flex;
 }
 
 .gridCard-Qm5xxI:hover {
   border-color: var(--c15t-border-hover, #c9c9c9);
+  background-color: var(--c15t-devtools-surface-subtle, #fafafa);
 }
 
 .gridCardTitle-HjXETp {
   font-size: var(--c15t-devtools-font-size-xs, .75rem);
   font-weight: var(--c15t-font-weight-medium, 500);
   color: var(--c15t-text, #171717);
+  line-height: var(--c15t-line-height-tight, 1.25);
 }
 
 .listItem-XUKGIo {
-  padding: var(--c15t-space-xs, .25rem) var(--c15t-space-md, 1rem);
-  border-bottom: 1px solid var(--c15t-border, #e3e3e3);
   justify-content: space-between;
   align-items: center;
+  gap: var(--c15t-space-sm, .5rem);
+  border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
+  border-radius: var(--c15t-radius-md, .5rem);
+  background-color: var(--c15t-devtools-surface-elevated, #fff);
+  margin-bottom: .375rem;
+  padding: .625rem .75rem;
   display: flex;
 }
 
 .listItem-XUKGIo:last-child {
-  border-bottom: none;
+  margin-bottom: 0;
 }
 
 .listItemContent-WDBF1N {
   flex-direction: column;
   flex: 1;
-  gap: 2px;
+  gap: .1875rem;
   min-width: 0;
   display: flex;
 }
@@ -523,6 +544,7 @@ var __webpack_modules__ = {
 .listItemDescription-E6JHyZ {
   font-size: var(--c15t-devtools-font-size-xs, .75rem);
   color: var(--c15t-text-muted, #737373);
+  line-height: var(--c15t-line-height-tight, 1.25);
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -536,8 +558,8 @@ var __webpack_modules__ = {
 }
 
 .section-a197cB {
-  padding: var(--c15t-space-sm, .5rem) var(--c15t-space-md, 1rem);
-  border-bottom: 1px solid var(--c15t-border, #e3e3e3);
+  border-bottom: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
+  padding: .75rem 1rem;
 }
 
 .section-a197cB:last-child {
@@ -545,9 +567,10 @@ var __webpack_modules__ = {
 }
 
 .sectionHeader-Xcljcw {
-  margin-bottom: var(--c15t-space-sm, .5rem);
   justify-content: space-between;
   align-items: center;
+  gap: .5rem;
+  margin-bottom: .625rem;
   display: flex;
 }
 
@@ -556,47 +579,49 @@ var __webpack_modules__ = {
   font-weight: var(--c15t-font-weight-semibold, 600);
   color: var(--c15t-text-muted, #737373);
   text-transform: uppercase;
-  letter-spacing: .5px;
+  letter-spacing: .04em;
 }
 
 .overrideField-keNdpJ {
   flex-direction: column;
-  gap: 3px;
+  gap: .3125rem;
   margin-bottom: 0;
   display: flex;
 }
 
 .overrideLabel-ApMoTw {
+  font-size: var(--c15t-devtools-font-size-xs, .75rem);
+  font-weight: var(--c15t-font-weight-semibold, 600);
   color: var(--c15t-text-muted, #737373);
-  font-size: 11px;
-  font-weight: 600;
+  line-height: var(--c15t-line-height-tight, 1.25);
 }
 
 .overrideHint-yCfwGt {
-  color: var(--c15t-devtools-text-muted, #737373);
-  margin-top: 6px;
-  font-size: 11px;
+  font-size: var(--c15t-devtools-font-size-xs, .75rem);
+  color: var(--c15t-text-muted, #737373);
+  line-height: var(--c15t-line-height-tight, 1.25);
+  margin-top: .5rem;
 }
 
 .overrideActions-imdcn7 {
-  border-top: 1px dashed var(--c15t-border, #e3e3e3);
+  border-top: 1px dashed var(--c15t-devtools-border-strong, #e3e3e3);
   justify-content: space-between;
   align-items: center;
-  gap: 8px;
-  margin-top: 8px;
-  padding-top: 8px;
+  gap: .5rem;
+  margin-top: .625rem;
+  padding-top: .625rem;
   display: flex;
 }
 
 .overrideActionButtons-gYOx1e {
   flex-wrap: wrap;
-  gap: 6px;
+  gap: .375rem;
   display: flex;
 }
 
 .overrideStatus-sty_qS {
+  font-size: var(--c15t-devtools-font-size-xs, .75rem);
   color: var(--c15t-text-muted, #737373);
-  font-size: 11px;
 }
 
 .overrideStatusDirty-OUdDMw {
@@ -604,9 +629,10 @@ var __webpack_modules__ = {
 }
 
 .infoRow-RlB_0h {
-  padding: var(--c15t-space-xs, .25rem) 0;
   justify-content: space-between;
   align-items: center;
+  gap: .5rem;
+  padding: .25rem 0;
   display: flex;
 }
 
@@ -619,6 +645,7 @@ var __webpack_modules__ = {
   font-size: var(--c15t-devtools-font-size-xs, .75rem);
   font-weight: var(--c15t-font-weight-medium, 500);
   color: var(--c15t-text, #171717);
+  font-variant-numeric: tabular-nums;
   font-family: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;
 }
 
@@ -629,18 +656,27 @@ var __webpack_modules__ = {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  gap: .375rem;
   display: flex;
 }
 
 .emptyStateIcon-WHFkX8 {
+  opacity: .55;
   width: 32px;
   height: 32px;
-  margin-bottom: var(--c15t-space-sm, .5rem);
-  opacity: .5;
 }
 
 .emptyStateText-TaLvAJ {
   font-size: var(--c15t-font-size-sm, .875rem);
+  line-height: var(--c15t-line-height-normal, 1.5);
+}
+
+.disconnectedState-dOtZBG {
+  padding: var(--c15t-space-xl, 2rem);
+  text-align: center;
+  font-size: var(--c15t-font-size-sm, .875rem);
+  color: var(--c15t-text-muted, #737373);
+  line-height: var(--c15t-line-height-normal, 1.5);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -707,7 +743,8 @@ var __webpack_modules__ = {
             infoValue: "infoValue-flMl_e",
             emptyState: "emptyState-QcmzTQ",
             emptyStateIcon: "emptyStateIcon-WHFkX8",
-            emptyStateText: "emptyStateText-TaLvAJ"
+            emptyStateText: "emptyStateText-TaLvAJ",
+            disconnectedState: "disconnectedState-dOtZBG"
         };
         const __rspack_default_export = ___CSS_LOADER_EXPORT___;
     },
@@ -736,9 +773,9 @@ var __webpack_modules__ = {
 .floatingButton-Gw8MtJ {
   width: var(--c15t-devtools-button-size, 40px);
   height: var(--c15t-devtools-button-size, 40px);
-  border: 1px solid var(--c15t-border, #e3e3e3);
+  border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
   border-radius: var(--c15t-radius-full, 9999px);
-  background-color: var(--c15t-surface, #fff);
+  background-color: var(--c15t-devtools-surface-elevated, #fff);
   box-shadow: var(--c15t-shadow-lg, 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a);
   cursor: grab;
   z-index: var(--c15t-devtools-z-index, 99999);
@@ -766,13 +803,13 @@ var __webpack_modules__ = {
 }
 
 .floatingButton-Gw8MtJ:focus-visible {
-  outline: 2px solid var(--c15t-primary, #335cff);
-  outline-offset: 2px;
+  box-shadow: var(--c15t-shadow-lg, 0 8px 24px #0000001f), 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
+  outline: none;
 }
 
 .floatingButton-Gw8MtJ:active {
   cursor: grabbing;
-  transform: scale(1.02);
+  transform: scale(.98);
 }
 
 .floatingButtonIcon-cHWefk {
@@ -813,6 +850,7 @@ var __webpack_modules__ = {
 
 .backdrop-LhVMB5 {
   background-color: var(--c15t-overlay, #00000080);
+  backdrop-filter: blur(1px);
   z-index: calc(var(--c15t-devtools-z-index, 99999)  + 1);
   position: fixed;
   inset: 0;
@@ -821,10 +859,10 @@ var __webpack_modules__ = {
 .panel-jtWove {
   width: var(--c15t-devtools-panel-width, 480px);
   max-height: var(--c15t-devtools-panel-max-height, 560px);
-  background-color: var(--c15t-surface, #fff);
-  border: 1px solid var(--c15t-border, #e3e3e3);
+  background-color: var(--c15t-devtools-surface-elevated, #fff);
+  border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
   border-radius: var(--c15t-radius-lg, .75rem);
-  box-shadow: var(--c15t-shadow-lg, 0 8px 24px #0000001f);
+  box-shadow: var(--c15t-shadow-lg, 0 10px 28px #00000029);
   z-index: calc(var(--c15t-devtools-z-index, 99999)  + 2);
   flex-direction: column;
   display: flex;
@@ -857,11 +895,11 @@ var __webpack_modules__ = {
 }
 
 .header-xluoTr {
-  padding: var(--c15t-space-sm, .5rem) var(--c15t-space-md, 1rem);
-  border-bottom: 1px solid var(--c15t-border, #e3e3e3);
+  border-bottom: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
   background-color: var(--c15t-devtools-surface-muted, #f5f5f5);
   justify-content: space-between;
   align-items: center;
+  padding: .6875rem .875rem;
   display: flex;
 }
 
@@ -870,6 +908,7 @@ var __webpack_modules__ = {
   gap: var(--c15t-space-sm, .5rem);
   font-size: var(--c15t-font-size-sm, .875rem);
   font-weight: var(--c15t-font-weight-semibold, 600);
+  line-height: var(--c15t-line-height-tight, 1.25);
   color: var(--c15t-text, #171717);
   display: flex;
 }
@@ -881,9 +920,9 @@ var __webpack_modules__ = {
 }
 
 .closeButton-Yto0Nb {
-  border-radius: var(--c15t-radius-sm, .25rem);
-  width: 28px;
-  height: 28px;
+  border-radius: var(--c15t-radius-md, .5rem);
+  width: 2rem;
+  height: 2rem;
   color: var(--c15t-text-muted, #737373);
   cursor: pointer;
   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__ = {
 }
 
 .closeButton-Yto0Nb:hover {
-  background-color: var(--c15t-surface-hover, #f7f7f7);
+  background-color: var(--c15t-devtools-surface-subtle, #f7f7f7);
   color: var(--c15t-text, #171717);
 }
 
 .closeButton-Yto0Nb:focus-visible {
-  outline: 2px solid var(--c15t-primary, #335cff);
-  outline-offset: 1px;
+  box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
+  outline: none;
 }
 
 .closeButtonIcon-fVlR1I {
@@ -910,33 +949,71 @@ var __webpack_modules__ = {
   height: 16px;
 }
 
+.inlineActionButton-Ky8BmN {
+  border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
+  border-radius: var(--c15t-radius-sm, .375rem);
+  background-color: var(--c15t-devtools-surface-elevated, #fff);
+  min-height: 1.625rem;
+  color: var(--c15t-text, #171717);
+  font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
+  font-size: var(--c15t-devtools-font-size-xs, .75rem);
+  font-weight: var(--c15t-font-weight-medium, 500);
+  line-height: var(--c15t-line-height-tight, 1.25);
+  cursor: pointer;
+  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));
+  justify-content: center;
+  align-items: center;
+  padding: .25rem .5rem;
+  display: inline-flex;
+}
+
+.inlineActionButton-Ky8BmN:hover {
+  background-color: var(--c15t-devtools-surface-subtle, #f7f7f7);
+  border-color: var(--c15t-border-hover, #c9c9c9);
+}
+
+.inlineActionButton-Ky8BmN:focus-visible {
+  box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
+  outline: none;
+}
+
 .content-yDMYfG {
+  scrollbar-gutter: stable;
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
+  background-color: var(--c15t-devtools-surface-elevated, #fff);
   flex: auto;
   min-height: 200px;
-  overflow: hidden auto;
+  overflow: hidden scroll;
 }
 
 .footer-ESbmwQ {
-  padding: var(--c15t-space-xs, .25rem) var(--c15t-space-md, 1rem);
-  border-top: 1px solid var(--c15t-border, #e3e3e3);
+  border-top: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
   background-color: var(--c15t-devtools-surface-muted, #f5f5f5);
   font-size: var(--c15t-devtools-font-size-xs, .75rem);
   color: var(--c15t-text-muted, #737373);
   justify-content: space-between;
   align-items: center;
+  gap: .5rem;
+  padding: .5rem .75rem;
   display: flex;
 }
 
 .footerStatus-rlb99A {
   align-items: center;
-  gap: var(--c15t-space-xs, .25rem);
+  gap: .375rem;
+  min-width: 0;
   display: flex;
 }
 
+.footerMeta-Vdtxdk {
+  opacity: .75;
+  white-space: nowrap;
+}
+
 .statusDot-hYJoej {
   border-radius: var(--c15t-radius-full, 9999px);
+  flex-shrink: 0;
   width: 6px;
   height: 6px;
 }
@@ -975,6 +1052,7 @@ var __webpack_modules__ = {
   font-size: var(--c15t-font-size-sm, .875rem);
   color: var(--c15t-text-muted, #737373);
   max-width: 280px;
+  line-height: var(--c15t-line-height-normal, 1.5);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -991,17 +1069,17 @@ var __webpack_modules__ = {
 }
 
 .dropdownMenu-aKK18l {
-  min-width: 200px;
-  padding: var(--c15t-space-xs, .25rem);
-  border: 1px solid var(--c15t-border, #e3e3e3);
+  border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
   border-radius: var(--c15t-radius-lg, .75rem);
-  background-color: var(--c15t-surface, #fff);
+  background-color: var(--c15t-devtools-surface-elevated, #fff);
+  min-width: 200px;
   box-shadow: var(--c15t-shadow-lg, 0 8px 24px #0000001f);
   z-index: calc(var(--c15t-devtools-z-index, 99999)  + 1);
   opacity: 0;
   transform-origin: 0 100%;
   pointer-events: none;
   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));
+  padding: .375rem;
   position: fixed;
   transform: scale(.95)translateY(8px);
 }
@@ -1029,34 +1107,35 @@ var __webpack_modules__ = {
 }
 
 .menuItem-kBbHRP {
-  align-items: center;
-  gap: var(--c15t-space-sm, .5rem);
-  width: 100%;
-  padding: var(--c15t-space-sm, .5rem) var(--c15t-space-md, .75rem);
   border-radius: var(--c15t-radius-md, .5rem);
+  width: 100%;
   color: var(--c15t-text, #171717);
-  font-size: var(--c15t-font-size-sm, .875rem);
+  font-size: var(--c15t-devtools-font-size-xs, .75rem);
   font-weight: var(--c15t-font-weight-medium, 500);
+  line-height: var(--c15t-line-height-tight, 1.25);
   text-align: left;
   cursor: pointer;
   transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
   background: none;
   border: none;
+  align-items: center;
+  gap: .625rem;
+  padding: .5rem .625rem;
   display: flex;
 }
 
 .menuItem-kBbHRP:hover {
-  background-color: var(--c15t-surface-hover, #f2f2f2);
+  background-color: var(--c15t-devtools-surface-subtle, #f2f2f2);
 }
 
 .menuItem-kBbHRP:focus-visible {
-  outline: 2px solid var(--c15t-primary, #335cff);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
+  outline: none;
 }
 
 .menuItemIcon-P3pP5K {
-  width: 20px;
-  height: 20px;
+  width: 1rem;
+  height: 1rem;
   color: var(--c15t-text-muted, #737373);
   flex-shrink: 0;
 }
@@ -1069,6 +1148,7 @@ var __webpack_modules__ = {
   font-size: var(--c15t-devtools-font-size-xs, .75rem);
   color: var(--c15t-text-muted, #737373);
   font-weight: var(--c15t-font-weight-normal, 400);
+  margin-top: .125rem;
 }
 
 .menuItemContent-hBlruV {
@@ -1084,8 +1164,8 @@ var __webpack_modules__ = {
 .menuItemToggleTrack-gDp_f3 {
   background-color: var(--c15t-switch-track, #d9d9d9);
   border-radius: var(--c15t-radius-full, 9999px);
-  width: 36px;
-  height: 20px;
+  width: 2rem;
+  height: 1.25rem;
   transition: background-color var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
   position: relative;
 }
@@ -1093,21 +1173,22 @@ var __webpack_modules__ = {
 .menuItemToggleThumb-ioqqyc {
   background-color: var(--c15t-switch-thumb, #fff);
   border-radius: var(--c15t-radius-full, 9999px);
-  width: 16px;
-  height: 16px;
-  box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000001a);
+  width: .75rem;
+  height: .75rem;
+  box-shadow: 0 0 0 1px var(--c15t-border, #e3e3e3);
   transition: transform var(--c15t-duration-fast, .1s) var(--c15t-easing, cubic-bezier(.4, 0, .2, 1));
   position: absolute;
-  top: 2px;
+  top: 50%;
   left: 2px;
+  transform: translateY(-50%);
 }
 
 .menuItemToggleChecked-K3BPtk .menuItemToggleTrack-gDp_f3 {
-  background-color: var(--c15t-switch-track-checked, #335cff);
+  background-color: var(--c15t-switch-track-active, #335cff);
 }
 
 .menuItemToggleChecked-K3BPtk .menuItemToggleThumb-ioqqyc {
-  transform: translateX(16px);
+  transform: translate(1rem, -50%);
 }
 
 .menuDivider-JIBdhU {
@@ -1143,9 +1224,11 @@ var __webpack_modules__ = {
             headerLogo: "headerLogo-PxJ_w1",
             closeButton: "closeButton-Yto0Nb",
             closeButtonIcon: "closeButtonIcon-fVlR1I",
+            inlineActionButton: "inlineActionButton-Ky8BmN",
             content: "content-yDMYfG",
             footer: "footer-ESbmwQ",
             footerStatus: "footerStatus-rlb99A",
+            footerMeta: "footerMeta-Vdtxdk",
             statusDot: "statusDot-hYJoej",
             statusConnected: "statusConnected-hPSUgS",
             statusDisconnected: "statusDisconnected-HIpcee",
@@ -1184,62 +1267,63 @@ var __webpack_modules__ = {
         ___CSS_LOADER_EXPORT___.push([
             module.id,
             `.tabList-IyuiBE {
+  border-bottom: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
+  background-color: var(--c15t-devtools-surface-subtle, #fafafa);
   align-items: center;
-  gap: var(--c15t-space-xs, .25rem);
-  padding: var(--c15t-space-sm, .5rem) var(--c15t-space-sm, .5rem);
-  border-bottom: 1px solid var(--c15t-border, #e3e3e3);
-  background-color: var(--c15t-surface, #fff);
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  scroll-padding-inline-end: var(--c15t-space-sm, .5rem);
+  gap: .375rem;
+  padding: .75rem;
   display: flex;
-  overflow-x: auto;
 }
 
-.tabList-IyuiBE:after {
-  content: "";
-  flex: 0 0 var(--c15t-space-sm, .5rem);
-}
-
-.tabList-IyuiBE::-webkit-scrollbar {
-  display: none;
+.tabStrip-_KrWe4 {
+  align-items: center;
+  gap: var(--c15t-space-xs, .25rem);
+  flex: auto;
+  min-width: 0;
+  display: flex;
+  overflow: hidden;
 }
 
 .tab-yfDEqg {
-  align-items: center;
-  gap: var(--c15t-space-xs, .25rem);
   border-radius: var(--c15t-radius-md, .5rem);
+  min-height: 1.875rem;
   color: var(--c15t-text-muted, #737373);
-  font-family: inherit;
-  font-size: 11px;
+  font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
+  font-size: var(--c15t-devtools-font-size-xs, .75rem);
   font-weight: var(--c15t-font-weight-medium, 500);
+  line-height: var(--c15t-line-height-tight, 1.25);
   cursor: pointer;
   white-space: nowrap;
-  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));
+  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));
   background-color: #0000;
-  border: none;
-  padding: 3px 7px;
+  border: 1px solid #0000;
+  flex-shrink: 0;
+  align-items: center;
+  gap: .375rem;
+  padding: .25rem .625rem;
   display: flex;
 }
 
 .tab-yfDEqg:hover {
-  background-color: var(--c15t-surface-hover, #f7f7f7);
+  background-color: var(--c15t-devtools-surface-muted, #f7f7f7);
   color: var(--c15t-text, #171717);
 }
 
 .tab-yfDEqg:focus-visible {
-  outline: 2px solid var(--c15t-primary, #335cff);
-  outline-offset: 1px;
+  box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
+  outline: none;
 }
 
 .tabActive-r4hing {
-  background-color: var(--c15t-primary, #335cff);
-  color: var(--c15t-text-on-primary, #fff);
+  background-color: var(--c15t-devtools-surface-elevated, #fff);
+  border-color: var(--c15t-devtools-border-strong, #e3e3e3);
+  color: var(--c15t-text, #171717);
+  box-shadow: var(--c15t-shadow-sm, 0 1px 2px #0000000d);
 }
 
 .tabActive-r4hing:hover {
-  background-color: var(--c15t-primary-hover, #03f);
-  color: var(--c15t-text-on-primary, #fff);
+  background-color: var(--c15t-devtools-surface-elevated, #fff);
+  color: var(--c15t-text, #171717);
 }
 
 .tabIcon-U9tnu0 {
@@ -1248,6 +1332,131 @@ var __webpack_modules__ = {
   height: 14px;
 }
 
+.tabHidden-HBXYSd {
+  display: none;
+}
+
+.overflowContainer-TTw9DO {
+  flex-shrink: 0;
+  position: relative;
+}
+
+.overflowContainerHidden-sQa_XZ {
+  display: none;
+}
+
+.overflowButton-tKq4FF {
+  border-radius: var(--c15t-radius-md, .5rem);
+  width: 1.875rem;
+  height: 1.875rem;
+  color: var(--c15t-text-muted, #737373);
+  cursor: pointer;
+  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));
+  background-color: #0000;
+  border: 1px solid #0000;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: inline-flex;
+}
+
+.overflowButton-tKq4FF:hover {
+  background-color: var(--c15t-devtools-surface-muted, #f7f7f7);
+  color: var(--c15t-text, #171717);
+}
+
+.overflowButton-tKq4FF:focus-visible {
+  box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
+  outline: none;
+}
+
+.overflowButtonIcon-FSurfC {
+  justify-content: center;
+  align-items: center;
+  width: 14px;
+  height: 14px;
+  display: inline-flex;
+}
+
+.overflowMenu-TST0eZ {
+  border: 1px solid var(--c15t-devtools-border-strong, #e3e3e3);
+  border-radius: var(--c15t-radius-md, .5rem);
+  background-color: var(--c15t-devtools-surface-elevated, #fff);
+  min-width: 10rem;
+  box-shadow: var(--c15t-shadow-md, 0 4px 12px #00000014);
+  opacity: 0;
+  transform-origin: 100% 0;
+  pointer-events: none;
+  z-index: 10;
+  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));
+  flex-direction: column;
+  gap: .125rem;
+  padding: .3125rem;
+  display: flex;
+  position: absolute;
+  top: calc(100% + .375rem);
+  right: 0;
+  transform: translateY(-4px)scale(.98);
+}
+
+.overflowMenu-TST0eZ[data-state="open"] {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0)scale(1);
+}
+
+.overflowItem-y5Pz7k {
+  border-radius: var(--c15t-radius-sm, .375rem);
+  min-height: 1.75rem;
+  color: var(--c15t-text, #171717);
+  font-family: var(--c15t-font-family, system-ui, -apple-system, sans-serif);
+  font-size: var(--c15t-devtools-font-size-xs, .75rem);
+  font-weight: var(--c15t-font-weight-medium, 500);
+  line-height: var(--c15t-line-height-tight, 1.25);
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+  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));
+  background-color: #0000;
+  border: none;
+  align-items: center;
+  gap: .5rem;
+  padding: .3125rem .5rem;
+  display: inline-flex;
+}
+
+.overflowItem-y5Pz7k:hover {
+  background-color: var(--c15t-devtools-surface-subtle, #fafafa);
+}
+
+.overflowItem-y5Pz7k:focus-visible {
+  box-shadow: 0 0 0 2px var(--c15t-devtools-focus-ring, #335cff);
+  outline: none;
+}
+
+.overflowItemActive-mzVG1T {
+  background-color: var(--c15t-devtools-accent-soft, #ebefff);
+  color: var(--c15t-text, #171717);
+}
+
+.overflowItemDisabled-dcHX3K {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+.overflowItemIcon-fz291V {
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 14px;
+  height: 14px;
+  display: inline-flex;
+}
+
+.overflowItemHidden-k4aawi {
+  display: none;
+}
+
 .tabDisabled-lDuv5l {
   opacity: .5;
   cursor: not-allowed;
@@ -1268,7 +1477,7 @@ var __webpack_modules__ = {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .tab-yfDEqg {
+  .tab-yfDEqg, .overflowButton-tKq4FF, .overflowMenu-TST0eZ, .overflowItem-y5Pz7k {
     transition: none;
   }
 }
@@ -1284,9 +1493,21 @@ var __webpack_modules__ = {
         ]);
         ___CSS_LOADER_EXPORT___.locals = {
             tabList: "tabList-IyuiBE",
+            tabStrip: "tabStrip-_KrWe4",
             tab: "tab-yfDEqg",
             tabActive: "tabActive-r4hing",
             tabIcon: "tabIcon-U9tnu0",
+            tabHidden: "tabHidden-HBXYSd",
+            overflowContainer: "overflowContainer-TTw9DO",
+            overflowContainerHidden: "overflowContainerHidden-sQa_XZ",
+            overflowButton: "overflowButton-tKq4FF",
+            overflowButtonIcon: "overflowButtonIcon-FSurfC",
+            overflowMenu: "overflowMenu-TST0eZ",
+            overflowItem: "overflowItem-y5Pz7k",
+            overflowItemActive: "overflowItemActive-mzVG1T",
+            overflowItemDisabled: "overflowItemDisabled-dcHX3K",
+            overflowItemIcon: "overflowItemIcon-fz291V",
+            overflowItemHidden: "overflowItemHidden-k4aawi",
             tabDisabled: "tabDisabled-lDuv5l",
             tabPanel: "tabPanel-QKO8FX",
             tabPanelActive: "tabPanelActive-mrNlGE"
@@ -1310,6 +1531,15 @@ var __webpack_modules__ = {
   --c15t-devtools-button-size: 40px;
   --c15t-devtools-z-index: 99999;
   --c15t-devtools-surface-muted: var(--c15t-surface-hover, #f7f7f7);
+  --c15t-devtools-surface-subtle: #fafafa;
+  --c15t-devtools-surface-elevated: var(--c15t-surface, #fff);
+  --c15t-devtools-border-strong: var(--c15t-border, #e3e3e3);
+  --c15t-devtools-code-surface: #f7f7f7;
+  --c15t-devtools-accent-soft: #ebefff;
+  --c15t-devtools-focus-ring: var(--c15t-primary, #335cff);
+  --c15t-devtools-text-muted: var(--c15t-text-muted, #737373);
+  --c15t-devtools-font-size-sm: var(--c15t-font-size-sm, .875rem);
+  --c15t-surface-muted: var(--c15t-devtools-surface-muted, #f7f7f7);
   --c15t-devtools-font-size-xs: .75rem;
   --c15t-devtools-badge-success: #21c45d;
   --c15t-devtools-badge-success-bg: #e4fbed;
@@ -1323,8 +1553,37 @@ var __webpack_modules__ = {
   --c15t-devtools-badge-neutral-bg: #f0f0f0;
 }
 
+:is(:global(.c15t-light), :global(.light)) {
+  --c15t-devtools-surface-muted: var(--c15t-surface-hover, #f7f7f7);
+  --c15t-devtools-surface-subtle: #fafafa;
+  --c15t-devtools-surface-elevated: var(--c15t-surface, #fff);
+  --c15t-devtools-border-strong: var(--c15t-border, #e3e3e3);
+  --c15t-devtools-code-surface: #f7f7f7;
+  --c15t-devtools-accent-soft: #ebefff;
+  --c15t-devtools-badge-success-bg: #e4fbed;
+  --c15t-devtools-badge-error-bg: #fde7e7;
+  --c15t-devtools-badge-warning-bg: #fef7dc;
+  --c15t-devtools-badge-info-bg: #dcebfe;
+  --c15t-devtools-badge-neutral-bg: #f0f0f0;
+}
+
+@supports (color: color-mix(in srgb, white, black)) {
+  :root {
+    --c15t-devtools-surface-muted: color-mix(in srgb, var(--c15t-surface-hover, #f7f7f7) 85%, var(--c15t-surface, #fff));
+    --c15t-devtools-surface-subtle: color-mix(in srgb, var(--c15t-surface-hover, #f7f7f7) 55%, var(--c15t-surface, #fff));
+    --c15t-devtools-border-strong: color-mix(in srgb, var(--c15t-border, #e3e3e3) 80%, var(--c15t-text-muted, #737373));
+    --c15t-devtools-code-surface: color-mix(in srgb, var(--c15t-surface-hover, #f7f7f7) 70%, var(--c15t-surface, #fff));
+    --c15t-devtools-accent-soft: color-mix(in srgb, var(--c15t-primary, #335cff) 12%, transparent);
+  }
+}
+
 :is(:global(.c15t-dark), :global(.dark)) {
   --c15t-devtools-surface-muted: var(--c15t-surface-hover, #292929);
+  --c15t-devtools-surface-subtle: #242424;
+  --c15t-devtools-surface-elevated: var(--c15t-surface, #1a1a1a);
+  --c15t-devtools-border-strong: var(--c15t-border, #3d3d3d);
+  --c15t-devtools-code-surface: #212121;
+  --c15t-devtools-accent-soft: #335cff33;
   --c15t-devtools-badge-success-bg: #21c45d33;
   --c15t-devtools-badge-error-bg: #ef434333;
   --c15t-devtools-badge-warning-bg: #f59f0a33;
@@ -1333,8 +1592,13 @@ var __webpack_modules__ = {
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
+  :global(:root:not(.light):not(.c15t-light)) {
     --c15t-devtools-surface-muted: var(--c15t-surface-hover, #292929);
+    --c15t-devtools-surface-subtle: #242424;
+    --c15t-devtools-surface-elevated: var(--c15t-surface, #1a1a1a);
+    --c15t-devtools-border-strong: var(--c15t-border, #3d3d3d);
+    --c15t-devtools-code-surface: #212121;
+    --c15t-devtools-accent-soft: #335cff33;
     --c15t-devtools-badge-success-bg: #21c45d33;
     --c15t-devtools-badge-error-bg: #ef434333;
     --c15t-devtools-badge-warning-bg: #f59f0a33;
@@ -1842,7 +2106,7 @@ function renderer_button(options = {}) {
         type: options.type ?? 'button'
     });
 }
-function span(options = {}) {
+function renderer_span(options = {}) {
     return createElement({
         ...options,
         tag: 'span'
@@ -1921,7 +2185,29 @@ panel_module_options.domAPI = styleDomAPI_default();
 panel_module_options.insertStyleElement = insertStyleElement_default();
 injectStylesIntoStyleTag_default()(panel_module.A, panel_module_options);
 const styles_panel_module = panel_module.A && panel_module.A.locals ? panel_module.A.locals : void 0;
-const PREFERENCE_TRIGGER_SELECTORS = '[data-c15t-trigger], [aria-label*="privacy settings"], [aria-label*="preference"]';
+function formatInitSource(source, detail) {
+    const label = (()=>{
+        switch(source){
+            case 'ssr':
+                return 'SSR Prefetch';
+            case 'backend':
+                return 'Backend';
+            case 'backend-cache-hit':
+                return 'Backend (Cache Hit)';
+            case 'offline-fallback':
+                return 'Offline Fallback';
+            case 'offline-mode':
+                return 'Offline Mode';
+            case 'custom':
+                return 'Custom Client';
+            default:
+                return '—';
+        }
+    })();
+    return detail ? `${label} [${detail}]` : label;
+}
+const PREFERENCE_TRIGGER_SELECTORS = '[data-c15t-trigger], [aria-label*="privacy settings" i], [aria-label*="preference" i]';
+const PREVIOUS_DISPLAY_ATTR = 'data-c15t-devtools-prev-display';
 function detectPreferenceTrigger() {
     const triggers = document.querySelectorAll(PREFERENCE_TRIGGER_SELECTORS);
     return triggers.length > 0;
@@ -1931,7 +2217,19 @@ function getPreferenceTriggerElements() {
 }
 function setPreferenceTriggerVisibility(visible) {
     const elements = getPreferenceTriggerElements();
-    for (const el of elements)el.style.display = visible ? '' : 'none';
+    for (const el of elements){
+        if (visible) {
+            const previousDisplay = el.getAttribute(PREVIOUS_DISPLAY_ATTR);
+            if (null === previousDisplay) el.style.removeProperty('display');
+            else {
+                el.style.display = previousDisplay;
+                el.removeAttribute(PREVIOUS_DISPLAY_ATTR);
+            }
+            continue;
+        }
+        if (!el.hasAttribute(PREVIOUS_DISPLAY_ATTR)) el.setAttribute(PREVIOUS_DISPLAY_ATTR, el.style.display);
+        el.style.display = 'none';
+    }
 }
 function getPreferenceCenterOpener(namespace = 'c15tStore') {
     const win = window;
@@ -1944,7 +2242,7 @@ function getPreferenceCenterOpener(namespace = 'c15tStore') {
     }
     return null;
 }
-const version = '2.0.0-rc.3';
+const version = '2.0.0-rc.5';
 const DEVTOOLS_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 446 445" aria-label="c15t">
   <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"/>
 </svg>`;
@@ -2025,7 +2323,7 @@ function createDropdownMenu(options) {
         const labelContainer = renderer_div({
             className: styles_panel_module.menuItemContent ?? ''
         });
-        const label = span({
+        const label = renderer_span({
             className: styles_panel_module.menuItemLabel ?? '',
             text: item.label
         });
@@ -2147,6 +2445,11 @@ function getPositionClass(position) {
             return styles_panel_module.positionTopLeft ?? '';
     }
 }
+function formatRetryDelay(delayMs) {
+    if (null === delayMs) return 'n/a';
+    if (delayMs < 1000) return `${delayMs}ms`;
+    return `${(delayMs / 1000).toFixed(1)}s`;
+}
 function createPanel(options) {
     const { stateManager, storeConnector, onRenderContent, namespace = 'c15tStore', enableUnifiedMode = true } = options;
     let removePortal = null;
@@ -2278,7 +2581,7 @@ function createPanel(options) {
                             }));
                             return logoWrapper;
                         })(),
-                        span({
+                        renderer_span({
                             text: 'c15t DevTools'
                         })
                     ]
@@ -2322,38 +2625,46 @@ function createPanel(options) {
         const isConnected = storeConnector.isConnected();
         const storeState = storeConnector.getState();
         const isLoading = storeState?.isLoadingConsentInfo ?? false;
+        const diagnostics = storeConnector.getDiagnostics();
+        const initSource = formatInitSource(storeState?.initDataSource ?? null, storeState?.initDataSourceDetail ?? null);
         const statusChildren = [
-            span({
+            renderer_span({
                 className: `${styles_panel_module.statusDot} ${isConnected ? styles_panel_module.statusConnected : styles_panel_module.statusDisconnected}`
             }),
-            span({
+            renderer_span({
                 text: isConnected ? 'Connected' : 'Disconnected'
             })
         ];
-        if (isLoading) statusChildren.push(span({
-            style: {
-                marginLeft: '4px',
-                opacity: '0.7'
-            },
+        if (isLoading) statusChildren.push(renderer_span({
+            className: styles_panel_module.footerMeta,
             text: '\u00b7 Fetching /init\u2026'
         }));
+        else if (!isConnected) statusChildren.push(renderer_span({
+            className: styles_panel_module.footerMeta,
+            text: `· ${diagnostics.namespace} · retry ${diagnostics.reconnectAttempts} · next ${formatRetryDelay(diagnostics.nextRetryInMs)}`
+        }));
+        if (isConnected) statusChildren.push(renderer_span({
+            className: styles_panel_module.footerMeta,
+            text: `· Init: ${initSource}`
+        }));
         footerElement.appendChild(renderer_div({
             className: styles_panel_module.footerStatus,
             children: statusChildren
         }));
         if (!isConnected) footerElement.appendChild(renderer_button({
-            className: styles_panel_module.closeButton,
+            className: styles_panel_module.inlineActionButton,
             text: 'Retry',
             onClick: ()=>{
                 storeConnector.retryConnection();
             }
         }));
-        footerElement.appendChild(span({
+        footerElement.appendChild(renderer_span({
             text: `v${version}`
         }));
     }
     function renderErrorState(container) {
         clearElement(container);
+        const diagnostics = storeConnector.getDiagnostics();
         const errorState = renderer_div({
             className: styles_panel_module.errorState,
             children: [
@@ -2375,8 +2686,25 @@ function createPanel(options) {
                     className: styles_panel_module.errorMessage,
                     text: 'c15t consent manager is not initialized. Make sure you have set up the ConsentManagerProvider in your app.'
                 }),
+                renderer_div({
+                    className: styles_panel_module.errorMessage,
+                    style: {
+                        marginTop: '4px',
+                        fontSize: 'var(--c15t-devtools-font-size-xs)'
+                    },
+                    text: `Namespace: ${diagnostics.namespace} · Retries: ${diagnostics.reconnectAttempts} · Next retry: ${formatRetryDelay(diagnostics.nextRetryInMs)}`
+                }),
+                diagnostics.lastError ? renderer_div({
+                    className: styles_panel_module.errorMessage,
+                    style: {
+                        marginTop: '4px',
+                        fontSize: 'var(--c15t-devtools-font-size-xs)',
+                        color: 'var(--c15t-text-muted)'
+                    },
+                    text: `Last error: ${diagnostics.lastError}`
+                }) : null,
                 renderer_button({
-                    className: styles_panel_module.closeButton,
+                    className: styles_panel_module.inlineActionButton,
                     text: 'Retry Connection',
                     onClick: ()=>{
                         storeConnector.retryConnection();
@@ -2439,6 +2767,10 @@ function createPanel(options) {
         if (contentContainer) if (storeConnector.isConnected()) onRenderContent(contentContainer);
         else renderErrorState(contentContainer);
     });
+    const unsubscribeDiagnostics = storeConnector.subscribeDiagnostics(()=>{
+        updateFooter();
+        if (contentContainer && !storeConnector.isConnected()) renderErrorState(contentContainer);
+    });
     container.appendChild(floatingButton);
     removePortal = createPortal(container);
     return {
@@ -2448,6 +2780,7 @@ function createPanel(options) {
         destroy: ()=>{
             unsubscribeState();
             unsubscribeStore();
+            unsubscribeDiagnostics();
             if (dropdownMenu) {
                 dropdownMenu.destroy();
                 dropdownMenu = null;
@@ -2481,6 +2814,11 @@ const LOCATION_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 2
   <line x1="2" y1="12" x2="22" y2="12"></line>
   <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
 </svg>`;
+const POLICY_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">
+  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
+  <path d="M9 12h6"></path>
+  <path d="M12 9v6"></path>
+</svg>`;
 const SCRIPTS_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">
   <polyline points="16 18 22 12 16 6"></polyline>
   <polyline points="8 6 2 12 8 18"></polyline>
@@ -2497,12 +2835,22 @@ const EVENTS_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
   <path d="M12 20h9"></path>
   <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"></path>
 </svg>`;
+const MORE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+  <circle cx="12" cy="5" r="1.75"></circle>
+  <circle cx="12" cy="12" r="1.75"></circle>
+  <circle cx="12" cy="19" r="1.75"></circle>
+</svg>`;
 const TABS = [
     {
         id: 'location',
         label: 'Location',
         icon: LOCATION_ICON
     },
+    {
+        id: 'policy',
+        label: 'Policy',
+        icon: POLICY_ICON
+    },
     {
         id: 'consents',
         label: 'Consents',
@@ -2532,12 +2880,56 @@ const TABS = [
 function createTabs(options) {
     const { onTabChange, disabledTabs = [] } = options;
     let activeTab = options.activeTab;
+    let isOverflowMenuOpen = false;
+    let visibleTabIds = [];
+    let hiddenTabIds = [];
     const tabButtons = new Map();
+    const overflowButtons = new Map();
     const tabList = renderer_div({
-        className: styles_tabs_module.tabList,
+        className: styles_tabs_module.tabList
+    });
+    const tabStrip = renderer_div({
+        className: styles_tabs_module.tabStrip,
         role: 'tablist',
         ariaLabel: 'DevTools tabs'
     });
+    tabList.appendChild(tabStrip);
+    const overflowMenu = renderer_div({
+        className: styles_tabs_module.overflowMenu,
+        role: 'menu',
+        ariaLabel: 'All tabs'
+    });
+    overflowMenu.dataset.state = 'closed';
+    const overflowButton = renderer_button({
+        className: styles_tabs_module.overflowButton,
+        ariaLabel: 'More tabs',
+        ariaExpanded: 'false',
+        onClick: ()=>toggleOverflowMenu(),
+        onKeyDown: (e)=>{
+            if ('ArrowDown' === e.key || 'Enter' === e.key || ' ' === e.key) {
+                e.preventDefault();
+                openOverflowMenu();
+                focusFirstEnabledOverflowItem();
+            }
+        }
+    });
+    overflowButton.setAttribute('aria-haspopup', 'menu');
+    const overflowIcon = renderer_div({
+        className: styles_tabs_module.overflowButtonIcon
+    });
+    overflowIcon.appendChild(createSvgElement(MORE_ICON, {
+        width: 14,
+        height: 14
+    }));
+    overflowButton.appendChild(overflowIcon);
+    const overflowContainer = renderer_div({
+        className: styles_tabs_module.overflowContainer,
+        children: [
+            overflowButton,
+            overflowMenu
+        ]
+    });
+    tabList.appendChild(overflowContainer);
     for (const tab of TABS){
         const isActive = tab.id === activeTab;
         const isDisabled = disabledTabs.includes(tab.id);
@@ -2551,6 +2943,7 @@ function createTabs(options) {
             disabled: isDisabled,
             onClick: ()=>{
                 if (!isDisabled) {
+                    closeOverflowMenu();
                     setActiveTab(tab.id);
                     onTabChange(tab.id);
                 }
@@ -2567,14 +2960,192 @@ function createTabs(options) {
         tabButton.appendChild(iconWrapper);
         tabButton.appendChild(document.createTextNode(tab.label));
         tabButtons.set(tab.id, tabButton);
-        tabList.appendChild(tabButton);
-    }
-    function handleKeyDown(e, currentTab) {
-        const tabIds = TABS.map((t)=>t.id);
-        const enabledTabIds = tabIds.filter((id)=>!disabledTabs.includes(id));
-        const currentIndex = enabledTabIds.indexOf(currentTab);
-        let newIndex = currentIndex;
-        switch(e.key){
+        tabStrip.appendChild(tabButton);
+        const overflowItem = renderer_button({
+            className: `${styles_tabs_module.overflowItem} ${isActive ? styles_tabs_module.overflowItemActive : ''} ${isDisabled ? styles_tabs_module.overflowItemDisabled : ''}`,
+            role: 'menuitemradio',
+            ariaChecked: isActive ? 'true' : 'false',
+            disabled: isDisabled,
+            onClick: ()=>{
+                if (!isDisabled) {
+                    setActiveTab(tab.id);
+                    onTabChange(tab.id);
+                    closeOverflowMenu();
+                    tabButtons.get(tab.id)?.focus();
+                }
+            },
+            onKeyDown: (e)=>handleOverflowKeyDown(e, tab.id)
+        });
+        const overflowItemIcon = renderer_div({
+            className: styles_tabs_module.overflowItemIcon
+        });
+        overflowItemIcon.appendChild(createSvgElement(tab.icon, {
+            width: 14,
+            height: 14
+        }));
+        overflowItem.appendChild(overflowItemIcon);
+        overflowItem.appendChild(document.createTextNode(tab.label));
+        overflowButtons.set(tab.id, overflowItem);
+        overflowMenu.appendChild(overflowItem);
+    }
+    function applyActiveState(tab) {
+        for (const [tabId, tabButton] of tabButtons){
+            const isActive = tabId === tab;
+            if (styles_tabs_module.tabActive) tabButton.classList.toggle(styles_tabs_module.tabActive, isActive);
+            tabButton.setAttribute('aria-selected', isActive ? 'true' : 'false');
+            tabButton.tabIndex = isActive ? 0 : -1;
+        }
+        for (const [tabId, overflowItem] of overflowButtons){
+            const isActive = tabId === tab;
+            if (styles_tabs_module.overflowItemActive) overflowItem.classList.toggle(styles_tabs_module.overflowItemActive, isActive);
+            overflowItem.setAttribute('aria-checked', isActive ? 'true' : 'false');
+        }
+    }
+    function updateVisibleTabs() {
+        const allTabIds = TABS.map((t)=>t.id);
+        const iabEnabled = !disabledTabs.includes('iab');
+        const preferredSecondTab = iabEnabled ? 'iab' : 'consents';
+        const overflowSecondTab = iabEnabled ? 'consents' : 'iab';
+        const showOverflowSecondTabInStrip = activeTab === overflowSecondTab;
+        const stripSecondTab = showOverflowSecondTabInStrip ? overflowSecondTab : preferredSecondTab;
+        const forcedOverflowTab = showOverflowSecondTabInStrip ? preferredSecondTab : overflowSecondTab;
+        const layoutTabIds = [
+            'location',
+            'policy',
+            stripSecondTab,
+            "scripts",
+            'actions',
+            'events',
+            forcedOverflowTab
+        ];
+        const forcedOverflowTabIds = new Set();
+        forcedOverflowTabIds.add(forcedOverflowTab);
+        for (const [index, tabId] of layoutTabIds.entries()){
+            const tabButton = tabButtons.get(tabId);
+            if (tabButton) tabButton.style.order = String(index);
+            const overflowItem = overflowButtons.get(tabId);
+            if (overflowItem) overflowItem.style.order = String(index);
+        }
+        for (const tabId of allTabIds){
+            const tabButton = tabButtons.get(tabId);
+            if (tabButton && styles_tabs_module.tabHidden) tabButton.classList.remove(styles_tabs_module.tabHidden);
+        }
+        if (styles_tabs_module.overflowContainerHidden) overflowContainer.classList.remove(styles_tabs_module.overflowContainerHidden);
+        const stripGap = Number.parseFloat(getComputedStyle(tabStrip).gap || '0');
+        const calculateVisibleTabs = (availableWidth)=>{
+            if (availableWidth <= 0) return [];
+            const nextVisible = [];
+            let usedWidth = 0;
+            for (const tabId of layoutTabIds){
+                if (forcedOverflowTabIds.has(tabId)) continue;
+                const tabButton = tabButtons.get(tabId);
+                if (!tabButton) continue;
+                const width = tabButton.getBoundingClientRect().width;
+                const nextUsed = 0 === nextVisible.length ? width : usedWidth + stripGap + width;
+                if (nextUsed <= availableWidth) {
+                    nextVisible.push(tabId);
+                    usedWidth = nextUsed;
+                } else break;
+            }
+            return nextVisible;
+        };
+        const measureStripWidth = ()=>tabStrip.getBoundingClientRect().width;
+        const showOverflowContainer = ()=>{
+            if (styles_tabs_module.overflowContainerHidden) overflowContainer.classList.remove(styles_tabs_module.overflowContainerHidden);
+        };
+        const hideOverflowContainer = ()=>{
+            if (styles_tabs_module.overflowContainerHidden) overflowContainer.classList.add(styles_tabs_module.overflowContainerHidden);
+        };
+        const measureVisibleWidth = (tabIds)=>{
+            let width = 0;
+            for (const [index, tabId] of tabIds.entries()){
+                const tabButton = tabButtons.get(tabId);
+                if (tabButton) {
+                    width += tabButton.getBoundingClientRect().width;
+                    if (index > 0) width += stripGap;
+                }
+            }
+            return width;
+        };
+        if (0 === forcedOverflowTabIds.size) {
+            hideOverflowContainer();
+            const visibleWithoutOverflow = calculateVisibleTabs(measureStripWidth());
+            if (visibleWithoutOverflow.length === layoutTabIds.length) visibleTabIds = visibleWithoutOverflow;
+            else {
+                showOverflowContainer();
+                visibleTabIds = calculateVisibleTabs(measureStripWidth());
+            }
+        } else {
+            showOverflowContainer();
+            const withOverflow = calculateVisibleTabs(measureStripWidth());
+            visibleTabIds = withOverflow.length > 0 ? withOverflow : [
+                activeTab
+            ];
+        }
+        if (!visibleTabIds.includes(activeTab) && !disabledTabs.includes(activeTab)) if (visibleTabIds.length > 0) visibleTabIds[visibleTabIds.length - 1] = activeTab;
+        else visibleTabIds = [
+            activeTab
+        ];
+        visibleTabIds = [
+            ...new Set(visibleTabIds)
+        ];
+        const maxStripWidth = measureStripWidth();
+        while(visibleTabIds.length > 1 && measureVisibleWidth(visibleTabIds) > maxStripWidth + 0.5){
+            let removeIndex = visibleTabIds.length - 1;
+            if (visibleTabIds[removeIndex] === activeTab) removeIndex = Math.max(0, removeIndex - 1);
+            visibleTabIds.splice(removeIndex, 1);
+        }
+        hiddenTabIds = layoutTabIds.filter((tabId)=>!visibleTabIds.includes(tabId) || forcedOverflowTabIds.has(tabId) && tabId !== activeTab);
+        for (const tabId of allTabIds){
+            const tabButton = tabButtons.get(tabId);
+            if (tabButton) {
+                if (styles_tabs_module.tabHidden) tabButton.classList.toggle(styles_tabs_module.tabHidden, hiddenTabIds.includes(tabId));
+            }
+        }
+        for (const tabId of allTabIds){
+            const overflowItem = overflowButtons.get(tabId);
+            if (overflowItem) {
+                if (styles_tabs_module.overflowItemHidden) overflowItem.classList.toggle(styles_tabs_module.overflowItemHidden, !hiddenTabIds.includes(tabId));
+            }
+        }
+        if (styles_tabs_module.overflowContainerHidden) overflowContainer.classList.toggle(styles_tabs_module.overflowContainerHidden, 0 === hiddenTabIds.length);
+        if (0 === hiddenTabIds.length) closeOverflowMenu();
+    }
+    function focusFirstEnabledOverflowItem() {
+        const firstEnabled = hiddenTabIds.find((tabId)=>!disabledTabs.includes(tabId));
+        if (firstEnabled) overflowButtons.get(firstEnabled)?.focus();
+    }
+    function openOverflowMenu() {
+        if (isOverflowMenuOpen || 0 === hiddenTabIds.length) return;
+        isOverflowMenuOpen = true;
+        overflowMenu.dataset.state = 'open';
+        overflowButton.setAttribute('aria-expanded', 'true');
+        document.addEventListener('click', handleOutsideClick);
+        document.addEventListener('keydown', handleEscapeKey);
+    }
+    function closeOverflowMenu() {
+        if (!isOverflowMenuOpen) return;
+        isOverflowMenuOpen = false;
+        overflowMenu.dataset.state = 'closed';
+        overflowButton.setAttribute('aria-expanded', 'false');
+        document.removeEventListener('click', handleOutsideClick);
+        document.removeEventListener('keydown', handleEscapeKey);
+    }
+    function toggleOverflowMenu() {
+        if (isOverflowMenuOpen) closeOverflowMenu();
+        else openOverflowMenu();
+    }
+    function handleOutsideClick(e) {
+        if (!overflowContainer.contains(e.target)) closeOverflowMenu();
+    }
+    function handleEscapeKey(e) {
+        if ('Escape' === e.key) closeOverflowMenu();
+    }
+    function handleKeyDown(e, currentTab) {
+        const enabledTabIds = visibleTabIds.filter((tabId)=>!disabledTabs.includes(tabId));
+        const currentIndex = enabledTabIds.indexOf(currentTab);
+        let newIndex = currentIndex;
+        switch(e.key){
             case 'ArrowLeft':
                 newIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabIds.length - 1;
                 break;
@@ -2598,23 +3169,152 @@ function createTabs(options) {
             tabButtons.get(newTab)?.focus();
         }
     }
+    function handleOverflowKeyDown(e, currentTab) {
+        const enabledTabIds = hiddenTabIds.filter((tabId)=>!disabledTabs.includes(tabId));
+        const currentIndex = enabledTabIds.indexOf(currentTab);
+        if ('Escape' === e.key) {
+            e.preventDefault();
+            closeOverflowMenu();
+            overflowButton.focus();
+            return;
+        }
+        let newIndex = currentIndex;
+        switch(e.key){
+            case 'ArrowDown':
+                newIndex = (currentIndex + 1) % enabledTabIds.length;
+                break;
+            case 'ArrowUp':
+                newIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabIds.length - 1;
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        const newTab = enabledTabIds[newIndex];
+        if (newTab) overflowButtons.get(newTab)?.focus();
+    }
     function setActiveTab(tab) {
         activeTab = tab;
-        for (const [tabId, tabButton] of tabButtons){
-            const isActive = tabId === tab;
-            if (styles_tabs_module.tabActive) tabButton.classList.toggle(styles_tabs_module.tabActive, isActive);
-            tabButton.setAttribute('aria-selected', isActive ? 'true' : 'false');
-            tabButton.tabIndex = isActive ? 0 : -1;
-        }
+        applyActiveState(tab);
+        updateVisibleTabs();
     }
+    const handleWindowResize = ()=>{
+        updateVisibleTabs();
+    };
+    let resizeObserver = null;
+    if ('undefined' != typeof ResizeObserver) {
+        resizeObserver = new ResizeObserver(()=>{
+            updateVisibleTabs();
+        });
+        resizeObserver.observe(tabList);
+    } else window.addEventListener('resize', handleWindowResize);
+    applyActiveState(activeTab);
+    requestAnimationFrame(()=>{
+        updateVisibleTabs();
+    });
     return {
         element: tabList,
         setActiveTab,
         destroy: ()=>{
+            closeOverflowMenu();
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+                resizeObserver = null;
+            } else window.removeEventListener('resize', handleWindowResize);
             tabButtons.clear();
+            overflowButtons.clear();
         }
     };
 }
+function createDebugBundle(payload) {
+    const { namespace, devToolsState, connection, recentEvents, storeState } = payload;
+    const bundle = {
+        generatedAt: new Date().toISOString(),
+        namespace,
+        devToolsState,
+        connection,
+        recentEvents,
+        storeState,
+        overrides: storeState?.overrides ?? null,
+        iab: storeState?.iab ? {
+            tcString: (storeState?.iab).tcString ?? null,
+            purposeCount: Object.keys((storeState?.iab).purposeConsents ?? {}).length,
+            vendorCount: Object.keys((storeState?.iab).vendorConsents ?? {}).length
+        } : null
+    };
+    return JSON.stringify(bundle, null, 2);
+}
+function sanitizeStoreState(state) {
+    if (!state) return null;
+    try {
+        return JSON.parse(JSON.stringify(state, (_key, value)=>'function' == typeof value ? void 0 : value));
+    } catch  {
+        return {
+            error: 'Unable to serialize store state'
+        };
+    }
+}
+function downloadDebugBundle(content) {
+    const blob = new Blob([
+        content
+    ], {
+        type: 'application/json'
+    });
+    const url = URL.createObjectURL(blob);
+    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = `c15t-debug-bundle-${timestamp}.json`;
+    anchor.click();
+    URL.revokeObjectURL(url);
+}
+const DEVTOOLS_OVERRIDES_STORAGE_KEY = 'c15t-devtools-overrides';
+function normalizeStringValue(value) {
+    if ('string' != typeof value) return;
+    const normalized = value.trim();
+    return normalized.length > 0 ? normalized : void 0;
+}
+function normalizeBooleanValue(value) {
+    return 'boolean' == typeof value ? value : void 0;
+}
+function normalizeOverrides(value) {
+    if (!value || 'object' != typeof value) return null;
+    const source = value;
+    const overrides = {
+        country: normalizeStringValue(source.country),
+        region: normalizeStringValue(source.region),
+        language: normalizeStringValue(source.language),
+        gpc: normalizeBooleanValue(source.gpc)
+    };
+    return hasPersistedOverrides(overrides) ? overrides : null;
+}
+function hasPersistedOverrides(overrides) {
+    return Boolean(overrides.country || overrides.region || overrides.language || void 0 !== overrides.gpc);
+}
+function loadPersistedOverrides(storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
+    if ('undefined' == typeof window) return null;
+    try {
+        const stored = localStorage.getItem(storageKey);
+        if (!stored) return null;
+        const parsed = JSON.parse(stored);
+        return normalizeOverrides(parsed);
+    } catch  {
+        return null;
+    }
+}
+function persistOverrides(overrides, storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
+    if ('undefined' == typeof window) return;
+    try {
+        if (!hasPersistedOverrides(overrides)) return void localStorage.removeItem(storageKey);
+        localStorage.setItem(storageKey, JSON.stringify(overrides));
+    } catch  {}
+}
+function clearPersistedOverrides(storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
+    if ('undefined' == typeof window) return;
+    try {
+        localStorage.removeItem(storageKey);
+    } catch  {}
+}
 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");
 var components_module_options = {};
 components_module_options.styleTagTransform = styleTagTransform_default();
@@ -2651,7 +3351,7 @@ function createBadge(options) {
         info: styles_components_module.badgeInfo,
         neutral: styles_components_module.badgeNeutral
     }[variant];
-    return span({
+    return renderer_span({
         className: `${styles_components_module.badge} ${variantClass}`,
         text
     });
@@ -2682,31 +3382,19 @@ function createButton(options) {
     btn.appendChild(document.createTextNode(text));
     return btn;
 }
-function createListItem(options) {
-    const { title, description, actions = [] } = options;
-    const content = renderer_div({
-        className: styles_components_module.listItemContent,
-        children: [
-            span({
-                className: styles_components_module.listItemTitle,
-                text: title
-            }),
-            description ? span({
-                className: styles_components_module.listItemDescription,
-                text: description
-            }) : null
-        ]
-    });
-    const actionsContainer = renderer_div({
-        className: styles_components_module.listItemActions,
-        children: actions
-    });
-    return renderer_div({
-        className: styles_components_module.listItem,
-        children: [
-            content,
-            actionsContainer
-        ]
+function createInput(options) {
+    const { value, placeholder, ariaLabel, small = false, onInput } = options;
+    const sizeClass = small ? styles_components_module.inputSmall : '';
+    return input({
+        className: `${styles_components_module.input} ${sizeClass}`.trim(),
+        type: 'text',
+        value,
+        placeholder,
+        ariaLabel,
+        onInput: (event)=>{
+            const target = event.target;
+            onInput?.(target?.value ?? '');
+        }
     });
 }
 function createSection(options) {
@@ -2714,7 +3402,7 @@ function createSection(options) {
     const header = renderer_div({
         className: styles_components_module.sectionHeader,
         children: [
-            span({
+            renderer_span({
                 className: styles_components_module.sectionTitle,
                 text: title
             }),
@@ -2734,11 +3422,11 @@ function createInfoRow(options) {
     return renderer_div({
         className: styles_components_module.infoRow,
         children: [
-            span({
+            renderer_span({
                 className: styles_components_module.infoLabel,
                 text: label
             }),
-            span({
+            renderer_span({
                 className: styles_components_module.infoValue,
                 text: value
             })
@@ -2758,7 +3446,7 @@ function createEmptyState(options) {
         }));
         children.push(iconWrapper);
     }
-    children.push(span({
+    children.push(renderer_span({
         className: styles_components_module.emptyStateText,
         text
     }));
@@ -2778,7 +3466,7 @@ function createGrid(options) {
 function createGridCard(options) {
     const { title, action } = options;
     const children = [
-        span({
+        renderer_span({
             className: styles_components_module.gridCardTitle,
             text: title
         })
@@ -2789,6 +3477,18 @@ function createGridCard(options) {
         children
     });
 }
+function createDisconnectedState(message = 'Store not connected') {
+    return renderer_div({
+        className: styles_components_module.disconnectedState,
+        style: {
+            padding: '24px',
+            textAlign: 'center',
+            color: 'var(--c15t-text-muted)',
+            fontSize: 'var(--c15t-devtools-font-size-sm)'
+        },
+        text: message
+    });
+}
 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">
   <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
   <path d="M21 3v5h-5"></path>
@@ -2817,18 +3517,10 @@ const TERMINAL_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 2
   <line x1="12" y1="19" x2="20" y2="19"></line>
 </svg>`;
 function renderActionsPanel(container, options) {
-    const { getState, onResetConsents, onRefetchBanner, onShowBanner, onOpenPreferences, onCopyState } = options;
+    const { getState, onResetConsents, onRefetchBanner, onShowBanner, onOpenPreferences, onCopyState, onExportDebugBundle } = options;
     clearElement(container);
     const state = getState();
-    if (!state) return void container.appendChild(renderer_div({
-        style: {
-            padding: '24px',
-            textAlign: 'center',
-            color: 'var(--c15t-text-muted)',
-            fontSize: 'var(--c15t-devtools-font-size-sm)'
-        },
-        text: 'Store not connected'
-    }));
+    if (!state) return void container.appendChild(createDisconnectedState());
     const actionCards = [
         createActionCard({
             icon: actions_EYE_ICON,
@@ -2849,6 +3541,12 @@ function renderActionsPanel(container, options) {
             icon: COPY_ICON,
             label: 'Copy State',
             onClick: onCopyState
+        }),
+        createActionCard({
+            icon: REFRESH_ICON,
+            label: 'Export Debug',
+            onClick: ()=>onExportDebugBundle?.(),
+            disabled: !onExportDebugBundle
         })
     ];
     const grid = createGrid({
@@ -2886,7 +3584,7 @@ function renderActionsPanel(container, options) {
                 },
                 children: [
                     createIconWrapper(TERMINAL_ICON, 14),
-                    span({
+                    renderer_span({
                         style: {
                             fontSize: 'var(--c15t-devtools-font-size-xs)',
                             fontWeight: '600',
@@ -2909,10 +3607,10 @@ function renderActionsPanel(container, options) {
                     color: 'var(--c15t-text-muted)'
                 },
                 children: [
-                    span({
+                    renderer_span({
                         text: `window.${getNamespace(state)}.getState()`
                     }),
-                    span({
+                    renderer_span({
                         text: 'window.__c15tDevTools.open()'
                     })
                 ]
@@ -2922,7 +3620,7 @@ function renderActionsPanel(container, options) {
     container.appendChild(consoleSection);
 }
 function createActionCard(options) {
-    const { icon, label, onClick } = options;
+    const { icon, label, onClick, disabled = false } = options;
     const card = renderer_div({
         className: styles_components_module.gridCard ?? '',
         style: {
@@ -2933,11 +3631,12 @@ function createActionCard(options) {
             gap: '6px',
             padding: '16px 8px',
             cursor: 'pointer',
-            transition: 'background-color var(--c15t-duration-fast) var(--c15t-easing)'
+            transition: 'background-color var(--c15t-duration-fast) var(--c15t-easing)',
+            opacity: disabled ? '0.55' : '1'
         },
         children: [
             createIconWrapper(icon, 20),
-            span({
+            renderer_span({
                 style: {
                     fontSize: 'var(--c15t-devtools-font-size-xs)',
                     fontWeight: '500',
@@ -2948,13 +3647,15 @@ function createActionCard(options) {
             })
         ]
     });
-    card.addEventListener('click', onClick);
-    card.addEventListener('mouseenter', ()=>{
-        card.style.backgroundColor = 'var(--c15t-surface-hover)';
-    });
-    card.addEventListener('mouseleave', ()=>{
-        card.style.backgroundColor = '';
-    });
+    if (!disabled) {
+        card.addEventListener('click', onClick);
+        card.addEventListener('mouseenter', ()=>{
+            card.style.backgroundColor = 'var(--c15t-surface-hover)';
+        });
+        card.addEventListener('mouseleave', ()=>{
+            card.style.backgroundColor = '';
+        });
+    }
     return card;
 }
 function createIconWrapper(icon, size) {
@@ -2979,15 +3680,7 @@ function renderConsentsPanel(container, options) {
     const { getState, onConsentChange, onSave, onAcceptAll, onRejectAll, onReset } = options;
     clearElement(container);
     const state = getState();
-    if (!state) return void container.appendChild(renderer_div({
-        style: {
-            padding: '24px',
-            textAlign: 'center',
-            color: 'var(--c15t-text-muted)',
-            fontSize: 'var(--c15t-devtools-font-size-sm)'
-        },
-        text: 'Store not connected'
-    }));
+    if (!state) return void container.appendChild(createDisconnectedState());
     const isIabMode = 'iab' === state.model;
     const savedConsents = state.consents || {};
     const selectedConsents = state.selectedConsents || {};
@@ -3117,7 +3810,7 @@ function renderConsentsPanel(container, options) {
                     gap: '8px'
                 },
                 children: [
-                    span({
+                    renderer_span({
                         style: {
                             fontSize: 'var(--c15t-devtools-font-size-xs)',
                             color: 'var(--c15t-devtools-badge-warning)'
@@ -3131,7 +3824,7 @@ function renderConsentsPanel(container, options) {
                         onClick: onSave
                     })
                 ]
-            }) : span({
+            }) : renderer_span({
                 style: {
                     fontSize: 'var(--c15t-devtools-font-size-xs)',
                     color: 'var(--c15t-text-muted)'
@@ -3145,15 +3838,26 @@ function renderConsentsPanel(container, options) {
 function formatConsentName(name) {
     return name.replace(/_/g, ' ').replace(/\b\w/g, (l)=>l.toUpperCase());
 }
-let activeFilter = 'all';
-let selectedEventId = null;
+const panelStateByContainer = new WeakMap();
+function getPanelState(container) {
+    const existing = panelStateByContainer.get(container);
+    if (existing) return existing;
+    const initialState = {
+        activeFilter: 'all',
+        selectedEventId: null,
+        searchQuery: ''
+    };
+    panelStateByContainer.set(container, initialState);
+    return initialState;
+}
 function renderEventsPanel(container, options) {
     const { getEvents, onClear } = options;
+    const panelState = getPanelState(container);
     clearElement(container);
     const allEvents = getEvents();
-    const events = allEvents.filter((event)=>matchesFilter(event, activeFilter));
-    if (!events.some((event)=>event.id === selectedEventId)) selectedEventId = events[0]?.id ?? null;
-    const selectedEvent = events.find((event)=>event.id === selectedEventId) ?? null;
+    const events = allEvents.filter((event)=>matchesFilter(event, panelState.activeFilter)).filter((event)=>matchesSearch(event, panelState.searchQuery));
+    if (!events.some((event)=>event.id === panelState.selectedEventId)) panelState.selectedEventId = events[0]?.id ?? null;
+    const selectedEvent = events.find((event)=>event.id === panelState.selectedEventId) ?? null;
     const header = renderer_div({
         style: {
             display: 'flex',
@@ -3163,7 +3867,7 @@ function renderEventsPanel(container, options) {
             gap: '8px'
         },
         children: [
-            span({
+            renderer_span({
                 style: {
                     fontSize: 'var(--c15t-devtools-font-size-xs)',
                     fontWeight: '600',
@@ -3189,7 +3893,7 @@ function renderEventsPanel(container, options) {
                         small: true,
                         onClick: ()=>{
                             onClear();
-                            selectedEventId = null;
+                            panelState.selectedEventId = null;
                             renderEventsPanel(container, options);
                         }
                     })
@@ -3205,12 +3909,30 @@ function renderEventsPanel(container, options) {
             gap: '6px',
             padding: '0 16px 8px'
         },
-        children: EVENT_FILTERS.map((filter)=>createFilterButton(filter, filter === activeFilter, ()=>{
-                activeFilter = filter;
-                selectedEventId = null;
+        children: EVENT_FILTERS.map((filter)=>createFilterButton(filter, filter === panelState.activeFilter, ()=>{
+                panelState.activeFilter = filter;
+                panelState.selectedEventId = null;
                 renderEventsPanel(container, options);
             }))
     }));
+    container.appendChild(renderer_div({
+        style: {
+            padding: '0 16px 8px'
+        },
+        children: [
+            createInput({
+                value: panelState.searchQuery,
+                placeholder: 'Search events…',
+                ariaLabel: 'Search events',
+                small: true,
+                onInput: (value)=>{
+                    panelState.searchQuery = value.trim().toLowerCase();
+                    panelState.selectedEventId = null;
+                    renderEventsPanel(container, options);
+                }
+            })
+        ]
+    }));
     const eventList = renderer_div({
         style: {
             display: 'flex',
@@ -3230,8 +3952,8 @@ function renderEventsPanel(container, options) {
         },
         text: 'No events match this filter'
     }));
-    else for (const event of events)eventList.appendChild(createEventItem(event, event.id === selectedEventId, ()=>{
-        selectedEventId = event.id;
+    else for (const event of events)eventList.appendChild(createEventItem(event, event.id === panelState.selectedEventId, ()=>{
+        panelState.selectedEventId = event.id;
         renderEventsPanel(container, options);
     }));
     container.appendChild(eventList);
@@ -3259,6 +3981,11 @@ function matchesFilter(event, filter) {
     if ('network' === filter) return 'network' === event.type;
     return 'iab' === event.type;
 }
+function matchesSearch(event, query) {
+    if (!query) return true;
+    const haystack = `${event.type} ${event.message} ${JSON.stringify(event.data ?? {})}`;
+    return haystack.toLowerCase().includes(query);
+}
 function createPayloadSection(event) {
     const payload = event?.data ? JSON.stringify(event.data, null, 2) : null;
     return renderer_div({
@@ -3311,7 +4038,7 @@ function createEventItem(event, selected, onSelect) {
         },
         onClick: onSelect,
         children: [
-            span({
+            renderer_span({
                 style: {
                     color,
                     fontSize: '8px',
@@ -3319,7 +4046,7 @@ function createEventItem(event, selected, onSelect) {
                 },
                 text: icon
             }),
-            span({
+            renderer_span({
                 style: {
                     color: 'var(--c15t-text-muted)',
                     fontFamily: 'monospace',
@@ -3328,7 +4055,7 @@ function createEventItem(event, selected, onSelect) {
                 },
                 text: time
             }),
-            span({
+            renderer_span({
                 style: {
                     color: 'var(--c15t-text)',
                     flex: '1'
@@ -3396,38 +4123,15 @@ function getEventColor(type) {
             return 'var(--c15t-text-muted)';
     }
 }
+const iabSearchByContainer = new WeakMap();
 function renderIabPanel(container, options) {
     const { getState, onSetPurposeConsent, onSetVendorConsent, onSetSpecialFeatureOptIn, onAcceptAll, onRejectAll, onSave, onReset } = options;
     clearElement(container);
     const state = getState();
-    if (!state) return void container.appendChild(renderer_div({
-        style: {
-            padding: '24px',
-            textAlign: 'center',
-            color: 'var(--c15t-text-muted)',
-            fontSize: 'var(--c15t-devtools-font-size-sm)'
-        },
-        text: 'Store not connected'
-    }));
-    if ('iab' !== state.model) return void container.appendChild(renderer_div({
-        style: {
-            padding: '24px',
-            textAlign: 'center',
-            color: 'var(--c15t-text-muted)',
-            fontSize: 'var(--c15t-devtools-font-size-sm)'
-        },
-        text: 'IAB TCF mode is not configured'
-    }));
+    if (!state) return void container.appendChild(createDisconnectedState());
+    if ('iab' !== state.model) return void container.appendChild(createDisconnectedState('IAB TCF mode is not configured'));
     const iabState = state.iab;
-    if (!iabState) return void container.appendChild(renderer_div({
-        style: {
-            padding: '24px',
-            textAlign: 'center',
-            color: 'var(--c15t-text-muted)',
-            fontSize: 'var(--c15t-devtools-font-size-sm)'
-        },
-        text: 'IAB state not available'
-    }));
+    if (!iabState) return void container.appendChild(createDisconnectedState('IAB state not available'));
     const tcString = iabState.tcString;
     const tcStringSection = createSection({
         title: 'TC String',
@@ -3459,9 +4163,30 @@ function renderIabPanel(container, options) {
     });
     container.appendChild(tcStringSection);
     const gvl = iabState.gvl;
+    const searchQuery = iabSearchByContainer.get(container) ?? '';
+    container.appendChild(createSection({
+        title: 'Filter',
+        children: [
+            createInput({
+                value: searchQuery,
+                placeholder: 'Filter purposes or vendors…',
+                ariaLabel: 'Filter IAB purposes and vendors',
+                small: true,
+                onInput: (value)=>{
+                    iabSearchByContainer.set(container, value.trim().toLowerCase());
+                    renderIabPanel(container, options);
+                }
+            })
+        ]
+    }));
     const purposeConsents = iabState.purposeConsents || {};
     const purposes = gvl?.purposes || {};
-    const purposeEntries = Object.entries(purposeConsents);
+    const purposeEntries = Object.entries(purposeConsents).filter(([purposeId])=>{
+        if (!searchQuery) return true;
+        const purposeInfo = purposes[purposeId];
+        const purposeName = purposeInfo?.name || `Purpose ${purposeId}`;
+        return `${purposeId} ${purposeName}`.toLowerCase().includes(searchQuery);
+    });
     if (purposeEntries.length > 0) {
         const purposeList = renderer_div({
             style: {
@@ -3489,7 +4214,12 @@ function renderIabPanel(container, options) {
     }
     const specialFeatureOptIns = iabState.specialFeatureOptIns || {};
     const specialFeatures = gvl?.specialFeatures || {};
-    const specialFeatureEntries = Object.entries(specialFeatureOptIns);
+    const specialFeatureEntries = Object.entries(specialFeatureOptIns).filter(([featureId])=>{
+        if (!searchQuery) return true;
+        const featureInfo = specialFeatures[featureId];
+        const featureName = featureInfo?.name || `Special Feature ${featureId}`;
+        return `${featureId} ${featureName}`.toLowerCase().includes(searchQuery);
+    });
     if (specialFeatureEntries.length > 0) {
         const specialFeatureList = renderer_div({
             style: {
@@ -3517,7 +4247,12 @@ function renderIabPanel(container, options) {
     }
     const vendorConsents = iabState.vendorConsents || {};
     const vendors = gvl?.vendors || {};
-    const vendorEntries = Object.entries(vendorConsents);
+    const vendorEntries = Object.entries(vendorConsents).filter(([vendorId])=>{
+        if (!searchQuery) return true;
+        const vendorInfo = vendors[vendorId];
+        const vendorName = vendorInfo?.name || `Vendor ${vendorId}`;
+        return `${vendorId} ${vendorName}`.toLowerCase().includes(searchQuery);
+    });
     const iabVendors = [];
     const customVendors = [];
     for (const [vendorId, consent] of vendorEntries){
@@ -3643,7 +4378,7 @@ function createPurposeRow(id, name, consent, onChange, ariaKind = 'purpose') {
             borderBottom: '1px solid var(--c15t-border)'
         },
         children: [
-            span({
+            renderer_span({
                 style: {
                     color: 'var(--c15t-text)',
                     overflow: 'hidden',
@@ -3697,7 +4432,7 @@ function createVendorRow(id, name, consent, type, onChange) {
                     marginRight: '8px'
                 },
                 children: [
-                    'custom' === type ? span({
+                    'custom' === type ? renderer_span({
                         style: {
                             fontSize: '9px',
                             padding: '1px 4px',
@@ -3708,7 +4443,7 @@ function createVendorRow(id, name, consent, type, onChange) {
                         },
                         text: 'CUSTOM'
                     }) : null,
-                    span({
+                    renderer_span({
                         style: {
                             color: 'var(--c15t-text)',
                             overflow: 'hidden',
@@ -3740,23 +4475,19 @@ function renderLocationPanel(container, options) {
     const { getState, onApplyOverrides, onClearOverrides } = options;
     clearElement(container);
     const state = getState();
-    if (!state) return void container.appendChild(renderer_div({
-        style: {
-            padding: '24px',
-            textAlign: 'center',
-            color: 'var(--c15t-text-muted)',
-            fontSize: 'var(--c15t-devtools-font-size-sm)'
-        },
-        text: 'Store not connected'
-    }));
+    if (!state) return void container.appendChild(createDisconnectedState());
     const locationInfo = state.locationInfo;
     const overrides = state.overrides;
     const translationConfig = state.translationConfig;
+    const initData = state.lastBannerFetchData;
+    const activePolicy = initData?.policy;
+    const policyDecision = initData?.policyDecision;
+    const initSource = formatInitSource(state.initDataSource, state.initDataSourceDetail);
     const gridItems = [
         createCompactInfoCard('Country', locationInfo?.countryCode || '—'),
         createCompactInfoCard('Region', locationInfo?.regionCode || '—'),
-        createCompactInfoCard('Jurisdiction', locationInfo?.jurisdiction || '—'),
-        createCompactInfoCard('Language', translationConfig?.defaultLanguage || '—')
+        createCompactInfoCard('Language', translationConfig?.defaultLanguage || '—'),
+        createCompactInfoCard('Init Source', initSource)
     ];
     gridItems.push(createCompactInfoCard('GPC', getEffectiveGpcLabel(overrides?.gpc)));
     if (state.model) gridItems.push(createCompactInfoCard('Model', getModelLabel(state.model)));
@@ -3764,7 +4495,6 @@ function renderLocationPanel(container, options) {
         columns: 3,
         children: gridItems
     });
-    container.appendChild(locationGrid);
     const initialDraft = getDraftFromOverrides(overrides);
     let appliedOverrides = normalizeOverrideDraft(initialDraft);
     let isSubmitting = false;
@@ -3788,7 +4518,7 @@ function renderLocationPanel(container, options) {
         selectOptions: GPC_OPTIONS,
         value: initialDraft.gpc
     });
-    const formStatus = span({
+    const formStatus = renderer_span({
         className: styles_components_module.overrideStatus,
         text: 'In sync'
     });
@@ -3834,7 +4564,7 @@ function renderLocationPanel(container, options) {
         title: 'Override Settings',
         children: [
             overrideFieldsGrid,
-            span({
+            renderer_span({
                 className: styles_components_module.overrideHint,
                 text: 'GPC override only affects opt-out or unregulated jurisdictions.'
             }),
@@ -3855,6 +4585,12 @@ function renderLocationPanel(container, options) {
         ]
     });
     container.appendChild(overrideSection);
+    container.appendChild(locationGrid);
+    container.appendChild(createActivePolicySummarySection({
+        policy: activePolicy,
+        policyDecision,
+        policySnapshotToken: initData?.policySnapshotToken
+    }));
     countryField.control.addEventListener('change', updateFormState);
     regionField.control.addEventListener('input', updateFormState);
     languageField.control.addEventListener('input', updateFormState);
@@ -3922,7 +4658,7 @@ function createOverrideInput(options) {
         element: renderer_div({
             className: styles_components_module.overrideField,
             children: [
-                span({
+                renderer_span({
                     className: styles_components_module.overrideLabel,
                     text: label
                 }),
@@ -3943,7 +4679,7 @@ function createOverrideSelect(options) {
         element: renderer_div({
             className: styles_components_module.overrideField,
             children: [
-                span({
+                renderer_span({
                     className: styles_components_module.overrideLabel,
                     text: label
                 }),
@@ -4143,35 +4879,320 @@ function getModelLabel(model) {
             return 'None';
     }
 }
-function createCompactInfoCard(label, value) {
-    return renderer_div({
-        className: styles_components_module.gridCard ?? '',
-        style: {
-            padding: '6px 8px',
-            minHeight: 'auto',
-            flexDirection: 'column',
-            alignItems: 'flex-start',
-            gap: '1px'
-        },
+function createActivePolicySummarySection(options) {
+    const { policy, policyDecision, policySnapshotToken } = options;
+    if (!policy && !policyDecision) return createSection({
+        title: 'Active Policy',
         children: [
-            span({
+            renderer_div({
                 style: {
-                    fontSize: 'var(--c15t-devtools-font-size-xs)',
+                    padding: '10px 12px',
+                    fontSize: 'var(--c15t-devtools-font-size-sm)',
                     color: 'var(--c15t-text-muted)'
                 },
-                text: label
-            }),
-            span({
-                style: {
-                    fontSize: 'var(--c15t-font-size-sm)',
-                    fontWeight: '500',
-                    fontFamily: 'ui-monospace, monospace'
-                },
+                text: 'No active policy matched.'
+            })
+        ]
+    });
+    const cards = [
+        createCompactInfoCard('Policy ID', policy?.id ?? policyDecision?.policyId ?? '—'),
+        createCompactInfoCard('Matched By', policyDecision?.matchedBy ?? '—'),
+        createCompactInfoCard('Snapshot Token', policySnapshotToken ? 'present' : 'missing')
+    ];
+    return createSection({
+        title: 'Active Policy',
+        children: [
+            renderer_div({
+                style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+                    gap: 'var(--c15t-space-sm, 0.5rem)'
+                },
+                children: cards
+            }),
+            renderer_span({
+                className: styles_components_module.overrideHint,
+                text: 'Open the Policy tab for full policy-pack diagnostics.'
+            })
+        ]
+    });
+}
+function createCompactInfoCard(label, value) {
+    return renderer_div({
+        className: styles_components_module.gridCard ?? '',
+        style: {
+            padding: '8px 10px',
+            minHeight: 'auto',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            gap: '2px'
+        },
+        children: [
+            renderer_span({
+                style: {
+                    fontSize: 'var(--c15t-devtools-font-size-xs)',
+                    color: 'var(--c15t-text-muted)'
+                },
+                text: label
+            }),
+            renderer_span({
+                style: {
+                    fontSize: 'var(--c15t-font-size-sm)',
+                    fontWeight: '500',
+                    fontFamily: 'ui-monospace, monospace'
+                },
+                text: value
+            })
+        ]
+    });
+}
+function renderPolicyPanel(container, options) {
+    const { getState } = options;
+    clearElement(container);
+    const state = getState();
+    if (!state) return void container.appendChild(createDisconnectedState());
+    const initData = state.lastBannerFetchData;
+    const activePolicy = initData?.policy;
+    const policyDecision = initData?.policyDecision;
+    const initSource = formatInitSource(state.initDataSource, state.initDataSourceDetail);
+    container.appendChild(createMatchTraceSection({
+        policyDecision,
+        policyId: activePolicy?.id ?? policyDecision?.policyId
+    }));
+    if (!activePolicy && !policyDecision) return void container.appendChild(createSection({
+        title: 'Policy',
+        children: [
+            renderer_div({
+                style: {
+                    padding: '10px 12px',
+                    fontSize: 'var(--c15t-devtools-font-size-sm)',
+                    color: 'var(--c15t-text-muted)'
+                },
+                text: 'No active policy matched for this request.'
+            }),
+            createHint(`Init Source: ${initSource}`)
+        ]
+    }));
+    container.appendChild(createSection({
+        title: 'Policy',
+        children: [
+            policy_createGrid(3, [
+                createCard('ID', activePolicy?.id ?? policyDecision?.policyId ?? '—'),
+                createCard('Model', policy_getModelLabel(activePolicy?.model)),
+                createCard('Scope', getScopeModeLabel(activePolicy?.consent?.scopeMode ?? state.policyScopeMode)),
+                createCard('Categories', formatList(state.policyCategories ?? activePolicy?.consent?.categories)),
+                createCard('Preselected', formatList(activePolicy?.consent?.preselectedCategories)),
+                createCard('Expiry', 'number' == typeof activePolicy?.consent?.expiryDays ? `${activePolicy.consent.expiryDays}d` : '—')
+            ]),
+            createHint(`${initSource} · ${formatFingerprint(policyDecision?.fingerprint)}`)
+        ]
+    }));
+    const uiMode = activePolicy?.ui?.mode;
+    if (uiMode && 'none' !== uiMode) {
+        const bannerCards = buildSurfaceCards('Banner', activePolicy?.ui?.banner, state.policyBanner);
+        const dialogCards = buildSurfaceCards('Dialog', activePolicy?.ui?.dialog, state.policyDialog);
+        if (bannerCards.length > 0 || dialogCards.length > 0) container.appendChild(createSection({
+            title: `UI · ${uiMode}`,
+            children: [
+                policy_createGrid(3, [
+                    ...bannerCards,
+                    ...dialogCards
+                ])
+            ]
+        }));
+    }
+    const proofLabel = formatProofSummary(activePolicy?.proof);
+    const snapshotLabel = initData?.policySnapshotToken ? 'present' : 'missing';
+    container.appendChild(createSection({
+        title: 'Proof & Snapshot',
+        children: [
+            policy_createGrid(3, [
+                createCard('Proof', proofLabel),
+                createCard('Snapshot', snapshotLabel),
+                createCard('I18n', activePolicy?.i18n?.messageProfile ?? activePolicy?.i18n?.language ?? '—')
+            ])
+        ]
+    }));
+}
+function buildSurfaceCards(prefix, policySurface, storeSurface) {
+    const policyLayout = Array.isArray(policySurface?.layout) && 0 === policySurface.layout.length ? null : policySurface?.layout ?? null;
+    const storeLayout = Array.isArray(storeSurface.layout) && 0 === storeSurface.layout.length ? null : storeSurface.layout ?? null;
+    const actions = formatList(policySurface?.allowedActions ?? storeSurface.allowedActions);
+    const primary = policySurface?.primaryAction ?? storeSurface.primaryAction ?? null;
+    const layout = policyLayout ?? storeLayout;
+    const direction = policySurface?.direction ?? storeSurface.direction ?? null;
+    const profile = policySurface?.uiProfile ?? storeSurface.uiProfile ?? null;
+    const scrollLock = policySurface?.scrollLock ?? storeSurface.scrollLock ?? null;
+    if ('—' === actions && !primary && !layout && !direction && !profile && null === scrollLock) return [];
+    const cards = [
+        createCard(`${prefix} Actions`, actions)
+    ];
+    if (primary) cards.push(createCard(`${prefix} Primary`, primary));
+    if (layout) cards.push(createCard(`${prefix} Layout`, Array.isArray(layout) ? layout.map((group)=>Array.isArray(group) ? `[${group.join(', ')}]` : group).join(' / ') : layout));
+    if (direction) cards.push(createCard(`${prefix} Direction`, direction));
+    if (profile) cards.push(createCard(`${prefix} Profile`, profile));
+    if (null !== scrollLock) cards.push(createCard(`${prefix} Scroll Lock`, scrollLock ? 'on' : 'off'));
+    return cards;
+}
+function createMatchTraceSection(options) {
+    const { policyDecision, policyId } = options;
+    const entries = buildTraceEntries(policyDecision, policyId);
+    return createSection({
+        title: 'Match Trace',
+        children: [
+            renderer_div({
+                style: {
+                    display: 'grid',
+                    gridTemplateColumns: '1fr',
+                    gap: '4px'
+                },
+                children: entries.map((entry)=>renderer_div({
+                        className: styles_components_module.gridCard ?? '',
+                        style: {
+                            padding: '6px 10px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            gap: '10px'
+                        },
+                        children: [
+                            renderer_span({
+                                style: {
+                                    fontSize: 'var(--c15t-devtools-font-size-xs)',
+                                    color: 'var(--c15t-text-muted)',
+                                    fontFamily: 'ui-monospace, monospace'
+                                },
+                                text: entry.step
+                            }),
+                            renderer_span({
+                                style: {
+                                    fontSize: 'var(--c15t-devtools-font-size-xs)',
+                                    fontFamily: 'ui-monospace, monospace'
+                                },
+                                text: entry.result
+                            })
+                        ]
+                    }))
+            }),
+            createHint('region → country → default · fallback on geo failure · Simulate via Location tab')
+        ]
+    });
+}
+function buildTraceEntries(decision, policyId) {
+    if (!decision) return [
+        {
+            step: 'decision metadata',
+            result: 'UNAVAILABLE'
+        }
+    ];
+    const country = decision.country ?? 'n/a';
+    const regionKey = decision.country && decision.region ? `${decision.country}-${decision.region}` : 'n/a';
+    const resolved = policyId ?? decision.policyId ?? 'unknown';
+    const matched = decision.matchedBy;
+    return [
+        {
+            step: `region(${regionKey})`,
+            result: 'region' === matched ? `MATCH → ${resolved}` : 'MISS'
+        },
+        {
+            step: `country(${country})`,
+            result: 'country' === matched ? `MATCH → ${resolved}` : 'region' === matched ? 'SKIPPED' : 'MISS'
+        },
+        {
+            step: 'fallback(geo-fail)',
+            result: 'fallback' === matched ? `MATCH → ${resolved}` : 'SKIPPED'
+        },
+        {
+            step: 'default(catch-all)',
+            result: 'default' === matched ? `MATCH → ${resolved}` : 'SKIPPED'
+        }
+    ];
+}
+function policy_getModelLabel(model) {
+    switch(model){
+        case 'opt-in':
+            return 'Opt-In';
+        case 'opt-out':
+            return 'Opt-Out';
+        case 'iab':
+            return 'IAB TCF';
+        default:
+            return 'None';
+    }
+}
+function getScopeModeLabel(mode) {
+    switch(mode){
+        case 'strict':
+            return 'Strict';
+        case 'permissive':
+            return 'Permissive';
+        default:
+            return '—';
+    }
+}
+function formatList(items) {
+    if (!items || 0 === items.length) return '—';
+    if (items.includes('*')) return '* (all)';
+    return items.join(', ');
+}
+function formatProofSummary(proof) {
+    if (!proof) return '—';
+    const parts = [];
+    if (proof.storeIp) parts.push('IP');
+    if (proof.storeUserAgent) parts.push('UA');
+    if (proof.storeLanguage) parts.push('Lang');
+    return parts.length > 0 ? parts.join(', ') : 'none';
+}
+function formatFingerprint(fingerprint) {
+    if (!fingerprint) return 'no fingerprint';
+    if (fingerprint.length <= 12) return fingerprint;
+    return `${fingerprint.slice(0, 8)}…${fingerprint.slice(-4)}`;
+}
+function createCard(label, value) {
+    return renderer_div({
+        className: styles_components_module.gridCard ?? '',
+        style: {
+            padding: '8px 10px',
+            minHeight: 'auto',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            gap: '2px'
+        },
+        children: [
+            renderer_span({
+                style: {
+                    fontSize: 'var(--c15t-devtools-font-size-xs)',
+                    color: 'var(--c15t-text-muted)'
+                },
+                text: label
+            }),
+            renderer_span({
+                style: {
+                    fontSize: 'var(--c15t-font-size-sm)',
+                    fontWeight: '500',
+                    fontFamily: 'ui-monospace, monospace'
+                },
                 text: value
             })
         ]
     });
 }
+function policy_createGrid(columns, children) {
+    return renderer_div({
+        style: {
+            display: 'grid',
+            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+            gap: 'var(--c15t-space-sm, 0.5rem)'
+        },
+        children
+    });
+}
+function createHint(text) {
+    return renderer_span({
+        className: styles_components_module.overrideHint,
+        text
+    });
+}
 const dismissedResources = new Set();
 function scanDOM(state) {
     const results = [];
@@ -4337,21 +5358,21 @@ function createResourceRow(resource, variant, onDismiss) {
             borderBottom: '1px solid var(--c15t-border)'
         },
         children: [
-            span({
+            renderer_span({
                 style: {
                     color: iconColor,
                     flexShrink: '0'
                 },
                 text: icon
             }),
-            span({
+            renderer_span({
                 style: {
                     color: 'var(--c15t-text-muted)',
                     flexShrink: '0'
                 },
                 text: `${resource.type}:`
             }),
-            span({
+            renderer_span({
                 style: {
                     fontWeight: '500',
                     color: 'var(--c15t-text)',
@@ -4397,23 +5418,37 @@ const CODE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" f
   <polyline points="16 18 22 12 16 6"></polyline>
   <polyline points="8 6 2 12 8 18"></polyline>
 </svg>`;
+const scriptsSearchByContainer = new WeakMap();
 function renderScriptsPanel(container, options) {
     const { getState, getEvents } = options;
     clearElement(container);
     const state = getState();
-    if (!state) return void container.appendChild(renderer_div({
-        style: {
-            padding: '24px',
-            textAlign: 'center',
-            color: 'var(--c15t-text-muted)',
-            fontSize: 'var(--c15t-devtools-font-size-sm)'
-        },
-        text: 'Store not connected'
-    }));
+    if (!state) return void container.appendChild(createDisconnectedState());
     const scripts = state.scripts || [];
     const loadedScripts = state.loadedScripts || {};
     const networkBlocker = state.networkBlocker;
     const events = getEvents?.() ?? [];
+    const searchQuery = scriptsSearchByContainer.get(container) ?? '';
+    const filteredScripts = scripts.filter((script)=>{
+        if (!searchQuery) return true;
+        const category = 'string' == typeof script.category ? script.category : JSON.stringify(script.category);
+        return `${script.id} ${category}`.toLowerCase().includes(searchQuery);
+    });
+    if (scripts.length > 4) container.appendChild(createSection({
+        title: 'Filter',
+        children: [
+            createInput({
+                value: searchQuery,
+                placeholder: "Filter scripts…",
+                ariaLabel: "Filter scripts",
+                small: true,
+                onInput: (value)=>{
+                    scriptsSearchByContainer.set(container, value.trim().toLowerCase());
+                    renderScriptsPanel(container, options);
+                }
+            })
+        ]
+    }));
     if (0 === scripts.length) {
         const scriptsSection = createSection({
             title: 'Configured Scripts',
@@ -4430,10 +5465,19 @@ function renderScriptsPanel(container, options) {
             style: {
                 display: 'flex',
                 flexDirection: 'column',
-                gap: '4px'
+                borderTop: '1px solid var(--c15t-border)',
+                borderBottom: '1px solid var(--c15t-border)'
             }
         });
-        for (const script of scripts){
+        if (0 === filteredScripts.length) scriptsList.appendChild(renderer_div({
+            style: {
+                padding: '10px 0',
+                fontSize: 'var(--c15t-devtools-font-size-xs)',
+                color: 'var(--c15t-text-muted)'
+            },
+            text: "No matching scripts"
+        }));
+        for (const script of filteredScripts){
             const scriptId = script.id;
             const isLoaded = true === loadedScripts[scriptId];
             const category = script.category;
@@ -4457,17 +5501,64 @@ function renderScriptsPanel(container, options) {
                 text: status.charAt(0).toUpperCase() + status.slice(1),
                 variant: statusVariant
             });
-            const item = createListItem({
-                title: scriptId,
-                description: `Category: ${categoryDisplay}`,
-                actions: [
-                    badge
+            const row = renderer_div({
+                style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: '8px',
+                    padding: '8px 0',
+                    borderBottom: '1px solid var(--c15t-border)'
+                },
+                children: [
+                    renderer_div({
+                        style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '2px',
+                            minWidth: '0',
+                            flex: '1'
+                        },
+                        children: [
+                            renderer_div({
+                                style: {
+                                    fontSize: 'var(--c15t-font-size-sm)',
+                                    fontWeight: '500',
+                                    color: 'var(--c15t-text)',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap'
+                                },
+                                text: scriptId
+                            }),
+                            renderer_div({
+                                style: {
+                                    fontSize: 'var(--c15t-devtools-font-size-xs)',
+                                    color: 'var(--c15t-text-muted)',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap'
+                                },
+                                text: `Category: ${categoryDisplay}`
+                            })
+                        ]
+                    }),
+                    renderer_div({
+                        style: {
+                            flexShrink: '0'
+                        },
+                        children: [
+                            badge
+                        ]
+                    })
                 ]
             });
-            scriptsList.appendChild(item);
+            scriptsList.appendChild(row);
         }
+        const lastRow = scriptsList.lastElementChild;
+        if (lastRow) lastRow.style.borderBottom = 'none';
         const scriptsSection = createSection({
-            title: `Configured Scripts (${scripts.length})`,
+            title: `Configured Scripts (${filteredScripts.length}/${scripts.length})`,
             children: [
                 scriptsList
             ]
@@ -4609,53 +5700,6 @@ function scripts_truncateText(text, maxLength) {
     if (text.length <= maxLength) return text;
     return `${text.slice(0, maxLength - 3)}...`;
 }
-const DEVTOOLS_OVERRIDES_STORAGE_KEY = 'c15t-devtools-overrides';
-function normalizeStringValue(value) {
-    if ('string' != typeof value) return;
-    const normalized = value.trim();
-    return normalized.length > 0 ? normalized : void 0;
-}
-function normalizeBooleanValue(value) {
-    return 'boolean' == typeof value ? value : void 0;
-}
-function normalizeOverrides(value) {
-    if (!value || 'object' != typeof value) return null;
-    const source = value;
-    const overrides = {
-        country: normalizeStringValue(source.country),
-        region: normalizeStringValue(source.region),
-        language: normalizeStringValue(source.language),
-        gpc: normalizeBooleanValue(source.gpc)
-    };
-    return hasPersistedOverrides(overrides) ? overrides : null;
-}
-function hasPersistedOverrides(overrides) {
-    return Boolean(overrides.country || overrides.region || overrides.language || void 0 !== overrides.gpc);
-}
-function loadPersistedOverrides(storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
-    if ('undefined' == typeof window) return null;
-    try {
-        const stored = localStorage.getItem(storageKey);
-        if (!stored) return null;
-        const parsed = JSON.parse(stored);
-        return normalizeOverrides(parsed);
-    } catch  {
-        return null;
-    }
-}
-function persistOverrides(overrides, storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
-    if ('undefined' == typeof window) return;
-    try {
-        if (!hasPersistedOverrides(overrides)) return void localStorage.removeItem(storageKey);
-        localStorage.setItem(storageKey, JSON.stringify(overrides));
-    } catch  {}
-}
-function clearPersistedOverrides(storageKey = DEVTOOLS_OVERRIDES_STORAGE_KEY) {
-    if ('undefined' == typeof window) return;
-    try {
-        localStorage.removeItem(storageKey);
-    } catch  {}
-}
 const STORAGE_KEYS = {
     C15T: 'c15t',
     PENDING_SYNC: 'c15t:pending-consent-sync',
@@ -4692,52 +5736,290 @@ async function resetAllConsents(store, stateManager) {
         message: 'All consents reset (storage cleared)'
     });
 }
-const STORAGE_KEY = 'c15t-devtools-events';
-function loadPersistedEvents() {
-    if ('undefined' == typeof window) return [];
-    try {
-        const stored = sessionStorage.getItem(STORAGE_KEY);
-        if (stored) return JSON.parse(stored);
-    } catch  {}
-    return [];
-}
-function persistEvents(events) {
-    if ('undefined' == typeof window) return;
-    try {
-        sessionStorage.setItem(STORAGE_KEY, JSON.stringify(events));
-    } catch  {}
-}
-function createStateManager(initialState = {}) {
-    const persistedEvents = loadPersistedEvents();
-    let state = {
-        isOpen: false,
-        activeTab: 'location',
-        position: 'bottom-right',
-        isConnected: false,
-        eventLog: persistedEvents,
-        maxEventLogSize: 100,
-        ...initialState
+function createPanelRenderer(config) {
+    const { storeConnector, stateManager, enableEventLogging = true, onPersistOverrides, onClearPersistedOverrides, onCopyState, onExportDebugBundle } = config;
+    const getStoreState = ()=>storeConnector.getState();
+    const logEvent = (type, message, data)=>{
+        if (enableEventLogging) stateManager.addEvent({
+            type,
+            message,
+            data
+        });
     };
-    const listeners = new Set();
-    function notify(prevState) {
-        for (const listener of listeners)listener(state, prevState);
-    }
-    function setState(partial) {
-        const prevState = state;
-        state = {
-            ...state,
-            ...partial
-        };
-        notify(prevState);
-    }
-    return {
-        getState: ()=>state,
-        subscribe: (listener)=>{
-            listeners.add(listener);
-            return ()=>{
-                listeners.delete(listener);
-            };
-        },
+    const resetConsents = async ()=>{
+        const store = storeConnector.getStore();
+        if (store) await resetAllConsents(store, enableEventLogging ? stateManager : void 0);
+    };
+    const renderPanel = (container, tab)=>{
+        switch(tab){
+            case 'consents':
+                renderConsentsPanel(container, {
+                    getState: getStoreState,
+                    onConsentChange: (name, value)=>{
+                        const store = storeConnector.getStore();
+                        if (store) {
+                            const consentName = String(name);
+                            store.getState().setSelectedConsent(consentName, value);
+                            logEvent('info', `${consentName} toggled to ${value} (not saved)`, {
+                                name: consentName,
+                                value
+                            });
+                        }
+                    },
+                    onSave: ()=>{
+                        const store = storeConnector.getStore();
+                        if (store) {
+                            store.getState().saveConsents('custom');
+                            logEvent('consent_save', 'Saved consent preferences');
+                        }
+                    },
+                    onAcceptAll: ()=>{
+                        const store = storeConnector.getStore();
+                        if (store) {
+                            store.getState().saveConsents('all');
+                            logEvent('consent_save', 'Accepted all consents');
+                        }
+                    },
+                    onRejectAll: ()=>{
+                        const store = storeConnector.getStore();
+                        if (store) {
+                            store.getState().saveConsents('necessary');
+                            logEvent('consent_save', 'Rejected all optional consents');
+                        }
+                    },
+                    onReset: resetConsents
+                });
+                break;
+            case 'location':
+                renderLocationPanel(container, {
+                    getState: getStoreState,
+                    onApplyOverrides: async (overrides)=>{
+                        const store = storeConnector.getStore();
+                        if (store) {
+                            await store.getState().setOverrides({
+                                country: overrides.country,
+                                region: overrides.region,
+                                language: overrides.language,
+                                gpc: overrides.gpc
+                            });
+                            logEvent('info', 'Overrides updated', {
+                                country: overrides.country,
+                                region: overrides.region,
+                                language: overrides.language,
+                                gpc: overrides.gpc
+                            });
+                            onPersistOverrides?.({
+                                country: overrides.country,
+                                region: overrides.region,
+                                language: overrides.language,
+                                gpc: overrides.gpc
+                            });
+                        }
+                    },
+                    onClearOverrides: async ()=>{
+                        const store = storeConnector.getStore();
+                        if (store) {
+                            await store.getState().setOverrides({
+                                country: void 0,
+                                region: void 0,
+                                language: void 0,
+                                gpc: void 0
+                            });
+                            logEvent('info', 'Overrides cleared');
+                            onClearPersistedOverrides?.();
+                        }
+                    }
+                });
+                break;
+            case 'policy':
+                renderPolicyPanel(container, {
+                    getState: getStoreState
+                });
+                break;
+            case "scripts":
+                renderScriptsPanel(container, {
+                    getState: getStoreState,
+                    getEvents: ()=>stateManager.getState().eventLog
+                });
+                break;
+            case 'iab':
+                renderIabPanel(container, {
+                    getState: getStoreState,
+                    onSetPurposeConsent: (purposeId, value)=>{
+                        const iab = storeConnector.getStore()?.getState().iab;
+                        if (!iab) return;
+                        iab.setPurposeConsent(purposeId, value);
+                        logEvent('iab', `IAB purpose ${purposeId} set to ${value}`);
+                    },
+                    onSetVendorConsent: (vendorId, value)=>{
+                        const iab = storeConnector.getStore()?.getState().iab;
+                        if (!iab) return;
+                        iab.setVendorConsent(vendorId, value);
+                        logEvent('iab', `IAB vendor ${vendorId} set to ${value}`);
+                    },
+                    onSetSpecialFeatureOptIn: (featureId, value)=>{
+                        const iab = storeConnector.getStore()?.getState().iab;
+                        if (!iab) return;
+                        iab.setSpecialFeatureOptIn(featureId, value);
+                        logEvent('iab', `IAB feature ${featureId} set to ${value}`);
+                    },
+                    onAcceptAll: ()=>{
+                        const iab = storeConnector.getStore()?.getState().iab;
+                        if (!iab) return;
+                        iab.acceptAll();
+                        logEvent('iab', 'IAB accept all selected');
+                    },
+                    onRejectAll: ()=>{
+                        const iab = storeConnector.getStore()?.getState().iab;
+                        if (!iab) return;
+                        iab.rejectAll();
+                        logEvent('iab', 'IAB reject all selected');
+                    },
+                    onSave: ()=>{
+                        const iab = storeConnector.getStore()?.getState().iab;
+                        if (!iab) return;
+                        iab.save().then(()=>logEvent('iab', 'IAB preferences saved')).catch((error)=>{
+                            logEvent('error', `Failed to save IAB preferences: ${String(error)}`);
+                        });
+                    },
+                    onReset: resetConsents
+                });
+                break;
+            case 'events':
+                renderEventsPanel(container, {
+                    getEvents: ()=>stateManager.getState().eventLog,
+                    onClear: ()=>{
+                        stateManager.clearEventLog();
+                        logEvent('info', 'Event log cleared');
+                    }
+                });
+                break;
+            case 'actions':
+                renderActionsPanel(container, {
+                    getState: getStoreState,
+                    onResetConsents: resetConsents,
+                    onRefetchBanner: async ()=>{
+                        const store = storeConnector.getStore();
+                        if (store) {
+                            await store.getState().initConsentManager();
+                            logEvent('info', 'Banner data refetched');
+                        }
+                    },
+                    onShowBanner: ()=>{
+                        const store = storeConnector.getStore();
+                        if (store) {
+                            store.getState().setActiveUI('banner', {
+                                force: true
+                            });
+                            logEvent('info', 'Banner shown');
+                        }
+                    },
+                    onOpenPreferences: ()=>{
+                        const store = storeConnector.getStore();
+                        if (store) {
+                            store.getState().setActiveUI('dialog');
+                            logEvent('info', 'Preferences dialog opened');
+                        }
+                    },
+                    onCopyState: ()=>{
+                        const state = getStoreState();
+                        if (state) if (onCopyState) {
+                            const result = onCopyState(state);
+                            if (result instanceof Promise) result.then((ok)=>{
+                                logEvent(ok ? 'info' : 'error', ok ? 'State copied to clipboard' : 'Failed to copy state');
+                            }).catch(()=>{
+                                logEvent('error', 'Failed to copy state');
+                            });
+                            else logEvent(result ? 'info' : 'error', result ? 'State copied to clipboard' : 'Failed to copy state');
+                        } else navigator.clipboard.writeText(JSON.stringify(state, null, 2)).then(()=>{
+                            logEvent('info', 'State copied to clipboard');
+                        }).catch(()=>{
+                            logEvent('error', 'Failed to copy state');
+                        });
+                    },
+                    onExportDebugBundle: onExportDebugBundle ? ()=>{
+                        try {
+                            onExportDebugBundle();
+                            logEvent('info', 'Debug bundle exported');
+                        } catch  {
+                            logEvent('error', 'Failed to export debug bundle');
+                        }
+                    } : void 0
+                });
+                break;
+        }
+    };
+    return {
+        renderPanel,
+        getStoreState,
+        resetConsents
+    };
+}
+const STORAGE_KEY = 'c15t-devtools-events';
+const ACTIVE_TAB_STORAGE_KEY = 'c15t-devtools-active-tab';
+function loadPersistedEvents() {
+    if ('undefined' == typeof window) return [];
+    try {
+        const stored = sessionStorage.getItem(STORAGE_KEY);
+        if (stored) return JSON.parse(stored);
+    } catch  {}
+    return [];
+}
+function persistEvents(events) {
+    if ('undefined' == typeof window) return;
+    try {
+        sessionStorage.setItem(STORAGE_KEY, JSON.stringify(events));
+    } catch  {}
+}
+function isDevToolsTab(value) {
+    return 'consents' === value || 'location' === value || 'policy' === value || "scripts" === value || 'iab' === value || 'events' === value || 'actions' === value;
+}
+function loadPersistedActiveTab() {
+    if ('undefined' == typeof window) return null;
+    try {
+        const stored = localStorage.getItem(ACTIVE_TAB_STORAGE_KEY);
+        if (isDevToolsTab(stored)) return stored;
+    } catch  {}
+    return null;
+}
+function persistActiveTab(tab) {
+    if ('undefined' == typeof window) return;
+    try {
+        localStorage.setItem(ACTIVE_TAB_STORAGE_KEY, tab);
+    } catch  {}
+}
+function createStateManager(initialState = {}) {
+    const persistedEvents = loadPersistedEvents();
+    const persistedActiveTab = loadPersistedActiveTab();
+    let state = {
+        isOpen: false,
+        activeTab: persistedActiveTab ?? 'location',
+        position: 'bottom-right',
+        isConnected: false,
+        eventLog: persistedEvents,
+        maxEventLogSize: 100,
+        ...initialState
+    };
+    const listeners = new Set();
+    function notify(prevState) {
+        for (const listener of listeners)listener(state, prevState);
+    }
+    function setState(partial) {
+        const prevState = state;
+        state = {
+            ...state,
+            ...partial
+        };
+        notify(prevState);
+    }
+    return {
+        getState: ()=>state,
+        subscribe: (listener)=>{
+            listeners.add(listener);
+            return ()=>{
+                listeners.delete(listener);
+            };
+        },
         setOpen: (isOpen)=>{
             setState({
                 isOpen
@@ -4752,6 +6034,7 @@ function createStateManager(initialState = {}) {
             setState({
                 activeTab: tab
             });
+            persistActiveTab(tab);
         },
         setPosition: (position)=>{
             setState({
@@ -4797,22 +6080,52 @@ function createStoreConnector(options = {}) {
     let reconnectAttempts = 0;
     let hasNotifiedDisconnect = false;
     const listeners = new Set();
+    const diagnosticsListeners = new Set();
+    let diagnostics = {
+        namespace,
+        reconnectAttempts: 0,
+        nextRetryInMs: null,
+        lastError: null,
+        isPolling: false,
+        disconnectNotified: false
+    };
     const INITIAL_RETRY_DELAY_MS = 100;
     const MAX_RETRY_DELAY_MS = 2000;
     const DISCONNECT_NOTIFY_ATTEMPTS = 5;
+    function updateDiagnostics(partial, notify = true) {
+        diagnostics = {
+            ...diagnostics,
+            ...partial
+        };
+        if (!notify) return;
+        for (const listener of diagnosticsListeners)listener(diagnostics);
+    }
     function clearReconnectTimer() {
         if (reconnectTimeout) {
             clearTimeout(reconnectTimeout);
             reconnectTimeout = null;
+            updateDiagnostics({
+                isPolling: false,
+                nextRetryInMs: null
+            });
         }
     }
     function resetReconnectState() {
         reconnectAttempts = 0;
         hasNotifiedDisconnect = false;
+        updateDiagnostics({
+            reconnectAttempts: 0,
+            nextRetryInMs: null,
+            lastError: null,
+            disconnectNotified: false
+        });
     }
     function notifyDisconnectedOnce() {
         if (hasNotifiedDisconnect) return;
         hasNotifiedDisconnect = true;
+        updateDiagnostics({
+            disconnectNotified: true
+        });
         onDisconnect?.();
     }
     function tryConnect() {
@@ -4833,16 +6146,31 @@ function createStoreConnector(options = {}) {
             onConnect?.(currentState, store);
             clearReconnectTimer();
             resetReconnectState();
+            updateDiagnostics({
+                lastError: null
+            });
             return true;
         }
+        updateDiagnostics({
+            lastError: `Store "${namespace}" not found on window`
+        });
         return false;
     }
     function scheduleReconnect(immediate = false) {
         if (store || reconnectTimeout) return;
         const delay = immediate ? 0 : Math.min(INITIAL_RETRY_DELAY_MS * 2 ** Math.min(reconnectAttempts, 5), MAX_RETRY_DELAY_MS);
+        updateDiagnostics({
+            isPolling: true,
+            nextRetryInMs: delay,
+            reconnectAttempts
+        });
         reconnectTimeout = setTimeout(()=>{
             reconnectTimeout = null;
             reconnectAttempts++;
+            updateDiagnostics({
+                reconnectAttempts,
+                nextRetryInMs: null
+            });
             if (tryConnect()) return;
             if (reconnectAttempts >= DISCONNECT_NOTIFY_ATTEMPTS) notifyDisconnectedOnce();
             scheduleReconnect();
@@ -4864,6 +6192,14 @@ function createStoreConnector(options = {}) {
                 listeners.delete(listener);
             };
         },
+        getDiagnostics: ()=>diagnostics,
+        subscribeDiagnostics: (listener)=>{
+            diagnosticsListeners.add(listener);
+            listener(diagnostics);
+            return ()=>{
+                diagnosticsListeners.delete(listener);
+            };
+        },
         retryConnection: ()=>{
             if (store) return;
             resetReconnectState();
@@ -4877,6 +6213,7 @@ function createStoreConnector(options = {}) {
             }
             store = null;
             listeners.clear();
+            diagnosticsListeners.clear();
         }
     };
 }
@@ -4889,6 +6226,133 @@ function getC15tStore(namespace = 'c15tStore') {
 function isC15tStoreAvailable(namespace = 'c15tStore') {
     return null !== getC15tStore(namespace);
 }
+const REGISTRY_KEY = '__c15tDevToolsInstrumentationRegistry';
+let fallbackRegistry = null;
+function getRegistry() {
+    if ('undefined' == typeof window) {
+        if (!fallbackRegistry) fallbackRegistry = new Map();
+        return fallbackRegistry;
+    }
+    const host = window;
+    const existing = host[REGISTRY_KEY];
+    if (existing) return existing;
+    const registry = new Map();
+    host[REGISTRY_KEY] = registry;
+    return registry;
+}
+function getBlockedRequestMessage(payload) {
+    const data = payload;
+    const method = 'string' == typeof data?.method ? data.method.toUpperCase() : 'REQUEST';
+    const url = 'string' == typeof data?.url ? data.url : 'unknown-url';
+    return `Network blocked: ${method} ${url}`;
+}
+function emitEvent(entry, event) {
+    for (const listener of entry.listeners)listener(event);
+}
+function ensureNetworkBlockerWrapped(entry) {
+    const blocker = entry.store.getState().networkBlocker;
+    if (!blocker) return;
+    if (blocker.onRequestBlocked === entry.wrappedNetworkBlockedCallback) return;
+    entry.originalNetworkBlockedCallback = blocker.onRequestBlocked;
+    entry.wrappedNetworkBlockedCallback = (payload)=>{
+        emitEvent(entry, {
+            type: 'network',
+            message: getBlockedRequestMessage(payload),
+            data: payload
+        });
+        if ('function' == typeof entry.originalNetworkBlockedCallback) entry.originalNetworkBlockedCallback(payload);
+    };
+    entry.store.getState().setNetworkBlocker({
+        ...blocker,
+        onRequestBlocked: entry.wrappedNetworkBlockedCallback
+    });
+}
+function restoreInstrumentation(entry) {
+    entry.stopWatchingStore?.();
+    entry.stopWatchingStore = null;
+    const state = entry.store.getState();
+    state.setCallback('onBannerFetched', entry.originalCallbacks.onBannerFetched);
+    state.setCallback('onConsentSet', entry.originalCallbacks.onConsentSet);
+    state.setCallback('onError', entry.originalCallbacks.onError);
+    state.setCallback('onBeforeConsentRevocationReload', entry.originalCallbacks.onBeforeConsentRevocationReload);
+    const blocker = state.networkBlocker;
+    if (blocker && blocker.onRequestBlocked === entry.wrappedNetworkBlockedCallback) state.setNetworkBlocker({
+        ...blocker,
+        onRequestBlocked: entry.originalNetworkBlockedCallback
+    });
+    entry.wrappedNetworkBlockedCallback = null;
+}
+function createInstrumentationEntry(store) {
+    const entry = {
+        store,
+        listeners: new Set(),
+        originalCallbacks: {
+            ...store.getState().callbacks
+        },
+        originalNetworkBlockedCallback: store.getState().networkBlocker?.onRequestBlocked,
+        wrappedNetworkBlockedCallback: null,
+        stopWatchingStore: null
+    };
+    store.getState().setCallback('onBannerFetched', (payload)=>{
+        const jurisdiction = payload.jurisdiction;
+        emitEvent(entry, {
+            type: 'info',
+            message: `Banner fetched: ${String(jurisdiction)}`,
+            data: payload
+        });
+        if ('function' == typeof entry.originalCallbacks.onBannerFetched) entry.originalCallbacks.onBannerFetched(payload);
+    });
+    store.getState().setCallback('onConsentSet', (payload)=>{
+        emitEvent(entry, {
+            type: 'consent_set',
+            message: 'Consent preferences updated',
+            data: payload
+        });
+        if ('function' == typeof entry.originalCallbacks.onConsentSet) entry.originalCallbacks.onConsentSet(payload);
+    });
+    store.getState().setCallback('onError', (payload)=>{
+        const errorMessage = payload.error;
+        emitEvent(entry, {
+            type: 'error',
+            message: `Error: ${String(errorMessage)}`,
+            data: payload
+        });
+        if ('function' == typeof entry.originalCallbacks.onError) entry.originalCallbacks.onError(payload);
+    });
+    store.getState().setCallback('onBeforeConsentRevocationReload', (payload)=>{
+        emitEvent(entry, {
+            type: 'info',
+            message: 'Consent revocation - page will reload',
+            data: payload
+        });
+        if ('function' == typeof entry.originalCallbacks.onBeforeConsentRevocationReload) entry.originalCallbacks.onBeforeConsentRevocationReload(payload);
+    });
+    ensureNetworkBlockerWrapped(entry);
+    entry.stopWatchingStore = store.subscribe(()=>{
+        ensureNetworkBlockerWrapped(entry);
+    });
+    return entry;
+}
+function registerStoreInstrumentation(options) {
+    const { namespace, store, onEvent } = options;
+    const registry = getRegistry();
+    let entry = registry.get(namespace);
+    if (!entry || entry.store !== store) {
+        if (entry) restoreInstrumentation(entry);
+        entry = createInstrumentationEntry(store);
+        registry.set(namespace, entry);
+    }
+    entry.listeners.add(onEvent);
+    return ()=>{
+        const current = registry.get(namespace);
+        if (!current) return;
+        current.listeners.delete(onEvent);
+        if (0 === current.listeners.size) {
+            restoreInstrumentation(current);
+            registry.delete(namespace);
+        }
+    };
+}
 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");
 var tokens_options = {};
 tokens_options.styleTagTransform = styleTagTransform_default();
@@ -4912,12 +6376,6 @@ function normalizeOverridesForPersistence(overrides) {
 function persistedOverridesEqual(a, b) {
     return a.country === b.country && a.region === b.region && a.language === b.language && a.gpc === b.gpc;
 }
-function getBlockedRequestMessage(payload) {
-    const data = payload;
-    const method = 'string' == typeof data?.method ? data.method.toUpperCase() : 'REQUEST';
-    const url = 'string' == typeof data?.url ? data.url : 'unknown-url';
-    return `Network blocked: ${method} ${url}`;
-}
 function prefersReducedMotion() {
     return 'undefined' != typeof window && 'function' == typeof window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 }
@@ -4978,74 +6436,43 @@ function createPanelHeightAnimator() {
         destroy: clearAnimationState
     };
 }
+function createStateCopy(state) {
+    return {
+        consents: state.consents,
+        selectedConsents: state.selectedConsents,
+        consentInfo: state.consentInfo,
+        locationInfo: state.locationInfo,
+        model: state.model,
+        overrides: state.overrides,
+        scripts: state.scripts?.map((script)=>({
+                id: script.id
+            })),
+        loadedScripts: state.loadedScripts
+    };
+}
 function createDevTools(options = {}) {
     const { namespace = 'c15tStore', position = 'bottom-right', defaultOpen = false } = options;
     const stateManager = createStateManager({
         position,
         isOpen: defaultOpen
     });
-    let originalCallbacks = {};
-    let originalNetworkBlockedCallback;
-    let hasWrappedNetworkBlockerCallback = false;
+    let detachInstrumentation = null;
     const storeConnector = createStoreConnector({
         namespace,
-        onConnect: (state, store)=>{
+        onConnect: (_state, store)=>{
+            detachInstrumentation?.();
+            detachInstrumentation = registerStoreInstrumentation({
+                namespace,
+                store,
+                onEvent: (event)=>{
+                    stateManager.addEvent(event);
+                }
+            });
             stateManager.setConnected(true);
             stateManager.addEvent({
                 type: 'info',
                 message: 'Connected to c15tStore'
             });
-            originalCallbacks = {
-                ...state.callbacks
-            };
-            store.getState().setCallback('onBannerFetched', (payload)=>{
-                stateManager.addEvent({
-                    type: 'info',
-                    message: `Banner fetched: ${String(payload.jurisdiction)}`,
-                    data: payload
-                });
-                if ('function' == typeof originalCallbacks.onBannerFetched) originalCallbacks.onBannerFetched(payload);
-            });
-            store.getState().setCallback('onConsentSet', (payload)=>{
-                stateManager.addEvent({
-                    type: 'consent_set',
-                    message: 'Consent preferences updated',
-                    data: payload
-                });
-                if ('function' == typeof originalCallbacks.onConsentSet) originalCallbacks.onConsentSet(payload);
-            });
-            store.getState().setCallback('onError', (payload)=>{
-                stateManager.addEvent({
-                    type: 'error',
-                    message: `Error: ${payload.error}`,
-                    data: payload
-                });
-                if ('function' == typeof originalCallbacks.onError) originalCallbacks.onError(payload);
-            });
-            store.getState().setCallback('onBeforeConsentRevocationReload', (payload)=>{
-                stateManager.addEvent({
-                    type: 'info',
-                    message: 'Consent revocation - page will reload',
-                    data: payload
-                });
-                if ('function' == typeof originalCallbacks.onBeforeConsentRevocationReload) originalCallbacks.onBeforeConsentRevocationReload(payload);
-            });
-            const currentNetworkBlocker = store.getState().networkBlocker;
-            if (currentNetworkBlocker && !hasWrappedNetworkBlockerCallback) {
-                originalNetworkBlockedCallback = currentNetworkBlocker.onRequestBlocked;
-                hasWrappedNetworkBlockerCallback = true;
-                store.getState().setNetworkBlocker({
-                    ...currentNetworkBlocker,
-                    onRequestBlocked: (payload)=>{
-                        stateManager.addEvent({
-                            type: 'network',
-                            message: getBlockedRequestMessage(payload),
-                            data: payload
-                        });
-                        if ('function' == typeof originalNetworkBlockedCallback) originalNetworkBlockedCallback(payload);
-                    }
-                });
-            }
             const persistedOverrides = loadPersistedOverrides();
             if (persistedOverrides) {
                 const currentOverrides = normalizeOverridesForPersistence(store.getState().overrides);
@@ -5075,6 +6502,8 @@ function createDevTools(options = {}) {
         },
         onDisconnect: ()=>{
             stateManager.setConnected(false);
+            detachInstrumentation?.();
+            detachInstrumentation = null;
             stateManager.addEvent({
                 type: 'error',
                 message: 'Disconnected from c15tStore'
@@ -5082,6 +6511,31 @@ function createDevTools(options = {}) {
         },
         onStateChange: ()=>{}
     });
+    const panelRenderer = createPanelRenderer({
+        storeConnector,
+        stateManager,
+        enableEventLogging: true,
+        onPersistOverrides: persistOverrides,
+        onClearPersistedOverrides: clearPersistedOverrides,
+        onCopyState: async (state)=>{
+            try {
+                await navigator.clipboard.writeText(JSON.stringify(createStateCopy(state), null, 2));
+                return true;
+            } catch  {
+                return false;
+            }
+        },
+        onExportDebugBundle: ()=>{
+            const bundle = createDebugBundle({
+                namespace,
+                devToolsState: stateManager.getState(),
+                connection: storeConnector.getDiagnostics(),
+                recentEvents: stateManager.getState().eventLog.slice(0, 100),
+                storeState: sanitizeStoreState(storeConnector.getState())
+            });
+            downloadDebugBundle(bundle);
+        }
+    });
     let tabsInstance = null;
     const panelHeightAnimator = createPanelHeightAnimator();
     const panelInstance = createPanel({
@@ -5089,19 +6543,24 @@ function createDevTools(options = {}) {
         storeConnector,
         namespace,
         onRenderContent: (container)=>{
-            renderContent(container, stateManager, storeConnector);
+            renderContent(container);
         }
     });
-    function renderContent(container, stateManager, storeConnector) {
+    function renderContent(container) {
         const panel = container.parentElement;
         const previousPanelHeight = panel?.getBoundingClientRect().height ?? 0;
         clearElement(container);
         const storeState = storeConnector.getState();
         const disabledTabs = [];
         if (!storeState || 'iab' !== storeState.model) disabledTabs.push('iab');
+        let currentActiveTab = stateManager.getState().activeTab;
+        if (disabledTabs.includes(currentActiveTab)) {
+            stateManager.setActiveTab('consents');
+            currentActiveTab = 'consents';
+        }
         if (tabsInstance) tabsInstance.destroy();
         tabsInstance = createTabs({
-            activeTab: stateManager.getState().activeTab,
+            activeTab: currentActiveTab,
             onTabChange: (tab)=>{
                 stateManager.setActiveTab(tab);
             },
@@ -5116,284 +6575,9 @@ function createDevTools(options = {}) {
             }
         });
         container.appendChild(panelContent);
-        const state = stateManager.getState();
-        const getStoreState = ()=>storeConnector.getState();
-        switch(state.activeTab){
-            case 'consents':
-                renderConsentsPanel(panelContent, {
-                    getState: getStoreState,
-                    onConsentChange: (name, value)=>{
-                        const store = storeConnector.getStore();
-                        if (store) {
-                            const consentName = String(name);
-                            store.getState().setSelectedConsent(consentName, value);
-                            stateManager.addEvent({
-                                type: 'info',
-                                message: `${consentName} toggled to ${value} (not saved)`,
-                                data: {
-                                    name: consentName,
-                                    value
-                                }
-                            });
-                        }
-                    },
-                    onSave: ()=>{
-                        const store = storeConnector.getStore();
-                        if (store) {
-                            store.getState().saveConsents('custom');
-                            stateManager.addEvent({
-                                type: 'consent_save',
-                                message: 'Saved consent preferences'
-                            });
-                        }
-                    },
-                    onAcceptAll: ()=>{
-                        const store = storeConnector.getStore();
-                        if (store) {
-                            store.getState().saveConsents('all');
-                            stateManager.addEvent({
-                                type: 'consent_save',
-                                message: 'Accepted all consents'
-                            });
-                        }
-                    },
-                    onRejectAll: ()=>{
-                        const store = storeConnector.getStore();
-                        if (store) {
-                            store.getState().saveConsents('necessary');
-                            stateManager.addEvent({
-                                type: 'consent_save',
-                                message: 'Rejected all optional consents'
-                            });
-                        }
-                    },
-                    onReset: async ()=>{
-                        const store = storeConnector.getStore();
-                        if (store) await resetAllConsents(store, stateManager);
-                    }
-                });
-                break;
-            case 'location':
-                renderLocationPanel(panelContent, {
-                    getState: getStoreState,
-                    onApplyOverrides: async (overrides)=>{
-                        const store = storeConnector.getStore();
-                        if (store) {
-                            await store.getState().setOverrides({
-                                country: overrides.country,
-                                region: overrides.region,
-                                language: overrides.language,
-                                gpc: overrides.gpc
-                            });
-                            persistOverrides({
-                                country: overrides.country,
-                                region: overrides.region,
-                                language: overrides.language,
-                                gpc: overrides.gpc
-                            });
-                            stateManager.addEvent({
-                                type: 'info',
-                                message: 'Overrides updated',
-                                data: {
-                                    country: overrides.country,
-                                    region: overrides.region,
-                                    language: overrides.language,
-                                    gpc: overrides.gpc
-                                }
-                            });
-                        }
-                    },
-                    onClearOverrides: async ()=>{
-                        const store = storeConnector.getStore();
-                        if (store) {
-                            await store.getState().setOverrides({
-                                country: void 0,
-                                region: void 0,
-                                language: void 0,
-                                gpc: void 0
-                            });
-                            clearPersistedOverrides();
-                            stateManager.addEvent({
-                                type: 'info',
-                                message: 'Overrides cleared'
-                            });
-                        }
-                    }
-                });
-                break;
-            case "scripts":
-                renderScriptsPanel(panelContent, {
-                    getState: getStoreState,
-                    getEvents: ()=>stateManager.getState().eventLog
-                });
-                break;
-            case 'iab':
-                renderIabPanel(panelContent, {
-                    getState: getStoreState,
-                    onSetPurposeConsent: (purposeId, value)=>{
-                        const iab = storeConnector.getStore()?.getState().iab;
-                        if (!iab) return;
-                        iab.setPurposeConsent(purposeId, value);
-                        stateManager.addEvent({
-                            type: 'iab',
-                            message: `IAB purpose ${purposeId} set to ${value}`,
-                            data: {
-                                purposeId,
-                                value
-                            }
-                        });
-                    },
-                    onSetVendorConsent: (vendorId, value)=>{
-                        const iab = storeConnector.getStore()?.getState().iab;
-                        if (!iab) return;
-                        iab.setVendorConsent(vendorId, value);
-                        stateManager.addEvent({
-                            type: 'iab',
-                            message: `IAB vendor ${vendorId} set to ${value}`,
-                            data: {
-                                vendorId,
-                                value
-                            }
-                        });
-                    },
-                    onSetSpecialFeatureOptIn: (featureId, value)=>{
-                        const iab = storeConnector.getStore()?.getState().iab;
-                        if (!iab) return;
-                        iab.setSpecialFeatureOptIn(featureId, value);
-                        stateManager.addEvent({
-                            type: 'iab',
-                            message: `IAB feature ${featureId} set to ${value}`,
-                            data: {
-                                featureId,
-                                value
-                            }
-                        });
-                    },
-                    onAcceptAll: ()=>{
-                        const iab = storeConnector.getStore()?.getState().iab;
-                        if (!iab) return;
-                        iab.acceptAll();
-                        stateManager.addEvent({
-                            type: 'iab',
-                            message: 'IAB accept all selected'
-                        });
-                    },
-                    onRejectAll: ()=>{
-                        const iab = storeConnector.getStore()?.getState().iab;
-                        if (!iab) return;
-                        iab.rejectAll();
-                        stateManager.addEvent({
-                            type: 'iab',
-                            message: 'IAB reject all selected'
-                        });
-                    },
-                    onSave: ()=>{
-                        const iab = storeConnector.getStore()?.getState().iab;
-                        if (!iab) return;
-                        iab.save().then(()=>{
-                            stateManager.addEvent({
-                                type: 'iab',
-                                message: 'IAB preferences saved'
-                            });
-                        }).catch((error)=>{
-                            stateManager.addEvent({
-                                type: 'error',
-                                message: `Failed to save IAB preferences: ${String(error)}`
-                            });
-                        });
-                    },
-                    onReset: async ()=>{
-                        const store = storeConnector.getStore();
-                        if (store) await resetAllConsents(store, stateManager);
-                    }
-                });
-                break;
-            case 'events':
-                renderEventsPanel(panelContent, {
-                    getEvents: ()=>stateManager.getState().eventLog,
-                    onClear: ()=>{
-                        stateManager.clearEventLog();
-                        stateManager.addEvent({
-                            type: 'info',
-                            message: 'Event log cleared'
-                        });
-                    }
-                });
-                break;
-            case 'actions':
-                renderActionsPanel(panelContent, {
-                    getState: getStoreState,
-                    onResetConsents: async ()=>{
-                        const store = storeConnector.getStore();
-                        if (store) await resetAllConsents(store, stateManager);
-                    },
-                    onRefetchBanner: async ()=>{
-                        const store = storeConnector.getStore();
-                        if (store) {
-                            await store.getState().initConsentManager();
-                            stateManager.addEvent({
-                                type: 'info',
-                                message: 'Banner data refetched'
-                            });
-                        }
-                    },
-                    onShowBanner: ()=>{
-                        const store = storeConnector.getStore();
-                        if (store) {
-                            store.getState().setActiveUI('banner', {
-                                force: true
-                            });
-                            stateManager.addEvent({
-                                type: 'info',
-                                message: 'Banner shown'
-                            });
-                        }
-                    },
-                    onOpenPreferences: ()=>{
-                        const store = storeConnector.getStore();
-                        if (store) {
-                            store.getState().setActiveUI('dialog');
-                            stateManager.addEvent({
-                                type: 'info',
-                                message: 'Preference center opened'
-                            });
-                        }
-                    },
-                    onCopyState: ()=>{
-                        const state = storeConnector.getState();
-                        if (state) {
-                            const stateCopy = {
-                                consents: state.consents,
-                                consentInfo: state.consentInfo,
-                                locationInfo: state.locationInfo,
-                                model: state.model,
-                                overrides: state.overrides,
-                                scripts: state.scripts?.map((s)=>({
-                                        id: s.id
-                                    })),
-                                loadedScripts: state.loadedScripts
-                            };
-                            navigator.clipboard.writeText(JSON.stringify(stateCopy, null, 2)).then(()=>{
-                                stateManager.addEvent({
-                                    type: 'info',
-                                    message: 'State copied to clipboard'
-                                });
-                            }).catch(()=>{
-                                stateManager.addEvent({
-                                    type: 'error',
-                                    message: 'Failed to copy state'
-                                });
-                            });
-                        }
-                    }
-                });
-                break;
-        }
+        panelRenderer.renderPanel(panelContent, currentActiveTab);
         if (panel) panelHeightAnimator.animate(panel, previousPanelHeight);
     }
-    storeConnector.subscribe(()=>{
-        panelInstance.update();
-    });
     const instance = {
         open: ()=>stateManager.setOpen(true),
         close: ()=>stateManager.setOpen(false),
@@ -5407,20 +6591,8 @@ function createDevTools(options = {}) {
             };
         },
         destroy: ()=>{
-            const store = storeConnector.getStore();
-            if (store) {
-                store.getState().setCallback('onBannerFetched', originalCallbacks.onBannerFetched);
-                store.getState().setCallback('onConsentSet', originalCallbacks.onConsentSet);
-                store.getState().setCallback('onError', originalCallbacks.onError);
-                store.getState().setCallback('onBeforeConsentRevocationReload', originalCallbacks.onBeforeConsentRevocationReload);
-                if (hasWrappedNetworkBlockerCallback) {
-                    const currentNetworkBlocker = store.getState().networkBlocker;
-                    if (currentNetworkBlocker) store.getState().setNetworkBlocker({
-                        ...currentNetworkBlocker,
-                        onRequestBlocked: originalNetworkBlockedCallback
-                    });
-                }
-            }
+            detachInstrumentation?.();
+            detachInstrumentation = null;
             panelHeightAnimator.destroy();
             tabsInstance?.destroy();
             panelInstance.destroy();
@@ -5434,31 +6606,20 @@ function createDevTools(options = {}) {
 }
 function createDevToolsPanel(options) {
     const { namespace = 'c15tStore' } = options;
-    let originalEmbeddedNetworkBlockedCallback;
-    let hasWrappedEmbeddedNetworkBlocker = false;
+    let detachInstrumentation = null;
     const stateManager = createStateManager({
         isOpen: true
     });
     const storeConnector = createStoreConnector({
         namespace,
         onConnect: (state, store)=>{
+            detachInstrumentation?.();
+            detachInstrumentation = registerStoreInstrumentation({
+                namespace,
+                store,
+                onEvent: (event)=>stateManager.addEvent(event)
+            });
             stateManager.setConnected(true);
-            const currentNetworkBlocker = state.networkBlocker;
-            if (currentNetworkBlocker && !hasWrappedEmbeddedNetworkBlocker) {
-                originalEmbeddedNetworkBlockedCallback = currentNetworkBlocker.onRequestBlocked;
-                hasWrappedEmbeddedNetworkBlocker = true;
-                store.getState().setNetworkBlocker({
-                    ...currentNetworkBlocker,
-                    onRequestBlocked: (payload)=>{
-                        stateManager.addEvent({
-                            type: 'network',
-                            message: getBlockedRequestMessage(payload),
-                            data: payload
-                        });
-                        if ('function' == typeof originalEmbeddedNetworkBlockedCallback) originalEmbeddedNetworkBlockedCallback(payload);
-                    }
-                });
-            }
             const persistedOverrides = loadPersistedOverrides();
             if (persistedOverrides) {
                 const currentOverrides = normalizeOverridesForPersistence(state.overrides);
@@ -5470,7 +6631,36 @@ function createDevToolsPanel(options) {
                 });
             }
         },
-        onDisconnect: ()=>stateManager.setConnected(false)
+        onDisconnect: ()=>{
+            stateManager.setConnected(false);
+            detachInstrumentation?.();
+            detachInstrumentation = null;
+        }
+    });
+    const panelRenderer = createPanelRenderer({
+        storeConnector,
+        stateManager,
+        enableEventLogging: false,
+        onPersistOverrides: persistOverrides,
+        onClearPersistedOverrides: clearPersistedOverrides,
+        onCopyState: async (state)=>{
+            try {
+                await navigator.clipboard.writeText(JSON.stringify(createStateCopy(state), null, 2));
+                return true;
+            } catch  {
+                return false;
+            }
+        },
+        onExportDebugBundle: ()=>{
+            const bundle = createDebugBundle({
+                namespace,
+                devToolsState: stateManager.getState(),
+                connection: storeConnector.getDiagnostics(),
+                recentEvents: stateManager.getState().eventLog.slice(0, 100),
+                storeState: sanitizeStoreState(storeConnector.getState())
+            });
+            downloadDebugBundle(bundle);
+        }
     });
     const container = renderer_div({
         style: {
@@ -5491,140 +6681,42 @@ function createDevToolsPanel(options) {
         }
     });
     function renderActivePanel() {
-        const state = stateManager.getState();
-        const getStoreState = ()=>storeConnector.getState();
-        switch(state.activeTab){
-            case 'consents':
-                renderConsentsPanel(contentArea, {
-                    getState: getStoreState,
-                    onConsentChange: (name, value)=>{
-                        storeConnector.getStore()?.getState().setSelectedConsent(name, value);
-                    },
-                    onSave: ()=>{
-                        storeConnector.getStore()?.getState().saveConsents('custom');
-                    },
-                    onAcceptAll: ()=>{
-                        storeConnector.getStore()?.getState().saveConsents('all');
-                    },
-                    onRejectAll: ()=>{
-                        storeConnector.getStore()?.getState().saveConsents('necessary');
-                    },
-                    onReset: async ()=>{
-                        const store = storeConnector.getStore();
-                        if (store) await resetAllConsents(store);
-                    }
-                });
-                break;
-            case 'location':
-                renderLocationPanel(contentArea, {
-                    getState: getStoreState,
-                    onApplyOverrides: async (overrides)=>{
-                        const store = storeConnector.getStore();
-                        if (store) {
-                            await store.getState().setOverrides({
-                                country: overrides.country,
-                                region: overrides.region,
-                                language: overrides.language,
-                                gpc: overrides.gpc
-                            });
-                            persistOverrides({
-                                country: overrides.country,
-                                region: overrides.region,
-                                language: overrides.language,
-                                gpc: overrides.gpc
-                            });
-                        }
-                    },
-                    onClearOverrides: async ()=>{
-                        await storeConnector.getStore()?.getState().setOverrides({
-                            country: void 0,
-                            region: void 0,
-                            language: void 0,
-                            gpc: void 0
-                        });
-                        clearPersistedOverrides();
-                    }
-                });
-                break;
-            case "scripts":
-                renderScriptsPanel(contentArea, {
-                    getState: getStoreState,
-                    getEvents: ()=>stateManager.getState().eventLog
-                });
-                break;
-            case 'iab':
-                renderIabPanel(contentArea, {
-                    getState: getStoreState,
-                    onSetPurposeConsent: (purposeId, value)=>{
-                        storeConnector.getStore()?.getState().iab?.setPurposeConsent(purposeId, value);
-                    },
-                    onSetVendorConsent: (vendorId, value)=>{
-                        storeConnector.getStore()?.getState().iab?.setVendorConsent(vendorId, value);
-                    },
-                    onSetSpecialFeatureOptIn: (featureId, value)=>{
-                        storeConnector.getStore()?.getState().iab?.setSpecialFeatureOptIn(featureId, value);
-                    },
-                    onAcceptAll: ()=>{
-                        storeConnector.getStore()?.getState().iab?.acceptAll();
-                    },
-                    onRejectAll: ()=>{
-                        storeConnector.getStore()?.getState().iab?.rejectAll();
-                    },
-                    onSave: ()=>{
-                        storeConnector.getStore()?.getState().iab?.save();
-                    },
-                    onReset: async ()=>{
-                        const store = storeConnector.getStore();
-                        if (store) await resetAllConsents(store);
-                    }
-                });
-                break;
-            case 'events':
-                renderEventsPanel(contentArea, {
-                    getEvents: ()=>stateManager.getState().eventLog,
-                    onClear: ()=>{
-                        stateManager.clearEventLog();
-                    }
-                });
-                break;
-            case 'actions':
-                renderActionsPanel(contentArea, {
-                    getState: getStoreState,
-                    onResetConsents: async ()=>{
-                        const store = storeConnector.getStore();
-                        if (store) await resetAllConsents(store);
-                    },
-                    onRefetchBanner: async ()=>{
-                        await storeConnector.getStore()?.getState().initConsentManager();
-                    },
-                    onShowBanner: ()=>{
-                        storeConnector.getStore()?.getState().setActiveUI('banner', {
-                            force: true
-                        });
-                    },
-                    onOpenPreferences: ()=>{
-                        storeConnector.getStore()?.getState().setActiveUI('dialog');
-                    },
-                    onCopyState: ()=>{
-                        const state = storeConnector.getState();
-                        if (state) navigator.clipboard.writeText(JSON.stringify(state, null, 2));
-                    }
-                });
-                break;
+        const activeTab = syncTabs();
+        panelRenderer.renderPanel(contentArea, activeTab);
+    }
+    let tabsInstance = null;
+    let iabDisabled = true;
+    function getDisabledTabs() {
+        const disabledTabs = [];
+        const storeState = storeConnector.getState();
+        if (!storeState || 'iab' !== storeState.model) disabledTabs.push('iab');
+        return disabledTabs;
+    }
+    function syncTabs() {
+        const disabledTabs = getDisabledTabs();
+        const nextIabDisabled = disabledTabs.includes('iab');
+        let activeTab = stateManager.getState().activeTab;
+        if (disabledTabs.includes(activeTab)) {
+            activeTab = 'consents';
+            stateManager.setActiveTab(activeTab);
         }
+        if (tabsInstance && iabDisabled === nextIabDisabled) tabsInstance.setActiveTab(activeTab);
+        else {
+            tabsInstance?.destroy();
+            tabsInstance = createTabs({
+                activeTab,
+                onTabChange: (tab)=>{
+                    stateManager.setActiveTab(tab);
+                    renderActivePanel();
+                },
+                disabledTabs
+            });
+            iabDisabled = nextIabDisabled;
+            if (!tabsInstance.element.parentElement) container.appendChild(tabsInstance.element);
+        }
+        return activeTab;
     }
-    const storeState = storeConnector.getState();
-    const disabledTabs = [];
-    if (!storeState || 'iab' !== storeState.model) disabledTabs.push('iab');
-    const tabsInstance = createTabs({
-        activeTab: stateManager.getState().activeTab,
-        onTabChange: (tab)=>{
-            stateManager.setActiveTab(tab);
-            renderActivePanel();
-        },
-        disabledTabs
-    });
-    container.appendChild(tabsInstance.element);
+    syncTabs();
     container.appendChild(contentArea);
     renderActivePanel();
     const unsubscribe = storeConnector.subscribe(()=>{
@@ -5633,16 +6725,10 @@ function createDevToolsPanel(options) {
     return {
         element: container,
         destroy: ()=>{
-            const store = storeConnector.getStore();
-            if (store && hasWrappedEmbeddedNetworkBlocker) {
-                const currentNetworkBlocker = store.getState().networkBlocker;
-                if (currentNetworkBlocker) store.getState().setNetworkBlocker({
-                    ...currentNetworkBlocker,
-                    onRequestBlocked: originalEmbeddedNetworkBlockedCallback
-                });
-            }
+            detachInstrumentation?.();
+            detachInstrumentation = null;
             unsubscribe();
-            tabsInstance.destroy();
+            tabsInstance?.destroy();
             storeConnector.destroy();
             stateManager.destroy();
         }