@scalebun/react-native 1.0.0 → 1.0.2

package/src/features/engage/EngageVariantContent.tsx

@@ -1,1483 +1,1483 @@
-/**
- * Native, composable content blocks for container-only in-app variants.
- *
- * Layout branches still own mounting. Interactive mechanics still live in the
- * mechanic resolver. This module only turns heterogeneous registry `ext` data
- * into a small set of reusable visual families.
- */
-
-import React, { useState, type ReactElement, type ReactNode } from "react";
-import {
-  Image,
-  Pressable,
-  Text,
-  TextInput,
-  View,
-  type ImageStyle,
-  type TextStyle,
-  type ViewStyle,
-} from "react-native";
-import type { InAppBranchProps } from "./EngageInAppView";
-import { resolveInAppMediaHeight } from "./engageMediaSizing";
-import { inAppOutcomeTerminalForCta } from "./engageOutcome";
-import { requestNativeStoreReview } from "./engageStoreReviewBridge";
-
-type Dict = Record<string, unknown>;
-type ContentRenderer = (props: InAppBranchProps) => ReactElement;
-type ContentFamily =
-  | "plans"
-  | "products"
-  | "chat"
-  | "calendar"
-  | "form"
-  | "trust"
-  | "location"
-  | "insight"
-  | "media"
-  | "list";
-
-const asRecord = (value: unknown): Dict =>
-  value !== null && typeof value === "object" && !Array.isArray(value)
-    ? (value as Dict)
-    : {};
-
-const asText = (value: unknown): string => {
-  if (typeof value === "string") return value.trim();
-  return typeof value === "number" && Number.isFinite(value)
-    ? String(value)
-    : "";
-};
-
-const firstText = (source: Dict, keys: readonly string[]): string => {
-  for (const key of keys) {
-    const value = asText(source[key]);
-    if (value) return value;
-  }
-  return "";
-};
-
-const firstValue = (source: Dict, keys: readonly string[]): unknown => {
-  for (const key of keys) {
-    if (source[key] !== undefined && source[key] !== null) return source[key];
-  }
-  return undefined;
-};
-
-const asList = (value: unknown): unknown[] => {
-  if (Array.isArray(value)) return value;
-  if (typeof value !== "string") return [];
-  return value
-    .split(/\r?\n|,/)
-    .map((item) => item.trim())
-    .filter(Boolean);
-};
-
-const firstList = (source: Dict, keys: readonly string[]): unknown[] =>
-  asList(firstValue(source, keys));
-
-const primaryText = (item: unknown): string => {
-  const value = asRecord(item);
-  return (
-    asText(item) ||
-    firstText(value, [
-      "label",
-      "title",
-      "heading",
-      "name",
-      "prompt",
-      "subject",
-      "eventTitle",
-      "code",
-      "key",
-    ])
-  );
-};
-
-const secondaryText = (item: unknown): string =>
-  firstText(asRecord(item), [
-    "price",
-    "value",
-    "description",
-    "body",
-    "message",
-    "dateTime",
-    "eventTime",
-    "dueDate",
-    "status",
-  ]);
-
-const extOf = (props: InAppBranchProps): Dict => asRecord(props.spec.ext);
-const assetsOf = (props: InAppBranchProps): Dict => asRecord(props.spec.assets);
-const variantOf = (props: InAppBranchProps): string => props.variantKey ?? "";
-
-const presentPrimaryOutcome = (props: InAppBranchProps): boolean => {
-  if (!props.onOutcome) return false;
-  props.onOutcome({
-    fallback: inAppOutcomeTerminalForCta(props.spec.cta),
-  });
-  return true;
-};
-
-function textDirection(theme: InAppBranchProps["theme"]): TextStyle {
-  return theme.rtl ? { writingDirection: "rtl", textAlign: "right" } : {};
-}
-
-function Actions({
-  beforePrimary,
-  primaryDisabled = false,
-  onPrimary,
-  ...props
-}: InAppBranchProps & {
-  beforePrimary?: () => void;
-  primaryDisabled?: boolean;
-  onPrimary?: () => void;
-}): ReactElement | null {
-  const { cta, secondaryCta } = props.spec;
-  if (!cta && !secondaryCta) return null;
-  return (
-    <View style={[styles.actions, props.theme.rtl && styles.reverse]}>
-      {secondaryCta ? (
-        <Pressable
-          accessibilityRole="button"
-          accessibilityLabel={secondaryCta.label}
-          onPress={props.onDismiss}
-          style={styles.secondaryButton}
-        >
-          <Text
-            style={[
-              styles.secondaryLabel,
-              { color: props.theme.secondaryColor },
-            ]}
-          >
-            {secondaryCta.label}
-          </Text>
-        </Pressable>
-      ) : null}
-      {cta ? (
-        <Pressable
-          accessibilityRole="button"
-          accessibilityLabel={cta.label}
-          accessibilityState={{ disabled: primaryDisabled }}
-          disabled={primaryDisabled}
-          onPress={() => {
-            beforePrimary?.();
-            if (onPrimary) onPrimary();
-            else if (presentPrimaryOutcome(props)) return;
-            else if (cta.action === "dismiss") props.onDismiss();
-            else props.onCta(cta);
-          }}
-          style={[
-            styles.primaryButton,
-            { backgroundColor: props.theme.accent, opacity: primaryDisabled ? 0.5 : 1 },
-          ]}
-        >
-          <Text style={[styles.primaryLabel, { color: props.theme.ctaText }]}>
-            {cta.label}
-          </Text>
-        </Pressable>
-      ) : null}
-    </View>
-  );
-}
-
-function Frame({
-  props,
-  badge,
-  titleKeys = [],
-  bodyKeys = [],
-  children,
-  showActions = true,
-  beforePrimary,
-  primaryDisabled,
-  onPrimary,
-}: {
-  props: InAppBranchProps;
-  badge?: string;
-  titleKeys?: readonly string[];
-  bodyKeys?: readonly string[];
-  children?: ReactNode;
-  showActions?: boolean;
-  beforePrimary?: () => void;
-  primaryDisabled?: boolean;
-  onPrimary?: () => void;
-}): ReactElement {
-  const ext = extOf(props);
-  const title = props.spec.title || firstText(ext, titleKeys);
-  const body = firstText(ext, bodyKeys) || props.spec.body;
-  return (
-    <View style={styles.content}>
-      {badge ? (
-        <View style={[styles.badge, { backgroundColor: props.theme.accent }]}>
-          <Text style={[styles.badgeLabel, { color: props.theme.ctaText }]}>
-            {badge}
-          </Text>
-        </View>
-      ) : null}
-      {title ? (
-        <Text
-          style={[
-            styles.title,
-            { color: props.theme.titleColor },
-            textDirection(props.theme),
-          ]}
-        >
-          {title}
-        </Text>
-      ) : null}
-      <Text
-        style={[
-          styles.body,
-          { color: props.theme.bodyColor },
-          textDirection(props.theme),
-        ]}
-      >
-        {body}
-      </Text>
-      {children}
-      {showActions ? (
-        <Actions
-          {...props}
-          beforePrimary={beforePrimary}
-          primaryDisabled={primaryDisabled}
-          onPrimary={onPrimary}
-        />
-      ) : null}
-    </View>
-  );
-}
-
-function FeatureChecklist({
-  items,
-  props,
-}: {
-  items: unknown[];
-  props: InAppBranchProps;
-}): ReactElement | null {
-  const labels = items.map(primaryText).filter(Boolean).slice(0, 6);
-  if (labels.length === 0) return null;
-  return (
-    <View style={styles.featureList}>
-      {labels.map((label, index) => (
-        <View
-          key={`${label}-${index}`}
-          style={[
-            styles.featureRow,
-            { borderColor: props.theme.couponBorder },
-          ]}
-        >
-          <View
-            style={[
-              styles.featureCheck,
-              { backgroundColor: props.theme.couponBg },
-            ]}
-          >
-            <Text style={[styles.featureTick, { color: props.theme.accent }]}>✓</Text>
-          </View>
-          <Text
-            style={[
-              styles.featureLabel,
-              { color: props.theme.titleColor },
-              textDirection(props.theme),
-            ]}
-          >
-            {label}
-          </Text>
-        </View>
-      ))}
-    </View>
-  );
-}
-
-function Rows({
-  items,
-  props,
-  numbered = false,
-}: {
-  items: unknown[];
-  props: InAppBranchProps;
-  numbered?: boolean;
-}): ReactElement | null {
-  const visible = items.filter((item) => primaryText(item)).slice(0, 6);
-  if (visible.length === 0) return null;
-  return (
-    <View style={styles.rows}>
-      {visible.map((item, index) => {
-        const label = primaryText(item);
-        const detail = secondaryText(item);
-        return (
-          <View
-            key={`${label}-${index}`}
-            style={[styles.row, { borderColor: props.theme.couponBorder }]}
-          >
-            <Text style={[styles.rowMark, { color: props.theme.accent }]}>
-              {numbered ? index + 1 : "•"}
-            </Text>
-            <View style={styles.grow}>
-              <Text
-                style={[styles.rowTitle, { color: props.theme.titleColor }]}
-              >
-                {label}
-              </Text>
-              {detail ? (
-                <Text
-                  style={[styles.rowDetail, { color: props.theme.bodyColor }]}
-                >
-                  {detail}
-                </Text>
-              ) : null}
-            </View>
-          </View>
-        );
-      })}
-    </View>
-  );
-}
-
-function Chips({
-  items,
-  props,
-}: {
-  items: unknown[];
-  props: InAppBranchProps;
-}): ReactElement | null {
-  const visible = items.map(primaryText).filter(Boolean).slice(0, 8);
-  if (visible.length === 0) return null;
-  return (
-    <View style={styles.chips}>
-      {visible.map((label, index) => (
-        <View
-          key={`${label}-${index}`}
-          style={[
-            styles.chip,
-            {
-              backgroundColor: props.theme.couponBg,
-              borderColor: props.theme.couponBorder,
-            },
-          ]}
-        >
-          <Text style={[styles.chipLabel, { color: props.theme.couponFg }]}>
-            {label}
-          </Text>
-        </View>
-      ))}
-    </View>
-  );
-}
-
-function imageUri(props: InAppBranchProps, item?: unknown): string {
-  const itemRecord = asRecord(item);
-  const assets = assetsOf(props);
-  return (
-    firstText(itemRecord, ["image", "imageUrl", "thumbnail", "posterImage"]) ||
-    props.spec.imageUrl ||
-    firstText(assets, ["image", "backgroundImage", "avatar", "icon"])
-  );
-}
-
-function HeroImage({
-  props,
-  item,
-}: {
-  props: InAppBranchProps;
-  item?: unknown;
-}) {
-  const uri = imageUri(props, item);
-  if (!uri) return null;
-  const mediaHeight = resolveInAppMediaHeight(props.spec, 132, 320);
-  return (
-    <Image
-      accessibilityRole="image"
-      source={{ uri }}
-      resizeMode="cover"
-      style={[
-        styles.heroImage,
-        mediaHeight === undefined ? null : { height: mediaHeight },
-      ]}
-    />
-  );
-}
-
-function PlansContent(props: InAppBranchProps): ReactElement {
-  const ext = extOf(props);
-  const plans = firstList(ext, ["plans", "featureMatrix"]);
-  const benefits = firstList(ext, ["benefits", "perks", "perksList"]);
-  const fallbackPlan = {
-    name: firstText(ext, ["planName", "newTierName", "tierName", "vipTitle"]),
-    price: firstText(ext, ["price", "discount", "expiry", "trialEndDate"]),
-  };
-  return (
-    <Frame
-      props={props}
-      titleKeys={["upgradeTitle", "vipTitle", "newTierName"]}
-      bodyKeys={["benefitMessage", "message", "renewalDateSource"]}
-    >
-      <Rows items={plans.length ? plans : [fallbackPlan]} props={props} />
-      <Chips items={benefits} props={props} />
-    </Frame>
-  );
-}
-
-function ProductsContent(props: InAppBranchProps): ReactElement {
-  const ext = extOf(props);
-  const bundle = variantOf(props) === "bundle_builder";
-  const browse = variantOf(props) === "browse_recovery";
-  const authoredItems = firstList(ext, [
-    "products",
-    "itemList",
-    "productCards",
-    "bundleItems",
-    "cartSummary",
-    "recommendations",
-  ]);
-  const assetItems = asList(assetsOf(props).products);
-  const items = authoredItems.length ? authoredItems : assetItems;
-  const fallback = {
-    name: firstText(ext, ["itemName", "productTitle", "checkoutMessage", "cartSource", "browseSource"]),
-    price: firstText(ext, ["newPrice", "price", "oldPrice", "discount", "pricingLogic"]),
-  };
-  const visibleItems = items.length ? items : [fallback];
-  const [selected, setSelected] = useState<number[]>([]);
-  const toggleBundleItem = (index: number): void => {
-    const next = selected.includes(index)
-      ? selected.filter((value) => value !== index)
-      : [...selected, index];
-    setSelected(next);
-    props.onInteraction?.({
-      mechanic: "bundle_builder",
-      phase: "decision",
-      value: next.length,
-      meta: { selected: next, items: next.map((value) => primaryText(visibleItems[value])).filter(Boolean) },
-    });
-  };
-  if (browse) {
-    const reason = firstText(ext, ["recommendation", "category", "reasonText"]);
-    return (
-      <Frame props={props} titleKeys={["recommendationTitle"]} bodyKeys={["message"]}>
-        <View style={[styles.browseHeader, { backgroundColor: props.theme.couponBg }]}>
-          <Text style={[styles.browseClock, { color: props.theme.accent }]}>◷</Text>
-          <View style={styles.grow}>
-            <Text style={[styles.rowTitle, { color: props.theme.titleColor }]}>Recently viewed</Text>
-            {reason ? <Text style={[styles.rowDetail, { color: props.theme.bodyColor }]}>{reason}</Text> : null}
-          </View>
-        </View>
-        <HeroImage props={props} item={items[0]} />
-        <Rows items={visibleItems} props={props} />
-      </Frame>
-    );
-  }
-  return (
-    <Frame
-      props={props}
-      titleKeys={["recommendationTitle", "itemName", "productTitle"]}
-      bodyKeys={["checkoutMessage", "availabilityMessage", "message"]}
-    >
-      <HeroImage props={props} item={items[0]} />
-      {bundle ? (
-        <View style={styles.rows}>
-          {visibleItems.filter((item) => primaryText(item)).slice(0, 8).map((item, index) => {
-            const active = selected.includes(index);
-            return (
-              <Pressable
-                key={`${primaryText(item)}-${index}`}
-                accessibilityRole="checkbox"
-                accessibilityState={{ checked: active }}
-                onPress={() => toggleBundleItem(index)}
-                style={[styles.row, { borderColor: props.theme.couponBorder }]}
-              >
-                <View style={[styles.confirmCheck, { borderColor: active ? props.theme.accent : props.theme.couponBorder, backgroundColor: active ? props.theme.accent : props.theme.cardBg }]}>
-                  {active ? <Text style={styles.confirmTick}>✓</Text> : null}
-                </View>
-                <View style={[styles.grow, { marginLeft: 10 }]}>
-                  <Text style={[styles.rowTitle, { color: props.theme.titleColor }]}>{primaryText(item)}</Text>
-                  {secondaryText(item) ? <Text style={[styles.rowDetail, { color: props.theme.bodyColor }]}>{secondaryText(item)}</Text> : null}
-                </View>
-              </Pressable>
-            );
-          })}
-          {firstText(ext, ["pricingLogic"]) ? <Text style={[styles.selectionNote, { color: props.theme.secondaryColor }]}>{firstText(ext, ["pricingLogic"])}</Text> : null}
-        </View>
-      ) : <Rows items={visibleItems} props={props} />}
-    </Frame>
-  );
-}
-
-function ChatContent(props: InAppBranchProps): ReactElement {
-  const ext = extOf(props);
-  const avatar = imageUri(props);
-  const message = firstText(ext, [
-    "assistantMessage",
-    "supportMessage",
-    "message",
-    "subject",
-  ]);
-  const suggestions = firstList(ext, [
-    "suggestedActions",
-    "contactMethods",
-    "actions",
-  ]);
-  return (
-    <Frame props={props} titleKeys={["assistantTitle", "subject", "agentName"]}>
-      <View style={styles.chatRow}>
-        {avatar ? (
-          <Image
-            accessibilityLabel="Assistant avatar"
-            resizeMode="cover"
-            source={{ uri: avatar }}
-            style={styles.chatAvatar}
-          />
-        ) : null}
-        {message ? (
-          <View
-            style={[styles.bubble, { backgroundColor: props.theme.couponBg }]}
-          >
-            <Text style={[styles.rowTitle, { color: props.theme.titleColor }]}>
-              {message}
-            </Text>
-          </View>
-        ) : null}
-      </View>
-      <Chips items={suggestions} props={props} />
-    </Frame>
-  );
-}
-
-function CalendarContent(props: InAppBranchProps): ReactElement {
-  const ext = extOf(props);
-  const webinar = variantOf(props) === "webinar_registration";
-  const event = firstText(ext, ["eventTitle", "bookingTitle", "offerMessage"]);
-  const when = firstText(ext, [
-    "dateTime",
-    "eventTime",
-    "renewalDateSource",
-    "timeWindow",
-  ]);
-  const slots = firstList(ext, ["slots", "dateTimeOptions", "calendarDays"]);
-  const labels = slots.map(primaryText).filter(Boolean).slice(0, 12);
-  const [selected, setSelected] = useState<string | null>(null);
-  const [registrationValues, setRegistrationValues] = useState<Record<string, string>>({});
-  const authoredRegistrationFields = firstList(ext, ["registrationFields"])
-    .map(primaryText)
-    .filter(Boolean);
-  const registrationFields = authoredRegistrationFields.length
-    ? authoredRegistrationFields
-    : webinar
-      ? [
-          ext.nameField ? (typeof ext.nameField === "string" ? ext.nameField : "Name") : "",
-          ext.emailField ? (typeof ext.emailField === "string" ? ext.emailField : "Email") : "",
-        ].filter(Boolean)
-      : [];
-  const choose = (label: string): void => {
-    setSelected(label);
-    props.onInteraction?.({
-      mechanic: variantOf(props) || "calendar",
-      phase: "decision",
-      value: label,
-      result: label,
-    });
-  };
-  return (
-    <Frame
-      props={props}
-      titleKeys={["eventTitle", "bookingTitle"]}
-      bodyKeys={["offerMessage", "eventTitle"]}
-      beforePrimary={() => props.onInteraction?.({
-        mechanic: variantOf(props) || "calendar",
-        phase: "resolved",
-        value: selected || undefined,
-        meta: {
-          ...(selected ? { selection: selected } : {}),
-          ...(registrationFields.length ? { fields: registrationValues } : {}),
-        },
-      })}
-    >
-      <View style={[styles.calendarCard, { borderColor: props.theme.accent }]}>
-        <Text style={[styles.calendarGlyph, { color: props.theme.accent }]}>
-          ▣
-        </Text>
-        <View style={styles.grow}>
-          {event ? (
-            <Text style={[styles.rowTitle, { color: props.theme.titleColor }]}>
-              {event}
-            </Text>
-          ) : null}
-          {when ? (
-            <Text style={[styles.rowDetail, { color: props.theme.bodyColor }]}>
-              {when}
-            </Text>
-          ) : null}
-        </View>
-      </View>
-      {registrationFields.map((label) => (
-        <View key={label} style={styles.field}>
-          <Text style={[styles.fieldLabel, { color: props.theme.titleColor }]}>{label}</Text>
-          <TextInput
-            value={registrationValues[label] ?? ""}
-            onChangeText={(value) => setRegistrationValues((current) => ({ ...current, [label]: value }))}
-            placeholder={label}
-            placeholderTextColor={props.theme.secondaryColor}
-            accessibilityLabel={label}
-            keyboardType={/email/i.test(label) ? "email-address" : "default"}
-            autoCapitalize={/email/i.test(label) ? "none" : "words"}
-            style={[styles.input, { borderColor: props.theme.couponBorder, color: props.theme.titleColor }]}
-          />
-        </View>
-      ))}
-      {labels.length ? (
-        <View style={styles.chips}>
-          {labels.map((label) => (
-            <Pressable
-              key={label}
-              accessibilityRole="radio"
-              accessibilityState={{ selected: selected === label }}
-              onPress={() => choose(label)}
-              style={[
-                styles.chip,
-                {
-                  backgroundColor: selected === label ? props.theme.couponBg : props.theme.cardBg,
-                  borderColor: selected === label ? props.theme.accent : props.theme.couponBorder,
-                },
-              ]}
-            >
-              <Text style={[styles.chipLabel, { color: selected === label ? props.theme.accent : props.theme.couponFg }]}>
-                {label}
-              </Text>
-            </Pressable>
-          ))}
-        </View>
-      ) : null}
-      {selected ? <Text style={[styles.selectionNote, { color: props.theme.secondaryColor }]}>Selected: {selected}</Text> : null}
-    </Frame>
-  );
-}
-
-function FormContent(props: InAppBranchProps): ReactElement {
-  const ext = extOf(props);
-  const variant = variantOf(props);
-  const fields = firstList(ext, [
-    "formFields",
-    "fields",
-    "registrationFields",
-    "consentCategories",
-    "documentRequirements",
-  ]);
-  const fallback = firstText(ext, [
-    "documentType",
-    "verificationType",
-    "permissionType",
-  ]);
-  const visible = (
-    fields.length ? fields : fallback ? [{ label: fallback }] : []
-  )
-    .filter((field) => primaryText(field))
-    .slice(0, 4);
-  const [values, setValues] = useState<Record<string, string>>({});
-  const [consents, setConsents] = useState<Record<string, boolean>>(() =>
-    Object.fromEntries(
-      visible.map((field, index) => {
-        const value = asRecord(field);
-        return [primaryText(field) || String(index), value.on === true || value.required === true];
-      }),
-    ),
-  );
-  const emit = (): void => {
-    props.onInteraction?.({
-      mechanic: variant || "form",
-      phase: "resolved",
-      meta: variant === "consent_center" ? { consents } : { fields: values },
-    });
-  };
-
-  if (variant === "document_upload_prompt") {
-    const fileTypes = firstList(ext, ["allowedFileTypes", "examples"]).map(primaryText).filter(Boolean);
-    return (
-      <Frame props={props} titleKeys={["documentType"]} bodyKeys={["instructions"]} showActions={false}>
-        <View style={[styles.uploadCard, { borderColor: props.theme.couponBorder, backgroundColor: props.theme.couponBg }]}>
-          <Text style={[styles.uploadGlyph, { color: props.theme.accent }]}>⇧</Text>
-          <Text style={[styles.rowTitle, { color: props.theme.titleColor }]}>Choose {firstText(ext, ["documentType"]) || "a document"}</Text>
-          {fileTypes.length ? <Text style={[styles.rowDetail, { color: props.theme.bodyColor }]}>{fileTypes.join(" · ")}</Text> : null}
-          {firstText(ext, ["maxFileSize"]) ? <Text style={[styles.rowDetail, { color: props.theme.bodyColor }]}>Maximum {firstText(ext, ["maxFileSize"])}</Text> : null}
-          <Pressable
-            accessibilityRole="button"
-            onPress={() => {
-              props.onInteraction?.({ mechanic: variant, phase: "started", value: "document_picker", meta: { allowedFileTypes: fileTypes } });
-              if (presentPrimaryOutcome(props)) return;
-              if (!props.spec.cta || props.spec.cta.action === "dismiss") props.onDismiss();
-              else props.onCta(props.spec.cta);
-            }}
-            style={[styles.hostAction, { backgroundColor: props.theme.accent }]}
-          >
-            <Text style={[styles.primaryLabel, { color: props.theme.ctaText }]}>{props.spec.cta?.label || "Select file"}</Text>
-          </Pressable>
-        </View>
-      </Frame>
-    );
-  }
-
-  if (variant === "id_verification_sheet") {
-    return (
-      <Frame props={props} titleKeys={["verificationType"]} bodyKeys={["instructions", "privacyText"]}>
-        <Rows items={fields.length ? fields : ["Prepare your ID", "Capture both sides", "Confirm your details"]} props={props} numbered />
-        {firstText(ext, ["privacyText"]) ? <Text style={[styles.legal, { color: props.theme.secondaryColor }]}>{firstText(ext, ["privacyText"])}</Text> : null}
-      </Frame>
-    );
-  }
-
-  if (variant === "consent_center") {
-    return (
-      <View style={styles.content}>
-        <Text style={[styles.title, { color: props.theme.titleColor }]}>{props.spec.title || "Your privacy choices"}</Text>
-        {props.spec.body ? <Text style={[styles.body, { color: props.theme.bodyColor }]}>{props.spec.body}</Text> : null}
-        {visible.map((field, index) => {
-          const label = primaryText(field) || `Consent ${index + 1}`;
-          const on = consents[label] === true;
-          return (
-            <Pressable
-              key={label}
-              accessibilityRole="switch"
-              accessibilityState={{ checked: on }}
-              onPress={() => setConsents((current) => ({ ...current, [label]: !on }))}
-              style={[styles.consentRow, { borderColor: props.theme.couponBorder }]}
-            >
-              <Text style={[styles.growText, { color: props.theme.titleColor }]}>{label}</Text>
-              <View style={[styles.switchTrack, { backgroundColor: on ? props.theme.accent : props.theme.couponBg }]}>
-                <View style={[styles.switchThumb, on && styles.switchThumbOn]} />
-              </View>
-            </Pressable>
-          );
-        })}
-        <Actions {...props} beforePrimary={emit} />
-      </View>
-    );
-  }
-  return (
-    <Frame
-      props={props}
-      titleKeys={["subject", "documentType", "verificationType"]}
-      bodyKeys={["instructions", "promptText", "privacyText"]}
-      showActions={false}
-    >
-      {visible.map((field, index) => {
-        const label = primaryText(field);
-        return (
-          <View key={`${label}-${index}`} style={styles.field}>
-            <Text
-              style={[styles.fieldLabel, { color: props.theme.titleColor }]}
-            >
-              {label}
-            </Text>
-            <TextInput
-              value={values[label] ?? ""}
-              onChangeText={(value) => setValues((current) => ({ ...current, [label]: value }))}
-              accessibilityLabel={label}
-              placeholder={label}
-              placeholderTextColor={props.theme.secondaryColor}
-              style={[
-                styles.input,
-                {
-                  borderColor: props.theme.couponBorder,
-                  color: props.theme.titleColor,
-                },
-              ]}
-            />
-          </View>
-        );
-      })}
-      <Actions {...props} beforePrimary={emit} />
-    </Frame>
-  );
-}
-
-function TrustContent(props: InAppBranchProps): ReactElement {
-  const ext = extOf(props);
-  const variant = variantOf(props);
-  const [confirmed, setConfirmed] = useState(false);
-  const [reviewRating, setReviewRating] = useState(0);
-  const glyphByVariant: Record<string, string> = {
-    confirmation_modal: "!",
-    referral_invite: "↗",
-    coupon_wallet: "%",
-    social_proof_popup: "★",
-    exit_intent_rescue: "↩",
-    time_of_day_offer: "◷",
-    weather_based_card: "☂",
-    security_alert: "⚠",
-    permissions_primer: "✓",
-    app_review_ask: "★",
-    smart_segment_preview: "◎",
-  };
-  const highlight = firstText(ext, [
-    "proofMessage",
-    "rewardMessage",
-    "benefitMessage",
-    "valueMessage",
-    "reviewMessage",
-    "segmentExplanation",
-    "alertTitle",
-    "discount",
-    "weatherConditionRule",
-    "timeWindow",
-    "permissionType",
-    "exitCondition",
-  ]);
-  const details = firstList(ext, [
-    "coupons",
-    "perks",
-    "perksList",
-    "reasonList",
-    "tags",
-  ]);
-  const firstCoupon = asRecord(firstList(ext, ["coupons"])[0]);
-  const code = firstText(ext, ["couponCode", "referralCode", "code"]) || firstText(firstCoupon, ["code", "couponCode"]);
-  const expiry = firstText(ext, ["expiryDate", "expiry"]) || firstText(firstCoupon, ["expiryDate", "expiry"]);
-  const terms = firstText(ext, ["terms"]) || firstList(ext, ["terms"]).map(primaryText).filter(Boolean).join(" · ");
-  const avatar = firstText(assetsOf(props), ["avatar"]);
-  const rating = typeof ext.rating === "number" ? Math.max(0, Math.min(5, Math.round(ext.rating))) : 0;
-  const reviewThreshold = typeof ext.ratingGate === "number"
-    ? Math.max(1, Math.min(5, Math.round(ext.ratingGate)))
-    : 4;
-  const submitReview = async (): Promise<void> => {
-    props.onInteraction?.({ mechanic: "app_review_ask", phase: "resolved", value: reviewRating, meta: { threshold: reviewThreshold } });
-    if (reviewRating >= reviewThreshold) {
-      const ran = await requestNativeStoreReview();
-      props.onInteraction?.({
-        mechanic: "app_review_ask",
-        phase: "completed",
-        value: reviewRating,
-        meta: { route: ran ? "store_review" : "fallback", threshold: reviewThreshold },
-      });
-      if (ran) {
-        if (presentPrimaryOutcome(props)) return;
-        props.onDismiss();
-        return;
-      }
-    }
-    if (presentPrimaryOutcome(props)) return;
-    if (!props.spec.cta || props.spec.cta.action === "dismiss") props.onDismiss();
-    else props.onCta(props.spec.cta);
-  };
-  return (
-    <Frame
-      props={props}
-      titleKeys={["alertTitle", "vipTitle", "newTierName"]}
-      bodyKeys={["message", "proofMessage", "valueMessage", "reviewMessage"]}
-      beforePrimary={variant === "app_review_ask" ? undefined : () => props.onInteraction?.({
-          mechanic: variant || "trust",
-          phase: "resolved",
-          value: firstText(ext, ["nativeTrigger", "ratingGate", "exitCondition", "secondaryAction"]),
-          meta: { variant, confirmed, context: ext },
-        })}
-      primaryDisabled={
-        (variant === "confirmation_modal" && Boolean(ext.checkboxConfirmation) && !confirmed) ||
-        (variant === "app_review_ask" && reviewRating === 0)
-      }
-      onPrimary={variant === "app_review_ask" ? () => { void submitReview(); } : undefined}
-    >
-      {highlight || glyphByVariant[variant] ? (
-        <View
-          style={[styles.highlight, { backgroundColor: props.theme.couponBg }]}
-        >
-          <Text style={[styles.trustGlyph, { color: props.theme.accent }]}>
-            {glyphByVariant[variant] || "✓"}
-          </Text>
-          <View style={styles.grow}>
-            {highlight ? <Text style={[styles.growText, { color: props.theme.titleColor }]}>{highlight}</Text> : null}
-            {variant === "security_alert" && firstText(ext, ["severity", "deviceLocation"]) ? (
-              <Text style={[styles.rowDetail, { color: props.theme.bodyColor }]}>{[firstText(ext, ["severity"]), firstText(ext, ["deviceLocation"])].filter(Boolean).join(" · ")}</Text>
-            ) : null}
-          </View>
-        </View>
-      ) : null}
-      {avatar ? <Image source={{ uri: avatar }} style={styles.avatar} accessibilityLabel="Customer avatar" /> : null}
-      {rating > 0 ? <Text style={[styles.stars, { color: props.theme.accent }]}>{"★".repeat(rating)}{"☆".repeat(5 - rating)}</Text> : null}
-      {variant === "app_review_ask" ? (
-        <View style={styles.reviewStars}>
-          {Array.from({ length: 5 }, (_, index) => (
-            <Pressable
-              key={index}
-              accessibilityRole="radio"
-              accessibilityLabel={`${index + 1} star`}
-              accessibilityState={{ selected: reviewRating === index + 1 }}
-              onPress={() => setReviewRating(index + 1)}
-              style={styles.reviewStarButton}
-            >
-              <Text style={[styles.reviewStar, { color: index < reviewRating ? "#F59E0B" : props.theme.couponBorder }]}>★</Text>
-            </Pressable>
-          ))}
-        </View>
-      ) : null}
-      {code ? (
-        <Pressable
-          accessibilityRole="button"
-          accessibilityLabel={`Coupon code ${code}`}
-          onPress={() => props.onInteraction?.({ mechanic: variant || "coupon", phase: "decision", value: code })}
-          style={[styles.codeCard, { borderColor: props.theme.accent }]}
-        >
-          <Text selectable style={[styles.codeText, { color: props.theme.couponFg }]}>{code}</Text>
-          <Text style={[styles.codeHint, { color: props.theme.secondaryColor }]}>Tap to select this offer</Text>
-        </Pressable>
-      ) : null}
-      {expiry ? <Text style={[styles.legal, { color: props.theme.secondaryColor }]}>Expires {expiry}</Text> : null}
-      {terms ? <Text style={[styles.legal, { color: props.theme.secondaryColor }]}>{terms}</Text> : null}
-      {variant === "confirmation_modal" && ext.checkboxConfirmation ? (
-        <Pressable
-          accessibilityRole="checkbox"
-          accessibilityState={{ checked: confirmed }}
-          onPress={() => {
-            setConfirmed((value) => !value);
-            props.onInteraction?.({ mechanic: "confirmation_modal", phase: "decision", value: !confirmed });
-          }}
-          style={[styles.confirmRow, { borderColor: props.theme.couponBorder }]}
-        >
-          <View style={[styles.confirmCheck, { borderColor: confirmed ? props.theme.accent : props.theme.couponBorder, backgroundColor: confirmed ? props.theme.accent : props.theme.cardBg }]}>
-            {confirmed ? <Text style={styles.confirmTick}>✓</Text> : null}
-          </View>
-          <Text style={[styles.growText, { color: props.theme.titleColor }]}>{typeof ext.checkboxConfirmation === "string" ? ext.checkboxConfirmation : "I understand and want to continue"}</Text>
-        </Pressable>
-      ) : null}
-      <Rows items={details} props={props} />
-    </Frame>
-  );
-}
-
-function LocationContent(props: InAppBranchProps): ReactElement {
-  const ext = extOf(props);
-  const source = { ...asRecord(assetsOf(props).location), ...ext };
-  const place = firstText(source, [
-    "branchName",
-    "geoFenceLocation",
-    "locationRule",
-  ]);
-  const detail = firstText(source, ["arrivalMessage", "distance", "openingHours", "address"]);
-  return (
-    <Frame
-      props={props}
-      titleKeys={["branchName"]}
-      bodyKeys={["arrivalMessage", "message"]}
-    >
-      <View style={[styles.map, { backgroundColor: props.theme.couponBg }]}>
-        <View style={[styles.mapLine, styles.mapLineOne]} />
-        <View style={[styles.mapLine, styles.mapLineTwo]} />
-        <Text style={[styles.pin, { color: props.theme.accent }]}>●</Text>
-      </View>
-      {place || detail ? (
-        <View style={styles.locationCopy}>
-          <Text style={[styles.rowTitle, { color: props.theme.titleColor }]}>
-            {place || "Nearby location"}
-          </Text>
-          {detail ? (
-            <Text style={[styles.rowDetail, { color: props.theme.bodyColor }]}>
-              {detail}
-            </Text>
-          ) : null}
-        </View>
-      ) : null}
-    </Frame>
-  );
-}
-
-function normalizedProgress(value: unknown): number | null {
-  if (typeof value !== "number" || !Number.isFinite(value)) return null;
-  return Math.max(0, Math.min(100, value <= 1 ? value * 100 : value));
-}
-
-function InsightContent(props: InAppBranchProps): ReactElement {
-  const ext = extOf(props);
-  const items = firstList(ext, ["digestItems", "contentBlocks", "metrics"]);
-  const metric = firstText(ext, ["metric", "progressValue", "timer"]);
-  const progress = normalizedProgress(
-    firstValue(ext, ["progress", "progressBar", "progressValue"]),
-  );
-  return (
-    <Frame
-      props={props}
-      titleKeys={["insightTitle", "digestTitle"]}
-      bodyKeys={["message", "motivationalText"]}
-    >
-      {metric ? (
-        <Text style={[styles.metric, { color: props.theme.accent }]}>
-          {metric}
-        </Text>
-      ) : null}
-      {progress !== null ? (
-        <View style={[styles.track, { backgroundColor: props.theme.couponBg }]}>
-          <View
-            style={[
-              styles.progress,
-              { backgroundColor: props.theme.accent, width: `${progress}%` },
-            ]}
-          />
-        </View>
-      ) : null}
-      <Rows items={items} props={props} />
-    </Frame>
-  );
-}
-
-function MediaContent(props: InAppBranchProps): ReactElement {
-  const ext = extOf(props);
-  const variant = variantOf(props);
-  const video = firstText(assetsOf(props), ["video"]);
-  const mediaHeight = resolveInAppMediaHeight(props.spec, 132, 320);
-  if (variant === "rich_modal") {
-    const bulletList = asList(ext.bulletList).filter(primaryText);
-    const features = bulletList.length
-      ? bulletList
-      : asList(ext.benefits).filter(primaryText);
-    return (
-      <Frame
-        props={props}
-        badge={firstText(ext, ["badge", "urgencyBadge", "eyebrow"])}
-        titleKeys={["featureName"]}
-        bodyKeys={["valueProposition", "message"]}
-      >
-        <FeatureChecklist items={features} props={props} />
-      </Frame>
-    );
-  }
-  const sections = firstList(ext, [
-    "contentSections",
-    "bulletList",
-    "benefits",
-  ]);
-  if (variant === "split_modal") {
-    const title = props.spec.title || firstText(ext, ["featureName"]);
-    const body = props.spec.body || firstText(ext, ["valueProposition", "message"]);
-    return (
-      <View style={styles.content}>
-        <View style={styles.split}>
-          <View style={styles.splitMedia}>
-            <HeroImage props={props} />
-            {!imageUri(props) ? (
-              <View style={[styles.splitFallback, { backgroundColor: props.theme.couponBg }]}>
-                <Text style={[styles.splitGlyph, { color: props.theme.accent }]}>◆</Text>
-              </View>
-            ) : null}
-          </View>
-          <View style={styles.splitCopy}>
-            {title ? <Text style={[styles.title, { color: props.theme.titleColor }]}>{title}</Text> : null}
-            {body ? <Text style={[styles.body, { color: props.theme.bodyColor }]}>{body}</Text> : null}
-            <Rows items={sections} props={props} />
-          </View>
-        </View>
-        <Actions {...props} />
-      </View>
-    );
-  }
-  return (
-    <Frame
-      props={props}
-      titleKeys={["featureName", "authorLabel"]}
-      bodyKeys={["valueProposition", "message"]}
-    >
-      <HeroImage props={props} />
-      {video && !imageUri(props) ? (
-        <View
-          style={[
-            styles.video,
-            { backgroundColor: props.theme.couponBg },
-            mediaHeight === undefined ? null : { minHeight: mediaHeight },
-          ]}
-        >
-          <Text style={[styles.play, { color: props.theme.accent }]}>▶</Text>
-          <Text style={[styles.rowDetail, { color: props.theme.bodyColor }]}>
-            Video opens through the campaign action
-          </Text>
-        </View>
-      ) : null}
-      <Rows items={sections} props={props} />
-    </Frame>
-  );
-}
-
-function ListContent(props: InAppBranchProps): ReactElement {
-  const ext = extOf(props);
-  const variant = variantOf(props);
-  const items = firstList(ext, [
-    "bulletList",
-    "contentBlocks",
-    "steps",
-    "actions",
-    "newFeatures",
-    "expandedContent",
-  ]);
-  if (variant === "welcome_back_card") {
-    const name = firstText(ext, ["userNameToken", "userName"]);
-    return (
-      <Frame
-        props={props}
-        titleKeys={["welcomeTitle"]}
-        bodyKeys={["updateSummary", "message"]}
-      >
-        <View style={[styles.welcomeHero, { backgroundColor: props.theme.couponBg }]}>
-          <Text style={styles.welcomeEmoji}>👋</Text>
-          <Text style={[styles.welcomeCopy, { color: props.theme.titleColor }]}>
-            {name ? `Good to see you, ${name}` : "Good to see you again"}
-          </Text>
-        </View>
-        <Rows items={items} props={props} />
-      </Frame>
-    );
-  }
-  if (variant === "empty_state_prompt") {
-    return (
-      <View style={[styles.content, styles.emptyState]}>
-        {imageUri(props) ? (
-          <HeroImage props={props} />
-        ) : (
-          <View style={[styles.emptyIllustration, { backgroundColor: props.theme.couponBg }]}>
-            <Text style={[styles.emptyGlyph, { color: props.theme.accent }]}>＋</Text>
-          </View>
-        )}
-        <Text style={[styles.title, styles.centerText, { color: props.theme.titleColor }]}>
-          {props.spec.title || "Nothing here yet"}
-        </Text>
-        {props.spec.body ? <Text style={[styles.body, styles.centerText, { color: props.theme.bodyColor }]}>{props.spec.body}</Text> : null}
-        <Actions {...props} />
-      </View>
-    );
-  }
-  if (variant === "multi_cta_decision_hub") {
-    const actions = items.slice(0, 6);
-    return (
-      <View style={styles.content}>
-        {props.spec.title ? <Text style={[styles.title, { color: props.theme.titleColor }]}>{props.spec.title}</Text> : null}
-        {props.spec.body ? <Text style={[styles.body, { color: props.theme.bodyColor }]}>{props.spec.body}</Text> : null}
-        <View style={styles.decisionList}>
-          {actions.map((item, index) => {
-            const action = asRecord(item);
-            const label = primaryText(item) || `Option ${index + 1}`;
-            const recommended = action.recommended === true || action.key === ext.recommendedAction;
-            return (
-              <Pressable
-                key={`${label}-${index}`}
-                accessibilityRole="button"
-                onPress={() => {
-                  props.onInteraction?.({ mechanic: "multi_cta_decision_hub", phase: "decision", value: label, meta: { index, action } });
-                  const value = firstText(action, ["value", "deepLink", "url"]);
-                  if (value) props.onCta({ label, action: "link", deepLink: value });
-                  else if (action.action === "dismiss" && props.onOutcome) {
-                    props.onOutcome({ fallback: { kind: "dismiss" } });
-                  }
-                  else if (action.action === "dismiss") props.onDismiss();
-                  else if (props.spec.cta) props.onCta(props.spec.cta);
-                  else if (!presentPrimaryOutcome(props)) props.onDismiss();
-                }}
-                style={[styles.decisionButton, { borderColor: recommended ? props.theme.accent : props.theme.couponBorder, backgroundColor: recommended ? props.theme.couponBg : props.theme.cardBg }]}
-              >
-                <Text style={[styles.growText, { color: props.theme.titleColor }]}>{label}</Text>
-                {recommended ? <Text style={[styles.recommended, { color: props.theme.accent }]}>Recommended</Text> : null}
-                <Text style={[styles.decisionArrow, { color: props.theme.accent }]}>›</Text>
-              </Pressable>
-            );
-          })}
-        </View>
-      </View>
-    );
-  }
-  return (
-    <Frame
-      props={props}
-      titleKeys={["expandedTitle", "peekLabel", "welcomeTitle"]}
-      bodyKeys={["expandedBody", "updateSummary", "message"]}
-    >
-      <Rows items={items} props={props} numbered />
-    </Frame>
-  );
-}
-
-const CONTENT_RENDERERS: Readonly<Record<ContentFamily, ContentRenderer>> = {
-  plans: PlansContent,
-  products: ProductsContent,
-  chat: ChatContent,
-  calendar: CalendarContent,
-  form: FormContent,
-  trust: TrustContent,
-  location: LocationContent,
-  insight: InsightContent,
-  media: MediaContent,
-  list: ListContent,
-};
-
-/**
- * Only variants with structured container content appear here. Basic layout
- * surfaces intentionally resolve to null and use EngageInAppView's generic body.
- * Canonical mechanic variants are intentionally absent as well.
- */
-const VARIANTS_BY_FAMILY: Readonly<Record<ContentFamily, readonly string[]>> = {
-  plans: [
-    "upgrade_nudger",
-    "renewal_reminder",
-    "trial_conversion",
-    "vip_unlock",
-    "loyalty_tier_upgrade",
-    "compare_plans_sheet",
-    "dynamic_paywall",
-  ],
-  products: [
-    "cart_recovery",
-    "browse_recovery",
-    "price_drop_alert",
-    "back_in_stock",
-    "reorder_reminder",
-    "cross_sell_recommendation",
-    "checkout_accelerator",
-    "bundle_builder",
-  ],
-  chat: [
-    "floating_bubble",
-    "ai_assistant_nudge",
-    "smart_inbox_message",
-    "support_escalation",
-    "chat_handoff_prompt",
-  ],
-  calendar: [
-    "calendar_picker_offer",
-    "live_event_banner",
-    "webinar_registration",
-    "appointment_booker",
-  ],
-  form: [
-    "waitlist_joiner",
-    "rich_form_modal",
-    "document_upload_prompt",
-    "id_verification_sheet",
-    "consent_center",
-  ],
-  trust: [
-    "confirmation_modal",
-    "referral_invite",
-    "coupon_wallet",
-    "social_proof_popup",
-    "exit_intent_rescue",
-    "time_of_day_offer",
-    "weather_based_card",
-    "security_alert",
-    "permissions_primer",
-    "app_review_ask",
-    "smart_segment_preview",
-  ],
-  location: ["location_based_prompt", "geo_fenced_arrival_card"],
-  insight: [
-    "sticky_footer_bar",
-    "embedded_panel",
-    "personal_finance_insight",
-    "personalized_digest",
-  ],
-  media: [
-    "rich_modal",
-    "media_modal",
-    "split_modal",
-    "full_screen_takeover",
-    "editorial_full_screen",
-    "feature_discovery",
-  ],
-  list: [
-    "multi_step_bottom_sheet",
-    "center_drawer",
-    "peek_card",
-    "welcome_back_card",
-    "empty_state_prompt",
-    "multi_cta_decision_hub",
-  ],
-};
-
-const FAMILY_BY_VARIANT: Readonly<Record<string, ContentFamily>> = (() => {
-  const result: Record<string, ContentFamily> = {};
-  for (const family of Object.keys(VARIANTS_BY_FAMILY) as ContentFamily[]) {
-    for (const variantKey of VARIANTS_BY_FAMILY[family]) {
-      result[variantKey] = family;
-    }
-  }
-  return result;
-})();
-
-/** Resolve reusable content for a container variant, or null for generic/mechanic keys. */
-export function resolveVariantContent(
-  variantKey?: string,
-): ((props: InAppBranchProps) => ReactElement) | null {
-  if (
-    !variantKey ||
-    !Object.prototype.hasOwnProperty.call(FAMILY_BY_VARIANT, variantKey)
-  ) {
-    return null;
-  }
-  return CONTENT_RENDERERS[FAMILY_BY_VARIANT[variantKey]!] ?? null;
-}
-
-const styles = {
-  content: { width: "100%" },
-  badge: {
-    alignSelf: "flex-start",
-    borderRadius: 999,
-    marginBottom: 6,
-    paddingHorizontal: 9,
-    paddingVertical: 3,
-  },
-  badgeLabel: { fontSize: 10, fontWeight: "800" },
-  title: { fontSize: 19, fontWeight: "800", lineHeight: 25, marginBottom: 6 },
-  body: { fontSize: 14, lineHeight: 20, marginBottom: 10 },
-  actions: {
-    alignItems: "center",
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 8,
-    marginTop: 14,
-  },
-  reverse: { flexDirection: "row-reverse" },
-  primaryButton: {
-    borderRadius: 12,
-    flexBasis: 140,
-    flexGrow: 1,
-    flexShrink: 1,
-    maxWidth: "100%",
-    paddingHorizontal: 18,
-    paddingVertical: 11,
-  },
-  primaryLabel: {
-    flexShrink: 1,
-    fontSize: 15,
-    fontWeight: "700",
-    textAlign: "center",
-  },
-  secondaryButton: {
-    flexShrink: 1,
-    maxWidth: "100%",
-    paddingHorizontal: 14,
-    paddingVertical: 11,
-  },
-  secondaryLabel: {
-    flexShrink: 1,
-    fontSize: 14,
-    fontWeight: "600",
-    textAlign: "center",
-  },
-  rows: { marginTop: 6 },
-  featureList: { marginTop: 4 },
-  featureRow: {
-    alignItems: "center",
-    borderBottomWidth: 1,
-    flexDirection: "row",
-    paddingVertical: 8,
-  },
-  featureCheck: {
-    alignItems: "center",
-    borderRadius: 11,
-    height: 22,
-    justifyContent: "center",
-    marginRight: 10,
-    width: 22,
-  },
-  featureTick: { fontSize: 12, fontWeight: "900" },
-  featureLabel: { flex: 1, fontSize: 14, fontWeight: "700", lineHeight: 19 },
-  row: {
-    alignItems: "center",
-    borderBottomWidth: 1,
-    flexDirection: "row",
-    paddingVertical: 9,
-  },
-  rowMark: { fontSize: 15, fontWeight: "800", marginRight: 10, minWidth: 14 },
-  rowTitle: { fontSize: 14, fontWeight: "700", lineHeight: 19 },
-  rowDetail: { fontSize: 12, lineHeight: 17, marginTop: 2 },
-  grow: { flex: 1 },
-  growText: { flex: 1, fontSize: 14, fontWeight: "700", lineHeight: 19 },
-  chips: { flexDirection: "row", flexWrap: "wrap", marginTop: 8 },
-  chip: {
-    borderRadius: 999,
-    borderWidth: 1,
-    marginBottom: 6,
-    marginRight: 6,
-    maxWidth: "100%",
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-  },
-  chipLabel: { flexShrink: 1, fontSize: 12, fontWeight: "700" },
-  heroImage: {
-    borderRadius: 12,
-    height: 132,
-    marginVertical: 8,
-    width: "100%",
-  },
-  chatRow: { alignItems: "flex-end", flexDirection: "row", marginTop: 4 },
-  chatAvatar: {
-    borderRadius: 24,
-    flexShrink: 0,
-    height: 48,
-    marginVertical: 8,
-    width: 48,
-  },
-  bubble: { borderRadius: 14, flex: 1, marginLeft: 8, padding: 12 },
-  calendarCard: {
-    alignItems: "center",
-    borderRadius: 12,
-    borderWidth: 1,
-    flexDirection: "row",
-    marginTop: 6,
-    padding: 12,
-  },
-  calendarGlyph: { fontSize: 30, fontWeight: "800", marginRight: 12 },
-  field: { marginTop: 8 },
-  fieldLabel: { fontSize: 12, fontWeight: "700", marginBottom: 5 },
-  input: { borderRadius: 10, borderWidth: 1, fontSize: 14, padding: 10 },
-  split: { flexDirection: "row", flexWrap: "wrap", alignItems: "stretch", gap: 14 },
-  splitMedia: { flexBasis: 220, flexGrow: 0.9, flexShrink: 1, minHeight: 170, minWidth: 0 },
-  splitCopy: { flexBasis: 220, flexGrow: 1, flexShrink: 1, justifyContent: "center", minWidth: 0 },
-  splitFallback: { flex: 1, minHeight: 170, borderRadius: 12, alignItems: "center", justifyContent: "center" },
-  splitGlyph: { fontSize: 42, fontWeight: "900" },
-  selectionNote: { fontSize: 11, marginTop: 4 },
-  uploadCard: { borderWidth: 1.5, borderStyle: "dashed", borderRadius: 14, padding: 16, alignItems: "center", marginTop: 8 },
-  uploadGlyph: { fontSize: 34, fontWeight: "900", marginBottom: 6 },
-  hostAction: { borderRadius: 10, paddingHorizontal: 18, paddingVertical: 10, marginTop: 12 },
-  legal: { fontSize: 11, lineHeight: 16, marginTop: 8 },
-  consentRow: { flexDirection: "row", alignItems: "center", borderBottomWidth: 1, paddingVertical: 12 },
-  switchTrack: { width: 44, height: 26, borderRadius: 13, padding: 3 },
-  switchThumb: { width: 20, height: 20, borderRadius: 10, backgroundColor: "#FFFFFF" },
-  switchThumbOn: { alignSelf: "flex-end" },
-  decisionList: { marginTop: 8, gap: 8 },
-  decisionButton: { flexDirection: "row", alignItems: "center", borderWidth: 1.5, borderRadius: 12, padding: 13 },
-  recommended: { fontSize: 10, fontWeight: "800", marginRight: 8 },
-  decisionArrow: { fontSize: 24, lineHeight: 24 },
-  welcomeHero: { flexDirection: "row", alignItems: "center", borderRadius: 14, padding: 14, marginTop: 4 },
-  welcomeEmoji: { fontSize: 34, marginRight: 12 },
-  welcomeCopy: { flex: 1, fontSize: 14, fontWeight: "800", lineHeight: 19 },
-  emptyState: { alignItems: "stretch" },
-  emptyIllustration: { height: 132, borderRadius: 16, alignItems: "center", justifyContent: "center", marginBottom: 14 },
-  emptyGlyph: { fontSize: 46, fontWeight: "300" },
-  centerText: { textAlign: "center" },
-  browseHeader: { flexDirection: "row", alignItems: "center", borderRadius: 12, padding: 12, marginTop: 4 },
-  browseClock: { fontSize: 28, fontWeight: "800", marginRight: 10 },
-  highlight: {
-    alignItems: "center",
-    borderRadius: 12,
-    flexDirection: "row",
-    marginTop: 5,
-    padding: 12,
-  },
-  trustGlyph: { fontSize: 21, fontWeight: "900", marginRight: 10 },
-  avatar: { width: 42, height: 42, borderRadius: 21, alignSelf: "center", marginTop: 8 },
-  stars: { fontSize: 18, letterSpacing: 2, textAlign: "center", marginTop: 6 },
-  codeCard: { borderWidth: 1.5, borderStyle: "dashed", borderRadius: 12, padding: 12, marginTop: 8, alignItems: "center" },
-  codeText: { fontSize: 20, fontWeight: "900", letterSpacing: 2 },
-  codeHint: { fontSize: 10, marginTop: 4 },
-  confirmRow: { flexDirection: "row", alignItems: "center", gap: 10, borderWidth: 1, borderRadius: 10, padding: 11, marginTop: 8 },
-  confirmCheck: { width: 22, height: 22, borderRadius: 6, borderWidth: 1.5, alignItems: "center", justifyContent: "center" },
-  confirmTick: { color: "#FFFFFF", fontSize: 12, fontWeight: "900" },
-  reviewStars: { flexDirection: "row", flexWrap: "wrap", justifyContent: "center", gap: 7, marginTop: 10 },
-  reviewStarButton: { alignItems: "center", justifyContent: "center", minHeight: 44, minWidth: 44 },
-  reviewStar: { fontSize: 34 },
-  map: { borderRadius: 12, height: 108, marginTop: 5, overflow: "hidden" },
-  mapLine: {
-    backgroundColor: "rgba(255,255,255,0.72)",
-    height: 8,
-    position: "absolute",
-    width: "120%",
-  },
-  mapLineOne: { left: -20, top: 30, transform: [{ rotate: "8deg" }] },
-  mapLineTwo: { left: -25, top: 72, transform: [{ rotate: "-12deg" }] },
-  pin: { fontSize: 30, left: "46%", position: "absolute", top: 34 },
-  locationCopy: { paddingTop: 9 },
-  metric: { fontSize: 28, fontWeight: "900", marginTop: 4 },
-  track: { borderRadius: 999, height: 9, marginTop: 8, overflow: "hidden" },
-  progress: { borderRadius: 999, height: "100%" },
-  video: { alignItems: "center", borderRadius: 12, marginTop: 6, padding: 18 },
-  play: { fontSize: 28, marginBottom: 4 },
-} satisfies Record<string, ViewStyle | TextStyle | ImageStyle>;
+/**
+ * Native, composable content blocks for container-only in-app variants.
+ *
+ * Layout branches still own mounting. Interactive mechanics still live in the
+ * mechanic resolver. This module only turns heterogeneous registry `ext` data
+ * into a small set of reusable visual families.
+ */
+
+import React, { useState, type ReactElement, type ReactNode } from "react";
+import {
+  Image,
+  Pressable,
+  Text,
+  TextInput,
+  View,
+  type ImageStyle,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import type { InAppBranchProps } from "./EngageInAppView";
+import { resolveInAppMediaHeight } from "./engageMediaSizing";
+import { inAppOutcomeTerminalForCta } from "./engageOutcome";
+import { requestNativeStoreReview } from "./engageStoreReviewBridge";
+
+type Dict = Record<string, unknown>;
+type ContentRenderer = (props: InAppBranchProps) => ReactElement;
+type ContentFamily =
+  | "plans"
+  | "products"
+  | "chat"
+  | "calendar"
+  | "form"
+  | "trust"
+  | "location"
+  | "insight"
+  | "media"
+  | "list";
+
+const asRecord = (value: unknown): Dict =>
+  value !== null && typeof value === "object" && !Array.isArray(value)
+    ? (value as Dict)
+    : {};
+
+const asText = (value: unknown): string => {
+  if (typeof value === "string") return value.trim();
+  return typeof value === "number" && Number.isFinite(value)
+    ? String(value)
+    : "";
+};
+
+const firstText = (source: Dict, keys: readonly string[]): string => {
+  for (const key of keys) {
+    const value = asText(source[key]);
+    if (value) return value;
+  }
+  return "";
+};
+
+const firstValue = (source: Dict, keys: readonly string[]): unknown => {
+  for (const key of keys) {
+    if (source[key] !== undefined && source[key] !== null) return source[key];
+  }
+  return undefined;
+};
+
+const asList = (value: unknown): unknown[] => {
+  if (Array.isArray(value)) return value;
+  if (typeof value !== "string") return [];
+  return value
+    .split(/\r?\n|,/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+};
+
+const firstList = (source: Dict, keys: readonly string[]): unknown[] =>
+  asList(firstValue(source, keys));
+
+const primaryText = (item: unknown): string => {
+  const value = asRecord(item);
+  return (
+    asText(item) ||
+    firstText(value, [
+      "label",
+      "title",
+      "heading",
+      "name",
+      "prompt",
+      "subject",
+      "eventTitle",
+      "code",
+      "key",
+    ])
+  );
+};
+
+const secondaryText = (item: unknown): string =>
+  firstText(asRecord(item), [
+    "price",
+    "value",
+    "description",
+    "body",
+    "message",
+    "dateTime",
+    "eventTime",
+    "dueDate",
+    "status",
+  ]);
+
+const extOf = (props: InAppBranchProps): Dict => asRecord(props.spec.ext);
+const assetsOf = (props: InAppBranchProps): Dict => asRecord(props.spec.assets);
+const variantOf = (props: InAppBranchProps): string => props.variantKey ?? "";
+
+const presentPrimaryOutcome = (props: InAppBranchProps): boolean => {
+  if (!props.onOutcome) return false;
+  props.onOutcome({
+    fallback: inAppOutcomeTerminalForCta(props.spec.cta),
+  });
+  return true;
+};
+
+function textDirection(theme: InAppBranchProps["theme"]): TextStyle {
+  return theme.rtl ? { writingDirection: "rtl", textAlign: "right" } : {};
+}
+
+function Actions({
+  beforePrimary,
+  primaryDisabled = false,
+  onPrimary,
+  ...props
+}: InAppBranchProps & {
+  beforePrimary?: () => void;
+  primaryDisabled?: boolean;
+  onPrimary?: () => void;
+}): ReactElement | null {
+  const { cta, secondaryCta } = props.spec;
+  if (!cta && !secondaryCta) return null;
+  return (
+    <View style={[styles.actions, props.theme.rtl && styles.reverse]}>
+      {secondaryCta ? (
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={secondaryCta.label}
+          onPress={props.onDismiss}
+          style={styles.secondaryButton}
+        >
+          <Text
+            style={[
+              styles.secondaryLabel,
+              { color: props.theme.secondaryColor },
+            ]}
+          >
+            {secondaryCta.label}
+          </Text>
+        </Pressable>
+      ) : null}
+      {cta ? (
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={cta.label}
+          accessibilityState={{ disabled: primaryDisabled }}
+          disabled={primaryDisabled}
+          onPress={() => {
+            beforePrimary?.();
+            if (onPrimary) onPrimary();
+            else if (presentPrimaryOutcome(props)) return;
+            else if (cta.action === "dismiss") props.onDismiss();
+            else props.onCta(cta);
+          }}
+          style={[
+            styles.primaryButton,
+            { backgroundColor: props.theme.accent, opacity: primaryDisabled ? 0.5 : 1 },
+          ]}
+        >
+          <Text style={[styles.primaryLabel, { color: props.theme.ctaText }]}>
+            {cta.label}
+          </Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+function Frame({
+  props,
+  badge,
+  titleKeys = [],
+  bodyKeys = [],
+  children,
+  showActions = true,
+  beforePrimary,
+  primaryDisabled,
+  onPrimary,
+}: {
+  props: InAppBranchProps;
+  badge?: string;
+  titleKeys?: readonly string[];
+  bodyKeys?: readonly string[];
+  children?: ReactNode;
+  showActions?: boolean;
+  beforePrimary?: () => void;
+  primaryDisabled?: boolean;
+  onPrimary?: () => void;
+}): ReactElement {
+  const ext = extOf(props);
+  const title = props.spec.title || firstText(ext, titleKeys);
+  const body = firstText(ext, bodyKeys) || props.spec.body;
+  return (
+    <View style={styles.content}>
+      {badge ? (
+        <View style={[styles.badge, { backgroundColor: props.theme.accent }]}>
+          <Text style={[styles.badgeLabel, { color: props.theme.ctaText }]}>
+            {badge}
+          </Text>
+        </View>
+      ) : null}
+      {title ? (
+        <Text
+          style={[
+            styles.title,
+            { color: props.theme.titleColor },
+            textDirection(props.theme),
+          ]}
+        >
+          {title}
+        </Text>
+      ) : null}
+      <Text
+        style={[
+          styles.body,
+          { color: props.theme.bodyColor },
+          textDirection(props.theme),
+        ]}
+      >
+        {body}
+      </Text>
+      {children}
+      {showActions ? (
+        <Actions
+          {...props}
+          beforePrimary={beforePrimary}
+          primaryDisabled={primaryDisabled}
+          onPrimary={onPrimary}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+function FeatureChecklist({
+  items,
+  props,
+}: {
+  items: unknown[];
+  props: InAppBranchProps;
+}): ReactElement | null {
+  const labels = items.map(primaryText).filter(Boolean).slice(0, 6);
+  if (labels.length === 0) return null;
+  return (
+    <View style={styles.featureList}>
+      {labels.map((label, index) => (
+        <View
+          key={`${label}-${index}`}
+          style={[
+            styles.featureRow,
+            { borderColor: props.theme.couponBorder },
+          ]}
+        >
+          <View
+            style={[
+              styles.featureCheck,
+              { backgroundColor: props.theme.couponBg },
+            ]}
+          >
+            <Text style={[styles.featureTick, { color: props.theme.accent }]}>✓</Text>
+          </View>
+          <Text
+            style={[
+              styles.featureLabel,
+              { color: props.theme.titleColor },
+              textDirection(props.theme),
+            ]}
+          >
+            {label}
+          </Text>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+function Rows({
+  items,
+  props,
+  numbered = false,
+}: {
+  items: unknown[];
+  props: InAppBranchProps;
+  numbered?: boolean;
+}): ReactElement | null {
+  const visible = items.filter((item) => primaryText(item)).slice(0, 6);
+  if (visible.length === 0) return null;
+  return (
+    <View style={styles.rows}>
+      {visible.map((item, index) => {
+        const label = primaryText(item);
+        const detail = secondaryText(item);
+        return (
+          <View
+            key={`${label}-${index}`}
+            style={[styles.row, { borderColor: props.theme.couponBorder }]}
+          >
+            <Text style={[styles.rowMark, { color: props.theme.accent }]}>
+              {numbered ? index + 1 : "•"}
+            </Text>
+            <View style={styles.grow}>
+              <Text
+                style={[styles.rowTitle, { color: props.theme.titleColor }]}
+              >
+                {label}
+              </Text>
+              {detail ? (
+                <Text
+                  style={[styles.rowDetail, { color: props.theme.bodyColor }]}
+                >
+                  {detail}
+                </Text>
+              ) : null}
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+function Chips({
+  items,
+  props,
+}: {
+  items: unknown[];
+  props: InAppBranchProps;
+}): ReactElement | null {
+  const visible = items.map(primaryText).filter(Boolean).slice(0, 8);
+  if (visible.length === 0) return null;
+  return (
+    <View style={styles.chips}>
+      {visible.map((label, index) => (
+        <View
+          key={`${label}-${index}`}
+          style={[
+            styles.chip,
+            {
+              backgroundColor: props.theme.couponBg,
+              borderColor: props.theme.couponBorder,
+            },
+          ]}
+        >
+          <Text style={[styles.chipLabel, { color: props.theme.couponFg }]}>
+            {label}
+          </Text>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+function imageUri(props: InAppBranchProps, item?: unknown): string {
+  const itemRecord = asRecord(item);
+  const assets = assetsOf(props);
+  return (
+    firstText(itemRecord, ["image", "imageUrl", "thumbnail", "posterImage"]) ||
+    props.spec.imageUrl ||
+    firstText(assets, ["image", "backgroundImage", "avatar", "icon"])
+  );
+}
+
+function HeroImage({
+  props,
+  item,
+}: {
+  props: InAppBranchProps;
+  item?: unknown;
+}) {
+  const uri = imageUri(props, item);
+  if (!uri) return null;
+  const mediaHeight = resolveInAppMediaHeight(props.spec, 132, 320);
+  return (
+    <Image
+      accessibilityRole="image"
+      source={{ uri }}
+      resizeMode="cover"
+      style={[
+        styles.heroImage,
+        mediaHeight === undefined ? null : { height: mediaHeight },
+      ]}
+    />
+  );
+}
+
+function PlansContent(props: InAppBranchProps): ReactElement {
+  const ext = extOf(props);
+  const plans = firstList(ext, ["plans", "featureMatrix"]);
+  const benefits = firstList(ext, ["benefits", "perks", "perksList"]);
+  const fallbackPlan = {
+    name: firstText(ext, ["planName", "newTierName", "tierName", "vipTitle"]),
+    price: firstText(ext, ["price", "discount", "expiry", "trialEndDate"]),
+  };
+  return (
+    <Frame
+      props={props}
+      titleKeys={["upgradeTitle", "vipTitle", "newTierName"]}
+      bodyKeys={["benefitMessage", "message", "renewalDateSource"]}
+    >
+      <Rows items={plans.length ? plans : [fallbackPlan]} props={props} />
+      <Chips items={benefits} props={props} />
+    </Frame>
+  );
+}
+
+function ProductsContent(props: InAppBranchProps): ReactElement {
+  const ext = extOf(props);
+  const bundle = variantOf(props) === "bundle_builder";
+  const browse = variantOf(props) === "browse_recovery";
+  const authoredItems = firstList(ext, [
+    "products",
+    "itemList",
+    "productCards",
+    "bundleItems",
+    "cartSummary",
+    "recommendations",
+  ]);
+  const assetItems = asList(assetsOf(props).products);
+  const items = authoredItems.length ? authoredItems : assetItems;
+  const fallback = {
+    name: firstText(ext, ["itemName", "productTitle", "checkoutMessage", "cartSource", "browseSource"]),
+    price: firstText(ext, ["newPrice", "price", "oldPrice", "discount", "pricingLogic"]),
+  };
+  const visibleItems = items.length ? items : [fallback];
+  const [selected, setSelected] = useState<number[]>([]);
+  const toggleBundleItem = (index: number): void => {
+    const next = selected.includes(index)
+      ? selected.filter((value) => value !== index)
+      : [...selected, index];
+    setSelected(next);
+    props.onInteraction?.({
+      mechanic: "bundle_builder",
+      phase: "decision",
+      value: next.length,
+      meta: { selected: next, items: next.map((value) => primaryText(visibleItems[value])).filter(Boolean) },
+    });
+  };
+  if (browse) {
+    const reason = firstText(ext, ["recommendation", "category", "reasonText"]);
+    return (
+      <Frame props={props} titleKeys={["recommendationTitle"]} bodyKeys={["message"]}>
+        <View style={[styles.browseHeader, { backgroundColor: props.theme.couponBg }]}>
+          <Text style={[styles.browseClock, { color: props.theme.accent }]}>◷</Text>
+          <View style={styles.grow}>
+            <Text style={[styles.rowTitle, { color: props.theme.titleColor }]}>Recently viewed</Text>
+            {reason ? <Text style={[styles.rowDetail, { color: props.theme.bodyColor }]}>{reason}</Text> : null}
+          </View>
+        </View>
+        <HeroImage props={props} item={items[0]} />
+        <Rows items={visibleItems} props={props} />
+      </Frame>
+    );
+  }
+  return (
+    <Frame
+      props={props}
+      titleKeys={["recommendationTitle", "itemName", "productTitle"]}
+      bodyKeys={["checkoutMessage", "availabilityMessage", "message"]}
+    >
+      <HeroImage props={props} item={items[0]} />
+      {bundle ? (
+        <View style={styles.rows}>
+          {visibleItems.filter((item) => primaryText(item)).slice(0, 8).map((item, index) => {
+            const active = selected.includes(index);
+            return (
+              <Pressable
+                key={`${primaryText(item)}-${index}`}
+                accessibilityRole="checkbox"
+                accessibilityState={{ checked: active }}
+                onPress={() => toggleBundleItem(index)}
+                style={[styles.row, { borderColor: props.theme.couponBorder }]}
+              >
+                <View style={[styles.confirmCheck, { borderColor: active ? props.theme.accent : props.theme.couponBorder, backgroundColor: active ? props.theme.accent : props.theme.cardBg }]}>
+                  {active ? <Text style={styles.confirmTick}>✓</Text> : null}
+                </View>
+                <View style={[styles.grow, { marginLeft: 10 }]}>
+                  <Text style={[styles.rowTitle, { color: props.theme.titleColor }]}>{primaryText(item)}</Text>
+                  {secondaryText(item) ? <Text style={[styles.rowDetail, { color: props.theme.bodyColor }]}>{secondaryText(item)}</Text> : null}
+                </View>
+              </Pressable>
+            );
+          })}
+          {firstText(ext, ["pricingLogic"]) ? <Text style={[styles.selectionNote, { color: props.theme.secondaryColor }]}>{firstText(ext, ["pricingLogic"])}</Text> : null}
+        </View>
+      ) : <Rows items={visibleItems} props={props} />}
+    </Frame>
+  );
+}
+
+function ChatContent(props: InAppBranchProps): ReactElement {
+  const ext = extOf(props);
+  const avatar = imageUri(props);
+  const message = firstText(ext, [
+    "assistantMessage",
+    "supportMessage",
+    "message",
+    "subject",
+  ]);
+  const suggestions = firstList(ext, [
+    "suggestedActions",
+    "contactMethods",
+    "actions",
+  ]);
+  return (
+    <Frame props={props} titleKeys={["assistantTitle", "subject", "agentName"]}>
+      <View style={styles.chatRow}>
+        {avatar ? (
+          <Image
+            accessibilityLabel="Assistant avatar"
+            resizeMode="cover"
+            source={{ uri: avatar }}
+            style={styles.chatAvatar}
+          />
+        ) : null}
+        {message ? (
+          <View
+            style={[styles.bubble, { backgroundColor: props.theme.couponBg }]}
+          >
+            <Text style={[styles.rowTitle, { color: props.theme.titleColor }]}>
+              {message}
+            </Text>
+          </View>
+        ) : null}
+      </View>
+      <Chips items={suggestions} props={props} />
+    </Frame>
+  );
+}
+
+function CalendarContent(props: InAppBranchProps): ReactElement {
+  const ext = extOf(props);
+  const webinar = variantOf(props) === "webinar_registration";
+  const event = firstText(ext, ["eventTitle", "bookingTitle", "offerMessage"]);
+  const when = firstText(ext, [
+    "dateTime",
+    "eventTime",
+    "renewalDateSource",
+    "timeWindow",
+  ]);
+  const slots = firstList(ext, ["slots", "dateTimeOptions", "calendarDays"]);
+  const labels = slots.map(primaryText).filter(Boolean).slice(0, 12);
+  const [selected, setSelected] = useState<string | null>(null);
+  const [registrationValues, setRegistrationValues] = useState<Record<string, string>>({});
+  const authoredRegistrationFields = firstList(ext, ["registrationFields"])
+    .map(primaryText)
+    .filter(Boolean);
+  const registrationFields = authoredRegistrationFields.length
+    ? authoredRegistrationFields
+    : webinar
+      ? [
+          ext.nameField ? (typeof ext.nameField === "string" ? ext.nameField : "Name") : "",
+          ext.emailField ? (typeof ext.emailField === "string" ? ext.emailField : "Email") : "",
+        ].filter(Boolean)
+      : [];
+  const choose = (label: string): void => {
+    setSelected(label);
+    props.onInteraction?.({
+      mechanic: variantOf(props) || "calendar",
+      phase: "decision",
+      value: label,
+      result: label,
+    });
+  };
+  return (
+    <Frame
+      props={props}
+      titleKeys={["eventTitle", "bookingTitle"]}
+      bodyKeys={["offerMessage", "eventTitle"]}
+      beforePrimary={() => props.onInteraction?.({
+        mechanic: variantOf(props) || "calendar",
+        phase: "resolved",
+        value: selected || undefined,
+        meta: {
+          ...(selected ? { selection: selected } : {}),
+          ...(registrationFields.length ? { fields: registrationValues } : {}),
+        },
+      })}
+    >
+      <View style={[styles.calendarCard, { borderColor: props.theme.accent }]}>
+        <Text style={[styles.calendarGlyph, { color: props.theme.accent }]}>
+          ▣
+        </Text>
+        <View style={styles.grow}>
+          {event ? (
+            <Text style={[styles.rowTitle, { color: props.theme.titleColor }]}>
+              {event}
+            </Text>
+          ) : null}
+          {when ? (
+            <Text style={[styles.rowDetail, { color: props.theme.bodyColor }]}>
+              {when}
+            </Text>
+          ) : null}
+        </View>
+      </View>
+      {registrationFields.map((label) => (
+        <View key={label} style={styles.field}>
+          <Text style={[styles.fieldLabel, { color: props.theme.titleColor }]}>{label}</Text>
+          <TextInput
+            value={registrationValues[label] ?? ""}
+            onChangeText={(value) => setRegistrationValues((current) => ({ ...current, [label]: value }))}
+            placeholder={label}
+            placeholderTextColor={props.theme.secondaryColor}
+            accessibilityLabel={label}
+            keyboardType={/email/i.test(label) ? "email-address" : "default"}
+            autoCapitalize={/email/i.test(label) ? "none" : "words"}
+            style={[styles.input, { borderColor: props.theme.couponBorder, color: props.theme.titleColor }]}
+          />
+        </View>
+      ))}
+      {labels.length ? (
+        <View style={styles.chips}>
+          {labels.map((label) => (
+            <Pressable
+              key={label}
+              accessibilityRole="radio"
+              accessibilityState={{ selected: selected === label }}
+              onPress={() => choose(label)}
+              style={[
+                styles.chip,
+                {
+                  backgroundColor: selected === label ? props.theme.couponBg : props.theme.cardBg,
+                  borderColor: selected === label ? props.theme.accent : props.theme.couponBorder,
+                },
+              ]}
+            >
+              <Text style={[styles.chipLabel, { color: selected === label ? props.theme.accent : props.theme.couponFg }]}>
+                {label}
+              </Text>
+            </Pressable>
+          ))}
+        </View>
+      ) : null}
+      {selected ? <Text style={[styles.selectionNote, { color: props.theme.secondaryColor }]}>Selected: {selected}</Text> : null}
+    </Frame>
+  );
+}
+
+function FormContent(props: InAppBranchProps): ReactElement {
+  const ext = extOf(props);
+  const variant = variantOf(props);
+  const fields = firstList(ext, [
+    "formFields",
+    "fields",
+    "registrationFields",
+    "consentCategories",
+    "documentRequirements",
+  ]);
+  const fallback = firstText(ext, [
+    "documentType",
+    "verificationType",
+    "permissionType",
+  ]);
+  const visible = (
+    fields.length ? fields : fallback ? [{ label: fallback }] : []
+  )
+    .filter((field) => primaryText(field))
+    .slice(0, 4);
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [consents, setConsents] = useState<Record<string, boolean>>(() =>
+    Object.fromEntries(
+      visible.map((field, index) => {
+        const value = asRecord(field);
+        return [primaryText(field) || String(index), value.on === true || value.required === true];
+      }),
+    ),
+  );
+  const emit = (): void => {
+    props.onInteraction?.({
+      mechanic: variant || "form",
+      phase: "resolved",
+      meta: variant === "consent_center" ? { consents } : { fields: values },
+    });
+  };
+
+  if (variant === "document_upload_prompt") {
+    const fileTypes = firstList(ext, ["allowedFileTypes", "examples"]).map(primaryText).filter(Boolean);
+    return (
+      <Frame props={props} titleKeys={["documentType"]} bodyKeys={["instructions"]} showActions={false}>
+        <View style={[styles.uploadCard, { borderColor: props.theme.couponBorder, backgroundColor: props.theme.couponBg }]}>
+          <Text style={[styles.uploadGlyph, { color: props.theme.accent }]}>⇧</Text>
+          <Text style={[styles.rowTitle, { color: props.theme.titleColor }]}>Choose {firstText(ext, ["documentType"]) || "a document"}</Text>
+          {fileTypes.length ? <Text style={[styles.rowDetail, { color: props.theme.bodyColor }]}>{fileTypes.join(" · ")}</Text> : null}
+          {firstText(ext, ["maxFileSize"]) ? <Text style={[styles.rowDetail, { color: props.theme.bodyColor }]}>Maximum {firstText(ext, ["maxFileSize"])}</Text> : null}
+          <Pressable
+            accessibilityRole="button"
+            onPress={() => {
+              props.onInteraction?.({ mechanic: variant, phase: "started", value: "document_picker", meta: { allowedFileTypes: fileTypes } });
+              if (presentPrimaryOutcome(props)) return;
+              if (!props.spec.cta || props.spec.cta.action === "dismiss") props.onDismiss();
+              else props.onCta(props.spec.cta);
+            }}
+            style={[styles.hostAction, { backgroundColor: props.theme.accent }]}
+          >
+            <Text style={[styles.primaryLabel, { color: props.theme.ctaText }]}>{props.spec.cta?.label || "Select file"}</Text>
+          </Pressable>
+        </View>
+      </Frame>
+    );
+  }
+
+  if (variant === "id_verification_sheet") {
+    return (
+      <Frame props={props} titleKeys={["verificationType"]} bodyKeys={["instructions", "privacyText"]}>
+        <Rows items={fields.length ? fields : ["Prepare your ID", "Capture both sides", "Confirm your details"]} props={props} numbered />
+        {firstText(ext, ["privacyText"]) ? <Text style={[styles.legal, { color: props.theme.secondaryColor }]}>{firstText(ext, ["privacyText"])}</Text> : null}
+      </Frame>
+    );
+  }
+
+  if (variant === "consent_center") {
+    return (
+      <View style={styles.content}>
+        <Text style={[styles.title, { color: props.theme.titleColor }]}>{props.spec.title || "Your privacy choices"}</Text>
+        {props.spec.body ? <Text style={[styles.body, { color: props.theme.bodyColor }]}>{props.spec.body}</Text> : null}
+        {visible.map((field, index) => {
+          const label = primaryText(field) || `Consent ${index + 1}`;
+          const on = consents[label] === true;
+          return (
+            <Pressable
+              key={label}
+              accessibilityRole="switch"
+              accessibilityState={{ checked: on }}
+              onPress={() => setConsents((current) => ({ ...current, [label]: !on }))}
+              style={[styles.consentRow, { borderColor: props.theme.couponBorder }]}
+            >
+              <Text style={[styles.growText, { color: props.theme.titleColor }]}>{label}</Text>
+              <View style={[styles.switchTrack, { backgroundColor: on ? props.theme.accent : props.theme.couponBg }]}>
+                <View style={[styles.switchThumb, on && styles.switchThumbOn]} />
+              </View>
+            </Pressable>
+          );
+        })}
+        <Actions {...props} beforePrimary={emit} />
+      </View>
+    );
+  }
+  return (
+    <Frame
+      props={props}
+      titleKeys={["subject", "documentType", "verificationType"]}
+      bodyKeys={["instructions", "promptText", "privacyText"]}
+      showActions={false}
+    >
+      {visible.map((field, index) => {
+        const label = primaryText(field);
+        return (
+          <View key={`${label}-${index}`} style={styles.field}>
+            <Text
+              style={[styles.fieldLabel, { color: props.theme.titleColor }]}
+            >
+              {label}
+            </Text>
+            <TextInput
+              value={values[label] ?? ""}
+              onChangeText={(value) => setValues((current) => ({ ...current, [label]: value }))}
+              accessibilityLabel={label}
+              placeholder={label}
+              placeholderTextColor={props.theme.secondaryColor}
+              style={[
+                styles.input,
+                {
+                  borderColor: props.theme.couponBorder,
+                  color: props.theme.titleColor,
+                },
+              ]}
+            />
+          </View>
+        );
+      })}
+      <Actions {...props} beforePrimary={emit} />
+    </Frame>
+  );
+}
+
+function TrustContent(props: InAppBranchProps): ReactElement {
+  const ext = extOf(props);
+  const variant = variantOf(props);
+  const [confirmed, setConfirmed] = useState(false);
+  const [reviewRating, setReviewRating] = useState(0);
+  const glyphByVariant: Record<string, string> = {
+    confirmation_modal: "!",
+    referral_invite: "↗",
+    coupon_wallet: "%",
+    social_proof_popup: "★",
+    exit_intent_rescue: "↩",
+    time_of_day_offer: "◷",
+    weather_based_card: "☂",
+    security_alert: "⚠",
+    permissions_primer: "✓",
+    app_review_ask: "★",
+    smart_segment_preview: "◎",
+  };
+  const highlight = firstText(ext, [
+    "proofMessage",
+    "rewardMessage",
+    "benefitMessage",
+    "valueMessage",
+    "reviewMessage",
+    "segmentExplanation",
+    "alertTitle",
+    "discount",
+    "weatherConditionRule",
+    "timeWindow",
+    "permissionType",
+    "exitCondition",
+  ]);
+  const details = firstList(ext, [
+    "coupons",
+    "perks",
+    "perksList",
+    "reasonList",
+    "tags",
+  ]);
+  const firstCoupon = asRecord(firstList(ext, ["coupons"])[0]);
+  const code = firstText(ext, ["couponCode", "referralCode", "code"]) || firstText(firstCoupon, ["code", "couponCode"]);
+  const expiry = firstText(ext, ["expiryDate", "expiry"]) || firstText(firstCoupon, ["expiryDate", "expiry"]);
+  const terms = firstText(ext, ["terms"]) || firstList(ext, ["terms"]).map(primaryText).filter(Boolean).join(" · ");
+  const avatar = firstText(assetsOf(props), ["avatar"]);
+  const rating = typeof ext.rating === "number" ? Math.max(0, Math.min(5, Math.round(ext.rating))) : 0;
+  const reviewThreshold = typeof ext.ratingGate === "number"
+    ? Math.max(1, Math.min(5, Math.round(ext.ratingGate)))
+    : 4;
+  const submitReview = async (): Promise<void> => {
+    props.onInteraction?.({ mechanic: "app_review_ask", phase: "resolved", value: reviewRating, meta: { threshold: reviewThreshold } });
+    if (reviewRating >= reviewThreshold) {
+      const ran = await requestNativeStoreReview();
+      props.onInteraction?.({
+        mechanic: "app_review_ask",
+        phase: "completed",
+        value: reviewRating,
+        meta: { route: ran ? "store_review" : "fallback", threshold: reviewThreshold },
+      });
+      if (ran) {
+        if (presentPrimaryOutcome(props)) return;
+        props.onDismiss();
+        return;
+      }
+    }
+    if (presentPrimaryOutcome(props)) return;
+    if (!props.spec.cta || props.spec.cta.action === "dismiss") props.onDismiss();
+    else props.onCta(props.spec.cta);
+  };
+  return (
+    <Frame
+      props={props}
+      titleKeys={["alertTitle", "vipTitle", "newTierName"]}
+      bodyKeys={["message", "proofMessage", "valueMessage", "reviewMessage"]}
+      beforePrimary={variant === "app_review_ask" ? undefined : () => props.onInteraction?.({
+          mechanic: variant || "trust",
+          phase: "resolved",
+          value: firstText(ext, ["nativeTrigger", "ratingGate", "exitCondition", "secondaryAction"]),
+          meta: { variant, confirmed, context: ext },
+        })}
+      primaryDisabled={
+        (variant === "confirmation_modal" && Boolean(ext.checkboxConfirmation) && !confirmed) ||
+        (variant === "app_review_ask" && reviewRating === 0)
+      }
+      onPrimary={variant === "app_review_ask" ? () => { void submitReview(); } : undefined}
+    >
+      {highlight || glyphByVariant[variant] ? (
+        <View
+          style={[styles.highlight, { backgroundColor: props.theme.couponBg }]}
+        >
+          <Text style={[styles.trustGlyph, { color: props.theme.accent }]}>
+            {glyphByVariant[variant] || "✓"}
+          </Text>
+          <View style={styles.grow}>
+            {highlight ? <Text style={[styles.growText, { color: props.theme.titleColor }]}>{highlight}</Text> : null}
+            {variant === "security_alert" && firstText(ext, ["severity", "deviceLocation"]) ? (
+              <Text style={[styles.rowDetail, { color: props.theme.bodyColor }]}>{[firstText(ext, ["severity"]), firstText(ext, ["deviceLocation"])].filter(Boolean).join(" · ")}</Text>
+            ) : null}
+          </View>
+        </View>
+      ) : null}
+      {avatar ? <Image source={{ uri: avatar }} style={styles.avatar} accessibilityLabel="Customer avatar" /> : null}
+      {rating > 0 ? <Text style={[styles.stars, { color: props.theme.accent }]}>{"★".repeat(rating)}{"☆".repeat(5 - rating)}</Text> : null}
+      {variant === "app_review_ask" ? (
+        <View style={styles.reviewStars}>
+          {Array.from({ length: 5 }, (_, index) => (
+            <Pressable
+              key={index}
+              accessibilityRole="radio"
+              accessibilityLabel={`${index + 1} star`}
+              accessibilityState={{ selected: reviewRating === index + 1 }}
+              onPress={() => setReviewRating(index + 1)}
+              style={styles.reviewStarButton}
+            >
+              <Text style={[styles.reviewStar, { color: index < reviewRating ? "#F59E0B" : props.theme.couponBorder }]}>★</Text>
+            </Pressable>
+          ))}
+        </View>
+      ) : null}
+      {code ? (
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={`Coupon code ${code}`}
+          onPress={() => props.onInteraction?.({ mechanic: variant || "coupon", phase: "decision", value: code })}
+          style={[styles.codeCard, { borderColor: props.theme.accent }]}
+        >
+          <Text selectable style={[styles.codeText, { color: props.theme.couponFg }]}>{code}</Text>
+          <Text style={[styles.codeHint, { color: props.theme.secondaryColor }]}>Tap to select this offer</Text>
+        </Pressable>
+      ) : null}
+      {expiry ? <Text style={[styles.legal, { color: props.theme.secondaryColor }]}>Expires {expiry}</Text> : null}
+      {terms ? <Text style={[styles.legal, { color: props.theme.secondaryColor }]}>{terms}</Text> : null}
+      {variant === "confirmation_modal" && ext.checkboxConfirmation ? (
+        <Pressable
+          accessibilityRole="checkbox"
+          accessibilityState={{ checked: confirmed }}
+          onPress={() => {
+            setConfirmed((value) => !value);
+            props.onInteraction?.({ mechanic: "confirmation_modal", phase: "decision", value: !confirmed });
+          }}
+          style={[styles.confirmRow, { borderColor: props.theme.couponBorder }]}
+        >
+          <View style={[styles.confirmCheck, { borderColor: confirmed ? props.theme.accent : props.theme.couponBorder, backgroundColor: confirmed ? props.theme.accent : props.theme.cardBg }]}>
+            {confirmed ? <Text style={styles.confirmTick}>✓</Text> : null}
+          </View>
+          <Text style={[styles.growText, { color: props.theme.titleColor }]}>{typeof ext.checkboxConfirmation === "string" ? ext.checkboxConfirmation : "I understand and want to continue"}</Text>
+        </Pressable>
+      ) : null}
+      <Rows items={details} props={props} />
+    </Frame>
+  );
+}
+
+function LocationContent(props: InAppBranchProps): ReactElement {
+  const ext = extOf(props);
+  const source = { ...asRecord(assetsOf(props).location), ...ext };
+  const place = firstText(source, [
+    "branchName",
+    "geoFenceLocation",
+    "locationRule",
+  ]);
+  const detail = firstText(source, ["arrivalMessage", "distance", "openingHours", "address"]);
+  return (
+    <Frame
+      props={props}
+      titleKeys={["branchName"]}
+      bodyKeys={["arrivalMessage", "message"]}
+    >
+      <View style={[styles.map, { backgroundColor: props.theme.couponBg }]}>
+        <View style={[styles.mapLine, styles.mapLineOne]} />
+        <View style={[styles.mapLine, styles.mapLineTwo]} />
+        <Text style={[styles.pin, { color: props.theme.accent }]}>●</Text>
+      </View>
+      {place || detail ? (
+        <View style={styles.locationCopy}>
+          <Text style={[styles.rowTitle, { color: props.theme.titleColor }]}>
+            {place || "Nearby location"}
+          </Text>
+          {detail ? (
+            <Text style={[styles.rowDetail, { color: props.theme.bodyColor }]}>
+              {detail}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+    </Frame>
+  );
+}
+
+function normalizedProgress(value: unknown): number | null {
+  if (typeof value !== "number" || !Number.isFinite(value)) return null;
+  return Math.max(0, Math.min(100, value <= 1 ? value * 100 : value));
+}
+
+function InsightContent(props: InAppBranchProps): ReactElement {
+  const ext = extOf(props);
+  const items = firstList(ext, ["digestItems", "contentBlocks", "metrics"]);
+  const metric = firstText(ext, ["metric", "progressValue", "timer"]);
+  const progress = normalizedProgress(
+    firstValue(ext, ["progress", "progressBar", "progressValue"]),
+  );
+  return (
+    <Frame
+      props={props}
+      titleKeys={["insightTitle", "digestTitle"]}
+      bodyKeys={["message", "motivationalText"]}
+    >
+      {metric ? (
+        <Text style={[styles.metric, { color: props.theme.accent }]}>
+          {metric}
+        </Text>
+      ) : null}
+      {progress !== null ? (
+        <View style={[styles.track, { backgroundColor: props.theme.couponBg }]}>
+          <View
+            style={[
+              styles.progress,
+              { backgroundColor: props.theme.accent, width: `${progress}%` },
+            ]}
+          />
+        </View>
+      ) : null}
+      <Rows items={items} props={props} />
+    </Frame>
+  );
+}
+
+function MediaContent(props: InAppBranchProps): ReactElement {
+  const ext = extOf(props);
+  const variant = variantOf(props);
+  const video = firstText(assetsOf(props), ["video"]);
+  const mediaHeight = resolveInAppMediaHeight(props.spec, 132, 320);
+  if (variant === "rich_modal") {
+    const bulletList = asList(ext.bulletList).filter(primaryText);
+    const features = bulletList.length
+      ? bulletList
+      : asList(ext.benefits).filter(primaryText);
+    return (
+      <Frame
+        props={props}
+        badge={firstText(ext, ["badge", "urgencyBadge", "eyebrow"])}
+        titleKeys={["featureName"]}
+        bodyKeys={["valueProposition", "message"]}
+      >
+        <FeatureChecklist items={features} props={props} />
+      </Frame>
+    );
+  }
+  const sections = firstList(ext, [
+    "contentSections",
+    "bulletList",
+    "benefits",
+  ]);
+  if (variant === "split_modal") {
+    const title = props.spec.title || firstText(ext, ["featureName"]);
+    const body = props.spec.body || firstText(ext, ["valueProposition", "message"]);
+    return (
+      <View style={styles.content}>
+        <View style={styles.split}>
+          <View style={styles.splitMedia}>
+            <HeroImage props={props} />
+            {!imageUri(props) ? (
+              <View style={[styles.splitFallback, { backgroundColor: props.theme.couponBg }]}>
+                <Text style={[styles.splitGlyph, { color: props.theme.accent }]}>◆</Text>
+              </View>
+            ) : null}
+          </View>
+          <View style={styles.splitCopy}>
+            {title ? <Text style={[styles.title, { color: props.theme.titleColor }]}>{title}</Text> : null}
+            {body ? <Text style={[styles.body, { color: props.theme.bodyColor }]}>{body}</Text> : null}
+            <Rows items={sections} props={props} />
+          </View>
+        </View>
+        <Actions {...props} />
+      </View>
+    );
+  }
+  return (
+    <Frame
+      props={props}
+      titleKeys={["featureName", "authorLabel"]}
+      bodyKeys={["valueProposition", "message"]}
+    >
+      <HeroImage props={props} />
+      {video && !imageUri(props) ? (
+        <View
+          style={[
+            styles.video,
+            { backgroundColor: props.theme.couponBg },
+            mediaHeight === undefined ? null : { minHeight: mediaHeight },
+          ]}
+        >
+          <Text style={[styles.play, { color: props.theme.accent }]}>▶</Text>
+          <Text style={[styles.rowDetail, { color: props.theme.bodyColor }]}>
+            Video opens through the campaign action
+          </Text>
+        </View>
+      ) : null}
+      <Rows items={sections} props={props} />
+    </Frame>
+  );
+}
+
+function ListContent(props: InAppBranchProps): ReactElement {
+  const ext = extOf(props);
+  const variant = variantOf(props);
+  const items = firstList(ext, [
+    "bulletList",
+    "contentBlocks",
+    "steps",
+    "actions",
+    "newFeatures",
+    "expandedContent",
+  ]);
+  if (variant === "welcome_back_card") {
+    const name = firstText(ext, ["userNameToken", "userName"]);
+    return (
+      <Frame
+        props={props}
+        titleKeys={["welcomeTitle"]}
+        bodyKeys={["updateSummary", "message"]}
+      >
+        <View style={[styles.welcomeHero, { backgroundColor: props.theme.couponBg }]}>
+          <Text style={styles.welcomeEmoji}>👋</Text>
+          <Text style={[styles.welcomeCopy, { color: props.theme.titleColor }]}>
+            {name ? `Good to see you, ${name}` : "Good to see you again"}
+          </Text>
+        </View>
+        <Rows items={items} props={props} />
+      </Frame>
+    );
+  }
+  if (variant === "empty_state_prompt") {
+    return (
+      <View style={[styles.content, styles.emptyState]}>
+        {imageUri(props) ? (
+          <HeroImage props={props} />
+        ) : (
+          <View style={[styles.emptyIllustration, { backgroundColor: props.theme.couponBg }]}>
+            <Text style={[styles.emptyGlyph, { color: props.theme.accent }]}>＋</Text>
+          </View>
+        )}
+        <Text style={[styles.title, styles.centerText, { color: props.theme.titleColor }]}>
+          {props.spec.title || "Nothing here yet"}
+        </Text>
+        {props.spec.body ? <Text style={[styles.body, styles.centerText, { color: props.theme.bodyColor }]}>{props.spec.body}</Text> : null}
+        <Actions {...props} />
+      </View>
+    );
+  }
+  if (variant === "multi_cta_decision_hub") {
+    const actions = items.slice(0, 6);
+    return (
+      <View style={styles.content}>
+        {props.spec.title ? <Text style={[styles.title, { color: props.theme.titleColor }]}>{props.spec.title}</Text> : null}
+        {props.spec.body ? <Text style={[styles.body, { color: props.theme.bodyColor }]}>{props.spec.body}</Text> : null}
+        <View style={styles.decisionList}>
+          {actions.map((item, index) => {
+            const action = asRecord(item);
+            const label = primaryText(item) || `Option ${index + 1}`;
+            const recommended = action.recommended === true || action.key === ext.recommendedAction;
+            return (
+              <Pressable
+                key={`${label}-${index}`}
+                accessibilityRole="button"
+                onPress={() => {
+                  props.onInteraction?.({ mechanic: "multi_cta_decision_hub", phase: "decision", value: label, meta: { index, action } });
+                  const value = firstText(action, ["value", "deepLink", "url"]);
+                  if (value) props.onCta({ label, action: "link", deepLink: value });
+                  else if (action.action === "dismiss" && props.onOutcome) {
+                    props.onOutcome({ fallback: { kind: "dismiss" } });
+                  }
+                  else if (action.action === "dismiss") props.onDismiss();
+                  else if (props.spec.cta) props.onCta(props.spec.cta);
+                  else if (!presentPrimaryOutcome(props)) props.onDismiss();
+                }}
+                style={[styles.decisionButton, { borderColor: recommended ? props.theme.accent : props.theme.couponBorder, backgroundColor: recommended ? props.theme.couponBg : props.theme.cardBg }]}
+              >
+                <Text style={[styles.growText, { color: props.theme.titleColor }]}>{label}</Text>
+                {recommended ? <Text style={[styles.recommended, { color: props.theme.accent }]}>Recommended</Text> : null}
+                <Text style={[styles.decisionArrow, { color: props.theme.accent }]}>›</Text>
+              </Pressable>
+            );
+          })}
+        </View>
+      </View>
+    );
+  }
+  return (
+    <Frame
+      props={props}
+      titleKeys={["expandedTitle", "peekLabel", "welcomeTitle"]}
+      bodyKeys={["expandedBody", "updateSummary", "message"]}
+    >
+      <Rows items={items} props={props} numbered />
+    </Frame>
+  );
+}
+
+const CONTENT_RENDERERS: Readonly<Record<ContentFamily, ContentRenderer>> = {
+  plans: PlansContent,
+  products: ProductsContent,
+  chat: ChatContent,
+  calendar: CalendarContent,
+  form: FormContent,
+  trust: TrustContent,
+  location: LocationContent,
+  insight: InsightContent,
+  media: MediaContent,
+  list: ListContent,
+};
+
+/**
+ * Only variants with structured container content appear here. Basic layout
+ * surfaces intentionally resolve to null and use EngageInAppView's generic body.
+ * Canonical mechanic variants are intentionally absent as well.
+ */
+const VARIANTS_BY_FAMILY: Readonly<Record<ContentFamily, readonly string[]>> = {
+  plans: [
+    "upgrade_nudger",
+    "renewal_reminder",
+    "trial_conversion",
+    "vip_unlock",
+    "loyalty_tier_upgrade",
+    "compare_plans_sheet",
+    "dynamic_paywall",
+  ],
+  products: [
+    "cart_recovery",
+    "browse_recovery",
+    "price_drop_alert",
+    "back_in_stock",
+    "reorder_reminder",
+    "cross_sell_recommendation",
+    "checkout_accelerator",
+    "bundle_builder",
+  ],
+  chat: [
+    "floating_bubble",
+    "ai_assistant_nudge",
+    "smart_inbox_message",
+    "support_escalation",
+    "chat_handoff_prompt",
+  ],
+  calendar: [
+    "calendar_picker_offer",
+    "live_event_banner",
+    "webinar_registration",
+    "appointment_booker",
+  ],
+  form: [
+    "waitlist_joiner",
+    "rich_form_modal",
+    "document_upload_prompt",
+    "id_verification_sheet",
+    "consent_center",
+  ],
+  trust: [
+    "confirmation_modal",
+    "referral_invite",
+    "coupon_wallet",
+    "social_proof_popup",
+    "exit_intent_rescue",
+    "time_of_day_offer",
+    "weather_based_card",
+    "security_alert",
+    "permissions_primer",
+    "app_review_ask",
+    "smart_segment_preview",
+  ],
+  location: ["location_based_prompt", "geo_fenced_arrival_card"],
+  insight: [
+    "sticky_footer_bar",
+    "embedded_panel",
+    "personal_finance_insight",
+    "personalized_digest",
+  ],
+  media: [
+    "rich_modal",
+    "media_modal",
+    "split_modal",
+    "full_screen_takeover",
+    "editorial_full_screen",
+    "feature_discovery",
+  ],
+  list: [
+    "multi_step_bottom_sheet",
+    "center_drawer",
+    "peek_card",
+    "welcome_back_card",
+    "empty_state_prompt",
+    "multi_cta_decision_hub",
+  ],
+};
+
+const FAMILY_BY_VARIANT: Readonly<Record<string, ContentFamily>> = (() => {
+  const result: Record<string, ContentFamily> = {};
+  for (const family of Object.keys(VARIANTS_BY_FAMILY) as ContentFamily[]) {
+    for (const variantKey of VARIANTS_BY_FAMILY[family]) {
+      result[variantKey] = family;
+    }
+  }
+  return result;
+})();
+
+/** Resolve reusable content for a container variant, or null for generic/mechanic keys. */
+export function resolveVariantContent(
+  variantKey?: string,
+): ((props: InAppBranchProps) => ReactElement) | null {
+  if (
+    !variantKey ||
+    !Object.prototype.hasOwnProperty.call(FAMILY_BY_VARIANT, variantKey)
+  ) {
+    return null;
+  }
+  return CONTENT_RENDERERS[FAMILY_BY_VARIANT[variantKey]!] ?? null;
+}
+
+const styles = {
+  content: { width: "100%" },
+  badge: {
+    alignSelf: "flex-start",
+    borderRadius: 999,
+    marginBottom: 6,
+    paddingHorizontal: 9,
+    paddingVertical: 3,
+  },
+  badgeLabel: { fontSize: 10, fontWeight: "800" },
+  title: { fontSize: 19, fontWeight: "800", lineHeight: 25, marginBottom: 6 },
+  body: { fontSize: 14, lineHeight: 20, marginBottom: 10 },
+  actions: {
+    alignItems: "center",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8,
+    marginTop: 14,
+  },
+  reverse: { flexDirection: "row-reverse" },
+  primaryButton: {
+    borderRadius: 12,
+    flexBasis: 140,
+    flexGrow: 1,
+    flexShrink: 1,
+    maxWidth: "100%",
+    paddingHorizontal: 18,
+    paddingVertical: 11,
+  },
+  primaryLabel: {
+    flexShrink: 1,
+    fontSize: 15,
+    fontWeight: "700",
+    textAlign: "center",
+  },
+  secondaryButton: {
+    flexShrink: 1,
+    maxWidth: "100%",
+    paddingHorizontal: 14,
+    paddingVertical: 11,
+  },
+  secondaryLabel: {
+    flexShrink: 1,
+    fontSize: 14,
+    fontWeight: "600",
+    textAlign: "center",
+  },
+  rows: { marginTop: 6 },
+  featureList: { marginTop: 4 },
+  featureRow: {
+    alignItems: "center",
+    borderBottomWidth: 1,
+    flexDirection: "row",
+    paddingVertical: 8,
+  },
+  featureCheck: {
+    alignItems: "center",
+    borderRadius: 11,
+    height: 22,
+    justifyContent: "center",
+    marginRight: 10,
+    width: 22,
+  },
+  featureTick: { fontSize: 12, fontWeight: "900" },
+  featureLabel: { flex: 1, fontSize: 14, fontWeight: "700", lineHeight: 19 },
+  row: {
+    alignItems: "center",
+    borderBottomWidth: 1,
+    flexDirection: "row",
+    paddingVertical: 9,
+  },
+  rowMark: { fontSize: 15, fontWeight: "800", marginRight: 10, minWidth: 14 },
+  rowTitle: { fontSize: 14, fontWeight: "700", lineHeight: 19 },
+  rowDetail: { fontSize: 12, lineHeight: 17, marginTop: 2 },
+  grow: { flex: 1 },
+  growText: { flex: 1, fontSize: 14, fontWeight: "700", lineHeight: 19 },
+  chips: { flexDirection: "row", flexWrap: "wrap", marginTop: 8 },
+  chip: {
+    borderRadius: 999,
+    borderWidth: 1,
+    marginBottom: 6,
+    marginRight: 6,
+    maxWidth: "100%",
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+  },
+  chipLabel: { flexShrink: 1, fontSize: 12, fontWeight: "700" },
+  heroImage: {
+    borderRadius: 12,
+    height: 132,
+    marginVertical: 8,
+    width: "100%",
+  },
+  chatRow: { alignItems: "flex-end", flexDirection: "row", marginTop: 4 },
+  chatAvatar: {
+    borderRadius: 24,
+    flexShrink: 0,
+    height: 48,
+    marginVertical: 8,
+    width: 48,
+  },
+  bubble: { borderRadius: 14, flex: 1, marginLeft: 8, padding: 12 },
+  calendarCard: {
+    alignItems: "center",
+    borderRadius: 12,
+    borderWidth: 1,
+    flexDirection: "row",
+    marginTop: 6,
+    padding: 12,
+  },
+  calendarGlyph: { fontSize: 30, fontWeight: "800", marginRight: 12 },
+  field: { marginTop: 8 },
+  fieldLabel: { fontSize: 12, fontWeight: "700", marginBottom: 5 },
+  input: { borderRadius: 10, borderWidth: 1, fontSize: 14, padding: 10 },
+  split: { flexDirection: "row", flexWrap: "wrap", alignItems: "stretch", gap: 14 },
+  splitMedia: { flexBasis: 220, flexGrow: 0.9, flexShrink: 1, minHeight: 170, minWidth: 0 },
+  splitCopy: { flexBasis: 220, flexGrow: 1, flexShrink: 1, justifyContent: "center", minWidth: 0 },
+  splitFallback: { flex: 1, minHeight: 170, borderRadius: 12, alignItems: "center", justifyContent: "center" },
+  splitGlyph: { fontSize: 42, fontWeight: "900" },
+  selectionNote: { fontSize: 11, marginTop: 4 },
+  uploadCard: { borderWidth: 1.5, borderStyle: "dashed", borderRadius: 14, padding: 16, alignItems: "center", marginTop: 8 },
+  uploadGlyph: { fontSize: 34, fontWeight: "900", marginBottom: 6 },
+  hostAction: { borderRadius: 10, paddingHorizontal: 18, paddingVertical: 10, marginTop: 12 },
+  legal: { fontSize: 11, lineHeight: 16, marginTop: 8 },
+  consentRow: { flexDirection: "row", alignItems: "center", borderBottomWidth: 1, paddingVertical: 12 },
+  switchTrack: { width: 44, height: 26, borderRadius: 13, padding: 3 },
+  switchThumb: { width: 20, height: 20, borderRadius: 10, backgroundColor: "#FFFFFF" },
+  switchThumbOn: { alignSelf: "flex-end" },
+  decisionList: { marginTop: 8, gap: 8 },
+  decisionButton: { flexDirection: "row", alignItems: "center", borderWidth: 1.5, borderRadius: 12, padding: 13 },
+  recommended: { fontSize: 10, fontWeight: "800", marginRight: 8 },
+  decisionArrow: { fontSize: 24, lineHeight: 24 },
+  welcomeHero: { flexDirection: "row", alignItems: "center", borderRadius: 14, padding: 14, marginTop: 4 },
+  welcomeEmoji: { fontSize: 34, marginRight: 12 },
+  welcomeCopy: { flex: 1, fontSize: 14, fontWeight: "800", lineHeight: 19 },
+  emptyState: { alignItems: "stretch" },
+  emptyIllustration: { height: 132, borderRadius: 16, alignItems: "center", justifyContent: "center", marginBottom: 14 },
+  emptyGlyph: { fontSize: 46, fontWeight: "300" },
+  centerText: { textAlign: "center" },
+  browseHeader: { flexDirection: "row", alignItems: "center", borderRadius: 12, padding: 12, marginTop: 4 },
+  browseClock: { fontSize: 28, fontWeight: "800", marginRight: 10 },
+  highlight: {
+    alignItems: "center",
+    borderRadius: 12,
+    flexDirection: "row",
+    marginTop: 5,
+    padding: 12,
+  },
+  trustGlyph: { fontSize: 21, fontWeight: "900", marginRight: 10 },
+  avatar: { width: 42, height: 42, borderRadius: 21, alignSelf: "center", marginTop: 8 },
+  stars: { fontSize: 18, letterSpacing: 2, textAlign: "center", marginTop: 6 },
+  codeCard: { borderWidth: 1.5, borderStyle: "dashed", borderRadius: 12, padding: 12, marginTop: 8, alignItems: "center" },
+  codeText: { fontSize: 20, fontWeight: "900", letterSpacing: 2 },
+  codeHint: { fontSize: 10, marginTop: 4 },
+  confirmRow: { flexDirection: "row", alignItems: "center", gap: 10, borderWidth: 1, borderRadius: 10, padding: 11, marginTop: 8 },
+  confirmCheck: { width: 22, height: 22, borderRadius: 6, borderWidth: 1.5, alignItems: "center", justifyContent: "center" },
+  confirmTick: { color: "#FFFFFF", fontSize: 12, fontWeight: "900" },
+  reviewStars: { flexDirection: "row", flexWrap: "wrap", justifyContent: "center", gap: 7, marginTop: 10 },
+  reviewStarButton: { alignItems: "center", justifyContent: "center", minHeight: 44, minWidth: 44 },
+  reviewStar: { fontSize: 34 },
+  map: { borderRadius: 12, height: 108, marginTop: 5, overflow: "hidden" },
+  mapLine: {
+    backgroundColor: "rgba(255,255,255,0.72)",
+    height: 8,
+    position: "absolute",
+    width: "120%",
+  },
+  mapLineOne: { left: -20, top: 30, transform: [{ rotate: "8deg" }] },
+  mapLineTwo: { left: -25, top: 72, transform: [{ rotate: "-12deg" }] },
+  pin: { fontSize: 30, left: "46%", position: "absolute", top: 34 },
+  locationCopy: { paddingTop: 9 },
+  metric: { fontSize: 28, fontWeight: "900", marginTop: 4 },
+  track: { borderRadius: 999, height: 9, marginTop: 8, overflow: "hidden" },
+  progress: { borderRadius: 999, height: "100%" },
+  video: { alignItems: "center", borderRadius: 12, marginTop: 6, padding: 18 },
+  play: { fontSize: 28, marginBottom: 4 },
+} satisfies Record<string, ViewStyle | TextStyle | ImageStyle>;