@happyvertical/smrt-ui 0.51.39 → 0.53.0

package/dist/components/forms/__tests__/segmented-posting.test.js

@@ -0,0 +1,92 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import Fixture from './segmented-posting.fixture.svelte';
+function form(container) {
+    return container.querySelector('form');
+}
+describe('SegmentedControl native forms', () => {
+    it('posts selected values and preserves numeric zero in bindings', async () => {
+        const { container } = render(Fixture);
+        expect(new FormData(form(container)).get('kind')).toBe('one');
+        await userEvent.click(screen.getByRole('radio', { name: 'Zero' }));
+        expect(new FormData(form(container)).get('kind')).toBe('0');
+        expect(container.querySelector('[data-bound-value]')).toHaveTextContent('0');
+    });
+    it.each([
+        { disabled: true },
+        { outerDisabled: true },
+        { initial: 'off' },
+        { initial: 'missing' },
+        { named: false },
+    ])('omits disabled, unmatched, or unnamed values %j', (props) => {
+        const { container } = render(Fixture, { props });
+        expect(new FormData(form(container)).has('kind')).toBe(false);
+    });
+    it('requires an enabled selection including zero', async () => {
+        const { container } = render(Fixture, {
+            props: { required: true, initial: 'missing' },
+        });
+        expect(form(container).checkValidity()).toBe(false);
+        await userEvent.click(screen.getByRole('radio', { name: 'Zero' }));
+        expect(form(container).checkValidity()).toBe(true);
+    });
+    it('validates required unnamed controls without posting a generated field', async () => {
+        const { container } = render(Fixture, {
+            props: { required: true, named: false, initial: 'missing' },
+        });
+        expect(form(container).checkValidity()).toBe(false);
+        await userEvent.click(screen.getByRole('radio', { name: 'Zero' }));
+        expect(form(container).checkValidity()).toBe(true);
+        expect([...new FormData(form(container)).keys()]).toEqual([]);
+    });
+    it('resets to the initial selection and binding and honors reset cancellation', async () => {
+        const { container } = render(Fixture);
+        await userEvent.click(screen.getByRole('radio', { name: 'Zero' }));
+        await userEvent.click(screen.getByRole('button', { name: 'Reset' }));
+        await waitFor(() => expect(new FormData(form(container)).get('kind')).toBe('one'));
+        await waitFor(() => expect(container.querySelector('[data-bound-value]')).toHaveTextContent('one'));
+        await userEvent.click(screen.getByRole('radio', { name: 'Zero' }));
+        form(container).addEventListener('reset', (e) => e.preventDefault());
+        await userEvent.click(screen.getByRole('button', { name: 'Reset' }));
+        expect(new FormData(form(container)).get('kind')).toBe('0');
+    });
+    it('resets a numeric initial value and clears unmatched initial values', async () => {
+        const { container, unmount } = render(Fixture, { props: { initial: 0 } });
+        await userEvent.click(screen.getByRole('radio', { name: 'One' }));
+        form(container).reset();
+        await waitFor(() => expect(container.querySelector('[data-bound-value]')).toHaveTextContent('0'));
+        expect(container.querySelector('[data-bound-value]')).toHaveAttribute('data-bound-type', 'number');
+        unmount();
+        const second = render(Fixture, {
+            props: { initial: 'missing', required: true },
+        });
+        await userEvent.click(screen.getByRole('radio', { name: 'One' }));
+        form(second.container).reset();
+        await waitFor(() => expect(second.container.querySelector('[data-bound-value]')).toHaveTextContent('undefined'));
+        expect(form(second.container).checkValidity()).toBe(false);
+        expect(new FormData(form(second.container)).has('kind')).toBe(false);
+    });
+    it('emits one native change and one value callback per pointer selection', async () => {
+        const onvaluechange = vi.fn();
+        const { container } = render(Fixture, { props: { onvaluechange } });
+        const onchange = vi.fn();
+        form(container).addEventListener('change', onchange);
+        await userEvent.click(screen.getByRole('radio', { name: 'Zero' }));
+        expect(onvaluechange).toHaveBeenCalledExactlyOnceWith(0);
+        expect(onchange).toHaveBeenCalledTimes(1);
+    });
+    it('supports arrow/home/end navigation while skipping disabled options', async () => {
+        render(Fixture);
+        const one = screen.getByRole('radio', { name: 'One' });
+        one.focus();
+        await fireEvent.keyDown(one, { key: 'ArrowRight' });
+        expect(screen.getByRole('radio', { name: 'Zero' })).toBeChecked();
+        expect(screen.getByRole('radio', { name: 'Zero' })).toHaveFocus();
+        await fireEvent.keyDown(screen.getByRole('radio', { name: 'Zero' }), {
+            key: 'Home',
+        });
+        expect(one).toBeChecked();
+        expect(screen.getByRole('radio', { name: 'Disabled' })).toBeDisabled();
+    });
+});

