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

package/README.md

@@ -27,6 +27,19 @@ ESM, CommonJS and type builds are produced alongside the standalone `dist/sagepi
 
 Both local permission and the server's `collection_enabled` must allow capture. Server settings refresh at least once per minute while started, including when collection is off so popup publication still propagates. `refreshConfig()` applies changes immediately. Refresh failures suspend capture until a successful refresh. Ingress tokens are short lived; Event Handler performs no database lookup and FJE checks current installation policy before processing. A queue admission receipt is not event normalization or journey execution.
 
+## Website popup design
+
+In Settings → SDK Events, select a web installation and edit its Website popup. Apply the
+workspace's saved Brand Identity or adjust layout, artwork, typography, colors,
+dimensions and content order directly. Upload artwork or use an HTTPS image URL.
+Preview desktop and mobile, save the
+draft, then publish. The same installation fetches the published revision.
+
+The Portal can paste or read a local `.html` file and convert supported
+headings, paragraphs, images and links into editable blocks. Include one
+`<sagepilot-form></sagepilot-form>` placeholder. Styles use the visual
+controls and the SDK owns contact submission and optional email verification.
+
 ## Captured evidence
 
 | Source | Supported evidence |

package/dist/index.cjs

@@ -364,7 +364,7 @@ function createSagepilotInstallationClient(options) {
 
 // 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 @@ function labeledProductID() {
   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 @@ function createProductIndex(options) {
     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 @@ function createProductIndex(options) {
       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 @@ function createProductIndex(options) {
       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 @@ function createProductIndex(options) {
         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 @@ function createProductIndex(options) {
         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 @@ function productAt(target) {
     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 @@ function productAt(target) {
       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 @@ function createDOMCart(options) {
   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 @@ function observePage(options) {
   }
   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 @@ function observePage(options) {
     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 @@ function createJournal(scope) {
   };
 }
 
+// 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 @@ function valid(value) {
       return false;
     }
   }
-  return true;
+  return validPopupDesign(value.design);
 }
 function createPopup(options) {
   let config = null, host = null;
@@ -2100,9 +2247,9 @@ function createPopup(options) {
     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 @@ function createPopup(options) {
     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 @@ function createPopup(options) {
     }
     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 @@ function createPopup(options) {
     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 @@ function createPopup(options) {
         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 @@ function createPopup(options) {
             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 @@ function createPopup(options) {
         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 @@ function createPopup(options) {
     }
     shadow.addEventListener("keydown", keydown);
     cleanup = () => {
+      cleanupDesign();
       form.removeEventListener("submit", submitForm);
       shadow.removeEventListener("keydown", keydown);
     };