domma-cms 0.30.0 → 0.32.1

package/plugins/surveys/admin/templates/survey-editor.html

@@ -0,0 +1,141 @@
+<div class="survey-editor-plugin">
+
+    <style>
+        /* Layout only — colours/borders come from Domma's themed .card and
+           .form-input, so the active theme is always respected. */
+        .survey-editor-plugin .se-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
+        .survey-editor-plugin .se-span-2 { grid-column: 1 / -1; }
+        .survey-editor-plugin .se-field { display: flex; flex-direction: column; gap: 0.35rem; }
+        .survey-editor-plugin .se-field label { font-weight: 600; font-size: 0.85rem; }
+        .survey-editor-plugin .se-field .se-hint { font-size: 0.78rem; color: var(--dm-text-muted); }
+        .survey-editor-plugin .se-field .form-input { width: 100%; }
+        .survey-editor-plugin .se-field textarea.form-input { min-height: 90px; resize: vertical; }
+        .survey-editor-plugin .se-field select[multiple].form-input { min-height: 120px; }
+        @media (max-width: 640px) { .survey-editor-plugin .se-grid { grid-template-columns: 1fr; } }
+    </style>
+
+    <div class="toolbar mb-3" style="display:flex;align-items:center;gap:0.5rem;">
+        <h2 id="editor-title" style="margin:0;flex:1;">New Survey</h2>
+        <button id="back-btn" class="btn btn-outline"><span data-icon="arrow-left"></span> Back</button>
+    </div>
+
+    <div class="card">
+        <div class="card-header"><strong>Basics</strong></div>
+        <div class="card-body">
+            <div class="se-grid">
+                <div class="se-field se-span-2">
+                    <label for="f-title">Title</label>
+                    <input id="f-title" name="title" type="text" class="form-input" placeholder="Customer satisfaction Q3">
+                </div>
+                <div class="se-field">
+                    <label for="f-slug">Slug</label>
+                    <input id="f-slug" name="slug" type="text" class="form-input" placeholder="customer-sat-q3">
+                    <span class="se-hint" id="slug-hint">URL-safe identifier.</span>
+                </div>
+                <div class="se-field">
+                    <label for="f-formSlug">Form</label>
+                    <select id="f-formSlug" name="formSlug" class="form-input"><option value="">Select a form…</option></select>
+                    <span class="se-hint">The Forms definition respondents complete.</span>
+                </div>
+                <div class="se-field se-span-2">
+                    <label for="f-description">Description</label>
+                    <textarea id="f-description" name="description" class="form-input" placeholder="Optional internal description…"></textarea>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="card mt-3">
+        <div class="card-header"><strong>Setup</strong></div>
+        <div class="card-body">
+            <div class="se-grid">
+                <div class="se-field">
+                    <label for="f-status">Status</label>
+                    <select id="f-status" name="status" class="form-input">
+                        <option value="draft">Draft</option>
+                        <option value="open">Open</option>
+                        <option value="closed">Closed</option>
+                    </select>
+                </div>
+                <div class="se-field">
+                    <label for="f-mode">Mode</label>
+                    <select id="f-mode" name="mode" class="form-input">
+                        <option value="identified">Identified</option>
+                        <option value="anonymous">Anonymous</option>
+                    </select>
+                    <span class="se-hint">Anonymous de-links responses from contacts.</span>
+                </div>
+                <div class="se-field se-span-2">
+                    <label for="f-groupIds">Audience groups</label>
+                    <select id="f-groupIds" name="groupIds" class="form-input" multiple></select>
+                    <span class="se-hint">Hold Ctrl/Cmd to select multiple groups.</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="card mt-3">
+        <div class="card-header"><strong>Schedule</strong></div>
+        <div class="card-body">
+            <div class="se-grid">
+                <div class="se-field"><label for="f-opensAt">Opens at</label><input id="f-opensAt" name="opensAt" type="date" class="form-input"></div>
+                <div class="se-field"><label for="f-closesAt">Closes at</label><input id="f-closesAt" name="closesAt" type="date" class="form-input"></div>
+                <div class="se-field"><label for="f-reminderAfterDays">Reminder after (days)</label><input id="f-reminderAfterDays" name="reminderAfterDays" type="number" min="0" value="7" class="form-input"></div>
+            </div>
+        </div>
+    </div>
+
+    <div class="card mt-3">
+        <div class="card-header"><strong>Survey page content</strong></div>
+        <div class="card-body">
+            <div class="se-grid">
+                <div class="se-field se-span-2">
+                    <label for="f-intro">Intro (Markdown — shown above the form)</label>
+                    <textarea id="f-intro" name="intro" class="form-input" placeholder="## Welcome&#10;Thanks for taking a moment to help us improve."></textarea>
+                </div>
+                <div class="se-field se-span-2">
+                    <label for="f-footer">Footer (Markdown — shown below the form)</label>
+                    <textarea id="f-footer" name="footer" class="form-input" placeholder="Questions? Contact us at hello@example.com"></textarea>
+                </div>
+                <div class="se-field se-span-2">
+                    <label for="f-thankYou">Thank-you message (shown after submitting)</label>
+                    <textarea id="f-thankYou" name="thankYou" class="form-input" placeholder="Thank you — your response has been recorded."></textarea>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="card mt-3">
+        <div class="card-header"><strong>Invitation email</strong></div>
+        <div class="card-body">
+            <div class="se-grid">
+                <div class="se-field se-span-2">
+                    <label for="f-inviteSubject">Subject</label>
+                    <input id="f-inviteSubject" name="inviteSubject" type="text" class="form-input" placeholder="We would love your feedback">
+                </div>
+                <div class="se-field se-span-2">
+                    <label for="f-inviteBody">Body</label>
+                    <textarea id="f-inviteBody" name="inviteBody" class="form-input" placeholder="Hi {{name}}, please complete our survey: {{link}}"></textarea>
+                    <span class="se-hint">{{name}} and {{link}} are substituted per recipient; {{link}} becomes the button.</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="card mt-3">
+        <div class="card-body" style="display:flex;gap:0.5rem;flex-wrap:wrap;">
+            <button id="save-btn" class="btn btn-primary">Save Survey</button>
+            <button id="cancel-btn" class="btn btn-outline">Cancel</button>
+        </div>
+    </div>
+
+    <div id="send-panel" class="card mt-3" style="display:none;">
+        <div class="card-header"><strong>Invitations</strong></div>
+        <div class="card-body" style="display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;">
+            <button id="send-all-btn" class="btn btn-primary"><span data-icon="send"></span> Send invitations</button>
+            <button id="send-reminder-btn" class="btn btn-outline"><span data-icon="bell"></span> Send reminder to non-responders</button>
+            <span id="send-hint" class="text-muted" style="font-size:0.85rem;"></span>
+        </div>
+    </div>
+
+</div>

