@campfire-interactive/shell-header 0.11.0 → 0.12.1

package/dist/index.js

@@ -604,6 +604,9 @@ function UserMenu({
   ] });
 }
 
+// src/ShellHeader.tsx
+import { useRef as useRef6, useState as useState7 } from "react";
+
 // src/AboutModal.tsx
 import { useEffect as useEffect4, useState as useState4 } from "react";
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -872,7 +875,7 @@ function normalizeRect(x0, y0, x1, y1) {
     h: Math.abs(y1 - y0)
   };
 }
-function BugReportModal({ config, onClose }) {
+function BugReportModal({ config, initialScreenshot, onClose }) {
   const [view, setView] = useState6("form");
   const [title, setTitle] = useState6("");
   const [description, setDescription] = useState6("");
@@ -886,6 +889,21 @@ function BugReportModal({ config, onClose }) {
   const displayCanvasRef = useRef4(null);
   const dragStartRef = useRef4(null);
   const [mode, setMode] = useState6("crop");
+  const initialLoadedRef = useRef4(false);
+  useEffect6(() => {
+    if (!initialScreenshot || initialLoadedRef.current) return;
+    initialLoadedRef.current = true;
+    let cancelled = false;
+    void blobToCanvas(initialScreenshot).then((image) => {
+      if (cancelled) return;
+      originalRef.current = cloneCanvas(image);
+      workCanvasRef.current = image;
+      setView("editor");
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [initialScreenshot]);
   const closeUnlessBusy = useCallback(() => {
     if (submitState === "submitting" || capturing) return;
     if (screenshot) URL.revokeObjectURL(screenshot.previewUrl);
@@ -1075,6 +1093,8 @@ function BugReportModal({ config, onClose }) {
       role: "dialog",
       "aria-modal": "true",
       "aria-label": "Report an issue",
+      onPointerDown: (e) => e.stopPropagation(),
+      onFocus: (e) => e.stopPropagation(),
       children: /* @__PURE__ */ jsxs6("div", { className: `cfi-sh-bug-card${view === "editor" ? " cfi-sh-bug-card-wide" : ""}`, children: [
         /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-header", children: [
           /* @__PURE__ */ jsx6("span", { className: "cfi-sh-bug-title", children: "Report an issue" }),
@@ -1229,9 +1249,10 @@ function cloneCanvas(source) {
 }
 
 // src/useBugReportShortcut.ts
-import { useEffect as useEffect7, useState as useState7 } from "react";
-function useBugReportShortcut(enabled) {
-  const [isOpen, setIsOpen] = useState7(false);
+import { useEffect as useEffect7, useRef as useRef5 } from "react";
+function useBugReportShortcut(enabled, onShortcut) {
+  const handlerRef = useRef5(onShortcut);
+  handlerRef.current = onShortcut;
   useEffect7(() => {
     if (!enabled) return;
     function handleKeyDown(e) {
@@ -1244,12 +1265,11 @@ function useBugReportShortcut(enabled) {
         if (tag === "INPUT" || tag === "TEXTAREA" || target.isContentEditable) return;
       }
       e.preventDefault();
-      setIsOpen((open) => !open);
+      handlerRef.current();
     }
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [enabled]);
-  return [isOpen, setIsOpen];
 }
 
 // src/assets/campfire-wordmark.png
@@ -1287,7 +1307,21 @@ function ShellHeader({
 }) {
   const currentApp = appCatalog.find((a) => a.id === appId);
   const [aboutOpen, setAboutOpen] = useAboutShortcut(about !== void 0);
-  const [bugOpen, setBugOpen] = useBugReportShortcut(bugReport !== void 0);
+  const [bugOpen, setBugOpen] = useState7(false);
+  const [bugShot, setBugShot] = useState7(null);
+  const bugCaptureBusy = useRef6(false);
+  useBugReportShortcut(bugReport !== void 0, () => {
+    if (bugOpen) {
+      setBugOpen(false);
+      return;
+    }
+    if (bugCaptureBusy.current) return;
+    bugCaptureBusy.current = true;
+    captureTabScreenshot().then((shot) => setBugShot(shot)).catch(() => setBugShot(null)).finally(() => {
+      bugCaptureBusy.current = false;
+      setBugOpen(true);
+    });
+  });
   const brandStyle = brandWidth ? { width: `${brandWidth}px`, flexShrink: 0, boxSizing: "border-box" } : void 0;
   return /* @__PURE__ */ jsxs7(Fragment4, { children: [
     /* @__PURE__ */ jsxs7("header", { className: "cfi-sh-header", children: [
@@ -1332,17 +1366,27 @@ function ShellHeader({
       ] })
     ] }),
     about && aboutOpen && /* @__PURE__ */ jsx7(AboutModal, { about, onClose: () => setAboutOpen(false) }),
-    bugReport && bugOpen && /* @__PURE__ */ jsx7(BugReportModal, { config: bugReport, onClose: () => setBugOpen(false) })
+    bugReport && bugOpen && /* @__PURE__ */ jsx7(
+      BugReportModal,
+      {
+        config: bugReport,
+        initialScreenshot: bugShot,
+        onClose: () => {
+          setBugOpen(false);
+          setBugShot(null);
+        }
+      }
+    )
   ] });
 }
 
 // src/LocaleSwitcher.tsx
-import { useState as useState8, useRef as useRef5, useEffect as useEffect8 } from "react";
+import { useState as useState8, useRef as useRef7, useEffect as useEffect8 } from "react";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function LocaleSwitcher({ currentLocale, supportedLocales, onLocaleChange }) {
   const [open, setOpen] = useState8(false);
   const [updating, setUpdating] = useState8(false);
-  const ref = useRef5(null);
+  const ref = useRef7(null);
   useEffect8(() => {
     function handleClickOutside(e) {
       if (ref.current && !ref.current.contains(e.target)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campfire-interactive/shell-header",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "description": "Shared shell header with app switcher for Campfire Suite",
   "type": "module",
   "main": "dist/index.js",