@crikket-io/capture 0.1.0

package/dist/types.d.ts

@@ -0,0 +1,165 @@
+import type * as eagerCapture from "./eager.js";
+export type CaptureType = "video" | "screenshot";
+export type CapturePriority = "none" | "low" | "medium" | "high" | "critical";
+export type CaptureReportVisibility = "public" | "private";
+export type DebuggerActionType = "click" | "input" | "change" | "submit" | "keydown" | "navigation";
+export interface DebuggerActionEvent {
+    kind: "action";
+    timestamp: number;
+    actionType: DebuggerActionType | string;
+    target?: string;
+    metadata?: Record<string, unknown>;
+}
+export interface DebuggerConsoleEvent {
+    kind: "console";
+    timestamp: number;
+    level: "log" | "info" | "warn" | "error" | "debug";
+    message: string;
+    metadata?: Record<string, unknown>;
+}
+export interface DebuggerNetworkEvent {
+    kind: "network";
+    timestamp: number;
+    method: string;
+    url: string;
+    status?: number;
+    duration?: number;
+    requestHeaders?: Record<string, string>;
+    responseHeaders?: Record<string, string>;
+    requestBody?: string;
+    responseBody?: string;
+}
+export type DebuggerEvent = DebuggerActionEvent | DebuggerConsoleEvent | DebuggerNetworkEvent;
+export interface BugReportDebuggerPayload {
+    actions: Array<{
+        type: string;
+        target?: string;
+        timestamp: string;
+        offset: number | null;
+        metadata?: Record<string, unknown>;
+    }>;
+    logs: Array<{
+        level: "log" | "info" | "warn" | "error" | "debug";
+        message: string;
+        timestamp: string;
+        offset: number | null;
+        metadata?: Record<string, unknown>;
+    }>;
+    networkRequests: Array<{
+        method: string;
+        url: string;
+        status?: number;
+        duration?: number;
+        requestHeaders?: Record<string, string>;
+        responseHeaders?: Record<string, string>;
+        requestBody?: string;
+        responseBody?: string;
+        timestamp: string;
+        offset: number | null;
+    }>;
+}
+export interface CaptureInitOptions {
+    key: string;
+    host?: string;
+    autoMount?: boolean;
+    mountTarget?: HTMLElement;
+    submitPath?: string;
+    zIndex?: number;
+    submitTransport?: CaptureSubmitTransport;
+}
+export interface CaptureRuntimeConfig {
+    key: string;
+    host: string;
+    submitPath: string;
+    zIndex: number;
+}
+export interface CaptureDebuggerSummary {
+    actions: number;
+    logs: number;
+    networkRequests: number;
+}
+export interface CaptureSubmissionDraft {
+    title: string;
+    description: string;
+    priority: CapturePriority;
+    visibility?: CaptureReportVisibility;
+}
+export interface CaptureSubmitRequest {
+    config: CaptureRuntimeConfig;
+    report: {
+        captureType: CaptureType;
+        title: string;
+        description: string;
+        priority: CapturePriority;
+        visibility: CaptureReportVisibility;
+        pageUrl: string;
+        pageTitle: string;
+        durationMs: number | null;
+        deviceInfo?: {
+            browser?: string;
+            os?: string;
+            viewport?: string;
+        };
+        debuggerPayload?: BugReportDebuggerPayload;
+        debuggerSummary: CaptureDebuggerSummary;
+        media: Blob;
+    };
+}
+export interface CaptureSubmitResult {
+    shareUrl?: string;
+    reportId?: string;
+    raw?: unknown;
+}
+export type CaptureSubmitTransport = (request: CaptureSubmitRequest) => Promise<CaptureSubmitResult>;
+export interface CapturedMedia {
+    blob: Blob;
+    captureType: CaptureType;
+    durationMs: number | null;
+    objectUrl: string;
+}
+export interface ReviewSnapshot {
+    debuggerPayload?: BugReportDebuggerPayload;
+    warnings: string[];
+    debuggerSummary: CaptureDebuggerSummary;
+}
+export interface BridgePayload {
+    source: string;
+    event?: unknown;
+    events?: unknown[];
+}
+export interface RecordingController {
+    startedAt: number;
+    finished: Promise<{
+        blob: Blob;
+        durationMs: number;
+    }>;
+    stop: () => Promise<{
+        blob: Blob;
+        durationMs: number;
+    }>;
+    abort: () => void;
+}
+export interface DebuggerSession {
+    sessionId: string;
+    captureType: CaptureType;
+    startedAt: number;
+    recordingStartedAt: number | null;
+    events: DebuggerEvent[];
+}
+export interface CaptureRuntimeController {
+    open: () => void;
+    close: () => void;
+    destroy: () => void;
+    mount: (target?: HTMLElement) => void;
+    unmount: () => void;
+    startRecording: () => Promise<{
+        startedAt: number;
+    }>;
+    stopRecording: () => Promise<Blob | null>;
+    takeScreenshot: () => Promise<Blob | null>;
+    submit: (draft: CaptureSubmissionDraft) => Promise<CaptureSubmitResult>;
+    reset: () => void;
+    isInitialized: () => boolean;
+    getConfig: () => CaptureRuntimeConfig | null;
+}
+export type CaptureGlobalApi = typeof eagerCapture;

