@c15t/dev-tools 2.0.0 → 2.0.4

package/README.md

@@ -1,187 +1,92 @@
-# @c15t/dev-tools
+<p align="center">
+  <a href="https://c15t.com?utm_source=npm&utm_medium=readme&utm_campaign=oss_readme&utm_content=%40c15t%2Fdev-tools" target="_blank" rel="noopener noreferrer">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="../../docs/assets/c15t-banner-readme-dark.svg" type="image/svg+xml">
+      <img src="../../docs/assets/c15t-banner-readme-light.svg" alt="c15t Banner" type="image/svg+xml">
+    </picture>
+  </a>
+</p>
 
-Developer tools for debugging and inspecting c15t consent management state.
+# @c15t/dev-tools: Developer Tooling (Work in Progress)
 
-## Features
+[![GitHub stars](https://img.shields.io/github/stars/c15t/c15t?style=flat-square)](https://github.com/c15t/c15t)
+[![CI](https://img.shields.io/github/actions/workflow/status/c15t/c15t/ci.yml?style=flat-square)](https://github.com/c15t/c15t/actions/workflows/ci.yml)
+[![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square)](https://github.com/c15t/c15t/blob/main/LICENSE.md)
+[![Discord](https://img.shields.io/discord/1312171102268690493?style=flat-square)](https://c15t.link/discord)
+[![npm version](https://img.shields.io/npm/v/%40c15t%2Fdev-tools?style=flat-square)](https://www.npmjs.com/package/@c15t/dev-tools)
+[![Top Language](https://img.shields.io/github/languages/top/c15t/c15t?style=flat-square)](https://github.com/c15t/c15t)
+[![Last Commit](https://img.shields.io/github/last-commit/c15t/c15t?style=flat-square)](https://github.com/c15t/c15t/commits/main)
+[![Open Issues](https://img.shields.io/github/issues/c15t/c15t?style=flat-square)](https://github.com/c15t/c15t/issues)
 
-- **Consents Panel**: View and toggle consent states in real-time
-- **Location Panel**: Inspect location and apply geo/language overrides
-- **Policy Panel**: Inspect detailed runtime policy-pack decision data
-- **Scripts Panel**: Monitor script loading status
-- **Actions Panel**: Quick actions for testing consent flows
-- **Framework Agnostic**: Pure JavaScript core with React wrapper
-- **TanStack DevTools Integration**: Use as a plugin in TanStack DevTools
-- **CSS Animations**: Smooth, accessible animations with reduced motion support
-- **Dark Mode**: Automatic dark mode support
+A collection of developer tools and utilities for the c15t ecosystem, currently under active development.
 
-## Installation
+## Key Features
 
-```bash
-bun add @c15t/dev-tools
-```
-
-## Usage
-
-### React
-
-The easiest way to add DevTools to a React application:
-
-```tsx
-import { DevTools } from '@c15t/dev-tools/react';
-
-function App() {
-  return (
-    <>
-      <YourApp />
-      <DevTools position="bottom-right" />
-    </>
-  );
-}
-```
-
-#### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `namespace` | `string` | `'c15tStore'` | Window namespace for the store |
-| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Position of the floating button |
-| `defaultOpen` | `boolean` | `false` | Whether to start with panel open |
-| `disabled` | `boolean` | `false` | Disable DevTools (e.g., in production) |
-
-#### Production Usage
-
-```tsx
-<DevTools disabled={process.env.NODE_ENV === 'production'} />
-```
-
-### Vanilla JavaScript
-
-For non-React applications or more control:
-
-```typescript
-import { createDevTools } from '@c15t/dev-tools';
-
-const devtools = createDevTools({
-  namespace: 'c15tStore',
-  position: 'bottom-right',
-});
+- 🚧 Experimental developer utilities
+- React component library with utility tools
+- Radix UI and Tailwind CSS integration
+- State management and UI component helpers
+- Ongoing development and refinement
 
-// Control programmatically
-devtools.open();
-devtools.close();
-devtools.toggle();
+## Prerequisites
 
-// Cleanup
-devtools.destroy();
-```
-
-### TanStack DevTools Plugin
-
-Integrate with TanStack DevTools:
+- Node.js 18.17.0 or later
+- React 16.8.0 or later
+- Familiarity with experimental tooling
 
-```tsx
-import { TanStackDevtools } from '@tanstack/react-devtools';
-import { c15tDevtoolsPlugin } from '@c15t/dev-tools/tanstack';
-
-function App() {
-  return (
-    <>
-      <YourApp />
-      <TanStackDevtools plugins={[c15tDevtoolsPlugin()]} />
-    </>
-  );
-}
-```
+## Manual Installation
 
-## Console API
-
-The DevTools expose a global API for quick debugging:
-
-```javascript
-// Open/close the panel
-window.__c15tDevTools.open();
-window.__c15tDevTools.close();
-window.__c15tDevTools.toggle();
-
-// Check state
-window.__c15tDevTools.getState();
-// { isOpen: false, activeTab: 'consents', isConnected: true }
+```bash
+pnpm add @c15t/dev-tools
 ```
 
-## Panels
+⚠️ **Note:** This package is experimental and may undergo significant changes.
 
-### Consents
-
-- View all consent types with enabled/disabled badges
-- Toggle individual consents with immediate feedback
-- Quick actions: Accept All, Reject All
-- Shows consent model (opt-in, opt-out, iab)
-
-### Location
-
-- Detected country, region, and jurisdiction
-- Compact active policy summary (policy ID + matcher + snapshot status)
-- Set country, region, and language overrides
-- View active consent model with description
-- Clear all overrides
+## Usage
 
-### Policy
+1. 🚧 Explore the dev tools with caution
+2. Import and use components carefully
+3. Expect potential breaking changes
+4. Feedback and contributions welcome!
 
-- Runtime policy decision details from `/init`
-- Policy ID, match strategy, and fingerprint
-- Consent model, scope mode, purpose scope
-- UI constraints (mode, allowed actions, primary action)
-- i18n profile, expiry, and proof-capture summary
-- Snapshot token presence indicator
+## Documentation
 
-### Scripts
+For further information, guides, and examples visit the [reference documentation](https://c15t.com/docs/dev-tools/overview).
 
-- List configured scripts with consent requirements
-- Status badges: Loaded, Pending, Blocked
-- Network blocker status
-- Summary of loaded vs pending scripts
+## Support
 
-### Actions
+- Join our [Discord community](https://c15t.link/discord)
+- Open an issue on our [GitHub repository](https://github.com/c15t/c15t/issues)
+- Visit [inth.com](https://inth.com) and use the chat widget
+- Contact our support team via email [support@inth.com](mailto:support@inth.com)
 
-- Show consent banner
-- Open preference center
-- Re-fetch banner data
-- Reset all consents
-- Copy state to clipboard for debugging
+## Contributing
 
-## Styling
+- We're open to all community contributions.
+- Read our [Contribution Guidelines](https://c15t.com/docs/oss/contributing)
+- Review our [Code of Conduct](https://c15t.com/docs/oss/code-of-conduct)
+- Fork the repository
+- Create a new branch for your feature
+- Submit a pull request
+- **All contributions, big or small, are welcome and appreciated.**
 
-The DevTools use CSS variables for theming. Variables are prefixed with `--c15t-devtools-`:
+## Security
 
-```css
-/* Override colors */
-:root {
-  --c15t-devtools-primary: hsl(220, 90%, 50%);
-  --c15t-devtools-surface: hsl(0, 0%, 100%);
-}
-```
+If you believe you have found a security vulnerability in c15t, we encourage you to **_responsibly disclose this and NOT open a public issue_**. We will investigate all legitimate reports.
 
-### Dark Mode
+Our preference is that you make use of GitHub's private vulnerability reporting feature to disclose potential security vulnerabilities in our open-source software. To do this, please visit [https://github.com/c15t/c15t/security](https://github.com/c15t/c15t/security) and click the "Report a vulnerability" button.
 
-Dark mode is automatically applied when:
-- The document has a `.dark` or `.c15t-dark` class
-- System preference is dark (`prefers-color-scheme: dark`)
+### Security Policy
 
-You can also force dark mode:
+- Please do not share security vulnerabilities in public forums, issues, or pull requests
+- Provide detailed information about the potential vulnerability
+- Allow reasonable time for us to address the issue before any public disclosure
+- We are committed to addressing security concerns promptly and transparently
 
-```css
-.my-devtools-container {
-  @extend .c15t-devtools-dark;
-}
-```
-
-## Browser Support
+## License
 
-- Chrome 90+
-- Firefox 90+
-- Safari 15+
-- Edge 90+
+[Apache License 2.0](https://github.com/c15t/c15t/blob/main/LICENSE.md)
 
-## License
+---
 
-Apache-2.0
+**Built by [Inth](https://inth.com?utm_source=npm&utm_medium=readme&utm_campaign=oss_readme&utm_content=%40c15t%2Fdev-tools)**

package/dist/379.js

@@ -2710,7 +2710,7 @@ function createPanel(options) {
             }
         }));
         footerElement.appendChild(renderer_span({
-            text: "v2.0.0"
+            text: "v2.0.4"
         }));
     }
     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;
     }