@wireai/activation 0.14.1 → 0.14.3

package/CHANGELOG.md

@@ -3,6 +3,103 @@
 All notable changes to `@wireai/activation` (formerly `wireai-onboarding`).
 Historical entries below the rename keep the old package name on purpose.
 
+## [0.14.3] - 2026-08-18
+
+**PATCH: no public surface gained, lost or renamed a member.** `SpotlightOverlay`, `GestureHint`
+and `FeatureShowcase` keep their props and their exports; `react-native-reanimated` and
+`@blazejkustra/react-native-onboarding` stay OPTIONAL peers. This finishes the class 0.14.2 started
+with `expo-blur`: **no source under `src/` statically value-imports an optional peer any more.**
+
+### Fixed
+
+- **The coachmarks subpath no longer force-imports its optional peer `react-native-reanimated`.**
+  `SpotlightOverlay` and `GestureHint` both did `import Animated, { … } from
+  "react-native-reanimated"` at module scope, and `coachmarks/index.ts` re-exports them with no
+  wildcard escape — so importing ANYTHING from `@wireai/activation/coachmarks`, even
+  `setCoachmarkStorage`, dragged the peer in, and `@wireai/activation/showcase` inherited the same
+  edge through `GestureHint`. A host that took "optional" at its word hit a Metro resolution
+  failure. The peer is now resolved through a guarded lazy require with a string-literal specifier
+  inside a try/catch (`src/coachmarks/reanimated.ts`, the same shape as `icons/expoIcons.ts` /
+  `coachmarks/expoBlur.ts`), so neither subpath carries a static top-level import of it.
+  - **Degradation, by design:** without the peer both surfaces render STATICALLY at their resting
+    frame. The spotlight keeps its ring, tooltip, copy, scrim/frost and gestures, with no fade-in
+    and no pulse; the gesture glyph keeps its capsules, ring, dot and motion track, at full opacity
+    and no travel. Nothing moves; everything renders. Reduce Motion is still honoured — the kit's
+    own `AccessibilityInfo`-backed hook stands in for the peer's `useReducedMotion`.
+  - The accessor re-exports the peer's own names (`useAnimatedStyle`, `useAnimatedProps`,
+    `withTiming`, …) and the call sites keep calling them unqualified, because reanimated's Babel
+    plugin decides what to workletize by the callee NAME. Hosts that HAVE the peer therefore get
+    byte-for-byte the same worklets, on the UI thread, as before.
+
+- **The showcase subpath no longer force-imports its optional peer
+  `@blazejkustra/react-native-onboarding`.** `FeatureShowcase` imported the pager's default export
+  at module scope, so importing anything from `@wireai/activation/showcase` — even
+  `selectShowcaseSlides` — required a peer npm never installs. It is now resolved through a guarded
+  lazy require (`src/showcase/blazejOnboarding.ts`); only the TYPES are still imported statically,
+  which every toolchain erases.
+  - **Degradation, by design:** absent, the showcase renders null and calls `onDone` from an effect
+    — the SAME path the feature kill switch already takes — so the host's flow always advances
+    rather than stranding the user on a blank screen. The seen gate is deliberately NOT written, so
+    installing the peer later still plays the deck once.
+
+- **A rule file prescribed the inverted optional-require contract, for the second time.**
+  `ai_rules/context_map.md` told the next author that the `expoIcons` callee "MUST be a local `req`,
+  never a literal `require`" — verbatim the `const req = require; req(name)` shape that
+  `icons/expoIcons.ts` autopsies as the 0.8.0 red-box bug (aliasing hides the call from Metro's
+  static collector, so the module never enters the bundle). 0.14.2 corrected this claim in
+  `frequent_rules.md`; this was its second copy, and it was still live. Rewritten to the one correct
+  contract, citing `src/icons/expoIcons.ts:98`.
+
+### Changed
+
+- **`metro/index.js` `OPTIONAL_MODULES` now lists both modules**, and `tsup.config.ts` drops them
+  from its static-peer list (`external` is derived from the union, so they stay external, and the
+  CJS keep-literal-require hook now covers them). The helper's "a statically-imported module must NOT be
+  stubbed" note named exactly these two; it is rewritten, because the kit now has NO
+  statically-imported optional peer — everything it imports statically is a REQUIRED peer whose
+  absence must stay a hard build error.
+- **Docs that promised the old behaviour are corrected in the same wave**, both directions: the
+  coachmarks and showcase barrel docs and the README said importing a subpath "pulls in" these
+  peers (no longer true), while the README/AGENTS peer tables already claimed every optional peer
+  "sits behind a guarded lazy require" (not true until now).
+
+### Added
+
+- **A whole-class ratchet in `test/canary/metroResolution.test.tsx`:** every file under `src/` is
+  scanned for a static value-import of ANY module in `OPTIONAL_MODULES`, with a positive control
+  proving the scanner catches default, named, wrapped multi-line, bare and subpath imports while
+  ignoring `import type` and the guarded require itself. Each optional peer so far has arrived as
+  the same defect; a new one now inherits the check for free. Plus per-module collection tests
+  (Metro marks both new specifiers `isOptional`) and component-level canaries for both peers in
+  both directions, including the absent-reanimated/present-blur combination that pins the frost at
+  full intensity.
+
+## [0.14.2] - 2026-08-18
+
+**PATCH: no public surface gained, lost or renamed a member.** `SpotlightOverlay` keeps its props
+and its export; `expo-blur` stays an OPTIONAL peer.
+
+### Fixed
+
+- **The coachmarks subpath no longer force-imports its optional peer `expo-blur`.**
+  `SpotlightOverlay` did `import { BlurView } from "expo-blur"` at module scope and built its
+  animated blur component at module load, and `coachmarks/index.ts` re-exports the overlay with no
+  wildcard escape — so importing ANYTHING from `@wireai/activation/coachmarks`, even
+  `setCoachmarkStorage`, dragged `expo-blur` in. A host that took the peer's "optional" at its word
+  and skipped installing it hit a Metro resolution failure the moment it touched coachmarks, which
+  is why the AI Mobile Launcher tiers (and any Expo Go build) could not adopt the capability. The
+  peer is now resolved through a guarded lazy require with a string-literal specifier inside a
+  try/catch (the same shape as `icons/expoIcons.ts` / `device/appVersion.ts`), and the animated
+  component is built once on first render, so the subpath carries no static top-level import of the
+  peer.
+  - **Degradation, by design:** when `expo-blur` is absent the spotlight drops the frost to an
+    equivalent dimmed scrim. The ring, tooltip and gestures behave identically — a missing
+    decorative frost never blanks a tour, never crashes, never renders empty.
+  - `metro/index.js` `OPTIONAL_MODULES` and `tsup.config.ts` now treat `expo-blur` as a guarded
+    optional peer (moved off the static-peer list), so the built `dist/` collects it as optional and
+    the metro helper's empty-module safety net covers it for hosts that disable Metro's
+    `allowOptionalDependencies`.
+
 ## [0.14.1] - 2026-08-18
 
 Two rulings from the 0.14.0 audit, applied. Both were reproduced there and left for a decision

