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

package/README.md

@@ -5,7 +5,8 @@ Developer tools for debugging and inspecting c15t consent management state.
 ## Features
 
 - **Consents Panel**: View and toggle consent states in real-time
-- **Location Panel**: Inspect detected location and set overrides
+- **Location Panel**: Inspect location and apply geo/language overrides
+- **Policy Panel**: Inspect detailed runtime policy-pack decision data
 - **Scripts Panel**: Monitor script loading status
 - **Actions Panel**: Quick actions for testing consent flows
 - **Framework Agnostic**: Pure JavaScript core with React wrapper
@@ -119,10 +120,20 @@ window.__c15tDevTools.getState();
 ### Location
 
 - Detected country, region, and jurisdiction
+- Compact active policy summary (policy ID + matcher + snapshot status)
 - Set country, region, and language overrides
 - View active consent model with description
 - Clear all overrides
 
+### Policy
+
+- Runtime policy decision details from `/init`
+- Policy ID, match strategy, and fingerprint
+- Consent model, scope mode, purpose scope
+- UI constraints (mode, allowed actions, primary action)
+- i18n profile, expiry, and proof-capture summary
+- Snapshot token presence indicator
+
 ### Scripts
 
 - List configured scripts with consent requirements

package/dist/index.cjs

@@ -2206,6 +2206,27 @@ var __webpack_exports__ = {};
     panel_module_options.insertStyleElement = insertStyleElement_default();
     injectStylesIntoStyleTag_default()(panel_module.A, panel_module_options);
     const styles_panel_module = panel_module.A && panel_module.A.locals ? panel_module.A.locals : void 0;
+    function formatInitSource(source, detail) {
+        const label = (()=>{
+            switch(source){
+                case 'ssr':
+                    return 'SSR Prefetch';
+                case 'backend':
+                    return 'Backend';
+                case 'backend-cache-hit':
+                    return 'Backend (Cache Hit)';
+                case 'offline-fallback':
+                    return 'Offline Fallback';
+                case 'offline-mode':
+                    return 'Offline Mode';
+                case 'custom':
+                    return 'Custom Client';
+                default:
+                    return '—';
+            }
+        })();
+        return detail ? `${label} [${detail}]` : label;
+    }
     const PREFERENCE_TRIGGER_SELECTORS = '[data-c15t-trigger], [aria-label*="privacy settings" i], [aria-label*="preference" i]';
     const PREVIOUS_DISPLAY_ATTR = 'data-c15t-devtools-prev-display';
     function detectPreferenceTrigger() {
@@ -2242,7 +2263,7 @@ var __webpack_exports__ = {};
         }
         return null;
     }
