@the-inclusionist/engine 9.0.0 → 11.0.0

package/dist-pkg/ui/settings-audio.js

@@ -1,137 +1,213 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
-// ui/settings-audio — Audio panel (Estágio 4, #audio overlay): extracted from game.js's renderAudio()/
-// renderAudioSinks()/catRowHTML/wireCatControls/renderNavSound/reflectAudioMaster + the TTS-panel functions that
-// platform/tts.ts already documents as belonging here (reflectTTS/populateTTSEngines/populateTTSVoices). Pure
-// logic (category markup, volume->percent, sink option/label, cane-div validation, pt-BR voice filtering) is
-// separated from the thin DOM-touching render/wire functions. DI via initSettingsAudio(ctx): `$`, `srSay`,
-// `store` (narrow get/set), the live sound/mixer primitives from platform/audio.ts (getSoundOn/setSoundOn/
-// getVolume/setVolume/getAudioCat/setCatGain), the injected `tts` panel API (platform/tts.ts), and the SHARED
-// game.js helpers other panels also use (`toggleBtn`, `getNumPlayers`/`getPlayers`) or that live outside audio
-// entirely (`getModoCego`/`setModoCego`, `getCaneBlockDiv`/`setCaneBlockDiv` — core collision state; the widgets
-// live in this overlay, the state does not). Overlay open/close plumbing (#audio hidden toggle, frontOverlay,
-// focus management, Escape, `ensureAC()`) is the shared infra every settings panel uses and stays in game.js,
-// which calls `renderAudio()` from its `openAudio()`. `reflectModoCego`/`reflectTts` are also exported because
-// game.js's own `setModoCego()` and the pause-menu icon bar (`iconAct('tts'|'blind', …)`) call them directly.
+// ui/settings-audio — the hearing accessibility and audio panels (#audio overlay): the thin DOM-touching render/wire
+// functions; what a choice IS lives in ./audio-choices.js and the voice section in ./voice-settings.js. DI via
+// initSettingsAudio(ctx): `$`, `srSay`, `store` (narrow get/set), the browser through three required ports
+// (`newElement`, `speech`, `audioOutputs`), the live sound/mixer primitives from platform/audio.ts
+// (getSoundOn/setSoundOn/getVolume/setVolume/getAudioCat/setCatGain), the injected `tts` panel API (platform/tts.ts), and
+// the host's shared helpers (`toggleBtn`, `getNumPlayers`/`getPlayers`) plus state that lives outside audio
+// (`getBlindMode`/`setBlindMode`, `getCaneBlockDiv`/`setCaneBlockDiv` — the widgets live in this overlay, the state does
+// not). Overlay open/close plumbing (frontOverlay, focus management, Escape) is the shared infrastructure every settings
+// panel uses. `reflectBlindMode`/`reflectTts` are exported because the pause-menu icon bar calls them directly.
 /** Minimal DOM-selector shape (matches ui/dom.ts's `$`). */
 import { toggleLabel } from './dom.js';
-import { t, bcp47 } from '../core/i18n.js';
-import { DEFAULTS } from '../core/state.js';
-// O módulo INTEIRO, e não os nomes soltos: `menuIndexOn` é ligação viva e `setMenuIndexOnValue` a muda — ler
-// pelo namespace deixa isso à vista em cada uso, em vez de parecer uma constante importada.
-import * as state from '../core/state.js';
+import { DEFAULTS } from '../core/setting-defaults.js';
 import { markChanged, markMenuChanged } from './changed-mark.js';
 import { defaultAudioCat } from '../platform/audio-mixer.js';
