@corti/dictation-web 0.3.0 → 0.4.0-rc.1

package/dist/stories/corti-dictation.stories.js

@@ -0,0 +1,129 @@
+import { action } from "@storybook/addon-actions";
+import { html } from "lit";
+import "../src/components/corti-dictation.js";
+export default {
+    argTypes: {
+        accessToken: {
+            control: "text",
+            description: "Access token for authentication (required to render)",
+        },
+    },
+    component: "corti-dictation",
+    title: "CortiDictation",
+};
+export const DefaultValues = ({ accessToken }) => {
+    return html `
+    <corti-dictation
+      .accessToken=${accessToken}
+      @languages-changed=${action("languages-changed")}
+      @recording-devices-changed=${action("recording-devices-changed")}
+      @stream-closed=${action("stream-closed")}
+      @usage=${action("usage")}
+      @transcript=${action("transcript")}
+      @command=${action("command")}
+      @ready=${action("ready")}
+      @audio-level-changed=${action("audio-level-changed")}
+      @recording-state-changed=${action("recording-state-changed")}
+      @network-activity=${action("network-activity")}
+      @error=${action("error")}
+    ></corti-dictation>
+  `;
+};
+export const OnlyLanguageSettings = ({ accessToken, }) => {
+    return html `
+    <corti-dictation
+      .accessToken=${accessToken}
+      settingsEnabled="language"
+      @languages-changed=${action("languages-changed")}
+      @recording-devices-changed=${action("recording-devices-changed")}
+      @stream-closed=${action("stream-closed")}
+      @usage=${action("usage")}
+      @transcript=${action("transcript")}
+      @command=${action("command")}
+      @ready=${action("ready")}
+      @audio-level-changed=${action("audio-level-changed")}
+      @recording-state-changed=${action("recording-state-changed")}
+      @network-activity=${action("network-activity")}
+      @error=${action("error")}
+    ></corti-dictation>
+  `;
+};
+export const OnlyDeviceSettings = ({ accessToken, }) => {
+    return html `
+    <corti-dictation
+      .accessToken=${accessToken}
+      .settingsEnabled=${["device"]}
+      @languages-changed=${action("languages-changed")}
+      @recording-devices-changed=${action("recording-devices-changed")}
+      @stream-closed=${action("stream-closed")}
+      @usage=${action("usage")}
+      @transcript=${action("transcript")}
+      @command=${action("command")}
+      @ready=${action("ready")}
+      @audio-level-changed=${action("audio-level-changed")}
+      @recording-state-changed=${action("recording-state-changed")}
+      @network-activity=${action("network-activity")}
+      @error=${action("error")}
+    ></corti-dictation>
+  `;
+};
+export const NoSettings = ({ accessToken }) => {
+    return html `
+    <corti-dictation
+      .accessToken=${accessToken}
+      .settingsEnabled=${[]}
+      @languages-changed=${action("languages-changed")}
+      @recording-devices-changed=${action("recording-devices-changed")}
+      @stream-closed=${action("stream-closed")}
+      @usage=${action("usage")}
+      @transcript=${action("transcript")}
+      @command=${action("command")}
+      @ready=${action("ready")}
+      @audio-level-changed=${action("audio-level-changed")}
+      @recording-state-changed=${action("recording-state-changed")}
+      @network-activity=${action("network-activity")}
+      @error=${action("error")}
+    ></corti-dictation>
+  `;
+};
+export const WithCustomLanguages = ({ accessToken, }) => {
+    return html `
+    <corti-dictation
+      .accessToken=${accessToken}
+      .languagesSupported=${["en", "es", "fr", "de"]}
+      settingsEnabled="language"
+      @languages-changed=${action("languages-changed")}
+      @recording-devices-changed=${action("recording-devices-changed")}
+      @stream-closed=${action("stream-closed")}
+      @usage=${action("usage")}
+      @transcript=${action("transcript")}
+      @command=${action("command")}
+      @ready=${action("ready")}
+      @audio-level-changed=${action("audio-level-changed")}
+      @recording-state-changed=${action("recording-state-changed")}
+      @network-activity=${action("network-activity")}
+      @error=${action("error")}
+    ></corti-dictation>
+  `;
+};
+export const WithLanguagesAttribute = ({ accessToken, }) => {
+    return html `
+    <corti-dictation
+      .accessToken=${accessToken}
+      languagesSupported="en,da,es,fr"
+      settingsEnabled="language"
+      @languages-changed=${action("languages-changed")}
+      @recording-devices-changed=${action("recording-devices-changed")}
+      @stream-closed=${action("stream-closed")}
+      @usage=${action("usage")}
+      @transcript=${action("transcript")}
+      @command=${action("command")}
+      @ready=${action("ready")}
+      @audio-level-changed=${action("audio-level-changed")}
+      @recording-state-changed=${action("recording-state-changed")}
+      @network-activity=${action("network-activity")}
+      @error=${action("error")}
+    ></corti-dictation>
+  `;
+};
+//# sourceMappingURL=corti-dictation.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"corti-dictation.stories.js","sourceRoot":"","sources":["../../stories/corti-dictation.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\";\nimport { html, type TemplateResult } from \"lit\";\n\nimport \"../src/components/corti-dictation.js\";\n\nexport default {\n  argTypes: {\n    accessToken: {\n      control: \"text\",\n      description: \"Access token for authentication (required to render)\",\n    },\n  },\n  component: \"corti-dictation\",\n  title: \"CortiDictation\",\n};\n\ninterface Story<T> {\n  (args: T): TemplateResult;\n  args?: Partial<T>;\n  argTypes?: Record<string, unknown>;\n}\n\ninterface StoryArgs {\n  accessToken?: string;\n}\n\nexport const DefaultValues: Story<StoryArgs> = ({ accessToken }: StoryArgs) => {\n  return html`\n    <corti-dictation\n      .accessToken=${accessToken}\n      @languages-changed=${action(\"languages-changed\")}\n      @recording-devices-changed=${action(\"recording-devices-changed\")}\n      @stream-closed=${action(\"stream-closed\")}\n      @usage=${action(\"usage\")}\n      @transcript=${action(\"transcript\")}\n      @command=${action(\"command\")}\n      @ready=${action(\"ready\")}\n      @audio-level-changed=${action(\"audio-level-changed\")}\n      @recording-state-changed=${action(\"recording-state-changed\")}\n      @network-activity=${action(\"network-activity\")}\n      @error=${action(\"error\")}\n    ></corti-dictation>\n  `;\n};\n\nexport const OnlyLanguageSettings: Story<StoryArgs> = ({\n  accessToken,\n}: StoryArgs) => {\n  return html`\n    <corti-dictation\n      .accessToken=${accessToken}\n      settingsEnabled=\"language\"\n      @languages-changed=${action(\"languages-changed\")}\n      @recording-devices-changed=${action(\"recording-devices-changed\")}\n      @stream-closed=${action(\"stream-closed\")}\n      @usage=${action(\"usage\")}\n      @transcript=${action(\"transcript\")}\n      @command=${action(\"command\")}\n      @ready=${action(\"ready\")}\n      @audio-level-changed=${action(\"audio-level-changed\")}\n      @recording-state-changed=${action(\"recording-state-changed\")}\n      @network-activity=${action(\"network-activity\")}\n      @error=${action(\"error\")}\n    ></corti-dictation>\n  `;\n};\n\nexport const OnlyDeviceSettings: Story<StoryArgs> = ({\n  accessToken,\n}: StoryArgs) => {\n  return html`\n    <corti-dictation\n      .accessToken=${accessToken}\n      .settingsEnabled=${[\"device\"]}\n      @languages-changed=${action(\"languages-changed\")}\n      @recording-devices-changed=${action(\"recording-devices-changed\")}\n      @stream-closed=${action(\"stream-closed\")}\n      @usage=${action(\"usage\")}\n      @transcript=${action(\"transcript\")}\n      @command=${action(\"command\")}\n      @ready=${action(\"ready\")}\n      @audio-level-changed=${action(\"audio-level-changed\")}\n      @recording-state-changed=${action(\"recording-state-changed\")}\n      @network-activity=${action(\"network-activity\")}\n      @error=${action(\"error\")}\n    ></corti-dictation>\n  `;\n};\n\nexport const NoSettings: Story<StoryArgs> = ({ accessToken }: StoryArgs) => {\n  return html`\n    <corti-dictation\n      .accessToken=${accessToken}\n      .settingsEnabled=${[]}\n      @languages-changed=${action(\"languages-changed\")}\n      @recording-devices-changed=${action(\"recording-devices-changed\")}\n      @stream-closed=${action(\"stream-closed\")}\n      @usage=${action(\"usage\")}\n      @transcript=${action(\"transcript\")}\n      @command=${action(\"command\")}\n      @ready=${action(\"ready\")}\n      @audio-level-changed=${action(\"audio-level-changed\")}\n      @recording-state-changed=${action(\"recording-state-changed\")}\n      @network-activity=${action(\"network-activity\")}\n      @error=${action(\"error\")}\n    ></corti-dictation>\n  `;\n};\n\nexport const WithCustomLanguages: Story<StoryArgs> = ({\n  accessToken,\n}: StoryArgs) => {\n  return html`\n    <corti-dictation\n      .accessToken=${accessToken}\n      .languagesSupported=${[\"en\", \"es\", \"fr\", \"de\"]}\n      settingsEnabled=\"language\"\n      @languages-changed=${action(\"languages-changed\")}\n      @recording-devices-changed=${action(\"recording-devices-changed\")}\n      @stream-closed=${action(\"stream-closed\")}\n      @usage=${action(\"usage\")}\n      @transcript=${action(\"transcript\")}\n      @command=${action(\"command\")}\n      @ready=${action(\"ready\")}\n      @audio-level-changed=${action(\"audio-level-changed\")}\n      @recording-state-changed=${action(\"recording-state-changed\")}\n      @network-activity=${action(\"network-activity\")}\n      @error=${action(\"error\")}\n    ></corti-dictation>\n  `;\n};\n\nexport const WithLanguagesAttribute: Story<StoryArgs> = ({\n  accessToken,\n}: StoryArgs) => {\n  return html`\n    <corti-dictation\n      .accessToken=${accessToken}\n      languagesSupported=\"en,da,es,fr\"\n      settingsEnabled=\"language\"\n      @languages-changed=${action(\"languages-changed\")}\n      @recording-devices-changed=${action(\"recording-devices-changed\")}\n      @stream-closed=${action(\"stream-closed\")}\n      @usage=${action(\"usage\")}\n      @transcript=${action(\"transcript\")}\n      @command=${action(\"command\")}\n      @ready=${action(\"ready\")}\n      @audio-level-changed=${action(\"audio-level-changed\")}\n      @recording-state-changed=${action(\"recording-state-changed\")}\n      @network-activity=${action(\"network-activity\")}\n      @error=${action(\"error\")}\n    ></corti-dictation>\n  `;\n};\n"]}

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

