@happyvertical/smrt-svelte 0.51.39 → 0.53.0

package/dist/browser-ai/adapters/stt/browser-speech.test.js

@@ -0,0 +1,113 @@
+/**
+ * BrowserSpeechSTTAdapter errors: every Web Speech error reaches `onError`
+ * with its code (`speechError`), including an `aborted` the adapter did not
+ * cause, and through smrt-ui's `Dictation` Brave's "starts, then `network`"
+ * becomes a plain error instead of a silent stop.
+ */
+import { Dictation } from '@happyvertical/smrt-ui/forms';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { BrowserSpeechSTTAdapter, } from './browser-speech.js';
+import { createSttDictationSource } from './dictation-source.js';
+class FakeRecognition {
+    static last = null;
+    /** What the browser does after start(): Brave errors with `network`. */
+    static afterStart = null;
+    lang = '';
+    continuous = false;
+    interimResults = false;
+    maxAlternatives = 1;
+    onresult = null;
+    onerror = null;
+    onstart = null;
+    onend = null;
+    constructor() {
+        FakeRecognition.last = this;
+    }
+    start = vi.fn(() => {
+        this.onstart?.();
+        FakeRecognition.afterStart?.(this);
+    });
+    stop = vi.fn(() => this.onend?.());
+    abort = vi.fn(() => {
+        this.onerror?.({ error: 'aborted', message: '' });
+        this.onend?.();
+    });
+    fail(code) {
+        this.onerror?.({ error: code, message: '' });
+        this.onend?.();
+    }
+}
+function install() {
+    window.webkitSpeechRecognition =
+        FakeRecognition;
+}
+afterEach(() => {
+    delete window
+        .webkitSpeechRecognition;
+    FakeRecognition.last = null;
+    FakeRecognition.afterStart = null;
+});
+describe('BrowserSpeechSTTAdapter errors', () => {
+    it.each([
+        'network',
+        'not-allowed',
+        'service-not-allowed',
+        'no-speech',
+        'audio-capture',
+        'aborted',
+        'language-not-supported',
+    ])('reports %s with its code', async (code) => {
+        install();
+        const adapter = new BrowserSpeechSTTAdapter();
+        const errors = [];
+        adapter.onError((error) => errors.push(error));
+        await adapter.start({ continuous: true });
+        FakeRecognition.last?.fail(code);
+        expect(errors).toHaveLength(1);
+        expect(errors[0].speechError).toBe(code);
+    });
+    it('does not report the abort it caused itself', async () => {
+        install();
+        const adapter = new BrowserSpeechSTTAdapter();
+        const onError = vi.fn();
+        adapter.onError(onError);
+        await adapter.start();
+        adapter.abort();
+        expect(onError).not.toHaveBeenCalled();
+    });
+});
+describe('Dictation over the browser adapter', () => {
+    it("Brave: it beeps, then 'network' — shown as unavailable, not a silent stop", async () => {
+        install();
+        FakeRecognition.afterStart = (r) => queueMicrotask(() => r.fail('network'));
+        const log = vi.fn();
+        const beep = vi.fn(async () => true);
+        const dictation = new Dictation({
+            source: createSttDictationSource(),
+            onText: () => { },
+            beep,
+            log,
+            requestMicrophone: false,
+        });
+        await dictation.start();
+        await vi.waitFor(() => expect(dictation.state).toBe('error'));
+        expect(beep).toHaveBeenCalled();
+        expect(dictation.errorKind).toBe('unsupported');
+        expect(dictation.errorCode).toBe('network');
+        expect(log).toHaveBeenCalledWith(expect.objectContaining({ kind: 'unsupported', code: 'network' }));
+    });
+    it('an end straight after starting with no error is a failure too', async () => {
+        install();
+        FakeRecognition.afterStart = (r) => queueMicrotask(() => r.onend?.());
+        const dictation = new Dictation({
+            source: createSttDictationSource(),
+            onText: () => { },
+            beep: false,
+            log: () => { },
+            requestMicrophone: false,
+        });
+        await dictation.start();
+        await vi.waitFor(() => expect(dictation.state).toBe('error'));
+        expect(dictation.errorKind).toBe('interrupted');
+    });
+});

package/dist/browser-ai/adapters/stt/dictation-source.d.ts

@@ -0,0 +1,3 @@
+import type { GetSTTOptions, STTAdapter } from './types.js';
+export declare function createSttDictationSource(options?: GetSTTOptions): () => Promise<STTAdapter>;
+//# sourceMappingURL=dictation-source.d.ts.map

