@explorer02/cfm-survey-sdk 0.2.3 → 0.2.5

package/templates/preview-harness/previewPages.ts

@@ -0,0 +1,298 @@
+/** Preview page HTML bodies keyed by manifest id */
+export type PreviewPageDef = { key: string; title: string; body: string };
+
+const sharedStyles = `
+  .cfm-header { height:var(--cfm-header-height); background:var(--cfm-header-bg); border-bottom:1px solid var(--cfm-header-border); display:flex; align-items:center; padding:0 var(--cfm-header-padding-x); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
+  .cfm-header-logo { width:var(--cfm-header-logo-width); height:var(--cfm-header-logo-height); object-fit:contain; padding:var(--cfm-header-logo-padding); background:var(--cfm-primary); }
+  .cfm-header-company { font-size:var(--cfm-header-company-size); font-weight:var(--cfm-header-company-weight); color:var(--cfm-header-company-color); margin-left:16px; }
+  .cfm-footer { background:var(--cfm-footer-bg); color:var(--cfm-footer-text); padding:var(--cfm-footer-padding-y) var(--cfm-footer-padding-x); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-end; }
+  .cfm-footer-links { display:flex; gap:24px; flex-wrap:wrap; }
+  .cfm-footer-links a { color:var(--cfm-footer-link); text-decoration:none; font-size:12px; }
+  .cfm-progress { height:var(--cfm-progress-height); background:var(--cfm-progress-track); border-radius:999px; overflow:hidden; margin:var(--cfm-sticky-pt) 0 var(--cfm-sticky-pb); }
+  .cfm-progress-fill { height:100%; width:45%; background:var(--cfm-progress-fill); border-radius:999px; }
+  .cfm-mcq-option { border:2px solid #e5e7eb; border-radius:var(--cfm-mcq-border-radius); padding:var(--cfm-mcq-card-padding); margin-bottom:var(--cfm-mcq-option-gap); display:flex; align-items:center; gap:8px; }
+  .cfm-mcq-option.selected { border-color:var(--cfm-mcq-selected-accent); background:var(--cfm-mcq-selected-bg); }
+  .cfm-nps-row { display:flex; gap:var(--cfm-nps-cell-gap); flex-wrap:wrap; }
+  .cfm-nps-cell { width:var(--cfm-nps-cell-size); height:var(--cfm-nps-cell-size); border-radius:var(--cfm-border-radius); background:var(--cfm-nps-track-bar); display:flex; align-items:center; justify-content:center; font-size:14px; }
+  .cfm-nps-cell.selected { background:var(--cfm-nps-selected-fill); border:2px solid var(--cfm-accent); }
+  .cfm-matrix-row { display:flex; align-items:center; padding:8px 0; background:var(--cfm-row-band); margin-bottom:4px; }
+  .cfm-matrix-label { width:var(--cfm-matrix-row-width); flex-shrink:0; padding:0 16px; font-size:14px; font-weight:500; }
+  .cfm-matrix-cells { display:flex; gap:8px; flex:1; justify-content:center; }
+  .cfm-matrix-cell { width:var(--cfm-csat-cell-size); height:var(--cfm-csat-cell-size); border-radius:50%; border:2px solid #d1d5db; }
+  .cfm-matrix-cell.selected { border-color:var(--cfm-csat-ring-color); background:var(--cfm-selected-bg); }
+  .cfm-emoji { font-size:var(--cfm-csat-emoji-size); opacity:var(--cfm-csat-unselected-opacity); }
+  .cfm-emoji.selected { opacity:1; outline:2px solid var(--cfm-csat-ring-color); border-radius:8px; }
+  .cfm-star { color:var(--cfm-star-color); font-size:24px; opacity:var(--cfm-star-unselected-opacity); }
+  .cfm-star.selected { opacity:1; }
+  .cfm-badge { width:40px; height:40px; border-radius:8px; background:var(--cfm-badge-color); color:white; display:flex; align-items:center; justify-content:center; font-weight:600; }
+  .cfm-slider-track { height:8px; background:var(--cfm-slider-track); border-radius:4px; position:relative; margin:24px 0; }
+  .cfm-slider-thumb { width:20px; height:20px; background:var(--cfm-slider-thumb); border-radius:50%; position:absolute; top:-6px; left:60%; }
+  .cfm-tick { width:var(--cfm-slider-tick-size); height:var(--cfm-slider-tick-size); background:var(--cfm-slider-tick); border-radius:4px; font-size:11px; display:flex; align-items:center; justify-content:center; color:white; }
+  .cfm-dropzone { border:2px dashed var(--cfm-upload-accent); border-radius:var(--cfm-border-radius); padding:var(--cfm-upload-padding); text-align:center; color:var(--cfm-text); }
+  .cfm-input { width:100%; height:var(--cfm-input-height); border:1px solid var(--cfm-input-border); border-radius:var(--cfm-input-radius); padding:0 var(--cfm-input-padding); font-family:inherit; }
+  .cfm-input:focus { outline:2px solid var(--cfm-input-focus-ring); }
+  .cfm-rank-item { background:var(--cfm-rank-item-bg); padding:var(--cfm-rank-item-padding); margin-bottom:var(--cfm-rank-item-gap); border-radius:var(--cfm-border-radius); display:flex; align-items:center; gap:12px; }
+  .cfm-rank-badge { background:var(--cfm-rank-badge); color:white; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; }
+  .cfm-handle { color:var(--cfm-rank-handle); cursor:grab; }
+  .cfm-pin { width:var(--cfm-heatmap-pin-size); height:var(--cfm-heatmap-pin-size); background:var(--cfm-heatmap-pin); border:2px solid var(--cfm-heatmap-pin-border, white); border-radius:50%; position:absolute; }
+  .cfm-media { max-width:var(--cfm-media-max-width); border-radius:var(--cfm-media-radius); background:#e5e7eb; height:200px; display:flex; align-items:center; justify-content:center; }
+`;
+
+function wrapPage(title: string, body: string): string {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${title} — CFM Preview</title>
+  <link rel="stylesheet" href="../shared/survey-theme.css" />
+  <style>${sharedStyles}</style>
+</head>
+<body>
+  <div class="cfm-preview-root">${body}</div>
+  <script src="../shared/preview-bridge.inline.js"></script>
+</body>
+</html>`;
+}
+
+export const PREVIEW_PAGE_DEFS: PreviewPageDef[] = [
+  {
+    key: 'header',
+    title: 'Header',
+    body: `<header class="cfm-header">
+      <img data-cfm-logo class="cfm-header-logo" src="" alt="Logo" style="display:none" />
+      <span data-cfm-company class="cfm-header-company">Company Name</span>
+    </header>`,
+  },
+  {
+    key: 'footer',
+    title: 'Footer',
+    body: `<footer class="cfm-footer">
+      <div>
+        <img data-cfm-logo style="width:var(--cfm-footer-logo-width);height:var(--cfm-footer-logo-height);object-fit:contain;display:none" src="" alt="" />
+        <p data-cfm-copyright style="font-size:12px;margin-top:8px">© Company</p>
+      </div>
+      <nav data-cfm-footer-links class="cfm-footer-links"></nav>
+    </footer>`,
+  },
+  {
+    key: 'chrome',
+    title: 'Chrome',
+    body: `<header class="cfm-header">
+      <img data-cfm-logo class="cfm-header-logo" src="" alt="" style="display:none" />
+      <span data-cfm-company class="cfm-header-company">Company</span>
+    </header>
+    <div class="cfm-progress"><div class="cfm-progress-fill"></div></div>
+    <p data-cfm-survey-title style="font-size:20px;font-weight:var(--cfm-heading-weight);margin:16px 0">Survey Title</p>
+    <div style="display:flex;gap:12px;margin-top:24px">
+      <button data-cfm-btn-back class="cfm-btn-back">Back</button>
+      <button data-cfm-btn-next class="cfm-btn-primary">Next</button>
+    </div>`,
+  },
+  {
+    key: 'survey_page',
+    title: 'Survey Page',
+    body: `<header class="cfm-header">
+      <img data-cfm-logo class="cfm-header-logo" src="" alt="" style="display:none" />
+      <span data-cfm-company class="cfm-header-company">Company</span>
+    </header>
+    <div data-cfm-progress class="cfm-progress"><div class="cfm-progress-fill" style="width:35%"></div></div>
+    <div data-cfm-language style="text-align:right;margin:16px 0"><select class="cfm-input" style="width:auto"><option>English</option><option>Deutsch</option></select></div>
+    <p style="font-weight:600"><span data-cfm-question-number>1.</span> Sample question <span data-cfm-required style="color:red">*</span></p>
+    <div class="cfm-mcq-option selected"><span>◉</span> Option A</div>
+    <p style="font-weight:600;margin-top:24px"><span data-cfm-question-number>2.</span> NPS question</p>
+    <div class="cfm-nps-row">${Array.from({ length: 11 }, (_, i) => `<div class="cfm-nps-cell">${i}</div>`).join('')}</div>
+    <div style="display:flex;gap:12px;margin-top:24px">
+      <button data-cfm-btn-back class="cfm-btn-back">Back</button>
+      <button data-cfm-btn-next class="cfm-btn-primary">Next</button>
+    </div>
+    <footer class="cfm-footer" style="margin-top:32px">
+      <p data-cfm-copyright>© Company</p>
+      <nav data-cfm-footer-links class="cfm-footer-links"></nav>
+    </footer>`,
+  },
+  {
+    key: 'intro',
+    title: 'Intro',
+    body: `<h1 data-cfm-survey-title style="font-size:28px;font-weight:var(--cfm-heading-weight)">Welcome</h1>
+    <p style="margin:16px 0;color:#6b7280">Please take a few minutes to share your feedback.</p>
+    <button class="cfm-btn-primary">Start Survey</button>`,
+  },
+  {
+    key: 'end',
+    title: 'End',
+    body: `<h1 style="font-size:28px;font-weight:var(--cfm-heading-weight)">Thank you!</h1>
+    <p data-cfm-thank-you style="margin:16px 0">Thank you for your feedback.</p>`,
+  },
+  {
+    key: 'MCQ_single',
+    title: 'MCQ Single',
+    body: `<p style="font-weight:600;margin-bottom:16px">1. Select one option</p>
+    <div data-cfm-mcq-style="outlined">
+      <div class="cfm-mcq-option selected"><span>◉</span> Option A</div>
+      <div class="cfm-mcq-option"><span>○</span> Option B</div>
+      <div class="cfm-mcq-option"><span>○</span> Option C</div>
+    </div>`,
+  },
+  {
+    key: 'MCQ_multiple',
+    title: 'MCQ Multiple',
+    body: `<p style="font-weight:600;margin-bottom:16px">Select all that apply</p>
+    <div class="cfm-mcq-option selected"><span>☑</span> Option A</div>
+    <div class="cfm-mcq-option"><span>☐</span> Option B</div>`,
+  },
+  {
+    key: 'TEXTFIELD_short',
+    title: 'Text Short',
+    body: `<p style="font-weight:600;margin-bottom:8px">Your name</p>
+    <input class="cfm-input" placeholder="Type here..." />`,
+  },
+  {
+    key: 'TEXTFIELD_long',
+    title: 'Text Long',
+    body: `<p style="font-weight:600;margin-bottom:8px">Comments</p>
+    <textarea class="cfm-input" style="height:120px;padding:12px" placeholder="Type your response..."></textarea>`,
+  },
+  {
+    key: 'NPS_SCALE',
+    title: 'NPS',
+    body: `<p style="font-weight:600;margin-bottom:8px">How likely are you to recommend us?</p>
+    <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--cfm-nps-label-color);margin-bottom:8px"><span>Not likely</span><span>Very likely</span></div>
+    <div class="cfm-nps-row">${Array.from({ length: 11 }, (_, i) => `<div class="cfm-nps-cell${i === 8 ? ' selected' : ''}">${i}</div>`).join('')}</div>`,
+  },
+  {
+    key: 'CFM_likert',
+    title: 'CFM Likert',
+    body: matrixPreview('Statement item 1', 'radio'),
+  },
+  {
+    key: 'CFM_bipolar',
+    title: 'CFM Bipolar',
+    body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width)">Left statement</div><div class="cfm-matrix-cells">${cells(5)}</div><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width);text-align:right">Right statement</div></div>`,
+  },
+  {
+    key: 'CFM_transpose',
+    title: 'CFM Transpose',
+    body: matrixPreview('Scale item (transposed row)', 'checkbox'),
+  },
+  {
+    key: 'CFM_carousel',
+    title: 'CFM Carousel',
+    body: `${matrixPreview('Row 1 of 3', 'radio')}<div style="text-align:center;margin-top:12px"><span style="color:var(--cfm-matrix-carousel-dot)">●</span> ○ ○</div>`,
+  },
+  {
+    key: 'CFM_dropdown',
+    title: 'CFM Dropdown',
+    body: `<div class="cfm-matrix-label" style="width:100%;margin-bottom:8px">Statement 1</div><select class="cfm-input"><option>Select...</option><option>Col 1</option><option>Col 2</option></select>`,
+  },
+  {
+    key: 'CSAT_emoji',
+    title: 'CSAT Emoji',
+    body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">How satisfied?</div><div class="cfm-matrix-cells"><span class="cfm-emoji selected">😞</span><span class="cfm-emoji">😐</span><span class="cfm-emoji">🙂</span><span class="cfm-emoji">😊</span><span class="cfm-emoji">🤩</span></div></div>`,
+  },
+  {
+    key: 'CSAT_star',
+    title: 'CSAT Star',
+    body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Rate us</div><div class="cfm-matrix-cells"><span class="cfm-star selected">★</span><span class="cfm-star selected">★</span><span class="cfm-star">★</span><span class="cfm-star">★</span><span class="cfm-star">★</span></div></div>`,
+  },
+  {
+    key: 'CSAT_numbered',
+    title: 'CSAT Numbered',
+    body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Score</div><div class="cfm-matrix-cells"><div class="cfm-badge">1</div><div class="cfm-badge">2</div><div class="cfm-badge" style="opacity:1">3</div><div class="cfm-badge">4</div><div class="cfm-badge">5</div></div></div>`,
+  },
+  {
+    key: 'CSAT_graphics',
+    title: 'CSAT Graphics',
+    body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Slider row</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div></div></div>`,
+  },
+  {
+    key: 'CSAT_carousel',
+    title: 'CSAT Carousel',
+    body: `${matrixPreview('Carousel row', 'emoji')}<div style="text-align:center"><span style="color:var(--cfm-csat-accent)">●</span> ○</div>`,
+  },
+  {
+    key: 'CSAT_dropdown',
+    title: 'CSAT Dropdown',
+    body: `<div class="cfm-matrix-label">Statement</div><select class="cfm-input" style="margin-top:8px"><option>Choose rating...</option></select>`,
+  },
+  {
+    key: 'RATING_star',
+    title: 'Rating Star',
+    body: `<div class="cfm-matrix-cells" style="justify-content:flex-start;padding:16px"><span class="cfm-star selected">★</span><span class="cfm-star selected">★</span><span class="cfm-star">★</span><span class="cfm-star">★</span><span class="cfm-star">★</span></div>`,
+  },
+  {
+    key: 'RATING_numbered',
+    title: 'Rating Numbered',
+    body: `<div class="cfm-matrix-cells" style="padding:16px">${[1, 2, 3, 4, 5].map((n) => `<div class="cfm-badge">${n}</div>`).join('')}</div>`,
+  },
+  {
+    key: 'RATING_radio',
+    title: 'Rating Radio',
+    body: matrixPreview('Recommend to a friend', 'radio'),
+  },
+  {
+    key: 'RATING_emoji',
+    title: 'Rating Emoji',
+    body: `<div class="cfm-matrix-cells" style="padding:16px"><span class="cfm-emoji">🙂</span><span class="cfm-emoji selected">😊</span><span class="cfm-emoji">🤩</span></div>`,
+  },
+  {
+    key: 'RATING_graphics',
+    title: 'Rating Graphics',
+    body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Experience</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div></div></div>`,
+  },
+  {
+    key: 'RATING_slider',
+    title: 'Rating Slider',
+    body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Rate on slider</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div></div></div>`,
+  },
+  {
+    key: 'SLIDER_matrix',
+    title: 'Slider Matrix',
+    body: `<div style="display:flex;gap:4px;margin-bottom:16px;padding-left:var(--cfm-matrix-row-width)">${[0, 1, 2, 3, 4, 5].map((n) => `<div class="cfm-tick">${n}</div>`).join('')}</div>
+    <div class="cfm-matrix-row"><div class="cfm-matrix-label">Statement 1</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div></div></div>`,
+  },
+  {
+    key: 'FILE_UPLOAD',
+    title: 'File Upload',
+    body: `<div data-cfm-dropzone-style="dashed" class="cfm-dropzone">Drop files here or click to upload</div>`,
+  },
+  {
+    key: 'TEXT_AND_MEDIA',
+    title: 'Text & Media',
+    body: `<div class="cfm-media">Media preview</div><p style="font-size:var(--cfm-media-caption-size);color:var(--cfm-media-caption-color);margin-top:8px">Caption text</p>`,
+  },
+  {
+    key: 'HEATMAP',
+    title: 'Heatmap',
+    body: `<div style="position:relative;background:#e5e7eb;height:240px;border-radius:var(--cfm-border-radius)"><div class="cfm-pin" style="top:40%;left:55%"></div><div class="cfm-pin" style="top:60%;left:30%"></div></div>`,
+  },
+  {
+    key: 'RANK_drag',
+    title: 'Rank Drag',
+    body: `<div class="cfm-rank-item"><span class="cfm-handle">⠿</span><span class="cfm-rank-badge">1</span> Item A</div><div class="cfm-rank-item"><span class="cfm-handle">⠿</span><span class="cfm-rank-badge">2</span> Item B</div>`,
+  },
+  {
+    key: 'RANK_dropdown',
+    title: 'Rank Dropdown',
+    body: `<div style="display:flex;align-items:center;gap:12px;margin-bottom:8px"><span>Item A</span><select class="cfm-input" style="width:80px"><option>1</option><option>2</option></select></div>`,
+  },
+];
+
+function cells(n: number): string {
+  return Array.from({ length: n }, (_, i) =>
+    `<div class="cfm-matrix-cell${i === 2 ? ' selected' : ''}"></div>`,
+  ).join('');
+}
+
+function matrixPreview(label: string, mode: string): string {
+  if (mode === 'emoji') {
+    return `<div class="cfm-matrix-row"><div class="cfm-matrix-label">${label}</div><div class="cfm-matrix-cells"><span class="cfm-emoji">😞</span><span class="cfm-emoji selected">🙂</span><span class="cfm-emoji">😊</span></div></div>`;
+  }
+  return `<div class="cfm-matrix-row"><div class="cfm-matrix-label">${label}</div><div class="cfm-matrix-cells">${cells(5)}</div></div>`;
+}
+
+export function buildPreviewHtml(def: PreviewPageDef): string {
+  return wrapPage(def.title, def.body);
+}
+
+export const PREVIEW_KEYS = PREVIEW_PAGE_DEFS.map((d) => d.key);

package/templates/preview-harness/vite-app/src/PreviewConfigContext.tsx

@@ -0,0 +1,67 @@
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
+
+export type PreviewStatePatch = {
+  multiStatement?: boolean;
+  textfieldPlaceholder?: string;
+  npsButtonStyle?: string;
+  mcqOptionStyle?: string;
+  dropzoneStyle?: string;
+  heatmapPreviewPin?: { x: number; y: number };
+  rankVariant?: 'drag' | 'dropdown';
+  hintMinText?: string;
+  hintMaxText?: string;
+};
+
+export const PREVIEW_BRIDGE_SNAPSHOT = 'CFM_UI_CONFIG_SNAPSHOT';
+export const PREVIEW_BRIDGE_DELTA = 'CFM_UI_CONFIG_DELTA';
+
+type PreviewConfigContextValue = {
+  previewState: PreviewStatePatch;
+};
+
+const PreviewConfigContext = createContext<PreviewConfigContextValue>({
+  previewState: {},
+});
+
+export function PreviewConfigProvider({ children }: { children: ReactNode }) {
+  const [previewState, setPreviewState] = useState<PreviewStatePatch>({});
+
+  useEffect(() => {
+    const handler = (event: MessageEvent) => {
+      const data = event.data;
+      if (!data?.type) return;
+      if (data.type !== PREVIEW_BRIDGE_SNAPSHOT && data.type !== PREVIEW_BRIDGE_DELTA) return;
+      if (data.contentPatch?.previewState) {
+        setPreviewState((prev) => ({ ...prev, ...data.contentPatch.previewState }));
+      }
+      if (data.contentPatch?.domAttributes) {
+        const root = document.documentElement;
+        for (const [key, value] of Object.entries(data.contentPatch.domAttributes)) {
+          root.setAttribute(key, value as string);
+        }
+      }
+    };
+
+    window.addEventListener('message', handler);
+    try {
+      const channel = new BroadcastChannel('cfm-wizard-preview');
+      channel.addEventListener('message', handler);
+      return () => {
+        window.removeEventListener('message', handler);
+        channel.close();
+      };
+    } catch {
+      return () => window.removeEventListener('message', handler);
+    }
+  }, []);
+
+  return (
+    <PreviewConfigContext.Provider value={{ previewState }}>
+      {children}
+    </PreviewConfigContext.Provider>
+  );
+}
+
+export function usePreviewConfig() {
+  return useContext(PreviewConfigContext);
+}

package/templates/preview-harness/vite-app/src/QuestionPreview.tsx

@@ -0,0 +1,122 @@
+import { useMemo, useState } from 'react';
+import type { AnswerValue, SurveyQuestion } from '@explorer02/cfm-survey-sdk';
+import Question from '@/components/Question';
+import { PreviewConfigProvider, usePreviewConfig } from './PreviewConfigContext';
+
+type QuestionPreviewProps = {
+  question: SurveyQuestion;
+  initialValue?: AnswerValue;
+};
+
+function resolveNumberLabelColor(index: number): string {
+  const mode = getComputedStyle(document.documentElement)
+    .getPropertyValue('--cfm-number-label-mode')
+    .trim();
+  if (mode === 'monochrome') {
+    return getComputedStyle(document.documentElement)
+      .getPropertyValue('--cfm-number-mono-color')
+      .trim() || 'var(--cfm-primary)';
+  }
+  if (mode === 'individual') {
+    return (
+      getComputedStyle(document.documentElement)
+        .getPropertyValue(`--cfm-number-color-${index}`)
+        .trim() || '#9CA3AF'
+    );
+  }
+  return '';
+}
+
+function QuestionPreviewInner({ question, initialValue }: QuestionPreviewProps) {
+  const { previewState } = usePreviewConfig();
+  const [value, setValue] = useState<AnswerValue | undefined>(initialValue);
+
+  const mergedQuestion = useMemo(() => {
+    let q = { ...question } as SurveyQuestion;
+
+    if (previewState.textfieldPlaceholder && q.type === 'TEXTFIELD') {
+      q = { ...q, placeholder: previewState.textfieldPlaceholder };
+    }
+
+    if (previewState.npsButtonStyle && q.type === 'NPS_SCALE') {
+      const style = previewState.npsButtonStyle;
+      q = {
+        ...q,
+        buttonStyle: style === 'pill' ? 'numbered' : (style as 'standard' | 'numbered'),
+      };
+    }
+
+    if (previewState.hintMinText || previewState.hintMaxText) {
+      if (q.type === 'NPS_SCALE') {
+        q = {
+          ...q,
+          minLabel: previewState.hintMinText ?? q.minLabel,
+          maxLabel: previewState.hintMaxText ?? q.maxLabel,
+        };
+      }
+      if (q.type === 'SLIDER_MATRIX') {
+        q = {
+          ...q,
+          scaleAnchorLabels: [
+            previewState.hintMinText ?? q.scaleAnchorLabels?.[0] ?? '',
+            previewState.hintMaxText ?? q.scaleAnchorLabels?.[1] ?? '',
+          ],
+        };
+      }
+    }
+
+    if (previewState.multiStatement && 'statementRows' in q && q.statementRows.length === 1) {
+      const extra = {
+        id: 'r2',
+        statementText: 'Second statement row',
+      };
+      q = { ...q, statementRows: [...q.statementRows, extra] } as typeof q;
+    }
+
+    if (previewState.rankVariant === 'drag' && q.type === 'RANK_ORDER') {
+      q = { ...q, interactionMode: 'dragAndDrop', optionDisplay: 'textOnly' };
+    }
+    if (previewState.rankVariant === 'dropdown' && q.type === 'RANK_ORDER') {
+      q = { ...q, interactionMode: 'dropdown', optionDisplay: 'textOnly' };
+    }
+
+    return q;
+  }, [question, previewState]);
+
+  const heatmapInitial =
+    previewState.heatmapPreviewPin && mergedQuestion.type === 'HEATMAP'
+      ? [
+          {
+            id: 'preview-pin',
+            x: previewState.heatmapPreviewPin.x,
+            y: previewState.heatmapPreviewPin.y,
+          },
+        ]
+      : initialValue;
+
+  return (
+    <div
+      className="cfm-question-card mx-auto max-w-3xl p-6"
+      style={{ fontFamily: 'var(--cfm-font-family)' }}
+      data-cfm-question-area
+    >
+      <Question
+        question={mergedQuestion}
+        selectedValue={heatmapInitial ?? value}
+        allAnswers={{}}
+        allQuestions={[mergedQuestion]}
+        onSelect={setValue}
+      />
+    </div>
+  );
+}
+
+export function QuestionPreview(props: QuestionPreviewProps) {
+  return (
+    <PreviewConfigProvider>
+      <QuestionPreviewInner {...props} />
+    </PreviewConfigProvider>
+  );
+}
+
+export { resolveNumberLabelColor };

package/templates/preview-harness/vite-app/src/SurveyPagePreview.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+import type { AnswerValue } from '@explorer02/cfm-survey-sdk';
+import SurveyStickyChrome from '@/components/SurveyStickyChrome';
+import LanguageSelector from '@/components/LanguageSelector';
+import Question from '@/components/Question';
+import Footer from '@/components/Footer';
+import { FIXTURE_SURVEY_PAGE_NPS, PREVIEW_LANGUAGES } from './fixtures/questions';
+
+export function SurveyPagePreview() {
+  const [lang, setLang] = useState('en');
+  const [answer, setAnswer] = useState<AnswerValue | undefined>();
+
+  return (
+    <div
+      className="flex min-h-screen flex-col"
+      style={{
+        background: 'var(--cfm-background)',
+        fontFamily: 'var(--cfm-font-family)',
+      }}
+    >
+      <SurveyStickyChrome progressPercentage={75} />
+
+      <main
+        className="mx-auto w-full flex-1 px-4 py-10 sm:px-6 lg:px-8"
+        style={{ maxWidth: 'var(--cfm-max-width)' }}
+      >
+        <LanguageSelector
+          languages={PREVIEW_LANGUAGES}
+          selectedLanguage={lang}
+          onChange={setLang}
+        />
+
+        <div className="space-y-12">
+          <Question
+            question={FIXTURE_SURVEY_PAGE_NPS}
+            selectedValue={answer}
+            allAnswers={answer ? { [FIXTURE_SURVEY_PAGE_NPS.id]: answer } : {}}
+            allQuestions={[FIXTURE_SURVEY_PAGE_NPS]}
+            onSelect={setAnswer}
+          />
+        </div>
+
+        <div className="mt-8 flex items-center justify-start gap-4">
+          <button
+            data-cfm-btn-back
+            type="button"
+            className="border px-6 py-2 text-sm font-semibold transition-all hover:opacity-90"
+            style={{
+              borderColor: 'var(--cfm-primary)',
+              color: 'var(--cfm-primary)',
+              backgroundColor: 'transparent',
+              borderRadius: 'var(--cfm-border-radius)',
+            }}
+          >
+            Back
+          </button>
+          <button
+            data-cfm-btn-next
+            type="button"
+            className="px-6 py-2 text-sm font-semibold transition-opacity hover:opacity-90"
+            style={{
+              backgroundColor: 'var(--cfm-primary)',
+              color: 'var(--cfm-button-text)',
+              borderRadius: 'var(--cfm-border-radius)',
+            }}
+          >
+            Submit
+          </button>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}