@ytspar/devbar 1.0.0-canary.c37df82 → 1.0.0-canary.c511f13
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/dist/GlobalDevBar.d.ts +96 -2
- package/dist/GlobalDevBar.js +1203 -114
- package/dist/accessibility.d.ts +84 -0
- package/dist/accessibility.js +155 -0
- package/dist/constants.d.ts +102 -1
- package/dist/constants.js +113 -13
- package/dist/debug.d.ts +39 -0
- package/dist/debug.js +92 -0
- package/dist/index.d.ts +11 -5
- package/dist/index.js +19 -7
- package/dist/lazy/index.d.ts +6 -0
- package/dist/lazy/index.js +6 -0
- package/dist/lazy/lazyHtml2Canvas.d.ts +29 -0
- package/dist/lazy/lazyHtml2Canvas.js +37 -0
- package/dist/network.d.ts +92 -0
- package/dist/network.js +176 -0
- package/dist/outline.js +43 -10
- package/dist/presets.d.ts +57 -0
- package/dist/presets.js +133 -0
- package/dist/schema.js +4 -3
- package/dist/settings.d.ts +150 -0
- package/dist/settings.js +292 -0
- package/dist/storage.d.ts +83 -0
- package/dist/storage.js +182 -0
- package/dist/types.d.ts +26 -1
- package/dist/ui/index.d.ts +2 -2
- package/dist/ui/index.js +2 -2
- package/dist/ui/modals.d.ts +4 -0
- package/dist/ui/modals.js +53 -7
- package/dist/utils.d.ts +1 -1
- package/dist/utils.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Accessibility Audit Utilities
|
|
3
|
+
*
|
|
4
|
+
* Lazy-loads axe-core and provides accessibility auditing capabilities.
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Axe-core result types (simplified)
|
|
8
|
+
*/
|
|
9
|
+
export interface AxeViolation {
|
|
10
|
+
id: string;
|
|
11
|
+
impact: 'critical' | 'serious' | 'moderate' | 'minor';
|
|
12
|
+
description: string;
|
|
13
|
+
help: string;
|
|
14
|
+
helpUrl: string;
|
|
15
|
+
tags: string[];
|
|
16
|
+
nodes: Array<{
|
|
17
|
+
html: string;
|
|
18
|
+
target: string[];
|
|
19
|
+
failureSummary?: string;
|
|
20
|
+
}>;
|
|
21
|
+
}
|
|
22
|
+
export interface AxeResult {
|
|
23
|
+
violations: AxeViolation[];
|
|
24
|
+
passes: Array<{
|
|
25
|
+
id: string;
|
|
26
|
+
description: string;
|
|
27
|
+
}>;
|
|
28
|
+
incomplete: AxeViolation[];
|
|
29
|
+
inapplicable: Array<{
|
|
30
|
+
id: string;
|
|
31
|
+
}>;
|
|
32
|
+
timestamp: string;
|
|
33
|
+
url: string;
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* Accessibility audit state
|
|
37
|
+
*/
|
|
38
|
+
export interface A11yState {
|
|
39
|
+
isLoading: boolean;
|
|
40
|
+
lastRun: number | null;
|
|
41
|
+
result: AxeResult | null;
|
|
42
|
+
error: string | null;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Check if axe-core is loaded
|
|
46
|
+
*/
|
|
47
|
+
export declare function isAxeLoaded(): boolean;
|
|
48
|
+
/**
|
|
49
|
+
* Preload axe-core without waiting
|
|
50
|
+
*/
|
|
51
|
+
export declare function preloadAxe(): void;
|
|
52
|
+
/**
|
|
53
|
+
* Run accessibility audit on the page
|
|
54
|
+
* Returns cached result if within cache duration
|
|
55
|
+
*/
|
|
56
|
+
export declare function runA11yAudit(forceRefresh?: boolean): Promise<AxeResult>;
|
|
57
|
+
/**
|
|
58
|
+
* Get violation count by impact level
|
|
59
|
+
*/
|
|
60
|
+
export declare function getViolationCounts(violations: AxeViolation[]): Record<string, number>;
|
|
61
|
+
/**
|
|
62
|
+
* Group violations by impact level
|
|
63
|
+
*/
|
|
64
|
+
export declare function groupViolationsByImpact(violations: AxeViolation[]): Map<string, AxeViolation[]>;
|
|
65
|
+
/**
|
|
66
|
+
* Get color for impact level
|
|
67
|
+
*/
|
|
68
|
+
export declare function getImpactColor(impact: string): string;
|
|
69
|
+
/**
|
|
70
|
+
* Get badge color based on worst violation impact
|
|
71
|
+
*/
|
|
72
|
+
export declare function getBadgeColor(violations: AxeViolation[]): string;
|
|
73
|
+
/**
|
|
74
|
+
* Clear cached result
|
|
75
|
+
*/
|
|
76
|
+
export declare function clearA11yCache(): void;
|
|
77
|
+
/**
|
|
78
|
+
* Get cached result without running audit
|
|
79
|
+
*/
|
|
80
|
+
export declare function getCachedResult(): AxeResult | null;
|
|
81
|
+
/**
|
|
82
|
+
* Format violation for display
|
|
83
|
+
*/
|
|
84
|
+
export declare function formatViolation(violation: AxeViolation): string;
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Accessibility Audit Utilities
|
|
3
|
+
*
|
|
4
|
+
* Lazy-loads axe-core and provides accessibility auditing capabilities.
|
|
5
|
+
*/
|
|
6
|
+
// Cache duration in milliseconds (30 seconds)
|
|
7
|
+
const CACHE_DURATION_MS = 30000;
|
|
8
|
+
// Module-level state
|
|
9
|
+
let axePromise = null;
|
|
10
|
+
let cachedResult = null;
|
|
11
|
+
let cacheTimestamp = null;
|
|
12
|
+
/**
|
|
13
|
+
* Lazy load axe-core
|
|
14
|
+
*/
|
|
15
|
+
async function loadAxe() {
|
|
16
|
+
if (!axePromise) {
|
|
17
|
+
axePromise = import('axe-core');
|
|
18
|
+
}
|
|
19
|
+
return axePromise;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Check if axe-core is loaded
|
|
23
|
+
*/
|
|
24
|
+
export function isAxeLoaded() {
|
|
25
|
+
return axePromise !== null;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Preload axe-core without waiting
|
|
29
|
+
*/
|
|
30
|
+
export function preloadAxe() {
|
|
31
|
+
loadAxe().catch(() => {
|
|
32
|
+
// Silently ignore preload errors
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* Run accessibility audit on the page
|
|
37
|
+
* Returns cached result if within cache duration
|
|
38
|
+
*/
|
|
39
|
+
export async function runA11yAudit(forceRefresh = false) {
|
|
40
|
+
// Return cached result if valid
|
|
41
|
+
if (!forceRefresh &&
|
|
42
|
+
cachedResult &&
|
|
43
|
+
cacheTimestamp &&
|
|
44
|
+
Date.now() - cacheTimestamp < CACHE_DURATION_MS) {
|
|
45
|
+
return cachedResult;
|
|
46
|
+
}
|
|
47
|
+
const axeModule = await loadAxe();
|
|
48
|
+
// Handle ESM/CJS interop
|
|
49
|
+
const axe = axeModule.default ?? axeModule;
|
|
50
|
+
// Run axe analysis
|
|
51
|
+
const result = await axe.run(document, {
|
|
52
|
+
runOnly: {
|
|
53
|
+
type: 'tag',
|
|
54
|
+
values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'best-practice'],
|
|
55
|
+
},
|
|
56
|
+
});
|
|
57
|
+
// Transform to our format
|
|
58
|
+
const auditResult = {
|
|
59
|
+
violations: result.violations,
|
|
60
|
+
passes: result.passes.map((p) => ({
|
|
61
|
+
id: p.id,
|
|
62
|
+
description: p.description,
|
|
63
|
+
})),
|
|
64
|
+
incomplete: result.incomplete,
|
|
65
|
+
inapplicable: result.inapplicable.map((i) => ({ id: i.id })),
|
|
66
|
+
timestamp: new Date().toISOString(),
|
|
67
|
+
url: window.location.href,
|
|
68
|
+
};
|
|
69
|
+
// Cache the result
|
|
70
|
+
cachedResult = auditResult;
|
|
71
|
+
cacheTimestamp = Date.now();
|
|
72
|
+
return auditResult;
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* Get violation count by impact level
|
|
76
|
+
*/
|
|
77
|
+
export function getViolationCounts(violations) {
|
|
78
|
+
const counts = {
|
|
79
|
+
critical: 0,
|
|
80
|
+
serious: 0,
|
|
81
|
+
moderate: 0,
|
|
82
|
+
minor: 0,
|
|
83
|
+
total: 0,
|
|
84
|
+
};
|
|
85
|
+
for (const violation of violations) {
|
|
86
|
+
counts[violation.impact] = (counts[violation.impact] || 0) + 1;
|
|
87
|
+
counts.total++;
|
|
88
|
+
}
|
|
89
|
+
return counts;
|
|
90
|
+
}
|
|
91
|
+
/**
|
|
92
|
+
* Group violations by impact level
|
|
93
|
+
*/
|
|
94
|
+
export function groupViolationsByImpact(violations) {
|
|
95
|
+
const groups = new Map();
|
|
96
|
+
const impactOrder = ['critical', 'serious', 'moderate', 'minor'];
|
|
97
|
+
for (const impact of impactOrder) {
|
|
98
|
+
groups.set(impact, []);
|
|
99
|
+
}
|
|
100
|
+
for (const violation of violations) {
|
|
101
|
+
const group = groups.get(violation.impact);
|
|
102
|
+
if (group) {
|
|
103
|
+
group.push(violation);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
return groups;
|
|
107
|
+
}
|
|
108
|
+
/**
|
|
109
|
+
* Get color for impact level
|
|
110
|
+
*/
|
|
111
|
+
export function getImpactColor(impact) {
|
|
112
|
+
const colors = {
|
|
113
|
+
critical: '#ef4444', // red
|
|
114
|
+
serious: '#f97316', // orange
|
|
115
|
+
moderate: '#f59e0b', // amber
|
|
116
|
+
minor: '#84cc16', // lime
|
|
117
|
+
};
|
|
118
|
+
return colors[impact] || '#6b7280';
|
|
119
|
+
}
|
|
120
|
+
/**
|
|
121
|
+
* Get badge color based on worst violation impact
|
|
122
|
+
*/
|
|
123
|
+
export function getBadgeColor(violations) {
|
|
124
|
+
if (violations.some((v) => v.impact === 'critical'))
|
|
125
|
+
return getImpactColor('critical');
|
|
126
|
+
if (violations.some((v) => v.impact === 'serious'))
|
|
127
|
+
return getImpactColor('serious');
|
|
128
|
+
if (violations.some((v) => v.impact === 'moderate'))
|
|
129
|
+
return getImpactColor('moderate');
|
|
130
|
+
if (violations.some((v) => v.impact === 'minor'))
|
|
131
|
+
return getImpactColor('minor');
|
|
132
|
+
return '#10b981'; // green - no violations
|
|
133
|
+
}
|
|
134
|
+
/**
|
|
135
|
+
* Clear cached result
|
|
136
|
+
*/
|
|
137
|
+
export function clearA11yCache() {
|
|
138
|
+
cachedResult = null;
|
|
139
|
+
cacheTimestamp = null;
|
|
140
|
+
}
|
|
141
|
+
/**
|
|
142
|
+
* Get cached result without running audit
|
|
143
|
+
*/
|
|
144
|
+
export function getCachedResult() {
|
|
145
|
+
if (cachedResult && cacheTimestamp && Date.now() - cacheTimestamp < CACHE_DURATION_MS) {
|
|
146
|
+
return cachedResult;
|
|
147
|
+
}
|
|
148
|
+
return null;
|
|
149
|
+
}
|
|
150
|
+
/**
|
|
151
|
+
* Format violation for display
|
|
152
|
+
*/
|
|
153
|
+
export function formatViolation(violation) {
|
|
154
|
+
return `[${violation.impact.toUpperCase()}] ${violation.help}\n${violation.description}\n${violation.nodes.length} element(s) affected`;
|
|
155
|
+
}
|
package/dist/constants.d.ts
CHANGED
|
@@ -11,8 +11,18 @@ export declare const MAX_RECONNECT_ATTEMPTS = 10;
|
|
|
11
11
|
export declare const BASE_RECONNECT_DELAY_MS = 1000;
|
|
12
12
|
/** Maximum delay between reconnection attempts (ms) */
|
|
13
13
|
export declare const MAX_RECONNECT_DELAY_MS = 30000;
|
|
14
|
-
/** Default WebSocket port for Sweetlink connection */
|
|
14
|
+
/** Default WebSocket port for Sweetlink connection (legacy fallback) */
|
|
15
15
|
export declare const WS_PORT = 9223;
|
|
16
|
+
/** Port offset from app port to calculate WebSocket port (matches SweetlinkBridge) */
|
|
17
|
+
export declare const WS_PORT_OFFSET = 6223;
|
|
18
|
+
/** Maximum ports to try when scanning for matching server */
|
|
19
|
+
export declare const MAX_PORT_RETRIES = 10;
|
|
20
|
+
/** Delay between port scan attempts (ms) */
|
|
21
|
+
export declare const PORT_RETRY_DELAY_MS = 100;
|
|
22
|
+
/** Timeout for server-info verification (ms) */
|
|
23
|
+
export declare const VERIFICATION_TIMEOUT_MS = 1000;
|
|
24
|
+
/** Delay before restarting port scan from base after all ports fail (ms) */
|
|
25
|
+
export declare const PORT_SCAN_RESTART_DELAY_MS = 3000;
|
|
16
26
|
/** Duration to show screenshot notification (ms) */
|
|
17
27
|
export declare const SCREENSHOT_NOTIFICATION_MS = 3000;
|
|
18
28
|
/** Duration to show clipboard notification (ms) */
|
|
@@ -62,6 +72,13 @@ export declare const BUTTON_COLORS: {
|
|
|
62
72
|
};
|
|
63
73
|
/** Category colors for outline display */
|
|
64
74
|
export declare const CATEGORY_COLORS: Record<string, string>;
|
|
75
|
+
/** LocalStorage keys for DevBar persistence */
|
|
76
|
+
export declare const STORAGE_KEYS: {
|
|
77
|
+
/** Theme mode preference: 'dark' | 'light' | 'system' */
|
|
78
|
+
readonly themeMode: "devbar-theme-mode";
|
|
79
|
+
/** Compact mode preference: 'true' | 'false' */
|
|
80
|
+
readonly compactMode: "devbar-compact-mode";
|
|
81
|
+
};
|
|
65
82
|
/** Complete DevBar design system theme */
|
|
66
83
|
export declare const DEVBAR_THEME: {
|
|
67
84
|
readonly colors: {
|
|
@@ -123,6 +140,67 @@ export declare const DEVBAR_THEME: {
|
|
|
123
140
|
};
|
|
124
141
|
};
|
|
125
142
|
export type DevBarTheme = typeof DEVBAR_THEME;
|
|
143
|
+
/** Light theme variant - terminal aesthetic with light green tones */
|
|
144
|
+
export declare const DEVBAR_THEME_LIGHT: {
|
|
145
|
+
readonly colors: {
|
|
146
|
+
readonly primary: "#047857";
|
|
147
|
+
readonly primaryHover: "#065f46";
|
|
148
|
+
readonly primaryGlow: "rgba(4, 120, 87, 0.25)";
|
|
149
|
+
readonly error: "#dc2626";
|
|
150
|
+
readonly warning: "#d97706";
|
|
151
|
+
readonly info: "#2563eb";
|
|
152
|
+
readonly purple: "#7c3aed";
|
|
153
|
+
readonly cyan: "#0891b2";
|
|
154
|
+
readonly pink: "#db2777";
|
|
155
|
+
readonly lime: "#65a30d";
|
|
156
|
+
readonly bg: "#ecfdf5";
|
|
157
|
+
readonly bgCard: "rgba(255, 255, 255, 0.85)";
|
|
158
|
+
readonly bgElevated: "rgba(255, 255, 255, 0.95)";
|
|
159
|
+
readonly bgInput: "rgba(236, 253, 245, 0.9)";
|
|
160
|
+
readonly text: "#064e3b";
|
|
161
|
+
readonly textSecondary: "#065f46";
|
|
162
|
+
readonly textMuted: "#047857";
|
|
163
|
+
readonly border: "rgba(4, 120, 87, 0.3)";
|
|
164
|
+
readonly borderSubtle: "rgba(4, 120, 87, 0.1)";
|
|
165
|
+
};
|
|
166
|
+
readonly fonts: {
|
|
167
|
+
readonly mono: "'Departure Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace";
|
|
168
|
+
};
|
|
169
|
+
readonly typography: {
|
|
170
|
+
readonly sizeXs: "0.625rem";
|
|
171
|
+
readonly sizeSm: "0.6875rem";
|
|
172
|
+
readonly sizeBase: "0.75rem";
|
|
173
|
+
readonly sizeMd: "0.8125rem";
|
|
174
|
+
readonly sizeLg: "0.875rem";
|
|
175
|
+
readonly sizeXl: "1rem";
|
|
176
|
+
readonly size2xl: "1.5rem";
|
|
177
|
+
readonly leadingTight: "1rem";
|
|
178
|
+
readonly leadingNormal: "1.5";
|
|
179
|
+
readonly leadingRelaxed: "1.6";
|
|
180
|
+
readonly weightNormal: "400";
|
|
181
|
+
readonly weightMedium: "500";
|
|
182
|
+
readonly weightSemibold: "600";
|
|
183
|
+
readonly trackingTight: "-0.02em";
|
|
184
|
+
readonly trackingNormal: "0";
|
|
185
|
+
readonly trackingWide: "0.05em";
|
|
186
|
+
readonly trackingWider: "0.1em";
|
|
187
|
+
};
|
|
188
|
+
readonly radius: {
|
|
189
|
+
readonly sm: "4px";
|
|
190
|
+
readonly md: "6px";
|
|
191
|
+
readonly lg: "12px";
|
|
192
|
+
};
|
|
193
|
+
readonly shadows: {
|
|
194
|
+
readonly sm: "0 1px 2px rgba(4, 120, 87, 0.1)";
|
|
195
|
+
readonly md: "0 4px 12px rgba(4, 120, 87, 0.12), 0 0 0 1px rgba(4, 120, 87, 0.15)";
|
|
196
|
+
readonly lg: "0 8px 32px rgba(4, 120, 87, 0.15), 0 0 0 1px rgba(4, 120, 87, 0.2)";
|
|
197
|
+
readonly glow: "0 0 20px rgba(4, 120, 87, 0.15)";
|
|
198
|
+
};
|
|
199
|
+
readonly transitions: {
|
|
200
|
+
readonly fast: "150ms";
|
|
201
|
+
};
|
|
202
|
+
};
|
|
203
|
+
export type DevBarThemeLight = typeof DEVBAR_THEME_LIGHT;
|
|
126
204
|
/** Shorthand for common colors */
|
|
127
205
|
export declare const COLORS: {
|
|
128
206
|
readonly primary: "#10b981";
|
|
@@ -168,6 +246,29 @@ export type DevBarThemeInput = {
|
|
|
168
246
|
[K in keyof DevBarTheme['transitions']]: string;
|
|
169
247
|
};
|
|
170
248
|
};
|
|
249
|
+
import type { ThemeMode } from './types.js';
|
|
250
|
+
/**
|
|
251
|
+
* Get the stored theme mode preference
|
|
252
|
+
*/
|
|
253
|
+
export declare function getStoredThemeMode(): ThemeMode;
|
|
254
|
+
/**
|
|
255
|
+
* Store the theme mode preference
|
|
256
|
+
*/
|
|
257
|
+
export declare function setStoredThemeMode(mode: ThemeMode): void;
|
|
258
|
+
/**
|
|
259
|
+
* Get the effective theme (resolves 'system' to 'dark' or 'light')
|
|
260
|
+
*/
|
|
261
|
+
export declare function getEffectiveTheme(mode: ThemeMode): 'dark' | 'light';
|
|
262
|
+
/** Union type for both theme color variants */
|
|
263
|
+
export type ThemeColors = DevBarTheme['colors'] | DevBarThemeLight['colors'];
|
|
264
|
+
/**
|
|
265
|
+
* Get theme colors based on the current effective theme
|
|
266
|
+
*/
|
|
267
|
+
export declare function getThemeColors(mode: ThemeMode): ThemeColors;
|
|
268
|
+
/**
|
|
269
|
+
* Get full theme based on the current effective theme
|
|
270
|
+
*/
|
|
271
|
+
export declare function getTheme(mode: ThemeMode): typeof DEVBAR_THEME | typeof DEVBAR_THEME_LIGHT;
|
|
171
272
|
/**
|
|
172
273
|
* Generate CSS custom properties from the theme
|
|
173
274
|
*/
|
package/dist/constants.js
CHANGED
|
@@ -18,8 +18,18 @@ export const MAX_RECONNECT_DELAY_MS = 30000;
|
|
|
18
18
|
// ============================================================================
|
|
19
19
|
// WebSocket Settings
|
|
20
20
|
// ============================================================================
|
|
21
|
-
/** Default WebSocket port for Sweetlink connection */
|
|
21
|
+
/** Default WebSocket port for Sweetlink connection (legacy fallback) */
|
|
22
22
|
export const WS_PORT = 9223;
|
|
23
|
+
/** Port offset from app port to calculate WebSocket port (matches SweetlinkBridge) */
|
|
24
|
+
export const WS_PORT_OFFSET = 6223;
|
|
25
|
+
/** Maximum ports to try when scanning for matching server */
|
|
26
|
+
export const MAX_PORT_RETRIES = 10;
|
|
27
|
+
/** Delay between port scan attempts (ms) */
|
|
28
|
+
export const PORT_RETRY_DELAY_MS = 100;
|
|
29
|
+
/** Timeout for server-info verification (ms) */
|
|
30
|
+
export const VERIFICATION_TIMEOUT_MS = 1000;
|
|
31
|
+
/** Delay before restarting port scan from base after all ports fail (ms) */
|
|
32
|
+
export const PORT_SCAN_RESTART_DELAY_MS = 3000;
|
|
23
33
|
// ============================================================================
|
|
24
34
|
// Notification Durations
|
|
25
35
|
// ============================================================================
|
|
@@ -41,11 +51,11 @@ export const SCREENSHOT_SCALE = 0.75;
|
|
|
41
51
|
// ============================================================================
|
|
42
52
|
/** Tailwind CSS breakpoint definitions */
|
|
43
53
|
export const TAILWIND_BREAKPOINTS = {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
54
|
+
base: { min: 0, label: 'Tailwind base: <640px' },
|
|
55
|
+
sm: { min: 640, label: 'Tailwind sm: >=640px' },
|
|
56
|
+
md: { min: 768, label: 'Tailwind md: >=768px' },
|
|
57
|
+
lg: { min: 1024, label: 'Tailwind lg: >=1024px' },
|
|
58
|
+
xl: { min: 1280, label: 'Tailwind xl: >=1280px' },
|
|
49
59
|
'2xl': { min: 1536, label: 'Tailwind 2xl: >=1536px' },
|
|
50
60
|
};
|
|
51
61
|
// ============================================================================
|
|
@@ -89,6 +99,16 @@ export const CATEGORY_COLORS = {
|
|
|
89
99
|
other: PALETTE.gray,
|
|
90
100
|
};
|
|
91
101
|
// ============================================================================
|
|
102
|
+
// Storage Keys
|
|
103
|
+
// ============================================================================
|
|
104
|
+
/** LocalStorage keys for DevBar persistence */
|
|
105
|
+
export const STORAGE_KEYS = {
|
|
106
|
+
/** Theme mode preference: 'dark' | 'light' | 'system' */
|
|
107
|
+
themeMode: 'devbar-theme-mode',
|
|
108
|
+
/** Compact mode preference: 'true' | 'false' */
|
|
109
|
+
compactMode: 'devbar-compact-mode',
|
|
110
|
+
};
|
|
111
|
+
// ============================================================================
|
|
92
112
|
// Design System Theme
|
|
93
113
|
// ============================================================================
|
|
94
114
|
/** Complete DevBar design system theme */
|
|
@@ -164,6 +184,47 @@ export const DEVBAR_THEME = {
|
|
|
164
184
|
fast: '150ms',
|
|
165
185
|
},
|
|
166
186
|
};
|
|
187
|
+
/** Light theme variant - terminal aesthetic with light green tones */
|
|
188
|
+
export const DEVBAR_THEME_LIGHT = {
|
|
189
|
+
colors: {
|
|
190
|
+
// Primary accent (darker emerald for contrast)
|
|
191
|
+
primary: '#047857', // darker emerald for better contrast
|
|
192
|
+
primaryHover: '#065f46',
|
|
193
|
+
primaryGlow: 'rgba(4, 120, 87, 0.25)',
|
|
194
|
+
// Semantic colors (adjusted for light bg)
|
|
195
|
+
error: '#dc2626',
|
|
196
|
+
warning: '#d97706',
|
|
197
|
+
info: '#2563eb',
|
|
198
|
+
// Extended palette (darker for light mode)
|
|
199
|
+
purple: '#7c3aed',
|
|
200
|
+
cyan: '#0891b2',
|
|
201
|
+
pink: '#db2777',
|
|
202
|
+
lime: '#65a30d',
|
|
203
|
+
// Backgrounds - terminal light green aesthetic
|
|
204
|
+
bg: '#ecfdf5', // very light mint/green
|
|
205
|
+
bgCard: 'rgba(255, 255, 255, 0.85)',
|
|
206
|
+
bgElevated: 'rgba(255, 255, 255, 0.95)',
|
|
207
|
+
bgInput: 'rgba(236, 253, 245, 0.9)', // light mint input
|
|
208
|
+
// Text (dark on light)
|
|
209
|
+
text: '#064e3b', // dark emerald text
|
|
210
|
+
textSecondary: '#065f46',
|
|
211
|
+
textMuted: '#047857',
|
|
212
|
+
// Borders (emerald-tinted)
|
|
213
|
+
border: 'rgba(4, 120, 87, 0.3)',
|
|
214
|
+
borderSubtle: 'rgba(4, 120, 87, 0.1)',
|
|
215
|
+
},
|
|
216
|
+
// Other properties same as dark theme
|
|
217
|
+
fonts: DEVBAR_THEME.fonts,
|
|
218
|
+
typography: DEVBAR_THEME.typography,
|
|
219
|
+
radius: DEVBAR_THEME.radius,
|
|
220
|
+
shadows: {
|
|
221
|
+
sm: '0 1px 2px rgba(4, 120, 87, 0.1)',
|
|
222
|
+
md: '0 4px 12px rgba(4, 120, 87, 0.12), 0 0 0 1px rgba(4, 120, 87, 0.15)',
|
|
223
|
+
lg: '0 8px 32px rgba(4, 120, 87, 0.15), 0 0 0 1px rgba(4, 120, 87, 0.2)',
|
|
224
|
+
glow: '0 0 20px rgba(4, 120, 87, 0.15)',
|
|
225
|
+
},
|
|
226
|
+
transitions: DEVBAR_THEME.transitions,
|
|
227
|
+
};
|
|
167
228
|
// ============================================================================
|
|
168
229
|
// Shorthand Exports (for cleaner imports)
|
|
169
230
|
// ============================================================================
|
|
@@ -171,6 +232,51 @@ export const DEVBAR_THEME = {
|
|
|
171
232
|
export const COLORS = DEVBAR_THEME.colors;
|
|
172
233
|
/** Shorthand for font stack */
|
|
173
234
|
export const FONT_MONO = DEVBAR_THEME.fonts.mono;
|
|
235
|
+
/**
|
|
236
|
+
* Get the stored theme mode preference
|
|
237
|
+
*/
|
|
238
|
+
export function getStoredThemeMode() {
|
|
239
|
+
if (typeof localStorage === 'undefined')
|
|
240
|
+
return 'system';
|
|
241
|
+
const stored = localStorage.getItem(STORAGE_KEYS.themeMode);
|
|
242
|
+
if (stored === 'dark' || stored === 'light' || stored === 'system') {
|
|
243
|
+
return stored;
|
|
244
|
+
}
|
|
245
|
+
return 'system';
|
|
246
|
+
}
|
|
247
|
+
/**
|
|
248
|
+
* Store the theme mode preference
|
|
249
|
+
*/
|
|
250
|
+
export function setStoredThemeMode(mode) {
|
|
251
|
+
if (typeof localStorage === 'undefined')
|
|
252
|
+
return;
|
|
253
|
+
localStorage.setItem(STORAGE_KEYS.themeMode, mode);
|
|
254
|
+
}
|
|
255
|
+
/**
|
|
256
|
+
* Get the effective theme (resolves 'system' to 'dark' or 'light')
|
|
257
|
+
*/
|
|
258
|
+
export function getEffectiveTheme(mode) {
|
|
259
|
+
if (mode === 'system') {
|
|
260
|
+
if (typeof window === 'undefined')
|
|
261
|
+
return 'dark';
|
|
262
|
+
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
263
|
+
}
|
|
264
|
+
return mode;
|
|
265
|
+
}
|
|
266
|
+
/**
|
|
267
|
+
* Get theme colors based on the current effective theme
|
|
268
|
+
*/
|
|
269
|
+
export function getThemeColors(mode) {
|
|
270
|
+
const effectiveTheme = getEffectiveTheme(mode);
|
|
271
|
+
return effectiveTheme === 'light' ? DEVBAR_THEME_LIGHT.colors : DEVBAR_THEME.colors;
|
|
272
|
+
}
|
|
273
|
+
/**
|
|
274
|
+
* Get full theme based on the current effective theme
|
|
275
|
+
*/
|
|
276
|
+
export function getTheme(mode) {
|
|
277
|
+
const effectiveTheme = getEffectiveTheme(mode);
|
|
278
|
+
return effectiveTheme === 'light' ? DEVBAR_THEME_LIGHT : DEVBAR_THEME;
|
|
279
|
+
}
|
|
174
280
|
/**
|
|
175
281
|
* Generate CSS custom properties from the theme
|
|
176
282
|
*/
|
|
@@ -498,13 +604,7 @@ export const TOOLTIP_STYLES = `
|
|
|
498
604
|
right: auto !important;
|
|
499
605
|
transform: translateX(-50%) !important;
|
|
500
606
|
}
|
|
501
|
-
/* Collapsed state:
|
|
502
|
-
[data-devbar].devbar-collapse {
|
|
503
|
-
left: 50% !important;
|
|
504
|
-
right: auto !important;
|
|
505
|
-
transform: translateX(-50%) !important;
|
|
506
|
-
bottom: 20px !important;
|
|
507
|
-
}
|
|
607
|
+
/* Collapsed state: JS handles positioning based on captured dot location */
|
|
508
608
|
.devbar-main {
|
|
509
609
|
flex-wrap: wrap;
|
|
510
610
|
justify-content: center;
|
package/dist/debug.d.ts
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DevBar Debug Utilities
|
|
3
|
+
*
|
|
4
|
+
* Debug logging system for DevBar lifecycle, state, and events.
|
|
5
|
+
*/
|
|
6
|
+
import type { DebugConfig } from './types.js';
|
|
7
|
+
/**
|
|
8
|
+
* Normalize debug option to DebugConfig
|
|
9
|
+
*/
|
|
10
|
+
export declare function normalizeDebugConfig(debug: boolean | DebugConfig | undefined): DebugConfig;
|
|
11
|
+
/**
|
|
12
|
+
* Debug logger for DevBar
|
|
13
|
+
*/
|
|
14
|
+
export declare class DebugLogger {
|
|
15
|
+
private config;
|
|
16
|
+
private prefix;
|
|
17
|
+
constructor(config: DebugConfig);
|
|
18
|
+
/**
|
|
19
|
+
* Update debug configuration
|
|
20
|
+
*/
|
|
21
|
+
setConfig(config: DebugConfig): void;
|
|
22
|
+
/**
|
|
23
|
+
* Log lifecycle events (init, destroy, etc.)
|
|
24
|
+
*/
|
|
25
|
+
lifecycle(message: string, data?: unknown): void;
|
|
26
|
+
/**
|
|
27
|
+
* Log state changes (collapse, modal open/close, etc.)
|
|
28
|
+
*/
|
|
29
|
+
state(message: string, data?: unknown): void;
|
|
30
|
+
/**
|
|
31
|
+
* Log WebSocket events (connect, disconnect, messages)
|
|
32
|
+
*/
|
|
33
|
+
ws(message: string, data?: unknown): void;
|
|
34
|
+
/**
|
|
35
|
+
* Log performance measurements (FCP, LCP, CLS, INP)
|
|
36
|
+
*/
|
|
37
|
+
perf(message: string, data?: unknown): void;
|
|
38
|
+
private log;
|
|
39
|
+
}
|
package/dist/debug.js
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DevBar Debug Utilities
|
|
3
|
+
*
|
|
4
|
+
* Debug logging system for DevBar lifecycle, state, and events.
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Normalize debug option to DebugConfig
|
|
8
|
+
*/
|
|
9
|
+
export function normalizeDebugConfig(debug) {
|
|
10
|
+
if (!debug) {
|
|
11
|
+
return { enabled: false };
|
|
12
|
+
}
|
|
13
|
+
if (debug === true) {
|
|
14
|
+
return {
|
|
15
|
+
enabled: true,
|
|
16
|
+
logLifecycle: true,
|
|
17
|
+
logStateChanges: true,
|
|
18
|
+
logWebSocket: true,
|
|
19
|
+
logPerformance: true,
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
return {
|
|
23
|
+
enabled: debug.enabled,
|
|
24
|
+
logLifecycle: debug.logLifecycle ?? true,
|
|
25
|
+
logStateChanges: debug.logStateChanges ?? true,
|
|
26
|
+
logWebSocket: debug.logWebSocket ?? true,
|
|
27
|
+
logPerformance: debug.logPerformance ?? true,
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Debug logger for DevBar
|
|
32
|
+
*/
|
|
33
|
+
export class DebugLogger {
|
|
34
|
+
constructor(config) {
|
|
35
|
+
this.prefix = '[DevBar]';
|
|
36
|
+
this.config = config;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Update debug configuration
|
|
40
|
+
*/
|
|
41
|
+
setConfig(config) {
|
|
42
|
+
this.config = config;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Log lifecycle events (init, destroy, etc.)
|
|
46
|
+
*/
|
|
47
|
+
lifecycle(message, data) {
|
|
48
|
+
if (this.config.enabled && this.config.logLifecycle) {
|
|
49
|
+
this.log('lifecycle', message, data);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Log state changes (collapse, modal open/close, etc.)
|
|
54
|
+
*/
|
|
55
|
+
state(message, data) {
|
|
56
|
+
if (this.config.enabled && this.config.logStateChanges) {
|
|
57
|
+
this.log('state', message, data);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* Log WebSocket events (connect, disconnect, messages)
|
|
62
|
+
*/
|
|
63
|
+
ws(message, data) {
|
|
64
|
+
if (this.config.enabled && this.config.logWebSocket) {
|
|
65
|
+
this.log('ws', message, data);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Log performance measurements (FCP, LCP, CLS, INP)
|
|
70
|
+
*/
|
|
71
|
+
perf(message, data) {
|
|
72
|
+
if (this.config.enabled && this.config.logPerformance) {
|
|
73
|
+
this.log('perf', message, data);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
log(category, message, data) {
|
|
77
|
+
const timestamp = new Date().toISOString().split('T')[1].slice(0, -1);
|
|
78
|
+
const categoryColors = {
|
|
79
|
+
lifecycle: '#10b981', // emerald
|
|
80
|
+
state: '#3b82f6', // blue
|
|
81
|
+
ws: '#a855f7', // purple
|
|
82
|
+
perf: '#f59e0b', // amber
|
|
83
|
+
};
|
|
84
|
+
const color = categoryColors[category] || '#6b7280';
|
|
85
|
+
if (data !== undefined) {
|
|
86
|
+
console.log(`%c${this.prefix}%c [${category}] %c${timestamp}%c ${message}`, 'color: #10b981; font-weight: bold', `color: ${color}`, 'color: #6b7280', 'color: inherit', data);
|
|
87
|
+
}
|
|
88
|
+
else {
|
|
89
|
+
console.log(`%c${this.prefix}%c [${category}] %c${timestamp}%c ${message}`, 'color: #10b981; font-weight: bold', `color: ${color}`, 'color: #6b7280', 'color: inherit');
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export type
|
|
3
|
-
export {
|
|
1
|
+
export { type A11yState, type AxeResult, type AxeViolation, clearA11yCache, formatViolation, getBadgeColor, getCachedResult, getImpactColor, getViolationCounts, groupViolationsByImpact, isAxeLoaded, preloadAxe, runA11yAudit, } from './accessibility.js';
|
|
2
|
+
export { BUTTON_COLORS, CATEGORY_COLORS, COLORS, DEVBAR_THEME, DEVBAR_THEME_LIGHT, type DevBarTheme, type DevBarThemeInput, FONT_MONO, generateBreakpointCSS, generateThemeCSSVars, getEffectiveTheme, getStoredThemeMode, getTheme, getThemeColors, injectThemeCSS, STORAGE_KEYS, setStoredThemeMode, TAILWIND_BREAKPOINTS, type TailwindBreakpoint, type ThemeColors, } from './constants.js';
|
|
3
|
+
export { DebugLogger, normalizeDebugConfig } from './debug.js';
|
|
4
|
+
export { EARLY_CONSOLE_CAPTURE_SCRIPT } from './earlyConsoleCapture.js';
|
|
5
|
+
export { destroyGlobalDevBar, earlyConsoleCapture, GlobalDevBar, getGlobalDevBar, initGlobalDevBar, } from './GlobalDevBar.js';
|
|
6
|
+
export { getHtml2Canvas, isHtml2CanvasLoaded, preloadHtml2Canvas } from './lazy/index.js';
|
|
7
|
+
export { formatBytes as formatNetworkBytes, formatDuration, getInitiatorColor, type NetworkEntry, NetworkMonitor, type NetworkState, } from './network.js';
|
|
4
8
|
export { extractDocumentOutline, outlineToMarkdown } from './outline.js';
|
|
9
|
+
export { initDebug, initFull, initMinimal, initPerformance, initResponsive, PRESET_DEBUG, PRESET_FULL, PRESET_MINIMAL, PRESET_PERFORMANCE, PRESET_RESPONSIVE, } from './presets.js';
|
|
5
10
|
export { extractPageSchema, schemaToMarkdown } from './schema.js';
|
|
6
|
-
export {
|
|
7
|
-
export {
|
|
11
|
+
export { beautifyJson, type CookieItem, clearLocalStorage, clearSessionStorage, deleteCookie, deleteLocalStorageItem, deleteSessionStorageItem, formatStorageSummary, getCookies, getLocalStorage, getSessionStorage, getStorageData, type StorageData, type StorageItem, setLocalStorageItem, setSessionStorageItem, } from './storage.js';
|
|
12
|
+
export type { ConsoleLog, DebugConfig, DevBarControl, GlobalDevBarOptions, OutlineNode, PageSchema, SweetlinkCommand, ThemeMode, } from './types.js';
|
|
13
|
+
export { canvasToDataUrl, copyCanvasToClipboard, delay, formatArg, formatArgs, prepareForCapture, } from './utils.js';
|