@elizaos/app-core 2.0.0-alpha.37

package/dist/components/VoiceConfigView.d.ts

@@ -0,0 +1,11 @@
+/**
+ * VoiceConfigView — TTS/STT provider selection and configuration.
+ *
+ * Similar to MediaSettingsSection pattern:
+ *   - Provider selection (ElevenLabs, Edge TTS, etc.)
+ *   - API key inputs where needed
+ *   - Voice preset selection
+ *   - Test functionality
+ */
+export declare function VoiceConfigView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=VoiceConfigView.d.ts.map

package/dist/components/VoiceConfigView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VoiceConfigView.d.ts","sourceRoot":"","sources":["../../src/components/VoiceConfigView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA+SH,wBAAgB,eAAe,4CA0W9B"}

package/dist/components/VoiceConfigView.js

@@ -0,0 +1,329 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * VoiceConfigView — TTS/STT provider selection and configuration.
+ *
+ * Similar to MediaSettingsSection pattern:
+ *   - Provider selection (ElevenLabs, Edge TTS, etc.)
+ *   - API key inputs where needed
+ *   - Voice preset selection
+ *   - Test functionality
+ */
+import { Button, Input } from "@elizaos/ui";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { client, } from "../api";
+import { getSwabblePlugin } from "../bridge/native-plugins";
+import { dispatchWindowEvent, VOICE_CONFIG_UPDATED_EVENT } from "../events";
+import { useTimeout } from "../hooks";
+import { useApp } from "../state";
+import { PREMADE_VOICES, sanitizeApiKey, VOICE_PROVIDERS } from "../voice";
+import { CloudConnectionStatus, CloudSourceModeToggle, } from "./CloudSourceControls";
+import { ConfigSaveFooter } from "./ConfigSaveFooter";
+const DEFAULT_ELEVEN_FAST_MODEL = "eleven_flash_v2_5";
+const MODEL_SIZES = [
+    { id: "tiny", hint: "(faster)" },
+    { id: "base", hint: "(recommended)" },
+    { id: "small", hint: "" },
+    { id: "medium", hint: "(accurate)" },
+    { id: "large", hint: "(accurate)" },
+];
+function WakeWordSection({ serverConfig, }) {
+    const { t } = useApp();
+    const [triggers, setTriggers] = useState(["milady"]);
+    const [triggerInput, setTriggerInput] = useState("");
+    const [sensitivity, setSensitivity] = useState(0.45);
+    const [modelSize, setModelSize] = useState("base");
+    const [audioLevel, setAudioLevel] = useState(0);
+    const [enabled, setEnabled] = useState(false);
+    // Load initial state from Swabble on mount
+    useEffect(() => {
+        void (async () => {
+            try {
+                const swabble = getSwabblePlugin();
+                const [{ config }, { listening }] = await Promise.all([
+                    swabble.getConfig(),
+                    swabble.isListening(),
+                ]);
+                // Use plugin config if available, fall back to server-persisted config
+                const resolved = config ?? serverConfig ?? null;
+                if (resolved) {
+                    if (resolved.triggers?.length)
+                        setTriggers(resolved.triggers);
+                    if (resolved.minPostTriggerGap != null)
+                        setSensitivity(resolved.minPostTriggerGap);
+                    if (resolved.modelSize)
+                        setModelSize(resolved.modelSize);
+                }
+                setEnabled(listening);
+            }
+            catch {
+                // Plugin not available on this platform — silently ignore
+            }
+        })();
+    }, [serverConfig]);
+    // Subscribe to audio level events
+    useEffect(() => {
+        let handle = null;
+        void (async () => {
+            try {
+                handle = await getSwabblePlugin().addListener("audioLevel", (evt) => {
+                    setAudioLevel(evt.level);
+                });
+            }
+            catch {
+                // Not available
+            }
+        })();
+        return () => {
+            if (handle)
+                void handle.remove();
+        };
+    }, []);
+    const buildConfig = useCallback(() => ({
+        triggers,
+        minPostTriggerGap: sensitivity,
+        modelSize,
+    }), [triggers, sensitivity, modelSize]);
+    const handleTriggersChange = useCallback(async (next) => {
+        setTriggers(next);
+        try {
+            await getSwabblePlugin().updateConfig({ config: { triggers: next } });
+        }
+        catch {
+            // Ignore
+        }
+    }, []);
+    const addTrigger = useCallback((raw) => {
+        const val = raw.trim().toLowerCase().replace(/,/g, "");
+        if (!val || triggers.includes(val))
+            return;
+        void handleTriggersChange([...triggers, val]);
+    }, [triggers, handleTriggersChange]);
+    const removeTrigger = useCallback((t) => {
+        if (triggers.length <= 1)
+            return;
+        void handleTriggersChange(triggers.filter((x) => x !== t));
+    }, [triggers, handleTriggersChange]);
+    const handleSensitivityChange = useCallback(async (val) => {
+        setSensitivity(val);
+        try {
+            await getSwabblePlugin().updateConfig({
+                config: { minPostTriggerGap: val },
+            });
+        }
+        catch {
+            // Ignore
+        }
+    }, []);
+    const handleModelSizeChange = useCallback(async (size) => {
+        setModelSize(size);
+        try {
+            await getSwabblePlugin().updateConfig({ config: { modelSize: size } });
+        }
+        catch {
+            // Ignore
+        }
+    }, []);
+    const handleToggle = useCallback(async () => {
+        try {
+            if (enabled) {
+                await getSwabblePlugin().stop();
+                setEnabled(false);
+            }
+            else {
+                const result = await getSwabblePlugin().start({
+                    config: buildConfig(),
+                });
+                if (result.started)
+                    setEnabled(true);
+            }
+        }
+        catch {
+            // Ignore
+        }
+    }, [enabled, buildConfig]);
+    return (_jsxs("div", { className: "flex flex-col gap-3 pt-4 border-t border-[var(--border)]", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-xs font-semibold text-[var(--muted)]", children: t("voiceconfigview.WakeWord") }), _jsx("button", { type: "button", onClick: () => void handleToggle(), className: `relative inline-flex h-5 w-9 cursor-pointer items-center rounded-full transition-colors ${enabled ? "bg-[var(--accent)]" : "bg-[var(--border)]"}`, "aria-label": enabled ? "Disable wake word" : "Enable wake word", children: _jsx("span", { className: `inline-block h-3.5 w-3.5 rounded-full bg-white shadow transition-transform ${enabled ? "translate-x-4" : "translate-x-0.5"}` }) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-semibold", children: t("voiceconfigview.Triggers") }), _jsxs("div", { className: "flex flex-wrap gap-1 p-1.5 border border-[var(--border)] bg-[var(--card)] min-h-[2rem]", children: [triggers.map((t) => (_jsxs("span", { className: "flex items-center gap-1 rounded-full border border-[var(--accent)] bg-[var(--accent)]/10 px-1.5 py-0.5 text-[10px] text-[var(--text)]", children: [t, triggers.length > 1 && (_jsx(Button, { variant: "ghost", size: "icon", className: "settings-compact-button settings-icon-button leading-none hover:bg-transparent hover:opacity-70 cursor-pointer h-4 w-4 ml-1", onClick: () => removeTrigger(t), "aria-label": `Remove trigger "${t}"`, children: "\u00D7" }))] }, t))), _jsx(Input, { type: "text", className: "flex-1 min-w-[80px] h-6 px-1 text-xs bg-transparent border-0 focus-visible:ring-0 shadow-none", placeholder: t("voiceconfigview.AddTrigger"), value: triggerInput, onChange: (e) => setTriggerInput(e.target.value), onKeyDown: (e) => {
+                                    if (e.key === "Enter" || e.key === ",") {
+                                        e.preventDefault();
+                                        addTrigger(triggerInput);
+                                        setTriggerInput("");
+                                    }
+                                } })] }), _jsx("div", { className: "text-[10px] text-[var(--muted)]", children: t("voiceconfigview.PressEnterOrComma") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-semibold", children: t("voiceconfigview.WakeSensitivity") }), _jsxs("span", { className: "text-[10px] text-[var(--muted)]", children: [sensitivity.toFixed(2), "s"] })] }), _jsx("input", { type: "range", min: 0.1, max: 2.0, step: 0.05, value: sensitivity, className: "w-full", style: { accentColor: "var(--accent)" }, onChange: (e) => void handleSensitivityChange(parseFloat(e.target.value)) }), _jsx("div", { className: "text-[10px] text-[var(--muted)]", children: t("voiceconfigview.LowerMoreSensiti") })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-semibold", children: t("voiceconfigview.ModelSize") }), _jsx("div", { className: "flex gap-1.5", children: MODEL_SIZES.map((m) => {
+                            const active = modelSize === m.id;
+                            return (_jsxs(Button, { variant: active ? "default" : "outline", size: "sm", className: "flex-1 h-auto flex-col py-1.5", onClick: () => void handleModelSizeChange(m.id), children: [_jsx("div", { className: "font-semibold", children: m.id }), m.hint && (_jsx("div", { className: "text-[10px] opacity-70 mt-0.5", children: m.hint }))] }, m.id));
+                        }) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs font-semibold", children: t("voiceconfigview.Microphone") }), _jsx("div", { className: "h-1.5 w-full bg-[var(--border)] overflow-hidden", children: _jsx("div", { className: "h-full bg-green-500 transition-all duration-75", style: { width: `${Math.min(audioLevel * 100, 100)}%` } }) })] })] }));
+}
+export function VoiceConfigView() {
+    const { setTimeout } = useTimeout();
+    const { t } = useApp();
+    const { elizaCloudConnected } = useApp();
+    const [voiceConfig, setVoiceConfig] = useState({});
+    const [swabbleServerConfig, setSwabbleServerConfig] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [saveSuccess, setSaveSuccess] = useState(false);
+    const [saveError, setSaveError] = useState(null);
+    const [dirty, setDirty] = useState(false);
+    const [testing, setTesting] = useState(false);
+    const audioRef = useRef(null);
+    // Load config on mount
+    useEffect(() => {
+        void (async () => {
+            setLoading(true);
+            try {
+                const cfg = await client.getConfig();
+                const messages = cfg.messages;
+                const tts = messages?.tts;
+                if (tts) {
+                    setVoiceConfig(tts);
+                }
+                const swabble = messages?.swabble;
+                if (swabble) {
+                    setSwabbleServerConfig(swabble);
+                }
+            }
+            catch {
+                // Ignore errors
+            }
+            setLoading(false);
+        })();
+    }, []);
+    // Cleanup audio on unmount
+    useEffect(() => {
+        return () => {
+            if (audioRef.current) {
+                audioRef.current.pause();
+                audioRef.current = null;
+            }
+        };
+    }, []);
+    const currentProvider = voiceConfig.provider ?? "elevenlabs";
+    const currentMode = voiceConfig.mode ?? "own-key";
+    const providerInfo = VOICE_PROVIDERS.find((p) => p.id === currentProvider);
+    const isConfigured = currentMode === "cloud"
+        ? elizaCloudConnected
+        : currentProvider !== "elevenlabs"
+            ? true
+            : Boolean(voiceConfig.elevenlabs?.apiKey);
+    const handleProviderChange = useCallback((provider) => {
+        setVoiceConfig((prev) => ({ ...prev, provider }));
+        setDirty(true);
+    }, []);
+    const handleModeChange = useCallback((mode) => {
+        setVoiceConfig((prev) => ({ ...prev, mode }));
+        setDirty(true);
+    }, []);
+    const handleApiKeyChange = useCallback((apiKey) => {
+        setVoiceConfig((prev) => ({
+            ...prev,
+            elevenlabs: { ...prev.elevenlabs, apiKey: apiKey || undefined },
+        }));
+        setDirty(true);
+    }, []);
+    const handleVoiceSelect = useCallback((voiceId) => {
+        setVoiceConfig((prev) => ({
+            ...prev,
+            elevenlabs: { ...prev.elevenlabs, voiceId },
+        }));
+        setDirty(true);
+    }, []);
+    const handleTestVoice = useCallback((previewUrl) => {
+        if (audioRef.current) {
+            audioRef.current.pause();
+        }
+        setTesting(true);
+        const audio = new Audio(previewUrl);
+        audioRef.current = audio;
+        audio.onended = () => setTesting(false);
+        audio.onerror = () => setTesting(false);
+        audio.play().catch(() => setTesting(false));
+    }, []);
+    const handleSave = useCallback(async () => {
+        setSaving(true);
+        setSaveError(null);
+        setSaveSuccess(false);
+        try {
+            const cfg = await client.getConfig();
+            const messages = (cfg.messages ?? {});
+            const provider = voiceConfig.provider ?? "elevenlabs";
+            const normalizedElevenLabs = provider === "elevenlabs"
+                ? {
+                    ...voiceConfig.elevenlabs,
+                    modelId: voiceConfig.elevenlabs?.modelId ?? DEFAULT_ELEVEN_FAST_MODEL,
+                }
+                : voiceConfig.elevenlabs;
+            const sanitizedKey = sanitizeApiKey(normalizedElevenLabs?.apiKey);
+            if (normalizedElevenLabs) {
+                if (sanitizedKey)
+                    normalizedElevenLabs.apiKey = sanitizedKey;
+                else
+                    delete normalizedElevenLabs.apiKey;
+            }
+            const normalizedVoiceConfig = {
+                ...voiceConfig,
+                provider,
+                mode: provider === "elevenlabs"
+                    ? (voiceConfig.mode ?? "own-key")
+                    : undefined,
+                elevenlabs: normalizedElevenLabs,
+            };
+            // Also persist swabble (wake word) config — fall back to server config
+            // if the plugin isn't available on this platform (e.g. Electrobun).
+            let swabbleCfg;
+            try {
+                const { config: sc } = await getSwabblePlugin().getConfig();
+                if (sc)
+                    swabbleCfg = sc;
+            }
+            catch {
+                // Not available on this platform
+            }
+            if (!swabbleCfg && swabbleServerConfig) {
+                swabbleCfg = swabbleServerConfig;
+            }
+            await client.updateConfig({
+                messages: {
+                    ...messages,
+                    tts: normalizedVoiceConfig,
+                    ...(swabbleCfg ? { swabble: swabbleCfg } : {}),
+                },
+            });
+            dispatchWindowEvent(VOICE_CONFIG_UPDATED_EVENT, normalizedVoiceConfig);
+            setSaveSuccess(true);
+            setDirty(false);
+            setTimeout(() => setSaveSuccess(false), 2500);
+        }
+        catch (err) {
+            setSaveError(err instanceof Error ? err.message : "Failed to save");
+        }
+        setSaving(false);
+    }, [swabbleServerConfig, voiceConfig, setTimeout]);
+    if (loading) {
+        return (_jsx("div", { className: "py-4 text-center text-[var(--muted)] text-xs", children: t("voiceconfigview.LoadingVoiceConfig") }));
+    }
+    const selectedVoiceId = voiceConfig.elevenlabs?.voiceId;
+    const selectedPreset = PREMADE_VOICES.find((p) => p.voiceId === selectedVoiceId);
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "text-xs font-semibold text-[var(--muted)]", children: t("voiceconfigview.TTSProvider") }), _jsx("div", { className: "flex gap-2", children: VOICE_PROVIDERS.map((p) => {
+                            const active = currentProvider === p.id;
+                            return (_jsxs(Button, { variant: active ? "default" : "outline", size: "sm", className: "flex-1 h-auto flex-col py-2", onClick: () => handleProviderChange(p.id), children: [_jsx("div", { className: "font-semibold", children: p.label }), _jsx("div", { className: "text-[10px] opacity-70 mt-0.5", children: p.hint })] }, p.id));
+                        }) })] }), _jsxs("div", { className: "flex items-center justify-between py-2 px-3 border border-[var(--border)] bg-[var(--bg-muted)]", children: [_jsx("span", { className: "text-xs", children: currentProvider === "elevenlabs"
+                            ? `ElevenLabs — ${currentMode === "cloud" ? t("voiceconfigview.ServedViaElizaCloud") : t("voiceconfigview.RequiresApiKey")}`
+                            : `${providerInfo?.label} — ${t("voiceconfigview.NoApiKeyNeeded")}` }), _jsx("span", { className: `rounded-full border px-1.5 py-0.5 text-[10px] ${isConfigured
+                            ? "border-green-600 bg-green-600/10 text-[var(--text)]"
+                            : "border-[var(--warn)] bg-[var(--warn-subtle)] text-[var(--text)]"}`, children: isConfigured
+                            ? t("mediasettingssection.Configured")
+                            : t("mediasettingssection.NeedsSetup") })] }), currentProvider === "elevenlabs" && (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-xs font-semibold text-[var(--muted)]", children: t("voiceconfigview.APISource") }), _jsx(CloudSourceModeToggle, { mode: currentMode, onChange: handleModeChange })] }), currentMode === "cloud" && (_jsx(CloudConnectionStatus, { connected: elizaCloudConnected, disconnectedText: t("elizaclouddashboard.ElizaCloudNotConnected") })), currentMode === "own-key" && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-semibold", children: t("voiceconfigview.ElevenLabsAPIKey") }), _jsx(Input, { type: "password", className: "bg-card text-xs", placeholder: voiceConfig.elevenlabs?.apiKey
+                                    ? t("mediasettingssection.ApiKeySetLeaveBlank")
+                                    : t("mediasettingssection.EnterApiKey"), onChange: (e) => handleApiKeyChange(e.target.value) }), _jsxs("div", { className: "text-[10px] text-[var(--muted)]", children: [t("voiceconfigview.GetYourKeyAt"), " ", _jsx("a", { href: "https://elevenlabs.io", target: "_blank", rel: "noopener noreferrer", className: "text-[var(--text)] underline decoration-[var(--accent)] underline-offset-2 hover:opacity-80", children: t("voiceconfigview.elevenlabsIo") })] }), _jsxs("div", { className: "text-[10px] text-[var(--muted)]", children: [t("voiceconfigview.FastPathDefaultE"), DEFAULT_ELEVEN_FAST_MODEL, "`)."] })] })), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "text-xs font-semibold", children: t("voiceconfigview.Voice") }), _jsx("div", { className: "grid grid-cols-3 gap-1.5", children: PREMADE_VOICES.map((preset) => {
+                                    const active = selectedVoiceId === preset.voiceId;
+                                    return (_jsxs(Button, { variant: active ? "default" : "outline", size: "sm", className: "h-auto flex-col items-start py-1.5 px-2 text-left", onClick: () => handleVoiceSelect(preset.voiceId), children: [_jsx("div", { className: "font-semibold truncate w-full", children: preset.name }), _jsx("div", { className: "text-[10px] opacity-70 truncate w-full", children: preset.hint })] }, preset.id));
+                                }) })] }), selectedPreset && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", className: "font-semibold", disabled: testing, onClick: () => handleTestVoice(selectedPreset.previewUrl), children: testing
+                                    ? t("voiceconfigview.Playing")
+                                    : t("voiceconfigview.TestVoice", {
+                                        name: selectedPreset.name,
+                                    }) }), testing && (_jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+                                    if (audioRef.current) {
+                                        audioRef.current.pause();
+                                        setTesting(false);
+                                    }
+                                }, children: t("voiceconfigview.Stop") }))] }))] })), currentProvider === "edge" && (_jsx("div", { className: "py-2 px-3 border border-[var(--border)] bg-[var(--bg-muted)] text-xs text-[var(--muted)]", children: t("voiceconfigview.EdgeTTSUsesMicros") })), currentProvider === "simple-voice" && (_jsx("div", { className: "py-2 px-3 border border-[var(--border)] bg-[var(--bg-muted)] text-xs text-[var(--muted)]", children: t("voiceconfigview.SimpleVoiceUsesYo") })), _jsx(WakeWordSection, { serverConfig: swabbleServerConfig }), _jsx(ConfigSaveFooter, { dirty: dirty, saving: saving, saveError: saveError, saveSuccess: saveSuccess, onSave: () => void handleSave() })] }));
+}

