@c15t/dev-tools 2.0.0-rc.6 → 2.0.0-rc.8

package/dist/react.cjs

@@ -1969,6 +1969,7 @@ var __webpack_exports__ = {};
         DevTools: ()=>C15TDevTools
     });
     const external_react_namespaceObject = require("react");
+    const external_c15t_namespaceObject = require("c15t");
     const DEVTOOLS_STORAGE_KEY = 'c15t-devtools-position';
     const DRAG_THRESHOLD = 30;
     const VELOCITY_THRESHOLD = 0.15;
@@ -2346,7 +2347,7 @@ var __webpack_exports__ = {};
         }
         return null;
     }
-    const version = '2.0.0-rc.6';
+    const version = '2.0.0-rc.8';
     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>`;
@@ -4068,7 +4069,8 @@ var __webpack_exports__ = {};
         'error',
         'consent',
         'network',
-        'iab'
+        'iab',
+        "script"
     ];
     function createFilterButton(filter, active, onClick) {
         return createButton({
@@ -4083,6 +4085,7 @@ var __webpack_exports__ = {};
         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;
+        if ("script" === filter) return "script" === event.type;
         return 'iab' === event.type;
     }
     function matchesSearch(event, query) {
@@ -4206,6 +4209,8 @@ var __webpack_exports__ = {};
                 return '◉';
             case 'iab':
                 return '◆';
+            case "script":
+                return '⌘';
             default:
                 return '○';
         }
@@ -4223,6 +4228,8 @@ var __webpack_exports__ = {};
                 return 'var(--c15t-devtools-badge-warning, #f59e0b)';
             case 'iab':
                 return 'var(--c15t-devtools-badge-info, #3b82f6)';
+            case "script":
+                return 'var(--c15t-devtools-badge-info, #14b8a6)';
             default:
                 return 'var(--c15t-text-muted)';
         }
@@ -5523,6 +5530,20 @@ var __webpack_exports__ = {};
   <polyline points="8 6 2 12 8 18"></polyline>
 </svg>`;
     const scriptsSearchByContainer = new WeakMap();
+    const expandedScriptsByContainer = new WeakMap();
+    const CHEVRON_DOWN_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="6 9 12 15 18 9"></polyline>
+</svg>`;
+    const CHEVRON_RIGHT_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="9 18 15 12 9 6"></polyline>
+</svg>`;
+    function getExpandedScripts(container) {
+        const existing = expandedScriptsByContainer.get(container);
+        if (existing) return existing;
+        const expanded = new Set();
+        expandedScriptsByContainer.set(container, expanded);
+        return expanded;
+    }
     function renderScriptsPanel(container, options) {
         const { getState, getEvents } = options;
         clearElement(container);
@@ -5584,6 +5605,10 @@ var __webpack_exports__ = {};
             for (const script of filteredScripts){
                 const scriptId = script.id;
                 const isLoaded = true === loadedScripts[scriptId];
+                const scriptEvents = getScriptActivityEvents(events, scriptId);
+                const latestActivity = scriptEvents[scriptEvents.length - 1];
+                const expandedScripts = getExpandedScripts(container);
+                const isExpanded = expandedScripts.has(scriptId);
                 const category = script.category;
                 const categoryDisplay = 'string' == typeof category ? category : JSON.stringify(category);
                 let status = 'pending';
@@ -5605,7 +5630,7 @@ var __webpack_exports__ = {};
                     text: status.charAt(0).toUpperCase() + status.slice(1),
                     variant: statusVariant
                 });
-                const row = renderer_div({
+                const header = renderer_div({
                     style: {
                         display: 'flex',
                         alignItems: 'center',
@@ -5644,19 +5669,57 @@ var __webpack_exports__ = {};
                                         whiteSpace: 'nowrap'
                                     },
                                     text: `Category: ${categoryDisplay}`
-                                })
+                                }),
+                                ...latestActivity && scriptEvents.length > 0 ? [
+                                    renderer_div({
+                                        style: {
+                                            fontSize: 'var(--c15t-devtools-font-size-xs)',
+                                            color: 'var(--c15t-text-muted)',
+                                            overflow: 'hidden',
+                                            textOverflow: 'ellipsis',
+                                            whiteSpace: 'nowrap'
+                                        },
+                                        text: `Activity: ${latestActivity.message} (${scriptEvents.length} event${1 === scriptEvents.length ? '' : 's'})`
+                                    })
+                                ] : []
                             ]
                         }),
                         renderer_div({
                             style: {
-                                flexShrink: '0'
+                                flexShrink: '0',
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '8px'
                             },
                             children: [
-                                badge
+                                badge,
+                                ...scriptEvents.length > 0 ? [
+                                    createAccordionToggle({
+                                        scriptId,
+                                        isExpanded,
+                                        onToggle: ()=>{
+                                            if (isExpanded) expandedScripts.delete(scriptId);
+                                            else expandedScripts.add(scriptId);
+                                            renderScriptsPanel(container, options);
+                                        }
+                                    })
+                                ] : []
                             ]
                         })
                     ]
                 });
