arcane-os 0.2.2 → 0.3.0

package/runtime/arcane/components/app-bar.html

@@ -234,6 +234,9 @@
 <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.app-bar',eventTypes:['app-bar-ready']});
+    const lifecycleController=new AbortController();
     const nav=root.querySelector('nav');
     const brandLink=root.querySelector('#brandLink');
     const navigationSlot=root.querySelector('#navigationSlot');
@@ -242,11 +245,13 @@
     const statusTones=new Set(['default','success','warning','error','muted']);
 
     let navigation=[];
+    let destroyed=false;
 
     host.setNavigation=setNavigation;
     host.setActiveRoute=setActiveRoute;
     host.setStatus=setStatus;
     host.refresh=refresh;
+    host.destroy=destroy;
 
     Object.defineProperties(
         host,
@@ -269,9 +274,9 @@
         }
     );
 
-    navigationSlot.addEventListener('slotchange',updateCurrent);
-    window.addEventListener('hashchange',onLocationChange);
-    window.addEventListener('popstate',onLocationChange);
+    navigationSlot.addEventListener('slotchange',updateCurrent,{signal:lifecycleController.signal});
+    window.addEventListener('hashchange',onLocationChange,{signal:lifecycleController.signal});
+    window.addEventListener('popstate',onLocationChange,{signal:lifecycleController.signal});
 
     const observer=new MutationObserver(
         records=>{
@@ -322,6 +327,9 @@
     }
 
     function setNavigation(items=[]){
+        if(destroyed){
+            return false;
+        }
         navigation=normalizeNavigation(items);
         generatedNavigation.replaceChildren(
             ...navigation.map(
@@ -395,6 +403,9 @@
     }
 
     function setActiveRoute(route=''){
+        if(destroyed){
+            return false;
+        }
         if(route){
             host.setAttribute('data-active-route',String(route).replace(/^#/,''));
         }else{
@@ -424,6 +435,9 @@
     }
 
     function setStatus(message='',tone='default'){
+        if(destroyed){
+            return false;
+        }
         if(message===null||message===''){
             host.removeAttribute('data-status');
         }else{
@@ -443,26 +457,33 @@
     }
 
     function refresh(){
+        if(destroyed){
+            return false;
+        }
         syncBrand();
         syncStatus();
         updateCurrent();
         return host;
     }
 
+    function destroy(){
+        if(destroyed){
+            return false;
+        }
+        destroyed=true;
+        lifecycleController.abort();
+        observer.disconnect();
+        events.dispose();
+        host.ready=false;
+        return true;
+    }
+
     syncBrand();
     syncStatus();
     readNavigationAttribute();
     updateCurrent();
 
     host.ready=true;
-    host.dispatchEvent(
-        new CustomEvent(
-            'app-bar-ready',
-            {
-                detail:{appBar:host},
-                bubbles:true,
-                composed:true
-            }
-        )
-    );
+    const readyPublication=events.dispatch('app-bar-ready',{appBar:host},{publicDetail:{ready:true}});
+    projectArcaneDOMEvent(host,readyPublication.occurrence,{bubbles:true,composed:true});
 </script>

package/runtime/arcane/components/assistant-panel.html

@@ -300,6 +300,9 @@
 <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.assistant-panel',eventTypes:['assistant-opened','assistant-closed','assistant-send','assistant-clear','assistant-ready']});
+    const lifecycleController=new AbortController();
     const shell=root.querySelector('.assistant-shell');
     const panel=root.querySelector('.panel');
     const stateRegion=root.querySelector('.state');
@@ -311,10 +314,18 @@
     const backdrop=root.querySelector('.backdrop');
     const validStates=new Set(['ready','empty','pending','streaming','error']);
     const handledSubmits=new WeakSet();
-    const pendingDisabledState=new WeakMap();
+    const pendingDisabledState=new Map();
 
     let previousFocus=null;
     let opened=host.hasAttribute('data-open');
+    let operationSequence=0;
+    let destroyed=false;
+    const reservedProjectionKeys=Object.freeze([
+        'occurrenceId',
+        'arcaneSource',
+        'instanceId',
+        'operationId'
+    ]);
 
     host.open=open;
     host.close=close;
@@ -324,6 +335,29 @@
     host.setState=setState;
     host.focusComposer=focusComposer;
     host.scrollToEnd=scrollToEnd;
+    host.destroy=destroy;
+
+    function nextOperationId(kind){
+        operationSequence+=1;
+        return `${events.descriptor.instanceId}:${kind}:${operationSequence}`;
+    }
+
+    function compatibilityDetail(input={}){
+        const detail={...input};
+        for(const key of reservedProjectionKeys){
+            delete detail[key];
+        }
+        return detail;
+    }
+
+    function emit(type,detail={},publicDetail={},options={}){
+        if(destroyed){
+            return false;
+        }
+        const publication=events.dispatch(type,detail,{publicDetail,operationId:options.operationId||null,cancelable:Boolean(options.cancelable)});
+        if(options.cancelable&&!publication.accepted) return false;
+        return projectArcaneDOMEvent(host,publication.occurrence,{bubbles:true,composed:true,cancelable:Boolean(options.cancelable)});
+    }
 
     Object.defineProperties(
         host,
@@ -349,15 +383,15 @@
         }
     );
 
-    closeButton.addEventListener('click',()=>close());
-    clearButton.addEventListener('click',()=>clear());
-    backdrop.addEventListener('click',()=>close());
-    root.addEventListener('submit',onComposerSubmit);
-    host.addEventListener('submit',onComposerSubmit);
-    host.addEventListener('click',onHostAction);
-    document.addEventListener('keydown',onDocumentKeydown);
-    messagesSlot.addEventListener('slotchange',syncState);
-    composerSlot.addEventListener('slotchange',syncComposerState);
+    closeButton.addEventListener('click',()=>close(),{signal:lifecycleController.signal});
+    clearButton.addEventListener('click',()=>clear(),{signal:lifecycleController.signal});
+    backdrop.addEventListener('click',()=>close(),{signal:lifecycleController.signal});
+    root.addEventListener('submit',onComposerSubmit,{signal:lifecycleController.signal});
+    host.addEventListener('submit',onComposerSubmit,{signal:lifecycleController.signal});
+    host.addEventListener('click',onHostAction,{signal:lifecycleController.signal});
+    document.addEventListener('keydown',onDocumentKeydown,{signal:lifecycleController.signal});
+    messagesSlot.addEventListener('slotchange',syncState,{signal:lifecycleController.signal});
+    composerSlot.addEventListener('slotchange',syncComposerState,{signal:lifecycleController.signal});
 
     const observer=new MutationObserver(
         records=>{
@@ -400,6 +434,9 @@
     }
 
     function setOpened(next,options={}){
+        if(destroyed){
+            return false;
+        }
         const changed=next!==opened;
 
         if(next&&changed){
@@ -415,16 +452,7 @@
             return false;
         }
 
-        host.dispatchEvent(
-            new CustomEvent(
-                next?'assistant-opened':'assistant-closed',
-                {
-                    detail:{assistant:host,layout:host.layout},
-                    bubbles:true,
-                    composed:true
-                }
-            )
-        );
+        emit(next?'assistant-opened':'assistant-closed',{assistant:host,layout:host.layout},{opened:next,layout:host.layout});
 
         if(next&&options.focus!==false){
             requestAnimationFrame(()=>focusComposer());
@@ -503,6 +531,9 @@
     }
 
     function setState(next='ready',message=''){
+        if(destroyed){
+            return shell.dataset.state;
+        }
         if(next==='auto'||next===null){
             host.removeAttribute('data-state');
             host.removeAttribute('data-state-message');
@@ -523,16 +554,25 @@
     function syncComposerState(){
         const disabled=shell.dataset.state==='pending';
         const controls=composerControls();
+        const currentControls=new Set(controls);
+        for(const [control,original] of pendingDisabledState){
+            if(!disabled||!currentControls.has(control)){
+                restoreComposerControl(control,original);
+                pendingDisabledState.delete(control);
+            }
+        }
         controls.forEach(control=>{
             if(control.matches('button,input,textarea,select')){
                 if(disabled&&!pendingDisabledState.has(control)){
-                    pendingDisabledState.set(control,control.disabled);
+                    pendingDisabledState.set(
+                        control,
+                        {
+                            disabled:control.disabled,
+                            ariaDisabled:control.getAttribute('aria-disabled')
+                        }
+                    );
                     control.disabled=true;
                     control.setAttribute('aria-disabled','true');
-                }else if(!disabled&&pendingDisabledState.has(control)){
-                    control.disabled=pendingDisabledState.get(control);
-                    control.toggleAttribute('aria-disabled',control.disabled);
-                    pendingDisabledState.delete(control);
                 }
             }
         });
@@ -551,7 +591,26 @@
         return controls;
     }
 
+    function restoreComposerControl(control,original){
+        control.disabled=original.disabled;
+        if(original.ariaDisabled===null){
+            control.removeAttribute('aria-disabled');
+        }else{
+            control.setAttribute('aria-disabled',original.ariaDisabled);
+        }
+    }
+
+    function restoreComposerControls(){
+        for(const [control,original] of pendingDisabledState){
+            restoreComposerControl(control,original);
+        }
+        pendingDisabledState.clear();
+    }
+
     function focusComposer(){
+        if(destroyed){
+            return null;
+        }
         const controls=composerControls();
         const target=controls.find(
             element=>element.matches?.('textarea,input:not([type="hidden"]),[contenteditable="true"]')&&!element.disabled
@@ -562,6 +621,9 @@
     }
 
     function scrollToEnd(options={}){
+        if(destroyed){
+            return 0;
+        }
         const messages=root.querySelector('.messages');
         messages.scrollTo({
             top:messages.scrollHeight,
@@ -595,37 +657,23 @@
     }
 
     function send(message='',context={}){
+        if(destroyed){
+            return false;
+        }
         const normalized=String(message??'').trim();
 
         if(!normalized){
             return false;
         }
 
-        return host.dispatchEvent(
-            new CustomEvent(
-                'assistant-send',
-                {
-                    detail:{...context,message:normalized,assistant:host},
-                    bubbles:true,
-                    composed:true,
-                    cancelable:true
-                }
-            )
-        );
+        return emit('assistant-send',{...compatibilityDetail(context),message:normalized,assistant:host},{messageLength:normalized.length,layout:host.layout},{cancelable:true,operationId:nextOperationId('send')});
     }
 
     function clear(detail={}){
-        return host.dispatchEvent(
-            new CustomEvent(
-                'assistant-clear',
-                {
-                    detail:{...detail,assistant:host},
-                    bubbles:true,
-                    composed:true,
-                    cancelable:true
-                }
-            )
-        );
+        if(destroyed){
+            return false;
+        }
+        return emit('assistant-clear',{...compatibilityDetail(detail),assistant:host},{layout:host.layout},{cancelable:true,operationId:nextOperationId('clear')});
     }
 
     function onHostAction(event){
@@ -695,6 +743,20 @@
         }
     }
 
+    function destroy(){
+        if(destroyed){
+            return false;
+        }
+        restoreComposerControls();
+        destroyed=true;
+        lifecycleController.abort();
+        observer.disconnect();
+        returnFocus();
+        events.dispose();
+        host.ready=false;
+        return true;
+    }
+
     syncLabels();
     syncLayout();
     syncOpenedState();
@@ -702,14 +764,5 @@
     syncComposerState();
 
     host.ready=true;
-    host.dispatchEvent(
-        new CustomEvent(
-            'assistant-ready',
-            {
-                detail:{assistant:host},
-                bubbles:true,
-                composed:true
-            }
-        )
-    );
+    emit('assistant-ready',{assistant:host},{ready:true});
 </script>

package/runtime/arcane/components/calculator.html

@@ -1,8 +1,11 @@
 <link rel="stylesheet" href="./arcane/css/theme.css?v=1"><link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
 <style>:host{display:block;max-width:34rem}.calculator{display:grid;gap:var(--arcane-space-3);padding:var(--arcane-space-4)}.display{display:grid;gap:var(--arcane-space-2)}.display input{font:600 1.3rem/1.4 ui-monospace,monospace;text-align:right}.result{min-height:2.5rem;margin:0;text-align:right;font-size:1.8rem;font-weight:750;overflow-wrap:anywhere}.keys{display:grid;gap:var(--arcane-space-2);grid-template-columns:repeat(5,1fr)}.keys button{min-width:0;padding:.7rem .35rem}.status{min-height:1.4rem;margin:0;color:var(--arcane-muted)}@media(max-width:28rem){.keys{grid-template-columns:repeat(4,1fr)}}</style>
 <section class="calculator arcane-card"><div class="display arcane-field"><label for="expression">Expression</label><input id="expression" inputmode="decimal" autocomplete="off" spellcheck="false" value=""><p id="result" class="result" aria-live="polite">0</p></div><div id="keys" class="keys" aria-label="Calculator keypad"></div><p id="status" class="status" role="status"></p></section>
-<script type="module">const host=this,root=host.shadowRoot,input=root.querySelector('#expression'),result=root.querySelector('#result'),status=root.querySelector('#status'),keys=root.querySelector('#keys');const componentURL=new URL(host.getAttribute('href')||'./arcane/components/calculator.html',document.baseURI);const {default:CalculatorEngine}=await import(new URL('../modules/CalculatorEngine.js',componentURL));const engine=new CalculatorEngine(),definitions=['7','8','9','/','sqrt(','4','5','6','*','^','1','2','3','-','%','0','.','(',')','+','pi','e','C','⌫','='];
+<script type="module">const host=this,root=host.shadowRoot,input=root.querySelector('#expression'),result=root.querySelector('#result'),status=root.querySelector('#status'),keys=root.querySelector('#keys');const componentURL=new URL(host.getAttribute('href')||'./arcane/components/calculator.html',document.baseURI);const {default:CalculatorEngine}=await import(new URL('../modules/CalculatorEngine.js',componentURL));const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');const events=createArcaneEventSource(host,{source:'arcane.component.calculator',eventTypes:['calculation-complete','calculation-error','calculator-ready']}),lifecycleController=new AbortController();const engine=new CalculatorEngine(),definitions=['7','8','9','/','sqrt(','4','5','6','*','^','1','2','3','-','%','0','.','(',')','+','pi','e','C','⌫','='];let destroyed=false,operationSequence=0;
 for(const value of definitions){const button=document.createElement('button');button.type='button';button.className=value==='='?'arcane-button':'arcane-button arcane-button--secondary';button.textContent=value;button.dataset.value=value;keys.append(button)}
-keys.addEventListener('click',event=>{const value=event.target.closest('[data-value]')?.dataset.value;if(!value)return;if(value==='C'){input.value='';result.textContent='0';status.textContent='';return}if(value==='⌫'){input.value=input.value.slice(0,-1);return}if(value==='='){calculate();return}input.value+=value;input.focus()});input.addEventListener('keydown',event=>{if(event.key==='Enter'){event.preventDefault();calculate()}});
-function calculate(){try{const calculation=engine.calculate(input.value);result.textContent=new Intl.NumberFormat(undefined,{maximumSignificantDigits:14}).format(calculation.result);status.textContent='';host.dispatchEvent(new CustomEvent('calculation-complete',{bubbles:true,composed:true,detail:{calculation}}))}catch(error){status.textContent=error.message;host.dispatchEvent(new CustomEvent('calculation-error',{bubbles:true,composed:true,detail:{error,expression:input.value}}))}}
-host.calculate=calculate;host.ready=true;host.dispatchEvent(new CustomEvent('calculator-ready',{bubbles:true,composed:true}));</script>
+keys.addEventListener('click',event=>{const value=event.target.closest('[data-value]')?.dataset.value;if(!value)return;if(value==='C'){input.value='';result.textContent='0';status.textContent='';return}if(value==='⌫'){input.value=input.value.slice(0,-1);return}if(value==='='){calculate();return}input.value+=value;input.focus()},{signal:lifecycleController.signal});input.addEventListener('keydown',event=>{if(event.key==='Enter'){event.preventDefault();calculate()}},{signal:lifecycleController.signal});
+function nextOperationId(){operationSequence+=1;return `${events.descriptor.instanceId}:calculate:${operationSequence}`}
+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})}
+function calculate(){if(destroyed)return false;const operationId=nextOperationId();try{const calculation=engine.calculate(input.value);result.textContent=new Intl.NumberFormat(undefined,{maximumSignificantDigits:14}).format(calculation.result);status.textContent='';emit('calculation-complete',{calculation},{succeeded:true},operationId)}catch(error){const code=String(error?.code||'ARCANE_CALCULATOR_EXPRESSION_EVALUATION_FAILED'),reason='expression-evaluation-failed';status.textContent=error.message;emit('calculation-error',{error,expression:input.value,code,reason},{code,reason,expressionLength:input.value.length},operationId)}}
+function destroy(){if(destroyed)return false;destroyed=true;lifecycleController.abort('calculator-destroyed');engine.destroy();events.dispose();host.ready=false;return true}
+host.calculate=calculate;host.destroy=destroy;host.ready=true;emit('calculator-ready',{}, {ready:true});</script>

package/runtime/arcane/components/chart.html

@@ -172,6 +172,9 @@
         normalizeChartOptions,
         normalizeChartRows
     }=await import(moduleURL('ComponentContracts.js'));
+    const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
+    const events=createArcaneEventSource(host,{source:'arcane.component.chart',eventTypes:['chart-remove','chart-ready']});
+    const lifecycleController=new AbortController();
     const title=host.shadowRoot.querySelector('#chartTitle');
     const info=host.shadowRoot.querySelector('#chartInfo');
     const plot=host.shadowRoot.querySelector('#plot');
@@ -190,6 +193,8 @@
     let selectedIndex=-1;
     let resizeFrame=0;
     let renderGeneration=0;
+    let operationSequence=0;
+    let destroyed=false;
     let options=normalizeChartOptions(optionsFromDataset());
 
     host.addData=addData;
@@ -203,18 +208,22 @@
         host,
         {
             chartStyle:{
+                configurable:true,
                 get:()=>options.style,
                 set:value=>void configure({style:value})
             },
             chartTitle:{
+                configurable:true,
                 get:()=>options.title,
                 set:value=>void configure({title:value})
             },
             dataSet:{
+                configurable:true,
                 get:()=>rows.map(row=>row.slice()),
                 set:value=>void update(value)
             },
             options:{
+                configurable:true,
                 get:getOptions,
                 set:value=>void configure(value)
             }
@@ -223,21 +232,22 @@
 
     removeButton.addEventListener(
         'click',
-        ()=>host.dispatchEvent(
-            new CustomEvent(
-                'chart-remove',
-                {
-                    bubbles:true,
-                    composed:true,
-                    detail:{key:options.key}
-                }
-            )
-        )
+        ()=>{
+            const operationId=`${events.descriptor.instanceId}:remove:${++operationSequence}`;
+            const publication=events.dispatch('chart-remove',{key:options.key},{operationId,publicDetail:{key:options.key}});
+            projectArcaneDOMEvent(host,publication.occurrence,{bubbles:true,composed:true});
+        },
+        {signal:lifecycleController.signal}
+    );
+    plot.addEventListener(
+        'keydown',
+        navigatePoints,
+        {signal:lifecycleController.signal}
     );
-    plot.addEventListener('keydown',navigatePoints);
     plot.addEventListener(
         'pointerleave',
-        ()=>updateSelectedValue(selectedIndex,'selected')
+        ()=>updateSelectedValue(selectedIndex,'selected'),
+        {signal:lifecycleController.signal}
     );
 
     const resizeObserver=typeof ResizeObserver==='function'
@@ -286,6 +296,9 @@
     }
 
     async function configure(input={}){
+        if(destroyed){
+            return false;
+        }
         const suppliedData=Object.prototype.hasOwnProperty.call(input||{},'data')
             ||Object.prototype.hasOwnProperty.call(input||{},'dataset')
             ||Object.prototype.hasOwnProperty.call(input||{},'datasets');
@@ -302,18 +315,27 @@
     }
 
     async function populate(data=[],input={}){
+        if(destroyed){
+            return [];
+        }
         options=normalizeChartOptions(input,options);
         renderOptions();
         return update(data);
     }
 
     async function update(data=[]){
+        if(destroyed){
+            return [];
+        }
         rows=normalizeChartRows(data,options);
         options={...options,data};
         return renderRows();
     }
 
     async function renderRows(){
+        if(destroyed){
+            return [];
+        }
         const generation=++renderGeneration;
         selectedIndex=rows.length-1;
 
@@ -329,11 +351,20 @@
         plot.classList.remove('hidden');
         chartValue.classList.remove('hidden');
         empty.classList.add('hidden');
-        uPlot=uPlot||await loadChartLibrary();
+        let library;
+        try{
+            library=uPlot||await loadChartLibrary();
+        }catch(error){
+            if(destroyed||generation!==renderGeneration){
+                return host.dataSet;
+            }
+            throw error;
+        }
 
-        if(generation!==renderGeneration){
+        if(destroyed||generation!==renderGeneration){
             return host.dataSet;
         }
+        uPlot=library;
         if(chart){
             chart.setData(toChartData(rows));
             updateSelectedValue(selectedIndex,'latest');
@@ -344,6 +375,9 @@
     }
 
     async function addData(data=[]){
+        if(destroyed){
+            return [];
+        }
         const additions=normalizeChartRows(data,options);
         const merged=new Map(rows.concat(additions).map(row=>[row[0],row]));
         rows=[...merged.values()].sort((left,right)=>left[0]-right[0]);
@@ -633,6 +667,11 @@
     }
 
     function destroy(){
+        if(destroyed){
+            return false;
+        }
+        destroyed=true;
+        lifecycleController.abort();
         renderGeneration++;
         resizeObserver?.disconnect();
         if(!resizeObserver){
@@ -644,12 +683,14 @@
         }
         destroyChart();
         rows=[];
+        events.dispose();
+        host.ready=false;
+        return true;
     }
 
     renderOptions();
     updateSelectedValue(-1);
     host.ready=true;
-    host.dispatchEvent(
-        new CustomEvent('chart-ready',{bubbles:true,composed:true})
-    );
+    const readyPublication=events.dispatch('chart-ready',{}, {publicDetail:{ready:true}});
+    projectArcaneDOMEvent(host,readyPublication.occurrence,{bubbles:true,composed:true});
 </script>