@wireai/activation 0.3.0 → 0.4.0

package/src/cards/StatusCard.tsx

@@ -9,7 +9,7 @@
  * Reduce motion: final frame instantly. (The terminal payoff with the burst is
  * CompletionView; this card is the inline status treatment.)
  */
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Animated, Easing, StyleSheet, Text, View } from "react-native";
 import { z } from "zod";
 import type { InjectedProps, WireAIComponent } from "wireai-rn";
@@ -60,13 +60,18 @@ const _StatusCard: React.FC<Props> = ({ status, title, message, ctaLabel, onCont
   const reduced = useReducedMotion();
   const [submitted, setSubmitted] = useState(false);
 
-  const colorFor: Record<string, string> = {
-    success: t.colors.success,
-    warning: t.colors.warning,
-    error: t.colors.error,
-    info: t.colors.info,
-  };
-  const color = colorFor[status] ?? t.colors.info;
+  const color = useMemo(() => {
+    switch (status) {
+      case "success":
+        return t.colors.success;
+      case "warning":
+        return t.colors.warning;
+      case "error":
+        return t.colors.error;
+      default:
+        return t.colors.info;
+    }
+  }, [status, t.colors]);
 
   // Glyph pop + copy fade-up (final frame under reduce motion).
   const popT = useRef(new Animated.Value(reduced ? 1 : 0)).current;

package/src/cards/TextInputCard.tsx

@@ -9,11 +9,12 @@
  * multi-line box by default so the user has room to actually write. Short fields
  * (a name, a username) set `multiline: false` for the compact single-line height.
  */
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { StyleSheet, Text, TextInput, View, useWindowDimensions } from "react-native";
 import { z } from "zod";
 import type { InjectedProps, WireAIComponent } from "wireai-rn";
 import { useOnboardingTheme } from "../theme/ThemeContext";
+import type { OnboardingTheme } from "../theme/types";
 import { bodyStyle, captionStyle } from "../theme/typography";
 import { Button } from "../components/Button";
 import { CardLayout } from "../components/CardLayout";
@@ -66,6 +67,7 @@ const _TextInputCard: React.FC<Props> = ({
   lines = 6,
 }) => {
   const t = useOnboardingTheme();
+  const styles = useMemo(() => makeStyles(t), [t]);
   const { height: screenHeight } = useWindowDimensions();
   const [value, setValue] = useState("");
   const [submitted, setSubmitted] = useState(false);
@@ -102,7 +104,7 @@ const _TextInputCard: React.FC<Props> = ({
         />
       }
     >
-      <View style={{ gap: t.spacing.sm }}>
+      <View style={styles.row}>
         <TextInput
           value={value}
           onChangeText={setValue}
@@ -142,6 +144,9 @@ export const TextInputCard: WireAIComponent = {
   defaultProps: { submitLabel: "Submit", multiline: true, lines: 6 },
 };
 
-const styles = StyleSheet.create({
-  input: { borderWidth: 1 },
-});
+function makeStyles(t: OnboardingTheme) {
+  return StyleSheet.create({
+    row: { gap: t.spacing.sm },
+    input: { borderWidth: 1 },
+  });
+}

package/src/components/AnimatedSparkle.tsx

@@ -81,12 +81,24 @@ const _AnimatedSparkle: React.FC<AnimatedSparkleProps> = ({ size = 30, color, va
       ? { opacity: pulse }
       : { transform: [{ rotate }] };
 
+  // The glyph lives in a fixed size×size box (alignItems/justifyContent:center) so the
+  // font's side-bearing and Android includeFontPadding can't shove the visible mark off
+  // center. The box carries the transform too, so a spinning box still rotates around its
+  // own center → the ✦ spins in place, optically centered on both axes.
   return (
-    <Animated.View style={animatedStyle}>
+    <Animated.View style={[styles.box, { width: size, height: size }, animatedStyle]}>
       <Text
         accessibilityElementsHidden
         importantForAccessibility="no"
-        style={[styles.glyph, { fontSize: size, lineHeight: size * 1.1, color: color ?? t.colors.primary }]}
+        style={[
+          styles.glyph,
+          {
+            width: size,
+            fontSize: size,
+            lineHeight: size,
+            color: color ?? t.colors.primary,
+          },
+        ]}
       >
         ✦
       </Text>
@@ -97,5 +109,10 @@ const _AnimatedSparkle: React.FC<AnimatedSparkleProps> = ({ size = 30, color, va
 export const AnimatedSparkle = React.memo(_AnimatedSparkle);
 
 const styles = StyleSheet.create({
-  glyph: { textAlign: "center" },
+  box: { alignItems: "center", justifyContent: "center" },
+  glyph: {
+    textAlign: "center",
+    textAlignVertical: "center",
+    includeFontPadding: false,
+  },
 });

package/src/components/Button.tsx

@@ -64,6 +64,15 @@ const _Button: React.FC<ButtonProps> = ({
     },
     [pressT, reduced],
   );
+  const lastPress = useRef<number>(0);
+  const handlePress = useCallback(() => {
+    if (!onPress) return;
+    const now = Date.now();
+    if (now - lastPress.current < 500) return;
+    lastPress.current = now;
+    onPress();
+  }, [onPress]);
+
   const handlePressIn = useCallback(() => pressTo(1), [pressTo]);
   const handlePressOut = useCallback(() => pressTo(0), [pressTo]);
 
@@ -78,7 +87,7 @@ const _Button: React.FC<ButtonProps> = ({
 
   return (
     <Pressable
-      onPress={disabled ? undefined : onPress}
+      onPress={disabled ? undefined : handlePress}
       onPressIn={disabled ? undefined : handlePressIn}
       onPressOut={disabled ? undefined : handlePressOut}
       disabled={disabled}

package/src/components/CardHandoff.tsx

@@ -62,8 +62,6 @@ const _CardHandoff: React.FC<CardHandoffProps> = ({
   const exitT = useRef(new Animated.Value(0)).current;
   // The previous render's child, snapshotted so it can play the exit layer.
   const prev = useRef<Snapshot>({ key: transitionKey, node: children, variant });
-  // Variant of the child currently entering (drives the enter interpolations).
-  const [enterVariant, setEnterVariant] = useState<CardHandoffVariant>(variant);
   const running = useRef<{ enter?: Animated.CompositeAnimation; exit?: Animated.CompositeAnimation }>({});
   const mounted = useRef(false);
 
@@ -78,7 +76,6 @@ const _CardHandoff: React.FC<CardHandoffProps> = ({
     // First mount: enter only (the design's initial reveal), nothing exits.
     if (!mounted.current) {
       mounted.current = true;
-      setEnterVariant(variant);
       running.current.enter = startEnter(enterT, variant, reduced, 0);
       return;
     }
@@ -87,7 +84,6 @@ const _CardHandoff: React.FC<CardHandoffProps> = ({
     running.current.enter?.stop();
     running.current.exit?.stop();
     setLeaving(last);
-    setEnterVariant(variant);
     enterT.setValue(0);
     exitT.setValue(0);
 
@@ -122,7 +118,7 @@ const _CardHandoff: React.FC<CardHandoffProps> = ({
 
   const enterStyle = {
     opacity: enterT,
-    transform: transformFor(enterVariant, enterT, reduced, "enter"),
+    transform: transformFor(variant, enterT, reduced, "enter"),
   };
 
   return (
@@ -141,7 +137,7 @@ const _CardHandoff: React.FC<CardHandoffProps> = ({
           {leaving.node}
         </Animated.View>
       ) : null}
-      <Animated.View style={[styles.fill, enterStyle]}>{children}</Animated.View>
+      <Animated.View key={variant} style={[styles.fill, enterStyle]}>{children}</Animated.View>
     </>
   );
 };

package/src/components/CardLayout.tsx

@@ -22,9 +22,10 @@
  * whose window already resizes for the keyboard the computed overlap is ~0, so the
  * padding is a no-op — safe on both iOS and Android, edge-to-edge or not.
  */
-import React from "react";
+import React, { useMemo } from "react";
 import { KeyboardAvoidingView, ScrollView, StyleSheet, Text, View } from "react-native";
 import { useOnboardingTheme } from "../theme/ThemeContext";
+import type { OnboardingTheme } from "../theme/types";
 import { bodyStyle, labelStyle } from "../theme/typography";
 
 export type CardLayoutProps = {
@@ -51,12 +52,13 @@ const _CardLayout: React.FC<CardLayoutProps> = ({
   titleNode,
 }) => {
   const t = useOnboardingTheme();
+  const styles = useMemo(() => makeStyles(t), [t]);
   const hasHeader = !!title || !!subtitle || !!titleNode;
 
   return (
     <KeyboardAvoidingView style={styles.fill} behavior="padding">
       {hasHeader ? (
-        <View style={{ marginBottom: t.spacing.lg }}>
+        <View style={styles.header}>
           {titleNode ??
             (title ? (
               <Text style={[labelStyle(t.fonts), { color: t.colors.text }]}>{title}</Text>
@@ -87,17 +89,21 @@ const _CardLayout: React.FC<CardLayoutProps> = ({
         {children}
       </ScrollView>
 
-      {footer ? <View style={{ paddingTop: t.spacing.lg }}>{footer}</View> : null}
+      {footer ? <View style={styles.footer}>{footer}</View> : null}
     </KeyboardAvoidingView>
   );
 };
 
 export const CardLayout = React.memo(_CardLayout);
 
-const styles = StyleSheet.create({
-  fill: { flex: 1 },
-  // flexGrow lets a short content block grow to fill (pinning the footer) while a
-  // tall one scrolls past the visible area.
-  scrollContent: { flexGrow: 1 },
-  center: { justifyContent: "center" },
-});
+function makeStyles(t: OnboardingTheme) {
+  return StyleSheet.create({
+    fill: { flex: 1 },
+    header: { marginBottom: t.spacing.lg },
+    footer: { paddingTop: t.spacing.lg },
+    // flexGrow lets a short content block grow to fill (pinning the footer) while a
+    // tall one scrolls past the visible area.
+    scrollContent: { flexGrow: 1 },
+    center: { justifyContent: "center" },
+  });
+}

package/src/components/Illustration.tsx

@@ -10,11 +10,14 @@
  * When the backend names an illustration the registry doesn't have, the
  * InterstitialCard falls back to its `imageUrl` (a plain RN <Image>).
  */
-import React, { createContext, useContext } from "react";
+import React, { createContext, useContext, useMemo } from "react";
 
 export type IllustrationRegistry = Record<string, React.ReactNode>;
 
-const IllustrationContext = createContext<IllustrationRegistry>({});
+/** One shared empty registry so an unconfigured provider never allocates a fresh {} per render. */
+const EMPTY_REGISTRY: IllustrationRegistry = {};
+
+const IllustrationContext = createContext<IllustrationRegistry>(EMPTY_REGISTRY);
 
 export type IllustrationProviderProps = {
   registry?: IllustrationRegistry;
@@ -24,9 +27,10 @@ export type IllustrationProviderProps = {
 export const IllustrationProvider: React.FC<IllustrationProviderProps> = ({
   registry,
   children,
-}) => (
-  <IllustrationContext.Provider value={registry ?? {}}>{children}</IllustrationContext.Provider>
-);
+}) => {
+  const value = useMemo(() => registry ?? EMPTY_REGISTRY, [registry]);
+  return <IllustrationContext.Provider value={value}>{children}</IllustrationContext.Provider>;
+};
 
 /** Look up an app-supplied illustration node by name. Returns undefined if absent. */
 export const useIllustration = (name?: string): React.ReactNode | undefined => {

package/src/components/LoadingBlock.tsx

@@ -22,7 +22,6 @@ import {
   scaledMs,
 } from "../motion/motionSpec";
 import { useReducedMotion } from "../motion/useReducedMotion";
-import { useLoaderChrome } from "./loaderChrome";
 
 const STAGE_SIZE = 96;
 const ORBIT_DOT = 9;
@@ -104,11 +103,12 @@ const _LoadingBlock: React.FC<LoadingBlockProps> = ({
 }) => {
   const t = useOnboardingTheme();
   const reduced = useReducedMotion();
-  // When the loader renders inside the scaffold body it sits below the header; the scaffold
-  // publishes how far to shift UP so the loader centers in the full flow area, not the body.
-  // Standalone (no provider) → 0. A static transform (visual only): it never reflows the body,
-  // so the card underneath and the card↔loader handoff are unaffected.
-  const { offsetY } = useLoaderChrome();
+  // The loader fills its parent (flex:1) and centers in it. In the flow that parent is the
+  // scaffold BODY (the same content region the cards render into), so the loader lands at the
+  // content-area center — visually consistent with the cards it hands off to. Standalone
+  // (LoadingScreen / a playground CardFrame) it centers in whatever bounds it. No screen-inset
+  // math and no transform: it inherits the content area it is dropped into, so it is centered
+  // in every context by construction.
 
   // Skeleton lines are gated behind the 300ms window: a fast fetch never shows them.
   const [showSkeleton, setShowSkeleton] = useState(false);
@@ -118,34 +118,44 @@ const _LoadingBlock: React.FC<LoadingBlockProps> = ({
   }, []);
 
   return (
-    <View
-      style={[
-        styles.center,
-        { gap: t.spacing.md, padding: t.spacing.lg },
-        offsetY ? { transform: [{ translateY: offsetY }] } : null,
-      ]}
-    >
+    <View style={[styles.center, { padding: t.spacing.lg }]}>
+      {/*
+       * The stage is the ANCHOR: it's the only in-flow child, so `justifyContent:
+       * center` lands the icon at the true center of the flow area. Title, hint and
+       * the (300ms-gated) skeleton hang BELOW it in an absolutely-positioned column,
+       * so they never displace the icon — previously they lived in the same centered
+       * column, which re-balanced (and jumped the icon UP ~½ its height) the moment
+       * the skeleton lines mounted at 300ms.
+       */}
       <View style={styles.stage}>
         <View style={[styles.ring, { borderColor: t.colors.border, borderRadius: t.radius.full }]} />
         <OrbitDot color={t.colors.primary} reduced={reduced} />
         <AnimatedSparkle size={40} variant="pulse" />
       </View>
-      {title ? (
-        <Text style={[headingStyle(t.fonts), { color: t.colors.text, textAlign: "center" }]}>
-          {title}
-        </Text>
-      ) : null}
-      {hint ? (
-        <Text style={[bodyStyle(t.fonts), { color: t.colors.textMuted, textAlign: "center" }]}>
-          {hint}
-        </Text>
-      ) : null}
-      {showSkeleton ? (
-        <View style={[styles.skeleton, { gap: t.spacing.sm, marginTop: t.spacing.sm }]}>
-          <SkeletonLine width="80%" delay={0} color={t.colors.surface} reduced={reduced} />
-          <SkeletonLine width="60%" delay={200} color={t.colors.surface} reduced={reduced} />
-        </View>
-      ) : null}
+      <View
+        style={[
+          styles.labels,
+          { marginTop: STAGE_SIZE / 2 + t.spacing.lg, gap: t.spacing.md, paddingHorizontal: t.spacing.lg },
+        ]}
+        pointerEvents="none"
+      >
+        {title ? (
+          <Text style={[headingStyle(t.fonts), { color: t.colors.text, textAlign: "center" }]}>
+            {title}
+          </Text>
+        ) : null}
+        {hint ? (
+          <Text style={[bodyStyle(t.fonts), { color: t.colors.textMuted, textAlign: "center" }]}>
+            {hint}
+          </Text>
+        ) : null}
+        {showSkeleton ? (
+          <View style={[styles.skeleton, { gap: t.spacing.sm, marginTop: t.spacing.sm }]}>
+            <SkeletonLine width="80%" delay={0} color={t.colors.surface} reduced={reduced} />
+            <SkeletonLine width="60%" delay={200} color={t.colors.surface} reduced={reduced} />
+          </View>
+        ) : null}
+      </View>
     </View>
   );
 };
@@ -154,6 +164,11 @@ export const LoadingBlock = React.memo(_LoadingBlock);
 
 const styles = StyleSheet.create({
   center: { flex: 1, alignItems: "center", justifyContent: "center" },
+  // Absolutely-positioned label column, pinned just under the centered stage: its top
+  // edge starts at the flow center (top: 50%) and the inline marginTop (STAGE_SIZE/2 +
+  // a gap) drops it below the stage. Out of flow → it never moves the stage, so the
+  // 300ms skeleton reveal grows DOWNWARD only and the icon stays centered.
+  labels: { position: "absolute", top: "50%", left: 0, right: 0, alignItems: "center" },
   stage: {
     width: STAGE_SIZE,
     height: STAGE_SIZE,

package/src/components/LoadingScreen.tsx

@@ -7,8 +7,9 @@
  * WHY a dedicated frame: those slots used to return a bare <LoadingBlock/>, whose flex:1 only
  * fills whatever the host happened to give it — with no safe area and, if the host didn't
  * bound it, no height at all (top-anchored). This wraps them in the same SafeAreaView the flow
- * uses, so the standalone loaders center exactly like the between-turns loader (which centers
- * in the full flow area via the scaffold's loaderChrome offset). One consistent centered look.
+ * uses, so the standalone loaders center exactly like the between-turns loader (both fill their
+ * parent flex:1 region and center in it — here the SafeAreaView, in the flow the scaffold body).
+ * One consistent centered look.
  */
 import React from "react";
 import { StyleSheet } from "react-native";

package/src/components/OnboardingScaffold.tsx

@@ -15,16 +15,13 @@
  * RN core SafeAreaView is deprecated and iOS-only, so the kit takes the standard
  * Expo/RN peer instead of shipping cropped layouts on Android + notched devices.
  */
-import React from "react";
+import React, { useMemo } from "react";
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { useOnboardingTheme } from "../theme/ThemeContext";
+import type { OnboardingTheme } from "../theme/types";
 import { bodyStyle } from "../theme/typography";
 import { StepProgress } from "./StepProgress";
-import { LoaderChromeProvider } from "./loaderChrome";
-
-// The header's fixed StepProgress bar height (design bar = 6px; see StepProgress styles).
-const PROGRESS_TRACK = 6;
 
 export type OnboardingScaffoldProps = {
   /** 1-based index of the current step; drives the (countless) progress bar. */
@@ -53,15 +50,9 @@ const _OnboardingScaffold: React.FC<OnboardingScaffoldProps> = ({
   children,
 }) => {
   const t = useOnboardingTheme();
+  const styles = useMemo(() => makeStyles(t), [t]);
   const hit = { top: 12, bottom: 12, left: 12, right: 12 };
 
-  // Top chrome above the body content = header (progress bar + its paddingTop) + the body's
-  // own paddingTop. A loader that fills the body centers half that distance too low; it reads
-  // this offset (via LoaderChromeProvider) and shifts UP by half the chrome to land at the true
-  // screen center. Cards ignore it, so their layout — and the card↔loader handoff — is untouched.
-  const topChrome = t.spacing.md + PROGRESS_TRACK + t.spacing.md;
-  const loaderOffsetY = -Math.round(topChrome / 2);
-
   return (
     <SafeAreaView
       edges={["top", "bottom"]}
@@ -72,15 +63,19 @@ const _OnboardingScaffold: React.FC<OnboardingScaffoldProps> = ({
           <StepProgress step={step} complete={complete} approxScreens={approxScreens} />
         </View>
         {onSkip ? (
-          <TouchableOpacity onPress={onSkip} hitSlop={hit} style={{ marginLeft: t.spacing.md }}>
+          <TouchableOpacity onPress={onSkip} hitSlop={hit} style={styles.skip}>
             <Text style={[bodyStyle(t.fonts), { color: t.colors.textMuted }]}>{skipLabel}</Text>
           </TouchableOpacity>
         ) : null}
       </View>
 
-      {/* Full-screen body: the card (via CardLayout) fills this and pins its own CTA. */}
-      <View style={[styles.body, { paddingHorizontal: t.spacing.md, paddingTop: t.spacing.md }]}>
-        <LoaderChromeProvider value={{ offsetY: loaderOffsetY }}>{children}</LoaderChromeProvider>
+      {/* Full-screen body (flex:1): the card (via CardLayout) fills this and pins its own CTA,
+          and the between-turns LoadingBlock fills+centers in this SAME region — so the loader
+          lands at the content-area center, consistent with the cards, not the full-screen center. */}
+      <View
+        style={[styles.body, { paddingHorizontal: t.spacing.md, paddingTop: t.spacing.md }]}
+      >
+        {children}
       </View>
 
       {onBack ? (
@@ -96,10 +91,13 @@ const _OnboardingScaffold: React.FC<OnboardingScaffoldProps> = ({
 
 export const OnboardingScaffold = React.memo(_OnboardingScaffold);
 
-const styles = StyleSheet.create({
-  flex: { flex: 1 },
-  header: { flexDirection: "row", alignItems: "center" },
-  progressWrap: { flex: 1 },
-  body: { flex: 1 },
-  footer: { flexDirection: "row", justifyContent: "flex-start" },
-});
+function makeStyles(t: OnboardingTheme) {
+  return StyleSheet.create({
+    flex: { flex: 1 },
+    header: { flexDirection: "row", alignItems: "center" },
+    progressWrap: { flex: 1 },
+    body: { flex: 1 },
+    footer: { flexDirection: "row", justifyContent: "flex-start" },
+    skip: { marginLeft: t.spacing.md },
+  });
+}

package/src/features/WireFeaturesProvider.tsx

@@ -18,8 +18,13 @@ import { defaultWireFeatures } from "./defaults";
 import { useWireFeatures } from "./useWireFeatures";
 import type { WireFeatures, WireFeaturesConfig } from "./types";
 
-/** null = no provider mounted (the signal `useResolvedFeatures` uses to fall back). */
-const WireFeaturesContext = createContext<WireFeatures | null>(null);
+const CONTEXT_SYMBOL = Symbol.for("wireai.features.context");
+const globalObj = global as any;
+
+if (!globalObj[CONTEXT_SYMBOL]) {
+  globalObj[CONTEXT_SYMBOL] = createContext<WireFeatures | null>(null);
+}
+const WireFeaturesContext = globalObj[CONTEXT_SYMBOL];
 
 export interface WireFeaturesProviderProps {
   /** Tenant creds (+ optional storage) to fetch the flags once for the whole tree. */

package/src/questionnaire/QuestionnaireGate.tsx

@@ -43,7 +43,7 @@ const mergeThemeOver = (
 
 type Phase = "form" | "thanks";
 
-export const QuestionnaireGate: React.FC<QuestionnaireGateProps> = ({
+const _QuestionnaireGate: React.FC<QuestionnaireGateProps> = ({
   questionnaire,
   target,
   sessionId,
@@ -81,6 +81,14 @@ export const QuestionnaireGate: React.FC<QuestionnaireGateProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const resolveTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  React.useEffect(() => {
+    return () => {
+      if (resolveTimer.current) clearTimeout(resolveTimer.current);
+    };
+  }, []);
+
   const resolve = useCallback(() => {
     onResolved?.();
   }, [onResolved]);
@@ -100,8 +108,11 @@ export const QuestionnaireGate: React.FC<QuestionnaireGateProps> = ({
     submitQuestionnaireResponse(target, id, submission);
     onEvent?.({ name: "questionnaire_submitted", id });
     setPhase("thanks");
-    resolve();
-  }, [canSend, opinion, improve, suggestions, sessionId, meta, target, id, onEvent, resolve]);
+    if (resolveTimer.current) clearTimeout(resolveTimer.current);
+    resolveTimer.current = setTimeout(() => {
+      modalRef.current?.close();
+    }, 1500);
+  }, [canSend, opinion, improve, suggestions, sessionId, meta, target, id, onEvent]);
 
   // The in-card "Not now"/"Skip" link plays the popup's exit animation (which resolves on
   // completion, the same path a backdrop tap takes). Emit the dismissed moment first.
@@ -225,6 +236,7 @@ export const QuestionnaireGate: React.FC<QuestionnaireGateProps> = ({
   );
 };
 
+export const QuestionnaireGate = React.memo(_QuestionnaireGate);
 QuestionnaireGate.displayName = "QuestionnaireGate";
 
 const styles = StyleSheet.create({

package/src/reviews/ReviewGate.tsx

@@ -52,7 +52,7 @@ const mergeThemeOver = (
 
 type Phase = "rating" | "feedback" | "thanks";
 
-export const ReviewGate: React.FC<ReviewGateProps> = ({
+const _ReviewGate: React.FC<ReviewGateProps> = ({
   appName,
   store,
   target,
@@ -94,10 +94,29 @@ export const ReviewGate: React.FC<ReviewGateProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const resolveTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  React.useEffect(() => {
+    return () => {
+      if (resolveTimer.current) clearTimeout(resolveTimer.current);
+    };
+  }, []);
+
   const resolve = useCallback(() => {
     onResolved?.();
   }, [onResolved]);
 
+  const resolveWithDelay = useCallback(() => {
+    if (resolveTimer.current) clearTimeout(resolveTimer.current);
+    resolveTimer.current = setTimeout(() => {
+      if (mode === "modal") {
+        modalRef.current?.close();
+      } else {
+        onResolved?.();
+      }
+    }, 1500);
+  }, [mode, onResolved]);
+
   const pickRating = useCallback(
     async (value: number) => {
       setStars(value);
@@ -106,12 +125,12 @@ export const ReviewGate: React.FC<ReviewGateProps> = ({
         onEvent?.({ name: "store_review_requested", id, stars: value });
         await requestStoreReview(store);
         setPhase("thanks");
-        resolve();
+        resolveWithDelay();
       } else {
         setPhase("feedback");
       }
     },
-    [onEvent, id, store, resolve],
+    [onEvent, id, store, resolveWithDelay],
   );
 
   const sendFeedback = useCallback(() => {
@@ -127,13 +146,13 @@ export const ReviewGate: React.FC<ReviewGateProps> = ({
     submitReview(target, body);
     onEvent?.({ name: "review_feedback_submitted", id, stars });
     setPhase("thanks");
-    resolve();
-  }, [stars, feedback, suggestion, sessionId, meta, target, onEvent, id, resolve]);
+    resolveWithDelay();
+  }, [stars, feedback, suggestion, sessionId, meta, target, onEvent, id, resolveWithDelay]);
 
   const dismiss = useCallback(() => {
     setPhase("thanks");
-    resolve();
-  }, [resolve]);
+    resolveWithDelay();
+  }, [resolveWithDelay]);
 
   // The in-card "Not now"/"Skip" link. In modal mode it plays the popup's exit animation
   // (which resolves on completion, the same path a backdrop tap takes); inline keeps the
@@ -303,6 +322,7 @@ export const ReviewGate: React.FC<ReviewGateProps> = ({
   return <View style={[styles.card, surface]}>{content}</View>;
 };
 
+export const ReviewGate = React.memo(_ReviewGate);
 ReviewGate.displayName = "ReviewGate";
 
 const styles = StyleSheet.create({

package/src/reviews/ReviewModal.tsx

@@ -5,6 +5,10 @@
  * questionnaire module can reuse the same shell without importing reviews/. This file keeps the
  * reviews public API (`ReviewModal`, `ReviewModalHandle`, `ReviewModalProps`) pointing at the
  * exact same runtime object, so the reviews canary and every existing import stay valid.
+ *
+ * The exported shell is already `React.memo`-wrapped at its source (`components/CenteredModal.tsx`
+ * wraps `_CenteredModal` in `React.memo`), so `ReviewModal` satisfies the shell-memoization rule
+ * without a second wrapper here. Re-wrapping would change the runtime identity the canary asserts.
  */
 export { CenteredModal as ReviewModal, default } from "../components/CenteredModal";
 export type {

package/src/showcase/FeatureShowcase.tsx

@@ -48,7 +48,7 @@ const mergeThemeOver = (
  * When the gate says "seen", it renders nothing and calls `onDone` from an
  * effect (never during render).
  */
-export const FeatureShowcase: React.FC<FeatureShowcaseProps> = ({
+const _FeatureShowcase: React.FC<FeatureShowcaseProps> = ({
   config,
   onDone,
   theme: themeOverride,
@@ -211,6 +211,7 @@ export const FeatureShowcase: React.FC<FeatureShowcaseProps> = ({
   );
 };
 
+export const FeatureShowcase = React.memo(_FeatureShowcase);
 FeatureShowcase.displayName = "FeatureShowcase";
 
 const styles = StyleSheet.create({