@flowsterix/react 0.5.0 → 0.7.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;
@@ -548,6 +560,10 @@ var TourProvider = ({
     () => getActiveStore().complete(),
     [getActiveStore]
   );
+  const advanceStep = useCallback(
+    (stepId) => getActiveStore().advanceStep(stepId),
+    [getActiveStore]
+  );
   const toggleDebug = useCallback(() => {
     setDebugEnabled((previous) => !previous);
   }, []);
@@ -585,6 +601,7 @@ var TourProvider = ({
       resume,
       cancel,
       complete,
+      advanceStep,
       events,
       debugEnabled,
       setDebugEnabled,
@@ -597,6 +614,7 @@ var TourProvider = ({
     [
       activeFlowId,
       activeStep,
+      advanceStep,
       back,
       cancel,
       complete,
@@ -1404,7 +1422,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";
@@ -1666,7 +1684,8 @@ var useHiddenTargetFallback = ({
     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);
@@ -1725,14 +1744,32 @@ var useHiddenTargetFallback = ({
   };
 };
 
+// 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;
@@ -1775,7 +1812,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);
@@ -1787,15 +1824,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;
@@ -1806,6 +1843,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;
@@ -1824,6 +1874,35 @@ var useHudState = (options = {}) => {
     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;
@@ -1875,7 +1954,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";
@@ -2000,7 +2079,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;
@@ -2064,10 +2143,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 = () => {
@@ -2088,7 +2167,7 @@ var releaseLock = () => {
   }
 };
 var useBodyScrollLock = (enabled) => {
-  useEffect9(() => {
+  useEffect10(() => {
     if (!enabled) return;
     acquireLock();
     return () => {
@@ -2098,37 +2177,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: labels.targetIssue.missingTitle,
+        body: labels.targetIssue.missingBody,
+        hint: target.rectSource === "stored" ? labels.targetIssue.missingHint : void 0
+      };
     case "hidden":
       return {
-        type: target.visibility,
-        title: "Target not visible",
-        body: "The target element is not currently visible. Make sure the UI piece is mounted and displayed.",
-        hint: target.rectSource === "stored" ? "Showing the last known position until the element returns." : void 0
+        type: "hidden",
+        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;
@@ -2162,7 +2249,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,
@@ -2234,7 +2321,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;
@@ -2247,9 +2334,9 @@ var useTourOverlay = (options) => {
     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;
@@ -2485,12 +2572,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;
@@ -2507,7 +2594,7 @@ var useDelayAdvance = () => {
       }
     };
   }, [delayInfo, activeStep, state]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!delayInfo) {
       setNow(getTimestamp());
     }
@@ -2565,7 +2652,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";
@@ -2654,9 +2741,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";
@@ -2893,7 +2980,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,
@@ -2947,8 +3034,7 @@ var TourPopoverPortal = ({
   layoutId,
   containerComponent,
   contentComponent,
-  transitionsOverride,
-  isInGracePeriod = false
+  transitionsOverride
 }) => {
   if (!isBrowser) return null;
   const host = portalHost();
@@ -2961,12 +3047,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 },
@@ -2979,10 +3065,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 shouldHideForGracePeriod = isInGracePeriod && !resolvedRect;
+  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;
@@ -3009,22 +3095,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;
@@ -3044,18 +3130,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) {
@@ -3078,17 +3164,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");
@@ -3101,7 +3187,7 @@ var TourPopoverPortal = ({
       setFloatingPosition(fallbackPosition);
     }
   }, [fallbackPosition, layoutMode, prefersMobileLayout]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (layoutMode !== "floating") return;
     const stepId = target.stepId;
     if (!stepId) return;
@@ -3125,7 +3211,7 @@ var TourPopoverPortal = ({
     target.stepId
   ]);
   const shouldDeferScreenSnap = layoutMode === "floating" && target.isScreen && Boolean(layoutId);
-  useEffect14(() => {
+  useEffect15(() => {
     return () => {
       if (deferredScreenSnapRef.current !== null) {
         cancelAnimationFrame(deferredScreenSnapRef.current);
@@ -3145,7 +3231,7 @@ var TourPopoverPortal = ({
     target.isScreen,
     target.status
   ]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!shouldDeferScreenSnap) return;
     if (deferredScreenSnapRef.current !== null) {
       cancelAnimationFrame(deferredScreenSnapRef.current);
@@ -3172,7 +3258,7 @@ var TourPopoverPortal = ({
       }
     };
   }, [fallbackPosition, shouldDeferScreenSnap]);
-  useEffect14(() => {
+  useEffect15(() => {
     return () => {
       if (overflowRetryTimeoutRef.current !== null) {
         window.clearTimeout(overflowRetryTimeoutRef.current);
@@ -3398,7 +3484,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;
@@ -3485,12 +3571,12 @@ var TourPopoverPortal = ({
     dragHandleProps,
     descriptionProps
   };
-  if (shouldHideForGracePeriod) return null;
+  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
@@ -3567,18 +3653,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;
@@ -3604,7 +3690,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowsterix/react",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "React bindings for Flowsterix - guided tours and onboarding flows",
   "license": "MIT",
   "repository": {
@@ -64,7 +64,7 @@
   ],
   "dependencies": {
     "@floating-ui/dom": "^1.7.4",
-    "@flowsterix/core": "0.4.0"
+    "@flowsterix/core": "0.5.0"
   },
   "peerDependencies": {
     "react": ">=18",