@thisispamela/widget 1.1.0

package/dist/widget.js

@@ -0,0 +1,1097 @@
+var Pamela = (function (exports) {
+    'use strict';
+
+    /**
+     * Simple event emitter for widget callbacks
+     */
+    class EventEmitter {
+        constructor() {
+            this.listeners = new Map();
+        }
+        on(event, callback) {
+            const list = this.listeners.get(event) ?? [];
+            list.push(callback);
+            this.listeners.set(event, list);
+        }
+        off(event, callback) {
+            const list = this.listeners.get(event);
+            if (!list)
+                return;
+            const idx = list.indexOf(callback);
+            if (idx !== -1)
+                list.splice(idx, 1);
+            if (list.length === 0)
+                this.listeners.delete(event);
+        }
+        emit(event, ...args) {
+            const list = this.listeners.get(event);
+            if (!list)
+                return;
+            list.forEach((fn) => {
+                try {
+                    fn(...args);
+                }
+                catch (_) {
+                    // Swallow to avoid breaking other listeners
+                }
+            });
+        }
+        removeAllListeners(event) {
+            if (event) {
+                this.listeners.delete(event);
+            }
+            else {
+                this.listeners.clear();
+            }
+        }
+    }
+
+    /**
+     * Lightweight fetch-based API client for the widget.
+     * Imports shared types from @thisispamela/sdk for alignment.
+     */
+    class PamelaError extends Error {
+        constructor(message, options) {
+            super(message);
+            this.name = 'PamelaError';
+            this.code = options?.code;
+            this.errorCode = options?.errorCode;
+            this.statusCode = options?.statusCode;
+            this.details = options?.details;
+        }
+    }
+    function mapResponseToCall(raw) {
+        return {
+            id: raw.id,
+            status: raw.status,
+            to: '',
+            task: '',
+            createdAt: raw.created_at,
+        };
+    }
+    function mapStatusToCall(raw) {
+        const transcript = raw.transcript?.map((t) => ({
+            role: t.role,
+            content: t.content,
+            timestamp: t.timestamp ?? 0,
+        }));
+        return {
+            id: raw.id,
+            status: raw.status,
+            to: raw.to,
+            task: '',
+            duration: raw.duration_seconds,
+            transcript,
+            summary: raw.summary,
+            createdAt: raw.created_at,
+            completedAt: raw.completed_at,
+        };
+    }
+    class PamelaApiClient {
+        constructor(options) {
+            this.authToken = options.authToken;
+            this.baseUrl = (options.baseUrl || 'https://api.thisispamela.com').replace(/\/$/, '');
+        }
+        async request(method, path, body) {
+            const url = `${this.baseUrl}${path}`;
+            const headers = {
+                'Content-Type': 'application/json',
+                Authorization: `Bearer ${this.authToken}`,
+            };
+            const response = await fetch(url, {
+                method,
+                headers,
+                body: body ? JSON.stringify(body) : undefined,
+            });
+            const data = await response.json().catch(() => ({}));
+            if (!response.ok) {
+                const d = data;
+                const message = d.detail != null
+                    ? typeof d.detail === 'string'
+                        ? d.detail
+                        : d.detail?.message ?? 'Request failed'
+                    : d.message ?? 'Request failed';
+                const detail = data.detail;
+                const code = typeof detail === 'object' ? detail?.error_code : undefined;
+                const errCode = data.detail?.error_code
+                    ?? data.error_code;
+                throw new PamelaError(message, {
+                    code: code != null ? String(code) : undefined,
+                    errorCode: typeof errCode === 'number' ? errCode : undefined,
+                    statusCode: response.status,
+                });
+            }
+            return data;
+        }
+        async createCall(options) {
+            const body = {
+                to: options.to,
+                task: options.task,
+                voice: options.voice ?? 'auto',
+                agent_name: options.agentName,
+                caller_name: options.callerName,
+                max_duration_seconds: options.maxDuration,
+                metadata: options.metadata,
+                webhooks: options.webhooks,
+            };
+            const raw = await this.request('POST', '/api/b2b/v1/calls', body);
+            const call = mapResponseToCall(raw);
+            call.to = options.to;
+            call.task = options.task;
+            return call;
+        }
+        async getCall(callId) {
+            const raw = await this.request('GET', `/api/b2b/v1/calls/${callId}`);
+            return mapStatusToCall(raw);
+        }
+        async cancelCall(callId) {
+            await this.request('POST', `/api/b2b/v1/calls/${callId}/cancel`);
+        }
+        /**
+         * Poll call status until terminal state or timeout.
+         */
+        async pollCallStatus(callId, options = {}) {
+            const intervalMs = options.intervalMs ?? 2000;
+            const timeoutMs = options.timeoutMs ?? 5 * 60 * 1000;
+            const deadline = Date.now() + timeoutMs;
+            const poll = async () => {
+                const call = await this.getCall(callId);
+                const terminal = ['completed', 'failed', 'cancelled'].includes(call.status);
+                if (terminal)
+                    return call;
+                if (Date.now() >= deadline)
+                    return call;
+                await new Promise((r) => setTimeout(r, intervalMs));
+                return poll();
+            };
+            return poll();
+        }
+    }
+
+    /**
+     * Design tokens aligned with WEBSITE_DESIGN_SCHEMA.md (light + dark).
+     * Plan aliases: --pamela-primary, --pamela-background, --pamela-border-radius for host overrides.
+     */
+    const LIGHT_TOKENS = `
+:root, .pamela-widget-root {
+  --pamela-accent: #F27A1A;
+  --pamela-accent-2: #F06C4F;
+  --pamela-accent-3: #F3A84C;
+  --pamela-accent-gradient: linear-gradient(90deg, var(--pamela-accent), var(--pamela-accent-2));
+  --pamela-primary: var(--pamela-accent);
+  --pamela-bg: #ffffff;
+  --pamela-background: var(--pamela-bg);
+  --pamela-surface: rgba(255, 255, 255, 0.78);
+  --pamela-surface-border: rgba(231, 171, 132, 0.24);
+  --pamela-surface-strong: rgba(255, 255, 255, 0.88);
+  --pamela-surface-liquid: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.38));
+  --pamela-transcript-agent-bg: rgba(255, 255, 255, 0.2);
+  --pamela-transcript-recipient-bg: rgba(250, 147, 28, 0.2);
+  --pamela-text: #1C1917;
+  --pamela-text-secondary: rgba(28, 25, 17, 0.78);
+  --pamela-text-muted: rgba(28, 25, 17, 0.55);
+  --pamela-shadow: 0 12px 26px rgba(28, 25, 17, 0.1);
+  --pamela-shadow-hover: 0 24px 44px rgba(28, 25, 17, 0.18);
+  --pamela-glow: 0 0 32px rgba(250, 147, 28, 0.2);
+  --pamela-cta-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.7), rgba(250, 147, 28, 0.32));
+  --pamela-cta-border: 1px solid rgba(250, 147, 28, 0.4);
+  --pamela-blur: 24px;
+  --pamela-radius-sm: 0.5rem;
+  --pamela-radius-md: 0.75rem;
+  --pamela-radius-lg: 1rem;
+  --pamela-radius-xl: 1.5rem;
+  --pamela-border-radius: var(--pamela-radius-md);
+  --pamela-focus-ring: 0 0 0 3px rgba(250, 147, 28, 0.28);
+  --pamela-font: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+`;
+    const DARK_TOKENS = `
+.pamela-dark .pamela-widget-root,
+.pamela-widget-root.pamela-theme-dark,
+[data-pamela-theme="dark"] .pamela-widget-root {
+  --pamela-bg: #171513;
+  --pamela-background: var(--pamela-bg);
+  --pamela-surface: rgba(255, 255, 255, 0.08);
+  --pamela-surface-border: rgba(255, 255, 255, 0.18);
+  --pamela-surface-strong: rgba(255, 255, 255, 0.22);
+  --pamela-surface-liquid: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
+  --pamela-transcript-agent-bg: rgba(255, 255, 255, 0.12);
+  --pamela-transcript-recipient-bg: rgba(250, 147, 28, 0.18);
+  --pamela-text: rgba(255, 255, 255, 0.95);
+  --pamela-text-secondary: rgba(255, 255, 255, 0.72);
+  --pamela-text-muted: rgba(255, 255, 255, 0.5);
+  --pamela-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
+  --pamela-shadow-hover: 0 26px 44px rgba(0, 0, 0, 0.7);
+  --pamela-glow: 0 0 30px rgba(250, 147, 28, 0.24);
+  --pamela-cta-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.22), rgba(250, 147, 28, 0.34));
+  --pamela-cta-border: 1px solid rgba(250, 147, 28, 0.5);
+  --pamela-focus-ring: 0 0 0 3px rgba(250, 147, 28, 0.35);
+}
+`;
+    const WIDGET_BASE = `
+.pamela-widget-root {
+  font-family: var(--pamela-font);
+  box-sizing: border-box;
+}
+.pamela-widget-root *,
+.pamela-widget-root *::before,
+.pamela-widget-root *::after {
+  box-sizing: border-box;
+}
+@keyframes pamela-pulse {
+  0%, 100% { transform: scale(1); opacity: 0.9; }
+  50% { transform: scale(1.05); opacity: 1; }
+}
+@keyframes pamela-pulse-active {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.12); }
+}
+`;
+    let styleEl = null;
+    function injectStyles(theme) {
+        if (typeof document === 'undefined')
+            return;
+        if (styleEl && document.contains(styleEl))
+            return;
+        styleEl = document.createElement('style');
+        styleEl.setAttribute('data-pamela-widget', 'tokens');
+        styleEl.textContent = LIGHT_TOKENS + DARK_TOKENS + WIDGET_BASE;
+        (document.head || document.documentElement).appendChild(styleEl);
+    }
+    function getThemeClass(theme) {
+        return theme === 'dark' ? 'pamela-theme-dark' : '';
+    }
+    /**
+     * Apply custom CSS variable overrides to widget roots.
+     * Call after injectStyles; host can pass options.styles from init.
+     */
+    function applyStyleOverrides(overrides) {
+        if (typeof document === 'undefined' || !overrides || typeof overrides !== 'object')
+            return;
+        const roots = document.querySelectorAll('.pamela-widget-root');
+        roots.forEach((root) => {
+            if (!(root instanceof HTMLElement))
+                return;
+            const r = root;
+            if (overrides['--pamela-accent'])
+                r.style.setProperty('--pamela-accent', overrides['--pamela-accent']);
+            if (overrides['--pamela-accent-2'])
+                r.style.setProperty('--pamela-accent-2', overrides['--pamela-accent-2']);
+            if (overrides['--pamela-radius']) {
+                r.style.setProperty('--pamela-radius-sm', overrides['--pamela-radius']);
+                r.style.setProperty('--pamela-radius-md', overrides['--pamela-radius']);
+                r.style.setProperty('--pamela-radius-lg', overrides['--pamela-radius']);
+                r.style.setProperty('--pamela-border-radius', overrides['--pamela-radius']);
+            }
+            if (overrides['--pamela-font'])
+                r.style.setProperty('--pamela-font', overrides['--pamela-font']);
+            if (overrides['--pamela-primary'])
+                r.style.setProperty('--pamela-primary', overrides['--pamela-primary']);
+            if (overrides['--pamela-background']) {
+                r.style.setProperty('--pamela-bg', overrides['--pamela-background']);
+                r.style.setProperty('--pamela-background', overrides['--pamela-background']);
+            }
+            if (overrides['--pamela-text'])
+                r.style.setProperty('--pamela-text', overrides['--pamela-text']);
+            if (overrides['--pamela-border-radius'])
+                r.style.setProperty('--pamela-border-radius', overrides['--pamela-border-radius']);
+        });
+    }
+
+    /**
+     * Inline SVG icons for the widget (no external assets)
+     */
+    const ICON_LOGO = '<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="16" r="14" fill="url(#pamela-g)" stroke="rgba(255,255,255,0.4)" stroke-width="1.5"/><path d="M12 11v10l8-5-8-5z" fill="white"/><defs><linearGradient id="pamela-g" x1="8" y1="8" x2="24" y2="24" gradientUnits="userSpaceOnUse"><stop stop-color="#F27A1A"/><stop offset="1" stop-color="#F06C4F"/></linearGradient></defs></svg>';
+    const ICON_CLOSE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
+    const ICON_CALL = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/></svg>';
+
+    /**
+     * Phone helpers for the widget (lightweight, no external deps).
+     */
+    function normalizePhone(value) {
+        const digits = value.replace(/[^\d+]/g, "");
+        if (!digits)
+            return "";
+        if (digits.startsWith("+"))
+            return digits;
+        if (digits.length === 10)
+            return `+1${digits}`;
+        if (digits.length === 11 && digits.startsWith("1"))
+            return `+${digits}`;
+        return `+${digits}`;
+    }
+    function isValidE164(value) {
+        return /^\+[1-9]\d{6,14}$/.test(value);
+    }
+
+    function buildPanelStyles(options = {}) {
+        const { width, minWidth, maxWidth, padding = "1rem", borderRadiusVar = "var(--pamela-radius-lg)", gap = "0.75rem", } = options;
+        const base = [
+            "background:var(--pamela-surface-liquid);border:1px solid var(--pamela-surface-border);",
+            `border-radius:${borderRadiusVar};box-shadow:var(--pamela-shadow);padding:${padding};`,
+            "backdrop-filter:blur(var(--pamela-blur));-webkit-backdrop-filter:blur(var(--pamela-blur));",
+            `display:flex;flex-direction:column;gap:${gap};`,
+        ];
+        if (width)
+            base.unshift(`width:${width};`);
+        if (minWidth)
+            base.unshift(`min-width:${minWidth};`);
+        if (maxWidth)
+            base.unshift(`max-width:${maxWidth};`);
+        return base.join(" ");
+    }
+    function buildInputStyles(options = {}) {
+        const { padding = "0.5rem 0.75rem", fontSize = "0.875rem" } = options;
+        return [
+            `width:100%;padding:${padding};border-radius:var(--pamela-radius-md);`,
+            "border:1px solid var(--pamela-surface-border);background:var(--pamela-surface-strong);",
+            `color:var(--pamela-text);font-family:var(--pamela-font);font-size:${fontSize};`,
+            "transition:border-color 0.15s, box-shadow 0.15s;",
+        ].join(" ");
+    }
+    function buildCtaStyles(options = {}) {
+        const { padding = "0.6rem 1rem" } = options;
+        return [
+            `width:100%;padding:${padding};border-radius:var(--pamela-radius-md);border:var(--pamela-cta-border);`,
+            "background:var(--pamela-cta-bg);color:var(--pamela-text);font-weight:600;font-family:var(--pamela-font);",
+            "cursor:pointer;box-shadow:var(--pamela-shadow);transition:opacity 0.2s, transform 0.15s;",
+        ].join(" ");
+    }
+
+    /**
+     * Floating call button that expands to a mini form (phone + task + Call Now)
+     */
+    const ROOT_CLASS$1 = 'pamela-widget-root';
+    const WRAPPER_CLASS = 'pamela-float-wrapper';
+    const BUTTON_CLASS = 'pamela-float-button';
+    const PANEL_CLASS = 'pamela-float-panel';
+    const INPUT_CLASS = 'pamela-float-input';
+    const CTA_CLASS = 'pamela-float-cta';
+    class FloatingButton {
+        constructor(options) {
+            this.root = null;
+            this.wrapper = null;
+            this.panel = null;
+            this.expanded = false;
+            this.currentCall = null;
+            this.options = options;
+        }
+        render(container) {
+            injectStyles(this.options.theme);
+            const themeClass = getThemeClass(this.options.theme);
+            const root = document.createElement('div');
+            root.className = `${ROOT_CLASS$1} ${themeClass}`.trim();
+            root.setAttribute('data-pamela-float', 'true');
+            const positionClass = `pamela-float-${this.options.position.replace('-', '_')}`;
+            const wrapper = document.createElement('div');
+            wrapper.className = `${WRAPPER_CLASS} ${positionClass}`;
+            wrapper.style.cssText = this.getWrapperStyles();
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = BUTTON_CLASS;
+            button.setAttribute('aria-label', 'Open Pamela call');
+            button.innerHTML = ICON_LOGO;
+            button.style.cssText = this.getButtonStyles();
+            const panel = document.createElement('div');
+            panel.className = PANEL_CLASS;
+            panel.setAttribute('hidden', 'true');
+            panel.style.cssText = buildPanelStyles({
+                minWidth: '280px',
+                maxWidth: '320px',
+                padding: '1rem',
+                borderRadiusVar: 'var(--pamela-radius-lg)',
+            });
+            const phoneInput = document.createElement('input');
+            phoneInput.type = 'tel';
+            phoneInput.placeholder = 'Phone number';
+            phoneInput.className = INPUT_CLASS;
+            phoneInput.setAttribute('aria-label', 'Phone number');
+            phoneInput.style.cssText = buildInputStyles();
+            const taskInput = document.createElement('textarea');
+            taskInput.placeholder = 'What should Pamela do?';
+            taskInput.rows = 2;
+            taskInput.className = INPUT_CLASS;
+            taskInput.setAttribute('aria-label', 'Task');
+            taskInput.style.cssText = buildInputStyles();
+            const statusEl = document.createElement('div');
+            statusEl.setAttribute('aria-live', 'polite');
+            statusEl.style.cssText =
+                'font-size: 0.75rem; color: var(--pamela-text-muted); margin-top: 0.25rem; min-height: 1rem;';
+            const cta = document.createElement('button');
+            cta.type = 'button';
+            cta.className = CTA_CLASS;
+            cta.style.cssText = buildCtaStyles();
+            const ctaSpan = document.createElement('span');
+            ctaSpan.style.cssText = 'display:inline-flex;align-items:center;gap:0.35rem;';
+            ctaSpan.innerHTML = ICON_CALL;
+            ctaSpan.appendChild(document.createTextNode(' Call Now'));
+            cta.appendChild(ctaSpan);
+            panel.appendChild(phoneInput);
+            panel.appendChild(taskInput);
+            panel.appendChild(statusEl);
+            panel.appendChild(cta);
+            button.addEventListener('click', () => this.toggle());
+            cta.addEventListener('click', () => this.handleSubmit(phoneInput, taskInput, statusEl));
+            wrapper.appendChild(button);
+            wrapper.appendChild(panel);
+            root.appendChild(wrapper);
+            container.appendChild(root);
+            this.root = root;
+            this.wrapper = wrapper;
+            this.panel = panel;
+            return root;
+        }
+        getWrapperStyles() {
+            const base = 'position:fixed;z-index:999999;display:flex;flex-direction:column;align-items:flex-end;gap:0.5rem;';
+            const inset = '24px';
+            const pos = this.options.position;
+            if (pos === 'bottom-right')
+                return `${base} bottom:${inset};right:${inset};`;
+            if (pos === 'bottom-left')
+                return `${base} bottom:${inset};left:${inset};`;
+            if (pos === 'top-right')
+                return `${base} top:${inset};right:${inset};`;
+            return `${base} top:${inset};left:${inset};`;
+        }
+        getButtonStyles() {
+            return [
+                'width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;',
+                'background:var(--pamela-accent-gradient);box-shadow:var(--pamela-shadow), var(--pamela-glow);',
+                'display:flex;align-items:center;justify-content:center;transition:transform 0.2s, box-shadow 0.2s;',
+            ].join(' ');
+        }
+        toggle() {
+            this.expanded = !this.expanded;
+            if (this.panel) {
+                this.panel.hidden = !this.expanded;
+            }
+            if (this.expanded)
+                this.options.onExpand?.();
+            else
+                this.options.onCollapse?.();
+        }
+        handleSubmit(phoneInput, taskInput, statusEl) {
+            const to = normalizePhone(phoneInput.value.trim());
+            const task = taskInput.value.trim();
+            if (!to || !task) {
+                statusEl.textContent = 'Please enter phone number and task.';
+                return;
+            }
+            if (!isValidE164(to)) {
+                statusEl.textContent = 'Please use a valid phone number (e.g. +1 555 123 4567).';
+                return;
+            }
+            statusEl.textContent = '';
+            this.options.onCreateCall(to, task);
+        }
+        setCallStatus(call) {
+            this.currentCall = call;
+            if (!this.panel)
+                return;
+            const statusEl = this.panel.querySelector('[aria-live="polite"]');
+            if (!statusEl)
+                return;
+            if (!call) {
+                statusEl.textContent = '';
+                return;
+            }
+            if (call.status === 'completed') {
+                statusEl.textContent = 'Call completed.' + (call.summary ? ' ' + call.summary.slice(0, 80) + '…' : '');
+            }
+            else if (call.status === 'failed' || call.status === 'cancelled') {
+                statusEl.textContent = `Call ${call.status}.`;
+            }
+            else {
+                statusEl.textContent = `Call ${call.status}…`;
+            }
+        }
+        destroy() {
+            this.root?.remove();
+            this.root = null;
+            this.wrapper = null;
+            this.panel = null;
+        }
+    }
+
+    /**
+     * Inline button mode: attach call buttons to elements with data-pamela-call
+     * Auto-initializes on DOM ready and watches for dynamically added elements.
+     */
+    const DATA_CALL = 'data-pamela-call';
+    const DATA_TO = 'data-to';
+    const DATA_TASK = 'data-task';
+    const DATA_VOICE = 'data-voice';
+    const DATA_LABEL = 'data-label';
+    const ATTR_INIT = 'data-pamela-inline-init';
+    const DEFAULT_LABEL = 'Call with Pamela';
+    function getStyles() {
+        return [
+            '.pamela-inline-btn{display:inline-flex;align-items:center;gap:0.35rem;padding:0.4rem 0.75rem;',
+            'border-radius:var(--pamela-radius-md, 0.75rem);border:1px solid var(--pamela-surface-border, rgba(231,171,132,0.24));',
+            'background:var(--pamela-cta-bg, linear-gradient(120deg, rgba(255,255,255,0.7), rgba(250,147,28,0.32)));',
+            'color:var(--pamela-text, #1C1917);font-family:var(--pamela-font);font-size:0.875rem;font-weight:600;',
+            'cursor:pointer;box-shadow:0 2px 8px rgba(28,25,17,0.08);transition:opacity 0.2s, transform 0.15s;}',
+            '.pamela-inline-btn:hover{opacity:0.95;transform:translateY(-1px);}',
+            '.pamela-inline-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none;}',
+        ].join('');
+    }
+    function injectInlineStyles() {
+        if (typeof document === 'undefined')
+            return;
+        const id = 'pamela-inline-styles';
+        if (document.getElementById(id))
+            return;
+        const el = document.createElement('style');
+        el.id = id;
+        el.setAttribute('data-pamela-widget', 'inline');
+        el.textContent = getStyles();
+        (document.head || document.documentElement).appendChild(el);
+    }
+    class InlineButton {
+        constructor(options) {
+            this.observer = null;
+            this.styleInjected = false;
+            this.options = options;
+        }
+        /**
+         * Scan the document for [data-pamela-call] and attach buttons.
+         */
+        attach(root = document) {
+            if (!this.styleInjected) {
+                injectInlineStyles();
+                this.styleInjected = true;
+            }
+            const scope = root instanceof Document ? root.body : root;
+            if (!scope)
+                return;
+            const elements = scope.querySelectorAll(`[${DATA_CALL}]:not([${ATTR_INIT}])`);
+            elements.forEach((el) => this.attachToElement(el));
+        }
+        attachToElement(el) {
+            if (el.getAttribute(ATTR_INIT) === 'true')
+                return;
+            const to = (el.getAttribute(DATA_TO) ?? '').trim();
+            const task = (el.getAttribute(DATA_TASK) ?? '').trim();
+            const voice = (el.getAttribute(DATA_VOICE) ?? '').trim() || undefined;
+            const label = el.getAttribute(DATA_LABEL) ?? DEFAULT_LABEL;
+            if (!to || !task)
+                return;
+            el.setAttribute(ATTR_INIT, 'true');
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'pamela-inline-btn';
+            button.textContent = label;
+            button.setAttribute('aria-label', `Call ${to} with Pamela: ${task}`);
+            button.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                const resolvedTo = normalizePhone(to);
+                this.options.onCallClick({ to: resolvedTo, task, voice });
+            });
+            if (el.tagName === 'BUTTON' || el.tagName === 'A') {
+                el.replaceWith(button);
+            }
+            else {
+                el.appendChild(button);
+            }
+        }
+        /**
+         * Start watching for dynamically added [data-pamela-call] elements.
+         */
+        observe(root = document) {
+            const scope = root instanceof Document ? root.body : root;
+            if (!scope || this.observer)
+                return;
+            this.observer = new MutationObserver((mutations) => {
+                for (const m of mutations) {
+                    if (m.type !== 'childList')
+                        continue;
+                    for (const node of m.addedNodes) {
+                        if (node instanceof HTMLElement) {
+                            if (node.hasAttribute?.(DATA_CALL))
+                                this.attachToElement(node);
+                            node.querySelectorAll?.(`[${DATA_CALL}]:not([${ATTR_INIT}])`).forEach((el) => this.attachToElement(el));
+                        }
+                    }
+                }
+            });
+            this.observer.observe(scope, { childList: true, subtree: true });
+        }
+        destroy() {
+            this.observer?.disconnect();
+            this.observer = null;
+        }
+    }
+
+    /**
+     * Full-featured call modal with status + transcript display.
+     */
+    const ROOT_CLASS = 'pamela-widget-root';
+    class Modal {
+        constructor(options) {
+            this.root = null;
+            this.overlay = null;
+            this.panel = null;
+            this.orbEl = null;
+            this.statusEl = null;
+            this.transcriptEl = null;
+            this.summaryEl = null;
+            this.expanded = false;
+            this.boundKeydown = null;
+            this.options = options;
+        }
+        render(container) {
+            injectStyles(this.options.theme);
+            const themeClass = getThemeClass(this.options.theme);
+            const root = document.createElement('div');
+            root.className = `${ROOT_CLASS} ${themeClass}`.trim();
+            root.setAttribute('data-pamela-modal', 'true');
+            const overlay = document.createElement('div');
+            overlay.style.cssText = this.getOverlayStyles();
+            overlay.setAttribute('hidden', 'true');
+            const panel = document.createElement('div');
+            panel.style.cssText = buildPanelStyles({
+                width: 'min(520px, 95vw)',
+                padding: '1.25rem',
+                borderRadiusVar: 'var(--pamela-radius-xl)',
+            });
+            // VoiceOrb for status visualization
+            const orbWrapper = document.createElement('div');
+            orbWrapper.style.cssText = 'display:flex;justify-content:center;margin-bottom:0.75rem;';
+            const orb = document.createElement('div');
+            orb.className = 'pamela-modal-orb';
+            orb.style.cssText = this.getOrbStyles();
+            orb.setAttribute('hidden', 'true');
+            orbWrapper.appendChild(orb);
+            const header = document.createElement('div');
+            header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem;';
+            const title = document.createElement('div');
+            title.textContent = 'Call with Pamela';
+            title.style.cssText = 'font-weight:600;color:var(--pamela-text);';
+            const closeBtn = document.createElement('button');
+            closeBtn.type = 'button';
+            closeBtn.setAttribute('aria-label', 'Close');
+            closeBtn.style.cssText = this.getCloseStyles();
+            closeBtn.innerHTML = ICON_CLOSE;
+            closeBtn.addEventListener('click', () => this.close());
+            header.appendChild(title);
+            header.appendChild(closeBtn);
+            const phoneInput = document.createElement('input');
+            phoneInput.type = 'tel';
+            phoneInput.placeholder = 'Phone number';
+            phoneInput.style.cssText = buildInputStyles({
+                padding: '0.6rem 0.75rem',
+                fontSize: '0.9rem',
+            });
+            phoneInput.setAttribute('aria-label', 'Phone number');
+            const taskInput = document.createElement('textarea');
+            taskInput.placeholder = 'What should Pamela do?';
+            taskInput.rows = 3;
+            taskInput.style.cssText = buildInputStyles({
+                padding: '0.6rem 0.75rem',
+                fontSize: '0.9rem',
+            });
+            taskInput.setAttribute('aria-label', 'Task');
+            const voiceSelect = document.createElement('select');
+            voiceSelect.style.cssText = this.getSelectStyles();
+            voiceSelect.setAttribute('aria-label', 'Voice');
+            ['auto', 'female', 'male'].forEach((v) => {
+                const opt = document.createElement('option');
+                opt.value = v;
+                opt.textContent = `Voice: ${v}`;
+                if (this.options.defaults?.voice && this.options.defaults.voice === v) {
+                    opt.selected = true;
+                }
+                voiceSelect.appendChild(opt);
+            });
+            const status = document.createElement('div');
+            status.setAttribute('aria-live', 'polite');
+            status.style.cssText = 'font-size:0.8rem;color:var(--pamela-text-muted);min-height:1rem;';
+            const cta = document.createElement('button');
+            cta.type = 'button';
+            cta.style.cssText = buildCtaStyles({ padding: '0.65rem 1rem' });
+            const ctaSpan = document.createElement('span');
+            ctaSpan.style.cssText = 'display:inline-flex;align-items:center;gap:0.35rem;';
+            ctaSpan.innerHTML = ICON_CALL;
+            ctaSpan.appendChild(document.createTextNode(' Call Now'));
+            cta.appendChild(ctaSpan);
+            cta.addEventListener('click', () => this.handleSubmit(phoneInput, taskInput, voiceSelect, status));
+            const transcriptWrapper = document.createElement('div');
+            transcriptWrapper.style.cssText = this.getTranscriptWrapperStyles();
+            const transcriptTitle = document.createElement('div');
+            transcriptTitle.textContent = 'Transcript';
+            transcriptTitle.style.cssText = 'font-size:0.8rem;color:var(--pamela-text-secondary);margin-bottom:0.25rem;';
+            const transcript = document.createElement('div');
+            transcript.style.cssText = this.getTranscriptStyles();
+            transcriptWrapper.appendChild(transcriptTitle);
+            transcriptWrapper.appendChild(transcript);
+            const summary = document.createElement('div');
+            summary.style.cssText = 'font-size:0.85rem;color:var(--pamela-text);margin-top:0.5rem;';
+            panel.appendChild(orbWrapper);
+            panel.appendChild(header);
+            panel.appendChild(phoneInput);
+            panel.appendChild(taskInput);
+            panel.appendChild(voiceSelect);
+            panel.appendChild(status);
+            panel.appendChild(cta);
+            panel.appendChild(transcriptWrapper);
+            panel.appendChild(summary);
+            overlay.appendChild(panel);
+            root.appendChild(overlay);
+            container.appendChild(root);
+            overlay.addEventListener('click', (e) => {
+                if (e.target === overlay)
+                    this.close();
+            });
+            this.boundKeydown = (e) => {
+                if (this.expanded && e.key === 'Escape')
+                    this.close();
+            };
+            document.addEventListener('keydown', this.boundKeydown);
+            this.root = root;
+            this.overlay = overlay;
+            this.panel = panel;
+            this.orbEl = orb;
+            this.statusEl = status;
+            this.transcriptEl = transcript;
+            this.summaryEl = summary;
+            return root;
+        }
+        open() {
+            if (!this.overlay)
+                return;
+            this.overlay.removeAttribute('hidden');
+            this.expanded = true;
+        }
+        close() {
+            if (!this.overlay)
+                return;
+            this.overlay.setAttribute('hidden', 'true');
+            this.expanded = false;
+            this.options.onClose?.();
+        }
+        setCallStatus(call) {
+            if (!this.statusEl)
+                return;
+            if (!call) {
+                this.statusEl.textContent = '';
+                if (this.orbEl)
+                    this.orbEl.setAttribute('hidden', 'true');
+                if (this.transcriptEl)
+                    this.transcriptEl.innerHTML = '';
+                if (this.summaryEl)
+                    this.summaryEl.textContent = '';
+                return;
+            }
+            // Show orb during active call states
+            const isActive = ['queued', 'ringing', 'in_progress'].includes(call.status);
+            if (this.orbEl) {
+                if (isActive) {
+                    this.orbEl.removeAttribute('hidden');
+                    this.orbEl.style.animation = call.status === 'in_progress' ? 'pamela-pulse-active 1s ease-in-out infinite' : 'pamela-pulse 2s ease-in-out infinite';
+                }
+                else {
+                    this.orbEl.setAttribute('hidden', 'true');
+                }
+            }
+            if (call.status === 'completed') {
+                this.statusEl.textContent = 'Call completed.';
+            }
+            else if (call.status === 'failed' || call.status === 'cancelled') {
+                this.statusEl.textContent = `Call ${call.status}.`;
+            }
+            else {
+                this.statusEl.textContent = `Call ${call.status}...`;
+            }
+            if (this.transcriptEl && call.transcript) {
+                this.transcriptEl.innerHTML = '';
+                call.transcript.forEach((entry) => {
+                    this.transcriptEl?.appendChild(this.renderTranscriptEntry(entry));
+                });
+            }
+            if (this.summaryEl && call.summary) {
+                this.summaryEl.textContent = `Summary: ${call.summary}`;
+            }
+        }
+        destroy() {
+            if (this.boundKeydown) {
+                document.removeEventListener('keydown', this.boundKeydown);
+                this.boundKeydown = null;
+            }
+            this.root?.remove();
+            this.root = null;
+            this.overlay = null;
+            this.panel = null;
+            this.orbEl = null;
+            this.statusEl = null;
+            this.transcriptEl = null;
+            this.summaryEl = null;
+        }
+        renderTranscriptEntry(entry) {
+            const bubble = document.createElement('div');
+            bubble.style.cssText = this.getTranscriptBubbleStyles(entry.role);
+            bubble.textContent = entry.content;
+            return bubble;
+        }
+        handleSubmit(phoneInput, taskInput, voiceSelect, statusEl) {
+            const to = normalizePhone(phoneInput.value.trim());
+            const task = taskInput.value.trim();
+            const voice = voiceSelect.value || undefined;
+            if (!to || !task) {
+                statusEl.textContent = 'Please enter phone number and task.';
+                return;
+            }
+            if (!isValidE164(to)) {
+                statusEl.textContent = 'Please use a valid phone number (e.g. +1 555 123 4567).';
+                return;
+            }
+            statusEl.textContent = '';
+            this.options.onCreateCall(to, task, voice);
+        }
+        getOverlayStyles() {
+            return [
+                'position:fixed;inset:0;z-index:999998;background:rgba(0,0,0,0.4);',
+                'display:flex;align-items:center;justify-content:center;padding:1.5rem;',
+            ].join(' ');
+        }
+        getSelectStyles() {
+            return [
+                'width:100%;padding:0.5rem 0.75rem;border-radius:var(--pamela-radius-md);',
+                'border:1px solid var(--pamela-surface-border);background:var(--pamela-surface-strong);',
+                'color:var(--pamela-text);font-family:var(--pamela-font);font-size:0.85rem;',
+            ].join(' ');
+        }
+        getCloseStyles() {
+            return [
+                'width:32px;height:32px;border-radius:50%;border:1px solid var(--pamela-surface-border);',
+                'background:var(--pamela-surface-strong);color:var(--pamela-text);cursor:pointer;',
+                'display:flex;align-items:center;justify-content:center;',
+            ].join(' ');
+        }
+        getTranscriptWrapperStyles() {
+            return [
+                'margin-top:0.5rem;padding:0.75rem;border-radius:var(--pamela-radius-md);',
+                'border:1px solid var(--pamela-surface-border);background:var(--pamela-surface);',
+            ].join(' ');
+        }
+        getTranscriptStyles() {
+            return 'display:flex;flex-direction:column;gap:0.5rem;max-height:180px;overflow:auto;';
+        }
+        getTranscriptBubbleStyles(role) {
+            const base = [
+                'padding:0.5rem 0.75rem;border-radius:var(--pamela-radius-md);font-size:0.85rem;',
+                'color:var(--pamela-text);',
+            ].join(' ');
+            if (role === 'agent') {
+                return base + ' background:var(--pamela-transcript-agent-bg);';
+            }
+            return base + ' background:var(--pamela-transcript-recipient-bg);';
+        }
+        getOrbStyles() {
+            return [
+                'width:64px;height:64px;border-radius:50%;',
+                'background:var(--pamela-accent-gradient);',
+                'box-shadow:0 0 40px rgba(250,147,28,0.4), 0 0 60px rgba(253,139,116,0.3);',
+                'animation:pamela-pulse 2s ease-in-out infinite;',
+            ].join(' ');
+        }
+    }
+
+    /**
+     * Main Pamela widget class: init, call, events, UI modes
+     */
+    function detectTheme() {
+        if (typeof document === 'undefined')
+            return 'light';
+        const explicit = document.documentElement.getAttribute('data-pamela-theme');
+        if (explicit === 'light' || explicit === 'dark')
+            return explicit;
+        const hasDark = document.documentElement.classList.contains('dark') ||
+            document.body?.classList.contains('dark') ||
+            document.body?.classList.contains('dark-mode');
+        if (hasDark)
+            return 'dark';
+        if (window.matchMedia?.('(prefers-color-scheme: dark)').matches)
+            return 'dark';
+        return 'light';
+    }
+    class Pamela {
+        constructor() {
+            this.api = null;
+            this.options = null;
+            this.events = new EventEmitter();
+            this.floatingButton = null;
+            this.inlineButton = null;
+            this.modal = null;
+            this.container = null;
+            this.theme = 'light';
+        }
+        static init(options) {
+            if (Pamela.instance) {
+                Pamela.instance.destroy();
+            }
+            const instance = new Pamela();
+            instance.init(options);
+            Pamela.instance = instance;
+            return instance;
+        }
+        init(options) {
+            const authToken = options.accessToken || options.apiKey;
+            if (!authToken) {
+                throw new PamelaError('apiKey or accessToken is required');
+            }
+            this.options = options;
+            this.theme = options.theme === 'auto' ? detectTheme() : options.theme ?? 'light';
+            this.api = new PamelaApiClient({
+                authToken,
+                baseUrl: options.baseUrl,
+            });
+            injectStyles(this.theme);
+            this.container = document.body;
+            if (options.mode === 'floating' || (!options.mode && authToken)) {
+                this.floatingButton = new FloatingButton({
+                    position: options.position ?? 'bottom-right',
+                    theme: this.theme,
+                    defaults: options.defaults,
+                    onCreateCall: (to, task) => this.handleCreateCall(to, task),
+                    onExpand: () => this.events.emit('modal:open'),
+                    onCollapse: () => this.events.emit('modal:close'),
+                });
+                this.floatingButton.render(this.container);
+            }
+            const wantsModal = options.mode === 'modal' || options.mode === 'inline';
+            if (wantsModal) {
+                this.modal = new Modal({
+                    theme: this.theme,
+                    defaults: options.defaults,
+                    onCreateCall: (to, task, voice) => this.handleCreateCall(to, task, voice),
+                    onClose: () => this.events.emit('modal:close'),
+                });
+                this.modal.render(this.container);
+            }
+            if (options.styles && Object.keys(options.styles).length > 0) {
+                applyStyleOverrides(options.styles);
+            }
+            if (options.mode === 'inline') {
+                this.inlineButton = new InlineButton({
+                    theme: this.theme,
+                    onCallClick: (params) => {
+                        this.show();
+                        this.handleCreateCall(params.to, params.task, params.voice);
+                    },
+                });
+                if (typeof document !== 'undefined' && document.readyState === 'loading') {
+                    document.addEventListener('DOMContentLoaded', () => {
+                        this.inlineButton?.attach();
+                        this.inlineButton?.observe();
+                    });
+                }
+                else {
+                    this.inlineButton.attach();
+                    this.inlineButton.observe();
+                }
+            }
+        }
+        async handleCreateCall(to, task, voice) {
+            const opts = this.options?.defaults ?? {};
+            try {
+                const call = await this.call({
+                    to,
+                    task,
+                    voice: voice ?? opts.voice,
+                    agentName: opts.agentName,
+                    callerName: opts.callerName,
+                    maxDuration: opts.maxDuration,
+                });
+                this.events.emit('call:start', call);
+                this.floatingButton?.setCallStatus(call);
+                this.modal?.setCallStatus(call);
+                const updated = await this.api.pollCallStatus(call.id);
+                this.events.emit('call:update', updated);
+                this.events.emit('call:complete', updated);
+                this.floatingButton?.setCallStatus(updated);
+                this.modal?.setCallStatus(updated);
+            }
+            catch (err) {
+                this.events.emit('call:error', err);
+                this.floatingButton?.setCallStatus(null);
+                this.modal?.setCallStatus(null);
+            }
+        }
+        call(options) {
+            if (!this.api)
+                throw new PamelaError('Pamela not initialized. Call Pamela.init() first.');
+            return this.api.createCall(options);
+        }
+        getCall(callId) {
+            if (!this.api)
+                throw new PamelaError('Pamela not initialized. Call Pamela.init() first.');
+            return this.api.getCall(callId);
+        }
+        cancel(callId) {
+            if (!this.api)
+                throw new PamelaError('Pamela not initialized. Call Pamela.init() first.');
+            return this.api.cancelCall(callId);
+        }
+        on(event, callback) {
+            this.events.on(event, callback);
+        }
+        off(event, callback) {
+            this.events.off(event, callback);
+        }
+        show() {
+            this.events.emit('modal:open');
+            this.modal?.open();
+        }
+        hide() {
+            this.events.emit('modal:close');
+            this.modal?.close();
+        }
+        destroy() {
+            this.floatingButton?.destroy();
+            this.inlineButton?.destroy();
+            this.modal?.destroy();
+            this.floatingButton = null;
+            this.inlineButton = null;
+            this.modal = null;
+            this.api = null;
+            this.options = null;
+            this.events.removeAllListeners();
+            if (Pamela.instance === this) {
+                Pamela.instance = null;
+            }
+        }
+        static getInstance() {
+            return Pamela.instance;
+        }
+    }
+    Pamela.instance = null;
+
+    /**
+     * @thisispamela/widget - Embeddable Pamela Voice AI widget
+     *
+     * Usage (script tag):
+     *   <script src="https://cdn.thisispamela.com/widget.js"></script>
+     *   <script>
+     *     Pamela.init({ apiKey: 'pk_live_xxx', mode: 'floating' });
+     *   </script>
+     *
+     * Usage (ESM):
+     *   import Pamela from '@thisispamela/widget';
+     *   Pamela.init({ apiKey: 'pk_live_xxx' });
+     */
+    // Expose Pamela on global for script-tag usage (Pamela.init())
+    if (typeof globalThis !== 'undefined') {
+        globalThis.Pamela = Pamela;
+    }
+
+    exports.Pamela = Pamela;
+    exports.PamelaError = PamelaError;
+    exports.default = Pamela;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+    return exports;
+
+})({});
+//# sourceMappingURL=widget.js.map