@cxpinsight/react-native 0.17.4 → 0.17.7

package/lib/survey/SurveyModal.js

@@ -33,6 +33,9 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.stylePlatformSlice = stylePlatformSlice;
+exports.topInsetForHeight = topInsetForHeight;
+exports.resolvePopupTop = resolvePopupTop;
 exports.SurveyModal = SurveyModal;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
@@ -94,6 +97,54 @@ function stripHtml(input) {
         .replace(/\n{3,}/g, '\n\n')
         .trim();
 }
+/**
+ * `branding.style` flattened for THIS platform: shared keys first, the `mobile`
+ * slice on top. Mirrors how `settings.display` is sliced — the two are written
+ * by the same studio controls and have to be read the same way. `web` is
+ * dropped rather than merged; it describes a different form factor.
+ */
+function stylePlatformSlice(style) {
+    if (!style || typeof style !== 'object')
+        return {};
+    const out = {};
+    for (const [k, v] of Object.entries(style)) {
+        if (k === 'web' || k === 'mobile' || k === 'link')
+            continue;
+        out[k] = v;
+    }
+    const m = style.mobile;
+    if (m && typeof m === 'object')
+        Object.assign(out, m);
+    return out;
+}
+/**
+ * iOS top safe-area inset, derived from the screen height.
+ *
+ * This package declares no dependencies, so react-native-safe-area-context is
+ * not available and the height is the only signal. 852/932pt are the Dynamic
+ * Island sizes (59pt), 812-896 the notch generation (44pt), the rest pre-notch.
+ */
+function topInsetForHeight(screenH) {
+    return screenH >= 852 ? 59 : screenH >= 812 ? 44 : 20;
+}
+/**
+ * Resolve an authored `y` (percent of screen, marking the card's CENTRE — the
+ * web SDK's `top:y%` + `translate(-50%,-50%)`) to a paddingTop in points, with
+ * the whole card kept inside the safe area.
+ *
+ * Returns null when there is no authored coordinate, so the caller falls back
+ * to flex placement.
+ */
+function resolvePopupTop(opts) {
+    const { y, screenH, cardH, topInset, bottomInset, gutter } = opts;
+    if (!Number.isFinite(y))
+        return null;
+    const minTop = topInset + gutter;
+    const maxTop = screenH - bottomInset - gutter - cardH;
+    const wanted = (y / 100) * screenH - cardH / 2;
+    // A card taller than the safe band pins to the top rather than going negative.
+    return Math.max(minTop, maxTop > minTop ? Math.min(wanted, maxTop) : minTop);
+}
 function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
     const [responses, setResponses] = (0, react_1.useState)({});
@@ -1249,7 +1300,12 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
         // radius set once applies in both themes, exactly as it does on web.
         surveyOverride: {
             ...(0, styleContract_1.fromAuthoredPalette)(surveyPaletteOverride),
-            ...(survey.branding?.style || {}),
+            // PER PLATFORM, like `display` below. branding.style carries web/mobile
+            // slices — the studio writes a size dragged on the phone frame into
+            // style.mobile — and this spread was flat, so mobile silently used the
+            // SHARED values. A notification authored with style.mobile.imageSize 53
+            // and cardPadding 17 rendered at the root's 101 and 36.
+            ...stylePlatformSlice(survey.branding?.style),
         },
         initOverride: initPaletteOverride,
     }), 
@@ -1327,6 +1383,36 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     // 420px of horizontal room a handset does not have, and the sheet is the
     // native equivalent. A drawer with nothing set anchors to the BOTTOM (the
     // platform convention); anything else centres, as before.
