glitchgrab 1.27.0 → 1.28.0

package/README.md

@@ -158,6 +158,19 @@ Once `GlitchgrabProvider` is mounted, these shortcuts work globally:
 
 No configuration needed — shortcuts are active as long as the provider is in the tree.
 
+### Showing the shortcut in your own UI
+
+The report dialog shows the shortcut on its first step. To advertise it elsewhere — a support menu, a sidebar hint — read `shortcutLabel` instead of hardcoding the string. It resolves to `⌘⇧G` on Mac and `Ctrl+Shift+G` everywhere else, and stays in sync with the handler:
+
+```tsx
+function SupportHint() {
+  const { shortcutLabel } = useGlitchgrab();
+  return <p>Found a bug? Press {shortcutLabel} anywhere to report it.</p>;
+}
+```
+
+It is SSR-safe: it renders `Ctrl+Shift+G` on the server and corrects to the platform label after mount.
+
 ## How do I fetch reports by user?
 
 ### React hook (recommended)

package/dist/index.d.mts

@@ -127,6 +127,12 @@ interface UseGlitchgrabReturn {
      * Returns the polished text, or the original text on any failure (never throws).
      */
     enhanceText: (text: string, screenshot?: string | null) => Promise<string>;
+    /**
+     * OS-aware label for the shortcut that opens the report dialog —
+     * `⌘⇧G` on Mac, `Ctrl+Shift+G` elsewhere. Render this instead of
+     * hardcoding the shortcut, so the hint stays in sync with the handler.
+     */
+    shortcutLabel: string;
     /** The token being used */
     token: string;
     /** The base URL of the Glitchgrab API */
@@ -298,6 +304,24 @@ declare function addBreadcrumb(type: BreadcrumbType, message: string, data?: Rec
 declare function getBreadcrumbs(): Breadcrumb[];
 declare function clearBreadcrumbs(): void;
 
+/**
+ * The global keyboard shortcut that opens the Glitchgrab report dialog.
+ * Single source of truth — the provider's keydown handler and every label
+ * rendered anywhere (SDK dialog, host app UI) derive from this.
+ */
+/** Server-safe label. Used during SSR and as the non-Mac label. */
+declare const GLITCHGRAB_SHORTCUT = "Ctrl+Shift+G";
+/** Mac label, using the platform's modifier glyphs. */
+declare const GLITCHGRAB_SHORTCUT_MAC = "\u2318\u21E7G";
+/**
+ * OS-aware label for the report-dialog shortcut — `⌘⇧G` on Mac,
+ * `Ctrl+Shift+G` elsewhere. Returns the non-Mac label on the server, so
+ * render it client-side (or after mount) to avoid a hydration mismatch.
+ */
+declare function getShortcutLabel(): string;
+/** True when the keyboard event matches the report-dialog shortcut. */
+declare function matchesShortcut(e: KeyboardEvent): boolean;
+
 declare function sanitizeUrl(url: string): string;
 declare function captureDeviceInfo(): DeviceInfo | null;
 declare function captureContext(visitedPages: string[]): CapturedContext;
@@ -329,4 +353,4 @@ declare function computeSignature(params: {
 declare function shouldSkipDuplicate(signature: string, windowMs?: number, now?: number): boolean;
 declare function clearDedupCache(): void;
 
-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, clearDedupCache, computeSignature, enhanceText, fetchGlitchgrabReports, getBreadcrumbs, initBreadcrumbs, sanitizeUrl, sendReport, shouldSkipDuplicate, useGlitchgrab, useGlitchgrabActions, useGlitchgrabReports };
+export { type Breadcrumb, type BreadcrumbType, type CapturedContext, type DeviceInfo, GLITCHGRAB_SHORTCUT, GLITCHGRAB_SHORTCUT_MAC, 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, clearDedupCache, computeSignature, enhanceText, fetchGlitchgrabReports, getBreadcrumbs, getShortcutLabel, initBreadcrumbs, matchesShortcut, sanitizeUrl, sendReport, shouldSkipDuplicate, useGlitchgrab, useGlitchgrabActions, useGlitchgrabReports };

package/dist/index.d.ts

@@ -127,6 +127,12 @@ interface UseGlitchgrabReturn {
      * Returns the polished text, or the original text on any failure (never throws).
      */
     enhanceText: (text: string, screenshot?: string | null) => Promise<string>;
+    /**
+     * OS-aware label for the shortcut that opens the report dialog —
+     * `⌘⇧G` on Mac, `Ctrl+Shift+G` elsewhere. Render this instead of
+     * hardcoding the shortcut, so the hint stays in sync with the handler.
+     */
+    shortcutLabel: string;
     /** The token being used */
     token: string;
     /** The base URL of the Glitchgrab API */
@@ -298,6 +304,24 @@ declare function addBreadcrumb(type: BreadcrumbType, message: string, data?: Rec
 declare function getBreadcrumbs(): Breadcrumb[];
 declare function clearBreadcrumbs(): void;
 
+/**
+ * The global keyboard shortcut that opens the Glitchgrab report dialog.
+ * Single source of truth — the provider's keydown handler and every label
+ * rendered anywhere (SDK dialog, host app UI) derive from this.
+ */
+/** Server-safe label. Used during SSR and as the non-Mac label. */
+declare const GLITCHGRAB_SHORTCUT = "Ctrl+Shift+G";
+/** Mac label, using the platform's modifier glyphs. */
+declare const GLITCHGRAB_SHORTCUT_MAC = "\u2318\u21E7G";
+/**
+ * OS-aware label for the report-dialog shortcut — `⌘⇧G` on Mac,
+ * `Ctrl+Shift+G` elsewhere. Returns the non-Mac label on the server, so
+ * render it client-side (or after mount) to avoid a hydration mismatch.
+ */
+declare function getShortcutLabel(): string;
+/** True when the keyboard event matches the report-dialog shortcut. */
+declare function matchesShortcut(e: KeyboardEvent): boolean;
+
 declare function sanitizeUrl(url: string): string;
 declare function captureDeviceInfo(): DeviceInfo | null;
 declare function captureContext(visitedPages: string[]): CapturedContext;
@@ -329,4 +353,4 @@ declare function computeSignature(params: {
 declare function shouldSkipDuplicate(signature: string, windowMs?: number, now?: number): boolean;
 declare function clearDedupCache(): void;
 
-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, clearDedupCache, computeSignature, enhanceText, fetchGlitchgrabReports, getBreadcrumbs, initBreadcrumbs, sanitizeUrl, sendReport, shouldSkipDuplicate, useGlitchgrab, useGlitchgrabActions, useGlitchgrabReports };
+export { type Breadcrumb, type BreadcrumbType, type CapturedContext, type DeviceInfo, GLITCHGRAB_SHORTCUT, GLITCHGRAB_SHORTCUT_MAC, 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, clearDedupCache, computeSignature, enhanceText, fetchGlitchgrabReports, getBreadcrumbs, getShortcutLabel, initBreadcrumbs, matchesShortcut, sanitizeUrl, sendReport, shouldSkipDuplicate, useGlitchgrab, useGlitchgrabActions, useGlitchgrabReports };

package/dist/index.js

@@ -31,6 +31,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  GLITCHGRAB_SHORTCUT: () => GLITCHGRAB_SHORTCUT,
+  GLITCHGRAB_SHORTCUT_MAC: () => GLITCHGRAB_SHORTCUT_MAC,
   GlitchgrabErrorBoundary: () => GlitchgrabErrorBoundary,
   GlitchgrabProvider: () => GlitchgrabProvider,
   ReportButton: () => ReportButton,
@@ -43,7 +45,9 @@ __export(index_exports, {
   enhanceText: () => enhanceText,
   fetchGlitchgrabReports: () => fetchGlitchgrabReports,
   getBreadcrumbs: () => getBreadcrumbs,
+  getShortcutLabel: () => getShortcutLabel,
   initBreadcrumbs: () => initBreadcrumbs,
+  matchesShortcut: () => matchesShortcut,
   sanitizeUrl: () => sanitizeUrl,
   sendReport: () => sendReport,
   shouldSkipDuplicate: () => shouldSkipDuplicate,
@@ -781,6 +785,24 @@ function AnnotationCanvas({ imageSrc, onSave, onCancel }) {
   );
 }
 
+// src/shortcut.ts
+var GLITCHGRAB_SHORTCUT = "Ctrl+Shift+G";
+var GLITCHGRAB_SHORTCUT_MAC = "\u2318\u21E7G";
+function isMac() {
+  try {
+    if (typeof navigator === "undefined") return false;
+    return /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+  } catch (e) {
+    return false;
+  }
+}
+function getShortcutLabel() {
+  return isMac() ? GLITCHGRAB_SHORTCUT_MAC : GLITCHGRAB_SHORTCUT;
+}
+function matchesShortcut(e) {
+  return (e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "g";
+}
+
 // src/report-dialog.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function useIsDark() {
@@ -1490,6 +1512,24 @@ function ReportDialog({
                                       },
                                       children: step === 1 ? "What's on your mind?" : "Tell us more"
                                     }
+                                  ),
+                                  step === 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                    "span",
+                                    {
+                                      title: "Press this anywhere to open Glitchgrab",
+                                      style: {
+                                        fontSize: "10px",
+                                        fontWeight: 600,
+                                        lineHeight: 1,
+                                        padding: "3px 6px",
+                                        borderRadius: "4px",
+                                        border: `1px solid ${t.inputBorder}`,
+                                        background: t.inputBg,
+                                        color: t.textMuted,
+                                        whiteSpace: "nowrap"
+                                      },
+                                      children: getShortcutLabel()
+                                    }
                                   )
                                 ]
                               }
@@ -2985,7 +3025,7 @@ function GlitchgrabProviderInner({
     try {
       if (typeof window === "undefined") return;
       const handleKeyDown = (e) => {
-        if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "g") {
+        if (matchesShortcut(e)) {
           e.preventDefault();
           openReportDialog();
         }
@@ -2995,6 +3035,10 @@ function GlitchgrabProviderInner({
     } catch (e) {
     }
   }, [openReportDialog]);
+  const [shortcutLabel, setShortcutLabel] = (0, import_react3.useState)(GLITCHGRAB_SHORTCUT);
+  (0, import_react3.useEffect)(() => {
+    setShortcutLabel(getShortcutLabel());
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     GlitchgrabContext.Provider,
     {
@@ -3005,7 +3049,8 @@ function GlitchgrabProviderInner({
         report,
         addBreadcrumb: addBreadcrumb2,
         openReportDialog,
-        enhanceText: enhance
+        enhanceText: enhance,
+        shortcutLabel
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -3237,6 +3282,8 @@ function useGlitchgrabActions({
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  GLITCHGRAB_SHORTCUT,
+  GLITCHGRAB_SHORTCUT_MAC,
   GlitchgrabErrorBoundary,
   GlitchgrabProvider,
   ReportButton,
@@ -3249,7 +3296,9 @@ function useGlitchgrabActions({
   enhanceText,
   fetchGlitchgrabReports,
   getBreadcrumbs,
+  getShortcutLabel,
   initBreadcrumbs,
+  matchesShortcut,
   sanitizeUrl,
   sendReport,
   shouldSkipDuplicate,