arcane-os 0.2.2 → 0.3.0

package/runtime/arcane/components/summary-strip.html

@@ -40,13 +40,17 @@
 <script type="module">
     const host=this;
     const root=host.shadowRoot;
+    const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
+    const events=createArcaneEventSource(host,{source:'arcane.component.summary-strip',eventTypes:['summary-strip-change','summary-strip-select','summary-strip-ready']});
     const region=root.querySelector('#region');
     const list=root.querySelector('#items');
+    let destroyed=false;
     let items=[];
     let options={};
 
     host.clear=clear;
     host.configure=configure;
+    host.destroy=destroy;
     host.setItems=setItems;
     host.updateItem=updateItem;
 
@@ -57,6 +61,12 @@
 
     list.addEventListener('click',selectItem);
 
+    function emit(type,detail={},publicDetail={}){
+        if(destroyed)return false;
+        const publication=events.dispatch(type,detail,{publicDetail});
+        return projectArcaneDOMEvent(host,publication.occurrence,{bubbles:true,composed:true});
+    }
+
     function datasetOptions(){
         return {
             ariaLabel:host.dataset.ariaLabel||'Summary',
@@ -74,11 +84,7 @@
     function setItems(values=[]){
         items=Array.from(values||[]).map((value,index)=>normalizeItem(value,index));
         render();
-        host.dispatchEvent(new CustomEvent('summary-strip-change',{
-            bubbles:true,
-            composed:true,
-            detail:{items:getItems()}
-        }));
+        emit('summary-strip-change',{items:getItems()},{itemCount:items.length});
         return getItems();
     }
 
@@ -156,11 +162,7 @@
         if(!target||!item||item.disabled){
             return;
         }
-        host.dispatchEvent(new CustomEvent('summary-strip-select',{
-            bubbles:true,
-            composed:true,
-            detail:{id:item.id,item:{...item}}
-        }));
+        emit('summary-strip-select',{id:item.id,item:{...item}},{id:item.id,status:item.status});
     }
 
     function getItems(){
@@ -171,7 +173,16 @@
         return setItems([]);
     }
 
+    function destroy(){
+        if(destroyed)return false;
+        destroyed=true;
+        host.ready=false;
+        list.removeEventListener('click',selectItem);
+        events.dispose();
+        return true;
+    }
+
     configure(datasetOptions());
     host.ready=true;
-    host.dispatchEvent(new CustomEvent('summary-strip-ready',{bubbles:true,composed:true}));
+    emit('summary-strip-ready',{}, {ready:true});
 </script>

package/runtime/arcane/components/table.html

@@ -16,32 +16,39 @@
     </tbody>
 </table>
 
-<script typr="module">
+<script type="module">
     const host = this;
     const shadowRoot=this.shadowRoot;
+    const {createArcaneEventSource,projectArcaneDOMEvent}=
+        await import('arcane-os/event-manager');
+    const events=createArcaneEventSource(host,{
+        source:'arcane.component.table',
+        eventTypes:['table-ready','header-update','body-update']
+    });
+    let destroyed=false;
+    let eventOperationSequence=0;
     host.buildHeader=buildHeader;
     host.buildTable=buildTable;
+    host.destroy=destroy;
     host.ready=false;
 
-    const tableReady=new CustomEvent(
-        'table-ready', {
-            detail: {  }
-        }
-    );
-
-    const headerUpdate=new CustomEvent(
-        'header-update', {
-            detail: {  }
-        }
-    );
-
-    const bodyUpdate=new CustomEvent(
-        'body-update', {
-            detail: {  }
-        }
-    );
+    function emit(type,detail={},publicDetail={}){
+        if(destroyed)return false;
+        const operationId=
+            `${events.instanceId}:${type}:${(++eventOperationSequence).toString(36)}`;
+        const publication=events.dispatch(
+            type,
+            detail,
+            {
+                operationId,
+                publicDetail:{...publicDetail,reason:type}
+            }
+        );
+        return projectArcaneDOMEvent(host,publication.occurrence);
+    }
 
     async function buildHeader(headerArray=['','']){
+        if(destroyed)return false;
         const tableHead = shadowRoot.querySelector('thead');
         tableHead.innerHTML = '';
         const th = tableHead.insertRow();
@@ -51,10 +58,12 @@
                 th.insertCell(-1).innerText=header;
             }
         );
-        host.dispatchEvent(headerUpdate);
+        emit('header-update',{}, {columnCount:headerArray.length});
+        return true;
     }
 
     async function buildTable(tableArray=[['', ''], ['','']]){
+        if(destroyed)return false;
         const tableBody = shadowRoot.querySelector('tbody');
         tableBody.innerHTML = '';
 
@@ -68,10 +77,19 @@
                 );
             }
         );
-        host.dispatchEvent(bodyUpdate);
+        emit('body-update',{}, {rowCount:tableArray.length});
+        return true;
+    }
+
+    function destroy(){
+        if(destroyed)return false;
+        destroyed=true;
+        host.ready=false;
+        events.dispose();
+        return true;
     }
     
     host.ready=true;
-    host.dispatchEvent(tableReady);
+    emit('table-ready',{}, {ready:true});
 
 </script>

package/runtime/arcane/components/task-progress.html

@@ -47,6 +47,8 @@
 <script type="module">
     const host=this;
     const root=host.shadowRoot;
+    const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
+    const events=createArcaneEventSource(host,{source:'arcane.component.task-progress',eventTypes:['task-progress-started','task-progress-error','task-progress-complete','task-progress-change','task-progress-ready']});
     const panel=root.querySelector('#panel');
     const heading=root.querySelector('#taskProgressTitle');
     const description=root.querySelector('#description');
@@ -58,12 +60,26 @@
 
     const allowedStatuses=new Set(['pending','running','complete','failed','canceled']);
     let activeRun=Promise.resolve([]);
+    let destroyed=false;
+    let eventOperationSequence=0;
     let options={};
+    let runGeneration=0;
     let running=false;
     let tasks=[];
 
+    function emit(type,detail={},publicDetail={},operationId=null){
+        if(destroyed)return false;
+        const publication=events.dispatch(
+            type,
+            detail,
+            {publicDetail,operationId}
+        );
+        return projectArcaneDOMEvent(host,publication.occurrence,{bubbles:true,composed:true});
+    }
+
     host.clear=clear;
     host.configure=configure;
+    host.destroy=destroy;
     host.runTasks=runTasks;
     host.setTasks=setTasks;
     host.updateTask=updateTask;
@@ -92,6 +108,7 @@
     }
 
     function setTasks(values=[]){
+        if(destroyed)return [];
         const ids=new Set();
         tasks=Array.from(values||[]).map((value,index)=>{
             const task=normalizeTask(value,index);
@@ -117,6 +134,7 @@
     }
 
     function updateTask(id,update={}){
+        if(destroyed)return null;
         const index=typeof id==='number'?id:tasks.findIndex(task=>task.id===`${id}`);
         if(index<0||index>=tasks.length){
             return null;
@@ -181,6 +199,7 @@
     }
 
     async function runTasks(title='Progress',jobs=[]){
+        if(destroyed)return [];
         if(running){
             return activeRun;
         }
@@ -197,36 +216,60 @@
             status:'pending'
         })));
         running=true;
+        const generation=++runGeneration;
+        const operationId=
+            `${events.instanceId}:task-run:${(++eventOperationSequence).toString(36)}`;
         syncOverall();
-        host.dispatchEvent(new CustomEvent('task-progress-started',{
-            bubbles:true,
-            composed:true,
-            detail:getSnapshot()
-        }));
+        emit(
+            'task-progress-started',
+            getSnapshot(),
+            {
+                reason:'task-run-started',
+                taskCount:tasks.length,
+                running:true
+            },
+            operationId
+        );
         activeRun=Promise.allSettled(runnable.map(async(job,index)=>{
             updateTask(index,{status:'running'});
             try{
                 const value=await job.task();
+                if(destroyed||generation!==runGeneration)return value;
                 updateTask(index,{status:'complete',message:job.completeMessage||''});
                 return value;
             }catch(error){
+                if(destroyed||generation!==runGeneration)throw error;
                 updateTask(index,{status:'failed',message:job.errorMessage||error?.message||'Unable to complete.'});
-                host.dispatchEvent(new CustomEvent('task-progress-error',{
-                    bubbles:true,
-                    composed:true,
-                    detail:{error,id:tasks[index]?.id,index,task:{...tasks[index]}}
-                }));
+                emit(
+                    'task-progress-error',
+                    {error,id:tasks[index]?.id,index,task:{...tasks[index]}},
+                    {
+                        code:typeof error?.code==='string'
+                            ?error.code
+                            :'ARCANE_TASK_EXECUTION_REJECTED',
+                        index,
+                        reason:'task-execution-rejected'
+                    },
+                    operationId
+                );
                 throw error;
             }
         }));
         const results=await activeRun;
         running=false;
+        if(destroyed||generation!==runGeneration)return results;
         syncOverall();
-        host.dispatchEvent(new CustomEvent('task-progress-complete',{
-            bubbles:true,
-            composed:true,
-            detail:{...getSnapshot(),results:results.slice()}
-        }));
+        emit(
+            'task-progress-complete',
+            {...getSnapshot(),results:results.slice()},
+            {
+                reason:'task-run-settled',
+                taskCount:tasks.length,
+                rejectedCount:results.filter(result=>result.status==='rejected').length,
+                running:false
+            },
+            operationId
+        );
         return results;
     }
 
@@ -258,14 +301,20 @@
     }
 
     function emitChange(task=null){
-        host.dispatchEvent(new CustomEvent('task-progress-change',{
-            bubbles:true,
-            composed:true,
-            detail:{...getSnapshot(),task:task?{...task}:null}
-        }));
+        emit(
+            'task-progress-change',
+            {...getSnapshot(),task:task?{...task}:null},
+            {
+                taskCount:tasks.length,
+                running,
+                reason:'task-state-changed',
+                taskStatus:task?.status?`task-${task.status}`:null
+            }
+        );
     }
 
     function clear(){
+        if(destroyed)return false;
         if(running){
             return false;
         }
@@ -275,8 +324,17 @@
         return true;
     }
 
+    function destroy(){
+        if(destroyed)return false;
+        destroyed=true;
+        runGeneration+=1;
+        host.ready=false;
+        events.dispose();
+        return true;
+    }
+
     configure(datasetOptions());
     render();
     host.ready=true;
-    host.dispatchEvent(new CustomEvent('task-progress-ready',{bubbles:true,composed:true}));
+    emit('task-progress-ready',{}, {ready:true,reason:'task-progress-ready'});
 </script>

package/runtime/arcane/components/terminal-workspace.html

@@ -27,10 +27,12 @@
 </section>
 <script type="module">
     const {parseAnsi,stripAnsi}=await import('../modules/AnsiText.js');
+    const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
     const host=this,root=host.shadowRoot;
     const tabs=root.querySelector('#tabs'),output=root.querySelector('#output'),input=root.querySelector('#input'),prompt=root.querySelector('#prompt'),promptLabel=root.querySelector('#promptLabel'),connection=root.querySelector('#connection'),search=root.querySelector('#search');
-    const sessions=new Map();let activeId='',history=[],historyIndex=0,completions=[];
-    host.configure=configure;host.addSession=addSession;host.removeSession=removeSession;host.activateSession=activateSession;host.append=append;host.clear=clear;host.setState=setState;host.setTheme=setTheme;host.focus=()=>input.focus();host.ready=true;
+    const events=createArcaneEventSource(host,{source:'arcane.component.terminal-workspace',eventTypes:['terminal-interrupt','terminal-settings','terminal-session-select','terminal-clear','terminal-submit','terminal-session-close','terminal-session-new','terminal-workspace-ready']});
+    const sessions=new Map();let activeId='',history=[],historyIndex=0,completions=[],destroyed=false,eventOperationSequence=0;
+    host.configure=configure;host.destroy=destroy;host.addSession=addSession;host.removeSession=removeSession;host.activateSession=activateSession;host.append=append;host.clear=clear;host.setState=setState;host.setTheme=setTheme;host.focus=()=>input.focus();host.ready=true;
     prompt.addEventListener('submit',event=>{event.preventDefault();submit();});
     input.addEventListener('keydown',event=>{
         if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();submit();}
@@ -60,6 +62,7 @@
     function renderText(row,text,term){const clean=stripAnsi(text);if(!term){for(const token of parseAnsi(text)){const span=document.createElement('span');span.textContent=token.text;const classes=[];if(token.style.bold)classes.push('ansi-bold');if(token.style.dim)classes.push('ansi-dim');if(token.style.italic)classes.push('ansi-italic');if(token.style.underline)classes.push('ansi-underline');if(token.style.foreground&&!token.style.foreground.startsWith('index-'))classes.push(`ansi-${token.style.foreground}`);span.className=classes.join(' ');row.append(span);}return;}let cursor=0,index=clean.toLowerCase().indexOf(term);while(index>=0){row.append(document.createTextNode(clean.slice(cursor,index)));const mark=document.createElement('mark');mark.textContent=clean.slice(index,index+term.length);row.append(mark);cursor=index+term.length;index=clean.toLowerCase().indexOf(term,cursor);}row.append(document.createTextNode(clean.slice(cursor)));}
     function toggleSearch(force){search.hidden=force===undefined?!search.hidden:!force;if(!search.hidden)search.focus();else{search.value='';render();input.focus();}}
     function resizeInput(){input.style.height='auto';input.style.height=`${Math.min(input.scrollHeight,160)}px`;}
-    function emit(type,detail={}){host.dispatchEvent(new CustomEvent(type,{bubbles:true,composed:true,detail}));}
-    host.dispatchEvent(new CustomEvent('terminal-workspace-ready',{bubbles:true,composed:true}));
+    function emit(type,detail={}){if(destroyed)return false;const operationId=`${events.instanceId}:${type}:${(++eventOperationSequence).toString(36)}`;const publication=events.dispatch(type,detail,{operationId,publicDetail:{hasSession:Boolean(detail.sessionId),lineLength:typeof detail.line==='string'?detail.line.length:0,historyCount:Array.isArray(detail.history)?detail.history.length:0,reason:type}});return projectArcaneDOMEvent(host,publication.occurrence,{bubbles:true,composed:true});}
+    function destroy(){if(destroyed)return false;destroyed=true;host.ready=false;for(const id of ['find','clear','interrupt','settings','copy'])root.querySelector(`#${id}`).onclick=null;events.dispose();return true;}
+    emit('terminal-workspace-ready');
 </script>

package/runtime/arcane/components/theme-editor.html

@@ -21,8 +21,11 @@
     const colors=root.querySelector('#colors');
     const status=root.querySelector('#status');
     const {default:Theme,themeColorToHex,themeTokens}=await import('../entities/Theme.js');
+    const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
+    const events=createArcaneEventSource(host,{source:'arcane.component.theme-editor',eventTypes:['theme-preview','theme-save','theme-reset','theme-editor-ready']});
+    let destroyed=false;
 
-    host.configure=configure;host.getTheme=getTheme;host.setTheme=setTheme;host.setBusy=setBusy;host.setStatus=setStatus;
+    host.configure=configure;host.destroy=destroy;host.getTheme=getTheme;host.setTheme=setTheme;host.setBusy=setBusy;host.setStatus=setStatus;
     colors.replaceChildren(...themeTokens.map(token=>{
         const field=document.createElement('div'),input=document.createElement('input'),label=document.createElement('label');
         field.className='color-field';input.type='color';input.id=`theme-${token.key}`;input.name=token.key;input.value=themeColorToHex(token.defaultValue);label.htmlFor=input.id;label.textContent=token.label;field.append(input,label);return field;
@@ -31,11 +34,12 @@
     form.addEventListener('submit',event=>{event.preventDefault();emit('theme-save',{theme:getTheme()});});
     root.querySelector('#reset').addEventListener('click',()=>emit('theme-reset'));
 
-    function emit(name,detail={}){host.dispatchEvent(new CustomEvent(name,{bubbles:true,composed:true,detail}));}
+    function emit(name,detail={}){if(destroyed)return false;const theme=detail.theme;const publication=events.dispatch(name,detail,{publicDetail:theme?{scheme:String(theme.scheme||''),tokenCount:Object.keys(theme.tokens||{}).length}:{}});return projectArcaneDOMEvent(host,publication.occurrence,{bubbles:true,composed:true});}
     function getTheme(){return new Theme({name:form.elements.name.value,scheme:form.elements.scheme.value,tokens:Object.fromEntries(themeTokens.map(token=>[token.key,form.elements[token.key].value]))});}
     function setTheme(input={}){const theme=Theme.fromJSON(input);form.elements.name.value=theme.name;form.elements.scheme.value=theme.scheme;for(const token of themeTokens) form.elements[token.key].value=themeColorToHex(theme.tokens[token.key]);return theme;}
     function configure(options={}){return setTheme(options.theme||{name:'My Arcane skin'});}
     function setBusy(value=true){for(const control of form.elements) control.disabled=Boolean(value);form.setAttribute('aria-busy',String(Boolean(value)));}
     function setStatus(value=''){status.textContent=String(value||'');return status.textContent;}
-    configure();host.ready=true;emit('theme-editor-ready');
+    function destroy(){if(destroyed)return false;destroyed=true;host.ready=false;events.dispose();return true;}
+    configure();host.ready=true;const readyPublication=events.dispatch('theme-editor-ready',{}, {publicDetail:{ready:true}});projectArcaneDOMEvent(host,readyPublication.occurrence,{bubbles:true,composed:true});
 </script>

package/runtime/arcane/components/unified-inbox.html

@@ -8,13 +8,18 @@
  <div id="empty" class="empty"><strong>No conversations yet</strong><p>Connect a service in settings to bring conversations into this inbox.</p></div>
 </section>
 <script type="module">
-const host=this,root=host.shadowRoot,list=root.querySelector('#list'),empty=root.querySelector('#empty'),search=root.querySelector('#search'),filters=root.querySelector('#filters');let threads=[],activeId='',channel='all',providers={};
+const host=this,root=host.shadowRoot,list=root.querySelector('#list'),empty=root.querySelector('#empty'),search=root.querySelector('#search'),filters=root.querySelector('#filters');
+const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
+const events=createArcaneEventSource(host,{source:'arcane.component.unified-inbox',eventTypes:['inbox-refresh','thread-select','unified-inbox-ready']});
+let threads=[],activeId='',channel='all',providers={},destroyed=false;
+function emit(type,detail={},publicDetail={}){if(destroyed)return false;const publication=events.dispatch(type,detail,{publicDetail});return projectArcaneDOMEvent(host,publication.occurrence,{bubbles:true,composed:true})}
+host.destroy=()=>{if(destroyed)return false;destroyed=true;host.ready=false;events.dispose();return true};
 host.configure=options=>{providers=Object.fromEntries(Array.from(options?.providers||[],item=>[item.id,item]));renderFilters(options?.channels);return host.setThreads(options?.threads||[])};
 host.setThreads=values=>{threads=Array.from(values||[]);render();return threads};host.setActive=id=>{activeId=String(id||'');render();};host.setLoading=value=>{root.querySelector('#refresh').disabled=Boolean(value)};
-root.querySelector('#refresh').addEventListener('click',()=>host.dispatchEvent(new CustomEvent('inbox-refresh',{bubbles:true,composed:true})));
+root.querySelector('#refresh').addEventListener('click',()=>emit('inbox-refresh'));
 search.addEventListener('input',render);
 function renderFilters(values){const names=['all',...new Set(values||[])];filters.replaceChildren(...names.map(name=>{const button=document.createElement('button');button.type='button';button.className='arcane-button arcane-button--tertiary';button.textContent=name==='all'?'All':name.toUpperCase();button.setAttribute('aria-pressed',String(channel===name));button.addEventListener('click',()=>{channel=name;renderFilters(values);render()});return button}))}
 function render(){const term=search.value.trim().toLowerCase();const visible=threads.filter(item=>(channel==='all'||item.channel===channel)&&(!term||`${item.title} ${item.preview} ${(item.participants||[]).join(' ')}`.toLowerCase().includes(term)));empty.hidden=visible.length>0;list.replaceChildren(...visible.map(makeThread));}
-function makeThread(item){const button=document.createElement('button');button.type='button';button.className='thread';button.setAttribute('aria-current',String(item.id===activeId));const top=document.createElement('span'),title=document.createElement('span'),time=document.createElement('time'),preview=document.createElement('span'),meta=document.createElement('span'),badge=document.createElement('span'),provider=document.createElement('span');top.className='line';title.className='title';title.textContent=item.title;time.dateTime=item.updatedAt;time.textContent=new Intl.DateTimeFormat(undefined,{month:'short',day:'numeric'}).format(new Date(item.updatedAt));preview.className='preview';preview.textContent=item.preview||'No preview';meta.className='meta';badge.className='badge';badge.textContent=item.channel;provider.textContent=providers[item.providerId]?.label||item.providerId;top.append(title,time);meta.append(badge,provider);if(item.unreadCount){const unread=document.createElement('span');unread.className='unread';unread.textContent=String(item.unreadCount);meta.append(unread)}button.append(top,preview,meta);button.addEventListener('click',()=>host.dispatchEvent(new CustomEvent('thread-select',{bubbles:true,composed:true,detail:{thread:item}})));return button;}
-host.ready=true;host.dispatchEvent(new CustomEvent('unified-inbox-ready',{bubbles:true,composed:true}));
+function makeThread(item){const button=document.createElement('button');button.type='button';button.className='thread';button.setAttribute('aria-current',String(item.id===activeId));const top=document.createElement('span'),title=document.createElement('span'),time=document.createElement('time'),preview=document.createElement('span'),meta=document.createElement('span'),badge=document.createElement('span'),provider=document.createElement('span');top.className='line';title.className='title';title.textContent=item.title;time.dateTime=item.updatedAt;time.textContent=new Intl.DateTimeFormat(undefined,{month:'short',day:'numeric'}).format(new Date(item.updatedAt));preview.className='preview';preview.textContent=item.preview||'No preview';meta.className='meta';badge.className='badge';badge.textContent=item.channel;provider.textContent=providers[item.providerId]?.label||item.providerId;top.append(title,time);meta.append(badge,provider);if(item.unreadCount){const unread=document.createElement('span');unread.className='unread';unread.textContent=String(item.unreadCount);meta.append(unread)}button.append(top,preview,meta);button.addEventListener('click',()=>emit('thread-select',{thread:item},{threadId:String(item.id||''),channel:String(item.channel||'')}));return button;}
+host.ready=true;emit('unified-inbox-ready',{}, {ready:true});
 </script>