issue-sticker 0.5.0 → 0.7.0

package/dist/{externalUserPayload-zu5IXBjn.js → externalUserPayload-B26uCsCP.js}

@@ -1,83 +1,8 @@
-import { d as OVERLAY_LAYER_INDEX, q as gzip_1, r as record, a as cn, o as useCallbackRef$1, h as useComposedRefs, e as Primitive, P as Presence, i as Portal$1, f as composeEventHandlers, j as createContextScope, k as createSlot, D as DismissableLayer, C as Content, t as createPopperScope, l as useControllableState, v as Root2$1, m as useId, A as Anchor, w as Arrow, b as usePortalContainer, O as OVERLAY_LAYER, s as stopEscapePropagation, n as useLayoutEffect2, V as VISUALLY_HIDDEN_STYLES, c as createLucideIcon, x as clsx, S as Slot$2 } from "./createLucideIcon-BzRMP02h.js";
+import { q as gzip_1, r as record, a as cn, o as useCallbackRef$1, h as useComposedRefs, e as Primitive, P as Presence, i as Portal$1, f as composeEventHandlers, j as createContextScope, k as createSlot, D as DismissableLayer, C as Content, t as createPopperScope, l as useControllableState, v as Root2$1, m as useId, A as Anchor, w as Arrow, b as usePortalContainer, d as OVERLAY_LAYER, s as stopEscapePropagation, n as useLayoutEffect2, V as VISUALLY_HIDDEN_STYLES, c as createLucideIcon, x as clsx, S as Slot$2, O as OVERLAY_LAYER_INDEX, M as MousePointer2 } from "./mouse-pointer-2-BR00y3ir.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useState, createContext, useContext, useCallback, useRef, useLayoutEffect, useEffect, useMemo } from "react";
 import * as ReactDOM from "react-dom";
