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

package/dist/tanstack.cjs

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __webpack_modules__ = {
     "../../node_modules/.bun/@rsbuild+core@2.0.0-beta.11+490411ac90707e06/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[1].oneOf[2].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[1].oneOf[2].use[2]!./src/styles/animations.module.css" (module, __webpack_exports__, __webpack_require__) {
         __webpack_require__.d(__webpack_exports__, {
@@ -1964,8 +1965,11 @@ var __webpack_exports__ = {};
 (()=>{
     __webpack_require__.r(__webpack_exports__);
     __webpack_require__.d(__webpack_exports__, {
+        C15tTanStackDevtoolsPanel: ()=>C15tTanStackDevtoolsPanel,
+        c15tDevtools: ()=>c15tDevtools,
         c15tDevtoolsPlugin: ()=>c15tDevtoolsPlugin
     });
+    const external_react_namespaceObject = require("react");
     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);
@@ -1998,99 +2002,6 @@ var __webpack_exports__ = {};
     injectStylesIntoStyleTag_default()(panel_module.A, panel_module_options);
     panel_module.A && panel_module.A.locals && panel_module.A.locals;
     '[data-c15t-trigger], [aria-label*="privacy settings" i], [aria-label*="preference" i]';
-    function createElement(options = {}) {
-        const { tag = 'div', text, html, children, className, id, style, dataset, onClick, onMouseEnter, onMouseLeave, onKeyDown, onKeyUp, onFocus, onBlur, onChange, onInput, onAnimationEnd, onTransitionEnd, ...attrs } = options;
-        const element = document.createElement(tag);
-        if (className) element.className = className;
-        if (id) element.id = id;
-        if (style) {
-            for (const [key, value] of Object.entries(style))if (void 0 !== value) element.style.setProperty(key.replace(/([A-Z])/g, '-$1').toLowerCase(), String(value));
-        }
-        if (dataset) for (const [key, value] of Object.entries(dataset))element.dataset[key] = value;
-        if (text) element.textContent = text;
-        if (html) element.innerHTML = html;
-        if (children) {
-            for (const child of children)if (null != child) if ('string' == typeof child) element.appendChild(document.createTextNode(child));
-            else element.appendChild(child);
-        }
-        if (void 0 !== attrs.ariaLabel) element.setAttribute('aria-label', attrs.ariaLabel);
-        if (void 0 !== attrs.ariaExpanded) element.setAttribute('aria-expanded', attrs.ariaExpanded);
-        if (void 0 !== attrs.ariaHidden) element.setAttribute('aria-hidden', attrs.ariaHidden);
-        if (void 0 !== attrs.ariaSelected) element.setAttribute('aria-selected', attrs.ariaSelected);
-        if (void 0 !== attrs.ariaControls) element.setAttribute('aria-controls', attrs.ariaControls);
-        if (void 0 !== attrs.ariaChecked) element.setAttribute('aria-checked', attrs.ariaChecked);
-        for (const [key, value] of Object.entries(attrs))if (void 0 !== value && !key.startsWith('aria')) if ('boolean' == typeof value) {
-            if (value) element.setAttribute(key, '');
-        } else element.setAttribute(key, String(value));
-        if (onClick) element.addEventListener('click', onClick);
-        if (onMouseEnter) element.addEventListener('mouseenter', onMouseEnter);
-        if (onMouseLeave) element.addEventListener('mouseleave', onMouseLeave);
-        if (onKeyDown) element.addEventListener('keydown', onKeyDown);
-        if (onKeyUp) element.addEventListener('keyup', onKeyUp);
-        if (onFocus) element.addEventListener('focus', onFocus);
-        if (onBlur) element.addEventListener('blur', onBlur);
-        if (onChange) element.addEventListener('change', onChange);
-        if (onInput) element.addEventListener('input', onInput);
-        if (onAnimationEnd) element.addEventListener('animationend', onAnimationEnd);
-        if (onTransitionEnd) element.addEventListener('transitionend', onTransitionEnd);
-        return element;
-    }
-    function renderer_div(options = {}) {
-        return createElement({
-            ...options,
-            tag: 'div'
-        });
-    }
-    function renderer_button(options = {}) {
-        return createElement({
-            ...options,
-            tag: 'button',
-            type: options.type ?? 'button'
-        });
-    }
-    function renderer_span(options = {}) {
-        return createElement({
-            ...options,
-            tag: 'span'
-        });
-    }
-    function input(options = {}) {
-        return createElement({
-            ...options,
-            tag: 'input'
-        });
-    }
-    function renderer_select(options = {}) {
-        const { options: selectOptions, selectedValue, ...rest } = options;
-        const selectElement = createElement({
-            ...rest,
-            tag: 'select'
-        });
-        if (selectOptions) for (const opt of selectOptions){
-            const optionElement = document.createElement('option');
-            optionElement.value = opt.value;
-            optionElement.textContent = opt.label;
-            if (selectedValue === opt.value) optionElement.selected = true;
-            selectElement.appendChild(optionElement);
-        }
-        return selectElement;
-    }
-    function renderer_createSvgElement(svgContent, options = {}) {
-        const { className, ariaHidden = true, width = 24, height = 24 } = options;
-        const wrapper = document.createElement('div');
-        wrapper.innerHTML = svgContent.trim();
-        const svg = wrapper.firstElementChild;
-        if (svg) {
-            if (className) svg.setAttribute('class', className);
-            if (ariaHidden) svg.setAttribute('aria-hidden', 'true');
-            svg.setAttribute('width', String(width));
-            svg.setAttribute('height', String(height));
-        }
-        return svg;
-    }
-    function renderer_clearElement(element) {
-        while(element.firstChild)element.removeChild(element.firstChild);
-    }
     var tabs_module = __webpack_require__("../../node_modules/.bun/@rsbuild+core@2.0.0-beta.11+490411ac90707e06/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[1].oneOf[2].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[1].oneOf[2].use[2]!./src/styles/tabs.module.css");
     var tabs_module_options = {};
     tabs_module_options.styleTagTransform = styleTagTransform_default();
@@ -2099,428 +2010,7 @@ var __webpack_exports__ = {};
     tabs_module_options.domAPI = styleDomAPI_default();
     tabs_module_options.insertStyleElement = insertStyleElement_default();
     injectStylesIntoStyleTag_default()(tabs_module.A, tabs_module_options);
-    const styles_tabs_module = tabs_module.A && tabs_module.A.locals ? tabs_module.A.locals : void 0;
-    const CONSENTS_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">
-  <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
-  <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
-</svg>`;
-    const LOCATION_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">
-  <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>
-  <polyline points="8 6 2 12 8 18"></polyline>
-</svg>`;
-    const ACTIONS_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.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path>
-  <circle cx="12" cy="12" r="3"></circle>
-</svg>`;
-    const IAB_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 12 2 2 4-4"></path>
-</svg>`;
-    const EVENTS_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 20h9"></path>
-  <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"></path>
-</svg>`;
-    const MORE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-  <circle cx="12" cy="5" r="1.75"></circle>
-  <circle cx="12" cy="12" r="1.75"></circle>
-  <circle cx="12" cy="19" r="1.75"></circle>
-</svg>`;
-    const TABS = [
-        {
-            id: 'location',
-            label: 'Location',
-            icon: LOCATION_ICON
-        },
-        {
-            id: 'policy',
-            label: 'Policy',
-            icon: POLICY_ICON
-        },
-        {
-            id: 'consents',
-            label: 'Consents',
-            icon: CONSENTS_ICON
-        },
-        {
-            id: "scripts",
-            label: 'Scripts',
-            icon: SCRIPTS_ICON
-        },
-        {
-            id: 'iab',
-            label: 'IAB',
-            icon: IAB_ICON
-        },
-        {
-            id: 'actions',
-            label: 'Actions',
-            icon: ACTIONS_ICON
-        },
-        {
-            id: 'events',
-            label: 'Events',
-            icon: EVENTS_ICON
-        }
-    ];
-    function tabs_createTabs(options) {
-        const { onTabChange, disabledTabs = [] } = options;
-        let activeTab = options.activeTab;
-        let isOverflowMenuOpen = false;
-        let visibleTabIds = [];
-        let hiddenTabIds = [];
-        const tabButtons = new Map();
-        const overflowButtons = new Map();
-        const tabList = renderer_div({
-            className: styles_tabs_module.tabList
-        });
-        const tabStrip = renderer_div({
-            className: styles_tabs_module.tabStrip,
-            role: 'tablist',
-            ariaLabel: 'DevTools tabs'
-        });
-        tabList.appendChild(tabStrip);
-        const overflowMenu = renderer_div({
-            className: styles_tabs_module.overflowMenu,
-            role: 'menu',
-            ariaLabel: 'All tabs'
-        });
-        overflowMenu.dataset.state = 'closed';
-        const overflowButton = renderer_button({
-            className: styles_tabs_module.overflowButton,
-            ariaLabel: 'More tabs',
-            ariaExpanded: 'false',
-            onClick: ()=>toggleOverflowMenu(),
-            onKeyDown: (e)=>{
-                if ('ArrowDown' === e.key || 'Enter' === e.key || ' ' === e.key) {
-                    e.preventDefault();
-                    openOverflowMenu();
-                    focusFirstEnabledOverflowItem();
-                }
-            }
-        });
-        overflowButton.setAttribute('aria-haspopup', 'menu');
-        const overflowIcon = renderer_div({
-            className: styles_tabs_module.overflowButtonIcon
-        });
-        overflowIcon.appendChild(renderer_createSvgElement(MORE_ICON, {
-            width: 14,
-            height: 14
-        }));
-        overflowButton.appendChild(overflowIcon);
-        const overflowContainer = renderer_div({
-            className: styles_tabs_module.overflowContainer,
-            children: [
-                overflowButton,
-                overflowMenu
-            ]
-        });
-        tabList.appendChild(overflowContainer);
-        for (const tab of TABS){
-            const isActive = tab.id === activeTab;
-            const isDisabled = disabledTabs.includes(tab.id);
-            const tabButton = renderer_button({
-                className: `${styles_tabs_module.tab} ${isActive ? styles_tabs_module.tabActive : ''} ${isDisabled ? styles_tabs_module.tabDisabled : ''}`,
-                role: 'tab',
-                ariaSelected: isActive ? 'true' : 'false',
-                ariaControls: `panel-${tab.id}`,
-                ariaDisabled: isDisabled ? 'true' : void 0,
-                tabIndex: isActive ? 0 : -1,
-                disabled: isDisabled,
-                onClick: ()=>{
-                    if (!isDisabled) {
-                        closeOverflowMenu();
-                        setActiveTab(tab.id);
-                        onTabChange(tab.id);
-                    }
-                },
-                onKeyDown: (e)=>handleKeyDown(e, tab.id)
-            });
-            const iconWrapper = renderer_div({
-                className: styles_tabs_module.tabIcon
-            });
-            iconWrapper.appendChild(renderer_createSvgElement(tab.icon, {
-                width: 14,
-                height: 14
-            }));
-            tabButton.appendChild(iconWrapper);
-            tabButton.appendChild(document.createTextNode(tab.label));
-            tabButtons.set(tab.id, tabButton);
-            tabStrip.appendChild(tabButton);
-            const overflowItem = renderer_button({
-                className: `${styles_tabs_module.overflowItem} ${isActive ? styles_tabs_module.overflowItemActive : ''} ${isDisabled ? styles_tabs_module.overflowItemDisabled : ''}`,
-                role: 'menuitemradio',
-                ariaChecked: isActive ? 'true' : 'false',
-                disabled: isDisabled,
-                onClick: ()=>{
-                    if (!isDisabled) {
-                        setActiveTab(tab.id);
-                        onTabChange(tab.id);
-                        closeOverflowMenu();
-                        tabButtons.get(tab.id)?.focus();
-                    }
-                },
-                onKeyDown: (e)=>handleOverflowKeyDown(e, tab.id)
-            });
-            const overflowItemIcon = renderer_div({
-                className: styles_tabs_module.overflowItemIcon
-            });
-            overflowItemIcon.appendChild(renderer_createSvgElement(tab.icon, {
-                width: 14,
-                height: 14
-            }));
-            overflowItem.appendChild(overflowItemIcon);
-            overflowItem.appendChild(document.createTextNode(tab.label));
-            overflowButtons.set(tab.id, overflowItem);
-            overflowMenu.appendChild(overflowItem);
-        }
-        function applyActiveState(tab) {
-            for (const [tabId, tabButton] of tabButtons){
-                const isActive = tabId === tab;
-                if (styles_tabs_module.tabActive) tabButton.classList.toggle(styles_tabs_module.tabActive, isActive);
-                tabButton.setAttribute('aria-selected', isActive ? 'true' : 'false');
-                tabButton.tabIndex = isActive ? 0 : -1;
-            }
-            for (const [tabId, overflowItem] of overflowButtons){
-                const isActive = tabId === tab;
-                if (styles_tabs_module.overflowItemActive) overflowItem.classList.toggle(styles_tabs_module.overflowItemActive, isActive);
-                overflowItem.setAttribute('aria-checked', isActive ? 'true' : 'false');
-            }
-        }
-        function updateVisibleTabs() {
-            const allTabIds = TABS.map((t)=>t.id);
-            const iabEnabled = !disabledTabs.includes('iab');
-            const preferredSecondTab = iabEnabled ? 'iab' : 'consents';
-            const overflowSecondTab = iabEnabled ? 'consents' : 'iab';
-            const showOverflowSecondTabInStrip = activeTab === overflowSecondTab;
-            const stripSecondTab = showOverflowSecondTabInStrip ? overflowSecondTab : preferredSecondTab;
-            const forcedOverflowTab = showOverflowSecondTabInStrip ? preferredSecondTab : overflowSecondTab;
-            const layoutTabIds = [
-                'location',
-                'policy',
-                stripSecondTab,
-                "scripts",
-                'actions',
-                'events',
-                forcedOverflowTab
-            ];
-            const forcedOverflowTabIds = new Set();
-            forcedOverflowTabIds.add(forcedOverflowTab);
-            for (const [index, tabId] of layoutTabIds.entries()){
-                const tabButton = tabButtons.get(tabId);
-                if (tabButton) tabButton.style.order = String(index);
-                const overflowItem = overflowButtons.get(tabId);
-                if (overflowItem) overflowItem.style.order = String(index);
-            }
-            for (const tabId of allTabIds){
-                const tabButton = tabButtons.get(tabId);
-                if (tabButton && styles_tabs_module.tabHidden) tabButton.classList.remove(styles_tabs_module.tabHidden);
-            }
-            if (styles_tabs_module.overflowContainerHidden) overflowContainer.classList.remove(styles_tabs_module.overflowContainerHidden);
-            const stripGap = Number.parseFloat(getComputedStyle(tabStrip).gap || '0');
-            const calculateVisibleTabs = (availableWidth)=>{
-                if (availableWidth <= 0) return [];
-                const nextVisible = [];
-                let usedWidth = 0;
-                for (const tabId of layoutTabIds){
-                    if (forcedOverflowTabIds.has(tabId)) continue;
-                    const tabButton = tabButtons.get(tabId);
-                    if (!tabButton) continue;
-                    const width = tabButton.getBoundingClientRect().width;
-                    const nextUsed = 0 === nextVisible.length ? width : usedWidth + stripGap + width;
-                    if (nextUsed <= availableWidth) {
-                        nextVisible.push(tabId);
-                        usedWidth = nextUsed;
-                    } else break;
-                }
-                return nextVisible;
-            };
-            const measureStripWidth = ()=>tabStrip.getBoundingClientRect().width;
-            const showOverflowContainer = ()=>{
-                if (styles_tabs_module.overflowContainerHidden) overflowContainer.classList.remove(styles_tabs_module.overflowContainerHidden);
-            };
-            const hideOverflowContainer = ()=>{
-                if (styles_tabs_module.overflowContainerHidden) overflowContainer.classList.add(styles_tabs_module.overflowContainerHidden);
-            };
-            const measureVisibleWidth = (tabIds)=>{
-                let width = 0;
-                for (const [index, tabId] of tabIds.entries()){
-                    const tabButton = tabButtons.get(tabId);
-                    if (tabButton) {
-                        width += tabButton.getBoundingClientRect().width;
-                        if (index > 0) width += stripGap;
-                    }
-                }
-                return width;
-            };
-            if (0 === forcedOverflowTabIds.size) {
-                hideOverflowContainer();
-                const visibleWithoutOverflow = calculateVisibleTabs(measureStripWidth());
-                if (visibleWithoutOverflow.length === layoutTabIds.length) visibleTabIds = visibleWithoutOverflow;
-                else {
-                    showOverflowContainer();
-                    visibleTabIds = calculateVisibleTabs(measureStripWidth());
-                }
-            } else {
-                showOverflowContainer();
-                const withOverflow = calculateVisibleTabs(measureStripWidth());
-                visibleTabIds = withOverflow.length > 0 ? withOverflow : [
-                    activeTab
-                ];
-            }
-            if (!visibleTabIds.includes(activeTab) && !disabledTabs.includes(activeTab)) if (visibleTabIds.length > 0) visibleTabIds[visibleTabIds.length - 1] = activeTab;
-            else visibleTabIds = [
-                activeTab
-            ];
-            visibleTabIds = [
-                ...new Set(visibleTabIds)
-            ];
-            const maxStripWidth = measureStripWidth();
-            while(visibleTabIds.length > 1 && measureVisibleWidth(visibleTabIds) > maxStripWidth + 0.5){
-                let removeIndex = visibleTabIds.length - 1;
-                if (visibleTabIds[removeIndex] === activeTab) removeIndex = Math.max(0, removeIndex - 1);
-                visibleTabIds.splice(removeIndex, 1);
-            }
-            hiddenTabIds = layoutTabIds.filter((tabId)=>!visibleTabIds.includes(tabId) || forcedOverflowTabIds.has(tabId) && tabId !== activeTab);
-            for (const tabId of allTabIds){
-                const tabButton = tabButtons.get(tabId);
-                if (tabButton) {
-                    if (styles_tabs_module.tabHidden) tabButton.classList.toggle(styles_tabs_module.tabHidden, hiddenTabIds.includes(tabId));
-                }
-            }
-            for (const tabId of allTabIds){
-                const overflowItem = overflowButtons.get(tabId);
-                if (overflowItem) {
-                    if (styles_tabs_module.overflowItemHidden) overflowItem.classList.toggle(styles_tabs_module.overflowItemHidden, !hiddenTabIds.includes(tabId));
-                }
-            }
-            if (styles_tabs_module.overflowContainerHidden) overflowContainer.classList.toggle(styles_tabs_module.overflowContainerHidden, 0 === hiddenTabIds.length);
-            if (0 === hiddenTabIds.length) closeOverflowMenu();
-        }
-        function focusFirstEnabledOverflowItem() {
-            const firstEnabled = hiddenTabIds.find((tabId)=>!disabledTabs.includes(tabId));
-            if (firstEnabled) overflowButtons.get(firstEnabled)?.focus();
-        }
-        function openOverflowMenu() {
-            if (isOverflowMenuOpen || 0 === hiddenTabIds.length) return;
-            isOverflowMenuOpen = true;
-            overflowMenu.dataset.state = 'open';
-            overflowButton.setAttribute('aria-expanded', 'true');
-            document.addEventListener('click', handleOutsideClick);
-            document.addEventListener('keydown', handleEscapeKey);
-        }
-        function closeOverflowMenu() {
-            if (!isOverflowMenuOpen) return;
-            isOverflowMenuOpen = false;
-            overflowMenu.dataset.state = 'closed';
-            overflowButton.setAttribute('aria-expanded', 'false');
-            document.removeEventListener('click', handleOutsideClick);
-            document.removeEventListener('keydown', handleEscapeKey);
-        }
-        function toggleOverflowMenu() {
-            if (isOverflowMenuOpen) closeOverflowMenu();
-            else openOverflowMenu();
-        }
-        function handleOutsideClick(e) {
-            if (!overflowContainer.contains(e.target)) closeOverflowMenu();
-        }
-        function handleEscapeKey(e) {
-            if ('Escape' === e.key) closeOverflowMenu();
-        }
-        function handleKeyDown(e, currentTab) {
-            const enabledTabIds = visibleTabIds.filter((tabId)=>!disabledTabs.includes(tabId));
-            const currentIndex = enabledTabIds.indexOf(currentTab);
-            let newIndex = currentIndex;
-            switch(e.key){
-                case 'ArrowLeft':
-                    newIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabIds.length - 1;
-                    break;
-                case 'ArrowRight':
-                    newIndex = currentIndex < enabledTabIds.length - 1 ? currentIndex + 1 : 0;
-                    break;
-                case 'Home':
-                    newIndex = 0;
-                    break;
-                case 'End':
-                    newIndex = enabledTabIds.length - 1;
-                    break;
-                default:
-                    return;
-            }
-            e.preventDefault();
-            const newTab = enabledTabIds[newIndex];
-            if (newTab) {
-                setActiveTab(newTab);
-                onTabChange(newTab);
-                tabButtons.get(newTab)?.focus();
-            }
-        }
-        function handleOverflowKeyDown(e, currentTab) {
-            const enabledTabIds = hiddenTabIds.filter((tabId)=>!disabledTabs.includes(tabId));
-            const currentIndex = enabledTabIds.indexOf(currentTab);
-            if ('Escape' === e.key) {
-                e.preventDefault();
-                closeOverflowMenu();
-                overflowButton.focus();
-                return;
-            }
-            let newIndex = currentIndex;
-            switch(e.key){
-                case 'ArrowDown':
-                    newIndex = (currentIndex + 1) % enabledTabIds.length;
-                    break;
-                case 'ArrowUp':
-                    newIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabIds.length - 1;
-                    break;
-                default:
-                    return;
-            }
-            e.preventDefault();
-            const newTab = enabledTabIds[newIndex];
-            if (newTab) overflowButtons.get(newTab)?.focus();
-        }
-        function setActiveTab(tab) {
-            activeTab = tab;
-            applyActiveState(tab);
-            updateVisibleTabs();
-        }
-        const handleWindowResize = ()=>{
-            updateVisibleTabs();
-        };
-        let resizeObserver = null;
-        if ("u" > typeof ResizeObserver) {
-            resizeObserver = new ResizeObserver(()=>{
-                updateVisibleTabs();
-            });
-            resizeObserver.observe(tabList);
-        } else window.addEventListener('resize', handleWindowResize);
-        applyActiveState(activeTab);
-        requestAnimationFrame(()=>{
-            updateVisibleTabs();
-        });
-        return {
-            element: tabList,
-            setActiveTab,
-            destroy: ()=>{
-                closeOverflowMenu();
-                if (resizeObserver) {
-                    resizeObserver.disconnect();
-                    resizeObserver = null;
-                } else window.removeEventListener('resize', handleWindowResize);
-                tabButtons.clear();
-                overflowButtons.clear();
-            }
-        };
-    }
+    tabs_module.A && tabs_module.A.locals && tabs_module.A.locals;
     function debug_bundle_createDebugBundle(payload) {
         const { namespace, devToolsState, connection, recentEvents, storeState } = payload;
         const bundle = {
@@ -2610,6 +2100,99 @@ var __webpack_exports__ = {};
             localStorage.removeItem(storageKey);
         } catch  {}
     }
+    function createElement(options = {}) {
+        const { tag = 'div', text, html, children, className, id, style, dataset, onClick, onMouseEnter, onMouseLeave, onKeyDown, onKeyUp, onFocus, onBlur, onChange, onInput, onAnimationEnd, onTransitionEnd, ...attrs } = options;
+        const element = document.createElement(tag);
+        if (className) element.className = className;
+        if (id) element.id = id;
+        if (style) {
+            for (const [key, value] of Object.entries(style))if (void 0 !== value) element.style.setProperty(key.replace(/([A-Z])/g, '-$1').toLowerCase(), String(value));
+        }
+        if (dataset) for (const [key, value] of Object.entries(dataset))element.dataset[key] = value;
+        if (text) element.textContent = text;
+        if (html) element.innerHTML = html;
+        if (children) {
+            for (const child of children)if (null != child) if ('string' == typeof child) element.appendChild(document.createTextNode(child));
+            else element.appendChild(child);
+        }
+        if (void 0 !== attrs.ariaLabel) element.setAttribute('aria-label', attrs.ariaLabel);
+        if (void 0 !== attrs.ariaExpanded) element.setAttribute('aria-expanded', attrs.ariaExpanded);
+        if (void 0 !== attrs.ariaHidden) element.setAttribute('aria-hidden', attrs.ariaHidden);
+        if (void 0 !== attrs.ariaSelected) element.setAttribute('aria-selected', attrs.ariaSelected);
+        if (void 0 !== attrs.ariaControls) element.setAttribute('aria-controls', attrs.ariaControls);
+        if (void 0 !== attrs.ariaChecked) element.setAttribute('aria-checked', attrs.ariaChecked);
+        for (const [key, value] of Object.entries(attrs))if (void 0 !== value && !key.startsWith('aria')) if ('boolean' == typeof value) {
+            if (value) element.setAttribute(key, '');
+        } else element.setAttribute(key, String(value));
+        if (onClick) element.addEventListener('click', onClick);
+        if (onMouseEnter) element.addEventListener('mouseenter', onMouseEnter);
+        if (onMouseLeave) element.addEventListener('mouseleave', onMouseLeave);
+        if (onKeyDown) element.addEventListener('keydown', onKeyDown);
+        if (onKeyUp) element.addEventListener('keyup', onKeyUp);
+        if (onFocus) element.addEventListener('focus', onFocus);
+        if (onBlur) element.addEventListener('blur', onBlur);
+        if (onChange) element.addEventListener('change', onChange);
+        if (onInput) element.addEventListener('input', onInput);
+        if (onAnimationEnd) element.addEventListener('animationend', onAnimationEnd);
+        if (onTransitionEnd) element.addEventListener('transitionend', onTransitionEnd);
+        return element;
+    }
+    function renderer_div(options = {}) {
+        return createElement({
+            ...options,
+            tag: 'div'
+        });
+    }
+    function renderer_button(options = {}) {
+        return createElement({
+            ...options,
+            tag: 'button',
+            type: options.type ?? 'button'
+        });
+    }
+    function renderer_span(options = {}) {
+        return createElement({
+            ...options,
+            tag: 'span'
+        });
+    }
+    function input(options = {}) {
+        return createElement({
+            ...options,
+            tag: 'input'
+        });
+    }
+    function renderer_select(options = {}) {
+        const { options: selectOptions, selectedValue, ...rest } = options;
+        const selectElement = createElement({
+            ...rest,
+            tag: 'select'
+        });
+        if (selectOptions) for (const opt of selectOptions){
+            const optionElement = document.createElement('option');
+            optionElement.value = opt.value;
+            optionElement.textContent = opt.label;
+            if (selectedValue === opt.value) optionElement.selected = true;
+            selectElement.appendChild(optionElement);
+        }
+        return selectElement;
+    }
+    function renderer_createSvgElement(svgContent, options = {}) {
+        const { className, ariaHidden = true, width = 24, height = 24 } = options;
+        const wrapper = document.createElement('div');
+        wrapper.innerHTML = svgContent.trim();
+        const svg = wrapper.firstElementChild;
+        if (svg) {
+            if (className) svg.setAttribute('class', className);
+            if (ariaHidden) svg.setAttribute('aria-hidden', 'true');
+            svg.setAttribute('width', String(width));
+            svg.setAttribute('height', String(height));
+        }
+        return svg;
+    }
+    function renderer_clearElement(element) {
+        while(element.firstChild)element.removeChild(element.firstChild);
+    }
     var components_module = __webpack_require__("../../node_modules/.bun/@rsbuild+core@2.0.0-beta.11+490411ac90707e06/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[1].oneOf[2].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[1].oneOf[2].use[2]!./src/styles/components.module.css");
     var components_module_options = {};
     components_module_options.styleTagTransform = styleTagTransform_default();
@@ -5924,6 +5507,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",
@@ -5944,9 +5654,11 @@ var __webpack_exports__ = {};
         };
     }
     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 = state_manager_createStateManager({
             isOpen: true
         });
@@ -5974,6 +5686,7 @@ var __webpack_exports__ = {};
                         gpc: persistedOverrides.gpc
                     });
                 }
