react-native-lumen 1.0.1 → 1.1.0

package/lib/module/components/TourOverlay.js

@@ -1,10 +1,11 @@
 "use strict";
 
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { StyleSheet, Dimensions } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import Animated, { useAnimatedProps, useAnimatedStyle } from 'react-native-reanimated';
 import { useTour } from "../hooks/useTour.js";
+import { DEFAULT_ZONE_STYLE } from "../constants/defaults.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   width: SCREEN_WIDTH,
@@ -43,11 +44,22 @@ export const TourOverlay = /*#__PURE__*/memo(() => {
     targetHeight,
     targetRadius,
     opacity,
+    zoneBorderWidth,
     config,
     currentStep,
-    steps
+    steps,
+    currentZoneStyle
   } = useTour();
 
+  // Get resolved zone style for styling the glow/border
+  const zoneStyle = useMemo(() => {
+    return {
+      ...DEFAULT_ZONE_STYLE,
+      ...config?.zoneStyle,
+      ...currentZoneStyle
+    };
+  }, [config?.zoneStyle, currentZoneStyle]);
+
   // Create the d string for the mask
   // Outer rectangle covers the whole screen
   // Inner shape is the "hole"
@@ -86,7 +98,8 @@ export const TourOverlay = /*#__PURE__*/memo(() => {
   //    - Overlay shouldn't block anything?
   //    - pointerEvents='none' on the whole container.
 
-  const shouldBlockOutside = config?.preventInteraction ?? false;
+  // Check per-step preventInteraction first, then fall back to global config
+  const shouldBlockOutside = step?.preventInteraction ?? config?.preventInteraction ?? false;
 
   // If we don't want to block outside, we just let everything pass.
   // But wait, if we let everything pass, we can't implement 'clickable=false' strictness?
@@ -108,6 +121,30 @@ export const TourOverlay = /*#__PURE__*/memo(() => {
       borderRadius: targetRadius.value
     };
   });
+
+  // Animated style for the zone border/glow ring
+  const zoneBorderStyle = useAnimatedStyle(() => {
+    const isGlowEnabled = config?.enableGlow === true;
+    const borderW = zoneBorderWidth?.value ?? zoneStyle.borderWidth;
+    return {
+      position: 'absolute',
+      left: targetX.value,
+      top: targetY.value,
+      width: targetWidth.value,
+      height: targetHeight.value,
+      borderRadius: targetRadius.value,
+      borderWidth: borderW,
+      borderColor: zoneStyle.borderColor,
+      backgroundColor: 'transparent',
+      ...(isGlowEnabled && {
+        // Glow effect using React Native 0.76+ boxShadow API
+        boxShadow: `${zoneStyle.glowOffsetX}px ${zoneStyle.glowOffsetY}px ${zoneStyle.glowRadius}px ${zoneStyle.glowSpread}px ${zoneStyle.glowColor}`
+      })
+    };
+  });
+
+  // Determine if we should show the border/glow
+  const showBorder = config?.enableGlow === true || zoneStyle.borderWidth > 0;
   return /*#__PURE__*/_jsxs(AnimatedView, {
     pointerEvents: containerPointerEvents,
     style: StyleSheet.absoluteFill,
@@ -128,6 +165,9 @@ export const TourOverlay = /*#__PURE__*/memo(() => {
       style: blockerStyle,
       pointerEvents: "auto" // Catch touches
       // backgroundColor="transparent" // Default
+    }), showBorder && currentStep && /*#__PURE__*/_jsx(AnimatedView, {
+      style: zoneBorderStyle,
+      pointerEvents: "none"
     })]
   });
 });

package/lib/module/components/TourOverlay.js.map