package/dist/components/forms/__tests__/signature-pad-logic.test.js

@@ -0,0 +1,54 @@
+/**
+ * Pure SignaturePad input logic, no DOM (smrt#3290). Ported from teamworks-os
+ * `signature-pad-logic.test.ts`.
+ */
+import { describe, expect, it } from 'vitest';
+import { isAcceptedPointerType, mapPointerToCanvasPoint, } from '../signature-pad-logic.js';
+describe('isAcceptedPointerType', () => {
+    it('accepts only pen input when stylusOnly is true', () => {
+        expect(isAcceptedPointerType('pen', true)).toBe(true);
+        expect(isAcceptedPointerType('touch', true)).toBe(false);
+        expect(isAcceptedPointerType('mouse', true)).toBe(false);
+    });
+    it('accepts pen, touch, and mouse when stylusOnly is false', () => {
+        expect(isAcceptedPointerType('pen', false)).toBe(true);
+        expect(isAcceptedPointerType('touch', false)).toBe(true);
+        expect(isAcceptedPointerType('mouse', false)).toBe(true);
+    });
+    it('rejects unknown and empty pointer types in both modes', () => {
+        for (const stylusOnly of [true, false]) {
+            expect(isAcceptedPointerType('unknown', stylusOnly)).toBe(false);
+            expect(isAcceptedPointerType('', stylusOnly)).toBe(false);
+        }
+    });
+});
+describe('mapPointerToCanvasPoint', () => {
+    it('subtracts the rect offset unscaled when display and backing sizes match', () => {
+        const rect = { left: 10, top: 20, width: 600, height: 240 };
+        expect(mapPointerToCanvasPoint(110, 70, rect, 600, 240)).toEqual({
+            x: 100,
+            y: 50,
+        });
+    });
+    it('scales up when displayed smaller than the backing resolution', () => {
+        const rect = { left: 0, top: 0, width: 300, height: 120 };
+        expect(mapPointerToCanvasPoint(30, 12, rect, 600, 240)).toEqual({
+            x: 60,
+            y: 24,
+        });
+    });
+    it('scales down when displayed larger than the backing resolution', () => {
+        const rect = { left: 0, top: 0, width: 1200, height: 480 };
+        expect(mapPointerToCanvasPoint(1200, 480, rect, 600, 240)).toEqual({
+            x: 600,
+            y: 240,
+        });
+    });
+    it('falls back to 1:1 for a zero-size (not laid out) rect', () => {
+        const rect = { left: 5, top: 5, width: 0, height: 0 };
+        expect(mapPointerToCanvasPoint(15, 25, rect, 600, 240)).toEqual({
+            x: 10,
+            y: 20,
+        });
+    });
+});

