@corti/dictation-web 0.0.0-test.562 → 0.0.0-test.571.1

package/dist/bundle.js

@@ -811,6 +811,7 @@ var DEFAULT_DICTATION_CONFIG = {
   primaryLanguage: "en",
   spokenPunctuation: true
 };
+var AUDIO_CHUNK_INTERVAL_MS = 250;
 
 // dist/utils/converters.js
 var commaSeparatedConverter = {
@@ -960,37 +961,37 @@ function c5({ context: c6, subscribe: e10 }) {
   };
 }
 
-// dist/styles/ComponentStyles.js
-var ComponentStyles = i`
-  .wrapper {
-    background-color: var(--card-background, light-dark(#fff, #333));
-    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));
-    border-radius: var(--card-border-radius, 8px);
-    box-shadow: var(--card-box-shadow, 0 2px 5px rgba(0, 0, 0, 0.1));
-    padding: var(--card-padding, 4px);
-    display: flex;
-    gap: 4px;
-    height: 46px;
-    width: fit-content;
-    box-sizing: border-box;
-    overflow: hidden;
+// dist/utils/devices.js
+async function requestMicAccess() {
+  if (!navigator.permissions) {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    stream.getTracks().forEach((track) => {
+      track.stop();
+    });
+    return;
   }
-`;
-var ComponentStyles_default = ComponentStyles;
-
-// dist/utils/auth.js
-async function getInitialToken(config) {
-  const initialToken = "accessToken" in config ? {
-    accessToken: config.accessToken,
-    refreshToken: config.refreshToken
-  } : await config.refreshAccessToken();
-  if (!initialToken?.accessToken || typeof initialToken.accessToken !== "string") {
-    throw new Error("Access token is required and must be a string");
+  const permissionStatus = await navigator.permissions.query({
+    name: "microphone"
+  });
+  if (permissionStatus.state === "denied") {
+    throw new Error("Microphone permission is denied");
   }
-  return {
-    accessToken: initialToken.accessToken,
-    refreshToken: initialToken.refreshToken
-  };
+  if (permissionStatus.state === "prompt") {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    stream.getTracks().forEach((track) => {
+      track.stop();
+    });
+  }
+}
+async function getAudioDevices() {
+  if (!navigator.mediaDevices?.enumerateDevices) {
+    throw new Error("MediaDevices API is not available");
+  }
+  await requestMicAccess();
+  const devices = await navigator.mediaDevices.enumerateDevices();
+  const audioDevices = devices.filter((device) => device.kind === "audioinput");
+  const defaultDevice = audioDevices.length > 0 ? audioDevices[0] : void 0;
+  return { defaultDevice, devices: audioDevices };
 }
 
 // dist/utils/events.js
@@ -1078,6 +1079,331 @@ function networkActivityEvent(direction, data) {
     detail: { data, direction }
   });
 }
