arcane-os 0.50.0 → 0.51.1

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## 0.51.1
+
+- Restore the published `node-http-server` MIME map in development and packaged
+  preview serving. PDFs, Markdown and supported audio/video files retain their
+  declared content types; generated representations reuse the same public map.
+  Existing text charsets, unknown-extension binary fallback, complete file
+  contents, routing, conditional GET/HEAD and server lifecycle remain unchanged.
+  No new dependency, application setting or installed-file patch is required.
+
+## 0.51.0
+
+- Add synchronous native speech `provider.setDefaultVoice(voiceURI|null)`.
+  Update the live catalog and future preparations without replacing the
+  provider or altering explicit voices and prepared, queued or active speech.
+  Catalog subscriptions can apply an application-owned choice after voice
+  discovery; repeated values are silent and reentrant changes avoid stale
+  catalog delivery. Voice preference policy remains application-owned.
+- Add `fetchSystemOneRequest` through `arcane-os/ai/twin-cloud` for explicit
+  model, complete caller-owned state and questions, and the complete native
+  System One response. Reuse the existing JSON transport, retry observers,
+  diagnostics and cancellation. Applications retain question definitions,
+  scoring policy, model selection and answer interpretation; no history,
+  fabricated tool calls, prompt conversion or new dependency is introduced.
+- Keep all native recognition-language suggestions visible when the editable
+  picker opens or reopens. Filter only after text changes, show native language
+  and region labels, preserve exact custom BCP47 tags, and keep keyboard and
+  focus interaction in the shared speech control. The picker is available in
+  live-transcription mode before capture and disabled during capture or outside
+  that mode. Conversation language, Chat controls and capture payloads remain
+  unchanged.
+
 ## 0.50.0
 
 - Add `createBrowserSpeechSynthesisProvider` through `arcane-os/ai/browser-speech`.

package/README.md

@@ -19,7 +19,7 @@ version-locked SDK runtime, while an integrated Arcane checkout uses its live
 `arcane/` runtime. Both profiles share the theme, packaging, event, cancellation,
 and browser run contracts while retaining their selected application layout.
 
-This checkout defines the `0.50.0` SDK contract. Applications pin one exact npm
+This checkout defines the `0.51.1` SDK contract. Applications pin one exact npm
 version and lockfile; registry state is deliberately not baked into application
 artifacts.
 

package/browser-runtime/ai/browser-speech-synthesis.mjs

@@ -101,10 +101,11 @@ export function createBrowserSpeechSynthesisProvider({id, model, language} = {})
 
     const modelId = model.id;
     const modelName = model.name;
-    const defaultVoice = model.defaultVoice || null;
+    let defaultVoice = model.defaultVoice || null;
     const playbacks = new Set();
     const catalogObservers = new Set();
     let catalogSource = null;
+    let catalogRevision = 0;
     let state = 'unloaded';
     let generation = 0;
     let unloadOperation = null;
