@corti/dictation-web 0.0.0-rc.359

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

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+export declare class AudioVisualiser extends LitElement {
+    level: number;
+    active: boolean;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'audio-visualiser': AudioVisualiser;
+    }
+}

package/dist/components/audio-visualiser.js

@@ -0,0 +1,65 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+let AudioVisualiser = class AudioVisualiser extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.level = 0; // expects a value from 0 to 100
+        this.active = true;
+    }
+    render() {
+        // Each segment represents 20%. Using Math.ceil to fill segments optimistically.
+        const activeSegments = Math.round(this.level * 5);
+        const segments = [];
+        for (let i = 0; i < 5; i += 1) {
+            segments.push(html `
+        <div class="segment ${i < activeSegments ? 'active' : ''}"></div>
+      `);
+        }
+        return html `
+      <div class="container ${this.active ? 'active' : ''}">${segments}</div>
+    `;
+    }
+};
+AudioVisualiser.styles = css `
+    :host {
+      height: 100%;
+    }
+    .container {
+      display: flex;
+      width: 8px;
+      flex-direction: column-reverse; /* Bottom-up stacking */
+      height: 100%;
+      gap: 1px;
+      opacity: 0.5;
+      &.active {
+        opacity: 1;
+      }
+    }
+    .segment {
+      flex: 1;
+      background-color: var(--action-accent-text-color);
+      transition: background-color 0.25s;
+      border-radius: 1px;
+      opacity: 0.5;
+    }
+    .segment.active {
+      opacity: 1;
+    }
+  `;
+__decorate([
+    property({ type: Number })
+], AudioVisualiser.prototype, "level", void 0);
+__decorate([
+    property({ type: Boolean })
+], AudioVisualiser.prototype, "active", void 0);
+AudioVisualiser = __decorate([
+    customElement('audio-visualiser')
+], AudioVisualiser);
+export { AudioVisualiser };
+//# sourceMappingURL=audio-visualiser.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"audio-visualiser.js","sourceRoot":"","sources":["../../src/components/audio-visualiser.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QACuB,UAAK,GAAG,CAAC,CAAC,CAAC,gCAAgC;QAE1C,WAAM,GAAG,IAAI,CAAC;IA0C7C,CAAC;IAbC,MAAM;QACJ,gFAAgF;QAChF,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QAClD,MAAM,QAAQ,GAAG,EAAE,CAAC;QACpB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;YAC9B,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAA;8BACM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;OACzD,CAAC,CAAC;QACL,CAAC;QACD,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,QAAQ;KACjE,CAAC;IACJ,CAAC;;AAvCM,sBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBlB,AAzBY,CAyBX;AA7B0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAW;AAET;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAe;AAHhC,eAAe;IAD3B,aAAa,CAAC,kBAAkB,CAAC;GACrB,eAAe,CA6C3B","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\n\n@customElement('audio-visualiser')\nexport class AudioVisualiser extends LitElement {\n  @property({ type: Number }) level = 0; // expects a value from 0 to 100\n\n  @property({ type: Boolean }) active = true;\n\n  static styles = css`\n    :host {\n      height: 100%;\n    }\n    .container {\n      display: flex;\n      width: 8px;\n      flex-direction: column-reverse; /* Bottom-up stacking */\n      height: 100%;\n      gap: 1px;\n      opacity: 0.5;\n      &.active {\n        opacity: 1;\n      }\n    }\n    .segment {\n      flex: 1;\n      background-color: var(--action-accent-text-color);\n      transition: background-color 0.25s;\n      border-radius: 1px;\n      opacity: 0.5;\n    }\n    .segment.active {\n      opacity: 1;\n    }\n  `;\n\n  render() {\n    // Each segment represents 20%. Using Math.ceil to fill segments optimistically.\n    const activeSegments = Math.round(this.level * 5);\n    const segments = [];\n    for (let i = 0; i < 5; i += 1) {\n      segments.push(html`\n        <div class=\"segment ${i < activeSegments ? 'active' : ''}\"></div>\n      `);\n    }\n    return html`\n      <div class=\"container ${this.active ? 'active' : ''}\">${segments}</div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'audio-visualiser': AudioVisualiser;\n  }\n}\n"]}

package/dist/components/settings-menu.d.ts

