@idosgames/app-shell 0.1.1 → 0.1.2

package/dist/index.cjs

@@ -1 +1 @@
-'use strict';var client=require('react-dom/client'),react$1=require('@idosgames/react'),react=require('react'),core=require('@idosgames/core'),jsxRuntime=require('react/jsx-runtime');function S(){let s=new Map;return {emit(o,t){let n=s.get(o);if(n)for(let r of [...n])r(t);},on(o,t){let n=t,r=s.get(o);return r||(r=new Set,s.set(o,r)),r.add(n),()=>{r.delete(n),r.size===0&&s.delete(o);}}}}var z={position:"absolute",inset:"0"};function h(s){return {request(o){let t=document.createElement("div");return t.dataset.surface=o,Object.assign(t.style,z),t.style.pointerEvents=o==="fullbleed-canvas"?"auto":"none",s.appendChild(t),{host:t,release(){t.remove();}}}}}function b(s,o){return s.map(t=>{let n={module:t,scenes:[],panels:[],routes:[]},r={client:o.client,titleId:o.client.titleID,events:o.events,surface:o.surface,registerScene:l=>n.scenes.push(l),registerPanel:l=>n.panels.push(l),registerRoute:l=>n.routes.push(l)};return t.setup(r),n})}var f=class{constructor(o){this.container=o;}container;hosts=new Map;active=new Set;ensureMounted(o){let t=this.hosts.get(o);return t||(t=document.createElement("div"),Object.assign(t.style,{position:"absolute",inset:"0"}),this.container.appendChild(t),this.hosts.set(o,t),o.mount({host:t})),t}setActive(o){let t=new Set(o);for(let n of this.active){if(t.has(n))continue;n.suspend?.();let r=this.hosts.get(n);r&&(r.style.display="none");}for(let n of t){if(this.active.has(n))continue;let r=this.ensureMounted(n);r.style.display="block",n.activate?.();}this.active=t;}destroy(){for(let[o,t]of this.hosts)o.destroy(),t.remove();this.hosts.clear(),this.active.clear();}};function E({registrations:s}){let o=react.useRef(null),t=react.useRef(null),n=react.useMemo(()=>s.flatMap(e=>e.routes.map(i=>({id:i.id,label:i.label,icon:i.icon,order:i.order??0,moduleId:e.module.id}))).sort((e,i)=>e.order-i.order),[s]),[r,l]=react.useState(()=>n[0]?.id??null);react.useEffect(()=>{r!==null&&n.some(e=>e.id===r)||l(n[0]?.id??null);},[n,r]);let d=react.useMemo(()=>n.find(e=>e.id===r)?.moduleId??null,[n,r]);react.useEffect(()=>{let e=o.current;if(!e)return;let i=t.current??=new f(e),m=s.find(g=>g.module.id===d)?.scenes??[];i.setActive(m);},[s,d]),react.useEffect(()=>()=>{t.current?.destroy(),t.current=null;},[]);let u=react.useMemo(()=>s.flatMap(e=>e.panels.filter(i=>i.activeOnly===false||e.module.id===d).map(i=>{let m=i.component;return {key:`${e.module.id}:${i.id}`,slot:i.slot,order:i.order??0,moduleId:e.module.id,component:jsxRuntime.jsx(m,{})}})).sort((e,i)=>e.order-i.order),[s,d]),c=e=>u.filter(i=>i.slot===e),p=s.length>0;return jsxRuntime.jsxs("div",{style:N,children:[jsxRuntime.jsx("div",{ref:o,style:T}),jsxRuntime.jsx("div",{style:O,children:c("overlay").map(e=>jsxRuntime.jsx("div",{style:y,children:e.component},e.key))}),jsxRuntime.jsx("div",{style:W,children:c("hud").map(e=>jsxRuntime.jsx("div",{style:y,children:e.component},e.key))}),jsxRuntime.jsx("div",{style:j,children:c("sidebar").map(e=>jsxRuntime.jsx("div",{style:y,children:e.component},e.key))}),n.length>1&&jsxRuntime.jsx("nav",{style:U,children:n.map(e=>jsxRuntime.jsxs("button",{type:"button",onClick:()=>l(e.id),style:e.id===r?$:I,children:[e.icon?`${e.icon} `:"",e.label]},e.id))}),c("modal").length>0&&jsxRuntime.jsx("div",{style:F,children:c("modal").map(e=>jsxRuntime.jsx("div",{style:y,children:e.component},e.key))}),!p&&jsxRuntime.jsx(G,{})]})}function G(){return jsxRuntime.jsxs("div",{style:K,children:[jsxRuntime.jsx("div",{style:{fontSize:40,marginBottom:12},children:"\u{1F9E9}"}),jsxRuntime.jsx("div",{style:{fontWeight:700,fontSize:18,marginBottom:6},children:"No modules installed"}),jsxRuntime.jsxs("div",{style:{opacity:.7,maxWidth:380,lineHeight:1.5},children:["Add a module under ",jsxRuntime.jsx("code",{children:"src/modules/"})," and register it in"," ",jsxRuntime.jsx("code",{children:"src/modules.ts"}),". The host shell will pick it up here."]})]})}var N={position:"absolute",inset:0,overflow:"hidden",color:"#fff",fontFamily:"system-ui, sans-serif"},T={position:"absolute",inset:0,zIndex:0},O={position:"absolute",inset:0,zIndex:1,pointerEvents:"none"},W={position:"absolute",top:0,left:0,right:0,zIndex:2,display:"flex",gap:12,padding:16,pointerEvents:"none"},j={position:"absolute",top:0,right:0,bottom:0,width:340,maxWidth:"40vw",zIndex:2,display:"flex",flexDirection:"column",gap:12,padding:16,overflowY:"auto",pointerEvents:"none"},U={position:"absolute",bottom:16,left:"50%",transform:"translateX(-50%)",zIndex:3,display:"flex",gap:8,padding:6,borderRadius:14,background:"rgba(20,18,40,0.72)",backdropFilter:"blur(6px)",pointerEvents:"auto"},I={border:"none",borderRadius:10,padding:"8px 16px",fontWeight:700,fontSize:14,color:"#cfc9ee",background:"transparent",cursor:"pointer"},$={...I,color:"#fff",background:"#6c5ce7"},F={position:"absolute",inset:0,zIndex:4,display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(0,0,0,0.5)",pointerEvents:"none"},y={pointerEvents:"auto"},K={position:"absolute",inset:0,zIndex:1,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",padding:24};function M(s){let{client:o,modules:t,events:n,surface:r,renderLogin:l}=s,[d,u]=react.useState(true),[c,p]=react.useState(null),e=()=>{p(b(t,{client:o,events:n,surface:r}));},i=react.useRef(false);return react.useEffect(()=>{if(!i.current){if(i.current=true,o.auth.lastAuthType===core.AuthType.None){u(false);return}(async()=>((await o.auth.autoLogin()).ok&&e(),u(false)))();}},[o]),react.useEffect(()=>{let m=()=>p(null),g=o.on("auth:unauthorized",m),w=o.on("auth:loggedOut",m);return ()=>{g(),w();}},[o]),c?jsxRuntime.jsx(E,{registrations:c}):d?null:l({client:o,onAuthenticated:e})}function P({client:s,onAuthenticated:o}){let[t,n]=react.useState(false),[r,l]=react.useState(null),d=async()=>{n(true),l(null);let u=await s.auth.loginWithDeviceID();if(u.ok){o();return}l(u.error),n(false);};return jsxRuntime.jsx("div",{style:{position:"absolute",inset:0,display:"grid",placeItems:"center",gap:"12px",color:"#e8e6f3",font:"14px system-ui, sans-serif"},children:jsxRuntime.jsxs("div",{style:{display:"grid",gap:"12px",justifyItems:"center"},children:[jsxRuntime.jsx("button",{type:"button",onClick:()=>{d();},disabled:t,style:{padding:"10px 20px",borderRadius:"8px",border:"1px solid #4c4470",background:t?"#2a2545":"#3b3363",color:"inherit",cursor:t?"default":"pointer",font:"inherit"},children:t?"Signing in\u2026":"Play as guest"}),r&&jsxRuntime.jsx("span",{style:{color:"#ff9b9b"},children:r})]})})}function _(s){let{container:o,client:t,modules:n,renderLogin:r}=s;o.style.position="relative";let l=document.createElement("div");Object.assign(l.style,{position:"absolute",inset:"0",zIndex:"0",pointerEvents:"none"});let d=document.createElement("div");Object.assign(d.style,{position:"absolute",inset:"0",zIndex:"1"}),o.append(l,d);let u=S(),c=h(l),p=client.createRoot(d);return p.render(jsxRuntime.jsx(react$1.IDosGamesProvider,{client:t,children:jsxRuntime.jsx(react$1.StatusProvider,{children:jsxRuntime.jsx(M,{client:t,modules:n,events:u,surface:c,renderLogin:r??P})})})),{unmount(){p.unmount(),l.remove(),d.remove();}}}exports.AuthGate=M;exports.DefaultLoginScreen=P;exports.HostShell=E;exports.SceneStage=f;exports.createSharedEventBus=S;exports.createSurfaceAllocator=h;exports.mountHost=_;exports.runModules=b;
+'use strict';var client=require('react-dom/client'),react$1=require('@idosgames/react'),react=require('react'),core=require('@idosgames/core'),jsxRuntime=require('react/jsx-runtime');function h(){let s=new Map;return {emit(o,e){let n=s.get(o);if(n)for(let r of [...n])r(e);},on(o,e){let n=e,r=s.get(o);return r||(r=new Set,s.set(o,r)),r.add(n),()=>{r.delete(n),r.size===0&&s.delete(o);}}}}var B={position:"absolute",inset:"0"};function b(s){return {request(o){let e=document.createElement("div");return e.dataset.surface=o,Object.assign(e.style,B),e.style.pointerEvents=o==="fullbleed-canvas"?"auto":"none",s.appendChild(e),{host:e,release(){e.remove();}}}}}function x(s,o){return s.map(e=>{let n={module:e,scenes:[],panels:[],routes:[]},r={client:o.client,titleId:o.client.titleID,events:o.events,surface:o.surface,registerScene:l=>n.scenes.push(l),registerPanel:l=>n.panels.push(l),registerRoute:l=>n.routes.push(l)};return e.setup(r),n})}var f=class{constructor(o){this.container=o;}container;hosts=new Map;active=new Set;ensureMounted(o){let e=this.hosts.get(o);return e||(e=document.createElement("div"),Object.assign(e.style,{position:"absolute",inset:"0"}),this.container.appendChild(e),this.hosts.set(o,e),o.mount({host:e})),e}setActive(o){let e=new Set(o);for(let n of this.active){if(e.has(n))continue;n.suspend?.();let r=this.hosts.get(n);r&&(r.style.display="none");}for(let n of e){if(this.active.has(n))continue;let r=this.ensureMounted(n);r.style.display="block",n.activate?.();}this.active=e;}destroy(){for(let[o,e]of this.hosts)o.destroy(),e.remove();this.hosts.clear(),this.active.clear();}};function k({registrations:s}){let o=react.useRef(null),e=react.useRef(null),n=react.useMemo(()=>s.flatMap(t=>t.routes.map(i=>({id:i.id,label:i.label,icon:i.icon,order:i.order??0,moduleId:t.module.id}))).sort((t,i)=>t.order-i.order),[s]),[r,l]=react.useState(()=>n[0]?.id??null);react.useEffect(()=>{r!==null&&n.some(t=>t.id===r)||l(n[0]?.id??null);},[n,r]);let d=react.useMemo(()=>n.find(t=>t.id===r)?.moduleId??null,[n,r]);react.useEffect(()=>{let t=o.current;if(!t)return;let i=e.current??=new f(t),m=s.find(S=>S.module.id===d)?.scenes??[];i.setActive(m);},[s,d]),react.useEffect(()=>()=>{e.current?.destroy(),e.current=null;},[]);let p=react.useMemo(()=>s.flatMap(t=>t.panels.filter(i=>i.activeOnly===false||t.module.id===d).map(i=>{let m=i.component;return {key:`${t.module.id}:${i.id}`,slot:i.slot,order:i.order??0,moduleId:t.module.id,component:jsxRuntime.jsx(m,{})}})).sort((t,i)=>t.order-i.order),[s,d]),c=t=>p.filter(i=>i.slot===t),u=s.length>0;return jsxRuntime.jsxs("div",{style:T,children:[jsxRuntime.jsx("div",{ref:o,style:O}),jsxRuntime.jsx("div",{style:W,children:c("overlay").map(t=>jsxRuntime.jsx("div",{style:y,children:t.component},t.key))}),jsxRuntime.jsx("div",{style:j,children:c("hud").map(t=>jsxRuntime.jsx("div",{style:y,children:t.component},t.key))}),jsxRuntime.jsx("div",{style:U,children:c("sidebar").map(t=>jsxRuntime.jsx("div",{style:y,children:t.component},t.key))}),n.length>1&&jsxRuntime.jsx("nav",{style:$,children:n.map(t=>jsxRuntime.jsxs("button",{type:"button",onClick:()=>l(t.id),style:t.id===r?F:A,children:[t.icon?`${t.icon} `:"",t.label]},t.id))}),c("modal").length>0&&jsxRuntime.jsx("div",{style:K,children:c("modal").map(t=>jsxRuntime.jsx("div",{style:y,children:t.component},t.key))}),!u&&jsxRuntime.jsx(N,{})]})}function N(){return jsxRuntime.jsxs("div",{style:q,children:[jsxRuntime.jsx("div",{style:{fontSize:40,marginBottom:12},children:"\u{1F9E9}"}),jsxRuntime.jsx("div",{style:{fontWeight:700,fontSize:18,marginBottom:6},children:"No modules installed"}),jsxRuntime.jsxs("div",{style:{opacity:.7,maxWidth:380,lineHeight:1.5},children:["Add a module under ",jsxRuntime.jsx("code",{children:"src/modules/"})," and register it in"," ",jsxRuntime.jsx("code",{children:"src/modules.ts"}),". The host shell will pick it up here."]})]})}var T={position:"absolute",inset:0,overflow:"hidden",color:"#fff",fontFamily:"system-ui, sans-serif"},O={position:"absolute",inset:0,zIndex:0},W={position:"absolute",inset:0,zIndex:1,pointerEvents:"none"},j={position:"absolute",top:0,left:0,right:0,zIndex:2,display:"flex",gap:12,padding:16,pointerEvents:"none"},U={position:"absolute",top:0,right:0,bottom:0,width:340,maxWidth:"40vw",zIndex:2,display:"flex",flexDirection:"column",gap:12,padding:16,overflowY:"auto",pointerEvents:"none"},$={position:"absolute",bottom:16,left:"50%",transform:"translateX(-50%)",zIndex:3,display:"flex",gap:8,padding:6,borderRadius:14,background:"rgba(20,18,40,0.72)",backdropFilter:"blur(6px)",pointerEvents:"auto"},A={border:"none",borderRadius:10,padding:"8px 16px",fontWeight:700,fontSize:14,color:"#cfc9ee",background:"transparent",cursor:"pointer"},F={...A,color:"#fff",background:"#6c5ce7"},K={position:"absolute",inset:0,zIndex:4,display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(0,0,0,0.5)",pointerEvents:"none"},y={pointerEvents:"auto"},q={position:"absolute",inset:0,zIndex:1,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",padding:24};function M(s){let{client:o,modules:e,events:n,surface:r,renderLogin:l}=s,[d,p]=react.useState(true),[c,u]=react.useState(null),t=()=>{u(x(e,{client:o,events:n,surface:r}));},i=react.useRef(false);return react.useEffect(()=>{if(!i.current){if(i.current=true,o.auth.lastAuthType===core.AuthType.None){p(false);return}(async()=>((await o.auth.autoLogin()).ok&&t(),p(false)))();}},[o]),react.useEffect(()=>{let m=()=>u(null),S=o.on("auth:unauthorized",m),z=o.on("auth:loggedOut",m);return ()=>{S(),z();}},[o]),c?jsxRuntime.jsx(k,{registrations:c}):d?null:l({client:o,onAuthenticated:t})}function C({client:s,onAuthenticated:o}){let[e,n]=react.useState(false),[r,l]=react.useState(null),[d,p]=react.useState(true),c=async()=>{n(true),l(null),s.auth.setRememberSession(d);let u=await s.auth.loginWithDeviceID();if(u.ok){o();return}l(u.error),n(false);};return jsxRuntime.jsx("div",{style:{position:"absolute",inset:0,display:"grid",placeItems:"center",gap:"12px",color:"#e8e6f3",font:"14px system-ui, sans-serif"},children:jsxRuntime.jsxs("div",{style:{display:"grid",gap:"12px",justifyItems:"center"},children:[jsxRuntime.jsx("button",{type:"button",onClick:()=>{c();},disabled:e,style:{padding:"10px 20px",borderRadius:"8px",border:"1px solid #4c4470",background:e?"#2a2545":"#3b3363",color:"inherit",cursor:e?"default":"pointer",font:"inherit"},children:e?"Signing in\u2026":"Play as guest"}),jsxRuntime.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"6px",cursor:e?"default":"pointer",opacity:e?.6:1},children:[jsxRuntime.jsx("input",{type:"checkbox",checked:d,disabled:e,onChange:u=>p(u.target.checked)}),"Remember me"]}),r&&jsxRuntime.jsx("span",{style:{color:"#ff9b9b"},children:r})]})})}function _(s){let{container:o,client:e,modules:n,renderLogin:r}=s;o.style.position="relative";let l=document.createElement("div");Object.assign(l.style,{position:"absolute",inset:"0",zIndex:"0",pointerEvents:"none"});let d=document.createElement("div");Object.assign(d.style,{position:"absolute",inset:"0",zIndex:"1"}),o.append(l,d);let p=h(),c=b(l),u=client.createRoot(d);return u.render(jsxRuntime.jsx(react$1.IDosGamesProvider,{client:e,children:jsxRuntime.jsx(react$1.StatusProvider,{children:jsxRuntime.jsx(M,{client:e,modules:n,events:p,surface:c,renderLogin:r??C})})})),{unmount(){u.unmount(),l.remove(),d.remove();}}}exports.AuthGate=M;exports.DefaultLoginScreen=C;exports.HostShell=k;exports.SceneStage=f;exports.createSharedEventBus=h;exports.createSurfaceAllocator=b;exports.mountHost=_;exports.runModules=x;

