@wireai/activation 0.1.0

package/dist/coachmarks/index.js

@@ -0,0 +1,944 @@
+'use strict';
+
+var React3 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var expoBlur = require('expo-blur');
+var reactNative = require('react-native');
+var Animated = require('react-native-reanimated');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React3__default = /*#__PURE__*/_interopDefault(React3);
+var Animated__default = /*#__PURE__*/_interopDefault(Animated);
+
+// src/coachmarks/CoachmarkProvider.tsx
+
+// src/features/defaults.ts
+var defaultWireFeatures = Object.freeze({
+  coachmarks: Object.freeze({ enabled: true }),
+  showcase: Object.freeze({ enabled: true }),
+  onboarding: Object.freeze({ mode: "ai" }),
+  review: Object.freeze({ enabled: true }),
+  questionnaire: Object.freeze({ enabled: true }),
+  announcements: Object.freeze({ enabled: true })
+});
+var VALID_MODES = ["ai", "static", "off"];
+var readEnabled = (raw) => {
+  if (raw && typeof raw === "object" && typeof raw.enabled === "boolean") {
+    return { enabled: raw.enabled };
+  }
+  return { enabled: true };
+};
+var parseWireFeatures = (raw) => {
+  var _a;
+  if (!raw || typeof raw !== "object" || Array.isArray(raw)) return defaultWireFeatures;
+  const src = raw;
+  const modeRaw = (_a = src.onboarding) == null ? void 0 : _a.mode;
+  const mode = typeof modeRaw === "string" && VALID_MODES.includes(modeRaw) ? modeRaw : "ai";
+  return {
+    coachmarks: readEnabled(src.coachmarks),
+    showcase: readEnabled(src.showcase),
+    onboarding: { mode },
+    review: readEnabled(src.review),
+    questionnaire: readEnabled(src.questionnaire),
+    announcements: readEnabled(src.announcements)
+  };
+};
+var featuresEqual = (a, b) => a === b || a.coachmarks.enabled === b.coachmarks.enabled && a.showcase.enabled === b.showcase.enabled && a.onboarding.mode === b.onboarding.mode && a.review.enabled === b.review.enabled && a.questionnaire.enabled === b.questionnaire.enabled && a.announcements.enabled === b.announcements.enabled;
+
+// src/features/cache.ts
+var READ_TIMEOUT_MS = 1500;
+var featuresCacheKey = (appId) => `wireai:features:${appId && appId.length > 0 ? appId : "default"}`;
+var withTimeout = (p, ms) => {
+  let timer;
+  const timeout = new Promise((resolve) => {
+    timer = setTimeout(() => resolve(void 0), ms);
+  });
+  return Promise.race([p, timeout]).finally(() => clearTimeout(timer));
+};
+var readCachedFeatures = async (storage, key) => {
+  let raw;
+  try {
+    raw = await withTimeout(storage.getItem(key), READ_TIMEOUT_MS);
+  } catch {
+    return void 0;
+  }
+  if (!raw) return void 0;
+  try {
+    const parsed = JSON.parse(raw);
+    if (parsed && typeof parsed === "object" && typeof parsed.ts === "number") {
+      const ts = parsed.ts;
+      return {
+        features: parseWireFeatures(parsed.features),
+        ageMs: Date.now() - ts
+      };
+    }
+  } catch {
+  }
+  return void 0;
+};
+var writeCachedFeatures = (storage, key, features) => {
+  try {
+    void storage.setItem(key, JSON.stringify({ features, ts: Date.now() })).catch(() => {
+    });
+  } catch {
+  }
+};
+
+// src/features/fetchWireFeatures.ts
+var DEFAULT_TIMEOUT_MS = 4e3;
+var failOpen = async (storage, key) => {
+  var _a;
+  if (!storage) return defaultWireFeatures;
+  const cached = await readCachedFeatures(storage, key);
+  return (_a = cached == null ? void 0 : cached.features) != null ? _a : defaultWireFeatures;
+};
+var fetchWithTimeout = async (url, apiKey, timeoutMs) => {
+  const controller = typeof AbortController !== "undefined" ? new AbortController() : void 0;
+  const timer = setTimeout(() => controller == null ? void 0 : controller.abort(), timeoutMs);
+  try {
+    return await fetch(url, {
+      method: "GET",
+      headers: { Accept: "application/json", Authorization: `Bearer ${apiKey}` },
+      signal: controller == null ? void 0 : controller.signal
+    });
+  } finally {
+    clearTimeout(timer);
+  }
+};
+var fetchWireFeatures = async (config) => {
+  const key = featuresCacheKey(config == null ? void 0 : config.appId);
+  const storage = config == null ? void 0 : config.storage;
+  if (!(config == null ? void 0 : config.serverUrl) || !(config == null ? void 0 : config.apiKey)) return failOpen(storage, key);
+  const url = `${config.serverUrl.replace(/\/$/, "")}/v1/features`;
+  const timeoutMs = config.timeoutMs && config.timeoutMs > 0 ? config.timeoutMs : DEFAULT_TIMEOUT_MS;
+  try {
+    const res = await fetchWithTimeout(url, config.apiKey, timeoutMs);
+    if (!res || !res.ok) return failOpen(storage, key);
+    const json = await res.json();
+    const features = parseWireFeatures(json);
+    if (storage) writeCachedFeatures(storage, key, features);
+    return features;
+  } catch {
+    return failOpen(storage, key);
+  }
+};
+
+// src/features/useWireFeatures.ts
+var useStableValue = (value, isEqual) => {
+  const ref = React3.useRef(value);
+  if (!isEqual(ref.current, value)) ref.current = value;
+  return ref.current;
+};
+var sameFetchKey = (a, b) => (a == null ? void 0 : a.serverUrl) === (b == null ? void 0 : b.serverUrl) && (a == null ? void 0 : a.apiKey) === (b == null ? void 0 : b.apiKey) && (a == null ? void 0 : a.appId) === (b == null ? void 0 : b.appId);
+var useWireFeatures = (config) => {
+  const stableConfig = useStableValue(config, sameFetchKey);
+  const [flags, setFlags] = React3.useState(defaultWireFeatures);
+  const canFetch = !!(stableConfig == null ? void 0 : stableConfig.serverUrl) && !!(stableConfig == null ? void 0 : stableConfig.apiKey);
+  React3.useEffect(() => {
+    if (!canFetch) {
+      setFlags((prev) => featuresEqual(prev, defaultWireFeatures) ? prev : defaultWireFeatures);
+      return;
+    }
+    let alive = true;
+    void fetchWireFeatures(stableConfig).then((next) => {
+      if (!alive) return;
+      setFlags((prev) => featuresEqual(prev, next) ? prev : next);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [canFetch, stableConfig]);
+  return flags;
+};
+var WireFeaturesContext = React3.createContext(null);
+var useWireFeaturesContext = () => React3.useContext(WireFeaturesContext);
+var useResolvedFeatures = (options) => {
+  var _a, _b, _c;
+  const ctx = useWireFeaturesContext();
+  const shouldFetch = !(options == null ? void 0 : options.flags) && ctx == null;
+  const fetched = useWireFeatures(shouldFetch ? options == null ? void 0 : options.config : void 0);
+  return (_c = (_b = (_a = options == null ? void 0 : options.flags) != null ? _a : ctx) != null ? _b : fetched) != null ? _c : defaultWireFeatures;
+};
+
+// src/coachmarks/runtime.ts
+var storageSingleton = null;
+var testing = false;
+var coachmarksEnabled = true;
+var setCoachmarksEnabled = (value) => {
+  coachmarksEnabled = value;
+};
+var areCoachmarksEnabled = () => coachmarksEnabled;
+var setCoachmarkStorage = (storage) => {
+  storageSingleton = storage;
+};
+var getCoachmarkStorage = () => storageSingleton;
+var setCoachmarkTesting = (value) => {
+  testing = value;
+};
+var isCoachmarkTesting = () => testing;
+var coachmarkGateKey = (tourId) => `wire_coachmark_${tourId}_seen`;
+var showcaseGateKey = (showcaseId) => `wire_showcase_${showcaseId}_seen`;
+var SEEN_VALUE = "1";
+var hasSeenGate = (key, storageOverride, testingOverride) => {
+  if (testingOverride != null ? testingOverride : testing) return false;
+  const storage = storageOverride != null ? storageOverride : storageSingleton;
+  if (!storage) return false;
+  try {
+    return storage.getItem(key) === SEEN_VALUE;
+  } catch {
+    return false;
+  }
+};
+var markSeenGate = (key, storageOverride, testingOverride) => {
+  if (testingOverride != null ? testingOverride : testing) return;
+  const storage = storageOverride != null ? storageOverride : storageSingleton;
+  if (!storage) return;
+  try {
+    storage.setItem(key, SEEN_VALUE);
+  } catch {
+  }
+};
+
+// src/coachmarks/coachmarkOverlayStore.ts
+var current = null;
+var listeners = /* @__PURE__ */ new Set();
+var emit = () => {
+  for (const listener of listeners) listener();
+};
+var coachmarkOverlay = {
+  show(state) {
+    if (!areCoachmarksEnabled()) return;
+    current = state;
+    emit();
+  },
+  hide() {
+    if (current === null) return;
+    current = null;
+    emit();
+  },
+  subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  },
+  getSnapshot() {
+    return current;
+  }
+};
+var useCoachmarkOverlay = () => React3.useSyncExternalStore(
+  coachmarkOverlay.subscribe,
+  coachmarkOverlay.getSnapshot,
+  coachmarkOverlay.getSnapshot
+);
+
+// src/theme/defaultTheme.ts
+var defaultOnboardingTheme = {
+  colors: {
+    background: "#FFFFFF",
+    surface: "#F7F7F8",
+    text: "#101114",
+    textMuted: "#6B7280",
+    primary: "#111111",
+    onPrimary: "#FFFFFF",
+    primarySoft: "rgba(17,17,17,0.06)",
+    border: "#E4E4E7",
+    borderStrong: "#C7C7CC",
+    disabled: "#EBEBEB",
+    success: "#16A34A",
+    warning: "#D97706",
+    error: "#DC2626",
+    info: "#2563EB"
+  },
+  fonts: {
+    regular: void 0,
+    medium: void 0,
+    bold: void 0,
+    baseSize: 16,
+    scale: 1
+  },
+  radius: {
+    sm: 8,
+    md: 12,
+    lg: 16,
+    full: 9999
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32
+  },
+  // Circled (pill) CTA by default; an app can pass `button: { radius: 12 }` for
+  // a rounded rectangle, or override height/paddingX to match its design system.
+  button: {
+    radius: 9999,
+    height: 52,
+    paddingX: 24
+  }
+};
+var mergeTheme = (override) => {
+  return defaultOnboardingTheme;
+};
+var OnboardingThemeContext = React3.createContext(null);
+var useOnboardingTheme = () => {
+  const ctx = React3.useContext(OnboardingThemeContext);
+  return ctx != null ? ctx : mergeTheme();
+};
+var SWIPE_MS = 700;
+var TAP_MS = 320;
+var SPREAD_MS = 620;
+var GLYPH_ROTATION = {
+  swipe_up: "0deg",
+  swipe_down: "180deg",
+  swipe_left: "-90deg",
+  swipe_right: "90deg"
+};
+var FingerPair = ({ size, color }) => {
+  const { row, index, middle } = React3.useMemo(() => {
+    const w = size * 0.2;
+    const r = w / 2;
+    return {
+      row: { flexDirection: "row", alignItems: "flex-end", gap: size * 0.08 },
+      index: { width: w, height: size * 0.54, borderRadius: r, backgroundColor: color },
+      middle: { width: w, height: size * 0.44, borderRadius: r, backgroundColor: color }
+    };
+  }, [size, color]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: row, pointerEvents: "none", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: index }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: middle })
+  ] });
+};
+var MotionTrack = ({ size, color }) => {
+  const { wrap, tick0, tick1 } = React3.useMemo(() => {
+    const h = Math.max(2, size * 0.05);
+    return {
+      wrap: { alignItems: "center", marginTop: size * 0.1, gap: size * 0.06 },
+      tick0: {
+        width: size * 0.3,
+        height: h,
+        borderRadius: h / 2,
+        backgroundColor: color,
+        opacity: 0.4
+      },
+      tick1: {
+        width: size * 0.18,
+        height: h,
+        borderRadius: h / 2,
+        backgroundColor: color,
+        opacity: 0.16
+      }
+    };
+  }, [size, color]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: wrap, pointerEvents: "none", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: tick0 }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: tick1 })
+  ] });
+};
+var GestureHintComponent = ({
+  type,
+  size = 34,
+  color = "white",
+  renderHand
+}) => {
+  var _a;
+  const translate = Animated.useSharedValue(0);
+  const opacity = Animated.useSharedValue(1);
+  const pulse = Animated.useSharedValue(1);
+  const spread = Animated.useSharedValue(0);
+  const reduced = Animated.useReducedMotion();
+  const isSwipe = type === "swipe_up" || type === "swipe_down" || type === "swipe_left" || type === "swipe_right";
+  const isSpread = type === "pinch" || type === "zoom";
+  const isTap = type === "tap" || type === "double_tap";
+  React3.useEffect(() => {
+    if (type === "none" || reduced) return void 0;
+    if (isTap) {
+      pulse.value = Animated.withRepeat(
+        Animated.withSequence(
+          Animated.withTiming(0.82, { duration: TAP_MS }),
+          Animated.withTiming(1, { duration: TAP_MS })
+        ),
+        -1,
+        false
+      );
+      opacity.value = Animated.withRepeat(
+        Animated.withSequence(
+          Animated.withTiming(0.55, { duration: TAP_MS }),
+          Animated.withTiming(1, { duration: TAP_MS })
+        ),
+        -1,
+        false
+      );
+      return void 0;
+    }
+    if (isSpread) {
+      spread.value = Animated.withRepeat(
+        Animated.withSequence(
+          Animated.withTiming(size * 0.26, { duration: SPREAD_MS }),
+          Animated.withTiming(0, { duration: SPREAD_MS })
+        ),
+        -1,
+        false
+      );
+      return void 0;
+    }
+    translate.value = Animated.withRepeat(
+      Animated.withSequence(
+        Animated.withTiming(0, { duration: 0 }),
+        Animated.withTiming(-26, { duration: SWIPE_MS }),
+        Animated.withDelay(140, Animated.withTiming(0, { duration: 0 }))
+      ),
+      -1,
+      false
+    );
+    opacity.value = Animated.withRepeat(
+      Animated.withSequence(
+        Animated.withTiming(1, { duration: SWIPE_MS / 2 }),
+        Animated.withTiming(0, { duration: SWIPE_MS / 2 }),
+        Animated.withDelay(140, Animated.withTiming(1, { duration: 0 }))
+      ),
+      -1,
+      false
+    );
+    return void 0;
+  }, [type, reduced, isTap, isSpread, translate, opacity, pulse, spread, size]);
+  const swipeAnimatedStyle = Animated.useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ translateY: translate.value }]
+  }));
+  const tapAnimatedStyle = Animated.useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ scale: pulse.value }]
+  }));
+  const spreadLeftStyle = Animated.useAnimatedStyle(() => ({
+    transform: [{ translateX: -spread.value }]
+  }));
+  const spreadRightStyle = Animated.useAnimatedStyle(() => ({
+    transform: [{ translateX: spread.value }]
+  }));
+  if (type === "none") return null;
+  const customGlyph = renderHand ? renderHand({ size, color }) : null;
+  if (isSwipe) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        style: { transform: [{ rotate: (_a = GLYPH_ROTATION[type]) != null ? _a : "0deg" }] },
+        pointerEvents: "none",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.swipeStack, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Animated__default.default.View, { style: swipeAnimatedStyle, pointerEvents: "none", children: customGlyph != null ? customGlyph : /* @__PURE__ */ jsxRuntime.jsx(FingerPair, { size, color }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(MotionTrack, { size, color })
+        ] })
+      }
+    );
+  }
+  if (isSpread) {
+    const w = size * 0.2;
+    const capsule = {
+      width: w,
+      height: size * 0.5,
+      borderRadius: w / 2,
+      backgroundColor: color
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.spreadRow, { gap: size * 0.12 }], pointerEvents: "none", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Animated__default.default.View, { style: spreadLeftStyle, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: capsule }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Animated__default.default.View, { style: spreadRightStyle, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: capsule }) })
+    ] });
+  }
+  const ringSize = size * 0.86;
+  const ringBorder = Math.max(2, size * 0.08);
+  const dotSize = size * 0.32;
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles.tapWrap, { width: size, height: size }], pointerEvents: "none", children: customGlyph ? /* @__PURE__ */ jsxRuntime.jsx(Animated__default.default.View, { style: tapAnimatedStyle, pointerEvents: "none", children: customGlyph }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Animated__default.default.View,
+      {
+        style: [
+          styles.tapRing,
+          {
+            width: ringSize,
+            height: ringSize,
+            borderRadius: ringSize / 2,
+            borderWidth: ringBorder,
+            borderColor: color
+          },
+          tapAnimatedStyle
+        ],
+        pointerEvents: "none"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        style: {
+          position: "absolute",
+          width: dotSize,
+          height: dotSize,
+          borderRadius: dotSize / 2,
+          backgroundColor: color
+        }
+      }
+    )
+  ] }) });
+};
+var styles = reactNative.StyleSheet.create({
+  swipeStack: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  spreadRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  tapWrap: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  tapRing: {
+    backgroundColor: "transparent"
+  }
+});
+var GestureHint = React3__default.default.memo(GestureHintComponent);
+GestureHint.displayName = "GestureHint";
+var AnimatedBlurView = Animated__default.default.createAnimatedComponent(expoBlur.BlurView);
+var BLUR_INTENSITY = 26;
+var FADE_MS = 280;
+var RING_PADDING = 10;
+var TOOLTIP_GAP = 14;
+var SIDE_MARGIN = 20;
+var PILL_MAX_WIDTH = 260;
+var SpotlightOverlayComponent = ({
+  message,
+  targetRect,
+  gesture = "none",
+  placement = "bottom",
+  onEngage,
+  onDismiss,
+  accentColor,
+  accentTextColor
+}) => {
+  const { height: screenH } = reactNative.useWindowDimensions();
+  const reduced = Animated.useReducedMotion();
+  const theme = useOnboardingTheme();
+  const accent = accentColor != null ? accentColor : theme.colors.primary;
+  const accentText = accentTextColor != null ? accentTextColor : theme.colors.onPrimary;
+  const showGesture = gesture !== "none" && gesture !== "tap" && gesture !== "double_tap";
+  const intensity = Animated.useSharedValue(0);
+  const ringScale = Animated.useSharedValue(1);
+  React3.useEffect(() => {
+    intensity.value = Animated.withTiming(BLUR_INTENSITY, { duration: FADE_MS });
+  }, [intensity]);
+  React3.useEffect(() => {
+    if (reduced) return;
+    ringScale.value = Animated.withRepeat(
+      Animated.withSequence(
+        Animated.withTiming(1.06, { duration: 700 }),
+        Animated.withTiming(1, { duration: 700 })
+      ),
+      -1,
+      true
+    );
+  }, [reduced, ringScale]);
+  const blurAnimatedProps = Animated.useAnimatedProps(() => ({
+    intensity: intensity.value
+  }));
+  const ringAnimatedStyle = Animated.useAnimatedStyle(() => ({
+    transform: [{ scale: ringScale.value }]
+  }));
+  const geometry = React3.useMemo(() => {
+    if (!targetRect) return null;
+    const ringLeft = targetRect.x - RING_PADDING;
+    const ringTop = targetRect.y - RING_PADDING;
+    const ringW = targetRect.width + RING_PADDING * 2;
+    const ringH = targetRect.height + RING_PADDING * 2;
+    return {
+      ring: {
+        left: ringLeft,
+        top: ringTop,
+        width: ringW,
+        height: ringH,
+        borderRadius: Math.min(ringW, ringH) / 2
+      },
+      // Tooltip above or below the ring depending on placement.
+      tooltip: placement === "top" ? { bottom: screenH - ringTop + TOOLTIP_GAP } : { top: ringTop + ringH + TOOLTIP_GAP }
+    };
+  }, [targetRect, placement, screenH]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Animated__default.default.View,
+    {
+      style: [reactNative.StyleSheet.absoluteFill, styles2.root],
+      entering: Animated.FadeIn.duration(FADE_MS),
+      exiting: Animated.FadeOut.duration(FADE_MS),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AnimatedBlurView,
+          {
+            tint: "dark",
+            animatedProps: blurAnimatedProps,
+            style: reactNative.StyleSheet.absoluteFill
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Pressable,
+          {
+            style: reactNative.StyleSheet.absoluteFill,
+            onPress: onDismiss,
+            accessibilityRole: "button",
+            accessibilityLabel: "Next hint"
+          }
+        ),
+        geometry && /* @__PURE__ */ jsxRuntime.jsx(
+          Animated__default.default.View,
+          {
+            style: [
+              styles2.ring,
+              geometry.ring,
+              { borderColor: accent, shadowColor: accent },
+              ringAnimatedStyle
+            ],
+            pointerEvents: "box-none",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.Pressable,
+              {
+                style: reactNative.StyleSheet.absoluteFill,
+                onPress: onEngage,
+                accessibilityRole: "button",
+                accessibilityLabel: message
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          reactNative.View,
+          {
+            style: [
+              styles2.tooltipWrapper,
+              geometry ? geometry.tooltip : { top: screenH * 0.42, alignItems: "center" }
+            ],
+            pointerEvents: "box-none",
+            children: [
+              showGesture && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.gestureSlot, pointerEvents: "none", children: /* @__PURE__ */ jsxRuntime.jsx(GestureHint, { type: gesture, color: accent }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.Pressable,
+                {
+                  onPress: onEngage,
+                  style: [styles2.pill, { backgroundColor: accent }],
+                  accessibilityRole: "button",
+                  accessibilityLabel: message,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 3, style: [styles2.pillText, { color: accentText }], children: message })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var styles2 = reactNative.StyleSheet.create({
+  // High elevation/zIndex so the whole overlay (incl. the frosted blur) sits
+  // above the bottom tab bar on Android, where sibling z-order follows
+  // elevation, not tree order.
+  root: {
+    zIndex: 9999,
+    elevation: 9999
+  },
+  ring: {
+    position: "absolute",
+    borderWidth: 2.5,
+    backgroundColor: "transparent",
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.9,
+    shadowRadius: 12,
+    elevation: 10
+  },
+  tooltipWrapper: {
+    position: "absolute",
+    left: SIDE_MARGIN,
+    right: SIDE_MARGIN,
+    alignItems: "center",
+    gap: 10
+  },
+  gestureSlot: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  pill: {
+    maxWidth: PILL_MAX_WIDTH,
+    paddingVertical: 12,
+    paddingHorizontal: 18,
+    borderRadius: 18,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 6,
+    elevation: 6
+  },
+  pillText: {
+    fontSize: 14,
+    fontWeight: "800",
+    textAlign: "center"
+  }
+});
+var SpotlightOverlay = React3__default.default.memo(SpotlightOverlayComponent);
+SpotlightOverlay.displayName = "SpotlightOverlay";
+var CoachmarkOverlayHostComponent = ({
+  accentColor,
+  accentTextColor
+}) => {
+  const active = useCoachmarkOverlay();
+  if (!active) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SpotlightOverlay,
+    {
+      message: active.message,
+      targetRect: active.targetRect,
+      gesture: active.gesture,
+      placement: active.placement,
+      onEngage: active.onEngage,
+      onDismiss: active.onDismiss,
+      accentColor,
+      accentTextColor
+    }
+  );
+};
+var CoachmarkOverlayHost = React3__default.default.memo(CoachmarkOverlayHostComponent);
+CoachmarkOverlayHost.displayName = "CoachmarkOverlayHost";
+var CoachmarkProvider = ({
+  storage,
+  isTestingCoachmark = false,
+  accentColor,
+  accentTextColor,
+  features,
+  featuresConfig,
+  children
+}) => {
+  const flags = useResolvedFeatures({ flags: features, config: featuresConfig });
+  const coachmarksOn = flags.coachmarks.enabled;
+  setCoachmarkStorage(storage);
+  setCoachmarkTesting(isTestingCoachmark);
+  setCoachmarksEnabled(coachmarksOn);
+  React3.useEffect(() => {
+    setCoachmarkStorage(storage);
+    setCoachmarkTesting(isTestingCoachmark);
+    setCoachmarksEnabled(coachmarksOn);
+    return () => {
+      if (getCoachmarkStorage() === storage) {
+        setCoachmarkStorage(null);
+      }
+      setCoachmarksEnabled(true);
+    };
+  }, [storage, isTestingCoachmark, coachmarksOn]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CoachmarkOverlayHost,
+      {
+        accentColor,
+        accentTextColor
+      }
+    )
+  ] });
+};
+CoachmarkProvider.displayName = "CoachmarkProvider";
+
+// src/coachmarks/coachmarkAnchorRegistry.ts
+var anchors = /* @__PURE__ */ new Map();
+var coachmarkAnchors = {
+  register(id, measurer) {
+    anchors.set(id, measurer);
+  },
+  /**
+   * Only clears the id when `measurer` is still the current registration, so a
+   * screen unmounting after a newer screen registered the same id does not wipe
+   * the live measurer. Omit `measurer` to force-delete regardless.
+   */
+  unregister(id, measurer) {
+    if (measurer !== void 0 && anchors.get(id) !== measurer) return;
+    anchors.delete(id);
+  },
+  get(id) {
+    return anchors.get(id);
+  },
+  /**
+   * Resolve an anchor to a rect, retrying briefly while the target lays out
+   * (e.g. the first feed post, or a screen just navigated to). Cancellable via
+   * `shouldCancel` so a superseded step abandons its retry loop immediately.
+   */
+  async resolve(id, {
+    retries = 6,
+    intervalMs = 120,
+    shouldCancel
+  } = {}) {
+    for (let attempt = 0; attempt <= retries; attempt++) {
+      if (shouldCancel == null ? void 0 : shouldCancel()) return null;
+      const measurer = anchors.get(id);
+      if (measurer) {
+        const rect = await measurer();
+        if (rect && rect.width > 0 && rect.height > 0) return rect;
+      }
+      if (attempt < retries) {
+        await new Promise((resolve) => setTimeout(resolve, intervalMs));
+      }
+    }
+    return null;
+  }
+};
+
+// src/coachmarks/useCoachmarkAnchor.ts
+var useCoachmarkAnchor = (id) => {
+  const ref = React3.useRef(null);
+  React3.useEffect(() => {
+    if (!id) return void 0;
+    const measure = () => new Promise((resolve) => {
+      const node = ref.current;
+      if (!node || typeof node.measureInWindow !== "function") {
+        return resolve(null);
+      }
+      node.measureInWindow((x, y, width, height) => {
+        if ([x, y, width, height].some(
+          (value) => value == null || Number.isNaN(value)
+        )) {
+          return resolve(null);
+        }
+        resolve({ x, y, width, height });
+      });
+    });
+    coachmarkAnchors.register(id, measure);
+    return () => coachmarkAnchors.unregister(id, measure);
+  }, [id]);
+  return ref;
+};
+var DEFAULT_START_DELAY_MS = 3e3;
+var useCoachmarkTour = (steps, {
+  tourId,
+  showOnce = true,
+  enabled,
+  startDelayMs = DEFAULT_START_DELAY_MS,
+  onComplete,
+  onStepShown,
+  onStepEngaged,
+  onStepDismissed
+}) => {
+  const [activeIndex, setActiveIndex] = React3.useState(null);
+  const startedRef = React3.useRef(false);
+  const finishedRef = React3.useRef(false);
+  const lastShownStepIdRef = React3.useRef(null);
+  const callbacksRef = React3.useRef({ onStepShown, onStepEngaged, onStepDismissed });
+  callbacksRef.current = { onStepShown, onStepEngaged, onStepDismissed };
+  const finish = React3.useCallback(() => {
+    if (finishedRef.current) return;
+    finishedRef.current = true;
+    if (showOnce) markSeenGate(coachmarkGateKey(tourId));
+    coachmarkOverlay.hide();
+    setActiveIndex(null);
+    onComplete == null ? void 0 : onComplete();
+  }, [onComplete, showOnce, tourId]);
+  React3.useEffect(() => {
+    if (!enabled || startedRef.current) return void 0;
+    if (!areCoachmarksEnabled()) return void 0;
+    if (showOnce && hasSeenGate(coachmarkGateKey(tourId))) return void 0;
+    const timer = setTimeout(() => {
+      startedRef.current = true;
+      setActiveIndex(0);
+    }, startDelayMs);
+    return () => clearTimeout(timer);
+  }, [enabled, startDelayMs, showOnce, tourId]);
+  React3.useEffect(() => {
+    if (activeIndex === null) return void 0;
+    if (!enabled) {
+      if (startedRef.current && !finishedRef.current) coachmarkOverlay.hide();
+      return void 0;
+    }
+    if (activeIndex >= steps.length) {
+      finish();
+      return void 0;
+    }
+    const step = steps[activeIndex];
+    if (!step) {
+      finish();
+      return void 0;
+    }
+    let cancelled = false;
+    (async () => {
+      var _a, _b, _c, _d;
+      const rect = step.anchorId ? await coachmarkAnchors.resolve(step.anchorId, {
+        shouldCancel: () => cancelled
+      }) : null;
+      if (cancelled) return;
+      if (lastShownStepIdRef.current !== step.id) {
+        lastShownStepIdRef.current = step.id;
+        (_b = (_a = callbacksRef.current).onStepShown) == null ? void 0 : _b.call(_a, step.id);
+      }
+      coachmarkOverlay.show({
+        message: step.message,
+        targetRect: rect,
+        gesture: (_c = step.gesture) != null ? _c : "none",
+        placement: (_d = step.placement) != null ? _d : "bottom",
+        onEngage: () => {
+          var _a2, _b2, _c2;
+          (_b2 = (_a2 = callbacksRef.current).onStepEngaged) == null ? void 0 : _b2.call(_a2, step.id);
+          (_c2 = step.onEngage) == null ? void 0 : _c2.call(step);
+          setActiveIndex((index) => (index != null ? index : 0) + 1);
+        },
+        onDismiss: () => {
+          var _a2, _b2;
+          (_b2 = (_a2 = callbacksRef.current).onStepDismissed) == null ? void 0 : _b2.call(_a2, step.id);
+          if (activeIndex >= steps.length - 1) {
+            finish();
+          } else {
+            setActiveIndex((index) => (index != null ? index : 0) + 1);
+          }
+        }
+      });
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [activeIndex, steps, finish, enabled]);
+  React3.useEffect(
+    () => () => {
+      if (!finishedRef.current) coachmarkOverlay.hide();
+    },
+    []
+  );
+};
+
+// src/coachmarks/selectTourSteps.ts
+var selectTourSteps = (catalog, selection) => {
+  if (!selection) return catalog;
+  const byId = new Map(catalog.map((item) => [item.id, item]));
+  const seen = /* @__PURE__ */ new Set();
+  const ordered = [];
+  for (const id of selection) {
+    if (seen.has(id)) continue;
+    seen.add(id);
+    const item = byId.get(id);
+    if (item) ordered.push(item);
+  }
+  return ordered;
+};
+
+exports.CoachmarkOverlayHost = CoachmarkOverlayHost;
+exports.CoachmarkProvider = CoachmarkProvider;
+exports.GestureHint = GestureHint;
+exports.SpotlightOverlay = SpotlightOverlay;
+exports.areCoachmarksEnabled = areCoachmarksEnabled;
+exports.coachmarkAnchors = coachmarkAnchors;
+exports.coachmarkGateKey = coachmarkGateKey;
+exports.coachmarkOverlay = coachmarkOverlay;
+exports.getCoachmarkStorage = getCoachmarkStorage;
+exports.hasSeenGate = hasSeenGate;
+exports.isCoachmarkTesting = isCoachmarkTesting;
+exports.markSeenGate = markSeenGate;
+exports.selectTourSteps = selectTourSteps;
+exports.setCoachmarkStorage = setCoachmarkStorage;
+exports.setCoachmarkTesting = setCoachmarkTesting;
+exports.setCoachmarksEnabled = setCoachmarksEnabled;
+exports.showcaseGateKey = showcaseGateKey;
+exports.useCoachmarkAnchor = useCoachmarkAnchor;
+exports.useCoachmarkOverlay = useCoachmarkOverlay;
+exports.useCoachmarkTour = useCoachmarkTour;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map