@corti/dictation-web 0.4.0-rc.2 → 0.5.0-rc

package/dist/controllers/keybinding-controller.js

@@ -0,0 +1,86 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _KeybindingController_instances, _KeybindingController_keydownHandler, _KeybindingController_keyupHandler, _KeybindingController_blurHandler, _KeybindingController_setupListeners, _KeybindingController_removeListeners;
+import { keybindingActivatedEvent } from "../utils/events.js";
+import { matchesKeybinding, shouldIgnoreKeybinding, } from "../utils/keybinding.js";
+export class KeybindingController {
+    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() {
+        __classPrivateFieldGet(this, _KeybindingController_instances, "m", _KeybindingController_setupListeners).call(this);
+    }
+    hostDisconnected() {
+        __classPrivateFieldGet(this, _KeybindingController_instances, "m", _KeybindingController_removeListeners).call(this);
+    }
+}
+_KeybindingController_keydownHandler = new WeakMap(), _KeybindingController_keyupHandler = new WeakMap(), _KeybindingController_blurHandler = new WeakMap(), _KeybindingController_instances = new WeakSet(), _KeybindingController_setupListeners = function _KeybindingController_setupListeners() {
+    __classPrivateFieldGet(this, _KeybindingController_instances, "m", _KeybindingController_removeListeners).call(this);
+    __classPrivateFieldSet(this, _KeybindingController_keydownHandler, (event) => {
+        if (!this.host._keybinding) {
+            return;
+        }
+        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();
+            }
+        }
+    }, "f");
+    __classPrivateFieldSet(this, _KeybindingController_keyupHandler, (event) => {
+        if (!this.host._keybinding) {
+            return;
+        }
+        if (this.host._mode === "push-to-talk" &&
+            matchesKeybinding(event, this.host._keybinding)) {
+            if (!this.host.dispatchEvent(keybindingActivatedEvent(event))) {
+                return;
+            }
+            this.host.stopRecording();
+        }
+    }, "f");
+    __classPrivateFieldSet(this, _KeybindingController_blurHandler, () => {
+        if (this.host._mode === "push-to-talk") {
+            this.host.stopRecording();
+        }
+    }, "f");
+    window.addEventListener("keydown", __classPrivateFieldGet(this, _KeybindingController_keydownHandler, "f"));
+    window.addEventListener("keyup", __classPrivateFieldGet(this, _KeybindingController_keyupHandler, "f"));
+    window.addEventListener("blur", __classPrivateFieldGet(this, _KeybindingController_blurHandler, "f"));
+}, _KeybindingController_removeListeners = function _KeybindingController_removeListeners() {
+    if (__classPrivateFieldGet(this, _KeybindingController_keydownHandler, "f")) {
+        window.removeEventListener("keydown", __classPrivateFieldGet(this, _KeybindingController_keydownHandler, "f"));
+        __classPrivateFieldSet(this, _KeybindingController_keydownHandler, undefined, "f");
+    }
+    if (__classPrivateFieldGet(this, _KeybindingController_keyupHandler, "f")) {
+        window.removeEventListener("keyup", __classPrivateFieldGet(this, _KeybindingController_keyupHandler, "f"));
+        __classPrivateFieldSet(this, _KeybindingController_keyupHandler, undefined, "f");
+    }
+    if (__classPrivateFieldGet(this, _KeybindingController_blurHandler, "f")) {
+        window.removeEventListener("blur", __classPrivateFieldGet(this, _KeybindingController_blurHandler, "f"));
+        __classPrivateFieldSet(this, _KeybindingController_blurHandler, undefined, "f");
+    }
+};
+//# sourceMappingURL=keybinding-controller.js.map

