rivia 0.0.4

package/README.md

@@ -0,0 +1,45 @@
+**Edit a file, create a new file, and clone from Bitbucket in under 2 minutes**
+
+When you're done, you can delete the content in this README and update the file with details for others getting started with your repository.
+
+*We recommend that you open this README in another tab as you perform the tasks below. You can [watch our video](https://youtu.be/0ocf7u76WSo) for a full demo of all the steps in this tutorial. Open the video in a new tab to avoid leaving Bitbucket.*
+
+---
+
+## Edit a file
+
+You’ll start by editing this README file to learn how to edit a file in Bitbucket.
+
+1. Click **Source** on the left side.
+2. Click the README.md link from the list of files.
+3. Click the **Edit** button.
+4. Delete the following text: *Delete this line to make a change to the README from Bitbucket.*
+5. After making your change, click **Commit** and then **Commit** again in the dialog. The commit page will open and you’ll see the change you just made.
+6. Go back to the **Source** page.
+
+---
+
+## Create a file
+
+Next, you’ll add a new file to this repository.
+
+1. Click the **New file** button at the top of the **Source** page.
+2. Give the file a filename of **contributors.txt**.
+3. Enter your name in the empty file space.
+4. Click **Commit** and then **Commit** again in the dialog.
+5. Go back to the **Source** page.
+
+Before you move on, go ahead and explore the repository. You've already seen the **Source** page, but check out the **Commits**, **Branches**, and **Settings** pages.
+
+---
+
+## Clone a repository
+
+Use these steps to clone from SourceTree, our client for using the repository command-line free. Cloning allows you to work on your files locally. If you don't yet have SourceTree, [download and install first](https://www.sourcetreeapp.com/). If you prefer to clone from the command line, see [Clone a repository](https://confluence.atlassian.com/x/4whODQ).
+
+1. You’ll see the clone button under the **Source** heading. Click that button.
+2. Now click **Check out in SourceTree**. You may need to create a SourceTree account or log in.
+3. When you see the **Clone New** dialog in SourceTree, update the destination path and name if you’d like to and then click **Clone**.
+4. Open the directory you just created to see your repository’s files.
+
+Now that you're more familiar with your Bitbucket repository, go ahead and add a new file locally. You can [push your change back to Bitbucket with SourceTree](https://confluence.atlassian.com/x/iqyBMg), or you can [add, commit,](https://confluence.atlassian.com/x/8QhODQ) and [push from the command line](https://confluence.atlassian.com/x/NQ0zDQ).

package/dist/index.js

@@ -0,0 +1,779 @@
+// src/utils/rivia.js
+function slugify(text) {
+  return "/" + String(text || "").trim().toLowerCase().replace(/[^a-z0-9\-_\s]/g, "").replace(/\s+/g, "-");
+}
+function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklistItems = [], cssText = [], targetingData = {}, user_var, checklist_id) {
+  let usrn = targetingData?.targeting_data?.usernames ?? "Not Set";
+  let inc = targetingData?.targeting_data?.inclusion ?? "Not Set";
+  const mymap = /* @__PURE__ */ new Map();
+  for (let i2 = 0; i2 < usrn.length; i2++) {
+    mymap.set(usrn[i2], true);
+  }
+  let flag = false;
+  let data = {};
+  for (let i2 = 0; i2 < sessionStorage.length; i2++) {
+    const key = sessionStorage.key(i2);
+    data[key] = sessionStorage.getItem(key);
+    let j, t = 0;
+    if (mymap.get(data[key]) == true && inc == 2) {
+      flag = true;
+      t = 1;
+      break;
+    } else if (mymap.get(data[key]) == true && inc == 1) {
+      flag = false;
+      return;
+    }
+  }
+  if (inc == 0) {
+    flag = true;
+  }
+  let completedPages = [];
+  const items = Array.isArray(checklistItems) && checklistItems.length ? checklistItems.map((it, i2) => ({
+    id: it.id || `step${i2 + 1}`,
+    title: it.heading || `Step ${i2 + 1}`,
+    description: it.body || "",
+    completionType: it.completionType || "url",
+    url: it.url || slugify(it.title || `step-${i2 + 1}`),
+    color: it.color || null
+  })) : [];
+  const cleanUrlItems = items.map(
+    (item) => item.url.startsWith("/") ? item.url.slice(1) : item.url
+  );
+  const defaultTheme = {
+    backgroundColor: "#ffffff",
+    lowerBackgroundColor: "#ffffff",
+    closeBackgroundColor: "#d9534f",
+    textColor: "#000000",
+    progressBg: "#a0afa2",
+    progressFill: "#01a016",
+    subtitleColor: "#666666",
+    fontFamily: "Arial, sans-serif",
+    fontSize: "14px",
+    title: "AI Caller",
+    subtitle: "Describe the purpose of this checklist...",
+    uncheckedBorderColor: "#d1d5db",
+    headingColor: "#111827",
+    bodyColor: "#6b7280",
+    showCloseButton: true,
+    lowerBodyColor: "#6b7280",
+    lowerHeadingColor: "#111827"
+  };
+  const cssConfig = Object.assign({}, defaultTheme, cssText || {});
+  if (!items.length) return;
+  ["route-label", "show-tooltip-btn", "tooltip-close-btn"].forEach((id) => {
+    const el = document.getElementById(id);
+    if (el) el.remove();
+  });
+  const visitedPages = {};
+  items.forEach((it) => {
+    const cleanUrl = it.url.startsWith("/") ? it.url.slice(1) : it.url;
+    visitedPages[cleanUrl] = it.id;
+  });
+  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);
+  }
+  const backendUrl = `https://demoapi.rivia.ai/clients/${checklist_id}/${user_var1}`;
+  async function getUserProgress2() {
+    try {
+      const res = await fetch(backendUrl, { 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 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 No data found or failed to fetch, starting fresh", err);
+      const storedVisited2 = [];
+      sessionStorage.setItem(
+        "onboardingVisited",
+        JSON.stringify(storedVisited2)
+      );
+      return {
+        completedPages: [],
+        progress: 0,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        start_date: "",
+        end_date: ""
+      };
+    }
+  }
+  storedVisited = sessionStorage.getItem("onboardingVisited");
+  if (!storedVisited) {
+    getUserProgress2().then((progressData) => {
+      if (storedVisited.length >= checklistItems.length) {
+        return;
+      }
+      sessionStorage.setItem(
+        "onboardingVisited",
+        JSON.stringify(progressData.completedPages)
+      );
+      fetchWithTimeout(
+        topTitle,
+        subtitle,
+        completion,
+        checklistItems,
+        cssText,
+        targetingData,
+        user_var,
+        checklist_id,
+        cssConfig,
+        items,
+        storedVisited,
+        backendUrl,
+        progressData,
+        visitedPages,
+        cleanUrlItems
+      );
+    });
+  } else {
+    try {
+      storedVisited = storedVisited ? JSON.parse(storedVisited) : [];
+    } catch (e) {
+      console.warn(
+        "Invalid onboardingVisited data, resetting cache:",
+        storedVisited
+      );
+      storedVisited = [];
+    }
+    if (storedVisited.length >= checklistItems.length) {
+      if (sessionStorage.getItem("CompletedAll") != "true") return;
+      const label = document.createElement("div");
+      label.id = "route-label";
+      label.innerText = "\u{1F389} Congrats! You've completed all items!";
+      Object.assign(label.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(label);
+      requestAnimationFrame(() => {
+        label.style.opacity = 1;
+      });
+      setTimeout(() => {
+        label.style.opacity = 0;
+        setTimeout(() => label.remove(), 500);
+      }, 3e3);
+      sessionStorage.setItem("CompletedAll", "false ");
+      return;
+    }
+    fetchWithTimeout(
+      topTitle,
+      subtitle,
+      completion,
+      checklistItems,
+      cssText,
+      targetingData,
+      user_var,
+      checklist_id,
+      cssConfig,
+      items,
+      storedVisited,
+      backendUrl,
+      [],
+      visitedPages,
+      cleanUrlItems
+    );
+  }
+}
+async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion = 0, checklistItems = [], cssText = [], targetingData = {}, user_var, checklist_id, cssConfig = {}, items = [], storedVisited = [], backendUrl = "", progressData = {}, visitedPages = {}, cleanUrlItems = []) {
+  let i = 0;
+  const stepsHTML = items.map((it) => {
+    const border = it.color || cssConfig.borderColor1;
+    const bg = it.color || cssConfig.lowerBackgroundColor;
+    return `
+  <div id="${it.id}" 
+  class="onboard-step"
+  style="position: relative; margin-bottom:16px; display:flex; align-items:flex-start; cursor:pointer; background-color:${bg}; padding:8px; border-radius:6px;">
+  
+  <!-- left vertical selector bar -->
+  <div class="start-select"
+  style="position:absolute; top:0; left:-18px; width:10px; height:120%; background:rgba(247,143,7,0.9); border-radius:4px 0 0 4px; display:none;">
+  </div>
+  
+  <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>
+  
+  <div class="onboard-text"
+  style=" font-family:${cssConfig.fontFamily}; font-size:${cssConfig.fontSize};">
+    <strong style="color:${cssConfig.lowerHeadingColor};">${it.title}</strong><br>
+    <small style="color:${cssConfig.lowerBodyColor};">${it.description || ""}</small>
+      </div>
+      </div>
+      ${i++ < items.length - 1 ? '<hr style="color: #9d9d9dff">' : ""}
+      `;
+  }).join("");
+  const labelHTML = `
+    <div id="checklistRoot" 
+    style="max-width:500px; margin:auto; font-family:${cssConfig.fontFamily}; font-size:${cssConfig.fontSize}; color:${cssConfig.textColor}; position: relative;">
+
+    <!-- Close button -->
+    <button id="checklistCloseBtn" 
+      style="
+      position: absolute;
+      top: 8px;
+      left: 370px;
+      background: transparent;
+      border: none;
+      font-size: 28px;
+      cursor: pointer;
+      color: ${cssConfig.textColor};
+      line-height: 1;
+    ">
+    &times;
+    </button>
+
+    <div style="background-color:${cssConfig.backgroundColor}; padding:16px; border-radius:8px 8px 0 0;">
+    <h3 style="margin:0;">${topTitle}</h3>
+    <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>
+    </div>
+
+    </div>
+
+    <div style="border-top:none; border-radius:0 0 8px 8px; padding:16px; background-color:${cssConfig.lowerBackgroundColor}; max-height:340px; overflow:auto;">
+    ${stepsHTML}
+    </div>
+    </div>
+`;
+  const label = document.createElement("div");
+  label.id = "route-label";
+  label.innerHTML = labelHTML;
+  const closeElement = label.querySelector(`#checklistCloseBtn`);
+  closeElement.addEventListener("click", (e) => {
+    e.stopPropagation();
+    label.style.opacity = "0";
+    label.style.pointerEvents = "none";
+    closeBtn.style.display = "none";
+    showBtn.style.display = "block";
+  });
+  function createSlabs(n) {
+    const container = label.querySelector("#progressContainer");
+    container.innerHTML = "";
+    for (let i2 = 0; i2 < n; i2++) {
+      const slab = document.createElement("div");
+      slab.classList.add("slab");
+      container.appendChild(slab);
+    }
+  }
+  const style = document.createElement("style");
+  style.textContent = `
+.slab {
+  flex: 1;
+  height: 8px;
+  background-color: #ccc;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+  }
+  .slab.active {
+    background-color: #4caf50;
+    }
+    #progressContainerBtn .slab {
+      height: 5px;
+      }
+      `;
+  label.appendChild(style);
+  function updateProgress(completed) {
+    const slabs = label.querySelectorAll(".slab");
+    slabs.forEach((slab, index) => {
+      if (index < completed) {
+        slab.classList.add("active");
+      } else {
+        slab.classList.remove("active");
+      }
+    });
+  }
+  createSlabs(items.length);
+  updateProgress(storedVisited.length);
+  Object.assign(label.style, {
+    position: "fixed",
+    bottom: "80px",
+    left: "20px",
+    backgroundColor: cssConfig.backgroundColor,
+    color: cssConfig.textColor,
+    padding: "0px",
+    borderRadius: "10px",
+    zIndex: 9999,
+    fontSize: cssConfig.fontSize,
+    fontFamily: cssConfig.fontFamily,
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.2)",
+    width: "90%",
+    maxWidth: "400px",
+    maxHeight: "500px",
+    lineHeight: "1.5",
+    transition: "opacity 0.5s ease-in-out, transform 0.2s",
+    opacity: "0",
+    cursor: "pointer",
+    textAlign: "left",
+    display: "none",
+    pointerEvents: "none"
+  });
+  const showBtn = document.createElement("button");
+  function createS(n) {
+    const container2 = showBtn.querySelector("#progressContainerBtn");
+    if (!container2) return;
+    container2.innerHTML = "";
+    for (let i2 = 0; i2 < n; i2++) {
+      const slab2 = document.createElement("div");
+      slab2.classList.add("slab");
+      container2.appendChild(slab2);
+    }
+  }
+  function updateProgress2(completed) {
+    const slab2 = showBtn.querySelectorAll("#progressContainerBtn .slab");
+    slab2.forEach((slab, index) => {
+      if (index < completed) {
+        slab.classList.add("active");
+      } else {
+        slab.classList.remove("active");
+      }
+    });
+  }
+  showBtn.id = "show-tooltip-btn";
+  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>`;
+  Object.assign(showBtn.style, {
+    position: "fixed",
+    bottom: "20px",
+    left: "20px",
+    width: "150px",
+    padding: "10px 16px",
+    fontSize: cssConfig.fontSize,
+    fontWeight: "bold",
+    backgroundColor: cssConfig.backgroundColor,
+    color: cssConfig.textColor,
+    border: "none",
+    borderRadius: "6px",
+    cursor: "pointer",
+    zIndex: 9999,
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)"
+  });
+  document.body.appendChild(showBtn);
+  document.body.appendChild(label);
+  createS(items.length);
+  const closeBtn = document.createElement("button");
+  closeBtn.id = "tooltip-close-btn";
+  closeBtn.innerHTML = "\u2715";
+  Object.assign(closeBtn.style, {
+    position: "fixed",
+    width: "40px",
+    height: "40px",
+    border: "none",
+    backgroundColor: cssConfig.closeBackgroundColor,
+    color: cssConfig.textColor,
+    borderRadius: "4px",
+    cursor: "pointer",
+    fontSize: "25px",
+    fontWeight: "bold",
+    display: "none",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1e4
+  });
+  function positionCloseBtn() {
+    const rect = label.getBoundingClientRect();
+    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}`;
+  function uploadVisitedPagesInBackground(completed2, touched = false) {
+    try {
+      const payload = {
+        name: user_var2,
+        completed_items: completed2,
+        touched
+      };
+      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);
+    }
+  }
+  uploadVisitedPagesInBackground([], false);
+  let activeStepId = sessionStorage.getItem("activeStepId") || null;
+  function updateUIFromVisited() {
+    storedVisited = JSON.parse(
+      sessionStorage.getItem("onboardingVisited") || "[]"
+    );
+    let path;
+    storedVisited = sessionStorage.getItem("onboardingVisited");
+    if (!storedVisited) {
+      getUserProgress().then((progressData2) => {
+        let completed2 = progressData2.completedPages;
+        completed2.forEach((path2) => {
+          const stepId = visitedPages[path2];
+          const stepElement = label.querySelector(`#${stepId}`);
+          if (!stepElement) return;
+          const circle = stepElement.querySelector(".onboard-circle");
+          if (circle) {
+            circle.innerHTML = `
+          <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 
+              9.997 26.206 0 36.204l-294.4 294.401c-9.998 
+              9.997-26.207 9.997-36.204-.001z"/>
+              </svg>
+              </div>
+              `;
+            circle.style.border = "none";
+            circle.style.backgroundColor = "transparent";
+            circle.style.display = "flex";
+            circle.style.alignItems = "center";
+            circle.style.justifyContent = "center";
+            circle.style.padding = "1px";
+          }
+          const textContainer = stepElement.querySelector(".onboard-text");
+          const startSelect = stepElement.querySelector(".start-select");
+          if (stepId === activeStepId && startSelect) {
+            startSelect.style.display = "block";
+          }
+          if (textContainer) {
+            textContainer.style.textDecoration = "line-through";
+            textContainer.style.opacity = "0.6";
+          }
+        });
+        const progress2 = Math.min(
+          100,
+          Math.round(completed2.length / items.length * 100)
+        );
+        const percentText2 = `${progress2}%`;
+        const labelPercent2 = label.querySelector("#progressFraction");
+        const btnPercent2 = showBtn.querySelector("#progressFraction");
+        if (labelPercent2) labelPercent2.textContent = percentText2;
+        if (btnPercent2) btnPercent2.textContent = percentText2;
+        if (labelPercent2) labelPercent2.style.width = `${progress2}%`;
+        if (btnPercent2) btnPercent2.style.width = `${progress2}%`;
+        const progressFraction2 = label.querySelector("#progressFraction");
+        if (progressFraction2) {
+          progressFraction2.textContent = `${completed2.length}/${items.length}`;
+        }
+        const btnFraction2 = showBtn.querySelector("#progressFraction");
+        if (btnFraction2) {
+          btnFraction2.textContent = `${completed2.length}/${items.length}`;
+        }
+        storedVisited = completed2;
+        updateProgress(completed2.length);
+        updateProgress2(completed2.length);
+      });
+    } else {
+      let completed2 = storedVisited;
+      if (completed2) {
+        try {
+          completed2 = JSON.parse(completed2);
+        } catch (e) {
+          console.error("Failed to parse onboardingVisited:", e);
+          completed2 = [];
+        }
+      } else {
+        completed2 = [];
+      }
+      completed2.forEach((path2) => {
+        const stepId = visitedPages[path2];
+        const stepElement = label.querySelector(`#${stepId}`);
+        if (!stepElement) return;
+        const circle = stepElement.querySelector(".onboard-circle");
+        if (circle) {
+          circle.innerHTML = `
+          <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 
+          9.997 26.206 0 36.204l-294.4 294.401c-9.998 
+          9.997-26.207 9.997-36.204-.001z"/>
+          </svg>
+          </div>
+          `;
+          circle.style.border = "none";
+          circle.style.backgroundColor = "transparent";
+          circle.style.display = "flex";
+          circle.style.alignItems = "center";
+          circle.style.justifyContent = "center";
+          circle.style.padding = "1px";
+        }
+        const textContainer = stepElement.querySelector(".onboard-text");
+        const startSelect = stepElement.querySelector(".start-select");
+        if (stepId === activeStepId && startSelect) {
+          startSelect.style.display = "block";
+        }
+        if (textContainer) {
+          textContainer.style.textDecoration = "line-through";
+          textContainer.style.opacity = "0.6";
+        }
+      });
+      const progress2 = Math.min(
+        100,
+        Math.round(completed2.length / items.length * 100)
+      );
+      const percentText2 = `${progress2}%`;
+      const labelPercent2 = label.querySelector("#progressFraction");
+      const btnPercent2 = showBtn.querySelector("#progressFraction");
+      if (labelPercent2) labelPercent2.textContent = percentText2;
+      if (btnPercent2) btnPercent2.textContent = percentText2;
+      if (labelPercent2) labelPercent2.style.width = `${progress2}%`;
+      if (btnPercent2) btnPercent2.style.width = `${progress2}%`;
+      const progressFraction2 = label.querySelector("#progressFraction");
+      if (progressFraction2) {
+        progressFraction2.textContent = `${completed2.length}/${items.length}`;
+      }
+      const btnFraction2 = showBtn.querySelector("#progressFraction");
+      if (btnFraction2) {
+        btnFraction2.textContent = `${completed2.length}/${items.length} `;
+      }
+      storedVisited = completed2;
+      updateProgress(completed2.length);
+      updateProgress2(completed2.length);
+    }
+    let completed = storedVisited;
+  }
+  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", () => {
+          items.forEach((inner) => {
+            const el = label.querySelector(`#${inner.id}`);
+            if (el) {
+              const sel = el.querySelector(".start-select");
+              if (sel) sel.style.display = "none";
+            }
+          });
+          startSelect.style.display = "block";
+          activeStepId = it.id;
+          sessionStorage.setItem("activeStepId", activeStepId);
+          storedVisited = JSON.parse(
+            sessionStorage.getItem("onboardingVisited") || "[]"
+          );
+          if (!storedVisited) {
+            getUserProgress().then((progressData2) => {
+              sessionStorage.setItem(
+                "onboardingVisited",
+                JSON.stringify(progressData2.completedPages)
+              );
+            });
+          }
+          storedVisited = JSON.parse(
+            sessionStorage.getItem("onboardingVisited") || "[]"
+          );
+          let path = it.url;
+          let cleanUrl = path.startsWith("/") ? path.slice(1) : path;
+          if (!storedVisited.includes(cleanUrl) && cleanUrlItems.includes(cleanUrl)) {
+            storedVisited.push(cleanUrl);
+            sessionStorage.setItem(
+              "onboardingVisited",
+              JSON.stringify(storedVisited)
+            );
+          }
+          if (storedVisited.length >= checklistItems.length) {
+            sessionStorage.setItem("CompletedAll", "true");
+          }
+          uploadVisitedPagesInBackground(storedVisited, true);
+          updateProgress(storedVisited.length);
+          updateProgress2(storedVisited.length);
+          updateUIFromVisited();
+          if (storedVisited.length >= checklistItems.length) {
+            sessionStorage.setItem("CompletedAll", "true");
+          }
+          window.location.href = it.url;
+        });
+      }
+    });
+  } else {
+    if (!sessionStorage.getItem("c")) sessionStorage.setItem("c", 1);
+    let c = parseInt(sessionStorage.getItem("c") || "1");
+    items.forEach((it, index) => {
+      const stepEl = label.querySelector(`#${it.id}`);
+      if (!stepEl) return;
+      const startSelect = stepEl.querySelector(".start-select");
+      startSelect.style.display = "none";
+      stepEl.addEventListener("click", () => {
+        if (index < c) {
+          alert("You have already completed this step!");
+          c--;
+        }
+        if (index != c) {
+          alert("Please complete the previous steps first!");
+          return;
+        }
+        sessionStorage.setItem("c", c + 1);
+        items.forEach((inner) => {
+          const el = label.querySelector(`#${inner.id}`);
+          if (el) {
+            const sel = el.querySelector(".start-select");
+            if (sel) sel.style.display = "none";
+          }
+        });
+        startSelect.style.display = "block";
+        activeStepId = it.id;
+        sessionStorage.setItem("activeStepId", activeStepId);
+        let path = it.url;
+        let cleanUrl = path.startsWith("/") ? path.slice(1) : path;
+        if (!storedVisited.includes(cleanUrl) && cleanUrlItems.includes(cleanUrl)) {
+          storedVisited.push(cleanUrl);
+          sessionStorage.setItem(
+            "onboardingVisited",
+            JSON.stringify(storedVisited)
+          );
+        }
+        uploadVisitedPagesInBackground(storedVisited, true);
+        updateProgress(storedVisited.length);
+        updateProgress2(storedVisited.length);
+        updateUIFromVisited();
+        if (storedVisited.length >= checklistItems.length) {
+          sessionStorage.setItem("CompletedAll", "true");
+        }
+        window.location.href = it.url;
+      });
+    });
+  }
+  showBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    label.style.display = "block";
+    label.style.pointerEvents = "auto";
+    closeBtn.style.display = "flex";
+    showBtn.style.display = "none";
+    positionCloseBtn();
+    requestAnimationFrame(() => {
+      label.style.opacity = "1";
+    });
+  });
+  closeBtn.addEventListener("click", (ev) => {
+    ev.stopPropagation();
+    label.style.opacity = "0";
+    label.style.pointerEvents = "none";
+    closeBtn.style.display = "none";
+    showBtn.style.display = "block";
+  });
+  label.addEventListener(
+    "mouseenter",
+    () => label.style.transform = "scale(1.02)"
+  );
+  label.addEventListener(
+    "mouseleave",
+    () => label.style.transform = "scale(1)"
+  );
+  label.addEventListener("click", () => {
+    const getStarted = document.querySelector("button#get-started");
+    if (getStarted) getStarted.click();
+  });
+  showBtn.style.display = "block";
+  label.style.display = "none";
+  label.style.opacity = "0";
+  updateUIFromVisited();
+  window.addEventListener("resize", () => {
+    if (label.style.display !== "none") positionCloseBtn();
+  });
+}
+async function OnboardingPopup(checklist_id, user_var) {
+  try {
+    const cachedData = sessionStorage.getItem(`checklist_${checklist_id}`);
+    if (cachedData) {
+      const { checklist: checklist2, cssConfig: cssConfig2, targetingData: targetingData2 } = JSON.parse(cachedData);
+      Onboarding(
+        checklist2.title || "Untitled Checklist",
+        checklist2.subtitle || "Describe the purpose of this checklist...",
+        checklist2.completion || 0,
+        checklist2.items || [],
+        cssConfig2 || {},
+        targetingData2 || {},
+        user_var,
+        checklist_id
+      );
+      return checklist2;
+    }
+    const res = await fetch(
+      `https://demoapi.rivia.ai/checklists2/${checklist_id}`,
+      {
+        method: "GET",
+        headers: { "Content-Type": "application/json" }
+      }
+    );
+    if (!res.ok) {
+      console.error("\u274C Failed to fetch checklist");
+      return;
+    }
+    const data = await res.json();
+    const checklist = data.checklist || data;
+    const title = checklist.title || "Untitled Checklist";
+    const subtitle = checklist.subtitle || "Describe the purpose of this checklist...";
+    const items = checklist.items || [];
+    const completion = checklist.completion || 0;
+    const cssConfig = checklist.branding_data || {};
+    const targetingData = checklist.targeting_data || {};
+    const fullData = { checklist, cssConfig, targetingData };
+    sessionStorage.setItem(
+      `checklist_${checklist_id}`,
+      JSON.stringify(fullData)
+    );
+    Onboarding(
+      title,
+      subtitle,
+      completion,
+      items,
+      cssConfig,
+      targetingData,
+      user_var,
+      checklist_id
+    );
+    return checklist;
+  } catch (err) {
+    console.error("Error fetching checklist or branding:", err.message);
+    throw err;
+  }
+}
+var my_onboarding_app_default = OnboardingPopup;
+export {
+  OnboardingPopup,
+  my_onboarding_app_default as default
+};

package/index.d.ts

@@ -0,0 +1,5 @@
+declare function OnboardingPopup(
+  checklist_id: string,
+  user_var: string
+): void ;
+export = OnboardingPopup ; 

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "rivia",
+  "version": "0.0.4",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "index.d.ts"
+  ],
+  "scripts": {
+    "build": "node build.js"
+  },
+  "devDependencies": {
+    "esbuild": "^0.24.0"
+  },
+  "dependencies": {
+    "express": "^5.1.0",
+    "mongodb": "^6.18.0",
+    "my-onboarding-app": "^1.0.200"
+  }
+}