-// ---------------------------------------------------------------------------------------------
-// Pure logic (no `document`, testable in node)
-// ---------------------------------------------------------------------------------------------
-/** Categorias de NAVEGAÇÃO SONORA (bengala/sonar/guarda/guia) — volume geral separado do som do jogo. */
-export const NAV_CATS = ['sonar', 'guard', 'guide'];
-/** Categorias GERAIS do jogo (TTS fica na seção Voz, fora desta lista). */
-export const GEN_CATS = ['music', 'ambient', 'interact', 'earcons', 'other'];
-/** 0..1 -> 0..100 rounded (slider display value). */
-export function volPercent(v) {
-    return Math.round(v * 100);
-}
-/** One category row's markup (volume slider + on/off switch). Pure — resolves label/state from the given data,
- *  never from a global. Returns '' for an unknown/missing category (defensive; never hit with real catalogs). */
-export function catRowHTML(k, cats, state) {
-    const c = cats.find((x) => x.k === k);
-    const a = state[k];
-    if (!c || !a)
-        return '';
-    return `<div class="ctrl-row"><span>${c.lbl}</span><span style="display:flex;gap:.5rem;align-items:center;flex-shrink:0">` +
-        `<input class="vol" type="range" min="0" max="100" step="5" value="${volPercent(a.vol)}" data-avol="${k}" aria-label="Volume de ${c.lbl}">` +
-        `<button class="mode-btn switch${a.on ? ' is-on' : ''}" data-acat="${k}" type="button" aria-pressed="${a.on}" aria-label="${c.lbl}"></button></span></div>`;
-}
-/** Full innerHTML for a category list (#audio-list or #navsound-list). Pure string building — no DOM. */
-export function catsListHTML(keys, cats, state) {
-    return keys.map((k) => catRowHTML(k, cats, state)).join('');
-}
-/** #navsound-master's value: the loudest of the nav categories, as a 0..100 slider value. */
-export function navMasterVolume(state, navCats = NAV_CATS) {
-    return volPercent(Math.max(...navCats.map((k) => state[k].vol)));
-}
-/** Cane-hit spacing select -> validated int (garbage/empty -> 1, "a batida por bloco"). */
-export function parseCaneDiv(raw) {
-    return (+raw) || 1;
-}
-/** srSay text for a cane-hit spacing choice. The two halves are ONE sentence per case, not a shared prefix
- *  plus a tail: a language that renders this as "One tap per block (cane)" needs to move the word "cane". */
-export function caneDivMessage(div) {
-    return t(div === 2 ? 'sr.audio.caneHalfBlock' : 'sr.audio.canePerBlock');
+import { controlRow, labelRow, mountChoice, updateChoice } from './panel-widgets.js';
+/*
+ * 🔴 THE VOICE SECTION LIVES IN `ui/voice-settings` (ADR-0221, issue #203): speech — the narration switch, the engine, the
+ * voice, the rate, the spoken index and the test button — and the sound categories, cane, blind mode and outputs never
+ * needed each other.
+ */
+import { createVoiceSettings } from './voice-settings.js';
+/*
+ * 🔴 THE PURE HALF LIVES IN `ui/audio-choices` (ADR-0221, issue #203): what a choice IS — the category list, the volume
+ * arithmetic, the engine catalogue, the voice filter, an output's label — needs no document, and this file is about
+ * FINDING the controls and wiring them. The suite had already made the cut: the node test imported exactly those names
+ * and the browser test drove the rest.
+ */
+import { NAV_CATS, GEN_CATS, volPercent, navMasterVolume, parseCaneDiv, caneDivMessage, sinksSupported, sinkOptionLabel, sinkSelectValue, } from './audio-choices.js';
+/** The cane's two positions — one tap per block, one every half block — in the page's language. */
+function canePositions(t) {
+    return [{ value: '1', label: t('audio.cane.block') }, { value: '2', label: t('audio.cane.halfBlock') }];
 }
-/** #tts-engine's option catalog: (value, i18n KEY of the label). The engine NAMES are proper nouns and stay
- *  put; what translates is the parenthetical that explains each one. Keys, not text — see input/devices. */
-export const TTS_ENGINE_OPTIONS = [
-    ['webspeech', 'tts.engine.webspeech'],
-    ['piper', 'tts.engine.piper'],
-    ['kokoro', 'tts.engine.kokoro'],
-    ['kitten', 'tts.engine.kitten'],
-    ['espeak', 'tts.engine.espeak'],
-];
 /**
- * Os motores que ESTA MONTAGEM pode de facto oferecer (ADR-0094).
+ * THE CANE ROW, a CYCLE ROW «◀ Batida da bengala: uma batida por bloco ▶» (ADR-0130 rule 3: two positions).
  *
- * ⚠️ Desde que o motor neural passou a chegar por PORTA (`ctx.carregarVozNeural`), «o Piper existe» deixou
- * de ser verdade sobre a engine e passou a ser verdade sobre o JOGO. Oferecer uma opção que não pode
- * funcionar é pior que uma opção a menos: quem a escolhe fica à espera de um download que nunca começa, e
- * quem navega por escuta não tem como ver que não começou.
+ * 🔴 It was the kit's `escolha`, a `<select>` nobody filled: offered to every game with a walker, it opened on nothing to
+ * choose. Two positions are a cycle, and the positions are the engine's words.
  *
- * Só o `piper` é filtrado. `kokoro`/`kitten`/`espeak` também não funcionam hoje — «ainda não entraram» —,
- * mas isso é anterior a este registro e escondê-los aqui mudaria comportamento que ninguém pediu para mudar.
+ * 📌 THE `<strong>` STAYS, HIDDEN: it is where the game's word for the cane lands (`ui/audio-rows-that-apply`, ADR-0153),
+ * and `renderAudio` reads it into the cycle's own text. `hidden` keeps it out of the accessibility tree, so the name is
+ * heard once — from the control.
  */
-export function opcoesDeMotor(neuralDisponivel) {
-    return neuralDisponivel ? TTS_ENGINE_OPTIONS : TTS_ENGINE_OPTIONS.filter(([v]) => v !== 'piper');
+function caneRow(t, ctx, spec) {
+    const row = ctx.create('div');
+    row.className = 'ctrl-row ctrl-row--passos';
+    const text = ctx.create('span');
+    const name = ctx.create('strong');
+    name.textContent = spec.label;
+    name.hidden = true;
+    text.appendChild(name);
+    if (spec.hint) {
+        const explanation = ctx.create('span');
+        explanation.className = 'opt-hint';
+        explanation.textContent = spec.hint;
+        text.appendChild(explanation);
+    }
+    row.appendChild(text);
+    // the pick is `initSettingsAudio`'s, which listens for the `change` every choice fires: this builder has no setter
+    const control = mountChoice(ctx, { label: spec.label, values: canePositions(t), current: '1' }, () => { });
+    control.id = spec.id;
+    row.appendChild(control);
+    return row;
 }
 /**
- * As vozes do sistema no idioma pedido; sem nenhuma, a lista inteira.
+ * MOUNTS THIS PANEL'S INSIDE — the controls and containers it reaches.
+ *
+ * 🔴 IT IS THE LARGEST INVISIBLE CONTRACT OF THE PANELS: this file looks for `#opt-modocego`, `#cane-div`,
+ * `#opt-menuindex`, `#opt-tts`, `#tts-vol` and more, and nothing in the type says so — which is why it builds them.
+ *
+ * ⚠️ AND EACH ONE'S TAG MATTERS, which makes this the worst place to guess: the voice selects have to be `<select>` — the
+ * panel writes `.value` into them —, the volumes `<input type=range>`, and `#cane-div` is the cycle row `caneRow` builds
+ * (a host's own `<select>` is still read). On a `<button>`,
+ * writing `.value` gives no error at all: it creates a property nobody reads, and the child's choice vanishes silently.
  *
- * Chamava-se `pickPtVoices` e filtrava `/^pt/i` fixo, de modo que o jogo em inglês oferecia à pessoa uma
- * lista de vozes PORTUGUESAS para ler texto em inglês. O nome dizia a verdade sobre o que fazia e mentia
- * sobre o que devia fazer.
+ * 📌 THE ORDER IS THE DECISION (ADR-0044 §2), from general to particular (see the composition below).
  *
- * A comparação é pelo PREFIXO de idioma, não pela etiqueta inteira: quem joga em pt-BR também deve poder
- * escolher uma voz pt-PT se for a única instalada, e o navegador de uma escola raramente tem a variante
- * exata. O recuo para a lista inteira fica: uma lista vazia seria pior que uma lista no idioma errado, que
- * ao menos a pessoa pode ouvir e rejeitar.
+ * ⚠️ `#opt-sound` IS NOT CREATED HERE, deliberately: it is this setting's mirror on the quick bar, outside the panel.
+ * `reflectMaster` reaches it with a guard (`if (sb)`), because a game may have no bar.
+ *
+ * Idempotent: calling it twice reuses what exists instead of duplicating it.
  */
-export function pickVoicesFor(voices, lang) {
-    const pref = lang.slice(0, 2).toLowerCase();
-    const iguais = voices.filter((v) => v.lang.slice(0, 2).toLowerCase() === pref);
-    return iguais.length ? iguais : voices;
-}
-/** "<name> (<lang>)" option label. */
-export function voiceLabel(v) {
-    return v.name + ' (' + v.lang + ')';
-}
-/** Whether the browser can list/switch audio outputs at all (gates the #audio-sinks hint copy). */
-export function sinksSupported(hasEnumerateDevices, hasAudioContextCtor) {
-    return hasEnumerateDevices && hasAudioContextCtor;
-}
-/** A device's option label, falling back to a 1-based "Saída N" when the browser withholds the real label
- *  (no getUserMedia permission granted yet). */
-export function sinkOptionLabel(d, index) {
-    return d.label || t('audio.sinkFallback', { n: index + 1 });
+export function mountAudioInside(t, ctx, card, list) {
+    // Each entry is either a control row or a CONTAINER the panel fills with rows of its own.
+    const pieces = [
+        /*
+         * 🔴 THE COMPOSITION OF ADR-0151 AND ITS ERRATA, from general to particular:
+         *   · BLIND MODE first, because it is the mode where the other sounds become the screen — and WITHOUT the hint: «é
+         *     redundante. Quem precisa sabe o que é»;
+         *   · the CANE beside it (and only in a game that answers that someone walks, ADR-0153);
+         *   · the SONAR, GUARD and GUIDE, each with its switch and volume: they are the shell's list;
+         *   · NARRATION and its volume, with the SPOKEN INDEX right after, because narration is what it shortens.
+         * 🔴 The GENERAL sound and volume live in the audio panel (`mountSoundInside`) — «toggle + barra para som geral
+         * voltam», the Dev said, and they came back to the sound panel, not the accessibility one. There is no separate
+         * navigation volume: it would be a second place for the list's three volumes (one place per choice, D2 of the record).
+         */
+        // ⚠️ Their own short keys, not the bar's `icon.blind`/`icon.tts`: those carry «(navegação sonora)» and «(TTS)», and
+        // a row keeps no explanation in parentheses (ADR-0158).
+        { id: 'opt-modocego', label: t('audio.modocego') },
+        // two positions, so a cycle row (ADR-0130 rule 3): built by `caneRow`, not by the kit
+        { id: 'cane-div', label: t('audio.cane'), hint: t('audio.cane.dica') },
+        { container: '@lista' }, // the shell's list: sonar, guard and guide
+        { id: 'opt-tts', label: t('audio.narracao'), hint: t('audio.tts.dica') },
+        { id: 'tts-vol', label: t('audio.ttsVol'), shape: 'cursor' },
+        // ADR-0183 §1, ADR-0196: the speech rate, 254 to 504 by 50 — six positions, so a list (ADR-0130 erratum)
+        { id: 'tts-ppm', label: t('audio.ttsPpm'), hint: t('audio.ttsPpm.dica'), shape: 'escolha' },
+        // ADR-0185: the child picks the voice, among the voices that speak the language — a list, since English passes five
+        { id: 'tts-voz', label: t('audio.voz'), shape: 'escolha' },
+        { id: 'opt-menuindex', label: t('audio.menuindex'), hint: t('audio.menuindex.dica') },
+        /*
+         * 🔴 NOT OFFERED by the engine (ADR-0151), in the Dev's words:
+         *   · the ENGINE, the VOICE and the voice TEST — «quem escolhe a voz é o jogo (cartucho), não o jogador. Jogador só
+         *     habilita/desabilita o TTS»;
+         *   · the PER-PLAYER AUDIO OUTPUTS and their detect button — «navegadores não são bons nisso».
+         * 📌 `initSettingsAudio`'s wiring for those ids STAYS and is guarded (`if (el)`): a game with markup of its own does
+         * not break. What changed is that the engine no longer OFFERS the choice to the child.
+         */
+    ];
+    /*
+     * ⚠️ IT RELABELS INSTEAD OF SKIPPING what already exists, which is why this function is also called from every open's
+     * `render()`: anything built once at boot captures the fallback language's text — `initI18n` applies the fallback
+     * synchronously and REQUESTS the preferred one, which arrives later — and a panel would serve its TITLE in one
+     * language and its ROWS in another. No unit test catches it: they all run in one language.
+     */
+    // ADR-0158: the rows go BEFORE the reset, never after it — the reset is the panel's last item, and «Voltar» its first.
+    const actions = card.querySelector(':scope > .overlay__actions');
+    for (const piece of pieces) {
+        if ('container' in piece) {
+            if (piece.container === '@lista') {
+                card.insertBefore(list, actions);
+                continue;
+            }
+            const jaHa = ctx.find('#' + piece.container);
+            if (jaHa) {
+                if (piece.label)
+                    jaHa.setAttribute('aria-label', piece.label);
+                continue;
+            }
+            const c = ctx.create('div');
+            c.id = piece.container;
+            c.className = 'ctrl-list';
+            c.setAttribute('role', 'group');
+            if (piece.label)
+                c.setAttribute('aria-label', piece.label);
+            card.insertBefore(c, actions);
+            continue;
+        }
+        const alreadyThere = ctx.find('#' + piece.id);
+        if (alreadyThere) {
+            const rowNode = alreadyThere.closest('.ctrl-row');
+            if (rowNode)
+                labelRow(rowNode, piece);
+            continue;
+        }
+        card.insertBefore(piece.id === 'cane-div' ? caneRow(t, ctx, piece) : controlRow(ctx, piece).row, actions);
+    }
 }
-/** A player's current sink select value ('' = default/shared). */
-export function sinkSelectValue(p) {
-    return (p && p.audioSink) || '';
+/**
+ * MOUNTS THE AUDIO PANEL'S INSIDE (ADR-0151 §2 item 4): the general sound — switch and volume — and then the shell's
+ * list with the four taste categories (music, ambience, interaction, earcons).
+ *
+ * ⚠️ THE IDS ARE THE ONES `initSettingsAudio` ALREADY LISTENS TO (`#audio-master`, `#audio-master-vol`, `#audio-list`). And
+ * the same order rule: mount BEFORE `init`. Idempotent and relabellable, like its hearing sibling.
+ */
+export function mountSoundInside(t, ctx, card, list) {
+    const actions = card.querySelector(':scope > .overlay__actions');
+    const rows = [
+        { id: 'audio-master', label: t('audio.som'), hint: t('audio.som.dica') },
+        { id: 'audio-master-vol', label: t('audio.volume'), shape: 'cursor' },
+    ];
+    for (const piece of rows) {
+        const alreadyThere = ctx.find('#' + piece.id);
+        if (alreadyThere) {
+            const rowNode = alreadyThere.closest('.ctrl-row');
+            if (rowNode)
+                labelRow(rowNode, piece);
+            continue;
+        }
+        card.insertBefore(controlRow(ctx, piece).row, list.parentNode === card ? list : actions);
+    }
+    if (list.parentNode !== card)
+        card.insertBefore(list, actions);
 }
 // ---------------------------------------------------------------------------------------------
 // DOM-facing (thin) — requires `document`/injected ctx
 // ---------------------------------------------------------------------------------------------
 export function initSettingsAudio(ctx) {
-    // ⚠️ PADRÃO DA ENGINE (ADR-0106 §4): quem injecta manda; quem não injecta deixa de ficar sem modo cego.
-    // O `setModoCegoValue` faz as três coisas que o `core/state` diz que um setter faz — grava, persiste, avisa
-    // — e nada mais: os efeitos (refazer os extras do nível) são reação, e quem reage assina o evento.
-    const setModoCego = ctx.setModoCego ?? state.setModoCegoValue;
+    const { t } = ctx.translator;
+    // ⚠️ THE ENGINE'S DEFAULT (ADR-0106 §4): whoever injects rules; whoever does not still gets blind mode.
+    // `setBlindModeValue` does the three things `core/state` says a setter does — store, persist, notify — and nothing
+    // more: the effects are reactions, and whoever reacts subscribes to the event.
+    const writeBlindMode = ctx.setBlindMode ?? ((on) => { ctx.settings.setBlindModeValue(on); });
     let audioDevices = [];
+    /*
+     * ⚠️ THE BROWSER TRAVELS AS FOUR FUNCTIONS, not as a global reached inside: a module that reaches `document` or
+     * `window` is refused by the ratchet (the reach ceiling is ZERO). What this file received through its own ports it
+     * passes down as ports.
+     */
+    const voice = createVoiceSettings(ctx, {
+        newOption: () => ctx.newElement('option'),
+        systemVoices: () => [...ctx.speech.voices()],
+        speakSample: (sample, chosen) => ctx.speech.speakSample(sample, chosen),
+        whenVoicesChange: (again) => ctx.speech.whenVoicesChange(again),
+    });
     function reflectMaster() {
         const b = ctx.$('#audio-master');
         if (b) {
             b.classList.toggle('is-on', ctx.getSoundOn());
             b.setAttribute('aria-pressed', String(ctx.getSoundOn()));
-            b.textContent = ctx.getSoundOn() ? '🔊 Ligado' : '🔇 Desligado';
+            b.textContent = toggleLabel(t, ctx.getSoundOn()); // the dictionary's words, no glyph in the name (ADR-0159 rule 12)
         }
         const v = ctx.$('#audio-master-vol');
         if (v)
@@ -140,40 +216,144 @@ export function initSettingsAudio(ctx) {
         if (sb)
             ctx.toggleBtn(sb, ctx.getSoundOn());
     }
+    /**
+     * The kit's ctx comes from the LIST NODE itself, not from a global `document` nor from a new contract field —
+     * `ownerDocument` is the document that list lives in, which is where its rows have to be born. Same shape as
+     * `ui/settings-aac`, and it is what removes this file's reach to `document` without touching `SettingsAudioCtx`.
+     */
+    const kitCtx = (list) => ({
+        find: (sel) => ctx.$(sel),
+        create: (tag) => list.ownerDocument.createElement(tag),
+    });
+    /**
+     * The same document, but KEEPING the element type.
+     *
+     * 📌 `PanelShellCtx.create` is `string → HTMLElement` on purpose: the shell only ever appends generic nodes, and
+     * widening it would be a one-way door on a published shape (ADR-0172). The sinks section needs a `<select>` that
+     * answers `.value`, so the typed factory lives HERE, over the same `ownerDocument`, instead of the contract
+     * growing a field for one caller.
+     */
+    const makerFor = (host) => (tag) => host.ownerDocument.createElement(tag);
+    /**
+     * ONE CATEGORY ROW, in nodes: label, volume slider and toggle.
+     *
+     * 📌 NOT A KIT ROW, and not by taste: 📏 measured on 2026-09-23, `controlRow` builds «a label, a hint and ONE
+     * control» and this row carries TWO — the volume and the on/off of the same category. Same reason the visual
+     * panel's four paper-colour row stayed hand-built: inventing a shape for it would be giving a second answer to
+     * the question «what is a row».
+     */
+    function buildCatRow(kit, k) {
+        const row = kit.create('div');
+        row.className = 'ctrl-row';
+        const text = kit.create('span');
+        text.appendChild(kit.create('strong'));
+        row.appendChild(text);
+        const box = kit.create('span');
+        box.style.cssText = 'display:flex;gap:.5rem;align-items:center;flex-shrink:0';
+        const vol = kit.create('input');
+        vol.className = 'vol';
+        vol.setAttribute('type', 'range');
+        vol.setAttribute('min', '0');
+        vol.setAttribute('max', '100');
+        vol.setAttribute('step', '5');
+        vol.setAttribute('data-avol', k);
+        box.appendChild(vol);
+        const toggle = kit.create('button');
+        toggle.className = 'mode-btn switch';
+        toggle.setAttribute('type', 'button');
+        toggle.setAttribute('aria-pressed', 'false');
+        toggle.setAttribute('data-acat', k);
+        box.appendChild(toggle);
+        row.appendChild(box);
+        return row;
+    }
+    /** Creates what is missing IN THE RIGHT POSITION, rewrites the words of what stayed, removes what is no longer asked for. */
+    function mountCatRows(list, keys) {
+        const kit = kitCtx(list);
+        let previous = null;
+        // ⚠️ WHAT SURVIVES IS WHAT THE HOST STILL NAMES, not simply what is in `keys`. A row whose category lost its
+        // name would otherwise stay on screen with the old label — asked for by the key list, offered by nobody.
+        const named = new Set();
+        for (const k of keys) {
+            const c = ctx.audioCats.find((x) => x.k === k);
+            if (!c)
+                continue; // a category this host does not name: what has no name is not offered
+            named.add(k);
+            let row = list.querySelector(`[data-acat="${k}"]`)?.closest('.ctrl-row') ?? null;
+            if (!row) {
+                row = buildCatRow(kit, k);
+                // ⚠️ INSERTED in place, never appended and reordered: a node that changes parent is removed and put back,
+                // and the browser blurs it on removal — that would take the cursor from whoever is setting the volume.
+                list.insertBefore(row, previous ? previous.nextSibling : list.firstChild);
+            }
+            const label = t(c.lbl);
+            const strong = row.querySelector('strong');
+            if (strong)
+                strong.textContent = label;
+            row.querySelector(`[data-avol="${k}"]`)?.setAttribute('aria-label', t('audio.cat.volumeDe', { c: label }));
+            row.querySelector(`[data-acat="${k}"]`)?.setAttribute('aria-label', label);
+            previous = row;
+        }
+        for (const b of [...list.querySelectorAll('[data-acat]')]) {
+            if (!named.has(b.dataset.acat ?? ''))
+                b.closest('.ctrl-row')?.remove();
+        }
+    }
+    /** The STATE of each row — the volume where it is and the toggle saying what it says. */
+    function reflectCatRows(list, keys) {
+        const state = ctx.getAudioCat();
+        if (!state)
+            return;
+        for (const k of keys) {
+            const a = state[k];
+            if (!a)
+                continue;
+            const vol = list.querySelector(`input[data-avol="${k}"]`);
+            if (vol)
+                vol.value = String(volPercent(a.vol));
+            const toggle = list.querySelector(`button[data-acat="${k}"]`);
+            if (toggle) {
+                toggle.classList.toggle('is-on', a.on);
+                toggle.setAttribute('aria-pressed', String(a.on));
+            }
+        }
+    }
+    /** The listeners, ONCE per list and by delegation — rows come and go, the list stays. */
     function wireCatControls(el) {
-        el.querySelectorAll('button[data-acat]').forEach((b) => {
-            b.addEventListener('click', () => {
-                const k = b.dataset.acat;
-                if (!k)
-                    return;
-                const state = ctx.getAudioCat();
-                if (!state || !state[k])
-                    return;
-                state[k].on = !state[k].on;
-                ctx.setCatGain(k);
-                b.classList.toggle('is-on', state[k].on);
-                b.setAttribute('aria-pressed', String(state[k].on));
-                refreshMarks(); // a marca acompanha a MUDANÇA, não só o redesenho — ver a nota em refreshMarks
-            });
+        if (el.dataset.catsWired)
+            return;
+        el.dataset.catsWired = '1';
+        el.addEventListener('click', (ev) => {
+            const b = ev.target?.closest('button[data-acat]');
+            const k = b?.dataset.acat;
+            if (!b || !k)
+                return;
+            const state = ctx.getAudioCat();
+            if (!state || !state[k])
+                return;
+            state[k].on = !state[k].on;
+            ctx.setCatGain(k);
+            b.classList.toggle('is-on', state[k].on);
+            b.setAttribute('aria-pressed', String(state[k].on));
+            refreshMarks(); // the mark follows the CHANGE, not only the redraw — see the note in refreshMarks
         });
-        el.querySelectorAll('input[data-avol]').forEach((s) => {
-            s.addEventListener('input', () => {
-                const k = s.dataset.avol;
-                if (!k)
-                    return;
-                const state = ctx.getAudioCat();
-                if (!state || !state[k])
-                    return;
-                state[k].vol = (+s.value) / 100;
-                state[k].on = true;
-                ctx.setCatGain(k);
-                const bb = el.querySelector('button[data-acat="' + k + '"]');
-                if (bb) {
-                    bb.classList.add('is-on');
-                    bb.setAttribute('aria-pressed', 'true');
-                }
-                refreshMarks();
-            });
+        el.addEventListener('input', (ev) => {
+            const s = ev.target?.closest('input[data-avol]');
+            const k = s?.dataset.avol;
+            if (!s || !k)
+                return;
+            const state = ctx.getAudioCat();
+            if (!state || !state[k])
+                return;
+            state[k].vol = (+s.value) / 100;
+            state[k].on = true;
+            ctx.setCatGain(k);
+            const bb = el.querySelector('button[data-acat="' + k + '"]');
+            if (bb) {
+                bb.classList.add('is-on');
+                bb.setAttribute('aria-pressed', 'true');
+            }
+            refreshMarks();
         });
     }
     function renderCategoryList(sel, keys) {
@@ -181,10 +361,12 @@ export function initSettingsAudio(ctx) {
         const state = ctx.getAudioCat();
         if (!el || !state)
             return;
-        el.innerHTML = catsListHTML(keys, ctx.audioCats, state);
+        mountCatRows(el, keys);
+        reflectCatRows(el, keys);
         wireCatControls(el);
-        // A prosa volta para o rodapé depois de as linhas serem reconstruídas (CLAUDE.md §4, #109).
-        ctx.fillExplain?.(ctx.$('#audio .overlay__card'));
+        // The prose goes back to the footer after the rows change (CLAUDE.md §4, #109) — in the card of WHOEVER holds
+        // this list: since ADR-0151 there are two panels, and the other one's footer is not this child's.
+        ctx.fillExplain?.(el.closest('.overlay__card'));
     }
     function renderNavSound() {
         renderCategoryList('#navsound-list', NAV_CATS);
@@ -193,120 +375,47 @@ export function initSettingsAudio(ctx) {
         if (m && state)
             m.value = String(navMasterVolume(state, NAV_CATS));
     }
-    function reflectTts() {
-        const b = ctx.$('#opt-tts');
-        const state = ctx.getAudioCat();
-        const on = !!(state && state.tts && state.tts.on);
-        if (b) {
-            ctx.toggleBtn(b, on);
-            b.textContent = toggleLabel(on);
-        }
-        const e = ctx.$('#tts-engine');
-        if (e)
-            e.value = ctx.tts.getEngineSel();
-    }
-    /**
-     * O alternador do ÍNDICE "6 de 10" (ADR-0044, item 3).
-     *
-     * Ele mora ao lado da narração por voz e não num painel de visual, porque é a NARRAÇÃO que ele muda: quem
-     * desliga o índice está encurtando o que ouve a cada passo, e é aqui que essa pessoa vem quando o que ouve
-     * incomoda.
-     */
-    function reflectMenuIndex() {
-        const b = ctx.$('#opt-menuindex');
-        if (b) {
-            ctx.toggleBtn(b, state.menuIndexOn);
-            b.textContent = toggleLabel(state.menuIndexOn);
-        }
-    }
-    function populateTtsEngines() {
-        const sel = ctx.$('#tts-engine');
-        if (!sel || sel.dataset.filled)
-            return;
-        sel.dataset.filled = '1';
-        opcoesDeMotor(ctx.tts.neuralDisponivel !== false).forEach(([v, l]) => {
-            const o = document.createElement('option');
-            o.value = v;
-            o.textContent = t(l);
-            sel.appendChild(o);
-        });
-        sel.value = ctx.tts.getEngineSel();
-    }
-    function populateTtsVoices() {
-        const sel = ctx.$('#tts-voice');
-        if (!sel)
-            return;
-        let voices = [];
-        try {
-            voices = (window.speechSynthesis && window.speechSynthesis.getVoices()) || [];
-        }
-        catch (e) { /* noop */ }
-        const list = pickVoicesFor(voices, bcp47());
-        sel.innerHTML = '';
-        if (!list.length) {
-            const o = document.createElement('option');
-            o.textContent = t('audio.noSystemVoices');
-            sel.appendChild(o);
-            ctx.tts.setVoiceObj(null);
-            return;
-        }
-        list.forEach((v) => {
-            const o = document.createElement('option');
-            o.value = v.name;
-            o.textContent = voiceLabel(v);
-            sel.appendChild(o);
-        });
-        const saved = ctx.store.get('incl_tts_voice', null);
-        const pick = list.find((v) => v.name === saved) || list[0];
-        sel.value = pick.name;
-        ctx.tts.setVoiceObj(pick);
-    }
-    function hasEnumerateDevices() {
-        return !!(navigator.mediaDevices && navigator.mediaDevices.enumerateDevices);
-    }
-    function hasAudioContextCtor() {
-        const w = window;
-        return typeof (w.AudioContext || w.webkitAudioContext) !== 'undefined';
-    }
+    // 📌 Both questions are the HOST's (ADR-0227), and they stay TWO because they produce different sentences: the browser
+    // cannot do it, and there is no device at all, are not the same news to someone looking for their headphones.
+    const hasEnumerateDevices = () => ctx.audioOutputs.canList();
+    const hasAudioContextCtor = () => ctx.audioOutputs.canRoute();
     function renderSinks(devices) {
         const el = ctx.$('#audio-sinks');
         if (!el)
             return;
-        el.innerHTML = '';
+        // 📌 The document comes from the list node, never from the global one — same shape as the rest of this file
+        // since the conversion to nodes, and it is what removes the reach to `document` without asking the contract
+        // for a new field (ADR-0221 step 7d).
+        const make = makerFor(el);
+        while (el.firstChild)
+            el.removeChild(el.firstChild);
         if (!devices.length) {
             const supported = sinksSupported(hasEnumerateDevices(), hasAudioContextCtor());
-            el.innerHTML = '<p class="opt-hint">' +
-                t(supported ? 'audio.sinksHint' : 'audio.sinksUnsupported') +
-                '</p>';
+            // ⚠️ TWO SENTENCES, not one: «this browser CANNOT do it» and «there is no device yet» are different things to
+            // a child who is looking for their own headphones, and the dictionary has always had both.
+            const hint = make('p');
+            hint.className = 'opt-hint';
+            hint.textContent = t(supported ? 'audio.sinksHint' : 'audio.sinksUnsupported');
+            el.appendChild(hint);
             return;
         }
         const players = ctx.getPlayers();
         const n = Math.max(1, ctx.getNumPlayers());
+        /*
+         * 🔴 A PLAYER'S OUTPUT IS A CHOICE, AND ITS SIZE PICKS THE CONTROL (ADR-0130 rule 3): «shared» and up to four devices are
+         * a cycle row «◀ Jogador 1: Fone USB ▶», more a dropdown. The size is the room's today — it is drawn again at every
+         * detection, so a fifth headset plugged in turns the rows into dropdowns.
+         */
+        const outputs = [{ value: '', label: t('audio.sinkShared') }, ...devices.map((d, k) => ({ value: d.deviceId, label: sinkOptionLabel(t, d, k) }))];
         for (let i = 0; i < n; i++) {
             const p = players[i];
-            const row = document.createElement('div');
+            const name = t('audio.playerN', { n: i + 1 });
+            const row = make('div');
             row.className = 'ctrl-row';
-            const lbl = document.createElement('label');
-            lbl.textContent = t('audio.playerN', { n: i + 1 });
-            lbl.setAttribute('for', 'sink-p' + i);
-            const sel = document.createElement('select');
-            sel.className = 'vol';
-            sel.id = 'sink-p' + i;
-            const o0 = document.createElement('option');
-            o0.value = '';
-            o0.textContent = t('audio.sinkShared');
-            sel.appendChild(o0);
-            devices.forEach((d, k) => {
-                const o = document.createElement('option');
-                o.value = d.deviceId;
-                o.textContent = sinkOptionLabel(d, k);
-                sel.appendChild(o);
-            });
-            sel.value = sinkSelectValue(p);
-            sel.addEventListener('change', () => {
+            const choice = mountChoice(kitCtx(el), { label: name, values: outputs, current: sinkSelectValue(p) }, (value) => {
                 if (!p)
                     return;
-                p.audioSink = sel.value || null;
+                p.audioSink = value || null;
                 ctx.store.set('incl_sink_p' + i, p.audioSink || '');
                 if (p._ac) {
                     try {
@@ -318,84 +427,96 @@ export function initSettingsAudio(ctx) {
                 }
                 ctx.srSay(t(p.audioSink ? 'sr.audio.sinkChanged' : 'sr.audio.sinkDefault', { n: i + 1 }));
             });
-            row.appendChild(lbl);
-            row.appendChild(sel);
+            choice.id = 'sink-p' + i;
+            if (choice.tagName === 'SELECT') {
+                // a dropdown keeps its name beside it; a cycle row already carries it in its own text
+                const lbl = make('label');
+                lbl.textContent = name;
+                lbl.htmlFor = choice.id;
+                row.appendChild(lbl);
+            }
+            else
+                row.classList.add('ctrl-row--passos');
+            row.appendChild(choice);
             el.appendChild(row);
         }
     }
     async function enumerateSinks() {
+        // without asking permission: only the outputs already known
         try {
-            if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {
-                const devs = await navigator.mediaDevices.enumerateDevices();
-                audioDevices = devs.filter((d) => d.kind === 'audiooutput');
-            }
+            audioDevices = [...await ctx.audioOutputs.list()];
         }
-        catch (e) { /* sem pedir permissão: só lista as saídas já conhecidas */ }
+        catch (e) { /* the port refused; the list stays as it is */ }
         renderSinks(audioDevices);
     }
     async function detectAudioDevices() {
+        // ⚠️ THE LIST EMPTIES when detection fails, and `enumerateSinks` above does NOT empty it: there an error means "I
+        // could not ask", here it means "the child asked and the answer is none". The two sentences the panel draws next are
+        // different, and so are the two `catch`es.
         try {
-            await navigator.mediaDevices.getUserMedia({ audio: true }).then((s) => s.getTracks().forEach((t) => t.stop())).catch(() => { });
-            const devs = await navigator.mediaDevices.enumerateDevices();
-            audioDevices = devs.filter((d) => d.kind === 'audiooutput');
+            audioDevices = [...await ctx.audioOutputs.detect()];
         }
         catch (e) {
             audioDevices = [];
         }
         renderSinks(audioDevices);
     }
-    function reflectModoCego() {
+    function drawBlindMode() {
         const b = ctx.$('#opt-modocego');
         if (b) {
-            ctx.toggleBtn(b, ctx.getModoCego());
-            b.textContent = toggleLabel(ctx.getModoCego());
+            ctx.toggleBtn(b, ctx.getBlindMode());
+            b.textContent = toggleLabel(t, ctx.getBlindMode());
         }
     }
     function renderAudio() {
         reflectMaster();
         renderCategoryList('#audio-list', GEN_CATS);
         renderNavSound();
-        reflectModoCego();
-        reflectTts();
-        populateTtsEngines();
-        populateTtsVoices();
-        const cd = ctx.$('#cane-div');
-        if (cd)
-            cd.value = String(ctx.getCaneBlockDiv());
-        void enumerateSinks(); // sem await no original: dispara e segue (lista assíncrona atualiza sozinha)
+        drawBlindMode();
+        voice.render();
+        reflectCane();
+        void enumerateSinks(); // not awaited: fire and carry on (the asynchronous list updates by itself)
         refreshMarks();
     }
     /**
-     * A marca de "saiu do padrão" (ADR-0029).
+     * The left-the-default mark (ADR-0029).
      *
-     * Chamada de dentro dos HANDLERS de mudança, e não só do `renderAudio()`. Pendurei-a primeiro no render, e
-     * no jogo a marca não aparecia: mexer numa categoria atualiza aquela linha sozinha, sem redesenhar o painel.
-     * O ADR-0029 já avisava disso — "pode envelhecer na tela se um painel esquecer de atualizar depois de uma
-     * mudança" — e eu escrevi o aviso e caí nele na mesma tarde. A regra que sobra: a marca anda com quem
-     * ESCREVE o valor, nunca com quem desenha.
+     * Called from inside the change HANDLERS, not only from `renderAudio()`: changing a category updates that row by
+     * itself, without redrawing the panel, so a mark hung only on render goes stale on screen — ADR-0029 warns about it.
+     * The rule: the mark travels with whoever WRITES the value, never with whoever draws.
      *
-     * O recorte é o MESMO do reset deste menu, e isso não é economia —
-     * é a regra: só pode ser marcado o que tem padrão em DEFAULTS/`defaultAudioCat`. O motor de voz e a saída
-     * de áudio por jogador não têm, porque são escolha de DISPOSITIVO e não preferência restaurável; marcá-los
-     * exigiria inventar uma segunda opinião sobre o que é "padrão" para um fone.
+     * The cut is the SAME as this menu's reset, and that is the rule, not thrift: only what has a default in
+     * DEFAULTS/`defaultAudioCat` can be marked. The voice engine and the per-player audio output have none, because they
+     * are a DEVICE choice and not a restorable preference; marking them would mean inventing a second opinion on what a
+     * headset's "default" is.
      */
     function refreshMarks() {
         const state = ctx.getAudioCat();
-        const mudou = [];
-        const marcar = (sel, changed) => {
-            mudou.push(changed);
-            markChanged(ctx.$(sel)?.closest('.ctrl-row') ?? null, changed);
+        const didChange = [];
+        const mark = (sel, changed) => {
+            didChange.push(changed);
+            markChanged(t, ctx.$(sel)?.closest('.ctrl-row') ?? null, changed);
         };
-        marcar('#opt-modocego', ctx.getModoCego() !== DEFAULTS.modoCego);
-        marcar('#cane-div', ctx.getCaneBlockDiv() !== DEFAULTS.caneBlockDiv);
+        mark('#opt-modocego', ctx.getBlindMode() !== DEFAULTS.blindMode);
+        mark('#cane-div', ctx.getCaneBlockDiv() !== DEFAULTS.caneBlockDiv);
+        // ⚠️ TWO MENU MARKS, one per panel: the audio panel's lit by a changed sonar would send the child searching the
+        // wrong panel.
+        const fromSound = [];
         for (const c of ctx.audioCats) {
             const d = defaultAudioCat(c.k);
             const a = state?.[c.k];
-            marcar(`[data-acat="${c.k}"]`, !!a && (a.on !== d.on || a.vol !== d.vol));
+            const changedHere = !!a && (a.on !== d.on || a.vol !== d.vol);
+            if (GEN_CATS.includes(c.k)) {
+                fromSound.push(changedHere);
+                markChanged(t, ctx.$(`[data-acat="${c.k}"]`)?.closest('.ctrl-row') ?? null, changedHere);
+            }
+            else
+                mark(`[data-acat="${c.k}"]`, changedHere);
         }
-        markMenuChanged(ctx.$('[data-act="audio"]'), mudou);
+        markMenuChanged(t, ctx.$('[data-act="audio"]'), didChange);
+        markMenuChanged(t, ctx.$('[data-act="som"]'), fromSound);
     }
-    // ----- widgets estáticos (existem sempre no #audio; fiados UMA vez, nunca recriados por renderAudio) -----
+    // ----- static widgets (always present in #audio; wired ONCE, never recreated by renderAudio) -----
     const audioMasterBtn = ctx.$('#audio-master');
     if (audioMasterBtn)
         audioMasterBtn.addEventListener('click', () => {
@@ -424,175 +545,122 @@ export function initSettingsAudio(ctx) {
             renderNavSound();
         });
     /*
-     * ⚠️ ESTE BOTÃO ERA O ÚNICO DESTE PAINEL QUE NÃO ANUNCIAVA. Medido em 2026-09-08: os cinco irmãos daqui
-     * anunciam (som, TTS, divisor da bengala, índice de menu, saída de áudio) e o modo cego não — ele parecia
-     * anunciar porque UM cartucho o fazia a partir do próprio `setModoCego`, e o painel herdava o efeito.
+     * ⚠️ THIS BUTTON ANNOUNCES, like its siblings (sound, TTS, cane spacing, menu index, audio output): with the engine's
+     * default setter (`setBlindModeValue`, which stores/persists/notifies and does NOT speak), a game that does not inject
+     * its own setter would otherwise get a mute button. A toggle that changes state without saying so is invisible to a
+     * screen-reader user.
      *
-     * ⚠️ E ISSO PASSOU A EXPOR SILÊNCIO no mesmo dia: desde que o campo ganhou padrão da engine
-     * (`setModoCegoValue`, que grava/persiste/avisa e NÃO fala), um jogo que não injecta o seu próprio setter
-     * ficava com este botão mudo. Um alternador que muda estado sem o dizer é invisível para quem usa leitor de
-     * tela — a mesma família de defeito que o `reflectTTS` e o `reflectModoCego` já custaram aqui.
-     *
-     * O anúncio pertence a QUEM É ACCIONADO, não ao setter: `core/state` diz que o setter faz três coisas e só
-     * três. ⚠️ Consequência de lockstep, escrita para não se descobrir depois: quando o `game-platformer` subir
-     * de versão, tem de TIRAR o `srSay` do `setModoCego` dele, senão a criança ouve o estado duas vezes.
+     * The announcement belongs to WHOEVER IS ACTIVATED, not to the setter: `core/state` says a setter does three things
+     * and only three. ⚠️ Lockstep consequence, written so it is not discovered later: a cartridge whose own `setBlindMode`
+     * also speaks must drop that, or the child hears the state twice.
      */
     const mcBtn = ctx.$('#opt-modocego');
     if (mcBtn) {
         mcBtn.addEventListener('click', () => {
-            setModoCego(!ctx.getModoCego());
-            reflectModoCego();
-            ctx.srSay(t(ctx.getModoCego() ? 'sr.blind.on' : 'sr.blind.off'));
+            writeBlindMode(!ctx.getBlindMode());
+            drawBlindMode();
+            ctx.srSay(t(ctx.getBlindMode() ? 'sr.blind.on' : 'sr.blind.off'));
         });
     }
-    const caneDivSel = ctx.$('#cane-div');
-    if (caneDivSel) {
-        caneDivSel.value = String(ctx.getCaneBlockDiv());
-        caneDivSel.addEventListener('change', () => {
-            const div = parseCaneDiv(caneDivSel.value);
+    /**
+     * The cane's position in use. A host's own `<select>` gets its value; the engine's cycle row (`caneRow`) its words and
+     * value, with its name read from the row's hidden `<strong>` — where the game's word for the cane lands (ADR-0153).
+     */
+    function reflectCane() {
+        const cd = ctx.$('#cane-div');
+        if (!cd)
+            return;
+        const current = String(ctx.getCaneBlockDiv());
+        if (cd.tagName === 'SELECT') {
+            cd.value = current;
+            return;
+        }
+        const label = cd.closest('.ctrl-row')?.querySelector('strong')?.textContent || t('audio.cane');
+        updateChoice(cd, { label, values: canePositions(t), current });
+    }
+    const caneDiv = ctx.$('#cane-div');
+    if (caneDiv) {
+        reflectCane();
+        caneDiv.addEventListener('change', () => {
+            // a host's `<select>` holds its value; the engine's cycle row carries it in `data-value` (`mountChoice`)
+            const div = parseCaneDiv(caneDiv.tagName === 'SELECT' ? caneDiv.value : (caneDiv.dataset.value ?? ''));
             ctx.setCaneBlockDiv(div);
-            ctx.srSay(caneDivMessage(div));
+            ctx.srSay(caneDivMessage(t, div));
         });
     }
-    const ttsBtn = ctx.$('#opt-tts');
-    if (ttsBtn)
-        ttsBtn.addEventListener('click', () => {
-            const state = ctx.getAudioCat();
-            if (!state)
-                return;
-            state.tts.on = !state.tts.on;
-            ctx.setCatGain('tts');
-            reflectTts();
-            ctx.srSay(t(state.tts.on ? 'sr.audio.ttsOn' : 'sr.audio.ttsOff'));
-            if (state.tts.on)
-                ctx.tts.narrate(t('sr.audio.ttsOnSpoken'));
-        });
-    const idxBtn = ctx.$('#opt-menuindex');
-    if (idxBtn)
-        idxBtn.addEventListener('click', () => {
-            state.setMenuIndexOnValue(!state.menuIndexOn);
-            reflectMenuIndex();
-            // O anúncio da troca NÃO leva índice: ele não é item de lista nenhuma, e um "1 de 1" aqui seria ruído
-            // justamente no momento em que a criança está julgando se o ruído incomoda.
-            ctx.srSay(t(state.menuIndexOn ? 'sr.menu.indexOn' : 'sr.menu.indexOff'));
-        });
-    const ttsEngSel = ctx.$('#tts-engine');
-    if (ttsEngSel)
-        ttsEngSel.addEventListener('change', () => {
-            ctx.tts.setEngineSel(ttsEngSel.value);
-            ctx.store.set('incl_tts_engine', ttsEngSel.value);
-            if (ttsEngSel.value !== 'webspeech')
-                ctx.tts.loadTTS();
-            const opt = ttsEngSel.options[ttsEngSel.selectedIndex];
-            ctx.tts.narrate(t('sr.audio.engineSet', { motor: opt ? opt.text : '' }));
-        });
-    const ttsVoiceSel = ctx.$('#tts-voice');
-    if (ttsVoiceSel)
-        ttsVoiceSel.addEventListener('change', () => {
-            try {
-                const vs = window.speechSynthesis.getVoices();
-                ctx.tts.setVoiceObj(vs.find((v) => v.name === ttsVoiceSel.value) || null);
-                ctx.store.set('incl_tts_voice', ttsVoiceSel.value);
-            }
-            catch (e) { /* noop */ }
-            ctx.tts.narrate(t('sr.audio.voicePicked'));
-        });
-    const ttsTestBtn = ctx.$('#opt-tts-test');
-    if (ttsTestBtn)
-        ttsTestBtn.addEventListener('click', () => {
-            const txt = t('audio.voiceSample');
-            const engine = ctx.tts.getEngine();
-            if (ctx.tts.getEngineSel() !== 'webspeech' && engine && engine.speak) {
-                try {
-                    engine.speak(txt);
-                }
-                catch (e) { /* noop */ } // motor neural já carregado
-            }
-            else {
-                try {
-                    const ss = window.speechSynthesis;
-                    if (ss) {
-                        ss.cancel();
-                        const u = new SpeechSynthesisUtterance(txt);
-                        u.lang = 'pt-BR';
-                        const vo = ctx.tts.getVoiceObj();
-                        if (vo)
-                            u.voice = vo;
-                        u.rate = 1;
-                        u.volume = 1;
-                        ss.speak(u);
-                    }
-                }
-                catch (e) { /* noop */ } // fallback audível (volume 1) + dispara download do neural
-                if (ctx.tts.getEngineSel() !== 'webspeech')
-                    ctx.tts.loadTTS();
-            }
-            ctx.srSay(t('sr.audio.testingVoice'));
-        });
-    // ---- restaurar os padrões DESTE menu (ADR-0028) ----
     //
-    // A regra dura é o escopo: este botão restaura o que o menu AUDITIVO contém e nada mais. Um reset que
-    // alcançasse fora de si seria pior que a armadilha que ele existe para desfazer — a criança que desfaz um
-    // ajuste de som e perde de quebra a configuração motora fica sem conseguir jogar, e sem entender por quê.
+    // The hard rule is scope: this button restores what the HEARING menu contains and nothing else. A reset that reached
+    // beyond itself would be worse than the trap it exists to undo — a child who undoes a sound setting and loses the
+    // mobility setup along with it can no longer play, and does not understand why.
     //
-    // O que é deste menu: o modo cego, o espaçamento da bengala e as nove categorias do mixer. O motor de voz
-    // e a saída de áudio por jogador NÃO entram — são escolha de dispositivo, não preferência restaurável, e
-    // zerá-las tiraria da criança o fone que é dela numa sala compartilhada.
+    // What belongs to this menu: blind mode, the cane spacing and the mixer categories that are not the audio panel's.
+    // The voice engine and the per-player audio output do NOT — they are a device choice, not a restorable preference,
+    // and clearing them would take away the child's own headset in a shared room.
+    /** Resets the categories in `keys` (those that exist in the mixer) to their factory state. */
+    function resetCategories(keys) {
+        const state = ctx.getAudioCat();
+        if (!state)
+            return;
+        for (const k of keys) {
+            if (!state[k])
+                continue;
+            const d = defaultAudioCat(k);
+            state[k].on = d.on;
+            state[k].vol = d.vol;
+            ctx.setCatGain(k);
+        }
+    }
     const resetBtn = ctx.$('#audio-reset');
     if (resetBtn)
         resetBtn.addEventListener('click', () => {
-            setModoCego(DEFAULTS.modoCego);
+            writeBlindMode(DEFAULTS.blindMode);
             ctx.setCaneBlockDiv(DEFAULTS.caneBlockDiv);
-            const state = ctx.getAudioCat();
-            if (state)
-                for (const c of ctx.audioCats) {
-                    const d = defaultAudioCat(c.k);
-                    if (!state[c.k])
-                        continue;
-                    state[c.k].on = d.on;
-                    state[c.k].vol = d.vol;
-                    ctx.setCatGain(c.k);
-                }
+            // 🔴 THIS MENU DOES NOT HOLD THE MUSIC (ADR-0151): resetting it here would reach beyond itself — the scope rule,
+            // above. Everything that is not a taste category belongs to this panel.
+            resetCategories(ctx.audioCats.map((c) => c.k).filter((k) => !GEN_CATS.includes(k)));
             renderAudio();
-            reflectModoCego();
-            reflectTts();
-            reflectMenuIndex();
+            drawBlindMode();
             ctx.srSay(t('sr.audio.reset'));
         });
-    try {
-        if (window.speechSynthesis)
-            window.speechSynthesis.onvoiceschanged = populateTtsVoices;
-    }
-    catch (e) { /* noop */ }
-    const ttsVolEl = ctx.$('#tts-vol');
-    if (ttsVolEl)
-        ttsVolEl.addEventListener('input', () => {
-            const state = ctx.getAudioCat();
-            if (!state)
-                return;
-            state.tts.vol = (+ttsVolEl.value) / 100;
-            state.tts.on = true;
-            ctx.setCatGain('tts');
-            reflectTts();
+    // The AUDIO panel's reset: the taste categories and nothing else.
+    const soundReset = ctx.$('#som-reset');
+    if (soundReset)
+        soundReset.addEventListener('click', () => {
+            resetCategories(GEN_CATS);
+            renderAudio();
+            ctx.srSay(t('sr.audio.reset'));
         });
     const audioDetectBtn = ctx.$('#audio-detect');
     if (audioDetectBtn)
         audioDetectBtn.addEventListener('click', () => { void detectAudioDevices(); });
-    reflectMaster(); // estado inicial do botão/slider mestre, antes de qualquer abertura do painel
+    reflectMaster(); // initial state of the master button/slider, before the panel is ever opened
     /*
-     * ⚠️ O PAINEL ASSINA O EVENTO, e isto não é uma ideia nova: é a decisão que o `core/state` já tinha
-     * escrito ao lado do `setModoCegoValue` — «o setter faz três coisas e só três: grava, persiste, avisa. Os
-     * efeitos … são reação, e quem reage assina o evento».
+     * ⚠️ THE PANEL SUBSCRIBES TO THE EVENT — the decision `core/state` writes next to `setBlindModeValue`: a setter stores,
+     * persists and notifies, and effects are reactions, subscribed by whoever reacts.
      *
-     * Sem esta assinatura, um jogo que NÃO injecta o seu próprio `setModoCego` liga o modo cego pelo ícone da
-     * barra e o botão `#opt-modocego` deste painel continua a dizer «Desligado», com `aria-pressed=false` — o
-     * controlo a mentir o estado para o leitor de tela. É o gémeo exacto do defeito do `reflectTTS` que já está
-     * registado no `ui/pause-icons`, e não vale a pena descobri-lo uma terceira vez.
+     * Without it, a game that does NOT inject its own `setBlindMode` switches blind mode on through the bar's icon and this
+     * panel's `#opt-modocego` keeps saying off, with `aria-pressed=false` — the control lying about the state to the screen
+     * reader.
      *
-     * ⚠️ É seguro para quem JÁ reflecte a partir do seu próprio setter: reflectir é idempotente — relê o estado
-     * e reescreve o botão. Um anúncio duplicado seria outra história, e por isso a assinatura NÃO anuncia: o
-     * ícone da barra já diz `sr.icon.blindOn`/`Off` por si.
+     * ⚠️ It is safe for whoever ALREADY reflects from their own setter: reflecting is idempotent — it rereads the state and
+     * rewrites the button. A duplicated announcement would be another matter, which is why the subscription does NOT
+     * announce: the bar's icon already speaks for itself.
      */
-    state.on('modoCego', () => { reflectModoCego(); });
-    return { renderAudio, reflectModoCego, reflectTts };
+    ctx.on('blindMode', () => { drawBlindMode(); }); // through the root's door: released by its `dispose()`
+    /** One category, in place: the lists hold rows only once the panel has drawn them, and a row not there is not drawn here. */
+    function reflectCategory(k) {
+        if (k === 'tts')
+            voice.reflectTts();
+        for (const sel of ['#audio-list', '#navsound-list']) {
+            const list = ctx.$(sel);
+            if (list)
+                reflectCatRows(list, [k]);
+        }
+        const navMaster = ctx.$('#navsound-master');
+        const state = ctx.getAudioCat();
+        if (navMaster && state)
+            navMaster.value = String(navMasterVolume(state, NAV_CATS));
+        refreshMarks();
+    }
+    return { renderAudio, reflectBlindMode: drawBlindMode, reflectTts: voice.reflectTts, reflectCategory };
 }