@checkflow/sdk 1.1.1 → 1.1.3

package/dist/vue.mjs

@@ -0,0 +1,53 @@
+// src/vue.ts
+var _config = null;
+var _initialized = false;
+function createCheckflowPlugin(config) {
+  return {
+    install() {
+      if (typeof window === "undefined") return;
+      if (_initialized) return;
+      _initialized = true;
+      _config = config;
+      import("./index.mjs").then(({ init }) => init(config));
+    }
+  };
+}
+function useCheckflow() {
+  return {
+    send: async (data) => {
+      if (typeof window === "undefined") return { success: false, error: { message: "Not in browser", code: "SSR" } };
+      const { sendFeedback } = await import("./index.mjs");
+      return sendFeedback(data);
+    },
+    screenshot: async () => {
+      if (typeof window === "undefined") return null;
+      const { captureScreenshot } = await import("./screenshot-HXKGZNCZ.mjs");
+      return captureScreenshot();
+    },
+    highlight: async () => {
+      if (typeof window === "undefined") return [];
+      const { startHighlighting } = await import("./highlighter-W4XDALRE.mjs");
+      return startHighlighting();
+    },
+    show: async () => {
+      if (typeof window === "undefined") return;
+      const { showWidget } = await import("./index.mjs");
+      showWidget();
+    },
+    hide: async () => {
+      if (typeof window === "undefined") return;
+      const { hideWidget } = await import("./index.mjs");
+      hideWidget();
+    },
+    destroy: async () => {
+      if (typeof window === "undefined") return;
+      const { destroy } = await import("./index.mjs");
+      destroy();
+      _initialized = false;
+    }
+  };
+}
+export {
+  createCheckflowPlugin,
+  useCheckflow
+};

package/package.json

@@ -1,72 +1,57 @@
 {
   "name": "@checkflow/sdk",
-  "version": "1.1.1",
-  "type": "module",
-  "description": "CheckFlow SDK for capturing user feedback with context",
+  "version": "1.1.3",
+  "description": "Lightweight bug reporter & feedback SDK for Checkflow — with screenshot capture, element highlighting, and framework integrations",
   "main": "dist/index.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.mjs",
+      "require": "./dist/react.js"
+    },
+    "./vue": {
+      "types": "./dist/vue.d.ts",
+      "import": "./dist/vue.mjs",
+      "require": "./dist/vue.js"
+    }
+  },
   "files": [
-    "dist",
-    "README.md"
+    "dist"
   ],
   "scripts": {
-    "build": "rollup -c rollup.config.mjs",
-    "build:watch": "rollup -c -w",
-    "test": "jest",
-    "lint": "eslint src --ext .ts,.tsx",
-    "prepublishOnly": "npm run build"
+    "build": "tsup src/index.ts src/react.ts src/vue.ts --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.ts src/react.ts src/vue.ts --format cjs,esm --dts --watch"
   },
   "keywords": [
+    "checkflow",
+    "bug-tracker",
     "feedback",
-    "bug-report",
+    "sdk",
     "screenshot",
-    "context-capture",
-    "error-tracking",
-    "user-feedback"
+    "highlight",
+    "react",
+    "nextjs",
+    "vue",
+    "nuxt"
   ],
-  "author": "checkFlow",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/checkflow/checkflow-sdk.git"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.5",
-    "@types/jest": "^29.5.11",
-    "@types/node": "^20.10.5",
-    "@types/pako": "^2.0.4",
-    "@types/react": "^18.3.27",
-    "@types/react-dom": "^18.3.7",
-    "@typescript-eslint/eslint-plugin": "^6.15.0",
-    "@typescript-eslint/parser": "^6.15.0",
-    "eslint": "^8.56.0",
-    "jest": "^29.7.0",
-    "rollup": "^4.9.1",
-    "rollup-plugin-dts": "^6.1.0",
-    "rollup-plugin-postcss": "^4.0.2",
-    "ts-jest": "^29.1.1",
-    "tslib": "^2.6.2",
-    "typescript": "^5.3.3",
-    "vue": "^3.5.25"
-  },
-  "dependencies": {
-    "html2canvas": "^1.4.1",
-    "pako": "^2.1.0",
-    "rrweb": "^2.0.0-alpha.17"
-  },
   "peerDependencies": {
-    "react": ">=16.8.0",
+    "react": ">=17.0.0",
     "vue": ">=3.0.0"
   },
   "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "vue": {
