@selfhelp/sh2-shp-survey-js-mobile 0.3.0

package/src/styles/section.ts

@@ -0,0 +1,131 @@
+/*
+SPDX-FileCopyrightText: 2026 Humdek, University of Bern
+SPDX-License-Identifier: MPL-2.0
+*/
+/**
+ * Section-field extraction for the mobile SurveyJS runtime.
+ *
+ * Mirrors the frontend `buildRuntimeConfigFromSection` (and its field
+ * readers) so the mobile renderer interprets the SAME CMS style fields
+ * the web runtime does — `redirect_at_end`, `auto_save_interval`,
+ * `restart_on_refresh`, `timeout`, the once-per-* gates, the schedule
+ * window, and the status labels. Keeping the readers identical is what
+ * makes "exactly the same functionality" hold across platforms.
+ *
+ * `extractSurveyId` reads the `survey-js` field (the selected published
+ * survey key) and is the single source of truth for both the host shell and
+ * the WebView load handshake.
+ */
+
+export interface ISectionLike {
+    id?: number;
+    fields?: Record<string, unknown>;
+    style_name?: string;
+    [key: string]: unknown;
+}
+
+/** Read the selected published-survey key from the section's `survey-js` field. */
+export function extractSurveyId(section: ISectionLike | undefined): string | null {
+    return extractFieldString(section, 'survey-js');
+}
+
+export interface IRuntimeSectionConfig {
+    restartOnRefresh: boolean;
+    autoSaveIntervalSeconds: number;
+    timeoutMinutes: number;
+    savePdf: boolean;
+    closeModalAtEnd: boolean;
+    redirectAtEnd: string | null;
+    urlParams: boolean;
+    startTime: string | null;
+    endTime: string | null;
+    oncePerUser: boolean;
+    oncePerSchedule: boolean;
+    ownEntriesOnly: boolean;
+    allowAnonymous: boolean;
+    labelSurveyDone: string | null;
+    labelSurveyNotActive: string | null;
+}
+
+export function extractFieldString(section: ISectionLike | undefined, key: string): string | null {
+    const value = section?.fields?.[key] ?? section?.[key];
+    if (typeof value === 'string' && value.trim() !== '') return value.trim();
+    if (typeof value === 'number' && Number.isFinite(value)) return String(value);
+    if (
+        value &&
+        typeof value === 'object' &&
+        'content' in (value as Record<string, unknown>) &&
+        (typeof (value as { content?: unknown }).content === 'string' ||
+            typeof (value as { content?: unknown }).content === 'number')
+    ) {
+        const content = (value as { content: string | number }).content;
+        return String(content).trim() || null;
+    }
+    return null;
+}
+
+export function extractFieldBoolean(
+    section: ISectionLike | undefined,
+    key: string,
+    fallback: boolean,
+): boolean {
+    const raw = extractFieldString(section, key);
+    if (raw === null) return fallback;
+    return raw === '1' || raw.toLowerCase() === 'true';
+}
+
+export function extractFieldNumber(
+    section: ISectionLike | undefined,
+    key: string,
+    fallback: number,
+): number {
+    const raw = extractFieldString(section, key);
+    if (raw === null) return fallback;
+    const parsed = Number.parseInt(raw, 10);
+    return Number.isFinite(parsed) ? parsed : fallback;
+}
+
+export function buildRuntimeConfigFromSection(section?: ISectionLike): IRuntimeSectionConfig {
+    return {
+        restartOnRefresh: extractFieldBoolean(section, 'restart_on_refresh', false),
+        autoSaveIntervalSeconds: extractFieldNumber(section, 'auto_save_interval', 0),
+        timeoutMinutes: extractFieldNumber(section, 'timeout', 0),
+        savePdf: extractFieldBoolean(section, 'save_pdf', false),
+        closeModalAtEnd: extractFieldBoolean(section, 'close_modal_at_end', false),
+        redirectAtEnd: extractFieldString(section, 'redirect_at_end'),
+        urlParams: extractFieldBoolean(section, 'url_params', false),
+        startTime: extractFieldString(section, 'start_time'),
+        endTime: extractFieldString(section, 'end_time'),
+        oncePerUser: extractFieldBoolean(section, 'once_per_user', false),
+        oncePerSchedule: extractFieldBoolean(section, 'once_per_schedule', false),
+        ownEntriesOnly: extractFieldBoolean(section, 'own_entries_only', false),
+        allowAnonymous: extractFieldBoolean(section, 'allow_anonymous', true),
+        labelSurveyDone: extractFieldString(section, 'label_survey_done'),
+        labelSurveyNotActive: extractFieldString(section, 'label_survey_not_active'),
+    };
+}
+
+/**
+ * Server-side runtime-config echo (sent as `X-SurveyJs-Runtime-Config`)
+ * so the backend re-validates the submission against the SAME config the
+ * section declares. Mirrors the frontend `configToServerConfig`.
+ */
+export function configToServerConfig(config: IRuntimeSectionConfig): Record<string, unknown> {
+    return {
+        restartOnRefresh: config.restartOnRefresh,
+        autoSaveIntervalSeconds: config.autoSaveIntervalSeconds,
+        timeoutMinutes: config.timeoutMinutes,
+        savePdf: config.savePdf,
+        closeModalAtEnd: config.closeModalAtEnd,
+        redirectAtEnd: config.redirectAtEnd,
+        urlParams: config.urlParams,
+        startTime: config.startTime,
+        endTime: config.endTime,
+        oncePerUser: config.oncePerUser,
+        oncePerSchedule: config.oncePerSchedule,
+        ownEntriesOnly: config.ownEntriesOnly,
+        allowAnonymous: config.allowAnonymous,
+        labelSurveyDone: config.labelSurveyDone,
+        labelSurveyNotActive: config.labelSurveyNotActive,
+    };
+}

