@korsolutions/guidon 1.0.1 → 1.0.3

package/dist/index.js

@@ -1,1097 +0,0 @@
-'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,
-      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