@@ -1 +1 @@
-{"version":3,"names":["memo","StyleSheet","Dimensions","Svg","Path","Animated","useAnimatedProps","useAnimatedStyle","useTour","jsx","_jsx","jsxs","_jsxs","width","SCREEN_WIDTH","height","SCREEN_HEIGHT","get","AnimatedPath","createAnimatedComponent","AnimatedView","View","createRoundedRectPath","x","y","w","h","r","radius","Math","min","TourOverlay","targetX","targetY","targetWidth","targetHeight","targetRadius","opacity","config","currentStep","steps","animatedProps","holePath","value","path","d","fillOpacity","step","isClickable","clickable","shouldBlockOutside","preventInteraction","containerPointerEvents","blockerStyle","position","left","top","borderRadius","pointerEvents","style","absoluteFill","children","fill","fillRule","onPress"],"sourceRoot":"..\\..\\..\\src","sources":["components/TourOverlay.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["memo","useMemo","StyleSheet","Dimensions","Svg","Path","Animated","useAnimatedProps","useAnimatedStyle","useTour","DEFAULT_ZONE_STYLE","jsx","_jsx","jsxs","_jsxs","width","SCREEN_WIDTH","height","SCREEN_HEIGHT","get","AnimatedPath","createAnimatedComponent","AnimatedView","View","createRoundedRectPath","x","y","w","h","r","radius","Math","min","TourOverlay","targetX","targetY","targetWidth","targetHeight","targetRadius","opacity","zoneBorderWidth","config","currentStep","steps","currentZoneStyle","zoneStyle","animatedProps","holePath","value","path","d","fillOpacity","step","isClickable","clickable","shouldBlockOutside","preventInteraction","containerPointerEvents","blockerStyle","position","left","top","borderRadius","zoneBorderStyle","isGlowEnabled","enableGlow","borderW","borderWidth","borderColor","backgroundColor","boxShadow","glowOffsetX","glowOffsetY","glowRadius","glowSpread","glowColor","showBorder","pointerEvents","style","absoluteFill","children","fill","fillRule","onPress"],"sourceRoot":"..\\..\\..\\src","sources":["components/TourOverlay.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/TourProvider.js

@@ -1,13 +1,88 @@
 "use strict";
 
-import React, { createContext, useState, useCallback, useMemo, useRef } from 'react';
+import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
 import { useSharedValue, withSpring, withTiming, useAnimatedRef, default as Animated } from 'react-native-reanimated';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Dimensions } from 'react-native';
+import { TourContext } from "../context/TourContext.js";
 import { TourOverlay } from "./TourOverlay.js";
 import { TourTooltip } from "./TourTooltip.js";
-import { DEFAULT_BACKDROP_OPACITY, DEFAULT_SPRING_CONFIG } from "../constants/defaults.js";
+import { DEFAULT_BACKDROP_OPACITY, DEFAULT_SPRING_CONFIG, DEFAULT_ZONE_STYLE, resolveZoneStyle } from "../constants/defaults.js";
+import { detectStorage, saveTourProgress, loadTourProgress, clearTourProgress } from "../utils/storage.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const TourContext = /*#__PURE__*/createContext(null);
+const {
+  width: SCREEN_WIDTH,
+  height: SCREEN_HEIGHT
+} = Dimensions.get('window');
+
+/**
+ * Computes the zone geometry based on element bounds and zone style.
+ * Handles different shapes: rounded-rect, circle, pill.
+ */
+function computeZoneGeometry(element, style) {
+  const {
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    shape,
+    borderRadius
+  } = style;
+  let sx, sy, sw, sh, sr;
+  switch (shape) {
+    case 'circle':
+      {
+        // Create a circular zone that encompasses the element
+        const cx = element.x + element.width / 2;
+        const cy = element.y + element.height / 2;
+        // Use the larger dimension to create a circle, plus padding
+        const radius = Math.max(element.width, element.height) / 2 + style.padding;
+        sx = cx - radius;
+        sy = cy - radius;
+        sw = radius * 2;
+        sh = radius * 2;
+        sr = radius;
+        break;
+      }
+    case 'pill':
+      {
+        // Pill shape with fully rounded ends
+        sx = element.x - paddingLeft;
+        sy = element.y - paddingTop;
+        sw = element.width + paddingLeft + paddingRight;
+        sh = element.height + paddingTop + paddingBottom;
+        sr = sh / 2; // Fully rounded based on height
+        break;
+      }
+    case 'rounded-rect':
+    default:
+      {
+        sx = element.x - paddingLeft;
+        sy = element.y - paddingTop;
+        sw = element.width + paddingLeft + paddingRight;
+        sh = element.height + paddingTop + paddingBottom;
+        sr = borderRadius;
+        break;
+      }
+  }
+
+  // Clamp to screen bounds
+  sx = Math.max(0, Math.min(sx, SCREEN_WIDTH - sw));
+  sy = Math.max(0, Math.min(sy, SCREEN_HEIGHT - sh));
+  sw = Math.min(sw, SCREEN_WIDTH - sx);
+  sh = Math.min(sh, SCREEN_HEIGHT - sy);
+
+  // Ensure minimum size
+  const minSize = 40;
+  sw = Math.max(sw, minSize);
+  sh = Math.max(sh, minSize);
+  return {
+    x: sx,
+    y: sy,
+    width: sw,
+    height: sh,
+    borderRadius: sr
+  };
+}
 const AnimatedView = Animated.View;
 export const TourProvider = ({
   children,
@@ -17,11 +92,55 @@ export const TourProvider = ({
 }) => {
   const [steps, setSteps] = useState({});
   const [currentStep, setCurrentStep] = useState(null);
+  const [hasSavedProgress, setHasSavedProgress] = useState(false);
 
   // ref to access latest measurements without causing re-renders
   const measurements = useRef({});
   const containerRef = useAnimatedRef();
 
+  // ─── Persistence Setup ─────────────────────────────────────────────────────
+  const persistenceConfig = config?.persistence;
+  const isPersistenceEnabled = persistenceConfig?.enabled ?? false;
+  const tourId = persistenceConfig?.tourId ?? 'default';
+  const autoResume = persistenceConfig?.autoResume ?? true;
+  const clearOnComplete = persistenceConfig?.clearOnComplete ?? true;
+  const maxAge = persistenceConfig?.maxAge;
+
+  // Get storage adapter (custom or auto-detected)
+  const storageAdapter = useMemo(() => {
+    if (!isPersistenceEnabled) return null;
+    if (persistenceConfig?.storage) return persistenceConfig.storage;
+    const detected = detectStorage();
+    return detected.adapter;
+  }, [isPersistenceEnabled, persistenceConfig?.storage]);
+
+  // Check for saved progress on mount
+  useEffect(() => {
+    if (!isPersistenceEnabled || !storageAdapter) {
+      setHasSavedProgress(false);
+      return;
+    }
+    const checkSavedProgress = async () => {
+      try {
+        const savedProgress = await loadTourProgress(storageAdapter, tourId);
+        if (savedProgress) {
+          // Check if progress is expired
+          if (maxAge && Date.now() - savedProgress.timestamp > maxAge) {
+            await clearTourProgress(storageAdapter, tourId);
+            setHasSavedProgress(false);
+          } else {
+            setHasSavedProgress(true);
+          }
+        } else {
+          setHasSavedProgress(false);
+        }
+      } catch {
+        setHasSavedProgress(false);
+      }
+    };
+    checkSavedProgress();
+  }, [isPersistenceEnabled, storageAdapter, tourId, maxAge]);
+
   // --- Shared Values for Animations (Zero Bridge Crossing) ---
   // Initialize off-screen or 0
   const targetX = useSharedValue(0);
@@ -30,6 +149,35 @@ export const TourProvider = ({
   const targetHeight = useSharedValue(0);
   const targetRadius = useSharedValue(10); // Default border radius
   const opacity = useSharedValue(0); // 0 = hidden, 1 = visible
+  const zoneBorderWidth = useSharedValue(DEFAULT_ZONE_STYLE.borderWidth);
+
+  // Track current step's resolved zone style
+  const currentZoneStyle = useMemo(() => {
+    if (!currentStep) return null;
+    const step = steps[currentStep];
+    if (!step) return null;
+    return resolveZoneStyle(config?.zoneStyle, step.zoneStyle);
+  }, [currentStep, steps, config?.zoneStyle]);
+
+  // Helper to get spring config for a step (supports per-step overrides)
+  const getSpringConfigForStep = useCallback(stepKey => {
+    const step = steps[stepKey];
+    const stepStyle = step?.zoneStyle;
+    const baseConfig = config?.springConfig ?? DEFAULT_SPRING_CONFIG;
+
+    // Allow per-step spring overrides
+    if (stepStyle?.springDamping !== undefined || stepStyle?.springStiffness !== undefined) {
+      return {
+        damping: stepStyle.springDamping ?? baseConfig.damping,
+        stiffness: stepStyle.springStiffness ?? baseConfig.stiffness,
+        mass: baseConfig.mass,
+        overshootClamping: baseConfig.overshootClamping,
+        restDisplacementThreshold: baseConfig.restDisplacementThreshold,
+        restSpeedThreshold: baseConfig.restSpeedThreshold
+      };
+    }
+    return baseConfig;
+  }, [steps, config?.springConfig]);
 
   // Helper to animate to a specific step's layout
   const animateToStep = useCallback(stepKey => {
@@ -40,18 +188,18 @@ export const TourProvider = ({
         console.warn('[TourProvider] Invalid measurements for step:', stepKey, measure);
         return;
       }
-      const springConfig = config?.springConfig ?? DEFAULT_SPRING_CONFIG;
-      targetX.value = withSpring(measure.x, springConfig);
-      targetY.value = withSpring(measure.y, springConfig);
-      targetWidth.value = withSpring(measure.width, springConfig);
-      targetHeight.value = withSpring(measure.height, springConfig);
-
-      // If measure result has radius or step meta has radius, use it.
-      // For now defaulting to 10 or meta reading if we passed it back in measure?
-      // Let's assume meta is in steps state.
       const step = steps[stepKey];
-      const radius = step?.meta?.borderRadius ?? 10;
-      targetRadius.value = withSpring(radius, springConfig);
+      const resolvedStyle = resolveZoneStyle(config?.zoneStyle, step?.zoneStyle);
+      const springConfig = getSpringConfigForStep(stepKey);
+
+      // Compute zone geometry based on style (handles shapes and padding)
+      const geo = computeZoneGeometry(measure, resolvedStyle);
+      targetX.value = withSpring(geo.x, springConfig);
+      targetY.value = withSpring(geo.y, springConfig);
+      targetWidth.value = withSpring(geo.width, springConfig);
+      targetHeight.value = withSpring(geo.height, springConfig);
+      targetRadius.value = withSpring(geo.borderRadius, springConfig);
+      zoneBorderWidth.value = withSpring(resolvedStyle.borderWidth, springConfig);
 
       // Ensure overlay is visible
       opacity.value = withTiming(backdropOpacity, {
@@ -60,12 +208,18 @@ export const TourProvider = ({
     } else {
       console.warn('[TourProvider] No measurements found for step:', stepKey);
     }
-  }, [backdropOpacity, targetX, targetY, targetWidth, targetHeight, targetRadius, opacity, config?.springConfig, steps]);
+  }, [backdropOpacity, targetX, targetY, targetWidth, targetHeight, targetRadius, zoneBorderWidth, opacity, getSpringConfigForStep, steps, config?.zoneStyle]);
   const registerStep = useCallback(step => {
     setSteps(prev => ({
       ...prev,
       [step.key]: step
     }));
+    // If this step was pending (waiting for cross-screen mount), activate it
+    if (pendingStepRef.current === step.key) {
+      pendingStepRef.current = null;
+      setCurrentStep(step.key);
+      // Overlay opacity will be set by updateStepLayout when measurement arrives
+    }
   }, []);
   const unregisterStep = useCallback(key => {
     setSteps(prev => {
@@ -85,25 +239,35 @@ export const TourProvider = ({
     measurements.current[key] = measure;
     // If this step is currently active (e.g. scroll happened or resize), update shared values on the fly
     if (currentStep === key) {
-      const springConfig = config?.springConfig ?? DEFAULT_SPRING_CONFIG;
-      targetX.value = withSpring(measure.x, springConfig);
-      targetY.value = withSpring(measure.y, springConfig);
-      targetWidth.value = withSpring(measure.width, springConfig);
-      targetHeight.value = withSpring(measure.height, springConfig);
-
-      // Update radius if available
       const step = steps[key];
-      const radius = step?.meta?.borderRadius ?? 10;
-      targetRadius.value = withSpring(radius, springConfig);
+      const resolvedStyle = resolveZoneStyle(config?.zoneStyle, step?.zoneStyle);
+      const springConfig = getSpringConfigForStep(key);
+
+      // Compute zone geometry based on style
+      const geo = computeZoneGeometry(measure, resolvedStyle);
+      targetX.value = withSpring(geo.x, springConfig);
+      targetY.value = withSpring(geo.y, springConfig);
+      targetWidth.value = withSpring(geo.width, springConfig);
+      targetHeight.value = withSpring(geo.height, springConfig);
+      targetRadius.value = withSpring(geo.borderRadius, springConfig);
+      zoneBorderWidth.value = withSpring(resolvedStyle.borderWidth, springConfig);
 
       // Ensure overlay is visible (fixes race condition where start() was called before measure)
       opacity.value = withTiming(backdropOpacity, {
         duration: 300
       });
     }
-  }, [currentStep, targetX, targetY, targetWidth, targetHeight, targetRadius, opacity, backdropOpacity, config?.springConfig, steps]);
+  }, [currentStep, targetX, targetY, targetWidth, targetHeight, targetRadius, zoneBorderWidth, opacity, backdropOpacity, getSpringConfigForStep, config?.zoneStyle, steps]);
+
+  // Flatten stepsOrder (supports both string[] and Record<string, string[]>)
+  const flatStepsOrder = useMemo(() => {
+    if (!initialStepsOrder) return undefined;
+    if (Array.isArray(initialStepsOrder)) return initialStepsOrder;
+    // Object format: flatten values in key order
+    return Object.values(initialStepsOrder).flat();
+  }, [initialStepsOrder]);
   const getOrderedSteps = useCallback(() => {
-    if (initialStepsOrder) return initialStepsOrder;
+    if (flatStepsOrder) return flatStepsOrder;
     // If order property exists on steps, sort by it.
     const stepKeys = Object.keys(steps);
     if (stepKeys.length > 0) {
@@ -114,64 +278,149 @@ export const TourProvider = ({
       }
     }
     return stepKeys;
-  }, [initialStepsOrder, steps]);
-  const start = useCallback(stepKey => {
+  }, [flatStepsOrder, steps]);
+
+  // Pending step for cross-screen navigation
+  // When next/prev targets a step that isn't mounted yet, we store it here
+  // and resume when that step's TourZone registers.
+  const pendingStepRef = useRef(null);
+
+  // Save progress when step changes
+  useEffect(() => {
+    if (!isPersistenceEnabled || !storageAdapter || !currentStep) return;
     const ordered = getOrderedSteps();
-    const firstStep = stepKey || ordered[0];
+    const stepIndex = ordered.indexOf(currentStep);
+    if (stepIndex >= 0) {
+      saveTourProgress(storageAdapter, tourId, currentStep, stepIndex).catch(() => {
+        // Silently ignore save errors
+      });
+    }
+  }, [currentStep, isPersistenceEnabled, storageAdapter, tourId, getOrderedSteps]);
+  const start = useCallback(async stepKey => {
+    const ordered = getOrderedSteps();
+    let targetStep = stepKey;
+
+    // If no specific step and autoResume is enabled, try to restore from storage
+    if (!targetStep && isPersistenceEnabled && storageAdapter && autoResume) {
+      try {
+        const savedProgress = await loadTourProgress(storageAdapter, tourId);
+        if (savedProgress) {
+          // Check if progress is expired
+          if (maxAge && Date.now() - savedProgress.timestamp > maxAge) {
+            await clearTourProgress(storageAdapter, tourId);
+            setHasSavedProgress(false);
+          } else if (ordered.includes(savedProgress.currentStepKey)) {
+            // Verify the saved step still exists in order
+            targetStep = savedProgress.currentStepKey;
+          }
+        }
+      } catch {
+        // Ignore load errors, start from beginning
+      }
+    }
+    const firstStep = targetStep || ordered[0];
     if (firstStep) {
-      setCurrentStep(firstStep);
-      // We need to wait for layout if it's not ready?
-      // Assuming layout is ready since components are mounted.
-      // But if we start immediately on mount, might be tricky.
-      // For now assume standard flow.
-      // requestAnimationFrame to ensure state update propagates if needed,
-      // but simple call is usually fine.
-      setTimeout(() => animateToStep(firstStep), 0);
+      // Check if the target step is registered (mounted)
+      if (steps[firstStep]) {
+        setCurrentStep(firstStep);
+        setTimeout(() => animateToStep(firstStep), 0);
+      } else {
+        // Step not mounted yet (on a different screen) - set as pending
+        pendingStepRef.current = firstStep;
+        // Don't set currentStep or opacity - wait for TourZone to mount
+      }
     }
-  }, [getOrderedSteps, animateToStep]);
+  }, [getOrderedSteps, animateToStep, steps, isPersistenceEnabled, storageAdapter, autoResume, tourId, maxAge]);
   const stop = useCallback(() => {
     setCurrentStep(null);
     opacity.value = withTiming(0, {
       duration: 300
     });
+    // Note: We do NOT clear progress on stop - only on complete or explicit clearProgress
   }, [opacity]);
+
+  // Clear progress helper
+  const clearProgress = useCallback(async () => {
+    if (!isPersistenceEnabled || !storageAdapter) return;
+    try {
+      await clearTourProgress(storageAdapter, tourId);
+      setHasSavedProgress(false);
+    } catch {
+      // Silently ignore clear errors
+    }
+  }, [isPersistenceEnabled, storageAdapter, tourId]);
   const next = useCallback(() => {
     if (!currentStep) return;
+
+    // Block navigation if current step has completed === false
+    const currentStepData = steps[currentStep];
+    if (currentStepData?.completed === false) {
+      return;
+    }
     const ordered = getOrderedSteps();
     const currentIndex = ordered.indexOf(currentStep);
     if (currentIndex < ordered.length - 1) {
-      const nextStep = ordered[currentIndex + 1];
-      if (nextStep) {
-        setCurrentStep(nextStep);
-        // Don't call animateToStep here - it uses cached measurements that may be stale
-        // after scroll. The useFrameCallback in TourZone will handle position tracking
-        // using measure() with correct screen coordinates (pageX/pageY).
-        // Just ensure the overlay is visible.
-        opacity.value = withTiming(backdropOpacity, {
-          duration: 300
-        });
+      const nextStepKey = ordered[currentIndex + 1];
+      if (nextStepKey) {
+        // Check if the next step is registered (mounted)
+        if (steps[nextStepKey]) {
+          setCurrentStep(nextStepKey);
+          // Don't call animateToStep here - it uses cached measurements that may be stale
+          // after scroll. The useFrameCallback in TourZone will handle position tracking
+          // using measure() with correct screen coordinates (pageX/pageY).
+          // Just ensure the overlay is visible.
+          opacity.value = withTiming(backdropOpacity, {
+            duration: 300
+          });
+        } else {
+          // Step not mounted yet (on a different screen) - set as pending
+          pendingStepRef.current = nextStepKey;
+          setCurrentStep(null);
+          opacity.value = withTiming(0, {
+            duration: 300
+          });
+          // Persist pending step so it can be resumed
+          if (isPersistenceEnabled && storageAdapter) {
+            const stepIndex = ordered.indexOf(nextStepKey);
+            saveTourProgress(storageAdapter, tourId, nextStepKey, stepIndex).catch(() => {});
+          }
+        }
       } else {
         stop();
       }
     } else {
-      stop(); // End of tour
+      // End of tour - clear progress if configured
+      if (isPersistenceEnabled && clearOnComplete && storageAdapter) {
+        clearTourProgress(storageAdapter, tourId).then(() => setHasSavedProgress(false)).catch(() => {});
+      }
+      stop();
     }
-  }, [currentStep, getOrderedSteps, stop, opacity, backdropOpacity]);
+  }, [currentStep, steps, getOrderedSteps, stop, opacity, backdropOpacity, isPersistenceEnabled, clearOnComplete, storageAdapter, tourId]);
   const prev = useCallback(() => {
     if (!currentStep) return;
     const ordered = getOrderedSteps();
     const currentIndex = ordered.indexOf(currentStep);
     if (currentIndex > 0) {
-      const prevStep = ordered[currentIndex - 1];
-      if (prevStep) {
-        setCurrentStep(prevStep);
-        // Don't call animateToStep - let useFrameCallback handle position tracking
-        opacity.value = withTiming(backdropOpacity, {
-          duration: 300
-        });
+      const prevStepKey = ordered[currentIndex - 1];
+      if (prevStepKey) {
+        // Check if the previous step is registered (mounted)
+        if (steps[prevStepKey]) {
+          setCurrentStep(prevStepKey);
+          // Don't call animateToStep - let useFrameCallback handle position tracking
+          opacity.value = withTiming(backdropOpacity, {
+            duration: 300
+          });
+        } else {
+          // Step not mounted (on a different screen) - set as pending
+          pendingStepRef.current = prevStepKey;
+          setCurrentStep(null);
+          opacity.value = withTiming(0, {
+            duration: 300
+          });
+        }
       }
     }
-  }, [currentStep, getOrderedSteps, opacity, backdropOpacity]);
+  }, [currentStep, steps, getOrderedSteps, opacity, backdropOpacity]);
   const scrollViewRef = useAnimatedRef();
   const setScrollViewRef = useCallback(_ref => {
     // If user passes a ref, we might want to sync it?
@@ -192,6 +441,9 @@ export const TourProvider = ({
     // Let's make `setScrollViewRef` actually do something if possible, or just document "Use exposed scrollViewRef".
     // For now, let's just return the `scrollViewRef` we created.
   }, []);
+
+  // Expose ordered step keys for tooltip and external use
+  const orderedStepKeys = useMemo(() => getOrderedSteps(), [getOrderedSteps]);
   const value = useMemo(() => ({
     start,
     stop,
@@ -207,12 +459,17 @@ export const TourProvider = ({
     targetHeight,
     targetRadius,
     opacity,
+    zoneBorderWidth,
     steps,
     config,
     containerRef,
     scrollViewRef,
-    setScrollViewRef
-  }), [start, stop, next, prev, registerStep, unregisterStep, updateStepLayout, currentStep, targetX, targetY, targetWidth, targetHeight, targetRadius, opacity, steps, config, containerRef, scrollViewRef, setScrollViewRef]);
+    setScrollViewRef,
+    currentZoneStyle,
+    clearProgress,
+    hasSavedProgress,
+    orderedStepKeys
+  }), [start, stop, next, prev, registerStep, unregisterStep, updateStepLayout, currentStep, targetX, targetY, targetWidth, targetHeight, targetRadius, opacity, zoneBorderWidth, steps, config, containerRef, scrollViewRef, setScrollViewRef, currentZoneStyle, clearProgress, hasSavedProgress, orderedStepKeys]);
   return /*#__PURE__*/_jsx(TourContext.Provider, {
     value: value,
     children: /*#__PURE__*/_jsxs(AnimatedView, {