arcane-os 0.2.2 → 0.3.0

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

@@ -89,6 +89,9 @@
         applyMarkdownFormat,
         normalizeMarkdownOptions
     }=await import(moduleURL('ComponentContracts.js'));
+    const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
+    const events=createArcaneEventSource(host,{source:'arcane.component.markdown-editor',eventTypes:['markdown-editor-change','markdown-editor-saved','markdown-editor-ready']});
+    const lifecycleController=new AbortController();
     const titleInput=host.shadowRoot.querySelector('#entryTitle');
     const preview=host.shadowRoot.querySelector('#preview');
     const toolbar=host.shadowRoot.querySelector('#toolbar');
@@ -97,29 +100,43 @@
     const status=host.shadowRoot.querySelector('#status');
 
     let previewFrame=0;
+    let operationSequence=0;
+    let saveGeneration=0;
+    let saveController=null;
+    let destroyed=false;
     let options=normalizeMarkdownOptions(optionsFromDataset());
 
+    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.focus=()=>textarea.focus();
+    host.destroy=destroy;
+    host.focus=()=>{if(destroyed)return false;textarea.focus();return true;};
     host.saveEntry=saveEntry;
 
     Object.defineProperties(
         host,
         {
             entryTitle:{
+                configurable:true,
                 get:()=>titleInput.value,
                 set:value=>setTitle(value)
             },
-            options:{get:getOptions,set:configure},
-            value:{get:()=>textarea.value,set:setValue}
+            options:{configurable:true,get:getOptions,set:configure},
+            value:{configurable:true,get:()=>textarea.value,set:setValue}
         }
     );
 
