@thisispamela/react 1.0.0 → 1.0.2

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import React, { createContext, useMemo, useContext, useState, useRef, useEffect } from 'react';
 import { PamelaClient } from '@thisispamela/sdk';
 
 function styleInject(css, ref) {
@@ -28,15 +28,15 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/**\n * Pamela B2B React Component Library - Default Styles\n * \n * These styles match the Pamela B2C design system:\n * - Colors: Orange (#FA931C), Beige (#e7ab84), Blue (#4b4bea)\n * - Fonts: Poppins, Inter\n * - Dark mode support\n */\n\n/* Pulse animation for status indicators */\n@keyframes pamela-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Call Button - matches your gradient style */\n.pamela-call-button {\n  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n  background: linear-gradient(to right, #FA931C, #fd8b74);\n  color: white;\n  border: none;\n  border-radius: 0.5rem;\n  font-weight: 600;\n  transition: opacity 0.2s;\n  box-shadow: 0 2px 4px rgba(250, 147, 28, 0.2);\n}\n\n.pamela-call-button:hover:not(:disabled) {\n  opacity: 0.9;\n}\n\n.pamela-call-button:disabled {\n  opacity: 0.7;\n  cursor: not-allowed;\n  background: linear-gradient(to right, #ccc, #aaa);\n}\n\n/* Call Status - matches your card style */\n.pamela-call-status {\n  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Transcript Viewer - matches your message bubble style */\n.pamela-transcript-viewer {\n  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Dark mode support */\n@media (prefers-color-scheme: dark) {\n  .pamela-call-status {\n    color: #ffffff;\n  }\n  \n  .pamela-transcript-viewer {\n    color: #ffffff;\n  }\n}\n\n";
+var css_248z = "/**\n * Pamela Enterprise React Component Library - Default Styles\n *\n * These styles align with the Pamela app design schema.\n * If the host app already defines these CSS variables, its values will win.\n */\n\n:root {\n  --accent: #F27A1A;\n  --accent-2: #F06C4F;\n  --accent-3: #F3A84C;\n  --accent-gradient: linear-gradient(90deg, var(--accent), var(--accent-2));\n  --bg-gradient: linear-gradient(135deg, #F5F0E8 0%, #F3EEE8 45%, #EFE8DF 100%);\n  --bg-glow: radial-gradient(1200px circle at 10% 20%, rgba(250, 147, 28, 0.1), transparent 58%),\n    radial-gradient(900px circle at 80% 10%, rgba(253, 139, 116, 0.1), transparent 62%),\n    radial-gradient(800px circle at 70% 80%, rgba(251, 193, 107, 0.08), transparent 60%);\n  --surface: rgba(255, 255, 255, 0.5);\n  --surface-strong: rgba(255, 255, 255, 0.78);\n  --surface-border: rgba(231, 171, 132, 0.24);\n  --surface-border-strong: rgba(255, 255, 255, 0.75);\n  --surface-highlight: rgba(255, 255, 255, 0.68);\n  --surface-liquid: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.38));\n  --surface-liquid-strong: linear-gradient(140deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.5));\n  --liquid-highlight: linear-gradient(120deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 45%);\n  --liquid-shadow: 0 18px 42px rgba(28, 25, 17, 0.14);\n  --liquid-glow: 0 0 32px rgba(250, 147, 28, 0.2);\n  --shadow-soft: 0 12px 26px rgba(28, 25, 17, 0.1);\n  --shadow-hover: 0 24px 44px rgba(28, 25, 17, 0.18);\n  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);\n  --cta-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.7), rgba(250, 147, 28, 0.32));\n  --cta-border: 1px solid rgba(250, 147, 28, 0.4);\n  --cta-glow: 0 0 18px rgba(250, 147, 28, 0.28);\n  --cta-glow-hover: 0 0 22px rgba(250, 147, 28, 0.36);\n  --danger-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.6), rgba(239, 68, 68, 0.3));\n  --danger-border: 1px solid rgba(239, 68, 68, 0.45);\n  --danger-glow: 0 0 16px rgba(239, 68, 68, 0.3);\n  --danger-glow-hover: 0 0 20px rgba(239, 68, 68, 0.4);\n  --badge-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.7), rgba(250, 147, 28, 0.28));\n  --badge-border: 1px solid rgba(250, 147, 28, 0.4);\n  --badge-glow: 0 0 14px rgba(250, 147, 28, 0.24);\n  --avatar-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(250, 147, 28, 0.38), rgba(253, 139, 116, 0.32));\n  --avatar-border: 1px solid rgba(250, 147, 28, 0.35);\n  --avatar-glow: 0 0 20px rgba(250, 147, 28, 0.28);\n  --glass-blur: 24px;\n  --glass-blur-strong: 32px;\n  --noise-opacity: 0.05;\n  --focus-ring: 0 0 0 3px rgba(250, 147, 28, 0.28);\n  --radius-sm: 0.5rem;\n  --radius-md: 0.75rem;\n  --radius-lg: 1rem;\n  --radius-xl: 1.5rem;\n  --text-primary: #1C1917;\n  --text-secondary: rgba(28, 25, 17, 0.78);\n  --text-muted: rgba(28, 25, 17, 0.55);\n  --status-success: #10b981;\n  --status-warning: #eab308;\n  --status-muted: #d1d5db;\n  --status-error: #ef4444;\n  --bubble-user: #FA931C;\n  --bubble-pamela: #ffffff;\n  --bubble-recipient: #4b4bea;\n  --bubble-border: rgba(231, 171, 132, 0.3);\n}\n\n.dark {\n  --bg-gradient: linear-gradient(135deg, #171513 0%, #14110f 45%, #0f0d0b 100%);\n  --bg-glow: radial-gradient(1100px circle at 20% 10%, rgba(250, 147, 28, 0.18), transparent 60%),\n    radial-gradient(900px circle at 80% 20%, rgba(253, 139, 116, 0.16), transparent 60%),\n    radial-gradient(700px circle at 60% 80%, rgba(251, 193, 107, 0.12), transparent 55%);\n  --surface: rgba(255, 255, 255, 0.08);\n  --surface-strong: rgba(255, 255, 255, 0.16);\n  --surface-border: rgba(255, 255, 255, 0.18);\n  --surface-border-strong: rgba(255, 255, 255, 0.36);\n  --surface-highlight: rgba(255, 255, 255, 0.2);\n  --surface-liquid: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));\n  --surface-liquid-strong: linear-gradient(150deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));\n  --liquid-highlight: linear-gradient(120deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 45%);\n  --liquid-shadow: 0 22px 48px rgba(0, 0, 0, 0.55);\n  --liquid-glow: 0 0 30px rgba(250, 147, 28, 0.24);\n  --shadow-soft: 0 16px 32px rgba(0, 0, 0, 0.5);\n  --shadow-hover: 0 26px 44px rgba(0, 0, 0, 0.7);\n  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.12);\n  --cta-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.22), rgba(250, 147, 28, 0.34));\n  --cta-border: 1px solid rgba(250, 147, 28, 0.5);\n  --cta-glow: 0 0 16px rgba(250, 147, 28, 0.26);\n  --cta-glow-hover: 0 0 20px rgba(250, 147, 28, 0.32);\n  --danger-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.18), rgba(239, 68, 68, 0.32));\n  --danger-border: 1px solid rgba(248, 113, 113, 0.55);\n  --danger-glow: 0 0 18px rgba(239, 68, 68, 0.32);\n  --danger-glow-hover: 0 0 22px rgba(239, 68, 68, 0.4);\n  --badge-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.2), rgba(250, 147, 28, 0.32));\n  --badge-border: 1px solid rgba(250, 147, 28, 0.5);\n  --badge-glow: 0 0 14px rgba(250, 147, 28, 0.22);\n  --avatar-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(250, 147, 28, 0.26), rgba(253, 139, 116, 0.24));\n  --avatar-border: 1px solid rgba(255, 255, 255, 0.18);\n  --avatar-glow: 0 0 18px rgba(250, 147, 28, 0.22);\n  --glass-blur: 24px;\n  --glass-blur-strong: 32px;\n  --noise-opacity: 0.08;\n  --focus-ring: 0 0 0 3px rgba(250, 147, 28, 0.35);\n  --text-primary: rgba(255, 255, 255, 0.95);\n  --text-secondary: rgba(255, 255, 255, 0.72);\n  --text-muted: rgba(255, 255, 255, 0.5);\n  --bubble-pamela: rgba(255, 255, 255, 0.12);\n  --bubble-border: rgba(255, 255, 255, 0.2);\n}\n\n/* Pulse animation for status indicators */\n@keyframes pamela-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* VoiceOrb animations */\n@keyframes shimmer {\n  0% {\n    transform: translateX(-100%) translateY(-100%) rotate(45deg);\n  }\n  100% {\n    transform: translateX(100%) translateY(100%) rotate(45deg);\n  }\n}\n\n@keyframes ripple {\n  0% {\n    transform: scale(1);\n    opacity: 0.6;\n  }\n  50% {\n    transform: scale(2);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 0.6;\n  }\n}\n\n@keyframes float {\n  0%, 100% {\n    transform: translateY(0px);\n  }\n  50% {\n    transform: translateY(-10px);\n  }\n}\n\n/* Call Button - matches your gradient style */\n.pamela-call-button {\n  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n  background: var(--accent-gradient);\n  color: var(--text-primary);\n  border: var(--cta-border);\n  border-radius: var(--radius-md);\n  font-weight: 600;\n  transition: opacity 0.2s;\n  box-shadow: var(--shadow-soft), var(--cta-glow);\n  padding: 10px 20px;\n  font-size: 16px;\n  cursor: pointer;\n}\n\n.pamela-call-button--primary {\n  background: var(--accent-gradient);\n}\n\n.pamela-call-button--secondary {\n  background: var(--surface-liquid);\n  border: 1px solid var(--surface-border-strong);\n  box-shadow: var(--shadow-soft), var(--liquid-glow);\n}\n\n.pamela-call-button--danger {\n  background: var(--danger-bg);\n  border: var(--danger-border);\n  color: #b91c1c;\n  box-shadow: var(--shadow-soft), var(--danger-glow);\n}\n\n.pamela-call-button--sm {\n  padding: 6px 12px;\n  font-size: 14px;\n}\n\n.pamela-call-button--md {\n  padding: 10px 20px;\n  font-size: 16px;\n}\n\n.pamela-call-button--lg {\n  padding: 12px 24px;\n  font-size: 18px;\n}\n\n.pamela-call-button:hover:not(:disabled) {\n  opacity: 0.9;\n}\n\n.pamela-call-button:disabled {\n  opacity: 0.7;\n  cursor: not-allowed;\n  background: linear-gradient(to right, #cfcfcf, #b6b6b6);\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  box-shadow: none;\n}\n\n/* Call Status - matches your card style */\n.pamela-call-status {\n  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Transcript Viewer - matches your message bubble style */\n.pamela-transcript-viewer {\n  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.pamela-card {\n  background: var(--surface-liquid-strong);\n  border: 1px solid var(--surface-border-strong);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-soft), var(--liquid-glow);\n}\n\n.pamela-panel {\n  background: var(--surface-liquid);\n  border: 1px solid var(--surface-border-strong);\n  border-radius: var(--radius-xl);\n  box-shadow: var(--liquid-shadow), var(--liquid-glow);\n}\n\n.pamela-chip {\n  background: var(--surface-liquid);\n  border: 1px solid var(--surface-border-strong);\n  border-radius: 999px;\n  padding: 0.25rem 0.6rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--text-secondary);\n  box-shadow: var(--shadow-inset);\n}\n\n.pamela-transcript-container {\n  background: var(--surface);\n  border-radius: var(--radius-md);\n  padding: 16px;\n}\n\n.pamela-transcript-bubble {\n  border-radius: var(--radius-md);\n  padding: 12px 16px;\n}\n\n.pamela-transcript-bubble--pamela {\n  background: var(--bubble-pamela);\n  border: 1px solid var(--bubble-border);\n  color: var(--text-primary);\n}\n\n.pamela-transcript-bubble--user {\n  background: var(--bubble-user);\n  color: #ffffff;\n}\n\n.pamela-transcript-bubble--recipient {\n  background: var(--bubble-recipient);\n  color: #ffffff;\n}\n\n/* Utility classes aligned with Pamela app design */\n.app-gradient {\n  background: var(--bg-glow), var(--bg-gradient);\n}\n\n.surface-card {\n  background: var(--surface-strong);\n  border: 1px solid var(--surface-border);\n  box-shadow: var(--shadow-soft);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n}\n\n.surface-card-hover {\n  transition: box-shadow 180ms ease, transform 180ms ease;\n}\n\n.surface-card-hover:hover {\n  box-shadow: var(--shadow-hover);\n}\n\n.accent-card {\n  background: linear-gradient(90deg, rgba(250, 147, 28, 0.12), rgba(253, 139, 116, 0.12));\n  border: 1px solid rgba(250, 147, 28, 0.3);\n  box-shadow: var(--shadow-soft);\n}\n\n.dark .accent-card {\n  background: linear-gradient(90deg, rgba(250, 147, 28, 0.22), rgba(253, 139, 116, 0.22));\n  border-color: rgba(250, 147, 28, 0.35);\n}\n\n.send-button-idle {\n  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.4));\n  border: 1px solid rgba(231, 171, 132, 0.45);\n  color: rgba(28, 25, 17, 0.5);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 14px rgba(250, 147, 28, 0.18);\n}\n\n.dark .send-button-idle {\n  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));\n  border-color: rgba(255, 255, 255, 0.22);\n  color: rgba(255, 255, 255, 0.6);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 16px rgba(250, 147, 28, 0.22);\n}\n\n.send-button-gradient {\n  background: linear-gradient(120deg, rgba(250, 147, 28, 0.9), rgba(253, 139, 116, 0.9));\n  border: 1px solid rgba(255, 255, 255, 0.45);\n  box-shadow: 0 0 16px rgba(250, 147, 28, 0.32);\n}\n\n.send-button-gradient:hover,\n.send-button-gradient:focus-visible {\n  box-shadow: 0 0 18px rgba(250, 147, 28, 0.36);\n}\n\n.transcript-bubble {\n  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12), 0 0 10px rgba(250, 147, 28, 0.14);\n  transition: box-shadow 180ms ease;\n}\n\n.transcript-bubble:hover,\n.transcript-bubble:focus-visible {\n  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12), 0 0 10px rgba(250, 147, 28, 0.14);\n}\n\n.btn-primary {\n  background: var(--cta-bg);\n  border: var(--cta-border);\n  color: var(--text-primary);\n  font-weight: 600;\n  border-radius: var(--radius-md);\n  box-shadow: var(--shadow-soft), var(--cta-glow);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;\n}\n\n.btn-primary:hover {\n  box-shadow: var(--shadow-hover), var(--cta-glow-hover);\n  opacity: 0.96;\n}\n\n.btn-primary:active {\n  transform: scale(0.98);\n}\n\n.btn-danger {\n  background: var(--danger-bg);\n  border: var(--danger-border);\n  color: #b91c1c;\n  box-shadow: var(--shadow-soft), var(--danger-glow);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  transition: box-shadow 180ms ease, transform 180ms ease, opacity 180ms ease;\n}\n\n.dark .btn-danger {\n  color: #fca5a5;\n}\n\n.btn-danger:hover {\n  box-shadow: var(--danger-glow-hover);\n}\n\n.badge-pill {\n  background: var(--badge-bg);\n  border: var(--badge-border);\n  border-radius: 999px;\n  padding: 0.25rem 0.6rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--text-secondary);\n  box-shadow: var(--shadow-inset), var(--badge-glow);\n}\n\n.badge-accent {\n  background: rgba(250, 147, 28, 0.15);\n  color: rgba(250, 147, 28, 0.95);\n}\n\n.dark .badge-accent {\n  background: rgba(250, 147, 28, 0.25);\n  color: rgba(253, 139, 116, 0.95);\n}\n\n.h1 {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n  font-weight: 700;\n}\n\n.h2 {\n  font-size: 1.5rem;\n  line-height: 2rem;\n  font-weight: 600;\n}\n\n.h3 {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n  font-weight: 600;\n}\n\n.body {\n  font-size: 0.95rem;\n  line-height: 1.5rem;\n}\n\n.meta {\n  font-size: 0.75rem;\n  line-height: 1.125rem;\n  color: rgba(28, 25, 17, 0.6);\n}\n\n.dark .meta {\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.input-base {\n  background: rgba(255, 255, 255, 0.86);\n  border: 1px solid rgba(231, 171, 132, 0.28);\n  border-radius: var(--radius-lg);\n  padding: 0.75rem 1rem;\n  color: #1C1917;\n  transition: box-shadow 150ms ease, border-color 150ms ease;\n}\n\n.dark .input-base {\n  background: rgba(255, 255, 255, 0.1);\n  color: #ffffff;\n}\n\n.input-base:focus {\n  outline: none;\n  border-color: rgba(250, 147, 28, 0.6);\n  box-shadow: var(--focus-ring);\n}\n\n.panel {\n  position: relative;\n  background: var(--surface-liquid);\n  border: 1px solid var(--surface-border-strong);\n  border-radius: var(--radius-xl);\n  box-shadow: var(--liquid-shadow), var(--liquid-glow);\n  backdrop-filter: blur(var(--glass-blur-strong));\n  -webkit-backdrop-filter: blur(var(--glass-blur-strong));\n  overflow: hidden;\n}\n\n.card {\n  position: relative;\n  background: var(--surface-liquid-strong);\n  border: 1px solid var(--surface-border-strong);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-soft), var(--liquid-glow);\n  backdrop-filter: blur(var(--glass-blur));\n  -webkit-backdrop-filter: blur(var(--glass-blur));\n  overflow: hidden;\n}\n\n.card-hover {\n  transition: box-shadow 180ms ease, transform 180ms ease;\n}\n\n.card-hover:hover {\n  box-shadow: var(--shadow-hover), var(--liquid-glow);\n  transform: translateY(-2px);\n}\n\n.chip {\n  background: var(--surface-liquid);\n  border: 1px solid var(--surface-border-strong);\n  border-radius: 999px;\n  padding: 0.25rem 0.6rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--text-secondary);\n  box-shadow: var(--shadow-inset);\n}\n\n.input-field {\n  position: relative;\n  background: var(--surface-liquid-strong);\n  border: 1px solid var(--surface-border-strong);\n  border-radius: var(--radius-lg);\n  padding: 0.75rem 1rem;\n  color: var(--text-primary);\n  box-shadow: var(--shadow-inset), var(--liquid-glow);\n  transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease;\n}\n\n.input-field:focus {\n  outline: none;\n  border-color: rgba(250, 147, 28, 0.6);\n  box-shadow: var(--focus-ring), var(--liquid-glow);\n  transform: translateY(-1px);\n}\n\n.btn-secondary {\n  border-radius: var(--radius-md);\n  border: 1px solid var(--surface-border-strong);\n  background: var(--surface-liquid);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-soft), var(--liquid-glow);\n  transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;\n}\n\n.btn-secondary:hover {\n  box-shadow: var(--shadow-hover), var(--liquid-glow);\n}\n\n.btn-secondary:active {\n  transform: scale(0.98);\n}\n\n.tooltip-panel {\n  background: var(--surface-liquid-strong);\n  border: 1px solid var(--surface-border-strong);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-soft), 0 12px 24px rgba(28, 25, 17, 0.16);\n  backdrop-filter: blur(calc(var(--glass-blur) * 0.9));\n  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.9));\n}\n\n.tooltip-arrow {\n  background: var(--surface-liquid-strong);\n  border: 1px solid var(--surface-border-strong);\n}\n\n::where(.panel, .card) {\n  isolation: isolate;\n}\n\n::where(.panel, .card) > * {\n  position: relative;\n  z-index: 1;\n}\n\n::where(.panel, .card)::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: var(--liquid-highlight);\n  opacity: 0.6;\n  pointer-events: none;\n  z-index: 0;\n}\n\n::where(.panel, .card)::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 0.5px, transparent 0.5px);\n  background-size: 4px 4px;\n  opacity: var(--noise-opacity);\n  pointer-events: none;\n  z-index: 0;\n}\n\n.avatar {\n  background: var(--avatar-bg);\n  border: var(--avatar-border);\n  box-shadow: var(--shadow-soft), var(--avatar-glow);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n}\n\n.conversations-scroll::-webkit-scrollbar,\n.chat-scroll::-webkit-scrollbar {\n  width: 6px;\n}\n\n.conversations-scroll::-webkit-scrollbar-track,\n.chat-scroll::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.conversations-scroll::-webkit-scrollbar-thumb,\n.chat-scroll::-webkit-scrollbar-thumb {\n  background: rgba(230, 171, 132, 0.3);\n  border-radius: 3px;\n}\n\n.conversations-scroll::-webkit-scrollbar-thumb:hover,\n.chat-scroll::-webkit-scrollbar-thumb:hover {\n  background: rgba(230, 171, 132, 0.5);\n}\n\n.conversations-scroll,\n.chat-scroll {\n  scrollbar-width: thin;\n  scrollbar-color: rgba(230, 171, 132, 0.3) transparent;\n}\n\n.touch-manipulation {\n  touch-action: manipulation;\n}\n\n/* Dark mode support */\n@media (prefers-color-scheme: dark) {\n  .pamela-call-status {\n    color: #ffffff;\n  }\n  \n  .pamela-transcript-viewer {\n    color: #ffffff;\n  }\n}\n\n";
 styleInject(css_248z);
 
 const PamelaContext = createContext(null);
 function PamelaProvider({ config, children }) {
-    const client = new PamelaClient({
+    const client = useMemo(() => new PamelaClient({
         apiKey: config.apiKey,
         baseUrl: config.baseUrl,
-    });
+    }), [config.apiKey, config.baseUrl]);
     return (React.createElement(PamelaContext.Provider, { value: { client } }, children));
 }
 function usePamela() {
@@ -47,13 +47,37 @@ function usePamela() {
     return context;
 }
 
-function CallButton({ to, task, country, locale, instructions, end_user_id, metadata, onCallStart, onCallComplete, onError, disabled = false, className = '', children, }) {
+function CallButton({ to, task, country, locale, instructions, end_user_id, metadata, tools, webhooks, onCallStart, onCallComplete, onError, variant = 'primary', size = 'md', pollInterval = 2000, pollTimeout = 5 * 60 * 1000, disabled = false, className = '', children, }) {
     const { client } = usePamela();
     const [loading, setLoading] = useState(false);
     const [callId, setCallId] = useState(null);
+    const pollIntervalRef = useRef(null);
+    const timeoutRef = useRef(null);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (pollIntervalRef.current) {
+                clearInterval(pollIntervalRef.current);
+                pollIntervalRef.current = null;
+            }
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+                timeoutRef.current = null;
+            }
+        };
+    }, []);
     const handleClick = async () => {
         if (loading || disabled)
             return;
+        // Clear any existing intervals/timeouts
+        if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current);
+            pollIntervalRef.current = null;
+        }
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
         setLoading(true);
         try {
             const call = await client.createCall({
@@ -64,78 +88,101 @@ function CallButton({ to, task, country, locale, instructions, end_user_id, meta
                 instructions,
                 end_user_id,
                 metadata,
+                tools,
+                webhooks,
             });
             setCallId(call.id);
             onCallStart?.(call.id);
             // Poll for call completion
-            const pollInterval = setInterval(async () => {
+            pollIntervalRef.current = setInterval(async () => {
                 try {
                     const status = await client.getCall(call.id);
                     if (status.status === 'completed' || status.status === 'failed' || status.status === 'cancelled') {
-                        clearInterval(pollInterval);
+                        if (pollIntervalRef.current) {
+                            clearInterval(pollIntervalRef.current);
+                            pollIntervalRef.current = null;
+                        }
+                        if (timeoutRef.current) {
+                            clearTimeout(timeoutRef.current);
+                            timeoutRef.current = null;
+                        }
                         setLoading(false);
                         onCallComplete?.(status);
                     }
                 }
                 catch (error) {
-                    clearInterval(pollInterval);
+                    if (pollIntervalRef.current) {
+                        clearInterval(pollIntervalRef.current);
+                        pollIntervalRef.current = null;
+                    }
+                    if (timeoutRef.current) {
+                        clearTimeout(timeoutRef.current);
+                        timeoutRef.current = null;
+                    }
                     setLoading(false);
                     onError?.(error);
                 }
-            }, 2000);
+            }, pollInterval);
             // Timeout after 5 minutes
-            setTimeout(() => {
-                clearInterval(pollInterval);
+            timeoutRef.current = setTimeout(() => {
+                if (pollIntervalRef.current) {
+                    clearInterval(pollIntervalRef.current);
+                    pollIntervalRef.current = null;
+                }
                 setLoading(false);
-            }, 5 * 60 * 1000);
+            }, pollTimeout);
         }
         catch (error) {
             setLoading(false);
             onError?.(error);
         }
     };
-    return (React.createElement("button", { onClick: handleClick, disabled: loading || disabled, className: `pamela-call-button ${className}`, style: {
-            padding: '10px 20px',
-            background: loading
-                ? 'linear-gradient(to right, #ccc, #aaa)'
-                : 'linear-gradient(to right, #FA931C, #fd8b74)',
-            color: 'white',
-            border: 'none',
-            borderRadius: '0.5rem',
-            cursor: loading || disabled ? 'not-allowed' : 'pointer',
-            fontSize: '16px',
-            fontWeight: '600',
-            fontFamily: 'Poppins, Inter, -apple-system, BlinkMacSystemFont, sans-serif',
-            transition: 'opacity 0.2s',
-            opacity: loading || disabled ? 0.7 : 1,
-            boxShadow: loading || disabled ? 'none' : '0 2px 4px rgba(250, 147, 28, 0.2)',
-        } }, loading ? 'Calling...' : children || 'Call Now'));
+    const variantClass = variant === 'secondary'
+        ? 'pamela-call-button--secondary'
+        : variant === 'danger'
+            ? 'pamela-call-button--danger'
+            : 'pamela-call-button--primary';
+    const sizeClass = size === 'sm'
+        ? 'pamela-call-button--sm'
+        : size === 'lg'
+            ? 'pamela-call-button--lg'
+            : 'pamela-call-button--md';
+    return (React.createElement("button", { onClick: handleClick, disabled: loading || disabled, className: `pamela-call-button ${variantClass} ${sizeClass} ${className}` }, loading ? 'Calling...' : children || 'Call Now'));
 }
 
-function TranscriptViewer({ transcript, className = '' }) {
+function TranscriptViewer({ transcript, maxHeight = 400, autoScroll = true, className = '', }) {
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (!autoScroll || !containerRef.current)
+            return;
+        containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }, [autoScroll, transcript]);
     const getMessageStyle = (speaker) => {
         if (speaker === 'pamela' || speaker === 'agent') {
             // Pamela messages: white background with beige border
             return {
-                backgroundColor: '#ffffff',
-                border: '1px solid rgba(231, 171, 132, 0.3)',
-                color: '#1f2937',
+                backgroundColor: 'var(--bubble-pamela, #ffffff)',
+                border: '1px solid var(--bubble-border, rgba(231, 171, 132, 0.3))',
+                color: 'var(--text-primary, #1f2937)',
+                className: 'pamela-transcript-bubble pamela-transcript-bubble--pamela',
             };
         }
         else if (speaker === 'user' || speaker === 'caller') {
             // User messages: orange background
             return {
-                backgroundColor: '#FA931C',
+                backgroundColor: 'var(--bubble-user, #FA931C)',
                 border: 'none',
                 color: '#ffffff',
+                className: 'pamela-transcript-bubble pamela-transcript-bubble--user',
             };
         }
         else {
             // Call recipient: blue background
             return {
-                backgroundColor: '#4b4bea',
+                backgroundColor: 'var(--bubble-recipient, #4b4bea)',
                 border: 'none',
                 color: '#ffffff',
+                className: 'pamela-transcript-bubble pamela-transcript-bubble--recipient',
             };
         }
     };
@@ -146,21 +193,21 @@ function TranscriptViewer({ transcript, className = '' }) {
                 marginBottom: '16px',
                 fontSize: '18px',
                 fontWeight: '600',
-                color: '#1f2937',
+                color: 'var(--text-primary, #1f2937)',
             } }, "Transcript"),