package/dist/components/VrmStage.d.ts

@@ -0,0 +1,21 @@
+import type { CameraProfile, VrmEngine } from "./avatar/VrmEngine";
+type TranslateFn = (key: string) => string;
+export type VrmStageAvatarEntry = {
+    vrmPath: string;
+    fallbackPreviewUrl: string;
+};
+export declare const VrmStage: import("react").NamedExoticComponent<{
+    active?: boolean;
+    vrmPath: string;
+    worldUrl?: string;
+    fallbackPreviewUrl: string;
+    cameraProfile?: CameraProfile;
+    initialCompanionZoomNormalized?: number;
+    onEngineReady?: (engine: VrmEngine) => void;
+    onLayerEngineReady?: (vrmPath: string, engine: VrmEngine) => void;
+    playWaveOnAvatarChange?: boolean;
+    preloadAvatars?: readonly VrmStageAvatarEntry[];
+    t: TranslateFn;
+}>;
+export {};
+//# sourceMappingURL=VrmStage.d.ts.map

package/dist/components/VrmStage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VrmStage.d.ts","sourceRoot":"","sources":["../../src/components/VrmStage.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EAEV,MAAM,oBAAoB,CAAC;AAG5B,KAAK,WAAW,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;AAY3C,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,kBAAkB,EAAE,MAAM,CAAC;CAC5B,CAAC;AAoHF,eAAO,MAAM,QAAQ;aAaV,OAAO;aACP,MAAM;eACJ,MAAM;wBACG,MAAM;oBACV,aAAa;qCACI,MAAM;oBACvB,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI;yBACtB,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,KAAK,IAAI;6BACxC,OAAO;qBACf,SAAS,mBAAmB,EAAE;OAC5C,WAAW;EAkQd,CAAC"}

