rivia 0.0.4 → 0.0.6

package/dist/index.js

@@ -32,7 +32,8 @@ function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklis
     id: it.id || `step${i2 + 1}`,
     title: it.heading || `Step ${i2 + 1}`,
     description: it.body || "",
-    completionType: it.completionType || "url",
+    event_name: it.event_name || "",
+    button_name: it.button_name || "",
     url: it.url || slugify(it.title || `step-${i2 + 1}`),
     color: it.color || null
   })) : [];
@@ -72,18 +73,20 @@ function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklis
   let storedVisited = JSON.parse(
     sessionStorage.getItem("onboardingVisited") || "[]"
   );
-  let user_var1 = user_var;
-  if (!user_var1) {
-    user_var1 = "User_" + Math.random().toString(36).substring(2, 8);
-    sessionStorage.setItem(user_var, user_var1);
+  if (!Array.isArray(storedVisited)) storedVisited = [];
+  let user_var12 = user_var;
+  if (!user_var12) {
+    user_var12 = "User_" + Math.random().toString(36).substring(2, 8);
+    sessionStorage.setItem(user_var, user_var12);
   }
-  const backendUrl = `https://demoapi.rivia.ai/clients/${checklist_id}/${user_var1}`;
-  async function getUserProgress2() {
+  const backendUrl = `http://localhost:5000/clients/${checklist_id}/${user_var12}`;
+  async function getUserProgress22() {
+    const backendUrl2 = `http://localhost:5000/clients/${checklist_id}/${user_var12}`;
     try {
-      const res = await fetch(backendUrl, { credentials: "include" });
+      const res = await fetch(backendUrl2, { credentials: "include" });
       if (!res.ok) throw new Error(`GET failed: ${res.status}`);
       const data2 = await res.json();
-      let userData = data2[user_var1];
+      let userData = data2[user_var12];
       if (Array.isArray(userData)) {
         storedVisited = userData;
       } else if (typeof userData === "object" && userData !== null && Array.isArray(userData.completed_items)) {
@@ -100,12 +103,11 @@ function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklis
         end_date: userData?.end_date || userData?.end_data || ""
       };
     } catch (err) {
-      console.warn("\u26A0\uFE0F No data found or failed to fetch, starting fresh", err);
-      const storedVisited2 = [];
-      sessionStorage.setItem(
-        "onboardingVisited",
-        JSON.stringify(storedVisited2)
+      console.warn(
+        "\u26A0\uFE0F Invalid checklist Id",
+        err
       );
+      const storedVisited2 = [];
       return {
         completedPages: [],
         progress: 0,
@@ -116,9 +118,45 @@ function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklis
     }
   }
   storedVisited = sessionStorage.getItem("onboardingVisited");
-  if (!storedVisited) {
-    getUserProgress2().then((progressData) => {
-      if (storedVisited.length >= checklistItems.length) {
+  async function getUserProgress22() {
+    const backendUrl2 = `http://localhost:5000/clients/${checklist_id}/${user_var12}`;
+    try {
+      const res = await fetch(backendUrl2, { credentials: "include" });
+      if (!res.ok) throw new Error(`GET failed: ${res.status}`);
+      const data2 = await res.json();
+      let userData = data2[user_var12];
+      if (Array.isArray(userData)) {
+        storedVisited = userData;
+      } else if (typeof userData === "object" && userData !== null && Array.isArray(userData.completed_items)) {
+        storedVisited = userData.completed_items;
+      } else {
+        storedVisited = [];
+      }
+      let path;
+      return {
+        completedPages: storedVisited,
+        progress: storedVisited.length,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        start_date: userData?.start_date || "",
+        end_date: userData?.end_date || userData?.end_data || ""
+      };
+    } catch (err) {
+      console.warn(
+        "\u26A0\uFE0F Invalid checklist Id",
+        err
+      );
+      return {
+        completedPages: [],
+        progress: 0,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        start_date: "",
+        end_date: ""
+      };
+    }
+  }
+  if (!storedVisited || storedVisited == "[]") {
+    getUserProgress22().then((progressData) => {
+      if (storedVisited && storedVisited.length >= checklistItems.length) {
         return;
       }
       sessionStorage.setItem(
@@ -153,7 +191,7 @@ function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklis
       );
       storedVisited = [];
     }
-    if (storedVisited.length >= checklistItems.length) {
+    if (storedVisited && storedVisited.length >= checklistItems.length) {
       if (sessionStorage.getItem("CompletedAll") != "true") return;
       const label = document.createElement("div");
       label.id = "route-label";
@@ -204,6 +242,9 @@ function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklis
   }
 }
 async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion = 0, checklistItems = [], cssText = [], targetingData = {}, user_var, checklist_id, cssConfig = {}, items = [], storedVisited = [], backendUrl = "", progressData = {}, visitedPages = {}, cleanUrlItems = []) {
+  console.log("inside fetchWithTimeout", user_var);
+  if (!user_var)
+    return;
   let i = 0;
   const stepsHTML = items.map((it) => {
     const border = it.color || cssConfig.borderColor1;
@@ -220,7 +261,7 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
   
   <div class="onboard-circle"
   style="min-width:16px; min-height:16px; width:16px; height:16px; border-radius:50%;
-  border:2px solid ${cssConfig.uncheckedBorderColor}; margin-right:10px; box-sizing:border-box;"></div>
+  border:2px solid ${cssConfig.lowerCheckboxColor}; margin-right:10px; box-sizing:border-box;"></div>
   
   <div class="onboard-text"
   style=" font-family:${cssConfig.fontFamily}; font-size:${cssConfig.fontSize};">
@@ -256,7 +297,7 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
     <p style="margin-top:8px;color: ${cssConfig.subtitleColor};">${subtitle}</p>
     <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;">
     <div id="progressContainer" style="display: flex; gap: 4px; width: 300%; width: 800px; height: 10px;"></div>
-    <span id="progressFraction" style="margin-left: 0px; font-size: 13px; color: ${cssConfig.textColor}; min-width: 20px; text-align: right;">0/0 Complete</span>
+    <span id="progressFraction" style="margin-left: 0px; font-size: 13px; color: ${cssConfig.textColor}; min-width: 20px; text-align: right;">0/0 </span>
     </div>
 
     </div>
@@ -314,7 +355,7 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
     });
   }
   createSlabs(items.length);
-  updateProgress(storedVisited.length);
+  if (storedVisited) updateProgress(storedVisited.length);
   Object.assign(label.style, {
     position: "fixed",
     bottom: "80px",
@@ -360,29 +401,106 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
     });
   }
   showBtn.id = "show-tooltip-btn";
+  const translateStyle = cssConfig.launcherProgressBar ? 'style="transform: translateY(10px);"' : "";
+  const iconHTML = cssConfig.launcherShowIcon ? `<svg width="24" height="24"   ${translateStyle} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 10.167L12.123 6.043C13.248 4.919 13.811 4.356 14.431 3.903C15.7049 2.97403 17.1822 2.36274 18.74 2.12C19.499 2 20.293 2 21.885 2C21.968 2 22 2.038 22 2.115C22 3.705 22 4.501 21.881 5.26C21.638 6.81791 21.0263 8.29523 20.097 9.569C19.644 10.189 19.081 10.752 17.957 11.877L13.833 16" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.341 8.098C8.638 8.098 6.498 7.738 4.904 8.398C3.737 8.88 2.878 10 2 10.878L5.306 12.296C6.182 12.671 5.646 13.776 5.501 14.502C5.34 15.31 5.349 15.34 5.931 15.922L8.078 18.068C8.66 18.651 8.69 18.66 9.498 18.498C10.223 18.353 11.329 17.818 11.704 18.694L13.121 22C13.999 21.122 15.119 20.263 15.602 19.096C16.262 17.502 15.902 15.362 15.902 13.659" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M12 20L11 21M4 12L3 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 4.08008C16.2 4.26008 17.46 4.74008 18.161 5.46008C19.058 6.25208 19.68 7.32008 19.92 9.00008" stroke="white" stroke-width="1.5" stroke-linecap="square"/>
+<path d="M17.94 6.05957L16.5 7.49957" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>` : "";
+  const progressPaddingLeft = cssConfig.launcherShowIcon ? "28px" : "0px";
+  const textTranslateStyle = !cssConfig.launcherProgressBar ? " translateY(50%);" : "";
   showBtn.innerHTML = `
-  <h3 style="margin:0;">${topTitle}</h3>
-  <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;">
-  <div id="progressContainerBtn" style="display: flex; gap: 4px; width: 160%; height: 3px;"></div>
-  <span id="progressFraction" style="margin-left: 0px; font-size: 13px;width:15px; color: ${cssConfig.textColor}; min-width: 10px; text-align: right;">0/0</span>
-  </div>`;
+  <div style="display:flex; align-items:center; gap:12px; width:100%;">
+    
+    <!-- LEFT COLUMN -->
+    <div style="flex:1; display:flex; flex-direction:column; box-sizing:border-box; padding-left:${progressPaddingLeft};">
+
+      <!-- TITLE ROW -->
+      <h3 style="
+        margin:0;
+        position:relative;
+        height:24px;
+        line-height:1;
+      ">
+        <!-- ICON: fixed original position -->
+        <span style="
+          position:absolute;
+          left:-20px;
+          top:50%;
+          transform:translateY(-50%);
+          display:flex;
+          align-items:center;
+        ">
+          ${iconHTML}
+        </span>
+
+        <!-- TEXT: centered over progress bar -->
+        <span style="
+          display:block;
+          width:100%;
+          padding-left:5%;
+          text-align:center;
+          transform: ${textTranslateStyle};
+          pointer-events:none;
+        ">
+          ${cssConfig.launcher_text}
+        </span>
+      </h3>
+
+      <!-- PROGRESS BAR -->
+      <div style="width:100%; margin-top:6px;">
+        <div id="progressContainerBtn" style="
+          display:flex;
+          gap:4px;
+          width:100%;
+          padding:5px;
+          height:3px;
+          box-sizing:border-box;
+        "></div>
+      </div>
+    </div>
+
+    <!-- RIGHT COLUMN: fraction -->
+    <div style="flex-shrink:0; display:flex; align-items:center;">
+      <span id="progressFraction" style="
+        font-size:13px;
+        white-space:nowrap;
+        color:${cssConfig.launcherTextColor};
+        padding:2px;
+        min-width:10px;
+        text-align:right;
+      ">
+        0/0
+      </span>
+    </div>
+  </div>
+`;
+  const isRight = cssConfig.launcherPosition === "right";
   Object.assign(showBtn.style, {
     position: "fixed",
-    bottom: "20px",
-    left: "20px",
-    width: "150px",
-    padding: "10px 16px",
+    bottom: cssConfig.launcherSpacingBottom || "20px",
+    // Horizontal positioning
+    left: isRight ? "auto" : cssConfig.launcherSpacingLeft || "20px",
+    right: isRight ? cssConfig.launcherSpacingRight || "20px" : "auto",
+    width: cssConfig.launcherWidth ? `${cssConfig.launcherWidth}px` : "150px",
+    height: cssConfig.launcherHeight ? `${cssConfig.launcherHeight}px` : "78px",
     fontSize: cssConfig.fontSize,
     fontWeight: "bold",
-    backgroundColor: cssConfig.backgroundColor,
-    color: cssConfig.textColor,
+    backgroundColor: cssConfig.launcherBackgroundColor,
+    color: cssConfig.launcherTextColor,
     border: "none",
-    borderRadius: "6px",
+    borderRadius: cssConfig.showBtnBorderRadius || "6px",
     cursor: "pointer",
     zIndex: 9999,
     boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)"
   });
   document.body.appendChild(showBtn);
+  if (!cssConfig.launcherProgressBar) {
+    document.getElementById("progressContainerBtn").style.display = "none";
+    document.getElementById("progressFraction").style.display = "none";
+  }
   document.body.appendChild(label);
   createS(items.length);
   const closeBtn = document.createElement("button");
@@ -409,12 +527,290 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
     closeBtn.style.left = `${Math.max(8, rect.left + rect.width / 2 - 170)}px`;
     closeBtn.style.top = `${rect.bottom + 10}px`;
   }
-  const user_var2 = user_var;
-  const backendUrl22 = `https://demoapi.rivia.ai/clients/${checklist_id}`;
+  let check = 0;
+  console.log("before");
+  const EVENT_SRC_URL = "http://localhost:5000/events";
+  if (!window._onboardingEventSource) {
+    window._onboardingEventSource = new EventSource(EVENT_SRC_URL);
+  }
+  const eventSource = window._onboardingEventSource;
+  const STORAGE_KEY = "onboardingVisited";
+  const visitedSet = new Set(
+    JSON.parse(sessionStorage.getItem(STORAGE_KEY) || "[]")
+  );
+  const processedMessages = /* @__PURE__ */ new Set();
+  function persistVisited() {
+    sessionStorage.setItem(STORAGE_KEY, JSON.stringify([...visitedSet]));
+  }
+  function handleVisit(cleanUrl, opts = { source: "unknown" }) {
+    if (!cleanUrl) return false;
+    if (typeof cleanUrl !== "string") return false;
+    if (!cleanUrlItems || !cleanUrlItems.includes(cleanUrl)) {
+      return false;
+    }
+    if (visitedSet.has(cleanUrl)) {
+      return false;
+    }
+    visitedSet.add(cleanUrl);
+    storedVisited = [...visitedSet];
+    persistVisited();
+    try {
+      uploadVisitedPagesInBackground([...visitedSet], true);
+    } catch (e) {
+      console.warn("uploadVisitedPagesInBackground failed", e);
+    }
+    updateProgress(visitedSet.size);
+    updateProgress2(visitedSet.size);
+    updateUIFromVisited();
+    console.log(`handleVisit: added ${cleanUrl} (source=${opts.source})`);
+    if (visitedSet.size >= (checklistItems ? checklistItems.length : Infinity)) {
+      sessionStorage.setItem("CompletedAll", "true");
+    }
+    return true;
+  }
+  eventSource.onopen = () => console.log("SSE connected");
+  eventSource.onerror = (err) => console.log("SSE connection error:", err);
+  eventSource.onmessage = (event) => {
+    if (!event || !event.data) return;
+    check = 1;
+    let data;
+    try {
+      data = JSON.parse(event.data);
+    } catch (err) {
+      console.error("Invalid SSE JSON:", event.data, err);
+      return;
+    }
+    if (data.ping) {
+      return;
+    }
+    const msg = data.message;
+    if (!msg) return;
+    if (processedMessages.has(msg)) {
+      return;
+    }
+    processedMessages.add(msg);
+    const it = items.find((i2) => i2.event_name && i2.event_name === msg);
+    if (!it) {
+      console.log("SSE message doesn't match any item:", msg);
+      return;
+    }
+    try {
+      const stepEl = label ? label.querySelector(`#${it.id}`) : null;
+      if (stepEl) {
+        const startSelect = stepEl.querySelector(".start-select");
+        if (startSelect) startSelect.style.display = "none";
+      }
+    } catch (err) {
+    }
+    const path = it.url || "";
+    const cleanUrl = path.startsWith("/") ? path.slice(1) : path;
+    handleVisit(cleanUrl, { source: "sse" });
+    if (storedVisited.length >= checklistItems.length) {
+      console.log("All items completed via SSE");
+      if (label && label.parentNode) label.remove();
+      if (showBtn && showBtn.parentNode) showBtn.remove();
+      const label3 = document.createElement("div");
+      label3.id = "route-label";
+      label3.innerText = "\u{1F389} Congrats! You've completed all items!";
+      Object.assign(label3.style, {
+        position: "fixed",
+        bottom: "20px",
+        left: "20px",
+        backgroundColor: "#4CAF50",
+        color: "white",
+        padding: "10px 20px",
+        borderRadius: "10px",
+        boxShadow: "0 4px 6px rgba(0,0,0,0.2)",
+        fontSize: "16px",
+        fontWeight: "bold",
+        zIndex: 9999,
+        opacity: 0,
+        transition: "opacity 0.5s ease"
+      });
+      document.body.appendChild(label3);
+    }
+    console.log("Received event (SSE):", msg);
+  };
+  console.log("after");
+  function findButtonByText(buttonText) {
+    if (!buttonText) return null;
+    const needle = buttonText.trim().toLowerCase();
+    const buttons = document.querySelectorAll("button");
+    for (const button of buttons) {
+      if (!button.textContent) continue;
+      if (button.textContent.trim().toLowerCase().includes(needle)) {
+        return button;
+      }
+    }
+    return null;
+  }
+  function attachButtonForItem(it) {
+    const btn = findButtonByText(it.button_name);
+    if (!btn) {
+      return;
+    }
+    if (btn._onboardingAttached) return;
+    btn._onboardingAttached = true;
+    btn.addEventListener("click", (e) => {
+      check = 1;
+      const path = it.url || "";
+      const cleanUrl = path.startsWith("/") ? path.slice(1) : path;
+      if (storedVisited.length >= checklistItems.length) {
+        (() => {
+          if (label2 && label2.parentNode) label2.remove();
+          if (showBtn && showBtn.parentNode) showBtn.remove();
+          const label2 = document.createElement("div");
+          label2.id = "route-label";
+          label2.innerText = "\u{1F389} Congrats! You've completed all items!";
+          Object.assign(label2.style, {
+            position: "fixed",
+            bottom: "20px",
+            left: "20px",
+            backgroundColor: "#4CAF50",
+            color: "white",
+            padding: "10px 20px",
+            borderRadius: "10px",
+            boxShadow: "0 4px 6px rgba(0,0,0,0.2)",
+            fontSize: "16px",
+            fontWeight: "bold",
+            zIndex: 9999,
+            opacity: 0,
+            transition: "opacity 0.5s ease"
+          });
+          document.body.appendChild(label2);
+        })();
+      }
+      handleVisit(cleanUrl, { source: "click" });
+      if (storedVisited.length >= checklistItems.length) {
+        (() => {
+          if (label && label.parentNode) label.remove();
+          if (showBtn && showBtn.parentNode) showBtn.remove();
+          const label3 = document.createElement("div");
+          label3.id = "route-label";
+          label3.innerText = "\u{1F389} Congrats! You've completed all items!";
+          Object.assign(label3.style, {
+            position: "fixed",
+            bottom: "20px",
+            left: "20px",
+            backgroundColor: "#4CAF50",
+            color: "white",
+            padding: "10px 20px",
+            borderRadius: "10px",
+            boxShadow: "0 4px 6px rgba(0,0,0,0.2)",
+            fontSize: "16px",
+            fontWeight: "bold",
+            zIndex: 9999,
+            opacity: 0,
+            transition: "opacity 0.5s ease"
+          });
+          document.body.appendChild(label3);
+        })();
+      }
+    });
+  }
+  items.forEach(attachButtonForItem);
+  const mo = new MutationObserver((mutations) => {
+    items.forEach(attachButtonForItem);
+  });
+  mo.observe(document.body, { childList: true, subtree: true });
+  window.addEventListener("storage", (e) => {
+    if (e.key === STORAGE_KEY) {
+      const arr = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || "[]");
+      visitedSet.clear();
+      arr.forEach((a) => visitedSet.add(a));
+      updateUIFromVisited();
+      updateProgress(visitedSet.size);
+      updateProgress2(visitedSet.size);
+    }
+  });
+  if (!window._onboardingEventSource) {
+    window._onboardingEventSource = new EventSource(EVENT_SRC_URL);
+  }
+  eventSource.onopen = () => console.log("SSE connected");
+  eventSource.onerror = (err) => console.log("SSE connection error:", err);
+  eventSource.onmessage = (event) => {
+    if (!event || !event.data) return;
+    check = 1;
+    let data;
+    try {
+      data = JSON.parse(event.data);
+    } catch (err) {
+      console.error("Invalid SSE JSON:", event.data, err);
+      return;
+    }
+    if (data.ping) {
+      return;
+    }
+    const msg = data.message;
+    console.log("SSE message received:", msg);
+    if (!msg) return;
+    if (processedMessages.has(msg)) {
+      return;
+    }
+    processedMessages.add(msg);
+    const it = items.find((i2) => i2.event_name && i2.event_name === msg);
+    if (!it) {
+      console.log("SSE message doesn't match any item:", msg);
+      return;
+    }
+    const eventId = data.event_id;
+    try {
+      fetch("http://localhost:5000/ack-event", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ event_id: eventId })
+      });
+      console.log("ACK sent for", eventId);
+    } catch (err) {
+      console.error("Failed to ACK", eventId, err);
+    }
+    try {
+      const stepEl = label ? label.querySelector(`#${it.id}`) : null;
+      if (stepEl) {
+        const startSelect = stepEl.querySelector(".start-select");
+        if (startSelect) startSelect.style.display = "none";
+      }
+    } catch (err) {
+    }
+    const path = it.url || "";
+    const cleanUrl = path.startsWith("/") ? path.slice(1) : path;
+    handleVisit(cleanUrl, { source: "sse" });
+    if (storedVisited.length >= checklistItems.length) {
+      console.log("All items completed via SSE");
+      (() => {
+        if (label && label.parentNode) label.remove();
+        if (showBtn && showBtn.parentNode) showBtn.remove();
+        const label3 = document.createElement("div");
+        label3.id = "route-label";
+        label3.innerText = "\u{1F389} Congrats! You've completed all items!";
+        Object.assign(label3.style, {
+          position: "fixed",
+          bottom: "20px",
+          left: "20px",
+          backgroundColor: "#4CAF50",
+          color: "white",
+          padding: "10px 20px",
+          borderRadius: "10px",
+          boxShadow: "0 4px 6px rgba(0,0,0,0.2)",
+          fontSize: "16px",
+          fontWeight: "bold",
+          zIndex: 9999,
+          opacity: 0,
+          transition: "opacity 0.5s ease"
+        });
+        document.body.appendChild(label3);
+      })();
+    }
+    console.log("Received event (SSE):", msg);
+  };
+  let user_var2 = user_var;
   function uploadVisitedPagesInBackground(completed2, touched = false) {
+    let activeStepId2 = sessionStorage.getItem("activeStepId") || null;
+    let user_var22 = user_var;
+    const backendUrl22 = `http://localhost:5000/clients/${checklist_id}`;
     try {
       const payload = {
-        name: user_var2,
+        name: user_var22,
         completed_items: completed2,
         touched
       };
@@ -433,7 +829,7 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
       console.error("\u274C Error preparing background upload:", err);
     }
   }
-  uploadVisitedPagesInBackground([], false);
+  if (check == 0) uploadVisitedPagesInBackground(storedVisited, false);
   let activeStepId = sessionStorage.getItem("activeStepId") || null;
   function updateUIFromVisited() {
     storedVisited = JSON.parse(
@@ -441,8 +837,45 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
     );
     let path;
     storedVisited = sessionStorage.getItem("onboardingVisited");
-    if (!storedVisited) {
-      getUserProgress().then((progressData2) => {
+    if (!storedVisited || storedVisited == "[]") {
+      async function getUserProgress22() {
+        const backendUrl2 = `http://localhost:5000/clients/${checklist_id}/${user_var}`;
+        try {
+          const res = await fetch(backendUrl2, { credentials: "include" });
+          if (!res.ok) throw new Error(`GET failed: ${res.status}`);
+          const data2 = await res.json();
+          let userData = data2[user_var1];
+          if (Array.isArray(userData)) {
+            storedVisited = userData;
+          } else if (typeof userData === "object" && userData !== null && Array.isArray(userData.completed_items)) {
+            storedVisited = userData.completed_items;
+          } else {
+            storedVisited = [];
+          }
+          let path2;
+          return {
+            completedPages: storedVisited,
+            progress: storedVisited.length,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+            start_date: userData?.start_date || "",
+            end_date: userData?.end_date || userData?.end_data || ""
+          };
+        } catch (err) {
+          console.warn(
+            "\u26A0\uFE0F Invalid checklist Id",
+            err
+          );
+          const storedVisited2 = [];
+          return {
+            completedPages: [],
+            progress: 0,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+            start_date: "",
+            end_date: ""
+          };
+        }
+      }
+      getUserProgress22().then((progressData2) => {
         let completed2 = progressData2.completedPages;
         completed2.forEach((path2) => {
           const stepId = visitedPages[path2];
@@ -454,9 +887,9 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
           <div style="background-color: green; border-radius: 50%; width: 30px; height: 18px; display: flex; align-items: center; justify-content: center;">
             <svg width="16" height="16" viewBox="0 0 512 512" fill="white" xmlns="http://www.w3.org/2000/svg">
             <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 
-              0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 
-              36.204 0L192 312.69 432.095 72.596c9.997-9.997 
-              26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 
+              0-36.204l36.203-36.204c9.997-9.998 26.207-9.998
+              36.204 0L192 312.69 432.095 72.596c9.997-9.997
+              26.207-9.997 36.204 0l36.203 36.204c9.997 9.997
               9.997 26.206 0 36.204l-294.4 294.401c-9.998 
               9.997-26.207 9.997-36.204-.001z"/>
               </svg>
@@ -515,6 +948,7 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
         completed2 = [];
       }
       completed2.forEach((path2) => {
+        let activeStepId2 = sessionStorage.getItem("activeStepId") || null;
         const stepId = visitedPages[path2];
         const stepElement = label.querySelector(`#${stepId}`);
         if (!stepElement) return;
@@ -541,7 +975,7 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
         }
         const textContainer = stepElement.querySelector(".onboard-text");
         const startSelect = stepElement.querySelector(".start-select");
-        if (stepId === activeStepId && startSelect) {
+        if (stepId === activeStepId2 && startSelect) {
           startSelect.style.display = "block";
         }
         if (textContainer) {
@@ -576,12 +1010,12 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
   }
   if (completion == 0) {
     items.forEach((it) => {
-      if (it.completionType == "url") {
-        const stepEl = label.querySelector(`#${it.id}`);
-        if (!stepEl) return;
-        const startSelect = stepEl.querySelector(".start-select");
-        startSelect.style.display = "none";
-        stepEl.addEventListener("click", () => {
+      const stepEl = label.querySelector(`#${it.id}`);
+      if (!stepEl) return;
+      const startSelect = stepEl.querySelector(".start-select");
+      startSelect.style.display = "none";
+      stepEl.addEventListener("click", () => {
+        if (it.event_name == "" && it.button_name == "") {
           items.forEach((inner) => {
             const el = label.querySelector(`#${inner.id}`);
             if (el) {
@@ -595,8 +1029,8 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
           storedVisited = JSON.parse(
             sessionStorage.getItem("onboardingVisited") || "[]"
           );
-          if (!storedVisited) {
-            getUserProgress().then((progressData2) => {
+          if (!storedVisited || storedVisited == "[]") {
+            getUserProgress2().then((progressData2) => {
               sessionStorage.setItem(
                 "onboardingVisited",
                 JSON.stringify(progressData2.completedPages)
@@ -625,9 +1059,9 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
           if (storedVisited.length >= checklistItems.length) {
             sessionStorage.setItem("CompletedAll", "true");
           }
-          window.location.href = it.url;
-        });
-      }
+        }
+        window.location.href = it.url;
+      });
     });
   } else {
     if (!sessionStorage.getItem("c")) sessionStorage.setItem("c", 1);
@@ -733,7 +1167,7 @@ async function OnboardingPopup(checklist_id, user_var) {
       return checklist2;
     }
     const res = await fetch(
-      `https://demoapi.rivia.ai/checklists2/${checklist_id}`,
+      `http://localhost:5000/checklists2/${checklist_id}`,
       {
         method: "GET",
         headers: { "Content-Type": "application/json" }
@@ -768,12 +1202,2414 @@ async function OnboardingPopup(checklist_id, user_var) {
     );
     return checklist;
   } catch (err) {
-    console.error("Error fetching checklist or branding:", err.message);
+    console.warn("Invalid checklist id ", err.message);
     throw err;
   }
 }
-var my_onboarding_app_default = OnboardingPopup;
+var rivia_default = OnboardingPopup;
+
+// src/utils/rivia-tour.js
+var RIVIA_TOUR = function() {
+  const STATE = {
+    picking: false,
+    lastSelector: null,
+    tips: [],
+    // {id, selector, title, content, placement}
+    tourIndex: 0,
+    tour_id: null,
+    tours: [],
+    // all tours fetched from backend
+    scrollAdvanceActive: false,
+    // Track if scroll advance is active
+    publish: false,
+    // Track if tour is published
+    is_completed: false,
+    // Track if tour is completed
+    user_var: "Guest_User",
+    url: ""
+  };
+  if (typeof window === "undefined") return;
+  const tourStateStr = window.sessionStorage.getItem("rivia_tour_state");
+  const hasActiveTour = tourStateStr !== null;
+  let user_var12 = "Guest_User";
+  if (hasActiveTour) {
+    console.log("\u{1F7E2} Active tour detected! Restoring state...");
+    setTimeout(() => {
+      restoreTourState();
+    }, 300);
+    return;
+  }
+  function restoreTourState() {
+    if (typeof window === "undefined") return;
+    const tourStateStr2 = window.sessionStorage.getItem("rivia_tour_state");
+    if (!tourStateStr2) return;
+    try {
+      const tourState = JSON.parse(tourStateStr2);
+      console.log("Restoring tour state:", tourState);
+      STATE.tourIndex = tourState.tourIndex;
+      STATE.tour_id = tourState.tourId;
+      STATE.isPreviewMode = tourState.isPreviewMode;
+      STATE.tips = tourState.tips;
+      user_var12 = tourState.user_var1 || "Guest_User";
+      STATE.title = tourState.title || "Untitled Tour";
+      STATE.publish = tourState.publish || false;
+      window.sessionStorage.removeItem("rivia_tour_state");
+      if (STATE.tips?.length > 0) {
+        setTimeout(() => {
+          showStep(STATE.tourIndex, STATE.isPreviewMode);
+        }, 500);
+      }
+    } catch (error) {
+      console.error("Error restoring tour state:", error);
+      window.sessionStorage.removeItem("rivia_tour_state");
+    }
+  }
+  function createTooltip({
+    id,
+    selector,
+    title,
+    content,
+    placement = "auto",
+    nextUrl = "",
+    isPreview = false,
+    basic_showArrow = true,
+    card_header = true,
+    card_footer = true,
+    card_back_button = false,
+    card_next_button = true,
+    card_skip_button = false
+  }) {
+    const anchor = findBySelector(selector);
+    if (!anchor) return null;
+    const tip = document.createElement("div");
+    tip.dataset.riviaTipId = id;
+    const tipStyle = isPreview ? `
+    position: absolute;
+    min-width: 360px;
+    max-width: 420px;
+    min-height: 120px;
+    padding: 18px 20px;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+    color: #1a202c;
+    border-radius: 14px;
+    border: 1px solid rgba(37, 99, 235, 0.2);
+    box-shadow: 0 12px 40px rgba(37, 99, 235, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
+    font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    z-index: 2147483647;
+  ` : `
+    position: absolute;
+    min-width: 360px;
+    max-width: 420px;
+    min-height: 120px;
+    padding: 16px 18px;
+    background: #ffffffff;
+    color: #0d0c0cff;
+    border-radius: 12px;
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
+    font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    z-index: 2147483647;
+  `;
+    tip.style.cssText = tipStyle;
+    const arrow = document.createElement("div");
+    const arrowStyle = isPreview ? `
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+    border: 1px solid rgba(37, 99, 235, 0.2);
+    transform: rotate(45deg);
+    display: ${basic_showArrow ? "block" : "none"};
+  ` : `
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background: #ffffffff;
+    transform: rotate(45deg);
+    display: ${basic_showArrow ? "block" : "none"};
+  `;
+    arrow.style.cssText = arrowStyle;
+    const h = document.createElement("input");
+    h.value = title || "Tooltip";
+    const titleStyle = isPreview ? "font-weight:700; margin-bottom:10px; font-size:16px; width: 100%; padding: 0; border: none; background: transparent; color: #1a202c; outline: none;" : "font-weight:600; margin-bottom:8px; font-size:15px; width: 100%; padding: 4px; border: 1px solid #e5e7eb; border-radius: 4px;";
+    h.style.cssText = titleStyle;
+    h.placeholder = "Enter title";
+    h.readOnly = isPreview;
+    h.style.display = card_header ? "block" : "none";
+    const p = document.createElement("textarea");
+    p.value = content || "";
+    const contentStyle = isPreview ? "font-size:13px; line-height:1.6; width: 100%; min-height: 60px; padding: 0; border: none; background: transparent; color: #4a5568; resize: none; outline: none; font-family: inherit;" : "font-size:13px; line-height:1.5; width: 100%; min-height: 60px; padding: 8px; border: 1px solid #e5e7eb; border-radius: 4px; resize: vertical;";
+    p.style.cssText = contentStyle;
+    p.placeholder = "Enter description";
+    p.readOnly = isPreview;
+    p.style.display = card_footer ? "block" : "none";
+    h.contentEditable = !isPreview;
+    p.contentEditable = !isPreview;
+    if (!isPreview) {
+      setTimeout(() => h.focus(), 50);
+    }
+    const controls = document.createElement("div");
+    controls.style.cssText = `
+      display: flex;
+      justify-content: flex-start; 
+      align-items: center;       
+      width: 100%;
+      margin-top: 8px;
+    `;
+    const closeBtn = document.createElement("button");
+    closeBtn.textContent = "Save";
+    closeBtn.style.cssText = `
+      padding: 6px 12px;
+      height: 32px;
+      line-height: 1;
+      border-radius: 6px;
+      border: none;
+      background: #10b981;
+      color: white;
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background-color 0.2s;
+      display: ${isPreview ? "none" : "block"};
+    `;
+    closeBtn.onclick = () => {
+      const newTitle = h.value || "Tooltip";
+      const newContent = p.value || "";
+      const tipIndex = STATE.tips.findIndex((t) => t.id === id);
+      if (tipIndex !== -1) {
+        STATE.tips[tipIndex].title = newTitle;
+        STATE.tips[tipIndex].content = newContent;
+        if (STATE.tour_id) {
+          putTips();
+        } else {
+          saveTips();
+        }
+        toast("Changes saved!");
+        setTimeout(() => {
+          tip.remove();
+        }, 500);
+      }
+    };
+    controls.appendChild(closeBtn);
+    const contentWrapper = document.createElement("div");
+    contentWrapper.style.cssText = "margin-bottom: 16px;";
+    if (card_header) {
+      contentWrapper.appendChild(h);
+      contentWrapper.appendChild(document.createElement("br"));
+    }
+    if (card_footer) {
+      contentWrapper.appendChild(p);
+    }
+    tip.appendChild(contentWrapper);
+    tip.appendChild(controls);
+    tip.appendChild(arrow);
+    document.body.appendChild(tip);
+    positionTooltip(anchor, tip, arrow, placement);
+    const reposition = () => positionTooltip(anchor, tip, arrow, placement);
+    const repositionObserver = new ResizeObserver(reposition);
+    repositionObserver.observe(tip);
+    window.addEventListener("scroll", reposition, { passive: true });
+    window.addEventListener("resize", reposition);
+    const obs = new MutationObserver(() => {
+      if (!document.body.contains(tip)) {
+        window.removeEventListener("resize", reposition);
+        window.removeEventListener("scroll", reposition);
+        if (repositionObserver) repositionObserver.disconnect();
+        obs.disconnect();
+      }
+    });
+    obs.observe(document.body, { childList: true, subtree: true });
+    return tip;
+  }
+  function positionTooltip(anchor, tip, arrow, placement, step) {
+    const a = anchor.getBoundingClientRect();
+    const t = tip.getBoundingClientRect();
+    let place = placement;
+    if (place === "auto") {
+      const spaces = {
+        top: a.top,
+        bottom: window.innerHeight - a.bottom,
+        left: a.left,
+        right: window.innerWidth - a.right
+      };
+      place = Object.entries(spaces).sort((x, y) => y[1] - x[1])[0][0];
+    }
+    let top = 0, left = 0, gap = 8;
+    if (place === "top") {
+      top = a.top - t.height - gap;
+      left = a.left + (a.width - t.width) / 2;
+      Object.assign(arrow.style, {
+        left: t.width / 2 - 5 + "px",
+        top: t.height - 5 + "px"
+      });
+    } else if (place === "bottom") {
+      top = a.bottom + gap;
+      left = a.left + (a.width - t.width) / 2;
+      Object.assign(arrow.style, { left: t.width / 2 - 5 + "px", top: "-5px" });
+    } else if (place === "left") {
+      top = a.top + (a.height - t.height) / 2;
+      left = a.left - t.width - gap;
+      Object.assign(arrow.style, {
+        top: t.height / 2 - 5 + "px",
+        left: t.width - 5 + "px"
+      });
+    } else {
+      top = a.top + (a.height - t.height) / 2;
+      left = a.right + gap;
+      Object.assign(arrow.style, {
+        top: t.height / 2 - 5 + "px",
+        left: "-5px"
+      });
+    }
+    left = Math.max(8, Math.min(left, window.innerWidth - t.width - 8));
+    top = Math.max(8, Math.min(top, window.innerHeight - t.height - 8));
+    tip.style.left = left + window.scrollX + "px";
+    tip.style.top = top + window.scrollY + "px";
+  }
+  function uploadVisitedPagesInBackground(tourId, user_var, tourIndex) {
+    console.log("Uploading visited pages in background for tour ID:", tourIndex, "and user_var:", user_var12);
+    let user_var2 = user_var12;
+    const backendUrl22 = `http://localhost:5000/tours_clients/${tourId}`;
+    try {
+      const payload = {
+        name: user_var2,
+        tourIndex
+      };
+      fetch(backendUrl22, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify(payload),
+        keepalive: true
+      }).then((res) => {
+        if (!res.ok) throw new Error(`Upload failed: ${res.status}`);
+      }).catch((err) => {
+        console.error("\u26A0\uFE0F Background PUT upload failed:", err);
+      });
+    } catch (err) {
+      console.error("\u274C Error preparing background upload:", err);
+    }
+  }
+  async function loadTips(tourId, user_var) {
+    if (!user_var) {
+      return;
+    }
+    if (sessionStorage.getItem("rivia_tour_state"))
+      return;
+    user_var12 = user_var;
+    STATE.tour_id = tourId;
+    console.log("Loading tips for tour ID:", tourId, "and user_var:", user_var12);
+    try {
+      if (!tourId) throw new Error("Tour ID is required");
+      const res = await fetch(`http://localhost:5000/tours2/${tourId}`, {
+        method: "GET",
+        headers: { "Content-Type": "application/json" }
+      });
+      if (!res.ok) throw new Error("Failed to fetch tour: " + res.statusText);
+      const data = await res.json();
+      STATE.tips = data && data.tour && Array.isArray(data.tour.steps) ? data.tour.steps : [];
+      STATE.publish = data.tour.publish;
+      STATE.url = data.tour.url;
+      const stripTrailing = (p) => p.replace(/\/+$/, "");
+      console.log("STATE.url", STATE.url);
+      console.log("window.location.pathname", window.location.href);
+      if (stripTrailing(STATE.url) !== stripTrailing(window.location.href)) {
+        return;
+      }
+      console.log("user_var", user_var);
+      console.log("data.tour?.user_data?.[user_var],", data.tour?.user_data?.[user_var]);
+      if (!data.tour?.user_data?.[user_var]) {
+        uploadVisitedPagesInBackground(tourId, user_var, 0);
+      } else {
+        STATE.tourIndex = data.tour.user_data[user_var].tourIndex || 0;
+        console.log("STATE.tourIndex ", STATE.tourIndex);
+      }
+      STATE.is_completed = data.tour.user_data && data.tour.user_data[user_var] && data.tour.user_data[user_var].is_completed ? data.tour.user_data[user_var].is_completed : false;
+      if (STATE.is_completed) {
+        return;
+      }
+      console.log(`Loaded tips for tour ${tourId}:`, STATE.tips);
+      return STATE.tips;
+    } catch (err) {
+      console.error("Invalid tour id ", err);
+      STATE.tips = [];
+      return STATE.tips;
+    }
+  }
+  function showStep(i, isPreview = false) {
+    uploadVisitedPagesInBackground(STATE.tour_id, user_var12, i);
+    console.log("Showing step", i, "of", STATE.tips.length);
+    document.querySelectorAll("[data-rivia-tip-id]").forEach((n) => n.remove());
+    const step = STATE.tips[i];
+    if (!step) return;
+    STATE.tourIndex = i;
+    updateUrlStatus();
+    cleanupAllOverlays();
+    if (step.card_type === "welcome") {
+      if (isPreview) {
+        showWelcomeCardPreview(step, i);
+      } else {
+        showWelcomeCardEditModal(i);
+      }
+      return;
+    }
+    if (step.card_type === "modal_dialog") {
+      if (isPreview) {
+        showModalDialogPreview(step, i);
+      } else {
+        showModalDialogEditModal(i);
+      }
+      return;
+    }
+    if (step.card_type === "feedback") {
+      if (isPreview) {
+        showFeedbackCardPreview(step, i);
+      } else {
+        showFeedbackCardEditModal(i);
+      }
+      return;
+    }
+    if (step.card_type === "video_explainer") {
+      if (isPreview) {
+        console.log("Preview mode: Showing video explainer for step:", step.id);
+        const targetElement = findBySelector(step.selector);
+        if (targetElement) {
+          try {
+            targetElement.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
+          } catch (e) {
+            targetElement.scrollIntoView(true);
+          }
+          targetElement.setAttribute("data-rivia-highlight", "true");
+          targetElement.style.outline = "3px solid #2563eb";
+          targetElement.style.outlineOffset = "2px";
+          targetElement.style.backgroundColor = "rgba(37, 99, 235, 0.1)";
+        }
+        setTimeout(() => {
+          const highlightedElement = document.querySelector('[data-rivia-highlight="true"]');
+          if (!highlightedElement && targetElement) {
+            targetElement.setAttribute("data-rivia-highlight", "true");
+          }
+          const videoUI = createVideoUI({ ...step, isPreview: true });
+          if (videoUI) {
+            console.log("Video UI created successfully with built-in navigation buttons");
+          } else {
+            console.warn("Failed to create video UI for preview");
+          }
+        }, 600);
+      } else {
+        console.log("Edit mode: Showing video explainer for step:", step.id);
+        console.log("Step selector:", step.selector);
+        if (step.selector) {
+          const targetElement = findBySelector(step.selector);
+          console.log("Found target element:", targetElement, "for selector:", step.selector);
+          if (targetElement) {
+            console.log("Element found, scrolling into view...");
+            try {
+              targetElement.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
+            } catch (e) {
+              console.warn("ScrollIntoView error:", e);
+              targetElement.scrollIntoView(true);
+            }
+            targetElement.setAttribute("data-rivia-highlight", "true");
+            targetElement.style.outline = "3px solid #2563eb";
+            targetElement.style.outlineOffset = "2px";
+            targetElement.style.backgroundColor = "rgba(37, 99, 235, 0.1)";
+            console.log("Element highlighted with blue outline");
+            if (step.target_animation && step.target_animation !== "none") {
+              previewAnimation(step.selector, step.target_animation);
+            }
+            if (step.basic_backdrop && step.basic_backdrop !== "none") {
+              previewBackdrop(step.selector, step.basic_backdrop);
+            }
+          } else {
+            console.warn("Target element not found for selector:", step.selector);
+          }
+        } else {
+          console.warn("No selector found in step:", step);
+        }
+        setTimeout(() => {
+          console.log("Creating video UI after scroll delay...");
+          const highlightedElement = document.querySelector('[data-rivia-highlight="true"]');
+          console.log("Highlighted element for video positioning:", highlightedElement);
+          const videoUI = createVideoUI({ ...step, isPreview: false });
+          if (videoUI) {
+            console.log("Video UI created successfully");
+            if (typeof showPointerCardPanel === "function") {
+              console.log("Showing pointer card panel for selector:", step.selector);
+              const stepIndex = STATE.tips.findIndex((t) => t === step);
+              showPointerCardPanel(step.selector, stepIndex);
+            }
+          } else {
+            console.warn("Failed to create video UI");
+          }
+        }, 600);
+      }
+      return;
+    }
+    if (isPreview) {
+      const el = findBySelector(step.selector);
+      if (el) {
+        try {
+          el.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
+        } catch (e) {
+          el.scrollIntoView(true);
+        }
+        document.querySelectorAll("[data-rivia-highlight]").forEach((n) => {
+          n.removeAttribute("data-rivia-highlight");
+          n.style.outline = "";
+          n.style.outlineOffset = "";
+          n.style.backgroundColor = "";
+        });
+        el.setAttribute("data-rivia-highlight", "true");
+        el.style.outline = "3px solid #2563eb";
+        el.style.outlineOffset = "2px";
+        el.style.backgroundColor = "rgba(37, 99, 235, 0.1)";
+        if (step.target_animation && step.target_animation !== "none") {
+          previewAnimation(step.selector, step.target_animation);
+        }
+        if (step.basic_backdrop && step.basic_backdrop !== "none") {
+          previewBackdrop(step.selector, step.basic_backdrop);
+        } else {
+          const backdropOverlay = document.getElementById("rivia-backdrop-overlay");
+          if (backdropOverlay) {
+            backdropOverlay.remove();
+          }
+        }
+      }
+      setTimeout(() => {
+        const tip2 = createTooltip({ ...step, isPreview });
+        if (tip2) {
+          attachNavigationButtons(tip2, i, isPreview);
+          try {
+            tip2.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+          } catch (e) {
+            tip2.scrollIntoView(true);
+          }
+        }
+      }, 600);
+      return;
+    }
+    if (!isPreview && step.selector && !step.card_type) {
+      const el = findBySelector(step.selector);
+      if (el) {
+        try {
+          el.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
+        } catch (e) {
+          el.scrollIntoView(true);
+        }
+        document.querySelectorAll("[data-rivia-highlight]").forEach((n) => {
+          n.removeAttribute("data-rivia-highlight");
+          n.style.outline = "";
+          n.style.outlineOffset = "";
+          n.style.backgroundColor = "";
+        });
+        el.setAttribute("data-rivia-highlight", "true");
+        el.style.outline = "3px solid #2563eb";
+        el.style.outlineOffset = "2px";
+        el.style.backgroundColor = "rgba(37, 99, 235, 0.1)";
+      }
+    }
+    const tip = createTooltip({ ...step, isPreview });
+    console.log("nextUrl for step", step.nextUrl);
+    if (!tip) {
+      const stepUrlInfo = getStepUrlInfo(step);
+      if (stepUrlInfo && !stepUrlInfo.isAvailable) {
+        toast("\u{1F4CD} Step element not found on this URL. The tooltip is designed for: " + stepUrlInfo.targetUrl, true);
+        console.warn("\u{1F4CD} Step element not found. Target URL:", stepUrlInfo.targetUrl, "Current URL:", window.location.href);
+      } else {
+        toast("\u{1F4CD} Tooltip element not found on this page", true);
+        console.warn("\u{1F4CD} Tooltip element not found for selector:", step.selector);
+      }
+      if (step.nextUrl && step.nextUrl.trim()) {
+        const navUrl = addTourParamsToUrl(step.nextUrl, STATE.tour_id);
+        sessionStorage.setItem("rivia_tour_state", JSON.stringify({
+          tourIndex: STATE.tourIndex,
+          tourId: STATE.tour_id,
+          user_var1: user_var12,
+          isPreviewMode: false,
+          // Use edit mode when navigating from tooltip
+          tips: STATE.tips,
+          title: STATE.title || "Untitled Tour",
+          publish: STATE.publish
+        }));
+      } else {
+        nextStep();
+      }
+      return;
+    }
+    attachNavigationButtons(tip, i, isPreview);
+    setTimeout(() => {
+      try {
+        tip.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      } catch (e) {
+        tip.scrollIntoView(true);
+      }
+    }, 100);
+  }
+  function createVideoUI(step) {
+    console.log("Creating video UI for step:", step);
+    const anchor = findBySelector(step.selector);
+    console.log("Found anchor:", anchor);
+    if (!anchor) {
+      console.warn("Anchor not found for selector:", step.selector);
+      return null;
+    }
+    const videoContainer = document.createElement("div");
+    videoContainer.dataset.riviaTipId = step.id;
+    const width = step.video_width || 400;
+    const height = step.video_height || 300;
+    videoContainer.style.cssText = `
+      position: absolute;
+      width: ${width}px;
+      height: ${height}px;
+      background: #ffffff;
+      border-radius: 20px;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 1px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+      z-index: 2147483647;
+      display: flex;
+      flex-direction: column;
+      border: 1px solid rgba(255, 255, 255, 0.8);
+    `;
+    const header = document.createElement("div");
+    header.style.cssText = `
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 20px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      font-weight: 700;
+      font-size: 15px;
+      box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+    `;
+    const titleSpan = document.createElement("span");
+    titleSpan.textContent = step.title || "Video Explainer";
+    header.appendChild(titleSpan);
+    if (!step.isPreview) {
+      const settingsBtn = document.createElement("button");
+      settingsBtn.innerHTML = "\u2699\uFE0F";
+      settingsBtn.style.cssText = `
+        background: rgba(255, 255, 255, 0.2);
+        border: 1px solid rgba(255, 255, 255, 0.3);
+        border-radius: 6px;
+        width: 32px;
+        height: 32px;
+        cursor: pointer;
+        color: white;
+        font-size: 16px;
+        transition: all 0.2s;
+      `;
+      settingsBtn.onmouseover = () => settingsBtn.style.background = "rgba(255, 255, 255, 0.3)";
+      settingsBtn.onmouseout = () => settingsBtn.style.background = "rgba(255, 255, 255, 0.2)";
+      settingsBtn.onclick = () => {
+        const existingPanel = document.getElementById("rivia-video-settings-panel");
+        if (existingPanel) {
+          existingPanel.remove();
+        } else {
+          showVideoSettings(step, videoContainer, settingsBtn);
+        }
+      };
+      header.appendChild(settingsBtn);
+    }
+    videoContainer.appendChild(header);
+    const playerArea = document.createElement("div");
+    playerArea.style.cssText = `
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+      position: relative;
+      overflow: hidden;
+    `;
+    if (step.video_url) {
+      const videoId = step.video_url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\n?#]+)/)?.[1];
+      if (videoId) {
+        const thumbnail = document.createElement("img");
+        thumbnail.src = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
+        thumbnail.style.cssText = `
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          opacity: 0.9;
+          filter: brightness(0.95);
+        `;
+        thumbnail.onerror = () => {
+          thumbnail.src = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;
+        };
+        playerArea.appendChild(thumbnail);
+        console.log("Video thumbnail loaded for video ID:", videoId);
+      } else {
+        console.warn("Could not extract video ID from URL:", step.video_url);
+      }
+    } else {
+      console.warn("No video URL provided for step:", step.id);
+    }
+    const playButton = document.createElement("button");
+    playButton.innerHTML = "\u25B6";
+    playButton.style.cssText = `
+      width: 90px;
+      height: 90px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
+      border: 4px solid rgba(255, 255, 255, 0.3);
+      color: white;
+      font-size: 36px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      box-shadow: 0 8px 25px rgba(255, 107, 107, 0.5), inset 0 -2px 5px rgba(0, 0, 0, 0.2);
+      position: relative;
+      z-index: 10;
+    `;
+    playButton.onmouseover = () => {
+      playButton.style.background = "linear-gradient(135deg, #ff5252 0%, #ff1744 100%)";
+      playButton.style.transform = "scale(1.15)";
+      playButton.style.boxShadow = "0 12px 35px rgba(255, 107, 107, 0.7), inset 0 -2px 5px rgba(0, 0, 0, 0.2)";
+    };
+    playButton.onmouseout = () => {
+      playButton.style.background = "linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%)";
+      playButton.style.transform = "scale(1)";
+      playButton.style.boxShadow = "0 8px 25px rgba(255, 107, 107, 0.5), inset 0 -2px 5px rgba(0, 0, 0, 0.2)";
+    };
+    playButton.onclick = () => {
+      if (step.video_url) {
+        const videoId = step.video_url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\n?#]+)/)?.[1];
+        if (videoId) {
+          playerArea.innerHTML = "";
+          const iframe = document.createElement("iframe");
+          iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
+          iframe.style.cssText = `
+            width: 100%;
+            height: 100%;
+            border: none;
+            border-radius: 8px;
+          `;
+          iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
+          iframe.allowFullscreen = true;
+          playerArea.appendChild(iframe);
+        }
+      }
+    };
+    playerArea.appendChild(playButton);
+    videoContainer.appendChild(playerArea);
+    const footer = document.createElement("div");
+    footer.style.cssText = `
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 20px;
+      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+      gap: 12px;
+      border-top: 1px solid rgba(0, 0, 0, 0.05);
+    `;
+    const skipBtn = document.createElement("button");
+    skipBtn.textContent = "Skip";
+    skipBtn.style.cssText = `
+      padding: 10px 20px;
+      background: rgba(255, 255, 255, 0.6);
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+      color: #333;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    `;
+    skipBtn.onmouseover = () => {
+      skipBtn.style.background = "rgba(255, 255, 255, 0.9)";
+      skipBtn.style.transform = "translateY(-2px)";
+      skipBtn.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.1)";
+    };
+    skipBtn.onmouseout = () => {
+      skipBtn.style.background = "rgba(255, 255, 255, 0.6)";
+      skipBtn.style.transform = "translateY(0)";
+      skipBtn.style.boxShadow = "none";
+    };
+    skipBtn.onclick = () => {
+      endTour();
+    };
+    footer.appendChild(skipBtn);
+    const nextBtn = document.createElement("button");
+    nextBtn.textContent = "Next";
+    nextBtn.style.cssText = `
+      padding: 10px 24px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border: none;
+      border-radius: 8px;
+      color: white;
+      font-weight: 700;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+    `;
+    nextBtn.onmouseover = () => {
+      nextBtn.style.background = "linear-gradient(135deg, #5568d3 0%, #6a3a8f 100%)";
+      nextBtn.style.transform = "translateY(-2px)";
+      nextBtn.style.boxShadow = "0 6px 20px rgba(102, 126, 234, 0.6)";
+    };
+    nextBtn.onmouseout = () => {
+      nextBtn.style.background = "linear-gradient(135deg, #667eea 0%, #764ba2 100%)";
+      nextBtn.style.transform = "translateY(0)";
+      nextBtn.style.boxShadow = "0 4px 15px rgba(102, 126, 234, 0.4)";
+    };
+    nextBtn.onclick = () => {
+      STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+      if (STATE.tourIndex < STATE.tips.length) {
+        showStep(STATE.tourIndex, true);
+      } else {
+        endTour();
+      }
+    };
+    footer.appendChild(nextBtn);
+    videoContainer.appendChild(footer);
+    document.body.appendChild(videoContainer);
+    setTimeout(() => {
+      try {
+        anchor.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
+      } catch (e) {
+        anchor.scrollIntoView(true);
+      }
+      setTimeout(() => {
+        const a = anchor.getBoundingClientRect();
+        const t = videoContainer.getBoundingClientRect();
+        let top = a.bottom + 8;
+        let left = a.left + (a.width - t.width) / 2;
+        left = Math.max(8, Math.min(left, window.innerWidth - t.width - 8));
+        top = Math.max(8, Math.min(top, window.innerHeight - t.height - 8));
+        videoContainer.style.left = left + window.scrollX + "px";
+        videoContainer.style.top = top + window.scrollY + "px";
+        console.log("Video UI positioned at:", { top, left, width, height });
+      }, 300);
+    }, 0);
+    return videoContainer;
+  }
+  function previewAnimation(selector, animationType) {
+    try {
+      const element = document.querySelector(selector);
+      if (!element) {
+        console.warn("Element not found for selector:", selector);
+        return;
+      }
+      element.classList.remove(
+        "rivia-animate-flash",
+        "rivia-animate-rubber-band",
+        "rivia-animate-shake"
+      );
+      const animationMap = {
+        flash: "rivia-animate-flash",
+        "rubber band": "rivia-animate-rubber-band",
+        shake: "rivia-animate-shake",
+        none: null
+      };
+      const animClass = animationMap[animationType];
+      if (animClass) {
+        element.classList.add(animClass);
+        setTimeout(() => {
+          element.classList.remove(animClass);
+        }, 2e3);
+      }
+    } catch (err) {
+      console.error("Error previewing animation:", err);
+    }
+  }
+  function findBySelector(selector) {
+    try {
+      return document.querySelector(selector);
+    } catch (e) {
+      console.warn("Invalid selector:", selector, e);
+      return null;
+    }
+  }
+  function highlightElementBySelector(selector) {
+    const el = findBySelector(selector);
+    if (!el) return;
+    try {
+      el.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "nearest"
+      });
+    } catch (e) {
+      el.scrollIntoView(true);
+    }
+    const r = el.getBoundingClientRect();
+    try {
+      document.body.appendChild(overlay);
+    } catch (e) {
+    }
+    Object.assign(highlight.style, {
+      left: r.left + window.scrollX + "px",
+      top: r.top + window.scrollY + "px",
+      width: r.width + "px",
+      height: r.height + "px"
+    });
+  }
+  function previewBackdrop(selector, backdropType) {
+    try {
+      let backdropOverlay = document.getElementById("rivia-backdrop-overlay");
+      if (backdropOverlay) {
+        backdropOverlay.remove();
+      }
+      if (backdropType === "none") {
+        return;
+      }
+      const targetElement = findBySelector(selector);
+      if (!targetElement) return;
+      const targetRect = targetElement.getBoundingClientRect();
+      const padding = 8;
+      if (backdropType === "boxed") {
+        const boxedOverlay = document.createElement("div");
+        boxedOverlay.id = "rivia-backdrop-overlay";
+        boxedOverlay.style.cssText = `
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 2147483644;
+          pointer-events: none;
+          background: rgba(240, 240, 245, 0.3);
+          backdrop-filter: blur(3px);
+        `;
+        const boxHighlight = document.createElement("div");
+        boxHighlight.style.cssText = `
+          position: fixed;
+          left: ${targetRect.left - padding}px;
+          top: ${targetRect.top - padding}px;
+          width: ${targetRect.width + padding * 2}px;
+          height: ${targetRect.height + padding * 2}px;
+          border: 2px solid #3b82f6;
+          border-radius: 8px;
+          background: rgba(59, 130, 246, 0.08);
+          pointer-events: none;
+          z-index: 2147483645;
+          box-shadow: 0 0 0 9999px rgba(240, 240, 245, 0.3);
+        `;
+        document.body.appendChild(boxedOverlay);
+        document.body.appendChild(boxHighlight);
+        const updateBoxed = () => {
+          const newRect = targetElement.getBoundingClientRect();
+          boxHighlight.style.left = `${newRect.left - padding}px`;
+          boxHighlight.style.top = `${newRect.top - padding}px`;
+          boxHighlight.style.width = `${newRect.width + padding * 2}px`;
+          boxHighlight.style.height = `${newRect.height + padding * 2}px`;
+        };
+        window.addEventListener("scroll", updateBoxed, { passive: true });
+        window.addEventListener("resize", updateBoxed);
+        boxedOverlay.updateBackdrop = updateBoxed;
+        return;
+      }
+      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      svg.id = "rivia-backdrop-overlay";
+      svg.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 2147483644;
+        pointer-events: none;
+      `;
+      const defs = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "defs"
+      );
+      const mask = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "mask"
+      );
+      mask.id = "rivia-backdrop-mask";
+      const rect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "rect"
+      );
+      rect.setAttribute("width", "100%");
+      rect.setAttribute("height", "100%");
+      rect.setAttribute("fill", "white");
+      mask.appendChild(rect);
+      const clearRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "rect"
+      );
+      clearRect.setAttribute("x", Math.max(0, targetRect.left - padding));
+      clearRect.setAttribute("y", Math.max(0, targetRect.top - padding));
+      clearRect.setAttribute("width", targetRect.width + padding * 2);
+      clearRect.setAttribute("height", targetRect.height + padding * 2);
+      clearRect.setAttribute("fill", "black");
+      clearRect.setAttribute("rx", "8");
+      mask.appendChild(clearRect);
+      defs.appendChild(mask);
+      svg.appendChild(defs);
+      const overlayColor = backdropType === "light overlay" ? "rgba(255, 255, 255, 0.6)" : "rgba(0, 0, 0, 0.7)";
+      const maskedRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "rect"
+      );
+      maskedRect.setAttribute("width", "100%");
+      maskedRect.setAttribute("height", "100%");
+      maskedRect.setAttribute("fill", overlayColor);
+      maskedRect.setAttribute("mask", "url(#rivia-backdrop-mask)");
+      svg.appendChild(maskedRect);
+      document.body.appendChild(svg);
+      const updateBackdrop = () => {
+        const newRect = targetElement.getBoundingClientRect();
+        clearRect.setAttribute("x", Math.max(0, newRect.left - padding));
+        clearRect.setAttribute("y", Math.max(0, newRect.top - padding));
+        clearRect.setAttribute("width", newRect.width + padding * 2);
+        clearRect.setAttribute("height", newRect.height + padding * 2);
+      };
+      window.addEventListener("scroll", updateBackdrop, { passive: true });
+      window.addEventListener("resize", updateBackdrop);
+      svg.updateBackdrop = updateBackdrop;
+    } catch (err) {
+      console.error("Error previewing backdrop:", err);
+    }
+  }
+  function showWelcomeCardPreview(step, stepIndex) {
+    if (!step) {
+      console.warn("Step not found for preview");
+      return;
+    }
+    console.log("Showing welcome card preview for step:", step);
+    cleanupAllOverlays();
+    document.querySelectorAll('[id*="rivia-welcome-preview"]').forEach((el) => el.remove());
+    document.querySelectorAll('[id*="rivia-backdrop"]').forEach((el) => el.remove());
+    const backdropStyle = step.basic_backdrop || "none";
+    if (backdropStyle !== "none") {
+      const backdropOverlay = document.createElement("div");
+      backdropOverlay.id = "rivia-welcome-preview-backdrop";
+      backdropOverlay.style.cssText = `
+        position: fixed;
+        inset: 0;
+        z-index: 2147483643;
+        pointer-events: none;
+      `;
+      if (backdropStyle === "boxed") {
+        backdropOverlay.style.background = "rgba(0, 0, 0, 0.1)";
+        backdropOverlay.style.border = "2px solid rgba(0, 0, 0, 0.2)";
+      } else if (backdropStyle === "light overlay") {
+        backdropOverlay.style.background = "rgba(255, 255, 255, 0.7)";
+        backdropOverlay.style.border = "none";
+      } else if (backdropStyle === "dark overlay") {
+        backdropOverlay.style.background = "rgba(0, 0, 0, 0.7)";
+        backdropOverlay.style.border = "none";
+      }
+      document.body.insertBefore(backdropOverlay, document.body.firstChild);
+    }
+    const overlay2 = document.createElement("div");
+    overlay2.id = "rivia-welcome-preview-overlay";
+    overlay2.style.cssText = `
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 2147483644;
+    `;
+    const modal = document.createElement("div");
+    modal.id = "rivia-welcome-preview-modal";
+    const bgColor = step.welcome_bg_color || "#ffffff";
+    modal.style.cssText = `
+      background: ${bgColor};
+      border-radius: 12px;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      max-width: 700px;
+      width: 90%;
+      max-height: 80vh;
+      overflow-y: auto;
+      padding: 0;
+    `;
+    const headerSection = document.createElement("div");
+    const headerBgColor = step.welcome_header_bg_color || "#667eea";
+    const headerTextColor = step.welcome_header_text_color || "#ffffff";
+    const headerHeight = step.welcome_header_height || 80;
+    headerSection.style.cssText = `
+      background: ${headerBgColor};
+      padding: ${headerHeight / 2}px 30px;
+      color: ${headerTextColor};
+      border-radius: 12px 12px 0 0;
+      text-align: center;
+      min-height: ${headerHeight}px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+    headerSection.id = "rivia-welcome-preview-header";
+    const headerText = document.createElement("h1");
+    headerText.textContent = step.title || "Welcome!";
+    headerText.style.cssText = `
+      margin: 0;
+      font-size: 32px;
+      font-weight: bold;
+      font-family: inherit;
+      color: ${headerTextColor};
+    `;
+    headerSection.appendChild(headerText);
+    modal.appendChild(headerSection);
+    const contentSection = document.createElement("div");
+    const footerPadding = step.welcome_footer_padding || 20;
+    const footerBgColor = step.welcome_footer_bg_color || "#ffffff";
+    const footerTextColor = step.welcome_footer_text_color || "#333333";
+    const footerHeight = step.welcome_footer_height || 60;
+    contentSection.style.cssText = `
+      padding: ${footerPadding}px 30px;
+      text-align: center;
+      background: ${footerBgColor};
+      color: ${footerTextColor};
+      min-height: ${footerHeight}px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+    contentSection.id = "rivia-welcome-preview-content";
+    const descriptionText = document.createElement("p");
+    descriptionText.textContent = step.content || "Welcome message";
+    descriptionText.style.cssText = `
+      margin: 0;
+      font-size: 14px;
+      line-height: 1.6;
+      color: ${footerTextColor};
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      font-family: inherit;
+    `;
+    contentSection.appendChild(descriptionText);
+    modal.appendChild(contentSection);
+    const buttonSection = document.createElement("div");
+    buttonSection.style.cssText = `
+      display: flex;
+      gap: 12px;
+      padding: 20px 30px;
+      border-top: 1px solid #e5e7eb;
+      justify-content: flex-end;
+    `;
+    const skipBtn = document.createElement("button");
+    skipBtn.textContent = step.welcome_skip_label || "Skip";
+    skipBtn.style.cssText = `
+      padding: 8px 16px;
+      border: 1px solid #d1d5db;
+      border-radius: 6px;
+      background: white;
+      color: #6b7280;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      outline: none;
+      transition: all 0.2s ease;
+    `;
+    skipBtn.onmouseover = () => {
+      skipBtn.style.background = "#f3f4f6";
+    };
+    skipBtn.onmouseout = () => {
+      skipBtn.style.background = "white";
+    };
+    skipBtn.onclick = () => {
+      const advanceAction = step.basic_advanceAction || "next button";
+      overlay2.remove();
+      const backdropOverlay = document.getElementById(
+        "rivia-welcome-preview-backdrop"
+      );
+      if (backdropOverlay) backdropOverlay.remove();
+      if (advanceAction === "skip button") {
+        endTour();
+      } else {
+        endTour();
+      }
+    };
+    buttonSection.appendChild(skipBtn);
+    const nextBtn = document.createElement("button");
+    nextBtn.textContent = step.welcome_next_label || "Next";
+    nextBtn.style.cssText = `
+      padding: 8px 16px;
+      border: none;
+      border-radius: 6px;
+      background: #2563eb;
+      color: white;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      outline: none;
+      transition: all 0.2s ease;
+    `;
+    nextBtn.onmouseover = () => {
+      nextBtn.style.background = "#1d4ed8";
+    };
+    nextBtn.onmouseout = () => {
+      nextBtn.style.background = "#2563eb";
+    };
+    nextBtn.onclick = () => {
+      const advanceAction = step.basic_advanceAction || "next button";
+      overlay2.remove();
+      const backdropOverlay = document.getElementById(
+        "rivia-welcome-preview-backdrop"
+      );
+      if (backdropOverlay) backdropOverlay.remove();
+      if (advanceAction === "next button") {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          showStep(STATE.tourIndex, true);
+        } else {
+          endTour();
+        }
+      } else if (advanceAction === "scroll") {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          const nextStep2 = STATE.tips[STATE.tourIndex];
+          const nextElement = findBySelector(nextStep2.selector);
+          if (nextElement) {
+            nextElement.scrollIntoView({ behavior: "smooth", block: "center" });
+            setTimeout(() => showStep(STATE.tourIndex, true), 600);
+          } else {
+            showStep(STATE.tourIndex, true);
+          }
+        } else {
+          endTour();
+        }
+      } else if (advanceAction === "click") {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          showStep(STATE.tourIndex, true);
+        } else {
+          endTour();
+        }
+      } else {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          showStep(STATE.tourIndex, true);
+        } else {
+          endTour();
+        }
+      }
+    };
+    buttonSection.appendChild(nextBtn);
+    modal.appendChild(buttonSection);
+    overlay2.appendChild(modal);
+    document.body.appendChild(overlay2);
+    overlay2.onclick = (e) => {
+      if (e.target === overlay2) {
+        e.stopPropagation();
+        overlay2.remove();
+        const backdropOverlay = document.getElementById(
+          "rivia-welcome-preview-backdrop"
+        );
+        if (backdropOverlay) backdropOverlay.remove();
+      }
+    };
+    modal.onclick = (e) => {
+      e.stopPropagation();
+    };
+    console.log(
+      "Welcome card preview displayed with backdrop:",
+      backdropStyle,
+      "and advance action:",
+      step.basic_advanceAction
+    );
+  }
+  function showModalDialogPreview(step, stepIndex) {
+    const existingCenteredModal = document.getElementById(
+      "rivia-modal-dialog-preview-modal"
+    );
+    if (existingCenteredModal) existingCenteredModal.remove();
+    const backdropStyle = step.basic_backdrop || "none";
+    if (backdropStyle !== "none") {
+      const backdropOverlay = document.createElement("div");
+      backdropOverlay.id = "rivia-modal-dialog-preview-backdrop";
+      backdropOverlay.style.cssText = `
+        position: fixed;
+        inset: 0;
+        z-index: 2147483643;
+        pointer-events: none;
+      `;
+      if (backdropStyle === "boxed") {
+        backdropOverlay.style.background = "rgba(0, 0, 0, 0.1)";
+        backdropOverlay.style.border = "2px solid rgba(0, 0, 0, 0.2)";
+      } else if (backdropStyle === "light overlay") {
+        backdropOverlay.style.background = "rgba(255, 255, 255, 0.7)";
+        backdropOverlay.style.border = "none";
+      } else if (backdropStyle === "dark overlay") {
+        backdropOverlay.style.background = "rgba(0, 0, 0, 0.7)";
+        backdropOverlay.style.border = "none";
+      }
+      document.body.insertBefore(backdropOverlay, document.body.firstChild);
+    }
+    const centeredContainer = document.createElement("div");
+    centeredContainer.id = "rivia-modal-dialog-preview-modal";
+    centeredContainer.style.cssText = `
+      position: fixed;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 2147483644;
+      pointer-events: none;
+    `;
+    const modal = document.createElement("div");
+    modal.id = "rivia-modal-dialog-preview";
+    const modalWidth = step.modal_width || 500;
+    const modalHeight = step.modal_height || 400;
+    const modalBgColor = step.modal_bg_color || "#ffffff";
+    const modalTextColor = step.modal_text_color || "#333333";
+    const modalFooterBgColor = step.modal_footer_bg_color || "#f3f4f6";
+    const accentColor = step.modal_accent_color || "#10b981";
+    modal.style.cssText = `
+      pointer-events: auto;
+      background: ${modalBgColor};
+      border-radius: 12px;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      width: ${modalWidth}px;
+      max-width: 90vw;
+      height: ${modalHeight}px;
+      max-height: 80vh;
+      overflow-y: auto;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+    `;
+    const accentLine = document.createElement("div");
+    accentLine.style.cssText = `
+      height: 4px;
+      background: ${accentColor};
+      border-radius: 12px 12px 0 0;
+    `;
+    modal.appendChild(accentLine);
+    const contentSection = document.createElement("div");
+    contentSection.style.cssText = `
+      flex: 1;
+      padding: 30px;
+      color: ${modalTextColor};
+      overflow-y: auto;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    `;
+    contentSection.textContent = step.content || "Type your content here.";
+    modal.appendChild(contentSection);
+    const footerSection = document.createElement("div");
+    footerSection.style.cssText = `
+      background: ${modalFooterBgColor};
+      padding: 20px 30px;
+      border-top: 1px solid #e5e7eb;
+      border-radius: 0 0 12px 12px;
+      display: flex;
+      justify-content: flex-end;
+      gap: 12px;
+    `;
+    const skipBtn = document.createElement("button");
+    skipBtn.textContent = step.modal_skip_label || "Skip";
+    skipBtn.style.cssText = `
+      background: transparent;
+      color: #9ca3af;
+      border: none;
+      padding: 10px 20px;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s;
+    `;
+    skipBtn.onmouseover = () => {
+      skipBtn.style.color = "#6b7280";
+      skipBtn.style.background = "#f3f4f6";
+    };
+    skipBtn.onmouseout = () => {
+      skipBtn.style.color = "#9ca3af";
+      skipBtn.style.background = "transparent";
+    };
+    skipBtn.onclick = () => {
+      centeredContainer.remove();
+      const backdropOverlay = document.getElementById(
+        "rivia-modal-dialog-preview-backdrop"
+      );
+      if (backdropOverlay) backdropOverlay.remove();
+      endTour();
+    };
+    footerSection.appendChild(skipBtn);
+    const nextBtn = document.createElement("button");
+    nextBtn.textContent = step.modal_next_label || "Next";
+    nextBtn.style.cssText = `
+      background: #2563eb;
+      color: white;
+      border: none;
+      padding: 10px 24px;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+    `;
+    nextBtn.onmouseover = () => nextBtn.style.background = "#1d4ed8";
+    nextBtn.onmouseout = () => nextBtn.style.background = "#2563eb";
+    nextBtn.onclick = () => {
+      const advanceAction = step.basic_advanceAction || "next button";
+      centeredContainer.remove();
+      const backdropOverlay = document.getElementById(
+        "rivia-modal-dialog-preview-backdrop"
+      );
+      if (backdropOverlay) backdropOverlay.remove();
+      if (advanceAction === "next button") {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          showStep(STATE.tourIndex, true);
+        } else {
+          endTour();
+        }
+      } else if (advanceAction === "scroll") {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          const nextStepData = STATE.tips[STATE.tourIndex];
+          const nextElement = findBySelector(nextStepData.selector);
+          if (nextElement) {
+            nextElement.scrollIntoView({ behavior: "smooth", block: "center" });
+            setTimeout(() => showStep(STATE.tourIndex, true), 600);
+          } else {
+            showStep(STATE.tourIndex, true);
+          }
+        } else {
+          endTour();
+        }
+      } else if (advanceAction === "click") {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          showStep(STATE.tourIndex, true);
+        } else {
+          endTour();
+        }
+      } else {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          showStep(STATE.tourIndex, true);
+        } else {
+          endTour();
+        }
+      }
+    };
+    footerSection.appendChild(nextBtn);
+    modal.appendChild(footerSection);
+    centeredContainer.appendChild(modal);
+    document.body.appendChild(centeredContainer);
+    console.log(
+      "Modal dialog preview displayed with backdrop:",
+      backdropStyle,
+      "and advance action:",
+      step.basic_advanceAction
+    );
+  }
+  function attachNavigationButtons(tip, i, isPreview) {
+    const nav = document.createElement("div");
+    const navStyle = isPreview ? `
+    display: flex;
+    gap: 8px;
+    margin-top: 12px;
+    justify-content: flex-end;
+  ` : `
+    display: flex;
+    gap: 6px;
+    margin-top: 8px;
+    justify-content: flex-end;
+  `;
+    nav.style.cssText = navStyle;
+    const step = STATE.tips[i];
+    const advanceAction = step?.basic_advanceAction || "next button";
+    const card_back_button = step?.card_back_button ?? false;
+    const card_next_button = step?.card_next_button ?? true;
+    const card_skip_button = step?.card_skip_button ?? false;
+    if (i > 0 && card_back_button) {
+      const back = document.createElement("button");
+      back.textContent = "\u2190 Back";
+      const backStyle = isPreview ? `
+      padding: 8px 14px;
+      border-radius: 8px;
+      border: 1px solid rgba(37, 99, 235, 0.3);
+      background: rgba(37, 99, 235, 0.1);
+      color: #2563eb;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 500;
+      transition: all 0.2s ease;
+    ` : `
+      padding: 6px 10px;
+      border-radius: 8px;
+      border: 1px solid #333;
+      background: #1f1f1f;
+      color: #fff;
+      cursor: pointer;
+    `;
+      back.style.cssText = backStyle;
+      back.onmouseover = () => {
+        if (isPreview) back.style.background = "rgba(37, 99, 235, 0.2)";
+      };
+      back.onmouseout = () => {
+        if (isPreview) back.style.background = "rgba(37, 99, 235, 0.1)";
+      };
+      back.onclick = () => prevStep();
+      nav.appendChild(back);
+    }
+    if (advanceAction === "manual click") {
+      const targetElement = findBySelector(step.selector);
+      if (targetElement) {
+        attachClickListenerToElement(targetElement);
+      }
+    } else if (advanceAction === "scroll") {
+      const scrollMsg = document.createElement("div");
+      scrollMsg.textContent = "\u2B07\uFE0F Scroll to continue";
+      scrollMsg.style.cssText = `
+      padding: 8px 14px;
+      border-radius: 8px;
+      background: rgba(168, 85, 247, 0.1);
+      color: #a855f7;
+      font-size: 13px;
+      font-weight: 500;
+      align-self: center;
+    `;
+      nav.appendChild(scrollMsg);
+      enableScrollAdvance();
+    } else if (card_next_button) {
+      const next = document.createElement("button");
+      next.textContent = i === STATE.tips.length - 1 ? "Finish \u2713" : "Next \u2192";
+      const nextStyle = isPreview ? `
+      padding: 8px 14px;
+      border-radius: 8px;
+      border: 1px solid rgba(37, 99, 235, 0.5);
+      background: linear-gradient(135deg, rgba(37, 99, 235, 0.9) 0%, rgba(37, 99, 235, 0.8) 100%);
+      color: white;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 600;
+      transition: all 0.2s ease;
+    ` : `
+      padding: 6px 10px;
+      border-radius: 8px;
+      border: 1px solid #333;
+      background: #2563eb;
+      color: #fff;
+      cursor: pointer;
+    `;
+      next.style.cssText = nextStyle;
+      next.onmouseover = () => {
+        if (isPreview)
+          next.style.background = "linear-gradient(135deg, rgba(37, 99, 235, 1) 0%, rgba(37, 99, 235, 0.9) 100%)";
+      };
+      next.onmouseout = () => {
+        if (isPreview)
+          next.style.background = "linear-gradient(135deg, rgba(37, 99, 235, 0.9) 0%, rgba(37, 99, 235, 0.8) 100%)";
+      };
+      next.onclick = () => i === STATE.tips.length - 1 ? endTour() : nextStep();
+      nav.appendChild(next);
+    }
+    if (card_skip_button) {
+      const skip = document.createElement("button");
+      skip.textContent = "Skip";
+      const skipStyle = isPreview ? `
+      padding: 8px 14px;
+      border-radius: 8px;
+      border: 1px solid rgba(168, 85, 247, 0.3);
+      background: rgba(168, 85, 247, 0.1);
+      color: #a855f7;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 500;
+      transition: all 0.2s ease;
+    ` : `
+      padding: 6px 10px;
+      border-radius: 8px;
+      border: 1px solid #999;
+      background: #f3f4f6;
+      color: #374151;
+      cursor: pointer;
+    `;
+      skip.style.cssText = skipStyle;
+      skip.onmouseover = () => {
+        if (isPreview) skip.style.background = "rgba(168, 85, 247, 0.2)";
+      };
+      skip.onmouseout = () => {
+        if (isPreview) skip.style.background = "rgba(168, 85, 247, 0.1)";
+      };
+      skip.onclick = () => endTour();
+      nav.appendChild(skip);
+    }
+    tip.appendChild(nav);
+    if (isPreview) {
+      tip.setAttribute("data-rivia-preview-nav", "true");
+    }
+    if (isPreview) {
+      const stepIndicator = document.createElement("div");
+      stepIndicator.style.cssText = `
+      position: absolute;
+      top: 8px;
+      right: 12px;
+      font-size: 11px;
+      color: rgba(37, 99, 235, 0.6);
+      font-weight: 500;
+    `;
+      stepIndicator.textContent = `Step ${i + 1} of ${STATE.tips.length}`;
+      tip.appendChild(stepIndicator);
+    }
+  }
+  function cleanupAllOverlays() {
+    const welcomeBackdropOverlay = document.getElementById(
+      "rivia-welcome-backdrop-overlay"
+    );
+    if (welcomeBackdropOverlay) {
+      welcomeBackdropOverlay.remove();
+    }
+    const welcomePreviewOverlay = document.getElementById(
+      "rivia-welcome-preview-overlay"
+    );
+    if (welcomePreviewOverlay) {
+      welcomePreviewOverlay.remove();
+    }
+    const backdropOverlay = document.getElementById("rivia-backdrop-overlay");
+    if (backdropOverlay) {
+      if (backdropOverlay.updateBackdrop) {
+        window.removeEventListener("scroll", backdropOverlay.updateBackdrop);
+        window.removeEventListener("resize", backdropOverlay.updateBackdrop);
+      }
+      backdropOverlay.remove();
+    }
+    const spotlightOverlay = document.getElementById("rivia-spotlight-overlay");
+    if (spotlightOverlay) {
+      if (spotlightOverlay.updateSpotlight) {
+        window.removeEventListener("scroll", spotlightOverlay.updateSpotlight);
+        window.removeEventListener("resize", spotlightOverlay.updateSpotlight);
+      }
+      spotlightOverlay.remove();
+    }
+    document.querySelectorAll('[style*="box-shadow: 0 0 0 9999px"]').forEach((el) => {
+      el.remove();
+    });
+    document.querySelectorAll('svg[id*="rivia"]').forEach((svg) => {
+      if (svg.updateSpotlight) {
+        window.removeEventListener("scroll", svg.updateSpotlight);
+        window.removeEventListener("resize", svg.updateSpotlight);
+      }
+      svg.remove();
+    });
+  }
+  function nextStep() {
+    if (STATE.tourIndex < STATE.tips.length - 1) {
+      let getNextStepInfo3 = function(currentIndex2) {
+        if (currentIndex2 >= STATE.tips.length - 1) {
+          return { type: "end", index: currentIndex2 };
+        }
+        const nextStep2 = STATE.tips[currentIndex2 + 1];
+        if (!nextStep2) return { type: "end", index: currentIndex2 };
+        if (nextStep2.targetUrl && nextStep2.targetUrl.trim()) {
+          console.log("WE reached navigation");
+          return { type: "navigate", index: currentIndex2 + 1, url: nextStep2.targetUrl };
+        }
+        if (isStepAvailableOnCurrentPage(nextStep2)) {
+          return { type: "show", index: currentIndex2 + 1 };
+        }
+        return getNextStepInfo3(currentIndex2 + 1);
+      };
+      var getNextStepInfo2 = getNextStepInfo3;
+      const currentIndex = STATE.tourIndex;
+      STATE.tourIndex++;
+      const nextStepData = STATE.tips[STATE.tourIndex];
+      console.log("\u{1F7E2} nextStep called - moving from step", currentIndex, "to", STATE.tourIndex);
+      if (nextStepData.nextUrl && nextStepData.nextUrl.trim()) {
+        sessionStorage.setItem("rivia_tour_state", JSON.stringify({
+          tourIndex: STATE.tourIndex,
+          tourId: STATE.tour_id,
+          tips: STATE.tips,
+          title: STATE.title || "Untitled Tour",
+          user_var1: user_var12,
+          publish: STATE.publish
+        }));
+        const navUrl = addTourParamsToUrl(nextStepData.nextUrl, STATE.tour_id);
+        console.log("\u{1F7E2} Saving tour state before navigation to:", navUrl);
+        window.location.href = navUrl;
+        return;
+      }
+      const nextStepInfo = getNextStepInfo3(currentIndex);
+      if (nextStepInfo.type === "navigate") {
+        sessionStorage.setItem("rivia_tour_state", JSON.stringify({
+          tourIndex: nextStepInfo.index,
+          tourId: STATE.tour_id,
+          isPreviewMode: STATE.isPreviewMode,
+          user_var1: user_var12,
+          tips: STATE.tips,
+          title: STATE.title || "Untitled Tour",
+          publish: STATE.publish
+        }));
+        const navUrl = addTourParamsToUrl(nextStepInfo.url, STATE.tour_id);
+        console.log("\u{1F7E2} Navigating to next step URL:", navUrl);
+        window.location.href = navUrl;
+        return;
+      }
+      cleanupAllOverlays();
+      showStep(STATE.tourIndex, STATE.isPreviewMode);
+    } else if (STATE.tourIndex === STATE.tips.length - 1) {
+      endTour();
+    }
+  }
+  function getNextStepInfo(currentIndex) {
+    if (currentIndex >= STATE.tips.length - 1) {
+      return { type: "end", index: currentIndex };
+    }
+    const nextStep2 = STATE.tips[currentIndex + 1];
+    if (!nextStep2) return { type: "end", index: currentIndex };
+    if (isStepAvailableOnCurrentPage(nextStep2)) {
+      return { type: "show", index: currentIndex + 1 };
+    }
+    if (nextStep2.targetUrl && nextStep2.targetUrl.trim()) {
+      return { type: "navigate", index: currentIndex + 1, url: nextStep2.targetUrl };
+    }
+    return getNextStepInfo(currentIndex + 1);
+  }
+  function isStepAvailableOnCurrentPage(step) {
+    if (!step) return false;
+    if (!step.targetUrl || !step.targetUrl.trim()) return true;
+    return urlMatches(step.targetUrl);
+  }
+  function urlMatches(pattern, currentUrl = window.location.href) {
+    if (!pattern || !pattern.trim()) return true;
+    const cleanPattern = pattern.trim();
+    const cleanUrl = currentUrl.trim();
+    if (cleanPattern === cleanUrl) return true;
+    try {
+      const patternUrl = new URL(cleanPattern);
+      const currentPageUrl = new URL(cleanUrl);
+      if (patternUrl.origin === currentPageUrl.origin) {
+        const patternPath = patternUrl.pathname;
+        const currentPath = currentPageUrl.pathname;
+        if (patternPath === "/" || patternPath === "") {
+          return true;
+        }
+        return currentPath.startsWith(patternPath);
+      }
+    } catch (e) {
+      console.warn("Failed to parse URLs for domain matching:", cleanPattern, cleanUrl, e);
+    }
+    if (cleanPattern.includes("*")) {
+      const regexPattern = cleanPattern.replace(/[.+?^${}()|[\]\\]/g, "\\$&").replace(/\*/g, ".*");
+      try {
+        const regex = new RegExp(`^${regexPattern}$`);
+        return regex.test(cleanUrl);
+      } catch (e) {
+        console.warn("Invalid URL pattern:", cleanPattern, e);
+        return false;
+      }
+    }
+    return cleanUrl.includes(cleanPattern);
+  }
+  function addTourParamsToUrl(url, tourId) {
+    if (!url || !tourId) return url;
+    try {
+      const urlObj = new URL(url);
+      return urlObj.toString();
+    } catch (e) {
+      console.warn("Failed to add tour params to URL:", url, e);
+      return url;
+    }
+  }
+  function getPreviousStepInfo(currentIndex) {
+    if (currentIndex <= 0) {
+      return { type: "start", index: 0 };
+    }
+    const prevStep2 = STATE.tips[currentIndex - 1];
+    if (!prevStep2) return { type: "start", index: 0 };
+    if (isStepAvailableOnCurrentPage(prevStep2)) {
+      return { type: "show", index: currentIndex - 1 };
+    }
+    if (prevStep2.targetUrl && prevStep2.targetUrl.trim()) {
+      return { type: "navigate", index: currentIndex - 1, url: prevStep2.targetUrl };
+    }
+    return getPreviousStepInfo(currentIndex - 1);
+  }
+  function prevStep() {
+    if (STATE.tourIndex > 0) {
+      const prevInfo = getPreviousStepInfo(STATE.tourIndex);
+      if (prevInfo.type === "start") {
+        return;
+      }
+      if (prevInfo.type === "navigate") {
+        STATE.tourIndex = prevInfo.index;
+        const prevNavUrl = addTourParamsToUrl(prevInfo.url, STATE.tour_id);
+        sessionStorage.setItem("rivia_tour_state", JSON.stringify({
+          tourIndex: STATE.tourIndex,
+          tourId: STATE.tour_id,
+          user_var1: user_var12,
+          isPreviewMode: STATE.isPreviewMode,
+          tips: STATE.tips,
+          title: STATE.title,
+          publish: STATE.publish
+        }));
+        console.log(" Navigating to previous step URL:", prevNavUrl);
+        window.location.href = prevNavUrl;
+        return;
+      }
+      if (prevInfo.type === "show") {
+        STATE.tourIndex = prevInfo.index;
+        cleanupAllOverlays();
+        showStep(STATE.tourIndex, STATE.isPreviewMode);
+      }
+    }
+  }
+  function endTour() {
+    console.log("Ending tour and cleaning up UI elements...");
+    document.querySelectorAll("[data-rivia-tip-id]").forEach((n) => n.remove());
+    STATE.tourIndex = 0;
+    const user_var2 = user_var12;
+    const backendUrl = `http://localhost:5000/tours_clients/${STATE.tour_id}`;
+    const payload = {
+      name: user_var2,
+      is_completed: true
+    };
+    fetch(backendUrl, {
+      method: "POST",
+      // <-- FIXED
+      headers: { "Content-Type": "application/json" },
+      credentials: "include",
+      body: JSON.stringify(payload),
+      keepalive: true
+      // allow sending even during unload
+    }).catch((err) => {
+      console.error("Failed to end tour:", err);
+    });
+  }
+  function updateUrlStatus() {
+    const urlStatus = document.getElementById("rivia-url-status");
+    if (!urlStatus) return;
+    const currentStep = STATE.tips[STATE.tourIndex];
+    if (!currentStep) {
+      urlStatus.textContent = "\u{1F4CD} Current URL";
+      return;
+    }
+    const stepUrlInfo = getStepUrlInfo(currentStep);
+    if (stepUrlInfo) {
+      if (stepUrlInfo.isAvailable) {
+        urlStatus.textContent = "\u2713 On this page";
+        urlStatus.style.color = "#86efac";
+      } else {
+        const shortUrl = stepUrlInfo.targetUrl.length > 30 ? stepUrlInfo.targetUrl.substring(0, 27) + "..." : stepUrlInfo.targetUrl;
+        urlStatus.textContent = "\u{1F4CD} " + shortUrl;
+        urlStatus.style.color = "#fbbf24";
+      }
+      urlStatus.title = stepUrlInfo.displayText;
+    }
+  }
+  function playTour() {
+    if (STATE.is_completed)
+      return;
+    if (!STATE.tips.length) {
+      console.warn("No tips loaded for this host");
+      return;
+    }
+    STATE.savedTourIndex = STATE.tourIndex;
+    STATE.isPreviewMode = true;
+    updateUrlStatus();
+    console.log("Cleaning up UI elements before preview...");
+    document.querySelectorAll("[data-rivia-tip-id]").forEach((n) => n.remove());
+    document.querySelectorAll('[id*="rivia-welcome-preview"]').forEach((el) => el.remove());
+    document.querySelectorAll('[id*="rivia-welcome-edit"]').forEach((el) => el.remove());
+    document.querySelectorAll('[id*="rivia-modal-dialog"]').forEach((el) => el.remove());
+    const videoSettingsPanel = document.getElementById("rivia-video-settings-panel");
+    if (videoSettingsPanel) {
+      videoSettingsPanel.remove();
+    }
+    document.querySelectorAll('[id*="rivia-backdrop"]').forEach((el) => el.remove());
+    document.querySelectorAll("[data-rivia-highlight]").forEach((n) => {
+      n.removeAttribute("data-rivia-highlight");
+      n.style.outline = "";
+      n.style.outlineOffset = "";
+      n.style.backgroundColor = "";
+    });
+    try {
+      overlay.remove();
+    } catch (e) {
+    }
+    const rightPanel = document.getElementById("rivia-pointer-card-panel");
+    if (rightPanel) {
+      rightPanel.remove();
+    }
+    console.log("UI cleanup complete, starting preview...");
+    const firstStep = STATE.tips[0];
+    if (firstStep && firstStep.targetUrl) {
+      const cleanCurrentUrl = cleanUrlForStorage(window.location.href);
+      if (firstStep.targetUrl !== cleanCurrentUrl) {
+        const navUrl = addTourParamsToUrl(firstStep.targetUrl, STATE.tour_id);
+        sessionStorage.setItem("rivia_tour_state", JSON.stringify({
+          tourIndex: 0,
+          tourId: STATE.tour_id,
+          isPreviewMode: true,
+          tips: STATE.tips,
+          title: STATE.title || "Untitled Tour",
+          publish: STATE.publish
+        }));
+        console.log("\u{1F7E2} Starting preview - navigating to first step targetUrl:", navUrl);
+        return;
+      }
+    }
+    showStep(STATE.tourIndex, true);
+  }
+  function cleanUrlForStorage(url) {
+    if (!url || !url.trim()) return url;
+    try {
+      const urlObj = new URL(url);
+      urlObj.searchParams.delete("rivia_tour");
+      urlObj.searchParams.delete("tour_id");
+      return urlObj.toString();
+    } catch (e) {
+      console.warn("Failed to parse URL:", url, e);
+      return url;
+    }
+  }
+  function showFeedbackCardPreview(step, stepIndex) {
+    if (!step) {
+      console.warn("Step not found for preview");
+      return;
+    }
+    console.log("Showing feedback card preview for step:", step);
+    cleanupAllOverlays();
+    document.querySelectorAll('[id*="rivia-feedback-preview"]').forEach((el) => el.remove());
+    document.querySelectorAll('[id*="rivia-backdrop"]').forEach((el) => el.remove());
+    const backdropStyle = step.basic_backdrop || "none";
+    if (backdropStyle !== "none") {
+      const backdropOverlay = document.createElement("div");
+      backdropOverlay.id = "rivia-feedback-preview-backdrop";
+      backdropOverlay.style.cssText = `
+        position: fixed;
+        inset: 0;
+        z-index: 2147483643;
+        pointer-events: none;
+      `;
+      if (backdropStyle === "boxed") {
+        backdropOverlay.style.background = "rgba(0, 0, 0, 0.1)";
+        backdropOverlay.style.border = "2px solid rgba(0, 0, 0, 0.2)";
+      } else if (backdropStyle === "light overlay") {
+        backdropOverlay.style.background = "rgba(255, 255, 255, 0.7)";
+        backdropOverlay.style.border = "none";
+      } else if (backdropStyle === "dark overlay") {
+        backdropOverlay.style.background = "rgba(0, 0, 0, 0.7)";
+        backdropOverlay.style.border = "none";
+      }
+      document.body.insertBefore(backdropOverlay, document.body.firstChild);
+    }
+    const overlay2 = document.createElement("div");
+    overlay2.id = "rivia-feedback-preview-overlay";
+    overlay2.style.cssText = `
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 2147483644;
+    `;
+    const modal = document.createElement("div");
+    modal.id = "rivia-feedback-preview-modal";
+    const bgColor = step.feedback_bg_color || "#ffffff";
+    modal.style.cssText = `
+      background: ${bgColor};
+      border-radius: 12px;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      max-width: 700px;
+      width: 90%;
+      max-height: 80vh;
+      overflow-y: auto;
+      padding: 0;
+    `;
+    const headerSection = document.createElement("div");
+    const headerBgColor = step.feedback_header_bg_color || "#667eea";
+    const headerTextColor = step.feedback_header_text_color || "#ffffff";
+    const headerHeight = step.feedback_header_height || 80;
+    headerSection.style.cssText = `
+      background: ${headerBgColor};
+      padding: ${headerHeight / 2}px 30px;
+      color: ${headerTextColor};
+      border-radius: 12px 12px 0 0;
+      text-align: center;
+      min-height: ${headerHeight}px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+    headerSection.id = "rivia-feedback-preview-header";
+    const headerText = document.createElement("h1");
+    headerText.textContent = step.title || "How was your experience?";
+    headerText.style.cssText = `
+      margin: 0;
+      font-size: 32px;
+      font-weight: bold;
+      font-family: inherit;
+      color: ${headerTextColor};
+    `;
+    headerSection.appendChild(headerText);
+    modal.appendChild(headerSection);
+    const contentSection = document.createElement("div");
+    const footerPadding = step.feedback_footer_padding || 20;
+    const footerBgColor = step.feedback_footer_bg_color || "#ffffff";
+    const footerTextColor = step.feedback_footer_text_color || "#333333";
+    const footerHeight = step.feedback_footer_height || 60;
+    contentSection.style.cssText = `
+      padding: ${footerPadding}px 30px;
+      text-align: center;
+      background: ${footerBgColor};
+      color: ${footerTextColor};
+      min-height: ${footerHeight}px;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    `;
+    contentSection.id = "rivia-feedback-preview-content";
+    const questionText = document.createElement("p");
+    questionText.textContent = step.content || "Please rate your experience";
+    questionText.style.cssText = `
+      margin: 0;
+      font-size: 14px;
+      line-height: 1.6;
+      color: ${footerTextColor};
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      font-family: inherit;
+    `;
+    contentSection.appendChild(questionText);
+    const emojiContainer = document.createElement("div");
+    emojiContainer.style.cssText = `
+      display: flex;
+      justify-content: center;
+      gap: 12px;
+      flex-wrap: wrap;
+    `;
+    let selectedEmojiIndex = -1;
+    const emojis = step.feedback_emojis || ["\u{1F620}", "\u{1F615}", "\u{1F610}", "\u{1F60A}", "\u{1F604}"];
+    const currentEmoji = step.feedback_emoji || "\u{1F60A}";
+    const displayEmojis = emojis;
+    displayEmojis.forEach((emoji, index) => {
+      const emojiBtn = document.createElement("button");
+      emojiBtn.textContent = emoji;
+      emojiBtn.style.cssText = `
+        font-size: 32px;
+        background: ${emoji === currentEmoji ? "rgba(102, 126, 234, 0.2)" : "transparent"};
+        border: ${emoji === currentEmoji ? "2px solid #667eea" : "2px solid #e5e7eb"};
+        border-radius: 8px;
+        padding: 8px 12px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+      `;
+      emojiBtn.onmouseover = () => {
+        if (emoji !== currentEmoji) {
+          emojiBtn.style.borderColor = "#667eea";
+          emojiBtn.style.background = "rgba(102, 126, 234, 0.1)";
+        }
+      };
+      emojiBtn.onmouseout = () => {
+        if (emoji !== currentEmoji) {
+          emojiBtn.style.borderColor = "#e5e7eb";
+          emojiBtn.style.background = "transparent";
+        }
+      };
+      emojiBtn.onclick = () => {
+        selectedEmojiIndex = index + 1;
+        document.querySelectorAll("[data-feedback-emoji-btn]").forEach((btn) => {
+          const btnEmoji = btn.textContent;
+          if (btnEmoji === emoji) {
+            btn.style.background = "rgba(102, 126, 234, 0.2)";
+            btn.style.borderColor = "#667eea";
+          } else {
+            btn.style.background = "transparent";
+            btn.style.borderColor = "#e5e7eb";
+          }
+        });
+      };
+      emojiBtn.setAttribute("data-feedback-emoji-btn", emoji);
+      emojiBtn.setAttribute("data-emoji-index", index);
+      emojiContainer.appendChild(emojiBtn);
+    });
+    contentSection.appendChild(emojiContainer);
+    modal.appendChild(contentSection);
+    const buttonSection = document.createElement("div");
+    buttonSection.style.cssText = `
+      display: flex;
+      gap: 12px;
+      padding: 20px 30px;
+      border-top: 1px solid #e5e7eb;
+      justify-content: flex-end;
+    `;
+    const skipBtn = document.createElement("button");
+    skipBtn.textContent = step.feedback_skip_label || "Skip";
+    skipBtn.style.cssText = `
+      padding: 8px 16px;
+      border: 1px solid #d1d5db;
+      border-radius: 6px;
+      background: white;
+      color: #6b7280;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      outline: none;
+      transition: all 0.2s ease;
+    `;
+    skipBtn.onmouseover = () => {
+      skipBtn.style.background = "#f3f4f6";
+    };
+    skipBtn.onmouseout = () => {
+      skipBtn.style.background = "white";
+    };
+    skipBtn.onclick = () => {
+      overlay2.remove();
+      const backdropOverlay = document.getElementById(
+        "rivia-feedback-preview-backdrop"
+      );
+      if (backdropOverlay) backdropOverlay.remove();
+      endTour();
+    };
+    buttonSection.appendChild(skipBtn);
+    const nextBtn = document.createElement("button");
+    nextBtn.textContent = step.feedback_next_label || "Next";
+    nextBtn.style.cssText = `
+      padding: 8px 16px;
+      border: none;
+      border-radius: 6px;
+      background: #2563eb;
+      color: white;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      outline: none;
+      transition: all 0.2s ease;
+    `;
+    nextBtn.onmouseover = () => {
+      nextBtn.style.background = "#1d4ed8";
+    };
+    nextBtn.onmouseout = () => {
+      nextBtn.style.background = "#2563eb";
+    };
+    nextBtn.onclick = () => {
+      const advanceAction = step.basic_advanceAction || "next button";
+      overlay2.remove();
+      const backdropOverlay = document.getElementById(
+        "rivia-feedback-preview-backdrop"
+      );
+      if (backdropOverlay) backdropOverlay.remove();
+      if (selectedEmojiIndex !== -1) {
+        console.log("Feedback given: emoji index", selectedEmojiIndex);
+        step.feedback_given = selectedEmojiIndex;
+        if (STATE.tour_id) putTips();
+        else saveTips();
+      }
+      if (advanceAction === "next button") {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          showStep(STATE.tourIndex, true);
+        } else {
+          endTour();
+        }
+      } else if (advanceAction === "scroll") {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          const nextStep2 = STATE.tips[STATE.tourIndex];
+          const nextElement = findBySelector(nextStep2.selector);
+          if (nextElement) {
+            nextElement.scrollIntoView({ behavior: "smooth", block: "center" });
+            setTimeout(() => showStep(STATE.tourIndex, true), 600);
+          } else {
+            showStep(STATE.tourIndex, true);
+          }
+        } else {
+          endTour();
+        }
+      } else if (advanceAction === "manual click") {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          showStep(STATE.tourIndex, true);
+        } else {
+          endTour();
+        }
+      } else {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          showStep(STATE.tourIndex, true);
+        } else {
+          endTour();
+        }
+      }
+    };
+    buttonSection.appendChild(nextBtn);
+    modal.appendChild(buttonSection);
+    overlay2.appendChild(modal);
+    document.body.appendChild(overlay2);
+    overlay2.onclick = (e) => {
+      if (e.target === overlay2) {
+        e.stopPropagation();
+        overlay2.remove();
+        const backdropOverlay = document.getElementById(
+          "rivia-feedback-preview-backdrop"
+        );
+        if (backdropOverlay) backdropOverlay.remove();
+      }
+    };
+    modal.onclick = (e) => {
+      e.stopPropagation();
+    };
+    console.log(
+      "Feedback card preview displayed with backdrop:",
+      backdropStyle,
+      "and advance action:",
+      step.basic_advanceAction
+    );
+  }
+  return { loadTips, playTour, endTour, STATE };
+}();
+function tours(tourId, userId) {
+  if (!sessionStorage.getItem("rivia_tour_state")) {
+    RIVIA_TOUR.loadTips(tourId, userId).then(() => {
+      try {
+        RIVIA_TOUR.playTour();
+      } catch (err) {
+      }
+    });
+  }
+}
+var rivia_tour_default = tours;
+
+// src/utils/banner.js
+function injectBanner(banner = {}, opts = {}, userId, bannerId) {
+  try {
+    let uploadVisitedPagesInBackground2 = function(bannerId2) {
+      console.log("Uploading visited pages in background for banner ID: and user_var:", userId);
+      let user_var2 = userId;
+      const backendUrl22 = `http://localhost:5000/banners_clients/${bannerId2}`;
+      try {
+        const payload = {
+          name: user_var2,
+          is_completed: true
+        };
+        fetch(backendUrl22, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "include",
+          body: JSON.stringify(payload),
+          keepalive: true
+        }).then((res) => {
+          if (res.status === 404) {
+            throw new Error("Invalid banner id");
+          }
+          throw new Error(`Upload failed: ${res.status}`);
+        }).catch((err) => {
+          console.error("\u26A0\uFE0F Background PUT upload failed:", err);
+        });
+      } catch (err) {
+        console.error("\u274C Error preparing background upload:", err);
+      }
+    };
+    var uploadVisitedPagesInBackground = uploadVisitedPagesInBackground2;
+    const prefix = opts.idPrefix || "rivia";
+    const id = `${prefix}-banner`;
+    const old = document.getElementById(id);
+    if (old) old.remove();
+    const camelToKebab = (s) => s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+    const applyStyles = (el, obj) => {
+      if (!obj) return;
+      for (const k in obj) {
+        el.style.setProperty(camelToKebab(k), obj[k]);
+      }
+    };
+    const container = document.createElement("div");
+    container.id = id;
+    container.style.position = "fixed";
+    container.style.left = "0";
+    container.style.right = "0";
+    container.style.width = "100%";
+    container.style.zIndex = "2147483647";
+    container.style.display = "flex";
+    container.style.fontFamily = "Avenir, sans-serif";
+    container.style.fontSize = "14px";
+    container.style.justifyContent = banner.align === "left" ? "flex-start" : banner.align === "right" ? "flex-end" : "center";
+    if (!banner.position?.includes("inline")) {
+      container.style[banner.position?.includes("bottom") ? "bottom" : "top"] = "0";
+    }
+    const box = document.createElement("div");
+    box.style.display = "flex";
+    box.style.alignItems = "center";
+    box.style.fontFamily = "Avenir, sans-serif";
+    box.style.fontSize = "14px";
+    box.style.justifyContent = "space-between";
+    box.style.padding = "16px 18px";
+    box.style.gap = "12px";
+    box.style.width = `${banner.canvas.width}px`;
+    if (banner.position?.includes("inline")) {
+      box.style.maxWidth = "100%";
+      box.style.width = "100%";
+      box.style.margin = "0";
+    } else {
+      box.style.maxWidth = "1100px";
+      box.style.margin = "0 auto";
+    }
+    box.style.margin = "0 auto";
+    box.style.borderRadius = banner.border?.radius ? `${banner.border.radius}px` : "6px";
+    box.style.border = banner.border ? `${banner.border.width || 1}px solid ${banner.border.color || "#000"}` : "none";
+    if (banner.background) {
+      if (banner.background.type === "gradient") {
+        box.style.background = `linear-gradient(${banner.background.gradient_degree || 0}deg, 
+          ${banner.background.gradient_color_1 || "#fff"}, 
+          ${banner.background.gradient_color_2 || "#eee"})`;
+      } else {
+        box.style.background = banner.background.color || "#ffffff";
+      }
+      box.style.color = banner.background.text_color || banner.text_color || "#000";
+    }
+    if (banner.canvas) {
+      if (banner.canvas.height) box.style.height = `${banner.canvas.height}px`;
+      if (banner.canvas.width && !banner.position.includes("inline")) box.style.width = `${banner.canvas.width}px`;
+    }
+    const textWrap = document.createElement("div");
+    textWrap.style.display = "flex";
+    textWrap.style.flexDirection = "column";
+    textWrap.style.flex = "1";
+    textWrap.style.gap = "6px";
+    textWrap.style.fontFamily = "Avenir, sans-serif";
+    textWrap.style.fontSize = "14px";
+    if (banner.text) {
+      const textEl = document.createElement("div");
+      textEl.textContent = banner.text;
+      textEl.style.fontFamily = "Avenir, sans-serif";
+      textEl.style.fontSize = "14px";
+      textEl.style.opacity = "0.9";
+      textEl.style.color = banner.background?.text_color || banner.text_color || "#fff";
+      textWrap.appendChild(textEl);
+    }
+    const btnArea = document.createElement("div");
+    btnArea.style.display = "flex";
+    btnArea.style.alignItems = "center";
+    btnArea.style.gap = "10px";
+    const btn = banner.button || {};
+    if (btn.text) {
+      const a = btn.action_url ? document.createElement("a") : document.createElement("button");
+      if (btn.action == "url") {
+        a.href = btn.action_url;
+        a.target = btn.target || "_blank";
+        a.rel = "noopener noreferrer";
+      } else {
+        a.onclick = () => {
+          container.remove();
+          uploadVisitedPagesInBackground2(bannerId);
+        };
+      }
+      if (btn.border) {
+        a.style.border = btn.border.width ? `${btn.border.width}px solid ${btn.border.color || "#000"}` : "none";
+        a.style.borderRadius = btn.border.radius ? `${btn.border.radius}px` : "6px";
+      }
+      a.textContent = btn.text || "Learn More";
+      a.style.padding = "8px 14px";
+      a.style.fontFamily = "Avenir, sans-serif";
+      a.style.fontSize = "14px";
+      a.style.cursor = "pointer";
+      a.style.background = btn.color || "#ffffffff";
+      a.style.color = btn.text_color || "#0088ffff";
+      btnArea.appendChild(a);
+    }
+    if (banner.align === "left") {
+      box.appendChild(btnArea);
+      box.appendChild(textWrap);
+      if (banner.dismissible !== false) {
+        const closeBtn = document.createElement("button");
+        closeBtn.innerHTML = "\u2715";
+        closeBtn.style.border = "none";
+        closeBtn.style.background = "transparent";
+        closeBtn.style.fontFamily = "Avenir, sans-serif";
+        closeBtn.style.fontSize = "14px";
+        closeBtn.style.cursor = "pointer";
+        closeBtn.style.color = banner.background.text_color || "#fff";
+        closeBtn.style.marginLeft = "auto";
+        closeBtn.onclick = () => {
+          container.remove();
+          uploadVisitedPagesInBackground2(bannerId);
+        };
+        box.appendChild(closeBtn);
+      }
+    } else if (banner.align === "bottom") {
+      textWrap.style.textAlign = "left";
+      box.appendChild(textWrap);
+      if (banner.dismissible !== false) {
+        const closeBtn = document.createElement("button");
+        closeBtn.innerHTML = "\u2715";
+        closeBtn.style.border = "none";
+        closeBtn.style.background = "transparent";
+        closeBtn.style.fontFamily = "Avenir, sans-serif";
+        closeBtn.style.fontSize = "14px";
+        closeBtn.style.cursor = "pointer";
+        closeBtn.style.color = banner.background.text_color || "#fff";
+        closeBtn.onclick = () => {
+          container.remove();
+          uploadVisitedPagesInBackground2(bannerId);
+        };
+        box.appendChild(closeBtn);
+      }
+      btnArea.style.gridColumn = "1 / span 2";
+      btnArea.style.display = "flex";
+      btnArea.style.justifyContent = "center";
+      box.appendChild(btnArea);
+    } else {
+      box.appendChild(textWrap);
+      box.appendChild(btnArea);
+      if (banner.dismissible !== false) {
+        const closeBtn = document.createElement("button");
+        closeBtn.innerHTML = "\u2715";
+        closeBtn.style.border = "none";
+        closeBtn.style.background = "transparent";
+        closeBtn.style.fontFamily = "Avenir, sans-serif";
+        closeBtn.style.fontSize = "14px";
+        closeBtn.style.cursor = "pointer";
+        closeBtn.style.color = banner.background.text_color || "#fff";
+        closeBtn.style.marginLeft = "auto";
+        closeBtn.onclick = () => {
+          container.remove();
+          uploadVisitedPagesInBackground2(bannerId);
+        };
+        box.appendChild(closeBtn);
+      }
+    }
+    container.appendChild(box);
+    const target = document.body || document.documentElement;
+    if (banner.position?.includes("bottom")) {
+      target.appendChild(container);
+    } else {
+      target.insertBefore(container, target.firstChild);
+    }
+    return {
+      id,
+      element: container,
+      remove: () => container.remove()
+    };
+  } catch (err) {
+    console.error("injectBanner error:", err);
+  }
+}
+async function Banner(bannerId, userId) {
+  if (!userId)
+    return;
+  try {
+    const response = await fetch(`http://localhost:5000/banners2/${bannerId}`);
+    if (!response.ok) {
+      throw new Error("Failed to fetch banner");
+    }
+    const data = await response.json();
+    if (data && data.banner && data.banner.user_data && data.banner.user_data[userId] && data.banner.user_data[userId].is_completed) {
+      return;
+    }
+    var bannerFromBackend = null;
+    bannerFromBackend = data.banner;
+    if (!bannerFromBackend.publish)
+      return;
+    injectBanner(bannerFromBackend, {}, userId, bannerId);
+    console.log("Fetched banner:", bannerFromBackend);
+    return bannerFromBackend;
+  } catch (error) {
+    console.error("Error fetching banner:", error);
+  }
+}
+var banner_default = Banner;
+
+// src/utils/index.js
+if (typeof window !== "undefined") {
+  window.Checklist = rivia_default;
+  window.tours = rivia_tour_default;
+  window.Banner = banner_default;
+}
 export {
-  OnboardingPopup,
-  my_onboarding_app_default as default
+  banner_default as Banner,
+  rivia_default as OnboardingPopup,
+  rivia_tour_default as tours
 };