@impakers/debug 1.4.3 → 1.4.5

package/dist/react.js

@@ -1484,15 +1484,20 @@ function probeComponentSource(fiber) {
   return result;
 }
 function probeSourceWalk(fiber, maxDepth = 15) {
+  const results = [];
+  const seenFileNames = /* @__PURE__ */ new Set();
   let current = fiber;
   let depth = 0;
   while (current && depth < maxDepth) {
     const source = probeComponentSource(current);
-    if (source) return source;
+    if (source && !seenFileNames.has(source.fileName)) {
+      seenFileNames.add(source.fileName);
+      results.push(source);
+    }
     current = current.return;
     depth++;
   }
-  return null;
+  return results;
 }
 function getSourceLocation(element) {
   const fiber = getFiberFromElement2(element);
@@ -1521,9 +1526,15 @@ function getSourceLocation(element) {
       isProduction: false
     };
   }
-  const probed = probeSourceWalk(fiber);
-  if (probed) {
-    return { found: true, source: probed, isReactApp: true, isProduction: false };
+  const probedList = probeSourceWalk(fiber);
+  if (probedList.length > 0) {
+    return {
+      found: true,
+      source: probedList[0],
+      sourceCandidates: probedList,
+      isReactApp: true,
+      isProduction: false
+    };
   }
   return {
     found: false,
@@ -1557,6 +1568,89 @@ function findNearestComponentSource(element, maxAncestors = 10) {
   return getSourceLocation(element);
 }
 
+// src/utils/capture-element.ts
+async function captureElement(el, options = {}) {
+  const { quality = 0.7, maxScale = 2 } = options;
+  const rect = el.getBoundingClientRect();
+  const scale = Math.min(window.devicePixelRatio, maxScale);
+  const canvas = document.createElement("canvas");
+  canvas.width = rect.width * scale;
+  canvas.height = rect.height * scale;
+  const ctx = canvas.getContext("2d");
+  ctx.scale(scale, scale);
+  const clone = el.cloneNode(true);
+  inlineComputedStyles(el, clone);
+  clone.style.margin = "0";
+  clone.style.position = "static";
+  const serializer = new XMLSerializer();
+  const html = serializer.serializeToString(clone);
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${rect.width}" height="${rect.height}">
+    <foreignObject width="100%" height="100%">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="width:${rect.width}px;height:${rect.height}px;overflow:hidden">${html}</div>
+    </foreignObject>
+  </svg>`;
+  const blob = new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  try {
+    const img = await loadImage(url);
+    ctx.drawImage(img, 0, 0, rect.width, rect.height);
+    return canvas.toDataURL("image/jpeg", quality);
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+async function captureFullPage(options = {}) {
+  const { quality = 0.5, hideSelectors = [] } = options;
+  const defaultSelectors = ["[data-impakers-debug]", "[data-annotation-popup]", "[data-annotation-marker]"];
+  const allSelectors = [...defaultSelectors, ...hideSelectors];
+  const hiddenEls = document.querySelectorAll(allSelectors.join(", "));
+  try {
+    hiddenEls.forEach((el) => el.style.visibility = "hidden");
+    const html2canvas = (await import("html2canvas")).default;
+    const canvas = await html2canvas(document.body, {
+      useCORS: true,
+      allowTaint: true,
+      scale: 1,
+      logging: false,
+      width: window.innerWidth,
+      height: window.innerHeight,
+      onclone: (clonedDoc) => {
+        const unsupported = /oklab|oklch|color-mix/i;
+        clonedDoc.querySelectorAll("style").forEach((styleEl) => {
+          if (unsupported.test(styleEl.textContent || "")) {
+            styleEl.textContent = (styleEl.textContent || "").replace(
+              /[^{};\n]+:\s*[^;{}]*(?:oklab|oklch|color-mix|lch|lab)\([^)]*(?:\([^)]*\))*[^)]*\)[^;{}]*/gi,
+              ""
+            );
+          }
+        });
+      }
+    });
+    return canvas.toDataURL("image/jpeg", quality);
+  } catch {
+    return void 0;
+  } finally {
+    hiddenEls.forEach((el) => el.style.visibility = "");
+  }
+}
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error("\uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC2E4\uD328"));
+    img.src = src;
+  });
+}
+function inlineComputedStyles(src, dst) {
+  const cs = window.getComputedStyle(src);
+  dst.style.cssText = cs.cssText;
+  const srcChildren = src.children;
+  const dstChildren = dst.children;
+  for (let i = 0; i < srcChildren.length && i < dstChildren.length; i++) {
+    inlineComputedStyles(srcChildren[i], dstChildren[i]);
+  }
+}
+
 // src/core/collector.ts
 var MAX_ERRORS = 20;
 var MAX_LOGS = 50;
@@ -2087,23 +2181,6 @@ async function uploadFile(endpoint, file, context, taskId) {
   }
   return res.json();
 }
-async function updateTaskStatus(endpoint, taskId, status) {
-  const snapshots = snapshotCaches("feedbacks:");
-  mutateMatchingCaches(
-    "feedbacks:",
-    (items) => items.map((item) => item.id === taskId ? { ...item, status } : item)
-  );
-  try {
-    await apiFetch(`${endpoint}/${taskId}/status`, {
-      method: "PATCH",
-      body: JSON.stringify({ status })
-    });
-    revalidateCachedFeedbackLists(endpoint);
-  } catch (error) {
-    restoreSnapshots(snapshots);
-    throw error;
-  }
-}
 
 // src/core/sourcemap-resolver.ts
 var import_trace_mapping = require("@jridgewell/trace-mapping");
@@ -2214,6 +2291,7 @@ var styles_module_default2 = classNames2;
 
 // src/components/annotation-marker/index.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var IN_PROGRESS_MARKER_COLOR = "#3b82f6";
 var DONE_MARKER_COLOR = "#9ca3af";
 function AnnotationMarker({
   annotation,
@@ -2227,7 +2305,8 @@ function AnnotationMarker({
 }) {
   const animClass = !isAnimated ? styles_module_default2.enter : "";
   const isDone = annotation.status === "done" || annotation.status === "resolved";
-  const markerColor = isDone ? DONE_MARKER_COLOR : accentColor;
+  const isInProgress = annotation.status === "in_progress";
+  const markerColor = isDone ? DONE_MARKER_COLOR : isInProgress ? IN_PROGRESS_MARKER_COLOR : accentColor;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
@@ -2330,8 +2409,7 @@ function CommentThread({
   top,
   bottom,
   onClose,
-  onReply,
-  onResolve
+  onReply
 }) {
   const [replyText, setReplyText] = (0, import_react3.useState)("");
   const [exiting, setExiting] = (0, import_react3.useState)(false);
@@ -2425,14 +2503,7 @@ function CommentThread({
       cleanup();
       if (!targetEl) return;
       try {
-        const html2canvas = (await import("html2canvas")).default;
-        const canvas = await html2canvas(targetEl, {
-          useCORS: true,
-          allowTaint: true,
-          scale: Math.min(window.devicePixelRatio, 2),
-          logging: false
-        });
-        const base64 = canvas.toDataURL("image/jpeg", 0.7);
+        const base64 = await captureElement(targetEl);
         setPendingImage(base64);
       } catch (err) {
         console.error("[@impakers/debug] DOM \uC2A4\uD06C\uB9B0\uC0F7 \uC2E4\uD328:", err);
@@ -2493,10 +2564,7 @@ function CommentThread({
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: styles_module_default3.title, children: feedbackTitle })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: styles_module_default3.headerActions, children: [
-            onResolve && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: styles_module_default3.headerAction, onClick: () => onResolve(task.id), title: "\uC644\uB8CC \uCC98\uB9AC", type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "20 6 9 17 4 12" }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: styles_module_default3.headerAction, onClick: handleClose, title: "\uB2EB\uAE30", type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) }) })
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: styles_module_default3.headerActions, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: styles_module_default3.headerAction, onClick: handleClose, title: "\uB2EB\uAE30", type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) }) }) })
         ] }),
         task.comments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: styles_module_default3.divider }),
@@ -2920,11 +2988,10 @@ function InboxPanel({
   endpoint,
   currentUserName,
   currentUserId,
-  onClose,
-  onStatusChange
+  onClose
 }) {
   const [tab, setTab] = (0, import_react5.useState)("page");
-  const [statusFilter, setStatusFilter] = (0, import_react5.useState)("open");
+  const [statusFilter, setStatusFilter] = (0, import_react5.useState)("todo");
   const [exiting, setExiting] = (0, import_react5.useState)(false);
   const [selectedItem, setSelectedItem] = (0, import_react5.useState)(null);
   const [comments, setComments] = (0, import_react5.useState)([]);
@@ -2999,17 +3066,11 @@ function InboxPanel({
     }
     if (e.key === "Escape") handleClose();
   }, [handleSendReply, handleClose]);
-  const handleToggleStatus = (0, import_react5.useCallback)((item, e) => {
-    e.stopPropagation();
-    const newStatus = item.status === "done" ? "todo" : "done";
-    onStatusChange?.(item.id, newStatus);
-  }, [onStatusChange]);
   const rawItems = tab === "page" ? pageItems : allItems;
-  const items = rawItems.filter(
-    (item) => statusFilter === "resolved" ? item.status === "done" : item.status !== "done"
-  );
-  const openCount = rawItems.filter((item) => item.status !== "done").length;
-  const resolvedCount = rawItems.filter((item) => item.status === "done").length;
+  const items = rawItems.filter((item) => item.status === statusFilter);
+  const todoCount = rawItems.filter((item) => item.status === "todo").length;
+  const inProgressCount = rawItems.filter((item) => item.status === "in_progress").length;
+  const doneCount = rawItems.filter((item) => item.status === "done").length;
   if (typeof document === "undefined") return null;
   return (0, import_react_dom.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { "data-impakers-debug": "", children: [
@@ -3132,24 +3193,36 @@ function InboxPanel({
             /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "button",
               {
-                className: `${styles_module_default5.filterChip} ${statusFilter === "open" ? styles_module_default5.active : ""}`,
-                onClick: () => setStatusFilter("open"),
+                className: `${styles_module_default5.filterChip} ${statusFilter === "todo" ? styles_module_default5.active : ""}`,
+                onClick: () => setStatusFilter("todo"),
+                type: "button",
+                children: [
+                  "\uC9C4\uD589\uC804",
+                  todoCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: styles_module_default5.filterCount, children: todoCount })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              "button",
+              {
+                className: `${styles_module_default5.filterChip} ${statusFilter === "in_progress" ? styles_module_default5.active : ""}`,
+                onClick: () => setStatusFilter("in_progress"),
                 type: "button",
                 children: [
-                  "Open",
-                  openCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: styles_module_default5.filterCount, children: openCount })
+                  "\uC9C4\uD589\uC911",
+                  inProgressCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: styles_module_default5.filterCount, children: inProgressCount })
                 ]
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "button",
               {
-                className: `${styles_module_default5.filterChip} ${statusFilter === "resolved" ? styles_module_default5.active : ""}`,
-                onClick: () => setStatusFilter("resolved"),
+                className: `${styles_module_default5.filterChip} ${statusFilter === "done" ? styles_module_default5.active : ""}`,
+                onClick: () => setStatusFilter("done"),
                 type: "button",
                 children: [
-                  "Resolved",
-                  resolvedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: styles_module_default5.filterCount, children: resolvedCount })
+                  "\uC644\uB8CC",
+                  doneCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: styles_module_default5.filterCount, children: doneCount })
                 ]
               }
             )
@@ -3163,17 +3236,7 @@ function InboxPanel({
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: styles_module_default5.cardInfo, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: styles_module_default5.cardMeta, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: styles_module_default5.cardAuthor, children: item.authorName }),
                 /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: styles_module_default5.cardTime, children: timeAgo2(item.createdAt) })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                "button",
-                {
-                  className: `${styles_module_default5.checkBtn} ${item.status === "done" ? styles_module_default5.checked : ""}`,
-                  onClick: (e) => handleToggleStatus(item, e),
-                  type: "button",
-                  title: item.status === "done" ? "\uBBF8\uC644\uB8CC\uB85C \uBCC0\uACBD" : "\uC644\uB8CC \uCC98\uB9AC",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "20 6 9 17 4 12" }) })
-                }
-              )
+              ] }) })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: styles_module_default5.cardTitle, children: item.title.replace(/^\[피드백\]\s*/, "") }),
             item.screenshot && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: styles_module_default5.cardScreenshot, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: item.screenshot, alt: "screenshot" }) }),
@@ -3359,6 +3422,17 @@ function detectSourceFile(element) {
   }
   return void 0;
 }
+function detectSourceFileCandidates(element) {
+  const result = getSourceLocation(element);
+  const loc = result.found ? result : findNearestComponentSource(element);
+  if (loc.found && loc.sourceCandidates && loc.sourceCandidates.length > 0) {
+    return loc.sourceCandidates.map((s) => formatSourceLocation(s, "path"));
+  }
+  if (loc.found && loc.source) {
+    return [formatSourceLocation(loc.source, "path")];
+  }
+  return [];
+}
 var STORAGE_PREFIX = "impakers-debug-markers-";
 function getRouteKey() {
   return STORAGE_PREFIX + window.location.pathname;
@@ -3631,20 +3705,27 @@ function DebugWidget({ endpoint, getUser, onHide }) {
         targetElement: elementUnder
       });
       setHoverInfo(null);
-      const rawSource = detectSourceFile(elementUnder);
-      if (rawSource?.includes("/chunks/")) {
-        resolveSourceString(rawSource).then((resolved) => {
-          if (resolved) {
-            setPendingAnnotation(
-              (prev) => prev ? {
-                ...prev,
-                resolvedSource: `${resolved.source}:${resolved.line}`,
-                resolvedName: resolved.name ?? void 0
-              } : prev
-            );
+      const candidates = detectSourceFileCandidates(elementUnder);
+      const chunkCandidates = candidates.filter((c) => c.includes("/chunks/"));
+      if (chunkCandidates.length > 0) {
+        (async () => {
+          for (const candidate of chunkCandidates) {
+            try {
+              const resolved = await resolveSourceString(candidate);
+              if (resolved) {
+                setPendingAnnotation(
+                  (prev) => prev ? {
+                    ...prev,
+                    resolvedSource: `${resolved.source}:${resolved.line}`,
+                    resolvedName: resolved.name ?? void 0
+                  } : prev
+                );
+                break;
+              }
+            } catch {
+            }
           }
-        }).catch(() => {
-        });
+        })();
       }
     };
     document.addEventListener("click", handleClick, true);
@@ -3660,28 +3741,10 @@ function DebugWidget({ endpoint, getUser, onHide }) {
       setSubmitting(true);
       try {
         const metadata = collectMetadata(getUser);
-        let screenshot;
-        const debugEls = document.querySelectorAll("[data-impakers-debug], [data-annotation-popup], [data-annotation-marker]");
-        try {
-          debugEls.forEach((el) => el.style.visibility = "hidden");
-          const html2canvas = (await import("html2canvas")).default;
-          const canvas = await html2canvas(document.body, {
-            useCORS: true,
-            allowTaint: true,
-            scale: 1,
-            // 1x로 줄여서 용량 절약
-            logging: false,
-            width: window.innerWidth,
-            height: window.innerHeight
-          });
-          screenshot = canvas.toDataURL("image/jpeg", 0.5);
-        } catch {
-        } finally {
-          debugEls.forEach((el) => el.style.visibility = "");
-        }
-        let resolvedSource = pendingAnnotation.sourceFile || "";
-        let resolvedName = null;
-        if (pendingAnnotation.sourceFile?.includes("/chunks/")) {
+        const screenshot = await captureFullPage();
+        let resolvedSource = pendingAnnotation.resolvedSource || pendingAnnotation.sourceFile || "";
+        let resolvedName = pendingAnnotation.resolvedName || null;
+        if (!pendingAnnotation.resolvedSource && pendingAnnotation.sourceFile?.includes("/chunks/")) {
           try {
             const resolved = await resolveSourceString(pendingAnnotation.sourceFile);
             if (resolved) {
@@ -3751,7 +3814,8 @@ ${elementInfo.join("\n")}`);
             isFixed: pendingAnnotation.isFixed || false,
             element: pendingAnnotation.element,
             boundingBox: pendingAnnotation.boundingBox
-          }
+          },
+          authorName: getUser?.()?.name ? String(getUser().name) : void 0
         });
         setShowToast(true);
         originalSetTimeout(() => setShowToast(false), 3e3);
@@ -3920,7 +3984,7 @@ ${elementInfo.join("\n")}`);
     title: task.title || "\uD53C\uB4DC\uBC31",
     status: task.status,
     priority: task.priority,
-    authorName: getUser?.()?.name ? String(getUser().name) : "\uC775\uBA85",
+    authorName: task.authorName || "\uC775\uBA85",
     feedbackUrl: task.feedbackUrl || currentPath,
     createdAt: task.createdAt,
     commentCount: task.commentCount || 0
@@ -3972,14 +4036,7 @@ ${elementInfo.join("\n")}`);
           endpoint,
           currentUserName: getUser?.()?.name ? String(getUser().name) : "\uC775\uBA85",
           currentUserId: getUser?.()?.id ? String(getUser().id) : void 0,
-          onClose: () => setShowInbox(false),
-          onStatusChange: async (taskId, status) => {
-            try {
-              await updateTaskStatus(endpoint, taskId, status);
-            } catch (err) {
-              console.error("[@impakers/debug] \uC0C1\uD0DC \uBCC0\uACBD \uC2E4\uD328:", err);
-            }
-          }
+          onClose: () => setShowInbox(false)
         }
       ),
       showSettings && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(