@ytspar/devbar 1.0.0-canary.e1f65d0 → 1.0.0-canary.f2afc5a

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.
Files changed (122) hide show
  1. package/README.md +9 -0
  2. package/dist/GlobalDevBar.d.ts +128 -130
  3. package/dist/GlobalDevBar.d.ts.map +1 -0
  4. package/dist/GlobalDevBar.js +223 -1732
  5. package/dist/GlobalDevBar.js.map +1 -0
  6. package/dist/accessibility.d.ts +85 -0
  7. package/dist/accessibility.d.ts.map +1 -0
  8. package/dist/accessibility.js +156 -0
  9. package/dist/accessibility.js.map +1 -0
  10. package/dist/constants.d.ts +132 -9
  11. package/dist/constants.d.ts.map +1 -0
  12. package/dist/constants.js +201 -120
  13. package/dist/constants.js.map +1 -0
  14. package/dist/debug.d.ts +40 -0
  15. package/dist/debug.d.ts.map +1 -0
  16. package/dist/debug.js +94 -0
  17. package/dist/debug.js.map +1 -0
  18. package/dist/earlyConsoleCapture.d.ts +4 -31
  19. package/dist/earlyConsoleCapture.d.ts.map +1 -0
  20. package/dist/earlyConsoleCapture.js +4 -74
  21. package/dist/earlyConsoleCapture.js.map +1 -0
  22. package/dist/index.d.ts +14 -5
  23. package/dist/index.d.ts.map +1 -0
  24. package/dist/index.js +25 -8
  25. package/dist/index.js.map +1 -0
  26. package/dist/lazy/index.d.ts +7 -0
  27. package/dist/lazy/index.d.ts.map +1 -0
  28. package/dist/lazy/index.js +7 -0
  29. package/dist/lazy/index.js.map +1 -0
  30. package/dist/lazy/lazyHtml2Canvas.d.ts +34 -0
  31. package/dist/lazy/lazyHtml2Canvas.d.ts.map +1 -0
  32. package/dist/lazy/lazyHtml2Canvas.js +38 -0
  33. package/dist/lazy/lazyHtml2Canvas.js.map +1 -0
  34. package/dist/modules/index.d.ts +15 -0
  35. package/dist/modules/index.d.ts.map +1 -0
  36. package/dist/modules/index.js +14 -0
  37. package/dist/modules/index.js.map +1 -0
  38. package/dist/modules/keyboard.d.ts +15 -0
  39. package/dist/modules/keyboard.d.ts.map +1 -0
  40. package/dist/modules/keyboard.js +60 -0
  41. package/dist/modules/keyboard.js.map +1 -0
  42. package/dist/modules/performance.d.ts +26 -0
  43. package/dist/modules/performance.d.ts.map +1 -0
  44. package/dist/modules/performance.js +197 -0
  45. package/dist/modules/performance.js.map +1 -0
  46. package/dist/modules/rendering.d.ts +20 -0
  47. package/dist/modules/rendering.d.ts.map +1 -0
  48. package/dist/modules/rendering.js +1997 -0
  49. package/dist/modules/rendering.js.map +1 -0
  50. package/dist/modules/screenshot.d.ts +54 -0
  51. package/dist/modules/screenshot.d.ts.map +1 -0
  52. package/dist/modules/screenshot.js +303 -0
  53. package/dist/modules/screenshot.js.map +1 -0
  54. package/dist/modules/theme.d.ts +20 -0
  55. package/dist/modules/theme.d.ts.map +1 -0
  56. package/dist/modules/theme.js +60 -0
  57. package/dist/modules/theme.js.map +1 -0
  58. package/dist/modules/tooltips.d.ts +74 -0
  59. package/dist/modules/tooltips.d.ts.map +1 -0
  60. package/dist/modules/tooltips.js +549 -0
  61. package/dist/modules/tooltips.js.map +1 -0
  62. package/dist/modules/types.d.ts +115 -0
  63. package/dist/modules/types.d.ts.map +1 -0
  64. package/dist/modules/types.js +9 -0
  65. package/dist/modules/types.js.map +1 -0
  66. package/dist/modules/websocket.d.ts +16 -0
  67. package/dist/modules/websocket.d.ts.map +1 -0
  68. package/dist/modules/websocket.js +296 -0
  69. package/dist/modules/websocket.js.map +1 -0
  70. package/dist/network.d.ts +93 -0
  71. package/dist/network.d.ts.map +1 -0
  72. package/dist/network.js +175 -0
  73. package/dist/network.js.map +1 -0
  74. package/dist/outline.d.ts +1 -0
  75. package/dist/outline.d.ts.map +1 -0
  76. package/dist/outline.js +44 -10
  77. package/dist/outline.js.map +1 -0
  78. package/dist/presets.d.ts +58 -0
  79. package/dist/presets.d.ts.map +1 -0
  80. package/dist/presets.js +134 -0
  81. package/dist/presets.js.map +1 -0
  82. package/dist/schema.d.ts +1 -0
  83. package/dist/schema.d.ts.map +1 -0
  84. package/dist/schema.js +7 -6
  85. package/dist/schema.js.map +1 -0
  86. package/dist/settings.d.ts +149 -0
  87. package/dist/settings.d.ts.map +1 -0
  88. package/dist/settings.js +296 -0
  89. package/dist/settings.js.map +1 -0
  90. package/dist/storage.d.ts +84 -0
  91. package/dist/storage.d.ts.map +1 -0
  92. package/dist/storage.js +183 -0
  93. package/dist/storage.js.map +1 -0
  94. package/dist/types.d.ts +29 -3
  95. package/dist/types.d.ts.map +1 -0
  96. package/dist/types.js +3 -2
  97. package/dist/types.js.map +1 -0
  98. package/dist/ui/buttons.d.ts +3 -2
  99. package/dist/ui/buttons.d.ts.map +1 -0
  100. package/dist/ui/buttons.js +3 -2
  101. package/dist/ui/buttons.js.map +1 -0
  102. package/dist/ui/cards.d.ts +37 -0
  103. package/dist/ui/cards.d.ts.map +1 -0
  104. package/dist/ui/cards.js +134 -0
  105. package/dist/ui/cards.js.map +1 -0
  106. package/dist/ui/icons.d.ts +71 -2
  107. package/dist/ui/icons.d.ts.map +1 -0
  108. package/dist/ui/icons.js +148 -2
  109. package/dist/ui/icons.js.map +1 -0
  110. package/dist/ui/index.d.ts +5 -3
  111. package/dist/ui/index.d.ts.map +1 -0
  112. package/dist/ui/index.js +5 -3
  113. package/dist/ui/index.js.map +1 -0
  114. package/dist/ui/modals.d.ts +7 -2
  115. package/dist/ui/modals.d.ts.map +1 -0
  116. package/dist/ui/modals.js +56 -9
  117. package/dist/ui/modals.js.map +1 -0
  118. package/dist/utils.d.ts +4 -3
  119. package/dist/utils.d.ts.map +1 -0
  120. package/dist/utils.js +4 -3
  121. package/dist/utils.js.map +1 -0
  122. package/package.json +17 -14