package/dist/components/forms/__tests__/touch-density.fixture.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+import ThemeProvider from '../../../themes/ThemeProvider.svelte';
+import DataTable from '../../data/DataTable.svelte';
+import FilterChips from '../../nav/FilterChips.svelte';
+import Button from '../../ui/Button.svelte';
+import Checkbox from '../Checkbox.svelte';
+import Input from '../Input.svelte';
+import Radio from '../Radio.svelte';
+import RadioGroup from '../RadioGroup.svelte';
+import SegmentedControl from '../SegmentedControl.svelte';
+import Select from '../Select.svelte';
+import Switch from '../Switch.svelte';
+import Textarea from '../Textarea.svelte';
+
+let {
+  density = 'touch',
+  target = '48px',
+}: { density?: 'comfortable' | 'touch'; target?: string } = $props();
+</script>
+<ThemeProvider {density} overrides={{ '--smrt-touch-target-min': target }} persist={false} inlineVariables>
+  <Input aria-label="Name" name="name" size={12} />
+  <Select aria-label="Choice"><option value="one">One</option></Select>
+  <Textarea aria-label="Notes" />
+  <Checkbox label="Approve" />
+  <Switch label="Enable" />
+  <RadioGroup name="radio" label="Radio"><Radio value="one" label="Option one" /></RadioGroup>
+  <Button size="sm">Save</Button>
+  <Button href="/details" size="sm">Details</Button>
+  <FilterChips size="sm" options={[{ value: 'one', label: 'One' }, { value: 'off', label: 'Disabled', disabled: true }]} selected="one" />
+  <SegmentedControl label="Segments" options={[{ value: 'one', label: 'One' }, { value: 'two', label: 'Two' }]} />
+  <DataTable data={[{ id: 'one', title: 'Item' }]} columns={[{ id: 'title', label: 'Title', sortable: true }]} sortable rowKey="id" />
+  <Input aria-label="Local touch" density="touch" />
+  <Input aria-label="Local comfortable" density="comfortable" />
+</ThemeProvider>

package/dist/components/forms/__tests__/touch-density.fixture.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    density?: 'comfortable' | 'touch';
+    target?: string;
+};
+declare const TouchDensity: import("svelte").Component<$$ComponentProps, {}, "">;
+type TouchDensity = ReturnType<typeof TouchDensity>;
+export default TouchDensity;
+//# sourceMappingURL=touch-density.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/touch-density.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"touch-density.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/touch-density.fixture.svelte.ts"],"names":[],"mappings":"AAgBC,KAAK,gBAAgB,GAAI;IAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAsCjF,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/forms/__tests__/touch-density.test.js

@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import DataTable from '../../data/DataTable.svelte';
+import FilterChips from '../../nav/FilterChips.svelte';
+import Button from '../../ui/Button.svelte';
+import Checkbox from '../Checkbox.svelte';
+import Input from '../Input.svelte';
+import RadioGroup from '../RadioGroup.svelte';
+import SegmentedControl from '../SegmentedControl.svelte';
+import Select from '../Select.svelte';
+import Switch from '../Switch.svelte';
+import Textarea from '../Textarea.svelte';
+import TouchDensityFixture from './touch-density.fixture.svelte';
+describe('touch density', () => {
+    beforeEach(() => {
+        window.matchMedia = vi.fn().mockReturnValue({
+            matches: false,
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+        });
+    });
+    it.each([
+        ['Input', Input, {}],
+        [
+            'RadioGroup',
+            RadioGroup,
+            {
+                name: 'choice',
+                children: createRawSnippet(() => ({
+                    render: () => '<span>Options</span>',
+                })),
+            },
+        ],
+        [
+            'Select',
+            Select,
+            {
+                children: createRawSnippet(() => ({
+                    render: () => '<option value="one">One</option>',
+                })),
+            },
+        ],
+        ['Textarea', Textarea, {}],
+        ['Checkbox', Checkbox, {}],
+        ['Switch', Switch, {}],
+        ['Button', Button, {}],
+        ['FilterChips', FilterChips, { options: [], selected: '' }],
+        ['SegmentedControl', SegmentedControl, { options: [], label: 'Segments' }],
+        ['DataTable', DataTable, { columns: [], data: [] }],
+    ])('%s consumes density on its target root', (_name, component, props) => {
+        const { container } = render(component, {
+            props: { ...props, density: 'touch' },
+        });
+        expect(container.querySelector('[data-density="touch"]')).toBeTruthy();
+        expect(container.querySelector('[density]')).toBeNull();
+    });
+    it('inherits global density while preserving native size and local overrides', () => {
+        const { container } = render(TouchDensityFixture);
+        expect(container.querySelector('.smrt-theme-root')).toHaveAttribute('style', expect.stringContaining('--smrt-control-target-min: var(--smrt-touch-target-min, 48px)'));
+        expect(screen.getByRole('textbox', { name: 'Name' })).toHaveAttribute('size', '12');
+        expect(screen.getByRole('textbox', { name: 'Name' })).not.toHaveAttribute('data-density');
+        expect(screen.getByRole('textbox', { name: 'Local comfortable' })).toHaveAttribute('data-density', 'comfortable');
+        expect(screen.getByRole('textbox', { name: 'Local touch' })).toHaveAttribute('data-density', 'touch');
+    });
+});

