arcane-os 0.2.2 → 0.3.0

package/runtime/arcane/components/weather-widget.html

@@ -1,8 +1,10 @@
 <link rel="stylesheet" href="./arcane/css/theme.css?v=1"><link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
 <style>:host{display:block}.widget{display:grid;gap:var(--arcane-space-4)}.current{align-items:center;display:grid;gap:var(--arcane-space-4);grid-template-columns:auto 1fr auto}.symbol{font-size:clamp(2.5rem,8vw,5rem);line-height:1}.temperature{font-size:clamp(2.2rem,7vw,4.5rem);font-weight:760;line-height:1}.location h2,.location p{margin:0}.location p,.details{color:var(--arcane-muted)}.details{display:grid;gap:var(--arcane-space-1);text-align:right}.forecast{display:grid;gap:var(--arcane-space-2);grid-template-columns:repeat(7,minmax(5.5rem,1fr));overflow:auto}.day{display:grid;gap:var(--arcane-space-2);padding:var(--arcane-space-3);text-align:center;background:var(--arcane-surface-muted);border:1px solid var(--arcane-border);border-radius:var(--arcane-radius-medium)}.day strong{white-space:nowrap}.day-symbol{font-size:1.8rem}.empty{padding:var(--arcane-space-6);text-align:center;color:var(--arcane-muted)}.footer{display:flex;align-items:center;justify-content:space-between;gap:var(--arcane-space-3)}@media(max-width:36rem){.current{grid-template-columns:auto 1fr}.details{grid-column:1/-1;text-align:left;grid-template-columns:repeat(3,1fr)}}</style>
 <section class="widget arcane-card"><div id="empty" class="empty"><strong>Weather is ready for a location</strong><p>Search for a city or postal code to load current conditions and the forecast.</p></div><div id="content" hidden><div class="arcane-card__body current"><span id="symbol" class="symbol" aria-hidden="true"></span><div class="location"><h2 id="location" class="arcane-section-heading"></h2><p id="condition"></p><div><span id="temperature" class="temperature"></span></div></div><div class="details"><span id="feels"></span><span id="humidity"></span><span id="wind"></span></div></div><div id="forecast" class="arcane-card__body forecast"></div><footer class="arcane-card__footer footer"><span id="source" class="arcane-help"></span><button id="refresh" class="arcane-button arcane-button--secondary" type="button">Refresh</button></footer></div></section>
-<script type="module">const host=this,root=host.shadowRoot,empty=root.querySelector('#empty'),content=root.querySelector('#content'),forecast=root.querySelector('#forecast');let weather=null;const conditions=new Map([[0,['Clear','☀️']],[1,['Mostly clear','🌤️']],[2,['Partly cloudy','⛅']],[3,['Overcast','☁️']],[45,['Fog','🌫️']],[48,['Freezing fog','🌫️']],[51,['Light drizzle','🌦️']],[53,['Drizzle','🌦️']],[55,['Heavy drizzle','🌧️']],[61,['Light rain','🌦️']],[63,['Rain','🌧️']],[65,['Heavy rain','🌧️']],[71,['Light snow','🌨️']],[73,['Snow','🌨️']],[75,['Heavy snow','❄️']],[80,['Rain showers','🌦️']],[81,['Rain showers','🌧️']],[82,['Heavy showers','⛈️']],[95,['Thunderstorm','⛈️']],[96,['Thunderstorm with hail','⛈️']],[99,['Severe thunderstorm','⛈️']]]);
-host.setWeather=setWeather;host.clear=()=>{weather=null;empty.hidden=false;content.hidden=true};root.querySelector('#refresh').addEventListener('click',()=>host.dispatchEvent(new CustomEvent('weather-refresh',{bubbles:true,composed:true,detail:{weather}})));
+<script type="module">const host=this,root=host.shadowRoot,empty=root.querySelector('#empty'),content=root.querySelector('#content'),forecast=root.querySelector('#forecast');const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');const events=createArcaneEventSource(host,{source:'arcane.component.weather-widget',eventTypes:['weather-refresh','weather-widget-ready']});let weather=null,destroyed=false;const conditions=new Map([[0,['Clear','☀️']],[1,['Mostly clear','🌤️']],[2,['Partly cloudy','⛅']],[3,['Overcast','☁️']],[45,['Fog','🌫️']],[48,['Freezing fog','🌫️']],[51,['Light drizzle','🌦️']],[53,['Drizzle','🌦️']],[55,['Heavy drizzle','🌧️']],[61,['Light rain','🌦️']],[63,['Rain','🌧️']],[65,['Heavy rain','🌧️']],[71,['Light snow','🌨️']],[73,['Snow','🌨️']],[75,['Heavy snow','❄️']],[80,['Rain showers','🌦️']],[81,['Rain showers','🌧️']],[82,['Heavy showers','⛈️']],[95,['Thunderstorm','⛈️']],[96,['Thunderstorm with hail','⛈️']],[99,['Severe thunderstorm','⛈️']]]);
+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.setWeather=setWeather;host.clear=()=>{weather=null;empty.hidden=false;content.hidden=true};root.querySelector('#refresh').addEventListener('click',()=>emit('weather-refresh',{weather},{hasWeather:Boolean(weather)}));
 function info(code,isDay=true){const value=conditions.get(Number(code))||['Conditions unavailable','🌡️'];if(!isDay&&Number(code)<=1)return ['Clear night','🌙'];return value}
 function setWeather(value){weather=value;if(!value)return host.clear();empty.hidden=true;content.hidden=false;const current=value.current,[label,symbol]=info(current.weatherCode,current.isDay);root.querySelector('#symbol').textContent=symbol;root.querySelector('#location').textContent=[value.location.name,value.location.region,value.location.country].filter(Boolean).join(', ');root.querySelector('#condition').textContent=label;root.querySelector('#temperature').textContent=`${Math.round(current.temperature)}${current.temperatureUnit}`;root.querySelector('#feels').textContent=`Feels ${Math.round(current.apparentTemperature)}${current.temperatureUnit}`;root.querySelector('#humidity').textContent=`Humidity ${Math.round(current.humidity)}%`;root.querySelector('#wind').textContent=`Wind ${Math.round(current.windSpeed)} ${current.windUnit}`;root.querySelector('#source').textContent=`${value.source||'Weather source'} · updated ${new Intl.DateTimeFormat(undefined,{timeStyle:'short'}).format(new Date(value.fetchedAt))}`;forecast.replaceChildren(...Array.from(value.daily||[]).map(day=>{const section=document.createElement('section'),name=document.createElement('strong'),icon=document.createElement('span'),temperatures=document.createElement('span'),rain=document.createElement('span');section.className='day';name.textContent=new Intl.DateTimeFormat(undefined,{weekday:'short'}).format(new Date(day.date));icon.className='day-symbol';icon.textContent=info(day.weatherCode)[1];temperatures.textContent=`${Math.round(day.temperatureMax)}° / ${Math.round(day.temperatureMin)}°`;rain.textContent=`${Math.round(day.precipitationProbability)}% rain`;section.append(name,icon,temperatures,rain);return section}));return weather}
