@perspective-ai/sdk 1.0.0-alpha.2

package/dist/index.cjs

@@ -0,0 +1,1596 @@
+'use strict';
+
+// src/config.ts
+var DEFAULT_HOST = "https://getperspective.ai";
+var globalConfig = {};
+function configure(config) {
+  globalConfig = { ...globalConfig, ...config };
+}
+function getConfig() {
+  return { ...globalConfig };
+}
+function hasDom() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+function normalizeToOrigin(host) {
+  try {
+    return new URL(host).origin;
+  } catch {
+    return host;
+  }
+}
+function getHost(instanceHost) {
+  if (instanceHost) {
+    return normalizeToOrigin(instanceHost);
+  }
+  if (globalConfig.host) {
+    return normalizeToOrigin(globalConfig.host);
+  }
+  if (hasDom()) {
+    const scriptHost = getScriptHost();
+    if (scriptHost) {
+      return scriptHost;
+    }
+  }
+  return DEFAULT_HOST;
+}
+var capturedScriptHost = null;
+function getScriptHost() {
+  if (capturedScriptHost !== null) {
+    return capturedScriptHost;
+  }
+  if (!hasDom()) {
+    return null;
+  }
+  const currentScript = document.currentScript;
+  if (currentScript?.src) {
+    try {
+      capturedScriptHost = new URL(currentScript.src).origin;
+      return capturedScriptHost;
+    } catch {
+    }
+  }
+  capturedScriptHost = "";
+  return null;
+}
+if (hasDom()) {
+  getScriptHost();
+}
+
+// src/constants.ts
+var SDK_VERSION = "1.0.0";
+var FEATURES = {
+  RESIZE: 1 << 0,
+  // 0b0001
+  THEME_SYNC: 1 << 1,
+  // 0b0010
+  ANON_ID: 1 << 2,
+  // 0b0100
+  SCROLLBAR_STYLES: 1 << 3
+  // 0b1000
+};
+var CURRENT_FEATURES = FEATURES.RESIZE | FEATURES.THEME_SYNC | FEATURES.ANON_ID | FEATURES.SCROLLBAR_STYLES;
+var PARAM_KEYS = {
+  // User identification
+  email: "email",
+  name: "name",
+  // Navigation
+  returnUrl: "returnUrl",
+  // Interview behavior
+  voice: "voice",
+  scroll: "scroll",
+  hideProgress: "hideProgress",
+  hideGreeting: "hideGreeting",
+  hideBranding: "hideBranding",
+  // Interview mode & auth
+  mode: "mode",
+  invite: "invite",
+  // System (internal)
+  embed: "embed",
+  embedType: "embed_type",
+  theme: "theme"
+};
+var BRAND_KEYS = {
+  // Light mode
+  primary: "brand.primary",
+  secondary: "brand.secondary",
+  bg: "brand.bg",
+  text: "brand.text",
+  // Dark mode
+  darkPrimary: "brand.dark.primary",
+  darkSecondary: "brand.dark.secondary",
+  darkBg: "brand.dark.bg",
+  darkText: "brand.dark.text"
+};
+var UTM_PARAMS = [
+  "utm_source",
+  "utm_medium",
+  "utm_campaign",
+  "utm_term",
+  "utm_content"
+];
+var RESERVED_PARAMS = /* @__PURE__ */ new Set([
+  PARAM_KEYS.embed,
+  PARAM_KEYS.embedType,
+  PARAM_KEYS.theme,
+  BRAND_KEYS.primary,
+  BRAND_KEYS.secondary,
+  BRAND_KEYS.bg,
+  BRAND_KEYS.text,
+  BRAND_KEYS.darkPrimary,
+  BRAND_KEYS.darkSecondary,
+  BRAND_KEYS.darkBg,
+  BRAND_KEYS.darkText,
+  ...UTM_PARAMS
+]);
+var DATA_ATTRS = {
+  widget: "data-perspective-widget",
+  popup: "data-perspective-popup",
+  slider: "data-perspective-slider",
+  float: "data-perspective-float",
+  // Primary name
+  chat: "data-perspective-chat",
+  // Legacy alias
+  fullpage: "data-perspective-fullpage",
+  params: "data-perspective-params",
+  brand: "data-perspective-brand",
+  brandDark: "data-perspective-brand-dark",
+  theme: "data-perspective-theme",
+  noStyle: "data-perspective-no-style"
+};
+var MESSAGE_TYPES = {
+  // SDK -> Iframe (initialization)
+  init: "perspective:init",
+  // Iframe -> SDK
+  ready: "perspective:ready",
+  resize: "perspective:resize",
+  submit: "perspective:submit",
+  close: "perspective:close",
+  error: "perspective:error",
+  redirect: "perspective:redirect",
+  // SDK -> Iframe (internal)
+  anonId: "perspective:anon-id",
+  injectStyles: "perspective:inject-styles",
+  themeChange: "perspective:theme-change",
+  // Iframe -> SDK (internal)
+  requestScrollbarStyles: "perspective:request-scrollbar-styles"
+};
+var PARAM_VALUES = {
+  true: "true"};
+var THEME_VALUES = {
+  dark: "dark",
+  light: "light",
+  system: "system"
+};
+var STORAGE_KEYS = {
+  anonId: "perspective-anon-id"
+};
+
+// src/utils.ts
+function cn(...classes) {
+  return classes.map((c) => (c || "").split(" ")).flat().filter(Boolean).join(" ");
+}
+function getThemeClass(theme) {
+  return theme && theme !== THEME_VALUES.system ? `perspective-${theme}-theme` : void 0;
+}
+function resolveIsDark(theme) {
+  if (theme === THEME_VALUES.dark) return true;
+  if (theme === THEME_VALUES.light) return false;
+  if (!hasDom()) return false;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function resolveTheme(themeOverride) {
+  return resolveIsDark(themeOverride) ? "dark" : "light";
+}
+function normalizeHex(color) {
+  const trimmed = color.trim();
+  if (!trimmed) return void 0;
+  const normalized = trimmed.startsWith("#") ? trimmed : `#${trimmed}`;
+  if (/^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(normalized)) {
+    return normalized;
+  }
+  const hexChars = normalized.slice(1).replace(/[^0-9a-fA-F]/g, "");
+  if (hexChars.length >= 6) return `#${hexChars.slice(0, 6)}`;
+  if (hexChars.length >= 3) return `#${hexChars.slice(0, 3)}`;
+  return void 0;
+}
+function hexToRgba(hex, alpha) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result || !result[1] || !result[2] || !result[3]) {
+    return `rgba(118, 41, 200, ${alpha})`;
+  }
+  const r = parseInt(result[1], 16);
+  const g = parseInt(result[2], 16);
+  const b = parseInt(result[3], 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+// src/iframe.ts
+function isAllowedRedirectUrl(url) {
+  if (!url || typeof url !== "string") return false;
+  try {
+    const parsed = new URL(url, window.location.origin);
+    const protocol = parsed.protocol.toLowerCase();
+    const hostname = parsed.hostname.toLowerCase();
+    if (protocol === "https:") return true;
+    if (protocol === "http:" && (hostname === "localhost" || hostname === "127.0.0.1"))
+      return true;
+    return false;
+  } catch {
+    return false;
+  }
+}
+function getOrCreateAnonId() {
+  if (!hasDom()) return "";
+  try {
+    let id = localStorage.getItem(STORAGE_KEYS.anonId);
+    if (!id) {
+      id = crypto.randomUUID();
+      localStorage.setItem(STORAGE_KEYS.anonId, id);
+    }
+    return id;
+  } catch {
+    return crypto.randomUUID();
+  }
+}
+function getUtmParams() {
+  if (!hasDom()) return {};
+  const params = {};
+  const searchParams = new URLSearchParams(window.location.search);
+  for (const key of UTM_PARAMS) {
+    const value = searchParams.get(key);
+    if (value) {
+      params[key] = value;
+    }
+  }
+  return params;
+}
+function buildIframeUrl(researchId, type, host, customParams, brand, themeOverride) {
+  const url = new URL(`${host}/interview/${researchId}`);
+  url.searchParams.set(PARAM_KEYS.embed, PARAM_VALUES.true);
+  url.searchParams.set(PARAM_KEYS.embedType, type === "float" ? "chat" : type);
+  if (hasDom()) {
+    const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    if (themeOverride && themeOverride !== THEME_VALUES.system) {
+      url.searchParams.set(PARAM_KEYS.theme, themeOverride);
+    } else {
+      url.searchParams.set(
+        PARAM_KEYS.theme,
+        isDark ? THEME_VALUES.dark : THEME_VALUES.light
+      );
+    }
+  } else {
+    url.searchParams.set(PARAM_KEYS.theme, themeOverride || THEME_VALUES.light);
+  }
+  const utmParams = getUtmParams();
+  for (const [key, value] of Object.entries(utmParams)) {
+    url.searchParams.set(key, value);
+  }
+  const setColor = (key, color) => {
+    if (!color) return;
+    const normalized = normalizeHex(color);
+    if (normalized) url.searchParams.set(key, normalized);
+  };
+  if (brand?.light) {
+    setColor(BRAND_KEYS.primary, brand.light.primary);
+    setColor(BRAND_KEYS.secondary, brand.light.secondary);
+    setColor(BRAND_KEYS.bg, brand.light.bg);
+    setColor(BRAND_KEYS.text, brand.light.text);
+  }
+  if (brand?.dark) {
+    setColor(BRAND_KEYS.darkPrimary, brand.dark.primary);
+    setColor(BRAND_KEYS.darkSecondary, brand.dark.secondary);
+    setColor(BRAND_KEYS.darkBg, brand.dark.bg);
+    setColor(BRAND_KEYS.darkText, brand.dark.text);
+  }
+  if (customParams) {
+    for (const [key, value] of Object.entries(customParams)) {
+      if (!RESERVED_PARAMS.has(key)) {
+        url.searchParams.set(key, value);
+      }
+    }
+  }
+  return url.toString();
+}
+function createIframe(researchId, type, host, params, brand, themeOverride) {
+  if (!hasDom()) {
+    return {};
+  }
+  const iframe = document.createElement("iframe");
+  iframe.src = buildIframeUrl(
+    researchId,
+    type,
+    host,
+    params,
+    brand,
+    themeOverride
+  );
+  iframe.setAttribute("allow", "microphone; camera");
+  iframe.setAttribute("allowfullscreen", "true");
+  iframe.setAttribute(
+    "sandbox",
+    "allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-top-navigation"
+  );
+  iframe.setAttribute("data-perspective", "true");
+  iframe.style.cssText = "border:none;";
+  return iframe;
+}
+function setupMessageListener(researchId, config, iframe, host, options) {
+  if (!hasDom()) {
+    return () => {
+    };
+  }
+  const handler = (event) => {
+    if (event.origin !== host) return;
+    if (event.source !== iframe.contentWindow) return;
+    if (typeof event.data?.type !== "string") return;
+    if (!event.data.type.startsWith("perspective:")) return;
+    if (event.data.researchId !== researchId) return;
+    switch (event.data.type) {
+      case MESSAGE_TYPES.ready:
+        sendScrollbarStyles(iframe, host);
+        sendMessage(iframe, host, {
+          type: MESSAGE_TYPES.anonId,
+          anonId: getOrCreateAnonId()
+        });
+        sendMessage(iframe, host, {
+          type: MESSAGE_TYPES.init,
+          version: SDK_VERSION,
+          features: CURRENT_FEATURES,
+          researchId
+        });
+        config.onReady?.();
+        break;
+      case MESSAGE_TYPES.resize:
+        if (!options?.skipResize) {
+          iframe.style.height = `${event.data.height}px`;
+        }
+        break;
+      case MESSAGE_TYPES.submit:
+        config.onSubmit?.({ researchId });
+        break;
+      case MESSAGE_TYPES.close:
+        config.onClose?.();
+        break;
+      case MESSAGE_TYPES.error:
+        const error = new Error(
+          event.data.error
+        );
+        error.code = event.data.code || "UNKNOWN";
+        config.onError?.(error);
+        break;
+      case MESSAGE_TYPES.redirect:
+        const redirectUrl = event.data.url;
+        if (!isAllowedRedirectUrl(redirectUrl)) {
+          console.warn(
+            "[Perspective] Blocked unsafe redirect URL:",
+            redirectUrl
+          );
+          return;
+        }
+        if (config.onNavigate) {
+          config.onNavigate(redirectUrl);
+        } else {
+          window.location.href = redirectUrl;
+        }
+        break;
+    }
+  };
+  window.addEventListener("message", handler);
+  return () => window.removeEventListener("message", handler);
+}
+function sendMessage(iframe, host, message) {
+  if (!hasDom()) return;
+  iframe.contentWindow?.postMessage(message, host);
+}
+var activeIframes = /* @__PURE__ */ new Map();
+function registerIframe(iframe, host) {
+  activeIframes.set(iframe, host);
+  return () => {
+    activeIframes.delete(iframe);
+    if (activeIframes.size === 0) {
+      teardownGlobalListeners();
+    }
+  };
+}
+function getScrollbarStyles() {
+  if (!hasDom()) return "";
+  const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const borderColor = isDark ? "hsl(217 33% 17%)" : "hsl(240 6% 90%)";
+  return `
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: ${borderColor} transparent;
+    }
+    *::-webkit-scrollbar {
+      width: 10px;
+      height: 10px;
+    }
+    *::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    *::-webkit-scrollbar-thumb {
+      background-color: ${borderColor};
+      border-radius: 9999px;
+      border: 2px solid transparent;
+      background-clip: padding-box;
+    }
+    *::-webkit-scrollbar-thumb:hover {
+      background-color: color-mix(in srgb, ${borderColor} 80%, currentColor);
+    }
+  `;
+}
+function sendScrollbarStyles(iframe, host) {
+  const styles = getScrollbarStyles();
+  sendMessage(iframe, host, {
+    type: MESSAGE_TYPES.injectStyles,
+    styles
+  });
+}
+function notifyThemeChange() {
+  if (!hasDom()) return;
+  const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  activeIframes.forEach((host, iframe) => {
+    const message = {
+      type: MESSAGE_TYPES.themeChange,
+      theme: isDark ? THEME_VALUES.dark : THEME_VALUES.light
+    };
+    sendMessage(iframe, host, message);
+    sendScrollbarStyles(iframe, host);
+  });
+}
+var themeListener = null;
+var themeMediaQuery = null;
+var globalMessageHandler = null;
+var globalListenersInitialized = false;
+function setupThemeListener() {
+  if (themeListener || !hasDom()) return;
+  themeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  themeListener = () => notifyThemeChange();
+  themeMediaQuery.addEventListener("change", themeListener);
+}
+function teardownThemeListener() {
+  if (themeListener && themeMediaQuery) {
+    themeMediaQuery.removeEventListener("change", themeListener);
+    themeListener = null;
+    themeMediaQuery = null;
+  }
+}
+function setupGlobalListeners() {
+  if (!hasDom() || globalMessageHandler) return;
+  setupThemeListener();
+  globalMessageHandler = (event) => {
+    if (!event.data?.type?.startsWith("perspective:")) return;
+    if (event.data.type === MESSAGE_TYPES.requestScrollbarStyles) {
+      const iframes = Array.from(
+        document.querySelectorAll("iframe[data-perspective]")
+      );
+      const sourceIframe = iframes.find(
+        (iframe) => iframe.contentWindow === event.source
+      );
+      if (sourceIframe) {
+        const host = activeIframes.get(sourceIframe);
+        if (host && event.origin === host) {
+          sendScrollbarStyles(sourceIframe, host);
+        }
+      }
+    }
+  };
+  window.addEventListener("message", globalMessageHandler);
+}
+function teardownGlobalListeners() {
+  if (globalMessageHandler) {
+    window.removeEventListener("message", globalMessageHandler);
+    globalMessageHandler = null;
+  }
+  teardownThemeListener();
+  globalListenersInitialized = false;
+}
+function ensureGlobalListeners() {
+  if (globalListenersInitialized) return;
+  globalListenersInitialized = true;
+  setupGlobalListeners();
+}
+
+// src/loading.ts
+var DEFAULT_COLORS = {
+  light: {
+    bg: "#ffffff",
+    primary: "#7629C8"
+  },
+  dark: {
+    bg: "#02040a",
+    primary: "#B170FF"
+  }
+};
+function getLoadingColors(options) {
+  const theme = resolveTheme(options?.theme);
+  const isDark = theme === "dark";
+  const brandColors = isDark ? options?.brand?.dark : options?.brand?.light;
+  return {
+    bg: brandColors?.bg || (isDark ? DEFAULT_COLORS.dark.bg : DEFAULT_COLORS.light.bg),
+    primary: brandColors?.primary || (isDark ? DEFAULT_COLORS.dark.primary : DEFAULT_COLORS.light.primary)
+  };
+}
+function createLoadingIndicator(options) {
+  if (!hasDom()) {
+    return { remove: () => {
+    }, style: {} };
+  }
+  const colors = getLoadingColors(options);
+  const container = document.createElement("div");
+  container.className = "perspective-loading";
+  container.style.cssText = `
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: ${colors.bg};
+    transition: opacity 0.3s ease;
+    z-index: 1;
+  `;
+  const spinner = document.createElement("div");
+  spinner.style.cssText = `
+    width: 2.5rem;
+    height: 2.5rem;
+    border: 3px solid ${hexToRgba(colors.primary, 0.15)};
+    border-top-color: ${colors.primary};
+    border-radius: 50%;
+    animation: perspective-spin 0.8s linear infinite;
+  `;
+  container.appendChild(spinner);
+  return container;
+}
+
+// src/styles.ts
+var stylesInjected = false;
+var LIGHT_THEME = `
+  --perspective-overlay-bg: rgba(0, 0, 0, 0.5);
+  --perspective-modal-bg: #ffffff;
+  --perspective-modal-text: #151B23;
+  --perspective-close-bg: rgba(0, 0, 0, 0.1);
+  --perspective-close-text: #666666;
+  --perspective-close-hover-bg: rgba(0, 0, 0, 0.2);
+  --perspective-close-hover-text: #333333;
+  --perspective-border: hsl(240 6% 90%);
+`;
+var DARK_THEME = `
+  --perspective-overlay-bg: rgba(0, 0, 0, 0.7);
+  --perspective-modal-bg: #02040a;
+  --perspective-modal-text: #ffffff;
+  --perspective-close-bg: rgba(255, 255, 255, 0.1);
+  --perspective-close-text: #a0a0a0;
+  --perspective-close-hover-bg: rgba(255, 255, 255, 0.2);
+  --perspective-close-hover-text: #ffffff;
+  --perspective-border: hsl(217 33% 17%);
+`;
+function injectStyles() {
+  if (!hasDom()) return;
+  if (stylesInjected) return;
+  stylesInjected = true;
+  const style = document.createElement("style");
+  style.id = "perspective-embed-styles";
+  style.textContent = `
+    /* Theme-aware color variables */
+    .perspective-embed-root, .perspective-light-theme {
+      ${LIGHT_THEME}
+      --perspective-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+      --perspective-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+      --perspective-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+      --perspective-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+      --perspective-radius: 1.2rem;
+      --perspective-radius-sm: calc(var(--perspective-radius) - 4px);
+    }
+
+    /* Dark theme */
+    .perspective-dark-theme {
+      ${DARK_THEME}
+    }
+
+    /* System dark mode support */
+    @media (prefers-color-scheme: dark) {
+      .perspective-embed-root:not(.perspective-light-theme) {
+        ${DARK_THEME}
+      }
+    }
+
+    /* Scrollbar styling */
+    .perspective-modal,
+    .perspective-slider,
+    .perspective-float-window,
+    .perspective-chat-window {
+      scrollbar-width: thin;
+      scrollbar-color: var(--perspective-border) transparent;
+    }
+
+    .perspective-modal::-webkit-scrollbar,
+    .perspective-slider::-webkit-scrollbar,
+    .perspective-float-window::-webkit-scrollbar,
+    .perspective-chat-window::-webkit-scrollbar {
+      width: 10px;
+      height: 10px;
+    }
+
+    .perspective-modal::-webkit-scrollbar-track,
+    .perspective-slider::-webkit-scrollbar-track,
+    .perspective-float-window::-webkit-scrollbar-track,
+    .perspective-chat-window::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .perspective-modal::-webkit-scrollbar-thumb,
+    .perspective-slider::-webkit-scrollbar-thumb,
+    .perspective-float-window::-webkit-scrollbar-thumb,
+    .perspective-chat-window::-webkit-scrollbar-thumb {
+      background-color: var(--perspective-border);
+      border-radius: 9999px;
+      border: 2px solid transparent;
+      background-clip: padding-box;
+    }
+
+    .perspective-modal::-webkit-scrollbar-thumb:hover,
+    .perspective-slider::-webkit-scrollbar-thumb:hover,
+    .perspective-float-window::-webkit-scrollbar-thumb:hover,
+    .perspective-chat-window::-webkit-scrollbar-thumb:hover {
+      background-color: color-mix(in srgb, var(--perspective-border) 80%, currentColor);
+    }
+
+    /* Overlay for popup/modal */
+    .perspective-overlay {
+      position: fixed;
+      inset: 0;
+      background: var(--perspective-overlay-bg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+      animation: perspective-fade-in 0.2s ease-out;
+    }
+
+    @keyframes perspective-fade-in {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    @keyframes perspective-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    /* Modal container */
+    .perspective-modal {
+      position: relative;
+      width: 90%;
+      max-width: 600px;
+      height: 80vh;
+      max-height: 700px;
+      background: var(--perspective-modal-bg);
+      color: var(--perspective-modal-text);
+      border-radius: var(--perspective-radius);
+      overflow: hidden;
+      box-shadow: var(--perspective-shadow-xl);
+      animation: perspective-slide-up 0.3s ease-out;
+    }
+
+    @keyframes perspective-slide-up {
+      from {
+        opacity: 0;
+        transform: translateY(20px) scale(0.95);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+      }
+    }
+
+    .perspective-modal iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+
+    /* Close button */
+    .perspective-close {
+      position: absolute;
+      top: 1rem;
+      right: 1.5rem;
+      width: 2rem;
+      height: 2rem;
+      border: none;
+      background: var(--perspective-close-bg);
+      color: var(--perspective-close-text);
+      border-radius: 50%;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1rem;
+      z-index: 10;
+      transition: background-color 0.2s ease, color 0.2s ease;
+    }
+
+    .perspective-close:hover {
+      background: var(--perspective-close-hover-bg);
+      color: var(--perspective-close-hover-text);
+    }
+
+    .perspective-close:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+
+    .perspective-close svg {
+      width: 1rem;
+      height: 1rem;
+      stroke-width: 2;
+    }
+
+    /* Slider drawer */
+    .perspective-slider {
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 100%;
+      max-width: 450px;
+      height: 100%;
+      background: var(--perspective-modal-bg);
+      color: var(--perspective-modal-text);
+      box-shadow: var(--perspective-shadow-xl);
+      z-index: 9999;
+      animation: perspective-slide-in 0.3s ease-out;
+    }
+
+    @keyframes perspective-slide-in {
+      from { transform: translateX(100%); }
+      to { transform: translateX(0); }
+    }
+
+    .perspective-slider iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+
+    .perspective-slider .perspective-close {
+      top: 1rem;
+      right: 2rem;
+    }
+
+    /* Slider backdrop */
+    .perspective-slider-backdrop {
+      position: fixed;
+      inset: 0;
+      background: var(--perspective-overlay-bg);
+      z-index: 9998;
+      animation: perspective-fade-in 0.2s ease-out;
+    }
+
+    /* Float bubble (and legacy chat-bubble alias) */
+    .perspective-float-bubble,
+    .perspective-chat-bubble {
+      position: fixed;
+      bottom: 1.5rem;
+      right: 1.5rem;
+      width: 3.75rem;
+      height: 3.75rem;
+      border-radius: 50%;
+      background: var(--perspective-float-bg, var(--perspective-chat-bg, #7629C8));
+      color: white;
+      border: none;
+      cursor: pointer;
+      box-shadow: var(--perspective-float-shadow, var(--perspective-chat-shadow, 0 4px 12px rgba(118, 41, 200, 0.4)));
+      z-index: 9996;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .perspective-float-bubble:hover,
+    .perspective-chat-bubble:hover {
+      transform: scale(1.05);
+      box-shadow: var(--perspective-float-shadow-hover, var(--perspective-chat-shadow-hover, 0 6px 16px rgba(118, 41, 200, 0.5)));
+    }
+
+    .perspective-float-bubble:focus-visible,
+    .perspective-chat-bubble:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+
+    .perspective-float-bubble svg,
+    .perspective-chat-bubble svg {
+      width: 1.75rem;
+      height: 1.75rem;
+      stroke-width: 2;
+    }
+
+    /* Float window (and legacy chat-window alias) */
+    .perspective-float-window,
+    .perspective-chat-window {
+      position: fixed;
+      bottom: 6.25rem;
+      right: 1.5rem;
+      width: 380px;
+      height: calc(100vh - 8.75rem);
+      max-height: 600px;
+      background: var(--perspective-modal-bg);
+      color: var(--perspective-modal-text);
+      border-radius: var(--perspective-radius);
+      overflow: hidden;
+      box-shadow: var(--perspective-shadow-xl);
+      z-index: 9997;
+      animation: perspective-float-open 0.3s ease-out;
+    }
+
+    @keyframes perspective-float-open {
+      from {
+        opacity: 0;
+        transform: translateY(20px) scale(0.9);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+      }
+    }
+
+    .perspective-float-window iframe,
+    .perspective-chat-window iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+
+    .perspective-float-window .perspective-close,
+    .perspective-chat-window .perspective-close {
+      top: 1rem;
+      right: 1.5rem;
+    }
+
+    /* Fullpage */
+    .perspective-fullpage {
+      position: fixed;
+      inset: 0;
+      z-index: 9999;
+      background: var(--perspective-modal-bg);
+    }
+
+    .perspective-fullpage iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+
+    /* Responsive */
+    @media (max-width: 640px) {
+      .perspective-modal {
+        width: 100%;
+        height: 100%;
+        max-width: none;
+        max-height: none;
+        border-radius: 0;
+      }
+
+      .perspective-slider {
+        max-width: 100%;
+      }
+
+      .perspective-float-window,
+      .perspective-chat-window {
+        width: calc(100% - 2rem);
+        right: 1rem;
+        bottom: 5.625rem;
+        height: calc(100vh - 7.5rem);
+      }
+
+      .perspective-float-bubble,
+      .perspective-chat-bubble {
+        bottom: 1rem;
+        right: 1rem;
+      }
+    }
+
+    @media (max-width: 450px) {
+      .perspective-float-window,
+      .perspective-chat-window {
+        width: calc(100% - 1rem);
+        right: 0.5rem;
+        bottom: 5rem;
+        height: calc(100vh - 6.5rem);
+      }
+
+      .perspective-float-bubble,
+      .perspective-chat-bubble {
+        bottom: 0.75rem;
+        right: 0.75rem;
+        width: 3.5rem;
+        height: 3.5rem;
+      }
+
+      .perspective-float-bubble svg,
+      .perspective-chat-bubble svg {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+    }
+  `;
+  document.head.appendChild(style);
+}
+var MIC_ICON = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z" />
+</svg>`;
+var CLOSE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+</svg>`;
+
+// src/widget.ts
+var widgetResources = /* @__PURE__ */ new WeakMap();
+function createNoOpHandle(researchId, type) {
+  return {
+    unmount: () => {
+    },
+    update: () => {
+    },
+    destroy: () => {
+    },
+    researchId,
+    type,
+    iframe: null,
+    container: null
+  };
+}
+function createExistingWidgetHandle(container, researchId) {
+  const existingWrapper = container.querySelector(
+    ".perspective-embed-root"
+  );
+  const existingIframe = container.querySelector(
+    "iframe[data-perspective]"
+  );
+  let destroyed = false;
+  const unmount = () => {
+    if (destroyed) return;
+    destroyed = true;
+    if (existingIframe) {
+      const resources = widgetResources.get(existingIframe);
+      if (resources) {
+        resources.cleanup();
+        resources.unregister();
+        widgetResources.delete(existingIframe);
+      }
+    }
+    existingWrapper?.remove();
+  };
+  return {
+    unmount,
+    update: () => {
+    },
+    destroy: unmount,
+    researchId,
+    type: "widget",
+    iframe: existingIframe,
+    container
+  };
+}
+function createWidget(container, config) {
+  const { researchId } = config;
+  if (!hasDom() || !container) {
+    return createNoOpHandle(researchId, "widget");
+  }
+  if (container.querySelector("iframe[data-perspective]")) {
+    return createExistingWidgetHandle(container, researchId);
+  }
+  const host = getHost(config.host);
+  injectStyles();
+  ensureGlobalListeners();
+  const wrapper = document.createElement("div");
+  wrapper.className = cn("perspective-embed-root", getThemeClass(config.theme));
+  wrapper.style.cssText = "position:relative;width:100%;height:100%;min-height:500px;";
+  const loading = createLoadingIndicator({
+    theme: config.theme,
+    brand: config.brand
+  });
+  wrapper.appendChild(loading);
+  const iframe = createIframe(
+    researchId,
+    "widget",
+    host,
+    config.params,
+    config.brand,
+    config.theme
+  );
+  iframe.style.width = "100%";
+  iframe.style.height = "100%";
+  iframe.style.minHeight = "500px";
+  iframe.style.opacity = "0";
+  iframe.style.transition = "opacity 0.3s ease";
+  wrapper.appendChild(iframe);
+  container.appendChild(wrapper);
+  let currentConfig = { ...config };
+  const cleanup = setupMessageListener(
+    researchId,
+    {
+      get onReady() {
+        return () => {
+          loading.style.opacity = "0";
+          iframe.style.opacity = "1";
+          setTimeout(() => loading.remove(), 300);
+          currentConfig.onReady?.();
+        };
+      },
+      get onSubmit() {
+        return currentConfig.onSubmit;
+      },
+      get onNavigate() {
+        return currentConfig.onNavigate;
+      },
+      get onClose() {
+        return currentConfig.onClose;
+      },
+      get onError() {
+        return currentConfig.onError;
+      }
+    },
+    iframe,
+    host,
+    { skipResize: true }
+  );
+  const unregisterIframe = registerIframe(iframe, host);
+  widgetResources.set(iframe, {
+    cleanup,
+    unregister: unregisterIframe,
+    wrapper
+  });
+  let destroyed = false;
+  const unmount = () => {
+    if (destroyed) return;
+    destroyed = true;
+    cleanup();
+    unregisterIframe();
+    widgetResources.delete(iframe);
+    wrapper.remove();
+  };
+  return {
+    unmount,
+    update: (options) => {
+      currentConfig = { ...currentConfig, ...options };
+    },
+    destroy: unmount,
+    researchId,
+    type: "widget",
+    iframe,
+    container
+  };
+}
+
+// src/popup.ts
+function createNoOpHandle2(researchId) {
+  return {
+    unmount: () => {
+    },
+    update: () => {
+    },
+    destroy: () => {
+    },
+    researchId,
+    type: "popup",
+    iframe: null,
+    container: null
+  };
+}
+function openPopup(config) {
+  const { researchId } = config;
+  if (!hasDom()) {
+    return createNoOpHandle2(researchId);
+  }
+  const host = getHost(config.host);
+  injectStyles();
+  ensureGlobalListeners();
+  const overlay = document.createElement("div");
+  overlay.className = cn(
+    "perspective-overlay perspective-embed-root",
+    getThemeClass(config.theme)
+  );
+  const modal = document.createElement("div");
+  modal.className = "perspective-modal";
+  const closeBtn = document.createElement("button");
+  closeBtn.className = "perspective-close";
+  closeBtn.innerHTML = CLOSE_ICON;
+  closeBtn.setAttribute("aria-label", "Close");
+  const loading = createLoadingIndicator({
+    theme: config.theme,
+    brand: config.brand
+  });
+  loading.style.borderRadius = "16px";
+  const iframe = createIframe(
+    researchId,
+    "popup",
+    host,
+    config.params,
+    config.brand,
+    config.theme
+  );
+  iframe.style.opacity = "0";
+  iframe.style.transition = "opacity 0.3s ease";
+  modal.appendChild(closeBtn);
+  modal.appendChild(loading);
+  modal.appendChild(iframe);
+  overlay.appendChild(modal);
+  document.body.appendChild(overlay);
+  let currentConfig = { ...config };
+  let isOpen = true;
+  let messageCleanup = null;
+  const unregisterIframe = registerIframe(iframe, host);
+  const destroy = () => {
+    if (!isOpen) return;
+    isOpen = false;
+    messageCleanup?.();
+    unregisterIframe();
+    overlay.remove();
+    document.removeEventListener("keydown", escHandler);
+    currentConfig.onClose?.();
+  };
+  messageCleanup = setupMessageListener(
+    researchId,
+    {
+      get onReady() {
+        return () => {
+          loading.style.opacity = "0";
+          iframe.style.opacity = "1";
+          setTimeout(() => loading.remove(), 300);
+          currentConfig.onReady?.();
+        };
+      },
+      get onSubmit() {
+        return currentConfig.onSubmit;
+      },
+      get onNavigate() {
+        return currentConfig.onNavigate;
+      },
+      get onClose() {
+        return destroy;
+      },
+      get onError() {
+        return currentConfig.onError;
+      }
+    },
+    iframe,
+    host,
+    { skipResize: true }
+  );
+  closeBtn.addEventListener("click", destroy);
+  overlay.addEventListener("click", (e) => {
+    if (e.target === overlay) destroy();
+  });
+  const escHandler = (e) => {
+    if (e.key === "Escape") {
+      destroy();
+    }
+  };
+  document.addEventListener("keydown", escHandler);
+  return {
+    unmount: destroy,
+    update: (options) => {
+      currentConfig = { ...currentConfig, ...options };
+    },
+    destroy,
+    researchId,
+    type: "popup",
+    iframe,
+    container: overlay
+  };
+}
+
+// src/slider.ts
+function createNoOpHandle3(researchId) {
+  return {
+    unmount: () => {
+    },
+    update: () => {
+    },
+    destroy: () => {
+    },
+    researchId,
+    type: "slider",
+    iframe: null,
+    container: null
+  };
+}
+function openSlider(config) {
+  const { researchId } = config;
+  if (!hasDom()) {
+    return createNoOpHandle3(researchId);
+  }
+  const host = getHost(config.host);
+  injectStyles();
+  ensureGlobalListeners();
+  const backdrop = document.createElement("div");
+  backdrop.className = cn(
+    "perspective-slider-backdrop perspective-embed-root",
+    getThemeClass(config.theme)
+  );
+  const slider = document.createElement("div");
+  slider.className = cn(
+    "perspective-slider perspective-embed-root",
+    getThemeClass(config.theme)
+  );
+  const closeBtn = document.createElement("button");
+  closeBtn.className = "perspective-close";
+  closeBtn.innerHTML = CLOSE_ICON;
+  closeBtn.setAttribute("aria-label", "Close");
+  const loading = createLoadingIndicator({
+    theme: config.theme,
+    brand: config.brand
+  });
+  const iframe = createIframe(
+    researchId,
+    "slider",
+    host,
+    config.params,
+    config.brand,
+    config.theme
+  );
+  iframe.style.opacity = "0";
+  iframe.style.transition = "opacity 0.3s ease";
+  slider.appendChild(closeBtn);
+  slider.appendChild(loading);
+  slider.appendChild(iframe);
+  document.body.appendChild(backdrop);
+  document.body.appendChild(slider);
+  let currentConfig = { ...config };
+  let isOpen = true;
+  let messageCleanup = null;
+  const unregisterIframe = registerIframe(iframe, host);
+  const destroy = () => {
+    if (!isOpen) return;
+    isOpen = false;
+    messageCleanup?.();
+    unregisterIframe();
+    slider.remove();
+    backdrop.remove();
+    document.removeEventListener("keydown", escHandler);
+    currentConfig.onClose?.();
+  };
+  messageCleanup = setupMessageListener(
+    researchId,
+    {
+      get onReady() {
+        return () => {
+          loading.style.opacity = "0";
+          iframe.style.opacity = "1";
+          setTimeout(() => loading.remove(), 300);
+          currentConfig.onReady?.();
+        };
+      },
+      get onSubmit() {
+        return currentConfig.onSubmit;
+      },
+      get onNavigate() {
+        return currentConfig.onNavigate;
+      },
+      get onClose() {
+        return destroy;
+      },
+      get onError() {
+        return currentConfig.onError;
+      }
+    },
+    iframe,
+    host,
+    { skipResize: true }
+  );
+  closeBtn.addEventListener("click", destroy);
+  backdrop.addEventListener("click", destroy);
+  const escHandler = (e) => {
+    if (e.key === "Escape") {
+      destroy();
+    }
+  };
+  document.addEventListener("keydown", escHandler);
+  return {
+    unmount: destroy,
+    update: (options) => {
+      currentConfig = { ...currentConfig, ...options };
+    },
+    destroy,
+    researchId,
+    type: "slider",
+    iframe,
+    container: slider
+  };
+}
+
+// src/float.ts
+function createNoOpHandle4(researchId) {
+  return {
+    unmount: () => {
+    },
+    update: () => {
+    },
+    destroy: () => {
+    },
+    open: () => {
+    },
+    close: () => {
+    },
+    toggle: () => {
+    },
+    isOpen: false,
+    researchId,
+    type: "float",
+    iframe: null,
+    container: null
+  };
+}
+function createFloatBubble(config) {
+  const { researchId, _themeConfig, theme, brand } = config;
+  if (!hasDom()) {
+    return createNoOpHandle4(researchId);
+  }
+  const host = getHost(config.host);
+  injectStyles();
+  ensureGlobalListeners();
+  const bubble = document.createElement("button");
+  bubble.className = cn(
+    "perspective-float-bubble perspective-embed-root",
+    getThemeClass(config.theme)
+  );
+  bubble.innerHTML = MIC_ICON;
+  bubble.setAttribute("aria-label", "Open chat");
+  bubble.setAttribute("data-perspective", "float-bubble");
+  if (_themeConfig || brand) {
+    const isDark = resolveIsDark(theme);
+    const bg = isDark ? brand?.dark?.primary ?? _themeConfig?.darkPrimaryColor ?? "#a78bfa" : brand?.light?.primary ?? _themeConfig?.primaryColor ?? "#7c3aed";
+    bubble.style.setProperty("--perspective-float-bg", bg);
+    bubble.style.setProperty(
+      "--perspective-float-shadow",
+      `0 4px 12px ${bg}66`
+    );
+    bubble.style.setProperty(
+      "--perspective-float-shadow-hover",
+      `0 6px 16px ${bg}80`
+    );
+    bubble.style.backgroundColor = bg;
+    bubble.style.boxShadow = `0 4px 12px ${bg}66`;
+  }
+  document.body.appendChild(bubble);
+  let floatWindow = null;
+  let iframe = null;
+  let cleanup = null;
+  let unregisterIframe = null;
+  let isOpen = false;
+  let currentConfig = { ...config };
+  const openFloat = () => {
+    if (isOpen) return;
+    isOpen = true;
+    floatWindow = document.createElement("div");
+    floatWindow.className = cn(
+      "perspective-float-window perspective-embed-root",
+      getThemeClass(currentConfig.theme)
+    );
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "perspective-close";
+    closeBtn.innerHTML = CLOSE_ICON;
+    closeBtn.setAttribute("aria-label", "Close chat");
+    closeBtn.addEventListener("click", closeFloat);
+    const loading = createLoadingIndicator({
+      theme: currentConfig.theme,
+      brand: currentConfig.brand
+    });
+    loading.style.borderRadius = "16px";
+    iframe = createIframe(
+      researchId,
+      "float",
+      host,
+      currentConfig.params,
+      currentConfig.brand,
+      currentConfig.theme
+    );
+    iframe.style.opacity = "0";
+    iframe.style.transition = "opacity 0.3s ease";
+    floatWindow.appendChild(closeBtn);
+    floatWindow.appendChild(loading);
+    floatWindow.appendChild(iframe);
+    document.body.appendChild(floatWindow);
+    cleanup = setupMessageListener(
+      researchId,
+      {
+        get onReady() {
+          return () => {
+            loading.style.opacity = "0";
+            iframe.style.opacity = "1";
+            setTimeout(() => loading.remove(), 300);
+            currentConfig.onReady?.();
+          };
+        },
+        get onSubmit() {
+          return currentConfig.onSubmit;
+        },
+        get onNavigate() {
+          return currentConfig.onNavigate;
+        },
+        get onClose() {
+          return closeFloat;
+        },
+        get onError() {
+          return currentConfig.onError;
+        }
+      },
+      iframe,
+      host,
+      { skipResize: true }
+    );
+    if (iframe) {
+      unregisterIframe = registerIframe(iframe, host);
+    }
+    bubble.innerHTML = CLOSE_ICON;
+    bubble.setAttribute("aria-label", "Close chat");
+  };
+  const closeFloat = () => {
+    if (!isOpen) return;
+    isOpen = false;
+    cleanup?.();
+    unregisterIframe?.();
+    floatWindow?.remove();
+    floatWindow = null;
+    iframe = null;
+    cleanup = null;
+    unregisterIframe = null;
+    bubble.innerHTML = MIC_ICON;
+    bubble.setAttribute("aria-label", "Open chat");
+    currentConfig.onClose?.();
+  };
+  bubble.addEventListener("click", () => {
+    if (isOpen) {
+      closeFloat();
+    } else {
+      openFloat();
+    }
+  });
+  const unmount = () => {
+    closeFloat();
+    bubble.remove();
+  };
+  return {
+    unmount,
+    update: (options) => {
+      currentConfig = { ...currentConfig, ...options };
+    },
+    destroy: unmount,
+    open: openFloat,
+    close: closeFloat,
+    toggle: () => {
+      if (isOpen) {
+        closeFloat();
+      } else {
+        openFloat();
+      }
+    },
+    get isOpen() {
+      return isOpen;
+    },
+    researchId,
+    type: "float",
+    get iframe() {
+      return iframe;
+    },
+    container: bubble
+  };
+}
+var createChatBubble = createFloatBubble;
+
+// src/fullpage.ts
+function createNoOpHandle5(researchId) {
+  return {
+    unmount: () => {
+    },
+    update: () => {
+    },
+    destroy: () => {
+    },
+    researchId,
+    type: "fullpage",
+    iframe: null,
+    container: null
+  };
+}
+function createFullpage(config) {
+  const { researchId } = config;
+  if (!hasDom()) {
+    return createNoOpHandle5(researchId);
+  }
+  const host = getHost(config.host);
+  injectStyles();
+  ensureGlobalListeners();
+  const container = document.createElement("div");
+  container.className = cn(
+    "perspective-embed-root perspective-fullpage",
+    getThemeClass(config.theme)
+  );
+  const loading = createLoadingIndicator({
+    theme: config.theme,
+    brand: config.brand
+  });
+  container.appendChild(loading);
+  const iframe = createIframe(
+    researchId,
+    "fullpage",
+    host,
+    config.params,
+    config.brand,
+    config.theme
+  );
+  iframe.style.opacity = "0";
+  iframe.style.transition = "opacity 0.3s ease";
+  container.appendChild(iframe);
+  document.body.appendChild(container);
+  let currentConfig = { ...config };
+  let messageCleanup = null;
+  const unregisterIframe = registerIframe(iframe, host);
+  const unmount = () => {
+    messageCleanup?.();
+    unregisterIframe();
+    container.remove();
+    currentConfig.onClose?.();
+  };
+  messageCleanup = setupMessageListener(
+    researchId,
+    {
+      get onReady() {
+        return () => {
+          loading.style.opacity = "0";
+          iframe.style.opacity = "1";
+          setTimeout(() => loading.remove(), 300);
+          currentConfig.onReady?.();
+        };
+      },
+      get onSubmit() {
+        return currentConfig.onSubmit;
+      },
+      get onNavigate() {
+        return currentConfig.onNavigate;
+      },
+      get onClose() {
+        return unmount;
+      },
+      get onError() {
+        return currentConfig.onError;
+      }
+    },
+    iframe,
+    host,
+    { skipResize: true }
+  );
+  return {
+    unmount,
+    update: (options) => {
+      currentConfig = { ...currentConfig, ...options };
+    },
+    destroy: unmount,
+    researchId,
+    type: "fullpage",
+    iframe,
+    container
+  };
+}
+
+exports.BRAND_KEYS = BRAND_KEYS;
+exports.CURRENT_FEATURES = CURRENT_FEATURES;
+exports.DATA_ATTRS = DATA_ATTRS;
+exports.FEATURES = FEATURES;
+exports.MESSAGE_TYPES = MESSAGE_TYPES;
+exports.PARAM_KEYS = PARAM_KEYS;
+exports.SDK_VERSION = SDK_VERSION;
+exports.THEME_VALUES = THEME_VALUES;
+exports.configure = configure;
+exports.createChatBubble = createChatBubble;
+exports.createFloatBubble = createFloatBubble;
+exports.createFullpage = createFullpage;
+exports.createWidget = createWidget;
+exports.getConfig = getConfig;
+exports.openPopup = openPopup;
+exports.openSlider = openSlider;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map