@wireai/activation 0.7.0 → 0.9.0

package/dist/reviews/index.mjs

@@ -1,5 +1,5 @@
-import React4, { createContext, forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle, useMemo, useContext } from 'react';
-import { StyleSheet, Animated, Easing, BackHandler, Modal, Pressable, Text, AccessibilityInfo, View, TextInput, Linking, Platform } from 'react-native';
+import React7, { createContext, forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle, useMemo, useContext } from 'react';
+import { StyleSheet, Easing, Animated, BackHandler, Modal, Pressable, Text, View, AccessibilityInfo, TextInput, Linking, Platform } from 'react-native';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
@@ -88,10 +88,20 @@ var buttonLabelStyle = (f) => {
 };
 
 // src/motion/motionSpec.ts
+var WIRE_BEZIER = [0.16, 1, 0.3, 1];
 var REDUCED_FADE_MS = 120;
 var BUTTON_PRESS_SCALE = 0.975;
 var REDUCED_PRESS_OPACITY = 0.85;
 var BUTTON_PRESS_SPRING = { friction: 8, tension: 240 };
+var CARD_ENTER_MS = 220;
+var CARD_EXIT_MS = 180;
+var CARD_EXIT_LEAD_MS = 80;
+var CARD_SLIDE_PX = 26;
+var CARD_ENTER_SCALE_FROM = 0.96;
+var CARD_SPRING = { damping: 14, stiffness: 180, mass: 1 };
+var LOADER_HANDOFF_FADE_MS = 120;
+var STATUS_POP_SPRING = { friction: 6, tension: 200 };
+var STATUS_POP_SCALE_FROM = 0.4;
 var durationScale = 1;
 var scaledMs = (ms) => Math.round(ms * durationScale);
 var lastKnown = false;
@@ -205,11 +215,282 @@ var _Button = ({
     }
   );
 };
-var Button = React4.memo(_Button);
+var Button = React7.memo(_Button);
 var styles = StyleSheet.create({
   base: { alignItems: "center", justifyContent: "center" },
   fill: { width: "100%" }
 });