package/dist/components/forms/audio-capture.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Record a short spoken message with `MediaRecorder`, for dictation in
+ * browsers whose speech recognition is missing or broken (Firefox, Brave).
+ *
+ * The recording is compressed by the browser: WebM/Opus where supported
+ * (Chrome, Edge, Firefox, Brave), MP4/AAC on Safari. It stops by itself at
+ * `maxDurationMs` (the recording so far is kept) and fails when it grows past
+ * `maxBytes`, so a forgotten microphone cannot fill memory or exceed what the
+ * server accepts. The audio stays in memory; nothing is written or logged.
+ */
+/** MIME types tried in order; the first `MediaRecorder` supports wins. */
+export declare const DICTATION_AUDIO_MIME_TYPES: readonly string[];
+/** Default cap on a recording's length: 2 minutes. */
+export declare const DICTATION_MAX_DURATION_MS = 120000;
+/** Default cap on a recording's size: 10 MB. */
+export declare const DICTATION_MAX_BYTES: number;
+/** A finished recording. */
+export interface DictationRecording {
+    audio: Blob;
+    /** The recording's MIME type, e.g. `audio/webm;codecs=opus`. */
+    mimeType: string;
+    /** How long it recorded, in milliseconds. */
+    durationMs: number;
+    /** Whether it stopped because it reached `maxDurationMs`. */
+    reachedTimeLimit: boolean;
+}
+/** Records one message. `Dictation` creates a fresh one per message. */
+export interface DictationAudioCapture {
+    /** Opens the microphone and starts recording. Rejects when it cannot. */
+    start(): Promise<void>;
+    /** Stops recording and resolves with the audio. */
+    stop(): Promise<DictationRecording>;
+    /** Stops recording and throws the audio away. */
+    cancel(): void;
+    /**
+     * Called when the recording stops by itself: `time` (reached
+     * `maxDurationMs`; `stop()` still returns the audio) or `size` (grew past
+     * `maxBytes`; `stop()` rejects with a `too-long` `DictationError`).
+     */
+    onLimit(callback: (reason: 'time' | 'size') => void): () => void;
+}
+export interface DictationAudioCaptureOptions {
+    /** Default {@link DICTATION_MAX_DURATION_MS}. */
+    maxDurationMs?: number;
+    /** Default {@link DICTATION_MAX_BYTES}. */
+    maxBytes?: number;
+    /** MIME types to try, in order. Default {@link DICTATION_AUDIO_MIME_TYPES}. */
+    mimeTypes?: readonly string[];
+    /** Media constraints for `getUserMedia`. Default `{ audio: true }`. */
+    constraints?: MediaStreamConstraints;
+}
+/** Creates a recorder for one message. */
+export type DictationAudioCaptureFactory = (options: DictationAudioCaptureOptions) => DictationAudioCapture;
+/**
+ * An error that already knows which plain-words message it needs.
+ * `classifyDictationError` reads `dictationKind` first.
+ */
+export declare class DictationError extends Error {
+    readonly dictationKind: string;
+    readonly code: string;
+    constructor(dictationKind: string, message: string, code?: string);
+}
+/** Whether this browser can record audio for dictation. */
+export declare function canCaptureDictationAudio(): boolean;
+/** The first MIME type `MediaRecorder` can record, or `''` (its default). */
+export declare function pickDictationMimeType(candidates?: readonly string[]): string;
+/** Records with `MediaRecorder` (see the module comment). */
+export declare const createMediaRecorderCapture: DictationAudioCaptureFactory;
+//# sourceMappingURL=audio-capture.d.ts.map