-    textarea.addEventListener('input',contentChanged);
-    titleInput.addEventListener('input',contentChanged);
-    toolbar.addEventListener('click',formatMarkdown);
-    saveButton.addEventListener('click',saveEntry);
+    textarea.addEventListener('input',contentChanged,{signal:lifecycleController.signal});
+    titleInput.addEventListener('input',contentChanged,{signal:lifecycleController.signal});
+    toolbar.addEventListener('click',formatMarkdown,{signal:lifecycleController.signal});
+    saveButton.addEventListener('click',saveEntry,{signal:lifecycleController.signal});
 
     function optionsFromDataset(){
         const dataset=host.dataset||{};
@@ -152,6 +169,9 @@
     }
 
     function configure(input={}){
+        if(destroyed){
+            return false;
+        }
         const setInitialValue=Object.prototype.hasOwnProperty.call(
             input||{},
             'initialValue'
@@ -163,9 +183,11 @@
         options=normalizeMarkdownOptions(input,options);
         renderOptions();
         if(setInitialTitle){
+            supersedeSave('markdown-title-replaced');
             titleInput.value=options.initialTitle;
         }
         if(setInitialValue){
+            supersedeSave('markdown-content-replaced');
             textarea.value=options.initialValue;
         }
         updatePreview();
@@ -204,17 +226,16 @@
     }
 
     function contentChanged(){
+        if(destroyed){
+            return;
+        }
+        supersedeSave('markdown-content-edited');
         schedulePreview();
         const detail={
             markdown:textarea.value,
             title:titleInput.value
         };
-        host.dispatchEvent(
-            new CustomEvent(
-                'markdown-editor-change',
-                {bubbles:true,composed:true,detail}
-            )
-        );
+        emit('markdown-editor-change',detail,{markdownLength:detail.markdown.length,titleLength:detail.title.length});
         if(options.onChange){
             Promise.resolve(options.onChange(detail)).catch(
                 error=>console.error('Markdown change callback failed:',error)
@@ -223,6 +244,9 @@
     }
 
     function schedulePreview(){
+        if(destroyed){
+            return;
+        }
         if(previewFrame){
             cancelAnimationFrame(previewFrame);
         }
@@ -230,6 +254,9 @@
     }
 
     function updatePreview(){
+        if(destroyed){
+            return;
+        }
         if(previewFrame){
             cancelAnimationFrame(previewFrame);
         }
@@ -268,7 +295,7 @@
     }
 
     async function saveEntry(){
-        if(options.readOnly||!options.showSave){
+        if(destroyed||options.readOnly||!options.showSave){
             return false;
         }
         const markdown=textarea.value;
@@ -287,35 +314,52 @@
             return false;
         }
 
+        saveController?.abort('markdown-save-replaced');
+        const controller=new AbortController();
+        saveController=controller;
+        const generation=++saveGeneration;
+        const operationId=`${events.descriptor.instanceId}:save:${++operationSequence}`;
         saveButton.disabled=true;
         status.innerText=options.labels.saving;
         try{
-            await save({title:entryTitle,markdown});
+            await save({title:entryTitle,markdown},{signal:controller.signal,operationId});
+            if(destroyed||generation!==saveGeneration){
+                return false;
+            }
             if(options.clearOnSave){
-                clear();
+                resetEditor(false);
             }
             status.innerText=options.labels.saved;
-            host.dispatchEvent(
-                new CustomEvent(
-                    'markdown-editor-saved',
-                    {
-                        bubbles:true,
-                        composed:true,
-                        detail:{title:entryTitle,markdown}
-                    }
-                )
-            );
+            emit('markdown-editor-saved',{title:entryTitle,markdown},{markdownLength:markdown.length,titleLength:entryTitle.length},operationId);
             return true;
         }catch(error){
+            if(destroyed||generation!==saveGeneration||controller.signal.aborted){
+                return false;
+            }
             status.innerText=options.labels.saveError;
             console.error('Unable to save Markdown content:',error);
             return false;
         }finally{
-            syncSaveButton();
+            if(saveController===controller){
+                saveController=null;
+            }
+            if(!destroyed&&generation===saveGeneration){
+                syncSaveButton();
+            }
         }
     }
 
     function clear(){
+        return resetEditor(true);
+    }
+
+    function resetEditor(supersede){
+        if(destroyed){
+            return false;
+        }
+        if(supersede){
+            supersedeSave('markdown-content-cleared');
+        }
         titleInput.value='';
         textarea.value='';
         updatePreview();
@@ -323,12 +367,20 @@
     }
 
     function setValue(value=''){
+        if(destroyed){
+            return false;
+        }
+        supersedeSave('markdown-content-replaced');
         textarea.value=`${value??''}`;
         updatePreview();
         return textarea.value;
     }
 
     function setTitle(value=''){
+        if(destroyed){
+            return false;
+        }
+        supersedeSave('markdown-title-replaced');
         titleInput.value=`${value??''}`;
         return titleInput.value;
     }
@@ -345,16 +397,41 @@
         };
     }
 
+    function supersedeSave(reason){
+        const active=saveController!==null;
+        saveGeneration+=1;
+        saveController?.abort(reason);
+        saveController=null;
+        if(!destroyed){
+            if(active){
+                status.innerText='';
+            }
+            syncSaveButton();
+        }
+    }
+
+    function destroy(){
+        if(destroyed){
+            return false;
+        }
+        destroyed=true;
+        supersedeSave('markdown-editor-destroyed');
+        lifecycleController.abort('markdown-editor-destroyed');
+        if(previewFrame){
+            cancelAnimationFrame(previewFrame);
+            previewFrame=0;
+        }
+        preview.replaceChildren();
+        events.dispose();
+        host.ready=false;
+        return true;
+    }
+
     renderOptions();
     titleInput.value=options.initialTitle;
     textarea.value=options.initialValue;
     updatePreview();
     status.innerText='';
     host.ready=true;
-    host.dispatchEvent(
-        new CustomEvent(
-            'markdown-editor-ready',
-            {bubbles:true,composed:true}
-        )
-    );
+    emit('markdown-editor-ready',{}, {ready:true});
 </script>

package/runtime/arcane/components/media-embed.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}.player-shell{display:grid;gap:var(--arcane-space-4)}.loader{display:flex;gap:var(--arcane-space-2)}.loader input{min-width:0;width:100%}.player{aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;background:var(--arcane-surface-muted);border:1px solid var(--arcane-border);border-radius:var(--arcane-radius-large)}iframe{width:100%;height:100%;border:0}.empty{text-align:center;color:var(--arcane-muted);padding:var(--arcane-space-5)}.footer{align-items:center;display:flex;gap:var(--arcane-space-3);justify-content:space-between}.status{margin:0;color:var(--arcane-muted)}@media(max-width:36rem){.loader,.footer{align-items:stretch;flex-direction:column}}</style>
 <section class="player-shell"><form id="loader" class="loader"><label class="visually-hidden" for="mediaUrl">Video or playlist address</label><input id="mediaUrl" type="text" inputmode="url" autocomplete="off" spellcheck="false" placeholder="Paste a YouTube video or playlist URL"><button class="arcane-button" type="submit">Play</button></form><div class="player"><div id="empty" class="empty"><strong>Choose something to play</strong><p>Paste a YouTube or YouTube Music video or playlist address.</p></div><iframe id="frame" title="Embedded media player" hidden allow="autoplay; encrypted-media; picture-in-picture; fullscreen" allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe></div><div class="footer"><p id="status" class="status" role="status" aria-live="polite">Nothing loaded.</p><button id="platform" class="arcane-button arcane-button--secondary" type="button">Open platform</button></div></section>