+    // A NOTIFICATION IS NOT A FORM.
+    //
+    // Web composes one: `.cxp-notify-row` puts a small thumbnail beside the title
+    // and description, hides the implied question that carries the action, and
+    // puts that action full-width underneath. Mobile had none of it — `notify`
+    // appeared nowhere in this file — so the same interaction rendered as a plain
+    // question list: the avatar as a full-bleed image question, and the implied
+    // question's `text` as a visible prompt above it (the reported stray "tte").
+    const interactionKind = String(survey.interactionType || '').toLowerCase();
+    // BOTH shapes: the wire payload carries `questions`, and the provider sets
+    // `rawQuestions` only when it re-paginates. Reading one alone missed the
+    // notification entirely — the composition below silently never engaged.
+    const allQuestions = (survey.rawQuestions
+        || survey.questions
+        || []);
+    const notifyImageQ = allQuestions.find((q) => String(q?.id ?? '') === 'notify_image' && String(q?.type ?? '').toLowerCase() === 'image');
+    // Keyed off the composed question, not the type alone: an Ask that happens to
+    // carry an image question must keep rendering it as a question.
+    const isNotifyCard = interactionKind === 'notify' && !!notifyImageQ?.imageUrl;
+    // A NOTIFICATION'S TYPE SITS ONE SIZE DOWN from a survey's — web says so
+    // explicitly (notifyFsHeading/notifyFsDesc, defaulting to 15/13), and mobile
+    // had no equivalent: it used the survey title and a hardcoded 14 description,
+    // so an unstyled notification rendered at full survey type here and banner
+    // type there. An authored size still wins, on both.
+    const _authoredStyle = stylePlatformSlice(survey.branding?.style);
+    const _num = (v) => (typeof v === 'number' && v > 0 ? v : undefined);
+    const notifyTitleFS = isNotifyCard
+        ? { fontSize: _num(_authoredStyle.fontSizeHeading) ?? 15 } : null;
+    const notifyDescFS = isNotifyCard
+        ? { fontSize: _num(_authoredStyle.fontSizeDescription) ?? 13, lineHeight: 18 } : null;
     const rawPos = display?.position;
     const placement = rawPos === 'top' ? 'top'
         : rawPos === 'bottom' ? 'bottom'
@@ -1334,12 +1420,32 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                 : rawPos === 'center' ? 'center'
                     : isDrawer ? 'bottom' : 'center';
     const isSheet = isDrawer && (placement === 'top' || placement === 'bottom');
-    // Popup coordinate. RN cannot centre on a percentage the way the web SDK does
-    // — transform:translateY takes points, not percentages, and percentage margins
-    // resolve against the parent WIDTH — so the free y is bucketed into the three
-    // placements RN can express cleanly. x is ignored entirely; a phone centres.
+    // Popup coordinate. `y` is a PERCENTAGE OF THE SCREEN and marks the CARD'S
+    // CENTRE — the web SDK's `top:y%` + `translate(-50%,-50%)`. This used to be
+    // bucketed into three placements (<33 top, >67 bottom, else centre) on the
+    // belief that RN could not express it: translateY takes points, not
+    // percentages, and percentage margins resolve against the parent WIDTH.
+    //
+    // Both are true and neither is binding. The screen dimensions are known here,
+    // so the percentage resolves to POINTS and rides in as paddingTop on a
+    // flex-start overlay — no absolute positioning, so KeyboardAvoidingView keeps
+    // working. The card's own height comes from onLayout; until that first pass
+    // the authored height (or a reasonable default) stands in, and the safe-area
+    // clamp below usually decides the result anyway.
+    //
+    // The bucketing was a real mismatch, not a rounding one: an author who
+    // dragged the card to y=17 in the studio got it flush against the top of the
+    // device — 20dp instead of the ~145dp they placed it at on an 852dp screen.
+    //
+    // x stays ignored: the studio disables horizontal dragging on the mobile
+    // frame (`moveX: platformForFrame(frame) !== 'mobile'`), so a phone centres.
     const popupY = !isDrawer && !isFullscreen && display?.y != null ? parseFloat(String(display.y)) : NaN;
