@wireai/activation 0.3.0 → 0.7.0

package/src/analytics/analyticsFacade.ts

@@ -27,8 +27,10 @@
  * FIRE-AND-FORGET: no method throws into the UI or blocks — the queue already guarantees that.
  */
 import { buildContextEnvelope, type ContextEnvelope } from "./contextEnvelope";
+import { getCurrentSessionId } from "./currentSession";
 import { createEventQueue, type EventQueue, type EventQueueOptions } from "./eventQueue";
 import { makeSessionId, type ClientEvent } from "./reportClientEvent";
+import { resolveUserContext, type WireUserContext } from "../context/userContext";
 import { sanitizeUserId } from "../identity/userIdentity";
 
 /** Arbitrary non-PII event properties. Serialized to the event's `meta` (a JSON string) on the wire. */
@@ -62,6 +64,13 @@ export type CreateAnalyticsConfig = {
   appBuild?: string;
   /** Host connectivity signal, e.g. "wifi" | "cellular" — read fresh per event via the provider. */
   networkType?: string;
+  /**
+   * The rich {@link WireUserContext} to stamp onto every event's `user_context` (device key, opaque
+   * user id, opt-in email, arbitrary `extra`). Passed ONCE here at init; updatable post-mount via
+   * {@link Analytics.setUserContext} (e.g. attach `userId`/`userEmail` at login). Optional — omit it
+   * and events carry only the device context, exactly as before.
+   */
+  userContext?: WireUserContext;
 };
 
 /** Optional queue tuning knobs, forwarded verbatim to {@link createEventQueue}. */