package/dist/controllers/keybinding-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keybinding-controller.js","sourceRoot":"","sources":["../../src/controllers/keybinding-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from \"lit\";\nimport type { DictationMode } from \"../types.js\";\nimport { keybindingActivatedEvent } from \"../utils/events.js\";\nimport {\n  matchesKeybinding,\n  shouldIgnoreKeybinding,\n} from \"../utils/keybinding.js\";\n\ninterface KeybindingControllerHost extends ReactiveControllerHost {\n  _keybinding?: string | null;\n  _mode?: DictationMode;\n  startRecording(): void;\n  stopRecording(): void;\n  toggleRecording(): void;\n  dispatchEvent(event: Event): boolean;\n}\n\nexport class KeybindingController implements ReactiveController {\n  host: KeybindingControllerHost;\n\n  #keydownHandler?: (event: KeyboardEvent) => void;\n  #keyupHandler?: (event: KeyboardEvent) => void;\n  #blurHandler?: () => void;\n\n  constructor(host: KeybindingControllerHost) {\n    this.host = host;\n    host.addController(this);\n  }\n\n  hostConnected(): void {\n    this.#setupListeners();\n  }\n\n  hostDisconnected(): void {\n    this.#removeListeners();\n  }\n\n  #setupListeners(): void {\n    this.#removeListeners();\n\n    this.#keydownHandler = (event: KeyboardEvent) => {\n      if (!this.host._keybinding) {\n        return;\n      }\n\n      if (shouldIgnoreKeybinding(document.activeElement)) {\n        return;\n      }\n\n      if (matchesKeybinding(event, this.host._keybinding)) {\n        if (!this.host.dispatchEvent(keybindingActivatedEvent(event))) {\n          return;\n        }\n\n        if (this.host._mode === \"push-to-talk\") {\n          this.host.startRecording();\n        }\n\n        if (this.host._mode === \"toggle-to-talk\") {\n          this.host.toggleRecording();\n        }\n      }\n    };\n\n    this.#keyupHandler = (event: KeyboardEvent) => {\n      if (!this.host._keybinding) {\n        return;\n      }\n\n      if (\n        this.host._mode === \"push-to-talk\" &&\n        matchesKeybinding(event, this.host._keybinding)\n      ) {\n        if (!this.host.dispatchEvent(keybindingActivatedEvent(event))) {\n          return;\n        }\n\n        this.host.stopRecording();\n      }\n    };\n\n    this.#blurHandler = () => {\n      if (this.host._mode === \"push-to-talk\") {\n        this.host.stopRecording();\n      }\n    };\n\n    window.addEventListener(\"keydown\", this.#keydownHandler);\n    window.addEventListener(\"keyup\", this.#keyupHandler);\n    window.addEventListener(\"blur\", this.#blurHandler);\n  }\n\n  #removeListeners(): void {\n    if (this.#keydownHandler) {\n      window.removeEventListener(\"keydown\", this.#keydownHandler);\n      this.#keydownHandler = undefined;\n    }\n\n    if (this.#keyupHandler) {\n      window.removeEventListener(\"keyup\", this.#keyupHandler);\n      this.#keyupHandler = undefined;\n    }\n\n    if (this.#blurHandler) {\n      window.removeEventListener(\"blur\", this.#blurHandler);\n      this.#blurHandler = undefined;\n    }\n  }\n}\n"]}

package/dist/index.d.ts

@@ -1,10 +1,12 @@
 import { CortiDictation } from "./components/corti-dictation.js";
 export { CortiDictation } from "./components/corti-dictation.js";
 export { DictationDeviceSelector } from "./components/device-selector.js";
+export { DictationKeybindingSelector } from "./components/keybinding-selector.js";
 export { DictationLanguageSelector } from "./components/language-selector.js";
+export { DictationModeSelector } from "./components/mode-selector.js";
 export { DictationRecordingButton } from "./components/recording-button.js";
 export { DictationSettingsMenu } from "./components/settings-menu.js";
 export { DictationRoot } from "./contexts/dictation-context.js";
-export type { ConfigurableSettings, RecordingState } from "./types.js";
-export type { AudioLevelChangedEventDetail, CommandEventDetail, ErrorEventDetail, LanguageChangedEventDetail, LanguagesChangedEventDetail, NetworkActivityEventDetail, RecordingDevicesChangedEventDetail, RecordingStateChangedEventDetail, TranscriptEventDetail, UsageEventDetail, } from "./utils/events.js";
+export type { ConfigurableSettings, DictationMode, Keybinding, RecordingState, } from "./types.js";
+export type { AudioLevelChangedEventDetail, CommandEventDetail, ErrorEventDetail, KeybindingActivatedEventDetail, KeybindingChangedEventDetail, LanguageChangedEventDetail, LanguagesChangedEventDetail, ModeChangedEventDetail, NetworkActivityEventDetail, RecordingDevicesChangedEventDetail, RecordingStateChangedEventDetail, TranscriptEventDetail, UsageEventDetail, } from "./utils/events.js";
 export default CortiDictation;

package/dist/index.js