-    const effPlacement = !isNaN(popupY) ? (popupY < 33 ? 'top' : popupY > 67 ? 'bottom' : 'center') : placement;
+    const hasPopupY = !isNaN(popupY);
+    const effPlacement = hasPopupY ? 'top' : placement;
+    // Measured card height; the authored height is the first-frame stand-in.
+    const [measuredCardH, setMeasuredCardH] = (0, react_1.useState)(0);
+    const authoredH = Number.parseFloat(String(display?.height ?? ''));
+    const estCardH = measuredCardH || (Number.isFinite(authoredH) && authoredH > 0 ? authoredH : 220);
     const overlayPlacement = {
         justifyContent: effPlacement === 'top' ? 'flex-start'
             : effPlacement === 'bottom' ? 'flex-end'
@@ -1353,7 +1459,15 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     // a bottom sheet and a centred popup both rise, and fade has no direction.
     // So the Modal animation is handed over ONLY for a top sheet, and the card
     // animates itself down from above instead.
-    const needsTopSlide = animationType === 'slide' && isSheet && placement === 'top';
+    //
+    // A POPUP resolved to the top has exactly the same problem and was not
+    // covered: the gate asked for `isSheet`, which a popup never is. So a
+    // notification authored near the top of the screen flew up from the BOTTOM
+    // bezel, crossed the whole display, and settled backwards into place — the
+    // reported "the animation is wrong". Keyed off the RESOLVED placement, which
+    // is what the card actually uses.
+    const needsTopSlide = animationType === 'slide'
+        && ((isSheet && placement === 'top') || (!isDrawer && !isFullscreen && effPlacement === 'top'));
     const modalAnimation = needsTopSlide ? 'none' : animationType;
     const enterAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
     (0, react_1.useEffect)(() => {
@@ -1388,6 +1502,21 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
         onStartShouldSetPanResponder: () => false,
         // Claim the gesture only once it is clearly a drag, so a tap on the action
         // button still presses the button.
+        //
+        // CAPTURE, not bubble. The card's content sits in a ScrollView, and a
+        // ScrollView claims a vertical drag first — so the flick that is supposed
+        // to dismiss a notification was being consumed as a scroll of content that
+        // does not even overflow, and the banner could not be swiped away at all.
+        // The 8px threshold still protects the button: a tap never reaches here.
+        onMoveShouldSetPanResponderCapture: (_e, g) => {
+            const claim = swipeable && (Math.abs(g.dx) > 8 || Math.abs(g.dy) > 8);
+            // TEMP-DIAG
+            if (__DEV__ && (Math.abs(g.dx) > 8 || Math.abs(g.dy) > 8)) {
+                // eslint-disable-next-line no-console
+                console.log('[CXP-SWIPE]', JSON.stringify({ swipeable, dx: Math.round(g.dx), dy: Math.round(g.dy), claim }));
+            }
+            return claim;
+        },
         onMoveShouldSetPanResponder: (_e, g) => swipeable && (Math.abs(g.dx) > 8 || Math.abs(g.dy) > 8),
         onPanResponderMove: (_e, g) => {
             const horizontal = Math.abs(g.dx) > Math.abs(g.dy);
@@ -1442,10 +1571,16 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
         }, dismissMs);
         return () => clearTimeout(t);
     }, [visible, dismissMs]);
+    // COMPOSED, not stacked. The swipe transform used to be a separate entry in
+    // the card's style array, applied after this one — and a later `transform`
+    // REPLACES an earlier one rather than merging. That was harmless while only
+    // sheets animated themselves, but a notification is both top-placed and
+    // swipeable, so the entrance translate would have been silently dropped.
     const enterStyle = needsTopSlide
         ? {
             opacity: enterAnim,
-            transform: [{
+            transform: [
+                {
                     translateY: enterAnim.interpolate({
                         inputRange: [0, 1],
                         // Its own height is not known before layout, so it travels a screen
@@ -1453,7 +1588,9 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                         // enough that the easing still lands crisply.
                         outputRange: [-SCREEN_HEIGHT / 3, 0],
                     }),
-                }],
+                },
+                ...(swipeable ? swipeXY.getTranslateTransform() : []),
+            ],
         }
         : null;
     const sheetRadius = cornerRadius !== undefined ? cornerRadius : 16;
@@ -1468,13 +1605,28 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     // Safe areas. Deliberately built from react-native primitives rather than
     // react-native-safe-area-context: this package declares no dependencies, and
     // adding one would force every host app to install it.