package/dist/earlyConsoleCapture.js CHANGED
@@ -1,77 +1,7 @@
1
1
  /**
2
- * Early Console Capture Script
2
+ * Early Console Capture Script - Re-exported from @ytspar/sweetlink
3
3
  *
4
- * This script captures console logs BEFORE React hydrates, which is critical for
5
- * catching hydration errors and other early-stage issues. It must be injected
6
- * into the HTML <head> as an inline script.
7
- *
8
- * The script creates `window.__sweetlinkEarlyLogs` which GlobalDevBar will pick up
9
- * when it mounts, merging these early logs with subsequent console output.
10
- *
11
- * @example
12
- * ```tsx
13
- * // In your Document component (Remix) or _document.tsx (Next.js)
14
- * import { EARLY_CONSOLE_CAPTURE_SCRIPT } from '@ytspar/devbar';
15
- *
16
- * <head>
17
- * <script dangerouslySetInnerHTML={{ __html: EARLY_CONSOLE_CAPTURE_SCRIPT }} />
18
- * </head>
19
- * ```
4
+ * @see {@link @ytspar/sweetlink/browser/earlyConsoleCapture}
20
5
  */
21
- export const EARLY_CONSOLE_CAPTURE_SCRIPT = `
22
- (function() {
23
- if (window.__sweetlinkEarlyLogs) return;
24
- window.__sweetlinkEarlyLogs = [];
25
- var orig = {
26
- log: console.log,
27
- error: console.error,
28
- warn: console.warn,
29
- info: console.info
30
- };
31
- function formatArg(a) {
32
- if (a instanceof Error) {
33
- return a.name + ': ' + a.message + (a.stack ? '\\n' + a.stack : '');
34
- }
35
- if (typeof a === 'object' && a !== null) {
36
- try {
37
- return JSON.stringify(a, function(key, val) {
38
- if (val instanceof Error) {
39
- return val.name + ': ' + val.message;
40
- }
41
- return val;
42
- });
43
- } catch(e) {
44
- return String(a);
45
- }
46
- }
47
- return String(a);
48
- }
49
- function capture(level, args) {
50
- window.__sweetlinkEarlyLogs.push({
51
- level: level,
52
- message: Array.from(args).map(formatArg).join(' '),
53
- timestamp: new Date().toISOString()
54
- });
55
- }
56
- console.log = function() { capture('log', arguments); orig.log.apply(console, arguments); };
57
- console.error = function() { capture('error', arguments); orig.error.apply(console, arguments); };
58
- console.warn = function() { capture('warn', arguments); orig.warn.apply(console, arguments); };
59
- console.info = function() { capture('info', arguments); orig.info.apply(console, arguments); };
60
- // Capture uncaught errors
61
- window.addEventListener('error', function(e) {
62
- window.__sweetlinkEarlyLogs.push({
63
- level: 'error',
64
- message: 'Uncaught ' + (e.error ? formatArg(e.error) : e.message) + ' at ' + e.filename + ':' + e.lineno + ':' + e.colno,
65
- timestamp: new Date().toISOString()
66
- });
67
- });
68
- // Capture unhandled promise rejections
69
- window.addEventListener('unhandledrejection', function(e) {
70
- window.__sweetlinkEarlyLogs.push({
71
- level: 'error',
72
- message: 'Unhandled Promise Rejection: ' + formatArg(e.reason),
73
- timestamp: new Date().toISOString()
74
- });
75
- });
76
- })();
77
- `;
6
+ export { EARLY_CONSOLE_CAPTURE_SCRIPT } from '@ytspar/sweetlink/browser/earlyConsoleCapture';
7
+ //# sourceMappingURL=earlyConsoleCapture.js.map
package/dist/earlyConsoleCapture.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"earlyConsoleCapture.js","sourceRoot":"","sources":["../src/earlyConsoleCapture.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,4BAA4B,EAAE,MAAM,+CAA+C,CAAC"}
package/dist/index.d.ts CHANGED
@@ -1,7 +1,16 @@
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 { ACCENT_COLOR_PRESETS, DEFAULT_SETTINGS, type DevBarPosition, type DevBarSettings, getSettingsManager, type MetricsVisibility, type SettingsChangeCallback, } from './settings.js';
12
+ export { beautifyJson, type CookieItem, clearLocalStorage, clearSessionStorage, deleteCookie, deleteLocalStorageItem, deleteSessionStorageItem, formatStorageSummary, getCookies, getLocalStorage, getSessionStorage, getStorageData, type StorageData, type StorageItem, setLocalStorageItem, setSessionStorageItem, } from './storage.js';
13
+ export type { ConsoleLog, DebugConfig, DevBarControl, GlobalDevBarOptions, OutlineNode, PageSchema, SweetlinkCommand, ThemeMode, } from './types.js';
14
+ export { type CreateLogoOptions, createDevBarLogo, DEVBAR_LOGO_COLORS, DEVBAR_LOGO_PATHS, DEVBAR_LOGO_SHAPES, DEVBAR_LOGO_VIEWBOX, getDevBarLogoSvg, } from './ui/icons.js';
15
+ export { canvasToDataUrl, copyCanvasToClipboard, delay, formatArg, formatArgs, prepareForCapture, } from './utils.js';
16
+ //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,cAAc,EACd,eAAe,EACf,aAAa,EACb,eAAe,EACf,cAAc,EACd,kBAAkB,EAClB,uBAAuB,EACvB,WAAW,EACX,UAAU,EACV,YAAY,GACb,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,aAAa,EACb,eAAe,EACf,MAAM,EACN,YAAY,EACZ,kBAAkB,EAClB,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,SAAS,EACT,qBAAqB,EACrB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,oBAAoB,EACpB,KAAK,kBAAkB,EACvB,KAAK,WAAW,GACjB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAE/D,OAAO,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAExE,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,YAAY,EACZ,eAAe,EACf,gBAAgB,GACjB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1F,OAAO,EACL,WAAW,IAAI,kBAAkB,EACjC,cAAc,EACd,iBAAiB,EACjB,KAAK,YAAY,EACjB,cAAc,EACd,KAAK,YAAY,GAClB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEzE,OAAO,EACL,SAAS,EACT,QAAQ,EACR,WAAW,EACX,eAAe,EACf,cAAc,EACd,YAAY,EACZ,WAAW,EACX,cAAc,EACd,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAElE,OAAO,EACL,oBAAoB,EACpB,gBAAgB,EAChB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,kBAAkB,EAClB,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,GAC5B,MAAM,eAAe,CAAC;AAGvB,OAAO,EACL,YAAY,EACZ,KAAK,UAAU,EACf,iBAAiB,EACjB,mBAAmB,EACnB,YAAY,EACZ,sBAAsB,EACtB,wBAAwB,EACxB,oBAAoB,EACpB,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,cAAc,CAAC;AAGtB,YAAY,EACV,UAAU,EACV,WAAW,EACX,aAAa,EACb,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,SAAS,GACV,MAAM,YAAY,CAAC;AAGpB,OAAO,EACL,KAAK,iBAAiB,EACtB,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,eAAe,CAAC;AAGvB,OAAO,EACL,eAAe,EACf,qBAAqB,EACrB,KAAK,EACL,SAAS,EACT,UAAU,EACV,iBAAiB,GAClB,MAAM,YAAY,CAAC"}
package/dist/index.js CHANGED
@@ -1,13 +1,30 @@
1
- // DevBar - Development toolbar and utilities
1
+ // devbar - Development toolbar and utilities
2
2
  // Pure vanilla JavaScript - no framework dependencies