package/plugins/surveys/admin/templates/surveys.html

@@ -0,0 +1,25 @@
+<div class="surveys-plugin">
+
+    <!-- Toolbar -->
+    <div class="toolbar mb-3" style="display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;">
+        <h2 style="margin:0;flex:1;">Surveys</h2>
+        <button id="manage-audience" class="btn btn-outline">
+            <span data-icon="users"></span>
+            Audience
+        </button>
+        <button id="new-survey" class="btn btn-primary">
+            <span data-icon="plus"></span>
+            New Survey
+        </button>
+    </div>
+
+    <!-- Surveys table -->
+    <div id="surveys-table"></div>
+
+    <!-- Empty state -->
+    <div id="surveys-empty" style="display:none;text-align:center;padding:3rem 1rem;color:var(--dm-text-muted);">
+        <span data-icon="clipboard-list" style="font-size:3rem;display:block;margin-bottom:1rem;"></span>
+        <p>No surveys yet. Click <strong>New Survey</strong> to create your first campaign.</p>
+    </div>
+
+</div>

package/plugins/surveys/admin/views/audience.js

@@ -0,0 +1,301 @@
+/**
+ * Surveys plugin — shared audience view.
+ *
+ * Manages survey contacts and audience groups, plus an import action that pulls
+ * the audience from the Contacts plugin.
+ *
+ * @module surveys/admin/views/audience
+ */
+
+const BASE = '/api/plugins/surveys';
+
+/**
+ * Authenticated JSON fetch helper. Mirrors plugins/contacts/admin/views/contacts.js.
+ *
+ * @param {string} url
+ * @param {string} [method]
+ * @param {object} [body]
+ * @returns {Promise<*>}
+ */
+async function api(url, method = 'GET', body) {
+    const opts = {method, headers: {'Authorization': 'Bearer ' + (S.get('auth_token') || '')}};
+    if (body !== undefined) {
+        opts.headers['Content-Type'] = 'application/json';
+        opts.body = JSON.stringify(body);
+    }
+    const res = await fetch(url, opts);
+    if (!res.ok) {
+        const err = await res.json().catch(() => ({error: res.statusText}));
+        throw new Error(err.error || res.statusText);
+    }
+    const text = await res.text();
+    return text ? JSON.parse(text) : {};
+}
+
+/**
+ * Escape HTML special characters to prevent XSS in render strings.
+ *
+ * @param {*} str
+ * @returns {string}
+ */
+function esc(str) {
+    return String(str ?? '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+
+export const audienceView = {
+    templateUrl: '/plugins/surveys/admin/templates/audience.html',
+
+    /**
+     * Mount the audience view.
+     *
+     * @param {object} $container - Domma-wrapped container element
+     * @returns {Promise<void>}
+     */
+    async onMount($container) {
+        let contacts = [];
+        let groups = [];
+        let table = null;
+
+        async function load() {
+            const [c, g] = await Promise.all([
+                api(`${BASE}/contacts`).catch(() => []),
+                api(`${BASE}/groups`).catch(() => [])
+            ]);
+            contacts = Array.isArray(c) ? c : [];
+            groups = Array.isArray(g) ? g : [];
+        }
+
+        // ---- Contacts table ----------------------------------------------
+        function buildTable() {
+            const tableEl = $container.find('#audience-table').get(0);
+            const emptyEl = $container.find('#audience-empty').get(0);
+
+            if (!contacts.length) {
+                if (tableEl) tableEl.style.display = 'none';
+                if (emptyEl) emptyEl.style.display = 'block';
+                return;
+            }
+            if (emptyEl) emptyEl.style.display = 'none';
+            if (tableEl) tableEl.style.display = '';
+
+            if (table) {
+                table.setData(contacts);
+            } else {
+                // Render functions return HTML strings; delete uses delegated
+                // listener below (not inline onclick) so we can await E.confirm.
+                table = T.create($container.find('#audience-table').get(0), {
+                    data: contacts,
+                    columns: [
+                        {key: 'name', title: 'Name', sortable: true, render: (v) => esc(v) || '—'},
+                        {
+                            key: 'email', title: 'Email', sortable: true,
+                            render: (v) => v ? `<a href="mailto:${esc(v)}">${esc(v)}</a>` : '—'
+                        },
+                        {
+                            key: 'groups', title: 'Groups', sortable: false,
+                            render: (v) => {
+                                if (!Array.isArray(v) || !v.length) return '—';
+                                return v.map((g) => `<span class="badge badge-primary" style="margin-right:2px;">${esc(g)}</span>`).join('');
+                            }
+                        },
+                        {
+                            key: 'id', title: 'Actions', sortable: false,
+                            render: (id) =>
+                                `<button class="btn btn-sm btn-danger contact-del" data-id="${esc(id)}">` +
+                                `<span data-icon="trash" data-icon-size="14"></span> Delete</button>`
+                        }
+                    ],
+                    emptyMessage: 'No contacts.'
+                });
+
+                const container = $container.find('#audience-table').get(0);
+                if (container) {
+                    container.addEventListener('click', async (e) => {
+                        const btn = e.target.closest('.contact-del');
+                        if (!btn) return;
+                        const id = btn.dataset.id;
+                        const contact = contacts.find((c) => c.id === id);
+                        const ok = await E.confirm(`Delete "${contact?.name || contact?.email || 'this contact'}"?`);
+                        if (!ok) return;
+                        try {
+                            await api(`${BASE}/contacts/${encodeURIComponent(id)}`, 'DELETE');
+                            E.toast('Contact deleted.', {type: 'success'});
+                            await refresh();
+                        } catch (err) {
+                            E.toast(err?.message ?? 'Failed to delete contact.', {type: 'error'});
+                        }
+                    });
+                }
+            }
+            Domma.icons.scan();
+        }
+
+        // ---- Groups panel -------------------------------------------------
+        function buildGroups() {
+            const listEl = $container.find('#groups-list').get(0);
+            if (!listEl) return;
+            while (listEl.firstChild) listEl.removeChild(listEl.firstChild);
+
+            if (!groups.length) {
+                const p = document.createElement('p');
+                p.className = 'text-muted';
+                p.textContent = 'No groups yet.';
+                listEl.appendChild(p);
+                return;
+            }
+            groups.forEach((g) => {
+                const row = document.createElement('div');
+                row.style.cssText = 'padding:0.4rem 0;border-bottom:1px solid var(--dm-border);';
+                const badge = document.createElement('span');
+                badge.className = 'badge badge-primary';
+                badge.textContent = g.name; // textContent — safe
+                row.appendChild(badge);
+                if (g.description) {
+                    const desc = document.createElement('div');
+                    desc.className = 'text-muted';
+                    desc.style.fontSize = '0.8rem';
+                    desc.textContent = g.description;
+                    row.appendChild(desc);
+                }
+                listEl.appendChild(row);
+            });
+        }
+
+        // ---- Add-contact modal (light-DOM projection) ---------------------
+        function openContactModal() {
+            const modal = E.modal({title: 'Add Contact', size: 'md'});
+
+            const wrapper = document.createElement('div');
+            wrapper.style.cssText = 'padding:0.25rem 0 0.5rem;';
+
+            const formContainer = document.createElement('div');
+            wrapper.appendChild(formContainer);
+
+            // Canonical F.create: (blueprintObject, defaultsObject, opts).renderTo(el).
+            // Blueprint is keyed by field name; placeholder/hint live under
+            // formConfig (proven shape — collection-entries.js). We supply our own
+            // buttons (below) and read values from the DOM on save, so the modal's
+            // HTML sanitiser never strips an interactive submit button.
+            F.create(
+                {
+                    name: {type: 'string', label: 'Name', formConfig: {placeholder: 'Full name'}},
+                    email: {
+                        type: 'string', label: 'Email', required: true,
+                        formConfig: {placeholder: 'email@example.com'}
+                    },
+                    groups: {
+                        type: 'multiselect', label: 'Groups',
+                        options: groups.map((g) => ({value: g.name, label: g.name})),
+                        formConfig: {hint: 'Hold Ctrl/Cmd to select multiple.'}
+                    }
+                },
+                {},
+                {layout: 'stacked', columns: 1, showSubmitButton: false}
+            ).renderTo(formContainer);
+
+            const btnWrap = document.createElement('div');
+            btnWrap.style.cssText = 'display:flex;justify-content:flex-end;gap:0.5rem;margin-top:0.75rem;';
+
+            const cancelBtn = document.createElement('button');
+            cancelBtn.className = 'btn btn-outline';
+            cancelBtn.textContent = 'Cancel';
+            cancelBtn.addEventListener('click', () => modal.close());
+
+            const saveBtn = document.createElement('button');
+            saveBtn.className = 'btn btn-primary';
+            saveBtn.textContent = 'Save contact';
+            saveBtn.addEventListener('click', async () => {
+                const nameEl = formContainer.querySelector('[name="name"]');
+                const emailEl = formContainer.querySelector('[name="email"]');
+                const groupsEl = formContainer.querySelector('[name="groups"]');
+                const email = (emailEl?.value ?? '').trim();
+                if (!email) {
+                    E.toast('Email is required.', {type: 'error'});
+                    return;
+                }
+                const selectedGroups = groupsEl
+                    ? Array.from(groupsEl.selectedOptions).map((o) => o.value)
+                    : [];
+                try {
+                    await api(`${BASE}/contacts`, 'POST', {
+                        name: (nameEl?.value ?? '').trim(),
+                        email,
+                        groups: selectedGroups
+                    });
+                    E.toast('Contact added.', {type: 'success'});
+                    modal.close();
+                    await refresh();
+                } catch (err) {
+                    E.toast(err?.message ?? 'Failed to add contact.', {type: 'error'});
+                }
+            });
+
+            btnWrap.appendChild(cancelBtn);
+            btnWrap.appendChild(saveBtn);
+            wrapper.appendChild(btnWrap);
+
+            // Project the assembled DOM into the modal's light DOM so the
+            // interactive buttons survive (E.modal().setContent strips them).
+            modal.element.appendChild(wrapper);
+            modal.open();
+            Domma.icons.scan();
+        }
+
+        // ---- Refresh ------------------------------------------------------
+        async function refresh() {
+            await load();
+            buildTable();
+            buildGroups();
+        }
+
+        // ---- Wiring -------------------------------------------------------
+        const addContactBtn = $container.find('#add-contact').get(0);
+        if (addContactBtn) addContactBtn.addEventListener('click', openContactModal);
+
+        const backBtn = $container.find('#back-surveys').get(0);
+        if (backBtn) backBtn.addEventListener('click', () => { location.hash = '#/plugins/surveys'; });
+
+        const importBtn = $container.find('#import-contacts').get(0);
+        if (importBtn) {
+            importBtn.addEventListener('click', async () => {
+                const ok = await E.confirm('Import all contacts from the Contacts plugin?');
+                if (!ok) return;
+                try {
+                    const res = await api(`${BASE}/import-from-contacts`, 'POST', {});
+                    E.toast(`Imported ${res?.imported ?? 0} contact(s).`, {type: 'success'});
+                    await refresh();
+                } catch (err) {
+                    E.toast(err?.message ?? 'Import failed.', {type: 'error'});
+                }
+            });
+        }
+
+        const addGroupBtn = $container.find('#add-group').get(0);
+        const newGroupInput = $container.find('#new-group-name').get(0);
+        async function addGroup() {
+            const name = (newGroupInput?.value ?? '').trim();
+            if (!name) return;
+            try {
+                await api(`${BASE}/groups`, 'POST', {name});
+                if (newGroupInput) newGroupInput.value = '';
+                E.toast('Group added.', {type: 'success'});
+                await refresh();
+            } catch (err) {
+                E.toast(err?.message ?? 'Failed to add group.', {type: 'error'});
+            }
+        }
+        if (addGroupBtn) addGroupBtn.addEventListener('click', addGroup);
+        if (newGroupInput) {
+            newGroupInput.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') addGroup();
+            });
+        }
+
+        await refresh();
+        Domma.icons.scan();
+    }
+};

