hanc-webrtc-widgets 2.2.1 → 2.2.3

package/dist/src/components/floating-call/floating-call.d.ts

@@ -1,17 +1,25 @@
 import { LitElement } from 'lit';
-import { OrbColors } from '../../core/orb';
+import { OrbColors, SoundPreset } from '../../core/orb';
 export declare class FloatingCall extends LitElement {
     static styles: import('lit').CSSResult;
     private callManager;
+    private healthMonitor;
     private orbRenderer;
     private audioAnalyzer;
     private soundManager;
     private orbContainerRef;
     private animationId;
+    private pendingTimers;
+    private isPageVisible;
+    private boundHandleVisibilityChange;
+    private animationStartTime;
+    private intersectionObserver;
+    private isOrbInitialized;
     agentId: string;
     voiceServiceUrl?: string;
     private callStatus;
     private microphoneEnabled;
+    private serviceUnavailable;
     buttonStartText: string;
     buttonConnectingText: string;
     position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'static';
@@ -32,9 +40,36 @@ export declare class FloatingCall extends LitElement {
     colorContrast: number;
     soundEnabled: boolean;
     soundVolume: number;
+    soundPreset: SoundPreset;
+    constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Handle page visibility change (critical for iOS Safari)
+     */
+    private handleVisibilityChange;
+    /**
+     * Stop animation loop (for page visibility)
+     */
+    private stopAnimation;
+    /**
+     * Resume animation based on current state
+     */
+    private resumeAnimation;
+    /**
+     * Schedule a timer that will be automatically cleaned up on disconnect
+     */
+    private scheduleTimer;
+    /**
+     * Clear all pending timers
+     */
+    private clearAllTimers;
     firstUpdated(): void;
+    /**
+     * Setup IntersectionObserver for lazy OrbRenderer initialization
+     * This significantly improves page load time when multiple widgets are present
+     */
+    private setupLazyInitialization;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
     private applyTheme;
     private initializeOrb;
@@ -45,6 +80,7 @@ export declare class FloatingCall extends LitElement {
     private handleLocalAudioTrack;
     private handleMicrophoneEnabled;
     private handleMicrophoneDisabled;
+    private handleHealthChange;
     private handleStatusChange;
     private toggleCall;
     private getButtonIcon;

package/dist/src/components/inline-call/inline-call.d.ts

@@ -1,17 +1,25 @@
 import { LitElement } from 'lit';
-import { OrbColors } from '../../core/orb';
+import { OrbColors, SoundPreset } from '../../core/orb';
 export declare class InlineCall extends LitElement {
     static styles: import('lit').CSSResult;
     private callManager;
+    private healthMonitor;
     private orbRenderer;
     private audioAnalyzer;
     private soundManager;
     private orbContainerRef;
     private animationId;
+    private pendingTimers;
+    private isPageVisible;
+    private boundHandleVisibilityChange;
+    private animationStartTime;
+    private intersectionObserver;
+    private isOrbInitialized;
     agentId: string;
     voiceServiceUrl?: string;
     private callStatus;
     private microphoneEnabled;
+    private serviceUnavailable;
     buttonStartText: string;
     buttonConnectingText: string;
     size: number;
@@ -32,9 +40,36 @@ export declare class InlineCall extends LitElement {
     colorContrast: number;
     soundEnabled: boolean;
     soundVolume: number;
+    soundPreset: SoundPreset;
+    constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Handle page visibility change (critical for iOS Safari)
+     */
+    private handleVisibilityChange;
+    /**
+     * Stop animation loop (for page visibility)
+     */
+    private stopAnimation;
+    /**
+     * Resume animation based on current state
+     */
+    private resumeAnimation;
+    /**
+     * Schedule a timer that will be automatically cleaned up on disconnect
+     */
+    private scheduleTimer;
+    /**
+     * Clear all pending timers
+     */
+    private clearAllTimers;
     firstUpdated(): void;
+    /**
+     * Setup IntersectionObserver for lazy OrbRenderer initialization
+     * This significantly improves page load time when multiple widgets are present
+     */
+    private setupLazyInitialization;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
     private applyTheme;
     private initializeOrb;
@@ -45,6 +80,7 @@ export declare class InlineCall extends LitElement {
     private handleLocalAudioTrack;
     private handleMicrophoneEnabled;
     private handleMicrophoneDisabled;
+    private handleHealthChange;
     private handleStatusChange;
     private toggleCall;
     private getButtonIcon;

package/dist/src/components/orb-widget.d.ts

@@ -42,6 +42,11 @@ export declare class HancAiOrbElement extends LitElement {
     private destroyWidget;
     private buildConfig;
     private resolveColors;
+    /**
+     * Sanitize parsed JSON to prevent prototype pollution attacks.
+     * Creates a clean copy without __proto__, constructor, and prototype keys.
+     */
+    private sanitizeObject;
     private parseColors;
     private parseOrbConfig;
     private applyHostStyles;

package/dist/src/components/pill-call/pill-call.d.ts

@@ -1,17 +1,25 @@
 import { LitElement } from 'lit';
-import { OrbColors } from '../../core/orb';
+import { OrbColors, SoundPreset } from '../../core/orb';
 export declare class PillCall extends LitElement {
     static styles: import('lit').CSSResult;
     private callManager;
+    private healthMonitor;
     private orbRenderer;
     private audioAnalyzer;
     private soundManager;
     private orbContainerRef;
     private animationId;
+    private pendingTimers;
+    private isPageVisible;
+    private boundHandleVisibilityChange;
+    private animationStartTime;
+    private intersectionObserver;
+    private isOrbInitialized;
     agentId: string;
     voiceServiceUrl?: string;
     private callStatus;
     private microphoneEnabled;
+    private serviceUnavailable;
     buttonStartText: string;
     buttonConnectingText: string;
     buttonEndText: string;
@@ -32,9 +40,36 @@ export declare class PillCall extends LitElement {
     colorContrast: number;
     soundEnabled: boolean;
     soundVolume: number;
+    soundPreset: SoundPreset;
+    constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Handle page visibility change (critical for iOS Safari)
+     */
+    private handleVisibilityChange;
+    /**
+     * Stop animation loop (for page visibility)
+     */
+    private stopAnimation;
+    /**
+     * Resume animation based on current state
+     */
+    private resumeAnimation;
+    /**
+     * Schedule a timer that will be automatically cleaned up on disconnect
+     */
+    private scheduleTimer;
+    /**
+     * Clear all pending timers
+     */
+    private clearAllTimers;
     firstUpdated(): void;
+    /**
+     * Setup IntersectionObserver for lazy OrbRenderer initialization
+     * This significantly improves page load time when multiple widgets are present
+     */
+    private setupLazyInitialization;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
     private applyTheme;
     private initializeOrb;
@@ -45,6 +80,7 @@ export declare class PillCall extends LitElement {
     private handleLocalAudioTrack;
     private handleMicrophoneEnabled;
     private handleMicrophoneDisabled;
+    private handleHealthChange;
     private handleStatusChange;
     private toggleCall;
     private getButtonIcon;

package/dist/src/core/health-monitor.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Background Health Monitor (Singleton)
+ *
+ * Polls the voice service health endpoint every 30 seconds and maintains
+ * an in-memory health status flag. Widget components read this flag
+ * before initiating calls to avoid unnecessary latency.
+ *
+ * Uses reference counting - multiple widgets share one monitor instance.
+ *
+ * Events Emitted:
+ * - 'health-changed': When health status transitions between states
+ */
+export type HealthStatus = 'unknown' | 'healthy' | 'unhealthy';
+/**
+ * HealthMonitor wrapper that uses the shared singleton
+ * Provides the same API as before for backwards compatibility
+ */
+export declare class HealthMonitor {
+    get isHealthy(): boolean;
+    get status(): HealthStatus;
+    set serviceUrl(url: string);
+    get serviceUrl(): string;
+    start(): void;
+    stop(): void;
+    addEventListener(type: string, listener: (e: Event) => void): void;
+    removeEventListener(type: string, listener: (e: Event) => void): void;
+}

package/dist/src/core/livekit-call-manager.d.ts

@@ -53,6 +53,66 @@ export declare class LiveKitCallManager extends EventTarget {
     private userIdentity;
     private roomName;
     private audioPlaybackPrompt;
+    private audioElements;
+    private audioContainer;
+    private wasConnectedBeforeHidden;
+    private isPageVisible;
+    private reconnectAttempts;
+    private maxReconnectAttempts;
+    private isReconnecting;
+    private isDestroyed;
+    private pendingTimers;
+    private boundHandleVisibilityChange;
+    private boundHandlePageHide;
+    private boundHandlePageShow;
+    private boundHandleOnline;
+    private boundHandleOffline;
+    private readonly isAppleDevice;
+    constructor();
+    private createAudioContainer;
+    /**
+     * Schedule a timer that will be automatically cleaned up on destroy
+     */
+    private scheduleTimer;
+    /**
+     * Clear all pending timers
+     */
+    private clearAllTimers;
+    private setupLifecycleListeners;
+    private removeLifecycleListeners;
+    private handleVisibilityChange;
+    private handlePageHide;
+    private handlePageShow;
+    private handleOnline;
+    private handleOffline;
+    private pauseAllAudio;
+    private resumeAllAudio;
+    private resumeAfterVisibilityChange;
+    private attemptReconnect;
+    /**
+     * Clean up room without full destroy
+     */
+    private cleanupRoom;
+    private cleanupBeforeUnload;
+    private cleanupAudioElements;
+    /**
+     * Remove the audio container from DOM
+     */
+    private removeAudioContainer;
+    destroy(): void;
+    /**
+     * Attempt to play audio element with iOS Safari handling
+     * Returns true if played successfully, false if blocked
+     */
+    private playAudioElement;
+    /**
+     * Fetch with timeout - prevents hanging on slow iOS connections
+     */
+    private fetchWithTimeout;
+    /**
+     * Connect with timeout - prevents hanging on iOS
+     */
+    private connectWithTimeout;
     set serviceUrl(url: string | undefined);
     get serviceUrl(): string;
     get status(): CallStatus;

package/dist/src/core/orb/AudioAnalyzer.d.ts

@@ -20,6 +20,7 @@ export declare class AudioAnalyzer {
     private mixer;
     private frequencyData;
     private waveformData;
+    private hasAcquiredContext;
     private smoothedBass;
     private smoothedMid;
     private smoothedTreble;
@@ -27,6 +28,11 @@ export declare class AudioAnalyzer {
     private readonly smoothingFactor;
     private readonly options;
     constructor(options?: AudioAnalyzerOptions);
+    /**
+     * Acquire shared AudioContext (iOS limit safe)
+     * Returns null if context couldn't be acquired or resumed
+     */
+    private ensureAudioContext;
     /**
      * Initialize analyzer with a MediaStream (remote audio)
      */

package/dist/src/core/orb/OrbRenderer.d.ts

@@ -41,7 +41,23 @@ export declare class OrbRenderer {
     private currentRotation;
     private audioValues;
     private readonly canvasPadding;
+    private resizeTimeoutId;
+    private isContextLost;
+    private boundHandleContextLost;
+    private boundHandleContextRestored;
     constructor(container: HTMLElement, config?: OrbConfig);
+    /**
+     * Handle WebGL context loss (iOS background transition)
+     */
+    private handleContextLost;
+    /**
+     * Handle WebGL context restoration (iOS foreground transition)
+     */
+    private handleContextRestored;
+    /**
+     * Recreate WebGL resources after context loss
+     */
+    private recreateAfterContextLoss;
     private createOrb;
     /**
      * Update audio data with smoothing

package/dist/src/core/orb/SharedAudioContext.d.ts

@@ -0,0 +1,61 @@
+/**
+ * SharedAudioContext - Singleton AudioContext manager for multiple widgets
+ *
+ * iOS Safari has a limit of ~6 AudioContext instances.
+ * This module provides a shared AudioContext that all widgets can use.
+ */
+declare class SharedAudioContextManager {
+    private static instance;
+    private audioContext;
+    private refCount;
+    private resumePromise;
+    private constructor();
+    static getInstance(): SharedAudioContextManager;
+    /**
+     * Acquire a reference to the shared AudioContext
+     * Creates the context if it doesn't exist
+     */
+    acquire(): Promise<AudioContext | null>;
+    /**
+     * Release a reference to the shared AudioContext
+     * Closes the context when all references are released
+     */
+    release(): void;
+    /**
+     * Force close the AudioContext (call on page unload)
+     */
+    forceClose(): void;
+    /**
+     * Get the current AudioContext without acquiring a reference
+     * Use this for read-only operations
+     */
+    getContext(): AudioContext | null;
+    /**
+     * Ensure the AudioContext is resumed
+     * iOS Safari requires user interaction to resume
+     * Returns true if running, false if still suspended (needs user gesture)
+     */
+    ensureResumed(): Promise<boolean>;
+    /**
+     * Check if the AudioContext is available and running
+     */
+    isRunning(): boolean;
+    /**
+     * Get the current state of the AudioContext
+     */
+    getState(): AudioContextState | null;
+    /**
+     * Get the sample rate of the AudioContext
+     */
+    getSampleRate(): number;
+    /**
+     * Get current time from the AudioContext
+     */
+    getCurrentTime(): number;
+    /**
+     * Get the destination node for connecting audio nodes
+     */
+    getDestination(): AudioDestinationNode | null;
+}
+export declare const sharedAudioContext: SharedAudioContextManager;
+export {};

package/dist/src/core/orb/SoundManager.d.ts

@@ -1,60 +1,48 @@
 /**
- * SoundManager - Programmatic melodic sound generation for call events
- * Uses Web Audio API for zero-dependency sound synthesis
+ * SoundManager - Professional notification sound synthesis
+ * Uses Web Audio API with creative sound design techniques
+ *
+ * Uses SharedAudioContext to avoid iOS AudioContext limit (max ~6 contexts)
+ * when multiple widgets are on the same page.
  */
+export type SoundPreset = '1' | '2' | '3' | '4' | 'none';
 export interface SoundConfig {
     enabled: boolean;
     volume: number;
+    preset: SoundPreset;
 }
 export declare class SoundManager {
-    private audioContext;
     private config;
+    private hasAcquired;
     constructor(config?: Partial<SoundConfig>);
-    /**
-     * Initialize audio context (must be called from user interaction)
-     */
     private ensureContext;
-    /**
-     * Prewarm audio context on user interaction
-     * This helps avoid audio context suspension issues
-     */
     prewarm(): Promise<void>;
     /**
-     * Create an oscillator with envelope
+     * Preset 1: Drop - Капля
+     * Мягкий звук с pitch drop, как капля воды
      */
-    private createTone;
+    private playDrop;
     /**
-     * Play pleasant notification sound for call start
-     * Two-tone ascending melody like messenger notifications
+     * Preset 2: Glass Tap - Стеклянный тап
+     * Чистый высокий звук с коротким резонансом
      */
-    playCallStartSound(): Promise<void>;
+    private playGlassTap;
     /**
-     * Play gentle descending sound for call end
-     * Single soft tone
+     * Preset 3: Soft Whoosh - Airy swoosh sound
      */
-    playCallEndSound(): Promise<void>;
+    private playWhoosh;
     /**
-     * Update configuration
+     * Preset 4: Gentle Note - Нежная нота
+     * Одна мягкая музыкальная нота
      */
+    private playGentleNote;
+    playCallStartSound(): Promise<void>;
+    playCallEndSound(): Promise<void>;
     setConfig(config: Partial<SoundConfig>): void;
-    /**
-     * Enable or disable sounds
-     */
     setEnabled(enabled: boolean): void;
-    /**
-     * Set volume (0.0 - 1.0)
-     */
     setVolume(volume: number): void;
-    /**
-     * Get current config
-     */
+    setPreset(preset: SoundPreset): void;
     getConfig(): SoundConfig;
-    /**
-     * Check if sounds are enabled
-     */
     isEnabled(): boolean;
-    /**
-     * Cleanup
-     */
     destroy(): void;
 }

package/dist/src/core/orb/index.d.ts

@@ -3,7 +3,7 @@ export type { OrbConfig, OrbColors } from './OrbRenderer';
 export { AudioAnalyzer } from './AudioAnalyzer';
 export type { AudioData, AudioAnalyzerOptions } from './AudioAnalyzer';
 export { SoundManager } from './SoundManager';
-export type { SoundConfig } from './SoundManager';
+export type { SoundConfig, SoundPreset } from './SoundManager';
 export { darkPresets, lightPresets, getColorPreset, getPresetNames } from './colorPresets';
 export { themes, darkThemes, lightThemes, getTheme, getThemeNames, applyTheme, detectSystemTheme, watchSystemTheme } from './themes';
 export type { ThemeConfig, Theme } from './themes';

package/dist/src/orb/components/HancAiWidget.d.ts

@@ -48,6 +48,13 @@ export declare class HancAiWidget {
     private createButton;
     private getLogoIcon;
     private getPhoneOffIcon;
+    /**
+     * Safely set SVG content to an element.
+     * Uses DOMParser to parse SVG and avoid direct innerHTML assignment.
+     * Note: For static SVG strings this is safe, but this method provides
+     * an extra layer of protection against accidental XSS.
+     */
+    private setIconContent;
     private handleButtonHover;
     private handleButtonLeave;
     private handleMouseEnter;
@@ -113,6 +120,10 @@ export declare class HancAiWidget {
      * Disconnect microphone
      */
     disconnectMicrophone(): void;
+    /**
+     * Remove spinner animation style from document head
+     */
+    private removeSpinnerAnimation;
     /**
      * Cleanup
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hanc-webrtc-widgets",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "type": "module",
   "main": "dist/hanc-webrtc-widgets.umd.js",
   "module": "dist/hanc-webrtc-widgets.es.js",
@@ -22,6 +22,8 @@
     "@eslint/js": "^9.24.0",
     "@types/node": "^22.14.0",
     "@types/three": "^0.182.0",
+    "@vitejs/plugin-basic-ssl": "^2.1.4",
+    "concurrently": "^9.2.1",
     "eslint": "^9.24.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-import": "^2.31.0",
@@ -33,7 +35,8 @@
     "vite-plugin-dts": "^4.5.4"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "concurrently \"vite\" \"./tunnel.sh\"",
+    "dev:local": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "release": "pnpm build && changeset publish --access public"