@korsolutions/guidon 1.0.0

package/dist/index.js

@@ -0,0 +1,1098 @@
+'use strict';
+
+var react = require('react');
+var reactNative = require('react-native');
+var zustand = require('zustand');
+var jsxRuntime = require('react/jsx-runtime');
+var Animated = require('react-native-reanimated');
+var Svg = require('react-native-svg');
+var reactNativeSafeAreaContext = require('react-native-safe-area-context');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Animated__default = /*#__PURE__*/_interopDefault(Animated);
+var Svg__default = /*#__PURE__*/_interopDefault(Svg);
+
+// src/components/GuidonTarget.tsx
+var initialState = {
+  config: null,
+  isActive: false,
+  currentStepIndex: 0,
+  isCompleted: false,
+  targetMeasurements: {},
+  isLoading: false,
+  error: null
+};
+var useGuidonStore = zustand.create((set, get) => ({
+  ...initialState,
+  configure: (config) => {
+    set({ config, currentStepIndex: 0, isCompleted: false });
+  },
+  start: () => {
+    const { config } = get();
+    if (!config || config.steps.length === 0) return;
+    set({ isActive: true, currentStepIndex: 0, isCompleted: false });
+    const firstStep = config.steps[0];
+    firstStep.onStepEnter?.();
+    config.onStepChange?.(0, firstStep);
+  },
+  next: () => {
+    const { config, currentStepIndex, isActive } = get();
+    if (!config || !isActive) return;
+    const currentStep = config.steps[currentStepIndex];
+    currentStep?.onStepExit?.();
+    if (currentStepIndex < config.steps.length - 1) {
+      const nextIndex = currentStepIndex + 1;
+      const nextStep = config.steps[nextIndex];
+      set({ currentStepIndex: nextIndex });
+      nextStep.onStepEnter?.();
+      config.onStepChange?.(nextIndex, nextStep);
+    } else {
+      get().complete();
+    }
+  },
+  previous: () => {
+    const { config, currentStepIndex, isActive } = get();
+    if (!config || !isActive || currentStepIndex === 0) return;
+    const currentStep = config.steps[currentStepIndex];
+    currentStep?.onStepExit?.();
+    const prevIndex = currentStepIndex - 1;
+    const prevStep = config.steps[prevIndex];
+    set({ currentStepIndex: prevIndex });
+    prevStep.onStepEnter?.();
+    config.onStepChange?.(prevIndex, prevStep);
+  },
+  goToStep: (index) => {
+    const { config, currentStepIndex, isActive } = get();
+    if (!config || !isActive) return;
+    if (index < 0 || index >= config.steps.length) return;
+    const currentStep = config.steps[currentStepIndex];
+    currentStep?.onStepExit?.();
+    const targetStep = config.steps[index];
+    set({ currentStepIndex: index });
+    targetStep.onStepEnter?.();
+    config.onStepChange?.(index, targetStep);
+  },
+  skip: () => {
+    const { config, currentStepIndex } = get();
+    if (!config) return;
+    const currentStep = config.steps[currentStepIndex];
+    currentStep?.onStepExit?.();
+    set({ isActive: false, isCompleted: false });
+    config.onSkip?.();
+  },
+  complete: () => {
+    const { config, currentStepIndex } = get();
+    if (!config) return;
+    const currentStep = config.steps[currentStepIndex];
+    currentStep?.onStepExit?.();
+    set({ isActive: false, isCompleted: true });
+    config.onComplete?.();
+  },
+  reset: () => {
+    set(initialState);
+  },
+  registerTarget: (targetId, measurements) => {
+    set((state) => ({
+      targetMeasurements: {
+        ...state.targetMeasurements,
+        [targetId]: measurements
+      }
+    }));
+  },
+  unregisterTarget: (targetId) => {
+    set((state) => {
+      const { [targetId]: _, ...rest } = state.targetMeasurements;
+      return { targetMeasurements: rest };
+    });
+  },
+  setLoading: (isLoading) => {
+    set({ isLoading });
+  },
+  setError: (error) => {
+    set({ error });
+  }
+}));
+var Guidon = {
+  /**
+   * Configure the walkthrough with steps and options
+   */
+  configure: (config) => {
+    useGuidonStore.getState().configure(config);
+  },
+  /**
+   * Start the walkthrough
+   */
+  start: () => {
+    useGuidonStore.getState().start();
+  },
+  /**
+   * Go to the next step
+   */
+  next: () => {
+    useGuidonStore.getState().next();
+  },
+  /**
+   * Go to the previous step
+   */
+  previous: () => {
+    useGuidonStore.getState().previous();
+  },
+  /**
+   * Go to a specific step by index
+   */
+  goToStep: (index) => {
+    useGuidonStore.getState().goToStep(index);
+  },
+  /**
+   * Skip the walkthrough
+   */
+  skip: () => {
+    useGuidonStore.getState().skip();
+  },
+  /**
+   * Complete the walkthrough
+   */
+  complete: () => {
+    useGuidonStore.getState().complete();
+  },
+  /**
+   * Reset the walkthrough to initial state
+   */
+  reset: () => {
+    useGuidonStore.getState().reset();
+  },
+  /**
+   * Check if the walkthrough is currently active
+   */
+  isActive: () => {
+    return useGuidonStore.getState().isActive;
+  },
+  /**
+   * Check if the walkthrough has been completed
+   */
+  isCompleted: () => {
+    return useGuidonStore.getState().isCompleted;
+  },
+  /**
+   * Get the current step index
+   */
+  getCurrentStepIndex: () => {
+    return useGuidonStore.getState().currentStepIndex;
+  },
+  /**
+   * Get the current step
+   */
+  getCurrentStep: () => {
+    const state = useGuidonStore.getState();
+    return state.config?.steps[state.currentStepIndex] ?? null;
+  },
+  /**
+   * Get all steps
+   */
+  getSteps: () => {
+    return useGuidonStore.getState().config?.steps ?? [];
+  },
+  /**
+   * Subscribe to store changes
+   */
+  subscribe: useGuidonStore.subscribe
+};
+var useGuidonActive = () => useGuidonStore((state) => state.isActive);
+var useGuidonStep = () => useGuidonStore((state) => {
+  if (!state.config || !state.isActive) return null;
+  return state.config.steps[state.currentStepIndex];
+});
+var useGuidonProgress = () => useGuidonStore((state) => ({
+  currentStep: state.currentStepIndex + 1,
+  totalSteps: state.config?.steps.length ?? 0,
+  percentage: state.config ? (state.currentStepIndex + 1) / state.config.steps.length * 100 : 0
+}));
+var useTargetMeasurements = (targetId) => useGuidonStore(
+  (state) => state.targetMeasurements[targetId]
+);
+function GuidonTarget({
+  children,
+  targetId,
+  active = true
+}) {
+  const viewRef = react.useRef(null);
+  const registerTarget = useGuidonStore((state) => state.registerTarget);
+  const unregisterTarget = useGuidonStore((state) => state.unregisterTarget);
+  const isActive = useGuidonStore((state) => state.isActive);
+  const config = useGuidonStore((state) => state.config);
+  const isTargetNeeded = isActive && config?.steps.some((step) => step.targetId === targetId);
+  const measureElement = react.useCallback(() => {
+    if (!viewRef.current || !active || !isTargetNeeded) return;
+    if (reactNative.Platform.OS === "web") {
+      const element = viewRef.current;
+      if (element && typeof element.getBoundingClientRect === "function") {
+        const rect = element.getBoundingClientRect();
+        const measurements = {
+          x: rect.left + window.scrollX,
+          y: rect.top + window.scrollY,
+          width: rect.width,
+          height: rect.height
+        };
+        registerTarget(targetId, measurements);
+      }
+    } else {
+      viewRef.current.measureInWindow((x, y, width, height) => {
+        if (width > 0 && height > 0) {
+          const measurements = { x, y, width, height };
+          registerTarget(targetId, measurements);
+        }
+      });
+    }
+  }, [targetId, active, isTargetNeeded, registerTarget]);
+  const handleLayout = react.useCallback(
+    (_event) => {
+      requestAnimationFrame(() => {
+        measureElement();
+      });
+    },
+    [measureElement]
+  );
+  react.useEffect(() => {
+    if (isTargetNeeded) {
+      const timer = setTimeout(() => {
+        measureElement();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [isTargetNeeded, measureElement]);
+  react.useEffect(() => {
+    if (reactNative.Platform.OS !== "web" || !isTargetNeeded) return;
+    const handleScroll = () => {
+      measureElement();
+    };
+    window.addEventListener("scroll", handleScroll, true);
+    window.addEventListener("resize", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll, true);
+      window.removeEventListener("resize", handleScroll);
+    };
+  }, [isTargetNeeded, measureElement]);
+  react.useEffect(() => {
+    return () => {
+      unregisterTarget(targetId);
+    };
+  }, [targetId, unregisterTarget]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ref: viewRef,
+      onLayout: handleLayout,
+      collapsable: false,
+      style: { alignSelf: "flex-start" },
+      children
+    }
+  );
+}
+var AnimatedSvg = Animated__default.default.createAnimatedComponent(Svg__default.default);
+var DEFAULT_THEME = {
+  backdropColor: "#000000",
+  backdropOpacity: 0.75,
+  spotlightBorderRadius: 8,
+  spotlightPadding: 8
+};
+function GuidonOverlay({
+  theme = {},
+  animationDuration = 300,
+  onBackdropPress
+}) {
+  const isActive = useGuidonStore((state) => state.isActive);
+  const config = useGuidonStore((state) => state.config);
+  const currentStepIndex = useGuidonStore((state) => state.currentStepIndex);
+  const targetMeasurements = useGuidonStore((state) => state.targetMeasurements);
+  const mergedTheme = { ...DEFAULT_THEME, ...theme };
+  const { width: screenWidth, height: screenHeight } = reactNative.Dimensions.get("window");
+  const currentStep = config?.steps[currentStepIndex];
+  const currentTargetId = currentStep?.targetId;
+  const measurements = currentTargetId ? targetMeasurements[currentTargetId] : void 0;
+  const spotlight = react.useMemo(() => {
+    if (!measurements) {
+      return { x: 0, y: 0, width: 0, height: 0 };
+    }
+    return {
+      x: measurements.x - mergedTheme.spotlightPadding,
+      y: measurements.y - mergedTheme.spotlightPadding,
+      width: measurements.width + mergedTheme.spotlightPadding * 2,
+      height: measurements.height + mergedTheme.spotlightPadding * 2
+    };
+  }, [measurements, mergedTheme.spotlightPadding]);
+  const animatedStyle = Animated.useAnimatedStyle(() => {
+    return {
+      opacity: Animated.withTiming(isActive && measurements ? 1 : 0, {
+        duration: animationDuration,
+        easing: Animated.Easing.inOut(Animated.Easing.ease)
+      })
+    };
+  }, [isActive, measurements, animationDuration]);
+  if (!isActive || !measurements) {
+    return null;
+  }
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.TouchableWithoutFeedback, { onPress: onBackdropPress, children: /* @__PURE__ */ jsxRuntime.jsx(Animated__default.default.View, { style: [styles.container, animatedStyle], children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          backgroundColor: mergedTheme.backdropColor,
+          opacity: mergedTheme.backdropOpacity,
+          clipPath: `polygon(
+                0% 0%,
+                0% 100%,
+                ${spotlight.x}px 100%,
+                ${spotlight.x}px ${spotlight.y}px,
+                ${spotlight.x + spotlight.width}px ${spotlight.y}px,
+                ${spotlight.x + spotlight.width}px ${spotlight.y + spotlight.height}px,
+                ${spotlight.x}px ${spotlight.y + spotlight.height}px,
+                ${spotlight.x}px 100%,
+                100% 100%,
+                100% 0%
+              )`
+        }
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.TouchableWithoutFeedback, { onPress: onBackdropPress, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    AnimatedSvg,
+    {
+      style: [styles.container, animatedStyle],
+      width: screenWidth,
+      height: screenHeight,
+      viewBox: `0 0 ${screenWidth} ${screenHeight}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Svg.Defs, { children: /* @__PURE__ */ jsxRuntime.jsxs(Svg.Mask, { id: "spotlight-mask", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Svg.Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: "white" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Svg.Rect,
+            {
+              x: spotlight.x,
+              y: spotlight.y,
+              width: spotlight.width,
+              height: spotlight.height,
+              rx: mergedTheme.spotlightBorderRadius,
+              ry: mergedTheme.spotlightBorderRadius,
+              fill: "black"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Svg.G, { mask: "url(#spotlight-mask)", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Svg.Rect,
+          {
+            x: "0",
+            y: "0",
+            width: "100%",
+            height: "100%",
+            fill: mergedTheme.backdropColor,
+            fillOpacity: mergedTheme.backdropOpacity
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+var styles = reactNative.StyleSheet.create({
+  container: {
+    ...reactNative.StyleSheet.absoluteFillObject,
+    zIndex: 999
+  }
+});
+var DEFAULT_THEME2 = {
+  tooltipBackgroundColor: "#ffffff",
+  tooltipBorderColor: "#e5e5e5",
+  tooltipBorderRadius: 12,
+  titleColor: "#1a1a1a",
+  descriptionColor: "#666666",
+  primaryColor: "#007AFF",
+  mutedColor: "#999999",
+  spotlightPadding: 8
+};
+var TOOLTIP_MARGIN = 16;
+var TOOLTIP_WIDTH = 300;
+function GuidonTooltip({
+  theme = {},
+  animationDuration = 300,
+  renderCustomTooltip,
+  labels = {}
+}) {
+  const insets = reactNativeSafeAreaContext.useSafeAreaInsets();
+  const { width: screenWidth, height: screenHeight } = reactNative.Dimensions.get("window");
+  const isActive = useGuidonStore((state) => state.isActive);
+  const config = useGuidonStore((state) => state.config);
+  const currentStepIndex = useGuidonStore((state) => state.currentStepIndex);
+  const targetMeasurements = useGuidonStore((state) => state.targetMeasurements);
+  const next = useGuidonStore((state) => state.next);
+  const previous = useGuidonStore((state) => state.previous);
+  const skip = useGuidonStore((state) => state.skip);
+  const mergedTheme = { ...DEFAULT_THEME2, ...theme };
+  const mergedLabels = {
+    next: labels.next ?? "Next",
+    previous: labels.previous ?? "Back",
+    skip: labels.skip ?? "Skip",
+    finish: labels.finish ?? "Finish",
+    stepOf: labels.stepOf ?? ((c, t) => `${c} of ${t}`)
+  };
+  const currentStep = config?.steps[currentStepIndex];
+  const totalSteps = config?.steps.length ?? 0;
+  const isFirstStep = currentStepIndex === 0;
+  const isLastStep = currentStepIndex === totalSteps - 1;
+  const measurements = currentStep?.targetId ? targetMeasurements[currentStep.targetId] : void 0;
+  const tooltipPosition = react.useMemo(() => {
+    if (!measurements) {
+      return { top: screenHeight / 2, left: screenWidth / 2 - TOOLTIP_WIDTH / 2 };
+    }
+    measurements.y + measurements.height / 2;
+    const targetBottom = measurements.y + measurements.height + mergedTheme.spotlightPadding;
+    const targetTop = measurements.y - mergedTheme.spotlightPadding;
+    let position = currentStep?.tooltipPosition ?? "auto";
+    if (position === "auto") {
+      const spaceAbove = targetTop - insets.top;
+      const spaceBelow = screenHeight - targetBottom - insets.bottom;
+      position = spaceBelow >= 200 ? "bottom" : spaceAbove >= 200 ? "top" : "bottom";
+    }
+    let top;
+    let left = Math.max(
+      TOOLTIP_MARGIN,
+      Math.min(
+        measurements.x + measurements.width / 2 - TOOLTIP_WIDTH / 2,
+        screenWidth - TOOLTIP_WIDTH - TOOLTIP_MARGIN
+      )
+    );
+    if (position === "top") {
+      top = targetTop - TOOLTIP_MARGIN - 150;
+    } else {
+      top = targetBottom + TOOLTIP_MARGIN;
+    }
+    top = Math.max(insets.top + TOOLTIP_MARGIN, Math.min(top, screenHeight - 200 - insets.bottom));
+    return { top, left, position };
+  }, [measurements, screenWidth, screenHeight, insets, currentStep?.tooltipPosition, mergedTheme.spotlightPadding]);
+  const animatedStyle = Animated.useAnimatedStyle(() => {
+    return {
+      opacity: Animated.withTiming(isActive && measurements ? 1 : 0, {
+        duration: animationDuration,
+        easing: Animated.Easing.inOut(Animated.Easing.ease)
+      }),
+      transform: [
+        {
+          translateY: Animated.withSpring(isActive && measurements ? 0 : 20, {
+            damping: 15,
+            stiffness: 150
+          })
+        }
+      ]
+    };
+  }, [isActive, measurements, animationDuration]);
+  if (!isActive || !currentStep || !measurements) {
+    return null;
+  }
+  if (renderCustomTooltip) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Animated__default.default.View,
+      {
+        style: [
+          styles2.tooltipContainer,
+          {
+            top: tooltipPosition.top,
+            left: tooltipPosition.left,
+            width: TOOLTIP_WIDTH
+          },
+          animatedStyle
+        ],
+        children: renderCustomTooltip({
+          step: currentStep,
+          currentIndex: currentStepIndex,
+          totalSteps,
+          onNext: next,
+          onPrevious: previous,
+          onSkip: skip
+        })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Animated__default.default.View,
+    {
+      style: [
+        styles2.tooltipContainer,
+        {
+          top: tooltipPosition.top,
+          left: tooltipPosition.left,
+          width: TOOLTIP_WIDTH,
+          backgroundColor: mergedTheme.tooltipBackgroundColor,
+          borderColor: mergedTheme.tooltipBorderColor,
+          borderRadius: mergedTheme.tooltipBorderRadius
+        },
+        animatedStyle
+      ],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.progressContainer, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.progressText, { color: mergedTheme.mutedColor }], children: mergedLabels.stepOf(currentStepIndex + 1, totalSteps) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.progressDots, children: Array.from({ length: totalSteps }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.View,
+            {
+              style: [
+                styles2.progressDot,
+                {
+                  backgroundColor: i === currentStepIndex ? mergedTheme.primaryColor : mergedTheme.mutedColor,
+                  opacity: i === currentStepIndex ? 1 : 0.3
+                }
+              ]
+            },
+            i
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.content, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.title, { color: mergedTheme.titleColor }], children: currentStep.title }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.description, { color: mergedTheme.descriptionColor }], children: currentStep.description }),
+          currentStep.customContent
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.buttonContainer, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.TouchableOpacity, { onPress: skip, style: styles2.skipButton, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.skipText, { color: mergedTheme.mutedColor }], children: mergedLabels.skip }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.navButtons, children: [
+            !isFirstStep && /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.TouchableOpacity,
+              {
+                onPress: previous,
+                style: [styles2.navButton, styles2.backButton],
+                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.backButtonText, { color: mergedTheme.primaryColor }], children: mergedLabels.previous })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.TouchableOpacity,
+              {
+                onPress: next,
+                style: [
+                  styles2.navButton,
+                  styles2.nextButton,
+                  { backgroundColor: mergedTheme.primaryColor }
+                ],
+                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.nextButtonText, children: isLastStep ? mergedLabels.finish : mergedLabels.next })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var styles2 = reactNative.StyleSheet.create({
+  tooltipContainer: {
+    position: "absolute",
+    zIndex: 1e3,
+    borderWidth: 1,
+    padding: 16,
+    ...reactNative.Platform.select({
+      ios: {
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.15,
+        shadowRadius: 12
+      },
+      android: {
+        elevation: 8
+      },
+      web: {
+        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)"
+      }
+    })
+  },
+  progressContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 12
+  },
+  progressText: {
+    fontSize: 12,
+    fontWeight: "500"
+  },
+  progressDots: {
+    flexDirection: "row",
+    gap: 4
+  },
+  progressDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3
+  },
+  content: {
+    marginBottom: 16
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "600",
+    marginBottom: 8
+  },
+  description: {
+    fontSize: 14,
+    lineHeight: 20
+  },
+  buttonContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  skipButton: {
+    paddingVertical: 8,
+    paddingHorizontal: 4
+  },
+  skipText: {
+    fontSize: 14
+  },
+  navButtons: {
+    flexDirection: "row",
+    gap: 8
+  },
+  navButton: {
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 8
+  },
+  backButton: {
+    backgroundColor: "transparent"
+  },
+  backButtonText: {
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  nextButton: {},
+  nextButtonText: {
+    color: "#ffffff",
+    fontSize: 14,
+    fontWeight: "600"
+  }
+});
+function useGuidonPersistence(adapter, guidonId) {
+  const [progress, setProgress] = react.useState(null);
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  react.useEffect(() => {
+    if (!adapter) {
+      setIsLoading(false);
+      return;
+    }
+    let mounted = true;
+    const loadProgress = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+        const data = await adapter.loadProgress(guidonId);
+        if (mounted) {
+          setProgress(data);
+        }
+      } catch (err) {
+        if (mounted) {
+          setError(err instanceof Error ? err.message : "Failed to load progress");
+        }
+      } finally {
+        if (mounted) {
+          setIsLoading(false);
+        }
+      }
+    };
+    loadProgress();
+    return () => {
+      mounted = false;
+    };
+  }, [adapter, guidonId]);
+  const saveProgress = react.useCallback(
+    async (newProgress) => {
+      if (!adapter) return;
+      const fullProgress = {
+        ...newProgress,
+        guidonId
+      };
+      try {
+        setError(null);
+        await adapter.saveProgress(fullProgress);
+        setProgress(fullProgress);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to save progress");
+        throw err;
+      }
+    },
+    [adapter, guidonId]
+  );
+  const clearProgress = react.useCallback(async () => {
+    if (!adapter?.clearProgress) return;
+    try {
+      setError(null);
+      await adapter.clearProgress(guidonId);
+      setProgress(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to clear progress");
+      throw err;
+    }
+  }, [adapter, guidonId]);
+  const markCompleted = react.useCallback(async () => {
+    const currentCount = progress?.completionCount ?? 0;
+    await saveProgress({
+      completed: true,
+      completedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      completionCount: currentCount + 1
+    });
+  }, [saveProgress, progress?.completionCount]);
+  const markStepViewed = react.useCallback(
+    async (stepIndex) => {
+      await saveProgress({
+        completed: progress?.completed ?? false,
+        lastStepIndex: stepIndex,
+        completedAt: progress?.completedAt,
+        completionCount: progress?.completionCount
+      });
+    },
+    [saveProgress, progress]
+  );
+  return {
+    progress,
+    isLoading,
+    error,
+    isCompleted: progress?.completed ?? false,
+    hasStarted: progress !== null,
+    saveProgress,
+    clearProgress,
+    markCompleted,
+    markStepViewed
+  };
+}
+function useShouldShowGuidon(adapter, guidonId, options) {
+  const { progress, isLoading } = useGuidonPersistence(adapter, guidonId);
+  const [shouldShow, setShouldShow] = react.useState(false);
+  const [isChecking, setIsChecking] = react.useState(true);
+  react.useEffect(() => {
+    if (isLoading) return;
+    const checkCondition = async () => {
+      setIsChecking(true);
+      if (options?.forceShow) {
+        setShouldShow(true);
+        setIsChecking(false);
+        return;
+      }
+      if (progress?.completed) {
+        setShouldShow(false);
+        setIsChecking(false);
+        return;
+      }
+      if (options?.additionalCondition) {
+        try {
+          const result = await options.additionalCondition();
+          setShouldShow(result);
+        } catch {
+          setShouldShow(true);
+        }
+      } else {
+        setShouldShow(true);
+      }
+      setIsChecking(false);
+    };
+    checkCondition();
+  }, [isLoading, progress?.completed, options?.forceShow, options?.additionalCondition]);
+  return {
+    shouldShow,
+    isChecking: isLoading || isChecking,
+    isCompleted: progress?.completed ?? false
+  };
+}
+var GuidonContext = react.createContext(null);
+function useGuidonContext() {
+  const context = react.useContext(GuidonContext);
+  if (!context) {
+    throw new Error("useGuidonContext must be used within a GuidonProvider");
+  }
+  return context;
+}
+function GuidonProvider({
+  children,
+  config,
+  autoStart = true,
+  shouldStart,
+  persistenceAdapter,
+  portalComponent: Portal,
+  renderTooltip,
+  tooltipLabels,
+  onBackdropPress
+}) {
+  const hasInitialized = react.useRef(false);
+  const isActive = useGuidonStore((state) => state.isActive);
+  const storeIsCompleted = useGuidonStore((state) => state.isCompleted);
+  const currentStepIndex = useGuidonStore((state) => state.currentStepIndex);
+  const configure = useGuidonStore((state) => state.configure);
+  const start = useGuidonStore((state) => state.start);
+  const skip = useGuidonStore((state) => state.skip);
+  const reset = useGuidonStore((state) => state.reset);
+  const {
+    isLoading,
+    isCompleted: persistedCompleted,
+    markCompleted,
+    markStepViewed,
+    clearProgress
+  } = useGuidonPersistence(persistenceAdapter, config.id);
+  const isCompleted = storeIsCompleted || persistedCompleted;
+  react.useEffect(() => {
+    const enhancedConfig = {
+      ...config,
+      onComplete: async () => {
+        config.onComplete?.();
+        if (persistenceAdapter) {
+          await markCompleted();
+        }
+      },
+      onSkip: async () => {
+        config.onSkip?.();
+        if (persistenceAdapter) {
+          await markStepViewed(currentStepIndex);
+        }
+      },
+      onStepChange: async (stepIndex, step) => {
+        config.onStepChange?.(stepIndex, step);
+        if (persistenceAdapter) {
+          await markStepViewed(stepIndex);
+        }
+      }
+    };
+    configure(enhancedConfig);
+  }, [config, configure, persistenceAdapter, markCompleted, markStepViewed, currentStepIndex]);
+  react.useEffect(() => {
+    if (!autoStart || hasInitialized.current || isLoading) return;
+    const checkAndStart = async () => {
+      hasInitialized.current = true;
+      if (persistedCompleted) return;
+      if (shouldStart) {
+        const should = await shouldStart();
+        if (!should) return;
+      }
+      setTimeout(() => {
+        start();
+      }, 500);
+    };
+    checkAndStart();
+  }, [autoStart, isLoading, persistedCompleted, shouldStart, start]);
+  const replay = react.useCallback(async () => {
+    if (persistenceAdapter) {
+      await clearProgress();
+    }
+    reset();
+    hasInitialized.current = false;
+    setTimeout(() => {
+      start();
+    }, 100);
+  }, [persistenceAdapter, clearProgress, reset, start]);
+  const manualStart = react.useCallback(() => {
+    if (!isActive && !isLoading) {
+      start();
+    }
+  }, [isActive, isLoading, start]);
+  const contextValue = {
+    start: manualStart,
+    skip,
+    reset,
+    replay,
+    isActive,
+    isCompleted,
+    isLoading
+  };
+  const overlayContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      GuidonOverlay,
+      {
+        theme: config.theme,
+        animationDuration: config.animationDuration,
+        onBackdropPress
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      GuidonTooltip,
+      {
+        theme: config.theme,
+        animationDuration: config.animationDuration,
+        renderCustomTooltip: renderTooltip,
+        labels: tooltipLabels
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(GuidonContext.Provider, { value: contextValue, children: [
+    children,
+    Portal ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: overlayContent }) : overlayContent
+  ] });
+}
+
+// src/persistence/adapters.ts
+var STORAGE_KEY_PREFIX = "@guidon:";
+var createNoopAdapter = () => ({
+  loadProgress: async () => null,
+  saveProgress: async () => {
+  },
+  loadAllProgress: async () => ({}),
+  clearProgress: async () => {
+  }
+});
+var createMemoryAdapter = () => {
+  const store = {};
+  return {
+    loadProgress: async (guidonId) => store[guidonId] ?? null,
+    saveProgress: async (progress) => {
+      store[progress.guidonId] = progress;
+    },
+    loadAllProgress: async () => ({ ...store }),
+    clearProgress: async (guidonId) => {
+      delete store[guidonId];
+    }
+  };
+};
+var createLocalStorageAdapter = (keyPrefix = STORAGE_KEY_PREFIX) => ({
+  loadProgress: async (guidonId) => {
+    if (typeof window === "undefined" || !window.localStorage) {
+      return null;
+    }
+    try {
+      const data = localStorage.getItem(`${keyPrefix}${guidonId}`);
+      return data ? JSON.parse(data) : null;
+    } catch {
+      return null;
+    }
+  },
+  saveProgress: async (progress) => {
+    if (typeof window === "undefined" || !window.localStorage) {
+      return;
+    }
+    try {
+      localStorage.setItem(
+        `${keyPrefix}${progress.guidonId}`,
+        JSON.stringify(progress)
+      );
+    } catch {
+    }
+  },
+  loadAllProgress: async () => {
+    if (typeof window === "undefined" || !window.localStorage) {
+      return {};
+    }
+    const result = {};
+    try {
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (key?.startsWith(keyPrefix)) {
+          const data = localStorage.getItem(key);
+          if (data) {
+            const progress = JSON.parse(data);
+            result[progress.guidonId] = progress;
+          }
+        }
+      }
+    } catch {
+    }
+    return result;
+  },
+  clearProgress: async (guidonId) => {
+    if (typeof window === "undefined" || !window.localStorage) {
+      return;
+    }
+    try {
+      localStorage.removeItem(`${keyPrefix}${guidonId}`);
+    } catch {
+    }
+  }
+});
+var createAsyncStorageAdapter = (asyncStorage, keyPrefix = STORAGE_KEY_PREFIX) => ({
+  loadProgress: async (guidonId) => {
+    try {
+      const data = await asyncStorage.getItem(`${keyPrefix}${guidonId}`);
+      return data ? JSON.parse(data) : null;
+    } catch {
+      return null;
+    }
+  },
+  saveProgress: async (progress) => {
+    try {
+      await asyncStorage.setItem(
+        `${keyPrefix}${progress.guidonId}`,
+        JSON.stringify(progress)
+      );
+    } catch {
+    }
+  },
+  loadAllProgress: async () => {
+    const result = {};
+    try {
+      const allKeys = await asyncStorage.getAllKeys();
+      const relevantKeys = allKeys.filter((key) => key.startsWith(keyPrefix));
+      const pairs = await asyncStorage.multiGet(relevantKeys);
+      for (const [, value] of pairs) {
+        if (value) {
+          const progress = JSON.parse(value);
+          result[progress.guidonId] = progress;
+        }
+      }
+    } catch {
+    }
+    return result;
+  },
+  clearProgress: async (guidonId) => {
+    try {
+      await asyncStorage.removeItem(`${keyPrefix}${guidonId}`);
+    } catch {
+    }
+  }
+});
+var createApiAdapter = (handlers) => {
+  const noopAdapter = createNoopAdapter();
+  return {
+    loadProgress: handlers.loadProgress ?? noopAdapter.loadProgress,
+    saveProgress: handlers.saveProgress ?? noopAdapter.saveProgress,
+    loadAllProgress: handlers.loadAllProgress ?? noopAdapter.loadAllProgress,
+    clearProgress: handlers.clearProgress ?? noopAdapter.clearProgress
+  };
+};
+var createCompositeAdapter = (adapters) => ({
+  loadProgress: async (guidonId) => {
+    for (const adapter of adapters) {
+      const progress = await adapter.loadProgress(guidonId);
+      if (progress) return progress;
+    }
+    return null;
+  },
+  saveProgress: async (progress) => {
+    await Promise.all(adapters.map((adapter) => adapter.saveProgress(progress)));
+  },
+  loadAllProgress: async () => {
+    const result = {};
+    for (const adapter of adapters) {
+      if (adapter.loadAllProgress) {
+        const data = await adapter.loadAllProgress();
+        Object.assign(result, data);
+      }
+    }
+    return result;
+  },
+  clearProgress: async (guidonId) => {
+    await Promise.all(
+      adapters.map((adapter) => adapter.clearProgress?.(guidonId))
+    );
+  }
+});
+
+exports.Guidon = Guidon;
+exports.GuidonOverlay = GuidonOverlay;
+exports.GuidonProvider = GuidonProvider;
+exports.GuidonTarget = GuidonTarget;
+exports.GuidonTooltip = GuidonTooltip;
+exports.createApiAdapter = createApiAdapter;
+exports.createAsyncStorageAdapter = createAsyncStorageAdapter;
+exports.createCompositeAdapter = createCompositeAdapter;
+exports.createLocalStorageAdapter = createLocalStorageAdapter;
+exports.createMemoryAdapter = createMemoryAdapter;
+exports.createNoopAdapter = createNoopAdapter;
+exports.useGuidonActive = useGuidonActive;
+exports.useGuidonContext = useGuidonContext;
+exports.useGuidonPersistence = useGuidonPersistence;
+exports.useGuidonProgress = useGuidonProgress;
+exports.useGuidonStep = useGuidonStep;
+exports.useGuidonStore = useGuidonStore;
+exports.useShouldShowGuidon = useShouldShowGuidon;
+exports.useTargetMeasurements = useTargetMeasurements;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map