+var _DoneCheck = ({ theme, size = 48 }) => {
+  const reduced = useReducedMotion();
+  const pop = useRef(new Animated.Value(reduced ? 1 : 0)).current;
+  useEffect(() => {
+    if (reduced) {
+      pop.setValue(1);
+      return;
+    }
+    const anim = Animated.spring(pop, {
+      toValue: 1,
+      friction: STATUS_POP_SPRING.friction,
+      tension: STATUS_POP_SPRING.tension,
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [pop, reduced]);
+  const scale = pop.interpolate({
+    inputRange: [0, 1],
+    outputRange: [STATUS_POP_SCALE_FROM, 1]
+  });
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: [
+        styles2.ring,
+        {
+          width: size,
+          height: size,
+          borderRadius: theme.radius.full,
+          backgroundColor: theme.colors.success,
+          opacity: pop,
+          transform: [{ scale }]
+        }
+      ],
+      children: /* @__PURE__ */ jsx(
+        Animated.Text,
+        {
+          style: [
+            styles2.glyph,
+            { color: theme.colors.onPrimary, fontSize: Math.round(size * 0.5), fontFamily: theme.fonts.bold }
+          ],
+          children: "\u2713"
+        }
+      )
+    }
+  );
+};
+var DoneCheck = React7.memo(_DoneCheck);
+DoneCheck.displayName = "DoneCheck";
+var styles2 = StyleSheet.create({
+  ring: { alignItems: "center", justifyContent: "center", alignSelf: "center" },
+  glyph: { includeFontPadding: false, textAlign: "center" }
+});
+var easeWire = Easing.bezier(...WIRE_BEZIER);
+var _CardHandoff = ({
+  transitionKey,
+  variant = "slide",
+  direction = "forward",
+  layout = "fill",
+  children
+}) => {
+  const reduced = useReducedMotion();
+  const [leaving, setLeaving] = useState(null);
+  const enterT = useRef(new Animated.Value(0)).current;
+  const exitT = useRef(new Animated.Value(0)).current;
+  const prev = useRef({ key: transitionKey, node: children, variant });
+  const running = useRef({});
+  const mounted = useRef(false);
+  useEffect(() => {
+    var _a, _b;
+    const last = prev.current;
+    prev.current = { key: transitionKey, node: children, variant };
+    if (!mounted.current) {
+      mounted.current = true;
+      running.current.enter = startEnter(enterT, variant, reduced, 0);
+      return;
+    }
+    if (last.key === transitionKey) return;
+    (_a = running.current.enter) == null ? void 0 : _a.stop();
+    (_b = running.current.exit) == null ? void 0 : _b.stop();
+    setLeaving(last);
+    enterT.setValue(0);
+    exitT.setValue(0);
+    const exitDuration = reduced ? REDUCED_FADE_MS : last.variant === "fade" ? LOADER_HANDOFF_FADE_MS : CARD_EXIT_MS;
+    const exit = Animated.timing(exitT, {
+      toValue: 1,
+      duration: scaledMs(exitDuration),
+      easing: easeWire,
+      useNativeDriver: true
+    });
+    running.current.exit = exit;
+    exit.start();
+    const enter = startEnter(
+      enterT,
+      variant,
+      reduced,
+      reduced ? 0 : CARD_EXIT_LEAD_MS,
+      () => setLeaving(null)
+    );
+    running.current.enter = enter;
+  });
+  useEffect(
+    () => () => {
+      var _a, _b;
+      (_a = running.current.enter) == null ? void 0 : _a.stop();
+      (_b = running.current.exit) == null ? void 0 : _b.stop();
+    },
+    []
+  );
+  const enterStyle = {
+    opacity: enterT,
+    transform: transformFor(variant, enterT, reduced, "enter", direction)
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    leaving ? /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        pointerEvents: "none",
+        style: [
+          StyleSheet.absoluteFill,
+          {
+            opacity: exitT.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }),
+            // The CURRENT direction drives BOTH layers: one transition, one geography.
+            transform: transformFor(leaving.variant, exitT, reduced, "exit", direction)
+          }
+        ],
+        children: leaving.node
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(Animated.View, { style: [layout === "fill" ? styles3.fill : null, enterStyle], children }, variant)
+  ] });
+};
+var startEnter = (value, variant, reduced, delay, onDone) => {
+  value.setValue(0);
+  const anim = !reduced && variant === "spring" ? Animated.spring(value, {
+    toValue: 1,
+    delay: scaledMs(delay),
+    damping: CARD_SPRING.damping,
+    stiffness: CARD_SPRING.stiffness,
+    mass: CARD_SPRING.mass,
+    useNativeDriver: true
+  }) : Animated.timing(value, {
+    toValue: 1,
+    delay: scaledMs(delay),
+    duration: scaledMs(
+      reduced ? REDUCED_FADE_MS : variant === "fade" ? LOADER_HANDOFF_FADE_MS : CARD_ENTER_MS
+    ),
+    easing: easeWire,
+    useNativeDriver: true
+  });
+  anim.start(({ finished }) => {
+    if (finished) onDone == null ? void 0 : onDone();
+  });
+  return anim;
+};
+var transformFor = (variant, t, reduced, layer, travel) => {
+  if (reduced || variant === "fade") return [];
+  if (variant === "spring" && layer === "enter") {
+    return [{ scale: t.interpolate({ inputRange: [0, 1], outputRange: [CARD_ENTER_SCALE_FROM, 1] }) }];
+  }
+  const slide = travel === "forward" ? CARD_SLIDE_PX : -CARD_SLIDE_PX;
+  return [
+    {
+      translateX: t.interpolate({
+        inputRange: [0, 1],
+        outputRange: layer === "enter" ? [slide, 0] : [0, -slide]
+      })
+    }
+  ];
+};
+var CardHandoff = React7.memo(_CardHandoff);
+var styles3 = StyleSheet.create({
+  fill: { flex: 1 }
+});
+var easeWire2 = Easing.bezier(...WIRE_BEZIER);
+var _ModalPaneHost = ({
+  paneKey,
+  direction = "forward",
+  header,
+  children
+}) => {
+  const reduced = useReducedMotion();
+  const height = useRef(new Animated.Value(0)).current;
+  const measured = useRef(null);
+  const [sized, setSized] = useState(false);
+  const paneChanged = useRef(false);
+  const running = useRef(null);
+  useEffect(() => {
+    paneChanged.current = true;
+  }, [paneKey]);
+  useEffect(() => () => {
+    var _a;
+    return (_a = running.current) == null ? void 0 : _a.stop();
+  }, []);
+  const onLayout = useCallback(
+    (event) => {
+      var _a;
+      const next = Math.round(event.nativeEvent.layout.height);
+      if (!next) return;
+      const previous = measured.current;
+      if (previous !== null && Math.abs(previous - next) < 1) return;
+      const first = previous === null;
+      const ease = !first && !reduced && paneChanged.current;
+      paneChanged.current = false;
+      measured.current = next;
+      (_a = running.current) == null ? void 0 : _a.stop();
+      if (!ease) {
+        height.setValue(next);
+        if (first) setSized(true);
+        return;
+      }
+      const anim = Animated.timing(height, {
+        toValue: next,
+        duration: scaledMs(CARD_ENTER_MS),
+        easing: easeWire2,
+        // height is layout, not transform — see the header note.
+        useNativeDriver: false
+      });
+      running.current = anim;
+      anim.start();
+    },
+    [height, reduced]
+  );
+  return /* @__PURE__ */ jsx(Animated.View, { style: sized ? { height, overflow: "hidden" } : void 0, children: /* @__PURE__ */ jsxs(View, { onLayout, style: styles4.pane, children: [
+    header,
+    /* @__PURE__ */ jsx(CardHandoff, { transitionKey: paneKey, direction, layout: "auto", variant: "slide", children })
+  ] }) });
+};
+var ModalPaneHost = React7.memo(_ModalPaneHost);
+ModalPaneHost.displayName = "ModalPaneHost";
+var styles4 = StyleSheet.create({
+  pane: { width: "100%" }
+});
+
+// src/haptics/haptics.ts
+var play = async (tone) => {
+  try {
+    const mod = await import('expo-haptics');
+    if (!mod) return false;
+    if (tone === "selection") {
+      await mod.selectionAsync();
+      return true;
+    }
+    if (tone === "light") {
+      await mod.impactAsync(mod.ImpactFeedbackStyle.Light);
+      return true;
+    }
+    await mod.notificationAsync(mod.NotificationFeedbackType.Success);
+    return true;
+  } catch {
+    return false;
+  }
+};
+var playHaptic = (tone) => {
+  void play(tone);
+};
+
+// src/theme/mergeThemeOver.ts
+var mergeThemeOver = (base, override) => {
+  if (!override) return base;
+  return {
+    colors: { ...base.colors, ...override.colors },
+    fonts: { ...base.fonts, ...override.fonts },
+    radius: { ...base.radius, ...override.radius },
+    spacing: { ...base.spacing, ...override.spacing },
+    button: { ...base.button, ...override.button }
+  };
+};
 
 // src/reviews/decision.ts
 var decideReview = (local, decision) => decision != null ? decision : local;