-        React.createElement("div", { style: {
-                maxHeight: '400px',
+        React.createElement("div", { className: "pamela-transcript-container", style: {
+                maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
                 overflowY: 'auto',
-                borderRadius: '0.5rem',
+                borderRadius: 'var(--radius-sm, 0.5rem)',
                 padding: '16px',
-                backgroundColor: '#F7F4ED',
-            } }, transcript.map((entry, index) => {
+                background: 'var(--surface, #F7F4ED)',
+            }, ref: containerRef }, transcript.map((entry, index) => {
             const style = getMessageStyle(entry.speaker);
-            return (React.createElement("div", { key: index, style: {
+            const { className: bubbleClassName, ...bubbleStyle } = style;
+            return (React.createElement("div", { key: index, className: bubbleClassName, style: {
                     marginBottom: '12px',
-                    padding: '12px 16px',
-                    ...style,
-                    borderRadius: '0.75rem',
+                    ...bubbleStyle,
+                    borderRadius: 'var(--radius-md, 0.75rem)',
                     maxWidth: '75%',
                     marginLeft: entry.speaker === 'pamela' || entry.speaker === 'agent' ? '0' : 'auto',
                     marginRight: entry.speaker === 'pamela' || entry.speaker === 'agent' ? 'auto' : '0',
@@ -168,7 +215,7 @@ function TranscriptViewer({ transcript, className = '' }) {
                 React.createElement("div", { style: {
                         fontSize: '12px',
                         fontWeight: '600',
-                        color: style.color === '#ffffff' ? 'rgba(255, 255, 255, 0.9)' : '#6b7280',
+                        color: style.color === '#ffffff' ? 'rgba(255, 255, 255, 0.9)' : 'var(--text-muted, #6b7280)',
                         marginBottom: '6px',
                         textTransform: 'capitalize',
                     } }, entry.speaker === 'pamela' || entry.speaker === 'agent'
@@ -185,7 +232,7 @@ function TranscriptViewer({ transcript, className = '' }) {
                     } }, entry.text),
                 entry.timestamp && (React.createElement("div", { style: {
                         fontSize: '11px',
-                        color: style.color === '#ffffff' ? 'rgba(255, 255, 255, 0.7)' : '#9ca3af',
+                        color: style.color === '#ffffff' ? 'rgba(255, 255, 255, 0.7)' : 'var(--text-muted, #9ca3af)',
                         marginTop: '6px',
                     } }, new Date(entry.timestamp).toLocaleTimeString()))));
         }))));
@@ -195,45 +242,63 @@ function TranscriptViewer({ transcript, className = '' }) {
 function StatusIndicator({ status }) {
     const getStatusConfig = () => {
         switch (status) {
+            case 'queued':
+            case 'initiating':
+                return {
+                    dots: [
+                        { color: 'var(--status-warning, #eab308)', pulse: true },
+                        { color: 'var(--status-muted, #d1d5db)', pulse: false },
+                        { color: 'var(--status-muted, #d1d5db)', pulse: false },
+                        { color: 'var(--status-muted, #d1d5db)', pulse: false },
+                    ],
+                    text: 'Queued...',
+                    textColor: 'var(--status-warning, #eab308)',
+                };
             case 'ringing':
                 return {
                     dots: [
-                        { color: '#10b981', pulse: true }, // green-500 (first dot)
-                        { color: '#eab308', pulse: true }, // yellow-500 (second dot)
-                        { color: '#d1d5db', pulse: false }, // gray-300 (third dot)
-                        { color: '#d1d5db', pulse: false }, // gray-300 (fourth dot)
+                        { color: 'var(--status-success, #10b981)', pulse: true },
+                        { color: 'var(--status-warning, #eab308)', pulse: true },
+                        { color: 'var(--status-muted, #d1d5db)', pulse: false },
+                        { color: 'var(--status-muted, #d1d5db)', pulse: false },
                     ],
                     text: 'Ringing...',
-                    textColor: '#eab308', // yellow-600
+                    textColor: 'var(--status-warning, #eab308)',
                 };
             case 'in_progress':
             case 'in-progress':
                 return {
                     dots: [
-                        { color: '#10b981', pulse: false }, // green-500
-                        { color: '#10b981', pulse: false },
-                        { color: '#10b981', pulse: true }, // third dot pulses
-                        { color: '#d1d5db', pulse: false }, // gray-300
+                        { color: 'var(--status-success, #10b981)', pulse: false },
+                        { color: 'var(--status-success, #10b981)', pulse: false },
+                        { color: 'var(--status-success, #10b981)', pulse: true },
+                        { color: 'var(--status-muted, #d1d5db)', pulse: false },
                     ],
                     text: 'In progress',
-                    textColor: '#10b981', // green-600
+                    textColor: 'var(--status-success, #10b981)',
                 };
             case 'completed':
                 return {
                     dots: [
-                        { color: '#10b981', pulse: false },
-                        { color: '#10b981', pulse: false },
-                        { color: '#10b981', pulse: false },
-                        { color: '#10b981', pulse: false, icon: true },
+                        { color: 'var(--status-success, #10b981)', pulse: false },
+                        { color: 'var(--status-success, #10b981)', pulse: false },
+                        { color: 'var(--status-success, #10b981)', pulse: false },
+                        { color: 'var(--status-success, #10b981)', pulse: false, icon: true },
                     ],
                     text: 'Completed',
-                    textColor: '#10b981',
+                    textColor: 'var(--status-success, #10b981)',
                 };
             case 'failed':
                 return {
                     dots: [],
                     text: 'Failed',
-                    textColor: '#ef4444', // red-500
+                    textColor: 'var(--status-error, #ef4444)',
+                };
+            case 'cancelled':
+                return {
+                    dots: [],
+                    text: 'Cancelled',
+                    textColor: 'var(--status-error, #ef4444)',
                 };
             default:
                 return {
@@ -251,16 +316,17 @@ function StatusIndicator({ status }) {
                 height: '8px',
                 borderRadius: '50%',
                 backgroundColor: dot.color,
-                animation: dot.pulse ? 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite' : 'none',
+                animation: dot.pulse ? 'pamela-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite' : 'none',
             } }))))))),
         React.createElement("span", { style: {
                 fontSize: '12px',
                 fontWeight: '500',
                 color: config.textColor,
+                fontStyle: 'italic',
                 fontFamily: 'Poppins, Inter, sans-serif',
             } }, config.text)));
 }
-function CallStatus({ callId, pollInterval = 5000, onStatusChange, showTranscript = true, className = '', }) {
+function CallStatus({ callId, pollInterval = 5000, onStatusChange, showTranscript = true, showSummary = true, compact = false, className = '', }) {
     const { client } = usePamela();
     const [status, setStatus] = useState(null);
     const [loading, setLoading] = useState(true);
@@ -286,74 +352,64 @@ function CallStatus({ callId, pollInterval = 5000, onStatusChange, showTranscrip
     }, [callId, pollInterval, client, onStatusChange]);
     if (loading) {
         return (React.createElement("div", { className: `pamela-call-status ${className}` },
-            React.createElement("div", { style: { color: '#6b7280', fontFamily: 'Poppins, Inter, sans-serif' } }, "Loading call status...")));
+            React.createElement("div", { style: { color: 'var(--text-muted, #6b7280)', fontFamily: 'Poppins, Inter, sans-serif' } }, "Loading call status...")));
     }
     if (error) {
         return (React.createElement("div", { className: `pamela-call-status ${className}` },
-            React.createElement("div", { style: { color: '#ef4444', fontFamily: 'Poppins, Inter, sans-serif' } },
+            React.createElement("div", { style: { color: 'var(--status-error, #ef4444)', fontFamily: 'Poppins, Inter, sans-serif' } },
                 "Error: ",
                 error.message)));
     }
     if (!status) {
         return (React.createElement("div", { className: `pamela-call-status ${className}` },
-            React.createElement("div", { style: { color: '#6b7280', fontFamily: 'Poppins, Inter, sans-serif' } }, "Call not found")));
+            React.createElement("div", { style: { color: 'var(--text-muted, #6b7280)', fontFamily: 'Poppins, Inter, sans-serif' } }, "Call not found")));
     }
     return (React.createElement("div", { className: `pamela-call-status ${className}`, style: {
             fontFamily: 'Poppins, Inter, -apple-system, BlinkMacSystemFont, sans-serif',
         } },
         React.createElement("div", { style: {
-                marginBottom: '16px',
-                padding: '16px',
-                backgroundColor: '#ffffff',
-                borderRadius: '0.75rem',
-                border: '1px solid rgba(231, 171, 132, 0.3)',
-                boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
+                marginBottom: compact ? '8px' : '16px',
+                padding: compact ? '12px' : '16px',
+                background: 'var(--surface-liquid-strong, #ffffff)',
+                borderRadius: 'var(--radius-md, 0.75rem)',
+                border: '1px solid var(--surface-border-strong, rgba(231, 171, 132, 0.3))',
+                boxShadow: 'var(--shadow-soft, 0 1px 3px rgba(0, 0, 0, 0.1))',
             } },
             React.createElement("div", { style: { marginBottom: '12px' } },
                 React.createElement(StatusIndicator, { status: status.status })),
-            React.createElement("div", { style: { fontSize: '14px', color: '#1f2937', lineHeight: '1.6' } },
-                React.createElement("div", { style: { marginBottom: '8px' } },
-                    React.createElement("span", { style: { fontWeight: '600', color: '#6b7280' } }, "To:"),
+            React.createElement("div", { style: { fontSize: compact ? '12px' : '14px', color: 'var(--text-primary, #1f2937)', lineHeight: '1.6' } },
+                React.createElement("div", { style: { marginBottom: compact ? '6px' : '8px' } },
+                    React.createElement("span", { style: { fontWeight: '600', color: 'var(--text-secondary, #6b7280)' } }, "To:"),
                     ' ',
-                    React.createElement("span", { style: { color: '#1f2937' } }, status.to)),
-                React.createElement("div", { style: { marginBottom: '8px' } },
-                    React.createElement("span", { style: { fontWeight: '600', color: '#6b7280' } }, "From:"),
+                    React.createElement("span", { style: { color: 'var(--text-primary, #1f2937)' } }, status.to)),
+                React.createElement("div", { style: { marginBottom: compact ? '6px' : '8px' } },
+                    React.createElement("span", { style: { fontWeight: '600', color: 'var(--text-secondary, #6b7280)' } }, "From:"),
                     ' ',
-                    React.createElement("span", { style: { color: '#1f2937' } }, status.from_)),
-                status.duration_seconds && (React.createElement("div", { style: { marginBottom: '8px' } },
-                    React.createElement("span", { style: { fontWeight: '600', color: '#6b7280' } }, "Duration:"),
+                    React.createElement("span", { style: { color: 'var(--text-primary, #1f2937)' } }, status.from_)),
+                status.duration_seconds && !compact && (React.createElement("div", { style: { marginBottom: '8px' } },
+                    React.createElement("span", { style: { fontWeight: '600', color: 'var(--text-secondary, #6b7280)' } }, "Duration:"),
                     ' ',
-                    React.createElement("span", { style: { color: '#1f2937' } },
+                    React.createElement("span", { style: { color: 'var(--text-primary, #1f2937)' } },
                         status.duration_seconds,
                         "s")))),
-            status.summary && (React.createElement("div", { style: {
-                    marginTop: '16px',
-                    padding: '16px',
-                    background: 'linear-gradient(to right, rgba(250, 147, 28, 0.1), rgba(253, 139, 116, 0.1))',
-                    border: '1px solid rgba(250, 147, 28, 0.3)',
-                    borderRadius: '0.75rem',
+            showSummary && status.summary && (React.createElement("div", { style: {
+                    marginTop: compact ? '12px' : '16px',
+                    padding: compact ? '12px' : '16px',
+                    background: 'var(--cta-bg, linear-gradient(to right, rgba(250, 147, 28, 0.1), rgba(253, 139, 116, 0.1)))',
+                    border: 'var(--cta-border, 1px solid rgba(250, 147, 28, 0.3))',
+                    borderRadius: 'var(--radius-md, 0.75rem)',
                 } },
                 React.createElement("div", { style: {
                         display: 'flex',
                         alignItems: 'center',
                         gap: '8px',
-                        marginBottom: '8px',
+                        marginBottom: compact ? '6px' : '8px',
                     } },
-                    React.createElement("svg", { style: { width: '20px', height: '20px', color: '#FA931C' }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
+                    React.createElement("svg", { style: { width: '20px', height: '20px', color: 'var(--accent, #FA931C)' }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
                         React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" })),
-                    React.createElement("h4", { style: { fontWeight: '600', color: '#1f2937', fontSize: '14px' } }, "Call Summary")),
-                React.createElement("p", { style: { fontSize: '14px', color: '#1f2937', lineHeight: '1.6' } }, status.summary)))),
-        showTranscript && status.transcript && status.transcript.length > 0 && (React.createElement(TranscriptViewer, { transcript: status.transcript })),
-        React.createElement("style", null, `
-        @keyframes pulse {
-          0%, 100% {
-            opacity: 1;
-          }
-          50% {
-            opacity: 0.5;
-          }
-        }
-      `)));
+                    React.createElement("h4", { style: { fontWeight: '600', color: 'var(--text-primary, #1f2937)', fontSize: compact ? '12px' : '14px' } }, "Call Summary")),
+                React.createElement("p", { style: { fontSize: compact ? '12px' : '14px', color: 'var(--text-primary, #1f2937)', lineHeight: '1.6' } }, status.summary)))),
+        showTranscript && status.transcript && status.transcript.length > 0 && (React.createElement(TranscriptViewer, { transcript: status.transcript }))));
 }
 
 function CallHistory({ limit = 10, onCallSelect, className = '', }) {
@@ -361,19 +417,37 @@ function CallHistory({ limit = 10, onCallSelect, className = '', }) {
     const [calls, setCalls] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
-    // Note: This requires a list endpoint in the API
-    // For now, this is a placeholder that shows the structure
     useEffect(() => {
-        // TODO: Implement when /api/b2b/v1/calls list endpoint is available
-        setLoading(false);
-    }, [client]);
+        let isMounted = true;
+        const fetchCalls = async () => {
+            try {
+                const response = await client.listCalls({ limit });
+                if (!isMounted) {
+                    return;
+                }
+                setCalls(response.items || []);
+                setLoading(false);
+            }
+            catch (err) {
+                if (!isMounted) {
+                    return;
+                }
+                setError(err);
+                setLoading(false);
+            }
+        };
+        fetchCalls();
+        return () => {
+            isMounted = false;
+        };
+    }, [client, limit]);
     if (loading) {
         return (React.createElement("div", { className: `pamela-call-history ${className}` },
-            React.createElement("div", { style: { color: '#6b7280', fontFamily: 'Poppins, Inter, sans-serif' } }, "Loading call history...")));
+            React.createElement("div", { style: { color: 'var(--text-muted, #6b7280)', fontFamily: 'Poppins, Inter, sans-serif' } }, "Loading call history...")));
     }
     if (error) {
         return (React.createElement("div", { className: `pamela-call-history ${className}` },
-            React.createElement("div", { style: { color: '#ef4444', fontFamily: 'Poppins, Inter, sans-serif' } },
+            React.createElement("div", { style: { color: 'var(--status-error, #ef4444)', fontFamily: 'Poppins, Inter, sans-serif' } },
                 "Error: ",
                 error.message)));
     }
@@ -384,34 +458,238 @@ function CallHistory({ limit = 10, onCallSelect, className = '', }) {
                 marginBottom: '16px',
                 fontSize: '18px',
                 fontWeight: '600',
-                color: '#1f2937',
+                color: 'var(--text-primary, #1f2937)',
             } }, "Call History"),
-        calls.length === 0 ? (React.createElement("div", { style: { color: '#6b7280', fontSize: '14px' } }, "No calls yet")) : (React.createElement("div", null, calls.map((call) => (React.createElement("div", { key: call.id, onClick: () => onCallSelect?.(call.id), style: {
+        calls.length === 0 ? (React.createElement("div", { style: { color: 'var(--text-muted, #6b7280)', fontSize: '14px' } }, "No calls yet")) : (React.createElement("div", null, calls.map((call) => (React.createElement("div", { key: call.id, onClick: () => onCallSelect?.(call.id), style: {
                 padding: '12px',
                 marginBottom: '8px',
-                border: '1px solid rgba(231, 171, 132, 0.3)',
-                borderRadius: '0.5rem',
+                border: '1px solid var(--surface-border-strong, rgba(231, 171, 132, 0.3))',
+                borderRadius: 'var(--radius-sm, 0.5rem)',
                 cursor: onCallSelect ? 'pointer' : 'default',
-                backgroundColor: '#ffffff',
+                background: 'var(--surface-liquid-strong, #ffffff)',
                 transition: 'background-color 0.2s',
                 ...(onCallSelect && {
                     ':hover': {
-                        backgroundColor: '#F7F4ED',
+                        backgroundColor: 'var(--surface, #F7F4ED)',
                     },
                 }),
             }, onMouseEnter: (e) => {
                 if (onCallSelect) {
-                    e.currentTarget.style.backgroundColor = '#F7F4ED';
+                    e.currentTarget.style.backgroundColor = 'var(--surface, #F7F4ED)';
                 }
             }, onMouseLeave: (e) => {
-                e.currentTarget.style.backgroundColor = '#ffffff';
+                e.currentTarget.style.backgroundColor = 'var(--surface-liquid-strong, #ffffff)';
             } },
-            React.createElement("div", { style: { fontWeight: '600', color: '#1f2937', marginBottom: '4px' } }, call.to),
-            React.createElement("div", { style: { fontSize: '14px', color: '#6b7280' } },
+            React.createElement("div", { style: { fontWeight: '600', color: 'var(--text-primary, #1f2937)', marginBottom: '4px' } }, call.to),
+            React.createElement("div", { style: { fontSize: '14px', color: 'var(--text-secondary, #6b7280)' } },
                 call.status,
                 " \u2022 ",
                 new Date(call.created_at).toLocaleString()))))))));
 }
 
-export { CallButton, CallHistory, CallStatus, PamelaProvider, TranscriptViewer, usePamela };
+const sizeMap = {
+    small: 'var(--pamela-orb-size-small, 96px)',
+    medium: 'var(--pamela-orb-size-medium, 128px)',
+    large: 'var(--pamela-orb-size-large, 192px)',
+};
+function VoiceOrb({ isActive = false, size = 'large', className = '' }) {
+    const [pulsePhase, setPulsePhase] = useState(0);
+    const [idlePhase, setIdlePhase] = useState(Math.floor(Math.random() * 720)); // Random initial phase to avoid sync
+    // Continuous animation for idle mode - runs once on mount
+    // Remove modulo to allow continuous rotation (can go beyond 360 degrees for seamless loop)
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setIdlePhase(prev => prev + 1); // Continuous growth - no reset for fluid animation
+        }, 16); // ~60fps
+        return () => clearInterval(interval);
+    }, []); // Empty deps - only run once
+    // Fast animation for active mode
+    useEffect(() => {
+        if (!isActive)
+            return;
+        const interval = setInterval(() => {
+            setPulsePhase(prev => (prev + 1) % 360);
+        }, 16); // ~60fps
+        return () => clearInterval(interval);
+    }, [isActive]);
+    const orbSize = sizeMap[size];
+    // Multiple breathing layers for idle mode (more organic) - reduced by 10%
+    const baseTime = idlePhase * 0.05;
+    const idleBreath1 = Math.sin(baseTime) * 0.072; // 7.2% primary breath (was 8%)
+    const idleBreath2 = Math.sin(baseTime * 1.3) * 0.045; // 4.5% secondary breath (was 5%)
+    const idleBreath3 = Math.sin(baseTime * 0.7) * 0.027; // 2.7% tertiary breath (was 3%)
+    // Calculate pulse scale - multi-layer breathing when idle, faster pulse when active - reduced by 10%
+    const pulseScale = isActive
+        ? 1 + Math.sin((pulsePhase * Math.PI) / 180) * 0.135 // 13.5% pulse variation (was 15%)
+        : 1 + idleBreath1 + idleBreath2 + idleBreath3; // Layered breathing when idle
+    // Floating/levitation effect (idle only) - reduced by 10%
+    const floatY = isActive ? 0 : Math.sin(baseTime * 0.4) * 7.2; // 7.2px float movement (was 8px)
+    // Continuous gradient rotation - slower when idle, faster when active
+    const gradientRotation = isActive
+        ? pulsePhase * 0.5
+        : idlePhase * 0.15; // Slow, continuous rotation when idle
+    // Subtle color shift for idle mode - reduced by 10%
+    const colorShift = isActive ? 0 : Math.sin(baseTime * 0.3) * 9; // 9deg color shift (was 10deg)
+    const orbSizeStyle = {
+        width: orbSize,
+        height: orbSize,
+    };
+    return (React.createElement("div", { className: className, style: {
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            transform: `translateY(${floatY}px)`,
+            transition: isActive ? 'transform 0.3s ease-out' : 'none',
+        } },
+        React.createElement("div", { style: {
+                ...orbSizeStyle,
+                position: 'absolute',
+                borderRadius: '50%',
+                filter: 'blur(24px)', // blur-xl
+                background: `radial-gradient(circle, 
+            hsla(${25 + colorShift}, 75%, 55%, 0.54), 
+            hsla(${11 + colorShift}, 97%, 72%, 0.54))`,
+                transform: `scale(${pulseScale * 1.125})`,
+                opacity: isActive ? 0.315 : 0.225,
+                transition: 'opacity 0.3s ease-out',
+            } }),
+        React.createElement("div", { style: {
+                ...orbSizeStyle,
+                position: 'absolute',
+                borderRadius: '50%',
+                filter: 'blur(16px)', // blur-lg
+                background: `radial-gradient(circle, 
+            hsla(${25 + colorShift * 0.7}, 75%, 55%, 0.45), 
+            hsla(${11 + colorShift * 0.7}, 97%, 72%, 0.45))`,
+                transform: `scale(${pulseScale * 1.035}) rotate(${gradientRotation * 0.3}deg)`,
+                opacity: isActive ? 0.405 : 0.315,
+                transition: 'opacity 0.3s ease-out',
+            } }),
+        !isActive && (React.createElement("div", { style: {
+                ...orbSizeStyle,
+                position: 'absolute',
+                borderRadius: '50%',
+                filter: 'blur(40px)', // blur-2xl
+                background: `radial-gradient(circle, 
+              hsla(${25 + colorShift * 0.5}, 70%, 50%, 0.27), 
+              hsla(${11 + colorShift * 0.5}, 97%, 72%, 0.27))`,
+                transform: `scale(${(1 + idleBreath1) * 1.26})`,
+                opacity: 0.18,
+            } })),
+        React.createElement("div", { style: {
+                ...orbSizeStyle,
+                position: 'relative',
+                borderRadius: '50%',
+                background: `linear-gradient(${gradientRotation + colorShift}deg, 
+            hsl(${25 + colorShift}, 75%, 55%), 
+            hsl(${11 + colorShift}, 97%, 72%), 
+            hsl(${25 + colorShift}, 75%, 55%))`,
+                backgroundSize: '200% 200%',
+                transform: `scale(${pulseScale}) rotate(${gradientRotation * 0.1}deg)`,
+                boxShadow: isActive
+                    ? '0 0 54px rgba(250,147,28,0.45), 0 0 90px rgba(253,139,116,0.27), inset 0 0 36px rgba(255,255,255,0.09)'
+                    : `0 0 72px hsla(${25 + colorShift}, 60%, 50%, 0.36), 
+               0 0 108px hsla(${11 + colorShift}, 97%, 72%, 0.225), 
+               inset 0 0 45px rgba(255,255,255,0.135)`,
+                transition: 'box-shadow 0.3s ease-out',
+            } },
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    borderRadius: '50%',
+                    background: `radial-gradient(circle at ${30 + Math.sin(baseTime * 0.2) * 5}% ${30 + Math.cos(baseTime * 0.2) * 5}%, 
+              rgba(255,255,255,${isActive ? 0.36 : 0.315}), transparent 60%)`,
+                    opacity: isActive ? 0.54 : 0.63,
+                    transition: 'opacity 0.3s ease-out',
+                } }),
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    borderRadius: '50%',
+                    background: `linear-gradient(${45 + gradientRotation * 0.2}deg, 
+              transparent 30%, 
+              rgba(255,255,255,${isActive ? 0.45 : 0.225}) 50%, 
+              transparent 70%)`,
+                    animation: isActive ? 'shimmer 3s infinite' : 'shimmer 6s infinite',
+                    opacity: isActive ? 0.27 : 0.18,
+                    transition: 'opacity 0.3s ease-out',
+                } }),
+            !isActive && (React.createElement(React.Fragment, null,
+                React.createElement("div", { style: {
+                        position: 'absolute',
+                        borderRadius: '50%',
+                        backgroundColor: 'white',
+                        width: '8px',
+                        height: '8px',
+                        top: `${25 + Math.sin(baseTime * 0.5) * 15}%`,
+                        left: `${35 + Math.cos(baseTime * 0.5) * 15}%`,
+                        opacity: 0.36 + Math.sin(baseTime * 0.8) * 0.18,
+                        filter: 'blur(2px)',
+                        transform: `scale(${0.8 + Math.sin(baseTime * 1.2) * 0.36})`,
+                    } }),
+                React.createElement("div", { style: {
+                        position: 'absolute',
+                        borderRadius: '50%',
+                        backgroundColor: 'white',
+                        width: '6px',
+                        height: '6px',
+                        top: `${60 + Math.sin(baseTime * 0.7 + 2) * 12}%`,
+                        left: `${65 + Math.cos(baseTime * 0.7 + 2) * 12}%`,
+                        opacity: 0.27 + Math.sin(baseTime * 0.9) * 0.135,
+                        filter: 'blur(1.5px)',
+                        transform: `scale(${0.7 + Math.sin(baseTime * 1.4) * 0.27})`,
+                    } })))),
+        isActive && (React.createElement(React.Fragment, null,
+            React.createElement("div", { style: {
+                    ...orbSizeStyle,
+                    position: 'absolute',
+                    borderRadius: '50%',
+                    border: '2px solid #FA931C',
+                    opacity: 0,
+                    animation: 'ripple 2s infinite ease-in-out',
+                    animationDelay: '0s',
+                } }),
+            React.createElement("div", { style: {
+                    ...orbSizeStyle,
+                    position: 'absolute',
+                    borderRadius: '50%',
+                    border: '2px solid #fd8b74',
+                    opacity: 0,
+                    animation: 'ripple 2s infinite ease-in-out',
+                    animationDelay: '0.7s',
+                } }),
+            React.createElement("div", { style: {
+                    ...orbSizeStyle,
+                    position: 'absolute',
+                    borderRadius: '50%',
+                    border: '2px solid #FA931C',
+                    opacity: 0,
+                    animation: 'ripple 2s infinite ease-in-out',
+                    animationDelay: '1.4s',
+                } }))),
+        !isActive && (React.createElement(React.Fragment, null,
+            React.createElement("div", { style: {
+                    ...orbSizeStyle,
+                    position: 'absolute',
+                    borderRadius: '50%',
+                    border: '1px solid #FA931C',
+                    opacity: 0.135 + Math.sin(baseTime * 0.25) * 0.045,
+                    transform: `scale(${1 + Math.sin(baseTime * 0.25) * 0.27})`,
+                    animation: 'ripple 8s infinite ease-in-out',
+                    animationDelay: '0s',
+                } }),
+            React.createElement("div", { style: {
+                    ...orbSizeStyle,
+                    position: 'absolute',
+                    borderRadius: '50%',
+                    border: '1px solid #fd8b74',
+                    opacity: 0.09 + Math.sin(baseTime * 0.25 + 3) * 0.027,
+                    transform: `scale(${1 + Math.sin(baseTime * 0.25 + 3) * 0.225})`,
+                    animation: 'ripple 8s infinite ease-in-out',
+                    animationDelay: '2.5s',
+                } })))));
+}
+
+export { CallButton, CallHistory, CallStatus, PamelaProvider, TranscriptViewer, VoiceOrb, usePamela };
 //# sourceMappingURL=index.esm.js.map