@ytspar/devbar 1.0.0-canary.c37df82 → 1.0.0-canary.c511f13

package/dist/index.js

@@ -1,13 +1,25 @@
 // DevBar - Development toolbar and utilities
 // Pure vanilla JavaScript - no framework dependencies
+// Accessibility audit utilities
+export { clearA11yCache, formatViolation, getBadgeColor, getCachedResult, getImpactColor, getViolationCounts, groupViolationsByImpact, isAxeLoaded, preloadAxe, runA11yAudit, } from './accessibility.js';
+// Re-export constants and theme utilities
+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';
+// Debug utilities
+export { DebugLogger, normalizeDebugConfig } from './debug.js';
+// Early console capture script for injection
+export { EARLY_CONSOLE_CAPTURE_SCRIPT } from './earlyConsoleCapture.js';
 // Main vanilla JS devbar
-export { GlobalDevBar, initGlobalDevBar, getGlobalDevBar, destroyGlobalDevBar, earlyConsoleCapture, } from './GlobalDevBar.js';
-// Re-export utilities for external use
-export { formatArg, formatArgs, canvasToDataUrl, prepareForCapture, delay, copyCanvasToClipboard, } from './utils.js';
+export { destroyGlobalDevBar, earlyConsoleCapture, GlobalDevBar, getGlobalDevBar, initGlobalDevBar, } from './GlobalDevBar.js';
+// Lazy loading utilities
+export { getHtml2Canvas, isHtml2CanvasLoaded, preloadHtml2Canvas } from './lazy/index.js';
+// Network monitoring utilities
+export { formatBytes as formatNetworkBytes, formatDuration, getInitiatorColor, NetworkMonitor, } from './network.js';
 // Re-export outline/schema functions
 export { extractDocumentOutline, outlineToMarkdown } from './outline.js';
+// Configuration presets
+export { initDebug, initFull, initMinimal, initPerformance, initResponsive, PRESET_DEBUG, PRESET_FULL, PRESET_MINIMAL, PRESET_PERFORMANCE, PRESET_RESPONSIVE, } from './presets.js';
 export { extractPageSchema, schemaToMarkdown } from './schema.js';
-// Re-export constants and theme utilities
-export { TAILWIND_BREAKPOINTS, BUTTON_COLORS, CATEGORY_COLORS, DEVBAR_THEME, COLORS, FONT_MONO, generateThemeCSSVars, injectThemeCSS, generateBreakpointCSS, } from './constants.js';
-// Early console capture script for injection
-export { EARLY_CONSOLE_CAPTURE_SCRIPT } from './earlyConsoleCapture.js';
+// Storage inspection utilities
+export { beautifyJson, clearLocalStorage, clearSessionStorage, deleteCookie, deleteLocalStorageItem, deleteSessionStorageItem, formatStorageSummary, getCookies, getLocalStorage, getSessionStorage, getStorageData, setLocalStorageItem, setSessionStorageItem, } from './storage.js';
+// Re-export utilities for external use
+export { canvasToDataUrl, copyCanvasToClipboard, delay, formatArg, formatArgs, prepareForCapture, } from './utils.js';

package/dist/lazy/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Lazy Loading Utilities
+ *
+ * Re-exports all lazy loading modules.
+ */
+export { getHtml2Canvas, isHtml2CanvasLoaded, preloadHtml2Canvas } from './lazyHtml2Canvas.js';

package/dist/lazy/index.js

@@ -0,0 +1,6 @@
+/**
+ * Lazy Loading Utilities
+ *
+ * Re-exports all lazy loading modules.
+ */
+export { getHtml2Canvas, isHtml2CanvasLoaded, preloadHtml2Canvas } from './lazyHtml2Canvas.js';

package/dist/lazy/lazyHtml2Canvas.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Lazy Loading for html2canvas
+ *
+ * Defers html2canvas-pro loading until first screenshot capture,
+ * reducing initial bundle size and page load time.
+ */
+type Html2CanvasFunc = (element: HTMLElement, options?: {
+    logging?: boolean;
+    useCORS?: boolean;
+    allowTaint?: boolean;
+    scale?: number;
+    width?: number;
+    windowWidth?: number;
+}) => Promise<HTMLCanvasElement>;
+/**
+ * Get html2canvas function, lazily loading it on first call.
+ * Subsequent calls return the same cached promise.
+ */
+export declare function getHtml2Canvas(): Promise<Html2CanvasFunc>;
+/**
+ * Check if html2canvas has been loaded
+ */
+export declare function isHtml2CanvasLoaded(): boolean;
+/**
+ * Preload html2canvas without waiting for result.
+ * Useful for warming up the cache before user interaction.
+ */
+export declare function preloadHtml2Canvas(): void;
+export {};