@@ -81,6 +90,12 @@ export type Analytics = {
   screen(name: string, props?: AnalyticsProps): void;
   /** Bind the host's opaque user id (per-session, in-memory) and emit an `identify` event. */
   identify(userId: string, traits?: AnalyticsProps): void;
+  /**
+   * Update the {@link WireUserContext} after init (e.g. attach `userId`/`userEmail` at login). Shallow
+   * merges the partial over the current context (`extra` is deep-merged); a supplied `userId` also
+   * binds like {@link identify}. Takes effect on subsequent events. Fire-and-forget.
+   */
+  setUserContext(partial: Partial<WireUserContext>): void;
   /** Attempt an immediate drain of the pending buffer. Fire-and-forget. */
   flush(): void;
   /** Host reconnect signal: reset backoff and drain now. Fire-and-forget. */
@@ -98,12 +113,22 @@ export const createAnalytics = (
   config: CreateAnalyticsConfig,
   options: AnalyticsOptions = {},
 ): Analytics => {
-  const sessionId = config.sessionId ?? makeSessionId();
+  // A STABLE per-instance fallback id, used only when no explicit `config.sessionId` was given AND
+  // no per-open session has been registered yet (see `resolveSessionId`).
+  const instanceSessionId = config.sessionId ?? makeSessionId();
+
+  // The session id every event correlates to. Precedence: an explicit `config.sessionId` freezes the
+  // id (opt-out of the reuse); otherwise reuse the LIVE per-open session the server saw (via
+  // `app.session_started`) so `identify`/app-events don't mint a fresh id the server back-fills into a
+  // phantom session; finally fall back to the stable per-instance id when no open is registered yet.
+  const resolveSessionId = (): string =>
+    config.sessionId ?? getCurrentSessionId() ?? instanceSessionId;
 
-  // A provider (not a fixed value) so `networkType` is evaluated fresh on every enqueue.
+  // A provider (not a fixed value) so `networkType` + the current session id are evaluated fresh
+  // on every enqueue.
   const envelope = (): ContextEnvelope =>
     buildContextEnvelope({
-      sessionId,
+      sessionId: resolveSessionId(),
       appVersion: config.appVersion,
       appBuild: config.appBuild,
       networkType: config.networkType,
@@ -117,18 +142,62 @@ export const createAnalytics = (
     ...options,
   });
 
-  // Per-session, in-memory user binding. Not persisted across launches (that is a follow-up).
-  let boundUserId: string | undefined;
+  // The mutable rich user-context: seeded at init, updated via `setUserContext`. Resolved fresh on
+  // every event so a post-mount update (login) takes effect immediately.
+  let userContext: WireUserContext = { ...(config.userContext ?? {}) };
+
+  // Per-session, in-memory user binding. Seeded from the init context, then persisted across
+  // launches when storage is provided.
+  let boundUserId: string | undefined = sanitizeUserId(config.userContext?.userId);
+  const storageKey = `wireai:analytics:userId:${config.appId ?? "default"}`;
+
+  if (config.storage) {
+    void config.storage
+      .getItem(storageKey)
+      .then((saved) => {
+        // Don't clobber an explicit init-context user id with a stale persisted one.
+        if (saved && !boundUserId) boundUserId = saved;
+      })
+      .catch(() => {});
+  }
+
+  // Stamp the resolved rich context onto an event: the `user_context` bucket (device_key, app_version,
+  // opt-in user_email, namespaced `custom.*`) and the top-level opaque `user_id`. Never overwrites a
+  // key the caller already set (so `identify`'s explicit `user_id` and any caller `user_context` win).
+  const applyContext = (event: ClientEvent): void => {
+    const resolved = resolveUserContext(userContext, { autoAppVersion: config.appVersion });
+    if (resolved.userContext) {
+      event.user_context = { ...resolved.userContext, ...(event.user_context ?? {}) };
+    }
+    if (boundUserId && !event.user_id) event.user_id = boundUserId;
+  };
+
+  const setUserContext = (partial: Partial<WireUserContext>): void => {
+    if (!partial || typeof partial !== "object") return;
+    // Deep-merge `extra` so a partial update adds keys instead of replacing the whole map.
+    const mergedExtra =
+      partial.extra || userContext.extra
+        ? { ...(userContext.extra ?? {}), ...(partial.extra ?? {}) }
+        : undefined;
+    userContext = { ...userContext, ...partial };
+    if (mergedExtra) userContext.extra = mergedExtra;
+    // A user id supplied here binds like `identify` so subsequent events carry `user_id`.
+    const uid = sanitizeUserId(partial.userId);
+    if (uid) {
+      boundUserId = uid;
+      if (config.storage) void config.storage.setItem(storageKey, uid).catch(() => {});
+    }
+  };
 
   const track = (event: string, props?: AnalyticsProps): void => {
     if (!event) return;
     const clientEvent: ClientEvent = {
       event_type: "app_event",
-      session_id: sessionId,
+      session_id: resolveSessionId(),
       question_key: event,
     };
     if (props && Object.keys(props).length > 0) clientEvent.meta = JSON.stringify(props);
-    if (boundUserId) clientEvent.user_id = boundUserId;
+    applyContext(clientEvent);
     queue.enqueue(clientEvent);
   };
 
@@ -138,11 +207,11 @@ export const createAnalytics = (
     const meta = { screen: name, ...(props ?? {}) };
     const clientEvent: ClientEvent = {
       event_type: "app_event",
-      session_id: sessionId,
+      session_id: resolveSessionId(),
       question_key: "screen",
       meta: JSON.stringify(meta),
     };
-    if (boundUserId) clientEvent.user_id = boundUserId;
+    applyContext(clientEvent);
     queue.enqueue(clientEvent);
   };
 
@@ -151,12 +220,18 @@ export const createAnalytics = (
     // Blank / non-string → no binding, no event (sanitizeUserId returns undefined). >128 → truncated.
     if (!clean) return;
     boundUserId = clean;
+    if (config.storage) {
+      void config.storage.setItem(storageKey, clean).catch(() => {});
+    }
     const clientEvent: ClientEvent = {
       event_type: "identify",
-      session_id: sessionId,
+      // Reuse the LIVE per-open session id (see `resolveSessionId`) so the server binds identity to
+      // the session it already saw instead of back-filling a phantom `session_started`.
+      session_id: resolveSessionId(),
       user_id: clean,
     };
     if (traits && Object.keys(traits).length > 0) clientEvent.meta = JSON.stringify(traits);
+    applyContext(clientEvent);
     queue.enqueue(clientEvent);
   };
 
@@ -164,6 +239,7 @@ export const createAnalytics = (
     track,
     screen,
     identify,
+    setUserContext,
     flush: queue.flush,
     notifyOnline: queue.notifyOnline,
     size: queue.size,

package/src/analytics/contextEnvelope.ts

@@ -30,7 +30,7 @@ export type ContextEnvelope = {
   device: DeviceContext;
   /** Correlation id for this app-open / flow (caller-supplied). */
   sessionId?: string;
-  /** Host app version, e.g. "1.4.2" (mirrors `device.appVersion`; host-injected). */
+  /** App version, e.g. "1.4.2" (mirrors `device.appVersion`; host-injected, else auto-detected). */
   appVersion?: string;
   /** Host native build number, e.g. "412" (from `expo-constants` `nativeBuildVersion`). */
   appBuild?: string;
@@ -47,9 +47,10 @@ export type ContextEnvelopeInput = {
 };
 
 /**
- * Build a fresh context envelope. Reuses `collectDeviceContext()` for the device block and layers
- * the host-injected scalars on top. `appVersion` is additionally merged onto `device.appVersion`
- * when the device block lacks it (mirroring how `useSessionStart` back-fills the host version).
+ * Build a fresh context envelope. Reuses `collectDeviceContext()` for the device block (which
+ * already carries a best-effort auto-detected `appVersion`) and layers the host-injected scalars
+ * on top. An explicit `input.appVersion` overrides the auto-detected `device.appVersion`, and the
+ * outer `appVersion` scalar mirrors whichever version is effective.
  *
  * Returns a NEW object on every call (no shared mutable reference), so a caller can hold or mutate
  * the result without leaking into the next envelope. Never throws — `collectDeviceContext` is
@@ -59,12 +60,17 @@ export const buildContextEnvelope = (input: ContextEnvelopeInput = {}): ContextE
   // Fresh copy so the returned envelope never aliases a cached device snapshot.
   const device: DeviceContext = { ...collectDeviceContext() };
 
-  // Mirror useSessionStart: fill the host app version onto the device block when it lacks one.
-  if (input.appVersion && !device.appVersion) device.appVersion = input.appVersion;
+  // `device.appVersion` is auto-detected best-effort by `collectDeviceContext`; an explicit
+  // host `input.appVersion` always wins.
+  if (input.appVersion) device.appVersion = input.appVersion;
+
+  // The outer scalar mirrors the effective version (host-supplied, else auto-detected) so the
+  // queue can stamp `user_context.app_version` even when the host never passed one.
+  const effectiveAppVersion = input.appVersion ?? device.appVersion;
 
   const envelope: ContextEnvelope = { device };
   if (input.sessionId) envelope.sessionId = input.sessionId;
-  if (input.appVersion) envelope.appVersion = input.appVersion;
+  if (effectiveAppVersion) envelope.appVersion = effectiveAppVersion;
   if (input.appBuild) envelope.appBuild = input.appBuild;
   if (input.networkType) envelope.networkType = input.networkType;
 

package/src/analytics/currentSession.ts

@@ -0,0 +1,35 @@
+/**
+ * currentSession — a tiny module-level registry of the CURRENT per-open `session_id`.
+ *
+ * WHY it exists (kills the phantom-session): the per-open emitters (`reportSessionStart` and the
+ * `useSessionStart` / `useLifecycleEvents` hooks) mint a fresh `session_id` for each app-open and
+ * post `app.session_started` with it — so the SERVER knows that id. But other client paths
+ * (`identify`, host `app_event`s through the analytics façade) used to reference a DIFFERENT id
+ * (a frozen per-instance id), which the server had never seen, so it back-filled a synthetic
+ * `session_started` — inflating session counts (the Morrow/Myelino "phantom-session" bug).
+ *
+ * This registry is the single seam that lets those paths reuse the LIVE per-open session id the
+ * server already ingested. `reportSessionStart` writes the current id here on every open; the façade
+ * reads it so `identify`/app-events correlate to the real session instead of minting a phantom.
+ *
+ * DEPENDENCY-FREE + PROCESS-LOCAL: a plain module variable. It is intentionally NOT persisted — it
+ * tracks the CURRENT process's open, and a fresh open always overwrites it. No cross-launch state.
+ */
+
+let _currentSessionId: string | undefined;
+
+/**
+ * Record the current per-open `session_id`. Called by `reportSessionStart` when it emits an
+ * app-open. A blank / non-string id is ignored (the previous id stays current). Idempotent.
+ */
+export const setCurrentSessionId = (id: string | undefined): void => {
+  if (typeof id === "string" && id.length > 0) _currentSessionId = id;
+};
+
+/** The current per-open `session_id`, or `undefined` when no app-open has been registered yet. */
+export const getCurrentSessionId = (): string | undefined => _currentSessionId;
+
+/** Test-only: forget the current session id so a unit test starts from a clean registry. */
+export const resetCurrentSessionId = (): void => {
+  _currentSessionId = undefined;
+};

package/src/analytics/eventQueue.ts

@@ -228,6 +228,8 @@ export const createEventQueue = (options: EventQueueOptions): EventQueue => {
   // fetch, a rejecting network, or a JSON error resolves to `false` (batch stays, retry schedules).
   const postBatch = async (events: ClientEvent[]): Promise<boolean> => {
     if (!target?.serverUrl || events.length === 0) return false;
+    const controller = typeof AbortController !== "undefined" ? new AbortController() : undefined;
+    const timer = setTimeout(() => controller?.abort(), 15_000);
     try {
       const url = `${target.serverUrl.replace(/\/$/, "")}/v1/events`;
       const headers: Record<string, string> = { "Content-Type": "application/json" };
@@ -236,10 +238,13 @@ export const createEventQueue = (options: EventQueueOptions): EventQueue => {
         method: "POST",
         headers,
         body: JSON.stringify({ events }),
+        signal: controller?.signal,
       });
       return !!(res && (res as { ok?: boolean }).ok);
     } catch {
       return false;
+    } finally {
+      clearTimeout(timer);
     }
   };
 

package/src/analytics/index.ts

@@ -57,3 +57,6 @@ export type {
 
 // ─── The thin optional React hook over the façade ─────────────────────────────
 export { useAnalytics } from "./useAnalytics";
+
+// ─── Current per-open session registry (identify/app-events reuse the live session) ───
+export { getCurrentSessionId, setCurrentSessionId, resetCurrentSessionId } from "./currentSession";

package/src/analytics/useAnalytics.ts

@@ -31,6 +31,12 @@ export const useAnalytics = (
 ): Analytics => {
   // One instance per mount; kept in a ref so re-renders never rebuild the queue or drop the binding.
   const ref = useRef<Analytics | undefined>(undefined);
-  if (!ref.current) ref.current = createAnalytics(config, options);
+  const prevKeys = useRef<string>("");
+
+  const currentKeys = `${config.serverUrl}|${config.apiKey}|${config.appId}`;
+  if (!ref.current || prevKeys.current !== currentKeys) {
+    prevKeys.current = currentKeys;
+    ref.current = createAnalytics(config, options);
+  }
   return ref.current;
 };

package/src/analytics/useScreenTracking.ts

@@ -32,9 +32,31 @@ export const useScreenTracking = (
   navigationRef: NavigationRefLike | undefined,
   options: ScreenTrackerOptions = {},
 ): void => {
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+
   // One tracker per mount; kept in a ref so re-renders never rebuild the de-dup memory.
   const trackerRef = useRef<ScreenTracker | undefined>(undefined);
-  if (!trackerRef.current) trackerRef.current = createScreenTracker(options);
+  if (!trackerRef.current) {
+    const dynamicOptions: ScreenTrackerOptions = {
+      get target() {
+        return optionsRef.current.target;
+      },
+      get sessionId() {
+        return optionsRef.current.sessionId;
+      },
+      get deviceKey() {
+        return optionsRef.current.deviceKey;
+      },
+      get onScreen() {
+        return optionsRef.current.onScreen;
+      },
+      get shouldTrack() {
+        return optionsRef.current.shouldTrack;
+      },
+    };
+    trackerRef.current = createScreenTracker(dynamicOptions);
+  }
 
   useEffect(() => {
     const tracker = trackerRef.current;

package/src/cards/InterstitialCard.tsx

@@ -264,7 +264,7 @@ const _InterstitialCard: React.FC<Props> = ({
         {items?.length ? (
           <View style={[styles.items, { gap: t.spacing.md, marginTop: t.spacing.sm }]}>
             {items.map((item, i) => (
-              <WorkItem key={item} text={item} index={i} reduced={reduced} />
+              <WorkItem key={`${item}-${i}`} text={item} index={i} reduced={reduced} />
             ))}
           </View>
         ) : body ? (

package/src/cards/NumberStepperCard.tsx

@@ -4,11 +4,12 @@
  * Keeps the SDK's defensive numeric coercion so a malformed LLM payload can never
  * feed NaN/Infinity into layout math.
  */
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { Pressable, StyleSheet, Text, View } 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 { captionStyle, headingStyle } from "../theme/typography";
 import { Button } from "../components/Button";
 import { CardLayout } from "../components/CardLayout";
@@ -42,6 +43,7 @@ const _NumberStepperCard: React.FC<Props> = ({
   onSubmit,
 }) => {
   const t = useOnboardingTheme();
+  const styles = useMemo(() => makeStyles(t), [t]);
 
   const safeMin = safeNum(min, 1);
   const safeMaxRaw = safeNum(max, 30);
@@ -84,7 +86,7 @@ const _NumberStepperCard: React.FC<Props> = ({
         <Button title={submitLabel} onPress={handleSubmit} variant="primary" disabled={submitted} />
       }
     >
-      <View style={{ gap: t.spacing.md, alignItems: "center" }}>
+      <View style={styles.wrap}>
         <View style={[styles.stepper, { gap: t.spacing.lg }]}>
           <Pressable onPress={atMin || submitted ? undefined : handleDecrement} disabled={atMin || submitted} style={stepBtnStyle(atMin)}>
             <Text style={[headingStyle(t.fonts), { color: atMin ? t.colors.textMuted : t.colors.primary }]}>{"−"}</Text>
@@ -114,8 +116,11 @@ export const NumberStepperCard: WireAIComponent = {
   defaultProps: { min: 1, max: 30, defaultValue: 1, step: 1, submitLabel: "Confirm" },
 };
 
-const styles = StyleSheet.create({
-  stepper: { flexDirection: "row", alignItems: "center", justifyContent: "center" },
-  stepBtn: { width: 44, height: 44, borderWidth: 2, alignItems: "center", justifyContent: "center" },
-  valueBox: { alignItems: "center", minWidth: 80 },
-});
+function makeStyles(t: OnboardingTheme) {
+  return StyleSheet.create({
+    wrap: { gap: t.spacing.md, alignItems: "center" },
+    stepper: { flexDirection: "row", alignItems: "center", justifyContent: "center" },
+    stepBtn: { width: 44, height: 44, borderWidth: 2, alignItems: "center", justifyContent: "center" },
+    valueBox: { alignItems: "center", minWidth: 80 },
+  });
+}

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" },
+  });
+}