package/dist/browser-ai/adapters/stt/dictation-source.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dictation-source.d.ts","sourceRoot":"","sources":["../../../../src/browser-ai/adapters/stt/dictation-source.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE5D,wBAAgB,wBAAwB,CACtC,OAAO,GAAE,aAA0C,GAClD,MAAM,OAAO,CAAC,UAAU,CAAC,CAc3B"}

package/dist/browser-ai/adapters/stt/dictation-source.js

@@ -0,0 +1,38 @@
+/**
+ * A speech source for smrt-ui's `Dictation` (the microphone button and
+ * "press and hold a field to speak" in `@happyvertical/smrt-ui/forms`).
+ *
+ * `STTAdapter` already has the shape `Dictation` needs (`start`, `stop`,
+ * `onResult`, `onError`, `onStart`, `onEnd`), so this only creates the
+ * adapter lazily, once, the first time someone starts dictating: nothing
+ * loads and no microphone prompt appears until then. Defaults to the
+ * browser's own speech recognition (`browser-speech`), which needs no
+ * download; an unsupported browser rejects with
+ * `CapabilityNotAvailableError`, which `Dictation` reports in plain words.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createSttDictationSource } from '@happyvertical/smrt-svelte/browser-ai';
+ *   import { Dictation, DictationButton } from '@happyvertical/smrt-ui/forms';
+ *   const dictation = new Dictation({ source: createSttDictationSource(), onText: (t) => … });
+ * </script>
+ * <DictationButton {dictation} />
+ * ```
+ */
+import { getSTT } from './factory.js';
+export function createSttDictationSource(options = { type: 'browser-speech' }) {
+    let adapter = null;
+    return () => {
+        adapter ??= (async () => {
+            const created = await getSTT(options);
+            await created.ensureInitialized();
+            return created;
+        })().catch((error) => {
+            // Let a later tap try again (for example after a permission change).
+            adapter = null;
+            throw error;
+        });
+        return adapter;
+    };
+}

package/dist/browser-ai/adapters/stt/dictation-source.test.js

@@ -0,0 +1,52 @@
+/**
+ * createSttDictationSource: the browser speech adapter, created once and
+ * lazily, and rejected plainly where the browser has no speech recognition.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { createSttDictationSource } from './dictation-source.js';
+class FakeRecognition {
+    lang = '';
+    continuous = false;
+    interimResults = false;
+    maxAlternatives = 1;
+    onresult = null;
+    onerror = null;
+    onstart = null;
+    onend = null;
+    start = vi.fn(() => this.onstart?.());
+    stop = vi.fn(() => this.onend?.());
+    abort = vi.fn();
+}
+describe('createSttDictationSource', () => {
+    afterEach(() => {
+        delete window.SpeechRecognition;
+        delete window
+            .webkitSpeechRecognition;
+    });
+    it('creates one browser speech adapter, on first use', async () => {
+        window.webkitSpeechRecognition =
+            FakeRecognition;
+        const provide = createSttDictationSource();
+        const first = await provide();
+        const second = await provide();
+        expect(first).toBe(second);
+        expect(first.type).toBe('browser-speech');
+        const onStart = vi.fn();
+        first.onStart(onStart);
+        await first.start({
+            language: 'en-CA',
+            continuous: true,
+            interimResults: true,
+        });
+        expect(onStart).toHaveBeenCalled();
+    });
+    it('rejects with CapabilityNotAvailableError without speech recognition, then can retry', async () => {
+        const provide = createSttDictationSource();
+        await expect(provide()).rejects.toMatchObject({
+            name: 'CapabilityNotAvailableError',
+        });
+        window.SpeechRecognition =
+            FakeRecognition;
+        await expect(provide()).resolves.toBeTruthy();
+    });
+});

package/dist/browser-ai/adapters/stt/index.d.ts

@@ -1,7 +1,8 @@
 /**
  * Speech-to-Text adapters
  */
-export { BrowserSpeechSTTAdapter } from './browser-speech.js';
+export { type BrowserSpeechError, BrowserSpeechSTTAdapter, } from './browser-speech.js';
+export { createSttDictationSource } from './dictation-source.js';
 export * from './factory.js';
 export * from './types.js';
 export { WhisperCppSTTAdapter } from './whisper-cpp.js';

package/dist/browser-ai/adapters/stt/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/browser-ai/adapters/stt/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/browser-ai/adapters/stt/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EACL,KAAK,kBAAkB,EACvB,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACjE,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/browser-ai/adapters/stt/index.js

