npm - @explorer02/cfm-survey-sdk - Versions diffs - 0.2.2 → 0.2.4 - Mend

@explorer02/cfm-survey-sdk 0.2.2 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (113) hide show

package/templates/wizard.html CHANGED Viewed

@@ -1,1139 +1,23 @@
 <!DOCTYPE html>
-<html lang="en" class="h-full bg-slate-950 text-slate-100">
+<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>CFM Survey SDK — Setup Wizard</title>
-  <!-- Google Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-  <!-- Tailwind CSS CDN -->
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script>
-    tailwind.config = {
-      theme: {
-        extend: {
-          fontFamily: {
-            sans: ['Inter', 'sans-serif'],
-            display: ['Outfit', 'sans-serif'],
-          },
-        },
-      },
-    }
-  </script>
+  <title>CFM Survey SDK — Wizard Moved</title>
   <style>
-    /* Glassmorphism custom helpers */
-    .glass-panel {
-      background: rgba(15, 23, 42, 0.45);
-      backdrop-filter: blur(16px);
-      -webkit-backdrop-filter: blur(16px);
-      border: 1px solid rgba(255, 255, 255, 0.08);
-    }
-    .glass-card {
-      background: rgba(30, 41, 59, 0.4);
-      border: 1px solid rgba(255, 255, 255, 0.05);
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-    .glass-card:hover {
-      background: rgba(30, 41, 59, 0.65);
-      border-color: rgba(99, 102, 241, 0.4);
-      box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.15);
-    }
-    .glass-card.active {
-      background: rgba(99, 102, 241, 0.15);
-      border-color: rgba(99, 102, 241, 0.8);
-      box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
-    }
-    /* Custom scrollbar */
-    ::-webkit-scrollbar {
-      width: 6px;
-      height: 6px;
-    }
-    ::-webkit-scrollbar-track {
-      background: rgba(15, 23, 42, 0.3);
-    }
-    ::-webkit-scrollbar-thumb {
-      background: rgba(255, 255, 255, 0.1);
-      border-radius: 999px;
-    }
-    ::-webkit-scrollbar-thumb:hover {
-      background: rgba(255, 255, 255, 0.2);
-    }
+    body { font-family: system-ui, sans-serif; background: #0f172a; color: #e2e8f0; display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; padding: 2rem; }
+    .card { max-width: 480px; text-align: center; background: rgba(30,41,59,0.6); border: 1px solid rgba(255,255,255,0.08); border-radius: 1rem; padding: 2.5rem; }
+    h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
+    p { color: #94a3b8; font-size: 0.9rem; line-height: 1.6; }
+    code { background: #1e293b; padding: 0.15rem 0.4rem; border-radius: 0.25rem; color: #818cf8; }
   </style>
 </head>
-<body class="h-full font-sans flex overflow-hidden selection:bg-indigo-500 selection:text-white">
-  <!-- BACKGROUND DECORATIONS -->
-  <div class="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-indigo-950/30 via-slate-950 to-slate-950"></div>
-  <div class="absolute top-0 left-1/4 w-[500px] h-[500px] bg-indigo-500/10 rounded-full blur-[120px] -z-10 animate-pulse"></div>
-  <div class="absolute bottom-0 right-1/4 w-[600px] h-[600px] bg-cyan-500/5 rounded-full blur-[150px] -z-10"></div>
-  <!-- MAIN CONTAINER -->
-  <div class="flex-1 flex overflow-hidden glass-panel m-4 md:m-6 lg:m-8 rounded-3xl shadow-2xl shadow-slate-950/50">
-    <!-- LEFT SIDEBAR: STEPS -->
-    <aside class="w-80 border-r border-white/5 flex flex-col justify-between p-8 bg-slate-950/20 backdrop-blur-md hidden md:flex">
-      <div>
-        <div class="flex items-center gap-3 mb-10">
-          <div class="h-10 w-10 rounded-xl bg-gradient-to-tr from-indigo-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-indigo-500/20">
-            <svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
-            </svg>
-          </div>
-          <div>
-            <h1 class="font-display font-bold text-lg leading-tight bg-gradient-to-r from-white to-slate-300 bg-clip-text text-transparent">CFM Survey SDK</h1>
-            <span class="text-xs text-indigo-400 font-semibold tracking-wider uppercase">Setup Wizard</span>
-          </div>
-        </div>
-        <nav class="space-y-1">
-          <div data-step="0" class="step-tab flex items-center gap-4 px-4 py-3 rounded-xl transition-all cursor-pointer bg-white/5 text-white font-medium border-l-4 border-indigo-500">
-            <span class="w-6 h-6 rounded-full bg-indigo-500 text-white font-bold text-xs flex items-center justify-center shadow-md shadow-indigo-500/30">0</span>
-            <span class="text-sm">Mockup Setup</span>
-          </div>
-          <div data-step="1" class="step-tab flex items-center gap-4 px-4 py-3 rounded-xl transition-all cursor-pointer text-slate-400 hover:text-slate-200">
-            <span class="w-6 h-6 rounded-full bg-slate-800 text-slate-400 font-bold text-xs flex items-center justify-center border border-white/5">1</span>
-            <span class="text-sm">Survey Identity</span>
-          </div>
-          <div data-step="2" class="step-tab flex items-center gap-4 px-4 py-3 rounded-xl transition-all cursor-pointer text-slate-400 hover:text-slate-200">
-            <span class="w-6 h-6 rounded-full bg-slate-800 text-slate-400 font-bold text-xs flex items-center justify-center border border-white/5">2</span>
-            <span class="text-sm">Logo Setup</span>
-          </div>
-          <div data-step="3" class="step-tab flex items-center gap-4 px-4 py-3 rounded-xl transition-all cursor-pointer text-slate-400 hover:text-slate-200">
-            <span class="w-6 h-6 rounded-full bg-slate-800 text-slate-400 font-bold text-xs flex items-center justify-center border border-white/5">3</span>
-            <span class="text-sm">UI Layout</span>
-          </div>
-          <div data-step="4" class="step-tab flex items-center gap-4 px-4 py-3 rounded-xl transition-all cursor-pointer text-slate-400 hover:text-slate-200">
-            <span class="w-6 h-6 rounded-full bg-slate-800 text-slate-400 font-bold text-xs flex items-center justify-center border border-white/5">4</span>
-            <span class="text-sm">Color Branding</span>
-          </div>
-          <div data-step="5" class="step-tab flex items-center gap-4 px-4 py-3 rounded-xl transition-all cursor-pointer text-slate-400 hover:text-slate-200">
-            <span class="w-6 h-6 rounded-full bg-slate-800 text-slate-400 font-bold text-xs flex items-center justify-center border border-white/5">5</span>
-            <span class="text-sm">Config & Mode</span>
-          </div>
-          <div data-step="6" class="step-tab flex items-center gap-4 px-4 py-3 rounded-xl transition-all cursor-pointer text-slate-400 hover:text-slate-200">
-            <span class="w-6 h-6 rounded-full bg-slate-800 text-slate-400 font-bold text-xs flex items-center justify-center border border-white/5">6</span>
-            <span class="text-sm">Ready to Build</span>
-          </div>
-        </nav>
-      </div>
-      <div class="pt-6 border-t border-white/5">
-        <button id="btn-skip-all" type="button" class="w-full text-center py-2 px-4 rounded-xl border border-white/10 text-xs font-medium text-slate-400 hover:text-white hover:bg-white/5 hover:border-white/20 transition-all">
-          Skip All Remaining & Finish
-        </button>
-      </div>
-    </aside>
-    <!-- CENTER & RIGHT: MAIN WORK AREA -->
-    <div class="flex-1 flex flex-col justify-between overflow-hidden">
-      <!-- HEADER -->
-      <header class="h-20 border-b border-white/5 flex items-center justify-between px-8 bg-slate-900/10">
-        <div class="flex items-center gap-2">
-          <span class="h-2.5 w-2.5 rounded-full bg-emerald-500 animate-pulse"></span>
-          <span class="text-xs text-slate-400 font-medium tracking-wide">Local Configuration Server is active</span>
-        </div>
-        <div>
-          <button id="btn-quit" type="button" class="text-xs text-slate-400 hover:text-red-400 transition-all py-1.5 px-3 rounded-lg hover:bg-red-500/10 border border-transparent hover:border-red-500/10">
-            Quit Setup
-          </button>
-        </div>
-      </header>
-      <!-- CONTENT BODY (SPLIT FORM & LIVE PREVIEW) -->
-      <main class="flex-1 flex overflow-hidden">
-        <!-- LEFT: SCROLLABLE FORM -->
-        <div class="flex-1 overflow-y-auto p-8 md:p-10 lg:p-12 space-y-8 min-w-[320px]">
-          <form id="wizard-form" onsubmit="event.preventDefault();" class="h-full flex flex-col justify-between">
-            <div class="space-y-6">
-              <!-- STEP 0: MOCKUP SETUP -->
-              <section id="step-panel-0" class="step-panel space-y-6">
-                <div class="space-y-2">
-                  <span class="text-indigo-400 text-xs font-semibold uppercase tracking-wider">Phase 0 of 7</span>
-                  <h2 class="font-display font-bold text-2xl lg:text-3xl text-white">Mockup Detection</h2>
-                  <p class="text-sm text-slate-400">If you shared mockup images with the AI agent in the IDE chat, the agent can analyze them to match the visual layout and styles.</p>
-                </div>
-                <div class="space-y-4">
-                  <label class="block text-sm font-medium text-slate-300">Did you provide UI mockup screenshots in the chat?</label>
-                  <div class="grid grid-cols-2 gap-4">
-                    <button type="button" data-val="true" data-field="hasMockup" class="toggle-card glass-card p-6 rounded-2xl text-center focus:outline-none flex flex-col items-center gap-2">
-                      <span class="text-lg font-bold text-white">Yes</span>
-                      <span class="text-xs text-slate-400">Agent will replicate screens</span>
-                    </button>
-                    <button type="button" data-val="false" data-field="hasMockup" class="toggle-card glass-card p-6 rounded-2xl text-center focus:outline-none flex flex-col items-center gap-2 active">
-                      <span class="text-lg font-bold text-white">No</span>
-                      <span class="text-xs text-slate-400">Design a standard visual UI</span>
-                    </button>
-                  </div>
-                </div>
-              </section>
-              <!-- STEP 1: SURVEY IDENTITY -->
-              <section id="step-panel-1" class="step-panel space-y-6 hidden">
-                <div class="space-y-2">
-                  <span class="text-indigo-400 text-xs font-semibold uppercase tracking-wider">Phase 1 of 7</span>
-                  <h2 class="font-display font-bold text-2xl lg:text-3xl text-white">Survey Identity</h2>
-                  <p class="text-sm text-slate-400">Configure corporate branding and headings displayed to users.</p>
-                </div>
-                <div class="space-y-4">
-                  <div class="space-y-1">
-                    <label for="input-surveyTitle" class="block text-xs font-medium text-slate-400 uppercase tracking-wider">Survey Title</label>
-                    <input type="text" id="input-surveyTitle" placeholder="Customer Feedback Survey" class="w-full bg-slate-900 border border-white/10 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all">
-                  </div>
-                  <div class="space-y-1">
-                    <label for="input-companyName" class="block text-xs font-medium text-slate-400 uppercase tracking-wider">Company Name</label>
-                    <input type="text" id="input-companyName" placeholder="Sprinklr" class="w-full bg-slate-900 border border-white/10 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all">
-                  </div>
-                  <div class="space-y-1">
-                    <label for="input-browserTabTitle" class="block text-xs font-medium text-slate-400 uppercase tracking-wider">Browser Tab Title</label>
-                    <input type="text" id="input-browserTabTitle" placeholder="Customer Feedback Survey" class="w-full bg-slate-900 border border-white/10 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all">
-                  </div>
-                  <div class="space-y-1">
-                    <label for="input-thankYouMessage" class="block text-xs font-medium text-slate-400 uppercase tracking-wider">Thank-You Message</label>
-                    <input type="text" id="input-thankYouMessage" placeholder="Thank you for your valuable feedback!" class="w-full bg-slate-900 border border-white/10 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all">
-                  </div>
-                </div>
-              </section>
-              <!-- STEP 2: LOGO SETUP -->
-              <section id="step-panel-2" class="step-panel space-y-6 hidden">
-                <div class="space-y-2">
-                  <span class="text-indigo-400 text-xs font-semibold uppercase tracking-wider">Phase 2 of 7</span>
-                  <h2 class="font-display font-bold text-2xl lg:text-3xl text-white">Logo Setup</h2>
-                  <p class="text-sm text-slate-400">Drag and drop your brand logo here. It will be saved automatically to your project's <code>public/</code> folder.</p>
-                </div>
-                <div class="space-y-4">
-                  <div id="logo-dropzone" class="border-2 border-dashed border-white/10 hover:border-indigo-500/50 transition-all rounded-3xl p-8 text-center cursor-pointer flex flex-col items-center justify-center gap-3 bg-slate-900/40">
-                    <svg class="w-10 h-10 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
-                    </svg>
-                    <div>
-                      <p class="text-sm text-slate-200 font-medium">Click to upload or drag logo here</p>
-                      <p class="text-xs text-slate-400 mt-1">Supports PNG, JPG, SVG. Leaves blank to use default Sprinklr logo.</p>
-                    </div>
-                    <input type="file" id="input-logoFile" class="hidden" accept="image/*">
-                  </div>
-                  <div id="logo-preview-container" class="hidden glass-card p-4 rounded-2xl flex items-center justify-between gap-4">
-                    <div class="flex items-center gap-3">
-                      <img id="logo-preview-img" src="" class="max-h-12 w-auto object-contain rounded bg-slate-950 p-1 border border-white/5">
-                      <div>
-                        <p id="logo-preview-name" class="text-xs text-white font-medium max-w-[200px] truncate"></p>
-                        <p class="text-[10px] text-emerald-400 flex items-center gap-1 font-semibold">
-                          <span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span> Uploaded & Ready
-                        </p>
-                      </div>
-                    </div>
-                    <button id="btn-remove-logo" type="button" class="text-xs text-slate-400 hover:text-red-400 transition-all">Remove</button>
-                  </div>
-                </div>
-              </section>
-              <!-- STEP 3: UI LAYOUT -->
-              <section id="step-panel-3" class="step-panel space-y-6 hidden">
-                <div class="space-y-2">
-                  <span class="text-indigo-400 text-xs font-semibold uppercase tracking-wider">Phase 3 of 7</span>
-                  <h2 class="font-display font-bold text-2xl lg:text-3xl text-white">UI Layout</h2>
-                  <p class="text-sm text-slate-400">Adjust the core components and structure of your survey UI.</p>
-                </div>
-                <div class="space-y-5">
-                  <div class="flex items-center justify-between border-b border-white/5 pb-3">
-                    <div>
-                      <h4 class="text-sm font-medium text-white">Show Header Bar</h4>
-                      <p class="text-xs text-slate-400">Render logo and company name at the top</p>
-                    </div>
-                    <button type="button" data-field="showHeader" class="toggle-btn w-12 h-6 rounded-full bg-indigo-500 p-0.5 transition-all flex items-center justify-end focus:outline-none"><span class="w-5 h-5 rounded-full bg-white shadow-md"></span></button>
-                  </div>
-                  <div class="flex items-center justify-between border-b border-white/5 pb-3">
-                    <div>
-                      <h4 class="text-sm font-medium text-white">Show Footer</h4>
-                      <p class="text-xs text-slate-400">Render copyright and default footer links</p>
-                    </div>
-                    <button type="button" data-field="showFooter" class="toggle-btn w-12 h-6 rounded-full bg-indigo-500 p-0.5 transition-all flex items-center justify-end focus:outline-none"><span class="w-5 h-5 rounded-full bg-white shadow-md"></span></button>
-                  </div>
-                  <div class="flex items-center justify-between border-b border-white/5 pb-3">
-                    <div>
-                      <h4 class="text-sm font-medium text-white">Show Progress Bar</h4>
-                      <p class="text-xs text-slate-400">Displays survey completion status</p>
-                    </div>
-                    <button type="button" data-field="showProgressBar" class="toggle-btn w-12 h-6 rounded-full bg-indigo-500 p-0.5 transition-all flex items-center justify-end focus:outline-none"><span class="w-5 h-5 rounded-full bg-white shadow-md"></span></button>
-                  </div>
-                  <div class="flex items-center justify-between border-b border-white/5 pb-3">
-                    <div>
-                      <h4 class="text-sm font-medium text-white">Language Switcher</h4>
-                      <p class="text-xs text-slate-400">Include language selection dropdown</p>
-                    </div>
-                    <button type="button" data-field="showLanguageSwitcher" class="toggle-btn w-12 h-6 rounded-full bg-slate-800 p-0.5 transition-all flex items-center justify-start focus:outline-none"><span class="w-5 h-5 rounded-full bg-slate-400 shadow-md"></span></button>
-                  </div>
-                  <div class="flex items-center justify-between border-b border-white/5 pb-3">
-                    <div>
-                      <h4 class="text-sm font-medium text-white">Show "Next" Button</h4>
-                      <p class="text-xs text-slate-400">Allows moving forward in multi-page surveys</p>
-                    </div>
-                    <button type="button" data-field="showNextButton" class="toggle-btn w-12 h-6 rounded-full bg-indigo-500 p-0.5 transition-all flex items-center justify-end focus:outline-none"><span class="w-5 h-5 rounded-full bg-white shadow-md"></span></button>
-                  </div>
-                  <div id="next-label-container" class="space-y-1 pl-4 border-l border-white/10">
-                    <label for="input-nextButtonText" class="block text-[10px] font-medium text-slate-400 uppercase tracking-wider">Next Button Label</label>
-                    <input type="text" id="input-nextButtonText" placeholder="Next" class="w-full bg-slate-900 border border-white/10 rounded-xl px-4 py-2 text-xs text-white focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all">
-                  </div>
-                  <div class="flex items-center justify-between border-b border-white/5 pb-3">
-                    <div>
-                      <h4 class="text-sm font-medium text-white">Show "Back" Button</h4>
-                      <p class="text-xs text-slate-400">Allows navigating back to prior pages</p>
-                    </div>
-                    <button type="button" data-field="showBackButton" class="toggle-btn w-12 h-6 rounded-full bg-indigo-500 p-0.5 transition-all flex items-center justify-end focus:outline-none"><span class="w-5 h-5 rounded-full bg-white shadow-md"></span></button>
-                  </div>
-                  <div id="back-label-container" class="space-y-1 pl-4 border-l border-white/10">
-                    <label for="input-backButtonText" class="block text-[10px] font-medium text-slate-400 uppercase tracking-wider">Back Button Label</label>
-                    <input type="text" id="input-backButtonText" placeholder="Back" class="w-full bg-slate-900 border border-white/10 rounded-xl px-4 py-2 text-xs text-white focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all">
-                  </div>
-                  <div class="flex items-center justify-between border-b border-white/5 pb-3">
-                    <div>
-                      <h4 class="text-sm font-medium text-white">Question Numbers</h4>
-                      <p class="text-xs text-slate-400">Prefix labels with Q1, Q2, etc.</p>
-                    </div>
-                    <button type="button" data-field="showQuestionNumbers" class="toggle-btn w-12 h-6 rounded-full bg-indigo-500 p-0.5 transition-all flex items-center justify-end focus:outline-none"><span class="w-5 h-5 rounded-full bg-white shadow-md"></span></button>
-                  </div>
-                  <div class="flex items-center justify-between border-b border-white/5 pb-3">
-                    <div>
-                      <h4 class="text-sm font-medium text-white">Required Indicator</h4>
-                      <p class="text-xs text-slate-400">Append asterisk (*) to required fields</p>
-                    </div>
-                    <button type="button" data-field="showRequiredAsterisk" class="toggle-btn w-12 h-6 rounded-full bg-indigo-500 p-0.5 transition-all flex items-center justify-end focus:outline-none"><span class="w-5 h-5 rounded-full bg-white shadow-md"></span></button>
-                  </div>
-                  <div class="flex items-center justify-between border-b border-white/5 pb-3">
-                    <div>
-                      <h4 class="text-sm font-medium text-white">Animations</h4>
-                      <p class="text-xs text-slate-400">Enable transitions between steps</p>
-                    </div>
-                    <button type="button" data-field="animationsEnabled" class="toggle-btn w-12 h-6 rounded-full bg-indigo-500 p-0.5 transition-all flex items-center justify-end focus:outline-none"><span class="w-5 h-5 rounded-full bg-white shadow-md"></span></button>
-                  </div>
-                  <div class="grid grid-cols-3 gap-3">
-                    <div class="space-y-1">
-                      <label for="select-width" class="block text-[10px] font-medium text-slate-400 uppercase tracking-wider">Width</label>
-                      <select id="select-width" class="w-full bg-slate-900 border border-white/10 rounded-xl px-3 py-2 text-xs text-white focus:outline-none transition-all">
-                        <option value="narrow">Narrow (xl)</option>
-                        <option value="standard" selected>Standard (3xl)</option>
-                        <option value="wide">Wide (5xl)</option>
-                      </select>
-                    </div>
-                    <div class="space-y-1">
-                      <label for="select-borderStyle" class="block text-[10px] font-medium text-slate-400 uppercase tracking-wider">Corners</label>
-                      <select id="select-borderStyle" class="w-full bg-slate-900 border border-white/10 rounded-xl px-3 py-2 text-xs text-white focus:outline-none transition-all">
-                        <option value="sharp">Sharp</option>
-                        <option value="rounded" selected>Rounded</option>
-                        <option value="pill">Pill</option>
-                      </select>
-                    </div>
-                    <div class="space-y-1">
-                      <label for="select-fontStyle" class="block text-[10px] font-medium text-slate-400 uppercase tracking-wider">Font</label>
-                      <select id="select-fontStyle" class="w-full bg-slate-900 border border-white/10 rounded-xl px-3 py-2 text-xs text-white focus:outline-none transition-all">
-                        <option value="system">System</option>
-                        <option value="modern" selected>Modern Inter</option>
-                        <option value="serif">Classic Serif</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-              </section>
-              <!-- STEP 4: COLOR BRANDING -->
-              <section id="step-panel-4" class="step-panel space-y-6 hidden">
-                <div class="space-y-2">
-                  <span class="text-indigo-400 text-xs font-semibold uppercase tracking-wider">Phase 4 of 7</span>
-                  <h2 class="font-display font-bold text-2xl lg:text-3xl text-white">Color Branding</h2>
-                  <p class="text-sm text-slate-400">Establish the survey theme palette.</p>
-                </div>
-                <div class="space-y-4">
-                  <div class="space-y-2">
-                    <label class="block text-xs font-medium text-slate-400 uppercase tracking-wider">Theme Source</label>
-                    <div class="grid grid-cols-2 gap-2">
-                      <button type="button" data-val="auto" data-field="colorSource" class="theme-source-card glass-card p-3 rounded-xl text-xs text-center font-medium text-white active">Agent Auto Pick</button>
-                      <button type="button" data-val="logo" data-field="colorSource" class="theme-source-card glass-card p-3 rounded-xl text-xs text-center font-medium text-white">Derive from Logo</button>
-                      <button type="button" data-val="mockup" id="btn-theme-mockup" data-field="colorSource" class="theme-source-card glass-card p-3 rounded-xl text-xs text-center font-medium text-white opacity-40 cursor-not-allowed" disabled>Extract Mockup</button>
-                      <button type="button" data-val="custom" data-field="colorSource" class="theme-source-card glass-card p-3 rounded-xl text-xs text-center font-medium text-white">Custom Scheme</button>
-                    </div>
-                  </div>
-                  <!-- CUSTOM SCHEME CONFIGURATION -->
-                  <div id="custom-theme-container" class="hidden space-y-4 pt-4 border-t border-white/5">
-                    <div class="space-y-2">
-                      <label class="block text-xs font-medium text-slate-400 uppercase tracking-wider">Custom Setup Mode</label>
-                      <div class="grid grid-cols-2 gap-2">
-                        <button type="button" id="btn-pick-presets" class="glass-card p-3 rounded-xl text-xs text-center font-semibold text-white active">Curated Presets</button>
-                        <button type="button" id="btn-pick-hex" class="glass-card p-3 rounded-xl text-xs text-center font-semibold text-white">Custom Hex Codes</button>
-                      </div>
-                    </div>
-                    <!-- PRESETS SELECTION -->
-                    <div id="presets-panel" class="space-y-2">
-                      <label class="block text-xs font-medium text-slate-400">Choose Curated Scheme</label>
-                      <div class="space-y-2" id="presets-list">
-                        <!-- Filled in JS -->
-                      </div>
-                    </div>
-                    <!-- HEX INPUTS -->
-                    <div id="hex-panel" class="hidden space-y-3">
-                      <label class="block text-xs font-medium text-slate-400">Configure Color Swatches</label>
-                      <div class="grid grid-cols-2 gap-3">
-                        <div class="space-y-1">
-                          <label class="text-[10px] text-slate-400 font-medium">Primary (Main)</label>
-                          <div class="flex items-center gap-1.5">
-                            <input type="color" id="hex-primary" value="#1A1F36" class="w-6 h-6 rounded-md bg-transparent border-0 cursor-pointer p-0">
-                            <input type="text" id="text-primary" value="#1A1F36" class="bg-slate-900 border border-white/10 rounded-lg px-2 py-1 text-xs text-white w-20">
-                          </div>
-                        </div>
-                        <div class="space-y-1">
-                          <label class="text-[10px] text-slate-400 font-medium">Secondary (Light bg)</label>
-                          <div class="flex items-center gap-1.5">
-                            <input type="color" id="hex-secondary" value="#E8F5FD" class="w-6 h-6 rounded-md bg-transparent border-0 cursor-pointer p-0">
-                            <input type="text" id="text-secondary" value="#E8F5FD" class="bg-slate-900 border border-white/10 rounded-lg px-2 py-1 text-xs text-white w-20">
-                          </div>
-                        </div>
-                        <div class="space-y-1">
-                          <label class="text-[10px] text-slate-400 font-medium">Accent (Details)</label>
-                          <div class="flex items-center gap-1.5">
-                            <input type="color" id="hex-accent" value="#00B5AD" class="w-6 h-6 rounded-md bg-transparent border-0 cursor-pointer p-0">
-                            <input type="text" id="text-accent" value="#00B5AD" class="bg-slate-900 border border-white/10 rounded-lg px-2 py-1 text-xs text-white w-20">
-                          </div>
-                        </div>
-                        <div class="space-y-1">
-                          <label class="text-[10px] text-slate-400 font-medium">Background</label>
-                          <div class="flex items-center gap-1.5">
-                            <input type="color" id="hex-background" value="#FFFFFF" class="w-6 h-6 rounded-md bg-transparent border-0 cursor-pointer p-0">
-                            <input type="text" id="text-background" value="#FFFFFF" class="bg-slate-900 border border-white/10 rounded-lg px-2 py-1 text-xs text-white w-20">
-                          </div>
-                        </div>
-                        <div class="space-y-1 col-span-2">
-                          <label class="text-[10px] text-slate-400 font-medium">Text Color</label>
-                          <div class="flex items-center gap-1.5">
-                            <input type="color" id="hex-text" value="#1A1F36" class="w-6 h-6 rounded-md bg-transparent border-0 cursor-pointer p-0">
-                            <input type="text" id="text-text" value="#1A1F36" class="bg-slate-900 border border-white/10 rounded-lg px-2 py-1 text-xs text-white w-20">
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </section>
-              <!-- STEP 5: CONFIG & MODE -->
-              <section id="step-panel-5" class="step-panel space-y-6 hidden">
-                <div class="space-y-2">
-                  <span class="text-indigo-400 text-xs font-semibold uppercase tracking-wider">Phase 5 of 7</span>
-                  <h2 class="font-display font-bold text-2xl lg:text-3xl text-white">Variables & Mode</h2>
-                  <p class="text-sm text-slate-400">Configure query placeholder mappings and environment settings.</p>
-                </div>
-                <div class="space-y-4">
-                  <div class="grid grid-cols-2 gap-4">
-                    <div class="space-y-1">
-                      <label for="input-firstName" class="block text-[10px] font-medium text-slate-400 uppercase tracking-wider">Test First Name</label>
-                      <input type="text" id="input-firstName" placeholder="Unnat" class="w-full bg-slate-900 border border-white/10 rounded-xl px-4 py-2.5 text-xs text-white focus:outline-none focus:border-indigo-500 transition-all">
-                    </div>
-                    <div class="space-y-1">
-                      <label for="input-lastName" class="block text-[10px] font-medium text-slate-400 uppercase tracking-wider">Test Last Name</label>
-                      <input type="text" id="input-lastName" placeholder="Agrawal" class="w-full bg-slate-900 border border-white/10 rounded-xl px-4 py-2.5 text-xs text-white focus:outline-none focus:border-indigo-500 transition-all">
-                    </div>
-                  </div>
-                  <div class="space-y-1">
-                    <label for="input-email" class="block text-[10px] font-medium text-slate-400 uppercase tracking-wider">Test Email Address</label>
-                    <input type="email" id="input-email" placeholder="unnat.agrawal@sprinklr.com" class="w-full bg-slate-900 border border-white/10 rounded-xl px-4 py-2.5 text-xs text-white focus:outline-none focus:border-indigo-500 transition-all">
-                  </div>
-                  <div class="flex items-center justify-between border-t border-white/5 pt-4">
-                    <div>
-                      <h4 class="text-sm font-medium text-white">Debug / Test Mode</h4>
-                      <p class="text-xs text-slate-400">Outputs debug telemetry in browser console</p>
-                    </div>
-                    <button type="button" data-field="debug" class="toggle-btn w-12 h-6 rounded-full bg-indigo-500 p-0.5 transition-all flex items-center justify-end focus:outline-none"><span class="w-5 h-5 rounded-full bg-white shadow-md"></span></button>
-                  </div>
-                </div>
-              </section>
-              <!-- STEP 6: READY TO BUILD -->
-              <section id="step-panel-6" class="step-panel space-y-6 hidden">
-                <div class="space-y-2">
-                  <span class="text-indigo-400 text-xs font-semibold uppercase tracking-wider">Phase 6 of 7</span>
-                  <h2 class="font-display font-bold text-2xl lg:text-3xl text-white">Deploy & Complete</h2>
-                  <p class="text-sm text-slate-400">Configure auto-deployment preferences before saving the config.</p>
-                </div>
-                <div class="space-y-5">
-                  <div class="flex items-center justify-between">
-                    <div>
-                      <h4 class="text-sm font-medium text-white">Auto-Deploy to Vercel</h4>
-                      <p class="text-xs text-slate-400">Runs deployment script automatically upon compile success</p>
-                    </div>
-                    <button type="button" data-field="deployToVercel" class="toggle-btn w-12 h-6 rounded-full bg-indigo-500 p-0.5 transition-all flex items-center justify-end focus:outline-none"><span class="w-5 h-5 rounded-full bg-white shadow-md"></span></button>
-                  </div>
-                  <div class="glass-card p-6 rounded-2xl border border-indigo-500/20 bg-indigo-500/5 mt-6 space-y-3">
-                    <h4 class="text-sm font-bold text-indigo-300 flex items-center gap-2">
-                      <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
-                      </svg>
-                      Setup Complete!
-                    </h4>
-                    <p class="text-xs text-slate-300 leading-relaxed">Click <strong>Complete Setup</strong> below to save your configuration file. The IDE agent will read it instantly and proceed to build your survey interface.</p>
-                  </div>
-                </div>
-              </section>
-            </div>
-            <!-- BUTTONS NAVIGATION -->
-            <div class="flex items-center justify-between border-t border-white/5 pt-6 mt-8">
-              <button id="btn-prev" type="button" class="px-5 py-2.5 rounded-xl border border-white/10 text-sm font-medium text-slate-300 hover:text-white hover:bg-white/5 hover:border-white/20 transition-all opacity-0 pointer-events-none">
-                Previous
-              </button>
-              <div class="flex gap-3">
-                <button id="btn-skip" type="button" class="px-5 py-2.5 rounded-xl text-sm font-medium text-slate-400 hover:text-white transition-all">
-                  Skip
-                </button>
-                <button id="btn-next" type="button" class="px-6 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-sm font-semibold text-white shadow-lg shadow-indigo-600/20 hover:shadow-indigo-500/30 transition-all">
-                  Next
-                </button>
-                <button id="btn-finish" type="button" class="hidden px-6 py-2.5 rounded-xl bg-gradient-to-r from-indigo-500 to-cyan-500 hover:from-indigo-400 hover:to-cyan-400 text-sm font-bold text-white shadow-lg shadow-indigo-500/20 transition-all">
-                  Complete Setup
-                </button>
-              </div>
-            </div>
-          </form>
-        </div>
-        <!-- RIGHT: SURVEY THEME PREVIEW PANEL -->
-        <div class="w-[420px] border-l border-white/5 bg-slate-950/40 p-8 flex flex-col justify-between hidden lg:flex select-none">
-          <div class="space-y-4">
-            <h3 class="font-display font-bold text-sm text-slate-400 uppercase tracking-wider">Real-time Preview</h3>
-            <!-- SAMPLE SURVEY CARD PREVIEW -->
-            <div id="preview-survey-card" class="rounded-2xl shadow-xl overflow-hidden border border-slate-800 transition-all duration-300 bg-white text-slate-900">
-              <!-- HEADER -->
-              <div id="preview-header" class="px-5 py-4 border-b flex items-center gap-3 transition-all duration-300">
-                <img id="preview-logo" src="https://www.aprimo.com/wp-content/uploads/2024/03/Sprinklr_Logo-1.png" class="max-h-6 w-auto object-contain" alt="Logo">
-                <span id="preview-companyName" class="text-xs font-semibold tracking-wider text-slate-800">Sprinklr</span>
-              </div>
-              <!-- CONTENT -->
-              <div class="p-6 space-y-6">
-                <!-- PROGRESS -->
-                <div id="preview-progress-container" class="space-y-1.5">
-                  <div class="flex justify-between text-[10px] text-slate-400 font-semibold">
-                    <span>Progress</span>
-                    <span>35%</span>
-                  </div>
-                  <div class="w-full h-1.5 bg-slate-100 rounded-full overflow-hidden">
-                    <div id="preview-progress-bar" class="w-[35%] h-full bg-[#00B5AD] rounded-full transition-all duration-300"></div>
-                  </div>
-                </div>
-                <!-- QUESTION -->
-                <div class="space-y-3">
-                  <h4 class="text-sm font-bold leading-snug flex gap-1.5 items-start">
-                    <span id="preview-q-num" class="text-slate-400 font-medium">Q1.</span>
-                    <span id="preview-surveyTitle">Customer Feedback Survey</span>
-                    <span id="preview-asterisk" class="text-red-500">*</span>
-                  </h4>
-                  <p class="text-[11px] text-slate-400">How would you rate your overall branding and configuration setup experience?</p>
-                  <!-- RATING ROW -->
-                  <div class="grid grid-cols-5 gap-2">
-                    <button type="button" class="preview-badge h-9 rounded-lg border text-xs font-semibold flex items-center justify-center transition-all bg-[#E8F5FD] border-indigo-500/20 text-[#1A1F36]">1</button>
-                    <button type="button" class="preview-badge h-9 rounded-lg border text-xs font-semibold flex items-center justify-center transition-all bg-slate-50 border-slate-200 hover:bg-slate-100 text-slate-700">2</button>
-                    <button type="button" class="preview-badge h-9 rounded-lg border text-xs font-semibold flex items-center justify-center transition-all bg-slate-50 border-slate-200 hover:bg-slate-100 text-slate-700">3</button>
-                    <button type="button" class="preview-badge h-9 rounded-lg border text-xs font-semibold flex items-center justify-center transition-all bg-slate-50 border-slate-200 hover:bg-slate-100 text-slate-700">4</button>
-                    <button type="button" class="preview-badge h-9 rounded-lg border text-xs font-semibold flex items-center justify-center transition-all bg-slate-50 border-slate-200 hover:bg-slate-100 text-slate-700">5</button>
-                  </div>
-                </div>
-              </div>
-              <!-- FOOTER & BUTTONS -->
-              <div class="px-6 py-4 border-t bg-slate-50/50 flex items-center justify-between">
-                <button type="button" id="preview-btn-back" class="text-[10px] font-semibold text-slate-500 px-3 py-1.5 rounded-lg border border-slate-200 bg-white">Back</button>
-                <button type="button" id="preview-btn-next" class="text-[10px] font-bold text-white px-4 py-1.5 rounded-lg bg-[#1A1F36] shadow-sm">Next</button>
-              </div>
-            </div>
-          </div>
-          <!-- FOOTER / HINT -->
-          <div class="text-[10px] text-slate-500 leading-normal bg-slate-900/10 p-4 rounded-xl border border-white/5">
-            This card represents a live visualization of the generated colors and components configured in your survey config.
-          </div>
-        </div>
-      </main>
-    </div>
+<body>
+  <div class="card">
+    <h1>UI Customization Wizard</h1>
+    <p>This wizard has moved to a React app. After building your survey and starting the dev server, run:</p>
+    <p><code>npx cfm-sdk customize</code></p>
+    <p style="margin-top:1rem;font-size:0.8rem;">Build the wizard first: <code>npm run build:wizard</code> in packages/sdk</p>
   </div>
-  <!-- JS CONTROLS -->
-  <script>
-    // State Variables
-    let currentStep = 0;
-    const totalSteps = 7;
-    const config = {
-      hasMockup: false,
-      surveyTitle: "Customer Feedback Survey",
-      companyName: "Sprinklr",
-      browserTabTitle: "Customer Feedback Survey",
-      thankYouMessage: "Thank you for your valuable feedback!",
-      logo: {
-        fileName: null,
-        defaultUrl: "https://www.aprimo.com/wp-content/uploads/2024/03/Sprinklr_Logo-1.png"
-      },
-      layout: {
-        showHeader: true,
-        showFooter: true,
-        showProgressBar: true,
-        showLanguageSwitcher: false,
-        showNextButton: true,
-        showBackButton: true,
-        width: "standard",
-        borderStyle: "rounded",
-        fontStyle: "modern",
-        showQuestionNumbers: true,
-        showRequiredAsterisk: true,
-        animationsEnabled: true,
-      },
-      buttons: {
-        submit: "Submit",
-        next: "Next",
-        back: "Back",
-      },
-      colorSource: "auto",
-      colorScheme: {
-        primary: "#1A1F36",
-        secondary: "#E8F5FD",
-        accent: "#00B5AD",
-        background: "#FFFFFF",
-        text: "#1A1F36",
-        buttonText: "#FFFFFF",
-      },
-      placeholders: {
-        firstName: "Unnat",
-        lastName: "Agrawal",
-        email: "unnat.agrawal@sprinklr.com",
-      },
-      debug: true,
-      deployToVercel: true
-    };
-    const COLOR_SCHEMES_PRESETS = [
-      { name: 'Indigo + Amber', primary: '#4F46E5', secondary: '#E0E7FF', accent: '#F59E0B', bg: '#FFFFFF', text: '#111827' },
-      { name: 'Slate + Teal',   primary: '#334155', secondary: '#F1F5F9', accent: '#0D9488', bg: '#FFFFFF', text: '#0F172A' },
-      { name: 'Amber + Brown',   primary: '#B45309', secondary: '#FEF3C7', accent: '#D97706', bg: '#FFFBEB', text: '#1C1917' },
-      { name: 'Violet + Green',  primary: '#7C3AED', secondary: '#EDE9FE', accent: '#10B981', bg: '#FFFFFF', text: '#111827' },
-      { name: 'Navy + Sky',      primary: '#1E3A5F', secondary: '#DBEAFE', accent: '#0284C7', bg: '#FFFFFF', text: '#1E293B' },
-    ];
-    // Curated Presets builder
-    const presetsList = document.getElementById('presets-list');
-    COLOR_SCHEMES_PRESETS.forEach((s, idx) => {
-      const btn = document.createElement('button');
-      btn.type = 'button';
-      btn.className = `w-full text-left p-3 rounded-xl border border-white/5 bg-slate-900/50 hover:bg-slate-900/80 transition-all flex items-center justify-between text-xs focus:outline-none ${idx === 0 ? 'border-indigo-500/40 bg-slate-900/80' : ''}`;
-      btn.onclick = () => {
-        // Remove active border
-        Array.from(presetsList.children).forEach(c => c.classList.remove('border-indigo-500/40', 'bg-slate-900/80'));
-        btn.classList.add('border-indigo-500/40', 'bg-slate-900/80');
-        config.colorScheme = {
-          primary: s.primary,
-          secondary: s.secondary,
-          accent: s.accent,
-          background: s.bg,
-          text: s.text,
-          buttonText: '#FFFFFF'
-        };
-        updatePreview();
-      };
-      btn.innerHTML = `
-        <span class="font-medium text-slate-200">${s.name}</span>
-        <div class="flex gap-1.5">
-          <span class="w-3 h-3 rounded-full border border-white/10" style="background:${s.primary}"></span>
-          <span class="w-3 h-3 rounded-full border border-white/10" style="background:${s.secondary}"></span>
-          <span class="w-3 h-3 rounded-full border border-white/10" style="background:${s.accent}"></span>
-        </div>
-      `;
-      presetsList.appendChild(btn);
-    });
-    // Step navigation controller
-    function showStep(stepIndex) {
-      document.querySelectorAll('.step-panel').forEach(p => p.classList.add('hidden'));
-      document.getElementById(`step-panel-${stepIndex}`).classList.remove('hidden');
-      // Update sidebar
-      document.querySelectorAll('.step-tab').forEach((tab, idx) => {
-        if (idx === stepIndex) {
-          tab.className = "step-tab flex items-center gap-4 px-4 py-3 rounded-xl transition-all cursor-pointer bg-white/5 text-white font-medium border-l-4 border-indigo-500";
-          tab.querySelector('span').className = "w-6 h-6 rounded-full bg-indigo-500 text-white font-bold text-xs flex items-center justify-center shadow-md shadow-indigo-500/30";
-        } else if (idx < stepIndex) {
-          // Completed
-          tab.className = "step-tab flex items-center gap-4 px-4 py-3 rounded-xl transition-all cursor-pointer text-slate-300 font-medium";
-          tab.querySelector('span').className = "w-6 h-6 rounded-full bg-indigo-500/10 text-indigo-400 font-bold text-xs flex items-center justify-center border border-indigo-500/30";
-        } else {
-          // Future
-          tab.className = "step-tab flex items-center gap-4 px-4 py-3 rounded-xl transition-all cursor-pointer text-slate-400 hover:text-slate-200";
-          tab.querySelector('span').className = "w-6 h-6 rounded-full bg-slate-800 text-slate-400 font-bold text-xs flex items-center justify-center border border-white/5";
-        }
-      });
-      // Show/Hide back button
-      if (stepIndex > 0) {
-        document.getElementById('btn-prev').classList.remove('opacity-0', 'pointer-events-none');
-      } else {
-        document.getElementById('btn-prev').classList.add('opacity-0', 'pointer-events-none');
-      }
-      // Toggle next vs complete button
-      if (stepIndex === totalSteps - 1) {
-        document.getElementById('btn-next').classList.add('hidden');
-        document.getElementById('btn-finish').classList.remove('hidden');
-      } else {
-        document.getElementById('btn-next').classList.remove('hidden');
-        document.getElementById('btn-finish').classList.add('hidden');
-      }
-      currentStep = stepIndex;
-      updatePreview();
-    }
-    // Toggle yes/no cards (mockup setup)
-    document.querySelectorAll('.toggle-card').forEach(btn => {
-      btn.onclick = () => {
-        const field = btn.getAttribute('data-field');
-        const val = btn.getAttribute('data-val') === 'true';
-        // Remove active state
-        document.querySelectorAll(`[data-field="${field}"]`).forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        config[field] = val;
-        // Mockup specific: toggle options
-        if (field === 'hasMockup') {
-          const mockupBtn = document.getElementById('btn-theme-mockup');
-          if (val) {
-            mockupBtn.classList.remove('opacity-40', 'cursor-not-allowed');
-            mockupBtn.removeAttribute('disabled');
-          } else {
-            mockupBtn.classList.add('opacity-40', 'cursor-not-allowed');
-            mockupBtn.setAttribute('disabled', 'true');
-            if (config.colorSource === 'mockup') {
-              selectThemeSource('auto');
-            }
-          }
-        }
-        updatePreview();
-      };
-    });
-    // Toggle slide-buttons (show/hide options)
-    document.querySelectorAll('.toggle-btn').forEach(btn => {
-      btn.onclick = () => {
-        const field = btn.getAttribute('data-field');
-        const isEnabled = btn.classList.contains('bg-indigo-500');
-        if (isEnabled) {
-          // Disable
-          btn.className = "toggle-btn w-12 h-6 rounded-full bg-slate-800 p-0.5 transition-all flex items-center justify-start focus:outline-none";
-          btn.querySelector('span').className = "w-5 h-5 rounded-full bg-slate-400 shadow-md";
-          config.layout[field] = false;
-          if (field === 'debug') config.debug = false;
-          if (field === 'deployToVercel') config.deployToVercel = false;
-        } else {
-          // Enable
-          btn.className = "toggle-btn w-12 h-6 rounded-full bg-indigo-500 p-0.5 transition-all flex items-center justify-end focus:outline-none";
-          btn.querySelector('span').className = "w-5 h-5 rounded-full bg-white shadow-md";
-          config.layout[field] = true;
-          if (field === 'debug') config.debug = true;
-          if (field === 'deployToVercel') config.deployToVercel = true;
-        }
-        // Show/hide sub inputs
-        if (field === 'showNextButton') {
-          document.getElementById('next-label-container').style.display = config.layout.showNextButton ? 'block' : 'none';
-        }
-        if (field === 'showBackButton') {
-          document.getElementById('back-label-container').style.display = config.layout.showBackButton ? 'block' : 'none';
-        }
-        updatePreview();
-      };
-    });
-    // Theme Source Card Selectors
-    function selectThemeSource(val) {
-      document.querySelectorAll(`[data-field="colorSource"]`).forEach(b => b.classList.remove('active'));
-      const activeBtn = document.querySelector(`[data-field="colorSource"][data-val="${val}"]`);
-      if (activeBtn) activeBtn.classList.add('active');
-      config.colorSource = val;
-      const customContainer = document.getElementById('custom-theme-container');
-      if (val === 'custom') {
-        customContainer.classList.remove('hidden');
-      } else {
-        customContainer.classList.add('hidden');
-      }
-      // Apply predefined colorScheme states for auto/logo modes
-      if (val === 'auto' || val === 'logo' || val === 'mockup') {
-        config.colorScheme = {
-          primary: "#1A1F36",
-          secondary: "#E8F5FD",
-          accent: "#00B5AD",
-          background: "#FFFFFF",
-          text: "#1A1F36",
-          buttonText: "#FFFFFF",
-        };
-      }
-      updatePreview();
-    }
-    document.querySelectorAll('.theme-source-card').forEach(btn => {
-      btn.onclick = () => {
-        if (btn.hasAttribute('disabled')) return;
-        selectThemeSource(btn.getAttribute('data-val'));
-      };
-    });
-    // Custom Customizer mode toggles
-    document.getElementById('btn-pick-presets').onclick = () => {
-      document.getElementById('btn-pick-presets').classList.add('active');
-      document.getElementById('btn-pick-hex').classList.remove('active');
-      document.getElementById('presets-panel').classList.remove('hidden');
-      document.getElementById('hex-panel').classList.add('hidden');
-    };
-    document.getElementById('btn-pick-hex').onclick = () => {
-      document.getElementById('btn-pick-presets').classList.remove('active');
-      document.getElementById('btn-pick-hex').classList.add('active');
-      document.getElementById('presets-panel').classList.add('hidden');
-      document.getElementById('hex-panel').classList.remove('hidden');
-    };
-    // Hex Color inputs bindings
-    ['primary', 'secondary', 'accent', 'background', 'text'].forEach(type => {
-      const picker = document.getElementById(`hex-${type}`);
-      const text = document.getElementById(`text-${type}`);
-      picker.oninput = () => {
-        text.value = picker.value.toUpperCase();
-        config.colorScheme[type] = picker.value;
-        updatePreview();
-      };
-      text.oninput = () => {
-        let val = text.value;
-        if (!val.startsWith('#')) val = '#' + val;
-        if (/^#[0-9A-Fa-f]{6}$/.test(val)) {
-          picker.value = val;
-          config.colorScheme[type] = val;
-          updatePreview();
-        }
-      };
-    });
-    // Logo Upload Logic
-    const dropzone = document.getElementById('logo-dropzone');
-    const fileInput = document.getElementById('input-logoFile');
-    dropzone.onclick = () => fileInput.click();
-    dropzone.ondragover = (e) => {
-      e.preventDefault();
-      dropzone.classList.add('border-indigo-500', 'bg-slate-900/60');
-    };
-    dropzone.ondragleave = () => {
-      dropzone.classList.remove('border-indigo-500', 'bg-slate-900/60');
-    };
-    dropzone.ondrop = (e) => {
-      e.preventDefault();
-      dropzone.classList.remove('border-indigo-500', 'bg-slate-900/60');
-      if (e.dataTransfer.files.length) {
-        handleLogoFile(e.dataTransfer.files[0]);
-      }
-    };
-    fileInput.onchange = () => {
-      if (fileInput.files.length) {
-        handleLogoFile(fileInput.files[0]);
-      }
-    };
-    function handleLogoFile(file) {
-      const reader = new FileReader();
-      reader.onload = () => {
-        const base64 = reader.result;
-        // Post logo to server
-        fetch('/api/upload-logo', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            filename: file.name,
-            base64: base64
-          })
-        })
-        .then(res => res.json())
-        .then(data => {
-          if (data.fileName) {
-            config.logo.fileName = data.fileName;
-            config.logo.defaultUrl = null;
-            // Show preview box
-            document.getElementById('logo-dropzone').classList.add('hidden');
-            const preview = document.getElementById('logo-preview-container');
-            preview.classList.remove('hidden');
-            document.getElementById('logo-preview-img').src = base64;
-            document.getElementById('logo-preview-name').innerText = file.name;
-            updatePreview();
-          }
-        })
-        .catch(err => {
-          alert('Failed to upload logo: ' + err.message);
-        });
-      };
-      reader.readAsDataURL(file);
-    }
-    // Remove Logo
-    document.getElementById('btn-remove-logo').onclick = () => {
-      config.logo.fileName = null;
-      config.logo.defaultUrl = "https://www.aprimo.com/wp-content/uploads/2024/03/Sprinklr_Logo-1.png";
-      document.getElementById('logo-preview-container').classList.add('hidden');
-      document.getElementById('logo-dropzone').classList.remove('hidden');
-      fileInput.value = '';
-      updatePreview();
-    };
-    // Real-time Visualizer Sync
-    function updatePreview() {
-      // Inputs read
-      config.surveyTitle = document.getElementById('input-surveyTitle').value || "Customer Feedback Survey";
-      config.companyName = document.getElementById('input-companyName').value || "Sprinklr";
-      config.browserTabTitle = document.getElementById('input-browserTabTitle').value || config.surveyTitle;
-      config.thankYouMessage = document.getElementById('input-thankYouMessage').value || "Thank you for your valuable feedback!";
-      config.placeholders.firstName = document.getElementById('input-firstName').value || "Unnat";
-      config.placeholders.lastName = document.getElementById('input-lastName').value || "Agrawal";
-      config.placeholders.email = document.getElementById('input-email').value || "unnat.agrawal@sprinklr.com";
-      config.layout.width = document.getElementById('select-width').value;
-      config.layout.borderStyle = document.getElementById('select-borderStyle').value;
-      config.layout.fontStyle = document.getElementById('select-fontStyle').value;
-      config.buttons.next = document.getElementById('input-nextButtonText').value || "Next";
-      config.buttons.back = document.getElementById('input-backButtonText').value || "Back";
-      // Sync preview nodes
-      document.getElementById('preview-surveyTitle').innerText = config.surveyTitle;
-      document.getElementById('preview-companyName').innerText = config.companyName;
-      // Logo url preview
-      const previewLogo = document.getElementById('preview-logo');
-      if (config.logo.fileName) {
-        previewLogo.src = document.getElementById('logo-preview-img').src;
-        previewLogo.classList.remove('hidden');
-      } else if (config.logo.defaultUrl) {
-        previewLogo.src = config.logo.defaultUrl;
-        previewLogo.classList.remove('hidden');
-      } else {
-        previewLogo.classList.add('hidden');
-      }
-      // Render showHeader
-      document.getElementById('preview-header').style.display = config.layout.showHeader ? 'flex' : 'none';
-      // Render showProgressBar
-      document.getElementById('preview-progress-container').style.display = config.layout.showProgressBar ? 'block' : 'none';
-      // Required indicator
-      document.getElementById('preview-asterisk').style.display = config.layout.showRequiredAsterisk ? 'inline' : 'none';
-      // Question numbers
-      document.getElementById('preview-q-num').style.display = config.layout.showQuestionNumbers ? 'inline' : 'none';
-      // Width classes
-      const card = document.getElementById('preview-survey-card');
-      card.className = "rounded-2xl shadow-xl overflow-hidden border transition-all duration-300";
-      // Border styles
-      if (config.layout.borderStyle === 'sharp') {
-        card.classList.add('rounded-none');
-        document.querySelectorAll('.preview-badge').forEach(b => b.classList.add('rounded-none'));
-        document.getElementById('preview-btn-back').className = "text-[10px] font-semibold text-slate-500 px-3 py-1.5 rounded-none border border-slate-200 bg-white";
-        document.getElementById('preview-btn-next').className = "text-[10px] font-bold text-white px-4 py-1.5 rounded-none";
-      } else if (config.layout.borderStyle === 'pill') {
-        card.classList.add('rounded-[32px]');
-        document.querySelectorAll('.preview-badge').forEach(b => b.classList.add('rounded-full'));
-        document.getElementById('preview-btn-back').className = "text-[10px] font-semibold text-slate-500 px-4 py-1.5 rounded-full border border-slate-200 bg-white";
-        document.getElementById('preview-btn-next').className = "text-[10px] font-bold text-white px-5 py-1.5 rounded-full";
-      } else {
-        card.classList.add('rounded-2xl');
-        document.querySelectorAll('.preview-badge').forEach(b => b.classList.add('rounded-lg'));
-        document.getElementById('preview-btn-back').className = "text-[10px] font-semibold text-slate-500 px-3 py-1.5 rounded-lg border border-slate-200 bg-white";
-        document.getElementById('preview-btn-next').className = "text-[10px] font-bold text-white px-4 py-1.5 rounded-lg";
-      }
-      // Font styles
-      if (config.layout.fontStyle === 'serif') {
-        card.style.fontFamily = "Georgia, serif";
-      } else if (config.layout.fontStyle === 'system') {
-        card.style.fontFamily = "system-ui, sans-serif";
-      } else {
-        card.style.fontFamily = "'Inter', sans-serif";
-      }
-      // Button labels
-      document.getElementById('preview-btn-next').innerText = config.buttons.next;
-      document.getElementById('preview-btn-back').innerText = config.buttons.back;
-      // Show/hide buttons
-      document.getElementById('preview-btn-next').style.display = config.layout.showNextButton ? 'block' : 'none';
-      document.getElementById('preview-btn-back').style.display = config.layout.showBackButton ? 'block' : 'none';
-      // Colors sync
-      const colors = config.colorScheme;
-      card.style.backgroundColor = colors.background;
-      card.style.color = colors.text;
-      card.style.borderColor = colors.secondary;
-      document.getElementById('preview-header').style.borderColor = colors.secondary;
-      document.getElementById('preview-progress-bar').style.backgroundColor = colors.accent;
-      const primaryBtn = document.getElementById('preview-btn-next');
-      primaryBtn.style.backgroundColor = colors.primary;
-      primaryBtn.style.color = colors.buttonText || '#FFFFFF';
-      // Ratings options colors sync
-      document.querySelectorAll('.preview-badge').forEach((badge, idx) => {
-        if (idx === 0) {
-          badge.style.backgroundColor = colors.secondary;
-          badge.style.borderColor = colors.primary;
-          badge.style.color = colors.primary;
-        } else {
-          badge.style.backgroundColor = colors.background;
-          badge.style.borderColor = colors.secondary;
-          badge.style.color = colors.text;
-        }
-      });
-    }
-    // Step Nav Button Hooks
-    document.getElementById('btn-next').onclick = () => {
-      if (currentStep < totalSteps - 1) showStep(currentStep + 1);
-    };
-    document.getElementById('btn-prev').onclick = () => {
-      if (currentStep > 0) showStep(currentStep - 1);
-    };
-    document.getElementById('btn-skip').onclick = () => {
-      // Skipping accepts defaults for this step and advances
-      if (currentStep < totalSteps - 1) showStep(currentStep + 1);
-    };
-    // Sidebar tab clicks
-    document.querySelectorAll('.step-tab').forEach(tab => {
-      tab.onclick = () => {
-        const target = parseInt(tab.getAttribute('data-step'), 10);
-        showStep(target);
-      };
-    });
-    // Save and submit
-    function submitSetup() {
-      // Sync one final time
-      updatePreview();
-      // Save configuration
-      fetch('/api/save-config', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(config)
-      })
-      .then(res => {
-        if (res.ok) {
-          // Render gorgeous complete overlay
-          document.body.innerHTML = `
-            <div class="h-full flex items-center justify-center p-6 text-center select-none bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-indigo-950/40 via-slate-950 to-slate-950">
-              <div class="glass-panel p-10 md:p-12 rounded-3xl max-w-md border border-indigo-500/20 shadow-2xl space-y-6">
-                <div class="h-16 w-16 mx-auto rounded-2xl bg-gradient-to-tr from-indigo-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-indigo-500/30">
-                  <svg class="w-10 h-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
-                  </svg>
-                </div>
-                <div class="space-y-2">
-                  <h1 class="font-display font-bold text-2xl text-white">Branding Setup Saved!</h1>
-                  <p class="text-sm text-slate-400">Your configuration was saved to <code>survey-config.json</code>. You can close this browser window. The IDE Agent will now resume building your survey UI.</p>
-                </div>
-                <div class="text-[11px] text-slate-500 bg-slate-950/50 p-3 rounded-xl border border-white/5">
-                  Process exited. Ready to proceed.
-                </div>
-              </div>
-            </div>
-          `;
-          // Close browser window after 3 seconds
-          setTimeout(() => window.close(), 3000);
-        } else {
-          alert('Failed to save survey config.');
-        }
-      })
-      .catch(err => {
-        alert('Error completing setup: ' + err.message);
-      });
-    }
-    document.getElementById('btn-finish').onclick = submitSetup;
-    document.getElementById('btn-skip-all').onclick = submitSetup;
-    // Quit setup
-    document.getElementById('btn-quit').onclick = () => {
-      if (confirm('Are you sure you want to exit? Your changes will not be saved.')) {
-        fetch('/api/save-config', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({}) // empty config -> triggers cancellation/defaults
-        }).then(() => window.close());
-      }
-    };
-    // Load initial panel
-    showStep(0);
-  </script>
 </body>
 </html>