@checkflow/sdk 1.0.1

package/README.md

@@ -0,0 +1,265 @@
+# @checkflow/sdk
+
+> User feedback collection SDK with automatic context capture
+
+[![npm version](https://img.shields.io/npm/v/@checkflow/sdk.svg)](https://www.npmjs.com/package/@checkflow/sdk)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+- 📸 **Automatic Screenshot Capture** - Capture page screenshots with one click
+- 🔍 **Context Collection** - Automatically collect console logs, network requests, and performance metrics
+- 🎨 **Customizable Widget** - Beautiful feedback widget that matches your brand
+- ⚛️ **React Support** - First-class React hooks and components
+- 💚 **Vue Support** - Vue 3 composables and plugin
+- 🛡️ **Error Boundary** - Automatic error capture and reporting
+- 🌍 **i18n Ready** - Built-in translations (EN, FR, ES, DE)
+- 📱 **Responsive** - Works on desktop, tablet, and mobile
+
+## Installation
+
+```bash
+npm install @checkflow/sdk
+# or
+yarn add @checkflow/sdk
+# or
+pnpm add @checkflow/sdk
+```
+
+## Quick Start
+
+### Vanilla JavaScript
+
+```javascript
+import { createCheckFlow } from '@checkflow/sdk';
+
+const checkflow = createCheckFlow('your-api-key', {
+  projectId: 'your-project-id',
+  showWidget: true,
+  captureErrors: true,
+});
+
+// Programmatically open the feedback form
+checkflow.open();
+
+// Submit feedback programmatically
+await checkflow.submitFeedback({
+  title: 'Bug Report',
+  description: 'Something is broken',
+  type: 'bug',
+  priority: 'high',
+});
+```
+
+### React
+
+```tsx
+import { CheckFlowProvider, useCheckFlow, FeedbackButton } from '@checkflow/sdk';
+
+// Wrap your app
+function App() {
+  return (
+    <CheckFlowProvider 
+      apiKey="your-api-key"
+      options={{ projectId: 'your-project-id' }}
+    >
+      <YourApp />
+    </CheckFlowProvider>
+  );
+}
+
+// Use the hook
+function MyComponent() {
+  const { openWidget, submitFeedback } = useCheckFlow();
+
+  return (
+    <button onClick={openWidget}>
+      Send Feedback
+    </button>
+  );
+}
+
+// Or use the built-in button
+function AnotherComponent() {
+  return <FeedbackButton>Report Issue</FeedbackButton>;
+}
+```
+
+### Vue 3
+
+```typescript
+import { createApp } from 'vue';
+import { CheckFlowPlugin } from '@checkflow/sdk';
+
+const app = createApp(App);
+
+app.use(CheckFlowPlugin, {
+  apiKey: 'your-api-key',
+  projectId: 'your-project-id',
+});
+
+app.mount('#app');
+```
+
+```vue
+<script setup>
+import { useCheckFlow, useFeedbackForm } from '@checkflow/sdk';
+
+const { openWidget } = useCheckFlow();
+const { formState, submit, isSubmitting } = useFeedbackForm();
+</script>
+
+<template>
+  <button @click="openWidget">Send Feedback</button>
+</template>
+```
+
+## Configuration Options
+
+```typescript
+interface CheckFlowOptions {
+  // API endpoint (default: https://api.checkflow.io)
+  apiUrl?: string;
+  
+  // Project ID for feedback association
+  projectId?: string;
+  
+  // Widget options
+  showWidget?: boolean;              // Show floating button (default: true)
+  widgetPosition?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  widgetButtonText?: string;         // Button text (default: 'Feedback')
+  
+  // Capture options
+  captureErrors?: boolean;           // Auto-capture errors (default: true)
+  captureConsole?: boolean;          // Capture console logs (default: true)
+  captureNetwork?: boolean;          // Capture network requests (default: true)
+  capturePerformance?: boolean;      // Capture performance metrics (default: true)
+  maxConsoleEntries?: number;        // Max console entries (default: 100)
+  maxNetworkEntries?: number;        // Max network entries (default: 100)
+  
+  // User identification
+  user?: {
+    id?: string;
+    email?: string;
+    name?: string;
+  };
+  
+  // Callbacks
+  beforeSubmit?: (feedback) => feedback | false;
+  onSubmit?: (result) => void;
+  onError?: (error) => void;
+  
+  // Localization
+  locale?: 'en' | 'fr' | 'es' | 'de';
+  translations?: Partial<Translations>;
+  
+  // Debug mode
+  debug?: boolean;
+}
+```
+
+## Error Boundary (React)
+
+```tsx
+import { CheckFlowErrorBoundary } from '@checkflow/sdk';
+
+function App() {
+  return (
+    <CheckFlowErrorBoundary
+      fallback={(error, reset) => (
+        <div>
+          <h1>Something went wrong</h1>
+          <pre>{error.message}</pre>
+          <button onClick={reset}>Try again</button>
+        </div>
+      )}
+      onError={(error, errorInfo) => {
+        console.error('Caught error:', error);
+      }}
+    >
+      <YourApp />
+    </CheckFlowErrorBoundary>
+  );
+}
+```
+
+## Manual Context Capture
+
+```typescript
+import { createCheckFlow } from '@checkflow/sdk';
+
+const checkflow = createCheckFlow('your-api-key');
+
+// Capture current page context
+const capture = await checkflow.capture({
+  fullPage: true,           // Capture full page (not just viewport)
+  quality: 80,              // Screenshot quality (1-100)
+  includeConsole: true,     // Include console logs
+  includeNetwork: true,     // Include network logs
+  hideElements: ['.secret'], // CSS selectors to hide
+  maskElements: ['.password'], // CSS selectors to mask
+});
+
+console.log(capture.screenshot);     // Base64 screenshot
+console.log(capture.consoleLogs);    // Console entries
+console.log(capture.networkLogs);    // Network requests
+console.log(capture.performance);    // Performance metrics
+console.log(capture.context);        // Page context (URL, browser, etc.)
+```
+
+## User Identification
+
+```typescript
+// Set user info
+checkflow.setUser({
+  id: 'user-123',
+  email: 'user@example.com',
+  name: 'John Doe',
+});
+
+// Clear user info (on logout)
+checkflow.clearUser();
+```
+
+## CDN Usage
+
+```html
+<script src="https://unpkg.com/@checkflow/sdk/dist/checkflow.umd.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/@checkflow/sdk/dist/checkflow.css">
+
+<script>
+  const checkflow = new CheckFlow('your-api-key', {
+    projectId: 'your-project-id',
+  }).init();
+</script>
+```
+
+## TypeScript
+
+The SDK is written in TypeScript and includes full type definitions.
+
+```typescript
+import type { 
+  FeedbackData, 
+  CaptureResult, 
+  CheckFlowOptions 
+} from '@checkflow/sdk';
+```
+
+## Privacy & Security
+
+- Screenshots can exclude sensitive elements using `hideElements` and `maskElements`
+- Console logs are filtered to remove potentially sensitive data
+- Network requests to CheckFlow API are excluded from capture
+- All data is transmitted over HTTPS
+
+## Browser Support
+
+- Chrome 80+
+- Firefox 75+
+- Safari 13+
+- Edge 80+
+
+## License
+
+MIT © CheckFlow

package/dist/analytics-tracker.d.ts

@@ -0,0 +1,107 @@
+/**
+ * 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?;
+    constructor(apiClient: APIClient, options?: Partial<AnalyticsOptions>);
+    startTracking(): Promise<void>;
+    stopTracking(): Promise<void>;
+    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 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

@@ -0,0 +1,72 @@
+/**
+ * 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

@@ -0,0 +1,9 @@
+/**
+ * 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

@@ -0,0 +1,6 @@
+/**
+ * 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

@@ -0,0 +1,32 @@
+/**
+ * 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

@@ -0,0 +1,85 @@
+/**
+ * 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

@@ -0,0 +1,78 @@
+/**
+ * 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 backend
+     * Aligns with backend /sdk/recording endpoint
+     */
+    saveSessionRecording(recording: {
+        events: any[];
+        sessionId: string;
+        startUrl: string;
+        endUrl?: string;
+        durationSeconds: 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

@@ -0,0 +1 @@
+.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%}}