package/dist/components/forms/audio-capture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio-capture.d.ts","sourceRoot":"","sources":["../../../src/components/forms/audio-capture.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,0EAA0E;AAC1E,eAAO,MAAM,0BAA0B,EAAE,SAAS,MAAM,EAKvD,CAAC;AAEF,sDAAsD;AACtD,eAAO,MAAM,yBAAyB,SAAU,CAAC;AAEjD,gDAAgD;AAChD,eAAO,MAAM,mBAAmB,QAAmB,CAAC;AAEpD,4BAA4B;AAC5B,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,IAAI,CAAC;IACZ,gEAAgE;IAChE,QAAQ,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,wEAAwE;AACxE,MAAM,WAAW,qBAAqB;IACpC,yEAAyE;IACzE,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACvB,mDAAmD;IACnD,IAAI,IAAI,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACpC,iDAAiD;IACjD,MAAM,IAAI,IAAI,CAAC;IACf;;;;OAIG;IACH,OAAO,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CAClE;AAED,MAAM,WAAW,4BAA4B;IAC3C,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+EAA+E;IAC/E,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,uEAAuE;IACvE,WAAW,CAAC,EAAE,sBAAsB,CAAC;CACtC;AAED,0CAA0C;AAC1C,MAAM,MAAM,4BAA4B,GAAG,CACzC,OAAO,EAAE,4BAA4B,KAClC,qBAAqB,CAAC;AAK3B;;;GAGG;AACH,qBAAa,cAAe,SAAQ,KAAK;IACvC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;gBAEV,aAAa,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM;CAMlE;AASD,2DAA2D;AAC3D,wBAAgB,wBAAwB,IAAI,OAAO,CAMlD;AAED,6EAA6E;AAC7E,wBAAgB,qBAAqB,CACnC,UAAU,GAAE,SAAS,MAAM,EAA+B,GACzD,MAAM,CAOR;AAED,6DAA6D;AAC7D,eAAO,MAAM,0BAA0B,EAAE,4BA+IxC,CAAC"}

package/dist/components/forms/audio-capture.js

