@yak-io/javascript 0.5.0 → 0.6.0

package/dist/embed.d.ts

@@ -0,0 +1,97 @@
+import { YakClient, type YakClientConfig } from "./client.js";
+export type TriggerButtonConfig = {
+    /** Label displayed on the trigger button. Default: "Ask with AI" */
+    label?: string;
+    /** Custom color overrides for light mode */
+    lightButton?: {
+        background?: string;
+        color?: string;
+        border?: string;
+    };
+    /** Custom color overrides for dark mode */
+    darkButton?: {
+        background?: string;
+        color?: string;
+        border?: string;
+    };
+};
+export type YakEmbedConfig = YakClientConfig & {
+    /** DOM element to append the widget into. Defaults to document.body. */
+    target?: HTMLElement;
+    /** Show the floating trigger button. Default: true */
+    trigger?: boolean | TriggerButtonConfig;
+};
+export type YakEmbedState = {
+    isOpen: boolean;
+    isReady: boolean;
+    isExpanded: boolean;
+};
+export type YakEmbedStateListener = (state: YakEmbedState) => void;
+/**
+ * Drop-in widget that renders the yak chat iframe + optional trigger button.
+ * Wraps YakClient with DOM rendering, lazy iframe mounting, and consistent styling.
+ *
+ * @example
+ * ```ts
+ * const embed = new YakEmbed({
+ *   appId: "my-app",
+ *   theme: { position: "bottom-right" },
+ *   onToolCall: async (name, args) => { ... },
+ * });
+ * embed.mount();
+ * ```
+ */
+export declare class YakEmbed {
+    private readonly client;
+    private readonly config;
+    private styleEl;
+    private panelRoot;
+    private container;
+    private iframe;
+    private triggerButton;
+    private isOpen;
+    private isReady;
+    private isExpanded;
+    private hasBeenOpened;
+    private pendingPrompt;
+    private mounted;
+    private stateListeners;
+    private mobileQuery;
+    private mobileHandler;
+    private expandHandler;
+    constructor(config: YakEmbedConfig);
+    /** The underlying headless YakClient for advanced usage */
+    getClient(): YakClient;
+    /**
+     * Mount the widget into the DOM. Call once after construction.
+     * Inserts styles and trigger button (if enabled). The iframe is lazily
+     * created on the first call to open().
+     */
+    mount(target?: HTMLElement): void;
+    /** Remove all DOM elements and event listeners. */
+    destroy(): void;
+    /** Open the chat widget. Creates the iframe on first call (lazy mount). */
+    open(): void;
+    /** Close the chat widget. The iframe remains in the DOM for instant re-open. */
+    close(): void;
+    /** Toggle the chat widget open/closed. */
+    toggle(): void;
+    /** Open the chat and immediately send a prompt. */
+    openWithPrompt(prompt: string): void;
+    /** Get the current widget state. */
+    getState(): YakEmbedState;
+    /** Subscribe to state changes. Returns an unsubscribe function. */
+    onStateChange(listener: YakEmbedStateListener): () => void;
+    private createPanel;
+    private createTrigger;
+    private buildTriggerClasses;
+    private applyTriggerCustomColors;
+    private updatePanelState;
+    private updateTriggerState;
+    private sendPendingPrompt;
+    private sendFocusIfOpen;
+    private notifyMobileState;
+    private notifyIframeFullscreen;
+    private notifyListeners;
+}
+//# sourceMappingURL=embed.d.ts.map