+                const details = isExpanded && scriptEvents.length > 0 ? createScriptActivityDetails(scriptEvents) : null;
+                const row = renderer_div({
+                    style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        borderBottom: '1px solid var(--c15t-border)'
+                    },
+                    children: [
+                        header,
+                        details
+                    ]
+                });
                 scriptsList.appendChild(row);
             }
             const lastRow = scriptsList.lastElementChild;
@@ -5793,13 +5856,172 @@ var __webpack_exports__ = {};
         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'
+        const date = new Date(timestamp);
+        const hours = String(date.getHours()).padStart(2, '0');
+        const minutes = String(date.getMinutes()).padStart(2, '0');
+        const seconds = String(date.getSeconds()).padStart(2, '0');
+        const milliseconds = String(date.getMilliseconds()).padStart(3, '0');
+        return `${hours}:${minutes}:${seconds}.${milliseconds}`;
+    }
+    function getScriptActivityEvents(events, scriptId) {
+        return events.filter((event)=>{
+            if ("script" !== event.type) return false;
+            const data = event.data;
+            if (data?.scriptId !== scriptId) return false;
+            return data?.scope === 'lifecycle' || data?.scope === 'phase';
+        }).sort((left, right)=>left.timestamp - right.timestamp);
+    }
+    function createAccordionToggle(options) {
+        const { scriptId, isExpanded, onToggle } = options;
+        const toggle = renderer_button({
+            ariaLabel: `${isExpanded ? 'Collapse' : 'Expand'} ${scriptId} activity`,
+            ariaExpanded: isExpanded ? 'true' : 'false',
+            style: {
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '24px',
+                height: '24px',
+                padding: '0',
+                border: '1px solid var(--c15t-border)',
+                borderRadius: '6px',
+                background: 'transparent',
+                color: 'var(--c15t-text-muted)',
+                cursor: 'pointer',
+                flexShrink: '0'
+            },
+            onClick: onToggle
+        });
+        toggle.innerHTML = isExpanded ? CHEVRON_DOWN_ICON : CHEVRON_RIGHT_ICON;
+        return toggle;
+    }
+    function createScriptActivityDetails(events) {
+        const groupedEvents = groupScriptActivityEvents(events.slice(-8));
+        return renderer_div({
+            style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '6px',
+                padding: '0 0 10px 0',
+                marginLeft: '0'
+            },
+            children: groupedEvents.map(([groupName, groupEvents])=>createScriptActivityGroup(groupName, groupEvents))
+        });
+    }
+    function createScriptActivityGroup(groupName, events) {
+        return renderer_div({
+            style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '4px'
+            },
+            children: [
+                renderer_span({
+                    style: {
+                        fontSize: 'var(--c15t-devtools-font-size-xs)',
+                        fontWeight: '600',
+                        color: 'var(--c15t-text)',
+                        textTransform: 'none'
+                    },
+                    text: groupName
+                }),
+                ...events.map((event)=>createScriptActivityRow(event))
+            ]
         });
     }
