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

package/dist/GlobalDevBar.d.ts

@@ -7,8 +7,11 @@
  * This is a vanilla JS replacement for the React-based GlobalDevBar component
  * to avoid React dependency conflicts in host applications.
  */
-import type { ConsoleLog, SweetlinkCommand, OutlineNode, PageSchema, GlobalDevBarOptions, DevBarControl } from './types.js';
-export type { ConsoleLog, SweetlinkCommand, OutlineNode, PageSchema, GlobalDevBarOptions, DevBarControl };
+import { getThemeColors } from './constants.js';
+import type { ConsoleLog, DebugConfig, DevBarControl, GlobalDevBarOptions, OutlineNode, PageSchema, SweetlinkCommand, ThemeMode } from './types.js';
+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;
@@ -25,6 +28,8 @@ declare const earlyConsoleCapture: EarlyConsoleCapture;
 export declare class GlobalDevBar {
     private static customControls;
     private options;
+    private debugConfig;
+    private debug;
     private container;
     private ws;
     private consoleLogs;
@@ -47,7 +52,10 @@ export declare class GlobalDevBar {
     private breakpointInfo;
     private perfStats;
     private lcpValue;
+    private clsValue;
+    private inpValue;
     private reconnectAttempts;
+    private lastDotPosition;
     private reconnectTimeout;
     private screenshotTimeout;
     private copiedPathTimeout;
@@ -59,8 +67,16 @@ export declare class GlobalDevBar {
     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;
     constructor(options?: GlobalDevBarOptions);
     /**
      * Get tooltip class name(s) if tooltips are enabled, otherwise empty string
@@ -94,6 +110,10 @@ export declare class GlobalDevBar {
      * Initialize and mount the devbar
      */
     init(): void;
+    /**
+     * Get the current position
+     */
+    getPosition(): string;
     /**
      * Destroy the devbar and cleanup
      */
@@ -101,6 +121,14 @@ export declare class GlobalDevBar {
     private injectStyles;
     private connectWebSocket;
     private handleSweetlinkCommand;
+    /**
+     * Handle settings loaded from server
+     */
+    private handleSettingsLoaded;
+    /**
+     * Apply settings to the DevBar state and options
+     */
+    private applySettings;
     /**
      * Handle notification state updates with auto-clear timeout
      */
@@ -108,6 +136,28 @@ export declare class GlobalDevBar {
     private setupBreakpointDetection;
     private setupPerformanceMonitoring;
     private setupKeyboardShortcuts;
+    private setupTheme;
+    private loadCompactMode;
+    /**
+     * Get the current theme mode
+     */
+    getThemeMode(): ThemeMode;
+    /**
+     * Set the theme mode
+     */
+    setThemeMode(mode: ThemeMode): void;
+    /**
+     * Get the current effective theme colors
+     */
+    getColors(): ReturnType<typeof getThemeColors>;
+    /**
+     * Toggle compact mode
+     */
+    toggleCompactMode(): void;
+    /**
+     * Check if compact mode is enabled
+     */
+    isCompactMode(): boolean;
     private copyPathToClipboard;
     private handleScreenshot;
     private handleDesignReview;
@@ -172,6 +222,35 @@ export declare class GlobalDevBar {
      * 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;
     /**
@@ -179,6 +258,14 @@ export declare class GlobalDevBar {
      */
     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;