arcane-os 0.47.0 → 0.48.0

package/runtime/arcane/components/speech.html

@@ -34,7 +34,8 @@
         user-select: none;
     }
 
-    button:focus-visible {
+    button:focus-visible,
+    #recognitionLanguage:focus-visible {
         outline: .2rem solid var(--arcane-focus, var(--focus-color));
         outline-offset: .18rem;
     }
@@ -85,6 +86,32 @@
         min-width: 0;
     }
 
+    .recognition_language {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: .35rem .6rem;
+        margin-block-end: .35rem;
+        font-size: .86rem;
+    }
+
+    .recognition_language[hidden] {
+        display: none;
+    }
+
+    #recognitionLanguage {
+        box-sizing: border-box;
+        width: 10rem;
+        max-width: 100%;
+        min-height: 2.25rem;
+        padding: .35rem .5rem;
+        border: 1px solid var(--arcane-border, var(--border-color));
+        border-radius: var(--arcane-radius-small, .4rem);
+        background: var(--arcane-surface, var(--background-color));
+        color: var(--arcane-text, var(--text-color));
+        font: inherit;
+    }
+
     .speech_status {
         margin: 0;
         color: var(--arcane-muted, var(--text-color));
@@ -162,6 +189,25 @@
 <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>
     <p id="speechStatus" class="speech_status" role="status" aria-live="polite"></p>
     <progress
         id="sttActivationProgress"
@@ -214,6 +260,7 @@
             source: 'arcane.component.speech',
             eventTypes: [
                 'speech-ready',
+                'speech-transcription-progress',
                 'speech-transcription-complete',
                 'speech-transcription-error',
                 'speech-transcription-cancelled',
@@ -232,6 +279,8 @@
     const stopButton = shadowRoot.querySelector('#stopButton');
     const muteButton = shadowRoot.querySelector('#muteButton');
     const speechStatus = shadowRoot.querySelector('#speechStatus');
+    const recognitionLanguageControl = shadowRoot.querySelector('#recognitionLanguageControl');
+    const recognitionLanguageInput = shadowRoot.querySelector('#recognitionLanguage');
     const silenceDuration = 0;
     const runtimeStateAbortController = new AbortController();
 
@@ -258,6 +307,18 @@
     let transcriptionOperationId = null;
     let ttsOperationId = null;
     let destroyed = false;
+    let recognitionLanguage = is.string(host.recognitionLanguage)
+        ? host.recognitionLanguage
+        : navigator.language || '';
+    Object.defineProperty(host, 'recognitionLanguage', {
+        configurable: true,
+        enumerable: true,
+        get: function getRecognitionLanguage() {
+            return recognitionLanguage;
+        },
+        set: setRecognitionLanguage
+    });
+    recognitionLanguageInput.value = recognitionLanguage;
 
     function nextSpeechOperationId(kind) {
         eventOperationSequence += 1;
@@ -349,6 +410,7 @@
 
     const initialMutedWasHydrated = is.boolean(host.initialMuted);
     host.initialMuted = initialMutedWasHydrated ? host.initialMuted : true;
+    host.displayTranscription = host.displayTranscription !== false;
     host.muted = true;
     host.configure = configure;
     host.destroy = destroy;
@@ -396,6 +458,7 @@
     recordButton.addEventListener('blur', handleRecordBlur, lifecycleListenerOptions);
     stopButton.addEventListener('click', stop, lifecycleListenerOptions);
     muteButton.addEventListener('click', muteToggle, lifecycleListenerOptions);
+    recognitionLanguageInput.addEventListener('input', updateRecognitionLanguage, lifecycleListenerOptions);
     window.addEventListener('ai-ready', synchronizeAIReadiness, lifecycleListenerOptions);
     window.addEventListener(
         'pagehide',
@@ -477,10 +540,28 @@
             host.initialMuted = configuredMuted;
             applyConfiguredMutedState(configuredMuted);
         }
+        if (Object.prototype.hasOwnProperty.call(options, 'recognitionLanguage')) {
+            host.recognitionLanguage = options.recognitionLanguage;
+        }
+        if (Object.prototype.hasOwnProperty.call(options, 'displayTranscription')) {
+            host.displayTranscription = options.displayTranscription !== false;
+        }
 
         return host;
     }
 
+    function setRecognitionLanguage(language) {
+        if (!is.string(language)) {
+            throw new TypeError('Recognition language must be a BCP47 language tag string.');
+        }
+        recognitionLanguage = language;
+        recognitionLanguageInput.value = language;
+    }
+
+    function updateRecognitionLanguage() {
+        host.recognitionLanguage = recognitionLanguageInput.value;
+    }
+
     function updateMicrophoneAvailability(available) {
         if (destroyed) {
             return;
@@ -617,6 +698,12 @@
     }
 
     function renderControls() {
+        recognitionLanguageControl.hidden = !transcriptionEnabled
+            || !providerRuntime.supportsTranscriptionCapture();
+        recognitionLanguageInput.disabled = destroyed
+            || recordingRequested
+            || Boolean(nativeCaptureSession)
+            || transcriptionActive;
         if (!transcriptionEnabled) {
             recordButton.hidden = true;
             recordButton.disabled = true;
@@ -764,10 +851,21 @@
                     describeSTTRole()
                 );
             }
-        } else if (transcriptionEnabled) {
+        } else if (transcriptionEnabled
+            && (recognitionLanguageControl.hidden
+                || sttRole.state !== 'ready'
+                || !host.availability.microphone
+                || sttRole.busy
+                || sttActivationController.pending)) {
             messages.push(describeSTTRole());
         }
-        messages.push(describeTTSRole());
+        if (recognitionLanguageControl.hidden
+            || pendingTTSIntent
+            || pendingUnmute
+            || ['loading', 'unloading', 'error'].includes(ttsRole.state)
+            || ttsRole.busy) {
+            messages.push(describeTTSRole());
+        }
         if ((transcriptionEnabled && sttRole.state === 'error')
             || ttsRole.state === 'error') {
             tone = 'error';
@@ -1490,15 +1588,34 @@
         function displayNativeRecognitionText() {
             if (!currentNativeCapture()) return;
             localStatus = {
-                message: session.text.join('') + session.interim || 'Listening. Release to finish.',
+                message: (host.displayTranscription
+                    ? session.text.join('') + session.interim
+                    : '') || 'Listening. Release to finish.',
                 tone: '',
                 owner: 'recording',
                 generation
             };
             renderStatus();
+            publishNativeRecognitionProgress();
+        }
+        function publishNativeRecognitionProgress() {
+            const text = session.text.join('');
+            dispatchSpeechEvent(
+                'speech-transcription-progress',
+                {text, interim: session.interim},
+                {
+                    operationId,
+                    publicDetail: {text, interim: session.interim}
+                }
+            );
         }
         async function finishNativeRecognition(error = null) {
             if (!currentNativeCapture()) return;
+            if (session.interim) {
+                session.interim = '';
+                publishNativeRecognitionProgress();
+                if (!currentNativeCapture()) return;
+            }
             nativeCaptureSession = null;
             recordingRequested = false;
             resetRecordPress();
@@ -1523,9 +1640,11 @@
             session.capture = providerRuntime.createTranscriptionCapture(
                 {
                     continuous: true,
+                    language: recognitionLanguage || undefined,
                     onSegment: function retainFinalRecognition(segment) {
                         if (!currentNativeCapture()) return;
                         session.text.push(segment.text);
+                        session.interim = '';
                         displayNativeRecognitionText();
                     },
                     onInterim: function displayInterimRecognition(result) {

package/runtime/arcane/components/voice-transcription.html

@@ -80,9 +80,8 @@
 
 <section class="voice-transcription">
     <p id="description" class="description" part="description"></p>
-    <section id="transcript" class="transcript" part="transcript"></section>
+    <section id="transcript" class="transcript" part="transcript" aria-live="polite"></section>
     <div class="transcription-feedback">
-        <p id="interim" class="status" part="interim" aria-live="polite" hidden></p>
         <p id="status" class="status" part="status" role="status" aria-live="polite"></p>
         <progress
             id="sttActivationProgress"
@@ -150,7 +149,6 @@
     const description=host.shadowRoot.querySelector('#description');
     const transcriptElement=host.shadowRoot.querySelector('#transcript');
     const status=host.shadowRoot.querySelector('#status');
-    const interimElement=host.shadowRoot.querySelector('#interim');
     const startButton=host.shadowRoot.querySelector('#start');
     const sttActivationButton=host.shadowRoot.querySelector('#sttActivation');
     const sttActivationProgress = host.shadowRoot.querySelector('#sttActivationProgress');
@@ -413,13 +411,14 @@
                         stage:is.string(clip.text)?'append':'transcribe',
                         segment:is.string(clip.text)?clip.text:null
                     });
-                    renderInterimRecognition(session);
+                    if(is.string(clip.text)) session.interim='';
+                    renderTranscript();
                     processContinuousQueue(session);
                 },
                 onInterim:function displayInterimRecognition(result){
                     if(!isCurrentContinuousSession(session)) return;
                     session.interim=result.text;
-                    renderInterimRecognition(session);
+                    renderTranscript();
                 },
                 onState:function captureStateChanged(nextState){
                     if(!isCurrentContinuousSession(session)){
@@ -429,7 +428,7 @@
                     if(nextState==='stopped'||nextState==='interrupted'){
                         session.listening=false;
                         session.interim='';
-                        renderInterimRecognition(session);
+                        renderTranscript();
                     }
                     renderContinuousState(session);
                     settleContinuousDrain(session);
@@ -455,7 +454,7 @@
                     if(!isCurrentContinuousSession(session)) return;
                     session.listening=false;
                     session.interim='';
-                    renderInterimRecognition(session);
+                    renderTranscript();
                     if(!session.captureError) session.captureState='stopped';
                     renderContinuousState(session);
                     settleContinuousDrain(session);
@@ -508,17 +507,6 @@
         };
     }
 
-    function renderInterimRecognition(session){
-        if(!isCurrentContinuousSession(session)) return;
-        const pending=[];
-        for(const clip of session.queue){
-            if(clip.stage==='append') pending.push(clip.segment);
-        }
-        const text=pending.join(options.separator)+session.interim;
-        interimElement.textContent=text;
-        interimElement.hidden=text.length===0;
-    }
-
     function renderContinuousState(session){
         if(!isCurrentContinuousSession(session)){
             return;
@@ -665,7 +653,6 @@
                     clip.stage='save';
                     transcript=clip.transcript;
                     renderTranscript();
-                    renderInterimRecognition(session);
                 }
                 if(options.persist){
                     const save=options.onSave||(is.function(host.save)?host.save.bind(host):null);
@@ -796,8 +783,7 @@
             return false;
         }
         continuousSession=null;
-        interimElement.textContent='';
-        interimElement.hidden=true;
+        renderTranscript();
         session.controller.abort();
         session.requestController?.abort();
         session.capture?.cancel();
@@ -1349,7 +1335,19 @@
     }
 
     function renderTranscript(){
-        transcriptElement.innerHTML=new MD(transcript).safeRendered;
+        // Display live recognition in the output without committing hypotheses
+        // or letting an earlier save delay later finalized text.
+        let output=transcript;
+        const session=continuousSession;
+        if(session&&isCurrentContinuousSession(session)){
+            for(const clip of session.queue){
+                if(clip.stage==='append'){
+                    output=appendTranscription(output,clip.segment,options.separator);
+                }
+            }
+            output=appendTranscription(output,session.interim,options.separator);
+        }
+        transcriptElement.innerHTML=new MD(output).safeRendered;
         transcriptElement.querySelectorAll('a').forEach(
             link=>{
                 link.target='_blank';
@@ -1433,7 +1431,7 @@
                 session.listening=false;
                 session.captureState='interrupted';
                 session.interim='';
-                renderInterimRecognition(session);
+                renderTranscript();
             }
             if(['completing','complete'].includes(state)){
                 renderState();

package/runtime/arcane/css/document-site.css

@@ -1,3 +1,5 @@
+@import url('./print.css');
+
 /* Reusable, progressively enhanced documentation-site layout.
  * Load after Arcane theme.css and primitives.css.
  */
@@ -944,38 +946,3 @@ body.static-doc-site{
     }
 }
 
-@media print{
-    .static-site-header,
-    .static-site-footer,
-    .static-section-nav,
-    .static-previous-next,
-    .static-related,
-    .static-document__source,
-    .skip-link{
-        display:none;
-    }
-
-    .static-site-main,
-    .static-site-main--document{
-        max-inline-size:none;
-        padding:0;
-    }
-
-    .static-document-layout{
-        display:block;
-    }
-
-    .static-document{
-        inline-size:100%;
-    }
-
-    .static-document__content table{
-        display:table;
-        overflow:visible;
-    }
-
-    .static-document__content table :where(code,kbd){
-        overflow-wrap:anywhere;
-        word-break:break-word;
-    }
-}

package/runtime/arcane/css/print.css

@@ -0,0 +1,235 @@
+/* Shared paper presentation for direct pages and rendered PrintView snapshots.
+ * Theme/document styles import this file. PrintView loads the same complete
+ * text before registration so native beforeprint performs no asynchronous I/O.
+ */
+:root,
+:host{
+    --arcane-print-paper:rgb(255, 255, 255);
+    --arcane-print-text:rgb(23, 34, 56);
+    --arcane-print-secondary:rgb(229, 233, 243);
+    --arcane-print-border:rgb(203, 211, 226);
+    --arcane-print-focus:rgb(118, 87, 213);
+    --arcane-print-muted:rgb(95, 107, 130);
+    --arcane-print-success:rgb(39, 122, 75);
+    --arcane-print-warning:rgb(154, 101, 0);
+    --arcane-print-danger:rgb(165, 56, 56);
+    --arcane-print-review:rgb(133, 85, 165);
+    --arcane-print-shadow:rgba(23, 34, 56, .16);
+    --arcane-print-platinum:rgb(102, 112, 133);
+    --arcane-print-icon-filter:none;
+    --arcane-print-file-icon-filter:hue-rotate(8deg) saturate(.62) brightness(.86);
+}
+
+/* Snapshot rules are scoped to PrintView-owned nodes, including its shadow
+ * host. The source document's typography and artwork remain on the clones.
+ */
+:host([data-arcane-print-stage]){
+    color-scheme:light!important;
+    color:var(--arcane-print-text)!important;
+    background:var(--arcane-print-paper)!important;
+    font:12pt/1.5 serif;
+}
+
+:host([data-arcane-print-stage])>h1{
+    margin:0 0 .75em;
+    font-size:1.5em;
+    line-height:1.2;
+}
+
+[data-arcane-print-node]:not(svg,svg *,img,video,audio),
+[data-arcane-print-node]:not(svg,svg *,img,video,audio)::before,
+[data-arcane-print-node]:not(svg,svg *,img,video,audio)::after{
+    color:var(--arcane-print-text)!important;
+    background-color:transparent!important;
+    border-color:var(--arcane-print-border)!important;
+    color-scheme:light!important;
+    -webkit-text-fill-color:currentColor!important;
+    -webkit-text-stroke:0!important;
+    text-decoration-color:currentColor!important;
+    text-shadow:none!important;
+    box-shadow:none!important;
+}
+
+a[data-arcane-print-node]:not(svg *){text-decoration:underline!important;}
+table[data-arcane-print-node]:not(svg *){border-collapse:collapse!important;}
+th[data-arcane-print-node]:not(svg *),
+td[data-arcane-print-node]:not(svg *){
+    border:1px solid var(--arcane-print-border)!important;
+    padding:.35em .5em!important;
+}
+
+[data-arcane-print-expand]{
+    height:auto!important;
+    min-height:0!important;
+    max-height:none!important;
+    width:auto!important;
+    min-width:0!important;
+    max-width:100%!important;
+    overflow:visible!important;
+    contain:none!important;
+    content-visibility:visible!important;
+    grid-template-rows:none!important;
+    break-inside:auto!important;
+}
+
+img[data-arcane-print-node]{max-width:100%!important;height:auto!important;}
+[data-arcane-print-static]{position:static!important;}
+[data-arcane-print-root]{visibility:visible!important;}
+[data-arcane-print-block]{display:block!important;}
+pre[data-arcane-print-node]{white-space:pre-wrap!important;overflow-wrap:anywhere!important;}
+table[data-arcane-print-node]{table-layout:auto!important;}
+thead[data-arcane-print-node]{display:table-header-group!important;}
+tfoot[data-arcane-print-node]{display:table-footer-group!important;}
+td[data-arcane-print-node],
+th[data-arcane-print-node]{overflow-wrap:anywhere!important;white-space:normal!important;}
+
+/* Chat supplies the rendered transcript, not controls or session status.
+ * Keep public tool messages; inspection details and thinking are transient.
+ */
+.chat_output[data-arcane-print-node]{
+    display:block!important;
+    margin:0!important;
+    padding:0!important;
+    border:0!important;
+    border-radius:0!important;
+}
+
+.chat_output[data-arcane-print-node]>li{
+    display:block!important;
+    float:none!important;
+    clear:both!important;
+    max-inline-size:100%!important;
+    text-align:start!important;
+    margin:0 0 1em!important;
+    padding:0!important;
+    border:0!important;
+    border-radius:0!important;
+}
+
+.chat_output[data-arcane-print-node]>li [data-arcane-print-node]:not(.message_timestamp){
+    text-align:start!important;
+}
+
+.chat_output[data-arcane-print-node]>li>.thinking,
+.chat_output[data-arcane-print-node]>li>.message_tool_details,
+.chat_output[data-arcane-print-node]>li>.message_tool_calls>.message_tool_call>.message_tool_details,
+.chat_output[data-arcane-print-node]>li:has(>.thinking):has(>.markdown:empty):not(:has(.message_tool_message)){
+    display:none!important;
+}
+
+[data-arcane-print-stage]{display:none!important;}
+
+@media print{
+    @page{margin:1in;}
+
+    :root,
+    body,
+    [data-arcane-palette]{
+        color-scheme:light!important;
+        --background:var(--arcane-print-paper)!important;
+        --modal-background:var(--arcane-print-paper)!important;
+        --text-color:var(--arcane-print-text)!important;
+        --primary-color:var(--arcane-print-text)!important;
+        --secondary-color:var(--arcane-print-secondary)!important;
+        --accent-color:var(--focus-color)!important;
+        --button-text-color:var(--arcane-print-paper)!important;
+        --border-color:var(--arcane-print-border)!important;
+        --focus-color:var(--arcane-print-focus)!important;
+        --muted-text-color:var(--arcane-print-muted)!important;
+        --success-color:var(--arcane-print-success)!important;
+        --warning-color:var(--arcane-print-warning)!important;
+        --danger-color:var(--arcane-print-danger)!important;
+        --review-color:var(--arcane-print-review)!important;
+        --shadow-color:var(--arcane-print-shadow)!important;
+        --platinum:var(--arcane-print-platinum)!important;
+        --icon-filter:var(--arcane-print-icon-filter)!important;
+        --file-icon-filter:var(--arcane-print-file-icon-filter)!important;
+    }
+
+    html,
+    body{
+        margin:0;
+        background-color:var(--modal-background);
+        color:var(--text-color);
+    }
+
+    /* The shared screen shell has a sidebar grid and a viewport-height main
+     * scroller. Paper uses the same main content in ordinary document flow.
+     */
+    html:has(>body>main),
+    body:has(>main),
+    body>main,
+    body>main .data-workspace{
+        display:block!important;
+        position:static!important;
+        width:auto!important;
+        height:auto!important;
+        min-height:0!important;
+        max-height:none!important;
+        overflow:visible!important;
+        contain:none!important;
+        grid-template-columns:none!important;
+        grid-template-rows:none!important;
+        margin:0!important;
+        padding:0!important;
+        border:0!important;
+        border-radius:0!important;
+        box-shadow:none!important;
+    }
+
+    body:has(>main)>.header,
+    body:has(>main)>.nav{
+        display:none!important;
+    }
+
+    /* Expand only when an owned rendered snapshot is actually present. */
+    html:root:has(>body>[data-arcane-print-stage]),
+    html:root>body:has(>[data-arcane-print-stage]){
+        display:block!important;
+        height:auto!important;
+        min-height:0!important;
+        max-height:none!important;
+        overflow:visible!important;
+        contain:none!important;
+        margin:0!important;
+        padding:0!important;
+        border:0!important;
+        background:var(--arcane-print-paper)!important;
+        color:var(--arcane-print-text)!important;
+        color-scheme:light!important;
+    }
+
+    html:root>body:has(>[data-arcane-print-stage])>*:not([data-arcane-print-stage]),
+    html:root>body:has(>[data-arcane-print-stage])::before,
+    html:root>body:has(>[data-arcane-print-stage])::after{
+        display:none!important;
+    }
+
+    html:root>body>[data-arcane-print-stage]{
+        display:block!important;
+        position:static!important;
+        width:auto!important;
+        height:auto!important;
+        overflow:visible!important;
+        margin:0!important;
+        padding:0!important;
+        border:0!important;
+    }
+
+    body.static-doc-site :is(.static-site-header,.static-site-footer,.static-section-nav,.static-previous-next,.static-related,.static-document__source,.skip-link){
+        display:none!important;
+    }
+
+    body.static-doc-site :is(.static-site-main,.static-site-main--document){
+        max-inline-size:none!important;
+        padding:0!important;
+    }
+
+    body.static-doc-site .static-document-layout{display:block!important;}
+    body.static-doc-site .static-document{inline-size:100%!important;}
+    body.static-doc-site .static-document__content table{display:table!important;overflow:visible!important;}
+    body.static-doc-site .static-document__content table :where(code,kbd){
+        overflow-wrap:anywhere!important;
+        word-break:break-word!important;
+    }
+}

package/runtime/arcane/css/theme.css

@@ -1,3 +1,5 @@
+@import url('./print.css');
+
 /* Shared default and named palettes. layout.css imports this owner, and
  * standalone applications may load it directly before their own styles.
  * data-user-skin selects the root palette; data-arcane-palette scopes a swatch.
@@ -328,43 +330,3 @@ body{
     transition-duration:.01ms !important;
 }
 
-/* Paper uses the existing base light palette regardless of the screen skin.
- * Print-only importance also overrides custom-theme inline tokens; no saved
- * preference, screen layout, media paint, or scrolling state changes here.
- */
-@media print {
-    @page {
-        margin: 15mm;
-    }
-
-    :root,
-    body,
-    [data-arcane-palette] {
-        color-scheme: light !important;
-        --background: rgb(255, 255, 255) !important;
-        --modal-background: rgb(255, 255, 255) !important;
-        --text-color: rgb(23, 34, 56) !important;
-        --primary-color: rgb(23, 34, 56) !important;
-        --secondary-color: rgb(229, 233, 243) !important;
-        --accent-color: var(--focus-color) !important;
-        --button-text-color: rgb(255, 255, 255) !important;
-        --border-color: rgb(203, 211, 226) !important;
-        --focus-color: rgb(118, 87, 213) !important;
-        --muted-text-color: rgb(95, 107, 130) !important;
-        --success-color: rgb(39, 122, 75) !important;
-        --warning-color: rgb(154, 101, 0) !important;
-        --danger-color: rgb(165, 56, 56) !important;
-        --review-color: rgb(133, 85, 165) !important;
-        --shadow-color: rgba(23, 34, 56, .16) !important;
-        --platinum: rgb(102, 112, 133) !important;
-        --icon-filter: none !important;
-        --file-icon-filter: hue-rotate(8deg) saturate(.62) brightness(.86) !important;
-    }
-
-    html,
-    body {
-        margin: 0;
-        background-color: var(--modal-background);
-        color: var(--text-color);
-    }
-}