@@ -1,6 +1,8 @@
 import { CortiDictation } from "./components/corti-dictation.js";
 import { DictationDeviceSelector } from "./components/device-selector.js";
+import { DictationKeybindingSelector } from "./components/keybinding-selector.js";
 import { DictationLanguageSelector } from "./components/language-selector.js";
+import { DictationModeSelector } from "./components/mode-selector.js";
 import { DictationRecordingButton } from "./components/recording-button.js";
 import { DictationSettingsMenu } from "./components/settings-menu.js";
 import { DictationRoot } from "./contexts/dictation-context.js";
@@ -16,6 +18,12 @@ if (!customElements.get("dictation-device-selector")) {
 if (!customElements.get("dictation-language-selector")) {
     customElements.define("dictation-language-selector", DictationLanguageSelector);
 }
+if (!customElements.get("dictation-mode-selector")) {
+    customElements.define("dictation-mode-selector", DictationModeSelector);
+}
+if (!customElements.get("dictation-keybinding-selector")) {
+    customElements.define("dictation-keybinding-selector", DictationKeybindingSelector);
+}
 if (!customElements.get("dictation-settings-menu")) {
     customElements.define("dictation-settings-menu", DictationSettingsMenu);
 }
@@ -24,7 +32,9 @@ if (!customElements.get("dictation-root")) {
 }
 export { CortiDictation } from "./components/corti-dictation.js";
 export { DictationDeviceSelector } from "./components/device-selector.js";
+export { DictationKeybindingSelector } from "./components/keybinding-selector.js";
 export { DictationLanguageSelector } from "./components/language-selector.js";
+export { DictationModeSelector } from "./components/mode-selector.js";
 export { DictationRecordingButton } from "./components/recording-button.js";
 export { DictationSettingsMenu } from "./components/settings-menu.js";
 export { DictationRoot } from "./contexts/dictation-context.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAEhE,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE,CAAC;IAC3C,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC;AAC3D,CAAC;AAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,4BAA4B,CAAC,EAAE,CAAC;IACtD,cAAc,CAAC,MAAM,CAAC,4BAA4B,EAAE,wBAAwB,CAAC,CAAC;AAChF,CAAC;AAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,2BAA2B,CAAC,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,2BAA2B,EAAE,uBAAuB,CAAC,CAAC;AAC9E,CAAC;AAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,6BAA6B,CAAC,EAAE,CAAC;IACvD,cAAc,CAAC,MAAM,CACnB,6BAA6B,EAC7B,yBAAyB,CAC1B,CAAC;AACJ,CAAC;AAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,yBAAyB,CAAC,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,yBAAyB,EAAE,qBAAqB,CAAC,CAAC;AAC1E,CAAC;AAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE,CAAC;IAC1C,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;AACzD,CAAC;AAED,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAgBhE,eAAe,cAAc,CAAC","sourcesContent":["import { CortiDictation } from \"./components/corti-dictation.js\";\nimport { DictationDeviceSelector } from \"./components/device-selector.js\";\nimport { DictationLanguageSelector } from \"./components/language-selector.js\";\nimport { DictationRecordingButton } from \"./components/recording-button.js\";\nimport { DictationSettingsMenu } from \"./components/settings-menu.js\";\nimport { DictationRoot } from \"./contexts/dictation-context.js\";\n\nif (!customElements.get(\"corti-dictation\")) {\n  customElements.define(\"corti-dictation\", CortiDictation);\n}\n\nif (!customElements.get(\"dictation-recording-button\")) {\n  customElements.define(\"dictation-recording-button\", DictationRecordingButton);\n}\n\nif (!customElements.get(\"dictation-device-selector\")) {\n  customElements.define(\"dictation-device-selector\", DictationDeviceSelector);\n}\n\nif (!customElements.get(\"dictation-language-selector\")) {\n  customElements.define(\n    \"dictation-language-selector\",\n    DictationLanguageSelector,\n  );\n}\n\nif (!customElements.get(\"dictation-settings-menu\")) {\n  customElements.define(\"dictation-settings-menu\", DictationSettingsMenu);\n}\n\nif (!customElements.get(\"dictation-root\")) {\n  customElements.define(\"dictation-root\", DictationRoot);\n}\n\nexport { CortiDictation } from \"./components/corti-dictation.js\";\nexport { DictationDeviceSelector } from \"./components/device-selector.js\";\nexport { DictationLanguageSelector } from \"./components/language-selector.js\";\nexport { DictationRecordingButton } from \"./components/recording-button.js\";\nexport { DictationSettingsMenu } from \"./components/settings-menu.js\";\nexport { DictationRoot } from \"./contexts/dictation-context.js\";\n\nexport type { ConfigurableSettings, RecordingState } from \"./types.js\";\nexport type {\n  AudioLevelChangedEventDetail,\n  CommandEventDetail,\n  ErrorEventDetail,\n  LanguageChangedEventDetail,\n  LanguagesChangedEventDetail,\n  NetworkActivityEventDetail,\n  RecordingDevicesChangedEventDetail,\n  RecordingStateChangedEventDetail,\n  TranscriptEventDetail,\n  UsageEventDetail,\n} from \"./utils/events.js\";\n\nexport default CortiDictation;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,2BAA2B,EAAE,MAAM,qCAAqC,CAAC;AAClF,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAEhE,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE,CAAC;IAC3C,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC;AAC3D,CAAC;AAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,4BAA4B,CAAC,EAAE,CAAC;IACtD,cAAc,CAAC,MAAM,CAAC,4BAA4B,EAAE,wBAAwB,CAAC,CAAC;AAChF,CAAC;AAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,2BAA2B,CAAC,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,2BAA2B,EAAE,uBAAuB,CAAC,CAAC;AAC9E,CAAC;AAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,6BAA6B,CAAC,EAAE,CAAC;IACvD,cAAc,CAAC,MAAM,CACnB,6BAA6B,EAC7B,yBAAyB,CAC1B,CAAC;AACJ,CAAC;AAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,yBAAyB,CAAC,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,yBAAyB,EAAE,qBAAqB,CAAC,CAAC;AAC1E,CAAC;AAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,+BAA+B,CAAC,EAAE,CAAC;IACzD,cAAc,CAAC,MAAM,CACnB,+BAA+B,EAC/B,2BAA2B,CAC5B,CAAC;AACJ,CAAC;AAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,yBAAyB,CAAC,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,yBAAyB,EAAE,qBAAqB,CAAC,CAAC;AAC1E,CAAC;AAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE,CAAC;IAC1C,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;AACzD,CAAC;AAED,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,2BAA2B,EAAE,MAAM,qCAAqC,CAAC;AAClF,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAwBhE,eAAe,cAAc,CAAC","sourcesContent":["import { CortiDictation } from \"./components/corti-dictation.js\";\nimport { DictationDeviceSelector } from \"./components/device-selector.js\";\nimport { DictationKeybindingSelector } from \"./components/keybinding-selector.js\";\nimport { DictationLanguageSelector } from \"./components/language-selector.js\";\nimport { DictationModeSelector } from \"./components/mode-selector.js\";\nimport { DictationRecordingButton } from \"./components/recording-button.js\";\nimport { DictationSettingsMenu } from \"./components/settings-menu.js\";\nimport { DictationRoot } from \"./contexts/dictation-context.js\";\n\nif (!customElements.get(\"corti-dictation\")) {\n  customElements.define(\"corti-dictation\", CortiDictation);\n}\n\nif (!customElements.get(\"dictation-recording-button\")) {\n  customElements.define(\"dictation-recording-button\", DictationRecordingButton);\n}\n\nif (!customElements.get(\"dictation-device-selector\")) {\n  customElements.define(\"dictation-device-selector\", DictationDeviceSelector);\n}\n\nif (!customElements.get(\"dictation-language-selector\")) {\n  customElements.define(\n    \"dictation-language-selector\",\n    DictationLanguageSelector,\n  );\n}\n\nif (!customElements.get(\"dictation-mode-selector\")) {\n  customElements.define(\"dictation-mode-selector\", DictationModeSelector);\n}\n\nif (!customElements.get(\"dictation-keybinding-selector\")) {\n  customElements.define(\n    \"dictation-keybinding-selector\",\n    DictationKeybindingSelector,\n  );\n}\n\nif (!customElements.get(\"dictation-settings-menu\")) {\n  customElements.define(\"dictation-settings-menu\", DictationSettingsMenu);\n}\n\nif (!customElements.get(\"dictation-root\")) {\n  customElements.define(\"dictation-root\", DictationRoot);\n}\n\nexport { CortiDictation } from \"./components/corti-dictation.js\";\nexport { DictationDeviceSelector } from \"./components/device-selector.js\";\nexport { DictationKeybindingSelector } from \"./components/keybinding-selector.js\";\nexport { DictationLanguageSelector } from \"./components/language-selector.js\";\nexport { DictationModeSelector } from \"./components/mode-selector.js\";\nexport { DictationRecordingButton } from \"./components/recording-button.js\";\nexport { DictationSettingsMenu } from \"./components/settings-menu.js\";\nexport { DictationRoot } from \"./contexts/dictation-context.js\";\n\nexport type {\n  ConfigurableSettings,\n  DictationMode,\n  Keybinding,\n  RecordingState,\n} from \"./types.js\";\nexport type {\n  AudioLevelChangedEventDetail,\n  CommandEventDetail,\n  ErrorEventDetail,\n  KeybindingActivatedEventDetail,\n  KeybindingChangedEventDetail,\n  LanguageChangedEventDetail,\n  LanguagesChangedEventDetail,\n  ModeChangedEventDetail,\n  NetworkActivityEventDetail,\n  RecordingDevicesChangedEventDetail,\n  RecordingStateChangedEventDetail,\n  TranscriptEventDetail,\n  UsageEventDetail,\n} from \"./utils/events.js\";\n\nexport default CortiDictation;\n"]}

package/dist/package.json

@@ -1,14 +1,94 @@
 {
   "name": "@corti/dictation-web",
-  "version": "0.0.0-local",
+  "description": "Web component for Corti Dictation",
+  "author": "Corti ApS",
+  "version": "0.0.0-test.571.1",
+  "license": "MIT",
   "type": "module",
-  "main": "./index.js",
-  "module": "./index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./index.js",
-      "types": "./index.d.ts"
-    },
-    "./*": "./*"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "browser": "./dist/bundle.js",
+      "default": "./dist/bundle.js"
+    }
+  },
+  "jsdelivr": "./dist/bundle.js",
+  "browser": "./dist/bundle.js",
+  "files": [
+    "dist"
+  ],
+  "bugs": {
+    "url": "https://docs.corti.ai",
+    "email": "help@corti.ai"
+  },
+  "repository": "github:corticph/dictation-web",
+  "homepage": "https://docs.corti.ai/stt/dictation-web",
+  "keywords": [
+    "corti",
+    "dictation",
+    "web",
+    "sdk",
+    "speech",
+    "recognition",
+    "transcription",
+    "audio",
+    "medical",
+    "healthcare"
+  ],
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "build": "tsc && npm run analyze -- --exclude dist",
+    "build:bundle": "esbuild dist/index.js --bundle --outfile=dist/bundle.js --format=esm --platform=browser",
+    "release": "npm run build && npm run build:bundle && npm publish --access public",
+    "start": "npm run build && npm run build:bundle && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"web-dev-server\"",
+    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "lint": "biome check .",
+    "format": "biome format --write .",
+    "biome:check": "biome check .",
+    "biome:format": "biome format --write .",
+    "biome:fix": "biome check --write .",
+    "prepare": "husky && husky install",
+    "test": "tsc && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
+    "storybook": "npm run analyze -- --exclude dist && storybook dev -p 8080",
+    "storybook:build": "tsc && tsc -p tsconfig.stories.json && npm run analyze -- --exclude dist && storybook build"
+  },
+  "dependencies": {
+    "@corti/sdk": "^0.8.0",
+    "@lit/context": "^1.1.6",
+    "lit": "^3.3.1"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.6",
+    "@custom-elements-manifest/analyzer": "^0.10.3",
+    "@open-wc/testing": "^4.0.0",
+    "@storybook/addon-a11y": "10.1.5",
+    "@storybook/addon-docs": "^10.1.5",
+    "@storybook/addon-links": "10.1.5",
+    "@storybook/web-components": "10.1.5",
+    "@storybook/web-components-vite": "^10.1.5",
+    "@types/mocha": "^10.0.7",
+    "@web/dev-server": "^0.4.6",
+    "@web/storybook-builder": "^0.1.16",
+    "@web/storybook-framework-web-components": "^0.1.2",
+    "@web/test-runner": "^0.18.2",
+    "concurrently": "^8.2.2",
+    "esbuild": "^0.25.0",
+    "husky": "^8.0.0",
+    "lint-staged": "^15.2.7",
+    "sinon": "^19.0.2",
+    "storybook": "10.1.5",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3"
+  },
+  "customElements": "custom-elements.json",
+  "lint-staged": {
+    "*.ts": [
+      "biome check --write"
+    ]
   }
 }