@@ -352,25 +633,25 @@ var _CenteredModal = forwardRef(
           /* @__PURE__ */ jsx(
             Animated.View,
             {
-              style: [styles2.backdrop, { opacity: backdropOpacity }],
+              style: [styles5.backdrop, { opacity: backdropOpacity }],
               pointerEvents: "none"
             }
           ),
           /* @__PURE__ */ jsx(
             Pressable,
             {
-              style: styles2.fill,
+              style: styles5.fill,
               onPress: onBackdrop,
               accessibilityRole: "button",
               accessibilityLabel: "Dismiss",
-              children: /* @__PURE__ */ jsx(SafeAreaView, { style: styles2.center, pointerEvents: "box-none", children: /* @__PURE__ */ jsx(Pressable, { onPress: () => {
-              }, style: styles2.cardWrap, children: /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ jsx(SafeAreaView, { style: styles5.center, pointerEvents: "box-none", children: /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+              }, style: styles5.cardWrap, children: /* @__PURE__ */ jsx(
                 Animated.View,
                 {
                   accessibilityViewIsModal: true,
                   accessibilityRole: "alert",
                   style: [
-                    styles2.card,
+                    styles5.card,
                     {
                       backgroundColor: theme.colors.surface,
                       borderRadius: theme.radius.lg,
@@ -391,8 +672,8 @@ var _CenteredModal = forwardRef(
   }
 );
 _CenteredModal.displayName = "CenteredModal";
-var CenteredModal = React4.memo(_CenteredModal);
-var styles2 = StyleSheet.create({
+var CenteredModal = React7.memo(_CenteredModal);
+var styles5 = StyleSheet.create({
   fill: { flex: 1 },
   backdrop: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, backgroundColor: "#000" },
   center: { flex: 1, alignItems: "center", justifyContent: "center", padding: 24 },
@@ -457,6 +738,26 @@ var submitReview = (target, review) => {
   } catch {
   }
 };
+var fetchReviewDecision = async (target, options = {}) => {
+  if (!(target == null ? void 0 : target.serverUrl)) return null;
+  try {
+    const base = target.serverUrl.replace(/\/$/, "");
+    const params = new URLSearchParams();
+    if (options.sessionId) params.set("session_id", options.sessionId);
+    if (options.deviceKey) params.set("device_key", options.deviceKey);
+    const qs = params.toString();
+    const url = `${base}/v1/reviews/decision${qs ? `?${qs}` : ""}`;
+    const headers = {};
+    if (target.apiKey) headers.Authorization = `Bearer ${target.apiKey}`;
+    const res = await fetch(url, { headers });
+    if (!res || !res.ok) return null;
+    const json = await res.json();
+    if (!json || typeof json.fire !== "boolean") return null;
+    return json;
+  } catch {
+    return null;
+  }
+};
 var reportAppEvent = (target, name, options = {}) => {
   if (!(target == null ? void 0 : target.serverUrl) || !name) return;
   try {
@@ -481,16 +782,6 @@ var reportAppEvent = (target, name, options = {}) => {
   } catch {
   }
 };
-var mergeThemeOver = (base, override) => {
-  if (!override) return base;
-  return {
-    colors: { ...base.colors, ...override.colors },
-    fonts: { ...base.fonts, ...override.fonts },
-    radius: { ...base.radius, ...override.radius },
-    spacing: { ...base.spacing, ...override.spacing },
-    button: { ...base.button, ...override.button }
-  };
-};
 var _ReviewGate = ({
   appName,
   store,
@@ -508,26 +799,26 @@ var _ReviewGate = ({
   const active = useOnboardingTheme();
   const t = useMemo(() => mergeThemeOver(active, themeOverride), [active, themeOverride]);
   const mode = resolvePresentation(presentation);
-  const modalRef = React4.useRef(null);
+  const modalRef = React7.useRef(null);
   const [phase, setPhase] = useState("rating");
   const [stars, setStars] = useState(0);
   const [hovered, setHovered] = useState(0);
   const [feedback, setFeedback] = useState("");
   const [suggestion, setSuggestion] = useState("");
-  const shownRef = React4.useRef(false);
-  const onShownRef = React4.useRef(onShown);
-  const onEventRef = React4.useRef(onEvent);
+  const shownRef = React7.useRef(false);
+  const onShownRef = React7.useRef(onShown);
+  const onEventRef = React7.useRef(onEvent);
   onShownRef.current = onShown;
   onEventRef.current = onEvent;
-  React4.useEffect(() => {
+  React7.useEffect(() => {
     var _a, _b;
     if (shownRef.current) return;
     shownRef.current = true;
     (_a = onShownRef.current) == null ? void 0 : _a.call(onShownRef);
     (_b = onEventRef.current) == null ? void 0 : _b.call(onEventRef, { name: "review_prompt_shown", id });
   }, []);
-  const resolveTimer = React4.useRef(null);
-  React4.useEffect(() => {
+  const resolveTimer = React7.useRef(null);
+  React7.useEffect(() => {
     return () => {
       if (resolveTimer.current) clearTimeout(resolveTimer.current);
     };
@@ -535,6 +826,30 @@ var _ReviewGate = ({
   const resolve = useCallback(() => {
     onResolved == null ? void 0 : onResolved();
   }, [onResolved]);
+  const postedRef = React7.useRef(false);
+  const postOnce = useCallback(
+    (body) => {
+      if (postedRef.current) return;
+      postedRef.current = true;
+      submitReview(target, body);
+    },
+    [target]
+  );
+  const abandonRef = React7.useRef(() => {
+  });
+  abandonRef.current = () => {
+    if (postedRef.current || stars < 1) return;
+    postOnce(
+      buildReviewSubmission({
+        stars,
+        feedbackText: feedback,
+        suggestion,
+        sessionId,
+        meta: { ...meta, abandoned: true }
+      })
+    );
+  };
+  React7.useEffect(() => () => abandonRef.current(), []);
   const resolveWithDelay = useCallback(() => {
     if (resolveTimer.current) clearTimeout(resolveTimer.current);
     resolveTimer.current = setTimeout(() => {
@@ -549,19 +864,29 @@ var _ReviewGate = ({
   const pickRating = useCallback(
     async (value) => {
       setStars(value);
+      playHaptic("selection");
       onEvent == null ? void 0 : onEvent({ name: "review_rating_selected", id, stars: value });
       if (routeRating(value) === "store") {
         onEvent == null ? void 0 : onEvent({ name: "store_review_requested", id, stars: value });
-        await requestStoreReview(store);
+        const route = await requestStoreReview(store);
+        postOnce(
+          buildReviewSubmission({
+            stars: value,
+            sessionId,
+            meta: { ...meta, store_route: route }
+          })
+        );
         setPhase("thanks");
         resolveWithDelay();
       } else {
         setPhase("feedback");
       }
     },
-    [onEvent, id, store, resolveWithDelay]
+    [onEvent, id, store, postOnce, sessionId, meta, resolveWithDelay]
   );
+  const feedbackReady = feedback.trim().length > 0;
   const sendFeedback = useCallback(() => {
+    if (!feedbackReady) return;
     const body = buildReviewSubmission({
       stars,
       feedbackText: feedback,
@@ -569,11 +894,12 @@ var _ReviewGate = ({
       sessionId,
       meta
     });
-    submitReview(target, body);
+    postOnce(body);
     onEvent == null ? void 0 : onEvent({ name: "review_feedback_submitted", id, stars });
+    playHaptic("success");
     setPhase("thanks");
     resolveWithDelay();
-  }, [stars, feedback, suggestion, sessionId, meta, target, onEvent, id, resolveWithDelay]);
+  }, [feedbackReady, stars, feedback, suggestion, sessionId, meta, postOnce, onEvent, id, resolveWithDelay]);
   const dismiss = useCallback(() => {
     setPhase("thanks");
     resolveWithDelay();
@@ -583,7 +909,6 @@ var _ReviewGate = ({
     if (mode === "modal") (_a = modalRef.current) == null ? void 0 : _a.close();
     else dismiss();
   }, [mode, dismiss]);
-  const title = phase === "feedback" ? "What should we improve?" : phase === "thanks" ? "Thank you" : appName ? `Enjoying ${appName}?` : "How's your experience?";
   const surface = {
     backgroundColor: t.colors.surface,
     borderRadius: t.radius.lg,
@@ -591,113 +916,121 @@ var _ReviewGate = ({
     gap: t.spacing.md
   };
   const feedbackBox = feedbackInputHeights(t.fonts, t.spacing.md);
-  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Text, { style: [headingStyle(t.fonts), { color: t.colors.text }], children: title }),
-    phase === "rating" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Text, { style: [captionStyle(t.fonts), { color: t.colors.textMuted }], children: "Tap a star to let us know." }),
-      /* @__PURE__ */ jsx(View, { style: styles3.stars, children: [1, 2, 3, 4, 5].map((n) => {
-        const filled = n <= (hovered || stars);
-        return /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            onPressIn: () => setHovered(n),
-            onPressOut: () => setHovered(0),
-            onPress: () => void pickRating(n),
-            accessibilityRole: "button",
-            accessibilityLabel: `${n} star${n > 1 ? "s" : ""}`,
-            hitSlop: 8,
-            children: /* @__PURE__ */ jsx(
-              Text,
-              {
-                style: [
-                  styles3.star,
-                  { color: filled ? t.colors.primary : t.colors.border }
-                ],
-                children: filled ? "\u2605" : "\u2606"
-              }
-            )
-          },
-          n
-        );
-      }) }),
-      dismissible && /* @__PURE__ */ jsx(Pressable, { onPress: handleDismissTap, hitSlop: 8, children: /* @__PURE__ */ jsx(Text, { style: [captionStyle(t.fonts), styles3.link, { color: t.colors.textMuted }], children: "Not now" }) })
-    ] }),
-    phase === "feedback" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Text, { style: [captionStyle(t.fonts), { color: t.colors.textMuted }], children: "A few words is plenty. Both boxes are optional, so send whatever you like." }),
-      /* @__PURE__ */ jsx(Text, { style: [captionStyle(t.fonts), { color: t.colors.textMuted }], children: "Why this rating? (optional)" }),
-      /* @__PURE__ */ jsx(
-        TextInput,
-        {
-          value: feedback,
-          onChangeText: setFeedback,
-          placeholder: "e.g. too many steps",
-          placeholderTextColor: t.colors.textMuted,
-          multiline: true,
-          textAlignVertical: "top",
-          style: [
-            bodyStyle(t.fonts),
-            styles3.input,
-            {
-              color: t.colors.text,
-              backgroundColor: t.colors.background,
-              borderRadius: t.radius.md,
-              borderColor: t.colors.border,
-              padding: t.spacing.md,
-              minHeight: feedbackBox.minHeight,
-              maxHeight: feedbackBox.maxHeight
-            }
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(Text, { style: [captionStyle(t.fonts), { color: t.colors.textMuted }], children: "What can we do better? (optional)" }),
-      /* @__PURE__ */ jsx(
-        TextInput,
-        {
-          value: suggestion,
-          onChangeText: setSuggestion,
-          placeholder: "e.g. save my place between steps",
-          placeholderTextColor: t.colors.textMuted,
-          style: [
-            bodyStyle(t.fonts),
-            styles3.input,
-            {
-              color: t.colors.text,
-              backgroundColor: t.colors.background,
-              borderRadius: t.radius.md,
-              borderColor: t.colors.border,
-              paddingHorizontal: t.spacing.md,
-              paddingVertical: t.spacing.sm,
-              minHeight: t.button.height
-            }
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
+  const linkStyle = [captionStyle(t.fonts), styles6.link, { color: t.colors.textMuted }];
+  const ratingPane = /* @__PURE__ */ jsxs(View, { style: { gap: t.spacing.md }, children: [
+    /* @__PURE__ */ jsx(Text, { style: [headingStyle(t.fonts), { color: t.colors.text }], children: appName ? `Enjoying ${appName}?` : "How's your experience?" }),
+    /* @__PURE__ */ jsx(Text, { style: [captionStyle(t.fonts), { color: t.colors.textMuted }], children: "Tap a star to let us know." }),
+    /* @__PURE__ */ jsx(View, { style: styles6.stars, children: [1, 2, 3, 4, 5].map((n) => {
+      const filled = n <= (hovered || stars);
+      return /* @__PURE__ */ jsx(
+        Pressable,
         {
-          title: "Send feedback",
-          onPress: sendFeedback,
-          variant: "primary",
-          fullWidth: true
-        }
-      ),
-      dismissible && /* @__PURE__ */ jsx(Pressable, { onPress: handleDismissTap, hitSlop: 8, children: /* @__PURE__ */ jsx(Text, { style: [captionStyle(t.fonts), styles3.link, { color: t.colors.textMuted }], children: "Skip" }) })
-    ] }),
-    phase === "thanks" && /* @__PURE__ */ jsx(Text, { style: [bodyStyle(t.fonts), { color: t.colors.textMuted }], children: "We appreciate you. This helps us make it better." })
+          onPressIn: () => setHovered(n),
+          onPressOut: () => setHovered(0),
+          onPress: () => void pickRating(n),
+          accessibilityRole: "button",
+          accessibilityLabel: `${n} star${n > 1 ? "s" : ""}`,
+          hitSlop: 8,
+          children: /* @__PURE__ */ jsx(Text, { style: [styles6.star, { color: filled ? t.colors.primary : t.colors.border }], children: filled ? "\u2605" : "\u2606" })
+        },
+        n
+      );
+    }) }),
+    dismissible && /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress: handleDismissTap,
+        hitSlop: 8,
+        accessibilityRole: "button",
+        accessibilityLabel: "Dismiss the review prompt",
+        children: /* @__PURE__ */ jsx(Text, { style: linkStyle, children: "Not now" })
+      }
+    )
+  ] });
+  const feedbackPane = /* @__PURE__ */ jsxs(View, { style: { gap: t.spacing.md }, children: [
+    /* @__PURE__ */ jsx(Text, { style: [headingStyle(t.fonts), { color: t.colors.text }], children: "What should we improve?" }),
+    /* @__PURE__ */ jsx(Text, { style: [captionStyle(t.fonts), { color: t.colors.textMuted }], children: "A few words is plenty \u2014 tell us what went wrong and we'll fix it." }),
+    /* @__PURE__ */ jsx(Text, { style: [captionStyle(t.fonts), { color: t.colors.textMuted }], children: "Why this rating?" }),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        value: feedback,
+        onChangeText: setFeedback,
+        placeholder: "e.g. too many steps",
+        placeholderTextColor: t.colors.textMuted,
+        accessibilityLabel: "Why this rating?",
+        multiline: true,
+        textAlignVertical: "top",
+        style: [
+          bodyStyle(t.fonts),
+          styles6.input,
+          {
+            color: t.colors.text,
+            backgroundColor: t.colors.background,
+            borderRadius: t.radius.md,
+            borderColor: t.colors.border,
+            padding: t.spacing.md,
+            minHeight: feedbackBox.minHeight,
+            maxHeight: feedbackBox.maxHeight
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { style: [captionStyle(t.fonts), { color: t.colors.textMuted }], children: "What can we do better? (optional)" }),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        value: suggestion,
+        onChangeText: setSuggestion,
+        placeholder: "e.g. save my place between steps",
+        placeholderTextColor: t.colors.textMuted,
+        accessibilityLabel: "What can we do better? (optional)",
+        style: [
+          bodyStyle(t.fonts),
+          styles6.input,
+          {
+            color: t.colors.text,
+            backgroundColor: t.colors.background,
+            borderRadius: t.radius.md,
+            borderColor: t.colors.border,
+            paddingHorizontal: t.spacing.md,
+            paddingVertical: t.spacing.sm,
+            minHeight: t.button.height
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        title: "Send feedback",
+        onPress: sendFeedback,
+        variant: "primary",
+        fullWidth: true,
+        disabled: !feedbackReady
+      }
+    )
   ] });
+  const thanksPane = /* @__PURE__ */ jsxs(View, { style: { gap: t.spacing.md }, children: [
+    /* @__PURE__ */ jsx(DoneCheck, { theme: t }),
+    /* @__PURE__ */ jsx(Text, { style: [headingStyle(t.fonts), styles6.centerText, { color: t.colors.text }], children: "Thank you" }),
+    /* @__PURE__ */ jsx(Text, { style: [bodyStyle(t.fonts), styles6.centerText, { color: t.colors.textMuted }], children: "We appreciate you. This helps us make it better." })
+  ] });
+  const content = /* @__PURE__ */ jsx(ModalPaneHost, { paneKey: phase, children: phase === "rating" ? ratingPane : phase === "feedback" ? feedbackPane : thanksPane });
   if (mode === "modal") {
     return /* @__PURE__ */ jsx(CenteredModal, { ref: modalRef, theme: t, dismissible, onDismiss: resolve, children: content });
   }
-  return /* @__PURE__ */ jsx(View, { style: [styles3.card, surface], children: content });
+  return /* @__PURE__ */ jsx(View, { style: [styles6.card, surface], children: content });
 };
-var ReviewGate = React4.memo(_ReviewGate);
+var ReviewGate = React7.memo(_ReviewGate);
 ReviewGate.displayName = "ReviewGate";
-var styles3 = StyleSheet.create({
+var styles6 = StyleSheet.create({
   card: { width: "100%" },
   stars: { flexDirection: "row", justifyContent: "center", gap: 8 },
   star: { fontSize: 40, lineHeight: 46 },
   input: { borderWidth: 1 },
-  link: { textAlign: "center", textDecorationLine: "underline" }
+  link: { textAlign: "center", textDecorationLine: "underline" },
+  centerText: { textAlign: "center" }
 });
 
 // src/coachmarks/runtime.ts
@@ -997,6 +1330,6 @@ var useReviewGate = ({
   );
 };
 
-export { DEFAULT_PRESENTATION, FEEDBACK_MAX_LINES, FEEDBACK_MIN_LINES, CENTERED_MODAL_ANIM as REVIEW_MODAL_ANIM, ReviewGate, CenteredModal as ReviewModal, buildReviewSubmission, decideReview, centeredModalFrame as entranceFrame, evaluateGate, feedbackInputHeights, openStoreListing, reportAppEvent, requestStoreReview, resolvePresentation, resolveRules, reviewLastShownKey, reviewSeenKey, reviewSessionsKey, routeRating, sameDecision, shallowEqual, storeUrl, submitReview, useReviewGate };
+export { DEFAULT_PRESENTATION, FEEDBACK_MAX_LINES, FEEDBACK_MIN_LINES, CENTERED_MODAL_ANIM as REVIEW_MODAL_ANIM, ReviewGate, CenteredModal as ReviewModal, buildReviewSubmission, decideReview, centeredModalFrame as entranceFrame, evaluateGate, feedbackInputHeights, fetchReviewDecision, openStoreListing, reportAppEvent, requestStoreReview, resolvePresentation, resolveRules, reviewLastShownKey, reviewSeenKey, reviewSessionsKey, routeRating, sameDecision, shallowEqual, storeUrl, submitReview, useReviewGate };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map