package/plugins/surveys/admin/views/results.js

@@ -0,0 +1,172 @@
+/**
+ * Surveys plugin — results / statistics dashboard.
+ *
+ * Renders a response-rate summary, then per-question cards: distribution bars
+ * for choice/rating fields and a tidy answer list for free-text fields. Authed
+ * CSV/JSON export.
+ *
+ * @module surveys/admin/views/results
+ */
+
+import {renderDistribution} from '/plugins/surveys/public/dist-shared.mjs';
+
+const BASE = '/api/plugins/surveys';
+
+/** Authenticated JSON fetch helper. Mirrors plugins/contacts/admin/views/contacts.js. */
+async function api(url, method = 'GET', body) {
+    const opts = {method, headers: {'Authorization': 'Bearer ' + (S.get('auth_token') || '')}};
+    if (body !== undefined) {
+        opts.headers['Content-Type'] = 'application/json';
+        opts.body = JSON.stringify(body);
+    }
+    const res = await fetch(url, opts);
+    if (!res.ok) {
+        const err = await res.json().catch(() => ({error: res.statusText}));
+        throw new Error(err.error || res.statusText);
+    }
+    const text = await res.text();
+    return text ? JSON.parse(text) : {};
+}
+
+/** Escape HTML special characters. */
+function esc(str) {
+    return String(str ?? '')
+        .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+const TYPE_LABEL = {choice: 'Multiple choice', rating: 'Rating', text: 'Free text'};
+
+/** Total answers represented by a field's aggregation. */
+function answerCount(f) {
+    if (f.type === 'text') return Array.isArray(f.responses) ? f.responses.length : 0;
+    return Array.isArray(f.items) ? f.items.reduce((n, i) => n + (i.value || 0), 0) : 0;
+}
+
+export const resultsView = {
+    templateUrl: '/plugins/surveys/admin/templates/results.html',
+
+    async onMount($container) {
+        const root = $container.find('.survey-results-plugin').get(0) || $container.get(0);
+        const hashMatch = location.hash.match(/^#\/plugins\/surveys\/results\/(.+)$/);
+        const slug = hashMatch ? decodeURIComponent(hashMatch[1]) : null;
+        if (!slug) {
+            E.toast('No survey specified.', {type: 'error'});
+            location.hash = '#/plugins/surveys';
+            return;
+        }
+
+        // ---- Load survey (for title/status) + stats -----------------------
+        let survey = null;
+        let stats = null;
+        try {
+            [survey, stats] = await Promise.all([
+                api(`${BASE}/surveys/${encodeURIComponent(slug)}`).catch(() => null),
+                api(`${BASE}/surveys/${encodeURIComponent(slug)}/stats`)
+            ]);
+        } catch (err) {
+            E.toast(err?.message ?? 'Failed to load results.', {type: 'error'});
+            return;
+        }
+
+        const health = stats?.health ?? {invited: 0, completed: 0, responseRate: 0};
+        const invited = health.invited ?? 0;
+        const completed = health.completed ?? 0;
+        const rate = health.responseRate ?? 0;
+        const outstanding = Math.max(0, invited - completed);
+
+        // ---- Header -------------------------------------------------------
+        const titleEl = root.querySelector('#results-title');
+        if (titleEl) titleEl.textContent = `Results — ${survey?.title || slug}`;
+        const subEl = root.querySelector('#results-sub');
+        if (subEl) {
+            const statusBadge = survey?.status ? ` · ${survey.status}` : '';
+            const modeBadge = survey?.mode === 'anonymous' ? ' · anonymous' : '';
+            subEl.textContent = `${completed} of ${invited} invited have responded${statusBadge}${modeBadge}.`;
+        }
+
+        // ---- Summary cards ------------------------------------------------
+        const kpi = (num, label) =>
+            `<div class="card"><div class="card-body"><div class="sr-kpi-num">${esc(num)}</div><div class="sr-kpi-lbl">${esc(label)}</div></div></div>`;
+        $container.find('#summary').html(
+            `<div class="card"><div class="card-body">
+                <div class="sr-rate-num">${esc(rate)}%</div>
+                <div class="sr-kpi-lbl">Response rate</div>
+                <div class="sr-rate-bar"><div class="sr-rate-fill" data-pct="${Math.min(100, rate)}" style="width:${Math.min(100, rate)}%"></div></div>
+            </div></div>` +
+            kpi(invited, 'Invited') +
+            kpi(completed, 'Completed') +
+            kpi(outstanding, 'Awaiting response')
+        );
+
+        // ---- Per-question cards -------------------------------------------
+        const fields = Array.isArray(stats?.fields) ? stats.fields : [];
+        let questionsHtml;
+
+        if (!completed && !fields.some((f) => answerCount(f) > 0)) {
+            questionsHtml = `<div class="card"><div class="card-body"><p class="sr-empty">No responses yet — once people complete the survey, their answers appear here.</p></div></div>`;
+        } else {
+            questionsHtml = fields.map((f, idx) => {
+                const n = answerCount(f);
+                const meta = `${TYPE_LABEL[f.type] || f.type} · ${n} answer${n === 1 ? '' : 's'}`;
+                let body;
+                if (f.type === 'choice' || f.type === 'rating') {
+                    const items = Array.isArray(f.items) ? f.items : [];
+                    const bars = items.length ? renderDistribution(items) : `<p class="sr-empty">No answers.</p>`;
+                    const avg = (f.type === 'rating' && typeof f.average !== 'undefined')
+                        ? `<p class="sr-avg">Average <strong>${esc(f.average)}</strong></p>` : '';
+                    body = avg + bars;
+                } else {
+                    const responses = (Array.isArray(f.responses) ? f.responses : [])
+                        .map((r) => (Array.isArray(r) ? r.join(', ') : r))
+                        .filter((r) => String(r ?? '').trim() !== '');
+                    body = responses.length
+                        ? `<div class="sr-quotes">` + responses.map((r) => `<div class="sr-quote">${esc(r)}</div>`).join('') + `</div>`
+                        : `<p class="sr-empty">No answers.</p>`;
+                }
+                return `<div class="card mb-3"><div class="card-body">
+                    <div class="sr-q-head">
+                        <span class="sr-q-num">${idx + 1}</span>
+                        <span class="sr-q-label">${esc(f.label || f.field)}</span>
+                        <span class="sr-q-meta">${esc(meta)}</span>
+                    </div>
+                    ${body}
+                </div></div>`;
+            }).join('');
+        }
+        $container.find('#questions').html(questionsHtml);
+
+        // Bar widths: set from data-pct via JS so they survive even if the admin's
+        // HTML sanitiser strips the inline width style.
+        root.querySelectorAll('[data-pct]').forEach((el) => {
+            const p = Number(el.getAttribute('data-pct'));
+            el.style.width = `${Math.max(0, Math.min(100, Number.isFinite(p) ? p : 0))}%`;
+        });
+
+        // ---- Authed blob export -------------------------------------------
+        async function exportAs(format) {
+            try {
+                const res = await fetch(`${BASE}/surveys/${encodeURIComponent(slug)}/export?format=${format}`, {
+                    headers: {'Authorization': 'Bearer ' + (S.get('auth_token') || '')}
+                });
+                if (!res.ok) throw new Error(res.statusText);
+                const blob = await res.blob();
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `${slug}.${format}`;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+            } catch (err) {
+                E.toast(err?.message ?? 'Export failed.', {type: 'error'});
+            }
+        }
+
+        root.querySelector('#export-csv')?.addEventListener('click', () => exportAs('csv'));
+        root.querySelector('#export-json')?.addEventListener('click', () => exportAs('json'));
+        root.querySelector('#back-surveys')?.addEventListener('click', () => { location.hash = '#/plugins/surveys'; });
+
+        if (typeof Domma !== 'undefined' && Domma.icons) Domma.icons.scan();
+    }
+};