@c15t/dev-tools 2.0.0 → 2.0.4

package/dist/index.cjs

@@ -2764,7 +2764,7 @@ var __webpack_exports__ = {};
                 }
             }));
             footerElement.appendChild(renderer_span({
-                text: "v2.0.0"
+                text: "v2.0.4"
             }));
         }
         function renderErrorState(container) {
@@ -6785,6 +6785,133 @@ var __webpack_exports__ = {};
             loadedScripts: state.loadedScripts
         };
     }
+    const EMBEDDED_TABS = [
+        {
+            id: 'location',
+            label: 'Location'
+        },
+        {
+            id: 'policy',
+            label: 'Policy'
+        },
+        {
+            id: 'consents',
+            label: 'Consents'
+        },
+        {
+            id: "scripts",
+            label: 'Scripts'
+        },
+        {
+            id: 'iab',
+            label: 'IAB'
+        },
+        {
+            id: 'actions',
+            label: 'Actions'
+        },
+        {
+            id: 'events',
+            label: 'Events'
+        }
+    ];
+    const EMBEDDED_THEME_VARIABLES = {
+        '--c15t-surface': '#1f222b',
+        '--c15t-surface-hover': '#272b35',
+        '--c15t-surface-muted': '#252933',
+        '--c15t-border': 'rgba(255, 255, 255, 0.08)',
+        '--c15t-border-hover': 'rgba(255, 255, 255, 0.16)',
+        '--c15t-text': '#eef2ff',
+        '--c15t-text-muted': '#99a2b3',
+        '--c15t-primary': '#8b5cf6',
+        '--c15t-primary-hover': '#7c3aed',
+        '--c15t-text-on-primary': '#f7f3ff',
+        '--c15t-shadow-sm': 'none',
+        '--c15t-shadow-md': 'none',
+        '--c15t-devtools-surface-elevated': '#1f222b',
+        '--c15t-devtools-surface-muted': '#272b35',
+        '--c15t-devtools-surface-subtle': '#181b22',
+        '--c15t-devtools-border-strong': 'rgba(255, 255, 255, 0.08)',
+        '--c15t-devtools-code-surface': '#15181f',
+        '--c15t-devtools-accent-soft': 'rgba(139, 92, 246, 0.18)',
+        '--c15t-devtools-focus-ring': '#8b5cf6',
+        '--c15t-devtools-badge-success-bg': 'rgba(16, 185, 129, 0.16)',
+        '--c15t-devtools-badge-error-bg': 'rgba(248, 113, 113, 0.18)',
+        '--c15t-devtools-badge-warning-bg': 'rgba(251, 191, 36, 0.18)',
+        '--c15t-devtools-badge-info-bg': 'rgba(96, 165, 250, 0.18)',
+        '--c15t-devtools-badge-neutral-bg': 'rgba(148, 163, 184, 0.16)',
+        '--c15t-devtools-embedded-tab-active-border': 'rgba(139, 92, 246, 0.55)'
+    };
+    function createEmbeddedTabs(options) {
+        const { onTabChange, disabledTabs = [] } = options;
+        let activeTab = options.activeTab;
+        const buttons = new Map();
+        const tabList = renderer_div({
+            role: 'tablist',
+            ariaLabel: 'DevTools tabs',
+            style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '0.5rem',
+                alignItems: 'center',
+                paddingBottom: '0.25rem',
+                borderBottom: '1px solid var(--c15t-devtools-border-strong, rgba(255, 255, 255, 0.08))'
+            }
+        });
+        function applyButtonState(tab, buttonElement) {
+            const isActive = tab === activeTab;
+            const isDisabled = disabledTabs.includes(tab);
+            buttonElement.disabled = isDisabled;
+            buttonElement.setAttribute('aria-selected', isActive ? 'true' : 'false');
+            buttonElement.style.borderColor = isActive ? 'var(--c15t-devtools-embedded-tab-active-border, rgba(139, 92, 246, 0.55))' : 'transparent';
+            buttonElement.style.backgroundColor = isActive ? 'var(--c15t-devtools-accent-soft, rgba(139, 92, 246, 0.18))' : 'transparent';
+            buttonElement.style.color = isActive ? 'var(--c15t-text, #eef2ff)' : 'var(--c15t-text-muted, #99a2b3)';
+            buttonElement.style.opacity = isDisabled ? '0.45' : '1';
+            buttonElement.style.cursor = isDisabled ? 'not-allowed' : 'pointer';
+            buttonElement.style.boxShadow = isActive ? 'inset 0 0 0 1px var(--c15t-devtools-embedded-tab-active-border, rgba(139, 92, 246, 0.55))' : 'none';
+        }
+        for (const tab of EMBEDDED_TABS){
+            const buttonElement = renderer_button({
+                role: 'tab',
+                text: tab.label,
+                onClick: ()=>{
+                    if (disabledTabs.includes(tab.id)) return;
+                    activeTab = tab.id;
+                    for (const [tabId, tabButton] of buttons)applyButtonState(tabId, tabButton);
+                    onTabChange(tab.id);
+                },
+                style: {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    minHeight: '1.875rem',
+                    padding: '0.3125rem 0.75rem',
+                    border: '1px solid transparent',
+                    borderRadius: '999px',
+                    backgroundColor: 'transparent',
+                    fontFamily: 'inherit',
+                    fontSize: 'var(--c15t-devtools-font-size-xs, 0.75rem)',
+                    fontWeight: '500',
+                    lineHeight: '1.25',
+                    transition: 'background-color var(--c15t-duration-fast, 100ms) var(--c15t-easing, cubic-bezier(0.4, 0, 0.2, 1)), border-color var(--c15t-duration-fast, 100ms) var(--c15t-easing, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow var(--c15t-duration-fast, 100ms) var(--c15t-easing, cubic-bezier(0.4, 0, 0.2, 1)), color var(--c15t-duration-fast, 100ms) var(--c15t-easing, cubic-bezier(0.4, 0, 0.2, 1))'
+                }
+            });
+            if ('iab' === tab.id) buttonElement.title = 'Available when IAB TCF mode is enabled';
+            applyButtonState(tab.id, buttonElement);
+            buttons.set(tab.id, buttonElement);
+            tabList.appendChild(buttonElement);
+        }
+        return {
+            element: tabList,
+            setActiveTab: (tab)=>{
+                activeTab = tab;
+                for (const [tabId, tabButton] of buttons)applyButtonState(tabId, tabButton);
+            },
+            destroy: ()=>{
+                buttons.clear();
+            }
+        };
+    }
     function scriptDebugEventToLogEntry(event) {
         return {
             type: "script",
@@ -6968,9 +7095,11 @@ var __webpack_exports__ = {};
         return instance;
     }
     function createDevToolsPanel(options) {
-        const { namespace = 'c15tStore' } = options;
+        const { namespace = 'c15tStore', mode = 'standalone' } = options;
+        const isEmbedded = 'embedded' === mode;
         let detachInstrumentation = null;
         let detachScriptDebug = null;
+        let contentArea = null;
         const stateManager = createStateManager({
             isOpen: true
         });
@@ -6998,6 +7127,7 @@ var __webpack_exports__ = {};
                         gpc: persistedOverrides.gpc
                     });
                 }