-      "optional": true
-    }
+    "react": { "optional": true },
+    "vue": { "optional": true }
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
   }
 }

package/dist/analytics-tracker.d.ts

@@ -1,112 +0,0 @@
-/**
- * Analytics Tracker for CheckFlow SDK
- * Automatically tracks user sessions and interactions for analytics
- */
-import { APIClient } from './api-client';
-export interface SessionData {
-    sessionId: string;
-    projectId: string;
-    userFingerprint?: string;
-    ipAddress?: string;
-    country?: string;
-    region?: string;
-    city?: string;
-    latitude?: number;
-    longitude?: number;
-    userAgent?: string;
-    viewport?: ViewportInfo;
-    browser?: string;
-    os?: string;
-    locale?: string;
-    timezone?: string;
-    entryUrl?: string;
-    referrer?: string;
-}
-export interface ViewportInfo {
-    width: number;
-    height: number;
-    device: 'desktop' | 'mobile' | 'tablet';
-}
-export interface InteractionEvent {
-    pageUrl: string;
-    pageTitle?: string;
-    eventType: 'page_view' | 'click' | 'scroll' | 'form_interaction' | 'error';
-    elementSelector?: string;
-    elementText?: string;
-    mouseX?: number;
-    mouseY?: number;
-    scrollDepth?: number;
-    loadTime?: number;
-    domReadyTime?: number;
-    errorMessage?: string;
-    errorStack?: string;
-}
-export interface AnalyticsOptions {
-    batchSize: number;
-    batchTimeout: number;
-    trackClicks: boolean;
-    trackScrolling: boolean;
-    trackFormInteractions: boolean;
-    trackErrors: boolean;
-    trackPerformance: boolean;
-    throttleScrollMs: number;
-    maxScrollEvents: number;
-    debug: boolean;
-}
-export declare class AnalyticsTracker {
-    private apiClient;
-    private options;
-    private sessionId;
-    private projectId;
-    private userFingerprint;
-    private isActive;
-    private sessionStartTime;
-    private currentPageUrl;
-    private pageLoadStart;
-    private interactionBuffer;
-    private batchTimer;
-    private scrollEvents;
-    private lastScrollTime;
-    private isFirstPageView;
-    private performanceObserver?;
-    private recordingUploadTimer;
-    private readonly RECORDING_UPLOAD_INTERVAL;
-    constructor(apiClient: APIClient, options?: Partial<AnalyticsOptions>);
-    startTracking(): Promise<void>;
-    stopTracking(): Promise<void>;
-    private saveSessionRecording;
-    private setupPeriodicRecordingUpload;
-    private createSession;
-    private updateSessionEnd;
-    private setupEventListeners;
-    private removeEventListeners;
-    private handleClick;
-    private handleScroll;
-    private handleFormFocus;
-    private handleFormChange;
-    private handleError;
-    private handleUnhandledRejection;
-    private handlePageUnload;
-    private handleVisibilityChange;
-    private setupSPATracking;
-    private setupPerformanceTracking;
-    private trackPageView;
-    private capturePageScreenshotForHeatmap;
-    private trackPageLoadPerformance;
-    private queueInteraction;
-    private flushInteractions;
-    private generateSessionId;
-    private generateUserFingerprint;
-    private getGeolocation;
-    private getViewportInfo;
-    private getBrowserInfo;
-    private getOSInfo;
-    private getElementSelector;
-    private getElementText;
-    private isFormElement;
-    private calculateScrollDepth;
-    private getPageLoadTime;
-    private getDOMReadyTime;
-    private getPageViewCount;
-    private log;
-}

package/dist/annotation/editor.d.ts