+    function createScriptActivityRow(event) {
+        const data = event.data ?? {};
+        const scope = 'string' == typeof data.scope ? data.scope : void 0;
+        const phase = 'string' == typeof data.phase ? data.phase : void 0;
+        const stepType = 'string' == typeof data.stepType ? data.stepType : void 0;
+        const metadata = [
+            scope,
+            phase,
+            stepType
+        ].filter(Boolean).join(' / ');
+        return renderer_div({
+            style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '2px',
+                padding: '6px 10px',
+                marginLeft: '0',
+                borderLeft: '2px solid var(--c15t-border)',
+                backgroundColor: 'var(--c15t-devtools-surface-secondary, rgba(127,127,127,0.06))',
+                borderRadius: '0 8px 8px 0'
+            },
+            children: [
+                renderer_div({
+                    style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        gap: '8px'
+                    },
+                    children: [
+                        renderer_span({
+                            style: {
+                                fontSize: 'var(--c15t-devtools-font-size-xs)',
+                                fontWeight: '600',
+                                color: 'var(--c15t-text)'
+                            },
+                            text: event.message
+                        }),
+                        renderer_span({
+                            style: {
+                                fontSize: 'var(--c15t-devtools-font-size-xs)',
+                                color: 'var(--c15t-text-muted)',
+                                flexShrink: '0'
+                            },
+                            text: formatEventTime(event.timestamp)
+                        })
+                    ]
+                }),
+                ...metadata ? [
+                    renderer_span({
+                        style: {
+                            fontSize: 'var(--c15t-devtools-font-size-xs)',
+                            color: 'var(--c15t-text-muted)'
+                        },
+                        text: metadata
+                    })
+                ] : []
+            ]
+        });
+    }
+    function groupScriptActivityEvents(events) {
+        const groups = new Map();
+        for (const event of events){
+            const groupName = getScriptActivityGroupName(event);
+            const existing = groups.get(groupName);
+            if (existing) existing.push(event);
+            else groups.set(groupName, [
+                event
+            ]);
+        }
+        const orderedGroupNames = [
+            'onBeforeLoad',
+            'onLoad',
+            'onConsentChange',
+            'other'
+        ];
+        return orderedGroupNames.map((groupName)=>{
+            const groupEvents = groups.get(groupName);
+            return groupEvents ? [
+                groupName,
+                groupEvents
+            ] : null;
+        }).filter((group)=>null !== group);
+    }
+    function getScriptActivityGroupName(event) {
+        const data = event.data ?? {};
+        if ('string' == typeof data.callback) return data.callback;
+        const phase = 'string' == typeof data.phase ? data.phase : '';
+        if ('bootstrap' === phase || 'consent-default' === phase || 'setup' === phase || 'onBeforeLoadGranted' === phase || 'onBeforeLoadDenied' === phase) return 'onBeforeLoad';
+        if ('afterLoad' === phase || 'onLoadGranted' === phase || 'onLoadDenied' === phase) return 'onLoad';
+        if ('consent-update' === phase || 'onConsentChange' === phase || 'onConsentGranted' === phase || 'onConsentDenied' === phase) return 'onConsentChange';
+        return 'other';
+    }
     function scripts_truncateText(text, maxLength) {
         if (text.length <= maxLength) return text;
         return `${text.slice(0, maxLength - 3)}...`;
@@ -6368,6 +6590,7 @@ var __webpack_exports__ = {};
         const state = entry.store.getState();
         state.setCallback('onBannerFetched', entry.originalCallbacks.onBannerFetched);
         state.setCallback('onConsentSet', entry.originalCallbacks.onConsentSet);
+        state.setCallback('onConsentChanged', entry.originalCallbacks.onConsentChanged);
         state.setCallback('onError', entry.originalCallbacks.onError);
         state.setCallback('onBeforeConsentRevocationReload', entry.originalCallbacks.onBeforeConsentRevocationReload);
         const blocker = state.networkBlocker;
@@ -6405,6 +6628,14 @@ var __webpack_exports__ = {};
             });
             if ('function' == typeof entry.originalCallbacks.onConsentSet) entry.originalCallbacks.onConsentSet(payload);
         });
+        store.getState().setCallback('onConsentChanged', (payload)=>{
+            emitEvent(entry, {
+                type: 'consent_save',
+                message: 'Consent preferences changed',
+                data: payload
+            });
+            if ('function' == typeof entry.originalCallbacks.onConsentChanged) entry.originalCallbacks.onConsentChanged(payload);
+        });
         store.getState().setCallback('onError', (payload)=>{
             const errorMessage = payload.error;
             emitEvent(entry, {
@@ -6545,6 +6776,25 @@ var __webpack_exports__ = {};
             loadedScripts: state.loadedScripts
         };
     }
+    function scriptDebugEventToLogEntry(event) {
+        return {
+            type: "script",
+            message: event.message,
+            data: {
+                ...event.data ?? {},
+                source: event.source,
+                scope: event.scope,
+                action: event.action,
+                scriptId: event.scriptId,
+                elementId: event.elementId,
+                hasConsent: event.hasConsent,
+                callback: event.callback,
+                phase: event.phase,
+                stepType: event.stepType,
+                stepIndex: event.stepIndex
+            }
+        };
+    }
     function createDevTools(options = {}) {
         const { namespace = 'c15tStore', position = 'bottom-right', defaultOpen = false } = options;
         const stateManager = state_manager_createStateManager({
@@ -6552,6 +6802,7 @@ var __webpack_exports__ = {};
             isOpen: defaultOpen
         });
         let detachInstrumentation = null;
+        let detachScriptDebug = null;
         const storeConnector = store_connector_createStoreConnector({
             namespace,
             onConnect: (_state, store)=>{
@@ -6563,6 +6814,10 @@ var __webpack_exports__ = {};
                         stateManager.addEvent(event);
                     }
                 });
+                detachScriptDebug?.();
+                detachScriptDebug = (0, external_c15t_namespaceObject.subscribeToScriptDebugEvents)((event)=>{
+                    stateManager.addEvent(scriptDebugEventToLogEntry(event));
+                });
                 stateManager.setConnected(true);
                 stateManager.addEvent({
                     type: 'info',
@@ -6599,6 +6854,8 @@ var __webpack_exports__ = {};
                 stateManager.setConnected(false);
                 detachInstrumentation?.();
                 detachInstrumentation = null;
+                detachScriptDebug?.();
+                detachScriptDebug = null;
                 stateManager.addEvent({
                     type: 'error',
                     message: 'Disconnected from c15tStore'
@@ -6688,6 +6945,8 @@ var __webpack_exports__ = {};
             destroy: ()=>{
                 detachInstrumentation?.();
                 detachInstrumentation = null;
+                detachScriptDebug?.();
+                detachScriptDebug = null;
                 panelHeightAnimator.destroy();
                 tabsInstance?.destroy();
                 panelInstance.destroy();