@impakers/debug 1.4.6 → 1.4.7

package/dist/react.mjs

@@ -1535,23 +1535,59 @@ function findNearestComponentSource(element, maxAncestors = 10) {
 }
 
 // src/utils/capture-element.ts
-var UNSUPPORTED_COLOR_RE = /oklab|oklch|color-mix/i;
-var COLOR_DECLARATION_RE = /[^{};\n]+:\s*[^;{}]*(?:oklab|oklch|color-mix|lch|lab)\([^)]*(?:\([^)]*\))*[^)]*\)[^;{}]*/gi;
+var UNSUPPORTED_RE = /oklab|oklch|color-mix/i;
 function sanitizeUnsupportedColors(clonedDoc) {
+  try {
+    for (let i = 0; i < clonedDoc.styleSheets.length; i++) {
+      try {
+        const sheet = clonedDoc.styleSheets[i];
+        const rules = sheet.cssRules || sheet.rules;
+        if (!rules) continue;
+        sanitizeCSSRules(sheet, rules);
+      } catch {
+      }
+    }
+  } catch {
+  }
   clonedDoc.querySelectorAll("style").forEach((styleEl) => {
     const text = styleEl.textContent || "";
-    if (UNSUPPORTED_COLOR_RE.test(text)) {
-      styleEl.textContent = text.replace(COLOR_DECLARATION_RE, "");
+    if (UNSUPPORTED_RE.test(text)) {
+      styleEl.textContent = text.replace(
+        /[^{};\n]+:\s*[^;{}]*(?:oklab|oklch|color-mix|lch|lab)\([^)]*(?:\([^)]*\))*[^)]*\)[^;{}]*/gi,
+        ""
+      );
     }
   });
   clonedDoc.querySelectorAll("*").forEach((el) => {
     const s = el.style;
     if (!s?.cssText) return;
-    if (UNSUPPORTED_COLOR_RE.test(s.cssText)) {
-      s.cssText = s.cssText.replace(COLOR_DECLARATION_RE, "");
+    if (UNSUPPORTED_RE.test(s.cssText)) {
+      s.cssText = s.cssText.replace(
+        /[^;]*(?:oklab|oklch|color-mix|lch|lab)\([^)]*(?:\([^)]*\))*[^)]*\)[^;]*/gi,
+        ""
+      );
     }
   });
 }
