@idosgames/app-shell 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -1 +1 @@
-'use strict';var client=require('react-dom/client'),react$1=require('@idosgames/react'),react=require('react'),jsxRuntime=require('react/jsx-runtime');function S(){let r=new Map;return {emit(n,t){let o=r.get(n);if(o)for(let s of [...o])s(t);},on(n,t){let o=t,s=r.get(n);return s||(s=new Set,r.set(n,s)),s.add(o),()=>{s.delete(o),s.size===0&&r.delete(n);}}}}var k={position:"absolute",inset:"0"};function g(r){return {request(n){let t=document.createElement("div");return t.dataset.surface=n,Object.assign(t.style,k),t.style.pointerEvents=n==="fullbleed-canvas"?"auto":"none",r.appendChild(t),{host:t,release(){t.remove();}}}}}function h(r,n){return r.map(t=>{let o={module:t,scenes:[],panels:[],routes:[]},s={client:n.client,events:n.events,surface:n.surface,registerScene:a=>o.scenes.push(a),registerPanel:a=>o.panels.push(a),registerRoute:a=>o.routes.push(a)};return t.setup(s),o})}var u=class{constructor(n){this.container=n;}container;hosts=new Map;active=new Set;ensureMounted(n){let t=this.hosts.get(n);return t||(t=document.createElement("div"),Object.assign(t.style,{position:"absolute",inset:"0"}),this.container.appendChild(t),this.hosts.set(n,t),n.mount({host:t})),t}setActive(n){let t=new Set(n);for(let o of this.active){if(t.has(o))continue;o.suspend?.();let s=this.hosts.get(o);s&&(s.style.display="none");}for(let o of t){if(this.active.has(o))continue;let s=this.ensureMounted(o);s.style.display="block",o.activate?.();}this.active=t;}destroy(){for(let[n,t]of this.hosts)n.destroy(),t.remove();this.hosts.clear(),this.active.clear();}};function E({registrations:r}){let n=react.useRef(null),t=react.useRef(null),o=react.useMemo(()=>r.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),[r]),[s,a]=react.useState(()=>o[0]?.id??null);react.useEffect(()=>{s!==null&&o.some(e=>e.id===s)||a(o[0]?.id??null);},[o,s]);let c=react.useMemo(()=>o.find(e=>e.id===s)?.moduleId??null,[o,s]);react.useEffect(()=>{let e=n.current;if(!e)return;let i=t.current??=new u(e),y=r.find(R=>R.module.id===c)?.scenes??[];i.setActive(y);},[r,c]),react.useEffect(()=>()=>{t.current?.destroy(),t.current=null;},[]);let v=react.useMemo(()=>r.flatMap(e=>e.panels.filter(i=>i.activeOnly===false||e.module.id===c).map(i=>{let y=i.component;return {key:`${e.module.id}:${i.id}`,slot:i.slot,order:i.order??0,moduleId:e.module.id,component:jsxRuntime.jsx(y,{})}})).sort((e,i)=>e.order-i.order),[r,c]),d=e=>v.filter(i=>i.slot===e),p=r.length>0;return jsxRuntime.jsxs("div",{style:w,children:[jsxRuntime.jsx("div",{ref:n,style:z}),jsxRuntime.jsx("div",{style:A,children:d("overlay").map(e=>jsxRuntime.jsx("div",{style:m,children:e.component},e.key))}),jsxRuntime.jsx("div",{style:B,children:d("hud").map(e=>jsxRuntime.jsx("div",{style:m,children:e.component},e.key))}),jsxRuntime.jsx("div",{style:L,children:d("sidebar").map(e=>jsxRuntime.jsx("div",{style:m,children:e.component},e.key))}),o.length>1&&jsxRuntime.jsx("nav",{style:D,children:o.map(e=>jsxRuntime.jsxs("button",{type:"button",onClick:()=>a(e.id),style:e.id===s?T:P,children:[e.icon?`${e.icon} `:"",e.label]},e.id))}),d("modal").length>0&&jsxRuntime.jsx("div",{style:G,children:d("modal").map(e=>jsxRuntime.jsx("div",{style:m,children:e.component},e.key))}),!p&&jsxRuntime.jsx(H,{})]})}function H(){return jsxRuntime.jsxs("div",{style:N,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 w={position:"absolute",inset:0,overflow:"hidden",color:"#fff",fontFamily:"system-ui, sans-serif"},z={position:"absolute",inset:0,zIndex:0},A={position:"absolute",inset:0,zIndex:1,pointerEvents:"none"},B={position:"absolute",top:0,left:0,right:0,zIndex:2,display:"flex",gap:12,padding:16,pointerEvents:"none"},L={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"},D={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"},P={border:"none",borderRadius:10,padding:"8px 16px",fontWeight:700,fontSize:14,color:"#cfc9ee",background:"transparent",cursor:"pointer"},T={...P,color:"#fff",background:"#6c5ce7"},G={position:"absolute",inset:0,zIndex:4,display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(0,0,0,0.5)",pointerEvents:"none"},m={pointerEvents:"auto"},N={position:"absolute",inset:0,zIndex:1,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",padding:24};function $(r){let{container:n,client:t,modules:o}=r;n.style.position="relative";let s=document.createElement("div");Object.assign(s.style,{position:"absolute",inset:"0",zIndex:"0",pointerEvents:"none"});let a=document.createElement("div");Object.assign(a.style,{position:"absolute",inset:"0",zIndex:"1"}),n.append(s,a);let c=S(),v=g(s),d=h(o,{client:t,events:c,surface:v}),p=client.createRoot(a);return p.render(jsxRuntime.jsx(react$1.IDosGamesProvider,{client:t,children:jsxRuntime.jsx(react$1.StatusProvider,{children:jsxRuntime.jsx(E,{registrations:d})})})),{unmount(){p.unmount(),s.remove(),a.remove();}}}exports.HostShell=E;exports.SceneStage=u;exports.createSharedEventBus=S;exports.createSurfaceAllocator=g;exports.mountHost=$;exports.runModules=h;
+'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;

package/dist/index.d.cts

@@ -1,13 +1,44 @@
-import { IDosGamesClient, Module, EngineScene, UiPanel, RouteEntry, SharedEventBus, SurfaceAllocator } from '@idosgames/module-sdk';
+import { IDosGamesClient, Module, SharedEventBus, SurfaceAllocator, EngineScene, UiPanel, RouteEntry } from '@idosgames/module-sdk';
 import { ReactNode } from 'react';
 
+/** What a login screen receives from the host. */
+interface LoginScreenProps {
+    /** The (not yet authenticated) shared client. Call any `client.auth.login*` method on it. */
+    client: IDosGamesClient;
+    /** Call after a login succeeds to enter the game. */
+    onAuthenticated(): void;
+}
+type RenderLogin = (props: LoginScreenProps) => ReactNode;
+/**
+ * The Login ↔ Main gate — the analog of the Unity SDK's two scenes.
+ *
+ * It lives in the host runtime rather than in a project or a feature module, on purpose:
+ *
+ *  - Modules receive an ALREADY-AUTHENTICATED client (see `ModuleContext`), and are installed only
+ *    once that is true. A login module would be a cycle — you would need modules running to render
+ *    the screen that lets you get a session.
+ *  - Getting this wrong is expensive and silent (modules mounted before auth, a dead session never
+ *    re-gated), so the state machine is not something each project should re-implement. What a game
+ *    genuinely wants to own is how the login screen LOOKS — that is the `renderLogin` prop.
+ */
+declare function AuthGate(props: {
+    client: IDosGamesClient;
+    modules: readonly Module[];
+    events: SharedEventBus;
+    surface: SurfaceAllocator;
+    renderLogin: RenderLogin;
+}): ReactNode;
+
 interface HostHandle {
     unmount(): void;
 }
 /**
- * Mounts the host shell into `container` with the given modules, all driven by one shared,
- * already-authenticated SDK client. This is the composable-module analog of the old per-template
- * `mountBoardGame` — except the app owns it and the games are plugged in as modules.
+ * Mounts the host into `container`: the Login ↔ Main gate, and behind it the module shell, all
+ * driven by one shared SDK client.
+ *
+ * The client is handed over NOT yet authenticated — the host signs in. Callers must not log in
+ * first: the gate replays the previous session itself (`autoLogin`) and shows the login screen when
+ * there is nothing to replay, which is also what makes "switch account" and a dead session work.
  *
  * DOM layout inside `container`:
  *   container (position: relative)
@@ -18,8 +49,23 @@ declare function mountHost(options: {
     container: HTMLElement;
     client: IDosGamesClient;
     modules: readonly Module[];
+    /**
+     * The Login scene's content. Optional so a project that deleted its screen still boots with a
+     * usable one; games are expected to pass their own (see the host template's LoginScreen).
+     */
+    renderLogin?: RenderLogin;
 }): HostHandle;
 
+/**
+ * Last-resort login screen, used only when the host was mounted without a `renderLogin`.
+ *
+ * Deliberately plain and guest-only: a game's real login screen belongs in the project (branding,
+ * which providers it offers, art), and lives in the host template as `src/LoginScreen.tsx`. This
+ * one exists so a project that deleted or broke its screen still boots into something a player can
+ * get past, instead of a blank page.
+ */
+declare function DefaultLoginScreen({ client, onAuthenticated, }: LoginScreenProps): ReactNode;
+
 interface ModuleRegistration {
     module: Module;
     scenes: EngineScene[];
@@ -58,4 +104,4 @@ declare function createSharedEventBus(): SharedEventBus;
 /** Creates an allocator whose surfaces are appended to `layer`. */
 declare function createSurfaceAllocator(layer: HTMLElement): SurfaceAllocator;
 
-export { type HostHandle, HostShell, type ModuleRegistration, SceneStage, type SharedServices, createSharedEventBus, createSurfaceAllocator, mountHost, runModules };
+export { AuthGate, DefaultLoginScreen, type HostHandle, HostShell, type LoginScreenProps, type ModuleRegistration, type RenderLogin, SceneStage, type SharedServices, createSharedEventBus, createSurfaceAllocator, mountHost, runModules };

package/dist/index.d.ts

@@ -1,13 +1,44 @@
-import { IDosGamesClient, Module, EngineScene, UiPanel, RouteEntry, SharedEventBus, SurfaceAllocator } from '@idosgames/module-sdk';
+import { IDosGamesClient, Module, SharedEventBus, SurfaceAllocator, EngineScene, UiPanel, RouteEntry } from '@idosgames/module-sdk';
 import { ReactNode } from 'react';
 
+/** What a login screen receives from the host. */
+interface LoginScreenProps {
+    /** The (not yet authenticated) shared client. Call any `client.auth.login*` method on it. */
+    client: IDosGamesClient;
+    /** Call after a login succeeds to enter the game. */
+    onAuthenticated(): void;
+}
+type RenderLogin = (props: LoginScreenProps) => ReactNode;
+/**
+ * The Login ↔ Main gate — the analog of the Unity SDK's two scenes.
+ *
+ * It lives in the host runtime rather than in a project or a feature module, on purpose:
+ *
+ *  - Modules receive an ALREADY-AUTHENTICATED client (see `ModuleContext`), and are installed only
+ *    once that is true. A login module would be a cycle — you would need modules running to render
+ *    the screen that lets you get a session.
+ *  - Getting this wrong is expensive and silent (modules mounted before auth, a dead session never
+ *    re-gated), so the state machine is not something each project should re-implement. What a game
+ *    genuinely wants to own is how the login screen LOOKS — that is the `renderLogin` prop.
+ */
+declare function AuthGate(props: {
+    client: IDosGamesClient;
+    modules: readonly Module[];
+    events: SharedEventBus;
+    surface: SurfaceAllocator;
+    renderLogin: RenderLogin;
+}): ReactNode;
+
 interface HostHandle {
     unmount(): void;
 }
 /**
- * Mounts the host shell into `container` with the given modules, all driven by one shared,
- * already-authenticated SDK client. This is the composable-module analog of the old per-template
- * `mountBoardGame` — except the app owns it and the games are plugged in as modules.
+ * Mounts the host into `container`: the Login ↔ Main gate, and behind it the module shell, all
+ * driven by one shared SDK client.
+ *
+ * The client is handed over NOT yet authenticated — the host signs in. Callers must not log in
+ * first: the gate replays the previous session itself (`autoLogin`) and shows the login screen when
+ * there is nothing to replay, which is also what makes "switch account" and a dead session work.
  *
  * DOM layout inside `container`:
  *   container (position: relative)
@@ -18,8 +49,23 @@ declare function mountHost(options: {
     container: HTMLElement;
     client: IDosGamesClient;
     modules: readonly Module[];
+    /**
+     * The Login scene's content. Optional so a project that deleted its screen still boots with a
+     * usable one; games are expected to pass their own (see the host template's LoginScreen).
+     */
+    renderLogin?: RenderLogin;
 }): HostHandle;
 