+                renderActivePanel();
             },
             onDisconnect: ()=>{
                 stateManager.setConnected(false);
@@ -7005,6 +7135,7 @@ var __webpack_exports__ = {};
                 detachInstrumentation = null;
                 detachScriptDebug?.();
                 detachScriptDebug = null;
+                renderActivePanel();
             }
         });
         const panelRenderer = createPanelRenderer({
@@ -7037,25 +7168,33 @@ var __webpack_exports__ = {};
                 display: 'flex',
                 flexDirection: 'column',
                 height: '100%',
-                fontFamily: 'var(--c15t-devtools-font-family)',
+                boxSizing: 'border-box',
+                gap: '0.75rem',
+                padding: '0.75rem',
+                fontFamily: 'inherit',
                 fontSize: 'var(--c15t-devtools-font-size-sm)',
-                color: 'var(--c15t-devtools-text)',
-                backgroundColor: 'var(--c15t-devtools-surface)'
+                color: isEmbedded ? 'var(--c15t-text, #eef2ff)' : 'inherit',
+                backgroundColor: 'transparent',
+                colorScheme: isEmbedded ? 'dark' : void 0,
+                ...isEmbedded ? EMBEDDED_THEME_VARIABLES : {}
             }
         });
-        const contentArea = renderer_div({
+        contentArea = renderer_div({
             style: {
                 flex: '1',
+                minHeight: '0',
                 overflowY: 'auto',
-                overscrollBehavior: 'contain'
+                overscrollBehavior: 'contain',
+                backgroundColor: 'transparent'
             }
         });
         function renderActivePanel() {
+            if (!contentArea) return;
             const activeTab = syncTabs();
             panelRenderer.renderPanel(contentArea, activeTab);
         }
         let tabsInstance = null;
-        let iabDisabled = true;
+        let disabledTabsKey = '';
         function getDisabledTabs() {
             const disabledTabs = [];
             const storeState = storeConnector.getState();
@@ -7064,16 +7203,16 @@ var __webpack_exports__ = {};
         }
         function syncTabs() {
             const disabledTabs = getDisabledTabs();
-            const nextIabDisabled = disabledTabs.includes('iab');
+            const nextDisabledTabsKey = disabledTabs.join('|');
             let activeTab = stateManager.getState().activeTab;
             if (disabledTabs.includes(activeTab)) {
                 activeTab = 'consents';
                 stateManager.setActiveTab(activeTab);
             }
-            if (tabsInstance && iabDisabled === nextIabDisabled) tabsInstance.setActiveTab(activeTab);
+            if (tabsInstance && disabledTabsKey === nextDisabledTabsKey) tabsInstance.setActiveTab(activeTab);
             else {
                 tabsInstance?.destroy();
-                tabsInstance = createTabs({
+                tabsInstance = createEmbeddedTabs({
                     activeTab,
                     onTabChange: (tab)=>{
                         stateManager.setActiveTab(tab);
@@ -7081,8 +7220,9 @@ var __webpack_exports__ = {};
                     },
                     disabledTabs
                 });
-                iabDisabled = nextIabDisabled;
-                if (!tabsInstance.element.parentElement) container.appendChild(tabsInstance.element);
+                disabledTabsKey = nextDisabledTabsKey;
+                if (!tabsInstance.element.parentElement) if (contentArea?.parentElement === container) container.insertBefore(tabsInstance.element, contentArea);
+                else container.appendChild(tabsInstance.element);
             }
             return activeTab;
         }

package/dist/react.cjs

@@ -2763,7 +2763,7 @@ var __webpack_exports__ = {};
                 }
             }));
             footerElement.appendChild(renderer_span({
-                text: "v2.0.0"
+                text: "v2.0.4"
             }));
         }
         function renderErrorState(container) {
@@ -2981,7 +2981,7 @@ var __webpack_exports__ = {};
             icon: EVENTS_ICON
         }
     ];
-    function tabs_createTabs(options) {
+    function createTabs(options) {
         const { onTabChange, disabledTabs = [] } = options;
         let activeTab = options.activeTab;
         let isOverflowMenuOpen = false;
@@ -6910,7 +6910,7 @@ var __webpack_exports__ = {};
                 currentActiveTab = 'consents';
             }
             if (tabsInstance) tabsInstance.destroy();
-            tabsInstance = tabs_createTabs({
+            tabsInstance = createTabs({
                 activeTab: currentActiveTab,
                 onTabChange: (tab)=>{
                     stateManager.setActiveTab(tab);