@@ -0,0 +1,193 @@
+/**
+ * Record a short spoken message with `MediaRecorder`, for dictation in
+ * browsers whose speech recognition is missing or broken (Firefox, Brave).
+ *
+ * The recording is compressed by the browser: WebM/Opus where supported
+ * (Chrome, Edge, Firefox, Brave), MP4/AAC on Safari. It stops by itself at
+ * `maxDurationMs` (the recording so far is kept) and fails when it grows past
+ * `maxBytes`, so a forgotten microphone cannot fill memory or exceed what the
+ * server accepts. The audio stays in memory; nothing is written or logged.
+ */
+/** MIME types tried in order; the first `MediaRecorder` supports wins. */
+export const DICTATION_AUDIO_MIME_TYPES = [
+    'audio/webm;codecs=opus',
+    'audio/webm',
+    'audio/mp4',
+    'audio/ogg;codecs=opus',
+];
+/** Default cap on a recording's length: 2 minutes. */
+export const DICTATION_MAX_DURATION_MS = 120_000;
+/** Default cap on a recording's size: 10 MB. */
+export const DICTATION_MAX_BYTES = 10 * 1024 * 1024;
+/**
+ * An error that already knows which plain-words message it needs.
+ * `classifyDictationError` reads `dictationKind` first.
+ */
+export class DictationError extends Error {
+    dictationKind;
+    code;
+    constructor(dictationKind, message, code) {
+        super(message);
+        this.name = 'DictationError';
+        this.dictationKind = dictationKind;
+        this.code = code ?? dictationKind;
+    }
+}
+/** How long `stop()` waits for the recorder's `stop` event. */
+const STOP_EVENT_TIMEOUT_MS = 3000;
+function captureError(kind, message) {
+    return new DictationError(kind, message);
+}
+/** Whether this browser can record audio for dictation. */
+export function canCaptureDictationAudio() {
+    return (typeof MediaRecorder !== 'undefined' &&
+        typeof navigator !== 'undefined' &&
+        typeof navigator.mediaDevices?.getUserMedia === 'function');
+}
+/** The first MIME type `MediaRecorder` can record, or `''` (its default). */
+export function pickDictationMimeType(candidates = DICTATION_AUDIO_MIME_TYPES) {
+    if (typeof MediaRecorder === 'undefined')
+        return '';
+    const supports = typeof MediaRecorder.isTypeSupported === 'function'
+        ? (type) => MediaRecorder.isTypeSupported(type)
+        : () => false;
+    return candidates.find((type) => supports(type)) ?? '';
+}
+/** Records with `MediaRecorder` (see the module comment). */
+export const createMediaRecorderCapture = (options = {}) => {
+    const maxDurationMs = options.maxDurationMs ?? DICTATION_MAX_DURATION_MS;
+    const maxBytes = options.maxBytes ?? DICTATION_MAX_BYTES;
+    const limitListeners = new Set();
+    let stream = null;
+    let recorder = null;
+    let chunks = [];
+    let bytes = 0;
+    let startedAt = 0;
+    let endedAt = 0;
+    let timer = null;
+    let reachedTimeLimit = false;
+    let tooBig = false;
+    let cancelled = false;
+    let stopped = null;
+    let resolveStopped = null;
+    const emitLimit = (reason) => {
+        for (const listener of limitListeners) {
+            try {
+                listener(reason);
+            }
+            catch {
+                // A broken listener must not keep the microphone open.
+            }
+        }
+    };
+    const release = () => {
+        if (timer)
+            clearTimeout(timer);
+        timer = null;
+        for (const track of stream?.getTracks() ?? [])
+            track.stop();
+        stream = null;
+    };
+    const halt = () => {
+        endedAt ||= Date.now();
+        if (recorder && recorder.state !== 'inactive') {
+            try {
+                recorder.stop();
+            }
+            catch {
+                resolveStopped?.();
+            }
+        }
+        else {
+            resolveStopped?.();
+        }
+        release();
+    };
+    return {
+        async start() {
+            if (!canCaptureDictationAudio()) {
+                throw captureError('unsupported', 'This browser cannot record audio (no MediaRecorder).');
+            }
+            stream = await navigator.mediaDevices.getUserMedia(options.constraints ?? { audio: true });
+            if (cancelled) {
+                release();
+                return;
+            }
+            const mimeType = pickDictationMimeType(options.mimeTypes);
+            try {
+                recorder = mimeType
+                    ? new MediaRecorder(stream, { mimeType })
+                    : new MediaRecorder(stream);
+            }
+            catch (error) {
+                release();
+                throw error;
+            }
+            stopped = new Promise((resolve) => {
+                resolveStopped = resolve;
+            });
+            recorder.addEventListener('dataavailable', (event) => {
+                if (!event.data || event.data.size === 0 || cancelled)
+                    return;
+                chunks.push(event.data);
+                bytes += event.data.size;
+                if (bytes > maxBytes && !tooBig) {
+                    tooBig = true;
+                    chunks = [];
+                    emitLimit('size');
+                    halt();
+                }
+            });
+            recorder.addEventListener('stop', () => resolveStopped?.());
+            recorder.addEventListener('error', () => halt());
+            // Hand over data every second so the size cap is checked as it grows.
+            recorder.start(1000);
+            startedAt = Date.now();
+            timer = setTimeout(() => {
+                reachedTimeLimit = true;
+                emitLimit('time');
+                halt();
+            }, maxDurationMs);
+        },
+        async stop() {
+            if (!recorder) {
+                release();
+                throw captureError('unsupported', 'Recording never started.');
+            }
+            halt();
+            // A browser that never fires the recorder's `stop` event must not leave
+            // the field stuck "writing it down": give up waiting and use the audio
+            // that has arrived.
+            let giveUp;
+            await Promise.race([
+                stopped,
+                new Promise((resolve) => {
+                    giveUp = setTimeout(resolve, STOP_EVENT_TIMEOUT_MS);
+                }),
+            ]);
+            if (giveUp)
+                clearTimeout(giveUp);
+            const type = recorder.mimeType || pickDictationMimeType(options.mimeTypes);
+            const recording = {
+                audio: new Blob(chunks, type ? { type } : undefined),
+                mimeType: type || 'audio/webm',
+                durationMs: Math.max(0, (endedAt || Date.now()) - startedAt),
+                reachedTimeLimit,
+            };
+            chunks = [];
+            if (tooBig || recording.audio.size > maxBytes) {
+                throw captureError('too-long', 'The recording is too large to send.');
+            }
+            return recording;
+        },
+        cancel() {
+            cancelled = true;
+            chunks = [];
+            halt();
+        },
+        onLimit(callback) {
+            limitListeners.add(callback);
+            return () => limitListeners.delete(callback);
+        },
+    };
+};

