@yak-io/javascript 0.10.0 → 0.11.0

package/dist/embed.js

@@ -1,743 +0,0 @@
-import { YakClient } from "./client.js";
-import { logger } from "./logger.js";
-import { INITIAL_VOICE_MACHINE } from "./voice-machine.js";
-import { YakVoiceSession, } from "./voice-session.js";
-// Single source of truth for the default trigger + panel corner.
-const DEFAULT_POSITION = "bottom-left";
-// ── Inline SVG icons (lucide) ───────────────────────────────────────────────
-const MESSAGE_CIRCLE_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>`;
-const AUDIO_LINES_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 10v3"/><path d="M6 6v11"/><path d="M10 3v18"/><path d="M14 8v7"/><path d="M18 5v13"/><path d="M22 10v3"/></svg>`;
-const STOP_SVG = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>`;
-const VOICE_STATE_ARIA = {
-    idle: "Start voice mode",
-    connecting: "Connecting voice session",
-    listening: "Voice listening — tap to stop",
-    thinking: "Voice thinking — tap to stop",
-    speaking: "Voice speaking — tap to stop",
-    error: "Voice error — tap to retry",
-};
-// ── CSS ─────────────────────────────────────────────────────────────────────
-function getPanelStyles() {
-    return `
-    .yak-panel-root {
-      position: fixed;
-      top: 0; left: 0; right: 0; bottom: 0;
-      width: 100vw; height: 100vh;
-      pointer-events: none;
-      z-index: 9998;
-    }
-
-    .yak-panel-container {
-      position: absolute;
-      width: 500px; height: 600px;
-      max-width: calc(100vw - 40px);
-      max-height: calc(100vh - 120px);
-      border-radius: 15px;
-      overflow: hidden;
-      background-color: transparent;
-      pointer-events: auto;
-    }
-
-    .yak-panel-container[data-position="top-left"]:not(.yak-panel-drawer)      { top: 16px; left: 16px; }
-    .yak-panel-container[data-position="top-center"]:not(.yak-panel-drawer)    { top: 16px; left: 50%; transform: translateX(-50%); }
-    .yak-panel-container[data-position="top-right"]:not(.yak-panel-drawer)     { top: 16px; right: 16px; }
-    .yak-panel-container[data-position="left-center"]:not(.yak-panel-drawer)   { top: 50%; left: 16px; transform: translateY(-50%); }
-    .yak-panel-container[data-position="right-center"]:not(.yak-panel-drawer)  { top: 50%; right: 16px; transform: translateY(-50%); }
-    .yak-panel-container[data-position="bottom-left"]:not(.yak-panel-drawer)   { bottom: 16px; left: 16px; }
-    .yak-panel-container[data-position="bottom-center"]:not(.yak-panel-drawer) { bottom: 16px; left: 50%; transform: translateX(-50%); }
-    .yak-panel-container[data-position="bottom-right"]:not(.yak-panel-drawer)  { bottom: 16px; right: 16px; }
-
-    .yak-panel-container:not(.yak-panel-drawer)                    { display: none; }
-    .yak-panel-container:not(.yak-panel-drawer)[data-open="true"]  { display: block; }
-
-    .yak-panel-container[data-expanded="true"] {
-      width: calc(100vw - 32px) !important;
-      height: calc(100vh - 32px) !important;
-      max-width: none !important; max-height: none !important;
-      top: 16px !important; left: 16px !important; right: 16px !important; bottom: 16px !important;
-      border-radius: 15px !important;
-      border: 1px solid rgba(0, 0, 0, 0.1) !important;
-      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15) !important;
-    }
-    @media (prefers-color-scheme: dark) {
-      .yak-panel-container[data-expanded="true"]:not(.yak-panel-light) { border-color: rgba(255,255,255,0.1) !important; }
-    }
-    .yak-panel-container.yak-panel-dark[data-expanded="true"]  { border-color: rgba(255,255,255,0.1) !important; }
-    .yak-panel-container.yak-panel-light[data-expanded="true"] { border-color: rgba(0,0,0,0.1) !important; }
-
-    .yak-panel-container.yak-panel-drawer {
-      height: calc(100% - 32px); max-width: 100vw; max-height: none;
-      border-radius: 15px;
-      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-    }
-    .yak-panel-container.yak-panel-drawer[data-position="left-center"],
-    .yak-panel-container.yak-panel-drawer[data-position="top-left"],
-    .yak-panel-container.yak-panel-drawer[data-position="bottom-left"] {
-      top: 16px; left: 16px; bottom: 16px;
-      transform: translateX(calc(-100% - 16px));
-    }
-    .yak-panel-container.yak-panel-drawer[data-position="right-center"],
-    .yak-panel-container.yak-panel-drawer[data-position="top-right"],
-    .yak-panel-container.yak-panel-drawer[data-position="bottom-right"] {
-      top: 16px; right: 16px; bottom: 16px;
-      transform: translateX(calc(100% + 16px));
-    }
-    .yak-panel-container.yak-panel-drawer[data-position="top-center"],
-    .yak-panel-container.yak-panel-drawer[data-position="bottom-center"] {
-      top: 16px; right: 16px; bottom: 16px;
-      transform: translateX(calc(100% + 16px));
-    }
-    .yak-panel-container.yak-panel-drawer[data-open="true"] { transform: translateX(0); }
-
-    .yak-panel-iframe {
-      position: absolute; inset: 0;
-      width: 100%; height: 100%; border: none;
-    }
-
-    @media (max-width: 640px) {
-      .yak-panel-container:not(.yak-panel-drawer) {
-        width: 100% !important; height: 100% !important; height: 100dvh !important;
-        max-width: none !important; max-height: none !important;
-        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
-        border-radius: 0 !important;
-      }
-      .yak-panel-container.yak-panel-drawer { width: 100% !important; max-width: none !important; }
-    }
-  `;
-}
-function getTriggerStyles() {
-    return `
-    .yak-widget-trigger {
-      position: fixed; z-index: 9997;
-      display: inline-flex; align-items: center; gap: 8px;
-      border: none; border-radius: 30px;
-      padding: 5px; height: 45px;
-      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-      background-color: #000; color: #fff;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-      font-family: system-ui, -apple-system, sans-serif;
-    }
-
-    .yak-widget-trigger[data-position="top-left"]      { top: 28px; left: 28px; }
-    .yak-widget-trigger[data-position="top-center"]    { top: 28px; left: 50%; transform: translateX(-50%); }
-    .yak-widget-trigger[data-position="top-right"]     { top: 28px; right: 28px; }
-    .yak-widget-trigger[data-position="left-center"]   { top: 50%; left: 28px; transform: translateY(-50%); }
-    .yak-widget-trigger[data-position="right-center"]  { top: 50%; right: 28px; transform: translateY(-50%); }
-    .yak-widget-trigger[data-position="bottom-left"]   { bottom: 28px; left: 28px; }
-    .yak-widget-trigger[data-position="bottom-center"] { bottom: 28px; left: 50%; transform: translateX(-50%); }
-    .yak-widget-trigger[data-position="bottom-right"]  { bottom: 28px; right: 28px; }
-
-    .yak-widget-icon-bg {
-      display: flex; align-items: center; justify-content: center;
-      width: 36px; height: 36px; border-radius: 50%;
-      background-color: rgba(255, 255, 255, 0.1);
-      flex-shrink: 0;
-    }
-
-    .yak-widget-icon { width: 20px; height: 20px; color: currentColor; }
-
-    .yak-widget-trigger-icon-btn {
-      display: inline-flex; align-items: center; justify-content: center;
-      width: 36px; height: 36px; border-radius: 50%;
-      border: none; padding: 0;
-      background-color: transparent;
-      color: inherit;
-      cursor: pointer;
-      position: relative;
-      transition: background-color 0.15s ease;
-      flex-shrink: 0;
-    }
-    .yak-widget-trigger-icon-btn:hover { background-color: rgba(255, 255, 255, 0.12); }
-    .yak-widget-trigger-icon-btn:disabled { cursor: wait; opacity: 0.7; }
-    .yak-widget-trigger-icon-btn svg { width: 20px; height: 20px; display: block; }
-
-    .yak-widget-trigger-icon-btn[data-action="voice"][data-state="error"] {
-      background-color: rgba(185, 28, 28, 0.18);
-    }
-    .yak-widget-trigger-icon-btn[data-action="voice"][data-state="listening"]::after,
-    .yak-widget-trigger-icon-btn[data-action="voice"][data-state="speaking"]::after {
-      content: "";
-      position: absolute; inset: 2px;
-      border-radius: 50%;
-      border: 2px solid currentColor;
-      pointer-events: none;
-    }
-    .yak-widget-trigger-icon-btn[data-action="voice"][data-state="listening"]::after {
-      opacity: 0.4; animation: yak-widget-pulse 1.2s ease-out infinite;
-    }
-    .yak-widget-trigger-icon-btn[data-action="voice"][data-state="speaking"]::after {
-      opacity: 0.5; animation: yak-widget-wave 0.8s ease-in-out infinite;
-    }
-
-    @media (prefers-color-scheme: dark) {
-      .yak-widget-trigger:not(.yak-widget-light) .yak-widget-icon { filter: invert(1); }
-      .yak-widget-trigger:not(.yak-widget-light) .yak-widget-trigger-icon-btn:hover {
-        background-color: rgba(255, 255, 255, 0.12);
-      }
-    }
-    .yak-widget-trigger.yak-widget-dark .yak-widget-icon  { filter: invert(1); }
-    .yak-widget-trigger.yak-widget-light .yak-widget-icon  { filter: none; }
-    .yak-widget-trigger.yak-widget-light .yak-widget-trigger-icon-btn:hover {
-      background-color: rgba(0, 0, 0, 0.06);
-    }
-
-    .yak-widget-spinner {
-      width: 20px; height: 20px;
-      border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
-      animation: yak-widget-spin 0.8s linear infinite;
-    }
-    @keyframes yak-widget-spin { to { transform: rotate(360deg); } }
-    @keyframes yak-widget-pulse {
-      0%   { transform: scale(1);    opacity: 0.5; }
-      100% { transform: scale(1.45); opacity: 0;   }
-    }
-    @keyframes yak-widget-wave {
-      0%, 100% { transform: scale(1);    opacity: 0.5; }
-      50%      { transform: scale(1.25); opacity: 0.9; }
-    }
-
-    .yak-widget-trigger.yak-widget-custom-light {
-      background-color: var(--yak-btn-light-bg, #fff); color: var(--yak-btn-light-color, #000);
-      border: 1px solid var(--yak-btn-light-border, transparent);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    }
-    .yak-widget-trigger.yak-widget-custom-dark {
-      background-color: var(--yak-btn-dark-bg, #000); color: var(--yak-btn-dark-color, #fff);
-      border: 1px solid var(--yak-btn-dark-border, transparent);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    }
-
-    @media (prefers-color-scheme: light) {
-      .yak-widget-trigger[data-has-light-custom]:not(.yak-widget-dark) {
-        background-color: var(--yak-btn-light-bg, #fff); color: var(--yak-btn-light-color, #000);
-        border: 1px solid var(--yak-btn-light-border, transparent);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-      }
-    }
-    @media (prefers-color-scheme: dark) {
-      .yak-widget-trigger[data-has-dark-custom]:not(.yak-widget-light) {
-        background-color: var(--yak-btn-dark-bg, #000); color: var(--yak-btn-dark-color, #fff);
-        border: 1px solid var(--yak-btn-dark-border, transparent);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-      }
-    }
-
-    @media (prefers-color-scheme: light) {
-      .yak-widget-trigger:not(.yak-widget-dark):not([data-has-light-custom]) {
-        background-color: #fff; color: #000;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border: 1px solid #e5e5e5;
-      }
-      .yak-widget-trigger:not(.yak-widget-dark):not([data-has-light-custom]) .yak-widget-icon-bg {
-        background-color: rgba(0, 0, 0, 0.05);
-      }
-    }
-
-    @media (prefers-color-scheme: dark) {
-      .yak-widget-trigger:not(.yak-widget-light):not([data-has-dark-custom]) {
-        background-color: #000; color: #fff;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border: none;
-      }
-      .yak-widget-trigger:not(.yak-widget-light):not([data-has-dark-custom]) .yak-widget-icon-bg {
-        background-color: rgba(255, 255, 255, 0.1);
-      }
-    }
-
-    .yak-widget-trigger.yak-widget-light:not(.yak-widget-custom-light) {
-      background-color: #fff; color: #000;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border: 1px solid #e5e5e5;
-    }
-    .yak-widget-trigger.yak-widget-light:not(.yak-widget-custom-light) .yak-widget-icon-bg {
-      background-color: rgba(0, 0, 0, 0.05);
-    }
-
-    .yak-widget-trigger.yak-widget-dark:not(.yak-widget-custom-dark) {
-      background-color: #000; color: #fff;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border: none;
-    }
-    .yak-widget-trigger.yak-widget-dark:not(.yak-widget-custom-dark) .yak-widget-icon-bg {
-      background-color: rgba(255, 255, 255, 0.1);
-    }
-  `;
-}
-// ── YakEmbed class ──────────────────────────────────────────────────────────
-/**
- * Drop-in widget that renders the yak trigger pill plus, depending on mode,
- * the chat iframe panel and/or a WebRTC voice session. Composes both
- * `YakClient` (chat) and `YakVoiceSession` (voice) under one trigger.
- *
- * @example
- * ```ts
- * const embed = new YakEmbed({
- *   appId: "my-app",
- *   mode: "both",
- *   theme: { position: "bottom-left" },
- *   onToolCall: async (name, args) => { ... },
- * });
- * embed.mount();
- * ```
- */
-export class YakEmbed {
-    client;
-    voice;
-    config;
-    mode;
-    // DOM elements
-    styleEl = null;
-    panelRoot = null;
-    container = null;
-    iframe = null;
-    triggerEl = null;
-    chatButton = null;
-    voiceButton = null;
-    // State
-    isOpen = false;
-    isReady = false;
-    isExpanded = false;
-    hasBeenOpened = false;
-    pendingPrompt = null;
-    mounted = false;
-    voiceMachine = INITIAL_VOICE_MACHINE;
-    // Listeners
-    stateListeners = new Set();
-    voiceListeners = new Set();
-    unsubscribeVoice = null;
-    mobileQuery = null;
-    mobileHandler = null;
-    expandHandler = null;
-    constructor(config) {
-        this.config = config;
-        this.mode = config.mode ?? "chat";
-        // Wrap callbacks to integrate with our state
-        this.client = new YakClient({
-            ...config,
-            onReady: () => {
-                this.isReady = true;
-                this.updatePanelState();
-                this.updateChatButtonState();
-                this.sendPendingPrompt();
-                this.sendFocusIfOpen();
-                this.notifyMobileState();
-                // Surface the ready transition to framework subscribers (React/Vue/
-                // Svelte/Angular all derive their loading state from this). Without
-                // it `isReady` stays false forever and consumers spin indefinitely.
-                this.notifyListeners();
-                config.onReady?.();
-            },
-            onClose: () => {
-                this.close();
-                config.onClose?.();
-            },
-        });
-        if (this.mode !== "chat") {
-            const voiceConfig = {
-                appId: config.appId,
-                // A single `origin` on the embed drives both surfaces: chat (iframe)
-                // and voice (mint endpoint).
-                apiOrigin: config.origin,
-                getConfig: config.getConfig,
-                chatConfig: config.chatConfig,
-                onToolCall: config.onToolCall,
-                onRedirect: config.onRedirect,
-            };
-            this.voice = new YakVoiceSession(voiceConfig);
-        }
-        else {
-            this.voice = null;
-        }
-    }
-    /** The underlying headless YakClient for advanced usage */
-    getClient() {
-        return this.client;
-    }
-    /** The underlying voice session — null when mode === "chat". */
-    getVoiceSession() {
-        return this.voice;
-    }
-    /** Current widget mode (immutable for the lifetime of the embed). */
-    getMode() {
-        return this.mode;
-    }
-    // ── Lifecycle ───────────────────────────────────────────────────────────
-    /**
-     * Mount the widget into the DOM. Call once after construction.
-     * Inserts styles and trigger button (if enabled). The chat iframe is
-     * lazily created on the first call to open().
-     */
-    mount(target) {
-        if (this.mounted)
-            return;
-        this.mounted = true;
-        const parent = target ?? this.config.target ?? document.body;
-        // Inject styles
-        this.styleEl = document.createElement("style");
-        this.styleEl.textContent = getPanelStyles() + getTriggerStyles();
-        parent.appendChild(this.styleEl);
-        // Create trigger
-        if (this.config.trigger !== false) {
-            this.createTrigger(parent);
-        }
-        // Listen for expansion messages from iframe
-        this.expandHandler = (event) => {
-            if (event.data?.type === "YAK_SET_EXPANDED") {
-                this.isExpanded = Boolean(event.data.expanded);
-                this.updatePanelState();
-                this.notifyListeners();
-            }
-        };
-        window.addEventListener("message", this.expandHandler);
-        // Start the client's message listeners
-        this.client.mount();
-        // Subscribe to voice state for trigger updates + fan-out to listeners
-        if (this.voice) {
-            this.voiceMachine = this.voice.getState();
-            this.unsubscribeVoice = this.voice.onStateChange((machine) => {
-                this.voiceMachine = machine;
-                this.updateVoiceButtonState();
-                for (const listener of this.voiceListeners) {
-                    try {
-                        listener(machine);
-                    }
-                    catch (err) {
-                        logger.warn("Error in voice listener:", err);
-                    }
-                }
-            });
-            this.updateVoiceButtonState();
-        }
-    }
-    /** Remove all DOM elements and event listeners. */
-    destroy() {
-        if (!this.mounted)
-            return;
-        this.mounted = false;
-        this.client.unmount();
-        if (this.unsubscribeVoice) {
-            this.unsubscribeVoice();
-            this.unsubscribeVoice = null;
-        }
-        this.voice?.destroy();
-        if (this.expandHandler) {
-            window.removeEventListener("message", this.expandHandler);
-            this.expandHandler = null;
-        }
-        if (this.mobileQuery && this.mobileHandler) {
-            this.mobileQuery.removeEventListener("change", this.mobileHandler);
-            this.mobileQuery = null;
-            this.mobileHandler = null;
-        }
-        this.panelRoot?.remove();
-        this.triggerEl?.remove();
-        this.styleEl?.remove();
-        this.panelRoot = null;
-        this.container = null;
-        this.iframe = null;
-        this.triggerEl = null;
-        this.chatButton = null;
-        this.voiceButton = null;
-        this.styleEl = null;
-        this.isOpen = false;
-        this.isReady = false;
-        this.isExpanded = false;
-        this.hasBeenOpened = false;
-        this.stateListeners.clear();
-        this.voiceListeners.clear();
-    }
-    // ── Public chat API ─────────────────────────────────────────────────────
-    /** Open the chat widget. Creates the iframe on first call (lazy mount). */
-    open() {
-        if (!this.mounted)
-            return;
-        if (!this.hasBeenOpened) {
-            this.hasBeenOpened = true;
-            const parent = this.config.target ?? document.body;
-            this.createPanel(parent);
-        }
-        this.isOpen = true;
-        this.client.setWidgetOpen(true);
-        this.updatePanelState();
-        this.updateChatButtonState();
-        this.sendFocusIfOpen();
-        this.notifyListeners();
-    }
-    /** Close the chat widget. The iframe remains in the DOM for instant re-open. */
-    close() {
-        this.isOpen = false;
-        this.client.setWidgetOpen(false);
-        this.updatePanelState();
-        this.updateChatButtonState();
-        this.notifyListeners();
-    }
-    /** Toggle the chat widget open/closed. */
-    toggle() {
-        if (this.isOpen) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
-    }
-    /** Open the chat and immediately send a prompt. */
-    openWithPrompt(prompt) {
-        this.pendingPrompt = prompt;
-        this.open();
-        this.sendPendingPrompt();
-    }
-    /** Get the current widget state. */
-    getState() {
-        return {
-            isOpen: this.isOpen,
-            isReady: this.isReady,
-            isLoading: this.isOpen && !this.isReady,
-            isExpanded: this.isExpanded,
-        };
-    }
-    /** Subscribe to state changes. Returns an unsubscribe function. */
-    onStateChange(listener) {
-        this.stateListeners.add(listener);
-        return () => {
-            this.stateListeners.delete(listener);
-        };
-    }
-    // ── Public voice API ────────────────────────────────────────────────────
-    /** Start a voice session. Must be invoked from a user gesture. */
-    voiceStart() {
-        return this.voice ? this.voice.start() : Promise.resolve();
-    }
-    /** Stop the current voice session. */
-    voiceStop() {
-        return this.voice ? this.voice.stop() : Promise.resolve();
-    }
-    /** Toggle: start if idle/error, stop if active. */
-    async voiceToggle() {
-        if (!this.voice)
-            return;
-        const state = this.voice.getState().state;
-        if (state === "idle" || state === "error") {
-            await this.voice.start();
-        }
-        else if (state === "listening" || state === "speaking" || state === "thinking") {
-            await this.voice.stop();
-        }
-    }
-    /** Current voice machine snapshot. */
-    getVoiceState() {
-        return this.voice ? this.voice.getState() : INITIAL_VOICE_MACHINE;
-    }
-    /** Subscribe to voice state changes. */
-    onVoiceStateChange(listener) {
-        this.voiceListeners.add(listener);
-        return () => {
-            this.voiceListeners.delete(listener);
-        };
-    }
-    // ── DOM creation ────────────────────────────────────────────────────────
-    createPanel(parent) {
-        const theme = this.config.theme;
-        const position = theme?.position ?? DEFAULT_POSITION;
-        const colorMode = theme?.colorMode;
-        const displayMode = theme?.displayMode ?? "chatbox";
-        const isDrawer = displayMode === "drawer";
-        // Root overlay (pointer-events: none)
-        this.panelRoot = document.createElement("div");
-        this.panelRoot.className = "yak-panel-root";
-        // Container
-        this.container = document.createElement("div");
-        const classes = ["yak-panel-container"];
-        if (isDrawer)
-            classes.push("yak-panel-drawer");
-        if (colorMode === "light")
-            classes.push("yak-panel-light");
-        else if (colorMode === "dark")
-            classes.push("yak-panel-dark");
-        this.container.className = classes.join(" ");
-        this.container.dataset.position = position;
-        // Iframe — set `allow` and `title` BEFORE `src` (some browsers
-        // persist the pre-load Permissions-Policy otherwise).
-        this.iframe = document.createElement("iframe");
-        this.iframe.allow = "clipboard-write";
-        this.iframe.title = "yak-chat-host";
-        this.iframe.className = "yak-panel-iframe";
-        this.iframe.src = this.client.getEmbedUrl();
-        this.iframe.addEventListener("load", () => {
-            this.client.setIframeWindow(this.iframe?.contentWindow ?? null);
-        });
-        this.container.appendChild(this.iframe);
-        this.panelRoot.appendChild(this.container);
-        parent.appendChild(this.panelRoot);
-        // Set up mobile detection
-        this.mobileQuery = window.matchMedia("(max-width: 640px)");
-        this.mobileHandler = (e) => {
-            this.notifyIframeFullscreen(e.matches);
-        };
-        this.mobileQuery.addEventListener("change", this.mobileHandler);
-    }
-    createTrigger(parent) {
-        const theme = this.config.theme;
-        const position = theme?.position ?? DEFAULT_POSITION;
-        const colorMode = theme?.colorMode;
-        const triggerConfig = typeof this.config.trigger === "object" ? this.config.trigger : {};
-        this.triggerEl = document.createElement("div");
-        this.triggerEl.dataset.position = position;
-        this.triggerEl.dataset.mode = this.mode;
-        this.triggerEl.className = this.buildTriggerClasses(colorMode, triggerConfig);
-        this.applyTriggerCustomColors(triggerConfig);
-        // Logo circle on the left
-        const iconBg = document.createElement("div");
-        iconBg.className = "yak-widget-icon-bg";
-        const logoImg = document.createElement("img");
-        logoImg.src = `${this.client.getIframeOrigin()}/logo.svg`;
-        logoImg.alt = "";
-        logoImg.width = 20;
-        logoImg.height = 20;
-        logoImg.className = "yak-widget-icon";
-        iconBg.appendChild(logoImg);
-        this.triggerEl.appendChild(iconBg);
-        // Chat icon button
-        if (this.mode === "chat" || this.mode === "both") {
-            this.chatButton = document.createElement("button");
-            this.chatButton.type = "button";
-            this.chatButton.className = "yak-widget-trigger-icon-btn";
-            this.chatButton.dataset.action = "chat";
-            this.chatButton.setAttribute("aria-label", "Open chat");
-            this.chatButton.innerHTML = MESSAGE_CIRCLE_SVG;
-            this.chatButton.addEventListener("click", () => this.open());
-            this.triggerEl.appendChild(this.chatButton);
-        }
-        // Voice icon button
-        if (this.mode === "voice" || this.mode === "both") {
-            this.voiceButton = document.createElement("button");
-            this.voiceButton.type = "button";
-            this.voiceButton.className = "yak-widget-trigger-icon-btn";
-            this.voiceButton.dataset.action = "voice";
-            this.voiceButton.dataset.state = "idle";
-            this.voiceButton.setAttribute("aria-label", VOICE_STATE_ARIA.idle);
-            this.voiceButton.innerHTML = AUDIO_LINES_SVG;
-            this.voiceButton.addEventListener("click", () => {
-                void this.voiceToggle();
-            });
-            this.triggerEl.appendChild(this.voiceButton);
-        }
-        parent.appendChild(this.triggerEl);
-    }
-    buildTriggerClasses(colorMode, triggerConfig) {
-        const classes = ["yak-widget-trigger"];
-        if (colorMode === "light")
-            classes.push("yak-widget-light");
-        else if (colorMode === "dark")
-            classes.push("yak-widget-dark");
-        const hasLightCustom = triggerConfig.lightButton?.background ||
-            triggerConfig.lightButton?.color ||
-            triggerConfig.lightButton?.border;
-        const hasDarkCustom = triggerConfig.darkButton?.background ||
-            triggerConfig.darkButton?.color ||
-            triggerConfig.darkButton?.border;
-        if (colorMode === "light" && hasLightCustom)
-            classes.push("yak-widget-custom-light");
-        else if (colorMode === "dark" && hasDarkCustom)
-            classes.push("yak-widget-custom-dark");
-        return classes.join(" ");
-    }
-    applyTriggerCustomColors(triggerConfig) {
-        if (!this.triggerEl)
-            return;
-        const { lightButton, darkButton } = triggerConfig;
-        const hasLightCustom = lightButton?.background || lightButton?.color || lightButton?.border;
-        const hasDarkCustom = darkButton?.background || darkButton?.color || darkButton?.border;
-        if (hasLightCustom || hasDarkCustom) {
-            const vars = [
-                ["--yak-btn-light-bg", lightButton?.background],
-                ["--yak-btn-light-color", lightButton?.color],
-                ["--yak-btn-light-border", lightButton?.border],
-                ["--yak-btn-dark-bg", darkButton?.background],
-                ["--yak-btn-dark-color", darkButton?.color],
-                ["--yak-btn-dark-border", darkButton?.border],
-            ];
-            for (const [prop, value] of vars) {
-                if (value)
-                    this.triggerEl.style.setProperty(prop, value);
-            }
-        }
-        if (hasLightCustom)
-            this.triggerEl.dataset.hasLightCustom = "true";
-        if (hasDarkCustom)
-            this.triggerEl.dataset.hasDarkCustom = "true";
-    }
-    // ── Internal state management ───────────────────────────────────────────
-    updatePanelState() {
-        if (!this.container)
-            return;
-        this.container.dataset.open = String(this.isOpen && this.isReady);
-        this.container.dataset.expanded = String(this.isExpanded);
-        if (this.panelRoot) {
-            this.panelRoot.dataset.expanded = String(this.isExpanded);
-        }
-    }
-    updateChatButtonState() {
-        if (!this.chatButton)
-            return;
-        const isLoading = this.isOpen && !this.isReady;
-        this.chatButton.disabled = isLoading;
-        this.chatButton.setAttribute("aria-label", isLoading ? "Loading chat" : "Open chat");
-        if (isLoading) {
-            this.chatButton.innerHTML = `<span class="yak-widget-spinner" aria-hidden="true"></span>`;
-        }
-        else {
-            this.chatButton.innerHTML = MESSAGE_CIRCLE_SVG;
-        }
-    }
-    updateVoiceButtonState() {
-        if (!this.voiceButton)
-            return;
-        const state = this.voiceMachine.state;
-        this.voiceButton.dataset.state = state;
-        this.voiceButton.setAttribute("aria-label", VOICE_STATE_ARIA[state]);
-        this.voiceButton.disabled = state === "connecting";
-        this.voiceButton.innerHTML = this.iconForVoiceState(state);
-    }
-    iconForVoiceState(state) {
-        if (state === "connecting") {
-            return `<span class="yak-widget-spinner" aria-hidden="true"></span>`;
-        }
-        if (state === "listening" || state === "speaking" || state === "thinking") {
-            return STOP_SVG;
-        }
-        return AUDIO_LINES_SVG;
-    }
-    sendPendingPrompt() {
-        if (!this.pendingPrompt || !this.isReady)
-            return;
-        logger.debug("Sending pending prompt:", this.pendingPrompt);
-        this.client.sendPrompt(this.pendingPrompt);
-        this.pendingPrompt = null;
-    }
-    sendFocusIfOpen() {
-        if (this.isOpen && this.isReady) {
-            this.client.sendFocus();
-        }
-    }
-    notifyMobileState() {
-        if (this.mobileQuery) {
-            this.notifyIframeFullscreen(this.mobileQuery.matches);
-        }
-    }
-    notifyIframeFullscreen(isFullscreen) {
-        if (!this.iframe?.contentWindow)
-            return;
-        const msg = {
-            type: "yak:viewport",
-            payload: { fullscreen: isFullscreen },
-        };
-        this.iframe.contentWindow.postMessage(msg, this.client.getIframeOrigin());
-    }
-    notifyListeners() {
-        const state = this.getState();
-        for (const listener of this.stateListeners) {
-            try {
-                listener(state);
-            }
-            catch (err) {
-                logger.warn("Error in state listener:", err);
-            }
-        }
-    }
-}