@flowsterix/react 0.4.2 → 0.6.0

package/dist/index.mjs

@@ -1,3 +1,5 @@
+import "./chunk-WCLT3A6G.mjs";
+import "./chunk-2ZX2Y3JL.mjs";
 import {
   createPathString,
   expandRect,
@@ -44,7 +46,17 @@ var defaultLabels = {
   ariaStepProgress: ({ current, total }) => `Step ${current} of ${total}`,
   ariaTimeRemaining: ({ ms }) => `${Math.ceil(ms / 1e3)} seconds remaining`,
   ariaDelayProgress: "Auto-advance progress",
-  formatTimeRemaining: ({ ms }) => `${Math.ceil(ms / 1e3)}s remaining`
+  formatTimeRemaining: ({ ms }) => `${Math.ceil(ms / 1e3)}s remaining`,
+  targetIssue: {
+    missingTitle: "Target not visible",
+    missingBody: "The target element is not currently visible. Make sure the UI piece is mounted and displayed.",
+    missingHint: "Showing the last known position until the element returns.",
+    hiddenTitle: "Target not visible",
+    hiddenBody: "The target element is not currently visible. Make sure the UI piece is mounted and displayed.",
+    hiddenHint: "Showing the last known position until the element returns.",
+    detachedTitle: "Target left the page",
+    detachedBody: "Navigate back to the screen that contains this element or reopen it before continuing the tour."
+  }
 };
 var LabelsContext = createContext(defaultLabels);
 var LabelsProvider = LabelsContext.Provider;
@@ -1404,7 +1416,7 @@ var useTourTarget = () => {
 };
 
 // src/hooks/useHudState.ts
-import { useCallback as useCallback2, useEffect as useEffect7, useMemo as useMemo4, useState as useState6 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect8, useMemo as useMemo4, useRef as useRef5, useState as useState7 } from "react";
 
 // src/hooks/useAdvanceRules.ts
 import { useEffect as useEffect4 } from "react";
@@ -1619,6 +1631,7 @@ var useAdvanceRules = (target) => {
 // src/hooks/useHiddenTargetFallback.ts
 import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
 var DEFAULT_DELAY_MS = 900;
+var DEFAULT_GRACE_PERIOD_MS = 400;
 var useHiddenTargetFallback = ({
   step,
   target,
@@ -1626,7 +1639,9 @@ var useHiddenTargetFallback = ({
   onSkip
 }) => {
   const [usingScreenFallback, setUsingScreenFallback] = useState4(false);
+  const [isInGracePeriod, setIsInGracePeriod] = useState4(false);
   const timeoutRef = useRef3(null);
+  const graceTimeoutRef = useRef3(null);
   const skipTriggeredRef = useRef3(false);
   const hiddenMode = step?.targetBehavior?.hidden ?? "screen";
   const hiddenDelayMs = Math.max(
@@ -1639,26 +1654,44 @@ var useHiddenTargetFallback = ({
       timeoutRef.current = null;
     }
   };
+  const clearGraceTimeout = () => {
+    if (graceTimeoutRef.current !== null) {
+      globalThis.clearTimeout(graceTimeoutRef.current);
+      graceTimeoutRef.current = null;
+    }
+  };
   useEffect5(() => {
     skipTriggeredRef.current = false;
     setUsingScreenFallback(false);
+    setIsInGracePeriod(false);
     clearPendingTimeout();
-    return clearPendingTimeout;
+    clearGraceTimeout();
+    return () => {
+      clearPendingTimeout();
+      clearGraceTimeout();
+    };
   }, [step?.id]);
   useEffect5(() => {
     if (!isBrowser) return void 0;
     if (!step) return void 0;
     clearPendingTimeout();
+    clearGraceTimeout();
     const isHiddenOrDetached = (target.visibility === "hidden" || target.visibility === "detached") && target.status === "ready";
     const isMissingWithNoRect = target.visibility === "missing" && target.status === "resolving" && target.rect === null && target.lastResolvedRect === null;
-    const shouldHandleHiddenTarget = !target.isScreen && (isHiddenOrDetached || isMissingWithNoRect);
+    const isMissingAfterNavigation = target.visibility === "missing" && target.status === "resolving" && target.rect === null;
+    const shouldHandleHiddenTarget = !target.isScreen && (isHiddenOrDetached || isMissingWithNoRect || isMissingAfterNavigation);
     if (!shouldHandleHiddenTarget) {
       setUsingScreenFallback(false);
+      setIsInGracePeriod(false);
       return void 0;
     }
+    setIsInGracePeriod(true);
     if (hiddenMode !== "screen") {
       setUsingScreenFallback(false);
     }
+    graceTimeoutRef.current = globalThis.setTimeout(() => {
+      setIsInGracePeriod(false);
+    }, DEFAULT_GRACE_PERIOD_MS);
     timeoutRef.current = globalThis.setTimeout(() => {
       if (hiddenMode === "screen") {
         setUsingScreenFallback(true);
@@ -1669,7 +1702,10 @@ var useHiddenTargetFallback = ({
         onSkip();
       }
     }, hiddenDelayMs);
-    return clearPendingTimeout;
+    return () => {
+      clearPendingTimeout();
+      clearGraceTimeout();
+    };
   }, [
     step,
     target.visibility,
@@ -1697,18 +1733,37 @@ var useHiddenTargetFallback = ({
   }, [target, usingScreenFallback, viewportRect]);
   return {
     target: resolvedTarget,
-    usingScreenFallback
+    usingScreenFallback,
+    isInGracePeriod
+  };
+};
+
+// src/hooks/useRouteMismatch.ts
+import { useEffect as useEffect6, useState as useState5 } from "react";
+var useRouteMismatch = (step) => {
+  const [currentPath, setCurrentPath] = useState5(() => getCurrentRoutePath());
+  useEffect6(() => {
+    return subscribeToRouteChanges((path) => {
+      setCurrentPath(path);
+    });
+  }, []);
+  const expectedRoute = step?.route;
+  const isRouteMismatch = step !== null && expectedRoute !== void 0 && !matchRoute({ pattern: expectedRoute, path: currentPath });
+  return {
+    isRouteMismatch,
+    currentPath,
+    expectedRoute
   };
 };
 
 // src/hooks/useViewportRect.ts
-import { useEffect as useEffect6, useRef as useRef4, useState as useState5 } from "react";
+import { useEffect as useEffect7, useRef as useRef4, useState as useState6 } from "react";
 var useViewportRect = () => {
-  const [viewport, setViewport] = useState5(
+  const [viewport, setViewport] = useState6(
     () => getViewportRect()
   );
   const rafRef = useRef4(null);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!isBrowser) return;
     const updateViewport = () => {
       rafRef.current = null;
@@ -1751,7 +1806,7 @@ var normalizeFlowFilter = (value) => {
 var useHudState = (options = {}) => {
   const { flowId } = options;
   const flowFilter = useMemo4(() => normalizeFlowFilter(flowId), [flowId]);
-  const { state, activeStep, activeFlowId, flows, next, complete } = useTour();
+  const { state, activeStep, activeFlowId, flows, next, complete, pause, resume } = useTour();
   const target = useTourTarget();
   const viewportRect = useViewportRect();
   useAdvanceRules(target);
@@ -1763,15 +1818,15 @@ var useHudState = (options = {}) => {
   const isRunning = state?.status === "running";
   const runningState = isRunning && matchesFlowFilter ? state : null;
   const runningStep = runningState && activeStep ? activeStep : null;
-  const [shouldRender, setShouldRender] = useState6(
+  const [shouldRender, setShouldRender] = useState7(
     Boolean(runningStep)
   );
-  useEffect7(() => {
+  useEffect8(() => {
     if (runningStep) {
       setShouldRender(true);
     }
   }, [runningStep?.id]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!shouldRender) return;
     if (runningStep) return;
     if (target.status !== "idle") return;
@@ -1782,6 +1837,19 @@ var useHudState = (options = {}) => {
       window.clearTimeout(timeoutId);
     };
   }, [runningStep, shouldRender, target.status]);
+  const { isRouteMismatch, currentPath } = useRouteMismatch(activeStep);
+  const pausedForMissingTargetRef = useRef5(null);
+  useEffect8(() => {
+    if (!isRouteMismatch) return;
+    if (!runningState || runningState.status !== "running") return;
+    pause();
+  }, [isRouteMismatch, runningState, pause]);
+  useEffect8(() => {
+    if (isRouteMismatch) return;
+    if (pausedForMissingTargetRef.current !== null) return;
+    if (!state || state.status !== "paused") return;
+    resume();
+  }, [isRouteMismatch, state, resume]);
   const skipHiddenStep = useCallback2(() => {
     if (!runningState || runningState.status !== "running") return;
     if (!activeFlowId) return;
@@ -1794,12 +1862,41 @@ var useHudState = (options = {}) => {
       next();
     }
   }, [activeFlowId, complete, flows, next, runningState]);
-  const { target: hudTarget } = useHiddenTargetFallback({
+  const { target: hudTarget, isInGracePeriod } = useHiddenTargetFallback({
     step: runningStep,
     target,
     viewportRect,
     onSkip: skipHiddenStep
   });
+  useEffect8(() => {
+    if (isRouteMismatch) return;
+    if (activeStep?.route !== void 0) return;
+    if (isInGracePeriod) return;
+    if (target.visibility !== "missing") return;
+    if (target.isScreen) return;
+    if (!runningState || runningState.status !== "running") return;
+    pausedForMissingTargetRef.current = currentPath;
+    pause();
+  }, [
+    isRouteMismatch,
+    activeStep?.route,
+    isInGracePeriod,
+    target.visibility,
+    target.isScreen,
+    runningState,
+    currentPath,
+    pause
+  ]);
+  useEffect8(() => {
+    if (pausedForMissingTargetRef.current === null) return;
+    if (!state || state.status !== "paused") return;
+    if (currentPath === pausedForMissingTargetRef.current) return;
+    pausedForMissingTargetRef.current = null;
+    resume();
+  }, [currentPath, state, resume]);
+  useEffect8(() => {
+    pausedForMissingTargetRef.current = null;
+  }, [activeStep?.id]);
   const canRenderStep = Boolean(runningStep && runningState);
   const focusTrapActive = canRenderStep;
   const flowHudOptions = matchesFlowFilter && activeFlowId ? flows.get(activeFlowId)?.hud ?? null : null;
@@ -1816,7 +1913,8 @@ var useHudState = (options = {}) => {
     flowHudOptions,
     hudRenderMode,
     matchesFlowFilter,
-    activeFlowId
+    activeFlowId,
+    isInGracePeriod
   };
 };
 
@@ -1850,7 +1948,7 @@ var useHudDescription = (options) => {
 };
 
 // src/hooks/useHudShortcuts.ts
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 
 // src/hooks/useTourControls.ts
 import { useCallback as useCallback3, useMemo as useMemo6 } from "react";
@@ -1975,7 +2073,7 @@ var useHudShortcuts = (target, options) => {
   const escapeEnabled = options?.escape ?? true;
   const { state } = useTour();
   const { cancel, canGoBack, goBack, canGoNext, goNext, isActive } = useTourControls();
-  useEffect8(() => {
+  useEffect9(() => {
     if (!isBrowser) return void 0;
     if (!enabled) return void 0;
     if (!target) return void 0;
@@ -2039,10 +2137,10 @@ var useHudShortcuts = (target, options) => {
 };
 
 // src/hooks/useTourHud.ts
-import { useMemo as useMemo8, useState as useState8 } from "react";
+import { useMemo as useMemo8, useState as useState9 } from "react";
 
 // src/hooks/useBodyScrollLock.ts
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect10 } from "react";
 var lockCount = 0;
 var previousOverflow = null;
 var acquireLock = () => {
@@ -2063,7 +2161,7 @@ var releaseLock = () => {
   }
 };
 var useBodyScrollLock = (enabled) => {
-  useEffect9(() => {
+  useEffect10(() => {
     if (!enabled) return;
     acquireLock();
     return () => {
@@ -2073,42 +2171,45 @@ var useBodyScrollLock = (enabled) => {
 };
 
 // src/hooks/useHudTargetIssue.ts
-import { useEffect as useEffect10, useMemo as useMemo7, useState as useState7 } from "react";
-var deriveTargetIssue = (target) => {
+import { useEffect as useEffect11, useMemo as useMemo7, useState as useState8 } from "react";
+var deriveTargetIssue = (params) => {
+  const { target, labels } = params;
   if (target.isScreen) return null;
   if (target.status === "idle") return null;
   switch (target.visibility) {
     case "missing":
       return {
         type: "missing",
-        title: "Looking for the target",
-        body: "Flowsterix is still trying to find this element. Make sure the UI piece is mounted or adjust the selector.",
-        hint: target.rectSource === "stored" ? "Showing the last known position until the element returns." : void 0
+        title: labels.targetIssue.missingTitle,
+        body: labels.targetIssue.missingBody,
+        hint: target.rectSource === "stored" ? labels.targetIssue.missingHint : void 0
       };
     case "hidden":
       return {
         type: "hidden",
-        title: "Target is hidden",
-        body: "The element exists but is currently hidden, collapsed, or zero-sized. Expand it so the highlight can lock on."
+        title: labels.targetIssue.hiddenTitle,
+        body: labels.targetIssue.hiddenBody,
+        hint: target.rectSource === "stored" ? labels.targetIssue.hiddenHint : void 0
       };
     case "detached":
       return {
         type: "detached",
-        title: "Target left the page",
-        body: "Navigate back to the screen that contains this element or reopen it before continuing the tour."
+        title: labels.targetIssue.detachedTitle,
+        body: labels.targetIssue.detachedBody
       };
     default:
       return null;
   }
 };
 var useHudTargetIssue = (target, options) => {
+  const labels = useTourLabels();
   const delayMs = Math.max(0, options?.delayMs ?? 500);
-  const [armed, setArmed] = useState7(false);
+  const [armed, setArmed] = useState8(false);
   const rawIssue = useMemo7(
-    () => deriveTargetIssue(target),
-    [target.isScreen, target.rectSource, target.status, target.visibility]
+    () => deriveTargetIssue({ target, labels }),
+    [target.isScreen, target.rectSource, target.status, target.visibility, labels]
   );
-  useEffect10(() => {
+  useEffect11(() => {
     if (!rawIssue) {
       setArmed(false);
       return;
@@ -2142,7 +2243,7 @@ var useTourHud = (options = {}) => {
   const { backdropInteraction, lockBodyScroll } = useTour();
   const hudState = useHudState();
   const disableDefaultHud = hudState.hudRenderMode === "none";
-  const [popoverNode, setPopoverNode] = useState8(null);
+  const [popoverNode, setPopoverNode] = useState9(null);
   const popoverOptions = hudState.flowHudOptions?.popover;
   const description = useHudDescription({
     step: hudState.runningStep,
@@ -2214,7 +2315,7 @@ var useTourHud = (options = {}) => {
 };
 
 // src/hooks/useTourOverlay.ts
-import { useEffect as useEffect11, useMemo as useMemo9, useRef as useRef5 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo9, useRef as useRef6 } from "react";
 var DEFAULT_PADDING = 12;
 var DEFAULT_RADIUS = 12;
 var DEFAULT_EDGE_BUFFER = 0;
@@ -2224,11 +2325,12 @@ var useTourOverlay = (options) => {
     padding = DEFAULT_PADDING,
     radius = DEFAULT_RADIUS,
     edgeBuffer = DEFAULT_EDGE_BUFFER,
-    interactionMode = "passthrough"
+    interactionMode = "passthrough",
+    isInGracePeriod = false
   } = options;
-  const hasShownRef = useRef5(false);
-  const lastReadyTargetRef = useRef5(null);
-  useEffect11(() => {
+  const hasShownRef = useRef6(false);
+  const lastReadyTargetRef = useRef6(null);
+  useEffect12(() => {
     if (!isBrowser) return;
     if (target.status === "ready") {
       hasShownRef.current = true;
@@ -2279,7 +2381,7 @@ var useTourOverlay = (options) => {
     radius: highlightRadius
   } : null;
   const maskCapable = useMemo9(() => supportsMasking(), []);
-  const isActive = target.status === "ready" || target.status === "resolving" && cachedTarget !== null;
+  const isActive = target.status === "ready" || target.status === "resolving" && cachedTarget !== null || isInGracePeriod;
   const shouldMask = maskCapable && isActive;
   const maskId = useMemo9(
     () => `tour-overlay-mask-${Math.random().toString(36).slice(2, 10)}`,
@@ -2464,12 +2566,12 @@ var useRadixDialogAdapter = (options = {}) => {
 };
 
 // src/hooks/useDelayAdvance.ts
-import { useEffect as useEffect12, useMemo as useMemo10, useState as useState9 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo10, useState as useState10 } from "react";
 var getTimestamp = () => typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
 var useDelayAdvance = () => {
   const { delayInfo, activeStep, state } = useTour();
-  const [now, setNow] = useState9(() => getTimestamp());
-  useEffect12(() => {
+  const [now, setNow] = useState10(() => getTimestamp());
+  useEffect13(() => {
     if (!delayInfo) return;
     if (!activeStep || activeStep.id !== delayInfo.stepId) return;
     if (!state || state.status !== "running") return;
@@ -2486,7 +2588,7 @@ var useDelayAdvance = () => {
       }
     };
   }, [delayInfo, activeStep, state]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!delayInfo) {
       setNow(getTimestamp());
     }
@@ -2544,7 +2646,7 @@ var useDelayAdvance = () => {
 };
 
 // src/components/OverlayBackdrop.tsx
-import { useEffect as useEffect13, useRef as useRef6 } from "react";
+import { useEffect as useEffect14, useRef as useRef7 } from "react";
 import { createPortal } from "react-dom";
 import { AnimatePresence } from "motion/react";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
@@ -2633,9 +2735,9 @@ var OverlayBackdrop = ({
     viewport
   } = overlay;
   const hasHighlightBounds = Boolean(highlight.rect);
-  const prevScreenTargetRef = useRef6(null);
+  const prevScreenTargetRef = useRef7(null);
   const shouldSnapHighlight = prevScreenTargetRef.current === true && !highlight.isScreen && hasHighlightBounds;
-  useEffect13(() => {
+  useEffect14(() => {
     prevScreenTargetRef.current = highlight.isScreen;
   }, [highlight.isScreen]);
   const resolvedBlur = typeof blurAmount === "number" ? `${blurAmount}px` : "0px";
@@ -2872,7 +2974,7 @@ var OverlayBackdrop = ({
 };
 
 // src/components/TourPopoverPortal.tsx
-import { useEffect as useEffect14, useLayoutEffect as useLayoutEffect2, useMemo as useMemo11, useRef as useRef7, useState as useState10 } from "react";
+import { useEffect as useEffect15, useLayoutEffect as useLayoutEffect2, useMemo as useMemo11, useRef as useRef8, useState as useState11 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import {
   autoPlacement,
@@ -2939,12 +3041,12 @@ var TourPopoverPortal = ({
   const popoverContentTransition = transitionsOverride?.popoverContent ?? adapter.transitions.popoverContent ?? DEFAULT_POPOVER_CONTENT_TRANSITION;
   const viewport = useViewportRect();
   const prefersMobileLayout = viewport.width <= MOBILE_BREAKPOINT || viewport.height <= MOBILE_HEIGHT_BREAKPOINT;
-  const prefersMobileRef = useRef7(prefersMobileLayout);
-  useEffect14(() => {
+  const prefersMobileRef = useRef8(prefersMobileLayout);
+  useEffect15(() => {
     prefersMobileRef.current = prefersMobileLayout;
   }, [prefersMobileLayout]);
-  const lastReadyTargetRef = useRef7(null);
-  useEffect14(() => {
+  const lastReadyTargetRef = useRef8(null);
+  useEffect15(() => {
     if (target.status === "ready" && target.rect) {
       lastReadyTargetRef.current = {
         rect: { ...target.rect },
@@ -2957,9 +3059,10 @@ var TourPopoverPortal = ({
   const cachedTarget = lastReadyTargetRef.current;
   const resolvedRect = target.rect ?? target.lastResolvedRect ?? cachedTarget?.rect ?? null;
   const resolvedIsScreen = target.status === "ready" ? target.isScreen : cachedTarget?.isScreen ?? target.isScreen;
+  const shouldHidePopover = !resolvedRect && !target.isScreen;
   const fallbackRect = resolvedRect ?? viewport;
   const fallbackIsScreen = resolvedIsScreen;
-  const [floatingSize, setFloatingSize] = useState10(null);
+  const [floatingSize, setFloatingSize] = useState11(null);
   const clampVertical = (value) => Math.min(viewport.height - 24, Math.max(24, value));
   const clampHorizontal = (value) => Math.min(viewport.width - 24, Math.max(24, value));
   const screenCenteredTop = viewport.height / 2 - (floatingSize?.height ?? 0) / 2;
@@ -2986,22 +3089,22 @@ var TourPopoverPortal = ({
     }),
     [viewport.height, viewport.width]
   );
-  const floatingRef = useRef7(null);
-  const cachedFloatingPositionRef = useRef7(null);
-  const appliedFloatingCacheRef = useRef7(null);
-  const deferredScreenSnapRef = useRef7(null);
-  const [layoutMode, setLayoutMode] = useState10(
+  const floatingRef = useRef8(null);
+  const cachedFloatingPositionRef = useRef8(null);
+  const appliedFloatingCacheRef = useRef8(null);
+  const deferredScreenSnapRef = useRef8(null);
+  const [layoutMode, setLayoutMode] = useState11(
     () => prefersMobileLayout ? "mobile" : "floating"
   );
-  const [floatingPosition, setFloatingPosition] = useState10(fallbackPosition);
-  const [dragPosition, setDragPosition] = useState10(null);
-  const [isDragging, setIsDragging] = useState10(false);
-  const dragStateRef = useRef7(null);
-  const overflowRetryRef = useRef7({
+  const [floatingPosition, setFloatingPosition] = useState11(fallbackPosition);
+  const [dragPosition, setDragPosition] = useState11(null);
+  const [isDragging, setIsDragging] = useState11(false);
+  const dragStateRef = useRef8(null);
+  const overflowRetryRef = useRef8({
     stepId: null,
     attempts: 0
   });
-  const overflowRetryTimeoutRef = useRef7(null);
+  const overflowRetryTimeoutRef = useRef8(null);
   useLayoutEffect2(() => {
     if (!isBrowser) return;
     const node = floatingRef.current;
@@ -3021,18 +3124,18 @@ var TourPopoverPortal = ({
   const autoAlignment = resolvedPlacement.endsWith(
     "-start"
   ) ? "start" : resolvedPlacement.endsWith("-end") ? "end" : void 0;
-  useEffect14(() => {
+  useEffect15(() => {
     setDragPosition(null);
     setLayoutMode(prefersMobileRef.current ? "mobile" : "floating");
     cachedFloatingPositionRef.current = null;
     appliedFloatingCacheRef.current = null;
   }, [target.stepId]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (layoutMode !== "manual") {
       setDragPosition(null);
     }
   }, [layoutMode]);
-  useEffect14(() => {
+  useEffect15(() => {
     cachedFloatingPositionRef.current = floatingPosition;
     const cacheKey = getFloatingCacheKey(target);
     if (cacheKey) {
@@ -3055,17 +3158,17 @@ var TourPopoverPortal = ({
     }),
     [viewport.height, viewport.width]
   );
-  useEffect14(() => {
+  useEffect15(() => {
     if (layoutMode === "docked") {
       setFloatingPosition(dockedPosition);
     }
   }, [dockedPosition, layoutMode]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (layoutMode === "mobile") {
       setFloatingPosition(mobilePosition);
     }
   }, [layoutMode, mobilePosition]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (prefersMobileLayout) {
       if (layoutMode !== "mobile") {
         setLayoutMode("mobile");
@@ -3078,7 +3181,7 @@ var TourPopoverPortal = ({
       setFloatingPosition(fallbackPosition);
     }
   }, [fallbackPosition, layoutMode, prefersMobileLayout]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (layoutMode !== "floating") return;
     const stepId = target.stepId;
     if (!stepId) return;
@@ -3102,7 +3205,7 @@ var TourPopoverPortal = ({
     target.stepId
   ]);
   const shouldDeferScreenSnap = layoutMode === "floating" && target.isScreen && Boolean(layoutId);
-  useEffect14(() => {
+  useEffect15(() => {
     return () => {
       if (deferredScreenSnapRef.current !== null) {
         cancelAnimationFrame(deferredScreenSnapRef.current);
@@ -3122,7 +3225,7 @@ var TourPopoverPortal = ({
     target.isScreen,
     target.status
   ]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!shouldDeferScreenSnap) return;
     if (deferredScreenSnapRef.current !== null) {
       cancelAnimationFrame(deferredScreenSnapRef.current);
@@ -3149,7 +3252,7 @@ var TourPopoverPortal = ({
       }
     };
   }, [fallbackPosition, shouldDeferScreenSnap]);
-  useEffect14(() => {
+  useEffect15(() => {
     return () => {
       if (overflowRetryTimeoutRef.current !== null) {
         window.clearTimeout(overflowRetryTimeoutRef.current);
@@ -3375,7 +3478,7 @@ var TourPopoverPortal = ({
     }
     event.preventDefault();
   };
-  useEffect14(() => endDrag, []);
+  useEffect15(() => endDrag, []);
   const shouldUseFallbackInitial = layoutMode !== "mobile" && (Boolean(target.lastResolvedRect) || Boolean(cachedTarget));
   const floatingCacheKey = layoutMode === "mobile" ? null : getFloatingCacheKey(target);
   const persistedFloatingInitial = floatingCacheKey && floatingPositionCache.has(floatingCacheKey) ? floatingPositionCache.get(floatingCacheKey) ?? null : null;
@@ -3462,11 +3565,12 @@ var TourPopoverPortal = ({
     dragHandleProps,
     descriptionProps
   };
+  if (shouldHidePopover) return null;
   return createPortal2(children(context), host);
 };
 
 // src/components/TourFocusManager.tsx
-import { useEffect as useEffect15, useLayoutEffect as useLayoutEffect3, useRef as useRef8, useState as useState11 } from "react";
+import { useEffect as useEffect16, useLayoutEffect as useLayoutEffect3, useRef as useRef9, useState as useState12 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 
 // src/utils/focus.ts
@@ -3543,18 +3647,18 @@ var TourFocusManager = ({
   highlightRect,
   guardElementFocusRing
 }) => {
-  const previousFocusRef = useRef8(null);
-  const guardNodesRef = useRef8({
+  const previousFocusRef = useRef9(null);
+  const guardNodesRef = useRef9({
     "target-start": null,
     "target-end": null,
     "popover-start": null,
     "popover-end": null
   });
-  const lastTabDirectionRef = useRef8("forward");
-  const suppressGuardHopRef = useRef8(null);
-  const [targetRingActive, setTargetRingActive] = useState11(false);
-  const [popoverRingActive, setPopoverRingActive] = useState11(false);
-  const [popoverRect, setPopoverRect] = useState11(null);
+  const lastTabDirectionRef = useRef9("forward");
+  const suppressGuardHopRef = useRef9(null);
+  const [targetRingActive, setTargetRingActive] = useState12(false);
+  const [popoverRingActive, setPopoverRingActive] = useState12(false);
+  const [popoverRect, setPopoverRect] = useState12(null);
   const restoreFocus = () => {
     const previous = previousFocusRef.current;
     previousFocusRef.current = null;
@@ -3580,7 +3684,7 @@ var TourFocusManager = ({
       restoreFocus();
     };
   }, [active, popoverNode, target.element]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!isBrowser) return;
     if (!active) return;
     const doc = popoverNode?.ownerDocument ?? target.element?.ownerDocument ?? document;

package/dist/labels.d.ts

@@ -15,6 +15,16 @@ export interface TourLabels {
     formatTimeRemaining: (params: {
         ms: number;
     }) => string;
+    targetIssue: {
+        missingTitle: string;
+        missingBody: string;
+        missingHint: string;
+        hiddenTitle: string;
+        hiddenBody: string;
+        hiddenHint: string;
+        detachedTitle: string;
+        detachedBody: string;
+    };
 }
 export declare const defaultLabels: TourLabels;
 export declare const LabelsProvider: import("react").Provider<TourLabels>;

package/dist/labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"labels.d.ts","sourceRoot":"","sources":["../src/labels.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,UAAU;IAEzB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,EAAE,MAAM,CAAA;IAGrB,gBAAgB,EAAE,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAA;IACxE,iBAAiB,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAA;IACrD,iBAAiB,EAAE,MAAM,CAAA;IAGzB,mBAAmB,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAA;CACxD;AAED,eAAO,MAAM,aAAa,EAAE,UAa3B,CAAA;AAID,eAAO,MAAM,cAAc,sCAAyB,CAAA;AAEpD,wBAAgB,aAAa,IAAI,UAAU,CAE1C"}
+{"version":3,"file":"labels.d.ts","sourceRoot":"","sources":["../src/labels.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,UAAU;IAEzB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,EAAE,MAAM,CAAA;IAGrB,gBAAgB,EAAE,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAA;IACxE,iBAAiB,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAA;IACrD,iBAAiB,EAAE,MAAM,CAAA;IAGzB,mBAAmB,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAA;IAGvD,WAAW,EAAE;QACX,YAAY,EAAE,MAAM,CAAA;QACpB,WAAW,EAAE,MAAM,CAAA;QACnB,WAAW,EAAE,MAAM,CAAA;QACnB,WAAW,EAAE,MAAM,CAAA;QACnB,UAAU,EAAE,MAAM,CAAA;QAClB,UAAU,EAAE,MAAM,CAAA;QAClB,aAAa,EAAE,MAAM,CAAA;QACrB,YAAY,EAAE,MAAM,CAAA;KACrB,CAAA;CACF;AAED,eAAO,MAAM,aAAa,EAAE,UA2B3B,CAAA;AAID,eAAO,MAAM,cAAc,sCAAyB,CAAA;AAEpD,wBAAgB,aAAa,IAAI,UAAU,CAE1C"}

package/dist/router/index.mjs

@@ -1,3 +1,4 @@
+import "../chunk-WCLT3A6G.mjs";
 import {
   TanStackRouterSync,
   getTanStackRouter,