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

package/dist/modules/theme.js

@@ -0,0 +1,60 @@
+/**
+ * Theme setup and management for DevBar.
+ *
+ * Extracted from GlobalDevBar to reduce file size.
+ */
+import { getEffectiveTheme, getTheme, injectThemeCSS, setStoredThemeMode, } from '../constants.js';
+/**
+ * Setup the theme system: load stored preference and listen for system changes.
+ */
+export function setupTheme(state) {
+    // Load stored theme preference from settings manager
+    const settings = state.settingsManager.getSettings();
+    state.themeMode = settings.themeMode;
+    // Inject the appropriate theme CSS variables on initial load
+    injectThemeCSS(getTheme(state.themeMode));
+    state.debug.state('Theme loaded', { mode: state.themeMode });
+    // Listen for system theme changes
+    if (typeof window !== 'undefined' && window.matchMedia) {
+        state.themeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        state.themeMediaHandler = () => {
+            if (state.themeMode === 'system') {
+                // Re-inject theme CSS when system preference changes
+                injectThemeCSS(getTheme(state.themeMode));
+                state.debug.state('System theme changed', {
+                    effectiveTheme: getEffectiveTheme(state.themeMode),
+                });
+                // Dispatch event so host apps can respond
+                window.dispatchEvent(new CustomEvent('devbar-theme-change', { detail: { mode: state.themeMode } }));
+                state.render();
+            }
+        };
+        state.themeMediaQuery.addEventListener('change', state.themeMediaHandler);
+    }
+}
+/**
+ * Load compact mode setting from storage.
+ */
+export function loadCompactMode(state) {
+    const settings = state.settingsManager.getSettings();
+    state.compactMode = settings.compactMode;
+    state.debug.state('Compact mode loaded', { compactMode: state.compactMode });
+}
+/**
+ * Set the theme mode, persist it, inject CSS, and dispatch event.
+ */
+export function setThemeMode(state, mode) {
+    state.themeMode = mode;
+    state.settingsManager.saveSettings({ themeMode: mode });
+    // Also update legacy storage key for backwards compatibility with getStoredThemeMode()
+    setStoredThemeMode(mode);
+    // Inject the appropriate theme CSS variables
+    injectThemeCSS(getTheme(mode));
+    state.debug.state('Theme mode changed', { mode, effectiveTheme: getEffectiveTheme(mode) });
+    // Dispatch custom event so host apps can respond to theme changes
+    if (typeof window !== 'undefined') {
+        window.dispatchEvent(new CustomEvent('devbar-theme-change', { detail: { mode } }));
+    }
+    state.render();
+}
+//# sourceMappingURL=theme.js.map

package/dist/modules/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/modules/theme.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EACL,iBAAiB,EACjB,QAAQ,EACR,cAAc,EACd,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AAIzB;;GAEG;AACH,MAAM,UAAU,UAAU,CAAC,KAAkB;IAC3C,qDAAqD;IACrD,MAAM,QAAQ,GAAG,KAAK,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC;IACrD,KAAK,CAAC,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC;IACrC,6DAA6D;IAC7D,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAC1C,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;IAE7D,kCAAkC;IAClC,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,UAAU,EAAE,CAAC;QACvD,KAAK,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC;QAC1E,KAAK,CAAC,iBAAiB,GAAG,GAAG,EAAE;YAC7B,IAAI,KAAK,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC;gBACjC,qDAAqD;gBACrD,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;gBAC1C,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,sBAAsB,EAAE;oBACxC,cAAc,EAAE,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC;iBACnD,CAAC,CAAC;gBACH,0CAA0C;gBAC1C,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,qBAAqB,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,EAAE,CAAC,CAC9E,CAAC;gBACF,KAAK,CAAC,MAAM,EAAE,CAAC;YACjB,CAAC;QACH,CAAC,CAAC;QACF,KAAK,CAAC,eAAe,CAAC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IAC5E,CAAC;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,eAAe,CAAC,KAAkB;IAChD,MAAM,QAAQ,GAAG,KAAK,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC;IACrD,KAAK,CAAC,WAAW,GAAG,QAAQ,CAAC,WAAW,CAAC;IACzC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,qBAAqB,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;AAC/E,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,KAAkB,EAAE,IAAe;IAC9D,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IACvB,KAAK,CAAC,eAAe,CAAC,YAAY,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACxD,uFAAuF;IACvF,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACzB,6CAA6C;IAC7C,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;IAC/B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,oBAAoB,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC3F,kEAAkE;IAClE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,qBAAqB,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;IACrF,CAAC;IACD,KAAK,CAAC,MAAM,EAAE,CAAC;AACjB,CAAC"}