package/README.md

@@ -801,8 +801,12 @@ consuming app, since the kit has no local TS install).
 
 The kit ships a performance-first guided-tour engine on a **subpath** so the main
 barrel stays dependency-free — import it from `@wireai/activation/coachmarks`. It
-pulls in two **optional** peers only when you use it: `react-native-reanimated`
-(UI-thread gesture + ring animation) and `expo-blur` (the frosted spotlight).
+can USE two **optional** peers, and needs neither: `react-native-reanimated`
+(UI-thread gesture + ring animation) and `expo-blur` (the frosted spotlight). Both
+sit behind a guarded lazy require, so importing the subpath never pulls them into
+your bundle. Without reanimated the tour renders statically (the ring, tooltip,
+copy and gestures are unchanged — nothing animates); without expo-blur the frost
+becomes a plain dimmed scrim.
 Source consumers get it through the existing `@wireai/activation/*` tsconfig path
 mapping; installed apps resolve the subpath export.
 
@@ -922,6 +926,12 @@ theme colors, and gates once through the same storage as the tours
 (`wire_showcase_<id>_seen`; `isTestingCoachmark` bypasses it). If already seen it
 renders nothing and calls `onDone` from an effect.
 
+The pager is a guarded lazy require, so importing `@wireai/activation/showcase`
+does not pull it into your bundle. If you never install it the showcase renders
+nothing and calls `onDone` — your flow advances exactly as if the deck had been
+seen — and the seen gate is NOT written, so installing the peer later still plays
+the deck once.
+
 **Recommended placement (v0.3.0+): AFTER `onComplete`, as a personalized value
 bridge.** The user just told you what they want in `result.answers`, so the
 terminal recap is the highest-value slot to show the 2-3 slides that answer it,

