@c15t/dev-tools 2.0.0 → 2.0.1

package/README.md

@@ -77,22 +77,57 @@ devtools.destroy();
 
 ### TanStack DevTools Plugin
 
-Integrate with TanStack DevTools:
+Integrate c15t into TanStack Devtools with the same `render: <Panel />` pattern
+used by the official TanStack plugins:
 
 ```tsx
+import * as React from 'react';
+import { useRouter } from '@tanstack/react-router';
 import { TanStackDevtools } from '@tanstack/react-devtools';
-import { c15tDevtoolsPlugin } from '@c15t/dev-tools/tanstack';
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
+import { c15tDevtools } from '@c15t/dev-tools/tanstack';
+
+export function AppDevtools() {
+  const router = useRouter();
 
-function App() {
   return (
-    <>
-      <YourApp />
-      <TanStackDevtools plugins={[c15tDevtoolsPlugin()]} />
-    </>
+    <TanStackDevtools
+      plugins={[
+        {
+          name: 'TanStack Query',
+          render: <ReactQueryDevtoolsPanel />,
+        },
+        {
+          name: 'TanStack Router',
+          render: <TanStackRouterDevtoolsPanel router={router} />,
+        },
+        c15tDevtools({
+          defaultOpen: true,
+        }),
+      ]}
+    />
   );
 }
 ```
 
+If you want full control over the plugin entry, you can also render the exported
+panel component directly:
+
+```tsx
+import { C15tTanStackDevtoolsPanel } from '@c15t/dev-tools/tanstack';
+
+<TanStackDevtools
+  plugins={[
+    {
+      id: 'c15t',
+      name: 'c15t',
+      render: <C15tTanStackDevtoolsPanel namespace="c15tStore" />,
+    },
+  ]}
+/>
+```
+
 ## Console API
 
 The DevTools expose a global API for quick debugging:

package/dist/379.js

@@ -2710,7 +2710,7 @@ function createPanel(options) {
             }
         }));
         footerElement.appendChild(renderer_span({
-            text: "v2.0.0"
+            text: "v2.0.1"
         }));
     }
     function renderErrorState(container) {
@@ -6731,6 +6731,133 @@ function createStateCopy(state) {
         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",
@@ -6914,9 +7041,11 @@ function createDevTools(options = {}) {
     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
     });
@@ -6944,6 +7073,7 @@ function createDevToolsPanel(options) {
                     gpc: persistedOverrides.gpc
                 });
             }
+            renderActivePanel();
         },
         onDisconnect: ()=>{
             stateManager.setConnected(false);
@@ -6951,6 +7081,7 @@ function createDevToolsPanel(options) {
             detachInstrumentation = null;
             detachScriptDebug?.();
             detachScriptDebug = null;
+            renderActivePanel();
         }
     });
     const panelRenderer = createPanelRenderer({
@@ -6983,25 +7114,33 @@ function createDevToolsPanel(options) {
             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();
@@ -7010,16 +7149,16 @@ function createDevToolsPanel(options) {
     }
     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);
@@ -7027,8 +7166,9 @@ function createDevToolsPanel(options) {
                 },
                 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/index.cjs

@@ -2764,7 +2764,7 @@ var __webpack_exports__ = {};
                 }
             }));
             footerElement.appendChild(renderer_span({
-                text: "v2.0.0"
+                text: "v2.0.1"
             }));
         }
         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.1"
             }));
         }
         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);