-<script type="module">const host=this,root=host.shadowRoot,form=root.querySelector('#loader'),input=root.querySelector('#mediaUrl'),frame=root.querySelector('#frame'),empty=root.querySelector('#empty'),status=root.querySelector('#status');const componentURL=new URL(host.getAttribute('href')||'./arcane/components/media-embed.html',document.baseURI);const {parseYouTubeMedia,youtubeEmbedUrl}=await import(new URL('../modules/YouTubeMedia.js',componentURL));let platformUrl='https://www.youtube.com/',privacyEnhanced=true;
-host.configure=options=>{platformUrl=String(options?.platformUrl||platformUrl);privacyEnhanced=options?.privacyEnhanced!==false;if(options?.placeholder)input.placeholder=String(options.placeholder);if(options?.openLabel)root.querySelector('#platform').textContent=String(options.openLabel);if(options?.initialValue){input.value=String(options.initialValue);load(input.value)}return host};host.load=load;
-form.addEventListener('submit',event=>{event.preventDefault();load(input.value)});root.querySelector('#platform').addEventListener('click',()=>host.dispatchEvent(new CustomEvent('media-open-platform',{bubbles:true,composed:true,detail:{url:platformUrl}})));
-function load(value){try{const locator=parseYouTubeMedia(value),url=youtubeEmbedUrl(locator,{privacyEnhanced});frame.src=url;frame.hidden=false;empty.hidden=true;status.textContent=locator.type==='playlist'?'Playlist loaded.':'Video loaded.';host.dispatchEvent(new CustomEvent('media-load',{bubbles:true,composed:true,detail:{locator,url}}));return locator}catch(error){status.textContent=error.message;frame.hidden=true;empty.hidden=false;host.dispatchEvent(new CustomEvent('media-error',{bubbles:true,composed:true,detail:{error}}));return null}}
-host.ready=true;host.dispatchEvent(new CustomEvent('media-embed-ready',{bubbles:true,composed:true}));</script>
+<script type="module">const host=this,root=host.shadowRoot,form=root.querySelector('#loader'),input=root.querySelector('#mediaUrl'),frame=root.querySelector('#frame'),empty=root.querySelector('#empty'),status=root.querySelector('#status');const componentURL=new URL(host.getAttribute('href')||'./arcane/components/media-embed.html',document.baseURI);const {parseYouTubeMedia,youtubeEmbedUrl}=await import(new URL('../modules/YouTubeMedia.js',componentURL));const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');const events=createArcaneEventSource(host,{source:'arcane.component.media-embed',eventTypes:['media-open-platform','media-load','media-error','media-embed-ready']}),lifecycleController=new AbortController();let platformUrl='https://www.youtube.com/',privacyEnhanced=true,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;platformUrl=String(options?.platformUrl||platformUrl);privacyEnhanced=options?.privacyEnhanced!==false;if(options?.placeholder)input.placeholder=String(options.placeholder);if(options?.openLabel)root.querySelector('#platform').textContent=String(options.openLabel);if(options?.initialValue){input.value=String(options.initialValue);load(input.value)}return host};host.load=load;host.destroy=destroy;
+form.addEventListener('submit',event=>{event.preventDefault();load(input.value)},{signal:lifecycleController.signal});root.querySelector('#platform').addEventListener('click',()=>emit('media-open-platform',{url:platformUrl},{destination:'platform'},nextOperationId('open-platform')),{signal:lifecycleController.signal});
+function load(value){if(destroyed)return null;const operationId=nextOperationId('load');try{const locator=parseYouTubeMedia(value),url=youtubeEmbedUrl(locator,{privacyEnhanced});frame.src=url;frame.hidden=false;empty.hidden=true;status.textContent=locator.type==='playlist'?'Playlist loaded.':'Video loaded.';emit('media-load',{locator,url},{mediaType:String(locator.type||'video')},operationId);return locator}catch(error){const code=String(error?.code||'ARCANE_MEDIA_EMBED_SOURCE_INVALID'),reason='media-source-invalid';status.textContent=error.message;frame.hidden=true;empty.hidden=false;emit('media-error',{error,code,reason},{code,reason},operationId);return null}}
+function destroy(){if(destroyed)return false;destroyed=true;lifecycleController.abort('media-embed-destroyed');frame.src='about:blank';frame.removeAttribute('src');frame.hidden=true;events.dispose();host.ready=false;return true}
+host.ready=true;emit('media-embed-ready',{}, {ready:true});</script>

