@holdyapp/sdk 1.6.0 → 1.9.0

package/dist/web.mjs

@@ -11,6 +11,7 @@ var HoldyCore = class {
   flushAt;
   debug;
   source;
+  release;
   queue = [];
   timer = null;
   flushing = null;
@@ -27,6 +28,7 @@ var HoldyCore = class {
     this.baseUrl = (opts.baseUrl ?? DEFAULT_BASE_URL).replace(/\/$/, "");
     this.flushAt = Math.max(1, opts.flushAt ?? DEFAULT_FLUSH_AT);
     this.debug = opts.debug ?? false;
+    this.release = typeof opts.release === "string" && opts.release.trim() ? opts.release.trim().slice(0, 64) : null;
     const intervalMs = opts.flushIntervalMs ?? DEFAULT_FLUSH_INTERVAL_MS;
     if (intervalMs > 0) {
       this.timer = setInterval(() => void this.flush(), intervalMs);
@@ -43,6 +45,7 @@ var HoldyCore = class {
     const occurredAt = overrides?.occurredAt ? new Date(overrides.occurredAt).toISOString() : (/* @__PURE__ */ new Date()).toISOString();
     const context = {
       ...this.environmentContext(),
+      ...this.release ? { release: this.release } : {},
       ...overrides?.context ?? {}
     };
     if (accountKey) context.account_external_id = accountKey;
@@ -290,11 +293,14 @@ var NavLoopDetector = class {
     return null;
   }
 };
+function tagOf(el) {
+  return typeof el?.tagName === "string" ? el.tagName.toLowerCase() : "";
+}
 function resolveInteractive(el) {
   if (!el) return null;
   const viaClosest = el.closest?.(INTERACTIVE_SELECTOR) ?? null;
   if (viaClosest) return viaClosest;
-  const tag = el.tagName.toLowerCase();
+  const tag = tagOf(el);
   if (INTERACTIVE_TAGS.has(tag)) return el;
   const role = el.getAttribute("role");
   if (role === "button" || role === "link" || role === "menuitem" || role === "tab") return el;
@@ -306,7 +312,7 @@ function isDeadClickTarget(el) {
   if (target.disabled === true) return true;
   if (target.getAttribute("disabled") !== null) return true;
   if (target.getAttribute("aria-disabled") === "true") return true;
-  const tag = target.tagName.toLowerCase();
+  const tag = tagOf(target);
   if (tag === "a") {
     const href = target.getAttribute("href");
     if (!href || href === "#" || href.startsWith("javascript:")) return true;
@@ -316,7 +322,7 @@ function isDeadClickTarget(el) {
 function describeElement(el) {
   const target = resolveInteractive(el) ?? el;
   if (!target) return {};
-  const out = { element: target.tagName.toLowerCase() };
+  const out = { element: tagOf(target) };
   if (target.id) out.element_id = target.id;
   const role = target.getAttribute("role");
   if (role) out.element_role = role;
@@ -344,6 +350,22 @@ function errorMessage(reason) {
     return String(reason);
   }
 }
+var STACK_MAX_FRAMES = 8;
+var STACK_MAX_FRAME_CHARS = 200;
+var STACK_FRAME = /^at\s|^\S*@\S+:\d+(?::\d+)?$/;
+function sanitizeStack(stack) {
+  if (typeof stack !== "string" || !stack) return null;
+  const frames = stack.split("\n").map((line) => line.trim()).filter((line) => line.length > 0 && STACK_FRAME.test(line)).slice(0, STACK_MAX_FRAMES).map(
+    (line) => line.replace(/(https?:\/\/[^\s)?#]+)[?#][^\s)]*?(?=(?::\d+){0,2}\)?$)/, "$1").slice(0, STACK_MAX_FRAME_CHARS)
+  );
+  return frames.length > 0 ? frames.join("\n") : null;
+}
+function withStack(stack) {
+  return stack ? { stack } : {};
+}
+function stackOf(reason) {
+  return typeof reason === "object" && reason !== null ? sanitizeStack(reason.stack) : null;
+}
 function isAbortError(err) {
   return typeof err === "object" && err !== null && err.name === "AbortError";
 }
@@ -421,13 +443,19 @@ function installFrictionCapture(opts) {
     emit("js_error", {
       message: String(ev.message ?? "").slice(0, 200),
       ...ev.filename ? { source: stripRequestUrl(ev.filename, location.href) } : {},
-      ...ev.lineno ? { line: ev.lineno } : {}
+      ...ev.lineno ? { line: ev.lineno } : {},
+      ...ev.colno ? { column: ev.colno } : {},
+      ...withStack(stackOf(ev.error))
     });
   };
   window.addEventListener("error", onError);
   cleanups.push(() => window.removeEventListener("error", onError));
   const onRejection = (ev) => {
-    emit("js_error", { message: errorMessage(ev.reason).slice(0, 200), unhandled_rejection: true });
+    emit("js_error", {
+      message: errorMessage(ev.reason).slice(0, 200),
+      unhandled_rejection: true,
+      ...withStack(stackOf(ev.reason))
+    });
   };
   window.addEventListener("unhandledrejection", onRejection);
   cleanups.push(() => window.removeEventListener("unhandledrejection", onRejection));
@@ -509,11 +537,11 @@ function installFrictionCapture(opts) {
   }
   const onFocusIn = (ev) => {
     const el = ev.target;
-    if (!el || !FORM_CONTROL_TAGS.has(el.tagName.toLowerCase())) return;
+    if (!el || !FORM_CONTROL_TAGS.has(tagOf(el))) return;
     const form = el.form;
     if (!form) return;
     const entry = touched.get(form) ?? { form: formKey(form), fields: /* @__PURE__ */ new Set() };
-    const field = el.name || el.id || el.tagName.toLowerCase();
+    const field = el.name || el.id || tagOf(el);
     entry.fields.add(field);
     touched.set(form, entry);
   };
@@ -546,6 +574,86 @@ function installFrictionCapture(opts) {
   };
 }
 
+// src/theme.ts
+var THEME_BUTTON_SELECTOR = 'button[type="submit"],[data-testid*="primary"],.btn-primary,button,[role="button"],a.button';
+var THEME_MAX_BUTTONS = 40;
+var THEME_KEYS = ["font", "size", "fg", "bg", "accent", "accentFg", "radius"];
+var COLOR = /^(rgba?\([\d.,\s%/]{1,40}\)|#[0-9a-fA-F]{3,8}|(?:color|oklch|oklab|hsla?|lab|lch)\([^()]{1,60}\))$/;
+var MIN_ACCENT_CONTRAST = 60;
+var RGB = /^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/;
+function colorDistance(a, b) {
+  const x = RGB.exec(a);
+  const y = b ? RGB.exec(b) : null;
+  if (!x) return MIN_ACCENT_CONTRAST + 1;
+  if (!y) return MIN_ACCENT_CONTRAST + 1;
+  return Math.abs(+x[1] - +y[1]) + Math.abs(+x[2] - +y[2]) + Math.abs(+x[3] - +y[3]);
+}
+var TRANSPARENT = /^(transparent|rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*0\s*\)|rgba?\(\s*\d+\s+\d+\s+\d+\s*\/\s*0\s*\))$/;
+function themeVarName(key) {
+  return `--holdy-${key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}`;
+}
+function cleanColor(value) {
+  const v = (value ?? "").trim();
+  return v && v.length <= 80 && !TRANSPARENT.test(v) && COLOR.test(v) ? v : void 0;
+}
+function cleanFont(value) {
+  const first = (value ?? "").split(",")[0].trim().replace(/^["']|["']$/g, "").trim();
+  return /^[\w\s-]{1,60}$/.test(first) ? first : void 0;
+}
+function cleanPx(value, min, max) {
+  const m = /^(\d+(?:\.\d+)?)px/.exec((value ?? "").trim());
+  const n = m ? Math.round(Number(m[1])) : NaN;
+  return n >= min && n <= max ? `${n}px` : void 0;
+}
+function visible(el) {
+  const r = el.getBoundingClientRect?.();
+  return !r || r.width > 0 && r.height > 0;
+}
+function readTheme(doc, getStyle, anchor = null) {
+  const body = doc.body;
+  if (!body) return null;
+  const bodyStyle = getStyle(body);
+  const theme = {};
+  const put = (key, value) => {
+    if (value) theme[key] = value;
+  };
+  put("font", cleanFont(bodyStyle.getPropertyValue("font-family")));
+  put("size", cleanPx(bodyStyle.getPropertyValue("font-size"), 10, 20));
+  put("fg", cleanColor(bodyStyle.getPropertyValue("color")));
+  put("bg", cleanColor(bodyStyle.getPropertyValue("background-color")) ?? cleanColor(getStyle(doc.documentElement).getPropertyValue("background-color")));
+  const candidates = doc.querySelectorAll(THEME_BUTTON_SELECTOR);
+  let button = null;
+  let best = MIN_ACCENT_CONTRAST;
+  for (let i = 0; i < candidates.length && i < THEME_MAX_BUTTONS; i++) {
+    const el = candidates[i];
+    if (!visible(el)) continue;
+    const s = getStyle(el);
+    const accent = cleanColor(s.getPropertyValue("background-color"));
+    if (!accent || accent === theme.bg) continue;
+    const contrast = colorDistance(accent, theme.bg);
+    if (contrast <= best) continue;
+    best = contrast;
+    put("accent", accent);
+    put("accentFg", cleanColor(s.getPropertyValue("color")));
+    button = el;
+  }
+  const radiusSource = anchor && anchor.tagName.toLowerCase() === "button" ? anchor : button;
+  if (radiusSource) put("radius", cleanPx(getStyle(radiusSource).getPropertyValue("border-top-left-radius"), 0, 24));
+  return Object.keys(theme).length > 0 ? theme : null;
+}
+function themeVars(theme) {
+  const out = [];
+  for (const key of THEME_KEYS) {
+    const value = theme?.[key];
+    if (value) out.push([themeVarName(key), value]);
+  }
+  return out;
+}
+function applyThemeVars(el, theme) {
+  for (const key of THEME_KEYS) el.style.removeProperty(themeVarName(key));
+  for (const [name, value] of themeVars(theme)) el.style.setProperty(name, value);
+}
+
 // src/skeleton.ts
 var SKELETON_SELECTOR = 'a[href], button, input, select, textarea, [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="checkbox"], [role="radio"], [role="switch"], [data-testid]';
 var SKELETON_MAX_ELEMENTS = 80;
@@ -592,18 +700,18 @@ function describeSkeletonElement(el, viewport) {
   if (viewport && el.getBoundingClientRect) out.b = relativeBox(el.getBoundingClientRect(), viewport);
   return out;
 }
-function collectSkeleton(root, path, viewport) {
+function collectSkeleton(root, path, viewport, theme = null) {
   const found = root.querySelectorAll(SKELETON_SELECTOR);
-  const visible = [];
+  const visible2 = [];
   for (let i = 0; i < found.length; i++) {
     const el = found[i];
     if (el.tagName.toLowerCase() === "input" && (el.getAttribute("type") ?? "").toLowerCase() === "hidden") continue;
     if (!isVisible(el)) continue;
-    visible.push(el);
+    visible2.push(el);
   }
-  const elements = visible.slice(0, SKELETON_MAX_ELEMENTS).map((el) => describeSkeletonElement(el, viewport));
+  const elements = visible2.slice(0, SKELETON_MAX_ELEMENTS).map((el) => describeSkeletonElement(el, viewport));
   const structural = elements.map(({ b: _b, ...rest }) => rest);
-  return { path, hash: fnv1a(JSON.stringify(structural)), count: visible.length, elements };
+  return { path, hash: fnv1a(JSON.stringify(structural)), count: visible2.length, elements, ...theme ? { theme } : {} };
 }
 function loadSent() {
   try {
@@ -637,7 +745,8 @@ function installSkeletonCapture(opts) {
         height: Math.max(document.documentElement.scrollHeight, window.innerHeight),
         scrollY: window.scrollY
       };
-      const skeleton = collectSkeleton(document, path, viewport);
+      const theme = readTheme(document, (el) => window.getComputedStyle(el));
+      const skeleton = collectSkeleton(document, path, viewport, theme);
       const key = `${path}:${skeleton.hash}`;
       if (sent.has(key)) return;
       sent.add(key);
@@ -723,6 +832,12 @@ function randomId() {
     return `hol-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
   }
 }
+function clearSessionId() {
+  try {
+    sessionStorage.removeItem(SESSION_STORAGE_KEY);
+  } catch {
+  }
+}
 function resolveSessionId() {
   const existing = readStorage("session", SESSION_STORAGE_KEY);
   if (existing) return existing;
@@ -776,6 +891,33 @@ function buildWebContext() {
   };
 }
 
+// src/tip-css.ts
+var TIP_CSS = `:host{all:initial;--h-bg:#111;--h-fg:#fff;--h-accent:#fff;--h-accent-fg:#111;--h-border:transparent}
+@media (prefers-color-scheme:dark){:host{--h-bg:#fff;--h-fg:#111;--h-accent:#111;--h-accent-fg:#fff}}
+.tip{position:fixed;box-sizing:border-box;max-width:280px;padding:10px 12px;border-radius:var(--holdy-radius,8px);background:var(--holdy-bg,var(--h-bg));color:var(--holdy-fg,var(--h-fg));border:1px solid color-mix(in srgb,var(--holdy-fg,var(--h-fg)) 14%,transparent);font:var(--holdy-size,13px)/1.45 var(--holdy-font,system-ui),system-ui,-apple-system,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.18);pointer-events:auto;display:flex;gap:10px;align-items:flex-start}
+.tip p{margin:0;flex:1}
+.tip button{all:unset;cursor:pointer;opacity:.7;font-size:15px;line-height:1;color:inherit}
+.tip button:hover,.tip button:focus-visible{opacity:1}
+.ask{flex-direction:column;width:300px;max-width:calc(100vw - 16px);gap:8px}
+.ask .head{display:flex;gap:10px;align-items:flex-start;width:100%}
+.ask textarea{all:unset;box-sizing:border-box;width:100%;min-height:56px;padding:8px;border-radius:calc(var(--holdy-radius,8px) * .75);background:color-mix(in srgb,var(--holdy-fg,var(--h-fg)) 8%,transparent);color:inherit;font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text}
+.ask textarea:focus-visible{outline:2px solid color-mix(in srgb,var(--holdy-fg,var(--h-fg)) 45%,transparent)}
+.ask .send{align-self:flex-end;padding:5px 12px;border-radius:calc(var(--holdy-radius,8px) * .75);background:var(--holdy-accent,var(--h-accent));color:var(--holdy-accent-fg,var(--h-accent-fg));font-size:12.5px;font-weight:500;opacity:1}
+.ask .send[disabled]{opacity:.4;cursor:default}
+.list{flex-direction:column;width:300px;max-width:calc(100vw - 16px);gap:8px}
+.list .head{display:flex;gap:10px;align-items:flex-start;width:100%}
+.list .head p{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
+.list .count{opacity:.7;font-size:12px;white-space:nowrap}
+.list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;width:100%}
+.list li{display:flex;gap:8px;align-items:flex-start}
+.list li.done{opacity:.55;text-decoration:line-through}
+.list .mark{flex:none;width:16px;height:16px;border-radius:4px;border:1px solid color-mix(in srgb,var(--holdy-fg,var(--h-fg)) 45%,transparent);font-size:11px;line-height:16px;text-align:center}
+.list li.done .mark{background:var(--holdy-accent,var(--h-accent));color:var(--holdy-accent-fg,var(--h-accent-fg));border-color:var(--holdy-accent,var(--h-accent))}
+.list.folded ul{display:none}
+.list.folded{width:auto}
+.preview{flex:none;order:-1;width:100%;font-size:11px;opacity:.7}
+.tip:has(.preview){flex-wrap:wrap;row-gap:4px}`;
+
 // src/arm.ts
 function fnv1a2(input) {
   let hash = 2166136261;
@@ -805,12 +947,16 @@ var SCAN_DEBOUNCE_MS = 250;
 var SEEN_KEY = "holdy_changes_seen";
 var DISMISSED_KEY = "holdy_changes_dismissed";
 var TIP_GAP_PX = 8;
-var TIP_CSS = `:host{all:initial}
-.tip{position:fixed;box-sizing:border-box;max-width:280px;padding:10px 12px;border-radius:8px;background:#111;color:#fff;font:13px/1.45 system-ui,-apple-system,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.18);pointer-events:auto;display:flex;gap:10px;align-items:flex-start}
-.tip p{margin:0;flex:1}
-.tip button{all:unset;cursor:pointer;opacity:.7;font-size:15px;line-height:1}
-.tip button:hover,.tip button:focus-visible{opacity:1}
-@media (prefers-color-scheme:dark){.tip{background:#fff;color:#111}}`;
+var ANSWERED_KEY = "holdy_questions_answered";
+var FOLDED_KEY = "holdy_checklist_folded";
+var COMPLETED_KEY = "holdy_checklist_completed";
+var PROGRESS_REFRESH_MS = 60 * 1e3;
+var VOICE_EVENT = "$voice";
+var MAX_ANSWER_CHARS = 1e3;
+var THANKS_MS = 1600;
+var PREVIEW_PARAM = "holdy_preview";
+var PREVIEW_KEY = "holdy_preview";
+var PREVIEW_ID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 function normalizeText(text) {
   return text.replace(/\s+/g, " ").trim();
 }
@@ -823,13 +969,42 @@ function isAnchor(value) {
   if (a?.kind === "page") return true;
   return (a?.kind === "selector" || a?.kind === "text") && typeof a.value === "string" && a.value.length > 0;
 }
+function isItem(value) {
+  const i = value;
+  return typeof i?.definition_name === "string" && typeof i.label === "string" && Array.isArray(i.events) && i.events.every((e) => typeof e === "string");
+}
 function isChange(value) {
   const c = value;
-  return typeof c?.id === "string" && (c.kind === "copy" || c.kind === "guidance") && typeof c.path === "string" && isAnchor(c.anchor) && typeof c.content?.text === "string" && typeof c.holdout_pct === "number";
+  return typeof c?.id === "string" && (c.kind === "copy" || c.kind === "guidance" || c.kind === "question" && typeof c.plan_id === "string" || c.kind === "checklist" && Array.isArray(c.content?.items) && c.content.items.length > 0 && c.content.items.every(isItem)) && typeof c.path === "string" && isAnchor(c.anchor) && typeof c.content?.text === "string" && typeof c.holdout_pct === "number";
 }
-function changesForPage(changes, path, accountKey) {
-  if (!accountKey) return [];
-  return changes.filter((c) => matchesPathTemplate(c.path, path)).map((change) => ({ change, arm: changeArm(change.id, accountKey, change.holdout_pct) }));
+function changesForPage(changes, path, accountKey, previewId = null) {
+  return changes.filter((c) => c.kind === "checklist" || matchesPathTemplate(c.path, path)).flatMap((change) => {
+    if (change.id === previewId) return [{ change, arm: "change", preview: true }];
+    if (!accountKey) return [];
+    return [{ change, arm: changeArm(change.id, accountKey, change.holdout_pct), preview: false }];
+  });
+}
+function resolvePreviewId(search, store) {
+  let asked = null;
+  try {
+    asked = new URLSearchParams(search).get(PREVIEW_PARAM);
+  } catch {
+    asked = null;
+  }
+  try {
+    if (asked !== null) {
+      if (PREVIEW_ID.test(asked)) {
+        store?.setItem(PREVIEW_KEY, asked);
+        return asked;
+      }
+      store?.removeItem(PREVIEW_KEY);
+      return null;
+    }
+    const kept = store?.getItem(PREVIEW_KEY) ?? null;
+    return kept && PREVIEW_ID.test(kept) ? kept : null;
+  } catch {
+    return asked !== null && PREVIEW_ID.test(asked) ? asked : null;
+  }
 }
 function storage(kind) {
   try {
@@ -891,7 +1066,7 @@ function findTextNode(el, match) {
 }
 function installProductChanges(opts) {
   if (typeof window === "undefined" || typeof document === "undefined") {
-    return { onNavigate: () => void 0, refresh: async () => void 0, teardown: () => void 0 };
+    return { onNavigate: () => void 0, onEvent: () => void 0, refresh: async () => void 0, teardown: () => void 0 };
   }
   let changes = [];
   let lastFetch = 0;
@@ -900,6 +1075,11 @@ function installProductChanges(opts) {
   let host = null;
   const copies = /* @__PURE__ */ new Map();
   const tips = /* @__PURE__ */ new Map();
+  const progress = /* @__PURE__ */ new Map();
+  const progressAt = /* @__PURE__ */ new Map();
+  const lists = /* @__PURE__ */ new Map();
+  let fetchedForKey = null;
+  let previewId = resolvePreviewId(location.search, storage("session"));
   const log = (message) => {
     if (opts.debug) console.warn(`[holdy] ${message}`);
   };
@@ -949,21 +1129,66 @@ function installProductChanges(opts) {
     document.body.appendChild(host);
     return root;
   };
-  const showTip = (anchor, change) => {
+  let dismissedPreview = false;
+  const previewTag = () => {
+    const tag = document.createElement("span");
+    tag.className = "preview";
+    tag.textContent = "Pr\xE9via, s\xF3 voc\xEA v\xEA";
+    return tag;
+  };
+  const showTip = (anchor, change, preview) => {
     if (tips.has(change.id)) return true;
-    if (readSet(storage("local"), DISMISSED_KEY).has(change.id)) return true;
+    if (!preview && readSet(storage("local"), DISMISSED_KEY).has(change.id)) return true;
+    const asking = change.kind === "question";
+    if (!preview && asking && readSet(storage("local"), ANSWERED_KEY).has(change.id)) return true;
     const shadow = ensureRoot();
     if (!shadow) return false;
+    if (host) applyThemeVars(host, readTheme(document, (el) => window.getComputedStyle(el), anchor));
     const card = document.createElement("div");
-    card.className = "tip";
-    card.setAttribute("role", "tooltip");
+    card.className = asking ? "tip ask" : "tip";
+    card.setAttribute("role", asking ? "dialog" : "tooltip");
     const text = document.createElement("p");
     text.textContent = change.content.text;
     const close = document.createElement("button");
     close.type = "button";
     close.setAttribute("aria-label", "Fechar");
     close.textContent = "\xD7";
-    card.append(text, close);
+    if (asking) {
+      const head = document.createElement("div");
+      head.className = "head";
+      head.append(text, close);
+      const input = document.createElement("textarea");
+      input.maxLength = MAX_ANSWER_CHARS;
+      input.setAttribute("aria-label", change.content.text);
+      const send = document.createElement("button");
+      send.type = "button";
+      send.className = "send";
+      send.textContent = "Enviar";
+      send.disabled = true;
+      input.addEventListener("input", () => {
+        send.disabled = input.value.trim().length === 0;
+      });
+      send.addEventListener("click", () => {
+        const answer = input.value.trim().slice(0, MAX_ANSWER_CHARS);
+        if (!answer) return;
+        if (!preview) {
+          addToSet(storage("local"), ANSWERED_KEY, change.id);
+          opts.track(VOICE_EVENT, {
+            question: change.content.text,
+            text: answer,
+            action_plan_id: change.plan_id,
+            change_id: change.id,
+            path: location.pathname
+          });
+        }
+        card.replaceChildren(Object.assign(document.createElement("p"), { textContent: "Obrigado pela resposta." }));
+        setTimeout(remove, THANKS_MS);
+      });
+      card.append(head, input, send);
+    } else {
+      card.append(text, close);
+    }
+    if (preview) card.prepend(previewTag());
     card.style.top = "-9999px";
     card.style.left = "-9999px";
     shadow.appendChild(card);
@@ -993,6 +1218,11 @@ function installProductChanges(opts) {
       card.style.left = `${Math.max(8, left)}px`;
     }
     close.addEventListener("click", () => {
+      if (preview) {
+        dismissedPreview = true;
+        remove();
+        return;
+      }
       addToSet(storage("local"), DISMISSED_KEY, change.id);
       opts.track("$change_dismissed", { change_id: change.id, kind: change.kind });
       remove();
@@ -1003,20 +1233,143 @@ function installProductChanges(opts) {
     window.addEventListener("resize", position);
     return true;
   };
+  const doneOf = (change) => progress.get(change.id) ?? /* @__PURE__ */ new Set();
+  const allDone = (change) => {
+    const done = doneOf(change);
+    return (change.content.items ?? []).every((i) => done.has(i.definition_name));
+  };
+  const fetchProgress = async (change) => {
+    const account = opts.getAccountKey();
+    if (!account) return;
+    const last = progressAt.get(change.id) ?? 0;
+    if (Date.now() - last < PROGRESS_REFRESH_MS) return;
+    progressAt.set(change.id, Date.now());
+    try {
+      const res = await fetch(
+        `${opts.baseUrl}/runtime/checklist?change_id=${encodeURIComponent(change.id)}&account=${encodeURIComponent(account)}`,
+        { headers: { Authorization: `Bearer ${opts.apiKey}` } }
+      );
+      if (!res.ok) return;
+      const body = await res.json();
+      const done = Array.isArray(body.done) ? body.done.filter((d) => typeof d === "string") : [];
+      const set = doneOf(change);
+      for (const d of done) set.add(d);
+      progress.set(change.id, set);
+      lists.get(change.id)?.();
+    } catch (err) {
+      log(`checklist progress error: ${err.message}`);
+    }
+  };
+  const showChecklist = (change, preview) => {
+    if (lists.has(change.id)) return true;
+    if (!preview && readSet(storage("local"), COMPLETED_KEY).has(change.id)) return true;
+    const shadow = ensureRoot();
+    if (!shadow) return false;
+    const items = change.content.items ?? [];
+    const card = document.createElement("div");
+    card.className = "tip list";
+    card.setAttribute("role", "region");
+    card.setAttribute("aria-label", change.content.text);
+    const head = document.createElement("div");
+    head.className = "head";
+    const title = document.createElement("p");
+    const strong = document.createElement("strong");
+    strong.textContent = change.content.text;
+    const count = document.createElement("span");
+    count.className = "count";
+    title.append(strong, count);
+    const fold = document.createElement("button");
+    fold.type = "button";
+    head.append(title, fold);
+    const list = document.createElement("ul");
+    card.append(head, list);
+    if (preview) card.prepend(previewTag());
+    card.style.position = "fixed";
+    card.style.right = "16px";
+    card.style.bottom = "16px";
+    shadow.appendChild(card);
+    const remove = () => {
+      card.remove();
+      lists.delete(change.id);
+    };
+    const render = () => {
+      const done = doneOf(change);
+      const n = items.filter((i) => done.has(i.definition_name)).length;
+      count.textContent = `${n} de ${items.length}`;
+      const folded = readSet(storage("local"), FOLDED_KEY).has(change.id);
+      card.classList.toggle("folded", folded);
+      fold.textContent = folded ? "+" : "\u2013";
+      fold.setAttribute("aria-label", folded ? "Abrir" : "Recolher");
+      list.replaceChildren(
+        ...items.map((item) => {
+          const li = document.createElement("li");
+          const isDone = done.has(item.definition_name);
+          if (isDone) li.className = "done";
+          const mark = document.createElement("span");
+          mark.className = "mark";
+          mark.setAttribute("aria-hidden", "true");
+          mark.textContent = isDone ? "\u2713" : "";
+          const label = document.createElement("span");
+          label.textContent = item.label;
+          li.append(mark, label);
+          return li;
+        })
+      );
+      if (!preview && n === items.length && items.length > 0) {
+        addToSet(storage("local"), COMPLETED_KEY, change.id);
+        opts.track("$checklist_completed", { change_id: change.id });
+        remove();
+      }
+    };
+    fold.addEventListener("click", () => {
+      const store = storage("local");
+      const set = readSet(store, FOLDED_KEY);
+      if (set.has(change.id)) set.delete(change.id);
+      else set.add(change.id);
+      try {
+        store?.setItem(FOLDED_KEY, JSON.stringify([...set].slice(-200)));
+      } catch {
+      }
+      render();
+    });
+    lists.set(change.id, render);
+    render();
+    void fetchProgress(change);
+    return true;
+  };
   const scan = () => {
     timer = null;
-    const active = changesForPage(changes, location.pathname, opts.getAccountKey());
+    const active = changesForPage(changes, location.pathname, opts.getAccountKey(), previewId);
     const activeIds = new Set(active.map((a) => a.change.id));
     for (const id of [...copies.keys()]) if (!activeIds.has(id)) restoreCopy(id);
     for (const [id, remove] of [...tips]) if (!activeIds.has(id)) remove();
-    for (const { change, arm } of active) {
+    for (const [id, render] of [...lists]) {
+      if (!activeIds.has(id)) {
+        lists.delete(id);
+        render();
+      }
+    }
+    for (const { change, arm, preview } of active) {
       const el = findAnchor(change.anchor);
-      if (!el && change.anchor.kind !== "page") continue;
-      if (change.kind === "copy") {
+      if (!el && change.anchor.kind !== "page") {
+        if (preview) log(`preview: \xE2ncora n\xE3o encontrada em ${location.pathname}`);
+        continue;
+      }
+      if (preview) {
+        if (change.kind === "checklist") showChecklist(change, true);
+        else if (change.kind === "copy") {
+          if (el) applyCopy(el, change);
+        } else if (!dismissedPreview) showTip(el, change, true);
+        continue;
+      }
+      if (change.kind === "checklist") {
+        if (arm === "holdout" || allDone(change) || showChecklist(change, false)) expose(change, arm);
+        if (arm === "change") void fetchProgress(change);
+      } else if (change.kind === "copy") {
         if (!el) continue;
         const shown = arm === "change" ? applyCopy(el, change) : eligibleCopyNode(el, change) !== null;
         if (shown) expose(change, arm);
-      } else if (arm === "holdout" || showTip(el, change)) {
+      } else if (arm === "holdout" || showTip(el, change, false)) {
         expose(change, arm);
       }
     }
@@ -1026,8 +1379,14 @@ function installProductChanges(opts) {
   };
   const refresh = async () => {
     lastFetch = Date.now();
+    const account = opts.getAccountKey();
+    fetchedForKey = account;
+    const params = new URLSearchParams();
+    if (account) params.set("account", account);
+    if (previewId) params.set("preview", previewId);
+    const qs = params.toString();
     try {
-      const res = await fetch(`${opts.baseUrl}/runtime/changes`, {
+      const res = await fetch(`${opts.baseUrl}/runtime/changes${qs ? `?${qs}` : ""}`, {
         headers: { Authorization: `Bearer ${opts.apiKey}` }
       });
       if (!res.ok) {
@@ -1052,9 +1411,28 @@ function installProductChanges(opts) {
   void refresh();
   return {
     onNavigate: () => {
-      if (Date.now() - lastFetch > NAV_REFRESH_MS) void refresh();
+      const asked = resolvePreviewId(location.search, storage("session"));
+      const previewChanged = asked !== previewId;
+      if (previewChanged) {
+        previewId = asked;
+        dismissedPreview = false;
+        for (const id of [...copies.keys()]) restoreCopy(id);
+        for (const remove of [...tips.values()]) remove();
+      }
+      if (previewChanged || Date.now() - lastFetch > NAV_REFRESH_MS || opts.getAccountKey() !== fetchedForKey) void refresh();
       schedule();
     },
+    onEvent: (name) => {
+      for (const change of changes) {
+        if (change.kind !== "checklist") continue;
+        const hit = (change.content.items ?? []).filter((i) => i.events.includes(name));
+        if (hit.length === 0) continue;
+        const set = doneOf(change);
+        for (const i of hit) set.add(i.definition_name);
+        progress.set(change.id, set);
+        lists.get(change.id)?.();
+      }
+    },
     refresh,
     teardown: () => {
       clearInterval(interval);
@@ -1062,6 +1440,7 @@ function installProductChanges(opts) {
       observer?.disconnect();
       for (const id of [...copies.keys()]) restoreCopy(id);
       for (const remove of [...tips.values()]) remove();
+      for (const id of [...lists.keys()]) lists.delete(id);
       host?.remove();
       host = null;
       root = null;
@@ -1138,6 +1517,10 @@ var HoldyWeb = class extends HoldyCore {
     super.group(accountKey, traits);
     this.changes?.onNavigate();
   }
+  track(name, properties, overrides) {
+    super.track(name, properties, overrides);
+    if (!name.startsWith("$")) this.changes?.onEvent(name);
+  }
   reset() {
     this.userId = null;
     this.accountKey = null;
@@ -1145,6 +1528,7 @@ var HoldyWeb = class extends HoldyCore {
       localStorage.removeItem(ANON_STORAGE_KEY);
     } catch {
     }
+    clearSessionId();
     this.anonymousId = resolveAnonymousId();
     this.changes?.onNavigate();
   }