@fusion.dev/helix 0.221.0 → 0.222.0

package/dist/sandbox/index.d.ts

@@ -10,7 +10,8 @@
  *
  * What makes this a sandbox rather than a layout is here: `Sandbox.Preview`
  * hardcodes `sandbox="allow-scripts allow-forms"` on its frame and never
- * `allow-same-origin`, which is the pairing that would undo it.
+ * `allow-same-origin`, which is the pairing that would undo it. The frame is
+ * granted clipboard write, fullscreen, and the microphone.
  */
 export { registerCompilerWorker } from './compile.js';
 export * from './console/sandbox-console.js';

package/dist/sandbox/preview/sandbox-preview.d.ts

@@ -44,7 +44,23 @@ export interface PreviewSize {
     size: number;
     type: 'helix-preview-size';
 }
-export type PreviewMessage = PreviewConsole | PreviewFetch | PreviewPress | PreviewReady | PreviewRender | PreviewRendered | PreviewSize;
+/**
+ * The frame asking this page to listen. Its own origin is opaque, so the
+ * recognizer there refuses to start.
+ */
+export interface PreviewSpeechStart {
+    /** Which listening this is, so a late reply cannot land in the next one. */
+    id: number;
+    /** A BCP 47 tag, such as `en-US`. */
+    lang: string;
+    type: 'helix-speech-start';
+}
+/** The frame asking this page to stop the listening `id` names. */
+export interface PreviewSpeechStop {
+    id: number;
+    type: 'helix-speech-stop';
+}
+export type PreviewMessage = PreviewConsole | PreviewFetch | PreviewPress | PreviewReady | PreviewRender | PreviewRendered | PreviewSize | PreviewSpeechStart | PreviewSpeechStop;
 /**
  * @summary A frame that renders sandbox source in a separate document.
  *
@@ -263,6 +279,10 @@ export declare class HelixSandboxPreview extends HelixElement {
     styles: string;
     /** Whether the frame has said it is listening. */
     private ready;
+    /** The recognizer running for the frame, on this page. */
+    private speech;
+    /** Which ask `speech` belongs to. */
+    private speechId;
     /** The source the frame was last sent, which it holds and does not run again. */
     private sentSource;
     /** The source the frame held when it last reported an uncaught error. */
