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

package/README.md

@@ -15,6 +15,10 @@ Development toolbar with Sweetlink integration for browser-based development too
 - **Page Schema**: View JSON-LD, Open Graph, and meta tag data
 - **Sweetlink integration**: Real-time connection to dev server
 
+## Requirements
+
+This package is **ESM-only**. It requires `"type": "module"` in your `package.json` or an ESM-capable bundler (Vite, webpack, esbuild, etc.).
+
 ## Installation
 
 ```bash

package/dist/GlobalDevBar.d.ts

@@ -4,99 +4,123 @@
  * A development toolbar that displays breakpoint info, performance stats,
  * console error/warning counts, and provides screenshot capabilities via Sweetlink.
  *
- * This is a vanilla JS replacement for the React-based GlobalDevBar component
- * to avoid React dependency conflicts in host applications.
+ * Framework-agnostic — no React, Vue, or other framework dependencies.
+ *
+ * Implementation is split across focused modules in ./modules/:
+ * - websocket.ts   — WebSocket connection, reconnection, port scanning, message handling
+ * - screenshot.ts  — Screenshot capture, design review, clipboard operations
+ * - rendering.ts   — renderBar(), renderConsolePopup(), renderModal(), all DOM creation
+ * - performance.ts — setupPerformanceMonitoring(), FCP/LCP/CLS/INP observers
+ * - theme.ts       — setupTheme(), toggleTheme(), theme media query handling
+ * - keyboard.ts    — setupKeyboardShortcuts(), handleKeydown()
+ * - tooltips.ts    — tooltip creation, positioning, and management helpers
  */
 import { getThemeColors } from './constants.js';
+import { DebugLogger } from './debug.js';
+import { type DevBarSettings, type SettingsManager } from './settings.js';
 import type { ConsoleLog, DebugConfig, DevBarControl, GlobalDevBarOptions, OutlineNode, PageSchema, SweetlinkCommand, ThemeMode } from './types.js';
+import { ConsoleCapture } from '@ytspar/sweetlink/browser/consoleCapture';
 export type { ConsoleLog, DebugConfig, SweetlinkCommand, OutlineNode, PageSchema, GlobalDevBarOptions, DevBarControl, ThemeMode, };
 export type { DevBarPosition, DevBarSettings, MetricsVisibility } from './settings.js';
 export { ACCENT_COLOR_PRESETS, DEFAULT_SETTINGS, getSettingsManager } from './settings.js';
-interface EarlyConsoleCapture {
-    errorCount: number;
-    warningCount: number;
-    logs: ConsoleLog[];
-    originalConsole: {
-        log: typeof console.log;
-        error: typeof console.error;
-        warn: typeof console.warn;
-        info: typeof console.info;
-    } | null;
-    isPatched: boolean;
-}
-declare const earlyConsoleCapture: EarlyConsoleCapture;
+declare const consoleCapture: ConsoleCapture;
 export declare class GlobalDevBar {
     private static customControls;
-    private options;
+    options: Required<Omit<GlobalDevBarOptions, 'sizeOverrides' | 'debug'>> & Pick<GlobalDevBarOptions, 'sizeOverrides'>;
     private debugConfig;
-    private debug;
-    private container;
-    private ws;
-    private consoleLogs;
-    private sweetlinkConnected;
-    private collapsed;
-    private capturing;
-    private copiedToClipboard;
-    private copiedPath;
-    private lastScreenshot;
-    private designReviewInProgress;
-    private lastDesignReview;
-    private designReviewError;
-    private showDesignReviewConfirm;
-    private apiKeyStatus;
-    private lastOutline;
-    private lastSchema;
-    private savingOutline;
-    private savingSchema;
-    private consoleFilter;
-    private showOutlineModal;
-    private showSchemaModal;
-    private breakpointInfo;
-    private perfStats;
-    private lcpValue;
-    private clsValue;
-    private inpValue;
-    private reconnectAttempts;
-    private readonly currentAppPort;
-    private readonly baseWsPort;
-    private wsVerified;
-    private serverProjectDir;
-    private verificationTimeout;
-    private lastDotPosition;
-    private reconnectTimeout;
-    private screenshotTimeout;
-    private copiedPathTimeout;
-    private designReviewTimeout;
-    private designReviewErrorTimeout;
-    private outlineTimeout;
-    private schemaTimeout;
-    private resizeHandler;
-    private keydownHandler;
-    private fcpObserver;
-    private lcpObserver;
-    private clsObserver;
-    private inpObserver;
-    private destroyed;
-    private themeMode;
-    private themeMediaQuery;
-    private themeMediaHandler;
-    private compactMode;
-    private showSettingsPopover;
-    private overlayElement;
-    private settingsManager;
+    debug: DebugLogger;
+    container: HTMLDivElement | null;
+    ws: WebSocket | null;
+    consoleLogs: ConsoleLog[];
+    sweetlinkConnected: boolean;
+    collapsed: boolean;
+    capturing: boolean;
+    copiedToClipboard: boolean;
+    copiedPath: boolean;
+    lastScreenshot: string | null;
+    designReviewInProgress: boolean;
+    lastDesignReview: string | null;
+    designReviewError: string | null;
+    showDesignReviewConfirm: boolean;
+    apiKeyStatus: {
+        configured: boolean;
+        model?: string;
+        pricing?: {
+            input: number;
+            output: number;
+        };
+    } | null;
+    lastOutline: string | null;
+    lastSchema: string | null;
+    savingOutline: boolean;
+    savingSchema: boolean;
+    consoleFilter: 'error' | 'warn' | 'info' | null;
+    showOutlineModal: boolean;
+    showSchemaModal: boolean;
+    activeTooltips: Set<HTMLDivElement>;
+    breakpointInfo: {
+        tailwindBreakpoint: string;
+        dimensions: string;
+    } | null;
+    perfStats: {
+        fcp: string;
+        lcp: string;
+        cls: string;
+        inp: string;
+        totalSize: string;
+    } | null;
+    lcpValue: number | null;
+    clsValue: number;
+    inpValue: number;
+    reconnectAttempts: number;
+    readonly currentAppPort: number;
+    readonly baseWsPort: number;
+    wsVerified: boolean;
+    serverProjectDir: string | null;
+    lastDotPosition: {
+        left: number;
+        top: number;
+        bottom: number;
+    } | null;
+    reconnectTimeout: ReturnType<typeof setTimeout> | null;
+    screenshotTimeout: ReturnType<typeof setTimeout> | null;
+    copiedPathTimeout: ReturnType<typeof setTimeout> | null;
+    designReviewTimeout: ReturnType<typeof setTimeout> | null;
+    designReviewErrorTimeout: ReturnType<typeof setTimeout> | null;
+    outlineTimeout: ReturnType<typeof setTimeout> | null;
+    schemaTimeout: ReturnType<typeof setTimeout> | null;
+    resizeHandler: (() => void) | null;
+    keydownHandler: ((e: KeyboardEvent) => void) | null;
+    fcpObserver: PerformanceObserver | null;
+    lcpObserver: PerformanceObserver | null;
+    clsObserver: PerformanceObserver | null;
+    inpObserver: PerformanceObserver | null;
+    destroyed: boolean;
+    themeMode: ThemeMode;
+    themeMediaQuery: MediaQueryList | null;
+    themeMediaHandler: ((e: MediaQueryListEvent) => void) | null;
+    compactMode: boolean;
+    showSettingsPopover: boolean;
+    overlayElement: HTMLDivElement | null;
+    settingsManager: SettingsManager;
+    private logChangeListener;
     constructor(options?: GlobalDevBarOptions);
     /**
-     * Get tooltip class name(s) if tooltips are enabled, otherwise empty string
+     * Get current error, warning, and info counts from the log array
      */
-    private tooltipClass;
+    getLogCounts(): {
+        errorCount: number;
+        warningCount: number;
+        infoCount: number;
+    };
     /**
-     * Get current error and warning counts from the log array
+     * Reset position style properties on an element to clear stale values
      */
-    private getLogCounts;
+    resetPositionStyles(element: HTMLElement): void;
     /**
      * Create a collapsed count badge (used for error/warning counts in minimized state)
      */
-    private createCollapsedBadge;
+    createCollapsedBadge(count: number, bgColor: string, rightPos: string): HTMLSpanElement;
     /**
      * Register a custom control to be displayed in the devbar
      */
@@ -126,25 +150,14 @@ export declare class GlobalDevBar {
      */
     destroy(): void;
     private injectStyles;
-    private connectWebSocket;
-    private handleSweetlinkCommand;
-    /**
-     * Handle settings loaded from server
-     */
-    private handleSettingsLoaded;
+    connectWebSocket(port?: number): void;
+    handleNotification(type: 'screenshot' | 'designReview' | 'outline' | 'schema', path: string | undefined, durationMs: number): void;
     /**
      * Apply settings to the DevBar state and options
      */
-    private applySettings;
-    /**
-     * Handle notification state updates with auto-clear timeout
-     */
-    private handleNotification;
-    private setupBreakpointDetection;
-    private setupPerformanceMonitoring;
-    private setupKeyboardShortcuts;
-    private setupTheme;
-    private loadCompactMode;
+    applySettings(settings: DevBarSettings): void;
+    private clearConsoleLogs;
+    handleScreenshot(copyToClipboard: boolean): Promise<void>;
     /**
      * Get the current theme mode
      */
@@ -165,117 +178,7 @@ export declare class GlobalDevBar {
      * Check if compact mode is enabled
      */
     isCompactMode(): boolean;
-    private copyPathToClipboard;
-    private handleScreenshot;
-    private handleDesignReview;
-    /**
-     * Show the design review confirmation modal
-     * Checks API key status first
-     */
-    private showDesignReviewConfirmation;
-    /**
-     * Calculate estimated cost for design review based on viewport size
-     */
-    private calculateCostEstimate;
-    /**
-     * Close the design review confirmation modal
-     */
-    private closeDesignReviewConfirm;
-    /**
-     * Proceed with design review after confirmation
-     */
-    private proceedWithDesignReview;
-    private handleDocumentOutline;
-    private handlePageSchema;
-    private handleSaveOutline;
-    private handleSaveSchema;
-    private clearConsoleLogs;
-    private render;
-    private renderOverlays;
-    private renderDesignReviewConfirmModal;
-    /**
-     * Render content when API key is not configured
-     */
-    private renderApiKeyNotConfiguredContent;
-    /**
-     * Render content when API key is configured (cost estimate and model info)
-     */
-    private renderApiKeyConfiguredContent;
-    private renderConsolePopup;
-    /**
-     * Render console log items into a container
-     */
-    private renderConsoleLogs;
-    private renderOutlineModal;
-    /**
-     * Recursively render outline nodes into a container element
-     */
-    private renderOutlineNodes;
-    private renderSchemaModal;
-    /**
-     * Render a section of schema data (either array or key-value object)
-     */
-    private renderSchemaSection;
-    /**
-     * Render JSON-LD items as formatted code blocks with syntax highlighting
-     */
-    private renderJsonLdItems;
-    /**
-     * Append syntax-highlighted JSON to an element using safe DOM methods
-     * Uses textContent for all text to prevent XSS
-     */
-    private appendHighlightedJson;
-    /**
-     * Render key-value pairs as rows with ellipsis overflow and hover tooltip
-     */
-    private renderKeyValueItems;
-    /**
-     * Render compact mode - single row with essential controls only
-     * Shows: connection dot, error/warn badges, screenshot button, settings gear
-     */
-    private renderCompact;
-    /**
-     * Create the settings gear button
-     */
-    private createSettingsButton;
-    /**
-     * Create the compact mode toggle button with chevron icon
-     */
-    private createCompactToggleButton;
-    /**
-     * Create a settings section with title
-     */
-    private createSettingsSection;
-    /**
-     * Create a toggle switch row
-     */
-    private createToggleRow;
-    /**
-     * Render the settings popover
-     */
-    private renderSettingsPopover;
-    /**
-     * Reset all settings to defaults
-     */
-    private resetToDefaults;
-    private renderCollapsed;
-    private renderExpanded;
-    /**
-     * Create a console badge for error/warning counts
-     */
-    private createConsoleBadge;
-    private createScreenshotButton;
-    /**
-     * Get the tooltip text for the screenshot button based on current state
-     */
-    private getScreenshotTooltip;
-    /**
-     * Get the tooltip text for the AI review button based on current state
-     */
-    private getAIReviewTooltip;
-    private createAIReviewButton;
-    private createOutlineButton;
-    private createSchemaButton;
+    render(): void;
 }
 /**
  * Initialize and mount the GlobalDevBar
@@ -292,4 +195,5 @@ export declare function getGlobalDevBar(): GlobalDevBar | null;
  * Destroy the GlobalDevBar
  */
 export declare function destroyGlobalDevBar(): void;
-export { earlyConsoleCapture };
+export { consoleCapture as earlyConsoleCapture };
+//# sourceMappingURL=GlobalDevBar.d.ts.map

package/dist/GlobalDevBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalDevBar.d.ts","sourceRoot":"","sources":["../src/GlobalDevBar.ts"],"names":[],"mappings":"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"}