package/dist/components/VrmStage.js

@@ -0,0 +1,252 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { APP_EMOTE_EVENT, STOP_EMOTE_EVENT, } from "@elizaos/app-core/events";
+import { useChatAvatarVoiceState, useRenderGuard, } from "@elizaos/app-core/hooks";
+import { resolveAppAssetUrl } from "@elizaos/app-core/utils";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { AvatarLoader } from "./AvatarLoader";
+import { VrmViewer } from "./avatar/VrmViewer";
+const AVATAR_CHANGE_WAVE_DELAY_MS = 650;
+const AVATAR_SWITCH_FADE_DURATION_MS = 650;
+const AVATAR_CHANGE_WAVE_EMOTE = {
+    emoteId: "wave",
+    path: "/animations/emotes/waving-both-hands.glb",
+    duration: 2.5,
+    loop: false,
+    showOverlay: false,
+};
+const VrmStageLayer = memo(function VrmStageLayer({ active, visible, opacity, zIndex, vrmPath, worldUrl, fallbackPreviewUrl, cameraProfile, initialCompanionZoomNormalized, onEngineReady, onRevealStart, t, }) {
+    const [vrmLoaded, setVrmLoaded] = useState(false);
+    const [showVrmFallback, setShowVrmFallback] = useState(false);
+    const chatAvatarVoice = useChatAvatarVoiceState();
+    const handleVrmEngineReady = useCallback((engine) => {
+        engine.setPaused(!active);
+        engine.setCameraAnimation({
+            enabled: true,
+            swayAmplitude: cameraProfile === "companion_close" ? 0.028 : 0.04,
+            bobAmplitude: cameraProfile === "companion_close" ? 0.016 : 0.022,
+            rotationAmplitude: cameraProfile === "companion_close" ? 0.008 : 0.012,
+            speed: cameraProfile === "companion_close" ? 0.48 : 0.42,
+        });
+        engine.setPointerParallaxEnabled(false);
+        if (typeof initialCompanionZoomNormalized === "number") {
+            engine.setCompanionZoomNormalized(initialCompanionZoomNormalized);
+        }
+        onEngineReady?.(vrmPath, engine);
+    }, [
+        active,
+        cameraProfile,
+        initialCompanionZoomNormalized,
+        onEngineReady,
+        vrmPath,
+    ]);
+    const handleVrmEngineState = useCallback((state) => {
+        if (state.vrmLoaded) {
+            setVrmLoaded(true);
+            setShowVrmFallback(false);
+            return;
+        }
+        if (state.loadError) {
+            setVrmLoaded(false);
+            setShowVrmFallback(true);
+        }
+    }, []);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: reset the layer UI when the requested VRM changes.
+    useEffect(() => {
+        setVrmLoaded(false);
+        setShowVrmFallback(false);
+    }, [vrmPath]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 z-10", style: {
+                    opacity,
+                    zIndex,
+                    visibility: visible ? "visible" : "hidden",
+                    transition: `opacity ${AVATAR_SWITCH_FADE_DURATION_MS}ms ease`,
+                }, children: _jsx(VrmViewer, { active: active, vrmPath: vrmPath, worldUrl: worldUrl, mouthOpen: chatAvatarVoice.mouthOpen, isSpeaking: chatAvatarVoice.isSpeaking, cameraProfile: cameraProfile, onEngineReady: handleVrmEngineReady, onEngineState: handleVrmEngineState, onRevealStart: () => onRevealStart?.(vrmPath) }) }), visible && showVrmFallback && !vrmLoaded && (_jsx("img", { src: fallbackPreviewUrl, alt: t("companion.avatarPreviewAlt"), className: "absolute left-1/2 top-[52%] -translate-x-1/2 -translate-y-1/2 h-[90%] object-contain opacity-70", style: { zIndex } })), visible && !vrmLoaded && !showVrmFallback && (_jsx("div", { className: "absolute inset-0", style: { zIndex }, children: _jsx(AvatarLoader, {}) }))] }));
+});
+export const VrmStage = memo(function VrmStage({ active = true, vrmPath, worldUrl, fallbackPreviewUrl, cameraProfile = "companion", initialCompanionZoomNormalized, onEngineReady, onLayerEngineReady, playWaveOnAvatarChange = false, preloadAvatars = [], t, }) {
+    useRenderGuard("VrmStage");
+    const [currentPath, setCurrentPath] = useState(vrmPath);
+    const [outgoingPath, setOutgoingPath] = useState(null);
+    const [outgoingOpacity, setOutgoingOpacity] = useState(1);
+    const currentPathRef = useRef(vrmPath);
+    const currentEngineRef = useRef(null);
+    const enginesRef = useRef(new Map());
+    const avatarChangeWaveTimerRef = useRef(null);
+    const transitionTimerRef = useRef(null);
+    const transitionFrameRef = useRef(null);
+    const pendingWavePathRef = useRef(null);
+    const hasMountedRef = useRef(false);
+    const fallbackPreviewByPathRef = useRef(new Map());
+    fallbackPreviewByPathRef.current.set(vrmPath, fallbackPreviewUrl);
+    for (const avatar of preloadAvatars) {
+        fallbackPreviewByPathRef.current.set(avatar.vrmPath, avatar.fallbackPreviewUrl);
+    }
+    useEffect(() => {
+        const currentEngine = enginesRef.current.get(currentPath) ?? null;
+        currentEngineRef.current = currentEngine;
+        if (currentEngine) {
+            onEngineReady?.(currentEngine);
+        }
+    }, [currentPath, onEngineReady]);
+    const playGreetingWave = useCallback((engine) => {
+        if (!engine)
+            return;
+        const resolvedPath = resolveAppAssetUrl(AVATAR_CHANGE_WAVE_EMOTE.path);
+        void engine.playEmote(resolvedPath, AVATAR_CHANGE_WAVE_EMOTE.duration ?? 3, AVATAR_CHANGE_WAVE_EMOTE.loop === true);
+    }, []);
+    const scheduleGreetingWave = useCallback(() => {
+        if (!active || !playWaveOnAvatarChange)
+            return;
+        if (pendingWavePathRef.current !== currentPath)
+            return;
+        const engine = enginesRef.current.get(currentPath) ?? null;
+        if (!engine)
+            return;
+        if (avatarChangeWaveTimerRef.current != null) {
+            window.clearTimeout(avatarChangeWaveTimerRef.current);
+        }
+        avatarChangeWaveTimerRef.current = window.setTimeout(() => {
+            playGreetingWave(engine);
+            avatarChangeWaveTimerRef.current = null;
+        }, AVATAR_CHANGE_WAVE_DELAY_MS);
+        pendingWavePathRef.current = null;
+    }, [active, currentPath, playGreetingWave, playWaveOnAvatarChange]);
+    const handleLayerEngineReady = useCallback((layerPath, engine) => {
+        enginesRef.current.set(layerPath, engine);
+        onLayerEngineReady?.(layerPath, engine);
+        if (layerPath === currentPathRef.current) {
+            currentEngineRef.current = engine;
+            onEngineReady?.(engine);
+        }
+        scheduleGreetingWave();
+    }, [onEngineReady, onLayerEngineReady, scheduleGreetingWave]);
+    const handleRevealStart = useCallback((layerPath) => {
+        if (layerPath !== currentPathRef.current)
+            return;
+        scheduleGreetingWave();
+    }, [scheduleGreetingWave]);
+    useEffect(() => {
+        currentEngineRef.current?.setPaused(!active);
+    }, [active]);
+    useEffect(() => {
+        if (typeof initialCompanionZoomNormalized !== "number")
+            return;
+        currentEngineRef.current?.setCompanionZoomNormalized(initialCompanionZoomNormalized);
+    }, [initialCompanionZoomNormalized]);
+    useEffect(() => {
+        if (vrmPath === currentPathRef.current) {
+            if (!hasMountedRef.current) {
+                pendingWavePathRef.current = vrmPath;
+            }
+            hasMountedRef.current = true;
+            scheduleGreetingWave();
+            return;
+        }
+        const previousPath = currentPathRef.current;
+        currentPathRef.current = vrmPath;
+        setCurrentPath(vrmPath);
+        setOutgoingPath(previousPath);
+        setOutgoingOpacity(1);
+        if (transitionTimerRef.current != null) {
+            window.clearTimeout(transitionTimerRef.current);
+        }
+        if (transitionFrameRef.current != null) {
+            window.cancelAnimationFrame(transitionFrameRef.current);
+        }
+        transitionFrameRef.current = window.requestAnimationFrame(() => {
+            setOutgoingOpacity(0);
+            transitionFrameRef.current = null;
+        });
+        transitionTimerRef.current = window.setTimeout(() => {
+            setOutgoingPath((candidate) => candidate === previousPath ? null : candidate);
+            setOutgoingOpacity(1);
+            transitionTimerRef.current = null;
+        }, AVATAR_SWITCH_FADE_DURATION_MS);
+        if (hasMountedRef.current) {
+            pendingWavePathRef.current = vrmPath;
+        }
+        hasMountedRef.current = true;
+    }, [vrmPath, scheduleGreetingWave]);
+    useEffect(() => {
+        const handler = (event) => {
+            const engine = currentEngineRef.current;
+            if (!engine)
+                return;
+            if (typeof engine.playEmote !== "function")
+                return;
+            const detail = event.detail;
+            if (!detail?.path)
+                return;
+            const resolvedPath = resolveAppAssetUrl(detail.path);
+            const duration = typeof detail.duration === "number" && Number.isFinite(detail.duration)
+                ? detail.duration
+                : 3;
+            const isLoop = detail.loop === true;
+            void engine.playEmote(resolvedPath, duration, isLoop);
+        };
+        window.addEventListener(APP_EMOTE_EVENT, handler);
+        return () => window.removeEventListener(APP_EMOTE_EVENT, handler);
+    }, []);
+    // Listen for stop-emote events from the EmotePicker "Stop" button.
+    useEffect(() => {
+        const handler = () => {
+            currentEngineRef.current?.stopEmote();
+        };
+        document.addEventListener(STOP_EMOTE_EVENT, handler);
+        return () => document.removeEventListener(STOP_EMOTE_EVENT, handler);
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (avatarChangeWaveTimerRef.current != null) {
+                window.clearTimeout(avatarChangeWaveTimerRef.current);
+                avatarChangeWaveTimerRef.current = null;
+            }
+            if (transitionTimerRef.current != null) {
+                window.clearTimeout(transitionTimerRef.current);
+                transitionTimerRef.current = null;
+            }
+            if (transitionFrameRef.current != null) {
+                window.cancelAnimationFrame(transitionFrameRef.current);
+                transitionFrameRef.current = null;
+            }
+        };
+    }, []);
+    const layerEntries = useMemo(() => {
+        const orderedPaths = [
+            currentPath,
+            outgoingPath,
+            ...preloadAvatars.map((avatar) => avatar.vrmPath),
+        ];
+        const seen = new Set();
+        return orderedPaths.flatMap((path) => {
+            if (!path || seen.has(path))
+                return [];
+            seen.add(path);
+            return [
+                {
+                    vrmPath: path,
+                    fallbackPreviewUrl: fallbackPreviewByPathRef.current.get(path) ?? fallbackPreviewUrl,
+                },
+            ];
+        });
+    }, [currentPath, fallbackPreviewUrl, outgoingPath, preloadAvatars]);
+    return (_jsxs("div", { className: "fixed inset-0 z-0 overflow-hidden bg-[#030711]", children: [_jsxs("div", { className: "pointer-events-none absolute inset-0", children: [_jsx("div", { className: "absolute inset-0", style: {
+                            background: "radial-gradient(circle at 50% 18%, rgba(44, 188, 255, 0.18) 0%, rgba(44, 188, 255, 0.04) 24%, rgba(3, 7, 17, 0) 52%), linear-gradient(180deg, #06101d 0%, #040913 48%, #02050c 100%)",
+                        } }), _jsx("div", { className: "absolute inset-x-[-14%] bottom-[-24%] h-[74%] opacity-70", style: {
+                            transform: "perspective(1200px) rotateX(80deg)",
+                            transformOrigin: "center bottom",
+                            backgroundImage: "linear-gradient(rgba(118, 232, 255, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(118, 232, 255, 0.18) 1px, transparent 1px)",
+                            backgroundSize: "68px 68px",
+                            boxShadow: "0 -24px 90px rgba(40, 184, 255, 0.14)",
+                        } }), _jsx("div", { className: "absolute inset-x-0 top-[39%] h-px opacity-55", style: {
+                            background: "linear-gradient(90deg, transparent 0%, rgba(118, 232, 255, 0.12) 18%, rgba(118, 232, 255, 0.58) 50%, rgba(118, 232, 255, 0.12) 82%, transparent 100%)",
+                            boxShadow: "0 0 20px rgba(118, 232, 255, 0.18)",
+                        } })] }), _jsx("div", { className: "absolute inset-0 z-10", style: {
+                    opacity: 1,
+                    transition: "opacity 400ms ease",
+                }, children: layerEntries.map((entry) => {
+                    const isCurrent = entry.vrmPath === currentPath;
+                    const isOutgoing = entry.vrmPath === outgoingPath;
+                    const visible = isCurrent || isOutgoing;
+                    return (_jsx(VrmStageLayer, { active: active && visible, visible: visible, opacity: isOutgoing ? outgoingOpacity : 1, zIndex: isCurrent ? 2 : isOutgoing ? 1 : 0, vrmPath: entry.vrmPath, worldUrl: worldUrl, fallbackPreviewUrl: entry.fallbackPreviewUrl, cameraProfile: cameraProfile, initialCompanionZoomNormalized: initialCompanionZoomNormalized, onEngineReady: handleLayerEngineReady, onRevealStart: handleRevealStart, t: t }, entry.vrmPath));
+                }) })] }));
+});

package/dist/components/WhatsAppQrOverlay.d.ts

@@ -0,0 +1,8 @@
+interface WhatsAppQrOverlayProps {
+    accountId?: string;
+    /** Called when QR pairing succeeds — parent should install plugin + close modal. */
+    onConnected?: () => void;
+}
+export declare function WhatsAppQrOverlay({ accountId, onConnected, }: WhatsAppQrOverlayProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=WhatsAppQrOverlay.d.ts.map

package/dist/components/WhatsAppQrOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WhatsAppQrOverlay.d.ts","sourceRoot":"","sources":["../../src/components/WhatsAppQrOverlay.tsx"],"names":[],"mappings":"AAIA,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAqB,EACrB,WAAW,GACZ,EAAE,sBAAsB,2CAwNxB"}