package/dist/styles/component-styles.d.ts

@@ -1,2 +1,3 @@
 declare const ComponentStyles: import("lit").CSSResult;
+export declare const LabelStyles: import("lit").CSSResult;
 export default ComponentStyles;

package/dist/styles/component-styles.js

@@ -18,5 +18,15 @@ const ComponentStyles = css `
     overflow: hidden;
   }
 `;
+export const LabelStyles = css `
+  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;
+  }
+`;
 export default ComponentStyles;
 //# sourceMappingURL=component-styles.js.map

package/dist/styles/component-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-styles.js","sourceRoot":"","sources":["../../src/styles/component-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;CAkB1B,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { css } from \"lit\";\n\nconst ComponentStyles = css`\n  :host {\n    font-family: var(--component-font-family, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif);\n  }\n\n  .wrapper {\n    background-color: var(--card-background, light-dark(#fff, #333));\n    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));\n    border-radius: var(--card-border-radius, 8px);\n    box-shadow: var(--card-box-shadow, 0 2px 5px rgba(0, 0, 0, 0.1));\n    padding: var(--card-padding, 4px);\n    display: flex;\n    gap: 4px;\n    height: 46px;\n    width: fit-content;\n    box-sizing: border-box;\n    overflow: hidden;\n  }\n`;\n\nexport default ComponentStyles;\n"]}
+{"version":3,"file":"component-styles.js","sourceRoot":"","sources":["../../src/styles/component-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;CAkB1B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;CAS7B,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { css } from \"lit\";\n\nconst ComponentStyles = css`\n  :host {\n    font-family: var(--component-font-family, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif);\n  }\n\n  .wrapper {\n    background-color: var(--card-background, light-dark(#fff, #333));\n    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));\n    border-radius: var(--card-border-radius, 8px);\n    box-shadow: var(--card-box-shadow, 0 2px 5px rgba(0, 0, 0, 0.1));\n    padding: var(--card-padding, 4px);\n    display: flex;\n    gap: 4px;\n    height: 46px;\n    width: fit-content;\n    box-sizing: border-box;\n    overflow: hidden;\n  }\n`;\n\nexport const LabelStyles = css`\n  label {\n    display: block;\n    font-size: 0.8rem;\n    padding-bottom: 0.5rem;\n    font-weight: 500;\n    color: var(--component-text-color, light-dark(#333, #eee));\n    pointer-events: none;\n  }\n`;\n\nexport default ComponentStyles;\n"]}