-host.ready=true;host.dispatchEvent(new CustomEvent('weather-widget-ready',{bubbles:true,composed:true}));</script>
+host.ready=true;emit('weather-widget-ready',{}, {ready:true});</script>

package/runtime/arcane/components/web-navigator.html

@@ -61,6 +61,8 @@ button{min-width:2.5rem}
 <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.web-navigator',eventTypes:['web-navigation-blocked','web-navigate','web-open-external','web-navigator-ready']});
 const address=root.querySelector('#address');
 const frame=root.querySelector('#frame');
 const blocked=root.querySelector('#blocked');
@@ -72,6 +74,20 @@ let history=[];
 let position=-1;
 let navigationGuard=null;
 let navigationSequence=0;
+let eventOperationSequence=0;
+let destroyed=false;
+
+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,{bubbles:true,composed:true});
+}
 
 function normalize(value){
     let text=String(value||'').trim();
@@ -143,7 +159,7 @@ function showBlocked(url,decision){
     root.querySelector('#blockedEvidence').textContent=[decision.ruleId&&`Rule ${decision.ruleId}`,decision.policyGeneration&&`Policy generation ${decision.policyGeneration}`,decision.decisionId&&`Decision ${decision.decisionId}`,decision.decidedAt].filter(Boolean).join(' · ');
     status.textContent='Blocked by the Arcane global deny policy.';
     blocked.focus();
-    host.dispatchEvent(new CustomEvent('web-navigation-blocked',{bubbles:true,composed:true,detail:{url,decision}}));
+    emit('web-navigation-blocked',{url,decision},{blocked:true,ruleId:String(decision.ruleId||''),policyGeneration:decision.policyGeneration??null});
 }
 
 function showFrame(url){
@@ -151,17 +167,18 @@ function showFrame(url){
     frame.hidden=false;
     frame.src=url;
     status.textContent='Loading…';
-    host.dispatchEvent(new CustomEvent('web-navigate',{bubbles:true,composed:true,detail:{url}}));
+    emit('web-navigate',{url},{intent:'embedded'});
 }
 
 async function navigate(value,{record=true}={}){
+    if(destroyed)return '';
     const sequence=++navigationSequence;
     try{
         const url=normalize(value);
         address.value=url;
         status.textContent='Checking the global deny policy…';
         const decision=await evaluate(url,'embedded');
-        if(sequence!==navigationSequence)return'';
+        if(destroyed||sequence!==navigationSequence)return'';
         recordHistory(url,record);
         updateButtons();
         if(decision.blocked){
@@ -177,26 +194,29 @@ async function navigate(value,{record=true}={}){
 }
 
 async function openExternal(){
+    if(destroyed)return false;
     const sequence=++navigationSequence;
     try{
         const url=normalize(currentUrl()||address.value||homeUrl);
         status.textContent='Checking the global deny policy…';
         const decision=await evaluate(url,'external');
-        if(sequence!==navigationSequence)return;
+        if(destroyed||sequence!==navigationSequence)return false;
         if(decision.blocked){
             showBlocked(url,decision);
             return;
         }
         status.textContent='Handing the allowed address to the system browser…';
-        host.dispatchEvent(new CustomEvent('web-open-external',{bubbles:true,composed:true,detail:{url}}));
+        emit('web-open-external',{url},{intent:'external'});
+        return true;
     }catch(error){
-        if(sequence===navigationSequence)status.textContent=error.message;
+        if(!destroyed&&sequence===navigationSequence)status.textContent=error.message;
+        return false;
     }
 }
 
 function ownNavigation(operation){
     operation.catch(function reportUnexpectedNavigationFailure(error){
-        status.textContent=error.message;
+        if(!destroyed)status.textContent=error.message;
     });
 }
 
@@ -208,6 +228,7 @@ function move(amount){
 }
 
 function configure(options){
+    if(destroyed)return false;
     if(options?.homeUrl)homeUrl=normalize(options.homeUrl);
     navigationGuard=typeof options?.navigationGuard==='function'?options.navigationGuard:null;
     if(options?.initialUrl)ownNavigation(navigate(options.initialUrl));
@@ -223,7 +244,26 @@ function handleBackClick(){move(-1);}
 function handleForwardClick(){move(1);}
 function handleFrameLoad(){if(blocked.hidden)status.textContent='Loaded. If the page is blank, its site does not permit embedded viewing.';}
 
+function destroy(){
+    if(destroyed)return false;
+    destroyed=true;
+    navigationSequence+=1;
+    navigationGuard=null;
+    host.ready=false;
+    root.querySelector('#addressForm').removeEventListener('submit',handleAddressSubmit);
+    root.querySelector('#home').removeEventListener('click',handleHomeClick);
+    root.querySelector('#reload').removeEventListener('click',handleReloadClick);
+    root.querySelector('#external').removeEventListener('click',handleExternalClick);
+    back.removeEventListener('click',handleBackClick);
+    forward.removeEventListener('click',handleForwardClick);
+    frame.removeEventListener('load',handleFrameLoad);
+    frame.removeAttribute('src');
+    events.dispose();
+    return true;
+}
+
 host.configure=configure;
+host.destroy=destroy;
 host.navigate=navigate;
 host.currentUrl=currentUrl;
 root.querySelector('#addressForm').addEventListener('submit',handleAddressSubmit);
@@ -235,5 +275,5 @@ forward.addEventListener('click',handleForwardClick);
 frame.addEventListener('load',handleFrameLoad);
 updateButtons();
 host.ready=true;
-host.dispatchEvent(new CustomEvent('web-navigator-ready',{bubbles:true,composed:true}));
+emit('web-navigator-ready',{}, {ready:true});
 </script>

package/runtime/arcane/entities/Chat.js

@@ -1,6 +1,6 @@
 import Is from '../../node_modules/strong-type/index.js';
 import '../modules/DBOPFS.js';
-import '../modules/AI.js?v=8';
+import '../modules/AI.js';
 import {hasUserEntry} from '../modules/ChatRecords.js';
 import {normalizeMemoryContent} from '../modules/MemoryRecords.js';
 

package/runtime/arcane/entities/User.js

@@ -1,5 +1,10 @@
 import Is from '../../node_modules/strong-type/index.js';
 import DBLS from '../modules/DBLS.js';
+import {
+    arcaneEvents,
+    createArcaneEventSource,
+    projectArcaneDOMEvent
+} from 'arcane-os/event-manager';
 
 /**
  * DBOPFS Module
@@ -47,6 +52,17 @@ const is = new Is(false);
 const EMAIL_REGEX =
 /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
+const USER_ENTITY_LOADED_EVENT='user-entity-loaded';
+const USER_ENTITY_LOADED_REASON='user-data-loaded';
+let singletonDBOPFSReadyUnsubscribe=null;
+
+function userEntityLifecycleError(code,reason,message){
+    const error=new Error(message);
+    error.code=code;
+    error.reason=reason;
+    return error;
+}
+
 
 /**
  * Canonical schema for a UserEntity record.
@@ -85,6 +101,16 @@ const EMAIL_REGEX =
 
 class UserEntity {
 
+    #events;
+
+    #disposed = false;
+
+    #loadGeneration = 0;
+
+    #operationSequence = 0;
+
+    #stopDBOPFSReady = null;
+
     /** @type {string} */
     #tableName = 'users';
 
@@ -192,14 +218,22 @@ class UserEntity {
         }
 
         this.fileName = fileName;
-
-        window.addEventListener(
-            'dbopfs-ready',
-            this.load.bind(this)
-        );
+        this.#events=createArcaneEventSource(this,{
+            source:'user-entity',
+            eventTypes:Object.freeze([USER_ENTITY_LOADED_EVENT])
+        });
 
         if(window.dbopfs?.ready){
             this.load();
+        }else{
+            this.#stopDBOPFSReady=arcaneEvents.subscribe(
+                'dbopfs-ready',
+                ()=>{
+                    this.#stopDBOPFSReady=null;
+                    this.load();
+                },
+                {once:true}
+            );
         }
 
         return this;
@@ -912,6 +946,14 @@ class UserEntity {
      * only await if you need to ensure data is loaded before proceeding
      */
     async load(){
+        if(this.#disposed){
+            throw userEntityLifecycleError(
+                'ARCANE_USER_ENTITY_DISPOSED',
+                'user-entity-disposed',
+                'The user entity has been disposed.'
+            );
+        }
+
         if(this.ready){
             return this.explicit;
         }
@@ -920,12 +962,17 @@ class UserEntity {
             return this.#loadPromise;
         }
 
-        this.#loadPromise=this.#load();
+        const generation=++this.#loadGeneration;
+        const operationId=`${this.#events.instanceId}:load:${(++this.#operationSequence).toString(36)}`;
+        const loadPromise=this.#load(generation,operationId);
+        this.#loadPromise=loadPromise;
 
         try{
-            return await this.#loadPromise;
+            return await loadPromise;
         }finally{
-            this.#loadPromise=null;
+            if(this.#loadPromise===loadPromise){
+                this.#loadPromise=null;
+            }
         }
     }
 
@@ -956,12 +1003,26 @@ class UserEntity {
         return this.explicit;
     }
 
-    async #load(){
+    async #load(generation,operationId){
         const user=await dbopfs.get(
             this.#tableName,
             this.fileName
         );
 
+        if(this.#disposed||generation!==this.#loadGeneration){
+            throw userEntityLifecycleError(
+                this.#disposed
+                    ?'ARCANE_USER_ENTITY_DISPOSED'
+                    :'ARCANE_USER_ENTITY_LOAD_SUPERSEDED',
+                this.#disposed
+                    ?'user-entity-disposed'
+                    :'user-entity-load-superseded',
+                this.#disposed
+                    ?'The user entity was disposed before its data load settled.'
+                    :'The user entity data load was superseded before settlement.'
+            );
+        }
+
         if(user){
             const persist=this.persist;
             this.persist=false;
@@ -975,16 +1036,21 @@ class UserEntity {
 
         this.ready=true;
 
-        window.dispatchEvent(
-            new CustomEvent(
-                'user-entity-loaded',
-                {
-                    detail:{
-                        user:this
-                    }
-                }
-            )
+        const {occurrence}=this.#events.dispatch(
+            USER_ENTITY_LOADED_EVENT,
+            Object.freeze({
+                reason:USER_ENTITY_LOADED_REASON,
+                user:this
+            }),
+            {
+                operationId,
+                publicDetail:Object.freeze({
+                    ready:true,
+                    reason:USER_ENTITY_LOADED_REASON
+                })
+            }
         );
+        projectArcaneDOMEvent(window,occurrence);
 
         return this.explicit;
     }
@@ -1025,18 +1091,39 @@ class UserEntity {
 
         return true;
     }
-}
 
-window.addEventListener(
-    'dbopfs-ready',
-    initSingletonUserEntity
-);
+    dispose(){
+        if(this.#disposed)return false;
+        this.#disposed=true;
+        this.#loadGeneration+=1;
+        this.ready=false;
+        this.#stopDBOPFSReady?.();
+        this.#stopDBOPFSReady=null;
+        if(window.user===this){
+            delete window.user;
+            singletonDBOPFSReadyUnsubscribe?.();
+            singletonDBOPFSReadyUnsubscribe=null;
+        }
+        return this.#events.dispose();
+    }
+
+    destroy(){
+        return this.dispose();
+    }
+}
 
 if(window.dbopfs?.ready){
     initSingletonUserEntity();
+}else{
+    singletonDBOPFSReadyUnsubscribe=arcaneEvents.subscribe(
+        'dbopfs-ready',
+        initSingletonUserEntity,
+        {once:true}
+    );
 }
 
 function initSingletonUserEntity(){
+    singletonDBOPFSReadyUnsubscribe=null;
     if(!window.user){
         window.user = new UserEntity();
     }