+function sanitizeCSSRules(sheet, rules) {
+  for (let j = rules.length - 1; j >= 0; j--) {
+    const rule = rules[j];
+    if ("cssRules" in rule && rule.cssRules) {
+      sanitizeCSSRules(sheet, rule.cssRules);
+      continue;
+    }
+    if (rule instanceof CSSStyleRule) {
+      const style = rule.style;
+      for (let k = style.length - 1; k >= 0; k--) {
+        const prop = style[k];
+        const val = style.getPropertyValue(prop);
+        if (UNSUPPORTED_RE.test(val)) {
+          style.setProperty(prop, "transparent");
+        }
+      }
+    }
+  }
+}
 async function captureElement(el, options = {}) {
   const { quality = 0.7, maxScale = 2 } = options;
   const html2canvas = (await import("html2canvas")).default;
@@ -1804,6 +1840,151 @@ function collectMetadata(getUser) {
   return metadata;
 }
 
+// src/core/debug-targets.ts
+var NEXT_ROUTE_MANIFEST_URL = "/_next/static/chunks/impakers-debug-route-manifest.json";
+var manifestPromise = null;
+var manifestFailed = false;
+function normalizePathname(pathname) {
+  if (!pathname || pathname === "/") return "/";
+  return pathname.endsWith("/") ? pathname.slice(0, -1) || "/" : pathname;
+}
+function splitPathname(pathname) {
+  const normalized = normalizePathname(pathname);
+  if (normalized === "/") return [];
+  return normalized.slice(1).split("/").map((segment) => decodeURIComponent(segment)).filter(Boolean);
+}
+function isDynamicSegment(segment) {
+  return /^\[[^\]]+\]$/.test(segment);
+}
+function isCatchAllSegment(segment) {
+  return /^\[\.\.\.[^\]]+\]$/.test(segment);
+}
+function isOptionalCatchAllSegment(segment) {
+  return /^\[\[\.\.\.[^\]]+\]\]$/.test(segment);
+}
+function scoreRouteMatch(routeSegments, pathnameSegments) {
+  let routeIndex = 0;
+  let pathIndex = 0;
+  let score = 0;
+  while (routeIndex < routeSegments.length) {
+    const routeSegment = routeSegments[routeIndex];
+    if (isOptionalCatchAllSegment(routeSegment)) {
+      score += 1;
+      pathIndex = pathnameSegments.length;
+      routeIndex += 1;
+      break;
+    }
+    if (isCatchAllSegment(routeSegment)) {
+      if (pathIndex >= pathnameSegments.length) return null;
+      score += 2;
+      pathIndex = pathnameSegments.length;
+      routeIndex += 1;
+      break;
+    }
+    const pathSegment = pathnameSegments[pathIndex];
+    if (pathSegment === void 0) return null;
+    if (isDynamicSegment(routeSegment)) {
+      score += 5;
+      routeIndex += 1;
+      pathIndex += 1;
+      continue;
+    }
+    if (routeSegment !== pathSegment) return null;
+    score += 20;
+    routeIndex += 1;
+    pathIndex += 1;
+  }
+  if (routeIndex !== routeSegments.length) return null;
+  if (pathIndex !== pathnameSegments.length) return null;
+  return score;
+}
+async function loadNextRouteManifest() {
+  if (manifestFailed) return null;
+  if (manifestPromise) return manifestPromise;
+  manifestPromise = (async () => {
+    try {
+      const res = await fetch(NEXT_ROUTE_MANIFEST_URL, { cache: "force-cache" });
+      if (!res.ok) {
+        manifestFailed = true;
+        return null;
+      }
+      const json = await res.json();
+      if (!json || typeof json !== "object" || !Array.isArray(json.entries)) {
+        manifestFailed = true;
+        return null;
+      }
+      return json;
+    } catch {
+      manifestFailed = true;
+      return null;
+    }
+  })();
+  return manifestPromise;
+}
+function buildRouteTargets(entry) {
+  const pageTarget = entry.files.find((file) => file.kind === "page");
+  const layoutTargets = entry.files.filter((file) => file.kind === "layout");
+  const targets = [];
+  if (pageTarget) {
+    targets.push({
+      kind: "route-page",
+      file: pageTarget.file,
+      label: "Current page route",
+      confidence: 1,
+      reason: "matched-current-url"
+    });
+  }
+  layoutTargets.forEach((layout, index) => {
+    targets.push({
+      kind: "route-layout",
+      file: layout.file,
+      label: index === layoutTargets.length - 1 ? "Nearest layout" : "Ancestor layout",
+      confidence: Math.max(0.7, 0.95 - index * 0.08),
+      reason: "matched-layout-chain"
+    });
+  });
+  return targets;
+}
+async function getRouteDebugTargets(pathname) {
+  if (typeof window === "undefined") return null;
+  const currentPathname = pathname ?? window.location.pathname;
+  const manifest = await loadNextRouteManifest();
+  if (!manifest) return null;
+  const pathnameSegments = splitPathname(currentPathname);
+  let bestEntry = null;
+  let bestScore = -1;
+  for (const entry of manifest.entries) {
+    const score = scoreRouteMatch(entry.segments, pathnameSegments);
+    if (score === null) continue;
+    if (score > bestScore) {
+      bestScore = score;
+      bestEntry = entry;
+    }
+  }
+  if (!bestEntry) return null;
+  return {
+    targets: buildRouteTargets(bestEntry),
+    context: {
+      pathname: normalizePathname(currentPathname),
+      matchedRoute: bestEntry.route,
+      source: "next-route-manifest"
+    }
+  };
+}
+function mergeDebugTargets(...groups) {
+  const merged = [];
+  const seen = /* @__PURE__ */ new Set();
+  groups.forEach((group) => {
+    group?.forEach((target) => {
+      const key = `${target.kind}:${target.file}:${target.line ?? ""}:${target.column ?? ""}`;
+      if (seen.has(key)) return;
+      seen.add(key);
+      merged.push(target);
+    });
+  });
+  return merged.sort((a, b) => b.confidence - a.confidence);
+}
+
 // src/core/api.ts
 function getToken() {
   const token = loadToken();
@@ -3371,6 +3552,23 @@ function detectSourceFileCandidates(element) {
   }
   return [];
 }
+function buildComponentDebugTarget(resolvedSource, componentName) {
+  const match = resolvedSource.match(/^(.+):(\d+)(?::(\d+))?$/);
+  if (!match) return null;
+  const [, file, lineStr, columnStr] = match;
+  const line = Number.parseInt(lineStr, 10);
+  const column = columnStr ? Number.parseInt(columnStr, 10) : void 0;
+  if (!file || Number.isNaN(line)) return null;
+  return {
+    kind: "component",
+    file,
+    line,
+    column,
+    label: componentName || "Resolved component source",
+    confidence: 0.98,
+    reason: "resolved-from-source-map"
+  };
+}
 var STORAGE_PREFIX = "impakers-debug-markers-";
 function getRouteKey() {
   return STORAGE_PREFIX + window.location.pathname;
@@ -3692,7 +3890,28 @@ function DebugWidget({ endpoint, getUser, onHide }) {
           } catch {
           }
         }
+        const routeMatch = await getRouteDebugTargets(window.location.pathname);
+        const componentTarget = resolvedSource && !resolvedSource.includes("/chunks/") ? buildComponentDebugTarget(resolvedSource, resolvedName) : null;
+        const debugTargets = mergeDebugTargets(
+          componentTarget ? [componentTarget] : void 0,
+          routeMatch?.targets
+        );
+        if (debugTargets.length > 0) {
+          metadata.debugTargets = debugTargets;
+        }
+        if (routeMatch?.context) {
+          metadata.routeDebug = routeMatch.context;
+        }
         const descriptionParts = [comment];
+        if (debugTargets.length > 0) {
+          descriptionParts.push(
+            "\n\n---\n**\uB514\uBC84\uAE45 \uD0C0\uAC9F \uD30C\uC77C**:",
+            ...debugTargets.map((target) => {
+              const suffix = target.line ? `:${target.line}${typeof target.column === "number" ? `:${target.column}` : ""}` : "";
+              return `- [${target.kind}] \`${target.file}${suffix}\` (${target.reason})`;
+            })
+          );
+        }
         const elementInfo = [];
         if (pendingAnnotation.element) {
           elementInfo.push(`**\uC120\uD0DD\uB41C \uC694\uC18C**: ${pendingAnnotation.element}`);