@@ -0,0 +1,18 @@
+import { type TemplateResult } from "lit";
+import "../src/components/device-selector.js";
+import "../src/contexts/dictation-context.js";
+declare const _default: {
+    component: string;
+    title: string;
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+type StoryArgs = Record<string, never>;
+export declare const DefaultValues: Story<StoryArgs>;
+export declare const WithSelectedDevice: Story<StoryArgs>;
+export declare const WithCustomDevices: Story<StoryArgs>;
+export declare const Disabled: Story<StoryArgs>;

package/dist/stories/device-selector.stories.js

@@ -0,0 +1,84 @@
+import { action } from "@storybook/addon-actions";
+import { html } from "lit";
+import "../src/components/device-selector.js";
+import "../src/contexts/dictation-context.js";
+export default {
+    component: "device-selector",
+    title: "DeviceSelector",
+};
+export const DefaultValues = () => {
+    return html `
+    <dictation-context-provider ?noWrapper=${true}>
+      <device-selector
+        @recording-devices-changed=${action("recording-devices-changed")}
+        @ready=${action("ready")}
+        @error=${action("error")}
+      ></device-selector>
+    </dictation-context-provider>
+  `;
+};
+export const WithSelectedDevice = () => {
+    const mockDevice = {
+        deviceId: "mock-device-1",
+        groupId: "group1",
+        kind: "audioinput",
+        label: "Mock Microphone",
+        toJSON: () => ({}),
+    };
+    return html `
+    <dictation-context-provider .selectedDevice=${mockDevice} ?noWrapper=${true}>
+      <device-selector
+        @recording-devices-changed=${action("recording-devices-changed")}
+        @ready=${action("ready")}
+        @error=${action("error")}
+      ></device-selector>
+    </dictation-context-provider>
+  `;
+};
+export const WithCustomDevices = () => {
+    const customDevices = [
+        {
+            deviceId: "device1",
+            groupId: "group1",
+            kind: "audioinput",
+            label: "Custom Microphone 1",
+            toJSON: () => ({}),
+        },
+        {
+            deviceId: "device2",
+            groupId: "group1",
+            kind: "audioinput",
+            label: "Custom Microphone 2",
+            toJSON: () => ({}),
+        },
+        {
+            deviceId: "device3",
+            groupId: "group1",
+            kind: "audioinput",
+            label: "Custom Microphone 3",
+            toJSON: () => ({}),
+        },
+    ];
+    return html `
+    <dictation-context-provider .devices=${customDevices} ?noWrapper=${true}>
+      <device-selector
+        @recording-devices-changed=${action("recording-devices-changed")}
+        @ready=${action("ready")}
+        @error=${action("error")}
+      ></device-selector>
+    </dictation-context-provider>
+  `;
+};
+export const Disabled = () => {
+    return html `
+    <dictation-context-provider ?noWrapper=${true}>
+      <device-selector
+        disabled
+        @recording-devices-changed=${action("recording-devices-changed")}
+        @ready=${action("ready")}
+        @error=${action("error")}
+      ></device-selector>
+    </dictation-context-provider>
+  `;
+};
+//# sourceMappingURL=device-selector.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"device-selector.stories.js","sourceRoot":"","sources":["../../stories/device-selector.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAChD,OAAO,sCAAsC,CAAC;AAC9C,OAAO,sCAAsC,CAAC;AAE9C,eAAe;IACb,SAAS,EAAE,iBAAiB;IAC5B,KAAK,EAAE,gBAAgB;CACxB,CAAC;AAUF,MAAM,CAAC,MAAM,aAAa,GAAqB,GAAG,EAAE;IAClD,OAAO,IAAI,CAAA;6CACgC,IAAI;;qCAEZ,MAAM,CAAC,2BAA2B,CAAC;iBACvD,MAAM,CAAC,OAAO,CAAC;iBACf,MAAM,CAAC,OAAO,CAAC;;;GAG7B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAqB,GAAG,EAAE;IACvD,MAAM,UAAU,GAAoB;QAClC,QAAQ,EAAE,eAAe;QACzB,OAAO,EAAE,QAAQ;QACjB,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,iBAAiB;QACxB,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC;KACnB,CAAC;IAEF,OAAO,IAAI,CAAA;kDACqC,UAAU,eAAe,IAAI;;qCAE1C,MAAM,CAAC,2BAA2B,CAAC;iBACvD,MAAM,CAAC,OAAO,CAAC;iBACf,MAAM,CAAC,OAAO,CAAC;;;GAG7B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAqB,GAAG,EAAE;IACtD,MAAM,aAAa,GAAsB;QACvC;YACE,QAAQ,EAAE,SAAS;YACnB,OAAO,EAAE,QAAQ;YACjB,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,qBAAqB;YAC5B,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC;SACnB;QACD;YACE,QAAQ,EAAE,SAAS;YACnB,OAAO,EAAE,QAAQ;YACjB,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,qBAAqB;YAC5B,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC;SACnB;QACD;YACE,QAAQ,EAAE,SAAS;YACnB,OAAO,EAAE,QAAQ;YACjB,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,qBAAqB;YAC5B,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC;SACnB;KACF,CAAC;IAEF,OAAO,IAAI,CAAA;2CAC8B,aAAa,eAAe,IAAI;;qCAEtC,MAAM,CAAC,2BAA2B,CAAC;iBACvD,MAAM,CAAC,OAAO,CAAC;iBACf,MAAM,CAAC,OAAO,CAAC;;;GAG7B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAqB,GAAG,EAAE;IAC7C,OAAO,IAAI,CAAA;6CACgC,IAAI;;;qCAGZ,MAAM,CAAC,2BAA2B,CAAC;iBACvD,MAAM,CAAC,OAAO,CAAC;iBACf,MAAM,CAAC,OAAO,CAAC;;;GAG7B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { action } from \"@storybook/addon-actions\";\nimport { html, type TemplateResult } from \"lit\";\nimport \"../src/components/device-selector.js\";\nimport \"../src/contexts/dictation-context.js\";\n\nexport default {\n  component: \"device-selector\",\n  title: \"DeviceSelector\",\n};\n\ninterface Story<T> {\n  (args: T): TemplateResult;\n  args?: Partial<T>;\n  argTypes?: Record<string, unknown>;\n}\n\ntype StoryArgs = Record<string, never>;\n\nexport const DefaultValues: Story<StoryArgs> = () => {\n  return html`\n    <dictation-context-provider ?noWrapper=${true}>\n      <device-selector\n        @recording-devices-changed=${action(\"recording-devices-changed\")}\n        @ready=${action(\"ready\")}\n        @error=${action(\"error\")}\n      ></device-selector>\n    </dictation-context-provider>\n  `;\n};\n\nexport const WithSelectedDevice: Story<StoryArgs> = () => {\n  const mockDevice: MediaDeviceInfo = {\n    deviceId: \"mock-device-1\",\n    groupId: \"group1\",\n    kind: \"audioinput\",\n    label: \"Mock Microphone\",\n    toJSON: () => ({}),\n  };\n\n  return html`\n    <dictation-context-provider .selectedDevice=${mockDevice} ?noWrapper=${true}>\n      <device-selector\n        @recording-devices-changed=${action(\"recording-devices-changed\")}\n        @ready=${action(\"ready\")}\n        @error=${action(\"error\")}\n      ></device-selector>\n    </dictation-context-provider>\n  `;\n};\n\nexport const WithCustomDevices: Story<StoryArgs> = () => {\n  const customDevices: MediaDeviceInfo[] = [\n    {\n      deviceId: \"device1\",\n      groupId: \"group1\",\n      kind: \"audioinput\",\n      label: \"Custom Microphone 1\",\n      toJSON: () => ({}),\n    },\n    {\n      deviceId: \"device2\",\n      groupId: \"group1\",\n      kind: \"audioinput\",\n      label: \"Custom Microphone 2\",\n      toJSON: () => ({}),\n    },\n    {\n      deviceId: \"device3\",\n      groupId: \"group1\",\n      kind: \"audioinput\",\n      label: \"Custom Microphone 3\",\n      toJSON: () => ({}),\n    },\n  ];\n\n  return html`\n    <dictation-context-provider .devices=${customDevices} ?noWrapper=${true}>\n      <device-selector\n        @recording-devices-changed=${action(\"recording-devices-changed\")}\n        @ready=${action(\"ready\")}\n        @error=${action(\"error\")}\n      ></device-selector>\n    </dictation-context-provider>\n  `;\n};\n\nexport const Disabled: Story<StoryArgs> = () => {\n  return html`\n    <dictation-context-provider ?noWrapper=${true}>\n      <device-selector\n        disabled\n        @recording-devices-changed=${action(\"recording-devices-changed\")}\n        @ready=${action(\"ready\")}\n        @error=${action(\"error\")}\n      ></device-selector>\n    </dictation-context-provider>\n  `;\n};\n"]}

package/dist/stories/language-selector.stories.d.ts

@@ -0,0 +1,18 @@
+import { type TemplateResult } from "lit";
+import "../src/components/language-selector.js";
+import "../src/contexts/dictation-context.js";
+declare const _default: {
+    component: string;
+    title: string;
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+type StoryArgs = Record<string, never>;
+export declare const DefaultValues: Story<StoryArgs>;
+export declare const WithCustomLanguages: Story<StoryArgs>;
+export declare const WithLanguagesAttribute: Story<StoryArgs>;
+export declare const Disabled: Story<StoryArgs>;

package/dist/stories/language-selector.stories.js

@@ -0,0 +1,53 @@
+import { action } from "@storybook/addon-actions";
+import { html } from "lit";
+import "../src/components/language-selector.js";
+import "../src/contexts/dictation-context.js";
+export default {
+    component: "language-selector",
+    title: "LanguageSelector",
+};
+export const DefaultValues = () => {
+    return html `
+    <dictation-context-provider ?noWrapper=${true}>
+      <language-selector
+        @languages-changed=${action("languages-changed")}
+        @error=${action("error")}
+      ></language-selector>
+    </dictation-context-provider>
+  `;
+};
+export const WithCustomLanguages = () => {
+    return html `
+    <dictation-context-provider
+      .languages=${["en", "es", "fr", "de", "it"]}
+      ?noWrapper=${true}
+    >
+      <language-selector
+        @languages-changed=${action("languages-changed")}
+        @error=${action("error")}
+      ></language-selector>
+    </dictation-context-provider>
+  `;
+};
+export const WithLanguagesAttribute = () => {
+    return html `
+    <dictation-context-provider languages="en,da,es,fr" ?noWrapper=${true}>
+      <language-selector
+        @languages-changed=${action("languages-changed")}
+        @error=${action("error")}
+      ></language-selector>
+    </dictation-context-provider>
+  `;
+};
+export const Disabled = () => {
+    return html `
+    <dictation-context-provider ?noWrapper=${true}>
+      <language-selector
+        disabled
+        @languages-changed=${action("languages-changed")}
+        @error=${action("error")}
+      ></language-selector>
+    </dictation-context-provider>
+  `;
+};
+//# sourceMappingURL=language-selector.stories.js.map

package/dist/stories/language-selector.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"language-selector.stories.js","sourceRoot":"","sources":["../../stories/language-selector.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAEhD,OAAO,wCAAwC,CAAC;AAChD,OAAO,sCAAsC,CAAC;AAE9C,eAAe;IACb,SAAS,EAAE,mBAAmB;IAC9B,KAAK,EAAE,kBAAkB;CAC1B,CAAC;AAUF,MAAM,CAAC,MAAM,aAAa,GAAqB,GAAG,EAAE;IAClD,OAAO,IAAI,CAAA;6CACgC,IAAI;;6BAEpB,MAAM,CAAC,mBAAmB,CAAC;iBACvC,MAAM,CAAC,OAAO,CAAC;;;GAG7B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAqB,GAAG,EAAE;IACxD,OAAO,IAAI,CAAA;;mBAEM,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;mBAC9B,IAAI;;;6BAGM,MAAM,CAAC,mBAAmB,CAAC;iBACvC,MAAM,CAAC,OAAO,CAAC;;;GAG7B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAqB,GAAG,EAAE;IAC3D,OAAO,IAAI,CAAA;qEACwD,IAAI;;6BAE5C,MAAM,CAAC,mBAAmB,CAAC;iBACvC,MAAM,CAAC,OAAO,CAAC;;;GAG7B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAqB,GAAG,EAAE;IAC7C,OAAO,IAAI,CAAA;6CACgC,IAAI;;;6BAGpB,MAAM,CAAC,mBAAmB,CAAC;iBACvC,MAAM,CAAC,OAAO,CAAC;;;GAG7B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { action } from \"@storybook/addon-actions\";\nimport { html, type TemplateResult } from \"lit\";\n\nimport \"../src/components/language-selector.js\";\nimport \"../src/contexts/dictation-context.js\";\n\nexport default {\n  component: \"language-selector\",\n  title: \"LanguageSelector\",\n};\n\ninterface Story<T> {\n  (args: T): TemplateResult;\n  args?: Partial<T>;\n  argTypes?: Record<string, unknown>;\n}\n\ntype StoryArgs = Record<string, never>;\n\nexport const DefaultValues: Story<StoryArgs> = () => {\n  return html`\n    <dictation-context-provider ?noWrapper=${true}>\n      <language-selector\n        @languages-changed=${action(\"languages-changed\")}\n        @error=${action(\"error\")}\n      ></language-selector>\n    </dictation-context-provider>\n  `;\n};\n\nexport const WithCustomLanguages: Story<StoryArgs> = () => {\n  return html`\n    <dictation-context-provider\n      .languages=${[\"en\", \"es\", \"fr\", \"de\", \"it\"]}\n      ?noWrapper=${true}\n    >\n      <language-selector\n        @languages-changed=${action(\"languages-changed\")}\n        @error=${action(\"error\")}\n      ></language-selector>\n    </dictation-context-provider>\n  `;\n};\n\nexport const WithLanguagesAttribute: Story<StoryArgs> = () => {\n  return html`\n    <dictation-context-provider languages=\"en,da,es,fr\" ?noWrapper=${true}>\n      <language-selector\n        @languages-changed=${action(\"languages-changed\")}\n        @error=${action(\"error\")}\n      ></language-selector>\n    </dictation-context-provider>\n  `;\n};\n\nexport const Disabled: Story<StoryArgs> = () => {\n  return html`\n    <dictation-context-provider ?noWrapper=${true}>\n      <language-selector\n        disabled\n        @languages-changed=${action(\"languages-changed\")}\n        @error=${action(\"error\")}\n      ></language-selector>\n    </dictation-context-provider>\n  `;\n};\n"]}

package/dist/stories/recording-button.stories.d.ts

@@ -0,0 +1,27 @@
+import { type TemplateResult } from "lit";
+import "../src/components/recording-button.js";
+import "../src/contexts/dictation-context.js";
+declare const _default: {
+    argTypes: {
+        preventFocus: {
+            control: string;
+            description: string;
+        };
+    };
+    component: string;
+    title: string;
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface StoryArgs {
+    preventFocus?: boolean;
+}
+export declare const Stopped: Story<StoryArgs>;
+export declare const Recording: Story<StoryArgs>;
+export declare const Initializing: Story<StoryArgs>;
+export declare const Stopping: Story<StoryArgs>;
+export declare const PreventFocusDisabled: Story<StoryArgs>;

package/dist/stories/recording-button.stories.js

@@ -0,0 +1,90 @@
+import { action } from "@storybook/addon-actions";
+import { html } from "lit";
+import "../src/components/recording-button.js";
+import "../src/contexts/dictation-context.js";
+export default {
+    argTypes: {
+        preventFocus: {
+            control: "boolean",
+            description: "Prevent button from taking focus on click",
+        },
+    },
+    component: "recording-button",
+    title: "RecordingButton",
+};
+export const Stopped = ({ preventFocus }) => {
+    return html `
+    <dictation-context-provider ?noWrapper=${true}>
+      <recording-button
+        ?preventFocus=${preventFocus}
+        @recording-state-changed=${action("recording-state-changed")}
+        @network-activity=${action("network-activity")}
+        @error=${action("error")}
+      ></recording-button>
+    </dictation-context-provider>
+  `;
+};
+Stopped.args = {
+    preventFocus: true,
+};
+export const Recording = ({ preventFocus }) => {
+    return html `
+    <dictation-context-provider ?noWrapper=${true} recordingState="recording">
+      <recording-button
+        ?preventFocus=${preventFocus}
+        @recording-state-changed=${action("recording-state-changed")}
+        @network-activity=${action("network-activity")}
+        @error=${action("error")}
+      ></recording-button>
+    </dictation-context-provider>
+  `;
+};
+Recording.args = {
+    preventFocus: true,
+};
+export const Initializing = ({ preventFocus }) => {
+    return html `
+    <dictation-context-provider ?noWrapper=${true} recordingState="initializing">
+      <recording-button
+        ?preventFocus=${preventFocus}
+        @recording-state-changed=${action("recording-state-changed")}
+        @network-activity=${action("network-activity")}
+        @error=${action("error")}
+      ></recording-button>
+    </dictation-context-provider>
+  `;
+};
+Initializing.args = {
+    preventFocus: true,
+};
+export const Stopping = ({ preventFocus }) => {
+    return html `
+    <dictation-context-provider ?noWrapper=${true} recordingState="stopping">
+      <recording-button
+        ?preventFocus=${preventFocus}
+        @recording-state-changed=${action("recording-state-changed")}
+        @network-activity=${action("network-activity")}
+        @error=${action("error")}
+      ></recording-button>
+    </dictation-context-provider>
+  `;
+};
+Stopping.args = {
+    preventFocus: true,
+};
+export const PreventFocusDisabled = ({ preventFocus, }) => {
+    return html `
+    <dictation-context-provider ?noWrapper=${true}>
+      <recording-button
+        ?preventFocus=${preventFocus}
+        @recording-state-changed=${action("recording-state-changed")}
+        @network-activity=${action("network-activity")}
+        @error=${action("error")}
+      ></recording-button>
+    </dictation-context-provider>
+  `;
+};
+PreventFocusDisabled.args = {
+    preventFocus: false,
+};
+//# sourceMappingURL=recording-button.stories.js.map

package/dist/stories/recording-button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recording-button.stories.js","sourceRoot":"","sources":["../../stories/recording-button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAEhD,OAAO,uCAAuC,CAAC;AAC/C,OAAO,sCAAsC,CAAC;AAE9C,eAAe;IACb,QAAQ,EAAE;QACR,YAAY,EAAE;YACZ,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,2CAA2C;SACzD;KACF;IACD,SAAS,EAAE,kBAAkB;IAC7B,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAYF,MAAM,CAAC,MAAM,OAAO,GAAqB,CAAC,EAAE,YAAY,EAAa,EAAE,EAAE;IACvE,OAAO,IAAI,CAAA;6CACgC,IAAI;;wBAEzB,YAAY;mCACD,MAAM,CAAC,yBAAyB,CAAC;4BACxC,MAAM,CAAC,kBAAkB,CAAC;iBACrC,MAAM,CAAC,OAAO,CAAC;;;GAG7B,CAAC;AACJ,CAAC,CAAC;AACF,OAAO,CAAC,IAAI,GAAG;IACb,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAqB,CAAC,EAAE,YAAY,EAAa,EAAE,EAAE;IACzE,OAAO,IAAI,CAAA;6CACgC,IAAI;;wBAEzB,YAAY;mCACD,MAAM,CAAC,yBAAyB,CAAC;4BACxC,MAAM,CAAC,kBAAkB,CAAC;iBACrC,MAAM,CAAC,OAAO,CAAC;;;GAG7B,CAAC;AACJ,CAAC,CAAC;AACF,SAAS,CAAC,IAAI,GAAG;IACf,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAqB,CAAC,EAAE,YAAY,EAAa,EAAE,EAAE;IAC5E,OAAO,IAAI,CAAA;6CACgC,IAAI;;wBAEzB,YAAY;mCACD,MAAM,CAAC,yBAAyB,CAAC;4BACxC,MAAM,CAAC,kBAAkB,CAAC;iBACrC,MAAM,CAAC,OAAO,CAAC;;;GAG7B,CAAC;AACJ,CAAC,CAAC;AACF,YAAY,CAAC,IAAI,GAAG;IAClB,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAqB,CAAC,EAAE,YAAY,EAAa,EAAE,EAAE;IACxE,OAAO,IAAI,CAAA;6CACgC,IAAI;;wBAEzB,YAAY;mCACD,MAAM,CAAC,yBAAyB,CAAC;4BACxC,MAAM,CAAC,kBAAkB,CAAC;iBACrC,MAAM,CAAC,OAAO,CAAC;;;GAG7B,CAAC;AACJ,CAAC,CAAC;AACF,QAAQ,CAAC,IAAI,GAAG;IACd,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAqB,CAAC,EACrD,YAAY,GACF,EAAE,EAAE;IACd,OAAO,IAAI,CAAA;6CACgC,IAAI;;wBAEzB,YAAY;mCACD,MAAM,CAAC,yBAAyB,CAAC;4BACxC,MAAM,CAAC,kBAAkB,CAAC;iBACrC,MAAM,CAAC,OAAO,CAAC;;;GAG7B,CAAC;AACJ,CAAC,CAAC;AACF,oBAAoB,CAAC,IAAI,GAAG;IAC1B,YAAY,EAAE,KAAK;CACpB,CAAC","sourcesContent":["import { action } from \"@storybook/addon-actions\";\nimport { html, type TemplateResult } from \"lit\";\n\nimport \"../src/components/recording-button.js\";\nimport \"../src/contexts/dictation-context.js\";\n\nexport default {\n  argTypes: {\n    preventFocus: {\n      control: \"boolean\",\n      description: \"Prevent button from taking focus on click\",\n    },\n  },\n  component: \"recording-button\",\n  title: \"RecordingButton\",\n};\n\ninterface Story<T> {\n  (args: T): TemplateResult;\n  args?: Partial<T>;\n  argTypes?: Record<string, unknown>;\n}\n\ninterface StoryArgs {\n  preventFocus?: boolean;\n}\n\nexport const Stopped: Story<StoryArgs> = ({ preventFocus }: StoryArgs) => {\n  return html`\n    <dictation-context-provider ?noWrapper=${true}>\n      <recording-button\n        ?preventFocus=${preventFocus}\n        @recording-state-changed=${action(\"recording-state-changed\")}\n        @network-activity=${action(\"network-activity\")}\n        @error=${action(\"error\")}\n      ></recording-button>\n    </dictation-context-provider>\n  `;\n};\nStopped.args = {\n  preventFocus: true,\n};\n\nexport const Recording: Story<StoryArgs> = ({ preventFocus }: StoryArgs) => {\n  return html`\n    <dictation-context-provider ?noWrapper=${true} recordingState=\"recording\">\n      <recording-button\n        ?preventFocus=${preventFocus}\n        @recording-state-changed=${action(\"recording-state-changed\")}\n        @network-activity=${action(\"network-activity\")}\n        @error=${action(\"error\")}\n      ></recording-button>\n    </dictation-context-provider>\n  `;\n};\nRecording.args = {\n  preventFocus: true,\n};\n\nexport const Initializing: Story<StoryArgs> = ({ preventFocus }: StoryArgs) => {\n  return html`\n    <dictation-context-provider ?noWrapper=${true} recordingState=\"initializing\">\n      <recording-button\n        ?preventFocus=${preventFocus}\n        @recording-state-changed=${action(\"recording-state-changed\")}\n        @network-activity=${action(\"network-activity\")}\n        @error=${action(\"error\")}\n      ></recording-button>\n    </dictation-context-provider>\n  `;\n};\nInitializing.args = {\n  preventFocus: true,\n};\n\nexport const Stopping: Story<StoryArgs> = ({ preventFocus }: StoryArgs) => {\n  return html`\n    <dictation-context-provider ?noWrapper=${true} recordingState=\"stopping\">\n      <recording-button\n        ?preventFocus=${preventFocus}\n        @recording-state-changed=${action(\"recording-state-changed\")}\n        @network-activity=${action(\"network-activity\")}\n        @error=${action(\"error\")}\n      ></recording-button>\n    </dictation-context-provider>\n  `;\n};\nStopping.args = {\n  preventFocus: true,\n};\n\nexport const PreventFocusDisabled: Story<StoryArgs> = ({\n  preventFocus,\n}: StoryArgs) => {\n  return html`\n    <dictation-context-provider ?noWrapper=${true}>\n      <recording-button\n        ?preventFocus=${preventFocus}\n        @recording-state-changed=${action(\"recording-state-changed\")}\n        @network-activity=${action(\"network-activity\")}\n        @error=${action(\"error\")}\n      ></recording-button>\n    </dictation-context-provider>\n  `;\n};\nPreventFocusDisabled.args = {\n  preventFocus: false,\n};\n"]}

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