package/runtime/arcane/components/modal.html

@@ -158,6 +158,8 @@
 <script type="module">
     const host=this;
     const shadowRoot=host.shadowRoot;
+    const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
+    const events=createArcaneEventSource(host,{source:'arcane.component.modal',eventTypes:['modal-action','modal-opened','modal-closed','modal-ready']});
     const dialog=shadowRoot.querySelector('#modal');
     const modalContent=shadowRoot.querySelector('#modal-content');
     const modalSearch=shadowRoot.querySelector('#modal-search');
@@ -175,8 +177,14 @@
     host.populate=populate;
     host.open=open;
     host.close=close;
+    host.destroy=dispose;
     host.runTasks=runTasks;
 
+    function emit(type,detail={},publicDetail={}){
+        const publication=events.dispatch(type,detail,{publicDetail});
+        return projectArcaneDOMEvent(host,publication.occurrence);
+    }
+
     Object.defineProperties(host,{
         running:{get:function getRunningState(){return running;}},
         opened:{get:function getOpenedState(){return dialog.open;}}
@@ -220,7 +228,7 @@
         const detail={...action.dataset};
         detail.action=detail.modalAction;
         delete detail.modalAction;
-        host.dispatchEvent(new CustomEvent('modal-action',{detail}));
+        emit('modal-action',detail,{action:String(detail.action||'')});
     });
 
     async function open(){
@@ -244,7 +252,7 @@
                 const focusTarget=modalContent.querySelector('[autofocus],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),button:not([disabled]),a[href]')||closeButton;
                 focusTarget?.focus({preventScroll:true});
             });
-            host.dispatchEvent(new CustomEvent('modal-opened'));
+            emit('modal-opened',{}, {opened:true});
         }
         return true;
     }