package/dist/modules/tooltips.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Tooltip creation, positioning, and management helpers.
+ *
+ * Unified tooltip system: text tooltips, HTML tooltips with rich content builders,
+ * click-to-toggle tooltips for mobile, and composable hover behavior via TooltipHoverOptions.
+ */
+import type { DevBarState } from './types.js';
+/** Create a tooltip container element and track it for cleanup */
+export declare function createTooltipContainer(state: DevBarState): HTMLDivElement;
+/** Remove a tooltip and untrack it */
+export declare function removeTooltip(state: DevBarState, tooltip: HTMLDivElement): void;
+/** Clear all active tooltips (called on re-render) */
+export declare function clearAllTooltips(state: DevBarState): void;
+/** Add a bold title to tooltip (metric name, feature name, etc.) */
+export declare function addTooltipTitle(state: DevBarState, container: HTMLElement, title: string): void;
+/** Add a description paragraph to tooltip */
+export declare function addTooltipDescription(container: HTMLElement, description: string): void;
+/** Add a muted uppercase section header to tooltip */
+export declare function addTooltipSectionHeader(container: HTMLElement, header: string): void;
+/** Add a colored row with dot + label + value (for thresholds) */
+export declare function addTooltipColoredRow(container: HTMLElement, label: string, value: string, color: string, labelWidth?: string): void;
+/** Add an info row with label + value (for breakpoint details) */
+export declare function addTooltipInfoRow(container: HTMLElement, label: string, value: string): void;
+/** Position tooltip above the anchor element, adjusting for screen edges */
+export declare function positionTooltip(tooltip: HTMLElement, anchor: HTMLElement): void;
+/** Options for composing additional hover behavior with tooltips */
+type TooltipHoverOptions = {
+    onEnter?: () => void;
+    onLeave?: () => void;
+};
+/** Attach a plain-text tooltip to an element (evaluated at hover time) */
+export declare function attachTextTooltip(state: DevBarState, element: HTMLElement, getText: () => string, hoverOptions?: TooltipHoverOptions): void;
+/** Attach an HTML tooltip to an element with custom content builder */
+export declare function attachHtmlTooltip(state: DevBarState, element: HTMLElement, buildContent: (tooltip: HTMLDivElement) => void, hoverOptions?: TooltipHoverOptions): void;
+/**
+ * Attach an HTML tooltip with click-to-toggle support for mobile.
+ * - Click toggles tooltip open/closed (pinned state)
+ * - Hover opens tooltip on mouseenter (if not pinned)
+ * - Hover closes tooltip on mouseleave (if not pinned)
+ */
+export declare function attachClickToggleTooltip(state: DevBarState, element: HTMLElement, buildContent: (tooltip: HTMLDivElement) => void): void;
+/** Add a keyboard shortcut row to tooltip */
+export declare function addTooltipShortcut(container: HTMLElement, key: string, description: string): void;
+/** Add a warning message to tooltip */
+export declare function addTooltipWarning(container: HTMLElement, text: string): void;
+/** Add a success status message to tooltip */
+export declare function addTooltipSuccess(container: HTMLElement, text: string, subtext?: string): void;
+/** Add an error status message to tooltip */
+export declare function addTooltipError(container: HTMLElement, title: string, message: string): void;
+/** Add a "in progress" status to tooltip */
+export declare function addTooltipProgress(container: HTMLElement, text: string): void;
+/** Attach a button tooltip with custom title color */
+export declare function attachButtonTooltip(state: DevBarState, element: HTMLElement, titleColor: string, buildContent: (tooltip: HTMLDivElement, helpers: {
+    addTitle: (title: string) => void;
+    addDescription: (desc: string) => void;
+    addSectionHeader: (header: string) => void;
+    addShortcut: (key: string, desc: string) => void;
+    addWarning: (text: string) => void;
+    addSuccess: (text: string, subtext?: string) => void;
+    addError: (title: string, message: string) => void;
+    addProgress: (text: string) => void;
+}) => void): void;
+/** Attach a metric tooltip with title, description, and colored thresholds */
+export declare function attachMetricTooltip(state: DevBarState, element: HTMLElement, title: string, description: string, thresholds: {
+    good: string;
+    needsWork: string;
+    poor: string;
+}): void;
+/** Attach a breakpoint tooltip showing current breakpoint and all breakpoint ranges */
+export declare function attachBreakpointTooltip(state: DevBarState, element: HTMLElement, breakpoint: string, dimensions: string, breakpointLabel: string): void;
+/** Attach a simple info tooltip with title and description */
+export declare function attachInfoTooltip(state: DevBarState, element: HTMLElement, title: string, description: string): void;
+export {};
+//# sourceMappingURL=tooltips.d.ts.map

package/dist/modules/tooltips.d.ts.map

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