package/dist/styles/keybinding-selector.d.ts

@@ -0,0 +1,2 @@
+declare const KeybindingSelectorStyles: import("lit").CSSResult[];
+export default KeybindingSelectorStyles;

package/dist/styles/keybinding-selector.js

@@ -0,0 +1,72 @@
+import { css } from "lit";
+import { LabelStyles } from "./component-styles.js";
+const KeybindingSelectorStyles = [
+    LabelStyles,
+    css `
+  :host {
+    display: block;
+  }
+  .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;
+  }
+`,
+];
+export default KeybindingSelectorStyles;
+//# sourceMappingURL=keybinding-selector.js.map

package/dist/styles/keybinding-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keybinding-selector.js","sourceRoot":"","sources":["../../src/styles/keybinding-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,MAAM,wBAAwB,GAAG;IAC/B,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEJ;CACA,CAAC;AAEF,eAAe,wBAAwB,CAAC","sourcesContent":["import { css } from \"lit\";\nimport { LabelStyles } from \"./component-styles.js\";\n\nconst KeybindingSelectorStyles = [\n  LabelStyles,\n  css`\n  :host {\n    display: block;\n  }\n  .keybinding-selector-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: var(--card-padding, 4px) 8px;\n    background: var(--card-background, light-dark(#fff, #333));\n    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));\n    border-radius: var(--card-inner-border-radius, 6px);\n    overflow: hidden;\n  }\n  .keybinding-selector-wrapper:focus-within {\n    border-color: var(--action-accent-background, light-dark(#007bff, #0056b3));\n    outline: 2px solid var(--action-accent-background, light-dark(#007bff, #0056b3));\n  }\n  .keybinding-selector-input {\n    flex: 1;\n    min-width: 0;\n    border: none;\n    background: transparent;\n    font-size: 14px;\n    line-height: 24px;\n    color: var(--component-text-color, light-dark(#333, #eee));\n    outline: none;\n    padding: 0;\n    cursor: text;\n  }\n  .keybinding-selector-input::placeholder {\n    opacity: 0.6;\n    color: var(--component-text-color, light-dark(#333, #eee));\n  }\n  .keybinding-selector-input:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n  .keybinding-key {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 0.5rem;\n    height: 24px;\n    background: var(--card-background, light-dark(#fff, #333));\n    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));\n    border-radius: var(--card-inner-border-radius, 6px);\n    box-shadow: var(--card-box-shadow, 0 2px 5px rgba(0, 0, 0, 0.1));\n    font-size: 16px;\n    line-height: 28px;\n    color: var(--component-text-color, light-dark(#333, #eee));\n    opacity: 0.6;\n    text-align: center;\n    flex-shrink: 0;\n  }\n  .keybinding-help {\n    font-size: 12px;\n    line-height: 20px;\n    color: var(--component-text-color, light-dark(#333, #eee));\n    opacity: 0.6;\n    margin: 0;\n    letter-spacing: 0.01px;\n    padding-top: 8px;\n  }\n`,\n];\n\nexport default KeybindingSelectorStyles;\n"]}