@@ -1,72 +0,0 @@
-/**
- * CheckFlow Annotation Editor
- * Figma-like canvas editor for annotating screenshots
- */
-import { Annotation, AnnotationEditorConfig } from './types';
-export declare class AnnotationEditor {
-    private container;
-    private canvas;
-    private ctx;
-    private toolbar;
-    private config;
-    private annotations;
-    private backgroundImage;
-    private state;
-    private startPoint;
-    private freehandPoints;
-    private textInput;
-    constructor(config: AnnotationEditorConfig);
-    /**
-     * Open the annotation editor with a screenshot
-     */
-    open(screenshotDataUrl: string): Promise<void>;
-    /**
-     * Close the editor
-     */
-    close(): void;
-    /**
-     * Get the annotated image as data URL
-     */
-    getAnnotatedImage(): string;
-    /**
-     * Get annotations data
-     */
-    getAnnotations(): Annotation[];
-    private loadImage;
-    private createEditorUI;
-    private setupEventListeners;
-    private handleMouseDown;
-    private handleMouseMove;
-    private handleMouseUp;
-    private handleTouchStart;
-    private handleTouchMove;
-    private handleTouchEnd;
-    private handleKeyDown;
-    private getCanvasPoint;
-    private getCanvasPointFromTouch;
-    private startDrawing;
-    private continueDrawing;
-    private finishDrawing;
-    private isValidAnnotation;
-    private createAnnotation;
-    private createBounds;
-    private showTextInput;
-    private generateId;
-    private setActiveTool;
-    private setStyle;
-    private undo;
-    private clearAll;
-    private save;
-    private cancel;
-    private render;
-    private drawAnnotations;
-    private drawAnnotation;
-    private drawRectangle;
-    private drawEllipse;
-    private drawArrow;
-    private drawLine;
-    private drawHighlight;
-    private drawBlur;
-    private drawText;
-    private drawFreehand;
-}

package/dist/annotation/index.d.ts

@@ -1,9 +0,0 @@
-/**
- * CheckFlow Annotation Module
- * Figma-like annotation tools for feedback screenshots
- */
-export { AnnotationEditor } from './editor';
-export { AnnotationToolbar } from './toolbar';
-export { injectAnnotationStyles, removeAnnotationStyles } from './styles';
-export type { AnnotationToolType, Point, Bounds, AnnotationStyle, Annotation, RectangleAnnotation, EllipseAnnotation, ArrowAnnotation, LineAnnotation, HighlightAnnotation, BlurAnnotation, TextAnnotation, FreehandAnnotation, AnnotationEditorConfig, ToolState, } from './types';
-export { DEFAULT_STYLE, HIGHLIGHT_STYLE, BLUR_STYLE, COLOR_PALETTE, STROKE_WIDTHS, } from './types';

package/dist/annotation/styles.d.ts

@@ -1,6 +0,0 @@
-/**
- * CheckFlow Annotation Styles
- * CSS-in-JS styles for the annotation editor
- */
-export declare function injectAnnotationStyles(): void;
-export declare function removeAnnotationStyles(): void;

package/dist/annotation/toolbar.d.ts

@@ -1,32 +0,0 @@
-/**
- * CheckFlow Annotation Toolbar
- * Figma-like floating toolbar for annotation tools
- */
-import { AnnotationToolType, AnnotationStyle } from './types';
-export interface ToolbarConfig {
-    tools: AnnotationToolType[];
-    activeTool: AnnotationToolType;
-    style: AnnotationStyle;
-    onToolChange: (tool: AnnotationToolType) => void;
-    onStyleChange: (style: Partial<AnnotationStyle>) => void;
-    onUndo: () => void;
-    onClear: () => void;
-    onSave: () => void;
-    onCancel: () => void;
-}
-export declare class AnnotationToolbar {
-    private element;
-    private config;
-    private colorPicker;
-    private strokePicker;
-    constructor(config: ToolbarConfig);
-    getElement(): HTMLElement;
-    setActiveTool(tool: AnnotationToolType): void;
-    setStyle(style: AnnotationStyle): void;
-    private createToolbar;
-    private createToolButton;
-    private updateActiveState;
-    private updateStyleDisplay;
-    private toggleColorPicker;
-    private toggleStrokePicker;
-}

