@cxpinsight/react-native 0.2.0

package/lib/survey/SurveyModal.js

@@ -0,0 +1,1650 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SurveyModal = SurveyModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const types_1 = require("../types");
+const storage = __importStar(require("../core/storage"));
+const NPSQuestion_1 = require("./questions/NPSQuestion");
+const CSATQuestion_1 = require("./questions/CSATQuestion");
+const TextQuestion_1 = require("./questions/TextQuestion");
+const MultipleChoiceQuestion_1 = require("./questions/MultipleChoiceQuestion");
+const RankingQuestion_1 = require("./questions/RankingQuestion");
+const MatrixQuestion_1 = require("./questions/MatrixQuestion");
+const ImageQuestion_1 = require("./questions/ImageQuestion");
+const ImagePickerQuestion_1 = require("./questions/ImagePickerQuestion");
+const MatrixDropdownQuestion_1 = require("./questions/MatrixDropdownQuestion");
+const MatrixDynamicQuestion_1 = require("./questions/MatrixDynamicQuestion");
+const PanelDynamicQuestion_1 = require("./questions/PanelDynamicQuestion");
+const DateQuestion_1 = require("./questions/DateQuestion");
+const MultiTextQuestion_1 = require("./questions/MultiTextQuestion");
+const expressionEval_1 = require("./expressionEval");
+const interpolate_1 = require("./interpolate");
+const handsFreeVoice_1 = require("./handsFreeVoice");
+const voiceParsers_1 = require("./voiceParsers");
+const variablesResolver_1 = require("./variablesResolver");
+const deviceInfo_1 = require("../core/deviceInfo");
+const translationLookup_1 = require("./translationLookup");
+const validate_1 = require("./validate");
+const pagesFromV1_1 = require("./pagesFromV1");
+const themePalette_1 = require("./themePalette");
+const styleContract_1 = require("./styleContract");
+const CXPinsight_1 = require("../CXPinsight");
+// ISO 639-1 codes for right-to-left scripts. When the respondent picks
+// one of these in the language switcher, the modal flips to RTL even if
+// the survey has no top-level `direction` set.
+const RTL_LANGUAGES = new Set(['ar', 'he', 'fa', 'ur', 'ps', 'sd', 'ug', 'yi', 'dv']);
+// Author-provided rich text (thank-you message especially) can arrive as
+// HTML from the web builder. React Native <Text> renders tags literally,
+// so collapse block boundaries to newlines, drop remaining tags, and decode
+// the handful of entities that show up in practice.
+// Pull the first <img> src out of an HTML string (supports data: URIs, which
+// React Native's <Image> renders natively). Returns undefined if none.
+function firstImageSrc(html) {
+    const m = /<img\b[^>]*?\bsrc\s*=\s*["']([^"']+)["']/i.exec(String(html));
+    return m ? m[1] : undefined;
+}
+function stripHtml(input) {
+    return String(input)
+        .replace(/<\s*(br|\/p|\/div|\/h[1-6]|\/li)\s*\/?>/gi, '\n')
+        .replace(/<[^>]+>/g, '')
+        .replace(/&nbsp;/gi, ' ')
+        .replace(/&amp;/gi, '&')
+        .replace(/&lt;/gi, '<')
+        .replace(/&gt;/gi, '>')
+        .replace(/&quot;/gi, '"')
+        .replace(/&#39;/gi, "'")
+        .replace(/\n{3,}/g, '\n\n')
+        .trim();
+}
+function SurveyModal({ survey, visible, onSubmit, onDismiss }) {
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
+    const [responses, setResponses] = (0, react_1.useState)({});
+    const [showThankYou, setShowThankYou] = (0, react_1.useState)(false);
+    // Back-navigation history. Non-linear jumps via branches mean the
+    // previous page is NOT always currentPage - 1; the stack records
+    // the pages the respondent actually walked through. Matches the
+    // web renderer's history stack (see SurveyRenderer.tsx).
+    // v1.1 multi-flow (spec §28): also records the flow the respondent
+    // was on at that point — Back after a fork restores BOTH pieces of
+    // state.
+    const [history, setHistory] = (0, react_1.useState)([]);
+    // Multi-flow state (spec §28). currentFlow tracks which flow the
+    // respondent is walking through right now. undefined = root flow.
+    // When a fork branch fires we push the origin onto forkStack and
+    // switch currentFlow to the branch's target flowId.
+    const [currentFlow, setCurrentFlow] = (0, react_1.useState)(undefined);
+    const [forkStack, setForkStack] = (0, react_1.useState)([]);
+    // Per-question validation errors surfaced on Next / Submit.
+    // Populated when a required question has no answer; cleared when
+    // the respondent supplies one. Keyed by question id/name so a
+    // page with multiple required questions can flag several at once.
+    // Web renderer keeps a `touched` set to live-re-validate after the
+    // first flag; mobile MVP just clears on updateResponse for now.
+    const [errors, setErrors] = (0, react_1.useState)({});
+    // Set when the server rejects a submit (returns false). Shown near the
+    // footer; cleared on retry / navigation / dismiss.
+    const [submitError, setSubmitError] = (0, react_1.useState)('');
+    // Hands-free voice state. voiceIdxRef walks the current page's questions;
+    // voiceDoneRef flips once the last page has been submitted by voice.
+    const voiceIdxRef = react_1.default.useRef(0);
+    const voiceDoneRef = react_1.default.useRef(false);
+    const [voiceActive, setVoiceActive] = (0, react_1.useState)(false);
+    const [voicePhase, setVoicePhase] = (0, react_1.useState)('idle');
+    const [voiceTranscript, setVoiceTranscript] = (0, react_1.useState)('');
+    // Selected language for the current session. Initialized to
+    // survey.defaultLanguage; the useEffect below hydrates from
+    // AsyncStorage on mount so a repeat respondent keeps their
+    // previous pick. Only restored if that language is still in the
+    // current survey's languages[] — an older stored value that's no
+    // longer offered silently falls back to defaultLanguage.
+    const [currentLanguage, setCurrentLanguageRaw] = (0, react_1.useState)(survey.defaultLanguage);
+    const setCurrentLanguage = (0, react_1.useCallback)((next) => {
+        setCurrentLanguageRaw(next);
+        // Fire-and-forget — persistence is a "nice to have", never
+        // block the switcher UX on a slow storage write.
+        storage.set(types_1.STORAGE_KEYS.SURVEY_LANGUAGE, next).catch(() => { });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        // Device locale → the survey's matching offered language, when the respondent
+        // has no saved pick — so an Arabic device opens the survey in Arabic instead of
+        // defaultLanguage. A saved manual switch still wins over the device locale.
+        let deviceLang;
+        try {
+            const raw = (0, deviceInfo_1.getDeviceInfo)();
+            const primary = (typeof raw.language === 'string' ? raw.language : '').split(/[-_]/)[0].toLowerCase();
+            deviceLang = primary
+                ? survey.languages?.find((l) => l.split(/[-_]/)[0].toLowerCase() === primary)
+                : undefined;
+        }
+        catch { /* no locale available → stays defaultLanguage */ }
+        storage.get(types_1.STORAGE_KEYS.SURVEY_LANGUAGE).then((saved) => {
+            if (cancelled)
+                return;
+            if (saved && (!survey.languages || survey.languages.includes(saved))) {
+                setCurrentLanguageRaw(saved);
+                return;
+            }
+            if (deviceLang)
+                setCurrentLanguageRaw(deviceLang); // else stays defaultLanguage (initial state)
+        }).catch(() => { if (!cancelled && deviceLang)
+            setCurrentLanguageRaw(deviceLang); });
+        return () => { cancelled = true; };
+        // survey.id is stable per survey mount; re-hydrate if a new survey
+        // presents (which is a fresh modal instance anyway, but belt-and-braces).
+    }, [survey.id, survey.languages]);
+    // Multi-flow paging (spec §28). When rawQuestions/rawSections are
+    // available (Provider populates them alongside the derived `pages`
+    // field), re-paginate per-flow whenever currentFlow changes.
+    // Otherwise fall back to the caller-supplied `pages` — kept as a
+    // backwards-compat path for embeds that construct SurveyDefinition
+    // manually.
+    const presentationMode = typeof survey.settings?.presentationMode === 'string'
+        ? survey.settings.presentationMode
+        : undefined;
+    const pages = (0, react_1.useMemo)(() => {
+        if (survey.rawQuestions) {
+            return (0, pagesFromV1_1.pagesFromV1)({ questions: survey.rawQuestions, sections: survey.rawSections }, currentFlow, presentationMode);
+        }
+        return survey.pages ?? [];
+    }, [survey.rawQuestions, survey.rawSections, survey.pages, currentFlow, presentationMode]);
+    const totalPages = pages.length;
+    const isLastPage = currentPage >= totalPages - 1;
+    // Variables resolver (spec §22.2). Merges SDK identify() data with
+    // survey-defined variable[].defaultValue + calculated expressions;
+    // recomputes on every render because calculated variables can
+    // reference answers. sdkIdentifyData is the mobile analogue of
+    // web's url params — the only user-supplied source path on mobile.
+    // P4 — Attribute Context: the SDK's captured signals auto-seed as default
+    // variables ({{user.plan}}, {{device.os}}, {{device.language}}). Stable per
+    // modal instance; geo.* is server-side and not available on-device here.
+    //
+    // Signals augmented beyond the wire deviceInfo:
+    //   • theme       — OS light/dark from Appearance.getColorScheme() (parity
+    //                   with the web widget's `prefers-color-scheme`)
+    //   • language    — primary tag (e.g. 'en' from 'en-US') so authors
+    //                   don't have to match against the full BCP-47 string
+    //   • languageTag — the full tag, kept for cases that need the region
+    //   • screenClass — 'mobile' | 'tablet' | 'desktop' (from expo-device
+    //                   deviceType), for authors keying on layout tier
+    // A change listener re-mounts the attribute context on OS theme toggles
+    // so mid-session `{{device.theme}}` conditions stay accurate.
+    const [colorScheme, setColorScheme] = (0, react_1.useState)(() => react_native_1.Appearance.getColorScheme() ?? undefined);
+    (0, react_1.useEffect)(() => {
+        const sub = react_native_1.Appearance.addChangeListener((prefs) => {
+            setColorScheme(prefs.colorScheme ?? undefined);
+        });
+        return () => { sub?.remove?.(); };
+    }, []);
+    const attributeContext = (0, react_1.useMemo)(() => {
+        const identity = (CXPinsight_1.CXPinsight._getUserIdentity() ?? {});
+        const { id: _omitId, ...userTraits } = identity;
+        const raw = (0, deviceInfo_1.getDeviceInfo)();
+        const langTag = typeof raw.language === 'string' ? raw.language : 'en';
+        const langPrimary = langTag.split(/[-_]/)[0].toLowerCase();
+        const screenClass = raw.deviceType || 'mobile';
+        const deviceSignals = {
+            ...raw,
+            language: langPrimary, // override wire language with primary tag
+            languageTag: langTag, // full BCP-47 tag under a distinct key
+            theme: colorScheme || 'light', // OS light/dark
+            screenClass, // 'mobile' | 'tablet' | 'desktop'
+        };
+        return (0, variablesResolver_1.buildAttributeContext)({
+            device: deviceSignals,
+            user: userTraits,
+        });
+    }, [colorScheme]);
+    const evalCtx = {
+        answers: responses,
+        variables: (0, variablesResolver_1.resolveVariables)(survey.variables, { sdkIdentifyData: CXPinsight_1.CXPinsight._getUserIdentity() }, responses, attributeContext),
+    };
+    // showWhen / hideWhen filter (spec §7). Web renderer semantics:
+    // showWhen truthy AND hideWhen falsy → visible. A missing condition
+    // defaults to "visible". Fail-open on parse errors — see
+    // expressionEval.ts.
+    const isVisible = (q) => {
+        if (q.showWhen && !(0, expressionEval_1.evaluateCondition)(q.showWhen, evalCtx))
+            return false;
+        if (q.hideWhen && (0, expressionEval_1.evaluateCondition)(q.hideWhen, evalCtx))
+            return false;
+        return true;
+    };
+    const currentQuestions = (pages[currentPage]?.elements ?? []).filter(isVisible);
+    const updateResponse = (0, react_1.useCallback)((name, value) => {
+        setResponses((prev) => ({ ...prev, [name]: value }));
+        // Live-clear the error entry the moment the new answer passes
+        // validation. Re-runs the same validator handleNext would fire,
+        // scoped to just this question — an email field flagged with
+        // "invalid format" clears when the respondent finishes typing
+        // a valid address, not on the next Next click. Requires looking
+        // up the question, which we do by scanning the flat question
+        // list (survey pages already computed above).
+        setErrors((prev) => {
+            if (!prev[name])
+                return prev;
+            const q = pages.flatMap((p) => p.elements).find((el) => (el.id || el.name) === name);
+            if (!q)
+                return prev;
+            const err = (0, validate_1.validateAnswer)(q, value);
+            if (err)
+                return prev; // still invalid → keep the error
+            const { [name]: _dropped, ...rest } = prev;
+            return rest;
+        });
+    }, [pages]);
+    const resolveNextTarget = () => {
+        for (const q of currentQuestions) {
+            if (!Array.isArray(q.branches) || q.branches.length === 0)
+                continue;
+            for (const b of q.branches) {
+                if (b.when && !(0, expressionEval_1.evaluateCondition)(b.when, evalCtx))
+                    continue;
+                if (b?.target === 'flow') {
+                    if (!b.flowId)
+                        continue;
+                    return { kind: 'fork', flowId: b.flowId, rejoinAt: b.rejoinAt };
+                }
+                if (!b.goto)
+                    continue;
+                if (b.goto === '__end__')
+                    return { kind: 'end' };
+                // Find the page containing the goto question in the CURRENT
+                // flow's page list. Uses raw page contents (not the visible-
+                // filtered ones) so a jump works even when the target
+                // question happens to be hidden on the source page's
+                // visibility state — the target page re-runs visibility on
+                // render.
+                for (let i = 0; i < pages.length; i++) {
+                    // A goto whose target sits on the CURRENT page isn't a real
+                    // navigation — it can't "jump" to a question already on screen.
+                    // This matters because mobile paginates by section: a VOC
+                    // template's intra-section branch (e.g. rating → its own
+                    // follow-up comment) points at a question on the same page, so
+                    // returning {page: currentPage} would trap the respondent here
+                    // forever ("Next does nothing"). Skip it and fall through to
+                    // linear next. (Web paginates by pageBreak, so its goto targets
+                    // land on other pages and this case never arises there.)
+                    if (i === currentPage)
+                        continue;
+                    if (pages[i].elements.some((el) => (el.id || el.name) === b.goto)) {
+                        return { kind: 'page', index: i };
+                    }
+                }
+            }
+        }
+        return null;
+    };
+    // Given a question id, find its page index in a set of pages.
+    // Returns -1 if not present. Used by rejoinAt to land the
+    // respondent back on the page containing the origin question.
+    const findPageForQuestion = (searchPages, qId) => {
+        for (let i = 0; i < searchPages.length; i++) {
+            if (searchPages[i].elements.some((el) => (el.id || el.name) === qId))
+                return i;
+        }
+        return -1;
+    };
+    // Build the submit payload — only keep answers for questions that
+    // are visible under the current evalCtx. A question that the user
+    // answered before a later answer hid it via showWhen/hideWhen
+    // shouldn't ship its stale value to the server (spec §7.6).
+    // Walks every page's raw elements (not currentQuestions — that's
+    // already been visible-filtered to the current page) so this
+    // sweep catches hidden answers from earlier pages too.
+    const buildSubmitPayload = () => {
+        const out = {};
+        for (const p of pages) {
+            for (const q of p.elements) {
+                if (!isVisible(q))
+                    continue;
+                const k = q.id || q.name;
+                if (k in responses)
+                    out[k] = responses[k];
+            }
+        }
+        return out;
+    };
+    // Per-page validation. Runs the full spec §8 validator against
+    // every visible question — required check + type-specific format
+    // (email/url/number/tel regex, maxLength/minLength, min/maxCount,
+    // min/maxValue) + author-declared rules[] array. Returns the
+    // errors map (empty = OK to advance). Hidden questions are
+    // skipped: a question the respondent can't see can't fail
+    // validation.
+    const validateCurrentPage = () => {
+        const out = {};
+        for (const q of currentQuestions) {
+            const k = q.id || q.name;
+            const err = (0, validate_1.validateAnswer)(q, responses[k]);
+            if (err)
+                out[k] = err;
+        }
+        return out;
+    };
+    // Post-submit reset — factored out because both the __end__ path
+    // and the natural last-page path share it. Awaits the submit so a
+    // server rejection (survey deactivated, cap hit) surfaces a retry
+    // message instead of a false thank-you.
+    const submitAndReset = async () => {
+        const ok = await onSubmit(buildSubmitPayload());
+        if (ok === false) {
+            setSubmitError('We couldn’t submit your response. Please try again.');
+            return; // keep the survey open for a retry
+        }
+        setSubmitError('');
+        setShowThankYou(true);
+        const duration = survey.settings?.thankYouDuration ?? 2500;
+        setTimeout(() => {
+            setShowThankYou(false);
+            setCurrentPage(0);
+            setResponses({});
+            setHistory([]);
+            setErrors({});
+            setCurrentFlow(undefined);
+            setForkStack([]);
+        }, duration);
+    };
+    const handleNext = () => {
+        const pageErrors = validateCurrentPage();
+        if (Object.keys(pageErrors).length > 0) {
+            setErrors(pageErrors);
+            return; // block navigation until fixed
+        }
+        if (Object.keys(errors).length > 0)
+            setErrors({});
+        const branchTarget = resolveNextTarget();
+        // Fork branch (spec §28). Push origin flow + rejoinAt onto the
+        // fork stack, switch currentFlow, land on page 0 of the newly-
+        // paginated flow. useMemo recomputes `pages` on the currentFlow
+        // change so the next render already reflects the new flow.
+        if (branchTarget?.kind === 'fork') {
+            setHistory((h) => [...h, { pageIndex: currentPage, flow: currentFlow }]);
+            setForkStack((s) => [...s, { flow: currentFlow, rejoinAt: branchTarget.rejoinAt }]);
+            setCurrentFlow(branchTarget.flowId);
+            setCurrentPage(0);
+            return;
+        }
+        // Early-end short-circuit.
+        if (branchTarget?.kind === 'end') {
+            submitAndReset();
+            return;
+        }
+        // Linear next OR skip-to: figure out the next page in the current
+        // flow. If we're already on the last page of the current flow AND
+        // there's a fork frame on the stack, pop it (rejoinAt → origin
+        // page, else submit).
+        const linearNext = branchTarget?.kind === 'page' ? branchTarget.index : currentPage + 1;
+        if (linearNext >= totalPages) {
+            if (forkStack.length > 0) {
+                const frame = forkStack[forkStack.length - 1];
+                setForkStack((s) => s.slice(0, -1));
+                setHistory((h) => [...h, { pageIndex: currentPage, flow: currentFlow }]);
+                setCurrentFlow(frame.flow);
+                // The rejoinAt lookup needs the ORIGIN flow's page set — we
+                // can't compute it from the current `pages` memo (that's for
+                // the current flow). Compute it inline off raw arrays.
+                if (frame.rejoinAt && survey.rawQuestions) {
+                    const originPages = (0, pagesFromV1_1.pagesFromV1)({ questions: survey.rawQuestions, sections: survey.rawSections }, frame.flow, presentationMode);
+                    const targetPage = findPageForQuestion(originPages, frame.rejoinAt);
+                    setCurrentPage(targetPage >= 0 ? targetPage : 0);
+                }
+                else {
+                    setCurrentPage(0);
+                }
+                return;
+            }
+            submitAndReset();
+            return;
+        }
+        setHistory((h) => [...h, { pageIndex: currentPage, flow: currentFlow }]);
+        setCurrentPage(linearNext);
+    };
+    const handleBack = () => {
+        // Non-linear navigation: pop the actual history stack, not just
+        // currentPage - 1 (which would skip over a jump). Any errors
+        // flagged on the current page clear on Back — the respondent
+        // isn't trying to advance anymore.
+        //
+        // History entries record BOTH pageIndex AND flow (spec §28) so a
+        // Back from inside a forked flow restores the origin flow's
+        // pagination. If we're popping back to a different flow, also
+        // pop the corresponding forkStack frame — otherwise a subsequent
+        // Next would end up re-processing the same fork.
+        setErrors({});
+        if (history.length > 0) {
+            const prev = history[history.length - 1];
+            setHistory((h) => h.slice(0, -1));
+            if (prev.flow !== currentFlow && forkStack.length > 0) {
+                setForkStack((s) => s.slice(0, -1));
+            }
+            setCurrentFlow(prev.flow);
+            setCurrentPage(prev.pageIndex);
+        }
+        else if (currentPage > 0) {
+            setCurrentPage((p) => p - 1);
+        }
+    };
+    const handleDismiss = () => {
+        setCurrentPage(0);
+        setResponses({});
+        setShowThankYou(false);
+        setHistory([]);
+        setErrors({});
+        setSubmitError('');
+        setCurrentFlow(undefined);
+        setForkStack([]);
+        onDismiss();
+    };
+    // Normalize the v1.1 options[] {value,label} and the legacy
+    // choices[] (string | {value,text}) into a single shape that
+    // MultipleChoiceQuestion accepts. hasOther appends a synthetic
+    // "Other" entry — full free-text follow-up UX lands in Phase 4.5.
+    function normalizeChoices(question) {
+        const out = [];
+        if (Array.isArray(question.options)) {
+            for (const o of question.options) {
+                if (!o)
+                    continue;
+                out.push({ value: String(o.value ?? ''), text: String(o.label ?? o.text ?? o.value ?? '') });
+            }
+        }
+        else if (Array.isArray(question.choices)) {
+            for (const c of question.choices) {
+                if (typeof c === 'string')
+                    out.push({ value: c, text: c });
+                else if (c)
+                    out.push({ value: String(c.value ?? ''), text: String(c.label ?? c.text ?? c.value ?? '') });
+            }
+        }
+        if (question.hasOther) {
+            out.push({ value: '__other__', text: question.otherLabel || 'Other' });
+        }
+        return out;
+    }
+    function renderQuestion(question) {
+        const key = question.id || question.name;
+        const val = responses[key];
+        switch (question.type) {
+            case 'nps':
+                return ((0, jsx_runtime_1.jsx)(NPSQuestion_1.NPSQuestion, { value: val ?? null, onChange: (v) => updateResponse(key, v), contract: contract }));
+            case 'rating':
+            case 'csat':
+            case 'ces':
+                return ((0, jsx_runtime_1.jsx)(CSATQuestion_1.CSATQuestion, { value: val ?? null, onChange: (v) => updateResponse(key, v), maxStars: question.maxValue ?? question.rateMax ?? 5, contract: contract }));
+            case 'comment':
+                return ((0, jsx_runtime_1.jsx)(TextQuestion_1.TextQuestion, { value: val ?? '', onChange: (v) => updateResponse(key, v), placeholder: question.placeholder, multiline: true, contract: contract }));
+            case 'text':
+            case 'email':
+            case 'number':
+                return ((0, jsx_runtime_1.jsx)(TextQuestion_1.TextQuestion, { value: val ?? '', onChange: (v) => updateResponse(key, v), placeholder: question.placeholder, multiline: false, contract: contract }));
+            case 'radio':
+            case 'radiogroup':
+            case 'dropdown':
+                return ((0, jsx_runtime_1.jsx)(MultipleChoiceQuestion_1.MultipleChoiceQuestion, { choices: normalizeChoices(question), value: val ?? '', onChange: (v) => updateResponse(key, v), mode: "radiogroup", isRtl: isRtl, contract: contract }));
+            case 'checkbox':
+                return ((0, jsx_runtime_1.jsx)(MultipleChoiceQuestion_1.MultipleChoiceQuestion, { choices: normalizeChoices(question), value: val ?? [], onChange: (v) => updateResponse(key, v), mode: "checkbox", isRtl: isRtl, contract: contract }));
+            case 'binary':
+            case 'boolean':
+            case 'yesno':
+                return ((0, jsx_runtime_1.jsx)(MultipleChoiceQuestion_1.MultipleChoiceQuestion, { choices: [
+                        { value: 'true', text: question.yesLabel || 'Yes' },
+                        { value: 'false', text: question.noLabel || 'No' },
+                    ], value: val ?? '', onChange: (v) => updateResponse(key, v), mode: "radiogroup", isRtl: isRtl, contract: contract }));
+            case 'date':
+                // Native picker when the optional peer dep
+                // (@react-native-community/datetimepicker) is installed; falls
+                // back to a text input with an ISO-8601 hint otherwise. Consumer
+                // apps that don't opt into the picker still get a working
+                // (unbranded) input.
+                if ((0, DateQuestion_1.isNativeDatePickerAvailable)()) {
+                    return ((0, jsx_runtime_1.jsx)(DateQuestion_1.DateQuestion, { value: val ?? '', onChange: (v) => updateResponse(key, v), min: typeof question.min === 'string' ? question.min : undefined, max: typeof question.max === 'string' ? question.max : undefined, placeholder: question.placeholder || 'Select a date', contract: contract, isRtl: isRtl }));
+                }
+                return ((0, jsx_runtime_1.jsx)(TextQuestion_1.TextQuestion, { value: val ?? '', onChange: (v) => updateResponse(key, v), placeholder: question.placeholder || 'YYYY-MM-DD', multiline: false, contract: contract }));
+            case 'content':
+            case 'html':
+            case 'description':
+            case 'pageBreak':
+            case 'expression':
+                // Display-only — the title/description block already covers
+                // section headers and static content. pageBreak items are
+                // filtered out of pages before we get here; guarding anyway.
+                return null;
+            case 'multiText':
+            case 'multi_text':
+            case 'multipletext': {
+                // Multi-text — labeled sub-inputs, one answer object keyed by item
+                // id. Matches the web renderer's MultiTextRenderer shape. Note the
+                // builder emits camelCase 'multiText'; the earlier snake_case-only
+                // case never triggered because this switch reads question.type
+                // raw (unlike SurveyModal's other type-family switches which lower).
+                const items = (Array.isArray(question.items) ? question.items : []);
+                return ((0, jsx_runtime_1.jsx)(MultiTextQuestion_1.MultiTextQuestion, { items: items, value: val ?? {}, onChange: (v) => updateResponse(key, v), contract: contract, isRtl: isRtl }));
+            }
+            case 'ranking':
+                return ((0, jsx_runtime_1.jsx)(RankingQuestion_1.RankingQuestion, { options: question.options || [], value: val ?? null, onChange: (v) => updateResponse(key, v), contract: contract, isRtl: isRtl }));
+            case 'matrix':
+                return ((0, jsx_runtime_1.jsx)(MatrixQuestion_1.MatrixQuestion
+                /* SurveyQuestion.rows is typed `number` (textarea line count) and
+                   `columns` isn't on the type at all — matrix was never modelled on
+                   mobile, which is why it fell through to the desktop hint. The
+                   server does send both as arrays for matrix questions, so read
+                   them through a shape-specific view; MatrixQuestion guards with
+                   Array.isArray, so a wrong shape renders empty rather than throws. */
+                , { 
+                    /* SurveyQuestion.rows is typed `number` (textarea line count) and
+                       `columns` isn't on the type at all — matrix was never modelled on
+                       mobile, which is why it fell through to the desktop hint. The
+                       server does send both as arrays for matrix questions, so read
+                       them through a shape-specific view; MatrixQuestion guards with
+                       Array.isArray, so a wrong shape renders empty rather than throws. */
+                    rows: (question.rows) || [], columns: (question.columns) || [], value: val ?? null, onChange: (v) => updateResponse(key, v), contract: contract, isRtl: isRtl }));
+            case 'image': {
+                // Display-only; collects no answer. Reads through a shape-specific view
+                // because these fields aren't on SurveyQuestion (same gap as matrix).
+                const img = question;
+                return ((0, jsx_runtime_1.jsx)(ImageQuestion_1.ImageQuestion, { imageUrl: img.imageUrl, alt: img.alt, width: img.width, height: img.height, contract: contract }));
+            }
+            case 'image_picker':
+            case 'imagePicker': {
+                const ip = question;
+                return ((0, jsx_runtime_1.jsx)(ImagePickerQuestion_1.ImagePickerQuestion, { options: question.options || [], multiSelect: ip.multiSelect, value: val, onChange: (v) => updateResponse(key, v), contract: contract, isRtl: isRtl }));
+            }
+            // The server's canonical names are camelCase (survey.routes.js:77-81).
+            // Only the snake_case aliases were listed here, so these cases never
+            // matched a real payload and fell through to `default` — which renders a
+            // TEXT INPUT. A signature or file-upload question showed a text box the
+            // respondent could type anything into. Both spellings are handled now.
+            case 'matrixDropdown':
+            case 'matrix_dropdown': {
+                const md = question;
+                return ((0, jsx_runtime_1.jsx)(MatrixDropdownQuestion_1.MatrixDropdownQuestion, { rows: md.rows || [], columns: md.columns || [], value: val ?? null, onChange: (v) => updateResponse(key, v), contract: contract, isRtl: isRtl }));
+            }
+            case 'matrixDynamic':
+            case 'matrix_dynamic': {
+                const mdy = question;
+                return ((0, jsx_runtime_1.jsx)(MatrixDynamicQuestion_1.MatrixDynamicQuestion, { columns: mdy.columns || [], value: val ?? null, onChange: (v) => updateResponse(key, v), minRowCount: mdy.minRowCount, maxRowCount: mdy.maxRowCount, addRowLabel: mdy.addRowLabel, removeRowLabel: mdy.removeRowLabel, contract: contract, isRtl: isRtl }));
+            }
+            case 'panelDynamic':
+            case 'panel_dynamic': {
+                const pd = question;
+                return ((0, jsx_runtime_1.jsx)(PanelDynamicQuestion_1.PanelDynamicQuestion, { template: pd.template, value: val ?? null, onChange: (v) => updateResponse(key, v), minPanelCount: pd.minPanelCount, maxPanelCount: pd.maxPanelCount, addPanelLabel: pd.addPanelLabel, removePanelLabel: pd.removePanelLabel, panelTitle: pd.panelTitle, contract: contract, isRtl: isRtl }));
+            }
+            case 'signature':
+            case 'fileUpload':
+            case 'file_upload':
+                // Phase 4.5 targets. Native mobile UX for these is heavy
+                // (multi-column grids on small screens, camera integration,
+                // canvas). Graceful degrade to a "please complete on
+                // desktop" hint per ADR §12.
+                return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.desktopHint, children: "This question type isn't supported on mobile yet \u2014 please complete this survey on desktop." }));
+            default:
+                // Unknown type — fall back to a text input so the survey
+                // still runs. Server-side validation will reject any junk.
+                return ((0, jsx_runtime_1.jsx)(TextQuestion_1.TextQuestion, { value: val ?? '', onChange: (v) => updateResponse(key, v), placeholder: question.placeholder, contract: contract }));
+        }
+    }
+    // Device-conditional palette variations. Author defines an ordered list
+    // of `{when: [{attr, op, value}], overrides: {theme?, primaryColor?}}`;
+    // we walk it top-to-bottom, pick the first entry whose conditions all
+    // match the current device signals, and layer its overrides over the
+    // base branding. The keys in `deviceForMatch` MUST match what the
+    // ThemeVariationsBlock DEVICE_ATTR_OPTIONS surfaces (theme, language,
+    // platform, screenClass, os, timezone) or the picker will emit
+    // conditions that never match — kept in lockstep with the web widget's
+    // resolveVariationOverrides in services/unified-sdk/src/survey.js.
+    const deviceForMatch = (() => {
+        const raw = (0, deviceInfo_1.getDeviceInfo)();
+        const langTag = typeof raw.language === 'string' ? raw.language : 'en';
+        return {
+            theme: colorScheme || 'light',
+            language: langTag.split(/[-_]/)[0].toLowerCase(),
+            platform: String(raw.platform || 'mobile').toLowerCase(),
+            screenClass: String(raw.deviceType || 'mobile').toLowerCase(),
+            os: typeof raw.os === 'string' ? raw.os : '',
+            timezone: typeof raw.timezone === 'string' ? raw.timezone : '',
+        };
+    })();
+    const activeOverrides = (() => {
+        const variations = survey.branding?.variations;
+        if (!Array.isArray(variations) || variations.length === 0)
+            return undefined;
+        for (const v of variations) {
+            const conds = Array.isArray(v.when) ? v.when : [];
+            const allMatch = conds.every((c) => {
+                const actual = deviceForMatch[c.attr];
+                return c.op === '!=' ? String(actual) !== String(c.value) : String(actual) === String(c.value);
+            });
+            if (allMatch)
+                return v.overrides || {};
+        }
+        return undefined;
+    })();
+    // Branding — read primaryColor from survey.branding with the SDK
+    // default (#D6F551 lime) as fallback. A matching variation's
+    // primaryColor override wins over the base branding. Applied as inline
+    // overrides on the modal chrome (Submit button + thank-you check) AND
+    // on every question component via the primaryColor prop.
+    const primaryColor = activeOverrides?.primaryColor
+        || survey.branding?.primaryColor
+        || styleContract_1.DARK_CONTRACT.accent; // the SDK default accent, defined once
+    // ── Hands-free voice controller (parity with web SDK / link) ────────
+    // A ref carries the latest render values so the (stable) controller always
+    // reads fresh page/question state — commit advances the page and awaits the
+    // re-render before the session reads the next question.
+    const voiceRef = react_1.default.useRef({ currentQuestions: [], isLastPage: false, language: 'en', intro: '', outro: '', updateResponse: () => { }, handleNext: () => { } });
+    const voiceLangM = currentLanguage || survey.defaultLanguage || 'en';
+    // Voice-only viability across the whole survey (all pages' questions).
+    const voiceAudit = (0, react_1.useMemo)(() => (0, voiceParsers_1.auditVoiceQuestions)(pages.flatMap((p) => p.elements)), [pages]);
+    const voiceIntroM = [
+        String(survey.title || '').replace(/<[^>]*>/g, '').trim(),
+        String(survey.description || '').replace(/<[^>]*>/g, '').trim(),
+        voiceAudit.skippable.length ? (0, voiceParsers_1.voiceDisclaimer)(voiceAudit.skippable.length, voiceLangM) : '',
+    ].filter(Boolean).join('. ');
+    const voiceOutroM = String((survey.settings?.thankYouMessage) || survey.thankYouMessage || '').replace(/<[^>]*>/g, '').trim();
+    voiceRef.current = { currentQuestions, isLastPage, language: voiceLangM, intro: voiceIntroM, outro: voiceOutroM, updateResponse, handleNext };
+    const buildVoiceController = (0, react_1.useCallback)(() => {
+        const advance = () => {
+            voiceIdxRef.current++;
+            const v = voiceRef.current;
+            if (voiceIdxRef.current < v.currentQuestions.length)
+                return Promise.resolve();
+            if (v.isLastPage) {
+                voiceDoneRef.current = true;
+                v.handleNext();
+                return Promise.resolve();
+            }
+            v.handleNext();
+            voiceIdxRef.current = 0;
+            // Wait for React to commit the next page before the loop reads getState.
+            return new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r())));
+        };
+        const keyOf = (q) => String(q.id || q.name || '');
+        return {
+            getState: () => {
+                const v = voiceRef.current;
+                if (voiceDoneRef.current)
+                    return { done: true, language: v.language, outro: v.outro };
+                const qs = v.currentQuestions;
+                if (voiceIdxRef.current >= qs.length)
+                    return { done: true, language: v.language, outro: v.outro };
+                const q = qs[voiceIdxRef.current];
+                return { done: false, question: q, qid: keyOf(q), language: v.language, intro: v.intro, outro: v.outro };
+            },
+            commit: (value) => { const v = voiceRef.current; const q = v.currentQuestions[voiceIdxRef.current]; if (q)
+                v.updateResponse(keyOf(q), value); return advance(); },
+            skip: () => advance(),
+            next: () => advance(),
+            commitMatrixCell: (_rowKey, _val, partial) => { const v = voiceRef.current; const q = v.currentQuestions[voiceIdxRef.current]; if (q)
+                v.updateResponse(keyOf(q), partial); },
+            onPhase: (p) => setVoicePhase(p),
+            onTranscript: (t) => setVoiceTranscript(t),
+            onStop: () => { setVoiceActive(false); setVoicePhase('idle'); setVoiceTranscript(''); },
+        };
+    }, [currentLanguage]); // eslint-disable-line react-hooks/exhaustive-deps
+    const toggleVoice = (0, react_1.useCallback)(() => {
+        if ((0, handsFreeVoice_1.isVoiceActive)()) {
+            (0, handsFreeVoice_1.stopVoice)();
+            return;
+        }
+        // Voice-only: a REQUIRED question that can't be voiced blocks voice entirely.
+        if (voiceAudit.blocking.length) {
+            react_native_1.Alert.alert("Voice mode isn't available", "This survey has a required question that needs manual input (e.g., a file upload), which can't be answered by voice. Please answer it normally.");
+            return;
+        }
+        voiceDoneRef.current = false;
+        voiceIdxRef.current = 0;
+        setVoiceActive(true);
+        (0, handsFreeVoice_1.startVoice)(buildVoiceController());
+    }, [buildVoiceController, voiceAudit.blocking.length]);
+    // Reset the walker when the page changes via MANUAL navigation (voice manages
+    // its own index across its advances); always stop voice on unmount.
+    (0, react_1.useEffect)(() => { if (!(0, handsFreeVoice_1.isVoiceActive)())
+        voiceIdxRef.current = 0; }, [currentPage, currentFlow]);
+    (0, react_1.useEffect)(() => () => { (0, handsFreeVoice_1.stopVoice)(); }, []);
+    const voiceOn = (0, handsFreeVoice_1.isVoiceSupported)() && survey.voiceMode !== false;
+    const showVoiceMic = voiceOn && !(history.length > 0 || currentPage > 0);
+    // branding.typography.fontFamily overrides the system font on every
+    // text node the modal renders. The consumer app is responsible for
+    // bundling the font file (Expo font.loadAsync or the RN native
+    // fonts pipeline) — RN silently falls back to system when a named
+    // family isn't installed, so an unknown value doesn't break the
+    // survey, just renders in the default font. Passed as a style
+    // object (not a bare string) so it composes with the base
+    // StyleSheet under React Native's style-array flattening.
+    // #91 — font cascade (parity with web): per-language override ▶ survey base
+    // font ▶ Application survey-default font ▶ system. Per-language lets an Arabic
+    // locale use a different family; exact tag tried before the primary subtag.
+    // A detached survey carries its own theme and stops resolving up to the
+    // application — see the note in the web SDK's appDefaults().
+    const _detached = Boolean(survey.settings?.themeDetached);
+    const _asdMobile = _detached ? {} : (survey.applicationSurveyDefaults || {});
+    const _fontByLang = survey.branding?.typography?.fontByLanguage;
+    const _langPrimary = (currentLanguage || '').split('-')[0] || '';
+    const fontFamily = (_fontByLang && ((currentLanguage ? _fontByLang[currentLanguage] : undefined) || _fontByLang[_langPrimary])) ||
+        survey.branding?.typography?.fontFamily ||
+        _asdMobile.font ||
+        undefined;
+    const fontStyle = fontFamily ? { fontFamily } : undefined;
+    // #91 — effective progress bar (parity with web): survey.progressBar ▶
+    // applicationSurveyDefaults.progressBar ▶ built-in. '' / undefined = inherit;
+    // boolean true → shown, false → hidden. Mobile renders one bar position, so
+    // any non-'off' mode shows it. Default (nothing set) stays 'shown' to preserve
+    // prior mobile behavior (bar always visible on multi-page surveys).
+    // `!= null`: a cleared override is null, not undefined — JSON drops undefined.
+    const _pbRaw = (survey.progressBar != null && survey.progressBar !== '')
+        ? survey.progressBar
+        : (_asdMobile.progressBar || undefined);
+    const _pbMode = typeof _pbRaw === 'boolean' ? (_pbRaw ? 'top' : 'off') : (_pbRaw || 'top');
+    const showProgressBar = _pbMode !== 'off';
+    // The mode was computed correctly here and then thrown away one line later —
+    // every non-'off' value rendered a single bar at the top. Grepping for the
+    // field found it and the code read as finished, which is why this survived
+    // two passes. Now the position is actually used, as it is on web and link.
+    const showProgressTop = showProgressBar && (_pbMode === 'top' || _pbMode === 'both');
+    const showProgressBottom = showProgressBar && (_pbMode === 'bottom' || _pbMode === 'both');
+    // "1 / 3" used to ride along with the bar unconditionally. It is a separate
+    // switch on the other two renderers, so it is one here too.
+    const effShowPageNumbers = typeof survey.showPageNumbers === 'boolean'
+        ? survey.showPageNumbers
+        : _asdMobile.showPageNumbers === true;
+    // #94 — effective question numbering (parity with web): survey.showQuestionNumbers
+    // ▶ applicationSurveyDefaults.showQuestionNumbers ▶ off. '' / non-boolean = inherit.
+    // When on, answerable questions get a "Q1.", "Q2." … prefix, numbered across the
+    // WHOLE survey (stable across pages) and skipping display-only elements.
+    const effShowQuestionNumbers = typeof survey.showQuestionNumbers === 'boolean'
+        ? survey.showQuestionNumbers
+        : _asdMobile.showQuestionNumbers === 'on';
+    const questionNumberById = (() => {
+        const map = {};
+        if (!effShowQuestionNumbers)
+            return map;
+        const NON_ANSWERABLE = new Set(['content', 'html', 'description', 'pagebreak', 'expression']);
+        let n = 0;
+        for (const pg of pages) {
+            for (const el of (pg.elements || [])) {
+                // Lowercased: the builder writes 'pageBreak' and an API-created survey
+                // may write 'pagebreak'. The web SDK has always compared case-
+                // insensitively; these two surfaces did not, so the same survey
+                // numbered its questions differently depending on where it was opened.
+                if (NON_ANSWERABLE.has(String(el.type || '').toLowerCase()))
+                    continue;
+                const key = el.id || el.name;
+                if (!key)
+                    continue;
+                n += 1;
+                map[key] = n;
+            }
+        }
+        return map;
+    })();
+    // branding.typography.baseFontSize scales every proportional text
+    // node by (baseFontSize / 15). 15 is the SDK's baseline body-text
+    // size (question title in the base StyleSheet); scaling around it
+    // preserves the relative visual hierarchy — a 3× baseFontSize
+    // triples the title AND description together instead of blowing
+    // out one. Fixed-size UI chrome (single-char glyphs, tiny code
+    // labels) is intentionally left unscaled.
+    const baseScale = (() => {
+        const v = survey.branding?.typography?.baseFontSize;
+        if (typeof v !== 'number' || v <= 0)
+            return 1;
+        return v / 15;
+    })();
+    const scaled = (n) => Math.round(n * baseScale);
+    const fs = baseScale !== 1;
+    const titleFS = fs ? { fontSize: scaled(20) } : undefined;
+    const descFS = fs ? { fontSize: scaled(14) } : undefined;
+    const qTitleFS = fs ? { fontSize: scaled(15) } : undefined;
+    const qDescFS = fs ? { fontSize: scaled(13) } : undefined;
+    const thankYouFS = fs ? { fontSize: scaled(18) } : undefined;
+    const buttonFS = fs ? { fontSize: scaled(15) } : undefined;
+    // Layout tokens (spec §24). String presets map to concrete pixel
+    // values; a number passes through verbatim so authors can set
+    // exact sizes when the presets don't fit. Undefined = keep the
+    // SDK defaults on the base StyleSheet.
+    const maxWidth = (() => {
+        const v = survey.branding?.layout?.maxWidth;
+        if (typeof v === 'number')
+            return v;
+        if (v === 'narrow')
+            return 360;
+        if (v === 'standard')
+            return 420; // matches the SDK default
+        if (v === 'wide')
+            return 560;
+        // 'full' was advertised by the API and mapped nowhere. undefined here means
+        // "no cap", which on a phone IS full width — so it is expressed rather than
+        // left to coincidence.
+        if (v === 'full')
+            return undefined;
+        return undefined;
+    })();
+    const cornerRadius = (() => {
+        const v = survey.branding?.layout?.cornerRadius;
+        if (typeof v === 'number')
+            return v;
+        // Aligned with the other two renderers. This CHANGES native appearance for
+        // surveys using these keywords — subtle was 12 here and 8 elsewhere,
+        // rounded 24 against 16 — which is the divergence worth removing: one
+        // keyword must not mean two shapes. `style.cardRadius` sets an exact value
+        // for anyone who wants the old numbers back.
+        if (v === 'none')
+            return 0;
+        if (v === 'sharp')
+            return 4;
+        if (v === 'subtle')
+            return 8;
+        if (v === 'rounded')
+            return 16;
+        if (v === 'pill')
+            return 999;
+        return undefined;
+    })();
+    // density affects breathing-room paddings: header, body, footer,
+    // and the between-question gap. Tap targets (button padding, option
+    // row padding, TextInput padding) intentionally stay fixed so a
+    // 'compact' survey doesn't shrink the interactive hit area below
+    // WCAG's 24×24 minimum.
+    const density = survey.branding?.layout?.density;
+    const dens = (comp, comf, spac) => density === 'compact' ? comp :
+        density === 'spacious' ? spac :
+            comf; // 'comfortable' or undefined
+    const padHeader = density ? { padding: dens(16, 24, 32), paddingBottom: dens(8, 12, 16) } : undefined;
+    const padBody = density ? { paddingHorizontal: dens(16, 24, 32) } : undefined;
+    const padFooter = density ? { padding: dens(16, 24, 32), paddingTop: dens(12, 16, 20) } : undefined;
+    const gapQBlock = density ? { marginBottom: dens(12, 20, 28) } : undefined;
+    // Theme palette (spec §24). Dark is the SDK default; light flips
+    // every surface color the modal + question components render.
+    // `palette` is passed through to every question component so the
+    // sweep lands in one place — a3e6838 landed just modal chrome,
+    // this pass extends into every input surface and question row.
+    // Theme resolution rules (parity with web widget), highest priority first:
+    //   1. A matching variation's `overrides.theme` — the author explicitly
+    //      set a palette for this device profile
+    //   2. `branding.theme === 'light' | 'dark'` — author pinned the base
+    //   3. `branding.theme === 'auto'` or absent — follow device (Appearance)
+    //   4. fallback → 'dark' (SDK default when OS reports neither)
+    // Authors who want brand consistency pin light/dark on the base; authors
+    // who want per-device palettes use variations; authors who want to meet
+    // respondents where they are leave everything on 'auto'. Colour scheme
+    // changes mid-session re-render via the useState/Appearance listener
+    // above (attributeContext is memoized on colorScheme too).
+    const authorTheme = survey.branding?.theme;
+    // For 'auto'/absent, follow the end-user's preference, highest first:
+    //   1. user.theme — an identify() trait the host keeps in sync with its own
+    //      theme toggle: CXPinsight.identify({ theme: 'light'|'dark' }). Recommended.
+    //   2. init({ theme }) config — still honored for backward compat.
+    //   3. the OS colour scheme (Appearance). init({theme}) is also reported as
+    //      device.theme for analytics/targeting regardless.
+    const _pref = (v) => {
+        const t = typeof v === 'string' ? v.toLowerCase() : '';
+        return t === 'light' || t === 'dark' ? t : undefined;
+    };
+    const _userTheme = _pref(CXPinsight_1.CXPinsight._getUserIdentity()?.theme);
+    const _initTheme = _pref(CXPinsight_1.CXPinsight._getConfig()?.theme);
+    const resolvedTheme = activeOverrides?.theme === 'light' || activeOverrides?.theme === 'dark'
+        ? activeOverrides.theme
+        : authorTheme === 'light' || authorTheme === 'dark'
+            ? authorTheme
+            : (_userTheme || _initTheme || (colorScheme === 'light' ? 'light' : colorScheme === 'dark' ? 'dark' : 'dark'));
+    const isLight = resolvedTheme === 'light';
+    // Layer palette overrides: SDK-init (host app) > survey.branding.palette
+    // > built-in defaults. themePalette applies precedence per-key so a
+    // partial-override slot on either layer only shadows THAT key.
+    // Palette can be "linked" (one shared light/dark map for web+mobile, default)
+    // or diverged (palette.linked===false with per-platform palette.web/.mobile
+    // layered over the shared map per-surface). This SDK is 'mobile'.
+    const surveyPaletteOverride = (() => {
+        const pal = survey.branding?.palette;
+        if (!pal)
+            return undefined;
+        const shared = pal[resolvedTheme];
+        const over = pal.linked === false ? pal.mobile?.[resolvedTheme] : undefined;
+        if (over)
+            return { ...(shared || {}), ...over };
+        return shared;
+    })();
+    const initPaletteOverride = CXPinsight_1.CXPinsight._getInitBrandingPalette?.()?.[resolvedTheme];
+    const palette = (0, themePalette_1.themePalette)(resolvedTheme, surveyPaletteOverride, initPaletteOverride);
+    // Full style contract — the same layering as `palette`, widened from 9 fields
+    // to every surface the question components draw.
+    //
+    // Note this is passed in BOTH themes, unlike `palette` which was gated behind
+    // `isLight`. That is safe and deliberate: DARK_CONTRACT's per-component values
+    // were audited against the components' own StyleSheet literals (the values
+    // dark actually rendered), and LIGHT_CONTRACT's mirror the light palette. So
+    // an unstyled survey renders identically to before in either theme, while a
+    // branded one now gets its brand applied on mobile as well as web.
+    //
+    // Memoized on the actual inputs, not just wrapped: resolveStyleContract()
+    // returns a fresh object each call, so an unmemoized value would give
+    // `styles` a new identity every render and call StyleSheet.create() every
+    // time — which leaks entries in RN's style registry over a long session.
+    const contract = (0, react_1.useMemo)(() => (0, styleContract_1.resolveStyleContract)({
+        theme: resolvedTheme,
+        primaryColor,
+        // survey.branding.palette is written by SurveyPaletteEditor in the
+        // AUTHORED vocabulary (bg/cardBg/inputBg/…), so it must be translated.
+        // init()'s brandingPalette is a code API documented in the SDK
+        // vocabulary, so it passes through unmapped.
+        // branding.palette[theme] — colours, authored vocabulary, needs mapping.
+        // branding.style — shape/spacing/type, already canonical contract names,
+        // and theme-independent so it is NOT read per-mode. Merged on top so a
+        // radius set once applies in both themes, exactly as it does on web.
+        surveyOverride: {
+            ...(0, styleContract_1.fromAuthoredPalette)(surveyPaletteOverride),
+            ...(survey.branding?.style || {}),
+        },
+        initOverride: initPaletteOverride,
+    }), 
+    // Serialised because both override objects are rebuilt on each render by
+    // their own lookups; comparing by identity would defeat the memo.
+    [resolvedTheme, primaryColor,
+        JSON.stringify(surveyPaletteOverride), JSON.stringify(initPaletteOverride),
+        JSON.stringify(survey.branding?.style)]);
+    const styles = (0, react_1.useMemo)(() => makeStyles(contract), [contract]);
+    const themeCard = isLight ? { backgroundColor: palette.card, borderColor: palette.cardBorder } : undefined;
+    const themeTextPrimary = isLight ? { color: palette.textPrimary } : undefined;
+    const themeTextSecondary = isLight ? { color: palette.textSecondary } : undefined;
+    const themeTextMuted = isLight ? { color: palette.textMuted } : undefined;
+    // RTL (spec §26). Applies `writingDirection: 'rtl'` on every text
+    // node so Arabic/Hebrew content reads correctly. Full flex-flip
+    // (row reversal on button rows) is a follow-up — this pass just
+    // fixes the reading order which is the visible bug for now.
+    // RTL is driven by the ACTIVE language, not just the survey-level
+    // `direction`. A multilingual survey (e.g. en default + ar) has no
+    // top-level direction, so switching to Arabic must flip the modal to
+    // RTL on its own — otherwise Arabic renders left-to-right ("not theme
+    // compliant"). survey.direction:'rtl' still forces RTL globally when
+    // an author sets it. Covers the RTL scripts a survey is likely to use.
+    const isRtl = survey.direction === 'rtl' ||
+        (currentLanguage ? RTL_LANGUAGES.has(currentLanguage) : false);
+    const dirText = isRtl ? { writingDirection: 'rtl', textAlign: 'right' } : undefined;
+    // P73 — presentation. animation → Modal animationType; mode 'fullscreen' → edge-to-edge
+    // card (drop the centered maxWidth cap + corner radius, fill the screen).
+    // The application's presentation defaults, MOBILE slice, with the survey's
+    // own values on top. This merge did not exist: `display` read the survey
+    // alone, so everything set on the Application theme page — mode, position,
+    // width, height, animation, and the shared chrome — reached the link renderer
+    // and (since the parallel fix) the web SDK, and died here. Precedence matches
+    // the other two exactly: survey ▶ application ▶ built-in, field by field, with
+    // '' meaning inherit rather than override-with-nothing.
+    const display = (0, react_1.useMemo)(() => {
+        const a = _asdMobile;
+        // Both layers may store display per platform — web and mobile positions are
+        // different decisions, and a survey that could only store one made editing
+        // either frame overwrite the other. A display with no slices IS the value.
+        const pick = (d) => {
+            if (!d || typeof d !== 'object')
+                return {};
+            // `link` is a slice marker too — see the note in the web SDK.
+            if (d.web === undefined && d.mobile === undefined && d.link === undefined)
+                return d;
+            return (d.mobile || {});
+        };
+        const slice = pick(a.display);
+        const out = { ...slice };
+        // Chrome is stored beside display on an application because it is shared
+        // furniture, but every renderer reads it FROM display.
+        ['buttonAlign', 'showClose', 'showBack'].forEach((k) => {
+            if (out[k] === undefined && a[k] !== undefined)
+                out[k] = a[k];
+        });
+        const own = pick(survey.settings?.display);
+        Object.keys(own).forEach((k) => {
+            if (own[k] !== undefined && own[k] !== null && own[k] !== '')
+                out[k] = own[k];
+        });
+        return out;
+    }, [survey.settings?.display, _asdMobile]);
+    // Parity fix: an UNSET animation used to mean 'fade' here and 'slide' on web,
+    // so the same authored survey entered differently per platform for a value the
+    // author never chose. Slide is the shared default — it is also what a native
+    // sheet does, so nothing about the mobile feel is lost.
+    const animationType = display?.animation === 'fade' ? 'fade' : display?.animation === 'none' ? 'none' : 'slide';
+    const isFullscreen = display?.mode === 'fullscreen';
+    const isDrawer = display?.mode === 'modal';
+    // Position — previously unread here, which is why a phone could never show a
+    // bottom sheet, the one presentation users actually expect on mobile.
+    //
+    // Left and right are dropped rather than approximated: a side drawer is
+    // 420px of horizontal room a handset does not have, and the sheet is the
+    // native equivalent. A drawer with nothing set anchors to the BOTTOM (the
+    // platform convention); anything else centres, as before.
+    const rawPos = display?.position;
+    const placement = rawPos === 'top' ? 'top'
+        : rawPos === 'bottom' ? 'bottom'
+            : rawPos === 'left' || rawPos === 'right' ? 'bottom'
+                : rawPos === 'center' ? 'center'
+                    : isDrawer ? 'bottom' : 'center';
+    const isSheet = isDrawer && (placement === 'top' || placement === 'bottom');
+    // Popup coordinate. RN cannot centre on a percentage the way the web SDK does
+    // — transform:translateY takes points, not percentages, and percentage margins
+    // resolve against the parent WIDTH — so the free y is bucketed into the three
+    // placements RN can express cleanly. x is ignored entirely; a phone centres.
+    const popupY = !isDrawer && !isFullscreen && display?.y != null ? parseFloat(String(display.y)) : NaN;
+    const effPlacement = !isNaN(popupY) ? (popupY < 33 ? 'top' : popupY > 67 ? 'bottom' : 'center') : placement;
+    const overlayPlacement = {
+        justifyContent: effPlacement === 'top' ? 'flex-start'
+            : effPlacement === 'bottom' ? 'flex-end'
+                : 'center',
+    };
+    // A sheet is flush to its edge and spans the full width, and only the corners
+    // whose edges are exposed stay round — the same rule the web SDK derives.
+    // Directional entrance. RN's Modal only knows one slide — upward from the
+    // bottom — so a TOP sheet used to fly up from the far edge, past its own
+    // resting place, and settle backwards. Every other case is already right:
+    // a bottom sheet and a centred popup both rise, and fade has no direction.
+    // So the Modal animation is handed over ONLY for a top sheet, and the card
+    // animates itself down from above instead.
+    const needsTopSlide = animationType === 'slide' && isSheet && placement === 'top';
+    const modalAnimation = needsTopSlide ? 'none' : animationType;
+    const enterAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    (0, react_1.useEffect)(() => {
+        if (!needsTopSlide)
+            return;
+        if (!visible) {
+            enterAnim.setValue(0);
+            return;
+        }
+        enterAnim.setValue(0);
+        react_native_1.Animated.timing(enterAnim, {
+            toValue: 1,
+            duration: 280,
+            easing: react_native_1.Easing.out(react_native_1.Easing.cubic),
+            // Transform and opacity only, so this runs off the JS thread and does not
+            // stutter while the survey's first page is still laying out.
+            useNativeDriver: true,
+        }).start();
+    }, [visible, needsTopSlide, enterAnim]);
+    const enterStyle = needsTopSlide
+        ? {
+            opacity: enterAnim,
+            transform: [{
+                    translateY: enterAnim.interpolate({
+                        inputRange: [0, 1],
+                        // Its own height is not known before layout, so it travels a screen
+                        // third — far enough to read as entering from off-screen, short
+                        // enough that the easing still lands crisply.
+                        outputRange: [-SCREEN_HEIGHT / 3, 0],
+                    }),
+                }],
+        }
+        : null;
+    const sheetRadius = cornerRadius !== undefined ? cornerRadius : 16;
+    const sheetStyle = isSheet ? {
+        width: '100%',
+        maxWidth: undefined,
+        borderTopLeftRadius: placement === 'bottom' ? sheetRadius : 0,
+        borderTopRightRadius: placement === 'bottom' ? sheetRadius : 0,
+        borderBottomLeftRadius: placement === 'top' ? sheetRadius : 0,
+        borderBottomRightRadius: placement === 'top' ? sheetRadius : 0,
+    } : null;
+    // Safe areas. Deliberately built from react-native primitives rather than
+    // react-native-safe-area-context: this package declares no dependencies, and
+    // adding one would force every host app to install it.
+    const topInset = react_native_1.Platform.OS === 'android' ? (react_native_1.StatusBar.currentHeight || 0) : 44;
+    const bottomInset = react_native_1.Platform.OS === 'ios' ? 34 : 0;
+    const safePad = isFullscreen
+        ? { paddingTop: topInset, paddingBottom: bottomInset }
+        : isSheet && placement === 'bottom' ? { paddingBottom: bottomInset }
+            : isSheet && placement === 'top' ? { paddingTop: topInset }
+                : null;
+    // Action-button layout. UNSET keeps the native full-width split (default);
+    // 'full' is explicit full-width; right/center/left shrink to content + align.
+    const buttonAlign = display?.buttonAlign;
+    const alignsAuto = !!buttonAlign && buttonAlign !== 'full';
+    const footerAlign = alignsAuto ? { justifyContent: buttonAlign === 'center' ? 'center' : buttonAlign === 'left' ? 'flex-start' : 'flex-end' } : null;
+    const btnAutoWidth = alignsAuto ? { flex: 0, paddingHorizontal: 24 } : null;
+    // display.height → CARD height (non-fullscreen). Fullscreen keeps the card
+    // full-bleed and constrains the CONTENT instead (fsContent below), so the
+    // survey background fills and only the content is contained — like web.
+    const heightStyle = (() => {
+        if (isFullscreen)
+            return null;
+        const h = display?.height;
+        if (!h || h === 'auto')
+            return null;
+        // Parity fix: 'tall' was 92% here and 85vh/90vh on web, so the same keyword
+        // produced a visibly different card per platform.
+        if (h === 'tall')
+            return { height: '85%', maxHeight: '90%' };
+        if (h === 'fullscreen')
+            return { height: '92%', maxHeight: '92%' };
+        // Parity fix: vh was silently ignored here while web accepted it, so an
+        // authored '60vh' worked on one platform and did nothing on the other. The
+        // overlay fills the screen, so a viewport unit IS a percentage in this frame.
+        const vh = /^(\d+(?:\.\d+)?)vh$/.exec(String(h));
+        if (vh)
+            return { height: `${vh[1]}%`, maxHeight: '92%' };
+        const pct = /^(\d+(?:\.\d+)?)%$/.exec(String(h));
+        if (pct)
+            return { height: `${pct[1]}%`, maxHeight: '92%' };
+        const px = /^(\d+(?:\.\d+)?)px$/.exec(String(h));
+        if (px)
+            return { height: Number(px[1]), maxHeight: '92%' };
+        return null;
+    })();
+    // display.width → card width (non-fullscreen), parity with the web SDK. px is
+    // capped to the screen; % passes through. Overrides the layout maxWidth below.
+    const widthStyle = (() => {
+        if (isFullscreen)
+            return null;
+        // A sheet spans its edge; width does not apply to it, and the web SDK
+        // already forces width:100%/maxWidth:none on a horizontal drawer. This
+        // style is composed AFTER sheetStyle, so without this guard an authored
+        // width silently overrode the sheet here and nowhere else — the same survey
+        // rendering edge-to-edge on web and inset on a phone.
+        if (isSheet)
+            return null;
+        const w = display?.width;
+        if (!w || w === 'auto')
+            return null;
+        const vw = /^(\d+(?:\.\d+)?)vw$/.exec(String(w));
+        if (vw)
+            return { width: `${vw[1]}%` };
+        const pct = /^(\d+(?:\.\d+)?)%$/.exec(String(w));
+        if (pct)
+            return { width: `${pct[1]}%` };
+        const px = /^(\d+(?:\.\d+)?)px$/.exec(String(w));
+        if (px)
+            return { width: Math.min(SCREEN_WIDTH - 40, Number(px[1])), maxWidth: Number(px[1]) };
+        return null;
+    })();
+    // Fullscreen ONLY: the card fills (survey bg), and these constrain the CONTENT
+    // region (ScrollView) — maxHeight caps the scroll area, maxWidth centres it —
+    // so a Content height/width contains the content without shrinking the survey.
+    const fsContent = (() => {
+        if (!isFullscreen)
+            return null;
+        const out = {};
+        // display.y — distance from the top of the screen to the top of the content.
+        // Replaces the old Top/Middle/Bottom alignment, which could only act on free
+        // space and so did nothing once the content outgrew the screen. Same control
+        // and same field as the web SDK and the link surface, so one setting reads
+        // identically on all three.
+        const yRaw = display?.y;
+        if (yRaw != null && yRaw !== '') {
+            const n = typeof yRaw === 'number' ? yRaw : Number(String(yRaw).replace(/px$/, ''));
+            if (Number.isFinite(n) && n > 0)
+                out.marginTop = n;
+        }
+        const h = display?.height;
+        if (h && h !== 'auto') {
+            if (h === 'tall')
+                out.maxHeight = '85%';
+            else {
+                const vhx = /^(\d+(?:\.\d+)?)vh$/.exec(String(h));
+                const pct = /^(\d+(?:\.\d+)?)%$/.exec(String(h));
+                const px = /^(\d+(?:\.\d+)?)px$/.exec(String(h));
+                if (vhx)
+                    out.maxHeight = `${vhx[1]}%`;
+                else if (pct)
+                    out.maxHeight = `${pct[1]}%`;
+                else if (px)
+                    out.maxHeight = Number(px[1]);
+            }
+        }
+        const w = display?.width;
+        if (w && w !== 'auto') {
+            const pct = /^(\d+(?:\.\d+)?)%$/.exec(String(w));
+            const px = /^(\d+(?:\.\d+)?)px$/.exec(String(w));
+            if (pct)
+                out.maxWidth = `${pct[1]}%`;
+            else if (px)
+                out.maxWidth = Number(px[1]);
+            if (out.maxWidth !== undefined) {
+                out.alignSelf = 'center';
+                out.width = '100%';
+            }
+        }
+        return Object.keys(out).length ? out : null;
+    })();
+    // Built once and placed at whichever end (or both) the mode asks for, so the
+    // two positions cannot drift apart in styling or accessibility wiring.
+    const progressEl = totalPages > 1 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [effShowPageNumbers && ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.progress, children: [currentPage + 1, " / ", totalPages] })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.progressBarTrack, accessible: true, accessibilityRole: "progressbar", accessibilityLabel: `Page ${currentPage + 1} of ${totalPages}`, accessibilityValue: { min: 1, max: totalPages, now: currentPage + 1 }, accessibilityLiveRegion: "polite", children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                        styles.progressBarFill,
+                        { width: `${((currentPage + 1) / totalPages) * 100}%`, backgroundColor: primaryColor },
+                    ] }) })] })) : null;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: visible, transparent: true, animationType: modalAnimation, onRequestClose: handleDismiss, children: (0, jsx_runtime_1.jsxs)(react_native_1.KeyboardAvoidingView, { style: [
+                styles.overlay,
+                overlayPlacement,
+                // A sheet sits flush against its edge, so the overlay loses its gutter.
+                isSheet && { paddingHorizontal: 0, paddingTop: 0, paddingBottom: 0 },
+                isFullscreen && styles.overlayFullscreen,
+            ], behavior: react_native_1.Platform.OS === 'ios' ? 'padding' : 'height', children: [(0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: [
+                        styles.card,
+                        themeCard,
+                        enterStyle,
+                        maxWidth !== undefined && !isFullscreen && { width: Math.min(SCREEN_WIDTH - 40, maxWidth), maxWidth },
+                        cornerRadius !== undefined && !isFullscreen && { borderRadius: cornerRadius },
+                        // cardFullscreen fills; an explicit content height/width below OVERRIDES
+                        // the fill so a fullscreen survey can be contained to that size.
+                        isFullscreen && styles.cardFullscreen,
+                        sheetStyle,
+                        heightStyle,
+                        widthStyle,
+                        safePad,
+                    ], children: [display?.showClose !== false && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                                styles.closeButton,
+                                isRtl ? { left: 12 } : { right: 12 },
+                            ], onPress: handleDismiss, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.closeText, themeTextSecondary], children: "\u2715" }) })), showThankYou ? (() => {
+                            // The thank-you message can be rich HTML from the web builder.
+                            // Pull out an embedded <img> (often a data: URI icon) and render
+                            // it as a real Image — stripHtml would otherwise drop it — then
+                            // show the remaining text. When an image is present it stands in
+                            // for the default ✓ glyph.
+                            const rawThankYou = (0, interpolate_1.interpolatePlain)((0, translationLookup_1.surveyText)(survey, currentLanguage, 'thankYouMessage', survey.settings?.thankYouMessage)
+                                ?? 'Thank you for your feedback!', evalCtx);
+                            const imgSrc = firstImageSrc(rawThankYou);
+                            const thankYouText = stripHtml(rawThankYou);
+                            return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.thankYou, children: [imgSrc ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: imgSrc }, style: styles.thankYouImage, resizeMode: "contain" })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouEmoji, { color: primaryColor }], children: "\u2713" })), thankYouText ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.thankYouTitle, dirText, fontStyle, themeTextPrimary, thankYouFS], children: thankYouText })) : null] }));
+                        })() : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [survey.languages && survey.languages.length > 1 && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                        styles.langSwitcher,
+                                        isRtl && { paddingRight: 12, paddingLeft: 48, flexDirection: 'row-reverse' },
+                                    ], children: survey.languages.map((code) => {
+                                        const isActive = code === currentLanguage;
+                                        return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: () => setCurrentLanguage(code), activeOpacity: 0.7, style: [
+                                                styles.langChip,
+                                                // Light theme: the chip's default white-on-white border/fill
+                                                // is invisible on the light card — repaint from the palette.
+                                                isLight && { borderColor: palette.inputBorder, backgroundColor: palette.input },
+                                                isActive && { borderColor: primaryColor, backgroundColor: `${primaryColor}1A` },
+                                            ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                                    styles.langChipText,
+                                                    isLight && { color: palette.textSecondary },
+                                                    isActive && { color: primaryColor },
+                                                ], children: code.toUpperCase() }) }, code));
+                                    }) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                        styles.header,
+                                        padHeader,
+                                        isRtl && { paddingLeft: 48, paddingRight: 24 },
+                                    ], children: [((survey.branding?.showLogo !== false && survey.branding?.logo)
+                                            || survey.branding?.brandName) && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                                styles.brandRow,
+                                                // Logo position, same rule as the other two renderers.
+                                                (survey.branding?.logoAlign === 'center'
+                                                    ? { justifyContent: 'center' }
+                                                    : survey.branding?.logoAlign === 'right'
+                                                        ? { justifyContent: 'flex-end' }
+                                                        : null),
+                                            ], children: [survey.branding?.showLogo !== false && survey.branding?.logo ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: survey.branding.logo }, style: styles.brandLogo, resizeMode: "contain", accessible: !!survey.branding.brandName, accessibilityLabel: survey.branding.brandName })) : null, survey.branding?.brandName ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.brandName, dirText, fontStyle, themeTextSecondary], children: survey.branding.brandName })) : null] })), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.title, dirText, fontStyle, themeTextPrimary, titleFS,
+                                                survey.titleAlign
+                                                    ? { textAlign: survey.titleAlign }
+                                                    : null], children: (0, interpolate_1.interpolatePlain)(
+                                            // Title is plain text; strip any stray rich-text markup +
+                                            // decode &nbsp; so it never shows literal HTML on native.
+                                            String((0, translationLookup_1.surveyText)(survey, currentLanguage, 'title', survey.title) || '')
+                                                .replace(/<[^>]*>/g, '').replace(/&nbsp;/gi, ' '), evalCtx) }), (() => {
+                                            // Description is authored as rich HTML; native Text can't render
+                                            // markup, so strip tags + decode &nbsp; to plain text.
+                                            const descRaw = (0, translationLookup_1.surveyText)(survey, currentLanguage, 'description', survey.description);
+                                            const desc = String(descRaw || '').replace(/<[^>]*>/g, '').replace(/&nbsp;/gi, ' ').trim();
+                                            return desc ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.description, dirText, fontStyle, themeTextSecondary, descFS], children: (0, interpolate_1.interpolatePlain)(desc, evalCtx) })) : null;
+                                        })(), showProgressTop && progressEl] }), (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: [styles.body, padBody, fsContent], showsVerticalScrollIndicator: false, children: currentQuestions.map((q) => {
+                                        // v1.1 uses `id`+`required`; legacy uses `name`+`isRequired`.
+                                        // The provider normalizes both onto the same object so
+                                        // either lookup works.
+                                        const rowKey = q.id || q.name;
+                                        const isRequired = q.required || q.isRequired;
+                                        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.questionBlock, gapQBlock], children: [(0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles.questionTitle, dirText, fontStyle, themeTextPrimary, qTitleFS], children: [questionNumberById[rowKey] ? `Q${questionNumberById[rowKey]}. ` : '', (0, interpolate_1.interpolatePlain)((0, translationLookup_1.questionText)(survey, currentLanguage, rowKey, 'text', q.title), evalCtx), isRequired && (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.required, children: " *" })] }), (() => {
+                                                    const qDesc = (0, translationLookup_1.questionText)(survey, currentLanguage, rowKey, 'description', q.description);
+                                                    return qDesc ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.questionDesc, dirText, fontStyle, themeTextMuted, qDescFS], children: (0, interpolate_1.interpolatePlain)(qDesc, evalCtx) })) : null;
+                                                })(), renderQuestion(q), errors[rowKey] ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.errorText, dirText, fontStyle], children: errors[rowKey] })) : null] }, rowKey));
+                                    }) }), submitError ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.submitError, dirText, fontStyle], children: submitError })) : null, showProgressBottom && (0, jsx_runtime_1.jsx)(react_native_1.View, { style: padFooter, children: progressEl }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                        styles.footer,
+                                        padFooter,
+                                        // Flip button order for RTL so the primary (Next / Submit)
+                                        // action sits on the left where an Arabic reader
+                                        // expects to find the forward affordance in their
+                                        // text-flow direction.
+                                        isRtl && { flexDirection: 'row-reverse' },
+                                        footerAlign,
+                                    ], children: [showVoiceMic && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                                                styles.voiceMic,
+                                                { backgroundColor: voiceActive ? '#ef4444' : primaryColor },
+                                                buttonAlign === 'right' && { marginRight: 'auto' },
+                                            ], onPress: toggleVoice, accessibilityLabel: voiceActive ? 'Stop hands-free voice' : 'Answer with voice', activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.voiceMicGlyph, children: "\uD83C\uDFA4" }) })), display?.showBack !== false && (history.length > 0 || currentPage > 0) && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                                                styles.backButton,
+                                                isLight && { backgroundColor: palette.input, borderColor: palette.inputBorder },
+                                                btnAutoWidth,
+                                                // Right-align parity with web: Back hugs the left edge while
+                                                // Next/Submit sits on the right (web uses margin-right:auto).
+                                                buttonAlign === 'right' && { marginRight: 'auto' },
+                                            ], onPress: handleBack, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.backButtonText, fontStyle, themeTextSecondary, buttonFS], children: "Back" }) })), (() => {
+                                            // Reflect the actual outcome of pressing Next: if a
+                                            // branch resolves to __end__ we're submitting even
+                                            // when we're not on the last page. Cheap to evaluate
+                                            // here — same call handleNext will make.
+                                            const target = resolveNextTarget();
+                                            // Reflect the actual outcome of pressing Next. A __end__
+                                            // branch always submits. A fork branch or a page/linear-
+                                            // next never submits. Otherwise: last-page + no fork
+                                            // frame left on the stack = submit.
+                                            const willSubmit = target?.kind === 'end' ||
+                                                (target == null && isLastPage && forkStack.length === 0);
+                                            const isSingleButton = history.length === 0 && currentPage === 0;
+                                            return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity
+                                            // Full-width ONLY when alignment is unset (native default) or
+                                            // explicitly 'full'. When the author picked right/center/left,
+                                            // respect it even on the first page (was forced full-width,
+                                            // so mobile ignored the setting on page 1 — unlike web).
+                                            , { 
+                                                // Full-width ONLY when alignment is unset (native default) or
+                                                // explicitly 'full'. When the author picked right/center/left,
+                                                // respect it even on the first page (was forced full-width,
+                                                // so mobile ignored the setting on page 1 — unlike web).
+                                                style: [styles.nextButton, ((isSingleButton && !alignsAuto) || buttonAlign === 'full') && styles.nextButtonFull, btnAutoWidth, { backgroundColor: primaryColor }], onPress: handleNext, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.nextButtonText, fontStyle, buttonFS], children: willSubmit ? 'Submit' : 'Next' }) }));
+                                        })()] })] }))] }), (0, jsx_runtime_1.jsx)(handsFreeVoice_1.VoiceOverlay, { visible: voiceActive, phase: voicePhase, transcript: voiceTranscript, onStop: () => (0, handsFreeVoice_1.stopVoice)() })] }) }));
+}
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');
+/**
+ * Contract-driven styles. Was a static StyleSheet with 31 hardcoded colours;
+ * every one now resolves from the style contract, so a branded survey brands the
+ * modal chrome too — not just its question components.
+ *
+ * DARK_CONTRACT's values were audited against this file's previous literals, so
+ * an unstyled dark modal renders identically. In light theme some chrome
+ * surfaces previously fell through to the dark literals (only card/text had
+ * isLight overrides); those now correctly use the light values.
+ */
+const makeStyles = (c) => react_native_1.StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: c.ground,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+    },
+    card: {
+        width: Math.min(SCREEN_WIDTH - 40, 420),
+        maxHeight: '85%',
+        backgroundColor: c.card,
+        borderRadius: c.cardRadius,
+        borderWidth: 1,
+        borderColor: c.cardBorder,
+        overflow: 'hidden',
+    },
+    // P73 — fullscreen presentation: edge-to-edge, no centered card.
+    overlayFullscreen: {
+        padding: 0,
+        justifyContent: 'flex-start',
+    },
+    cardFullscreen: {
+        width: '100%',
+        maxWidth: undefined,
+        height: '100%',
+        maxHeight: '100%',
+        borderRadius: 0,
+        borderWidth: 0,
+    },
+    closeButton: {
+        position: 'absolute',
+        top: 12,
+        // left / right applied inline based on survey.direction — see
+        // the closeButton render site above.
+        zIndex: 10,
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        backgroundColor: c.closeBg,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    closeText: {
+        color: c.closeText,
+        fontSize: 16,
+    },
+    header: {
+        // Per-side padding maps onto the three stacked regions this modal already
+        // uses: the header owns the TOP edge, the footer owns the BOTTOM, and all
+        // three share the sides. Each falls back to the single value, so unlinking
+        // and editing one edge cannot zero the others.
+        paddingTop: c.cardPaddingTop ?? c.cardPadding,
+        paddingLeft: c.cardPaddingLeft ?? c.cardPadding,
+        paddingBottom: 12,
+        // 48 is the room the close button needs; a larger authored right padding
+        // wins, a smaller one would put the title under the ✕.
+        paddingRight: Math.max(48, c.cardPaddingRight ?? c.cardPadding),
+    },
+    // Branding row above the title — logo image + optional brand name
+    // caption. Center-aligned; the logo is capped small enough that
+    // portrait screens don't blow it out.
+    brandRow: {
+        alignItems: 'center',
+        marginBottom: 12,
+    },
+    brandLogo: {
+        width: 120,
+        height: 36,
+        maxWidth: '100%',
+    },
+    brandName: {
+        color: c.brandNameColor,
+        fontSize: 12,
+        fontWeight: '600',
+        letterSpacing: 0.5,
+        textTransform: 'uppercase',
+        marginTop: 6,
+    },
+    title: {
+        color: c.headingColor,
+        fontSize: c.fontSizeHeading,
+        fontWeight: '700',
+    },
+    description: {
+        color: c.descriptionColor,
+        fontSize: 14,
+        marginTop: 6,
+        lineHeight: 20,
+    },
+    progress: {
+        color: c.progressText,
+        fontSize: 12,
+        marginTop: 8,
+    },
+    // Filled-bar progress. Track is a thin muted stripe; fill uses
+    // branding.primaryColor via inline style so branded surveys
+    // show the accent through the bar rather than the SDK default.
+    progressBarTrack: {
+        height: 3,
+        backgroundColor: c.progressTrack,
+        borderRadius: 2,
+        marginTop: 6,
+        overflow: 'hidden',
+    },
+    progressBarFill: {
+        height: '100%',
+        borderRadius: 2,
+    },
+    body: {
+        paddingLeft: c.cardPaddingLeft ?? c.cardPadding,
+        paddingRight: c.cardPaddingRight ?? c.cardPadding,
+    },
+    questionBlock: {
+        marginBottom: c.sectionGap,
+    },
+    questionTitle: {
+        color: c.textPrimary,
+        fontSize: c.fontSizeLabel,
+        fontWeight: '600',
+        marginBottom: 4,
+    },
+    required: {
+        color: c.requiredMark,
+    },
+    questionDesc: {
+        color: c.textMuted,
+        fontSize: 13,
+        marginBottom: 4,
+    },
+    // Validation error surfaced under a required question when Next
+    // is pressed without an answer. Red (#f87171 — RN-friendly Tailwind
+    // red-400) instead of the danger red used by the design system's
+    // web renderer, tuned to read on the dark card background.
+    errorText: {
+        color: c.errorText,
+        fontSize: 12,
+        fontWeight: '500',
+        marginTop: 8,
+    },
+    submitError: {
+        color: c.errorText,
+        fontSize: 13,
+        fontWeight: '600',
+        textAlign: 'center',
+        paddingHorizontal: 24,
+        marginTop: 4,
+    },
+    // Language switcher — chip row above the header. Only shown when
+    // survey.languages has 2+ entries. Active chip gets the primaryColor
+    // border + 10%-alpha tint (mirrors the choice-option selection
+    // treatment so the language pick reads as "selected".)
+    langSwitcher: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 6,
+        padding: 12,
+        paddingBottom: 0,
+        paddingRight: 48, // leave room for the close button
+    },
+    langChip: {
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: c.chipBorder,
+        backgroundColor: c.chipBg,
+    },
+    langChipText: {
+        color: c.chipText,
+        fontSize: 11,
+        fontWeight: '600',
+        letterSpacing: 0.5,
+    },
+    // "Please complete on desktop" hint shown for question types that
+    // require heavy native UX (matrix, panelDynamic, signature, etc.).
+    // Phase 4.5 will bring native implementations for the priority ones.
+    desktopHint: {
+        color: c.hintText,
+        fontSize: 13,
+        fontStyle: 'italic',
+        padding: 14,
+        borderRadius: 12,
+        backgroundColor: c.hintBg,
+        borderWidth: 1,
+        borderColor: c.hintBorder,
+        marginTop: 4,
+    },
+    footer: {
+        flexDirection: 'row',
+        paddingLeft: c.cardPaddingLeft ?? c.cardPadding,
+        paddingRight: c.cardPaddingRight ?? c.cardPadding,
+        paddingBottom: c.cardPaddingBottom ?? c.cardPadding,
+        paddingTop: 16,
+        gap: 12,
+    },
+    backButton: {
+        flex: 1,
+        paddingVertical: c.buttonPaddingY,
+        borderRadius: c.buttonRadius,
+        backgroundColor: c.secondaryBg,
+        borderWidth: 1,
+        borderColor: c.secondaryBorder,
+        alignItems: 'center',
+    },
+    backButtonText: {
+        color: c.secondaryText,
+        fontSize: c.buttonFontSize,
+        fontWeight: '600',
+    },
+    voiceMic: {
+        width: 48,
+        // Stretches to the row rather than computing a matching height — the same
+        // padding does not produce the same height for a glyph and a text line, so
+        // the arithmetic version sat proud of the buttons beside it.
+        alignSelf: 'stretch',
+        borderRadius: c.buttonRadius,
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexGrow: 0,
+        flexShrink: 0,
+    },
+    voiceMicGlyph: {
+        fontSize: 20,
+    },
+    nextButton: {
+        flex: 1,
+        paddingVertical: c.buttonPaddingY,
+        borderRadius: c.buttonRadius,
+        backgroundColor: c.primaryBg,
+        alignItems: 'center',
+    },
+    nextButtonFull: {
+        flex: 1,
+    },
+    nextButtonText: {
+        color: c.primaryText,
+        fontSize: c.buttonFontSize,
+        fontWeight: '700',
+    },
+    thankYou: {
+        padding: 48,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    thankYouEmoji: {
+        fontSize: 48,
+        color: c.accent,
+        marginBottom: 16,
+    },
+    thankYouImage: {
+        width: 72,
+        height: 72,
+        marginBottom: 16,
+    },
+    thankYouTitle: {
+        color: c.headingColor,
+        fontSize: 18,
+        fontWeight: '600',
+        textAlign: 'center',
+        lineHeight: 26,
+    },
+});
+//# sourceMappingURL=SurveyModal.js.map