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

package/dist/components/audio-visualiser.d.ts

@@ -1,13 +1,14 @@
 import { LitElement, type PropertyValues } from "lit";
-export declare class AudioVisualiser extends LitElement {
+export declare class DictationAudioVisualiser extends LitElement {
     level: number;
     active: boolean;
+    segmentCount: number;
     static styles: import("lit").CSSResult;
     willUpdate(changedProperties: PropertyValues<this>): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "audio-visualiser": AudioVisualiser;
+        "dictation-audio-visualiser": DictationAudioVisualiser;
     }
 }

package/dist/components/audio-visualiser.js

@@ -11,12 +11,12 @@ import { map } from "lit/directives/map.js";
 import { range } from "lit/directives/range.js";
 import AudioVisualiserStyles from "../styles/audio-visualiser.js";
 import { normalizeToRange } from "../utils/validation.js";
-const SEGMENT_COUNT = 5;
-let AudioVisualiser = class AudioVisualiser extends LitElement {
+let DictationAudioVisualiser = class DictationAudioVisualiser extends LitElement {
     constructor() {
         super(...arguments);
         this.level = 0;
         this.active = false;
+        this.segmentCount = 5;
     }
     willUpdate(changedProperties) {
         if (changedProperties.has("level")) {
@@ -25,11 +25,11 @@ let AudioVisualiser = class AudioVisualiser extends LitElement {
     }
     render() {
         // Each segment represents 20%. Using Math.round to fill segments.
-        const activeSegments = Math.round(this.level * SEGMENT_COUNT);
-        const segments = map(range(SEGMENT_COUNT), (i) => html `<div class=${classMap({
+        const activeSegments = Math.round(this.level * this.segmentCount);
+        const segments = map(range(this.segmentCount), (i) => html `<div class=${classMap({
             active: i < activeSegments,
             segment: true,
-        })}></div>`);
+        })} />`);
         return html `
       <div class=${classMap({
             active: this.active,
@@ -40,15 +40,18 @@ let AudioVisualiser = class AudioVisualiser extends LitElement {
     `;
     }
 };
-AudioVisualiser.styles = AudioVisualiserStyles;
+DictationAudioVisualiser.styles = AudioVisualiserStyles;
 __decorate([
     property({ type: Number })
-], AudioVisualiser.prototype, "level", void 0);
+], DictationAudioVisualiser.prototype, "level", void 0);
 __decorate([
     property({ type: Boolean })
-], AudioVisualiser.prototype, "active", void 0);
-AudioVisualiser = __decorate([
-    customElement("audio-visualiser")
-], AudioVisualiser);
-export { AudioVisualiser };
+], DictationAudioVisualiser.prototype, "active", void 0);
+__decorate([
+    property({ type: Number })
+], DictationAudioVisualiser.prototype, "segmentCount", void 0);
+DictationAudioVisualiser = __decorate([
+    customElement("dictation-audio-visualiser")
+], DictationAudioVisualiser);
+export { DictationAudioVisualiser };
 //# sourceMappingURL=audio-visualiser.js.map

package/dist/components/audio-visualiser.js.map