-    const version = '2.0.0-rc.4';
+    const version = '2.0.0-rc.5';
     const DEVTOOLS_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 446 445" aria-label="c15t">
   <path fill="currentColor" d="M223.178.313c39.064 0 70.732 31.668 70.732 70.732-.001 39.064-31.668 70.731-70.732 70.731-12.181 0-23.642-3.079-33.649-8.502l-55.689 55.689a70.267 70.267 0 0 1 5.574 13.441h167.531c8.695-29.217 35.762-50.523 67.804-50.523 39.064 0 70.731 31.668 70.731 70.732s-31.668 70.732-70.731 70.732c-32.042 0-59.108-21.306-67.803-50.523H139.413a70.417 70.417 0 0 1-7.888 17.396l54.046 54.046c10.893-6.851 23.786-10.815 37.605-10.815 39.064 0 70.732 31.669 70.732 70.733 0 39.064-31.668 70.731-70.732 70.731s-70.732-31.667-70.732-70.731c0-10.518 2.296-20.499 6.414-29.471l-57.78-57.78c-8.972 4.117-18.952 6.414-29.47 6.414-39.063 0-70.731-31.668-70.732-70.732 0-39.064 31.669-70.732 70.733-70.732 12.18 0 23.642 3.079 33.649 8.502l55.688-55.688c-5.423-10.007-8.502-21.469-8.502-33.65 0-39.064 31.668-70.733 70.732-70.733Zm0 343.555c-16.742 0-30.314 13.572-30.314 30.314 0 16.741 13.572 30.313 30.314 30.313s30.314-13.572 30.314-30.313c0-16.742-13.572-30.314-30.314-30.314ZM71.611 192.299c-16.742 0-30.315 13.572-30.315 30.314s13.573 30.314 30.315 30.314c16.741 0 30.313-13.572 30.313-30.314 0-16.741-13.572-30.314-30.313-30.314Zm303.138 0c-16.729 0-30.294 13.551-30.315 30.275l.001.039-.001.038c.021 16.725 13.586 30.276 30.315 30.276 16.741 0 30.313-13.572 30.313-30.314 0-16.741-13.572-30.314-30.313-30.314ZM223.178 40.73c-16.742 0-30.314 13.573-30.314 30.315s13.573 30.313 30.314 30.313c16.742 0 30.313-13.572 30.314-30.313 0-16.742-13.572-30.314-30.314-30.315Z"/>
 </svg>`;
@@ -2626,6 +2647,7 @@ var __webpack_exports__ = {};
             const storeState = storeConnector.getState();
             const isLoading = storeState?.isLoadingConsentInfo ?? false;
             const diagnostics = storeConnector.getDiagnostics();
+            const initSource = formatInitSource(storeState?.initDataSource ?? null, storeState?.initDataSourceDetail ?? null);
             const statusChildren = [
                 renderer_span({
                     className: `${styles_panel_module.statusDot} ${isConnected ? styles_panel_module.statusConnected : styles_panel_module.statusDisconnected}`
@@ -2642,6 +2664,10 @@ var __webpack_exports__ = {};
                 className: styles_panel_module.footerMeta,
                 text: `· ${diagnostics.namespace} · retry ${diagnostics.reconnectAttempts} · next ${formatRetryDelay(diagnostics.nextRetryInMs)}`
             }));
+            if (isConnected) statusChildren.push(renderer_span({
+                className: styles_panel_module.footerMeta,
+                text: `· Init: ${initSource}`
+            }));
             footerElement.appendChild(renderer_div({
                 className: styles_panel_module.footerStatus,
                 children: statusChildren
@@ -2808,6 +2834,11 @@ var __webpack_exports__ = {};
   <circle cx="12" cy="12" r="10"></circle>
   <line x1="2" y1="12" x2="22" y2="12"></line>
   <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+</svg>`;