@@ -0,0 +1,20 @@
+import { LitElement, TemplateResult, CSSResultGroup } from 'lit';
+export declare class SettingsMenu extends LitElement {
+    selectedDevice: MediaDeviceInfo | undefined;
+    selectedLanguage: string;
+    settingsDisabled: boolean;
+    private _devices;
+    get effectiveSelectedLanguage(): string;
+    constructor();
+    connectedCallback(): Promise<void>;
+    private handleDevicesChange;
+    static styles: CSSResultGroup;
+    private _selectDevice;
+    private _selectLanguage;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'settings-menu': SettingsMenu;
+    }
+}

package/dist/components/settings-menu.js

@@ -0,0 +1,185 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+// mic-selector.ts
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import ButtonStyles from '../styles/buttons.js';
+import SelectStyles from '../styles/select.js';
+import { LANGUAGES_SUPPORTED } from '../constants.js';
+import { getAudioDevices, getLanguageName } from '../utils.js';
+import CalloutStyles from '../styles/callout.js';
+let SettingsMenu = class SettingsMenu extends LitElement {
+    get effectiveSelectedLanguage() {
+        return this.selectedLanguage || LANGUAGES_SUPPORTED[0] || '';
+    }
+    constructor() {
+        super();
+        this.selectedLanguage = '';
+        this.settingsDisabled = false;
+        this._devices = [];
+        navigator.mediaDevices.addEventListener('devicechange', this.handleDevicesChange.bind(this));
+    }
+    // on load, get the available devices
+    async connectedCallback() {
+        super.connectedCallback();
+        const deviceResponse = await getAudioDevices();
+        this._devices = deviceResponse.devices;
+    }
+    async handleDevicesChange() {
+        const deviceResponse = await getAudioDevices();
+        this._devices = deviceResponse.devices;
+    }
+    _selectDevice(deviceId) {
+        // Find the device object
+        const device = this._devices.find(d => d.deviceId === deviceId);
+        if (!device) {
+            return;
+        }
+        this.selectedDevice = device;
+        this.dispatchEvent(new CustomEvent('recording-devices-changed', {
+            detail: {
+                devices: this._devices,
+                selectedDevice: device,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _selectLanguage(language) {
+        if (!LANGUAGES_SUPPORTED.includes(language)) {
+            return;
+        }
+        this.selectedLanguage = language;
+        this.dispatchEvent(new CustomEvent('language-changed', {
+            detail: {
+                language: language,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `
+      <div class="mic-selector">
+        <button id="settings-popover-button" popovertarget="settings-popover">
+          <icon-settings></icon-settings>
+        </button>
+        <div id="settings-popover" popover>
+          <div class="settings-wrapper">
+            ${this.settingsDisabled
+            ? html `
+                  <div class="callout warn">
+                    Recording is in progress. Stop recording to change settings.
+                  </div>
+                `
+            : ''}
+            <div class="form-group">
+              <label id="device-select-label" for="device-select">
+                Recording Device
+              </label>
+              <select
+                id="device-select"
+                aria-labelledby="device-select-label"
+                @change=${(e) => {
+            this._selectDevice(e.target.value);
+        }}
+                ?disabled=${this.settingsDisabled}
+              >
+                ${this._devices.map(device => html `
+                    <option
+                      value=${device.deviceId}
+                      ?selected=${this.selectedDevice?.deviceId ===
+            device.deviceId}
+                    >
+                      ${device.label || 'Unknown Device'}
+                    </option>
+                  `)}
+              </select>
+            </div>
+            <div class="form-group">
+              <label id="language-select-label" for="language-select">
+                Dictation Language
+              </label>
+              <select
+                id="language-select"
+                aria-labelledby="language-select-label"
+                @change=${(e) => {
+            this._selectLanguage(e.target.value);
+        }}
+                ?disabled=${this.settingsDisabled}
+              >
+                ${LANGUAGES_SUPPORTED.map(language => html `
+                    <option
+                      value=${language}
+                      ?selected=${this.effectiveSelectedLanguage === language}
+                    >
+                      ${getLanguageName(language)}
+                    </option>
+                  `)}
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+SettingsMenu.styles = [
+    css `
+      :host {
+        display: block;
+        font-family: var(--component-font-family);
+      }
+      /* Retain the anchor-name styling for this component */
+      #settings-popover-button {
+        anchor-name: --settings_popover_btn;
+      }
+      [popover] {
+        margin: 0;
+        padding: 16px;
+        border: 0;
+        background: var(--card-background);
+        border: 1px solid var(--card-border-color);
+        border-radius: var(--card-border-radius);
+        box-shadow: var(--card-box-shadow);
+        z-index: 1000;
+        max-width: 260px;
+        width: 100%;
+        min-width: 200px;
+        position-anchor: --settings_popover_btn;
+        position-area: bottom span-right;
+        position-visibility: always;
+        position-try-fallbacks: flip-inline;
+        overflow-x: hidden;
+      }
+      .settings-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+      }
+    `,
+    ButtonStyles,
+    SelectStyles,
+    CalloutStyles,
+];
+__decorate([
+    property({ type: Object })
+], SettingsMenu.prototype, "selectedDevice", void 0);
+__decorate([
+    property({ type: String })
+], SettingsMenu.prototype, "selectedLanguage", void 0);
+__decorate([
+    property({ type: Boolean })
+], SettingsMenu.prototype, "settingsDisabled", void 0);
+__decorate([
+    state()
+], SettingsMenu.prototype, "_devices", void 0);
+SettingsMenu = __decorate([
+    customElement('settings-menu')
+], SettingsMenu);
+export { SettingsMenu };
+//# sourceMappingURL=settings-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"settings-menu.js","sourceRoot":"","sources":["../../src/components/settings-menu.ts"],"names":[],"mappings":"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","sourcesContent":["// mic-selector.ts\nimport { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport ButtonStyles from '../styles/buttons.js';\nimport SelectStyles from '../styles/select.js';\nimport { LANGUAGES_SUPPORTED } from '../constants.js';\nimport { getAudioDevices, getLanguageName } from '../utils.js';\nimport CalloutStyles from '../styles/callout.js';\n\n@customElement('settings-menu')\nexport class SettingsMenu extends LitElement {\n  @property({ type: Object })\n  selectedDevice: MediaDeviceInfo | undefined;\n\n  @property({ type: String })\n  selectedLanguage: string = '';\n\n  @property({ type: Boolean })\n  settingsDisabled: boolean = false;\n\n  @state()\n  private _devices: MediaDeviceInfo[] = [];\n\n  get effectiveSelectedLanguage(): string {\n    return this.selectedLanguage || LANGUAGES_SUPPORTED[0] || '';\n  }\n\n  constructor() {\n    super();\n    navigator.mediaDevices.addEventListener(\n      'devicechange',\n      this.handleDevicesChange.bind(this),\n    );\n  }\n\n  // on load, get the available devices\n  async connectedCallback(): Promise<void> {\n    super.connectedCallback();\n    const deviceResponse = await getAudioDevices();\n    this._devices = deviceResponse.devices;\n  }\n\n  private async handleDevicesChange() {\n    const deviceResponse = await getAudioDevices();\n    this._devices = deviceResponse.devices;\n  }\n\n  static styles: CSSResultGroup = [\n    css`\n      :host {\n        display: block;\n        font-family: var(--component-font-family);\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        border: 0;\n        background: var(--card-background);\n        border: 1px solid var(--card-border-color);\n        border-radius: var(--card-border-radius);\n        box-shadow: var(--card-box-shadow);\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    ButtonStyles,\n    SelectStyles,\n    CalloutStyles,\n  ];\n  private _selectDevice(deviceId: string): void {\n    // Find the device object\n    const device = this._devices.find(d => d.deviceId === deviceId);\n    if (!device) {\n      return;\n    }\n    this.selectedDevice = device;\n    this.dispatchEvent(\n      new CustomEvent('recording-devices-changed', {\n        detail: {\n          devices: this._devices,\n          selectedDevice: device,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _selectLanguage(language: string): void {\n    if (!LANGUAGES_SUPPORTED.includes(language)) {\n      return;\n    }\n    this.selectedLanguage = language;\n    this.dispatchEvent(\n      new CustomEvent('language-changed', {\n        detail: {\n          language: language,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"mic-selector\">\n        <button id=\"settings-popover-button\" popovertarget=\"settings-popover\">\n          <icon-settings></icon-settings>\n        </button>\n        <div id=\"settings-popover\" popover>\n          <div class=\"settings-wrapper\">\n            ${this.settingsDisabled\n              ? html`\n                  <div class=\"callout warn\">\n                    Recording is in progress. Stop recording to change settings.\n                  </div>\n                `\n              : ''}\n            <div class=\"form-group\">\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=${(e: Event) => {\n                  this._selectDevice((e.target as HTMLSelectElement).value);\n                }}\n                ?disabled=${this.settingsDisabled}\n              >\n                ${this._devices.map(\n                  device => html`\n                    <option\n                      value=${device.deviceId}\n                      ?selected=${this.selectedDevice?.deviceId ===\n                      device.deviceId}\n                    >\n                      ${device.label || 'Unknown Device'}\n                    </option>\n                  `,\n                )}\n              </select>\n            </div>\n            <div class=\"form-group\">\n              <label id=\"language-select-label\" for=\"language-select\">\n                Dictation Language\n              </label>\n              <select\n                id=\"language-select\"\n                aria-labelledby=\"language-select-label\"\n                @change=${(e: Event) => {\n                  this._selectLanguage((e.target as HTMLSelectElement).value);\n                }}\n                ?disabled=${this.settingsDisabled}\n              >\n                ${LANGUAGES_SUPPORTED.map(\n                  language => html`\n                    <option\n                      value=${language}\n                      ?selected=${this.effectiveSelectedLanguage === language}\n                    >\n                      ${getLanguageName(language)}\n                    </option>\n                  `,\n                )}\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'settings-menu': SettingsMenu;\n  }\n}\n"]}

package/dist/constants.d.ts

@@ -0,0 +1,3 @@
+import { Corti } from '@corti/sdk';
+export declare const LANGUAGES_SUPPORTED: Corti.TranscribeSupportedLanguage[];
+export declare const DEFAULT_DICTATION_CONFIG: Corti.TranscribeConfig;

package/dist/constants.js

@@ -0,0 +1,16 @@
+export const LANGUAGES_SUPPORTED = [
+    'en',
+    'en-GB',
+    'da',
+    'de',
+    'fr',
+    'sv',
+    'nl',
+    'no',
+];
+export const DEFAULT_DICTATION_CONFIG = {
+    primaryLanguage: 'en',
+    spokenPunctuation: true,
+    automaticPunctuation: true,
+};
+//# sourceMappingURL=constants.js.map

package/dist/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,mBAAmB,GAAwC;IACtE,IAAI;IACJ,OAAO;IACP,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;CACL,CAAC;AACF,MAAM,CAAC,MAAM,wBAAwB,GAA2B;IAC9D,eAAe,EAAE,IAAI;IACrB,iBAAiB,EAAE,IAAI;IACvB,oBAAoB,EAAE,IAAI;CAC3B,CAAC","sourcesContent":["import { Corti } from '@corti/sdk';\n\nexport const LANGUAGES_SUPPORTED: Corti.TranscribeSupportedLanguage[] = [\n  'en',\n  'en-GB',\n  'da',\n  'de',\n  'fr',\n  'sv',\n  'nl',\n  'no',\n];\nexport const DEFAULT_DICTATION_CONFIG: Corti.TranscribeConfig = {\n  primaryLanguage: 'en',\n  spokenPunctuation: true,\n  automaticPunctuation: true,\n};\n"]}

package/dist/icons/icons.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+export declare class IconMicOn extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+}
+export declare class IconMicOff extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+}
+export declare class IconRecording extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+}
+export declare class IconSettings extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+}
+export declare class IconLoadingSpinner extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/icons/icons.js

@@ -0,0 +1,158 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/* eslint-disable max-classes-per-file */
+import { LitElement, css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+let IconMicOn = class IconMicOn extends LitElement {
+    render() {
+        return html `
+      <div style="display: flex">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="lucide lucide-mic"
+        >
+          <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
+          <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+          <line x1="12" x2="12" y1="19" y2="22" />
+        </svg>
+      </div>
+    `;
+    }
+};
+IconMicOn = __decorate([
+    customElement('icon-mic-on')
+], IconMicOn);
+export { IconMicOn };
+let IconMicOff = class IconMicOff extends LitElement {
+    render() {
+        return html ` <div style="display: flex">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="lucide lucide-mic-off"
+      >
+        <line x1="2" x2="22" y1="2" y2="22" />
+        <path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2" />
+        <path d="M5 10v2a7 7 0 0 0 12 5" />
+        <path d="M15 9.34V5a3 3 0 0 0-5.68-1.33" />
+        <path d="M9 9v3a3 3 0 0 0 5.12 2.12" />
+        <line x1="12" x2="12" y1="19" y2="22" />
+      </svg>
+    </div>`;
+    }
+};
+IconMicOff = __decorate([
+    customElement('icon-mic-off')
+], IconMicOff);
+export { IconMicOff };
+let IconRecording = class IconRecording extends LitElement {
+    render() {
+        return html `
+      <div style="display: flex;">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="lucide lucide-circle-stop"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <rect x="9" y="9" width="6" height="6" rx="1" fill="currentColor" />
+        </svg>
+      </div>
+    `;
+    }
+};
+IconRecording = __decorate([
+    customElement('icon-recording')
+], IconRecording);
+export { IconRecording };
+let IconSettings = class IconSettings extends LitElement {
+    render() {
+        return html `<div style="display: flex">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="lucide lucide-settings-2"
+      >
+        <path d="M20 7h-9" />
+        <path d="M14 17H5" />
+        <circle cx="17" cy="17" r="3" />
+        <circle cx="7" cy="7" r="3" />
+      </svg>
+    </div>`;
+    }
+};
+IconSettings = __decorate([
+    customElement('icon-settings')
+], IconSettings);
+export { IconSettings };
+let IconLoadingSpinner = class IconLoadingSpinner extends LitElement {
+    render() {
+        return html `<div style="display: flex">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="lucide lucide-loader-circle spin"
+      >
+        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+      </svg>
+    </div>`;
+    }
+};
+IconLoadingSpinner.styles = css `
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+    .spin {
+      animation: spin 1s linear infinite;
+    }
+  `;
+IconLoadingSpinner = __decorate([
+    customElement('icon-loading-spinner')
+], IconLoadingSpinner);
+export { IconLoadingSpinner };
+//# sourceMappingURL=icons.js.map

package/dist/icons/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../src/icons/icons.ts"],"names":[],"mappings":";;;;;;AAAA,yCAAyC;AACzC,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IACvC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;KAmBV,CAAC;IACJ,CAAC;CACF,CAAA;AAvBY,SAAS;IADrB,aAAa,CAAC,aAAa,CAAC;GAChB,SAAS,CAuBrB;;AAGM,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IACxC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;WAoBJ,CAAC;IACV,CAAC;CACF,CAAA;AAxBY,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAwBtB;;AAGM,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAC3C,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;KAkBV,CAAC;IACJ,CAAC;CACF,CAAA;AAtBY,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAsBzB;;AAEM,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAC1C,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;WAkBJ,CAAC;IACV,CAAC;CACF,CAAA;AAtBY,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAsBxB;;AAGM,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAehD,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;WAeJ,CAAC;IACV,CAAC;;AA/BM,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;GAYlB,AAZY,CAYX;AAbS,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAiC9B","sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement, css, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('icon-mic-on')\nexport class IconMicOn extends LitElement {\n  render() {\n    return html`\n      <div style=\"display: flex\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"20\"\n          height=\"20\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          class=\"lucide lucide-mic\"\n        >\n          <path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z\" />\n          <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\" />\n          <line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\" />\n        </svg>\n      </div>\n    `;\n  }\n}\n\n@customElement('icon-mic-off')\nexport class IconMicOff extends LitElement {\n  render() {\n    return html` <div style=\"display: flex\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"lucide lucide-mic-off\"\n      >\n        <line x1=\"2\" x2=\"22\" y1=\"2\" y2=\"22\" />\n        <path d=\"M18.89 13.23A7.12 7.12 0 0 0 19 12v-2\" />\n        <path d=\"M5 10v2a7 7 0 0 0 12 5\" />\n        <path d=\"M15 9.34V5a3 3 0 0 0-5.68-1.33\" />\n        <path d=\"M9 9v3a3 3 0 0 0 5.12 2.12\" />\n        <line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\" />\n      </svg>\n    </div>`;\n  }\n}\n\n@customElement('icon-recording')\nexport class IconRecording extends LitElement {\n  render() {\n    return html`\n      <div style=\"display: flex;\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"20\"\n          height=\"20\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          class=\"lucide lucide-circle-stop\"\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <rect x=\"9\" y=\"9\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n        </svg>\n      </div>\n    `;\n  }\n}\n@customElement('icon-settings')\nexport class IconSettings extends LitElement {\n  render() {\n    return html`<div style=\"display: flex\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"lucide lucide-settings-2\"\n      >\n        <path d=\"M20 7h-9\" />\n        <path d=\"M14 17H5\" />\n        <circle cx=\"17\" cy=\"17\" r=\"3\" />\n        <circle cx=\"7\" cy=\"7\" r=\"3\" />\n      </svg>\n    </div>`;\n  }\n}\n\n@customElement('icon-loading-spinner')\nexport class IconLoadingSpinner extends LitElement {\n  static styles = css`\n    @keyframes spin {\n      0% {\n        transform: rotate(0deg);\n      }\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n    .spin {\n      animation: spin 1s linear infinite;\n    }\n  `;\n\n  render() {\n    return html`<div style=\"display: flex\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"lucide lucide-loader-circle spin\"\n      >\n        <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" />\n      </svg>\n    </div>`;\n  }\n}\n"]}

package/dist/icons/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/icons/index.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.js.map

package/dist/icons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/icons/index.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import CortiDictation from './CortiDictation.js';
+export default CortiDictation;

package/dist/index.js

@@ -0,0 +1,6 @@
+import CortiDictation from './CortiDictation.js';
+if (!customElements.get('corti-dictation')) {
+    customElements.define('corti-dictation', CortiDictation);
+}
+export default CortiDictation;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,qBAAqB,CAAC;AAEjD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE,CAAC;IAC3C,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC;AAC3D,CAAC;AAED,eAAe,cAAc,CAAC","sourcesContent":["import CortiDictation from './CortiDictation.js';\n\nif (!customElements.get('corti-dictation')) {\n  customElements.define('corti-dictation', CortiDictation);\n}\n\nexport default CortiDictation;\n"]}

package/dist/styles/ComponentStyles.d.ts

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

package/dist/styles/ComponentStyles.js

@@ -0,0 +1,53 @@
+import { css } from 'lit';
+const ComponentStyles = css `
+  .wrapper {
+    background-color: var(--card-background);
+    border: 1px solid var(--card-border-color);
+    border-radius: var(--card-border-radius);
+    box-shadow: var(--card-box-shadow);
+    padding: var(--card-padding);
+    display: flex;
+    width: min-content;
+    gap: 4px;
+    height: 46px;
+    width: 98px;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+  h2 {
+    margin: 0 0 10px;
+    font-size: 1rem;
+    font-weight: 500;
+  }
+  label {
+    font-size: 0.9rem;
+    margin-right: 8px;
+  }
+  select {
+    padding: 4px 6px;
+    font-size: 0.9rem;
+    border: 1px solid var(--card-border-color);
+    border-radius: 4px;
+    background-color: var(--card-background);
+    color: inherit;
+  }
+
+  .visualiser {
+    width: 16px;
+    height: 100%;
+    background: var(--visualiser-background);
+    margin-top: 8px;
+    border-radius: 5px;
+    overflow: hidden;
+    display: flex;
+    align-items: flex-end;
+  }
+  .level {
+    height: 100%;
+    width: 100%;
+    background: var(--visualiser-level-color);
+    transition: width 0.1s ease-in-out;
+  }
+`;
+export default ComponentStyles;
+//# sourceMappingURL=ComponentStyles.js.map

package/dist/styles/ComponentStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentStyles.js","sourceRoot":"","sources":["../../src/styles/ComponentStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiD1B,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst ComponentStyles = css`\n  .wrapper {\n    background-color: var(--card-background);\n    border: 1px solid var(--card-border-color);\n    border-radius: var(--card-border-radius);\n    box-shadow: var(--card-box-shadow);\n    padding: var(--card-padding);\n    display: flex;\n    width: min-content;\n    gap: 4px;\n    height: 46px;\n    width: 98px;\n    box-sizing: border-box;\n    overflow: hidden;\n  }\n  h2 {\n    margin: 0 0 10px;\n    font-size: 1rem;\n    font-weight: 500;\n  }\n  label {\n    font-size: 0.9rem;\n    margin-right: 8px;\n  }\n  select {\n    padding: 4px 6px;\n    font-size: 0.9rem;\n    border: 1px solid var(--card-border-color);\n    border-radius: 4px;\n    background-color: var(--card-background);\n    color: inherit;\n  }\n\n  .visualiser {\n    width: 16px;\n    height: 100%;\n    background: var(--visualiser-background);\n    margin-top: 8px;\n    border-radius: 5px;\n    overflow: hidden;\n    display: flex;\n    align-items: flex-end;\n  }\n  .level {\n    height: 100%;\n    width: 100%;\n    background: var(--visualiser-level-color);\n    transition: width 0.1s ease-in-out;\n  }\n`;\n\nexport default ComponentStyles;\n"]}

package/dist/styles/buttons.d.ts

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