@@ -1 +1 @@
-{"version":3,"file":"audio-visualiser.js","sourceRoot":"","sources":["../../src/components/audio-visualiser.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,qBAAqB,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,MAAM,aAAa,GAAG,CAAC,CAAC;AAGjB,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAEL,UAAK,GAAW,CAAC,CAAC;QAGlB,WAAM,GAAY,KAAK,CAAC;IA+B1B,CAAC;IA3BC,UAAU,CAAC,iBAAuC;QAChD,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,kEAAkE;QAClE,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC,CAAC;QAC9D,MAAM,QAAQ,GAAG,GAAG,CAClB,KAAK,CAAC,aAAa,CAAC,EACpB,CAAC,CAAC,EAAE,EAAE,CACJ,IAAI,CAAA,cAAc,QAAQ,CAAC;YACzB,MAAM,EAAE,CAAC,GAAG,cAAc;YAC1B,OAAO,EAAE,IAAI;SACd,CAAC,SAAS,CACd,CAAC;QAEF,OAAO,IAAI,CAAA;mBACI,QAAQ,CAAC;YACpB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,SAAS,EAAE,IAAI;SAChB,CAAC;UACE,QAAQ;;KAEb,CAAC;IACJ,CAAC;;AA5BM,sBAAM,GAAG,qBAAqB,AAAxB,CAAyB;AALtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACT;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACJ;AALb,eAAe;IAD3B,aAAa,CAAC,kBAAkB,CAAC;GACrB,eAAe,CAoC3B","sourcesContent":["import { html, LitElement, type PropertyValues } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { map } from \"lit/directives/map.js\";\nimport { range } from \"lit/directives/range.js\";\nimport AudioVisualiserStyles from \"../styles/audio-visualiser.js\";\nimport { normalizeToRange } from \"../utils/validation.js\";\n\nconst SEGMENT_COUNT = 5;\n\n@customElement(\"audio-visualiser\")\nexport class AudioVisualiser extends LitElement {\n  @property({ type: Number })\n  level: number = 0;\n\n  @property({ type: Boolean })\n  active: boolean = false;\n\n  static styles = AudioVisualiserStyles;\n\n  willUpdate(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has(\"level\")) {\n      this.level = normalizeToRange(this.level);\n    }\n  }\n\n  render() {\n    // Each segment represents 20%. Using Math.round to fill segments.\n    const activeSegments = Math.round(this.level * SEGMENT_COUNT);\n    const segments = map(\n      range(SEGMENT_COUNT),\n      (i) =>\n        html`<div class=${classMap({\n          active: i < activeSegments,\n          segment: true,\n        })}></div>`,\n    );\n\n    return html`\n      <div class=${classMap({\n        active: this.active,\n        container: true,\n      })}>\n        ${segments}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"audio-visualiser\": AudioVisualiser;\n  }\n}\n"]}
+{"version":3,"file":"audio-visualiser.js","sourceRoot":"","sources":["../../src/components/audio-visualiser.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,qBAAqB,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAGnD,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,UAAU;IAAjD;;QAEL,UAAK,GAAW,CAAC,CAAC;QAGlB,WAAM,GAAY,KAAK,CAAC;QAGxB,iBAAY,GAAW,CAAC,CAAC;IA+B3B,CAAC;IA3BC,UAAU,CAAC,iBAAuC;QAChD,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,kEAAkE;QAClE,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;QAClE,MAAM,QAAQ,GAAG,GAAG,CAClB,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,EACxB,CAAC,CAAC,EAAE,EAAE,CACJ,IAAI,CAAA,cAAc,QAAQ,CAAC;YACzB,MAAM,EAAE,CAAC,GAAG,cAAc;YAC1B,OAAO,EAAE,IAAI;SACd,CAAC,KAAK,CACV,CAAC;QAEF,OAAO,IAAI,CAAA;mBACI,QAAQ,CAAC;YACpB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,SAAS,EAAE,IAAI;SAChB,CAAC;UACE,QAAQ;;KAEb,CAAC;IACJ,CAAC;;AA5BM,+BAAM,GAAG,qBAAqB,AAAxB,CAAyB;AARtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACT;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACJ;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DACF;AARd,wBAAwB;IADpC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,wBAAwB,CAuCpC","sourcesContent":["import { html, LitElement, type PropertyValues } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { map } from \"lit/directives/map.js\";\nimport { range } from \"lit/directives/range.js\";\nimport AudioVisualiserStyles from \"../styles/audio-visualiser.js\";\nimport { normalizeToRange } from \"../utils/validation.js\";\n\n@customElement(\"dictation-audio-visualiser\")\nexport class DictationAudioVisualiser extends LitElement {\n  @property({ type: Number })\n  level: number = 0;\n\n  @property({ type: Boolean })\n  active: boolean = false;\n\n  @property({ type: Number })\n  segmentCount: number = 5;\n\n  static styles = AudioVisualiserStyles;\n\n  willUpdate(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has(\"level\")) {\n      this.level = normalizeToRange(this.level);\n    }\n  }\n\n  render() {\n    // Each segment represents 20%. Using Math.round to fill segments.\n    const activeSegments = Math.round(this.level * this.segmentCount);\n    const segments = map(\n      range(this.segmentCount),\n      (i) =>\n        html`<div class=${classMap({\n          active: i < activeSegments,\n          segment: true,\n        })} />`,\n    );\n\n    return html`\n      <div class=${classMap({\n        active: this.active,\n        container: true,\n      })}>\n        ${segments}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"dictation-audio-visualiser\": DictationAudioVisualiser;\n  }\n}\n"]}

package/dist/components/corti-dictation.d.ts

@@ -1,13 +1,12 @@
 import type { Corti } from "@corti/sdk";
 import { LitElement } from "lit";
-import type { ConfigurableSettings, ProxyOptions, RecordingState } from "../types.js";
+import type { ConfigurableSettings, DictationMode, ProxyOptions, RecordingState } from "../types.js";
 import "../contexts/dictation-context.js";
 import "./recording-button.js";
 import "./settings-menu.js";
 export declare class CortiDictation extends LitElement {
+    #private;
     static styles: import("lit").CSSResult;
-    private recordingButtonRef;
-    private contextProviderRef;
     /**
      * Latest access token
      */
@@ -28,9 +27,9 @@ export declare class CortiDictation extends LitElement {
      * List of all language codes available for use with the Web Component.
      *  Default list depends on the accessToken
      */
-    set languagesSupported(value: string[] | undefined);
-    get languagesSupported(): string[];
-    private _languagesSupported?;
+    set languagesSupported(value: Corti.TranscribeSupportedLanguage[] | undefined);
+    get languagesSupported(): Corti.TranscribeSupportedLanguage[];
+    _languagesSupported?: Corti.TranscribeSupportedLanguage[];
     /**
      * Which settings should be available in the UI.
      *  If an empty array is passed, the settings will be disabled entirely.
@@ -53,23 +52,37 @@ export declare class CortiDictation extends LitElement {
      */
     set dictationConfig(value: Corti.TranscribeConfig);
     get dictationConfig(): Corti.TranscribeConfig;
-    private _dictationConfig;
+    _dictationConfig: Corti.TranscribeConfig;
     /**
      * List of available recording devices
      */
     set devices(value: MediaDeviceInfo[] | undefined);
     get devices(): MediaDeviceInfo[];
-    private _devices?;
+    _devices?: MediaDeviceInfo[];
     /**
      * The selected device used for recording (MediaDeviceInfo).
      */
     set selectedDevice(value: MediaDeviceInfo | undefined);
     get selectedDevice(): MediaDeviceInfo | undefined;
-    private _selectedDevice?;
+    _selectedDevice?: MediaDeviceInfo;
     /**
      * Current state of recording (stopped, recording, initializing and stopping, ).
      */
     get recordingState(): RecordingState;
+    /**
+     * Dictation mode: "toggle-to-talk" or "push-to-talk"
+     */
+    set mode(value: DictationMode);
+    get mode(): DictationMode;
+    _mode?: DictationMode;
+    /**
+     * 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: string | null | undefined);
+    get keybinding(): string | null | undefined;
+    _keybinding?: string | null;
     /**
      * Set the latest access token.
      * @returns ServerConfig with environment, tenant, and accessToken
@@ -81,8 +94,8 @@ export declare class CortiDictation extends LitElement {
         tenant: undefined;
     } | {
         accessToken: string;
-        environment: string | undefined;
-        tenant: string | undefined;
+        environment: string;
+        tenant: string;
     };
     /**
      * Set the auth configuration for OAuth flows.
@@ -95,8 +108,8 @@ export declare class CortiDictation extends LitElement {
         tenant: undefined;
     } | {
         accessToken: string;
-        environment: string | undefined;
-        tenant: string | undefined;
+        environment: string;
+        tenant: string;
     } | {
         accessToken: undefined;
         environment: undefined;

package/dist/components/corti-dictation.js

@@ -4,7 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html, LitElement } from "lit";
+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 _CortiDictation_recordingButtonRef, _CortiDictation_contextProviderRef;
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { createRef, ref } from "lit/directives/ref.js";
@@ -19,8 +25,8 @@ let CortiDictation = class CortiDictation extends LitElement {
         // ─────────────────────────────────────────────────────────────────────────────
         // Private refs
         // ─────────────────────────────────────────────────────────────────────────────
-        this.recordingButtonRef = createRef();
-        this.contextProviderRef = createRef();
+        _CortiDictation_recordingButtonRef.set(this, createRef());
+        _CortiDictation_contextProviderRef.set(this, createRef());
         /**
          * Which settings should be available in the UI.
          *  If an empty array is passed, the settings will be disabled entirely.
@@ -39,6 +45,7 @@ let CortiDictation = class CortiDictation extends LitElement {
          */
         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.
@@ -48,7 +55,9 @@ let CortiDictation = class CortiDictation extends LitElement {
         this._languagesSupported = value;
     }
     get languagesSupported() {
-        return (this.contextProviderRef.value?.languages || this._languagesSupported || []);
+        return (__classPrivateFieldGet(this, _CortiDictation_contextProviderRef, "f").value?.languages ||
+            this._languagesSupported ||
+            []);
     }
     /**
      * Configuration settings for dictation
@@ -57,7 +66,7 @@ let CortiDictation = class CortiDictation extends LitElement {
         this._dictationConfig = value;
     }
     get dictationConfig() {
-        return (this.contextProviderRef.value?.dictationConfig || this._dictationConfig);
+        return (__classPrivateFieldGet(this, _CortiDictation_contextProviderRef, "f").value?.dictationConfig || this._dictationConfig);
     }
     /**
      * List of available recording devices
@@ -66,7 +75,7 @@ let CortiDictation = class CortiDictation extends LitElement {
         this._devices = value;
     }
     get devices() {
-        return this.contextProviderRef.value?.devices || this._devices || [];
+        return __classPrivateFieldGet(this, _CortiDictation_contextProviderRef, "f").value?.devices || this._devices || [];
     }
     /**
      * The selected device used for recording (MediaDeviceInfo).
@@ -75,13 +84,33 @@ let CortiDictation = class CortiDictation extends LitElement {
         this._selectedDevice = value;
     }
     get selectedDevice() {
-        return (this.contextProviderRef.value?.selectedDevice || this._selectedDevice);
+        return (__classPrivateFieldGet(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 __classPrivateFieldGet(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 (__classPrivateFieldGet(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 __classPrivateFieldGet(this, _CortiDictation_contextProviderRef, "f").value?.keybinding || this._keybinding;
     }
     // ─────────────────────────────────────────────────────────────────────────────
     // Public methods
@@ -93,7 +122,7 @@ let CortiDictation = class CortiDictation extends LitElement {
      */
     setAccessToken(token) {
         this.accessToken = token;
-        return (this.contextProviderRef.value?.setAccessToken(token) ?? {
+        return (__classPrivateFieldGet(this, _CortiDictation_contextProviderRef, "f").value?.setAccessToken(token) ?? {
             accessToken: token,
             environment: undefined,
             tenant: undefined,
@@ -106,7 +135,7 @@ let CortiDictation = class CortiDictation extends LitElement {
      */
     async setAuthConfig(config) {
         this.authConfig = config;
-        return (this.contextProviderRef.value?.setAuthConfig(config) ?? {
+        return (__classPrivateFieldGet(this, _CortiDictation_contextProviderRef, "f").value?.setAuthConfig(config) ?? {
             accessToken: undefined,
             environment: undefined,
             tenant: undefined,
@@ -116,19 +145,19 @@ let CortiDictation = class CortiDictation extends LitElement {
      * Starts a recording.
      */
     startRecording() {
-        this.recordingButtonRef.value?.startRecording();
+        __classPrivateFieldGet(this, _CortiDictation_recordingButtonRef, "f").value?.startRecording();
     }
     /**
      * Stops a recording.
      */
     stopRecording() {
-        this.recordingButtonRef.value?.stopRecording();
+        __classPrivateFieldGet(this, _CortiDictation_recordingButtonRef, "f").value?.stopRecording();
     }
     /**
      * Starts or stops recording. Convenience layer on top of the start/stop methods.
      */
     toggleRecording() {
-        this.recordingButtonRef.value?.toggleRecording();
+        __classPrivateFieldGet(this, _CortiDictation_recordingButtonRef, "f").value?.toggleRecording();
     }
     // ─────────────────────────────────────────────────────────────────────────────
     // Render
@@ -139,8 +168,8 @@ let CortiDictation = class CortiDictation extends LitElement {
             !this.socketUrl &&
             !this.socketProxy;
         return html `
-      <dictation-context-provider
-        ${ref(this.contextProviderRef)}
+      <dictation-root
+        ${ref(__classPrivateFieldGet(this, _CortiDictation_contextProviderRef, "f"))}
         class=${classMap({ hidden: isHidden })}
         .accessToken=${this.accessToken}
         .authConfig=${this.authConfig}
@@ -151,16 +180,24 @@ let CortiDictation = class CortiDictation extends LitElement {
         .devices=${this._devices}
         .selectedDevice=${this._selectedDevice}
         .debug_displayAudio=${this.debug_displayAudio}
+        .mode=${this._mode}
+        .keybinding=${this._keybinding}
       >
-        <recording-button
-          ${ref(this.recordingButtonRef)}
-          .preventFocus=${!this.allowButtonFocus}
-        ></recording-button>
-        <settings-menu .settingsEnabled=${this.settingsEnabled}></settings-menu>
-      </dictation-context-provider>
+        <dictation-recording-button
+          ${ref(__classPrivateFieldGet(this, _CortiDictation_recordingButtonRef, "f"))}
+          ?allowButtonFocus=${this.allowButtonFocus}
+        ></dictation-recording-button>
+        ${this.settingsEnabled?.length > 0
+            ? html `<dictation-settings-menu
+                .settingsEnabled=${this.settingsEnabled}
+              ></dictation-settings-menu>`
+            : nothing}
+      </dictation-root>
     `;
     }
 };
+_CortiDictation_recordingButtonRef = new WeakMap();
+_CortiDictation_contextProviderRef = new WeakMap();
 CortiDictation.styles = css `
     .hidden {
       display: none;
@@ -217,6 +254,18 @@ __decorate([
 __decorate([
     state()
 ], CortiDictation.prototype, "_selectedDevice", void 0);
+__decorate([
+    property({ type: String })
+], CortiDictation.prototype, "mode", null);
+__decorate([
+    state()
+], CortiDictation.prototype, "_mode", void 0);
+__decorate([
+    property({ type: String })
+], CortiDictation.prototype, "keybinding", null);
+__decorate([
+    state()
+], CortiDictation.prototype, "_keybinding", void 0);
 CortiDictation = __decorate([
     customElement("corti-dictation")
 ], CortiDictation);

package/dist/components/corti-dictation.js.map

@@ -1 +1 @@
-{"version":3,"file":"corti-dictation.js","sourceRoot":"","sources":["../../src/components/corti-dictation.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Corti } from \"@corti/sdk\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { createRef, type Ref, ref } from \"lit/directives/ref.js\";\nimport { DEFAULT_DICTATION_CONFIG } from \"../constants.js\";\nimport type { DictationContext } from \"../contexts/dictation-context.js\";\nimport type {\n  ConfigurableSettings,\n  ProxyOptions,\n  RecordingState,\n} from \"../types.js\";\nimport { commaSeparatedConverter } from \"../utils/converters.js\";\nimport type { RecordingButton } from \"./recording-button.js\";\n\nimport \"../contexts/dictation-context.js\";\nimport \"./recording-button.js\";\nimport \"./settings-menu.js\";\n\n@customElement(\"corti-dictation\")\nexport class CortiDictation extends LitElement {\n  static styles = css`\n    .hidden {\n      display: none;\n    }\n  `;\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Private refs\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  private recordingButtonRef: Ref<RecordingButton> = createRef();\n  private contextProviderRef: Ref<DictationContext> = createRef();\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Properties\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  /**\n   * Latest access token\n   */\n  @property({ type: String })\n  accessToken?: string;\n\n  /**\n   * Authentication configuration with optional refresh mechanism.\n   */\n  @property({ attribute: false, type: Object })\n  authConfig?: Corti.BearerOptions;\n\n  /**\n   * WebSocket URL for proxy connection. When provided, uses CortiWebSocketProxyClient instead of CortiClient.\n   */\n  @property({ type: String })\n  socketUrl?: string;\n\n  /**\n   * Socket proxy configuration object. When provided, uses CortiWebSocketProxyClient instead of CortiClient.\n   */\n  @property({ attribute: false, type: Object })\n  socketProxy?: ProxyOptions;\n\n  /**\n   * List of all language codes available for use with the Web Component.\n   *  Default list depends on the accessToken\n   */\n  @property({\n    converter: commaSeparatedConverter,\n    type: Array,\n  })\n  set languagesSupported(value: string[] | undefined) {\n    this._languagesSupported = value;\n  }\n\n  get languagesSupported(): string[] {\n    return (\n      this.contextProviderRef.value?.languages || this._languagesSupported || []\n    );\n  }\n\n  @state()\n  private _languagesSupported?: string[];\n\n  /**\n   * Which settings should be available in the UI.\n   *  If an empty array is passed, the settings will be disabled entirely.\n   *  Options are language and devices\n   */\n  @property({\n    converter: commaSeparatedConverter,\n    type: Array,\n  })\n  settingsEnabled: ConfigurableSettings[] = [\"device\", \"language\"];\n\n  /**\n   * When false (default), allows the start/stop button from taking focus when clicked,\n   *  disabling textareas or other input elements to maintain focus.\n   *  Set to \"true\" to allow the button to receive focus on click.\n   */\n  @property({ type: Boolean })\n  allowButtonFocus: boolean = false;\n\n  /**\n   * Overrides any device selection and instead uses getDisplayMedia to stream system audio.\n   * Should only be used for debugging.\n   */\n  @property({ attribute: \"debug-display-audio\", type: Boolean })\n  debug_displayAudio: boolean = false;\n\n  /**\n   * Configuration settings for dictation\n   */\n  @property({ attribute: false, type: Object })\n  set dictationConfig(value: Corti.TranscribeConfig) {\n    this._dictationConfig = value;\n  }\n\n  get dictationConfig(): Corti.TranscribeConfig {\n    return (\n      this.contextProviderRef.value?.dictationConfig || this._dictationConfig\n    );\n  }\n\n  @state()\n  private _dictationConfig: Corti.TranscribeConfig = DEFAULT_DICTATION_CONFIG;\n\n  /**\n   * List of available recording devices\n   */\n  @property({ attribute: false, type: Array })\n  set devices(value: MediaDeviceInfo[] | undefined) {\n    this._devices = value;\n  }\n\n  get devices(): MediaDeviceInfo[] {\n    return this.contextProviderRef.value?.devices || this._devices || [];\n  }\n\n  @state()\n  private _devices?: MediaDeviceInfo[];\n\n  /**\n   * The selected device used for recording (MediaDeviceInfo).\n   */\n  @property({ attribute: false, type: Object })\n  set selectedDevice(value: MediaDeviceInfo | undefined) {\n    this._selectedDevice = value;\n  }\n\n  get selectedDevice(): MediaDeviceInfo | undefined {\n    return (\n      this.contextProviderRef.value?.selectedDevice || this._selectedDevice\n    );\n  }\n\n  @state()\n  private _selectedDevice?: MediaDeviceInfo;\n\n  /**\n   * Current state of recording (stopped, recording, initializing and stopping, ).\n   */\n  get recordingState(): RecordingState {\n    return this.contextProviderRef.value?.recordingState || \"stopped\";\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Public methods\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  /**\n   * Set the latest access token.\n   * @returns ServerConfig with environment, tenant, and accessToken\n   * @deprecated Use 'accessToken' property instead.\n   */\n  public setAccessToken(token: string) {\n    this.accessToken = token;\n\n    return (\n      this.contextProviderRef.value?.setAccessToken(token) ?? {\n        accessToken: token,\n        environment: undefined,\n        tenant: undefined,\n      }\n    );\n  }\n\n  /**\n   * Set the auth configuration for OAuth flows.\n   * @returns Promise with ServerConfig containing environment, tenant, and accessToken\n   * @deprecated Use 'authConfig' property instead.\n   */\n  public async setAuthConfig(config: Corti.BearerOptions) {\n    this.authConfig = config;\n\n    return (\n      this.contextProviderRef.value?.setAuthConfig(config) ?? {\n        accessToken: undefined,\n        environment: undefined,\n        tenant: undefined,\n      }\n    );\n  }\n\n  /**\n   * Starts a recording.\n   */\n  public startRecording(): void {\n    this.recordingButtonRef.value?.startRecording();\n  }\n\n  /**\n   * Stops a recording.\n   */\n  public stopRecording(): void {\n    this.recordingButtonRef.value?.stopRecording();\n  }\n\n  /**\n   * Starts or stops recording. Convenience layer on top of the start/stop methods.\n   */\n  public toggleRecording(): void {\n    this.recordingButtonRef.value?.toggleRecording();\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Render\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  render() {\n    const isHidden =\n      !this.accessToken &&\n      !this.authConfig &&\n      !this.socketUrl &&\n      !this.socketProxy;\n\n    return html`\n      <dictation-context-provider\n        ${ref(this.contextProviderRef)}\n        class=${classMap({ hidden: isHidden })}\n        .accessToken=${this.accessToken}\n        .authConfig=${this.authConfig}\n        .socketUrl=${this.socketUrl}\n        .socketProxy=${this.socketProxy}\n        .dictationConfig=${this._dictationConfig}\n        .languages=${this._languagesSupported}\n        .devices=${this._devices}\n        .selectedDevice=${this._selectedDevice}\n        .debug_displayAudio=${this.debug_displayAudio}\n      >\n        <recording-button\n          ${ref(this.recordingButtonRef)}\n          .preventFocus=${!this.allowButtonFocus}\n        ></recording-button>\n        <settings-menu .settingsEnabled=${this.settingsEnabled}></settings-menu>\n      </dictation-context-provider>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"corti-dictation\": CortiDictation;\n  }\n}\n"]}
+{"version":3,"file":"corti-dictation.js","sourceRoot":"","sources":["../../src/components/corti-dictation.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Corti } from \"@corti/sdk\";\nimport { css, html, LitElement, nothing } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { createRef, type Ref, ref } from \"lit/directives/ref.js\";\nimport { DEFAULT_DICTATION_CONFIG } from \"../constants.js\";\nimport type { DictationRoot } from \"../contexts/dictation-context.js\";\nimport type {\n  ConfigurableSettings,\n  DictationMode,\n  ProxyOptions,\n  RecordingState,\n} from \"../types.js\";\nimport { commaSeparatedConverter } from \"../utils/converters.js\";\nimport type { DictationRecordingButton } from \"./recording-button.js\";\n\nimport \"../contexts/dictation-context.js\";\nimport \"./recording-button.js\";\nimport \"./settings-menu.js\";\n\n@customElement(\"corti-dictation\")\nexport class CortiDictation extends LitElement {\n  static styles = css`\n    .hidden {\n      display: none;\n    }\n  `;\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Private refs\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  #recordingButtonRef: Ref<DictationRecordingButton> = createRef();\n  #contextProviderRef: Ref<DictationRoot> = createRef();\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Properties\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  /**\n   * Latest access token\n   */\n  @property({ type: String })\n  accessToken?: string;\n\n  /**\n   * Authentication configuration with optional refresh mechanism.\n   */\n  @property({ attribute: false, type: Object })\n  authConfig?: Corti.BearerOptions;\n\n  /**\n   * WebSocket URL for proxy connection. When provided, uses CortiWebSocketProxyClient instead of CortiClient.\n   */\n  @property({ type: String })\n  socketUrl?: string;\n\n  /**\n   * Socket proxy configuration object. When provided, uses CortiWebSocketProxyClient instead of CortiClient.\n   */\n  @property({ attribute: false, type: Object })\n  socketProxy?: ProxyOptions;\n\n  /**\n   * List of all language codes available for use with the Web Component.\n   *  Default list depends on the accessToken\n   */\n  @property({\n    converter: commaSeparatedConverter,\n    type: Array,\n  })\n  set languagesSupported(value:\n    | Corti.TranscribeSupportedLanguage[]\n    | undefined) {\n    this._languagesSupported = value;\n  }\n\n  get languagesSupported(): Corti.TranscribeSupportedLanguage[] {\n    return (\n      this.#contextProviderRef.value?.languages ||\n      this._languagesSupported ||\n      []\n    );\n  }\n\n  @state()\n  _languagesSupported?: Corti.TranscribeSupportedLanguage[];\n\n  /**\n   * Which settings should be available in the UI.\n   *  If an empty array is passed, the settings will be disabled entirely.\n   *  Options are language and devices\n   */\n  @property({\n    converter: commaSeparatedConverter,\n    type: Array,\n  })\n  settingsEnabled: ConfigurableSettings[] = [\"device\", \"language\"];\n\n  /**\n   * When false (default), allows the start/stop button from taking focus when clicked,\n   *  disabling textareas or other input elements to maintain focus.\n   *  Set to \"true\" to allow the button to receive focus on click.\n   */\n  @property({ type: Boolean })\n  allowButtonFocus: boolean = false;\n\n  /**\n   * Overrides any device selection and instead uses getDisplayMedia to stream system audio.\n   * Should only be used for debugging.\n   */\n  @property({ attribute: \"debug-display-audio\", type: Boolean })\n  debug_displayAudio: boolean = false;\n\n  /**\n   * Configuration settings for dictation\n   */\n  @property({ attribute: false, type: Object })\n  set dictationConfig(value: Corti.TranscribeConfig) {\n    this._dictationConfig = value;\n  }\n\n  get dictationConfig(): Corti.TranscribeConfig {\n    return (\n      this.#contextProviderRef.value?.dictationConfig || this._dictationConfig\n    );\n  }\n\n  @state()\n  _dictationConfig: Corti.TranscribeConfig = DEFAULT_DICTATION_CONFIG;\n\n  /**\n   * List of available recording devices\n   */\n  @property({ attribute: false, type: Array })\n  set devices(value: MediaDeviceInfo[] | undefined) {\n    this._devices = value;\n  }\n\n  get devices(): MediaDeviceInfo[] {\n    return this.#contextProviderRef.value?.devices || this._devices || [];\n  }\n\n  @state()\n  _devices?: MediaDeviceInfo[];\n\n  /**\n   * The selected device used for recording (MediaDeviceInfo).\n   */\n  @property({ attribute: false, type: Object })\n  set selectedDevice(value: MediaDeviceInfo | undefined) {\n    this._selectedDevice = value;\n  }\n\n  get selectedDevice(): MediaDeviceInfo | undefined {\n    return (\n      this.#contextProviderRef.value?.selectedDevice || this._selectedDevice\n    );\n  }\n\n  @state()\n  _selectedDevice?: MediaDeviceInfo;\n\n  /**\n   * Current state of recording (stopped, recording, initializing and stopping, ).\n   */\n  get recordingState(): RecordingState {\n    return this.#contextProviderRef.value?.recordingState || \"stopped\";\n  }\n\n  /**\n   * Dictation mode: \"toggle-to-talk\" or \"push-to-talk\"\n   */\n  @property({ type: String })\n  set mode(value: DictationMode) {\n    this._mode = value;\n  }\n\n  get mode(): DictationMode {\n    return (\n      this.#contextProviderRef.value?.mode || this._mode || \"toggle-to-talk\"\n    );\n  }\n\n  @state()\n  _mode?: DictationMode = \"toggle-to-talk\";\n\n  /**\n   * Keybinding for keyboard shortcut. Single key only (e.g., \"`\", \"k\", \"meta\", \"ctrl\").\n   * Combinations with \"+\" are not supported.\n   * Defaults to \"`\" if keybinding is in settingsEnabled, otherwise undefined\n   */\n  @property({ type: String })\n  set keybinding(value: string | null | undefined) {\n    this._keybinding = value;\n  }\n\n  get keybinding(): string | null | undefined {\n    return this.#contextProviderRef.value?.keybinding || this._keybinding;\n  }\n\n  @state()\n  _keybinding?: string | null;\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Public methods\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  /**\n   * Set the latest access token.\n   * @returns ServerConfig with environment, tenant, and accessToken\n   * @deprecated Use 'accessToken' property instead.\n   */\n  public setAccessToken(token: string) {\n    this.accessToken = token;\n\n    return (\n      this.#contextProviderRef.value?.setAccessToken(token) ?? {\n        accessToken: token,\n        environment: undefined,\n        tenant: undefined,\n      }\n    );\n  }\n\n  /**\n   * Set the auth configuration for OAuth flows.\n   * @returns Promise with ServerConfig containing environment, tenant, and accessToken\n   * @deprecated Use 'authConfig' property instead.\n   */\n  public async setAuthConfig(config: Corti.BearerOptions) {\n    this.authConfig = config;\n\n    return (\n      this.#contextProviderRef.value?.setAuthConfig(config) ?? {\n        accessToken: undefined,\n        environment: undefined,\n        tenant: undefined,\n      }\n    );\n  }\n\n  /**\n   * Starts a recording.\n   */\n  public startRecording(): void {\n    this.#recordingButtonRef.value?.startRecording();\n  }\n\n  /**\n   * Stops a recording.\n   */\n  public stopRecording(): void {\n    this.#recordingButtonRef.value?.stopRecording();\n  }\n\n  /**\n   * Starts or stops recording. Convenience layer on top of the start/stop methods.\n   */\n  public toggleRecording(): void {\n    this.#recordingButtonRef.value?.toggleRecording();\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Render\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  render() {\n    const isHidden =\n      !this.accessToken &&\n      !this.authConfig &&\n      !this.socketUrl &&\n      !this.socketProxy;\n\n    return html`\n      <dictation-root\n        ${ref(this.#contextProviderRef)}\n        class=${classMap({ hidden: isHidden })}\n        .accessToken=${this.accessToken}\n        .authConfig=${this.authConfig}\n        .socketUrl=${this.socketUrl}\n        .socketProxy=${this.socketProxy}\n        .dictationConfig=${this._dictationConfig}\n        .languages=${this._languagesSupported}\n        .devices=${this._devices}\n        .selectedDevice=${this._selectedDevice}\n        .debug_displayAudio=${this.debug_displayAudio}\n        .mode=${this._mode}\n        .keybinding=${this._keybinding}\n      >\n        <dictation-recording-button\n          ${ref(this.#recordingButtonRef)}\n          ?allowButtonFocus=${this.allowButtonFocus}\n        ></dictation-recording-button>\n        ${\n          this.settingsEnabled?.length > 0\n            ? html`<dictation-settings-menu\n                .settingsEnabled=${this.settingsEnabled}\n              ></dictation-settings-menu>`\n            : nothing\n        }\n      </dictation-root>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"corti-dictation\": CortiDictation;\n  }\n}\n"]}

package/dist/components/device-selector.d.ts

@@ -1,24 +1,14 @@
 import { LitElement } from "lit";
-export declare class DeviceSelector extends LitElement {
-    private _devices?;
-    private _selectedDevice?;
+export declare class DictationDeviceSelector extends LitElement {
+    #private;
+    _devices?: MediaDeviceInfo[];
+    _selectedDevice?: MediaDeviceInfo;
     disabled: boolean;
-    /**
-     * Internal cache of loaded devices to check if devices were auto-loaded or provided via property
-     * @private
-     */
-    private _loadedDevices;
-    private _devicesAutoLoaded;
-    static styles: import("lit").CSSResult;
-    connectedCallback(): Promise<void>;
-    disconnectedCallback(): void;
-    private _loadDevices;
-    private _handleDeviceChange;
-    private _handleSelectDevice;
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "device-selector": DeviceSelector;
+        "dictation-device-selector": DictationDeviceSelector;
     }
 }

package/dist/components/device-selector.js

@@ -4,63 +4,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+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 _DictationDeviceSelector_instances, _DictationDeviceSelector_handleSelectDevice;
 import { consume } from "@lit/context";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { devicesContext, selectedDeviceContext, } from "../contexts/dictation-context.js";
 import SelectStyles from "../styles/select.js";
-import { getAudioDevices } from "../utils/devices.js";
-import { errorEvent, readyEvent, recordingDevicesChangedEvent, } from "../utils/events.js";
-let DeviceSelector = class DeviceSelector extends LitElement {
+import { recordingDevicesChangedEvent } from "../utils/events.js";
+let DictationDeviceSelector = class DictationDeviceSelector extends LitElement {
     constructor() {
         super(...arguments);
+        _DictationDeviceSelector_instances.add(this);
         this.disabled = false;
-        /**
-         * Internal cache of loaded devices to check if devices were auto-loaded or provided via property
-         * @private
-         */
-        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;
-            // Use selected device if it still exists, otherwise fall back to default
-            const selectedDevice = devices.find((d) => d.deviceId === this._selectedDevice?.deviceId) ??
-                defaultDevice;
-            this.dispatchEvent(recordingDevicesChangedEvent(devices, selectedDevice));
-        }
-        catch (error) {
-            this.dispatchEvent(errorEvent(error));
-        }
-    }
-    _handleSelectDevice(e) {
-        const deviceId = e.target.value;
-        const device = this._devices?.find((d) => d.deviceId === deviceId);
-        if (!device) {
-            return;
-        }
-        this.dispatchEvent(recordingDevicesChangedEvent(this._devices || [], device));
     }
     render() {
         return html `
@@ -71,7 +31,7 @@ let DeviceSelector = class DeviceSelector extends LitElement {
         <select
           id="device-select"
           aria-labelledby="device-select-label"
-          @change=${this._handleSelectDevice}
+          @change=${__classPrivateFieldGet(this, _DictationDeviceSelector_instances, "m", _DictationDeviceSelector_handleSelectDevice)}
           ?disabled=${this.disabled || !this._devices || this._devices.length === 0}
         >
           ${this._devices?.map((device) => html `
@@ -87,20 +47,29 @@ let DeviceSelector = class DeviceSelector extends LitElement {
     `;
     }
 };
-DeviceSelector.styles = SelectStyles;
+_DictationDeviceSelector_instances = new WeakSet();
+_DictationDeviceSelector_handleSelectDevice = function _DictationDeviceSelector_handleSelectDevice(e) {
+    const deviceId = e.target.value;
+    const device = this._devices?.find((d) => d.deviceId === deviceId);
+    if (!device) {
+        return;
+    }
+    this.dispatchEvent(recordingDevicesChangedEvent(this._devices || [], device));
+};
+DictationDeviceSelector.styles = SelectStyles;
 __decorate([
     consume({ context: devicesContext, subscribe: true }),
     state()
-], DeviceSelector.prototype, "_devices", void 0);
+], DictationDeviceSelector.prototype, "_devices", void 0);
 __decorate([
     consume({ context: selectedDeviceContext, subscribe: true }),
     state()
-], DeviceSelector.prototype, "_selectedDevice", void 0);
+], DictationDeviceSelector.prototype, "_selectedDevice", void 0);
 __decorate([
     property({ type: Boolean })
-], DeviceSelector.prototype, "disabled", void 0);
-DeviceSelector = __decorate([
-    customElement("device-selector")
-], DeviceSelector);
-export { DeviceSelector };
+], DictationDeviceSelector.prototype, "disabled", void 0);
+DictationDeviceSelector = __decorate([
+    customElement("dictation-device-selector")
+], DictationDeviceSelector);
+export { DictationDeviceSelector };
 //# sourceMappingURL=device-selector.js.map

package/dist/components/device-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"device-selector.js","sourceRoot":"","sources":["../../src/components/device-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from \"@lit/context\";\nimport { html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport {\n  devicesContext,\n  selectedDeviceContext,\n} from \"../contexts/dictation-context.js\";\nimport SelectStyles from \"../styles/select.js\";\nimport { getAudioDevices } from \"../utils/devices.js\";\nimport {\n  errorEvent,\n  readyEvent,\n  recordingDevicesChangedEvent,\n} from \"../utils/events.js\";\n\n@customElement(\"device-selector\")\nexport class DeviceSelector extends LitElement {\n  @consume({ context: devicesContext, subscribe: true })\n  @state()\n  private _devices?: MediaDeviceInfo[];\n\n  @consume({ context: selectedDeviceContext, subscribe: true })\n  @state()\n  private _selectedDevice?: MediaDeviceInfo;\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  /**\n   * Internal cache of loaded devices to check if devices were auto-loaded or provided via property\n   * @private\n   */\n  private _loadedDevices: MediaDeviceInfo[] = [];\n\n  private _devicesAutoLoaded(): boolean {\n    return this._loadedDevices === this._devices;\n  }\n\n  static styles = SelectStyles;\n\n  async connectedCallback(): Promise<void> {\n    super.connectedCallback();\n\n    if (!this._devices) {\n      await this._loadDevices();\n\n      navigator.mediaDevices.addEventListener(\n        \"devicechange\",\n        this._handleDeviceChange,\n      );\n    }\n\n    this.dispatchEvent(readyEvent());\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    navigator.mediaDevices.removeEventListener(\n      \"devicechange\",\n      this._handleDeviceChange,\n    );\n  }\n\n  private async _loadDevices(): Promise<void> {\n    try {\n      const { devices, defaultDevice } = await getAudioDevices();\n      this._loadedDevices = devices;\n\n      // Use selected device if it still exists, otherwise fall back to default\n      const selectedDevice =\n        devices.find((d) => d.deviceId === this._selectedDevice?.deviceId) ??\n        defaultDevice;\n\n      this.dispatchEvent(\n        recordingDevicesChangedEvent(devices, selectedDevice),\n      );\n    } catch (error) {\n      this.dispatchEvent(errorEvent(error));\n    }\n  }\n\n  private _handleDeviceChange = async () => {\n    if (this._devicesAutoLoaded()) {\n      await this._loadDevices();\n    }\n  };\n\n  private _handleSelectDevice(e: Event): void {\n    const deviceId = (e.target as HTMLSelectElement).value;\n    const device = this._devices?.find((d) => d.deviceId === deviceId);\n\n    if (!device) {\n      return;\n    }\n\n    this.dispatchEvent(\n      recordingDevicesChangedEvent(this._devices || [], device),\n    );\n  }\n\n  render() {\n    return html`\n      <div>\n        <label id=\"device-select-label\" for=\"device-select\">\n          Recording Device\n        </label>\n        <select\n          id=\"device-select\"\n          aria-labelledby=\"device-select-label\"\n          @change=${this._handleSelectDevice}\n          ?disabled=${this.disabled || !this._devices || this._devices.length === 0}\n        >\n          ${this._devices?.map(\n            (device) => html`\n              <option\n                value=${device.deviceId}\n                ?selected=${this._selectedDevice?.deviceId === device.deviceId}\n              >\n                ${device.label || \"Unknown Device\"}\n              </option>\n            `,\n          )}\n        </select>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"device-selector\": DeviceSelector;\n  }\n}\n"]}
+{"version":3,"file":"device-selector.js","sourceRoot":"","sources":["../../src/components/device-selector.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EACL,cAAc,EACd,qBAAqB,GACtB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,4BAA4B,EAAE,MAAM,oBAAoB,CAAC;AAG3D,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;;QAUL,aAAQ,GAAY,KAAK,CAAC;IA2C5B,CAAC;IA1BC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;oBAQK,uBAAA,IAAI,uFAAoB;sBACtB,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC;;YAEvE,IAAI,CAAC,QAAQ,EAAE,GAAG,CAClB,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,CAAA;;wBAEJ,MAAM,CAAC,QAAQ;4BACX,IAAI,CAAC,eAAe,EAAE,QAAQ,KAAK,MAAM,CAAC,QAAQ;;kBAE5D,MAAM,CAAC,KAAK,IAAI,gBAAgB;;aAErC,CACF;;;KAGN,CAAC;IACJ,CAAC;;;mGAtCmB,CAAQ;IAC1B,MAAM,QAAQ,GAAI,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC;IACvD,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC;IAEnE,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO;IACT,CAAC;IAED,IAAI,CAAC,aAAa,CAChB,4BAA4B,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,EAAE,MAAM,CAAC,CAC1D,CAAC;AACJ,CAAC;AAbM,8BAAM,GAAG,YAAY,AAAf,CAAgB;AAT7B;IAFC,OAAO,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACrD,KAAK,EAAE;yDACqB;AAI7B;IAFC,OAAO,CAAC,EAAE,OAAO,EAAE,qBAAqB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IAC5D,KAAK,EAAE;gEAC0B;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDACF;AAVf,uBAAuB;IADnC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,uBAAuB,CAqDnC","sourcesContent":["import { consume } from \"@lit/context\";\nimport { html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport {\n  devicesContext,\n  selectedDeviceContext,\n} from \"../contexts/dictation-context.js\";\nimport SelectStyles from \"../styles/select.js\";\nimport { recordingDevicesChangedEvent } from \"../utils/events.js\";\n\n@customElement(\"dictation-device-selector\")\nexport class DictationDeviceSelector extends LitElement {\n  @consume({ context: devicesContext, subscribe: true })\n  @state()\n  _devices?: MediaDeviceInfo[];\n\n  @consume({ context: selectedDeviceContext, subscribe: true })\n  @state()\n  _selectedDevice?: MediaDeviceInfo;\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  static styles = SelectStyles;\n\n  #handleSelectDevice(e: Event): void {\n    const deviceId = (e.target as HTMLSelectElement).value;\n    const device = this._devices?.find((d) => d.deviceId === deviceId);\n\n    if (!device) {\n      return;\n    }\n\n    this.dispatchEvent(\n      recordingDevicesChangedEvent(this._devices || [], device),\n    );\n  }\n\n  render() {\n    return html`\n      <div>\n        <label id=\"device-select-label\" for=\"device-select\">\n          Recording Device\n        </label>\n        <select\n          id=\"device-select\"\n          aria-labelledby=\"device-select-label\"\n          @change=${this.#handleSelectDevice}\n          ?disabled=${this.disabled || !this._devices || this._devices.length === 0}\n        >\n          ${this._devices?.map(\n            (device) => html`\n              <option\n                value=${device.deviceId}\n                ?selected=${this._selectedDevice?.deviceId === device.deviceId}\n              >\n                ${device.label || \"Unknown Device\"}\n              </option>\n            `,\n          )}\n        </select>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"dictation-device-selector\": DictationDeviceSelector;\n  }\n}\n"]}