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

package/dist/tanstack.cjs

@@ -2023,6 +2023,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>
@@ -2051,6 +2056,11 @@ var __webpack_exports__ = {};
             label: 'Location',
             icon: LOCATION_ICON
         },
+        {
+            id: 'policy',
+            label: 'Policy',
+            icon: POLICY_ICON
+        },
         {
             id: 'consents',
             label: 'Consents',
@@ -2211,6 +2221,7 @@ var __webpack_exports__ = {};
             const forcedOverflowTab = showOverflowSecondTabInStrip ? preferredSecondTab : overflowSecondTab;
             const layoutTabIds = [
                 'location',
+                'policy',
                 stripSecondTab,
                 "scripts",
                 'actions',
@@ -2875,7 +2886,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;
         renderer_clearElement(container);
@@ -2894,40 +2904,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) {
@@ -2945,7 +2930,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;
@@ -3696,6 +3681,27 @@ var __webpack_exports__ = {};
         if (text.length <= maxLength) return text;
         return `${text.slice(0, maxLength - 3)}...`;
     }
+    function init_source_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;
+    }
     function renderLocationPanel(container, options) {
         const { getState, onApplyOverrides, onClearOverrides } = options;
         renderer_clearElement(container);
@@ -3704,11 +3710,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 = init_source_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)));
@@ -3716,7 +3726,6 @@ var __webpack_exports__ = {};
             columns: 3,
             children: gridItems
         });
-        container.appendChild(locationGrid);
         const initialDraft = getDraftFromOverrides(overrides);
         let appliedOverrides = normalizeOverrideDraft(initialDraft);
         let isSubmitting = false;
@@ -3807,6 +3816,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);
@@ -4095,15 +4110,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({
@@ -4124,6 +4177,253 @@ var __webpack_exports__ = {};
             ]
         });
     }
+    function renderPolicyPanel(container, options) {
+        const { getState } = options;
+        renderer_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 = init_source_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 = [];
@@ -4762,6 +5062,11 @@ var __webpack_exports__ = {};
                         }
                     });
                     break;
+                case 'policy':
+                    renderPolicyPanel(container, {
+                        getState: getStoreState
+                    });
+                    break;
                 case "scripts":
                     renderScriptsPanel(container, {
                         getState: getStoreState,
@@ -4898,7 +5203,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;