package/dist/embed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"embed.d.ts","sourceRoot":"","sources":["../src/embed.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AAM9D,MAAM,MAAM,mBAAmB,GAAG;IAChC,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,WAAW,CAAC,EAAE;QAAE,UAAU,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvE,2CAA2C;IAC3C,UAAU,CAAC,EAAE;QAAE,UAAU,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACvE,CAAC;AAIF,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG;IAC7C,wEAAwE;IACxE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;CACzC,CAAC;AAIF,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;AAgNnE;;;;;;;;;;;;;GAaG;AACH,qBAAa,QAAQ;IACnB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAY;IACnC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAiB;IAGxC,OAAO,CAAC,OAAO,CAAiC;IAChD,OAAO,CAAC,SAAS,CAA+B;IAChD,OAAO,CAAC,SAAS,CAA+B;IAChD,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,aAAa,CAAkC;IAGvD,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,OAAO,CAAS;IAGxB,OAAO,CAAC,cAAc,CAAoC;IAC1D,OAAO,CAAC,WAAW,CAA+B;IAClD,OAAO,CAAC,aAAa,CAAmD;IACxE,OAAO,CAAC,aAAa,CAA4C;gBAErD,MAAM,EAAE,cAAc;IAsBlC,2DAA2D;IACpD,SAAS,IAAI,SAAS;IAM7B;;;;OAIG;IACI,KAAK,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IA8BxC,mDAAmD;IAC5C,OAAO,IAAI,IAAI;IAoCtB,2EAA2E;IACpE,IAAI,IAAI,IAAI;IAkBnB,gFAAgF;IACzE,KAAK,IAAI,IAAI;IAQpB,0CAA0C;IACnC,MAAM,IAAI,IAAI;IAQrB,mDAAmD;IAC5C,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAM3C,oCAAoC;IAC7B,QAAQ,IAAI,aAAa;IAIhC,mEAAmE;IAC5D,aAAa,CAAC,QAAQ,EAAE,qBAAqB,GAAG,MAAM,IAAI;IASjE,OAAO,CAAC,WAAW;IA2CnB,OAAO,CAAC,aAAa;IAyCrB,OAAO,CAAC,mBAAmB;IAuB3B,OAAO,CAAC,wBAAwB;IA2BhC,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,kBAAkB;IA2B1B,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,eAAe;CAUxB"}

package/dist/embed.js

