Release 0.3.16

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Y42TyF8Zu7NGRR2893vNcZ

Cargo.lock

@@ -2948,7 +2948,7 @@ dependencies = [
 
 [[package]]
 name = "portal"
-version = "0.3.9"
+version = "0.3.16"
 dependencies = [
  "anyhow",
  "arc-swap",

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "portal"
-version = "0.3.9"
+version = "0.3.16"
 edition = "2021"
 
 [lib]

README.md

@@ -39,6 +39,16 @@ stream.
   `requires_chain` gates a page on verifiable answer provenance next
   to `qualifies`' Kanidm-group identity gate (see
   `docs/design/filesystem-routes.md`).
+- **Gesture and voice fields** (`gesture.js`, `voice.js`): a stroke
+  becomes a redoal gesture key through a relay (ADR-0013/0015 in the
+  redoal repo) - the input shows the key's own decode under the
+  stroke, who is at a similar shape now, and *places* with recordings
+  the visitor can pick to make that key theirs; a voice field records
+  in the browser and leaves the audio at a key. Actions may be
+  templated from the answer (`/shape/{curve.key}`) onto dynamic
+  pages, whose URL segment also fills `value: "{key}"` presets and
+  `url` resource sources; resource items with an https `audio` field
+  render a player.
 - **Announced pages** (`src/announce.rs`): a question with an
   `event: {starts, duration, place}` window is announced in the
   header (not the footer nav) while the window is open, becomes a

gesture.js

@@ -274,6 +274,10 @@ class GestureWidget {
             this.selected = null;
         } else {
             this.selected = { key, path: JSON.parse(thumb.dataset.path), distance: Number(thumb.dataset.distance) };
+            // The relay counts picks per place for ranking.
+            if (this.ws && this.ws.readyState === WebSocket.OPEN && this.ownKey) {
+                this.ws.send(JSON.stringify({ type: 'select', key, from: this.ownKey, distance: this.selected.distance }));
+            }
         }
         this.applySelection();
     }

src/announce.rs

@@ -92,6 +92,18 @@ pub async fn sweep(state: &AppState) -> anyhow::Result<()> {
             Some(a) => a,
         };
 