@@ -165,8 +166,25 @@ export function createBrowserSpeechSynthesisProvider({id, model, language} = {})
     }
 
     function publishCatalog() {
+        const revision = ++catalogRevision;
         const current = catalog();
-        for (const observer of catalogObservers) observeCallback(observer, current);
+        for (const observer of catalogObservers) {
+            // A catalog observer can select a new default and publish its replacement.
+            if (revision !== catalogRevision) return;
+            observeCallback(observer, current);
+        }
+    }
+
+    function setDefaultVoice(voice = null) {
+        assertOpen();
+        if (voice !== null && !is.string(voice)) {
+            throw new TypeError('Browser speech synthesis default voice must be a string.');
+        }
+        const nextVoice = voice || null;
+        if (defaultVoice === nextVoice) return defaultVoice;
+        defaultVoice = nextVoice;
+        publishCatalog();
+        return defaultVoice;
     }
 
     function detachCatalog() {
@@ -485,6 +503,7 @@ export function createBrowserSpeechSynthesisProvider({id, model, language} = {})
         maxConcurrentRequests: 1,
         catalog,
         subscribeCatalog,
+        setDefaultVoice,
         status,
         prepare,
         play(payload, options = {}) {

package/browser-runtime/ai/twin-cloud.mjs

@@ -3,6 +3,7 @@ import {arcaneLogging} from '../logging.mjs';
 
 const is = new Is(false);
 const twinChatURL = 'https://inference.do-ai.run/v1/chat/completions';
+const twinSystemOneURL = 'https://inference.do-ai.run/v1/systemone';
 
 /** A stateless TWiN request; browser AI shares the HTTP and format owners below. */
 export async function fetchRequest({
@@ -87,6 +88,72 @@ export async function fetchRequest({
     }
 }
 
+/** Submit caller-owned state and questions without interpreting the provider's answers. */
+export async function fetchSystemOneRequest({
+    twinKey,
+    model,
+    state,
+    questions,
+    signal = null,
+    id = Date.now(),
+    onRequest = function observeSystemOneRequest(){},
+    onResponse = function observeSystemOneResponse(){},
+    onRetry = null
+} = {}){
+    if(signal?.aborted){
+        throw normalizeAIRequestAbort(signal.reason);
+    }
+    if(!is.string(twinKey) || !twinKey){
+        const error = new Error('AI provider is not configured.');
+        error.code = 'AI_PROVIDER_NOT_CONFIGURED';
+        throw error;
+    }
+    if(!is.string(model) || !model){
+        throw new TypeError('TWiN fetchSystemOneRequest requires an explicit model.');
+    }
+
+    const request = {model, state, questions};
+    // Capture the caller's complete payload before a diagnostic observer runs.
+    const body = JSON.stringify(request);
+    try{
+        await onRequest(
+            request,
+            id,
+            {operation:'systemone', transport:'http', destination:twinSystemOneURL}
+        );
+        if(signal?.aborted){
+            throw normalizeAIRequestAbort(signal.reason);
+        }
+        const response = await fetchJSONResponse(
+            twinSystemOneURL,
+            {
+                method:'POST',
+                credentials:'omit',
+                headers:{
+                    'Content-Type':'application/json',
+                    Authorization:`Bearer ${twinKey}`
+                },
+                body,
+                ...(signal ? {signal} : {})
+            },
+            {onRetry}
+        );
+        if(signal?.aborted){
+            throw normalizeAIRequestAbort(signal.reason);
+        }
+        await onResponse(response, id, false);
+        if(signal?.aborted){
+            throw normalizeAIRequestAbort(signal.reason);
+        }
+        return response;
+    }catch(error){
+        if(isAIRequestAbort(error, signal)){
+            throw normalizeAIRequestAbort(error);
+        }
+        throw error;
+    }
+}
+
 export function isAIRequestAbort(error, signal){
     return signal?.aborted
         || error?.name === 'AbortError'

package/docs/reference/ai/browser-speech.md

@@ -113,16 +113,35 @@ function playIntroduction(input, voice) {
 `catalog()` synchronously returns an array of model records. Each model has
 `speech:{playback:'native'}` and `voices:[{id,name,lang,default,localService}]`;
 `id` is the exact native `voiceURI`. `subscribeCatalog(callback)` immediately
-replays that same shape and updates it on `voiceschanged`, returning an
-unsubscribe function. An initially empty inventory is ordinary pending browser
+replays that same shape and updates it on `voiceschanged` or a changed default,
+returning an unsubscribe function. An initially empty inventory is ordinary pending browser
 state. There is no polling, discovery utterance, model download, or page-load
 barrier. Language selectors derive their choices from this actual inventory.
 
+`provider.setDefaultVoice(voiceURI)` updates the provider's current
+`catalog()[0].defaultVoice` synchronously and returns that current value.
+The application may call it from its catalog subscription after asynchronous
+voice discovery or when its saved selection changes. The SDK supplies no
+voice-name preference: preserve an explicit saved choice in the application
+and pass the exact native `voiceURI`. Repeating the current value is a no-op,
+so a catalog subscription can apply the same choice without notification loops.
+`null`, an empty string, or an omitted argument clears the configured default
+and restores the existing browser-default behavior. A non-string, non-null
+value throws `TypeError`; an unloading or disposed provider retains its
+existing lifecycle error. A voice need not be present when setting the default:
+the existing preparation/playback availability behavior below still applies.
+
+Only future preparations use the new default. Explicit request voices and
+already-prepared, queued, or active speech keep their selected voice. Updating
+the default does not load, unload, replace, cancel, pause, resume, or speak.
+AI's ordinary speech path reads this current catalog for new requests, so no
+provider reconfiguration is necessary.
+
 `prepare({input,voice?,language?,speed?},{signal?})` returns an inert
 `{kind:'native-speech',input,voice,language,speed,play(options)}` descriptor.
 `play(payload,{signal,onState})` is the explicit-preview convenience. Both
-preserve complete input. Omitted voice uses the configured `model.defaultVoice`
-or the actual browser default; a supplied voice is never replaced with a named
+preserve complete input. Omitted voice uses the current default, initially
+`model.defaultVoice`, or the actual browser default; a supplied voice is never replaced with a named
 SDK alias. Language comes from that voice unless explicitly provided. Neither
 API reads the conversation's language preference. A saved voice waits for
 `voiceschanged` if the inventory is empty; a nonempty inventory missing it

package/docs/reference/ai/twin-cloud.md

@@ -116,11 +116,72 @@ managed import map. Browser Fetch and CORS behavior still apply. Importing it
 does not instantiate `AI`, read saved preferences, configure speech, or change
 the existing `arcane-os/ai` browser entry.
 
+## Evaluate caller-owned state with System One
+
+Use the named `fetchSystemOneRequest` export for the provider's native
+state-and-questions operation. The application supplies the model and complete
+provider-compatible `state` and `questions`; the SDK selects no model or scoring
+policy and assigns no meaning to questions, answer keys, or scales.
+
+```javascript
+import {fetchSystemOneRequest} from 'arcane-os/ai/twin-cloud';
+
+const response = await fetchSystemOneRequest({
+    twinKey: applicationRuntime.twinKey,
+    model: 'typesafe-jev-1.13.0',
+    state: applicationState,
+    questions: applicationQuestions,
+    signal: controller.signal
+});
+```
+
+`applicationRuntime`, `applicationState`, `applicationQuestions`, and
+`controller` are supplied by the application. The example's JEV identifier is
+an explicit caller selection, not an SDK default. For OSS chat-completion models
+such as `openai-gpt-oss-120b` and `openai-gpt-oss-20b`, use `fetchRequest` with
+caller-owned messages and structured-output settings instead. The application
+chooses the operation matching its model's provider contract.
+
+```javascript
+fetchSystemOneRequest({
+    twinKey,
+    model,
+    state,
+    questions,
+    signal,
+    id,
+    onRequest,
+    onResponse,
+    onRetry
+})
+// Promise<complete parsed provider JSON>
+```
+
+The SDK posts exactly `{model,state,questions}` as JSON to
+`https://inference.do-ai.run/v1/systemone`, using `twinKey` only as bearer
+authentication. It adds no prompt, chat envelope, tool call, output limit, or
+answer conversion. Caller content stays unchanged within ordinary JSON
+transport encoding. The request is serialized before `onRequest`, so that
+diagnostic callback cannot rewrite the dispatched payload. The entire parsed
+provider JSON reaches `onResponse` and the returned promise without selecting
+or transforming answers.
+
+The explicit key/model requirements, optional `signal`, `id`, callbacks,
+retry observer, complete errors, and lack of retained history follow the shared
+request behavior above. `onRequest(request,id,metadata)` receives
+`{operation:'systemone',transport:'http',destination:'https://inference.do-ai.run/v1/systemone'}`
+as metadata. `onResponse(response,id,false)` receives the complete parsed
+response. Both callbacks are awaited; failures propagate and cancellation is
+checked again after they settle. The existing `fetchJSONResponse` owner
+provides the same HTTP retries and cancellation for this operation; no separate
+transport or retry loop is created.
+
 ### Shared low-level integration helpers
 
 The same module also exports the helpers used by browser `AI.js`. Ordinary
-callers use `fetchRequest`; these exports let SDK transport integration share
-the existing implementation rather than maintain another retry or body reader.
+callers use `fetchRequest` or `fetchSystemOneRequest`; these exports let SDK
+transport integration share the existing implementation rather than maintain
+another retry or body reader.
 
 | Export | Contract |
 | --- | --- |

package/docs/reference/availability-and-normalization.md

@@ -80,6 +80,7 @@ version; WebKitGTK availability must not be generalized to macOS.
 | Use local AI without coupling app code to Ollama HTTP | `Arcane.localAI`, `Arcane.ai`, or `/arcane/modules/Ollama.js` | Primarily **Native**; Android exposes a narrower admitted inference projection | Admission, errors, and managed-operation events are normalized. Direct Ollama response envelopes remain **Provider-native**. |
 | Use TWiN Cloud from the renderer profile | `/arcane/modules/AI.js` | **Cloud** from an allowed browser/native renderer | High-level chat behavior is normalized by the module. The TWiN access key authenticates remote LLM chat; raw provider diagnostics remain provider-specific. No automatic cloud fallback is inferred from local failure. |
 | Send one TWiN Cloud request with an explicit key and model | `fetchRequest` from `arcane-os/ai/twin-cloud` | **Node** and **Browser**, using standard Fetch and a remote HTTPS provider | Keeps complete messages and returns the full parsed provider JSON. Rejected Fetch and HTTP 529 share three retries after 3000 ms; HTTP 429 overload retains unlimited three-second retries. Optional `onRetry` reports waiting/requesting phases without blocking recovery. Shared structured-output mapping and cancellation match browser TWiN transport. No browser profile, AI/user singleton, DBOPFS, or retained request history is created. |
+| Evaluate caller-owned state and questions with TWiN System One | `fetchSystemOneRequest` from `arcane-os/ai/twin-cloud` | **Node** and **Browser**, using standard Fetch and a remote HTTPS provider | Posts the explicit model and complete state/questions through the existing JSON transport. Returns the entire parsed provider result and shares its retry, diagnostic, and cancellation behavior. Model choice, question definitions, answer interpretation, and scoring policy stay with the caller; no conversation state is retained. |
 | Use speech through one application helper | `/arcane/modules/AI.js` and `Arcane.speech` | **Browser** or **Native** | Whisper and Kokoro keep their on-device paths; explicitly selected Web Speech STT and TWiN Cloud TTS declare their non-local behavior. The helper automatically cleans only the outbound synthesis-input copy and normalizes application-facing audio/text behavior while request/response plumbing differs below that boundary. |
 | Inspect or manage raw Ollama models | `Arcane.ollama` or `/arcane/modules/Ollama.js` | **Native** desktop Core for management; narrower Android inference only | Wrapper method names, errors, streaming correlation, and admission are Arcane-controlled. Direct Ollama success envelopes are intentionally provider-native. |
 | Use native terminal, installation, user, provisioning, or machine controls | matching `Arcane.*` namespace | **Native** and app/capability restricted | Calls and errors use the common bridge contract. Platform results can be host-specific and are marked in the method guide. |

package/docs/reference/cli.md

@@ -374,6 +374,10 @@ HTTPS is the default for development and required for packaged browser previews.
 The published `node-http-server` 10.0.0 integration negotiates HTTP/2 or HTTP/1.1
 on the same HTTPS port using the configured PEM pair. Source routes, generated
 PWA resources, and conditional responses use the same serving pipeline.
+Static files retain the module's complete MIME map, including PDF, Markdown,
+audio and video. Generated representations use the same published map;
+unknown extensions retain `application/octet-stream`. No application MIME
+override is needed for these supported types.
 `--https` remains accepted but is no longer needed to select the transport.
 `--port` selects the HTTPS application port. A second HTTP listener returns
 `308` redirects to that HTTPS port, preserving the requested path and query.

package/docs/reference/inventory/package-api.json

@@ -6,7 +6,7 @@
     "minimumVersion": "22.23.2 for Node entrypoints",
     "moduleSystem": "ESM"
   },
-  "memberCount": 219,
+  "memberCount": 220,
   "runtimeSubpathPatterns": {
     "arcane-os/modules/*": "./runtime/arcane/modules/*",
     "arcane-os/entities/*": "./runtime/arcane/entities/*"
@@ -3452,6 +3452,20 @@
       "protocol": "TWiN Cloud complete-response chat",
       "normalization": "Preserves complete messages and parsed provider JSON; maps explicit structured-output, tool, and reasoning options; shares overload-only HTTP 429 retry after 3000 ms and cancellation; retains no browser profile, storage, or request history"
     },
+    {
+      "id": "twin-cloud:fetchSystemOneRequest",
+      "name": "fetchSystemOneRequest",
+      "displayName": "fetchSystemOneRequest()",
+      "kind": "function",
+      "signature": "async fetchSystemOneRequest({twinKey,model,state,questions,signal=null,id=Date.now(),onRequest,onResponse,onRetry=null}={})",
+      "entrypoints": ["arcane-os/ai/twin-cloud"],
+      "primaryImport": "arcane-os/ai/twin-cloud",
+      "group": "TWiN Cloud state-and-questions requests",
+      "summary": "Sends caller-owned model, state, and questions to the native System One endpoint with explicit credentials.",
+      "availability": "Node and Browser; remote HTTPS provider",
+      "protocol": "TWiN Cloud native System One request",
+      "normalization": "Preserves complete state and questions within JSON transport and returns the full parsed provider result; shares existing JSON transport retry, diagnostics, and cancellation; leaves model choice, scales, and answer interpretation with the caller and retains no history"
+    },
     {
       "id": "twin-cloud:fetchHTTPResponse",
       "name": "fetchHTTPResponse",

package/docs/reference/runtime-components.md

@@ -1682,8 +1682,19 @@ On desktop native capture, an accessible editable BCP47 language control occupie
 the feedback area instead of idle transcription/voice readiness boilerplate.
 `recognitionLanguage` defaults to `navigator.language`, accepts an explicit
 language tag without restricting it to the suggested choices, and is passed to
-the capture owner at start. The control is disabled during active capture so
-changes affect the next capture. Native voice loading, errors, and speaking
+the capture owner at start. Opening or reopening the editable picker shows all
+suggestions regardless of its saved/current value. Filtering begins only after
+the user changes the input text; initialization, programmatic configuration,
+and choosing a suggestion leave the full list available on the next opening.
+Suggestions display their native language and region names alongside the exact
+BCP47 tags; they are suggestions, not an exhaustive provider support inventory.
+The selected or freely typed tag remains unchanged. Arrow keys navigate the
+suggestions, Enter chooses the active suggestion, and Escape or Tab closes the
+list. The picker is visible and enabled only for desktop live-transcription
+mode, including before recording begins. It is disabled during active capture
+so changes affect the next capture; leaving live-transcription mode closes and
+disables it. File/model transcription and conversation-language configuration
+remain separate. Native voice loading, errors, and speaking
 remain visible. Model-based transcription retains its existing status, and
 mobile speech retains its existing voice-output-only presentation.
 

package/docs/reference/sdk-api.md

@@ -123,6 +123,7 @@ browser map are cataloged separately in [Runtime modules](runtime-modules.md).
 | Member | Kind | Import | Group | Availability |
 | --- | --- | --- | --- | --- |
 | `fetchRequest()` | function | `arcane-os/ai/twin-cloud` | TWiN Cloud requests | Node and Browser; remote HTTPS provider |
+| `fetchSystemOneRequest()` | function | `arcane-os/ai/twin-cloud` | TWiN Cloud state-and-questions requests | Node and Browser; remote HTTPS provider |
 | `fetchHTTPResponse()` | function | `arcane-os/ai/twin-cloud` | Shared AI transport integration | Node and Browser |
 | `fetchJSONResponse()` | function | `arcane-os/ai/twin-cloud` | Shared AI transport integration | Node and Browser |
 | `structuredOutputFormat()` | function | `arcane-os/ai/twin-cloud` | Shared AI transport integration | Node and Browser |
@@ -3731,6 +3732,12 @@ negotiate HTTP/2 or HTTP/1.1 on the same HTTPS port. Explicit raw `tls` options
 retain native HTTPS transport with the same module response and static-file
 operations.
 
+Static files retain the module's complete built-in MIME map, including PDF,
+Markdown, audio and video. Generated representations use the same published
+`node-http-server/mime-types` map. Existing text charsets and the
+`application/octet-stream` fallback for unknown extensions remain unchanged;
+supported document and media types need no application override.
+
 ### Signature, modes, and result
 
 ```text
@@ -7953,6 +7960,59 @@ console.log(response);
 `server-config.json` is an application-owned, ignored configuration file;
 never commit its key or print it in diagnostics. The SDK does not read it.
 
+## fetchSystemOneRequest()
+
+### Overview
+
+Sends one native TWiN System One request with caller-owned credentials, model,
+state, and questions. Question definitions, scales, model selection, and answer
+interpretation remain application responsibilities.
+
+### Signature and result
+
+```text
+async fetchSystemOneRequest({twinKey,model,state,questions,signal=null,id=Date.now(),onRequest,onResponse,onRetry=null}={})
+```
+
+Import the named function from `arcane-os/ai/twin-cloud`. It posts
+`{model,state,questions}` to `https://inference.do-ai.run/v1/systemone` and
+returns the entire parsed provider JSON. It adds no chat messages, tools,
+scoring rules, or output limit. Payload content is preserved within ordinary
+JSON transport encoding; serialization occurs before the diagnostic callback.
+
+`onRequest(request,id,metadata)` receives the complete payload before dispatch,
+with `{operation:'systemone',transport:'http',destination:'https://inference.do-ai.run/v1/systemone'}`
+as metadata. `onResponse(response,id,false)` receives the entire parsed result
+before return. Both callbacks are awaited and failures propagate. The key is
+used only for transport authentication, outside the diagnostic payloads.
+
+### Availability and normalization
+
+**Node and Browser; Cloud transport.** Uses the existing `fetchJSONResponse`
+owner for complete errors, retries, `onRetry`, and `signal` cancellation, with
+no browser singleton, profile, storage, or retained history. A missing key uses
+`AI_PROVIDER_NOT_CONFIGURED`; a missing explicit model throws `TypeError`.
+Cancellation prevents successful return and uses `ARCANE_AI_REQUEST_ABORTED`,
+including checks after callback settlement. Import starts no request.
+
+### Example
+
+```javascript
+import {fetchSystemOneRequest} from 'arcane-os/ai/twin-cloud';
+
+const response = await fetchSystemOneRequest({
+    twinKey: applicationRuntime.twinKey,
+    model: 'typesafe-jev-1.13.0',
+    state: applicationState,
+    questions: applicationQuestions
+});
+```
+
+The runtime configuration, state, and questions in this example belong to the
+application. The JEV identifier is an explicit caller choice, not a default.
+See [TWiN Cloud](ai/twin-cloud.md#evaluate-caller-owned-state-with-system-one)
+for the complete transport and callback contract.
+
 ## fetchHTTPResponse()
 
 ### Overview

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arcane-os",
-  "version": "0.50.0",
+  "version": "0.51.1",
   "description": "Arcane OS JavaScript SDK, project-local CLI, browser runtime, and repository-portable application packager.",
   "type": "module",
   "main": "./src/index.mjs",

package/runtime/arcane/components/speech.html

@@ -99,10 +99,17 @@
         display: none;
     }
 
+    .recognition_language_picker {
+        position: relative;
+        display: flex;
+        width: 18rem;
+        max-width: 100%;
+    }
+
     #recognitionLanguage {
         box-sizing: border-box;
-        width: 10rem;
-        max-width: 100%;
+        width: 100%;
+        min-width: 0;
         min-height: 2.25rem;
         padding: .35rem .5rem;
         border: 1px solid var(--arcane-border, var(--border-color));
@@ -112,6 +119,52 @@
         font: inherit;
     }
 
+    #recognitionLanguageToggle {
+        min-height: 2.25rem;
+        padding: .35rem .6rem;
+        background: var(--arcane-surface, var(--background-color));
+        color: var(--arcane-text, var(--text-color));
+    }
+
+    #recognitionLanguages {
+        position: absolute;
+        z-index: 1;
+        inset-inline: 0;
+        bottom: 100%;
+        max-height: 18rem;
+        overflow: auto;
+        border: 1px solid var(--arcane-border, var(--border-color));
+        border-radius: var(--arcane-radius-small, .4rem);
+        background: var(--arcane-surface, var(--background-color));
+        box-shadow: var(--arcane-shadow-small, 0 .25rem .8rem var(--shadow-color));
+    }
+
+    #recognitionLanguages button {
+        display: block;
+        width: 100%;
+        border: 0;
+        border-radius: 0;
+        background: var(--arcane-surface, var(--background-color));
+        color: var(--arcane-text, var(--text-color));
+        font-weight: normal;
+        text-align: start;
+        overflow-wrap: anywhere;
+        touch-action: pan-y;
+    }
+
+    #recognitionLanguages button[hidden] {
+        display: none;
+    }
+
+    #recognitionLanguages button[data-active="true"] {
+        outline: .2rem solid var(--arcane-focus, var(--focus-color));
+        outline-offset: -.2rem;
+    }
+
+    #recognitionLanguages button[aria-selected="true"] {
+        font-weight: 700;
+    }
+
     .speech_status {
         margin: 0;
         color: var(--arcane-muted, var(--text-color));
@@ -189,25 +242,28 @@
 <button id="sttActivationButton" type="button" hidden disabled>Start transcription</button>
 <button id="stopButton" type="button" class="hidden" disabled>Send</button>
 <div class="speech_feedback">
-    <label id="recognitionLanguageControl" class="recognition_language" hidden>
-        Recognition language
-        <input id="recognitionLanguage" type="text" list="recognitionLanguages" placeholder="Browser default" title="Recognition language tag, such as en-US or es-MX" autocomplete="off" spellcheck="false">
-        <datalist id="recognitionLanguages">
-            <option value="en-US">English (United States)</option>
-            <option value="en-GB">English (United Kingdom)</option>
-            <option value="es-MX">Spanish (Mexico)</option>
-            <option value="es-ES">Spanish (Spain)</option>
-            <option value="fr-FR">French</option>
-            <option value="de-DE">German</option>
-            <option value="it-IT">Italian</option>
-            <option value="pt-BR">Portuguese (Brazil)</option>
-            <option value="ja-JP">Japanese</option>
-            <option value="ko-KR">Korean</option>
-            <option value="zh-CN">Chinese (Mandarin, mainland China)</option>
-            <option value="hi-IN">Hindi</option>
-            <option value="ar-SA">Arabic (Saudi Arabia)</option>
-        </datalist>
-    </label>
+    <div id="recognitionLanguageControl" class="recognition_language" hidden>
+        <label for="recognitionLanguage">Recognition language</label>
+        <div class="recognition_language_picker">
+            <input id="recognitionLanguage" type="text" role="combobox" aria-controls="recognitionLanguages" aria-expanded="false" aria-autocomplete="list" aria-haspopup="listbox" placeholder="Browser default" title="Recognition language tag; type to filter suggestions or enter another BCP47 tag" autocomplete="off" spellcheck="false">
+            <button id="recognitionLanguageToggle" type="button" tabindex="-1" aria-label="Show all suggested recognition languages" aria-controls="recognitionLanguages" aria-expanded="false">▾</button>
+            <div id="recognitionLanguages" role="listbox" aria-label="Suggested recognition languages" hidden>
+                <button id="recognitionLanguage-en-US" type="button" role="option" data-language="en-US" tabindex="-1" lang="en-US" dir="auto">English (United States) — en-US</button>
+                <button id="recognitionLanguage-en-GB" type="button" role="option" data-language="en-GB" tabindex="-1" lang="en-GB" dir="auto">English (United Kingdom) — en-GB</button>
+                <button id="recognitionLanguage-es-MX" type="button" role="option" data-language="es-MX" tabindex="-1" lang="es-MX" dir="auto">Español (México) — es-MX</button>
+                <button id="recognitionLanguage-es-ES" type="button" role="option" data-language="es-ES" tabindex="-1" lang="es-ES" dir="auto">Español (España) — es-ES</button>
+                <button id="recognitionLanguage-fr-FR" type="button" role="option" data-language="fr-FR" tabindex="-1" lang="fr-FR" dir="auto">Français (France) — fr-FR</button>
+                <button id="recognitionLanguage-de-DE" type="button" role="option" data-language="de-DE" tabindex="-1" lang="de-DE" dir="auto">Deutsch (Deutschland) — de-DE</button>
+                <button id="recognitionLanguage-it-IT" type="button" role="option" data-language="it-IT" tabindex="-1" lang="it-IT" dir="auto">Italiano (Italia) — it-IT</button>
+                <button id="recognitionLanguage-pt-BR" type="button" role="option" data-language="pt-BR" tabindex="-1" lang="pt-BR" dir="auto">Português (Brasil) — pt-BR</button>
+                <button id="recognitionLanguage-ja-JP" type="button" role="option" data-language="ja-JP" tabindex="-1" lang="ja-JP" dir="auto">日本語（日本） — ja-JP</button>
+                <button id="recognitionLanguage-ko-KR" type="button" role="option" data-language="ko-KR" tabindex="-1" lang="ko-KR" dir="auto">한국어 (대한민국) — ko-KR</button>
+                <button id="recognitionLanguage-zh-CN" type="button" role="option" data-language="zh-CN" tabindex="-1" lang="zh-CN" dir="auto">中文（中国大陆，普通话） — zh-CN</button>
+                <button id="recognitionLanguage-hi-IN" type="button" role="option" data-language="hi-IN" tabindex="-1" lang="hi-IN" dir="auto">हिन्दी (भारत) — hi-IN</button>
+                <button id="recognitionLanguage-ar-SA" type="button" role="option" data-language="ar-SA" tabindex="-1" lang="ar-SA" dir="auto">العربية (المملكة العربية السعودية) — ar-SA</button>
+            </div>
+        </div>
+    </div>
     <p id="speechStatus" class="speech_status" role="status" aria-live="polite"></p>
     <progress
         id="sttActivationProgress"
@@ -281,6 +337,11 @@
     const speechStatus = shadowRoot.querySelector('#speechStatus');
     const recognitionLanguageControl = shadowRoot.querySelector('#recognitionLanguageControl');
     const recognitionLanguageInput = shadowRoot.querySelector('#recognitionLanguage');
+    const recognitionLanguageToggle = shadowRoot.querySelector('#recognitionLanguageToggle');
+    const recognitionLanguages = shadowRoot.querySelector('#recognitionLanguages');
+    const recognitionLanguageOptions = Array.from(
+        recognitionLanguages.querySelectorAll('[data-language]')
+    );
     const silenceDuration = 0;
     const runtimeStateAbortController = new AbortController();
 
@@ -319,6 +380,9 @@
         set: setRecognitionLanguage
     });
     recognitionLanguageInput.value = recognitionLanguage;
