@cognior/iap-sdk 0.1.0

package/src/experiences/survey.ts

@@ -0,0 +1,1639 @@
+// src/experiences/survey.ts
+// Unified Survey component implementation for collecting user feedback
+// Supports both full-featured modal surveys and lightweight micro surveys
+
+import { sanitizeHtml } from "../utils/sanitize";
+import { register } from "./registry";
+import { surveyCssText } from "../styles/survey.css";
+import { http } from "../http";
+import { resolveSelector } from "../utils/selectors";
+import type { DapConfig } from "../config";
+import type { CompletionTracker } from "./types";
+
+// Inline modal CSS for surveys
+const modalCssText = `
+:root {
+  --dap-z: 2147483640;
+  --dap-overlay: rgba(15, 23, 42, 0.5);
+  --dap-modal-bg: #f8fafc;
+  --dap-modal-header-bg: #f1f5f9;
+  --dap-modal-border: #e2e8f0;
+  --dap-modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --dap-text-primary: #1e293b;
+  --dap-text-secondary: #64748b;
+  --dap-text-muted: #94a3b8;
+  --dap-btn-primary: #3b82f6;
+  --dap-btn-primary-hover: #2563eb;
+  --dap-btn-secondary: #e2e8f0;
+  --dap-btn-secondary-hover: #cbd5e1;
+  --dap-radius: 12px;
+  --dap-spacing: 16px;
+}
+
+.dap-modal-wrap {
+  position: fixed;
+  inset: 0;
+  background: var(--dap-overlay);
+  z-index: var(--dap-z);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  backdrop-filter: blur(4px);
+}
+
+.dap-modal {
+  background: var(--dap-modal-bg);
+  border: 1px solid var(--dap-modal-border);
+  border-radius: var(--dap-radius);
+  box-shadow: var(--dap-modal-shadow);
+  width: 100%;
+  max-width: min(90vw, 500px);
+  max-height: min(90vh, 600px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Content-adaptive size classes */
+.dap-modal.dap-size-small {
+  max-width: min(90vw, 400px);
+  max-height: min(90vh, 500px);
+}
+
+.dap-modal.dap-size-medium {
+  max-width: min(90vw, 600px);
+  max-height: min(90vh, 650px);
+}
+
+.dap-modal.dap-size-large {
+  max-width: min(90vw, 900px);
+  max-height: min(90vh, 800px);
+}
+
+/* Scrollable class when content overflows */
+.dap-modal.dap-scrollable .dap-modal-body {
+  overflow-y: auto;
+  overflow-x: auto;
+}
+
+/* Default: no scroll unless needed */
+.dap-modal .dap-modal-body {
+  overflow: visible;
+}
+
+.dap-header-bar {
+  background: var(--dap-modal-header-bg);
+  border-bottom: 1px solid var(--dap-modal-border);
+  padding: var(--dap-spacing);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 60px;
+}
+
+.dap-modal-header {
+  color: var(--dap-text-primary);
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+  flex: 1;
+}
+
+.dap-close {
+  background: transparent;
+  border: none;
+  color: var(--dap-text-secondary);
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 6px;
+  width: 32px;
+  height: 32px;
+  font-size: 18px;
+}
+
+.dap-close:hover {
+  background: var(--dap-btn-secondary);
+}
+
+.dap-modal-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 32px;
+  background: var(--dap-modal-bg);
+}
+
+.dap-footer {
+  background: var(--dap-modal-bg);
+  border-top: 1px solid var(--dap-modal-border);
+  padding: var(--dap-spacing);
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+}
+
+.dap-cta {
+  background: var(--dap-btn-primary);
+  color: white;
+  border: 1px solid var(--dap-btn-primary);
+  cursor: pointer;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.15s ease;
+}
+
+.dap-cta:hover {
+  background: var(--dap-btn-primary-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
+}
+`;
+
+export type SurveyQuestion = {
+  questionId: string;
+  question: string;
+  type: SurveyQuestionType;
+  options?: string[];
+  scaleMin?: number;
+  scaleMax?: number;
+  labelMin?: string;
+  labelMax?: string;
+  criteria?: string[];
+};
+
+export type SurveyQuestionType = 
+  | "SingleChoice" 
+  | "MultipleChoice" 
+  | "Dropdown" 
+  | "TextSingle" 
+  | "TextMulti" 
+  | "OpinionScale" 
+  | "OpinionScaleChoice" 
+  | "NpsScale" 
+  | "NpsOptions" 
+  | "StarRating" 
+  | "StarChoice";
+
+export type SurveyPayload = {
+  // Standard survey fields
+  header?: string;
+  body?: string;
+  questions?: SurveyQuestion[]; // Made optional to support micro surveys
+  theme?: Record<string, string>;
+  flowId?: string;
+  organizationId?: string;
+  siteId?: string;
+  stepId?: string;
+  
+  // Micro survey fields (for lightweight single-question surveys)
+  question?: string; // Single question for micro surveys
+  options?: Array<{ label: string; value: string }>; // Simple options for micro surveys
+  placeholder?: string;
+  submitText?: string;
+  cancelText?: string;
+  type?: 'rating' | 'choice' | 'text' | 'modal'; // 'modal' = traditional full survey
+  rating?: {
+    min?: number;
+    max?: number;
+    labels?: { min?: string; max?: string };
+  };
+  targetSelector?: string; // For micro survey positioning
+  position?: 'top' | 'bottom' | 'right' | 'left' | 'center';
+  mode?: 'modal' | 'inline'; // Explicit mode selection
+  _completionTracker?: CompletionTracker;
+};
+
+type SurveyFlow = { 
+  id: string; 
+  type: "survey"; 
+  payload: SurveyPayload; 
+  config?: DapConfig;
+};
+
+export function registerSurvey() {
+  register("survey", renderSurvey);
+  // Also register microsurvey as an alias for backward compatibility
+  register("microsurvey", renderSurvey);
+}
+
+export async function renderSurvey(flow: SurveyFlow): Promise<void> {
+  const { payload } = flow;
+  
+  console.debug('[DAP] renderSurvey called with payload:', {
+    hasHeader: !!payload.header,
+    hasBody: !!payload.body,
+    hasQuestion: !!payload.question,
+    questionsCount: payload.questions?.length || 0,
+    targetSelector: payload.targetSelector,
+    mode: payload.mode,
+    type: payload.type
+  });
+  
+  // Determine survey mode
+  const surveyMode = determineSurveyMode(payload);
+  
+  console.debug('[DAP] Survey mode determined:', surveyMode);
+  
+  if (surveyMode === 'inline') {
+    return renderMicroSurvey(flow);
+  } else {
+    return renderModalSurvey(flow);
+  }
+}
+
+function determineSurveyMode(payload: SurveyPayload): 'modal' | 'inline' {
+  console.debug('[DAP] Survey mode detection:', {
+    mode: payload.mode,
+    question: payload.question,
+    questionsArray: payload.questions?.length || 0,
+    targetSelector: payload.targetSelector,
+    type: payload.type
+  });
+  
+  // Explicit mode setting takes precedence
+  if (payload.mode) {
+    console.debug('[DAP] Using explicit mode:', payload.mode);
+    return payload.mode;
+  }
+  
+  // If we have multiple questions, always use modal (even with targetSelector)
+  if (payload.questions && payload.questions.length > 1) {
+    console.debug('[DAP] Multiple questions - using modal mode');
+    return 'modal';
+  }
+  
+  // If there's a single question field and no questions array, it's a micro survey
+  if (payload.question && !payload.questions?.length) {
+    console.debug('[DAP] Single question micro survey - using inline mode');
+    return 'inline';
+  }
+  
+  // If there's a targetSelector, it's probably meant to be inline
+  if (payload.targetSelector) {
+    console.debug('[DAP] Has targetSelector - using inline mode');
+    return 'inline';
+  }
+  
+  // If type is one of the micro survey types, it's inline
+  if (payload.type && ['rating', 'choice', 'text'].includes(payload.type)) {
+    console.debug('[DAP] Simple survey type - using inline mode');
+    return 'inline';
+  }
+  
+  // Default to modal for traditional surveys
+  console.debug('[DAP] Defaulting to modal mode');
+  return 'modal';
+}
+
+async function renderModalSurvey(flow: SurveyFlow): Promise<void> {
+  const { payload } = flow;
+  
+  // Validate that we have questions for modal surveys
+  if (!payload.questions || payload.questions.length === 0) {
+    console.error("[DAP] Modal survey requires questions array");
+    payload._completionTracker?.onComplete?.();
+    return;
+  }
+
+  console.debug('[DAP] === SURVEY DEBUG: Rendering modal survey ===');
+  console.debug('[DAP] Survey payload:', payload);
+  console.debug('[DAP] Has completion tracker:', !!payload._completionTracker);
+  console.debug('[DAP] Has onComplete callback:', !!payload._completionTracker?.onComplete);
+
+  // TEMPORARY: Auto-advance after 3 seconds for rule testing
+  setTimeout(() => {
+    console.debug('[DAP] === SURVEY AUTO-ADVANCE: Simulating completion ===');
+    alert('🚀 Survey Auto-Advance!\n\nSimulating survey completion to test rule steps...');
+    payload._completionTracker?.onComplete?.();
+  }, 3000);
+
+  const prevActive = document.activeElement as HTMLElement | null;
+  
+  const shell = createShell(payload.theme);
+  
+  const onKey = (e: KeyboardEvent) => {
+    if (e.key === "Escape") closeAll();
+    else if (e.key === "Tab") trapTab(e, shell.dlg);
+  };
+  document.addEventListener("keydown", onKey, true);
+
+  // header
+  shell.titleEl.textContent = payload.header ?? "Survey";
+  
+  // body
+  shell.body.replaceChildren();
+  if (payload.body) {
+    const bodyText = document.createElement("div");
+    bodyText.className = "dap-survey-intro";
+    bodyText.innerHTML = sanitizeHtml(payload.body);
+    shell.body.appendChild(bodyText);
+  }
+  
+  // Survey form
+  const form = document.createElement("form");
+  form.className = "dap-survey-form";
+  form.addEventListener("submit", async (e) => {
+    e.preventDefault();
+    
+    try {
+      // Get all form elements and extract values manually
+      const responses: Array<{
+        question: string;
+        type: SurveyQuestionType;
+        answer: any;
+      }> = [];
+      
+      // Process each question based on its type (already validated above)
+      for (const q of payload.questions!) {
+        const questionData = {
+          question: q.question,
+          type: q.type,
+          answer: null as any
+        };
+        
+        switch (q.type) {
+          case "SingleChoice":
+          case "Dropdown": {
+            const radio = form.querySelector(`input[name="${q.questionId}"]:checked`) as HTMLInputElement;
+            const select = form.querySelector(`select[name="${q.questionId}"]`) as HTMLSelectElement;
+            questionData.answer = radio?.value || select?.value || null;
+            break;
+          }
+          
+          case "MultipleChoice": {
+            const checkboxes = Array.from(form.querySelectorAll(`input[name="${q.questionId}[]"]:checked`)) as HTMLInputElement[];
+            questionData.answer = checkboxes.map(cb => cb.value);
+            break;
+          }
+          
+          case "TextSingle": {
+            const input = form.querySelector(`input[name="${q.questionId}"]`) as HTMLInputElement;
+            questionData.answer = input?.value || "";
+            break;
+          }
+          
+          case "TextMulti": {
+            const textarea = form.querySelector(`textarea[name="${q.questionId}"]`) as HTMLTextAreaElement;
+            questionData.answer = textarea?.value || "";
+            break;
+          }
+          
+          case "OpinionScale":
+          case "StarRating":
+          case "NpsScale": {
+            const radio = form.querySelector(`input[name="${q.questionId}"]:checked`) as HTMLInputElement;
+            questionData.answer = radio?.value ? parseInt(radio.value) : null;
+            break;
+          }
+          
+          case "OpinionScaleChoice": {
+            const items = q.criteria || [];
+            
+            // If no criteria provided, skip this question
+            if (items.length === 0) break;
+            
+            const ratings: Record<string, number> = {};
+            
+            items.forEach((item, idx) => {
+              const radio = form.querySelector(`input[name="${q.questionId}_${idx}"]:checked`) as HTMLInputElement;
+              if (radio?.value) {
+                ratings[item] = parseInt(radio.value);
+              }
+            });
+            
+            questionData.answer = Object.keys(ratings).length > 0 ? ratings : null;
+            break;
+          }
+          
+          case "StarChoice": {
+            // For the updated StarChoice, get the single selected rating value
+            const radio = form.querySelector(`input[name="${q.questionId}"]:checked`) as HTMLInputElement;
+            
+            // Define default options from Poor to Excellent for mapping
+            const defaultLabels = ["Poor", "Fair", "Good", "Very Good", "Excellent"];
+            const max = q.scaleMax || 5;
+            
+            // Use options if provided, otherwise use default labels (limited to max)
+            const starLabels = q.options && q.options.length > 0
+              ? q.options
+              : defaultLabels.slice(0, max);
+            
+            if (radio?.value) {
+              const ratingValue = parseInt(radio.value);
+              const labelIndex = Math.min(starLabels.length, ratingValue) - 1;
+              const label = starLabels[labelIndex];
+              
+              questionData.answer = {
+                value: ratingValue,
+                label: label
+              };
+            } else {
+              questionData.answer = null;
+            }
+            
+            break;
+          }
+          
+          case "NpsOptions": {
+            const category = form.querySelector(`input[name="${q.questionId}"]:checked`) as HTMLInputElement;
+            
+            questionData.answer = category?.value || null;
+            break;
+          }
+        }
+        
+        if (questionData.answer !== null) {
+          responses.push(questionData);
+        }
+      }
+      
+      // Create the survey submission payload
+      const submissionData = {
+        stepId: payload.stepId,
+        sessionId: `user-session-${Date.now()}`,
+        submittedAt: new Date().toISOString(),
+        responses,
+        client: {
+          userId: "",
+          clientIP: "",
+          userAgent: navigator.userAgent,
+          locale: navigator.language
+        }
+      };
+      
+      console.log("[DAP] Survey submission payload:", submissionData);
+      
+      // Submit to API if configuration is available
+      if (flow.config && payload.flowId && payload.organizationId && payload.siteId) {
+        const url = flow.config?.apiurl + `/iap-experience/${payload.organizationId}/${payload.siteId}/survey-responses/${payload.flowId}`;
+        const hostBase = location.origin;
+        
+        // Log the API request details
+        console.log("[DAP] Submitting survey to API:", url);
+        console.log("[DAP] Request will include X-Host-Url header:", hostBase);
+        
+        try {
+          await http(flow.config, url, {
+            method: "POST",
+            body: submissionData,
+            hostBase,
+            includeHostHeader: true
+          });
+          console.log("[DAP] Survey successfully submitted to API");
+          
+          // Track the survey submission
+          try {
+            // Legacy: Survey submission tracking - now handled by step view system
+            console.debug('[DAP Survey] Survey submission - tracking handled by step view system');
+          } catch (trackingError) {
+            console.error("[DAP] Survey submission tracking error:", trackingError);
+            // Don't re-throw tracking errors - we still want the submission to be considered successful
+          }
+        } catch (error) {
+          console.error("[DAP] Survey submission API error:", error);
+          throw error; // Re-throw to be caught by the outer try/catch
+        }
+      } else {
+        console.warn("[DAP] Survey API submission skipped - missing configuration");
+      }
+      
+      // Close the survey
+      closeAll();
+    } catch (err) {
+      console.error("[DAP] Survey submission error:", err);
+      
+      // Show error message
+      const errorMsg = document.createElement("div");
+      errorMsg.className = "dap-survey-error";
+      errorMsg.textContent = "An error occurred while submitting your responses. Please try again.";
+      form.prepend(errorMsg);
+      
+      // Remove error message after 5 seconds
+      setTimeout(() => {
+        errorMsg.remove();
+      }, 5000);
+    }
+  });
+  
+  // Add questions (already validated above)
+  payload.questions!.forEach((q, index) => {
+    const questionEl = renderQuestion(q, index);
+    form.appendChild(questionEl);
+  });
+  
+  shell.body.appendChild(form);
+  
+  // Apply adaptive modal sizing based on content
+  setTimeout(() => {
+    adjustSurveyModalSize(shell.dlg, shell.body);
+  }, 0);
+  
+  // footer buttons
+  shell.prevBtn.textContent = "Cancel";
+  shell.nextBtn.textContent = "Submit";
+  shell.prevBtn.style.display = "inline-block";
+  
+  const closeAll = () => {
+    document.removeEventListener("keydown", onKey, true);
+    shell.wrap.remove();
+    if (prevActive?.focus) prevActive.focus();
+  };
+
+  shell.wrap.addEventListener("click", (e) => { if (e.target === shell.wrap) closeAll(); });
+  shell.closeBtn.addEventListener("click", closeAll);
+  shell.prevBtn.addEventListener("click", closeAll);
+  shell.nextBtn.addEventListener("click", () => { 
+    form.requestSubmit(); 
+  });
+
+  setTimeout(() => shell.dlg.focus(), 0);
+}
+
+/* ===================== Micro Survey Implementation ===================== */
+
+interface MicroSurveyState {
+  id: string;
+  element: HTMLElement;
+  targetElement?: HTMLElement;
+  cleanup: (() => void)[];
+  isActive: boolean;
+}
+
+const activeMicroSurveys = new Map<string, MicroSurveyState>();
+
+async function renderMicroSurvey(flow: SurveyFlow): Promise<void> {
+  const { payload, id } = flow;
+  
+  console.debug("[DAP] MicroSurvey initialized", { id, payload });
+  
+  if (!payload.question) {
+    console.error("[DAP] MicroSurvey missing required question");
+    payload._completionTracker?.onComplete?.();
+    return;
+  }
+  
+  // Clean up any existing micro survey with same ID
+  if (activeMicroSurveys.has(id)) {
+    cleanupMicroSurvey(id);
+  }
+  
+  // Find target element if selector provided
+  let targetElement: HTMLElement | undefined;
+  if (payload.targetSelector) {
+    const element = resolveSelector(payload.targetSelector);
+    if (element instanceof HTMLElement) {
+      targetElement = element;
+    } else {
+      console.warn(`[DAP] MicroSurvey: Target element not found for selector: ${payload.targetSelector}`);
+    }
+  }
+  
+  // Create micro survey element
+  const microSurveyElement = createMicroSurveyElement(payload, id, flow);
+  
+  const microSurveyState: MicroSurveyState = {
+    id,
+    element: microSurveyElement,
+    targetElement,
+    cleanup: [],
+    isActive: false
+  };
+  
+  activeMicroSurveys.set(id, microSurveyState);
+  
+  // Show micro survey
+  showMicroSurvey(microSurveyState, payload);
+  
+  console.debug("[DAP] MicroSurvey setup complete", { id });
+}
+
+function createMicroSurveyElement(payload: SurveyPayload, id: string, flow: SurveyFlow): HTMLElement {
+  const microSurvey = document.createElement('div');
+  microSurvey.className = 'dap-microsurvey';
+  microSurvey.id = `dap-microsurvey-${id}`;
+  microSurvey.setAttribute('role', 'dialog');
+  microSurvey.setAttribute('aria-label', 'Quick Survey');
+  
+  // Base styling
+  Object.assign(microSurvey.style, {
+    position: 'fixed',
+    zIndex: '10000',
+    backgroundColor: '#ffffff',
+    border: '1px solid #e2e8f0',
+    borderRadius: '12px',
+    boxShadow: '0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05)',
+    padding: '20px',
+    maxWidth: '320px',
+    minWidth: '280px',
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    fontSize: '14px',
+    lineHeight: '1.5',
+    color: '#1e293b',
+    opacity: '0',
+    transform: 'scale(0.95) translateY(10px)',
+    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    backdropFilter: 'blur(8px)'
+  });
+  
+  // Add question
+  const questionEl = document.createElement('div');
+  questionEl.style.cssText = `
+    font-weight: 600;
+    margin-bottom: 16px;
+    color: #1e293b;
+    line-height: 1.4;
+  `;
+  questionEl.innerHTML = sanitizeHtml(payload.question || '');
+  microSurvey.appendChild(questionEl);
+  
+  // Add content based on type
+  const contentEl = document.createElement('div');
+  contentEl.style.marginBottom = '16px';
+  
+  const surveyType = payload.type || 'choice';
+  
+  if (surveyType === 'rating') {
+    createRatingContent(contentEl, payload, id);
+  } else if (surveyType === 'choice') {
+    createChoiceContent(contentEl, payload, id);
+  } else if (surveyType === 'text') {
+    createTextContent(contentEl, payload, id);
+  }
+  
+  microSurvey.appendChild(contentEl);
+  
+  // Add buttons
+  const buttonsEl = document.createElement('div');
+  buttonsEl.style.cssText = `
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
+  `;
+  
+  // Cancel button
+  const cancelBtn = document.createElement('button');
+  cancelBtn.textContent = payload.cancelText || 'Cancel';
+  cancelBtn.style.cssText = `
+    padding: 8px 16px;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    background: #ffffff;
+    color: #374151;
+    cursor: pointer;
+    font-size: 14px;
+  `;
+  cancelBtn.addEventListener('click', () => {
+    cleanupMicroSurvey(id);
+    payload._completionTracker?.onComplete?.();
+  });
+  
+  // Submit button
+  const submitBtn = document.createElement('button');
+  submitBtn.textContent = payload.submitText || 'Submit';
+  submitBtn.style.cssText = `
+    padding: 8px 16px;
+    border: none;
+    border-radius: 6px;
+    background: #3b82f6;
+    color: #ffffff;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+  `;
+  
+  submitBtn.addEventListener('click', async () => {
+    const formData = extractMicroSurveyData(microSurvey, payload);
+    if (formData) {
+      try {
+        await submitMicroSurveyData(formData, payload, flow);
+        cleanupMicroSurvey(id);
+        payload._completionTracker?.onComplete?.();
+      } catch (error) {
+        console.error('[DAP] Micro survey submission failed:', error);
+      }
+    }
+  });
+  
+  buttonsEl.appendChild(cancelBtn);
+  buttonsEl.appendChild(submitBtn);
+  microSurvey.appendChild(buttonsEl);
+  
+  return microSurvey;
+}
+
+function showMicroSurvey(state: MicroSurveyState, payload: SurveyPayload): void {
+  document.body.appendChild(state.element);
+  
+  // Position micro survey
+  positionMicroSurvey(state.element, state.targetElement, payload.position || 'center');
+  
+  // Animate in
+  requestAnimationFrame(() => {
+    state.element.style.opacity = '1';
+    state.element.style.transform = 'scale(1) translateY(0)';
+  });
+  
+  state.isActive = true;
+  
+  // Set up cleanup handlers
+  const cleanup = () => cleanupMicroSurvey(state.id);
+  state.cleanup.push(cleanup);
+}
+
+function positionMicroSurvey(element: HTMLElement, targetElement?: HTMLElement, position: string = 'center'): void {
+  if (targetElement) {
+    // Position relative to target element
+    const targetRect = targetElement.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+    const viewport = { width: window.innerWidth, height: window.innerHeight };
+    
+    switch (position) {
+      case 'top':
+        element.style.left = `${targetRect.left + (targetRect.width - elementRect.width) / 2}px`;
+        element.style.top = `${targetRect.top - elementRect.height - 10}px`;
+        break;
+      case 'bottom':
+        element.style.left = `${targetRect.left + (targetRect.width - elementRect.width) / 2}px`;
+        element.style.top = `${targetRect.bottom + 10}px`;
+        break;
+      case 'left':
+        element.style.left = `${targetRect.left - elementRect.width - 10}px`;
+        element.style.top = `${targetRect.top + (targetRect.height - elementRect.height) / 2}px`;
+        break;
+      case 'right':
+        element.style.left = `${targetRect.right + 10}px`;
+        element.style.top = `${targetRect.top + (targetRect.height - elementRect.height) / 2}px`;
+        break;
+      default: // center
+        element.style.left = `${(viewport.width - elementRect.width) / 2}px`;
+        element.style.top = `${(viewport.height - elementRect.height) / 2}px`;
+    }
+    
+    // Ensure element stays within viewport bounds
+    const rect = element.getBoundingClientRect();
+    if (rect.right > viewport.width) {
+      element.style.left = `${viewport.width - elementRect.width - 10}px`;
+    }
+    if (rect.bottom > viewport.height) {
+      element.style.top = `${viewport.height - elementRect.height - 10}px`;
+    }
+    if (rect.left < 0) {
+      element.style.left = '10px';
+    }
+    if (rect.top < 0) {
+      element.style.top = '10px';
+    }
+  } else {
+    // Center on screen
+    element.style.left = '50%';
+    element.style.top = '50%';
+    element.style.transform = 'translate(-50%, -50%) scale(0.95)';
+  }
+}
+
+function createRatingContent(container: HTMLElement, payload: SurveyPayload, id: string): void {
+  const min = payload.rating?.min || 1;
+  const max = payload.rating?.max || 5;
+  
+  const ratingContainer = document.createElement('div');
+  ratingContainer.style.cssText = `
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: center;
+  `;
+  
+  for (let i = min; i <= max; i++) {
+    const star = document.createElement('button');
+    star.type = 'button';
+    star.innerHTML = '★';
+    star.dataset.value = i.toString();
+    star.style.cssText = `
+      background: none;
+      border: none;
+      font-size: 24px;
+      color: #d1d5db;
+      cursor: pointer;
+      transition: color 0.2s;
+    `;
+    
+    star.addEventListener('click', () => {
+      // Update visual state
+      ratingContainer.querySelectorAll('button').forEach((btn, idx) => {
+        btn.style.color = idx < i ? '#fbbf24' : '#d1d5db';
+      });
+      // Store value
+      ratingContainer.dataset.value = i.toString();
+    });
+    
+    ratingContainer.appendChild(star);
+  }
+  
+  container.appendChild(ratingContainer);
+}
+
+function createChoiceContent(container: HTMLElement, payload: SurveyPayload, id: string): void {
+  if (!payload.options?.length) return;
+  
+  const choiceContainer = document.createElement('div');
+  choiceContainer.style.cssText = `
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  `;
+  
+  payload.options.forEach((option, index) => {
+    const optionEl = document.createElement('button');
+    optionEl.type = 'button';
+    optionEl.textContent = option.label;
+    optionEl.dataset.value = option.value;
+    optionEl.style.cssText = `
+      padding: 12px 16px;
+      border: 1px solid #d1d5db;
+      border-radius: 6px;
+      background: #ffffff;
+      color: #374151;
+      cursor: pointer;
+      text-align: left;
+      transition: all 0.2s;
+    `;
+    
+    optionEl.addEventListener('click', () => {
+      // Clear previous selection
+      choiceContainer.querySelectorAll('button').forEach(btn => {
+        btn.style.background = '#ffffff';
+        btn.style.borderColor = '#d1d5db';
+      });
+      // Select this option
+      optionEl.style.background = '#eff6ff';
+      optionEl.style.borderColor = '#3b82f6';
+      choiceContainer.dataset.value = option.value;
+    });
+    
+    choiceContainer.appendChild(optionEl);
+  });
+  
+  container.appendChild(choiceContainer);
+}
+
+function createTextContent(container: HTMLElement, payload: SurveyPayload, id: string): void {
+  const textarea = document.createElement('textarea');
+  textarea.placeholder = payload.placeholder || 'Your feedback...';
+  textarea.style.cssText = `
+    width: 100%;
+    min-height: 80px;
+    padding: 12px;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    font-family: inherit;
+    font-size: 14px;
+    resize: vertical;
+  `;
+  
+  container.appendChild(textarea);
+}
+
+function extractMicroSurveyData(element: HTMLElement, payload: SurveyPayload): any {
+  const surveyType = payload.type || 'choice';
+  
+  switch (surveyType) {
+    case 'rating': {
+      const ratingContainer = element.querySelector('[data-value]') as HTMLElement;
+      return ratingContainer?.dataset.value ? parseInt(ratingContainer.dataset.value) : null;
+    }
+    case 'choice': {
+      const choiceContainer = element.querySelector('[data-value]') as HTMLElement;
+      return choiceContainer?.dataset.value || null;
+    }
+    case 'text': {
+      const textarea = element.querySelector('textarea') as HTMLTextAreaElement;
+      return textarea?.value || '';
+    }
+    default:
+      return null;
+  }
+}
+
+async function submitMicroSurveyData(data: any, payload: SurveyPayload, flow: SurveyFlow): Promise<void> {
+  const submissionData = {
+    stepId: payload.stepId,
+    sessionId: `user-session-${Date.now()}`,
+    submittedAt: new Date().toISOString(),
+    response: data,
+    question: payload.question,
+    type: payload.type,
+    client: {
+      userId: "",
+      clientIP: "",
+      userAgent: navigator.userAgent,
+      locale: navigator.language
+    }
+  };
+  
+  console.log("[DAP] MicroSurvey submission payload:", submissionData);
+  
+  // Submit to API if configuration is available
+  if (flow.config && payload.flowId && payload.organizationId && payload.siteId) {
+    const url = flow.config?.apiurl + `/iap-experience/${payload.organizationId}/${payload.siteId}/survey-responses/${payload.flowId}`;
+    const hostBase = location.origin;
+    
+    console.log("[DAP] Submitting micro survey to API:", url);
+    
+    await http(flow.config, url, {
+      method: "POST",
+      body: submissionData,
+      hostBase,
+      includeHostHeader: true
+    });
+    
+    console.log("[DAP] MicroSurvey successfully submitted to API");
+  } else {
+    console.warn("[DAP] MicroSurvey API submission skipped - missing configuration");
+  }
+}
+
+function cleanupMicroSurvey(id: string): void {
+  const state = activeMicroSurveys.get(id);
+  if (!state) return;
+  
+  // Run cleanup functions
+  state.cleanup.forEach(fn => {
+    try {
+      fn();
+    } catch (error) {
+      console.error('[DAP] Cleanup error:', error);
+    }
+  });
+  
+  // Remove element
+  if (state.element.parentElement) {
+    state.element.style.opacity = '0';
+    state.element.style.transform = 'scale(0.95) translateY(10px)';
+    setTimeout(() => {
+      if (state.element.parentElement) {
+        state.element.parentElement.removeChild(state.element);
+      }
+    }, 300);
+  }
+  
+  // Remove from active surveys
+  activeMicroSurveys.delete(id);
+}
+
+/* ===================== End Micro Survey Implementation ===================== */
+
+function renderQuestion(question: SurveyQuestion, index: number): HTMLElement {
+  const wrapper = document.createElement("div");
+  wrapper.className = "dap-survey-question";
+  wrapper.dataset.type = question.type;
+  
+  // Add full-width class to complex question types that need more space
+  if (["TextMulti", "NpsScale", "NpsOptions", "OpinionScaleChoice", "StarChoice"].includes(question.type)) {
+    wrapper.classList.add("dap-full-width");
+  }
+  
+  const label = document.createElement("label");
+  label.className = "dap-question-label";
+  label.textContent = `${index + 1}. ${question.question}`;
+  wrapper.appendChild(label);
+  
+  const inputContainer = document.createElement("div");
+  inputContainer.className = "dap-question-input";
+  
+  switch (question.type) {
+    case "SingleChoice":
+      renderSingleChoice(inputContainer, question);
+      break;
+    case "MultipleChoice":
+      renderMultipleChoice(inputContainer, question);
+      break;
+    case "Dropdown":
+      renderDropdown(inputContainer, question);
+      break;
+    case "TextSingle":
+      renderTextSingle(inputContainer, question);
+      break;
+    case "TextMulti":
+      renderTextMulti(inputContainer, question);
+      break;
+    case "OpinionScale":
+      renderOpinionScale(inputContainer, question);
+      break;
+    case "OpinionScaleChoice":
+      renderOpinionScaleChoice(inputContainer, question);
+      break;
+    case "NpsScale":
+      renderNpsScale(inputContainer, question);
+      break;
+    case "NpsOptions":
+      renderNpsOptions(inputContainer, question);
+      break;
+    case "StarRating":
+      renderStarRating(inputContainer, question);
+      break;
+    case "StarChoice":
+      renderStarChoice(inputContainer, question);
+      break;
+  }
+  
+  wrapper.appendChild(inputContainer);
+  return wrapper;
+}
+
+function renderSingleChoice(container: HTMLElement, question: SurveyQuestion) {
+  if (!question.options?.length) return;
+  
+  question.options.forEach((option, i) => {
+    const wrapper = document.createElement("div");
+    wrapper.className = "dap-radio-wrapper";
+    
+    const input = document.createElement("input");
+    input.type = "radio";
+    input.name = question.questionId;
+    input.id = `${question.questionId}_${i}`;
+    input.value = option;
+    
+    const label = document.createElement("label");
+    label.htmlFor = input.id;
+    label.textContent = option;
+    
+    wrapper.appendChild(input);
+    wrapper.appendChild(label);
+    container.appendChild(wrapper);
+  });
+}
+
+function renderMultipleChoice(container: HTMLElement, question: SurveyQuestion) {
+  if (!question.options?.length) return;
+  
+  question.options.forEach((option, i) => {
+    const wrapper = document.createElement("div");
+    wrapper.className = "dap-checkbox-wrapper";
+    
+    const input = document.createElement("input");
+    input.type = "checkbox";
+    input.name = `${question.questionId}[]`;
+    input.id = `${question.questionId}_${i}`;
+    input.value = option;
+    
+    const label = document.createElement("label");
+    label.htmlFor = input.id;
+    label.textContent = option;
+    
+    wrapper.appendChild(input);
+    wrapper.appendChild(label);
+    container.appendChild(wrapper);
+  });
+}
+
+function renderDropdown(container: HTMLElement, question: SurveyQuestion) {
+  if (!question.options?.length) return;
+  
+  const select = document.createElement("select");
+  select.name = question.questionId;
+  
+  const defaultOption = document.createElement("option");
+  defaultOption.value = "";
+  defaultOption.textContent = "-- Select an option --";
+  defaultOption.selected = true;
+  defaultOption.disabled = true;
+  select.appendChild(defaultOption);
+  
+  question.options.forEach((option, i) => {
+    const optionEl = document.createElement("option");
+    optionEl.value = option;
+    optionEl.textContent = option;
+    select.appendChild(optionEl);
+  });
+  
+  container.appendChild(select);
+}
+
+function renderTextSingle(container: HTMLElement, question: SurveyQuestion) {
+  const input = document.createElement("input");
+  input.type = "text";
+  input.name = question.questionId;
+  input.placeholder = "Your answer...";
+  container.appendChild(input);
+}
+
+function renderTextMulti(container: HTMLElement, question: SurveyQuestion) {
+  const textarea = document.createElement("textarea");
+  textarea.name = question.questionId;
+  textarea.placeholder = "Your answer...";
+  textarea.rows = 4;
+  container.appendChild(textarea);
+}
+
+function renderOpinionScale(container: HTMLElement, question: SurveyQuestion) {
+  const min = question.scaleMin || 1;
+  const max = question.scaleMax || 5;
+  
+  const scaleContainer = document.createElement("div");
+  scaleContainer.className = "dap-scale-container";
+  
+  if (question.labelMin) {
+    const minLabel = document.createElement("div");
+    minLabel.className = "dap-scale-label";
+    minLabel.textContent = question.labelMin;
+    scaleContainer.appendChild(minLabel);
+  }
+  
+  const scaleOptions = document.createElement("div");
+  scaleOptions.className = "dap-scale-options";
+  
+  for (let i = min; i <= max; i++) {
+    const option = document.createElement("div");
+    option.className = "dap-scale-option";
+    
+    const input = document.createElement("input");
+    input.type = "radio";
+    input.name = question.questionId;
+    input.id = `${question.questionId}_${i}`;
+    input.value = i.toString();
+    
+    const label = document.createElement("label");
+    label.htmlFor = input.id;
+    label.textContent = i.toString();
+    
+    option.appendChild(input);
+    option.appendChild(label);
+    scaleOptions.appendChild(option);
+  }
+  
+  scaleContainer.appendChild(scaleOptions);
+  
+  if (question.labelMax) {
+    const maxLabel = document.createElement("div");
+    maxLabel.className = "dap-scale-label";
+    maxLabel.textContent = question.labelMax;
+    scaleContainer.appendChild(maxLabel);
+  }
+  
+  container.appendChild(scaleContainer);
+}
+
+function renderOpinionScaleChoice(container: HTMLElement, question: SurveyQuestion) {
+  const min = question.scaleMin || 1;
+  const max = question.scaleMax || 5;
+  const scaleSize = max - min + 1;
+  
+  // Define emoji faces based on a 5-point scale
+  const faces = ["😣", "😕", "😐", "🙂", "😄"];
+  
+  // Container for face options
+  const scaleContainer = document.createElement("div");
+  scaleContainer.className = "dap-scale-faces";
+  
+  // Create options for each point on the scale
+  for (let i = min; i <= max; i++) {
+    const faceIndex = Math.min(scaleSize - 1, Math.floor((i - min) / (max - min) * (faces.length - 1)));
+    
+    const option = document.createElement("div");
+    option.className = "dap-face-option";
+    
+    const input = document.createElement("input");
+    input.type = "radio";
+    input.className = "dap-face-radio";
+    input.name = question.questionId;
+    input.id = `${question.questionId}_${i}`;
+    input.value = i.toString();
+    
+    const label = document.createElement("label");
+    label.className = "dap-face-label";
+    label.htmlFor = `${question.questionId}_${i}`;
+    label.textContent = faces[faceIndex];
+    label.title = `Rating: ${i}`;
+    
+    option.appendChild(input);
+    option.appendChild(label);
+    scaleContainer.appendChild(option);
+  }
+  
+  container.appendChild(scaleContainer);
+}
+
+function renderNpsScale(container: HTMLElement, question: SurveyQuestion) {
+  const min = question.scaleMin || 0;
+  const max = question.scaleMax || 10;
+  
+  const npsContainer = document.createElement("div");
+  npsContainer.className = "dap-nps-container";
+  
+  const scaleOptions = document.createElement("div");
+  scaleOptions.className = "dap-nps-scale";
+  
+  for (let i = min; i <= max; i++) {
+    const option = document.createElement("div");
+    option.className = "dap-nps-option";
+    
+    const input = document.createElement("input");
+    input.type = "radio";
+    input.name = question.questionId;
+    input.id = `${question.questionId}_${i}`;
+    input.value = i.toString();
+    
+    const label = document.createElement("label");
+    label.htmlFor = input.id;
+    label.textContent = i.toString();
+    
+    option.appendChild(input);
+    option.appendChild(label);
+    scaleOptions.appendChild(option);
+  }
+  
+  npsContainer.appendChild(scaleOptions);
+  
+  // Labels under the scale
+  const labelContainer = document.createElement("div");
+  labelContainer.className = "dap-nps-labels";
+  
+  if (question.labelMin) {
+    const minLabel = document.createElement("div");
+    minLabel.className = "dap-nps-label-min";
+    minLabel.textContent = question.labelMin;
+    labelContainer.appendChild(minLabel);
+  }
+  
+  if (question.labelMax) {
+    const maxLabel = document.createElement("div");
+    maxLabel.className = "dap-nps-label-max";
+    maxLabel.textContent = question.labelMax;
+    labelContainer.appendChild(maxLabel);
+  }
+  
+  npsContainer.appendChild(labelContainer);
+  container.appendChild(npsContainer);
+}
+
+function renderNpsOptions(container: HTMLElement, question: SurveyQuestion) {
+  // Create predefined NPS categories
+  const npsCategories = [
+    { key: "not_likely", label: "Not Likely (0-2)" },
+    { key: "somewhat_likely", label: "Somewhat Likely (3-8)" },
+    { key: "very_likely", label: "Very Likely (9-10)" }
+  ];
+  
+  const optionsContainer = document.createElement("div");
+  optionsContainer.className = "dap-nps-options";
+  
+  npsCategories.forEach((category) => {
+    const wrapper = document.createElement("div");
+    wrapper.className = "dap-nps-category";
+    
+    const input = document.createElement("input");
+    input.type = "radio";
+    input.name = question.questionId;
+    input.id = `${question.questionId}_${category.key}`;
+    input.value = category.key;
+    
+    const label = document.createElement("label");
+    label.htmlFor = input.id;
+    label.textContent = category.label;
+    
+    wrapper.appendChild(input);
+    wrapper.appendChild(label);
+    optionsContainer.appendChild(wrapper);
+  });
+  
+  container.appendChild(optionsContainer);
+}
+
+function renderStarRating(container: HTMLElement, question: SurveyQuestion) {
+  const max = question.scaleMax || 5;
+  
+  // Define star labels for tooltips based on options if provided
+  // Otherwise use default labels
+  const defaultStarLabels = {
+    5: "Excellent",
+    4: "Very Good", 
+    3: "Good", 
+    2: "Fair", 
+    1: "Poor"
+  };
+  
+  // Create wrapper for stars and clear button
+  const ratingWrapper = document.createElement("div");
+  ratingWrapper.className = "dap-rating-wrapper";
+  
+  // Create radio button-based star rating
+  const starContainer = document.createElement("div");
+  starContainer.className = "dap-star-rating";
+  
+  // Add a hidden input to track if any star is selected
+  const hiddenStatusInput = document.createElement("input");
+  hiddenStatusInput.type = "hidden";
+  hiddenStatusInput.className = "dap-star-status";
+  hiddenStatusInput.value = "0";
+  starContainer.appendChild(hiddenStatusInput);
+  
+  // Create stars
+  for (let i = 1; i <= max; i++) {
+    // Create input radio button (hidden visually)
+    const input = document.createElement("input");
+    input.type = "radio";
+    input.name = question.questionId;
+    input.id = `${question.questionId}_${i}`;
+    // Calculate the actual rating value (from 1 to max) since we're using RTL
+    const actualRating = max - i + 1;
+    input.value = actualRating.toString();
+    input.className = "dap-star-input";
+    
+    // Update status when a star is selected
+    input.addEventListener("change", () => {
+      if (input.checked) {
+        hiddenStatusInput.value = "1";
+        clearButton.style.display = "inline-flex";
+      }
+    });
+    
+    // Create star label (visible element)
+    const label = document.createElement("label");
+    label.htmlFor = input.id;
+    label.className = "dap-star-label";
+    
+    // Get the appropriate label for this star
+    const starLabel = question.options && question.options.length === max
+      ? question.options[actualRating - 1]
+      : defaultStarLabels[actualRating as keyof typeof defaultStarLabels];
+      
+    label.setAttribute("aria-label", `${actualRating} star${actualRating > 1 ? 's' : ''}`);
+    label.setAttribute("title", `${actualRating} star${actualRating > 1 ? 's' : ''}: ${starLabel}`);
+    
+    // Add both to container
+    starContainer.appendChild(input);
+    starContainer.appendChild(label);
+  }
+  
+  // Create clear button
+  const clearButton = document.createElement("button");
+  clearButton.type = "button";
+  clearButton.className = "dap-clear-rating";
+  clearButton.textContent = "Clear";
+  clearButton.title = "Clear rating";
+  clearButton.style.display = "none"; // Hidden by default
+  
+  // Clear selection when clicked
+  clearButton.addEventListener("click", () => {
+    // Uncheck all inputs
+    starContainer.querySelectorAll("input[type='radio']").forEach((input) => {
+      (input as HTMLInputElement).checked = false;
+    });
+    
+    // Update status
+    hiddenStatusInput.value = "0";
+    
+    // Hide clear button
+    clearButton.style.display = "none";
+  });
+  
+  ratingWrapper.appendChild(starContainer);
+  ratingWrapper.appendChild(clearButton);
+  container.appendChild(ratingWrapper);
+}
+
+function renderStarChoice(container: HTMLElement, question: SurveyQuestion) {
+  // Set sensible defaults according to requirements
+  const min = question.scaleMin || 1;
+  const max = question.scaleMax || 5;
+  
+  // Default star labels if options are not provided
+  const defaultLabels = ["Poor", "Fair", "Good", "Very Good", "Excellent"];
+  
+  // Use options if provided, otherwise use default labels (limited to max)
+  const starLabels = question.options && question.options.length > 0
+    ? question.options
+    : defaultLabels.slice(0, max);
+  
+  // Create main container
+  const choiceContainer = document.createElement("div");
+  choiceContainer.className = "dap-star-choice-container";
+  choiceContainer.setAttribute("role", "radiogroup");
+  choiceContainer.setAttribute("aria-labelledby", `${question.questionId}-heading`);
+  
+  // Create options list
+  const optionsList = document.createElement("div");
+  optionsList.className = "dap-star-choice-options";
+  
+  // Create each star choice option
+  for (let i = 1; i <= max; i++) {
+    // Create option container
+    const optionItem = document.createElement("div");
+    optionItem.className = "dap-star-choice-option";
+    
+    // Create radio input
+    const input = document.createElement("input");
+    input.type = "radio";
+    input.className = "dap-star-choice-input";
+    input.name = question.questionId;
+    input.id = `${question.questionId}_${i}`;
+    input.value = i.toString();
+    
+    // Create label that contains stars and text
+    const label = document.createElement("label");
+    label.className = "dap-star-choice-label";
+    label.htmlFor = input.id;
+    
+    // Create stars display
+    const starsDisplay = document.createElement("div");
+    starsDisplay.className = "dap-star-choice-stars";
+    
+    // Add filled and empty stars based on the rating
+    for (let j = 1; j <= max; j++) {
+      const starSpan = document.createElement("span");
+      starSpan.className = j <= i 
+        ? "dap-star-choice-star filled" 
+        : "dap-star-choice-star";
+      starSpan.innerHTML = "★"; // Unicode star character
+      starsDisplay.appendChild(starSpan);
+    }
+    
+    // Create text label
+    const textLabel = document.createElement("span");
+    textLabel.className = "dap-star-choice-text";
+    textLabel.textContent = starLabels[i-1];
+    
+    // Add stars and text to the label
+    label.appendChild(starsDisplay);
+    label.appendChild(textLabel);
+    
+    // Add input and label to the option container
+    optionItem.appendChild(input);
+    optionItem.appendChild(label);
+    
+    // Add option to the list
+    optionsList.appendChild(optionItem);
+  }
+  
+  // Add options list to the main container
+  choiceContainer.appendChild(optionsList);
+  
+  // Add the container to the parent element
+  container.appendChild(choiceContainer);
+}
+
+/* ===================== Survey Adaptive Sizing ===================== */
+
+/**
+ * Adjusts survey modal size based on content to minimize scrollbars
+ * @param modal The modal element
+ * @param body The modal body element
+ */
+function adjustSurveyModalSize(modal: HTMLElement, body: HTMLElement): void {
+  console.debug('[DAP] Adjusting survey modal size based on content');
+  
+  try {
+    // Get content dimensions
+    const bodyRect = body.getBoundingClientRect();
+    const modalRect = modal.getBoundingClientRect();
+    
+    console.debug('[DAP] Content dimensions:', {
+      bodyWidth: bodyRect.width,
+      bodyHeight: bodyRect.height,
+      modalWidth: modalRect.width,
+      modalHeight: modalRect.height
+    });
+    
+    // Remove existing size classes
+    modal.classList.remove('dap-size-small', 'dap-size-medium', 'dap-size-large', 'dap-scrollable');
+    
+    // Determine optimal size based on content width
+    let sizeClass = 'dap-size-medium'; // default
+    
+    if (bodyRect.width <= 480) {
+      sizeClass = 'dap-size-small';
+    } else if (bodyRect.width <= 700) {
+      sizeClass = 'dap-size-medium';
+    } else if (bodyRect.width <= 1000) {
+      sizeClass = 'dap-size-large';
+    } else {
+      sizeClass = 'dap-size-large'; // max size for very wide content
+    }
+    
+    modal.classList.add(sizeClass);
+    
+    // Check if content needs scrolling after applying size class
+    requestAnimationFrame(() => {
+      const updatedBodyRect = body.getBoundingClientRect();
+      const updatedModalRect = modal.getBoundingClientRect();
+      
+      // Check for overflow
+      const needsHorizontalScroll = body.scrollWidth > updatedBodyRect.width;
+      const needsVerticalScroll = body.scrollHeight > updatedBodyRect.height;
+      
+      // Check for viewport overflow
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const wouldOverflowViewport = updatedModalRect.width > viewportWidth * 0.9 || 
+                                   updatedModalRect.height > viewportHeight * 0.9;
+      
+      if (needsHorizontalScroll || needsVerticalScroll || wouldOverflowViewport) {
+        modal.classList.add('dap-scrollable');
+        console.debug('[DAP] Added scrollable class due to overflow:', {
+          needsHorizontalScroll,
+          needsVerticalScroll,
+          wouldOverflowViewport
+        });
+      }
+      
+      console.debug('[DAP] Final survey modal size class:', sizeClass, {
+        hasScrollable: modal.classList.contains('dap-scrollable'),
+        finalWidth: updatedModalRect.width,
+        finalHeight: updatedModalRect.height
+      });
+    });
+    
+  } catch (error) {
+    console.warn('[DAP] Error adjusting survey modal size:', error);
+  }
+}
+
+/* ===================== Modal Shell (reused from modal.ts) ===================== */
+
+function createShell(theme?: Record<string, string>) {
+  const root = ensureRoot();
+
+  const wrap = document.createElement("div");
+  wrap.className = "dap-modal-wrap";
+  wrap.setAttribute("role", "dialog");
+  wrap.setAttribute("aria-modal", "true");
+  wrap.style.pointerEvents = "auto";
+  wrap.style.zIndex = "2147483647";
+
+  const dlg = document.createElement("div");
+  dlg.className = "dap-modal dap-survey-modal";
+  dlg.tabIndex = -1;
+  if (theme) for (const [k, v] of Object.entries(theme)) (dlg.style as any).setProperty(k, v as string);
+
+  const headerBar = document.createElement("div"); 
+  headerBar.className = "dap-header-bar";
+  
+  const titleEl = document.createElement("div");  
+  titleEl.className = "dap-modal-header";
+  
+  const closeBtn = document.createElement("button"); 
+  closeBtn.className = "dap-close"; 
+  closeBtn.setAttribute("aria-label", "Close"); 
+  closeBtn.innerHTML = "×";
+
+  headerBar.appendChild(titleEl); headerBar.appendChild(closeBtn);
+
+  const body = document.createElement("div");   body.className = "dap-modal-body dap-survey-body";
+  const footer = document.createElement("div"); footer.className = "dap-footer dap-nav";
+  const prevBtn = document.createElement("button"); prevBtn.className = "dap-secondary"; prevBtn.type = "button"; prevBtn.textContent = "Cancel";
+  const nextBtn = document.createElement("button"); nextBtn.className = "dap-cta"; nextBtn.type = "button"; nextBtn.textContent = "Submit";
+  footer.appendChild(prevBtn); footer.appendChild(nextBtn);
+
+  dlg.appendChild(headerBar); dlg.appendChild(body); dlg.appendChild(footer);
+
+  (root as unknown as Node).appendChild(wrap);
+  wrap.appendChild(dlg);
+
+  return { wrap, dlg, headerBar, titleEl, body, footer, prevBtn, nextBtn, closeBtn };
+}
+
+function ensureRoot(): ShadowRoot {
+  let host = document.querySelector("dap-root") as HTMLElement | null;
+  if (!host) {
+    host = document.createElement("dap-root");
+    host.style.position = "fixed";
+    host.style.zIndex = "2147483647"; // Maximum z-index
+    host.style.inset = "0";
+    host.style.pointerEvents = "none";
+    host.style.width = "100vw";
+    host.style.height = "100vh";
+    host.style.display = "flex";
+    host.style.alignItems = "center";
+    host.style.justifyContent = "center";
+    document.documentElement.appendChild(host);
+  }
+  const shadow = host.shadowRoot ?? host.attachShadow({ mode: "open" });
+  
+  if (!shadow.getElementById("dap-modal-style")) {
+    const style = document.createElement("style");
+    style.id = "dap-modal-style";
+    style.textContent = modalCssText;
+    shadow.appendChild(style);
+  }
+  
+  if (!shadow.getElementById("dap-survey-style")) {
+    const style = document.createElement("style");
+    style.id = "dap-survey-style";
+    style.textContent = surveyCssText;
+    shadow.appendChild(style);
+  }
+  
+  return shadow;
+}
+
+/* ===================== Utilities ===================== */
+
+function trapTab(e: KeyboardEvent, root: HTMLElement) {
+  const focusables = Array.from(root.querySelectorAll<HTMLElement>('a,button,input,textarea,select,details,[tabindex]:not([tabindex="-1"])')).filter(el => !el.hasAttribute("disabled"));
+  if (!focusables.length) return;
+  const first = focusables[0], last = focusables[focusables.length - 1];
+  if (e.shiftKey && document.activeElement === first) { last.focus(); e.preventDefault(); }
+  else if (!e.shiftKey && document.activeElement === last) { first.focus(); e.preventDefault(); }
+}