package/dist/styles/mode-selector.d.ts

@@ -0,0 +1,2 @@
+declare const ModeSelectorStyles: import("lit").CSSResult[];
+export default ModeSelectorStyles;

package/dist/styles/mode-selector.js

@@ -0,0 +1,56 @@
+import { css } from "lit";
+import { LabelStyles } from "./component-styles.js";
+const ModeSelectorStyles = [
+    LabelStyles,
+    css `
+  :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;
+  }
+`,
+];
+export default ModeSelectorStyles;
+//# sourceMappingURL=mode-selector.js.map

package/dist/styles/mode-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode-selector.js","sourceRoot":"","sources":["../../src/styles/mode-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,MAAM,kBAAkB,GAAG;IACzB,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDJ;CACA,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { css } from \"lit\";\nimport { LabelStyles } from \"./component-styles.js\";\n\nconst ModeSelectorStyles = [\n  LabelStyles,\n  css`\n  :host {\n    display: block;\n  }\n  .mode-selector-tabs {\n    display: flex;\n    background: var(--muted-background, light-dark(#fafafa, #2a2a2a));\n    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));\n    border-radius: var(--card-inner-border-radius, 6px);\n    padding: 0;\n    overflow: hidden;\n    align-items: center;\n    justify-content: center;\n    text-wrap: nowrap;\n    gap: 2px;\n  }\n  .mode-selector-tab {\n    flex: 1;\n    padding: 4px 8px;\n    border: 1px solid transparent;\n    background: transparent;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 24px;\n    color: var(--component-text-color, light-dark(#333, #eee));\n    opacity: 0.6;\n    cursor: pointer;\n    transition: all 0.2s;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: var(--card-inner-border-radius, 6px);\n    margin: -1px;\n  }\n  .mode-selector-tab:hover:not(:disabled) {\n    opacity: 1;\n  }\n  .mode-selector-tab.active {\n    background: var(--card-background, light-dark(#fff, #333));\n    border-color: var(--card-border-color, light-dark(#ddd, #555));\n    box-shadow: var(--card-box-shadow, 0 2px 5px rgba(0, 0, 0, 0.1));\n    opacity: 1;\n  }\n  .mode-selector-tab:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n`,\n];\n\nexport default ModeSelectorStyles;\n"]}