package/dist/coachmarks/index.d.mts

@@ -245,10 +245,18 @@ declare const selectTourSteps: <T extends {
 }>(catalog: T[], selection?: string[]) => T[];
 
 /**
- * Abstract gesture pictogram shown beside a coachmark tooltip. Pure reanimated —
- * every animation runs on the UI thread (shared values + worklets), never
- * setState, so it costs nothing on the JS thread. Honors Reduce Motion by
- * dropping the motion loop and rendering the glyph static.
+ * Abstract gesture pictogram shown beside a coachmark tooltip. With the OPTIONAL
+ * `react-native-reanimated` peer installed every animation runs on the UI thread
+ * (shared values + worklets), never setState, so it costs nothing on the JS
+ * thread. Honors Reduce Motion by dropping the motion loop and rendering the
+ * glyph static.
+ *
+ * The peer is reached through the guarded lazy require in `reanimated.ts`, never
+ * a static import, so `@wireai/activation/coachmarks` (and `/showcase`, which
+ * reaches this component through FeatureShowcase) builds on a host that never
+ * installed it. Absent, the glyph renders STATICALLY at its resting frame — the
+ * same capsules, ring, dot and motion track, at full opacity and no travel, with
+ * one render instead of a UI-thread loop. The pictogram never disappears.
  *
  * NO drawn-hand anatomy. Swipes render the standard two-finger swipe glyph: two
  * rounded vertical capsules (an abstract index + middle finger, slightly

package/dist/coachmarks/index.d.ts

@@ -245,10 +245,18 @@ declare const selectTourSteps: <T extends {
 }>(catalog: T[], selection?: string[]) => T[];
 
 /**
- * Abstract gesture pictogram shown beside a coachmark tooltip. Pure reanimated —
- * every animation runs on the UI thread (shared values + worklets), never
- * setState, so it costs nothing on the JS thread. Honors Reduce Motion by
- * dropping the motion loop and rendering the glyph static.
+ * Abstract gesture pictogram shown beside a coachmark tooltip. With the OPTIONAL
+ * `react-native-reanimated` peer installed every animation runs on the UI thread
+ * (shared values + worklets), never setState, so it costs nothing on the JS
+ * thread. Honors Reduce Motion by dropping the motion loop and rendering the
+ * glyph static.
+ *
+ * The peer is reached through the guarded lazy require in `reanimated.ts`, never
+ * a static import, so `@wireai/activation/coachmarks` (and `/showcase`, which
+ * reaches this component through FeatureShowcase) builds on a host that never
+ * installed it. Absent, the glyph renders STATICALLY at its resting frame — the
+ * same capsules, ring, dot and motion track, at full opacity and no travel, with
+ * one render instead of a UI-thread loop. The pictogram never disappears.
  *
  * NO drawn-hand anatomy. Swipes render the standard two-finger swipe glyph: two
  * rounded vertical capsules (an abstract index + middle finger, slightly

package/dist/coachmarks/index.js

@@ -2,16 +2,18 @@
 
 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
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 
 // src/features/defaults.ts
 var defaultWireFeatures = Object.freeze({
@@ -90,8 +92,8 @@ 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;
+  const cached3 = await readCachedFeatures(storage, key);
+  return (_a = cached3 == null ? void 0 : cached3.features) != null ? _a : defaultWireFeatures;
 };
 var fetchWithTimeout = async (url, apiKey, timeoutMs) => {
   const controller = typeof AbortController !== "undefined" ? new AbortController() : void 0;
@@ -329,6 +331,198 @@ var useOnboardingTheme = () => {
   const ctx = React3.useContext(OnboardingThemeContext);
   return ctx != null ? ctx : mergeTheme();
 };
+
+// src/coachmarks/expoBlur.ts
+var runtimeRequire = (moduleName) => {
+  if (moduleName !== "expo-blur") return void 0;
+  if (typeof __require !== "function") return void 0;
+  try {
+    return require("expo-blur");
+  } catch {
+    return void 0;
+  }
+};
+var interop = (mod) => {
+  if (!mod || typeof mod !== "object") return void 0;
+  const ns = mod;
+  if (ns.BlurView) return ns;
+  const def = mod.default;
+  if (def && typeof def === "object") return def;
+  return ns;
+};
+var asComponent = (value) => {
+  if (typeof value === "function") return value;
+  if (value && typeof value === "object" && "$$typeof" in value) {
+    return value;
+  }
+  return void 0;
+};
+var cached;
+var resolveBlurView = (requireModule = runtimeRequire) => {
+  try {
+    if (cached === void 0 || requireModule !== runtimeRequire) {
+      const resolved = interop(requireModule("expo-blur"));
+      const component = resolved ? asComponent(resolved.BlurView) : void 0;
+      if (requireModule === runtimeRequire) cached = component != null ? component : null;
+      return component;
+    }
+    if (cached === null) return void 0;
+    return cached;
+  } catch {
+    return void 0;
+  }
+};
+var lastKnown = false;
+var useReducedMotion = () => {
+  const [reduced, setReduced] = React3.useState(lastKnown);
+  React3.useEffect(() => {
+    let mounted = true;
+    reactNative.AccessibilityInfo.isReduceMotionEnabled().then((value) => {
+      lastKnown = value;
+      if (mounted) setReduced(value);
+    }).catch(() => {
+    });
+    const sub = reactNative.AccessibilityInfo.addEventListener("reduceMotionChanged", (value) => {
+      lastKnown = value;
+      setReduced(value);
+    });
+    return () => {
+      mounted = false;
+      sub == null ? void 0 : sub.remove();
+    };
+  }, []);
+  return reduced;
+};
+
+// src/coachmarks/reanimated.ts
+var runtimeRequire2 = (moduleName) => {
+  if (moduleName !== "react-native-reanimated") return void 0;
+  if (typeof __require !== "function") return void 0;
+  try {
+    return require("react-native-reanimated");
+  } catch {
+    return void 0;
+  }
+};
+var useStaticSharedValue = (initial) => {
+  const [, bump] = React3.useReducer((n) => n + 1, 0);
+  const box = React3.useRef(null);
+  if (box.current === null) {
+    let current2 = initial;
+    box.current = {
+      get value() {
+        return current2;
+      },
+      set value(next) {
+        if (Object.is(next, current2)) return;
+        current2 = next;
+        bump();
+      }
+    };
+  }
+  return box.current;
+};
+var runWorklet = (factory, fallback) => {
+  var _a;
+  try {
+    return (_a = factory()) != null ? _a : fallback;
+  } catch {
+    return fallback;
+  }
+};
+var StaticAnimatedView = React3.forwardRef(function StaticAnimatedView2({ entering: _entering, exiting: _exiting, children, ...rest }, ref) {
+  return React3.createElement(reactNative.View, { ...rest, ref }, children);
+});
+var staticCreateAnimatedComponent = (component) => function StaticAnimatedComponent({ animatedProps, ...rest }) {
+  return React3.createElement(component, { ...rest, ...animatedProps });
+};
+var staticApi = {
+  present: false,
+  View: StaticAnimatedView,
+  createAnimatedComponent: staticCreateAnimatedComponent,
+  useSharedValue: useStaticSharedValue,
+  useAnimatedStyle: (factory) => runWorklet(factory, {}),
+  useAnimatedProps: (factory) => runWorklet(factory, {}),
+  useReducedMotion,
+  withTiming: (toValue) => toValue,
+  withRepeat: (animation) => animation,
+  withSequence: (...animations) => {
+    var _a;
+    return (_a = animations[animations.length - 1]) != null ? _a : 0;
+  },
+  withDelay: (_ms, animation) => animation,
+  fadeIn: () => void 0,
+  fadeOut: () => void 0
+};
+var isFunction = (value) => typeof value === "function";
+var isComponent = (value) => typeof value === "function" || !!value && typeof value === "object" && "$$typeof" in value;
+var fromModule = (mod) => {
+  var _a, _b;
+  if (!mod || typeof mod !== "object") return void 0;
+  const ns = mod;
+  const def = ns.default && typeof ns.default === "object" ? ns.default : void 0;
+  const pick = (name) => {
+    var _a2;
+    return (_a2 = ns[name]) != null ? _a2 : def == null ? void 0 : def[name];
+  };
+  const view = (_a = def == null ? void 0 : def.View) != null ? _a : ns.View;
+  const createAnimated = (_b = def == null ? void 0 : def.createAnimatedComponent) != null ? _b : ns.createAnimatedComponent;
+  const hooks = {
+    useSharedValue: pick("useSharedValue"),
+    useAnimatedStyle: pick("useAnimatedStyle"),
+    useAnimatedProps: pick("useAnimatedProps"),
+    useReducedMotion: pick("useReducedMotion"),
+    withTiming: pick("withTiming"),
+    withRepeat: pick("withRepeat"),
+    withSequence: pick("withSequence"),
+    withDelay: pick("withDelay")
+  };
+  const fadeIn = pick("FadeIn");
+  const fadeOut = pick("FadeOut");
+  if (!isComponent(view) || !isFunction(createAnimated)) return void 0;
+  if (Object.values(hooks).some((member) => !isFunction(member))) return void 0;
+  if (!fadeIn || !fadeOut) return void 0;
+  const api2 = {
+    present: true,
+    View: view,
+    createAnimatedComponent: createAnimated,
+    ...hooks,
+    fadeIn: (durationMs) => fadeIn.duration(durationMs),
+    fadeOut: (durationMs) => fadeOut.duration(durationMs)
+  };
+  return api2;
+};
+var cached2;
+var resolveReanimated = (requireModule = runtimeRequire2) => {
+  var _a;
+  try {
+    if (cached2 === void 0 || requireModule !== runtimeRequire2) {
+      const resolved = (_a = fromModule(requireModule("react-native-reanimated"))) != null ? _a : staticApi;
+      if (requireModule === runtimeRequire2) cached2 = resolved;
+      return resolved;
+    }
+    return cached2;
+  } catch {
+    return staticApi;
+  }
+};
+var api = () => resolveReanimated();
+var Animated = {
+  get View() {
+    return api().View;
+  },
+  createAnimatedComponent: (component) => api().createAnimatedComponent(component)
+};
+var FadeIn = { duration: (durationMs) => api().fadeIn(durationMs) };
+var FadeOut = { duration: (durationMs) => api().fadeOut(durationMs) };
+var useSharedValue = (initial) => api().useSharedValue(initial);
+var useAnimatedStyle = (factory) => api().useAnimatedStyle(factory);
+var useAnimatedProps = (factory) => api().useAnimatedProps(factory);
+var useReducedMotion2 = () => api().useReducedMotion();
+var withTiming = (toValue, config) => api().withTiming(toValue, config);
+var withRepeat = (animation, count, reverse) => api().withRepeat(animation, count, reverse);
+var withSequence = (...animations) => api().withSequence(...animations);
+var withDelay = (ms, animation) => api().withDelay(ms, animation);
 var SWIPE_MS = 700;
 var TAP_MS = 320;
 var SPREAD_MS = 620;
@@ -386,29 +580,29 @@ var GestureHintComponent = ({
   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 translate = useSharedValue(0);
+  const opacity = useSharedValue(1);
+  const pulse = useSharedValue(1);
+  const spread = useSharedValue(0);
+  const reduced = useReducedMotion2();
   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 })
+      pulse.value = withRepeat(
+        withSequence(
+          withTiming(0.82, { duration: TAP_MS }),
+          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 })
+      opacity.value = withRepeat(
+        withSequence(
+          withTiming(0.55, { duration: TAP_MS }),
+          withTiming(1, { duration: TAP_MS })
         ),
         -1,
         false
@@ -416,48 +610,48 @@ var GestureHintComponent = ({
       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 })
+      spread.value = withRepeat(
+        withSequence(
+          withTiming(size * 0.26, { duration: SPREAD_MS }),
+          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 }))
+    translate.value = withRepeat(
+      withSequence(
+        withTiming(0, { duration: 0 }),
+        withTiming(-26, { duration: SWIPE_MS }),
+        withDelay(140, 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 }))
+    opacity.value = withRepeat(
+      withSequence(
+        withTiming(1, { duration: SWIPE_MS / 2 }),
+        withTiming(0, { duration: SWIPE_MS / 2 }),
+        withDelay(140, withTiming(1, { duration: 0 }))
       ),
       -1,
       false
     );
     return void 0;
   }, [type, reduced, isTap, isSpread, translate, opacity, pulse, spread, size]);
-  const swipeAnimatedStyle = Animated.useAnimatedStyle(() => ({
+  const swipeAnimatedStyle = useAnimatedStyle(() => ({
     opacity: opacity.value,
     transform: [{ translateY: translate.value }]
   }));
-  const tapAnimatedStyle = Animated.useAnimatedStyle(() => ({
+  const tapAnimatedStyle = useAnimatedStyle(() => ({
     opacity: opacity.value,
     transform: [{ scale: pulse.value }]
   }));
-  const spreadLeftStyle = Animated.useAnimatedStyle(() => ({
+  const spreadLeftStyle = useAnimatedStyle(() => ({
     transform: [{ translateX: -spread.value }]
   }));
-  const spreadRightStyle = Animated.useAnimatedStyle(() => ({
+  const spreadRightStyle = useAnimatedStyle(() => ({
     transform: [{ translateX: spread.value }]
   }));
   if (type === "none") return null;
@@ -469,7 +663,7 @@ var GestureHintComponent = ({
         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(Animated.View, { style: swipeAnimatedStyle, pointerEvents: "none", children: customGlyph != null ? customGlyph : /* @__PURE__ */ jsxRuntime.jsx(FingerPair, { size, color }) }),
           /* @__PURE__ */ jsxRuntime.jsx(MotionTrack, { size, color })
         ] })
       }
