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

package/dist/react.js

@@ -2187,6 +2187,27 @@ panel_module_options.domAPI = styleDomAPI_default();
 panel_module_options.insertStyleElement = insertStyleElement_default();
 injectStylesIntoStyleTag_default()(panel_module.A, panel_module_options);
 const styles_panel_module = panel_module.A && panel_module.A.locals ? panel_module.A.locals : void 0;
+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() {
@@ -2223,7 +2244,7 @@ function getPreferenceCenterOpener(namespace = 'c15tStore') {
     }
     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>`;
@@ -2607,6 +2628,7 @@ function createPanel(options) {
         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}`
@@ -2623,6 +2645,10 @@ function createPanel(options) {
             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
@@ -2790,6 +2816,11 @@ const LOCATION_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 2
   <line x1="2" y1="12" x2="22" y2="12"></line>
   <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
 </svg>`;
+const POLICY_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
+  <path d="M9 12h6"></path>
+  <path d="M12 9v6"></path>
+</svg>`;
 const SCRIPTS_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
   <polyline points="16 18 22 12 16 6"></polyline>
   <polyline points="8 6 2 12 8 18"></polyline>
@@ -2817,6 +2848,11 @@ const TABS = [
         label: 'Location',
         icon: LOCATION_ICON
     },
+    {
+        id: 'policy',
+        label: 'Policy',
+        icon: POLICY_ICON
+    },
     {
         id: 'consents',
         label: 'Consents',
@@ -2977,6 +3013,7 @@ function tabs_createTabs(options) {
         const forcedOverflowTab = showOverflowSecondTabInStrip ? preferredSecondTab : overflowSecondTab;
         const layoutTabIds = [
             'location',
+            'policy',
             stripSecondTab,
             "scripts",
             'actions',
@@ -3641,7 +3678,6 @@ function createIconWrapper(icon, size) {
 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);
@@ -3660,40 +3696,15 @@ function renderConsentsPanel(container, options) {
             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) {
@@ -3711,7 +3722,7 @@ function renderConsentsPanel(container, options) {
             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;
@@ -4470,11 +4481,15 @@ function renderLocationPanel(container, options) {
     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)));
@@ -4482,7 +4497,6 @@ function renderLocationPanel(container, options) {
         columns: 3,
         children: gridItems
     });
-    container.appendChild(locationGrid);
     const initialDraft = getDraftFromOverrides(overrides);
     let appliedOverrides = normalizeOverrideDraft(initialDraft);
     let isSubmitting = false;
@@ -4573,6 +4587,12 @@ function renderLocationPanel(container, options) {
         ]
     });
     container.appendChild(overrideSection);
+    container.appendChild(locationGrid);
+    container.appendChild(createActivePolicySummarySection({
+        policy: activePolicy,
+        policyDecision,
+        policySnapshotToken: initData?.policySnapshotToken
+    }));
     countryField.control.addEventListener('change', updateFormState);
     regionField.control.addEventListener('input', updateFormState);
     languageField.control.addEventListener('input', updateFormState);
@@ -4861,15 +4881,53 @@ function getModelLabel(model) {
             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({
@@ -4890,6 +4948,253 @@ function createCompactInfoCard(label, value) {
         ]
     });
 }
+function renderPolicyPanel(container, options) {
+    const { getState } = options;
+    clearElement(container);
+    const state = getState();
+    if (!state) return void container.appendChild(createDisconnectedState());
+    const initData = state.lastBannerFetchData;
+    const activePolicy = initData?.policy;
+    const policyDecision = initData?.policyDecision;
+    const initSource = formatInitSource(state.initDataSource, state.initDataSourceDetail);
+    container.appendChild(createMatchTraceSection({
+        policyDecision,
+        policyId: activePolicy?.id ?? policyDecision?.policyId
+    }));
+    if (!activePolicy && !policyDecision) return void container.appendChild(createSection({
+        title: 'Policy',
+        children: [
+            renderer_div({
+                style: {
+                    padding: '10px 12px',
+                    fontSize: 'var(--c15t-devtools-font-size-sm)',
+                    color: 'var(--c15t-text-muted)'
+                },
+                text: 'No active policy matched for this request.'
+            }),
+            createHint(`Init Source: ${initSource}`)
+        ]
+    }));
+    container.appendChild(createSection({
+        title: 'Policy',
+        children: [
+            policy_createGrid(3, [
+                createCard('ID', activePolicy?.id ?? policyDecision?.policyId ?? '—'),
+                createCard('Model', policy_getModelLabel(activePolicy?.model)),
+                createCard('Scope', getScopeModeLabel(activePolicy?.consent?.scopeMode ?? state.policyScopeMode)),
+                createCard('Categories', formatList(state.policyCategories ?? activePolicy?.consent?.categories)),
+                createCard('Preselected', formatList(activePolicy?.consent?.preselectedCategories)),
+                createCard('Expiry', 'number' == typeof activePolicy?.consent?.expiryDays ? `${activePolicy.consent.expiryDays}d` : '—')
+            ]),
+            createHint(`${initSource} · ${formatFingerprint(policyDecision?.fingerprint)}`)
+        ]
+    }));
+    const uiMode = activePolicy?.ui?.mode;
+    if (uiMode && 'none' !== uiMode) {
+        const bannerCards = buildSurfaceCards('Banner', activePolicy?.ui?.banner, state.policyBanner);
+        const dialogCards = buildSurfaceCards('Dialog', activePolicy?.ui?.dialog, state.policyDialog);
+        if (bannerCards.length > 0 || dialogCards.length > 0) container.appendChild(createSection({
+            title: `UI · ${uiMode}`,
+            children: [
+                policy_createGrid(3, [
+                    ...bannerCards,
+                    ...dialogCards
+                ])
+            ]
+        }));
+    }
+    const proofLabel = formatProofSummary(activePolicy?.proof);
+    const snapshotLabel = initData?.policySnapshotToken ? 'present' : 'missing';
+    container.appendChild(createSection({
+        title: 'Proof & Snapshot',
+        children: [
+            policy_createGrid(3, [
+                createCard('Proof', proofLabel),
+                createCard('Snapshot', snapshotLabel),
+                createCard('I18n', activePolicy?.i18n?.messageProfile ?? activePolicy?.i18n?.language ?? '—')
+            ])
+        ]
+    }));
+}
+function buildSurfaceCards(prefix, policySurface, storeSurface) {
+    const policyLayout = Array.isArray(policySurface?.layout) && 0 === policySurface.layout.length ? null : policySurface?.layout ?? null;
+    const storeLayout = Array.isArray(storeSurface.layout) && 0 === storeSurface.layout.length ? null : storeSurface.layout ?? null;
+    const actions = formatList(policySurface?.allowedActions ?? storeSurface.allowedActions);
+    const primary = policySurface?.primaryAction ?? storeSurface.primaryAction ?? null;
+    const layout = policyLayout ?? storeLayout;
+    const direction = policySurface?.direction ?? storeSurface.direction ?? null;
+    const profile = policySurface?.uiProfile ?? storeSurface.uiProfile ?? null;
+    const scrollLock = policySurface?.scrollLock ?? storeSurface.scrollLock ?? null;
+    if ('—' === actions && !primary && !layout && !direction && !profile && null === scrollLock) return [];
+    const cards = [
+        createCard(`${prefix} Actions`, actions)
+    ];
+    if (primary) cards.push(createCard(`${prefix} Primary`, primary));
+    if (layout) cards.push(createCard(`${prefix} Layout`, Array.isArray(layout) ? layout.map((group)=>Array.isArray(group) ? `[${group.join(', ')}]` : group).join(' / ') : layout));
+    if (direction) cards.push(createCard(`${prefix} Direction`, direction));
+    if (profile) cards.push(createCard(`${prefix} Profile`, profile));
+    if (null !== scrollLock) cards.push(createCard(`${prefix} Scroll Lock`, scrollLock ? 'on' : 'off'));
+    return cards;
+}
+function createMatchTraceSection(options) {
+    const { policyDecision, policyId } = options;
+    const entries = buildTraceEntries(policyDecision, policyId);
+    return createSection({
+        title: 'Match Trace',
+        children: [
+            renderer_div({
+                style: {
+                    display: 'grid',
+                    gridTemplateColumns: '1fr',
+                    gap: '4px'
+                },
+                children: entries.map((entry)=>renderer_div({
+                        className: styles_components_module.gridCard ?? '',
+                        style: {
+                            padding: '6px 10px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            gap: '10px'
+                        },
+                        children: [
+                            renderer_span({
+                                style: {
+                                    fontSize: 'var(--c15t-devtools-font-size-xs)',
+                                    color: 'var(--c15t-text-muted)',
+                                    fontFamily: 'ui-monospace, monospace'
+                                },
+                                text: entry.step
+                            }),
+                            renderer_span({
+                                style: {
+                                    fontSize: 'var(--c15t-devtools-font-size-xs)',
+                                    fontFamily: 'ui-monospace, monospace'
+                                },
+                                text: entry.result
+                            })
+                        ]
+                    }))
+            }),
+            createHint('region → country → default · fallback on geo failure · Simulate via Location tab')
+        ]
+    });
+}
+function buildTraceEntries(decision, policyId) {
+    if (!decision) return [
+        {
+            step: 'decision metadata',
+            result: 'UNAVAILABLE'
+        }
+    ];
+    const country = decision.country ?? 'n/a';
+    const regionKey = decision.country && decision.region ? `${decision.country}-${decision.region}` : 'n/a';
+    const resolved = policyId ?? decision.policyId ?? 'unknown';
+    const matched = decision.matchedBy;
+    return [
+        {
+            step: `region(${regionKey})`,
+            result: 'region' === matched ? `MATCH → ${resolved}` : 'MISS'
+        },
+        {
+            step: `country(${country})`,
+            result: 'country' === matched ? `MATCH → ${resolved}` : 'region' === matched ? 'SKIPPED' : 'MISS'
+        },
+        {
+            step: 'fallback(geo-fail)',
+            result: 'fallback' === matched ? `MATCH → ${resolved}` : 'SKIPPED'
+        },
+        {
+            step: 'default(catch-all)',
+            result: 'default' === matched ? `MATCH → ${resolved}` : 'SKIPPED'
+        }
+    ];
+}
+function policy_getModelLabel(model) {
+    switch(model){
+        case 'opt-in':
+            return 'Opt-In';
+        case 'opt-out':
+            return 'Opt-Out';
+        case 'iab':
+            return 'IAB TCF';
+        default:
+            return 'None';
+    }
+}
+function getScopeModeLabel(mode) {
+    switch(mode){
+        case 'strict':
+            return 'Strict';
+        case 'permissive':
+            return 'Permissive';
+        default:
+            return '—';
+    }
+}
+function formatList(items) {
+    if (!items || 0 === items.length) return '—';
+    if (items.includes('*')) return '* (all)';
+    return items.join(', ');
+}
+function formatProofSummary(proof) {
+    if (!proof) return '—';
+    const parts = [];
+    if (proof.storeIp) parts.push('IP');
+    if (proof.storeUserAgent) parts.push('UA');
+    if (proof.storeLanguage) parts.push('Lang');
+    return parts.length > 0 ? parts.join(', ') : 'none';
+}
+function formatFingerprint(fingerprint) {
+    if (!fingerprint) return 'no fingerprint';
+    if (fingerprint.length <= 12) return fingerprint;
+    return `${fingerprint.slice(0, 8)}…${fingerprint.slice(-4)}`;
+}
+function createCard(label, value) {
+    return renderer_div({
+        className: styles_components_module.gridCard ?? '',
+        style: {
+            padding: '8px 10px',
+            minHeight: 'auto',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            gap: '2px'
+        },
+        children: [
+            renderer_span({
+                style: {
+                    fontSize: 'var(--c15t-devtools-font-size-xs)',
+                    color: 'var(--c15t-text-muted)'
+                },
+                text: label
+            }),
+            renderer_span({
+                style: {
+                    fontSize: 'var(--c15t-font-size-sm)',
+                    fontWeight: '500',
+                    fontFamily: 'ui-monospace, monospace'
+                },
+                text: value
+            })
+        ]
+    });
+}
+function policy_createGrid(columns, children) {
+    return renderer_div({
+        style: {
+            display: 'grid',
+            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+            gap: 'var(--c15t-space-sm, 0.5rem)'
+        },
+        children
+    });
+}
+function createHint(text) {
+    return renderer_span({
+        className: styles_components_module.overrideHint,
+        text
+    });
+}
 const dismissedResources = new Set();
 function scanDOM(state) {
     const results = [];
@@ -5528,6 +5833,11 @@ function panel_renderer_createPanelRenderer(config) {
                     }
                 });
                 break;
+            case 'policy':
+                renderPolicyPanel(container, {
+                    getState: getStoreState
+                });
+                break;
             case "scripts":
                 renderScriptsPanel(container, {
                     getState: getStoreState,
@@ -5664,7 +5974,7 @@ function persistEvents(events) {
     } 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;