arcane-os 0.2.2 → 0.3.0

package/runtime/arcane/components/integration-settings.html

@@ -4,11 +4,18 @@
 </style>
 <section class="arcane-card"><header class="arcane-card__header heading"><div><h2 id="title" class="arcane-section-heading">Connected services</h2><p id="description" class="arcane-help">Choose the services that appear in this application.</p></div><button id="close" class="arcane-button arcane-button--tertiary" type="button">Close</button></header><div class="arcane-card__body"><p class="notice">Passwords and API secrets are never stored here. Arcane delegates credentials to the local communications bridge or the provider's authorization flow.</p><div id="services" class="services"></div></div><footer class="arcane-card__footer"><p id="message" class="arcane-help" role="status" aria-live="polite"></p><button id="save" class="arcane-button" type="button">Save services</button></footer></section>
 <script type="module">
-const host=this,root=host.shadowRoot,services=root.querySelector('#services'),message=root.querySelector('#message');let descriptors=[],values={};
-host.configure=options=>{descriptors=Array.from(options?.services||[]);values={...(options?.values||{})};root.querySelector('#title').textContent=options?.title||'Connected services';root.querySelector('#description').textContent=options?.description||'Choose the services that appear in this application.';render();return host};host.getValues=()=>read();host.setStatus=value=>message.textContent=String(value||'');
-root.querySelector('#close').addEventListener('click',()=>host.dispatchEvent(new CustomEvent('integration-settings-close',{bubbles:true,composed:true})));root.querySelector('#save').addEventListener('click',()=>host.dispatchEvent(new CustomEvent('integration-settings-save',{bubbles:true,composed:true,detail:{values:read()}})));
-function render(){services.replaceChildren(...descriptors.map(item=>{const section=document.createElement('section');section.className='service';section.dataset.id=item.id;const head=document.createElement('div');head.className='service-head';const enabled=document.createElement('input');enabled.type='checkbox';enabled.name='enabled';enabled.checked=Boolean(values[item.id]?.enabled);enabled.setAttribute('aria-label',`Enable ${item.label}`);const copy=document.createElement('div');copy.className='service-copy';const label=document.createElement('strong');label.textContent=item.label;const description=document.createElement('p');description.textContent=item.description||'';const state=document.createElement('span');state.className='status';state.textContent=values[item.id]?.status||item.defaultStatus||'Disconnected';copy.append(label,description);head.append(enabled,copy,state);section.append(head);const fields=document.createElement('div');fields.className='fields';if(item.acceptsEndpoint){fields.append(field('Bridge URL','endpoint',values[item.id]?.endpoint||item.defaultEndpoint||'http://127.0.0.1:8020'),item.id)}if(item.acceptsAccountLabel!==false)fields.append(field('Account label','accountLabel',values[item.id]?.accountLabel||'',item.id));if(fields.childElementCount)section.append(fields);if(item.actionLabel){const actions=document.createElement('div');actions.className='actions';const action=document.createElement('button');action.type='button';action.className='arcane-button arcane-button--secondary';action.textContent=item.actionLabel;action.addEventListener('click',()=>host.dispatchEvent(new CustomEvent('integration-action',{bubbles:true,composed:true,detail:{service:item,values:read()[item.id]}})));actions.append(action);section.append(actions)}return section}))}
+const host=this,root=host.shadowRoot,services=root.querySelector('#services'),message=root.querySelector('#message');
+const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
+const events=createArcaneEventSource(host,{source:'arcane.component.integration-settings',eventTypes:['integration-settings-close','integration-settings-save','integration-action','integration-settings-ready']});
+const lifecycleController=new AbortController();
+let descriptors=[],values={},destroyed=false,operationSequence=0;
+function nextOperationId(kind){operationSequence+=1;return `${events.descriptor.instanceId}:${kind}:${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})}
+host.configure=options=>{if(destroyed)return false;descriptors=Array.from(options?.services||[]);values={...(options?.values||{})};root.querySelector('#title').textContent=options?.title||'Connected services';root.querySelector('#description').textContent=options?.description||'Choose the services that appear in this application.';render();return host};host.getValues=()=>destroyed?{}:read();host.setStatus=value=>{if(destroyed)return false;message.textContent=String(value||'')};
+root.querySelector('#close').addEventListener('click',()=>emit('integration-settings-close',{}, {},nextOperationId('close')),{signal:lifecycleController.signal});root.querySelector('#save').addEventListener('click',()=>emit('integration-settings-save',{values:read()},{serviceCount:descriptors.length},nextOperationId('save')),{signal:lifecycleController.signal});
+function render(){services.replaceChildren(...descriptors.map(item=>{const section=document.createElement('section');section.className='service';section.dataset.id=item.id;const head=document.createElement('div');head.className='service-head';const enabled=document.createElement('input');enabled.type='checkbox';enabled.name='enabled';enabled.checked=Boolean(values[item.id]?.enabled);enabled.setAttribute('aria-label',`Enable ${item.label}`);const copy=document.createElement('div');copy.className='service-copy';const label=document.createElement('strong');label.textContent=item.label;const description=document.createElement('p');description.textContent=item.description||'';const state=document.createElement('span');state.className='status';state.textContent=values[item.id]?.status||item.defaultStatus||'Disconnected';copy.append(label,description);head.append(enabled,copy,state);section.append(head);const fields=document.createElement('div');fields.className='fields';if(item.acceptsEndpoint){fields.append(field('Bridge URL','endpoint',values[item.id]?.endpoint||item.defaultEndpoint||'http://127.0.0.1:8020'),item.id)}if(item.acceptsAccountLabel!==false)fields.append(field('Account label','accountLabel',values[item.id]?.accountLabel||'',item.id));if(fields.childElementCount)section.append(fields);if(item.actionLabel){const actions=document.createElement('div');actions.className='actions';const action=document.createElement('button');action.type='button';action.className='arcane-button arcane-button--secondary';action.textContent=item.actionLabel;action.addEventListener('click',()=>emit('integration-action',{service:item,values:read()[item.id]},{serviceId:String(item.id)},nextOperationId('service-action')),{signal:lifecycleController.signal});actions.append(action);section.append(actions)}return section}))}
 function field(labelText,name,value,id){const label=document.createElement('label');label.className='arcane-field';const span=document.createElement('span');span.textContent=labelText;const input=document.createElement('input');input.name=name;input.value=value;input.dataset.service=id;input.autocomplete='off';label.append(span,input);return label}
 function read(){return Object.fromEntries(descriptors.map(item=>{const section=services.querySelector(`[data-id="${CSS.escape(item.id)}"]`);return [item.id,{enabled:section.querySelector('[name="enabled"]').checked,endpoint:section.querySelector('[name="endpoint"]')?.value.trim()||'',accountLabel:section.querySelector('[name="accountLabel"]')?.value.trim()||'',status:values[item.id]?.status||item.defaultStatus||'Disconnected'}]}))}
-host.ready=true;host.dispatchEvent(new CustomEvent('integration-settings-ready',{bubbles:true,composed:true}));
+function destroy(){if(destroyed)return false;destroyed=true;lifecycleController.abort();descriptors=[];values={};events.dispose();host.ready=false;return true}
+host.destroy=destroy;host.ready=true;emit('integration-settings-ready',{}, {ready:true});
 </script>

package/runtime/arcane/components/local-ai-status.html

@@ -97,6 +97,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.local-ai-status',eventTypes:['local-ai-retry','local-ai-status-dismissed','local-ai-status-ready']});
+    const lifecycleController=new AbortController();
     const panel=root.querySelector('#panel');
     const title=root.querySelector('#localAIStatusTitle');
     const summary=root.querySelector('#summary');
@@ -118,28 +121,36 @@
     let options={};
     let readyDismissTimer=null;
     let readyForDismiss=false;
+    let operationSequence=0;
+    let destroyed=false;
+
+    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.begin=begin;
     host.configure=configure;
+    host.destroy=destroy;
     host.present=present;
 
     retry.addEventListener('click',function dispatchRetryRequest(){
-        host.dispatchEvent(new CustomEvent('local-ai-retry',{
-            bubbles:true,
-            composed:true
-        }));
-    });
+        emit('local-ai-retry',{}, {},`${events.descriptor.instanceId}:retry:${++operationSequence}`);
+    },{signal:lifecycleController.signal});
     settings.addEventListener('click',function showNativeRecoveryHelp(){
         nativeHelp.hidden=false;
         nativeHelp.focus?.();
-    });
+    },{signal:lifecycleController.signal});
     dismiss.addEventListener('click',function dismissStatusManually(){
         hideStatus('manual');
-    });
-    host.addEventListener('pointerenter',cancelReadyDismiss);
-    host.addEventListener('pointerleave',scheduleReadyDismiss);
-    host.addEventListener('focusin',cancelReadyDismiss);
-    host.addEventListener('focusout',scheduleReadyDismiss);
+    },{signal:lifecycleController.signal});
+    host.addEventListener('pointerenter',cancelReadyDismiss,{signal:lifecycleController.signal});
+    host.addEventListener('pointerleave',scheduleReadyDismiss,{signal:lifecycleController.signal});
+    host.addEventListener('focusin',cancelReadyDismiss,{signal:lifecycleController.signal});
+    host.addEventListener('focusout',scheduleReadyDismiss,{signal:lifecycleController.signal});
 
     function cancelReadyDismiss(){
         if(readyDismissTimer!==null){
@@ -150,7 +161,7 @@
 
     function scheduleReadyDismiss(){
         cancelReadyDismiss();
-        if(!readyForDismiss){
+        if(destroyed||!readyForDismiss){
             return;
         }
         readyDismissTimer=setTimeout(autoDismissReadyStatus,readyDismissDelay);
@@ -158,7 +169,7 @@
 
     function autoDismissReadyStatus(){
         readyDismissTimer=null;
-        if(!readyForDismiss){
+        if(destroyed||!readyForDismiss){
             return;
         }
         if(host.matches(':hover')||root.activeElement){
@@ -171,14 +182,13 @@
         cancelReadyDismiss();
         readyForDismiss=false;
         host.hidden=true;
-        host.dispatchEvent(new CustomEvent('local-ai-status-dismissed',{
-            bubbles:true,
-            composed:true,
-            detail:{reason}
-        }));
+        emit('local-ai-status-dismissed',{reason},{reason:String(reason)},`${events.descriptor.instanceId}:dismiss:${++operationSequence}`);
     }
 
     function configure(input={}){
+        if(destroyed){
+            return false;
+        }
         options={
             profileHref:host.dataset.profileHref||null,
             ...options,
@@ -193,6 +203,9 @@
     }
 
     function begin(requirements={}){
+        if(destroyed){
+            return false;
+        }
         readyForDismiss=false;
         cancelReadyDismiss();
         host.hidden=false;
@@ -207,6 +220,9 @@
     }
 
     function present(report={}){
+        if(destroyed){
+            return false;
+        }
         const runtime=report.runtime||{};
         const results=report.slots||report.results||report;
         const requiredEntries=Object.keys(labels).map(function createRequiredEntry(key){
@@ -353,8 +369,21 @@
         services.replaceChildren(fragment);
     }
 
+    function destroy(){
+        if(destroyed){
+            return false;
+        }
+        destroyed=true;
+        cancelReadyDismiss();
+        readyForDismiss=false;
+        lifecycleController.abort('local-ai-status-destroyed');
+        events.dispose();
+        host.ready=false;
+        return true;
+    }
+
     configure();
     host.hidden=true;
     host.ready=true;
-    host.dispatchEvent(new CustomEvent('local-ai-status-ready',{bubbles:true,composed:true}));
+    emit('local-ai-status-ready',{}, {ready:true});
 </script>

package/runtime/arcane/components/markdown-document.html

@@ -220,6 +220,9 @@
     );
     const moduleURL=name=>new URL(`../modules/${name}`,componentURL).href;
     const {default:MD}=await import(moduleURL('MD.js?v=2'));
+    const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
+    const events=createArcaneEventSource(host,{source:'arcane.component.markdown-document',eventTypes:['markdown-document-state','markdown-document-empty','markdown-document-error','markdown-document-loading','markdown-document-rendered','markdown-document-navigate','markdown-document-ready']});
+    const lifecycleController=new AbortController();
 
     const documentElement=host.shadowRoot.querySelector('#document');
     const statusElement=host.shadowRoot.querySelector('#status');
@@ -436,9 +439,13 @@
     let options=normalizeOptions(optionsFromDataset(),defaultOptions);
     let state='empty';
     let tableOfContents=[];
+    let operationSequence=0;
+    let loadController=null;
+    let destroyed=false;
 
     host.clear=clear;
     host.configure=configure;
+    host.destroy=destroy;
     host.fail=fail;
     host.focus=focusDocument;
     host.focusFragment=focusFragment;
@@ -448,15 +455,15 @@
     Object.defineProperties(
         host,
         {
-            options:{get:getOptions,set:configure},
-            sourceURL:{get:()=>currentSourceURL,set:setSourceURL},
-            state:{get:()=>state},
-            tableOfContents:{get:()=>tableOfContents.map(entry=>({...entry}))},
-            value:{get:()=>currentMarkdown,set:value=>render(value)}
+            options:{configurable:true,get:getOptions,set:configure},
+            sourceURL:{configurable:true,get:()=>currentSourceURL,set:setSourceURL},
+            state:{configurable:true,get:()=>state},
+            tableOfContents:{configurable:true,get:()=>tableOfContents.map(entry=>({...entry}))},
+            value:{configurable:true,get:()=>currentMarkdown,set:value=>render(value)}
         }
     );
 
-    documentElement.addEventListener('click',handleNavigation);
+    documentElement.addEventListener('click',handleNavigation,{signal:lifecycleController.signal});
 
     function optionsFromDataset(){
         const configured={};
@@ -533,15 +540,31 @@
     }
 
     function configure(input={}){
+        if(destroyed){
+            return false;
+        }
         const priorSourceURL=options.sourceURL;
-        options=normalizeOptions(input,options);
+        const normalized=normalizeOptions(input,options);
+        const wasLoading=state==='loading';
+        supersedeLoad('markdown-configuration-replaced');
+        options=normalized;
         renderLabels();
 
         if(!currentMarkdown){
             currentSourceURL=options.sourceURL;
-            updateStateDOM();
+            if(wasLoading){
+                transition(
+                    'empty',
+                    {reason:'markdown-configuration-replaced'},
+                    `${events.descriptor.instanceId}:configure:${++operationSequence}`
+                );
+            }else{
+                updateStateDOM();
+            }
         }else if(priorSourceURL!==options.sourceURL){
             render(currentMarkdown,{sourceURL:options.sourceURL});
+        }else if(wasLoading){
+            render(currentMarkdown,{sourceURL:options.sourceURL});
         }else{
             buildTableOfContents(tableOfContents);
             updateStateDOM();
@@ -573,37 +596,61 @@
     }
 
     function setSourceURL(value=''){
-        options=normalizeOptions({sourceURL:value},options);
+        if(destroyed){
+            return false;
+        }
+        const normalized=normalizeOptions({sourceURL:value},options);
+        const wasLoading=state==='loading';
+        supersedeLoad('markdown-source-replaced');
+        options=normalized;
         if(currentMarkdown){
             render(currentMarkdown,{sourceURL:options.sourceURL});
         }else{
             currentSourceURL=options.sourceURL;
-            updateStateDOM();
+            if(wasLoading){
+                transition(
+                    'empty',
+                    {reason:'markdown-source-replaced'},
+                    `${events.descriptor.instanceId}:source:${++operationSequence}`
+                );
+            }else{
+                updateStateDOM();
+            }
         }
         return currentSourceURL;
     }
 
     async function load(source='',loadOptions={}){
-        const sequence=++loadSequence;
+        if(destroyed){
+            return false;
+        }
+        supersedeLoad('markdown-load-replaced');
+        const controller=new AbortController();
+        loadController=controller;
+        const sequence=loadSequence;
+        const operationId=`${events.descriptor.instanceId}:load:${++operationSequence}`;
         let sourceURL;
         try{
             sourceURL=sourceURLFrom(loadOptions,currentSourceURL||options.sourceURL);
         }catch(error){
             if(sequence===loadSequence){
-                showError(error);
+                showError(error,operationId);
+            }
+            if(loadController===controller){
+                loadController=null;
             }
             return false;
         }
 
         currentSourceURL=sourceURL;
-        transition('loading');
+        transition('loading',{},operationId);
 
         try{
             const pending=typeof source==='function'
-                ?source({sourceURL})
+                ?source({sourceURL,signal:controller.signal,operationId})
                 :source;
             const result=await pending;
-            if(sequence!==loadSequence){
+            if(destroyed||sequence!==loadSequence){
                 return false;
             }
 
@@ -616,32 +663,40 @@
                     result,
                     sourceURL
                 );
-                return renderMarkdown(result.markdown??result.value??'',sourceURL);
+                return renderMarkdown(result.markdown??result.value??'',sourceURL,operationId);
             }
-            return renderMarkdown(result??'',sourceURL);
+            return renderMarkdown(result??'',sourceURL,operationId);
         }catch(error){
-            if(sequence===loadSequence){
-                showError(error);
+            if(!destroyed&&sequence===loadSequence&&!controller.signal.aborted){
+                showError(error,operationId);
             }
             return false;
+        }finally{
+            if(loadController===controller){
+                loadController=null;
+            }
         }
     }
 
     function render(markdown='',renderOptions={}){
-        ++loadSequence;
+        if(destroyed){
+            return false;
+        }
+        supersedeLoad('markdown-content-replaced');
+        const operationId=`${events.descriptor.instanceId}:render:${++operationSequence}`;
         try{
             const sourceURL=sourceURLFrom(
                 renderOptions,
                 currentSourceURL||options.sourceURL
             );
-            return renderMarkdown(markdown,sourceURL);
+            return renderMarkdown(markdown,sourceURL,operationId);
         }catch(error){
-            showError(error);
+            showError(error,operationId);
             return false;
         }
     }
 
-    function renderMarkdown(markdown='',sourceURL=options.sourceURL){
+    function renderMarkdown(markdown='',sourceURL=options.sourceURL,operationId=null){
         if(typeof markdown!=='string'){
             throw new TypeError('Markdown document content must be a string.');
         }
@@ -653,7 +708,7 @@
         tableOfContentsList.replaceChildren();
 
         if(!markdown.trim()){
-            transition('empty');
+            transition('empty',{},operationId);
             return true;
         }
 
@@ -667,7 +722,7 @@
             ||fragment.querySelector('img,hr,table')
         );
         if(!meaningful){
-            transition('empty');
+            transition('empty',{},operationId);
             return true;
         }
 
@@ -680,7 +735,8 @@
             {
                 characters:markdown.length,
                 headings:tableOfContents.map(entry=>({...entry}))
-            }
+            },
+            operationId
         );
         return true;
     }
@@ -875,22 +931,29 @@
     }
 
     function clear(){
-        ++loadSequence;
+        if(destroyed){
+            return false;
+        }
+        supersedeLoad('markdown-content-cleared');
+        const operationId=`${events.descriptor.instanceId}:clear:${++operationSequence}`;
         currentMarkdown='';
         currentSourceURL=options.sourceURL;
         contentElement.replaceChildren();
         tableOfContents=[];
         tableOfContentsList.replaceChildren();
-        transition('empty');
+        transition('empty',{},operationId);
         return true;
     }
 
     function fail(error){
-        ++loadSequence;
-        return showError(error);
+        if(destroyed){
+            return false;
+        }
+        supersedeLoad('markdown-failure-presented');
+        return showError(error,`${events.descriptor.instanceId}:fail:${++operationSequence}`);
     }
 
-    function showError(error){
+    function showError(error,operationId=null){
         currentMarkdown='';
         contentElement.replaceChildren();
         tableOfContents=[];
@@ -898,11 +961,16 @@
         const message=error instanceof Error
             ?error.message
             :String(error||options.labels.error);
-        transition('error',{message:message.slice(0,2048)});
+        const code=String(error?.code||'ARCANE_MARKDOWN_DOCUMENT_RENDER_FAILED');
+        const reason=String(error?.reason||'markdown-document-render-failed');
+        transition('error',{message:message.slice(0,2048),code,reason},operationId);
         return false;
     }
 
-    function transition(nextState,detail={}){
+    function transition(nextState,detail={},operationId=null){
+        if(destroyed){
+            return null;
+        }
         state=nextState;
         updateStateDOM();
 
@@ -913,12 +981,19 @@
                 state
             }
         );
-        host.dispatchEvent(
-            new CustomEvent(
-                'markdown-document-state',
-                {bubbles:true,composed:true,detail:eventDetail}
-            )
-        );
+        const publicDetail={
+            characters:Number(detail.characters||currentMarkdown.length||0),
+            headingCount:Array.isArray(detail.headings)?detail.headings.length:tableOfContents.length,
+            state
+        };
+        if(detail.code){
+            publicDetail.code=String(detail.code);
+        }
+        if(detail.reason){
+            publicDetail.reason=String(detail.reason);
+        }
+        const statePublication=events.dispatch('markdown-document-state',eventDetail,{publicDetail,operationId});
+        projectArcaneDOMEvent(host,statePublication.occurrence,{bubbles:true,composed:true});
 
         const stateEvent={
             empty:'markdown-document-empty',
@@ -927,12 +1002,8 @@
             ready:'markdown-document-rendered'
         }[state];
         if(stateEvent){
-            host.dispatchEvent(
-                new CustomEvent(
-                    stateEvent,
-                    {bubbles:true,composed:true,detail:eventDetail}
-                )
-            );
+            const exactPublication=events.dispatch(stateEvent,eventDetail,{publicDetail,operationId});
+            projectArcaneDOMEvent(host,exactPublication.occurrence,{bubbles:true,composed:true});
         }
         return eventDetail;
     }
@@ -961,6 +1032,9 @@
     }
 
     function focusDocument(){
+        if(destroyed){
+            return false;
+        }
         if(state==='ready'){
             const heading=contentElement.querySelector('h1,h2,h3,h4,h5,h6');
             (heading||contentElement).focus({preventScroll:true});
@@ -971,7 +1045,7 @@
     }
 
     function handleNavigation(event){
-        if(event.defaultPrevented||event.button!==0){
+        if(destroyed||event.defaultPrevented||event.button!==0){
             return;
         }
         const link=event.composedPath().find(
@@ -990,16 +1064,14 @@
                 targetURL:link.dataset.markdownTargetUrl||link.href
             }
         );
-        const navigationEvent=new CustomEvent(
-            'markdown-document-navigate',
-            {
-                bubbles:true,
-                cancelable:true,
-                composed:true,
-                detail
-            }
-        );
-        const continueNavigation=host.dispatchEvent(navigationEvent);
+        operationSequence+=1;
+        const operationId=`${events.descriptor.instanceId}:navigate:${operationSequence}`;
+        const publication=events.dispatch('markdown-document-navigate',detail,{
+            operationId,
+            publicDetail:{kind:detail.kind,hasFragment:Boolean(detail.fragment)},
+            cancelable:true
+        });
+        const continueNavigation=publication.accepted&&projectArcaneDOMEvent(host,publication.occurrence,{bubbles:true,composed:true,cancelable:true});
 
         if(detail.kind==='fragment'||detail.kind==='markdown'){
             event.preventDefault();
@@ -1012,13 +1084,20 @@
         if(detail.kind==='fragment'){
             focusFragment(detail.fragment);
         }else if(detail.kind==='markdown'&&options.onNavigate){
-            Promise.resolve(options.onNavigate(detail)).catch(
-                error=>console.error('Markdown document navigation callback failed.',error)
+            Promise.resolve(options.onNavigate(detail,{signal:lifecycleController.signal,operationId})).catch(
+                error=>{
+                    if(!destroyed){
+                        console.error('Markdown document navigation callback failed.',error);
+                    }
+                }
             );
         }
     }
 
     function focusFragment(fragment=''){
+        if(destroyed){
+            return false;
+        }
         const decoded=markdownDocumentDecodeFragment(fragment);
         const generatedIdentifier=markdownDocumentHeadingBase(decoded);
         const target=Array.from(contentElement.querySelectorAll('[id]')).find(
@@ -1032,17 +1111,31 @@
         return true;
     }
 
+    function supersedeLoad(reason){
+        loadSequence+=1;
+        loadController?.abort(reason);
+        loadController=null;
+    }
+
+    function destroy(){
+        if(destroyed){
+            return false;
+        }
+        destroyed=true;
+        supersedeLoad('markdown-document-destroyed');
+        lifecycleController.abort('markdown-document-destroyed');
+        currentMarkdown='';
+        tableOfContents=[];
+        contentElement.replaceChildren();
+        tableOfContentsList.replaceChildren();
+        events.dispose();
+        host.ready=false;
+        return true;
+    }
+
     renderLabels();
     host.ready=true;
     transition('empty');
-    host.dispatchEvent(
-        new CustomEvent(
-            'markdown-document-ready',
-            {
-                bubbles:true,
-                composed:true,
-                detail:{component:host,state}
-            }
-        )
-    );
+    const readyPublication=events.dispatch('markdown-document-ready',{component:host,state},{publicDetail:{ready:true,state}});
+    projectArcaneDOMEvent(host,readyPublication.occurrence,{bubbles:true,composed:true});
 </script>