@@ -0,0 +1,23 @@
+import { type TemplateResult } from "lit";
+import "../src/components/settings-menu.js";
+import "../src/contexts/dictation-context.js";
+declare const _default: {
+    component: string;
+    title: string;
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+type StoryArgs = Record<string, never>;
+export declare const DefaultValues: Story<StoryArgs>;
+export declare const DisabledSettings: Story<StoryArgs>;
+export declare const OnlyDeviceSelector: Story<StoryArgs>;
+export declare const OnlyLanguageSelector: Story<StoryArgs>;
+export declare const NoSettings: Story<StoryArgs>;
+export declare const WithCustomLanguages: Story<StoryArgs>;
+export declare const WithLanguagesAttribute: Story<StoryArgs>;
+export declare const WithCustomDevices: Story<StoryArgs>;
+export declare const BothWithCustomOptions: Story<StoryArgs>;

package/dist/stories/settings-menu.stories.js

@@ -0,0 +1,156 @@
+import { action } from "@storybook/addon-actions";
+import { html } from "lit";
+import "../src/components/settings-menu.js";
+import "../src/contexts/dictation-context.js";
+export default {
+    component: "settings-menu",
+    title: "SettingsMenu",
+};
+export const DefaultValues = () => {
+    return html `
+    <dictation-context-provider>
+      <settings-menu
+        @languages-changed=${action("languages-changed")}
+        @recording-devices-changed=${action("recording-devices-changed")}
+        @ready=${action("ready")}
+        @error=${action("error")}
+      ></settings-menu>
+    </dictation-context-provider>
+  `;
+};
+export const DisabledSettings = () => {
+    return html `
+    <dictation-context-provider recordingState="recording">
+      <settings-menu
+        @languages-changed=${action("languages-changed")}
+        @recording-devices-changed=${action("recording-devices-changed")}
+        @ready=${action("ready")}
+        @error=${action("error")}
+      ></settings-menu>
+    </dictation-context-provider>
+  `;
+};
+export const OnlyDeviceSelector = () => {
+    return html `
+    <dictation-context-provider>
+      <settings-menu
+        settingsEnabled="device"
+        @languages-changed=${action("languages-changed")}
+        @recording-devices-changed=${action("recording-devices-changed")}
+        @ready=${action("ready")}
+        @error=${action("error")}
+      ></settings-menu>
+    </dictation-context-provider>
+  `;
+};
+export const OnlyLanguageSelector = () => {
+    return html `
+    <dictation-context-provider>
+      <settings-menu
+        .settingsEnabled=${["language"]}
+        @languages-changed=${action("languages-changed")}
+        @recording-devices-changed=${action("recording-devices-changed")}
+        @ready=${action("ready")}
+        @error=${action("error")}
+      ></settings-menu>
+    </dictation-context-provider>
+  `;
+};
+export const NoSettings = () => {
+    return html `
+    <dictation-context-provider>
+      <settings-menu
+        .settingsEnabled=${[]}
+        @languages-changed=${action("languages-changed")}
+        @recording-devices-changed=${action("recording-devices-changed")}
+        @ready=${action("ready")}
+        @error=${action("error")}
+      ></settings-menu>
+    </dictation-context-provider>
+  `;
+};
+export const WithCustomLanguages = () => {
+    return html `
+    <dictation-context-provider .languages=${["en", "es", "fr", "de", "it"]}>
+      <settings-menu
+        settingsEnabled="language"
+        @languages-changed=${action("languages-changed")}
+        @recording-devices-changed=${action("recording-devices-changed")}
+        @ready=${action("ready")}
+        @error=${action("error")}
+      ></settings-menu>
+    </dictation-context-provider>
+  `;
+};
+export const WithLanguagesAttribute = () => {
+    return html `
+    <dictation-context-provider languages="en,da,es,fr">
+      <settings-menu
+        settingsEnabled="language"
+        @languages-changed=${action("languages-changed")}
+        @recording-devices-changed=${action("recording-devices-changed")}
+        @ready=${action("ready")}
+        @error=${action("error")}
+      ></settings-menu>
+    </dictation-context-provider>
+  `;
+};
+export const WithCustomDevices = () => {
+    const customDevices = [
+        {
+            deviceId: "device1",
+            groupId: "group1",
+            kind: "audioinput",
+            label: "Built-in Microphone",
+            toJSON: () => ({}),
+        },
+        {
+            deviceId: "device2",
+            groupId: "group2",
+            kind: "audioinput",
+            label: "External USB Microphone",
+            toJSON: () => ({}),
+        },
+    ];
+    return html `
+    <dictation-context-provider .devices=${customDevices}>
+      <settings-menu
+        settingsEnabled="device"
+        @languages-changed=${action("languages-changed")}
+        @recording-devices-changed=${action("recording-devices-changed")}
+        @ready=${action("ready")}
+        @error=${action("error")}
+      ></settings-menu>
+    </dictation-context-provider>
+  `;
+};
+export const BothWithCustomOptions = () => {
+    const customDevices = [
+        {
+            deviceId: "device1",
+            groupId: "group1",
+            kind: "audioinput",
+            label: "Headset Microphone",
+            toJSON: () => ({}),
+        },
+        {
+            deviceId: "device2",
+            groupId: "group2",
+            kind: "audioinput",
+            label: "Desk Microphone",
+            toJSON: () => ({}),
+        },
+    ];
+    return html `
+    <dictation-context-provider languages="en,fr,de" .devices=${customDevices}>
+      <settings-menu
+        settingsEnabled="device,language"
+        @languages-changed=${action("languages-changed")}
+        @recording-devices-changed=${action("recording-devices-changed")}
+        @ready=${action("ready")}
+        @error=${action("error")}
+      ></settings-menu>
+    </dictation-context-provider>
+  `;
+};
+//# sourceMappingURL=settings-menu.stories.js.map