+                renderActivePanel();
             },
             onDisconnect: ()=>{
                 stateManager.setConnected(false);
@@ -5981,6 +5694,7 @@ var __webpack_exports__ = {};
                 detachInstrumentation = null;
                 detachScriptDebug?.();
                 detachScriptDebug = null;
+                renderActivePanel();
             }
         });
         const panelRenderer = panel_renderer_createPanelRenderer({
@@ -6013,25 +5727,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();
@@ -6040,16 +5762,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 = tabs_createTabs({
+                tabsInstance = createEmbeddedTabs({
                     activeTab,
                     onTabChange: (tab)=>{
                         stateManager.setActiveTab(tab);
@@ -6057,8 +5779,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;
         }
@@ -6082,26 +5805,93 @@ var __webpack_exports__ = {};
             }
         };
     }
-    function c15tDevtoolsPlugin(options = {}) {
-        const { namespace = 'c15tStore' } = options;
-        return {
-            name: 'c15t',
-            label: 'Consent',
-            render: (container)=>{
-                const panel = createDevToolsPanel({
-                    namespace,
-                    mode: 'embedded'
-                });
-                container.appendChild(panel.element);
-                return ()=>{
-                    panel.destroy();
-                };
+    const embeddedPanelStyle = {
+        height: '100%',
+        width: '100%',
+        minHeight: 0
+    };
+    const EMBEDDED_PANEL_RELEASE_DELAY_MS = 60000;
+    const sharedEmbeddedPanels = new Map();
+    function acquireEmbeddedPanel(namespace) {
+        const existingPanel = sharedEmbeddedPanels.get(namespace);
+        if (existingPanel) {
+            if (existingPanel.releaseTimeout) {
+                clearTimeout(existingPanel.releaseTimeout);
+                existingPanel.releaseTimeout = null;
             }
+            existingPanel.refCount += 1;
+            return existingPanel;
+        }
+        const panel = createDevToolsPanel({
+            namespace,
+            mode: 'embedded'
+        });
+        const entry = {
+            panel,
+            refCount: 1,
+            releaseTimeout: null
         };
+        sharedEmbeddedPanels.set(namespace, entry);
+        return entry;
+    }
+    function releaseEmbeddedPanel(namespace) {
+        const entry = sharedEmbeddedPanels.get(namespace);
+        if (!entry) return;
+        entry.refCount = Math.max(0, entry.refCount - 1);
+        if (entry.refCount > 0 || entry.releaseTimeout) return;
+        entry.releaseTimeout = setTimeout(()=>{
+            const currentEntry = sharedEmbeddedPanels.get(namespace);
+            if (!currentEntry || currentEntry.refCount > 0) return;
+            currentEntry.panel.destroy();
+            sharedEmbeddedPanels.delete(namespace);
+        }, EMBEDDED_PANEL_RELEASE_DELAY_MS);
+    }
+    function C15tTanStackDevtoolsPanel({ namespace = 'c15tStore', style, ...props }) {
+        const containerRef = external_react_namespaceObject.useRef(null);
+        external_react_namespaceObject.useLayoutEffect(()=>{
+            const container = containerRef.current;
+            if (!container) return;
+            const entry = acquireEmbeddedPanel(namespace);
+            container.replaceChildren(entry.panel.element);
+            return ()=>{
+                if (entry.panel.element.parentElement === container) container.removeChild(entry.panel.element);
+                releaseEmbeddedPanel(namespace);
+            };
+        }, [
+            namespace
+        ]);
+        return external_react_namespaceObject.createElement('div', {
+            ...props,
+            ref: containerRef,
+            style: {
+                ...embeddedPanelStyle,
+                ...style
+            }
+        });
+    }
+    function createC15tDevtoolsPlugin(options = {}) {
+        const { namespace = 'c15tStore', id = 'c15t', name = 'c15t', defaultOpen = false, ...panelProps } = options;
+        return {
+            id,
+            name,
+            defaultOpen,
+            render: external_react_namespaceObject.createElement(C15tTanStackDevtoolsPanel, {
+                ...panelProps,
+                namespace
+            })
+        };
+    }
+    function c15tDevtools(options = {}) {
+        return createC15tDevtoolsPlugin(options);
     }
+    const c15tDevtoolsPlugin = c15tDevtools;
 })();
+exports.C15tTanStackDevtoolsPanel = __webpack_exports__.C15tTanStackDevtoolsPanel;
+exports.c15tDevtools = __webpack_exports__.c15tDevtools;
 exports.c15tDevtoolsPlugin = __webpack_exports__.c15tDevtoolsPlugin;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "C15tTanStackDevtoolsPanel",
+    "c15tDevtools",
     "c15tDevtoolsPlugin"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {