issue-sticker 0.8.0 → 0.8.1

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 npm 패키지 `issue-sticker`의 변경 이력입니다. 설치·업그레이드에 영향을 주는 변경만 기록합니다.
 
+## 0.8.1 - 2026-09-15
+
+### 개선
+
+- Chrome에서 화면 녹화를 시작할 때 공유할 화면 선택 창에 지금 보고 있는 탭이 함께 표시되고 탭 목록이 먼저 열립니다. 창·전체 화면도 그대로 선택할 수 있습니다.
+
 ## 0.8.0 - 2026-09-14
 
 ### 추가

package/dist/{externalUserPayload-k9LSBeMB.js → externalUserPayload-D-P1-QaW.js}

@@ -18,10 +18,12 @@ function getDefaultDisplayMedia() {
   if (typeof navigator === "undefined" || !((_a = navigator.mediaDevices) == null ? void 0 : _a.getDisplayMedia)) {
     throw new Error("Screen recording is not supported in this browser.");
   }
-  return navigator.mediaDevices.getDisplayMedia({
-    video: { frameRate: 30 },
-    audio: false
-  });
+  const options = {
+    video: { frameRate: 30, displaySurface: "browser" },
+    audio: false,
+    selfBrowserSurface: "include"
+  };
+  return navigator.mediaDevices.getDisplayMedia(options);
 }
 function createDefaultMediaRecorder(stream, options) {
   if (typeof MediaRecorder === "undefined") {
@@ -13299,6 +13301,7 @@ function OnboardingOverlay({
   targetRect,
   targetRadius,
   avoidRects,
+  affordanceRect,
   elevateHighlight,
   allowSkip = true,
   className,
@@ -13318,6 +13321,23 @@ function OnboardingOverlay({
     cutoutRect.width / 2,
     cutoutRect.height / 2
   ) : 0;
+  const hasAffordanceTarget = !!step.affordanceTargetId;
+  const affordanceCutout = affordanceRect ? padRect(affordanceRect, MASK_PADDING) : null;
+  const affordanceDiameter = affordanceRect ? Math.max(affordanceRect.width, affordanceRect.height) + MASK_PADDING * 2 : 0;
+  const affordanceCircle = affordanceRect ? (() => {
+    const centerX = (affordanceRect.left + affordanceRect.right) / 2;
+    const centerY = (affordanceRect.top + affordanceRect.bottom) / 2;
+    const radius = affordanceDiameter / 2;
+    return {
+      left: centerX - radius,
+      top: centerY - radius,
+      right: centerX + radius,
+      bottom: centerY + radius,
+      width: affordanceDiameter,
+      height: affordanceDiameter
+    };
+  })() : null;
+  const popoverAnchorRect = hasAffordanceTarget && affordanceCutout ? affordanceCutout : cutoutRect;
   const popoverRef = React.useRef(null);
   const [popoverSize, setPopoverSize] = React.useState(
     null
@@ -13339,17 +13359,20 @@ function OnboardingOverlay({
   }, [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(),
+    step.position ?? (popoverAnchorRect ? "bottom" : "center"),
+    popoverAnchorRect ?? getViewportRect(),
     effectiveSize,
-    cutoutRect ? avoidRects ?? [] : []
+    popoverAnchorRect ? avoidRects ?? [] : []
   );
   const { left: popoverLeft, top: popoverTop } = placement;
-  const shouldCenterPopover = !cutoutRect && (step.position ?? "center") === "center";
+  const shouldCenterPopover = !popoverAnchorRect && (step.position ?? "center") === "center";
   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;
+  const isCutoutInteractionStyled = isTargetInteraction && !hasAffordanceTarget;
+  const showAffordanceEmphasis = isTargetInteraction && hasAffordanceTarget && !!affordanceCircle;
+  const ringCursorRect = !isTargetInteraction ? null : hasAffordanceTarget ? affordanceCircle : cutoutRect;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -13442,7 +13465,7 @@ function OnboardingOverlay({
               "data-testid": "onboarding-cutout-outline",
               className: cn(
                 "issue-sticker-onboarding-highlight fixed",
-                isTargetInteraction ? "border-2 border-brand" : "border border-white/90"
+                isCutoutInteractionStyled ? "border-2 border-brand" : "border border-white/90"
               ),
               style: {
                 left: cutoutRect.left,
@@ -13457,7 +13480,31 @@ function OnboardingOverlay({
             step.id
           )
         ) : null,
-        cutoutRect && isTargetInteraction ? renderHighlight(
+        showAffordanceEmphasis && affordanceCircle ? renderHighlight(
+          /* 강조(컷아웃)와 클릭 유도 위치가 분리된 단계의 브랜드 링. 컷아웃 테두리는
+           * 위에서 이미 순수 강조 스타일로 그렸으니, 여기서는 실제로 눌러야 할 요소
+           * 중심에 원을 그린다 — 사각형 컷아웃과 구별돼야 "강조 대상이 아니라 이걸
+           * 누르라"는 뜻이 선다. */
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              "data-testid": "onboarding-affordance-ring",
+              className: "issue-sticker-onboarding-highlight fixed rounded-full border-2 border-brand",
+              style: {
+                left: affordanceCircle.left,
+                top: affordanceCircle.top,
+                width: affordanceCircle.width,
+                height: affordanceCircle.height,
+                borderRadius: 9999,
+                pointerEvents: "none",
+                zIndex: elevateHighlight ? OVERLAY_LAYER_INDEX.runtimeHost : void 0
+              }
+            },
+            `${step.id}-affordance`
+          )
+        ) : null,
+        ringCursorRect ? renderHighlight(
           /* 클릭하는 커서. 테두리만으로는 "봐야 할 곳"까지만 전달되고 "클릭하라"가
            * 전달되지 않는다. 손 모양 반복 동작이 그 자리를 맡는다. */
           /* @__PURE__ */ jsxs(
@@ -13467,8 +13514,8 @@ function OnboardingOverlay({
               "data-testid": "onboarding-cutout-cursor",
               className: "issue-sticker-onboarding-tap fixed",
               style: {
-                left: cutoutRect.right - TAP_INSET,
-                top: cutoutRect.bottom - TAP_INSET,
+                left: ringCursorRect.right - TAP_INSET,
+                top: ringCursorRect.bottom - TAP_INSET,
                 pointerEvents: "none",
                 zIndex: elevateHighlight ? OVERLAY_LAYER_INDEX.runtimeHost : void 0
               },
@@ -13705,18 +13752,24 @@ function OnboardingProvider({
     () => activeTargetIds.map((id) => targetMapRef.current.get(id) ?? null).filter((el) => el !== null),
     [activeTargetIds]
   );
+  const activeAffordanceTargetId = activeStep == null ? void 0 : activeStep.affordanceTargetId;
+  const getObservedElements = React.useCallback(() => {
+    const elements = getActiveTargetElements();
+    const affordanceElement = activeAffordanceTargetId ? targetMapRef.current.get(activeAffordanceTargetId) ?? null : null;
+    return affordanceElement ? [...elements, affordanceElement] : elements;
+  }, [activeAffordanceTargetId, getActiveTargetElements]);
   const scheduleLayoutUpdate = React.useCallback(() => {
     clearLayoutFrame();
     frameRef.current = window.requestAnimationFrame(() => {
       frameRef.current = null;
       const nextRect = unionRect(
-        getActiveTargetElements().map(getElementRect).filter((r2) => r2 !== null)
+        getObservedElements().map(getElementRect).filter((r2) => r2 !== null)
       );
       if (areRectsEqual(lastRectRef.current, nextRect)) return;
       lastRectRef.current = nextRect;
       setLayoutVersion((version2) => version2 + 1);
     });
-  }, [clearLayoutFrame, getActiveTargetElements]);
+  }, [clearLayoutFrame, getObservedElements]);
   const openAtStep = React.useCallback(
     (stepIndex) => {
       var _a;
@@ -13874,7 +13927,7 @@ function OnboardingProvider({
   }, [activeStep, advanceFromTargetClick, goToStep, isActiveRoute, isOpen]);
   React.useEffect(() => {
     if (!isOpen || !isActiveRoute) return;
-    const elements = getActiveTargetElements();
+    const elements = getObservedElements();
     if (elements.length === 0) return;
     scheduleLayoutUpdate();
     window.addEventListener("resize", scheduleLayoutUpdate);
@@ -13889,7 +13942,7 @@ function OnboardingProvider({
     };
   }, [
     clearLayoutFrame,
-    getActiveTargetElements,
+    getObservedElements,
     isActiveRoute,
     isOpen,
     scheduleLayoutUpdate,
@@ -13902,6 +13955,7 @@ function OnboardingProvider({
   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 affordanceRect = (activeStep == null ? void 0 : activeStep.affordanceTargetId) ? getElementRect(targetMapRef.current.get(activeStep.affordanceTargetId) ?? null) : null;
   const shouldRenderOverlay = isOpen && activeStep && isActiveRoute && !suppressed && !activeStep.silent && (!stepHasTarget || targetRect);
   const isTargetReady = !stepHasTarget || targetRect !== null;
   React.useEffect(() => {
@@ -13954,6 +14008,7 @@ function OnboardingProvider({
         targetRect,
         targetRadius,
         avoidRects,
+        affordanceRect,
         elevateHighlight,
         allowSkip,
         className,

package/dist/issue-sticker-headless.js

@@ -1,4 +1,4 @@
-import { u as uploadScreenshotDataUrls, a as uploadSignedMediaWithApi, d as directUploadToSignedUrl, p as pristineFetch, g as getElementPosition, c as captureWithModernScreenshot, b as buildJiraCreateFields, e as buildNotionCreateFields, f as buildGuestOwnerQuery, h as composeIssueFilterGroups, i as buildIssueIntegrationsPayload, j as devLogger, C as ConsoleCollector, N as NetworkCollector, s as selectNetworkLogsForSubmit, k as filterExcludeServiceRelatedLogs, l as filterExcludeServiceRelatedConsoleLogs, m as compactNetworkLogsForTransport, n as CONSOLE_LOG_SUBMIT_LIMIT, o as buildExternalUserPayload, q as shrinkNetworkLogsToFit, r as measureJsonBytes, t as sanitizeString, v as getCurrentPageUrl, S as ScreenRecordingController, w as SessionReplayCaptureController, x as preloadModernScreenshot, I as ISSUE_STICKER_INTERNAL_LOG_PREFIX } from "./externalUserPayload-k9LSBeMB.js";
+import { u as uploadScreenshotDataUrls, a as uploadSignedMediaWithApi, d as directUploadToSignedUrl, p as pristineFetch, g as getElementPosition, c as captureWithModernScreenshot, b as buildJiraCreateFields, e as buildNotionCreateFields, f as buildGuestOwnerQuery, h as composeIssueFilterGroups, i as buildIssueIntegrationsPayload, j as devLogger, C as ConsoleCollector, N as NetworkCollector, s as selectNetworkLogsForSubmit, k as filterExcludeServiceRelatedLogs, l as filterExcludeServiceRelatedConsoleLogs, m as compactNetworkLogsForTransport, n as CONSOLE_LOG_SUBMIT_LIMIT, o as buildExternalUserPayload, q as shrinkNetworkLogsToFit, r as measureJsonBytes, t as sanitizeString, v as getCurrentPageUrl, S as ScreenRecordingController, w as SessionReplayCaptureController, x as preloadModernScreenshot, I as ISSUE_STICKER_INTERNAL_LOG_PREFIX } from "./externalUserPayload-D-P1-QaW.js";
 import "react/jsx-runtime";
 import "react";
 import "./mouse-pointer-2-BR00y3ir.js";

package/dist/issue-sticker-react.js

@@ -16,7 +16,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
 });
 var _focused, _cleanup, _setup, _b, _provider, _providerCalled, _c, _online, _cleanup2, _setup2, _d, _gcTimeout, _e, _queryType, _initialState, _revertState, _cache, _client, _retryer, _defaultOptions, _abortSignalConsumed, _Query_instances, isInitialPausedFetch_fn, dispatch_fn, _f, _client2, _currentQuery, _currentQueryInitialState, _currentResult, _currentResultState, _currentResultOptions, _currentThenable, _selectError, _selectFn, _selectResult, _lastQueryWithDefinedData, _staleTimeoutId, _refetchIntervalId, _currentRefetchInterval, _trackedProps, _QueryObserver_instances, executeFetch_fn, updateStaleTimeout_fn, computeRefetchInterval_fn, updateRefetchInterval_fn, updateTimers_fn, clearStaleTimeout_fn, clearRefetchInterval_fn, updateQuery_fn, notify_fn, _g, _client3, _observers, _mutationCache, _retryer2, _Mutation_instances, dispatch_fn2, _h, _mutations, _scopes, _mutationId, _i, _client4, _currentResult2, _currentMutation, _mutateOptions, _MutationObserver_instances, updateResult_fn, notify_fn2, _j, _queries, _k, _queryCache, _mutationCache2, _defaultOptions2, _queryDefaults, _mutationDefaults, _mountCount, _unsubscribeFocus, _unsubscribeOnline, _l, _m;
 import { O as OVERLAY_LAYER_INDEX, c as createLucideIcon$1, b as usePortalContainer, a as cn$1, d as OVERLAY_LAYER, s as stopEscapePropagation, P as Presence, e as Primitive, f as composeEventHandlers, g as useDismissableLayerSurface, h as useComposedRefs$1, i as Portal$1, j as createContextScope, k as createSlot, D as DismissableLayer, l as useControllableState, m as useId$1, n as useLayoutEffect2, o as useCallbackRef, p as PortalContainerProvider } from "./mouse-pointer-2-BR00y3ir.js";
-import { y as trimLogBackupPayload, z as createSafeLogBackup, A as getLogBackupSessionId, N as NetworkCollector, C as ConsoleCollector, B as createIndexedDbLogBackup, b as buildJiraCreateFields, P as Popover, D as PopoverTrigger, E as Input, F as PopoverContent, L as Label, G as Select, H as SelectTrigger, J as SelectValue, K as SelectContent, M as SelectItem, O as getJiraMetadata, Q as buildJiraIssueFields, R as Button, T as Root2$2, U as Trigger$2, V as ChevronDown, W as Portal, X as Content2$1, Y as Check, Z as X$1, _ as DatePicker, e as buildNotionCreateFields, $ as getNotionPageMetadata, a0 as buildNotionFieldViews, c as captureWithModernScreenshot, p as pristineFetch, d as directUploadToSignedUrl, a1 as DirectUploadError, a2 as toast, a3 as getSnapshot, a4 as subscribe, a as uploadSignedMediaWithApi, t as sanitizeString, a5 as getRegisteredUploadId, f as buildGuestOwnerQuery, j as devLogger, v as getCurrentPageUrl, a6 as ChevronRight, a7 as ReactRemoveScroll, a8 as hideOthers, a9 as useFocusGuards, aa as FocusScope, ab as getExposedJiraFields, ac as isJiraFieldExposed, ad as normalizeExposedJiraFields, x as preloadModernScreenshot, u as uploadScreenshotDataUrls, k as filterExcludeServiceRelatedLogs, l as filterExcludeServiceRelatedConsoleLogs, s as selectNetworkLogsForSubmit, m as compactNetworkLogsForTransport, n as CONSOLE_LOG_SUBMIT_LIMIT, g as getElementPosition, o as buildExternalUserPayload, q as shrinkNetworkLogsToFit, r as measureJsonBytes, i as buildIssueIntegrationsPayload, w as SessionReplayCaptureController, ae as getPrimaryJiraMapping, af as createCollection, ag as useDirection, ah as getPrimaryNotionMapping, ai as buttonVariants, aj as findElementBySelector, ak as findElementByXPath, S as ScreenRecordingController, h as composeIssueFilterGroups, al as OnboardingProvider, am as useOnboardingTarget, an as useOnboardingFlow, ao as PopoverAnchor } from "./externalUserPayload-k9LSBeMB.js";
+import { y as trimLogBackupPayload, z as createSafeLogBackup, A as getLogBackupSessionId, N as NetworkCollector, C as ConsoleCollector, B as createIndexedDbLogBackup, b as buildJiraCreateFields, P as Popover, D as PopoverTrigger, E as Input, F as PopoverContent, L as Label, G as Select, H as SelectTrigger, J as SelectValue, K as SelectContent, M as SelectItem, O as getJiraMetadata, Q as buildJiraIssueFields, R as Button, T as Root2$2, U as Trigger$2, V as ChevronDown, W as Portal, X as Content2$1, Y as Check, Z as X$1, _ as DatePicker, e as buildNotionCreateFields, $ as getNotionPageMetadata, a0 as buildNotionFieldViews, c as captureWithModernScreenshot, p as pristineFetch, d as directUploadToSignedUrl, a1 as DirectUploadError, a2 as toast, a3 as getSnapshot, a4 as subscribe, a as uploadSignedMediaWithApi, t as sanitizeString, a5 as getRegisteredUploadId, f as buildGuestOwnerQuery, j as devLogger, v as getCurrentPageUrl, a6 as ChevronRight, a7 as ReactRemoveScroll, a8 as hideOthers, a9 as useFocusGuards, aa as FocusScope, ab as getExposedJiraFields, ac as isJiraFieldExposed, ad as normalizeExposedJiraFields, x as preloadModernScreenshot, u as uploadScreenshotDataUrls, k as filterExcludeServiceRelatedLogs, l as filterExcludeServiceRelatedConsoleLogs, s as selectNetworkLogsForSubmit, m as compactNetworkLogsForTransport, n as CONSOLE_LOG_SUBMIT_LIMIT, g as getElementPosition, o as buildExternalUserPayload, q as shrinkNetworkLogsToFit, r as measureJsonBytes, i as buildIssueIntegrationsPayload, w as SessionReplayCaptureController, ae as getPrimaryJiraMapping, af as createCollection, ag as useDirection, ah as getPrimaryNotionMapping, ai as buttonVariants, aj as findElementBySelector, ak as findElementByXPath, S as ScreenRecordingController, h as composeIssueFilterGroups, al as OnboardingProvider, am as useOnboardingTarget, an as useOnboardingFlow, ao as PopoverAnchor } from "./externalUserPayload-D-P1-QaW.js";
 import * as React from "react";
 import { useRef, useState, useEffect, useId, useLayoutEffect, useCallback, forwardRef, createElement, createContext, useContext, Component, Suspense, useInsertionEffect, useMemo, Children, isValidElement, Fragment as Fragment$1, useSyncExternalStore, useDeferredValue } from "react";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "issue-sticker",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "IssueSticker SDK - Visual bug tracking widget for web applications",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",