@explorer02/cfm-survey-sdk 0.2.3 → 0.2.5

package/templates/preview-harness/vite-app/src/fixtures/questions.ts

@@ -0,0 +1,311 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { SpecialPage, SurveyQuestion } from '@explorer02/cfm-survey-sdk';
+
+const base = (partial: Partial<SurveyQuestion> & { type: SurveyQuestion['type'] }): SurveyQuestion =>
+  ({
+    id: 'preview-q',
+    questionText: 'How satisfied are you with our service?',
+    required: true,
+    questionNumber: 1,
+    options: [],
+    ...partial,
+  }) as SurveyQuestion;
+
+const MATRIX_ROWS_MULTI = [
+  { id: 'r1', statementText: 'The product is easy to use' },
+  { id: 'r2', statementText: 'Support was helpful' },
+];
+
+export const FIXTURE_INTRO: SpecialPage = {
+  id: 'preview-intro',
+  header: 'Welcome to our survey',
+  description: '<p>Please take a few minutes to share your feedback.</p>',
+  ctaLabel: 'Start Survey',
+};
+
+export const FIXTURE_END: SpecialPage = {
+  id: 'preview-end',
+  header: 'Thank you!',
+  description: '<p>We appreciate your time.</p>',
+};
+
+export const FIXTURE_MCQ_SINGLE = base({
+  type: 'MCQ',
+  selectionMode: 'single',
+  options: [
+    { id: 'a', optionLabel: 'Very satisfied', value: 'a' },
+    { id: 'b', optionLabel: 'Satisfied', value: 'b' },
+    { id: 'c', optionLabel: 'Neutral', value: 'c' },
+  ],
+  defaultOptionIds: ['a'],
+});
+
+export const FIXTURE_MCQ_MULTIPLE = base({
+  type: 'MCQ',
+  selectionMode: 'multiple',
+  minSelections: 1,
+  maxSelections: 2,
+  options: [
+    { id: 'a', optionLabel: 'Fast delivery', value: 'a' },
+    { id: 'b', optionLabel: 'Great support', value: 'b' },
+    { id: 'c', optionLabel: 'Easy to use', value: 'c' },
+  ],
+});
+
+export const FIXTURE_NPS = base({
+  type: 'NPS_SCALE',
+  buttonStyle: 'standard',
+  minLabel: 'Not at all likely',
+  maxLabel: 'Extremely likely',
+  options: Array.from({ length: 11 }, (_, i) => ({
+    id: `nps-${i}`,
+    optionLabel: String(i),
+    value: i,
+  })),
+});
+
+export const FIXTURE_SURVEY_PAGE_NPS = base({
+  id: 'preview-survey-nps',
+  type: 'NPS_SCALE',
+  questionNumber: 6,
+  buttonStyle: 'standard',
+  questionText:
+    'Based on your experience, how likely are you to recommend [Company/Product/Service] to your friends and family?',
+  minLabel: 'Not Likely At All',
+  maxLabel: 'Extremely Likely',
+  options: Array.from({ length: 11 }, (_, i) => ({
+    id: `nps-${i}`,
+    optionLabel: String(i),
+    value: i,
+  })),
+});
+
+export const PREVIEW_LANGUAGES = [
+  { code: 'en', name: 'English' },
+  { code: 'de', name: 'Deutsch' },
+];
+
+export const FIXTURE_TEXT_SHORT = base({
+  type: 'TEXTFIELD',
+  textFieldType: 'short',
+  placeholder: 'Your answer',
+});
+
+export const FIXTURE_TEXT_LONG = base({
+  type: 'TEXTFIELD',
+  textFieldType: 'long',
+  placeholder: 'Tell us more…',
+});
+
+export const FIXTURE_CFM_LIKERT = base({
+  type: 'CFM_MATRIX',
+  statementRows: MATRIX_ROWS_MULTI,
+  scaleColumns: [
+    { id: 'c1', label: 'Strongly disagree' },
+    { id: 'c2', label: 'Disagree' },
+    { id: 'c3', label: 'Neutral' },
+    { id: 'c4', label: 'Agree' },
+    { id: 'c5', label: 'Strongly agree' },
+  ],
+});
+
+export const FIXTURE_CFM_BIPOLAR = base({
+  type: 'CFM_MATRIX',
+  statementLayout: 'bipolar',
+  showColumnHeaders: false,
+  statementRows: [
+    {
+      id: 'r1',
+      statementText: 'Difficult',
+      oppositeStatementText: 'Easy',
+    },
+  ],
+  scaleColumns: Array.from({ length: 5 }, (_, i) => ({ id: `c${i}`, label: '' })),
+  scaleAnchorLabels: ['Hard', '', '', '', 'Easy'],
+});
+
+export const FIXTURE_CSAT_EMOJI = base({
+  type: 'CSAT_MATRIX',
+  displayStyle: 'emoji',
+  statementRows: [{ id: 'r1', statementText: 'How do you feel?' }],
+  scaleColumns: [
+    { id: 'c1', label: '😞' },
+    { id: 'c2', label: '😐' },
+    { id: 'c3', label: '🙂' },
+    { id: 'c4', label: '😊' },
+    { id: 'c5', label: '🤩' },
+  ],
+  scaleAnchorLabels: ['Very unhappy', '', '', '', 'Very happy'],
+});
+
+export const FIXTURE_CSAT_STAR = base({
+  type: 'CSAT_MATRIX',
+  displayStyle: 'star',
+  statementRows: [{ id: 'r1', statementText: 'Rate our app' }],
+  scaleColumns: Array.from({ length: 5 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+});
+
+export const FIXTURE_CSAT_NUMBERED = base({
+  type: 'CSAT_MATRIX',
+  displayStyle: 'numbered',
+  statementRows: [{ id: 'r1', statementText: 'Rate support' }],
+  scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+});
+
+export const FIXTURE_CSAT_GRAPHICS = base({
+  type: 'CSAT_MATRIX',
+  displayStyle: 'graphics',
+  statementRows: [{ id: 'r1', statementText: 'Experience quality' }],
+  scaleColumns: [
+    { id: 'c1', label: 'Low' },
+    { id: 'c2', label: 'Mid' },
+    { id: 'c3', label: 'High' },
+  ],
+});
+
+export const FIXTURE_CSAT_CAROUSEL = base({
+  type: 'CSAT_MATRIX',
+  displayStyle: 'star',
+  gridLayout: 'carousel',
+  statementRows: [{ id: 'r1', statementText: 'Overall experience' }],
+  scaleColumns: Array.from({ length: 5 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+});
+
+export const FIXTURE_CSAT_DROPDOWN = base({
+  type: 'CSAT_MATRIX',
+  displayStyle: 'dropdown',
+  statementRows: [{ id: 'r1', statementText: 'Select your rating' }],
+  scaleColumns: [
+    { id: 'c1', label: 'Poor' },
+    { id: 'c2', label: 'Fair' },
+    { id: 'c3', label: 'Good' },
+    { id: 'c4', label: 'Excellent' },
+  ],
+});
+
+export const FIXTURE_RATING_STAR = base({
+  type: 'RATING_MATRIX',
+  displayStyle: 'star',
+  statementRows: [{ id: 'r1', statementText: 'Overall rating' }],
+  scaleColumns: Array.from({ length: 5 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+});
+
+export const FIXTURE_RATING_NUMBERED = base({
+  type: 'RATING_MATRIX',
+  displayStyle: 'numbered',
+  statementRows: [{ id: 'r1', statementText: 'Value for money' }],
+  scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+});
+
+export const FIXTURE_RATING_RADIO = base({
+  type: 'RATING_MATRIX',
+  displayStyle: 'standard',
+  statementRows: [{ id: 'r1', statementText: 'Recommend to a friend' }],
+  scaleColumns: Array.from({ length: 5 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+});
+
+export const FIXTURE_RATING_EMOJI = base({
+  type: 'RATING_MATRIX',
+  displayStyle: 'emoji',
+  statementRows: [{ id: 'r1', statementText: 'How do you feel?' }],
+  scaleColumns: Array.from({ length: 5 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+});
+
+export const FIXTURE_RATING_GRAPHICS = base({
+  type: 'RATING_MATRIX',
+  displayStyle: 'graphics',
+  statementRows: [{ id: 'r1', statementText: 'Experience quality' }],
+  scaleColumns: [
+    { id: 'c1', label: 'Low' },
+    { id: 'c2', label: 'Mid' },
+    { id: 'c3', label: 'High' },
+  ],
+});
+
+export const FIXTURE_RATING_SLIDER = base({
+  type: 'RATING_MATRIX',
+  displayStyle: 'graphics',
+  statementRows: [{ id: 'r1', statementText: 'Rate on slider' }],
+  scaleColumns: Array.from({ length: 5 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+  scaleAnchorLabels: ['Low', 'High'],
+});
+
+export const FIXTURE_SLIDER = base({
+  type: 'SLIDER_MATRIX',
+  statementRows: [
+    { id: 'r1', statementText: 'Ease of use', min: 0, max: 10, step: 1 },
+    { id: 'r2', statementText: 'Speed', min: 0, max: 10, step: 1 },
+  ],
+  scaleAnchorLabels: ['Not at all', 'Extremely'],
+  ticks: {
+    count: 11,
+    marks: Array.from({ length: 11 }, (_, i) => ({
+      tickPosition: i,
+      tickLabel: String(i),
+    })),
+  },
+  enableInputBox: false,
+  displayValues: false,
+  hasNotApplicableOption: false,
+  sliderStyle: 'standard',
+});
+
+export const FIXTURE_FILE_UPLOAD = base({
+  type: 'FILE_UPLOAD',
+  maxFileCount: 1,
+});
+
+export const FIXTURE_HEATMAP = base({
+  type: 'HEATMAP',
+  maxClicksAllowed: 3,
+  imageUrl: 'https://placehold.co/600x400/e5e7eb/6b7280?text=Heatmap+Image',
+});
+
+export const FIXTURE_RANK_DRAG = base({
+  type: 'RANK_ORDER',
+  interactionMode: 'dragAndDrop',
+  optionDisplay: 'textOnly',
+  options: [
+    { id: 'o1', optionLabel: 'Speed' },
+    { id: 'o2', optionLabel: 'Price' },
+    { id: 'o3', optionLabel: 'Quality' },
+  ],
+});
+
+export const FIXTURE_RANK_DROPDOWN = base({
+  type: 'RANK_ORDER',
+  interactionMode: 'dropdown',
+  optionDisplay: 'textOnly',
+  options: [
+    { id: 'o1', optionLabel: 'Feature A' },
+    { id: 'o2', optionLabel: 'Feature B' },
+    { id: 'o3', optionLabel: 'Feature C' },
+  ],
+});
+
+export const PREVIEW_FIXTURES: Record<string, SurveyQuestion | null> = {
+  MCQ_single: FIXTURE_MCQ_SINGLE,
+  MCQ_multiple: FIXTURE_MCQ_MULTIPLE,
+  TEXTFIELD_short: FIXTURE_TEXT_SHORT,
+  TEXTFIELD_long: FIXTURE_TEXT_LONG,
+  NPS_SCALE: FIXTURE_NPS,
+  CFM_likert: FIXTURE_CFM_LIKERT,
+  CFM_bipolar: FIXTURE_CFM_BIPOLAR,
+  CSAT_emoji: FIXTURE_CSAT_EMOJI,
+  CSAT_star: FIXTURE_CSAT_STAR,
+  CSAT_numbered: FIXTURE_CSAT_NUMBERED,
+  CSAT_graphics: FIXTURE_CSAT_GRAPHICS,
+  CSAT_carousel: FIXTURE_CSAT_CAROUSEL,
+  CSAT_dropdown: FIXTURE_CSAT_DROPDOWN,
+  RATING_star: FIXTURE_RATING_STAR,
+  RATING_numbered: FIXTURE_RATING_NUMBERED,
+  RATING_radio: FIXTURE_RATING_RADIO,
+  RATING_emoji: FIXTURE_RATING_EMOJI,
+  RATING_graphics: FIXTURE_RATING_GRAPHICS,
+  RATING_slider: FIXTURE_RATING_SLIDER,
+  SLIDER_matrix: FIXTURE_SLIDER,
+  FILE_UPLOAD: FIXTURE_FILE_UPLOAD,
+  HEATMAP: FIXTURE_HEATMAP,
+  RANK_drag: FIXTURE_RANK_DRAG,
+  RANK_dropdown: FIXTURE_RANK_DROPDOWN,
+};

package/templates/preview-harness/vite-app/src/globals.css

@@ -0,0 +1,16 @@
+@import "tailwindcss";
+@import "./survey-theme.css";
+@import "./preview-live-overrides.css";
+
+@source "../agent/src/**/*.{ts,tsx}";
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  color: #262626;
+  background-color: #ffffff;
+}
+
+#root {
+  min-height: 100vh;
+}

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

@@ -0,0 +1,9 @@
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './globals.css';
+
+export function mountPreview(ui: React.ReactNode): void {
+  const el = document.getElementById('root');
+  if (!el) throw new Error('Missing #root');
+  createRoot(el).render(<StrictMode>{ui}</StrictMode>);
+}

package/templates/preview-harness/vite-app/src/preview-live-overrides.css

@@ -0,0 +1,101 @@
+/**
+ * Maps hardcoded Tailwind utility classes (from agent builds) to wizard CSS vars
+ * when html.cfm-live-edit is active. Vars are updated via postMessage bridge.
+ */
+html.cfm-live-edit {
+  font-family: var(--cfm-font-family, system-ui, sans-serif);
+  color: var(--cfm-text, #262626);
+  background-color: var(--cfm-background, #fff);
+}
+
+html.cfm-live-edit header {
+  background-color: var(--cfm-header-bg, #fff) !important;
+  height: var(--cfm-header-height, 120px) !important;
+}
+
+html.cfm-live-edit header .h-\[120px\].w-\[120px\] {
+  width: var(--cfm-header-logo-width, 120px) !important;
+  height: var(--cfm-header-logo-height, 120px) !important;
+}
+
+html.cfm-live-edit .bg-\[\#e20074\] {
+  background-color: var(--cfm-primary, #e20074) !important;
+}
+
+html.cfm-live-edit .text-\[\#e20074\] {
+  color: var(--cfm-primary, #e20074) !important;
+}
+
+html.cfm-live-edit .border-\[\#e20074\] {
+  border-color: var(--cfm-mcq-selected-accent, var(--cfm-primary, #e20074)) !important;
+}
+
+html.cfm-live-edit .bg-\[\#fdf2f8\] {
+  background-color: var(--cfm-secondary, #fdf2f8) !important;
+}
+
+html.cfm-live-edit .bg-\[\#fbe8f3\] {
+  background-color: var(--cfm-mcq-selected-bg, var(--cfm-secondary, #fbe8f3)) !important;
+}
+
+html.cfm-live-edit footer.bg-\[\#262626\],
+html.cfm-live-edit footer.cfm-footer,
+html.cfm-live-edit .cfm-footer {
+  background-color: var(--cfm-footer-bg, #262626) !important;
+  color: var(--cfm-footer-text, #fff) !important;
+}
+
+html.cfm-live-edit footer .text-gray-400,
+html.cfm-live-edit footer.cfm-footer [data-cfm-copyright] {
+  color: var(--cfm-footer-text, #9ca3af) !important;
+}
+
+html.cfm-live-edit footer.cfm-footer a,
+html.cfm-live-edit .cfm-footer a {
+  color: var(--cfm-footer-link, #9ca3af) !important;
+}
+
+html.cfm-live-edit header.cfm-header {
+  background-color: var(--cfm-header-bg, #fff) !important;
+  height: var(--cfm-header-height, 120px) !important;
+  border-bottom-color: var(--cfm-header-border, #e5e7eb) !important;
+}
+
+html.cfm-live-edit .h-3.rounded-full.bg-gray-100 {
+  background-color: var(--cfm-progress-track, #f3f4f6) !important;
+  height: var(--cfm-progress-height, 12px) !important;
+}
+
+html.cfm-live-edit .h-3.rounded-full.bg-\[\#e20074\] {
+  background-color: var(--cfm-progress-fill, var(--cfm-primary, #e20074)) !important;
+}
+
+html.cfm-live-edit .max-w-3xl,
+html.cfm-live-edit .max-w-4xl {
+  max-width: var(--cfm-max-width, 48rem) !important;
+}
+
+html.cfm-live-edit .cfm-header-inner {
+  flex-direction: var(--cfm-header-flex-direction, column) !important;
+  justify-content: var(--cfm-header-justify, flex-start) !important;
+  align-items: var(--cfm-header-brand-align, flex-start) !important;
+}
+
+html.cfm-live-edit [data-cfm-company] {
+  margin-top: var(--cfm-header-company-margin-top, 8px) !important;
+  margin-left: var(--cfm-header-company-margin-left, 0) !important;
+}
+
+html.cfm-live-edit .cfm-footer-inner {
+  flex-direction: var(--cfm-footer-flex-direction, row) !important;
+}
+
+html.cfm-live-edit .rounded-xl,
+html.cfm-live-edit .rounded-md,
+html.cfm-live-edit .rounded-lg {
+  border-radius: var(--cfm-border-radius, 12px);
+}
+
+html.cfm-live-edit [data-cfm-survey-title] {
+  font-weight: var(--cfm-heading-weight, 600);
+}

package/templates/preview-harness/vite-app/stubs/next-dynamic.tsx

@@ -0,0 +1,25 @@
+import { lazy, Suspense, type ComponentType } from 'react';
+
+type DynamicOptions = {
+  loading?: () => React.ReactNode;
+  ssr?: boolean;
+};
+
+/** Vite preview stub for `next/dynamic`. */
+export default function dynamic<P extends object>(
+  loader: () => Promise<{ default: ComponentType<P> } | ComponentType<P>>,
+  options?: DynamicOptions,
+) {
+  const Lazy = lazy(async () => {
+    const mod = await loader();
+    return { default: ('default' in (mod as object) ? (mod as { default: ComponentType<P> }).default : mod) as ComponentType<P> };
+  });
+
+  return function DynamicWrapper(props: P) {
+    return (
+      <Suspense fallback={options?.loading?.() ?? null}>
+        <Lazy {...props} />
+      </Suspense>
+    );
+  };
+}

package/templates/preview-harness/vite-app/stubs/next-image.tsx

@@ -0,0 +1,29 @@
+import type { ImgHTMLAttributes } from 'react';
+
+type ImageProps = ImgHTMLAttributes<HTMLImageElement> & {
+  src: string;
+  alt: string;
+  width?: number;
+  height?: number;
+  priority?: boolean;
+  fill?: boolean;
+};
+
+/** Vite preview stub for `next/image`. */
+export default function Image({ src, alt, width, height, className, style, fill, priority, ...rest }: ImageProps) {
+  const resolved =
+    /^https?:\/\//.test(src) || src.startsWith('data:')
+      ? src
+      : `../${src.replace(/^\//, '')}`;
+  return (
+    <img
+      src={resolved}
+      alt={alt}
+      width={width}
+      height={height}
+      className={className}
+      style={fill ? { ...style, width: '100%', height: '100%', objectFit: 'contain' } : style}
+      {...rest}
+    />
+  );
+}

package/templates/previewBridge.ts

@@ -0,0 +1,153 @@
+/**
+ * Live preview bridge for cfm-sdk customize wizard.
+ * Copy to src/lib/previewBridge.ts and import once in layout.tsx.
+ *
+ * Supports SNAPSHOT (full state on tab load) and DELTA (rAF-batched partial updates).
+ */
+export const PREVIEW_BRIDGE_SNAPSHOT = 'CFM_UI_CONFIG_SNAPSHOT';
+export const PREVIEW_BRIDGE_DELTA = 'CFM_UI_CONFIG_DELTA';
+/** @deprecated use SNAPSHOT/DELTA */
+export const PREVIEW_BRIDGE_MESSAGE = PREVIEW_BRIDGE_SNAPSHOT;
+
+export interface ContentPatch {
+  logoUrl?: string | null;
+  surveyTitle?: string;
+  companyName?: string;
+  thankYouMessage?: string;
+  buttonLabels?: { next?: string; back?: string; submit?: string };
+  layoutFlags?: Record<string, boolean | string>;
+  footerLinks?: { label: string; url: string }[];
+  copyrightText?: string;
+}
+
+interface PreviewBridgePayload {
+  type: string;
+  cssVars?: Record<string, string>;
+  contentPatch?: ContentPatch;
+}
+
+let rafId: number | null = null;
+const pendingVars: Record<string, string> = {};
+let liveEditClass = false;
+
+function flushCssVars(): void {
+  rafId = null;
+  const root = document.documentElement;
+  for (const [key, value] of Object.entries(pendingVars)) {
+    if (root.style.getPropertyValue(key) !== value) {
+      root.style.setProperty(key, value);
+    }
+    delete pendingVars[key];
+  }
+}
+
+function queueCssVars(vars: Record<string, string>): void {
+  Object.assign(pendingVars, vars);
+  if (rafId == null) {
+    rafId = requestAnimationFrame(flushCssVars);
+  }
+}
+
+function applyContentPatch(patch: ContentPatch): void {
+  const root = document.documentElement;
+  if (patch.logoUrl !== undefined) {
+    root.dataset.cfmLogoUrl = patch.logoUrl ?? '';
+    document.querySelectorAll('[data-cfm-logo]').forEach((el) => {
+      const img = el as HTMLImageElement;
+      if (patch.logoUrl) {
+        img.src = patch.logoUrl;
+        img.style.display = '';
+      } else {
+        img.style.display = 'none';
+      }
+    });
+  }
+  if (patch.companyName !== undefined) {
+    document.querySelectorAll('[data-cfm-company]').forEach((el) => {
+      el.textContent = patch.companyName ?? '';
+    });
+  }
+  if (patch.surveyTitle !== undefined) {
+    document.querySelectorAll('[data-cfm-survey-title]').forEach((el) => {
+      el.textContent = patch.surveyTitle ?? '';
+    });
+  }
+  if (patch.thankYouMessage !== undefined) {
+    document.querySelectorAll('[data-cfm-thank-you]').forEach((el) => {
+      el.textContent = patch.thankYouMessage ?? '';
+    });
+  }
+  if (patch.buttonLabels?.next) {
+    document.querySelectorAll('[data-cfm-btn-next]').forEach((el) => {
+      el.textContent = patch.buttonLabels!.next!;
+    });
+  }
+  if (patch.buttonLabels?.back) {
+    document.querySelectorAll('[data-cfm-btn-back]').forEach((el) => {
+      el.textContent = patch.buttonLabels!.back!;
+    });
+  }
+  if (patch.copyrightText !== undefined) {
+    document.querySelectorAll('[data-cfm-copyright]').forEach((el) => {
+      el.textContent = patch.copyrightText ?? '';
+    });
+  }
+  if (patch.footerLinks) {
+    const nav = document.querySelector('[data-cfm-footer-links]');
+    if (nav) {
+      nav.innerHTML = patch.footerLinks
+        .map(
+          (l) =>
+            `<a href="${l.url}" target="_blank" rel="noopener noreferrer" style="color:var(--cfm-footer-link)">${l.label}</a>`,
+        )
+        .join('');
+    }
+  }
+}
+
+function setLiveEditMode(on: boolean): void {
+  if (liveEditClass === on) return;
+  liveEditClass = on;
+  document.documentElement.classList.toggle('cfm-live-edit', on);
+}
+
+export function initPreviewBridge(): () => void {
+  if (typeof window === 'undefined') return () => {};
+
+  const handler = (event: MessageEvent<PreviewBridgePayload>) => {
+    const data = event.data;
+    if (!data?.type) return;
+
+    if (
+      data.type !== PREVIEW_BRIDGE_SNAPSHOT &&
+      data.type !== PREVIEW_BRIDGE_DELTA &&
+      data.type !== PREVIEW_BRIDGE_MESSAGE
+    ) {
+      return;
+    }
+
+    setLiveEditMode(true);
+
+    if (data.cssVars) {
+      if (data.type === PREVIEW_BRIDGE_DELTA) {
+        queueCssVars(data.cssVars);
+      } else {
+        applyCssVarsImmediate(data.cssVars);
+      }
+    }
+
+    if (data.contentPatch && data.type !== PREVIEW_BRIDGE_DELTA) {
+      applyContentPatch(data.contentPatch);
+    }
+  };
+
+  window.addEventListener('message', handler);
+  return () => window.removeEventListener('message', handler);
+}
+
+function applyCssVarsImmediate(vars: Record<string, string>): void {
+  const root = document.documentElement;
+  for (const [key, value] of Object.entries(vars)) {
+    root.style.setProperty(key, value);
+  }
+}