@@ -484,16 +678,16 @@ var GestureHintComponent = ({
       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 }) })
+      /* @__PURE__ */ jsxRuntime.jsx(Animated.View, { style: spreadLeftStyle, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: capsule }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Animated.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: [
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles.tapWrap, { width: size, height: size }], pointerEvents: "none", children: customGlyph ? /* @__PURE__ */ jsxRuntime.jsx(Animated.View, { style: tapAnimatedStyle, pointerEvents: "none", children: customGlyph }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      Animated__default.default.View,
+      Animated.View,
       {
         style: [
           styles.tapRing,
@@ -543,7 +737,6 @@ var styles = reactNative.StyleSheet.create({
 });
 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;
@@ -561,31 +754,35 @@ var SpotlightOverlayComponent = ({
   accentTextColor
 }) => {
   const { height: screenH } = reactNative.useWindowDimensions();
-  const reduced = Animated.useReducedMotion();
+  const reduced = useReducedMotion2();
   const theme = useOnboardingTheme();
   const accent = accentColor != null ? accentColor : theme.colors.primary;
   const accentText = accentTextColor != null ? accentTextColor : theme.colors.onPrimary;
+  const AnimatedBlurView = React3.useMemo(() => {
+    const BlurView = resolveBlurView();
+    return BlurView ? Animated.createAnimatedComponent(BlurView) : null;
+  }, []);
   const showGesture = gesture !== "none" && gesture !== "tap" && gesture !== "double_tap";
-  const intensity = Animated.useSharedValue(0);
-  const ringScale = Animated.useSharedValue(1);
+  const intensity = useSharedValue(0);
+  const ringScale = useSharedValue(1);
   React3.useEffect(() => {
-    intensity.value = Animated.withTiming(BLUR_INTENSITY, { duration: FADE_MS });
+    intensity.value = 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 })
+    ringScale.value = withRepeat(
+      withSequence(
+        withTiming(1.06, { duration: 700 }),
+        withTiming(1, { duration: 700 })
       ),
       -1,
       true
     );
   }, [reduced, ringScale]);
-  const blurAnimatedProps = Animated.useAnimatedProps(() => ({
+  const blurAnimatedProps = useAnimatedProps(() => ({
     intensity: intensity.value
   }));
-  const ringAnimatedStyle = Animated.useAnimatedStyle(() => ({
+  const ringAnimatedStyle = useAnimatedStyle(() => ({
     transform: [{ scale: ringScale.value }]
   }));
   const geometry = React3.useMemo(() => {
@@ -607,19 +804,29 @@ var SpotlightOverlayComponent = ({
     };
   }, [targetRect, placement, screenH]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Animated__default.default.View,
+    Animated.View,
     {
       style: [reactNative.StyleSheet.absoluteFill, styles2.root],
-      entering: Animated.FadeIn.duration(FADE_MS),
-      exiting: Animated.FadeOut.duration(FADE_MS),
+      entering: FadeIn.duration(FADE_MS),
+      exiting: FadeOut.duration(FADE_MS),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        AnimatedBlurView ? /* @__PURE__ */ jsxRuntime.jsx(
           AnimatedBlurView,
           {
             tint: "dark",
             animatedProps: blurAnimatedProps,
             style: reactNative.StyleSheet.absoluteFill
           }
+        ) : (
+          // `expo-blur` absent → a plain dimmed scrim stands in for the frost. Same dark backdrop
+          // the tour reads against, so the ring, tooltip and gestures behave identically.
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Animated.View,
+            {
+              style: [reactNative.StyleSheet.absoluteFill, styles2.scrim],
+              pointerEvents: "none"
+            }
+          )
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Pressable,
@@ -631,7 +838,7 @@ var SpotlightOverlayComponent = ({
           }
         ),
         geometry && /* @__PURE__ */ jsxRuntime.jsx(
-          Animated__default.default.View,
+          Animated.View,
           {
             style: [
               styles2.ring,
@@ -686,6 +893,11 @@ var styles2 = reactNative.StyleSheet.create({
     zIndex: 9999,
     elevation: 9999
   },
+  // Fallback backdrop when `expo-blur` is absent. A structural dim (not a brand token), tuned to
+  // read like the dark blur at BLUR_INTENSITY so the ring + tooltip keep the same contrast.
+  scrim: {
+    backgroundColor: "rgba(0, 0, 0, 0.55)"
+  },
   ring: {
     position: "absolute",
     borderWidth: 2.5,