-    const topInset = react_native_1.Platform.OS === 'android' ? (react_native_1.StatusBar.currentHeight || 0) : 44;
+    //
+    // 44 was the notched-iPhone value and was applied to every iOS device, so on a
+    // Dynamic Island phone (59pt) the card rode up under the island. Derived from
+    // the screen height instead — the only signal available without the dependency:
+    // 852pt/932pt are the Island sizes, 812-896 the notch generation, the rest pre-notch.
+    const topInset = react_native_1.Platform.OS === 'android'
+        ? (react_native_1.StatusBar.currentHeight || 0)
+        : topInsetForHeight(SCREEN_HEIGHT);
     const bottomInset = react_native_1.Platform.OS === 'ios' ? 34 : 0;
     const safePad = isFullscreen
         ? { paddingTop: topInset, paddingBottom: bottomInset }
         : isSheet && placement === 'bottom' ? { paddingBottom: bottomInset }
             : isSheet && placement === 'top' ? { paddingTop: topInset }
                 : null;
+    // Resolve the authored `y` to a top offset in points, keeping the whole card
+    // inside the safe area. GUTTER is the overlay's own padding, so the clamp is
+    // expressed against the same edges the card would otherwise rest on.
+    const GUTTER = 20;
+    const popupTopPx = hasPopupY
+        ? resolvePopupTop({ y: popupY, screenH: SCREEN_HEIGHT, cardH: estCardH, topInset, bottomInset, gutter: GUTTER })
+        : null;
+    const popupTop = popupTopPx == null ? null : { paddingTop: popupTopPx };
     // Action-button layout. UNSET keeps the native full-width split (default);
     // 'full' is explicit full-width; right/center/left shrink to content + align.
     const buttonAlign = display?.buttonAlign;
@@ -1532,8 +1684,17 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
         if (pct)
             return { width: `${pct[1]}%` };
         const px = /^(\d+(?:\.\d+)?)px$/.exec(String(w));
+        // The authored width is a CAP, not a target — web renders the popup as
+        // `width:90vw; max-width:<authored>`, so the card is 90% of the viewport
+        // until the author's number is the smaller of the two.
+        //
+        // I briefly clamped this to the full SCREEN instead, reading "390px on a
+        // 393pt frame" as a request for full bleed. It is not: the preview showed
+        // 351px (90vw of 390) and the device then drew 390, so the SAME 53pt
+        // thumbnail sat in a wider card and read as too small. Matching web's 90vw
+        // is what keeps the proportions identical on both.
         if (px)
-            return { width: Math.min(SCREEN_WIDTH - 40, Number(px[1])), maxWidth: Number(px[1]) };
+            return { width: Math.min(SCREEN_WIDTH * CARD_VIEWPORT_FRACTION, Number(px[1])), maxWidth: Number(px[1]) };
         return null;
     })();
     // Fullscreen ONLY: the card fills (survey bg), and these constrain the CONTENT
