@c15t/dev-tools 1.8.3 → 2.0.0-rc.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @c15t/dev-tools
 
+## 2.0.0-rc.0
+
+### Major Changes
+
+- 126a78b: https://v2.c15t.com/changelog/2026-02-12-v2.0.0-rc.0
+
+### Patch Changes
+
+- Updated dependencies [126a78b]
+  - c15t@2.0.0-rc.0
+  - @c15t/ui@2.0.0-rc.0
+
 ## 1.8.3
 
 ### Patch Changes

package/README.md

@@ -1,92 +1,176 @@
-<p align="center">
-  <a href="https://c15t.com?utm_source=github&utm_medium=repopage_%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>
-  <br />
-  <h1 align="center">@c15t/dev-tools: Developer Tooling (Work in Progress)</h1>
-</p>
-
-[![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-GPL--3.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)
-
-A collection of developer tools and utilities for the c15t ecosystem, currently under active development.
-
-## Key Features
-
-- 🚧 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
-
-## Prerequisites
-
-- Node.js 18.17.0 or later
-- React 16.8.0 or later
-- Familiarity with experimental tooling
-
-## Manual Installation
+# @c15t/dev-tools
+
+Developer tools for debugging and inspecting c15t consent management state.
+
+## Features
+
+- **Consents Panel**: View and toggle consent states in real-time
+- **Location Panel**: Inspect detected location and set overrides
+- **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
+
+## Installation
 
 ```bash
-pnpm add @c15t/dev-tools
+bun add @c15t/dev-tools
 ```
 
-⚠️ **Note:** This package is experimental and may undergo significant changes.
-
 ## Usage
 
-1. 🚧 Explore the dev tools with caution
-2. Import and use components carefully
-3. Expect potential breaking changes
-4. Feedback and contributions welcome!
+### React
 
-## Documentation
+The easiest way to add DevTools to a React application:
 
-For further information, guides, and examples visit the [reference documentation](https://c15t.com/docs/dev-tools/overview).
+```tsx
+import { C15TDevTools } from '@c15t/dev-tools/react';
 
-## Support
+function App() {
+  return (
+    <>
+      <YourApp />
+      <C15TDevTools position="bottom-right" />
+    </>
+  );
+}
+```
 
-- Join our [Discord community](https://c15t.link/discord)
-- Open an issue on our [GitHub repository](https://github.com/c15t/c15t/issues)
-- Visit [consent.io](https://consent.io) and use the chat widget
-- Contact our support team via email [support@consent.io](mailto:support@consent.io)
+#### Props
 
-## Contributing
+| 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) |
 
-- 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!**
+#### Production Usage
 
-## Security
+```tsx
+<C15TDevTools disabled={process.env.NODE_ENV === 'production'} />
+```
 
-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.
+### Vanilla JavaScript
 
-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.
+For non-React applications or more control:
 
-### Security Policy
+```typescript
+import { createDevTools } from '@c15t/dev-tools';
 
-- 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
+const devtools = createDevTools({
+  namespace: 'c15tStore',
+  position: 'bottom-right',
+});
 
-## License
+// Control programmatically
+devtools.open();
+devtools.close();
+devtools.toggle();
+
+// Cleanup
+devtools.destroy();
+```
+
+### TanStack DevTools Plugin
+
+Integrate with TanStack DevTools:
+
+```tsx
+import { TanStackDevtools } from '@tanstack/react-devtools';
+import { c15tDevtoolsPlugin } from '@c15t/dev-tools/tanstack';
+
+function App() {
+  return (
+    <>
+      <YourApp />
+      <TanStackDevtools plugins={[c15tDevtoolsPlugin()]} />
+    </>
+  );
+}
+```
+
+## 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 }
+```
 
-[GNU General Public License v3.0](https://github.com/c15t/c15t/blob/main/LICENSE.md)
+## Panels
 
----
+### 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
+- Set country, region, and language overrides
+- View active consent model with description
+- Clear all overrides
+
+### Scripts
+
+- List configured scripts with consent requirements
+- Status badges: Loaded, Pending, Blocked
+- Network blocker status
+- Summary of loaded vs pending scripts
+
+### Actions
+
+- Show consent banner
+- Open preference center
+- Re-fetch banner data
+- Reset all consents
+- Copy state to clipboard for debugging
+
+## Styling
+
+The DevTools use CSS variables for theming. Variables are prefixed with `--c15t-devtools-`:
+
+```css
+/* Override colors */
+:root {
+  --c15t-devtools-primary: hsl(220, 90%, 50%);
+  --c15t-devtools-surface: hsl(0, 0%, 100%);
+}
+```
+
+### Dark Mode
+
+Dark mode is automatically applied when:
+- The document has a `.dark` or `.c15t-dark` class
+- System preference is dark (`prefers-color-scheme: dark`)
+
+You can also force dark mode:
+
+```css
+.my-devtools-container {
+  @extend .c15t-devtools-dark;
+}
+```
+
+## Browser Support
+
+- Chrome 90+
+- Firefox 90+
+- Safari 15+
+- Edge 90+
+
+## License
 
-**Built with ❤️ by the [consent.io](https://www.consent.io?utm_source=github&utm_medium=repopage_%40c15t%2Fdev-tools) team**
+GPL-3.0-only

package/dist/__tests__/components/ui.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ui.test.d.ts.map

package/dist/__tests__/components/ui.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.test.d.ts","sourceRoot":"","sources":["../../../src/__tests__/components/ui.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/core/renderer.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=renderer.test.d.ts.map

package/dist/__tests__/core/renderer.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.test.d.ts","sourceRoot":"","sources":["../../../src/__tests__/core/renderer.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/core/reset-consents.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=reset-consents.test.d.ts.map

package/dist/__tests__/core/reset-consents.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reset-consents.test.d.ts","sourceRoot":"","sources":["../../../src/__tests__/core/reset-consents.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/core/state-manager.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=state-manager.test.d.ts.map

package/dist/__tests__/core/state-manager.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state-manager.test.d.ts","sourceRoot":"","sources":["../../../src/__tests__/core/state-manager.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/panels/dom-scanner.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dom-scanner.test.d.ts.map

package/dist/__tests__/panels/dom-scanner.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-scanner.test.d.ts","sourceRoot":"","sources":["../../../src/__tests__/panels/dom-scanner.test.ts"],"names":[],"mappings":""}

package/dist/components/dropdown-menu.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Dropdown Menu Component
+ * Shows a menu when clicking the floating button with options for DevTools and Preferences
+ */
+declare const DEVTOOLS_ICON = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 446 445\" aria-label=\"c15t\">\n  <path fill=\"currentColor\" d=\"M223.178.313c39.064 0 70.732 31.668 70.732 70.732-.001 39.064-31.668 70.731-70.732 70.731-12.181 0-23.642-3.079-33.649-8.502l-55.689 55.689a70.267 70.267 0 0 1 5.574 13.441h167.531c8.695-29.217 35.762-50.523 67.804-50.523 39.064 0 70.731 31.668 70.731 70.732s-31.668 70.732-70.731 70.732c-32.042 0-59.108-21.306-67.803-50.523H139.413a70.417 70.417 0 0 1-7.888 17.396l54.046 54.046c10.893-6.851 23.786-10.815 37.605-10.815 39.064 0 70.732 31.669 70.732 70.733 0 39.064-31.668 70.731-70.732 70.731s-70.732-31.667-70.732-70.731c0-10.518 2.296-20.499 6.414-29.471l-57.78-57.78c-8.972 4.117-18.952 6.414-29.47 6.414-39.063 0-70.731-31.668-70.732-70.732 0-39.064 31.669-70.732 70.733-70.732 12.18 0 23.642 3.079 33.649 8.502l55.688-55.688c-5.423-10.007-8.502-21.469-8.502-33.65 0-39.064 31.668-70.733 70.732-70.733Zm0 343.555c-16.742 0-30.314 13.572-30.314 30.314 0 16.741 13.572 30.313 30.314 30.313s30.314-13.572 30.314-30.313c0-16.742-13.572-30.314-30.314-30.314ZM71.611 192.299c-16.742 0-30.315 13.572-30.315 30.314s13.573 30.314 30.315 30.314c16.741 0 30.313-13.572 30.313-30.314 0-16.741-13.572-30.314-30.313-30.314Zm303.138 0c-16.729 0-30.294 13.551-30.315 30.275l.001.039-.001.038c.021 16.725 13.586 30.276 30.315 30.276 16.741 0 30.313-13.572 30.313-30.314 0-16.741-13.572-30.314-30.313-30.314ZM223.178 40.73c-16.742 0-30.314 13.573-30.314 30.315s13.573 30.313 30.314 30.313c16.742 0 30.313-13.572 30.314-30.313 0-16.742-13.572-30.314-30.314-30.315Z\"/>\n</svg>";
+declare const PREFERENCES_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\">\n  <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\"/>\n  <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n</svg>";
+declare const EYE_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\">\n  <path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\"/>\n  <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n</svg>";
+export type CornerPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+export interface MenuItem {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: string;
+    /** Type of menu item - 'action' triggers onClick, 'toggle' shows a switch */
+    type?: 'action' | 'toggle';
+    /** For toggle items: whether the toggle is checked */
+    checked?: boolean;
+    onClick: () => void;
+}
+export interface DropdownMenuOptions {
+    items: MenuItem[];
+    position: CornerPosition;
+    /** Reference element to position the menu relative to */
+    referenceElement?: HTMLElement;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+export interface DropdownMenuInstance {
+    element: HTMLElement;
+    isOpen: () => boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    updatePosition: (position: CornerPosition) => void;
+    setReferenceElement: (element: HTMLElement) => void;
+    /** Update a menu item's checked state */
+    updateItemChecked: (itemId: string, checked: boolean) => void;
+    destroy: () => void;
+}
+/**
+ * Creates a dropdown menu
+ */
+export declare function createDropdownMenu(options: DropdownMenuOptions): DropdownMenuInstance;
+export { detectPreferenceTrigger as detectPreferenceCenterTrigger, getPreferenceCenterOpener, } from '../utils/preference-trigger';
+export { DEVTOOLS_ICON, PREFERENCES_ICON, EYE_ICON };
+//# sourceMappingURL=dropdown-menu.d.ts.map

package/dist/components/dropdown-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../src/components/dropdown-menu.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,QAAA,MAAM,aAAa,ujDAEZ,CAAC;AAER,QAAA,MAAM,gBAAgB,yyBAGf,CAAC;AAER,QAAA,MAAM,QAAQ,gSAGP,CAAC;AAER,MAAM,MAAM,cAAc,GACvB,cAAc,GACd,aAAa,GACb,WAAW,GACX,UAAU,CAAC;AAEd,MAAM,WAAW,QAAQ;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IACnC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,QAAQ,EAAE,cAAc,CAAC;IACzB,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACpC,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,OAAO,CAAC;IACtB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,cAAc,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,mBAAmB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACpD,yCAAyC;IACzC,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB;AAkBD;;GAEG;AACH,wBAAgB,kBAAkB,CACjC,OAAO,EAAE,mBAAmB,GAC1B,oBAAoB,CAyOtB;AAGD,OAAO,EACN,uBAAuB,IAAI,6BAA6B,EACxD,yBAAyB,GACzB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Component exports
+ */
+export * from './panel';
+export * from './tabs';
+export * from './ui';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,MAAM,CAAC"}

package/dist/components/panel.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Panel Component
+ * Main DevTools panel with header, content area, and footer
+ * Supports unified mode with dropdown menu when PreferenceCenterTrigger is present
+ */
+import type { StateManager } from '../core/state-manager';
+import type { StoreConnector } from '../core/store-connector';
+export interface PanelOptions {
+    stateManager: StateManager;
+    storeConnector: StoreConnector;
+    onRenderContent: (container: HTMLElement) => void;
+    /**
+     * Enable unified mode with dropdown menu when PreferenceCenterTrigger is detected
+     * @default true
+     */
+    enableUnifiedMode?: boolean;
+}
+export interface PanelInstance {
+    element: HTMLElement;
+    floatingButton: HTMLElement;
+    update: () => void;
+    destroy: () => void;
+}
+/**
+ * Creates the main panel component
+ */
+export declare function createPanel(options: PanelOptions): PanelInstance;
+//# sourceMappingURL=panel.d.ts.map

package/dist/components/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/components/panel.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAWH,OAAO,KAAK,EAAoB,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC5E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAgD9D,MAAM,WAAW,YAAY;IAC5B,YAAY,EAAE,YAAY,CAAC;IAC3B,cAAc,EAAE,cAAc,CAAC;IAC/B,eAAe,EAAE,CAAC,SAAS,EAAE,WAAW,KAAK,IAAI,CAAC;IAClD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,aAAa;IAC7B,OAAO,EAAE,WAAW,CAAC;IACrB,cAAc,EAAE,WAAW,CAAC;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,YAAY,GAAG,aAAa,CAsahE"}

package/dist/components/tabs.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Tabs Component
+ * Tab navigation with accessible keyboard support
+ */
+import type { DevToolsTab } from '../core/state-manager';
+export interface TabsOptions {
+    activeTab: DevToolsTab;
+    onTabChange: (tab: DevToolsTab) => void;
+    /** Tabs that should be disabled/greyed out */
+    disabledTabs?: DevToolsTab[];
+}
+export interface TabsInstance {
+    element: HTMLElement;
+    setActiveTab: (tab: DevToolsTab) => void;
+    destroy: () => void;
+}
+/**
+ * Creates a tabs component
+ */
+export declare function createTabs(options: TabsOptions): TabsInstance;
+//# sourceMappingURL=tabs.d.ts.map

package/dist/components/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAkDzD,MAAM,WAAW,WAAW;IAC3B,SAAS,EAAE,WAAW,CAAC;IACvB,WAAW,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,8CAA8C;IAC9C,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,YAAY;IAC5B,OAAO,EAAE,WAAW,CAAC;IACrB,YAAY,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,WAAW,GAAG,YAAY,CA+G7D"}

package/dist/components/ui.d.ts

@@ -0,0 +1,65 @@
+/**
+ * UI Component Utilities
+ * Common reusable components
+ */
+export interface ToggleOptions {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    ariaLabel?: string;
+    disabled?: boolean;
+}
+export declare function createToggle(options: ToggleOptions): HTMLButtonElement;
+export type BadgeVariant = 'success' | 'error' | 'warning' | 'info' | 'neutral';
+export interface BadgeOptions {
+    text: string;
+    variant?: BadgeVariant;
+}
+export declare function createBadge(options: BadgeOptions): HTMLSpanElement;
+export type ButtonVariant = 'default' | 'primary' | 'danger';
+export interface ButtonOptions {
+    text: string;
+    variant?: ButtonVariant;
+    small?: boolean;
+    icon?: string;
+    disabled?: boolean;
+    onClick: () => void;
+}
+export declare function createButton(options: ButtonOptions): HTMLButtonElement;
+export interface ListItemOptions {
+    title: string;
+    description?: string;
+    actions?: HTMLElement[];
+}
+export declare function createListItem(options: ListItemOptions): HTMLElement;
+export interface SectionOptions {
+    title: string;
+    actions?: HTMLElement[];
+    children: HTMLElement[];
+}
+export declare function createSection(options: SectionOptions): HTMLElement;
+export interface InfoRowOptions {
+    label: string;
+    value: string;
+}
+export declare function createInfoRow(options: InfoRowOptions): HTMLElement;
+export interface EmptyStateOptions {
+    icon?: string;
+    text: string;
+}
+export declare function createEmptyState(options: EmptyStateOptions): HTMLElement;
+export interface GridOptions {
+    columns?: 2 | 3;
+    children: HTMLElement[];
+}
+export declare function createGrid(options: GridOptions): HTMLElement;
+export interface GridCardOptions {
+    title: string;
+    action?: HTMLElement;
+}
+export declare function createGridCard(options: GridCardOptions): HTMLElement;
+/**
+ * Creates a "Store not connected" message element
+ * Used when the c15t store is not available
+ */
+export declare function createDisconnectedState(message?: string): HTMLElement;
+//# sourceMappingURL=ui.d.ts.map

package/dist/components/ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/components/ui.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,MAAM,WAAW,aAAa;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,aAAa,GAAG,iBAAiB,CAoBtE;AAID,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhF,MAAM,WAAW,YAAY;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,YAAY,CAAC;CACvB;AAED,wBAAgB,WAAW,CAAC,OAAO,EAAE,YAAY,GAAG,eAAe,CAelE;AAID,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE7D,MAAM,WAAW,aAAa;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,aAAa,GAAG,iBAAiB,CAiCtE;AAID,MAAM,WAAW,eAAe;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,eAAe,GAAG,WAAW,CAsBpE;AAID,MAAM,WAAW,cAAc;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,QAAQ,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,cAAc,GAAG,WAAW,CAelE;AAID,MAAM,WAAW,cAAc;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,cAAc,GAAG,WAAW,CAUlE;AAID,MAAM,WAAW,iBAAiB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACb;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,iBAAiB,GAAG,WAAW,CAiBxE;AAID,MAAM,WAAW,WAAW;IAC3B,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChB,QAAQ,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,wBAAgB,UAAU,CAAC,OAAO,EAAE,WAAW,GAAG,WAAW,CAS5D;AAID,MAAM,WAAW,eAAe;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,WAAW,CAAC;CACrB;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,eAAe,GAAG,WAAW,CAepE;AAID;;;GAGG;AACH,wBAAgB,uBAAuB,CACtC,OAAO,SAAwB,GAC7B,WAAW,CAUb"}

package/dist/core/devtools.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Main DevTools Class
+ * Orchestrates all components and state
+ */
+import { type DevToolsPosition, type DevToolsTab } from './state-manager';
+import '../styles/tokens.css';
+/**
+ * DevTools configuration options
+ */
+export interface DevToolsOptions {
+    /**
+     * Namespace for the c15tStore on window
+     * @default 'c15tStore'
+     */
+    namespace?: string;
+    /**
+     * Initial position of the floating button
+     * @default 'bottom-right'
+     */
+    position?: DevToolsPosition;
+    /**
+     * Whether to start in open state
+     * @default false
+     */
+    defaultOpen?: boolean;
+}
+/**
+ * DevTools instance interface
+ */
+export interface DevToolsInstance {
+    /** Opens the DevTools panel */
+    open: () => void;
+    /** Closes the DevTools panel */
+    close: () => void;
+    /** Toggles the DevTools panel */
+    toggle: () => void;
+    /** Gets the current state */
+    getState: () => {
+        isOpen: boolean;
+        activeTab: DevToolsTab;
+        isConnected: boolean;
+    };
+    /** Destroys the DevTools instance */
+    destroy: () => void;
+}
+/**
+ * Creates a DevTools instance
+ */
+export declare function createDevTools(options?: DevToolsOptions): DevToolsInstance;
+/**
+ * Creates a DevTools panel for embedding (used by TanStack plugin)
+ */
+export declare function createDevToolsPanel(options: {
+    namespace?: string;
+    mode?: 'standalone' | 'embedded';
+}): {
+    element: HTMLElement;
+    destroy: () => void;
+};
+//# sourceMappingURL=devtools.d.ts.map

package/dist/core/devtools.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.d.ts","sourceRoot":"","sources":["../../src/core/devtools.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAaH,OAAO,EAEN,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAEhB,MAAM,iBAAiB,CAAC;AAIzB,OAAO,sBAAsB,CAAC;AAE9B;;GAEG;AACH,MAAM,WAAW,eAAe;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAE5B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAChC,+BAA+B;IAC/B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,gCAAgC;IAChC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,iCAAiC;IACjC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,6BAA6B;IAC7B,QAAQ,EAAE,MAAM;QACf,MAAM,EAAE,OAAO,CAAC;QAChB,SAAS,EAAE,WAAW,CAAC;QACvB,WAAW,EAAE,OAAO,CAAC;KACrB,CAAC;IACF,qCAAqC;IACrC,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC7B,OAAO,GAAE,eAAoB,GAC3B,gBAAgB,CA4alB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACjC,GAAG;IACH,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB,CA4LA"}

package/dist/core/draggable.d.ts

@@ -0,0 +1,81 @@
+/**
+ * Draggable functionality for DevTools button
+ * Inlined utilities to avoid dependency issues
+ */
+/**
+ * Corner position options for the draggable button
+ */
+export type CornerPosition = 'bottom-right' | 'top-right' | 'bottom-left' | 'top-left';
+/**
+ * State representing an ongoing drag operation
+ */
+export interface DragState {
+    isDragging: boolean;
+    startX: number;
+    startY: number;
+    currentX: number;
+    currentY: number;
+}
+export interface DraggableOptions {
+    /**
+     * Default corner position
+     * @default 'bottom-right'
+     */
+    defaultPosition?: CornerPosition;
+    /**
+     * Whether to persist position to localStorage
+     * @default true
+     */
+    persistPosition?: boolean;
+    /**
+     * Callback when position changes
+     */
+    onPositionChange?: (position: CornerPosition) => void;
+    /**
+     * Callback when drag starts
+     */
+    onDragStart?: () => void;
+    /**
+     * Callback when drag ends
+     */
+    onDragEnd?: (wasDragged: boolean) => void;
+}
+export interface DraggableInstance {
+    /**
+     * Get the current corner position
+     */
+    getCorner: () => CornerPosition;
+    /**
+     * Set the corner position
+     */
+    setCorner: (corner: CornerPosition) => void;
+    /**
+     * Check if currently dragging
+     */
+    isDragging: () => boolean;
+    /**
+     * Check if the last interaction was a drag
+     */
+    wasDragged: () => boolean;
+    /**
+     * Attach drag handlers to an element
+     */
+    attach: (element: HTMLElement) => void;
+    /**
+     * Detach drag handlers from an element
+     */
+    detach: () => void;
+    /**
+     * Apply position styles to an element
+     */
+    applyPositionStyles: (element: HTMLElement) => void;
+    /**
+     * Destroy the instance
+     */
+    destroy: () => void;
+}
+/**
+ * Creates a draggable instance for an element
+ */
+export declare function createDraggable(options?: DraggableOptions): DraggableInstance;
+//# sourceMappingURL=draggable.d.ts.map

package/dist/core/draggable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"draggable.d.ts","sourceRoot":"","sources":["../../src/core/draggable.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH;;GAEG;AACH,MAAM,MAAM,cAAc,GACvB,cAAc,GACd,WAAW,GACX,aAAa,GACb,UAAU,CAAC;AAEd;;GAEG;AACH,MAAM,WAAW,SAAS;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CACjB;AA6JD,MAAM,WAAW,gBAAgB;IAChC;;;OAGG;IACH,eAAe,CAAC,EAAE,cAAc,CAAC;IAEjC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;IAEtD;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED,MAAM,WAAW,iBAAiB;IACjC;;OAEG;IACH,SAAS,EAAE,MAAM,cAAc,CAAC;IAEhC;;OAEG;IACH,SAAS,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAE5C;;OAEG;IACH,UAAU,EAAE,MAAM,OAAO,CAAC;IAE1B;;OAEG;IACH,UAAU,EAAE,MAAM,OAAO,CAAC;IAE1B;;OAEG;IACH,MAAM,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IAEnB;;OAEG;IACH,mBAAmB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAEpD;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC9B,OAAO,GAAE,gBAAqB,GAC5B,iBAAiB,CAgOnB"}