@fusion.dev/helix-core 0.222.0 → 0.223.0

package/dist/mixins/mixin-voice/mixin-voice.d.ts

@@ -20,6 +20,8 @@ export declare class VoiceElement {
     stopListening(): void;
     /** The dictation button and its status, behind a seam a tier can move. */
     protected renderVoice(): TemplateResult | typeof nothing;
+    /** What the dictation button draws: the microphone, or a level meter while listening. */
+    protected renderVoiceGlyph(): TemplateResult;
     /** The native field dictation types into. */
     protected voiceField(): HTMLInputElement | HTMLTextAreaElement | null;
     /** The type of the field dictation types into. Dictation listens only in `text`, `search`, `tel` and `url`. */

package/dist/mixins/mixin-voice/mixin-voice.js

@@ -1,7 +1,8 @@
 import { __decorate } from "tslib";
 import { microphone } from '@fusion.dev/helix-icons';
-import { html, nothing } from 'lit';
+import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { html } from 'lit/static-html.js';
 import { HelixBeforeListenEvent, HelixListenEvent } from '../../events/events.js';
 import { drawIcon } from '../../utils/draw-icon/draw-icon.js';
 import { pageSpeechEngine, } from '../../utils/speech/speech.js';
@@ -101,6 +102,10 @@ export const MixinVoice = (Base) => {
                         final: (text) => this.place(text, true),
                         level: (level) => {
                             this.style.setProperty('--dictation-level', level.toFixed(3));
+                            const meter = this.partNamed('voice-level');
+                            if (meter) {
+                                meter.level = level;
+                            }
                         },
                         partial: (text) => this.place(text, false),
                     },
@@ -170,6 +175,14 @@ export const MixinVoice = (Base) => {
                 this.dispatchEvent(new HelixListenEvent({ text }));
             }
         }
+        renderVoiceGlyph() {
+            const tier = this.constructor.tier;
+            if (this.heard && customElements.get(`${tier}voice-level`)) {
+                const meter = this.tag('voice-level');
+                return html `<${meter} part="voice-level" exportparts="canvas: voice-level-canvas" aria-hidden="true" variant="spectrum"></${meter}>`;
+            }
+            return drawIcon(microphone);
+        }
         renderVoice() {
             if (!this.voice || !this.voiceReady) {
                 return nothing;
@@ -191,7 +204,7 @@ export const MixinVoice = (Base) => {
                 }
             }}
         >
-          ${drawIcon(microphone)}
+          ${this.renderVoiceGlyph()}
         </button
         ><span part="voice-status" data-spoken role="status">${this.said}</span>`;
         }

package/dist/utils/speech/speech.d.ts

@@ -42,9 +42,10 @@ export interface SpeechEngine {
  * where the browser offers one. Chrome's service is Google's, and Chromium browsers without Google's
  * keys, such as Brave, reach no service at all and end with `network`.
  *
- * `meter` reads loudness for the ring. Leave it off where this page is
- * listening for a frame. A second capture of the microphone ends the
- * recognizer, and the prompt the reader sees belongs to that capture.
+ * `meter` reads loudness for the dictation button's level from a second
+ * capture of the microphone, opened on the recognizer's `audiostart`. Opened
+ * at the same time as the recognizer, that capture ended recognition after the
+ * permission prompt. Turn it off with `meter: false`.
  */
 export declare const recognizeSpeech: (lang: string, listener: SpeechListener, options?: {
     meter?: boolean;

package/dist/utils/speech/speech.js

@@ -96,9 +96,15 @@ export const recognizeSpeech = (lang, listener, options) => {
     let asked = false;
     let ended = false;
     let recognition;
-    const quiet = options?.meter === false
-        ? () => { }
-        : meter((level, bands) => listener.level?.(level, bands));
+    let quiet = () => { };
+    let metering = false;
+    const startMeter = () => {
+        if (options?.meter === false || metering || ended) {
+            return;
+        }
+        metering = true;
+        quiet = meter((level, bands) => listener.level?.(level, bands));
+    };
     const end = (reason, message) => {
         if (ended) {
             return;
@@ -119,6 +125,7 @@ export const recognizeSpeech = (lang, listener, options) => {
         }
         let failed;
         let heard = false;
+        current.onaudiostart = startMeter;
         current.onresult = (event) => {
             heard = true;
             let guess = '';

package/dist/version.d.ts

@@ -6,4 +6,4 @@
  * release, so the two never disagree; a spec beside this holds them to it.
  * Nothing else in the running code knows which release it is.
  */
-export declare const VERSION = "0.222.0";
+export declare const VERSION = "0.223.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '0.222.0';
+export const VERSION = '0.223.0';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-core",
   "description": "Helix element primitives: base classes, mixins, decorators, utilities.",
-  "version": "0.222.0",
+  "version": "0.223.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -81,12 +81,12 @@
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@fusion.dev/helix-icons": "0.222.0",
+    "@fusion.dev/helix-icons": "0.223.0",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.222.0",
-    "@fusion.dev/helix-testing": "0.222.0",
+    "@fusion.dev/helix-cem": "0.223.0",
+    "@fusion.dev/helix-testing": "0.223.0",
     "@lit-labs/ssr": "^4.1.0",
     "lit": "^3.2.1"
   },