universal-ad-loader 0.1.1 → 0.2.0

package/dist/index.cjs

@@ -299,6 +299,247 @@ function normalize(tc, opts) {
   return out;
 }
 
+// src/core/native.js
+var NATIVE_LIMITS = { title: 150, body: 300, sponsoredBy: 60, cta: 30, displayUrl: 100, price: 30, label: 20 };
+var NATIVE_LAYOUTS = ["card", "list", "compact"];
+var clip = (v, n) => typeof v === "string" ? v.trim().slice(0, n) : "";
+function normalizeNative(raw, safeUrl2) {
+  if (!raw || typeof raw !== "object") return { ok: false, reason: "native mancante" };
+  const title = clip(raw.title, NATIVE_LIMITS.title);
+  if (!title) return { ok: false, reason: "native: titolo mancante" };
+  const img = (v) => {
+    const o = typeof v === "string" ? { src: v } : v;
+    const src = o && typeof o === "object" ? safeUrl2(o.src, true) : null;
+    if (!src) return null;
+    const dim2 = (n) => {
+      const x = Math.round(Number(n));
+      return x > 0 && x <= 2e3 ? x : 0;
+    };
+    return { src, width: dim2(o.width), height: dim2(o.height) };
+  };
+  const rating = Number(raw.rating);
+  return {
+    ok: true,
+    native: {
+      title,
+      body: clip(raw.body, NATIVE_LIMITS.body),
+      sponsoredBy: clip(raw.sponsoredBy, NATIVE_LIMITS.sponsoredBy),
+      cta: clip(raw.cta, NATIVE_LIMITS.cta),
+      displayUrl: clip(raw.displayUrl, NATIVE_LIMITS.displayUrl),
+      price: clip(raw.price, NATIVE_LIMITS.price),
+      rating: Number.isFinite(rating) && rating >= 0 && rating <= 5 ? rating : null,
+      image: img(raw.image),
+      icon: img(raw.icon),
+      layout: NATIVE_LAYOUTS.includes(raw.layout) ? raw.layout : "card",
+      label: clip(raw.label, NATIVE_LIMITS.label) || "Sponsored"
+    }
+  };
+}
+var STYLE = `
+:host{display:block;max-width:100%;font:inherit;color:inherit;line-height:1.35}
+*{box-sizing:border-box}
+.card{display:flex;flex-direction:column;gap:.5em;padding:.75em;text-decoration:none;color:inherit;border:1px solid var(--ual-native-border,rgba(128,128,128,.35));border-radius:var(--ual-native-radius,8px);background:var(--ual-native-bg,transparent);position:relative}
+a.card:hover .title{text-decoration:underline}
+.label{font-size:.72em;letter-spacing:.04em;text-transform:uppercase;opacity:.75}
+.main{display:block;width:100%;height:auto;border-radius:calc(var(--ual-native-radius,8px) - 2px);background:rgba(128,128,128,.12)}
+.row{display:flex;gap:.6em;align-items:flex-start}
+.icon{width:2.4em;height:2.4em;flex:none;border-radius:6px;object-fit:cover}
+.title{font-weight:700;font-size:1.05em}
+.body{opacity:.9;font-size:.92em}
+.meta{font-size:.8em;opacity:.7}
+.cta{align-self:flex-start;font-weight:600;font-size:.9em;padding:.35em .8em;border-radius:999px;background:var(--ual-native-accent,#2563eb);color:var(--ual-native-accent-text,#fff)}
+.price{font-weight:600}
+.layout-list{flex-direction:row;align-items:flex-start}
+.layout-list .main{width:35%;max-width:180px;flex:none}
+.layout-list .text{display:flex;flex-direction:column;gap:.35em;min-width:0}
+.layout-compact .main{display:none}
+`;
+function el(tag, cls, text) {
+  const e = document.createElement(tag);
+  if (cls) e.className = cls;
+  if (text != null) e.textContent = text;
+  return e;
+}
+function image(i, cls, alt) {
+  const im = el("img", cls);
+  im.src = i.src;
+  im.alt = alt || "";
+  im.loading = "lazy";
+  im.referrerPolicy = "strict-origin-when-cross-origin";
+  if (i.width && i.height) {
+    im.width = i.width;
+    im.height = i.height;
+  }
+  return im;
+}
+function renderNative(container, ad, { onClick } = {}) {
+  const n = ad.native;
+  const host = el("div", "ual-native");
+  const root = host.attachShadow ? host.attachShadow({ mode: "open" }) : host;
+  const style = document.createElement("style");
+  style.textContent = STYLE;
+  root.appendChild(style);
+  const card = ad.clickUrl ? el("a", `card layout-${n.layout}`) : el("div", `card layout-${n.layout}`);
+  if (ad.clickUrl) {
+    card.href = ad.clickUrl;
+    card.target = "_blank";
+    card.rel = "noopener noreferrer sponsored nofollow";
+    card.addEventListener("click", () => {
+      if (onClick) onClick();
+    });
+  }
+  card.appendChild(el("span", "label", n.label));
+  if (n.image) card.appendChild(image(n.image, "main", n.title));
+  const text = el("div", "text");
+  const head = el("div", "row");
+  if (n.icon) head.appendChild(image(n.icon, "icon", ""));
+  const titles = el("div");
+  titles.appendChild(el("div", "title", n.title));
+  if (n.sponsoredBy) titles.appendChild(el("div", "meta", n.sponsoredBy));
+  head.appendChild(titles);
+  text.appendChild(head);
+  if (n.body) text.appendChild(el("div", "body", n.body));
+  const meta = [n.displayUrl, n.rating !== null ? `\u2605 ${n.rating}` : ""].filter(Boolean).join(" \xB7 ");
+  if (meta) text.appendChild(el("div", "meta", meta));
+  if (n.price) text.appendChild(el("div", "price", n.price));
+  if (n.cta) text.appendChild(el("span", "cta", n.cta));
+  card.appendChild(text);
+  root.appendChild(card);
+  container.innerHTML = "";
+  container.appendChild(host);
+  return { el: host, destroy: () => host.remove() };
+}
+
+// src/core/video.js
+var QUARTILES = [["firstQuartile", 0.25], ["midpoint", 0.5], ["thirdQuartile", 0.75]];
+var QUARTILE_NAMES = ["firstQuartile", "midpoint", "thirdQuartile", "complete"];
+var PLAY_THRESHOLD = 0.5;
+function quartileHits(fired, currentTime, duration) {
+  if (!(duration > 0) || !(currentTime >= 0)) return [];
+  const f = currentTime / duration;
+  const hits = [];
+  for (const [name, at] of QUARTILES) {
+    if (f >= at && !fired.has(name)) {
+      fired.add(name);
+      hits.push(name);
+    }
+  }
+  return hits;
+}
+function normalizeVideo(raw, safeUrl2) {
+  const src = safeUrl2(raw.src);
+  if (!src) return { ok: false, reason: "video: src non valido (ammessi solo http e https)" };
+  return { ok: true, video: { src, poster: safeUrl2(raw.poster, true) || "", mime: typeof raw.mime === "string" && /^video\/[\w.+-]+$/.test(raw.mime) ? raw.mime : "" } };
+}
+function btn(label) {
+  const b = document.createElement("button");
+  b.type = "button";
+  b.textContent = label;
+  b.style.cssText = "position:absolute;right:8px;bottom:8px;z-index:2;padding:4px 10px;border:0;border-radius:999px;background:rgba(0,0,0,.65);color:#fff;font:600 12px/1.4 system-ui,sans-serif;cursor:pointer";
+  return b;
+}
+function renderVideo(container, ad, { onClick, onEvent, onError } = {}) {
+  const wrap = document.createElement("div");
+  wrap.className = "ual-video";
+  wrap.style.cssText = `position:relative;display:block;margin:0 auto;width:${ad.width}px;max-width:100%;aspect-ratio:${ad.width}/${ad.height};background:#000;overflow:hidden`;
+  const v = document.createElement("video");
+  v.muted = true;
+  v.defaultMuted = true;
+  v.playsInline = true;
+  v.setAttribute("playsinline", "");
+  v.preload = "metadata";
+  v.disablePictureInPicture = true;
+  v.controls = false;
+  v.style.cssText = "display:block;width:100%;height:100%;object-fit:contain";
+  if (ad.video.poster) v.poster = ad.video.poster;
+  const source = document.createElement("source");
+  source.src = ad.video.src;
+  if (ad.video.mime) source.type = ad.video.mime;
+  v.appendChild(source);
+  wrap.appendChild(v);
+  const label = document.createElement("span");
+  label.textContent = "Advertisement";
+  label.style.cssText = "position:absolute;left:8px;top:8px;z-index:2;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.55);color:#fff;font:600 11px/1.4 system-ui,sans-serif";
+  wrap.appendChild(label);
+  if (ad.clickUrl) {
+    const a = document.createElement("a");
+    a.href = ad.clickUrl;
+    a.target = "_blank";
+    a.rel = "noopener noreferrer sponsored nofollow";
+    a.setAttribute("aria-label", "Open the advertiser page");
+    a.style.cssText = "position:absolute;inset:0;z-index:1";
+    a.addEventListener("click", () => {
+      if (onClick) onClick();
+    });
+    wrap.appendChild(a);
+  }
+  const sound = btn("Sound on");
+  sound.setAttribute("aria-label", "Turn sound on");
+  sound.addEventListener("click", () => {
+    v.muted = !v.muted;
+    sound.textContent = v.muted ? "Sound on" : "Sound off";
+    sound.setAttribute("aria-label", v.muted ? "Turn sound on" : "Turn sound off");
+  });
+  wrap.appendChild(sound);
+  const trackers = ad.trackers || {};
+  const fired = /* @__PURE__ */ new Set();
+  let started = false;
+  const emit = (name, urls) => {
+    fire(urls);
+    if (onEvent) onEvent(name);
+  };
+  v.addEventListener("playing", () => {
+    if (!started) {
+      started = true;
+      emit("start", trackers.start);
+    }
+  });
+  v.addEventListener("timeupdate", () => {
+    quartileHits(fired, v.currentTime, v.duration).forEach((n) => emit(n, trackers.quartile && trackers.quartile[n]));
+  });
+  v.addEventListener("ended", () => {
+    quartileHits(fired, v.duration, v.duration).forEach((n) => emit(n, trackers.quartile && trackers.quartile[n]));
+    if (!fired.has("complete")) {
+      fired.add("complete");
+      emit("complete", trackers.quartile && trackers.quartile.complete);
+    }
+  });
+  v.addEventListener("error", () => {
+    if (onError) onError(new Error("video: file non riproducibile"));
+  });
+  let inView = false;
+  const sync = () => {
+    if (v.ended) return;
+    if (inView && document.visibilityState === "visible") {
+      const p = v.play();
+      if (p && p.catch) p.catch(() => {
+      });
+    } else v.pause();
+  };
+  const io = "IntersectionObserver" in window ? new IntersectionObserver((entries) => {
+    entries.forEach((en) => {
+      inView = en.intersectionRatio >= PLAY_THRESHOLD;
+    });
+    sync();
+  }, { threshold: [0, PLAY_THRESHOLD, 1] }) : null;
+  if (io) io.observe(wrap);
+  document.addEventListener("visibilitychange", sync);
+  container.innerHTML = "";
+  container.appendChild(wrap);
+  return {
+    el: wrap,
+    destroy: () => {
+      if (io) io.disconnect();
+      document.removeEventListener("visibilitychange", sync);
+      v.pause();
+      v.removeAttribute("src");
+      source.remove();
+      v.load();
+      wrap.remove();
+    }
+  };
+}
+
 // src/core/render.js
 var DEFAULT_SANDBOX = "allow-scripts allow-popups allow-popups-to-escape-sandbox";
 var MAX_DIM = 2e3;
