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

package/dist/index.cjs

@@ -345,22 +345,26 @@ var __webpack_modules__ = {
   justify-content: center;
   align-items: center;
   gap: var(--c15t-space-xs, .25rem);
-  padding: var(--c15t-space-xs, .25rem) var(--c15t-space-sm, .5rem);
   border: 1px solid var(--c15t-border, #e3e3e3);
   border-radius: var(--c15t-radius-md, .5rem);
   background-color: var(--c15t-surface, #fff);
+  min-height: 30px;
   color: var(--c15t-text, #171717);
   font-family: inherit;
-  font-size: var(--c15t-devtools-font-size-xs, .75rem);
+  font-size: 12px;
   font-weight: var(--c15t-font-weight-medium, 500);
   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));
+  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;
   display: inline-flex;
+  box-shadow: 0 1px 1px #0000000a;
 }
 
 .btn-evRVlh:hover {
   background-color: var(--c15t-surface-hover, #f7f7f7);
   border-color: var(--c15t-border-hover, #c9c9c9);
+  box-shadow: 0 2px 6px #00000014;
 }
 
 .btn-evRVlh:focus-visible {
@@ -368,9 +372,14 @@ var __webpack_modules__ = {
   outline-offset: 1px;
 }
 
+.btn-evRVlh:active {
+  box-shadow: 0 1px 2px #00000014;
+}
+
 .btn-evRVlh:disabled {
   opacity: .5;
   cursor: not-allowed;
+  box-shadow: none;
 }
 
 .btnPrimary-dA6nqY {
@@ -396,8 +405,10 @@ var __webpack_modules__ = {
 }
 
 .btnSmall-TjXoqZ {
-  padding: 2px var(--c15t-space-xs, .25rem);
-  font-size: 10px;
+  border-radius: var(--c15t-radius-sm, .375rem);
+  min-height: 26px;
+  padding: 3px 8px;
+  font-size: 11px;
 }
 
 .btnIcon-fiYQAh {
@@ -549,6 +560,50 @@ var __webpack_modules__ = {
   letter-spacing: .5px;
 }
 
+.overrideField-keNdpJ {
+  flex-direction: column;
+  gap: 3px;
+  margin-bottom: 0;
+  display: flex;
+}
+
+.overrideLabel-ApMoTw {
+  color: var(--c15t-text-muted, #737373);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.overrideHint-yCfwGt {
+  color: var(--c15t-devtools-text-muted, #737373);
+  margin-top: 6px;
+  font-size: 11px;
+}
+
+.overrideActions-imdcn7 {
+  border-top: 1px dashed var(--c15t-border, #e3e3e3);
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  padding-top: 8px;
+  display: flex;
+}
+
+.overrideActionButtons-gYOx1e {
+  flex-wrap: wrap;
+  gap: 6px;
+  display: flex;
+}
+
+.overrideStatus-sty_qS {
+  color: var(--c15t-text-muted, #737373);
+  font-size: 11px;
+}
+
+.overrideStatusDirty-OUdDMw {
+  color: var(--c15t-devtools-badge-warning, #f59f0a);
+}
+
 .infoRow-RlB_0h {
   padding: var(--c15t-space-xs, .25rem) 0;
   justify-content: space-between;
@@ -641,6 +696,13 @@ var __webpack_modules__ = {
             section: "section-a197cB",
             sectionHeader: "sectionHeader-Xcljcw",
             sectionTitle: "sectionTitle-RUiFld",
+            overrideField: "overrideField-keNdpJ",
+            overrideLabel: "overrideLabel-ApMoTw",
+            overrideHint: "overrideHint-yCfwGt",
+            overrideActions: "overrideActions-imdcn7",
+            overrideActionButtons: "overrideActionButtons-gYOx1e",
+            overrideStatus: "overrideStatus-sty_qS",
+            overrideStatusDirty: "overrideStatusDirty-OUdDMw",
             infoRow: "infoRow-RlB_0h",
             infoLabel: "infoLabel-_pbK33",
             infoValue: "infoValue-flMl_e",
@@ -1123,16 +1185,23 @@ var __webpack_modules__ = {
         ___CSS_LOADER_EXPORT___.push([
             module.id,
             `.tabList-IyuiBE {
+  align-items: center;
   gap: var(--c15t-space-xs, .25rem);
-  padding: var(--c15t-space-sm, .5rem) var(--c15t-space-md, 1rem);
+  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);
   display: flex;
   overflow-x: auto;
 }
 
+.tabList-IyuiBE:after {
+  content: "";
+  flex: 0 0 var(--c15t-space-sm, .5rem);
+}
+
 .tabList-IyuiBE::-webkit-scrollbar {
   display: none;
 }
@@ -1140,17 +1209,17 @@ var __webpack_modules__ = {
 .tab-yfDEqg {
   align-items: center;
   gap: var(--c15t-space-xs, .25rem);
-  padding: var(--c15t-space-xs, .25rem) var(--c15t-space-sm, .5rem);
   border-radius: var(--c15t-radius-md, .5rem);
   color: var(--c15t-text-muted, #737373);
   font-family: inherit;
-  font-size: var(--c15t-devtools-font-size-xs, .75rem);
+  font-size: 11px;
   font-weight: var(--c15t-font-weight-medium, 500);
   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;
+  padding: 3px 7px;
   display: flex;
 }
 
@@ -1885,9 +1954,9 @@ var __webpack_exports__ = {};
         const elements = getPreferenceTriggerElements();
         for (const el of elements)el.style.display = visible ? '' : 'none';
     }
-    function getPreferenceCenterOpener() {
+    function getPreferenceCenterOpener(namespace = 'c15tStore') {
         const win = window;
-        const store = win.c15tStore;
+        const store = win[namespace];
         if (store && 'function' == typeof store.getState) {
             const state = store.getState();
             if ('function' == typeof state.setActiveUI) return ()=>{
@@ -1896,6 +1965,7 @@ var __webpack_exports__ = {};
         }
         return null;
     }
+    const version = '2.0.0-rc.3';
     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>`;
@@ -2099,7 +2169,7 @@ var __webpack_exports__ = {};
         }
     }
     function createPanel(options) {
-        const { stateManager, storeConnector, onRenderContent, enableUnifiedMode = true } = options;
+        const { stateManager, storeConnector, onRenderContent, namespace = 'c15tStore', enableUnifiedMode = true } = options;
         let removePortal = null;
         let isAnimatingOut = false;
         let draggable = null;
@@ -2128,7 +2198,7 @@ var __webpack_exports__ = {};
                 return;
             }
             hasPreferenceTrigger = detectPreferenceTrigger();
-            const preferenceCenterOpener = getPreferenceCenterOpener();
+            const preferenceCenterOpener = getPreferenceCenterOpener(namespace);
             useUnifiedMode = hasPreferenceTrigger && null !== preferenceCenterOpener;
             if (useUnifiedMode && !dropdownMenu) {
                 dropdownMenu = createDropdownMenu({
@@ -2148,7 +2218,7 @@ var __webpack_exports__ = {};
                             description: 'Open privacy settings',
                             icon: PREFERENCES_ICON,
                             onClick: ()=>{
-                                const opener = getPreferenceCenterOpener();
+                                const opener = getPreferenceCenterOpener(namespace);
                                 if (opener) opener();
                             }
                         },
@@ -2204,6 +2274,7 @@ var __webpack_exports__ = {};
         let panelElement = null;
         let backdropElement = null;
         let contentContainer = null;
+        let footerElement = null;
         function createPanelElement() {
             const corner = draggable?.getCorner() ?? stateManager.getState().position;
             const positionClass = getPositionClass(corner);
@@ -2255,33 +2326,53 @@ var __webpack_exports__ = {};
             contentContainer = renderer_div({
                 className: styles_panel_module.content
             });
-            const isConnected = storeConnector.isConnected();
-            const footer = renderer_div({
-                className: styles_panel_module.footer,
-                children: [
-                    renderer_div({
-                        className: styles_panel_module.footerStatus,
-                        children: [
-                            span({
-                                className: `${styles_panel_module.statusDot} ${isConnected ? styles_panel_module.statusConnected : styles_panel_module.statusDisconnected}`
-                            }),
-                            span({
-                                text: isConnected ? 'Connected' : 'Disconnected'
-                            })
-                        ]
-                    }),
-                    span({
-                        text: 'v1.8.3'
-                    })
-                ]
+            footerElement = renderer_div({
+                className: styles_panel_module.footer
             });
+            updateFooter();
             panel.appendChild(header);
             panel.appendChild(contentContainer);
-            panel.appendChild(footer);
-            if (isConnected) onRenderContent(contentContainer);
+            panel.appendChild(footerElement);
+            if (storeConnector.isConnected()) onRenderContent(contentContainer);
             else renderErrorState(contentContainer);
             return panel;
         }
+        function updateFooter() {
+            if (!footerElement) return;
+            clearElement(footerElement);
+            const isConnected = storeConnector.isConnected();
+            const storeState = storeConnector.getState();
+            const isLoading = storeState?.isLoadingConsentInfo ?? false;
+            const statusChildren = [
+                span({
+                    className: `${styles_panel_module.statusDot} ${isConnected ? styles_panel_module.statusConnected : styles_panel_module.statusDisconnected}`
+                }),
+                span({
+                    text: isConnected ? 'Connected' : 'Disconnected'
+                })
+            ];
+            if (isLoading) statusChildren.push(span({
+                style: {
+                    marginLeft: '4px',
+                    opacity: '0.7'
+                },
+                text: '\u00b7 Fetching /init\u2026'
+            }));
+            footerElement.appendChild(renderer_div({
+                className: styles_panel_module.footerStatus,
+                children: statusChildren
+            }));
+            if (!isConnected) footerElement.appendChild(renderer_button({
+                className: styles_panel_module.closeButton,
+                text: 'Retry',
+                onClick: ()=>{
+                    storeConnector.retryConnection();
+                }
+            }));
+            footerElement.appendChild(span({
+                text: `v${version}`
+            }));
+        }
         function renderErrorState(container) {
             clearElement(container);
             const errorState = renderer_div({
@@ -2304,6 +2395,13 @@ var __webpack_exports__ = {};
                     renderer_div({
                         className: styles_panel_module.errorMessage,
                         text: 'c15t consent manager is not initialized. Make sure you have set up the ConsentManagerProvider in your app.'
+                    }),
+                    renderer_button({
+                        className: styles_panel_module.closeButton,
+                        text: 'Retry Connection',
+                        onClick: ()=>{
+                            storeConnector.retryConnection();
+                        }
                     })
                 ]
             });
@@ -2339,6 +2437,7 @@ var __webpack_exports__ = {};
                     panelElement = null;
                 }
                 contentContainer = null;
+                footerElement = null;
                 isAnimatingOut = false;
                 floatingButton.style.display = '';
                 stateManager.setOpen(false);
@@ -2357,6 +2456,7 @@ var __webpack_exports__ = {};
             update();
         });
         const unsubscribeStore = storeConnector.subscribe(()=>{
+            updateFooter();
             if (contentContainer) if (storeConnector.isConnected()) onRenderContent(contentContainer);
             else renderErrorState(contentContainer);
         });
@@ -3012,13 +3112,13 @@ var __webpack_exports__ = {};
                     },
                     children: [
                         createButton({
-                            text: 'All',
+                            text: 'Accept',
                             variant: 'primary',
                             small: true,
                             onClick: onAcceptAll
                         }),
                         createButton({
-                            text: 'None',
+                            text: 'Reject',
                             variant: 'default',
                             small: true,
                             onClick: onRejectAll
@@ -3066,16 +3166,22 @@ var __webpack_exports__ = {};
     function formatConsentName(name) {
         return name.replace(/_/g, ' ').replace(/\b\w/g, (l)=>l.toUpperCase());
     }
+    let activeFilter = 'all';
+    let selectedEventId = null;
     function renderEventsPanel(container, options) {
         const { getEvents, onClear } = options;
         clearElement(container);
-        const events = getEvents();
+        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 header = renderer_div({
             style: {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'space-between',
-                padding: '12px 16px 8px'
+                padding: '12px 16px 8px',
+                gap: '8px'
             },
             children: [
                 span({
@@ -3086,44 +3192,130 @@ var __webpack_exports__ = {};
                         textTransform: 'uppercase',
                         letterSpacing: '0.5px'
                     },
-                    text: `Events (${events.length})`
+                    text: `Events (${events.length}/${allEvents.length})`
                 }),
-                createButton({
-                    text: 'Clear',
-                    small: true,
-                    onClick: onClear
+                renderer_div({
+                    style: {
+                        display: 'flex',
+                        gap: '6px'
+                    },
+                    children: [
+                        createButton({
+                            text: 'Export',
+                            small: true,
+                            onClick: ()=>exportEvents(allEvents)
+                        }),
+                        createButton({
+                            text: 'Clear',
+                            small: true,
+                            onClick: ()=>{
+                                onClear();
+                                selectedEventId = null;
+                                renderEventsPanel(container, options);
+                            }
+                        })
+                    ]
                 })
             ]
         });
         container.appendChild(header);
+        container.appendChild(renderer_div({
+            style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '6px',
+                padding: '0 16px 8px'
+            },
+            children: EVENT_FILTERS.map((filter)=>createFilterButton(filter, filter === activeFilter, ()=>{
+                    activeFilter = filter;
+                    selectedEventId = null;
+                    renderEventsPanel(container, options);
+                }))
+        }));
         const eventList = renderer_div({
             style: {
                 display: 'flex',
                 flexDirection: 'column',
                 gap: '4px',
                 padding: '0 12px 12px',
-                maxHeight: '400px',
+                maxHeight: '300px',
                 overflowY: 'auto'
             }
         });
-        if (0 === events.length) {
-            const emptyState = renderer_div({
-                style: {
-                    padding: '32px 16px',
-                    textAlign: 'center',
-                    color: 'var(--c15t-text-muted)',
-                    fontSize: 'var(--c15t-devtools-font-size-sm)'
-                },
-                text: 'No events recorded yet'
-            });
-            eventList.appendChild(emptyState);
-        } else for (const event of events){
-            const eventItem = createEventItem(event);
-            eventList.appendChild(eventItem);
-        }
+        if (0 === events.length) eventList.appendChild(renderer_div({
+            style: {
+                padding: '20px 16px',
+                textAlign: 'center',
+                color: 'var(--c15t-text-muted)',
+                fontSize: 'var(--c15t-devtools-font-size-sm)'
+            },
+            text: 'No events match this filter'
+        }));
+        else for (const event of events)eventList.appendChild(createEventItem(event, event.id === selectedEventId, ()=>{
+            selectedEventId = event.id;
+            renderEventsPanel(container, options);
+        }));
         container.appendChild(eventList);
+        container.appendChild(createPayloadSection(selectedEvent));
+    }
+    const EVENT_FILTERS = [
+        'all',
+        'error',
+        'consent',
+        'network',
+        'iab'
+    ];
+    function createFilterButton(filter, active, onClick) {
+        return createButton({
+            text: filter.toUpperCase(),
+            small: true,
+            variant: active ? 'primary' : 'default',
+            onClick
+        });
+    }
+    function matchesFilter(event, filter) {
+        if ('all' === filter) return true;
+        if ('error' === filter) return 'error' === event.type;
+        if ('consent' === filter) return 'consent_set' === event.type || 'consent_save' === event.type || 'consent_reset' === event.type;
+        if ('network' === filter) return 'network' === event.type;
+        return 'iab' === event.type;
+    }
+    function createPayloadSection(event) {
+        const payload = event?.data ? JSON.stringify(event.data, null, 2) : null;
+        return renderer_div({
+            style: {
+                padding: '0 12px 12px'
+            },
+            children: [
+                renderer_div({
+                    style: {
+                        fontSize: 'var(--c15t-devtools-font-size-xs)',
+                        fontWeight: '600',
+                        color: 'var(--c15t-text-muted)',
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.5px',
+                        marginBottom: '6px'
+                    },
+                    text: 'Payload'
+                }),
+                renderer_div({
+                    className: styles_components_module.gridCard ?? '',
+                    style: {
+                        padding: '8px',
+                        fontFamily: 'ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace',
+                        fontSize: '11px',
+                        color: 'var(--c15t-text-muted)',
+                        maxHeight: '140px',
+                        overflowY: 'auto',
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-word'
+                    },
+                    text: payload || 'Select an event with payload data'
+                })
+            ]
+        });
     }
-    function createEventItem(event) {
+    function createEventItem(event, selected, onSelect) {
         const time = formatTime(event.timestamp);
         const icon = getEventIcon(event.type);
         const color = getEventColor(event.type);
@@ -3134,8 +3326,11 @@ var __webpack_exports__ = {};
                 alignItems: 'center',
                 gap: '8px',
                 padding: '6px 10px',
-                fontSize: 'var(--c15t-devtools-font-size-xs)'
+                fontSize: 'var(--c15t-devtools-font-size-xs)',
+                cursor: 'pointer',
+                borderColor: selected ? 'var(--c15t-devtools-badge-info, #3b82f6)' : 'var(--c15t-border)'
             },
+            onClick: onSelect,
             children: [
                 span({
                     style: {
@@ -3164,6 +3359,21 @@ var __webpack_exports__ = {};
             ]
         });
     }
+    function exportEvents(events) {
+        const json = JSON.stringify(events, null, 2);
+        const blob = new Blob([
+            json
+        ], {
+            type: 'application/json'
+        });
+        const url = URL.createObjectURL(blob);
+        const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `c15t-events-${timestamp}.json`;
+        a.click();
+        URL.revokeObjectURL(url);
+    }
     function formatTime(timestamp) {
         const date = new Date(timestamp);
         return date.toLocaleTimeString('en-US', {
@@ -3182,7 +3392,10 @@ var __webpack_exports__ = {};
                 return '○';
             case 'error':
                 return '✕';
-            case 'info':
+            case 'network':
+                return '◉';
+            case 'iab':
+                return '◆';
             default:
                 return '○';
         }
@@ -3196,13 +3409,16 @@ var __webpack_exports__ = {};
                 return 'var(--c15t-devtools-badge-warning, #f59e0b)';
             case 'error':
                 return 'var(--c15t-devtools-badge-error, #ef4444)';
-            case 'info':
+            case 'network':
+                return 'var(--c15t-devtools-badge-warning, #f59e0b)';
+            case 'iab':
+                return 'var(--c15t-devtools-badge-info, #3b82f6)';
             default:
                 return 'var(--c15t-text-muted)';
         }
     }
     function renderIabPanel(container, options) {
-        const { getState, onReset } = options;
+        const { getState, onSetPurposeConsent, onSetVendorConsent, onSetSpecialFeatureOptIn, onAcceptAll, onRejectAll, onSave, onReset } = options;
         clearElement(container);
         const state = getState();
         if (!state) return void container.appendChild(renderer_div({
@@ -3280,7 +3496,9 @@ var __webpack_exports__ = {};
             for (const [purposeId, consent] of purposeEntries){
                 const purposeInfo = purposes[purposeId];
                 const purposeName = purposeInfo?.name || `Purpose ${purposeId}`;
-                purposeList.appendChild(createPurposeRow(purposeId, purposeName, Boolean(consent)));
+                purposeList.appendChild(createPurposeRow(purposeId, purposeName, Boolean(consent), (value)=>{
+                    onSetPurposeConsent(Number(purposeId), value);
+                }));
             }
             const purposesSection = createSection({
                 title: `Purposes (${purposeEntries.length})`,
@@ -3306,7 +3524,9 @@ var __webpack_exports__ = {};
             for (const [featureId, optIn] of specialFeatureEntries){
                 const featureInfo = specialFeatures[featureId];
                 const featureName = featureInfo?.name || `Special Feature ${featureId}`;
-                specialFeatureList.appendChild(createPurposeRow(featureId, featureName, Boolean(optIn)));
+                specialFeatureList.appendChild(createPurposeRow(featureId, featureName, Boolean(optIn), (value)=>{
+                    onSetSpecialFeatureOptIn(Number(featureId), value);
+                }, 'feature'));
             }
             const specialFeaturesSection = createSection({
                 title: `Special Features (${specialFeatureEntries.length})`,
@@ -3346,7 +3566,9 @@ var __webpack_exports__ = {};
                     overflowY: 'auto'
                 }
             });
-            for (const [vendorId, consent, vendorName] of iabVendors)vendorList.appendChild(createVendorRow(vendorId, vendorName, consent, 'iab'));
+            for (const [vendorId, consent, vendorName] of iabVendors)vendorList.appendChild(createVendorRow(vendorId, vendorName, consent, 'iab', (value)=>{
+                onSetVendorConsent(Number(vendorId), value);
+            }));
             const vendorsSection = createSection({
                 title: `IAB Vendors (${iabVendors.length})`,
                 children: [
@@ -3365,7 +3587,9 @@ var __webpack_exports__ = {};
                     overflowY: 'auto'
                 }
             });
-            for (const [vendorId, consent, vendorName] of customVendors)customVendorList.appendChild(createVendorRow(vendorId, vendorName, consent, 'custom'));
+            for (const [vendorId, consent, vendorName] of customVendors)customVendorList.appendChild(createVendorRow(vendorId, vendorName, consent, 'custom', (value)=>{
+                onSetVendorConsent(vendorId, value);
+            }));
             const customVendorsSection = createSection({
                 title: `Custom Vendors (${customVendors.length})`,
                 children: [
@@ -3387,15 +3611,40 @@ var __webpack_exports__ = {};
             style: {
                 display: 'flex',
                 alignItems: 'center',
-                justifyContent: 'flex-end',
+                justifyContent: 'space-between',
                 padding: '12px 16px',
                 marginTop: 'auto',
                 borderTop: '1px solid var(--c15t-border)',
                 backgroundColor: 'var(--c15t-surface)'
             },
             children: [
+                renderer_div({
+                    style: {
+                        display: 'flex',
+                        gap: '6px'
+                    },
+                    children: [
+                        createButton({
+                            text: 'Accept All',
+                            variant: 'primary',
+                            small: true,
+                            onClick: onAcceptAll
+                        }),
+                        createButton({
+                            text: 'Reject All',
+                            small: true,
+                            onClick: onRejectAll
+                        }),
+                        createButton({
+                            text: 'Save',
+                            variant: 'primary',
+                            small: true,
+                            onClick: onSave
+                        })
+                    ]
+                }),
                 createButton({
-                    text: 'Reset All',
+                    text: 'Reset',
                     variant: 'danger',
                     small: true,
                     onClick: onReset
@@ -3404,7 +3653,7 @@ var __webpack_exports__ = {};
         });
         container.appendChild(footer);
     }
-    function createPurposeRow(id, name, consent) {
+    function createPurposeRow(id, name, consent, onChange, ariaKind = 'purpose') {
         return renderer_div({
             style: {
                 display: 'flex',
@@ -3427,14 +3676,28 @@ var __webpack_exports__ = {};
                     text: `${id}. ${name}`,
                     title: name
                 }),
-                createBadge({
-                    text: consent ? '✓' : '✕',
-                    variant: consent ? 'success' : 'error'
+                renderer_div({
+                    style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '6px'
+                    },
+                    children: [
+                        createBadge({
+                            text: consent ? '✓' : '✕',
+                            variant: consent ? 'success' : 'error'
+                        }),
+                        createToggle({
+                            checked: consent,
+                            onChange,
+                            ariaLabel: `Toggle ${ariaKind} ${id}`
+                        })
+                    ]
                 })
             ]
         });
     }
-    function createVendorRow(id, name, consent, type) {
+    function createVendorRow(id, name, consent, type, onChange) {
         return renderer_div({
             style: {
                 display: 'flex',
@@ -3481,16 +3744,21 @@ var __webpack_exports__ = {};
                 createBadge({
                     text: consent ? '✓' : '✕',
                     variant: consent ? 'success' : 'error'
+                }),
+                createToggle({
+                    checked: consent,
+                    onChange,
+                    ariaLabel: `Toggle vendor ${id}`
                 })
             ]
         });
     }
     function truncateText(text, maxLength) {
         if (text.length <= maxLength) return text;
-        return text.slice(0, maxLength - 3) + '...';
+        return `${text.slice(0, maxLength - 3)}...`;
     }
     function renderLocationPanel(container, options) {
-        const { getState, onSetOverrides, onClearOverrides } = options;
+        const { getState, onApplyOverrides, onClearOverrides } = options;
         clearElement(container);
         const state = getState();
         if (!state) return void container.appendChild(renderer_div({
@@ -3511,145 +3779,230 @@ var __webpack_exports__ = {};
             createCompactInfoCard('Jurisdiction', locationInfo?.jurisdiction || '—'),
             createCompactInfoCard('Language', translationConfig?.defaultLanguage || '—')
         ];
+        gridItems.push(createCompactInfoCard('GPC', getEffectiveGpcLabel(overrides?.gpc)));
         if (state.model) gridItems.push(createCompactInfoCard('Model', getModelLabel(state.model)));
         const locationGrid = createGrid({
-            columns: 2,
+            columns: 3,
             children: gridItems
         });
         container.appendChild(locationGrid);
+        const initialDraft = getDraftFromOverrides(overrides);
+        let appliedOverrides = normalizeOverrideDraft(initialDraft);
+        let isSubmitting = false;
+        const countryField = createOverrideSelect({
+            label: 'Country',
+            selectOptions: COUNTRY_OPTIONS,
+            value: initialDraft.country
+        });
+        const regionField = createOverrideInput({
+            label: 'Region',
+            placeholder: 'e.g., CA, NY, BE',
+            value: initialDraft.region
+        });
+        const languageField = createOverrideInput({
+            label: 'Language',
+            placeholder: 'e.g., de, fr, en-US',
+            value: initialDraft.language
+        });
+        const gpcField = createOverrideSelect({
+            label: 'GPC',
+            selectOptions: GPC_OPTIONS,
+            value: initialDraft.gpc
+        });
+        const formStatus = span({
+            className: styles_components_module.overrideStatus,
+            text: 'In sync'
+        });
+        const applyButton = createButton({
+            text: 'Apply',
+            variant: 'primary',
+            small: true,
+            disabled: true,
+            onClick: ()=>{
+                applyDraft();
+            }
+        });
+        const revertButton = createButton({
+            text: 'Revert',
+            small: true,
+            disabled: true,
+            onClick: ()=>{
+                setDraftValues(getDraftFromOverrides(appliedOverrides));
+                updateFormState();
+            }
+        });
+        const clearButton = createButton({
+            text: 'Clear',
+            small: true,
+            onClick: ()=>{
+                clearDraftAndOverrides();
+            }
+        });
+        const overrideFieldsGrid = renderer_div({
+            style: {
+                display: 'grid',
+                gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+                gap: '8px 10px'
+            },
+            children: [
+                countryField.element,
+                regionField.element,
+                languageField.element,
+                gpcField.element
+            ]
+        });
         const overrideSection = createSection({
             title: 'Override Settings',
-            actions: [
-                createButton({
-                    text: 'Clear',
-                    small: true,
-                    onClick: onClearOverrides
-                })
-            ],
             children: [
-                createOverrideSelect({
-                    label: 'Country',
-                    selectOptions: COUNTRY_OPTIONS,
-                    value: overrides?.country || '',
-                    onChange: (value)=>onSetOverrides({
-                            country: value || void 0
-                        })
-                }),
-                createOverrideInput({
-                    label: 'Region',
-                    placeholder: 'e.g., CA, NY, BE',
-                    value: overrides?.region || '',
-                    onChange: (value)=>onSetOverrides({
-                            region: value || void 0
-                        })
+                overrideFieldsGrid,
+                span({
+                    className: styles_components_module.overrideHint,
+                    text: 'GPC override only affects opt-out or unregulated jurisdictions.'
                 }),
-                createOverrideInput({
-                    label: 'Language',
-                    placeholder: 'e.g., de, fr, en',
-                    value: overrides?.language || '',
-                    onChange: (value)=>onSetOverrides({
-                            language: value || void 0
-                        })
+                renderer_div({
+                    className: styles_components_module.overrideActions,
+                    children: [
+                        renderer_div({
+                            className: styles_components_module.overrideActionButtons,
+                            children: [
+                                revertButton,
+                                applyButton,
+                                clearButton
+                            ]
+                        }),
+                        formStatus
+                    ]
                 })
             ]
         });
         container.appendChild(overrideSection);
-        const hasOverrides = overrides && (overrides.country || overrides.region || overrides.language);
-        if (hasOverrides) {
-            const overrideBanner = renderer_div({
-                style: {
-                    padding: '8px 16px',
-                    backgroundColor: 'var(--c15t-devtools-badge-info-bg)',
-                    color: 'var(--c15t-devtools-badge-info)',
-                    fontSize: 'var(--c15t-devtools-font-size-xs)',
-                    borderTop: '1px solid var(--c15t-devtools-border)'
-                },
-                text: 'Overrides are active. This may affect consent behavior.'
+        countryField.control.addEventListener('change', updateFormState);
+        regionField.control.addEventListener('input', updateFormState);
+        languageField.control.addEventListener('input', updateFormState);
+        gpcField.control.addEventListener('change', updateFormState);
+        updateFormState();
+        async function applyDraft() {
+            if (isSubmitting) return;
+            const draftOverrides = getDraftOverrides();
+            if (overridesEqual(draftOverrides, appliedOverrides)) return;
+            isSubmitting = true;
+            updateFormState();
+            try {
+                await onApplyOverrides(draftOverrides);
+                appliedOverrides = draftOverrides;
+            } finally{
+                isSubmitting = false;
+                updateFormState();
+            }
+        }
+        async function clearDraftAndOverrides() {
+            if (isSubmitting) return;
+            isSubmitting = true;
+            updateFormState();
+            try {
+                await onClearOverrides();
+                appliedOverrides = {};
+                setDraftValues(getDraftFromOverrides(void 0));
+            } finally{
+                isSubmitting = false;
+                updateFormState();
+            }
+        }
+        function getDraftOverrides() {
+            return normalizeOverrideDraft({
+                country: countryField.control.value,
+                region: regionField.control.value,
+                language: languageField.control.value,
+                gpc: gpcField.control.value
             });
-            container.appendChild(overrideBanner);
+        }
+        function setDraftValues(draft) {
+            countryField.control.value = draft.country;
+            regionField.control.value = draft.region;
+            languageField.control.value = draft.language;
+            gpcField.control.value = draft.gpc;
+        }
+        function updateFormState() {
+            const draftOverrides = getDraftOverrides();
+            const hasDraftChanges = !overridesEqual(draftOverrides, appliedOverrides);
+            applyButton.disabled = !hasDraftChanges || isSubmitting;
+            revertButton.disabled = !hasDraftChanges || isSubmitting;
+            clearButton.disabled = isSubmitting;
+            formStatus.textContent = isSubmitting ? 'Applying...' : hasDraftChanges ? 'Unsaved changes' : hasOverridesValue(appliedOverrides) ? 'Overrides active' : 'No overrides';
+            if (styles_components_module.overrideStatusDirty) formStatus.classList.toggle(styles_components_module.overrideStatusDirty, !isSubmitting && hasDraftChanges);
         }
     }
     function createOverrideInput(options) {
-        const { label, placeholder, value, onChange } = options;
-        let debounceTimer = null;
+        const { label, placeholder, value } = options;
         const inputField = input({
             className: `${styles_components_module.input ?? ''} ${styles_components_module.inputSmall ?? ''}`.trim(),
             placeholder,
-            value,
-            onInput: (e)=>{
-                const target = e.target;
-                if (debounceTimer) clearTimeout(debounceTimer);
-                debounceTimer = setTimeout(()=>{
-                    onChange(target.value);
-                }, 500);
-            }
-        });
-        return renderer_div({
-            style: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                gap: '8px',
-                marginBottom: '8px'
-            },
-            children: [
-                renderer_div({
-                    style: {
-                        fontSize: 'var(--c15t-devtools-font-size-xs)',
-                        color: 'var(--c15t-devtools-text-muted)',
-                        minWidth: '60px'
-                    },
-                    text: label
-                }),
-                renderer_div({
-                    style: {
-                        flex: '1'
-                    },
-                    children: [
-                        inputField
-                    ]
-                })
-            ]
+            value
         });
+        return {
+            element: renderer_div({
+                className: styles_components_module.overrideField,
+                children: [
+                    span({
+                        className: styles_components_module.overrideLabel,
+                        text: label
+                    }),
+                    inputField
+                ]
+            }),
+            control: inputField
+        };
     }
     function createOverrideSelect(options) {
-        const { label, selectOptions, value, onChange } = options;
+        const { label, selectOptions, value } = options;
         const selectField = renderer_select({
             className: `${styles_components_module.input ?? ''} ${styles_components_module.inputSmall ?? ''}`.trim(),
             options: selectOptions,
-            selectedValue: value,
-            onChange: (e)=>{
-                const target = e.target;
-                onChange(target.value);
-            }
-        });
-        return renderer_div({
-            style: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                gap: '8px',
-                marginBottom: '8px'
-            },
-            children: [
-                renderer_div({
-                    style: {
-                        fontSize: 'var(--c15t-devtools-font-size-xs)',
-                        color: 'var(--c15t-devtools-text-muted)',
-                        minWidth: '60px'
-                    },
-                    text: label
-                }),
-                renderer_div({
-                    style: {
-                        flex: '1'
-                    },
-                    children: [
-                        selectField
-                    ]
-                })
-            ]
+            selectedValue: value
         });
+        return {
+            element: renderer_div({
+                className: styles_components_module.overrideField,
+                children: [
+                    span({
+                        className: styles_components_module.overrideLabel,
+                        text: label
+                    }),
+                    selectField
+                ]
+            }),
+            control: selectField
+        };
+    }
+    function getDraftFromOverrides(overrides) {
+        return {
+            country: overrides?.country ?? '',
+            region: overrides?.region ?? '',
+            language: overrides?.language ?? '',
+            gpc: overrides?.gpc === true ? 'true' : overrides?.gpc === false ? 'false' : ''
+        };
+    }
+    function normalizeOverrideDraft(draft) {
+        return {
+            country: normalizeAlphaCode(draft.country),
+            region: normalizeAlphaCode(draft.region),
+            language: normalizeLanguageCode(draft.language),
+            gpc: 'true' === draft.gpc ? true : 'false' === draft.gpc ? false : void 0
+        };
+    }
+    function normalizeAlphaCode(value) {
+        const normalized = value.trim().toUpperCase();
+        return normalized || void 0;
+    }
+    function normalizeLanguageCode(value) {
+        const normalized = value.trim();
+        return normalized || void 0;
+    }
+    function overridesEqual(a, b) {
+        return a.country === b.country && a.region === b.region && a.language === b.language && a.gpc === b.gpc;
+    }
+    function hasOverridesValue(overrides) {
+        return Boolean(overrides.country || overrides.region || overrides.language || void 0 !== overrides.gpc);
     }
     const COUNTRY_OPTIONS = [
         {
@@ -3773,6 +4126,32 @@ var __webpack_exports__ = {};
             label: 'ZA - South Africa'
         }
     ];
+    const GPC_OPTIONS = [
+        {
+            value: '',
+            label: '-- Browser Default --'
+        },
+        {
+            value: 'true',
+            label: 'Force On (Simulated)'
+        },
+        {
+            value: 'false',
+            label: 'Force Off (Simulated)'
+        }
+    ];
+    function getEffectiveGpcLabel(gpcOverride) {
+        if (true === gpcOverride) return 'On (Override)';
+        if (false === gpcOverride) return 'Off (Override)';
+        if ('undefined' == typeof window || 'undefined' == typeof navigator) return 'Unknown';
+        try {
+            const nav = navigator;
+            const value = nav.globalPrivacyControl;
+            return true === value || '1' === value ? 'Active' : 'Inactive';
+        } catch  {
+            return 'Unknown';
+        }
+    }
     function getModelLabel(model) {
         switch(model){
             case 'opt-in':
@@ -3789,9 +4168,11 @@ var __webpack_exports__ = {};
         return renderer_div({
             className: styles_components_module.gridCard ?? '',
             style: {
+                padding: '6px 8px',
+                minHeight: 'auto',
                 flexDirection: 'column',
                 alignItems: 'flex-start',
-                gap: '2px'
+                gap: '1px'
             },
             children: [
                 span({
@@ -3816,34 +4197,38 @@ var __webpack_exports__ = {};
     function scanDOM(state) {
         const results = [];
         const configuredScripts = state.scripts || [];
-        const managedDomains = new Map();
+        const managedResources = [];
         for (const script of configuredScripts)if (script.src) try {
             const url = new URL(script.src, window.location.origin);
-            if (url.hostname !== window.location.hostname) managedDomains.set(url.hostname, script.id);
+            if (url.hostname !== window.location.hostname) managedResources.push({
+                scriptId: script.id,
+                domain: url.hostname,
+                pathPrefix: normalizePathname(url.pathname)
+            });
         } catch  {}
         const scriptElements = document.querySelectorAll("script[src]");
         for (const el of scriptElements){
             const src = el.getAttribute('src');
             if (!src) continue;
-            const resource = checkResource(src, "script", managedDomains);
+            const resource = checkResource(src, "script", managedResources);
             if (resource) results.push(resource);
         }
         const iframeElements = document.querySelectorAll('iframe[src]');
         for (const el of iframeElements){
             const src = el.getAttribute('src');
             if (!src) continue;
-            const resource = checkResource(src, 'iframe', managedDomains);
+            const resource = checkResource(src, 'iframe', managedResources);
             if (resource) results.push(resource);
         }
         return results;
     }
-    function checkResource(src, type, managedDomains) {
+    function checkResource(src, type, managedResources) {
         try {
             const url = new URL(src, window.location.origin);
             const domain = url.hostname;
             if (domain === window.location.hostname) return null;
             if ('data:' === url.protocol || 'blob:' === url.protocol) return null;
-            const managedBy = managedDomains.get(domain);
+            const managedBy = findManagedScriptId(url, managedResources);
             const isManaged = Boolean(managedBy);
             return {
                 type,
@@ -3855,6 +4240,21 @@ var __webpack_exports__ = {};
         } catch  {}
         return null;
     }
+    function findManagedScriptId(url, managedResources) {
+        const domain = url.hostname;
+        const path = normalizePathname(url.pathname);
+        let bestMatch = null;
+        for (const matcher of managedResources)if (matcher.domain === domain) {
+            if ('/' === matcher.pathPrefix || path.startsWith(matcher.pathPrefix)) {
+                if (!bestMatch || matcher.pathPrefix.length > bestMatch.pathPrefix.length) bestMatch = matcher;
+            }
+        }
+        return bestMatch?.scriptId;
+    }
+    function normalizePathname(pathname) {
+        const trimmed = pathname.trim();
+        return trimmed.length > 0 ? trimmed : '/';
+    }
     function createDomScannerSection(state) {
         let resultsContainer = null;
         let lastScanResults = [];
@@ -4019,7 +4419,7 @@ var __webpack_exports__ = {};
   <polyline points="8 6 2 12 8 18"></polyline>
 </svg>`;
     function renderScriptsPanel(container, options) {
-        const { getState } = options;
+        const { getState, getEvents } = options;
         clearElement(container);
         const state = getState();
         if (!state) return void container.appendChild(renderer_div({
@@ -4034,6 +4434,7 @@ var __webpack_exports__ = {};
         const scripts = state.scripts || [];
         const loadedScripts = state.loadedScripts || {};
         const networkBlocker = state.networkBlocker;
+        const events = getEvents?.() ?? [];
         if (0 === scripts.length) {
             const scriptsSection = createSection({
                 title: 'Configured Scripts',
@@ -4116,6 +4517,20 @@ var __webpack_exports__ = {};
             ]
         });
         container.appendChild(networkSection);
+        const blockedRequestEvents = events.filter((event)=>'network' === event.type);
+        const networkEventsSection = createSection({
+            title: `Blocked Requests (${blockedRequestEvents.length})`,
+            children: 0 === blockedRequestEvents.length ? [
+                renderer_div({
+                    style: {
+                        fontSize: 'var(--c15t-devtools-font-size-xs)',
+                        color: 'var(--c15t-devtools-text-muted)'
+                    },
+                    text: 'No blocked network requests recorded in this session'
+                })
+            ] : createBlockedRequestContent(blockedRequestEvents)
+        });
+        container.appendChild(networkEventsSection);
         const loadedCount = Object.values(loadedScripts).filter(Boolean).length;
         const totalCount = scripts.length;
         const summarySection = createSection({
@@ -4141,12 +4556,127 @@ var __webpack_exports__ = {};
     }
     function checkScriptConsent(state, category) {
         if (!category) return true;
+        if ('function' == typeof state.has) try {
+            return state.has(category);
+        } catch  {}
         if ('string' == typeof category) {
             const consents = state.consents || {};
             return true === consents[category];
         }
         return false;
     }
+    function createBlockedRequestContent(events) {
+        const stats = new Map();
+        for (const event of events){
+            const ruleId = getEventRuleId(event) ?? 'unknown';
+            stats.set(ruleId, (stats.get(ruleId) ?? 0) + 1);
+        }
+        const statsList = renderer_div({
+            style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '4px',
+                marginBottom: '8px'
+            },
+            children: [
+                ...stats.entries()
+            ].sort((a, b)=>b[1] - a[1]).map(([ruleId, count])=>createInfoRow({
+                    label: 'unknown' === ruleId ? 'Unknown Rule' : `Rule: ${ruleId}`,
+                    value: `${count}`
+                }))
+        });
+        const latestEvents = events.slice(0, 5);
+        const latestList = renderer_div({
+            style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '4px'
+            },
+            children: latestEvents.map((event)=>createInfoRow({
+                    label: `${formatEventTime(event.timestamp)} ${getEventMethod(event)}`,
+                    value: scripts_truncateText(getEventUrl(event), 38)
+                }))
+        });
+        return [
+            statsList,
+            latestList
+        ];
+    }
+    function getEventRuleId(event) {
+        const data = event.data;
+        const rule = data?.rule;
+        const ruleId = rule?.id ?? data?.ruleId;
+        return 'string' == typeof ruleId || 'number' == typeof ruleId ? String(ruleId) : void 0;
+    }
+    function getEventMethod(event) {
+        const data = event.data;
+        const method = data?.method;
+        return 'string' == typeof method ? method.toUpperCase() : 'REQ';
+    }
+    function getEventUrl(event) {
+        const data = event.data;
+        const url = data?.url;
+        return 'string' == typeof url ? url : event.message;
+    }
+    function formatEventTime(timestamp) {
+        return new Date(timestamp).toLocaleTimeString('en-US', {
+            hour12: false,
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit'
+        });
+    }
+    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',
@@ -4284,12 +4814,37 @@ var __webpack_exports__ = {};
         const { namespace = 'c15tStore', onConnect, onStateChange, onDisconnect } = options;
         let store = null;
         let unsubscribe = null;
-        let pollInterval = null;
+        let reconnectTimeout = null;
+        let reconnectAttempts = 0;
+        let hasNotifiedDisconnect = false;
         const listeners = new Set();
+        const INITIAL_RETRY_DELAY_MS = 100;
+        const MAX_RETRY_DELAY_MS = 2000;
+        const DISCONNECT_NOTIFY_ATTEMPTS = 5;
+        function clearReconnectTimer() {
+            if (reconnectTimeout) {
+                clearTimeout(reconnectTimeout);
+                reconnectTimeout = null;
+            }
+        }
+        function resetReconnectState() {
+            reconnectAttempts = 0;
+            hasNotifiedDisconnect = false;
+        }
+        function notifyDisconnectedOnce() {
+            if (hasNotifiedDisconnect) return;
+            hasNotifiedDisconnect = true;
+            onDisconnect?.();
+        }
         function tryConnect() {
             if ('undefined' == typeof window) return false;
             const storeInstance = window[namespace];
             if (storeInstance && 'function' == typeof storeInstance.getState) {
+                if (store === storeInstance && unsubscribe) return true;
+                if (unsubscribe) {
+                    unsubscribe();
+                    unsubscribe = null;
+                }
                 store = storeInstance;
                 unsubscribe = store.subscribe((state)=>{
                     onStateChange?.(state);
@@ -4297,30 +4852,26 @@ var __webpack_exports__ = {};
                 });
                 const currentState = store.getState();
                 onConnect?.(currentState, store);
-                if (pollInterval) {
-                    clearInterval(pollInterval);
-                    pollInterval = null;
-                }
+                clearReconnectTimer();
+                resetReconnectState();
                 return true;
             }
             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);
+            reconnectTimeout = setTimeout(()=>{
+                reconnectTimeout = null;
+                reconnectAttempts++;
+                if (tryConnect()) return;
+                if (reconnectAttempts >= DISCONNECT_NOTIFY_ATTEMPTS) notifyDisconnectedOnce();
+                scheduleReconnect();
+            }, delay);
+        }
         function startPolling() {
-            if (pollInterval) return;
             if (tryConnect()) return;
-            let attempts = 0;
-            const maxAttempts = 50;
-            pollInterval = setInterval(()=>{
-                attempts++;
-                if (tryConnect()) return;
-                if (attempts >= maxAttempts) {
-                    if (pollInterval) {
-                        clearInterval(pollInterval);
-                        pollInterval = null;
-                    }
-                    onDisconnect?.();
-                }
-            }, 100);
+            scheduleReconnect(true);
         }
         startPolling();
         return {
@@ -4334,11 +4885,13 @@ var __webpack_exports__ = {};
                     listeners.delete(listener);
                 };
             },
+            retryConnection: ()=>{
+                if (store) return;
+                resetReconnectState();
+                scheduleReconnect(true);
+            },
             destroy: ()=>{
-                if (pollInterval) {
-                    clearInterval(pollInterval);
-                    pollInterval = null;
-                }
+                clearReconnectTimer();
                 if (unsubscribe) {
                     unsubscribe();
                     unsubscribe = null;
@@ -4366,6 +4919,86 @@ var __webpack_exports__ = {};
     tokens_options.insertStyleElement = insertStyleElement_default();
     injectStylesIntoStyleTag_default()(tokens.A, tokens_options);
     tokens.A && tokens.A.locals && tokens.A.locals;
+    const PANEL_HEIGHT_TRANSITION = 'height var(--c15t-duration-normal, 200ms) var(--c15t-easing, cubic-bezier(0.4, 0, 0.2, 1))';
+    const PANEL_HEIGHT_TRANSITION_MS = 200;
+    const PANEL_HEIGHT_TRANSITION_BUFFER_MS = 80;
+    function normalizeOverridesForPersistence(overrides) {
+        return {
+            country: overrides?.country?.trim() || void 0,
+            region: overrides?.region?.trim() || void 0,
+            language: overrides?.language?.trim() || void 0,
+            gpc: overrides?.gpc
+        };
+    }
+    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;
+    }
+    function createPanelHeightAnimator() {
+        let activePanel = null;
+        let frameId = null;
+        let timeoutId = null;
+        let removeTransitionListener = null;
+        function clearAnimationState() {
+            if (null !== frameId) {
+                window.cancelAnimationFrame(frameId);
+                frameId = null;
+            }
+            if (null !== timeoutId) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+            }
+            if (removeTransitionListener) {
+                removeTransitionListener();
+                removeTransitionListener = null;
+            }
+            if (activePanel) {
+                activePanel.style.height = '';
+                activePanel.style.transition = '';
+                activePanel.style.willChange = '';
+                activePanel = null;
+            }
+        }
+        function animate(panel, previousHeight) {
+            if (!Number.isFinite(previousHeight) || prefersReducedMotion()) return;
+            const nextHeight = panel.getBoundingClientRect().height;
+            if (!Number.isFinite(nextHeight) || Math.abs(nextHeight - previousHeight) < 1) return;
+            clearAnimationState();
+            activePanel = panel;
+            panel.style.height = `${previousHeight}px`;
+            panel.style.willChange = 'height';
+            panel.getBoundingClientRect();
+            const handleTransitionEnd = (event)=>{
+                const transitionEvent = event;
+                if ('string' == typeof transitionEvent.propertyName && transitionEvent.propertyName && 'height' !== transitionEvent.propertyName) return;
+                clearAnimationState();
+            };
+            panel.addEventListener('transitionend', handleTransitionEnd);
+            removeTransitionListener = ()=>{
+                panel.removeEventListener('transitionend', handleTransitionEnd);
+            };
+            frameId = window.requestAnimationFrame(()=>{
+                frameId = null;
+                panel.style.transition = PANEL_HEIGHT_TRANSITION;
+                panel.style.height = `${nextHeight}px`;
+            });
+            timeoutId = setTimeout(()=>{
+                clearAnimationState();
+            }, PANEL_HEIGHT_TRANSITION_MS + PANEL_HEIGHT_TRANSITION_BUFFER_MS);
+        }
+        return {
+            animate,
+            destroy: clearAnimationState
+        };
+    }
     function createDevTools(options = {}) {
         const { namespace = 'c15tStore', position = 'bottom-right', defaultOpen = false } = options;
         const stateManager = createStateManager({
@@ -4373,6 +5006,8 @@ var __webpack_exports__ = {};
             isOpen: defaultOpen
         });
         let originalCallbacks = {};
+        let originalNetworkBlockedCallback;
+        let hasWrappedNetworkBlockerCallback = false;
         const storeConnector = createStoreConnector({
             namespace,
             onConnect: (state, store)=>{
@@ -4416,6 +5051,48 @@ var __webpack_exports__ = {};
                     });
                     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);
+                    if (!persistedOverridesEqual(persistedOverrides, currentOverrides)) store.getState().setOverrides({
+                        country: persistedOverrides.country,
+                        region: persistedOverrides.region,
+                        language: persistedOverrides.language,
+                        gpc: persistedOverrides.gpc
+                    }).then(()=>{
+                        stateManager.addEvent({
+                            type: 'info',
+                            message: 'Applied persisted devtools overrides',
+                            data: {
+                                country: persistedOverrides.country,
+                                region: persistedOverrides.region,
+                                language: persistedOverrides.language,
+                                gpc: persistedOverrides.gpc
+                            }
+                        });
+                    }).catch(()=>{
+                        stateManager.addEvent({
+                            type: 'error',
+                            message: 'Failed to apply persisted devtools overrides'
+                        });
+                    });
+                }
             },
             onDisconnect: ()=>{
                 stateManager.setConnected(false);
@@ -4427,14 +5104,18 @@ var __webpack_exports__ = {};
             onStateChange: ()=>{}
         });
         let tabsInstance = null;
+        const panelHeightAnimator = createPanelHeightAnimator();
         const panelInstance = createPanel({
             stateManager,
             storeConnector,
+            namespace,
             onRenderContent: (container)=>{
                 renderContent(container, stateManager, storeConnector);
             }
         });
         function renderContent(container, stateManager, storeConnector) {
+            const panel = container.parentElement;
+            const previousPanelHeight = panel?.getBoundingClientRect().height ?? 0;
             clearElement(container);
             const storeState = storeConnector.getState();
             const disabledTabs = [];
@@ -4516,38 +5197,46 @@ var __webpack_exports__ = {};
                 case 'location':
                     renderLocationPanel(panelContent, {
                         getState: getStoreState,
-                        onSetOverrides: async (overrides)=>{
+                        onApplyOverrides: async (overrides)=>{
                             const store = storeConnector.getStore();
                             if (store) {
-                                const currentOverrides = store.getState().overrides || {};
                                 await store.getState().setOverrides({
-                                    ...currentOverrides,
-                                    ...overrides
+                                    country: overrides.country,
+                                    region: overrides.region,
+                                    language: overrides.language,
+                                    gpc: overrides.gpc
                                 });
-                                stateManager.addEvent({
-                                    type: 'info',
-                                    message: 'Overrides updated',
-                                    data: overrides
+                                persistOverrides({
+                                    country: overrides.country,
+                                    region: overrides.region,
+                                    language: overrides.language,
+                                    gpc: overrides.gpc
                                 });
-                                await store.getState().initConsentManager();
                                 stateManager.addEvent({
                                     type: 'info',
-                                    message: 'Consent manager re-initialized with new overrides'
+                                    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(void 0);
-                                stateManager.addEvent({
-                                    type: 'info',
-                                    message: 'Overrides cleared'
+                                await store.getState().setOverrides({
+                                    country: void 0,
+                                    region: void 0,
+                                    language: void 0,
+                                    gpc: void 0
                                 });
-                                await store.getState().initConsentManager();
+                                clearPersistedOverrides();
                                 stateManager.addEvent({
                                     type: 'info',
-                                    message: 'Consent manager re-initialized'
+                                    message: 'Overrides cleared'
                                 });
                             }
                         }
@@ -4555,12 +5244,85 @@ var __webpack_exports__ = {};
                     break;
                 case "scripts":
                     renderScriptsPanel(panelContent, {
-                        getState: getStoreState
+                        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);
@@ -4648,6 +5410,7 @@ var __webpack_exports__ = {};
                     });
                     break;
             }
+            if (panel) panelHeightAnimator.animate(panel, previousPanelHeight);
         }
         storeConnector.subscribe(()=>{
             panelInstance.update();
@@ -4665,6 +5428,21 @@ var __webpack_exports__ = {};
                 };
             },
             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
+                        });
+                    }
+                }
+                panelHeightAnimator.destroy();
                 tabsInstance?.destroy();
                 panelInstance.destroy();
                 storeConnector.destroy();
@@ -4677,12 +5455,42 @@ var __webpack_exports__ = {};
     }
     function createDevToolsPanel(options) {
         const { namespace = 'c15tStore' } = options;
+        let originalEmbeddedNetworkBlockedCallback;
+        let hasWrappedEmbeddedNetworkBlocker = false;
         const stateManager = createStateManager({
             isOpen: true
         });
         const storeConnector = createStoreConnector({
             namespace,
-            onConnect: ()=>stateManager.setConnected(true),
+            onConnect: (state, store)=>{
+                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);
+                    if (!persistedOverridesEqual(persistedOverrides, currentOverrides)) store.getState().setOverrides({
+                        country: persistedOverrides.country,
+                        region: persistedOverrides.region,
+                        language: persistedOverrides.language,
+                        gpc: persistedOverrides.gpc
+                    });
+                }
+            },
             onDisconnect: ()=>stateManager.setConnected(false)
         });
         const container = renderer_div({
@@ -4731,29 +5539,61 @@ var __webpack_exports__ = {};
                 case 'location':
                     renderLocationPanel(contentArea, {
                         getState: getStoreState,
-                        onSetOverrides: async (overrides)=>{
+                        onApplyOverrides: async (overrides)=>{
                             const store = storeConnector.getStore();
                             if (store) {
-                                const current = store.getState().overrides || {};
                                 await store.getState().setOverrides({
-                                    ...current,
-                                    ...overrides
+                                    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(void 0);
+                            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
+                        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);
@@ -4814,6 +5654,14 @@ var __webpack_exports__ = {};
         return {
             element: container,
             destroy: ()=>{
+                const store = storeConnector.getStore();
+                if (store && hasWrappedEmbeddedNetworkBlocker) {
+                    const currentNetworkBlocker = store.getState().networkBlocker;
+                    if (currentNetworkBlocker) store.getState().setNetworkBlocker({
+                        ...currentNetworkBlocker,
+                        onRequestBlocked: originalEmbeddedNetworkBlockedCallback
+                    });
+                }
                 unsubscribe();
                 tabsInstance.destroy();
                 storeConnector.destroy();