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

package/dist/tanstack.cjs

@@ -1966,6 +1966,7 @@ var __webpack_exports__ = {};
     __webpack_require__.d(__webpack_exports__, {
         c15tDevtoolsPlugin: ()=>c15tDevtoolsPlugin
     });
+    const external_c15t_namespaceObject = require("c15t");
     var injectStylesIntoStyleTag = __webpack_require__("../../node_modules/.bun/@rsbuild+core@2.0.0-beta.11+490411ac90707e06/node_modules/@rsbuild/core/compiled/style-loader/runtime/injectStylesIntoStyleTag.js");
     var injectStylesIntoStyleTag_default = /*#__PURE__*/ __webpack_require__.n(injectStylesIntoStyleTag);
     var styleDomAPI = __webpack_require__("../../node_modules/.bun/@rsbuild+core@2.0.0-beta.11+490411ac90707e06/node_modules/@rsbuild/core/compiled/style-loader/runtime/styleDomAPI.js");
@@ -3258,7 +3259,8 @@ var __webpack_exports__ = {};
         'error',
         'consent',
         'network',
-        'iab'
+        'iab',
+        "script"
     ];
     function createFilterButton(filter, active, onClick) {
         return createButton({
@@ -3273,6 +3275,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) {
@@ -3396,6 +3399,8 @@ var __webpack_exports__ = {};
                 return '◉';
             case 'iab':
                 return '◆';
+            case "script":
+                return '⌘';
             default:
                 return '○';
         }
@@ -3413,6 +3418,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)';
         }
@@ -4734,6 +4741,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;
         renderer_clearElement(container);
