Release 0.3.32

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.7"
+version = "0.3.31"
 dependencies = [
  "anyhow",
  "arc-swap",
@@ -2970,6 +2970,7 @@ dependencies = [
  "leptos_router",
  "openidconnect",
  "proptest",
+ "pulldown-cmark",
  "serde",
  "serde_json",
  "serde_yaml",
@@ -3104,6 +3105,24 @@ dependencies = [
  "unarray",
 ]
 
+[[package]]
+name = "pulldown-cmark"
+version = "0.13.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e9f068eba8e7071c5f9511831b44f32c740d5adf574e990f946ddb53db2f314e"
+dependencies = [
+ "bitflags 2.13.1",
+ "memchr",
+ "pulldown-cmark-escape",
+ "unicase",
+]
+
+[[package]]
+name = "pulldown-cmark-escape"
+version = "0.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "007d8adb5ddab6f8e3f491ac63566a7d5002cc7ed73901f72057943fa71ae1ae"
+
 [[package]]
 name = "quick-error"
 version = "1.2.3"

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "portal"
-version = "0.3.7"
+version = "0.3.32"
 edition = "2021"
 
 [lib]
@@ -12,6 +12,9 @@ leptos_meta = { version = "0.8" }
 leptos_router = { version = "0.8" }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
+# Inline markdown for content descriptions (links, emphasis, code) -
+# runs on both server and client renders, so not feature-gated.
+pulldown-cmark = { version = "0.13", default-features = false, features = ["html"] }
 
 # --- server only ---
 leptos_axum = { version = "0.8", optional = true }

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

@@ -43,12 +43,86 @@ const MAX_ECHOES = 8;
 const RECONNECT_BASE_MS = 1000;
 const RECONNECT_MAX_MS = 30000;
 
+// ── Convergence animation (ink → what the network heard) ──────────
+//
+// When the ack lands, a glowing copy of the stroke peels off and
+// converges point-by-point onto the key's decoded path: a wave of
+// "being understood" travels from the stroke's start to its end,
+// and the ghost materializes where the light settles. WebGL point
+// sprites with additive glow on a dedicated overlay canvas; the 2d
+// layer underneath never changes its final render, so losing WebGL
+// (or prefers-reduced-motion) degrades to exactly today's behavior.
+const CONVERGE_MS = 1500;
+const CONVERGE_FADE_MS = 450;
+const CONVERGE_POINTS = 128;
+const CONVERGE_STAGGER = 0.6; // fraction of the timeline spent on the travelling wave
+
+const GLOW_VERT = `
+attribute vec2 aFrom;
+attribute vec2 aTo;
+attribute float aIndex;
+uniform float uT;
+uniform vec2 uResolution;
+uniform float uDpr;
+varying float vLife;
+void main() {
+    float lead = aIndex * ${CONVERGE_STAGGER};
+    float p = clamp((uT * ${1.0 + CONVERGE_STAGGER} - lead), 0.0, 1.0);
+    float e = p < 0.5 ? 4.0 * p * p * p : 1.0 - pow(-2.0 * p + 2.0, 3.0) / 2.0;
+    vec2 pos = mix(aFrom, aTo, e);
+    vec2 clip = (pos / uResolution) * 2.0 - 1.0;
+    gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+    float pulse = 1.0 + 1.4 * sin(3.14159 * p);
+    gl_PointSize = 9.0 * uDpr * pulse;
+    vLife = p;
+}`;
+
+const GLOW_FRAG = `
+precision mediump float;
+uniform vec3 uColor;
+uniform float uAlpha;
+varying float vLife;
+void main() {
+    vec2 d = gl_PointCoord - 0.5;
+    float fall = exp(-dot(d, d) * 18.0);
+    float breathe = 0.55 + 0.45 * sin(3.14159 * vLife);
+    gl_FragColor = vec4(uColor, 1.0) * (fall * uAlpha * breathe);
+}`;
+
+// Uniform arc-length resample of a pixel-space polyline to n points.
+function resamplePx(points, n) {
+    if (points.length === 1) return Array(n).fill(points[0]);
+    const dists = [0];
+    for (let i = 1; i < points.length; i++) {
+        const dx = points[i][0] - points[i - 1][0];
+        const dy = points[i][1] - points[i - 1][1];
+        dists.push(dists[i - 1] + Math.hypot(dx, dy));
+    }
+    const total = dists[dists.length - 1] || 1;
+    const out = [];
+    let seg = 0;
+    for (let i = 0; i < n; i++) {
+        const target = (i / (n - 1)) * total;
+        while (seg < points.length - 2 && dists[seg + 1] < target) seg++;
+        const span = dists[seg + 1] - dists[seg] || 1;
+        const t = (target - dists[seg]) / span;
+        out.push([
+            points[seg][0] + (points[seg + 1][0] - points[seg][0]) * t,
+            points[seg][1] + (points[seg + 1][1] - points[seg][1]) * t,
+        ]);
+    }
+    return out;
+}
+
 class GestureWidget {
     constructor(container, hidden, relayUrl) {
         this.container = container;
         this.hidden = hidden || null;
         this.relayUrl = relayUrl || '';
         this.ghost = null;
+        this.ownKey = null;
+        this.selected = null; // {key, path, distance} - a place the visitor picked
+        this.seenKeys = new Set();
         this.points = [];
         this.drawing = false;
         this.stopped = false;
@@ -60,9 +134,25 @@ class GestureWidget {
         this.canvas = document.createElement('canvas');
         this.canvas.className = 'gesture-canvas';
         container.appendChild(this.canvas);
+        // Overlay for the convergence glow; sized with the main canvas,
+        // inert to pointers, empty until an ack arrives.
+        this.glow = document.createElement('canvas');
+        this.glow.className = 'gesture-glow';
+        this.glow.style.position = 'absolute';
+        this.glow.style.pointerEvents = 'none';
+        if (!container.style.position) container.style.position = 'relative';
+        container.appendChild(this.glow);
+        this.gl = null;
+        this.animFrame = null;
+        this.converging = false;
         this.echoes = document.createElement('div');
         this.echoes.className = 'gesture-echoes';
+        this.echoes.setAttribute('role', 'listbox');
+        this.echoes.setAttribute('aria-label', 'places near your shape');
         container.appendChild(this.echoes);
+        this.empty = document.createElement('p');
+        this.empty.className = 'gesture-empty';
+        container.appendChild(this.empty);
         if (this.relayUrl) {
             this.status = document.createElement('span');
             this.status.className = 'gesture-status offline';
@@ -102,6 +192,13 @@ class GestureWidget {
         this.ctx.scale(dpr, dpr);
         this.cssWidth = rect.width;
         this.cssHeight = rect.height;
+        this.glow.style.left = `${this.canvas.offsetLeft}px`;
+        this.glow.style.top = `${this.canvas.offsetTop}px`;
+        this.glow.style.width = `${rect.width}px`;
+        this.glow.style.height = `${rect.height}px`;
+        this.glow.width = this.canvas.width;
+        this.glow.height = this.canvas.height;
+        this.cancelConvergence(); // buffers are in old pixels
     }
 
     pos(e) {
@@ -115,7 +212,13 @@ class GestureWidget {
         // One stroke only - a new pointerdown replaces the old drawing
         // (and any ghost from the previous round).
         this.drawing = true;
+        this.cancelConvergence();
         this.ghost = null;
+        this.ownKey = null;
+        this.selected = null;
+        this.seenKeys.clear();
+        this.echoes.replaceChildren();
+        this.empty.textContent = '';
         this.points = [this.pos(e)];
         this.render();
     }
@@ -214,14 +317,20 @@ class GestureWidget {
             return;
         }
         if (msg.type === 'ack') {
-            if (this.points.length >= 2) {
-                this.setValue({ points: this.normalized(), key: msg.key });
-            }
+            this.ownKey = msg.key;
             // Version nibble is the key's first hex digit.
             const version = parseInt((msg.key || '0')[0], 16);
-            this.ghost = version >= 2 && Array.isArray(msg.path) ? msg.path : null;
-            this.render();
-        } else if (msg.type === 'echo') {
+            this.ownGhost = version >= 2 && Array.isArray(msg.path) ? msg.path : null;
+            this.applySelection();
+            // Places arrive right after the ack; say so if none do.
+            clearTimeout(this.emptyTimer);
+            this.emptyTimer = setTimeout(() => {
+                if (!this.echoes.children.length) this.empty.textContent = msg.empty || 'Nothing kept at this shape yet.';
+            }, 1500);
+        } else if (msg.type === 'echo' || msg.type === 'place') {
+            if (!msg.key || this.seenKeys.has(msg.key)) return;
+            this.seenKeys.add(msg.key);
+            this.empty.textContent = '';
             this.addEchoThumbnail(msg);
         }
         // 'error' frames are intentionally silent: the widget is a
@@ -229,9 +338,56 @@ class GestureWidget {
         // alarm anyone mid-form.
     }
 
+    // The key the input carries: the visitor's own, or the place they
+    // picked (selection re-derives the key - the ghost under the
+    // stroke becomes that place's decode, and the answer records both).
+    applySelection() {
+        if (this.points.length < 2) return;
+        const points = this.normalized();
+        const before = this.ghost;
+        if (this.selected) {
+            this.ghost = this.selected.path;
+            this.setValue({ points, key: this.selected.key, own_key: this.ownKey, selected_from: this.ownKey, selected_distance: this.selected.distance });
+        } else {
+            this.ghost = this.ownGhost || null;
+            this.setValue({ points, key: this.ownKey });
+        }
+        if (this.ghost && this.ghost !== before) this.startConvergence(this.ghost);
+        for (const el of this.echoes.children) {
+            el.classList.toggle('selected', !!this.selected && el.dataset.key === this.selected.key);
+            el.setAttribute('aria-selected', String(!!this.selected && el.dataset.key === this.selected.key));
+        }
+        this.render();
+    }
+
+    select(thumb) {
+        const key = thumb.dataset.key;
+        if (this.selected && this.selected.key === key) {
+            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();
+    }
+
     addEchoThumbnail(msg) {
         const thumb = document.createElement('canvas');
-        thumb.className = 'gesture-echo';
+        thumb.className = 'gesture-echo' + (msg.type === 'place' ? ' place' : '');
+        thumb.dataset.key = msg.key;
+        thumb.dataset.path = JSON.stringify(msg.path || []);
+        thumb.dataset.distance = String(msg.distance || 0);
+        thumb.setAttribute('role', 'option');
+        thumb.setAttribute('tabindex', '0');
+        thumb.setAttribute('aria-selected', 'false');
+        thumb.title = msg.type === 'place'
+            ? `A place with ${msg.recordings || 0} recording${msg.recordings === 1 ? '' : 's'} - tap to make it your address`
+            : 'Someone at this shape right now';
+        thumb.addEventListener('click', () => this.select(thumb));
+        thumb.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.select(thumb); } });
         // Closer strokes render stronger; 500 is comfortably past the
         // relay's default threshold, so everything stays visible.
         const strength = Math.max(0.35, Math.min(1, 1 - msg.distance / 500));
@@ -253,6 +409,140 @@ class GestureWidget {
         setTimeout(() => thumb.classList.add('shown'), 30);
     }
 
+    // ── Convergence ────────────────────────────────────────────────
+
+    initGlow() {
+        if (this.gl) return this.gl;
+        const gl = this.glow.getContext('webgl', { alpha: true, premultipliedAlpha: true });
+        if (!gl) return null;
+        const compile = (type, src) => {
+            const s = gl.createShader(type);
+            gl.shaderSource(s, src);
+            gl.compileShader(s);
+            return s;
+        };
+        const prog = gl.createProgram();
+        gl.attachShader(prog, compile(gl.VERTEX_SHADER, GLOW_VERT));
+        gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, GLOW_FRAG));
+        gl.linkProgram(prog);
+        if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) return null;
+        gl.useProgram(prog);
+        this.gl = gl;
+        this.glProg = prog;
+        this.glLoc = {
+            aFrom: gl.getAttribLocation(prog, 'aFrom'),
+            aTo: gl.getAttribLocation(prog, 'aTo'),
+            aIndex: gl.getAttribLocation(prog, 'aIndex'),
+            uT: gl.getUniformLocation(prog, 'uT'),
+            uResolution: gl.getUniformLocation(prog, 'uResolution'),
+            uDpr: gl.getUniformLocation(prog, 'uDpr'),
+            uColor: gl.getUniformLocation(prog, 'uColor'),
+            uAlpha: gl.getUniformLocation(prog, 'uAlpha'),
+        };
+        this.glBufFrom = gl.createBuffer();
+        this.glBufTo = gl.createBuffer();
+        this.glBufIndex = gl.createBuffer();
+        return gl;
+    }
+
+    // The ghost's pixel frame - same fit drawPath uses.
+    ghostToPx(path) {
+        const scale = (Math.min(this.cssWidth, this.cssHeight) / 2) * 0.8;
+        const cx = this.cssWidth / 2, cy = this.cssHeight / 2;
+        return path.map(([x, y]) => [cx + x * scale, cy + y * scale]);
+    }
+
+    startConvergence(targetPath) {
+        this.cancelConvergence();
+        if (!targetPath || this.points.length < 2) return;
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+        const gl = this.initGlow();
+        if (!gl) return;
+
+        const dpr = window.devicePixelRatio || 1;
+        const from = resamplePx(this.points.map((p) => [p.x, p.y]), CONVERGE_POINTS);
+        const to = resamplePx(this.ghostToPx(targetPath), CONVERGE_POINTS);
+        const f = new Float32Array(CONVERGE_POINTS * 2);
+        const t = new Float32Array(CONVERGE_POINTS * 2);
+        const idx = new Float32Array(CONVERGE_POINTS);
+        for (let i = 0; i < CONVERGE_POINTS; i++) {
+            f[i * 2] = from[i][0] * dpr;
+            f[i * 2 + 1] = from[i][1] * dpr;
+            t[i * 2] = to[i][0] * dpr;
+            t[i * 2 + 1] = to[i][1] * dpr;
+            idx[i] = i / (CONVERGE_POINTS - 1);
+        }
+        const bind = (buf, data, loc, size) => {
+            gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+            gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+            gl.enableVertexAttribArray(loc);
+            gl.vertexAttribPointer(loc, size, gl.FLOAT, false, 0, 0);
+        };
+        gl.useProgram(this.glProg);
+        bind(this.glBufFrom, f, this.glLoc.aFrom, 2);
+        bind(this.glBufTo, t, this.glLoc.aTo, 2);
+        bind(this.glBufIndex, idx, this.glLoc.aIndex, 1);
+        gl.viewport(0, 0, this.glow.width, this.glow.height);
+        gl.uniform2f(this.glLoc.uResolution, this.glow.width, this.glow.height);
+        gl.uniform1f(this.glLoc.uDpr, dpr);
+
+        const light = this._themeQuery.matches;
+        const color = light ? [0x47 / 255, 0x80 / 255, 0x7e / 255] : [0x8e / 255, 0xc2 / 255, 0xc0 / 255];
+        gl.uniform3f(this.glLoc.uColor, color[0], color[1], color[2]);
+        // Additive light on the dark ground; normal ink on the light one.
+        gl.enable(gl.BLEND);
+        if (light) gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        else gl.blendFunc(gl.ONE, gl.ONE);
+
+        this.converging = true;
+        this.render();
+        const started = performance.now();
+        const step = (now) => {
+            const raw = (now - started) / CONVERGE_MS;
+            if (raw >= 1) {
+                // Deposit the ghost, then let the glow breathe out.
+                if (this.converging) {
+                    this.converging = false;
+                    this.render();
+                }
+                const fade = (now - started - CONVERGE_MS) / CONVERGE_FADE_MS;
+                if (fade >= 1) {
+                    this.cancelConvergence();
+                    return;
+                }
+                gl.clearColor(0, 0, 0, 0);
+                gl.clear(gl.COLOR_BUFFER_BIT);
+                gl.uniform1f(this.glLoc.uT, 1);
+                gl.uniform1f(this.glLoc.uAlpha, 0.32 * (1 - fade));
+                gl.drawArrays(gl.POINTS, 0, CONVERGE_POINTS);
+            } else {
+                gl.clearColor(0, 0, 0, 0);
+                gl.clear(gl.COLOR_BUFFER_BIT);
+                // Trailing passes give the wave a comet tail.
+                for (const [lag, alpha] of [[0, 0.32], [0.035, 0.16], [0.07, 0.08], [0.105, 0.04]]) {
+                    gl.uniform1f(this.glLoc.uT, Math.max(0, raw - lag));
+                    gl.uniform1f(this.glLoc.uAlpha, alpha);
+                    gl.drawArrays(gl.POINTS, 0, CONVERGE_POINTS);
+                }
+            }
+            this.animFrame = requestAnimationFrame(step);
+        };
+        this.animFrame = requestAnimationFrame(step);
+    }
+
+    cancelConvergence() {
+        if (this.animFrame) cancelAnimationFrame(this.animFrame);
+        this.animFrame = null;
+        if (this.converging) {
+            this.converging = false;
+            this.render();
+        }
+        if (this.gl) {
+            this.gl.clearColor(0, 0, 0, 0);
+            this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+        }
+    }
+
     // ── Rendering ──────────────────────────────────────────────────
 
     // Draw a normalized (-1..1) path fitted into w×h with padding.
@@ -277,7 +567,7 @@ class GestureWidget {
         if (!this.ctx) return;
         const t = this.theme();
         this.ctx.clearRect(0, 0, this.cssWidth, this.cssHeight);
-        if (this.ghost) {
+        if (this.ghost && !this.converging) {
             this.drawPath(this.ctx, this.ghost, this.cssWidth, this.cssHeight, t.ghost, 2, 0.2);
         }
         if (this.points.length >= 1) {
@@ -296,6 +586,8 @@ class GestureWidget {
 
     stop() {
         this.stopped = true;
+        if (this.animFrame) cancelAnimationFrame(this.animFrame);
+        clearTimeout(this.emptyTimer);
         if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
         if (this.ws) {
             // The close event still fires, but scheduleReconnect
@@ -313,5 +605,8 @@ class GestureWidget {
 }
 
 export function mountGesture(container, hidden, relayUrl) {
-    return new GestureWidget(container, hidden, relayUrl);
+    // Dev convenience: `?relay=ws://127.0.0.1:9040` points every widget
+    // on the page at a local relay (prod relays reject foreign Origins).
+    const override = new URLSearchParams(window.location.search).get('relay');
+    return new GestureWidget(container, hidden, override || relayUrl);
 }

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

@@ -1,5 +1,5 @@
 use leptos::prelude::*;
-use leptos_meta::{provide_meta_context, HashedStylesheet, MetaTags, Title};
+use leptos_meta::{provide_meta_context, HashedStylesheet, Html, Link, MetaTags, Stylesheet, Title};
 use leptos_router::{
     components::{Route, Router, Routes},
     hooks::{use_location, use_navigate, use_query_map},
@@ -9,7 +9,8 @@ use serde::{Deserialize, Serialize};
 
 use crate::answers::{Answer, SelfTransitionAnswer, TransitionAnswers, TransitionItem};
 use crate::auth::{current_user, User};
-use crate::content::{is_qualified, Alternative, Question, Responsible, SiteConfig, Transition};
+use crate::content::{is_qualified, render_inline_markdown, Alternative, Question, Responsible, SiteConfig, Transition};
+use crate::i18n::t;
 use crate::resource::{get_requirement_binding, get_requirement_options, get_resource};
 
 /// The visible site name/wordmark - "portal" is just this codebase's
@@ -68,8 +69,39 @@ pub fn App() -> impl IntoView {
     // context instead of fetching their own copy.
     let site = Resource::new(|| (), |_| get_site());
     provide_context(site);
+    // The chrome's language, from site.yaml (default "en"); content
+    // speaks for itself. Components read this via context for t().
+    let lang = Memo::new(move |_| {
+        site.get()
+            .and_then(|r| r.ok())
+            .and_then(|s| s.lang)
+            .unwrap_or_else(|| "en".to_string())
+    });
+    provide_context(Lang(lang));
+
+    // A content-shipped stylesheet (site.yaml `stylesheet:`) layered
+    // after the default one - leptos_meta appends it at the MetaTags
+    // slot, which the shell places after HashedStylesheet, so content
+    // rules win at equal specificity.
+    let custom_css = Memo::new(move |_| {
+        site.get()
+            .and_then(|r| r.ok())
+            .and_then(|s| s.stylesheet)
+            .map(|p| format!("/site/{p}"))
+    });
+    // A content-shipped favicon overrides the built-in one; injected
+    // into the head after the static defaults, so it wins.
+    let favicon = Memo::new(move |_| {
+        site.get()
+            .and_then(|r| r.ok())
+            .and_then(|s| s.favicon)
+            .map(|p| format!("/site/{p}"))
+    });
 
     view! {
+        <Html attr:lang=move || lang.get()/>
+        {move || custom_css.get().map(|href| view! { <Stylesheet id="site-custom" href=href/> })}
+        {move || favicon.get().map(|href| view! { <Link rel="icon" href=href/> })}
         <Suspense fallback=|| ()>
             {move || {
                 site.get()
@@ -88,6 +120,15 @@ pub fn App() -> impl IntoView {
     }
 }
 
+/// The site's chrome language as a context signal - see App.
+#[derive(Clone, Copy)]
+pub struct Lang(pub Memo<String>);
+
+/// The current chrome language, for `t()` calls inside views.
+fn lang() -> Memo<String> {
+    expect_context::<Lang>().0
+}
+
 /// Every server-fn resource the pages read, created exactly once for
 /// the app's lifetime and handed down via context. Wrapper structs
 /// because a bare `Resource<T>` context is claimed by whoever provides
@@ -241,7 +282,7 @@ fn QuestionView(
             />
             <div class="alternatives">
                 <section class="alt-card gate-card">
-                    <p>"This page follows from an answer you don't seem to carry yet."</p>
+                    <p>{move || t(&lang().get(), "follows_answer")}</p>
                     <a class="alt-submit" href=target>
                         {label}
                     </a>
@@ -269,7 +310,7 @@ fn QuestionView(
             <div class="alternatives">
                 <section class="alt-card gate-card">
                     {if signed_in {
-                        view! { <p>"This part of the site is for organizational owners — sign in with that account to take a look."</p> }
+                        view! { <p>{move || t(&lang().get(), "owners_only")}</p> }
                             .into_any()
                     } else {
                         view! {
@@ -278,7 +319,7 @@ fn QuestionView(
                                 href=format!("/auth/login?redirect={question_id}")
                                 rel="external"
                             >
-                                "Sign in"
+                                {move || t(&lang().get(), "sign_in")}
                             </a>
                         }
                             .into_any()
@@ -371,7 +412,7 @@ fn QuestionNav(current_id: String, has_chain: bool) -> impl IntoView {
                         .collect();
                     (!others.is_empty()).then(|| view! {
                         <nav class="question-nav">
-                            <span class="question-nav-lead">"Also worth asking"</span>
+                            <span class="question-nav-lead">{move || t(&lang().get(), "also_worth_asking")}</span>
                             <For
                                 each=move || others.clone()
                                 key=|(id, _)| id.clone()
@@ -399,7 +440,7 @@ fn Announcements(current_id: String) -> impl IntoView {
                 let current_id = current_id.clone();
                 announcements.get().and_then(|res| res.ok()).map(|items| {
                     (!items.is_empty()).then(|| view! {
-                        <nav class="announce" aria-label="Announcements">
+                        <nav class="announce" aria-label=move || t(&lang().get(), "announcements")>
                             <For
                                 each=move || items.clone()
                                 key=|a| a.id.clone()
@@ -459,11 +500,11 @@ fn ResponsibleNote(responsible: Responsible) -> impl IntoView {
 
     view! {
         <small class="question-responsible">
-            "Asked by " {responsible.name.clone()} " — "
+            {move || t(&lang().get(), "asked_by")} {responsible.name.clone()} " — "
             <a data-user=user data-domain=domain on:mouseover=assemble on:click=assemble>
-                "contact them"
+                {move || t(&lang().get(), "contact_them")}
             </a>
-            " if you get stuck."
+            {move || t(&lang().get(), "if_stuck")}
         </small>
     }
 }
@@ -498,6 +539,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::*;
@@ -533,7 +596,17 @@ fn Hero(title: String, description: String, landing: bool, site: SiteConfig, cur
         None
     };
     let has_module = module.is_some();
+    // Light theme can invert a white-stroke wordmark to ink. Default:
+    // only the built-in house mark inverts; a content-shipped logo
+    // keeps its colours unless site.yaml opts in with wordmark_invert.
+    let house_wordmark = site.wordmark_invert.unwrap_or(site.wordmark.is_none());
     let wordmark = site.wordmark.clone().unwrap_or_else(|| "/wordmark.svg".to_string());
+    // Clamped server-side too, but belt and braces for the inline style.
+    let wordmark_style = site
+        .wordmark_height
+        .filter(|h| (0.5..=6.0).contains(h))
+        .map(|h| format!("height: {h}rem"))
+        .unwrap_or_default();
     let site_title = site.title.clone().unwrap_or_else(|| SITE_NAME.to_string());
 
     let piece_ref: NodeRef<leptos::html::Div> = NodeRef::new();
@@ -619,11 +692,11 @@ fn Hero(title: String, description: String, landing: bool, site: SiteConfig, cur
                     }
                 })}
             <div class="hero-copy">
-                <a class="wordmark" href="/">
-                    <img src=wordmark alt=site_title/>
+                <a class="wordmark" class:wordmark-house=house_wordmark href="/">
+                    <img src=wordmark alt=site_title style=wordmark_style/>
                 </a>
                 <h1>{title}</h1>
-                <p>{description}</p>
+                <p inner_html=render_inline_markdown(&description)></p>
             </div>
         </header>
     }
@@ -680,7 +753,7 @@ fn AlternativeCard(
         return view! {
             <section class="alt-card">
                 <h2>{alternative.name.clone()}</h2>
-                <p class="alt-description">{alternative.description.clone()}</p>
+                <p class="alt-description" inner_html=render_inline_markdown(&alternative.description)></p>
                 {move || {
                     let question_id_for_action = question_id_for_action.clone();
                     let alt_name_for_action = alt_name_for_action.clone();
@@ -705,7 +778,7 @@ fn AlternativeCard(
                             </button>
                         }
                             .into_any(),
-                        Some(Ok(())) => view! { <p>"Done."</p> }.into_any(),
+                        Some(Ok(())) => view! { <p>{move || t(&lang().get(), "done")}</p> }.into_any(),
                         Some(Err(e)) => view! { <p class="resource-error">{e.to_string()}</p> }.into_any(),
                     }
                 }}
@@ -766,12 +839,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));
             }
         }
     }
@@ -896,13 +973,13 @@ fn AlternativeCard(
         .consequence
         .first()
         .cloned()
-        .unwrap_or_else(|| "Send".to_string());
+        .unwrap_or_else(|| t(&lang().get(), "send").to_string());
 
     view! {
         <section class="alt-card">
             <AltImages images=alternative.images.clone() />
             <h2>{alternative.name.clone()}</h2>
-            <p class="alt-description">{alternative.description.clone()}</p>
+            <p class="alt-description" inner_html=render_inline_markdown(&alternative.description)></p>
             <div class="features">
                 <For
                     each={
@@ -945,22 +1022,13 @@ fn AlternativeCard(
                                         let name = feature.name.clone();
                                         move || !name.is_empty()
                                     }>
-                                        <h3>
-                                            {match feature.link.clone() {
-                                                Some(href) => view! {
-                                                    <a href=href target="_blank" rel="noopener noreferrer">
-                                                        {feature.name.clone()}
-                                                    </a>
-                                                }.into_any(),
-                                                None => feature.name.clone().into_any(),
-                                            }}
-                                        </h3>
+                                        <h3>{feature.name.clone()}</h3>
                                     </Show>
                                     <Show when={
                                         let description = feature.description.clone();
                                         move || !description.is_empty()
                                     }>
-                                        <p>{feature.description.clone()}</p>
+                                        <p inner_html=render_inline_markdown(&feature.description)></p>
                                     </Show>
                                     {resource.map(|spec| {
                                         view! {
@@ -1147,6 +1215,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();
@@ -1179,6 +1295,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}
@@ -1333,7 +1463,7 @@ fn ResourceFeature(
                 {move || {
                     let feature_name = feature_name.clone();
                     let transitions = transitions.clone();
-                    let empty = empty.clone().unwrap_or_else(|| "Nothing here yet.".to_string());
+                    let empty = empty.clone().unwrap_or_else(|| t(&lang().get(), "nothing_here_yet").to_string());
                     data.get()
                         .map(|res| match res {
                             Ok(value) => {
@@ -1463,8 +1593,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())
@@ -1503,7 +1636,9 @@ fn ItemCard(item: serde_json::Value) -> impl IntoView {
                         </div>
                     }
                 })}
-            {description.map(|d| view! { <p class="item-card-description">{d}</p> })}
+            {description
+                .map(|d| view! { <p class="item-card-description" inner_html=render_inline_markdown(&d)></p> })}
+            {audio.map(|src| view! { <audio class="item-card-audio" controls preload="none" src=src></audio> })}
             {(!extra.is_empty())
                 .then(|| {
                     view! {
@@ -1797,8 +1932,8 @@ fn format_ms(ms: i64) -> String {
 fn NotFound() -> impl IntoView {
     view! {
         <main class="not-found">
-            <h1>"Nothing here"</h1>
-            <a href="/">"back to the start"</a>
+            <h1>{move || t(&lang().get(), "nothing_here")}</h1>
+            <a href="/">{move || t(&lang().get(), "back_to_start")}</a>
         </main>
     }
 }
@@ -2008,11 +2143,18 @@ pub async fn submit_answer(
     if alt.disabled {
         return Err(ServerFnError::new("this alternative isn't open yet"));
     }
-    let next = alt.action.clone();
     let record_as = alt.record_as.clone();
 
     let responses: serde_json::Value = serde_json::from_str(&responses_json)
         .map_err(|e| ServerFnError::new(format!("invalid responses: {e}")))?;
+    // `/shape/{curve.key}`: the next page may be chosen by the answer.
+    let next = match alt.action.as_deref() {
+        Some(action) => Some(
+            crate::content::template_action(action, &responses)
+                .ok_or_else(|| ServerFnError::new("this answer is missing what the next page needs"))?,
+        ),
+        None => None,
+    };
 
     let parent_hashes: Vec<String> = parent_hash.into_iter().collect();
     let timestamp_ms = chrono::Utc::now().timestamp_millis();

src/content.rs

@@ -136,6 +136,159 @@ impl Question {
     }
 }
 
+/// An alternative's `action` may carry `{field}` / `{field.sub}`
+/// placeholders filled from the submitted responses - `/shape/{curve.key}`
+/// lands on the dynamic page `/shape/[key]` for the key the visitor's
+/// stroke was given. Returns `None` when a placeholder has no value
+/// (or a non-scalar one) in `responses`.
+pub fn template_action(action: &str, responses: &serde_json::Value) -> Option<String> {
+    let mut out = String::new();
+    let mut rest = action;
+    while let Some(start) = rest.find('{') {
+        out.push_str(&rest[..start]);
+        let end = rest[start..].find('}')? + start;
+        let path = &rest[start + 1..end];
+        let mut value = responses;
+        for seg in path.split('.') {
+            value = value.get(seg)?;
+        }
+        let scalar = match value {
+            serde_json::Value::String(s) => s.clone(),
+            serde_json::Value::Number(n) => n.to_string(),
+            serde_json::Value::Bool(b) => b.to_string(),
+            _ => return None,
+        };
+        if scalar.is_empty() {
+            return None;
+        }
+        // A URL segment: keep it to what a segment can carry.
+        let safe: String = scalar
+            .chars()
+            .map(|c| if c.is_ascii_alphanumeric() || "-_.".contains(c) { c } else { '-' })
+            .collect();
+        out.push_str(&safe);
+        rest = &rest[end + 1..];
+    }
+    out.push_str(rest);
+    Some(out)
+}
+
+/// Descriptions are inline markdown: `[text](https://…)` links,
+/// `*emphasis*`, `**strong**`, `` `code` ``. Block structure is
+/// flattened (a description is one paragraph) and raw HTML in the
+/// source is dropped, so content can link out without being able to
+/// inject markup. Link targets are limited to https, mailto and
+/// site-relative paths; anything else renders as plain text.
+pub fn render_inline_markdown(text: &str) -> String {
+    use pulldown_cmark::{html, Event, Options, Parser, Tag, TagEnd};
+    let parser = Parser::new_ext(text, Options::empty());
+    let mut in_link = 0usize;
+    let mut in_dropped_image = 0usize;
+    let filtered = parser.filter_map(|event| match event {
+        Event::Html(_) | Event::InlineHtml(_) => None,
+        Event::Start(Tag::Paragraph) | Event::End(TagEnd::Paragraph) => None,
+        Event::SoftBreak => Some(Event::Text(" ".into())),
+        Event::Start(Tag::Link { dest_url, .. })
+            if !(dest_url.starts_with("https://")
+                || dest_url.starts_with("mailto:")
+                || dest_url.starts_with("tel:")
+                || dest_url.starts_with('/')) =>
+        {
+            in_link += 1;
+            None
+        }
+        Event::End(TagEnd::Link) if in_link > 0 => {
+            in_link -= 1;
+            None
+        }
+        // Images take the same gate as links: https or same-origin
+        // only - no data:, no plain http. Unlike a dropped link (whose
+        // label is real text worth keeping), a dropped image's alt
+        // text is a caption for something that isn't there - swallow it.
+        Event::Start(Tag::Image { dest_url, .. })
+            if !(dest_url.starts_with("https://") || dest_url.starts_with('/')) =>
+        {
+            in_dropped_image += 1;
+            None
+        }
+        Event::End(TagEnd::Image) if in_dropped_image > 0 => {
+            in_dropped_image -= 1;
+            None
+        }
+        Event::Text(_) if in_dropped_image > 0 => None,
+        other => Some(other),
+    });
+    let mut out = String::new();
+    html::push_html(&mut out, filtered);
+    apply_image_hints(out.trim())
+}
+
+/// Translate a markdown image's title (`![alt](url "right 9rem")`)
+/// into layout: `left`/`right` float via a class, a bare number
+/// (optionally with `rem`) into a validated `max-width`. Unknown
+/// tokens are ignored; the title attribute is dropped either way.
+/// Only touches `<img>` tags in our own render output, and only ever
+/// emits a numeric max-width - no arbitrary CSS reaches the page.
+fn apply_image_hints(html: &str) -> String {
+    let mut out = String::new();
+    let mut rest = html;
+    while let Some(pos) = rest.find("<img ") {
+        out.push_str(&rest[..pos]);
+        let after = &rest[pos..];
+        let end = after.find('>').map(|e| e + 1).unwrap_or(after.len());
+        out.push_str(&rewrite_img_tag(&after[..end]));
+        rest = &after[end..];
+    }
+    out.push_str(rest);
+    out
+}
+
+fn rewrite_img_tag(tag: &str) -> String {
+    // Pull the title value, if any.
+    let title = tag
+        .find("title=\"")
+        .map(|i| &tag[i + 7..])
+        .and_then(|r| r.find('"').map(|e| &r[..e]))
+        .unwrap_or("");
+
+    let mut class = String::new();
+    let mut max_rem: Option<f32> = None;
+    for tok in title.split_whitespace() {
+        match tok {
+            "left" => class = "md-float-left".into(),
+            "right" => class = "md-float-right".into(),
+            other => {
+                if let Ok(n) = other.trim_end_matches("rem").parse::<f32>() {
+                    if n > 0.0 && n <= 60.0 {
+                        max_rem = Some(n);
+                    }
+                }
+            }
+        }
+    }
+
+    // Strip the title attribute from the tag.
+    let mut cleaned = tag.to_string();
+    if let Some(i) = cleaned.find(" title=\"") {
+        if let Some(e) = cleaned[i + 8..].find('"') {
+            cleaned.replace_range(i..i + 8 + e + 1, "");
+        }
+    }
+
+    // Inject class/style right after `<img`.
+    let mut attrs = String::new();
+    if !class.is_empty() {
+        attrs.push_str(&format!(" class=\"{class}\""));
+    }
+    if let Some(n) = max_rem {
+        attrs.push_str(&format!(" style=\"max-width:{n}rem\""));
+    }
+    if attrs.is_empty() {
+        return cleaned;
+    }
+    cleaned.replacen("<img", &format!("<img{attrs}"), 1)
+}
+
 /// Directory-scoped defaults: a `_section.yaml` file applies to every
 /// question at or below its directory (nearest ancestor wins per
 /// field, and a question's own declaration always overrides). This is
@@ -237,11 +390,6 @@ pub struct Feature {
     /// rendered via Iconify's public SVG API - no icon library bundled.
     #[serde(default)]
     pub icon: Option<String>,
-    /// An https URL the card's name links to - an announcement's
-    /// programme page, a venue. Plain-text descriptions can't carry
-    /// links, so this is the one place a card points elsewhere.
-    #[serde(default)]
-    pub link: Option<String>,
     #[serde(default)]
     pub requirements: Vec<Requirement>,
     /// Live data this feature pulls in. Read-only unless `transitions`
@@ -365,6 +513,12 @@ pub struct Requirement {
     /// `ResourceSpec` mechanism a `Feature.resource` uses.
     #[serde(default)]
     pub resource: Option<ResourceSpec>,
+    /// `type: select` only - a static list of options, as an
+    /// alternative to a `resource`. Each string is both the option's
+    /// stored value and its label. Faithful to the ancestor format's
+    /// inline enums.
+    #[serde(default)]
+    pub options: Vec<String>,
     /// `type: select` only - which field in each item is the option's
     /// stable id. Defaults to trying `_id` then `id`.
     #[serde(default)]
@@ -374,7 +528,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
@@ -430,6 +590,31 @@ pub struct SiteConfig {
     /// `None` falls back to `/wordmark.svg`.
     #[serde(default)]
     pub wordmark: Option<String>,
+    /// Whether to invert the wordmark in light theme. `None` inverts
+    /// only the built-in house wordmark (a white-stroke SVG); a
+    /// content-shipped logo keeps its own colours unless it sets this
+    /// true (e.g. a sibling site's white-stroke mark).
+    #[serde(default)]
+    pub wordmark_invert: Option<bool>,
+    /// Wordmark display height in rem (0.5–6.0). `None` keeps the
+    /// stylesheet's default. Raster logos look best at or below their
+    /// intrinsic pixel height.
+    #[serde(default)]
+    pub wordmark_height: Option<f32>,
+    /// BCP 47-ish language code for the portal's own chrome strings
+    /// ("Asked by", the nav lead...) and the html lang attribute.
+    /// `None` means "en"; unknown codes fall back to English per key.
+    #[serde(default)]
+    pub lang: Option<String>,
+    /// A content-repo-relative CSS file (e.g. "custom.css") layered
+    /// *after* the default stylesheet, so it overrides. Served
+    /// same-origin at `/site/<path>`; plain path only.
+    #[serde(default)]
+    pub stylesheet: Option<String>,
+    /// A content-repo-relative favicon (svg/png/ico), served at
+    /// `/site/<path>` and used in place of the built-in one.
+    #[serde(default)]
+    pub favicon: Option<String>,
     #[serde(default)]
     pub hero: HeroConfig,
 }
@@ -485,6 +670,21 @@ impl SiteConfig {
             }
             other => anyhow::bail!("site.yaml: hero.kind {other:?} is not one of plain | module"),
         }
+        if let Some(sheet) = &self.stylesheet {
+            if !is_safe_site_path(sheet) || !sheet.ends_with(".css") {
+                anyhow::bail!(
+                    "site.yaml: stylesheet {sheet:?} must be a plain repo-relative .css path"
+                );
+            }
+        }
+        if let Some(icon) = &self.favicon {
+            let ok = [".svg", ".png", ".ico"].iter().any(|e| icon.ends_with(e));
+            if !is_safe_site_path(icon) || !ok {
+                anyhow::bail!(
+                    "site.yaml: favicon {icon:?} must be a plain repo-relative .svg/.png/.ico path"
+                );
+            }
+        }
         Ok(())
     }
 }
@@ -752,15 +952,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);
                     }
                 }
             }
@@ -1022,19 +1233,34 @@ pub fn validate_questions(
             }
         }
         for alternative in &question.alternatives {
-            for feature in &alternative.features {
-                if let Some(link) = &feature.link {
-                    if !link.starts_with("https://") {
-                        anyhow::bail!(
-                            "question {:?} feature {:?}: link {:?} must be an https:// URL",
-                            question.id, feature.name, link
-                        );
-                    }
-                }
-            }
             // A dangling action is a literal dead end: the submit
             // button navigates to "Nothing here".
             if let Some(action) = &alternative.action {
+                if action.contains('{') {
+                    // Placeholders are filled at submit time; the
+                    // shape must land on a dynamic page once filled.
+                    let probe = template_action(action, &serde_json::json!({}));
+                    let filled = {
+                        let mut a = action.clone();
+                        while let (Some(i), Some(j)) = (a.find('{'), a.find('}')) {
+                            a.replace_range(i..=j, "x");
+                        }
+                        a
+                    };
+                    let _ = probe;
+                    // Match the pattern itself: resolve_question would
+                    // hand back a clone whose id is already concrete.
+                    let lands = questions
+                        .values()
+                        .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!(
                         "question {:?} alternative {:?}: action {:?} does not match any declared question id",
@@ -1069,16 +1295,19 @@ pub fn validate_questions(
                 .collect();
             for feature in &alternative.features {
                 for requirement in &feature.requirements {
-                    if requirement.kind == "select" && requirement.resource.is_none() {
+                    if requirement.kind == "select"
+                        && requirement.resource.is_none()
+                        && requirement.options.is_empty()
+                    {
                         anyhow::bail!(
-                            "question {:?} alternative {:?} feature {:?}: requirement {:?} is type: select but declares no resource to select from",
+                            "question {:?} alternative {:?} feature {:?}: requirement {:?} is type: select but declares neither a resource nor inline options",
                             question.id, alternative.name, feature.name, requirement.name
                         );
                     }
                     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
                             );
                         }
@@ -1319,6 +1548,8 @@ pub async fn site_asset_handler(
         Some("json") => "application/json",
         Some("png") => "image/png",
         Some("webp") => "image/webp",
+        Some("avif") => "image/avif",
+        Some("ico") => "image/x-icon",
         Some("woff2") => "font/woff2",
         _ => "application/octet-stream",
     };
@@ -1912,4 +2143,104 @@ alternatives:
         assert!(bucket_is_read(&qs, "things"));
         assert!(!bucket_is_read(&qs, EVENTS_BUCKET));
     }
+
+    // ── inline markdown ──────────────────────────────────────────────────
+
+    #[test]
+    fn markdown_links_and_emphasis() {
+        assert_eq!(
+            render_inline_markdown("See [the programme](https://attac.no/x) *soon*."),
+            "See <a href=\"https://attac.no/x\">the programme</a> <em>soon</em>."
+        );
+        assert_eq!(render_inline_markdown("plain text"), "plain text");
+        assert_eq!(render_inline_markdown("a\nb"), "a b");
+    }
+
+    #[test]
+    fn markdown_drops_html_and_unsafe_links() {
+        assert_eq!(render_inline_markdown("x <script>y</script> z"), "x y z");
+        assert_eq!(render_inline_markdown("[bad](javascript:alert(1))"), "bad");
+        assert_eq!(
+            render_inline_markdown("[ring](tel:+4791180485)"),
+            "<a href=\"tel:+4791180485\">ring</a>"
+        );
+        assert_eq!(
+            render_inline_markdown("![site](https://x.no/a.jpg)"),
+            "<img src=\"https://x.no/a.jpg\" alt=\"site\" />"
+        );
+        assert_eq!(render_inline_markdown("![x](data:image/png;base64,AA)"), "");
+        assert_eq!(
+            render_inline_markdown("![local](/images/a.jpg)"),
+            "<img src=\"/images/a.jpg\" alt=\"local\" />"
+        );
+        // Image title hints: float + max-width, title dropped.
+        assert_eq!(
+            render_inline_markdown("![J](https://x.no/j.jpg \"right 9rem\")"),
+            "<img class=\"md-float-right\" style=\"max-width:9rem\" src=\"https://x.no/j.jpg\" alt=\"J\" />"
+        );
+        assert_eq!(
+            render_inline_markdown("![J](https://x.no/j.jpg \"12\")"),
+            "<img style=\"max-width:12rem\" src=\"https://x.no/j.jpg\" alt=\"J\" />"
+        );
+        // Unknown hint tokens are ignored; a safe image with no title
+        // is untouched.
+        assert_eq!(
+            render_inline_markdown("![J](https://x.no/j.jpg \"wat\")"),
+            "<img src=\"https://x.no/j.jpg\" alt=\"J\" />"
+        );
+        assert_eq!(render_inline_markdown("[ok](/shape)"), "<a href=\"/shape\">ok</a>");
+        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});
+        assert_eq!(template_action("/shape/{curve.key}", &r).as_deref(), Some("/shape/20aa98"));
+        assert_eq!(template_action("/x/{n}/y", &r).as_deref(), Some("/x/3/y"));
+        assert_eq!(template_action("/shape", &r).as_deref(), Some("/shape"));
+        assert!(template_action("/shape/{curve.missing}", &r).is_none());
+        assert!(template_action("/shape/{curve.points}", &r).is_none());
+        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!(),
+        }
+    }
 }

src/i18n.rs

@@ -0,0 +1,97 @@
+//! Chrome-string translations, selected by `site.yaml`'s `lang`.
+//!
+//! Content carries its own language; this covers only the strings the
+//! portal itself speaks around it ("Asked by", the nav lead, the
+//! not-found page...). Unknown languages and unknown keys fall back
+//! to English, so a typo degrades to the default instead of a blank.
+
+/// Translate `key` for `lang`. `en` is the reference table; every
+/// other language falls through to it for keys it doesn't carry.
+pub fn t(lang: &str, key: &str) -> &'static str {
+    if let Some(s) = lookup(lang, key) {
+        return s;
+    }
+    lookup("en", key).unwrap_or(key_missing(key))
+}
+
+fn lookup(lang: &str, key: &str) -> Option<&'static str> {
+    Some(match (lang, key) {
+        ("en", "also_worth_asking") => "Also worth asking",
+        ("en", "asked_by") => "Asked by ",
+        ("en", "contact_them") => "contact them",
+        ("en", "if_stuck") => " if you get stuck.",
+        ("en", "send") => "Send",
+        ("en", "sign_in") => "Sign in",
+        ("en", "nothing_here_yet") => "Nothing here yet.",
+        ("en", "nothing_here") => "Nothing here",
+        ("en", "back_to_start") => "back to the start",
+        ("en", "done") => "Done.",
+        ("en", "follows_answer") => {
+            "This page follows from an answer you don't seem to carry yet."
+        }
+        ("en", "owners_only") => {
+            "This part of the site is for organizational owners — sign in with that account to take a look."
+        }
+        ("en", "announcements") => "Announcements",
+
+        ("no", "also_worth_asking") => "Også verdt å spørre",
+        ("no", "asked_by") => "Stilt av ",
+        ("no", "contact_them") => "ta kontakt",
+        ("no", "if_stuck") => " om du står fast.",
+        ("no", "send") => "Send",
+        ("no", "sign_in") => "Logg inn",
+        ("no", "nothing_here_yet") => "Ingenting her ennå.",
+        ("no", "nothing_here") => "Ingenting her",
+        ("no", "back_to_start") => "tilbake til start",
+        ("no", "done") => "Ferdig.",
+        ("no", "follows_answer") => {
+            "Denne siden følger av et svar du ikke ser ut til å bære ennå."
+        }
+        ("no", "owners_only") => {
+            "Denne delen av siden er for organisasjonens eiere — logg inn med den kontoen for å ta en titt."
+        }
+        ("no", "announcements") => "Kunngjøringer",
+
+        _ => return None,
+    })
+}
+
+/// A missing key is a programmer error; render the key itself so it
+/// is findable, never a panic in a view.
+fn key_missing(key: &str) -> &'static str {
+    // Leak is bounded: keys are a small fixed set of literals.
+    Box::leak(key.to_string().into_boxed_str())
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn norwegian_covers_the_english_table() {
+        for key in [
+            "also_worth_asking",
+            "asked_by",
+            "contact_them",
+            "if_stuck",
+            "send",
+            "sign_in",
+            "nothing_here_yet",
+            "nothing_here",
+            "back_to_start",
+            "done",
+            "follows_answer",
+            "owners_only",
+            "announcements",
+        ] {
+            assert!(lookup("en", key).is_some(), "en missing {key}");
+            assert!(lookup("no", key).is_some(), "no missing {key}");
+        }
+    }
+
+    #[test]
+    fn unknown_language_falls_back_to_english() {
+        assert_eq!(t("de", "sign_in"), "Sign in");
+        assert_eq!(t("en", "sign_in"), "Sign in");
+    }
+}

src/lib.rs

@@ -4,6 +4,7 @@ pub mod auth;
 pub mod chain;
 pub mod content;
 pub mod events;
+pub mod i18n;
 pub mod resource;
 
 #[cfg(feature = "ssr")]

src/resource.rs

@@ -68,6 +68,16 @@ pub async fn get_requirement_options(
         .iter()
         .find(|r| r.name == requirement_name)
         .ok_or_else(|| ServerFnError::new("unknown requirement"))?;
+    // Inline options: return them as {id,label} objects, the shape the
+    // SelectField renders, without touching a resource.
+    if !requirement.options.is_empty() {
+        let items: Vec<serde_json::Value> = requirement
+            .options
+            .iter()
+            .map(|o| serde_json::json!({ "id": o, "label": o }))
+            .collect();
+        return Ok(serde_json::Value::Array(items));
+    }
     let resource = requirement
         .resource
         .as_ref()

src/server/oidc.rs

@@ -33,6 +33,13 @@ type OidcClient = CoreClient<
 >;
 
 pub struct Oidc {
+    /// `None` when `KANIDM_URL` is unset: a content-only instance with
+    /// sign-in disabled - auth routes answer 503, everything public
+    /// renders as usual.
+    inner: Option<OidcInner>,
+}
+
+struct OidcInner {
     client: OidcClient,
     http: openidconnect::reqwest::Client,
 }
@@ -45,7 +52,13 @@ const REDIRECT_KEY: &str = "oidc_post_login_redirect";
 impl Oidc {
     /// Discovers the provider and builds the client from environment:
     /// `KANIDM_URL`, `OAUTH2_CLIENT_ID`, `OAUTH2_CLIENT_SECRET`, `PUBLIC_URL`.
+    /// With `KANIDM_URL` unset, sign-in is disabled instead of fatal -
+    /// the shape of a public content instance without a review desk.
     pub async fn from_env() -> anyhow::Result<Self> {
+        if std::env::var("KANIDM_URL").is_err() {
+            tracing::warn!("KANIDM_URL not set - sign-in disabled on this instance");
+            return Ok(Self { inner: None });
+        }
         let kanidm_url = require_env("KANIDM_URL")?;
         let client_id = require_env("OAUTH2_CLIENT_ID")?;
         let client_secret = require_env("OAUTH2_CLIENT_SECRET")?;
@@ -75,7 +88,16 @@ impl Oidc {
         )
         .set_redirect_uri(redirect);
 
-        Ok(Self { client, http })
+        Ok(Self {
+            inner: Some(OidcInner { client, http }),
+        })
+    }
+
+    fn configured(&self) -> Result<&OidcInner, HandlerError> {
+        self.inner.as_ref().ok_or((
+            StatusCode::SERVICE_UNAVAILABLE,
+            "sign-in is not configured on this instance".to_string(),
+        ))
     }
 }
 
@@ -118,10 +140,10 @@ pub async fn login(
         session.insert(REDIRECT_KEY, redirect).await.map_err(internal)?;
     }
 
+    let oidc = state.oidc.configured()?;
     let (pkce_challenge, pkce_verifier) = PkceCodeChallenge::new_random_sha256();
 
-    let (auth_url, csrf_state, nonce) = state
-        .oidc
+    let (auth_url, csrf_state, nonce) = oidc
         .client
         .authorize_url(
             CoreAuthenticationFlow::AuthorizationCode,
@@ -182,7 +204,7 @@ pub async fn callback(
         ));
     }
 
-    let oidc = &state.oidc;
+    let oidc = state.oidc.configured()?;
     let token_response = oidc
         .client
         .exchange_code(AuthorizationCode::new(params.code))

style/main.css

@@ -99,10 +99,10 @@
     --hero-glow: rgba(246, 245, 241, 0.85);
   }
 
-  /* The wordmark SVG is a hardcoded white stroke (also used raw in
-     dark contexts elsewhere) - flip it to ink here rather than fork
-     the asset. */
-  .wordmark img {
+  /* The house wordmark SVG is a hardcoded white stroke (also used
+     raw in dark contexts elsewhere) - flip it to ink here rather
+     than fork the asset. A content-provided logo keeps its colors. */
+  .wordmark-house img {
     filter: invert(0.92);
   }
 
@@ -193,6 +193,10 @@ main.not-found {
   color: var(--ink-dim);
   font-size: 1.05rem;
   max-width: 46ch;
+  /* The measure cap shrinks the box below the copy column; without
+     auto margins the box left-anchors and its centered text centers
+     in the wrong frame. */
+  margin-inline: auto;
 }
 
 /* A content-shipped hero module (site.yaml hero.kind: module) draws
@@ -364,8 +368,12 @@ main.not-found {
 .alt-image {
   display: block;
   width: 100%;
-  max-height: 14rem;
-  object-fit: cover;
+  height: auto;
+  /* Natural aspect, not a cropped band; a very tall image is still
+     bounded so it can't tower. The deck below overrides for its
+     fixed-height cards. */
+  max-height: 32rem;
+  object-fit: contain;
   border-radius: calc(var(--radius) - 0.3rem);
   margin-bottom: 1.1rem;
 }
@@ -430,10 +438,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,20 +450,139 @@ 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;
 }
 
-.feature h3 a {
-  color: inherit;
-  text-decoration: none;
-  border-bottom: 0.06rem solid var(--line);
+/* 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;
 }
 
-.feature h3 a:hover {
+.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 {
+  color: inherit;
+  text-decoration: none;
+  border-bottom: 0.06rem solid var(--accent);
+}
+
+.alt-description a:hover,
+.feature p a:hover {
   color: var(--accent);
-  border-bottom-color: var(--accent);
+}
+
+/* images inside markdown descriptions: full-width figures in the
+   card's flow, framed like the rest of the press sheet */
+.alt-description img,
+.item-card-description img,
+.feature p img {
+  display: block;
+  width: 100%;
+  margin: 0.6rem 0 0.2rem;
+  border-radius: 0.5rem;
+  border: 0.06rem solid var(--line);
+}
+
+/* Content hint via a markdown image title (`![alt](url "right 9rem")`):
+   float and shrink so text wraps around a portrait. */
+.alt-description img.md-float-left,
+.item-card-description img.md-float-left,
+.feature p img.md-float-left,
+.alt-description img.md-float-right,
+.item-card-description img.md-float-right,
+.feature p img.md-float-right {
+  width: auto;
+  max-width: 45%;
+}
+.alt-description img.md-float-left,
+.item-card-description img.md-float-left,
+.feature p img.md-float-left {
+  float: left;
+  margin: 0.2rem 1.1rem 0.5rem 0;
+}
+.alt-description img.md-float-right,
+.item-card-description img.md-float-right,
+.feature p img.md-float-right {
+  float: right;
+  margin: 0.2rem 0 0.5rem 1.1rem;
+}
+
+.alt-description code,
+.feature p code {
+  font-size: 0.9em;
 }
 
 .feature p {
@@ -565,11 +691,17 @@ textarea:focus {
   touch-action: none;
 }
 
+/* Results overlay the canvas instead of growing the widget - the
+   page never jumps when places arrive (or don't). */
 .gesture-echoes {
+  position: absolute;
+  left: 0.6rem;
+  right: 0.6rem;
+  bottom: 0.6rem;
   display: flex;
+  justify-content: center;
   gap: 0.5rem;
-  margin-top: 0.5rem;
-  min-height: 3rem;
+  pointer-events: none;
 }
 
 .gesture-echoes:empty {
@@ -584,12 +716,48 @@ textarea:focus {
   border-radius: 0.4rem;
   opacity: 0;
   transition: opacity 0.5s ease;
+  pointer-events: auto;
+  box-shadow: 0 0.15rem 0.6rem rgba(0, 0, 0, 0.18);
 }
 
 .gesture-echo.shown {
   opacity: var(--echo-strength, 1);
 }
 
+/* places are pickable: the pick re-derives the input's key */
+.gesture-echo {
+  cursor: pointer;
+  transition: opacity 0.5s ease, border-color 120ms, transform 120ms;
+}
+
+.gesture-echo:hover,
+.gesture-echo:focus-visible {
+  border-color: var(--accent);
+  outline: none;
+}
+
+.gesture-echo.selected {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 0.12rem var(--accent);
+  transform: translateY(-0.1rem);
+}
+
+.gesture-empty {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0.7rem;
+  margin: 0;
+  text-align: center;
+  font-size: 0.85rem;
+  color: var(--ink-dim);
+  pointer-events: none;
+}
+
+.gesture-empty:empty {
+  display: none;
+}
+
 .gesture-status {
   position: absolute;
   top: 0.55rem;
@@ -721,6 +889,10 @@ textarea:focus {
   padding: 0.75rem 1.4rem;
   cursor: pointer;
   transition: filter 120ms, transform 120ms;
+  /* A gateway alternative renders this as an <a> (navigation, no POST);
+     kill the link chrome so it reads as the button it looks like. */
+  text-decoration: none;
+  display: inline-block;
 }
 
 .alt-submit:hover {

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);
+}