package/src/styles/transport/SurveyWebViewNative.tsx

@@ -0,0 +1,53 @@
+/*
+SPDX-FileCopyrightText: 2026 Humdek, University of Bern
+SPDX-License-Identifier: MPL-2.0
+*/
+/**
+ * Native WebView transport (iOS / Android) backed by `react-native-webview`.
+ *
+ * Lazy-`require`d by `SurveyJsStyle` ONLY on native, so the native module is
+ * never evaluated on the web export. Security posture:
+ *   - loads the self-contained HTML via `source={{ html }}` (no remote URL),
+ *   - `originWhitelist` is scoped to `about:blank` (not `*`),
+ *   - `onShouldStartLoadWithRequest` blocks every navigation the shell did not
+ *     explicitly allow (real redirects go through the native host, not the
+ *     WebView), and
+ *   - DOM storage is left off; the runtime needs no persistent storage.
+ */
+
+import { useEffect, useRef } from 'react';
+import { WebView } from 'react-native-webview';
+import type { WebViewMessageEvent } from 'react-native-webview';
+
+import type { IWebViewTransportProps } from './contract';
+
+export function SurveyWebViewNative({
+    html,
+    height,
+    onMessage,
+    setPost,
+    isAllowedUrl,
+}: IWebViewTransportProps): React.ReactElement {
+    const ref = useRef<WebView>(null);
+
+    useEffect(() => {
+        setPost((json: string) => {
+            ref.current?.postMessage(json);
+        });
+    }, [setPost]);
+
+    return (
+        <WebView
+            ref={ref}
+            originWhitelist={['about:blank']}
+            source={{ html }}
+            onMessage={(event: WebViewMessageEvent) => onMessage(event.nativeEvent.data)}
+            onShouldStartLoadWithRequest={(request) => isAllowedUrl(request.url)}
+            javaScriptEnabled
+            domStorageEnabled={false}
+            setSupportMultipleWindows={false}
+            allowsInlineMediaPlayback
+            style={{ height, backgroundColor: 'transparent' }}
+        />
+    );
+}

package/src/styles/transport/SurveyWebViewWeb.tsx

