@ytspar/devbar 0.0.1 → 1.0.0-canary.2b99e1e

package/dist/accessibility.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Accessibility Audit Utilities
+ *
+ * Lazy-loads axe-core and provides accessibility auditing capabilities.
+ */
+/**
+ * Axe-core result types (simplified)
+ */
+export interface AxeViolation {
+    id: string;
+    impact: 'critical' | 'serious' | 'moderate' | 'minor';
+    description: string;
+    help: string;
+    helpUrl: string;
+    tags: string[];
+    nodes: Array<{
+        html: string;
+        target: string[];
+        failureSummary?: string;
+    }>;
+}
+export interface AxeResult {
+    violations: AxeViolation[];
+    passes: Array<{
+        id: string;
+        description: string;
+    }>;
+    incomplete: AxeViolation[];
+    inapplicable: Array<{
+        id: string;
+    }>;
+    timestamp: string;
+    url: string;
+}
+/**
+ * Accessibility audit state
+ */
+export interface A11yState {
+    isLoading: boolean;
+    lastRun: number | null;
+    result: AxeResult | null;
+    error: string | null;
+}
+/**
+ * Check if axe-core is loaded
+ */
+export declare function isAxeLoaded(): boolean;
+/**
+ * Preload axe-core without waiting
+ */
+export declare function preloadAxe(): void;
+/**
+ * Run accessibility audit on the page
+ * Returns cached result if within cache duration
+ */
+export declare function runA11yAudit(forceRefresh?: boolean): Promise<AxeResult>;
+/**
+ * Get violation count by impact level
+ */
+export declare function getViolationCounts(violations: AxeViolation[]): Record<string, number>;
+/**
+ * Group violations by impact level
+ */
+export declare function groupViolationsByImpact(violations: AxeViolation[]): Map<string, AxeViolation[]>;
+/**
+ * Get color for impact level
+ */
+export declare function getImpactColor(impact: string): string;
+/**
+ * Get badge color based on worst violation impact
+ */
+export declare function getBadgeColor(violations: AxeViolation[]): string;
+/**
+ * Clear cached result
+ */
+export declare function clearA11yCache(): void;
+/**
+ * Get cached result without running audit
+ */
+export declare function getCachedResult(): AxeResult | null;
+/**
+ * Format violation for display
+ */
+export declare function formatViolation(violation: AxeViolation): string;

package/dist/accessibility.js

@@ -0,0 +1,155 @@
+/**
+ * Accessibility Audit Utilities
+ *
+ * Lazy-loads axe-core and provides accessibility auditing capabilities.
+ */
+// Cache duration in milliseconds (30 seconds)
+const CACHE_DURATION_MS = 30000;
+// Module-level state
+let axePromise = null;
+let cachedResult = null;
+let cacheTimestamp = null;
+/**
+ * Lazy load axe-core
+ */
+async function loadAxe() {
+    if (!axePromise) {
+        axePromise = import('axe-core');
+    }
+    return axePromise;
+}
+/**
+ * Check if axe-core is loaded
+ */
+export function isAxeLoaded() {
+    return axePromise !== null;
+}
+/**
+ * Preload axe-core without waiting
+ */
+export function preloadAxe() {
+    loadAxe().catch(() => {
+        // Silently ignore preload errors
+    });
+}
+/**
+ * Run accessibility audit on the page
+ * Returns cached result if within cache duration
+ */
+export async function runA11yAudit(forceRefresh = false) {
+    // Return cached result if valid
+    if (!forceRefresh &&
+        cachedResult &&
+        cacheTimestamp &&
+        Date.now() - cacheTimestamp < CACHE_DURATION_MS) {
+        return cachedResult;
+    }
+    const axeModule = await loadAxe();
+    // Handle ESM/CJS interop
+    const axe = axeModule.default ?? axeModule;
+    // Run axe analysis
+    const result = await axe.run(document, {
+        runOnly: {
+            type: 'tag',
+            values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'best-practice'],
+        },
+    });
+    // Transform to our format
+    const auditResult = {
+        violations: result.violations,
+        passes: result.passes.map((p) => ({
+            id: p.id,
+            description: p.description,
+        })),
+        incomplete: result.incomplete,
+        inapplicable: result.inapplicable.map((i) => ({ id: i.id })),
+        timestamp: new Date().toISOString(),
+        url: window.location.href,
+    };
+    // Cache the result
+    cachedResult = auditResult;
+    cacheTimestamp = Date.now();
+    return auditResult;
+}
+/**
+ * Get violation count by impact level
+ */
+export function getViolationCounts(violations) {
+    const counts = {
+        critical: 0,
+        serious: 0,
+        moderate: 0,
+        minor: 0,
+        total: 0,
+    };
+    for (const violation of violations) {
+        counts[violation.impact] = (counts[violation.impact] || 0) + 1;
+        counts.total++;
+    }
+    return counts;
+}
+/**
+ * Group violations by impact level
+ */
+export function groupViolationsByImpact(violations) {
+    const groups = new Map();
+    const impactOrder = ['critical', 'serious', 'moderate', 'minor'];
+    for (const impact of impactOrder) {
+        groups.set(impact, []);
+    }
+    for (const violation of violations) {
+        const group = groups.get(violation.impact);
+        if (group) {
+            group.push(violation);
+        }
+    }
+    return groups;
+}
+/**
+ * Get color for impact level
+ */
+export function getImpactColor(impact) {
+    const colors = {
+        critical: '#ef4444', // red
+        serious: '#f97316', // orange
+        moderate: '#f59e0b', // amber
+        minor: '#84cc16', // lime
+    };
+    return colors[impact] || '#6b7280';
+}
+/**
+ * Get badge color based on worst violation impact
+ */
+export function getBadgeColor(violations) {
+    if (violations.some((v) => v.impact === 'critical'))
+        return getImpactColor('critical');
+    if (violations.some((v) => v.impact === 'serious'))
+        return getImpactColor('serious');
+    if (violations.some((v) => v.impact === 'moderate'))
+        return getImpactColor('moderate');
+    if (violations.some((v) => v.impact === 'minor'))
+        return getImpactColor('minor');
+    return '#10b981'; // green - no violations
+}
+/**
+ * Clear cached result
+ */
+export function clearA11yCache() {
+    cachedResult = null;
+    cacheTimestamp = null;
+}
+/**
+ * Get cached result without running audit
+ */
+export function getCachedResult() {
+    if (cachedResult && cacheTimestamp && Date.now() - cacheTimestamp < CACHE_DURATION_MS) {
+        return cachedResult;
+    }
+    return null;
+}
+/**
+ * Format violation for display
+ */
+export function formatViolation(violation) {
+    return `[${violation.impact.toUpperCase()}] ${violation.help}\n${violation.description}\n${violation.nodes.length} element(s) affected`;
+}