@@ -1,7 +1,8 @@
 /**
  * Speech-to-Text adapters
  */
-export { BrowserSpeechSTTAdapter } from './browser-speech.js';
+export { BrowserSpeechSTTAdapter, } from './browser-speech.js';
+export { createSttDictationSource } from './dictation-source.js';
 export * from './factory.js';
 export * from './types.js';
 export { WhisperCppSTTAdapter } from './whisper-cpp.js';

package/dist/components/forms/FileUpload.svelte

@@ -8,7 +8,19 @@
  * - Accept filter (mime types / extensions)
  * - Multiple file support
  * - Max size validation
+ * - Native form posting via `name` (the accepted list is mirrored onto the
+ *   real input with `DataTransfer`, so picks, drops and removals post exactly
+ *   what the list shows), `required` validation, and camera `capture`
+ * - A reset of the owning form (`form.reset()`, a reset button, SvelteKit
+ *   `enhance`'s `update()` after a success) empties the list, as it empties a
+ *   native file input, and reports it through `onchange([])`
  * - Material 3 styling
+ *
+ * Fallback: where the `DataTransfer` constructor is unavailable (Safari < 14.1,
+ * jsdom), the input keeps the browser's own selection only while it matches the
+ * accepted list exactly; otherwise it is cleared. A native submit then never
+ * posts a file the list does not show, but drops, accumulated picks and
+ * partial removals post nothing until the next matching pick.
  */
 
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
@@ -23,7 +35,7 @@ export interface Props {
   multiple?: boolean;
   /** Selected files (bindable) */
   files?: File[];
-  /** Callback when files change */
+  /** Callback when files change, including the empty list after a form reset */
   onchange?: (files: File[]) => void;
   /** Maximum file size in bytes */
   maxSize?: number;
@@ -33,6 +45,12 @@ export interface Props {
   label?: string;
   /** Hint text shown below the label */
   hint?: string;
+  /** Form field name; the accepted files post under it in a native `multipart/form-data` submit */
+  name?: string;
+  /** Camera hint forwarded to the input: `environment` (rear) or `user` (front) */
+  capture?: 'environment' | 'user';
+  /** Require at least one file for native form validation */
+  required?: boolean;
 }
 
 let {
@@ -44,12 +62,61 @@ let {
   disabled = false,
   label = 'Drag and drop files here',
   hint = 'or click to browse',
+  name,
+  capture,
+  required = false,
 }: Props = $props();
 
 let isDragging = $state(false);
 let error = $state<string | null>(null);
 let inputRef = $state<HTMLInputElement | null>(null);
 
+// Mirror the accepted list onto the real input so a native form submit posts
+// exactly what the list shows (picks, drops, removals, and external resets of
+// the bound `files`). Assigning `input.files` fires no change event.
+$effect(() => {
+  const input = inputRef;
+  const current = files;
+  if (!input) return;
+  if (typeof DataTransfer === 'function') {
+    try {
+      const transfer = new DataTransfer();
+      for (const file of current) transfer.items.add(file);
+      input.files = transfer.files;
+      return;
+    } catch {
+      // Constructor present but unusable; fall through to the fallback.
+    }
+  }
+  const native = input.files ? Array.from(input.files) : [];
+  const matches =
+    native.length === current.length &&
+    native.every((file, i) => file === current[i]);
+  if (!matches) input.value = '';
+});
+
+// The owning form reset: the browser empties the native input, so the list
+// must empty too or it keeps showing files that no longer post. `reset` fires
+// before the browser resets the controls; clearing `files` makes the mirror
+// effect above assign an empty list, so the two agree instead of fighting
+// (and a cancelled reset still leaves list and input both empty). The capture
+// phase on `document` reads the input's form at dispatch time, so moving the
+// input between forms needs no re-wiring and no page listener can hide it.
+$effect(() => {
+  if (typeof document === 'undefined') return;
+  const onReset = (event: Event) => {
+    const form = inputRef?.form;
+    if (!form || event.target !== form) return;
+    const hadFiles = files.length > 0;
+    error = null;
+    isDragging = false;
+    files = [];
+    if (hadFiles) onchange?.(files);
+  };
+  document.addEventListener('reset', onReset, true);
+  return () => document.removeEventListener('reset', onReset, true);
+});
+
 function handleDragEnter(e: DragEvent) {
   e.preventDefault();
   if (!disabled) isDragging = true;
@@ -79,10 +146,16 @@ function handleFileSelect(e: Event) {
   const input = e.target as HTMLInputElement;
   if (input.files) {
     addFiles(Array.from(input.files));
-    input.value = '';
   }
 }
 
+function handleInvalid(e: Event) {
+  const input = e.currentTarget as HTMLInputElement;
+  // The input is visually hidden and aria-hidden, so announce the native
+  // validation failure through the live error region as well.
+  error = input.validationMessage || t(M['ui.file_upload.required']);
+}
+
 function handleZoneClick() {
   if (!disabled) inputRef?.click();
 }
@@ -127,18 +200,24 @@ function addFiles(newFiles: File[]) {
   // Validate accepted types
   const rejected = filtered.filter((f) => !isFileAccepted(f));
   if (rejected.length > 0) {
-    errorMessages.push(`${rejected.length} file(s) rejected: type not allowed`);
+    errorMessages.push(
+      t(M['ui.file_upload.rejected_type'], { count: rejected.length }),
+    );
     filtered = filtered.filter((f) => isFileAccepted(f));
   }
 
   // Validate max size
-  if (maxSize) {
-    const oversized = filtered.filter((f) => f.size > maxSize!);
+  const limit = maxSize;
+  if (limit) {
+    const oversized = filtered.filter((f) => f.size > limit);
     if (oversized.length > 0) {
       errorMessages.push(
-        `${oversized.length} file(s) exceed the maximum size of ${formatFileSize(maxSize)}`,
+        t(M['ui.file_upload.exceeds_max_size'], {
+          count: oversized.length,
+          size: formatFileSize(limit),
+        }),
       );
-      filtered = filtered.filter((f) => f.size <= maxSize!);
+      filtered = filtered.filter((f) => f.size <= limit);
     }
   }
 
@@ -192,16 +271,26 @@ function formatFileSize(bytes: number): string {
     </div>
     <p class="drop-zone__label">{label}</p>
     <p class="drop-zone__hint">{hint}</p>
-    <input
-      bind:this={inputRef}
-      type="file"
-      {accept}
-      {multiple}
-      onchange={handleFileSelect}
-      hidden
-      {disabled}
-    />
   </div>
+  <!-- Visually hidden rather than `hidden`: a hidden control cannot be focused,
+       so the browser could not show its `required` validation bubble and would
+       silently block the submit. The drop zone stays the one control exposed
+       to assistive tech and the tab order. -->
+  <input
+    bind:this={inputRef}
+    class="file-upload__input"
+    type="file"
+    {name}
+    {accept}
+    {multiple}
+    {capture}
+    {required}
+    {disabled}
+    tabindex="-1"
+    aria-hidden="true"
+    onchange={handleFileSelect}
+    oninvalid={handleInvalid}
+  />
 
   {#if error}
     <!-- Live region so async validation/reject errors are announced (C7),
@@ -235,11 +324,26 @@ function formatFileSize(bytes: number): string {
 
 <style>
   .file-upload {
+    position: relative;
     display: flex;
     flex-direction: column;
     gap: var(--smrt-spacing-3, 0.75rem);
   }
 
+  .file-upload__input {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
   .file-upload.disabled {
     opacity: 0.5;
     pointer-events: none;

package/dist/components/forms/FileUpload.svelte.d.ts

@@ -5,7 +5,7 @@ export interface Props {
     multiple?: boolean;
     /** Selected files (bindable) */
     files?: File[];
-    /** Callback when files change */
+    /** Callback when files change, including the empty list after a form reset */
     onchange?: (files: File[]) => void;
     /** Maximum file size in bytes */
     maxSize?: number;
@@ -15,6 +15,12 @@ export interface Props {
     label?: string;
     /** Hint text shown below the label */
     hint?: string;
+    /** Form field name; the accepted files post under it in a native `multipart/form-data` submit */
+    name?: string;
+    /** Camera hint forwarded to the input: `environment` (rear) or `user` (front) */
+    capture?: 'environment' | 'user';
+    /** Require at least one file for native form validation */
+    required?: boolean;
 }
 declare const FileUpload: import("svelte").Component<Props, {}, "files">;
 type FileUpload = ReturnType<typeof FileUpload>;

package/dist/components/forms/FileUpload.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FileUpload.svelte.ts"],"names":[],"mappings":"AAkBA,MAAM,WAAW,KAAK;IACpB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACnC,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AA0LD,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FileUpload.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FileUpload.svelte.ts"],"names":[],"mappings":"AA8BA,MAAM,WAAW,KAAK;IACpB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACnC,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iGAAiG;IACjG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,OAAO,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IACjC,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAwPD,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}