package/dist/index.js

@@ -1 +1 @@
-import {createRoot}from'react-dom/client';import {IDosGamesProvider,StatusProvider}from'@idosgames/react';import {useRef,useMemo,useState,useEffect}from'react';import {AuthType}from'@idosgames/core';import {jsx,jsxs}from'react/jsx-runtime';function S(){let s=new Map;return {emit(o,t){let n=s.get(o);if(n)for(let r of [...n])r(t);},on(o,t){let n=t,r=s.get(o);return r||(r=new Set,s.set(o,r)),r.add(n),()=>{r.delete(n),r.size===0&&s.delete(o);}}}}var z={position:"absolute",inset:"0"};function h(s){return {request(o){let t=document.createElement("div");return t.dataset.surface=o,Object.assign(t.style,z),t.style.pointerEvents=o==="fullbleed-canvas"?"auto":"none",s.appendChild(t),{host:t,release(){t.remove();}}}}}function b(s,o){return s.map(t=>{let n={module:t,scenes:[],panels:[],routes:[]},r={client:o.client,titleId:o.client.titleID,events:o.events,surface:o.surface,registerScene:l=>n.scenes.push(l),registerPanel:l=>n.panels.push(l),registerRoute:l=>n.routes.push(l)};return t.setup(r),n})}var f=class{constructor(o){this.container=o;}container;hosts=new Map;active=new Set;ensureMounted(o){let t=this.hosts.get(o);return t||(t=document.createElement("div"),Object.assign(t.style,{position:"absolute",inset:"0"}),this.container.appendChild(t),this.hosts.set(o,t),o.mount({host:t})),t}setActive(o){let t=new Set(o);for(let n of this.active){if(t.has(n))continue;n.suspend?.();let r=this.hosts.get(n);r&&(r.style.display="none");}for(let n of t){if(this.active.has(n))continue;let r=this.ensureMounted(n);r.style.display="block",n.activate?.();}this.active=t;}destroy(){for(let[o,t]of this.hosts)o.destroy(),t.remove();this.hosts.clear(),this.active.clear();}};function E({registrations:s}){let o=useRef(null),t=useRef(null),n=useMemo(()=>s.flatMap(e=>e.routes.map(i=>({id:i.id,label:i.label,icon:i.icon,order:i.order??0,moduleId:e.module.id}))).sort((e,i)=>e.order-i.order),[s]),[r,l]=useState(()=>n[0]?.id??null);useEffect(()=>{r!==null&&n.some(e=>e.id===r)||l(n[0]?.id??null);},[n,r]);let d=useMemo(()=>n.find(e=>e.id===r)?.moduleId??null,[n,r]);useEffect(()=>{let e=o.current;if(!e)return;let i=t.current??=new f(e),m=s.find(g=>g.module.id===d)?.scenes??[];i.setActive(m);},[s,d]),useEffect(()=>()=>{t.current?.destroy(),t.current=null;},[]);let u=useMemo(()=>s.flatMap(e=>e.panels.filter(i=>i.activeOnly===false||e.module.id===d).map(i=>{let m=i.component;return {key:`${e.module.id}:${i.id}`,slot:i.slot,order:i.order??0,moduleId:e.module.id,component:jsx(m,{})}})).sort((e,i)=>e.order-i.order),[s,d]),c=e=>u.filter(i=>i.slot===e),p=s.length>0;return jsxs("div",{style:N,children:[jsx("div",{ref:o,style:T}),jsx("div",{style:O,children:c("overlay").map(e=>jsx("div",{style:y,children:e.component},e.key))}),jsx("div",{style:W,children:c("hud").map(e=>jsx("div",{style:y,children:e.component},e.key))}),jsx("div",{style:j,children:c("sidebar").map(e=>jsx("div",{style:y,children:e.component},e.key))}),n.length>1&&jsx("nav",{style:U,children:n.map(e=>jsxs("button",{type:"button",onClick:()=>l(e.id),style:e.id===r?$:I,children:[e.icon?`${e.icon} `:"",e.label]},e.id))}),c("modal").length>0&&jsx("div",{style:F,children:c("modal").map(e=>jsx("div",{style:y,children:e.component},e.key))}),!p&&jsx(G,{})]})}function G(){return jsxs("div",{style:K,children:[jsx("div",{style:{fontSize:40,marginBottom:12},children:"\u{1F9E9}"}),jsx("div",{style:{fontWeight:700,fontSize:18,marginBottom:6},children:"No modules installed"}),jsxs("div",{style:{opacity:.7,maxWidth:380,lineHeight:1.5},children:["Add a module under ",jsx("code",{children:"src/modules/"})," and register it in"," ",jsx("code",{children:"src/modules.ts"}),". The host shell will pick it up here."]})]})}var N={position:"absolute",inset:0,overflow:"hidden",color:"#fff",fontFamily:"system-ui, sans-serif"},T={position:"absolute",inset:0,zIndex:0},O={position:"absolute",inset:0,zIndex:1,pointerEvents:"none"},W={position:"absolute",top:0,left:0,right:0,zIndex:2,display:"flex",gap:12,padding:16,pointerEvents:"none"},j={position:"absolute",top:0,right:0,bottom:0,width:340,maxWidth:"40vw",zIndex:2,display:"flex",flexDirection:"column",gap:12,padding:16,overflowY:"auto",pointerEvents:"none"},U={position:"absolute",bottom:16,left:"50%",transform:"translateX(-50%)",zIndex:3,display:"flex",gap:8,padding:6,borderRadius:14,background:"rgba(20,18,40,0.72)",backdropFilter:"blur(6px)",pointerEvents:"auto"},I={border:"none",borderRadius:10,padding:"8px 16px",fontWeight:700,fontSize:14,color:"#cfc9ee",background:"transparent",cursor:"pointer"},$={...I,color:"#fff",background:"#6c5ce7"},F={position:"absolute",inset:0,zIndex:4,display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(0,0,0,0.5)",pointerEvents:"none"},y={pointerEvents:"auto"},K={position:"absolute",inset:0,zIndex:1,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",padding:24};function M(s){let{client:o,modules:t,events:n,surface:r,renderLogin:l}=s,[d,u]=useState(true),[c,p]=useState(null),e=()=>{p(b(t,{client:o,events:n,surface:r}));},i=useRef(false);return useEffect(()=>{if(!i.current){if(i.current=true,o.auth.lastAuthType===AuthType.None){u(false);return}(async()=>((await o.auth.autoLogin()).ok&&e(),u(false)))();}},[o]),useEffect(()=>{let m=()=>p(null),g=o.on("auth:unauthorized",m),w=o.on("auth:loggedOut",m);return ()=>{g(),w();}},[o]),c?jsx(E,{registrations:c}):d?null:l({client:o,onAuthenticated:e})}function P({client:s,onAuthenticated:o}){let[t,n]=useState(false),[r,l]=useState(null),d=async()=>{n(true),l(null);let u=await s.auth.loginWithDeviceID();if(u.ok){o();return}l(u.error),n(false);};return jsx("div",{style:{position:"absolute",inset:0,display:"grid",placeItems:"center",gap:"12px",color:"#e8e6f3",font:"14px system-ui, sans-serif"},children:jsxs("div",{style:{display:"grid",gap:"12px",justifyItems:"center"},children:[jsx("button",{type:"button",onClick:()=>{d();},disabled:t,style:{padding:"10px 20px",borderRadius:"8px",border:"1px solid #4c4470",background:t?"#2a2545":"#3b3363",color:"inherit",cursor:t?"default":"pointer",font:"inherit"},children:t?"Signing in\u2026":"Play as guest"}),r&&jsx("span",{style:{color:"#ff9b9b"},children:r})]})})}function _(s){let{container:o,client:t,modules:n,renderLogin:r}=s;o.style.position="relative";let l=document.createElement("div");Object.assign(l.style,{position:"absolute",inset:"0",zIndex:"0",pointerEvents:"none"});let d=document.createElement("div");Object.assign(d.style,{position:"absolute",inset:"0",zIndex:"1"}),o.append(l,d);let u=S(),c=h(l),p=createRoot(d);return p.render(jsx(IDosGamesProvider,{client:t,children:jsx(StatusProvider,{children:jsx(M,{client:t,modules:n,events:u,surface:c,renderLogin:r??P})})})),{unmount(){p.unmount(),l.remove(),d.remove();}}}export{M as AuthGate,P as DefaultLoginScreen,E as HostShell,f as SceneStage,S as createSharedEventBus,h as createSurfaceAllocator,_ as mountHost,b as runModules};
+import {createRoot}from'react-dom/client';import {IDosGamesProvider,StatusProvider}from'@idosgames/react';import {useRef,useMemo,useState,useEffect}from'react';import {AuthType}from'@idosgames/core';import {jsx,jsxs}from'react/jsx-runtime';function h(){let s=new Map;return {emit(o,e){let n=s.get(o);if(n)for(let r of [...n])r(e);},on(o,e){let n=e,r=s.get(o);return r||(r=new Set,s.set(o,r)),r.add(n),()=>{r.delete(n),r.size===0&&s.delete(o);}}}}var B={position:"absolute",inset:"0"};function b(s){return {request(o){let e=document.createElement("div");return e.dataset.surface=o,Object.assign(e.style,B),e.style.pointerEvents=o==="fullbleed-canvas"?"auto":"none",s.appendChild(e),{host:e,release(){e.remove();}}}}}function x(s,o){return s.map(e=>{let n={module:e,scenes:[],panels:[],routes:[]},r={client:o.client,titleId:o.client.titleID,events:o.events,surface:o.surface,registerScene:l=>n.scenes.push(l),registerPanel:l=>n.panels.push(l),registerRoute:l=>n.routes.push(l)};return e.setup(r),n})}var f=class{constructor(o){this.container=o;}container;hosts=new Map;active=new Set;ensureMounted(o){let e=this.hosts.get(o);return e||(e=document.createElement("div"),Object.assign(e.style,{position:"absolute",inset:"0"}),this.container.appendChild(e),this.hosts.set(o,e),o.mount({host:e})),e}setActive(o){let e=new Set(o);for(let n of this.active){if(e.has(n))continue;n.suspend?.();let r=this.hosts.get(n);r&&(r.style.display="none");}for(let n of e){if(this.active.has(n))continue;let r=this.ensureMounted(n);r.style.display="block",n.activate?.();}this.active=e;}destroy(){for(let[o,e]of this.hosts)o.destroy(),e.remove();this.hosts.clear(),this.active.clear();}};function k({registrations:s}){let o=useRef(null),e=useRef(null),n=useMemo(()=>s.flatMap(t=>t.routes.map(i=>({id:i.id,label:i.label,icon:i.icon,order:i.order??0,moduleId:t.module.id}))).sort((t,i)=>t.order-i.order),[s]),[r,l]=useState(()=>n[0]?.id??null);useEffect(()=>{r!==null&&n.some(t=>t.id===r)||l(n[0]?.id??null);},[n,r]);let d=useMemo(()=>n.find(t=>t.id===r)?.moduleId??null,[n,r]);useEffect(()=>{let t=o.current;if(!t)return;let i=e.current??=new f(t),m=s.find(S=>S.module.id===d)?.scenes??[];i.setActive(m);},[s,d]),useEffect(()=>()=>{e.current?.destroy(),e.current=null;},[]);let p=useMemo(()=>s.flatMap(t=>t.panels.filter(i=>i.activeOnly===false||t.module.id===d).map(i=>{let m=i.component;return {key:`${t.module.id}:${i.id}`,slot:i.slot,order:i.order??0,moduleId:t.module.id,component:jsx(m,{})}})).sort((t,i)=>t.order-i.order),[s,d]),c=t=>p.filter(i=>i.slot===t),u=s.length>0;return jsxs("div",{style:T,children:[jsx("div",{ref:o,style:O}),jsx("div",{style:W,children:c("overlay").map(t=>jsx("div",{style:y,children:t.component},t.key))}),jsx("div",{style:j,children:c("hud").map(t=>jsx("div",{style:y,children:t.component},t.key))}),jsx("div",{style:U,children:c("sidebar").map(t=>jsx("div",{style:y,children:t.component},t.key))}),n.length>1&&jsx("nav",{style:$,children:n.map(t=>jsxs("button",{type:"button",onClick:()=>l(t.id),style:t.id===r?F:A,children:[t.icon?`${t.icon} `:"",t.label]},t.id))}),c("modal").length>0&&jsx("div",{style:K,children:c("modal").map(t=>jsx("div",{style:y,children:t.component},t.key))}),!u&&jsx(N,{})]})}function N(){return jsxs("div",{style:q,children:[jsx("div",{style:{fontSize:40,marginBottom:12},children:"\u{1F9E9}"}),jsx("div",{style:{fontWeight:700,fontSize:18,marginBottom:6},children:"No modules installed"}),jsxs("div",{style:{opacity:.7,maxWidth:380,lineHeight:1.5},children:["Add a module under ",jsx("code",{children:"src/modules/"})," and register it in"," ",jsx("code",{children:"src/modules.ts"}),". The host shell will pick it up here."]})]})}var T={position:"absolute",inset:0,overflow:"hidden",color:"#fff",fontFamily:"system-ui, sans-serif"},O={position:"absolute",inset:0,zIndex:0},W={position:"absolute",inset:0,zIndex:1,pointerEvents:"none"},j={position:"absolute",top:0,left:0,right:0,zIndex:2,display:"flex",gap:12,padding:16,pointerEvents:"none"},U={position:"absolute",top:0,right:0,bottom:0,width:340,maxWidth:"40vw",zIndex:2,display:"flex",flexDirection:"column",gap:12,padding:16,overflowY:"auto",pointerEvents:"none"},$={position:"absolute",bottom:16,left:"50%",transform:"translateX(-50%)",zIndex:3,display:"flex",gap:8,padding:6,borderRadius:14,background:"rgba(20,18,40,0.72)",backdropFilter:"blur(6px)",pointerEvents:"auto"},A={border:"none",borderRadius:10,padding:"8px 16px",fontWeight:700,fontSize:14,color:"#cfc9ee",background:"transparent",cursor:"pointer"},F={...A,color:"#fff",background:"#6c5ce7"},K={position:"absolute",inset:0,zIndex:4,display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(0,0,0,0.5)",pointerEvents:"none"},y={pointerEvents:"auto"},q={position:"absolute",inset:0,zIndex:1,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",padding:24};function M(s){let{client:o,modules:e,events:n,surface:r,renderLogin:l}=s,[d,p]=useState(true),[c,u]=useState(null),t=()=>{u(x(e,{client:o,events:n,surface:r}));},i=useRef(false);return useEffect(()=>{if(!i.current){if(i.current=true,o.auth.lastAuthType===AuthType.None){p(false);return}(async()=>((await o.auth.autoLogin()).ok&&t(),p(false)))();}},[o]),useEffect(()=>{let m=()=>u(null),S=o.on("auth:unauthorized",m),z=o.on("auth:loggedOut",m);return ()=>{S(),z();}},[o]),c?jsx(k,{registrations:c}):d?null:l({client:o,onAuthenticated:t})}function C({client:s,onAuthenticated:o}){let[e,n]=useState(false),[r,l]=useState(null),[d,p]=useState(true),c=async()=>{n(true),l(null),s.auth.setRememberSession(d);let u=await s.auth.loginWithDeviceID();if(u.ok){o();return}l(u.error),n(false);};return jsx("div",{style:{position:"absolute",inset:0,display:"grid",placeItems:"center",gap:"12px",color:"#e8e6f3",font:"14px system-ui, sans-serif"},children:jsxs("div",{style:{display:"grid",gap:"12px",justifyItems:"center"},children:[jsx("button",{type:"button",onClick:()=>{c();},disabled:e,style:{padding:"10px 20px",borderRadius:"8px",border:"1px solid #4c4470",background:e?"#2a2545":"#3b3363",color:"inherit",cursor:e?"default":"pointer",font:"inherit"},children:e?"Signing in\u2026":"Play as guest"}),jsxs("label",{style:{display:"flex",alignItems:"center",gap:"6px",cursor:e?"default":"pointer",opacity:e?.6:1},children:[jsx("input",{type:"checkbox",checked:d,disabled:e,onChange:u=>p(u.target.checked)}),"Remember me"]}),r&&jsx("span",{style:{color:"#ff9b9b"},children:r})]})})}function _(s){let{container:o,client:e,modules:n,renderLogin:r}=s;o.style.position="relative";let l=document.createElement("div");Object.assign(l.style,{position:"absolute",inset:"0",zIndex:"0",pointerEvents:"none"});let d=document.createElement("div");Object.assign(d.style,{position:"absolute",inset:"0",zIndex:"1"}),o.append(l,d);let p=h(),c=b(l),u=createRoot(d);return u.render(jsx(IDosGamesProvider,{client:e,children:jsx(StatusProvider,{children:jsx(M,{client:e,modules:n,events:p,surface:c,renderLogin:r??C})})})),{unmount(){u.unmount(),l.remove(),d.remove();}}}export{M as AuthGate,C as DefaultLoginScreen,k as HostShell,f as SceneStage,h as createSharedEventBus,b as createSurfaceAllocator,_ as mountHost,x as runModules};

