issue-sticker 0.6.0 → 0.8.0

package/dist/{externalUserPayload-B7zThnol.js → externalUserPayload-k9LSBeMB.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() {
@@ -3949,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),
@@ -3965,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) {
@@ -3999,6 +3975,7 @@ class ConsoleCollector {
   }
   clear() {
     this.logs = [];
+    this.seenErrors = /* @__PURE__ */ new WeakSet();
   }
   addLog(log) {
     var _a;
@@ -4990,6 +4967,182 @@ function buildJiraCreateFields(exposedFields, fieldDefinitions = [], values = {}
     includeReadonly: false
   }).filter((field) => knownFieldIds.has(normalizeJiraFieldId(field.id))).filter((field) => !CREATE_UNSUPPORTED_FIELD_IDS.has(normalizeJiraFieldId(field.id)));
 }
+const JIRA_FILTERABLE_FIELD_IDS = /* @__PURE__ */ new Set([
+  "status",
+  "priority",
+  "assignee",
+  "reporter",
+  "fixVersions",
+  "issuetype",
+  "project_key",
+  "sprint_id",
+  "sprint_name",
+  "epic_link",
+  "story_points"
+]);
+const NOTION_FILTERABLE_FIELD_TYPES = /* @__PURE__ */ new Set(["select", "multi_select", "status", "checkbox"]);
+function getJiraConfig(integration) {
+  if (integration.service_type !== "JIRA") return null;
+  return integration.config ?? null;
+}
+function getNotionConfig(integration) {
+  if (integration.service_type !== "NOTION") return null;
+  return integration.config ?? null;
+}
+function getExposedFields(config) {
+  if (!(config == null ? void 0 : config.exposed_fields)) return [];
+  return normalizeExposedJiraFields(
+    Array.isArray(config.exposed_fields) ? config.exposed_fields : void 0
+  );
+}
+function getLastKnownJiraFields(config) {
+  const fields = config == null ? void 0 : config.last_known_fields;
+  if (!Array.isArray(fields)) return [];
+  return fields.filter(
+    (field) => Boolean(field) && typeof field === "object" && typeof field.id === "string" && typeof field.name === "string"
+  );
+}
+function getSelectedNotionFields(config) {
+  const fields = config == null ? void 0 : config.selected_fields;
+  if (!Array.isArray(fields)) return [];
+  return fields.filter((field) => typeof field === "string");
+}
+function getLastKnownNotionFields(config) {
+  const fields = config == null ? void 0 : config.last_known_fields;
+  if (!Array.isArray(fields)) return [];
+  return fields.filter(
+    (field) => Boolean(field) && typeof field === "object" && typeof field.id === "string" && typeof field.name === "string" && typeof field.type === "string"
+  );
+}
+const OPTION_CUSTOM_FIELD_TYPES = /* @__PURE__ */ new Set(["select", "multi_select"]);
+function getSelectableCustomFieldOptions(field) {
+  var _a;
+  if (!OPTION_CUSTOM_FIELD_TYPES.has(field.field_type)) return [];
+  const rawOptions = (_a = field.field_config) == null ? void 0 : _a.options;
+  if (!Array.isArray(rawOptions)) return [];
+  return rawOptions.filter((option) => typeof option === "string" && option.trim().length > 0).map((option) => ({ label: option, value: option }));
+}
+function getJiraOptionValue(option) {
+  return option.id;
+}
+function getJiraFieldFilterOptions(field) {
+  const options = field.options ?? [];
+  if (!options.length) return [];
+  return options.map((option) => ({
+    label: option.name || option.value || option.id,
+    value: getJiraOptionValue(option)
+  })).filter((option) => option.value.length > 0);
+}
+function getNotionFieldFilterOptions(field) {
+  if (field.type === "checkbox") {
+    return [
+      { label: "체크됨", value: "true" },
+      { label: "체크 안 됨", value: "false" }
+    ];
+  }
+  const options = field.options ?? [];
+  if (!options.length) return [];
+  return options.map((option) => ({
+    label: option.name,
+    value: option.name
+  })).filter((option) => option.value.length > 0);
+}
+function mergeOptions(current, next) {
+  const byValue = new Map(current.map((option) => [option.value, option]));
+  for (const option of next) {
+    if (!byValue.has(option.value)) {
+      byValue.set(option.value, option);
+    }
+  }
+  return Array.from(byValue.values()).sort((a2, b) => a2.label.localeCompare(b.label));
+}
+function upsertFilterGroup(groups, group) {
+  const existing = groups.get(group.id);
+  if (!existing) {
+    groups.set(group.id, {
+      ...group,
+      options: mergeOptions([], group.options)
+    });
+    return;
+  }
+  groups.set(group.id, {
+    ...existing,
+    options: mergeOptions(existing.options, group.options)
+  });
+}
+function appendCustomFieldFilterGroups(groups, customFields) {
+  for (const field of customFields) {
+    const options = getSelectableCustomFieldOptions(field);
+    if (!options.length) continue;
+    upsertFilterGroup(groups, {
+      kind: "custom",
+      id: `custom:${field.id}`,
+      fieldDefinitionId: field.id,
+      label: field.field_name,
+      options
+    });
+  }
+}
+function appendJiraFieldFilterGroups(groups, exposedFieldIds, fields) {
+  for (const field of fields) {
+    const normalizedFieldId = normalizeJiraFieldId(field.id);
+    if (!exposedFieldIds.has(normalizedFieldId) || !JIRA_FILTERABLE_FIELD_IDS.has(normalizedFieldId)) {
+      continue;
+    }
+    const options = getJiraFieldFilterOptions(field);
+    if (!options.length) continue;
+    upsertFilterGroup(groups, {
+      kind: "jira",
+      id: `jira:${normalizedFieldId}`,
+      fieldName: normalizedFieldId,
+      label: field.name,
+      options
+    });
+  }
+}
+function appendNotionFieldFilterGroups(groups, selectedFields, fields) {
+  for (const field of fields) {
+    if (!selectedFields.has(field.id) && !selectedFields.has(field.name)) continue;
+    if (!NOTION_FILTERABLE_FIELD_TYPES.has(field.type)) continue;
+    const options = getNotionFieldFilterOptions(field);
+    if (!options.length) continue;
+    upsertFilterGroup(groups, {
+      kind: "notion",
+      id: `notion:${field.id}`,
+      fieldName: field.name,
+      label: field.name,
+      options
+    });
+  }
+}
+function composeIssueFilterGroups(integrations, customFields) {
+  const groups = /* @__PURE__ */ new Map();
+  const jiraIntegration = integrations.find((integration) => {
+    const config = getJiraConfig(integration);
+    return integration.is_active !== false && config;
+  });
+  appendCustomFieldFilterGroups(groups, customFields);
+  const jiraConfig = jiraIntegration ? getJiraConfig(jiraIntegration) : null;
+  const configExposedFields = getExposedFields(jiraConfig);
+  if (configExposedFields.length) {
+    appendJiraFieldFilterGroups(
+      groups,
+      new Set(configExposedFields),
+      getLastKnownJiraFields(jiraConfig)
+    );
+  }
+  for (const integration of integrations) {
+    if (integration.is_active === false) continue;
+    const notionConfig = getNotionConfig(integration);
+    if (!notionConfig) continue;
+    appendNotionFieldFilterGroups(
+      groups,
+      new Set(getSelectedNotionFields(notionConfig)),
+      getLastKnownNotionFields(notionConfig)
+    );
+  }
+  return Array.from(groups.values()).sort((a2, b) => a2.label.localeCompare(b.label));
+}
 const STABLE_ATTR_KEYS = [
   "data-testid",
   "data-test",
@@ -6509,7 +6662,7 @@ var Popover$1 = (props) => {
 };
 Popover$1.displayName = POPOVER_NAME;
 var ANCHOR_NAME = "PopoverAnchor";
-var PopoverAnchor = React.forwardRef(
+var PopoverAnchor$1 = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopePopover, ...anchorProps } = props;
     const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
@@ -6522,7 +6675,7 @@ var PopoverAnchor = React.forwardRef(
     return /* @__PURE__ */ jsx(Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
   }
 );
-PopoverAnchor.displayName = ANCHOR_NAME;
+PopoverAnchor$1.displayName = ANCHOR_NAME;
 var TRIGGER_NAME$1 = "PopoverTrigger";
 var PopoverTrigger$1 = React.forwardRef(
   (props, forwardedRef) => {
@@ -6745,11 +6898,13 @@ function getState(open) {
   return open ? "open" : "closed";
 }
 var Root2 = Popover$1;
+var Anchor2 = PopoverAnchor$1;
 var Trigger = PopoverTrigger$1;
 var Portal = PopoverPortal;
 var Content2 = PopoverContent$1;
 const Popover = Root2;
 const PopoverTrigger = Trigger;
+const PopoverAnchor = Anchor2;
 const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 6, onEscapeKeyDown, ...props }, ref) => {
   const portalContainer = usePortalContainer();
   return /* @__PURE__ */ jsx(Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
@@ -12809,12 +12964,6 @@ const DEFAULT_LABELS = {
   badge: "가이드",
   close: "가이드 닫기",
   skip: "건너뛰기",
-  skipConfirmTitle: "가이드를 건너뛸까요?",
-  // 표면마다 진입점이 다르다(admin=헤더 아이콘, extension=더보기 메뉴, sdk=FAB 메뉴).
-  // 위치를 특정하면 어느 한쪽에서는 틀린 안내가 되므로 라벨만 가리킨다.
-  skipConfirmBody: "'가이드 다시 보기'를 클릭하면 언제든 다시 열 수 있습니다.",
-  skipConfirmCancel: "계속 보기",
-  skipConfirmConfirm: "건너뛰기",
   previous: "이전",
   next: "다음",
   done: "완료",
@@ -12822,8 +12971,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);
@@ -12889,12 +13039,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;
@@ -12928,6 +13080,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,
@@ -12938,6 +13133,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;
@@ -12955,117 +13153,139 @@ 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,
   canGoPrevious,
   isLast,
   isVisible,
-  isSkipConfirmOpen,
-  onRequestSkip,
-  onCancelSkip,
-  onConfirmSkip,
+  onSkip,
   onNext,
   onPrevious
 }) {
-  if (isSkipConfirmOpen) {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        role: "alertdialog",
-        "aria-modal": "false",
-        "aria-labelledby": "issue-sticker-onboarding-skip-title",
-        "aria-describedby": "issue-sticker-onboarding-skip-desc",
-        children: [
-          /* @__PURE__ */ jsx(
-            "h2",
-            {
-              id: "issue-sticker-onboarding-skip-title",
-              className: "text-sm font-semibold leading-5 text-text-primary",
-              children: labels.skipConfirmTitle
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "p",
-            {
-              id: "issue-sticker-onboarding-skip-desc",
-              className: "mt-2 whitespace-pre-line text-sm leading-5 text-text-secondary",
-              children: labels.skipConfirmBody
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-end gap-2", children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: onCancelSkip,
-                disabled: !isVisible,
-                className: "inline-flex h-[30px] items-center justify-center rounded-md border border-line-subtle px-2.5 text-xs font-semibold text-text-secondary transition-colors hover:bg-surface-2 hover:text-text-primary focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none disabled:opacity-50",
-                children: labels.skipConfirmCancel
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: onConfirmSkip,
-                disabled: !isVisible,
-                className: "inline-flex h-[30px] items-center justify-center rounded-md border border-line-subtle px-2.5 text-xs font-semibold text-text-primary transition-colors hover:bg-surface-2 focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none disabled:opacity-50",
-                children: labels.skipConfirmConfirm
-              }
-            )
-          ] })
-        ]
-      }
-    );
-  }
+  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: onSkip,
+            disabled: !isVisible,
+            className: LINK_BUTTON_CLASS,
+            children: labels.skip
+          }
+        ) : null,
+        canGoPrevious && !hasNextButton ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onPrevious,
+            disabled: !isVisible,
+            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",
             onClick: onPrevious,
-            disabled: !isVisible || isSkipConfirmOpen,
+            disabled: !isVisible,
             className: "inline-flex h-[30px] items-center justify-center rounded-md border border-line-subtle px-2.5 text-xs font-semibold text-text-secondary transition-colors hover:bg-surface-2 hover:text-text-primary focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none disabled:opacity-50",
             children: labels.previous
           }
         ) : null,
-        shouldRenderNextButton(step) ? /* @__PURE__ */ jsx(
+        hasNextButton ? /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             onClick: onNext,
-            disabled: !isVisible || isSkipConfirmOpen,
+            disabled: !isVisible,
             className: "inline-flex h-[30px] items-center justify-center rounded-md border border-line-subtle px-2.5 text-xs font-semibold text-text-primary transition-colors hover:bg-surface-2 focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none disabled:opacity-50",
             children: isLast ? labels.done : step.nextLabel ?? labels.next
           }
@@ -13078,6 +13298,9 @@ function OnboardingOverlay({
   step,
   targetRect,
   targetRadius,
+  avoidRects,
+  elevateHighlight,
+  allowSkip = true,
   className,
   labels,
   isPopoverVisible,
@@ -13088,25 +13311,45 @@ function OnboardingOverlay({
   onPrevious
 }) {
   const maskId = React.useId().replace(/:/g, "");
-  const [isSkipConfirmOpen, setIsSkipConfirmOpen] = React.useState(false);
+  const renderHighlight = (node) => elevateHighlight && typeof document !== "undefined" ? ReactDOM.createPortal(node, document.body) : node;
   const cutoutRect = targetRect ? padRect(targetRect, MASK_PADDING) : null;
   const cutoutRadius = cutoutRect ? Math.min(
     targetRadius === null || targetRadius === void 0 ? CUTOUT_RADIUS : targetRadius + MASK_PADDING,
     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]);
+  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;
-  React.useEffect(() => {
-    setIsSkipConfirmOpen(false);
-  }, [step.id]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -13191,58 +13434,97 @@ 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,
+                  onSkip,
+                  onNext,
+                  onPrevious
+                }
+              )
+            }
+          )
         )
       ]
     }
@@ -13335,7 +13617,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(
@@ -13617,6 +13901,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(() => {
@@ -13668,6 +13953,9 @@ function OnboardingProvider({
         step: activeStep,
         targetRect,
         targetRadius,
+        avoidRects,
+        elevateHighlight,
+        allowSkip,
         className,
         labels,
         isPopoverVisible,
@@ -13895,89 +14183,83 @@ function buildExternalUserPayload(user) {
   };
 }
 export {
-  X as $,
-  trimLogBackupPayload as A,
-  createSafeLogBackup as B,
+  getNotionPageMetadata as $,
+  getLogBackupSessionId as A,
+  createIndexedDbLogBackup as B,
   ConsoleCollector as C,
-  getLogBackupSessionId as D,
-  createIndexedDbLogBackup as E,
-  PopoverTrigger as F,
-  Input as G,
-  PopoverContent as H,
+  PopoverTrigger as D,
+  Input as E,
+  PopoverContent as F,
+  Select$1 as G,
+  SelectTrigger as H,
   ISSUE_STICKER_INTERNAL_LOG_PREFIX as I,
-  Select$1 as J,
-  SelectTrigger as K,
+  SelectValue as J,
+  SelectContent as K,
   Label as L,
-  SelectValue as M,
+  SelectItem as M,
   NetworkCollector as N,
-  SelectContent as O,
+  getJiraMetadata as O,
   Popover as P,
-  SelectItem as Q,
-  getJiraMetadata as R,
+  buildJiraIssueFields as Q,
+  Button$1 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 _,
+  Root2 as T,
+  Trigger as U,
+  ChevronDown as V,
+  Portal as W,
+  Content2 as X,
+  Check as Y,
+  X as Z,
+  DatePicker 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,
-  normalizeJiraFieldId as b,
+  buildNotionFieldViews as a0,
+  DirectUploadError as a1,
+  toast as a2,
+  getSnapshot as a3,
+  subscribe as a4,
+  getRegisteredUploadId as a5,
+  ChevronRight as a6,
+  ReactRemoveScroll as a7,
+  hideOthers as a8,
+  useFocusGuards as a9,
+  FocusScope as aa,
+  getExposedJiraFields as ab,
+  isJiraFieldExposed as ac,
+  normalizeExposedJiraFields 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,
+  PopoverAnchor as ao,
+  buildJiraCreateFields as b,
   captureWithModernScreenshot as c,
   directUploadToSignedUrl as d,
-  buildJiraCreateFields as e,
-  buildNotionCreateFields as f,
+  buildNotionCreateFields as e,
+  buildGuestOwnerQuery as f,
   getElementPosition as g,
-  buildGuestOwnerQuery as h,
+  composeIssueFilterGroups as h,
   buildIssueIntegrationsPayload as i,
   devLogger as j,
   filterExcludeServiceRelatedLogs as k,
   filterExcludeServiceRelatedConsoleLogs as l,
   compactNetworkLogsForTransport as m,
-  normalizeExposedJiraFields as n,
-  CONSOLE_LOG_SUBMIT_LIMIT as o,
+  CONSOLE_LOG_SUBMIT_LIMIT as n,
+  buildExternalUserPayload as o,
   pristineFetch as p,
-  buildExternalUserPayload as q,
-  shrinkNetworkLogsToFit as r,
+  shrinkNetworkLogsToFit as q,
+  measureJsonBytes as r,
   selectNetworkLogsForSubmit as s,
-  measureJsonBytes as t,
+  sanitizeString as t,
   uploadScreenshotDataUrls as u,
-  sanitizeString as v,
-  getCurrentPageUrl as w,
-  SessionReplayCaptureController as x,
-  preloadModernScreenshot as y,
-  isIssueStickerExtensionRuntimeActive as z
+  getCurrentPageUrl as v,
+  SessionReplayCaptureController as w,
+  preloadModernScreenshot as x,
+  trimLogBackupPayload as y,
+  createSafeLogBackup as z
 };