+    let recognitionLanguageInputValue = recognitionLanguage;
+    let activeRecognitionLanguageOption = null;
+    renderRecognitionLanguageOptions();
 
     function nextSpeechOperationId(kind) {
         eventOperationSequence += 1;
@@ -459,6 +523,16 @@
     stopButton.addEventListener('click', stop, lifecycleListenerOptions);
     muteButton.addEventListener('click', muteToggle, lifecycleListenerOptions);
     recognitionLanguageInput.addEventListener('input', updateRecognitionLanguage, lifecycleListenerOptions);
+    recognitionLanguageInput.addEventListener('focus', openRecognitionLanguages, lifecycleListenerOptions);
+    recognitionLanguageInput.addEventListener('click', openRecognitionLanguages, lifecycleListenerOptions);
+    recognitionLanguageInput.addEventListener('blur', closeRecognitionLanguages, lifecycleListenerOptions);
+    recognitionLanguageInput.addEventListener('keydown', handleRecognitionLanguageKeyDown, lifecycleListenerOptions);
+    recognitionLanguageToggle.addEventListener('pointerdown', retainRecognitionLanguageFocus, lifecycleListenerOptions);
+    recognitionLanguageToggle.addEventListener('click', toggleRecognitionLanguages, lifecycleListenerOptions);
+    for (const option of recognitionLanguageOptions) {
+        option.addEventListener('pointerdown', retainRecognitionLanguageFocus, lifecycleListenerOptions);
+        option.addEventListener('click', selectRecognitionLanguage, lifecycleListenerOptions);
+    }
     window.addEventListener('ai-ready', synchronizeAIReadiness, lifecycleListenerOptions);
     window.addEventListener(
         'pagehide',
@@ -556,10 +630,121 @@
         }
         recognitionLanguage = language;
         recognitionLanguageInput.value = language;
+        recognitionLanguageInputValue = language;
+        renderRecognitionLanguageOptions();
     }
 
     function updateRecognitionLanguage() {
-        host.recognitionLanguage = recognitionLanguageInput.value;
+        if (recognitionLanguageInput.disabled
+            || recognitionLanguageInput.value === recognitionLanguageInputValue) {
+            return;
+        }
+        recognitionLanguage = recognitionLanguageInput.value;
+        recognitionLanguageInputValue = recognitionLanguage;
+        openRecognitionLanguages();
+        renderRecognitionLanguageOptions(recognitionLanguage);
+    }
+
+    function renderRecognitionLanguageOptions(search = '') {
+        const query = search.toLocaleLowerCase();
+        activeRecognitionLanguageOption = null;
+        recognitionLanguageInput.removeAttribute('aria-activedescendant');
+        for (const option of recognitionLanguageOptions) {
+            option.hidden = !option.textContent.toLocaleLowerCase().includes(query);
+            option.dataset.active = 'false';
+            option.setAttribute('aria-selected', String(option.dataset.language === recognitionLanguage));
+        }
+    }
+
+    function openRecognitionLanguages() {
+        if (recognitionLanguageControl.hidden || recognitionLanguageInput.disabled
+            || !recognitionLanguages.hidden) {
+            return;
+        }
+        renderRecognitionLanguageOptions();
+        recognitionLanguages.hidden = false;
+        recognitionLanguageInput.setAttribute('aria-expanded', 'true');
+        recognitionLanguageToggle.setAttribute('aria-expanded', 'true');
+    }
+
+    function closeRecognitionLanguages() {
+        recognitionLanguages.hidden = true;
+        recognitionLanguageInput.setAttribute('aria-expanded', 'false');
+        recognitionLanguageToggle.setAttribute('aria-expanded', 'false');
+        recognitionLanguageInput.removeAttribute('aria-activedescendant');
+        activeRecognitionLanguageOption = null;
+    }
+
+    function retainRecognitionLanguageFocus(event) {
+        event.preventDefault();
+    }
+
+    function toggleRecognitionLanguages() {
+        if (recognitionLanguageInput.disabled) {
+            return;
+        }
+        const wasOpen = !recognitionLanguages.hidden;
+        recognitionLanguageInput.focus();
+        if (wasOpen) {
+            closeRecognitionLanguages();
+        } else {
+            openRecognitionLanguages();
+        }
+    }
+
+    function selectRecognitionLanguage(event) {
+        if (recognitionLanguageInput.disabled) {
+            return;
+        }
+        host.recognitionLanguage = event.currentTarget.dataset.language;
+        recognitionLanguageInput.focus();
+        closeRecognitionLanguages();
+    }
+
+    function handleRecognitionLanguageKeyDown(event) {
+        if (recognitionLanguageInput.disabled || event.isComposing) {
+            return;
+        }
+        if (event.key === 'Escape' || event.key === 'Tab') {
+            if (event.key === 'Escape' && !recognitionLanguages.hidden) {
+                event.preventDefault();
+            }
+            closeRecognitionLanguages();
+            return;
+        }
+        if (event.key === 'Enter' && !recognitionLanguages.hidden) {
+            event.preventDefault();
+            if (activeRecognitionLanguageOption) {
+                host.recognitionLanguage = activeRecognitionLanguageOption.dataset.language;
+            }
+            closeRecognitionLanguages();
+            return;
+        }
+        if (!['ArrowDown', 'ArrowUp'].includes(event.key)) {
+            return;
+        }
+        event.preventDefault();
+        openRecognitionLanguages();
+        const visibleOptions = recognitionLanguageOptions.filter(
+            function visibleRecognitionLanguage(option) {
+                return !option.hidden;
+            }
+        );
+        if (!visibleOptions.length) {
+            return;
+        }
+        const previousIndex = visibleOptions.indexOf(activeRecognitionLanguageOption);
+        const nextIndex = previousIndex < 0
+            ? (event.key === 'ArrowDown' ? 0 : visibleOptions.length - 1)
+            : (previousIndex + (event.key === 'ArrowDown' ? 1 : -1) + visibleOptions.length)
+                % visibleOptions.length;
+        if (activeRecognitionLanguageOption) {
+            activeRecognitionLanguageOption.dataset.active = 'false';
+        }
+        activeRecognitionLanguageOption = visibleOptions[nextIndex];
+        activeRecognitionLanguageOption.dataset.active = 'true';
+        recognitionLanguageInput.setAttribute('aria-activedescendant', activeRecognitionLanguageOption.id);
+        activeRecognitionLanguageOption.scrollIntoView({block: 'nearest'});
     }
 
     function updateMicrophoneAvailability(available) {
@@ -701,9 +886,14 @@
         recognitionLanguageControl.hidden = !transcriptionEnabled
             || !providerRuntime.supportsTranscriptionCapture();
         recognitionLanguageInput.disabled = destroyed
+            || recognitionLanguageControl.hidden
             || recordingRequested
             || Boolean(nativeCaptureSession)
             || transcriptionActive;
+        recognitionLanguageToggle.disabled = recognitionLanguageInput.disabled;
+        if (recognitionLanguageInput.disabled) {
+            closeRecognitionLanguages();
+        }
         if (!transcriptionEnabled) {
             recordButton.hidden = true;
             recordButton.disabled = true;

package/src/dev-server.mjs

@@ -1,5 +1,6 @@
 import Is from 'strong-type';
 import {Server} from 'node-http-server';
+import contentTypes from 'node-http-server/mime-types';
 import {constants as FS_CONSTANTS} from 'node:fs';
 import {lstat,open,readFile,readdir,realpath} from 'node:fs/promises';
 import https from 'node:https';
@@ -19,26 +20,6 @@ import {createPwaArtifacts,selectPwaFiles} from './pwa.mjs';
 
 const is = new Is(false);
 
-const MIME_TYPES=new Map([
-    ['.css','text/css; charset=utf-8'],
-    ['.gif','image/gif'],
-    ['.html','text/html; charset=utf-8'],
-    ['.htm','text/html; charset=utf-8'],
-    ['.ico','image/x-icon'],
-    ['.jpeg','image/jpeg'],
-    ['.jpg','image/jpeg'],
-    ['.js','text/javascript; charset=utf-8'],
-    ['.json','application/json; charset=utf-8'],
-    ['.mjs','text/javascript; charset=utf-8'],
-    ['.png','image/png'],
-    ['.svg','image/svg+xml; charset=utf-8'],
-    ['.txt','text/plain; charset=utf-8'],
-    ['.wasm','application/wasm'],
-    ['.webmanifest','application/manifest+json; charset=utf-8'],
-    ['.webp','image/webp'],
-    ['.woff','font/woff'],
-    ['.woff2','font/woff2']
-]);
 const READ_ONLY_NO_FOLLOW=FS_CONSTANTS.O_RDONLY|(FS_CONSTANTS.O_NOFOLLOW??0);
 const PRIVATE_SOURCE_SEGMENTS=new Set([
     'arcane-app.json','arcane-package.json','test','tests','scripts','node_modules','dist','local'
@@ -366,7 +347,7 @@ async function serveSourceFile(fileServer, request, response, opened, {
         response,
         {
             lastModified,
-            contentType: MIME_TYPES.get(extension) || 'application/octet-stream',
+            contentType: contentTypes[extension.substring(1)] || 'application/octet-stream',
             body: async function createSourceRepresentation() {
                 let content = opened.content ?? await readFile(opened.candidate);
                 if (rewrite) {
@@ -1187,7 +1168,7 @@ async function startOwnedDevServer({
                         // An older in-flight snapshot may finish after a newer
                         // selection. Its body cannot validate that newer output.
                         lastModified: selectedRoutes === currentSourceRoutes ? generated.lastModified : undefined,
-                        contentType: MIME_TYPES.get(path.extname(generated.path)),
+                        contentType: contentTypes[path.extname(generated.path).substring(1).toLowerCase()],
                         body: function generatedPwaBody() {
                             return generated.content;
                         }
@@ -1313,13 +1294,6 @@ async function startOwnedDevServer({
         await task;
         return true;
     }
-    const contentType = Object.fromEntries(
-        [...MIME_TYPES].map(
-            function serverContentType([extension, value]) {
-                return [extension.substring(1), value];
-            }
-        )
-    );
     const fileServer = new Server(
         {
             root: mappings[0].root,
@@ -1338,7 +1312,6 @@ async function startOwnedDevServer({
             })
         }
     );
-    fileServer.config.contentType = contentType;
     fileServer.onRawRequest = serveDevelopmentRequest;
     // The module's public HTTPS configuration accepts PEM paths. Its HTTPS
     // guide leaves advanced TLS inputs to application code; preserve that