@scalebun-release/react-native 2.5.0

package/src/features/engage/EngageVariantContent.tsx

@@ -0,0 +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>;