+function modeChangedEvent(mode) {
+  return new CustomEvent("mode-changed", {
+    bubbles: true,
+    composed: true,
+    detail: { mode }
+  });
+}
+function keybindingChangedEvent(key, code) {
+  return new CustomEvent("keybinding-changed", {
+    bubbles: true,
+    composed: true,
+    detail: { code, key }
+  });
+}
+function keybindingActivatedEvent(keyboardEvent) {
+  return new CustomEvent("keybinding-activated", {
+    bubbles: true,
+    cancelable: true,
+    composed: true,
+    detail: { keyboardEvent }
+  });
+}
+
+// dist/controllers/devices-controller.js
+var __classPrivateFieldSet = function(receiver, state, value, kind, f5) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f5) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f5 : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return kind === "a" ? f5.call(receiver, value) : f5 ? f5.value = value : state.set(receiver, value), value;
+};
+var __classPrivateFieldGet = function(receiver, state, kind, f5) {
+  if (kind === "a" && !f5) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f5 : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f5 : kind === "a" ? f5.call(receiver) : f5 ? f5.value : state.get(receiver);
+};
+var _DevicesController_instances;
+var _DevicesController_autoLoadedDevices;
+var _DevicesController_loadingDevices;
+var _DevicesController_deviceChangeHandler;
+var _DevicesController_initialized;
+var _DevicesController_setupDeviceChangeListener;
+var _DevicesController_removeDeviceChangeListener;
+var _DevicesController_loadDevices;
+var DevicesController = class {
+  constructor(host) {
+    _DevicesController_instances.add(this);
+    _DevicesController_autoLoadedDevices.set(this, false);
+    _DevicesController_loadingDevices.set(this, false);
+    _DevicesController_deviceChangeHandler.set(this, void 0);
+    _DevicesController_initialized.set(this, false);
+    this.host = host;
+    host.addController(this);
+  }
+  initialize() {
+    __classPrivateFieldSet(this, _DevicesController_initialized, true, "f");
+    if (this.host.devices === void 0) {
+      __classPrivateFieldGet(this, _DevicesController_instances, "m", _DevicesController_loadDevices).call(this);
+      __classPrivateFieldGet(this, _DevicesController_instances, "m", _DevicesController_setupDeviceChangeListener).call(this);
+    }
+  }
+  hostDisconnected() {
+    __classPrivateFieldGet(this, _DevicesController_instances, "m", _DevicesController_removeDeviceChangeListener).call(this);
+  }
+  hostUpdate() {
+    if (!__classPrivateFieldGet(this, _DevicesController_initialized, "f")) {
+      return;
+    }
+    if (this.host.devices === void 0) {
+      __classPrivateFieldGet(this, _DevicesController_instances, "m", _DevicesController_loadDevices).call(this);
+    }
+  }
+  /**
+   * Clear the auto-loaded flag (when devices are set externally)
+   */
+  clearAutoLoadedFlag() {
+    __classPrivateFieldSet(this, _DevicesController_autoLoadedDevices, false, "f");
+  }
+};
+_DevicesController_autoLoadedDevices = /* @__PURE__ */ new WeakMap(), _DevicesController_loadingDevices = /* @__PURE__ */ new WeakMap(), _DevicesController_deviceChangeHandler = /* @__PURE__ */ new WeakMap(), _DevicesController_initialized = /* @__PURE__ */ new WeakMap(), _DevicesController_instances = /* @__PURE__ */ new WeakSet(), _DevicesController_setupDeviceChangeListener = function _DevicesController_setupDeviceChangeListener2() {
+  if (__classPrivateFieldGet(this, _DevicesController_deviceChangeHandler, "f")) {
+    return;
+  }
+  __classPrivateFieldSet(this, _DevicesController_deviceChangeHandler, () => {
+    if (__classPrivateFieldGet(this, _DevicesController_autoLoadedDevices, "f")) {
+      __classPrivateFieldGet(this, _DevicesController_instances, "m", _DevicesController_loadDevices).call(this);
+    }
+  }, "f");
+  navigator.mediaDevices.addEventListener("devicechange", __classPrivateFieldGet(this, _DevicesController_deviceChangeHandler, "f"));
+}, _DevicesController_removeDeviceChangeListener = function _DevicesController_removeDeviceChangeListener2() {
+  if (!__classPrivateFieldGet(this, _DevicesController_deviceChangeHandler, "f")) {
+    return;
+  }
+  navigator.mediaDevices.removeEventListener("devicechange", __classPrivateFieldGet(this, _DevicesController_deviceChangeHandler, "f"));
+  __classPrivateFieldSet(this, _DevicesController_deviceChangeHandler, void 0, "f");
+}, _DevicesController_loadDevices = async function _DevicesController_loadDevices2() {
+  if (__classPrivateFieldGet(this, _DevicesController_loadingDevices, "f")) {
+    return;
+  }
+  __classPrivateFieldSet(this, _DevicesController_loadingDevices, true, "f");
+  try {
+    const { devices, defaultDevice } = await getAudioDevices();
+    __classPrivateFieldSet(this, _DevicesController_autoLoadedDevices, true, "f");
+    this.host._devices = devices;
+    const previousDevice = this.host.selectedDevice;
+    const selectedDevice = (previousDevice && devices.find((d3) => d3.deviceId === previousDevice.deviceId)) ?? defaultDevice;
+    this.host.selectedDevice = selectedDevice;
+    this.host.requestUpdate();
+    this.host.dispatchEvent(recordingDevicesChangedEvent(devices, selectedDevice));
+    this.host.dispatchEvent(readyEvent());
+  } catch (error) {
+    this.host.dispatchEvent(errorEvent(error));
+  } finally {
+    __classPrivateFieldSet(this, _DevicesController_loadingDevices, false, "f");
+  }
+};
+
+// dist/utils/languages.js
+var DEFAULT_LANGUAGES_BY_REGION = {
+  default: LANGUAGES_SUPPORTED_EU,
+  eu: LANGUAGES_SUPPORTED_EU,
+  us: LANGUAGES_SUPPORTED_US
+};
+function getLanguageName(languageCode) {
+  try {
+    const userLocale = navigator.language || "en";
+    const displayNames = new Intl.DisplayNames([userLocale], {
+      type: "language"
+    });
+    const languageName = displayNames.of(languageCode);
+    return languageName || languageCode;
+  } catch {
+    return languageCode;
+  }
+}
+function getLanguagesByRegion(region) {
+  const languages = DEFAULT_LANGUAGES_BY_REGION[region || "default"] || DEFAULT_LANGUAGES_BY_REGION["default"];
+  const defaultLanguage = languages?.[0];
+  return { defaultLanguage, languages };
+}
+
+// dist/controllers/languages-controller.js
+var __classPrivateFieldSet2 = function(receiver, state, value, kind, f5) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f5) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f5 : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return kind === "a" ? f5.call(receiver, value) : f5 ? f5.value = value : state.set(receiver, value), value;
+};
+var __classPrivateFieldGet2 = function(receiver, state, kind, f5) {
+  if (kind === "a" && !f5) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f5 : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f5 : kind === "a" ? f5.call(receiver) : f5 ? f5.value : state.get(receiver);
+};
+var _LanguagesController_instances;
+var _LanguagesController_autoLoadedLanguages;
+var _LanguagesController_loadingLanguages;
+var _LanguagesController_previousRegion;
+var _LanguagesController_initialized;
+var _LanguagesController_loadLanguages;
+var LanguagesController = class {
+  constructor(host) {
+    _LanguagesController_instances.add(this);
+    _LanguagesController_autoLoadedLanguages.set(this, false);
+    _LanguagesController_loadingLanguages.set(this, false);
+    _LanguagesController_previousRegion.set(this, void 0);
+    _LanguagesController_initialized.set(this, false);
+    this.host = host;
+    host.addController(this);
+  }
+  initialize() {
+    __classPrivateFieldSet2(this, _LanguagesController_initialized, true, "f");
+    if (this.host._languages === void 0) {
+      __classPrivateFieldGet2(this, _LanguagesController_instances, "m", _LanguagesController_loadLanguages).call(this);
+    }
+  }
+  hostUpdate() {
+    if (!__classPrivateFieldGet2(this, _LanguagesController_initialized, "f")) {
+      return;
+    }
+    if (__classPrivateFieldGet2(this, _LanguagesController_previousRegion, "f") !== this.host.region && __classPrivateFieldGet2(this, _LanguagesController_autoLoadedLanguages, "f") || this.host._languages === void 0) {
+      __classPrivateFieldGet2(this, _LanguagesController_instances, "m", _LanguagesController_loadLanguages).call(this);
+    }
+    __classPrivateFieldSet2(this, _LanguagesController_previousRegion, this.host.region, "f");
+  }
+  /**
+   * Clear the auto-loaded flag (when languages are set externally)
+   */
+  clearAutoLoadedFlag() {
+    __classPrivateFieldSet2(this, _LanguagesController_autoLoadedLanguages, false, "f");
+  }
+};
+_LanguagesController_autoLoadedLanguages = /* @__PURE__ */ new WeakMap(), _LanguagesController_loadingLanguages = /* @__PURE__ */ new WeakMap(), _LanguagesController_previousRegion = /* @__PURE__ */ new WeakMap(), _LanguagesController_initialized = /* @__PURE__ */ new WeakMap(), _LanguagesController_instances = /* @__PURE__ */ new WeakSet(), _LanguagesController_loadLanguages = async function _LanguagesController_loadLanguages2() {
+  if (__classPrivateFieldGet2(this, _LanguagesController_loadingLanguages, "f")) {
+    return;
+  }
+  __classPrivateFieldSet2(this, _LanguagesController_loadingLanguages, true, "f");
+  try {
+    const { languages, defaultLanguage } = getLanguagesByRegion(this.host.region);
+    __classPrivateFieldSet2(this, _LanguagesController_autoLoadedLanguages, true, "f");
+    this.host._languages = languages;
+    const previousLanguage = this.host.dictationConfig?.primaryLanguage;
+    const selectedLanguage = previousLanguage && languages.includes(previousLanguage) ? previousLanguage : defaultLanguage;
+    this.host.dictationConfig = {
+      ...this.host.dictationConfig,
+      primaryLanguage: selectedLanguage || "en"
+    };
+    this.host.requestUpdate();
+    this.host.dispatchEvent(languagesChangedEvent(languages, selectedLanguage));
+  } catch (error) {
+    this.host.dispatchEvent(errorEvent(error));
+  } finally {
+    __classPrivateFieldSet2(this, _LanguagesController_loadingLanguages, false, "f");
+  }
+};
+
+// dist/styles/component-styles.js
+var ComponentStyles = i`
+  :host {
+    font-family: var(--component-font-family, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif);
+  }
+
+  .wrapper {
+    background-color: var(--card-background, light-dark(#fff, #333));
+    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));
+    border-radius: var(--card-border-radius, 8px);
+    box-shadow: var(--card-box-shadow, 0 2px 5px rgba(0, 0, 0, 0.1));
+    padding: var(--card-padding, 4px);
+    display: flex;
+    gap: 4px;
+    height: 46px;
+    width: fit-content;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+`;
+var LabelStyles = i`
+  label {
+    display: block;
+    font-size: 0.8rem;
+    padding-bottom: 0.5rem;
+    font-weight: 500;
+    color: var(--component-text-color, light-dark(#333, #eee));
+    pointer-events: none;
+  }
+`;
+var component_styles_default = ComponentStyles;
+
+// dist/utils/auth.js
+async function getInitialToken(config) {
+  const initialToken = "accessToken" in config ? {
+    accessToken: config.accessToken,
+    refreshToken: config.refreshToken
+  } : await config.refreshAccessToken();
+  if (!initialToken?.accessToken || typeof initialToken.accessToken !== "string") {
+    throw new Error("Access token is required and must be a string");
+  }
+  return {
+    accessToken: initialToken.accessToken,
+    refreshToken: initialToken.refreshToken
+  };
+}
+
+// dist/utils/keybinding.js
+function isMac() {
+  if (typeof navigator === "undefined") {
+    return false;
+  }
+  return /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
+}
+function capitalize(str) {
+  if (str.length === 0) {
+    return str;
+  }
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+function normalizeKeyForKeybinding(key) {
+  if (key === " ") {
+    return "Space";
+  }
+  const normalized = key.trim().toLowerCase();
+  if (normalized === "control") {
+    return "Ctrl";
+  }
+  if (normalized === "meta" || normalized === "cmd") {
+    return isMac() ? "Cmd" : "Meta";
+  }
+  if (normalized === "alt" || normalized === "opt") {
+    return isMac() ? "Opt" : "Alt";
+  }
+  if (normalized === "space") {
+    return "Space";
+  }
+  return normalized.length > 1 ? capitalize(normalized) : normalized;
+}
+function normalizeKeybinding(keybinding) {
+  if (!keybinding) {
+    return null;
+  }
+  const trimmed = keybinding.trim();
+  if (trimmed === "") {
+    return null;
+  }
+  return normalizeKeyForKeybinding(trimmed);
+}
+function matchesKeybinding(event, keybinding) {
+  const normalizedKeybinding = normalizeKeybinding(keybinding);
+  if (!normalizedKeybinding) {
+    return false;
+  }
+  const normalizedKey = normalizeKeyForKeybinding(event.key);
+  const normalizedCode = normalizeKeyForKeybinding(event.code);
+  return normalizedKey === normalizedKeybinding || normalizedCode === normalizedKeybinding;
+}
+function shouldIgnoreKeybinding(element) {
+  if (!element) {
+    return false;
+  }
+  const tagName = element.tagName.toLowerCase();
+  if (tagName === "input" || tagName === "textarea") {
+    return true;
+  }
+  if (element instanceof HTMLElement && element.contentEditable === "true") {
+    return true;
+  }
+  return false;
+}
 
 // dist/utils/token.js
 function decodeToken(token) {
@@ -1105,15 +1431,16 @@ function decodeToken(token) {
   }
   const regex = /^https:\/\/(keycloak|auth)\.([^.]+)\.corti\.app\/realms\/([^/]+)/;
   const match = issuerUrl.match(regex);
-  if (match) {
-    const expiresAt = tokenDetails.exp && typeof tokenDetails.exp === "number" ? tokenDetails.exp : void 0;
-    return {
-      accessToken: token,
-      environment: match[2],
-      expiresAt,
-      tenant: match[3]
-    };
+  if (!match) {
+    throw new Error("Access token does not match expected format");
   }
+  const expiresAt = tokenDetails.exp && typeof tokenDetails.exp === "number" ? tokenDetails.exp : void 0;
+  return {
+    accessToken: token,
+    environment: match[2],
+    expiresAt,
+    tenant: match[3]
+  };
 }
 
 // dist/contexts/dictation-context.js
@@ -1123,19 +1450,34 @@ var __decorate = function(decorators, target, key, desc) {
   else for (var i7 = decorators.length - 1; i7 >= 0; i7--) if (d3 = decorators[i7]) r7 = (c6 < 3 ? d3(r7) : c6 > 3 ? d3(target, key, r7) : d3(target, key)) || r7;
   return c6 > 3 && r7 && Object.defineProperty(target, key, r7), r7;
 };
-var regionContext = n7("region");
-var tenantNameContext = n7("tenantName");
-var languagesContext = n7("languages");
-var devicesContext = n7("devices");
-var selectedDeviceContext = n7("selectedDevice");
-var recordingStateContext = n7("recordingState");
-var accessTokenContext = n7("accessToken");
-var dictationConfigContext = n7("dictationConfig");
-var authConfigContext = n7("authConfig");
-var socketUrlContext = n7("socketUrl");
-var socketProxyContext = n7("socketProxy");
-var debugDisplayAudioContext = n7("debugDisplayAudio");
-var DictationContext = class DictationContext2 extends i4 {
+var __classPrivateFieldGet3 = function(receiver, state, kind, f5) {
+  if (kind === "a" && !f5) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f5 : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f5 : kind === "a" ? f5.call(receiver) : f5 ? f5.value : state.get(receiver);
+};
+var _DictationRoot_languagesController;
+var _DictationRoot_devicesController;
+var _DictationRoot_handleLanguageChanged;
+var _DictationRoot_handleDeviceChanged;
+var _DictationRoot_handleRecordingStateChanged;
+var _DictationRoot_handleContextRequest;
+var _DictationRoot_handleModeChanged;
+var _DictationRoot_handleKeybindingChanged;
+var regionContext = n7(Symbol("region"));
+var tenantNameContext = n7(Symbol("tenantName"));
+var languagesContext = n7(Symbol("languages"));
+var devicesContext = n7(Symbol("devices"));
+var selectedDeviceContext = n7(Symbol("selectedDevice"));
+var recordingStateContext = n7(Symbol("recordingState"));
+var accessTokenContext = n7(Symbol("accessToken"));
+var dictationConfigContext = n7(Symbol("dictationConfig"));
+var authConfigContext = n7(Symbol("authConfig"));
+var socketUrlContext = n7(Symbol("socketUrl"));
+var socketProxyContext = n7(Symbol("socketProxy"));
+var debugDisplayAudioContext = n7(Symbol("debugDisplayAudio"));
+var modeContext = n7(Symbol("mode"));
+var keybindingContext = n7(Symbol("keybinding"));
+var DictationRoot = class DictationRoot2 extends i4 {
   set accessToken(token) {
     this.setAccessToken(token);
   }
@@ -1148,33 +1490,76 @@ var DictationContext = class DictationContext2 extends i4 {
   get authConfig() {
     return this._authConfig;
   }
+  set languages(value) {
+    this._languages = value;
+    if (value !== void 0) {
+      __classPrivateFieldGet3(this, _DictationRoot_languagesController, "f").clearAutoLoadedFlag();
+    }
+  }
+  get languages() {
+    return this._languages;
+  }
+  set devices(value) {
+    this._devices = value;
+    if (value !== void 0) {
+      __classPrivateFieldGet3(this, _DictationRoot_devicesController, "f").clearAutoLoadedFlag();
+    }
+  }
+  get devices() {
+    return this._devices;
+  }
   // ─────────────────────────────────────────────────────────────────────────────
   // Lifecycle
   // ─────────────────────────────────────────────────────────────────────────────
   constructor() {
     super();
     this.recordingState = "stopped";
+    _DictationRoot_languagesController.set(this, new LanguagesController(this));
+    _DictationRoot_devicesController.set(this, new DevicesController(this));
+    this.mode = "toggle-to-talk";
     this.noWrapper = false;
-    this._handleLanguageChanged = (e10) => {
+    _DictationRoot_handleLanguageChanged.set(this, (e10) => {
       const event = e10;
-      this.languages = event.detail.languages;
       this.dictationConfig = {
         ...this.dictationConfig,
         primaryLanguage: event.detail.selectedLanguage
       };
-    };
-    this._handleDeviceChanged = (e10) => {
+    });
+    _DictationRoot_handleDeviceChanged.set(this, (e10) => {
       const event = e10;
-      this.devices = event.detail.devices;
       this.selectedDevice = event.detail.selectedDevice;
-    };
-    this._handleRecordingStateChanged = (e10) => {
+    });
+    _DictationRoot_handleRecordingStateChanged.set(this, (e10) => {
       const event = e10;
       this.recordingState = event.detail.state;
-    };
-    this.addEventListener("languages-changed", this._handleLanguageChanged);
-    this.addEventListener("recording-devices-changed", this._handleDeviceChanged);
-    this.addEventListener("recording-state-changed", this._handleRecordingStateChanged);
+    });
+    _DictationRoot_handleContextRequest.set(this, (e10) => {
+      if (e10.context === languagesContext) {
+        __classPrivateFieldGet3(this, _DictationRoot_languagesController, "f").initialize();
+      } else if (e10.context === devicesContext) {
+        __classPrivateFieldGet3(this, _DictationRoot_devicesController, "f").initialize();
+      } else if (e10.context === keybindingContext && e10.contextTarget.tagName.toLowerCase() === "dictation-keybinding-selector") {
+        if (this.keybinding === void 0) {
+          this.keybinding = "`";
+          this.dispatchEvent(keybindingChangedEvent("`", "Backquote"));
+        }
+      }
+    });
+    _DictationRoot_handleModeChanged.set(this, (e10) => {
+      const event = e10;
+      this.mode = event.detail.mode;
+    });
+    _DictationRoot_handleKeybindingChanged.set(this, (e10) => {
+      const event = e10;
+      const normalizedKeybinding = normalizeKeybinding(event.detail.key);
+      this.keybinding = normalizedKeybinding;
+    });
+    this.addEventListener("languages-changed", __classPrivateFieldGet3(this, _DictationRoot_handleLanguageChanged, "f"));
+    this.addEventListener("recording-devices-changed", __classPrivateFieldGet3(this, _DictationRoot_handleDeviceChanged, "f"));
+    this.addEventListener("recording-state-changed", __classPrivateFieldGet3(this, _DictationRoot_handleRecordingStateChanged, "f"));
+    this.addEventListener("context-request", __classPrivateFieldGet3(this, _DictationRoot_handleContextRequest, "f"));
+    this.addEventListener("mode-changed", __classPrivateFieldGet3(this, _DictationRoot_handleModeChanged, "f"));
+    this.addEventListener("keybinding-changed", __classPrivateFieldGet3(this, _DictationRoot_handleKeybindingChanged, "f"));
   }
   // ─────────────────────────────────────────────────────────────────────────────
   // Public methods
@@ -1243,70 +1628,92 @@ var DictationContext = class DictationContext2 extends i4 {
     </div>`;
   }
 };
-DictationContext.styles = [ComponentStyles_default];
+_DictationRoot_languagesController = /* @__PURE__ */ new WeakMap();
+_DictationRoot_devicesController = /* @__PURE__ */ new WeakMap();
+_DictationRoot_handleLanguageChanged = /* @__PURE__ */ new WeakMap();
+_DictationRoot_handleDeviceChanged = /* @__PURE__ */ new WeakMap();
+_DictationRoot_handleRecordingStateChanged = /* @__PURE__ */ new WeakMap();
+_DictationRoot_handleContextRequest = /* @__PURE__ */ new WeakMap();
+_DictationRoot_handleModeChanged = /* @__PURE__ */ new WeakMap();
+_DictationRoot_handleKeybindingChanged = /* @__PURE__ */ new WeakMap();
+DictationRoot.styles = [component_styles_default];
 __decorate([
   e9({ context: regionContext }),
   r5()
-], DictationContext.prototype, "region", void 0);
+], DictationRoot.prototype, "region", void 0);
 __decorate([
   e9({ context: tenantNameContext }),
   r5()
-], DictationContext.prototype, "tenantName", void 0);
+], DictationRoot.prototype, "tenantName", void 0);
 __decorate([
   e9({ context: recordingStateContext }),
   r5()
-], DictationContext.prototype, "recordingState", void 0);
+], DictationRoot.prototype, "recordingState", void 0);
 __decorate([
   e9({ context: accessTokenContext }),
   r5()
-], DictationContext.prototype, "_accessToken", void 0);
+], DictationRoot.prototype, "_accessToken", void 0);
 __decorate([
   n4({ type: String })
-], DictationContext.prototype, "accessToken", null);
+], DictationRoot.prototype, "accessToken", null);
 __decorate([
   e9({ context: authConfigContext }),
   r5()
-], DictationContext.prototype, "_authConfig", void 0);
+], DictationRoot.prototype, "_authConfig", void 0);
 __decorate([
   n4({ attribute: false, type: Object })
-], DictationContext.prototype, "authConfig", null);
+], DictationRoot.prototype, "authConfig", null);
 __decorate([
   e9({ context: socketUrlContext }),
   n4({ type: String })
-], DictationContext.prototype, "socketUrl", void 0);
+], DictationRoot.prototype, "socketUrl", void 0);
 __decorate([
   e9({ context: socketProxyContext }),
   n4({ attribute: false, type: Object })
-], DictationContext.prototype, "socketProxy", void 0);
+], DictationRoot.prototype, "socketProxy", void 0);
 __decorate([
   e9({ context: dictationConfigContext }),
   n4({ attribute: false, type: Object })
-], DictationContext.prototype, "dictationConfig", void 0);
+], DictationRoot.prototype, "dictationConfig", void 0);
 __decorate([
   e9({ context: languagesContext }),
+  r5()
+], DictationRoot.prototype, "_languages", void 0);
+__decorate([
   n4({
     converter: commaSeparatedConverter,
     type: Array
   })
-], DictationContext.prototype, "languages", void 0);
+], DictationRoot.prototype, "languages", null);
 __decorate([
   e9({ context: devicesContext }),
+  r5()
+], DictationRoot.prototype, "_devices", void 0);
+__decorate([
   n4({ attribute: false, type: Array })
-], DictationContext.prototype, "devices", void 0);
+], DictationRoot.prototype, "devices", null);
 __decorate([
   e9({ context: selectedDeviceContext }),
   n4({ attribute: false, type: Object })
-], DictationContext.prototype, "selectedDevice", void 0);
+], DictationRoot.prototype, "selectedDevice", void 0);
 __decorate([
   e9({ context: debugDisplayAudioContext }),
   n4({ attribute: "debug-display-audio", type: Boolean })
-], DictationContext.prototype, "debug_displayAudio", void 0);
+], DictationRoot.prototype, "debug_displayAudio", void 0);
+__decorate([
+  e9({ context: modeContext }),
+  n4({ type: String })
+], DictationRoot.prototype, "mode", void 0);
+__decorate([
+  e9({ context: keybindingContext }),
+  n4({ type: String })
+], DictationRoot.prototype, "keybinding", void 0);
 __decorate([
   n4({ type: Boolean })
-], DictationContext.prototype, "noWrapper", void 0);
-DictationContext = __decorate([
-  t3("dictation-context-provider")
-], DictationContext);
+], DictationRoot.prototype, "noWrapper", void 0);
+DictationRoot = __decorate([
+  t3("dictation-root")
+], DictationRoot);
 
 // node_modules/@corti/sdk/dist/esm/core/json.mjs
 var toJson = (value, replacer, space) => {
@@ -5839,7 +6246,7 @@ var Auth = class {
 function getEnvironment(environment = "eu") {
   return typeof environment === "string" ? {
     base: `https://api.${environment}.corti.app/v2`,
-    wss: `wss://api.${environment}.corti.app`,
+    wss: `wss://api.${environment}.corti.app/audio-bridge/v2`,
     login: `https://auth.${environment}.corti.app/realms`,
     agents: `https://api.${environment}.corti.app`
   } : environment;
@@ -10053,7 +10460,7 @@ var Stream = class {
       _queryParams["token"] = token;
       let _headers = Object.assign({}, headers);
       const socket = new ReconnectingWebSocket({
-        url: url_exports.join((_a = yield Supplier.get(this._options["baseUrl"])) !== null && _a !== void 0 ? _a : (yield Supplier.get(this._options["environment"])).wss, `/audio-bridge/v2/interactions/${encodeURIComponent(id)}/streams`),
+        url: url_exports.join((_a = yield Supplier.get(this._options["baseUrl"])) !== null && _a !== void 0 ? _a : (yield Supplier.get(this._options["environment"])).wss, `/interactions/${encodeURIComponent(id)}/streams`),
         protocols: [],
         queryParameters: _queryParams,
         headers: _headers,
@@ -10432,7 +10839,7 @@ var Transcribe = class {
       _queryParams["token"] = token;
       let _headers = Object.assign({}, headers);
       const socket = new ReconnectingWebSocket({
-        url: url_exports.join((_a = yield Supplier.get(this._options["baseUrl"])) !== null && _a !== void 0 ? _a : (yield Supplier.get(this._options["environment"])).wss, "/audio-bridge/v2/transcribe"),
+        url: url_exports.join((_a = yield Supplier.get(this._options["baseUrl"])) !== null && _a !== void 0 ? _a : (yield Supplier.get(this._options["environment"])).wss, "/transcribe"),
         protocols: [],
         queryParameters: _queryParams,
         headers: _headers,
@@ -10595,7 +11002,7 @@ var Transcribe2 = class extends Transcribe {
 };
 
 // node_modules/@corti/sdk/dist/esm/version.mjs
-var SDK_VERSION = "0.8.0-rc";
+var SDK_VERSION = "0.8.0";
 
 // node_modules/@corti/sdk/dist/esm/custom/utils/resolveClientOptions.mjs
 var __awaiter30 = function(thisArg, _arguments, P2, generator) {
@@ -10801,13 +11208,13 @@ var CortiClient = class {
 var CortiEnvironment = {
   Eu: {
     base: "https://api.eu.corti.app/v2",
-    wss: "wss://api.eu.corti.app",
+    wss: "wss://api.eu.corti.app/audio-bridge/v2",
     login: "https://auth.eu.corti.app/realms",
     agents: "https://api.eu.corti.app"
   },
   Us: {
     base: "https://api.us.corti.app/v2",
-    wss: "wss://api.us.corti.app",
+    wss: "wss://api.us.corti.app/audio-bridge/v2",
     login: "https://auth.us.corti.app/realms",
     agents: "https://api.us.corti.app"
   }
@@ -10851,11 +11258,41 @@ var CortiWebSocketProxyClient = class {
   }
 };
 
-// dist/controllers/DictationController.js
+// dist/controllers/dictation-controller.js
+var __classPrivateFieldGet4 = function(receiver, state, kind, f5) {
+  if (kind === "a" && !f5) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f5 : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f5 : kind === "a" ? f5.call(receiver) : f5 ? f5.value : state.get(receiver);
+};
+var __classPrivateFieldSet3 = function(receiver, state, value, kind, f5) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f5) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f5 : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return kind === "a" ? f5.call(receiver, value) : f5 ? f5.value = value : state.set(receiver, value), value;
+};
+var _DictationController_instances;
+var _DictationController_cortiClient;
+var _DictationController_webSocket;
+var _DictationController_closeTimeout;
+var _DictationController_callbacks;
+var _DictationController_lastDictationConfig;
+var _DictationController_lastSocketUrl;
+var _DictationController_lastSocketProxy;
+var _DictationController_configHasChanged;
+var _DictationController_connectProxy;
+var _DictationController_connectAuth;
+var _DictationController_setupWebSocketHandlers;
+var _DictationController_setupMediaRecorder;
 var DictationController = class {
   constructor(host) {
-    this._cortiClient = null;
-    this._webSocket = null;
+    _DictationController_instances.add(this);
+    _DictationController_cortiClient.set(this, null);
+    _DictationController_webSocket.set(this, null);
+    _DictationController_closeTimeout.set(this, void 0);
+    _DictationController_callbacks.set(this, void 0);
+    _DictationController_lastDictationConfig.set(this, null);
+    _DictationController_lastSocketUrl.set(this, void 0);
+    _DictationController_lastSocketProxy.set(this, void 0);
     this.host = host;
     host.addController(this);
   }
@@ -10866,112 +11303,225 @@ var DictationController = class {
     if (!mediaRecorder) {
       throw new Error("MediaRecorder is required to connect");
     }
-    if (this._webSocket?.readyState === WebSocket.OPEN) {
-      throw new Error("Already connected. Disconnect before reconnecting.");
+    const newConnection = __classPrivateFieldGet4(this, _DictationController_instances, "m", _DictationController_configHasChanged).call(this) || __classPrivateFieldGet4(this, _DictationController_webSocket, "f")?.readyState !== WebSocket.OPEN;
+    if (newConnection) {
+      this.cleanup();
+      if (__classPrivateFieldGet4(this, _DictationController_webSocket, "f")?.readyState === WebSocket.OPEN) {
+        throw new Error("Already connected. Disconnect before reconnecting.");
+      }
+      __classPrivateFieldSet3(this, _DictationController_webSocket, this.host._socketUrl || this.host._socketProxy ? await __classPrivateFieldGet4(this, _DictationController_instances, "m", _DictationController_connectProxy).call(this, dictationConfig) : await __classPrivateFieldGet4(this, _DictationController_instances, "m", _DictationController_connectAuth).call(this, dictationConfig), "f");
+      __classPrivateFieldGet4(this, _DictationController_callbacks, "f")?.onNetworkActivity?.("sent", {
+        configuration: dictationConfig,
+        type: "config"
+      });
+      __classPrivateFieldSet3(this, _DictationController_lastDictationConfig, this.host._dictationConfig || null, "f");
+      __classPrivateFieldSet3(this, _DictationController_lastSocketUrl, this.host._socketUrl, "f");
+      __classPrivateFieldSet3(this, _DictationController_lastSocketProxy, this.host._socketProxy, "f");
     }
-    this._webSocket = this.host._socketUrl || this.host._socketProxy ? await this.connectProxy(dictationConfig) : await this.connectAuth(dictationConfig);
-    this._onNetworkActivity = callbacks.onNetworkActivity;
-    this.setupMediaRecorder(mediaRecorder);
-    this.setupWebSocketHandlers(callbacks);
-  }
-  async connectProxy(dictationConfig) {
-    const proxyOptions = this.host._socketProxy || {
-      url: this.host._socketUrl || ""
-    };
-    if (!proxyOptions.url) {
-      throw new Error("Proxy URL is required when using proxy client");
-    }
-    return await CortiWebSocketProxyClient.transcribe.connect({
-      configuration: dictationConfig,
-      proxy: proxyOptions
-    });
-  }
-  async connectAuth(dictationConfig) {
-    if (!this.host._authConfig && !this.host._accessToken) {
-      throw new Error("Auth configuration or access token is required to connect");
-    }
-    const auth = this.host._authConfig || {
-      accessToken: this.host._accessToken || "",
-      refreshAccessToken: () => ({
-        accessToken: this.host._accessToken || ""
-      })
-    };
-    this._cortiClient = new CortiClient({
-      auth,
-      environment: this.host._region,
-      tenantName: this.host._tenantName
-    });
-    return await this._cortiClient.transcribe.connect({
-      configuration: dictationConfig
-    });
-  }
-  setupWebSocketHandlers(callbacks) {
-    if (!this._webSocket) {
-      throw new Error("WebSocket not initialized");
-    }
-    this._webSocket.on("message", (message) => {
-      this._onNetworkActivity?.("received", message);
-      if (callbacks.onMessage) {
-        callbacks.onMessage(message);
-      }
-    });
-    this._webSocket.on("error", (event) => {
-      if (callbacks.onError) {
-        callbacks.onError(event);
-      }
-    });
-    this._webSocket.on("close", (event) => {
-      if (callbacks.onClose) {
-        callbacks.onClose(event);
-      }
-    });
-  }
-  setupMediaRecorder(mediaRecorder) {
-    mediaRecorder.ondataavailable = (event) => {
-      this._webSocket?.sendAudio(event.data);
-      this._onNetworkActivity?.("sent", {
-        size: event.data.size,
-        type: "audio"
-      });
-    };
+    __classPrivateFieldSet3(this, _DictationController_callbacks, callbacks, "f");
+    __classPrivateFieldGet4(this, _DictationController_instances, "m", _DictationController_setupMediaRecorder).call(this, mediaRecorder);
+    __classPrivateFieldGet4(this, _DictationController_instances, "m", _DictationController_setupWebSocketHandlers).call(this, callbacks);
+    return newConnection;
   }
   async disconnect(onClose) {
     await new Promise((resolve, reject) => {
-      if (!this._webSocket || this._webSocket.readyState !== WebSocket.OPEN) {
+      if (!__classPrivateFieldGet4(this, _DictationController_webSocket, "f") || __classPrivateFieldGet4(this, _DictationController_webSocket, "f").readyState !== WebSocket.OPEN) {
         resolve();
         return;
       }
-      this._webSocket.on("close", (event) => {
-        if (this._closeTimeout) {
-          clearTimeout(this._closeTimeout);
-          this._closeTimeout = void 0;
+      __classPrivateFieldGet4(this, _DictationController_webSocket, "f").on("close", (event) => {
+        if (__classPrivateFieldGet4(this, _DictationController_closeTimeout, "f")) {
+          clearTimeout(__classPrivateFieldGet4(this, _DictationController_closeTimeout, "f"));
+          __classPrivateFieldSet3(this, _DictationController_closeTimeout, void 0, "f");
         }
         if (onClose) {
           onClose(event);
         }
         resolve();
       });
-      this._webSocket.sendEnd({ type: "end" });
-      this._onNetworkActivity?.("sent", { type: "end" });
-      this._closeTimeout = window.setTimeout(() => {
-        reject(new Error("WebSocket close timeout"));
-        if (this._webSocket?.readyState === WebSocket.OPEN) {
-          this._webSocket.close();
+      __classPrivateFieldGet4(this, _DictationController_webSocket, "f").on("message", (message) => {
+        __classPrivateFieldGet4(this, _DictationController_callbacks, "f")?.onNetworkActivity?.("received", message);
+        if (__classPrivateFieldGet4(this, _DictationController_callbacks, "f")?.onMessage) {
+          __classPrivateFieldGet4(this, _DictationController_callbacks, "f")?.onMessage(message);
+        }
+        if (message.type === "flushed") {
+          if (__classPrivateFieldGet4(this, _DictationController_closeTimeout, "f")) {
+            clearTimeout(__classPrivateFieldGet4(this, _DictationController_closeTimeout, "f"));
+            __classPrivateFieldSet3(this, _DictationController_closeTimeout, void 0, "f");
+          }
+          resolve();
+          return;
+        }
+      });
+      __classPrivateFieldGet4(this, _DictationController_webSocket, "f").sendFlush({ type: "flush" });
+      __classPrivateFieldGet4(this, _DictationController_callbacks, "f")?.onNetworkActivity?.("sent", { type: "flush" });
+      __classPrivateFieldSet3(this, _DictationController_closeTimeout, window.setTimeout(() => {
+        reject(new Error("Audio processing timeout"));
+        if (__classPrivateFieldGet4(this, _DictationController_webSocket, "f")?.readyState === WebSocket.OPEN) {
+          __classPrivateFieldGet4(this, _DictationController_webSocket, "f").close();
         }
-      }, 1e4);
+      }, 1e4), "f");
     });
-    this.cleanup();
   }
   cleanup() {
-    if (this._closeTimeout) {
-      clearTimeout(this._closeTimeout);
-      this._closeTimeout = void 0;
+    if (__classPrivateFieldGet4(this, _DictationController_closeTimeout, "f")) {
+      clearTimeout(__classPrivateFieldGet4(this, _DictationController_closeTimeout, "f"));
+      __classPrivateFieldSet3(this, _DictationController_closeTimeout, void 0, "f");
+    }
+    if (__classPrivateFieldGet4(this, _DictationController_webSocket, "f")?.readyState === WebSocket.OPEN) {
+      __classPrivateFieldGet4(this, _DictationController_webSocket, "f").close();
+    }
+    __classPrivateFieldSet3(this, _DictationController_webSocket, null, "f");
+    __classPrivateFieldSet3(this, _DictationController_cortiClient, null, "f");
+    __classPrivateFieldSet3(this, _DictationController_lastDictationConfig, null, "f");
+    __classPrivateFieldSet3(this, _DictationController_lastSocketUrl, void 0, "f");
+    __classPrivateFieldSet3(this, _DictationController_lastSocketProxy, void 0, "f");
+  }
+};
+_DictationController_cortiClient = /* @__PURE__ */ new WeakMap(), _DictationController_webSocket = /* @__PURE__ */ new WeakMap(), _DictationController_closeTimeout = /* @__PURE__ */ new WeakMap(), _DictationController_callbacks = /* @__PURE__ */ new WeakMap(), _DictationController_lastDictationConfig = /* @__PURE__ */ new WeakMap(), _DictationController_lastSocketUrl = /* @__PURE__ */ new WeakMap(), _DictationController_lastSocketProxy = /* @__PURE__ */ new WeakMap(), _DictationController_instances = /* @__PURE__ */ new WeakSet(), _DictationController_configHasChanged = function _DictationController_configHasChanged2() {
+  return JSON.stringify(this.host._dictationConfig) !== JSON.stringify(__classPrivateFieldGet4(this, _DictationController_lastDictationConfig, "f")) || this.host._socketUrl !== __classPrivateFieldGet4(this, _DictationController_lastSocketUrl, "f") || JSON.stringify(this.host._socketProxy) !== JSON.stringify(__classPrivateFieldGet4(this, _DictationController_lastSocketProxy, "f"));
+}, _DictationController_connectProxy = async function _DictationController_connectProxy2(dictationConfig) {
+  const proxyOptions = this.host._socketProxy || {
+    url: this.host._socketUrl || ""
+  };
+  if (!proxyOptions.url) {
+    throw new Error("Proxy URL is required when using proxy client");
+  }
+  return await CortiWebSocketProxyClient.transcribe.connect({
+    configuration: dictationConfig,
+    proxy: proxyOptions
+  });
+}, _DictationController_connectAuth = async function _DictationController_connectAuth2(dictationConfig) {
+  if (!this.host._authConfig && !this.host._accessToken) {
+    throw new Error("Auth configuration or access token is required to connect");
+  }
+  const auth = this.host._authConfig || {
+    accessToken: this.host._accessToken || "",
+    refreshAccessToken: () => ({
+      accessToken: this.host._accessToken || ""
+    })
+  };
+  __classPrivateFieldSet3(this, _DictationController_cortiClient, new CortiClient({
+    auth,
+    environment: this.host._region,
+    tenantName: this.host._tenantName
+  }), "f");
+  return await __classPrivateFieldGet4(this, _DictationController_cortiClient, "f").transcribe.connect({
+    configuration: dictationConfig
+  });
+}, _DictationController_setupWebSocketHandlers = function _DictationController_setupWebSocketHandlers2(callbacks) {
+  if (!__classPrivateFieldGet4(this, _DictationController_webSocket, "f")) {
+    throw new Error("WebSocket not initialized");
+  }
+  __classPrivateFieldGet4(this, _DictationController_webSocket, "f").on("message", (message) => {
+    callbacks.onNetworkActivity?.("received", message);
+    if (callbacks.onMessage) {
+      callbacks.onMessage(message);
+    }
+  });
+  __classPrivateFieldGet4(this, _DictationController_webSocket, "f").on("error", (event) => {
+    if (callbacks.onError) {
+      callbacks.onError(event);
+    }
+  });
+  __classPrivateFieldGet4(this, _DictationController_webSocket, "f").on("close", (event) => {
+    if (callbacks.onClose) {
+      callbacks.onClose(event);
+    }
+  });
+}, _DictationController_setupMediaRecorder = function _DictationController_setupMediaRecorder2(mediaRecorder) {
+  mediaRecorder.ondataavailable = (event) => {
+    __classPrivateFieldGet4(this, _DictationController_webSocket, "f")?.sendAudio(event.data);
+    __classPrivateFieldGet4(this, _DictationController_callbacks, "f")?.onNetworkActivity?.("sent", {
+      size: event.data.size,
+      type: "audio"
+    });
+  };
+};
+
+// dist/controllers/keybinding-controller.js
+var __classPrivateFieldGet5 = function(receiver, state, kind, f5) {
+  if (kind === "a" && !f5) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f5 : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f5 : kind === "a" ? f5.call(receiver) : f5 ? f5.value : state.get(receiver);
+};
+var __classPrivateFieldSet4 = function(receiver, state, value, kind, f5) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f5) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f5 : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return kind === "a" ? f5.call(receiver, value) : f5 ? f5.value = value : state.set(receiver, value), value;
+};
+var _KeybindingController_instances;
+var _KeybindingController_keydownHandler;
+var _KeybindingController_keyupHandler;
+var _KeybindingController_blurHandler;
+var _KeybindingController_setupListeners;
+var _KeybindingController_removeListeners;
+var KeybindingController = class {
+  constructor(host) {
+    _KeybindingController_instances.add(this);
+    _KeybindingController_keydownHandler.set(this, void 0);
+    _KeybindingController_keyupHandler.set(this, void 0);
+    _KeybindingController_blurHandler.set(this, void 0);
+    this.host = host;
+    host.addController(this);
+  }
+  hostConnected() {
+    __classPrivateFieldGet5(this, _KeybindingController_instances, "m", _KeybindingController_setupListeners).call(this);
+  }
+  hostDisconnected() {
+    __classPrivateFieldGet5(this, _KeybindingController_instances, "m", _KeybindingController_removeListeners).call(this);
+  }
+};
+_KeybindingController_keydownHandler = /* @__PURE__ */ new WeakMap(), _KeybindingController_keyupHandler = /* @__PURE__ */ new WeakMap(), _KeybindingController_blurHandler = /* @__PURE__ */ new WeakMap(), _KeybindingController_instances = /* @__PURE__ */ new WeakSet(), _KeybindingController_setupListeners = function _KeybindingController_setupListeners2() {
+  __classPrivateFieldGet5(this, _KeybindingController_instances, "m", _KeybindingController_removeListeners).call(this);
+  __classPrivateFieldSet4(this, _KeybindingController_keydownHandler, (event) => {
+    if (!this.host._keybinding) {
+      return;
     }
-    if (this._webSocket?.readyState === WebSocket.OPEN) {
-      this._webSocket.close();
+    if (shouldIgnoreKeybinding(document.activeElement)) {
+      return;
+    }
+    if (matchesKeybinding(event, this.host._keybinding)) {
+      if (!this.host.dispatchEvent(keybindingActivatedEvent(event))) {
+        return;
+      }
+      if (this.host._mode === "push-to-talk") {
+        this.host.startRecording();
+      }
+      if (this.host._mode === "toggle-to-talk") {
+        this.host.toggleRecording();
+      }
     }
-    this._webSocket = null;
-    this._cortiClient = null;
+  }, "f");
+  __classPrivateFieldSet4(this, _KeybindingController_keyupHandler, (event) => {
+    if (!this.host._keybinding) {
+      return;
+    }
+    if (this.host._mode === "push-to-talk" && matchesKeybinding(event, this.host._keybinding)) {
+      this.host.stopRecording();
+    }
+  }, "f");
+  __classPrivateFieldSet4(this, _KeybindingController_blurHandler, () => {
+    if (this.host._mode === "push-to-talk") {
+      this.host.stopRecording();
+    }
+  }, "f");
+  window.addEventListener("keydown", __classPrivateFieldGet5(this, _KeybindingController_keydownHandler, "f"));
+  window.addEventListener("keyup", __classPrivateFieldGet5(this, _KeybindingController_keyupHandler, "f"));
+  window.addEventListener("blur", __classPrivateFieldGet5(this, _KeybindingController_blurHandler, "f"));
+}, _KeybindingController_removeListeners = function _KeybindingController_removeListeners2() {
+  if (__classPrivateFieldGet5(this, _KeybindingController_keydownHandler, "f")) {
+    window.removeEventListener("keydown", __classPrivateFieldGet5(this, _KeybindingController_keydownHandler, "f"));
+    __classPrivateFieldSet4(this, _KeybindingController_keydownHandler, void 0, "f");
+  }
+  if (__classPrivateFieldGet5(this, _KeybindingController_keyupHandler, "f")) {
+    window.removeEventListener("keyup", __classPrivateFieldGet5(this, _KeybindingController_keyupHandler, "f"));
+    __classPrivateFieldSet4(this, _KeybindingController_keyupHandler, void 0, "f");
+  }
+  if (__classPrivateFieldGet5(this, _KeybindingController_blurHandler, "f")) {
+    window.removeEventListener("blur", __classPrivateFieldGet5(this, _KeybindingController_blurHandler, "f"));
+    __classPrivateFieldSet4(this, _KeybindingController_blurHandler, void 0, "f");
   }
 };
 
@@ -11013,14 +11563,36 @@ function calculateAudioLevel(analyser) {
   return Math.sqrt(sumSquares / dataArray.length);
 }
 
-// dist/controllers/MediaController.js
+// dist/controllers/media-controller.js
+var __classPrivateFieldSet5 = function(receiver, state, value, kind, f5) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f5) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f5 : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return kind === "a" ? f5.call(receiver, value) : f5 ? f5.value = value : state.set(receiver, value), value;
+};
+var __classPrivateFieldGet6 = function(receiver, state, kind, f5) {
+  if (kind === "a" && !f5) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f5 : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f5 : kind === "a" ? f5.call(receiver) : f5 ? f5.value : state.get(receiver);
+};
+var _MediaController_mediaStream;
+var _MediaController_audioContext;
+var _MediaController_analyser;
+var _MediaController_mediaRecorder;
+var _MediaController_visualiserInterval;
+var _MediaController_audioLevel;
+var _MediaController_onTrackEnded;
+var _MediaController_onAudioLevelChange;
 var MediaController = class {
   constructor(host) {
-    this._mediaStream = null;
-    this._audioContext = null;
-    this._analyser = null;
-    this._mediaRecorder = null;
-    this._audioLevel = 0;
+    _MediaController_mediaStream.set(this, null);
+    _MediaController_audioContext.set(this, null);
+    _MediaController_analyser.set(this, null);
+    _MediaController_mediaRecorder.set(this, null);
+    _MediaController_visualiserInterval.set(this, void 0);
+    _MediaController_audioLevel.set(this, 0);
+    _MediaController_onTrackEnded.set(this, void 0);
+    _MediaController_onAudioLevelChange.set(this, void 0);
     this.host = host;
     host.addController(this);
   }
@@ -11029,64 +11601,64 @@ var MediaController = class {
   }
   async initialize(onTrackEnded) {
     await this.cleanup();
-    this._onTrackEnded = onTrackEnded;
-    this._mediaStream = await getMediaStream(this.host._selectedDevice?.deviceId, this.host._debug_displayAudio);
-    this._mediaStream.getTracks().forEach((track) => {
+    __classPrivateFieldSet5(this, _MediaController_onTrackEnded, onTrackEnded, "f");
+    __classPrivateFieldSet5(this, _MediaController_mediaStream, await getMediaStream(this.host._selectedDevice?.deviceId, this.host._debug_displayAudio), "f");
+    __classPrivateFieldGet6(this, _MediaController_mediaStream, "f").getTracks().forEach((track) => {
       track.addEventListener("ended", () => {
-        if (this._onTrackEnded) {
-          this._onTrackEnded();
+        if (__classPrivateFieldGet6(this, _MediaController_onTrackEnded, "f")) {
+          __classPrivateFieldGet6(this, _MediaController_onTrackEnded, "f").call(this);
         }
       });
     });
-    const { audioContext, analyser } = createAudioAnalyzer(this._mediaStream);
-    this._audioContext = audioContext;
-    this._analyser = analyser;
-    this._mediaRecorder = new MediaRecorder(this._mediaStream);
+    const { audioContext, analyser } = createAudioAnalyzer(__classPrivateFieldGet6(this, _MediaController_mediaStream, "f"));
+    __classPrivateFieldSet5(this, _MediaController_audioContext, audioContext, "f");
+    __classPrivateFieldSet5(this, _MediaController_analyser, analyser, "f");
+    __classPrivateFieldSet5(this, _MediaController_mediaRecorder, new MediaRecorder(__classPrivateFieldGet6(this, _MediaController_mediaStream, "f")), "f");
   }
   getAudioLevel() {
-    return this._analyser ? calculateAudioLevel(this._analyser) : 0;
+    return __classPrivateFieldGet6(this, _MediaController_analyser, "f") ? calculateAudioLevel(__classPrivateFieldGet6(this, _MediaController_analyser, "f")) : 0;
   }
   startAudioLevelMonitoring(onAudioLevelChange) {
     this.stopAudioLevelMonitoring();
-    this._onAudioLevelChange = onAudioLevelChange;
-    this._visualiserInterval = window.setInterval(() => {
-      this._audioLevel = this.getAudioLevel() * 3;
+    __classPrivateFieldSet5(this, _MediaController_onAudioLevelChange, onAudioLevelChange, "f");
+    __classPrivateFieldSet5(this, _MediaController_visualiserInterval, window.setInterval(() => {
+      __classPrivateFieldSet5(this, _MediaController_audioLevel, this.getAudioLevel() * 3, "f");
       this.host.requestUpdate();
-      if (this._onAudioLevelChange) {
-        this._onAudioLevelChange(this._audioLevel);
+      if (__classPrivateFieldGet6(this, _MediaController_onAudioLevelChange, "f")) {
+        __classPrivateFieldGet6(this, _MediaController_onAudioLevelChange, "f").call(this, __classPrivateFieldGet6(this, _MediaController_audioLevel, "f"));
       }
-    }, 150);
+    }, 150), "f");
   }
   stopAudioLevelMonitoring() {
-    if (this._visualiserInterval) {
-      clearInterval(this._visualiserInterval);
-      this._visualiserInterval = void 0;
+    if (__classPrivateFieldGet6(this, _MediaController_visualiserInterval, "f")) {
+      clearInterval(__classPrivateFieldGet6(this, _MediaController_visualiserInterval, "f"));
+      __classPrivateFieldSet5(this, _MediaController_visualiserInterval, void 0, "f");
     }
-    this._audioLevel = 0;
+    __classPrivateFieldSet5(this, _MediaController_audioLevel, 0, "f");
     this.host.requestUpdate();
-    if (this._onAudioLevelChange) {
-      this._onAudioLevelChange(this._audioLevel);
+    if (__classPrivateFieldGet6(this, _MediaController_onAudioLevelChange, "f")) {
+      __classPrivateFieldGet6(this, _MediaController_onAudioLevelChange, "f").call(this, __classPrivateFieldGet6(this, _MediaController_audioLevel, "f"));
     }
   }
   async cleanup() {
     this.stopAudioLevelMonitoring();
-    if (this._mediaRecorder?.state === "recording") {
-      this._mediaRecorder.stop();
+    if (__classPrivateFieldGet6(this, _MediaController_mediaRecorder, "f")?.state === "recording") {
+      __classPrivateFieldGet6(this, _MediaController_mediaRecorder, "f").stop();
     }
-    if (this._mediaStream) {
-      this._mediaStream.getTracks().forEach((track) => {
+    if (__classPrivateFieldGet6(this, _MediaController_mediaStream, "f")) {
+      __classPrivateFieldGet6(this, _MediaController_mediaStream, "f").getTracks().forEach((track) => {
         track.stop();
       });
-      this._mediaStream = null;
+      __classPrivateFieldSet5(this, _MediaController_mediaStream, null, "f");
     }
-    if (this._audioContext && this._audioContext.state !== "closed") {
-      await this._audioContext.close();
+    if (__classPrivateFieldGet6(this, _MediaController_audioContext, "f") && __classPrivateFieldGet6(this, _MediaController_audioContext, "f").state !== "closed") {
+      await __classPrivateFieldGet6(this, _MediaController_audioContext, "f").close();
     }
-    this._audioContext = null;
-    this._analyser = null;
-    this._mediaRecorder = null;
-    this._onTrackEnded = void 0;
-    this._onAudioLevelChange = void 0;
+    __classPrivateFieldSet5(this, _MediaController_audioContext, null, "f");
+    __classPrivateFieldSet5(this, _MediaController_analyser, null, "f");
+    __classPrivateFieldSet5(this, _MediaController_mediaRecorder, null, "f");
+    __classPrivateFieldSet5(this, _MediaController_onTrackEnded, void 0, "f");
+    __classPrivateFieldSet5(this, _MediaController_onAudioLevelChange, void 0, "f");
   }
   /**
    * Stops the media recorder and waits for all buffered data to be flushed.
@@ -11094,23 +11666,24 @@ var MediaController = class {
    */
   async stopRecording() {
     return new Promise((resolve) => {
-      if (!this._mediaRecorder || this._mediaRecorder.state !== "recording") {
+      if (!__classPrivateFieldGet6(this, _MediaController_mediaRecorder, "f") || __classPrivateFieldGet6(this, _MediaController_mediaRecorder, "f").state !== "recording") {
         resolve();
         return;
       }
-      this._mediaRecorder.onstop = () => {
+      __classPrivateFieldGet6(this, _MediaController_mediaRecorder, "f").onstop = () => {
         resolve();
       };
-      this._mediaRecorder.stop();
+      __classPrivateFieldGet6(this, _MediaController_mediaRecorder, "f").stop();
     });
   }
   get mediaRecorder() {
-    return this._mediaRecorder;
+    return __classPrivateFieldGet6(this, _MediaController_mediaRecorder, "f");
   }
   get audioLevel() {
-    return this._audioLevel;
+    return __classPrivateFieldGet6(this, _MediaController_audioLevel, "f");
   }
 };
+_MediaController_mediaStream = /* @__PURE__ */ new WeakMap(), _MediaController_audioContext = /* @__PURE__ */ new WeakMap(), _MediaController_analyser = /* @__PURE__ */ new WeakMap(), _MediaController_mediaRecorder = /* @__PURE__ */ new WeakMap(), _MediaController_visualiserInterval = /* @__PURE__ */ new WeakMap(), _MediaController_audioLevel = /* @__PURE__ */ new WeakMap(), _MediaController_onTrackEnded = /* @__PURE__ */ new WeakMap(), _MediaController_onAudioLevelChange = /* @__PURE__ */ new WeakMap();
 
 // dist/styles/buttons.js
 var ButtonStyles = i`
@@ -11128,7 +11701,6 @@ var ButtonStyles = i`
     align-items: center;
     justify-content: center;
     transition: background 0.3s ease;
-    font-family: var(--component-font-family, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif);
   }
 
   button:hover {
@@ -11235,12 +11807,12 @@ var __decorate2 = function(decorators, target, key, desc) {
   else for (var i7 = decorators.length - 1; i7 >= 0; i7--) if (d3 = decorators[i7]) r7 = (c6 < 3 ? d3(r7) : c6 > 3 ? d3(target, key, r7) : d3(target, key)) || r7;
   return c6 > 3 && r7 && Object.defineProperty(target, key, r7), r7;
 };
-var SEGMENT_COUNT = 5;
-var AudioVisualiser = class AudioVisualiser2 extends i4 {
+var DictationAudioVisualiser = class DictationAudioVisualiser2 extends i4 {
   constructor() {
     super(...arguments);
     this.level = 0;
     this.active = false;
+    this.segmentCount = 5;
   }
   willUpdate(changedProperties) {
     if (changedProperties.has("level")) {
@@ -11248,11 +11820,11 @@ var AudioVisualiser = class AudioVisualiser2 extends i4 {
     }
   }
   render() {
-    const activeSegments = Math.round(this.level * SEGMENT_COUNT);
-    const segments = o8(o9(SEGMENT_COUNT), (i7) => x`<div class=${e6({
+    const activeSegments = Math.round(this.level * this.segmentCount);
+    const segments = o8(o9(this.segmentCount), (i7) => x`<div class=${e6({
       active: i7 < activeSegments,
       segment: true
-    })}></div>`);
+    })} />`);
     return x`
       <div class=${e6({
       active: this.active,
@@ -11263,16 +11835,19 @@ var AudioVisualiser = class AudioVisualiser2 extends i4 {
     `;
   }
 };
-AudioVisualiser.styles = audio_visualiser_default;
+DictationAudioVisualiser.styles = audio_visualiser_default;
 __decorate2([
   n4({ type: Number })
-], AudioVisualiser.prototype, "level", void 0);
+], DictationAudioVisualiser.prototype, "level", void 0);
 __decorate2([
   n4({ type: Boolean })
-], AudioVisualiser.prototype, "active", void 0);
-AudioVisualiser = __decorate2([
-  t3("audio-visualiser")
-], AudioVisualiser);
+], DictationAudioVisualiser.prototype, "active", void 0);
+__decorate2([
+  n4({ type: Number })
+], DictationAudioVisualiser.prototype, "segmentCount", void 0);
+DictationAudioVisualiser = __decorate2([
+  t3("dictation-audio-visualiser")
+], DictationAudioVisualiser);
 
 // dist/icons/icons.js
 var __decorate3 = function(decorators, target, key, desc) {
@@ -11432,29 +12007,48 @@ var __decorate4 = function(decorators, target, key, desc) {
   else for (var i7 = decorators.length - 1; i7 >= 0; i7--) if (d3 = decorators[i7]) r7 = (c6 < 3 ? d3(r7) : c6 > 3 ? d3(target, key, r7) : d3(target, key)) || r7;
   return c6 > 3 && r7 && Object.defineProperty(target, key, r7), r7;
 };
-var RecordingButton = class RecordingButton2 extends i4 {
+var __classPrivateFieldGet7 = function(receiver, state, kind, f5) {
+  if (kind === "a" && !f5) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f5 : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f5 : kind === "a" ? f5.call(receiver) : f5 ? f5.value : state.get(receiver);
+};
+var _DictationRecordingButton_instances;
+var _DictationRecordingButton_mediaController;
+var _DictationRecordingButton_dictationController;
+var _DictationRecordingButton_keybindingController;
+var _DictationRecordingButton_handleMouseDown;
+var _DictationRecordingButton_handleMouseUp;
+var _DictationRecordingButton_handleMouseLeave;
+var _DictationRecordingButton_handleWebSocketMessage;
+var _DictationRecordingButton_handleWebSocketError;
+var _DictationRecordingButton_handleWebSocketClose;
+var _DictationRecordingButton_handleStart;
+var _DictationRecordingButton_handleStop;
+var DictationRecordingButton = class DictationRecordingButton2 extends i4 {
   constructor() {
     super(...arguments);
+    _DictationRecordingButton_instances.add(this);
     this._recordingState = "stopped";
-    this.preventFocus = false;
-    this._mediaController = new MediaController(this);
-    this._dictationController = new DictationController(this);
-    this._handleWebSocketMessage = (message) => {
+    this.allowButtonFocus = false;
+    _DictationRecordingButton_mediaController.set(this, new MediaController(this));
+    _DictationRecordingButton_dictationController.set(this, new DictationController(this));
+    _DictationRecordingButton_keybindingController.set(this, new KeybindingController(this));
+    _DictationRecordingButton_handleWebSocketMessage.set(this, (message) => {
       switch (message.type) {
         case "CONFIG_ACCEPTED":
-          this._mediaController.mediaRecorder?.start(250);
-          this._mediaController.startAudioLevelMonitoring((level) => {
+          __classPrivateFieldGet7(this, _DictationRecordingButton_mediaController, "f").mediaRecorder?.start(AUDIO_CHUNK_INTERVAL_MS);
+          __classPrivateFieldGet7(this, _DictationRecordingButton_mediaController, "f").startAudioLevelMonitoring((level) => {
             this.dispatchEvent(audioLevelChangedEvent(level));
           });
           this.dispatchEvent(recordingStateChangedEvent("recording"));
           break;
         case "CONFIG_DENIED":
           this.dispatchEvent(errorEvent(`Config denied: ${message.reason ?? "Unknown reason"}`));
-          this._handleStop();
+          __classPrivateFieldGet7(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
           break;
         case "CONFIG_TIMEOUT":
           this.dispatchEvent(errorEvent("Config timeout"));
-          this._handleStop();
+          __classPrivateFieldGet7(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
           break;
         case "transcript":
           this.dispatchEvent(transcriptEvent(message));
@@ -11467,147 +12061,194 @@ var RecordingButton = class RecordingButton2 extends i4 {
           break;
         case "error":
           this.dispatchEvent(errorEvent(message.error));
-          this._handleStop();
+          __classPrivateFieldGet7(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
           break;
       }
-    };
-    this._handleWebSocketError = (error) => {
+    });
+    _DictationRecordingButton_handleWebSocketError.set(this, (error) => {
       this.dispatchEvent(errorEvent("Socket error: " + error.message));
-      this._handleStop();
-    };
-    this._handleWebSocketClose = (event) => {
+      __classPrivateFieldGet7(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
+    });
+    _DictationRecordingButton_handleWebSocketClose.set(this, (event) => {
       this.dispatchEvent(streamClosedEvent(event));
-    };
-  }
-  _handleMouseDown(event) {
-    if (this.preventFocus) {
-      event.preventDefault();
-    }
-  }
-  async _handleStart() {
-    this.dispatchEvent(recordingStateChangedEvent("initializing"));
-    try {
-      await this._mediaController.initialize(() => {
-        if (this._recordingState === "recording") {
-          this.dispatchEvent(errorEvent("Microphone access was lost."));
-          this._handleStop();
-        }
-      });
-      await this._dictationController.connect(this._mediaController.mediaRecorder, this._dictationConfig, {
-        onClose: this._handleWebSocketClose,
-        onError: this._handleWebSocketError,
-        onMessage: this._handleWebSocketMessage,
-        onNetworkActivity: (direction, data) => {
-          this.dispatchEvent(networkActivityEvent(direction, data));
-        }
-      });
-    } catch (error) {
-      this.dispatchEvent(errorEvent(error));
-      await this._handleStop();
-    }
-  }
-  async _handleStop() {
-    this.dispatchEvent(recordingStateChangedEvent("stopping"));
-    try {
-      this._mediaController.stopAudioLevelMonitoring();
-      await this._mediaController.stopRecording();
-      await this._dictationController.disconnect(this._handleWebSocketClose);
-      await this._mediaController.cleanup();
-    } catch (error) {
-      this.dispatchEvent(errorEvent(error));
-    }
-    this.dispatchEvent(recordingStateChangedEvent("stopped"));
-  }
-  _handleClick() {
-    if (this._recordingState === "stopped") {
-      this._handleStart();
-    } else if (this._recordingState === "recording") {
-      this._handleStop();
-    }
+    });
   }
   startRecording() {
     if (this._recordingState !== "stopped") {
       return;
     }
-    this._handleStart();
+    __classPrivateFieldGet7(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStart).call(this);
   }
   stopRecording() {
-    if (this._recordingState !== "recording") {
+    if (this._recordingState === "stopped" || this._recordingState === "stopping") {
       return;
     }
-    this._handleStop();
+    if (this._recordingState === "initializing") {
+      this.addEventListener("recording-state-changed", (event) => {
+        if (event.detail.state === "recording") {
+          __classPrivateFieldGet7(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
+        }
+      }, {
+        once: true
+      });
+      return;
+    }
+    __classPrivateFieldGet7(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
   }
   toggleRecording() {
-    this._handleClick();
+    if (this._recordingState === "stopped") {
+      __classPrivateFieldGet7(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStart).call(this);
+    } else if (this._recordingState === "recording") {
+      __classPrivateFieldGet7(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
+    }
   }
   render() {
     const isLoading = this._recordingState === "initializing" || this._recordingState === "stopping";
     const isRecording = this._recordingState === "recording";
     return x`
       <button
-        @mousedown=${this._handleMouseDown}
-        @click=${this._handleClick}
+        @mousedown=${__classPrivateFieldGet7(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleMouseDown)}
+        @mouseup=${__classPrivateFieldGet7(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleMouseUp)}
+        @mouseleave=${__classPrivateFieldGet7(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleMouseLeave)}
         ?disabled=${isLoading}
         class=${isRecording ? "red" : "accent"}
         aria-label=${isRecording ? "Stop recording" : "Start recording"}
         aria-pressed=${isRecording}
       >
-        ${isLoading ? x`<icon-loading-spinner></icon-loading-spinner>` : isRecording ? x`<icon-recording></icon-recording>` : x`<icon-mic-on></icon-mic-on>`}
-        <audio-visualiser
-          .level=${this._mediaController.audioLevel}
+        ${isLoading ? x`<icon-loading-spinner />` : isRecording ? x`<icon-recording />` : x`<icon-mic-on />`}
+        <dictation-audio-visualiser
+          .level=${__classPrivateFieldGet7(this, _DictationRecordingButton_mediaController, "f").audioLevel}
           ?active=${isRecording}
-        ></audio-visualiser>
+        />
       </button>
     `;
   }
 };
-RecordingButton.styles = [recording_button_default, buttons_default];
+_DictationRecordingButton_mediaController = /* @__PURE__ */ new WeakMap();
+_DictationRecordingButton_dictationController = /* @__PURE__ */ new WeakMap();
+_DictationRecordingButton_keybindingController = /* @__PURE__ */ new WeakMap();
+_DictationRecordingButton_handleWebSocketMessage = /* @__PURE__ */ new WeakMap();
+_DictationRecordingButton_handleWebSocketError = /* @__PURE__ */ new WeakMap();
+_DictationRecordingButton_handleWebSocketClose = /* @__PURE__ */ new WeakMap();
+_DictationRecordingButton_instances = /* @__PURE__ */ new WeakSet();
+_DictationRecordingButton_handleMouseDown = function _DictationRecordingButton_handleMouseDown2(event) {
+  if (!this.allowButtonFocus) {
+    event.preventDefault();
+  }
+  if (this._mode === "push-to-talk") {
+    this.startRecording();
+  }
+};
+_DictationRecordingButton_handleMouseUp = function _DictationRecordingButton_handleMouseUp2() {
+  if (this._mode === "push-to-talk") {
+    this.stopRecording();
+    return;
+  }
+  if (this._mode === "toggle-to-talk") {
+    this.toggleRecording();
+  }
+};
+_DictationRecordingButton_handleMouseLeave = function _DictationRecordingButton_handleMouseLeave2() {
+  if (this._mode === "push-to-talk") {
+    this.stopRecording();
+  }
+};
+_DictationRecordingButton_handleStart = async function _DictationRecordingButton_handleStart2() {
+  this.dispatchEvent(recordingStateChangedEvent("initializing"));
+  try {
+    await __classPrivateFieldGet7(this, _DictationRecordingButton_mediaController, "f").initialize(() => {
+      if (this._recordingState === "recording") {
+        this.dispatchEvent(errorEvent("Recording device access was lost."));
+        __classPrivateFieldGet7(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
+      }
+    });
+    const isNewConnection = await __classPrivateFieldGet7(this, _DictationRecordingButton_dictationController, "f").connect(__classPrivateFieldGet7(this, _DictationRecordingButton_mediaController, "f").mediaRecorder, this._dictationConfig, {
+      onClose: __classPrivateFieldGet7(this, _DictationRecordingButton_handleWebSocketClose, "f"),
+      onError: __classPrivateFieldGet7(this, _DictationRecordingButton_handleWebSocketError, "f"),
+      onMessage: __classPrivateFieldGet7(this, _DictationRecordingButton_handleWebSocketMessage, "f"),
+      onNetworkActivity: (direction, data) => {
+        this.dispatchEvent(networkActivityEvent(direction, data));
+      }
+    });
+    if (!isNewConnection) {
+      __classPrivateFieldGet7(this, _DictationRecordingButton_mediaController, "f").mediaRecorder?.start(AUDIO_CHUNK_INTERVAL_MS);
+      __classPrivateFieldGet7(this, _DictationRecordingButton_mediaController, "f").startAudioLevelMonitoring((level) => {
+        this.dispatchEvent(audioLevelChangedEvent(level));
+      });
+      this.dispatchEvent(recordingStateChangedEvent("recording"));
+    }
+  } catch (error) {
+    this.dispatchEvent(errorEvent(error));
+    await __classPrivateFieldGet7(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
+  }
+};
+_DictationRecordingButton_handleStop = async function _DictationRecordingButton_handleStop2() {
+  this.dispatchEvent(recordingStateChangedEvent("stopping"));
+  try {
+    __classPrivateFieldGet7(this, _DictationRecordingButton_mediaController, "f").stopAudioLevelMonitoring();
+    await __classPrivateFieldGet7(this, _DictationRecordingButton_mediaController, "f").stopRecording();
+    await __classPrivateFieldGet7(this, _DictationRecordingButton_dictationController, "f").disconnect(__classPrivateFieldGet7(this, _DictationRecordingButton_handleWebSocketClose, "f"));
+    await __classPrivateFieldGet7(this, _DictationRecordingButton_mediaController, "f").cleanup();
+  } catch (error) {
+    this.dispatchEvent(errorEvent(error));
+  }
+  this.dispatchEvent(recordingStateChangedEvent("stopped"));
+};
+DictationRecordingButton.styles = [recording_button_default, buttons_default];
 __decorate4([
   c5({ context: recordingStateContext, subscribe: true }),
   r5()
-], RecordingButton.prototype, "_recordingState", void 0);
+], DictationRecordingButton.prototype, "_recordingState", void 0);
 __decorate4([
   c5({ context: selectedDeviceContext, subscribe: true }),
   r5()
-], RecordingButton.prototype, "_selectedDevice", void 0);
+], DictationRecordingButton.prototype, "_selectedDevice", void 0);
 __decorate4([
   c5({ context: accessTokenContext, subscribe: true }),
   r5()
-], RecordingButton.prototype, "_accessToken", void 0);
+], DictationRecordingButton.prototype, "_accessToken", void 0);
 __decorate4([
   c5({ context: authConfigContext, subscribe: true }),
   r5()
-], RecordingButton.prototype, "_authConfig", void 0);
+], DictationRecordingButton.prototype, "_authConfig", void 0);
 __decorate4([
   c5({ context: regionContext, subscribe: true }),
   r5()
-], RecordingButton.prototype, "_region", void 0);
+], DictationRecordingButton.prototype, "_region", void 0);
 __decorate4([
   c5({ context: tenantNameContext, subscribe: true }),
   r5()
-], RecordingButton.prototype, "_tenantName", void 0);
+], DictationRecordingButton.prototype, "_tenantName", void 0);
 __decorate4([
   c5({ context: dictationConfigContext, subscribe: true }),
   r5()
-], RecordingButton.prototype, "_dictationConfig", void 0);
+], DictationRecordingButton.prototype, "_dictationConfig", void 0);
 __decorate4([
   c5({ context: socketUrlContext, subscribe: true }),
   r5()
-], RecordingButton.prototype, "_socketUrl", void 0);
+], DictationRecordingButton.prototype, "_socketUrl", void 0);
 __decorate4([
   c5({ context: socketProxyContext, subscribe: true }),
   r5()
-], RecordingButton.prototype, "_socketProxy", void 0);
+], DictationRecordingButton.prototype, "_socketProxy", void 0);
 __decorate4([
   c5({ context: debugDisplayAudioContext, subscribe: true }),
   r5()
-], RecordingButton.prototype, "_debug_displayAudio", void 0);
+], DictationRecordingButton.prototype, "_debug_displayAudio", void 0);
+__decorate4([
+  c5({ context: keybindingContext, subscribe: true }),
+  r5()
+], DictationRecordingButton.prototype, "_keybinding", void 0);
+__decorate4([
+  c5({ context: modeContext, subscribe: true }),
+  r5()
+], DictationRecordingButton.prototype, "_mode", void 0);
 __decorate4([
   n4({ type: Boolean })
-], RecordingButton.prototype, "preventFocus", void 0);
-RecordingButton = __decorate4([
-  t3("recording-button")
-], RecordingButton);
+], DictationRecordingButton.prototype, "allowButtonFocus", void 0);
+DictationRecordingButton = __decorate4([
+  t3("dictation-recording-button")
+], DictationRecordingButton);
 
 // dist/styles/callout.js
 var CalloutStyles = i`
@@ -11661,21 +12302,23 @@ var SettingsMenuStyles = i`
   .settings-wrapper {
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: 16px;
+  }
+  .settings-group {
+    background: var(--muted-background, light-dark(#fafafa, #2a2a2a));
+    padding: 12px;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
   }
 `;
 var settings_menu_default = SettingsMenuStyles;
 
 // dist/styles/select.js
-var SelectStyles = i`
-  label {
-    display: block;
-    font-size: 0.8rem;
-    padding-bottom: 0.5rem;
-    font-weight: 500;
-    color: var(--component-text-color, light-dark(#333, #eee));
-    pointer-events: none;
-  }
+var SelectStyles = [
+  LabelStyles,
+  i`
   select {
     background: var(--card-background, light-dark(#fff, #333));
     color: var(--component-text-color, light-dark(#333, #eee));
@@ -11699,42 +12342,10 @@ var SelectStyles = i`
     outline: 2px solid var(--action-accent-background, light-dark(#007bff, #0056b3));
     /* outline-offset: 2px; */
   }
-`;
+`
+];
 var select_default = SelectStyles;
 
-// dist/utils/devices.js
-async function requestMicAccess() {
-  if (!navigator.permissions) {
-    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-    stream.getTracks().forEach((track) => {
-      track.stop();
-    });
-    return;
-  }
-  const permissionStatus = await navigator.permissions.query({
-    name: "microphone"
-  });
-  if (permissionStatus.state === "denied") {
-    throw new Error("Microphone permission is denied");
-  }
-  if (permissionStatus.state === "prompt") {
-    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-    stream.getTracks().forEach((track) => {
-      track.stop();
-    });
-  }
-}
-async function getAudioDevices() {
-  if (!navigator.mediaDevices?.enumerateDevices) {
-    throw new Error("MediaDevices API is not available");
-  }
-  await requestMicAccess();
-  const devices = await navigator.mediaDevices.enumerateDevices();
-  const audioDevices = devices.filter((device) => device.kind === "audioinput");
-  const defaultDevice = audioDevices.length > 0 ? audioDevices[0] : void 0;
-  return { defaultDevice, devices: audioDevices };
-}
-
 // dist/components/device-selector.js
 var __decorate5 = function(decorators, target, key, desc) {
   var c6 = arguments.length, r7 = c6 < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d3;
@@ -11742,49 +12353,18 @@ var __decorate5 = function(decorators, target, key, desc) {
   else for (var i7 = decorators.length - 1; i7 >= 0; i7--) if (d3 = decorators[i7]) r7 = (c6 < 3 ? d3(r7) : c6 > 3 ? d3(target, key, r7) : d3(target, key)) || r7;
   return c6 > 3 && r7 && Object.defineProperty(target, key, r7), r7;
 };
-var DeviceSelector = class DeviceSelector2 extends i4 {
+var __classPrivateFieldGet8 = function(receiver, state, kind, f5) {
+  if (kind === "a" && !f5) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f5 : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f5 : kind === "a" ? f5.call(receiver) : f5 ? f5.value : state.get(receiver);
+};
+var _DictationDeviceSelector_instances;
+var _DictationDeviceSelector_handleSelectDevice;
+var DictationDeviceSelector = class DictationDeviceSelector2 extends i4 {
   constructor() {
     super(...arguments);
+    _DictationDeviceSelector_instances.add(this);
     this.disabled = false;
-    this._loadedDevices = [];
-    this._handleDeviceChange = async () => {
-      if (this._devicesAutoLoaded()) {
-        await this._loadDevices();
-      }
-    };
-  }
-  _devicesAutoLoaded() {
-    return this._loadedDevices === this._devices;
-  }
-  async connectedCallback() {
-    super.connectedCallback();
-    if (!this._devices) {
-      await this._loadDevices();
-      navigator.mediaDevices.addEventListener("devicechange", this._handleDeviceChange);
-    }
-    this.dispatchEvent(readyEvent());
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    navigator.mediaDevices.removeEventListener("devicechange", this._handleDeviceChange);
-  }
-  async _loadDevices() {
-    try {
-      const { devices, defaultDevice } = await getAudioDevices();
-      this._loadedDevices = devices;
-      const selectedDevice = devices.find((d3) => d3.deviceId === this._selectedDevice?.deviceId) ?? defaultDevice;
-      this.dispatchEvent(recordingDevicesChangedEvent(devices, selectedDevice));
-    } catch (error) {
-      this.dispatchEvent(errorEvent(error));
-    }
-  }
-  _handleSelectDevice(e10) {
-    const deviceId = e10.target.value;
-    const device = this._devices?.find((d3) => d3.deviceId === deviceId);
-    if (!device) {
-      return;
-    }
-    this.dispatchEvent(recordingDevicesChangedEvent(this._devices || [], device));
   }
   render() {
     return x`
@@ -11795,7 +12375,7 @@ var DeviceSelector = class DeviceSelector2 extends i4 {
         <select
           id="device-select"
           aria-labelledby="device-select-label"
-          @change=${this._handleSelectDevice}
+          @change=${__classPrivateFieldGet8(this, _DictationDeviceSelector_instances, "m", _DictationDeviceSelector_handleSelectDevice)}
           ?disabled=${this.disabled || !this._devices || this._devices.length === 0}
         >
           ${this._devices?.map((device) => x`
@@ -11811,87 +12391,199 @@ var DeviceSelector = class DeviceSelector2 extends i4 {
     `;
   }
 };
-DeviceSelector.styles = select_default;
+_DictationDeviceSelector_instances = /* @__PURE__ */ new WeakSet();
+_DictationDeviceSelector_handleSelectDevice = function _DictationDeviceSelector_handleSelectDevice2(e10) {
+  const deviceId = e10.target.value;
+  const device = this._devices?.find((d3) => d3.deviceId === deviceId);
+  if (!device) {
+    return;
+  }
+  this.dispatchEvent(recordingDevicesChangedEvent(this._devices || [], device));
+};
+DictationDeviceSelector.styles = select_default;
 __decorate5([
   c5({ context: devicesContext, subscribe: true }),
   r5()
-], DeviceSelector.prototype, "_devices", void 0);
+], DictationDeviceSelector.prototype, "_devices", void 0);
 __decorate5([
   c5({ context: selectedDeviceContext, subscribe: true }),
   r5()
-], DeviceSelector.prototype, "_selectedDevice", void 0);
+], DictationDeviceSelector.prototype, "_selectedDevice", void 0);
 __decorate5([
   n4({ type: Boolean })
-], DeviceSelector.prototype, "disabled", void 0);
-DeviceSelector = __decorate5([
-  t3("device-selector")
-], DeviceSelector);
-
-// dist/utils/languages.js
-var DEFAULT_LANGUAGES_BY_REGION = {
-  default: LANGUAGES_SUPPORTED_EU,
-  eu: LANGUAGES_SUPPORTED_EU,
-  us: LANGUAGES_SUPPORTED_US
-};
-function getLanguageName(languageCode) {
-  try {
-    const userLocale = navigator.language || "en";
-    const displayNames = new Intl.DisplayNames([userLocale], {
-      type: "language"
-    });
-    const languageName = displayNames.of(languageCode);
-    return languageName || languageCode;
-  } catch {
-    return languageCode;
+], DictationDeviceSelector.prototype, "disabled", void 0);
+DictationDeviceSelector = __decorate5([
+  t3("dictation-device-selector")
+], DictationDeviceSelector);
+
+// dist/styles/keybinding-selector.js
+var KeybindingSelectorStyles = [
+  LabelStyles,
+  i`
+  :host {
+    display: block;
   }
-}
-function getLanguagesByRegion(region) {
-  const languages = DEFAULT_LANGUAGES_BY_REGION[region || "default"] || DEFAULT_LANGUAGES_BY_REGION["default"];
-  const defaultLanguage = languages?.[0];
-  return { defaultLanguage, languages };
-}
+  .keybinding-selector-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: var(--card-padding, 4px) 8px;
+    background: var(--card-background, light-dark(#fff, #333));
+    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));
+    border-radius: var(--card-inner-border-radius, 6px);
+    overflow: hidden;
+  }
+  .keybinding-selector-wrapper:focus-within {
+    border-color: var(--action-accent-background, light-dark(#007bff, #0056b3));
+    outline: 2px solid var(--action-accent-background, light-dark(#007bff, #0056b3));
+  }
+  .keybinding-selector-input {
+    flex: 1;
+    min-width: 0;
+    border: none;
+    background: transparent;
+    font-size: 14px;
+    line-height: 24px;
+    color: var(--component-text-color, light-dark(#333, #eee));
+    outline: none;
+    padding: 0;
+    cursor: text;
+  }
+  .keybinding-selector-input::placeholder {
+    opacity: 0.6;
+    color: var(--component-text-color, light-dark(#333, #eee));
+  }
+  .keybinding-selector-input:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .keybinding-key {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 0.5rem;
+    height: 24px;
+    background: var(--card-background, light-dark(#fff, #333));
+    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));
+    border-radius: var(--card-inner-border-radius, 6px);
+    box-shadow: var(--card-box-shadow, 0 2px 5px rgba(0, 0, 0, 0.1));
+    font-size: 16px;
+    line-height: 28px;
+    color: var(--component-text-color, light-dark(#333, #eee));
+    opacity: 0.6;
+    text-align: center;
+    flex-shrink: 0;
+  }
+  .keybinding-help {
+    font-size: 12px;
+    line-height: 20px;
+    color: var(--component-text-color, light-dark(#333, #eee));
+    opacity: 0.6;
+    margin: 0;
+    letter-spacing: 0.01px;
+    padding-top: 8px;
+  }
+`
+];
+var keybinding_selector_default = KeybindingSelectorStyles;
 
-// dist/components/language-selector.js
+// dist/components/keybinding-selector.js
 var __decorate6 = function(decorators, target, key, desc) {
   var c6 = arguments.length, r7 = c6 < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d3;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r7 = Reflect.decorate(decorators, target, key, desc);
   else for (var i7 = decorators.length - 1; i7 >= 0; i7--) if (d3 = decorators[i7]) r7 = (c6 < 3 ? d3(r7) : c6 > 3 ? d3(target, key, r7) : d3(target, key)) || r7;
   return c6 > 3 && r7 && Object.defineProperty(target, key, r7), r7;
 };
-var LanguageSelector = class LanguageSelector2 extends i4 {
+var __classPrivateFieldGet9 = function(receiver, state, kind, f5) {
+  if (kind === "a" && !f5) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f5 : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f5 : kind === "a" ? f5.call(receiver) : f5 ? f5.value : state.get(receiver);
+};
+var _DictationKeybindingSelector_instances;
+var _DictationKeybindingSelector_handleKeybindingInputFocus;
+var _DictationKeybindingSelector_handleKeybindingInputBlur;
+var _DictationKeybindingSelector_handleKeybindingKeyDown;
+var DictationKeybindingSelector = class DictationKeybindingSelector2 extends i4 {
   constructor() {
     super(...arguments);
+    _DictationKeybindingSelector_instances.add(this);
     this.disabled = false;
-    this._loadedLanguages = [];
+    this._isCapturingKeybinding = false;
   }
-  _languagesAutoLoaded() {
-    return this._loadedLanguages === this._languages;
-  }
-  async connectedCallback() {
-    super.connectedCallback();
-    if (this._languages) {
-      return;
-    }
-    await this._loadLanguages();
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("_region") && this._languagesAutoLoaded()) {
-      this._loadLanguages();
-    }
+  render() {
+    return x`
+      <div>
+        <label>Keybinding</label>
+        <div class="keybinding-selector-wrapper">
+          <div class="keybinding-key">${this._keybinding}</div>
+          <input
+            type="text"
+            class="keybinding-selector-input"
+            .value=""
+            placeholder="Click and press a key..."
+            readonly
+            @focusin=${__classPrivateFieldGet9(this, _DictationKeybindingSelector_instances, "m", _DictationKeybindingSelector_handleKeybindingInputFocus)}
+            @focusout=${__classPrivateFieldGet9(this, _DictationKeybindingSelector_instances, "m", _DictationKeybindingSelector_handleKeybindingInputBlur)}
+            @keydown=${__classPrivateFieldGet9(this, _DictationKeybindingSelector_instances, "m", _DictationKeybindingSelector_handleKeybindingKeyDown)}
+            ?disabled=${this.disabled}
+          />
+        </div>
+        <p class="keybinding-help">
+          Press ${this._keybinding} to start/stop recording
+        </p>
+      </div>
+    `;
   }
-  async _loadLanguages() {
-    const { languages, defaultLanguage } = getLanguagesByRegion(this._region);
-    this._loadedLanguages = languages;
-    const selectedLanguage = this._dictationConfig?.primaryLanguage ?? defaultLanguage;
-    this.dispatchEvent(languagesChangedEvent(languages, selectedLanguage));
-    if (selectedLanguage) {
-      this.dispatchEvent(languageChangedEvent(selectedLanguage));
-    }
+};
+_DictationKeybindingSelector_instances = /* @__PURE__ */ new WeakSet();
+_DictationKeybindingSelector_handleKeybindingInputFocus = function _DictationKeybindingSelector_handleKeybindingInputFocus2() {
+  this._isCapturingKeybinding = true;
+};
+_DictationKeybindingSelector_handleKeybindingInputBlur = function _DictationKeybindingSelector_handleKeybindingInputBlur2() {
+  this._isCapturingKeybinding = false;
+};
+_DictationKeybindingSelector_handleKeybindingKeyDown = function _DictationKeybindingSelector_handleKeybindingKeyDown2(event) {
+  if (!this._isCapturingKeybinding) {
+    return;
   }
-  _handleSelectLanguage(e10) {
-    const language = e10.target.value;
-    this.dispatchEvent(languagesChangedEvent(this._languages || [], language));
-    this.dispatchEvent(languageChangedEvent(language));
+  event.preventDefault();
+  event.stopPropagation();
+  this.dispatchEvent(keybindingChangedEvent(event.key, event.code));
+};
+DictationKeybindingSelector.styles = keybinding_selector_default;
+__decorate6([
+  c5({ context: keybindingContext, subscribe: true }),
+  r5()
+], DictationKeybindingSelector.prototype, "_keybinding", void 0);
+__decorate6([
+  n4({ type: Boolean })
+], DictationKeybindingSelector.prototype, "disabled", void 0);
+__decorate6([
+  r5()
+], DictationKeybindingSelector.prototype, "_isCapturingKeybinding", void 0);
+DictationKeybindingSelector = __decorate6([
+  t3("dictation-keybinding-selector")
+], DictationKeybindingSelector);
+
+// dist/components/language-selector.js
+var __decorate7 = function(decorators, target, key, desc) {
+  var c6 = arguments.length, r7 = c6 < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d3;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r7 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i7 = decorators.length - 1; i7 >= 0; i7--) if (d3 = decorators[i7]) r7 = (c6 < 3 ? d3(r7) : c6 > 3 ? d3(target, key, r7) : d3(target, key)) || r7;
+  return c6 > 3 && r7 && Object.defineProperty(target, key, r7), r7;
+};
+var __classPrivateFieldGet10 = function(receiver, state, kind, f5) {
+  if (kind === "a" && !f5) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f5 : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f5 : kind === "a" ? f5.call(receiver) : f5 ? f5.value : state.get(receiver);
+};
+var _DictationLanguageSelector_instances;
+var _DictationLanguageSelector_handleSelectLanguage;
+var DictationLanguageSelector = class DictationLanguageSelector2 extends i4 {
+  constructor() {
+    super(...arguments);
+    _DictationLanguageSelector_instances.add(this);
+    this.disabled = false;
   }
   render() {
     return x`
@@ -11902,7 +12594,7 @@ var LanguageSelector = class LanguageSelector2 extends i4 {
         <select
           id="language-select"
           aria-labelledby="language-select-label"
-          @change=${this._handleSelectLanguage}
+          @change=${__classPrivateFieldGet10(this, _DictationLanguageSelector_instances, "m", _DictationLanguageSelector_handleSelectLanguage)}
           ?disabled=${this.disabled || !this._languages || this._languages.length === 0}
         >
           ${this._languages?.map((language) => x`
@@ -11918,50 +12610,176 @@ var LanguageSelector = class LanguageSelector2 extends i4 {
     `;
   }
 };
-LanguageSelector.styles = select_default;
-__decorate6([
+_DictationLanguageSelector_instances = /* @__PURE__ */ new WeakSet();
+_DictationLanguageSelector_handleSelectLanguage = function _DictationLanguageSelector_handleSelectLanguage2(e10) {
+  const language = e10.target.value;
+  this.dispatchEvent(languagesChangedEvent(this._languages || [], language));
+  this.dispatchEvent(languageChangedEvent(language));
+};
+DictationLanguageSelector.styles = select_default;
+__decorate7([
   c5({ context: languagesContext, subscribe: true }),
   r5()
-], LanguageSelector.prototype, "_languages", void 0);
-__decorate6([
+], DictationLanguageSelector.prototype, "_languages", void 0);
+__decorate7([
   c5({ context: dictationConfigContext, subscribe: true }),
   r5()
-], LanguageSelector.prototype, "_dictationConfig", void 0);
-__decorate6([
+], DictationLanguageSelector.prototype, "_dictationConfig", void 0);
+__decorate7([
   n4({ type: Boolean })
-], LanguageSelector.prototype, "disabled", void 0);
-__decorate6([
-  c5({ context: regionContext, subscribe: true }),
+], DictationLanguageSelector.prototype, "disabled", void 0);
+DictationLanguageSelector = __decorate7([
+  t3("dictation-language-selector")
+], DictationLanguageSelector);
+
+// dist/styles/mode-selector.js
+var ModeSelectorStyles = [
+  LabelStyles,
+  i`
+  :host {
+    display: block;
+  }
+  .mode-selector-tabs {
+    display: flex;
+    background: var(--muted-background, light-dark(#fafafa, #2a2a2a));
+    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));
+    border-radius: var(--card-inner-border-radius, 6px);
+    padding: 0;
+    overflow: hidden;
+    align-items: center;
+    justify-content: center;
+    text-wrap: nowrap;
+    gap: 2px;
+  }
+  .mode-selector-tab {
+    flex: 1;
+    padding: 4px 8px;
+    border: 1px solid transparent;
+    background: transparent;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+    color: var(--component-text-color, light-dark(#333, #eee));
+    opacity: 0.6;
+    cursor: pointer;
+    transition: all 0.2s;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--card-inner-border-radius, 6px);
+    margin: -1px;
+  }
+  .mode-selector-tab:hover:not(:disabled) {
+    opacity: 1;
+  }
+  .mode-selector-tab.active {
+    background: var(--card-background, light-dark(#fff, #333));
+    border-color: var(--card-border-color, light-dark(#ddd, #555));
+    box-shadow: var(--card-box-shadow, 0 2px 5px rgba(0, 0, 0, 0.1));
+    opacity: 1;
+  }
+  .mode-selector-tab:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`
+];
+var mode_selector_default = ModeSelectorStyles;
+
+// dist/components/mode-selector.js
+var __decorate8 = function(decorators, target, key, desc) {
+  var c6 = arguments.length, r7 = c6 < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d3;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r7 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i7 = decorators.length - 1; i7 >= 0; i7--) if (d3 = decorators[i7]) r7 = (c6 < 3 ? d3(r7) : c6 > 3 ? d3(target, key, r7) : d3(target, key)) || r7;
+  return c6 > 3 && r7 && Object.defineProperty(target, key, r7), r7;
+};
+var __classPrivateFieldGet11 = function(receiver, state, kind, f5) {
+  if (kind === "a" && !f5) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f5 : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f5 : kind === "a" ? f5.call(receiver) : f5 ? f5.value : state.get(receiver);
+};
+var _DictationModeSelector_instances;
+var _DictationModeSelector_handleModeChange;
+var DictationModeSelector = class DictationModeSelector2 extends i4 {
+  constructor() {
+    super(...arguments);
+    _DictationModeSelector_instances.add(this);
+    this._mode = "toggle-to-talk";
+    this.disabled = false;
+  }
+  render() {
+    return x`
+      <div>
+        <label>Dictation Mode</label>
+        <div class="mode-selector-tabs">
+          <button
+            class=${e6({
+      active: this._mode === "toggle-to-talk",
+      "mode-selector-tab": true
+    })}
+            @click=${() => __classPrivateFieldGet11(this, _DictationModeSelector_instances, "m", _DictationModeSelector_handleModeChange).call(this, "toggle-to-talk")}
+            ?disabled=${this.disabled}
+          >
+            Toggle-to-Talk
+          </button>
+          <button
+            class=${e6({
+      active: this._mode === "push-to-talk",
+      "mode-selector-tab": true
+    })}
+            @click=${() => __classPrivateFieldGet11(this, _DictationModeSelector_instances, "m", _DictationModeSelector_handleModeChange).call(this, "push-to-talk")}
+            ?disabled=${this.disabled}
+          >
+            Push-to-Talk
+          </button>
+        </div>
+      </div>
+    `;
+  }
+};
+_DictationModeSelector_instances = /* @__PURE__ */ new WeakSet();
+_DictationModeSelector_handleModeChange = function _DictationModeSelector_handleModeChange2(mode) {
+  this.dispatchEvent(modeChangedEvent(mode));
+};
+DictationModeSelector.styles = mode_selector_default;
+__decorate8([
+  c5({ context: modeContext, subscribe: true }),
   r5()
-], LanguageSelector.prototype, "_region", void 0);
-LanguageSelector = __decorate6([
-  t3("language-selector")
-], LanguageSelector);
+], DictationModeSelector.prototype, "_mode", void 0);
+__decorate8([
+  n4({ type: Boolean })
+], DictationModeSelector.prototype, "disabled", void 0);
+DictationModeSelector = __decorate8([
+  t3("dictation-mode-selector")
+], DictationModeSelector);
 
 // dist/components/settings-menu.js
-var __decorate7 = function(decorators, target, key, desc) {
+var __decorate9 = function(decorators, target, key, desc) {
   var c6 = arguments.length, r7 = c6 < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d3;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r7 = Reflect.decorate(decorators, target, key, desc);
   else for (var i7 = decorators.length - 1; i7 >= 0; i7--) if (d3 = decorators[i7]) r7 = (c6 < 3 ? d3(r7) : c6 > 3 ? d3(target, key, r7) : d3(target, key)) || r7;
   return c6 > 3 && r7 && Object.defineProperty(target, key, r7), r7;
 };
-var SettingsMenu = class SettingsMenu2 extends i4 {
+var DictationSettingsMenu = class DictationSettingsMenu2 extends i4 {
   constructor() {
     super(...arguments);
     this._recordingState = "stopped";
     this.settingsEnabled = ["device", "language"];
   }
   render() {
-    if (!this.settingsEnabled || this.settingsEnabled.length === 0) {
+    if (this.settingsEnabled?.length === 0) {
       return E;
     }
     const isRecording = this._recordingState === "recording";
     const showDeviceSelector = this.settingsEnabled.includes("device");
     const showLanguageSelector = this.settingsEnabled.includes("language");
+    const showModeSelector = this.settingsEnabled.includes("mode");
+    const showKeybinding = this.settingsEnabled.includes("keybinding");
     return x`
       <div class="mic-selector">
         <button id="settings-popover-button" popovertarget="settings-popover">
-          <icon-settings></icon-settings>
+          <icon-settings />
         </button>
         <div id="settings-popover" popover>
           <div class="settings-wrapper">
@@ -11970,53 +12788,71 @@ var SettingsMenu = class SettingsMenu2 extends i4 {
                     Recording is in progress. Stop recording to change settings.
                   </div>
                 ` : E}
-            ${showDeviceSelector ? x`<device-selector
+            ${showDeviceSelector ? x`<dictation-device-selector
                   ?disabled=${isRecording}
-                ></device-selector>` : E}
-            ${showLanguageSelector ? x`<language-selector
+                />` : E}
+            ${showLanguageSelector ? x`<dictation-language-selector
                   ?disabled=${isRecording}
-                ></language-selector>` : E}
+                />` : E}
+            ${showModeSelector || showKeybinding ? x`
+                  <div class="settings-group">
+                    ${showModeSelector ? x`<dictation-mode-selector
+                            ?disabled=${isRecording}
+                          />` : E}
+                    ${showKeybinding ? x`<dictation-keybinding-selector
+                            ?disabled=${isRecording}
+                          />` : E}
+                  </div>
+                ` : E}
           </div>
         </div>
       </div>
     `;
   }
 };
-SettingsMenu.styles = [
+DictationSettingsMenu.styles = [
   settings_menu_default,
   buttons_default,
   callout_default
 ];
-__decorate7([
+__decorate9([
   c5({ context: recordingStateContext, subscribe: true }),
   r5()
-], SettingsMenu.prototype, "_recordingState", void 0);
-__decorate7([
+], DictationSettingsMenu.prototype, "_recordingState", void 0);
+__decorate9([
   n4({
     converter: commaSeparatedConverter,
     type: Array
   })
-], SettingsMenu.prototype, "settingsEnabled", void 0);
-SettingsMenu = __decorate7([
-  t3("settings-menu")
-], SettingsMenu);
+], DictationSettingsMenu.prototype, "settingsEnabled", void 0);
+DictationSettingsMenu = __decorate9([
+  t3("dictation-settings-menu")
+], DictationSettingsMenu);
 
 // dist/components/corti-dictation.js
-var __decorate8 = function(decorators, target, key, desc) {
+var __decorate10 = function(decorators, target, key, desc) {
   var c6 = arguments.length, r7 = c6 < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d3;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r7 = Reflect.decorate(decorators, target, key, desc);
   else for (var i7 = decorators.length - 1; i7 >= 0; i7--) if (d3 = decorators[i7]) r7 = (c6 < 3 ? d3(r7) : c6 > 3 ? d3(target, key, r7) : d3(target, key)) || r7;
   return c6 > 3 && r7 && Object.defineProperty(target, key, r7), r7;
 };
+var __classPrivateFieldGet12 = function(receiver, state, kind, f5) {
+  if (kind === "a" && !f5) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f5 : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f5 : kind === "a" ? f5.call(receiver) : f5 ? f5.value : state.get(receiver);
+};
+var _CortiDictation_recordingButtonRef;
+var _CortiDictation_contextProviderRef;
 var CortiDictation = class CortiDictation2 extends i4 {
   constructor() {
     super(...arguments);
-    this.recordingButtonRef = e7();
-    this.contextProviderRef = e7();
+    _CortiDictation_recordingButtonRef.set(this, e7());
+    _CortiDictation_contextProviderRef.set(this, e7());
     this.settingsEnabled = ["device", "language"];
     this.allowButtonFocus = false;
     this.debug_displayAudio = false;
     this._dictationConfig = DEFAULT_DICTATION_CONFIG;
+    this._mode = "toggle-to-talk";
   }
   /**
    * List of all language codes available for use with the Web Component.
@@ -12026,7 +12862,7 @@ var CortiDictation = class CortiDictation2 extends i4 {
     this._languagesSupported = value;
   }
   get languagesSupported() {
-    return this.contextProviderRef.value?.languages || this._languagesSupported || [];
+    return __classPrivateFieldGet12(this, _CortiDictation_contextProviderRef, "f").value?.languages || this._languagesSupported || [];
   }
   /**
    * Configuration settings for dictation
@@ -12035,7 +12871,7 @@ var CortiDictation = class CortiDictation2 extends i4 {
     this._dictationConfig = value;
   }
   get dictationConfig() {
-    return this.contextProviderRef.value?.dictationConfig || this._dictationConfig;
+    return __classPrivateFieldGet12(this, _CortiDictation_contextProviderRef, "f").value?.dictationConfig || this._dictationConfig;
   }
   /**
    * List of available recording devices
@@ -12044,7 +12880,7 @@ var CortiDictation = class CortiDictation2 extends i4 {
     this._devices = value;
   }
   get devices() {
-    return this.contextProviderRef.value?.devices || this._devices || [];
+    return __classPrivateFieldGet12(this, _CortiDictation_contextProviderRef, "f").value?.devices || this._devices || [];
   }
   /**
    * The selected device used for recording (MediaDeviceInfo).
@@ -12053,13 +12889,33 @@ var CortiDictation = class CortiDictation2 extends i4 {
     this._selectedDevice = value;
   }
   get selectedDevice() {
-    return this.contextProviderRef.value?.selectedDevice || this._selectedDevice;
+    return __classPrivateFieldGet12(this, _CortiDictation_contextProviderRef, "f").value?.selectedDevice || this._selectedDevice;
   }
   /**
    * Current state of recording (stopped, recording, initializing and stopping, ).
    */
   get recordingState() {
-    return this.contextProviderRef.value?.recordingState || "stopped";
+    return __classPrivateFieldGet12(this, _CortiDictation_contextProviderRef, "f").value?.recordingState || "stopped";
+  }
+  /**
+   * Dictation mode: "toggle-to-talk" or "push-to-talk"
+   */
+  set mode(value) {
+    this._mode = value;
+  }
+  get mode() {
+    return __classPrivateFieldGet12(this, _CortiDictation_contextProviderRef, "f").value?.mode || this._mode || "toggle-to-talk";
+  }
+  /**
+   * Keybinding for keyboard shortcut. Single key only (e.g., "`", "k", "meta", "ctrl").
+   * Combinations with "+" are not supported.
+   * Defaults to "`" if keybinding is in settingsEnabled, otherwise undefined
+   */
+  set keybinding(value) {
+    this._keybinding = value;
+  }
+  get keybinding() {
+    return __classPrivateFieldGet12(this, _CortiDictation_contextProviderRef, "f").value?.keybinding || this._keybinding;
   }
   // ─────────────────────────────────────────────────────────────────────────────
   // Public methods
@@ -12071,7 +12927,7 @@ var CortiDictation = class CortiDictation2 extends i4 {
    */
   setAccessToken(token) {
     this.accessToken = token;
-    return this.contextProviderRef.value?.setAccessToken(token) ?? {
+    return __classPrivateFieldGet12(this, _CortiDictation_contextProviderRef, "f").value?.setAccessToken(token) ?? {
       accessToken: token,
       environment: void 0,
       tenant: void 0
@@ -12084,7 +12940,7 @@ var CortiDictation = class CortiDictation2 extends i4 {
    */
   async setAuthConfig(config) {
     this.authConfig = config;
-    return this.contextProviderRef.value?.setAuthConfig(config) ?? {
+    return __classPrivateFieldGet12(this, _CortiDictation_contextProviderRef, "f").value?.setAuthConfig(config) ?? {
       accessToken: void 0,
       environment: void 0,
       tenant: void 0
@@ -12094,19 +12950,19 @@ var CortiDictation = class CortiDictation2 extends i4 {
    * Starts a recording.
    */
   startRecording() {
-    this.recordingButtonRef.value?.startRecording();
+    __classPrivateFieldGet12(this, _CortiDictation_recordingButtonRef, "f").value?.startRecording();
   }
   /**
    * Stops a recording.
    */
   stopRecording() {
-    this.recordingButtonRef.value?.stopRecording();
+    __classPrivateFieldGet12(this, _CortiDictation_recordingButtonRef, "f").value?.stopRecording();
   }
   /**
    * Starts or stops recording. Convenience layer on top of the start/stop methods.
    */
   toggleRecording() {
-    this.recordingButtonRef.value?.toggleRecording();
+    __classPrivateFieldGet12(this, _CortiDictation_recordingButtonRef, "f").value?.toggleRecording();
   }
   // ─────────────────────────────────────────────────────────────────────────────
   // Render
@@ -12114,8 +12970,8 @@ var CortiDictation = class CortiDictation2 extends i4 {
   render() {
     const isHidden = !this.accessToken && !this.authConfig && !this.socketUrl && !this.socketProxy;
     return x`
-      <dictation-context-provider
-        ${n6(this.contextProviderRef)}
+      <dictation-root
+        ${n6(__classPrivateFieldGet12(this, _CortiDictation_contextProviderRef, "f"))}
         class=${e6({ hidden: isHidden })}
         .accessToken=${this.accessToken}
         .authConfig=${this.authConfig}
@@ -12126,73 +12982,91 @@ var CortiDictation = class CortiDictation2 extends i4 {
         .devices=${this._devices}
         .selectedDevice=${this._selectedDevice}
         .debug_displayAudio=${this.debug_displayAudio}
+        .mode=${this._mode}
+        .keybinding=${this._keybinding}
       >
-        <recording-button
-          ${n6(this.recordingButtonRef)}
-          .preventFocus=${!this.allowButtonFocus}
-        ></recording-button>
-        <settings-menu .settingsEnabled=${this.settingsEnabled}></settings-menu>
-      </dictation-context-provider>
+        <dictation-recording-button
+          ${n6(__classPrivateFieldGet12(this, _CortiDictation_recordingButtonRef, "f"))}
+          ?allowButtonFocus=${this.allowButtonFocus}
+        ></dictation-recording-button>
+        ${this.settingsEnabled?.length > 0 ? x`<dictation-settings-menu
+                .settingsEnabled=${this.settingsEnabled}
+              ></dictation-settings-menu>` : E}
+      </dictation-root>
     `;
   }
 };
+_CortiDictation_recordingButtonRef = /* @__PURE__ */ new WeakMap();
+_CortiDictation_contextProviderRef = /* @__PURE__ */ new WeakMap();
 CortiDictation.styles = i`
     .hidden {
       display: none;
     }
   `;
-__decorate8([
+__decorate10([
   n4({ type: String })
 ], CortiDictation.prototype, "accessToken", void 0);
-__decorate8([
+__decorate10([
   n4({ attribute: false, type: Object })
 ], CortiDictation.prototype, "authConfig", void 0);
-__decorate8([
+__decorate10([
   n4({ type: String })
 ], CortiDictation.prototype, "socketUrl", void 0);
-__decorate8([
+__decorate10([
   n4({ attribute: false, type: Object })
 ], CortiDictation.prototype, "socketProxy", void 0);
-__decorate8([
+__decorate10([
   n4({
     converter: commaSeparatedConverter,
     type: Array
   })
 ], CortiDictation.prototype, "languagesSupported", null);
-__decorate8([
+__decorate10([
   r5()
 ], CortiDictation.prototype, "_languagesSupported", void 0);
-__decorate8([
+__decorate10([
   n4({
     converter: commaSeparatedConverter,
     type: Array
   })
 ], CortiDictation.prototype, "settingsEnabled", void 0);
-__decorate8([
+__decorate10([
   n4({ type: Boolean })
 ], CortiDictation.prototype, "allowButtonFocus", void 0);
-__decorate8([
+__decorate10([
   n4({ attribute: "debug-display-audio", type: Boolean })
 ], CortiDictation.prototype, "debug_displayAudio", void 0);
-__decorate8([
+__decorate10([
   n4({ attribute: false, type: Object })
 ], CortiDictation.prototype, "dictationConfig", null);
-__decorate8([
+__decorate10([
   r5()
 ], CortiDictation.prototype, "_dictationConfig", void 0);
-__decorate8([
+__decorate10([
   n4({ attribute: false, type: Array })
 ], CortiDictation.prototype, "devices", null);
-__decorate8([
+__decorate10([
   r5()
 ], CortiDictation.prototype, "_devices", void 0);
-__decorate8([
+__decorate10([
   n4({ attribute: false, type: Object })
 ], CortiDictation.prototype, "selectedDevice", null);
-__decorate8([
+__decorate10([
   r5()
 ], CortiDictation.prototype, "_selectedDevice", void 0);
-CortiDictation = __decorate8([
+__decorate10([
+  n4({ type: String })
+], CortiDictation.prototype, "mode", null);
+__decorate10([
+  r5()
+], CortiDictation.prototype, "_mode", void 0);
+__decorate10([
+  n4({ type: String })
+], CortiDictation.prototype, "keybinding", null);
+__decorate10([
+  r5()
+], CortiDictation.prototype, "_keybinding", void 0);
+CortiDictation = __decorate10([
   t3("corti-dictation")
 ], CortiDictation);
 
@@ -12200,29 +13074,37 @@ CortiDictation = __decorate8([
 if (!customElements.get("corti-dictation")) {
   customElements.define("corti-dictation", CortiDictation);
 }
-if (!customElements.get("recording-button")) {
-  customElements.define("recording-button", RecordingButton);
+if (!customElements.get("dictation-recording-button")) {
+  customElements.define("dictation-recording-button", DictationRecordingButton);
+}
+if (!customElements.get("dictation-device-selector")) {
+  customElements.define("dictation-device-selector", DictationDeviceSelector);
+}
+if (!customElements.get("dictation-language-selector")) {
+  customElements.define("dictation-language-selector", DictationLanguageSelector);
 }
-if (!customElements.get("device-selector")) {
-  customElements.define("device-selector", DeviceSelector);
+if (!customElements.get("dictation-mode-selector")) {
+  customElements.define("dictation-mode-selector", DictationModeSelector);
 }
-if (!customElements.get("language-selector")) {
-  customElements.define("language-selector", LanguageSelector);
+if (!customElements.get("dictation-keybinding-selector")) {
+  customElements.define("dictation-keybinding-selector", DictationKeybindingSelector);
 }
-if (!customElements.get("settings-menu")) {
-  customElements.define("settings-menu", SettingsMenu);
+if (!customElements.get("dictation-settings-menu")) {
+  customElements.define("dictation-settings-menu", DictationSettingsMenu);
 }
-if (!customElements.get("dictation-context-provider")) {
-  customElements.define("dictation-context-provider", DictationContext);
+if (!customElements.get("dictation-root")) {
+  customElements.define("dictation-root", DictationRoot);
 }
 var index_default = CortiDictation;
 export {
   CortiDictation,
-  DeviceSelector,
-  DictationContext,
-  LanguageSelector,
-  RecordingButton,
-  SettingsMenu,
+  DictationDeviceSelector,
+  DictationKeybindingSelector,
+  DictationLanguageSelector,
+  DictationModeSelector,
+  DictationRecordingButton,
+  DictationRoot,
+  DictationSettingsMenu,
   index_default as default
 };
 /*! Bundled license information: