npm - @ytspar/devbar - Versions diffs - 0.0.1 → 1.0.0-canary.19cb05c - Mend

@ytspar/devbar 0.0.1 → 1.0.0-canary.19cb05c

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 (43) hide show

package/LICENSE +21 -0
package/README.md +173 -28
package/dist/GlobalDevBar.d.ts +318 -0
package/dist/GlobalDevBar.js +3281 -0
package/dist/accessibility.d.ts +84 -0
package/dist/accessibility.js +155 -0
package/dist/constants.d.ts +301 -0
package/dist/constants.js +641 -0
package/dist/debug.d.ts +39 -0
package/dist/debug.js +92 -0
package/dist/earlyConsoleCapture.d.ts +34 -0
package/dist/earlyConsoleCapture.js +77 -0
package/dist/index.d.ts +13 -0
package/dist/index.js +25 -0
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.d.ts +14 -0
package/dist/outline.js +248 -0
package/dist/presets.d.ts +57 -0
package/dist/presets.js +133 -0
package/dist/schema.d.ts +14 -0
package/dist/schema.js +114 -0
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 +75 -0
package/dist/types.js +8 -0
package/dist/ui/buttons.d.ts +21 -0
package/dist/ui/buttons.js +55 -0
package/dist/ui/icons.d.ts +13 -0
package/dist/ui/icons.js +25 -0
package/dist/ui/index.d.ts +8 -0
package/dist/ui/index.js +8 -0
package/dist/ui/modals.d.ts +44 -0
package/dist/ui/modals.js +190 -0
package/dist/utils.d.ts +11 -0
package/dist/utils.js +13 -0
package/package.json +58 -6

package/dist/debug.js ADDED Viewed

@@ -0,0 +1,92 @@
+/**
+ * DevBar Debug Utilities
+ *
+ * Debug logging system for DevBar lifecycle, state, and events.
+ */
+/**
+ * Normalize debug option to DebugConfig
+ */
+export function normalizeDebugConfig(debug) {
+    if (!debug) {
+        return { enabled: false };
+    }
+    if (debug === true) {
+        return {
+            enabled: true,
+            logLifecycle: true,
+            logStateChanges: true,
+            logWebSocket: true,
+            logPerformance: true,
+        };
+    }
+    return {
+        enabled: debug.enabled,
+        logLifecycle: debug.logLifecycle ?? true,
+        logStateChanges: debug.logStateChanges ?? true,
+        logWebSocket: debug.logWebSocket ?? true,
+        logPerformance: debug.logPerformance ?? true,
+    };
+}
+/**
+ * Debug logger for DevBar
+ */
+export class DebugLogger {
+    constructor(config) {
+        this.prefix = '[DevBar]';
+        this.config = config;
+    }
+    /**
+     * Update debug configuration
+     */
+    setConfig(config) {
+        this.config = config;
+    }
+    /**
+     * Log lifecycle events (init, destroy, etc.)
+     */
+    lifecycle(message, data) {
+        if (this.config.enabled && this.config.logLifecycle) {
+            this.log('lifecycle', message, data);
+        }
+    }
+    /**
+     * Log state changes (collapse, modal open/close, etc.)
+     */
+    state(message, data) {
+        if (this.config.enabled && this.config.logStateChanges) {
+            this.log('state', message, data);
+        }
+    }
+    /**
+     * Log WebSocket events (connect, disconnect, messages)
+     */
+    ws(message, data) {
+        if (this.config.enabled && this.config.logWebSocket) {
+            this.log('ws', message, data);
+        }
+    }
+    /**
+     * Log performance measurements (FCP, LCP, CLS, INP)
+     */
+    perf(message, data) {
+        if (this.config.enabled && this.config.logPerformance) {
+            this.log('perf', message, data);
+        }
+    }
+    log(category, message, data) {
+        const timestamp = new Date().toISOString().split('T')[1].slice(0, -1);
+        const categoryColors = {
+            lifecycle: '#10b981', // emerald
+            state: '#3b82f6', // blue
+            ws: '#a855f7', // purple
+            perf: '#f59e0b', // amber
+        };
+        const color = categoryColors[category] || '#6b7280';
+        if (data !== undefined) {
+            console.log(`%c${this.prefix}%c [${category}] %c${timestamp}%c ${message}`, 'color: #10b981; font-weight: bold', `color: ${color}`, 'color: #6b7280', 'color: inherit', data);
+        }
+        else {
+            console.log(`%c${this.prefix}%c [${category}] %c${timestamp}%c ${message}`, 'color: #10b981; font-weight: bold', `color: ${color}`, 'color: #6b7280', 'color: inherit');
+        }
+    }
+}

package/dist/earlyConsoleCapture.d.ts ADDED Viewed

@@ -0,0 +1,34 @@
+/**
+ * Early Console Capture Script
+ *
+ * This script captures console logs BEFORE React hydrates, which is critical for
+ * catching hydration errors and other early-stage issues. It must be injected
+ * into the HTML <head> as an inline script.
+ *
+ * The script creates `window.__sweetlinkEarlyLogs` which GlobalDevBar will pick up
+ * when it mounts, merging these early logs with subsequent console output.
+ *
+ * @example
+ * ```tsx
+ * // In your Document component (Remix) or _document.tsx (Next.js)
+ * import { EARLY_CONSOLE_CAPTURE_SCRIPT } from '@ytspar/devbar';
+ *
+ * <head>
+ *   <script dangerouslySetInnerHTML={{ __html: EARLY_CONSOLE_CAPTURE_SCRIPT }} />
+ * </head>
+ * ```
+ */
+export declare const EARLY_CONSOLE_CAPTURE_SCRIPT = "\n(function() {\n  if (window.__sweetlinkEarlyLogs) return;\n  window.__sweetlinkEarlyLogs = [];\n  var orig = {\n    log: console.log,\n    error: console.error,\n    warn: console.warn,\n    info: console.info\n  };\n  function formatArg(a) {\n    if (a instanceof Error) {\n      return a.name + ': ' + a.message + (a.stack ? '\\n' + a.stack : '');\n    }\n    if (typeof a === 'object' && a !== null) {\n      try {\n        return JSON.stringify(a, function(key, val) {\n          if (val instanceof Error) {\n            return val.name + ': ' + val.message;\n          }\n          return val;\n        });\n      } catch(e) {\n        return String(a);\n      }\n    }\n    return String(a);\n  }\n  function capture(level, args) {\n    window.__sweetlinkEarlyLogs.push({\n      level: level,\n      message: Array.from(args).map(formatArg).join(' '),\n      timestamp: new Date().toISOString()\n    });\n  }\n  console.log = function() { capture('log', arguments); orig.log.apply(console, arguments); };\n  console.error = function() { capture('error', arguments); orig.error.apply(console, arguments); };\n  console.warn = function() { capture('warn', arguments); orig.warn.apply(console, arguments); };\n  console.info = function() { capture('info', arguments); orig.info.apply(console, arguments); };\n  // Capture uncaught errors\n  window.addEventListener('error', function(e) {\n    window.__sweetlinkEarlyLogs.push({\n      level: 'error',\n      message: 'Uncaught ' + (e.error ? formatArg(e.error) : e.message) + ' at ' + e.filename + ':' + e.lineno + ':' + e.colno,\n      timestamp: new Date().toISOString()\n    });\n  });\n  // Capture unhandled promise rejections\n  window.addEventListener('unhandledrejection', function(e) {\n    window.__sweetlinkEarlyLogs.push({\n      level: 'error',\n      message: 'Unhandled Promise Rejection: ' + formatArg(e.reason),\n      timestamp: new Date().toISOString()\n    });\n  });\n})();\n";
+/**
+ * Type declaration for the window object with early logs
+ * Use this to type-check access to early logs in your app
+ */
+declare global {
+    interface Window {
+        __sweetlinkEarlyLogs?: Array<{
+            level: string;
+            message: string;
+            timestamp: string;
+        }>;
+    }
+}

package/dist/earlyConsoleCapture.js ADDED Viewed

