@scalebun-release/react-native 2.5.0

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

@@ -0,0 +1,2656 @@
+/**
+ * ScaleBun SDK — Engage In-App Message View (shared cross-platform JS overlay, D4)
+ *
+ * One renderer, seven layout branches — chosen from `InAppMessageConfig.layout`
+ * delivered by the config lane. App developers import and mount ONE component
+ * (`EngageInAppView` or via `EngagePromptProvider`) and write zero layout code:
+ * the SDK reads the layout field and auto-selects the correct branch.
+ *
+ * Layout → branch mapping (1:1, config-driven):
+ *   modal        → centered dialog (backdrop + rounded card)
+ *   fullscreen   → edge-to-edge takeover (no margins, no rounded corners)
+ *   bottom_sheet → slides up from bottom (rounded top corners)
+ *   top_banner   → absolute strip pinned to top
+ *   bottom_banner→ absolute strip pinned to bottom
+ *   tooltip      → small compact popup (anchored look, top-right close)
+ *   toast        → transient strip, auto-dismisses after 3 seconds
+ *
+ * Legacy `banner` (old wire value) gracefully maps to `top_banner`.
+ *
+ * Callbacks (unchanged):
+ *   onShow()      — fired once when first visible (provider records impression)
+ *   onCta(cta)    — primary CTA tap (provider emits `click`; deep link surfaced to host)
+ *   onComplete()  — guided flow finished (provider emits `completion`)
+ *   onDismiss()   — secondary CTA / close / backdrop / auto-dismiss (provider emits `dismiss`)
+ */
+
+import React, { Component, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, Modal, Platform, SafeAreaView, ScrollView, StatusBar, useWindowDimensions, View, Text, Image, KeyboardAvoidingView, Pressable } from 'react-native';
+import { useEngageAnchorRegistry } from './EngageAnchor';
+import { coachmarkAnchorError, normalizeCoachmarkSteps, normalizeLegacyAnchoredStep, resolveAnchoredSurfaceKind, resolveCoachmarkFinishMode, resolveCoachmarkStepIndex } from './engageCoachmarkTour';
+import { ZERO_ENGAGE_WINDOW_INSETS, useEngageWindowInsets } from './engageWindowInsets';
+import { logger } from '../../core/logger/internalLogger';
+import { resolveArchetypeContent } from './EngageArchetypeRenderers';
+import { resolveVariantContent } from './EngageVariantContent';
+import { resolveInAppMechanic, resolveInAppPresentation } from './engageVariantResolver';
+import { authoredPreviewGameResult, buildInAppGameRequest, inAppGameAllowedOutcomeIds, isInAppGameVariant, validateInAppGameResult } from './engageGameLogic';
+import { inAppOutcomeIconGlyph, inAppOutcomeTerminalForCta, resolveInAppOutcomeConfig, resolveInAppOutcomeTerminal } from './engageOutcome';
+import { resolveInAppMediaAspectRatio, resolveInAppMediaHeight } from './engageMediaSizing';
+import { resolveMultiStepSheetIndex, resolveMultiStepSheetLabels, resolveMultiStepSheetTerminalAction } from './engageMultiStepSheet';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+let gameAttemptSequence = 0;
+
+/** The seven distinct presentation branches (config-driven, 1:1 with layout strings). */
+
+/**
+ * Map the contract `layout` string onto one of the seven render branches.
+ * Legacy `banner` value → `top_banner` for backward compat with old configs.
+ * Any unknown future value → `modal` (safe default).
+ */
+export function resolveInAppLayout(layout) {
+  switch (layout) {
+    case 'modal':
+      return 'modal';
+    case 'fullscreen':
+      return 'fullscreen';
+    case 'bottom_sheet':
+      return 'bottom_sheet';
+    case 'top_banner':
+      return 'top_banner';
+    case 'bottom_banner':
+      return 'bottom_banner';
+    case 'tooltip':
+      return 'tooltip';
+    case 'toast':
+      return 'toast';
+    // legacy wire value (old configs sent 'banner' for top strip)
+    case 'banner':
+      return 'top_banner';
+    default:
+      return 'modal';
+  }
+}
+
+/** Props every in-app render branch receives (the Open/Closed contract). */
+
+/** A render branch for one in-app layout. */
+
+const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+const screenPosition = value => value === 'top' || value === 'center' || value === 'bottom' ? value : undefined;
+const androidInsetPadding = insets => {
+  if (Platform.OS !== 'android') return undefined;
+  return {
+    paddingTop: insets.top,
+    paddingRight: insets.right,
+    paddingBottom: insets.bottom,
+    paddingLeft: insets.left
+  };
+};
+
+/** Pure geometry shared by iOS/Android and covered without a native measurement mock. */
+export function resolveCoachmarkGeometry(anchor, viewport, preferred = 'auto', options = {}) {
+  const pad = 8;
+  const gap = 12;
+  const edge = 16;
+  const insets = options.insets ?? {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  };
+  const safeLeft = clamp(insets.left + edge, 0, viewport.width);
+  const safeRight = clamp(viewport.width - insets.right - edge, safeLeft, viewport.width);
+  const safeTop = clamp(insets.top + edge, 0, viewport.height);
+  const safeBottom = clamp(viewport.height - insets.bottom - edge, safeTop, viewport.height);
+  const requestedCardHeight = Math.min(Math.max(1, options.cardHeight ?? 160), Math.max(1, safeBottom - safeTop));
+  const left = clamp(anchor.x - pad, 0, viewport.width);
+  const top = clamp(anchor.y - pad, 0, viewport.height);
+  const right = clamp(anchor.x + anchor.width + pad, left, viewport.width);
+  const bottom = clamp(anchor.y + anchor.height + pad, top, viewport.height);
+  const spotlight = {
+    x: left,
+    y: top,
+    width: right - left,
+    height: bottom - top
+  };
+  const above = Math.max(0, top - gap - safeTop);
+  const below = Math.max(0, safeBottom - bottom - gap);
+  const verticalPlacement = () => preferred === 'top' ? above >= requestedCardHeight || above >= below ? 'top' : 'bottom' : preferred === 'bottom' ? below >= requestedCardHeight || below >= above ? 'bottom' : 'top' : below >= requestedCardHeight || below >= above ? 'bottom' : 'top';
+  const leftRoom = Math.max(0, left - gap - safeLeft);
+  const rightRoom = Math.max(0, safeRight - right - gap);
+  let placement;
+  if (preferred === 'left' || preferred === 'right') {
+    const preferredRoom = preferred === 'left' ? leftRoom : rightRoom;
+    const oppositeRoom = preferred === 'left' ? rightRoom : leftRoom;
+    if (preferredRoom >= 100 || preferredRoom >= 80 && preferredRoom >= oppositeRoom) {
+      placement = preferred;
+    } else if (oppositeRoom >= 80) {
+      placement = preferred === 'left' ? 'right' : 'left';
+    } else {
+      placement = below >= requestedCardHeight || below >= above ? 'bottom' : 'top';
+    }
+  } else {
+    placement = verticalPlacement();
+  }
+  const tooltipWidth = Math.max(0, Math.min(280, safeRight - safeLeft));
+  const anchorCenter = anchor.x + anchor.width / 2;
+  const verticalLeft = clamp(anchorCenter - tooltipWidth / 2, safeLeft, Math.max(safeLeft, safeRight - tooltipWidth));
+  const side = placement === 'left' || placement === 'right';
+  const sideWidth = Math.min(240, placement === 'left' ? leftRoom : rightRoom);
+  const tooltipLeft = side ? placement === 'left' ? left - gap - sideWidth : right + gap : verticalLeft;
+  const resolvedWidth = side ? sideWidth : tooltipWidth;
+  const tooltipMaxHeight = side ? Math.max(0, safeBottom - safeTop) : placement === 'top' ? above : below;
+  const cardHeight = Math.min(requestedCardHeight, tooltipMaxHeight);
+  const tooltipTop = clamp(anchor.y + anchor.height / 2 - cardHeight / 2, safeTop, Math.max(safeTop, safeBottom - cardHeight));
+  const verticalPosition = placement === 'bottom' ? {
+    top: clamp(bottom + gap, safeTop, Math.max(safeTop, safeBottom - cardHeight))
+  } : {
+    bottom: Math.max(0, viewport.height - top + gap)
+  };
+  return {
+    spotlight,
+    scrims: [{
+      x: 0,
+      y: 0,
+      width: viewport.width,
+      height: top
+    }, {
+      x: 0,
+      y: top,
+      width: left,
+      height: bottom - top
+    }, {
+      x: right,
+      y: top,
+      width: viewport.width - right,
+      height: bottom - top
+    }, {
+      x: 0,
+      y: bottom,
+      width: viewport.width,
+      height: viewport.height - bottom
+    }],
+    tooltip: {
+      left: tooltipLeft,
+      width: resolvedWidth,
+      ...(side ? {
+        top: tooltipTop
+      } : verticalPosition),
+      maxHeight: tooltipMaxHeight,
+      placement,
+      ...(side ? {
+        arrowTop: clamp(anchor.y + anchor.height / 2 - tooltipTop - 7, 20, Math.max(20, cardHeight - 34))
+      } : {
+        arrowLeft: clamp(anchorCenter - tooltipLeft - 7, 20, Math.max(20, resolvedWidth - 34))
+      })
+    }
+  };
+}
+
+// ─── Normalized theme contract (single source of truth, dashboard-matching) ────
+// The renderer NEVER hardcodes dashboard CSS per message. Instead each token has a
+// light/dark default copied ONCE from the dashboard's in-app preview look, and any
+// `spec.style` key overrides it. This is the design contract the dashboard preview,
+// the backend payload, and the SDK all share.
+
+// Default tokens — values mirror the dashboard `inapp.theme.css` in-app preview so a
+// message with no style overrides looks identical on device and in the dashboard.
+const LIGHT_DEFAULTS = {
+  accent: '#5B4FE0',
+  cardBg: '#FFFFFF',
+  titleColor: '#0E1422',
+  bodyColor: '#697586',
+  ctaText: '#FFFFFF',
+  secondaryColor: '#697586',
+  couponBg: '#F2F1FD',
+  couponFg: '#5B4FE0',
+  couponBorder: '#5B4FE0',
+  backdrop: 'rgba(15,20,32,0.4)'
+};
+const DARK_DEFAULTS = {
+  accent: '#5B4FE0',
+  cardBg: '#1E2128',
+  titleColor: '#E6E8EC',
+  bodyColor: '#697586',
+  ctaText: '#FFFFFF',
+  secondaryColor: '#9AA3AF',
+  couponBg: '#23203A',
+  couponFg: '#8B81F0',
+  couponBorder: '#8B81F0',
+  backdrop: 'rgba(15,20,32,0.4)'
+};
+const KNOWN_STYLE_KEYS = new Set(['accent', 'cardBg', 'titleColor', 'bodyColor', 'ctaText', 'secondaryColor', 'couponBg', 'couponFg', 'couponBorder', 'backdrop']);
+
+/** Resolve dashboard-matching tokens, applying `spec.style` overrides on top. */
+export function resolveTheme(spec) {
+  const dark = spec.dark === true;
+  const base = dark ? DARK_DEFAULTS : LIGHT_DEFAULTS;
+  const style = spec.style ?? {};
+  if (__DEV__) {
+    for (const k of Object.keys(style)) {
+      if (!KNOWN_STYLE_KEYS.has(k)) {
+        logger.warn(`[Engage] in-app spec.style has unknown token "${k}" — ignored. Known: ${[...KNOWN_STYLE_KEYS].join(', ')}`);
+      }
+    }
+  }
+  const pick = k => style[k] ?? base[k];
+  return {
+    dark,
+    rtl: spec.rtl === true,
+    accent: pick('accent'),
+    cardBg: pick('cardBg'),
+    titleColor: pick('titleColor'),
+    bodyColor: pick('bodyColor'),
+    ctaText: pick('ctaText'),
+    secondaryColor: pick('secondaryColor'),
+    couponBg: pick('couponBg'),
+    couponFg: pick('couponFg'),
+    couponBorder: pick('couponBorder'),
+    backdrop: pick('backdrop')
+  };
+}
+
+// ─── Shared primitives ────────────────────────────────────────────────────────
+
+function rtlText(theme) {
+  return theme.rtl ? {
+    writingDirection: 'rtl',
+    textAlign: 'right'
+  } : {};
+}
+function CouponChip({
+  code,
+  theme
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.coupon, {
+      backgroundColor: theme.couponBg,
+      borderColor: theme.couponBorder
+    }],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [styles.couponText, {
+        color: theme.couponFg
+      }],
+      children: code
+    })
+  });
+}
+function MessageContent({
+  spec,
+  theme
+}) {
+  const mediaHeight = resolveInAppMediaHeight(spec, 140, 320);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.contentBlock,
+    children: [spec.imageUrl ? /*#__PURE__*/_jsx(Image, {
+      accessibilityRole: "image",
+      source: {
+        uri: spec.imageUrl
+      },
+      style: [styles.image, mediaHeight === undefined ? null : {
+        height: mediaHeight
+      }],
+      resizeMode: "cover"
+    }) : null, spec.title ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.title, {
+        color: theme.titleColor
+      }, rtlText(theme)],
+      children: spec.title
+    }) : null, /*#__PURE__*/_jsx(Text, {
+      style: [styles.body, {
+        color: theme.bodyColor
+      }, rtlText(theme)],
+      children: spec.body
+    }), spec.coupon ? /*#__PURE__*/_jsx(CouponChip, {
+      code: spec.coupon,
+      theme: theme
+    }) : null]
+  });
+}
+function CtaRow({
+  spec,
+  theme,
+  onCta,
+  onDismiss,
+  onOutcome
+}) {
+  const cta = spec.cta;
+  const secondary = spec.secondaryCta;
+  if (!cta && !secondary) return null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.actions, theme.rtl ? {
+      flexDirection: 'row-reverse'
+    } : null],
+    children: [secondary ? /*#__PURE__*/_jsx(Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: secondary.label,
+      onPress: onDismiss,
+      style: styles.secondaryBtn,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.secondaryText, {
+          color: theme.secondaryColor
+        }],
+        children: secondary.label
+      })
+    }) : null, cta ? /*#__PURE__*/_jsx(Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: cta.label,
+      onPress: () => {
+        if (onOutcome) {
+          onOutcome({
+            fallback: inAppOutcomeTerminalForCta(cta)
+          });
+          return;
+        }
+        if (cta.action === 'dismiss') onDismiss();else onCta(cta);
+      },
+      style: [styles.primaryBtn, {
+        backgroundColor: theme.accent
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.primaryText, {
+          color: theme.ctaText
+        }],
+        children: cta.label
+      })
+    }) : null]
+  });
+}
+function InAppOutcomeModal({
+  outcome,
+  resultLabel,
+  theme,
+  onAction,
+  onRequestClose
+}) {
+  const announcement = [outcome.title, outcome.body, resultLabel].filter(Boolean).join('. ');
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: true,
+    transparent: true,
+    animationType: "fade",
+    statusBarTranslucent: true,
+    onRequestClose: onRequestClose,
+    onShow: () => AccessibilityInfo.announceForAccessibility(announcement),
+    children: /*#__PURE__*/_jsx(SafeAreaView, {
+      style: [outcomeStyles.backdrop, {
+        backgroundColor: theme.backdrop
+      }],
+      children: /*#__PURE__*/_jsxs(View, {
+        accessibilityViewIsModal: true,
+        style: [outcomeStyles.card, {
+          backgroundColor: theme.cardBg,
+          borderColor: theme.couponBorder
+        }],
+        children: [/*#__PURE__*/_jsxs(View, {
+          accessible: true,
+          accessibilityRole: "alert",
+          accessibilityLabel: announcement,
+          accessibilityLiveRegion: "assertive",
+          style: outcomeStyles.copy,
+          children: [/*#__PURE__*/_jsx(View, {
+            importantForAccessibility: "no-hide-descendants",
+            style: [outcomeStyles.icon, {
+              backgroundColor: theme.couponBg
+            }],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [outcomeStyles.iconText, {
+                color: theme.couponFg
+              }],
+              children: inAppOutcomeIconGlyph(outcome.icon)
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [outcomeStyles.title, {
+              color: theme.titleColor
+            }, rtlText(theme)],
+            children: outcome.title
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [outcomeStyles.body, {
+              color: theme.bodyColor
+            }, rtlText(theme)],
+            children: outcome.body
+          }), resultLabel ? /*#__PURE__*/_jsx(View, {
+            style: [outcomeStyles.result, {
+              backgroundColor: theme.couponBg
+            }],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [outcomeStyles.resultText, {
+                color: theme.couponFg
+              }, rtlText(theme)],
+              children: resultLabel
+            })
+          }) : null]
+        }), /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: outcome.buttonLabel,
+          onPress: onAction,
+          style: [outcomeStyles.button, {
+            backgroundColor: theme.accent
+          }],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [outcomeStyles.buttonText, {
+              color: theme.ctaText
+            }],
+            children: outcome.buttonLabel
+          })
+        })]
+      })
+    })
+  });
+}
+
+/** Default legacy content when a registry mechanic does not provide a custom body. */
+function BranchContent(props) {
+  if (props.children !== undefined) return /*#__PURE__*/_jsx(_Fragment, {
+    children: props.children
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(MessageContent, {
+      spec: props.spec,
+      theme: props.theme
+    }), /*#__PURE__*/_jsx(CtaRow, {
+      ...props
+    })]
+  });
+}
+function CloseBtn({
+  onPress,
+  style
+}) {
+  return /*#__PURE__*/_jsx(Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: "Dismiss",
+    onPress: onPress,
+    hitSlop: 8,
+    style: [styles.closeBtn, style],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: styles.closeBtnText,
+      children: "\xD7"
+    })
+  });
+}
+function ScreenEdgeSurface({
+  edge,
+  contentStyle,
+  children
+}) {
+  const insets = useEngageWindowInsets(true) ?? ZERO_ENGAGE_WINDOW_INSETS;
+  const content = /*#__PURE__*/_jsx(View, {
+    pointerEvents: "box-none",
+    style: contentStyle,
+    children: children
+  });
+  return /*#__PURE__*/_jsx(SafeAreaView, {
+    pointerEvents: "box-none",
+    style: [styles.screenEdge, edge === 'top' ? styles.screenEdgeTop : styles.screenEdgeBottom, androidInsetPadding(insets)],
+    children: edge === 'bottom' ? /*#__PURE__*/_jsx(KeyboardAvoidingView, {
+      pointerEvents: "box-none",
+      behavior: Platform.OS === 'ios' ? 'padding' : undefined,
+      style: styles.screenEdgeKeyboard,
+      children: content
+    }) : content
+  });
+}
+
+// ─── 1. modal — centered dialog ───────────────────────────────────────────────
+
+function ModalInApp(props) {
+  const {
+    spec,
+    theme,
+    onDismiss
+  } = props;
+  const centerDrawer = props.variantKey === 'center_drawer';
+  const position = screenPosition(spec.ext?.position) ?? screenPosition(spec.ext?.layoutPosition) ?? 'center';
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: true,
+    transparent: true,
+    animationType: "fade",
+    statusBarTranslucent: false,
+    onRequestClose: onDismiss,
+    children: /*#__PURE__*/_jsx(SafeAreaView, {
+      style: [styles.modalSafeArea, {
+        backgroundColor: theme.backdrop
+      }],
+      children: /*#__PURE__*/_jsx(KeyboardAvoidingView, {
+        behavior: Platform.OS === 'ios' ? 'padding' : 'height',
+        style: styles.keyboardAvoider,
+        children: /*#__PURE__*/_jsx(Pressable, {
+          style: [styles.modalBackdrop, position === 'top' ? styles.modalBackdropTop : null, position === 'bottom' ? styles.modalBackdropBottom : null, {
+            backgroundColor: theme.backdrop
+          }],
+          onPress: onDismiss,
+          accessibilityRole: "none",
+          children: /*#__PURE__*/_jsxs(Pressable, {
+            style: [styles.modalCard, centerDrawer && styles.centerDrawerCard, {
+              backgroundColor: theme.cardBg
+            }],
+            onPress: () => {},
+            accessibilityRole: "none",
+            children: [/*#__PURE__*/_jsx(CloseBtn, {
+              onPress: onDismiss,
+              style: styles.modalClosePos
+            }), /*#__PURE__*/_jsx(ScrollView, {
+              style: styles.modalScroll,
+              contentContainerStyle: styles.modalScrollContent,
+              showsVerticalScrollIndicator: false,
+              keyboardShouldPersistTaps: "handled",
+              children: /*#__PURE__*/_jsx(BranchContent, {
+                ...props
+              })
+            })]
+          })
+        })
+      })
+    })
+  });
+}
+
+// ─── 2. fullscreen — edge-to-edge takeover ────────────────────────────────────
+
+function FullScreenInApp(props) {
+  const {
+    spec,
+    theme,
+    onDismiss
+  } = props;
+  const mediaAspectRatio = resolveInAppMediaAspectRatio(spec, 16 / 9);
+  const mediaMaxHeight = resolveInAppMediaHeight(spec, 320, 480);
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: true,
+    transparent: false,
+    animationType: "slide",
+    presentationStyle: "fullScreen",
+    onRequestClose: onDismiss,
+    children: /*#__PURE__*/_jsxs(SafeAreaView, {
+      style: [styles.fullscreenCard, {
+        backgroundColor: theme.cardBg
+      }],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.fullscreenHeader,
+        children: /*#__PURE__*/_jsx(CloseBtn, {
+          onPress: onDismiss
+        })
+      }), /*#__PURE__*/_jsxs(ScrollView, {
+        style: styles.fullscreenScroll,
+        contentContainerStyle: styles.fullscreenScrollContent,
+        showsVerticalScrollIndicator: false,
+        keyboardShouldPersistTaps: "handled",
+        children: [props.children === undefined && spec.imageUrl ? /*#__PURE__*/_jsx(Image, {
+          accessibilityRole: "image",
+          source: {
+            uri: spec.imageUrl
+          },
+          style: [styles.fullscreenImage, mediaAspectRatio === undefined ? null : {
+            aspectRatio: mediaAspectRatio,
+            maxHeight: mediaMaxHeight
+          }],
+          resizeMode: "cover"
+        }) : null, /*#__PURE__*/_jsx(View, {
+          style: styles.fullscreenContent,
+          children: props.children !== undefined ? /*#__PURE__*/_jsx(_Fragment, {
+            children: props.children
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [spec.title ? /*#__PURE__*/_jsx(Text, {
+              style: [styles.fullscreenTitle, {
+                color: theme.titleColor
+              }, rtlText(theme)],
+              children: spec.title
+            }) : null, spec.body ? /*#__PURE__*/_jsx(Text, {
+              style: [styles.fullscreenBody, {
+                color: theme.bodyColor
+              }, rtlText(theme)],
+              children: spec.body
+            }) : null, spec.coupon ? /*#__PURE__*/_jsx(CouponChip, {
+              code: spec.coupon,
+              theme: theme
+            }) : null, /*#__PURE__*/_jsx(CtaRow, {
+              ...props
+            })]
+          })
+        })]
+      })]
+    })
+  });
+}
+
+// ─── 3. bottom_sheet — slides up from bottom ──────────────────────────────────
+
+function SheetSurface({
+  theme,
+  onDismiss,
+  children
+}) {
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: true,
+    transparent: true,
+    animationType: "slide",
+    statusBarTranslucent: false,
+    onRequestClose: onDismiss,
+    children: /*#__PURE__*/_jsx(KeyboardAvoidingView, {
+      behavior: Platform.OS === 'ios' ? 'padding' : 'height',
+      style: styles.keyboardAvoider,
+      children: /*#__PURE__*/_jsx(Pressable, {
+        style: [styles.sheetBackdrop, {
+          backgroundColor: theme.backdrop
+        }],
+        onPress: onDismiss,
+        accessibilityRole: "none",
+        children: /*#__PURE__*/_jsx(Pressable, {
+          style: [styles.sheetCard, {
+            backgroundColor: theme.cardBg
+          }],
+          onPress: () => {},
+          accessibilityRole: "none",
+          children: /*#__PURE__*/_jsx(SafeAreaView, {
+            style: [styles.sheetSafeArea, {
+              backgroundColor: theme.cardBg
+            }],
+            children: /*#__PURE__*/_jsxs(ScrollView, {
+              style: styles.sheetScroll,
+              contentContainerStyle: styles.sheetContent,
+              showsVerticalScrollIndicator: false,
+              keyboardShouldPersistTaps: "handled",
+              children: [/*#__PURE__*/_jsx(View, {
+                style: styles.sheetHandle
+              }), children]
+            })
+          })
+        })
+      })
+    })
+  });
+}
+function BottomSheetInApp(props) {
+  return /*#__PURE__*/_jsx(SheetSurface, {
+    theme: props.theme,
+    onDismiss: props.onDismiss,
+    children: /*#__PURE__*/_jsx(BranchContent, {
+      ...props
+    })
+  });
+}
+
+// ─── Additive surfaces — canonical variants outside the legacy seven ────────
+
+function MultiStepSheetInApp(props) {
+  const rawSteps = Array.isArray(props.spec.ext?.steps) ? props.spec.ext.steps : [];
+  const steps = rawSteps.filter(step => step !== null && typeof step === 'object' && !Array.isArray(step));
+  const [stepIndex, setStepIndex] = useState(0);
+  const stepCount = steps.length;
+  const current = steps[Math.min(stepIndex, Math.max(0, stepCount - 1))];
+  const title = typeof current?.title === 'string' ? current.title : props.spec.title;
+  const body = typeof current?.body === 'string' ? current.body : props.spec.body;
+  const image = typeof current?.image === 'string' ? current.image : typeof current?.stepImage === 'string' ? current.stepImage : undefined;
+  const mediaHeight = resolveInAppMediaHeight(props.spec, 140, 320);
+  const last = stepCount === 0 || stepIndex >= stepCount - 1;
+  const labels = resolveMultiStepSheetLabels(props.spec);
+  const progressAt = index => stepCount > 0 ? (index + 1) / stepCount : 0;
+  const runTerminal = action => {
+    if (action.kind === 'cta') props.onCta(action.cta);else props.onDismiss();
+  };
+  const back = () => {
+    const previousIndex = resolveMultiStepSheetIndex(stepIndex, stepCount, 'back');
+    setStepIndex(previousIndex);
+    props.onInteraction?.({
+      mechanic: 'multi_step_sheet',
+      phase: 'progress',
+      progress: progressAt(previousIndex),
+      result: 'back',
+      value: previousIndex + 1
+    });
+  };
+  const skip = () => {
+    props.onInteraction?.({
+      mechanic: 'multi_step_sheet',
+      phase: 'decision',
+      progress: progressAt(stepIndex),
+      result: 'skipped',
+      value: stepIndex + 1
+    });
+    runTerminal(resolveMultiStepSheetTerminalAction(props.spec.secondaryCta));
+  };
+  const next = () => {
+    if (!last) {
+      const nextIndex = resolveMultiStepSheetIndex(stepIndex, stepCount, 'next');
+      setStepIndex(nextIndex);
+      props.onInteraction?.({
+        mechanic: 'multi_step_sheet',
+        phase: 'progress',
+        progress: progressAt(nextIndex),
+        result: 'next',
+        value: nextIndex + 1
+      });
+      return;
+    }
+    props.onInteraction?.({
+      mechanic: 'multi_step_sheet',
+      phase: 'completed',
+      progress: 1,
+      result: 'finished',
+      value: stepCount > 0 ? stepCount : 1
+    });
+    const terminal = resolveMultiStepSheetTerminalAction(props.spec.cta);
+    if (props.onOutcome) {
+      props.onOutcome({
+        fallback: terminal.kind === 'cta' ? terminal : {
+          kind: 'dismiss'
+        }
+      });
+      return;
+    }
+    runTerminal(terminal);
+  };
+  return /*#__PURE__*/_jsxs(SheetSurface, {
+    theme: props.theme,
+    onDismiss: props.onDismiss,
+    children: [stepCount > 1 ? /*#__PURE__*/_jsxs(View, {
+      accessibilityRole: "progressbar",
+      accessibilityLabel: `Step ${stepIndex + 1} of ${stepCount}`,
+      accessibilityValue: {
+        min: 1,
+        max: stepCount,
+        now: stepIndex + 1
+      },
+      style: styles.stepProgress,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.stepLabel, {
+          color: props.theme.secondaryColor
+        }],
+        children: `Step ${stepIndex + 1} of ${stepCount}`
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.stepTrack,
+        children: /*#__PURE__*/_jsx(View, {
+          style: [styles.stepFill, {
+            backgroundColor: props.theme.accent,
+            width: `${(stepIndex + 1) / stepCount * 100}%`
+          }]
+        })
+      })]
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: styles.contentBlock,
+      children: [image ? /*#__PURE__*/_jsx(Image, {
+        source: {
+          uri: image
+        },
+        resizeMode: "cover",
+        style: [styles.image, mediaHeight === undefined ? null : {
+          height: mediaHeight
+        }]
+      }) : null, title ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.title, {
+          color: props.theme.titleColor
+        }],
+        children: title
+      }) : null, body ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.body, {
+          color: props.theme.bodyColor
+        }],
+        children: body
+      }) : null]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.actions,
+      children: [stepIndex > 0 ? /*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.back,
+        onPress: back,
+        style: styles.secondaryBtn,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.secondaryText, {
+            color: props.theme.secondaryColor
+          }],
+          children: labels.back
+        })
+      }) : null, /*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.skip,
+        onPress: skip,
+        style: styles.secondaryBtn,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.secondaryText, {
+            color: props.theme.secondaryColor
+          }],
+          children: labels.skip
+        })
+      }), /*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: last ? labels.finish : labels.next,
+        onPress: next,
+        style: [styles.primaryBtn, {
+          backgroundColor: props.theme.accent
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.primaryText, {
+            color: props.theme.ctaText
+          }],
+          children: last ? labels.finish : labels.next
+        })
+      })]
+    })]
+  });
+}
+function SideSheetInApp(props) {
+  const {
+    theme,
+    onDismiss
+  } = props;
+  const side = props.spec.ext?.sidePosition === 'left' ? 'left' : 'right';
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: true,
+    transparent: true,
+    animationType: "fade",
+    statusBarTranslucent: false,
+    onRequestClose: onDismiss,
+    children: /*#__PURE__*/_jsx(KeyboardAvoidingView, {
+      behavior: Platform.OS === 'ios' ? 'padding' : 'height',
+      style: styles.keyboardAvoider,
+      children: /*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "none",
+        onPress: onDismiss,
+        style: [styles.sideSheetBackdrop, {
+          backgroundColor: theme.backdrop
+        }, side === 'left' ? styles.sideSheetLeft : styles.sideSheetRight],
+        children: /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "none",
+          onPress: () => {},
+          style: [styles.sideSheetPanel, {
+            backgroundColor: theme.cardBg
+          }, side === 'left' ? styles.sideSheetPanelLeft : styles.sideSheetPanelRight],
+          children: /*#__PURE__*/_jsxs(SafeAreaView, {
+            style: styles.sideSheetSafeArea,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.sideSheetHeader,
+              children: /*#__PURE__*/_jsx(CloseBtn, {
+                onPress: onDismiss
+              })
+            }), /*#__PURE__*/_jsx(ScrollView, {
+              style: styles.sideSheetScroll,
+              contentContainerStyle: styles.sideSheetContent,
+              showsVerticalScrollIndicator: false,
+              keyboardShouldPersistTaps: "handled",
+              children: /*#__PURE__*/_jsx(BranchContent, {
+                ...props
+              })
+            })]
+          })
+        })
+      })
+    })
+  });
+}
+function PeekCardInApp(props) {
+  const [expanded, setExpanded] = useState(false);
+  const peekLabel = typeof props.spec.ext?.peekLabel === 'string' ? props.spec.ext.peekLabel : 'View more';
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: true,
+    transparent: true,
+    animationType: "slide",
+    statusBarTranslucent: false,
+    onRequestClose: props.onDismiss,
+    children: /*#__PURE__*/_jsx(KeyboardAvoidingView, {
+      behavior: Platform.OS === 'ios' ? 'padding' : 'height',
+      style: styles.peekRoot,
+      pointerEvents: "box-none",
+      children: expanded ? /*#__PURE__*/_jsx(Pressable, {
+        style: [styles.peekExpanded, {
+          backgroundColor: props.theme.cardBg
+        }],
+        onPress: () => {},
+        children: /*#__PURE__*/_jsx(SafeAreaView, {
+          style: [styles.peekSafeArea, {
+            backgroundColor: props.theme.cardBg
+          }],
+          children: /*#__PURE__*/_jsxs(ScrollView, {
+            style: styles.peekScroll,
+            contentContainerStyle: styles.peekExpandedContent,
+            showsVerticalScrollIndicator: false,
+            keyboardShouldPersistTaps: "handled",
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.sheetHandle
+            }), /*#__PURE__*/_jsx(CloseBtn, {
+              onPress: props.onDismiss,
+              style: styles.peekClose
+            }), /*#__PURE__*/_jsx(BranchContent, {
+              ...props
+            })]
+          })
+        })
+      }) : /*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: peekLabel,
+        onPress: () => {
+          setExpanded(true);
+          props.onInteraction?.({
+            mechanic: 'peek_card',
+            phase: 'started'
+          });
+        },
+        style: [styles.peekCollapsed, {
+          backgroundColor: props.theme.cardBg,
+          borderColor: props.theme.accent
+        }],
+        children: /*#__PURE__*/_jsx(SafeAreaView, {
+          style: [styles.peekSafeArea, {
+            backgroundColor: props.theme.cardBg
+          }],
+          children: /*#__PURE__*/_jsxs(View, {
+            style: styles.peekCollapsedContent,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.sheetHandle
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.peekLabel, {
+                color: props.theme.titleColor
+              }],
+              children: peekLabel
+            })]
+          })
+        })
+      })
+    })
+  });
+}
+const ADDITIVE_INAPP_RENDERERS = {
+  multiStepSheet: MultiStepSheetInApp,
+  sideSheet: SideSheetInApp
+};
+
+// ─── 4. top_banner — strip pinned to top ─────────────────────────────────────
+
+function TopBannerInApp(props) {
+  const {
+    spec,
+    theme,
+    onDismiss
+  } = props;
+  const window = useWindowDimensions();
+  const edge = screenPosition(spec.ext?.position) ?? screenPosition(spec.ext?.layoutPosition) ?? 'top';
+  const rawProgress = spec.ext?.progress;
+  const stickyProgress = props.variantKey === 'sticky_header_bar' && typeof rawProgress === 'number' ? clamp(rawProgress <= 1 ? rawProgress * 100 : rawProgress, 0, 100) : null;
+  return /*#__PURE__*/_jsx(ScreenEdgeSurface, {
+    edge: edge === 'bottom' ? 'bottom' : 'top',
+    contentStyle: styles.bannerWrap,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [styles.bannerCard, {
+        backgroundColor: theme.cardBg
+      }, theme.rtl ? {
+        flexDirection: 'row-reverse'
+      } : null],
+      children: [/*#__PURE__*/_jsxs(ScrollView, {
+        style: [styles.bannerContent, {
+          maxHeight: Math.max(120, window.height * 0.45)
+        }],
+        showsVerticalScrollIndicator: false,
+        keyboardShouldPersistTaps: "handled",
+        children: [props.variantKey === 'sticky_header_bar' ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.stickyLabel, {
+            color: theme.accent
+          }],
+          children: "PINNED"
+        }) : null, /*#__PURE__*/_jsx(BranchContent, {
+          ...props
+        }), stickyProgress !== null ? /*#__PURE__*/_jsx(View, {
+          accessibilityRole: "progressbar",
+          accessibilityValue: {
+            min: 0,
+            max: 100,
+            now: Math.round(stickyProgress)
+          },
+          style: styles.stickyTrack,
+          children: /*#__PURE__*/_jsx(View, {
+            style: [styles.stickyFill, {
+              backgroundColor: theme.accent,
+              width: `${stickyProgress}%`
+            }]
+          })
+        }) : null]
+      }), /*#__PURE__*/_jsx(CloseBtn, {
+        onPress: onDismiss,
+        style: styles.bannerClosePos
+      })]
+    })
+  });
+}
+
+// ─── 5. bottom_banner — strip pinned to bottom ───────────────────────────────
+
+function BottomBannerInApp(props) {
+  const {
+    spec,
+    theme,
+    onDismiss
+  } = props;
+  const window = useWindowDimensions();
+  const edge = screenPosition(spec.ext?.position) ?? screenPosition(spec.ext?.layoutPosition) ?? 'bottom';
+  return /*#__PURE__*/_jsx(ScreenEdgeSurface, {
+    edge: edge === 'top' ? 'top' : 'bottom',
+    contentStyle: styles.bannerWrap,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [styles.bannerCard, {
+        backgroundColor: theme.cardBg
+      }, theme.rtl ? {
+        flexDirection: 'row-reverse'
+      } : null],
+      children: [/*#__PURE__*/_jsxs(ScrollView, {
+        style: [styles.bannerContent, {
+          maxHeight: Math.max(120, window.height * 0.45)
+        }],
+        showsVerticalScrollIndicator: false,
+        keyboardShouldPersistTaps: "handled",
+        children: [props.variantKey === 'sticky_footer_bar' ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.stickyLabel, {
+            color: theme.accent
+          }],
+          children: "PINNED"
+        }) : null, /*#__PURE__*/_jsx(BranchContent, {
+          ...props
+        })]
+      }), /*#__PURE__*/_jsx(CloseBtn, {
+        onPress: onDismiss,
+        style: styles.bannerClosePos
+      })]
+    })
+  });
+}
+
+// ─── 6. floating tooltip (bubble fallback only) ──────────────────────────────
+
+function FloatingTooltipInApp(props) {
+  const {
+    spec,
+    theme,
+    onDismiss
+  } = props;
+  const window = useWindowDimensions();
+  const floatingBubble = props.variantKey === 'floating_bubble';
+  const [expanded, setExpanded] = useState(!floatingBubble);
+  const authoredPosition = typeof spec.ext?.position === 'string' ? spec.ext.position.toLowerCase() : typeof spec.ext?.layoutPosition === 'string' ? spec.ext.layoutPosition.toLowerCase() : 'bottom-right';
+  const edge = authoredPosition.includes('top') ? 'top' : 'bottom';
+  const edgeStyle = [styles.floatingEdge, authoredPosition.includes('left') ? styles.edgeAlignLeft : styles.edgeAlignRight];
+  if (floatingBubble && !expanded) {
+    const label = typeof spec.ext?.bubbleLabel === 'string' ? spec.ext.bubbleLabel : 'Open';
+    return /*#__PURE__*/_jsx(ScreenEdgeSurface, {
+      edge: edge,
+      contentStyle: edgeStyle,
+      children: /*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: label,
+        onPress: () => {
+          setExpanded(true);
+          props.onInteraction?.({
+            mechanic: 'floating_bubble',
+            phase: 'started',
+            value: spec.ext?.tapAction
+          });
+        },
+        style: [styles.floatingBubble, {
+          backgroundColor: theme.accent
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.floatingBubbleText, {
+            color: theme.ctaText
+          }],
+          children: label
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(ScreenEdgeSurface, {
+    edge: edge,
+    contentStyle: edgeStyle,
+    children: /*#__PURE__*/_jsx(View, {
+      style: [styles.floatingPanel, {
+        maxHeight: Math.max(120, window.height * 0.6)
+      }],
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.tooltipCard, {
+          backgroundColor: theme.cardBg
+        }],
+        children: [/*#__PURE__*/_jsx(CloseBtn, {
+          onPress: onDismiss,
+          style: styles.tooltipClosePos
+        }), /*#__PURE__*/_jsx(ScrollView, {
+          style: styles.floatingScroll,
+          showsVerticalScrollIndicator: false,
+          keyboardShouldPersistTaps: "handled",
+          children: props.children !== undefined ? /*#__PURE__*/_jsx(_Fragment, {
+            children: props.children
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [spec.title ? /*#__PURE__*/_jsx(Text, {
+              style: [styles.tooltipTitle, {
+                color: theme.titleColor
+              }, rtlText(theme)],
+              children: spec.title
+            }) : null, /*#__PURE__*/_jsx(Text, {
+              style: [styles.tooltipBody, {
+                color: theme.bodyColor
+              }, rtlText(theme)],
+              children: spec.body
+            }), spec.coupon ? /*#__PURE__*/_jsx(CouponChip, {
+              code: spec.coupon,
+              theme: theme
+            }) : null, spec.cta ? /*#__PURE__*/_jsx(Pressable, {
+              accessibilityRole: "button",
+              accessibilityLabel: spec.cta.label,
+              onPress: () => spec.cta.action === 'dismiss' ? onDismiss() : props.onCta(spec.cta),
+              style: styles.tooltipCta,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.tooltipCtaText, {
+                  color: theme.accent
+                }],
+                children: spec.cta.label
+              })
+            }) : null]
+          })
+        })]
+      })
+    })
+  });
+}
+
+/** A placement-only micro popover; unlike coachmarks it does not require a measured anchor. */
+function MiniPopoverInApp(props) {
+  const placement = props.spec.ext?.placement;
+  const atBottom = placement === 'bottom';
+  const window = useWindowDimensions();
+  return /*#__PURE__*/_jsx(ScreenEdgeSurface, {
+    edge: atBottom ? 'bottom' : 'top',
+    contentStyle: [styles.floatingEdge, placement === 'left' ? styles.edgeAlignLeft : styles.edgeAlignRight],
+    children: /*#__PURE__*/_jsx(View, {
+      style: [styles.miniPopoverPanel, {
+        maxHeight: Math.max(120, window.height * 0.6)
+      }],
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.tooltipCard, {
+          backgroundColor: props.theme.cardBg
+        }],
+        children: [/*#__PURE__*/_jsx(CloseBtn, {
+          onPress: props.onDismiss,
+          style: styles.tooltipClosePos
+        }), /*#__PURE__*/_jsx(ScrollView, {
+          style: styles.floatingScroll,
+          showsVerticalScrollIndicator: false,
+          keyboardShouldPersistTaps: "handled",
+          children: /*#__PURE__*/_jsx(BranchContent, {
+            ...props
+          })
+        })]
+      })
+    })
+  });
+}
+const rectStyle = rect => ({
+  position: 'absolute',
+  left: rect.x,
+  top: rect.y,
+  width: rect.width,
+  height: rect.height
+});
+/** Measure an anchor relative to its overlay and repeat after rotation/layout changes. */
+function useMeasuredAnchor({
+  anchorKey,
+  readyKey = anchorKey,
+  onReady,
+  onRenderError
+}) {
+  const registry = useEngageAnchorRegistry();
+  const overlayRef = useRef(null);
+  const onReadyRef = useRef(onReady);
+  const onErrorRef = useRef(onRenderError);
+  const readyKeyRef = useRef(null);
+  const [measured, setMeasured] = useState(null);
+  const [overlayRevision, setOverlayRevision] = useState(0);
+  const window = useWindowDimensions();
+  onReadyRef.current = onReady;
+  onErrorRef.current = onRenderError;
+  const remeasureOverlay = useCallback(() => {
+    setOverlayRevision(revision => revision + 1);
+  }, []);
+  useEffect(() => {
+    setMeasured(null);
+    readyKeyRef.current = null;
+    if (!anchorKey) {
+      onErrorRef.current?.('missing_anchor_key');
+      return;
+    }
+    let cancelled = false;
+    let exhausted = false;
+    let attempts = 0;
+    let retry = null;
+    const failOrRetry = () => {
+      if (cancelled || exhausted) return;
+      if (attempts >= 20) {
+        exhausted = true;
+        onErrorRef.current?.(coachmarkAnchorError(anchorKey));
+        return;
+      }
+      attempts += 1;
+      retry = setTimeout(measure, 100);
+    };
+    const measure = () => {
+      if (cancelled || exhausted) return;
+      const overlay = overlayRef.current;
+      if (!overlay) {
+        failOrRetry();
+        return;
+      }
+      overlay.measureInWindow((overlayX, overlayY, overlayWidth, overlayHeight) => {
+        if (cancelled || overlayWidth <= 0 || overlayHeight <= 0) {
+          failOrRetry();
+          return;
+        }
+        const found = registry.measure(anchorKey, anchor => {
+          if (cancelled) return;
+          if (!anchor) {
+            failOrRetry();
+            return;
+          }
+          const local = {
+            x: anchor.x - overlayX,
+            y: anchor.y - overlayY,
+            width: anchor.width,
+            height: anchor.height
+          };
+          const visible = local.x + local.width > 0 && local.y + local.height > 0 && local.x < overlayWidth && local.y < overlayHeight;
+          if (!visible) {
+            failOrRetry();
+            return;
+          }
+          setMeasured({
+            anchorKey,
+            anchor: local,
+            viewport: {
+              width: overlayWidth,
+              height: overlayHeight
+            }
+          });
+          if (readyKeyRef.current !== readyKey) {
+            readyKeyRef.current = readyKey;
+            onReadyRef.current?.();
+          }
+        });
+        if (!found) failOrRetry();
+      });
+    };
+    const unsubscribe = registry.subscribe(anchorKey, () => {
+      attempts = 0;
+      if (retry) clearTimeout(retry);
+      measure();
+    });
+    const kickoff = setTimeout(measure, 0);
+    return () => {
+      cancelled = true;
+      clearTimeout(kickoff);
+      if (retry) clearTimeout(retry);
+      unsubscribe();
+    };
+  }, [anchorKey, overlayRevision, readyKey, registry, window.height, window.width]);
+  return {
+    overlayRef,
+    measured: measured?.anchorKey === anchorKey ? measured : null,
+    remeasureOverlay
+  };
+}
+/** Shared measured card/arrow; spotlight and tooltip differ only in their root. */
+function AnchoredCard({
+  geometry,
+  theme,
+  onDismiss,
+  onLayout,
+  children
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.coachmarkTooltipWrap, {
+      left: geometry.tooltip.left,
+      width: geometry.tooltip.width,
+      ...(geometry.tooltip.top !== undefined ? {
+        top: geometry.tooltip.top
+      } : {
+        bottom: geometry.tooltip.bottom
+      })
+    }],
+    children: [/*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      style: [styles.coachmarkArrow, {
+        ...(geometry.tooltip.arrowLeft !== undefined ? {
+          left: geometry.tooltip.arrowLeft
+        } : {
+          top: geometry.tooltip.arrowTop
+        }),
+        backgroundColor: theme.cardBg
+      }, geometry.tooltip.placement === 'bottom' ? styles.coachmarkArrowTop : geometry.tooltip.placement === 'top' ? styles.coachmarkArrowBottom : geometry.tooltip.placement === 'left' ? styles.coachmarkArrowRight : styles.coachmarkArrowLeft]
+    }), /*#__PURE__*/_jsxs(View, {
+      onLayout: onLayout,
+      style: [styles.coachmarkCard, {
+        backgroundColor: theme.cardBg,
+        maxHeight: geometry.tooltip.maxHeight
+      }],
+      children: [/*#__PURE__*/_jsx(CloseBtn, {
+        onPress: onDismiss,
+        style: styles.tooltipClosePos
+      }), /*#__PURE__*/_jsx(ScrollView, {
+        style: styles.coachmarkScroll,
+        showsVerticalScrollIndicator: false,
+        keyboardShouldPersistTaps: "handled",
+        children: children
+      })]
+    })]
+  });
+}
+const coachmarkLabel = (value, fallback) => typeof value === 'string' && value.trim() ? value.trim() : fallback;
+
+/** Plain tooltip: attached to an anchor without dimming or blocking the host screen. */
+function AnchoredTooltipInApp(props) {
+  const {
+    spec,
+    theme,
+    onDismiss
+  } = props;
+  const step = useMemo(() => normalizeLegacyAnchoredStep(spec), [spec]);
+  const [cardHeight, setCardHeight] = useState(160);
+  // Android's RN content root commonly consumes system bars; iOS needs the raw
+  // safe-area because an absolute sibling can extend beneath a cutout.
+  const nativeInsets = useEngageWindowInsets(Platform.OS === 'android');
+  const safeInsets = nativeInsets ?? (Platform.OS === 'ios' ? {
+    top: 44,
+    right: 0,
+    bottom: 34,
+    left: 0
+  } : ZERO_ENGAGE_WINDOW_INSETS);
+  const {
+    overlayRef,
+    measured,
+    remeasureOverlay
+  } = useMeasuredAnchor({
+    anchorKey: step?.anchorKey ?? '',
+    onReady: props.onReady,
+    onRenderError: props.onRenderError
+  });
+  const geometry = measured && step ? resolveCoachmarkGeometry(measured.anchor, measured.viewport, step.placement, {
+    cardHeight,
+    insets: safeInsets
+  }) : null;
+  const measureCard = useCallback(event => {
+    const next = Math.round(event.nativeEvent.layout.height);
+    if (next > 0) setCardHeight(current => Math.abs(current - next) > 1 ? next : current);
+  }, []);
+  return /*#__PURE__*/_jsx(View, {
+    ref: overlayRef,
+    collapsable: false,
+    pointerEvents: "box-none",
+    style: styles.anchoredTooltipRoot,
+    onLayout: remeasureOverlay,
+    children: geometry && step ? /*#__PURE__*/_jsxs(AnchoredCard, {
+      geometry: geometry,
+      theme: theme,
+      onDismiss: onDismiss,
+      onLayout: measureCard,
+      children: [props.variantKey === 'fab_prompt' ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.coachmarkEyebrow, {
+          color: theme.accent
+        }],
+        children: "\uFF0B QUICK ACTION"
+      }) : null, step.title ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.tooltipTitle, {
+          color: theme.titleColor
+        }, rtlText(theme)],
+        children: step.title
+      }) : null, step.body ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.tooltipBody, {
+          color: theme.bodyColor
+        }, rtlText(theme)],
+        children: step.body
+      }) : null, step.cta ? /*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: step.cta.label,
+        onPress: () => step.cta.action === 'dismiss' ? onDismiss() : props.onCta(step.cta),
+        style: styles.tooltipCta,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.tooltipCtaText, {
+            color: theme.accent
+          }],
+          children: step.cta.label
+        })
+      }) : null]
+    }) : null
+  });
+}
+
+/** Guided tour: one measured spotlight per ordered step, with full-screen scrim. */
+function CoachmarkSpotlightInApp(props) {
+  const {
+    spec,
+    theme,
+    onDismiss
+  } = props;
+  const steps = useMemo(() => normalizeCoachmarkSteps(spec), [spec]);
+  const [stepIndex, setStepIndex] = useState(0);
+  const [cardHeight, setCardHeight] = useState(160);
+  const viewedStepsRef = useRef(new Set());
+  const step = steps[stepIndex];
+  const nativeInsets = useEngageWindowInsets();
+  const safeInsets = nativeInsets ?? (Platform.OS === 'ios' ? {
+    top: 59,
+    right: 44,
+    bottom: 34,
+    left: 44
+  } : {
+    top: StatusBar.currentHeight ?? 0,
+    right: 0,
+    bottom: 16,
+    left: 0
+  });
+  useEffect(() => {
+    setStepIndex(0);
+    setCardHeight(160);
+    viewedStepsRef.current.clear();
+  }, [steps]);
+  const handleStepReady = useCallback(() => {
+    props.onReady?.();
+    if (viewedStepsRef.current.has(stepIndex)) return;
+    viewedStepsRef.current.add(stepIndex);
+    props.onInteraction?.({
+      mechanic: 'coachmark_spotlight',
+      phase: stepIndex === 0 ? 'started' : 'progress',
+      result: 'step_viewed',
+      meta: {
+        anchorKey: step?.anchorKey,
+        step: stepIndex + 1,
+        totalSteps: steps.length
+      }
+    });
+  }, [props, step?.anchorKey, stepIndex, steps.length]);
+  const {
+    overlayRef,
+    measured,
+    remeasureOverlay
+  } = useMeasuredAnchor({
+    anchorKey: step?.anchorKey ?? '',
+    readyKey: `${stepIndex}:${step?.anchorKey ?? ''}`,
+    onReady: handleStepReady,
+    onRenderError: props.onRenderError
+  });
+  const geometry = measured ? resolveCoachmarkGeometry(measured.anchor, measured.viewport, step?.placement, {
+    cardHeight,
+    insets: safeInsets
+  }) : null;
+  const measureCard = useCallback(event => {
+    const next = Math.round(event.nativeEvent.layout.height);
+    if (next > 0) setCardHeight(current => Math.abs(current - next) > 1 ? next : current);
+  }, []);
+  const scrim = spec.style?.backdrop ?? 'rgba(0,0,0,0.68)';
+  const radius = typeof spec.ext?.spotlightRadius === 'number' ? clamp(spec.ext.spotlightRadius, 0, 40) : 14;
+  const finalCta = stepIndex === steps.length - 1 ? step?.cta ?? spec.cta : undefined;
+  const goTo = result => {
+    const nextIndex = resolveCoachmarkStepIndex(stepIndex, steps.length, result);
+    props.onInteraction?.({
+      mechanic: 'coachmark_spotlight',
+      phase: 'progress',
+      result,
+      meta: {
+        anchorKey: step?.anchorKey,
+        fromStep: stepIndex + 1,
+        toStep: nextIndex + 1,
+        totalSteps: steps.length
+      }
+    });
+    setCardHeight(160);
+    setStepIndex(nextIndex);
+  };
+  const skip = () => {
+    props.onInteraction?.({
+      mechanic: 'coachmark_spotlight',
+      phase: 'decision',
+      result: 'skipped',
+      meta: {
+        anchorKey: step?.anchorKey,
+        step: stepIndex + 1,
+        totalSteps: steps.length
+      }
+    });
+    onDismiss();
+  };
+  const finish = () => {
+    props.onInteraction?.({
+      mechanic: 'coachmark_spotlight',
+      phase: 'completed',
+      result: 'finished',
+      meta: {
+        anchorKey: step?.anchorKey,
+        step: stepIndex + 1,
+        totalSteps: steps.length
+      }
+    });
+    if (resolveCoachmarkFinishMode(finalCta) === 'cta' && finalCta) props.onCta(finalCta);else if (props.onComplete) props.onComplete();else onDismiss();
+  };
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: true,
+    transparent: true,
+    animationType: "fade",
+    statusBarTranslucent: true,
+    onRequestClose: onDismiss,
+    children: /*#__PURE__*/_jsx(View, {
+      ref: overlayRef,
+      collapsable: false,
+      style: styles.coachmarkRoot,
+      onLayout: remeasureOverlay,
+      pointerEvents: "box-none",
+      children: geometry && step ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [geometry.scrims.map((rect, index) => /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "none",
+          onPress: onDismiss,
+          style: [rectStyle(rect), {
+            backgroundColor: scrim
+          }]
+        }, index)), /*#__PURE__*/_jsx(View, {
+          pointerEvents: "none",
+          style: [styles.coachmarkSpotlight, rectStyle(geometry.spotlight), {
+            borderRadius: radius,
+            borderColor: theme.accent
+          }]
+        }), /*#__PURE__*/_jsxs(AnchoredCard, {
+          geometry: geometry,
+          theme: theme,
+          onDismiss: skip,
+          onLayout: measureCard,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: [styles.coachmarkEyebrow, {
+              color: theme.accent
+            }],
+            children: ["STEP ", stepIndex + 1, " OF ", steps.length]
+          }), step.title ? /*#__PURE__*/_jsx(Text, {
+            style: [styles.tooltipTitle, {
+              color: theme.titleColor
+            }, rtlText(theme)],
+            children: step.title
+          }) : null, step.body ? /*#__PURE__*/_jsx(Text, {
+            style: [styles.tooltipBody, {
+              color: theme.bodyColor
+            }, rtlText(theme)],
+            children: step.body
+          }) : null, /*#__PURE__*/_jsxs(View, {
+            style: styles.coachmarkActions,
+            children: [/*#__PURE__*/_jsx(Pressable, {
+              accessibilityRole: "button",
+              accessibilityLabel: coachmarkLabel(spec.ext?.skipLabel, 'Skip tour'),
+              onPress: skip,
+              style: styles.coachmarkTextButton,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.coachmarkSecondaryText, {
+                  color: theme.bodyColor
+                }],
+                children: coachmarkLabel(spec.ext?.skipLabel, 'Skip')
+              })
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.coachmarkNavActions,
+              children: [stepIndex > 0 ? /*#__PURE__*/_jsx(Pressable, {
+                accessibilityRole: "button",
+                accessibilityLabel: coachmarkLabel(spec.ext?.backLabel, 'Previous step'),
+                onPress: () => goTo('back'),
+                style: styles.coachmarkTextButton,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: [styles.coachmarkSecondaryText, {
+                    color: theme.bodyColor
+                  }],
+                  children: coachmarkLabel(spec.ext?.backLabel, 'Back')
+                })
+              }) : null, /*#__PURE__*/_jsx(Pressable, {
+                accessibilityRole: "button",
+                accessibilityLabel: stepIndex < steps.length - 1 ? coachmarkLabel(spec.ext?.nextLabel, 'Next step') : coachmarkLabel(spec.ext?.finishLabel, finalCta?.label ?? spec.cta?.label ?? 'Finish tour'),
+                onPress: () => stepIndex < steps.length - 1 ? goTo('next') : finish(),
+                style: [styles.coachmarkPrimaryButton, {
+                  backgroundColor: theme.accent
+                }],
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: [styles.coachmarkPrimaryText, {
+                    color: theme.ctaText
+                  }],
+                  children: stepIndex < steps.length - 1 ? coachmarkLabel(spec.ext?.nextLabel, 'Next') : coachmarkLabel(spec.ext?.finishLabel, finalCta?.label ?? spec.cta?.label ?? 'Finish')
+                })
+              })]
+            })]
+          })]
+        })]
+      }) : null
+    })
+  });
+}
+function AnchoredInApp(props) {
+  return resolveAnchoredSurfaceKind(props.variantKey) === 'spotlight' ? /*#__PURE__*/_jsx(CoachmarkSpotlightInApp, {
+    ...props
+  }) : /*#__PURE__*/_jsx(AnchoredTooltipInApp, {
+    ...props
+  });
+}
+
+// ─── inline — participates in host layout and never opens an overlay ─────────
+
+function InlineInApp(props) {
+  const {
+    theme,
+    onDismiss
+  } = props;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.inlineCard, {
+      backgroundColor: theme.cardBg
+    }],
+    children: [/*#__PURE__*/_jsx(CloseBtn, {
+      onPress: onDismiss,
+      style: styles.inlineClosePos
+    }), /*#__PURE__*/_jsx(BranchContent, {
+      ...props
+    })]
+  });
+}
+
+// ─── 7. toast — transient strip, auto-dismisses after 3 s ────────────────────
+
+export function resolveToastDuration(value) {
+  return clamp(typeof value === 'number' && Number.isFinite(value) ? value : 3000, 1000, 60_000);
+}
+function ToastInApp(props) {
+  const {
+    spec,
+    onDismiss
+  } = props;
+  const window = useWindowDimensions();
+  const timerRef = useRef(null);
+  const autoDismiss = spec.ext?.autoDismiss !== false;
+  const duration = resolveToastDuration(typeof spec.ext?.autoDismiss === 'number' ? spec.ext.autoDismiss : spec.ext?.durationMs);
+  useEffect(() => {
+    if (!autoDismiss) return;
+    timerRef.current = setTimeout(onDismiss, duration);
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+    // onDismiss identity stable (memoized in provider); exhaustive-deps would re-arm on every render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoDismiss, duration]);
+  const {
+    theme
+  } = props;
+  const position = screenPosition(spec.ext?.position) ?? screenPosition(spec.ext?.layoutPosition) ?? 'bottom';
+  const edge = position === 'top' ? 'top' : 'bottom';
+  return /*#__PURE__*/_jsx(ScreenEdgeSurface, {
+    edge: edge,
+    contentStyle: styles.toastWrap,
+    children: /*#__PURE__*/_jsx(Pressable, {
+      style: [styles.toastCard, {
+        backgroundColor: theme.cardBg
+      }],
+      onPress: onDismiss,
+      accessibilityRole: "none",
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        style: [styles.toastScroll, {
+          maxHeight: Math.max(96, window.height * 0.4)
+        }],
+        showsVerticalScrollIndicator: false,
+        keyboardShouldPersistTaps: "handled",
+        children: props.children !== undefined ? /*#__PURE__*/_jsx(_Fragment, {
+          children: props.children
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [spec.title ? /*#__PURE__*/_jsx(Text, {
+            style: [styles.toastTitle, {
+              color: theme.titleColor
+            }, rtlText(theme)],
+            children: spec.title
+          }) : null, /*#__PURE__*/_jsx(Text, {
+            style: [styles.toastBody, {
+              color: theme.bodyColor
+            }, rtlText(theme)],
+            numberOfLines: 2,
+            children: spec.body
+          }), spec.cta ? /*#__PURE__*/_jsx(Pressable, {
+            accessibilityRole: "button",
+            accessibilityLabel: spec.cta.label,
+            onPress: () => spec.cta.action === 'dismiss' ? onDismiss() : props.onCta(spec.cta),
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.toastCtaText, {
+                color: theme.accent
+              }],
+              children: spec.cta.label
+            })
+          }) : null]
+        })
+      })
+    })
+  });
+}
+
+// ─── Open/Closed registry ─────────────────────────────────────────────────────
+
+export const INAPP_RENDERERS = {
+  modal: ModalInApp,
+  fullscreen: FullScreenInApp,
+  bottom_sheet: BottomSheetInApp,
+  top_banner: TopBannerInApp,
+  bottom_banner: BottomBannerInApp,
+  tooltip: AnchoredInApp,
+  toast: ToastInApp
+};
+const MOUNT_MODEL_RENDERERS = {
+  overlay: ModalInApp,
+  sheet: BottomSheetInApp,
+  banner: TopBannerInApp,
+  fullscreen: FullScreenInApp,
+  toast: ToastInApp,
+  bubble: FloatingTooltipInApp,
+  anchored: AnchoredInApp,
+  inline: InlineInApp
+};
+
+/** Resolve the render branch for a config layout (always defined). */
+export function resolveInAppRenderer(layout) {
+  return INAPP_RENDERERS[resolveInAppLayout(layout)];
+}
+
+/**
+ * Resolve canonical additive surfaces before degrading to the stable seven-layout
+ * registry. Content remains a child of the selected surface in either path.
+ */
+export function resolveInAppPresentationRenderer(presentation, mountModelOverride) {
+  if (mountModelOverride) return MOUNT_MODEL_RENDERERS[mountModelOverride];
+  const additive = ADDITIVE_INAPP_RENDERERS[presentation.archetype];
+  if (additive) return additive;
+  if (presentation.variantKey === 'mini_popover') return MiniPopoverInApp;
+  if (presentation.variantKey === 'peek_card') return PeekCardInApp;
+  if (presentation.mountModel === 'banner' && presentation.legacyLayout === 'bottom_banner') {
+    return BottomBannerInApp;
+  }
+  return MOUNT_MODEL_RENDERERS[presentation.mountModel];
+}
+
+// ─── Render-failure boundary (T1 G/render honesty) ────────────────────────────
+// A malformed render spec (or a downstream render throw) must NEVER crash the host
+// app and must NEVER silently vanish. This boundary catches the render error, reports
+// it via `onError(reason)` (provider → `render_failed` diagnostic, which also marks a
+// test preview failed server-side), and renders nothing in its place. Reset keys on
+// the message id so a new message after a failure gets a fresh attempt.
+
+class InAppErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      failed: false
+    };
+  }
+  static getDerivedStateFromError() {
+    return {
+      failed: true
+    };
+  }
+  componentDidUpdate(prev) {
+    // New message after a prior failure → clear the failed state and retry render.
+    if (prev.resetKey !== this.props.resetKey && this.state.failed) {
+      this.setState({
+        failed: false
+      });
+    }
+  }
+  componentDidCatch(error) {
+    this.props.onError(error?.message || 'render_error');
+  }
+  render() {
+    return this.state.failed ? null : this.props.children;
+  }
+}
+
+// ─── Public mount point ───────────────────────────────────────────────────────
+
+/**
+ * Single mount point for in-app messages. Reads `message.layout`, auto-selects
+ * the correct renderer from the registry, fires `onShow()` exactly once per
+ * message. App developers write zero layout code.
+ */
+export function EngageInAppView({
+  message,
+  visible,
+  spec,
+  mountModelOverride,
+  onShow,
+  onCta,
+  onDismiss,
+  onComplete,
+  onInteraction,
+  onInAppGameRequest,
+  onRenderError
+}) {
+  const effectiveSpec = spec ?? message?.spec;
+  const presentation = message && effectiveSpec ? resolveInAppPresentation({
+    layout: message.layout,
+    variantKey: message.variantKey,
+    spec: effectiveSpec
+  }) : null;
+  const effectiveMountModel = mountModelOverride ?? presentation?.mountModel;
+  const gameAttemptsRef = useRef({
+    messageId: null,
+    ids: new Map()
+  });
+  if (gameAttemptsRef.current.messageId !== (message?.id ?? null)) {
+    gameAttemptsRef.current = {
+      messageId: message?.id ?? null,
+      ids: new Map()
+    };
+  }
+  const requestGameResult = useCallback(async (rawAttempt = 1, input) => {
+    if (!message || !effectiveSpec || !isInAppGameVariant(presentation?.variantKey)) {
+      throw new Error('Game result requested by a non-gamified message');
+    }
+    const variantKey = presentation.variantKey;
+    const attempt = Number.isFinite(rawAttempt) ? Math.max(1, Math.floor(rawAttempt)) : 1;
+    const idKey = `${variantKey}:${attempt}`;
+    let attemptId = gameAttemptsRef.current.ids.get(idKey);
+    if (!attemptId) {
+      gameAttemptSequence += 1;
+      attemptId = `scalebun_game_${Date.now().toString(36)}_${gameAttemptSequence.toString(36)}`;
+      gameAttemptsRef.current.ids.set(idKey, attemptId);
+    }
+    const rawExt = effectiveSpec.ext;
+    const gameKey = typeof rawExt?.gameKey === 'string' ? rawExt.gameKey.trim() : '';
+    const isPreview = message.preview === true || message.isTest === true;
+    if (!isPreview && !gameKey) throw new Error('Game key is missing');
+    const request = buildInAppGameRequest({
+      campaignId: message.id,
+      gameKey: gameKey || `preview:${variantKey}`,
+      variantKey,
+      attemptId,
+      attempt,
+      payload: input,
+      allowedOutcomeIds: inAppGameAllowedOutcomeIds(effectiveSpec)
+    });
+    if (isPreview) {
+      const previewResult = authoredPreviewGameResult(request, effectiveSpec);
+      if (!previewResult) throw new Error('Preview outcome is not configured');
+      return previewResult;
+    }
+    if (!onInAppGameRequest) throw new Error('Game result handler is not configured');
+    return validateInAppGameResult(request, await onInAppGameRequest(request));
+  }, [message, effectiveSpec, presentation?.variantKey, onInAppGameRequest]);
+  const outcomeConfig = useMemo(() => resolveInAppOutcomeConfig(effectiveSpec), [effectiveSpec]);
+  const [pendingOutcome, setPendingOutcome] = useState(null);
+  useEffect(() => {
+    setPendingOutcome(null);
+  }, [message?.id, visible]);
+  const presentOutcome = useCallback(request => {
+    setPendingOutcome(current => current ?? request);
+  }, []);
+  const outcomeAwareCta = useCallback(cta => {
+    if (outcomeConfig) {
+      presentOutcome({
+        fallback: inAppOutcomeTerminalForCta(cta)
+      });
+      return;
+    }
+    onCta(cta);
+  }, [onCta, outcomeConfig, presentOutcome]);
+  const outcomeAwareComplete = useCallback(() => {
+    if (outcomeConfig) {
+      presentOutcome({
+        fallback: {
+          kind: 'complete'
+        }
+      });
+      return;
+    }
+    if (onComplete) onComplete();else onDismiss();
+  }, [onComplete, onDismiss, outcomeConfig, presentOutcome]);
+  const runOutcomeAction = useCallback(() => {
+    if (!outcomeConfig || !pendingOutcome) return;
+    const terminal = resolveInAppOutcomeTerminal(outcomeConfig, pendingOutcome.fallback);
+    setPendingOutcome(null);
+    if (terminal.kind === 'cta') {
+      onCta(terminal.cta);
+    } else if (terminal.kind === 'complete') {
+      if (onComplete) onComplete();else onDismiss();
+    } else {
+      onDismiss();
+    }
+  }, [onComplete, onCta, onDismiss, outcomeConfig, pendingOutcome]);
+  const waitsForAnchor = presentation !== null && effectiveMountModel === 'anchored';
+  const [readyMessageId, setReadyMessageId] = useState(null);
+  // Mechanics such as wheel, quiz, and checklist can be fully authored in `ext`
+  // without generic body copy. Reject only a truly empty render model.
+  const contentMissing = !effectiveSpec || !(effectiveSpec.title || effectiveSpec.body || effectiveSpec.imageUrl || effectiveSpec.coupon || effectiveSpec.cta || effectiveSpec.assets && Object.keys(effectiveSpec.assets).length > 0 || effectiveSpec.ext && Object.keys(effectiveSpec.ext).length > 0);
+  const shownIdRef = useRef(null);
+  useEffect(() => {
+    if (visible && message && shownIdRef.current !== message.id) {
+      if (contentMissing) {
+        shownIdRef.current = message.id;
+        onRenderError?.('missing_content');
+      } else if (!waitsForAnchor || readyMessageId === message.id) {
+        shownIdRef.current = message.id;
+        onShow();
+      }
+    }
+    if (!visible) shownIdRef.current = null;
+  }, [visible, message, onShow, onRenderError, contentMissing, waitsForAnchor, readyMessageId]);
+  if (!message || !visible || contentMissing || !effectiveSpec || !presentation) return null;
+  const mechanic = resolveInAppMechanic({
+    variantKey: message.variantKey,
+    spec: effectiveSpec
+  });
+  const MechanicContent = resolveArchetypeContent(mechanic ?? presentation.archetype);
+  const Content = MechanicContent ?? resolveVariantContent(presentation.variantKey ?? undefined);
+  const Branch = resolveInAppPresentationRenderer(presentation, mountModelOverride);
+  const theme = resolveTheme(effectiveSpec);
+  if (__DEV__) {
+    __DEV__ && logger.debug(`[Engage] in-app ${message.id} rendering variant="${presentation.variantKey ?? 'legacy'}" archetype="${presentation.archetype}" mount="${effectiveMountModel}" layout="${presentation.legacyLayout}" fallback="${presentation.fallback?.reason ?? 'none'}"${message.isTest ? ` (test ${message.testRunId ?? message.previewId ?? message.id})` : ''}`);
+  }
+  return /*#__PURE__*/_jsxs(InAppErrorBoundary, {
+    resetKey: message.id,
+    onError: reason => onRenderError?.(reason),
+    children: [/*#__PURE__*/_jsx(Branch, {
+      spec: effectiveSpec,
+      variantKey: presentation.variantKey ?? undefined,
+      theme: theme,
+      onCta: outcomeAwareCta,
+      onDismiss: onDismiss,
+      onComplete: outcomeAwareComplete,
+      onOutcome: outcomeConfig ? presentOutcome : undefined,
+      onInteraction: onInteraction,
+      requestGameResult: requestGameResult,
+      onReady: () => setReadyMessageId(message.id),
+      onRenderError: onRenderError,
+      children: Content ? /*#__PURE__*/_jsx(Content, {
+        spec: effectiveSpec,
+        variantKey: presentation.variantKey ?? undefined,
+        theme: theme,
+        onCta: outcomeAwareCta,
+        onDismiss: onDismiss,
+        onComplete: outcomeAwareComplete,
+        onOutcome: outcomeConfig ? presentOutcome : undefined,
+        onInteraction: onInteraction,
+        requestGameResult: requestGameResult
+      }) : undefined
+    }, `${message.id}:${presentation.variantKey ?? presentation.archetype}`), pendingOutcome && outcomeConfig ? /*#__PURE__*/_jsx(InAppOutcomeModal, {
+      outcome: outcomeConfig,
+      resultLabel: pendingOutcome.resultLabel,
+      theme: theme,
+      onAction: runOutcomeAction,
+      onRequestClose: () => {
+        setPendingOutcome(null);
+        onDismiss();
+      }
+    }) : null]
+  });
+}
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const CARD_BG = '#FFFFFF';
+const SHADOW = {
+  shadowColor: '#000000',
+  shadowOpacity: 0.15,
+  shadowRadius: 12,
+  shadowOffset: {
+    width: 0,
+    height: 4
+  },
+  elevation: 6
+};
+const outcomeStyles = {
+  backdrop: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24
+  },
+  card: {
+    width: '100%',
+    maxWidth: 340,
+    borderWidth: 1,
+    borderRadius: 24,
+    padding: 24,
+    alignItems: 'center',
+    ...SHADOW
+  },
+  copy: {
+    alignSelf: 'stretch',
+    alignItems: 'center'
+  },
+  icon: {
+    width: 64,
+    height: 64,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 14
+  },
+  iconText: {
+    fontSize: 30,
+    fontWeight: '800'
+  },
+  title: {
+    fontSize: 21,
+    fontWeight: '800',
+    textAlign: 'center'
+  },
+  body: {
+    fontSize: 14,
+    lineHeight: 20,
+    textAlign: 'center',
+    marginTop: 7
+  },
+  result: {
+    alignSelf: 'stretch',
+    borderRadius: 12,
+    padding: 10,
+    marginTop: 12
+  },
+  resultText: {
+    fontSize: 17,
+    fontWeight: '800',
+    textAlign: 'center'
+  },
+  button: {
+    alignSelf: 'stretch',
+    minHeight: 44,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+    marginTop: 18
+  },
+  buttonText: {
+    fontSize: 15,
+    fontWeight: '800',
+    textAlign: 'center'
+  }
+};
+const styles = {
+  // ── shared content ──
+  contentBlock: {
+    marginBottom: 12
+  },
+  image: {
+    width: '100%',
+    height: 140,
+    borderRadius: 12,
+    marginBottom: 12
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: '700',
+    color: '#11151C',
+    marginBottom: 6
+  },
+  body: {
+    fontSize: 14,
+    color: '#3A4250',
+    lineHeight: 20
+  },
+  actions: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    gap: 8
+  },
+  primaryBtn: {
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: 120,
+    maxWidth: '100%',
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderRadius: 10,
+    backgroundColor: '#2F6BFF'
+  },
+  primaryText: {
+    fontSize: 15,
+    color: '#FFFFFF',
+    fontWeight: '600',
+    textAlign: 'center',
+    flexShrink: 1
+  },
+  secondaryBtn: {
+    maxWidth: '100%',
+    flexShrink: 1,
+    paddingVertical: 10,
+    paddingHorizontal: 16
+  },
+  secondaryText: {
+    fontSize: 15,
+    color: '#6B7280',
+    fontWeight: '500',
+    textAlign: 'center',
+    flexShrink: 1
+  },
+  coupon: {
+    marginTop: 10,
+    borderWidth: 1.5,
+    borderStyle: 'dashed',
+    borderRadius: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    alignItems: 'center'
+  },
+  couponText: {
+    fontSize: 14,
+    fontWeight: '700',
+    letterSpacing: 1.2
+  },
+  closeBtn: {
+    width: 32,
+    height: 32,
+    padding: 0,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  closeBtnText: {
+    fontSize: 18,
+    color: '#9097A3',
+    fontWeight: '600',
+    lineHeight: 20,
+    textAlign: 'center',
+    includeFontPadding: false,
+    transform: [{
+      translateY: -1
+    }]
+  },
+  keyboardAvoider: {
+    flex: 1
+  },
+  screenEdgeKeyboard: {
+    width: '100%'
+  },
+  screenEdge: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1000
+  },
+  screenEdgeTop: {
+    justifyContent: 'flex-start'
+  },
+  screenEdgeBottom: {
+    justifyContent: 'flex-end'
+  },
+  // ── modal ──
+  modalSafeArea: {
+    flex: 1
+  },
+  modalBackdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.52)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20
+  },
+  modalBackdropTop: {
+    justifyContent: 'flex-start'
+  },
+  modalBackdropBottom: {
+    justifyContent: 'flex-end'
+  },
+  modalCard: {
+    width: '100%',
+    maxWidth: 420,
+    maxHeight: '100%',
+    backgroundColor: CARD_BG,
+    borderRadius: 18,
+    padding: 22,
+    ...SHADOW
+  },
+  modalScroll: {
+    flexShrink: 1
+  },
+  modalScrollContent: {},
+  centerDrawerCard: {
+    maxHeight: '78%'
+  },
+  modalClosePos: {
+    position: 'absolute',
+    top: 12,
+    right: 12,
+    zIndex: 1
+  },
+  // ── fullscreen ──
+  fullscreenCard: {
+    flex: 1,
+    backgroundColor: CARD_BG
+  },
+  fullscreenHeader: {
+    minHeight: 44,
+    paddingHorizontal: 16,
+    alignItems: 'flex-end',
+    justifyContent: 'center'
+  },
+  fullscreenScroll: {
+    flex: 1
+  },
+  fullscreenScrollContent: {
+    flexGrow: 1
+  },
+  fullscreenImage: {
+    width: '100%',
+    maxWidth: 600,
+    alignSelf: 'center',
+    aspectRatio: 16 / 9,
+    maxHeight: 320
+  },
+  fullscreenContent: {
+    flexGrow: 1,
+    width: '100%',
+    maxWidth: 600,
+    alignSelf: 'center',
+    paddingHorizontal: 24,
+    paddingTop: 8,
+    paddingBottom: 24
+  },
+  fullscreenTitle: {
+    fontSize: 22,
+    fontWeight: '800',
+    color: '#11151C',
+    marginBottom: 10
+  },
+  fullscreenBody: {
+    fontSize: 15,
+    color: '#3A4250',
+    lineHeight: 22,
+    marginBottom: 24
+  },
+  // ── bottom_sheet ──
+  sheetBackdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.48)',
+    justifyContent: 'flex-end',
+    alignItems: 'center'
+  },
+  sheetCard: {
+    width: '100%',
+    maxWidth: 600,
+    maxHeight: '92%',
+    backgroundColor: CARD_BG,
+    borderTopLeftRadius: 22,
+    borderTopRightRadius: 22,
+    overflow: 'hidden',
+    ...SHADOW
+  },
+  sheetSafeArea: {
+    width: '100%'
+  },
+  sheetScroll: {
+    flexShrink: 1
+  },
+  sheetContent: {
+    padding: 22,
+    paddingBottom: 20
+  },
+  sheetHandle: {
+    width: 38,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#D1D5DB',
+    alignSelf: 'center',
+    marginBottom: 16
+  },
+  stepProgress: {
+    marginBottom: 16
+  },
+  stepLabel: {
+    fontSize: 12,
+    fontWeight: '600',
+    marginBottom: 7
+  },
+  stepTrack: {
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#E5E7EB',
+    overflow: 'hidden'
+  },
+  stepFill: {
+    height: '100%',
+    borderRadius: 2
+  },
+  // ── additive side_sheet ──
+  sideSheetBackdrop: {
+    flex: 1,
+    flexDirection: 'row'
+  },
+  sideSheetLeft: {
+    justifyContent: 'flex-start'
+  },
+  sideSheetRight: {
+    justifyContent: 'flex-end'
+  },
+  sideSheetPanel: {
+    width: '82%',
+    maxWidth: 420,
+    height: '100%',
+    ...SHADOW
+  },
+  sideSheetPanelLeft: {
+    borderTopRightRadius: 22,
+    borderBottomRightRadius: 22
+  },
+  sideSheetPanelRight: {
+    borderTopLeftRadius: 22,
+    borderBottomLeftRadius: 22
+  },
+  sideSheetSafeArea: {
+    flex: 1
+  },
+  sideSheetHeader: {
+    minHeight: 44,
+    paddingHorizontal: 14,
+    alignItems: 'flex-end',
+    justifyContent: 'center'
+  },
+  sideSheetScroll: {
+    flex: 1
+  },
+  sideSheetContent: {
+    flexGrow: 1,
+    paddingHorizontal: 22,
+    paddingTop: 8,
+    paddingBottom: 24
+  },
+  peekRoot: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    paddingHorizontal: 14
+  },
+  peekExpanded: {
+    width: '100%',
+    maxWidth: 600,
+    maxHeight: '92%',
+    borderTopLeftRadius: 22,
+    borderTopRightRadius: 22,
+    overflow: 'hidden',
+    ...SHADOW
+  },
+  peekCollapsed: {
+    width: '100%',
+    maxWidth: 600,
+    minHeight: 72,
+    borderTopLeftRadius: 18,
+    borderTopRightRadius: 18,
+    borderWidth: 1,
+    borderBottomWidth: 0,
+    overflow: 'hidden',
+    ...SHADOW
+  },
+  peekSafeArea: {
+    width: '100%'
+  },
+  peekScroll: {
+    flexShrink: 1
+  },
+  peekExpandedContent: {
+    padding: 22,
+    paddingBottom: 20
+  },
+  peekCollapsedContent: {
+    padding: 14
+  },
+  peekClose: {
+    position: 'absolute',
+    top: 10,
+    right: 12
+  },
+  peekLabel: {
+    fontSize: 15,
+    fontWeight: '800',
+    textAlign: 'center'
+  },
+  // ── banners (shared card shape) ──
+  bannerWrap: {
+    padding: 12,
+    alignItems: 'center'
+  },
+  bannerCard: {
+    width: '100%',
+    maxWidth: 420,
+    backgroundColor: CARD_BG,
+    borderRadius: 14,
+    padding: 14,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    ...SHADOW
+  },
+  bannerContent: {
+    flex: 1,
+    paddingRight: 8
+  },
+  bannerClosePos: {
+    alignSelf: 'flex-start',
+    marginTop: -2
+  },
+  stickyLabel: {
+    fontSize: 9,
+    fontWeight: '900',
+    letterSpacing: 1,
+    marginBottom: 3
+  },
+  stickyTrack: {
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#E5E7EB',
+    overflow: 'hidden',
+    marginTop: 7
+  },
+  stickyFill: {
+    height: '100%',
+    borderRadius: 2
+  },
+  // ── tooltip ──
+  floatingEdge: {
+    padding: 16
+  },
+  edgeAlignLeft: {
+    alignItems: 'flex-start'
+  },
+  edgeAlignRight: {
+    alignItems: 'flex-end'
+  },
+  floatingBubble: {
+    minWidth: 62,
+    minHeight: 62,
+    borderRadius: 31,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 14,
+    ...SHADOW
+  },
+  floatingBubbleText: {
+    fontSize: 12,
+    fontWeight: '800',
+    textAlign: 'center'
+  },
+  floatingPanel: {
+    width: '100%',
+    maxWidth: 260,
+    overflow: 'hidden',
+    borderRadius: 12
+  },
+  floatingScroll: {
+    flexShrink: 1
+  },
+  miniPopoverPanel: {
+    width: '100%',
+    maxWidth: 240,
+    overflow: 'hidden',
+    borderRadius: 12
+  },
+  tooltipCard: {
+    width: '100%',
+    maxHeight: '100%',
+    backgroundColor: CARD_BG,
+    borderRadius: 12,
+    padding: 14,
+    ...SHADOW
+  },
+  tooltipClosePos: {
+    position: 'absolute',
+    top: 4,
+    right: 4
+  },
+  tooltipTitle: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#11151C',
+    marginBottom: 4,
+    paddingRight: 20
+  },
+  tooltipBody: {
+    fontSize: 12,
+    color: '#3A4250',
+    lineHeight: 17
+  },
+  tooltipCta: {
+    marginTop: 8
+  },
+  tooltipCtaText: {
+    fontSize: 12,
+    color: '#2F6BFF',
+    fontWeight: '600'
+  },
+  anchoredTooltipRoot: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 9999,
+    elevation: 9999
+  },
+  coachmarkRoot: {
+    flex: 1
+  },
+  coachmarkSpotlight: {
+    borderWidth: 2,
+    shadowColor: '#FFFFFF',
+    shadowOpacity: 0.45,
+    shadowRadius: 8,
+    elevation: 2
+  },
+  coachmarkTooltipWrap: {
+    position: 'absolute',
+    zIndex: 2
+  },
+  coachmarkArrow: {
+    position: 'absolute',
+    width: 14,
+    height: 14,
+    transform: [{
+      rotate: '45deg'
+    }],
+    zIndex: 0
+  },
+  coachmarkArrowTop: {
+    top: -6
+  },
+  coachmarkArrowBottom: {
+    bottom: -6
+  },
+  coachmarkArrowLeft: {
+    left: -6
+  },
+  coachmarkArrowRight: {
+    right: -6
+  },
+  coachmarkCard: {
+    borderRadius: 14,
+    padding: 16,
+    overflow: 'hidden',
+    zIndex: 1,
+    ...SHADOW
+  },
+  coachmarkScroll: {
+    flexShrink: 1
+  },
+  coachmarkEyebrow: {
+    fontSize: 10,
+    fontWeight: '800',
+    letterSpacing: 0.8,
+    marginBottom: 5
+  },
+  coachmarkActions: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    gap: 8,
+    marginTop: 14
+  },
+  coachmarkNavActions: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end',
+    gap: 6
+  },
+  coachmarkTextButton: {
+    minHeight: 44,
+    minWidth: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 8
+  },
+  coachmarkSecondaryText: {
+    fontSize: 13,
+    fontWeight: '700'
+  },
+  coachmarkPrimaryButton: {
+    minHeight: 44,
+    minWidth: 72,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 10,
+    paddingHorizontal: 14
+  },
+  coachmarkPrimaryText: {
+    fontSize: 13,
+    fontWeight: '800'
+  },
+  // ── inline ──
+  inlineCard: {
+    width: '100%',
+    borderRadius: 14,
+    padding: 16,
+    ...SHADOW
+  },
+  inlineClosePos: {
+    position: 'absolute',
+    top: 6,
+    right: 6,
+    zIndex: 1
+  },
+  // ── toast ──
+  toastWrap: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    alignItems: 'center'
+  },
+  toastCard: {
+    width: '100%',
+    maxWidth: 420,
+    backgroundColor: '#1C1C1E',
+    borderRadius: 12,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    ...SHADOW
+  },
+  toastScroll: {
+    flexShrink: 1
+  },
+  toastTitle: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#FFFFFF',
+    marginBottom: 2
+  },
+  toastBody: {
+    fontSize: 13,
+    color: 'rgba(255,255,255,0.8)'
+  },
+  toastCtaText: {
+    fontSize: 13,
+    color: '#60A5FA',
+    fontWeight: '600',
+    marginTop: 6
+  }
+};
+//# sourceMappingURL=EngageInAppView.js.map