@speechos/client 0.2.0 → 0.2.1

package/dist/index.js

@@ -1,259 +1,2767 @@
-import { DEFAULT_HOST, events, events as events$1, getConfig, getConfig as getConfig$1, livekit, livekit as livekit$1, resetConfig, setConfig, setConfig as setConfig$1, state, state as state$1, transcriptStore, updateUserId } from "@speechos/core";
+import { state, events, transcriptStore, livekit, getConfig, setConfig, updateUserId } from '@speechos/core';
+export { DEFAULT_HOST, events, getConfig, livekit, resetConfig, setConfig, state, transcriptStore } from '@speechos/core';
 
-//#region src/form-detector.ts
 /**
-* Check if an element is a form field that we should track
-*/
+ * Form field focus detection for SpeechOS Client SDK
+ * Detects when users focus on form fields and manages widget visibility
+ */
+/**
+ * Check if an element is a form field that we should track
+ */
 function isFormField(element) {
-	if (!element || !(element instanceof HTMLElement)) return false;
-	const tagName = element.tagName.toLowerCase();
-	if (tagName === "input" || tagName === "textarea") {
-		if (tagName === "input") {
-			const type = element.type.toLowerCase();
-			const excludedTypes = [
-				"checkbox",
-				"radio",
-				"submit",
-				"button",
-				"reset",
-				"file",
-				"hidden"
-			];
-			if (excludedTypes.includes(type)) return false;
-		}
-		return true;
-	}
-	if (element.isContentEditable || element.getAttribute("contenteditable") === "true") return true;
-	return false;
+    if (!element || !(element instanceof HTMLElement)) {
+        return false;
+    }
+    const tagName = element.tagName.toLowerCase();
+    // Check for input, textarea
+    if (tagName === "input" || tagName === "textarea") {
+        // Exclude certain input types that don't accept text
+        if (tagName === "input") {
+            const type = element.type.toLowerCase();
+            const excludedTypes = [
+                "checkbox",
+                "radio",
+                "submit",
+                "button",
+                "reset",
+                "file",
+                "hidden",
+            ];
+            if (excludedTypes.includes(type)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    // Check for contenteditable
+    if (element.isContentEditable ||
+        element.getAttribute("contenteditable") === "true") {
+        return true;
+    }
+    return false;
 }
 /**
-* Form detector class that manages focus tracking
-*/
-var FormDetector = class {
-	isActive = false;
-	focusHandler = null;
-	blurHandler = null;
-	/**
-	* Start detecting form field focus events
-	*/
-	start() {
-		if (this.isActive) {
-			console.warn("FormDetector is already active");
-			return;
-		}
-		this.focusHandler = (event) => {
-			const target = event.target;
-			if (isFormField(target)) {
-				state$1.setFocusedElement(target);
-				state$1.show();
-				events$1.emit("form:focus", { element: target });
-			}
-		};
-		this.blurHandler = (event) => {
-			const target = event.target;
-			if (isFormField(target)) {
-				const relatedTarget = event.relatedTarget;
-				const widget = document.querySelector("speechos-widget");
-				const goingToFormField = isFormField(relatedTarget);
-				const goingToWidget = widget && (widget.contains(relatedTarget) || widget.shadowRoot?.contains(relatedTarget) || relatedTarget === widget);
-				if (goingToFormField || goingToWidget) return;
-				setTimeout(() => {
-					const activeElement = document.activeElement;
-					const isWidgetFocused = widget && (widget.contains(activeElement) || widget.shadowRoot?.contains(activeElement));
-					if (!isFormField(activeElement) && !isWidgetFocused) {
-						state$1.setFocusedElement(null);
-						state$1.hide();
-						events$1.emit("form:blur", { element: null });
-					}
-				}, 150);
-			}
-		};
-		document.addEventListener("focusin", this.focusHandler, true);
-		document.addEventListener("focusout", this.blurHandler, true);
-		this.isActive = true;
-	}
-	/**
-	* Stop detecting form field focus events
-	*/
-	stop() {
-		if (!this.isActive) return;
-		if (this.focusHandler) {
-			document.removeEventListener("focusin", this.focusHandler, true);
-			this.focusHandler = null;
-		}
-		if (this.blurHandler) {
-			document.removeEventListener("focusout", this.blurHandler, true);
-			this.blurHandler = null;
-		}
-		state$1.setFocusedElement(null);
-		state$1.hide();
-		this.isActive = false;
-	}
-	/**
-	* Check if the detector is currently active
-	*/
-	get active() {
-		return this.isActive;
-	}
-};
+ * Form detector class that manages focus tracking
+ */
+class FormDetector {
+    constructor() {
+        this.isActive = false;
+        this.focusHandler = null;
+        this.blurHandler = null;
+    }
+    /**
+     * Start detecting form field focus events
+     */
+    start() {
+        if (this.isActive) {
+            console.warn("FormDetector is already active");
+            return;
+        }
+        // Create event handlers
+        this.focusHandler = (event) => {
+            const target = event.target;
+            if (isFormField(target)) {
+                state.setFocusedElement(target);
+                state.show();
+                events.emit("form:focus", { element: target });
+            }
+        };
+        this.blurHandler = (event) => {
+            const target = event.target;
+            if (isFormField(target)) {
+                // Check relatedTarget (where focus is going) immediately
+                const relatedTarget = event.relatedTarget;
+                const widget = document.querySelector("speechos-widget");
+                // If focus is going to another form field or the widget, don't hide
+                const goingToFormField = isFormField(relatedTarget);
+                const goingToWidget = widget &&
+                    (widget.contains(relatedTarget) ||
+                        widget.shadowRoot?.contains(relatedTarget) ||
+                        relatedTarget === widget);
+                if (goingToFormField || goingToWidget) {
+                    return;
+                }
+                // Delay hiding to allow for any edge cases
+                setTimeout(() => {
+                    // Double-check: verify focus is still not on a form field or widget
+                    const activeElement = document.activeElement;
+                    const isWidgetFocused = widget &&
+                        (widget.contains(activeElement) ||
+                            widget.shadowRoot?.contains(activeElement));
+                    // Only hide if no form field is focused AND widget isn't focused
+                    if (!isFormField(activeElement) && !isWidgetFocused) {
+                        state.setFocusedElement(null);
+                        state.hide();
+                        events.emit("form:blur", { element: null });
+                    }
+                }, 150);
+            }
+        };
+        // Attach listeners to document
+        document.addEventListener("focusin", this.focusHandler, true);
+        document.addEventListener("focusout", this.blurHandler, true);
+        this.isActive = true;
+    }
+    /**
+     * Stop detecting form field focus events
+     */
+    stop() {
+        if (!this.isActive) {
+            return;
+        }
+        // Remove event listeners
+        if (this.focusHandler) {
+            document.removeEventListener("focusin", this.focusHandler, true);
+            this.focusHandler = null;
+        }
+        if (this.blurHandler) {
+            document.removeEventListener("focusout", this.blurHandler, true);
+            this.blurHandler = null;
+        }
+        // Reset state
+        state.setFocusedElement(null);
+        state.hide();
+        this.isActive = false;
+    }
+    /**
+     * Check if the detector is currently active
+     */
+    get active() {
+        return this.isActive;
+    }
+}
+// Export singleton instance
 const formDetector = new FormDetector();
 
-//#endregion
-//#region src/speechos.ts
-/**
-* Main SpeechOS class for initializing and managing the SDK with UI
-*/
-var SpeechOS = class SpeechOS {
-	static instance = null;
-	static widgetElement = null;
-	static isInitialized = false;
-	/**
-	* Initialize the SpeechOS SDK
-	* @param config - Configuration options
-	* @returns Promise that resolves when initialization is complete
-	* @throws Error if configuration is invalid (e.g., missing apiKey)
-	*/
-	static async init(config = {}) {
-		if (this.isInitialized) {
-			console.warn("SpeechOS is already initialized");
-			return;
-		}
-		try {
-			setConfig$1(config);
-		} catch (error) {
-			const errorMessage = error instanceof Error ? error.message : "Invalid configuration";
-			console.error(`[SpeechOS] Error: ${errorMessage} (init_config)`);
-			events$1.emit("error", {
-				code: "init_config",
-				message: errorMessage,
-				source: "init"
-			});
-			throw error;
-		}
-		const finalConfig = getConfig$1();
-		this.instance = new SpeechOS();
-		try {
-			if (finalConfig.debug) console.log("[SpeechOS] Fetching LiveKit token...");
-			await livekit$1.fetchToken();
-			if (finalConfig.debug) console.log("[SpeechOS] LiveKit token fetched successfully");
-		} catch (error) {
-			const errorMessage = error instanceof Error ? error.message : "Failed to fetch token";
-			console.error(`[SpeechOS] Error: ${errorMessage} (init_token_fetch)`);
-			events$1.emit("error", {
-				code: "init_token_fetch",
-				message: errorMessage,
-				source: "init"
-			});
-		}
-		formDetector.start();
-		this.mountWidget();
-		this.isInitialized = true;
-		if (finalConfig.debug) console.log("[SpeechOS] Initialized with config:", finalConfig);
-	}
-	/**
-	* Destroy the SpeechOS SDK and clean up resources
-	*/
-	static async destroy() {
-		if (!this.isInitialized) {
-			console.warn("SpeechOS is not initialized");
-			return;
-		}
-		formDetector.stop();
-		await livekit$1.disconnect();
-		this.unmountWidget();
-		events$1.clear();
-		state$1.reset();
-		this.instance = null;
-		this.isInitialized = false;
-		const config = getConfig$1();
-		if (config.debug) console.log("[SpeechOS] Destroyed and cleaned up");
-	}
-	/**
-	* Check if SpeechOS is initialized
-	*/
-	static get initialized() {
-		return this.isInitialized;
-	}
-	/**
-	* Get the current state
-	*/
-	static getState() {
-		return state$1.getState();
-	}
-	/**
-	* Get the event emitter for external listeners
-	*/
-	static get events() {
-		return events$1;
-	}
-	/**
-	* Mount the widget to the DOM
-	*/
-	static mountWidget() {
-		if (this.widgetElement) {
-			console.warn("Widget is already mounted");
-			return;
-		}
-		const widget = document.createElement("speechos-widget");
-		this.widgetElement = widget;
-		document.body.appendChild(widget);
-	}
-	/**
-	* Unmount the widget from the DOM
-	*/
-	static unmountWidget() {
-		if (this.widgetElement) {
-			this.widgetElement.remove();
-			this.widgetElement = null;
-		}
-	}
-	/**
-	* Show the widget programmatically
-	*/
-	static show() {
-		state$1.show();
-	}
-	/**
-	* Hide the widget programmatically
-	*/
-	static hide() {
-		state$1.hide();
-	}
-	/**
-	* Identify the current user
-	* Can be called after init() to associate sessions with a user identifier.
-	* Clears the cached token so the next voice session uses the new userId.
-	*
-	* @param userId - User identifier from your system (e.g., user ID, email)
-	*
-	* @example
-	* // Initialize SDK early
-	* SpeechOS.init({ apiKey: 'xxx' });
-	*
-	* // Later, after user logs in
-	* SpeechOS.identify('user_123');
-	*/
-	static identify(userId) {
-		if (!this.isInitialized) {
-			console.warn("SpeechOS.identify() called before init(). Call init() first.");
-			return;
-		}
-		const config = getConfig$1();
-		updateUserId(userId);
-		livekit$1.clearToken();
-		if (config.debug) console.log(`[SpeechOS] User identified: ${userId}`);
-	}
-	/**
-	* Private constructor to prevent direct instantiation
-	*/
-	constructor() {}
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$3=globalThis,e$4=t$3.ShadowRoot&&(void 0===t$3.ShadyCSS||t$3.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$2=Symbol(),o$5=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$2)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$4&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$5.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$5.set(s,t));}return t}toString(){return this.cssText}};const r$4=t=>new n$3("string"==typeof t?t:t+"",void 0,s$2),i$4=(t,...e)=>{const o=1===t.length?t[0]:e.reduce((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1],t[0]);return new n$3(o,t,s$2)},S$1=(s,o)=>{if(e$4)s.adoptedStyleSheets=o.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of o){const o=document.createElement("style"),n=t$3.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$4?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$4(e)})(t):t;
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const{is:i$3,defineProperty:e$3,getOwnPropertyDescriptor:h$1,getOwnPropertyNames:r$3,getOwnPropertySymbols:o$4,getPrototypeOf:n$2}=Object,a$1=globalThis,c$1=a$1.trustedTypes,l$1=c$1?c$1.emptyScript:"",p$1=a$1.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$1={toAttribute(t,s){switch(s){case Boolean:t=t?l$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1=(t,s)=>!i$3(t,s),b$1={attribute:true,type:String,converter:u$1,reflect:false,useDefault:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$1.litPropertyMetadata??=new WeakMap;let y$1 = class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b$1){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e$3(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b$1}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$2(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...r$3(t),...o$4(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$2(s));}else void 0!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return  false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach(t=>t.hostConnected?.());}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.());}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u$1).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$1;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i,e=false,h){if(void 0!==t){const r=this.constructor;if(false===e&&(h=this[t]),i??=r.getPropertyOptions(t),!((i.hasChanged??f$1)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(r._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return  true}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM();}updated(t){}firstUpdated(t){}};y$1.elementStyles=[],y$1.shadowRootOptions={mode:"open"},y$1[d$1("elementProperties")]=new Map,y$1[d$1("finalized")]=new Map,p$1?.({ReactiveElement:y$1}),(a$1.reactiveElementVersions??=[]).push("2.1.2");
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$2=globalThis,i$2=t=>t,s$1=t$2.trustedTypes,e$2=s$1?s$1.createPolicy("lit-html",{createHTML:t=>t}):void 0,h="$lit$",o$3=`lit$${Math.random().toFixed(9).slice(2)}$`,n$1="?"+o$3,r$2=`<${n$1}>`,l=document,c=()=>l.createComment(""),a=t=>null===t||"object"!=typeof t&&"function"!=typeof t,u=Array.isArray,d=t=>u(t)||"function"==typeof t?.[Symbol.iterator],f="[ \t\n\f\r]",v=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_=/-->/g,m=/>/g,p=RegExp(`>|${f}(?:([^\\s"'>=/]+)(${f}*=${f}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),g=/'/g,$=/"/g,y=/^(?:script|style|textarea|title)$/i,x=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),b=x(1),E=Symbol.for("lit-noChange"),A=Symbol.for("lit-nothing"),C=new WeakMap,P=l.createTreeWalker(l,129);function V(t,i){if(!u(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==e$2?e$2.createHTML(i):i}const N=(t,i)=>{const s=t.length-1,e=[];let n,l=2===i?"<svg>":3===i?"<math>":"",c=v;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,f=0;for(;f<s.length&&(c.lastIndex=f,u=c.exec(s),null!==u);)f=c.lastIndex,c===v?"!--"===u[1]?c=_:void 0!==u[1]?c=m:void 0!==u[2]?(y.test(u[2])&&(n=RegExp("</"+u[2],"g")),c=p):void 0!==u[3]&&(c=p):c===p?">"===u[0]?(c=n??v,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?p:'"'===u[3]?$:g):c===$||c===g?c=p:c===_||c===m?c=v:(c=p,n=void 0);const x=c===p&&t[i+1].startsWith("/>")?" ":"";l+=c===v?s+r$2:d>=0?(e.push(a),s.slice(0,d)+h+s.slice(d)+o$3+x):s+o$3+(-2===d?i:x);}return [V(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),e]};class S{constructor({strings:t,_$litType$:i},e){let r;this.parts=[];let l=0,a=0;const u=t.length-1,d=this.parts,[f,v]=N(t,i);if(this.el=S.createElement(f,e),P.currentNode=this.el.content,2===i||3===i){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=P.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(h)){const i=v[a++],s=r.getAttribute(t).split(o$3),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:l,name:e[2],strings:s,ctor:"."===e[1]?I:"?"===e[1]?L:"@"===e[1]?z:H}),r.removeAttribute(t);}else t.startsWith(o$3)&&(d.push({type:6,index:l}),r.removeAttribute(t));if(y.test(r.tagName)){const t=r.textContent.split(o$3),i=t.length-1;if(i>0){r.textContent=s$1?s$1.emptyScript:"";for(let s=0;s<i;s++)r.append(t[s],c()),P.nextNode(),d.push({type:2,index:++l});r.append(t[i],c());}}}else if(8===r.nodeType)if(r.data===n$1)d.push({type:2,index:l});else {let t=-1;for(;-1!==(t=r.data.indexOf(o$3,t+1));)d.push({type:7,index:l}),t+=o$3.length-1;}l++;}}static createElement(t,i){const s=l.createElement("template");return s.innerHTML=t,s}}function M(t,i,s=t,e){if(i===E)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=a(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=M(t,h._$AS(t,i.values),h,e)),i}class R{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??l).importNode(i,true);P.currentNode=e;let h=P.nextNode(),o=0,n=0,r=s[0];for(;void 0!==r;){if(o===r.index){let i;2===r.type?i=new k(h,h.nextSibling,this,t):1===r.type?i=new r.ctor(h,r.name,r.strings,this,t):6===r.type&&(i=new Z(h,this,t)),this._$AV.push(i),r=s[++n];}o!==r?.index&&(h=P.nextNode(),o++);}return P.currentNode=l,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class k{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=A,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=M(this,t,i),a(t)?t===A||null==t||""===t?(this._$AH!==A&&this._$AR(),this._$AH=A):t!==this._$AH&&t!==E&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):d(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==A&&a(this._$AH)?this._$AA.nextSibling.data=t:this.T(l.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=S.createElement(V(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new R(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=C.get(t.strings);return void 0===i&&C.set(t.strings,i=new S(t)),i}k(t){u(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new k(this.O(c()),this.O(c()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,s){for(this._$AP?.(false,true,s);t!==this._$AB;){const s=i$2(t).nextSibling;i$2(t).remove(),t=s;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class H{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=A,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=A;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=M(this,t,i,0),o=!a(t)||t!==this._$AH&&t!==E,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=M(this,e[s+n],i,n),r===E&&(r=this._$AH[n]),o||=!a(r)||r!==this._$AH[n],r===A?t=A:t!==A&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===A?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class I extends H{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===A?void 0:t;}}class L extends H{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==A);}}class z extends H{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=M(this,t,i,0)??A)===E)return;const s=this._$AH,e=t===A&&s!==A||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==A&&(s===A||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}}class Z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){M(this,t);}}const B=t$2.litHtmlPolyfillSupport;B?.(S,k),(t$2.litHtmlVersions??=[]).push("3.3.2");const D=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new k(i.insertBefore(c(),t),t,void 0,s??{});}return h._$AI(t),h};
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const s=globalThis;let i$1 = class i extends y$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=D(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return E}};i$1._$litElement$=true,i$1["finalized"]=true,s.litElementHydrateSupport?.({LitElement:i$1});const o$2=s.litElementPolyfillSupport;o$2?.({LitElement:i$1});(s.litElementVersions??=[]).push("4.2.2");
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$1=t=>(e,o)=>{ void 0!==o?o.addInitializer(()=>{customElements.define(t,e);}):customElements.define(t,e);};
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const o$1={attribute:true,type:String,converter:u$1,reflect:false,hasChanged:f$1},r$1=(t=o$1,e,r)=>{const{kind:n,metadata:i}=r;let s=globalThis.litPropertyMetadata.get(i);if(void 0===s&&globalThis.litPropertyMetadata.set(i,s=new Map),"setter"===n&&((t=Object.create(t)).wrapped=true),s.set(r.name,t),"accessor"===n){const{name:o}=r;return {set(r){const n=e.get.call(this);e.set.call(this,r),this.requestUpdate(o,n,t,true,r);},init(e){return void 0!==e&&this.C(o,void 0,t,e),e}}}if("setter"===n){const{name:o}=r;return function(r){const n=this[o];e.call(this,r),this.requestUpdate(o,n,t,true,r);}}throw Error("Unsupported decorator location: "+n)};function n(t){return (e,o)=>"object"==typeof o?r$1(t,e,o):((t,e,o)=>{const r=e.hasOwnProperty(o);return e.constructor.createProperty(o,t),r?Object.getOwnPropertyDescriptor(e,o):void 0})(t,e,o)}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function r(r){return n({...r,state:true,attribute:false})}
+
+/**
+ * Shared styles and CSS variables for SpeechOS UI components
+ */
+/**
+ * CSS variables and theme tokens
+ * These can be customized by the host application
+ */
+const themeStyles = i$4 `
+  :host {
+    /* Color tokens */
+    --speechos-primary: #10B981;
+    --speechos-primary-hover: #059669;
+    --speechos-primary-active: #047857;
+
+    --speechos-bg: #ffffff;
+    --speechos-bg-hover: #f9fafb;
+    --speechos-surface: #f3f4f6;
+
+    --speechos-text: #111827;
+    --speechos-text-secondary: #6b7280;
+
+    --speechos-border: #e5e7eb;
+    --speechos-shadow: rgba(0, 0, 0, 0.1);
+    --speechos-shadow-lg: rgba(0, 0, 0, 0.15);
+
+    /* Spacing */
+    --speechos-spacing-xs: 4px;
+    --speechos-spacing-sm: 8px;
+    --speechos-spacing-md: 12px;
+    --speechos-spacing-lg: 16px;
+    --speechos-spacing-xl: 24px;
+
+    /* Border radius */
+    --speechos-radius-sm: 6px;
+    --speechos-radius-md: 8px;
+    --speechos-radius-lg: 12px;
+    --speechos-radius-full: 9999px;
+
+    /* Transitions */
+    --speechos-transition-fast: 150ms ease;
+    --speechos-transition-base: 200ms ease;
+    --speechos-transition-slow: 300ms ease;
+
+    /* Z-index */
+    --speechos-z-base: 999999;
+    --speechos-z-popup: 1000000;
+  }
+`;
+/**
+ * Common animation keyframes
+ */
+const animations = i$4 `
+  @keyframes speechos-fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes speechos-fadeOut {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+  }
+
+  @keyframes speechos-pulse {
+    0%, 100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.8;
+      transform: scale(0.95);
+    }
+  }
+
+  @keyframes speechos-slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(12px) scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @keyframes speechos-scaleIn {
+    from {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+`;
+/**
+ * Utility styles for common patterns
+ */
+i$4 `
+  .speechos-hidden {
+    display: none !important;
+  }
+
+  .speechos-visible {
+    display: block;
+  }
+
+  .speechos-fade-in {
+    animation: speechos-fadeIn var(--speechos-transition-base) forwards;
+  }
+
+  .speechos-fade-out {
+    animation: speechos-fadeOut var(--speechos-transition-base) forwards;
+  }
+
+  .speechos-pulse {
+    animation: speechos-pulse 2s ease-in-out infinite;
+  }
+`;
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t={CHILD:2},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class e extends i{constructor(i){if(super(i),this.it=A,i.type!==t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A||null==r)return this._t=void 0,this.it=r;if(r===E)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName="unsafeHTML",e.resultType=1;const o=e$1(e);
+
+/**
+ * Icon imports and templates using inline SVG
+ */
+/**
+ * Helper to create an SVG icon template
+ */
+function createIcon(paths, size = 20) {
+    const svgString = `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      style="display: block;"
+    >
+      ${paths}
+    </svg>
+  `;
+    return b `${o(svgString)}`;
+}
+/**
+ * Microphone icon for the main button
+ * Lucide Mic icon paths
+ */
+const micIcon = (size = 20) => createIcon('<path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/>', size);
+/**
+ * Message square icon for dictate action
+ * Lucide MessageSquare icon paths
+ */
+const dictateIcon = (size = 18) => createIcon('<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>', size);
+/**
+ * Pencil icon for edit action
+ * Lucide Pencil icon paths
+ */
+const editIcon = (size = 18) => createIcon('<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>', size);
+/**
+ * Stop/Square icon for stopping recording
+ * Lucide Square icon (filled)
+ */
+const stopIcon = (size = 18) => {
+    const svgString = `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      stroke="none"
+      style="display: block;"
+    >
+      <rect x="6" y="6" width="12" height="12" rx="2" />
+    </svg>
+  `;
+    return b `${o(svgString)}`;
+};
+/**
+ * Loader/spinner icon for connecting state
+ */
+const loaderIcon = (size = 20) => {
+    const svgString = `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      style="display: block; animation: spin 1s linear infinite;"
+    >
+      <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+    </svg>
+  `;
+    return b `${o(svgString)}`;
+};
+/**
+ * X icon for cancel action
+ * Lucide X icon paths
+ */
+const xIcon = (size = 14) => createIcon('<path d="M18 6 6 18"/><path d="m6 6 12 12"/>', size);
+/**
+ * Clipboard/list icon for transcripts tab
+ * Lucide ClipboardList icon paths
+ */
+const clipboardIcon = (size = 16) => createIcon('<rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/>', size);
+/**
+ * Help circle icon for help tab
+ * Lucide HelpCircle icon paths
+ */
+const helpCircleIcon = (size = 16) => createIcon('<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>', size);
+/**
+ * Info icon for about tab
+ * Lucide Info icon paths
+ */
+const infoIcon = (size = 16) => createIcon('<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>', size);
+/**
+ * Settings/cog icon for settings tab
+ * Lucide Settings icon paths
+ */
+const settingsIcon = (size = 16) => createIcon('<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>', size);
+/**
+ * Trash icon for delete action
+ * Lucide Trash2 icon paths
+ */
+const trashIcon = (size = 14) => createIcon('<path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/>', size);
+/**
+ * External link icon
+ * Lucide ExternalLink icon paths
+ */
+const externalLinkIcon = (size = 14) => createIcon('<path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>', size);
+/**
+ * Copy icon
+ * Lucide Copy icon paths
+ */
+const copyIcon = (size = 14) => createIcon('<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>', size);
+
+/**
+ * Microphone button component
+ * A circular button that toggles the action bubbles and handles recording states
+ */
+let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.expanded = false;
+        this.recordingState = "idle";
+        this.activeAction = null;
+        this.editPreviewText = "";
+        this.errorMessage = null;
+    }
+    static { this.styles = [
+        themeStyles,
+        animations,
+        i$4 `
+      :host {
+        display: inline-block;
+      }
+
+      .button-wrapper {
+        position: relative;
+      }
+
+      .mic-button {
+        width: 56px;
+        height: 56px;
+        border-radius: var(--speechos-radius-full);
+        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        position: relative;
+        overflow: hidden;
+      }
+
+      .mic-button:hover {
+        transform: scale(1.05);
+        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
+      }
+
+      .mic-button:active {
+        transform: scale(0.98);
+      }
+
+      /* Expanded state - bubbles visible */
+      .mic-button.expanded {
+        background: linear-gradient(135deg, #059669 0%, #047857 100%);
+      }
+
+      /* Connecting state */
+      .mic-button.connecting {
+        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+        cursor: wait;
+      }
+
+      .mic-button.connecting .button-icon {
+        animation: spin 1s linear infinite;
+      }
+
+      /* Recording state - red with pulse */
+      .mic-button.recording {
+        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
+      }
+
+      .mic-button.recording:hover {
+        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+        box-shadow: 0 6px 16px rgba(239, 68, 68, 0.5);
+      }
+
+      /* Pulse ring animation for recording */
+      .pulse-ring {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+        pointer-events: none;
+      }
+
+      .pulse-ring::before,
+      .pulse-ring::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background: rgba(239, 68, 68, 0.4);
+        animation: pulse-ring 1.5s ease-out infinite;
+      }
+
+      .pulse-ring::after {
+        animation-delay: 0.5s;
+      }
+
+      @keyframes pulse-ring {
+        0% {
+          transform: scale(1);
+          opacity: 0.6;
+        }
+        100% {
+          transform: scale(1.8);
+          opacity: 0;
+        }
+      }
+
+      /* Processing state (transcribing) */
+      .mic-button.processing {
+        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
+        cursor: wait;
+      }
+
+      .mic-button.processing .button-icon {
+        animation: pulse-scale 1s ease-in-out infinite;
+      }
+
+      /* Processing state (editing) - purple */
+      .mic-button.processing.editing {
+        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
+      }
+
+      @keyframes pulse-scale {
+        0%,
+        100% {
+          transform: scale(1);
+        }
+        50% {
+          transform: scale(0.85);
+        }
+      }
+
+      /* Error state */
+      .mic-button.error {
+        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
+        cursor: pointer;
+      }
+
+      .mic-button.error:hover {
+        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
+      }
+
+      @keyframes spin {
+        from {
+          transform: rotate(0deg);
+        }
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      .button-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        z-index: 1;
+        transition: transform 0.2s ease;
+      }
+
+      /* Status label bubble below button - always centered */
+      .status-label {
+        position: absolute;
+        bottom: -32px;
+        left: 50%;
+        transform: translateX(-50%) scale(0.8);
+        font-size: 11px;
+        font-weight: 600;
+        color: white;
+        white-space: nowrap;
+        opacity: 0;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        padding: 6px 12px;
+        border-radius: 20px;
+        background: #374151;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+        pointer-events: none;
+      }
+
+      /* Pop-in animation when visible */
+      .status-label.visible {
+        opacity: 1;
+        transform: translateX(-50%) scale(1);
+      }
+
+      /* Recording state - red bubble with dot indicator */
+      .status-label.recording {
+        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+        padding-left: 20px; /* Make room for the pulsing dot */
+      }
+
+      /* Processing state - amber bubble (for dictate/transcribing) */
+      .status-label.processing {
+        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
+      }
+
+      /* Editing state - purple bubble */
+      .status-label.editing {
+        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
+      }
+
+      /* Connecting state - emerald bubble */
+      .status-label.connecting {
+        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+      }
+
+      /* Subtle pulse animation for the label */
+      .status-label.recording::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 8px;
+        width: 6px;
+        height: 6px;
+        background: white;
+        border-radius: 50%;
+        transform: translateY(-50%);
+        animation: label-pulse 1s ease-in-out infinite;
+      }
+
+      @keyframes label-pulse {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.4;
+        }
+      }
+
+      /* Cancel button - positioned to the right of the main mic button */
+      .cancel-button {
+        position: absolute;
+        top: 50%;
+        right: -36px;
+        transform: translateY(-50%) scale(0.6);
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background: rgba(24, 24, 27, 0.8);
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        border: 1px solid rgba(63, 63, 70, 0.5);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: rgba(161, 161, 170, 1);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+        pointer-events: none;
+        opacity: 0;
+      }
+
+      .cancel-button.visible {
+        opacity: 1;
+        transform: translateY(-50%) scale(1);
+        pointer-events: auto;
+      }
+
+      .cancel-button:hover {
+        transform: translateY(-50%) scale(1.15);
+        background: rgba(39, 39, 42, 0.9);
+        border-color: rgba(63, 63, 70, 0.8);
+        color: rgba(250, 250, 250, 1);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+      }
+
+      .cancel-button:active {
+        transform: translateY(-50%) scale(0.95);
+      }
+
+      .cancel-button svg {
+        stroke-width: 2.5;
+      }
+
+      /* Close/dismiss button - positioned to the right of the main mic button */
+      .close-button {
+        position: absolute;
+        top: 50%;
+        right: -36px;
+        transform: translateY(-50%) scale(0.6);
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background: rgba(24, 24, 27, 0.8);
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        border: 1px solid rgba(63, 63, 70, 0.5);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: rgba(161, 161, 170, 1);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+        pointer-events: none;
+        opacity: 0;
+      }
+
+      .close-button.visible {
+        opacity: 1;
+        transform: translateY(-50%) scale(1);
+        pointer-events: auto;
+      }
+
+      .close-button:hover {
+        transform: translateY(-50%) scale(1.15);
+        background: rgba(39, 39, 42, 0.9);
+        border-color: rgba(63, 63, 70, 0.8);
+        color: rgba(250, 250, 250, 1);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+      }
+
+      .close-button:active {
+        transform: translateY(-50%) scale(0.95);
+      }
+
+      .close-button svg {
+        stroke-width: 2.5;
+      }
+
+      /* Error message display */
+      .error-message {
+        position: absolute;
+        bottom: 72px; /* Above button */
+        left: 50%;
+        transform: translateX(-50%) translateY(8px);
+        max-width: 280px;
+        font-size: 13px;
+        color: white;
+        white-space: normal;
+        text-align: center;
+        padding: 12px 16px;
+        border-radius: 12px;
+        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+        transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+        pointer-events: none;
+        opacity: 0;
+        line-height: 1.4;
+      }
+
+      .error-message.visible {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+      }
+
+      /* Retry button */
+      .retry-button {
+        display: block;
+        margin: 8px auto 0;
+        padding: 6px 12px;
+        background: rgba(255, 255, 255, 0.2);
+        border: 1px solid rgba(255, 255, 255, 0.3);
+        border-radius: 6px;
+        color: white;
+        font-size: 12px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.15s;
+        pointer-events: auto;
+      }
+
+      .retry-button:hover {
+        background: rgba(255, 255, 255, 0.3);
+        border-color: rgba(255, 255, 255, 0.5);
+      }
+    `,
+    ]; }
+    handleClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        // Different behavior based on recording state
+        if (this.recordingState === "recording") {
+            // Stop recording
+            this.dispatchEvent(new CustomEvent("stop-recording", {
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        else if (this.recordingState === "idle") {
+            // Toggle bubbles menu
+            this.dispatchEvent(new CustomEvent("mic-click", {
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        else if (this.recordingState === "error") {
+            // Clear error on click
+            this.dispatchEvent(new CustomEvent("cancel-operation", {
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        // Do nothing during connecting or processing states
+    }
+    handleCancel(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent("cancel-operation", {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    stopEvent(e) {
+        e.stopPropagation();
+    }
+    handleClose(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent("close-widget", {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleRetry(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent("retry-connection", {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    getButtonClass() {
+        const classes = ["mic-button"];
+        if (this.expanded && this.recordingState === "idle") {
+            classes.push("expanded");
+        }
+        if (this.recordingState !== "idle") {
+            classes.push(this.recordingState);
+            // Add editing class for purple styling during edit processing
+            if (this.recordingState === "processing" &&
+                this.activeAction === "edit") {
+                classes.push("editing");
+            }
+        }
+        return classes.join(" ");
+    }
+    renderIcon() {
+        switch (this.recordingState) {
+            case "connecting":
+                return loaderIcon(24);
+            case "recording":
+                return stopIcon(20);
+            case "processing":
+                return loaderIcon(24);
+            case "error":
+                return xIcon(20);
+            default:
+                return micIcon(24);
+        }
+    }
+    getAriaLabel() {
+        switch (this.recordingState) {
+            case "connecting":
+                return "Connecting...";
+            case "recording":
+                return "Stop recording";
+            case "processing":
+                return "Processing...";
+            case "error":
+                return "Connection error - click to dismiss";
+            default:
+                return "Open voice commands";
+        }
+    }
+    /**
+     * Truncate and format preview text for display
+     */
+    formatPreviewText(text, maxLength = 10) {
+        // Trim whitespace and collapse multiple spaces
+        const trimmed = text.trim().replace(/\s+/g, " ");
+        if (!trimmed)
+            return "";
+        if (trimmed.length <= maxLength) {
+            return `"${trimmed}"`;
+        }
+        return `"${trimmed.substring(0, maxLength)}…"`;
+    }
+    getStatusLabel() {
+        switch (this.recordingState) {
+            case "connecting":
+                return "Connecting...";
+            case "recording":
+                if (this.activeAction === "edit" && this.editPreviewText) {
+                    const preview = this.formatPreviewText(this.editPreviewText);
+                    return `Editing ${preview}...`;
+                }
+                return "Listening";
+            case "processing":
+                if (this.activeAction === "edit") {
+                    if (this.editPreviewText) {
+                        const preview = this.formatPreviewText(this.editPreviewText);
+                        return `Editing ${preview}...`;
+                    }
+                    return "Editing...";
+                }
+                return "Transcribing...";
+            default:
+                return "";
+        }
+    }
+    getStatusClass() {
+        if (this.recordingState === "processing" && this.activeAction === "edit") {
+            return "editing";
+        }
+        return this.recordingState;
+    }
+    render() {
+        const showPulse = this.recordingState === "recording";
+        const statusLabel = this.getStatusLabel();
+        const showStatus = this.recordingState !== "idle";
+        const showCancel = this.recordingState === "connecting" ||
+            this.recordingState === "recording" ||
+            this.recordingState === "processing";
+        const showError = this.recordingState === "error" && this.errorMessage;
+        // Show close button in idle state (both solo mic and expanded)
+        const showClose = this.recordingState === "idle";
+        return b `
+      <div class="button-wrapper">
+        ${showPulse ? b `<div class="pulse-ring"></div>` : ""}
+        ${showError
+            ? b `
+              <div class="error-message ${showError ? "visible" : ""}">
+                ${this.errorMessage}
+                <button class="retry-button" @click="${this.handleRetry}">
+                  Retry Connection
+                </button>
+              </div>
+            `
+            : ""}
+
+        <button
+          class="${this.getButtonClass()}"
+          @click="${this.handleClick}"
+          aria-label="${this.getAriaLabel()}"
+          title="${this.getAriaLabel()}"
+          ?disabled="${this.recordingState === "connecting" ||
+            this.recordingState === "processing"}"
+        >
+          <span class="button-icon">${this.renderIcon()}</span>
+        </button>
+
+        <span
+          class="status-label ${showStatus
+            ? "visible"
+            : ""} ${this.getStatusClass()}"
+        >
+          ${statusLabel}
+        </span>
+
+        <button
+          class="close-button ${showClose ? "visible" : ""}"
+          @click="${this.handleClose}"
+          @mousedown="${this.stopEvent}"
+          aria-label="Close"
+          title="Close"
+        >
+          ${xIcon(12)}
+        </button>
+
+        <button
+          class="cancel-button ${showCancel ? "visible" : ""}"
+          @click="${this.handleCancel}"
+          @mousedown="${this.stopEvent}"
+          aria-label="Cancel"
+          title="Cancel"
+        >
+          ${xIcon(12)}
+        </button>
+      </div>
+    `;
+    }
+};
+__decorate([
+    n({ type: Boolean })
+], SpeechOSMicButton.prototype, "expanded", void 0);
+__decorate([
+    n({ type: String })
+], SpeechOSMicButton.prototype, "recordingState", void 0);
+__decorate([
+    n({ type: String })
+], SpeechOSMicButton.prototype, "activeAction", void 0);
+__decorate([
+    n({ type: String })
+], SpeechOSMicButton.prototype, "editPreviewText", void 0);
+__decorate([
+    n({ type: String })
+], SpeechOSMicButton.prototype, "errorMessage", void 0);
+SpeechOSMicButton = __decorate([
+    t$1("speechos-mic-button")
+], SpeechOSMicButton);
+
+/**
+ * Action bubbles component
+ * Displays available actions (Dictate, Edit) above the mic button
+ */
+let SpeechOSActionBubbles = class SpeechOSActionBubbles extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.visible = false;
+        this.actions = [
+            {
+                id: "dictate",
+                label: "Dictate",
+                icon: dictateIcon(),
+            },
+            {
+                id: "edit",
+                label: "Edit",
+                icon: editIcon(),
+            },
+        ];
+    }
+    static { this.styles = [
+        themeStyles,
+        animations,
+        i$4 `
+      :host {
+        display: block;
+      }
+
+      .bubbles-container {
+        display: flex;
+        gap: var(--speechos-spacing-sm);
+        margin-bottom: var(--speechos-spacing-md);
+        justify-content: center;
+      }
+
+      .action-button {
+        display: flex;
+        align-items: center;
+        gap: var(--speechos-spacing-xs);
+        padding: var(--speechos-spacing-sm) var(--speechos-spacing-md);
+        border: none;
+        border-radius: var(--speechos-radius-full);
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: 600;
+        color: white;
+        transition: all var(--speechos-transition-fast);
+        animation: speechos-slideUp var(--speechos-transition-base) ease-out;
+        white-space: nowrap;
+      }
+
+      /* Dictate button - Emerald (matches connecting state) */
+      .action-button.dictate {
+        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+      }
+
+      .action-button.dictate:hover {
+        background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
+        transform: translateY(-2px);
+        box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
+      }
+
+      /* Edit button - Purple (matches editing state) */
+      .action-button.edit {
+        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
+      }
+
+      .action-button.edit:hover {
+        background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
+        transform: translateY(-2px);
+        box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
+      }
+
+      .action-button:active {
+        transform: translateY(0);
+      }
+
+      .action-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+      }
+
+      /* Staggered animation delay */
+      .action-button:nth-child(1) {
+        animation-delay: 0ms;
+      }
+
+      .action-button:nth-child(2) {
+        animation-delay: 50ms;
+      }
+
+      .action-button:nth-child(3) {
+        animation-delay: 100ms;
+      }
+
+      .action-button:nth-child(4) {
+        animation-delay: 150ms;
+      }
+    `,
+    ]; }
+    handleActionClick(e, action) {
+        // Stop propagation to prevent bubbling issues
+        e.stopPropagation();
+        e.preventDefault();
+        events.emit("action:select", { action });
+        this.dispatchEvent(new CustomEvent("action-select", {
+            bubbles: true,
+            composed: true,
+            detail: { action },
+        }));
+    }
+    render() {
+        if (!this.visible) {
+            return b ``;
+        }
+        return b `
+      <div class="bubbles-container">
+        ${this.actions.map((action) => b `
+            <button
+              class="action-button ${action.id}"
+              @click="${(e) => this.handleActionClick(e, action.id)}"
+              aria-label="${action.label}"
+              title="${action.label}"
+            >
+              <span class="action-icon">${action.icon}</span>
+              <span>${action.label}</span>
+            </button>
+          `)}
+      </div>
+    `;
+    }
+};
+__decorate([
+    n({ type: Boolean })
+], SpeechOSActionBubbles.prototype, "visible", void 0);
+SpeechOSActionBubbles = __decorate([
+    t$1("speechos-action-bubbles")
+], SpeechOSActionBubbles);
+
+/**
+ * Settings button component
+ * A small gear icon button that opens the settings modal
+ */
+let SpeechOSSettingsButton = class SpeechOSSettingsButton extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.visible = false;
+    }
+    static { this.styles = [
+        themeStyles,
+        i$4 `
+      :host {
+        display: block;
+      }
+
+      .settings-button {
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        background: rgba(24, 24, 27, 0.8);
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        border: 1px solid rgba(63, 63, 70, 0.5);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: rgba(161, 161, 170, 1);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        transition: all 0.2s ease;
+        opacity: 0;
+        transform: scale(0.8);
+        pointer-events: none;
+      }
+
+      .settings-button.visible {
+        opacity: 1;
+        transform: scale(1);
+        pointer-events: auto;
+      }
+
+      .settings-button:hover {
+        background: rgba(39, 39, 42, 0.9);
+        border-color: rgba(63, 63, 70, 0.8);
+        color: rgba(250, 250, 250, 1);
+        transform: scale(1.05);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+      }
+
+      .settings-button:active {
+        transform: scale(0.95);
+      }
+    `,
+    ]; }
+    handleClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent("settings-click", {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return b `
+      <button
+        class="settings-button ${this.visible ? "visible" : ""}"
+        @click="${this.handleClick}"
+        aria-label="Settings"
+        title="Settings"
+      >
+        ${settingsIcon(14)}
+      </button>
+    `;
+    }
+};
+__decorate([
+    n({ type: Boolean })
+], SpeechOSSettingsButton.prototype, "visible", void 0);
+SpeechOSSettingsButton = __decorate([
+    t$1("speechos-settings-button")
+], SpeechOSSettingsButton);
+
+/**
+ * Settings modal component
+ * Displays transcript history, help, about, and settings in a tabbed interface
+ */
+let SpeechOSSettingsModal = class SpeechOSSettingsModal extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.activeTab = "transcripts";
+        this.transcripts = [];
+        this.tabs = [
+            { id: "transcripts", label: "History", icon: clipboardIcon(16) },
+            { id: "help", label: "Help", icon: helpCircleIcon(16) },
+            { id: "about", label: "About", icon: infoIcon(16) },
+            { id: "settings", label: "Settings", icon: settingsIcon(16) },
+        ];
+    }
+    static { this.styles = [
+        themeStyles,
+        i$4 `
+      :host {
+        /* Position at viewport level to escape widget positioning */
+        position: fixed;
+        inset: 0;
+        pointer-events: none;
+        z-index: calc(var(--speechos-z-base) + 100);
+      }
+
+      /* Overlay */
+      .modal-overlay {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: calc(var(--speechos-z-base) + 100);
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.2s ease;
+        pointer-events: none;
+      }
+
+      .modal-overlay.open {
+        opacity: 1;
+        visibility: visible;
+        pointer-events: auto;
+      }
+
+      /* Modal container */
+      .modal {
+        background: #1f2937;
+        border-radius: 12px;
+        width: 90%;
+        min-width: 360px;
+        max-width: 500px;
+        min-height: 450px;
+        max-height: 85vh;
+        display: flex;
+        flex-direction: column;
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+        transform: scale(0.95);
+        transition: transform 0.2s ease;
+        pointer-events: auto;
+      }
+
+      .modal-overlay.open .modal {
+        transform: scale(1);
+      }
+
+      /* Header */
+      .modal-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 16px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      }
+
+      .modal-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: white;
+        margin: 0;
+      }
+
+      .close-button {
+        width: 28px;
+        height: 28px;
+        border-radius: 6px;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: rgba(255, 255, 255, 0.6);
+        transition: all 0.15s ease;
+      }
+
+      .close-button:hover {
+        background: rgba(255, 255, 255, 0.1);
+        color: white;
+      }
+
+      /* Tabs */
+      .tabs {
+        display: flex;
+        gap: 2px;
+        padding: 8px 12px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        background: rgba(0, 0, 0, 0.2);
+      }
+
+      .tab {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 2px;
+        padding: 8px 4px;
+        border: none;
+        border-radius: 6px;
+        background: transparent;
+        cursor: pointer;
+        color: rgba(255, 255, 255, 0.5);
+        transition: all 0.15s ease;
+      }
+
+      .tab:hover {
+        background: rgba(255, 255, 255, 0.05);
+        color: rgba(255, 255, 255, 0.8);
+      }
+
+      .tab.active {
+        background: rgba(255, 255, 255, 0.1);
+        color: white;
+      }
+
+      .tab-label {
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+      /* Content */
+      .modal-content {
+        flex: 1;
+        overflow-y: auto;
+        padding: 16px;
+        min-height: 200px;
+      }
+
+      /* Transcripts tab */
+      .transcripts-list {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .transcript-item {
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 8px;
+        padding: 10px 12px;
+      }
+
+      .transcript-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 6px;
+      }
+
+      .transcript-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+        padding: 3px 8px;
+        border-radius: 4px;
+      }
+
+      .transcript-badge.dictate {
+        background: rgba(16, 185, 129, 0.2);
+        color: #34d399;
+      }
+
+      .transcript-badge.edit {
+        background: rgba(139, 92, 246, 0.2);
+        color: #a78bfa;
+      }
+
+      .transcript-time {
+        font-size: 13px;
+        color: rgba(255, 255, 255, 0.4);
+      }
+
+      .transcript-text {
+        font-size: 15px;
+        color: rgba(255, 255, 255, 0.9);
+        line-height: 1.5;
+        word-break: break-word;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      .transcript-actions {
+        display: flex;
+        gap: 8px;
+        margin-top: 8px;
+        padding-top: 8px;
+        border-top: 1px solid rgba(255, 255, 255, 0.05);
+      }
+
+      .transcript-action-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 10px;
+        border-radius: 4px;
+        background: rgba(255, 255, 255, 0.05);
+        border: none;
+        cursor: pointer;
+        font-size: 13px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.6);
+        transition: all 0.15s ease;
+      }
+
+      .transcript-action-btn:hover {
+        background: rgba(255, 255, 255, 0.1);
+        color: rgba(255, 255, 255, 0.9);
+      }
+
+      .transcript-action-btn.copied {
+        background: rgba(16, 185, 129, 0.2);
+        color: #34d399;
+        transform: scale(1.05);
+      }
+
+      .transcript-action-btn.delete:hover {
+        background: rgba(239, 68, 68, 0.15);
+        color: #f87171;
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 32px 16px;
+        color: rgba(255, 255, 255, 0.5);
+      }
+
+      .empty-state-icon {
+        margin-bottom: 12px;
+        opacity: 0.5;
+      }
+
+      .empty-state-title {
+        font-size: 16px;
+        font-weight: 500;
+        margin-bottom: 6px;
+        color: rgba(255, 255, 255, 0.7);
+      }
+
+      .empty-state-text {
+        font-size: 14px;
+      }
+
+      .clear-all-button {
+        display: block;
+        width: 100%;
+        margin-top: 16px;
+        padding: 10px;
+        background: rgba(239, 68, 68, 0.1);
+        border: 1px solid rgba(239, 68, 68, 0.2);
+        border-radius: 6px;
+        color: #f87171;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .clear-all-button:hover {
+        background: rgba(239, 68, 68, 0.2);
+        border-color: rgba(239, 68, 68, 0.3);
+      }
+
+      /* Help tab */
+      .help-section {
+        margin-bottom: 20px;
+      }
+
+      .help-section:last-child {
+        margin-bottom: 0;
+      }
+
+      .help-title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 16px;
+        font-weight: 600;
+        color: white;
+        margin-bottom: 10px;
+      }
+
+      .help-title.dictate {
+        color: #34d399;
+      }
+
+      .help-title.edit {
+        color: #a78bfa;
+      }
+
+      .help-text {
+        font-size: 15px;
+        color: rgba(255, 255, 255, 0.7);
+        line-height: 1.5;
+        margin-bottom: 10px;
+      }
+
+      .help-example {
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 6px;
+        padding: 12px 14px;
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.6);
+        font-style: italic;
+      }
+
+      /* About tab */
+      .about-logo {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 16px;
+      }
+
+      .about-logo-text {
+        font-size: 20px;
+        font-weight: 700;
+        color: white;
+      }
+
+      .about-description {
+        font-size: 15px;
+        color: rgba(255, 255, 255, 0.7);
+        line-height: 1.6;
+        margin-bottom: 20px;
+      }
+
+      .about-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 10px 14px;
+        background: var(--speechos-primary);
+        border-radius: 6px;
+        color: white;
+        font-size: 14px;
+        font-weight: 500;
+        text-decoration: none;
+        transition: all 0.15s ease;
+      }
+
+      .about-link:hover {
+        background: var(--speechos-primary-active);
+      }
+
+      .about-version {
+        margin-top: 20px;
+        font-size: 13px;
+        color: rgba(255, 255, 255, 0.4);
+      }
+
+      /* Settings tab */
+      .settings-placeholder {
+        text-align: center;
+        padding: 32px 16px;
+        color: rgba(255, 255, 255, 0.5);
+      }
+
+      .settings-placeholder-icon {
+        margin-bottom: 12px;
+        opacity: 0.5;
+      }
+
+      .settings-placeholder-text {
+        font-size: 15px;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.loadTranscripts();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has("open") && this.open) {
+            this.loadTranscripts();
+        }
+    }
+    loadTranscripts() {
+        this.transcripts = transcriptStore.getTranscripts();
+    }
+    handleOverlayClick(e) {
+        if (e.target === e.currentTarget) {
+            this.close();
+        }
+    }
+    handleClose() {
+        this.close();
+    }
+    close() {
+        this.dispatchEvent(new CustomEvent("modal-close", {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleTabClick(tabId) {
+        this.activeTab = tabId;
+        if (tabId === "transcripts") {
+            this.loadTranscripts();
+        }
+    }
+    handleDeleteTranscript(id) {
+        transcriptStore.deleteTranscript(id);
+        this.loadTranscripts();
+    }
+    handleClearAll() {
+        transcriptStore.clearTranscripts();
+        this.loadTranscripts();
+    }
+    async handleCopyTranscript(text, event) {
+        const button = event.currentTarget;
+        try {
+            await navigator.clipboard.writeText(text);
+        }
+        catch {
+            // Fallback for older browsers
+            const textarea = document.createElement("textarea");
+            textarea.value = text;
+            textarea.style.position = "fixed";
+            textarea.style.opacity = "0";
+            document.body.appendChild(textarea);
+            textarea.select();
+            document.execCommand("copy");
+            document.body.removeChild(textarea);
+        }
+        // Show copied feedback
+        button.classList.add("copied");
+        button.textContent = "Copied!";
+        setTimeout(() => {
+            button.classList.remove("copied");
+            this.requestUpdate(); // Re-render to restore button content
+        }, 1000);
+    }
+    formatTime(timestamp) {
+        const date = new Date(timestamp);
+        const now = new Date();
+        const diffMs = now.getTime() - date.getTime();
+        const diffMins = Math.floor(diffMs / 60000);
+        const diffHours = Math.floor(diffMs / 3600000);
+        const diffDays = Math.floor(diffMs / 86400000);
+        if (diffMins < 1)
+            return "Just now";
+        if (diffMins < 60)
+            return `${diffMins}m ago`;
+        if (diffHours < 24)
+            return `${diffHours}h ago`;
+        if (diffDays < 7)
+            return `${diffDays}d ago`;
+        return date.toLocaleDateString();
+    }
+    renderTranscriptsTab() {
+        if (this.transcripts.length === 0) {
+            return b `
+        <div class="empty-state">
+          <div class="empty-state-icon">${clipboardIcon(40)}</div>
+          <div class="empty-state-title">No transcripts yet</div>
+          <div class="empty-state-text">
+            Your dictation and edit history will appear here.
+          </div>
+        </div>
+      `;
+        }
+        return b `
+      <div class="transcripts-list">
+        ${this.transcripts.map((t) => b `
+            <div class="transcript-item">
+              <div class="transcript-header">
+                <span class="transcript-badge ${t.action}">
+                  ${t.action === "dictate" ? dictateIcon(14) : editIcon(14)}
+                  ${t.action}
+                </span>
+                <span class="transcript-time"
+                  >${this.formatTime(t.timestamp)}</span
+                >
+              </div>
+              <div class="transcript-text">${t.text}</div>
+              <div class="transcript-actions">
+                <button
+                  class="transcript-action-btn copy"
+                  @click="${(e) => this.handleCopyTranscript(t.text, e)}"
+                >
+                  ${copyIcon(14)} Copy
+                </button>
+                <button
+                  class="transcript-action-btn delete"
+                  @click="${() => this.handleDeleteTranscript(t.id)}"
+                >
+                  ${trashIcon(14)} Delete
+                </button>
+              </div>
+            </div>
+          `)}
+      </div>
+      <button class="clear-all-button" @click="${this.handleClearAll}">
+        Clear All History
+      </button>
+    `;
+    }
+    renderHelpTab() {
+        return b `
+      <div class="help-section">
+        <div class="help-title dictate">${dictateIcon(18)} Dictate</div>
+        <div class="help-text">
+          Speak naturally and your words will be transcribed into text. Perfect
+          for notes, messages, and documents.
+        </div>
+        <div class="help-example">
+          "Hello, this is a test of the dictation feature."
+        </div>
+      </div>
+
+      <div class="help-section">
+        <div class="help-title edit">${editIcon(18)} Edit</div>
+        <div class="help-text">
+          Select text first, then use your voice to describe how to change it.
+          Great for rewriting, formatting, or fixing text.
+        </div>
+        <div class="help-example">
+          "Make this more formal" or "Fix the grammar"
+        </div>
+      </div>
+    `;
+    }
+    renderAboutTab() {
+        return b `
+      <div class="about-logo">
+        <div class="about-logo-text">SpeechOS</div>
+      </div>
+      <div class="about-description">
+        SpeechOS is a voice-to-text SDK that enables voice input for web
+        applications. Speak instead of type to save time on text entry and
+        editing tasks.
+      </div>
+      <a
+        href="https://speechos.io"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="about-link"
+      >
+        Visit SpeechOS ${externalLinkIcon(14)}
+      </a>
+      <div class="about-version">Version 0.1.0</div>
+    `;
+    }
+    renderSettingsTab() {
+        return b `
+      <div class="settings-placeholder">
+        <div class="settings-placeholder-icon">${settingsIcon(40)}</div>
+        <div class="settings-placeholder-text">Settings coming soon</div>
+      </div>
+    `;
+    }
+    renderTabContent() {
+        switch (this.activeTab) {
+            case "transcripts":
+                return this.renderTranscriptsTab();
+            case "help":
+                return this.renderHelpTab();
+            case "about":
+                return this.renderAboutTab();
+            case "settings":
+                return this.renderSettingsTab();
+        }
+    }
+    render() {
+        return b `
+      <div
+        class="modal-overlay ${this.open ? "open" : ""}"
+        @click="${this.handleOverlayClick}"
+      >
+        <div class="modal">
+          <div class="modal-header">
+            <h2 class="modal-title">SpeechOS</h2>
+            <button
+              class="close-button"
+              @click="${this.handleClose}"
+              aria-label="Close"
+            >
+              ${xIcon(16)}
+            </button>
+          </div>
+
+          <div class="tabs">
+            ${this.tabs.map((tab) => b `
+                <button
+                  class="tab ${this.activeTab === tab.id ? "active" : ""}"
+                  @click="${() => this.handleTabClick(tab.id)}"
+                >
+                  ${tab.icon}
+                  <span class="tab-label">${tab.label}</span>
+                </button>
+              `)}
+          </div>
+
+          <div class="modal-content">${this.renderTabContent()}</div>
+        </div>
+      </div>
+    `;
+    }
 };
+__decorate([
+    n({ type: Boolean })
+], SpeechOSSettingsModal.prototype, "open", void 0);
+__decorate([
+    r()
+], SpeechOSSettingsModal.prototype, "activeTab", void 0);
+__decorate([
+    r()
+], SpeechOSSettingsModal.prototype, "transcripts", void 0);
+SpeechOSSettingsModal = __decorate([
+    t$1("speechos-settings-modal")
+], SpeechOSSettingsModal);
+
+/**
+ * Main widget container component
+ * Composes mic button and action bubbles with state management
+ */
+var SpeechOSWidget_1;
+let SpeechOSWidget = class SpeechOSWidget extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.widgetState = state.getState();
+        this.settingsOpen = false;
+        this.dictationTargetElement = null;
+        this.editTargetElement = null;
+        this.dictationCursorStart = null;
+        this.dictationCursorEnd = null;
+        this.editSelectionStart = null;
+        this.editSelectionEnd = null;
+        this.editSelectedText = "";
+        this.boundClickOutsideHandler = null;
+        this.modalElement = null;
+        this.customPosition = null;
+        this.isDragging = false;
+        this.dragStartPos = null;
+        this.dragOffset = { x: 0, y: 0 };
+        this.boundDragMove = null;
+        this.boundDragEnd = null;
+        this.suppressNextClick = false;
+    }
+    static { SpeechOSWidget_1 = this; }
+    static { this.styles = [
+        themeStyles,
+        animations,
+        i$4 `
+      :host {
+        position: fixed;
+        bottom: 8px;
+        z-index: var(--speechos-z-base);
+        pointer-events: none;
+      }
+
+      :host([position="bottom-center"]) {
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      :host([position="bottom-right"]) {
+        right: var(--speechos-spacing-xl);
+      }
+
+      :host([position="bottom-left"]) {
+        left: var(--speechos-spacing-xl);
+      }
 
-//#endregion
-//#region src/index.ts
+      :host(.custom-position) {
+        right: unset;
+        transform: translateX(-50%);
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+
+      .widget-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        pointer-events: auto;
+        animation: speechos-fadeIn var(--speechos-transition-base);
+        cursor: grab;
+      }
+
+      .widget-container:active {
+        cursor: grabbing;
+      }
+
+      .widget-container.hiding {
+        animation: speechos-fadeOut var(--speechos-transition-base);
+      }
+
+      .settings-button-container {
+        margin-top: var(--speechos-spacing-md);
+      }
+    `,
+    ]; }
+    static { this.DRAG_THRESHOLD = 5; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.modalElement = document.createElement("speechos-settings-modal");
+        this.modalElement.addEventListener("modal-close", () => {
+            this.settingsOpen = false;
+        });
+        document.body.appendChild(this.modalElement);
+        this.stateUnsubscribe = state.subscribe((newState) => {
+            if (!newState.isVisible || !newState.isExpanded) {
+                this.settingsOpen = false;
+            }
+            this.widgetState = newState;
+            this.updatePosition();
+        });
+        this.errorEventUnsubscribe = events.on("error", (payload) => {
+            if (this.widgetState.recordingState !== "idle" &&
+                this.widgetState.recordingState !== "error") {
+                state.setError(payload.message);
+                livekit.disconnect().catch(() => { });
+            }
+        });
+        this.updatePosition();
+        this.boundClickOutsideHandler = this.handleClickOutside.bind(this);
+        document.addEventListener("click", this.boundClickOutsideHandler, true);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.modalElement) {
+            this.modalElement.remove();
+            this.modalElement = null;
+        }
+        if (this.stateUnsubscribe) {
+            this.stateUnsubscribe();
+        }
+        if (this.errorEventUnsubscribe) {
+            this.errorEventUnsubscribe();
+        }
+        if (this.boundClickOutsideHandler) {
+            document.removeEventListener("click", this.boundClickOutsideHandler, true);
+            this.boundClickOutsideHandler = null;
+        }
+        if (this.boundDragMove) {
+            document.removeEventListener("mousemove", this.boundDragMove);
+            this.boundDragMove = null;
+        }
+        if (this.boundDragEnd) {
+            document.removeEventListener("mouseup", this.boundDragEnd);
+            this.boundDragEnd = null;
+        }
+    }
+    updated(changedProperties) {
+        if (changedProperties.has("settingsOpen") && this.modalElement) {
+            this.modalElement.open = this.settingsOpen;
+        }
+    }
+    handleClickOutside(event) {
+        if (!this.widgetState.isExpanded || this.widgetState.recordingState !== "idle") {
+            return;
+        }
+        const target = event.target;
+        const composedPath = event.composedPath ? event.composedPath() : [];
+        const clickedInWidget = this.contains(target) || composedPath.includes(this);
+        const clickedInModal = this.modalElement && (this.modalElement.contains(target) || composedPath.includes(this.modalElement));
+        if (this.settingsOpen && clickedInModal) {
+            return;
+        }
+        if (this.settingsOpen && !clickedInModal) {
+            this.settingsOpen = false;
+            return;
+        }
+        if (!clickedInWidget && this.isFormField(target)) {
+            state.setFocusedElement(target);
+            return;
+        }
+        if (!clickedInWidget) {
+            state.hide();
+        }
+    }
+    isFormField(element) {
+        if (!element || !(element instanceof HTMLElement)) {
+            return false;
+        }
+        const tagName = element.tagName.toLowerCase();
+        if (tagName === "input" || tagName === "textarea") {
+            if (tagName === "input") {
+                const type = element.type.toLowerCase();
+                const excludedTypes = ["checkbox", "radio", "submit", "button", "reset", "file", "hidden"];
+                if (excludedTypes.includes(type)) {
+                    return false;
+                }
+            }
+            return true;
+        }
+        if (element.isContentEditable || element.getAttribute("contenteditable") === "true") {
+            return true;
+        }
+        return false;
+    }
+    updatePosition() {
+        const config = getConfig();
+        this.setAttribute("position", config.position);
+        this.style.zIndex = String(config.zIndex);
+    }
+    handleMicClick() {
+        if (this.suppressNextClick) {
+            this.suppressNextClick = false;
+            return;
+        }
+        if (this.widgetState.recordingState === "idle") {
+            const wasExpanded = this.widgetState.isExpanded;
+            state.toggleExpanded();
+            if (!wasExpanded) {
+                livekit.preWarm().catch(() => { });
+            }
+        }
+    }
+    async handleStopRecording() {
+        if (this.widgetState.activeAction === "edit") {
+            await this.handleStopEdit();
+        }
+        else {
+            state.stopRecording();
+            getConfig();
+            try {
+                const transcription = await this.withMinDisplayTime(livekit.stopVoiceSession(), 300);
+                if (transcription) {
+                    this.insertTranscription(transcription);
+                    transcriptStore.saveTranscript(transcription, "dictate");
+                }
+                state.completeRecording();
+                events.emit("action:select", { action: "dictate" });
+                livekit.disconnect().catch(() => { });
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : "Failed to transcribe audio";
+                if (errorMessage !== "Disconnected") {
+                    state.setError(errorMessage);
+                    livekit.disconnect().catch(() => { });
+                }
+            }
+        }
+    }
+    async handleCancelOperation() {
+        await livekit.disconnect();
+        if (this.widgetState.recordingState === "error") {
+            state.clearError();
+        }
+        else {
+            state.cancelRecording();
+        }
+        this.dictationTargetElement = null;
+        this.editTargetElement = null;
+        this.dictationCursorStart = null;
+        this.dictationCursorEnd = null;
+        this.editSelectionStart = null;
+        this.editSelectionEnd = null;
+        this.editSelectedText = "";
+    }
+    async handleRetryConnection() {
+        const action = this.widgetState.activeAction;
+        state.clearError();
+        if (action === "edit") {
+            await this.startEdit();
+        }
+        else {
+            await this.startDictation();
+        }
+    }
+    handleCloseWidget() {
+        state.hide();
+    }
+    handleSettingsClick() {
+        this.settingsOpen = true;
+    }
+    handleDragStart(e) {
+        if (e.button !== 0)
+            return;
+        const composedPath = e.composedPath();
+        const isInteractiveElement = composedPath.some((el) => {
+            if (!(el instanceof HTMLElement))
+                return false;
+            const tagName = el.tagName.toLowerCase();
+            if (tagName === "speechos-action-bubbles" || tagName === "speechos-settings-button") {
+                return true;
+            }
+            if (tagName === "button") {
+                const className = el.className || "";
+                if (!className.includes("mic-button")) {
+                    return true;
+                }
+            }
+            return false;
+        });
+        if (isInteractiveElement)
+            return;
+        this.dragStartPos = { x: e.clientX, y: e.clientY };
+        this.isDragging = false;
+        const rect = this.getBoundingClientRect();
+        this.dragOffset = {
+            x: e.clientX - rect.left - rect.width / 2,
+            y: rect.bottom - e.clientY,
+        };
+        this.boundDragMove = this.handleDragMove.bind(this);
+        this.boundDragEnd = this.handleDragEnd.bind(this);
+        document.addEventListener("mousemove", this.boundDragMove);
+        document.addEventListener("mouseup", this.boundDragEnd);
+    }
+    handleDragMove(e) {
+        if (!this.isDragging && this.dragStartPos) {
+            const dx = e.clientX - this.dragStartPos.x;
+            const dy = e.clientY - this.dragStartPos.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (distance >= SpeechOSWidget_1.DRAG_THRESHOLD) {
+                this.isDragging = true;
+                e.preventDefault();
+            }
+            else {
+                return;
+            }
+        }
+        if (!this.isDragging)
+            return;
+        e.preventDefault();
+        this.customPosition = {
+            x: e.clientX - this.dragOffset.x,
+            y: window.innerHeight - e.clientY - this.dragOffset.y,
+        };
+        this.applyCustomPosition();
+    }
+    handleDragEnd() {
+        if (this.isDragging) {
+            this.suppressNextClick = true;
+        }
+        this.isDragging = false;
+        this.dragStartPos = null;
+        if (this.boundDragMove) {
+            document.removeEventListener("mousemove", this.boundDragMove);
+            this.boundDragMove = null;
+        }
+        if (this.boundDragEnd) {
+            document.removeEventListener("mouseup", this.boundDragEnd);
+            this.boundDragEnd = null;
+        }
+    }
+    applyCustomPosition() {
+        if (this.customPosition) {
+            this.classList.add("custom-position");
+            this.style.left = `${this.customPosition.x}px`;
+            this.style.bottom = `${this.customPosition.y}px`;
+        }
+    }
+    insertTranscription(text) {
+        const target = this.dictationTargetElement;
+        if (!target) {
+            return;
+        }
+        const tagName = target.tagName.toLowerCase();
+        if (tagName === "input" || tagName === "textarea") {
+            const inputEl = target;
+            const start = this.dictationCursorStart ?? inputEl.value.length;
+            const end = this.dictationCursorEnd ?? inputEl.value.length;
+            const before = inputEl.value.substring(0, start);
+            const after = inputEl.value.substring(end);
+            inputEl.value = before + text + after;
+            if (this.supportsSelection(inputEl)) {
+                const newCursorPos = start + text.length;
+                inputEl.setSelectionRange(newCursorPos, newCursorPos);
+            }
+            inputEl.dispatchEvent(new Event("input", { bubbles: true }));
+            inputEl.focus();
+            state.setFocusedElement(inputEl);
+        }
+        else if (target.isContentEditable) {
+            target.focus();
+            state.setFocusedElement(target);
+            const textNode = document.createTextNode(text);
+            target.appendChild(textNode);
+            const selection = window.getSelection();
+            if (selection) {
+                const range = document.createRange();
+                range.selectNodeContents(textNode);
+                range.collapse(false);
+                selection.removeAllRanges();
+                selection.addRange(range);
+            }
+            target.dispatchEvent(new Event("input", { bubbles: true }));
+        }
+        events.emit("transcription:inserted", { text, element: target });
+        this.dictationTargetElement = null;
+        this.dictationCursorStart = null;
+        this.dictationCursorEnd = null;
+    }
+    handleActionSelect(event) {
+        const { action } = event.detail;
+        state.setActiveAction(action);
+        if (action === "dictate") {
+            this.startDictation();
+        }
+        else if (action === "edit") {
+            this.startEdit();
+        }
+        else {
+            setTimeout(() => {
+                state.setState({ isExpanded: false, activeAction: null });
+            }, 300);
+        }
+    }
+    async withMinDisplayTime(operation, minTime) {
+        const [result] = await Promise.all([operation, new Promise((resolve) => setTimeout(resolve, minTime))]);
+        return result;
+    }
+    async startDictation() {
+        this.dictationTargetElement = this.widgetState.focusedElement;
+        this.dictationCursorStart = null;
+        this.dictationCursorEnd = null;
+        if (this.dictationTargetElement) {
+            const tagName = this.dictationTargetElement.tagName.toLowerCase();
+            if (tagName === "input" || tagName === "textarea") {
+                const inputEl = this.dictationTargetElement;
+                if (this.supportsSelection(inputEl)) {
+                    this.dictationCursorStart = inputEl.selectionStart;
+                    this.dictationCursorEnd = inputEl.selectionEnd;
+                }
+                else {
+                    this.dictationCursorStart = inputEl.value.length;
+                    this.dictationCursorEnd = inputEl.value.length;
+                }
+            }
+        }
+        state.startRecording();
+        try {
+            await livekit.startVoiceSession();
+            state.setRecordingState("recording");
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "Connection failed";
+            if (errorMessage !== "Disconnected") {
+                state.setError(`Failed to connect: ${errorMessage}`);
+                await livekit.disconnect();
+            }
+        }
+    }
+    async startEdit() {
+        this.editTargetElement = this.widgetState.focusedElement;
+        this.editSelectionStart = null;
+        this.editSelectionEnd = null;
+        this.editSelectedText = "";
+        if (this.editTargetElement) {
+            const tagName = this.editTargetElement.tagName.toLowerCase();
+            if (tagName === "input" || tagName === "textarea") {
+                const inputEl = this.editTargetElement;
+                if (this.supportsSelection(inputEl)) {
+                    this.editSelectionStart = inputEl.selectionStart;
+                    this.editSelectionEnd = inputEl.selectionEnd;
+                    const start = this.editSelectionStart ?? 0;
+                    const end = this.editSelectionEnd ?? 0;
+                    if (start !== end) {
+                        this.editSelectedText = inputEl.value.substring(start, end);
+                    }
+                }
+                else {
+                    this.editSelectionStart = 0;
+                    this.editSelectionEnd = 0;
+                }
+            }
+            else if (this.editTargetElement.isContentEditable) {
+                const selection = window.getSelection();
+                if (selection && selection.rangeCount > 0) {
+                    const selectedText = selection.toString();
+                    this.editSelectionStart = 0;
+                    this.editSelectionEnd = selectedText.length;
+                    this.editSelectedText = selectedText;
+                }
+            }
+        }
+        state.startRecording();
+        try {
+            await livekit.startVoiceSession();
+            state.setRecordingState("recording");
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "Connection failed";
+            if (errorMessage !== "Disconnected") {
+                state.setError(`Failed to connect: ${errorMessage}`);
+                await livekit.disconnect();
+            }
+        }
+    }
+    async handleStopEdit() {
+        state.stopRecording();
+        const originalContent = this.getElementContent(this.editTargetElement);
+        try {
+            const editedText = await this.withMinDisplayTime(livekit.requestEditText(originalContent), 300);
+            this.applyEdit(editedText);
+            livekit.disconnect().catch(() => { });
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "Failed to apply edit";
+            if (errorMessage !== "Disconnected") {
+                state.setError(errorMessage);
+                livekit.disconnect().catch(() => { });
+            }
+        }
+    }
+    supportsSelection(element) {
+        if (element.tagName.toLowerCase() === "textarea") {
+            return true;
+        }
+        const supportedTypes = ["text", "search", "url", "tel", "password"];
+        return supportedTypes.includes(element.type || "text");
+    }
+    getElementContent(element) {
+        if (!element) {
+            return "";
+        }
+        const tagName = element.tagName.toLowerCase();
+        if (tagName === "input" || tagName === "textarea") {
+            const inputEl = element;
+            const fullContent = inputEl.value;
+            const start = this.editSelectionStart ?? 0;
+            const end = this.editSelectionEnd ?? fullContent.length;
+            const hasSelection = start !== end;
+            if (hasSelection) {
+                return fullContent.substring(start, end);
+            }
+            return fullContent;
+        }
+        else if (element.isContentEditable) {
+            const selection = window.getSelection();
+            if (selection && selection.toString().length > 0) {
+                return selection.toString();
+            }
+            return element.textContent || "";
+        }
+        return "";
+    }
+    applyEdit(editedText) {
+        const target = this.editTargetElement;
+        if (!target) {
+            state.completeRecording();
+            return;
+        }
+        const tagName = target.tagName.toLowerCase();
+        let originalContent = "";
+        if (tagName === "input" || tagName === "textarea") {
+            const inputEl = target;
+            originalContent = inputEl.value;
+            inputEl.focus();
+            if (this.supportsSelection(inputEl)) {
+                const selectionStart = this.editSelectionStart ?? 0;
+                const selectionEnd = this.editSelectionEnd ?? inputEl.value.length;
+                const hasSelection = selectionStart !== selectionEnd;
+                if (hasSelection) {
+                    inputEl.setSelectionRange(selectionStart, selectionEnd);
+                }
+                else {
+                    inputEl.setSelectionRange(0, inputEl.value.length);
+                }
+                document.execCommand("insertText", false, editedText);
+            }
+            else {
+                inputEl.value = editedText;
+                inputEl.dispatchEvent(new Event("input", { bubbles: true }));
+            }
+            state.setFocusedElement(inputEl);
+        }
+        else if (target.isContentEditable) {
+            originalContent = target.textContent || "";
+            target.focus();
+            state.setFocusedElement(target);
+            const hasSelection = this.editSelectionStart !== null && this.editSelectionEnd !== null && this.editSelectionStart !== this.editSelectionEnd;
+            if (!hasSelection) {
+                const selection = window.getSelection();
+                const range = document.createRange();
+                range.selectNodeContents(target);
+                selection?.removeAllRanges();
+                selection?.addRange(range);
+            }
+            document.execCommand("insertText", false, editedText);
+        }
+        transcriptStore.saveTranscript(editedText, "edit", originalContent);
+        events.emit("edit:applied", { originalContent, editedContent: editedText, element: target });
+        state.completeRecording();
+        this.editTargetElement = null;
+        this.editSelectionStart = null;
+        this.editSelectionEnd = null;
+        this.editSelectedText = "";
+    }
+    render() {
+        if (!this.widgetState.isVisible) {
+            this.setAttribute("hidden", "");
+            return b ``;
+        }
+        this.removeAttribute("hidden");
+        const showBubbles = this.widgetState.isExpanded && this.widgetState.recordingState === "idle";
+        return b `
+      <div class="widget-container" @mousedown="${this.handleDragStart}">
+        <speechos-action-bubbles ?visible="${showBubbles}" @action-select="${this.handleActionSelect}"></speechos-action-bubbles>
+        <speechos-mic-button
+          ?expanded="${this.widgetState.isExpanded}"
+          recordingState="${this.widgetState.recordingState}"
+          activeAction="${this.widgetState.activeAction || ""}"
+          editPreviewText="${this.editSelectedText}"
+          errorMessage="${this.widgetState.errorMessage || ""}"
+          @mic-click="${this.handleMicClick}"
+          @stop-recording="${this.handleStopRecording}"
+          @cancel-operation="${this.handleCancelOperation}"
+          @retry-connection="${this.handleRetryConnection}"
+          @close-widget="${this.handleCloseWidget}"
+        ></speechos-mic-button>
+        <div class="settings-button-container">
+          <speechos-settings-button ?visible="${showBubbles}" @settings-click="${this.handleSettingsClick}"></speechos-settings-button>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    r()
+], SpeechOSWidget.prototype, "widgetState", void 0);
+__decorate([
+    r()
+], SpeechOSWidget.prototype, "settingsOpen", void 0);
+SpeechOSWidget = SpeechOSWidget_1 = __decorate([
+    t$1("speechos-widget")
+], SpeechOSWidget);
+
+/**
+ * Main SpeechOS Client SDK class
+ * Composes core logic with UI components
+ */
+/**
+ * Main SpeechOS class for initializing and managing the SDK with UI
+ */
+class SpeechOS {
+    static { this.instance = null; }
+    static { this.widgetElement = null; }
+    static { this.isInitialized = false; }
+    /**
+     * Initialize the SpeechOS SDK
+     * @param config - Configuration options
+     * @returns Promise that resolves when initialization is complete
+     * @throws Error if configuration is invalid (e.g., missing apiKey)
+     */
+    static async init(config = {}) {
+        if (this.isInitialized) {
+            console.warn("SpeechOS is already initialized");
+            return;
+        }
+        try {
+            // Validate and set configuration
+            setConfig(config);
+        }
+        catch (error) {
+            // Configuration errors are fatal - log and re-throw
+            const errorMessage = error instanceof Error ? error.message : "Invalid configuration";
+            console.error(`[SpeechOS] Error: ${errorMessage} (init_config)`);
+            // Emit error event before throwing
+            events.emit("error", {
+                code: "init_config",
+                message: errorMessage,
+                source: "init",
+            });
+            throw error;
+        }
+        const finalConfig = getConfig();
+        // Create singleton instance
+        this.instance = new SpeechOS();
+        // Fetch LiveKit token
+        try {
+            if (finalConfig.debug) {
+                console.log("[SpeechOS] Fetching LiveKit token...");
+            }
+            await livekit.fetchToken();
+            if (finalConfig.debug) {
+                console.log("[SpeechOS] LiveKit token fetched successfully");
+            }
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "Failed to fetch token";
+            console.error(`[SpeechOS] Error: ${errorMessage} (init_token_fetch)`);
+            // Emit error event for consumers
+            events.emit("error", {
+                code: "init_token_fetch",
+                message: errorMessage,
+                source: "init",
+            });
+            // Continue initialization even if token fetch fails
+            // The token will be fetched again when needed
+        }
+        // Start form detection
+        formDetector.start();
+        // Create and mount widget
+        this.mountWidget();
+        this.isInitialized = true;
+        // Log initialization in debug mode
+        if (finalConfig.debug) {
+            console.log("[SpeechOS] Initialized with config:", finalConfig);
+        }
+    }
+    /**
+     * Destroy the SpeechOS SDK and clean up resources
+     */
+    static async destroy() {
+        if (!this.isInitialized) {
+            console.warn("SpeechOS is not initialized");
+            return;
+        }
+        // Stop form detection
+        formDetector.stop();
+        // Disconnect from LiveKit (also clears token)
+        await livekit.disconnect();
+        // Remove widget from DOM
+        this.unmountWidget();
+        // Clear all event listeners
+        events.clear();
+        // Reset state
+        state.reset();
+        // Clear instance
+        this.instance = null;
+        this.isInitialized = false;
+        const config = getConfig();
+        if (config.debug) {
+            console.log("[SpeechOS] Destroyed and cleaned up");
+        }
+    }
+    /**
+     * Check if SpeechOS is initialized
+     */
+    static get initialized() {
+        return this.isInitialized;
+    }
+    /**
+     * Get the current state
+     */
+    static getState() {
+        return state.getState();
+    }
+    /**
+     * Get the event emitter for external listeners
+     */
+    static get events() {
+        return events;
+    }
+    /**
+     * Mount the widget to the DOM
+     */
+    static mountWidget() {
+        if (this.widgetElement) {
+            console.warn("Widget is already mounted");
+            return;
+        }
+        // Create widget element
+        const widget = document.createElement("speechos-widget");
+        this.widgetElement = widget;
+        // Append to body
+        document.body.appendChild(widget);
+    }
+    /**
+     * Unmount the widget from the DOM
+     */
+    static unmountWidget() {
+        if (this.widgetElement) {
+            this.widgetElement.remove();
+            this.widgetElement = null;
+        }
+    }
+    /**
+     * Show the widget programmatically
+     */
+    static show() {
+        state.show();
+    }
+    /**
+     * Hide the widget programmatically
+     */
+    static hide() {
+        state.hide();
+    }
+    /**
+     * Identify the current user
+     * Can be called after init() to associate sessions with a user identifier.
+     * Clears the cached token so the next voice session uses the new userId.
+     *
+     * @param userId - User identifier from your system (e.g., user ID, email)
+     *
+     * @example
+     * // Initialize SDK early
+     * SpeechOS.init({ apiKey: 'xxx' });
+     *
+     * // Later, after user logs in
+     * SpeechOS.identify('user_123');
+     */
+    static identify(userId) {
+        if (!this.isInitialized) {
+            console.warn("SpeechOS.identify() called before init(). Call init() first.");
+            return;
+        }
+        const config = getConfig();
+        // Update the userId in config
+        updateUserId(userId);
+        // Clear cached token so next session gets a fresh one with the new userId
+        livekit.clearToken();
+        if (config.debug) {
+            console.log(`[SpeechOS] User identified: ${userId}`);
+        }
+    }
+    /**
+     * Private constructor to prevent direct instantiation
+     */
+    constructor() {
+        // Singleton pattern - use SpeechOS.init() instead
+    }
+}
+
+/**
+ * @speechos/client
+ *
+ * Vanilla JS client SDK for embedding SpeechOS into web applications.
+ * Includes Web Components UI and DOM-based form detection.
+ */
+// Version
 const VERSION = "0.1.0";
-var src_default = SpeechOS;
 
-//#endregion
-export { DEFAULT_HOST, FormDetector, SpeechOS, VERSION, src_default as default, events, formDetector, getConfig, livekit, resetConfig, setConfig, state, transcriptStore };
-//# sourceMappingURL=index.js.map
+export { FormDetector, SpeechOS, VERSION, SpeechOS as default, formDetector };
+//# sourceMappingURL=index.js.map