package/dist/components/forms/camera-capture-session.d.ts

@@ -0,0 +1,81 @@
+/**
+ * Framework-free `getUserMedia()` lifecycle for `CameraCapture.svelte`.
+ *
+ * Owns exactly one acquired `MediaStream`: requesting it, classifying a
+ * rejection into one of the states the component renders, and releasing every
+ * track it acquired. It never touches a `<video>` or `<canvas>`, so permission
+ * denied, no camera, unsupported browser and stream cleanup are unit-testable
+ * against a fake `MediaDevices` with no DOM at all. The component stays thin
+ * DOM glue around it.
+ *
+ * Guards one race a naive "await getUserMedia, then store the stream" misses:
+ * the user can dismiss the permission prompt late, or the component can be
+ * disabled or unmounted, while `getUserMedia()` is still pending. Storing that
+ * late result would leave the camera light on with nothing left to stop it.
+ * `stop()` and every new `start()` bump a generation counter; `start()`
+ * compares the generation it was issued under once the promise settles and
+ * discards a stale result, stopping any tracks it just acquired.
+ *
+ * Ported from teamworks-os (`camera-capture-session.ts` and
+ * `camera-capture-logic.ts`), smrt#3290.
+ */
+/** Camera facing mode requested from `getUserMedia()`. */
+export type CameraFacingMode = 'environment' | 'user';
+/** The failure states a camera request can surface. */
+export type CameraCaptureErrorKind = 'permission-denied' | 'no-camera' | 'unsupported' | 'error';
+/**
+ * Structural stand-in for `{ mediaDevices?: MediaDevices }`. lib.dom types
+ * `Navigator.mediaDevices` as always present, but a browser without camera
+ * support (or a page outside a secure context) leaves it `undefined`.
+ */
+export interface MaybeMediaDevicesHost {
+    mediaDevices?: {
+        getUserMedia?: unknown;
+    } | undefined;
+}
+/** The part of `MediaDevices` the session needs. */
+export interface MediaDevicesLike {
+    getUserMedia(constraints: MediaStreamConstraints): Promise<MediaStream>;
+}
+/** Result of one `start()` call. `cancelled` means a `stop()` superseded it. */
+export type CameraSessionResult = {
+    ok: true;
+    stream: MediaStream;
+} | {
+    ok: false;
+    kind: CameraCaptureErrorKind | 'cancelled';
+    /** Diagnostic message from the rejection; not localized, not for display. */
+    message: string;
+};
+export interface CameraSessionDeps {
+    /**
+     * `navigator.mediaDevices`, resolved by the caller (`undefined` when the
+     * browser has none) so this module never reaches for a global itself.
+     */
+    mediaDevices: MediaDevicesLike | undefined;
+}
+/**
+ * Whether this runtime exposes `getUserMedia` at all. An unsupported browser is
+ * never reported as "no camera": those states need different recovery copy.
+ */
+export declare function isCameraApiSupported(nav: MaybeMediaDevicesHost | undefined): boolean;
+/**
+ * Maps a `getUserMedia()` rejection to a rendered state by `DOMException.name`
+ * (the cross-browser contract), never by message text.
+ *
+ * Deliberately does not gate on `instanceof Error`: a browser `DOMException`
+ * does not inherit from `Error` in shipping engines, so that check would send
+ * every real rejection to the generic state. Node's `DOMException` happening to
+ * extend `Error` is what hides that bug in local tests.
+ */
+export declare function classifyGetUserMediaError(error: unknown): CameraCaptureErrorKind;
+/** Create a session that owns at most one live camera stream. */
+export declare function createCameraSession(deps: CameraSessionDeps): {
+    start: (facingMode: CameraFacingMode) => Promise<CameraSessionResult>;
+    stop: () => void;
+    /** The live stream, or `null` when none is held. */
+    readonly stream: MediaStream | null;
+};
+/** A camera session created by {@link createCameraSession}. */
+export type CameraSession = ReturnType<typeof createCameraSession>;
+//# sourceMappingURL=camera-capture-session.d.ts.map