package/dist/lazy/lazyHtml2Canvas.js

@@ -0,0 +1,37 @@
+/**
+ * Lazy Loading for html2canvas
+ *
+ * Defers html2canvas-pro loading until first screenshot capture,
+ * reducing initial bundle size and page load time.
+ */
+// Cached promise for the html2canvas module
+let html2canvasPromise = null;
+/**
+ * Get html2canvas function, lazily loading it on first call.
+ * Subsequent calls return the same cached promise.
+ */
+export async function getHtml2Canvas() {
+    if (!html2canvasPromise) {
+        html2canvasPromise = import('html2canvas-pro').then((module) => {
+            // Handle ESM/CJS interop
+            const html2canvas = module.default ?? module;
+            return html2canvas;
+        });
+    }
+    return html2canvasPromise;
+}
+/**
+ * Check if html2canvas has been loaded
+ */
+export function isHtml2CanvasLoaded() {
+    return html2canvasPromise !== null;
+}
+/**
+ * Preload html2canvas without waiting for result.
+ * Useful for warming up the cache before user interaction.
+ */
+export function preloadHtml2Canvas() {
+    getHtml2Canvas().catch(() => {
+        // Silently ignore preload errors
+    });
+}

package/dist/network.d.ts

@@ -0,0 +1,92 @@
+/**
+ * Network Activity Monitor
+ *
+ * Tracks network requests using PerformanceObserver and fetch interception.
+ */
+/**
+ * Network request entry
+ */
+export interface NetworkEntry {
+    url: string;
+    name: string;
+    initiatorType: string;
+    duration: number;
+    transferSize: number;
+    encodedBodySize: number;
+    decodedBodySize: number;
+    startTime: number;
+    responseEnd: number;
+    method?: string;
+    status?: number;
+    statusText?: string;
+}
+/**
+ * Network monitor state
+ */
+export interface NetworkState {
+    entries: NetworkEntry[];
+    totalRequests: number;
+    totalSize: number;
+    pendingCount: number;
+}
+/**
+ * Network activity monitor using PerformanceObserver
+ */
+export declare class NetworkMonitor {
+    private entries;
+    private observer;
+    private listeners;
+    private maxEntries;
+    /**
+     * Start monitoring network activity
+     */
+    start(): void;
+    /**
+     * Stop monitoring network activity
+     */
+    stop(): void;
+    /**
+     * Add a new entry from PerformanceResourceTiming
+     */
+    private addEntry;
+    /**
+     * Extract resource name from URL
+     */
+    private getResourceName;
+    /**
+     * Get current network state
+     */
+    getState(): NetworkState;
+    /**
+     * Get entries filtered by type
+     */
+    getEntriesByType(type: string): NetworkEntry[];
+    /**
+     * Get entries filtered by search query
+     */
+    search(query: string): NetworkEntry[];
+    /**
+     * Clear all entries
+     */
+    clear(): void;
+    /**
+     * Subscribe to state changes
+     */
+    subscribe(listener: (state: NetworkState) => void): () => void;
+    /**
+     * Notify all listeners of state change
+     */
+    private notifyListeners;
+}
+/**
+ * Format bytes to human-readable string
+ */
+export declare function formatBytes(bytes: number): string;
+/**
+ * Format duration to human-readable string
+ */
+export declare function formatDuration(ms: number): string;
+/**
+ * Get color for initiator type
+ */
+export declare function getInitiatorColor(type: string): string;

package/dist/network.js

