@scalebun/react-native 1.0.2 → 1.0.4

package/src/features/engage/EngagePromptView.tsx

@@ -1,1364 +1,1400 @@
-/**
- * ScaleBun SDK — Engage Prompt View (shared cross-platform JS overlay, D4)
- *
- * The ONE reusable campaign renderer. It is parameterized by config (Open/Closed):
- * a `PROMPT_RENDERERS` registry maps an `EngageCampaignType` to a render branch.
- * NPS is implemented now; ratings/feedback/survey plug in later as ADDITIONAL
- * entries in that registry — NOT four copies of this overlay.
- *
- * The view is presentation-minimal but real (a genuine 0–10 NPS selector + an
- * optional reason field). It is fully controlled: it owns no transport/throttle
- * logic — it raises `onSubmit(result)` / `onDismiss()` and the provider wires
- * those to `facade.engage.submitResponse` / `facade.engage.trackEvent`.
- */
-
-import React, { useEffect, useRef, useState, type ReactElement } from 'react';
-import {
-    ActivityIndicator,
-    Modal,
-    View,
-    Text,
-    TextInput,
-    Pressable,
-    type ViewStyle,
-    type TextStyle,
-} from 'react-native';
-import type {
-    EngageAttachmentDraft,
-    EngageCampaignConfig,
-    EngageCampaignType,
-    QuestionSpec,
-    SurveyAnswer,
-} from './engageTypes';
-import { captureScreenshotAttachment } from './attachmentCapture';
-import {
-    startVoiceAttachment,
-    stopVoiceAttachment,
-    cancelVoiceAttachment,
-    VOICE_MAX_DURATION_MS,
-} from './captureVoiceAttachment';
-import type { SubmitStage } from './EngageTransport';
-
-/**
- * [Slice D5] The ONE submit state machine status, shared by EVERY question type.
- * The overlay renders from this — bespoke per-type submit UIs are not allowed.
- */
-export type EngageSubmitStatus =
-    | { phase: 'idle' }
-    | { phase: 'submitting'; stage: SubmitStage }
-    | { phase: 'success' }
-    | { phase: 'error'; message?: string };
-
-/** How a RATING_PROMPT star selection should be routed by the host app. */
-export type RatingRoute = 'store' | 'feedback' | 'submit';
-
-/** Normalized result a prompt branch raises on submit. */
-export interface EngagePromptResult {
-    /** Selected numeric value (NPS 0–10 / CSAT 1–5 / RATING_PROMPT 1–5 stars). */
-    score?: number;
-    /** Optional free-text follow-up (NPS reason / feedback body). */
-    reason?: string;
-    /** Optional categorization tags (FEEDBACK). */
-    tags?: string[];
-    /** Per-question answers (SURVEY multi-question). */
-    answers?: SurveyAnswer[];
-    /** [P3-e] Native attachments captured in the prompt (screenshot/voice). */
-    attachments?: EngageAttachmentDraft[];
-    /**
-     * For RATING_PROMPT: how the provider should route this rating. `store` =
-     * high rating → app-store deeplink; `feedback` = low rating → feedback form;
-     * `submit` = record only. The provider, not the view, owns the side effect.
-     */
-    route?: RatingRoute;
-}
-
-/** Props every prompt-type render branch receives (the Open/Closed contract). */
-export interface PromptBranchProps {
-    campaign: EngageCampaignConfig;
-    onSubmit: (result: EngagePromptResult) => void;
-    onDismiss: () => void;
-    onStart?: () => void;
-    /**
-     * RATING_PROMPT routing config (host-app supplied, never hardcoded). The star
-     * branch reads `highRatingThreshold` to decide store vs feedback routing.
-     */
-    rating?: RatingPromptConfig;
-}
-
-/** Host-app-supplied RATING_PROMPT routing config (deeplink is NEVER hardcoded). */
-export interface RatingPromptConfig {
-    /** Ratings >= this go to the app-store route; below go to feedback. Default 4. */
-    highRatingThreshold?: number;
-    /** Whether a low rating routes to the in-app feedback form (else just submits). */
-    routeLowToFeedback?: boolean;
-}
-
-/** A render branch for one campaign type. Add entries to extend the renderer. */
-export type PromptRenderer = (props: PromptBranchProps) => ReactElement | null;
-
-// ─── NPS render branch (0–10 scale + optional reason) ────────────────────────
-
-function NpsPrompt({ campaign, onSubmit, onDismiss, onStart }: PromptBranchProps): ReactElement {
-    const [score, setScore] = useState<number | null>(null);
-    const [reason, setReason] = useState('');
-
-    // NPS scale is 0..scale (default 10 per contract §1.5). Config drives the range.
-    const max = typeof campaign.scale === 'number' && campaign.scale > 0 ? campaign.scale : 10;
-    const points: number[] = [];
-    for (let i = 0; i <= max; i += 1) points.push(i);
-
-    return (
-        <View style={styles.card}>
-            <Text style={styles.question}>{campaign.question}</Text>
-
-            <View style={styles.scaleRow}>
-                {points.map((n) => {
-                    const selected = score === n;
-                    return (
-                        <Pressable
-                            key={n}
-                            accessibilityRole="button"
-                            accessibilityLabel={`Score ${n}`}
-                            onPress={() => { onStart?.(); setScore(n); }}
-                            style={[styles.scaleCell, selected ? styles.scaleCellSelected : null]}
-                        >
-                            <Text style={[styles.scaleText, selected ? styles.scaleTextSelected : null]}>
-                                {n}
-                            </Text>
-                        </Pressable>
-                    );
-                })}
-            </View>
-
-            <View style={styles.scaleLabels}>
-                <Text style={styles.scaleLabelText}>Not likely</Text>
-                <Text style={styles.scaleLabelText}>Very likely</Text>
-            </View>
-
-            <TextInput
-                style={styles.reasonInput}
-                placeholder="What's the main reason for your score? (optional)"
-                placeholderTextColor="#9097A3"
-                value={reason}
-                onChangeText={(value) => { onStart?.(); setReason(value); }}
-                multiline
-            />
-
-            <View style={styles.actions}>
-                <Pressable
-                    accessibilityRole="button"
-                    accessibilityLabel="Dismiss"
-                    onPress={onDismiss}
-                    style={styles.dismissBtn}
-                >
-                    <Text style={styles.dismissText}>Not now</Text>
-                </Pressable>
-                <Pressable
-                    accessibilityRole="button"
-                    accessibilityLabel="Submit"
-                    disabled={score === null}
-                    onPress={() =>
-                        score !== null
-                            ? onSubmit({ score, reason: reason.trim() || undefined })
-                            : undefined
-                    }
-                    style={[styles.submitBtn, score === null ? styles.submitBtnDisabled : null]}
-                >
-                    <Text style={styles.submitText}>Submit</Text>
-                </Pressable>
-            </View>
-        </View>
-    );
-}
-
-// ─── RATING_PROMPT render branch (1–5 stars → store deeplink / feedback) ─────
-// On submit the branch does NOT itself open any store URL — it raises a `route`
-// (`store` for a high rating, `feedback`/`submit` for a low one) and the provider
-// hands off to the host-app callback. The deeplink is never hardcoded here.
-
-function RatingPrompt({ campaign, onSubmit, onDismiss, onStart, rating }: PromptBranchProps): ReactElement {
-    const [stars, setStars] = useState<number | null>(null);
-
-    const threshold =
-        typeof campaign.highRatingThreshold === 'number' && campaign.highRatingThreshold > 0
-            ? campaign.highRatingThreshold
-            : typeof rating?.highRatingThreshold === 'number' && rating.highRatingThreshold > 0
-            ? rating.highRatingThreshold
-            : 4;
-    const lowToFeedback = campaign.routeLowToFeedback ?? rating?.routeLowToFeedback ?? false;
-    const STARS = [1, 2, 3, 4, 5];
-
-    return (
-        <View style={styles.card}>
-            <Text style={styles.question}>{campaign.question}</Text>
-
-            <View style={styles.starsRow}>
-                {STARS.map((n) => {
-                    const filled = stars !== null && n <= stars;
-                    return (
-                        <Pressable
-                            key={n}
-                            accessibilityRole="button"
-                            accessibilityLabel={`${n} star${n > 1 ? 's' : ''}`}
-                            onPress={() => { onStart?.(); setStars(n); }}
-                            style={styles.starCell}
-                        >
-                            <Text style={[styles.star, filled ? styles.starFilled : null]}>
-                                {filled ? '★' : '☆'}
-                            </Text>
-                        </Pressable>
-                    );
-                })}
-            </View>
-
-            <View style={styles.actions}>
-                <Pressable
-                    accessibilityRole="button"
-                    accessibilityLabel="Dismiss"
-                    onPress={onDismiss}
-                    style={styles.dismissBtn}
-                >
-                    <Text style={styles.dismissText}>Not now</Text>
-                </Pressable>
-                <Pressable
-                    accessibilityRole="button"
-                    accessibilityLabel="Submit rating"
-                    disabled={stars === null}
-                    onPress={() => {
-                        if (stars === null) return;
-                        const route: RatingRoute =
-                            stars >= threshold ? 'store' : lowToFeedback ? 'feedback' : 'submit';
-                        onSubmit({ score: stars, route });
-                    }}
-                    style={[styles.submitBtn, stars === null ? styles.submitBtnDisabled : null]}
-                >
-                    <Text style={styles.submitText}>Submit</Text>
-                </Pressable>
-            </View>
-        </View>
-    );
-}
-
-// ─── FEEDBACK render branch (free text + optional category/tags) ─────────────
-
-function FeedbackPrompt({ campaign, onSubmit, onDismiss, onStart }: PromptBranchProps): ReactElement {
-    const [text, setText] = useState('');
-    const [selectedTags, setSelectedTags] = useState<string[]>([]);
-
-    // Categories come from the campaign's first `choice`-style question (optional).
-    const categoryQuestion = (campaign.questions ?? []).find(
-        (q) => q.kind === 'choice' || q.kind === 'single' || q.kind === 'multi',
-    );
-    const categories = categoryQuestion?.choices ?? [];
-
-    const toggleTag = (tag: string): void => {
-        onStart?.();
-        setSelectedTags((prev) =>
-            prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag],
-        );
-    };
-
-    return (
-        <View style={styles.card}>
-            <Text style={styles.question}>{campaign.question}</Text>
-
-            {categories.length > 0 ? (
-                <View style={styles.chipsRow}>
-                    {categories.map((cat) => {
-                        const on = selectedTags.includes(cat);
-                        return (
-                            <Pressable
-                                key={cat}
-                                accessibilityRole="button"
-                                accessibilityLabel={`Tag ${cat}`}
-                                onPress={() => toggleTag(cat)}
-                                style={[styles.chip, on ? styles.chipSelected : null]}
-                            >
-                                <Text style={[styles.chipText, on ? styles.chipTextSelected : null]}>
-                                    {cat}
-                                </Text>
-                            </Pressable>
-                        );
-                    })}
-                </View>
-            ) : null}
-
-            <TextInput
-                style={styles.reasonInput}
-                placeholder="Tell us what's on your mind"
-                placeholderTextColor="#9097A3"
-                value={text}
-                onChangeText={(value) => { onStart?.(); setText(value); }}
-                multiline
-            />
-
-            <View style={styles.actions}>
-                <Pressable
-                    accessibilityRole="button"
-                    accessibilityLabel="Dismiss"
-                    onPress={onDismiss}
-                    style={styles.dismissBtn}
-                >
-                    <Text style={styles.dismissText}>Not now</Text>
-                </Pressable>
-                <Pressable
-                    accessibilityRole="button"
-                    accessibilityLabel="Submit feedback"
-                    disabled={text.trim().length === 0}
-                    onPress={() =>
-                        text.trim().length > 0
-                            ? onSubmit({
-                                  reason: text.trim(),
-                                  tags: selectedTags.length > 0 ? selectedTags : undefined,
-                              })
-                            : undefined
-                    }
-                    style={[
-                        styles.submitBtn,
-                        text.trim().length === 0 ? styles.submitBtnDisabled : null,
-                    ]}
-                >
-                    <Text style={styles.submitText}>Send</Text>
-                </Pressable>
-            </View>
-        </View>
-    );
-}
-
-// ─── SURVEY render branch (multi-question: single/multi choice, scale, text) ──
-// Driven by `campaign.questions` (QuestionSpec[]). Collects one answer per
-// question and raises a single `answers[]` array the provider submits as one
-// response. Falls back to the single `question` as a lone text question.
-
-function scaleMaxFor(q: QuestionSpec): number {
-    return typeof q.scaleMax === 'number' && q.scaleMax > 0 ? q.scaleMax : 5;
-}
-
-function scaleMinFor(q: QuestionSpec): number {
-    return typeof q.scaleMin === 'number' && q.scaleMin >= 0 ? q.scaleMin : 1;
-}
-
-/** 5-point emoji reaction scale (😡🙁😐🙂😍 → value 1..5). Value persisted as a number. */
-const EMOJI_SCALE: { value: number; glyph: string; label: string }[] = [
-    { value: 1, glyph: '😡', label: 'Very bad' },
-    { value: 2, glyph: '🙁', label: 'Bad' },
-    { value: 3, glyph: '😐', label: 'Okay' },
-    { value: 4, glyph: '🙂', label: 'Good' },
-    { value: 5, glyph: '😍', label: 'Great' },
-];
-
-/** Yes/No boolean question options. Value persisted as the literal string. */
-const YES_NO = ['Yes', 'No'] as const;
-
-function SurveyPrompt({ campaign, onSubmit, onDismiss, onStart }: PromptBranchProps): ReactElement {
-    const questions: QuestionSpec[] =
-        campaign.questions && campaign.questions.length > 0
-            ? campaign.questions
-            : [{ key: 'q1', prompt: campaign.question, kind: 'text' }];
-
-    // One answer slot per question key. string | number | string[] per kind.
-    const [answers, setAnswers] = useState<Record<string, string | number | string[]>>({});
-    const [step, setStep] = useState(campaign.startScreen?.trim() ? -1 : 0);
-    // [P3-e] Captured native attachments, keyed by question. Optional — never blocks submit.
-    const [attachments, setAttachments] = useState<Record<string, EngageAttachmentDraft>>({});
-    const [capturing, setCapturing] = useState<string | null>(null);
-    // [Slice D] Voice recorder state: which question is mid-record + the live elapsed ms.
-    const [recordingKey, setRecordingKey] = useState<string | null>(null);
-    const [elapsedMs, setElapsedMs] = useState(0);
-    const voiceTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
-    const recordStartRef = useRef<number>(0);
-
-    const clearVoiceTimer = (): void => {
-        if (voiceTimerRef.current) {
-            clearInterval(voiceTimerRef.current);
-            voiceTimerRef.current = null;
-        }
-    };
-    // Clean up a running recording if the prompt unmounts mid-record.
-    useEffect(() => () => clearVoiceTimer(), []);
-
-    const setAnswer = (key: string, value: string | number | string[]): void => {
-        onStart?.();
-        setAnswers((prev) => ({ ...prev, [key]: value }));
-    };
-
-    // ─── Voice note: record (≤30s auto-stop) → on-device transcript → edit → approve
-    const startVoice = async (key: string): Promise<void> => {
-        if (recordingKey) return;
-        clearAttachment(key);
-        recordStartRef.current = Date.now();
-        setElapsedMs(0);
-        setRecordingKey(key);
-        try {
-            await startVoiceAttachment();
-        } catch {
-            setRecordingKey(null);
-            return;
-        }
-        // Live timer; auto-stop enforces the 30s cap on the UI leg (1 of 3).
-        voiceTimerRef.current = setInterval(() => {
-            const ms = Date.now() - recordStartRef.current;
-            setElapsedMs(ms);
-            if (ms >= VOICE_MAX_DURATION_MS) {
-                void stopVoice(key);
-            }
-        }, 100);
-    };
-
-    const stopVoice = async (key: string): Promise<void> => {
-        clearVoiceTimer();
-        setRecordingKey(null);
-        const draft = await stopVoiceAttachment();
-        if (draft) setAttachments((prev) => ({ ...prev, [key]: draft }));
-    };
-
-    const cancelVoice = async (key: string): Promise<void> => {
-        clearVoiceTimer();
-        setRecordingKey(null);
-        setElapsedMs(0);
-        await cancelVoiceAttachment();
-        clearAttachment(key);
-    };
-
-    const editTranscript = (key: string, text: string): void => {
-        setAttachments((prev) => {
-            const d = prev[key];
-            if (!d) return prev;
-            return { ...prev, [key]: { ...d, transcript: text } };
-        });
-    };
-
-    const approveVoice = (key: string): void => {
-        setAttachments((prev) => {
-            const d = prev[key];
-            if (!d) return prev;
-            return { ...prev, [key]: { ...d, transcriptApproved: true } };
-        });
-    };
-
-    const captureScreenshot = async (key: string): Promise<void> => {
-        setCapturing(key);
-        try {
-            const draft = await captureScreenshotAttachment();
-            if (draft) setAttachments((prev) => ({ ...prev, [key]: draft }));
-        } finally {
-            setCapturing(null);
-        }
-    };
-
-    const clearAttachment = (key: string): void => {
-        setAttachments((prev) => {
-            const next = { ...prev };
-            delete next[key];
-            return next;
-        });
-    };
-
-    const toggleMulti = (key: string, choice: string): void => {
-        onStart?.();
-        setAnswers((prev) => {
-            const current = Array.isArray(prev[key]) ? (prev[key] as string[]) : [];
-            const next = current.includes(choice)
-                ? current.filter((c) => c !== choice)
-                : [...current, choice];
-            return { ...prev, [key]: next };
-        });
-    };
-
-    const isAnswered = (q: QuestionSpec): boolean => {
-        if (q.kind === 'screenshot') return attachments[q.key] !== undefined;
-        // [Slice D] Voice is optional, BUT: a mid-record clip blocks submit, and a
-        // recorded clip must be explicitly APPROVED before anything is sent (the user
-        // owns the final wording — nothing leaves until they approve).
-        if (q.kind === 'voice') {
-            if (recordingKey === q.key) return false;
-            const d = attachments[q.key];
-            if (!d) return false;
-            return d.transcriptApproved === true;
-        }
-        const v = answers[q.key];
-        if (q.kind === 'multi') return Array.isArray(v) && v.length > 0;
-        if (q.kind === 'text') return typeof v === 'string' && v.trim().length > 0;
-        return v !== undefined && v !== '';
-    };
-    // Only scalar/text questions become answers[]; media questions raise attachments.
-    const assemble = (): SurveyAnswer[] =>
-        questions
-            .filter((q) => q.kind !== 'screenshot' && q.kind !== 'voice')
-            .reduce<SurveyAnswer[]>((result, q) => {
-                const v = answers[q.key];
-                if (v === undefined || v === '' || (Array.isArray(v) && v.length === 0)) return result;
-                if (q.kind === 'multi') {
-                    result.push({ key: q.key, value: Array.isArray(v) ? v : [] });
-                    return result;
-                }
-                if (q.kind === 'scale' || q.kind === 'emoji') {
-                    result.push({ key: q.key, value: typeof v === 'number' ? v : 0 });
-                    return result;
-                }
-                result.push({ key: q.key, value: typeof v === 'string' ? v.trim() : String(v ?? '') });
-                return result;
-            }, []);
-
-    const submit = (): void => {
-        const drafts = Object.values(attachments);
-        onSubmit({
-            answers: assemble(),
-            ...(drafts.length > 0 ? { attachments: drafts } : {}),
-        });
-    };
-
-    const current = step >= 0 && step < questions.length ? questions[step] : null;
-    const advance = (): void => {
-        if (!current) return;
-        if (current.required === true && !isAnswered(current)) return;
-        if (current.skipTo === 'end') {
-            submit();
-            return;
-        }
-        if (current.skipTo) {
-            const target = questions.findIndex((question) => question.key === current.skipTo);
-            if (target >= 0) {
-                setStep(target);
-                return;
-            }
-        }
-        if (step >= questions.length - 1) submit();
-        else setStep(step + 1);
-    };
-
-    return (
-        <View style={styles.card}>
-            {step === -1 ? (
-                <View style={styles.questionBlock}>
-                    <Text style={styles.questionLabel}>{campaign.startScreen}</Text>
-                    <Text style={styles.scaleLabelText}>{questions.length} question{questions.length === 1 ? '' : 's'}</Text>
-                </View>
-            ) : null}
-            {current ? (() => {
-                const q = current;
-                const v = answers[q.key];
-                return (
-                    <View key={q.key} style={styles.questionBlock}>
-                        <Text style={styles.questionLabel}>{q.prompt}</Text>
-                        <Text style={styles.scaleLabelText}>Question {step + 1} of {questions.length}{q.required ? ' · required' : ' · optional'}</Text>
-
-                        {q.kind === 'scale' ? (
-                            <View style={styles.scaleRow}>
-                                {buildScalePoints(scaleMinFor(q), scaleMaxFor(q)).map((n) => {
-                                    const selected = v === n;
-                                    return (
-                                        <Pressable
-                                            key={n}
-                                            accessibilityRole="button"
-                                            accessibilityLabel={`${q.prompt} ${n}`}
-                                            onPress={() => setAnswer(q.key, n)}
-                                            style={[
-                                                styles.scaleCell,
-                                                selected ? styles.scaleCellSelected : null,
-                                            ]}
-                                        >
-                                            <Text
-                                                style={[
-                                                    styles.scaleText,
-                                                    selected ? styles.scaleTextSelected : null,
-                                                ]}
-                                            >
-                                                {n}
-                                            </Text>
-                                        </Pressable>
-                                    );
-                                })}
-                            </View>
-                        ) : null}
-
-                        {q.kind === 'text' ? (
-                            <TextInput
-                                style={styles.reasonInput}
-                                placeholder="Your answer"
-                                placeholderTextColor="#9097A3"
-                                value={typeof v === 'string' ? v : ''}
-                                onChangeText={(t) => setAnswer(q.key, t)}
-                                multiline
-                            />
-                        ) : null}
-
-                        {q.kind === 'single' || q.kind === 'choice' ? (
-                            <View style={styles.chipsRow}>
-                                {(q.choices ?? []).map((choice) => {
-                                    const on = v === choice;
-                                    return (
-                                        <Pressable
-                                            key={choice}
-                                            accessibilityRole="button"
-                                            accessibilityLabel={`${q.prompt} ${choice}`}
-                                            onPress={() => setAnswer(q.key, choice)}
-                                            style={[styles.chip, on ? styles.chipSelected : null]}
-                                        >
-                                            <Text
-                                                style={[
-                                                    styles.chipText,
-                                                    on ? styles.chipTextSelected : null,
-                                                ]}
-                                            >
-                                                {choice}
-                                            </Text>
-                                        </Pressable>
-                                    );
-                                })}
-                            </View>
-                        ) : null}
-
-                        {q.kind === 'multi' ? (
-                            <View style={styles.chipsRow}>
-                                {(q.choices ?? []).map((choice) => {
-                                    const on = Array.isArray(v) && v.includes(choice);
-                                    return (
-                                        <Pressable
-                                            key={choice}
-                                            accessibilityRole="button"
-                                            accessibilityLabel={`${q.prompt} ${choice}`}
-                                            onPress={() => toggleMulti(q.key, choice)}
-                                            style={[styles.chip, on ? styles.chipSelected : null]}
-                                        >
-                                            <Text
-                                                style={[
-                                                    styles.chipText,
-                                                    on ? styles.chipTextSelected : null,
-                                                ]}
-                                            >
-                                                {choice}
-                                            </Text>
-                                        </Pressable>
-                                    );
-                                })}
-                            </View>
-                        ) : null}
-
-                        {q.kind === 'emoji' ? (
-                            <View style={styles.emojiRow}>
-                                {EMOJI_SCALE.map((e) => {
-                                    const on = v === e.value;
-                                    return (
-                                        <Pressable
-                                            key={e.value}
-                                            accessibilityRole="button"
-                                            accessibilityLabel={`${q.prompt} ${e.label}`}
-                                            onPress={() => setAnswer(q.key, e.value)}
-                                            style={[styles.emojiCell, on ? styles.emojiCellSelected : null]}
-                                        >
-                                            <Text style={styles.emojiGlyph}>{e.glyph}</Text>
-                                        </Pressable>
-                                    );
-                                })}
-                            </View>
-                        ) : null}
-
-                        {q.kind === 'screenshot' ? (
-                            <View>
-                                <Pressable
-                                    accessibilityRole="button"
-                                    accessibilityLabel={attachments[q.key] ? 'Retake screenshot' : 'Add screenshot'}
-                                    disabled={capturing === q.key}
-                                    onPress={() => captureScreenshot(q.key)}
-                                    style={[styles.chip, attachments[q.key] ? styles.chipSelected : null]}
-                                >
-                                    <Text style={[styles.chipText, attachments[q.key] ? styles.chipTextSelected : null]}>
-                                        {capturing === q.key
-                                            ? 'Capturing…'
-                                            : attachments[q.key]
-                                              ? '✓ Screenshot attached — retake'
-                                              : '📷 Add screenshot'}
-                                    </Text>
-                                </Pressable>
-                                {attachments[q.key] ? (
-                                    <Pressable
-                                        accessibilityRole="button"
-                                        accessibilityLabel="Remove screenshot"
-                                        onPress={() => clearAttachment(q.key)}
-                                        style={styles.dismissBtn}
-                                    >
-                                        <Text style={styles.dismissText}>Remove</Text>
-                                    </Pressable>
-                                ) : null}
-                            </View>
-                        ) : null}
-
-                        {q.kind === 'voice' ? (
-                            <VoiceQuestion
-                                draft={attachments[q.key]}
-                                recording={recordingKey === q.key}
-                                elapsedMs={recordingKey === q.key ? elapsedMs : 0}
-                                onStart={() => void startVoice(q.key)}
-                                onStop={() => void stopVoice(q.key)}
-                                onCancel={() => void cancelVoice(q.key)}
-                                onEditTranscript={(t) => editTranscript(q.key, t)}
-                                onApprove={() => approveVoice(q.key)}
-                            />
-                        ) : null}
-
-                        {q.kind === 'boolean' ? (
-                            <View style={styles.chipsRow}>
-                                {YES_NO.map((opt) => {
-                                    const on = v === opt;
-                                    return (
-                                        <Pressable
-                                            key={opt}
-                                            accessibilityRole="button"
-                                            accessibilityLabel={`${q.prompt} ${opt}`}
-                                            onPress={() => setAnswer(q.key, opt)}
-                                            style={[styles.yesNoBtn, on ? styles.chipSelected : null]}
-                                        >
-                                            <Text
-                                                style={[
-                                                    styles.chipText,
-                                                    on ? styles.chipTextSelected : null,
-                                                ]}
-                                            >
-                                                {opt}
-                                            </Text>
-                                        </Pressable>
-                                    );
-                                })}
-                            </View>
-                        ) : null}
-                    </View>
-                );
-            })() : null}
-
-            <View style={styles.actions}>
-                <Pressable
-                    accessibilityRole="button"
-                    accessibilityLabel="Dismiss"
-                    onPress={onDismiss}
-                    style={styles.dismissBtn}
-                >
-                    <Text style={styles.dismissText}>Not now</Text>
-                </Pressable>
-                {step === -1 ? (
-                    <Pressable accessibilityRole="button" accessibilityLabel="Start survey" onPress={() => { onStart?.(); setStep(0); }} style={styles.submitBtn}>
-                        <Text style={styles.submitText}>Start</Text>
-                    </Pressable>
-                ) : current ? (
-                    <Pressable
-                        accessibilityRole="button"
-                        accessibilityLabel={step === questions.length - 1 || current.skipTo === 'end' ? 'Submit survey' : 'Continue survey'}
-                        disabled={current.required === true && !isAnswered(current)}
-                        onPress={advance}
-                        style={[styles.submitBtn, current.required === true && !isAnswered(current) ? styles.submitBtnDisabled : null]}
-                    >
-                        <Text style={styles.submitText}>{step === questions.length - 1 || current.skipTo === 'end' ? 'Submit' : 'Continue'}</Text>
-                    </Pressable>
-                ) : null}
-            </View>
-        </View>
-    );
-}
-
-function buildScalePoints(min: number, max: number): number[] {
-    const points: number[] = [];
-    for (let i = min; i <= max; i += 1) points.push(i);
-    return points;
-}
-
-function formatElapsed(ms: number): string {
-    const totalSec = Math.floor(ms / 1000);
-    const s = totalSec % 60;
-    return `0:${s < 10 ? '0' : ''}${s}`;
-}
-
-// ─── Voice note sub-view (record ≤30s → on-device transcript → edit → approve) ─
-// Reusable inside SurveyPrompt for any `voice` question. Owns no transport: it
-// raises record/stop/approve callbacks; the parent holds the draft + transcript.
-
-interface VoiceQuestionProps {
-    draft?: EngageAttachmentDraft;
-    recording: boolean;
-    elapsedMs: number;
-    onStart: () => void;
-    onStop: () => void;
-    onCancel: () => void;
-    onEditTranscript: (text: string) => void;
-    onApprove: () => void;
-}
-
-function VoiceQuestion({
-    draft,
-    recording,
-    elapsedMs,
-    onStart,
-    onStop,
-    onCancel,
-    onEditTranscript,
-    onApprove,
-}: VoiceQuestionProps): ReactElement {
-    const capSec = Math.floor(VOICE_MAX_DURATION_MS / 1000);
-
-    if (recording) {
-        return (
-            <View>
-                <View style={styles.voiceRecordingRow}>
-                    <View style={styles.voiceDot} />
-                    <Text style={styles.voiceTimer}>
-                        {formatElapsed(elapsedMs)} / 0:{capSec}
-                    </Text>
-                </View>
-                <View style={styles.chipsRow}>
-                    <Pressable
-                        accessibilityRole="button"
-                        accessibilityLabel="Stop recording"
-                        onPress={onStop}
-                        style={styles.voiceStopBtn}
-                    >
-                        <Text style={styles.chipTextSelected}>■ Stop</Text>
-                    </Pressable>
-                    <Pressable
-                        accessibilityRole="button"
-                        accessibilityLabel="Cancel recording"
-                        onPress={onCancel}
-                        style={styles.dismissBtn}
-                    >
-                        <Text style={styles.dismissText}>Cancel</Text>
-                    </Pressable>
-                </View>
-            </View>
-        );
-    }
-
-    if (!draft) {
-        return (
-            <Pressable
-                accessibilityRole="button"
-                accessibilityLabel="Record voice note"
-                onPress={onStart}
-                style={styles.chip}
-            >
-                <Text style={styles.chipText}>🎙 Record voice note (max {capSec}s)</Text>
-            </Pressable>
-        );
-    }
-
-    // Recorded: show editable transcript prefill + explicit approve gate.
-    return (
-        <View>
-            <Text style={styles.voiceMeta}>
-                🎙 Voice note recorded · {formatElapsed(draft.durationMs ?? 0)}
-            </Text>
-            <Text style={styles.voiceHint}>
-                Review the transcript below — edit it, then approve to send. Nothing is
-                sent until you approve.
-            </Text>
-            <TextInput
-                style={styles.reasonInput}
-                placeholder="Transcript (edit before approving)"
-                placeholderTextColor="#9097A3"
-                value={draft.transcript ?? ''}
-                onChangeText={onEditTranscript}
-                editable={!draft.transcriptApproved}
-                multiline
-            />
-            <View style={styles.chipsRow}>
-                {draft.transcriptApproved ? (
-                    <View style={styles.voiceApprovedBadge}>
-                        <Text style={styles.chipTextSelected}>✓ Approved</Text>
-                    </View>
-                ) : (
-                    <Pressable
-                        accessibilityRole="button"
-                        accessibilityLabel="Approve transcript"
-                        onPress={onApprove}
-                        style={styles.voiceApproveBtn}
-                    >
-                        <Text style={styles.chipTextSelected}>✓ Approve &amp; keep</Text>
-                    </Pressable>
-                )}
-                <Pressable
-                    accessibilityRole="button"
-                    accessibilityLabel="Re-record voice note"
-                    onPress={onStart}
-                    style={styles.dismissBtn}
-                >
-                    <Text style={styles.dismissText}>Re-record</Text>
-                </Pressable>
-            </View>
-        </View>
-    );
-}
-
-// ─── Reusable submit state overlay (submitting → success → error) ──────────────
-// The SINGLE submit UI for EVERY question type. Covers the card while non-idle so
-// inputs/submit are blocked in-flight (no double-submit). Renders real stages and a
-// retryable error. NOT bespoke to voice — the shell mounts it over any prompt branch.
-
-interface SubmitStatusOverlayProps {
-    status: EngageSubmitStatus;
-    onRetry: () => void;
-    onClose: () => void;
-    successMessage?: string;
-}
-
-function stageLabel(stage: SubmitStage): string {
-    return stage === 'uploading' ? 'Uploading attachment…' : 'Saving your feedback…';
-}
-
-function SubmitStatusOverlay({
-    status,
-    onRetry,
-    onClose,
-    successMessage,
-}: SubmitStatusOverlayProps): ReactElement | null {
-    if (status.phase === 'idle') return null;
-
-    return (
-        <View style={styles.submitOverlay}>
-            {status.phase === 'submitting' ? (
-                <View style={styles.submitCenter}>
-                    <ActivityIndicator size="large" color="#2F6BFF" />
-                    <Text style={styles.submitStageText}>{stageLabel(status.stage)}</Text>
-                </View>
-            ) : null}
-
-            {status.phase === 'success' ? (
-                <View style={styles.submitCenter}>
-                    <Text style={styles.submitSuccessMark}>✓</Text>
-                    <Text style={styles.submitStageText}>{successMessage?.trim() || 'Sent — thank you!'}</Text>
-                </View>
-            ) : null}
-
-            {status.phase === 'error' ? (
-                <View style={styles.submitCenter}>
-                    <Text style={styles.submitErrorMark}>!</Text>
-                    <Text style={styles.submitStageText}>Couldn't send. Please retry.</Text>
-                    <View style={styles.actions}>
-                        <Pressable
-                            accessibilityRole="button"
-                            accessibilityLabel="Close"
-                            onPress={onClose}
-                            style={styles.dismissBtn}
-                        >
-                            <Text style={styles.dismissText}>Close</Text>
-                        </Pressable>
-                        <Pressable
-                            accessibilityRole="button"
-                            accessibilityLabel="Retry submit"
-                            onPress={onRetry}
-                            style={styles.submitBtn}
-                        >
-                            <Text style={styles.submitText}>Retry</Text>
-                        </Pressable>
-                    </View>
-                </View>
-            ) : null}
-        </View>
-    );
-}
-
-// ─── Open/Closed registry: config.type → render branch ───────────────────────
-// NPS first; RATING_PROMPT/FEEDBACK/SURVEY plug in as ADDITIONAL entries. The
-// overlay shell, modal, throttle, and transport wiring stay untouched. SURVEY is
-// keyed on the contract's CSAT/CUSTOM campaign subtypes (multi-question surveys).
-export const PROMPT_RENDERERS: Partial<Record<EngageCampaignType, PromptRenderer>> = {
-    NPS: NpsPrompt,
-    RATING_PROMPT: RatingPrompt,
-    RATINGS_PROMPT: RatingPrompt,
-    FEEDBACK: FeedbackPrompt,
-    CSAT: SurveyPrompt,
-    CUSTOM: SurveyPrompt,
-};
-
-/** Resolve the render branch for a campaign, or null if its type isn't supported yet. */
-export function resolvePromptRenderer(type: EngageCampaignType): PromptRenderer | null {
-    return PROMPT_RENDERERS[type] ?? null;
-}
-
-// ─── Overlay shell ───────────────────────────────────────────────────────────
-
-export interface EngagePromptViewProps {
-    campaign: EngageCampaignConfig | null;
-    visible: boolean;
-    onSubmit: (result: EngagePromptResult) => void;
-    onDismiss: () => void;
-    onStart?: () => void;
-    /** RATING_PROMPT routing config forwarded to the star branch (host-supplied). */
-    rating?: RatingPromptConfig;
-    /** [Slice D5] Reusable submit state — drives the in-prompt submitting/success/error overlay. */
-    submitStatus?: EngageSubmitStatus;
-    /** Retry the last submit (same idempotent responseId). */
-    onRetrySubmit?: () => void;
-    /** Close the prompt after a terminal submit state (success/error). */
-    onCloseSubmit?: () => void;
-}
-
-/**
- * Modal overlay shell. Branches on `campaign.type` via the registry — renders the
- * matching prompt or nothing. This is the single mount point a host app shows.
- */
-export function EngagePromptView({
-    campaign,
-    visible,
-    onSubmit,
-    onDismiss,
-    onStart,
-    rating,
-    submitStatus,
-    onRetrySubmit,
-    onCloseSubmit,
-}: EngagePromptViewProps): ReactElement | null {
-    if (!campaign || !visible) return null;
-
-    const Branch = resolvePromptRenderer(campaign.type);
-    if (!Branch) return null;
-
-    const status: EngageSubmitStatus = submitStatus ?? { phase: 'idle' };
-
-    return (
-        <Modal
-            visible={visible}
-            transparent
-            animationType="fade"
-            onRequestClose={onDismiss}
-        >
-            <View style={styles.backdrop}>
-                {/* The branch + the reusable submit overlay share one positioned wrapper
-                    so the overlay covers the branch (blocking input) while submitting. */}
-                <View style={styles.promptWrapper}>
-                    <Branch
-                        campaign={campaign}
-                        onSubmit={onSubmit}
-                        onDismiss={onDismiss}
-                        onStart={onStart}
-                        rating={rating}
-                    />
-                    <SubmitStatusOverlay
-                        status={status}
-                        onRetry={() => onRetrySubmit?.()}
-                        onClose={() => onCloseSubmit?.()}
-                        successMessage={campaign.thankYouScreen}
-                    />
-                </View>
-            </View>
-        </Modal>
-    );
-}
-
-// ─── Styles ──────────────────────────────────────────────────────────────────
-// Plain objects (not StyleSheet.create) to match the bridgeless-safe pattern in
-// ScaleBunDebugRoot — avoids touching DeviceInfo TurboModule at module-load time.
-
-const styles: {
-    backdrop: ViewStyle;
-    card: ViewStyle;
-    question: TextStyle;
-    scaleRow: ViewStyle;
-    scaleCell: ViewStyle;
-    scaleCellSelected: ViewStyle;
-    scaleText: TextStyle;
-    scaleTextSelected: TextStyle;
-    scaleLabels: ViewStyle;
-    scaleLabelText: TextStyle;
-    reasonInput: TextStyle;
-    actions: ViewStyle;
-    dismissBtn: ViewStyle;
-    dismissText: TextStyle;
-    submitBtn: ViewStyle;
-    submitBtnDisabled: ViewStyle;
-    submitText: TextStyle;
-    starsRow: ViewStyle;
-    starCell: ViewStyle;
-    star: TextStyle;
-    starFilled: TextStyle;
-    chipsRow: ViewStyle;
-    chip: ViewStyle;
-    chipSelected: ViewStyle;
-    chipText: TextStyle;
-    chipTextSelected: TextStyle;
-    questionBlock: ViewStyle;
-    questionLabel: TextStyle;
-    emojiRow: ViewStyle;
-    emojiCell: ViewStyle;
-    emojiCellSelected: ViewStyle;
-    emojiGlyph: TextStyle;
-    yesNoBtn: ViewStyle;
-    promptWrapper: ViewStyle;
-    voiceRecordingRow: ViewStyle;
-    voiceDot: ViewStyle;
-    voiceTimer: TextStyle;
-    voiceStopBtn: ViewStyle;
-    voiceMeta: TextStyle;
-    voiceHint: TextStyle;
-    voiceApproveBtn: ViewStyle;
-    voiceApprovedBadge: ViewStyle;
-    submitOverlay: ViewStyle;
-    submitCenter: ViewStyle;
-    submitStageText: TextStyle;
-    submitSuccessMark: TextStyle;
-    submitErrorMark: TextStyle;
-} = {
-    backdrop: {
-        flex: 1,
-        backgroundColor: 'rgba(0,0,0,0.45)',
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: 20,
-    },
-    card: {
-        width: '100%',
-        maxWidth: 420,
-        backgroundColor: '#FFFFFF',
-        borderRadius: 16,
-        padding: 20,
-    },
-    question: {
-        fontSize: 17,
-        fontWeight: '600',
-        color: '#11151C',
-        marginBottom: 16,
-    },
-    scaleRow: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        justifyContent: 'space-between',
-    },
-    scaleCell: {
-        width: 30,
-        height: 36,
-        marginBottom: 8,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: '#D7DBE2',
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    scaleCellSelected: {
-        backgroundColor: '#2F6BFF',
-        borderColor: '#2F6BFF',
-    },
-    scaleText: {
-        fontSize: 14,
-        color: '#3A4250',
-    },
-    scaleTextSelected: {
-        color: '#FFFFFF',
-        fontWeight: '700',
-    },
-    scaleLabels: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        marginTop: 2,
-        marginBottom: 14,
-    },
-    scaleLabelText: {
-        fontSize: 11,
-        color: '#9097A3',
-    },
-    reasonInput: {
-        minHeight: 64,
-        borderWidth: 1,
-        borderColor: '#D7DBE2',
-        borderRadius: 10,
-        padding: 12,
-        fontSize: 14,
-        color: '#11151C',
-        textAlignVertical: 'top',
-        marginBottom: 16,
-    },
-    actions: {
-        flexDirection: 'row',
-        justifyContent: 'flex-end',
-    },
-    dismissBtn: {
-        paddingVertical: 10,
-        paddingHorizontal: 16,
-        marginRight: 8,
-    },
-    dismissText: {
-        fontSize: 15,
-        color: '#6B7280',
-        fontWeight: '500',
-    },
-    submitBtn: {
-        paddingVertical: 10,
-        paddingHorizontal: 20,
-        borderRadius: 10,
-        backgroundColor: '#2F6BFF',
-    },
-    submitBtnDisabled: {
-        backgroundColor: '#A9C0FF',
-    },
-    submitText: {
-        fontSize: 15,
-        color: '#FFFFFF',
-        fontWeight: '600',
-    },
-    starsRow: {
-        flexDirection: 'row',
-        justifyContent: 'center',
-        marginBottom: 18,
-    },
-    starCell: {
-        paddingHorizontal: 6,
-        paddingVertical: 4,
-    },
-    star: {
-        fontSize: 36,
-        color: '#D7DBE2',
-    },
-    starFilled: {
-        color: '#F5A623',
-    },
-    chipsRow: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        marginBottom: 12,
-    },
-    chip: {
-        paddingVertical: 6,
-        paddingHorizontal: 12,
-        borderRadius: 16,
-        borderWidth: 1,
-        borderColor: '#D7DBE2',
-        marginRight: 8,
-        marginBottom: 8,
-    },
-    chipSelected: {
-        backgroundColor: '#2F6BFF',
-        borderColor: '#2F6BFF',
-    },
-    chipText: {
-        fontSize: 13,
-        color: '#3A4250',
-    },
-    chipTextSelected: {
-        color: '#FFFFFF',
-        fontWeight: '600',
-    },
-    questionBlock: {
-        marginBottom: 16,
-    },
-    questionLabel: {
-        fontSize: 15,
-        fontWeight: '600',
-        color: '#11151C',
-        marginBottom: 10,
-    },
-    emojiRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        marginBottom: 12,
-    },
-    emojiCell: {
-        width: 52,
-        height: 52,
-        borderRadius: 26,
-        borderWidth: 1,
-        borderColor: '#D7DBE2',
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    emojiCellSelected: {
-        backgroundColor: '#EAF1FF',
-        borderColor: '#2F6BFF',
-    },
-    emojiGlyph: {
-        fontSize: 26,
-    },
-    yesNoBtn: {
-        paddingVertical: 10,
-        paddingHorizontal: 28,
-        borderRadius: 16,
-        borderWidth: 1,
-        borderColor: '#D7DBE2',
-        marginRight: 10,
-        marginBottom: 8,
-    },
-    promptWrapper: {
-        width: '100%',
-        maxWidth: 420,
-        position: 'relative',
-    },
-    voiceRecordingRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginBottom: 10,
-    },
-    voiceDot: {
-        width: 12,
-        height: 12,
-        borderRadius: 6,
-        backgroundColor: '#E5484D',
-        marginRight: 8,
-    },
-    voiceTimer: {
-        fontSize: 15,
-        fontWeight: '600',
-        color: '#11151C',
-    },
-    voiceStopBtn: {
-        paddingVertical: 6,
-        paddingHorizontal: 16,
-        borderRadius: 16,
-        backgroundColor: '#E5484D',
-        marginRight: 8,
-        marginBottom: 8,
-    },
-    voiceMeta: {
-        fontSize: 13,
-        fontWeight: '600',
-        color: '#11151C',
-        marginBottom: 6,
-    },
-    voiceHint: {
-        fontSize: 12,
-        color: '#6B7280',
-        marginBottom: 8,
-    },
-    voiceApproveBtn: {
-        paddingVertical: 6,
-        paddingHorizontal: 16,
-        borderRadius: 16,
-        backgroundColor: '#1F9D55',
-        marginRight: 8,
-        marginBottom: 8,
-    },
-    voiceApprovedBadge: {
-        paddingVertical: 6,
-        paddingHorizontal: 16,
-        borderRadius: 16,
-        backgroundColor: '#1F9D55',
-        marginRight: 8,
-        marginBottom: 8,
-        opacity: 0.7,
-    },
-    submitOverlay: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: 'rgba(255,255,255,0.94)',
-        borderRadius: 16,
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: 20,
-    },
-    submitCenter: {
-        alignItems: 'center',
-    },
-    submitStageText: {
-        fontSize: 15,
-        fontWeight: '600',
-        color: '#11151C',
-        marginTop: 12,
-        textAlign: 'center',
-    },
-    submitSuccessMark: {
-        fontSize: 44,
-        color: '#1F9D55',
-        fontWeight: '700',
-    },
-    submitErrorMark: {
-        fontSize: 44,
-        color: '#E5484D',
-        fontWeight: '700',
-    },
-};
+/**
+ * ScaleBun SDK — Engage Prompt View (shared cross-platform JS overlay, D4)
+ *
+ * The ONE reusable campaign renderer. It is parameterized by config (Open/Closed):
+ * a `PROMPT_RENDERERS` registry maps an `EngageCampaignType` to a render branch.
+ * NPS is implemented now; ratings/feedback/survey plug in later as ADDITIONAL
+ * entries in that registry — NOT four copies of this overlay.
+ *
+ * The view is presentation-minimal but real (a genuine 0–10 NPS selector + an
+ * optional reason field). It is fully controlled: it owns no transport/throttle
+ * logic — it raises `onSubmit(result)` / `onDismiss()` and the provider wires
+ * those to `facade.engage.submitResponse` / `facade.engage.trackEvent`.
+ */
+
+import React, { useEffect, useRef, useState, type ReactElement } from 'react';
+import {
+    ActivityIndicator,
+    Modal,
+    View,
+    Text,
+    TextInput,
+    Pressable,
+    type ViewStyle,
+    type TextStyle,
+} from 'react-native';
+import type {
+    EngageAttachmentDraft,
+    EngageCampaignConfig,
+    EngageCampaignType,
+    QuestionSpec,
+    SurveyAnswer,
+} from './engageTypes';
+import { captureScreenshotAttachment } from './attachmentCapture';
+import {
+    startVoiceAttachment,
+    stopVoiceAttachment,
+    cancelVoiceAttachment,
+    VOICE_MAX_DURATION_MS,
+} from './captureVoiceAttachment';
+import type { SubmitStage } from './EngageTransport';
+
+/**
+ * [Slice D5] The ONE submit state machine status, shared by EVERY question type.
+ * The overlay renders from this — bespoke per-type submit UIs are not allowed.
+ */
+export type EngageSubmitStatus =
+    | { phase: 'idle' }
+    | { phase: 'submitting'; stage: SubmitStage }
+    | { phase: 'success' }
+    | { phase: 'error'; message?: string };
+
+/** How a RATING_PROMPT star selection should be routed by the host app. */
+export type RatingRoute = 'store' | 'feedback' | 'submit';
+
+/** Normalized result a prompt branch raises on submit. */
+export interface EngagePromptResult {
+    /** Selected numeric value (NPS 0–10 / CSAT 1–5 / RATING_PROMPT 1–5 stars). */
+    score?: number;
+    /** Optional free-text follow-up (NPS reason / feedback body). */
+    reason?: string;
+    /** Optional categorization tags (FEEDBACK). */
+    tags?: string[];
+    /** Per-question answers (SURVEY multi-question). */
+    answers?: SurveyAnswer[];
+    /** [P3-e] Native attachments captured in the prompt (screenshot/voice). */
+    attachments?: EngageAttachmentDraft[];
+    /**
+     * For RATING_PROMPT: how the provider should route this rating. `store` =
+     * high rating → app-store deeplink; `feedback` = low rating → feedback form;
+     * `submit` = record only. The provider, not the view, owns the side effect.
+     */
+    route?: RatingRoute;
+}
+
+/** Props every prompt-type render branch receives (the Open/Closed contract). */
+export interface PromptBranchProps {
+    campaign: EngageCampaignConfig;
+    onSubmit: (result: EngagePromptResult) => void;
+    onDismiss: () => void;
+    onStart?: () => void;
+    /**
+     * RATING_PROMPT routing config (host-app supplied, never hardcoded). The star
+     * branch reads `highRatingThreshold` to decide store vs feedback routing.
+     */
+    rating?: RatingPromptConfig;
+}
+
+/** Host-app-supplied RATING_PROMPT routing config (deeplink is NEVER hardcoded). */
+export interface RatingPromptConfig {
+    /** Ratings >= this go to the app-store route; below go to feedback. Default 4. */
+    highRatingThreshold?: number;
+    /** Whether a low rating routes to the in-app feedback form (else just submits). */
+    routeLowToFeedback?: boolean;
+}
+
+/** A render branch for one campaign type. Add entries to extend the renderer. */
+export type PromptRenderer = (props: PromptBranchProps) => ReactElement | null;
+
+// ─── NPS render branch (0–10 scale + optional reason) ────────────────────────
+
+function NpsPrompt({ campaign, onSubmit, onDismiss, onStart }: PromptBranchProps): ReactElement {
+    const [score, setScore] = useState<number | null>(null);
+    const [reason, setReason] = useState('');
+
+    // NPS scale is 0..scale (default 10 per contract §1.5). Config drives the range.
+    const max = typeof campaign.scale === 'number' && campaign.scale > 0 ? campaign.scale : 10;
+    const points: number[] = [];
+    for (let i = 0; i <= max; i += 1) points.push(i);
+
+    return (
+        <View style={styles.card}>
+            <Text style={styles.question}>{campaign.question}</Text>
+
+            <View style={styles.scaleRow}>
+                {points.map((n) => {
+                    const selected = score === n;
+                    return (
+                        <Pressable
+                            key={n}
+                            accessibilityRole="button"
+                            accessibilityLabel={`Score ${n}`}
+                            onPress={() => { onStart?.(); setScore(n); }}
+                            style={[styles.scaleCell, selected ? styles.scaleCellSelected : null]}
+                        >
+                            <Text style={[styles.scaleText, selected ? styles.scaleTextSelected : null]}>
+                                {n}
+                            </Text>
+                        </Pressable>
+                    );
+                })}
+            </View>
+
+            <View style={styles.scaleLabels}>
+                <Text style={styles.scaleLabelText}>Not likely</Text>
+                <Text style={styles.scaleLabelText}>Very likely</Text>
+            </View>
+
+            <TextInput
+                style={styles.reasonInput}
+                placeholder="What's the main reason for your score? (optional)"
+                placeholderTextColor="#9097A3"
+                value={reason}
+                onChangeText={(value) => { onStart?.(); setReason(value); }}
+                multiline
+            />
+
+            <View style={styles.actions}>
+                <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel="Dismiss"
+                    onPress={onDismiss}
+                    style={styles.dismissBtn}
+                >
+                    <Text style={styles.dismissText}>Not now</Text>
+                </Pressable>
+                <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel="Submit"
+                    disabled={score === null}
+                    onPress={() =>
+                        score !== null
+                            ? onSubmit({ score, reason: reason.trim() || undefined })
+                            : undefined
+                    }
+                    style={[styles.submitBtn, score === null ? styles.submitBtnDisabled : null]}
+                >
+                    <Text style={styles.submitText}>Submit</Text>
+                </Pressable>
+            </View>
+        </View>
+    );
+}
+
+// ─── RATING_PROMPT render branch (1–5 stars → store deeplink / feedback) ─────
+// On submit the branch does NOT itself open any store URL — it raises a `route`
+// (`store` for a high rating, `feedback`/`submit` for a low one) and the provider
+// hands off to the host-app callback. The deeplink is never hardcoded here.
+
+function RatingPrompt({ campaign, onSubmit, onDismiss, onStart, rating }: PromptBranchProps): ReactElement {
+    const [stars, setStars] = useState<number | null>(null);
+
+    const threshold =
+        typeof campaign.highRatingThreshold === 'number' && campaign.highRatingThreshold > 0
+            ? campaign.highRatingThreshold
+            : typeof rating?.highRatingThreshold === 'number' && rating.highRatingThreshold > 0
+            ? rating.highRatingThreshold
+            : 4;
+    const lowToFeedback = campaign.routeLowToFeedback ?? rating?.routeLowToFeedback ?? false;
+    const STARS = [1, 2, 3, 4, 5];
+
+    return (
+        <View style={styles.card}>
+            <Text style={styles.question}>{campaign.question}</Text>
+
+            <View style={styles.starsRow}>
+                {STARS.map((n) => {
+                    const filled = stars !== null && n <= stars;
+                    return (
+                        <Pressable
+                            key={n}
+                            accessibilityRole="button"
+                            accessibilityLabel={`${n} star${n > 1 ? 's' : ''}`}
+                            onPress={() => { onStart?.(); setStars(n); }}
+                            style={styles.starCell}
+                        >
+                            <Text style={[styles.star, filled ? styles.starFilled : null]}>
+                                {filled ? '★' : '☆'}
+                            </Text>
+                        </Pressable>
+                    );
+                })}
+            </View>
+
+            <View style={styles.actions}>
+                <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel="Dismiss"
+                    onPress={onDismiss}
+                    style={styles.dismissBtn}
+                >
+                    <Text style={styles.dismissText}>Not now</Text>
+                </Pressable>
+                <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel="Submit rating"
+                    disabled={stars === null}
+                    onPress={() => {
+                        if (stars === null) return;
+                        const route: RatingRoute =
+                            stars >= threshold ? 'store' : lowToFeedback ? 'feedback' : 'submit';
+                        onSubmit({ score: stars, route });
+                    }}
+                    style={[styles.submitBtn, stars === null ? styles.submitBtnDisabled : null]}
+                >
+                    <Text style={styles.submitText}>Submit</Text>
+                </Pressable>
+            </View>
+        </View>
+    );
+}
+
+// ─── FEEDBACK render branch (free text + optional category/tags) ─────────────
+
+function FeedbackPrompt(props: PromptBranchProps): ReactElement {
+    // A FEEDBACK campaign authored with structured questions (voice, scale, emoji,
+    // screenshot, multiple prompts) IS a survey — this branch only knows how to draw
+    // one text box plus category chips, and used to silently render a voice question
+    // as text (found live: "it was supposed to be a voice input but showed text").
+    // Anything beyond chips delegates to the full survey renderer, which owns the
+    // record → transcribe → approve voice flow.
+    const structured = (props.campaign.questions ?? []).some(
+        (q) => q.kind !== 'choice' && q.kind !== 'single' && q.kind !== 'multi',
+    );
+    if (structured) return <SurveyPrompt {...props} />;
+    return <FeedbackTextPrompt {...props} />;
+}
+
+function FeedbackTextPrompt({ campaign, onSubmit, onDismiss, onStart }: PromptBranchProps): ReactElement {
+    const [text, setText] = useState('');
+    const [selectedTags, setSelectedTags] = useState<string[]>([]);
+
+    // Categories come from the campaign's first `choice`-style question (optional).
+    const categoryQuestion = (campaign.questions ?? []).find(
+        (q) => q.kind === 'choice' || q.kind === 'single' || q.kind === 'multi',
+    );
+    const categories = categoryQuestion?.choices ?? [];
+
+    const toggleTag = (tag: string): void => {
+        onStart?.();
+        setSelectedTags((prev) =>
+            prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag],
+        );
+    };
+
+    return (
+        <View style={styles.card}>
+            <Text style={styles.question}>{campaign.question}</Text>
+
+            {categories.length > 0 ? (
+                <View style={styles.chipsRow}>
+                    {categories.map((cat) => {
+                        const on = selectedTags.includes(cat);
+                        return (
+                            <Pressable
+                                key={cat}
+                                accessibilityRole="button"
+                                accessibilityLabel={`Tag ${cat}`}
+                                onPress={() => toggleTag(cat)}
+                                style={[styles.chip, on ? styles.chipSelected : null]}
+                            >
+                                <Text style={[styles.chipText, on ? styles.chipTextSelected : null]}>
+                                    {cat}
+                                </Text>
+                            </Pressable>
+                        );
+                    })}
+                </View>
+            ) : null}
+
+            <TextInput
+                style={styles.reasonInput}
+                placeholder="Tell us what's on your mind"
+                placeholderTextColor="#9097A3"
+                value={text}
+                onChangeText={(value) => { onStart?.(); setText(value); }}
+                multiline
+            />
+
+            <View style={styles.actions}>
+                <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel="Dismiss"
+                    onPress={onDismiss}
+                    style={styles.dismissBtn}
+                >
+                    <Text style={styles.dismissText}>Not now</Text>
+                </Pressable>
+                <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel="Submit feedback"
+                    disabled={text.trim().length === 0}
+                    onPress={() =>
+                        text.trim().length > 0
+                            ? onSubmit({
+                                  reason: text.trim(),
+                                  tags: selectedTags.length > 0 ? selectedTags : undefined,
+                              })
+                            : undefined
+                    }
+                    style={[
+                        styles.submitBtn,
+                        text.trim().length === 0 ? styles.submitBtnDisabled : null,
+                    ]}
+                >
+                    <Text style={styles.submitText}>Send</Text>
+                </Pressable>
+            </View>
+        </View>
+    );
+}
+
+// ─── SURVEY render branch (multi-question: single/multi choice, scale, text) ──
+// Driven by `campaign.questions` (QuestionSpec[]). Collects one answer per
+// question and raises a single `answers[]` array the provider submits as one
+// response. Falls back to the single `question` as a lone text question.
+
+function scaleMaxFor(q: QuestionSpec): number {
+    return typeof q.scaleMax === 'number' && q.scaleMax > 0 ? q.scaleMax : 5;
+}
+
+function scaleMinFor(q: QuestionSpec): number {
+    return typeof q.scaleMin === 'number' && q.scaleMin >= 0 ? q.scaleMin : 1;
+}
+
+/** 5-point emoji reaction scale (😡🙁😐🙂😍 → value 1..5). Value persisted as a number. */
+const EMOJI_SCALE: { value: number; glyph: string; label: string }[] = [
+    { value: 1, glyph: '😡', label: 'Very bad' },
+    { value: 2, glyph: '🙁', label: 'Bad' },
+    { value: 3, glyph: '😐', label: 'Okay' },
+    { value: 4, glyph: '🙂', label: 'Good' },
+    { value: 5, glyph: '😍', label: 'Great' },
+];
+
+/** Yes/No boolean question options. Value persisted as the literal string. */
+const YES_NO = ['Yes', 'No'] as const;
+
+function SurveyPrompt({ campaign, onSubmit, onDismiss, onStart }: PromptBranchProps): ReactElement {
+    const questions: QuestionSpec[] =
+        campaign.questions && campaign.questions.length > 0
+            ? campaign.questions
+            : [{ key: 'q1', prompt: campaign.question, kind: 'text' }];
+
+    // One answer slot per question key. string | number | string[] per kind.
+    const [answers, setAnswers] = useState<Record<string, string | number | string[]>>({});
+    const [step, setStep] = useState(campaign.startScreen?.trim() ? -1 : 0);
+    // [P3-e] Captured native attachments, keyed by question. Optional — never blocks submit.
+    const [attachments, setAttachments] = useState<Record<string, EngageAttachmentDraft>>({});
+    const [capturing, setCapturing] = useState<string | null>(null);
+    // [Slice D] Voice recorder state: which question is mid-record + the live elapsed ms.
+    const [recordingKey, setRecordingKey] = useState<string | null>(null);
+    const [elapsedMs, setElapsedMs] = useState(0);
+    const voiceTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+    const recordStartRef = useRef<number>(0);
+
+    const clearVoiceTimer = (): void => {
+        if (voiceTimerRef.current) {
+            clearInterval(voiceTimerRef.current);
+            voiceTimerRef.current = null;
+        }
+    };
+    // Clean up a running recording if the prompt unmounts mid-record.
+    useEffect(() => () => clearVoiceTimer(), []);
+
+    const setAnswer = (key: string, value: string | number | string[]): void => {
+        onStart?.();
+        setAnswers((prev) => ({ ...prev, [key]: value }));
+    };
+
+    // ─── Voice note: record (≤30s auto-stop) → on-device transcript → edit → approve
+    const startVoice = async (key: string): Promise<void> => {
+        if (recordingKey) return;
+        clearAttachment(key);
+        recordStartRef.current = Date.now();
+        setElapsedMs(0);
+        setRecordingKey(key);
+        try {
+            await startVoiceAttachment();
+        } catch {
+            setRecordingKey(null);
+            return;
+        }
+        // Live timer; auto-stop enforces the 30s cap on the UI leg (1 of 3).
+        voiceTimerRef.current = setInterval(() => {
+            const ms = Date.now() - recordStartRef.current;
+            setElapsedMs(ms);
+            if (ms >= VOICE_MAX_DURATION_MS) {
+                void stopVoice(key);
+            }
+        }, 100);
+    };
+
+    const stopVoice = async (key: string): Promise<void> => {
+        clearVoiceTimer();
+        setRecordingKey(null);
+        const draft = await stopVoiceAttachment();
+        if (draft) setAttachments((prev) => ({ ...prev, [key]: draft }));
+    };
+
+    const cancelVoice = async (key: string): Promise<void> => {
+        clearVoiceTimer();
+        setRecordingKey(null);
+        setElapsedMs(0);
+        await cancelVoiceAttachment();
+        clearAttachment(key);
+    };
+
+    const editTranscript = (key: string, text: string): void => {
+        setAttachments((prev) => {
+            const d = prev[key];
+            if (!d) return prev;
+            return { ...prev, [key]: { ...d, transcript: text } };
+        });
+    };
+
+    const approveVoice = (key: string): void => {
+        setAttachments((prev) => {
+            const d = prev[key];
+            if (!d) return prev;
+            return { ...prev, [key]: { ...d, transcriptApproved: true } };
+        });
+    };
+
+    const captureScreenshot = async (key: string): Promise<void> => {
+        setCapturing(key);
+        try {
+            const draft = await captureScreenshotAttachment();
+            if (draft) setAttachments((prev) => ({ ...prev, [key]: draft }));
+        } finally {
+            setCapturing(null);
+        }
+    };
+
+    const clearAttachment = (key: string): void => {
+        setAttachments((prev) => {
+            const next = { ...prev };
+            delete next[key];
+            return next;
+        });
+    };
+
+    const toggleMulti = (key: string, choice: string): void => {
+        onStart?.();
+        setAnswers((prev) => {
+            const current = Array.isArray(prev[key]) ? (prev[key] as string[]) : [];
+            const next = current.includes(choice)
+                ? current.filter((c) => c !== choice)
+                : [...current, choice];
+            return { ...prev, [key]: next };
+        });
+    };
+
+    const isAnswered = (q: QuestionSpec): boolean => {
+        if (q.kind === 'screenshot') return attachments[q.key] !== undefined;
+        // [Slice D] Voice is optional, BUT: a mid-record clip blocks submit, and a
+        // recorded clip must be explicitly APPROVED before anything is sent (the user
+        // owns the final wording — nothing leaves until they approve).
+        if (q.kind === 'voice') {
+            if (recordingKey === q.key) return false;
+            const d = attachments[q.key];
+            if (!d) return false;
+            return d.transcriptApproved === true;
+        }
+        const v = answers[q.key];
+        if (q.kind === 'multi') return Array.isArray(v) && v.length > 0;
+        if (q.kind === 'text') return typeof v === 'string' && v.trim().length > 0;
+        return v !== undefined && v !== '';
+    };
+    // Only scalar/text questions become answers[]; media questions raise attachments.
+    const assemble = (): SurveyAnswer[] =>
+        questions
+            .filter((q) => q.kind !== 'screenshot' && q.kind !== 'voice')
+            .reduce<SurveyAnswer[]>((result, q) => {
+                const v = answers[q.key];
+                if (v === undefined || v === '' || (Array.isArray(v) && v.length === 0)) return result;
+                if (q.kind === 'multi') {
+                    result.push({ key: q.key, value: Array.isArray(v) ? v : [] });
+                    return result;
+                }
+                if (q.kind === 'scale' || q.kind === 'emoji') {
+                    result.push({ key: q.key, value: typeof v === 'number' ? v : 0 });
+                    return result;
+                }
+                result.push({ key: q.key, value: typeof v === 'string' ? v.trim() : String(v ?? '') });
+                return result;
+            }, []);
+
+    // A survey where every question is optional could be submitted with nothing
+    // answered and nothing attached — an empty response row polluting analytics
+    // (found live: voice question, Submit tapped without ever recording). Content
+    // is what gates the final Submit; "Not now" remains the way out.
+    const hasAnyContent = (): boolean => questions.some((q) => isAnswered(q));
+
+    const submit = (): void => {
+        if (!hasAnyContent()) return;
+        const drafts = Object.values(attachments);
+        onSubmit({
+            answers: assemble(),
+            ...(drafts.length > 0 ? { attachments: drafts } : {}),
+        });
+    };
+
+    const current = step >= 0 && step < questions.length ? questions[step] : null;
+    const advance = (): void => {
+        if (!current) return;
+        if (current.required === true && !isAnswered(current)) return;
+        if (current.skipTo === 'end') {
+            submit();
+            return;
+        }
+        if (current.skipTo) {
+            const target = questions.findIndex((question) => question.key === current.skipTo);
+            if (target >= 0) {
+                setStep(target);
+                return;
+            }
+        }
+        if (step >= questions.length - 1) submit();
+        else setStep(step + 1);
+    };
+
+    return (
+        <View style={styles.card}>
+            {step === -1 ? (
+                <View style={styles.questionBlock}>
+                    <Text style={styles.questionLabel}>{campaign.startScreen}</Text>
+                    <Text style={styles.scaleLabelText}>{questions.length} question{questions.length === 1 ? '' : 's'}</Text>
+                </View>
+            ) : null}
+            {current ? (() => {
+                const q = current;
+                const v = answers[q.key];
+                return (
+                    <View key={q.key} style={styles.questionBlock}>
+                        <Text style={styles.questionLabel}>{q.prompt}</Text>
+                        <Text style={styles.scaleLabelText}>Question {step + 1} of {questions.length}{q.required ? ' · required' : ' · optional'}</Text>
+
+                        {q.kind === 'scale' ? (
+                            <View style={styles.scaleRow}>
+                                {buildScalePoints(scaleMinFor(q), scaleMaxFor(q)).map((n) => {
+                                    const selected = v === n;
+                                    return (
+                                        <Pressable
+                                            key={n}
+                                            accessibilityRole="button"
+                                            accessibilityLabel={`${q.prompt} ${n}`}
+                                            onPress={() => setAnswer(q.key, n)}
+                                            style={[
+                                                styles.scaleCell,
+                                                selected ? styles.scaleCellSelected : null,
+                                            ]}
+                                        >
+                                            <Text
+                                                style={[
+                                                    styles.scaleText,
+                                                    selected ? styles.scaleTextSelected : null,
+                                                ]}
+                                            >
+                                                {n}
+                                            </Text>
+                                        </Pressable>
+                                    );
+                                })}
+                            </View>
+                        ) : null}
+
+                        {q.kind === 'text' ? (
+                            <TextInput
+                                style={styles.reasonInput}
+                                placeholder="Your answer"
+                                placeholderTextColor="#9097A3"
+                                value={typeof v === 'string' ? v : ''}
+                                onChangeText={(t) => setAnswer(q.key, t)}
+                                multiline
+                            />
+                        ) : null}
+
+                        {q.kind === 'single' || q.kind === 'choice' ? (
+                            <View style={styles.chipsRow}>
+                                {(q.choices ?? []).map((choice) => {
+                                    const on = v === choice;
+                                    return (
+                                        <Pressable
+                                            key={choice}
+                                            accessibilityRole="button"
+                                            accessibilityLabel={`${q.prompt} ${choice}`}
+                                            onPress={() => setAnswer(q.key, choice)}
+                                            style={[styles.chip, on ? styles.chipSelected : null]}
+                                        >
+                                            <Text
+                                                style={[
+                                                    styles.chipText,
+                                                    on ? styles.chipTextSelected : null,
+                                                ]}
+                                            >
+                                                {choice}
+                                            </Text>
+                                        </Pressable>
+                                    );
+                                })}
+                            </View>
+                        ) : null}
+
+                        {q.kind === 'multi' ? (
+                            <View style={styles.chipsRow}>
+                                {(q.choices ?? []).map((choice) => {
+                                    const on = Array.isArray(v) && v.includes(choice);
+                                    return (
+                                        <Pressable
+                                            key={choice}
+                                            accessibilityRole="button"
+                                            accessibilityLabel={`${q.prompt} ${choice}`}
+                                            onPress={() => toggleMulti(q.key, choice)}
+                                            style={[styles.chip, on ? styles.chipSelected : null]}
+                                        >
+                                            <Text
+                                                style={[
+                                                    styles.chipText,
+                                                    on ? styles.chipTextSelected : null,
+                                                ]}
+                                            >
+                                                {choice}
+                                            </Text>
+                                        </Pressable>
+                                    );
+                                })}
+                            </View>
+                        ) : null}
+
+                        {q.kind === 'emoji' ? (
+                            <View style={styles.emojiRow}>
+                                {EMOJI_SCALE.map((e) => {
+                                    const on = v === e.value;
+                                    return (
+                                        <Pressable
+                                            key={e.value}
+                                            accessibilityRole="button"
+                                            accessibilityLabel={`${q.prompt} ${e.label}`}
+                                            onPress={() => setAnswer(q.key, e.value)}
+                                            style={[styles.emojiCell, on ? styles.emojiCellSelected : null]}
+                                        >
+                                            <Text style={styles.emojiGlyph}>{e.glyph}</Text>
+                                        </Pressable>
+                                    );
+                                })}
+                            </View>
+                        ) : null}
+
+                        {q.kind === 'screenshot' ? (
+                            <View>
+                                <Pressable
+                                    accessibilityRole="button"
+                                    accessibilityLabel={attachments[q.key] ? 'Retake screenshot' : 'Add screenshot'}
+                                    disabled={capturing === q.key}
+                                    onPress={() => captureScreenshot(q.key)}
+                                    style={[styles.chip, attachments[q.key] ? styles.chipSelected : null]}
+                                >
+                                    <Text style={[styles.chipText, attachments[q.key] ? styles.chipTextSelected : null]}>
+                                        {capturing === q.key
+                                            ? 'Capturing…'
+                                            : attachments[q.key]
+                                              ? '✓ Screenshot attached — retake'
+                                              : '📷 Add screenshot'}
+                                    </Text>
+                                </Pressable>
+                                {attachments[q.key] ? (
+                                    <Pressable
+                                        accessibilityRole="button"
+                                        accessibilityLabel="Remove screenshot"
+                                        onPress={() => clearAttachment(q.key)}
+                                        style={styles.dismissBtn}
+                                    >
+                                        <Text style={styles.dismissText}>Remove</Text>
+                                    </Pressable>
+                                ) : null}
+                            </View>
+                        ) : null}
+
+                        {q.kind === 'voice' ? (
+                            <VoiceQuestion
+                                draft={attachments[q.key]}
+                                recording={recordingKey === q.key}
+                                elapsedMs={recordingKey === q.key ? elapsedMs : 0}
+                                onStart={() => void startVoice(q.key)}
+                                onStop={() => void stopVoice(q.key)}
+                                onCancel={() => void cancelVoice(q.key)}
+                                onEditTranscript={(t) => editTranscript(q.key, t)}
+                                onApprove={() => approveVoice(q.key)}
+                            />
+                        ) : null}
+
+                        {q.kind === 'boolean' ? (
+                            <View style={styles.chipsRow}>
+                                {YES_NO.map((opt) => {
+                                    const on = v === opt;
+                                    return (
+                                        <Pressable
+                                            key={opt}
+                                            accessibilityRole="button"
+                                            accessibilityLabel={`${q.prompt} ${opt}`}
+                                            onPress={() => setAnswer(q.key, opt)}
+                                            style={[styles.yesNoBtn, on ? styles.chipSelected : null]}
+                                        >
+                                            <Text
+                                                style={[
+                                                    styles.chipText,
+                                                    on ? styles.chipTextSelected : null,
+                                                ]}
+                                            >
+                                                {opt}
+                                            </Text>
+                                        </Pressable>
+                                    );
+                                })}
+                            </View>
+                        ) : null}
+                    </View>
+                );
+            })() : null}
+
+            <View style={styles.actions}>
+                <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel="Dismiss"
+                    onPress={onDismiss}
+                    style={styles.dismissBtn}
+                >
+                    <Text style={styles.dismissText}>Not now</Text>
+                </Pressable>
+                {step === -1 ? (
+                    <Pressable accessibilityRole="button" accessibilityLabel="Start survey" onPress={() => { onStart?.(); setStep(0); }} style={styles.submitBtn}>
+                        <Text style={styles.submitText}>Start</Text>
+                    </Pressable>
+                ) : current ? (() => {
+                    const isSubmitStep = step === questions.length - 1 || current.skipTo === 'end';
+                    // A required question blocks its own step; the submit step
+                    // additionally requires the survey to carry ANY content at all.
+                    const blocked =
+                        (current.required === true && !isAnswered(current)) ||
+                        (isSubmitStep && !hasAnyContent());
+                    return (
+                        <Pressable
+                            accessibilityRole="button"
+                            accessibilityLabel={isSubmitStep ? 'Submit survey' : 'Continue survey'}
+                            disabled={blocked}
+                            onPress={advance}
+                            style={[styles.submitBtn, blocked ? styles.submitBtnDisabled : null]}
+                        >
+                            <Text style={styles.submitText}>{isSubmitStep ? 'Submit' : 'Continue'}</Text>
+                        </Pressable>
+                    );
+                })() : null}
+            </View>
+        </View>
+    );
+}
+
+function buildScalePoints(min: number, max: number): number[] {
+    const points: number[] = [];
+    for (let i = min; i <= max; i += 1) points.push(i);
+    return points;
+}
+
+function formatElapsed(ms: number): string {
+    const totalSec = Math.floor(ms / 1000);
+    const s = totalSec % 60;
+    return `0:${s < 10 ? '0' : ''}${s}`;
+}
+
+// ─── Voice note sub-view (record ≤30s → on-device transcript → edit → approve) ─
+// Reusable inside SurveyPrompt for any `voice` question. Owns no transport: it
+// raises record/stop/approve callbacks; the parent holds the draft + transcript.
+
+interface VoiceQuestionProps {
+    draft?: EngageAttachmentDraft;
+    recording: boolean;
+    elapsedMs: number;
+    onStart: () => void;
+    onStop: () => void;
+    onCancel: () => void;
+    onEditTranscript: (text: string) => void;
+    onApprove: () => void;
+}
+
+function VoiceQuestion({
+    draft,
+    recording,
+    elapsedMs,
+    onStart,
+    onStop,
+    onCancel,
+    onEditTranscript,
+    onApprove,
+}: VoiceQuestionProps): ReactElement {
+    const capSec = Math.floor(VOICE_MAX_DURATION_MS / 1000);
+
+    if (recording) {
+        return (
+            <View>
+                <View style={styles.voiceRecordingRow}>
+                    <View style={styles.voiceDot} />
+                    <Text style={styles.voiceTimer}>
+                        {formatElapsed(elapsedMs)} / 0:{capSec}
+                    </Text>
+                </View>
+                <View style={styles.chipsRow}>
+                    <Pressable
+                        accessibilityRole="button"
+                        accessibilityLabel="Stop recording"
+                        onPress={onStop}
+                        style={styles.voiceStopBtn}
+                    >
+                        <Text style={styles.chipTextSelected}>■ Stop</Text>
+                    </Pressable>
+                    <Pressable
+                        accessibilityRole="button"
+                        accessibilityLabel="Cancel recording"
+                        onPress={onCancel}
+                        style={styles.dismissBtn}
+                    >
+                        <Text style={styles.dismissText}>Cancel</Text>
+                    </Pressable>
+                </View>
+            </View>
+        );
+    }
+
+    if (!draft) {
+        return (
+            <Pressable
+                accessibilityRole="button"
+                accessibilityLabel="Record voice note"
+                onPress={onStart}
+                style={styles.chip}
+            >
+                <Text style={styles.chipText}>🎙 Record voice note (max {capSec}s)</Text>
+            </Pressable>
+        );
+    }
+
+    // Recorded: show editable transcript prefill + explicit approve gate.
+    return (
+        <View>
+            <Text style={styles.voiceMeta}>
+                🎙 Voice note recorded · {formatElapsed(draft.durationMs ?? 0)}
+            </Text>
+            <Text style={styles.voiceHint}>
+                {(draft.transcript ?? '').trim().length > 0
+                    ? 'Review the transcript below — edit it, then approve to send. Nothing is sent until you approve.'
+                    : // An empty prefill is a device limitation (on many phones the recorder
+                      // holds the microphone, so the on-device engine hears silence) — the
+                      // recording itself was captured fine. Say so, or the blank field reads
+                      // as a bug and the typed-transcript path goes undiscovered.
+                      'Your recording was captured, but automatic transcription wasn’t available on this device. Type what you said (optional), then approve to send.'}
+            </Text>
+            <TextInput
+                style={styles.reasonInput}
+                placeholder={(draft.transcript ?? '').trim().length > 0
+                    ? 'Transcript (edit before approving)'
+                    : 'Type what you said (optional)'}
+                placeholderTextColor="#9097A3"
+                value={draft.transcript ?? ''}
+                onChangeText={onEditTranscript}
+                editable={!draft.transcriptApproved}
+                multiline
+            />
+            <View style={styles.chipsRow}>
+                {draft.transcriptApproved ? (
+                    <View style={styles.voiceApprovedBadge}>
+                        <Text style={styles.chipTextSelected}>✓ Approved</Text>
+                    </View>
+                ) : (
+                    <Pressable
+                        accessibilityRole="button"
+                        accessibilityLabel="Approve transcript"
+                        onPress={onApprove}
+                        style={styles.voiceApproveBtn}
+                    >
+                        <Text style={styles.chipTextSelected}>✓ Approve &amp; keep</Text>
+                    </Pressable>
+                )}
+                <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel="Re-record voice note"
+                    onPress={onStart}
+                    style={styles.dismissBtn}
+                >
+                    <Text style={styles.dismissText}>Re-record</Text>
+                </Pressable>
+            </View>
+        </View>
+    );
+}
+
+// ─── Reusable submit state overlay (submitting → success → error) ──────────────
+// The SINGLE submit UI for EVERY question type. Covers the card while non-idle so
+// inputs/submit are blocked in-flight (no double-submit). Renders real stages and a
+// retryable error. NOT bespoke to voice — the shell mounts it over any prompt branch.
+
+interface SubmitStatusOverlayProps {
+    status: EngageSubmitStatus;
+    onRetry: () => void;
+    onClose: () => void;
+    successMessage?: string;
+}
+
+function stageLabel(stage: SubmitStage): string {
+    return stage === 'uploading' ? 'Uploading attachment…' : 'Saving your feedback…';
+}
+
+function SubmitStatusOverlay({
+    status,
+    onRetry,
+    onClose,
+    successMessage,
+}: SubmitStatusOverlayProps): ReactElement | null {
+    if (status.phase === 'idle') return null;
+
+    return (
+        <View style={styles.submitOverlay}>
+            {status.phase === 'submitting' ? (
+                <View style={styles.submitCenter}>
+                    <ActivityIndicator size="large" color="#2F6BFF" />
+                    <Text style={styles.submitStageText}>{stageLabel(status.stage)}</Text>
+                </View>
+            ) : null}
+
+            {status.phase === 'success' ? (
+                <View style={styles.submitCenter}>
+                    <Text style={styles.submitSuccessMark}>✓</Text>
+                    <Text style={styles.submitStageText}>{successMessage?.trim() || 'Sent — thank you!'}</Text>
+                </View>
+            ) : null}
+
+            {status.phase === 'error' ? (
+                <View style={styles.submitCenter}>
+                    <Text style={styles.submitErrorMark}>!</Text>
+                    <Text style={styles.submitStageText}>Couldn't send. Please retry.</Text>
+                    <View style={styles.actions}>
+                        <Pressable
+                            accessibilityRole="button"
+                            accessibilityLabel="Close"
+                            onPress={onClose}
+                            style={styles.dismissBtn}
+                        >
+                            <Text style={styles.dismissText}>Close</Text>
+                        </Pressable>
+                        <Pressable
+                            accessibilityRole="button"
+                            accessibilityLabel="Retry submit"
+                            onPress={onRetry}
+                            style={styles.submitBtn}
+                        >
+                            <Text style={styles.submitText}>Retry</Text>
+                        </Pressable>
+                    </View>
+                </View>
+            ) : null}
+        </View>
+    );
+}
+
+// ─── Open/Closed registry: config.type → render branch ───────────────────────
+// NPS first; RATING_PROMPT/FEEDBACK/SURVEY plug in as ADDITIONAL entries. The
+// overlay shell, modal, throttle, and transport wiring stay untouched. SURVEY is
+// keyed on the contract's CSAT/CUSTOM campaign subtypes (multi-question surveys).
+export const PROMPT_RENDERERS: Partial<Record<EngageCampaignType, PromptRenderer>> = {
+    NPS: NpsPrompt,
+    RATING_PROMPT: RatingPrompt,
+    RATINGS_PROMPT: RatingPrompt,
+    FEEDBACK: FeedbackPrompt,
+    CSAT: SurveyPrompt,
+    CUSTOM: SurveyPrompt,
+};
+
+/** Resolve the render branch for a campaign, or null if its type isn't supported yet. */
+export function resolvePromptRenderer(type: EngageCampaignType): PromptRenderer | null {
+    return PROMPT_RENDERERS[type] ?? null;
+}
+
+// ─── Overlay shell ───────────────────────────────────────────────────────────
+
+export interface EngagePromptViewProps {
+    campaign: EngageCampaignConfig | null;
+    visible: boolean;
+    onSubmit: (result: EngagePromptResult) => void;
+    onDismiss: () => void;
+    onStart?: () => void;
+    /** RATING_PROMPT routing config forwarded to the star branch (host-supplied). */
+    rating?: RatingPromptConfig;
+    /** [Slice D5] Reusable submit state — drives the in-prompt submitting/success/error overlay. */
+    submitStatus?: EngageSubmitStatus;
+    /** Retry the last submit (same idempotent responseId). */
+    onRetrySubmit?: () => void;
+    /** Close the prompt after a terminal submit state (success/error). */
+    onCloseSubmit?: () => void;
+}
+
+/**
+ * Modal overlay shell. Branches on `campaign.type` via the registry — renders the
+ * matching prompt or nothing. This is the single mount point a host app shows.
+ */
+export function EngagePromptView({
+    campaign,
+    visible,
+    onSubmit,
+    onDismiss,
+    onStart,
+    rating,
+    submitStatus,
+    onRetrySubmit,
+    onCloseSubmit,
+}: EngagePromptViewProps): ReactElement | null {
+    if (!campaign || !visible) return null;
+
+    const Branch = resolvePromptRenderer(campaign.type);
+    if (!Branch) return null;
+
+    const status: EngageSubmitStatus = submitStatus ?? { phase: 'idle' };
+
+    return (
+        <Modal
+            visible={visible}
+            transparent
+            animationType="fade"
+            onRequestClose={onDismiss}
+        >
+            <View style={styles.backdrop}>
+                {/* The branch + the reusable submit overlay share one positioned wrapper
+                    so the overlay covers the branch (blocking input) while submitting. */}
+                <View style={styles.promptWrapper}>
+                    <Branch
+                        campaign={campaign}
+                        onSubmit={onSubmit}
+                        onDismiss={onDismiss}
+                        onStart={onStart}
+                        rating={rating}
+                    />
+                    <SubmitStatusOverlay
+                        status={status}
+                        onRetry={() => onRetrySubmit?.()}
+                        onClose={() => onCloseSubmit?.()}
+                        successMessage={campaign.thankYouScreen}
+                    />
+                </View>
+            </View>
+        </Modal>
+    );
+}
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+// Plain objects (not StyleSheet.create) to match the bridgeless-safe pattern in
+// ScaleBunDebugRoot — avoids touching DeviceInfo TurboModule at module-load time.
+
+const styles: {
+    backdrop: ViewStyle;
+    card: ViewStyle;
+    question: TextStyle;
+    scaleRow: ViewStyle;
+    scaleCell: ViewStyle;
+    scaleCellSelected: ViewStyle;
+    scaleText: TextStyle;
+    scaleTextSelected: TextStyle;
+    scaleLabels: ViewStyle;
+    scaleLabelText: TextStyle;
+    reasonInput: TextStyle;
+    actions: ViewStyle;
+    dismissBtn: ViewStyle;
+    dismissText: TextStyle;
+    submitBtn: ViewStyle;
+    submitBtnDisabled: ViewStyle;
+    submitText: TextStyle;
+    starsRow: ViewStyle;
+    starCell: ViewStyle;
+    star: TextStyle;
+    starFilled: TextStyle;
+    chipsRow: ViewStyle;
+    chip: ViewStyle;
+    chipSelected: ViewStyle;
+    chipText: TextStyle;
+    chipTextSelected: TextStyle;
+    questionBlock: ViewStyle;
+    questionLabel: TextStyle;
+    emojiRow: ViewStyle;
+    emojiCell: ViewStyle;
+    emojiCellSelected: ViewStyle;
+    emojiGlyph: TextStyle;
+    yesNoBtn: ViewStyle;
+    promptWrapper: ViewStyle;
+    voiceRecordingRow: ViewStyle;
+    voiceDot: ViewStyle;
+    voiceTimer: TextStyle;
+    voiceStopBtn: ViewStyle;
+    voiceMeta: TextStyle;
+    voiceHint: TextStyle;
+    voiceApproveBtn: ViewStyle;
+    voiceApprovedBadge: ViewStyle;
+    submitOverlay: ViewStyle;
+    submitCenter: ViewStyle;
+    submitStageText: TextStyle;
+    submitSuccessMark: TextStyle;
+    submitErrorMark: TextStyle;
+} = {
+    backdrop: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.45)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+    },
+    card: {
+        width: '100%',
+        maxWidth: 420,
+        backgroundColor: '#FFFFFF',
+        borderRadius: 16,
+        padding: 20,
+    },
+    question: {
+        fontSize: 17,
+        fontWeight: '600',
+        color: '#11151C',
+        marginBottom: 16,
+    },
+    scaleRow: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+    },
+    scaleCell: {
+        width: 30,
+        height: 36,
+        marginBottom: 8,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: '#D7DBE2',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    scaleCellSelected: {
+        backgroundColor: '#2F6BFF',
+        borderColor: '#2F6BFF',
+    },
+    scaleText: {
+        fontSize: 14,
+        color: '#3A4250',
+    },
+    scaleTextSelected: {
+        color: '#FFFFFF',
+        fontWeight: '700',
+    },
+    scaleLabels: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginTop: 2,
+        marginBottom: 14,
+    },
+    scaleLabelText: {
+        fontSize: 11,
+        color: '#9097A3',
+    },
+    reasonInput: {
+        minHeight: 64,
+        borderWidth: 1,
+        borderColor: '#D7DBE2',
+        borderRadius: 10,
+        padding: 12,
+        fontSize: 14,
+        color: '#11151C',
+        textAlignVertical: 'top',
+        marginBottom: 16,
+    },
+    actions: {
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+    },
+    dismissBtn: {
+        paddingVertical: 10,
+        paddingHorizontal: 16,
+        marginRight: 8,
+    },
+    dismissText: {
+        fontSize: 15,
+        color: '#6B7280',
+        fontWeight: '500',
+    },
+    submitBtn: {
+        paddingVertical: 10,
+        paddingHorizontal: 20,
+        borderRadius: 10,
+        backgroundColor: '#2F6BFF',
+    },
+    submitBtnDisabled: {
+        backgroundColor: '#A9C0FF',
+    },
+    submitText: {
+        fontSize: 15,
+        color: '#FFFFFF',
+        fontWeight: '600',
+    },
+    starsRow: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        marginBottom: 18,
+    },
+    starCell: {
+        paddingHorizontal: 6,
+        paddingVertical: 4,
+    },
+    star: {
+        fontSize: 36,
+        color: '#D7DBE2',
+    },
+    starFilled: {
+        color: '#F5A623',
+    },
+    chipsRow: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        marginBottom: 12,
+    },
+    chip: {
+        paddingVertical: 6,
+        paddingHorizontal: 12,
+        borderRadius: 16,
+        borderWidth: 1,
+        borderColor: '#D7DBE2',
+        marginRight: 8,
+        marginBottom: 8,
+    },
+    chipSelected: {
+        backgroundColor: '#2F6BFF',
+        borderColor: '#2F6BFF',
+    },
+    chipText: {
+        fontSize: 13,
+        color: '#3A4250',
+    },
+    chipTextSelected: {
+        color: '#FFFFFF',
+        fontWeight: '600',
+    },
+    questionBlock: {
+        marginBottom: 16,
+    },
+    questionLabel: {
+        fontSize: 15,
+        fontWeight: '600',
+        color: '#11151C',
+        marginBottom: 10,
+    },
+    emojiRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginBottom: 12,
+    },
+    emojiCell: {
+        width: 52,
+        height: 52,
+        borderRadius: 26,
+        borderWidth: 1,
+        borderColor: '#D7DBE2',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    emojiCellSelected: {
+        backgroundColor: '#EAF1FF',
+        borderColor: '#2F6BFF',
+    },
+    emojiGlyph: {
+        fontSize: 26,
+    },
+    yesNoBtn: {
+        paddingVertical: 10,
+        paddingHorizontal: 28,
+        borderRadius: 16,
+        borderWidth: 1,
+        borderColor: '#D7DBE2',
+        marginRight: 10,
+        marginBottom: 8,
+    },
+    promptWrapper: {
+        width: '100%',
+        maxWidth: 420,
+        position: 'relative',
+    },
+    voiceRecordingRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 10,
+    },
+    voiceDot: {
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+        backgroundColor: '#E5484D',
+        marginRight: 8,
+    },
+    voiceTimer: {
+        fontSize: 15,
+        fontWeight: '600',
+        color: '#11151C',
+    },
+    voiceStopBtn: {
+        paddingVertical: 6,
+        paddingHorizontal: 16,
+        borderRadius: 16,
+        backgroundColor: '#E5484D',
+        marginRight: 8,
+        marginBottom: 8,
+    },
+    voiceMeta: {
+        fontSize: 13,
+        fontWeight: '600',
+        color: '#11151C',
+        marginBottom: 6,
+    },
+    voiceHint: {
+        fontSize: 12,
+        color: '#6B7280',
+        marginBottom: 8,
+    },
+    voiceApproveBtn: {
+        paddingVertical: 6,
+        paddingHorizontal: 16,
+        borderRadius: 16,
+        backgroundColor: '#1F9D55',
+        marginRight: 8,
+        marginBottom: 8,
+    },
+    voiceApprovedBadge: {
+        paddingVertical: 6,
+        paddingHorizontal: 16,
+        borderRadius: 16,
+        backgroundColor: '#1F9D55',
+        marginRight: 8,
+        marginBottom: 8,
+        opacity: 0.7,
+    },
+    submitOverlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(255,255,255,0.94)',
+        borderRadius: 16,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+    },
+    submitCenter: {
+        alignItems: 'center',
+    },
+    submitStageText: {
+        fontSize: 15,
+        fontWeight: '600',
+        color: '#11151C',
+        marginTop: 12,
+        textAlign: 'center',
+    },
+    submitSuccessMark: {
+        fontSize: 44,
+        color: '#1F9D55',
+        fontWeight: '700',
+    },
+    submitErrorMark: {
+        fontSize: 44,
+        color: '#E5484D',
+        fontWeight: '700',
+    },
+};