+/**
+ * Last-resort login screen, used only when the host was mounted without a `renderLogin`.
+ *
+ * Deliberately plain and guest-only: a game's real login screen belongs in the project (branding,
+ * which providers it offers, art), and lives in the host template as `src/LoginScreen.tsx`. This
+ * one exists so a project that deleted or broke its screen still boots into something a player can
+ * get past, instead of a blank page.
+ */
+declare function DefaultLoginScreen({ client, onAuthenticated, }: LoginScreenProps): ReactNode;
+
 interface ModuleRegistration {
     module: Module;
     scenes: EngineScene[];
@@ -58,4 +104,4 @@ declare function createSharedEventBus(): SharedEventBus;
 /** Creates an allocator whose surfaces are appended to `layer`. */
 declare function createSurfaceAllocator(layer: HTMLElement): SurfaceAllocator;
 
-export { type HostHandle, HostShell, type ModuleRegistration, SceneStage, type SharedServices, createSharedEventBus, createSurfaceAllocator, mountHost, runModules };
+export { AuthGate, DefaultLoginScreen, type HostHandle, HostShell, type LoginScreenProps, type ModuleRegistration, type RenderLogin, SceneStage, type SharedServices, createSharedEventBus, createSurfaceAllocator, mountHost, runModules };

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 {jsx,jsxs}from'react/jsx-runtime';function S(){let r=new Map;return {emit(n,t){let o=r.get(n);if(o)for(let s of [...o])s(t);},on(n,t){let o=t,s=r.get(n);return s||(s=new Set,r.set(n,s)),s.add(o),()=>{s.delete(o),s.size===0&&r.delete(n);}}}}var k={position:"absolute",inset:"0"};function g(r){return {request(n){let t=document.createElement("div");return t.dataset.surface=n,Object.assign(t.style,k),t.style.pointerEvents=n==="fullbleed-canvas"?"auto":"none",r.appendChild(t),{host:t,release(){t.remove();}}}}}function h(r,n){return r.map(t=>{let o={module:t,scenes:[],panels:[],routes:[]},s={client:n.client,events:n.events,surface:n.surface,registerScene:a=>o.scenes.push(a),registerPanel:a=>o.panels.push(a),registerRoute:a=>o.routes.push(a)};return t.setup(s),o})}var u=class{constructor(n){this.container=n;}container;hosts=new Map;active=new Set;ensureMounted(n){let t=this.hosts.get(n);return t||(t=document.createElement("div"),Object.assign(t.style,{position:"absolute",inset:"0"}),this.container.appendChild(t),this.hosts.set(n,t),n.mount({host:t})),t}setActive(n){let t=new Set(n);for(let o of this.active){if(t.has(o))continue;o.suspend?.();let s=this.hosts.get(o);s&&(s.style.display="none");}for(let o of t){if(this.active.has(o))continue;let s=this.ensureMounted(o);s.style.display="block",o.activate?.();}this.active=t;}destroy(){for(let[n,t]of this.hosts)n.destroy(),t.remove();this.hosts.clear(),this.active.clear();}};function E({registrations:r}){let n=useRef(null),t=useRef(null),o=useMemo(()=>r.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),[r]),[s,a]=useState(()=>o[0]?.id??null);useEffect(()=>{s!==null&&o.some(e=>e.id===s)||a(o[0]?.id??null);},[o,s]);let c=useMemo(()=>o.find(e=>e.id===s)?.moduleId??null,[o,s]);useEffect(()=>{let e=n.current;if(!e)return;let i=t.current??=new u(e),y=r.find(R=>R.module.id===c)?.scenes??[];i.setActive(y);},[r,c]),useEffect(()=>()=>{t.current?.destroy(),t.current=null;},[]);let v=useMemo(()=>r.flatMap(e=>e.panels.filter(i=>i.activeOnly===false||e.module.id===c).map(i=>{let y=i.component;return {key:`${e.module.id}:${i.id}`,slot:i.slot,order:i.order??0,moduleId:e.module.id,component:jsx(y,{})}})).sort((e,i)=>e.order-i.order),[r,c]),d=e=>v.filter(i=>i.slot===e),p=r.length>0;return jsxs("div",{style:w,children:[jsx("div",{ref:n,style:z}),jsx("div",{style:A,children:d("overlay").map(e=>jsx("div",{style:m,children:e.component},e.key))}),jsx("div",{style:B,children:d("hud").map(e=>jsx("div",{style:m,children:e.component},e.key))}),jsx("div",{style:L,children:d("sidebar").map(e=>jsx("div",{style:m,children:e.component},e.key))}),o.length>1&&jsx("nav",{style:D,children:o.map(e=>jsxs("button",{type:"button",onClick:()=>a(e.id),style:e.id===s?T:P,children:[e.icon?`${e.icon} `:"",e.label]},e.id))}),d("modal").length>0&&jsx("div",{style:G,children:d("modal").map(e=>jsx("div",{style:m,children:e.component},e.key))}),!p&&jsx(H,{})]})}function H(){return jsxs("div",{style:N,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 w={position:"absolute",inset:0,overflow:"hidden",color:"#fff",fontFamily:"system-ui, sans-serif"},z={position:"absolute",inset:0,zIndex:0},A={position:"absolute",inset:0,zIndex:1,pointerEvents:"none"},B={position:"absolute",top:0,left:0,right:0,zIndex:2,display:"flex",gap:12,padding:16,pointerEvents:"none"},L={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"},D={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"},P={border:"none",borderRadius:10,padding:"8px 16px",fontWeight:700,fontSize:14,color:"#cfc9ee",background:"transparent",cursor:"pointer"},T={...P,color:"#fff",background:"#6c5ce7"},G={position:"absolute",inset:0,zIndex:4,display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(0,0,0,0.5)",pointerEvents:"none"},m={pointerEvents:"auto"},N={position:"absolute",inset:0,zIndex:1,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",padding:24};function $(r){let{container:n,client:t,modules:o}=r;n.style.position="relative";let s=document.createElement("div");Object.assign(s.style,{position:"absolute",inset:"0",zIndex:"0",pointerEvents:"none"});let a=document.createElement("div");Object.assign(a.style,{position:"absolute",inset:"0",zIndex:"1"}),n.append(s,a);let c=S(),v=g(s),d=h(o,{client:t,events:c,surface:v}),p=createRoot(a);return p.render(jsx(IDosGamesProvider,{client:t,children:jsx(StatusProvider,{children:jsx(E,{registrations:d})})})),{unmount(){p.unmount(),s.remove(),a.remove();}}}export{E as HostShell,u as SceneStage,S as createSharedEventBus,g as createSurfaceAllocator,$ as mountHost,h 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 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};

package/package.json

@@ -1,64 +1,64 @@
-{
-  "name": "@idosgames/app-shell",
-  "version": "0.1.0",
-  "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.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"
+  }
+}