@impakers/debug 1.4.6 → 1.4.8

package/dist/next.d.mts

@@ -10,6 +10,10 @@ interface ImpakersDebugOptions {
      * false로 설정하면 소스코드가 .map에 그대로 노출됨
      */
     stripSourceContent?: boolean;
+    /**
+     * Next App Router route -> file manifest 생성 여부 (기본: true)
+     */
+    emitRouteManifest?: boolean;
 }
 /**
  * Next.js config wrapper — 소스맵 설정 자동 구성

package/dist/next.d.ts

@@ -10,6 +10,10 @@ interface ImpakersDebugOptions {
      * false로 설정하면 소스코드가 .map에 그대로 노출됨
      */
     stripSourceContent?: boolean;
+    /**
+     * Next App Router route -> file manifest 생성 여부 (기본: true)
+     */
+    emitRouteManifest?: boolean;
 }
 /**
  * Next.js config wrapper — 소스맵 설정 자동 구성

package/dist/next.js

@@ -89,8 +89,127 @@ var StripSourceContentPlugin = class {
     );
   }
 };
+var RouteManifestPlugin = class {
+  constructor(projectDir) {
+    this.projectDir = projectDir;
+  }
+  apply(compiler) {
+    compiler.hooks.afterEmit.tapAsync(
+      "ImpakersDebugRouteManifest",
+      (compilation, callback) => {
+        const fs = require("fs");
+        const path = require("path");
+        const outputPath = compilation.outputOptions?.path;
+        if (!outputPath) {
+          callback();
+          return;
+        }
+        const appDir = findAppDirectory(fs, path, this.projectDir);
+        if (!appDir) {
+          callback();
+          return;
+        }
+        const entries = scanRouteManifestEntries(fs, path, this.projectDir, appDir);
+        if (entries.length === 0) {
+          callback();
+          return;
+        }
+        const manifestPath = path.resolve(
+          outputPath,
+          "../static/chunks/impakers-debug-route-manifest.json"
+        );
+        try {
+          fs.mkdirSync(path.dirname(manifestPath), { recursive: true });
+          fs.writeFileSync(
+            manifestPath,
+            JSON.stringify({ version: 1, entries }, null, 2),
+            "utf-8"
+          );
+          console.log(
+            `[@impakers/debug] Emitted route manifest with ${entries.length} route entries`
+          );
+        } catch {
+        }
+        callback();
+      }
+    );
+  }
+};
+function findAppDirectory(fs, path, projectDir) {
+  const candidates = [
+    path.join(projectDir, "src", "app"),
+    path.join(projectDir, "app")
+  ];
+  for (const candidate of candidates) {
+    if (fs.existsSync(candidate) && fs.statSync(candidate).isDirectory()) {
+      return candidate;
+    }
+  }
+  return null;
+}
+function toPosixPath(path) {
+  return path.replace(/\\/g, "/");
+}
+function findRouteFile(fs, path, dir, baseName) {
+  const extensions = [".tsx", ".ts", ".jsx", ".js"];
+  for (const ext of extensions) {
+    const file = path.join(dir, `${baseName}${ext}`);
+    if (fs.existsSync(file) && fs.statSync(file).isFile()) {
+      return file;
+    }
+  }
+  return null;
+}
+function getUrlSegment(segmentName) {
+  if (!segmentName) return null;
+  if (segmentName.startsWith("(") && segmentName.endsWith(")")) return null;
+  return segmentName;
+}
+function routeFromSegments(segments) {
+  if (segments.length === 0) return "/";
+  return `/${segments.join("/")}`;
+}
+function scanRouteManifestEntries(fs, path, projectDir, appDir) {
+  const entries = [];
+  const walk = (currentDir, routeSegments, layoutChain) => {
+    const currentLayout = findRouteFile(fs, path, currentDir, "layout");
+    const nextLayoutChain = currentLayout ? [
+      ...layoutChain,
+      {
+        kind: "layout",
+        file: toPosixPath(path.relative(projectDir, currentLayout))
+      }
+    ] : layoutChain;
+    const currentPage = findRouteFile(fs, path, currentDir, "page");
+    if (currentPage) {
+      entries.push({
+        route: routeFromSegments(routeSegments),
+        segments: [...routeSegments],
+        files: [
+          {
+            kind: "page",
+            file: toPosixPath(path.relative(projectDir, currentPage))
+          },
+          ...nextLayoutChain
+        ]
+      });
+    }
+    const children = fs.readdirSync(currentDir, { withFileTypes: true }).filter((entry) => entry.isDirectory()).sort((a, b) => a.name.localeCompare(b.name));
+    for (const child of children) {
+      if (child.name.startsWith("@")) continue;
+      const nextSegment = getUrlSegment(child.name);
+      walk(
+        path.join(currentDir, child.name),
+        nextSegment ? [...routeSegments, nextSegment] : routeSegments,
+        nextLayoutChain
+      );
+    }
+  };
+  walk(appDir, [], []);
+  return entries;
+}
 function withImpakersDebug(nextConfig, options = {}) {
-  const { stripSourceContent = true } = options;
+  const { stripSourceContent = true, emitRouteManifest = true } = options;
   return {
     ...nextConfig,
     // 소스맵 생성 활성화
@@ -99,9 +218,14 @@ function withImpakersDebug(nextConfig, options = {}) {
       if (typeof nextConfig.webpack === "function") {
         config = nextConfig.webpack(config, context);
       }
-      if (!context.isServer && stripSourceContent) {
+      if (!context.isServer) {
         config.plugins = config.plugins || [];
-        config.plugins.push(new StripSourceContentPlugin());
+        if (stripSourceContent) {
+          config.plugins.push(new StripSourceContentPlugin());
+        }
+        if (emitRouteManifest && context.dir) {
+          config.plugins.push(new RouteManifestPlugin(context.dir));
+        }
       }
       return config;
     }

package/dist/next.mjs

@@ -72,8 +72,127 @@ var StripSourceContentPlugin = class {
     );
   }
 };
+var RouteManifestPlugin = class {
+  constructor(projectDir) {
+    this.projectDir = projectDir;
+  }
+  apply(compiler) {
+    compiler.hooks.afterEmit.tapAsync(
+      "ImpakersDebugRouteManifest",
+      (compilation, callback) => {
+        const fs = __require("fs");
+        const path = __require("path");
+        const outputPath = compilation.outputOptions?.path;
+        if (!outputPath) {
+          callback();
+          return;
+        }
+        const appDir = findAppDirectory(fs, path, this.projectDir);
+        if (!appDir) {
+          callback();
+          return;
+        }
+        const entries = scanRouteManifestEntries(fs, path, this.projectDir, appDir);
+        if (entries.length === 0) {
+          callback();
+          return;
+        }
+        const manifestPath = path.resolve(
+          outputPath,
+          "../static/chunks/impakers-debug-route-manifest.json"
+        );
+        try {
+          fs.mkdirSync(path.dirname(manifestPath), { recursive: true });
+          fs.writeFileSync(
+            manifestPath,
+            JSON.stringify({ version: 1, entries }, null, 2),
+            "utf-8"
+          );
+          console.log(
+            `[@impakers/debug] Emitted route manifest with ${entries.length} route entries`
+          );
+        } catch {
+        }
+        callback();
+      }
+    );
+  }
+};
+function findAppDirectory(fs, path, projectDir) {
+  const candidates = [
+    path.join(projectDir, "src", "app"),
+    path.join(projectDir, "app")
+  ];
+  for (const candidate of candidates) {
+    if (fs.existsSync(candidate) && fs.statSync(candidate).isDirectory()) {
+      return candidate;
+    }
+  }
+  return null;
+}
+function toPosixPath(path) {
+  return path.replace(/\\/g, "/");
+}
+function findRouteFile(fs, path, dir, baseName) {
+  const extensions = [".tsx", ".ts", ".jsx", ".js"];
+  for (const ext of extensions) {
+    const file = path.join(dir, `${baseName}${ext}`);
+    if (fs.existsSync(file) && fs.statSync(file).isFile()) {
+      return file;
+    }
+  }
+  return null;
+}
+function getUrlSegment(segmentName) {
+  if (!segmentName) return null;
+  if (segmentName.startsWith("(") && segmentName.endsWith(")")) return null;
+  return segmentName;
+}
+function routeFromSegments(segments) {
+  if (segments.length === 0) return "/";
+  return `/${segments.join("/")}`;
+}
+function scanRouteManifestEntries(fs, path, projectDir, appDir) {
+  const entries = [];
+  const walk = (currentDir, routeSegments, layoutChain) => {
+    const currentLayout = findRouteFile(fs, path, currentDir, "layout");
+    const nextLayoutChain = currentLayout ? [
+      ...layoutChain,
+      {
+        kind: "layout",
+        file: toPosixPath(path.relative(projectDir, currentLayout))
+      }
+    ] : layoutChain;
+    const currentPage = findRouteFile(fs, path, currentDir, "page");
+    if (currentPage) {
+      entries.push({
+        route: routeFromSegments(routeSegments),
+        segments: [...routeSegments],
+        files: [
+          {
+            kind: "page",
+            file: toPosixPath(path.relative(projectDir, currentPage))
+          },
+          ...nextLayoutChain
+        ]
+      });
+    }
+    const children = fs.readdirSync(currentDir, { withFileTypes: true }).filter((entry) => entry.isDirectory()).sort((a, b) => a.name.localeCompare(b.name));
+    for (const child of children) {
+      if (child.name.startsWith("@")) continue;
+      const nextSegment = getUrlSegment(child.name);
+      walk(
+        path.join(currentDir, child.name),
+        nextSegment ? [...routeSegments, nextSegment] : routeSegments,
+        nextLayoutChain
+      );
+    }
+  };
+  walk(appDir, [], []);
+  return entries;
+}
 function withImpakersDebug(nextConfig, options = {}) {
-  const { stripSourceContent = true } = options;
+  const { stripSourceContent = true, emitRouteManifest = true } = options;
   return {
     ...nextConfig,
     // 소스맵 생성 활성화
@@ -82,9 +201,14 @@ function withImpakersDebug(nextConfig, options = {}) {
       if (typeof nextConfig.webpack === "function") {
         config = nextConfig.webpack(config, context);
       }
-      if (!context.isServer && stripSourceContent) {
+      if (!context.isServer) {
         config.plugins = config.plugins || [];
-        config.plugins.push(new StripSourceContentPlugin());
+        if (stripSourceContent) {
+          config.plugins.push(new StripSourceContentPlugin());
+        }
+        if (emitRouteManifest && context.dir) {
+          config.plugins.push(new RouteManifestPlugin(context.dir));
+        }
       }
       return config;
     }

package/dist/react.js

@@ -1569,22 +1569,60 @@ 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 = /\b(?:oklab|oklch|color-mix|(?<![\w-])lab|(?<![\w-])lch)\s*\(/i;
+var COLOR_PROPS = [
+  "color",
+  "background-color",
+  "background-image",
+  "background",
+  "border-color",
+  "border-top-color",
+  "border-right-color",
+  "border-bottom-color",
+  "border-left-color",
+  "outline-color",
+  "text-decoration-color",
+  "box-shadow",
+  "text-shadow",
+  "caret-color",
+  "column-rule-color",
+  "fill",
+  "stroke",
+  "stop-color",
+  "flood-color",
+  "lighting-color"
+];
 function sanitizeUnsupportedColors(clonedDoc) {
-  clonedDoc.querySelectorAll("style").forEach((styleEl) => {
-    const text = styleEl.textContent || "";
-    if (UNSUPPORTED_COLOR_RE.test(text)) {
-      styleEl.textContent = text.replace(COLOR_DECLARATION_RE, "");
-    }
-  });
-  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, "");
+  const allEls = clonedDoc.querySelectorAll("*");
+  for (let i = 0; i < allEls.length; i++) {
+    const el = allEls[i];
+    if (!el.style) continue;
+    let cs = null;
+    for (const prop of COLOR_PROPS) {
+      const inlineVal = el.style.getPropertyValue(prop);
+      if (inlineVal && UNSUPPORTED_RE.test(inlineVal)) {
+        el.style.setProperty(prop, getFallback(prop));
+        continue;
+      }
+      if (!cs) {
+        try {
+          cs = clonedDoc.defaultView.getComputedStyle(el);
+        } catch {
+          break;
+        }
+      }
+      const val = cs.getPropertyValue(prop);
+      if (val && UNSUPPORTED_RE.test(val)) {
+        el.style.setProperty(prop, getFallback(prop));
+      }
     }
-  });
+  }
+}
+function getFallback(prop) {
+  if (prop === "background-image" || prop === "background") return "none";
+  if (prop === "box-shadow" || prop === "text-shadow") return "none";
+  if (prop === "color") return "inherit";
+  return "transparent";
 }
 async function captureElement(el, options = {}) {
   const { quality = 0.7, maxScale = 2 } = options;
@@ -1838,6 +1876,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();
@@ -3405,6 +3588,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;
@@ -3726,7 +3926,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}`);