+        // Content is the source of truth while the window is still
+        // open: a corrected date or place flows into the record, so the
+        // followup fires on the schedule the page actually announces.
+        if answer.state == schema.initial && answer.responses != responses {
+            let mut refreshed = answer.clone();
+            refreshed.responses = responses.clone();
+            if let Some(store) = &store {
+                store.put(&id, serde_json::to_vec(&refreshed)?.into()).await?;
+                tracing::info!(question = %q.id, "event record refreshed from content");
+            }
+        }
+
         if answer.state == schema.initial && now_ms >= ends {
             let target = "awaiting_summary";
             let payload = serde_json::json!({ "to": target, "item": id, "by": "portal" });

src/app.rs

@@ -498,6 +498,28 @@ mod prosekit {
 // prosekit's hidden-input bridge for the value, yes.js's typed-handle
 // lifecycle for cleanup - it may own a live WebSocket to a
 // redoal-relay, which SPA navigation must close (`stop()`).
+#[cfg(feature = "hydrate")]
+#[cfg(feature = "hydrate")]
+mod voice {
+    use wasm_bindgen::prelude::*;
+
+    #[wasm_bindgen(module = "/voice.js")]
+    extern "C" {
+        pub type VoiceWidget;
+
+        #[wasm_bindgen(js_name = mountVoice)]
+        pub fn mount_voice(
+            container: &web_sys::HtmlDivElement,
+            hidden: &web_sys::HtmlInputElement,
+            relay_url: &str,
+            key: &str,
+        ) -> VoiceWidget;
+
+        #[wasm_bindgen(method)]
+        pub fn stop(this: &VoiceWidget);
+    }
+}
+
 #[cfg(feature = "hydrate")]
 mod gesture {
     use wasm_bindgen::prelude::*;
@@ -766,12 +788,16 @@ fn AlternativeCard(
                     .or_insert_with(|| RwSignal::new(Vec::new()));
                 select_multi.insert(req.name.clone(), req.multiple);
             } else {
-                if req.kind == "gesture" {
+                // Widget-owned fields hold JSON objects, not strings.
+                if req.kind == "gesture" || req.kind == "voice" {
                     gesture_fields.insert(req.name.clone());
                 }
+                // A voice field's preset is the key it records at,
+                // not a value to submit.
+                let preset = if req.kind == "voice" { String::new() } else { req.value.clone().unwrap_or_default() };
                 field_map
                     .entry(req.name.clone())
-                    .or_insert_with(|| RwSignal::new(String::new()));
+                    .or_insert_with(|| RwSignal::new(preset));
             }
         }
     }
@@ -1138,6 +1164,54 @@ fn AlternativeCard(
                                                     .into_any();
                                                 }
 
+                                                if req.kind == "voice" {
+                                                    let container_ref: NodeRef<leptos::html::Div> = NodeRef::new();
+                                                    let hidden_ref: NodeRef<leptos::html::Input> = NodeRef::new();
+
+                                                    #[cfg(feature = "hydrate")]
+                                                    {
+                                                        let relay = req.relay.clone().unwrap_or_default();
+                                                        let key = req.value.clone().unwrap_or_default();
+                                                        let widget: StoredValue<Option<voice::VoiceWidget>, LocalStorage> =
+                                                            StoredValue::new_local(None);
+                                                        Effect::new(move |_| {
+                                                            let (Some(container), Some(hidden)) =
+                                                                (container_ref.get(), hidden_ref.get())
+                                                            else {
+                                                                return;
+                                                            };
+                                                            if widget.with_value(|w| w.is_some()) {
+                                                                return;
+                                                            }
+                                                            widget.set_value(Some(voice::mount_voice(
+                                                                &container, &hidden, &relay, &key,
+                                                            )));
+                                                        });
+                                                        on_cleanup(move || {
+                                                            widget.update_value(|opt| {
+                                                                if let Some(w) = opt.take() {
+                                                                    w.stop();
+                                                                }
+                                                            });
+                                                        });
+                                                    }
+
+                                                    return view! {
+                                                        <div class="field">
+                                                            {label_text}
+                                                            <input
+                                                                id=field_id
+                                                                type="hidden"
+                                                                node_ref=hidden_ref
+                                                                prop:value=move || sig.get()
+                                                                on:input=move |ev| sig.set(event_target_value(&ev))
+                                                            />
+                                                            <div class="voice-wrap" node_ref=container_ref></div>
+                                                        </div>
+                                                    }
+                                                    .into_any();
+                                                }
+
                                                 if req.kind == "prosekit" {
                                                     let container_ref: NodeRef<leptos::html::Div> = NodeRef::new();
                                                     let hidden_ref: NodeRef<leptos::html::Input> = NodeRef::new();
@@ -1170,6 +1244,20 @@ fn AlternativeCard(
                                                     .into_any();
                                                 }
 
+                                                if req.kind == "hidden" {
+                                                    // A carrier value only — no label row, or a
+                                                    // preset key reads as a second visible field.
+                                                    return view! {
+                                                        <input
+                                                            id=field_id
+                                                            type="hidden"
+                                                            prop:value=move || sig.get()
+                                                            on:input=move |ev| sig.set(event_target_value(&ev))
+                                                        />
+                                                    }
+                                                    .into_any();
+                                                }
+
                                                 view! {
                                                     <label class="field" for=label_for>
                                                         {label_text}
@@ -1454,8 +1542,11 @@ fn ItemCard(item: serde_json::Value) -> impl IntoView {
     let name = text_field(&obj, &["name", "title"]);
     let description = text_field(&obj, &["description"]);
     let url = text_field(&obj, &["url", "html_url"]);
+    // A playable recording (an https URL to audio) renders as a
+    // player, not a link - the relay's /blob/<digest>.wav.
+    let audio = text_field(&obj, &["audio"]).filter(|a| a.starts_with("https://"));
 
-    let known = ["name", "title", "description", "url", "html_url"];
+    let known = ["name", "title", "description", "url", "html_url", "audio"];
     let extra: Vec<(String, String)> = obj
         .iter()
         .filter(|(k, v)| !known.contains(&k.as_str()) && !v.is_null())
@@ -1495,6 +1586,7 @@ fn ItemCard(item: serde_json::Value) -> impl IntoView {
                     }
                 })}
             {description.map(|d| view! { <p class="item-card-description">{d}</p> })}
+            {audio.map(|src| view! { <audio class="item-card-audio" controls preload="none" src=src></audio> })}
             {(!extra.is_empty())
                 .then(|| {
                     view! {

src/content.rs

@@ -439,7 +439,13 @@ pub struct Requirement {
     /// the selected file's current content.
     #[serde(default)]
     pub bind: Option<Bind>,
-    /// `type: gesture` only - ws(s):// URL of a redoal-relay instance
+    /// A preset value the field starts with. On a dynamic page the
+    /// URL segment substitutes into `{name}` placeholders here, like
+    /// resource keys - `value: "{key}"` on a hidden field carries the
+    /// page's key into the answer.
+    #[serde(default)]
+    pub value: Option<String>,
+    /// `type: gesture` / `type: voice` - ws(s):// URL of a redoal-relay instance
     /// the drawing widget connects to for live echoes of similar
     /// strokes. Absent means the widget works offline: the drawn path
     /// still submits, it just never gets a network-computed key or
@@ -817,15 +823,26 @@ pub fn resolve_question(
                     }
                 }
             };
+            // A url source's address takes the segment too:
+            // `https://relay.redoal.com/place/{key}`.
+            let substitute_url = |src: &mut ResourceSource| {
+                if let ResourceSource::Url { url } = src {
+                    for (name, value) in &captures {
+                        *url = url.replace(&format!("{{{name}}}"), value);
+                    }
+                }
+            };
             for alt in &mut resolved.alternatives {
                 for feature in &mut alt.features {
                     if let Some(res) = &mut feature.resource {
                         substitute(&mut res.key);
+                        substitute_url(&mut res.source);
                     }
                     for req in &mut feature.requirements {
                         if let Some(res) = &mut req.resource {
                             substitute(&mut res.key);
                         }
+                        substitute(&mut req.value);
                     }
                 }
             }
@@ -1102,13 +1119,18 @@ pub fn validate_questions(
                         a
                     };
                     let _ = probe;
-                    match resolve_question(questions, &filled) {
+                    // Match the pattern itself: resolve_question would
-                        Some(target) if target.is_dynamic() => continue,
+                    // hand back a clone whose id is already concrete.
-                        _ => anyhow::bail!(
+                    let lands = questions
-                            "question {:?} alternative {:?}: templated action {:?} must land on a dynamic page ([name].yaml)",
+                        .values()
-                            question.id, alternative.name, action
+                        .any(|q| q.is_dynamic() && path_matches(&q.id, &filled).is_some());
-                        ),
+                    if lands {
+                        continue;
                     }
+                    anyhow::bail!(
+                        "question {:?} alternative {:?}: templated action {:?} must land on a dynamic page ([name].yaml)",
+                        question.id, alternative.name, action
+                    );
                 }
                 match questions.get(action) {
                     None => anyhow::bail!(
@@ -1151,9 +1173,9 @@ pub fn validate_questions(
                         );
                     }
                     if let Some(relay) = &requirement.relay {
-                        if requirement.kind != "gesture" {
+                        if requirement.kind != "gesture" && requirement.kind != "voice" {
                             anyhow::bail!(
-                                "question {:?} alternative {:?} feature {:?}: requirement {:?} declares relay but is type {:?} - relay only makes sense on type: gesture",
+                                "question {:?} alternative {:?} feature {:?}: requirement {:?} declares relay but is type {:?} - relay only makes sense on type: gesture or voice",
                                 question.id, alternative.name, feature.name, requirement.name, requirement.kind
                             );
                         }
@@ -2008,6 +2030,22 @@ alternatives:
         assert_eq!(render_inline_markdown("[mail](mailto:bl@uhhm.no)"), "<a href=\"mailto:bl@uhhm.no\">mail</a>");
     }
 
+    #[test]
+    fn templated_action_validates_against_the_dynamic_page() {
+        let landing: Question = serde_yaml::from_str(
+            "id: /\nname: L\nalternatives:\n  - name: A\n    action: /shape/{curve.key}\n",
+        )
+        .unwrap();
+        let place: Question = serde_yaml::from_str("id: /shape/[key]\nname: P\n").unwrap();
+        let mut qs = std::collections::HashMap::new();
+        qs.insert(landing.id.clone(), landing.clone());
+        qs.insert(place.id.clone(), place);
+        validate_questions(&qs, &Default::default()).unwrap();
+        let mut only_landing = std::collections::HashMap::new();
+        only_landing.insert(landing.id.clone(), landing);
+        assert!(validate_questions(&only_landing, &Default::default()).is_err());
+    }
+
     #[test]
     fn action_templates_from_responses() {
         let r = serde_json::json!({"curve": {"key": "20aa98", "points": [[0,0]]}, "n": 3});
@@ -2019,4 +2057,28 @@ alternatives:
         let odd = serde_json::json!({"k": "a/b c"});
         assert_eq!(template_action("/p/{k}", &odd).as_deref(), Some("/p/a-b-c"));
     }
+
+    #[test]
+    fn dynamic_page_fills_requirement_values() {
+        let q: Question = serde_yaml::from_str(
+            "id: /shape/[key]\nname: P\nalternatives:\n  - name: A\n    features:\n      - name: F\n        requirements:\n          - name: key\n            type: hidden\n            value: \"{key}\"\n",
+        )
+        .unwrap();
+        let mut qs = std::collections::HashMap::new();
+        qs.insert(q.id.clone(), q);
+        let page = resolve_question(&qs, "/shape/20aa98").unwrap();
+        assert_eq!(page.alternatives[0].features[0].requirements[0].value.as_deref(), Some("20aa98"));
+
+        let q: Question = serde_yaml::from_str(
+            "id: /shape/[key]\nname: P\nalternatives:\n  - name: A\n    features:\n      - name: F\n        resource:\n          source: { kind: url, url: \"https://relay.example/place/{key}\" }\n          public: true\n",
+        )
+        .unwrap();
+        let mut qs = std::collections::HashMap::new();
+        qs.insert(q.id.clone(), q);
+        let page = resolve_question(&qs, "/shape/20aa98").unwrap();
+        match &page.alternatives[0].features[0].resource.as_ref().unwrap().source {
+            ResourceSource::Url { url } => assert_eq!(url, "https://relay.example/place/20aa98"),
+            _ => panic!(),
+        }
+    }
 }

style/main.css

@@ -430,10 +430,9 @@ main.not-found {
 }
 
 .feature-icon {
-  float: left;
   width: 1.3rem;
   height: 1.3rem;
-  margin: 0.1rem 0.6rem 0.4rem 0;
+  margin-top: 0.1rem;
   background-color: var(--feature-accent, currentColor);
   mask-repeat: no-repeat;
   mask-size: contain;
@@ -443,11 +442,87 @@ main.not-found {
   -webkit-mask-position: center;
 }
 
+/* With an icon the feature is two columns: the icon in the first,
+   everything else - name, description, fields, resources - in the
+   second, so every line of text shares one left edge instead of
+   wrapping back under the icon. */
+.feature:has(> .feature-icon) {
+  display: grid;
+  grid-template-columns: 1.3rem minmax(0, 1fr);
+  column-gap: 0.7rem;
+  align-items: start;
+}
+
+.feature:has(> .feature-icon) > .feature-icon {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.feature:has(> .feature-icon) > :not(.feature-icon) {
+  grid-column: 2;
+}
+
 .feature h3 {
   font-size: 1rem;
   margin-bottom: 0.15em;
 }
 
+/* voice field (voice.js): a record button, a status line, a preview */
+.voice-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.6rem 1rem;
+}
+
+.voice-button {
+  font: inherit;
+  padding: 0.55rem 1.1rem;
+  border: 0.06rem solid var(--accent);
+  border-radius: 2rem;
+  background: transparent;
+  color: var(--ink);
+  cursor: pointer;
+}
+
+.voice-button:hover:not(:disabled) {
+  background: var(--accent);
+  color: var(--paper);
+}
+
+.voice-button.recording {
+  background: var(--accent);
+  color: var(--paper);
+  animation: voice-pulse 1.2s ease-in-out infinite;
+}
+
+.voice-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+@keyframes voice-pulse {
+  50% { opacity: 0.6; }
+}
+
+.voice-status {
+  font-size: 0.85rem;
+  color: var(--ink-dim);
+}
+
+.voice-preview,
+.item-card-audio {
+  display: block;
+  width: 100%;
+  max-width: 28rem;
+  margin-top: 0.4rem;
+}
+
+/* display:block above would beat the hidden attribute */
+.voice-preview[hidden] {
+  display: none;
+}
+
 /* links inside markdown descriptions */
 .alt-description a,
 .feature p a {

voice.js

@@ -0,0 +1,205 @@
+// A `type: voice` requirement: leave a recording at a gesture key.
+// Same contract as gesture.js - portal mounts it with the field's
+// hidden input and the relay URL, and calls stop() on navigation.
+//
+// The browser records with MediaRecorder (whatever container it
+// likes), decodes that to PCM with WebAudio, resamples to mono 48 kHz,
+// and ships one binary frame `[0x01][20-byte key][i16le PCM]` to the
+// relay, which encodes with the one recording codec, signs as itself,
+// keeps it and announces it (ADR-0015).
+//
+// Nothing leaves the browser until the alternative's own submit
+// ("Keep it here") is pressed: the widget intercepts that click,
+// uploads, sets the field's value to {key, digest, duration_ms} on
+// the relay's confirmation, and only then lets the submit through.
+// A relay error keeps the recording for another try and submits
+// nothing.
+//
+// Palette: colors come from the page's custom properties, no copy here.
+
+const MAX_SECONDS = 60;
+const SAMPLE_RATE = 48000;
+
+class VoiceWidget {
+    constructor(container, hidden, relayUrl, key) {
+        this.container = container;
+        this.hidden = hidden || null;
+        this.relayUrl = relayUrl || '';
+        this.key = (key || '').trim();
+        this.stopped = false;
+        this.recorder = null;
+        this.stream = null;
+        this.chunks = [];
+        this.ws = null;
+
+        this.button = document.createElement('button');
+        this.button.type = 'button';
+        this.button.className = 'voice-button';
+        this.button.textContent = 'Record';
+        this.status = document.createElement('span');
+        this.status.className = 'voice-status';
+        this.preview = document.createElement('audio');
+        this.preview.className = 'voice-preview';
+        this.preview.controls = true;
+        this.preview.hidden = true;
+        container.append(this.button, this.status, this.preview);
+
+        this._onClick = () => this.toggle();
+        this.button.addEventListener('click', this._onClick);
+        this.pcm = null;      // decoded, ready to upload
+        this.published = null;
+        this.passthrough = false;
+        // The alternative's submit button: hold it until the recording
+        // is kept at the relay.
+        this.card = container.closest('.alt-card');
+        this._onSubmit = (e) => this.onSubmitClick(e);
+        if (this.card) this.card.addEventListener('click', this._onSubmit, true);
+        if (!this.key || this.key.length !== 40) {
+            this.button.disabled = true;
+            this.say('This page has no address to leave a voice at.');
+        } else if (!navigator.mediaDevices || !window.MediaRecorder) {
+            this.button.disabled = true;
+            this.say('Recording needs a browser with a microphone API.');
+        }
+    }
+
+    say(text) {
+        this.status.textContent = text;
+    }
+
+    async toggle() {
+        if (this.recorder && this.recorder.state === 'recording') {
+            this.recorder.stop();
+            return;
+        }
+        try {
+            this.stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        } catch {
+            this.say('Microphone access was declined.');
+            return;
+        }
+        this.chunks = [];
+        this.recorder = new MediaRecorder(this.stream);
+        this.recorder.addEventListener('dataavailable', (e) => { if (e.data.size) this.chunks.push(e.data); });
+        this.recorder.addEventListener('stop', () => this.finish());
+        this.recorder.start();
+        this.button.textContent = 'Stop';
+        this.button.classList.add('recording');
+        this.say(`Recording — up to ${MAX_SECONDS} seconds.`);
+        this.capTimer = setTimeout(() => { if (this.recorder && this.recorder.state === 'recording') this.recorder.stop(); }, MAX_SECONDS * 1000);
+    }
+
+    async finish() {
+        clearTimeout(this.capTimer);
+        this.button.textContent = 'Record again';
+        this.button.classList.remove('recording');
+        if (this.stream) { this.stream.getTracks().forEach((t) => t.stop()); this.stream = null; }
+        const blob = new Blob(this.chunks, { type: this.recorder.mimeType || 'audio/webm' });
+        if (!blob.size) { this.say('Nothing was recorded.'); return; }
+        this.preview.src = URL.createObjectURL(blob);
+        this.preview.hidden = false;
+        this.published = null;
+        this.setValue(null);
+        try {
+            this.pcm = await this.toPcm16(await blob.arrayBuffer());
+        } catch (e) {
+            this.pcm = null;
+            this.say('Could not decode the recording — try once more.');
+            return;
+        }
+        this.say(`${Math.round(this.pcm.length / 2 / SAMPLE_RATE)} s recorded. Listen back, then press the button below to keep it here.`);
+    }
+
+    onSubmitClick(e) {
+        const button = e.target.closest && e.target.closest('.alt-submit');
+        if (!button || this.passthrough) return;
+        if (this.published) return; // already kept: let the submit go
+        e.preventDefault();
+        e.stopPropagation();
+        if (!this.pcm) {
+            this.say(this.recorder && this.recorder.state === 'recording' ? 'Stop the recording first.' : 'Record something first.');
+            return;
+        }
+        this.say('Sending to the relay…');
+        this.upload(this.pcm, () => {
+            // The relay confirmed: now the answer itself is submitted.
+            this.passthrough = true;
+            button.click();
+            this.passthrough = false;
+        });
+    }
+
+    // Decode → mono 48 kHz Float32 → Int16 little-endian bytes.
+    async toPcm16(buffer) {
+        const ctx = new (window.AudioContext || window.webkitAudioContext)();
+        const decoded = await ctx.decodeAudioData(buffer);
+        await ctx.close();
+        const frames = Math.ceil(decoded.duration * SAMPLE_RATE);
+        const offline = new OfflineAudioContext(1, frames, SAMPLE_RATE);
+        const src = offline.createBufferSource();
+        src.buffer = decoded;
+        src.connect(offline.destination);
+        src.start();
+        const rendered = await offline.startRendering();
+        const f32 = rendered.getChannelData(0);
+        const out = new Uint8Array(f32.length * 2);
+        const view = new DataView(out.buffer);
+        for (let i = 0; i < f32.length; i++) {
+            const s = Math.max(-1, Math.min(1, f32[i]));
+            view.setInt16(i * 2, s < 0 ? s * 32768 : s * 32767, true);
+        }
+        return out;
+    }
+
+    upload(pcm, onPublished) {
+        if (!this.relayUrl) { this.say('No relay to send to.'); return; }
+        const frame = new Uint8Array(1 + 20 + pcm.length);
+        frame[0] = 1;
+        for (let i = 0; i < 20; i++) frame[1 + i] = parseInt(this.key.substr(i * 2, 2), 16);
+        frame.set(pcm, 21);
+        const ws = new WebSocket(this.relayUrl);
+        ws.binaryType = 'arraybuffer';
+        this.ws = ws;
+        ws.addEventListener('open', () => ws.send(frame));
+        ws.addEventListener('message', (e) => {
+            let msg; try { msg = JSON.parse(e.data); } catch { return; }
+            if (msg.type === 'published') {
+                this.published = { key: this.key, digest: msg.digest, duration_ms: msg.duration_ms };
+                this.setValue(this.published);
+                this.say(`Kept at this address — ${Math.round(msg.duration_ms / 1000)} s.`);
+                this.button.disabled = true;
+                ws.close();
+                if (onPublished) onPublished();
+            } else if (msg.type === 'error') {
+                this.say((msg.message || 'The relay declined the recording.') + ' Your recording is still here — try again.');
+                ws.close();
+            }
+        });
+        ws.addEventListener('error', () => this.say('The relay could not be reached. Your recording is still here — try again.'));
+        ws.addEventListener('close', (e) => {
+            if (!this.published && e.code !== 1000 && e.code !== 1005) {
+                this.say('The relay closed the connection. Your recording is still here — try again.');
+            }
+        });
+    }
+
+    setValue(value) {
+        if (!this.hidden) return;
+        this.hidden.value = value ? JSON.stringify(value) : '';
+        this.hidden.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+
+    stop() {
+        this.stopped = true;
+        clearTimeout(this.capTimer);
+        if (this.recorder && this.recorder.state === 'recording') this.recorder.stop();
+        if (this.stream) this.stream.getTracks().forEach((t) => t.stop());
+        if (this.ws) this.ws.close();
+        this.button.removeEventListener('click', this._onClick);
+        if (this.card) this.card.removeEventListener('click', this._onSubmit, true);
+    }
+}
+
+export function mountVoice(container, hidden, relayUrl, key) {
+    return new VoiceWidget(container, hidden, relayUrl, key);
+}