package/dist/annotation/types.d.ts

@@ -1,85 +0,0 @@
-/**
- * CheckFlow Annotation System Types
- * Figma-like annotation tools for feedback screenshots
- */
-export type AnnotationToolType = 'select' | 'rectangle' | 'ellipse' | 'arrow' | 'line' | 'highlight' | 'blur' | 'text' | 'freehand';
-export interface Point {
-    x: number;
-    y: number;
-}
-export interface Bounds {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-export interface AnnotationStyle {
-    strokeColor: string;
-    strokeWidth: number;
-    fillColor: string;
-    opacity: number;
-    fontSize?: number;
-    fontFamily?: string;
-}
-export interface BaseAnnotation {
-    id: string;
-    type: AnnotationToolType;
-    style: AnnotationStyle;
-    timestamp: number;
-}
-export interface RectangleAnnotation extends BaseAnnotation {
-    type: 'rectangle';
-    bounds: Bounds;
-}
-export interface EllipseAnnotation extends BaseAnnotation {
-    type: 'ellipse';
-    bounds: Bounds;
-}
-export interface ArrowAnnotation extends BaseAnnotation {
-    type: 'arrow';
-    start: Point;
-    end: Point;
-}
-export interface LineAnnotation extends BaseAnnotation {
-    type: 'line';
-    start: Point;
-    end: Point;
-}
-export interface HighlightAnnotation extends BaseAnnotation {
-    type: 'highlight';
-    bounds: Bounds;
-}
-export interface BlurAnnotation extends BaseAnnotation {
-    type: 'blur';
-    bounds: Bounds;
-    blurAmount: number;
-}
-export interface TextAnnotation extends BaseAnnotation {
-    type: 'text';
-    position: Point;
-    text: string;
-}
-export interface FreehandAnnotation extends BaseAnnotation {
-    type: 'freehand';
-    points: Point[];
-}
-export type Annotation = RectangleAnnotation | EllipseAnnotation | ArrowAnnotation | LineAnnotation | HighlightAnnotation | BlurAnnotation | TextAnnotation | FreehandAnnotation;
-export interface AnnotationEditorConfig {
-    tools: AnnotationToolType[];
-    defaultStyle: AnnotationStyle;
-    canvasWidth?: number;
-    canvasHeight?: number;
-    onSave?: (annotations: Annotation[], imageData: string) => void;
-    onCancel?: () => void;
-}
-export interface ToolState {
-    activeTool: AnnotationToolType;
-    style: AnnotationStyle;
-    isDrawing: boolean;
-    currentAnnotation: Annotation | null;
-}
-export declare const DEFAULT_STYLE: AnnotationStyle;
-export declare const HIGHLIGHT_STYLE: Partial<AnnotationStyle>;
-export declare const BLUR_STYLE: Partial<AnnotationStyle>;
-export declare const COLOR_PALETTE: string[];
-export declare const STROKE_WIDTHS: number[];

package/dist/api-client.d.ts

@@ -1,76 +0,0 @@
-/**
- * CheckFlow API Client
- * Handles all communication with the CheckFlow backend
- */
-import { APIResponse, FeedbackData, SubmitResult, CaptureResult, UserInfo } from './types';
-export interface APIClientOptions {
-    apiUrl: string;
-    apiKey: string;
-    projectId?: string;
-    timeout?: number;
-    debug?: boolean;
-}
-export declare class APIClient {
-    private apiUrl;
-    private apiKey;
-    private projectId?;
-    private timeout;
-    private debug;
-    constructor(options: APIClientOptions);
-    getProjectId(): string | undefined;
-    getBaseUrl(): string;
-    private log;
-    get<T>(endpoint: string, headers?: Record<string, string>): Promise<APIResponse<T>>;
-    post<T>(endpoint: string, data?: any, headers?: Record<string, string>): Promise<APIResponse<T>>;
-    put<T>(endpoint: string, data?: any, headers?: Record<string, string>): Promise<APIResponse<T>>;
-    private request;
-    /**
-     * Submit feedback to the backend
-     */
-    submitFeedback(feedback: FeedbackData, capture?: CaptureResult, user?: UserInfo, sessionRecording?: {
-        events: any[];
-        sessionId: string;
-    }, annotations?: any[]): Promise<SubmitResult>;
-    /**
-     * Upload screenshot as attachment
-     */
-    uploadScreenshot(feedbackId: string, base64Image: string): Promise<APIResponse>;
-    /**
-     * Send SDK capture data to backend for processing
-     * Aligns with backend SDKCapturePayload schema
-     */
-    sendCapture(capture: CaptureResult, sessionId?: string): Promise<APIResponse>;
-    /**
-     * Upload just a screenshot (simpler endpoint)
-     */
-    uploadScreenshotOnly(screenshotBase64: string, url: string): Promise<APIResponse>;
-    /**
-     * Save session recording to analytics backend
-     * Recordings are now part of analytics sessions (independent from feedbacks)
-     */
-    saveSessionRecording(recording: {
-        events: any[];
-        sessionId: string;
-        durationMs?: number;
-    }): Promise<APIResponse>;
-    /**
-     * Report an error to the backend
-     */
-    reportError(error: {
-        message: string;
-        stack?: string;
-        type: string;
-        filename?: string;
-        lineno?: number;
-        colno?: number;
-        context?: any;
-    }): Promise<APIResponse>;
-    /**
-     * Check API health
-     */
-    healthCheck(): Promise<boolean>;
-    /**
-     * Update project ID
-     */
-    setProjectId(projectId: string): void;
-}

package/dist/checkflow.css

@@ -1 +0,0 @@
-.checkflow-widget{--cf-bg:#fff;--cf-bg-elevated:#fafafa;--cf-bg-hover:#f5f5f5;--cf-text:#18181b;--cf-text-secondary:#71717a;--cf-text-muted:#a1a1aa;--cf-border:#e4e4e7;--cf-border-light:#f4f4f5;--cf-accent:#18181b;--cf-accent-hover:#27272a;--cf-success:#22c55e;--cf-error:#ef4444;--cf-shadow-sm:0 1px 2px rgba(0,0,0,.05);--cf-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--cf-shadow-lg:0 10px 40px -10px rgba(0,0,0,.2);--cf-radius:16px;--cf-radius-sm:8px;--cf-radius-xs:6px;-webkit-font-smoothing:antialiased;color:var(--cf-text);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.5}.checkflow-widget,.checkflow-widget *,.checkflow-widget :after,.checkflow-widget :before{box-sizing:border-box}.checkflow-trigger{align-items:center;background:var(--cf-accent);border:none;border-radius:50%;box-shadow:var(--cf-shadow-lg);color:#fff;cursor:pointer;display:flex;height:56px;justify-content:center;position:fixed;transition:all .3s cubic-bezier(.4,0,.2,1);width:56px;z-index:999998}.checkflow-trigger-pill{background:#fff;border-radius:24px;box-shadow:0 4px 20px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.05);color:#18181b;gap:8px;height:48px;min-width:160px;padding:0 20px;width:auto}.checkflow-trigger-pill:hover{box-shadow:0 8px 25px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.05);transform:translateY(-1px)}.checkflow-trigger-pill:active{transform:translateY(0)}.checkflow-trigger.bottom-right{bottom:24px;right:24px}.checkflow-trigger.bottom-left{bottom:24px;left:24px}.checkflow-trigger.top-right{right:24px;top:24px}.checkflow-trigger.top-left{left:24px;top:24px}.checkflow-trigger-icon{flex-shrink:0;height:20px;transition:transform .3s ease;width:20px}.checkflow-trigger-text{font-size:14px;font-weight:500;white-space:nowrap}.checkflow-trigger:hover .checkflow-trigger-icon{transform:rotate(-8deg)}.checkflow-panel{animation:cf-panel-in .3s cubic-bezier(.4,0,.2,1);background:var(--cf-bg);border:1px solid var(--cf-border-light);border-radius:var(--cf-radius);bottom:96px;box-shadow:var(--cf-shadow-lg);display:flex;flex-direction:column;max-height:calc(100vh - 140px);overflow:hidden;position:fixed;right:24px;width:380px;z-index:999999}.checkflow-panel.bottom-left{left:24px;right:auto}@keyframes cf-panel-in{0%{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.checkflow-header{align-items:center;background:var(--cf-bg);border-bottom:1px solid var(--cf-border-light);display:flex;justify-content:space-between;padding:16px 20px}.checkflow-header-left{align-items:center;display:flex;gap:12px}.checkflow-logo{align-items:center;background:var(--cf-accent);border-radius:8px;color:#fff;display:flex;height:32px;justify-content:center;width:32px}.checkflow-header-text h3{color:var(--cf-text);font-size:15px;font-weight:600;margin:0}.checkflow-header-text p{color:var(--cf-text-muted);font-size:12px;margin:0}.checkflow-close{align-items:center;background:transparent;border:none;border-radius:8px;color:var(--cf-text-secondary);cursor:pointer;display:flex;height:32px;justify-content:center;transition:all .2s;width:32px}.checkflow-close:hover{background:var(--cf-bg-hover);color:var(--cf-text)}.checkflow-body{flex:1;max-height:480px;overflow-y:auto;padding:20px}.checkflow-form{gap:16px}.checkflow-field,.checkflow-form{display:flex;flex-direction:column}.checkflow-field{gap:6px}.checkflow-label{color:var(--cf-text);font-size:13px;font-weight:500}.cf-required{color:var(--cf-text-muted);font-size:12px;font-weight:400}.checkflow-input,.checkflow-select,.checkflow-textarea{background:var(--cf-bg);border:1px solid var(--cf-border);border-radius:var(--cf-radius-sm);color:var(--cf-text);font-size:14px;padding:12px 14px;transition:all .2s}.checkflow-input::placeholder,.checkflow-textarea::placeholder{color:var(--cf-text-muted)}.checkflow-input:focus,.checkflow-select:focus,.checkflow-textarea:focus{border-color:var(--cf-accent);box-shadow:0 0 0 3px rgba(24,24,27,.08);outline:none}.checkflow-textarea{font-family:inherit;min-height:80px;resize:none}.checkflow-select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;cursor:pointer;padding-right:40px}.checkflow-type-grid{display:flex;flex-wrap:wrap;gap:8px}.checkflow-type-option{align-items:center;background:var(--cf-bg);border:1px solid var(--cf-border);border-radius:20px;cursor:pointer;display:flex;font-size:13px;gap:6px;padding:8px 14px;transition:all .2s}.checkflow-type-option:hover{background:var(--cf-bg-hover);border-color:var(--cf-text-muted)}.checkflow-type-option.selected{background:var(--cf-accent);border-color:var(--cf-accent);color:#fff}.checkflow-type-icon{font-size:14px;line-height:1}.checkflow-type-label{font-size:13px;font-weight:500}.checkflow-screenshot{background:var(--cf-bg-elevated);border-radius:var(--cf-radius-sm);overflow:hidden;position:relative}.checkflow-screenshot img{display:block;height:auto;width:100%}.checkflow-screenshot-actions{bottom:10px;display:flex;gap:6px;position:absolute;right:10px}.checkflow-screenshot-btn{align-items:center;backdrop-filter:blur(8px);background:hsla(0,0%,100%,.95);border:none;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.1);color:var(--cf-text);cursor:pointer;display:flex;font-size:11px;font-weight:500;gap:5px;padding:6px 10px;transition:all .2s}.checkflow-screenshot-btn:hover{background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15);transform:translateY(-1px)}.checkflow-screenshot-btn svg{height:12px;width:12px}.checkflow-annotate-btn{background:var(--cf-accent);color:#fff}.checkflow-annotate-btn:hover{background:var(--cf-accent-hover)}.checkflow-checkbox{align-items:center;cursor:pointer;display:flex;gap:10px;padding:8px 0}.checkflow-checkbox input{accent-color:var(--cf-accent);cursor:pointer;height:18px;width:18px}.checkflow-checkbox-label{color:var(--cf-text-secondary);font-size:13px}.checkflow-footer{background:var(--cf-bg);border-top:1px solid var(--cf-border-light);display:flex;gap:10px;padding:16px 20px}.checkflow-btn{border-radius:var(--cf-radius-sm);cursor:pointer;flex:1;font-size:14px;font-weight:500;padding:12px 16px;text-align:center;transition:all .2s}.checkflow-btn-secondary{background:var(--cf-bg);border:1px solid var(--cf-border);color:var(--cf-text-secondary)}.checkflow-btn-secondary:hover{background:var(--cf-bg-hover);color:var(--cf-text)}.checkflow-btn-primary{background:var(--cf-accent);border:none;color:#fff}.checkflow-btn-primary:hover{background:var(--cf-accent-hover)}.checkflow-btn-primary:disabled{background:var(--cf-border);color:var(--cf-text-muted);cursor:not-allowed}.checkflow-loading{align-items:center;display:flex;flex-direction:column;gap:16px;justify-content:center;padding:48px 20px}.checkflow-spinner{animation:cf-spin .7s linear infinite;border:2px solid var(--cf-border);border-radius:50%;border-top-color:var(--cf-accent);height:28px;width:28px}@keyframes cf-spin{to{transform:rotate(1turn)}}.checkflow-loading-text{color:var(--cf-text-muted);font-size:13px}.checkflow-success{padding:48px 24px;text-align:center}.checkflow-success-icon{align-items:center;background:linear-gradient(135deg,#22c55e,#16a34a);border-radius:50%;color:#fff;display:flex;font-size:28px;height:56px;justify-content:center;margin:0 auto 20px;width:56px}.checkflow-success-title{color:var(--cf-text);font-size:17px;font-weight:600;margin:0 0 8px}.checkflow-success-message{color:var(--cf-text-secondary);font-size:14px;line-height:1.6;margin:0}.checkflow-error{align-items:flex-start;background:#fef2f2;border:1px solid #fecaca;border-radius:var(--cf-radius-sm);color:#dc2626;display:flex;font-size:13px;gap:10px;margin-bottom:16px;padding:12px 14px}.checkflow-error-icon{flex-shrink:0;height:18px;width:18px}.checkflow-capture-btn{align-items:center;background:var(--cf-bg-elevated);border:1px dashed var(--cf-border);border-radius:var(--cf-radius-sm);color:var(--cf-text-secondary);cursor:pointer;display:flex;font-size:13px;font-weight:500;gap:8px;justify-content:center;padding:14px;transition:all .2s;width:100%}.checkflow-capture-btn:hover{background:var(--cf-bg-hover);border-color:var(--cf-text-muted);color:var(--cf-text)}.checkflow-capture-btn svg{height:18px;width:18px}.checkflow-options{display:flex;flex-wrap:wrap;gap:16px;padding-top:4px}.checkflow-divider{background:var(--cf-border-light);height:1px;margin:8px 0}.checkflow-powered{border-top:1px solid var(--cf-border-light);color:var(--cf-text-muted);font-size:11px;padding:12px;text-align:center}.checkflow-powered a{color:var(--cf-text-secondary);font-weight:500;text-decoration:none}.checkflow-powered a:hover{color:var(--cf-text)}@media (max-width:480px){.checkflow-panel{bottom:80px;max-height:calc(100vh - 100px);right:16px;width:calc(100vw - 32px)}.checkflow-trigger{bottom:16px;height:52px;right:16px;width:52px}.checkflow-trigger.bottom-left{left:16px}}.checkflow-body::-webkit-scrollbar{width:6px}.checkflow-body::-webkit-scrollbar-track{background:transparent}.checkflow-body::-webkit-scrollbar-thumb{background:var(--cf-border);border-radius:3px}.checkflow-body::-webkit-scrollbar-thumb:hover{background:var(--cf-text-muted)}.checkflow-overlay{align-items:center;animation:cf-fade-in .2s ease;background:rgba(0,0,0,.5);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999999}@keyframes cf-fade-in{0%{opacity:0}to{opacity:1}}.checkflow-modal-compact{animation:cf-modal-in .3s cubic-bezier(.4,0,.2,1);background:var(--cf-bg);border-radius:var(--cf-radius);box-shadow:var(--cf-shadow-lg);display:flex;flex-direction:column;max-height:90vh;max-width:90vw;overflow:hidden;width:420px}@keyframes cf-modal-in{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.checkflow-modal-compact .checkflow-header{padding:20px 24px}.checkflow-modal-compact .checkflow-header h3{font-size:18px;font-weight:600;margin:0}.checkflow-modal-compact .checkflow-body{max-height:none;padding:0 24px 24px}.checkflow-modal-compact .checkflow-footer{flex-direction:column;padding:20px 24px}.checkflow-modal-compact .checkflow-btn{width:100%}.checkflow-expanded{backdrop-filter:blur(4px);background:rgba(24,24,27,.8)}.checkflow-modal-expanded{animation:cf-modal-in .3s cubic-bezier(.4,0,.2,1);background:var(--cf-bg);border-radius:var(--cf-radius);box-shadow:0 25px 80px -20px rgba(0,0,0,.4);display:flex;flex-direction:column;height:90vh;max-height:800px;max-width:1200px;overflow:hidden;width:95vw}.checkflow-modal-expanded .checkflow-header{border-bottom:1px solid var(--cf-border-light);padding:16px 24px}.checkflow-modal-expanded .checkflow-header h3{font-size:16px;font-weight:600;margin:0}.checkflow-content-split{display:flex;flex:1;overflow:hidden}.checkflow-screenshot-area{background:#1a1a1a;display:flex;flex:1;flex-direction:column;position:relative}.checkflow-screenshot-container{align-items:center;display:flex;flex:1;justify-content:center;overflow:auto;padding:24px}.checkflow-screenshot-large{border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.3);max-height:100%;max-width:100%;object-fit:contain}.checkflow-annotation-toolbar{background:rgba(0,0,0,.3);display:flex;gap:12px;justify-content:center;padding:16px}.checkflow-tool-btn{align-items:center;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:13px;font-weight:500;gap:8px;padding:10px 20px;transition:all .2s}.checkflow-tool-btn:hover{background:hsla(0,0%,100%,.2);border-color:hsla(0,0%,100%,.3)}.checkflow-tool-btn svg{height:16px;width:16px}.checkflow-tool-highlight{background:#7c3aed;border-color:#7c3aed}.checkflow-tool-highlight:hover{background:#6d28d9;border-color:#6d28d9}.checkflow-form-area{background:var(--cf-bg);border-left:1px solid var(--cf-border-light);display:flex;flex-direction:column;width:320px}.checkflow-form-area .checkflow-form{flex:1;overflow-y:auto;padding:20px}.checkflow-form-area .checkflow-textarea{min-height:100px}.checkflow-btn-link{background:none;border:none;color:var(--cf-text-muted);cursor:pointer;font-size:12px;padding:8px 0;text-decoration:underline;transition:color .2s}.checkflow-btn-link:hover{color:var(--cf-error)}.checkflow-footer-expanded{border-top:1px solid var(--cf-border-light);display:flex;flex-direction:column;gap:10px;padding:16px 20px}.checkflow-footer-expanded .checkflow-btn{width:100%}.checkflow-form-area .checkflow-type-grid{display:flex;flex-wrap:wrap;gap:6px}.checkflow-form-area .checkflow-type-option{font-size:12px;padding:6px 10px}.checkflow-form-area .checkflow-type-icon{display:none}@media (max-width:768px){.checkflow-modal-expanded{border-radius:0;height:100vh;max-height:none;max-width:none;width:100vw}.checkflow-content-split{flex-direction:column}.checkflow-screenshot-area{flex:0 0 50%}.checkflow-form-area{border-left:none;border-top:1px solid var(--cf-border-light);width:100%}}