glitchgrab 1.32.0 → 1.34.0

package/dist/index.mjs

@@ -5,10 +5,10 @@ import {
   createContext,
   useContext,
   useRef as useRef3,
-  useEffect as useEffect3,
-  useCallback,
-  useMemo,
-  useState as useState3
+  useEffect as useEffect4,
+  useCallback as useCallback2,
+  useMemo as useMemo2,
+  useState as useState4
 } from "react";
 
 // src/error-boundary.tsx
@@ -630,9 +630,9 @@ function topStackFrame(stack) {
   if (!stack) return "";
   const lines = stack.split("\n");
   for (const line of lines) {
-    const t = line.trim();
-    if (t.startsWith("at ") || t.includes("@")) {
-      return t;
+    const t2 = line.trim();
+    if (t2.startsWith("at ") || t2.includes("@")) {
+      return t2;
     }
   }
   return "";
@@ -1273,7 +1273,7 @@ function initialsOf(name) {
 }
 function ReporterChip({
   reporter,
-  t
+  t: t2
 }) {
   var _a;
   const [avatarFailed, setAvatarFailed] = useState2(false);
@@ -1309,9 +1309,9 @@ function ReporterChip({
               fontSize: "8px",
               fontWeight: 700,
               letterSpacing: "0.02em",
-              background: isAnonymous ? t.inputBg : t.accent,
-              color: isAnonymous ? t.textMuted : t.accentText,
-              border: `1px solid ${isAnonymous ? t.inputBorder : "transparent"}`
+              background: isAnonymous ? t2.inputBg : t2.accent,
+              color: isAnonymous ? t2.textMuted : t2.accentText,
+              border: `1px solid ${isAnonymous ? t2.inputBorder : "transparent"}`
             },
             children: showAvatarImage ? /* @__PURE__ */ jsx2(
               "img",
@@ -1342,7 +1342,7 @@ function ReporterChip({
           {
             style: {
               fontSize: "11px",
-              color: t.textMuted,
+              color: t2.textMuted,
               overflow: "hidden",
               textOverflow: "ellipsis",
               whiteSpace: "nowrap"
@@ -1455,7 +1455,9 @@ function ReportDialog({
   types,
   showSeverity = true,
   captureScreenshot = captureViaHtml2Canvas,
-  reporter
+  reporter,
+  onClose,
+  headerSlot
 }) {
   const [isEnhancing, setIsEnhancing] = useState2(false);
   const [isEnhanced, setIsEnhanced] = useState2(false);
@@ -1597,7 +1599,7 @@ function ReportDialog({
     (_c = tiles[next]) == null ? void 0 : _c.focus();
   };
   const isDark = useIsDark();
-  const t = getTheme(isDark);
+  const t2 = getTheme(isDark);
   const canZoomPreview = previewNatural !== null && typeof window !== "undefined" && (previewNatural.w > window.innerWidth - 32 || previewNatural.h > window.innerHeight - 80);
   const handleFileUpload = (e) => {
     const files = e.target.files;
@@ -1773,7 +1775,7 @@ function ReportDialog({
     sarvamChunksRef.current = [];
     const stream = streamRef.current;
     streamRef.current = null;
-    stream == null ? void 0 : stream.getTracks().forEach((t2) => t2.stop());
+    stream == null ? void 0 : stream.getTracks().forEach((t22) => t22.stop());
     try {
       (_b = mediaRecorderRef.current) == null ? void 0 : _b.stop();
     } catch (e) {
@@ -1796,6 +1798,7 @@ function ReportDialog({
   const handleClose = () => {
     stopVoice();
     setIsOpen(false);
+    onClose == null ? void 0 : onClose();
     closePreview();
     setAnnotatingIndex(null);
     setStep(1);
@@ -1834,7 +1837,7 @@ function ReportDialog({
         if (e.data.size > 0) sarvamChunksRef.current.push(e.data);
       };
       rec.onstop = async () => {
-        stream.getTracks().forEach((t2) => t2.stop());
+        stream.getTracks().forEach((t22) => t22.stop());
         if (streamRef.current === stream) streamRef.current = null;
         mediaRecorderRef.current = null;
         const chunks = sarvamChunksRef.current;
@@ -2035,7 +2038,7 @@ function ReportDialog({
           button[data-gg-type]{transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
           button[data-gg-type]:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.18)}
           button[data-gg-type]:active{transform:translateY(0) scale(.985);box-shadow:none}
-          button[data-gg-type]:focus-visible{outline:2px solid ${t.accent};outline-offset:2px}
+          button[data-gg-type]:focus-visible{outline:2px solid ${t2.accent};outline-offset:2px}
           @keyframes gg-star-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
           button[data-gg-star]{transition:transform .12s ease}
           button[data-gg-star]:hover{transform:scale(1.18)}
@@ -2078,12 +2081,12 @@ function ReportDialog({
                 maxHeight: "calc(100dvh - 32px)",
                 display: "flex",
                 flexDirection: "column",
-                backgroundColor: t.bg,
+                backgroundColor: t2.bg,
                 borderRadius: "12px",
                 boxShadow: "0 20px 60px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1)",
                 fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
                 overflow: "hidden",
-                color: t.text,
+                color: t2.text,
                 isolation: "isolate"
               },
               children: [
@@ -2093,7 +2096,7 @@ function ReportDialog({
                     style: {
                       flexShrink: 0,
                       padding: "16px 16px 12px",
-                      borderBottom: `1px solid ${t.border}`
+                      borderBottom: `1px solid ${t2.border}`
                     },
                     children: [
                       /* @__PURE__ */ jsxs2(
@@ -2139,7 +2142,7 @@ function ReportDialog({
                                             "path",
                                             {
                                               d: "M10 3L5 8L10 13",
-                                              stroke: t.textMuted,
+                                              stroke: t2.textMuted,
                                               strokeWidth: "2",
                                               strokeLinecap: "round",
                                               strokeLinejoin: "round"
@@ -2155,7 +2158,7 @@ function ReportDialog({
                                       style: {
                                         fontSize: "15px",
                                         fontWeight: 600,
-                                        color: t.text
+                                        color: t2.text
                                       },
                                       children: step === 1 ? "What's on your mind?" : "Tell us more"
                                     }
@@ -2182,9 +2185,9 @@ function ReportDialog({
                                         lineHeight: 1,
                                         padding: "3px 6px",
                                         borderRadius: "4px",
-                                        border: `1px solid ${t.inputBorder}`,
-                                        background: t.inputBg,
-                                        color: t.textMuted,
+                                        border: `1px solid ${t2.inputBorder}`,
+                                        background: t2.inputBg,
+                                        color: t2.textMuted,
                                         whiteSpace: "nowrap"
                                       },
                                       children: getShortcutLabel()
@@ -2217,7 +2220,7 @@ function ReportDialog({
                                             "path",
                                             {
                                               d: "M4 4L12 12M12 4L4 12",
-                                              stroke: t.textMuted,
+                                              stroke: t2.textMuted,
                                               strokeWidth: "2",
                                               strokeLinecap: "round"
                                             }
@@ -2254,7 +2257,7 @@ function ReportDialog({
                                       width: "8px",
                                       height: "8px",
                                       borderRadius: "50%",
-                                      backgroundColor: s <= step ? t.accent : t.inputBorder,
+                                      backgroundColor: s <= step ? t2.accent : t2.inputBorder,
                                       transition: "background-color 0.2s ease"
                                     }
                                   }
@@ -2265,7 +2268,7 @@ function ReportDialog({
                                     style: {
                                       width: "40px",
                                       height: "2px",
-                                      backgroundColor: s < step ? t.accent : t.inputBorder,
+                                      backgroundColor: s < step ? t2.accent : t2.inputBorder,
                                       transition: "background-color 0.2s ease"
                                     }
                                   }
@@ -2294,7 +2297,7 @@ function ReportDialog({
                         style: {
                           textAlign: "center",
                           padding: "20px 0",
-                          color: t.accent,
+                          color: t2.accent,
                           fontSize: "14px",
                           fontWeight: 500
                         },
@@ -2304,6 +2307,7 @@ function ReportDialog({
                         ]
                       }
                     ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+                      step === 1 && headerSlot ? /* @__PURE__ */ jsx2("div", { style: { marginBottom: "14px" }, children: headerSlot }) : null,
                       step === 1 && sendFeedback2 && /* @__PURE__ */ jsxs2(
                         "div",
                         {
@@ -2324,7 +2328,7 @@ function ReportDialog({
                             /* @__PURE__ */ jsx2(
                               "span",
                               {
-                                style: { fontSize: "13px", fontWeight: 600, color: t.text },
+                                style: { fontSize: "13px", fontWeight: 600, color: t2.text },
                                 children: "How are we doing?"
                               }
                             ),
@@ -2377,9 +2381,9 @@ function ReportDialog({
                             marginBottom: "16px"
                           },
                           children: [
-                            /* @__PURE__ */ jsx2("span", { style: { flex: 1, height: "1px", background: t.border } }),
-                            /* @__PURE__ */ jsx2("span", { style: { fontSize: "11px", color: t.textMuted }, children: "or report something" }),
-                            /* @__PURE__ */ jsx2("span", { style: { flex: 1, height: "1px", background: t.border } })
+                            /* @__PURE__ */ jsx2("span", { style: { flex: 1, height: "1px", background: t2.border } }),
+                            /* @__PURE__ */ jsx2("span", { style: { fontSize: "11px", color: t2.textMuted }, children: "or report something" }),
+                            /* @__PURE__ */ jsx2("span", { style: { flex: 1, height: "1px", background: t2.border } })
                           ]
                         }
                       ),
@@ -2392,9 +2396,9 @@ function ReportDialog({
                             gap: "10px",
                             marginBottom: "14px",
                             padding: "8px 10px",
-                            border: `1px solid ${t.inputBorder}`,
+                            border: `1px solid ${t2.inputBorder}`,
                             borderRadius: "8px",
-                            background: t.inputBg
+                            background: t2.inputBg
                           },
                           children: [
                             /* @__PURE__ */ jsx2(
@@ -2407,12 +2411,12 @@ function ReportDialog({
                                   height: "24px",
                                   objectFit: "cover",
                                   borderRadius: "4px",
-                                  border: `1px solid ${t.border}`,
+                                  border: `1px solid ${t2.border}`,
                                   flexShrink: 0
                                 }
                               }
                             ),
-                            /* @__PURE__ */ jsx2("span", { style: { fontSize: "11px", color: t.textMuted, flex: 1 }, children: "Screenshot attached" }),
+                            /* @__PURE__ */ jsx2("span", { style: { fontSize: "11px", color: t2.textMuted, flex: 1 }, children: "Screenshot attached" }),
                             /* @__PURE__ */ jsx2(
                               "button",
                               {
@@ -2422,7 +2426,7 @@ function ReportDialog({
                                 style: {
                                   border: "none",
                                   background: "transparent",
-                                  color: t.textMuted,
+                                  color: t2.textMuted,
                                   cursor: "pointer",
                                   fontSize: "15px",
                                   lineHeight: 1,
@@ -2460,20 +2464,20 @@ function ReportDialog({
                                 gap: "9px",
                                 padding: "18px 10px",
                                 borderRadius: "8px",
-                                border: `1px solid ${t.inputBorder}`,
-                                background: t.inputBg,
+                                border: `1px solid ${t2.inputBorder}`,
+                                background: t2.inputBg,
                                 cursor: "pointer",
-                                color: t.text,
+                                color: t2.text,
                                 fontFamily: "inherit"
                               },
                               onMouseEnter: (e) => {
-                                e.currentTarget.style.borderColor = t.accent;
+                                e.currentTarget.style.borderColor = t2.accent;
                               },
                               onMouseLeave: (e) => {
-                                e.currentTarget.style.borderColor = t.inputBorder;
+                                e.currentTarget.style.borderColor = t2.inputBorder;
                               },
                               children: [
-                                getTypeIcon(type, t.accent, 22),
+                                getTypeIcon(type, t2.accent, 22),
                                 /* @__PURE__ */ jsx2(
                                   "span",
                                   {
@@ -2505,18 +2509,18 @@ function ReportDialog({
                               marginBottom: "10px",
                               padding: "4px 10px 4px 8px",
                               borderRadius: "999px",
-                              border: `1px solid ${isRating ? "rgba(245,158,11,0.4)" : t.inputBorder}`,
-                              background: isRating ? "rgba(245,158,11,0.1)" : t.inputBg,
-                              color: t.text,
+                              border: `1px solid ${isRating ? "rgba(245,158,11,0.4)" : t2.inputBorder}`,
+                              background: isRating ? "rgba(245,158,11,0.1)" : t2.inputBg,
+                              color: t2.text,
                               fontSize: "11px",
                               fontWeight: 600,
                               fontFamily: "inherit",
                               cursor: "pointer"
                             },
                             children: [
-                              getTypeIcon(reportType, isRating ? "#f59e0b" : t.accent, 13),
+                              getTypeIcon(reportType, isRating ? "#f59e0b" : t2.accent, 13),
                               getTypeLabel(reportType),
-                              /* @__PURE__ */ jsx2("span", { style: { color: t.textMuted, fontWeight: 400 }, children: "\xB7 change" })
+                              /* @__PURE__ */ jsx2("span", { style: { color: t2.textMuted, fontWeight: 400 }, children: "\xB7 change" })
                             ]
                           }
                         ),
@@ -2553,7 +2557,7 @@ function ReportDialog({
                                     {
                                       d: "M12 3l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.4 6.8 19.1l1-5.8L3.5 9.2l5.9-.9L12 3z",
                                       fill: filled ? "#f59e0b" : "transparent",
-                                      stroke: filled ? "#f59e0b" : t.inputBorder,
+                                      stroke: filled ? "#f59e0b" : t2.inputBorder,
                                       strokeWidth: "1.5",
                                       strokeLinejoin: "round"
                                     }
@@ -2584,24 +2588,24 @@ function ReportDialog({
                                 minHeight: "100px",
                                 padding: enhanceText2 ? "28px 12px 36px" : transcribeAudio2 ? "10px 12px 36px" : "10px 12px",
                                 borderRadius: "8px",
-                                border: `1px solid ${isTranscribing ? "#f59e0b" : isListening ? t.accent : t.inputBorder}`,
+                                border: `1px solid ${isTranscribing ? "#f59e0b" : isListening ? t2.accent : t2.inputBorder}`,
                                 fontSize: "14px",
                                 fontFamily: "inherit",
                                 resize: "none",
                                 outline: "none",
                                 boxSizing: "border-box",
-                                color: t.text,
-                                backgroundColor: t.inputBg,
+                                color: t2.text,
+                                backgroundColor: t2.inputBg,
                                 transition: "border-color 0.2s ease"
                               },
                               onKeyDown: handleSpaceDown,
                               onKeyUp: handleSpaceUp,
                               onFocus: (e) => {
-                                e.target.style.borderColor = t.accent;
+                                e.target.style.borderColor = t2.accent;
                               },
                               onBlur: (e) => {
                                 if (!isListening && !isTranscribing)
-                                  e.target.style.borderColor = t.inputBorder;
+                                  e.target.style.borderColor = t2.inputBorder;
                               },
                               autoFocus: true
                             }
@@ -2718,13 +2722,13 @@ function ReportDialog({
                                 display: "inline-flex",
                                 alignItems: "center",
                                 gap: "4px",
-                                background: t.inputBg,
+                                background: t2.inputBg,
                                 border: "none",
                                 padding: "2px 6px",
                                 borderRadius: "4px",
                                 fontFamily: "inherit",
                                 fontSize: "11px",
-                                color: t.textMuted,
+                                color: t2.textMuted,
                                 cursor: !description.trim() || isEnhancing ? "default" : "pointer",
                                 opacity: !description.trim() ? 0.5 : 1,
                                 zIndex: 1
@@ -2743,7 +2747,7 @@ function ReportDialog({
                                       "path",
                                       {
                                         d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3zM19 15l.75 2.25L22 18l-2.25.75L19 21l-.75-2.25L16 18l2.25-.75L19 15z",
-                                        stroke: t.textMuted,
+                                        stroke: t2.textMuted,
                                         strokeWidth: "1.5",
                                         strokeLinejoin: "round"
                                       }
@@ -2772,9 +2776,9 @@ function ReportDialog({
                                 alignItems: "center",
                                 justifyContent: "center",
                                 background: "transparent",
-                                border: `1.5px solid ${isListening ? "#ef4444" : t.inputBorder}`,
+                                border: `1.5px solid ${isListening ? "#ef4444" : t2.inputBorder}`,
                                 borderRadius: "6px",
-                                color: isListening ? "#ef4444" : t.textMuted,
+                                color: isListening ? "#ef4444" : t2.textMuted,
                                 cursor: "pointer",
                                 zIndex: 1,
                                 padding: 0,
@@ -2844,7 +2848,7 @@ function ReportDialog({
                               gap: "5px",
                               marginTop: "5px",
                               fontSize: "11px",
-                              color: t.text,
+                              color: t2.text,
                               opacity: 0.55,
                               userSelect: "none"
                             },
@@ -2869,7 +2873,7 @@ function ReportDialog({
                               padding: "6px 8px",
                               borderRadius: "6px",
                               background: isDark ? "rgba(34,211,238,0.06)" : "rgba(8,145,178,0.05)",
-                              border: `1px solid ${t.accent}40`
+                              border: `1px solid ${t2.accent}40`
                             },
                             children: [
                               /* @__PURE__ */ jsx2(
@@ -2884,7 +2888,7 @@ function ReportDialog({
                                     "path",
                                     {
                                       d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z",
-                                      stroke: t.accent,
+                                      stroke: t2.accent,
                                       strokeWidth: "1.5",
                                       strokeLinejoin: "round"
                                     }
@@ -2896,7 +2900,7 @@ function ReportDialog({
                                 {
                                   style: {
                                     fontSize: "11px",
-                                    color: t.textMuted,
+                                    color: t2.textMuted,
                                     flex: 1
                                   },
                                   children: "AI enhanced"
@@ -2913,9 +2917,9 @@ function ReportDialog({
                                   style: {
                                     padding: "2px 8px",
                                     borderRadius: "4px",
-                                    border: `1px solid ${t.accent}`,
-                                    background: t.accent,
-                                    color: t.accentText,
+                                    border: `1px solid ${t2.accent}`,
+                                    background: t2.accent,
+                                    color: t2.accentText,
                                     fontSize: "11px",
                                     fontWeight: 600,
                                     cursor: "pointer",
@@ -2936,9 +2940,9 @@ function ReportDialog({
                                   style: {
                                     padding: "2px 8px",
                                     borderRadius: "4px",
-                                    border: `1px solid ${t.inputBorder}`,
+                                    border: `1px solid ${t2.inputBorder}`,
                                     background: "transparent",
-                                    color: t.textMuted,
+                                    color: t2.textMuted,
                                     fontSize: "11px",
                                     fontWeight: 600,
                                     cursor: "pointer",
@@ -2968,7 +2972,7 @@ function ReportDialog({
                             {
                               style: {
                                 fontSize: "12px",
-                                color: t.textMuted,
+                                color: t2.textMuted,
                                 marginBottom: "6px",
                                 display: "block",
                                 fontWeight: 500
@@ -3007,7 +3011,7 @@ function ReportDialog({
                                           width: "100%",
                                           height: "100%",
                                           borderRadius: "6px",
-                                          border: `1px solid ${t.border}`,
+                                          border: `1px solid ${t2.border}`,
                                           objectFit: "cover",
                                           objectPosition: "top",
                                           cursor: "zoom-in",
@@ -3077,8 +3081,8 @@ function ReportDialog({
                                           height: "24px",
                                           borderRadius: "50%",
                                           border: "none",
-                                          background: t.accent,
-                                          color: t.accentText,
+                                          background: t2.accent,
+                                          color: t2.accentText,
                                           padding: 0,
                                           cursor: "pointer",
                                           display: "flex",
@@ -3131,7 +3135,7 @@ function ReportDialog({
                                     gap: "8px",
                                     padding: "6px 8px",
                                     borderRadius: "6px",
-                                    border: `1px solid ${t.border}`
+                                    border: `1px solid ${t2.border}`
                                   },
                                   children: [
                                     /* @__PURE__ */ jsxs2(
@@ -3147,7 +3151,7 @@ function ReportDialog({
                                             "path",
                                             {
                                               d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z",
-                                              stroke: t.textMuted,
+                                              stroke: t2.textMuted,
                                               strokeWidth: "1.5",
                                               strokeLinecap: "round",
                                               strokeLinejoin: "round"
@@ -3157,7 +3161,7 @@ function ReportDialog({
                                             "path",
                                             {
                                               d: "M14 2v6h6",
-                                              stroke: t.textMuted,
+                                              stroke: t2.textMuted,
                                               strokeWidth: "1.5",
                                               strokeLinecap: "round",
                                               strokeLinejoin: "round"
@@ -3171,7 +3175,7 @@ function ReportDialog({
                                       {
                                         style: {
                                           fontSize: "11px",
-                                          color: t.text,
+                                          color: t2.text,
                                           flex: 1,
                                           overflow: "hidden",
                                           textOverflow: "ellipsis",
@@ -3183,7 +3187,7 @@ function ReportDialog({
                                     /* @__PURE__ */ jsxs2(
                                       "span",
                                       {
-                                        style: { fontSize: "10px", color: t.textMuted },
+                                        style: { fontSize: "10px", color: t2.textMuted },
                                         children: [
                                           (a.size / 1024).toFixed(0),
                                           "KB"
@@ -3258,7 +3262,7 @@ function ReportDialog({
                               },
                               onDragLeave: () => setScreenshotDragOver(false),
                               style: {
-                                border: `1.5px dashed ${screenshotDragOver ? t.accent : t.inputBorder}`,
+                                border: `1.5px dashed ${screenshotDragOver ? t2.accent : t2.inputBorder}`,
                                 borderRadius: "8px",
                                 padding: screenshots.length + attachments.length > 0 ? "8px 12px" : "18px 12px",
                                 textAlign: "center",
@@ -3273,7 +3277,7 @@ function ReportDialog({
                                     margin: 0,
                                     fontSize: "11px",
                                     fontWeight: 500,
-                                    color: t.textMuted
+                                    color: t2.textMuted
                                   },
                                   children: screenshotDragOver ? "Drop to attach" : "+ Add more \xB7 Drag & drop \xB7 Paste"
                                 }
@@ -3299,7 +3303,7 @@ function ReportDialog({
                                           width: "18",
                                           height: "18",
                                           rx: "2",
-                                          stroke: t.textMuted,
+                                          stroke: t2.textMuted,
                                           strokeWidth: "1.5"
                                         }
                                       ),
@@ -3309,7 +3313,7 @@ function ReportDialog({
                                           cx: "8.5",
                                           cy: "8.5",
                                           r: "1.5",
-                                          stroke: t.textMuted,
+                                          stroke: t2.textMuted,
                                           strokeWidth: "1.5"
                                         }
                                       ),
@@ -3317,7 +3321,7 @@ function ReportDialog({
                                         "path",
                                         {
                                           d: "M21 15l-5-5L5 21",
-                                          stroke: t.textMuted,
+                                          stroke: t2.textMuted,
                                           strokeWidth: "1.5",
                                           strokeLinecap: "round",
                                           strokeLinejoin: "round"
@@ -3333,7 +3337,7 @@ function ReportDialog({
                                       margin: 0,
                                       fontSize: "12px",
                                       fontWeight: 600,
-                                      color: t.text
+                                      color: t2.text
                                     },
                                     children: screenshotDragOver ? "Drop to attach" : "Add screenshots or files"
                                   }
@@ -3344,7 +3348,7 @@ function ReportDialog({
                                     style: {
                                       margin: "3px 0 0",
                                       fontSize: "11px",
-                                      color: t.textMuted
+                                      color: t2.textMuted
                                     },
                                     children: "Images, PDF, DOC, XLS \xB7 Drag & drop \xB7 Paste \u2318V / Ctrl+V \xB7 Click to browse"
                                   }
@@ -3359,7 +3363,7 @@ function ReportDialog({
                             {
                               style: {
                                 fontSize: "12px",
-                                color: t.textMuted,
+                                color: t2.textMuted,
                                 marginBottom: "6px",
                                 display: "block"
                               },
@@ -3375,9 +3379,9 @@ function ReportDialog({
                                 flex: 1,
                                 padding: "6px 0",
                                 borderRadius: "6px",
-                                border: `1px solid ${severity === s ? t.accent : t.inputBorder}`,
-                                background: severity === s ? t.accent : "transparent",
-                                color: severity === s ? t.accentText : t.text,
+                                border: `1px solid ${severity === s ? t2.accent : t2.inputBorder}`,
+                                background: severity === s ? t2.accent : "transparent",
+                                color: severity === s ? t2.accentText : t2.text,
                                 fontSize: "12px",
                                 fontWeight: 600,
                                 cursor: "pointer",
@@ -3413,8 +3417,8 @@ function ReportDialog({
                               padding: "10px",
                               borderRadius: "8px",
                               border: "none",
-                              backgroundColor: submitDisabled ? t.bgSecondary : t.accent,
-                              color: submitDisabled ? t.textMuted : t.accentText,
+                              backgroundColor: submitDisabled ? t2.bgSecondary : t2.accent,
+                              color: submitDisabled ? t2.textMuted : t2.accentText,
                               fontSize: "14px",
                               fontWeight: 600,
                               cursor: submitDisabled ? "not-allowed" : "pointer",
@@ -3433,20 +3437,20 @@ function ReportDialog({
                   {
                     style: {
                       padding: "8px 16px 10px",
-                      borderTop: `1px solid ${t.border}`,
+                      borderTop: `1px solid ${t2.border}`,
                       display: "flex",
                       alignItems: "center",
                       justifyContent: "space-between",
                       gap: "12px"
                     },
                     children: [
-                      /* @__PURE__ */ jsx2(ReporterChip, { reporter, t }),
+                      /* @__PURE__ */ jsx2(ReporterChip, { reporter, t: t2 }),
                       /* @__PURE__ */ jsx2(
                         "span",
                         {
                           style: {
                             fontSize: "11px",
-                            color: t.textMuted,
+                            color: t2.textMuted,
                             whiteSpace: "nowrap",
                             flexShrink: 0
                           },
@@ -3574,8 +3578,8 @@ function ReportDialog({
                         padding: "8px 14px",
                         borderRadius: "999px",
                         border: "none",
-                        background: t.accent,
-                        color: t.accentText,
+                        background: t2.accent,
+                        color: t2.accentText,
                         fontSize: "13px",
                         fontWeight: 700,
                         cursor: "pointer",
@@ -3614,7 +3618,7 @@ function ReportDialog({
                   "span",
                   {
                     style: {
-                      color: t.textMuted,
+                      color: t2.textMuted,
                       fontSize: "12px"
                     },
                     children: [
@@ -3800,6 +3804,400 @@ function getTypeIcon(type, color, size = 24) {
   }
 }
 
+// src/booking-dialog.tsx
+import { useCallback, useEffect as useEffect3, useMemo, useState as useState3 } from "react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var t = {
+  bg: "#141414",
+  surface: "#1c1c1c",
+  border: "#2a2a2a",
+  text: "#e5e5e5",
+  muted: "#9aa0a6",
+  accent: "#3b82f6",
+  danger: "#f87171"
+};
+function localZone() {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+  } catch (e) {
+    return "UTC";
+  }
+}
+function dayKey(iso) {
+  return new Date(iso).toDateString();
+}
+function formatDay(iso) {
+  return new Date(iso).toLocaleDateString(void 0, {
+    weekday: "short",
+    day: "numeric",
+    month: "short"
+  });
+}
+function formatTime(iso) {
+  return new Date(iso).toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
+}
+function BookingDialog({
+  token,
+  baseUrl,
+  open,
+  onClose
+}) {
+  var _a;
+  const [step, setStep] = useState3("slots");
+  const [slots, setSlots] = useState3(null);
+  const [heading, setHeading] = useState3({
+    title: "Book a demo",
+    description: null
+  });
+  const [whatsappUrl, setWhatsappUrl] = useState3(null);
+  const [selected, setSelected] = useState3(null);
+  const [name, setName] = useState3("");
+  const [email, setEmail] = useState3("");
+  const [phone, setPhone] = useState3("");
+  const [note, setNote] = useState3("");
+  const [code, setCode] = useState3("");
+  const [bookingId, setBookingId] = useState3(null);
+  const [meetUrl, setMeetUrl] = useState3(null);
+  const [busy, setBusy] = useState3(false);
+  const [error, setError] = useState3(null);
+  const headers = useMemo(
+    () => ({ Authorization: `Bearer ${token}`, "Content-Type": "application/json" }),
+    [token]
+  );
+  const loadSlots = useCallback(async () => {
+    var _a2, _b, _c;
+    setError(null);
+    setSlots(null);
+    try {
+      const from = (/* @__PURE__ */ new Date()).toISOString();
+      const to = new Date(Date.now() + 21 * 864e5).toISOString();
+      const res = await fetch(
+        `${baseUrl}/api/v1/sdk/booking/availability?from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}`,
+        { headers }
+      );
+      const json = await res.json();
+      if (!json.success) {
+        setError((_a2 = json.error) != null ? _a2 : "Couldn't load available times");
+        setSlots([]);
+        return;
+      }
+      setSlots((_b = json.data.slots) != null ? _b : []);
+      setHeading({ title: json.data.title, description: json.data.description });
+      setWhatsappUrl((_c = json.data.whatsappUrl) != null ? _c : null);
+    } catch (e) {
+      setError("Couldn't reach the booking service");
+      setSlots([]);
+    }
+  }, [baseUrl, headers]);
+  useEffect3(() => {
+    if (!open) return;
+    setStep("slots");
+    setSelected(null);
+    setCode("");
+    setBookingId(null);
+    setError(null);
+    void loadSlots();
+  }, [open, loadSlots]);
+  useEffect3(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey, true);
+    return () => document.removeEventListener("keydown", onKey, true);
+  }, [open, onClose]);
+  if (!open) return null;
+  const byDay = /* @__PURE__ */ new Map();
+  for (const slot of slots != null ? slots : []) {
+    const key = dayKey(slot.startsAt);
+    byDay.set(key, [...(_a = byDay.get(key)) != null ? _a : [], slot]);
+  }
+  async function startBooking() {
+    var _a2;
+    if (!selected) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await fetch(`${baseUrl}/api/v1/sdk/booking`, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          name,
+          email,
+          phone,
+          note,
+          startsAt: selected.startsAt,
+          timezone: localZone()
+        })
+      });
+      const json = await res.json();
+      if (!json.success) {
+        setError((_a2 = json.error) != null ? _a2 : "Couldn't hold that slot");
+        return;
+      }
+      setBookingId(json.data.bookingId);
+      setStep("code");
+    } catch (e) {
+      setError("Couldn't reach the booking service");
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function confirmBooking() {
+    var _a2;
+    if (!bookingId) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await fetch(`${baseUrl}/api/v1/sdk/booking/verify`, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({ bookingId, code })
+      });
+      const json = await res.json();
+      if (!json.success) {
+        setError((_a2 = json.error) != null ? _a2 : "Couldn't confirm that code");
+        return;
+      }
+      setMeetUrl(json.data.meetUrl);
+      setStep("done");
+    } catch (e) {
+      setError("Couldn't reach the booking service");
+    } finally {
+      setBusy(false);
+    }
+  }
+  const canSubmitDetails = name.trim() && email.includes("@") && phone.replace(/\D/g, "").length >= 8;
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 2147483e3,
+        background: "rgba(0,0,0,.6)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 16,
+        fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+      },
+      children: /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": heading.title,
+          style: {
+            width: "min(440px, 100%)",
+            maxHeight: "min(660px, 90vh)",
+            display: "flex",
+            flexDirection: "column",
+            background: t.bg,
+            color: t.text,
+            borderRadius: 16,
+            boxShadow: "0 20px 60px rgba(0,0,0,.55)",
+            overflow: "hidden"
+          },
+          children: [
+            /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                style: {
+                  padding: "16px 18px",
+                  borderBottom: `1px solid ${t.border}`,
+                  display: "flex",
+                  alignItems: "flex-start",
+                  justifyContent: "space-between",
+                  gap: 12
+                },
+                children: [
+                  /* @__PURE__ */ jsxs3("div", { children: [
+                    /* @__PURE__ */ jsx3("div", { style: { fontSize: 15, fontWeight: 600 }, children: heading.title }),
+                    heading.description && /* @__PURE__ */ jsx3("div", { style: { fontSize: 12, color: t.muted, marginTop: 2 }, children: heading.description })
+                  ] }),
+                  /* @__PURE__ */ jsx3(
+                    "button",
+                    {
+                      onClick: onClose,
+                      "aria-label": "Close",
+                      style: { border: 0, background: "transparent", color: t.muted, fontSize: 20, cursor: "pointer", lineHeight: 1 },
+                      children: "\xD7"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs3("div", { style: { padding: 18, overflowY: "auto", flex: "1 1 auto" }, children: [
+              error && /* @__PURE__ */ jsx3("div", { style: { color: t.danger, fontSize: 12, marginBottom: 12, lineHeight: 1.5 }, children: error }),
+              step === "slots" && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+                whatsappUrl && /* @__PURE__ */ jsxs3(
+                  "a",
+                  {
+                    href: whatsappUrl,
+                    target: "_blank",
+                    rel: "noreferrer",
+                    style: {
+                      display: "block",
+                      marginBottom: 16,
+                      padding: "10px 14px",
+                      borderRadius: 10,
+                      border: `1px solid ${t.border}`,
+                      background: t.surface,
+                      color: t.text,
+                      fontSize: 13,
+                      textDecoration: "none"
+                    },
+                    children: [
+                      "\u{1F4AC} Rather book on WhatsApp?",
+                      /* @__PURE__ */ jsx3("span", { style: { display: "block", fontSize: 11, color: t.muted, marginTop: 2 }, children: "We'll ask the same questions in chat." })
+                    ]
+                  }
+                ),
+                slots === null && /* @__PURE__ */ jsx3("div", { style: { color: t.muted, fontSize: 13 }, children: "Finding times\u2026" }),
+                (slots == null ? void 0 : slots.length) === 0 && !error && /* @__PURE__ */ jsx3("div", { style: { color: t.muted, fontSize: 13 }, children: "No times available right now." }),
+                [...byDay.entries()].map(([day, daySlots]) => /* @__PURE__ */ jsxs3("div", { style: { marginBottom: 18 }, children: [
+                  /* @__PURE__ */ jsx3("div", { style: { fontSize: 11, color: t.muted, marginBottom: 8, textTransform: "uppercase", letterSpacing: ".6px" }, children: formatDay(daySlots[0].startsAt) }),
+                  /* @__PURE__ */ jsx3("div", { style: { display: "flex", flexWrap: "wrap", gap: 8 }, children: daySlots.map((slot) => /* @__PURE__ */ jsx3(
+                    "button",
+                    {
+                      onClick: () => {
+                        setSelected(slot);
+                        setStep("details");
+                      },
+                      style: {
+                        padding: "8px 14px",
+                        borderRadius: 999,
+                        border: `1px solid ${t.border}`,
+                        background: t.surface,
+                        color: t.text,
+                        fontSize: 13,
+                        cursor: "pointer"
+                      },
+                      children: formatTime(slot.startsAt)
+                    },
+                    slot.startsAt
+                  )) })
+                ] }, day))
+              ] }),
+              step === "details" && selected && /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
+                /* @__PURE__ */ jsxs3("div", { style: { fontSize: 13, color: t.muted }, children: [
+                  formatDay(selected.startsAt),
+                  " \xB7 ",
+                  formatTime(selected.startsAt),
+                  " \xB7 ",
+                  /* @__PURE__ */ jsx3(
+                    "button",
+                    {
+                      onClick: () => setStep("slots"),
+                      style: { border: 0, background: "transparent", color: t.accent, cursor: "pointer", fontSize: 13, padding: 0 },
+                      children: "change"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx3(Field, { label: "Your name", value: name, onChange: setName }),
+                /* @__PURE__ */ jsx3(Field, { label: "Email", value: email, onChange: setEmail, type: "email" }),
+                /* @__PURE__ */ jsx3(
+                  Field,
+                  {
+                    label: "Mobile number",
+                    value: phone,
+                    onChange: setPhone,
+                    type: "tel",
+                    hint: "We send a code here to confirm, then a reminder before the call."
+                  }
+                ),
+                /* @__PURE__ */ jsx3(Field, { label: "Anything we should know? (optional)", value: note, onChange: setNote }),
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    onClick: startBooking,
+                    disabled: !canSubmitDetails || busy,
+                    style: primaryStyle(!canSubmitDetails || busy),
+                    children: busy ? "Sending code\u2026" : "Send verification code"
+                  }
+                )
+              ] }),
+              step === "code" && /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
+                /* @__PURE__ */ jsx3("div", { style: { fontSize: 13, color: t.muted, lineHeight: 1.5 }, children: "We sent a 4-digit code to your phone. Your slot is held for 10 minutes." }),
+                /* @__PURE__ */ jsx3(Field, { label: "Code", value: code, onChange: setCode }),
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    onClick: confirmBooking,
+                    disabled: code.trim().length < 4 || busy,
+                    style: primaryStyle(code.trim().length < 4 || busy),
+                    children: busy ? "Confirming\u2026" : "Confirm booking"
+                  }
+                )
+              ] }),
+              step === "done" && /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
+                /* @__PURE__ */ jsx3("div", { style: { fontSize: 15, fontWeight: 600 }, children: "You're booked." }),
+                /* @__PURE__ */ jsxs3("div", { style: { fontSize: 13, color: t.muted, lineHeight: 1.6 }, children: [
+                  selected && `${formatDay(selected.startsAt)} at ${formatTime(selected.startsAt)}. `,
+                  "A calendar invite is on its way to ",
+                  email,
+                  ", and we'll send a WhatsApp reminder before the call."
+                ] }),
+                meetUrl && /* @__PURE__ */ jsx3("a", { href: meetUrl, target: "_blank", rel: "noreferrer", style: { ...primaryStyle(false), textAlign: "center", textDecoration: "none" }, children: "Open the meeting link" })
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function primaryStyle(disabled) {
+  return {
+    marginTop: 4,
+    padding: "10px 16px",
+    borderRadius: 999,
+    border: 0,
+    background: disabled ? "#2a2a2a" : t.accent,
+    color: disabled ? "#6b7280" : "#fff",
+    fontSize: 14,
+    fontWeight: 500,
+    cursor: disabled ? "default" : "pointer"
+  };
+}
+function Field({
+  label,
+  value,
+  onChange,
+  type = "text",
+  hint
+}) {
+  return /* @__PURE__ */ jsxs3("label", { style: { display: "block", fontSize: 11, color: t.muted }, children: [
+    label,
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        style: {
+          display: "block",
+          width: "100%",
+          boxSizing: "border-box",
+          marginTop: 4,
+          padding: "9px 12px",
+          background: t.surface,
+          color: t.text,
+          border: `1px solid ${t.border}`,
+          borderRadius: 8,
+          fontSize: 13,
+          outline: "none"
+        }
+      }
+    ),
+    hint && /* @__PURE__ */ jsx3("div", { style: { marginTop: 4, fontSize: 10, color: t.muted }, children: hint })
+  ] });
+}
+
 // src/rejection.ts
 var DETAILS_MAX_LENGTH = 1e3;
 var MESSAGE_MAX_LENGTH = 200;
@@ -3855,6 +4253,36 @@ function describeShape(reason) {
     return "";
   }
 }
+var EVENT_URL_MAX_LENGTH = 120;
+function isEventLike(reason) {
+  try {
+    if (typeof Event !== "undefined" && reason instanceof Event) return true;
+    const source = reason;
+    return typeof (source == null ? void 0 : source.type) === "string" && typeof (source == null ? void 0 : source.isTrusted) === "boolean";
+  } catch (e) {
+    return false;
+  }
+}
+function describeEvent(reason) {
+  var _a, _b, _c, _d, _e;
+  const parts = [];
+  try {
+    const source = reason;
+    const name = ((_a = source.constructor) == null ? void 0 : _a.name) || "Event";
+    parts.push(`${name} ("${String((_b = source.type) != null ? _b : "")}")`);
+  } catch (e) {
+    parts.push("Event");
+  }
+  try {
+    const target = reason.target;
+    const tag = (_c = target == null ? void 0 : target.tagName) == null ? void 0 : _c.toLowerCase();
+    if (tag) parts.push(`from <${tag}>`);
+    const url = (_e = (_d = readString(target == null ? void 0 : target.currentSrc)) != null ? _d : readString(target == null ? void 0 : target.src)) != null ? _e : readString(target == null ? void 0 : target.href);
+    if (url) parts.push(`\u2014 ${url.split(/[?#]/)[0].slice(0, EVENT_URL_MAX_LENGTH)}`);
+  } catch (e) {
+  }
+  return parts.join(" ").slice(0, MESSAGE_MAX_LENGTH);
+}
 function describeRejection(reason) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   try {
@@ -3879,7 +4307,7 @@ function describeRejection(reason) {
     const message = (_h = (_g = (_f = (_e = (_d = (_c = (_b = readString(source.message)) != null ? _b : readString(nestedError)) != null ? _c : readString(nestedError == null ? void 0 : nestedError.message)) != null ? _d : readScalar(source.code)) != null ? _e : readString(source.name)) != null ? _f : readScalar(source.status)) != null ? _g : readString(source.statusText)) != null ? _h : "";
     const details = serialize(reason);
     return {
-      message: message || describeShape(reason),
+      message: message || (isEventLike(reason) ? describeEvent(reason) : describeShape(reason)),
       stack,
       details
     };
@@ -3907,7 +4335,7 @@ function matchesShortcut(e) {
 }
 
 // src/provider.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var DEFAULT_BASE_URL2 = "https://glitchgrab.dev";
 var GlitchgrabContext = createContext(null);
 function useGlitchgrab() {
@@ -3946,12 +4374,12 @@ function GlitchgrabProviderInner({
     onError,
     onReportSent
   });
-  useEffect3(() => {
+  useEffect4(() => {
     if (enableBreadcrumbs) {
       initBreadcrumbs(maxBreadcrumbs2, { responseBodyOrigins: responseBodyOrigins2 });
     }
   }, [enableBreadcrumbs, maxBreadcrumbs2, responseBodyOrigins2 == null ? void 0 : responseBodyOrigins2.join(",")]);
-  useEffect3(() => {
+  useEffect4(() => {
     try {
       if (typeof window === "undefined") return;
       const trackPage = () => {
@@ -3988,7 +4416,7 @@ function GlitchgrabProviderInner({
     } catch (e) {
     }
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     try {
       if (typeof window === "undefined") return;
       if (process.env.NODE_ENV === "development") return;
@@ -4115,7 +4543,7 @@ function GlitchgrabProviderInner({
     } catch (e) {
     }
   }, [token, baseUrl, onError, onReportSent, session, ignoreErrors]);
-  const report = useCallback(
+  const report = useCallback2(
     async (type, description, metadata) => {
       var _a;
       try {
@@ -4149,11 +4577,11 @@ function GlitchgrabProviderInner({
     },
     [token, baseUrl, onReportSent, session]
   );
-  const reportBug = useCallback(
+  const reportBug = useCallback2(
     (description, metadata) => report("BUG", description, metadata),
     [report]
   );
-  const feedback = useCallback(
+  const feedback = useCallback2(
     async (rating, message, metadata) => {
       try {
         const context = captureContext(visitedPagesRef.current);
@@ -4181,32 +4609,32 @@ function GlitchgrabProviderInner({
     },
     [token, baseUrl, session]
   );
-  const openFeedbackDialog = useCallback(() => {
+  const openFeedbackDialog = useCallback2(() => {
     if (typeof window !== "undefined") {
       window.dispatchEvent(
         new CustomEvent("glitchgrab:open-report", { detail: { type: "RATING" } })
       );
     }
   }, []);
-  const captureError2 = useCallback(
+  const captureError2 = useCallback2(
     (error, options) => {
       captureError(error, options);
     },
     []
   );
-  const setContext2 = useCallback((key, value) => {
+  const setContext2 = useCallback2((key, value) => {
     setContext(key, value);
   }, []);
-  const setContexts2 = useCallback((values) => {
+  const setContexts2 = useCallback2((values) => {
     setContexts(values);
   }, []);
-  const addBreadcrumb2 = useCallback(
+  const addBreadcrumb2 = useCallback2(
     (message, data) => {
       addBreadcrumb("custom", message, data);
     },
     []
   );
-  const enhance = useCallback(
+  const enhance = useCallback2(
     async (text, screenshot) => {
       try {
         const ctx = captureContext(visitedPagesRef.current);
@@ -4222,7 +4650,7 @@ function GlitchgrabProviderInner({
     },
     [token, baseUrl]
   );
-  const transcribe = useCallback(
+  const transcribe = useCallback2(
     async (blob) => {
       try {
         return await transcribeAudio(blob, token, baseUrl);
@@ -4232,12 +4660,37 @@ function GlitchgrabProviderInner({
     },
     [token, baseUrl]
   );
-  const openReportDialog = useCallback((options) => {
+  const openReportDialog = useCallback2((options) => {
     if (typeof window !== "undefined") {
       window.dispatchEvent(new CustomEvent("glitchgrab:open-report", { detail: options }));
     }
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
+    try {
+      if (typeof document === "undefined") return;
+      document.documentElement.setAttribute("data-glitchgrab-sdk", "1");
+      return () => document.documentElement.removeAttribute("data-glitchgrab-sdk");
+    } catch (e) {
+    }
+  }, []);
+  const [projectName, setProjectName] = useState4(null);
+  const [bookingOpen, setBookingOpen] = useState4(false);
+  const openBookingDialog = useCallback2(() => setBookingOpen(true), []);
+  useEffect4(() => {
+    let cancelled = false;
+    fetch(`${baseUrl}/api/v1/sdk/project`, {
+      headers: { Authorization: `Bearer ${token}` }
+    }).then((r) => r.ok ? r.json() : null).then((json) => {
+      var _a;
+      if (cancelled || !(json == null ? void 0 : json.success) || !((_a = json.data) == null ? void 0 : _a.name)) return;
+      setProjectName(json.data.name);
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [baseUrl, token]);
+  useEffect4(() => {
     try {
       if (typeof window === "undefined") return;
       const handleKeyDown = (e) => {
@@ -4251,7 +4704,7 @@ function GlitchgrabProviderInner({
     } catch (e) {
     }
   }, [openReportDialog]);
-  const reporter = useMemo(() => {
+  const reporter = useMemo2(() => {
     var _a;
     if (!session) return null;
     const avatar = (_a = session.avatarUrl) != null ? _a : session.image;
@@ -4261,11 +4714,11 @@ function GlitchgrabProviderInner({
       avatarUrl: typeof avatar === "string" ? avatar : null
     };
   }, [session]);
-  const [shortcutLabel, setShortcutLabel] = useState3(GLITCHGRAB_SHORTCUT2);
-  useEffect3(() => {
+  const [shortcutLabel, setShortcutLabel] = useState4(GLITCHGRAB_SHORTCUT2);
+  useEffect4(() => {
     setShortcutLabel(getShortcutLabel2());
   }, []);
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     GlitchgrabContext.Provider,
     {
       value: {
@@ -4280,11 +4733,12 @@ function GlitchgrabProviderInner({
         openFeedbackDialog,
         addBreadcrumb: addBreadcrumb2,
         openReportDialog,
+        openBookingDialog,
         enhanceText: enhance,
         shortcutLabel
       },
       children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           GlitchgrabErrorBoundary,
           {
             token,
@@ -4296,27 +4750,51 @@ function GlitchgrabProviderInner({
             children
           }
         ),
-        /* @__PURE__ */ jsx3(ReportDialog, { report, sendFeedback: feedback, enhanceText: enhance, transcribeAudio: transcribe, types, showSeverity, reporter })
+        /* @__PURE__ */ jsx4(
+          BookingDialog,
+          {
+            token,
+            baseUrl: baseUrl != null ? baseUrl : DEFAULT_BASE_URL2,
+            open: bookingOpen,
+            onClose: () => setBookingOpen(false)
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          ReportDialog,
+          {
+            report,
+            sendFeedback: feedback,
+            enhanceText: enhance,
+            transcribeAudio: transcribe,
+            types,
+            showSeverity,
+            reporter,
+            headerSlot: projectName ? /* @__PURE__ */ jsxs4("div", { style: { fontSize: 11, color: "#9aa0a6" }, children: [
+              "Reporting to ",
+              /* @__PURE__ */ jsx4("strong", { style: { color: "#e5e5e5" }, children: projectName })
+            ] }) : null
+          }
+        )
       ]
     }
   );
 }
 function GlitchgrabProvider(props) {
-  if (!props.token) return /* @__PURE__ */ jsx3(Fragment2, { children: props.children });
+  if (!props.token) return /* @__PURE__ */ jsx4(Fragment3, { children: props.children });
   const resolvedProps = {
     ...props,
     baseUrl: props.baseUrl || DEFAULT_BASE_URL2
   };
   try {
-    return /* @__PURE__ */ jsx3(GlitchgrabProviderInner, { ...resolvedProps });
+    return /* @__PURE__ */ jsx4(GlitchgrabProviderInner, { ...resolvedProps });
   } catch (e) {
-    return /* @__PURE__ */ jsx3(Fragment2, { children: props.children });
+    return /* @__PURE__ */ jsx4(Fragment3, { children: props.children });
   }
 }
 
 // src/report-button.tsx
-import { useState as useState4 } from "react";
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useState as useState5 } from "react";
+import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function useGlitchgrabSafe() {
   try {
     return useGlitchgrab();
@@ -4331,7 +4809,7 @@ function ReportButton({
   children
 }) {
   var _a, _b;
-  const [capturing, setCapturing] = useState4(false);
+  const [capturing, setCapturing] = useState5(false);
   const glitchgrab = useGlitchgrabSafe();
   if (!glitchgrab) return null;
   const handleClick = async () => {
@@ -4340,7 +4818,7 @@ function ReportButton({
     setCapturing(false);
   };
   if (children) {
-    return /* @__PURE__ */ jsx4(Fragment3, { children: children({ onClick: handleClick, capturing }) });
+    return /* @__PURE__ */ jsx5(Fragment4, { children: children({ onClick: handleClick, capturing }) });
   }
   const isTop = (_a = position == null ? void 0 : position.startsWith("top")) != null ? _a : false;
   const isLeft = (_b = position == null ? void 0 : position.endsWith("left")) != null ? _b : false;
@@ -4348,7 +4826,7 @@ function ReportButton({
     ...isLeft ? { left: "16px" } : { right: "16px" },
     ...isTop ? { top: "16px" } : { bottom: "16px" }
   };
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "button",
     {
       type: "button",
@@ -4383,7 +4861,7 @@ function ReportButton({
       },
       "aria-label": label,
       children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "svg",
           {
             width: "16",
@@ -4391,7 +4869,7 @@ function ReportButton({
             viewBox: "0 0 16 16",
             fill: "none",
             style: { flexShrink: 0 },
-            children: /* @__PURE__ */ jsx4(
+            children: /* @__PURE__ */ jsx5(
               "path",
               {
                 d: "M8 1C4.134 1 1 4.134 1 8s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7zm0 12.5a.75.75 0 110-1.5.75.75 0 010 1.5zm.75-3.5a.75.75 0 01-1.5 0V5a.75.75 0 011.5 0v5z",
@@ -4406,8 +4884,38 @@ function ReportButton({
   );
 }
 
+// src/book-demo-button.tsx
+import { Fragment as Fragment5, jsx as jsx6 } from "react/jsx-runtime";
+function BookDemoButton({
+  label = "Book a demo",
+  className,
+  children
+}) {
+  const { openBookingDialog } = useGlitchgrab();
+  if (children) return /* @__PURE__ */ jsx6(Fragment5, { children: children({ onClick: openBookingDialog }) });
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      type: "button",
+      onClick: openBookingDialog,
+      className,
+      style: className ? void 0 : {
+        padding: "10px 18px",
+        borderRadius: 999,
+        border: 0,
+        background: "#3b82f6",
+        color: "#fff",
+        fontSize: 14,
+        fontWeight: 500,
+        cursor: "pointer"
+      },
+      children: label
+    }
+  );
+}
+
 // src/feedback-button.tsx
-import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function useGlitchgrabSafe2() {
   try {
     return useGlitchgrab();
@@ -4426,7 +4934,7 @@ function FeedbackButton({
   if (!glitchgrab) return null;
   const handleClick = () => glitchgrab.openFeedbackDialog();
   if (children) {
-    return /* @__PURE__ */ jsx5(Fragment4, { children: children({ onClick: handleClick }) });
+    return /* @__PURE__ */ jsx7(Fragment6, { children: children({ onClick: handleClick }) });
   }
   const isTop = (_a = position == null ? void 0 : position.startsWith("top")) != null ? _a : false;
   const isLeft = (_b = position == null ? void 0 : position.endsWith("left")) != null ? _b : false;
@@ -4434,7 +4942,7 @@ function FeedbackButton({
     ...isLeft ? { left: "16px" } : { right: "16px" },
     ...isTop ? { top: "16px" } : { bottom: "16px" }
   };
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "button",
     {
       type: "button",
@@ -4467,7 +4975,7 @@ function FeedbackButton({
       },
       "aria-label": label,
       children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           "svg",
           {
             width: "16",
@@ -4476,7 +4984,7 @@ function FeedbackButton({
             fill: "none",
             style: { flexShrink: 0 },
             "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx5(
+            children: /* @__PURE__ */ jsx7(
               "path",
               {
                 d: "M12 2.5l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3 1.1-6.5L2.6 9.3l6.5-.9L12 2.5z",
@@ -4492,18 +5000,18 @@ function FeedbackButton({
 }
 
 // src/use-reports.ts
-import { useState as useState5, useEffect as useEffect4, useCallback as useCallback2 } from "react";
+import { useState as useState6, useEffect as useEffect5, useCallback as useCallback3 } from "react";
 var BASE_URL = "https://glitchgrab.dev";
 function useGlitchgrabReports({
   token,
   userId,
   limit = 100
 }) {
-  const [reports, setReports] = useState5([]);
-  const [isLoading, setIsLoading] = useState5(true);
-  const [isFetching, setIsFetching] = useState5(false);
-  const [error, setError] = useState5(null);
-  const fetchReports = useCallback2(async () => {
+  const [reports, setReports] = useState6([]);
+  const [isLoading, setIsLoading] = useState6(true);
+  const [isFetching, setIsFetching] = useState6(false);
+  const [error, setError] = useState6(null);
+  const fetchReports = useCallback3(async () => {
     var _a, _b;
     if (!token || !userId) {
       setIsLoading(false);
@@ -4529,7 +5037,7 @@ function useGlitchgrabReports({
       setIsFetching(false);
     }
   }, [token, userId, limit]);
-  useEffect4(() => {
+  useEffect5(() => {
     fetchReports();
   }, [fetchReports]);
   return { reports, isLoading, isFetching, error, refetch: fetchReports };
@@ -4566,9 +5074,9 @@ function useGlitchgrabActions({
   onSuccess,
   onError
 }) {
-  const [isPending, setIsPending] = useState5(false);
-  const [error, setError] = useState5(null);
-  const run = useCallback2(
+  const [isPending, setIsPending] = useState6(false);
+  const [error, setError] = useState6(null);
+  const run = useCallback3(
     async (reportId, body) => {
       setIsPending(true);
       setError(null);
@@ -4598,7 +5106,7 @@ function useGlitchgrabActions({
 }
 
 // src/use-feedback.ts
-import { useState as useState6, useEffect as useEffect5, useCallback as useCallback3 } from "react";
+import { useState as useState7, useEffect as useEffect6, useCallback as useCallback4 } from "react";
 var DEFAULT_BASE_URL3 = "https://glitchgrab.dev";
 function buildUrl({
   approvedOnly,
@@ -4624,11 +5132,11 @@ async function fetchGlitchgrabFeedback(query) {
 }
 function useGlitchgrabFeedback(query) {
   const { token, approvedOnly, userId, minRating, limit, baseUrl } = query;
-  const [feedback, setFeedback] = useState6([]);
-  const [isLoading, setIsLoading] = useState6(true);
-  const [isFetching, setIsFetching] = useState6(false);
-  const [error, setError] = useState6(null);
-  const load = useCallback3(async () => {
+  const [feedback, setFeedback] = useState7([]);
+  const [isLoading, setIsLoading] = useState7(true);
+  const [isFetching, setIsFetching] = useState7(false);
+  const [error, setError] = useState7(null);
+  const load = useCallback4(async () => {
     if (!token) {
       setIsLoading(false);
       return;
@@ -4652,12 +5160,13 @@ function useGlitchgrabFeedback(query) {
       setIsFetching(false);
     }
   }, [token, approvedOnly, userId, minRating, limit, baseUrl]);
-  useEffect5(() => {
+  useEffect6(() => {
     load();
   }, [load]);
   return { feedback, isLoading, isFetching, error, refetch: load };
 }
 export {
+  BookDemoButton,
   FeedbackButton,
   GLITCHGRAB_SHORTCUT2 as GLITCHGRAB_SHORTCUT,
   GLITCHGRAB_SHORTCUT_MAC2 as GLITCHGRAB_SHORTCUT_MAC,