package/dist/constants.d.ts

@@ -0,0 +1,301 @@
+/**
+ * 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 (legacy fallback) */
+export declare const WS_PORT = 9223;
+/** Port offset from app port to calculate WebSocket port (matches SweetlinkBridge) */
+export declare const WS_PORT_OFFSET = 6223;
+/** Maximum ports to try when scanning for matching server */
+export declare const MAX_PORT_RETRIES = 10;
+/** Delay between port scan attempts (ms) */
+export declare const PORT_RETRY_DELAY_MS = 100;
+/** Delay before restarting port scan from base after all ports fail (ms) */
+export declare const PORT_SCAN_RESTART_DELAY_MS = 3000;
+/** 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>;
+/** LocalStorage keys for DevBar persistence */
+export declare const STORAGE_KEYS: {
+    /** Theme mode preference: 'dark' | 'light' | 'system' */
+    readonly themeMode: "devbar-theme-mode";
+    /** Compact mode preference: 'true' | 'false' */
+    readonly compactMode: "devbar-compact-mode";
+};
+/** 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;
+/** Light theme variant - terminal aesthetic with light green tones */
+export declare const DEVBAR_THEME_LIGHT: {
+    readonly colors: {
+        readonly primary: "#047857";
+        readonly primaryHover: "#065f46";
+        readonly primaryGlow: "rgba(4, 120, 87, 0.25)";
+        readonly error: "#dc2626";
+        readonly warning: "#d97706";
+        readonly info: "#2563eb";
+        readonly purple: "#7c3aed";
+        readonly cyan: "#0891b2";
+        readonly pink: "#db2777";
+        readonly lime: "#65a30d";
+        readonly bg: "#ecfdf5";
+        readonly bgCard: "rgba(255, 255, 255, 0.85)";
+        readonly bgElevated: "rgba(255, 255, 255, 0.95)";
+        readonly bgInput: "rgba(236, 253, 245, 0.9)";
+        readonly text: "#064e3b";
+        readonly textSecondary: "#065f46";
+        readonly textMuted: "#047857";
+        readonly border: "rgba(4, 120, 87, 0.3)";
+        readonly borderSubtle: "rgba(4, 120, 87, 0.1)";
+    };
+    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(4, 120, 87, 0.1)";
+        readonly md: "0 4px 12px rgba(4, 120, 87, 0.12), 0 0 0 1px rgba(4, 120, 87, 0.15)";
+        readonly lg: "0 8px 32px rgba(4, 120, 87, 0.15), 0 0 0 1px rgba(4, 120, 87, 0.2)";
+        readonly glow: "0 0 20px rgba(4, 120, 87, 0.15)";
+    };
+    readonly transitions: {
+        readonly fast: "150ms";
+    };
+};
+export type DevBarThemeLight = typeof DEVBAR_THEME_LIGHT;
+/** 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;
+    };
+};
+import type { ThemeMode } from './types.js';
+/**
+ * Get the stored theme mode preference
+ */
+export declare function getStoredThemeMode(): ThemeMode;
+/**
+ * Store the theme mode preference
+ */
+export declare function setStoredThemeMode(mode: ThemeMode): void;
+/**
+ * Get the effective theme (resolves 'system' to 'dark' or 'light')
+ */
+export declare function getEffectiveTheme(mode: ThemeMode): 'dark' | 'light';
+/** Union type for both theme color variants */
+export type ThemeColors = DevBarTheme['colors'] | DevBarThemeLight['colors'];
+/**
+ * Get theme colors based on the current effective theme
+ */
+export declare function getThemeColors(mode: ThemeMode): ThemeColors;
+/**
+ * Get full theme based on the current effective theme
+ */
+export declare function getTheme(mode: ThemeMode): typeof DEVBAR_THEME | typeof DEVBAR_THEME_LIGHT;
+/**
+ * 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;