3
+ // Accessibility audit utilities
4
+ export { clearA11yCache, formatViolation, getBadgeColor, getCachedResult, getImpactColor, getViolationCounts, groupViolationsByImpact, isAxeLoaded, preloadAxe, runA11yAudit, } from './accessibility.js';
5
+ // Re-export constants and theme utilities
6
+ export { BUTTON_COLORS, CATEGORY_COLORS, COLORS, DEVBAR_THEME, DEVBAR_THEME_LIGHT, FONT_MONO, generateBreakpointCSS, generateThemeCSSVars, getEffectiveTheme, getStoredThemeMode, getTheme, getThemeColors, injectThemeCSS, STORAGE_KEYS, setStoredThemeMode, TAILWIND_BREAKPOINTS, } from './constants.js';
7
+ // Debug utilities
8
+ export { DebugLogger, normalizeDebugConfig } from './debug.js';
9
+ // Early console capture script for injection
10
+ export { EARLY_CONSOLE_CAPTURE_SCRIPT } from './earlyConsoleCapture.js';
3
11
  // Main vanilla JS devbar
4
- export { GlobalDevBar, initGlobalDevBar, getGlobalDevBar, destroyGlobalDevBar, earlyConsoleCapture, } from './GlobalDevBar.js';
5
- // Re-export utilities for external use
6
- export { formatArg, formatArgs, canvasToDataUrl, prepareForCapture, delay, copyCanvasToClipboard, } from './utils.js';
12
+ export { destroyGlobalDevBar, earlyConsoleCapture, GlobalDevBar, getGlobalDevBar, initGlobalDevBar, } from './GlobalDevBar.js';
13
+ // Lazy loading utilities
14
+ export { getHtml2Canvas, isHtml2CanvasLoaded, preloadHtml2Canvas } from './lazy/index.js';
15
+ // Network monitoring utilities
16
+ export { formatBytes as formatNetworkBytes, formatDuration, getInitiatorColor, NetworkMonitor, } from './network.js';
7
17
  // Re-export outline/schema functions
8
18
  export { extractDocumentOutline, outlineToMarkdown } from './outline.js';
19
+ // Configuration presets
20
+ export { initDebug, initFull, initMinimal, initPerformance, initResponsive, PRESET_DEBUG, PRESET_FULL, PRESET_MINIMAL, PRESET_PERFORMANCE, PRESET_RESPONSIVE, } from './presets.js';
9
21
  export { extractPageSchema, schemaToMarkdown } from './schema.js';