package/dist/components/forms/camera-capture-session.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"camera-capture-session.d.ts","sourceRoot":"","sources":["../../../src/components/forms/camera-capture-session.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,0DAA0D;AAC1D,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,MAAM,CAAC;AAEtD,uDAAuD;AACvD,MAAM,MAAM,sBAAsB,GAC9B,mBAAmB,GACnB,WAAW,GACX,aAAa,GACb,OAAO,CAAC;AAEZ;;;;GAIG;AACH,MAAM,WAAW,qBAAqB;IACpC,YAAY,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,SAAS,CAAC;CACvD;AAED,oDAAoD;AACpD,MAAM,WAAW,gBAAgB;IAC/B,YAAY,CAAC,WAAW,EAAE,sBAAsB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;CACzE;AAED,gFAAgF;AAChF,MAAM,MAAM,mBAAmB,GAC3B;IAAE,EAAE,EAAE,IAAI,CAAC;IAAC,MAAM,EAAE,WAAW,CAAA;CAAE,GACjC;IACE,EAAE,EAAE,KAAK,CAAC;IACV,IAAI,EAAE,sBAAsB,GAAG,WAAW,CAAC;IAC3C,6EAA6E;IAC7E,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEN,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,YAAY,EAAE,gBAAgB,GAAG,SAAS,CAAC;CAC5C;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,qBAAqB,GAAG,SAAS,GACrC,OAAO,CAET;AAUD;;;;;;;;GAQG;AACH,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,OAAO,GACb,sBAAsB,CAaxB;AAMD,iEAAiE;AACjE,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,iBAAiB;wBAgB3C,gBAAgB,KAC3B,OAAO,CAAC,mBAAmB,CAAC;gBAuCd,IAAI;IASnB,oDAAoD;qBACtC,WAAW,GAAG,IAAI;EAInC;AAED,+DAA+D;AAC/D,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC"}