@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.
@@ -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
+ }
@@ -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
- 'base': { min: 0, label: 'Tailwind base: <640px' },
45
- 'sm': { min: 640, label: 'Tailwind sm: >=640px' },
46
- 'md': { min: 768, label: 'Tailwind md: >=768px' },
47
- 'lg': { min: 1024, label: 'Tailwind lg: >=1024px' },
48
- 'xl': { min: 1280, label: 'Tailwind xl: >=1280px' },
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: preserve circle shape, center horizontally */
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;
@@ -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 { GlobalDevBar, initGlobalDevBar, getGlobalDevBar, destroyGlobalDevBar, earlyConsoleCapture, } from './GlobalDevBar.js';
2
- export type { GlobalDevBarOptions, DevBarControl, ConsoleLog, SweetlinkCommand, OutlineNode, PageSchema, } from './types.js';
3
- export { formatArg, formatArgs, canvasToDataUrl, prepareForCapture, delay, copyCanvasToClipboard, } from './utils.js';
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 { TAILWIND_BREAKPOINTS, BUTTON_COLORS, CATEGORY_COLORS, DEVBAR_THEME, COLORS, FONT_MONO, generateThemeCSSVars, injectThemeCSS, generateBreakpointCSS, type TailwindBreakpoint, type DevBarTheme, type DevBarThemeInput, } from './constants.js';
7
- export { EARLY_CONSOLE_CAPTURE_SCRIPT } from './earlyConsoleCapture.js';
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';