@korsolutions/guidon 1.0.0 → 1.0.2

package/README.md

@@ -5,9 +5,9 @@ A cross-platform walkthrough/onboarding component library for React Native with
 ## Installation
 
 ```bash
-yarn add @guidon
+yarn add @korsolutions/guidon
 # or
-npm install @guidon
+npm install @korsolutions/guidon
 ```
 
 ### Peer Dependencies
@@ -23,7 +23,7 @@ yarn add react react-native react-native-reanimated react-native-safe-area-conte
 ### 1. Define Your Guidon Steps
 
 ```tsx
-import type { GuidonConfig } from '@guidon';
+import type { GuidonConfig } from '@korsolutions/guidon';
 
 const exploreGuidonConfig: GuidonConfig = {
   id: 'explore-guidon',
@@ -63,7 +63,7 @@ const exploreGuidonConfig: GuidonConfig = {
 ### 2. Wrap Your Screen with GuidonProvider
 
 ```tsx
-import { GuidonProvider } from 'guidon';
+import { GuidonProvider } from '@korsolutions/guidon';
 
 function ExploreScreen() {
   return (
@@ -80,7 +80,7 @@ function ExploreScreen() {
 ### 3. Mark Target Elements with GuidonTarget
 
 ```tsx
-import { GuidonTarget } from 'guidon';
+import { GuidonTarget } from '@korsolutions/guidon';
 
 function SearchButton() {
   return (
@@ -104,7 +104,7 @@ import {
   GuidonProvider,
   createLocalStorageAdapter,
   createAsyncStorageAdapter,
-} from 'guidon';
+} from '@korsolutions/guidon';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
 // For web (localStorage)
@@ -128,7 +128,7 @@ function App() {
 ### Creating a Custom API Adapter
 
 ```tsx
-import { createApiAdapter } from 'guidon';
+import { createApiAdapter } from '@korsolutions/guidon';
 
 const apiAdapter = createApiAdapter({
   loadProgress: async (guidonId) => {
@@ -154,7 +154,7 @@ const apiAdapter = createApiAdapter({
 ### Combining Multiple Adapters
 
 ```tsx
-import { createCompositeAdapter, createLocalStorageAdapter } from 'guidon';
+import { createCompositeAdapter, createLocalStorageAdapter } from '@korsolutions/guidon';
 
 // Save to both local storage and API
 const compositeAdapter = createCompositeAdapter([
@@ -230,7 +230,7 @@ interface GuidonTheme {
 ### Using the Context Hook
 
 ```tsx
-import { useGuidonContext } from 'guidon';
+import { useGuidonContext } from '@korsolutions/guidon';
 
 function ReplayButton() {
   const { replay, isCompleted } = useGuidonContext();
@@ -248,7 +248,7 @@ function ReplayButton() {
 ### Using the Guidon API (Outside React)
 
 ```tsx
-import { Guidon } from 'guidon';
+import { Guidon } from '@korsolutions/guidon';
 
 // Start programmatically
 Guidon.start();
@@ -271,7 +271,7 @@ import {
   useGuidonActive,
   useGuidonStep,
   useGuidonProgress,
-} from 'guidon';
+} from '@korsolutions/guidon';
 
 function GuidonStatus() {
   const isActive = useGuidonActive();

package/dist/commonjs/babel.config.js

@@ -0,0 +1,15 @@
+"use strict";
+
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["module:react-native-builder-bob/babel-preset"],
+    plugins: [[require.resolve("babel-plugin-module-resolver"), {
+      root: ["./src"],
+      alias: {
+        "@": "./src"
+      }
+    }]]
+  };
+};
+//# sourceMappingURL=babel.config.js.map

package/dist/commonjs/babel.config.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["module","exports","api","cache","presets","plugins","require","resolve","root","alias"],"sourceRoot":"../../src","sources":["babel.config.js"],"mappings":";;AAAAA,MAAM,CAACC,OAAO,GAAG,UAAUC,GAAG,EAAE;EAC9BA,GAAG,CAACC,KAAK,CAAC,IAAI,CAAC;EAEf,OAAO;IACLC,OAAO,EAAE,CAAC,8CAA8C,CAAC;IACzDC,OAAO,EAAE,CACP,CACEC,OAAO,CAACC,OAAO,CAAC,8BAA8B,CAAC,EAC/C;MACEC,IAAI,EAAE,CAAC,OAAO,CAAC;MACfC,KAAK,EAAE;QACL,GAAG,EAAE;MACP;IACF,CAAC,CACF;EAEL,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/commonjs/bob.config.js

@@ -0,0 +1,11 @@
+"use strict";
+
+module.exports = {
+  source: "src",
+  output: "dist",
+  targets: [["module", {
+    esm: true,
+    configFile: true
+  }], "typescript"]
+};
+//# sourceMappingURL=bob.config.js.map

package/dist/commonjs/bob.config.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["module","exports","source","output","targets","esm","configFile"],"sourceRoot":"../../src","sources":["bob.config.js"],"mappings":";;AAAAA,MAAM,CAACC,OAAO,GAAG;EACfC,MAAM,EAAE,KAAK;EACbC,MAAM,EAAE,MAAM;EACdC,OAAO,EAAE,CACP,CACE,QAAQ,EACR;IACEC,GAAG,EAAE,IAAI;IACTC,UAAU,EAAE;EACd,CAAC,CACF,EACD,YAAY;AAEhB,CAAC","ignoreList":[]}

package/dist/commonjs/components/GuidonOverlay.js

@@ -0,0 +1,206 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GuidonOverlay = GuidonOverlay;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
+var _store = require("../store.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const AnimatedSvg = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeSvg.default);
+const DEFAULT_THEME = {
+  backdropColor: '#000000',
+  backdropOpacity: 0.75,
+  spotlightBorderRadius: 8,
+  spotlightPadding: 8
+};
+function GuidonOverlay({
+  theme = {},
+  animationDuration = 300,
+  onBackdropPress
+}) {
+  const isActive = (0, _store.useGuidonStore)(state => state.isActive);
+  const config = (0, _store.useGuidonStore)(state => state.config);
+  const currentStepIndex = (0, _store.useGuidonStore)(state => state.currentStepIndex);
+  const targetMeasurements = (0, _store.useGuidonStore)(state => state.targetMeasurements);
+
+  // Check for floating or waiting states
+  const isFloatingStep = (0, _store.useIsFloatingStep)();
+  const waitingState = (0, _store.useWaitingState)();
+  const isWaiting = waitingState?.isWaiting ?? false;
+  const mergedTheme = {
+    ...DEFAULT_THEME,
+    ...theme
+  };
+  const {
+    width: screenWidth,
+    height: screenHeight
+  } = _reactNative.Dimensions.get('window');
+
+  // Get current step's target measurements
+  const currentStep = config?.steps[currentStepIndex];
+  const currentTargetId = currentStep?.targetId;
+  const measurements = currentTargetId ? targetMeasurements[currentTargetId] : undefined;
+
+  // Determine if we should show full backdrop (no spotlight cutout)
+  const showFullBackdrop = isFloatingStep || isWaiting;
+
+  // Calculate spotlight dimensions with padding
+  const spotlight = (0, _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]);
+
+  // Animated styles for fade in/out
+  // Show backdrop for: normal steps with measurements, floating steps, or waiting states
+  const shouldShow = isActive && (measurements || showFullBackdrop);
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    return {
+      opacity: (0, _reactNativeReanimated.withTiming)(shouldShow ? 1 : 0, {
+        duration: animationDuration,
+        easing: _reactNativeReanimated.Easing.inOut(_reactNativeReanimated.Easing.ease)
+      })
+    };
+  }, [shouldShow, animationDuration]);
+  if (!isActive) {
+    return null;
+  }
+
+  // Render full backdrop without spotlight for floating steps or waiting states
+  if (showFullBackdrop) {
+    if (_reactNative.Platform.OS === 'web') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
+        onPress: onBackdropPress,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+          style: [styles.container, animatedStyle],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              position: 'absolute',
+              inset: 0,
+              backgroundColor: mergedTheme.backdropColor,
+              opacity: mergedTheme.backdropOpacity
+            }
+          })
+        })
+      });
+    }
+
+    // Native: full backdrop without cutout
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
+      onPress: onBackdropPress,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedSvg, {
+        style: [styles.container, animatedStyle],
+        width: screenWidth,
+        height: screenHeight,
+        viewBox: `0 0 ${screenWidth} ${screenHeight}`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+          x: "0",
+          y: "0",
+          width: "100%",
+          height: "100%",
+          fill: mergedTheme.backdropColor,
+          fillOpacity: mergedTheme.backdropOpacity
+        })
+      })
+    });
+  }
+
+  // If we have a target but no measurements yet, don't render anything
+  if (!measurements) {
+    return null;
+  }
+
+  // For web, use a different approach with CSS
+  if (_reactNative.Platform.OS === 'web') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
+      onPress: onBackdropPress,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+        style: [styles.container, animatedStyle],
+        children: /*#__PURE__*/(0, _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%
+              )`
+          }
+        })
+      })
+    });
+  }
+
+  // Native implementation using SVG mask
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
+    onPress: onBackdropPress,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AnimatedSvg, {
+      style: [styles.container, animatedStyle],
+      width: screenWidth,
+      height: screenHeight,
+      viewBox: `0 0 ${screenWidth} ${screenHeight}`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Defs, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.Mask, {
+          id: "spotlight-mask",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+            x: "0",
+            y: "0",
+            width: "100%",
+            height: "100%",
+            fill: "white"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+            x: spotlight.x,
+            y: spotlight.y,
+            width: spotlight.width,
+            height: spotlight.height,
+            rx: mergedTheme.spotlightBorderRadius,
+            ry: mergedTheme.spotlightBorderRadius,
+            fill: "black"
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.G, {
+        mask: "url(#spotlight-mask)",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+          x: "0",
+          y: "0",
+          width: "100%",
+          height: "100%",
+          fill: mergedTheme.backdropColor,
+          fillOpacity: mergedTheme.backdropOpacity
+        })
+      })]
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    ..._reactNative.StyleSheet.absoluteFillObject,
+    zIndex: 999
+  }
+});
+//# sourceMappingURL=GuidonOverlay.js.map

package/dist/commonjs/components/GuidonOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_reactNativeSvg","_store","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AnimatedSvg","Animated","createAnimatedComponent","Svg","DEFAULT_THEME","backdropColor","backdropOpacity","spotlightBorderRadius","spotlightPadding","GuidonOverlay","theme","animationDuration","onBackdropPress","isActive","useGuidonStore","state","config","currentStepIndex","targetMeasurements","isFloatingStep","useIsFloatingStep","waitingState","useWaitingState","isWaiting","mergedTheme","width","screenWidth","height","screenHeight","Dimensions","currentStep","steps","currentTargetId","targetId","measurements","undefined","showFullBackdrop","spotlight","useMemo","x","y","shouldShow","animatedStyle","useAnimatedStyle","opacity","withTiming","duration","easing","Easing","inOut","ease","Platform","OS","jsx","TouchableWithoutFeedback","onPress","children","View","style","styles","container","position","inset","backgroundColor","viewBox","Rect","fill","fillOpacity","clipPath","jsxs","Defs","Mask","id","rx","ry","G","mask","StyleSheet","create","absoluteFillObject","zIndex"],"sourceRoot":"../../../src","sources":["components/GuidonOverlay.tsx"],"mappings":"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","ignoreList":[]}

package/dist/commonjs/components/GuidonProvider.js

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GuidonProvider = GuidonProvider;
+exports.useGuidonContext = useGuidonContext;
+var _react = require("react");
+var _store = require("../store.js");
+var _hooks = require("../persistence/hooks.js");
+var _GuidonOverlay = require("./GuidonOverlay.js");
+var _GuidonTooltip = require("./GuidonTooltip.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const GuidonContext = /*#__PURE__*/(0, _react.createContext)(null);
+function useGuidonContext() {
+  const context = (0, _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 = (0, _react.useRef)(false);
+  const isActive = (0, _store.useGuidonStore)(state => state.isActive);
+  const storeIsCompleted = (0, _store.useGuidonStore)(state => state.isCompleted);
+  const currentStepIndex = (0, _store.useGuidonStore)(state => state.currentStepIndex);
+  const configure = (0, _store.useGuidonStore)(state => state.configure);
+  const start = (0, _store.useGuidonStore)(state => state.start);
+  const next = (0, _store.useGuidonStore)(state => state.next);
+  const skip = (0, _store.useGuidonStore)(state => state.skip);
+  const reset = (0, _store.useGuidonStore)(state => state.reset);
+
+  // Check for waiting state (target element not mounted)
+  const waitingState = (0, _store.useWaitingState)();
+  const {
+    isLoading,
+    isCompleted: persistedCompleted,
+    markCompleted,
+    markStepViewed,
+    clearProgress
+  } = (0, _hooks.useGuidonPersistence)(persistenceAdapter, config.id);
+  const isCompleted = storeIsCompleted || persistedCompleted;
+  (0, _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]);
+  (0, _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]);
+
+  // Handle wait timeout - auto-skip to next step if waiting too long
+  (0, _react.useEffect)(() => {
+    const currentStep = config.steps[currentStepIndex];
+    const waitTimeout = currentStep?.waitTimeout;
+
+    // Only set timeout if:
+    // - We have a timeout configured
+    // - The timeout is greater than 0
+    // - We are currently waiting for a target
+    if (!waitTimeout || waitTimeout <= 0 || !waitingState?.isWaiting) {
+      return;
+    }
+    const timer = setTimeout(() => {
+      // Check if we're still waiting when the timeout fires
+      const stillWaiting = _store.useGuidonStore.getState().targetMeasurements[currentStep.targetId] === undefined;
+      if (stillWaiting) {
+        next(); // Skip to next step
+      }
+    }, waitTimeout);
+    return () => clearTimeout(timer);
+  }, [currentStepIndex, config.steps, waitingState?.isWaiting, next]);
+  const replay = (0, _react.useCallback)(async () => {
+    if (persistenceAdapter) {
+      await clearProgress();
+    }
+    reset();
+    hasInitialized.current = false;
+    setTimeout(() => {
+      start();
+    }, 100);
+  }, [persistenceAdapter, clearProgress, reset, start]);
+  const manualStart = (0, _react.useCallback)(() => {
+    if (!isActive && !isLoading) {
+      start();
+    }
+  }, [isActive, isLoading, start]);
+  const contextValue = {
+    start: manualStart,
+    skip,
+    reset,
+    replay,
+    isActive,
+    isCompleted,
+    isLoading
+  };
+  const overlayContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GuidonOverlay.GuidonOverlay, {
+      theme: config.theme,
+      animationDuration: config.animationDuration,
+      onBackdropPress: onBackdropPress
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GuidonTooltip.GuidonTooltip, {
+      theme: config.theme,
+      animationDuration: config.animationDuration,
+      renderCustomTooltip: renderTooltip,
+      labels: tooltipLabels
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GuidonContext.Provider, {
+    value: contextValue,
+    children: [children, Portal ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Portal, {
+      children: overlayContent
+    }) : overlayContent]
+  });
+}
+//# sourceMappingURL=GuidonProvider.js.map

package/dist/commonjs/components/GuidonProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_store","_hooks","_GuidonOverlay","_GuidonTooltip","_jsxRuntime","GuidonContext","createContext","useGuidonContext","context","useContext","Error","GuidonProvider","children","config","autoStart","shouldStart","persistenceAdapter","portalComponent","Portal","renderTooltip","tooltipLabels","onBackdropPress","hasInitialized","useRef","isActive","useGuidonStore","state","storeIsCompleted","isCompleted","currentStepIndex","configure","start","next","skip","reset","waitingState","useWaitingState","isLoading","persistedCompleted","markCompleted","markStepViewed","clearProgress","useGuidonPersistence","id","useEffect","enhancedConfig","onComplete","onSkip","onStepChange","stepIndex","step","current","checkAndStart","should","setTimeout","currentStep","steps","waitTimeout","isWaiting","timer","stillWaiting","getState","targetMeasurements","targetId","undefined","clearTimeout","replay","useCallback","manualStart","contextValue","overlayContent","jsxs","Fragment","jsx","GuidonOverlay","theme","animationDuration","GuidonTooltip","renderCustomTooltip","labels","Provider","value"],"sourceRoot":"../../../src","sources":["components/GuidonProvider.tsx"],"mappings":"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","ignoreList":[]}

package/dist/commonjs/components/GuidonTarget.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GuidonTarget = GuidonTarget;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _store = require("../store.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Wrapper component that marks an element as a walkthrough target
+ * Automatically measures and reports its position to the walkthrough store
+ */
+function GuidonTarget({
+  children,
+  targetId,
+  active = true
+}) {
+  const viewRef = (0, _react.useRef)(null);
+  const registerTarget = (0, _store.useGuidonStore)(state => state.registerTarget);
+  const unregisterTarget = (0, _store.useGuidonStore)(state => state.unregisterTarget);
+  const isActive = (0, _store.useGuidonStore)(state => state.isActive);
+  const config = (0, _store.useGuidonStore)(state => state.config);
+
+  // Check if this target is needed for the current walkthrough
+  const isTargetNeeded = isActive && config?.steps.some(step => step.targetId === targetId);
+  const measureElement = (0, _react.useCallback)(() => {
+    if (!viewRef.current || !active || !isTargetNeeded) return;
+    if (_reactNative.Platform.OS === "web") {
+      // Web measurement using getBoundingClientRect
+      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 {
+      // Native measurement using measureInWindow
+      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]);
+
+  // Measure on layout change
+  const handleLayout = (0, _react.useCallback)(_event => {
+    // Small delay to ensure layout is complete
+    requestAnimationFrame(() => {
+      measureElement();
+    });
+  }, [measureElement]);
+
+  // Re-measure when walkthrough becomes active or when this target becomes relevant
+  (0, _react.useEffect)(() => {
+    if (isTargetNeeded) {
+      // Delay to ensure the element is rendered
+      const timer = setTimeout(() => {
+        measureElement();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [isTargetNeeded, measureElement]);
+
+  // Re-measure on scroll (web only)
+  (0, _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]);
+
+  // Unregister on unmount
+  (0, _react.useEffect)(() => {
+    return () => {
+      unregisterTarget(targetId);
+    };
+  }, [targetId, unregisterTarget]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    ref: viewRef,
+    onLayout: handleLayout,
+    collapsable: false,
+    style: {
+      alignSelf: "flex-start"
+    },
+    children: children
+  });
+}
+//# sourceMappingURL=GuidonTarget.js.map

package/dist/commonjs/components/GuidonTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_store","_jsxRuntime","GuidonTarget","children","targetId","active","viewRef","useRef","registerTarget","useGuidonStore","state","unregisterTarget","isActive","config","isTargetNeeded","steps","some","step","measureElement","useCallback","current","Platform","OS","element","getBoundingClientRect","rect","measurements","x","left","window","scrollX","y","top","scrollY","width","height","measureInWindow","handleLayout","_event","requestAnimationFrame","useEffect","timer","setTimeout","clearTimeout","handleScroll","addEventListener","removeEventListener","jsx","View","ref","onLayout","collapsable","style","alignSelf"],"sourceRoot":"../../../src","sources":["components/GuidonTarget.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAA0C,IAAAG,WAAA,GAAAH,OAAA;AAQ1C;AACA;AACA;AACA;AACO,SAASI,YAAYA,CAAC;EAC3BC,QAAQ;EACRC,QAAQ;EACRC,MAAM,GAAG;AACQ,CAAC,EAAE;EACpB,MAAMC,OAAO,GAAG,IAAAC,aAAM,EAAO,IAAI,CAAC;EAClC,MAAMC,cAAc,GAAG,IAAAC,qBAAc,EAClCC,KAAkB,IAAKA,KAAK,CAACF,cAChC,CAAC;EACD,MAAMG,gBAAgB,GAAG,IAAAF,qBAAc,EACpCC,KAAkB,IAAKA,KAAK,CAACC,gBAChC,CAAC;EACD,MAAMC,QAAQ,GAAG,IAAAH,qBAAc,EAAEC,KAAkB,IAAKA,KAAK,CAACE,QAAQ,CAAC;EACvE,MAAMC,MAAM,GAAG,IAAAJ,qBAAc,EAAEC,KAAkB,IAAKA,KAAK,CAACG,MAAM,CAAC;;EAEnE;EACA,MAAMC,cAAc,GAClBF,QAAQ,IACRC,MAAM,EAAEE,KAAK,CAACC,IAAI,CAAEC,IAAgB,IAAKA,IAAI,CAACb,QAAQ,KAAKA,QAAQ,CAAC;EAEtE,MAAMc,cAAc,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACvC,IAAI,CAACb,OAAO,CAACc,OAAO,IAAI,CAACf,MAAM,IAAI,CAACS,cAAc,EAAE;IAEpD,IAAIO,qBAAQ,CAACC,EAAE,KAAK,KAAK,EAAE;MACzB;MACA,MAAMC,OAAO,GAAGjB,OAAO,CAACc,OAAiC;MACzD,IAAIG,OAAO,IAAI,OAAOA,OAAO,CAACC,qBAAqB,KAAK,UAAU,EAAE;QAClE,MAAMC,IAAI,GAAGF,OAAO,CAACC,qBAAqB,CAAC,CAAC;QAC5C,MAAME,YAAgC,GAAG;UACvCC,CAAC,EAAEF,IAAI,CAACG,IAAI,GAAGC,MAAM,CAACC,OAAO;UAC7BC,CAAC,EAAEN,IAAI,CAACO,GAAG,GAAGH,MAAM,CAACI,OAAO;UAC5BC,KAAK,EAAET,IAAI,CAACS,KAAK;UACjBC,MAAM,EAAEV,IAAI,CAACU;QACf,CAAC;QACD3B,cAAc,CAACJ,QAAQ,EAAEsB,YAAY,CAAC;MACxC;IACF,CAAC,MAAM;MACL;MACApB,OAAO,CAACc,OAAO,CAACgB,eAAe,CAAC,CAACT,CAAC,EAAEI,CAAC,EAAEG,KAAK,EAAEC,MAAM,KAAK;QACvD,IAAID,KAAK,GAAG,CAAC,IAAIC,MAAM,GAAG,CAAC,EAAE;UAC3B,MAAMT,YAAgC,GAAG;YAAEC,CAAC;YAAEI,CAAC;YAAEG,KAAK;YAAEC;UAAO,CAAC;UAChE3B,cAAc,CAACJ,QAAQ,EAAEsB,YAAY,CAAC;QACxC;MACF,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACtB,QAAQ,EAAEC,MAAM,EAAES,cAAc,EAAEN,cAAc,CAAC,CAAC;;EAEtD;EACA,MAAM6B,YAAY,GAAG,IAAAlB,kBAAW,EAC7BmB,MAAyB,IAAK;IAC7B;IACAC,qBAAqB,CAAC,MAAM;MAC1BrB,cAAc,CAAC,CAAC;IAClB,CAAC,CAAC;EACJ,CAAC,EACD,CAACA,cAAc,CACjB,CAAC;;EAED;EACA,IAAAsB,gBAAS,EAAC,MAAM;IACd,IAAI1B,cAAc,EAAE;MAClB;MACA,MAAM2B,KAAK,GAAGC,UAAU,CAAC,MAAM;QAC7BxB,cAAc,CAAC,CAAC;MAClB,CAAC,EAAE,GAAG,CAAC;MACP,OAAO,MAAMyB,YAAY,CAACF,KAAK,CAAC;IAClC;EACF,CAAC,EAAE,CAAC3B,cAAc,EAAEI,cAAc,CAAC,CAAC;;EAEpC;EACA,IAAAsB,gBAAS,EAAC,MAAM;IACd,IAAInB,qBAAQ,CAACC,EAAE,KAAK,KAAK,IAAI,CAACR,cAAc,EAAE;IAE9C,MAAM8B,YAAY,GAAGA,CAAA,KAAM;MACzB1B,cAAc,CAAC,CAAC;IAClB,CAAC;IAEDW,MAAM,CAACgB,gBAAgB,CAAC,QAAQ,EAAED,YAAY,EAAE,IAAI,CAAC;IACrDf,MAAM,CAACgB,gBAAgB,CAAC,QAAQ,EAAED,YAAY,CAAC;IAE/C,OAAO,MAAM;MACXf,MAAM,CAACiB,mBAAmB,CAAC,QAAQ,EAAEF,YAAY,EAAE,IAAI,CAAC;MACxDf,MAAM,CAACiB,mBAAmB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IACpD,CAAC;EACH,CAAC,EAAE,CAAC9B,cAAc,EAAEI,cAAc,CAAC,CAAC;;EAEpC;EACA,IAAAsB,gBAAS,EAAC,MAAM;IACd,OAAO,MAAM;MACX7B,gBAAgB,CAACP,QAAQ,CAAC;IAC5B,CAAC;EACH,CAAC,EAAE,CAACA,QAAQ,EAAEO,gBAAgB,CAAC,CAAC;EAEhC,oBACE,IAAAV,WAAA,CAAA8C,GAAA,EAAChD,YAAA,CAAAiD,IAAI;IACHC,GAAG,EAAE3C,OAAQ;IACb4C,QAAQ,EAAEb,YAAa;IACvBc,WAAW,EAAE,KAAM;IACnBC,KAAK,EAAE;MAAEC,SAAS,EAAE;IAAa,CAAE;IAAAlD,QAAA,EAElCA;EAAQ,CACL,CAAC;AAEX","ignoreList":[]}