package/dist/ui/capture-widget/capture-widget-root.d.ts

@@ -0,0 +1,6 @@
+import type { CaptureUiCallbacks, CaptureUiStore } from "../types.js";
+export declare function CaptureWidgetRoot(props: {
+    callbacks: CaptureUiCallbacks;
+    store: CaptureUiStore;
+    zIndex: number;
+}): React.JSX.Element;

package/dist/ui/capture-widget/capture-widget-shell.d.ts

@@ -0,0 +1,8 @@
+import type { CaptureUiHandlers, CaptureUiState } from "../types.js";
+export declare function CaptureWidgetShell(props: {
+    zIndex: number;
+    state: CaptureUiState;
+    handlers: CaptureUiHandlers;
+    isSubmitPending: boolean;
+    recordingTime: string;
+}): React.JSX.Element;

package/dist/ui/capture-widget/capture-widget-view.d.ts

@@ -0,0 +1,7 @@
+import type { CaptureUiHandlers, CaptureUiState } from "../types.js";
+export declare function CaptureWidgetView(props: {
+    handlers: CaptureUiHandlers;
+    isBusy: boolean;
+    isSubmitPending: boolean;
+    state: CaptureUiState;
+}): React.JSX.Element | null;

package/dist/ui/capture-widget/components/capture-launcher-button.d.ts

@@ -0,0 +1,5 @@
+export declare function CaptureLauncherButton(props: {
+    disabled: boolean;
+    onClick: () => void;
+    zIndex: number;
+}): React.JSX.Element;

package/dist/ui/capture-widget/components/icons.d.ts

@@ -0,0 +1,8 @@
+export declare function DrawIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+export declare function HighlightIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+export declare function RectangleIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+export declare function UndoIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+export declare function ResetIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+export declare function CopyIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+export declare function CheckIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+export declare function ExternalLinkIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;

package/dist/ui/capture-widget/components/media-preview.d.ts

@@ -0,0 +1,6 @@
+export declare function MediaPreview(props: {
+    media: {
+        captureType: "video" | "screenshot";
+        objectUrl: string;
+    } | null;
+}): React.JSX.Element | null;

package/dist/ui/capture-widget/components/primitives/badge.d.ts

@@ -0,0 +1,5 @@
+export declare function Badge(props: {
+    children: React.ReactNode;
+    className?: string;
+    variant?: "default" | "secondary";
+}): React.JSX.Element;

package/dist/ui/capture-widget/components/primitives/button.d.ts

@@ -0,0 +1,7 @@
+type ButtonVariant = "primary" | "outline" | "secondary";
+type ButtonSize = "default" | "icon" | "sm";
+export declare function Button(props: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+}): React.JSX.Element;
+export {};

package/dist/ui/capture-widget/components/primitives/card.d.ts

