@kywi-software/js 0.6.4 → 0.6.6

package/dist/kywi.esm.js

@@ -728,116 +728,45 @@ function deleteCookie(name) {
   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);
@@ -846,53 +775,199 @@ function optOut() {
 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
@@ -914,7 +989,7 @@ function checkPreviewInit() {
     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";
@@ -923,7 +998,7 @@ function renderPreviewBanner(audienceName) {
   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");
@@ -1017,13 +1092,50 @@ function handleSelfIdSubmit(responses, audiences, currentPath) {
 // 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;
@@ -1044,26 +1156,86 @@ function createSelfIdWidget(config) {
       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) {
@@ -1124,10 +1296,7 @@ function createSelfIdWidget(config) {
       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);
@@ -1139,8 +1308,10 @@ function createSelfIdWidget(config) {
         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 };
 }
@@ -1149,39 +1320,30 @@ function createSelfIdWidget(config) {
 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);
   }
 }
@@ -1199,10 +1361,12 @@ async function bootAudienceEngine(config) {
   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;
@@ -1218,12 +1382,24 @@ async function bootAudienceEngine(config) {
     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 } : {} },
@@ -1235,6 +1411,11 @@ async function bootAudienceEngine(config) {
     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) {
@@ -1332,6 +1513,8 @@ if (typeof document !== "undefined") {
 export {
   Kywi,
   bootAudienceEngine,
-  bootExperiments
+  bootExperiments,
+  openTransparencyPanel,
+  renderTransparencyPanel
 };
 //# sourceMappingURL=kywi.esm.js.map