@@ -321,12 +562,20 @@ function safeUrl(u, allowDataImage) {
 function cleanList(list) {
   return (Array.isArray(list) ? list : []).map((u) => safeUrl(u)).filter(Boolean);
 }
+function cleanCustom(custom) {
+  const out = {};
+  if (!custom || typeof custom !== "object") return out;
+  Object.keys(custom).slice(0, 20).forEach((name) => {
+    if (/^[\w-]{1,40}$/.test(name)) out[name] = cleanList(custom[name]);
+  });
+  return out;
+}
 function normalizeAd(raw) {
   if (!raw || typeof raw !== "object") return { ok: false, reason: "annuncio non valido" };
   const type = raw.type || (raw.url ? "url" : raw.src ? "image" : "html");
   const width = dim(raw.width);
   const height = dim(raw.height);
-  if (!width || !height) return { ok: false, reason: `dimensioni non valide (${raw.width}x${raw.height}, max ${MAX_DIM})` };
+  if (type !== "native" && (!width || !height)) return { ok: false, reason: `dimensioni non valide (${raw.width}x${raw.height}, max ${MAX_DIM})` };
   const t = raw.trackers || {};
   const ad = {
     type,
@@ -334,7 +583,14 @@ function normalizeAd(raw) {
     height,
     alt: raw.alt == null ? void 0 : String(raw.alt),
     clickUrl: safeUrl(raw.clickUrl) || "",
-    trackers: { impression: cleanList(t.impression), viewable: cleanList(t.viewable), click: cleanList(t.click) },
+    trackers: {
+      impression: cleanList(t.impression),
+      viewable: cleanList(t.viewable),
+      click: cleanList(t.click),
+      start: cleanList(t.start),
+      quartile: Object.fromEntries(QUARTILE_NAMES.map((n) => [n, cleanList(t.quartile && t.quartile[n])])),
+      custom: cleanCustom(t.custom)
+    },
     sandbox: typeof raw.sandbox === "string" ? raw.sandbox : void 0
   };
   if (type === "image") {
@@ -346,6 +602,14 @@ function normalizeAd(raw) {
   } else if (type === "html") {
     if (typeof raw.html !== "string" || !raw.html) return { ok: false, reason: "html mancante" };
     ad.html = raw.html;
+  } else if (type === "native") {
+    const n = normalizeNative(raw.native, safeUrl);
+    if (!n.ok) return n;
+    ad.native = n.native;
+  } else if (type === "video") {
+    const v = normalizeVideo(raw, safeUrl);
+    if (!v.ok) return v;
+    ad.video = v.video;
   } else {
     return { ok: false, reason: "tipo sconosciuto: " + type };
   }
@@ -380,7 +644,8 @@ window.UALExt={
   expand:function(w,h){s({cmd:'resize',w:w,h:h,expanded:true});},
   collapse:function(){s({cmd:'collapse'});},
   close:function(){s({cmd:'close'});},
-  click:function(){s({cmd:'click'});if(window.clickTag)window.open(window.clickTag,'_blank');}
+  click:function(){s({cmd:'click'});if(window.clickTag)window.open(window.clickTag,'_blank');},
+  track:function(n){s({cmd:'track',name:String(n)});}
 };
 })();</script>`;
 }
@@ -423,6 +688,11 @@ function renderInFrame(container, ad, { slotId, onClick, onClose } = {}) {
       fire(ad.trackers && ad.trackers.click);
       if (onClick) onClick();
     },
+    // UALExt.track(nome): solo i nomi dichiarati dall'ad server nella risposta
+    onTrack: (name) => {
+      const custom = ad.trackers && ad.trackers.custom;
+      if (typeof name === "string" && custom && Object.hasOwn(custom, name)) fire(custom[name]);
+    },
     onClose
   });
   container.innerHTML = "";
@@ -458,12 +728,42 @@ function onMessage(e) {
     case "click":
       f.onClick();
       break;
+    case "track":
+      f.onTrack(d.name);
+      break;
     default:
   }
 }
 
+// src/core/sticky.js
+var STICKY_MAX_SCREEN_SHARE = 0.3;
+var STICKY_POSITIONS = ["bottom", "top"];
+function stickyAllowed(adHeight, viewportHeight) {
+  return adHeight > 0 && viewportHeight > 0 && adHeight <= viewportHeight * STICKY_MAX_SCREEN_SHARE;
+}
+function stickyPosition(cfg) {
+  if (!cfg) return null;
+  const p = typeof cfg === "string" ? cfg : cfg && typeof cfg === "object" ? cfg.position : "bottom";
+  return STICKY_POSITIONS.includes(p) ? p : "bottom";
+}
+function applySticky(el2, position, onClose) {
+  const saved = el2.style.cssText;
+  el2.style.cssText += `;position:fixed;left:0;right:0;${position}:0;z-index:2147483000;text-align:center;margin:0;padding:0`;
+  const close = document.createElement("button");
+  close.type = "button";
+  close.textContent = "\xD7";
+  close.setAttribute("aria-label", "Close advertisement");
+  close.style.cssText = `position:absolute;right:6px;${position === "bottom" ? "top" : "bottom"}:-26px;width:26px;height:26px;border:0;border-radius:6px 6px 0 0;background:rgba(0,0,0,.7);color:#fff;font:16px/26px system-ui,sans-serif;cursor:pointer`;
+  close.addEventListener("click", onClose);
+  el2.appendChild(close);
+  return () => {
+    el2.style.cssText = saved;
+    close.remove();
+  };
+}
+
 // src/core/viewability.js
-function watchViewability(el, { threshold = 0.5, durationMs = 1e3 } = {}, onViewable) {
+function watchViewability(el2, { threshold = 0.5, durationMs = 1e3 } = {}, onViewable) {
   if (!("IntersectionObserver" in window)) return () => {
   };
   let timer = null;
@@ -490,7 +790,7 @@ function watchViewability(el, { threshold = 0.5, durationMs = 1e3 } = {}, onView
   }, { threshold: [0, threshold, 1] });
   const onVis = () => document.visibilityState === "visible" && inView ? start() : stop();
   document.addEventListener("visibilitychange", onVis);
-  io.observe(el);
+  io.observe(el2);
   function cleanup() {
     stop();
     io.disconnect();
@@ -584,50 +884,50 @@ function createEngine(adapterRegistry) {
   function scan(root) {
     const list = [];
     if (root.nodeType === 1 && root.matches && root.matches("[data-ad-slot]")) list.push(root);
-    if (root.querySelectorAll) root.querySelectorAll("[data-ad-slot]").forEach((el) => list.push(el));
+    if (root.querySelectorAll) root.querySelectorAll("[data-ad-slot]").forEach((el2) => list.push(el2));
     list.forEach(maybeRegister);
   }
-  function maybeRegister(el) {
-    const id = el.dataset.ualId;
-    if (!id) return register(el);
+  function maybeRegister(el2) {
+    const id = el2.dataset.ualId;
+    if (!id) return register(el2);
     if (slots.has(id)) return;
-    if (FINAL_STATUS.has(el.dataset.ualStatus)) return;
-    resetEl(el);
-    register(el);
+    if (FINAL_STATUS.has(el2.dataset.ualStatus)) return;
+    resetEl(el2);
+    register(el2);
   }
-  function resetEl(el) {
-    delete el.dataset.ualId;
-    delete el.dataset.ualStatus;
-    el.querySelectorAll(":scope > .ual-label, :scope > .ual-creative").forEach((n) => n.remove());
-    el.classList.remove("ual-slot", "ual-filled");
-    el.style.display = "";
-    el.style.minHeight = "";
+  function resetEl(el2) {
+    delete el2.dataset.ualId;
+    delete el2.dataset.ualStatus;
+    el2.querySelectorAll(":scope > .ual-label, :scope > .ual-creative").forEach((n) => n.remove());
+    el2.classList.remove("ual-slot", "ual-filled");
+    el2.style.display = "";
+    el2.style.minHeight = "";
   }
-  function register(el) {
-    const name = el.getAttribute("data-ad-slot");
+  function register(el2) {
+    const name = el2.getAttribute("data-ad-slot");
     const slotCfg = cfg.slots[name];
-    el.dataset.ualId = name + "#" + ++seq2;
+    el2.dataset.ualId = name + "#" + ++seq2;
     if (!slotCfg) {
       log("Slot non configurato, ignorato:", name);
-      el.dataset.ualStatus = "unconfigured";
+      el2.dataset.ualStatus = "unconfigured";
       return;
     }
     if (slotCfg.enabled === false) {
       log("Slot disabilitato:", name);
-      el.dataset.ualStatus = "disabled";
-      collapse(el, slotCfg);
+      el2.dataset.ualStatus = "disabled";
+      collapse(el2, slotCfg);
       return;
     }
     let params = {};
     try {
-      params = el.dataset.adParams ? JSON.parse(el.dataset.adParams) : {};
+      params = el2.dataset.adParams ? JSON.parse(el2.dataset.adParams) : {};
     } catch (e) {
-      warn("data-ad-params non \xE8 JSON valido", el);
+      warn("data-ad-params non \xE8 JSON valido", el2);
     }
     const slot = {
-      instanceId: el.dataset.ualId,
+      instanceId: el2.dataset.ualId,
       name,
-      el,
+      el: el2,
       cfg: slotCfg,
       params,
       status: "idle",
@@ -639,23 +939,23 @@ function createEngine(adapterRegistry) {
     prepare(slot);
     bus.emit("slotRegistered", publicSlot(slot));
     const lazy = slotCfg.lazy !== void 0 ? slotCfg.lazy : cfg.lazy.enabled;
-    if (lazy && lazyIO) lazyIO.observe(el);
+    if (lazy && lazyIO) lazyIO.observe(el2);
     else enqueue(slot);
   }
   function prepare(slot) {
-    const { el, cfg: c } = slot;
-    if (c.minHeight) el.style.minHeight = c.minHeight + "px";
-    el.classList.add("ual-slot");
+    const { el: el2, cfg: c } = slot;
+    if (c.minHeight) el2.style.minHeight = c.minHeight + "px";
+    el2.classList.add("ual-slot");
     if (c.label) {
       const l = document.createElement("div");
       l.className = "ual-label";
       l.textContent = c.label;
       l.style.cssText = "font:10px/1.4 sans-serif;color:#888;text-align:center;text-transform:uppercase;letter-spacing:.05em";
-      el.appendChild(l);
+      el2.appendChild(l);
     }
     const box = document.createElement("div");
     box.className = "ual-creative";
-    el.appendChild(box);
+    el2.appendChild(box);
     slot.box = box;
   }
   function observeDom() {
@@ -780,7 +1080,7 @@ function createEngine(adapterRegistry) {
         const res = await withTimeout(adapter.request(req, pcfg, c), timeout, {});
         group.forEach((s, i) => {
           const raw = res[req[i].id];
-          if (!raw || !raw.html && !raw.src && !raw.url) {
+          if (!raw || !raw.html && !raw.src && !raw.url && !raw.native) {
             unfilled.push(s);
             return;
           }
@@ -792,14 +1092,18 @@ function createEngine(adapterRegistry) {
             return;
           }
           const ad = n.ad;
-          const handle = renderInFrame(s.box, ad, {
+          const onClick = () => {
+            fire(ad.trackers.click);
+            bus.emit("slotClick", publicSlot(s));
+          };
+          const handle = ad.type === "native" ? renderNative(s.box, ad, { onClick }) : ad.type === "video" ? renderVideo(s.box, ad, {
+            onClick,
+            onEvent: (name) => bus.emit("videoEvent", { ...publicSlot(s), event: name }),
+            onError: (error) => bus.emit("error", { provider: pid, slot: s.name, error })
+          }) : renderInFrame(s.box, ad, {
             slotId: s.instanceId,
             onClick: () => bus.emit("slotClick", publicSlot(s)),
-            onClose: () => {
-              destroySlot(s);
-              s.el.dataset.ualStatus = "closed";
-              collapse(s.el, s.cfg, true);
-            }
+            onClose: () => closeSlot(s)
           });
           s.cleanup.push(handle.destroy);
           fire(ad.trackers.impression);
@@ -826,6 +1130,14 @@ function createEngine(adapterRegistry) {
     s.el.style.display = "";
     bus.emit("slotRendered", { ...publicSlot(s), width: info.width, height: info.height, meta: info.meta });
     const vcfg = { ...cfg.viewability, ...s.cfg.viewability };
+    if (info.ad && info.ad.type === "video" && !(s.cfg.viewability && s.cfg.viewability.durationMs !== void 0)) {
+      vcfg.durationMs = Math.max(vcfg.durationMs, 2e3);
+    }
+    const pos = stickyPosition(s.cfg.sticky);
+    if (pos && info.height) {
+      if (stickyAllowed(info.height, window.innerHeight)) s.cleanup.push(applySticky(s.el, pos, () => closeSlot(s)));
+      else warn(`Slot "${s.name}": sticky ignorato, l'annuncio (${info.height}px) supera il 30% dello schermo`);
+    }
     const area = (info.width || 0) * (info.height || 0);
     if (area > LARGE_AD_AREA && !(s.cfg.viewability && s.cfg.viewability.threshold !== void 0)) {
       vcfg.threshold = Math.min(vcfg.threshold, 0.3);
@@ -845,11 +1157,11 @@ function createEngine(adapterRegistry) {
     collapse(s.el, s.cfg);
     bus.emit("slotEmpty", publicSlot(s));
   }
-  function collapse(el, c, force) {
+  function collapse(el2, c, force) {
     const doCollapse = force || (c.collapseEmpty !== void 0 ? c.collapseEmpty : cfg && cfg.collapseEmpty);
     if (doCollapse) {
-      el.style.display = "none";
-      el.style.minHeight = "";
+      el2.style.display = "none";
+      el2.style.minHeight = "";
     }
   }
   function clear(s) {
@@ -897,6 +1209,11 @@ function createEngine(adapterRegistry) {
     s.consentSkipped = false;
     enqueue(s);
   }
+  function closeSlot(s) {
+    destroySlot(s);
+    s.el.dataset.ualStatus = "closed";
+    collapse(s.el, s.cfg, true);
+  }
   function destroySlot(s) {
     callDestroy(s);
     clear(s);
@@ -1261,7 +1578,7 @@ var house_default = {
 };
 
 // src/lib.js
-var version = true ? "0.1.1" : "dev";
+var version = true ? "0.2.0" : "dev";
 function createUal() {
   const registry = new Map(Object.entries({
     json: json_default,

package/dist/index.d.ts

@@ -143,6 +143,11 @@ export interface SlotConfig<P extends string = string> {
   maxRefresh?: number;
   enabled?: boolean;
   viewability?: ViewabilityConfig;
+  /**
+   * Banner ancorato al bordo dello schermo con pulsante di chiusura. Solo se l'annuncio occupa al massimo
+   * il 30% dell'altezza dello schermo (Better Ads); altrimenti resta nel flusso della pagina.
+   */
+  sticky?: boolean | 'top' | 'bottom' | { position?: 'top' | 'bottom' };
 }
 
 export interface PageRule {
@@ -208,6 +213,8 @@ export interface UalEventMap {
   slotEmpty: SlotInfo;
   slotViewable: SlotInfo;
   slotClick: SlotInfo;
+  /** Video: `start`, `firstQuartile`, `midpoint`, `thirdQuartile`, `complete`. */
+  videoEvent: SlotInfo & { event: 'start' | 'firstQuartile' | 'midpoint' | 'thirdQuartile' | 'complete' };
   error: { provider?: string; slot?: string; error: Error };
 }
 
@@ -230,15 +237,50 @@ export interface AdapterContext {
   debug: boolean;
 }
 
+/** Asset di una creatività `native`: sono dati, mai HTML. UAL li disegna con l'etichetta "Sponsored". */
+export interface NativeAssets {
+  /** Obbligatorio, massimo 150 caratteri (il resto viene troncato). */
+  title: string;
+  body?: string;
+  image?: string | { src: string; width?: number; height?: number };
+  icon?: string | { src: string; width?: number; height?: number };
+  sponsoredBy?: string;
+  cta?: string;
+  displayUrl?: string;
+  price?: string;
+  /** 0-5 */
+  rating?: number;
+  layout?: 'card' | 'list' | 'compact';
+  /** Testo dell'etichetta (default "Sponsored"); l'etichetta c'è sempre. */
+  label?: string;
+}
+
 export interface AdResult {
-  type?: 'image' | 'html' | 'url';
+  type?: 'image' | 'html' | 'url' | 'native' | 'video';
+  /** image: file immagine. video: file .mp4/.webm. */
   src?: string;
   html?: string;
   url?: string;
-  width: number;
-  height: number;
+  native?: NativeAssets;
+  /** video */
+  poster?: string;
+  /** video, es. `video/mp4` */
+  mime?: string;
+  /** Obbligatori, tranne per `native` (segue la larghezza della colonna). */
+  width?: number;
+  height?: number;
   clickUrl?: string;
-  trackers?: { impression?: string[]; viewable?: string[]; click?: string[] };
+  trackers?: {
+    impression?: string[];
+    viewable?: string[];
+    click?: string[];
+    /** video: alla prima riproduzione */
+    start?: string[];
+    /** video */
+    quartile?: { firstQuartile?: string[]; midpoint?: string[]; thirdQuartile?: string[]; complete?: string[] };
+    /** Partono quando la creatività HTML chiama `UALExt.track(nome)`. */
+    custom?: Record<string, string[]>;
+  };
   sandbox?: string;
 }