+    const POLICY_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
+  <path d="M9 12h6"></path>
+  <path d="M12 9v6"></path>
 </svg>`;
     const SCRIPTS_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
   <polyline points="16 18 22 12 16 6"></polyline>
@@ -2836,6 +2867,11 @@ var __webpack_exports__ = {};
             label: 'Location',
             icon: LOCATION_ICON
         },
+        {
+            id: 'policy',
+            label: 'Policy',
+            icon: POLICY_ICON
+        },
         {
             id: 'consents',
             label: 'Consents',
@@ -2996,6 +3032,7 @@ var __webpack_exports__ = {};
             const forcedOverflowTab = showOverflowSecondTabInStrip ? preferredSecondTab : overflowSecondTab;
             const layoutTabIds = [
                 'location',
+                'policy',
                 stripSecondTab,
                 "scripts",
                 'actions',
@@ -3660,7 +3697,6 @@ var __webpack_exports__ = {};
     function getNamespace(state) {
         return state.config?.meta?.namespace || 'c15tStore';
     }
-    const consentSearchByContainer = new WeakMap();
     function renderConsentsPanel(container, options) {
         const { getState, onConsentChange, onSave, onAcceptAll, onRejectAll, onReset } = options;
         clearElement(container);
@@ -3679,40 +3715,15 @@ var __webpack_exports__ = {};
                 ct.name,
                 ct
             ]));
-        const searchQuery = consentSearchByContainer.get(container) ?? '';
         const consentEntries = Object.entries(displayConsents);
-        const filteredConsentEntries = consentEntries.filter(([name])=>{
-            if (!searchQuery) return true;
-            const consentType = consentTypeMap.get(name);
-            const displayName = consentType?.name || name;
-            return `${name} ${displayName}`.toLowerCase().includes(searchQuery);
-        });
-        const showSearchInput = consentEntries.length > 4;
-        if (showSearchInput) container.appendChild(renderer_div({
-            style: {
-                padding: '8px 0 10px'
-            },
-            children: [
-                createInput({
-                    value: searchQuery,
-                    placeholder: 'Filter consents…',
-                    ariaLabel: 'Filter consents',
-                    small: true,
-                    onInput: (value)=>{
-                        consentSearchByContainer.set(container, value.trim().toLowerCase());
-                        renderConsentsPanel(container, options);
-                    }
-                })
-            ]
-        }));
-        if (0 === filteredConsentEntries.length) container.appendChild(renderer_div({
+        if (0 === consentEntries.length) container.appendChild(renderer_div({
             style: {
                 padding: '24px',
                 textAlign: 'center',
                 color: 'var(--c15t-devtools-text-muted)',
                 fontSize: 'var(--c15t-devtools-font-size-sm)'
             },
-            text: 0 === consentEntries.length ? 'No consents configured' : 'No matching consents'
+            text: 'No consents configured'
         }));
         else {
             if (isIabMode) {
@@ -3730,7 +3741,7 @@ var __webpack_exports__ = {};
                 container.appendChild(iabNotice);
             }
             const gridCards = [];
-            for (const [name, value] of filteredConsentEntries){
+            for (const [name, value] of consentEntries){
                 const consentType = consentTypeMap.get(name);
                 const isNecessary = 'necessary' === name;
                 const displayName = consentType?.name || name;
@@ -4489,11 +4500,15 @@ var __webpack_exports__ = {};
         const locationInfo = state.locationInfo;
         const overrides = state.overrides;
         const translationConfig = state.translationConfig;
+        const initData = state.lastBannerFetchData;
+        const activePolicy = initData?.policy;
+        const policyDecision = initData?.policyDecision;
+        const initSource = formatInitSource(state.initDataSource, state.initDataSourceDetail);
         const gridItems = [
             createCompactInfoCard('Country', locationInfo?.countryCode || '—'),
             createCompactInfoCard('Region', locationInfo?.regionCode || '—'),
-            createCompactInfoCard('Jurisdiction', locationInfo?.jurisdiction || '—'),
-            createCompactInfoCard('Language', translationConfig?.defaultLanguage || '—')
+            createCompactInfoCard('Language', translationConfig?.defaultLanguage || '—'),
+            createCompactInfoCard('Init Source', initSource)
         ];
         gridItems.push(createCompactInfoCard('GPC', getEffectiveGpcLabel(overrides?.gpc)));
         if (state.model) gridItems.push(createCompactInfoCard('Model', getModelLabel(state.model)));
@@ -4501,7 +4516,6 @@ var __webpack_exports__ = {};
             columns: 3,
             children: gridItems
         });
-        container.appendChild(locationGrid);
         const initialDraft = getDraftFromOverrides(overrides);
         let appliedOverrides = normalizeOverrideDraft(initialDraft);
         let isSubmitting = false;
@@ -4592,6 +4606,12 @@ var __webpack_exports__ = {};
             ]
         });
         container.appendChild(overrideSection);
+        container.appendChild(locationGrid);
+        container.appendChild(createActivePolicySummarySection({
+            policy: activePolicy,
+            policyDecision,
+            policySnapshotToken: initData?.policySnapshotToken
+        }));
         countryField.control.addEventListener('change', updateFormState);
         regionField.control.addEventListener('input', updateFormState);
         languageField.control.addEventListener('input', updateFormState);
@@ -4880,15 +4900,53 @@ var __webpack_exports__ = {};
                 return 'None';
         }
     }
+    function createActivePolicySummarySection(options) {
+        const { policy, policyDecision, policySnapshotToken } = options;
+        if (!policy && !policyDecision) return createSection({
+            title: 'Active Policy',
+            children: [
+                renderer_div({
+                    style: {
+                        padding: '10px 12px',
+                        fontSize: 'var(--c15t-devtools-font-size-sm)',
+                        color: 'var(--c15t-text-muted)'
+                    },
+                    text: 'No active policy matched.'
+                })
+            ]
+        });
+        const cards = [
+            createCompactInfoCard('Policy ID', policy?.id ?? policyDecision?.policyId ?? '—'),
+            createCompactInfoCard('Matched By', policyDecision?.matchedBy ?? '—'),
+            createCompactInfoCard('Snapshot Token', policySnapshotToken ? 'present' : 'missing')
+        ];
+        return createSection({
+            title: 'Active Policy',
+            children: [
+                renderer_div({
+                    style: {
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+                        gap: 'var(--c15t-space-sm, 0.5rem)'
+                    },
+                    children: cards
+                }),
+                renderer_span({
+                    className: styles_components_module.overrideHint,
+                    text: 'Open the Policy tab for full policy-pack diagnostics.'
+                })
+            ]
+        });
+    }
     function createCompactInfoCard(label, value) {
         return renderer_div({
             className: styles_components_module.gridCard ?? '',
             style: {
-                padding: '6px 8px',
+                padding: '8px 10px',
                 minHeight: 'auto',
                 flexDirection: 'column',
                 alignItems: 'flex-start',
-                gap: '1px'
+                gap: '2px'
             },
             children: [
                 renderer_span({
@@ -4909,6 +4967,253 @@ var __webpack_exports__ = {};
             ]
         });
     }
+    function renderPolicyPanel(container, options) {
+        const { getState } = options;
+        clearElement(container);
+        const state = getState();
+        if (!state) return void container.appendChild(createDisconnectedState());
+        const initData = state.lastBannerFetchData;
+        const activePolicy = initData?.policy;
+        const policyDecision = initData?.policyDecision;
+        const initSource = formatInitSource(state.initDataSource, state.initDataSourceDetail);
+        container.appendChild(createMatchTraceSection({
+            policyDecision,
+            policyId: activePolicy?.id ?? policyDecision?.policyId
+        }));
+        if (!activePolicy && !policyDecision) return void container.appendChild(createSection({
+            title: 'Policy',
+            children: [
+                renderer_div({
+                    style: {
+                        padding: '10px 12px',
+                        fontSize: 'var(--c15t-devtools-font-size-sm)',
+                        color: 'var(--c15t-text-muted)'
+                    },
+                    text: 'No active policy matched for this request.'
+                }),
+                createHint(`Init Source: ${initSource}`)
+            ]
+        }));
+        container.appendChild(createSection({
+            title: 'Policy',
+            children: [
+                policy_createGrid(3, [
+                    createCard('ID', activePolicy?.id ?? policyDecision?.policyId ?? '—'),
+                    createCard('Model', policy_getModelLabel(activePolicy?.model)),
+                    createCard('Scope', getScopeModeLabel(activePolicy?.consent?.scopeMode ?? state.policyScopeMode)),
+                    createCard('Categories', formatList(state.policyCategories ?? activePolicy?.consent?.categories)),
+                    createCard('Preselected', formatList(activePolicy?.consent?.preselectedCategories)),
+                    createCard('Expiry', 'number' == typeof activePolicy?.consent?.expiryDays ? `${activePolicy.consent.expiryDays}d` : '—')
+                ]),
+                createHint(`${initSource} · ${formatFingerprint(policyDecision?.fingerprint)}`)
+            ]
+        }));
+        const uiMode = activePolicy?.ui?.mode;
+        if (uiMode && 'none' !== uiMode) {
+            const bannerCards = buildSurfaceCards('Banner', activePolicy?.ui?.banner, state.policyBanner);
+            const dialogCards = buildSurfaceCards('Dialog', activePolicy?.ui?.dialog, state.policyDialog);
+            if (bannerCards.length > 0 || dialogCards.length > 0) container.appendChild(createSection({
+                title: `UI · ${uiMode}`,
+                children: [
+                    policy_createGrid(3, [
+                        ...bannerCards,
+                        ...dialogCards
+                    ])
+                ]
+            }));
+        }
+        const proofLabel = formatProofSummary(activePolicy?.proof);
+        const snapshotLabel = initData?.policySnapshotToken ? 'present' : 'missing';
+        container.appendChild(createSection({
+            title: 'Proof & Snapshot',
+            children: [
+                policy_createGrid(3, [
+                    createCard('Proof', proofLabel),
+                    createCard('Snapshot', snapshotLabel),
+                    createCard('I18n', activePolicy?.i18n?.messageProfile ?? activePolicy?.i18n?.language ?? '—')
+                ])
+            ]
+        }));
+    }
+    function buildSurfaceCards(prefix, policySurface, storeSurface) {
+        const policyLayout = Array.isArray(policySurface?.layout) && 0 === policySurface.layout.length ? null : policySurface?.layout ?? null;
+        const storeLayout = Array.isArray(storeSurface.layout) && 0 === storeSurface.layout.length ? null : storeSurface.layout ?? null;
+        const actions = formatList(policySurface?.allowedActions ?? storeSurface.allowedActions);
+        const primary = policySurface?.primaryAction ?? storeSurface.primaryAction ?? null;
+        const layout = policyLayout ?? storeLayout;
+        const direction = policySurface?.direction ?? storeSurface.direction ?? null;
+        const profile = policySurface?.uiProfile ?? storeSurface.uiProfile ?? null;
+        const scrollLock = policySurface?.scrollLock ?? storeSurface.scrollLock ?? null;
+        if ('—' === actions && !primary && !layout && !direction && !profile && null === scrollLock) return [];
+        const cards = [
+            createCard(`${prefix} Actions`, actions)
+        ];
+        if (primary) cards.push(createCard(`${prefix} Primary`, primary));
+        if (layout) cards.push(createCard(`${prefix} Layout`, Array.isArray(layout) ? layout.map((group)=>Array.isArray(group) ? `[${group.join(', ')}]` : group).join(' / ') : layout));
+        if (direction) cards.push(createCard(`${prefix} Direction`, direction));
+        if (profile) cards.push(createCard(`${prefix} Profile`, profile));
+        if (null !== scrollLock) cards.push(createCard(`${prefix} Scroll Lock`, scrollLock ? 'on' : 'off'));
+        return cards;
+    }
+    function createMatchTraceSection(options) {
+        const { policyDecision, policyId } = options;
+        const entries = buildTraceEntries(policyDecision, policyId);
+        return createSection({
+            title: 'Match Trace',
+            children: [
+                renderer_div({
+                    style: {
+                        display: 'grid',
+                        gridTemplateColumns: '1fr',
+                        gap: '4px'
+                    },
+                    children: entries.map((entry)=>renderer_div({
+                            className: styles_components_module.gridCard ?? '',
+                            style: {
+                                padding: '6px 10px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                                gap: '10px'
+                            },
+                            children: [
+                                renderer_span({
+                                    style: {
+                                        fontSize: 'var(--c15t-devtools-font-size-xs)',
+                                        color: 'var(--c15t-text-muted)',
+                                        fontFamily: 'ui-monospace, monospace'
+                                    },
+                                    text: entry.step
+                                }),
+                                renderer_span({
+                                    style: {
+                                        fontSize: 'var(--c15t-devtools-font-size-xs)',
+                                        fontFamily: 'ui-monospace, monospace'
+                                    },
+                                    text: entry.result
+                                })
+                            ]
+                        }))
+                }),
+                createHint('region → country → default · fallback on geo failure · Simulate via Location tab')
+            ]
+        });
+    }
+    function buildTraceEntries(decision, policyId) {
+        if (!decision) return [
+            {
+                step: 'decision metadata',
+                result: 'UNAVAILABLE'
+            }
+        ];
+        const country = decision.country ?? 'n/a';
+        const regionKey = decision.country && decision.region ? `${decision.country}-${decision.region}` : 'n/a';
+        const resolved = policyId ?? decision.policyId ?? 'unknown';
+        const matched = decision.matchedBy;
+        return [
+            {
+                step: `region(${regionKey})`,
+                result: 'region' === matched ? `MATCH → ${resolved}` : 'MISS'
+            },
+            {
+                step: `country(${country})`,
+                result: 'country' === matched ? `MATCH → ${resolved}` : 'region' === matched ? 'SKIPPED' : 'MISS'
+            },
+            {
+                step: 'fallback(geo-fail)',
+                result: 'fallback' === matched ? `MATCH → ${resolved}` : 'SKIPPED'
+            },
+            {
+                step: 'default(catch-all)',
+                result: 'default' === matched ? `MATCH → ${resolved}` : 'SKIPPED'
+            }
+        ];
+    }
+    function policy_getModelLabel(model) {
+        switch(model){
+            case 'opt-in':
+                return 'Opt-In';
+            case 'opt-out':
+                return 'Opt-Out';
+            case 'iab':
+                return 'IAB TCF';
+            default:
+                return 'None';
+        }
+    }
+    function getScopeModeLabel(mode) {
+        switch(mode){
+            case 'strict':
+                return 'Strict';
+            case 'permissive':
+                return 'Permissive';
+            default:
+                return '—';
+        }
+    }
+    function formatList(items) {
+        if (!items || 0 === items.length) return '—';
+        if (items.includes('*')) return '* (all)';
+        return items.join(', ');
+    }
+    function formatProofSummary(proof) {
+        if (!proof) return '—';
+        const parts = [];
+        if (proof.storeIp) parts.push('IP');
+        if (proof.storeUserAgent) parts.push('UA');
+        if (proof.storeLanguage) parts.push('Lang');
+        return parts.length > 0 ? parts.join(', ') : 'none';
+    }
+    function formatFingerprint(fingerprint) {
+        if (!fingerprint) return 'no fingerprint';
+        if (fingerprint.length <= 12) return fingerprint;
+        return `${fingerprint.slice(0, 8)}…${fingerprint.slice(-4)}`;
+    }
+    function createCard(label, value) {
+        return renderer_div({
+            className: styles_components_module.gridCard ?? '',
+            style: {
+                padding: '8px 10px',
+                minHeight: 'auto',
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                gap: '2px'
+            },
+            children: [
+                renderer_span({
+                    style: {
+                        fontSize: 'var(--c15t-devtools-font-size-xs)',
+                        color: 'var(--c15t-text-muted)'
+                    },
+                    text: label
+                }),
+                renderer_span({
+                    style: {
+                        fontSize: 'var(--c15t-font-size-sm)',
+                        fontWeight: '500',
+                        fontFamily: 'ui-monospace, monospace'
+                    },
+                    text: value
+                })
+            ]
+        });
+    }
+    function policy_createGrid(columns, children) {
+        return renderer_div({
+            style: {
+                display: 'grid',
+                gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+                gap: 'var(--c15t-space-sm, 0.5rem)'
+            },
+            children
+        });
+    }
+    function createHint(text) {
+        return renderer_span({
+            className: styles_components_module.overrideHint,
+            text
+        });
+    }
     const dismissedResources = new Set();
     function scanDOM(state) {
         const results = [];
@@ -5547,6 +5852,11 @@ var __webpack_exports__ = {};
                         }
                     });
                     break;
+                case 'policy':
+                    renderPolicyPanel(container, {
+                        getState: getStoreState
+                    });
+                    break;
                 case "scripts":
                     renderScriptsPanel(container, {
                         getState: getStoreState,
@@ -5683,7 +5993,7 @@ var __webpack_exports__ = {};
         } catch  {}
     }
     function isDevToolsTab(value) {
-        return 'consents' === value || 'location' === value || "scripts" === value || 'iab' === value || 'events' === value || 'actions' === value;
+        return 'consents' === value || 'location' === value || 'policy' === value || "scripts" === value || 'iab' === value || 'events' === value || 'actions' === value;
     }
     function loadPersistedActiveTab() {
         if ('undefined' == typeof window) return null;