@@ -0,0 +1,63 @@
+/*
+SPDX-FileCopyrightText: 2026 Humdek, University of Bern
+SPDX-License-Identifier: MPL-2.0
+*/
+/**
+ * Web-export WebView transport backed by an `<iframe srcDoc>`.
+ *
+ * `react-native-webview` has no web implementation, so the Expo web export
+ * (react-native-web → react-dom) renders the SAME self-contained runtime HTML
+ * in a sandboxed iframe and uses `window.postMessage` for the bridge.
+ *
+ * This file uses the DOM, so it is EXCLUDED from the package `tsc` (the mobile
+ * tsconfig has no DOM lib) and compiled only by tsup/esbuild + Metro web. It
+ * is lazy-`require`d by `SurveyJsStyle` ONLY on web. The iframe is sandboxed
+ * (`allow-scripts allow-same-origin`) and the runtime HTML carries a strict
+ * CSP (`connect-src 'none'`), so the runtime cannot reach the network — every
+ * authenticated call goes through the native host.
+ */
+
+import { useEffect, useRef } from 'react';
+
+import type { IWebViewTransportProps } from './contract';
+
+export function SurveyWebViewWeb({
+    html,
+    height,
+    onMessage,
+    setPost,
+    isAllowedUrl,
+}: IWebViewTransportProps): React.ReactElement {
+    const ref = useRef<HTMLIFrameElement | null>(null);
+
+    useEffect(() => {
+        setPost((json: string) => {
+            const win = ref.current?.contentWindow;
+            if (win) win.postMessage(JSON.parse(json), '*');
+        });
+    }, [setPost]);
+
+    useEffect(() => {
+        const handler = (event: MessageEvent): void => {
+            if (ref.current && event.source === ref.current.contentWindow) {
+                onMessage(event.data);
+            }
+        };
+        window.addEventListener('message', handler);
+        return () => window.removeEventListener('message', handler);
+    }, [onMessage]);
+
+    // `isAllowedUrl` is enforced by the iframe CSP + sandbox on web; referenced
+    // here to keep the transport contract identical across platforms.
+    void isAllowedUrl;
+
+    return (
+        <iframe
+            ref={ref}
+            srcDoc={html}
+            title="SurveyJS"
+            sandbox="allow-scripts allow-same-origin allow-forms"
+            style={{ width: '100%', height, border: '0', background: 'transparent' }}
+        />
+    );
+}

package/src/styles/transport/contract.ts

@@ -0,0 +1,33 @@
+/*
+SPDX-FileCopyrightText: 2026 Humdek, University of Bern
+SPDX-License-Identifier: MPL-2.0
+*/
+/**
+ * Platform-agnostic contract between the SurveyJS RN shell and its WebView
+ * transport. Two implementations exist — `SurveyWebViewNative` (uses
+ * `react-native-webview`) and `SurveyWebViewWeb` (uses an `<iframe>`); the
+ * shell picks one at runtime by `Platform.OS` and lazy-`require`s it so the
+ * native module is never evaluated on web (and vice-versa).
+ *
+ * Both transports do the SAME two jobs: load the self-contained runtime HTML
+ * and shuttle bridge messages. They expose `setPost` so the shell can send
+ * host->webview messages, and call `onMessage` for every webview->host
+ * message (string on native, object on web — the shell normalises both).
+ */
+
+export interface IWebViewTransportProps {
+    /** Self-contained runtime HTML (survey-core + survey-react-ui inlined). */
+    html: string;
+    /** Measured content height (px) reported by the runtime via `RESIZE`. */
+    height: number;
+    /** Called with each inbound webview->host payload (string or object). */
+    onMessage: (raw: unknown) => void;
+    /** Hands the shell the function that posts a JSON string INTO the runtime. */
+    setPost: (post: (json: string) => void) => void;
+    /**
+     * Security gate: returns true only for URLs the WebView may load itself
+     * (the srcdoc/about:blank bootstrap). Everything else is blocked — real
+     * redirects go through the native host (`REQUEST_REDIRECT`).
+     */
+    isAllowedUrl: (url: string) => boolean;
+}

package/src/webview/generated/runtimeHtml.ts

@@ -0,0 +1,26 @@
+/*
+SPDX-FileCopyrightText: 2026 Humdek, University of Bern
+SPDX-License-Identifier: MPL-2.0
+*/
+/* eslint-disable */
+/**
+ * GENERATED FILE — do not edit by hand.
+ *
+ * `npm run build:webview` compiles `src/webview` with Vite into one
+ * self-contained HTML (SurveyJS JS + CSS inlined, no CDN), then
+ * `scripts/wrap-webview-html.mjs` rewrites this file with that HTML as a string
+ * constant. This committed PLACEHOLDER is intentionally tiny so the repo stays
+ * light and so `tsc`, vitest, and the tsup bundle resolve before the WebView is
+ * built; `npm run build` always runs `build:webview` before `tsup`, so the
+ * published `dist` carries the real runtime. Do NOT commit the multi-MB built
+ * version of this file. If this placeholder ever reaches a device it posts a
+ * RUNTIME_ERROR instead of rendering.
+ */
+
+export const SURVEYJS_WEBVIEW_HTML =
+    '<!doctype html><html><head><meta charset="utf-8" /><title>SurveyJS</title></head>' +
+    '<body><div id="root"></div><script>' +
+    "var m={source:'sh2-surveyjs',type:'RUNTIME_ERROR',message:'SurveyJS WebView runtime asset was not built (run build:webview).'};" +
+    'try{if(window.ReactNativeWebView){window.ReactNativeWebView.postMessage(JSON.stringify(m));}' +
+    "else if(window.parent&&window.parent!==window){window.parent.postMessage(m,'*');}}catch(e){}" +
+    '</script></body></html>';