@@ -0,0 +1,77 @@
+/**
+ * Early Console Capture Script
+ *
+ * This script captures console logs BEFORE React hydrates, which is critical for
+ * catching hydration errors and other early-stage issues. It must be injected
+ * into the HTML <head> as an inline script.
+ *
+ * The script creates `window.__sweetlinkEarlyLogs` which GlobalDevBar will pick up
+ * when it mounts, merging these early logs with subsequent console output.
+ *
+ * @example
+ * ```tsx
+ * // In your Document component (Remix) or _document.tsx (Next.js)
+ * import { EARLY_CONSOLE_CAPTURE_SCRIPT } from '@ytspar/devbar';
+ *
+ * <head>
+ *   <script dangerouslySetInnerHTML={{ __html: EARLY_CONSOLE_CAPTURE_SCRIPT }} />
+ * </head>
+ * ```
+ */
+export const EARLY_CONSOLE_CAPTURE_SCRIPT = `
+(function() {
+  if (window.__sweetlinkEarlyLogs) return;
+  window.__sweetlinkEarlyLogs = [];
+  var orig = {
+    log: console.log,
+    error: console.error,
+    warn: console.warn,
+    info: console.info
+  };
+  function formatArg(a) {
+    if (a instanceof Error) {
+      return a.name + ': ' + a.message + (a.stack ? '\\n' + a.stack : '');
+    }
+    if (typeof a === 'object' && a !== null) {
+      try {
+        return JSON.stringify(a, function(key, val) {
+          if (val instanceof Error) {
+            return val.name + ': ' + val.message;
+          }
+          return val;
+        });
+      } catch(e) {
+        return String(a);
+      }
+    }
+    return String(a);
+  }
+  function capture(level, args) {
+    window.__sweetlinkEarlyLogs.push({
+      level: level,
+      message: Array.from(args).map(formatArg).join(' '),
+      timestamp: new Date().toISOString()
+    });
+  }
+  console.log = function() { capture('log', arguments); orig.log.apply(console, arguments); };
+  console.error = function() { capture('error', arguments); orig.error.apply(console, arguments); };
+  console.warn = function() { capture('warn', arguments); orig.warn.apply(console, arguments); };
+  console.info = function() { capture('info', arguments); orig.info.apply(console, arguments); };
+  // Capture uncaught errors
+  window.addEventListener('error', function(e) {
+    window.__sweetlinkEarlyLogs.push({
+      level: 'error',
+      message: 'Uncaught ' + (e.error ? formatArg(e.error) : e.message) + ' at ' + e.filename + ':' + e.lineno + ':' + e.colno,
+      timestamp: new Date().toISOString()
+    });
+  });
+  // Capture unhandled promise rejections
+  window.addEventListener('unhandledrejection', function(e) {
+    window.__sweetlinkEarlyLogs.push({
+      level: 'error',
+      message: 'Unhandled Promise Rejection: ' + formatArg(e.reason),
+      timestamp: new Date().toISOString()
+    });
+  });
+})();
+`;

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+export { type A11yState, type AxeResult, type AxeViolation, clearA11yCache, formatViolation, getBadgeColor, getCachedResult, getImpactColor, getViolationCounts, groupViolationsByImpact, isAxeLoaded, preloadAxe, runA11yAudit, } from './accessibility.js';
+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';
+export { DebugLogger, normalizeDebugConfig } from './debug.js';
+export { EARLY_CONSOLE_CAPTURE_SCRIPT } from './earlyConsoleCapture.js';
+export { destroyGlobalDevBar, earlyConsoleCapture, GlobalDevBar, getGlobalDevBar, initGlobalDevBar, } from './GlobalDevBar.js';
+export { getHtml2Canvas, isHtml2CanvasLoaded, preloadHtml2Canvas } from './lazy/index.js';
+export { formatBytes as formatNetworkBytes, formatDuration, getInitiatorColor, type NetworkEntry, NetworkMonitor, type NetworkState, } from './network.js';
+export { extractDocumentOutline, outlineToMarkdown } from './outline.js';
+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';
+export { beautifyJson, type CookieItem, clearLocalStorage, clearSessionStorage, deleteCookie, deleteLocalStorageItem, deleteSessionStorageItem, formatStorageSummary, getCookies, getLocalStorage, getSessionStorage, getStorageData, type StorageData, type StorageItem, setLocalStorageItem, setSessionStorageItem, } from './storage.js';
+export type { ConsoleLog, DebugConfig, DevBarControl, GlobalDevBarOptions, OutlineNode, PageSchema, SweetlinkCommand, ThemeMode, } from './types.js';
+export { canvasToDataUrl, copyCanvasToClipboard, delay, formatArg, formatArgs, prepareForCapture, } from './utils.js';

package/dist/index.js ADDED Viewed

@@ -0,0 +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 { 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';
+// 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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+/**
+ * Document Outline Extraction
+ *
+ * Functions for extracting and formatting the semantic document outline.
+ */
+import type { OutlineNode } from './types.js';
+/**
+ * Extract the document outline from the page
+ */
+export declare function extractDocumentOutline(): OutlineNode[];
+/**
+ * Convert an outline to markdown format
+ */
+export declare function outlineToMarkdown(outline: OutlineNode[], indent?: number): string;