arcane-os 0.2.2 → 0.3.0

package/runtime/arcane/components/screen-capture.html

@@ -1,8 +1,14 @@
 <link rel="stylesheet" href="./arcane/css/theme.css?v=1"><link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
 <style>:host{display:block}.capture{display:grid;gap:var(--arcane-space-4)}.actions{display:grid;gap:var(--arcane-space-3);grid-template-columns:repeat(3,minmax(0,1fr))}.action{display:grid;gap:var(--arcane-space-2);padding:var(--arcane-space-4);text-align:left}.action strong{font-size:1.05rem}.action span{color:var(--arcane-muted);font-size:.85rem}.recording{align-items:center;display:flex;gap:var(--arcane-space-3);justify-content:space-between;padding:var(--arcane-space-3);border:1px solid var(--arcane-border);border-radius:var(--arcane-radius-medium)}.preview{display:grid;place-items:center;min-height:16rem;overflow:hidden;background:var(--arcane-surface-muted);border:1px solid var(--arcane-border);border-radius:var(--arcane-radius-large)}.preview :where(img,video){display:block;max-width:100%;max-height:34rem}.empty{color:var(--arcane-muted);text-align:center}.status{margin:0;color:var(--arcane-muted)}@media(max-width:44rem){.actions{grid-template-columns:1fr}}</style>
 <section class="capture"><div class="actions"><button class="action arcane-card" type="button" data-capture="image"><strong>Screenshot</strong><span>Capture the selected display as PNG.</span></button><button class="action arcane-card" type="button" data-capture="video"><strong>Record video</strong><span>Record the selected display in a browser-supported video format.</span></button><button class="action arcane-card" type="button" data-capture="gif"><strong>Record GIF</strong><span>Record a compact, lower-frame-rate animated GIF.</span></button></div><div id="recording" class="recording" hidden><span id="recordingLabel">Recording…</span><button id="stop" class="arcane-button" type="button">Stop recording</button></div><div id="preview" class="preview"><div class="empty"><strong>No capture yet</strong><p>Your capture remains on this device unless you choose to save it.</p></div></div><p id="status" class="status" role="status" aria-live="polite">Choose a capture type. Your browser will ask which display to share.</p></section>
-<script type="module">const host=this,root=host.shadowRoot,preview=root.querySelector('#preview'),recording=root.querySelector('#recording'),status=root.querySelector('#status');const componentURL=new URL(host.getAttribute('href')||'./arcane/components/screen-capture.html',document.baseURI);const {default:ScreenCapture}=await import(new URL('../modules/ScreenCapture.js',componentURL));const capture=new ScreenCapture();let previewUrl='';
-root.querySelector('.actions').addEventListener('click',async event=>{const mode=event.target.closest('[data-capture]')?.dataset.capture;if(!mode)return;setButtons(true);try{if(mode==='image'){status.textContent='Choose a display to capture…';showResult(await capture.captureImage())}else{status.textContent='Choose a display to record…';if(mode==='video')await capture.startVideo();else await capture.startGif();recording.hidden=false;root.querySelector('#recordingLabel').textContent=mode==='gif'?'Recording GIF frames…':'Recording video…';status.textContent='Recording. Return here and press Stop when finished.'}}catch(error){status.textContent=error.message;setButtons(false)}});root.querySelector('#stop').addEventListener('click',async()=>{root.querySelector('#stop').disabled=true;status.textContent='Finishing capture…';try{showResult(await capture.stop())}catch(error){status.textContent=error.message}finally{recording.hidden=true;root.querySelector('#stop').disabled=false;setButtons(false)}});
+<script type="module">const host=this,root=host.shadowRoot,preview=root.querySelector('#preview'),recording=root.querySelector('#recording'),status=root.querySelector('#status');const componentURL=new URL(host.getAttribute('href')||'./arcane/components/screen-capture.html',document.baseURI);const {default:ScreenCapture}=await import(new URL('../modules/ScreenCapture.js',componentURL));const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');const events=createArcaneEventSource(host,{source:'arcane.component.screen-capture',eventTypes:['screen-capture-result','screen-capture-ready']});const capture=new ScreenCapture(),listeners=new AbortController();let destroyed=false,operationGeneration=0,previewUrl='';
+function emit(type,detail={},publicDetail={},operationId=null){if(destroyed)return false;const publication=events.dispatch(type,detail,{operationId,publicDetail});return projectArcaneDOMEvent(host,publication.occurrence,{bubbles:true,composed:true})}
+function current(generation){return !destroyed&&generation===operationGeneration}
+function cleanupCaptureStart(originalError=null){const cleanupErrors=[];clearInterval(capture.timer);if(capture.recorder&&capture.recorder.state!=='inactive'){try{capture.recorder.stop()}catch(error){cleanupErrors.push(error)}}try{capture.stopTracks(capture.stream)}catch(error){cleanupErrors.push(error)}try{capture.reset()}catch(error){cleanupErrors.push(error)}for(const error of cleanupErrors)console.error('Error cleaning up rejected screen capture start:',error);return originalError}
+async function onCapture(event){const mode=event.target.closest('[data-capture]')?.dataset.capture;if(!mode||destroyed)return;const generation=++operationGeneration;setButtons(true);try{if(mode==='image'){status.textContent='Choose a display to capture…';const result=await capture.captureImage();if(!current(generation))return;showResult(result,generation)}else{status.textContent='Choose a display to record…';if(mode==='video')await capture.startVideo();else await capture.startGif();if(!current(generation)){cleanupCaptureStart();return}recording.hidden=false;root.querySelector('#recordingLabel').textContent=mode==='gif'?'Recording GIF frames…':'Recording video…';status.textContent='Recording. Return here and press Stop when finished.'}}catch(error){const originalError=mode==='image'?error:cleanupCaptureStart(error);if(!current(generation))return;status.textContent=originalError.message;setButtons(false)}}
+async function onStop(){if(destroyed)return;const generation=operationGeneration;root.querySelector('#stop').disabled=true;status.textContent='Finishing capture…';try{const result=await capture.stop();if(current(generation)&&result)showResult(result,generation)}catch(error){if(current(generation))status.textContent=error.message}finally{if(current(generation)){recording.hidden=true;root.querySelector('#stop').disabled=false;setButtons(false)}}}
+root.querySelector('.actions').addEventListener('click',onCapture,{signal:listeners.signal});root.querySelector('#stop').addEventListener('click',onStop,{signal:listeners.signal});
 function setButtons(value){for(const button of root.querySelectorAll('[data-capture]'))button.disabled=value}
-function showResult(result){if(previewUrl)URL.revokeObjectURL(previewUrl);previewUrl=URL.createObjectURL(result.blob);const media=document.createElement(result.mimeType.startsWith('video/')?'video':'img');media.src=previewUrl;if(media.tagName==='VIDEO')media.controls=true;media.alt='Captured display preview';preview.replaceChildren(media);status.textContent=`Capture ready · ${(result.blob.size/1024/1024).toFixed(2)} MB`;setButtons(false);host.dispatchEvent(new CustomEvent('screen-capture-result',{bubbles:true,composed:true,detail:{result}}))}
-host.capture=capture;host.ready=true;host.dispatchEvent(new CustomEvent('screen-capture-ready',{bubbles:true,composed:true}));</script>
+function showResult(result,generation){if(!current(generation))return false;if(previewUrl)URL.revokeObjectURL(previewUrl);previewUrl=URL.createObjectURL(result.blob);const media=document.createElement(result.mimeType.startsWith('video/')?'video':'img');media.src=previewUrl;if(media.tagName==='VIDEO')media.controls=true;media.alt='Captured display preview';preview.replaceChildren(media);status.textContent=`Capture ready · ${(result.blob.size/1024/1024).toFixed(2)} MB`;setButtons(false);return emit('screen-capture-result',{result},{mimeType:String(result.mimeType||''),size:Number(result.blob?.size||0)},`screen-capture-${events.instanceId}-${generation}`)}
+function destroy(){if(destroyed)return false;destroyed=true;++operationGeneration;listeners.abort('screen-capture-component-destroyed');host.ready=false;recording.hidden=true;setButtons(true);root.querySelector('#stop').disabled=true;if(previewUrl){URL.revokeObjectURL(previewUrl);previewUrl=''}let error=null;try{capture.destroy()}catch(value){error=value}finally{events.dispose()}if(error)throw error;return true}
+host.capture=capture;host.destroy=destroy;host.ready=true;emit('screen-capture-ready',{}, {ready:true},`screen-capture-ready-${events.instanceId}`);</script>

package/runtime/arcane/components/source-code-viewer.html

@@ -179,6 +179,18 @@
 <script type="module">
     const host=this;
     host.ready=false;
+    const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
+    const events=createArcaneEventSource(host,{
+        source:'arcane.component.source-code-viewer',
+        eventTypes:[
+            'source-code-viewer-state',
+            'source-code-viewer-state-empty',
+            'source-code-viewer-state-error',
+            'source-code-viewer-state-loading',
+            'source-code-viewer-state-ready',
+            'source-code-viewer-ready'
+        ]
+    });
 
     const viewer=host.shadowRoot.querySelector('#viewer');
     const status=host.shadowRoot.querySelector('#status');
@@ -210,12 +222,15 @@
         text:'',
         title:''
     });
+    let destroyed=false;
+    let eventOperationSequence=0;
     let loadSequence=0;
     let options=normalizeOptions({},defaultOptions);
     let state='empty';
 
     host.clear=clear;
     host.configure=configure;
+    host.destroy=destroy;
     host.fail=fail;
     host.focus=focusSource;
     host.focusLine=focusLine;
@@ -289,12 +304,13 @@
     }
 
     async function load(source='',renderOptions={}){
+        if(destroyed)return false;
         const sequence=++loadSequence;
         transition('loading');
         try{
             const pending=typeof source==='function'?source():source;
             const result=await pending;
-            if(sequence!==loadSequence)return false;
+            if(destroyed||sequence!==loadSequence)return false;
             if(result&&typeof result==='object'&&!Array.isArray(result)){
                 return renderSource(result.text??result.value??'',{
                     ...renderOptions,
@@ -303,12 +319,13 @@
             }
             return renderSource(result??'',renderOptions);
         }catch(error){
-            if(sequence===loadSequence)showError(error);
+            if(!destroyed&&sequence===loadSequence)showError(error);
             return false;
         }
     }
 
     function render(text='',renderOptions={}){
+        if(destroyed)return false;
         ++loadSequence;
         try{
             return renderSource(text,renderOptions);
@@ -394,8 +411,11 @@
     }
 
     function transition(next,error=null){
+        if(destroyed)return false;
         state=next;
         updateStateDOM();
+        const operationId=
+            `${events.instanceId}:source-state:${(++eventOperationSequence).toString(36)}`;
         const detail={
             characters:current.text.length,
             language:current.language,
@@ -404,8 +424,46 @@
             state
         };
         if(error)detail.message=String(error?.message||'Source rendering failed.').slice(0,512);
-        host.dispatchEvent(new CustomEvent('source-code-viewer-state',{bubbles:true,composed:true,detail}));
-        host.dispatchEvent(new CustomEvent(`source-code-viewer-${state}`,{bubbles:true,composed:true,detail}));
+        const reason={
+            empty:'source-code-viewer-cleared',
+            error:'source-code-viewer-render-rejected',
+            loading:'source-code-viewer-load-started',
+            ready:'source-code-viewer-rendered'
+        }[state];
+        const publicDetail={
+            characters:detail.characters,
+            language:detail.language,
+            lines:detail.lines,
+            state:`source-code-viewer-${state}`,
+            reason,
+            ...(state==='error'?{
+                code:typeof error?.code==='string'
+                    ?error.code
+                    :'ARCANE_SOURCE_CODE_VIEWER_RENDER_REJECTED'
+            }:{})
+        };
+        const statePublication=events.dispatch(
+            'source-code-viewer-state',
+            detail,
+            {operationId,publicDetail}
+        );
+        projectArcaneDOMEvent(host,statePublication.occurrence,{bubbles:true,composed:true});
+        const exactPublication=events.dispatch(
+            `source-code-viewer-state-${state}`,
+            detail,
+            {operationId,publicDetail}
+        );
+        projectArcaneDOMEvent(host,exactPublication.occurrence,{type:`source-code-viewer-${state}`,bubbles:true,composed:true});
+        return true;
+    }
+
+    function destroy(){
+        if(destroyed)return false;
+        destroyed=true;
+        loadSequence+=1;
+        host.ready=false;
+        events.dispose();
+        return true;
     }
 
     function updateStateDOM(){
@@ -433,9 +491,18 @@
     repositoryLink.textContent=options.labels.repository;
     transition('empty');
     host.ready=true;
-    host.dispatchEvent(new CustomEvent('source-code-viewer-ready',{
-        bubbles:true,
-        composed:true,
-        detail:{component:host,state}
-    }));
+    const readyPublication=events.dispatch(
+        'source-code-viewer-ready',
+        {component:host,state},
+        {
+            operationId:
+                `${events.instanceId}:ready:${(++eventOperationSequence).toString(36)}`,
+            publicDetail:{
+                ready:true,
+                state:'source-code-viewer-empty',
+                reason:'source-code-viewer-ready'
+            }
+        }
+    );
+    projectArcaneDOMEvent(host,readyPublication.occurrence,{bubbles:true,composed:true});
 </script>

package/runtime/arcane/components/source-explanation.html

@@ -47,17 +47,24 @@
   const elements=root.querySelector('[data-elements]'); const application=root.querySelector('[data-application]'); const limitations=root.querySelector('[data-limitations]'); const nextSteps=root.querySelector('[data-next-steps]');
   const evidenceList=root.querySelector('[data-evidence]'); const original=root.querySelector('[data-original]'); const originalLabel=root.querySelector('[data-original-label]'); const originalPicker=root.querySelector('[data-original-picker]');
   const reviewForm=root.querySelector('[data-review]'); const actor=root.querySelector('[data-actor]'); const disposition=root.querySelector('[data-disposition]'); const confidence=root.querySelector('[data-confidence]'); const notes=root.querySelector('[data-notes]'); const saveState=root.querySelector('[data-save-state]');
+  const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
+  const events=createArcaneEventSource(host,{source:'arcane.component.source-explanation',eventTypes:['source-explanation-save','source-explanation-source-selected','source-explanation-ready']});
+  let destroyed=false;
   let finding=null; let sources=[];
 
   host.showFinding=showFinding;
   host.populate=(value={},options={})=>showFinding(value,options);
   host.selectSource=selectSource;
   host.markSaved=message=>{saveState.textContent=String(message||'Saved.');};
+  host.destroy=destroy;
 
   reviewForm.addEventListener('submit',event=>{
+    if(destroyed) return;
     event.preventDefault(); if(!finding) return;
     saveState.textContent='Saving…';
-    host.dispatchEvent(new CustomEvent('source-explanation-save',{bubbles:true,composed:true,detail:{recordId:finding.id,classification:actor.value,status:disposition.value,attributes:{confidence:confidence.value},notes:notes.value}}));
+    const detail={recordId:finding.id,classification:actor.value,status:disposition.value,attributes:{confidence:confidence.value},notes:notes.value};
+    const publication=events.dispatch('source-explanation-save',detail,{publicDetail:{hasFinding:true,hasNotes:Boolean(notes.value)}});
+    projectArcaneDOMEvent(host,publication.occurrence,{bubbles:true,composed:true});
   });
   originalPicker.addEventListener('change',()=>showSource(Number(originalPicker.value)));
 
@@ -110,15 +117,28 @@
   }
 
   function showSource(index=0){
+    if(destroyed) return null;
     const source=sources[index]; if(!source?.pdfUrl) return null;
     try{
       const url=sameOrigin(source.pdfUrl); if(source.page){url.searchParams.set('arcane-pdf-page',String(Number(source.page)));url.hash=`page=${Number(source.page)}`;}
       originalPicker.value=String(index); original.src=url.href; original.title=`Original cited source: ${source.filename||source.recordId||'document'}${source.page?`, page ${source.page}`:''}`; original.hidden=false;
       originalLabel.textContent=`Original source${source.page?` at PDF page ${source.page}`:''}. Compare the full page before relying on the extracted text.`;
-      host.dispatchEvent(new CustomEvent('source-explanation-source-selected',{bubbles:true,composed:true,detail:{index,source:{...source}}}));
+      const publication=events.dispatch('source-explanation-source-selected',{index,source:{...source}},{publicDetail:{index,hasSource:true}});
+      projectArcaneDOMEvent(host,publication.occurrence,{bubbles:true,composed:true});
       return {...source};
     }catch(error){original.hidden=true; originalLabel.textContent=error.message; return null;}
   }
 
-  host.dispatchEvent(new CustomEvent('source-explanation-ready',{bubbles:true,composed:true}));
+  function destroy(){
+    if(destroyed) return false;
+    destroyed=true;
+    host.ready=false;
+    original.removeAttribute('src');
+    events.dispose();
+    return true;
+  }
+
+  host.ready=true;
+  const readyPublication=events.dispatch('source-explanation-ready',{}, {publicDetail:{ready:true}});
+  projectArcaneDOMEvent(host,readyPublication.occurrence,{bubbles:true,composed:true});
 </script>