@corti/dictation-web 0.1.10 → 0.1.12

package/dist/bundle.js

@@ -1007,8 +1007,7 @@ var DEFAULT_DICTATION_CONFIG = {
   primaryLanguage: "en",
   interimResults: true,
   spokenPunctuation: true,
-  automaticPunctuation: true,
-  model: "others"
+  automaticPunctuation: true
 };
 
 // dist/styles/callout.js
@@ -1419,7 +1418,7 @@ var ThemeStyles = i`
   :host {
     color-scheme: light dark;
     /* Component Defaults */
-    --component-font-family: 'Segoe UI', Roboto, sans-serif;
+    --component-font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
     --component-text-color: light-dark(#333, #eee);
 
     /* Card Defaults */

package/dist/components/settings-menu.js

@@ -47,103 +47,103 @@ let SettingsMenu = class SettingsMenu extends LitElement {
         }));
     }
     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">
+        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>
+            ? 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"
+            : ''}
+            <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 === device}
-                    >
-                      ${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"
+        }}
+                ?disabled=${this.settingsDisabled}
+              >
+                ${this._devices.map(device => html `
+                    <option
+                      value=${device.deviceId}
+                      ?selected=${this.selectedDevice === device}
+                    >
+                      ${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._selectDevice(e.target.value);
-        }}
-                ?disabled=${this.settingsDisabled}
-              >
-                ${LANGUAGES_SUPPORTED.map(language => html `
-                    <option
-                      value=${language}
-                      ?selected=${this.selectedLanguage === language}
-                    >
-                      ${getLanguageName(language)}
-                    </option>
-                  `)}
-              </select>
-            </div>
-          </div>
-        </div>
-      </div>
+        }}
+                ?disabled=${this.settingsDisabled}
+              >
+                ${LANGUAGES_SUPPORTED.map(language => html `
+                    <option
+                      value=${language}
+                      ?selected=${this.selectedLanguage === 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;
-      }
+    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,

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

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

package/dist/constants.js

@@ -4,6 +4,5 @@ export const DEFAULT_DICTATION_CONFIG = {
     interimResults: true,
     spokenPunctuation: true,
     automaticPunctuation: true,
-    model: 'others',
 };
 //# sourceMappingURL=constants.js.map

package/dist/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AAChD,MAAM,CAAC,MAAM,wBAAwB,GAAoB;IACvD,eAAe,EAAE,IAAI;IACrB,cAAc,EAAE,IAAI;IACpB,iBAAiB,EAAE,IAAI;IACvB,oBAAoB,EAAE,IAAI;IAC1B,KAAK,EAAE,QAAQ;CAChB,CAAC","sourcesContent":["import { DictationConfig } from './types.js';\n\nexport const LANGUAGES_SUPPORTED = ['en', 'da'];\nexport const DEFAULT_DICTATION_CONFIG: DictationConfig = {\n  primaryLanguage: 'en',\n  interimResults: true,\n  spokenPunctuation: true,\n  automaticPunctuation: true,\n  model: 'others',\n};\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AAChD,MAAM,CAAC,MAAM,wBAAwB,GAAoB;IACvD,eAAe,EAAE,IAAI;IACrB,cAAc,EAAE,IAAI;IACpB,iBAAiB,EAAE,IAAI;IACvB,oBAAoB,EAAE,IAAI;CAC3B,CAAC","sourcesContent":["import { DictationConfig } from './types.js';\r\n\r\nexport const LANGUAGES_SUPPORTED = ['en', 'da'];\r\nexport const DEFAULT_DICTATION_CONFIG: DictationConfig = {\r\n  primaryLanguage: 'en',\r\n  interimResults: true,\r\n  spokenPunctuation: true,\r\n  automaticPunctuation: true,\r\n};\r\n"]}

package/dist/styles/theme.js

@@ -1,53 +1,53 @@
 import { css } from 'lit';
-const ThemeStyles = css `
-  :host {
-    color-scheme: light dark;
-    /* Component Defaults */
-    --component-font-family: 'Segoe UI', Roboto, sans-serif;
-    --component-text-color: light-dark(#333, #eee);
-
-    /* Card Defaults */
-    --card-background: light-dark(#fff, #333);
-    --card-border-color: light-dark(#ddd, #555);
-    --card-padding: 4px;
-    --card-border-radius: 8px;
-    --card-inner-border-radius: 6px;
-    --card-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-
-    /* Actions Defaults */
-    --action-plain-border-color: light-dark(#ccc, #555);
-    --action-plain-background-hover: light-dark(#ddd, #444);
-
-    --action-accent-background: light-dark(#007bff, #0056b3);
-    --action-accent-background-hover: light-dark(#0056b3, #003d80);
-    --action-accent-text-color: #fff;
-
-    --action-red-background: light-dark(#dc3545, #bd2130);
-    --action-red-background-hover: light-dark(#bd2130, #a71c24);
-    --action-red-text-color: #fff;
-
-    /* Callout Defaults */
-    --callout-info-background: light-dark(#007bff33, #0056b333);
-    --callout-info-border: light-dark(#007bff99, #0056b399);
-    --callout-info-text: light-dark(#007bff, #0056b3);
-
-    --callout-error-background: light-dark(#dc354533, #bd213033);
-    --callout-error-border: light-dark(#dc354599, #bd213099);
-    --callout-error-text: light-dark(#dc3545, #bd2130);
-
-    --callout-warn-background: light-dark(#fd7e1433, #e06c1233);
-    --callout-warn-border: light-dark(#fd7e1499, #e06c1299);
-    --callout-warn-text: light-dark(#fd7e14, #e06c12);
-
-    /* Visualiser Defaults */
-    --visualiser-background: light-dark(#e0e0e0, #fff);
-  }
-
-  :host {
-    box-sizing: border-box;
-    font-family: var(--component-font-family);
-    color: var(--component-text-color);
-  }
+const ThemeStyles = css `
+  :host {
+    color-scheme: light dark;
+    /* Component Defaults */
+    --component-font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
+    --component-text-color: light-dark(#333, #eee);
+
+    /* Card Defaults */
+    --card-background: light-dark(#fff, #333);
+    --card-border-color: light-dark(#ddd, #555);
+    --card-padding: 4px;
+    --card-border-radius: 8px;
+    --card-inner-border-radius: 6px;
+    --card-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+
+    /* Actions Defaults */
+    --action-plain-border-color: light-dark(#ccc, #555);
+    --action-plain-background-hover: light-dark(#ddd, #444);
+
+    --action-accent-background: light-dark(#007bff, #0056b3);
+    --action-accent-background-hover: light-dark(#0056b3, #003d80);
+    --action-accent-text-color: #fff;
+
+    --action-red-background: light-dark(#dc3545, #bd2130);
+    --action-red-background-hover: light-dark(#bd2130, #a71c24);
+    --action-red-text-color: #fff;
+
+    /* Callout Defaults */
+    --callout-info-background: light-dark(#007bff33, #0056b333);
+    --callout-info-border: light-dark(#007bff99, #0056b399);
+    --callout-info-text: light-dark(#007bff, #0056b3);
+
+    --callout-error-background: light-dark(#dc354533, #bd213033);
+    --callout-error-border: light-dark(#dc354599, #bd213099);
+    --callout-error-text: light-dark(#dc3545, #bd2130);
+
+    --callout-warn-background: light-dark(#fd7e1433, #e06c1233);
+    --callout-warn-border: light-dark(#fd7e1499, #e06c1299);
+    --callout-warn-text: light-dark(#fd7e14, #e06c12);
+
+    /* Visualiser Defaults */
+    --visualiser-background: light-dark(#e0e0e0, #fff);
+  }
+
+  :host {
+    box-sizing: border-box;
+    font-family: var(--component-font-family);
+    color: var(--component-text-color);
+  }
 `;
 export default ThemeStyles;
 //# sourceMappingURL=theme.js.map

package/dist/styles/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/styles/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDtB,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst ThemeStyles = css`\n  :host {\n    color-scheme: light dark;\n    /* Component Defaults */\n    --component-font-family: 'Segoe UI', Roboto, sans-serif;\n    --component-text-color: light-dark(#333, #eee);\n\n    /* Card Defaults */\n    --card-background: light-dark(#fff, #333);\n    --card-border-color: light-dark(#ddd, #555);\n    --card-padding: 4px;\n    --card-border-radius: 8px;\n    --card-inner-border-radius: 6px;\n    --card-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n\n    /* Actions Defaults */\n    --action-plain-border-color: light-dark(#ccc, #555);\n    --action-plain-background-hover: light-dark(#ddd, #444);\n\n    --action-accent-background: light-dark(#007bff, #0056b3);\n    --action-accent-background-hover: light-dark(#0056b3, #003d80);\n    --action-accent-text-color: #fff;\n\n    --action-red-background: light-dark(#dc3545, #bd2130);\n    --action-red-background-hover: light-dark(#bd2130, #a71c24);\n    --action-red-text-color: #fff;\n\n    /* Callout Defaults */\n    --callout-info-background: light-dark(#007bff33, #0056b333);\n    --callout-info-border: light-dark(#007bff99, #0056b399);\n    --callout-info-text: light-dark(#007bff, #0056b3);\n\n    --callout-error-background: light-dark(#dc354533, #bd213033);\n    --callout-error-border: light-dark(#dc354599, #bd213099);\n    --callout-error-text: light-dark(#dc3545, #bd2130);\n\n    --callout-warn-background: light-dark(#fd7e1433, #e06c1233);\n    --callout-warn-border: light-dark(#fd7e1499, #e06c1299);\n    --callout-warn-text: light-dark(#fd7e14, #e06c12);\n\n    /* Visualiser Defaults */\n    --visualiser-background: light-dark(#e0e0e0, #fff);\n  }\n\n  :host {\n    box-sizing: border-box;\n    font-family: var(--component-font-family);\n    color: var(--component-text-color);\n  }\n`;\n\nexport default ThemeStyles;\n"]}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/styles/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDtB,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { css } from 'lit';\r\n\r\nconst ThemeStyles = css`\r\n  :host {\r\n    color-scheme: light dark;\r\n    /* Component Defaults */\r\n    --component-font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;\r\n    --component-text-color: light-dark(#333, #eee);\r\n\r\n    /* Card Defaults */\r\n    --card-background: light-dark(#fff, #333);\r\n    --card-border-color: light-dark(#ddd, #555);\r\n    --card-padding: 4px;\r\n    --card-border-radius: 8px;\r\n    --card-inner-border-radius: 6px;\r\n    --card-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\r\n\r\n    /* Actions Defaults */\r\n    --action-plain-border-color: light-dark(#ccc, #555);\r\n    --action-plain-background-hover: light-dark(#ddd, #444);\r\n\r\n    --action-accent-background: light-dark(#007bff, #0056b3);\r\n    --action-accent-background-hover: light-dark(#0056b3, #003d80);\r\n    --action-accent-text-color: #fff;\r\n\r\n    --action-red-background: light-dark(#dc3545, #bd2130);\r\n    --action-red-background-hover: light-dark(#bd2130, #a71c24);\r\n    --action-red-text-color: #fff;\r\n\r\n    /* Callout Defaults */\r\n    --callout-info-background: light-dark(#007bff33, #0056b333);\r\n    --callout-info-border: light-dark(#007bff99, #0056b399);\r\n    --callout-info-text: light-dark(#007bff, #0056b3);\r\n\r\n    --callout-error-background: light-dark(#dc354533, #bd213033);\r\n    --callout-error-border: light-dark(#dc354599, #bd213099);\r\n    --callout-error-text: light-dark(#dc3545, #bd2130);\r\n\r\n    --callout-warn-background: light-dark(#fd7e1433, #e06c1233);\r\n    --callout-warn-border: light-dark(#fd7e1499, #e06c1299);\r\n    --callout-warn-text: light-dark(#fd7e14, #e06c12);\r\n\r\n    /* Visualiser Defaults */\r\n    --visualiser-background: light-dark(#e0e0e0, #fff);\r\n  }\r\n\r\n  :host {\r\n    box-sizing: border-box;\r\n    font-family: var(--component-font-family);\r\n    color: var(--component-text-color);\r\n  }\r\n`;\r\n\r\nexport default ThemeStyles;\r\n"]}

package/dist/types.d.ts

@@ -14,7 +14,7 @@ export interface DictationConfig {
     interimResults: boolean;
     spokenPunctuation: boolean;
     automaticPunctuation: boolean;
-    model: string;
+    model?: string;
     commands?: Command[];
 }
 export type PartialDictationConfig = Partial<DictationConfig>;

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export type RecordingState =\n  | 'initializing'\n  | 'recording'\n  | 'stopping'\n  | 'stopped';\n\ninterface CommandVariable {\n  key: string;\n  type: 'enum' | 'string';\n  enum?: string[];\n}\n\nexport interface Command {\n  id: string;\n  phrases: string[];\n  variables?: CommandVariable[];\n}\n\nexport interface DictationConfig {\n  primaryLanguage: string;\n  interimResults: boolean;\n  spokenPunctuation: boolean;\n  automaticPunctuation: boolean;\n  model: string;\n  commands?: Command[];\n}\n\nexport type PartialDictationConfig = Partial<DictationConfig>;\n\nexport interface ServerConfig {\n  environment: string;\n  tenant: string;\n  accessToken: string;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export type RecordingState =\r\n  | 'initializing'\r\n  | 'recording'\r\n  | 'stopping'\r\n  | 'stopped';\r\n\r\ninterface CommandVariable {\r\n  key: string;\r\n  type: 'enum' | 'string';\r\n  enum?: string[];\r\n}\r\n\r\nexport interface Command {\r\n  id: string;\r\n  phrases: string[];\r\n  variables?: CommandVariable[];\r\n}\r\n\r\nexport interface DictationConfig {\r\n  primaryLanguage: string;\r\n  interimResults: boolean;\r\n  spokenPunctuation: boolean;\r\n  automaticPunctuation: boolean;\r\n  model?: string;\r\n  commands?: Command[];\r\n}\r\n\r\nexport type PartialDictationConfig = Partial<DictationConfig>;\r\n\r\nexport interface ServerConfig {\r\n  environment: string;\r\n  tenant: string;\r\n  accessToken: string;\r\n}\r\n"]}

package/package.json

@@ -1,117 +1,117 @@
-{
-  "name": "@corti/dictation-web",
-  "description": "Web component for Corti Dictation",
-  "author": "Corti ApS",
-  "version": "0.1.10",
-  "license": "MIT",
-  "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "exports": {
-    "import": "./dist/index.js",
-    "default": "./dist/bundle.js"
-  },
-  "jsdelivr": "./dist/bundle.js",
-  "files": [
-    "dist"
-  ],
-  "bugs": {
-    "url": "https://help.corti.app",
-    "email": "help@corti.ai"
-  },
-  "repository": "github:corticph/dictation-web-sdk",
-  "homepage": "https://help.corti.app/en/articles/10714657-introducing-the-corti-dictation-browser-sdk",
-  "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 && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"web-dev-server\"",
-    "prepublish": "tsc && npm run analyze -- --exclude dist",
-    "lint": "eslint --ext .ts,.tsx src --ignore-path .gitignore && prettier \"src/**/*.ts\" --check --ignore-path .gitignore",
-    "format": "eslint --ext .ts,.tsx src --fix --ignore-path .gitignore && prettier \"src/**/*.ts\" --write --ignore-path .gitignore",
-    "prepare": "husky && husky install",
-    "test": "tsc && wtr --coverage",
-    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
-    "storybook": "tsc && npm run analyze -- --exclude dist && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"storybook dev -p 8080\"",
-    "storybook:build": "tsc && npm run analyze -- --exclude dist && storybook build"
-  },
-  "dependencies": {
-    "lit": "^3.1.4"
-  },
-  "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.10.3",
-    "@open-wc/eslint-config": "^12.0.3",
-    "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-a11y": "^7.6.20",
-    "@storybook/addon-essentials": "^7.6.20",
-    "@storybook/addon-links": "^7.6.20",
-    "@storybook/web-components": "^7.6.20",
-    "@types/mocha": "^10.0.7",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
-    "@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",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-html": "^8.1.2",
-    "husky": "^8.0.0",
-    "lint-staged": "^15.2.7",
-    "prettier": "^3.3.2",
-    "sinon": "^19.0.2",
-    "storybook": "^7.6.20",
-    "tslib": "^2.6.3",
-    "typescript": "^5.5.3"
-  },
-  "customElements": "custom-elements.json",
-  "eslintConfig": {
-    "parser": "@typescript-eslint/parser",
-    "extends": [
-      "@open-wc",
-      "prettier"
-    ],
-    "plugins": [
-      "@typescript-eslint"
-    ],
-    "rules": {
-      "no-unused-vars": "off",
-      "@typescript-eslint/no-unused-vars": [
-        "error"
-      ],
-      "import/no-unresolved": "off",
-      "import/extensions": [
-        "error",
-        "always",
-        {
-          "ignorePackages": true
-        }
-      ]
-    }
-  },
-  "prettier": {
-    "singleQuote": true,
-    "arrowParens": "avoid"
-  },
-  "lint-staged": {
-    "*.ts": [
-      "eslint --fix",
-      "prettier --write"
-    ]
-  }
-}
+{
+  "name": "@corti/dictation-web",
+  "description": "Web component for Corti Dictation",
+  "author": "Corti ApS",
+  "version": "0.1.12",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "exports": {
+    "import": "./dist/index.js",
+    "default": "./dist/bundle.js"
+  },
+  "jsdelivr": "./dist/bundle.js",
+  "files": [
+    "dist"
+  ],
+  "bugs": {
+    "url": "https://help.corti.app",
+    "email": "help@corti.ai"
+  },
+  "repository": "github:corticph/dictation-web-sdk",
+  "homepage": "https://help.corti.app/en/articles/10714657-introducing-the-corti-dictation-browser-sdk",
+  "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 && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"web-dev-server\"",
+    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "lint": "eslint --ext .ts,.tsx src --ignore-path .gitignore && prettier \"src/**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.tsx src --fix --ignore-path .gitignore && prettier \"src/**/*.ts\" --write --ignore-path .gitignore",
+    "prepare": "husky && husky install",
+    "test": "tsc && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
+    "storybook": "tsc && npm run analyze -- --exclude dist && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"storybook dev -p 8080\"",
+    "storybook:build": "tsc && npm run analyze -- --exclude dist && storybook build"
+  },
+  "dependencies": {
+    "lit": "^3.1.4"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.3",
+    "@open-wc/eslint-config": "^12.0.3",
+    "@open-wc/testing": "^4.0.0",
+    "@storybook/addon-a11y": "^7.6.20",
+    "@storybook/addon-essentials": "^7.6.20",
+    "@storybook/addon-links": "^7.6.20",
+    "@storybook/web-components": "^7.6.20",
+    "@types/mocha": "^10.0.7",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "@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",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-html": "^8.1.2",
+    "husky": "^8.0.0",
+    "lint-staged": "^15.2.7",
+    "prettier": "^3.3.2",
+    "sinon": "^19.0.2",
+    "storybook": "^7.6.20",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3"
+  },
+  "customElements": "custom-elements.json",
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "@open-wc",
+      "prettier"
+    ],
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error"
+      ],
+      "import/no-unresolved": "off",
+      "import/extensions": [
+        "error",
+        "always",
+        {
+          "ignorePackages": true
+        }
+      ]
+    }
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  }
+}