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

package/dist/tanstack.js

@@ -344,22 +344,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 {
@@ -367,9 +371,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 {
@@ -395,8 +404,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 {
@@ -548,6 +559,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;
@@ -640,6 +695,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",
@@ -1122,16 +1184,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;
 }
@@ -1139,17 +1208,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;
 }
 
@@ -2284,13 +2353,13 @@ function consents_renderConsentsPanel(container, options) {
                 },
                 children: [
                     createButton({
-                        text: 'All',
+                        text: 'Accept',
                         variant: 'primary',
                         small: true,
                         onClick: onAcceptAll
                     }),
                     createButton({
-                        text: 'None',
+                        text: 'Reject',
                         variant: 'default',
                         small: true,
                         onClick: onRejectAll
@@ -2338,16 +2407,22 @@ function consents_renderConsentsPanel(container, options) {
 function formatConsentName(name) {
     return name.replace(/_/g, ' ').replace(/\b\w/g, (l)=>l.toUpperCase());
 }
+let activeFilter = 'all';
+let selectedEventId = null;
 function events_renderEventsPanel(container, options) {
     const { getEvents, onClear } = options;
     renderer_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: [
             renderer_span({
@@ -2358,44 +2433,130 @@ function events_renderEventsPanel(container, options) {
                     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;
+                            events_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;
+                events_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;
+        events_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 createEventItem(event) {
+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, selected, onSelect) {
     const time = formatTime(event.timestamp);
     const icon = getEventIcon(event.type);
     const color = getEventColor(event.type);
@@ -2406,8 +2567,11 @@ function createEventItem(event) {
             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: [
             renderer_span({
                 style: {
@@ -2436,6 +2600,21 @@ function createEventItem(event) {
         ]
     });
 }
+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', {
@@ -2454,7 +2633,10 @@ function getEventIcon(type) {
             return '○';
         case 'error':
             return '✕';
-        case 'info':
+        case 'network':
+            return '◉';
+        case 'iab':
+            return '◆';
         default:
             return '○';
     }
@@ -2468,13 +2650,16 @@ function getEventColor(type) {
             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 iab_renderIabPanel(container, options) {
-    const { getState, onReset } = options;
+    const { getState, onSetPurposeConsent, onSetVendorConsent, onSetSpecialFeatureOptIn, onAcceptAll, onRejectAll, onSave, onReset } = options;
     renderer_clearElement(container);
     const state = getState();
     if (!state) return void container.appendChild(renderer_div({
@@ -2552,7 +2737,9 @@ function iab_renderIabPanel(container, options) {
         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})`,
@@ -2578,7 +2765,9 @@ function iab_renderIabPanel(container, options) {
         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})`,
@@ -2618,7 +2807,9 @@ function iab_renderIabPanel(container, options) {
                 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: [
@@ -2637,7 +2828,9 @@ function iab_renderIabPanel(container, options) {
                 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: [
@@ -2659,15 +2852,40 @@ function iab_renderIabPanel(container, options) {
         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
@@ -2676,7 +2894,7 @@ function iab_renderIabPanel(container, options) {
     });
     container.appendChild(footer);
 }
-function createPurposeRow(id, name, consent) {
+function createPurposeRow(id, name, consent, onChange, ariaKind = 'purpose') {
     return renderer_div({
         style: {
             display: 'flex',
@@ -2699,14 +2917,28 @@ function createPurposeRow(id, name, consent) {
                 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',
@@ -2753,16 +2985,21 @@ function createVendorRow(id, name, consent, type) {
             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 location_renderLocationPanel(container, options) {
-    const { getState, onSetOverrides, onClearOverrides } = options;
+    const { getState, onApplyOverrides, onClearOverrides } = options;
     renderer_clearElement(container);
     const state = getState();
     if (!state) return void container.appendChild(renderer_div({
@@ -2783,145 +3020,230 @@ function location_renderLocationPanel(container, options) {
         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 = renderer_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,
+            renderer_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: [
+                renderer_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: [
+                renderer_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 = [
     {
@@ -3045,6 +3367,32 @@ const COUNTRY_OPTIONS = [
         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':
@@ -3061,9 +3409,11 @@ function createCompactInfoCard(label, value) {
     return renderer_div({
         className: styles_components_module.gridCard ?? '',
         style: {
+            padding: '6px 8px',
+            minHeight: 'auto',
             flexDirection: 'column',
             alignItems: 'flex-start',
-            gap: '2px'
+            gap: '1px'
         },
         children: [
             renderer_span({
@@ -3088,34 +3438,38 @@ const dismissedResources = new Set();
 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,
@@ -3127,6 +3481,21 @@ function checkResource(src, type, managedDomains) {
     } 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 = [];
@@ -3291,7 +3660,7 @@ const CODE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" f
   <polyline points="8 6 2 12 8 18"></polyline>
 </svg>`;
 function scripts_renderScriptsPanel(container, options) {
-    const { getState } = options;
+    const { getState, getEvents } = options;
     renderer_clearElement(container);
     const state = getState();
     if (!state) return void container.appendChild(renderer_div({
@@ -3306,6 +3675,7 @@ function scripts_renderScriptsPanel(container, options) {
     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',
@@ -3388,6 +3758,20 @@ function scripts_renderScriptsPanel(container, options) {
         ]
     });
     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({
@@ -3413,12 +3797,127 @@ function scripts_renderScriptsPanel(container, options) {
 }
 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 override_storage_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 override_storage_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 override_storage_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',
@@ -3556,12 +4055,37 @@ function store_connector_createStoreConnector(options = {}) {
     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);
@@ -3569,30 +4093,26 @@ function store_connector_createStoreConnector(options = {}) {
             });
             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 {
@@ -3606,11 +4126,13 @@ function store_connector_createStoreConnector(options = {}) {
                 listeners.delete(listener);
             };
         },
+        retryConnection: ()=>{
+            if (store) return;
+            resetReconnectState();
+            scheduleReconnect(true);
+        },
         destroy: ()=>{
-            if (pollInterval) {
-                clearInterval(pollInterval);
-                pollInterval = null;
-            }
+            clearReconnectTimer();
             if (unsubscribe) {
                 unsubscribe();
                 unsubscribe = null;
@@ -3629,14 +4151,61 @@ tokens_options.domAPI = styleDomAPI_default();
 tokens_options.insertStyleElement = insertStyleElement_default();
 injectStylesIntoStyleTag_default()(tokens.A, tokens_options);
 tokens.A && tokens.A.locals && tokens.A.locals;
+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 createDevToolsPanel(options) {
     const { namespace = 'c15tStore' } = options;
+    let originalEmbeddedNetworkBlockedCallback;
+    let hasWrappedEmbeddedNetworkBlocker = false;
     const stateManager = state_manager_createStateManager({
         isOpen: true
     });
     const storeConnector = store_connector_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 = override_storage_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({
@@ -3685,29 +4254,61 @@ function createDevToolsPanel(options) {
             case 'location':
                 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
+                            });
+                            override_storage_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
+                        });
+                        override_storage_clearPersistedOverrides();
                     }
                 });
                 break;
             case "scripts":
                 scripts_renderScriptsPanel(contentArea, {
-                    getState: getStoreState
+                    getState: getStoreState,
+                    getEvents: ()=>stateManager.getState().eventLog
                 });
                 break;
             case 'iab':
                 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 reset_consents_resetAllConsents(store);
@@ -3768,6 +4369,14 @@ 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
+                });
+            }
             unsubscribe();
             tabsInstance.destroy();
             storeConnector.destroy();