package/src/webview/htmlAsset.ts

@@ -0,0 +1,14 @@
+/*
+SPDX-FileCopyrightText: 2026 Humdek, University of Bern
+SPDX-License-Identifier: MPL-2.0
+*/
+/**
+ * Public accessor for the self-contained SurveyJS WebView runtime HTML.
+ *
+ * The native RN shell loads this string into `react-native-webview`
+ * (`source={{ html }}`) on native and into a `srcdoc` iframe on web export.
+ * The string is the Vite single-file bundle (SurveyJS JS + CSS inlined, no
+ * CDN/network for the runtime itself). See `generated/runtimeHtml.ts`.
+ */
+
+export { SURVEYJS_WEBVIEW_HTML } from './generated/runtimeHtml';

package/src/webview/index.html

@@ -0,0 +1,20 @@
+<!--
+SPDX-FileCopyrightText: 2026 Humdek, University of Bern
+SPDX-License-Identifier: MPL-2.0
+-->
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"
+        />
+        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data: blob:; connect-src 'none'; font-src data:;" />
+        <title>SurveyJS</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="./runtime/main.tsx"></script>
+    </body>
+</html>

package/src/webview/runtime/SurveyWebviewApp.tsx

@@ -0,0 +1,183 @@
+/*
+SPDX-FileCopyrightText: 2026 Humdek, University of Bern
+SPDX-License-Identifier: MPL-2.0
+*/
+/**
+ * Isolated SurveyJS WebView runtime (browser side).
+ *
+ * Renders the OFFICIAL SurveyJS React UI (`survey-react-ui` + `survey-core`)
+ * — the same library the web frontend uses — so mobile gets full parity
+ * (same JSON, question types, validation, conditional logic, completion).
+ * It owns the UI lifecycle but NOT the network: it emits typed intents over
+ * the bridge and the native host performs every authenticated call and
+ * returns the result.
+ *
+ * Built ONLY by the WebView Vite bundle (`vite.webview.config.ts`) into a
+ * single self-contained HTML (survey-core + survey-react-ui JS/CSS inlined,
+ * no CDN). Excluded from the package `tsc`.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import { Model } from 'survey-core';
+import { Survey } from 'survey-react-ui';
+
+import { BRIDGE_SOURCE, BRIDGE_PROTOCOL_VERSION } from '../../bridge/messages';
+import type { THostToWebviewMessage } from '../../bridge/messages';
+import {
+    createSurveyRuntimeController,
+    type ISurveyRuntimeController,
+    type TRuntimeLifecycle,
+} from '../../runtime/controller';
+import { isOutsideSchedule, stripHtml } from '../../runtime/lifecycle';
+import type { IRuntimeSectionConfig } from '../../styles/section';
+import { createRuntimeBridge, type IRuntimeBridge } from './bridge';
+
+interface IRuntimeLabels {
+    surveyDone: string | null;
+    surveyNotActive: string | null;
+}
+
+export function SurveyWebviewApp(): React.ReactElement {
+    const [lifecycle, setLifecycle] = useState<TRuntimeLifecycle>('booting');
+    const [model, setModel] = useState<Model | null>(null);
+    const [statusText, setStatusText] = useState<string | null>(null);
+
+    const bridgeRef = useRef<IRuntimeBridge | null>(null);
+    const controllerRef = useRef<ISurveyRuntimeController | null>(null);
+    const configRef = useRef<IRuntimeSectionConfig | null>(null);
+    const localeRef = useRef<string | null>(null);
+    const labelsRef = useRef<IRuntimeLabels>({ surveyDone: null, surveyNotActive: null });
+
+    useEffect(() => {
+        const bridge = createRuntimeBridge((message) => handleHostMessage(message));
+        bridgeRef.current = bridge;
+        setLifecycle('loading');
+        bridge.post({ source: BRIDGE_SOURCE, type: 'READY', protocolVersion: BRIDGE_PROTOCOL_VERSION });
+        return () => bridge.dispose();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // Report content height to the native host so it can size the WebView.
+    useEffect(() => {
+        const report = (): void => {
+            const height = document.documentElement.scrollHeight;
+            bridgeRef.current?.post({ source: BRIDGE_SOURCE, type: 'RESIZE', height });
+        };
+        report();
+        const observer = new ResizeObserver(report);
+        observer.observe(document.documentElement);
+        return () => observer.disconnect();
+    }, [lifecycle, model]);
+
+    function handleHostMessage(message: THostToWebviewMessage): void {
+        switch (message.type) {
+            case 'INIT': {
+                configRef.current = message.config;
+                localeRef.current = message.locale;
+                if (isOutsideSchedule(message.config)) {
+                    setStatusText(stripHtml(message.config.labelSurveyNotActive));
+                    setLifecycle('locked');
+                    return;
+                }
+                bridgeRef.current?.post({
+                    source: BRIDGE_SOURCE,
+                    type: 'LOAD_SURVEY',
+                    surveyKey: message.surveyKey,
+                });
+                return;
+            }
+            case 'SURVEY_LOADED': {
+                labelsRef.current = {
+                    surveyDone: message.runtimeConfig.labelSurveyDone,
+                    surveyNotActive: message.runtimeConfig.labelSurveyNotActive,
+                };
+                if (message.state.lockoutReason) {
+                    setStatusText(stripHtml(message.runtimeConfig.labelSurveyDone));
+                    setLifecycle('locked');
+                    return;
+                }
+                buildModel(message);
+                return;
+            }
+            default:
+                controllerRef.current?.handleHostMessage(message);
+                return;
+        }
+    }
+
+    function buildModel(message: Extract<THostToWebviewMessage, { type: 'SURVEY_LOADED' }>): void {
+        const config = configRef.current;
+        if (!config || !bridgeRef.current) return;
+
+        const nextModel = new Model(message.definition);
+        const variables = { ...message.tokens, ...message.extraParams };
+        for (const [key, value] of Object.entries(variables)) {
+            nextModel.setVariable(key, value);
+        }
+        if (localeRef.current) nextModel.locale = localeRef.current;
+
+        let initialResponseId: string | null = null;
+        if (message.draft) {
+            nextModel.data = { ...message.draft.data };
+            if (Number.isInteger(message.draft.pageNo) && message.draft.pageNo >= 0) {
+                nextModel.currentPageNo = message.draft.pageNo;
+            }
+            initialResponseId = message.draft.responseId;
+        }
+
+        const controller = createSurveyRuntimeController({
+            config,
+            post: bridgeRef.current.post,
+            initialResponseId,
+            onLifecycle: (next, detail) => {
+                if (next === 'locked') setStatusText(stripHtml(labelsRef.current.surveyDone));
+                setLifecycle(next);
+                if (detail?.message) setStatusText(detail.message);
+            },
+        });
+        controllerRef.current = controller;
+        controller.attachModel(nextModel);
+        setModel(nextModel);
+    }
+
+    if (lifecycle === 'ready' && model) {
+        return <Survey model={model} />;
+    }
+
+    return <StatusView lifecycle={lifecycle} statusText={statusText} />;
+}
+
+function StatusView({
+    lifecycle,
+    statusText,
+}: {
+    lifecycle: TRuntimeLifecycle;
+    statusText: string | null;
+}): React.ReactElement {
+    const message = resolveStatusMessage(lifecycle, statusText);
+    return (
+        <div className="sh2-survey-status" role="status" aria-live="polite">
+            {message}
+        </div>
+    );
+}
+
+function resolveStatusMessage(lifecycle: TRuntimeLifecycle, statusText: string | null): string {
+    switch (lifecycle) {
+        case 'booting':
+        case 'loading':
+            return 'Loading survey…';
+        case 'submitting':
+            return 'Submitting your response…';
+        case 'submitted':
+            return 'Thank you — your response was recorded.';
+        case 'locked':
+            return statusText ?? 'You have already completed this survey.';
+        case 'session-expired':
+            return 'Your session has expired. Please reopen this page to continue.';
+        case 'error':
+            return statusText ?? 'The survey could not be displayed.';
+        default:
+            return statusText ?? 'Loading survey…';
+    }
+}

package/src/webview/runtime/bridge.ts

@@ -0,0 +1,76 @@
+/*
+SPDX-FileCopyrightText: 2026 Humdek, University of Bern
+SPDX-License-Identifier: MPL-2.0
+*/
+/**
+ * Bridge transport for the isolated WebView runtime (browser side).
+ *
+ * Outbound (runtime -> host):
+ *   - native:  `window.ReactNativeWebView.postMessage(JSON.stringify(msg))`
+ *   - web/iframe: `window.parent.postMessage(msg, '*')`
+ *
+ * Inbound (host -> runtime): both `react-native-webview` (which dispatches a
+ * `document`/`window` `message` event with a string `data`) and the iframe
+ * `postMessage` (object `data`) are accepted, parsed, and validated against
+ * the typed host->webview contract. Anything that fails the guard is dropped.
+ *
+ * This file is built ONLY by the WebView Vite bundle (it touches `window` /
+ * `document`), so it is excluded from the package's `tsc` (no DOM lib) and
+ * relies on esbuild for transpilation.
+ */
+
+import {
+    type THostToWebviewMessage,
+    type TWebviewToHostMessage,
+    isHostToWebviewMessage,
+} from '../../bridge/messages';
+
+interface IReactNativeWebView {
+    postMessage(payload: string): void;
+}
+
+export interface IRuntimeBridge {
+    post(message: TWebviewToHostMessage): void;
+    dispose(): void;
+}
+
+export function createRuntimeBridge(onMessage: (message: THostToWebviewMessage) => void): IRuntimeBridge {
+    const rnWebView = (window as unknown as { ReactNativeWebView?: IReactNativeWebView }).ReactNativeWebView;
+
+    const post = (message: TWebviewToHostMessage): void => {
+        if (rnWebView && typeof rnWebView.postMessage === 'function') {
+            rnWebView.postMessage(JSON.stringify(message));
+            return;
+        }
+        if (window.parent && window.parent !== window) {
+            window.parent.postMessage(message, '*');
+        }
+    };
+
+    const handleEvent = (event: Event): void => {
+        const raw = (event as MessageEvent).data;
+        let parsed: unknown = raw;
+        if (typeof raw === 'string') {
+            try {
+                parsed = JSON.parse(raw);
+            } catch {
+                return; // not our protocol — ignore
+            }
+        }
+        if (isHostToWebviewMessage(parsed)) {
+            onMessage(parsed);
+        }
+    };
+
+    // react-native-webview injects to `document`; iframe posts to `window`.
+    window.addEventListener('message', handleEvent);
+    document.addEventListener('message', handleEvent as EventListener);
+
+    return {
+        post,
+        dispose() {
+            window.removeEventListener('message', handleEvent);
+            document.removeEventListener('message', handleEvent as EventListener);
+        },
+    };
+}