10
- // Re-export constants and theme utilities
11
- export { TAILWIND_BREAKPOINTS, BUTTON_COLORS, CATEGORY_COLORS, DEVBAR_THEME, COLORS, FONT_MONO, generateThemeCSSVars, injectThemeCSS, generateBreakpointCSS, } from './constants.js';
12
- // Early console capture script for injection
13
- export { EARLY_CONSOLE_CAPTURE_SCRIPT } from './earlyConsoleCapture.js';
22
+ // Settings management
23
+ export { ACCENT_COLOR_PRESETS, DEFAULT_SETTINGS, getSettingsManager, } from './settings.js';
24
+ // Storage inspection utilities
25
+ export { beautifyJson, clearLocalStorage, clearSessionStorage, deleteCookie, deleteLocalStorageItem, deleteSessionStorageItem, formatStorageSummary, getCookies, getLocalStorage, getSessionStorage, getStorageData, setLocalStorageItem, setSessionStorageItem, } from './storage.js';
26
+ // Logo exports for library branding
27
+ export { createDevBarLogo, DEVBAR_LOGO_COLORS, DEVBAR_LOGO_PATHS, DEVBAR_LOGO_SHAPES, DEVBAR_LOGO_VIEWBOX, getDevBarLogoSvg, } from './ui/icons.js';
28
+ // Re-export utilities for external use
29
+ export { canvasToDataUrl, copyCanvasToClipboard, delay, formatArg, formatArgs, prepareForCapture, } from './utils.js';
30
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,sDAAsD;AAEtD,gCAAgC;AAChC,OAAO,EAIL,cAAc,EACd,eAAe,EACf,aAAa,EACb,eAAe,EACf,cAAc,EACd,kBAAkB,EAClB,uBAAuB,EACvB,WAAW,EACX,UAAU,EACV,YAAY,GACb,MAAM,oBAAoB,CAAC;AAC5B,0CAA0C;AAC1C,OAAO,EACL,aAAa,EACb,eAAe,EACf,MAAM,EACN,YAAY,EACZ,kBAAkB,EAGlB,SAAS,EACT,qBAAqB,EACrB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,oBAAoB,GAGrB,MAAM,gBAAgB,CAAC;AACxB,kBAAkB;AAClB,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAC/D,6CAA6C;AAC7C,OAAO,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AACxE,yBAAyB;AACzB,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,YAAY,EACZ,eAAe,EACf,gBAAgB,GACjB,MAAM,mBAAmB,CAAC;AAE3B,yBAAyB;AACzB,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1F,+BAA+B;AAC/B,OAAO,EACL,WAAW,IAAI,kBAAkB,EACjC,cAAc,EACd,iBAAiB,EAEjB,cAAc,GAEf,MAAM,cAAc,CAAC;AACtB,qCAAqC;AACrC,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACzE,wBAAwB;AACxB,OAAO,EACL,SAAS,EACT,QAAQ,EACR,WAAW,EACX,eAAe,EACf,cAAc,EACd,YAAY,EACZ,WAAW,EACX,cAAc,EACd,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAClE,sBAAsB;AACtB,OAAO,EACL,oBAAoB,EACpB,gBAAgB,EAGhB,kBAAkB,GAGnB,MAAM,eAAe,CAAC;AAEvB,+BAA+B;AAC/B,OAAO,EACL,YAAY,EAEZ,iBAAiB,EACjB,mBAAmB,EACnB,YAAY,EACZ,sBAAsB,EACtB,wBAAwB,EACxB,oBAAoB,EACpB,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,cAAc,EAGd,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,cAAc,CAAC;AActB,oCAAoC;AACpC,OAAO,EAEL,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,eAAe,CAAC;AAEvB,uCAAuC;AACvC,OAAO,EACL,eAAe,EACf,qBAAqB,EACrB,KAAK,EACL,SAAS,EACT,UAAU,EACV,iBAAiB,GAClB,MAAM,YAAY,CAAC"}
package/dist/lazy/index.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Lazy Loading Utilities
3
+ *
4
+ * Re-exports all lazy loading modules.
5
+ */
6
+ export { getHtml2Canvas, isHtml2CanvasLoaded, preloadHtml2Canvas } from './lazyHtml2Canvas.js';
7
+ //# sourceMappingURL=index.d.ts.map
package/dist/lazy/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lazy/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}
package/dist/lazy/index.js ADDED
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Lazy Loading Utilities
3
+ *
4
+ * Re-exports all lazy loading modules.
5
+ */
6
+ export { getHtml2Canvas, isHtml2CanvasLoaded, preloadHtml2Canvas } from './lazyHtml2Canvas.js';
7
+ //# sourceMappingURL=index.js.map
package/dist/lazy/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lazy/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}
package/dist/lazy/lazyHtml2Canvas.d.ts ADDED
@@ -0,0 +1,34 @@
1
+ /**
2
+ * Lazy Loading for html2canvas
3
+ *
4
+ * Defers html2canvas-pro loading until first screenshot capture,
5
+ * reducing initial bundle size and page load time.
6
+ */
7
+ type Html2CanvasFunc = (element: HTMLElement, options?: {
8
+ logging?: boolean;
9
+ useCORS?: boolean;
10
+ allowTaint?: boolean;
11
+ scale?: number;
12
+ width?: number;
13
+ height?: number;
14
+ windowWidth?: number;
15
+ windowHeight?: number;
16
+ scrollX?: number;
17
+ scrollY?: number;
18
+ }) => Promise<HTMLCanvasElement>;
19
+ /**
20
+ * Get html2canvas function, lazily loading it on first call.
21
+ * Subsequent calls return the same cached promise.
22
+ */
23
+ export declare function getHtml2Canvas(): Promise<Html2CanvasFunc>;
24
+ /**
25
+ * Check if html2canvas has been loaded
26
+ */
27
+ export declare function isHtml2CanvasLoaded(): boolean;
28
+ /**
29
+ * Preload html2canvas without waiting for result.
30
+ * Useful for warming up the cache before user interaction.
31
+ */
32
+ export declare function preloadHtml2Canvas(): void;
33
+ export {};
34
+ //# sourceMappingURL=lazyHtml2Canvas.d.ts.map
package/dist/lazy/lazyHtml2Canvas.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"lazyHtml2Canvas.d.ts","sourceRoot":"","sources":["../../src/lazy/lazyHtml2Canvas.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,KAAK,eAAe,GAAG,CACrB,OAAO,EAAE,WAAW,EACpB,OAAO,CAAC,EAAE;IACR,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KACE,OAAO,CAAC,iBAAiB,CAAC,CAAC;AAKhC;;;GAGG;AACH,wBAAsB,cAAc,IAAI,OAAO,CAAC,eAAe,CAAC,CAS/D;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,OAAO,CAE7C;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAIzC"}
package/dist/lazy/lazyHtml2Canvas.js ADDED
@@ -0,0 +1,38 @@
1
+ /**
2
+ * Lazy Loading for html2canvas
3
+ *
4
+ * Defers html2canvas-pro loading until first screenshot capture,
5
+ * reducing initial bundle size and page load time.
6
+ */
7
+ // Cached promise for the html2canvas module
8
+ let html2canvasPromise = null;
9
+ /**
10
+ * Get html2canvas function, lazily loading it on first call.
11
+ * Subsequent calls return the same cached promise.
12
+ */
13
+ export async function getHtml2Canvas() {
14
+ if (!html2canvasPromise) {
15
+ html2canvasPromise = import('html2canvas-pro').then((module) => {
16
+ // Handle ESM/CJS interop
17
+ const html2canvas = module.default ?? module;
18
+ return html2canvas;
19
+ });
20
+ }
21
+ return html2canvasPromise;
22
+ }
23
+ /**
24
+ * Check if html2canvas has been loaded
25
+ */
26
+ export function isHtml2CanvasLoaded() {
27
+ return html2canvasPromise !== null;
28
+ }
29
+ /**
30
+ * Preload html2canvas without waiting for result.
31
+ * Useful for warming up the cache before user interaction.
32
+ */
33
+ export function preloadHtml2Canvas() {
34
+ getHtml2Canvas().catch(() => {
35
+ // Silently ignore preload errors
36
+ });
37
+ }
38
+ //# sourceMappingURL=lazyHtml2Canvas.js.map
package/dist/lazy/lazyHtml2Canvas.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"lazyHtml2Canvas.js","sourceRoot":"","sources":["../../src/lazy/lazyHtml2Canvas.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAmBH,4CAA4C;AAC5C,IAAI,kBAAkB,GAAoC,IAAI,CAAC;AAE/D;;;GAGG;AACH,MAAM,CAAC,KAAK,UAAU,cAAc;IAClC,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACxB,kBAAkB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;YAC7D,yBAAyB;YACzB,MAAM,WAAW,GAAI,MAAkD,CAAC,OAAO,IAAI,MAAM,CAAC;YAC1F,OAAO,WAA8B,CAAC;QACxC,CAAC,CAAC,CAAC;IACL,CAAC;IACD,OAAO,kBAAkB,CAAC;AAC5B,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,mBAAmB;IACjC,OAAO,kBAAkB,KAAK,IAAI,CAAC;AACrC,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,kBAAkB;IAChC,cAAc,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE;QAC1B,iCAAiC;IACnC,CAAC,CAAC,CAAC;AACL,CAAC"}
package/dist/modules/index.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ /**
2
+ * Module exports for GlobalDevBar.
3
+ *
4
+ * Each module contains functions extracted from the monolithic GlobalDevBar class.
5
+ * Functions receive DevBarState (or specific parameters) rather than using `this`.
6
+ */
7
+ export type { DevBarState, PositionStyle } from './types.js';
8
+ export { setupKeyboardShortcuts } from './keyboard.js';
9
+ export { getResponsiveMetricVisibility, setupBreakpointDetection, setupPerformanceMonitoring, } from './performance.js';
10
+ export { render } from './rendering.js';
11
+ export { calculateCostEstimate, closeDesignReviewConfirm, copyPathToClipboard, handleDesignReview, handleDocumentOutline, handlePageSchema, handleSaveOutline, handleSaveSchema, handleScreenshot, proceedWithDesignReview, showDesignReviewConfirmation, } from './screenshot.js';
12
+ export { loadCompactMode, setThemeMode, setupTheme, } from './theme.js';
13
+ export { clearAllTooltips, } from './tooltips.js';
14
+ export { connectWebSocket, handleNotification, } from './websocket.js';
15
+ //# sourceMappingURL=index.d.ts.map
package/dist/modules/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/modules/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EACL,6BAA6B,EAC7B,wBAAwB,EACxB,0BAA0B,GAC3B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EACL,qBAAqB,EACrB,wBAAwB,EACxB,mBAAmB,EACnB,kBAAkB,EAClB,qBAAqB,EACrB,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,uBAAuB,EACvB,4BAA4B,GAC7B,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,eAAe,EACf,YAAY,EACZ,UAAU,GACX,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,gBAAgB,GACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,gBAAgB,CAAC"}
package/dist/modules/index.js ADDED
@@ -0,0 +1,14 @@
1
+ /**
2
+ * Module exports for GlobalDevBar.
3
+ *
4
+ * Each module contains functions extracted from the monolithic GlobalDevBar class.
5
+ * Functions receive DevBarState (or specific parameters) rather than using `this`.
6
+ */
7
+ export { setupKeyboardShortcuts } from './keyboard.js';
8
+ export { getResponsiveMetricVisibility, setupBreakpointDetection, setupPerformanceMonitoring, } from './performance.js';
9
+ export { render } from './rendering.js';
10
+ export { calculateCostEstimate, closeDesignReviewConfirm, copyPathToClipboard, handleDesignReview, handleDocumentOutline, handlePageSchema, handleSaveOutline, handleSaveSchema, handleScreenshot, proceedWithDesignReview, showDesignReviewConfirmation, } from './screenshot.js';
11
+ export { loadCompactMode, setThemeMode, setupTheme, } from './theme.js';
12
+ export { clearAllTooltips, } from './tooltips.js';
13
+ export { connectWebSocket, handleNotification, } from './websocket.js';
14
+ //# sourceMappingURL=index.js.map
package/dist/modules/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/modules/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EACL,6BAA6B,EAC7B,wBAAwB,EACxB,0BAA0B,GAC3B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EACL,qBAAqB,EACrB,wBAAwB,EACxB,mBAAmB,EACnB,kBAAkB,EAClB,qBAAqB,EACrB,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,uBAAuB,EACvB,4BAA4B,GAC7B,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,eAAe,EACf,YAAY,EACZ,UAAU,GACX,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,gBAAgB,GACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,gBAAgB,CAAC"}
package/dist/modules/keyboard.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ /**
2
+ * Keyboard shortcut handling for DevBar.
3
+ *
4
+ * Extracted from GlobalDevBar to reduce file size.
5
+ */
6
+ import type { DevBarState } from './types.js';
7
+ /**
8
+ * Setup keyboard shortcuts for the DevBar.
9
+ * - Escape: close modals/popovers
10
+ * - Cmd/Ctrl+Shift+M: toggle compact mode
11
+ * - Cmd/Ctrl+Shift+S: save screenshot
12
+ * - Cmd/Ctrl+Shift+C: copy screenshot to clipboard
13
+ */
14
+ export declare function setupKeyboardShortcuts(state: DevBarState): void;
15
+ //# sourceMappingURL=keyboard.d.ts.map
package/dist/modules/keyboard.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../src/modules/keyboard.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAgD/D"}
package/dist/modules/keyboard.js ADDED
@@ -0,0 +1,60 @@
1
+ /**
2
+ * Keyboard shortcut handling for DevBar.
3
+ *
4
+ * Extracted from GlobalDevBar to reduce file size.
5
+ */
6
+ /**
7
+ * Setup keyboard shortcuts for the DevBar.
8
+ * - Escape: close modals/popovers
9
+ * - Cmd/Ctrl+Shift+M: toggle compact mode
10
+ * - Cmd/Ctrl+Shift+S: save screenshot
11
+ * - Cmd/Ctrl+Shift+C: copy screenshot to clipboard
12
+ */
13
+ export function setupKeyboardShortcuts(state) {
14
+ state.keydownHandler = (e) => {
15
+ // Close modals/popovers on Escape
16
+ if (e.key === 'Escape') {
17
+ if (state.showSettingsPopover) {
18
+ state.showSettingsPopover = false;
19
+ state.render();
20
+ return;
21
+ }
22
+ if (state.consoleFilter ||
23
+ state.showOutlineModal ||
24
+ state.showSchemaModal ||
25
+ state.showDesignReviewConfirm) {
26
+ state.consoleFilter = null;
27
+ state.showOutlineModal = false;
28
+ state.showSchemaModal = false;
29
+ state.showDesignReviewConfirm = false;
30
+ state.render();
31
+ return;
32
+ }
33
+ }
34
+ if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
35
+ // Cmd/Ctrl+Shift+M: Toggle compact mode
36
+ if (e.key === 'M' || e.key === 'm') {
37
+ e.preventDefault();
38
+ state.toggleCompactMode();
39
+ return;
40
+ }
41
+ if (e.key === 'S' || e.key === 's') {
42
+ e.preventDefault();
43
+ if (state.sweetlinkConnected && !state.capturing) {
44
+ state.handleScreenshot(false);
45
+ }
46
+ }
47
+ else if (e.key === 'C' || e.key === 'c') {
48
+ const selection = window.getSelection();
49
+ if (!selection || selection.toString().length === 0) {
50
+ e.preventDefault();
51
+ if (!state.capturing) {
52
+ state.handleScreenshot(true);
53
+ }
54
+ }
55
+ }
56
+ }
57
+ };
58
+ window.addEventListener('keydown', state.keydownHandler);
59
+ }
60
+ //# sourceMappingURL=keyboard.js.map
package/dist/modules/keyboard.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"keyboard.js","sourceRoot":"","sources":["../../src/modules/keyboard.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH;;;;;;GAMG;AACH,MAAM,UAAU,sBAAsB,CAAC,KAAkB;IACvD,KAAK,CAAC,cAAc,GAAG,CAAC,CAAgB,EAAE,EAAE;QAC1C,kCAAkC;QAClC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YACvB,IAAI,KAAK,CAAC,mBAAmB,EAAE,CAAC;gBAC9B,KAAK,CAAC,mBAAmB,GAAG,KAAK,CAAC;gBAClC,KAAK,CAAC,MAAM,EAAE,CAAC;gBACf,OAAO;YACT,CAAC;YACD,IACE,KAAK,CAAC,aAAa;gBACnB,KAAK,CAAC,gBAAgB;gBACtB,KAAK,CAAC,eAAe;gBACrB,KAAK,CAAC,uBAAuB,EAC7B,CAAC;gBACD,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC;gBAC3B,KAAK,CAAC,gBAAgB,GAAG,KAAK,CAAC;gBAC/B,KAAK,CAAC,eAAe,GAAG,KAAK,CAAC;gBAC9B,KAAK,CAAC,uBAAuB,GAAG,KAAK,CAAC;gBACtC,KAAK,CAAC,MAAM,EAAE,CAAC;gBACf,OAAO;YACT,CAAC;QACH,CAAC;QAED,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;YAC3C,wCAAwC;YACxC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACnC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,iBAAiB,EAAE,CAAC;gBAC1B,OAAO;YACT,CAAC;YACD,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACnC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,KAAK,CAAC,kBAAkB,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;oBACjD,KAAK,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBAChC,CAAC;YACH,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBAC1C,MAAM,SAAS,GAAG,MAAM,CAAC,YAAY,EAAE,CAAC;gBACxC,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,QAAQ,EAAE,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;oBACpD,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;wBACrB,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;oBAC/B,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IACF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;AAC3D,CAAC"}
package/dist/modules/performance.d.ts ADDED
@@ -0,0 +1,26 @@
1
+ /**
2
+ * Performance monitoring: FCP, LCP, CLS, INP observers, breakpoint detection,
3
+ * and responsive metric visibility calculation.
4
+ *
5
+ * Extracted from GlobalDevBar to reduce file size.
6
+ */
7
+ import type { DevBarState } from './types.js';
8
+ /**
9
+ * Setup breakpoint detection by tracking window resize events.
10
+ */
11
+ export declare function setupBreakpointDetection(state: DevBarState): void;
12
+ /**
13
+ * Get which metrics should be visible vs hidden based on available space.
14
+ * Dynamically calculates based on window width, number of badges, and other elements.
15
+ * Returns metrics in display order (FCP, LCP, CLS, INP, pageSize).
16
+ * Hides metrics in reverse priority order (pageSize first, then INP, CLS, LCP, FCP).
17
+ */
18
+ export declare function getResponsiveMetricVisibility(state: DevBarState): {
19
+ visible: Array<'fcp' | 'lcp' | 'cls' | 'inp' | 'pageSize'>;
20
+ hidden: Array<'fcp' | 'lcp' | 'cls' | 'inp' | 'pageSize'>;
21
+ };
22
+ /**
23
+ * Setup performance monitoring with PerformanceObservers for FCP, LCP, CLS, INP.
24
+ */
25
+ export declare function setupPerformanceMonitoring(state: DevBarState): void;
26
+ //# sourceMappingURL=performance.d.ts.map
package/dist/modules/performance.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"performance.d.ts","sourceRoot":"","sources":["../../src/modules/performance.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CA0BjE;AAED;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,WAAW,GAAG;IACjE,OAAO,EAAE,KAAK,CAAC,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,CAAC,CAAC;IAC3D,MAAM,EAAE,KAAK,CAAC,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,CAAC,CAAC;CAC3D,CA6DA;AAED;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAuHnE"}
package/dist/modules/performance.js ADDED
@@ -0,0 +1,197 @@
1
+ /**
2
+ * Performance monitoring: FCP, LCP, CLS, INP observers, breakpoint detection,
3
+ * and responsive metric visibility calculation.
4
+ *
5
+ * Extracted from GlobalDevBar to reduce file size.
6
+ */
7
+ import { TAILWIND_BREAKPOINTS } from '../constants.js';
8
+ /**
9
+ * Setup breakpoint detection by tracking window resize events.
10
+ */
11
+ export function setupBreakpointDetection(state) {
12
+ const updateBreakpointInfo = () => {
13
+ const width = window.innerWidth;
14
+ const height = window.innerHeight;
15
+ // Determine breakpoint by checking thresholds in descending order
16
+ const breakpointOrder = [
17
+ '2xl',
18
+ 'xl',
19
+ 'lg',
20
+ 'md',
21
+ 'sm',
22
+ ];
23
+ const tailwindBreakpoint = breakpointOrder.find((bp) => width >= TAILWIND_BREAKPOINTS[bp].min) ?? 'base';
24
+ state.breakpointInfo = {
25
+ tailwindBreakpoint,
26
+ dimensions: `${width}x${height}`,
27
+ };
28
+ state.render();
29
+ };
30
+ updateBreakpointInfo();
31
+ state.resizeHandler = updateBreakpointInfo;
32
+ window.addEventListener('resize', state.resizeHandler);
33
+ }
34
+ /**
35
+ * Get which metrics should be visible vs hidden based on available space.
36
+ * Dynamically calculates based on window width, number of badges, and other elements.
37
+ * Returns metrics in display order (FCP, LCP, CLS, INP, pageSize).
38
+ * Hides metrics in reverse priority order (pageSize first, then INP, CLS, LCP, FCP).
39
+ */
40
+ export function getResponsiveMetricVisibility(state) {
41
+ // Display order (most important first)
42
+ const displayOrder = ['fcp', 'lcp', 'cls', 'inp', 'pageSize'];
43
+ // Approximate widths in pixels (measured from typical rendered output)
44
+ const METRIC_WIDTH = 95; // "FCP 1234MS |" including separator
45
+ const BADGE_WIDTH = 30; // Each console badge
46
+ const ACTION_BUTTON_WIDTH = 30; // Each action button
47
+ const BREAKPOINT_WIDTH = 100; // "MD - 1234x5678 |" (reduced estimate)
48
+ const CONNECTION_DOT_WIDTH = 16; // Connection indicator
49
+ const ELLIPSIS_WIDTH = 24; // "..." button
50
+ const CONTAINER_PADDING = 24; // Internal padding and gaps
51
+ // Count visible badges
52
+ const { errorCount, warningCount, infoCount } = state.getLogCounts();
53
+ const badgeCount = (errorCount > 0 ? 1 : 0) + (warningCount > 0 ? 1 : 0) + (infoCount > 0 ? 1 : 0);
54
+ // Count action buttons (screenshot, AI review, outline, schema, settings, collapse)
55
+ const { showScreenshot, position } = state.options;
56
+ const actionButtonCount = (showScreenshot ? 1 : 0) + 5; // 5 always-visible buttons
57
+ // Calculate available width for metrics based on position
58
+ // Centered: 16px margin each side = 32px total
59
+ // Left/right: 80px for Next.js bar + 16px margin = 96px total
60
+ const windowWidth = typeof window !== 'undefined' ? window.innerWidth : 1024;
61
+ const isCentered = position === 'bottom-center';
62
+ const margins = isCentered ? 32 : 96;
63
+ const containerWidth = windowWidth - margins;
64
+ // At small screens (<640px), action buttons wrap to second row and don't take horizontal space
65
+ const buttonsWrap = windowWidth < 640;
66
+ const buttonWidth = buttonsWrap ? 0 : actionButtonCount * ACTION_BUTTON_WIDTH;
67
+ const fixedWidth = CONNECTION_DOT_WIDTH +
68
+ BREAKPOINT_WIDTH +
69
+ badgeCount * BADGE_WIDTH +
70
+ buttonWidth +
71
+ CONTAINER_PADDING;
72
+ const availableForMetrics = containerWidth - fixedWidth;
73
+ // Determine how many metrics fit (reserve space for ellipsis if hiding any)
74
+ let maxMetrics = Math.floor(availableForMetrics / METRIC_WIDTH);
75
+ // If we can't show all metrics, reserve space for ellipsis button
76
+ if (maxMetrics < displayOrder.length && maxMetrics > 0) {
77
+ maxMetrics = Math.floor((availableForMetrics - ELLIPSIS_WIDTH) / METRIC_WIDTH);
78
+ }
79
+ // Clamp to valid range
80
+ maxMetrics = Math.max(0, Math.min(maxMetrics, displayOrder.length));
81
+ // Split into visible and hidden (visible gets the first N in display order)
82
+ const visible = displayOrder.slice(0, maxMetrics);
83
+ const hidden = displayOrder.slice(maxMetrics);
84
+ return { visible, hidden };
85
+ }
86
+ /**
87
+ * Setup performance monitoring with PerformanceObservers for FCP, LCP, CLS, INP.
88
+ */
89
+ export function setupPerformanceMonitoring(state) {
90
+ const updatePerfStats = () => {
91
+ // FCP
92
+ const paintEntries = performance.getEntriesByType('paint');
93
+ const fcpEntry = paintEntries.find((entry) => entry.name === 'first-contentful-paint');
94
+ const fcp = fcpEntry ? `${Math.round(fcpEntry.startTime)}ms` : '-';
95
+ // LCP (from cached value, updated by observer)
96
+ const lcp = state.lcpValue !== null ? `${Math.round(state.lcpValue)}ms` : '-';
97
+ // CLS (cumulative layout shift) - 0 is a valid value meaning no layout shifts
98
+ const cls = state.clsValue.toFixed(3);
99
+ // INP (Interaction to Next Paint)
100
+ const inp = state.inpValue > 0 ? `${Math.round(state.inpValue)}ms` : '-';
101
+ // Total Resource Size
102
+ const resources = performance.getEntriesByType('resource');
103
+ let totalBytes = 0;
104
+ const navEntry = performance.getEntriesByType('navigation')[0];
105
+ if (navEntry) {
106
+ totalBytes += navEntry.transferSize || 0;
107
+ }
108
+ resources.forEach((entry) => {
109
+ const resourceEntry = entry;
110
+ totalBytes += resourceEntry.transferSize || 0;
111
+ });
112
+ const totalSize = totalBytes > 1024 * 1024
113
+ ? `${(totalBytes / (1024 * 1024)).toFixed(1)} MB`
114
+ : `${Math.round(totalBytes / 1024)} KB`;
115
+ state.perfStats = { fcp, lcp, cls, inp, totalSize };
116
+ state.debug.perf('Performance stats updated', state.perfStats);
117
+ state.render();
118
+ };
119
+ if (document.readyState === 'complete') {
120
+ setTimeout(updatePerfStats, 100);
121
+ }
122
+ else {
123
+ window.addEventListener('load', () => setTimeout(updatePerfStats, 100));
124
+ }
125
+ // FCP Observer
126
+ try {
127
+ state.fcpObserver = new PerformanceObserver((list) => {
128
+ const entries = list.getEntries();
129
+ entries.forEach((entry) => {
130
+ if (entry.name === 'first-contentful-paint') {
131
+ updatePerfStats();
132
+ }
133
+ });
134
+ });
135
+ state.fcpObserver.observe({ type: 'paint', buffered: true });
136
+ }
137
+ catch (e) {
138
+ console.warn('[GlobalDevBar] FCP PerformanceObserver not supported', e);
139
+ }
140
+ // LCP Observer
141
+ try {
142
+ state.lcpObserver = new PerformanceObserver((list) => {
143
+ const entries = list.getEntries();
144
+ const lastEntry = entries[entries.length - 1];
145
+ if (lastEntry) {
146
+ state.lcpValue = lastEntry.startTime;
147
+ state.debug.perf('LCP updated', { lcp: state.lcpValue });
148
+ updatePerfStats();
149
+ }
150
+ });
151
+ state.lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true });
152
+ }
153
+ catch (e) {
154
+ console.warn('[GlobalDevBar] LCP PerformanceObserver not supported', e);
155
+ }
156
+ // CLS Observer (Cumulative Layout Shift)
157
+ try {
158
+ state.clsObserver = new PerformanceObserver((list) => {
159
+ for (const entry of list.getEntries()) {
160
+ // Only count layout shifts without recent user input
161
+ const layoutShift = entry;
162
+ if (!layoutShift.hadRecentInput && layoutShift.value) {
163
+ state.clsValue += layoutShift.value;
164
+ state.debug.perf('CLS updated', { cls: state.clsValue });
165
+ updatePerfStats();
166
+ }
167
+ }
168
+ });
169
+ state.clsObserver.observe({ type: 'layout-shift', buffered: true });
170
+ }
171
+ catch (e) {
172
+ console.warn('[GlobalDevBar] CLS PerformanceObserver not supported', e);
173
+ }
174
+ // INP Observer (Interaction to Next Paint)
175
+ try {
176
+ state.inpObserver = new PerformanceObserver((list) => {
177
+ for (const entry of list.getEntries()) {
178
+ const eventEntry = entry;
179
+ if (eventEntry.duration && eventEntry.duration > state.inpValue) {
180
+ state.inpValue = eventEntry.duration;
181
+ state.debug.perf('INP updated', { inp: state.inpValue });
182
+ updatePerfStats();
183
+ }
184
+ }
185
+ });
186
+ // durationThreshold filters out very short interactions
187
+ state.inpObserver.observe({
188
+ type: 'event',
189
+ buffered: true,
190
+ durationThreshold: 16,
191
+ });
192
+ }
193
+ catch (e) {
194
+ console.warn('[GlobalDevBar] INP PerformanceObserver not supported', e);
195
+ }
196
+ }
197
+ //# sourceMappingURL=performance.js.map