@wireai/activation 0.2.0 → 0.4.0

package/src/analytics/analyticsFacade.ts

@@ -0,0 +1,184 @@
+/**
+ * analyticsFacade — a Segment/PostHog-shaped developer API (`track` / `screen` / `identify`)
+ * over the kit's OWN offline-first event queue. One package, one key, one line:
+ *
+ *   const analytics = createAnalytics({ serverUrl, apiKey, storage });
+ *   analytics.track("content_share", { source: "feed" });
+ *   analytics.screen("Home", { tab: "explore" });
+ *   analytics.identify("u_123", { plan: "pro" });
+ *
+ * WHY a façade: the primitives already exist (`createEventQueue` for durable offline-first
+ * transport, `buildContextEnvelope` for the non-PII device context, the `identify` client-event
+ * contract for user binding), but a host had to wire them together by hand. This composes them
+ * into the familiar analytics-SDK surface so a consumer gets the ergonomics with NO second
+ * install and NO second key — the same `{ serverUrl, apiKey }` creds as onboarding.
+ *
+ * ROUTING: every call builds a `ClientEvent` and `enqueue`s it. The queue stamps the context
+ * envelope (device + host scalars), persists offline, batches, retries, and dequeues on ack —
+ * so `track`/`screen`/`identify` inherit offline-first durability for free. `screen` routes
+ * through the SAME queue rather than the direct `reportAppEvent` POST (a deliberate upgrade:
+ * screen views survive being offline too).
+ *
+ * DEPENDENCY-FREE + TREE-SHAKEABLE: this module imports ONLY the queue, the envelope builder,
+ * the client-event types + session-id seed, and the identity sanitizer. It reaches NO
+ * onboarding / showcase / review UI, so an analytics-only consumer bundles none of it. React is
+ * absent here on purpose — the optional React glue is the thin `useAnalytics` hook.
+ *
+ * FIRE-AND-FORGET: no method throws into the UI or blocks — the queue already guarantees that.
+ */
+import { buildContextEnvelope, type ContextEnvelope } from "./contextEnvelope";
+import { createEventQueue, type EventQueue, type EventQueueOptions } from "./eventQueue";
+import { makeSessionId, type ClientEvent } from "./reportClientEvent";
+import { sanitizeUserId } from "../identity/userIdentity";
+
+/** Arbitrary non-PII event properties. Serialized to the event's `meta` (a JSON string) on the wire. */
+export type AnalyticsProps = Record<string, unknown>;
+
+/**
+ * Tenant transport + context inputs for {@link createAnalytics}. `serverUrl`/`apiKey` are the
+ * SAME creds as onboarding (never a second key). The rest feed the context envelope + the queue's
+ * offline persistence — all optional.
+ */
+export type CreateAnalyticsConfig = {
+  /** Base server URL (same as `WireOnboardingConfig.serverUrl`); `/v1/events` is appended. */
+  serverUrl: string;
+  /** Tenant API key; sent as `Authorization: Bearer`. */
+  apiKey: string;
+  /**
+   * Correlation id shared by every event from this instance (and the `identify` event). Defaults
+   * to a fresh `makeSessionId()` at creation so all events agree on one id per analytics instance.
+   */
+  sessionId?: string;
+  /** Tenant/app id used to namespace the queue's default storage key (`wireai:evtq:<appId>`). */
+  appId?: string;
+  /**
+   * Host persistence (AsyncStorage-compatible subset) for offline-first durability. When omitted,
+   * the queue runs in the documented in-memory mode (survives re-renders, not app kills).
+   */
+  storage?: EventQueueOptions["storage"];
+  /** Host app version, e.g. "1.4.2" (host-injected; stamped onto every event's context). */
+  appVersion?: string;
+  /** Host native build number, e.g. "412" (host-injected). */
+  appBuild?: string;
+  /** Host connectivity signal, e.g. "wifi" | "cellular" — read fresh per event via the provider. */
+  networkType?: string;
+};
+
+/** Optional queue tuning knobs, forwarded verbatim to {@link createEventQueue}. */
+export type AnalyticsOptions = Partial<
+  Pick<EventQueueOptions, "maxSize" | "batchSize" | "baseBackoffMs" | "maxBackoffMs" | "maxRetries">
+>;
+
+/**
+ * The developer-facing analytics surface. `track`/`screen`/`identify` are the Segment/PostHog-shaped
+ * API; `flush`/`notifyOnline`/`size` expose the underlying queue so a host can drive reconnect
+ * draining (load-bearing for offline-first) and inspect the pending buffer.
+ */
+export type Analytics = {
+  /** Record an in-app event: `event_type='app_event'`, `question_key=<event>`, `props`→`meta`. */
+  track(event: string, props?: AnalyticsProps): void;
+  /** Record a screen view: `event_type='app_event'`, `question_key='screen'`, `meta={ screen, ...props }`. */
+  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;
+  /** Attempt an immediate drain of the pending buffer. Fire-and-forget. */
+  flush(): void;
+  /** Host reconnect signal: reset backoff and drain now. Fire-and-forget. */
+  notifyOnline(): void;
+  /** Current pending (in-memory) count. */
+  size(): number;
+};
+
+/**
+ * Create a bound analytics instance. Seeds one correlation `sessionId`, builds an offline-first
+ * queue over the tenant transport, and passes a fresh-per-event context envelope PROVIDER so the
+ * connectivity type is read at enqueue time. The bound user id starts unset (see `identify`).
+ */
+export const createAnalytics = (
+  config: CreateAnalyticsConfig,
+  options: AnalyticsOptions = {},
+): Analytics => {
+  const sessionId = config.sessionId ?? makeSessionId();
+
+  // A provider (not a fixed value) so `networkType` is evaluated fresh on every enqueue.
+  const envelope = (): ContextEnvelope =>
+    buildContextEnvelope({
+      sessionId,
+      appVersion: config.appVersion,
+      appBuild: config.appBuild,
+      networkType: config.networkType,
+    });
+
+  const queue: EventQueue = createEventQueue({
+    target: { serverUrl: config.serverUrl, apiKey: config.apiKey },
+    storage: config.storage,
+    appId: config.appId,
+    envelope,
+    ...options,
+  });
+
+  // Per-session, in-memory user binding. Persisted across launches when storage is provided.
+  let boundUserId: string | undefined;
+  const storageKey = `wireai:analytics:userId:${config.appId ?? "default"}`;
+
+  if (config.storage) {
+    void config.storage
+      .getItem(storageKey)
+      .then((saved) => {
+        if (saved) boundUserId = saved;
+      })
+      .catch(() => {});
+  }
+
+  const track = (event: string, props?: AnalyticsProps): void => {
+    if (!event) return;
+    const clientEvent: ClientEvent = {
+      event_type: "app_event",
+      session_id: sessionId,
+      question_key: event,
+    };
+    if (props && Object.keys(props).length > 0) clientEvent.meta = JSON.stringify(props);
+    if (boundUserId) clientEvent.user_id = boundUserId;
+    queue.enqueue(clientEvent);
+  };
+
+  const screen = (name: string, props?: AnalyticsProps): void => {
+    if (!name) return;
+    // Reuse the K6 screen event shape (question_key='screen'); route through the queue for offline-first.
+    const meta = { screen: name, ...(props ?? {}) };
+    const clientEvent: ClientEvent = {
+      event_type: "app_event",
+      session_id: sessionId,
+      question_key: "screen",
+      meta: JSON.stringify(meta),
+    };
+    if (boundUserId) clientEvent.user_id = boundUserId;
+    queue.enqueue(clientEvent);
+  };
+
+  const identify = (userId: string, traits?: AnalyticsProps): void => {
+    const clean = sanitizeUserId(userId);
+    // 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,
+      user_id: clean,
+    };
+    if (traits && Object.keys(traits).length > 0) clientEvent.meta = JSON.stringify(traits);
+    queue.enqueue(clientEvent);
+  };
+
+  return {
+    track,
+    screen,
+    identify,
+    flush: queue.flush,
+    notifyOnline: queue.notifyOnline,
+    size: queue.size,
+  };
+};

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