@@ -403,17 +423,35 @@ export declare class HelixSandboxPreview extends HelixElement {
      * where the browser refused to open one.
      *
      * **The tab runs the example as this preview does**: in a frame that fills
-     * it, with this frame's `sandbox`, loading `src` or the built-in document,
-     * and sent the example once it loads. The example stays on an opaque origin,
-     * and the tab's `opener` is cleared, so it cannot reach this page. The tab
-     * shows the example as it was when it opened, and edits after that do not
-     * reach it. A short inline script in the tab sends the example, so on a page
-     * whose Content Security Policy refuses inline scripts the tab opens empty,
-     * as the built-in document does there.
+     * it, with this frame's `sandbox` and `allow`, loading `src` or the built-in
+     * document, and sent the example once it loads. The example stays on an
+     * opaque origin, and the tab's `opener` is cleared, so it cannot reach this
+     * page. The tab shows the example as it was when it opened, and edits after
+     * that do not reach it. A short inline script in the tab sends the example,
+     * so on a page whose Content Security Policy refuses inline scripts the tab
+     * opens empty, as the built-in document does there. Dictation in the tab
+     * listens through the tab's own recognizer, asked from this page.
      */
     open(): Window | null;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Takes a frame's ask to start or stop listening, and returns whether the
+     * message was one. `scope` is the window that holds the frame, whose
+     * recognizer listens.
+     */
+    private speak;
+    /**
+     * Listens for a frame that cannot listen for itself, and sends each guess
+     * back to that frame.
+     *
+     * **An engine this page registered listens in its place**, so a page that
+     * gives its own fields another engine gives it to its examples too. The
+     * browser's recognizer listens in `scope`, the window that holds the frame:
+     * a tab `open()` makes holds its own. A registered engine runs in this page,
+     * so it listens only for the frame this page holds.
+     */
+    private hear;
     /**
      * Loads the frame's document again, and re-sends the example to it.
      *

package/dist/sandbox/preview/sandbox-preview.js

@@ -1,6 +1,6 @@
 var HelixSandboxPreview_1;
 import { __decorate } from "tslib";
-import { customElement, DelayController, HelixConsoleEvent, HelixElement, HelixResizeEvent, words, } from '@fusion.dev/helix-core';
+import { browserSpeech, customElement, DelayController, HelixConsoleEvent, HelixElement, HelixResizeEvent, pageSpeechEngine, recognizeSpeech, words, } from '@fusion.dev/helix-core';
 const SETTLE = 120;
 const PAINT_PATIENCE = 1000;
 import { html, nothing } from 'lit';
@@ -10,6 +10,7 @@ import { defaultFrame, withScript } from '../frame.js';
 import { isFetch, RELAY_OPEN, relayAddress, relayFetch, relayPrefixes, } from '../relay.js';
 import { styles as sheet } from './sandbox-preview.css.js';
 const SANDBOX = 'allow-scripts allow-forms';
+const ALLOW = 'clipboard-write *; fullscreen *; microphone *';
 const RELATIVE = /(\bfrom\s*|\bimport\s*\(?\s*)(["'])(\.{1,2}\/[^"']+)\2/g;
 const moduleText = (path, source) => `data:text/javascript;charset=utf-8,${encodeURIComponent(source.replace(RELATIVE, (_, lead, quote, specifier) => `${lead}${quote}${new URL(specifier, `sandbox:/${path}`).href}${quote}`))}`;
 let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
@@ -40,6 +41,9 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
                 return;
             }
             const data = event.data;
+            if (this.speak(event, window)) {
+                return;
+            }
             if (isFetch(data)) {
                 void this.answer(data, event.source);
                 return;
@@ -191,6 +195,7 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         tab.document.title = this.label;
         body.style.margin = '0';
         const frame = tab.document.createElement('iframe');
+        frame.setAttribute('allow', ALLOW);
         frame.setAttribute('sandbox', SANDBOX);
         frame.title = this.label;
         frame.style.cssText = 'block-size: 100vh; border: none; display: block; inline-size: 100vw';
@@ -200,15 +205,18 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         else {
             frame.src = this.frame?.src || this.src;
         }
-        if (relayPrefixes(this.relay).length > 0) {
-            tab.addEventListener('message', (event) => {
-                if (event.source === frame.contentWindow &&
-                    event.origin === 'null' &&
-                    isFetch(event.data)) {
-                    void this.answer(event.data, event.source);
-                }
-            });
-        }
+        const relays = relayPrefixes(this.relay).length > 0;
+        tab.addEventListener('message', (event) => {
+            if (event.source !== frame.contentWindow || event.origin !== 'null') {
+                return;
+            }
+            if (this.speak(event, tab)) {
+                return;
+            }
+            if (relays && isFetch(event.data)) {
+                void this.answer(event.data, event.source);
+            }
+        });
         const send = tab.document.createElement('script');
         send.textContent = `const frame = document.currentScript.previousElementSibling
 frame.onload = () => frame.contentWindow.postMessage(${JSON.stringify(this.message)}, '*')`;
@@ -222,6 +230,52 @@ frame.onload = () => frame.contentWindow.postMessage(${JSON.stringify(this.messa
     disconnectedCallback() {
         super.disconnectedCallback();
         window.removeEventListener('message', this.handleMessage);
+        this.speech?.stop();
+        this.speech = undefined;
+    }
+    speak(event, scope) {
+        const data = event.data;
+        if (data?.type === 'helix-speech-start') {
+            this.hear(data, event.source, scope, event.ports[0]);
+            return true;
+        }
+        if (data?.type === 'helix-speech-stop') {
+            if (this.speechId === data.id) {
+                this.speech?.stop();
+            }
+            return true;
+        }
+        return false;
+    }
+    hear(ask, source, scope, port) {
+        this.speech?.stop();
+        this.speechId = ask.id;
+        const tell = (kind, text, error, level) => {
+            const message = { error, id: ask.id, kind, level, text, type: 'helix-speech-heard' };
+            if (port) {
+                port.postMessage(message);
+            }
+            else {
+                source.postMessage(message, '*');
+            }
+        };
+        const listener = {
+            end: (reason, message) => {
+                tell(reason === 'error' ? 'error' : reason === 'stopped' ? 'stopped' : 'end', undefined, message);
+                if (this.speechId === ask.id) {
+                    this.speech = undefined;
+                    this.speechId = undefined;
+                }
+            },
+            final: (text) => tell('final', text),
+            level: (level) => tell('level', undefined, undefined, level),
+            partial: (text) => tell('partial', text),
+        };
+        const engine = pageSpeechEngine();
+        this.speech =
+            engine !== browserSpeech && scope === window
+                ? engine.listen({ lang: ask.lang, listener })
+                : recognizeSpeech(ask.lang, listener, { meter: false, scope });
     }
     reload() {
         const frame = this.frame;
@@ -286,7 +340,7 @@ frame.onload = () => frame.contentWindow.postMessage(${JSON.stringify(this.messa
       srcdoc=${this.src === '' ? defaultFrame(this.map) : nothing}
       title=${this.label}
       aria-describedby=${this.failure === undefined ? nothing : 'error'}
-      allow="clipboard-write *; fullscreen *"
+      allow=${ALLOW}
       sandbox=${SANDBOX}
     ></iframe>${this.failure === undefined
             ? nothing

package/dist/shared/dictation/dictation.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part~="voice-listening"] {box-shadow: 0 0 0 calc(var(--dictation-level, 0.4) * var(--helix-space-2xs) * 1.5) color-mix(in oklab, var(--helix-color-accent) 35%, transparent);color: var(--helix-color-accent);transition: box-shadow var(--helix-duration-fast) linear}@media (prefers-reduced-motion: reduce) {[part~="voice-listening"] {box-shadow: 0 0 0 calc(var(--helix-space-2xs) * 0.6) color-mix(in oklab, var(--helix-color-accent) 35%, transparent);transition: none}}@media print {[part~="voice"] {display: none}}`);
+export const styles = createSheet(`[part~="voice-listening"]:not(:disabled), [part~="voice-listening"]:hover:not(:disabled) {background-color: var(--helix-color-success-surface);box-shadow: 0 0 0 calc(var(--dictation-level, 0.4) * var(--helix-space-2xs) * 1.5) color-mix(in oklab, var(--helix-color-success) 35%, transparent);color: var(--helix-color-foreground-on-status);transition: box-shadow var(--helix-duration-fast) linear}[part~="voice-listening"]:hover:not(:disabled) {background-color: var(--helix-color-success-surface-hover)}@media (prefers-reduced-motion: reduce) {[part~="voice-listening"]:not(:disabled), [part~="voice-listening"]:hover:not(:disabled) {box-shadow: 0 0 0 calc(var(--helix-space-2xs) * 0.6) color-mix(in oklab, var(--helix-color-success) 35%, transparent);transition: none}}@media print {[part~="voice"] {display: none}}`);

package/dist/textarea/root/textarea-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="field"] {background-color: var(--textarea-background-color, var(--helix-color-well));border: var(--helix-border-thin) solid var(--textarea-border-color, var(--helix-color-border));border-radius: var(--textarea-radius, var(--helix-radii-sm));display: flex;gap: var(--helix-space-2xs);padding: var(--textarea-padding, var(--helix-space-xs));transition: border-color var(--helix-duration-fast) var(--helix-easing-standard), background-color var(--helix-duration-fast) var(--helix-easing-standard)}[part="control"] {line-height: var(--helix-leading-normal);overflow-wrap: break-word;resize: var(--textarea-resize, vertical)}slot[name="start"]::slotted(*), slot[name="end"]::slotted(*) {align-self: flex-start;color: var(--helix-color-foreground-muted);flex: 0 0 auto}[part="clear"], [part~="voice"] {--icon-size: var(--helix-size-icon-tight);all: unset;align-items: center;align-self: flex-start;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: 0 0 auto;justify-content: center;min-block-size: var(--helix-size-icon-loose);min-inline-size: var(--helix-size-icon-loose);transition: color var(--helix-duration-fast) var(--helix-easing-standard)}[part="clear"]:hover, [part~="voice"]:hover {color: var(--helix-color-foreground)}[part="clear"]:focus-visible, [part~="voice"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host([auto-grow]) [part="control"] {overflow: hidden;resize: none}:host(:disabled) [part="field"] {cursor: not-allowed;opacity: 0.5}:host([readonly]) [part="field"] {background-color: transparent}@media print {:host {print-color-adjust: exact}}`);
+export const styles = createSheet(`[part="field"] {background-color: var(--textarea-background-color, var(--helix-color-well));border: var(--helix-border-thin) solid var(--textarea-border-color, var(--helix-color-border));border-radius: var(--textarea-radius, var(--helix-radii-sm));display: flex;gap: var(--helix-space-2xs);padding: var(--textarea-padding, var(--helix-space-xs));position: relative;transition: border-color var(--helix-duration-fast) var(--helix-easing-standard), background-color var(--helix-duration-fast) var(--helix-easing-standard)}[part="control"] {line-height: var(--helix-leading-normal);overflow-wrap: break-word;resize: var(--textarea-resize, vertical)}slot[name="start"]::slotted(*), slot[name="end"]::slotted(*) {align-self: flex-start;color: var(--helix-color-foreground-muted);flex: 0 0 auto}[part="clear"], [part~="voice"] {--icon-size: var(--helix-size-icon-tight);all: unset;align-items: center;align-self: flex-start;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: 0 0 auto;justify-content: center;min-block-size: var(--helix-size-icon-loose);min-inline-size: var(--helix-size-icon-loose);transition: color var(--helix-duration-fast) var(--helix-easing-standard)}[part="clear"]:hover, [part~="voice"]:hover {color: var(--helix-color-foreground)}[part="clear"]:focus-visible, [part~="voice"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part~="voice"] {background-color: transparent;block-size: var(--helix-size-icon-loose);inline-size: var(--helix-size-icon-loose);inset-block-start: calc(var(--textarea-padding, var(--helix-space-xs)) + (1em * var(--helix-leading-normal) - var(--helix-size-icon-loose)) / 2);inset-inline-end: var(--textarea-padding, var(--helix-space-xs));overflow: hidden;position: absolute}[part="field"]:has([part~="voice"]) [part="control"] {padding-inline-end: calc(var(--helix-size-icon-loose) + var(--helix-space-2xs))}[part~="voice"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)}:host([auto-grow]) [part="control"] {overflow: hidden;resize: none}:host(:disabled) [part="field"] {cursor: not-allowed;opacity: 0.5}:host([readonly]) [part="field"] {background-color: transparent}@media print {:host {print-color-adjust: exact}}`);

package/dist/textarea/root/textarea-root.js

@@ -5,9 +5,11 @@ import { styles as dictationStyles } from '../../shared/dictation/dictation.css.
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldFrameStyles } from '../../shared/field/field-frame.css.js';
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
+import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles } from './textarea-root.css.js';
 let HelixTextarea = class HelixTextarea extends HelixHeadlessTextarea {
     static { this.styles = [
+        glyphStyles,
         fieldStyles,
         fieldFrameStyles,
         fieldStackedStyles,