glitchgrab 1.10.0 → 1.12.0

package/README.md

@@ -118,9 +118,12 @@ function MyComponent() {
   // Report with a specific type
   await report("FEATURE_REQUEST", "Add dark mode support");
 
-  // Open the Report Bug modal programmatically (captures screenshot + shows dialog)
+  // Open the Report Bug modal (captures screenshot + shows dialog)
   openReportDialog();
 
+  // Open with pre-filled description
+  openReportDialog({ description: "Error on /settings: Something went wrong" });
+
   // Add custom breadcrumbs for debugging context
   addBreadcrumb("User clicked checkout", { cartSize: "3" });
 }

package/dist/index.d.mts

@@ -14,6 +14,7 @@ interface GlitchgrabConfig {
     maxBreadcrumbs?: number;
 }
 type ReportType = "BUG" | "FEATURE_REQUEST" | "QUESTION" | "OTHER";
+type ReportSeverity = "low" | "medium" | "high";
 interface ReportPayload {
     token: string;
     source: "SDK_AUTO" | "SDK_USER_REPORT";
@@ -93,6 +94,10 @@ interface ReportButtonProps {
     className?: string;
     /** Allow reporting feature requests, questions, not just bugs */
     types?: ReportType[];
+    /** Dialog variant: "classic" (single screen) or "stepper" (3-step wizard). Default: "classic" */
+    variant?: "classic" | "stepper";
+    /** Show severity picker in stepper mode for BUG type. Default: true */
+    showSeverity?: boolean;
 }
 interface UseGlitchgrabReturn {
     /** Report a bug programmatically */
@@ -102,7 +107,10 @@ interface UseGlitchgrabReturn {
     /** Add a custom breadcrumb */
     addBreadcrumb: (message: string, data?: Record<string, string>) => void;
     /** Open the ReportButton modal programmatically (captures screenshot + shows dialog) */
-    openReportDialog: () => void;
+    openReportDialog: (options?: {
+        description?: string;
+        type?: ReportType;
+    }) => void;
     /** The token being used */
     token: string;
     /** The base URL of the Glitchgrab API */
@@ -129,7 +137,7 @@ interface UseGlitchgrabReturn {
 declare function useGlitchgrab(): UseGlitchgrabReturn;
 declare function GlitchgrabProvider(props: GlitchgrabProviderProps): react_jsx_runtime.JSX.Element;
 
-declare function ReportButton({ position, label, className, children, }: ReportButtonProps & {
+declare function ReportButton({ position, label, className, variant, showSeverity, types, children, }: ReportButtonProps & {
     /** Render prop — receives { onClick, capturing } so you can use your own trigger button */
     children?: (props: {
         onClick: () => void;
@@ -166,6 +174,8 @@ interface GlitchgrabReport {
     reporterPhone: string | null;
     pageUrl: string | null;
     createdAt: string;
+    /** Number of comments on the linked GitHub issue (0 if no issue) */
+    commentCount: number;
     issue: {
         githubNumber: number;
         githubUrl: string;
@@ -259,4 +269,4 @@ declare function captureContext(visitedPages: string[]): CapturedContext;
  */
 declare function sendReport(payload: ReportPayload, baseUrl?: string): Promise<ReportResult | null>;
 
-export { type Breadcrumb, type BreadcrumbType, type CapturedContext, type DeviceInfo, type GlitchgrabConfig, GlitchgrabErrorBoundary, GlitchgrabProvider, type GlitchgrabProviderProps, type GlitchgrabSession, ReportButton, type ReportButtonProps, type ReportPayload, type ReportResult, type ReportType, type UseGlitchgrabReturn, addBreadcrumb, captureContext, captureDeviceInfo, clearBreadcrumbs, fetchGlitchgrabReports, getBreadcrumbs, initBreadcrumbs, sanitizeUrl, sendReport, useGlitchgrab, useGlitchgrabActions, useGlitchgrabReports };
+export { type Breadcrumb, type BreadcrumbType, type CapturedContext, type DeviceInfo, type GlitchgrabConfig, GlitchgrabErrorBoundary, GlitchgrabProvider, type GlitchgrabProviderProps, type GlitchgrabReport, type GlitchgrabSession, ReportButton, type ReportButtonProps, type ReportPayload, type ReportResult, type ReportSeverity, type ReportType, type UseGlitchgrabReturn, addBreadcrumb, captureContext, captureDeviceInfo, clearBreadcrumbs, fetchGlitchgrabReports, getBreadcrumbs, initBreadcrumbs, sanitizeUrl, sendReport, useGlitchgrab, useGlitchgrabActions, useGlitchgrabReports };

package/dist/index.d.ts

@@ -14,6 +14,7 @@ interface GlitchgrabConfig {
     maxBreadcrumbs?: number;
 }
 type ReportType = "BUG" | "FEATURE_REQUEST" | "QUESTION" | "OTHER";
+type ReportSeverity = "low" | "medium" | "high";
 interface ReportPayload {
     token: string;
     source: "SDK_AUTO" | "SDK_USER_REPORT";
@@ -93,6 +94,10 @@ interface ReportButtonProps {
     className?: string;
     /** Allow reporting feature requests, questions, not just bugs */
     types?: ReportType[];
+    /** Dialog variant: "classic" (single screen) or "stepper" (3-step wizard). Default: "classic" */
+    variant?: "classic" | "stepper";
+    /** Show severity picker in stepper mode for BUG type. Default: true */
+    showSeverity?: boolean;
 }
 interface UseGlitchgrabReturn {
     /** Report a bug programmatically */
@@ -102,7 +107,10 @@ interface UseGlitchgrabReturn {
     /** Add a custom breadcrumb */
     addBreadcrumb: (message: string, data?: Record<string, string>) => void;
     /** Open the ReportButton modal programmatically (captures screenshot + shows dialog) */
-    openReportDialog: () => void;
+    openReportDialog: (options?: {
+        description?: string;
+        type?: ReportType;
+    }) => void;
     /** The token being used */
     token: string;
     /** The base URL of the Glitchgrab API */
@@ -129,7 +137,7 @@ interface UseGlitchgrabReturn {
 declare function useGlitchgrab(): UseGlitchgrabReturn;
 declare function GlitchgrabProvider(props: GlitchgrabProviderProps): react_jsx_runtime.JSX.Element;
 
-declare function ReportButton({ position, label, className, children, }: ReportButtonProps & {
+declare function ReportButton({ position, label, className, variant, showSeverity, types, children, }: ReportButtonProps & {
     /** Render prop — receives { onClick, capturing } so you can use your own trigger button */
     children?: (props: {
         onClick: () => void;
@@ -166,6 +174,8 @@ interface GlitchgrabReport {
     reporterPhone: string | null;
     pageUrl: string | null;
     createdAt: string;
+    /** Number of comments on the linked GitHub issue (0 if no issue) */
+    commentCount: number;
     issue: {
         githubNumber: number;
         githubUrl: string;
@@ -259,4 +269,4 @@ declare function captureContext(visitedPages: string[]): CapturedContext;
  */
 declare function sendReport(payload: ReportPayload, baseUrl?: string): Promise<ReportResult | null>;
 
-export { type Breadcrumb, type BreadcrumbType, type CapturedContext, type DeviceInfo, type GlitchgrabConfig, GlitchgrabErrorBoundary, GlitchgrabProvider, type GlitchgrabProviderProps, type GlitchgrabSession, ReportButton, type ReportButtonProps, type ReportPayload, type ReportResult, type ReportType, type UseGlitchgrabReturn, addBreadcrumb, captureContext, captureDeviceInfo, clearBreadcrumbs, fetchGlitchgrabReports, getBreadcrumbs, initBreadcrumbs, sanitizeUrl, sendReport, useGlitchgrab, useGlitchgrabActions, useGlitchgrabReports };
+export { type Breadcrumb, type BreadcrumbType, type CapturedContext, type DeviceInfo, type GlitchgrabConfig, GlitchgrabErrorBoundary, GlitchgrabProvider, type GlitchgrabProviderProps, type GlitchgrabReport, type GlitchgrabSession, ReportButton, type ReportButtonProps, type ReportPayload, type ReportResult, type ReportSeverity, type ReportType, type UseGlitchgrabReturn, addBreadcrumb, captureContext, captureDeviceInfo, clearBreadcrumbs, fetchGlitchgrabReports, getBreadcrumbs, initBreadcrumbs, sanitizeUrl, sendReport, useGlitchgrab, useGlitchgrabActions, useGlitchgrabReports };