@@ -0,0 +1,11 @@
+export declare function Card(props: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function CardHeader(props: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function CardContent(props: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function CardTitle(props: {
+    children: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+export declare function CardDescription(props: {
+    children: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;

package/dist/ui/capture-widget/components/primitives/cn.d.ts

@@ -0,0 +1 @@
+export declare function cn(...values: Array<string | false | null | undefined>): string;

package/dist/ui/capture-widget/components/primitives/field.d.ts

@@ -0,0 +1,4 @@
+export declare function Field(props: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function FieldError(props: {
+    errors: unknown[];
+}): React.JSX.Element | null;

package/dist/ui/capture-widget/components/primitives/input.d.ts

@@ -0,0 +1 @@
+export declare function Input(props: React.InputHTMLAttributes<HTMLInputElement>): React.JSX.Element;

package/dist/ui/capture-widget/components/primitives/label.d.ts

@@ -0,0 +1 @@
+export declare function Label(props: React.LabelHTMLAttributes<HTMLLabelElement>): React.JSX.Element;

package/dist/ui/capture-widget/components/primitives/textarea.d.ts

@@ -0,0 +1 @@
+export declare function Textarea(props: React.TextareaHTMLAttributes<HTMLTextAreaElement>): React.JSX.Element;

package/dist/ui/capture-widget/components/screenshot-annotation-editor.d.ts

@@ -0,0 +1,7 @@
+import { type ScreenshotAnnotation } from "../utils/screenshot-annotations.js";
+export declare function ScreenshotAnnotationEditor(props: {
+    annotations: ScreenshotAnnotation[];
+    disabled: boolean;
+    onChange: (annotations: ScreenshotAnnotation[]) => void;
+    src: string;
+}): React.JSX.Element;

package/dist/ui/capture-widget/components/summary-stat.d.ts

@@ -0,0 +1,4 @@
+export declare function SummaryStat(props: {
+    label: string;
+    value: number;
+}): React.JSX.Element;

package/dist/ui/capture-widget/hooks/use-capture-ui-handlers.d.ts

@@ -0,0 +1,12 @@
+import type { CaptureUiCallbacks, CaptureUiHandlers, CaptureUiStore } from "../../types.js";
+interface UseCaptureUiHandlersInput {
+    callbacks: CaptureUiCallbacks;
+    shareUrl: string;
+    store: CaptureUiStore;
+}
+interface UseCaptureUiHandlersResult {
+    handlers: CaptureUiHandlers;
+    isSubmitPending: boolean;
+}
+export declare function useCaptureUiHandlers(input: UseCaptureUiHandlersInput): UseCaptureUiHandlersResult;
+export {};

package/dist/ui/capture-widget/hooks/use-recording-clock.d.ts

@@ -0,0 +1,4 @@
+export declare function useRecordingClock(input: {
+    recordingDockOpen: boolean;
+    recordingStartedAt: number | null;
+}): string;

package/dist/ui/capture-widget/hooks/use-review-form.d.ts

@@ -0,0 +1,14 @@
+import type { CaptureSubmissionDraft } from "../../../types.js";
+import type { ReviewDraftErrors } from "../utils/review-form-schema.js";
+type ReviewDraftField = keyof CaptureSubmissionDraft;
+export declare function useReviewForm(input: {
+    initialDraft: CaptureSubmissionDraft;
+    onSubmit: (draft: CaptureSubmissionDraft) => Promise<void> | void;
+}): {
+    draft: CaptureSubmissionDraft;
+    visibleErrors: ReviewDraftErrors;
+    setFieldValue: <TField extends ReviewDraftField>(field: TField, value: CaptureSubmissionDraft[TField]) => void;
+    touchField: (field: ReviewDraftField) => void;
+    handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+};
+export {};

package/dist/ui/capture-widget/sections/chooser-section.d.ts

@@ -0,0 +1,5 @@
+export declare function ChooserSection(props: {
+    busy: boolean;
+    onStartVideo: () => void;
+    onTakeScreenshot: () => void;
+}): React.JSX.Element;

package/dist/ui/capture-widget/sections/recording-dock.d.ts

@@ -0,0 +1,6 @@
+export declare function RecordingDock(props: {
+    busy: boolean;
+    onStopRecording: () => void;
+    recordingTime: string;
+    zIndex: number;
+}): React.JSX.Element;

package/dist/ui/capture-widget/sections/review-form-section.d.ts

@@ -0,0 +1,11 @@
+import type { CaptureSubmissionDraft } from "../../../types.js";
+import type { CaptureReviewSubmitOptions, CaptureUiState } from "../../types.js";
+interface ReviewFormSectionProps {
+    formKey: string;
+    isSubmitting: boolean;
+    state: CaptureUiState;
+    onCancel: () => void;
+    onSubmit: (draft: CaptureSubmissionDraft, options?: CaptureReviewSubmitOptions) => Promise<void>;
+}
+export declare function ReviewFormSection({ formKey, isSubmitting, state, onCancel, onSubmit, }: ReviewFormSectionProps): React.JSX.Element;
+export {};

package/dist/ui/capture-widget/sections/success-section.d.ts

@@ -0,0 +1,5 @@
+import type { CaptureUiHandlers, CaptureUiState } from "../../types.js";
+export declare function SuccessSection(props: {
+    state: CaptureUiState;
+    handlers: CaptureUiHandlers;
+}): React.JSX.Element;

package/dist/ui/capture-widget/utils/get-view-description.d.ts

@@ -0,0 +1,2 @@
+import type { CaptureUiState } from "../../types.js";
+export declare function getViewDescription(view: CaptureUiState["view"]): string;

package/dist/ui/capture-widget/utils/review-form-schema.d.ts

@@ -0,0 +1,22 @@
+import { type Priority } from "@crikket/shared/constants/priorities";
+import type { CaptureSubmissionDraft } from "../../../types.js";
+export type ReviewDraftErrors = Partial<Record<keyof CaptureSubmissionDraft, string>>;
+export declare const capturePriorityOptions: readonly [{
+    readonly label: "Critical";
+    readonly value: "critical";
+}, {
+    readonly label: "High";
+    readonly value: "high";
+}, {
+    readonly label: "Medium";
+    readonly value: "medium";
+}, {
+    readonly label: "Low";
+    readonly value: "low";
+}, {
+    readonly label: "None";
+    readonly value: "none";
+}];
+export declare function validateReviewDraft(value: CaptureSubmissionDraft): ReviewDraftErrors | undefined;
+export declare function trimReviewDraftForSubmission(draft: CaptureSubmissionDraft): CaptureSubmissionDraft;
+export type CapturePriority = Priority;

package/dist/ui/capture-widget/utils/screenshot-annotations.d.ts

@@ -0,0 +1,45 @@
+export interface ScreenshotAnnotationPoint {
+    x: number;
+    y: number;
+}
+export declare const screenshotAnnotationColorOptions: readonly [{
+    readonly label: "Orange";
+    readonly value: "#F97316";
+}, {
+    readonly label: "Red";
+    readonly value: "#EF4444";
+}, {
+    readonly label: "Blue";
+    readonly value: "#3B82F6";
+}, {
+    readonly label: "Green";
+    readonly value: "#22C55E";
+}];
+export type ScreenshotAnnotationColor = (typeof screenshotAnnotationColorOptions)[number]["value"];
+export interface ScreenshotStrokeAnnotation {
+    kind: "stroke";
+    tool: "draw" | "highlight";
+    points: ScreenshotAnnotationPoint[];
+    color: ScreenshotAnnotationColor;
+}
+export interface ScreenshotRectangleAnnotation {
+    kind: "rectangle";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: ScreenshotAnnotationColor;
+}
+export type ScreenshotAnnotation = ScreenshotStrokeAnnotation | ScreenshotRectangleAnnotation;
+export declare function createAnnotatedScreenshotBlob(input: {
+    annotations: ScreenshotAnnotation[];
+    imageUrl: string;
+}): Promise<Blob | null>;
+export declare function drawScreenshotAnnotations(input: {
+    annotations: ScreenshotAnnotation[];
+    context: CanvasRenderingContext2D;
+    height: number;
+    image: CanvasImageSource;
+    width: number;
+}): void;
+export declare function clampAnnotationPoint(point: ScreenshotAnnotationPoint): ScreenshotAnnotationPoint;

package/dist/ui/mount-capture-launcher.d.ts

@@ -0,0 +1,11 @@
+interface MountedCaptureLauncher {
+    setLoading: (loading: boolean) => void;
+    unmount: () => void;
+}
+interface MountCaptureLauncherOptions {
+    zIndex: number;
+    onOpen: () => void;
+    onPrefetch: () => void;
+}
+export declare function mountCaptureLauncher(target: HTMLElement, options: MountCaptureLauncherOptions): MountedCaptureLauncher;
+export {};

package/dist/ui/mount-capture-ui.d.ts

@@ -0,0 +1,2 @@
+import type { CaptureUiCallbacks, MountedCaptureUi } from "./types.js";
+export declare function mountCaptureUi(target: HTMLElement, zIndex: number, callbacks: CaptureUiCallbacks): MountedCaptureUi;

package/dist/ui/store/capture-ui-store.d.ts

@@ -0,0 +1,2 @@
+import type { CaptureUiStore } from "../types.js";
+export declare function createCaptureUiStore(): CaptureUiStore;

package/dist/ui/types.d.ts

@@ -0,0 +1,63 @@
+import type { CaptureDebuggerSummary, CapturedMedia, CaptureSubmissionDraft } from "../types.js";
+export interface CaptureReviewSubmitOptions {
+    screenshotBlobOverride?: Blob;
+}
+export interface CaptureUiState {
+    view: "chooser" | "recording" | "review" | "success";
+    overlayOpen: boolean;
+    recordingDockOpen: boolean;
+    busy: boolean;
+    errorMessage: string | null;
+    recordingStartedAt: number | null;
+    warnings: string[];
+    summary: CaptureDebuggerSummary;
+    media: CapturedMedia | null;
+    shareUrl: string;
+    copyLabel: string;
+    reviewDraft: CaptureSubmissionDraft;
+    reviewFormKey: string;
+}
+export interface CaptureUiHandlers {
+    onLauncherClick: () => void;
+    onClose: () => void;
+    onStartVideo: () => void;
+    onTakeScreenshot: () => void;
+    onStopRecording: () => void;
+    onSubmit: (draft: CaptureSubmissionDraft, options?: CaptureReviewSubmitOptions) => Promise<void>;
+    onCancel: () => void;
+    onRetry: () => void;
+    onCopyLink: () => void;
+    onOpenLink: () => void;
+}
+export interface CaptureUiCallbacks {
+    onClose: () => void;
+    onStartVideo: () => Promise<{
+        startedAt: number;
+    }>;
+    onTakeScreenshot: () => Promise<void>;
+    onStopRecording: () => Promise<void>;
+    onSubmit: (draft: CaptureSubmissionDraft, options?: CaptureReviewSubmitOptions) => Promise<void>;
+    onReset: () => void;
+}
+export interface CaptureUiStore {
+    getSnapshot: () => CaptureUiState;
+    subscribe: (listener: () => void) => () => void;
+    patchState: (patch: Partial<CaptureUiState>) => void;
+    openChooser: () => void;
+    close: () => void;
+    showRecording: (startedAt: number) => void;
+    showReview: (input: {
+        media: CapturedMedia;
+        warnings: string[];
+        summary: CaptureDebuggerSummary;
+    }) => void;
+    showSuccess: (shareUrl?: string) => void;
+    showError: (message: string) => void;
+    setTitleIfEmpty: (value: string) => void;
+    destroy: () => void;
+}
+export interface MountedCaptureUi {
+    setHidden: (hidden: boolean) => void;
+    store: CaptureUiStore;
+    unmount: () => void;
+}

package/dist/utils.d.ts

@@ -0,0 +1,16 @@
+import type { BridgePayload } from "./types.js";
+export declare function normalizeKey(value: string): string;
+export declare function normalizeHost(value?: string): string;
+export declare function normalizeSubmitPath(value?: string): string;
+export declare function normalizeZIndex(value?: number): number;
+export declare function isBridgePayload(value: unknown): value is BridgePayload;
+export declare function createSessionId(): string;
+export declare function toUserError(error: unknown): string;
+export declare function getPageUrl(): string;
+export declare function getPageTitle(): string;
+export declare function getDeviceInfo(): {
+    browser?: string;
+    os?: string;
+    viewport?: string;
+};
+export declare function formatDuration(durationMs: number): string;

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@crikket-io/capture",
+  "version": "0.1.0",
+  "description": "Embeddable browser capture SDK for collecting bug reports from websites.",
+  "license": "AGPL-3.0-only",
+  "homepage": "https://crikket.io/docs",
+  "bugs": {
+    "url": "https://github.com/redpangilinan/crikket/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/redpangilinan/crikket.git",
+    "directory": "sdks/capture"
+  },
+  "keywords": [
+    "bug-reporting",
+    "capture-sdk",
+    "debugging",
+    "feedback-widget",
+    "react",
+    "screen-recording",
+    "screenshot"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./browser": {
+      "types": "./dist/browser.d.ts",
+      "import": "./dist/browser.js",
+      "default": "./dist/browser.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "import": "./react.js",
+      "default": "./react.js"
+    }
+  },
+  "sideEffects": [
+    "./dist/browser.js",
+    "./dist/capture.css",
+    "./dist/launcher.css"
+  ],
+  "files": [
+    "dist",
+    "react.d.ts",
+    "react.js",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "bun run ./scripts/build.ts",
+    "prepack": "bun run build",
+    "dev": "bun run ./scripts/build.ts --watch",
+    "check-types": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.scripts.json",
+    "test": "bun test test"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@crikket/capture-core": "workspace:*",
+    "@crikket/shared": "workspace:*"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "catalog:",
+    "@crikket/config": "workspace:*",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "postcss": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "tailwindcss": "catalog:",
+    "typescript": "catalog:"
+  }
+}

package/react.d.ts

@@ -0,0 +1,2 @@
+export type { CapturePluginProps } from "./dist/react.js"
+export { CapturePlugin } from "./dist/react.js"

package/react.js

@@ -0,0 +1 @@
+export { CapturePlugin } from "./dist/react.js"