package/src/webview/runtime/main.tsx

@@ -0,0 +1,24 @@
+/*
+SPDX-FileCopyrightText: 2026 Humdek, University of Bern
+SPDX-License-Identifier: MPL-2.0
+*/
+/**
+ * WebView runtime entry point. Bundled by `vite.webview.config.ts` together
+ * with SurveyJS JS + CSS into a single self-contained HTML asset (no CDN).
+ */
+
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import 'survey-core/survey-core.css';
+import './runtime.css';
+import { SurveyWebviewApp } from './SurveyWebviewApp';
+
+const container = document.getElementById('root');
+if (container) {
+    createRoot(container).render(
+        <StrictMode>
+            <SurveyWebviewApp />
+        </StrictMode>,
+    );
+}

package/src/webview/runtime/runtime.css

@@ -0,0 +1,27 @@
+/*
+SPDX-FileCopyrightText: 2026 Humdek, University of Bern
+SPDX-License-Identifier: MPL-2.0
+*/
+/* Minimal runtime chrome. SurveyJS owns the survey UI; this only styles the
+   transient status messages and resets margins so RESIZE height is accurate. */
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    -webkit-text-size-adjust: 100%;
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+}
+
+#root {
+    padding: 0;
+}
+
+.sh2-survey-status {
+    padding: 24px 16px;
+    text-align: center;
+    color: #4a4a4a;
+    font-size: 15px;
+    line-height: 1.5;
+}