-const ISSUE_STICKER_HOST_ELEMENT_ID = "issue-sticker-host";
-const ISSUE_STICKER_RUNTIME_OWNER_ATTRIBUTE = "data-issue-sticker-runtime";
-const ISSUE_STICKER_EXTENSION_RUNTIME_READY_EVENT = "issue-sticker:extension-runtime-ready";
-const ISSUE_STICKER_RUNTIME_OWNER = {
-  extension: "extension",
-  sdk: "sdk"
-};
-function resolveDocument(doc) {
-  return typeof document === "undefined" ? null : document;
-}
-function getIssueStickerRuntimeHost(doc) {
-  var _a;
-  return ((_a = resolveDocument()) == null ? void 0 : _a.getElementById(ISSUE_STICKER_HOST_ELEMENT_ID)) ?? null;
-}
-function getIssueStickerRuntimeOwner(element) {
-  const owner = element == null ? void 0 : element.getAttribute(ISSUE_STICKER_RUNTIME_OWNER_ATTRIBUTE);
-  if (owner === ISSUE_STICKER_RUNTIME_OWNER.extension || owner === ISSUE_STICKER_RUNTIME_OWNER.sdk) {
-    return owner;
-  }
-  return null;
-}
-function markIssueStickerRuntimeHost(element, owner) {
-  element.setAttribute(ISSUE_STICKER_RUNTIME_OWNER_ATTRIBUTE, owner);
-}
-function createRuntimeHostElement(owner, doc) {
-  const targetDocument = resolveDocument();
-  if (!targetDocument) {
-    throw new Error("createRuntimeHostElement: document 를 찾을 수 없습니다.");
-  }
-  const hostElement = targetDocument.createElement("div");
-  hostElement.id = ISSUE_STICKER_HOST_ELEMENT_ID;
-  markIssueStickerRuntimeHost(hostElement, owner);
-  hostElement.style.all = "initial";
-  hostElement.style.position = "fixed";
-  hostElement.style.top = "0";
-  hostElement.style.left = "0";
-  hostElement.style.width = "0";
-  hostElement.style.height = "0";
-  hostElement.style.overflow = "visible";
-  hostElement.style.background = "transparent";
-  hostElement.style.pointerEvents = "none";
-  hostElement.style.zIndex = String(OVERLAY_LAYER_INDEX.runtimeHost);
-  hostElement.style.display = "block";
-  hostElement.style.isolation = "isolate";
-  return hostElement;
-}
-function isEditableTarget(target) {
-  if (!(target instanceof HTMLElement)) return false;
-  return target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable === true;
-}
-function attachHostTypingGuard(shadowRoot) {
-  const handleKeyDown = (event) => {
-    const keyboardEvent = event;
-    if (keyboardEvent.ctrlKey || keyboardEvent.metaKey || keyboardEvent.altKey) return;
-    if (keyboardEvent.key === "Escape") return;
-    if (!isEditableTarget(keyboardEvent.composedPath()[0])) return;
-    keyboardEvent.stopPropagation();
-  };
-  shadowRoot.addEventListener("keydown", handleKeyDown);
-  return () => shadowRoot.removeEventListener("keydown", handleKeyDown);
-}
-const RUNTIME_OWNER_MARKER_KEY = "__issueStickerRuntimeOwner";
-function markerHost() {
-  return typeof window === "undefined" ? null : window;
-}
-function getClaimedIssueStickerRuntimeOwner() {
-  var _a;
-  return ((_a = markerHost()) == null ? void 0 : _a[RUNTIME_OWNER_MARKER_KEY]) ?? null;
-}
-function isIssueStickerExtensionRuntimeActive(doc) {
-  if (getClaimedIssueStickerRuntimeOwner() === ISSUE_STICKER_RUNTIME_OWNER.extension) {
-    return true;
-  }
-  return getIssueStickerRuntimeOwner(getIssueStickerRuntimeHost()) === ISSUE_STICKER_RUNTIME_OWNER.extension;
-}
 const DEFAULT_MAX_DURATION_MS = 12e4;
 const MIME_TYPE_CANDIDATES = ["video/webm;codecs=vp9", "video/webm"];
 function createInitialSnapshot$1() {
@@ -3837,13 +3762,18 @@ const RESOURCE_REQUEST_TYPES = /* @__PURE__ */ new Set([
   "csp_report",
   "resource"
 ]);
+const EXCLUDED_REQUEST_TYPES = /* @__PURE__ */ new Set(["font"]);
+function isExcludedRequestType(type) {
+  return EXCLUDED_REQUEST_TYPES.has((type ?? "").toLowerCase());
+}
 function isAppRequest(log) {
   if (log.detailLevel === "timing-only") return false;
   return !RESOURCE_REQUEST_TYPES.has((log.type ?? "").toLowerCase());
 }
 function selectNetworkLogsForSubmit(logs) {
-  const detailed = logs.filter(isAppRequest);
-  const timing = logs.filter((log) => !isAppRequest(log));
+  const candidates = logs.filter((log) => !isExcludedRequestType(log.type));
+  const detailed = candidates.filter(isAppRequest);
+  const timing = candidates.filter((log) => !isAppRequest(log));
   const keptDetailed = detailed.slice(-NETWORK_LOG_SUBMIT_LIMIT);
   const timingQuota = Math.min(
     NETWORK_LOG_TIMING_SUBMIT_CAP,
@@ -3944,15 +3874,59 @@ class ConsoleCollector {
     this.logs = [];
     this.originals = {};
     this.running = false;
+    this.seenErrors = /* @__PURE__ */ new WeakSet();
+    this.handleWindowError = (event) => {
+      if (this.markSeen(event.error)) return;
+      const detail = event.error != null ? serializeArgs([event.error]) : event.message;
+      this.addErrorLog(`Uncaught ${detail}`, event.error, {
+        lineNumber: event.lineno || void 0,
+        columnNumber: event.colno || void 0
+      });
+    };
+    this.handleUnhandledRejection = (event) => {
+      if (this.markSeen(event.reason)) return;
+      this.addErrorLog(`Unhandled promise rejection: ${serializeArgs([event.reason])}`, event.reason);
+    };
+    this.wrappers = {};
     this.onChange = (options == null ? void 0 : options.onChange) ?? null;
   }
+  /** 처음 보는 값이면 표시하고 false. 이미 본 오류 객체면 true. */
+  markSeen(value) {
+    if (typeof value !== "object" || value === null) return false;
+    if (this.seenErrors.has(value)) return true;
+    this.seenErrors.add(value);
+    return false;
+  }
+  addErrorLog(message2, error, position) {
+    this.addLog({
+      type: "error",
+      message: redactSensitiveText(message2),
+      timestamp: Date.now(),
+      url: getCurrentPageUrl() || void 0,
+      ...position,
+      stackTrace: redactSensitiveText(error instanceof Error ? error.stack : void 0)
+    });
+  }
   start() {
     if (this.running) return;
     this.running = true;
+    if (typeof window !== "undefined") {
+      window.addEventListener("error", this.handleWindowError);
+      window.addEventListener("unhandledrejection", this.handleUnhandledRejection);
+    }
     for (const method of CONSOLE_METHODS) {
-      this.originals[method] = console[method];
-      console[method] = (...args) => {
-        var _a;
+      const original = console[method];
+      this.originals[method] = original;
+      const wrapper = (...args) => {
+        if (this.wrappers[method] !== wrapper) {
+          original.apply(console, args);
+          return;
+        }
+        const duplicate = args.some((arg) => arg instanceof Error && this.markSeen(arg));
+        if (duplicate) {
+          original.apply(console, args);
+          return;
+        }
         this.addLog({
           type: methodToLogType(method),
           message: serializeArgs(args),
@@ -3960,19 +3934,26 @@ class ConsoleCollector {
           url: getCurrentPageUrl() || void 0,
           stackTrace: redactSensitiveText(captureConsoleStackTrace(args))
         });
-        (_a = this.originals[method]) == null ? void 0 : _a.apply(console, args);
+        original.apply(console, args);
       };
+      this.wrappers[method] = wrapper;
+      console[method] = wrapper;
     }
   }
   stop() {
     if (!this.running) return;
     this.running = false;
+    if (typeof window !== "undefined") {
+      window.removeEventListener("error", this.handleWindowError);
+      window.removeEventListener("unhandledrejection", this.handleUnhandledRejection);
+    }
     for (const method of CONSOLE_METHODS) {
-      if (this.originals[method]) {
+      if (this.originals[method] && console[method] === this.wrappers[method]) {
         console[method] = this.originals[method];
       }
     }
     this.originals = {};
+    this.wrappers = {};
   }
   /** 리로드 이전 로그를 버퍼 앞에 되돌린다. */
   restore(logs) {
@@ -3994,6 +3975,7 @@ class ConsoleCollector {
   }
   clear() {
     this.logs = [];
+    this.seenErrors = /* @__PURE__ */ new WeakSet();
   }
   addLog(log) {
     var _a;
@@ -12805,7 +12787,7 @@ const DEFAULT_LABELS = {
   close: "가이드 닫기",
   skip: "건너뛰기",
   skipConfirmTitle: "가이드를 건너뛸까요?",
-  // 표면마다 진입점이 다르다(admin=헤더 아이콘, extension=더보기 메뉴, sdk=FAB 메뉴).
+  // 채널마다 진입점이 다르다(admin=헤더 아이콘, extension=더보기 메뉴, sdk=FAB 메뉴).
   // 위치를 특정하면 어느 한쪽에서는 틀린 안내가 되므로 라벨만 가리킨다.
   skipConfirmBody: "'가이드 다시 보기'를 클릭하면 언제든 다시 열 수 있습니다.",
   skipConfirmCancel: "계속 보기",
@@ -12817,8 +12799,9 @@ const DEFAULT_LABELS = {
 };
 const MASK_PADDING = 6;
 const CUTOUT_RADIUS = 12;
-const POPOVER_WIDTH = 336;
+const POPOVER_WIDTH = 360;
 const POPOVER_FALLBACK_HEIGHT = 190;
+const DEFAULT_POPOVER_SIZE = { width: POPOVER_WIDTH, height: POPOVER_FALLBACK_HEIGHT };
 const POPOVER_GAP = 12;
 function clamp(value, min2, max2) {
   return Math.min(Math.max(value, min2), max2);
@@ -12884,12 +12867,14 @@ function areRectsEqual(previous, next) {
   if (!previous || !next) return previous === next;
   return Math.abs(previous.top - next.top) < 0.5 && Math.abs(previous.right - next.right) < 0.5 && Math.abs(previous.bottom - next.bottom) < 0.5 && Math.abs(previous.left - next.left) < 0.5 && Math.abs(previous.width - next.width) < 0.5 && Math.abs(previous.height - next.height) < 0.5;
 }
-function getPopoverCoordinates(position, targetRect) {
+function getPopoverCoordinates(position, targetRect, size = {
+  width: POPOVER_WIDTH,
+  height: POPOVER_FALLBACK_HEIGHT
+}) {
   if (Array.isArray(position)) return position;
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;
-  const width = POPOVER_WIDTH;
-  const height = POPOVER_FALLBACK_HEIGHT;
+  const { width, height } = size;
   const maxX = Math.max(POPOVER_GAP, viewportWidth - width - POPOVER_GAP);
   const maxY = Math.max(POPOVER_GAP, viewportHeight - height - POPOVER_GAP);
   const xOnTarget = targetRect.left + targetRect.width / 2 - width / 2;
@@ -12923,6 +12908,49 @@ function getPopoverCoordinates(position, targetRect) {
       ];
   }
 }
+function rectsOverlap(a2, b) {
+  return a2.left < b.right && a2.right > b.left && a2.top < b.bottom && a2.bottom > b.top;
+}
+function overlapArea(a2, b) {
+  const w = Math.min(a2.right, b.right) - Math.max(a2.left, b.left);
+  const h = Math.min(a2.bottom, b.bottom) - Math.max(a2.top, b.top);
+  return w > 0 && h > 0 ? w * h : 0;
+}
+const SIDE_ORDER = ["bottom", "top", "right", "left"];
+const OPPOSITE = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left"
+};
+function resolvePopoverPlacement(position, targetRect, size, avoidRects = []) {
+  if (Array.isArray(position)) return { left: position[0], top: position[1], side: null };
+  if (position === "center") {
+    const [left, top] = getPopoverCoordinates(position, targetRect, size);
+    return { left, top, side: null };
+  }
+  const blockers = [targetRect, ...avoidRects];
+  const requested = position ?? "bottom";
+  const candidates = [requested, OPPOSITE[requested], ...SIDE_ORDER];
+  let best = null;
+  for (const candidate of candidates) {
+    const [left, top] = getPopoverCoordinates(candidate, targetRect, size);
+    const rect = {
+      left,
+      top,
+      right: left + size.width,
+      bottom: top + size.height,
+      width: size.width,
+      height: size.height
+    };
+    const area = blockers.reduce((sum, blocker) => sum + overlapArea(rect, blocker), 0);
+    const placement = { left, top, side: candidate };
+    if (!blockers.some((blocker) => rectsOverlap(rect, blocker))) return placement;
+    if (!best || area < best.area) best = { placement, area };
+  }
+  const fallback = getPopoverCoordinates(requested, targetRect, size);
+  return (best == null ? void 0 : best.placement) ?? { left: fallback[0], top: fallback[1], side: requested };
+}
 function getViewportRect() {
   return {
     top: 0,
@@ -12933,6 +12961,9 @@ function getViewportRect() {
     height: window.innerHeight
   };
 }
+const TAP_INSET = 8;
+const TAP_RIPPLE_SIZE = 44;
+const LINK_BUTTON_CLASS = "inline-flex h-[30px] items-center justify-center rounded-sm text-xs font-semibold text-text-tertiary underline-offset-4 transition-colors hover:text-text-primary hover:underline focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none disabled:opacity-50";
 function shouldRenderNextButton(step) {
   if (step.advanceOnTargetClick) return false;
   if (step.advanceOn && !step.allowManualAdvance) return false;
@@ -12950,18 +12981,67 @@ function OnboardingStyleTag() {
           transition: opacity ${POPOVER_FADE_MS}ms ease-out;
         }
 
+        @keyframes issue-sticker-onboarding-tap {
+          0%,
+          55%,
+          100% {
+            transform: translate(0, 0);
+          }
+          30% {
+            transform: translate(-5px, -5px);
+          }
+        }
+
+        @keyframes issue-sticker-onboarding-ripple {
+          0% {
+            transform: translate(-50%, -50%) scale(0.3);
+            opacity: 0.5;
+          }
+          55%,
+          100% {
+            transform: translate(-50%, -50%) scale(1.7);
+            opacity: 0;
+          }
+        }
+
+        .issue-sticker-onboarding-tap {
+          animation: issue-sticker-onboarding-tap 1.6s ease-in-out infinite;
+        }
+
+        .issue-sticker-onboarding-tap-ripple {
+          animation: issue-sticker-onboarding-ripple 1.6s ease-out infinite;
+        }
+
+        @keyframes issue-sticker-onboarding-focus {
+          from {
+            transform: scale(1.05);
+            opacity: 0;
+          }
+          to {
+            transform: scale(1);
+            opacity: 1;
+          }
+        }
+
+        .issue-sticker-onboarding-highlight {
+          animation: issue-sticker-onboarding-focus 220ms ease-out;
+        }
+
         @media (prefers-reduced-motion: reduce) {
           .issue-sticker-onboarding-popover {
             transition-duration: 1ms !important;
           }
 
-          .issue-sticker-onboarding-highlight {
+          .issue-sticker-onboarding-highlight,
+          .issue-sticker-onboarding-tap,
+          .issue-sticker-onboarding-tap-ripple {
             animation: none !important;
           }
         }
       ` });
 }
 function OnboardingPopoverContent({
+  allowSkip,
   step,
   clickHint,
   labels,
@@ -13026,26 +13106,53 @@ function OnboardingPopoverContent({
       }
     );
   }
+  const hasNextButton = shouldRenderNextButton(step);
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold leading-5 text-text-primary", children: step.title }),
-    /* @__PURE__ */ jsx("p", { className: "mt-2 whitespace-pre-line text-sm leading-5 text-text-secondary", children: step.body }),
-    clickHint ? /* @__PURE__ */ jsxs("p", { className: "mt-2 flex items-center gap-1.5 text-xs font-semibold leading-5 text-brand", children: [
-      /* @__PURE__ */ jsx(MousePointerClick, { "aria-hidden": "true", className: "h-3.5 w-3.5 shrink-0" }),
-      clickHint
-    ] }) : null,
-    /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsx(
-        "button",
+    /* @__PURE__ */ jsx("p", { className: "mt-2 whitespace-pre-line text-sm leading-[1.55] text-text-secondary", children: step.body }),
+    step.bodyExtra ? /* @__PURE__ */ jsx("div", { className: "mt-3", children: step.bodyExtra }) : null,
+    clickHint ? (
+      /* 진행 버튼이 없는 단계에서는 이 줄이 유일한 다음 행동이다. 그래서 버튼이 있던
+       * 자리만큼의 무게를 준다 — 작은 글줄로 두면 사용자가 못 보고 다른 버튼을 누른다. */
+      /* @__PURE__ */ jsxs(
+        "p",
         {
-          type: "button",
-          onClick: onRequestSkip,
-          disabled: !isVisible,
-          className: "inline-flex h-[30px] items-center justify-center rounded-sm text-xs font-semibold text-text-tertiary underline-offset-4 transition-colors hover:text-text-primary hover:underline focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none disabled:opacity-50",
-          children: labels.skip
+          className: cn(
+            "mt-3 flex items-center gap-1.5 font-semibold text-brand",
+            hasNextButton ? "text-xs leading-5" : "rounded-md border border-brand/40 bg-brand/10 px-3 py-2 text-sm leading-5"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(MousePointerClick, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }),
+            clickHint
+          ]
         }
-      ),
+      )
+    ) : null,
+    /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        allowSkip ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRequestSkip,
+            disabled: !isVisible,
+            className: LINK_BUTTON_CLASS,
+            children: labels.skip
+          }
+        ) : null,
+        canGoPrevious && !hasNextButton ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onPrevious,
+            disabled: !isVisible || isSkipConfirmOpen,
+            className: LINK_BUTTON_CLASS,
+            children: labels.previous
+          }
+        ) : null
+      ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        canGoPrevious ? /* @__PURE__ */ jsx(
+        canGoPrevious && hasNextButton ? /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -13055,7 +13162,7 @@ function OnboardingPopoverContent({
             children: labels.previous
           }
         ) : null,
-        shouldRenderNextButton(step) ? /* @__PURE__ */ jsx(
+        hasNextButton ? /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -13073,6 +13180,9 @@ function OnboardingOverlay({
   step,
   targetRect,
   targetRadius,
+  avoidRects,
+  elevateHighlight,
+  allowSkip = true,
   className,
   labels,
   isPopoverVisible,
@@ -13083,6 +13193,7 @@ function OnboardingOverlay({
   onPrevious
 }) {
   const maskId = React.useId().replace(/:/g, "");
+  const renderHighlight = (node) => elevateHighlight && typeof document !== "undefined" ? ReactDOM.createPortal(node, document.body) : node;
   const [isSkipConfirmOpen, setIsSkipConfirmOpen] = React.useState(false);
   const cutoutRect = targetRect ? padRect(targetRect, MASK_PADDING) : null;
   const cutoutRadius = cutoutRect ? Math.min(
@@ -13090,12 +13201,35 @@ function OnboardingOverlay({
     cutoutRect.width / 2,
     cutoutRect.height / 2
   ) : 0;
-  const [popoverLeft, popoverTop] = getPopoverCoordinates(
+  const popoverRef = React.useRef(null);
+  const [popoverSize, setPopoverSize] = React.useState(
+    null
+  );
+  React.useLayoutEffect(() => {
+    const element = popoverRef.current;
+    if (!element) return void 0;
+    const measure = () => {
+      const rect = element.getBoundingClientRect();
+      setPopoverSize(
+        (current) => current && Math.abs(current.height - rect.height) < 0.5 && Math.abs(current.width - rect.width) < 0.5 ? current : { width: rect.width, height: rect.height }
+      );
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [step.id, step.body, isSkipConfirmOpen]);
+  const effectiveSize = popoverSize && popoverSize.width > 0 && popoverSize.height > 0 ? popoverSize : DEFAULT_POPOVER_SIZE;
+  const placement = resolvePopoverPlacement(
     step.position ?? (cutoutRect ? "bottom" : "center"),
-    cutoutRect ?? getViewportRect()
+    cutoutRect ?? getViewportRect(),
+    effectiveSize,
+    cutoutRect ? avoidRects ?? [] : []
   );
+  const { left: popoverLeft, top: popoverTop } = placement;
   const shouldCenterPopover = !cutoutRect && (step.position ?? "center") === "center";
-  const maskColor = "rgba(8, 13, 18, 0.62)";
+  const maskColor = isTargetInteractionStep(step) ? "rgba(8, 13, 18, 0.74)" : "rgba(8, 13, 18, 0.62)";
   const isPassthrough = !!step.advanceOn;
   const isTargetInteraction = isTargetInteractionStep(step);
   const clickHint = isTargetInteraction ? step.clickHint ?? labels.clickHint : null;
@@ -13186,58 +13320,101 @@ function OnboardingOverlay({
             }
           }
         ) : null,
-        cutoutRect ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            "aria-hidden": "true",
-            "data-testid": "onboarding-cutout-outline",
-            className: cn(
-              "fixed",
-              isTargetInteraction ? "issue-sticker-onboarding-highlight animate-pulse-ring border-2 border-brand" : "border border-white/90"
-            ),
-            style: {
-              left: cutoutRect.left,
-              top: cutoutRect.top,
-              width: cutoutRect.width,
-              height: cutoutRect.height,
-              borderRadius: cutoutRadius,
-              pointerEvents: "none"
+        cutoutRect ? renderHighlight(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              "data-testid": "onboarding-cutout-outline",
+              className: cn(
+                "issue-sticker-onboarding-highlight fixed",
+                isTargetInteraction ? "border-2 border-brand" : "border border-white/90"
+              ),
+              style: {
+                left: cutoutRect.left,
+                top: cutoutRect.top,
+                width: cutoutRect.width,
+                height: cutoutRect.height,
+                borderRadius: cutoutRadius,
+                pointerEvents: "none",
+                zIndex: elevateHighlight ? OVERLAY_LAYER_INDEX.runtimeHost : void 0
+              }
+            },
+            step.id
+          )
+        ) : null,
+        cutoutRect && isTargetInteraction ? renderHighlight(
+          /* 클릭하는 커서. 테두리만으로는 "봐야 할 곳"까지만 전달되고 "클릭하라"가
+           * 전달되지 않는다. 손 모양 반복 동작이 그 자리를 맡는다. */
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "aria-hidden": "true",
+              "data-testid": "onboarding-cutout-cursor",
+              className: "issue-sticker-onboarding-tap fixed",
+              style: {
+                left: cutoutRect.right - TAP_INSET,
+                top: cutoutRect.bottom - TAP_INSET,
+                pointerEvents: "none",
+                zIndex: elevateHighlight ? OVERLAY_LAYER_INDEX.runtimeHost : void 0
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "issue-sticker-onboarding-tap-ripple absolute rounded-full bg-brand",
+                    style: { left: 0, top: 0, width: TAP_RIPPLE_SIZE, height: TAP_RIPPLE_SIZE }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MousePointer2,
+                  {
+                    className: "relative h-8 w-8",
+                    style: { fill: "#ffffff", stroke: "rgba(12, 18, 15, 0.7)" },
+                    strokeWidth: 1.4
+                  }
+                )
+              ]
             }
-          }
+          )
         ) : null,
         isSkipConfirmOpen ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "fixed inset-0 pointer-events-auto" }) : null,
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            role: "dialog",
-            "aria-modal": "false",
-            ...{ [ONBOARDING_POPOVER_DATA_ATTR]: "floating" },
-            className: "issue-sticker-onboarding-popover fixed w-[21rem] max-w-[calc(100vw-24px)] rounded-xl border border-line-subtle bg-surface-0 p-[18px] text-text-primary shadow-lg pointer-events-auto",
-            style: {
-              left: shouldCenterPopover ? "50%" : popoverLeft,
-              top: shouldCenterPopover ? "50%" : popoverTop,
-              opacity: isPopoverVisible ? 1 : 0,
-              transform: shouldCenterPopover ? "translate(-50%, -50%)" : void 0,
-              zIndex: OVERLAY_LAYER_INDEX.tourPopover
-            },
-            children: /* @__PURE__ */ jsx(
-              OnboardingPopoverContent,
-              {
-                step,
-                clickHint,
-                labels,
-                canGoPrevious,
-                isLast,
-                isVisible: isPopoverVisible,
-                isSkipConfirmOpen,
-                onRequestSkip: () => setIsSkipConfirmOpen(true),
-                onCancelSkip: () => setIsSkipConfirmOpen(false),
-                onConfirmSkip: onSkip,
-                onNext,
-                onPrevious
-              }
-            )
-          }
+        renderHighlight(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: popoverRef,
+              role: "dialog",
+              "aria-modal": "false",
+              ...{ [ONBOARDING_POPOVER_DATA_ATTR]: "floating" },
+              className: "issue-sticker-onboarding-popover fixed w-[22.5rem] max-w-[calc(100vw-24px)] break-keep [overflow-wrap:anywhere] rounded-xl border border-line-subtle bg-surface-0 p-[18px] text-text-primary shadow-lg pointer-events-auto",
+              style: {
+                left: shouldCenterPopover ? "50%" : popoverLeft,
+                top: shouldCenterPopover ? "50%" : popoverTop,
+                opacity: isPopoverVisible ? 1 : 0,
+                transform: shouldCenterPopover ? "translate(-50%, -50%)" : void 0,
+                zIndex: elevateHighlight ? OVERLAY_LAYER_INDEX.runtimeHost : OVERLAY_LAYER_INDEX.tourPopover
+              },
+              children: /* @__PURE__ */ jsx(
+                OnboardingPopoverContent,
+                {
+                  allowSkip,
+                  step,
+                  clickHint,
+                  labels,
+                  canGoPrevious,
+                  isLast,
+                  isVisible: isPopoverVisible,
+                  isSkipConfirmOpen,
+                  onRequestSkip: () => setIsSkipConfirmOpen(true),
+                  onCancelSkip: () => setIsSkipConfirmOpen(false),
+                  onConfirmSkip: onSkip,
+                  onNext,
+                  onPrevious
+                }
+              )
+            }
+          )
         )
       ]
     }
@@ -13330,7 +13507,9 @@ function OnboardingProvider({
   className,
   labels: labelOverrides,
   storage: storageOverride,
-  suppressed = false
+  suppressed = false,
+  elevateHighlight = false,
+  allowSkip = true
 }) {
   const labels = React.useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
   const storage = React.useMemo(
@@ -13612,6 +13791,7 @@ function OnboardingProvider({
   const allTargetsResolved = activeTargetIds.length > 0 && resolvedTargetRects.every((rect) => rect !== null);
   const targetRect = isOpen && isActiveRoute && allTargetsResolved ? unionRect(resolvedTargetRects.filter((r2) => r2 !== null)) : null;
   const targetRadius = activeTargetIds.length === 1 ? getElementRadius(targetMapRef.current.get(activeTargetIds[0]) ?? null) : null;
+  const avoidRects = ((activeStep == null ? void 0 : activeStep.avoidTargetIds) ?? []).map((id) => getElementRect(targetMapRef.current.get(id) ?? null)).filter((rect) => rect !== null);
   const shouldRenderOverlay = isOpen && activeStep && isActiveRoute && !suppressed && !activeStep.silent && (!stepHasTarget || targetRect);
   const isTargetReady = !stepHasTarget || targetRect !== null;
   React.useEffect(() => {
@@ -13663,6 +13843,9 @@ function OnboardingProvider({
         step: activeStep,
         targetRect,
         targetRadius,
+        avoidRects,
+        elevateHighlight,
+        allowSkip,
         className,
         labels,
         isPopoverVisible,
@@ -13890,66 +14073,59 @@ function buildExternalUserPayload(user) {
   };
 }
 export {
-  X as $,
-  trimLogBackupPayload as A,
-  createSafeLogBackup as B,
+  DatePicker as $,
+  createSafeLogBackup as A,
+  getLogBackupSessionId as B,
   ConsoleCollector as C,
-  getLogBackupSessionId as D,
-  createIndexedDbLogBackup as E,
-  PopoverTrigger as F,
-  Input as G,
-  PopoverContent as H,
+  createIndexedDbLogBackup as D,
+  PopoverTrigger as E,
+  Input as F,
+  PopoverContent as G,
+  Select$1 as H,
   ISSUE_STICKER_INTERNAL_LOG_PREFIX as I,
-  Select$1 as J,
-  SelectTrigger as K,
+  SelectTrigger as J,
+  SelectValue as K,
   Label as L,
-  SelectValue as M,
+  SelectContent as M,
   NetworkCollector as N,
-  SelectContent as O,
+  SelectItem as O,
   Popover as P,
-  SelectItem as Q,
-  getJiraMetadata as R,
+  getJiraMetadata as Q,
+  buildJiraIssueFields as R,
   ScreenRecordingController as S,
-  buildJiraIssueFields as T,
-  Button$1 as U,
-  Root2 as V,
-  Trigger as W,
-  ChevronDown as X,
-  Portal as Y,
-  Content2 as Z,
-  Check as _,
+  Button$1 as T,
+  Root2 as U,
+  Trigger as V,
+  ChevronDown as W,
+  Portal as X,
+  Content2 as Y,
+  Check as Z,
+  X as _,
   uploadSignedMediaWithApi as a,
-  DatePicker as a0,
-  getNotionPageMetadata as a1,
-  buildNotionFieldViews as a2,
-  DirectUploadError as a3,
-  toast as a4,
-  getSnapshot as a5,
-  subscribe as a6,
-  getRegisteredUploadId as a7,
-  ChevronRight as a8,
-  ReactRemoveScroll as a9,
-  hideOthers as aa,
-  useFocusGuards as ab,
-  FocusScope as ac,
-  getExposedJiraFields as ad,
-  isJiraFieldExposed as ae,
-  getPrimaryJiraMapping as af,
-  createCollection as ag,
-  useDirection as ah,
-  getPrimaryNotionMapping as ai,
-  buttonVariants as aj,
-  findElementBySelector as ak,
-  findElementByXPath as al,
-  OnboardingProvider as am,
-  useOnboardingTarget as an,
-  useOnboardingFlow as ao,
-  ISSUE_STICKER_HOST_ELEMENT_ID as ap,
-  getIssueStickerRuntimeOwner as aq,
-  ISSUE_STICKER_RUNTIME_OWNER as ar,
-  createRuntimeHostElement as as,
-  attachHostTypingGuard as at,
-  ISSUE_STICKER_EXTENSION_RUNTIME_READY_EVENT as au,
+  getNotionPageMetadata as a0,
+  buildNotionFieldViews as a1,
+  DirectUploadError as a2,
+  toast as a3,
+  getSnapshot as a4,
+  subscribe as a5,
+  getRegisteredUploadId as a6,
+  ChevronRight as a7,
+  ReactRemoveScroll as a8,
+  hideOthers as a9,
+  useFocusGuards as aa,
+  FocusScope as ab,
+  getExposedJiraFields as ac,
+  isJiraFieldExposed as ad,
+  getPrimaryJiraMapping as ae,
+  createCollection as af,
+  useDirection as ag,
+  getPrimaryNotionMapping as ah,
+  buttonVariants as ai,
+  findElementBySelector as aj,
+  findElementByXPath as ak,
+  OnboardingProvider as al,
+  useOnboardingTarget as am,
+  useOnboardingFlow as an,
   normalizeJiraFieldId as b,
   captureWithModernScreenshot as c,
   directUploadToSignedUrl as d,
@@ -13974,5 +14150,5 @@ export {
   getCurrentPageUrl as w,
   SessionReplayCaptureController as x,
   preloadModernScreenshot as y,
-  isIssueStickerExtensionRuntimeActive as z
+  trimLogBackupPayload as z
 };