@@ -45,3 +45,15 @@ export type { ContextEnvelope, ContextEnvelopeInput } from "./contextEnvelope";
 // ─── Offline-first, persistent, batched + retried event queue (dependency-free) ─
 export { createEventQueue } from "./eventQueue";
 export type { EventQueue, EventQueueOptions, EnvelopeSource } from "./eventQueue";
+
+// ─── Developer-facing analytics façade (track / screen / identify) over the queue ─
+export { createAnalytics } from "./analyticsFacade";
+export type {
+  Analytics,
+  AnalyticsOptions,
+  AnalyticsProps,
+  CreateAnalyticsConfig,
+} from "./analyticsFacade";
+
+// ─── The thin optional React hook over the façade ─────────────────────────────
+export { useAnalytics } from "./useAnalytics";

package/src/analytics/reportClientEvent.ts

@@ -35,8 +35,17 @@ import type { DeviceContext } from "../device/deviceContext";
  *  This is the SINGLE fallback signal — hosts must NOT also report their own.
  *  `identify` binds the host's opaque `user_id` to this `session_id` (late binding — the user
  *  registered during/after onboarding). It carries no funnel weight; the server maps the
- *  session to the user and back-fills a `session_started` if it never saw the session. */
-export type ClientEventType = "screen_skipped" | "dropped" | "client_fallback" | "identify";
+ *  session to the user and back-fills a `session_started` if it never saw the session.
+ *  `app_event` is the host's own in-app event (the `createAnalytics` façade's `track`/`screen`
+ *  route through the offline queue as first-class `ClientEvent`s). The server already ingests
+ *  it — `reportAppEvent` (reviews/transport) has fired `event_type='app_event'` all along; this
+ *  widening just lets the same shape flow through the durable queue instead of a blind POST. */
+export type ClientEventType =
+  | "screen_skipped"
+  | "dropped"
+  | "client_fallback"
+  | "identify"
+  | "app_event";
 
 /** One client-reported event. Mirrors the server's `OnboardingEvent` (client-settable fields). */
 export type ClientEvent = {

package/src/analytics/useAnalytics.ts

@@ -0,0 +1,42 @@
+/**
+ * useAnalytics — a THIN optional React hook over the pure {@link createAnalytics} factory.
+ *
+ * It builds ONE analytics instance for the component's lifetime and returns it, so re-renders
+ * never rebuild the queue or lose the in-memory user binding. React is a REQUIRED peer of the
+ * kit, so importing it here is allowed; the hook adds NO other dependency. Mirrors the existing
+ * `createScreenTracker` / `useScreenTracking` split — the factory stays React-free, this is the
+ * glue.
+ *
+ *   const analytics = useAnalytics({ serverUrl, apiKey, storage, appId });
+ *   analytics.track("content_share", { source: "feed" });
+ *   // ...on reconnect: analytics.notifyOnline();
+ */
+import { useRef } from "react";
+
+import {
+  createAnalytics,
+  type Analytics,
+  type AnalyticsOptions,
+  type CreateAnalyticsConfig,
+} from "./analyticsFacade";
+
+/**
+ * Build a per-mount analytics instance. `config`/`options` are read once at first render (the
+ * instance is stable for the component's lifetime, held in a ref). Returns the {@link Analytics}
+ * surface so the component can `track` / `screen` / `identify` and drive `notifyOnline` on reconnect.
+ */
+export const useAnalytics = (
+  config: CreateAnalyticsConfig,
+  options: AnalyticsOptions = {},
+): 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);
+  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" },
+  });
+}

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 => {