@zerocost/sdk 0.5.0 → 0.7.0

package/dist/index.cjs

@@ -146,6 +146,7 @@ var POSITION_STYLES = {
   "sidebar-left": "position:fixed;top:50%;left:24px;transform:translateY(-50%);z-index:9999;",
   "sidebar-right": "position:fixed;top:50%;right:24px;transform:translateY(-50%);z-index:9999;"
 };
+var FORMAT_PRIORITY = ["video-widget", "sponsored-card", "sidebar-display", "tooltip-ad", "inline-text"];
 var WidgetModule = class {
   constructor(client) {
     this.client = client;
@@ -154,10 +155,14 @@ var WidgetModule = class {
   async autoInjectWithConfig(display) {
     try {
       const configs = this.normalizeConfigs(display);
-      const enabledCount = Object.values(configs).filter((c) => c.enabled).length;
-      this.client.log(`Auto-inject: ${enabledCount} ad format(s) enabled. No custom component needed \u2014 ads render automatically.`);
-      await this.mountFormats(configs);
-      this.client.log("\u2713 Ad slots injected successfully. Ads will appear once inventory is available.");
+      const chosen = this.pickOneFormat(configs);
+      if (!chosen) {
+        this.client.log("No ad formats enabled. Skipping injection.");
+        return;
+      }
+      this.client.log(`Auto-inject: rendering "${chosen.format}" only.`);
+      await this.mountSingleFormat(chosen.format, chosen.config);
+      this.client.log("\u2713 Ad slot injected.");
     } catch (err) {
       this.client.log(`Widget autoInject error: ${err}`);
     }
@@ -166,15 +171,18 @@ var WidgetModule = class {
     try {
       this.client.log("Fetching ad placements from server...");
       const { display } = await this.client.request("/get-placements");
-      const configs = this.normalizeConfigs(display);
-      const enabledCount = Object.values(configs).filter((c) => c.enabled).length;
-      this.client.log(`Auto-inject: ${enabledCount} ad format(s) enabled. No custom component needed \u2014 ads render automatically.`);
-      await this.mountFormats(configs);
-      this.client.log("\u2713 Ad slots injected successfully. Ads will appear once inventory is available.");
+      await this.autoInjectWithConfig(display);
     } catch (err) {
       this.client.log(`Widget autoInject error: ${err}`);
     }
   }
+  pickOneFormat(configs) {
+    for (const fmt of FORMAT_PRIORITY) {
+      const cfg = configs[fmt];
+      if (cfg?.enabled) return { format: fmt, config: cfg };
+    }
+    return null;
+  }
   normalizeConfigs(display) {
     if (display && "video-widget" in display) {
       return display;
@@ -182,30 +190,25 @@ var WidgetModule = class {
     const pos = display?.position || "bottom-right";
     const theme = display?.theme || "dark";
     return {
-      "video-widget": { position: pos, theme, autoplay: false, enabled: true },
-      "tooltip-ad": { position: pos, theme, autoplay: false, enabled: true },
-      "sponsored-card": { position: pos, theme, autoplay: false, enabled: true },
-      "inline-text": { position: "after-paragraph-1", theme, autoplay: false, enabled: true }
+      "video-widget": { position: pos, theme, autoplay: true, enabled: true },
+      "tooltip-ad": { position: pos, theme, autoplay: false, enabled: false },
+      "sponsored-card": { position: pos, theme, autoplay: false, enabled: false },
+      "inline-text": { position: "after-paragraph-1", theme, autoplay: false, enabled: false }
     };
   }
-  async mountFormats(configs) {
-    for (const [format, cfg] of Object.entries(configs)) {
-      if (!cfg.enabled) continue;
-      const elId = `zerocost-${format}`;
-      if (document.getElementById(elId)) continue;
-      const el = document.createElement("div");
-      el.id = elId;
-      el.setAttribute("data-zerocost", "");
-      el.setAttribute("data-format", format);
-      if (format === "inline-text") {
-        continue;
-      }
-      const posStyle = POSITION_STYLES[cfg.position] || POSITION_STYLES["bottom-right"];
-      const maxW = format === "video-widget" ? "max-width:200px;" : format === "sponsored-card" || format === "sidebar-display" ? "max-width:176px;" : "max-width:320px;";
-      el.setAttribute("style", posStyle + maxW);
-      document.body.appendChild(el);
-      await this.mount(elId, { format, refreshInterval: 30, theme: cfg.theme, autoplay: cfg.autoplay });
-    }
+  async mountSingleFormat(format, cfg) {
+    const elId = `zerocost-${format}`;
+    if (document.getElementById(elId)) return;
+    if (format === "inline-text") return;
+    const el = document.createElement("div");
+    el.id = elId;
+    el.setAttribute("data-zerocost", "");
+    el.setAttribute("data-format", format);
+    const posStyle = POSITION_STYLES[cfg.position] || POSITION_STYLES["bottom-right"];
+    const maxW = format === "video-widget" ? "max-width:200px;" : format === "sponsored-card" || format === "sidebar-display" ? "max-width:176px;" : "max-width:320px;";
+    el.setAttribute("style", posStyle + maxW);
+    document.body.appendChild(el);
+    await this.mount(elId, { format, refreshInterval: 30, theme: cfg.theme, autoplay: cfg.autoplay ?? true });
   }
   async mount(targetElementId, options = {}) {
     const el = document.getElementById(targetElementId);
@@ -238,6 +241,12 @@ var WidgetModule = class {
         }
         el.innerHTML = data.html;
         el.setAttribute("data-zerocost-ad-id", ad.id);
+        const video = el.querySelector("video");
+        if (video) {
+          video.muted = true;
+          video.play().catch(() => {
+          });
+        }
         const ctas = el.querySelectorAll("[data-zc-cta]");
         ctas.forEach((cta) => {
           cta.addEventListener("click", () => {
@@ -308,7 +317,7 @@ var WidgetModule = class {
     return `
       <div style="width:200px;aspect-ratio:9/16;border-radius:12px;border:1px solid ${border};overflow:hidden;position:relative;font-family:system-ui,-apple-system,sans-serif;box-shadow:0 8px 32px rgba(0,0,0,${isDark ? "0.5" : "0.15"});">
         <button data-zc-close style="position:absolute;top:8px;right:8px;z-index:20;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);border:none;color:rgba(255,255,255,0.7);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;">\u2715</button>
-        ${hasVideo ? `<video src="${this.esc(videoSrc)}" ${autoplay ? "autoplay" : ""} muted loop playsinline style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;"></video>` : `<img src="${this.esc(videoSrc)}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;" />`}
+        ${hasVideo ? `<video src="${this.esc(videoSrc)}" autoplay muted loop playsinline preload="auto" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;"></video>` : `<img src="${this.esc(videoSrc)}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;" />`}
         <div style="position:absolute;inset-inline:0;bottom:0;padding:12px;background:linear-gradient(to top,rgba(0,0,0,0.9),rgba(0,0,0,0.5),transparent);z-index:10;">
           <div style="font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.5);margin-bottom:2px;">Sponsored by ${this.esc(sponsor)}</div>
           <div style="color:#fff;font-weight:600;font-size:12px;line-height:1.3;">${this.esc(ad.description || "")}</div>
@@ -327,7 +336,8 @@ var WidgetModule = class {
     const fgFaint = isDark ? "#888" : "#999";
     const border = isDark ? "#333" : "#e0e0e0";
     return `
-      <div style="max-width:320px;border-radius:8px;padding:12px;box-shadow:0 8px 32px rgba(0,0,0,${isDark ? "0.4" : "0.12"});background:${bg};border:1px solid ${border};font-family:system-ui,-apple-system,sans-serif;">
+      <div style="max-width:320px;border-radius:8px;padding:12px;box-shadow:0 8px 32px rgba(0,0,0,${isDark ? "0.4" : "0.12"});background:${bg};border:1px solid ${border};font-family:system-ui,-apple-system,sans-serif;position:relative;">
+        <button data-zc-close style="position:absolute;top:6px;right:6px;z-index:20;width:20px;height:20px;border-radius:50%;background:${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)"};border:none;color:${fgFaint};cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;">\u2715</button>
         <div style="font-size:10px;font-family:monospace;margin-bottom:6px;display:flex;align-items:center;color:${fgFaint};">
           <span style="width:6px;height:6px;border-radius:50%;background:#22c55e;margin-right:6px;display:inline-block;"></span>
           Sponsored
@@ -348,13 +358,11 @@ var WidgetModule = class {
     const fg = isDark ? "#fff" : "#111";
     const fgFaint = isDark ? "#888" : "#999";
     const border = isDark ? "#333" : "#e0e0e0";
-    const iconBg = isDark ? "#0a0a0a" : "#f5f5f5";
-    const initial = (ad.title || "A").charAt(0).toUpperCase();
     return `
-      <div style="width:176px;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,${isDark ? "0.4" : "0.12"});background:${bg};border:1px solid ${border};font-family:system-ui,-apple-system,sans-serif;">
+      <div style="width:176px;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,${isDark ? "0.4" : "0.12"});background:${bg};border:1px solid ${border};font-family:system-ui,-apple-system,sans-serif;position:relative;">
+        <button data-zc-close style="position:absolute;top:6px;right:6px;z-index:20;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);border:none;color:rgba(255,255,255,0.7);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;">\u2715</button>
         ${ad.image_url ? `<img src="${this.esc(ad.image_url)}" style="width:100%;height:80px;object-fit:cover;display:block;" />` : `<div style="height:80px;background:linear-gradient(135deg,rgba(249,115,22,0.2),rgba(236,72,153,0.2));"></div>`}
         <div style="padding:12px;">
-          <div style="width:24px;height:24px;border-radius:4px;background:${iconBg};border:1px solid ${border};display:flex;align-items:center;justify-content:center;font-weight:700;font-size:9px;color:${fg};margin-bottom:8px;">${initial}</div>
           <div style="font-weight:700;font-size:12px;color:${fg};margin-bottom:2px;letter-spacing:-0.01em;">${this.esc(ad.title)}</div>
           <div style="font-size:10px;color:${fgFaint};line-height:1.4;margin-bottom:12px;">${this.esc(ad.description || "")}</div>
           <a href="${this.esc(ad.landing_url)}" target="_blank" rel="noopener" data-zc-cta style="display:block;width:100%;padding:6px 0;border:1px solid ${border};border-radius:4px;font-size:10px;font-weight:500;color:${fg};text-align:center;text-decoration:none;cursor:pointer;">${this.esc(ad.cta_text || "Learn More")}</a>
@@ -379,7 +387,8 @@ var WidgetModule = class {
     const initial = "\u25B2";
     const sponsor = ad.title?.split("\u2014")[0]?.trim() || ad.title || "Sponsor";
     return `
-      <div style="border-radius:8px;overflow:hidden;border:1px solid ${border};background:${bg};font-family:system-ui,-apple-system,sans-serif;max-width:100%;">
+      <div style="border-radius:8px;overflow:hidden;border:1px solid ${border};background:${bg};font-family:system-ui,-apple-system,sans-serif;max-width:100%;position:relative;">
+        <button data-zc-close style="position:absolute;top:6px;right:6px;z-index:20;width:20px;height:20px;border-radius:50%;background:${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)"};border:none;color:${fgFaint};cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;">\u2715</button>
         <div style="padding:8px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid ${headerBorder};">
           <span style="font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:${fgFaint};">Sponsored</span>
           <span style="font-size:9px;color:${fgFaint};">Ad \xB7 ${this.esc(sponsor)}</span>
@@ -768,6 +777,10 @@ var ZerocostSDK = class {
       this.core.log("Running in non-browser environment \u2014 skipping DOM injection.");
       return;
     }
+    const isIframe = window !== window.top;
+    if (isIframe) {
+      this.core.log("Running inside an iframe. Ads will still render if permissions allow.");
+    }
     this.core.log("Initializing... Ads will be auto-injected into the DOM. No custom component required.");
     try {
       const { display, dataCollection } = await this.core.request("/get-placements");

package/dist/index.js

@@ -117,6 +117,7 @@ var POSITION_STYLES = {
   "sidebar-left": "position:fixed;top:50%;left:24px;transform:translateY(-50%);z-index:9999;",
   "sidebar-right": "position:fixed;top:50%;right:24px;transform:translateY(-50%);z-index:9999;"
 };
+var FORMAT_PRIORITY = ["video-widget", "sponsored-card", "sidebar-display", "tooltip-ad", "inline-text"];
 var WidgetModule = class {
   constructor(client) {
     this.client = client;
@@ -125,10 +126,14 @@ var WidgetModule = class {
   async autoInjectWithConfig(display) {
     try {
       const configs = this.normalizeConfigs(display);
-      const enabledCount = Object.values(configs).filter((c) => c.enabled).length;
-      this.client.log(`Auto-inject: ${enabledCount} ad format(s) enabled. No custom component needed \u2014 ads render automatically.`);
-      await this.mountFormats(configs);
-      this.client.log("\u2713 Ad slots injected successfully. Ads will appear once inventory is available.");
+      const chosen = this.pickOneFormat(configs);
+      if (!chosen) {
+        this.client.log("No ad formats enabled. Skipping injection.");
+        return;
+      }
+      this.client.log(`Auto-inject: rendering "${chosen.format}" only.`);
+      await this.mountSingleFormat(chosen.format, chosen.config);
+      this.client.log("\u2713 Ad slot injected.");
     } catch (err) {
       this.client.log(`Widget autoInject error: ${err}`);
     }
@@ -137,15 +142,18 @@ var WidgetModule = class {
     try {
       this.client.log("Fetching ad placements from server...");
       const { display } = await this.client.request("/get-placements");
-      const configs = this.normalizeConfigs(display);
-      const enabledCount = Object.values(configs).filter((c) => c.enabled).length;
-      this.client.log(`Auto-inject: ${enabledCount} ad format(s) enabled. No custom component needed \u2014 ads render automatically.`);
-      await this.mountFormats(configs);
-      this.client.log("\u2713 Ad slots injected successfully. Ads will appear once inventory is available.");
+      await this.autoInjectWithConfig(display);
     } catch (err) {
       this.client.log(`Widget autoInject error: ${err}`);
     }
   }
+  pickOneFormat(configs) {
+    for (const fmt of FORMAT_PRIORITY) {
+      const cfg = configs[fmt];
+      if (cfg?.enabled) return { format: fmt, config: cfg };
+    }
+    return null;
+  }
   normalizeConfigs(display) {
     if (display && "video-widget" in display) {
       return display;
@@ -153,30 +161,25 @@ var WidgetModule = class {
     const pos = display?.position || "bottom-right";
     const theme = display?.theme || "dark";
     return {
-      "video-widget": { position: pos, theme, autoplay: false, enabled: true },
-      "tooltip-ad": { position: pos, theme, autoplay: false, enabled: true },
-      "sponsored-card": { position: pos, theme, autoplay: false, enabled: true },
-      "inline-text": { position: "after-paragraph-1", theme, autoplay: false, enabled: true }
+      "video-widget": { position: pos, theme, autoplay: true, enabled: true },
+      "tooltip-ad": { position: pos, theme, autoplay: false, enabled: false },
+      "sponsored-card": { position: pos, theme, autoplay: false, enabled: false },
+      "inline-text": { position: "after-paragraph-1", theme, autoplay: false, enabled: false }
     };
   }
-  async mountFormats(configs) {
-    for (const [format, cfg] of Object.entries(configs)) {
-      if (!cfg.enabled) continue;
-      const elId = `zerocost-${format}`;
-      if (document.getElementById(elId)) continue;
-      const el = document.createElement("div");
-      el.id = elId;
-      el.setAttribute("data-zerocost", "");
-      el.setAttribute("data-format", format);
-      if (format === "inline-text") {
-        continue;
-      }
-      const posStyle = POSITION_STYLES[cfg.position] || POSITION_STYLES["bottom-right"];
-      const maxW = format === "video-widget" ? "max-width:200px;" : format === "sponsored-card" || format === "sidebar-display" ? "max-width:176px;" : "max-width:320px;";
-      el.setAttribute("style", posStyle + maxW);
-      document.body.appendChild(el);
-      await this.mount(elId, { format, refreshInterval: 30, theme: cfg.theme, autoplay: cfg.autoplay });
-    }
+  async mountSingleFormat(format, cfg) {
+    const elId = `zerocost-${format}`;
+    if (document.getElementById(elId)) return;
+    if (format === "inline-text") return;
+    const el = document.createElement("div");
+    el.id = elId;
+    el.setAttribute("data-zerocost", "");
+    el.setAttribute("data-format", format);
+    const posStyle = POSITION_STYLES[cfg.position] || POSITION_STYLES["bottom-right"];
+    const maxW = format === "video-widget" ? "max-width:200px;" : format === "sponsored-card" || format === "sidebar-display" ? "max-width:176px;" : "max-width:320px;";
+    el.setAttribute("style", posStyle + maxW);
+    document.body.appendChild(el);
+    await this.mount(elId, { format, refreshInterval: 30, theme: cfg.theme, autoplay: cfg.autoplay ?? true });
   }
   async mount(targetElementId, options = {}) {
     const el = document.getElementById(targetElementId);
@@ -209,6 +212,12 @@ var WidgetModule = class {
         }
         el.innerHTML = data.html;
         el.setAttribute("data-zerocost-ad-id", ad.id);
+        const video = el.querySelector("video");
+        if (video) {
+          video.muted = true;
+          video.play().catch(() => {
+          });
+        }
         const ctas = el.querySelectorAll("[data-zc-cta]");
         ctas.forEach((cta) => {
           cta.addEventListener("click", () => {
@@ -279,7 +288,7 @@ var WidgetModule = class {
     return `
       <div style="width:200px;aspect-ratio:9/16;border-radius:12px;border:1px solid ${border};overflow:hidden;position:relative;font-family:system-ui,-apple-system,sans-serif;box-shadow:0 8px 32px rgba(0,0,0,${isDark ? "0.5" : "0.15"});">
         <button data-zc-close style="position:absolute;top:8px;right:8px;z-index:20;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);border:none;color:rgba(255,255,255,0.7);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;">\u2715</button>
-        ${hasVideo ? `<video src="${this.esc(videoSrc)}" ${autoplay ? "autoplay" : ""} muted loop playsinline style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;"></video>` : `<img src="${this.esc(videoSrc)}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;" />`}
+        ${hasVideo ? `<video src="${this.esc(videoSrc)}" autoplay muted loop playsinline preload="auto" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;"></video>` : `<img src="${this.esc(videoSrc)}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;" />`}
         <div style="position:absolute;inset-inline:0;bottom:0;padding:12px;background:linear-gradient(to top,rgba(0,0,0,0.9),rgba(0,0,0,0.5),transparent);z-index:10;">
           <div style="font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.5);margin-bottom:2px;">Sponsored by ${this.esc(sponsor)}</div>
           <div style="color:#fff;font-weight:600;font-size:12px;line-height:1.3;">${this.esc(ad.description || "")}</div>
@@ -298,7 +307,8 @@ var WidgetModule = class {
     const fgFaint = isDark ? "#888" : "#999";
     const border = isDark ? "#333" : "#e0e0e0";
     return `
-      <div style="max-width:320px;border-radius:8px;padding:12px;box-shadow:0 8px 32px rgba(0,0,0,${isDark ? "0.4" : "0.12"});background:${bg};border:1px solid ${border};font-family:system-ui,-apple-system,sans-serif;">
+      <div style="max-width:320px;border-radius:8px;padding:12px;box-shadow:0 8px 32px rgba(0,0,0,${isDark ? "0.4" : "0.12"});background:${bg};border:1px solid ${border};font-family:system-ui,-apple-system,sans-serif;position:relative;">
+        <button data-zc-close style="position:absolute;top:6px;right:6px;z-index:20;width:20px;height:20px;border-radius:50%;background:${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)"};border:none;color:${fgFaint};cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;">\u2715</button>
         <div style="font-size:10px;font-family:monospace;margin-bottom:6px;display:flex;align-items:center;color:${fgFaint};">
           <span style="width:6px;height:6px;border-radius:50%;background:#22c55e;margin-right:6px;display:inline-block;"></span>
           Sponsored
@@ -319,13 +329,11 @@ var WidgetModule = class {
     const fg = isDark ? "#fff" : "#111";
     const fgFaint = isDark ? "#888" : "#999";
     const border = isDark ? "#333" : "#e0e0e0";
-    const iconBg = isDark ? "#0a0a0a" : "#f5f5f5";
-    const initial = (ad.title || "A").charAt(0).toUpperCase();
     return `
-      <div style="width:176px;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,${isDark ? "0.4" : "0.12"});background:${bg};border:1px solid ${border};font-family:system-ui,-apple-system,sans-serif;">
+      <div style="width:176px;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,${isDark ? "0.4" : "0.12"});background:${bg};border:1px solid ${border};font-family:system-ui,-apple-system,sans-serif;position:relative;">
+        <button data-zc-close style="position:absolute;top:6px;right:6px;z-index:20;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);border:none;color:rgba(255,255,255,0.7);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;">\u2715</button>
         ${ad.image_url ? `<img src="${this.esc(ad.image_url)}" style="width:100%;height:80px;object-fit:cover;display:block;" />` : `<div style="height:80px;background:linear-gradient(135deg,rgba(249,115,22,0.2),rgba(236,72,153,0.2));"></div>`}
         <div style="padding:12px;">
-          <div style="width:24px;height:24px;border-radius:4px;background:${iconBg};border:1px solid ${border};display:flex;align-items:center;justify-content:center;font-weight:700;font-size:9px;color:${fg};margin-bottom:8px;">${initial}</div>
           <div style="font-weight:700;font-size:12px;color:${fg};margin-bottom:2px;letter-spacing:-0.01em;">${this.esc(ad.title)}</div>
           <div style="font-size:10px;color:${fgFaint};line-height:1.4;margin-bottom:12px;">${this.esc(ad.description || "")}</div>
           <a href="${this.esc(ad.landing_url)}" target="_blank" rel="noopener" data-zc-cta style="display:block;width:100%;padding:6px 0;border:1px solid ${border};border-radius:4px;font-size:10px;font-weight:500;color:${fg};text-align:center;text-decoration:none;cursor:pointer;">${this.esc(ad.cta_text || "Learn More")}</a>
@@ -350,7 +358,8 @@ var WidgetModule = class {
     const initial = "\u25B2";
     const sponsor = ad.title?.split("\u2014")[0]?.trim() || ad.title || "Sponsor";
     return `
-      <div style="border-radius:8px;overflow:hidden;border:1px solid ${border};background:${bg};font-family:system-ui,-apple-system,sans-serif;max-width:100%;">
+      <div style="border-radius:8px;overflow:hidden;border:1px solid ${border};background:${bg};font-family:system-ui,-apple-system,sans-serif;max-width:100%;position:relative;">
+        <button data-zc-close style="position:absolute;top:6px;right:6px;z-index:20;width:20px;height:20px;border-radius:50%;background:${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)"};border:none;color:${fgFaint};cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;">\u2715</button>
         <div style="padding:8px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid ${headerBorder};">
           <span style="font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:${fgFaint};">Sponsored</span>
           <span style="font-size:9px;color:${fgFaint};">Ad \xB7 ${this.esc(sponsor)}</span>
@@ -739,6 +748,10 @@ var ZerocostSDK = class {
       this.core.log("Running in non-browser environment \u2014 skipping DOM injection.");
       return;
     }
+    const isIframe = window !== window.top;
+    if (isIframe) {
+      this.core.log("Running inside an iframe. Ads will still render if permissions allow.");
+    }
     this.core.log("Initializing... Ads will be auto-injected into the DOM. No custom component required.");
     try {
       const { display, dataCollection } = await this.core.request("/get-placements");

package/dist/modules/widget.d.ts

@@ -15,8 +15,9 @@ export declare class WidgetModule {
         theme: string;
     }): Promise<void>;
     autoInject(): Promise<void>;
+    private pickOneFormat;
     private normalizeConfigs;
-    private mountFormats;
+    private mountSingleFormat;
     mount(targetElementId: string, options?: {
         format?: string;
         refreshInterval?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerocost/sdk",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",