package/package.json

@@ -1,64 +1,64 @@
-{
-  "name": "@idosgames/app-shell",
-  "version": "0.1.1",
-  "description": "The host runtime for composable modules: module registry, shared event bus, surface allocator, scene stage, and the React Mode Router shell. A project seeds one host shell and plugs N modules into it.",
-  "type": "module",
-  "license": "MIT",
-  "author": "iDos Games",
-  "homepage": "https://github.com/iDos-Games/iDosGamesSDK_TS#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/iDos-Games/iDosGamesSDK_TS.git",
-    "directory": "packages/app-shell"
-  },
-  "bugs": {
-    "url": "https://github.com/iDos-Games/iDosGamesSDK_TS/issues"
-  },
-  "keywords": [
-    "idosgames",
-    "sdk",
-    "host",
-    "shell",
-    "modules",
-    "plugin"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "sideEffects": false,
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    }
-  },
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "typecheck": "tsc --noEmit -p tsconfig.json"
-  },
-  "//": "react/react-dom are consumer-provided peers. @idosgames/* are real ranges pinned in step with those packages.",
-  "dependencies": {
-    "@idosgames/core": "^0.1.1",
-    "@idosgames/module-sdk": "^0.1.0",
-    "@idosgames/react": "^0.1.0"
-  },
-  "peerDependencies": {
-    "react": "^18.3.1 || ^19.0.0",
-    "react-dom": "^18.3.1 || ^19.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7"
-  }
-}
+{
+  "name": "@idosgames/app-shell",
+  "version": "0.1.2",
+  "description": "The host runtime for composable modules: module registry, shared event bus, surface allocator, scene stage, and the React Mode Router shell. A project seeds one host shell and plugs N modules into it.",
+  "type": "module",
+  "license": "MIT",
+  "author": "iDos Games",
+  "homepage": "https://github.com/iDos-Games/iDosGamesSDK_TS#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/iDos-Games/iDosGamesSDK_TS.git",
+    "directory": "packages/app-shell"
+  },
+  "bugs": {
+    "url": "https://github.com/iDos-Games/iDosGamesSDK_TS/issues"
+  },
+  "keywords": [
+    "idosgames",
+    "sdk",
+    "host",
+    "shell",
+    "modules",
+    "plugin"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  },
+  "//": "react/react-dom are consumer-provided peers. @idosgames/* are real ranges pinned in step with those packages.",
+  "dependencies": {
+    "@idosgames/core": "^0.1.1",
+    "@idosgames/module-sdk": "^0.1.0",
+    "@idosgames/react": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
+  }
+}