@ytspar/devbar 0.0.1 → 1.0.0-canary.92db425

package/dist/constants.d.ts

@@ -0,0 +1,202 @@
+/**
+ * DevBar Constants
+ *
+ * Shared constants used by the DevBar components.
+ */
+export { MAX_CONSOLE_LOGS } from '@ytspar/sweetlink/browser/consoleCapture';
+export { DEVBAR_SCREENSHOT_QUALITY } from '@ytspar/sweetlink/browser/screenshotUtils';
+/** Maximum reconnection attempts before giving up */
+export declare const MAX_RECONNECT_ATTEMPTS = 10;
+/** Base delay for exponential backoff (ms) */
+export declare const BASE_RECONNECT_DELAY_MS = 1000;
+/** Maximum delay between reconnection attempts (ms) */
+export declare const MAX_RECONNECT_DELAY_MS = 30000;
+/** Default WebSocket port for Sweetlink connection */
+export declare const WS_PORT = 9223;
+/** Duration to show screenshot notification (ms) */
+export declare const SCREENSHOT_NOTIFICATION_MS = 3000;
+/** Duration to show clipboard notification (ms) */
+export declare const CLIPBOARD_NOTIFICATION_MS = 2000;
+/** Duration to show design review notification (ms) */
+export declare const DESIGN_REVIEW_NOTIFICATION_MS = 5000;
+/** Delay after blur before capturing screenshot (ms) */
+export declare const SCREENSHOT_BLUR_DELAY_MS = 50;
+/** Scale factor for screenshots (0.75 = 75% of original) */
+export declare const SCREENSHOT_SCALE = 0.75;
+/** Tailwind CSS breakpoint definitions */
+export declare const TAILWIND_BREAKPOINTS: {
+    readonly base: {
+        readonly min: 0;
+        readonly label: "Tailwind base: <640px";
+    };
+    readonly sm: {
+        readonly min: 640;
+        readonly label: "Tailwind sm: >=640px";
+    };
+    readonly md: {
+        readonly min: 768;
+        readonly label: "Tailwind md: >=768px";
+    };
+    readonly lg: {
+        readonly min: 1024;
+        readonly label: "Tailwind lg: >=1024px";
+    };
+    readonly xl: {
+        readonly min: 1280;
+        readonly label: "Tailwind xl: >=1280px";
+    };
+    readonly '2xl': {
+        readonly min: 1536;
+        readonly label: "Tailwind 2xl: >=1536px";
+    };
+};
+export type TailwindBreakpoint = keyof typeof TAILWIND_BREAKPOINTS;
+/** Button colors for devbar toolbar buttons */
+export declare const BUTTON_COLORS: {
+    readonly screenshot: "#10b981";
+    readonly review: "#a855f7";
+    readonly outline: "#06b6d4";
+    readonly schema: "#f59e0b";
+    readonly error: "#ef4444";
+    readonly warning: "#f59e0b";
+};
+/** Category colors for outline display */
+export declare const CATEGORY_COLORS: Record<string, string>;
+/** Complete DevBar design system theme */
+export declare const DEVBAR_THEME: {
+    readonly colors: {
+        readonly primary: "#10b981";
+        readonly primaryHover: "#059669";
+        readonly primaryGlow: "rgba(16, 185, 129, 0.4)";
+        readonly error: "#ef4444";
+        readonly warning: "#f59e0b";
+        readonly info: "#3b82f6";
+        readonly purple: "#a855f7";
+        readonly cyan: "#06b6d4";
+        readonly pink: "#ec4899";
+        readonly lime: "#84cc16";
+        readonly bg: "#0a0f1a";
+        readonly bgCard: "rgba(17, 24, 39, 0.95)";
+        readonly bgElevated: "rgba(17, 24, 39, 0.98)";
+        readonly bgInput: "rgba(10, 15, 26, 0.8)";
+        readonly text: "#f1f5f9";
+        readonly textSecondary: "#94a3b8";
+        readonly textMuted: "#6b7280";
+        readonly border: "rgba(16, 185, 129, 0.2)";
+        readonly borderSubtle: "rgba(255, 255, 255, 0.05)";
+    };
+    readonly fonts: {
+        readonly mono: "'Departure Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace";
+    };
+    readonly typography: {
+        readonly sizeXs: "0.625rem";
+        readonly sizeSm: "0.6875rem";
+        readonly sizeBase: "0.75rem";
+        readonly sizeMd: "0.8125rem";
+        readonly sizeLg: "0.875rem";
+        readonly sizeXl: "1rem";
+        readonly size2xl: "1.5rem";
+        readonly leadingTight: "1rem";
+        readonly leadingNormal: "1.5";
+        readonly leadingRelaxed: "1.6";
+        readonly weightNormal: "400";
+        readonly weightMedium: "500";
+        readonly weightSemibold: "600";
+        readonly trackingTight: "-0.02em";
+        readonly trackingNormal: "0";
+        readonly trackingWide: "0.05em";
+        readonly trackingWider: "0.1em";
+    };
+    readonly radius: {
+        readonly sm: "4px";
+        readonly md: "6px";
+        readonly lg: "12px";
+    };
+    readonly shadows: {
+        readonly sm: "0 1px 2px rgba(0, 0, 0, 0.4)";
+        readonly md: "0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(16, 185, 129, 0.1)";
+        readonly lg: "0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(16, 185, 129, 0.15)";
+        readonly glow: "0 0 20px rgba(16, 185, 129, 0.15)";
+    };
+    readonly transitions: {
+        readonly fast: "150ms";
+    };
+};
+export type DevBarTheme = typeof DEVBAR_THEME;
+/** Shorthand for common colors */
+export declare const COLORS: {
+    readonly primary: "#10b981";
+    readonly primaryHover: "#059669";
+    readonly primaryGlow: "rgba(16, 185, 129, 0.4)";
+    readonly error: "#ef4444";
+    readonly warning: "#f59e0b";
+    readonly info: "#3b82f6";
+    readonly purple: "#a855f7";
+    readonly cyan: "#06b6d4";
+    readonly pink: "#ec4899";
+    readonly lime: "#84cc16";
+    readonly bg: "#0a0f1a";
+    readonly bgCard: "rgba(17, 24, 39, 0.95)";
+    readonly bgElevated: "rgba(17, 24, 39, 0.98)";
+    readonly bgInput: "rgba(10, 15, 26, 0.8)";
+    readonly text: "#f1f5f9";
+    readonly textSecondary: "#94a3b8";
+    readonly textMuted: "#6b7280";
+    readonly border: "rgba(16, 185, 129, 0.2)";
+    readonly borderSubtle: "rgba(255, 255, 255, 0.05)";
+};
+/** Shorthand for font stack */
+export declare const FONT_MONO: "'Departure Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace";
+/** Flexible input type for theme customization */
+export type DevBarThemeInput = {
+    colors: {
+        [K in keyof DevBarTheme['colors']]: string;
+    };
+    fonts: {
+        [K in keyof DevBarTheme['fonts']]: string;
+    };
+    typography: {
+        [K in keyof DevBarTheme['typography']]: string;
+    };
+    radius: {
+        [K in keyof DevBarTheme['radius']]: string;
+    };
+    shadows: {
+        [K in keyof DevBarTheme['shadows']]: string;
+    };
+    transitions: {
+        [K in keyof DevBarTheme['transitions']]: string;
+    };
+};
+/**
+ * Generate CSS custom properties from the theme
+ */
+export declare function generateThemeCSSVars(theme?: DevBarThemeInput): string;
+/**
+ * Inject theme CSS variables into the document
+ */
+export declare function injectThemeCSS(theme?: DevBarThemeInput): void;
+/**
+ * Generate CSS for breakpoint media queries
+ */
+export declare function generateBreakpointCSS(selector: string, property: string, values: Record<TailwindBreakpoint, string>): string;
+/** Base styles for toolbar action buttons */
+export declare const ACTION_BUTTON_BASE_STYLES: {
+    readonly display: "flex";
+    readonly alignItems: "center";
+    readonly justifyContent: "center";
+    readonly width: "22px";
+    readonly height: "22px";
+    readonly minWidth: "22px";
+    readonly minHeight: "22px";
+    readonly flexShrink: "0";
+    readonly borderRadius: "50%";
+    readonly border: "1px solid";
+    readonly transition: "all 150ms";
+};
+/** Common modal overlay styles */
+export declare const MODAL_OVERLAY_STYLES: Record<string, string>;
+/** Common modal box styles */
+export declare const MODAL_BOX_BASE_STYLES: Record<string, string>;
+/** Tooltip and animation CSS styles */
+export declare const TOOLTIP_STYLES: string;