@sagepilot-ai/web-events-addon 0.2.0 → 0.2.1

package/dist/sagepilot-web-events.global.js

@@ -364,7 +364,7 @@ var SagepilotWebEvents = (() => {
 
   // package.json
   var name = "@sagepilot-ai/web-events-addon";
-  var version = "0.2.0";
+  var version = "0.2.1";
 
   // src/projection.ts
   var sensitive = /password|passwd|secret|token|authorization|cookie|session|email|phone|contact|address|card|payment|cvv|ssn|dob|birth|customer|user|account|person|profile|name|description|message|content|text|search|query/i;
@@ -489,7 +489,7 @@ var SagepilotWebEvents = (() => {
     if (labels.length > 1024) return;
     for (const label2 of labels) {
       const value = label2.nextElementSibling;
-      if (label2.childElementCount || normalized(label2.textContent) !== "product id:" || !value || value.childElementCount || [label2, value].some((node) => node.closest('header,footer,form,dialog,[role="dialog"],[hidden],[aria-hidden="true"],[data-sagepilot-popup],[itemprop="review"],[itemtype$="/Review"],[data-review-id]'))) continue;
+      if (label2.childElementCount || normalized(label2.textContent) !== "product id:" || !value || value.childElementCount || [label2, value].some((node2) => node2.closest('header,footer,form,dialog,[role="dialog"],[hidden],[aria-hidden="true"],[data-sagepilot-popup],[itemprop="review"],[itemtype$="/Review"],[data-review-id]'))) continue;
       const product = id(value.textContent?.trim());
       if (product) values.push(product);
     }
@@ -908,7 +908,7 @@ var SagepilotWebEvents = (() => {
       if (!hydrationLimited) roots.push(...flightRows(chunks.join("")));
       else roots.length = 0;
       const title = normalized(document.querySelector("h1")?.textContent), hydrated = [], typedVariants = /* @__PURE__ */ new Map();
-      const anchors = [...document.querySelectorAll("a[href]")].slice(0, 512).map((node) => publicURL(node.getAttribute("href"))).filter((value) => !!value);
+      const anchors = [...document.querySelectorAll("a[href]")].slice(0, 512).map((node2) => publicURL(node2.getAttribute("href"))).filter((value) => !!value);
       const pending = roots.map((value) => ({ value, product: false, depth: 0 }));
       let visited = 0;
       while (pending.length && visited++ < 8192) {
@@ -1079,7 +1079,7 @@ var SagepilotWebEvents = (() => {
         const action = commerceAction(root.getAttribute("aria-label") ?? root.innerText ?? root.textContent ?? "");
         const primary = /^h1$/i.test(root.tagName) || root.matches("button,[role='button']") && /^(?:add(?: to (?:cart|bag|basket))?|buy(?: now)?|rent(?: now)?)[.!]?$/i.test(action);
         if (!anchor && primary && !samePage) return empty("unresolved");
-        const form = root.form ?? root.closest("form"), privateForm = form && [...form.querySelectorAll("input:not([type='hidden']),textarea,select")].some((node) => node.tagName === "TEXTAREA" || !/^(?:quantity|qty|variant(?:_id)?|option(?:\[.*\])?|attribute_[A-Za-z0-9_]+)$/i.test(node.getAttribute("name") ?? ""));
+        const form = root.form ?? root.closest("form"), privateForm = form && [...form.querySelectorAll("input:not([type='hidden']),textarea,select")].some((node2) => node2.tagName === "TEXTAREA" || !/^(?:quantity|qty|variant(?:_id)?|option(?:\[.*\])?|attribute_[A-Za-z0-9_]+)$/i.test(node2.getAttribute("name") ?? ""));
         if (privateForm) return empty("unresolved");
         let pageContext = !anchor && primary && samePage && !privateForm && !root.closest("dialog,[role='dialog']");
         const images = /* @__PURE__ */ new Set(), urls = /* @__PURE__ */ new Set(), skus = /* @__PURE__ */ new Set(), variants = /* @__PURE__ */ new Set(), ids = /* @__PURE__ */ new Set();
@@ -1093,7 +1093,7 @@ var SagepilotWebEvents = (() => {
         if (primary && own && !forms.includes(own)) return empty("unresolved");
         const checked = [...document.querySelectorAll('input[type="radio"]:checked')];
         if (checked.length > 32) return empty("ambiguous");
-        const controls = checked.map((node) => id(node.value)).filter((value) => value && bound.some((entry) => entry.variant === value));
+        const controls = checked.map((node2) => id(node2.value)).filter((value) => value && bound.some((entry) => entry.variant === value));
         const selections = [.../* @__PURE__ */ new Set([...(own ? forms.filter((value) => value === own) : forms).map((form2) => form2.variant), ...controls])];
         const nativeConflict = selections.length && (selections.length !== 1 || currentSelector && !sameVariant(selections[0], currentSelector));
         const nativeVariant = samePage && selections.length === 1 && (!currentSelector || sameVariant(selections[0], currentSelector)) ? selections[0] : void 0;
@@ -1107,20 +1107,20 @@ var SagepilotWebEvents = (() => {
           while ((next = walker.nextNode()) && nodes2.length <= 64) nodes2.push(next);
           if (nodes2.length > 64) break;
           if (!direct && card.matches("[data-product-id],[data-variant-id],[data-product_id],[data-variant_id]")) direct = card;
-          for (const node of nodes2) {
-            const image = publicURL(node.getAttribute("src") ?? void 0, location.href, true);
+          for (const node2 of nodes2) {
+            const image = publicURL(node2.getAttribute("src") ?? void 0, location.href, true);
             if (image) images.add(image);
-            for (const match of String(getComputedStyle(node).backgroundImage ?? "").matchAll(/url\(["']?([^"')]+)["']?\)/g)) {
+            for (const match of String(getComputedStyle(node2).backgroundImage ?? "").matchAll(/url\(["']?([^"')]+)["']?\)/g)) {
               const value = publicURL(match[1], location.href, true);
               if (value) images.add(value);
             }
-            const url = publicURL(node.getAttribute("href") ?? void 0);
+            const url = publicURL(node2.getAttribute("href") ?? void 0);
             if (url) urls.add(url);
-            const sku = id(node.getAttribute("data-sku") ?? (node.getAttribute("itemprop") === "sku" ? node.getAttribute("content") : null));
+            const sku = id(node2.getAttribute("data-sku") ?? (node2.getAttribute("itemprop") === "sku" ? node2.getAttribute("content") : null));
             if (sku) skus.add(sku);
-            const variant = id(node.getAttribute("data-variant-id") ?? node.getAttribute("data-variant_id"));
+            const variant = id(node2.getAttribute("data-variant-id") ?? node2.getAttribute("data-variant_id"));
             if (variant) variants.add(variant);
-            const product = id(node.getAttribute("data-product-id") ?? node.getAttribute("data-product_id") ?? (node.getAttribute("itemprop") === "productID" ? node.getAttribute("content") : null));
+            const product = id(node2.getAttribute("data-product-id") ?? node2.getAttribute("data-product_id") ?? (node2.getAttribute("itemprop") === "productID" ? node2.getAttribute("content") : null));
             if (product) ids.add(product);
           }
           if (targetURL || images.size && urls.size) break;
@@ -1159,8 +1159,8 @@ var SagepilotWebEvents = (() => {
           const exactURL = !!desired && (entry.url === desired || !!selected && entry.url?.split("?")[0] === desired.split("?")[0] && [entry.variant, entry.sku, ...variantValues].some((value) => sameVariant(value, selected)));
           const image = entry.images.find((value) => images.has(value) && !sharedImages.has(value)), token = entry.sku && new RegExp(`(?:^|[^A-Za-z0-9])${entry.sku.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?:$|[^A-Za-z0-9])`);
           const skuImage = token ? [...images].find((value) => !sharedImages.has(value) && token.test(new URL(value).pathname)) : void 0;
-          const title = normalized(entry.snapshot.name), titleOnPage = [...document.querySelectorAll("h1")].slice(0, 8).some((node) => node.getClientRects().length && normalized(node.textContent) === title);
-          const groupOnPage = entry.group?.url === canonical && samePage && entry.snapshot.metadata.provenance.source_ref === current && [...document.querySelectorAll("h1")].slice(0, 8).some((node) => node.getClientRects().length && normalized(node.textContent) === entry.group?.name);
+          const title = normalized(entry.snapshot.name), titleOnPage = [...document.querySelectorAll("h1")].slice(0, 8).some((node2) => node2.getClientRects().length && normalized(node2.textContent) === title);
+          const groupOnPage = entry.group?.url === canonical && samePage && entry.snapshot.metadata.provenance.source_ref === current && [...document.querySelectorAll("h1")].slice(0, 8).some((node2) => node2.getClientRects().length && normalized(node2.textContent) === entry.group?.name);
           const directImage = uniqueLiteral && !targetURL && samePage && pageSchema.includes(entry) && entry.rawImages?.includes(literalImage) && !sharedImages.has(clickedImage) && (!entry.url || entry.url.split("?")[0] === canonical.split("?")[0]) && (!currentSelector || [entry.variant, entry.sku, declaredVariantURL, ...variantValues].includes(currentSelector));
           const corroborated = title && title === normalized(observedLabel) && observedPrice !== void 0 && entry.snapshot.price === observedPrice;
           let match = exactURL ? "exact_url" : !targetURL && (entry.variant && variants.has(entry.variant) || exactVariant && sameVariant(entry.variant ?? declaredVariantURL, exactVariant)) ? "exact_variant" : labelMatch || !targetURL && typeof entry.snapshot.product_id === "string" && ids.has(entry.snapshot.product_id) ? "direct_id" : !targetURL && entry.sku && skus.has(entry.sku) ? "exact_sku" : skuImage && (!targetURL || !entry.url) ? "exact_sku" : directImage || image && (corroborated || entry.blocked || entry.url === current && titleOnPage || groupOnPage) && (!targetURL || !entry.url) ? "exact_image" : null;
@@ -1264,13 +1264,13 @@ var SagepilotWebEvents = (() => {
       if (candidate.closest(privateRegion)) return null;
       const children = nodes(candidate, 64);
       if (!children) return null;
-      if (children.some((node) => node.matches("input,textarea,select,[contenteditable='true']"))) return null;
-      const images = children.filter((node) => node.matches(imageSelector));
+      if (children.some((node2) => node2.matches("input,textarea,select,[contenteditable='true']"))) return null;
+      const images = children.filter((node2) => node2.matches(imageSelector));
       if (images.length > 1) return null;
       if (images.length !== 1) continue;
       const name2 = label(images[0].getAttribute("alt") ?? images[0].getAttribute("aria-label"));
-      if (!name2 || !children.some((node) => node !== images[0] && !node.childElementCount && node.getClientRects().length && getComputedStyle(node).visibility !== "hidden" && label(text(node)) === name2)) continue;
-      const amounts = children.filter((node) => node.matches("p,span,[itemprop='price']") && !node.closest("del,s") && node.getClientRects().length && getComputedStyle(node).visibility !== "hidden").map((node) => price(text(node))).filter(Boolean);
+      if (!name2 || !children.some((node2) => node2 !== images[0] && !node2.childElementCount && node2.getClientRects().length && getComputedStyle(node2).visibility !== "hidden" && label(text(node2)) === name2)) continue;
+      const amounts = children.filter((node2) => node2.matches("p,span,[itemprop='price']") && !node2.closest("del,s") && node2.getClientRects().length && getComputedStyle(node2).visibility !== "hidden").map((node2) => price(text(node2))).filter(Boolean);
       if (!amounts.length || new Set(amounts.map((amount) => `${amount.price}:${amount.currency ?? ""}`)).size > 1) continue;
       const siblings = candidate.parentElement?.children;
       if (siblings && siblings.length > 64) return null;
@@ -1278,14 +1278,14 @@ var SagepilotWebEvents = (() => {
         if (sibling === candidate) continue;
         const entries = nodes(sibling, 64);
         if (!entries) return null;
-        if (entries.some((node) => node.matches(imageSelector) && label(node.getAttribute("alt") ?? node.getAttribute("aria-label")) === name2)) return null;
+        if (entries.some((node2) => node2.matches(imageSelector) && label(node2.getAttribute("alt") ?? node2.getAttribute("aria-label")) === name2)) return null;
       }
       return { node: candidate, label: name2, ...amounts[0] };
     }
     return null;
   }
   function quantity(product) {
-    const values = (nodes(product.node, 64) ?? []).filter((node) => (!node.childElementCount || node.matches("p")) && node.getClientRects().length && getComputedStyle(node).visibility !== "hidden").map((node) => text(node)?.match(/^(?:.*\s)?(?:quantity|qty)\s*:\s*(\d{1,6})$/i)?.[1]).filter((value) => value !== void 0);
+    const values = (nodes(product.node, 64) ?? []).filter((node2) => (!node2.childElementCount || node2.matches("p")) && node2.getClientRects().length && getComputedStyle(node2).visibility !== "hidden").map((node2) => text(node2)?.match(/^(?:.*\s)?(?:quantity|qty)\s*:\s*(\d{1,6})$/i)?.[1]).filter((value) => value !== void 0);
     const unique = [...new Set(values)];
     return unique.length === 1 ? Number(unique[0]) : null;
   }
@@ -1295,43 +1295,43 @@ var SagepilotWebEvents = (() => {
     function cart(wanted) {
       const markers = [], possible = document.querySelectorAll("h1,h2,h3,h4,h5,h6,span,[aria-label],aside,[role='dialog']");
       for (let index = 0; index < Math.min(possible.length, 128); index++) {
-        const node2 = possible[index];
-        if (!node2.childElementCount && /^(?:shopping )?(?:cart|bag)$/i.test(text(node2) ?? "")) markers.push(node2);
+        const node3 = possible[index];
+        if (!node3.childElementCount && /^(?:shopping )?(?:cart|bag)$/i.test(text(node3) ?? "")) markers.push(node3);
       }
       const candidates = /* @__PURE__ */ new Set();
       for (const marker of markers.slice(0, 8)) {
-        let node2 = marker.parentElement;
-        for (let depth = 0; node2 && node2 !== document.body && depth < 6; depth++, node2 = node2.parentElement) {
-          const children = nodes(node2, 256);
+        let node3 = marker.parentElement;
+        for (let depth = 0; node3 && node3 !== document.body && depth < 6; depth++, node3 = node3.parentElement) {
+          const children = nodes(node3, 256);
           if (!children) break;
           if (children.some((child) => child.getClientRects().length && getComputedStyle(child).visibility !== "hidden" && (child.matches("[aria-busy='true'],[role='progressbar']") || !child.childElementCount && /^(?:loading|updating)[.\s…]*$/i.test(text(child) ?? "")))) break;
           const buttons = children.filter((child) => child.matches("button,[role='button']"));
           if (!buttons.some((button) => /^(?:proceed to )?checkout$/i.test(text(button) ?? ""))) continue;
-          if (buttons.some((button) => /\badd\b.*\bcart\b/i.test(text(button) ?? "")) || node2.closest("[hidden],[aria-hidden='true'],[aria-busy='true']")) break;
-          const style = getComputedStyle(node2);
+          if (buttons.some((button) => /\badd\b.*\bcart\b/i.test(text(button) ?? "")) || node3.closest("[hidden],[aria-hidden='true'],[aria-busy='true']")) break;
+          const style = getComputedStyle(node3);
           if (style.display === "none" || style.visibility === "hidden") break;
-          candidates.add(node2);
+          candidates.add(node3);
           break;
         }
       }
       if (candidates.size !== 1) return null;
-      const node = [...candidates][0], images = (nodes(node, 256) ?? []).filter((child) => child.matches(imageSelector));
+      const node2 = [...candidates][0], images = (nodes(node2, 256) ?? []).filter((child) => child.matches(imageSelector));
       if (images.length > 16) return null;
-      if (!images.length && !(nodes(node, 256) ?? []).some((child) => /^(?:(?:your|the|shopping)\s+)?(?:cart|bag)\s+(?:is\s+)?empty[.!:]?$|^add some products (?:in|to) (?:the|your) (?:cart|bag)\b/i.test(text(child) ?? ""))) return null;
+      if (!images.length && !(nodes(node2, 256) ?? []).some((child) => /^(?:(?:your|the|shopping)\s+)?(?:cart|bag)\s+(?:is\s+)?empty[.!:]?$|^add some products (?:in|to) (?:the|your) (?:cart|bag)\b/i.test(text(child) ?? ""))) return null;
       const seen = /* @__PURE__ */ new Set();
       let count = 0;
       for (const image of images) {
         const product = productAt(image), amount = product ? quantity(product) : null;
-        if (!product || !node.contains(product.node) || amount === null || seen.has(product.label)) return null;
+        if (!product || !node2.contains(product.node) || amount === null || seen.has(product.label)) return null;
         seen.add(product.label);
         if (product.label === wanted) count = amount;
       }
-      let ref = regions.get(node);
+      let ref = regions.get(node2);
       if (!ref) {
         ref = crypto.randomUUID();
-        regions.set(node, ref);
+        regions.set(node2, ref);
       }
-      return { node, ref, quantity: count };
+      return { node: node2, ref, quantity: count };
     }
     function remove(key) {
       const item = pending.get(key);
@@ -1466,7 +1466,7 @@ var SagepilotWebEvents = (() => {
     }
     function click(event) {
       const epoch = options.epoch();
-      if (stopped || !epoch || !(event.target instanceof Element) || event.composedPath().some((node) => node instanceof Element && node.hasAttribute("data-sagepilot-popup"))) return;
+      if (stopped || !epoch || !(event.target instanceof Element) || event.composedPath().some((node2) => node2 instanceof Element && node2.hasAttribute("data-sagepilot-popup"))) return;
       if (pendingClicks >= 128) {
         options.dropped();
         return;
@@ -1474,12 +1474,12 @@ var SagepilotWebEvents = (() => {
       try {
         const target = event.target.closest("button,a,input,select,textarea,[role='button']") ?? event.target;
         const path = [];
-        let node = target;
-        for (let depth = 0; node && depth < 6; depth++, node = node.parentElement) {
-          const role = node.getAttribute("role"), type = node.getAttribute("type"), parent = node.parentElement;
-          const sibling = parent && parent.children.length <= 64 ? Array.prototype.indexOf.call(parent.children, node) : -1;
+        let node2 = target;
+        for (let depth = 0; node2 && depth < 6; depth++, node2 = node2.parentElement) {
+          const role = node2.getAttribute("role"), type = node2.getAttribute("type"), parent = node2.parentElement;
+          const sibling = parent && parent.children.length <= 64 ? Array.prototype.indexOf.call(parent.children, node2) : -1;
           path.push({
-            tag: node.tagName.toLowerCase(),
+            tag: node2.tagName.toLowerCase(),
             sibling_index: sibling,
             ...role && roles.has(role) ? { role } : {},
             ...type && /^(button|submit|reset|checkbox|radio)$/.test(type) ? { type } : {}
@@ -2053,6 +2053,153 @@ var SagepilotWebEvents = (() => {
     };
   }
 
+  // src/popup-design.ts
+  var layouts = ["centered", "image_left", "image_right", "bottom_sheet"];
+  var builtIns = /* @__PURE__ */ new Set(["logo", "title", "body", "hero", "form"]);
+  var defaultBlocks = [{ kind: "logo" }, { kind: "hero" }, { kind: "title" }, { kind: "body" }, { kind: "form" }];
+  function asset(value) {
+    if (typeof value !== "string" || value.length > 1e3 || !value.startsWith("https://") || /[\s\\'"<>]/.test(value)) return false;
+    try {
+      const url = new URL(value);
+      return url.protocol === "https:" && !!url.hostname && url.port !== "0" && !url.username && !url.password && !url.hash;
+    } catch {
+      return false;
+    }
+  }
+  function validPopupDesign(design) {
+    if (design == null) return true;
+    const color = (v) => typeof v === "string" && /^#[0-9a-f]{6}$/i.test(v);
+    const integer = (v, min, max) => Number.isInteger(v) && v >= min && v <= max;
+    if (!layouts.includes(design.layout) || ![design.background_color, design.text_color, design.button_text_color].every(color) || !integer(design.border_radius, 0, 40) || !integer(design.padding, 12, 40) || !integer(design.width, 280, 760) || design.font_family !== null && (typeof design.font_family !== "string" || !/^[A-Za-z0-9][A-Za-z0-9 _-]{0,79}$/.test(design.font_family)) || [design.font_url, design.image_url].some((url) => url !== null && !asset(url)) || typeof design.image_alt !== "string" || design.image_alt.length > 200) return false;
+    if (design.blocks === null) return true;
+    if (!Array.isArray(design.blocks) || design.blocks.length > 12) return false;
+    const seen = /* @__PURE__ */ new Set();
+    return design.blocks.every((block) => {
+      if (!block || typeof block !== "object") return false;
+      if (builtIns.has(block.kind)) {
+        if (seen.has(block.kind)) return false;
+        seen.add(block.kind);
+        return true;
+      }
+      if (block.kind === "heading" || block.kind === "text") return typeof block.text === "string" && block.text.length > 0 && block.text.length <= 600;
+      if (block.kind === "image") return asset(block.url) && typeof block.alt === "string" && block.alt.length <= 200;
+      if (block.kind === "link") return asset(block.url) && typeof block.text === "string" && block.text.length > 0 && block.text.length <= 120;
+      return false;
+    }) && seen.has("form");
+  }
+  function node(tag, value) {
+    const result = document.createElement(tag);
+    if (value !== void 0) result.textContent = value;
+    return result;
+  }
+  function renderPopupDesign(panel, host, config, form) {
+    const design = config.design;
+    const blocks = design?.blocks ?? defaultBlocks;
+    const content = node("div");
+    content.className = "content";
+    const hero = design?.image_url && blocks.some((block) => block.kind === "hero") ? popupImage(design.image_url, design.image_alt, "hero") : null;
+    const split = hero && (design?.layout === "image_left" || design?.layout === "image_right");
+    if (split) {
+      const side = node("div");
+      side.className = "side-art";
+      side.append(hero);
+      panel.append(side);
+    }
+    let heading = false;
+    for (const block of blocks) {
+      switch (block.kind) {
+        case "logo":
+          if (config.logo_url) content.append(popupImage(config.logo_url, "", "logo"));
+          break;
+        case "hero":
+          if (hero && !split) content.append(hero);
+          break;
+        case "title":
+        case "heading": {
+          const title = node(heading ? "h3" : "h2", block.kind === "heading" ? block.text : config.title);
+          if (!heading) {
+            title.id = "sage-popup-title";
+            heading = true;
+          }
+          content.append(title);
+          break;
+        }
+        case "body":
+          content.append(node("p", config.body));
+          break;
+        case "text":
+          content.append(node("p", block.text));
+          break;
+        case "image":
+          content.append(popupImage(block.url, block.alt, "block-image"));
+          break;
+        case "link": {
+          const link = node("a", block.text);
+          link.href = block.url;
+          link.target = "_blank";
+          link.rel = "noopener noreferrer";
+          content.append(link);
+          break;
+        }
+        case "form":
+          content.append(form);
+          break;
+      }
+    }
+    panel.append(content);
+    if (heading) panel.setAttribute("aria-labelledby", "sage-popup-title");
+    else panel.setAttribute("aria-label", config.title);
+    if (!design) return () => {
+    };
+    panel.dataset.design = "";
+    panel.dataset.layout = split ? design.layout : design.layout === "bottom_sheet" ? "bottom_sheet" : "centered";
+    if (panel.dataset.layout === "bottom_sheet") {
+      host.style.alignItems = "end";
+      host.style.paddingBottom = "0";
+    }
+    for (const [key, value] of Object.entries({
+      "--popup-surface": design.background_color,
+      "--popup-text": design.text_color,
+      "--popup-button-text": design.button_text_color,
+      "--popup-radius": design.border_radius + "px",
+      "--popup-padding": design.padding + "px",
+      "--popup-width": design.width + "px"
+    })) panel.style.setProperty(key, value);
+    let face;
+    const fallback = design.font_family ? JSON.stringify(design.font_family) + ", system-ui, sans-serif" : "system-ui, sans-serif";
+    if (design.font_url && typeof FontFace === "function" && document.fonts) {
+      try {
+        face = new FontFace("sage-popup-" + crypto.randomUUID(), "url(" + JSON.stringify(design.font_url) + ")");
+        document.fonts.add(face);
+        panel.style.fontFamily = JSON.stringify(face.family) + ", " + fallback;
+      } catch {
+        panel.style.fontFamily = fallback;
+      }
+    } else panel.style.fontFamily = fallback;
+    return () => {
+      if (face) document.fonts.delete(face);
+    };
+  }
+  function popupImage(url, alt, className) {
+    const image = node("img");
+    image.referrerPolicy = "no-referrer";
+    image.alt = alt;
+    image.className = className;
+    image.src = url;
+    return image;
+  }
+  var popupDesignStyles = [
+    ".panel[data-design]{background:var(--popup-surface);color:var(--popup-text);border-radius:var(--popup-radius);width:min(var(--popup-width),calc(100vw - 40px));padding:0;overflow-wrap:anywhere}",
+    ".panel[data-design] .content{min-width:0;padding:var(--popup-padding)}",
+    ".panel[data-design] :is(p,a){color:inherit;white-space:pre-wrap}",
+    ".panel[data-design] input:not([type=checkbox]){color:inherit;background:transparent;border-color:currentColor}",
+    ".panel[data-design] button[type=submit]{color:var(--popup-button-text)}",
+    ".panel[data-design] :is(.hero,.block-image){display:block;max-width:100%;width:100%;max-height:240px;object-fit:cover;border-radius:calc(var(--popup-radius)/2)}",
+    ".panel[data-layout=bottom_sheet]{border-end-start-radius:0;border-end-end-radius:0}",
+    ".panel .side-art{position:relative;min-width:0;overflow:hidden}.panel .side-art>.hero{border-radius:0}.panel[data-design] .close{z-index:1}",
+    "@media(min-width:600px){.panel:is([data-layout=image_left],[data-layout=image_right]){display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:stretch}.panel:is([data-layout=image_left],[data-layout=image_right]) .side-art>.hero{position:absolute;inset:0;height:100%;max-height:none}.panel[data-layout=image_right]{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}.panel[data-layout=image_right]>.side-art{grid-row:1;grid-column:2}.panel[data-layout=image_right]>.content{grid-row:1;grid-column:1}}"
+  ].join("");
+
   // src/popup.ts
   function popupCompletionKey(workspaceId, installationId) {
     return `sagepilot:sdk-popup:${workspaceId}:${installationId}:completed`;
@@ -2067,7 +2214,7 @@ var SagepilotWebEvents = (() => {
         return false;
       }
     }
-    return true;
+    return validPopupDesign(value.design);
   }
   function createPopup(options) {
     let config = null, host = null;
@@ -2100,9 +2247,9 @@ var SagepilotWebEvents = (() => {
       return !raw || !Number.isFinite(last) || Date.now() - last >= config.frequency_hours * 36e5;
     }
     function element(tag, text2) {
-      const node = document.createElement(tag);
-      if (text2 !== void 0) node.textContent = text2;
-      return node;
+      const node2 = document.createElement(tag);
+      if (text2 !== void 0) node2.textContent = text2;
+      return node2;
     }
     function show() {
       if (!eligible() || !config) return;
@@ -2114,12 +2261,12 @@ var SagepilotWebEvents = (() => {
       const shadow = host.attachShadow({ mode: "open" });
       const style = element("style");
       style.textContent = `:host{font-family:system-ui,sans-serif;color:#172c23;color-scheme:light}*{box-sizing:border-box}.panel{background:white;width:min(420px,calc(100vw - 40px));max-height:90dvh;overflow:auto;border-radius:18px;padding:28px;box-shadow:0 16px 80px #0003;position:relative}h2{margin:4px 28px 10px 0;font-size:25px}p{line-height:1.5;color:#52645a}label{display:block;margin-top:14px;font-size:14px}input{display:block;width:100%;padding:11px;border:1px solid #b6c7bd;border-radius:7px;margin-top:6px;font:inherit;background:white;color:#172c23}button{cursor:pointer;font:inherit;color:inherit}button[type=submit]{display:block;width:100%;border:0;border-radius:8px;background:${published.accent_color};color:white;padding:13px;margin-top:20px;font-weight:600}button:disabled{opacity:.6;cursor:wait}.close{position:absolute;right:15px;top:12px;border:0;background:transparent;font-size:25px}.status{min-height:1.3em;font-size:14px}.logo{max-width:160px;max-height:60px;object-fit:contain}input:focus-visible,button:focus-visible{outline:3px solid #729e82;outline-offset:3px}@media(max-width:480px){.panel{padding:22px}h2{font-size:22px}}`;
+      style.textContent += popupDesignStyles;
       shadow.append(style);
       const panel = element("section");
       panel.className = "panel";
       panel.setAttribute("role", "dialog");
       panel.setAttribute("aria-modal", "true");
-      panel.setAttribute("aria-labelledby", "sage-popup-title");
       const close = element("button", "\xD7");
       close.type = "button";
       close.className = "close";
@@ -2130,17 +2277,6 @@ var SagepilotWebEvents = (() => {
       }
       close.addEventListener("click", dismiss);
       panel.append(close);
-      if (published.logo_url) {
-        const logo = element("img");
-        logo.src = published.logo_url;
-        logo.alt = "";
-        logo.className = "logo";
-        logo.referrerPolicy = "no-referrer";
-        panel.append(logo);
-      }
-      const title = element("h2", published.title);
-      title.id = "sage-popup-title";
-      panel.append(title, element("p", published.body));
       const form = element("form"), status = element("p");
       status.className = "status";
       status.setAttribute("role", "status");
@@ -2164,7 +2300,7 @@ var SagepilotWebEvents = (() => {
       const submit = element("button", published.button_text);
       submit.type = "submit";
       form.append(submit, status);
-      panel.append(form);
+      const cleanupDesign = renderPopupDesign(panel, host, published, form);
       shadow.append(panel);
       document.body.append(host);
       options.storage.setItem(shownKey, String(Date.now()));
@@ -2181,8 +2317,8 @@ var SagepilotWebEvents = (() => {
           if (challenge) {
             await options.identify(challenge, inputs.get("code").value);
             if (revision !== generation) return;
-            form.replaceChildren(element("p", published.success_text), close);
-            close.className = "close";
+            form.replaceChildren(element("p", published.success_text));
+            close.focus();
           } else {
             const contact = { submission_id: submissionId, popup_revision: published.revision, marketing_consent: true };
             for (const field of ["name", "email", "phone"]) {
@@ -2224,7 +2360,10 @@ var SagepilotWebEvents = (() => {
               form.replaceChildren(label2, submit, restart, status);
               status.textContent = "Check your email for the six-digit code.";
               code.focus();
-            } else form.replaceChildren(element("p", published.success_text));
+            } else {
+              form.replaceChildren(element("p", published.success_text));
+              close.focus();
+            }
           }
         } catch (error) {
           if (revision === generation) status.textContent = challenge ? "Verification failed. Check the code and try again." : "We couldn't save the form. Please try again.";
@@ -2242,7 +2381,7 @@ var SagepilotWebEvents = (() => {
           return;
         }
         if (event.key !== "Tab") return;
-        const focusable = [...shadow.querySelectorAll("button:not(:disabled),input:not(:disabled)")];
+        const focusable = [...shadow.querySelectorAll("button:not(:disabled),input:not(:disabled),a[href]")];
         const first = focusable[0], last = focusable[focusable.length - 1];
         if (event.shiftKey && shadow.activeElement === first) {
           event.preventDefault();
@@ -2254,6 +2393,7 @@ var SagepilotWebEvents = (() => {
       }
       shadow.addEventListener("keydown", keydown);
       cleanup = () => {
+        cleanupDesign();
         form.removeEventListener("submit", submitForm);
         shadow.removeEventListener("keydown", keydown);
       };