@@ -1627,15 +1788,25 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
     return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: visible, transparent: true, animationType: modalAnimation, onRequestClose: handleDismiss, children: (0, jsx_runtime_1.jsxs)(react_native_1.KeyboardAvoidingView, { style: [
                 styles.overlay,
                 overlayPlacement,
+                // The authored coordinate, resolved to points. Before the sheet and
+                // fullscreen overrides so those keep winning.
+                popupTop,
                 // A sheet sits flush against its edge, so the overlay loses its gutter.
                 isSheet && { paddingHorizontal: 0, paddingTop: 0, paddingBottom: 0 },
                 isFullscreen && styles.overlayFullscreen,
-            ], behavior: react_native_1.Platform.OS === 'ios' ? 'padding' : 'height', children: [(0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { onTouchStart: () => { engagedRef.current = true; }, ...(swipeable ? swipeResponder.panHandlers : {}), style: [
+            ], behavior: react_native_1.Platform.OS === 'ios' ? 'padding' : 'height', children: [(0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { onTouchStart: () => { engagedRef.current = true; }, 
+                    // Feeds the authored-coordinate maths above. Only tracked when a
+                    // coordinate is actually in play, and only on a real change, so the
+                    // common case costs nothing and this cannot loop.
+                    onLayout: hasPopupY ? (e) => {
+                        const h = Math.round(e.nativeEvent.layout.height);
+                        setMeasuredCardH((prev) => (Math.abs(prev - h) > 1 ? h : prev));
+                    } : undefined, ...(swipeable ? swipeResponder.panHandlers : {}), style: [
                         styles.card,
                         themeCard,
                         enterStyle,
-                        swipeable && { transform: swipeXY.getTranslateTransform() },
-                        maxWidth !== undefined && !isFullscreen && { width: Math.min(SCREEN_WIDTH - 40, maxWidth), maxWidth },
+                        swipeable && !needsTopSlide && { transform: swipeXY.getTranslateTransform() },
+                        maxWidth !== undefined && !isFullscreen && { width: Math.min(SCREEN_WIDTH * CARD_VIEWPORT_FRACTION, maxWidth), maxWidth },
                         cornerRadius !== undefined && !isFullscreen && { borderRadius: cornerRadius },
                         // cardFullscreen fills; an explicit content height/width below OVERRIDES
                         // the fill so a fullscreen survey can be contained to that size.
@@ -1695,6 +1866,8 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                                         styles.header,
                                         padHeader,
                                         isRtl && { paddingLeft: 48, paddingRight: 24 },
+                                        // Thumbnail beside the text, as `.cxp-notify-row` does on web.
+                                        isNotifyCard && { flexDirection: 'row', alignItems: 'center' },
                                     ], children: [((survey.branding?.showLogo !== false && survey.branding?.logo)
                                             || survey.branding?.brandName) && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                                                 styles.brandRow,
@@ -1704,20 +1877,32 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                                                     : survey.branding?.logoAlign === 'right'
                                                         ? { justifyContent: 'flex-end' }
                                                         : null),
-                                            ], children: [survey.branding?.showLogo !== false && survey.branding?.logo ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: survey.branding.logo }, style: styles.brandLogo, resizeMode: "contain", accessible: !!survey.branding.brandName, accessibilityLabel: survey.branding.brandName })) : null, survey.branding?.brandName ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.brandName, dirText, fontStyle, themeTextSecondary], children: survey.branding.brandName })) : null] })), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.title, dirText, fontStyle, themeTextPrimary, titleFS,
-                                                survey.titleAlign
-                                                    ? { textAlign: survey.titleAlign }
-                                                    : null], children: (0, interpolate_1.interpolatePlain)(
-                                            // Title is plain text; strip any stray rich-text markup +
-                                            // decode &nbsp; so it never shows literal HTML on native.
-                                            String((0, translationLookup_1.surveyText)(survey, currentLanguage, 'title', survey.title) || '')
-                                                .replace(/<[^>]*>/g, '').replace(/&nbsp;/gi, ' '), evalCtx) }), (() => {
-                                            // Description is authored as rich HTML; native Text can't render
-                                            // markup, so strip tags + decode &nbsp; to plain text.
-                                            const descRaw = (0, translationLookup_1.surveyText)(survey, currentLanguage, 'description', survey.description);
-                                            const desc = String(descRaw || '').replace(/<[^>]*>/g, '').replace(/&nbsp;/gi, ' ').trim();
-                                            return desc ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.description, dirText, fontStyle, themeTextSecondary, descFS], children: (0, interpolate_1.interpolatePlain)(desc, evalCtx) })) : null;
-                                        })(), deadlineEl, showProgressTop && progressEl] }), (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: [styles.body, padBody, fsContent], showsVerticalScrollIndicator: false, children: currentQuestions.map((q) => {
+                                            ], children: [survey.branding?.showLogo !== false && survey.branding?.logo ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: survey.branding.logo }, style: styles.brandLogo, resizeMode: "contain", accessible: !!survey.branding.brandName, accessibilityLabel: survey.branding.brandName })) : null, survey.branding?.brandName ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.brandName, dirText, fontStyle, themeTextSecondary], children: survey.branding.brandName })) : null] })), isNotifyCard ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: notifyImageQ?.imageUrl }, accessibilityLabel: notifyImageQ?.alt || undefined, accessible: !!notifyImageQ?.alt, style: {
+                                                width: contract.imageSize,
+                                                height: contract.imageSize,
+                                                borderRadius: contract.imageRadius,
+                                                marginRight: 12,
+                                                flexShrink: 0,
+                                            }, resizeMode: "cover" })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: isNotifyCard ? { flex: 1, minWidth: 0 } : undefined, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.title, dirText, fontStyle, themeTextPrimary, titleFS, notifyTitleFS,
+                                                        survey.titleAlign
+                                                            ? { textAlign: survey.titleAlign }
+                                                            : null], children: (0, interpolate_1.interpolatePlain)(
+                                                    // Title is plain text; strip any stray rich-text markup +
+                                                    // decode &nbsp; so it never shows literal HTML on native.
+                                                    String((0, translationLookup_1.surveyText)(survey, currentLanguage, 'title', survey.title) || '')
+                                                        .replace(/<[^>]*>/g, '').replace(/&nbsp;/gi, ' '), evalCtx) }), (() => {
+                                                    // Description is authored as rich HTML; native Text can't render
+                                                    // markup, so strip tags + decode &nbsp; to plain text.
+                                                    const descRaw = (0, translationLookup_1.surveyText)(survey, currentLanguage, 'description', survey.description);
+                                                    const desc = String(descRaw || '').replace(/<[^>]*>/g, '').replace(/&nbsp;/gi, ' ').trim();
+                                                    return desc ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.description, dirText, fontStyle, themeTextSecondary, descFS, notifyDescFS], children: (0, interpolate_1.interpolatePlain)(desc, evalCtx) })) : null;
+                                                })()] }), deadlineEl, showProgressTop && progressEl] }), (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: [styles.body, padBody, fsContent], showsVerticalScrollIndicator: false, children: currentQuestions.filter((q) => {
+                                        // The notification's thumbnail is drawn in the header above;
+                                        // leaving it here too would render it twice, once full-bleed.
+                                        if (isNotifyCard && String(q?.id ?? '') === 'notify_image')
+                                            return false;
+                                        return true;
+                                    }).map((q) => {
                                         // v1.1 uses `id`+`required`; legacy uses `name`+`isRequired`.
                                         // The provider normalizes both onto the same object so
                                         // either lookup works.
@@ -1727,13 +1912,23 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                                         // marked with nothing at all.
                                         const isRequired = !!forValidation(q).required
                                             || q.required || q.isRequired;
+                                        // An implied question has no prompt: its ACTIONS are the UI,
+                                        // and its `text` is bookkeeping the author never meant to
+                                        // show. Web renders the whole block display:none and lifts
+                                        // the buttons into the nav bar; here the buttons render in
+                                        // place, so only the label and description are suppressed.
+                                        // Without this the stray authoring text ("tte") appeared as a
+                                        // question above the notification's own button.
+                                        const isImplied = String(q?.type ?? '').toLowerCase() === 'implied';
                                         const qLabel = (0, interpolate_1.interpolatePlain)((0, translationLookup_1.questionText)(survey, currentLanguage, rowKey, 'text', q.title), evalCtx);
-                                        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: (el) => { questionRefs.current[rowKey] = el; }, style: [styles.questionBlock, gapQBlock], children: [(0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles.questionTitle, dirText, fontStyle, themeTextPrimary, qTitleFS], 
+                                        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: (el) => { questionRefs.current[rowKey] = el; }, style: [styles.questionBlock, gapQBlock], children: [isImplied ? null : ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles.questionTitle, dirText, fontStyle, themeTextPrimary, qTitleFS], 
                                                     // The asterisk below is decoration: a screen reader
                                                     // reads it as "star", or skips it, so a required
                                                     // question sounded exactly like an optional one until
                                                     // submitting failed. The label says the word.
-                                                    accessibilityLabel: isRequired ? `${qLabel}, required` : qLabel, children: [questionNumberById[rowKey] ? `Q${questionNumberById[rowKey]}. ` : '', (0, interpolate_1.interpolatePlain)((0, translationLookup_1.questionText)(survey, currentLanguage, rowKey, 'text', q.title), evalCtx), isRequired && (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.required, children: " *" })] }), (() => {
+                                                    accessibilityLabel: isRequired ? `${qLabel}, required` : qLabel, children: [questionNumberById[rowKey] ? `Q${questionNumberById[rowKey]}. ` : '', (0, interpolate_1.interpolatePlain)((0, translationLookup_1.questionText)(survey, currentLanguage, rowKey, 'text', q.title), evalCtx), isRequired && (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.required, children: " *" })] })), (() => {
+                                                    if (isImplied)
+                                                        return null;
                                                     const qDesc = (0, translationLookup_1.questionText)(survey, currentLanguage, rowKey, 'description', q.description);
                                                     return qDesc ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.questionDesc, dirText, fontStyle, themeTextMuted, qDescFS], children: (0, interpolate_1.interpolatePlain)(qDesc, evalCtx) })) : null;
                                                 })(), renderQuestion(q), errors[rowKey] ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.errorText, dirText, fontStyle], 