@@ -0,0 +1,564 @@
+import { YakClient } from "./client.js";
+import { logger } from "./logger.js";
+// ── 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: flex; align-items: center; gap: 12px;
+      border: none; border-radius: 30px;
+      padding: 0 5px 0 20px; height: 45px; min-width: 45px; width: auto;
+      cursor: pointer;
+      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+      overflow: hidden;
+      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; flex-direction: row-reverse; }
+    .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%); flex-direction: row-reverse; }
+    .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; flex-direction: row-reverse; }
+    .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-trigger-label { font-size: 14px; font-weight: 600; white-space: nowrap; }
+
+    .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);
+    }
+
+    .yak-widget-icon { width: 20px; height: 20px; color: currentColor; }
+
+    @media (prefers-color-scheme: dark) {
+      .yak-widget-trigger:not(.yak-widget-light) .yak-widget-icon { filter: invert(1); }
+    }
+    .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-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); } }
+
+    .yak-widget-trigger:disabled { cursor: wait; }
+
+    .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 chat iframe + optional trigger button.
+ * Wraps YakClient with DOM rendering, lazy iframe mounting, and consistent styling.
+ *
+ * @example
+ * ```ts
+ * const embed = new YakEmbed({
+ *   appId: "my-app",
+ *   theme: { position: "bottom-right" },
+ *   onToolCall: async (name, args) => { ... },
+ * });
+ * embed.mount();
+ * ```
+ */
+export class YakEmbed {
+    client;
+    config;
+    // DOM elements
+    styleEl = null;
+    panelRoot = null;
+    container = null;
+    iframe = null;
+    triggerButton = null;
+    // State
+    isOpen = false;
+    isReady = false;
+    isExpanded = false;
+    hasBeenOpened = false;
+    pendingPrompt = null;
+    mounted = false;
+    // Listeners
+    stateListeners = new Set();
+    mobileQuery = null;
+    mobileHandler = null;
+    expandHandler = null;
+    constructor(config) {
+        this.config = config;
+        // Wrap callbacks to integrate with our state
+        this.client = new YakClient({
+            ...config,
+            onReady: () => {
+                this.isReady = true;
+                this.updatePanelState();
+                this.updateTriggerState();
+                this.sendPendingPrompt();
+                this.sendFocusIfOpen();
+                this.notifyMobileState();
+                config.onReady?.();
+            },
+            onClose: () => {
+                this.close();
+                config.onClose?.();
+            },
+        });
+    }
+    /** The underlying headless YakClient for advanced usage */
+    getClient() {
+        return this.client;
+    }
+    // ── Lifecycle ───────────────────────────────────────────────────────────
+    /**
+     * Mount the widget into the DOM. Call once after construction.
+     * Inserts styles and trigger button (if enabled). The 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 button
+        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();
+    }
+    /** Remove all DOM elements and event listeners. */
+    destroy() {
+        if (!this.mounted)
+            return;
+        this.mounted = false;
+        this.client.unmount();
+        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.triggerButton?.remove();
+        this.styleEl?.remove();
+        this.panelRoot = null;
+        this.container = null;
+        this.iframe = null;
+        this.triggerButton = null;
+        this.styleEl = null;
+        this.isOpen = false;
+        this.isReady = false;
+        this.isExpanded = false;
+        this.hasBeenOpened = false;
+        this.stateListeners.clear();
+    }
+    // ── Public 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.updateTriggerState();
+        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.updateTriggerState();
+        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, isExpanded: this.isExpanded };
+    }
+    /** Subscribe to state changes. Returns an unsubscribe function. */
+    onStateChange(listener) {
+        this.stateListeners.add(listener);
+        return () => {
+            this.stateListeners.delete(listener);
+        };
+    }
+    // ── DOM creation ────────────────────────────────────────────────────────
+    createPanel(parent) {
+        const theme = this.config.theme;
+        const position = theme?.position ?? "bottom-right";
+        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
+        this.iframe = document.createElement("iframe");
+        this.iframe.src = this.client.getEmbedUrl();
+        this.iframe.className = "yak-panel-iframe";
+        this.iframe.title = "yak-chat-host";
+        this.iframe.allow = "clipboard-write";
+        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 ?? "bottom-right";
+        const colorMode = theme?.colorMode;
+        const triggerConfig = typeof this.config.trigger === "object" ? this.config.trigger : {};
+        const label = triggerConfig.label ?? "Ask with AI";
+        this.triggerButton = document.createElement("button");
+        this.triggerButton.type = "button";
+        this.triggerButton.setAttribute("aria-label", "Open chat");
+        this.triggerButton.dataset.position = position;
+        this.triggerButton.className = this.buildTriggerClasses(colorMode, triggerConfig);
+        this.applyTriggerCustomColors(triggerConfig);
+        // Inner content
+        const labelEl = document.createElement("span");
+        labelEl.className = "yak-widget-trigger-label";
+        labelEl.textContent = label;
+        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.triggerButton.appendChild(labelEl);
+        this.triggerButton.appendChild(iconBg);
+        this.triggerButton.addEventListener("click", () => {
+            this.open();
+        });
+        parent.appendChild(this.triggerButton);
+    }
+    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.triggerButton)
+            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.triggerButton.style.setProperty(prop, value);
+            }
+        }
+        if (hasLightCustom)
+            this.triggerButton.dataset.hasLightCustom = "true";
+        if (hasDarkCustom)
+            this.triggerButton.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);
+        }
+    }
+    updateTriggerState() {
+        if (!this.triggerButton)
+            return;
+        const isLoading = this.isOpen && !this.isReady;
+        this.triggerButton.disabled = isLoading;
+        this.triggerButton.setAttribute("aria-label", isLoading ? "Loading chat" : "Open chat");
+        // Swap icon content: spinner vs logo
+        const iconBg = this.triggerButton.querySelector(".yak-widget-icon-bg");
+        if (!iconBg)
+            return;
+        if (isLoading) {
+            iconBg.innerHTML = '<div class="yak-widget-spinner" aria-hidden="true"></div>';
+        }
+        else {
+            const existing = iconBg.querySelector(".yak-widget-icon");
+            if (!existing) {
+                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.innerHTML = "";
+                iconBg.appendChild(logoImg);
+            }
+        }
+    }
+    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);
+            }
+        }
+    }
+}

package/dist/index.d.ts

@@ -6,5 +6,7 @@ export { EMBED_PROTOCOL_VERSION } from "./version.js";
 export type { EmbedProtocolVersion } from "./version.js";
 export { YakClient } from "./client.js";
 export type { YakClientConfig } from "./client.js";
+export { YakEmbed } from "./embed.js";
+export type { YakEmbedConfig, YakEmbedState, YakEmbedStateListener, TriggerButtonConfig, } from "./embed.js";
 export { enableYakLogging, disableYakLogging, isYakLoggingEnabled, logger } from "./logger.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AAGjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,YAAY,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGzD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAGnD,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AAGjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,YAAY,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGzD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAGnD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EACV,cAAc,EACd,aAAa,EACb,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -7,5 +7,7 @@ export * from "./types/tools.js";
 export { EMBED_PROTOCOL_VERSION } from "./version.js";
 // Public client API
 export { YakClient } from "./client.js";
+// Embed (DOM rendering layer)
+export { YakEmbed } from "./embed.js";
 // Logging utilities
 export { enableYakLogging, disableYakLogging, isYakLoggingEnabled, logger } from "./logger.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yak-io/javascript",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Core JavaScript SDK for embedding yak chatbot",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",