@@ -4795,6 +4816,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';
@@ -4816,7 +4841,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',
@@ -4855,19 +4880,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;
@@ -5004,13 +5067,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)}...`;
@@ -5579,6 +5801,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;
@@ -5616,6 +5839,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, {
@@ -5693,9 +5924,29 @@ 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 createDevToolsPanel(options) {
         const { namespace = 'c15tStore' } = options;
         let detachInstrumentation = null;
+        let detachScriptDebug = null;
         const stateManager = state_manager_createStateManager({
             isOpen: true
         });
@@ -5708,6 +5959,10 @@ var __webpack_exports__ = {};
                     store,
                     onEvent: (event)=>stateManager.addEvent(event)
                 });
+                detachScriptDebug?.();
+                detachScriptDebug = (0, external_c15t_namespaceObject.subscribeToScriptDebugEvents)((event)=>{
+                    stateManager.addEvent(scriptDebugEventToLogEntry(event));
+                });
                 stateManager.setConnected(true);
                 const persistedOverrides = override_storage_loadPersistedOverrides();
                 if (persistedOverrides) {
@@ -5724,6 +5979,8 @@ var __webpack_exports__ = {};
                 stateManager.setConnected(false);
                 detachInstrumentation?.();
                 detachInstrumentation = null;
+                detachScriptDebug?.();
+                detachScriptDebug = null;
             }
         });
         const panelRenderer = panel_renderer_createPanelRenderer({
@@ -5816,6 +6073,8 @@ var __webpack_exports__ = {};
             destroy: ()=>{
                 detachInstrumentation?.();
                 detachInstrumentation = null;
+                detachScriptDebug?.();
+                detachScriptDebug = null;
                 unsubscribe();
                 tabsInstance?.destroy();
                 storeConnector.destroy();

package/dist-types/core/debug-bundle.d.ts

@@ -1,4 +1,4 @@
-import type { ConsentStoreState } from '../../../core/dist-types/index.d.ts';
+import type { ConsentStoreState } from 'c15t';
 import type { DevToolsState, EventLogEntry } from './state-manager';
 import type { ConnectionDiagnostics } from './store-connector';
 export interface DebugBundlePayload {

package/dist-types/core/override-storage.d.ts

@@ -1,4 +1,4 @@
-import type { ConsentStoreState } from '../../../core/dist-types/index.d.ts';
+import type { ConsentStoreState } from 'c15t';
 export type PersistedDevToolsOverrides = Pick<NonNullable<ConsentStoreState['overrides']>, 'country' | 'region' | 'language' | 'gpc'>;
 export declare function hasPersistedOverrides(overrides: PersistedDevToolsOverrides): boolean;
 export declare function loadPersistedOverrides(storageKey?: string): PersistedDevToolsOverrides | null;

package/dist-types/core/panel-renderer.d.ts

@@ -2,7 +2,7 @@
  * Panel Renderer
  * Shared logic for rendering DevTools panels
  */
-import type { ConsentStoreState } from '../../../core/dist-types/index.d.ts';
+import type { ConsentStoreState } from 'c15t';
 import type { PersistedDevToolsOverrides } from './override-storage';
 import type { DevToolsTab, StateManager } from './state-manager';
 import type { StoreConnector } from './store-connector';

package/dist-types/core/reset-consents.d.ts

@@ -2,7 +2,7 @@
  * Reset Consents Utility
  * Centralized logic for resetting all consent data
  */
-import type { ConsentStoreState } from '../../../core/dist-types/index.d.ts';
+import type { ConsentStoreState } from 'c15t';
 import type { StoreApi } from 'zustand/vanilla';
 import type { StateManager } from './state-manager';
 /**

package/dist-types/core/state-manager.d.ts

@@ -15,7 +15,7 @@ export type DevToolsTab = 'consents' | 'location' | 'policy' | 'scripts' | 'iab'
  */
 export interface EventLogEntry {
     id: string;
-    type: 'consent_set' | 'consent_save' | 'consent_reset' | 'error' | 'info' | 'network' | 'iab';
+    type: 'consent_set' | 'consent_save' | 'consent_reset' | 'error' | 'info' | 'network' | 'iab' | 'script';
     message: string;
     timestamp: number;
     data?: Record<string, unknown>;

package/dist-types/core/store-connector.d.ts

@@ -2,7 +2,7 @@
  * Store Connector
  * Connects to the c15tStore exposed on the window object
  */
-import type { ConsentStoreState } from '../../../core/dist-types/index.d.ts';
+import type { ConsentStoreState } from 'c15t';
 import type { StoreApi } from 'zustand/vanilla';
 /**
  * Options for creating a store connector

package/dist-types/core/store-instrumentation.d.ts

@@ -1,4 +1,4 @@
-import type { ConsentStoreState } from '../../../core/dist-types/index.d.ts';
+import type { ConsentStoreState } from 'c15t';
 import type { StoreApi } from 'zustand/vanilla';
 import type { EventLogEntry } from './state-manager';
 type InstrumentationEvent = Omit<EventLogEntry, 'id' | 'timestamp'>;

package/dist-types/panels/actions.d.ts

@@ -2,7 +2,7 @@
  * Actions Panel
  * Quick actions for developers
  */
-import type { ConsentStoreState } from '../../../core/dist-types/index.d.ts';
+import type { ConsentStoreState } from 'c15t';
 export interface ActionsPanelOptions {
     getState: () => ConsentStoreState | null;
     onResetConsents: () => void;

package/dist-types/panels/consents.d.ts

@@ -2,7 +2,7 @@
  * Consents Panel
  * Displays and manages consent state
  */
-import type { ConsentStoreState } from '../../../core/dist-types/index.d.ts';
+import type { ConsentStoreState } from 'c15t';
 export interface ConsentsPanelOptions {
     getState: () => ConsentStoreState | null;
     onConsentChange: (name: string, value: boolean) => void;

package/dist-types/panels/dom-scanner.d.ts

@@ -2,7 +2,7 @@
  * DOM Scanner
  * Scans the DOM for external scripts and iframes, cross-referencing with c15t config
  */
-import type { ConsentStoreState } from '../../../core/dist-types/index.d.ts';
+import type { ConsentStoreState } from 'c15t';
 /**
  * Represents a scanned external resource
  */

package/dist-types/panels/iab.d.ts

@@ -2,7 +2,7 @@
  * IAB Panel
  * Displays IAB TCF information including TC String, purposes, and vendors
  */
-import type { ConsentStoreState } from '../../../core/dist-types/index.d.ts';
+import type { ConsentStoreState } from 'c15t';
 export interface IabPanelOptions {
     getState: () => ConsentStoreState | null;
     onSetPurposeConsent: (purposeId: number, value: boolean) => void;

package/dist-types/panels/location.d.ts

@@ -2,7 +2,7 @@
  * Location Panel
  * Displays and manages location/language overrides
  */
-import type { ConsentStoreState } from '../../../core/dist-types/index.d.ts';
+import type { ConsentStoreState } from 'c15t';
 interface OverridePayload {
     country?: string;
     region?: string;

package/dist-types/panels/policy.d.ts

@@ -2,7 +2,7 @@
  * Policy Panel
  * Displays detailed runtime policy-pack diagnostics from /init
  */
-import type { ConsentStoreState } from '../../../core/dist-types/index.d.ts';
+import type { ConsentStoreState } from 'c15t';
 export interface PolicyPanelOptions {
     getState: () => ConsentStoreState | null;
 }

package/dist-types/panels/scripts.d.ts

@@ -2,7 +2,7 @@
  * Scripts Panel
  * Displays script loading status and configuration
  */
-import type { ConsentStoreState } from '../../../core/dist-types/index.d.ts';
+import type { ConsentStoreState } from 'c15t';
 import type { EventLogEntry } from '../core/state-manager';
 export interface ScriptsPanelOptions {
     getState: () => ConsentStoreState | null;

package/dist-types/utils/init-source.d.ts

@@ -1,2 +1,2 @@
-import type { ConsentStoreState } from '../../../core/dist-types/index.d.ts';
+import type { ConsentStoreState } from 'c15t';
 export declare function formatInitSource(source: ConsentStoreState['initDataSource'], detail: string | null | undefined): string;

package/dist-types/version.d.ts

@@ -1 +1 @@
-export declare const version = "2.0.0-rc.6";
+export declare const version = "2.0.0-rc.8";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@c15t/dev-tools",
-	"version": "2.0.0-rc.6",
+	"version": "2.0.0-rc.8",
 	"description": "A collection of developer tools and utilities for the c15t ecosystem, currently under active development.",
 	"homepage": "https://c15t.com",
 	"repository": {
@@ -36,7 +36,7 @@
 	],
 	"scripts": {
 		"prebuild": "bunx genversion --esm --semi src/version.ts",
-		"build": "bun prebuild && rslib build",
+		"build": "bun prebuild && rslib build && bun ../../scripts/normalize-dist-types.mjs",
 		"check-types": "bun prebuild && tsc --noEmit",
 		"dev": "bun prebuild && rslib build --watch",
 		"fmt": "bun biome format --write . && bun biome check --formatter-enabled=false --linter-enabled=false --write",
@@ -53,7 +53,7 @@
 		"@radix-ui/react-slot": "1.2.4",
 		"@radix-ui/react-switch": "1.2.6",
 		"@radix-ui/react-tooltip": "^1.2.8",
-		"c15t": "2.0.0-rc.6",
+		"c15t": "2.0.0-rc.8",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "2.1.1",
 		"lucide-react": "^1.7.0",