@@ -1792,6 +1987,8 @@ function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
                                         })()] })] }))] }), (0, jsx_runtime_1.jsx)(handsFreeVoice_1.VoiceOverlay, { visible: voiceActive, phase: voicePhase, transcript: voiceTranscript, onStop: () => (0, handsFreeVoice_1.stopVoice)() })] }) }));
 }
 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');
+/** Web draws a popup at `width:90vw`; the card matches so both read the same. */
+const CARD_VIEWPORT_FRACTION = 0.9;
 /**
  * Contract-driven styles. Was a static StyleSheet with 31 hardcoded colours;
  * every one now resolves from the style contract, so a branded survey brands the
@@ -1884,7 +2081,12 @@ const makeStyles = (c) => react_native_1.StyleSheet.create({
     title: {
         color: c.headingColor,
         fontSize: c.fontSizeHeading,
-        fontWeight: '700',
+        // 600, matching web's `.cxp-widget-title`. At 700 the same string is about
+        // 5% wider, which is enough to tip a notification's headline from one line
+        // to two — the device wrapped "Testing the notification" where the studio
+        // preview kept it on one, and that single difference is what made the two
+        // cards look unalike.
+        fontWeight: '600',
     },
     description: {
         color: c.descriptionColor,
@@ -1984,13 +2186,19 @@ const makeStyles = (c) => react_native_1.StyleSheet.create({
     impliedActions: { flexDirection: 'row', flexWrap: 'wrap', gap: 10, marginTop: 4 },
     impliedBtn: {
         flexGrow: 1, flexBasis: 140, paddingVertical: 13, paddingHorizontal: 18,
-        borderRadius: 8, alignItems: 'center', borderWidth: 1, borderColor: 'transparent',
+        // From the contract, like every other button. A literal 8 here meant an
+        // authored button radius applied to Next and Back but not to the action a
+        // notification actually offers.
+        borderRadius: c.buttonRadius, alignItems: 'center', borderWidth: 1, borderColor: 'transparent',
     },
-    impliedPrimary: { backgroundColor: '#2b6cb0' },
-    impliedSecondary: { backgroundColor: 'transparent', borderColor: '#d4d4d4' },
+    // The brand accent, not a hardcoded blue. `#2b6cb0` ignored primaryColor
+    // entirely, so a notification's only action was off-brand on every survey —
+    // the same button renders in the authored accent on web.
+    impliedPrimary: { backgroundColor: c.primaryBg },
+    impliedSecondary: { backgroundColor: 'transparent', borderColor: c.inputBorder },
     impliedChosen: { opacity: 0.75 },
-    impliedPrimaryLabel: { color: '#fff', fontWeight: '600', fontSize: 15 },
-    impliedSecondaryLabel: { color: '#1a1a1a', fontWeight: '600', fontSize: 15 },
+    impliedPrimaryLabel: { color: c.primaryText, fontWeight: '600', fontSize: 15 },
+    impliedSecondaryLabel: { color: c.textPrimary, fontWeight: '600', fontSize: 15 },
     desktopHint: {
         color: c.hintText,
         fontSize: 13,