@kywi-software/js 0.6.4 → 0.6.6

package/dist/kywi.js

@@ -23,7 +23,9 @@ var Kywi = (() => {
   __export(src_exports, {
     Kywi: () => Kywi,
     bootAudienceEngine: () => bootAudienceEngine,
-    bootExperiments: () => bootExperiments
+    bootExperiments: () => bootExperiments,
+    openTransparencyPanel: () => openTransparencyPanel,
+    renderTransparencyPanel: () => renderTransparencyPanel
   });
 
   // src/context.ts
@@ -756,116 +758,45 @@ var Kywi = (() => {
     document.cookie = `${name}=; Path=/; Max-Age=0`;
   }
 
-  // src/audience/transparency-styles.ts
-  var STYLE_ELEMENT_ID = "kywi-transparency-styles";
-  var CSS = `
-.kywi-transparency-bar,
-.kywi-transparency-bar * {
-  box-sizing: border-box;
-}
-.kywi-transparency-bar {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 2147483000;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 12px;
-  margin: 0;
-  padding: 12px 16px;
-  background: rgba(23, 23, 28, 0.96);
-  color: #f4f4f5;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  line-height: 1.4;
-  border-top: 1px solid rgba(255, 255, 255, 0.12);
-  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
-  animation: kywi-transparency-in 220ms ease-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .kywi-transparency-bar { animation: none; }
-}
-@keyframes kywi-transparency-in {
-  from { transform: translateY(100%); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-}
-.kywi-transparency-text {
-  flex: 1 1 240px;
-  color: #f4f4f5;
-}
-.kywi-transparency-bar button {
-  appearance: none;
-  -webkit-appearance: none;
-  font-family: inherit;
-  font-size: 12px;
-  line-height: 1.4;
-  cursor: pointer;
-  border-radius: 999px;
-  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
-}
-.kywi-transparency-opt-out,
-.kywi-transparency-opt-in {
-  flex: 0 0 auto;
-  padding: 6px 14px;
-  border: 1px solid rgba(255, 255, 255, 0.35);
-  background: transparent;
-  color: #f4f4f5;
-  font-weight: 600;
-}
-.kywi-transparency-opt-out:hover,
-.kywi-transparency-opt-in:hover {
-  background: rgba(255, 255, 255, 0.12);
-  border-color: rgba(255, 255, 255, 0.5);
-}
-.kywi-transparency-dismiss {
-  flex: 0 0 auto;
-  width: 26px;
-  height: 26px;
-  padding: 0;
-  border: 1px solid transparent;
-  background: transparent;
-  color: #d4d4d8;
-  font-size: 13px;
-}
-.kywi-transparency-dismiss:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: #f4f4f5;
-}
-.kywi-transparency-bar button:focus-visible {
-  outline: 2px solid #7dd3fc;
-  outline-offset: 2px;
-}
-@media (max-width: 480px) {
-  .kywi-transparency-bar {
-    padding: 10px 12px;
-  }
-  .kywi-transparency-text {
-    flex-basis: 100%;
-  }
-}
-`;
-  function ensureTransparencyStyles() {
-    if (typeof document === "undefined") return;
-    if (document.getElementById(STYLE_ELEMENT_ID)) return;
-    const style = document.createElement("style");
-    style.id = STYLE_ELEMENT_ID;
-    style.textContent = CSS;
-    document.head.appendChild(style);
-  }
-
   // src/audience/transparency.ts
-  var DISMISSED_KEY = "kywi_transparency_dismissed";
-  function isDismissed() {
-    return localStorage.getItem(DISMISSED_KEY) === "1";
+  var COLLAPSED_KEY = "kywi_transparency_collapsed";
+  var LEGACY_DISMISSED_KEY = "kywi_transparency_dismissed";
+  var ROOT_ID = "kywi-transparency";
+  var PANEL_ID = "kywi-transparency-panel";
+  var TITLE_ID = "kywi-transparency-title";
+  var SWITCHER_LABEL_ID = "kywi-transparency-switcher-label";
+  var DEFAULT_API_BASE = "/api/v1";
+  var lastState = null;
+  var forcedOpen = false;
+  function readStorage(key) {
+    try {
+      return localStorage.getItem(key);
+    } catch {
+      return null;
+    }
   }
-  function dismiss() {
-    localStorage.setItem(DISMISSED_KEY, "1");
-    removeBar();
+  function writeStorage(key, value) {
+    try {
+      localStorage.setItem(key, value);
+    } catch {
+    }
   }
-  function removeBar() {
-    document.querySelector(".kywi-transparency-bar")?.remove();
+  function removeStorage(key) {
+    try {
+      localStorage.removeItem(key);
+    } catch {
+    }
+  }
+  function isCollapsed() {
+    if (readStorage(LEGACY_DISMISSED_KEY) === "1") {
+      removeStorage(LEGACY_DISMISSED_KEY);
+      writeStorage(COLLAPSED_KEY, "1");
+      return true;
+    }
+    return readStorage(COLLAPSED_KEY) !== "0";
+  }
+  function setCollapsed(collapsed) {
+    writeStorage(COLLAPSED_KEY, collapsed ? "1" : "0");
   }
   function optOut() {
     setCookie(COOKIE_NAMES.OPTOUT, "1", 365 * 24 * 3600);
@@ -874,53 +805,199 @@ var Kywi = (() => {
   function optIn() {
     deleteCookie(COOKIE_NAMES.OPTOUT);
   }
-  function createButton(className, text, onClick) {
+  function resetToAutomatic() {
+    deleteCookie(COOKIE_NAMES.AUDIENCE);
+  }
+  function hasPin() {
+    return readCookies().has(COOKIE_NAMES.AUDIENCE);
+  }
+  async function pinAudience(audienceId, opts = {}) {
+    const apiBase = opts.apiBase ?? DEFAULT_API_BASE;
+    try {
+      await fetch(`${apiBase}/kywi/audience`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...opts.csrfToken ? { "X-CSRF-Token": opts.csrfToken } : {} },
+        body: JSON.stringify({ audienceId })
+      });
+    } catch {
+    }
+  }
+  function reload() {
+    try {
+      window.location.reload();
+    } catch {
+    }
+  }
+  function removeSurface() {
+    document.getElementById(ROOT_ID)?.remove();
+    document.querySelector(".kywi-transparency-bar")?.remove();
+  }
+  function button(className, text, onClick) {
     const btn = document.createElement("button");
-    btn.className = className;
     btn.type = "button";
+    btn.className = className;
     btn.textContent = text;
     btn.addEventListener("click", onClick);
     return btn;
   }
-  function renderTransparencyBar(state) {
-    removeBar();
-    if (isDismissed()) return;
-    if (state.isPersonalized && !state.isOptedOut || state.isOptedOut && state.hasMatchAvailable) {
-      ensureTransparencyStyles();
-    }
-    if (state.isPersonalized && !state.isOptedOut) {
-      const bar = document.createElement("div");
-      bar.className = "kywi-transparency-bar kywi-transparency-active";
-      bar.setAttribute("role", "status");
-      const text = document.createElement("span");
-      text.className = "kywi-transparency-text";
-      text.textContent = "This page has been personalized based on your browsing context.";
-      bar.appendChild(text);
-      bar.appendChild(createButton("kywi-transparency-opt-out", "Opt out", () => {
-        optOut();
-        window.location.reload();
-      }));
-      const dismissBtn = createButton("kywi-transparency-dismiss", "\u2715", () => dismiss());
-      dismissBtn.setAttribute("aria-label", "Dismiss");
-      bar.appendChild(dismissBtn);
-      document.body.appendChild(bar);
-    } else if (state.isOptedOut && state.hasMatchAvailable) {
-      const bar = document.createElement("div");
-      bar.className = "kywi-transparency-bar kywi-transparency-opted-out";
-      bar.setAttribute("role", "status");
-      const text = document.createElement("span");
-      text.className = "kywi-transparency-text";
-      text.textContent = "A personalized experience is available.";
-      bar.appendChild(text);
-      bar.appendChild(createButton("kywi-transparency-opt-in", "Enable", () => {
+  function shouldRenderAutomatically(state) {
+    if (state.enabled === false) return false;
+    return state.isPersonalized && !state.isOptedOut || state.isOptedOut && state.hasMatchAvailable;
+  }
+  function audienceName(state) {
+    if (!state.audienceId) return null;
+    return state.audiences?.find((a) => a.id === state.audienceId)?.name ?? null;
+  }
+  function renderTransparencyPanel(state) {
+    lastState = state;
+    if (typeof document === "undefined") return;
+    removeSurface();
+    if (!forcedOpen && !shouldRenderAutomatically(state)) return;
+    const active = state.isPersonalized && !state.isOptedOut;
+    const collapsed = forcedOpen ? false : isCollapsed();
+    const root = document.createElement("div");
+    root.id = ROOT_ID;
+    root.className = `kywi-transparency ${active ? "kywi-transparency-active" : "kywi-transparency-opted-out"}`;
+    root.dataset.state = collapsed ? "collapsed" : "expanded";
+    const pill = document.createElement("button");
+    pill.type = "button";
+    pill.className = "kywi-transparency-pill";
+    pill.setAttribute("aria-expanded", String(!collapsed));
+    pill.setAttribute("aria-controls", PANEL_ID);
+    const pillIcon = document.createElement("span");
+    pillIcon.className = "kywi-transparency-pill-icon";
+    pillIcon.setAttribute("aria-hidden", "true");
+    pillIcon.textContent = "\u2726";
+    const pillLabel = document.createElement("span");
+    pillLabel.className = "kywi-transparency-pill-label";
+    pillLabel.textContent = active ? "Personalized" : "Personalization off";
+    pill.append(pillIcon, pillLabel);
+    pill.addEventListener("click", () => expandPanel());
+    pill.hidden = !collapsed;
+    root.appendChild(pill);
+    const panel = document.createElement("section");
+    panel.id = PANEL_ID;
+    panel.className = "kywi-transparency-panel";
+    panel.setAttribute("role", "dialog");
+    panel.setAttribute("aria-labelledby", TITLE_ID);
+    panel.hidden = collapsed;
+    const header = document.createElement("div");
+    header.className = "kywi-transparency-header";
+    const title = document.createElement("h2");
+    title.id = TITLE_ID;
+    title.className = "kywi-transparency-title";
+    const name = audienceName(state);
+    title.textContent = !active ? "Personalization is off" : name ? "This page is personalized for:" : "This page is personalized";
+    header.appendChild(title);
+    const collapseBtn = button("kywi-transparency-collapse", "\u2715", () => collapsePanel());
+    collapseBtn.setAttribute("aria-label", "Collapse");
+    header.appendChild(collapseBtn);
+    panel.appendChild(header);
+    if (active) {
+      const audience = document.createElement("p");
+      audience.className = "kywi-transparency-audience";
+      if (name) {
+        const strong = document.createElement("strong");
+        strong.textContent = name;
+        audience.appendChild(strong);
+      } else {
+        audience.textContent = "Based on your browsing context.";
+      }
+      panel.appendChild(audience);
+    }
+    const note = document.createElement("p");
+    note.className = "kywi-transparency-note";
+    note.textContent = active ? "Parts of this page are chosen to match this audience. You can switch, reset, or turn personalization off." : "Personalization is turned off, so you are seeing the default version of this page.";
+    panel.appendChild(note);
+    const options = state.audiences ?? [];
+    if (active && options.length > 0) {
+      const switcher = document.createElement("div");
+      switcher.className = "kywi-transparency-switcher";
+      const switcherLabel = document.createElement("span");
+      switcherLabel.id = SWITCHER_LABEL_ID;
+      switcherLabel.className = "kywi-transparency-switcher-label";
+      switcherLabel.textContent = "See this page as";
+      switcher.appendChild(switcherLabel);
+      const group = document.createElement("div");
+      group.className = "kywi-transparency-options";
+      group.setAttribute("role", "group");
+      group.setAttribute("aria-labelledby", SWITCHER_LABEL_ID);
+      for (const option of options) {
+        const isCurrent = option.id === state.audienceId;
+        const optionBtn = button("kywi-transparency-option", option.name, () => {
+          if (isCurrent) return;
+          void pinAudience(option.id, { apiBase: state.apiBase, csrfToken: state.csrfToken }).then(reload);
+        });
+        optionBtn.dataset.kywiAudienceId = option.id;
+        optionBtn.setAttribute("aria-pressed", String(isCurrent));
+        group.appendChild(optionBtn);
+      }
+      switcher.appendChild(group);
+      panel.appendChild(switcher);
+    }
+    const actions = document.createElement("div");
+    actions.className = "kywi-transparency-actions";
+    if (state.isOptedOut) {
+      actions.appendChild(button("kywi-transparency-opt-in", "Enable personalization", () => {
         optIn();
-        window.location.reload();
+        reload();
+      }));
+    } else {
+      if (hasPin()) {
+        actions.appendChild(button("kywi-transparency-reset", "Reset to automatic", () => {
+          resetToAutomatic();
+          reload();
+        }));
+      }
+      actions.appendChild(button("kywi-transparency-opt-out", "Turn off personalization", () => {
+        optOut();
+        reload();
       }));
-      const dismissBtn = createButton("kywi-transparency-dismiss", "\u2715", () => dismiss());
-      dismissBtn.setAttribute("aria-label", "Dismiss");
-      bar.appendChild(dismissBtn);
-      document.body.appendChild(bar);
     }
+    panel.appendChild(actions);
+    panel.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") collapsePanel();
+    });
+    root.appendChild(panel);
+    document.body.appendChild(root);
+  }
+  function currentSurface() {
+    const root = document.getElementById(ROOT_ID);
+    if (!root) return null;
+    const pill = root.querySelector(".kywi-transparency-pill");
+    const panel = root.querySelector(".kywi-transparency-panel");
+    if (!pill || !panel) return null;
+    return { root, pill, panel };
+  }
+  function setExpanded(expanded) {
+    const surface = currentSurface();
+    if (!surface) return;
+    surface.root.dataset.state = expanded ? "expanded" : "collapsed";
+    surface.pill.hidden = expanded;
+    surface.pill.setAttribute("aria-expanded", String(expanded));
+    surface.panel.hidden = !expanded;
+    const focusTarget = expanded ? surface.panel.querySelector(".kywi-transparency-collapse") : surface.pill;
+    focusTarget?.focus();
+  }
+  function expandPanel() {
+    setCollapsed(false);
+    setExpanded(true);
+  }
+  function collapsePanel() {
+    forcedOpen = false;
+    setCollapsed(true);
+    setExpanded(false);
+  }
+  function openTransparencyPanel() {
+    if (typeof document === "undefined") return;
+    forcedOpen = true;
+    const state = lastState ?? {
+      isPersonalized: false,
+      isOptedOut: readCookies().has(COOKIE_NAMES.OPTOUT),
+      hasMatchAvailable: false
+    };
+    renderTransparencyPanel(state);
+    currentSurface()?.panel.querySelector(".kywi-transparency-collapse")?.focus();
   }
 
   // src/audience/preview.ts
@@ -942,7 +1019,7 @@ var Kywi = (() => {
       deleteCookie(COOKIE_NAMES.PREVIEW_INIT);
     }
   }
-  function renderPreviewBanner(audienceName) {
+  function renderPreviewBanner(audienceName2) {
     document.querySelector(".kywi-preview-banner")?.remove();
     const banner = document.createElement("div");
     banner.className = "kywi-preview-banner";
@@ -951,7 +1028,7 @@ var Kywi = (() => {
     text.className = "kywi-preview-text";
     text.textContent = "Previewing as: ";
     const strong = document.createElement("strong");
-    strong.textContent = audienceName;
+    strong.textContent = audienceName2;
     text.appendChild(strong);
     banner.appendChild(text);
     const exitBtn = document.createElement("button");
@@ -1045,13 +1122,50 @@ var Kywi = (() => {
   // src/audience/selfid-widget.ts
   var SHOWN_KEY = "kywi_selfid_shown";
   var MS_PER_DAY = 864e5;
-  var DISMISSIBLE_MODES = /* @__PURE__ */ new Set(["hello_bar_top", "hello_bar_bottom", "drawer"]);
+  var DISMISSIBLE_MODES = /* @__PURE__ */ new Set(["modal", "slide-in", "hello_bar_top", "hello_bar_bottom", "drawer"]);
+  var OVERLAY_MODES = DISMISSIBLE_MODES;
+  var SELFID_MOUNT_SELECTOR = "[data-kywi-selfid-mount]";
+  var HELLO_BAR_TOP_CLASS = "kywi-selfid-hello-bar-top-open";
+  var HELLO_BAR_HEIGHT_PROPERTY = "--kywi-selfid-hello-bar-height";
+  var MODAL_LABEL_ID = "kywi-selfid-headline";
+  function resolveSelfIdMount(displayMode) {
+    if (typeof document === "undefined") return null;
+    if (displayMode && displayMode !== "inline") return null;
+    return document.querySelector(SELFID_MOUNT_SELECTOR);
+  }
   function normalizeOption(opt) {
     return typeof opt === "string" ? { value: opt, label: opt } : opt;
   }
+  var FOCUSABLE_SELECTOR = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+  function focusableElements(root) {
+    return Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => !el.hidden);
+  }
+  function trapTab(root, e) {
+    const focusable = focusableElements(root);
+    if (focusable.length === 0) {
+      e.preventDefault();
+      root.focus();
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = document.activeElement;
+    const inside = active !== null && root.contains(active) && active !== root;
+    if (e.shiftKey) {
+      if (!inside || active === first) {
+        e.preventDefault();
+        last.focus();
+      }
+    } else if (!inside || active === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  }
   function createSelfIdWidget(config) {
     const frequency = config.frequency ?? "once";
     const displayMode = config.displayMode ?? "inline";
+    const isModal = displayMode === "modal";
+    let cleanups = [];
     function shouldShow() {
       if (frequency === "always") return true;
       if (frequency === "session") return false;
@@ -1072,26 +1186,86 @@ var Kywi = (() => {
         markShown();
       }
     }
+    function teardown(container) {
+      for (const undo of cleanups) undo();
+      cleanups = [];
+      container.replaceChildren();
+      container.className = "";
+      container.removeAttribute("role");
+      container.removeAttribute("aria-modal");
+      container.removeAttribute("aria-label");
+      container.removeAttribute("aria-labelledby");
+      container.removeAttribute("tabindex");
+      container.hidden = true;
+    }
+    function dismiss(container) {
+      markShown();
+      teardown(container);
+    }
     function render(container) {
+      for (const undo of cleanups) undo();
+      cleanups = [];
       container.replaceChildren();
+      container.hidden = false;
       const displayModeClass = displayMode.replace(/_/g, "-");
       container.className = `kywi-selfid-widget kywi-selfid-${displayModeClass}`;
+      if (isModal) {
+        const backdrop = document.createElement("div");
+        backdrop.className = "kywi-selfid-backdrop";
+        backdrop.addEventListener("click", () => dismiss(container));
+        (container.parentElement ?? document.body).appendChild(backdrop);
+        cleanups.push(() => backdrop.remove());
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        cleanups.push(() => {
+          document.body.style.overflow = previousOverflow;
+        });
+        const onKeydown = (e) => {
+          if (e.key === "Escape") {
+            e.preventDefault();
+            dismiss(container);
+            return;
+          }
+          if (e.key === "Tab") trapTab(container, e);
+        };
+        document.addEventListener("keydown", onKeydown, true);
+        cleanups.push(() => document.removeEventListener("keydown", onKeydown, true));
+        container.setAttribute("role", "dialog");
+        container.setAttribute("aria-modal", "true");
+        if (config.headline) {
+          container.setAttribute("aria-labelledby", MODAL_LABEL_ID);
+        } else {
+          container.setAttribute("aria-label", "Personalize your experience");
+        }
+        container.tabIndex = -1;
+      }
+      if (displayMode === "hello_bar_top") {
+        document.body.classList.add(HELLO_BAR_TOP_CLASS);
+        const syncHeight = () => {
+          document.documentElement.style.setProperty(HELLO_BAR_HEIGHT_PROPERTY, `${container.offsetHeight}px`);
+        };
+        window.addEventListener("resize", syncHeight);
+        cleanups.push(() => {
+          document.body.classList.remove(HELLO_BAR_TOP_CLASS);
+          document.documentElement.style.removeProperty(HELLO_BAR_HEIGHT_PROPERTY);
+          window.removeEventListener("resize", syncHeight);
+        });
+        queueMicrotask(syncHeight);
+      }
       if (DISMISSIBLE_MODES.has(displayMode)) {
         const dismissBtn = document.createElement("button");
         dismissBtn.type = "button";
         dismissBtn.className = "kywi-selfid-dismiss";
         dismissBtn.setAttribute("aria-label", "Dismiss");
         dismissBtn.textContent = "\xD7";
-        dismissBtn.addEventListener("click", () => {
-          markShown();
-          container.replaceChildren();
-        });
+        dismissBtn.addEventListener("click", () => dismiss(container));
         container.appendChild(dismissBtn);
       }
       if (config.headline) {
         const h = document.createElement("h3");
         h.className = "kywi-selfid-headline";
         h.textContent = config.headline;
+        if (isModal) h.id = MODAL_LABEL_ID;
         container.appendChild(h);
       }
       if (config.subheadline) {
@@ -1152,10 +1326,7 @@ var Kywi = (() => {
         skipBtn.type = "button";
         skipBtn.className = "kywi-selfid-skip";
         skipBtn.textContent = config.skipLabel;
-        skipBtn.addEventListener("click", () => {
-          markShown();
-          container.replaceChildren();
-        });
+        skipBtn.addEventListener("click", () => dismiss(container));
         actions.appendChild(skipBtn);
       }
       form.appendChild(actions);
@@ -1167,8 +1338,10 @@ var Kywi = (() => {
           responses[key] = String(value);
         });
         handleSubmit(responses);
+        if (OVERLAY_MODES.has(displayMode)) teardown(container);
       });
       container.appendChild(form);
+      if (isModal) container.focus();
     }
     return { shouldShow, markShown, render, handleSubmit };
   }
@@ -1177,39 +1350,30 @@ var Kywi = (() => {
   function isOptedOut() {
     return readCookies().has(COOKIE_NAMES.OPTOUT);
   }
-  function createButton2(className, text, onClick) {
-    const btn = document.createElement("button");
-    btn.className = className;
-    btn.type = "button";
-    btn.textContent = text;
-    btn.addEventListener("click", onClick);
-    return btn;
-  }
-  function renderPersonalizationBadge() {
+  function renderPersonalizationBadge(info = {}) {
     const containers = document.querySelectorAll("[data-kywi-personalization-badge]");
     if (containers.length === 0) return;
+    const optedOut = isOptedOut();
     for (const container of Array.from(containers)) {
-      const existing = container.querySelector(".kywi-personalization-badge");
-      if (existing) existing.remove();
+      container.querySelector(".kywi-personalization-badge")?.remove();
       const badge = document.createElement("div");
       badge.className = "kywi-personalization-badge";
-      const optedOut = isOptedOut();
+      const trigger = document.createElement("button");
+      trigger.type = "button";
+      trigger.className = "kywi-badge-open";
+      trigger.setAttribute("aria-label", "Personalization details");
       const status = document.createElement("span");
       status.className = "kywi-badge-status";
-      status.textContent = optedOut ? "Personalization disabled" : "Personalization active";
-      badge.appendChild(status);
-      if (optedOut) {
-        badge.appendChild(createButton2("kywi-badge-opt-in", "Opt in", () => {
-          deleteCookie(COOKIE_NAMES.OPTOUT);
-          renderPersonalizationBadge();
-        }));
-      } else {
-        badge.appendChild(createButton2("kywi-badge-opt-out", "Opt out", () => {
-          setCookie(COOKIE_NAMES.OPTOUT, "1", 365 * 24 * 3600);
-          deleteCookie(COOKIE_NAMES.AUDIENCE);
-          renderPersonalizationBadge();
-        }));
+      status.textContent = optedOut ? "Personalization off" : "Personalization active";
+      trigger.appendChild(status);
+      if (!optedOut && info.audienceName) {
+        const audience = document.createElement("span");
+        audience.className = "kywi-badge-audience";
+        audience.textContent = info.audienceName;
+        trigger.appendChild(audience);
       }
+      trigger.addEventListener("click", () => openTransparencyPanel());
+      badge.appendChild(trigger);
       container.appendChild(badge);
     }
   }
@@ -1227,10 +1391,12 @@ var Kywi = (() => {
     checkPreviewInit();
     const serverMeta = readServerMeta();
     const previewId = getPreviewAudienceId();
+    const activeAudiences = audiences.filter((a) => a.status === "active").map((a) => ({ id: a.id, name: a.name }));
+    const nameOf = (id) => id ? activeAudiences.find((a) => a.id === id)?.name ?? null : null;
     if (previewId) {
       patchVariantContainers(previewId);
-      renderPreviewBanner(previewId);
-      renderPersonalizationBadge();
+      renderPreviewBanner(nameOf(previewId) ?? previewId);
+      renderPersonalizationBadge({ audienceName: nameOf(previewId) });
       populateDataLayer({ visitorId: serverMeta.visitorId, audienceId: previewId, experimentId: null, variantId: null, isPreview: true, isOptedOut: false });
       fireKywiReady();
       return;
@@ -1246,12 +1412,24 @@ var Kywi = (() => {
       merged.adapters = { ...merged.adapters, ...adapterResults };
     }
     const result = evaluateClientSide(audiences, merged, currentPath, pageCategory);
-    patchVariantContainers(result.winningAudienceId);
-    renderTransparencyBar({ isPersonalized: result.winningAudienceId !== null, isOptedOut: result.isOptedOut, hasMatchAvailable: result.allMatchedIds.length > 0 });
-    renderPersonalizationBadge();
-    populateDataLayer({ visitorId: result.signals.identity.visitorId, audienceId: result.winningAudienceId, experimentId: serverMeta.experimentId, variantId: serverMeta.variantId, isPreview: false, isOptedOut: result.isOptedOut });
+    const pinnedId = cookies.get(COOKIE_NAMES.AUDIENCE) ?? null;
+    const isPinned = !result.isOptedOut && pinnedId !== null && activeAudiences.some((a) => a.id === pinnedId);
+    const effectiveAudienceId = isPinned ? pinnedId : result.winningAudienceId;
+    patchVariantContainers(effectiveAudienceId);
+    renderTransparencyPanel({
+      isPersonalized: effectiveAudienceId !== null,
+      isOptedOut: result.isOptedOut,
+      hasMatchAvailable: result.allMatchedIds.length > 0,
+      audienceId: effectiveAudienceId,
+      audiences: activeAudiences,
+      apiBase,
+      csrfToken: Kywi.context?.csrfToken ?? null,
+      enabled: config.transparencyNotice !== false
+    });
+    renderPersonalizationBadge({ audienceName: nameOf(effectiveAudienceId) });
+    populateDataLayer({ visitorId: result.signals.identity.visitorId, audienceId: effectiveAudienceId, experimentId: serverMeta.experimentId, variantId: serverMeta.variantId, isPreview: false, isOptedOut: result.isOptedOut });
     fireKywiReady();
-    if (result.winningAudienceId && result.winningAudienceId !== serverMeta.audienceId) {
+    if (!isPinned && result.winningAudienceId && result.winningAudienceId !== serverMeta.audienceId) {
       fetch(`${apiBase}/kywi/audience`, {
         method: "POST",
         headers: { "Content-Type": "application/json", ...Kywi.context?.csrfToken ? { "X-CSRF-Token": Kywi.context.csrfToken } : {} },
@@ -1263,6 +1441,11 @@ var Kywi = (() => {
       const widget = createSelfIdWidget(config.selfIdWidget);
       if (widget.shouldShow()) {
         const doRender = () => {
+          const mount = resolveSelfIdMount(config.selfIdWidget.displayMode);
+          if (mount) {
+            widget.render(mount);
+            return;
+          }
           const existing = document.getElementById("kywi-selfid-container");
           const container = existing ?? document.createElement("div");
           if (!container.id) {