@scalebun-release/react-native 2.5.0

package/lib/module/features/engage/EngageArchetypeRenderers.js

@@ -0,0 +1,4264 @@
+/**
+ * ScaleBun SDK — Archetype-specific in-app renderers
+ *
+ * These renderers own mechanic content only. Presentation (modal, sheet, banner,
+ * fullscreen, anchored, or inline) stays in EngageInAppView so one mechanic can
+ * be mounted correctly in every container.
+ *
+ * Implemented archetypes (matching dashboard variant keys):
+ *   spin_wheel          → animated spinning prize wheel
+ *   countdown_offer     → live flip-style countdown clock
+ *   scratch_card        → tap-to-reveal scratch surface
+ *   slot_reward         → three-reel slot machine
+ *   poll_card           → single-choice option list
+ *   nps_prompt          → 0–10 NPS number row
+ *   emoji_reaction_bar  → emoji row picker
+ *   rating_request      → 1–5 star tap rating
+ *   streak_reward       → day-streak dot strip
+ *   checklist_progress  → tick-off checklist
+ *   coupon_wallet       → large coupon reveal chip
+ */
+
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { AccessibilityInfo, Animated, Easing, Image, PanResponder, Pressable, ScrollView, Text, TextInput, View } from "react-native";
+import { addScratchedCell, boundedInt, clampPage, gradeGameAnswer, resolveSlotOutcome, scoreGameAnswer, scratchCellAt, scratchProgress, toggleGameSelection, wheelTargetAngle } from "./engageGameLogic";
+import { resolveInAppMediaHeight } from "./engageMediaSizing";
+import { inAppOutcomeTerminalForCta } from "./engageOutcome";
+import { requestNativeStoreReview } from "./engageStoreReviewBridge";
+
+// ─── helpers ──────────────────────────────────────────────────────────────────
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ext = props => props.spec.ext ?? {};
+const str = v => typeof v === "string" ? v : "";
+const num = (v, fallback) => typeof v === "number" ? v : fallback;
+const arr = v => Array.isArray(v) ? v : [];
+const record = v => v !== null && typeof v === "object" && !Array.isArray(v) ? v : {};
+const labelOf = v => {
+  const value = record(v);
+  return str(value.label ?? value.title ?? value.name ?? value.prompt ?? v);
+};
+const firstText = (source, keys) => {
+  for (const key of keys) {
+    const value = str(source[key]);
+    if (value) return value;
+  }
+  return "";
+};
+const variantOf = props => props.variantKey || str(props.spec.variantKey);
+const mediaUri = value => {
+  const item = record(value);
+  return str(item.uri ?? item.url ?? item.imageUrl ?? item.image ?? value);
+};
+const gameUnavailableText = error => {
+  if (error instanceof Error && error.message) return error.message;
+  return "Result unavailable. Please try again.";
+};
+const gameResultLabel = outcome => {
+  if (!outcome) return "";
+  if (outcome.label) return outcome.label;
+  return typeof outcome.value === "string" || typeof outcome.value === "number" ? String(outcome.value) : "";
+};
+const presentTerminalOutcome = (props, resultLabel) => {
+  if (!props.onOutcome) return false;
+  props.onOutcome({
+    ...(resultLabel ? {
+      resultLabel
+    } : {}),
+    fallback: inAppOutcomeTerminalForCta(props.spec.cta)
+  });
+  return true;
+};
+async function requireGameOutcome(props, attempt = 1, input) {
+  if (!props.requestGameResult) throw new Error("Game result handler is not configured");
+  const result = await props.requestGameResult(attempt, input);
+  if (result.status === "unavailable") {
+    throw new Error(result.message || "Result unavailable. Please try again.");
+  }
+  return result.outcome;
+}
+function useReducedMotion() {
+  const [enabled, setEnabled] = useState(null);
+  useEffect(() => {
+    let mounted = true;
+    AccessibilityInfo.isReduceMotionEnabled().then(value => {
+      if (mounted) setEnabled(value);
+    });
+    const subscription = AccessibilityInfo.addEventListener("reduceMotionChanged", setEnabled);
+    return () => {
+      mounted = false;
+      subscription.remove();
+    };
+  }, []);
+  return enabled;
+}
+function Title({
+  text,
+  theme
+}) {
+  if (!text) return null;
+  return /*#__PURE__*/_jsx(Text, {
+    style: [sh.title, {
+      color: theme.titleColor
+    }],
+    children: text
+  });
+}
+function Body({
+  text,
+  theme
+}) {
+  if (!text) return null;
+  return /*#__PURE__*/_jsx(Text, {
+    style: [sh.body, {
+      color: theme.bodyColor
+    }],
+    children: text
+  });
+}
+function PrimaryBtn({
+  label,
+  accent,
+  onPress,
+  disabled = false
+}) {
+  return /*#__PURE__*/_jsx(Pressable, {
+    style: [sh.primaryBtn, {
+      backgroundColor: accent,
+      opacity: disabled ? 0.65 : 1
+    }],
+    onPress: onPress,
+    disabled: disabled,
+    accessibilityRole: "button",
+    accessibilityLabel: label,
+    accessibilityState: {
+      disabled
+    },
+    children: /*#__PURE__*/_jsx(Text, {
+      style: sh.primaryText,
+      children: label
+    })
+  });
+}
+function SecondaryBtn({
+  label,
+  onPress,
+  color
+}) {
+  return /*#__PURE__*/_jsx(Pressable, {
+    style: sh.secondaryBtn,
+    onPress: onPress,
+    accessibilityRole: "button",
+    accessibilityLabel: label,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [sh.secondaryText, {
+        color
+      }],
+      children: label
+    })
+  });
+}
+function CtaArea({
+  beforePrimary,
+  onPrimary,
+  ...props
+}) {
+  const {
+    spec,
+    theme,
+    onCta,
+    onDismiss
+  } = props;
+  if (!spec.cta && !spec.secondaryCta) return null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: sh.ctaRow,
+    children: [spec.secondaryCta ? /*#__PURE__*/_jsx(SecondaryBtn, {
+      label: spec.secondaryCta.label,
+      onPress: onDismiss,
+      color: theme.secondaryColor
+    }) : null, spec.cta ? /*#__PURE__*/_jsx(PrimaryBtn, {
+      label: spec.cta.label,
+      accent: theme.accent,
+      onPress: () => {
+        beforePrimary?.();
+        if (onPrimary) onPrimary();else if (presentTerminalOutcome(props)) return;else if (spec.cta.action === "dismiss") onDismiss();else onCta(spec.cta);
+      }
+    }) : null]
+  });
+}
+
+// ─── 1. Spin Wheel ────────────────────────────────────────────────────────────
+
+const WHEEL_COLORS = ["#6C5CE7", "#8B7CF6", "#F5A524", "#E85D75", "#4834D4", "#00A896"];
+const WHEEL_MAX_SIZE = 264;
+const MAX_WHEEL_SEGMENTS = 8;
+export function resolveWheelDiameter(availableWidth) {
+  return Number.isFinite(availableWidth) && availableWidth > 0 ? Math.min(WHEEL_MAX_SIZE, Math.floor(availableWidth)) : 0;
+}
+function wheelOutcomeIdentity(source) {
+  const resultValue = source.resultState ?? source.rewardResult ?? source.result ?? source.reward;
+  const result = record(resultValue);
+  return {
+    explicitIndex: num(source.winningIndex ?? source.resultIndex ?? source.selectedIndex ?? result.index, -1),
+    resultId: str(source.winningId ?? source.segmentId ?? result.segmentId ?? result.id ?? result.value),
+    resultLabel: labelOf(resultValue)
+  };
+}
+function findWheelOutcomeIndex(segments, identity) {
+  if (identity.explicitIndex >= 0) {
+    const explicit = segments.findIndex(({
+      sourceIndex
+    }) => sourceIndex === Math.floor(identity.explicitIndex));
+    if (explicit >= 0) return explicit;
+  }
+  if (identity.resultId) {
+    const byId = segments.findIndex(({
+      id
+    }) => id === identity.resultId);
+    if (byId >= 0) return byId;
+  }
+  if (!identity.resultLabel) return -1;
+  const normalizedResult = normalizedWheelValue(identity.resultLabel);
+  const normalizedLabels = segments.map(segment => [segment.fullLabel, segment.label].map(normalizedWheelValue));
+  const exact = normalizedLabels.findIndex(labels => labels.includes(normalizedResult));
+  if (exact >= 0) return exact;
+  let bestIndex = -1;
+  let bestLength = -1;
+  normalizedLabels.forEach((labels, index) => {
+    const length = Math.max(...labels.map(label => normalizedResult.includes(label) ? label.length : -1));
+    if (length > bestLength) {
+      bestIndex = index;
+      bestLength = length;
+    }
+  });
+  return bestIndex;
+}
+export function prepareWheelSegments(value, source = {}) {
+  const segments = arr(value).map((entry, index) => {
+    const item = record(entry);
+    const fullLabel = labelOf(entry);
+    return {
+      id: str(item.id ?? item.value ?? item.code) || String(index),
+      label: str(item.shortLabel) || fullLabel,
+      fullLabel,
+      color: str(item.color ?? item.backgroundColor),
+      sourceIndex: index
+    };
+  }).filter(({
+    label
+  }) => Boolean(label));
+  if (segments.length <= MAX_WHEEL_SEGMENTS) return segments;
+  const winnerIndex = findWheelOutcomeIndex(segments, wheelOutcomeIdentity(source));
+  const winner = winnerIndex >= 0 ? segments[winnerIndex] : undefined;
+  const visible = segments.slice(0, MAX_WHEEL_SEGMENTS);
+  if (winner && !visible.includes(winner)) visible[MAX_WHEEL_SEGMENTS - 1] = winner;
+  return visible;
+}
+const normalizedWheelValue = value => value.toLowerCase().replace(/\s+/g, " ").trim();
+export function resolveWheelOutcome(segments, source) {
+  const identity = wheelOutcomeIdentity(source);
+  const index = findWheelOutcomeIndex(segments, identity);
+  const resolved = index >= 0;
+  return {
+    index: resolved ? index : 0,
+    label: identity.resultLabel || (resolved ? segments[index]?.fullLabel ?? "" : ""),
+    resolved
+  };
+}
+export function SpinWheelInApp(props) {
+  const {
+    spec,
+    theme,
+    onDismiss,
+    onCta
+  } = props;
+  const e = ext(props);
+  const [gameOutcome, setGameOutcome] = useState(null);
+  const [gameError, setGameError] = useState("");
+  const outcomeSource = gameOutcome ? {
+    winningId: gameOutcome.segmentId || gameOutcome.id,
+    winningIndex: gameOutcome.segmentIndex,
+    resultState: {
+      id: gameOutcome.id,
+      label: gameResultLabel(gameOutcome)
+    }
+  } : {};
+  const configuredSegments = prepareWheelSegments(e.segments, outcomeSource);
+  const segments = configuredSegments.length > 0 ? configuredSegments : prepareWheelSegments(["10% OFF", "FREE GIFT", "20% OFF", "TRY AGAIN", "5% OFF", "JACKPOT!"]);
+  const n = segments.length;
+  const sliceDeg = 360 / n;
+  const [wheelSize, setWheelSize] = useState(WHEEL_MAX_SIZE);
+  const wheelRadius = wheelSize / 2;
+  const wheelScale = wheelSize / WHEEL_MAX_SIZE;
+  const labelRadius = wheelRadius * 0.65;
+  const hubSize = Math.max(30, 40 * wheelScale);
+  const wedgeHalfWidth = Math.ceil(wheelRadius * Math.tan(Math.PI / Math.max(n, 3)));
+  const outcome = resolveWheelOutcome(segments, outcomeSource);
+  const spin = useRef(new Animated.Value(0)).current;
+  const reducedMotion = useReducedMotion();
+  const angleRef = useRef(0);
+  const [phase, setPhase] = useState("idle");
+  useEffect(() => () => spin.stopAnimation(), [spin]);
+  const doSpin = async () => {
+    if (phase !== "idle") return;
+    setGameError("");
+    setPhase("resolving");
+    props.onInteraction?.({
+      mechanic: "spin_wheel",
+      phase: "started",
+      attempt: 1
+    });
+    let remoteOutcome;
+    try {
+      remoteOutcome = await requireGameOutcome(props);
+    } catch (error) {
+      setGameError(gameUnavailableText(error));
+      setPhase("idle");
+      return;
+    }
+    const remoteSource = {
+      winningId: remoteOutcome.segmentId || remoteOutcome.id,
+      winningIndex: remoteOutcome.segmentIndex,
+      resultState: {
+        id: remoteOutcome.id,
+        label: gameResultLabel(remoteOutcome)
+      }
+    };
+    const remoteSegments = prepareWheelSegments(e.segments, remoteSource);
+    const displayedSegments = remoteSegments.length > 0 ? remoteSegments : segments;
+    const remoteResult = resolveWheelOutcome(displayedSegments, remoteSource);
+    if (!remoteResult.resolved) {
+      setGameError("The backend result does not match a wheel segment.");
+      setPhase("idle");
+      return;
+    }
+    setGameOutcome(remoteOutcome);
+    setPhase("spinning");
+    const from = angleRef.current;
+    // Animation is visual only; the customer backend's result selects the segment.
+    const to = wheelTargetAngle(displayedSegments.length, remoteResult.index, from);
+    angleRef.current = to;
+    spin.setValue(from);
+    Animated.timing(spin, {
+      toValue: to,
+      duration: reducedMotion === false ? 3600 : 0,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true
+    }).start(({
+      finished
+    }) => {
+      if (!finished) return;
+      setPhase("result");
+      props.onInteraction?.({
+        mechanic: "spin_wheel",
+        phase: "resolved",
+        attempt: 1,
+        result: remoteResult.label || undefined,
+        meta: {
+          backendResolved: true,
+          segmentIndex: remoteResult.index
+        }
+      });
+      AccessibilityInfo.announceForAccessibility(remoteResult.label || "Spin complete");
+      presentTerminalOutcome(props, remoteResult.label);
+    });
+  };
+  const rotate = spin.interpolate({
+    inputRange: [0, 360],
+    outputRange: ["0deg", "360deg"],
+    extrapolate: "extend"
+  });
+  const counterRotate = spin.interpolate({
+    inputRange: [0, 360],
+    outputRange: ["0deg", "-360deg"],
+    extrapolate: "extend"
+  });
+  const onWheelLayout = ({
+    nativeEvent
+  }) => {
+    const measured = resolveWheelDiameter(nativeEvent.layout.width);
+    if (measured > 0) {
+      setWheelSize(current => current === measured ? current : measured);
+    }
+  };
+  const spinLabel = str(e.spinLabel) || (/spin/i.test(spec.cta?.label ?? "") ? spec.cta?.label : "") || "SPIN";
+  const claimLabel = str(e.claimLabel ?? e.ctaLabel) || (/spin/i.test(spec.cta?.label ?? "") ? gameOutcome ? "CLAIM REWARD" : "CONTINUE" : spec.cta?.label) || "CONTINUE";
+  const handleClaim = () => {
+    props.onInteraction?.({
+      mechanic: "spin_wheel",
+      phase: "claimed",
+      attempt: 1,
+      result: outcome.label || undefined
+    });
+    if (!spec.cta) {
+      onDismiss();
+      return;
+    }
+    if (spec.cta.action === "dismiss") {
+      onDismiss();
+      return;
+    }
+    onCta(spec.cta);
+    setPhase("claimed");
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: sh.content,
+    children: [/*#__PURE__*/_jsx(Title, {
+      text: spec.title,
+      theme: theme
+    }), /*#__PURE__*/_jsx(Body, {
+      text: spec.body,
+      theme: theme
+    }), /*#__PURE__*/_jsxs(View, {
+      style: wh.stage,
+      onLayout: onWheelLayout,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [wh.pointer, {
+          borderTopColor: theme.accent
+        }]
+      }), /*#__PURE__*/_jsxs(Animated.View, {
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        style: [wh.wheel, {
+          backgroundColor: theme.couponBg,
+          borderColor: theme.accent,
+          borderRadius: wheelRadius,
+          height: wheelSize,
+          transform: [{
+            rotate
+          }],
+          width: wheelSize
+        }],
+        children: [segments.map((segment, i) => {
+          const angle = sliceDeg * i;
+          const color = segment.color || WHEEL_COLORS[i % WHEEL_COLORS.length] || theme.accent;
+          const labelWidth = Math.max(28, Math.min(84 * wheelScale, 2 * labelRadius * Math.sin(Math.PI / Math.max(n, 2)) - 8 * wheelScale));
+          return /*#__PURE__*/_jsxs(React.Fragment, {
+            children: [n === 1 ? /*#__PURE__*/_jsx(View, {
+              style: [wh.singleWedge, {
+                backgroundColor: color
+              }]
+            }) : n === 2 ? /*#__PURE__*/_jsx(View, {
+              style: [wh.halfWedge, {
+                backgroundColor: color,
+                height: wheelRadius,
+                top: i * wheelRadius,
+                width: wheelSize
+              }]
+            }) : /*#__PURE__*/_jsx(View, {
+              style: [wh.wedgeOrbit, {
+                height: wheelSize,
+                transform: [{
+                  rotate: `${angle + 180}deg`
+                }],
+                width: wheelSize
+              }],
+              children: /*#__PURE__*/_jsx(View, {
+                style: [wh.wedge, {
+                  borderBottomWidth: wheelRadius,
+                  borderLeftWidth: wedgeHalfWidth,
+                  borderRightWidth: wedgeHalfWidth,
+                  borderBottomColor: color,
+                  left: wheelRadius - wedgeHalfWidth,
+                  top: wheelRadius
+                }]
+              })
+            }), /*#__PURE__*/_jsx(View, {
+              style: [wh.labelOrbit, {
+                height: wheelSize,
+                transform: [{
+                  rotate: `${angle}deg`
+                }],
+                width: wheelSize
+              }],
+              children: /*#__PURE__*/_jsx(Animated.View, {
+                style: [wh.segment, {
+                  left: wheelRadius - labelWidth / 2,
+                  minHeight: 36 * wheelScale,
+                  top: 28 * wheelScale,
+                  width: labelWidth,
+                  transform: [{
+                    rotate: `${-angle}deg`
+                  }, {
+                    rotate: counterRotate
+                  }]
+                }],
+                children: /*#__PURE__*/_jsx(Text, {
+                  numberOfLines: 2,
+                  adjustsFontSizeToFit: true,
+                  minimumFontScale: 0.7,
+                  style: wh.segmentText,
+                  children: segment.label
+                })
+              })
+            })]
+          }, `${segment.id}-${i}`);
+        }), /*#__PURE__*/_jsx(View, {
+          style: [wh.hub, {
+            borderColor: theme.accent,
+            borderRadius: hubSize / 2,
+            height: hubSize,
+            left: wheelRadius - hubSize / 2,
+            top: wheelRadius - hubSize / 2,
+            width: hubSize
+          }],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [wh.hubText, {
+              color: theme.accent
+            }],
+            children: "\u2605"
+          })
+        })]
+      })]
+    }), phase === "result" || phase === "claimed" ? /*#__PURE__*/_jsxs(View, {
+      style: [wh.result, {
+        backgroundColor: theme.accent
+      }],
+      accessibilityRole: "summary",
+      accessibilityLiveRegion: "polite",
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: wh.resultEyebrow,
+        children: phase === "claimed" ? str(e.claimedLabel) || (outcome.resolved ? "CLAIMED" : "DONE") : outcome.resolved ? str(e.resultLabel) || "YOU LANDED ON" : str(e.resultLabel) || "SPIN COMPLETE"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: wh.resultText,
+        children: phase === "claimed" ? str(e.claimedState) || outcome.label || (outcome.resolved ? "Reward claimed" : "Action complete") : outcome.label || "Your result will be confirmed next"
+      })]
+    }) : null, phase === "idle" && gameError ? /*#__PURE__*/_jsx(Text, {
+      style: [wh.unavailable, {
+        color: theme.secondaryColor
+      }],
+      children: gameError
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: sh.ctaRow,
+      children: phase === "idle" || phase === "resolving" || phase === "spinning" ? /*#__PURE__*/_jsx(PrimaryBtn, {
+        label: phase === "resolving" ? "CHECKING…" : phase === "spinning" ? "SPINNING…" : gameError ? "RETRY" : spinLabel,
+        accent: theme.accent,
+        onPress: () => {
+          void doSpin();
+        },
+        disabled: phase === "resolving" || phase === "spinning"
+      }) : phase === "result" ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [spec.secondaryCta ? /*#__PURE__*/_jsx(SecondaryBtn, {
+          label: spec.secondaryCta.label,
+          onPress: onDismiss,
+          color: theme.secondaryColor
+        }) : null, /*#__PURE__*/_jsx(PrimaryBtn, {
+          label: claimLabel,
+          accent: theme.accent,
+          onPress: handleClaim
+        })]
+      }) : /*#__PURE__*/_jsx(PrimaryBtn, {
+        label: "DONE",
+        accent: theme.accent,
+        onPress: onDismiss
+      })
+    })]
+  });
+}
+const wh = {
+  stage: {
+    alignItems: "center",
+    marginVertical: 12
+  },
+  pointer: {
+    width: 0,
+    height: 0,
+    borderLeftWidth: 12,
+    borderRightWidth: 12,
+    borderTopWidth: 24,
+    borderLeftColor: "transparent",
+    borderRightColor: "transparent",
+    zIndex: 10,
+    marginBottom: -4
+  },
+  wheel: {
+    borderWidth: 5,
+    overflow: "hidden",
+    position: "relative",
+    shadowColor: "#000",
+    shadowOpacity: 0.2,
+    shadowRadius: 10,
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    elevation: 6
+  },
+  wedgeOrbit: {
+    position: "absolute",
+    left: 0,
+    top: 0
+  },
+  wedge: {
+    position: "absolute",
+    width: 0,
+    height: 0,
+    borderLeftColor: "transparent",
+    borderRightColor: "transparent"
+  },
+  singleWedge: {
+    position: "absolute",
+    inset: 0
+  },
+  halfWedge: {
+    position: "absolute",
+    left: 0
+  },
+  labelOrbit: {
+    position: "absolute",
+    left: 0,
+    top: 0
+  },
+  segment: {
+    position: "absolute",
+    borderRadius: 10,
+    paddingHorizontal: 5,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(0,0,0,0.32)"
+  },
+  segmentText: {
+    color: "#FFFFFF",
+    fontSize: 10,
+    fontWeight: "800",
+    textAlign: "center",
+    lineHeight: 12,
+    textShadowColor: "rgba(0,0,0,0.25)",
+    textShadowOffset: {
+      width: 0,
+      height: 1
+    },
+    textShadowRadius: 2
+  },
+  hub: {
+    position: "absolute",
+    backgroundColor: "#FFFFFF",
+    borderWidth: 3,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  hubText: {
+    fontSize: 16,
+    fontWeight: "900"
+  },
+  result: {
+    borderRadius: 12,
+    paddingVertical: 10,
+    paddingHorizontal: 18,
+    alignSelf: "center",
+    marginBottom: 10
+  },
+  resultText: {
+    color: "#fff",
+    fontWeight: "800",
+    fontSize: 16,
+    textAlign: "center"
+  },
+  resultEyebrow: {
+    color: "rgba(255,255,255,0.78)",
+    fontWeight: "700",
+    fontSize: 10,
+    letterSpacing: 1,
+    textAlign: "center",
+    marginBottom: 2
+  },
+  unavailable: {
+    fontSize: 11,
+    lineHeight: 15,
+    textAlign: "center",
+    marginBottom: 4
+  }
+};
+
+// ─── 2. Countdown Timer ───────────────────────────────────────────────────────
+
+export function resolveCountdownDeadline(expiryValue, now = Date.now()) {
+  const duration = expiryValue.match(/^(\d{1,2}):(\d{2}):(\d{2})$/);
+  if (duration) {
+    const [, hours = "0", minutes = "0", seconds = "0"] = duration;
+    return now + (Number(hours) * 3600 + Number(minutes) * 60 + Number(seconds)) * 1000;
+  }
+  const timestamp = Date.parse(expiryValue);
+  return Number.isFinite(timestamp) ? timestamp : now + 30 * 60 * 1000;
+}
+function useCountdown(expiryValue) {
+  const deadline = useMemo(() => resolveCountdownDeadline(expiryValue), [expiryValue]);
+  const getMs = () => Math.max(0, deadline - Date.now());
+  const [ms, setMs] = useState(getMs);
+  useEffect(() => {
+    const id = setInterval(() => setMs(getMs()), 1000);
+    return () => clearInterval(id);
+  }, [deadline]);
+  const totalSec = Math.floor(ms / 1000);
+  const h = Math.floor(totalSec / 3600);
+  const m = Math.floor(totalSec % 3600 / 60);
+  const s = totalSec % 60;
+  return {
+    h,
+    m,
+    s,
+    done: ms === 0
+  };
+}
+function FlipUnit({
+  value,
+  label
+}) {
+  const v = String(value).padStart(2, "0");
+  return /*#__PURE__*/_jsxs(View, {
+    style: cd.unit,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: cd.box,
+      children: /*#__PURE__*/_jsx(Text, {
+        adjustsFontSizeToFit: true,
+        minimumFontScale: 0.65,
+        numberOfLines: 1,
+        style: cd.num,
+        children: v
+      })
+    }), /*#__PURE__*/_jsx(Text, {
+      style: cd.lbl,
+      children: label
+    })]
+  });
+}
+export function CountdownInApp(props) {
+  const {
+    spec,
+    theme
+  } = props;
+  const e = ext(props);
+  const expiry = str(e.expiryTime) || str(e.expiry);
+  const units = num(e.countdownUnits, 3);
+  const {
+    h,
+    m,
+    s,
+    done
+  } = useCountdown(expiry);
+  return /*#__PURE__*/_jsxs(View, {
+    style: sh.content,
+    children: [/*#__PURE__*/_jsx(Title, {
+      text: spec.title,
+      theme: theme
+    }), /*#__PURE__*/_jsx(Body, {
+      text: done ? "This offer has expired." : spec.body,
+      theme: theme
+    }), !done ? /*#__PURE__*/_jsxs(View, {
+      style: cd.row,
+      children: [units >= 3 ? /*#__PURE__*/_jsx(FlipUnit, {
+        value: h,
+        label: "HRS"
+      }) : null, units >= 2 ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          allowFontScaling: false,
+          style: [cd.sep, {
+            color: theme.accent
+          }],
+          children: ":"
+        }), /*#__PURE__*/_jsx(FlipUnit, {
+          value: m,
+          label: "MIN"
+        })]
+      }) : null, /*#__PURE__*/_jsx(Text, {
+        allowFontScaling: false,
+        style: [cd.sep, {
+          color: theme.accent
+        }],
+        children: ":"
+      }), /*#__PURE__*/_jsx(FlipUnit, {
+        value: s,
+        label: "SEC"
+      })]
+    }) : null, /*#__PURE__*/_jsx(CtaArea, {
+      ...props
+    })]
+  });
+}
+const cd = {
+  row: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    marginVertical: 14,
+    width: "100%"
+  },
+  unit: {
+    alignItems: "center",
+    flex: 1,
+    marginHorizontal: 2,
+    minWidth: 0
+  },
+  box: {
+    backgroundColor: "#111827",
+    borderRadius: 10,
+    paddingVertical: 8,
+    paddingHorizontal: 4,
+    width: "100%"
+  },
+  num: {
+    fontSize: 24,
+    fontWeight: "800",
+    color: "#fff",
+    textAlign: "center",
+    fontVariant: ["tabular-nums"]
+  },
+  lbl: {
+    fontSize: 9,
+    color: "#9CA3AF",
+    marginTop: 4,
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  },
+  sep: {
+    fontSize: 28,
+    fontWeight: "800",
+    paddingHorizontal: 2,
+    paddingTop: 4
+  }
+};
+
+// ─── Carousel / Swipe Deck ───────────────────────────────────────────────────
+
+function gameCards(value) {
+  return arr(value).slice(0, 20).map((item, index) => {
+    const card = record(item);
+    return {
+      id: str(card.id ?? card.value) || String(index),
+      title: labelOf(item),
+      body: firstText(card, ["body", "description", "message", "price"]),
+      image: mediaUri(card.image ?? card.imageUrl ?? card.cardImage ?? card.productImage)
+    };
+  });
+}
+export function CarouselDeckInApp(props) {
+  if (variantOf(props) === "swipe_deck") return /*#__PURE__*/_jsx(SwipeDeckInApp, {
+    ...props
+  });
+  const {
+    spec,
+    theme
+  } = props;
+  const e = ext(props);
+  const slides = gameCards(e.slides ?? e.cards ?? e.products ?? props.spec.assets?.products);
+  const mediaHeight = resolveInAppMediaHeight(spec, 104, 240);
+  const [page, setPage] = useState(0);
+  const [pageWidth, setPageWidth] = useState(280);
+  const onLayout = event => {
+    const width = Math.round(event.nativeEvent.layout.width);
+    if (width > 0) setPageWidth(width);
+  };
+  const onPage = event => {
+    const width = event.nativeEvent.layoutMeasurement.width || pageWidth;
+    setPage(clampPage(event.nativeEvent.contentOffset.x, width, slides.length));
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: sh.content,
+    children: [/*#__PURE__*/_jsx(Title, {
+      text: spec.title,
+      theme: theme
+    }), /*#__PURE__*/_jsx(Body, {
+      text: spec.body,
+      theme: theme
+    }), slides.length > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(ScrollView, {
+        horizontal: true,
+        pagingEnabled: true,
+        showsHorizontalScrollIndicator: false,
+        onLayout: onLayout,
+        onMomentumScrollEnd: onPage,
+        style: car.viewport,
+        children: slides.map((slide, index) => {
+          const image = slide.image || (index === 0 ? str(spec.assets?.image) || str(spec.imageUrl) : "");
+          return /*#__PURE__*/_jsx(View, {
+            style: {
+              width: pageWidth
+            },
+            children: /*#__PURE__*/_jsxs(View, {
+              style: [car.card, {
+                backgroundColor: theme.couponBg,
+                borderColor: theme.couponBorder
+              }],
+              children: [image ? /*#__PURE__*/_jsx(Image, {
+                source: {
+                  uri: image
+                },
+                resizeMode: "cover",
+                style: [car.image, mediaHeight === undefined ? null : {
+                  height: mediaHeight
+                }],
+                accessibilityLabel: slide.title || `Slide ${index + 1}`
+              }) : null, slide.title ? /*#__PURE__*/_jsx(Text, {
+                style: [car.title, {
+                  color: theme.titleColor
+                }],
+                children: slide.title
+              }) : null, slide.body ? /*#__PURE__*/_jsx(Text, {
+                style: [car.body, {
+                  color: theme.bodyColor
+                }],
+                children: slide.body
+              }) : null]
+            })
+          }, `${slide.title}-${index}`);
+        })
+      }), slides.length > 1 ? /*#__PURE__*/_jsx(View, {
+        style: car.dots,
+        accessibilityLabel: `Slide ${page + 1} of ${slides.length}`,
+        children: slides.map((_, index) => /*#__PURE__*/_jsx(View, {
+          style: [car.dot, {
+            backgroundColor: index === page ? theme.accent : theme.couponBorder
+          }]
+        }, index))
+      }) : null]
+    }) : null, /*#__PURE__*/_jsx(CtaArea, {
+      ...props
+    })]
+  });
+}
+const car = {
+  viewport: {
+    width: "100%",
+    marginTop: 10
+  },
+  card: {
+    minHeight: 160,
+    padding: 12,
+    borderRadius: 14,
+    borderWidth: 1,
+    overflow: "hidden"
+  },
+  image: {
+    width: "100%",
+    height: 104,
+    borderRadius: 10,
+    marginBottom: 10
+  },
+  title: {
+    fontSize: 15,
+    lineHeight: 20,
+    fontWeight: "700"
+  },
+  body: {
+    fontSize: 12,
+    lineHeight: 18,
+    marginTop: 3
+  },
+  dots: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    gap: 6,
+    marginTop: 10
+  },
+  dot: {
+    width: 7,
+    height: 7,
+    borderRadius: 4
+  }
+};
+function SwipeDeckInApp(props) {
+  const {
+    spec,
+    theme
+  } = props;
+  const e = ext(props);
+  const cards = gameCards(e.cards ?? e.products ?? props.spec.assets?.products);
+  const mediaHeight = resolveInAppMediaHeight(spec, 132, 300);
+  const [index, setIndex] = useState(0);
+  const [decisions, setDecisions] = useState([]);
+  const dragX = useRef(new Animated.Value(0)).current;
+  const reducedMotion = useReducedMotion();
+  const decideRef = useRef(() => {});
+  const decidingRef = useRef(false);
+  const current = cards[index];
+  const swipeActions = record(e.swipeActions);
+  const skipLabel = str(swipeActions.skip ?? swipeActions.reject) || "SKIP";
+  const keepLabel = str(swipeActions.keep ?? swipeActions.accept) || "KEEP";
+  const decide = decision => {
+    if (!current || decidingRef.current) return;
+    decidingRef.current = true;
+    const card = current;
+    Animated.timing(dragX, {
+      toValue: decision === "keep" ? 420 : -420,
+      duration: reducedMotion === false ? 180 : 0,
+      useNativeDriver: false
+    }).start(({
+      finished
+    }) => {
+      decidingRef.current = false;
+      if (!finished) {
+        dragX.setValue(0);
+        return;
+      }
+      props.onInteraction?.({
+        mechanic: "swipe_deck",
+        phase: "decision",
+        progress: cards.length > 0 ? (index + 1) / cards.length : 1,
+        value: decision,
+        meta: {
+          cardId: card.id
+        }
+      });
+      dragX.setValue(0);
+      setDecisions(value => [...value, {
+        id: card.id,
+        decision
+      }]);
+      setIndex(value => value + 1);
+    });
+  };
+  decideRef.current = decide;
+  const responder = useMemo(() => PanResponder.create({
+    onMoveShouldSetPanResponder: (_, gesture) => Math.abs(gesture.dx) > 4,
+    onPanResponderMove: Animated.event([null, {
+      dx: dragX
+    }], {
+      useNativeDriver: false
+    }),
+    onPanResponderRelease: (_, gesture) => {
+      if (Math.abs(gesture.dx) >= 72) decideRef.current(gesture.dx > 0 ? "keep" : "skip");else Animated.spring(dragX, {
+        toValue: 0,
+        useNativeDriver: false
+      }).start();
+    },
+    onPanResponderTerminate: () => {
+      Animated.spring(dragX, {
+        toValue: 0,
+        useNativeDriver: false
+      }).start();
+    }
+  }), [dragX]);
+  useEffect(() => () => dragX.stopAnimation(), [dragX]);
+  const rotate = dragX.interpolate({
+    inputRange: [-220, 0, 220],
+    outputRange: ["-9deg", "0deg", "9deg"],
+    extrapolate: "clamp"
+  });
+  const kept = decisions.filter(({
+    decision
+  }) => decision === "keep").length;
+  return /*#__PURE__*/_jsxs(View, {
+    style: sh.content,
+    children: [/*#__PURE__*/_jsx(Title, {
+      text: spec.title,
+      theme: theme
+    }), /*#__PURE__*/_jsx(Body, {
+      text: spec.body,
+      theme: theme
+    }), current ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: deck.progressRow,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          style: [deck.progressText, {
+            color: theme.secondaryColor
+          }],
+          children: [index + 1, " / ", cards.length]
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: [deck.progressText, {
+            color: theme.accent
+          }],
+          children: [kept, " kept"]
+        })]
+      }), /*#__PURE__*/_jsxs(Animated.View, {
+        ...responder.panHandlers,
+        style: [deck.card, {
+          backgroundColor: theme.couponBg,
+          borderColor: theme.couponBorder,
+          transform: [{
+            translateX: dragX
+          }, {
+            rotate
+          }]
+        }],
+        accessibilityLabel: `${current.title}. Swipe right to keep or left to skip`,
+        children: [current.image ? /*#__PURE__*/_jsx(Image, {
+          source: {
+            uri: current.image
+          },
+          style: [deck.image, mediaHeight === undefined ? null : {
+            height: mediaHeight
+          }],
+          resizeMode: "cover"
+        }) : null, /*#__PURE__*/_jsx(Text, {
+          style: [deck.title, {
+            color: theme.titleColor
+          }],
+          children: current.title
+        }), current.body ? /*#__PURE__*/_jsx(Text, {
+          style: [deck.body, {
+            color: theme.bodyColor
+          }],
+          children: current.body
+        }) : null]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: deck.actions,
+        children: [/*#__PURE__*/_jsx(SecondaryBtn, {
+          label: skipLabel,
+          onPress: () => decide("skip"),
+          color: theme.secondaryColor
+        }), /*#__PURE__*/_jsx(PrimaryBtn, {
+          label: keepLabel,
+          onPress: () => decide("keep"),
+          accent: theme.accent
+        })]
+      })]
+    }) : /*#__PURE__*/_jsxs(View, {
+      style: [deck.complete, {
+        backgroundColor: theme.couponBg
+      }],
+      accessibilityLiveRegion: "polite",
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [deck.completeTitle, {
+          color: theme.titleColor
+        }],
+        children: cards.length === 0 ? "Deck unavailable" : str(e.finalLabel) || "Deck complete"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [deck.completeBody, {
+          color: theme.bodyColor
+        }],
+        children: cards.length === 0 ? "No cards were authored for this deck." : `You kept ${kept} of ${cards.length}`
+      })]
+    }), !current ? /*#__PURE__*/_jsx(CtaArea, {
+      ...props
+    }) : null]
+  });
+}
+const deck = {
+  progressRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: 10
+  },
+  progressText: {
+    fontSize: 11,
+    fontWeight: "700"
+  },
+  card: {
+    minHeight: 220,
+    borderWidth: 1.5,
+    borderRadius: 18,
+    padding: 16,
+    marginVertical: 12,
+    overflow: "hidden"
+  },
+  image: {
+    width: "100%",
+    height: 132,
+    borderRadius: 12,
+    marginBottom: 12
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "800",
+    textAlign: "center"
+  },
+  body: {
+    fontSize: 13,
+    lineHeight: 18,
+    textAlign: "center",
+    marginTop: 5
+  },
+  actions: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12,
+    alignItems: "center"
+  },
+  complete: {
+    borderRadius: 16,
+    padding: 22,
+    marginTop: 14,
+    alignItems: "center"
+  },
+  completeTitle: {
+    fontSize: 18,
+    fontWeight: "800"
+  },
+  completeBody: {
+    fontSize: 13,
+    marginTop: 5
+  }
+};
+
+// ─── 3. Scratch Card ──────────────────────────────────────────────────────────
+
+const SCRATCH_COLUMNS = 6;
+const SCRATCH_ROWS = 4;
+const SCRATCH_CELLS = SCRATCH_COLUMNS * SCRATCH_ROWS;
+const SCRATCH_REVEAL_AT = 0.55;
+export function ScratchCardInApp(props) {
+  const {
+    spec,
+    theme
+  } = props;
+  const e = ext(props);
+  const mystery = variantOf(props) === "mystery_box";
+  const [opened, setOpened] = useState(false);
+  const [scratched, setScratched] = useState([]);
+  const scratchBounds = useRef({
+    width: 0,
+    height: 0
+  });
+  const reportedProgress = useRef(0);
+  const outcomeShown = useRef(false);
+  const boxMotion = useRef(new Animated.Value(0)).current;
+  const reducedMotion = useReducedMotion();
+  const [gameOutcome, setGameOutcome] = useState(null);
+  const [gameLoading, setGameLoading] = useState(false);
+  const [gameError, setGameError] = useState("");
+  const prize = gameResultLabel(gameOutcome) || "Reward revealed";
+  const ctaIsPlay = /scratch|reveal|open/i.test(spec.cta?.label ?? "");
+  const claimCta = spec.cta && !ctaIsPlay ? spec.cta : undefined;
+  const rewardTitle = str(e.rewardTitle) || (mystery ? "Surprise!" : "You won!");
+  const closed = str(e.closedMessage) || str(e.revealLabel) || (mystery ? "Tap the box to open it" : "Scratch to reveal your prize");
+  const progress = scratchProgress(scratched, SCRATCH_CELLS);
+  const revealed = mystery ? opened : progress >= SCRATCH_REVEAL_AT;
+  useEffect(() => () => boxMotion.stopAnimation(), [boxMotion]);
+  useEffect(() => {
+    if (!revealed || !gameOutcome || outcomeShown.current || !props.onOutcome) {
+      return;
+    }
+    props.onOutcome({
+      resultLabel: prize,
+      fallback: inAppOutcomeTerminalForCta(props.spec.cta)
+    });
+    outcomeShown.current = true;
+  }, [gameOutcome, prize, props.onOutcome, props.spec.cta, revealed]);
+  const resolveReward = async () => {
+    if (gameOutcome) return gameOutcome;
+    if (gameLoading) return null;
+    setGameLoading(true);
+    setGameError("");
+    props.onInteraction?.({
+      mechanic: mystery ? "mystery_box" : "scratch_card",
+      phase: "started",
+      attempt: 1
+    });
+    try {
+      const outcome = await requireGameOutcome(props);
+      setGameOutcome(outcome);
+      return outcome;
+    } catch (error) {
+      setGameError(gameUnavailableText(error));
+      return null;
+    } finally {
+      setGameLoading(false);
+    }
+  };
+  const scratchResponder = useMemo(() => {
+    const mark = event => {
+      if (!gameOutcome) return;
+      const {
+        locationX,
+        locationY
+      } = event.nativeEvent;
+      const {
+        width,
+        height
+      } = scratchBounds.current;
+      const cell = scratchCellAt(locationX, locationY, width, height, SCRATCH_COLUMNS, SCRATCH_ROWS);
+      setScratched(current => {
+        const next = addScratchedCell(current, cell);
+        const nextProgress = scratchProgress(next, SCRATCH_CELLS);
+        const reportAt = nextProgress >= SCRATCH_REVEAL_AT ? 1 : Math.min(0.5, Math.floor(nextProgress * 4) / 4);
+        if (reportAt > reportedProgress.current) {
+          reportedProgress.current = reportAt;
+          props.onInteraction?.({
+            mechanic: "scratch",
+            phase: nextProgress >= SCRATCH_REVEAL_AT ? "resolved" : "progress",
+            progress: nextProgress,
+            result: nextProgress >= SCRATCH_REVEAL_AT ? prize : undefined
+          });
+        }
+        return next;
+      });
+    };
+    return PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: mark,
+      onPanResponderMove: mark
+    });
+  }, [gameOutcome, prize, props.onInteraction, props.onOutcome, props.spec.cta]);
+  const revealScratchAccessibly = () => {
+    if (!gameOutcome) {
+      void resolveReward();
+      return;
+    }
+    setScratched(Array.from({
+      length: SCRATCH_CELLS
+    }, (_, index) => index));
+    props.onInteraction?.({
+      mechanic: "scratch",
+      phase: "resolved",
+      progress: 1,
+      result: prize
+    });
+  };
+  const openMystery = async () => {
+    if (opened) return;
+    const outcome = await resolveReward();
+    if (!outcome) return;
+    const duration = reducedMotion === false ? 90 : 0;
+    Animated.sequence([Animated.timing(boxMotion, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true
+    }), Animated.timing(boxMotion, {
+      toValue: -1,
+      duration,
+      useNativeDriver: true
+    }), Animated.timing(boxMotion, {
+      toValue: 0,
+      duration,
+      useNativeDriver: true
+    })]).start(({
+      finished
+    }) => {
+      if (!finished) return;
+      setOpened(true);
+      props.onInteraction?.({
+        mechanic: "mystery_box",
+        phase: "resolved",
+        result: gameResultLabel(outcome) || "Reward revealed"
+      });
+      AccessibilityInfo.announceForAccessibility(`${rewardTitle} ${gameResultLabel(outcome) || "Reward revealed"}`);
+    });
+  };
+  const boxRotate = boxMotion.interpolate({
+    inputRange: [-1, 0, 1],
+    outputRange: ["-7deg", "0deg", "7deg"]
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: sh.content,
+    children: [/*#__PURE__*/_jsx(Title, {
+      text: spec.title,
+      theme: theme
+    }), /*#__PURE__*/_jsx(Body, {
+      text: spec.body,
+      theme: theme
+    }), mystery ? /*#__PURE__*/_jsxs(Pressable, {
+      style: [sc.boxStage, {
+        backgroundColor: theme.couponBg
+      }],
+      onPress: () => {
+        void openMystery();
+      },
+      disabled: opened || gameLoading,
+      accessibilityRole: "button",
+      accessibilityLabel: opened ? `${rewardTitle}: ${prize}` : closed,
+      children: [/*#__PURE__*/_jsxs(Animated.View, {
+        style: [sc.box, {
+          transform: [{
+            rotate: boxRotate
+          }]
+        }],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [sc.boxLid, {
+            backgroundColor: theme.accent
+          }, opened ? sc.boxLidOpen : null]
+        }), /*#__PURE__*/_jsx(View, {
+          style: [sc.boxBody, {
+            backgroundColor: theme.accent
+          }],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: sc.boxEmoji,
+            children: opened ? "✨" : "🎁"
+          })
+        })]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [sc.rewardTitle, {
+          color: theme.titleColor
+        }],
+        children: opened ? rewardTitle : gameLoading ? "Checking your result…" : gameError ? "Try opening again" : closed
+      }), opened ? /*#__PURE__*/_jsx(Text, {
+        style: [sc.prize, {
+          color: theme.accent
+        }],
+        children: prize
+      }) : null]
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: [sc.scratch, {
+          borderColor: theme.accent,
+          backgroundColor: theme.couponBg
+        }],
+        children: [/*#__PURE__*/_jsxs(View, {
+          accessibilityElementsHidden: !revealed,
+          importantForAccessibility: revealed ? "auto" : "no-hide-descendants",
+          style: sc.rewardCopy,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [sc.rewardTitle, {
+              color: theme.titleColor
+            }],
+            children: rewardTitle
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [sc.prize, {
+              color: theme.accent
+            }],
+            children: prize
+          }), !revealed ? /*#__PURE__*/_jsx(Text, {
+            style: sc.scratchHintMeasure,
+            children: closed
+          }) : null]
+        }), !revealed ? /*#__PURE__*/_jsxs(View, {
+          style: sc.cover,
+          onLayout: event => {
+            scratchBounds.current = event.nativeEvent.layout;
+          },
+          ...(gameOutcome ? scratchResponder.panHandlers : {}),
+          accessibilityRole: "button",
+          accessibilityLabel: `${closed}. ${Math.round(progress * 100)} percent revealed`,
+          accessibilityActions: [{
+            name: "activate",
+            label: "Reveal reward"
+          }],
+          onAccessibilityAction: revealScratchAccessibly,
+          children: [Array.from({
+            length: SCRATCH_CELLS
+          }, (_, index) => /*#__PURE__*/_jsx(View, {
+            pointerEvents: "none",
+            style: [sc.coverCell, {
+              width: `${100 / SCRATCH_COLUMNS}%`
+            }, scratched.includes(index) ? sc.coverCellCleared : null]
+          }, index)), /*#__PURE__*/_jsx(View, {
+            pointerEvents: "none",
+            style: sc.scratchHintWrap,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: sc.scratchHint,
+              children: closed
+            })
+          })]
+        }) : null]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [sc.progressTrack, {
+          backgroundColor: theme.couponBg
+        }],
+        children: /*#__PURE__*/_jsx(View, {
+          style: [sc.progressFill, {
+            width: `${progress * 100}%`,
+            backgroundColor: theme.accent
+          }]
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [sc.progressLabel, {
+          color: theme.secondaryColor
+        }],
+        children: revealed ? "Reward revealed" : `${Math.round(progress * 100)}% scratched`
+      })]
+    }), revealed ? /*#__PURE__*/_jsx(PrimaryBtn, {
+      label: str(e.claimLabel) || claimCta?.label || "DONE",
+      accent: theme.accent,
+      onPress: () => {
+        props.onInteraction?.({
+          mechanic: mystery ? "mystery_box" : "scratch",
+          phase: "claimed",
+          result: prize
+        });
+        if (claimCta?.action === "dismiss") props.onDismiss();else if (claimCta) props.onCta(claimCta);else props.onDismiss();
+      }
+    }) : null, !mystery && !gameOutcome ? /*#__PURE__*/_jsx(PrimaryBtn, {
+      label: gameLoading ? "CHECKING…" : gameError ? "RETRY" : str(e.startLabel) || "START",
+      accent: theme.accent,
+      onPress: () => {
+        void resolveReward();
+      },
+      disabled: gameLoading
+    }) : null, gameError ? /*#__PURE__*/_jsx(Text, {
+      style: [sc.legal, {
+        color: theme.secondaryColor
+      }],
+      children: gameError
+    }) : null, str(e.legalText) ? /*#__PURE__*/_jsx(Text, {
+      style: [sc.legal, {
+        color: theme.secondaryColor
+      }],
+      children: str(e.legalText)
+    }) : null]
+  });
+}
+const sc = {
+  scratch: {
+    marginVertical: 14,
+    borderRadius: 14,
+    borderWidth: 2,
+    borderStyle: "dashed",
+    minHeight: 132,
+    justifyContent: "center",
+    alignItems: "center",
+    overflow: "hidden",
+    position: "relative"
+  },
+  prize: {
+    fontSize: 28,
+    fontWeight: "900",
+    letterSpacing: 1,
+    textAlign: "center"
+  },
+  rewardCopy: {
+    alignItems: "center",
+    alignSelf: "stretch",
+    justifyContent: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 24
+  },
+  rewardTitle: {
+    fontSize: 13,
+    fontWeight: "800",
+    marginBottom: 6,
+    textAlign: "center"
+  },
+  cover: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignContent: "stretch",
+    backgroundColor: "#858B96"
+  },
+  coverCell: {
+    height: `${100 / SCRATCH_ROWS}%`,
+    backgroundColor: "#9299A5",
+    borderWidth: 0.5,
+    borderColor: "rgba(255,255,255,0.18)"
+  },
+  coverCellCleared: {
+    opacity: 0
+  },
+  scratchHintWrap: {
+    position: "absolute",
+    alignItems: "center",
+    bottom: 0,
+    justifyContent: "center",
+    left: 16,
+    right: 16,
+    top: 0
+  },
+  scratchHint: {
+    fontSize: 13,
+    color: "#fff",
+    fontWeight: "600",
+    textAlign: "center"
+  },
+  scratchHintMeasure: {
+    fontSize: 13,
+    fontWeight: "600",
+    marginTop: 8,
+    opacity: 0,
+    textAlign: "center"
+  },
+  progressTrack: {
+    height: 7,
+    borderRadius: 4,
+    overflow: "hidden"
+  },
+  progressFill: {
+    height: "100%",
+    borderRadius: 4
+  },
+  progressLabel: {
+    fontSize: 11,
+    textAlign: "center",
+    marginTop: 5
+  },
+  boxStage: {
+    borderRadius: 16,
+    minHeight: 190,
+    marginVertical: 14,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 16
+  },
+  box: {
+    width: 94,
+    height: 94,
+    alignItems: "center",
+    justifyContent: "flex-end"
+  },
+  boxLid: {
+    width: 98,
+    height: 22,
+    borderRadius: 6,
+    marginBottom: -4,
+    zIndex: 1
+  },
+  boxLidOpen: {
+    transform: [{
+      translateY: -12
+    }, {
+      rotate: "-10deg"
+    }]
+  },
+  boxBody: {
+    width: 82,
+    height: 70,
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  boxEmoji: {
+    fontSize: 36
+  },
+  legal: {
+    fontSize: 10,
+    lineHeight: 14,
+    marginTop: 10,
+    textAlign: "center"
+  }
+};
+
+// ─── 4. Slot Reward ───────────────────────────────────────────────────────────
+
+const DEFAULT_REELS = [["🍒", "⭐", "💎", "🍋", "🎰"], ["⭐", "🍒", "🍋", "💎", "🎰"], ["💎", "🍋", "🍒", "⭐", "🎰"]];
+export function SlotRewardInApp(props) {
+  const {
+    spec,
+    theme
+  } = props;
+  const e = ext(props);
+  const configuredReels = arr(e.reels).map(reel => arr(record(reel).symbols ?? reel).map(labelOf).filter(Boolean)).filter(reel => reel.length > 0);
+  const slotItems = arr(e.slotItems).map(item => {
+    const value = record(item);
+    return str(value.emoji ?? value.symbol ?? value.label ?? item);
+  }).filter(Boolean);
+  const reels = configuredReels.length > 0 ? configuredReels : slotItems.length > 0 ? [slotItems, slotItems, slotItems] : DEFAULT_REELS;
+  const boundedReels = reels.slice(0, 3).map(reel => reel.slice(0, 12));
+  const [phase, setPhase] = useState("idle");
+  const [results, setResults] = useState([]);
+  const [gameOutcome, setGameOutcome] = useState(null);
+  const [gameError, setGameError] = useState("");
+  const [frame, setFrame] = useState(0);
+  const [attemptsUsed, setAttemptsUsed] = useState(0);
+  const reducedMotion = useReducedMotion();
+  const resultMessage = gameResultLabel(gameOutcome);
+  // One UI attempt maps to one idempotent backend attempt. Retry reuses its id.
+  const maxAttempts = 1;
+  const spinTimerRef = useRef(null);
+  const animsRef = useRef([]);
+  while (animsRef.current.length < boundedReels.length) animsRef.current.push(new Animated.Value(0));
+  const anims = animsRef.current.slice(0, boundedReels.length);
+  useEffect(() => () => {
+    if (spinTimerRef.current) clearInterval(spinTimerRef.current);
+    animsRef.current.forEach(animation => animation.stopAnimation());
+  }, []);
+  const pull = async () => {
+    if (phase === "resolving" || phase === "spinning" || attemptsUsed >= maxAttempts) return;
+    const attempt = attemptsUsed + 1;
+    setGameError("");
+    setPhase("resolving");
+    setResults([]);
+    props.onInteraction?.({
+      mechanic: "slot_reward",
+      phase: "started",
+      attempt
+    });
+    let remoteOutcome;
+    try {
+      remoteOutcome = await requireGameOutcome(props, attempt);
+    } catch (error) {
+      setGameError(gameUnavailableText(error));
+      setPhase("idle");
+      return;
+    }
+    const outcome = resolveSlotOutcome(boundedReels, remoteOutcome.symbols ?? []);
+    if (!outcome.authored) {
+      setGameError("The backend symbols do not match the configured reels.");
+      setPhase("idle");
+      return;
+    }
+    setAttemptsUsed(attempt);
+    setGameOutcome(remoteOutcome);
+    const remoteResultMessage = gameResultLabel(remoteOutcome);
+    setPhase("spinning");
+    if (reducedMotion === false) {
+      spinTimerRef.current = setInterval(() => setFrame(value => value + 1), 85);
+    }
+    Animated.stagger(reducedMotion === false ? 150 : 0, anims.map((a, i) => Animated.sequence([Animated.timing(a, {
+      toValue: 1,
+      duration: reducedMotion === false ? 600 + i * 100 : 0,
+      easing: Easing.out(Easing.back(2)),
+      useNativeDriver: true
+    }), Animated.timing(a, {
+      toValue: 0,
+      duration: 0,
+      useNativeDriver: true
+    })]))).start(({
+      finished
+    }) => {
+      if (!finished) return;
+      if (spinTimerRef.current) clearInterval(spinTimerRef.current);
+      spinTimerRef.current = null;
+      setResults(outcome.symbols);
+      setPhase("result");
+      props.onInteraction?.({
+        mechanic: "slot_reward",
+        phase: "resolved",
+        attempt,
+        result: remoteResultMessage || undefined,
+        meta: {
+          backendResolved: true
+        }
+      });
+      AccessibilityInfo.announceForAccessibility(remoteResultMessage || "Spin complete");
+      presentTerminalOutcome(props, remoteResultMessage);
+    });
+  };
+  const playLabel = str(e.ctaLabel) || spec.cta?.label || "PULL";
+  const ctaIsPlay = /spin|pull/i.test(spec.cta?.label ?? "");
+  const finish = () => {
+    props.onInteraction?.({
+      mechanic: "slot_reward",
+      phase: "completed",
+      attempt: attemptsUsed,
+      result: resultMessage || undefined
+    });
+    if (spec.cta && !ctaIsPlay && spec.cta.action !== "dismiss") props.onCta(spec.cta);else props.onDismiss();
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: sh.content,
+    children: [/*#__PURE__*/_jsx(Title, {
+      text: spec.title,
+      theme: theme
+    }), /*#__PURE__*/_jsx(Body, {
+      text: spec.body,
+      theme: theme
+    }), /*#__PURE__*/_jsx(View, {
+      style: sl.machine,
+      children: boundedReels.map((reel, i) => {
+        const displayEmoji = results[i] ?? reel[(frame + i) % reel.length] ?? "★";
+        const scale = anims[i].interpolate({
+          inputRange: [0, 0.5, 1],
+          outputRange: [1, 1.4, 1]
+        });
+        const translateY = anims[i].interpolate({
+          inputRange: [0, 0.5, 1],
+          outputRange: [0, -18, 0]
+        });
+        return /*#__PURE__*/_jsx(View, {
+          style: [sl.reel, {
+            borderColor: theme.accent + "55",
+            backgroundColor: theme.couponBg
+          }],
+          children: /*#__PURE__*/_jsx(Animated.Text, {
+            style: [sl.reelEmoji, {
+              transform: [{
+                scale
+              }, {
+                translateY
+              }]
+            }],
+            children: displayEmoji
+          })
+        }, i);
+      })
+    }), /*#__PURE__*/_jsxs(Text, {
+      style: [sl.attempts, {
+        color: theme.secondaryColor
+      }],
+      children: ["Attempt ", Math.min(attemptsUsed + (phase === "idle" ? 1 : 0), maxAttempts), " of ", maxAttempts]
+    }), phase === "result" ? /*#__PURE__*/_jsx(View, {
+      style: [sl.win, {
+        backgroundColor: resultMessage ? theme.accent : theme.couponBg
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [sl.winText, !resultMessage && {
+          color: theme.titleColor
+        }],
+        children: resultMessage || "Spin complete"
+      })
+    }) : null, phase === "idle" && gameError ? /*#__PURE__*/_jsx(Text, {
+      style: [sl.unavailable, {
+        color: theme.secondaryColor
+      }],
+      children: gameError
+    }) : null, phase === "result" ? /*#__PURE__*/_jsx(PrimaryBtn, {
+      label: ctaIsPlay ? "DONE" : spec.cta?.label || "DONE",
+      accent: theme.accent,
+      onPress: finish
+    }) : /*#__PURE__*/_jsx(PrimaryBtn, {
+      label: phase === "resolving" ? "CHECKING…" : phase === "spinning" ? "SPINNING…" : gameError ? "RETRY" : playLabel,
+      accent: theme.accent,
+      onPress: () => {
+        void pull();
+      },
+      disabled: phase === "resolving" || phase === "spinning"
+    })]
+  });
+}
+const sl = {
+  machine: {
+    alignSelf: "center",
+    flexDirection: "row",
+    gap: 10,
+    justifyContent: "center",
+    maxWidth: 230,
+    marginVertical: 16,
+    width: "100%"
+  },
+  reel: {
+    flex: 1,
+    height: 80,
+    maxWidth: 70,
+    minWidth: 0,
+    borderRadius: 12,
+    borderWidth: 1.5,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  reelEmoji: {
+    fontSize: 36
+  },
+  win: {
+    borderRadius: 10,
+    paddingVertical: 8,
+    paddingHorizontal: 14,
+    alignSelf: "center",
+    marginBottom: 10
+  },
+  winText: {
+    color: "#fff",
+    fontWeight: "800",
+    fontSize: 15
+  },
+  attempts: {
+    fontSize: 11,
+    fontWeight: "600",
+    textAlign: "center",
+    marginBottom: 8
+  },
+  unavailable: {
+    fontSize: 11,
+    lineHeight: 15,
+    textAlign: "center",
+    marginBottom: 8
+  }
+};
+
+// ─── 5. Poll Card ─────────────────────────────────────────────────────────────
+
+export function PollCardInApp(props) {
+  const {
+    spec,
+    theme
+  } = props;
+  const e = ext(props);
+  const variantKey = variantOf(props);
+  const chipMode = variantKey === "preferences_picker" || variantKey === "product_finder";
+  const quizMode = variantKey === "quiz_card";
+  const questions = arr(e.questions).slice(0, 20);
+  const [questionIndex, setQuestionIndex] = useState(0);
+  const [answerPath, setAnswerPath] = useState([]);
+  const questionSpec = record(questions[questionIndex]);
+  const question = str(questionSpec.prompt ?? questionSpec.question ?? questionSpec.title) || str(e.question ?? e.promptText) || spec.title || "What do you think?";
+  const categoryOptions = [];
+  for (const category of arr(e.categories).slice(0, 20)) {
+    const value = record(category);
+    categoryOptions.push(...arr(value.options ?? value.items ?? value.choices).slice(0, 20));
+    if (categoryOptions.length >= 20) break;
+  }
+  const optionSources = [questionSpec.choices, questionSpec.options, questionSpec.answers, e.options, e.answers, e.preferenceOptions, e.productList, e.itemList, categoryOptions];
+  const rawOptions = arr(optionSources.find(value => Array.isArray(value) && value.length > 0) ?? []).slice(0, 20);
+  const scaleMax = boundedInt(questionSpec.scaleMax, 5, 2, 10);
+  const options = rawOptions.length > 0 ? rawOptions.map((option, index) => labelOf(option) || `Option ${index + 1}`) : questionSpec.kind === "scale" ? Array.from({
+    length: scaleMax
+  }, (_, i) => String(i + 1)) : [];
+  const showResults = e.showResults === true;
+  const [selected, setSelected] = useState([]);
+  const [answerLocked, setAnswerLocked] = useState(false);
+  const [score, setScore] = useState(0);
+  const [gradedCount, setGradedCount] = useState(0);
+  const [quizAnswers, setQuizAnswers] = useState([]);
+  const [quizOutcome, setQuizOutcome] = useState(null);
+  const [quizLoading, setQuizLoading] = useState(false);
+  const [quizError, setQuizError] = useState("");
+  const quizSubmission = useRef(null);
+  const allowMultiple = questionSpec.kind === "multi" || e.allowMultiple === true || quizMode && Array.isArray(questionSpec.correctAnswer ?? e.correctAnswer) || variantKey === "preferences_picker" && e.multiSelect !== false;
+  const hasNext = questionIndex + 1 < questions.length;
+  const answered = selected.length > 0;
+  const correctAnswer = questionSpec.correctAnswer ?? e.correctAnswer;
+  const correctIndexes = (Array.isArray(correctAnswer) ? correctAnswer : [correctAnswer]).map(answer => typeof answer === "number" ? Math.floor(answer) : options.findIndex(option => option === labelOf(answer))).filter(index => index >= 0 && index < options.length);
+  const quizGraded = quizMode && correctIndexes.length > 0;
+  const quizCorrect = quizGraded && gradeGameAnswer(selected, correctIndexes);
+  const explanation = firstText(questionSpec, ["explanation"]) || str(e.explanation);
+  const selectedLabel = options[selected[0] ?? -1] ?? "";
+  const resultMapping = record(e.resultMapping);
+  const currentAnswerPath = [...answerPath, selectedLabel].filter(Boolean);
+  const mappedValue = resultMapping[currentAnswerPath.join(" > ")] ?? resultMapping[currentAnswerPath.join("|")] ?? resultMapping[selectedLabel] ?? arr(e.productList ?? props.spec.assets?.products)[selected[0] ?? -1];
+  const mappedRecord = record(mappedValue);
+  const mappedResult = labelOf(mappedValue);
+  const mappedBody = firstText(mappedRecord, ["description", "body", "reason", "message"]);
+  const mappedPrice = firstText(mappedRecord, ["price", "value", "discount"]);
+  const mappedImage = mediaUri(mappedRecord.image ?? mappedRecord.imageUrl ?? mappedRecord.thumbnail);
+  const toggle = index => {
+    if (quizMode && answerLocked) return;
+    const next = toggleGameSelection(selected, index, allowMultiple);
+    setSelected(next);
+    if (!quizMode) {
+      const labels = next.map(value => options[value]).filter(Boolean);
+      props.onInteraction?.({
+        mechanic: variantKey || "question_flow",
+        phase: "decision",
+        value: labels[0],
+        meta: {
+          questionIndex,
+          selected: next,
+          labels
+        }
+      });
+    }
+  };
+  const submitQuiz = async input => {
+    setQuizLoading(true);
+    setQuizError("");
+    quizSubmission.current = input;
+    try {
+      const outcome = await requireGameOutcome(props, 1, input);
+      setQuizOutcome(outcome);
+      props.onInteraction?.({
+        mechanic: "quiz_card",
+        phase: "completed",
+        result: gameResultLabel(outcome) || outcome.id,
+        meta: {
+          backendResolved: true
+        }
+      });
+    } catch (error) {
+      setQuizError(gameUnavailableText(error));
+    } finally {
+      setQuizLoading(false);
+    }
+  };
+  const checkQuizAnswer = () => {
+    if (!answered || answerLocked) return;
+    setAnswerLocked(true);
+    const nextGradedCount = gradedCount + (quizGraded ? 1 : 0);
+    const nextScore = scoreGameAnswer(score, quizCorrect, answerLocked, quizTotal);
+    const nextAnswers = [...quizAnswers, [...selected]];
+    if (quizGraded) setGradedCount(nextGradedCount);
+    setScore(nextScore);
+    setQuizAnswers(nextAnswers);
+    props.onInteraction?.({
+      mechanic: "quiz_card",
+      phase: "resolved",
+      progress: Math.min(1, (questionIndex + 1) / Math.max(1, questions.length)),
+      value: quizGraded ? quizCorrect : undefined,
+      meta: {
+        questionIndex,
+        selected
+      }
+    });
+    if (!hasNext) {
+      void submitQuiz({
+        answers: nextAnswers,
+        score: nextScore,
+        gradedQuestions: nextGradedCount,
+        totalQuestions: quizTotal
+      });
+    }
+  };
+  const advanceQuiz = () => {
+    setQuestionIndex(current => current + 1);
+    setSelected([]);
+    setAnswerLocked(false);
+  };
+  const quizTotal = Math.max(1, questions.length);
+  const reward = gameResultLabel(quizOutcome);
+  return /*#__PURE__*/_jsxs(View, {
+    style: sh.content,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: [sh.title, {
+        color: theme.titleColor
+      }],
+      children: question
+    }), /*#__PURE__*/_jsx(Body, {
+      text: spec.body,
+      theme: theme
+    }), quizMode ? /*#__PURE__*/_jsx(View, {
+      style: po.quizProgress,
+      children: Array.from({
+        length: quizTotal
+      }, (_, index) => /*#__PURE__*/_jsx(View, {
+        style: [po.quizStep, {
+          backgroundColor: index <= questionIndex ? theme.accent : theme.couponBg
+        }]
+      }, index))
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: [po.options, chipMode && po.chips],
+      children: options.map((opt, i) => {
+        const active = selected.includes(i);
+        const correct = quizMode && answerLocked && correctIndexes.includes(i);
+        const wrong = quizMode && answerLocked && active && !correct;
+        const configuredPercent = num(record(rawOptions[i]).percent, -1);
+        return /*#__PURE__*/_jsxs(Pressable, {
+          style: [chipMode ? po.chip : po.option, {
+            borderColor: correct ? "#22A06B" : wrong ? "#D92D20" : active ? theme.accent : "#E4E7EC",
+            backgroundColor: correct || active ? theme.couponBg : "#FAFAFA"
+          }],
+          onPress: () => toggle(i),
+          disabled: quizMode && answerLocked,
+          accessibilityRole: allowMultiple ? "checkbox" : "radio",
+          accessibilityState: allowMultiple ? {
+            checked: active
+          } : {
+            selected: active
+          },
+          accessibilityLabel: opt,
+          children: [!chipMode ? /*#__PURE__*/_jsx(View, {
+            style: [po.radio, {
+              borderColor: correct ? "#22A06B" : wrong ? "#D92D20" : active ? theme.accent : "#9CA3AF",
+              backgroundColor: correct ? "#22A06B" : wrong ? "#D92D20" : active ? theme.accent : "transparent"
+            }]
+          }) : null, /*#__PURE__*/_jsx(Text, {
+            style: [chipMode ? po.chipLabel : po.optLabel, {
+              color: active ? theme.accent : theme.titleColor
+            }],
+            children: opt
+          }), showResults && answered && configuredPercent >= 0 ? /*#__PURE__*/_jsxs(Text, {
+            style: [po.pct, {
+              color: theme.secondaryColor
+            }],
+            children: [configuredPercent, "%"]
+          }) : null]
+        }, i);
+      })
+    }), quizMode && answerLocked && correctIndexes.length > 0 ? /*#__PURE__*/_jsxs(View, {
+      style: [po.result, {
+        backgroundColor: theme.couponBg
+      }],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [po.resultTitle, {
+          color: theme.titleColor
+        }],
+        children: quizCorrect ? "Correct" : "Not quite"
+      }), explanation ? /*#__PURE__*/_jsx(Text, {
+        style: [po.resultBody, {
+          color: theme.bodyColor
+        }],
+        children: explanation
+      }) : null]
+    }) : null, quizMode && answerLocked && !quizGraded ? /*#__PURE__*/_jsx(View, {
+      style: [po.result, {
+        backgroundColor: theme.couponBg
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [po.resultTitle, {
+          color: theme.titleColor
+        }],
+        children: "Answer recorded"
+      })
+    }) : null, variantKey === "product_finder" && answered && !hasNext && mappedResult ? /*#__PURE__*/_jsxs(View, {
+      style: [po.finderResult, {
+        backgroundColor: theme.couponBg
+      }],
+      children: [mappedImage ? /*#__PURE__*/_jsx(Image, {
+        source: {
+          uri: mappedImage
+        },
+        resizeMode: "cover",
+        style: po.finderImage
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        style: po.finderCopy,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [po.resultTitle, {
+            color: theme.titleColor
+          }],
+          children: mappedResult
+        }), mappedBody ? /*#__PURE__*/_jsx(Text, {
+          style: [po.resultBody, {
+            color: theme.bodyColor
+          }],
+          children: mappedBody
+        }) : null, mappedPrice ? /*#__PURE__*/_jsx(Text, {
+          style: [po.finderPrice, {
+            color: theme.accent
+          }],
+          children: mappedPrice
+        }) : null]
+      })]
+    }) : null, quizMode && answered && !answerLocked ? /*#__PURE__*/_jsx(View, {
+      style: sh.ctaRow,
+      children: /*#__PURE__*/_jsx(PrimaryBtn, {
+        label: str(e.checkLabel) || "CHECK ANSWER",
+        accent: theme.accent,
+        onPress: checkQuizAnswer
+      })
+    }) : quizMode && answerLocked ? hasNext ? /*#__PURE__*/_jsx(View, {
+      style: sh.ctaRow,
+      children: /*#__PURE__*/_jsx(PrimaryBtn, {
+        label: str(e.nextLabel) || "Next",
+        accent: theme.accent,
+        onPress: advanceQuiz
+      })
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: [po.score, {
+          backgroundColor: theme.couponBg
+        }],
+        accessibilityLiveRegion: "polite",
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [po.scoreTitle, {
+            color: theme.titleColor
+          }],
+          children: gradedCount > 0 ? `Score ${score} / ${gradedCount}` : "Responses recorded"
+        }), quizLoading ? /*#__PURE__*/_jsx(Text, {
+          style: [po.scoreReward, {
+            color: theme.bodyColor
+          }],
+          children: "Confirming your result\u2026"
+        }) : null, quizError ? /*#__PURE__*/_jsx(Text, {
+          style: [po.scoreReward, {
+            color: theme.bodyColor
+          }],
+          children: quizError
+        }) : null, reward ? /*#__PURE__*/_jsx(Text, {
+          style: [po.scoreReward, {
+            color: theme.accent
+          }],
+          children: reward
+        }) : null]
+      }), quizError && !quizLoading ? /*#__PURE__*/_jsx(PrimaryBtn, {
+        label: "RETRY",
+        accent: theme.accent,
+        onPress: () => {
+          if (quizSubmission.current) void submitQuiz(quizSubmission.current);
+        }
+      }) : quizOutcome && (spec.cta || spec.secondaryCta) ? /*#__PURE__*/_jsx(CtaArea, {
+        ...props
+      }) : quizOutcome ? /*#__PURE__*/_jsx(PrimaryBtn, {
+        label: "DONE",
+        accent: theme.accent,
+        onPress: () => {
+          if (!presentTerminalOutcome(props, reward)) props.onDismiss();
+        }
+      }) : null]
+    }) : answered ? hasNext ? /*#__PURE__*/_jsx(View, {
+      style: sh.ctaRow,
+      children: /*#__PURE__*/_jsx(PrimaryBtn, {
+        label: str(e.nextLabel) || "Next",
+        accent: theme.accent,
+        onPress: () => {
+          if (variantKey === "product_finder" && selectedLabel) {
+            setAnswerPath(current => [...current, selectedLabel]);
+          }
+          setQuestionIndex(current => current + 1);
+          setSelected([]);
+        }
+      })
+    }) : /*#__PURE__*/_jsx(CtaArea, {
+      ...props,
+      beforePrimary: () => props.onInteraction?.({
+        mechanic: variantKey || "question_flow",
+        phase: "resolved",
+        value: selectedLabel,
+        meta: {
+          questionIndex,
+          selected,
+          labels: selected.map(value => options[value]).filter(Boolean),
+          ...(variantKey === "product_finder" && mappedResult ? {
+            result: {
+              title: mappedResult,
+              body: mappedBody,
+              price: mappedPrice,
+              image: mappedImage
+            }
+          } : {})
+        }
+      })
+    }) : null]
+  });
+}
+const po = {
+  options: {
+    marginVertical: 8
+  },
+  chips: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8
+  },
+  option: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    borderWidth: 1.5,
+    borderRadius: 10,
+    padding: 10,
+    marginBottom: 8
+  },
+  chip: {
+    borderWidth: 1.5,
+    borderRadius: 999,
+    maxWidth: "100%",
+    paddingVertical: 9,
+    paddingHorizontal: 14
+  },
+  radio: {
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+    borderWidth: 2
+  },
+  optLabel: {
+    flex: 1,
+    fontSize: 13,
+    fontWeight: "500"
+  },
+  chipLabel: {
+    flexShrink: 1,
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  pct: {
+    fontSize: 12,
+    fontWeight: "600"
+  },
+  result: {
+    borderRadius: 10,
+    padding: 10,
+    marginTop: 4
+  },
+  resultTitle: {
+    fontSize: 13,
+    fontWeight: "800"
+  },
+  resultBody: {
+    fontSize: 12,
+    lineHeight: 17,
+    marginTop: 2
+  },
+  quizProgress: {
+    flexDirection: "row",
+    gap: 5,
+    marginVertical: 10
+  },
+  quizStep: {
+    flex: 1,
+    height: 5,
+    borderRadius: 3
+  },
+  score: {
+    borderRadius: 12,
+    padding: 14,
+    marginTop: 10,
+    alignItems: "center"
+  },
+  scoreTitle: {
+    fontSize: 18,
+    fontWeight: "900"
+  },
+  scoreReward: {
+    fontSize: 13,
+    fontWeight: "700",
+    marginTop: 4
+  },
+  finderResult: {
+    flexDirection: "row",
+    gap: 12,
+    borderRadius: 12,
+    padding: 12,
+    marginTop: 8,
+    alignItems: "center"
+  },
+  finderImage: {
+    width: 72,
+    height: 72,
+    borderRadius: 10
+  },
+  finderCopy: {
+    flex: 1
+  },
+  finderPrice: {
+    fontSize: 13,
+    fontWeight: "800",
+    marginTop: 4
+  }
+};
+
+// ─── 6. NPS Prompt ────────────────────────────────────────────────────────────
+
+export function NpsPromptInApp(props) {
+  const {
+    spec,
+    theme
+  } = props;
+  const e = ext(props);
+  const question = str(e.question) || spec.title || "How likely are you to recommend us?";
+  const scaleMax = boundedInt(e.scaleMax, 10, 1, 10);
+  const scaleLabels = arr(e.scaleLabels).map(str);
+  const [selected, setSelected] = useState(null);
+  const [feedback, setFeedback] = useState("");
+  const feedbackEnabled = e.feedbackArea === true || typeof e.feedbackArea === "string";
+  const emitNps = () => props.onInteraction?.({
+    mechanic: "nps_prompt",
+    phase: "resolved",
+    value: selected ?? undefined,
+    result: feedback.trim() || undefined,
+    meta: feedback.trim() ? {
+      feedback: feedback.trim()
+    } : undefined
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: sh.content,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: [sh.title, {
+        color: theme.titleColor
+      }],
+      children: question
+    }), /*#__PURE__*/_jsx(Body, {
+      text: spec.body,
+      theme: theme
+    }), /*#__PURE__*/_jsx(ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      style: {
+        marginVertical: 12
+      },
+      contentContainerStyle: nps.row,
+      children: Array.from({
+        length: scaleMax + 1
+      }, (_, i) => /*#__PURE__*/_jsx(Pressable, {
+        style: [nps.cell, {
+          borderColor: selected === i ? theme.accent : "#E4E7EC",
+          backgroundColor: selected === i ? theme.couponBg : "#FAFAFA"
+        }],
+        onPress: () => {
+          setSelected(i);
+          props.onInteraction?.({
+            mechanic: "nps_prompt",
+            phase: "decision",
+            value: i
+          });
+        },
+        accessibilityRole: "radio",
+        accessibilityLabel: String(i),
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [nps.num, {
+            color: selected === i ? theme.accent : theme.bodyColor
+          }],
+          children: i
+        })
+      }, i))
+    }), scaleLabels.length >= 2 ? /*#__PURE__*/_jsxs(View, {
+      style: nps.labels,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [nps.lbl, {
+          color: theme.secondaryColor
+        }],
+        children: scaleLabels[0]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [nps.lbl, nps.lblEnd, {
+          color: theme.secondaryColor
+        }],
+        children: scaleLabels[scaleLabels.length - 1]
+      })]
+    }) : null, selected !== null && feedbackEnabled ? /*#__PURE__*/_jsx(TextInput, {
+      value: feedback,
+      onChangeText: setFeedback,
+      multiline: true,
+      placeholder: typeof e.feedbackArea === "string" ? e.feedbackArea : "Tell us more (optional)",
+      placeholderTextColor: theme.secondaryColor,
+      accessibilityLabel: "Additional NPS feedback",
+      style: [nps.feedback, {
+        color: theme.titleColor,
+        borderColor: theme.couponBorder
+      }]
+    }) : null, selected !== null ? props.spec.cta || props.spec.secondaryCta ? /*#__PURE__*/_jsx(CtaArea, {
+      ...props,
+      beforePrimary: emitNps
+    }) : /*#__PURE__*/_jsx(PrimaryBtn, {
+      label: "SUBMIT",
+      accent: theme.accent,
+      onPress: () => {
+        emitNps();
+        if (!presentTerminalOutcome(props)) props.onDismiss();
+      }
+    }) : null]
+  });
+}
+const nps = {
+  row: {
+    flexDirection: "row",
+    gap: 6,
+    paddingHorizontal: 2
+  },
+  cell: {
+    minHeight: 44,
+    minWidth: 44,
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    borderRadius: 8,
+    borderWidth: 1.5,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  num: {
+    fontSize: 13,
+    fontWeight: "700"
+  },
+  labels: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: 2
+  },
+  lbl: {
+    flex: 1,
+    fontSize: 10,
+    fontWeight: "500"
+  },
+  lblEnd: {
+    textAlign: "right"
+  },
+  feedback: {
+    minHeight: 76,
+    borderWidth: 1,
+    borderRadius: 10,
+    padding: 10,
+    marginTop: 10,
+    fontSize: 13
+  }
+};
+
+// ─── 7. Emoji Reaction Bar ────────────────────────────────────────────────────
+
+export function EmojiReactionBarInApp(props) {
+  const {
+    spec,
+    theme
+  } = props;
+  const e = ext(props);
+  const reactions = arr(e.reactions).map(str);
+  const emojis = reactions.length > 0 ? reactions : ["😍", "😊", "😐", "😕", "😡"];
+  const [selected, setSelected] = useState(null);
+  return /*#__PURE__*/_jsxs(View, {
+    style: sh.content,
+    children: [/*#__PURE__*/_jsx(Title, {
+      text: spec.title,
+      theme: theme
+    }), /*#__PURE__*/_jsx(Body, {
+      text: spec.body,
+      theme: theme
+    }), /*#__PURE__*/_jsx(View, {
+      style: er.row,
+      children: emojis.map((e, i) => /*#__PURE__*/_jsx(Pressable, {
+        style: [er.btn, selected === i && {
+          backgroundColor: theme.couponBg,
+          borderColor: theme.accent
+        }],
+        onPress: () => {
+          setSelected(i);
+          props.onInteraction?.({
+            mechanic: "emoji_reaction_bar",
+            phase: "decision",
+            value: e
+          });
+        },
+        accessibilityRole: "radio",
+        accessibilityLabel: e,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: er.emoji,
+          children: e
+        })
+      }, i))
+    }), selected !== null ? /*#__PURE__*/_jsx(CtaArea, {
+      ...props,
+      beforePrimary: () => props.onInteraction?.({
+        mechanic: "emoji_reaction_bar",
+        phase: "resolved",
+        value: emojis[selected]
+      })
+    }) : null]
+  });
+}
+const er = {
+  row: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    gap: 10,
+    marginVertical: 14
+  },
+  btn: {
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: 44,
+    minWidth: 44,
+    padding: 8,
+    borderRadius: 12,
+    borderWidth: 1.5,
+    borderColor: "transparent"
+  },
+  emoji: {
+    fontSize: 32
+  }
+};
+
+// ─── 8. Star Rating ───────────────────────────────────────────────────────────
+
+export function StarRatingInApp(props) {
+  const {
+    spec,
+    theme
+  } = props;
+  const e = ext(props);
+  const max = boundedInt(e.ratingScale, 5, 1, 10);
+  const [rating, setRating] = useState(0);
+  const threshold = boundedInt(e.storeReviewThreshold ?? e.ratingGate, 4, 1, Math.max(1, max));
+  const complete = async () => {
+    props.onInteraction?.({
+      mechanic: "rating_request",
+      phase: "resolved",
+      value: rating,
+      meta: {
+        threshold
+      }
+    });
+    if (rating >= threshold) {
+      const ran = await requestNativeStoreReview();
+      props.onInteraction?.({
+        mechanic: "rating_request",
+        phase: "completed",
+        value: rating,
+        meta: {
+          route: ran ? "store_review" : "fallback",
+          threshold
+        }
+      });
+      if (ran) {
+        if (presentTerminalOutcome(props)) return;
+        props.onDismiss();
+        return;
+      }
+    }
+    if (presentTerminalOutcome(props)) return;
+    if (!props.spec.cta || props.spec.cta.action === "dismiss") props.onDismiss();else props.onCta(props.spec.cta);
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: sh.content,
+    children: [/*#__PURE__*/_jsx(Title, {
+      text: spec.title,
+      theme: theme
+    }), /*#__PURE__*/_jsx(Body, {
+      text: spec.body,
+      theme: theme
+    }), /*#__PURE__*/_jsx(View, {
+      style: sr.row,
+      children: Array.from({
+        length: max
+      }, (_, i) => /*#__PURE__*/_jsx(Pressable, {
+        style: sr.btn,
+        onPress: () => {
+          setRating(i + 1);
+          props.onInteraction?.({
+            mechanic: "rating_request",
+            phase: "decision",
+            value: i + 1
+          });
+        },
+        accessibilityRole: "radio",
+        accessibilityLabel: `${i + 1} star`,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [sr.star, {
+            color: i < rating ? "#F59E0B" : "#D1D5DB"
+          }],
+          children: "\u2605"
+        })
+      }, i))
+    }), rating > 0 ? /*#__PURE__*/_jsxs(View, {
+      style: sh.ctaRow,
+      children: [props.spec.secondaryCta ? /*#__PURE__*/_jsx(SecondaryBtn, {
+        label: props.spec.secondaryCta.label,
+        onPress: props.onDismiss,
+        color: theme.secondaryColor
+      }) : null, /*#__PURE__*/_jsx(PrimaryBtn, {
+        label: props.spec.cta?.label || (rating >= threshold ? "RATE APP" : "CONTINUE"),
+        accent: theme.accent,
+        onPress: () => {
+          void complete();
+        }
+      })]
+    }) : null]
+  });
+}
+const sr = {
+  row: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    gap: 6,
+    marginVertical: 14
+  },
+  btn: {
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: 44,
+    minWidth: 44
+  },
+  star: {
+    fontSize: 38
+  }
+};
+
+// ─── 9. Streak Reward ─────────────────────────────────────────────────────────
+
+export function StreakRewardInApp(props) {
+  const {
+    spec,
+    theme
+  } = props;
+  const e = ext(props);
+  const daily = variantOf(props) === "daily_check_in";
+  const [gameOutcome, setGameOutcome] = useState(null);
+  const [gameLoading, setGameLoading] = useState(false);
+  const [gameError, setGameError] = useState("");
+  const loadStarted = useRef(false);
+  const resolveState = async () => {
+    if (gameLoading) return;
+    setGameLoading(true);
+    setGameError("");
+    props.onInteraction?.({
+      mechanic: daily ? "daily_check_in" : "streak_reward",
+      phase: "started",
+      attempt: 1
+    });
+    try {
+      setGameOutcome(await requireGameOutcome(props));
+    } catch (error) {
+      setGameError(gameUnavailableText(error));
+    } finally {
+      setGameLoading(false);
+    }
+  };
+  useEffect(() => {
+    if (daily || loadStarted.current) return;
+    loadStarted.current = true;
+    void resolveState();
+  }, [daily]);
+  const remoteState = gameOutcome?.state ?? {};
+  const calendarDays = arr(remoteState.calendarDays);
+  const authoredFilled = calendarDays.filter(day => {
+    const value = record(day);
+    return day === true || value.done === true || value.checked === true || value.claimed === true;
+  }).length;
+  const total = boundedInt(remoteState.total ?? e.total, calendarDays.length || 7, 1, 31);
+  const initialFilled = boundedInt(typeof remoteState.filled === "number" ? remoteState.filled : typeof remoteState.streakValue === "number" ? remoteState.streakValue : authoredFilled, 0, 0, total);
+  const authoredToday = calendarDays.find(day => {
+    const value = record(day);
+    return value.today === true || value.current === true;
+  });
+  const todayState = record(authoredToday);
+  const alreadyCheckedIn = initialFilled >= total || authoredToday === true || todayState.done === true || todayState.checked === true || todayState.claimed === true;
+  const filled = initialFilled;
+  const glyph = str(remoteState.glyph ?? e.glyph) || "🔥";
+  const caption = gameResultLabel(gameOutcome) || str(remoteState.rewardMessage ?? e.rewardMessage) || (filled > 0 ? `${filled}-day streak` : "");
+  const finishDaily = () => {
+    if (presentTerminalOutcome(props, gameResultLabel(gameOutcome))) return;
+    if (spec.cta && spec.cta.action !== "dismiss") props.onCta(spec.cta);else props.onDismiss();
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: sh.content,
+    children: [/*#__PURE__*/_jsx(Title, {
+      text: spec.title,
+      theme: theme
+    }), /*#__PURE__*/_jsx(Body, {
+      text: spec.body,
+      theme: theme
+    }), !daily && (gameLoading || !gameOutcome && gameError) ? /*#__PURE__*/_jsxs(View, {
+      style: [stk.claimed, {
+        backgroundColor: theme.couponBg
+      }],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [stk.claimedTitle, {
+          color: theme.bodyColor
+        }],
+        children: gameLoading ? "Loading your streak…" : gameError
+      }), !gameLoading ? /*#__PURE__*/_jsx(PrimaryBtn, {
+        label: "RETRY",
+        accent: theme.accent,
+        onPress: () => {
+          void resolveState();
+        }
+      }) : null]
+    }) : /*#__PURE__*/_jsx(View, {
+      style: stk.row,
+      children: Array.from({
+        length: total
+      }, (_, i) => {
+        const day = record(calendarDays[i]);
+        const frozen = day.frozen === true || day.freeze === true;
+        const completed = calendarDays.length > 0 ? calendarDays[i] === true || day.done === true || day.checked === true || day.claimed === true : i < filled;
+        return /*#__PURE__*/_jsx(View, {
+          style: [stk.dot, {
+            backgroundColor: completed ? theme.couponBg : "#F1F3F7",
+            borderColor: completed ? theme.accent : "#E4E7EC"
+          }],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: stk.glyph,
+            children: frozen ? "❄️" : completed ? glyph : ""
+          })
+        }, i);
+      })
+    }), caption ? /*#__PURE__*/_jsx(Text, {
+      style: [stk.caption, {
+        color: theme.accent
+      }],
+      children: caption
+    }) : null, daily ? gameOutcome ? /*#__PURE__*/_jsxs(View, {
+      style: [stk.claimed, {
+        backgroundColor: theme.couponBg
+      }],
+      accessibilityLiveRegion: "polite",
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [stk.claimedTitle, {
+          color: theme.accent
+        }],
+        children: alreadyCheckedIn ? "✓ Checked in today" : gameResultLabel(gameOutcome) || "Check-in confirmed"
+      }), /*#__PURE__*/_jsx(PrimaryBtn, {
+        label: "DONE",
+        accent: theme.accent,
+        onPress: finishDaily
+      })]
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [gameError ? /*#__PURE__*/_jsx(Text, {
+        style: [sl.unavailable, {
+          color: theme.secondaryColor
+        }],
+        children: gameError
+      }) : null, /*#__PURE__*/_jsx(PrimaryBtn, {
+        label: gameLoading ? "CHECKING…" : gameError ? "RETRY" : spec.cta?.label || "CHECK IN",
+        accent: theme.accent,
+        onPress: () => {
+          void resolveState();
+        },
+        disabled: gameLoading
+      })]
+    }) : gameOutcome ? /*#__PURE__*/_jsx(CtaArea, {
+      ...props
+    }) : null]
+  });
+}
+const stk = {
+  row: {
+    flexDirection: "row",
+    gap: 8,
+    justifyContent: "center",
+    marginVertical: 14,
+    flexWrap: "wrap"
+  },
+  dot: {
+    width: 38,
+    height: 38,
+    borderRadius: 10,
+    borderWidth: 1.5,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  glyph: {
+    fontSize: 18
+  },
+  caption: {
+    textAlign: "center",
+    fontWeight: "700",
+    fontSize: 14,
+    marginBottom: 12
+  },
+  claimed: {
+    borderRadius: 12,
+    padding: 12,
+    gap: 8
+  },
+  claimedTitle: {
+    fontSize: 14,
+    fontWeight: "800",
+    textAlign: "center"
+  }
+};
+
+// ─── 10. Checklist Progress ────────────────────────────────────────────────────
+
+export function ChecklistProgressInApp(props) {
+  const {
+    spec,
+    theme
+  } = props;
+  const e = ext(props);
+  const rawItems = arr(e.items ?? e.steps ?? e.tasks ?? e.checklistItems ?? e.setupSteps);
+  const initial = rawItems.length > 0 ? rawItems.map(item => {
+    const value = record(item);
+    const completed = value.done === true || value.completed === true;
+    return {
+      label: labelOf(item),
+      done: completed,
+      locked: completed || value.interactive === false || value.readOnly === true
+    };
+  }) : [];
+  const [items, setItems] = useState(initial);
+  const done = items.filter(i => i.done).length;
+  const complete = items.length > 0 && done === items.length;
+  const authoredComplete = initial.length > 0 && initial.every(item => item.done);
+  return /*#__PURE__*/_jsxs(View, {
+    style: sh.content,
+    children: [/*#__PURE__*/_jsx(Title, {
+      text: spec.title,
+      theme: theme
+    }), /*#__PURE__*/_jsx(Body, {
+      text: spec.body,
+      theme: theme
+    }), items.length > 0 ? /*#__PURE__*/_jsxs(View, {
+      style: cl.progress,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [cl.bar, {
+          backgroundColor: theme.couponBg
+        }],
+        children: /*#__PURE__*/_jsx(View, {
+          style: [cl.fill, {
+            width: `${done / items.length * 100}%`,
+            backgroundColor: theme.accent
+          }]
+        })
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: [cl.pct, {
+          color: theme.bodyColor
+        }],
+        children: [done, "/", items.length]
+      })]
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: {
+        marginVertical: 8
+      },
+      children: items.map((item, i) => /*#__PURE__*/_jsxs(Pressable, {
+        style: [cl.row, {
+          borderBottomColor: "#F1F3F7"
+        }],
+        onPress: () => setItems(prev => prev.map((it, idx) => idx === i && !it.locked ? {
+          ...it,
+          done: !it.done
+        } : it)),
+        onPressOut: () => {
+          if (item.locked) return;
+          const nextDone = done + (item.done ? -1 : 1);
+          props.onInteraction?.({
+            mechanic: "interactive_checklist",
+            phase: "progress",
+            progress: nextDone / items.length,
+            value: nextDone
+          });
+        },
+        disabled: item.locked,
+        accessibilityRole: "checkbox",
+        accessibilityState: {
+          checked: item.done,
+          disabled: item.locked
+        },
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [cl.check, {
+            borderColor: item.done ? theme.accent : "#D1D5DB",
+            backgroundColor: item.done ? theme.accent : "transparent"
+          }],
+          children: item.done ? /*#__PURE__*/_jsx(Text, {
+            style: cl.tick,
+            children: "\u2713"
+          }) : null
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [cl.label, {
+            color: item.done ? theme.bodyColor : theme.titleColor,
+            textDecorationLine: item.done ? "line-through" : "none"
+          }],
+          children: item.label
+        })]
+      }, i))
+    }), complete ? /*#__PURE__*/_jsxs(View, {
+      style: [cl.complete, {
+        backgroundColor: theme.couponBg
+      }],
+      accessibilityLiveRegion: "polite",
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [cl.completeTitle, {
+          color: theme.accent
+        }],
+        children: authoredComplete ? str(e.completionLabel) || "Checklist complete" : "Ready to finish"
+      }), authoredComplete && labelOf(e.reward) ? /*#__PURE__*/_jsx(Text, {
+        style: [cl.completeReward, {
+          color: theme.bodyColor
+        }],
+        children: labelOf(e.reward)
+      }) : null, /*#__PURE__*/_jsx(CtaArea, {
+        ...props
+      })]
+    }) : null]
+  });
+}
+const cl = {
+  progress: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 10
+  },
+  bar: {
+    flex: 1,
+    height: 8,
+    borderRadius: 999,
+    overflow: "hidden"
+  },
+  fill: {
+    height: "100%",
+    borderRadius: 999
+  },
+  pct: {
+    fontSize: 11,
+    fontWeight: "600",
+    minWidth: 32,
+    textAlign: "right"
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingVertical: 10,
+    borderBottomWidth: 1
+  },
+  check: {
+    width: 22,
+    height: 22,
+    borderRadius: 6,
+    borderWidth: 1.8,
+    justifyContent: "center",
+    alignItems: "center",
+    flexShrink: 0
+  },
+  tick: {
+    color: "#fff",
+    fontSize: 12,
+    fontWeight: "800"
+  },
+  label: {
+    flex: 1,
+    fontSize: 13,
+    fontWeight: "500"
+  },
+  complete: {
+    borderRadius: 12,
+    padding: 12,
+    marginTop: 8
+  },
+  completeTitle: {
+    fontSize: 14,
+    fontWeight: "800",
+    textAlign: "center"
+  },
+  completeReward: {
+    fontSize: 12,
+    textAlign: "center",
+    marginTop: 3
+  }
+};
+function normalizedProgress(value) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return null;
+  return Math.max(0, Math.min(100, value <= 1 ? value * 100 : value));
+}
+function ProgressSummaryInApp(props) {
+  const {
+    spec,
+    theme
+  } = props;
+  const e = ext(props);
+  const backendOwned = variantOf(props) === "progress_unlock";
+  const [gameOutcome, setGameOutcome] = useState(null);
+  const [gameLoading, setGameLoading] = useState(backendOwned);
+  const [gameError, setGameError] = useState("");
+  const loadStarted = useRef(false);
+  const loadProgress = async () => {
+    setGameLoading(true);
+    setGameError("");
+    try {
+      const outcome = await requireGameOutcome(props);
+      setGameOutcome(outcome);
+      props.onInteraction?.({
+        mechanic: "progress_unlock",
+        phase: "resolved",
+        result: gameResultLabel(outcome) || outcome.id
+      });
+    } catch (error) {
+      setGameError(gameUnavailableText(error));
+    } finally {
+      setGameLoading(false);
+    }
+  };
+  useEffect(() => {
+    if (!backendOwned || loadStarted.current) return;
+    loadStarted.current = true;
+    void loadProgress();
+  }, [backendOwned]);
+  if (backendOwned && (gameLoading || !gameOutcome)) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: sh.content,
+      children: [/*#__PURE__*/_jsx(Title, {
+        text: spec.title,
+        theme: theme
+      }), /*#__PURE__*/_jsx(Body, {
+        text: spec.body,
+        theme: theme
+      }), /*#__PURE__*/_jsxs(View, {
+        style: [prog.rewardCard, {
+          backgroundColor: theme.couponBg
+        }],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [prog.reward, {
+            color: theme.bodyColor
+          }],
+          children: gameLoading ? "Loading your progress…" : gameError || "Progress unavailable."
+        }), !gameLoading ? /*#__PURE__*/_jsx(PrimaryBtn, {
+          label: "RETRY",
+          accent: theme.accent,
+          onPress: () => {
+            void loadProgress();
+          }
+        }) : null]
+      })]
+    });
+  }
+  const state = backendOwned ? gameOutcome?.state ?? {} : e;
+  const steps = arr(state.steps ?? (backendOwned ? e.milestoneLabels : e.setupSteps ?? e.milestoneLabels));
+  const doneSteps = steps.filter(step => {
+    const value = record(step);
+    return value.done === true || value.completed === true;
+  }).length;
+  const firstNumber = values => {
+    const value = values.find(candidate => typeof candidate === "number" && Number.isFinite(candidate));
+    return typeof value === "number" ? value : null;
+  };
+  const direct = firstNumber([state.progress, state.progressValue]);
+  const current = firstNumber([state.currentValue, state.completedSteps, state.progressSource, state.goalSource]);
+  const target = firstNumber([state.targetValue, state.goalValue]);
+  const stepPosition = firstNumber([state.currentStep, state.stepIndex]);
+  let progress = normalizedProgress(direct);
+  if (progress === null && current !== null && target !== null && target > 0) {
+    progress = normalizedProgress(current / target);
+  }
+  if (progress === null && steps.length > 0) {
+    const completed = stepPosition ?? doneSteps;
+    progress = normalizedProgress(completed / steps.length);
+  }
+  progress ??= 0;
+  const unlocked = progress >= 100;
+  const segmentCount = steps.length >= 2 ? Math.min(10, steps.length) : 8;
+  const filledSegments = Math.round(progress / 100 * segmentCount);
+  const message = firstText(e, ["message", "motivationalText", "onboardingMessage", "rewardMessage", "goal"]) || spec.body;
+  const reward = backendOwned ? gameResultLabel(gameOutcome) : labelOf(e.reward);
+  const nextStep = steps.find(step => {
+    const value = record(step);
+    return value.done !== true && value.completed !== true;
+  });
+  const labels = arr(e.milestoneLabels).map(labelOf).filter(Boolean);
+  return /*#__PURE__*/_jsxs(View, {
+    style: sh.content,
+    children: [/*#__PURE__*/_jsx(Title, {
+      text: spec.title || firstText(e, ["challengeTitle", "celebrationTitle", "goalTitle"]),
+      theme: theme
+    }), /*#__PURE__*/_jsx(Body, {
+      text: message,
+      theme: theme
+    }), /*#__PURE__*/_jsxs(View, {
+      style: prog.header,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [prog.metric, {
+          color: theme.accent
+        }],
+        children: current !== null && target !== null ? `${current}/${target}` : `${Math.round(progress)}%`
+      }), nextStep ? /*#__PURE__*/_jsx(Text, {
+        numberOfLines: 1,
+        style: [prog.next, {
+          color: theme.bodyColor
+        }],
+        children: labelOf(nextStep)
+      }) : null]
+    }), /*#__PURE__*/_jsx(View, {
+      style: prog.segments,
+      accessibilityRole: "progressbar",
+      accessibilityValue: {
+        min: 0,
+        max: 100,
+        now: Math.round(progress)
+      },
+      children: Array.from({
+        length: segmentCount
+      }, (_, index) => /*#__PURE__*/_jsx(View, {
+        style: [prog.segment, {
+          backgroundColor: index < filledSegments ? theme.accent : theme.couponBg
+        }]
+      }, index))
+    }), labels.length > 1 ? /*#__PURE__*/_jsxs(View, {
+      style: prog.labels,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [prog.label, {
+          color: theme.secondaryColor
+        }],
+        children: labels[0]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [prog.label, {
+          color: theme.secondaryColor
+        }],
+        children: labels[labels.length - 1]
+      })]
+    }) : null, reward ? /*#__PURE__*/_jsx(View, {
+      style: [prog.rewardCard, {
+        backgroundColor: theme.couponBg
+      }],
+      children: /*#__PURE__*/_jsxs(Text, {
+        style: [prog.reward, {
+          color: unlocked ? theme.accent : theme.bodyColor
+        }],
+        children: [unlocked ? "✓ Unlocked" : "Unlocks", ": ", reward]
+      })
+    }) : null, /*#__PURE__*/_jsx(CtaArea, {
+      ...props
+    })]
+  });
+}
+const prog = {
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    marginTop: 12
+  },
+  metric: {
+    fontSize: 20,
+    fontWeight: "800"
+  },
+  next: {
+    flex: 1,
+    fontSize: 12,
+    textAlign: "right"
+  },
+  segments: {
+    flexDirection: "row",
+    gap: 4,
+    marginTop: 8
+  },
+  segment: {
+    flex: 1,
+    height: 9,
+    borderRadius: 5
+  },
+  labels: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: 5
+  },
+  label: {
+    fontSize: 10
+  },
+  reward: {
+    fontSize: 12,
+    fontWeight: "600",
+    marginTop: 10
+  },
+  rewardCard: {
+    borderRadius: 10,
+    padding: 10,
+    marginTop: 10
+  }
+};
+function CommunityChallengeInApp(props) {
+  const {
+    spec,
+    theme
+  } = props;
+  const e = ext(props);
+  const [joined, setJoined] = useState(false);
+  const participants = boundedInt(e.participantsCount, 0, 0, 999_999_999);
+  const leaders = arr(e.leaderboard).slice(0, 5);
+  const title = str(e.challengeTitle) || spec.title;
+  const goal = str(e.goal) || spec.body;
+  const reward = labelOf(e.reward);
+  return /*#__PURE__*/_jsxs(View, {
+    style: sh.content,
+    children: [/*#__PURE__*/_jsx(Title, {
+      text: title,
+      theme: theme
+    }), /*#__PURE__*/_jsx(Body, {
+      text: goal,
+      theme: theme
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [challenge.hero, {
+        backgroundColor: theme.couponBg
+      }],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: challenge.emoji,
+        children: joined ? "🏁" : "🏆"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [challenge.count, {
+          color: theme.accent
+        }],
+        children: participants.toLocaleString()
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [challenge.caption, {
+          color: theme.bodyColor
+        }],
+        children: "participants"
+      })]
+    }), leaders.length > 0 ? /*#__PURE__*/_jsx(View, {
+      style: challenge.board,
+      children: leaders.map((leader, index) => /*#__PURE__*/_jsxs(View, {
+        style: challenge.row,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          style: [challenge.rank, {
+            color: theme.accent
+          }],
+          children: ["#", index + 1]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [challenge.name, {
+            color: theme.titleColor
+          }],
+          children: labelOf(leader)
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [challenge.value, {
+            color: theme.bodyColor
+          }],
+          children: typeof (record(leader).value ?? record(leader).score) === "number" ? String(record(leader).value ?? record(leader).score) : str(record(leader).value ?? record(leader).score)
+        })]
+      }, index))
+    }) : null, reward ? /*#__PURE__*/_jsxs(Text, {
+      style: [challenge.reward, {
+        color: theme.bodyColor
+      }],
+      children: ["Reward: ", reward]
+    }) : null, joined ? /*#__PURE__*/_jsxs(View, {
+      style: [challenge.joined, {
+        borderColor: theme.accent
+      }],
+      accessibilityLiveRegion: "polite",
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [challenge.joinedText, {
+          color: theme.accent
+        }],
+        children: "Join request sent"
+      }), /*#__PURE__*/_jsx(PrimaryBtn, {
+        label: "DONE",
+        accent: theme.accent,
+        onPress: () => {
+          if (!presentTerminalOutcome(props, "Join request sent")) props.onDismiss();
+        }
+      })]
+    }) : /*#__PURE__*/_jsx(PrimaryBtn, {
+      label: str(e.joinLabel) || spec.cta?.label || "JOIN CHALLENGE",
+      accent: theme.accent,
+      onPress: () => {
+        setJoined(true);
+        props.onInteraction?.({
+          mechanic: "community_challenge",
+          phase: "started"
+        });
+        if (spec.cta && spec.cta.action !== "dismiss") props.onCta(spec.cta);
+      }
+    })]
+  });
+}
+const challenge = {
+  hero: {
+    borderRadius: 16,
+    padding: 16,
+    alignItems: "center",
+    marginVertical: 12
+  },
+  emoji: {
+    fontSize: 36
+  },
+  count: {
+    fontSize: 24,
+    fontWeight: "900",
+    marginTop: 3
+  },
+  caption: {
+    fontSize: 11,
+    fontWeight: "600"
+  },
+  board: {
+    marginBottom: 10
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 7,
+    gap: 8
+  },
+  rank: {
+    width: 28,
+    fontSize: 12,
+    fontWeight: "800"
+  },
+  name: {
+    flex: 1,
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  value: {
+    fontSize: 12,
+    fontWeight: "700"
+  },
+  reward: {
+    fontSize: 12,
+    fontWeight: "700",
+    textAlign: "center",
+    marginBottom: 10
+  },
+  joined: {
+    borderWidth: 1.5,
+    borderRadius: 12,
+    padding: 12,
+    gap: 8
+  },
+  joinedText: {
+    fontSize: 13,
+    fontWeight: "800",
+    textAlign: "center"
+  }
+};
+
+// ─── 11. Coupon Wallet ─────────────────────────────────────────────────────────
+
+export function CouponWalletInApp(props) {
+  const {
+    spec,
+    theme
+  } = props;
+  const e = ext(props);
+  const coupons = arr(e.coupons).map(coupon => {
+    const value = record(coupon);
+    return {
+      code: str(value.code ?? value.couponCode),
+      label: str(value.label ?? value.title)
+    };
+  }).filter(coupon => coupon.code);
+  const fallbackCode = str(e.couponCode ?? e.referralCode ?? e.code) || str(spec.coupon);
+  const fallbackLabel = str(e.couponLabel ?? e.referralLabel) || "Your exclusive coupon";
+  const entries = coupons.length > 0 ? coupons : fallbackCode ? [{
+    code: fallbackCode,
+    label: fallbackLabel
+  }] : [];
+  return /*#__PURE__*/_jsxs(View, {
+    style: sh.content,
+    children: [/*#__PURE__*/_jsx(Title, {
+      text: spec.title,
+      theme: theme
+    }), /*#__PURE__*/_jsx(Body, {
+      text: spec.body,
+      theme: theme
+    }), entries.map(({
+      code,
+      label
+    }, index) => /*#__PURE__*/_jsxs(View, {
+      style: [cw.chip, {
+        backgroundColor: theme.couponBg,
+        borderColor: theme.couponBorder
+      }],
+      accessibilityLabel: `Coupon code ${code}`,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [cw.label, {
+          color: theme.bodyColor
+        }],
+        children: label || fallbackLabel
+      }), /*#__PURE__*/_jsx(Text, {
+        selectable: true,
+        style: [cw.code, {
+          color: theme.couponFg
+        }],
+        children: code
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [cw.tapHint, {
+          color: theme.accent
+        }],
+        children: "Press and hold to select"
+      })]
+    }, `${code}-${index}`)), /*#__PURE__*/_jsx(CtaArea, {
+      ...props
+    })]
+  });
+}
+const cw = {
+  chip: {
+    borderRadius: 14,
+    borderWidth: 1.5,
+    borderStyle: "dashed",
+    padding: 18,
+    alignItems: "center",
+    marginVertical: 14
+  },
+  label: {
+    fontSize: 11,
+    fontWeight: "600",
+    marginBottom: 6,
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  },
+  code: {
+    fontSize: 26,
+    fontWeight: "900",
+    letterSpacing: 3,
+    marginBottom: 6
+  },
+  tapHint: {
+    fontSize: 12,
+    fontWeight: "600"
+  }
+};
+
+// ─── QR / NFC / Wallet pass ──────────────────────────────────────────────────
+
+export function QrNfcInApp(props) {
+  const {
+    spec,
+    theme
+  } = props;
+  const e = ext(props);
+  const qr = str(spec.assets?.qr);
+  const code = firstText(e, ["codeValue", "barcode", "fallbackLink"]);
+  const kind = firstText(e, ["codeType", "passType", "walletProvider"]);
+  const instruction = firstText(e, ["instruction", "passTitle"]);
+  const expiry = str(e.expiry);
+  const wallet = variantOf(props) === "wallet_pass_offer";
+  const walletAsset = str(props.spec.assets?.wallet);
+  return /*#__PURE__*/_jsxs(View, {
+    style: sh.content,
+    children: [/*#__PURE__*/_jsx(Title, {
+      text: spec.title || str(e.passTitle),
+      theme: theme
+    }), /*#__PURE__*/_jsx(Body, {
+      text: instruction || spec.body,
+      theme: theme
+    }), wallet ? /*#__PURE__*/_jsxs(View, {
+      style: [qrn.pass, {
+        backgroundColor: theme.couponBg,
+        borderColor: theme.couponBorder
+      }],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: qrn.passIcon,
+        children: "\u25A4"
+      }), /*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1
+        },
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [qrn.passTitle, {
+            color: theme.titleColor
+          }],
+          children: str(e.passTitle) || spec.title || "Wallet pass"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [qrn.kind, {
+            color: theme.bodyColor
+          }],
+          children: kind || "Mobile wallet"
+        })]
+      }), walletAsset ? /*#__PURE__*/_jsx(Text, {
+        style: [qrn.ready, {
+          color: theme.accent
+        }],
+        children: "Ready"
+      }) : null]
+    }) : null, qr ? /*#__PURE__*/_jsx(Image, {
+      source: {
+        uri: qr
+      },
+      resizeMode: "contain",
+      style: qrn.image,
+      accessibilityLabel: "Campaign QR code"
+    }) : code ? /*#__PURE__*/_jsxs(View, {
+      style: [qrn.code, {
+        backgroundColor: theme.couponBg,
+        borderColor: theme.couponBorder
+      }],
+      children: [kind ? /*#__PURE__*/_jsx(Text, {
+        style: [qrn.kind, {
+          color: theme.bodyColor
+        }],
+        children: kind
+      }) : null, /*#__PURE__*/_jsx(Text, {
+        selectable: true,
+        style: [qrn.value, {
+          color: theme.couponFg
+        }],
+        children: code
+      })]
+    }) : wallet && walletAsset ? null : /*#__PURE__*/_jsx(View, {
+      style: [qrn.notice, {
+        backgroundColor: theme.couponBg
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [qrn.noticeText, {
+          color: theme.bodyColor
+        }],
+        children: "No scannable code was provided. Use the campaign action to continue."
+      })
+    }), expiry ? /*#__PURE__*/_jsxs(Text, {
+      style: [qrn.expiry, {
+        color: theme.secondaryColor
+      }],
+      children: ["Expires ", expiry]
+    }) : null, /*#__PURE__*/_jsx(CtaArea, {
+      ...props,
+      beforePrimary: () => wallet ? props.onInteraction?.({
+        mechanic: "wallet_pass_offer",
+        phase: "started",
+        value: walletAsset || code || "host_action",
+        meta: {
+          hostAction: "add_to_wallet",
+          wallet: walletAsset || undefined
+        }
+      }) : props.onInteraction?.({
+        mechanic: "nfc_qr_prompt",
+        phase: "started",
+        value: str(props.spec.assets?.nfc) || code || "host_action"
+      })
+    })]
+  });
+}
+const qrn = {
+  image: {
+    alignSelf: "center",
+    aspectRatio: 1,
+    marginTop: 12,
+    maxWidth: 184,
+    width: "100%"
+  },
+  code: {
+    borderWidth: 1,
+    borderRadius: 12,
+    padding: 14,
+    marginTop: 12,
+    alignItems: "center"
+  },
+  kind: {
+    fontSize: 10,
+    fontWeight: "700",
+    textTransform: "uppercase"
+  },
+  value: {
+    fontSize: 15,
+    lineHeight: 21,
+    fontWeight: "700",
+    textAlign: "center",
+    marginTop: 4
+  },
+  notice: {
+    borderRadius: 12,
+    padding: 12,
+    marginTop: 12
+  },
+  noticeText: {
+    fontSize: 12,
+    lineHeight: 18,
+    textAlign: "center"
+  },
+  expiry: {
+    fontSize: 11,
+    textAlign: "center",
+    marginTop: 8
+  },
+  pass: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    borderWidth: 1,
+    borderRadius: 14,
+    padding: 14,
+    marginTop: 12
+  },
+  passIcon: {
+    fontSize: 30
+  },
+  passTitle: {
+    fontSize: 14,
+    fontWeight: "800"
+  },
+  ready: {
+    fontSize: 11,
+    fontWeight: "800"
+  }
+};
+
+// ─── Video commerce ──────────────────────────────────────────────────────────
+
+export function VideoCommerceInApp(props) {
+  const {
+    spec,
+    theme,
+    onCta,
+    onDismiss
+  } = props;
+  const e = ext(props);
+  const products = arr(e.products ?? spec.assets?.products);
+  const firstProduct = record(products[0]);
+  const firstProductImage = arr(e.productImages)[0] ?? firstProduct.image ?? firstProduct.imageUrl;
+  const poster = str(spec.assets?.image) || str(spec.imageUrl) || mediaUri(e.posterImage ?? firstProductImage);
+  const video = str(spec.assets?.video) || str(e.video);
+  const mediaHeight = resolveInAppMediaHeight(spec, 180, 360);
+  const product = firstText(e, ["productTitle", "itemName"]) || labelOf(firstProduct);
+  const price = str(e.price) || str(firstProduct.price);
+  const discount = str(e.discount) || str(firstProduct.discount);
+  const act = () => {
+    if (!spec.cta) return;
+    spec.cta.action === "dismiss" ? onDismiss() : onCta(spec.cta);
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: sh.content,
+    children: [/*#__PURE__*/_jsx(Title, {
+      text: spec.title,
+      theme: theme
+    }), /*#__PURE__*/_jsx(Body, {
+      text: spec.body,
+      theme: theme
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [vid.poster, {
+        backgroundColor: theme.couponBg
+      }],
+      children: [poster ? /*#__PURE__*/_jsx(Image, {
+        source: {
+          uri: poster
+        },
+        resizeMode: "cover",
+        style: [vid.image, mediaHeight === undefined ? null : {
+          height: mediaHeight
+        }],
+        accessibilityLabel: product || spec.title || "Product video"
+      }) : null, video ? /*#__PURE__*/_jsxs(Pressable, {
+        style: [vid.play, {
+          backgroundColor: theme.cardBg
+        }],
+        disabled: !spec.cta,
+        onPress: act,
+        accessibilityRole: "button",
+        accessibilityLabel: "Play video through campaign action",
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [vid.playIcon, {
+            color: theme.accent
+          }],
+          children: "\u25B6"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [vid.playLabel, {
+            color: theme.titleColor
+          }],
+          children: str(e.playLabel) || "Play video"
+        })]
+      }) : null]
+    }), product || price || discount ? /*#__PURE__*/_jsxs(View, {
+      style: vid.product,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: vid.productCopy,
+        children: [product ? /*#__PURE__*/_jsx(Text, {
+          style: [vid.productTitle, {
+            color: theme.titleColor
+          }],
+          children: product
+        }) : null, discount ? /*#__PURE__*/_jsx(Text, {
+          style: [vid.discount, {
+            color: theme.accent
+          }],
+          children: discount
+        }) : null]
+      }), price ? /*#__PURE__*/_jsx(Text, {
+        style: [vid.price, {
+          color: theme.titleColor
+        }],
+        children: price
+      }) : null]
+    }) : null, /*#__PURE__*/_jsx(CtaArea, {
+      ...props
+    })]
+  });
+}
+const vid = {
+  poster: {
+    minHeight: 150,
+    borderRadius: 14,
+    marginTop: 10,
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  image: {
+    width: "100%",
+    height: 180
+  },
+  play: {
+    position: "absolute",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 7,
+    borderRadius: 999,
+    maxWidth: "90%",
+    paddingVertical: 9,
+    paddingHorizontal: 13
+  },
+  playIcon: {
+    fontSize: 15
+  },
+  playLabel: {
+    flexShrink: 1,
+    fontSize: 12,
+    fontWeight: "700",
+    textAlign: "center"
+  },
+  product: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: 10,
+    gap: 10
+  },
+  productCopy: {
+    flex: 1
+  },
+  productTitle: {
+    fontSize: 14,
+    fontWeight: "700"
+  },
+  discount: {
+    fontSize: 11,
+    fontWeight: "700",
+    marginTop: 2
+  },
+  price: {
+    fontSize: 15,
+    fontWeight: "800"
+  }
+};
+
+// ─── Celebration ─────────────────────────────────────────────────────────────
+
+const BURST_PARTICLES = ["●", "✦", "●", "◆", "●", "✦", "●", "◆"];
+export function CelebrationInApp(props) {
+  const {
+    spec,
+    theme
+  } = props;
+  const e = ext(props);
+  const burst = useRef(new Animated.Value(0)).current;
+  const reducedMotion = useReducedMotion();
+  const title = spec.title || firstText(e, ["celebrationTitle", "milestoneName"]);
+  const message = firstText(e, ["celebrationMessage", "message"]) || spec.body;
+  // Reward copy is display-only; the renderer never decides or grants a reward.
+  const reward = labelOf(e.reward);
+  const confettiEnabled = e.confetti !== false && e.confettiAnimation !== false;
+  useEffect(() => {
+    if (reducedMotion !== null) {
+      burst.stopAnimation();
+      burst.setValue(0);
+      if (!reducedMotion && confettiEnabled) {
+        Animated.timing(burst, {
+          toValue: 1,
+          duration: 750,
+          easing: Easing.out(Easing.cubic),
+          useNativeDriver: true
+        }).start();
+      }
+    }
+    return () => burst.stopAnimation();
+  }, [burst, confettiEnabled, reducedMotion]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: sh.content,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: cel.stage,
+      children: [confettiEnabled ? BURST_PARTICLES.map((particle, index) => {
+        const angle = index / BURST_PARTICLES.length * Math.PI * 2;
+        const distance = index % 2 === 0 ? 54 : 70;
+        const translateX = burst.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, Math.cos(angle) * distance]
+        });
+        const translateY = burst.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, Math.sin(angle) * distance]
+        });
+        const opacity = burst.interpolate({
+          inputRange: [0, 0.25, 1],
+          outputRange: [0, 1, 0.35]
+        });
+        return /*#__PURE__*/_jsx(Animated.Text, {
+          style: [cel.particle, {
+            color: index % 2 === 0 ? theme.accent : "#F59E0B",
+            opacity,
+            transform: [{
+              translateX
+            }, {
+              translateY
+            }]
+          }],
+          children: particle
+        }, index);
+      }) : null, /*#__PURE__*/_jsx(Text, {
+        style: cel.emoji,
+        children: str(e.emoji) || "🎉"
+      })]
+    }), /*#__PURE__*/_jsx(Title, {
+      text: title,
+      theme: theme
+    }), /*#__PURE__*/_jsx(Body, {
+      text: message,
+      theme: theme
+    }), reward ? /*#__PURE__*/_jsx(View, {
+      style: [cel.reward, {
+        backgroundColor: theme.couponBg
+      }],
+      children: /*#__PURE__*/_jsxs(Text, {
+        style: [cel.rewardText, {
+          color: theme.couponFg
+        }],
+        children: ["Reward: ", reward]
+      })
+    }) : null, /*#__PURE__*/_jsx(CtaArea, {
+      ...props
+    })]
+  });
+}
+const cel = {
+  stage: {
+    height: 150,
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  particle: {
+    position: "absolute",
+    fontSize: 15,
+    fontWeight: "900"
+  },
+  emoji: {
+    fontSize: 52
+  },
+  reward: {
+    borderRadius: 10,
+    padding: 10,
+    marginTop: 10
+  },
+  rewardText: {
+    fontSize: 13,
+    fontWeight: "700",
+    textAlign: "center"
+  }
+};
+function FeedbackCaptureInApp(props) {
+  const {
+    spec,
+    theme
+  } = props;
+  const e = ext(props);
+  const [feedback, setFeedback] = useState("");
+  const prompt = str(e.promptText) || spec.body;
+  return /*#__PURE__*/_jsxs(View, {
+    style: sh.content,
+    children: [/*#__PURE__*/_jsx(Title, {
+      text: spec.title,
+      theme: theme
+    }), /*#__PURE__*/_jsx(Body, {
+      text: prompt,
+      theme: theme
+    }), /*#__PURE__*/_jsx(TextInput, {
+      value: feedback,
+      onChangeText: setFeedback,
+      multiline: true,
+      textAlignVertical: "top",
+      placeholder: str(e.placeholder) || "Type your feedback",
+      placeholderTextColor: theme.secondaryColor,
+      accessibilityLabel: prompt || "Feedback",
+      style: [fb.input, {
+        color: theme.titleColor,
+        borderColor: theme.couponBorder,
+        backgroundColor: theme.cardBg
+      }]
+    }), feedback.trim() ? /*#__PURE__*/_jsx(CtaArea, {
+      ...props,
+      beforePrimary: () => props.onInteraction?.({
+        mechanic: "feedback_capture",
+        phase: "resolved",
+        result: feedback.trim(),
+        meta: {
+          feedback: feedback.trim()
+        }
+      })
+    }) : null]
+  });
+}
+const fb = {
+  input: {
+    minHeight: 104,
+    borderWidth: 1,
+    borderRadius: 12,
+    padding: 12,
+    marginTop: 10,
+    fontSize: 14,
+    lineHeight: 20
+  }
+};
+
+/** One question-family entry point; payload shape selects the smallest native control. */
+export function QuestionFlowInApp(props) {
+  const e = ext(props);
+  const variantKey = variantOf(props);
+  if (variantKey === "feedback_capture") {
+    return /*#__PURE__*/_jsx(FeedbackCaptureInApp, {
+      ...props
+    });
+  }
+  if (variantKey === "emoji_reaction_bar" || arr(e.reactions).length > 0) {
+    return /*#__PURE__*/_jsx(EmojiReactionBarInApp, {
+      ...props
+    });
+  }
+  if (variantKey === "rating_request" || typeof e.ratingScale === "number") {
+    return /*#__PURE__*/_jsx(StarRatingInApp, {
+      ...props
+    });
+  }
+  if (variantKey === "nps_prompt" || typeof e.scaleMax === "number" || arr(e.scaleLabels).length > 0) {
+    return /*#__PURE__*/_jsx(NpsPromptInApp, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(PollCardInApp, {
+    ...props
+  });
+}
+function GuidedStepsInApp(props) {
+  const e = ext(props);
+  const raw = arr(e.setupSteps ?? e.steps).slice(0, 12);
+  const steps = raw.length > 0 ? raw : [{
+    title: props.spec.title,
+    body: props.spec.body
+  }];
+  const [index, setIndex] = useState(0);
+  const [validated, setValidated] = useState([]);
+  const step = record(steps[index]);
+  const title = firstText(step, ["title", "label", "heading"]) || props.spec.title;
+  const body = firstText(step, ["body", "message", "description"]) || props.spec.body;
+  const image = mediaUri(step.image ?? step.imageUrl ?? (index === 0 ? props.spec.assets?.image : ""));
+  const mediaHeight = resolveInAppMediaHeight(props.spec, 180, 360);
+  const last = index >= steps.length - 1;
+  const variant = variantOf(props);
+  const validationRules = arr(e.stepValidation);
+  const validation = step.validation ?? validationRules[index] ?? (validationRules.length ? undefined : e.stepValidation);
+  const validationRequired = variant === "guided_setup_wizard" && Boolean(validation);
+  const stepValidated = !validationRequired || validated.includes(index);
+  const advance = () => {
+    if (!stepValidated) return;
+    if (!last) {
+      const next = index + 1;
+      setIndex(next);
+      props.onInteraction?.({
+        mechanic: variant,
+        phase: "progress",
+        progress: next / steps.length,
+        value: next + 1
+      });
+      return;
+    }
+    props.onInteraction?.({
+      mechanic: variant,
+      phase: "completed",
+      progress: 1
+    });
+    if (presentTerminalOutcome(props)) return;
+    if (!props.spec.cta || props.spec.cta.action === "dismiss") props.onDismiss();else props.onCta(props.spec.cta);
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: sh.content,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: guide.progress,
+      accessibilityRole: "progressbar",
+      accessibilityValue: {
+        min: 1,
+        max: steps.length,
+        now: index + 1
+      },
+      children: steps.map((_, stepIndex) => /*#__PURE__*/_jsx(View, {
+        style: [guide.step, {
+          backgroundColor: stepIndex <= index ? props.theme.accent : props.theme.couponBg
+        }]
+      }, stepIndex))
+    }), image ? /*#__PURE__*/_jsx(Image, {
+      source: {
+        uri: image
+      },
+      resizeMode: "cover",
+      style: [guide.image, mediaHeight === undefined ? null : {
+        height: mediaHeight
+      }]
+    }) : /*#__PURE__*/_jsx(View, {
+      style: [guide.illustration, {
+        backgroundColor: props.theme.couponBg
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: guide.emoji,
+        children: variant === "guided_setup_wizard" ? "⚙️" : "👋"
+      })
+    }), /*#__PURE__*/_jsx(Title, {
+      text: title,
+      theme: props.theme
+    }), /*#__PURE__*/_jsx(Body, {
+      text: body,
+      theme: props.theme
+    }), validationRequired ? /*#__PURE__*/_jsxs(Pressable, {
+      accessibilityRole: "checkbox",
+      accessibilityState: {
+        checked: stepValidated
+      },
+      onPress: () => {
+        setValidated(current => current.includes(index) ? current.filter(value => value !== index) : [...current, index]);
+        props.onInteraction?.({
+          mechanic: variant,
+          phase: "decision",
+          value: index + 1,
+          meta: {
+            validation
+          }
+        });
+      },
+      style: [guide.validation, {
+        borderColor: props.theme.couponBorder
+      }],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [guide.validationCheck, {
+          borderColor: stepValidated ? props.theme.accent : props.theme.couponBorder,
+          backgroundColor: stepValidated ? props.theme.accent : props.theme.cardBg
+        }],
+        children: stepValidated ? /*#__PURE__*/_jsx(Text, {
+          style: guide.validationTick,
+          children: "\u2713"
+        }) : null
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [guide.validationLabel, {
+          color: props.theme.titleColor
+        }],
+        children: labelOf(validation) || "Mark this step complete"
+      })]
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: guide.actions,
+      children: [index > 0 ? /*#__PURE__*/_jsx(SecondaryBtn, {
+        label: "Back",
+        color: props.theme.secondaryColor,
+        onPress: () => setIndex(value => Math.max(0, value - 1))
+      }) : props.spec.secondaryCta ? /*#__PURE__*/_jsx(SecondaryBtn, {
+        label: props.spec.secondaryCta.label,
+        color: props.theme.secondaryColor,
+        onPress: props.onDismiss
+      }) : null, /*#__PURE__*/_jsx(PrimaryBtn, {
+        label: last ? props.spec.cta?.label || "Finish" : "Next",
+        accent: props.theme.accent,
+        onPress: advance,
+        disabled: !stepValidated
+      })]
+    })]
+  });
+}
+const guide = {
+  progress: {
+    flexDirection: "row",
+    gap: 5,
+    marginBottom: 14
+  },
+  step: {
+    flex: 1,
+    height: 5,
+    borderRadius: 3
+  },
+  image: {
+    width: "100%",
+    height: 180,
+    borderRadius: 16,
+    marginBottom: 14
+  },
+  illustration: {
+    height: 150,
+    borderRadius: 16,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 14
+  },
+  emoji: {
+    fontSize: 52
+  },
+  actions: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 6,
+    alignItems: "center",
+    marginTop: 14
+  },
+  validation: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    borderWidth: 1,
+    borderRadius: 10,
+    padding: 11,
+    marginTop: 10
+  },
+  validationCheck: {
+    width: 22,
+    height: 22,
+    borderRadius: 6,
+    borderWidth: 1.5,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  validationTick: {
+    color: "#FFFFFF",
+    fontSize: 12,
+    fontWeight: "900"
+  },
+  validationLabel: {
+    flex: 1,
+    fontSize: 13,
+    fontWeight: "600"
+  }
+};
+
+/** Progress-family entry point shared by streak and task-list payloads. */
+export function ChecklistProgressFamilyInApp(props) {
+  const e = ext(props);
+  const variantKey = variantOf(props);
+  if (variantKey === "first_session_onboarding" || variantKey === "guided_setup_wizard") {
+    return /*#__PURE__*/_jsx(GuidedStepsInApp, {
+      ...props
+    });
+  }
+  if (variantKey === "community_challenge") {
+    return /*#__PURE__*/_jsx(CommunityChallengeInApp, {
+      ...props
+    });
+  }
+  if (variantKey === "streak_reward" || variantKey === "daily_check_in" || typeof e.filled === "number" || typeof e.total === "number") {
+    return /*#__PURE__*/_jsx(StreakRewardInApp, {
+      ...props
+    });
+  }
+  if (variantKey === "progress_unlock" || variantKey === "goal_tracker") {
+    return /*#__PURE__*/_jsx(ProgressSummaryInApp, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(ChecklistProgressInApp, {
+    ...props
+  });
+}
+
+// ─── Shared content styles ────────────────────────────────────────────────────
+
+const sh = {
+  content: {
+    width: "100%"
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "800",
+    marginBottom: 6,
+    marginTop: 4,
+    paddingRight: 28,
+    lineHeight: 24
+  },
+  body: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginBottom: 4
+  },
+  ctaRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    marginTop: 14,
+    gap: 8
+  },
+  primaryBtn: {
+    paddingVertical: 11,
+    paddingHorizontal: 22,
+    borderRadius: 12,
+    flexBasis: 140,
+    flexGrow: 1,
+    flexShrink: 1,
+    maxWidth: "100%"
+  },
+  primaryText: {
+    fontSize: 15,
+    color: "#fff",
+    fontWeight: "700",
+    flexShrink: 1,
+    textAlign: "center"
+  },
+  secondaryBtn: {
+    flexShrink: 1,
+    maxWidth: "100%",
+    paddingVertical: 11,
+    paddingHorizontal: 14
+  },
+  secondaryText: {
+    flexShrink: 1,
+    fontSize: 14,
+    fontWeight: "500",
+    textAlign: "center"
+  }
+};
+
+// ─── Archetype registry ────────────────────────────────────────────────────────
+
+/** Canonical mechanic families. Null means the container should render the payload. */
+export const ARCHETYPE_CONTENT_RENDERERS = {
+  spinWheel: SpinWheelInApp,
+  scratchReveal: ScratchCardInApp,
+  slotReward: SlotRewardInApp,
+  carouselDeck: CarouselDeckInApp,
+  countdown: CountdownInApp,
+  questionFlow: QuestionFlowInApp,
+  checklistProgress: ChecklistProgressFamilyInApp,
+  qrNfc: QrNfcInApp,
+  videoCommerce: VideoCommerceInApp,
+  celebration: CelebrationInApp
+};
+
+/** Resolve a canonical family key without silently inventing missing mechanics. */
+export function resolveArchetypeContent(archetype) {
+  if (!archetype || !Object.prototype.hasOwnProperty.call(ARCHETYPE_CONTENT_RENDERERS, archetype)) return null;
+  return ARCHETYPE_CONTENT_RENDERERS[archetype];
+}
+export const ARCHETYPE_RENDERERS = {
+  // Gamified
+  spin_wheel: SpinWheelInApp,
+  scratch_card: ScratchCardInApp,
+  slot_reward: SlotRewardInApp,
+  carousel_story: CarouselDeckInApp,
+  swipe_deck: CarouselDeckInApp,
+  countdown_offer: CountdownInApp,
+  trial_conversion: CountdownInApp,
+  // Feedback / questions
+  poll_card: PollCardInApp,
+  survey_sheet: QuestionFlowInApp,
+  quiz_card: QuestionFlowInApp,
+  product_finder: QuestionFlowInApp,
+  preferences_picker: QuestionFlowInApp,
+  feedback_capture: QuestionFlowInApp,
+  nps_prompt: NpsPromptInApp,
+  emoji_reaction_bar: EmojiReactionBarInApp,
+  rating_request: StarRatingInApp,
+  app_review_ask: StarRatingInApp,
+  // Engagement / lifecycle
+  streak_reward: StreakRewardInApp,
+  daily_check_in: StreakRewardInApp,
+  interactive_checklist: ChecklistProgressInApp,
+  guided_setup_wizard: ChecklistProgressFamilyInApp,
+  checklist_progress: ChecklistProgressInApp,
+  progress_unlock: ChecklistProgressFamilyInApp,
+  goal_tracker: ChecklistProgressFamilyInApp,
+  first_session_onboarding: ChecklistProgressFamilyInApp,
+  community_challenge: ChecklistProgressFamilyInApp,
+  // Commerce / offers
+  coupon_wallet: CouponWalletInApp,
+  exit_intent_rescue: CouponWalletInApp,
+  nfc_qr_prompt: QrNfcInApp,
+  wallet_pass_offer: QrNfcInApp,
+  video_commerce_card: VideoCommerceInApp,
+  milestone_celebration: CelebrationInApp,
+  celebration_confetti_full_screen: CelebrationInApp
+};
+//# sourceMappingURL=EngageArchetypeRenderers.js.map