@impakers/debug 1.3.13 → 1.4.2

package/dist/react.mjs

@@ -1412,9 +1412,6 @@ function probeComponentSource(fiber) {
   }
   const dispatcher = getReactDispatcher();
   if (!dispatcher) {
-    if (typeof window !== "undefined" && window.__IMPAKERS_DEBUG_LOG) {
-      console.log("[impakers-debug] dispatcher not found, skipping probe");
-    }
     sourceProbeCache.set(fn, null);
     return null;
   }
@@ -1434,13 +1431,7 @@ function probeComponentSource(fiber) {
       fn({});
     } catch (e) {
       if (e instanceof Error && e.stack) {
-        if (typeof window !== "undefined" && window.__IMPAKERS_DEBUG_LOG) {
-          console.log("[impakers-debug] probe stack:", e.stack);
-        }
         const frame = parseComponentFrame(e.stack);
-        if (typeof window !== "undefined" && window.__IMPAKERS_DEBUG_LOG) {
-          console.log("[impakers-debug] parsed frame:", frame);
-        }
         if (frame) {
           const cleaned = cleanSourcePath(frame.fileName);
           result = {
@@ -1497,9 +1488,6 @@ function getSourceLocation(element) {
     };
   }
   const probed = probeSourceWalk(fiber);
-  if (typeof window !== "undefined" && window.__IMPAKERS_DEBUG_LOG) {
-    console.log("[impakers-debug] probe result:", probed);
-  }
   if (probed) {
     return { found: true, source: probed, isReactApp: true, isProduction: false };
   }
@@ -2105,35 +2093,28 @@ async function getSourceMapUrlFromBundle(bundleUrl) {
 async function loadSourceMap(bundleUrl) {
   if (cache2.has(bundleUrl)) return cache2.get(bundleUrl) ?? null;
   if (failedUrls.has(bundleUrl)) return null;
-  const debugLog = typeof window !== "undefined" && window.__IMPAKERS_DEBUG_LOG;
   const directMapUrl = bundleUrl.endsWith(".map") ? bundleUrl : `${bundleUrl}.map`;
   try {
     const res = await fetch(directMapUrl, { cache: "force-cache" });
-    if (debugLog) console.log("[impakers-debug] 1\uCC28 .map fetch:", res.status, directMapUrl);
     if (res.ok) {
       const rawMap = await res.json();
       const traceMap = new AnyMap(rawMap);
       cache2.set(bundleUrl, traceMap);
       return traceMap;
     }
-  } catch (e) {
-    if (debugLog) console.log("[impakers-debug] 1\uCC28 .map fetch exception:", e);
+  } catch {
   }
-  if (debugLog) console.log("[impakers-debug] 2\uCC28 \uC2DC\uB3C4: JS\uC5D0\uC11C sourceMappingURL \uCD94\uCD9C...");
   const actualMapUrl = await getSourceMapUrlFromBundle(bundleUrl);
-  if (debugLog) console.log("[impakers-debug] 2\uCC28 actualMapUrl:", actualMapUrl);
   if (actualMapUrl) {
     try {
       const res = await fetch(actualMapUrl, { cache: "force-cache" });
-      if (debugLog) console.log("[impakers-debug] 2\uCC28 .map fetch:", res.status, actualMapUrl);
       if (res.ok) {
         const rawMap = await res.json();
         const traceMap = new AnyMap(rawMap);
         cache2.set(bundleUrl, traceMap);
         return traceMap;
       }
-    } catch (e) {
-      if (debugLog) console.log("[impakers-debug] 2\uCC28 .map fetch exception:", e);
+    } catch {
     }
   }
   failedUrls.add(bundleUrl);
@@ -2366,13 +2347,11 @@ function CommentThread({
     },
     [handleClose, handleSend]
   );
-  const handleCameraClick = useCallback2(() => {
+  const startDomCapture = useCallback2(() => {
     setCapturingDom(true);
-    const threadEl = document.querySelector(`.${styles_module_default3.thread}`);
-    if (threadEl) threadEl.style.visibility = "hidden";
-    document.documentElement.style.cursor = "crosshair";
-    const allEls = document.querySelectorAll("*");
-    allEls.forEach((el) => el.style.cursor = "crosshair");
+    const debugEls = document.querySelectorAll("[data-impakers-debug], [data-annotation-marker]");
+    debugEls.forEach((el) => el.style.visibility = "hidden");
+    document.documentElement.classList.add("impakers-selecting");
     let hoverBox = null;
     const showHover = (rect) => {
       if (!hoverBox) {
@@ -2385,25 +2364,32 @@ function CommentThread({
       hoverBox.style.width = `${rect.width}px`;
       hoverBox.style.height = `${rect.height}px`;
     };
+    const cleanup = () => {
+      document.removeEventListener("mousemove", handleMove);
+      document.removeEventListener("click", handleClick, true);
+      document.removeEventListener("keydown", handleEsc);
+      document.documentElement.classList.remove("impakers-selecting");
+      hoverBox?.remove();
+      debugEls.forEach((el) => el.style.visibility = "");
+      setCapturingDom(false);
+    };
     const handleMove = (e) => {
       const el = document.elementFromPoint(e.clientX, e.clientY);
       if (!el || el === hoverBox) return;
       showHover(el.getBoundingClientRect());
     };
+    const handleEsc = (e) => {
+      if (e.key === "Escape") {
+        cleanup();
+      }
+    };
     const handleClick = async (e) => {
       e.preventDefault();
       e.stopPropagation();
-      document.removeEventListener("mousemove", handleMove);
-      document.removeEventListener("click", handleClick, true);
-      document.documentElement.style.cursor = "";
-      allEls.forEach((el) => el.style.cursor = "");
-      hoverBox?.remove();
+      e.stopImmediatePropagation();
       const targetEl = document.elementFromPoint(e.clientX, e.clientY);
-      if (!targetEl) {
-        if (threadEl) threadEl.style.visibility = "";
-        setCapturingDom(false);
-        return;
-      }
+      cleanup();
+      if (!targetEl) return;
       try {
         const html2canvas = (await import("html2canvas")).default;
         const canvas = await html2canvas(targetEl, {
@@ -2417,13 +2403,15 @@ function CommentThread({
       } catch (err) {
         console.error("[@impakers/debug] DOM \uC2A4\uD06C\uB9B0\uC0F7 \uC2E4\uD328:", err);
       }
-      if (threadEl) threadEl.style.visibility = "";
-      setCapturingDom(false);
       textareaRef.current?.focus();
     };
     document.addEventListener("mousemove", handleMove);
     document.addEventListener("click", handleClick, true);
+    document.addEventListener("keydown", handleEsc);
   }, []);
+  const handleCameraClick = useCallback2(() => {
+    startDomCapture();
+  }, [startDomCapture]);
   const handleAttachClick = useCallback2(() => {
     fileInputRef.current?.click();
   }, []);
@@ -3285,8 +3273,8 @@ function SettingsPanel({ settings, onChange, onClose }) {
 }
 
 // src/components/debug-widget/styles.module.scss
-var css7 = '.styles-module__markersLayer___VR1cD svg[fill=none],\n.styles-module__fixedMarkersLayer___wBuxm svg[fill=none] {\n  fill: none !important;\n}\n.styles-module__markersLayer___VR1cD svg[fill=none] :not([fill]),\n.styles-module__fixedMarkersLayer___wBuxm svg[fill=none] :not([fill]) {\n  fill: none !important;\n}\n\n@keyframes styles-module__fadeIn___PpRqy {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes styles-module__fadeOut___tZb9S {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n@keyframes styles-module__hoverHighlightIn___ljC4F {\n  from {\n    opacity: 0;\n    transform: scale(0.98);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes styles-module__hoverTooltipIn___tncNM {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@keyframes styles-module__fabEnter___9koyT {\n  from {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n.styles-module__fab___6FrCF {\n  position: fixed;\n  bottom: 24px;\n  right: 24px;\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  background: #18181b;\n  color: white;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);\n  transition: transform 0.15s ease, box-shadow 0.15s ease;\n  z-index: 99999;\n  animation: styles-module__fabEnter___9koyT 0.3s cubic-bezier(0.22, 1, 0.36, 1);\n  touch-action: none;\n}\n.styles-module__fab___6FrCF svg {\n  width: 20px;\n  height: 20px;\n}\n.styles-module__fab___6FrCF:hover {\n  transform: scale(1.08);\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.12);\n}\n.styles-module__fab___6FrCF:active {\n  transform: scale(0.96);\n}\n.styles-module__fab___6FrCF.styles-module__active___X5PRD {\n  background: #dc2626;\n}\n\n.styles-module__hoverHighlight___9kGLL {\n  position: fixed;\n  border: 2px solid rgba(0, 136, 255, 0.5);\n  border-radius: 4px;\n  background-color: rgba(0, 136, 255, 0.04);\n  pointer-events: none !important;\n  box-sizing: border-box;\n  will-change: opacity;\n  z-index: 99997;\n}\n.styles-module__hoverHighlight___9kGLL.styles-module__enter___jAi-c {\n  animation: styles-module__hoverHighlightIn___ljC4F 0.12s ease-out forwards;\n}\n\n.styles-module__singleSelectOutline___2meUm {\n  position: fixed;\n  border: 2px solid rgba(0, 136, 255, 0.6);\n  border-radius: 4px;\n  pointer-events: none !important;\n  background-color: rgba(0, 136, 255, 0.05);\n  box-sizing: border-box;\n  will-change: opacity;\n  z-index: 99997;\n}\n.styles-module__singleSelectOutline___2meUm.styles-module__enter___jAi-c {\n  animation: styles-module__fadeIn___PpRqy 0.15s ease-out forwards;\n}\n\n.styles-module__hoverTooltip___JE1Bs {\n  position: fixed;\n  font-size: 0.6875rem;\n  font-weight: 500;\n  color: #fff;\n  background: rgba(0, 0, 0, 0.85);\n  padding: 0.35rem 0.6rem;\n  border-radius: 0.375rem;\n  pointer-events: none !important;\n  white-space: nowrap;\n  max-width: 280px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  z-index: 99999;\n}\n.styles-module__hoverTooltip___JE1Bs.styles-module__enter___jAi-c {\n  animation: styles-module__hoverTooltipIn___tncNM 0.1s ease-out forwards;\n}\n\n.styles-module__hoverReactPath___wPGYi {\n  font-size: 0.625rem;\n  color: rgba(255, 255, 255, 0.6);\n  margin-bottom: 0.15rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.styles-module__hoverElementName___lNqTP {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.styles-module__markersLayer___VR1cD {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 0;\n  z-index: 99998;\n  pointer-events: none;\n}\n.styles-module__markersLayer___VR1cD > * {\n  pointer-events: auto;\n}\n\n.styles-module__fixedMarkersLayer___wBuxm {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 99998;\n  pointer-events: none;\n}\n.styles-module__fixedMarkersLayer___wBuxm > * {\n  pointer-events: auto;\n}\n\n.styles-module__contextMenu___nDXft {\n  position: fixed;\n  z-index: 2147483647;\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.08);\n  padding: 4px;\n  min-width: 140px;\n  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;\n  animation: styles-module__fadeIn___PpRqy 0.1s ease-out;\n}\n\n.styles-module__contextMenuItem___69GKu {\n  display: block;\n  width: 100%;\n  padding: 8px 12px;\n  border: none;\n  background: none;\n  font-size: 13px;\n  color: #18181b;\n  text-align: left;\n  cursor: pointer;\n  border-radius: 6px;\n  font-family: inherit;\n}\n.styles-module__contextMenuItem___69GKu:hover {\n  background: #f4f4f5;\n}\n\n@keyframes styles-module__toastIn___V382h {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@keyframes styles-module__toastOut___zlqxG {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n.styles-module__toast___gV3Sa {\n  position: fixed;\n  bottom: 80px;\n  right: 24px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  background: white;\n  border: 1px solid #e5e5e5;\n  border-radius: 8px;\n  padding: 10px 16px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #18181b;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  z-index: 100000;\n  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;\n  animation: styles-module__toastIn___V382h 0.2s ease-out, styles-module__toastOut___zlqxG 0.3s ease-in 2.7s forwards;\n  max-width: 320px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.styles-module__toast___gV3Sa span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n@keyframes styles-module__countdownPulse___ngZrL {\n  0%, 100% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.15);\n  }\n}\n.styles-module__countdownOverlay___GruQJ {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  z-index: 100002;\n  pointer-events: auto;\n  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;\n  animation: styles-module__fadeIn___PpRqy 0.2s ease-out;\n}\n\n.styles-module__countdownNumber___VAmkI {\n  width: 72px;\n  height: 72px;\n  border-radius: 50%;\n  background: rgba(24, 24, 27, 0.9);\n  color: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 28px;\n  font-weight: 700;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n  animation: styles-module__countdownPulse___ngZrL 1s ease-in-out infinite;\n}\n\n.styles-module__countdownLabel___px-ao {\n  font-size: 13px;\n  font-weight: 500;\n  color: #18181b;\n  background: rgba(255, 255, 255, 0.95);\n  padding: 6px 14px;\n  border-radius: 8px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.styles-module__countdownCancel___8cRgZ {\n  font-size: 12px;\n  color: #6b7280;\n  background: rgba(255, 255, 255, 0.9);\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  padding: 4px 12px;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 0.12s;\n}\n.styles-module__countdownCancel___8cRgZ:hover {\n  background: #f3f4f6;\n}\n\nhtml.impakers-selecting {\n  cursor: crosshair !important;\n}\nhtml.impakers-selecting * {\n  cursor: crosshair !important;\n}';
-var classNames7 = { "markersLayer": "styles-module__markersLayer___VR1cD", "fixedMarkersLayer": "styles-module__fixedMarkersLayer___wBuxm", "fab": "styles-module__fab___6FrCF", "fabEnter": "styles-module__fabEnter___9koyT", "active": "styles-module__active___X5PRD", "hoverHighlight": "styles-module__hoverHighlight___9kGLL", "enter": "styles-module__enter___jAi-c", "hoverHighlightIn": "styles-module__hoverHighlightIn___ljC4F", "singleSelectOutline": "styles-module__singleSelectOutline___2meUm", "fadeIn": "styles-module__fadeIn___PpRqy", "hoverTooltip": "styles-module__hoverTooltip___JE1Bs", "hoverTooltipIn": "styles-module__hoverTooltipIn___tncNM", "hoverReactPath": "styles-module__hoverReactPath___wPGYi", "hoverElementName": "styles-module__hoverElementName___lNqTP", "contextMenu": "styles-module__contextMenu___nDXft", "contextMenuItem": "styles-module__contextMenuItem___69GKu", "toast": "styles-module__toast___gV3Sa", "toastIn": "styles-module__toastIn___V382h", "toastOut": "styles-module__toastOut___zlqxG", "countdownOverlay": "styles-module__countdownOverlay___GruQJ", "countdownNumber": "styles-module__countdownNumber___VAmkI", "countdownPulse": "styles-module__countdownPulse___ngZrL", "countdownLabel": "styles-module__countdownLabel___px-ao", "countdownCancel": "styles-module__countdownCancel___8cRgZ", "fadeOut": "styles-module__fadeOut___tZb9S" };
+var css7 = '.styles-module__markersLayer___VR1cD svg[fill=none],\n.styles-module__fixedMarkersLayer___wBuxm svg[fill=none] {\n  fill: none !important;\n}\n.styles-module__markersLayer___VR1cD svg[fill=none] :not([fill]),\n.styles-module__fixedMarkersLayer___wBuxm svg[fill=none] :not([fill]) {\n  fill: none !important;\n}\n\n@keyframes styles-module__fadeIn___PpRqy {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes styles-module__fadeOut___tZb9S {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n@keyframes styles-module__hoverHighlightIn___ljC4F {\n  from {\n    opacity: 0;\n    transform: scale(0.98);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes styles-module__hoverTooltipIn___tncNM {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@keyframes styles-module__fabEnter___9koyT {\n  from {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n.styles-module__fab___6FrCF {\n  position: fixed;\n  bottom: 24px;\n  right: 24px;\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  background: #18181b;\n  color: white;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);\n  transition: transform 0.15s ease, box-shadow 0.15s ease;\n  z-index: 99999;\n  animation: styles-module__fabEnter___9koyT 0.3s cubic-bezier(0.22, 1, 0.36, 1);\n  touch-action: none;\n}\n.styles-module__fab___6FrCF svg {\n  width: 20px;\n  height: 20px;\n}\n.styles-module__fab___6FrCF:hover {\n  transform: scale(1.08);\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.12);\n}\n.styles-module__fab___6FrCF:active {\n  transform: scale(0.96);\n}\n.styles-module__fab___6FrCF.styles-module__active___X5PRD {\n  background: #dc2626;\n}\n\n.styles-module__hoverHighlight___9kGLL {\n  position: fixed;\n  border: 2px solid rgba(0, 136, 255, 0.5);\n  border-radius: 4px;\n  background-color: rgba(0, 136, 255, 0.04);\n  pointer-events: none !important;\n  box-sizing: border-box;\n  will-change: opacity;\n  z-index: 99997;\n}\n.styles-module__hoverHighlight___9kGLL.styles-module__enter___jAi-c {\n  animation: styles-module__hoverHighlightIn___ljC4F 0.12s ease-out forwards;\n}\n\n.styles-module__singleSelectOutline___2meUm {\n  position: fixed;\n  border: 2px solid rgba(0, 136, 255, 0.6);\n  border-radius: 4px;\n  pointer-events: none !important;\n  background-color: rgba(0, 136, 255, 0.05);\n  box-sizing: border-box;\n  will-change: opacity;\n  z-index: 99997;\n}\n.styles-module__singleSelectOutline___2meUm.styles-module__enter___jAi-c {\n  animation: styles-module__fadeIn___PpRqy 0.15s ease-out forwards;\n}\n\n.styles-module__hoverTooltip___JE1Bs {\n  position: fixed;\n  font-size: 0.6875rem;\n  font-weight: 500;\n  color: #fff;\n  background: rgba(0, 0, 0, 0.85);\n  padding: 0.35rem 0.6rem;\n  border-radius: 0.375rem;\n  pointer-events: none !important;\n  white-space: nowrap;\n  max-width: 280px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  z-index: 99999;\n}\n.styles-module__hoverTooltip___JE1Bs.styles-module__enter___jAi-c {\n  animation: styles-module__hoverTooltipIn___tncNM 0.1s ease-out forwards;\n}\n\n.styles-module__hoverReactPath___wPGYi {\n  font-size: 0.625rem;\n  color: rgba(255, 255, 255, 0.6);\n  margin-bottom: 0.15rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.styles-module__hoverElementName___lNqTP {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.styles-module__markersLayer___VR1cD {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 0;\n  z-index: 99998;\n  pointer-events: none;\n}\n.styles-module__markersLayer___VR1cD > * {\n  pointer-events: auto;\n}\n\n.styles-module__fixedMarkersLayer___wBuxm {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 99998;\n  pointer-events: none;\n}\n.styles-module__fixedMarkersLayer___wBuxm > * {\n  pointer-events: auto;\n}\n\n.styles-module__contextMenu___nDXft {\n  position: fixed;\n  z-index: 2147483647;\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.08);\n  padding: 4px;\n  min-width: 140px;\n  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;\n  animation: styles-module__fadeIn___PpRqy 0.1s ease-out;\n}\n\n.styles-module__contextMenuItem___69GKu {\n  display: block;\n  width: 100%;\n  padding: 8px 12px;\n  border: none;\n  background: none;\n  font-size: 13px;\n  color: #18181b;\n  text-align: left;\n  cursor: pointer;\n  border-radius: 6px;\n  font-family: inherit;\n}\n.styles-module__contextMenuItem___69GKu:hover {\n  background: #f4f4f5;\n}\n\n@keyframes styles-module__toastIn___V382h {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@keyframes styles-module__toastOut___zlqxG {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n.styles-module__toast___gV3Sa {\n  position: fixed;\n  bottom: 80px;\n  right: 24px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  background: white;\n  border: 1px solid #e5e5e5;\n  border-radius: 8px;\n  padding: 10px 16px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #18181b;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  z-index: 100000;\n  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;\n  animation: styles-module__toastIn___V382h 0.2s ease-out, styles-module__toastOut___zlqxG 0.3s ease-in 2.7s forwards;\n  max-width: 320px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.styles-module__toast___gV3Sa span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.styles-module__toast___gV3Sa.styles-module__toastError___Q-8dn {\n  border-color: #fecaca;\n  background: #fef2f2;\n  color: #991b1b;\n  animation: styles-module__toastIn___V382h 0.2s ease-out, styles-module__toastOut___zlqxG 0.3s ease-in 3.7s forwards;\n}\n\n@keyframes styles-module__countdownPulse___ngZrL {\n  0%, 100% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.15);\n  }\n}\n.styles-module__countdownOverlay___GruQJ {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  z-index: 100002;\n  pointer-events: auto;\n  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;\n  animation: styles-module__fadeIn___PpRqy 0.2s ease-out;\n}\n\n.styles-module__countdownNumber___VAmkI {\n  width: 72px;\n  height: 72px;\n  border-radius: 50%;\n  background: rgba(24, 24, 27, 0.9);\n  color: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 28px;\n  font-weight: 700;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n  animation: styles-module__countdownPulse___ngZrL 1s ease-in-out infinite;\n}\n\n.styles-module__countdownLabel___px-ao {\n  font-size: 13px;\n  font-weight: 500;\n  color: #18181b;\n  background: rgba(255, 255, 255, 0.95);\n  padding: 6px 14px;\n  border-radius: 8px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.styles-module__countdownCancel___8cRgZ {\n  font-size: 12px;\n  color: #6b7280;\n  background: rgba(255, 255, 255, 0.9);\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  padding: 4px 12px;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 0.12s;\n}\n.styles-module__countdownCancel___8cRgZ:hover {\n  background: #f3f4f6;\n}\n\nhtml.impakers-selecting {\n  cursor: crosshair !important;\n}\nhtml.impakers-selecting * {\n  cursor: crosshair !important;\n}';
+var classNames7 = { "markersLayer": "styles-module__markersLayer___VR1cD", "fixedMarkersLayer": "styles-module__fixedMarkersLayer___wBuxm", "fab": "styles-module__fab___6FrCF", "fabEnter": "styles-module__fabEnter___9koyT", "active": "styles-module__active___X5PRD", "hoverHighlight": "styles-module__hoverHighlight___9kGLL", "enter": "styles-module__enter___jAi-c", "hoverHighlightIn": "styles-module__hoverHighlightIn___ljC4F", "singleSelectOutline": "styles-module__singleSelectOutline___2meUm", "fadeIn": "styles-module__fadeIn___PpRqy", "hoverTooltip": "styles-module__hoverTooltip___JE1Bs", "hoverTooltipIn": "styles-module__hoverTooltipIn___tncNM", "hoverReactPath": "styles-module__hoverReactPath___wPGYi", "hoverElementName": "styles-module__hoverElementName___lNqTP", "contextMenu": "styles-module__contextMenu___nDXft", "contextMenuItem": "styles-module__contextMenuItem___69GKu", "toast": "styles-module__toast___gV3Sa", "toastIn": "styles-module__toastIn___V382h", "toastOut": "styles-module__toastOut___zlqxG", "toastError": "styles-module__toastError___Q-8dn", "countdownOverlay": "styles-module__countdownOverlay___GruQJ", "countdownNumber": "styles-module__countdownNumber___VAmkI", "countdownPulse": "styles-module__countdownPulse___ngZrL", "countdownLabel": "styles-module__countdownLabel___px-ao", "countdownCancel": "styles-module__countdownCancel___8cRgZ", "fadeOut": "styles-module__fadeOut___tZb9S" };
 if (typeof document !== "undefined") {
   let style = document.getElementById("impakers-debug-styles-debug-widget-styles");
   if (!style) {
@@ -3387,6 +3375,7 @@ function DebugWidget({ endpoint, getUser, onHide }) {
   const [hoveredMarkerId, setHoveredMarkerId] = useState5(null);
   const [hoveredTargetElement, setHoveredTargetElement] = useState5(null);
   const [showToast, setShowToast] = useState5(false);
+  const [toastError, setToastError] = useState5(null);
   const [activeThread, setActiveThread] = useState5(null);
   const [threadComments, setThreadComments] = useState5({});
   const [serverTasks, setServerTasks] = useState5([]);
@@ -3750,12 +3739,14 @@ ${elementInfo.join("\n")}`);
         }, 150);
         window.getSelection()?.removeAllRanges();
       } catch (err) {
+        const msg = err?.message || "\uD53C\uB4DC\uBC31 \uC804\uC1A1 \uC2E4\uD328";
+        showErrorToast(msg);
         console.error("[@impakers/debug] \uD53C\uB4DC\uBC31 \uC804\uC1A1 \uC2E4\uD328:", err);
       } finally {
         setSubmitting(false);
       }
     },
-    [pendingAnnotation, submitting, endpoint, getUser]
+    [pendingAnnotation, submitting, endpoint, getUser, showErrorToast]
   );
   const cancelAnnotation = useCallback6(() => {
     setPendingExiting(true);
@@ -3791,19 +3782,31 @@ ${elementInfo.join("\n")}`);
     });
     return unsubscribe;
   }, [activeThread, endpoint]);
+  const showErrorToast = useCallback6((msg) => {
+    setToastError(msg);
+    originalSetTimeout(() => setToastError(null), 4e3);
+  }, []);
   const handleThreadReply = useCallback6(async (taskId, content, screenshot, file) => {
     const authorName = getUser?.()?.name ? String(getUser().name) : "\uC775\uBA85";
     const authorId = getUser?.()?.id ? String(getUser().id) : void 0;
     try {
       let fileResult;
       if (file) {
-        fileResult = await uploadFile(endpoint, file, "comment", taskId);
+        try {
+          fileResult = await uploadFile(endpoint, file, "comment", taskId);
+        } catch (uploadErr) {
+          const msg = uploadErr?.message || "\uD30C\uC77C \uC5C5\uB85C\uB4DC \uC2E4\uD328";
+          showErrorToast(msg);
+          console.error("[@impakers/debug] \uD30C\uC77C \uC5C5\uB85C\uB4DC \uC2E4\uD328:", uploadErr);
+        }
       }
       await postComment(endpoint, taskId, content, authorName, authorId, screenshot, fileResult);
     } catch (err) {
+      const msg = err?.message || "\uCF54\uBA58\uD2B8 \uC804\uC1A1 \uC2E4\uD328";
+      showErrorToast(msg);
       console.error("[@impakers/debug] \uCF54\uBA58\uD2B8 \uC804\uC1A1 \uC2E4\uD328:", err);
     }
-  }, [getUser, endpoint]);
+  }, [getUser, endpoint, showErrorToast]);
   const handleThreadClose = useCallback6(() => {
     setActiveThread(null);
   }, []);
@@ -4116,6 +4119,14 @@ ${elementInfo.join("\n")}`);
       showToast && /* @__PURE__ */ jsxs8("div", { className: styles_module_default7.toast, "data-impakers-debug": "", children: [
         /* @__PURE__ */ jsx8("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#16a34a", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx8("polyline", { points: "20 6 9 17 4 12" }) }),
         /* @__PURE__ */ jsx8("span", { children: "\uD0DC\uC2A4\uD06C \uC0DD\uC131\uC774 \uC644\uB8CC\uB418\uC5C8\uC2B5\uB2C8\uB2E4" })
+      ] }),
+      toastError && /* @__PURE__ */ jsxs8("div", { className: `${styles_module_default7.toast} ${styles_module_default7.toastError}`, "data-impakers-debug": "", children: [
+        /* @__PURE__ */ jsxs8("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#ef4444", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx8("circle", { cx: "12", cy: "12", r: "10" }),
+          /* @__PURE__ */ jsx8("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+          /* @__PURE__ */ jsx8("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+        ] }),
+        /* @__PURE__ */ jsx8("span", { children: toastError })
       ] })
     ] }),
     document.body