@sonordev/site-kit 6.5.0 → 7.0.1

package/dist/chunk-5SEM2V4A.js

@@ -0,0 +1,837 @@
+'use client';
+import { DEFAULT_ENGAGE_Z_INDEX } from './chunk-NDF4A5JM.js';
+import { getOrCreateVisitorId } from './chunk-24QZEO3Q.js';
+import { resolveAnalyticsTarget } from './chunk-43OCZ3JA.js';
+import { sonorFetch } from './chunk-EGOD74PP.js';
+import React, { useState, useEffect, useCallback, useRef, createElement } from 'react';
+import ReactDOM from 'react-dom';
+import dynamic from 'next/dynamic';
+import { usePathname } from 'next/navigation';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/engage/element-rules.ts
+function hasControlOrSpace(value) {
+  for (let i = 0; i < value.length; i++) {
+    const code = value.charCodeAt(i);
+    if (code <= 32 || code >= 127 && code <= 159) return true;
+  }
+  return false;
+}
+function isSitePath(value) {
+  return value.startsWith("/") && !value.startsWith("//") && !value.startsWith("/\\");
+}
+function safeActionUrl(raw) {
+  if (typeof raw !== "string") return void 0;
+  const value = raw.trim();
+  if (!value || hasControlOrSpace(value)) return void 0;
+  if (value.startsWith("#") || isSitePath(value)) return value;
+  const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(value)?.[1]?.toLowerCase();
+  return scheme && ["http", "https", "mailto", "tel"].includes(scheme) ? value : void 0;
+}
+function safeImageSrc(raw) {
+  if (typeof raw !== "string") return void 0;
+  const value = raw.trim();
+  if (!value || hasControlOrSpace(value)) return void 0;
+  if (isSitePath(value)) return value;
+  return /^https?:\/\//i.test(value) ? value : void 0;
+}
+function matchPath(pathname, pattern) {
+  if (pattern.endsWith("*")) return pathname.startsWith(pattern.slice(0, -1));
+  return pathname === pattern;
+}
+function deviceFromUserAgent(ua) {
+  if (/tablet|ipad|playbook|silk/i.test(ua)) return "tablet";
+  if (/mobile|iphone|ipod|android|blackberry|opera mini|iemobile/i.test(ua)) return "mobile";
+  return "desktop";
+}
+function seenKey(elementId) {
+  return `_engage_${elementId}`;
+}
+function isEligible(element, pathname, device, store, now = Date.now()) {
+  const pages = element.targeting?.pages;
+  if (pages) {
+    if (pages.exclude?.some((p) => matchPath(pathname, p))) return false;
+    if (pages.include && !pages.include.some((p) => matchPath(pathname, p))) return false;
+  }
+  if (element.targeting?.devices && !element.targeting.devices.includes(device)) return false;
+  const frequency = element.trigger?.frequency;
+  if (frequency) {
+    const key = seenKey(element.id);
+    if (frequency.type === "once") {
+      if (store.local?.getItem(key)) return false;
+    } else if (frequency.type === "once-per-session") {
+      if (store.session?.getItem(key)) return false;
+    } else if (frequency.type === "every-n-days" && frequency.days) {
+      const last = store.local?.getItem(key);
+      if (last && now - parseInt(last, 10) < frequency.days * 864e5) return false;
+    }
+  }
+  return true;
+}
+function activateElement(active, id, elements) {
+  if (active.includes(id)) return active;
+  const typeOf = (elementId) => elements.find((e) => e.id === elementId)?.type;
+  if (typeOf(id) === "popup" && active.some((other) => typeOf(other) === "popup")) return active;
+  return [...active, id];
+}
+function handleAction(action, node, onClose, onAction) {
+  if (!action?.action || action.action === "none") return;
+  if (onAction) {
+    onAction(action, node);
+  }
+  switch (action.action) {
+    case "link": {
+      const url = safeActionUrl(action.url);
+      if (url) {
+        if (action.newTab) {
+          window.open(url, "_blank", "noopener,noreferrer");
+        } else {
+          window.location.href = url;
+        }
+      }
+      break;
+    }
+    case "scroll":
+      if (action.target) {
+        const element = document.querySelector(action.target);
+        element?.scrollIntoView({ behavior: "smooth" });
+      }
+      break;
+    case "close":
+      onClose?.();
+      break;
+    case "copy":
+      if (action.text) {
+        navigator.clipboard.writeText(action.text).catch(console.error);
+      }
+      break;
+    case "share":
+      if (navigator.share) {
+        navigator.share({
+          title: document.title,
+          url: window.location.href
+        }).catch(console.error);
+      }
+      break;
+    case "download": {
+      const url = safeActionUrl(action.url);
+      if (url) {
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = "";
+        a.click();
+      }
+      break;
+    }
+  }
+}
+var animationKeyframes = `
+@keyframes engageFadeIn { from { opacity: 0; } to { opacity: 1; } }
+@keyframes engageFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes engageFadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes engageSlideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
+@keyframes engageSlideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
+@keyframes engageSlideInUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
+@keyframes engageScaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
+@keyframes engageBounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }
+`;
+function getAnimationStyle(animation, delay, duration) {
+  if (!animation || animation === "none") return {};
+  const animationMap = {
+    fadeIn: "engageFadeIn",
+    fadeInUp: "engageFadeInUp",
+    fadeInDown: "engageFadeInDown",
+    slideInLeft: "engageSlideInLeft",
+    slideInRight: "engageSlideInRight",
+    slideInUp: "engageSlideInUp",
+    scaleIn: "engageScaleIn",
+    bounceIn: "engageBounceIn"
+  };
+  const animationName = animationMap[animation];
+  if (!animationName) return {};
+  return {
+    animation: `${animationName} ${duration || 300}ms ease-out ${delay || 0}ms forwards`,
+    opacity: 0
+    // Start invisible, animation will show it
+  };
+}
+function NodeRenderer({ node, onClose, onAction, context }) {
+  const [isHovered, setIsHovered] = useState(false);
+  const { type, props = {}, style = {}, children } = node;
+  const computedStyle = { ...style };
+  if (props.animation) {
+    Object.assign(computedStyle, getAnimationStyle(
+      props.animation,
+      props.animationDelay,
+      props.animationDuration
+    ));
+  }
+  if (isHovered) {
+    if (props.hoverScale && props.hoverScale !== "none") {
+      computedStyle.transform = `scale(${props.hoverScale})`;
+      computedStyle.transition = "transform 0.2s ease";
+    }
+    if (props.hoverShadow && props.hoverShadow !== "none") {
+      const shadowMap = {
+        sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+        md: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
+        lg: "0 10px 15px -3px rgb(0 0 0 / 0.1)"
+      };
+      computedStyle.boxShadow = shadowMap[props.hoverShadow];
+    }
+  }
+  const eventHandlers = {
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false)
+  };
+  if (props.onClick) {
+    eventHandlers.onClick = (e) => {
+      e.preventDefault();
+      handleAction(props.onClick, node, onClose, onAction);
+    };
+    computedStyle.cursor = "pointer";
+  }
+  const renderedChildren = children?.map((child) => /* @__PURE__ */ jsx(
+    NodeRenderer,
+    {
+      node: child,
+      onClose,
+      onAction,
+      context
+    },
+    child.id
+  ));
+  switch (type) {
+    case "Container":
+    case "Box":
+    case "Section":
+      return /* @__PURE__ */ jsx("div", { style: computedStyle, ...eventHandlers, children: renderedChildren });
+    case "Text":
+      return /* @__PURE__ */ jsx("p", { style: computedStyle, ...eventHandlers, children: resolveText(props.text, context) });
+    case "Heading":
+      const HeadingTag = `h${props.level || 2}`;
+      return createElement(
+        HeadingTag,
+        { style: computedStyle, ...eventHandlers },
+        resolveText(props.text, context)
+      );
+    case "Button":
+    case "BookingButton":
+    case "BuyNow":
+    case "AddToCart":
+    case "EventRSVP":
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          style: computedStyle,
+          ...eventHandlers,
+          type: "button",
+          "aria-label": typeof props.ariaLabel === "string" ? props.ariaLabel : void 0,
+          children: resolveText(props.text || props.label, context) || "Button"
+        }
+      );
+    case "Image":
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: safeImageSrc(props.src),
+          alt: props.alt || "",
+          style: computedStyle,
+          ...eventHandlers
+        }
+      );
+    case "Link":
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: safeActionUrl(props.href) ?? "#",
+          target: props.newTab ? "_blank" : void 0,
+          rel: props.newTab ? "noopener noreferrer" : void 0,
+          style: computedStyle,
+          ...eventHandlers,
+          children: resolveText(props.text, context) || renderedChildren
+        }
+      );
+    case "Input":
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: props.inputType || "text",
+          placeholder: props.placeholder,
+          style: computedStyle,
+          ...eventHandlers
+        }
+      );
+    case "Divider":
+      return /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: "1px solid var(--sk-border, #e5e7eb)", ...computedStyle } });
+    case "Spacer":
+      return /* @__PURE__ */ jsx("div", { style: { ...computedStyle, width: props.width, height: props.height } });
+    case "Icon":
+      return /* @__PURE__ */ jsx("span", { style: computedStyle, ...eventHandlers, children: props.icon || "\u2605" });
+    case "FormEmbed":
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: computedStyle,
+          "data-engage-form": props.form_id,
+          ...eventHandlers,
+          children: /* @__PURE__ */ jsxs("div", { style: { padding: "16px", background: "var(--sk-bg-elevated, #f5f5f5)", borderRadius: "8px", textAlign: "center" }, children: [
+            "Form: ",
+            props.form_id || "Not configured"
+          ] })
+        }
+      );
+    case "ProductCard":
+    case "EventCard":
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: computedStyle,
+          "data-engage-offering": props.offering_id,
+          ...eventHandlers,
+          children: renderedChildren
+        }
+      );
+    default:
+      console.warn(`[DesignRenderer] Unknown node type: ${type}`);
+      return /* @__PURE__ */ jsx("div", { style: computedStyle, ...eventHandlers, children: renderedChildren });
+  }
+}
+function resolveText(text, context) {
+  if (!text) return "";
+  if (!context) return text;
+  return text.replace(/\{\{(\w+(?:\.\w+)*)\}\}/g, (match, path) => {
+    const value = getNestedValue(context, path);
+    return value !== void 0 ? String(value) : match;
+  });
+}
+function getNestedValue(obj, path) {
+  return path.split(".").reduce((acc, key) => acc?.[key], obj);
+}
+function DesignRenderer({
+  design,
+  onClose,
+  onAction,
+  context
+}) {
+  React.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const styleId = "engage-design-renderer-animations";
+    if (!document.getElementById(styleId)) {
+      const styleSheet = document.createElement("style");
+      styleSheet.id = styleId;
+      styleSheet.textContent = animationKeyframes;
+      document.head.appendChild(styleSheet);
+    }
+  }, []);
+  const rootStyle = {
+    ...design.style
+  };
+  return /* @__PURE__ */ jsx("div", { style: rootStyle, "data-engage-design": design.id, children: design.children?.map((node) => /* @__PURE__ */ jsx(
+    NodeRenderer,
+    {
+      node,
+      onClose,
+      onAction,
+      context
+    },
+    node.id
+  )) });
+}
+var LazyBlocksPopup = dynamic(
+  () => import('./BlocksPopup-D25RFNOV.js').then((m) => ({ default: m.BlocksPopup })),
+  { ssr: false }
+);
+var LazyChatWidget = dynamic(
+  () => import('./ChatWidget-RYI7BMJJ.js').then((m) => ({ default: m.ChatWidget })),
+  { ssr: false }
+);
+function EngageWidget(props) {
+  const target = resolveAnalyticsTarget(props);
+  if (!target) return null;
+  return /* @__PURE__ */ jsx(AllowedEngageWidget, { ...props, ...target });
+}
+function AllowedEngageWidget({
+  apiUrl: propApiUrl,
+  apiKey: propApiKey,
+  projectId: propProjectId,
+  position = "bottom-right",
+  offsetBottom,
+  zIndex = DEFAULT_ENGAGE_Z_INDEX,
+  chatEnabled = true,
+  popupsEnabled = true,
+  debug = false
+}) {
+  const pathname = usePathname();
+  const [elements, setElements] = useState([]);
+  const [activeElements, setActiveElements] = useState([]);
+  const [dismissedElements, setDismissedElements] = useState(/* @__PURE__ */ new Set());
+  const [chatReady, setChatReady] = useState(false);
+  useEffect(() => {
+    if (!popupsEnabled) return;
+    async function loadElements() {
+      const apiUrl = propApiUrl;
+      const apiKey = propApiKey;
+      if (!apiKey) {
+        if (debug) console.warn("[Engage] No API key configured");
+        return;
+      }
+      const visitorId = getOrCreateVisitorId();
+      const url = typeof window !== "undefined" ? window.location.href : "";
+      try {
+        const response = await sonorFetch(
+          `${apiUrl.replace(/\/$/, "")}/engage/widget/elements?url=${encodeURIComponent(url)}&visitorId=${encodeURIComponent(visitorId)}&deviceType=${getDeviceType()}`,
+          {},
+          { apiKey }
+        );
+        if (!response.ok) {
+          if (debug) console.error("[Engage] Error loading elements:", response.statusText);
+          return;
+        }
+        const json = await response.json();
+        const elementsList = json.data?.elements ?? json.elements ?? [];
+        if (debug) console.log("[Engage] Loaded elements:", elementsList);
+        setElements(elementsList);
+      } catch (error) {
+        if (debug) console.error("[Engage] Error loading elements:", error);
+      }
+    }
+    loadElements();
+  }, [propApiUrl, propApiKey, debug, popupsEnabled]);
+  useEffect(() => {
+    if (!chatEnabled) return;
+    const id = typeof requestIdleCallback !== "undefined" ? requestIdleCallback(() => setChatReady(true), { timeout: 3e3 }) : setTimeout(() => setChatReady(true), 1);
+    return () => {
+      typeof cancelIdleCallback !== "undefined" ? cancelIdleCallback(id) : clearTimeout(id);
+    };
+  }, [chatEnabled]);
+  useEffect(() => {
+    if (!elements.length) return;
+    const store = { local: storageOrNull("local"), session: storageOrNull("session") };
+    const device = getDeviceType();
+    const eligible = elements.filter(
+      (element) => !dismissedElements.has(element.id) && isEligible(element, pathname, device, store)
+    );
+    if (debug) console.log("[Engage] Eligible elements:", eligible);
+    const eligibleIds = new Set(eligible.map((e) => e.id));
+    setActiveElements((prev) => {
+      const kept = prev.filter((id) => eligibleIds.has(id));
+      return kept.length === prev.length ? prev : kept;
+    });
+    const activate = (id) => {
+      setActiveElements((prev) => activateElement(prev, id, elements));
+    };
+    const cleanups = [];
+    eligible.forEach((element) => {
+      const trigger = element.trigger;
+      if (trigger?.type === "immediate" || !trigger?.type) {
+        activate(element.id);
+      } else if (trigger?.type === "delay" && trigger.delay) {
+        const timer = setTimeout(() => activate(element.id), trigger.delay * 1e3);
+        cleanups.push(() => clearTimeout(timer));
+      } else if (trigger?.type === "exit-intent") {
+        const handleMouseLeave = (e) => {
+          if (e.clientY < 10) {
+            activate(element.id);
+            document.removeEventListener("mouseleave", handleMouseLeave);
+          }
+        };
+        document.addEventListener("mouseleave", handleMouseLeave);
+        cleanups.push(() => document.removeEventListener("mouseleave", handleMouseLeave));
+      } else if (trigger?.type === "scroll" && trigger.scrollPercentage) {
+        const handleScroll = () => {
+          const scrollPercent = window.scrollY / (document.body.scrollHeight - window.innerHeight) * 100;
+          if (scrollPercent >= (trigger.scrollPercentage || 50)) {
+            activate(element.id);
+            window.removeEventListener("scroll", handleScroll);
+          }
+        };
+        window.addEventListener("scroll", handleScroll, { passive: true });
+        cleanups.push(() => window.removeEventListener("scroll", handleScroll));
+      }
+    });
+    return () => {
+      cleanups.forEach((fn) => fn());
+    };
+  }, [elements, pathname, dismissedElements, debug]);
+  const recordSeen = useCallback((elementId) => {
+    const element = elements.find((e) => e.id === elementId);
+    if (!element?.trigger?.frequency) return;
+    try {
+      if (element.trigger.frequency.type === "once-per-session") {
+        sessionStorage.setItem(seenKey(elementId), "true");
+      } else {
+        localStorage.setItem(seenKey(elementId), Date.now().toString());
+      }
+    } catch {
+    }
+  }, [elements]);
+  const handleDismiss = useCallback((elementId) => {
+    setDismissedElements((prev) => /* @__PURE__ */ new Set([...prev, elementId]));
+    setActiveElements((prev) => prev.filter((id) => id !== elementId));
+    recordSeen(elementId);
+  }, [recordSeen]);
+  if (typeof document === "undefined") return null;
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      activeElements.map((elementId) => {
+        const element = elements.find((e) => e.id === elementId);
+        if (!element) return null;
+        return /* @__PURE__ */ jsx(
+          EngageElementRenderer,
+          {
+            element,
+            onDismiss: () => handleDismiss(element.id),
+            onEngaged: () => recordSeen(element.id),
+            zIndex,
+            apiUrl: propApiUrl,
+            apiKey: propApiKey
+          },
+          element.id
+        );
+      }),
+      chatEnabled && chatReady && /* @__PURE__ */ jsx(
+        LazyChatWidget,
+        {
+          projectId: propProjectId ?? void 0,
+          config: {
+            position,
+            offsetBottom,
+            zIndex,
+            buttonColor: "#2563eb"
+            // Default blue-600 (AA on white), overridden by --sk-primary CSS var or API brand_primary
+          }
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+function trackEngageEvent(apiUrl, apiKey, endpoint, data) {
+  if (!apiKey) return;
+  const visitorId = typeof localStorage !== "undefined" ? localStorage.getItem("_sk_vid") : null;
+  sonorFetch(`${apiUrl.replace(/\/$/, "")}/engage/widget/${endpoint}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ ...data, visitorId, pageUrl: window.location.href }),
+    keepalive: true
+  }, { apiKey, retries: 0 }).catch(() => {
+  });
+}
+function handleEngageAction(action, _node, element, apiUrl, apiKey) {
+  trackEngageEvent(apiUrl, apiKey, "click", {
+    elementId: element.id,
+    action: action.action
+  });
+  switch (action.action) {
+    case "navigate": {
+      const url = safeActionUrl(action.url);
+      if (url) window.location.href = url;
+      break;
+    }
+    case "open-url": {
+      const url = safeActionUrl(action.url);
+      if (url) window.open(url, "_blank", "noopener,noreferrer");
+      break;
+    }
+    case "submit-form":
+    case "submit_form":
+      window.dispatchEvent(new CustomEvent("engage:submit-form", {
+        detail: { formId: action.formId || action.url, elementId: element.id }
+      }));
+      break;
+    case "track-conversion":
+      window.dispatchEvent(new CustomEvent("engage:conversion", {
+        detail: { action, elementId: element.id }
+      }));
+      break;
+    default:
+      window.dispatchEvent(new CustomEvent("engage:action", {
+        detail: { action, elementId: element.id }
+      }));
+      break;
+  }
+}
+function EngageElementRenderer({
+  element,
+  onDismiss,
+  onEngaged,
+  zIndex,
+  apiUrl,
+  apiKey
+}) {
+  const containerRef = useRef(null);
+  const impressionTrackedRef = useRef(false);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || impressionTrackedRef.current) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && !impressionTrackedRef.current) {
+          impressionTrackedRef.current = true;
+          trackEngageEvent(apiUrl, apiKey, "impression", { elementId: element.id });
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.5 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [apiUrl, apiKey, element.id]);
+  const onAction = useCallback(
+    (action, node) => {
+      if (action.action !== "close") onEngaged();
+      handleEngageAction(action, node, element, apiUrl, apiKey);
+    },
+    [element, apiUrl, apiKey, onEngaged]
+  );
+  if (element.blocks?.length) {
+    return /* @__PURE__ */ jsx(
+      BlocksElement,
+      {
+        element,
+        onDismiss,
+        onEngaged,
+        zIndex,
+        apiUrl,
+        apiKey,
+        rootRef: containerRef
+      }
+    );
+  }
+  if (element.design_json) {
+    if (element.type === "popup") {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: containerRef,
+          "data-engage-element": element.id,
+          style: {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: "rgba(0,0,0,0.5)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex
+          },
+          onClick: onDismiss,
+          children: /* @__PURE__ */ jsx("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+            DesignRenderer,
+            {
+              design: element.design_json,
+              onClose: onDismiss,
+              onAction
+            }
+          ) })
+        }
+      );
+    }
+    if (element.type === "bar") {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: containerRef,
+          "data-engage-element": element.id,
+          style: {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            zIndex
+          },
+          children: /* @__PURE__ */ jsx(
+            DesignRenderer,
+            {
+              design: element.design_json,
+              onClose: onDismiss,
+              onAction
+            }
+          )
+        }
+      );
+    }
+    if (element.type === "nudge" || element.type === "slide-in") {
+      const position = element.config?.position || "bottom-right";
+      const positionStyles = {
+        "bottom-right": { bottom: 20, right: 20 },
+        "bottom-left": { bottom: 20, left: 20 },
+        "top-right": { top: 20, right: 20 },
+        "top-left": { top: 20, left: 20 }
+      };
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: containerRef,
+          "data-engage-element": element.id,
+          style: {
+            position: "fixed",
+            zIndex,
+            ...positionStyles[position]
+          },
+          children: /* @__PURE__ */ jsx(
+            DesignRenderer,
+            {
+              design: element.design_json,
+              onClose: onDismiss,
+              onAction
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("div", { ref: containerRef, "data-engage-element": element.id, children: /* @__PURE__ */ jsx(
+      DesignRenderer,
+      {
+        design: element.design_json,
+        onClose: onDismiss,
+        onAction
+      }
+    ) });
+  }
+  if (element.type === "popup") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: "rgba(0,0,0,0.5)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex
+        },
+        onClick: onDismiss,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              backgroundColor: "var(--sk-bg, #ffffff)",
+              padding: 24,
+              borderRadius: 8,
+              maxWidth: 500,
+              width: "90%"
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: onDismiss,
+                  style: {
+                    position: "absolute",
+                    top: 8,
+                    right: 8,
+                    background: "none",
+                    border: "none",
+                    fontSize: 24,
+                    cursor: "pointer"
+                  },
+                  children: "\xD7"
+                }
+              ),
+              element.config?.title && /* @__PURE__ */ jsx("h2", { children: element.config.title }),
+              element.config?.message && /* @__PURE__ */ jsx("p", { children: element.config.message })
+            ]
+          }
+        )
+      }
+    );
+  }
+  if (element.type === "bar") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          backgroundColor: element.config?.backgroundColor || "var(--sk-primary, #2563eb)",
+          color: element.config?.textColor || "var(--sk-bg, #ffffff)",
+          padding: "12px 24px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 16,
+          zIndex
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { children: element.config?.message }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onDismiss,
+              style: {
+                background: "none",
+                border: "none",
+                color: "inherit",
+                fontSize: 20,
+                cursor: "pointer"
+              },
+              children: "\xD7"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return null;
+}
+var PLACEMENT = {
+  popup: "popup",
+  bar: "bar",
+  nudge: "slide-in",
+  "slide-in": "slide-in"
+};
+function BlocksElement({
+  element,
+  onDismiss,
+  onEngaged,
+  zIndex,
+  apiUrl,
+  apiKey,
+  rootRef
+}) {
+  const layout = element.layout;
+  const position = layout?.corner ?? element.config?.position;
+  const corner = position === "bottom-left" || position === "top-left" || position === "top-right" ? position : "bottom-right";
+  return /* @__PURE__ */ jsx(
+    LazyBlocksPopup,
+    {
+      blocks: element.blocks,
+      placement: layout?.placement ?? PLACEMENT[element.type] ?? "popup",
+      edge: layout?.edge,
+      accent: layout?.accent,
+      corner,
+      zIndex,
+      rootRef,
+      elementId: element.id,
+      onClose: onDismiss,
+      onButton: (url) => {
+        onEngaged();
+        trackEngageEvent(apiUrl, apiKey, "click", { elementId: element.id, action: "navigate", url });
+      }
+    }
+  );
+}
+function getDeviceType() {
+  if (typeof navigator === "undefined") return "desktop";
+  return deviceFromUserAgent(navigator.userAgent);
+}
+function storageOrNull(kind) {
+  try {
+    return kind === "local" ? window.localStorage : window.sessionStorage;
+  } catch {
+    return null;
+  }
+}
+
+export { DesignRenderer, EngageWidget };