@@ -0,0 +1,176 @@
+/**
+ * Network Activity Monitor
+ *
+ * Tracks network requests using PerformanceObserver and fetch interception.
+ */
+/**
+ * Network activity monitor using PerformanceObserver
+ */
+export class NetworkMonitor {
+    constructor() {
+        this.entries = [];
+        this.observer = null;
+        this.listeners = new Set();
+        this.maxEntries = 200;
+    }
+    /**
+     * Start monitoring network activity
+     */
+    start() {
+        if (typeof PerformanceObserver === 'undefined') {
+            console.warn('[NetworkMonitor] PerformanceObserver not supported');
+            return;
+        }
+        // Get already loaded resources
+        const existingResources = performance.getEntriesByType('resource');
+        for (const entry of existingResources) {
+            this.addEntry(entry);
+        }
+        // Watch for new resources
+        try {
+            this.observer = new PerformanceObserver((list) => {
+                for (const entry of list.getEntries()) {
+                    this.addEntry(entry);
+                }
+                this.notifyListeners();
+            });
+            this.observer.observe({ type: 'resource', buffered: true });
+        }
+        catch (e) {
+            console.warn('[NetworkMonitor] Failed to start observer', e);
+        }
+    }
+    /**
+     * Stop monitoring network activity
+     */
+    stop() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+    }
+    /**
+     * Add a new entry from PerformanceResourceTiming
+     */
+    addEntry(timing) {
+        const entry = {
+            url: timing.name,
+            name: this.getResourceName(timing.name),
+            initiatorType: timing.initiatorType,
+            duration: Math.round(timing.duration),
+            transferSize: timing.transferSize,
+            encodedBodySize: timing.encodedBodySize,
+            decodedBodySize: timing.decodedBodySize,
+            startTime: Math.round(timing.startTime),
+            responseEnd: Math.round(timing.responseEnd),
+        };
+        this.entries.push(entry);
+        // Trim to max entries
+        if (this.entries.length > this.maxEntries) {
+            this.entries = this.entries.slice(-this.maxEntries);
+        }
+    }
+    /**
+     * Extract resource name from URL
+     */
+    getResourceName(url) {
+        try {
+            const urlObj = new URL(url);
+            const pathname = urlObj.pathname;
+            const parts = pathname.split('/').filter(Boolean);
+            return parts.length > 0 ? parts[parts.length - 1] : urlObj.hostname;
+        }
+        catch {
+            return url.slice(0, 50);
+        }
+    }
+    /**
+     * Get current network state
+     */
+    getState() {
+        let totalSize = 0;
+        for (const entry of this.entries) {
+            totalSize += entry.transferSize || 0;
+        }
+        return {
+            entries: [...this.entries],
+            totalRequests: this.entries.length,
+            totalSize,
+            pendingCount: 0, // Could track with fetch interception
+        };
+    }
+    /**
+     * Get entries filtered by type
+     */
+    getEntriesByType(type) {
+        return this.entries.filter((e) => e.initiatorType === type);
+    }
+    /**
+     * Get entries filtered by search query
+     */
+    search(query) {
+        const lowerQuery = query.toLowerCase();
+        return this.entries.filter((e) => e.url.toLowerCase().includes(lowerQuery) ||
+            e.name.toLowerCase().includes(lowerQuery) ||
+            e.initiatorType.toLowerCase().includes(lowerQuery));
+    }
+    /**
+     * Clear all entries
+     */
+    clear() {
+        this.entries = [];
+        this.notifyListeners();
+    }
+    /**
+     * Subscribe to state changes
+     */
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+    /**
+     * Notify all listeners of state change
+     */
+    notifyListeners() {
+        const state = this.getState();
+        for (const listener of this.listeners) {
+            listener(state);
+        }
+    }
+}
+/**
+ * Format bytes to human-readable string
+ */
+export function formatBytes(bytes) {
+    if (bytes === 0)
+        return '0 B';
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+/**
+ * Format duration to human-readable string
+ */
+export function formatDuration(ms) {
+    if (ms < 1000)
+        return `${Math.round(ms)}ms`;
+    return `${(ms / 1000).toFixed(2)}s`;
+}
+/**
+ * Get color for initiator type
+ */
+export function getInitiatorColor(type) {
+    const colors = {
+        script: '#f59e0b', // amber
+        link: '#3b82f6', // blue
+        css: '#a855f7', // purple
+        fetch: '#10b981', // emerald
+        xmlhttprequest: '#10b981', // emerald
+        img: '#ec4899', // pink
+        iframe: '#06b6d4', // cyan
+        other: '#6b7280', // gray
+    };
+    return colors[type] || colors.other;
+}

package/dist/outline.js

@@ -7,14 +7,39 @@
 // Semantic Element Sets
 // ============================================================================
 const semanticElements = new Set([
-    'article', 'aside', 'nav', 'section',
-    'main', 'body',
-    'header', 'footer', 'figure', 'figcaption',
-    'details', 'summary', 'dialog', 'address', 'hgroup',
-    'form', 'fieldset', 'legend',
-    'ul', 'ol', 'dl', 'menu',
-    'table', 'thead', 'tbody', 'tfoot', 'caption',
-    'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
+    'article',
+    'aside',
+    'nav',
+    'section',
+    'main',
+    'body',
+    'header',
+    'footer',
+    'figure',
+    'figcaption',
+    'details',
+    'summary',
+    'dialog',
+    'address',
+    'hgroup',
+    'form',
+    'fieldset',
+    'legend',
+    'ul',
+    'ol',
+    'dl',
+    'menu',
+    'table',
+    'thead',
+    'tbody',
+    'tfoot',
+    'caption',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
 ]);
 const headingElements = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
 // ============================================================================
@@ -138,7 +163,15 @@ function extractFromElement(root) {
         if (semanticElements.has(tagName)) {
             const text = getElementText(child, tagName);
             const isHeading = headingElements.has(tagName);
-            const isLandmark = ['main', 'nav', 'header', 'footer', 'article', 'section', 'aside'].includes(tagName);
+            const isLandmark = [
+                'main',
+                'nav',
+                'header',
+                'footer',
+                'article',
+                'section',
+                'aside',
+            ].includes(tagName);
             const hasText = text.length > 0;
             if (isHeading || isLandmark || hasText) {
                 const level = isHeading ? parseInt(tagName[1], 10) : 0;
@@ -148,7 +181,7 @@ function extractFromElement(root) {
                     text: text || `<${tagName}>`,
                     id: child.id || undefined,
                     children: [],
-                    category: getSemanticCategory(tagName)
+                    category: getSemanticCategory(tagName),
                 };
                 if (!isHeading) {
                     node.children = extractFromElement(child);

package/dist/presets.d.ts

@@ -0,0 +1,57 @@
+/**
+ * DevBar Configuration Presets
+ *
+ * Pre-configured options for common DevBar use cases.
+ */
+import { type GlobalDevBar } from './GlobalDevBar.js';
+import type { GlobalDevBarOptions } from './types.js';
+/**
+ * Minimal preset - shows only essential features
+ * Good for production debugging with minimal visual footprint
+ */
+export declare const PRESET_MINIMAL: GlobalDevBarOptions;
+/**
+ * Full preset - shows all features
+ * Good for comprehensive development monitoring
+ */
+export declare const PRESET_FULL: GlobalDevBarOptions;
+/**
+ * Performance preset - focuses on Core Web Vitals
+ * Good for performance optimization work
+ */
+export declare const PRESET_PERFORMANCE: GlobalDevBarOptions;
+/**
+ * Responsive preset - focuses on responsive design
+ * Good for layout and breakpoint work
+ */
+export declare const PRESET_RESPONSIVE: GlobalDevBarOptions;
+/**
+ * Debug preset - full features with debug logging
+ * Good for troubleshooting DevBar itself
+ */
+export declare const PRESET_DEBUG: GlobalDevBarOptions;
+/**
+ * Initialize DevBar with minimal preset
+ * @param options Additional options to merge with preset
+ */
+export declare function initMinimal(options?: Partial<GlobalDevBarOptions>): GlobalDevBar;
+/**
+ * Initialize DevBar with full preset
+ * @param options Additional options to merge with preset
+ */
+export declare function initFull(options?: Partial<GlobalDevBarOptions>): GlobalDevBar;
+/**
+ * Initialize DevBar with performance preset
+ * @param options Additional options to merge with preset
+ */
+export declare function initPerformance(options?: Partial<GlobalDevBarOptions>): GlobalDevBar;
+/**
+ * Initialize DevBar with responsive preset
+ * @param options Additional options to merge with preset
+ */
+export declare function initResponsive(options?: Partial<GlobalDevBarOptions>): GlobalDevBar;
+/**
+ * Initialize DevBar with debug preset
+ * @param options Additional options to merge with preset
+ */
+export declare function initDebug(options?: Partial<GlobalDevBarOptions>): GlobalDevBar;

package/dist/presets.js

@@ -0,0 +1,133 @@
+/**
+ * DevBar Configuration Presets
+ *
+ * Pre-configured options for common DevBar use cases.
+ */
+import { initGlobalDevBar } from './GlobalDevBar.js';
+// ============================================================================
+// Preset Configurations
+// ============================================================================
+/**
+ * Minimal preset - shows only essential features
+ * Good for production debugging with minimal visual footprint
+ */
+export const PRESET_MINIMAL = {
+    showMetrics: {
+        breakpoint: false,
+        fcp: false,
+        lcp: false,
+        cls: false,
+        inp: false,
+        pageSize: false,
+    },
+    showScreenshot: false,
+    showConsoleBadges: true,
+    showTooltips: false,
+};
+/**
+ * Full preset - shows all features
+ * Good for comprehensive development monitoring
+ */
+export const PRESET_FULL = {
+    showMetrics: {
+        breakpoint: true,
+        fcp: true,
+        lcp: true,
+        cls: true,
+        inp: true,
+        pageSize: true,
+    },
+    showScreenshot: true,
+    showConsoleBadges: true,
+    showTooltips: true,
+};
+/**
+ * Performance preset - focuses on Core Web Vitals
+ * Good for performance optimization work
+ */
+export const PRESET_PERFORMANCE = {
+    showMetrics: {
+        breakpoint: false,
+        fcp: true,
+        lcp: true,
+        cls: true,
+        inp: true,
+        pageSize: true,
+    },
+    showScreenshot: false,
+    showConsoleBadges: false,
+    showTooltips: true,
+};
+/**
+ * Responsive preset - focuses on responsive design
+ * Good for layout and breakpoint work
+ */
+export const PRESET_RESPONSIVE = {
+    showMetrics: {
+        breakpoint: true,
+        fcp: false,
+        lcp: false,
+        cls: false,
+        inp: false,
+        pageSize: false,
+    },
+    showScreenshot: true,
+    showConsoleBadges: false,
+    showTooltips: true,
+};
+/**
+ * Debug preset - full features with debug logging
+ * Good for troubleshooting DevBar itself
+ */
+export const PRESET_DEBUG = {
+    showMetrics: {
+        breakpoint: true,
+        fcp: true,
+        lcp: true,
+        cls: true,
+        inp: true,
+        pageSize: true,
+    },
+    showScreenshot: true,
+    showConsoleBadges: true,
+    showTooltips: true,
+    debug: true,
+};
+// ============================================================================
+// Convenience Initialization Functions
+// ============================================================================
+/**
+ * Initialize DevBar with minimal preset
+ * @param options Additional options to merge with preset
+ */
+export function initMinimal(options) {
+    return initGlobalDevBar({ ...PRESET_MINIMAL, ...options });
+}
+/**
+ * Initialize DevBar with full preset
+ * @param options Additional options to merge with preset
+ */
+export function initFull(options) {
+    return initGlobalDevBar({ ...PRESET_FULL, ...options });
+}
+/**
+ * Initialize DevBar with performance preset
+ * @param options Additional options to merge with preset
+ */
+export function initPerformance(options) {
+    return initGlobalDevBar({ ...PRESET_PERFORMANCE, ...options });
+}
+/**
+ * Initialize DevBar with responsive preset
+ * @param options Additional options to merge with preset
+ */
+export function initResponsive(options) {
+    return initGlobalDevBar({ ...PRESET_RESPONSIVE, ...options });
+}
+/**
+ * Initialize DevBar with debug preset
+ * @param options Additional options to merge with preset
+ */
+export function initDebug(options) {
+    return initGlobalDevBar({ ...PRESET_DEBUG, ...options });
+}

package/dist/schema.js

@@ -15,7 +15,7 @@ export function extractPageSchema() {
         metaTags: {},
         openGraph: {},
         twitter: {},
-        microdata: []
+        microdata: [],
     };
     // Extract JSON-LD
     const jsonLdScripts = document.querySelectorAll('script[type="application/ld+json"]');
@@ -52,7 +52,8 @@ export function extractPageSchema() {
             const propName = prop.getAttribute('itemprop') || '';
             const propValue = prop.getAttribute('content') ||
                 prop.getAttribute('href') ||
-                prop.textContent?.trim().slice(0, 200) || '';
+                prop.textContent?.trim().slice(0, 200) ||
+                '';
             if (propName)
                 props[propName] = propValue;
         });
@@ -71,7 +72,7 @@ export function schemaToMarkdown(schema) {
         md += '## JSON-LD\n\n';
         schema.jsonLd.forEach((item, i) => {
             md += `### Schema ${i + 1}\n\n`;
-            md += '```json\n' + JSON.stringify(item, null, 2) + '\n```\n\n';
+            md += `\`\`\`json\n${JSON.stringify(item, null, 2)}\n\`\`\`\n\n`;
         });
     }
     if (Object.keys(schema.openGraph).length > 0) {