@c15t/dev-tools 1.8.3 → 2.0.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -0
- package/README.md +155 -71
- package/dist/__tests__/components/ui.test.d.ts +2 -0
- package/dist/__tests__/components/ui.test.d.ts.map +1 -0
- package/dist/__tests__/core/renderer.test.d.ts +2 -0
- package/dist/__tests__/core/renderer.test.d.ts.map +1 -0
- package/dist/__tests__/core/reset-consents.test.d.ts +2 -0
- package/dist/__tests__/core/reset-consents.test.d.ts.map +1 -0
- package/dist/__tests__/core/state-manager.test.d.ts +2 -0
- package/dist/__tests__/core/state-manager.test.d.ts.map +1 -0
- package/dist/__tests__/panels/dom-scanner.test.d.ts +2 -0
- package/dist/__tests__/panels/dom-scanner.test.d.ts.map +1 -0
- package/dist/components/dropdown-menu.d.ts +46 -0
- package/dist/components/dropdown-menu.d.ts.map +1 -0
- package/dist/components/index.d.ts +7 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/components/panel.d.ts +28 -0
- package/dist/components/panel.d.ts.map +1 -0
- package/dist/components/tabs.d.ts +21 -0
- package/dist/components/tabs.d.ts.map +1 -0
- package/dist/components/ui.d.ts +65 -0
- package/dist/components/ui.d.ts.map +1 -0
- package/dist/core/devtools.d.ts +60 -0
- package/dist/core/devtools.d.ts.map +1 -0
- package/dist/core/draggable.d.ts +81 -0
- package/dist/core/draggable.d.ts.map +1 -0
- package/dist/core/index.d.ts +10 -0
- package/dist/core/index.d.ts.map +1 -0
- package/dist/core/panel-renderer.d.ts +41 -0
- package/dist/core/panel-renderer.d.ts.map +1 -0
- package/dist/core/renderer.d.ts +126 -0
- package/dist/core/renderer.d.ts.map +1 -0
- package/dist/core/reset-consents.d.ts +24 -0
- package/dist/core/reset-consents.d.ts.map +1 -0
- package/dist/core/state-manager.d.ts +73 -0
- package/dist/core/state-manager.d.ts.map +1 -0
- package/dist/core/store-connector.d.ts +69 -0
- package/dist/core/store-connector.d.ts.map +1 -0
- package/dist/index.cjs +4813 -10
- package/dist/index.d.ts +10 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4803 -2
- package/dist/panels/actions.d.ts +18 -0
- package/dist/panels/actions.d.ts.map +1 -0
- package/dist/panels/consents.d.ts +18 -0
- package/dist/panels/consents.d.ts.map +1 -0
- package/dist/panels/dom-scanner.d.ts +29 -0
- package/dist/panels/dom-scanner.d.ts.map +1 -0
- package/dist/panels/events.d.ts +14 -0
- package/dist/panels/events.d.ts.map +1 -0
- package/dist/panels/iab.d.ts +14 -0
- package/dist/panels/iab.d.ts.map +1 -0
- package/dist/panels/index.d.ts +11 -0
- package/dist/panels/index.d.ts.map +1 -0
- package/dist/panels/location.d.ts +19 -0
- package/dist/panels/location.d.ts.map +1 -0
- package/dist/panels/scripts.d.ts +13 -0
- package/dist/panels/scripts.d.ts.map +1 -0
- package/dist/react.cjs +4696 -0
- package/dist/react.d.ts +76 -0
- package/dist/react.d.ts.map +1 -0
- package/dist/react.js +4672 -0
- package/dist/styles/index.d.ts +7 -0
- package/dist/styles/index.d.ts.map +1 -0
- package/dist/tanstack.cjs +3819 -0
- package/dist/tanstack.d.ts +46 -0
- package/dist/tanstack.d.ts.map +1 -0
- package/dist/tanstack.js +3795 -0
- package/dist/utils/index.d.ts +6 -0
- package/dist/utils/index.d.ts.map +1 -0
- package/dist/utils/preference-trigger.d.ts +27 -0
- package/dist/utils/preference-trigger.d.ts.map +1 -0
- package/package.json +74 -57
- package/tsconfig.json +1 -1
- package/LICENSE.md +0 -595
- package/dist/components/error-state.cjs +0 -98
- package/dist/components/error-state.css +0 -51
- package/dist/components/error-state.d.ts +0 -5
- package/dist/components/error-state.d.ts.map +0 -1
- package/dist/components/error-state.js +0 -64
- package/dist/components/header.cjs +0 -65
- package/dist/components/header.css +0 -29
- package/dist/components/header.d.ts +0 -7
- package/dist/components/header.d.ts.map +0 -1
- package/dist/components/header.js +0 -31
- package/dist/components/ui/accordion.cjs +0 -82
- package/dist/components/ui/accordion.css +0 -72
- package/dist/components/ui/accordion.d.ts +0 -8
- package/dist/components/ui/accordion.d.ts.map +0 -1
- package/dist/components/ui/accordion.js +0 -39
- package/dist/components/ui/alert.cjs +0 -77
- package/dist/components/ui/alert.css +0 -59
- package/dist/components/ui/alert.d.ts +0 -10
- package/dist/components/ui/alert.d.ts.map +0 -1
- package/dist/components/ui/alert.js +0 -37
- package/dist/components/ui/badge.cjs +0 -63
- package/dist/components/ui/badge.css +0 -52
- package/dist/components/ui/badge.d.ts +0 -11
- package/dist/components/ui/badge.d.ts.map +0 -1
- package/dist/components/ui/badge.js +0 -26
- package/dist/components/ui/button.cjs +0 -77
- package/dist/components/ui/button.css +0 -87
- package/dist/components/ui/button.d.ts +0 -13
- package/dist/components/ui/button.d.ts.map +0 -1
- package/dist/components/ui/button.js +0 -40
- package/dist/components/ui/card.cjs +0 -89
- package/dist/components/ui/card.css +0 -41
- package/dist/components/ui/card.d.ts +0 -10
- package/dist/components/ui/card.d.ts.map +0 -1
- package/dist/components/ui/card.js +0 -40
- package/dist/components/ui/error-state.css +0 -34
- package/dist/components/ui/expandable-tabs.cjs +0 -136
- package/dist/components/ui/expandable-tabs.css +0 -57
- package/dist/components/ui/expandable-tabs.d.ts +0 -23
- package/dist/components/ui/expandable-tabs.d.ts.map +0 -1
- package/dist/components/ui/expandable-tabs.js +0 -102
- package/dist/components/ui/logo.cjs +0 -101
- package/dist/components/ui/logo.d.ts +0 -8
- package/dist/components/ui/logo.d.ts.map +0 -1
- package/dist/components/ui/logo.js +0 -67
- package/dist/components/ui/scroll-area.cjs +0 -67
- package/dist/components/ui/scroll-area.css +0 -41
- package/dist/components/ui/scroll-area.d.ts +0 -6
- package/dist/components/ui/scroll-area.d.ts.map +0 -1
- package/dist/components/ui/scroll-area.js +0 -30
- package/dist/components/ui/switch.cjs +0 -49
- package/dist/components/ui/switch.css +0 -49
- package/dist/components/ui/switch.d.ts +0 -5
- package/dist/components/ui/switch.d.ts.map +0 -1
- package/dist/components/ui/switch.js +0 -15
- package/dist/components/ui/tooltip.cjs +0 -61
- package/dist/components/ui/tooltip.css +0 -101
- package/dist/components/ui/tooltip.d.ts +0 -8
- package/dist/components/ui/tooltip.d.ts.map +0 -1
- package/dist/components/ui/tooltip.js +0 -18
- package/dist/components/wrapper.cjs +0 -158
- package/dist/components/wrapper.css +0 -90
- package/dist/components/wrapper.d.ts +0 -20
- package/dist/components/wrapper.d.ts.map +0 -1
- package/dist/components/wrapper.js +0 -121
- package/dist/dev-tool.cjs +0 -124
- package/dist/dev-tool.d.ts +0 -15
- package/dist/dev-tool.d.ts.map +0 -1
- package/dist/dev-tool.js +0 -74
- package/dist/libs/utils.cjs +0 -50
- package/dist/libs/utils.d.ts +0 -3
- package/dist/libs/utils.d.ts.map +0 -1
- package/dist/libs/utils.js +0 -6
- package/dist/router/router.cjs +0 -158
- package/dist/router/router.d.ts +0 -6
- package/dist/router/router.d.ts.map +0 -1
- package/dist/router/router.js +0 -124
- package/dist/styles/theme.css +0 -42
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @c15t/dev-tools
|
|
2
2
|
|
|
3
|
+
## 2.0.0-rc.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 0bc4f86: fixed workspace resolving
|
|
8
|
+
- Updated dependencies [0bc4f86]
|
|
9
|
+
- c15t@2.0.0-rc.1
|
|
10
|
+
- @c15t/ui@2.0.0-rc.1
|
|
11
|
+
|
|
12
|
+
## 2.0.0-rc.0
|
|
13
|
+
|
|
14
|
+
### Major Changes
|
|
15
|
+
|
|
16
|
+
- 126a78b: https://v2.c15t.com/changelog/2026-02-12-v2.0.0-rc.0
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- Updated dependencies [126a78b]
|
|
21
|
+
- c15t@2.0.0-rc.0
|
|
22
|
+
- @c15t/ui@2.0.0-rc.0
|
|
23
|
+
|
|
3
24
|
## 1.8.3
|
|
4
25
|
|
|
5
26
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -1,92 +1,176 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
[](https://github.com/c15t/c15t)
|
|
18
|
-
[](https://github.com/c15t/c15t/commits/main)
|
|
19
|
-
[](https://github.com/c15t/c15t/issues)
|
|
20
|
-
|
|
21
|
-
A collection of developer tools and utilities for the c15t ecosystem, currently under active development.
|
|
22
|
-
|
|
23
|
-
## Key Features
|
|
24
|
-
|
|
25
|
-
- 🚧 Experimental developer utilities
|
|
26
|
-
- React component library with utility tools
|
|
27
|
-
- Radix UI and Tailwind CSS integration
|
|
28
|
-
- State management and UI component helpers
|
|
29
|
-
- Ongoing development and refinement
|
|
30
|
-
|
|
31
|
-
## Prerequisites
|
|
32
|
-
|
|
33
|
-
- Node.js 18.17.0 or later
|
|
34
|
-
- React 16.8.0 or later
|
|
35
|
-
- Familiarity with experimental tooling
|
|
36
|
-
|
|
37
|
-
## Manual Installation
|
|
1
|
+
# @c15t/dev-tools
|
|
2
|
+
|
|
3
|
+
Developer tools for debugging and inspecting c15t consent management state.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Consents Panel**: View and toggle consent states in real-time
|
|
8
|
+
- **Location Panel**: Inspect detected location and set overrides
|
|
9
|
+
- **Scripts Panel**: Monitor script loading status
|
|
10
|
+
- **Actions Panel**: Quick actions for testing consent flows
|
|
11
|
+
- **Framework Agnostic**: Pure JavaScript core with React wrapper
|
|
12
|
+
- **TanStack DevTools Integration**: Use as a plugin in TanStack DevTools
|
|
13
|
+
- **CSS Animations**: Smooth, accessible animations with reduced motion support
|
|
14
|
+
- **Dark Mode**: Automatic dark mode support
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
38
17
|
|
|
39
18
|
```bash
|
|
40
|
-
|
|
19
|
+
bun add @c15t/dev-tools
|
|
41
20
|
```
|
|
42
21
|
|
|
43
|
-
⚠️ **Note:** This package is experimental and may undergo significant changes.
|
|
44
|
-
|
|
45
22
|
## Usage
|
|
46
23
|
|
|
47
|
-
|
|
48
|
-
2. Import and use components carefully
|
|
49
|
-
3. Expect potential breaking changes
|
|
50
|
-
4. Feedback and contributions welcome!
|
|
24
|
+
### React
|
|
51
25
|
|
|
52
|
-
|
|
26
|
+
The easiest way to add DevTools to a React application:
|
|
53
27
|
|
|
54
|
-
|
|
28
|
+
```tsx
|
|
29
|
+
import { C15TDevTools } from '@c15t/dev-tools/react';
|
|
55
30
|
|
|
56
|
-
|
|
31
|
+
function App() {
|
|
32
|
+
return (
|
|
33
|
+
<>
|
|
34
|
+
<YourApp />
|
|
35
|
+
<C15TDevTools position="bottom-right" />
|
|
36
|
+
</>
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
```
|
|
57
40
|
|
|
58
|
-
|
|
59
|
-
- Open an issue on our [GitHub repository](https://github.com/c15t/c15t/issues)
|
|
60
|
-
- Visit [consent.io](https://consent.io) and use the chat widget
|
|
61
|
-
- Contact our support team via email [support@consent.io](mailto:support@consent.io)
|
|
41
|
+
#### Props
|
|
62
42
|
|
|
63
|
-
|
|
43
|
+
| Prop | Type | Default | Description |
|
|
44
|
+
|------|------|---------|-------------|
|
|
45
|
+
| `namespace` | `string` | `'c15tStore'` | Window namespace for the store |
|
|
46
|
+
| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Position of the floating button |
|
|
47
|
+
| `defaultOpen` | `boolean` | `false` | Whether to start with panel open |
|
|
48
|
+
| `disabled` | `boolean` | `false` | Disable DevTools (e.g., in production) |
|
|
64
49
|
|
|
65
|
-
|
|
66
|
-
- Read our [Contribution Guidelines](https://c15t.com/docs/oss/contributing)
|
|
67
|
-
- Review our [Code of Conduct](https://c15t.com/docs/oss/code-of-conduct)
|
|
68
|
-
- Fork the repository
|
|
69
|
-
- Create a new branch for your feature
|
|
70
|
-
- Submit a pull request
|
|
71
|
-
- **All contributions, big or small, are welcome and appreciated!**
|
|
50
|
+
#### Production Usage
|
|
72
51
|
|
|
73
|
-
|
|
52
|
+
```tsx
|
|
53
|
+
<C15TDevTools disabled={process.env.NODE_ENV === 'production'} />
|
|
54
|
+
```
|
|
74
55
|
|
|
75
|
-
|
|
56
|
+
### Vanilla JavaScript
|
|
76
57
|
|
|
77
|
-
|
|
58
|
+
For non-React applications or more control:
|
|
78
59
|
|
|
79
|
-
|
|
60
|
+
```typescript
|
|
61
|
+
import { createDevTools } from '@c15t/dev-tools';
|
|
80
62
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
-
|
|
84
|
-
|
|
63
|
+
const devtools = createDevTools({
|
|
64
|
+
namespace: 'c15tStore',
|
|
65
|
+
position: 'bottom-right',
|
|
66
|
+
});
|
|
85
67
|
|
|
86
|
-
|
|
68
|
+
// Control programmatically
|
|
69
|
+
devtools.open();
|
|
70
|
+
devtools.close();
|
|
71
|
+
devtools.toggle();
|
|
72
|
+
|
|
73
|
+
// Cleanup
|
|
74
|
+
devtools.destroy();
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### TanStack DevTools Plugin
|
|
78
|
+
|
|
79
|
+
Integrate with TanStack DevTools:
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
import { TanStackDevtools } from '@tanstack/react-devtools';
|
|
83
|
+
import { c15tDevtoolsPlugin } from '@c15t/dev-tools/tanstack';
|
|
84
|
+
|
|
85
|
+
function App() {
|
|
86
|
+
return (
|
|
87
|
+
<>
|
|
88
|
+
<YourApp />
|
|
89
|
+
<TanStackDevtools plugins={[c15tDevtoolsPlugin()]} />
|
|
90
|
+
</>
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
## Console API
|
|
96
|
+
|
|
97
|
+
The DevTools expose a global API for quick debugging:
|
|
98
|
+
|
|
99
|
+
```javascript
|
|
100
|
+
// Open/close the panel
|
|
101
|
+
window.__c15tDevTools.open();
|
|
102
|
+
window.__c15tDevTools.close();
|
|
103
|
+
window.__c15tDevTools.toggle();
|
|
104
|
+
|
|
105
|
+
// Check state
|
|
106
|
+
window.__c15tDevTools.getState();
|
|
107
|
+
// { isOpen: false, activeTab: 'consents', isConnected: true }
|
|
108
|
+
```
|
|
87
109
|
|
|
88
|
-
|
|
110
|
+
## Panels
|
|
89
111
|
|
|
90
|
-
|
|
112
|
+
### Consents
|
|
113
|
+
|
|
114
|
+
- View all consent types with enabled/disabled badges
|
|
115
|
+
- Toggle individual consents with immediate feedback
|
|
116
|
+
- Quick actions: Accept All, Reject All
|
|
117
|
+
- Shows consent model (opt-in, opt-out, iab)
|
|
118
|
+
|
|
119
|
+
### Location
|
|
120
|
+
|
|
121
|
+
- Detected country, region, and jurisdiction
|
|
122
|
+
- Set country, region, and language overrides
|
|
123
|
+
- View active consent model with description
|
|
124
|
+
- Clear all overrides
|
|
125
|
+
|
|
126
|
+
### Scripts
|
|
127
|
+
|
|
128
|
+
- List configured scripts with consent requirements
|
|
129
|
+
- Status badges: Loaded, Pending, Blocked
|
|
130
|
+
- Network blocker status
|
|
131
|
+
- Summary of loaded vs pending scripts
|
|
132
|
+
|
|
133
|
+
### Actions
|
|
134
|
+
|
|
135
|
+
- Show consent banner
|
|
136
|
+
- Open preference center
|
|
137
|
+
- Re-fetch banner data
|
|
138
|
+
- Reset all consents
|
|
139
|
+
- Copy state to clipboard for debugging
|
|
140
|
+
|
|
141
|
+
## Styling
|
|
142
|
+
|
|
143
|
+
The DevTools use CSS variables for theming. Variables are prefixed with `--c15t-devtools-`:
|
|
144
|
+
|
|
145
|
+
```css
|
|
146
|
+
/* Override colors */
|
|
147
|
+
:root {
|
|
148
|
+
--c15t-devtools-primary: hsl(220, 90%, 50%);
|
|
149
|
+
--c15t-devtools-surface: hsl(0, 0%, 100%);
|
|
150
|
+
}
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
### Dark Mode
|
|
154
|
+
|
|
155
|
+
Dark mode is automatically applied when:
|
|
156
|
+
- The document has a `.dark` or `.c15t-dark` class
|
|
157
|
+
- System preference is dark (`prefers-color-scheme: dark`)
|
|
158
|
+
|
|
159
|
+
You can also force dark mode:
|
|
160
|
+
|
|
161
|
+
```css
|
|
162
|
+
.my-devtools-container {
|
|
163
|
+
@extend .c15t-devtools-dark;
|
|
164
|
+
}
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
## Browser Support
|
|
168
|
+
|
|
169
|
+
- Chrome 90+
|
|
170
|
+
- Firefox 90+
|
|
171
|
+
- Safari 15+
|
|
172
|
+
- Edge 90+
|
|
173
|
+
|
|
174
|
+
## License
|
|
91
175
|
|
|
92
|
-
|
|
176
|
+
GPL-3.0-only
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ui.test.d.ts","sourceRoot":"","sources":["../../../src/__tests__/components/ui.test.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"renderer.test.d.ts","sourceRoot":"","sources":["../../../src/__tests__/core/renderer.test.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"reset-consents.test.d.ts","sourceRoot":"","sources":["../../../src/__tests__/core/reset-consents.test.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"state-manager.test.d.ts","sourceRoot":"","sources":["../../../src/__tests__/core/state-manager.test.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dom-scanner.test.d.ts","sourceRoot":"","sources":["../../../src/__tests__/panels/dom-scanner.test.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Dropdown Menu Component
|
|
3
|
+
* Shows a menu when clicking the floating button with options for DevTools and Preferences
|
|
4
|
+
*/
|
|
5
|
+
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>";
|
|
6
|
+
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>";
|
|
7
|
+
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>";
|
|
8
|
+
export type CornerPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
|
|
9
|
+
export interface MenuItem {
|
|
10
|
+
id: string;
|
|
11
|
+
label: string;
|
|
12
|
+
description?: string;
|
|
13
|
+
icon?: string;
|
|
14
|
+
/** Type of menu item - 'action' triggers onClick, 'toggle' shows a switch */
|
|
15
|
+
type?: 'action' | 'toggle';
|
|
16
|
+
/** For toggle items: whether the toggle is checked */
|
|
17
|
+
checked?: boolean;
|
|
18
|
+
onClick: () => void;
|
|
19
|
+
}
|
|
20
|
+
export interface DropdownMenuOptions {
|
|
21
|
+
items: MenuItem[];
|
|
22
|
+
position: CornerPosition;
|
|
23
|
+
/** Reference element to position the menu relative to */
|
|
24
|
+
referenceElement?: HTMLElement;
|
|
25
|
+
onOpen?: () => void;
|
|
26
|
+
onClose?: () => void;
|
|
27
|
+
}
|
|
28
|
+
export interface DropdownMenuInstance {
|
|
29
|
+
element: HTMLElement;
|
|
30
|
+
isOpen: () => boolean;
|
|
31
|
+
open: () => void;
|
|
32
|
+
close: () => void;
|
|
33
|
+
toggle: () => void;
|
|
34
|
+
updatePosition: (position: CornerPosition) => void;
|
|
35
|
+
setReferenceElement: (element: HTMLElement) => void;
|
|
36
|
+
/** Update a menu item's checked state */
|
|
37
|
+
updateItemChecked: (itemId: string, checked: boolean) => void;
|
|
38
|
+
destroy: () => void;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Creates a dropdown menu
|
|
42
|
+
*/
|
|
43
|
+
export declare function createDropdownMenu(options: DropdownMenuOptions): DropdownMenuInstance;
|
|
44
|
+
export { detectPreferenceTrigger as detectPreferenceCenterTrigger, getPreferenceCenterOpener, } from '../utils/preference-trigger';
|
|
45
|
+
export { DEVTOOLS_ICON, PREFERENCES_ICON, EYE_ICON };
|
|
46
|
+
//# sourceMappingURL=dropdown-menu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Panel Component
|
|
3
|
+
* Main DevTools panel with header, content area, and footer
|
|
4
|
+
* Supports unified mode with dropdown menu when PreferenceCenterTrigger is present
|
|
5
|
+
*/
|
|
6
|
+
import type { StateManager } from '../core/state-manager';
|
|
7
|
+
import type { StoreConnector } from '../core/store-connector';
|
|
8
|
+
export interface PanelOptions {
|
|
9
|
+
stateManager: StateManager;
|
|
10
|
+
storeConnector: StoreConnector;
|
|
11
|
+
onRenderContent: (container: HTMLElement) => void;
|
|
12
|
+
/**
|
|
13
|
+
* Enable unified mode with dropdown menu when PreferenceCenterTrigger is detected
|
|
14
|
+
* @default true
|
|
15
|
+
*/
|
|
16
|
+
enableUnifiedMode?: boolean;
|
|
17
|
+
}
|
|
18
|
+
export interface PanelInstance {
|
|
19
|
+
element: HTMLElement;
|
|
20
|
+
floatingButton: HTMLElement;
|
|
21
|
+
update: () => void;
|
|
22
|
+
destroy: () => void;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Creates the main panel component
|
|
26
|
+
*/
|
|
27
|
+
export declare function createPanel(options: PanelOptions): PanelInstance;
|
|
28
|
+
//# sourceMappingURL=panel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Tabs Component
|
|
3
|
+
* Tab navigation with accessible keyboard support
|
|
4
|
+
*/
|
|
5
|
+
import type { DevToolsTab } from '../core/state-manager';
|
|
6
|
+
export interface TabsOptions {
|
|
7
|
+
activeTab: DevToolsTab;
|
|
8
|
+
onTabChange: (tab: DevToolsTab) => void;
|
|
9
|
+
/** Tabs that should be disabled/greyed out */
|
|
10
|
+
disabledTabs?: DevToolsTab[];
|
|
11
|
+
}
|
|
12
|
+
export interface TabsInstance {
|
|
13
|
+
element: HTMLElement;
|
|
14
|
+
setActiveTab: (tab: DevToolsTab) => void;
|
|
15
|
+
destroy: () => void;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Creates a tabs component
|
|
19
|
+
*/
|
|
20
|
+
export declare function createTabs(options: TabsOptions): TabsInstance;
|
|
21
|
+
//# sourceMappingURL=tabs.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* UI Component Utilities
|
|
3
|
+
* Common reusable components
|
|
4
|
+
*/
|
|
5
|
+
export interface ToggleOptions {
|
|
6
|
+
checked: boolean;
|
|
7
|
+
onChange: (checked: boolean) => void;
|
|
8
|
+
ariaLabel?: string;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export declare function createToggle(options: ToggleOptions): HTMLButtonElement;
|
|
12
|
+
export type BadgeVariant = 'success' | 'error' | 'warning' | 'info' | 'neutral';
|
|
13
|
+
export interface BadgeOptions {
|
|
14
|
+
text: string;
|
|
15
|
+
variant?: BadgeVariant;
|
|
16
|
+
}
|
|
17
|
+
export declare function createBadge(options: BadgeOptions): HTMLSpanElement;
|
|
18
|
+
export type ButtonVariant = 'default' | 'primary' | 'danger';
|
|
19
|
+
export interface ButtonOptions {
|
|
20
|
+
text: string;
|
|
21
|
+
variant?: ButtonVariant;
|
|
22
|
+
small?: boolean;
|
|
23
|
+
icon?: string;
|
|
24
|
+
disabled?: boolean;
|
|
25
|
+
onClick: () => void;
|
|
26
|
+
}
|
|
27
|
+
export declare function createButton(options: ButtonOptions): HTMLButtonElement;
|
|
28
|
+
export interface ListItemOptions {
|
|
29
|
+
title: string;
|
|
30
|
+
description?: string;
|
|
31
|
+
actions?: HTMLElement[];
|
|
32
|
+
}
|
|
33
|
+
export declare function createListItem(options: ListItemOptions): HTMLElement;
|
|
34
|
+
export interface SectionOptions {
|
|
35
|
+
title: string;
|
|
36
|
+
actions?: HTMLElement[];
|
|
37
|
+
children: HTMLElement[];
|
|
38
|
+
}
|
|
39
|
+
export declare function createSection(options: SectionOptions): HTMLElement;
|
|
40
|
+
export interface InfoRowOptions {
|
|
41
|
+
label: string;
|
|
42
|
+
value: string;
|
|
43
|
+
}
|
|
44
|
+
export declare function createInfoRow(options: InfoRowOptions): HTMLElement;
|
|
45
|
+
export interface EmptyStateOptions {
|
|
46
|
+
icon?: string;
|
|
47
|
+
text: string;
|
|
48
|
+
}
|
|
49
|
+
export declare function createEmptyState(options: EmptyStateOptions): HTMLElement;
|
|
50
|
+
export interface GridOptions {
|
|
51
|
+
columns?: 2 | 3;
|
|
52
|
+
children: HTMLElement[];
|
|
53
|
+
}
|
|
54
|
+
export declare function createGrid(options: GridOptions): HTMLElement;
|
|
55
|
+
export interface GridCardOptions {
|
|
56
|
+
title: string;
|
|
57
|
+
action?: HTMLElement;
|
|
58
|
+
}
|
|
59
|
+
export declare function createGridCard(options: GridCardOptions): HTMLElement;
|
|
60
|
+
/**
|
|
61
|
+
* Creates a "Store not connected" message element
|
|
62
|
+
* Used when the c15t store is not available
|
|
63
|
+
*/
|
|
64
|
+
export declare function createDisconnectedState(message?: string): HTMLElement;
|
|
65
|
+
//# sourceMappingURL=ui.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Main DevTools Class
|
|
3
|
+
* Orchestrates all components and state
|
|
4
|
+
*/
|
|
5
|
+
import { type DevToolsPosition, type DevToolsTab } from './state-manager';
|
|
6
|
+
import '../styles/tokens.css';
|
|
7
|
+
/**
|
|
8
|
+
* DevTools configuration options
|
|
9
|
+
*/
|
|
10
|
+
export interface DevToolsOptions {
|
|
11
|
+
/**
|
|
12
|
+
* Namespace for the c15tStore on window
|
|
13
|
+
* @default 'c15tStore'
|
|
14
|
+
*/
|
|
15
|
+
namespace?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Initial position of the floating button
|
|
18
|
+
* @default 'bottom-right'
|
|
19
|
+
*/
|
|
20
|
+
position?: DevToolsPosition;
|
|
21
|
+
/**
|
|
22
|
+
* Whether to start in open state
|
|
23
|
+
* @default false
|
|
24
|
+
*/
|
|
25
|
+
defaultOpen?: boolean;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* DevTools instance interface
|
|
29
|
+
*/
|
|
30
|
+
export interface DevToolsInstance {
|
|
31
|
+
/** Opens the DevTools panel */
|
|
32
|
+
open: () => void;
|
|
33
|
+
/** Closes the DevTools panel */
|
|
34
|
+
close: () => void;
|
|
35
|
+
/** Toggles the DevTools panel */
|
|
36
|
+
toggle: () => void;
|
|
37
|
+
/** Gets the current state */
|
|
38
|
+
getState: () => {
|
|
39
|
+
isOpen: boolean;
|
|
40
|
+
activeTab: DevToolsTab;
|
|
41
|
+
isConnected: boolean;
|
|
42
|
+
};
|
|
43
|
+
/** Destroys the DevTools instance */
|
|
44
|
+
destroy: () => void;
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Creates a DevTools instance
|
|
48
|
+
*/
|
|
49
|
+
export declare function createDevTools(options?: DevToolsOptions): DevToolsInstance;
|
|
50
|
+
/**
|
|
51
|
+
* Creates a DevTools panel for embedding (used by TanStack plugin)
|
|
52
|
+
*/
|
|
53
|
+
export declare function createDevToolsPanel(options: {
|
|
54
|
+
namespace?: string;
|
|
55
|
+
mode?: 'standalone' | 'embedded';
|
|
56
|
+
}): {
|
|
57
|
+
element: HTMLElement;
|
|
58
|
+
destroy: () => void;
|
|
59
|
+
};
|
|
60
|
+
//# sourceMappingURL=devtools.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Draggable functionality for DevTools button
|
|
3
|
+
* Inlined utilities to avoid dependency issues
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Corner position options for the draggable button
|
|
7
|
+
*/
|
|
8
|
+
export type CornerPosition = 'bottom-right' | 'top-right' | 'bottom-left' | 'top-left';
|
|
9
|
+
/**
|
|
10
|
+
* State representing an ongoing drag operation
|
|
11
|
+
*/
|
|
12
|
+
export interface DragState {
|
|
13
|
+
isDragging: boolean;
|
|
14
|
+
startX: number;
|
|
15
|
+
startY: number;
|
|
16
|
+
currentX: number;
|
|
17
|
+
currentY: number;
|
|
18
|
+
}
|
|
19
|
+
export interface DraggableOptions {
|
|
20
|
+
/**
|
|
21
|
+
* Default corner position
|
|
22
|
+
* @default 'bottom-right'
|
|
23
|
+
*/
|
|
24
|
+
defaultPosition?: CornerPosition;
|
|
25
|
+
/**
|
|
26
|
+
* Whether to persist position to localStorage
|
|
27
|
+
* @default true
|
|
28
|
+
*/
|
|
29
|
+
persistPosition?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Callback when position changes
|
|
32
|
+
*/
|
|
33
|
+
onPositionChange?: (position: CornerPosition) => void;
|
|
34
|
+
/**
|
|
35
|
+
* Callback when drag starts
|
|
36
|
+
*/
|
|
37
|
+
onDragStart?: () => void;
|
|
38
|
+
/**
|
|
39
|
+
* Callback when drag ends
|
|
40
|
+
*/
|
|
41
|
+
onDragEnd?: (wasDragged: boolean) => void;
|
|
42
|
+
}
|
|
43
|
+
export interface DraggableInstance {
|
|
44
|
+
/**
|
|
45
|
+
* Get the current corner position
|
|
46
|
+
*/
|
|
47
|
+
getCorner: () => CornerPosition;
|
|
48
|
+
/**
|
|
49
|
+
* Set the corner position
|
|
50
|
+
*/
|
|
51
|
+
setCorner: (corner: CornerPosition) => void;
|
|
52
|
+
/**
|
|
53
|
+
* Check if currently dragging
|
|
54
|
+
*/
|
|
55
|
+
isDragging: () => boolean;
|
|
56
|
+
/**
|
|
57
|
+
* Check if the last interaction was a drag
|
|
58
|
+
*/
|
|
59
|
+
wasDragged: () => boolean;
|
|
60
|
+
/**
|
|
61
|
+
* Attach drag handlers to an element
|
|
62
|
+
*/
|
|
63
|
+
attach: (element: HTMLElement) => void;
|
|
64
|
+
/**
|
|
65
|
+
* Detach drag handlers from an element
|
|
66
|
+
*/
|
|
67
|
+
detach: () => void;
|
|
68
|
+
/**
|
|
69
|
+
* Apply position styles to an element
|
|
70
|
+
*/
|
|
71
|
+
applyPositionStyles: (element: HTMLElement) => void;
|
|
72
|
+
/**
|
|
73
|
+
* Destroy the instance
|
|
74
|
+
*/
|
|
75
|
+
destroy: () => void;
|
|
76
|
+
}
|
|
77
|
+
/**
|
|
78
|
+
* Creates a draggable instance for an element
|
|
79
|
+
*/
|
|
80
|
+
export declare function createDraggable(options?: DraggableOptions): DraggableInstance;
|
|
81
|
+
//# sourceMappingURL=draggable.d.ts.map
|