package/dist/styles/select.d.ts

@@ -1,2 +1,2 @@
-declare const SelectStyles: import("lit").CSSResult;
+declare const SelectStyles: import("lit").CSSResult[];
 export default SelectStyles;

package/dist/styles/select.js

@@ -1,13 +1,8 @@
 import { css } from "lit";
-const SelectStyles = css `
-  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;
-  }
+import { LabelStyles } from "./component-styles.js";
+const SelectStyles = [
+    LabelStyles,
+    css `
   select {
     background: var(--card-background, light-dark(#fff, #333));
     color: var(--component-text-color, light-dark(#333, #eee));
@@ -31,6 +26,7 @@ const SelectStyles = css `
     outline: 2px solid var(--action-accent-background, light-dark(#007bff, #0056b3));
     /* outline-offset: 2px; */
   }
-`;
+`,
+];
 export default SelectStyles;
 //# sourceMappingURL=select.js.map

package/dist/styles/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/styles/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCvB,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { css } from \"lit\";\n\nconst SelectStyles = css`\n  label {\n    display: block;\n    font-size: 0.8rem;\n    padding-bottom: 0.5rem;\n    font-weight: 500;\n    color: var(--component-text-color, light-dark(#333, #eee));\n    pointer-events: none;\n  }\n  select {\n    background: var(--card-background, light-dark(#fff, #333));\n    color: var(--component-text-color, light-dark(#333, #eee));\n    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));\n    padding: var(--card-padding, 4px);\n    border-radius: var(--card-inner-border-radius, 6px);\n    outline: none;\n    width: 100%;\n  }\n\n  select:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  select:hover {\n    background: var(--action-plain-background-hover, light-dark(#ddd, #444));\n  }\n\n  select:focus-visible {\n    outline: 2px solid var(--action-accent-background, light-dark(#007bff, #0056b3));\n    /* outline-offset: 2px; */\n  }\n`;\n\nexport default SelectStyles;\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/styles/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,MAAM,YAAY,GAAG;IACnB,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;CAwBJ;CACA,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { css } from \"lit\";\nimport { LabelStyles } from \"./component-styles.js\";\n\nconst SelectStyles = [\n  LabelStyles,\n  css`\n  select {\n    background: var(--card-background, light-dark(#fff, #333));\n    color: var(--component-text-color, light-dark(#333, #eee));\n    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));\n    padding: var(--card-padding, 4px);\n    border-radius: var(--card-inner-border-radius, 6px);\n    outline: none;\n    width: 100%;\n  }\n\n  select:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  select:hover {\n    background: var(--action-plain-background-hover, light-dark(#ddd, #444));\n  }\n\n  select:focus-visible {\n    outline: 2px solid var(--action-accent-background, light-dark(#007bff, #0056b3));\n    /* outline-offset: 2px; */\n  }\n`,\n];\n\nexport default SelectStyles;\n"]}

package/dist/styles/settings-menu.js

@@ -27,7 +27,15 @@ const SettingsMenuStyles = css `
   .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;
   }
 `;
 export default SettingsMenuStyles;

package/dist/styles/settings-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings-menu.js","sourceRoot":"","sources":["../../src/styles/settings-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8B7B,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nconst SettingsMenuStyles = css`\n  :host {\n    display: block;\n  }\n  /* Retain the anchor-name styling for this component */\n  #settings-popover-button {\n    anchor-name: --settings_popover_btn;\n  }\n  [popover] {\n    margin: 0;\n    padding: 16px;\n    background: var(--card-background, light-dark(#fff, #333));\n    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));\n    border-radius: var(--card-border-radius, 8px);\n    box-shadow: var(--card-box-shadow, 0 2px 5px rgba(0, 0, 0, 0.1));\n    z-index: 1000;\n    max-width: 260px;\n    width: 100%;\n    min-width: 200px;\n    position-anchor: --settings_popover_btn;\n    position-area: bottom span-right;\n    position-visibility: always;\n    position-try-fallbacks: flip-inline;\n    overflow-x: hidden;\n  }\n  .settings-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n  }\n`;\n\nexport default SettingsMenuStyles;\n"]}
+{"version":3,"file":"settings-menu.js","sourceRoot":"","sources":["../../src/styles/settings-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsC7B,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nconst SettingsMenuStyles = css`\n  :host {\n    display: block;\n  }\n  /* Retain the anchor-name styling for this component */\n  #settings-popover-button {\n    anchor-name: --settings_popover_btn;\n  }\n  [popover] {\n    margin: 0;\n    padding: 16px;\n    background: var(--card-background, light-dark(#fff, #333));\n    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));\n    border-radius: var(--card-border-radius, 8px);\n    box-shadow: var(--card-box-shadow, 0 2px 5px rgba(0, 0, 0, 0.1));\n    z-index: 1000;\n    max-width: 260px;\n    width: 100%;\n    min-width: 200px;\n    position-anchor: --settings_popover_btn;\n    position-area: bottom span-right;\n    position-visibility: always;\n    position-try-fallbacks: flip-inline;\n    overflow-x: hidden;\n  }\n  .settings-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n  .settings-group {\n    background: var(--muted-background, light-dark(#fafafa, #2a2a2a));\n    padding: 12px;\n    border-radius: 10px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n`;\n\nexport default SettingsMenuStyles;\n"]}