@@ -269,7 +277,7 @@
         }
 
         if(wasOpen){
-            host.dispatchEvent(new CustomEvent('modal-closed'));
+            emit('modal-closed',{}, {opened:false});
             const target=returnFocus;
             returnFocus=null;
             queueMicrotask(function restoreModalReturnFocus(){
@@ -287,7 +295,7 @@
 
     function dispose(){
         if(disposed){
-            return;
+            return false;
         }
         disposed=true;
         host.ready=false;
@@ -298,7 +306,9 @@
         if(dialog.open){
             dialog.close();
         }
+        events.dispose();
         host.remove();
+        return true;
     }
 
     async function populate(content='<p>Content goes here</p>',search=false){
@@ -398,5 +408,5 @@
     }
 
     host.ready=true;
-    host.dispatchEvent(new CustomEvent('modal-ready'));
+    emit('modal-ready',{}, {ready:true});
 </script>

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

@@ -43,6 +43,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.output-panel',eventTypes:['output-panel-action','output-panel-state','output-panel-error','output-panel-change','output-panel-cleared','output-panel-ready']});
     const region=root.querySelector('#region');
     const title=root.querySelector('#outputTitle');
     const status=root.querySelector('#status');
@@ -55,11 +57,13 @@
     const footerActions=root.querySelector('#footerActions');
 
     let actions=[];
+    let destroyed=false;
     let output=null;
     let options={};
 
     host.clear=clear;
     host.configure=configure;
+    host.destroy=destroy;
     host.setActions=setActions;
     host.setBody=setBody;
     host.setCoverage=setCoverage;
@@ -77,6 +81,13 @@
     footerActions.addEventListener('click',handleAction);
     bodySlot.addEventListener('slotchange',syncBodySlot);
 
+    function emit(type,detail={},publicDetail={},cancelable=false){
+        if(destroyed)return false;
+        const publication=events.dispatch(type,detail,{publicDetail,cancelable});
+        if(cancelable&&!publication.accepted) return false;
+        return projectArcaneDOMEvent(host,publication.occurrence,{bubbles:true,composed:true,cancelable});
+    }
+
     function datasetOptions(){
         return {
             ariaLabel:host.dataset.ariaLabel||'Output',
@@ -183,12 +194,7 @@
         if(!button||!action||action.disabled){
             return;
         }
-        host.dispatchEvent(new CustomEvent('output-panel-action',{
-            bubbles:true,
-            cancelable:true,
-            composed:true,
-            detail:{action:{...action},id:action.id,output:output?{...output}:null}
-        }));
+        emit('output-panel-action',{action:{...action},id:action.id,output:output?{...output}:null},{actionId:action.id,hasOutput:Boolean(output)},true);
     }
 
     function setPending(value=true,message='Working…'){
@@ -197,11 +203,7 @@
         if(pending){
             renderState(message,'loading');
         }
-        host.dispatchEvent(new CustomEvent('output-panel-state',{
-            bubbles:true,
-            composed:true,
-            detail:{pending,state:pending?'loading':'ready'}
-        }));
+        emit('output-panel-state',{pending,state:pending?'loading':'ready'},{pending,state:pending?'loading':'ready'});
         return pending;
     }
 
@@ -210,11 +212,7 @@
         body.setAttribute('aria-busy','false');
         if(text){
             renderState(text,'error');
-            host.dispatchEvent(new CustomEvent('output-panel-error',{
-                bubbles:true,
-                composed:true,
-                detail:{message:text,output:output?{...output}:null}
-            }));
+            emit('output-panel-error',{message:text,output:output?{...output}:null},{hasOutput:Boolean(output),hasError:true});
         }
         return text;
     }
@@ -231,11 +229,7 @@
     }
 
     function emitChange(){
-        host.dispatchEvent(new CustomEvent('output-panel-change',{
-            bubbles:true,
-            composed:true,
-            detail:{output:output?{...output}:null}
-        }));
+        emit('output-panel-change',{output:output?{...output}:null},{hasOutput:Boolean(output)});
     }
 
     function clear(){
@@ -247,7 +241,18 @@
         setActions([]);
         renderState(options.emptyLabel||'No output yet.','empty');
         body.setAttribute('aria-busy','false');
-        host.dispatchEvent(new CustomEvent('output-panel-cleared',{bubbles:true,composed:true}));
+        emit('output-panel-cleared');
+        return true;
+    }
+
+    function destroy(){
+        if(destroyed)return false;
+        destroyed=true;
+        host.ready=false;
+        headerActions.removeEventListener('click',handleAction);
+        footerActions.removeEventListener('click',handleAction);
+        bodySlot.removeEventListener('slotchange',syncBodySlot);
+        events.dispose();
         return true;
     }
 
@@ -255,5 +260,5 @@
     clear();
     syncBodySlot();
     host.ready=true;
-    host.dispatchEvent(new CustomEvent('output-panel-ready',{bubbles:true,composed:true}));
+    emit('output-panel-ready',{}, {ready:true});
 </script>

package/runtime/arcane/components/preferences-form.html

@@ -38,9 +38,19 @@
     const status=root.querySelector('#status');
     const reset=root.querySelector('#reset');
     const save=root.querySelector('#save');
+    const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
+    const events=createArcaneEventSource(host,{source:'arcane.component.preferences-form',eventTypes:['preferences-submit','preferences-change','preferences-reset','preferences-form-ready']});
+    let destroyed=false;
     let schema=[];
 
+    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.configure=configure;
+    host.destroy=destroy;
     host.getValues=getValues;
     host.setValues=setValues;
     host.setBusy=setBusy;
@@ -48,14 +58,14 @@
 
     form.addEventListener('submit',event=>{
         event.preventDefault();
-        host.dispatchEvent(new CustomEvent('preferences-submit',{bubbles:true,composed:true,detail:{values:getValues()}}));
+        emit('preferences-submit',{values:getValues()},{fieldCount:schema.length});
     });
     form.addEventListener('input',event=>{
         const field=schema.find(item=>item.key===event.target.name);
         if(!field) return;
-        host.dispatchEvent(new CustomEvent('preferences-change',{bubbles:true,composed:true,detail:{key:field.key,value:readControl(event.target,field),values:getValues()}}));
+        emit('preferences-change',{key:field.key,value:readControl(event.target,field),values:getValues()},{key:String(field.key),fieldType:String(field.type||'text')});
     });
-    reset.addEventListener('click',()=>host.dispatchEvent(new CustomEvent('preferences-reset',{bubbles:true,composed:true})));
+    reset.addEventListener('click',()=>emit('preferences-reset'));
 
     function configure(options={}){
         schema=Array.from(options.schema||[]).map(item=>typeof item.toJSON==='function'?item.toJSON():{...item});
@@ -130,6 +140,14 @@
     }
     function setStatus(message=''){status.innerText=String(message||'');return status.innerText;}
 
+    function destroy(){
+        if(destroyed)return false;
+        destroyed=true;
+        host.ready=false;
+        events.dispose();
+        return true;
+    }
+
     host.ready=true;
-    host.dispatchEvent(new CustomEvent('preferences-form-ready',{bubbles:true,composed:true}));
+    emit('preferences-form-ready',{}, {ready:true});
 </script>

package/runtime/arcane/components/record-timeline.html

@@ -28,18 +28,24 @@
   const host=this;
   const list=host.shadowRoot.querySelector('[data-list]');
   const empty=host.shadowRoot.querySelector('[data-empty]');
+  const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
+  const events=createArcaneEventSource(host,{source:'arcane.component.record-timeline',eventTypes:['record-timeline-open','record-timeline-ready']});
+  let destroyed=false;
   let items=[];
   let options={emptyLabel:'No dated events match this view.'};
 
   host.setItems=setItems;
   host.populate=(value,input={})=>setItems(value,input);
+  host.destroy=destroy;
 
   list.addEventListener('click',event=>{
+    if(destroyed) return;
     const trigger=event.target.closest('[data-event-id]');
     if(!trigger) return;
     const item=items.find(candidate=>candidate.id===trigger.dataset.eventId);
     if(!item) return;
-    host.dispatchEvent(new CustomEvent('record-timeline-open',{bubbles:true,composed:true,detail:{id:item.id,item:{...item}}}));
+    const publication=events.dispatch('record-timeline-open',{id:item.id,item:{...item}},{publicDetail:{category:String(item.category||'')}});
+    projectArcaneDOMEvent(host,publication.occurrence,{bubbles:true,composed:true});
   });
 
   function normalizeItem(item,index){
@@ -101,5 +107,15 @@
     }
   }
 
-  host.dispatchEvent(new CustomEvent('record-timeline-ready',{bubbles:true,composed:true}));
+  function destroy(){
+    if(destroyed) return false;
+    destroyed=true;
+    host.ready=false;
+    events.dispose();
+    return true;
+  }
+
+  host.ready=true;
+  const readyPublication=events.dispatch('record-timeline-ready',{}, {publicDetail:{ready:true}});
+  projectArcaneDOMEvent(host,readyPublication.occurrence,{bubbles:true,composed:true});
 </script>

package/runtime/arcane/components/relationship-board.html

@@ -34,23 +34,33 @@
   const selectedTitle=host.shadowRoot.querySelector('[data-selected-title]');
   const selectedSummary=host.shadowRoot.querySelector('[data-selected-summary]');
   const edgeList=host.shadowRoot.querySelector('[data-edges]');
+  const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
+  const events=createArcaneEventSource(host,{source:'arcane.component.relationship-board',eventTypes:['relationship-node-open','relationship-edge-open','relationship-board-ready']});
+  let destroyed=false;
   let nodes=[]; let edges=[]; let lanes=[]; let selectedId='';
 
   host.setGraph=setGraph;
   host.populate=(graph={},options={})=>setGraph(graph,options);
+  host.destroy=destroy;
 
   board.addEventListener('click',event=>{
+    if(destroyed) return;
     const trigger=event.target.closest('[data-node-id]');
     if(!trigger) return;
     selectedId=trigger.dataset.nodeId; renderSelection();
     const node=nodes.find(item=>item.id===selectedId);
-    host.dispatchEvent(new CustomEvent('relationship-node-open',{bubbles:true,composed:true,detail:{id:selectedId,node:{...node}}}));
+    const publication=events.dispatch('relationship-node-open',{id:selectedId,node:{...node}},{publicDetail:{lane:String(node?.lane||'')}});
+    projectArcaneDOMEvent(host,publication.occurrence,{bubbles:true,composed:true});
   });
   edgeList.addEventListener('click',event=>{
+    if(destroyed) return;
     const trigger=event.target.closest('[data-edge-id]');
     if(!trigger) return;
     const edge=edges.find(item=>item.id===trigger.dataset.edgeId);
-    if(edge) host.dispatchEvent(new CustomEvent('relationship-edge-open',{bubbles:true,composed:true,detail:{id:edge.id,edge:{...edge}}}));
+    if(edge){
+      const publication=events.dispatch('relationship-edge-open',{id:edge.id,edge:{...edge}},{publicDetail:{hasEdge:true}});
+      projectArcaneDOMEvent(host,publication.occurrence,{bubbles:true,composed:true});
+    }
   });
 
   function normalizeNode(value,index){
@@ -112,5 +122,15 @@
     if(!related.length){const row=document.createElement('li'); row.className='empty'; row.textContent='No displayed connections.'; edgeList.append(row);}
   }
 
-  host.dispatchEvent(new CustomEvent('relationship-board-ready',{bubbles:true,composed:true}));
+  function destroy(){
+    if(destroyed) return false;
+    destroyed=true;
+    host.ready=false;
+    events.dispose();
+    return true;
+  }
+
+  host.ready=true;
+  const readyPublication=events.dispatch('relationship-board-ready',{}, {publicDetail:{ready:true}});
+  projectArcaneDOMEvent(host,readyPublication.occurrence,{bubbles:true,composed:true});
 </script>