@machinemetrics/mm-react-embeddable 2.0.0-6 → 2.0.0-7

package/README.md

@@ -2,6 +2,16 @@
 
 Components and hooks for embedding mm-apps into an interface. Primarily used for sandbox testing the creation of custom dashboard widgets.
 
+## Host readiness (`ready`, required)
+
+`MMEmbeddableZoneProvider` takes a required boolean `ready`: true once the host holds the
+bearer its `credentialBroker` sends. Until then every `MMEmbeddableZone` keeps its slot but
+mounts no iframe, so the first broker call always carries a token. A host that omits the prop
+is treated as not ready and gets a one-time `alert` plus a console error — failing closed beats
+racing the broker against token hydration (a guest that mounted before the host's token
+arrived got a synthetic `invalid_token`, fell through with no credential, and rendered blank
+until refresh). Hosts on mm-react-tools pass `ready={Boolean(useCredential('api'))}`.
+
 ## Consent UI
 
 The library ships no consent UI. `useEmbeddedAuthorizations()` exposes the pending

package/dist/mm-react-embeddable.cjs.js

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),Re=require("prop-types"),ke=require("styled-components"),re=r=>r&&r.__esModule?r:{default:r},L=re(t),R=re(Re),oe=re(ke),G=t.createContext(null),Y=t.createContext({pending:[],authorize:()=>{},approve:()=>{},complete:()=>{},dismiss:()=>{},originEpochs:{},credentials:{},unsupported:{}}),ie="access_token",ee=r=>r?r.kind?r:r.accessToken?{kind:ie,accessToken:r.accessToken,expiresAt:r.expiresAt||null}:null:null,Ce=60,Te=120,_e=new Set(["host_not_allowed","unbound_host_bound_guest","invalid_token","provider_unavailable"]),Q=typeof window!="undefined"&&window.location.protocol==="https:",we=8e3,V=r=>{try{return new URL(r).origin}catch{return null}},ue=(r,o)=>{const i=o==null?void 0:o.origin;return!i||V(r==null?void 0:r.authUrl)!==i?null:i},ce=r=>{if(!r||/^\d{1,3}(?:\.\d{1,3}){3}$/.test(r)||r.includes(":"))return r;const o=r.split(".");return o.length<=2?r:o.slice(-2).join(".")},te=(r,o)=>{try{const i=new URL(r),f=new URL(o);return i.protocol!==f.protocol?!0:ce(i.hostname)!==ce(f.hostname)}catch{return!0}},ae=(r,{onBlocked:o,onClosed:i})=>{const f=window.open(r.authUrl,"mm-embed-auth","popup,width=600,height=700");if(!f)return o(),()=>{};const b=setInterval(()=>{f.closed&&(clearInterval(b),i())},1e3);return()=>clearInterval(b)},le=({children:r,launcher:o,broker:i})=>{const f=t.useContext(G),[b,m]=t.useState({}),[D,k]=t.useState({}),[x,A]=t.useState({}),[P,O]=t.useState({}),H=t.useRef(x);H.current=x;const E=t.useRef(b);E.current=b;const z=t.useRef(null),N=t.useRef({}),I=t.useRef({}),Z=t.useRef({}),$=t.useRef(i);$.current=i;const T=t.useCallback(e=>{const n=I.current[e];if(!n)return;const s=a=>!a[e]||a[e].clientId?a:{...a,[e]:{...a[e],clientId:n}};m(s),O(s)},[]),c=t.useCallback((e,n)=>{e&&(O(s=>s[e]?s:{...s,[e]:{origin:e,reason:n,clientId:I.current[e]||null}}),T(e))},[T]),l=t.useCallback((e,{v2:n=!1,origin:s=null}={})=>{s&&(n&&H.current[s]||(m(a=>a[s]?a:{...a,[s]:{origin:s,authUrl:e.authUrl,silentUrl:e.silentUrl||null,status:n&&$.current?"broker":n&&e.silentUrl&&Q?"silent":"interactive",v2:n,scope:e.scope||null,acceptsCredentials:Z.current[s]||null,consent:null,error:null,clientId:e.clientId||I.current[s]||null,popupBlocked:!1}}),T(s)))},[T]),u=t.useRef({}),d=t.useCallback(e=>{u.current[e]&&(clearTimeout(u.current[e]),delete u.current[e])},[]),p=t.useCallback(e=>{d(e),m(n=>{if(!n[e])return n;const s={...n};return delete s[e],s})},[d]),h=t.useCallback(e=>{e&&(p(e),k(n=>({...n,[e]:(n[e]||0)+1})))},[p]),M=t.useCallback(e=>{m(n=>!n[e]||n[e].status==="interactive"?n:{...n,[e]:{...n[e],status:"interactive"}})},[]),y=t.useCallback(e=>{p(e.origin)},[p]),g=t.useCallback((e,n)=>{const s=ue(e,n);if(s){if(te(s,window.location.origin)){c(s,"cross-site-legacy");return}l(e,{origin:s})}},[l,c]);t.useEffect(()=>{if(!f)return;const e=[f.addListener("*","init",(n,s)=>{s!=null&&s.origin&&(n!=null&&n.clientId)&&(I.current[s.origin]=n.clientId,T(s.origin)),s!=null&&s.origin&&Array.isArray(n==null?void 0:n.acceptsCredentials)?Z.current[s.origin]=n.acceptsCredentials:s!=null&&s.origin&&te(s.origin,window.location.origin)&&c(s.origin,"cross-site-legacy")}),f.addListener("*","authorize",g),f.addListener("*","login",g),f.addListener("*","credential-request",(n,s)=>l(n,{v2:!0,origin:ue(n,s)}))];return()=>e.forEach(n=>n())},[f,g,l,T,c]),t.useEffect(()=>{const e=n=>{const s=n==null?void 0:n.data;if(!s||s.type!=="authorized"&&s.type!=="authorize-failed")return;const a=V(s.authUrl);if(!(!a||n.origin!==a)){if(s.type==="authorized"){if(s.accessToken){if(!E.current[a])return;A(U=>({...U,[a]:ee({accessToken:s.accessToken})})),p(a)}else h(a);return}M(a)}};return window.addEventListener("message",e),()=>window.removeEventListener("message",e)},[p,h,M]);const F=t.useCallback((e,n)=>{const s=e==null?void 0:e.origin,a=ee(n);!s||!a||(A(U=>({...U,[s]:a})),p(s))},[p]),S=t.useCallback((e,n)=>{m(s=>s[e]?{...s,[e]:{...s[e],...n}}:s)},[]),_=t.useRef({}),w=t.useCallback(async(e,{approve:n}={})=>{const s=$.current,{origin:a}=e;let U;try{U=await s({origin:a,clientId:e.clientId,scope:e.scope,authUrl:e.authUrl},{approve:n})}catch{n?S(a,{error:{reason:"broker_unavailable"}}):S(a,{status:e.silentUrl&&Q?"silent":"interactive"});return}const se=U==null?void 0:U.status,B=(U==null?void 0:U.body)||{};if(se===200&&B.credential){F(e,B.credential);return}if(se===409&&B.consentRequired){S(a,{status:"interactive",consent:{client:B.client||null,stepUp:!!B.stepUp,scope:B.scope||e.scope},error:null});return}const X=B.error||"broker_error";if(!n&&_e.has(X)){S(a,{status:e.silentUrl&&Q?"silent":"interactive"});return}if(n&&X==="consent_denied"){S(a,{error:null});return}if(X==="rate_limited"&&!e.rateLimitRetried){const J=Math.min(Number(B.retryAfter)>0?Number(B.retryAfter):Ce,Te),ge={...e,rateLimitRetried:!0};d(a),u.current[a]=setTimeout(()=>{delete u.current[a],_.current[a]=!0,W.current(ge,{approve:n}).finally(()=>{delete _.current[a]})},J*1e3),S(a,{rateLimitRetried:!0});return}p(a),O(J=>({...J,[a]:{origin:a,reason:`broker:${X}`,detail:U||null,clientId:e.clientId||I.current[a]||null}}))},[F,S,p,d]),W=t.useRef(w);W.current=w,t.useEffect(()=>{Object.values(b).forEach(e=>{e.status!=="broker"||_.current[e.origin]||u.current[e.origin]||(_.current[e.origin]=!0,w(e).finally(()=>{delete _.current[e.origin]}))})},[b,w]);const v=t.useCallback(e=>!$.current||!(e!=null&&e.consent)?Promise.resolve():w(e,{approve:!0}),[w]);t.useEffect(()=>{const e=N.current;Object.values(b).forEach(n=>{n.status==="silent"&&!e[n.origin]&&(e[n.origin]=setTimeout(()=>{delete e[n.origin],M(n.origin)},we))}),Object.keys(e).forEach(n=>{(!b[n]||b[n].status!=="silent")&&(clearTimeout(e[n]),delete e[n])})},[b,M]),t.useEffect(()=>()=>{z.current&&z.current(),Object.values(N.current).forEach(clearTimeout),Object.values(u.current).forEach(clearTimeout)},[]);const j=t.useCallback(e=>{z.current&&(z.current(),z.current=null);const n=o||ae;z.current=n(e,{onBlocked:()=>{m(s=>s[e.origin]?{...s,[e.origin]:{...s[e.origin],popupBlocked:!0}}:s)},onClosed:()=>{if(e.v2){Q&&m(s=>!s[e.origin]||!s[e.origin].silentUrl?s:{...s,[e.origin]:{...s[e.origin],status:"silent"}});return}h(e.origin)}})},[o,h]),C={pending:Object.values(b).filter(e=>e.status==="interactive"),authorize:j,approve:v,complete:F,dismiss:y,originEpochs:D,credentials:x,unsupported:P},q=Object.values(b).filter(e=>e.status==="silent"&&e.silentUrl);return L.default.createElement(Y.Provider,{value:C},r,q.map(e=>L.default.createElement("iframe",{key:`mm-silent-auth-${e.origin}`,src:e.silentUrl,title:`MachineMetrics silent authorization (${e.origin})`,"aria-hidden":"true",tabIndex:-1,style:{display:"none"}})))};le.propTypes={children:R.default.node,launcher:R.default.func,broker:R.default.func};const Ie=()=>t.useContext(Y),de=r=>{const{originEpochs:o}=t.useContext(Y),i=V(r);return i&&o[i]||0},fe=r=>{const{credentials:o}=t.useContext(Y),i=V(r);return i&&o[i]||null},pe=r=>{const{unsupported:o}=t.useContext(Y),i=V(r);return i&&o[i]||null},be=({children:r,authorizationLauncher:o,credentialBroker:i})=>{const[f,b]=t.useState({}),[m,D]=t.useState({}),k=t.useRef({}),x=t.useRef({}),A=t.useRef({}),P=t.useCallback((c,l)=>{var u;return!!((u=A.current[c])!=null&&u.has(l))},[]),O=t.useCallback((c,l,u)=>{b(d=>({...d,[c]:{origin:l,frameRef:u}}))},[]),H=t.useCallback(c=>{b(l=>{const u={...l};return delete u[c],u}),D(l=>{const u={...l};return delete u[c],u}),delete A.current[c]},[]);t.useEffect(()=>{const c=(u=[],d,p)=>{u.forEach(h=>h(d,p))},l=u=>{var F,S,_,w,W,v,j;if(!((F=u==null?void 0:u.data)!=null&&F.instanceId))return;const{instanceId:d,type:p}=u.data,h=f[d],M=(_=(S=h==null?void 0:h.frameRef)==null?void 0:S.current)==null?void 0:_.contentWindow;if(!M||u.source!==M||u.origin!==h.origin)return;const y={origin:u.origin},g=k.current;if(p==="response"){const{callbackId:C,response:q,error:e}=u.data,n=x.current[C];n&&(n(q,e),delete x.current[C]);return}if(p==="mark-registered"){const{requestType:C}=u.data;A.current[d]||(A.current[d]=new Set),A.current[d].add(C);return}p==="ready"&&D(C=>({...C,[d]:!0})),c((w=g[d])==null?void 0:w[p],u.data,y),c((W=g["*"])==null?void 0:W[p],u.data,y),c((v=g[d])==null?void 0:v["*"],u.data,y),c((j=g["*"])==null?void 0:j["*"],u.data,y)};return window.addEventListener("message",l),()=>{window.removeEventListener("message",l)}},[f]);const E=t.useCallback((c,l,u)=>{var p,h;const d=f[c];if(!d){console.warn(`Origin not set for id: ${c}. Unable to send message.`);return}(h=(p=d==null?void 0:d.frameRef)==null?void 0:p.current)!=null&&h.contentWindow&&d.frameRef.current.contentWindow.postMessage({type:l,...u,instanceId:c},d.origin)},[f]),z=t.useRef(0),N=t.useCallback(()=>`${Date.now()}-${++z.current}`,[]),I=t.useCallback(async(c,l,u={})=>new Promise((d,p)=>{const h=N(),M=(y,g)=>{delete x.current[h],g?p(g):d(y)};x.current[h]=M,E(c,"request",{callbackId:h,requestType:l,data:u})}),[E]),Z=t.useCallback((c,l)=>{E(c,"load-options",l)},[E]),$=t.useCallback((c,l)=>{E(c,"validate",l)},[E]),T=t.useMemo(()=>({registerFrame:O,unregisterFrame:H,sendMessage:E,sendRequest:I,loadOptions:Z,validate:$,hasHandler:P,readyFrames:m,addListener:(c,l,u)=>(k.current[c]||(k.current[c]={}),k.current[c][l]||(k.current[c][l]=[]),k.current[c][l].push(u),()=>{k.current[c][l]=k.current[c][l].filter(d=>d!==u)})}),[O,H,E,I,Z,$,P,m]);return L.default.createElement(G.Provider,{value:T},L.default.createElement(le,{launcher:o,broker:i},r))},K=(r,o,i)=>{const f=t.useContext(G);if(f===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const b=t.useRef(i);t.useEffect(()=>{b.current=i},[i]),t.useEffect(()=>{if(!(!r||!o)){if(o.startsWith("key:")){const m=o.substring(4);return f.readyFrames[r]&&f.sendMessage(r,"subscribe-key",{keyChord:m}),f.addListener(r,`key-pressed:${m}`,(...k)=>b.current(...k))}return f.addListener(r,o,(...m)=>b.current(...m))}},[f,r,o])};be.propTypes={children:R.default.node.isRequired,authorizationLauncher:R.default.func,credentialBroker:R.default.func};const ne=oe.default.default||oe.default,Me=1e4,Se="credentials",Ue=(r,o)=>`${r}/mm-embedded-interop?id=${encodeURIComponent(o)}&origin=${encodeURIComponent(window.location.origin)}&caps=${Se}`,Le=ne.iframe`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),ke=require("prop-types"),Ce=require("styled-components"),re=n=>n&&n.__esModule?n:{default:n},A=re(t),E=re(ke),oe=re(Ce),G=t.createContext(null),Y=t.createContext({pending:[],authorize:()=>{},approve:()=>{},complete:()=>{},dismiss:()=>{},originEpochs:{},credentials:{},unsupported:{}}),ae="access_token",ee=n=>n?n.kind?n:n.accessToken?{kind:ae,accessToken:n.accessToken,expiresAt:n.expiresAt||null}:null:null,Te=60,we=120,_e=new Set(["host_not_allowed","unbound_host_bound_guest","invalid_token","provider_unavailable"]),J=typeof window!="undefined"&&window.location.protocol==="https:",Ie=8e3,Q=n=>{try{return new URL(n).origin}catch{return null}},ue=(n,o)=>{const i=o==null?void 0:o.origin;return!i||Q(n==null?void 0:n.authUrl)!==i?null:i},ce=n=>{if(!n||/^\d{1,3}(?:\.\d{1,3}){3}$/.test(n)||n.includes(":"))return n;const o=n.split(".");return o.length<=2?n:o.slice(-2).join(".")},te=(n,o)=>{try{const i=new URL(n),f=new URL(o);return i.protocol!==f.protocol?!0:ce(i.hostname)!==ce(f.hostname)}catch{return!0}},le=(n,{onBlocked:o,onClosed:i})=>{const f=window.open(n.authUrl,"mm-embed-auth","popup,width=600,height=700");if(!f)return o(),()=>{};const p=setInterval(()=>{f.closed&&(clearInterval(p),i())},1e3);return()=>clearInterval(p)},de=({children:n,launcher:o,broker:i})=>{const f=t.useContext(G),[p,h]=t.useState({}),[y,P]=t.useState({}),[q,B]=t.useState({}),[k,U]=t.useState({}),x=t.useRef(q);x.current=q;const w=t.useRef(p);w.current=p;const L=t.useRef(null),W=t.useRef({}),m=t.useRef({}),H=t.useRef({}),j=t.useRef(i);j.current=i;const _=t.useCallback(e=>{const r=m.current[e];if(!r)return;const s=c=>!c[e]||c[e].clientId?c:{...c,[e]:{...c[e],clientId:r}};h(s),U(s)},[]),I=t.useCallback((e,r)=>{e&&(U(s=>s[e]?s:{...s,[e]:{origin:e,reason:r,clientId:m.current[e]||null}}),_(e))},[_]),z=t.useCallback((e,{v2:r=!1,origin:s=null}={})=>{s&&(r&&x.current[s]||(h(c=>c[s]?c:{...c,[s]:{origin:s,authUrl:e.authUrl,silentUrl:e.silentUrl||null,status:r&&j.current?"broker":r&&e.silentUrl&&J?"silent":"interactive",v2:r,scope:e.scope||null,acceptsCredentials:H.current[s]||null,consent:null,error:null,clientId:e.clientId||m.current[s]||null,popupBlocked:!1}}),_(s)))},[_]),M=t.useRef({}),l=t.useCallback(e=>{M.current[e]&&(clearTimeout(M.current[e]),delete M.current[e])},[]),a=t.useCallback(e=>{l(e),h(r=>{if(!r[e])return r;const s={...r};return delete s[e],s})},[l]),u=t.useCallback(e=>{e&&(a(e),P(r=>({...r,[e]:(r[e]||0)+1})))},[a]),d=t.useCallback(e=>{h(r=>!r[e]||r[e].status==="interactive"?r:{...r,[e]:{...r[e],status:"interactive"}})},[]),R=t.useCallback(e=>{a(e.origin)},[a]),b=t.useCallback((e,r)=>{const s=ue(e,r);if(s){if(te(s,window.location.origin)){I(s,"cross-site-legacy");return}z(e,{origin:s})}},[z,I]);t.useEffect(()=>{if(!f)return;const e=[f.addListener("*","init",(r,s)=>{s!=null&&s.origin&&(r!=null&&r.clientId)&&(m.current[s.origin]=r.clientId,_(s.origin)),s!=null&&s.origin&&Array.isArray(r==null?void 0:r.acceptsCredentials)?H.current[s.origin]=r.acceptsCredentials:s!=null&&s.origin&&te(s.origin,window.location.origin)&&I(s.origin,"cross-site-legacy")}),f.addListener("*","authorize",b),f.addListener("*","login",b),f.addListener("*","credential-request",(r,s)=>z(r,{v2:!0,origin:ue(r,s)}))];return()=>e.forEach(r=>r())},[f,b,z,_,I]),t.useEffect(()=>{const e=r=>{const s=r==null?void 0:r.data;if(!s||s.type!=="authorized"&&s.type!=="authorize-failed")return;const c=Q(s.authUrl);if(!(!c||r.origin!==c)){if(s.type==="authorized"){if(s.accessToken){if(!w.current[c])return;B(T=>({...T,[c]:ee({accessToken:s.accessToken})})),a(c)}else u(c);return}d(c)}};return window.addEventListener("message",e),()=>window.removeEventListener("message",e)},[a,u,d]);const O=t.useCallback((e,r)=>{const s=e==null?void 0:e.origin,c=ee(r);!s||!c||(B(T=>({...T,[s]:c})),a(s))},[a]),g=t.useCallback((e,r)=>{h(s=>s[e]?{...s,[e]:{...s[e],...r}}:s)},[]),C=t.useRef({}),S=t.useCallback(async(e,{approve:r}={})=>{const s=j.current,{origin:c}=e;let T;try{T=await s({origin:c,clientId:e.clientId,scope:e.scope,authUrl:e.authUrl},{approve:r})}catch{r?g(c,{error:{reason:"broker_unavailable"}}):g(c,{status:e.silentUrl&&J?"silent":"interactive"});return}const se=T==null?void 0:T.status,v=(T==null?void 0:T.body)||{};if(se===200&&v.credential){O(e,v.credential);return}if(se===409&&v.consentRequired){g(c,{status:"interactive",consent:{client:v.client||null,stepUp:!!v.stepUp,scope:v.scope||e.scope},error:null});return}const V=v.error||"broker_error";if(!r&&_e.has(V)){g(c,{status:e.silentUrl&&J?"silent":"interactive"});return}if(r&&V==="consent_denied"){g(c,{error:null});return}if(V==="rate_limited"&&!e.rateLimitRetried){const X=Math.min(Number(v.retryAfter)>0?Number(v.retryAfter):Te,we),Re={...e,rateLimitRetried:!0};l(c),M.current[c]=setTimeout(()=>{delete M.current[c],C.current[c]=!0,D.current(Re,{approve:r}).finally(()=>{delete C.current[c]})},X*1e3),g(c,{rateLimitRetried:!0});return}a(c),U(X=>({...X,[c]:{origin:c,reason:`broker:${V}`,detail:T||null,clientId:e.clientId||m.current[c]||null}}))},[O,g,a,l]),D=t.useRef(S);D.current=S,t.useEffect(()=>{Object.values(p).forEach(e=>{e.status!=="broker"||C.current[e.origin]||M.current[e.origin]||(C.current[e.origin]=!0,S(e).finally(()=>{delete C.current[e.origin]}))})},[p,S]);const K=t.useCallback(e=>!j.current||!(e!=null&&e.consent)?Promise.resolve():S(e,{approve:!0}),[S]);t.useEffect(()=>{const e=W.current;Object.values(p).forEach(r=>{r.status==="silent"&&!e[r.origin]&&(e[r.origin]=setTimeout(()=>{delete e[r.origin],d(r.origin)},Ie))}),Object.keys(e).forEach(r=>{(!p[r]||p[r].status!=="silent")&&(clearTimeout(e[r]),delete e[r])})},[p,d]),t.useEffect(()=>()=>{L.current&&L.current(),Object.values(W.current).forEach(clearTimeout),Object.values(M.current).forEach(clearTimeout)},[]);const Z=t.useCallback(e=>{L.current&&(L.current(),L.current=null);const r=o||le;L.current=r(e,{onBlocked:()=>{h(s=>s[e.origin]?{...s,[e.origin]:{...s[e.origin],popupBlocked:!0}}:s)},onClosed:()=>{if(e.v2){J&&h(s=>!s[e.origin]||!s[e.origin].silentUrl?s:{...s,[e.origin]:{...s[e.origin],status:"silent"}});return}u(e.origin)}})},[o,u]),$={pending:Object.values(p).filter(e=>e.status==="interactive"),authorize:Z,approve:K,complete:O,dismiss:R,originEpochs:y,credentials:q,unsupported:k},F=Object.values(p).filter(e=>e.status==="silent"&&e.silentUrl);return A.default.createElement(Y.Provider,{value:$},n,F.map(e=>A.default.createElement("iframe",{key:`mm-silent-auth-${e.origin}`,src:e.silentUrl,title:`MachineMetrics silent authorization (${e.origin})`,"aria-hidden":"true",tabIndex:-1,style:{display:"none"}})))};de.propTypes={children:E.default.node,launcher:E.default.func,broker:E.default.func};const Me=()=>t.useContext(Y),fe=n=>{const{originEpochs:o}=t.useContext(Y),i=Q(n);return i&&o[i]||0},pe=n=>{const{credentials:o}=t.useContext(Y),i=Q(n);return i&&o[i]||null},be=n=>{const{unsupported:o}=t.useContext(Y),i=Q(n);return i&&o[i]||null},ie="MMEmbeddableZoneProvider requires a boolean `ready` prop (true once the host holds the bearer its credentialBroker needs). Embedded apps will not load until it is provided.",he=({children:n,authorizationLauncher:o,credentialBroker:i,ready:f})=>{const p=f===!0,h=t.useRef(!1);t.useEffect(()=>{f!==void 0||h.current||(h.current=!0,console.error(ie),typeof window!="undefined"&&typeof window.alert=="function"&&window.alert(ie))},[f]);const[y,P]=t.useState({}),[q,B]=t.useState({}),k=t.useRef({}),U=t.useRef({}),x=t.useRef({}),w=t.useCallback((l,a)=>{var u;return!!((u=x.current[l])!=null&&u.has(a))},[]),L=t.useCallback((l,a,u)=>{P(d=>({...d,[l]:{origin:a,frameRef:u}}))},[]),W=t.useCallback(l=>{P(a=>{const u={...a};return delete u[l],u}),B(a=>{const u={...a};return delete u[l],u}),delete x.current[l]},[]);t.useEffect(()=>{const l=(u=[],d,R)=>{u.forEach(b=>b(d,R))},a=u=>{var S,D,K,Z,$,F,e;if(!((S=u==null?void 0:u.data)!=null&&S.instanceId))return;const{instanceId:d,type:R}=u.data,b=y[d],O=(K=(D=b==null?void 0:b.frameRef)==null?void 0:D.current)==null?void 0:K.contentWindow;if(!O||u.source!==O||u.origin!==b.origin)return;const g={origin:u.origin},C=k.current;if(R==="response"){const{callbackId:r,response:s,error:c}=u.data,T=U.current[r];T&&(T(s,c),delete U.current[r]);return}if(R==="mark-registered"){const{requestType:r}=u.data;x.current[d]||(x.current[d]=new Set),x.current[d].add(r);return}R==="ready"&&B(r=>({...r,[d]:!0})),l((Z=C[d])==null?void 0:Z[R],u.data,g),l(($=C["*"])==null?void 0:$[R],u.data,g),l((F=C[d])==null?void 0:F["*"],u.data,g),l((e=C["*"])==null?void 0:e["*"],u.data,g)};return window.addEventListener("message",a),()=>{window.removeEventListener("message",a)}},[y]);const m=t.useCallback((l,a,u)=>{var R,b;const d=y[l];if(!d){console.warn(`Origin not set for id: ${l}. Unable to send message.`);return}(b=(R=d==null?void 0:d.frameRef)==null?void 0:R.current)!=null&&b.contentWindow&&d.frameRef.current.contentWindow.postMessage({type:a,...u,instanceId:l},d.origin)},[y]),H=t.useRef(0),j=t.useCallback(()=>`${Date.now()}-${++H.current}`,[]),_=t.useCallback(async(l,a,u={})=>new Promise((d,R)=>{const b=j(),O=(g,C)=>{delete U.current[b],C?R(C):d(g)};U.current[b]=O,m(l,"request",{callbackId:b,requestType:a,data:u})}),[m]),I=t.useCallback((l,a)=>{m(l,"load-options",a)},[m]),z=t.useCallback((l,a)=>{m(l,"validate",a)},[m]),M=t.useMemo(()=>({registerFrame:L,unregisterFrame:W,sendMessage:m,sendRequest:_,loadOptions:I,validate:z,hasHandler:w,readyFrames:q,ready:p,addListener:(l,a,u)=>(k.current[l]||(k.current[l]={}),k.current[l][a]||(k.current[l][a]=[]),k.current[l][a].push(u),()=>{k.current[l][a]=k.current[l][a].filter(d=>d!==u)})}),[L,W,m,_,I,z,w,q,p]);return A.default.createElement(G.Provider,{value:M},A.default.createElement(de,{launcher:o,broker:i},n))},N=(n,o,i)=>{const f=t.useContext(G);if(f===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const p=t.useRef(i);t.useEffect(()=>{p.current=i},[i]),t.useEffect(()=>{if(!(!n||!o)){if(o.startsWith("key:")){const h=o.substring(4);return f.readyFrames[n]&&f.sendMessage(n,"subscribe-key",{keyChord:h}),f.addListener(n,`key-pressed:${h}`,(...P)=>p.current(...P))}return f.addListener(n,o,(...h)=>p.current(...h))}},[f,n,o])};he.propTypes={children:E.default.node.isRequired,ready:E.default.bool.isRequired,authorizationLauncher:E.default.func,credentialBroker:E.default.func};const ne=oe.default.default||oe.default,Se=1e4,Ue="credentials",Le=(n,o)=>`${n}/mm-embedded-interop?id=${encodeURIComponent(o)}&origin=${encodeURIComponent(window.location.origin)}&caps=${Ue}`,Ae=ne.iframe`
   width: 100%;
   height: 100%;
   border: none;
-  visibility: ${r=>r.$isReady?"visible":"hidden"};
+  visibility: ${n=>n.$isReady?"visible":"hidden"};
 `,xe=ne.div`
   width: 100%;
   height: 100%;
@@ -16,10 +16,10 @@
   text-align: center;
   color: #555;
   font-size: 14px;
-`,he=r=>{const o=r&&r.origin||"This app",i=r&&r.reason||"";switch(i){case"broker:scope_above_ceiling":return{title:`${o} can’t be authorized here`,detail:"It asks for permissions your role doesn’t have."};case"broker:origin_mismatch":case"broker:unknown_client":return{title:`${o} can’t be authorized here`,detail:"It isn’t registered to run at this address."};case"broker:cross_company_principal":return{title:`${o} can’t be authorized here`,detail:"It can’t be authorized for this account."};default:return i.startsWith("broker:")?{title:`${o} can’t be authorized here`,detail:"Authorization was refused."}:{title:`${o} can’t be embedded here`,detail:"It needs an update to support embedding from a different domain."}}},me=({entry:r})=>{const o=he(r);return L.default.createElement(xe,{"data-reason":r&&r.reason||void 0},L.default.createElement("div",{style:{fontWeight:600}},o.title),L.default.createElement("div",{style:{fontSize:12,color:"#888"}},o.detail))};me.propTypes={entry:R.default.shape({origin:R.default.string,name:R.default.string,reason:R.default.string,detail:R.default.object})};const Ae=ne.div`
+`,Ee=n=>{const o=n&&n.origin||"This app",i=n&&n.reason||"";switch(i){case"broker:scope_above_ceiling":return{title:`${o} can’t be authorized here`,detail:"It asks for permissions your role doesn’t have."};case"broker:origin_mismatch":case"broker:unknown_client":return{title:`${o} can’t be authorized here`,detail:"It isn’t registered to run at this address."};case"broker:cross_company_principal":return{title:`${o} can’t be authorized here`,detail:"It can’t be authorized for this account."};default:return i.startsWith("broker:")?{title:`${o} can’t be authorized here`,detail:"Authorization was refused."}:{title:`${o} can’t be embedded here`,detail:"It needs an update to support embedding from a different domain."}}},me=({entry:n})=>{const o=Ee(n);return A.default.createElement(xe,{"data-reason":n&&n.reason||void 0},A.default.createElement("div",{style:{fontWeight:600}},o.title),A.default.createElement("div",{style:{fontSize:12,color:"#888"}},o.detail))};me.propTypes={entry:E.default.shape({origin:E.default.string,name:E.default.string,reason:E.default.string,detail:E.default.object})};const ze=ne.div`
   height: 100%;
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: center;
-`,ze=()=>L.default.createElement(Ae,null,L.default.createElement("div",{style:{textAlign:"center"}},"This app couldn’t be loaded as an embeddable widget.")),Ee=({id:r,src:o,path:i,onInit:f=()=>{},onTimeout:b,context:m={},params:D={},renderUnsupported:k,renderTimeout:x,...A})=>{if("isConfiguring"in A)return console.error("isConfiguring must be passed via the params prop to MMEmbeddableZone"),null;if("colorMode"in m)return console.error("colorMode must be passed via the params prop to MMEmbeddableZone"),null;if("isFullScreen"in m)return console.error("isFullScreen must be passed via the params prop to MMEmbeddableZone"),null;const P=t.useRef(),[O,H]=t.useState(),[E,z]=t.useState(0),[N,I]=t.useState(!1),[Z,$]=t.useState(!1),T=de(o),c=fe(o),l=pe(o),[u,d]=t.useState(0),[p,h]=t.useState(null),{registerFrame:M,unregisterFrame:y,sendMessage:g}=t.useContext(G),[F,S]=t.useState(),_=t.useRef(),w=t.useRef(b),W=t.useRef(f),v=t.useRef(!1),j=t.useCallback(()=>{v.current=!1,clearTimeout(_.current),z(0),I(!1),$(!1),h(null)},[]);t.useEffect(()=>{(T>0||u>0)&&j()},[T,u,j]),t.useEffect(()=>{w.current=b},[b]),t.useEffect(()=>{W.current=f},[f]),t.useEffect(()=>{E&&g(r,"set-context",{context:{...m}})},[m,r,E]),t.useEffect(()=>{E&&g(r,"set-params",{params:D})},[D,r,E]),t.useEffect(()=>{i!==void 0&&S((i==null?void 0:i.indexOf("/"))===0?i:`/${i}`)},[i]),t.useEffect(()=>{F===void 0||!E||g(r,"navigate",{path:F})},[F,E,r,g]),t.useEffect(()=>{if(!o||!r||!P)return;j();const e=new URL(o);return M(r,e.origin,P),W.current(),H(Ue(e.origin,r)),()=>{y(r)}},[o,r,M,P,j]),t.useEffect(()=>{if(!(!O||v.current))return _.current=setTimeout(()=>{I(!0),w.current&&w.current()},Me),()=>clearTimeout(_.current)},[O,o,T,u]);const C=t.useCallback(()=>{v.current=!0,clearTimeout(_.current),I(!1)},[]);K(r,"init",e=>{C(),Array.isArray(e==null?void 0:e.acceptsCredentials)&&h(e.acceptsCredentials)}),K(r,"authorize",C),K(r,"login",C),K(r,"credential-request",()=>{C(),$(!0)}),t.useEffect(()=>{if(!Z||!c)return;const e=p;if(Array.isArray(e)&&!e.includes(c.kind))return;const n=c.kind==="access_token"?{accessToken:c.accessToken}:{};g(r,"credential",{...n,credential:c})},[Z,c,p,r,g]),K(r,"ready",()=>{C(),z(e=>e+1)});const q=t.useRef();return K(r,"heartbeat",()=>{q.current&&clearTimeout(q.current),q.current=setTimeout(()=>{d(e=>e+1)},6e3)}),t.useEffect(()=>()=>{q.current&&clearTimeout(q.current)},[]),l?k?k(l):L.default.createElement(me,{entry:l}):N&&!E?x?x():L.default.createElement(ze,null):L.default.createElement(Le,{key:`auth-epoch-${T}-frame-${u}`,$isReady:E,ref:P,src:O,...A})};Ee.propTypes={id:R.default.string,src:R.default.string.isRequired,path:R.default.string,onInit:R.default.func,onTimeout:R.default.func,renderUnsupported:R.default.func,renderTimeout:R.default.func};exports.CREDENTIAL_KIND_ACCESS_TOKEN=ie;exports.EmbeddedAuthorizationContext=Y;exports.MMEmbeddableZone=Ee;exports.MMEmbeddableZoneContext=G;exports.MMEmbeddableZoneProvider=be;exports.isCrossSite=te;exports.normalizeCredential=ee;exports.popupAuthorizationLauncher=ae;exports.unsupportedCopy=he;exports.useEmbeddedAuthorizations=Ie;exports.useEmbeddedCredential=fe;exports.useEmbeddedEffect=K;exports.useEmbeddedOriginEpoch=de;exports.useEmbeddedUnsupported=pe;
+`,Oe=()=>A.default.createElement(ze,null,A.default.createElement("div",{style:{textAlign:"center"}},"This app couldn’t be loaded as an embeddable widget.")),ge=({id:n,src:o,path:i,onInit:f=()=>{},onTimeout:p,context:h={},params:y={},renderUnsupported:P,renderTimeout:q,...B})=>{if("isConfiguring"in B)return console.error("isConfiguring must be passed via the params prop to MMEmbeddableZone"),null;if("colorMode"in h)return console.error("colorMode must be passed via the params prop to MMEmbeddableZone"),null;if("isFullScreen"in h)return console.error("isFullScreen must be passed via the params prop to MMEmbeddableZone"),null;const k=t.useRef(),[U,x]=t.useState(),[w,L]=t.useState(0),[W,m]=t.useState(!1),[H,j]=t.useState(!1),_=fe(o),I=pe(o),z=be(o),[M,l]=t.useState(0),[a,u]=t.useState(null),{registerFrame:d,unregisterFrame:R,sendMessage:b,ready:O}=t.useContext(G),[g,C]=t.useState(),S=t.useRef(),D=t.useRef(p),K=t.useRef(f),Z=t.useRef(!1),$=t.useCallback(()=>{Z.current=!1,clearTimeout(S.current),L(0),m(!1),j(!1),u(null)},[]);t.useEffect(()=>{(_>0||M>0)&&$()},[_,M,$]),t.useEffect(()=>{D.current=p},[p]),t.useEffect(()=>{K.current=f},[f]),t.useEffect(()=>{w&&b(n,"set-context",{context:{...h}})},[h,n,w]),t.useEffect(()=>{w&&b(n,"set-params",{params:y})},[y,n,w]),t.useEffect(()=>{i!==void 0&&C((i==null?void 0:i.indexOf("/"))===0?i:`/${i}`)},[i]),t.useEffect(()=>{g===void 0||!w||b(n,"navigate",{path:g})},[g,w,n,b]),t.useEffect(()=>{if(!o||!n||!k)return;if(!O){$(),x(void 0);return}$();const r=new URL(o);return d(n,r.origin,k),K.current(),x(Le(r.origin,n)),()=>{R(n)}},[o,n,O,d,k,$]),t.useEffect(()=>{if(!(!U||Z.current))return S.current=setTimeout(()=>{m(!0),D.current&&D.current()},Se),()=>clearTimeout(S.current)},[U,o,_,M]);const F=t.useCallback(()=>{Z.current=!0,clearTimeout(S.current),m(!1)},[]);N(n,"init",r=>{F(),Array.isArray(r==null?void 0:r.acceptsCredentials)&&u(r.acceptsCredentials)}),N(n,"authorize",F),N(n,"login",F),N(n,"credential-request",()=>{F(),j(!0)}),t.useEffect(()=>{if(!H||!I)return;const r=a;if(Array.isArray(r)&&!r.includes(I.kind))return;const s=I.kind==="access_token"?{accessToken:I.accessToken}:{};b(n,"credential",{...s,credential:I})},[H,I,a,n,b]),N(n,"ready",()=>{F(),L(r=>r+1)});const e=t.useRef();return N(n,"heartbeat",()=>{e.current&&clearTimeout(e.current),e.current=setTimeout(()=>{l(r=>r+1)},6e3)}),t.useEffect(()=>()=>{e.current&&clearTimeout(e.current)},[]),z?P?P(z):A.default.createElement(me,{entry:z}):W&&!w?q?q():A.default.createElement(Oe,null):A.default.createElement(Ae,{key:`auth-epoch-${_}-frame-${M}`,$isReady:w,ref:k,src:U,...B})};ge.propTypes={id:E.default.string,src:E.default.string.isRequired,path:E.default.string,onInit:E.default.func,onTimeout:E.default.func,renderUnsupported:E.default.func,renderTimeout:E.default.func};exports.CREDENTIAL_KIND_ACCESS_TOKEN=ae;exports.EmbeddedAuthorizationContext=Y;exports.MMEmbeddableZone=ge;exports.MMEmbeddableZoneContext=G;exports.MMEmbeddableZoneProvider=he;exports.isCrossSite=te;exports.normalizeCredential=ee;exports.popupAuthorizationLauncher=le;exports.unsupportedCopy=Ee;exports.useEmbeddedAuthorizations=Me;exports.useEmbeddedCredential=pe;exports.useEmbeddedEffect=N;exports.useEmbeddedOriginEpoch=fe;exports.useEmbeddedUnsupported=be;

package/dist/mm-react-embeddable.es.js

@@ -1,7 +1,7 @@
-import x, { createContext as de, useContext as V, useState as M, useRef as g, useCallback as h, useEffect as R, useMemo as me } from "react";
-import k from "prop-types";
+import $, { createContext as fe, useContext as V, useState as O, useRef as m, useCallback as h, useEffect as b, useMemo as ge } from "react";
+import E from "prop-types";
 import ie from "styled-components";
-const ne = de(null), N = de({
+const ne = fe(null), J = fe({
   pending: [],
   authorize: () => {
   },
@@ -14,16 +14,16 @@ const ne = de(null), N = de({
   originEpochs: {},
   credentials: {},
   unsupported: {}
-}), ge = "access_token", ce = (t) => t ? t.kind ? t : t.accessToken ? {
-  kind: ge,
+}), be = "access_token", ce = (t) => t ? t.kind ? t : t.accessToken ? {
+  kind: be,
   accessToken: t.accessToken,
   expiresAt: t.expiresAt || null
-} : null : null, be = 60, Ee = 120, Re = /* @__PURE__ */ new Set([
+} : null : null, Ee = 60, Re = 120, we = /* @__PURE__ */ new Set([
   "host_not_allowed",
   "unbound_host_bound_guest",
   "invalid_token",
   "provider_unavailable"
-]), re = typeof window != "undefined" && window.location.protocol === "https:", Te = 8e3, Q = (t) => {
+]), te = typeof window != "undefined" && window.location.protocol === "https:", Te = 8e3, N = (t) => {
   try {
     return new URL(t).origin;
   } catch {
@@ -31,7 +31,7 @@ const ne = de(null), N = de({
   }
 }, ue = (t, s) => {
   const c = s == null ? void 0 : s.origin;
-  return !c || Q(t == null ? void 0 : t.authUrl) !== c ? null : c;
+  return !c || N(t == null ? void 0 : t.authUrl) !== c ? null : c;
 }, le = (t) => {
   if (!t || /^\d{1,3}(?:\.\d{1,3}){3}$/.test(t) || t.includes(":"))
     return t;
@@ -53,39 +53,39 @@ const ne = de(null), N = de({
   if (!d)
     return s(), () => {
     };
-  const p = setInterval(() => {
-    d.closed && (clearInterval(p), c());
+  const f = setInterval(() => {
+    d.closed && (clearInterval(f), c());
   }, 1e3);
-  return () => clearInterval(p);
-}, fe = ({ children: t, launcher: s, broker: c }) => {
-  const d = V(ne), [p, b] = M({}), [Z, w] = M({}), [$, S] = M({}), [q, y] = M({}), G = g($);
-  G.current = $;
-  const E = g(p);
-  E.current = p;
-  const F = g(null), X = g({}), C = g({}), v = g({}), P = g(c);
-  P.current = c;
-  const _ = h((e) => {
-    const r = C.current[e];
+  return () => clearInterval(f);
+}, pe = ({ children: t, launcher: s, broker: c }) => {
+  const d = V(ne), [f, g] = O({}), [P, B] = O({}), [W, H] = O({}), [k, z] = O({}), y = m(W);
+  y.current = W;
+  const U = m(f);
+  U.current = f;
+  const x = m(null), Y = m({}), R = m({}), G = m({}), v = m(c);
+  v.current = c;
+  const M = h((e) => {
+    const r = R.current[e];
     if (!r)
       return;
-    const n = (u) => !u[e] || u[e].clientId ? u : { ...u, [e]: { ...u[e], clientId: r } };
-    b(n), y(n);
-  }, []), i = h(
+    const n = (i) => !i[e] || i[e].clientId ? i : { ...i, [e]: { ...i[e], clientId: r } };
+    g(n), z(n);
+  }, []), L = h(
     (e, r) => {
-      e && (y((n) => n[e] ? n : {
+      e && (z((n) => n[e] ? n : {
         ...n,
         [e]: {
           origin: e,
           reason: r,
-          clientId: C.current[e] || null
+          clientId: R.current[e] || null
         }
-      }), _(e));
+      }), M(e));
     },
-    [_]
-  ), l = h(
+    [M]
+  ), S = h(
     (e, { v2: r = !1, origin: n = null } = {}) => {
-      n && (r && G.current[n] || (b((u) => u[n] ? u : {
-        ...u,
+      n && (r && y.current[n] || (g((i) => i[n] ? i : {
+        ...i,
         [n]: {
           origin: n,
           authUrl: e.authUrl,
@@ -93,65 +93,65 @@ const ne = de(null), N = de({
           // v2 entries try the invisible silent resolver first — but only on a host that can
           // frame login (https). Otherwise (and for legacy signals) go straight to interactive,
           // so an http host doesn't wait out a silent frame that can never load login.
-          status: r && P.current ? "broker" : r && e.silentUrl && re ? "silent" : "interactive",
+          status: r && v.current ? "broker" : r && e.silentUrl && te ? "silent" : "interactive",
           v2: r,
           // v1.9: the scope the guest asked for; forwarded verbatim to the broker.
           scope: e.scope || null,
-          acceptsCredentials: v.current[n] || null,
+          acceptsCredentials: G.current[n] || null,
           consent: null,
           error: null,
           // clientId from the request payload (v2) or the cached init (legacy);
           // the host resolves the display name from it.
-          clientId: e.clientId || C.current[n] || null,
+          clientId: e.clientId || R.current[n] || null,
           popupBlocked: !1
         }
-      }), _(n)));
+      }), M(n)));
     },
-    [_]
-  ), o = g({}), a = h((e) => {
-    o.current[e] && (clearTimeout(o.current[e]), delete o.current[e]);
-  }, []), f = h(
+    [M]
+  ), C = m({}), l = h((e) => {
+    C.current[e] && (clearTimeout(C.current[e]), delete C.current[e]);
+  }, []), u = h(
     (e) => {
-      a(e), b((r) => {
+      l(e), g((r) => {
         if (!r[e])
           return r;
         const n = { ...r };
         return delete n[e], n;
       });
     },
-    [a]
-  ), m = h(
+    [l]
+  ), o = h(
     (e) => {
-      e && (f(e), w((r) => ({
+      e && (u(e), B((r) => ({
         ...r,
         [e]: (r[e] || 0) + 1
       })));
     },
-    [f]
-  ), A = h((e) => {
-    b((r) => !r[e] || r[e].status === "interactive" ? r : {
+    [u]
+  ), a = h((e) => {
+    g((r) => !r[e] || r[e].status === "interactive" ? r : {
       ...r,
       [e]: { ...r[e], status: "interactive" }
     });
-  }, []), j = h(
+  }, []), T = h(
     (e) => {
-      f(e.origin);
+      u(e.origin);
     },
-    [f]
-  ), T = h(
+    [u]
+  ), p = h(
     (e, r) => {
       const n = ue(e, r);
       if (n) {
         if (ae(n, window.location.origin)) {
-          i(n, "cross-site-legacy");
+          L(n, "cross-site-legacy");
           return;
         }
-        l(e, { origin: n });
+        S(e, { origin: n });
       }
     },
-    [l, i]
+    [S, L]
   );
-  R(() => {
+  b(() => {
     if (!d)
       return;
     const e = [
@@ -162,57 +162,57 @@ const ne = de(null), N = de({
       // clientId is only a lookup key: the host resolves the display name from
       // it, and a broker binds it to the attested origin server-side.
       d.addListener("*", "init", (r, n) => {
-        n != null && n.origin && (r != null && r.clientId) && (C.current[n.origin] = r.clientId, _(n.origin)), n != null && n.origin && Array.isArray(r == null ? void 0 : r.acceptsCredentials) ? v.current[n.origin] = r.acceptsCredentials : n != null && n.origin && ae(n.origin, window.location.origin) && i(n.origin, "cross-site-legacy");
+        n != null && n.origin && (r != null && r.clientId) && (R.current[n.origin] = r.clientId, M(n.origin)), n != null && n.origin && Array.isArray(r == null ? void 0 : r.acceptsCredentials) ? G.current[n.origin] = r.acceptsCredentials : n != null && n.origin && ae(n.origin, window.location.origin) && L(n.origin, "cross-site-legacy");
       }),
-      d.addListener("*", "authorize", T),
-      d.addListener("*", "login", T),
+      d.addListener("*", "authorize", p),
+      d.addListener("*", "login", p),
       d.addListener(
         "*",
         "credential-request",
-        (r, n) => l(r, { v2: !0, origin: ue(r, n) })
+        (r, n) => S(r, { v2: !0, origin: ue(r, n) })
       )
     ];
     return () => e.forEach((r) => r());
-  }, [d, T, l, _, i]), R(() => {
+  }, [d, p, S, M, L]), b(() => {
     const e = (r) => {
       const n = r == null ? void 0 : r.data;
       if (!n || n.type !== "authorized" && n.type !== "authorize-failed")
         return;
-      const u = Q(n.authUrl);
-      if (!(!u || r.origin !== u)) {
+      const i = N(n.authUrl);
+      if (!(!i || r.origin !== i)) {
         if (n.type === "authorized") {
           if (n.accessToken) {
-            if (!E.current[u])
+            if (!U.current[i])
               return;
-            S((z) => ({
-              ...z,
-              [u]: ce({ accessToken: n.accessToken })
-            })), f(u);
+            H((_) => ({
+              ..._,
+              [i]: ce({ accessToken: n.accessToken })
+            })), u(i);
           } else
-            m(u);
+            o(i);
           return;
         }
-        A(u);
+        a(i);
       }
     };
     return window.addEventListener("message", e), () => window.removeEventListener("message", e);
-  }, [f, m, A]);
-  const B = h(
+  }, [u, o, a]);
+  const F = h(
     (e, r) => {
-      const n = e == null ? void 0 : e.origin, u = ce(r);
-      !n || !u || (S((z) => ({ ...z, [n]: u })), f(n));
+      const n = e == null ? void 0 : e.origin, i = ce(r);
+      !n || !i || (H((_) => ({ ..._, [n]: i })), u(n));
     },
-    [f]
-  ), O = h((e, r) => {
-    b((n) => n[e] ? { ...n, [e]: { ...n[e], ...r } } : n);
-  }, []), U = g({}), L = h(
+    [u]
+  ), w = h((e, r) => {
+    g((n) => n[e] ? { ...n, [e]: { ...n[e], ...r } } : n);
+  }, []), I = m({}), A = h(
     async (e, { approve: r } = {}) => {
-      const n = P.current, { origin: u } = e;
-      let z;
+      const n = v.current, { origin: i } = e;
+      let _;
       try {
-        z = await n(
+        _ = await n(
           {
-            origin: u,
+            origin: i,
             clientId: e.clientId,
             scope: e.scope,
             authUrl: e.authUrl
@@ -220,127 +220,127 @@ const ne = de(null), N = de({
           { approve: r }
         );
       } catch {
-        r ? O(u, { error: { reason: "broker_unavailable" } }) : O(u, {
-          status: e.silentUrl && re ? "silent" : "interactive"
+        r ? w(i, { error: { reason: "broker_unavailable" } }) : w(i, {
+          status: e.silentUrl && te ? "silent" : "interactive"
         });
         return;
       }
-      const oe = z == null ? void 0 : z.status, H = (z == null ? void 0 : z.body) || {};
-      if (oe === 200 && H.credential) {
-        B(e, H.credential);
+      const oe = _ == null ? void 0 : _.status, Z = (_ == null ? void 0 : _.body) || {};
+      if (oe === 200 && Z.credential) {
+        F(e, Z.credential);
         return;
       }
-      if (oe === 409 && H.consentRequired) {
-        O(u, {
+      if (oe === 409 && Z.consentRequired) {
+        w(i, {
           status: "interactive",
           consent: {
-            client: H.client || null,
-            stepUp: !!H.stepUp,
-            scope: H.scope || e.scope
+            client: Z.client || null,
+            stepUp: !!Z.stepUp,
+            scope: Z.scope || e.scope
           },
           error: null
         });
         return;
       }
-      const ee = H.error || "broker_error";
-      if (!r && Re.has(ee)) {
-        O(u, {
-          status: e.silentUrl && re ? "silent" : "interactive"
+      const ee = Z.error || "broker_error";
+      if (!r && we.has(ee)) {
+        w(i, {
+          status: e.silentUrl && te ? "silent" : "interactive"
         });
         return;
       }
       if (r && ee === "consent_denied") {
-        O(u, { error: null });
+        w(i, { error: null });
         return;
       }
       if (ee === "rate_limited" && !e.rateLimitRetried) {
-        const te = Math.min(
-          Number(H.retryAfter) > 0 ? Number(H.retryAfter) : be,
-          Ee
-        ), he = { ...e, rateLimitRetried: !0 };
-        a(u), o.current[u] = setTimeout(() => {
-          delete o.current[u], U.current[u] = !0, K.current(he, { approve: r }).finally(() => {
-            delete U.current[u];
+        const re = Math.min(
+          Number(Z.retryAfter) > 0 ? Number(Z.retryAfter) : Ee,
+          Re
+        ), me = { ...e, rateLimitRetried: !0 };
+        l(i), C.current[i] = setTimeout(() => {
+          delete C.current[i], I.current[i] = !0, D.current(me, { approve: r }).finally(() => {
+            delete I.current[i];
           });
-        }, te * 1e3), O(u, { rateLimitRetried: !0 });
+        }, re * 1e3), w(i, { rateLimitRetried: !0 });
         return;
       }
-      f(u), y((te) => ({
-        ...te,
-        [u]: {
-          origin: u,
+      u(i), z((re) => ({
+        ...re,
+        [i]: {
+          origin: i,
           reason: `broker:${ee}`,
-          detail: z || null,
-          clientId: e.clientId || C.current[u] || null
+          detail: _ || null,
+          clientId: e.clientId || R.current[i] || null
         }
       }));
     },
-    [B, O, f, a]
-  ), K = g(L);
-  K.current = L, R(() => {
-    Object.values(p).forEach((e) => {
-      e.status !== "broker" || U.current[e.origin] || o.current[e.origin] || (U.current[e.origin] = !0, L(e).finally(() => {
-        delete U.current[e.origin];
+    [F, w, u, l]
+  ), D = m(A);
+  D.current = A, b(() => {
+    Object.values(f).forEach((e) => {
+      e.status !== "broker" || I.current[e.origin] || C.current[e.origin] || (I.current[e.origin] = !0, A(e).finally(() => {
+        delete I.current[e.origin];
       }));
     });
-  }, [p, L]);
-  const Y = h(
-    (e) => !P.current || !(e != null && e.consent) ? Promise.resolve() : L(e, { approve: !0 }),
-    [L]
+  }, [f, A]);
+  const Q = h(
+    (e) => !v.current || !(e != null && e.consent) ? Promise.resolve() : A(e, { approve: !0 }),
+    [A]
   );
-  R(() => {
-    const e = X.current;
-    Object.values(p).forEach((r) => {
+  b(() => {
+    const e = Y.current;
+    Object.values(f).forEach((r) => {
       r.status === "silent" && !e[r.origin] && (e[r.origin] = setTimeout(() => {
-        delete e[r.origin], A(r.origin);
+        delete e[r.origin], a(r.origin);
       }, Te));
     }), Object.keys(e).forEach((r) => {
-      (!p[r] || p[r].status !== "silent") && (clearTimeout(e[r]), delete e[r]);
+      (!f[r] || f[r].status !== "silent") && (clearTimeout(e[r]), delete e[r]);
     });
-  }, [p, A]), R(() => () => {
-    F.current && F.current(), Object.values(X.current).forEach(clearTimeout), Object.values(o.current).forEach(clearTimeout);
+  }, [f, a]), b(() => () => {
+    x.current && x.current(), Object.values(Y.current).forEach(clearTimeout), Object.values(C.current).forEach(clearTimeout);
   }, []);
-  const W = h(
+  const K = h(
     (e) => {
-      F.current && (F.current(), F.current = null);
+      x.current && (x.current(), x.current = null);
       const r = s || ke;
-      F.current = r(e, {
+      x.current = r(e, {
         onBlocked: () => {
-          b((n) => n[e.origin] ? {
+          g((n) => n[e.origin] ? {
             ...n,
             [e.origin]: { ...n[e.origin], popupBlocked: !0 }
           } : n);
         },
         onClosed: () => {
           if (e.v2) {
-            re && b((n) => !n[e.origin] || !n[e.origin].silentUrl ? n : {
+            te && g((n) => !n[e.origin] || !n[e.origin].silentUrl ? n : {
               ...n,
               [e.origin]: { ...n[e.origin], status: "silent" }
             });
             return;
           }
-          m(e.origin);
+          o(e.origin);
         }
       });
     },
-    [s, m]
-  ), I = {
+    [s, o]
+  ), j = {
     // Hosts render UI for interactive entries only; silent resolution is
     // invisible by design.
-    pending: Object.values(p).filter(
+    pending: Object.values(f).filter(
       (e) => e.status === "interactive"
     ),
-    authorize: W,
-    approve: Y,
-    complete: B,
-    dismiss: j,
-    originEpochs: Z,
-    credentials: $,
-    unsupported: q
-  }, D = Object.values(p).filter(
+    authorize: K,
+    approve: Q,
+    complete: F,
+    dismiss: T,
+    originEpochs: P,
+    credentials: W,
+    unsupported: k
+  }, q = Object.values(f).filter(
     (e) => e.status === "silent" && e.silentUrl
   );
-  return /* @__PURE__ */ x.createElement(N.Provider, { value: I }, t, D.map((e) => /* @__PURE__ */ x.createElement(
+  return /* @__PURE__ */ $.createElement(J.Provider, { value: j }, t, q.map((e) => /* @__PURE__ */ $.createElement(
     "iframe",
     {
       key: `mm-silent-auth-${e.origin}`,
@@ -352,9 +352,9 @@ const ne = de(null), N = de({
     }
   )));
 };
-fe.propTypes = {
-  children: k.node,
-  launcher: k.func,
+pe.propTypes = {
+  children: E.node,
+  launcher: E.func,
   /**
    * `async (request, { approve }) => result` where request =
    * `{ origin, clientId, scope, authUrl }` (origin is the zone-attested frame origin) and result
@@ -363,169 +363,193 @@ fe.propTypes = {
    * on 200, `{ consentRequired: true, client: { name, hostname }, stepUp }` on 409, `{ error,
    * … }` otherwise. Provided only by hosts that are themselves first-party clients.
    */
-  broker: k.func
+  broker: E.func
 };
-const je = () => V(N), we = (t) => {
-  const { originEpochs: s } = V(N), c = Q(t);
+const qe = () => V(J), Ie = (t) => {
+  const { originEpochs: s } = V(J), c = N(t);
   return c && s[c] || 0;
-}, Ie = (t) => {
-  const { credentials: s } = V(N), c = Q(t);
-  return c && s[c] || null;
 }, _e = (t) => {
-  const { unsupported: s } = V(N), c = Q(t);
+  const { credentials: s } = V(J), c = N(t);
   return c && s[c] || null;
-}, Ue = ({ children: t, authorizationLauncher: s, credentialBroker: c }) => {
-  const [d, p] = M({}), [b, Z] = M({}), w = g({}), $ = g({}), S = g({}), q = h((i, l) => {
+}, Ue = (t) => {
+  const { unsupported: s } = V(J), c = N(t);
+  return c && s[c] || null;
+}, de = "MMEmbeddableZoneProvider requires a boolean `ready` prop (true once the host holds the bearer its credentialBroker needs). Embedded apps will not load until it is provided.", Me = ({
+  children: t,
+  authorizationLauncher: s,
+  credentialBroker: c,
+  ready: d
+}) => {
+  const f = d === !0, g = m(!1);
+  b(() => {
+    d !== void 0 || g.current || (g.current = !0, console.error(de), typeof window != "undefined" && typeof window.alert == "function" && window.alert(de));
+  }, [d]);
+  const [P, B] = O({}), [W, H] = O({}), k = m({}), z = m({}), y = m({}), U = h((l, u) => {
     var o;
-    return !!((o = S.current[i]) != null && o.has(l));
-  }, []), y = h((i, l, o) => {
-    p((a) => ({ ...a, [i]: { origin: l, frameRef: o } }));
-  }, []), G = h((i) => {
-    p((l) => {
-      const o = { ...l };
-      return delete o[i], o;
-    }), Z((l) => {
-      const o = { ...l };
-      return delete o[i], o;
-    }), delete S.current[i];
+    return !!((o = y.current[l]) != null && o.has(u));
+  }, []), x = h((l, u, o) => {
+    B((a) => ({ ...a, [l]: { origin: u, frameRef: o } }));
+  }, []), Y = h((l) => {
+    B((u) => {
+      const o = { ...u };
+      return delete o[l], o;
+    }), H((u) => {
+      const o = { ...u };
+      return delete o[l], o;
+    }), delete y.current[l];
   }, []);
-  R(() => {
-    const i = (o = [], a, f) => {
-      o.forEach((m) => m(a, f));
-    }, l = (o) => {
-      var B, O, U, L, K, Y, W;
-      if (!((B = o == null ? void 0 : o.data) != null && B.instanceId))
+  b(() => {
+    const l = (o = [], a, T) => {
+      o.forEach((p) => p(a, T));
+    }, u = (o) => {
+      var A, D, Q, K, j, q, e;
+      if (!((A = o == null ? void 0 : o.data) != null && A.instanceId))
         return;
-      const { instanceId: a, type: f } = o.data, m = d[a], A = (U = (O = m == null ? void 0 : m.frameRef) == null ? void 0 : O.current) == null ? void 0 : U.contentWindow;
-      if (!A || o.source !== A || o.origin !== m.origin)
+      const { instanceId: a, type: T } = o.data, p = P[a], F = (Q = (D = p == null ? void 0 : p.frameRef) == null ? void 0 : D.current) == null ? void 0 : Q.contentWindow;
+      if (!F || o.source !== F || o.origin !== p.origin)
         return;
-      const j = { origin: o.origin }, T = w.current;
-      if (f === "response") {
-        const { callbackId: I, response: D, error: e } = o.data, r = $.current[I];
-        r && (r(D, e), delete $.current[I]);
+      const w = { origin: o.origin }, I = k.current;
+      if (T === "response") {
+        const { callbackId: r, response: n, error: i } = o.data, _ = z.current[r];
+        _ && (_(n, i), delete z.current[r]);
         return;
       }
-      if (f === "mark-registered") {
-        const { requestType: I } = o.data;
-        S.current[a] || (S.current[a] = /* @__PURE__ */ new Set()), S.current[a].add(I);
+      if (T === "mark-registered") {
+        const { requestType: r } = o.data;
+        y.current[a] || (y.current[a] = /* @__PURE__ */ new Set()), y.current[a].add(r);
         return;
       }
-      f === "ready" && Z((I) => ({ ...I, [a]: !0 })), i((L = T[a]) == null ? void 0 : L[f], o.data, j), i((K = T["*"]) == null ? void 0 : K[f], o.data, j), i((Y = T[a]) == null ? void 0 : Y["*"], o.data, j), i((W = T["*"]) == null ? void 0 : W["*"], o.data, j);
+      T === "ready" && H((r) => ({ ...r, [a]: !0 })), l((K = I[a]) == null ? void 0 : K[T], o.data, w), l((j = I["*"]) == null ? void 0 : j[T], o.data, w), l((q = I[a]) == null ? void 0 : q["*"], o.data, w), l((e = I["*"]) == null ? void 0 : e["*"], o.data, w);
     };
-    return window.addEventListener("message", l), () => {
-      window.removeEventListener("message", l);
+    return window.addEventListener("message", u), () => {
+      window.removeEventListener("message", u);
     };
-  }, [d]);
-  const E = h(
-    (i, l, o) => {
-      var f, m;
-      const a = d[i];
+  }, [P]);
+  const R = h(
+    (l, u, o) => {
+      var T, p;
+      const a = P[l];
       if (!a) {
-        console.warn(`Origin not set for id: ${i}. Unable to send message.`);
+        console.warn(`Origin not set for id: ${l}. Unable to send message.`);
         return;
       }
-      (m = (f = a == null ? void 0 : a.frameRef) == null ? void 0 : f.current) != null && m.contentWindow && a.frameRef.current.contentWindow.postMessage(
-        { type: l, ...o, instanceId: i },
+      (p = (T = a == null ? void 0 : a.frameRef) == null ? void 0 : T.current) != null && p.contentWindow && a.frameRef.current.contentWindow.postMessage(
+        { type: u, ...o, instanceId: l },
         a.origin
       );
     },
-    [d]
-  ), F = g(0), X = h(() => `${Date.now()}-${++F.current}`, []), C = h(
-    async (i, l, o = {}) => new Promise((a, f) => {
-      const m = X(), A = (j, T) => {
-        delete $.current[m], T ? f(T) : a(j);
+    [P]
+  ), G = m(0), v = h(() => `${Date.now()}-${++G.current}`, []), M = h(
+    async (l, u, o = {}) => new Promise((a, T) => {
+      const p = v(), F = (w, I) => {
+        delete z.current[p], I ? T(I) : a(w);
       };
-      $.current[m] = A, E(i, "request", { callbackId: m, requestType: l, data: o });
+      z.current[p] = F, R(l, "request", { callbackId: p, requestType: u, data: o });
     }),
-    [E]
-  ), v = h(
-    (i, l) => {
-      E(i, "load-options", l);
+    [R]
+  ), L = h(
+    (l, u) => {
+      R(l, "load-options", u);
     },
-    [E]
-  ), P = h(
-    (i, l) => {
-      E(i, "validate", l);
+    [R]
+  ), S = h(
+    (l, u) => {
+      R(l, "validate", u);
     },
-    [E]
-  ), _ = me(
+    [R]
+  ), C = ge(
     () => ({
-      registerFrame: y,
-      unregisterFrame: G,
-      sendMessage: E,
-      sendRequest: C,
-      loadOptions: v,
-      validate: P,
-      hasHandler: q,
-      readyFrames: b,
-      addListener: (i, l, o) => (w.current[i] || (w.current[i] = {}), w.current[i][l] || (w.current[i][l] = []), w.current[i][l].push(o), () => {
-        w.current[i][l] = w.current[i][l].filter((a) => a !== o);
+      registerFrame: x,
+      unregisterFrame: Y,
+      sendMessage: R,
+      sendRequest: M,
+      loadOptions: L,
+      validate: S,
+      hasHandler: U,
+      readyFrames: W,
+      ready: f,
+      addListener: (l, u, o) => (k.current[l] || (k.current[l] = {}), k.current[l][u] || (k.current[l][u] = []), k.current[l][u].push(o), () => {
+        k.current[l][u] = k.current[l][u].filter((a) => a !== o);
       })
     }),
     [
-      y,
-      G,
-      E,
-      C,
-      v,
-      P,
-      q,
-      b
+      x,
+      Y,
+      R,
+      M,
+      L,
+      S,
+      U,
+      W,
+      f
     ]
   );
-  return /* @__PURE__ */ x.createElement(ne.Provider, { value: _ }, /* @__PURE__ */ x.createElement(fe, { launcher: s, broker: c }, t));
-}, J = (t, s, c) => {
+  return /* @__PURE__ */ $.createElement(ne.Provider, { value: C }, /* @__PURE__ */ $.createElement(
+    pe,
+    {
+      launcher: s,
+      broker: c
+    },
+    t
+  ));
+}, X = (t, s, c) => {
   const d = V(ne);
   if (d === null)
     throw new Error(
       "useEmbeddedEffect must be used within a MMEmbeddableZoneProvider"
     );
-  const p = g(c);
-  R(() => {
-    p.current = c;
-  }, [c]), R(() => {
+  const f = m(c);
+  b(() => {
+    f.current = c;
+  }, [c]), b(() => {
     if (!(!t || !s)) {
       if (s.startsWith("key:")) {
-        const b = s.substring(4);
-        return d.readyFrames[t] && d.sendMessage(t, "subscribe-key", { keyChord: b }), d.addListener(
+        const g = s.substring(4);
+        return d.readyFrames[t] && d.sendMessage(t, "subscribe-key", { keyChord: g }), d.addListener(
           t,
-          `key-pressed:${b}`,
-          (...w) => p.current(...w)
+          `key-pressed:${g}`,
+          (...B) => f.current(...B)
         );
       }
       return d.addListener(
         t,
         s,
-        (...b) => p.current(...b)
+        (...g) => f.current(...g)
       );
     }
   }, [d, t, s]);
 };
-Ue.propTypes = {
-  children: k.node.isRequired,
+Me.propTypes = {
+  children: E.node.isRequired,
+  /**
+   * Required. True once the host holds the bearer its `credentialBroker` sends; every
+   * MMEmbeddableZone below stays unmounted (no iframe src) until then, so the first broker call
+   * always carries a token. Missing prop = not ready, plus a one-time alert.
+   */
+  ready: E.bool.isRequired,
   /**
    * Optional interactive-step launcher for embedded authorizations,
    * `(entry, { onBlocked, onClosed }) => cleanup`. Defaults to a top-level
    * popup. Hosts that cannot open windows (Android WebView shells) drive
    * their own UI from useEmbeddedAuthorizations() instead.
    */
-  authorizationLauncher: k.func,
+  authorizationLauncher: E.func,
   /**
    * Optional credential broker for hosts that are first-party MachineMetrics clients
    * (`async (request, { approve }) => result`, see EmbeddedAuthorizationManager). When present,
    * v2 credential requests are brokered server-side (no popup, no hidden frame) and consent is
    * rendered natively by the host from the broker's `client` identity.
    */
-  credentialBroker: k.func
+  credentialBroker: E.func
 };
-const se = ie.default || ie, Le = 1e4, Me = "credentials", Ce = (t, s) => `${t}/mm-embedded-interop?id=${encodeURIComponent(s)}&origin=${encodeURIComponent(
+const se = ie.default || ie, Le = 1e4, Ce = "credentials", Ae = (t, s) => `${t}/mm-embedded-interop?id=${encodeURIComponent(s)}&origin=${encodeURIComponent(
   window.location.origin
-)}&caps=${Me}`, Ae = se.iframe`
+)}&caps=${Ce}`, Oe = se.iframe`
   width: 100%;
   height: 100%;
   border: none;
   visibility: ${(t) => t.$isReady ? "visible" : "hidden"};
-`, Oe = se.div`
+`, ze = se.div`
   width: 100%;
   height: 100%;
   display: flex;
@@ -538,7 +562,7 @@ const se = ie.default || ie, Le = 1e4, Me = "credentials", Ce = (t, s) => `${t}/
   text-align: center;
   color: #555;
   font-size: 14px;
-`, ze = (t) => {
+`, xe = (t) => {
   const s = t && t.origin || "This app", c = t && t.reason || "";
   switch (c) {
     case "broker:scope_above_ceiling":
@@ -566,154 +590,158 @@ const se = ie.default || ie, Le = 1e4, Me = "credentials", Ce = (t, s) => `${t}/
         detail: "It needs an update to support embedding from a different domain."
       };
   }
-}, pe = ({ entry: t }) => {
-  const s = ze(t);
-  return /* @__PURE__ */ x.createElement(Oe, { "data-reason": t && t.reason || void 0 }, /* @__PURE__ */ x.createElement("div", { style: { fontWeight: 600 } }, s.title), /* @__PURE__ */ x.createElement("div", { style: { fontSize: 12, color: "#888" } }, s.detail));
+}, he = ({ entry: t }) => {
+  const s = xe(t);
+  return /* @__PURE__ */ $.createElement(ze, { "data-reason": t && t.reason || void 0 }, /* @__PURE__ */ $.createElement("div", { style: { fontWeight: 600 } }, s.title), /* @__PURE__ */ $.createElement("div", { style: { fontSize: 12, color: "#888" } }, s.detail));
 };
-pe.propTypes = {
-  entry: k.shape({
-    origin: k.string,
-    name: k.string,
-    reason: k.string,
-    detail: k.object
+he.propTypes = {
+  entry: E.shape({
+    origin: E.string,
+    name: E.string,
+    reason: E.string,
+    detail: E.object
   })
 };
-const xe = se.div`
+const $e = se.div`
   height: 100%;
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: center;
-`, $e = () => /* @__PURE__ */ x.createElement(xe, null, /* @__PURE__ */ x.createElement("div", { style: { textAlign: "center" } }, "This app couldn’t be loaded as an embeddable widget.")), Se = ({
+`, ye = () => /* @__PURE__ */ $.createElement($e, null, /* @__PURE__ */ $.createElement("div", { style: { textAlign: "center" } }, "This app couldn’t be loaded as an embeddable widget.")), Se = ({
   id: t,
   src: s,
   path: c,
   onInit: d = () => {
   },
-  onTimeout: p,
-  context: b = {},
-  params: Z = {},
-  renderUnsupported: w,
-  renderTimeout: $,
-  ...S
+  onTimeout: f,
+  context: g = {},
+  params: P = {},
+  renderUnsupported: B,
+  renderTimeout: W,
+  ...H
 }) => {
-  if ("isConfiguring" in S)
+  if ("isConfiguring" in H)
     return console.error(
       "isConfiguring must be passed via the params prop to MMEmbeddableZone"
     ), null;
-  if ("colorMode" in b)
+  if ("colorMode" in g)
     return console.error(
       "colorMode must be passed via the params prop to MMEmbeddableZone"
     ), null;
-  if ("isFullScreen" in b)
+  if ("isFullScreen" in g)
     return console.error(
       "isFullScreen must be passed via the params prop to MMEmbeddableZone"
     ), null;
-  const q = g(), [y, G] = M(), [E, F] = M(0), [X, C] = M(!1), [v, P] = M(!1), _ = we(s), i = Ie(s), l = _e(s), [o, a] = M(0), [f, m] = M(null), { registerFrame: A, unregisterFrame: j, sendMessage: T } = V(
+  const k = m(), [z, y] = O(), [U, x] = O(0), [Y, R] = O(!1), [G, v] = O(!1), M = Ie(s), L = _e(s), S = Ue(s), [C, l] = O(0), [u, o] = O(null), { registerFrame: a, unregisterFrame: T, sendMessage: p, ready: F } = V(
     ne
-  ), [B, O] = M(), U = g(), L = g(p), K = g(d), Y = g(!1), W = h(() => {
-    Y.current = !1, clearTimeout(U.current), F(0), C(!1), P(!1), m(null);
+  ), [w, I] = O(), A = m(), D = m(f), Q = m(d), K = m(!1), j = h(() => {
+    K.current = !1, clearTimeout(A.current), x(0), R(!1), v(!1), o(null);
   }, []);
-  R(() => {
-    (_ > 0 || o > 0) && W();
-  }, [_, o, W]), R(() => {
-    L.current = p;
-  }, [p]), R(() => {
-    K.current = d;
-  }, [d]), R(() => {
-    E && T(t, "set-context", {
+  b(() => {
+    (M > 0 || C > 0) && j();
+  }, [M, C, j]), b(() => {
+    D.current = f;
+  }, [f]), b(() => {
+    Q.current = d;
+  }, [d]), b(() => {
+    U && p(t, "set-context", {
       context: {
-        ...b
+        ...g
       }
     });
-  }, [b, t, E]), R(() => {
-    E && T(t, "set-params", { params: Z });
-  }, [Z, t, E]), R(() => {
-    c !== void 0 && O((c == null ? void 0 : c.indexOf("/")) === 0 ? c : `/${c}`);
-  }, [c]), R(() => {
-    B === void 0 || !E || T(t, "navigate", { path: B });
-  }, [B, E, t, T]), R(() => {
-    if (!s || !t || !q)
+  }, [g, t, U]), b(() => {
+    U && p(t, "set-params", { params: P });
+  }, [P, t, U]), b(() => {
+    c !== void 0 && I((c == null ? void 0 : c.indexOf("/")) === 0 ? c : `/${c}`);
+  }, [c]), b(() => {
+    w === void 0 || !U || p(t, "navigate", { path: w });
+  }, [w, U, t, p]), b(() => {
+    if (!s || !t || !k)
+      return;
+    if (!F) {
+      j(), y(void 0);
       return;
-    W();
-    const e = new URL(s);
-    return A(t, e.origin, q), K.current(), G(Ce(e.origin, t)), () => {
-      j(t);
+    }
+    j();
+    const r = new URL(s);
+    return a(t, r.origin, k), Q.current(), y(Ae(r.origin, t)), () => {
+      T(t);
     };
-  }, [s, t, A, q, W]), R(() => {
-    if (!(!y || Y.current))
-      return U.current = setTimeout(() => {
-        C(!0), L.current && L.current();
-      }, Le), () => clearTimeout(U.current);
-  }, [y, s, _, o]);
-  const I = h(() => {
-    Y.current = !0, clearTimeout(U.current), C(!1);
+  }, [s, t, F, a, k, j]), b(() => {
+    if (!(!z || K.current))
+      return A.current = setTimeout(() => {
+        R(!0), D.current && D.current();
+      }, Le), () => clearTimeout(A.current);
+  }, [z, s, M, C]);
+  const q = h(() => {
+    K.current = !0, clearTimeout(A.current), R(!1);
   }, []);
-  J(t, "init", (e) => {
-    I(), Array.isArray(e == null ? void 0 : e.acceptsCredentials) && m(e.acceptsCredentials);
-  }), J(t, "authorize", I), J(t, "login", I), J(t, "credential-request", () => {
-    I(), P(!0);
-  }), R(() => {
-    if (!v || !i)
+  X(t, "init", (r) => {
+    q(), Array.isArray(r == null ? void 0 : r.acceptsCredentials) && o(r.acceptsCredentials);
+  }), X(t, "authorize", q), X(t, "login", q), X(t, "credential-request", () => {
+    q(), v(!0);
+  }), b(() => {
+    if (!G || !L)
       return;
-    const e = f;
-    if (Array.isArray(e) && !e.includes(i.kind))
+    const r = u;
+    if (Array.isArray(r) && !r.includes(L.kind))
       return;
-    const r = i.kind === "access_token" ? { accessToken: i.accessToken } : {};
-    T(t, "credential", { ...r, credential: i });
-  }, [v, i, f, t, T]), J(t, "ready", () => {
-    I(), F((e) => e + 1);
+    const n = L.kind === "access_token" ? { accessToken: L.accessToken } : {};
+    p(t, "credential", { ...n, credential: L });
+  }, [G, L, u, t, p]), X(t, "ready", () => {
+    q(), x((r) => r + 1);
   });
-  const D = g();
-  return J(t, "heartbeat", () => {
-    D.current && clearTimeout(D.current), D.current = setTimeout(() => {
-      a((e) => e + 1);
+  const e = m();
+  return X(t, "heartbeat", () => {
+    e.current && clearTimeout(e.current), e.current = setTimeout(() => {
+      l((r) => r + 1);
     }, 6e3);
-  }), R(() => () => {
-    D.current && clearTimeout(D.current);
-  }, []), l ? w ? w(l) : /* @__PURE__ */ x.createElement(pe, { entry: l }) : X && !E ? $ ? $() : /* @__PURE__ */ x.createElement($e, null) : /* @__PURE__ */ x.createElement(
-    Ae,
+  }), b(() => () => {
+    e.current && clearTimeout(e.current);
+  }, []), S ? B ? B(S) : /* @__PURE__ */ $.createElement(he, { entry: S }) : Y && !U ? W ? W() : /* @__PURE__ */ $.createElement(ye, null) : /* @__PURE__ */ $.createElement(
+    Oe,
     {
-      key: `auth-epoch-${_}-frame-${o}`,
-      $isReady: E,
-      ref: q,
-      src: y,
-      ...S
+      key: `auth-epoch-${M}-frame-${C}`,
+      $isReady: U,
+      ref: k,
+      src: z,
+      ...H
     }
   );
 };
 Se.propTypes = {
-  id: k.string,
-  src: k.string.isRequired,
-  path: k.string,
-  onInit: k.func,
-  onTimeout: k.func,
+  id: E.string,
+  src: E.string.isRequired,
+  path: E.string,
+  onInit: E.func,
+  onTimeout: E.func,
   /**
    * Optional host-styled renderer for the structurally-unsupported embed
    * state (legacy app on a cross-site origin), `(entry) => ReactNode`. Falls
    * back to a minimal built-in placeholder.
    */
-  renderUnsupported: k.func,
+  renderUnsupported: E.func,
   /**
    * Optional host-styled renderer for the handshake-timeout failure state
    * (the app is not embeddable / could not load), `() => ReactNode`. Falls
    * back to a minimal centered message.
    */
-  renderTimeout: k.func
+  renderTimeout: E.func
 };
 export {
-  ge as CREDENTIAL_KIND_ACCESS_TOKEN,
-  N as EmbeddedAuthorizationContext,
+  be as CREDENTIAL_KIND_ACCESS_TOKEN,
+  J as EmbeddedAuthorizationContext,
   Se as MMEmbeddableZone,
   ne as MMEmbeddableZoneContext,
-  Ue as MMEmbeddableZoneProvider,
+  Me as MMEmbeddableZoneProvider,
   ae as isCrossSite,
   ce as normalizeCredential,
   ke as popupAuthorizationLauncher,
-  ze as unsupportedCopy,
-  je as useEmbeddedAuthorizations,
-  Ie as useEmbeddedCredential,
-  J as useEmbeddedEffect,
-  we as useEmbeddedOriginEpoch,
-  _e as useEmbeddedUnsupported
+  xe as unsupportedCopy,
+  qe as useEmbeddedAuthorizations,
+  _e as useEmbeddedCredential,
+  X as useEmbeddedEffect,
+  Ie as useEmbeddedOriginEpoch,
+  Ue as useEmbeddedUnsupported
 };

package/dist/mm-react-embeddable.umd.js

@@ -1,8 +1,8 @@
-(function(m,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("react"),require("prop-types"),require("styled-components")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","styled-components"],t):(m=typeof globalThis!="undefined"?globalThis:m||self,t(m["mm-react-embeddable"]={},m.React,m.PropTypes,m.styled))})(this,(function(m,t,ke,Ce){"use strict";const te=r=>r&&r.__esModule?r:{default:r},S=te(t),k=te(ke),ue=te(Ce),X=t.createContext(null),G=t.createContext({pending:[],authorize:()=>{},approve:()=>{},complete:()=>{},dismiss:()=>{},originEpochs:{},credentials:{},unsupported:{}}),oe="access_token",re=r=>r?r.kind?r:r.accessToken?{kind:oe,accessToken:r.accessToken,expiresAt:r.expiresAt||null}:null:null,Te=60,_e=120,we=new Set(["host_not_allowed","unbound_host_bound_guest","invalid_token","provider_unavailable"]),Q=typeof window!="undefined"&&window.location.protocol==="https:",Ie=8e3,J=r=>{try{return new URL(r).origin}catch{return null}},ie=(r,u)=>{const c=u==null?void 0:u.origin;return!c||J(r==null?void 0:r.authUrl)!==c?null:c},ce=r=>{if(!r||/^\d{1,3}(?:\.\d{1,3}){3}$/.test(r)||r.includes(":"))return r;const u=r.split(".");return u.length<=2?r:u.slice(-2).join(".")},ne=(r,u)=>{try{const c=new URL(r),f=new URL(u);return c.protocol!==f.protocol?!0:ce(c.hostname)!==ce(f.hostname)}catch{return!0}},le=(r,{onBlocked:u,onClosed:c})=>{const f=window.open(r.authUrl,"mm-embed-auth","popup,width=600,height=700");if(!f)return u(),()=>{};const b=setInterval(()=>{f.closed&&(clearInterval(b),c())},1e3);return()=>clearInterval(b)},ae=({children:r,launcher:u,broker:c})=>{const f=t.useContext(X),[b,E]=t.useState({}),[W,T]=t.useState({}),[O,y]=t.useState({}),[q,x]=t.useState({}),Y=t.useRef(O);Y.current=O;const g=t.useRef(b);g.current=b;const $=t.useRef(null),V=t.useRef({}),U=t.useRef({}),v=t.useRef({}),F=t.useRef(c);F.current=c;const w=t.useCallback(e=>{const n=U.current[e];if(!n)return;const s=l=>!l[e]||l[e].clientId?l:{...l,[e]:{...l[e],clientId:n}};E(s),x(s)},[]),i=t.useCallback((e,n)=>{e&&(x(s=>s[e]?s:{...s,[e]:{origin:e,reason:n,clientId:U.current[e]||null}}),w(e))},[w]),a=t.useCallback((e,{v2:n=!1,origin:s=null}={})=>{s&&(n&&Y.current[s]||(E(l=>l[s]?l:{...l,[s]:{origin:s,authUrl:e.authUrl,silentUrl:e.silentUrl||null,status:n&&F.current?"broker":n&&e.silentUrl&&Q?"silent":"interactive",v2:n,scope:e.scope||null,acceptsCredentials:v.current[s]||null,consent:null,error:null,clientId:e.clientId||U.current[s]||null,popupBlocked:!1}}),w(s)))},[w]),o=t.useRef({}),d=t.useCallback(e=>{o.current[e]&&(clearTimeout(o.current[e]),delete o.current[e])},[]),p=t.useCallback(e=>{d(e),E(n=>{if(!n[e])return n;const s={...n};return delete s[e],s})},[d]),h=t.useCallback(e=>{e&&(p(e),T(n=>({...n,[e]:(n[e]||0)+1})))},[p]),L=t.useCallback(e=>{E(n=>!n[e]||n[e].status==="interactive"?n:{...n,[e]:{...n[e],status:"interactive"}})},[]),P=t.useCallback(e=>{p(e.origin)},[p]),C=t.useCallback((e,n)=>{const s=ie(e,n);if(s){if(ne(s,window.location.origin)){i(s,"cross-site-legacy");return}a(e,{origin:s})}},[a,i]);t.useEffect(()=>{if(!f)return;const e=[f.addListener("*","init",(n,s)=>{s!=null&&s.origin&&(n!=null&&n.clientId)&&(U.current[s.origin]=n.clientId,w(s.origin)),s!=null&&s.origin&&Array.isArray(n==null?void 0:n.acceptsCredentials)?v.current[s.origin]=n.acceptsCredentials:s!=null&&s.origin&&ne(s.origin,window.location.origin)&&i(s.origin,"cross-site-legacy")}),f.addListener("*","authorize",C),f.addListener("*","login",C),f.addListener("*","credential-request",(n,s)=>a(n,{v2:!0,origin:ie(n,s)}))];return()=>e.forEach(n=>n())},[f,C,a,w,i]),t.useEffect(()=>{const e=n=>{const s=n==null?void 0:n.data;if(!s||s.type!=="authorized"&&s.type!=="authorize-failed")return;const l=J(s.authUrl);if(!(!l||n.origin!==l)){if(s.type==="authorized"){if(s.accessToken){if(!g.current[l])return;y(z=>({...z,[l]:re({accessToken:s.accessToken})})),p(l)}else h(l);return}L(l)}};return window.addEventListener("message",e),()=>window.removeEventListener("message",e)},[p,h,L]);const j=t.useCallback((e,n)=>{const s=e==null?void 0:e.origin,l=re(n);!s||!l||(y(z=>({...z,[s]:l})),p(s))},[p]),A=t.useCallback((e,n)=>{E(s=>s[e]?{...s,[e]:{...s[e],...n}}:s)},[]),I=t.useRef({}),M=t.useCallback(async(e,{approve:n}={})=>{const s=F.current,{origin:l}=e;let z;try{z=await s({origin:l,clientId:e.clientId,scope:e.scope,authUrl:e.authUrl},{approve:n})}catch{n?A(l,{error:{reason:"broker_unavailable"}}):A(l,{status:e.silentUrl&&Q?"silent":"interactive"});return}const ge=z==null?void 0:z.status,Z=(z==null?void 0:z.body)||{};if(ge===200&&Z.credential){j(e,Z.credential);return}if(ge===409&&Z.consentRequired){A(l,{status:"interactive",consent:{client:Z.client||null,stepUp:!!Z.stepUp,scope:Z.scope||e.scope},error:null});return}const R=Z.error||"broker_error";if(!n&&we.has(R)){A(l,{status:e.silentUrl&&Q?"silent":"interactive"});return}if(n&&R==="consent_denied"){A(l,{error:null});return}if(R==="rate_limited"&&!e.rateLimitRetried){const ee=Math.min(Number(Z.retryAfter)>0?Number(Z.retryAfter):Te,_e),$e={...e,rateLimitRetried:!0};d(l),o.current[l]=setTimeout(()=>{delete o.current[l],I.current[l]=!0,H.current($e,{approve:n}).finally(()=>{delete I.current[l]})},ee*1e3),A(l,{rateLimitRetried:!0});return}p(l),x(ee=>({...ee,[l]:{origin:l,reason:`broker:${R}`,detail:z||null,clientId:e.clientId||U.current[l]||null}}))},[j,A,p,d]),H=t.useRef(M);H.current=M,t.useEffect(()=>{Object.values(b).forEach(e=>{e.status!=="broker"||I.current[e.origin]||o.current[e.origin]||(I.current[e.origin]=!0,M(e).finally(()=>{delete I.current[e.origin]}))})},[b,M]);const K=t.useCallback(e=>!F.current||!(e!=null&&e.consent)?Promise.resolve():M(e,{approve:!0}),[M]);t.useEffect(()=>{const e=V.current;Object.values(b).forEach(n=>{n.status==="silent"&&!e[n.origin]&&(e[n.origin]=setTimeout(()=>{delete e[n.origin],L(n.origin)},Ie))}),Object.keys(e).forEach(n=>{(!b[n]||b[n].status!=="silent")&&(clearTimeout(e[n]),delete e[n])})},[b,L]),t.useEffect(()=>()=>{$.current&&$.current(),Object.values(V.current).forEach(clearTimeout),Object.values(o.current).forEach(clearTimeout)},[]);const B=t.useCallback(e=>{$.current&&($.current(),$.current=null);const n=u||le;$.current=n(e,{onBlocked:()=>{E(s=>s[e.origin]?{...s,[e.origin]:{...s[e.origin],popupBlocked:!0}}:s)},onClosed:()=>{if(e.v2){Q&&E(s=>!s[e.origin]||!s[e.origin].silentUrl?s:{...s,[e.origin]:{...s[e.origin],status:"silent"}});return}h(e.origin)}})},[u,h]),_={pending:Object.values(b).filter(e=>e.status==="interactive"),authorize:B,approve:K,complete:j,dismiss:P,originEpochs:W,credentials:O,unsupported:q},D=Object.values(b).filter(e=>e.status==="silent"&&e.silentUrl);return S.default.createElement(G.Provider,{value:_},r,D.map(e=>S.default.createElement("iframe",{key:`mm-silent-auth-${e.origin}`,src:e.silentUrl,title:`MachineMetrics silent authorization (${e.origin})`,"aria-hidden":"true",tabIndex:-1,style:{display:"none"}})))};ae.propTypes={children:k.default.node,launcher:k.default.func,broker:k.default.func};const Me=()=>t.useContext(G),de=r=>{const{originEpochs:u}=t.useContext(G),c=J(r);return c&&u[c]||0},fe=r=>{const{credentials:u}=t.useContext(G),c=J(r);return c&&u[c]||null},pe=r=>{const{unsupported:u}=t.useContext(G),c=J(r);return c&&u[c]||null},be=({children:r,authorizationLauncher:u,credentialBroker:c})=>{const[f,b]=t.useState({}),[E,W]=t.useState({}),T=t.useRef({}),O=t.useRef({}),y=t.useRef({}),q=t.useCallback((i,a)=>{var o;return!!((o=y.current[i])!=null&&o.has(a))},[]),x=t.useCallback((i,a,o)=>{b(d=>({...d,[i]:{origin:a,frameRef:o}}))},[]),Y=t.useCallback(i=>{b(a=>{const o={...a};return delete o[i],o}),W(a=>{const o={...a};return delete o[i],o}),delete y.current[i]},[]);t.useEffect(()=>{const i=(o=[],d,p)=>{o.forEach(h=>h(d,p))},a=o=>{var j,A,I,M,H,K,B;if(!((j=o==null?void 0:o.data)!=null&&j.instanceId))return;const{instanceId:d,type:p}=o.data,h=f[d],L=(I=(A=h==null?void 0:h.frameRef)==null?void 0:A.current)==null?void 0:I.contentWindow;if(!L||o.source!==L||o.origin!==h.origin)return;const P={origin:o.origin},C=T.current;if(p==="response"){const{callbackId:_,response:D,error:e}=o.data,n=O.current[_];n&&(n(D,e),delete O.current[_]);return}if(p==="mark-registered"){const{requestType:_}=o.data;y.current[d]||(y.current[d]=new Set),y.current[d].add(_);return}p==="ready"&&W(_=>({..._,[d]:!0})),i((M=C[d])==null?void 0:M[p],o.data,P),i((H=C["*"])==null?void 0:H[p],o.data,P),i((K=C[d])==null?void 0:K["*"],o.data,P),i((B=C["*"])==null?void 0:B["*"],o.data,P)};return window.addEventListener("message",a),()=>{window.removeEventListener("message",a)}},[f]);const g=t.useCallback((i,a,o)=>{var p,h;const d=f[i];if(!d){console.warn(`Origin not set for id: ${i}. Unable to send message.`);return}(h=(p=d==null?void 0:d.frameRef)==null?void 0:p.current)!=null&&h.contentWindow&&d.frameRef.current.contentWindow.postMessage({type:a,...o,instanceId:i},d.origin)},[f]),$=t.useRef(0),V=t.useCallback(()=>`${Date.now()}-${++$.current}`,[]),U=t.useCallback(async(i,a,o={})=>new Promise((d,p)=>{const h=V(),L=(P,C)=>{delete O.current[h],C?p(C):d(P)};O.current[h]=L,g(i,"request",{callbackId:h,requestType:a,data:o})}),[g]),v=t.useCallback((i,a)=>{g(i,"load-options",a)},[g]),F=t.useCallback((i,a)=>{g(i,"validate",a)},[g]),w=t.useMemo(()=>({registerFrame:x,unregisterFrame:Y,sendMessage:g,sendRequest:U,loadOptions:v,validate:F,hasHandler:q,readyFrames:E,addListener:(i,a,o)=>(T.current[i]||(T.current[i]={}),T.current[i][a]||(T.current[i][a]=[]),T.current[i][a].push(o),()=>{T.current[i][a]=T.current[i][a].filter(d=>d!==o)})}),[x,Y,g,U,v,F,q,E]);return S.default.createElement(X.Provider,{value:w},S.default.createElement(ae,{launcher:u,broker:c},r))},N=(r,u,c)=>{const f=t.useContext(X);if(f===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const b=t.useRef(c);t.useEffect(()=>{b.current=c},[c]),t.useEffect(()=>{if(!(!r||!u)){if(u.startsWith("key:")){const E=u.substring(4);return f.readyFrames[r]&&f.sendMessage(r,"subscribe-key",{keyChord:E}),f.addListener(r,`key-pressed:${E}`,(...T)=>b.current(...T))}return f.addListener(r,u,(...E)=>b.current(...E))}},[f,r,u])};be.propTypes={children:k.default.node.isRequired,authorizationLauncher:k.default.func,credentialBroker:k.default.func};const se=ue.default.default||ue.default,Se=1e4,Ue="credentials",Le=(r,u)=>`${r}/mm-embedded-interop?id=${encodeURIComponent(u)}&origin=${encodeURIComponent(window.location.origin)}&caps=${Ue}`,Ae=se.iframe`
+(function(h,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("react"),require("prop-types"),require("styled-components")):typeof define=="function"&&define.amd?define(["exports","react","prop-types","styled-components"],t):(h=typeof globalThis!="undefined"?globalThis:h||self,t(h["mm-react-embeddable"]={},h.React,h.PropTypes,h.styled))})(this,(function(h,t,Ce,Te){"use strict";const te=n=>n&&n.__esModule?n:{default:n},A=te(t),E=te(Ce),oe=te(Te),R=t.createContext(null),Q=t.createContext({pending:[],authorize:()=>{},approve:()=>{},complete:()=>{},dismiss:()=>{},originEpochs:{},credentials:{},unsupported:{}}),ue="access_token",re=n=>n?n.kind?n:n.accessToken?{kind:ue,accessToken:n.accessToken,expiresAt:n.expiresAt||null}:null:null,we=60,_e=120,Ie=new Set(["host_not_allowed","unbound_host_bound_guest","invalid_token","provider_unavailable"]),X=typeof window!="undefined"&&window.location.protocol==="https:",Me=8e3,V=n=>{try{return new URL(n).origin}catch{return null}},ie=(n,o)=>{const c=o==null?void 0:o.origin;return!c||V(n==null?void 0:n.authUrl)!==c?null:c},ce=n=>{if(!n||/^\d{1,3}(?:\.\d{1,3}){3}$/.test(n)||n.includes(":"))return n;const o=n.split(".");return o.length<=2?n:o.slice(-2).join(".")},ne=(n,o)=>{try{const c=new URL(n),f=new URL(o);return c.protocol!==f.protocol?!0:ce(c.hostname)!==ce(f.hostname)}catch{return!0}},le=(n,{onBlocked:o,onClosed:c})=>{const f=window.open(n.authUrl,"mm-embed-auth","popup,width=600,height=700");if(!f)return o(),()=>{};const p=setInterval(()=>{f.closed&&(clearInterval(p),c())},1e3);return()=>clearInterval(p)},de=({children:n,launcher:o,broker:c})=>{const f=t.useContext(R),[p,m]=t.useState({}),[F,j]=t.useState({}),[D,W]=t.useState({}),[T,y]=t.useState({}),O=t.useRef(D);O.current=D;const I=t.useRef(p);I.current=p;const z=t.useRef(null),N=t.useRef({}),g=t.useRef({}),Y=t.useRef({}),v=t.useRef(c);v.current=c;const M=t.useCallback(e=>{const r=g.current[e];if(!r)return;const s=i=>!i[e]||i[e].clientId?i:{...i,[e]:{...i[e],clientId:r}};m(s),y(s)},[]),S=t.useCallback((e,r)=>{e&&(y(s=>s[e]?s:{...s,[e]:{origin:e,reason:r,clientId:g.current[e]||null}}),M(e))},[M]),$=t.useCallback((e,{v2:r=!1,origin:s=null}={})=>{s&&(r&&O.current[s]||(m(i=>i[s]?i:{...i,[s]:{origin:s,authUrl:e.authUrl,silentUrl:e.silentUrl||null,status:r&&v.current?"broker":r&&e.silentUrl&&X?"silent":"interactive",v2:r,scope:e.scope||null,acceptsCredentials:Y.current[s]||null,consent:null,error:null,clientId:e.clientId||g.current[s]||null,popupBlocked:!1}}),M(s)))},[M]),U=t.useRef({}),d=t.useCallback(e=>{U.current[e]&&(clearTimeout(U.current[e]),delete U.current[e])},[]),l=t.useCallback(e=>{d(e),m(r=>{if(!r[e])return r;const s={...r};return delete s[e],s})},[d]),u=t.useCallback(e=>{e&&(l(e),j(r=>({...r,[e]:(r[e]||0)+1})))},[l]),a=t.useCallback(e=>{m(r=>!r[e]||r[e].status==="interactive"?r:{...r,[e]:{...r[e],status:"interactive"}})},[]),C=t.useCallback(e=>{l(e.origin)},[l]),b=t.useCallback((e,r)=>{const s=ie(e,r);if(s){if(ne(s,window.location.origin)){S(s,"cross-site-legacy");return}$(e,{origin:s})}},[$,S]);t.useEffect(()=>{if(!f)return;const e=[f.addListener("*","init",(r,s)=>{s!=null&&s.origin&&(r!=null&&r.clientId)&&(g.current[s.origin]=r.clientId,M(s.origin)),s!=null&&s.origin&&Array.isArray(r==null?void 0:r.acceptsCredentials)?Y.current[s.origin]=r.acceptsCredentials:s!=null&&s.origin&&ne(s.origin,window.location.origin)&&S(s.origin,"cross-site-legacy")}),f.addListener("*","authorize",b),f.addListener("*","login",b),f.addListener("*","credential-request",(r,s)=>$(r,{v2:!0,origin:ie(r,s)}))];return()=>e.forEach(r=>r())},[f,b,$,M,S]),t.useEffect(()=>{const e=r=>{const s=r==null?void 0:r.data;if(!s||s.type!=="authorized"&&s.type!=="authorize-failed")return;const i=V(s.authUrl);if(!(!i||r.origin!==i)){if(s.type==="authorized"){if(s.accessToken){if(!I.current[i])return;W(_=>({..._,[i]:re({accessToken:s.accessToken})})),l(i)}else u(i);return}a(i)}};return window.addEventListener("message",e),()=>window.removeEventListener("message",e)},[l,u,a]);const x=t.useCallback((e,r)=>{const s=e==null?void 0:e.origin,i=re(r);!s||!i||(W(_=>({..._,[s]:i})),l(s))},[l]),k=t.useCallback((e,r)=>{m(s=>s[e]?{...s,[e]:{...s[e],...r}}:s)},[]),w=t.useRef({}),L=t.useCallback(async(e,{approve:r}={})=>{const s=v.current,{origin:i}=e;let _;try{_=await s({origin:i,clientId:e.clientId,scope:e.scope,authUrl:e.authUrl},{approve:r})}catch{r?k(i,{error:{reason:"broker_unavailable"}}):k(i,{status:e.silentUrl&&X?"silent":"interactive"});return}const ke=_==null?void 0:_.status,Z=(_==null?void 0:_.body)||{};if(ke===200&&Z.credential){x(e,Z.credential);return}if(ke===409&&Z.consentRequired){k(i,{status:"interactive",consent:{client:Z.client||null,stepUp:!!Z.stepUp,scope:Z.scope||e.scope},error:null});return}const J=Z.error||"broker_error";if(!r&&Ie.has(J)){k(i,{status:e.silentUrl&&X?"silent":"interactive"});return}if(r&&J==="consent_denied"){k(i,{error:null});return}if(J==="rate_limited"&&!e.rateLimitRetried){const ee=Math.min(Number(Z.retryAfter)>0?Number(Z.retryAfter):we,_e),xe={...e,rateLimitRetried:!0};d(i),U.current[i]=setTimeout(()=>{delete U.current[i],w.current[i]=!0,B.current(xe,{approve:r}).finally(()=>{delete w.current[i]})},ee*1e3),k(i,{rateLimitRetried:!0});return}l(i),y(ee=>({...ee,[i]:{origin:i,reason:`broker:${J}`,detail:_||null,clientId:e.clientId||g.current[i]||null}}))},[x,k,l,d]),B=t.useRef(L);B.current=L,t.useEffect(()=>{Object.values(p).forEach(e=>{e.status!=="broker"||w.current[e.origin]||U.current[e.origin]||(w.current[e.origin]=!0,L(e).finally(()=>{delete w.current[e.origin]}))})},[p,L]);const G=t.useCallback(e=>!v.current||!(e!=null&&e.consent)?Promise.resolve():L(e,{approve:!0}),[L]);t.useEffect(()=>{const e=N.current;Object.values(p).forEach(r=>{r.status==="silent"&&!e[r.origin]&&(e[r.origin]=setTimeout(()=>{delete e[r.origin],a(r.origin)},Me))}),Object.keys(e).forEach(r=>{(!p[r]||p[r].status!=="silent")&&(clearTimeout(e[r]),delete e[r])})},[p,a]),t.useEffect(()=>()=>{z.current&&z.current(),Object.values(N.current).forEach(clearTimeout),Object.values(U.current).forEach(clearTimeout)},[]);const H=t.useCallback(e=>{z.current&&(z.current(),z.current=null);const r=o||le;z.current=r(e,{onBlocked:()=>{m(s=>s[e.origin]?{...s,[e.origin]:{...s[e.origin],popupBlocked:!0}}:s)},onClosed:()=>{if(e.v2){X&&m(s=>!s[e.origin]||!s[e.origin].silentUrl?s:{...s,[e.origin]:{...s[e.origin],status:"silent"}});return}u(e.origin)}})},[o,u]),P={pending:Object.values(p).filter(e=>e.status==="interactive"),authorize:H,approve:G,complete:x,dismiss:C,originEpochs:F,credentials:D,unsupported:T},q=Object.values(p).filter(e=>e.status==="silent"&&e.silentUrl);return A.default.createElement(Q.Provider,{value:P},n,q.map(e=>A.default.createElement("iframe",{key:`mm-silent-auth-${e.origin}`,src:e.silentUrl,title:`MachineMetrics silent authorization (${e.origin})`,"aria-hidden":"true",tabIndex:-1,style:{display:"none"}})))};de.propTypes={children:E.default.node,launcher:E.default.func,broker:E.default.func};const Se=()=>t.useContext(Q),ae=n=>{const{originEpochs:o}=t.useContext(Q),c=V(n);return c&&o[c]||0},fe=n=>{const{credentials:o}=t.useContext(Q),c=V(n);return c&&o[c]||null},pe=n=>{const{unsupported:o}=t.useContext(Q),c=V(n);return c&&o[c]||null},be="MMEmbeddableZoneProvider requires a boolean `ready` prop (true once the host holds the bearer its credentialBroker needs). Embedded apps will not load until it is provided.",he=({children:n,authorizationLauncher:o,credentialBroker:c,ready:f})=>{const p=f===!0,m=t.useRef(!1);t.useEffect(()=>{f!==void 0||m.current||(m.current=!0,console.error(be),typeof window!="undefined"&&typeof window.alert=="function"&&window.alert(be))},[f]);const[F,j]=t.useState({}),[D,W]=t.useState({}),T=t.useRef({}),y=t.useRef({}),O=t.useRef({}),I=t.useCallback((d,l)=>{var u;return!!((u=O.current[d])!=null&&u.has(l))},[]),z=t.useCallback((d,l,u)=>{j(a=>({...a,[d]:{origin:l,frameRef:u}}))},[]),N=t.useCallback(d=>{j(l=>{const u={...l};return delete u[d],u}),W(l=>{const u={...l};return delete u[d],u}),delete O.current[d]},[]);t.useEffect(()=>{const d=(u=[],a,C)=>{u.forEach(b=>b(a,C))},l=u=>{var L,B,G,H,P,q,e;if(!((L=u==null?void 0:u.data)!=null&&L.instanceId))return;const{instanceId:a,type:C}=u.data,b=F[a],x=(G=(B=b==null?void 0:b.frameRef)==null?void 0:B.current)==null?void 0:G.contentWindow;if(!x||u.source!==x||u.origin!==b.origin)return;const k={origin:u.origin},w=T.current;if(C==="response"){const{callbackId:r,response:s,error:i}=u.data,_=y.current[r];_&&(_(s,i),delete y.current[r]);return}if(C==="mark-registered"){const{requestType:r}=u.data;O.current[a]||(O.current[a]=new Set),O.current[a].add(r);return}C==="ready"&&W(r=>({...r,[a]:!0})),d((H=w[a])==null?void 0:H[C],u.data,k),d((P=w["*"])==null?void 0:P[C],u.data,k),d((q=w[a])==null?void 0:q["*"],u.data,k),d((e=w["*"])==null?void 0:e["*"],u.data,k)};return window.addEventListener("message",l),()=>{window.removeEventListener("message",l)}},[F]);const g=t.useCallback((d,l,u)=>{var C,b;const a=F[d];if(!a){console.warn(`Origin not set for id: ${d}. Unable to send message.`);return}(b=(C=a==null?void 0:a.frameRef)==null?void 0:C.current)!=null&&b.contentWindow&&a.frameRef.current.contentWindow.postMessage({type:l,...u,instanceId:d},a.origin)},[F]),Y=t.useRef(0),v=t.useCallback(()=>`${Date.now()}-${++Y.current}`,[]),M=t.useCallback(async(d,l,u={})=>new Promise((a,C)=>{const b=v(),x=(k,w)=>{delete y.current[b],w?C(w):a(k)};y.current[b]=x,g(d,"request",{callbackId:b,requestType:l,data:u})}),[g]),S=t.useCallback((d,l)=>{g(d,"load-options",l)},[g]),$=t.useCallback((d,l)=>{g(d,"validate",l)},[g]),U=t.useMemo(()=>({registerFrame:z,unregisterFrame:N,sendMessage:g,sendRequest:M,loadOptions:S,validate:$,hasHandler:I,readyFrames:D,ready:p,addListener:(d,l,u)=>(T.current[d]||(T.current[d]={}),T.current[d][l]||(T.current[d][l]=[]),T.current[d][l].push(u),()=>{T.current[d][l]=T.current[d][l].filter(a=>a!==u)})}),[z,N,g,M,S,$,I,D,p]);return A.default.createElement(R.Provider,{value:U},A.default.createElement(de,{launcher:o,broker:c},n))},K=(n,o,c)=>{const f=t.useContext(R);if(f===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const p=t.useRef(c);t.useEffect(()=>{p.current=c},[c]),t.useEffect(()=>{if(!(!n||!o)){if(o.startsWith("key:")){const m=o.substring(4);return f.readyFrames[n]&&f.sendMessage(n,"subscribe-key",{keyChord:m}),f.addListener(n,`key-pressed:${m}`,(...j)=>p.current(...j))}return f.addListener(n,o,(...m)=>p.current(...m))}},[f,n,o])};he.propTypes={children:E.default.node.isRequired,ready:E.default.bool.isRequired,authorizationLauncher:E.default.func,credentialBroker:E.default.func};const se=oe.default.default||oe.default,Ue=1e4,Le="credentials",Ae=(n,o)=>`${n}/mm-embedded-interop?id=${encodeURIComponent(o)}&origin=${encodeURIComponent(window.location.origin)}&caps=${Le}`,ye=se.iframe`
   width: 100%;
   height: 100%;
   border: none;
-  visibility: ${r=>r.$isReady?"visible":"hidden"};
+  visibility: ${n=>n.$isReady?"visible":"hidden"};
 `,ze=se.div`
   width: 100%;
   height: 100%;
@@ -16,10 +16,10 @@
   text-align: center;
   color: #555;
   font-size: 14px;
-`,me=r=>{const u=r&&r.origin||"This app",c=r&&r.reason||"";switch(c){case"broker:scope_above_ceiling":return{title:`${u} can’t be authorized here`,detail:"It asks for permissions your role doesn’t have."};case"broker:origin_mismatch":case"broker:unknown_client":return{title:`${u} can’t be authorized here`,detail:"It isn’t registered to run at this address."};case"broker:cross_company_principal":return{title:`${u} can’t be authorized here`,detail:"It can’t be authorized for this account."};default:return c.startsWith("broker:")?{title:`${u} can’t be authorized here`,detail:"Authorization was refused."}:{title:`${u} can’t be embedded here`,detail:"It needs an update to support embedding from a different domain."}}},he=({entry:r})=>{const u=me(r);return S.default.createElement(ze,{"data-reason":r&&r.reason||void 0},S.default.createElement("div",{style:{fontWeight:600}},u.title),S.default.createElement("div",{style:{fontSize:12,color:"#888"}},u.detail))};he.propTypes={entry:k.default.shape({origin:k.default.string,name:k.default.string,reason:k.default.string,detail:k.default.object})};const Oe=se.div`
+`,me=n=>{const o=n&&n.origin||"This app",c=n&&n.reason||"";switch(c){case"broker:scope_above_ceiling":return{title:`${o} can’t be authorized here`,detail:"It asks for permissions your role doesn’t have."};case"broker:origin_mismatch":case"broker:unknown_client":return{title:`${o} can’t be authorized here`,detail:"It isn’t registered to run at this address."};case"broker:cross_company_principal":return{title:`${o} can’t be authorized here`,detail:"It can’t be authorized for this account."};default:return c.startsWith("broker:")?{title:`${o} can’t be authorized here`,detail:"Authorization was refused."}:{title:`${o} can’t be embedded here`,detail:"It needs an update to support embedding from a different domain."}}},Ee=({entry:n})=>{const o=me(n);return A.default.createElement(ze,{"data-reason":n&&n.reason||void 0},A.default.createElement("div",{style:{fontWeight:600}},o.title),A.default.createElement("div",{style:{fontSize:12,color:"#888"}},o.detail))};Ee.propTypes={entry:E.default.shape({origin:E.default.string,name:E.default.string,reason:E.default.string,detail:E.default.object})};const Oe=se.div`
   height: 100%;
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: center;
-`,ye=()=>S.default.createElement(Oe,null,S.default.createElement("div",{style:{textAlign:"center"}},"This app couldn’t be loaded as an embeddable widget.")),Ee=({id:r,src:u,path:c,onInit:f=()=>{},onTimeout:b,context:E={},params:W={},renderUnsupported:T,renderTimeout:O,...y})=>{if("isConfiguring"in y)return console.error("isConfiguring must be passed via the params prop to MMEmbeddableZone"),null;if("colorMode"in E)return console.error("colorMode must be passed via the params prop to MMEmbeddableZone"),null;if("isFullScreen"in E)return console.error("isFullScreen must be passed via the params prop to MMEmbeddableZone"),null;const q=t.useRef(),[x,Y]=t.useState(),[g,$]=t.useState(0),[V,U]=t.useState(!1),[v,F]=t.useState(!1),w=de(u),i=fe(u),a=pe(u),[o,d]=t.useState(0),[p,h]=t.useState(null),{registerFrame:L,unregisterFrame:P,sendMessage:C}=t.useContext(X),[j,A]=t.useState(),I=t.useRef(),M=t.useRef(b),H=t.useRef(f),K=t.useRef(!1),B=t.useCallback(()=>{K.current=!1,clearTimeout(I.current),$(0),U(!1),F(!1),h(null)},[]);t.useEffect(()=>{(w>0||o>0)&&B()},[w,o,B]),t.useEffect(()=>{M.current=b},[b]),t.useEffect(()=>{H.current=f},[f]),t.useEffect(()=>{g&&C(r,"set-context",{context:{...E}})},[E,r,g]),t.useEffect(()=>{g&&C(r,"set-params",{params:W})},[W,r,g]),t.useEffect(()=>{c!==void 0&&A((c==null?void 0:c.indexOf("/"))===0?c:`/${c}`)},[c]),t.useEffect(()=>{j===void 0||!g||C(r,"navigate",{path:j})},[j,g,r,C]),t.useEffect(()=>{if(!u||!r||!q)return;B();const e=new URL(u);return L(r,e.origin,q),H.current(),Y(Le(e.origin,r)),()=>{P(r)}},[u,r,L,q,B]),t.useEffect(()=>{if(!(!x||K.current))return I.current=setTimeout(()=>{U(!0),M.current&&M.current()},Se),()=>clearTimeout(I.current)},[x,u,w,o]);const _=t.useCallback(()=>{K.current=!0,clearTimeout(I.current),U(!1)},[]);N(r,"init",e=>{_(),Array.isArray(e==null?void 0:e.acceptsCredentials)&&h(e.acceptsCredentials)}),N(r,"authorize",_),N(r,"login",_),N(r,"credential-request",()=>{_(),F(!0)}),t.useEffect(()=>{if(!v||!i)return;const e=p;if(Array.isArray(e)&&!e.includes(i.kind))return;const n=i.kind==="access_token"?{accessToken:i.accessToken}:{};C(r,"credential",{...n,credential:i})},[v,i,p,r,C]),N(r,"ready",()=>{_(),$(e=>e+1)});const D=t.useRef();return N(r,"heartbeat",()=>{D.current&&clearTimeout(D.current),D.current=setTimeout(()=>{d(e=>e+1)},6e3)}),t.useEffect(()=>()=>{D.current&&clearTimeout(D.current)},[]),a?T?T(a):S.default.createElement(he,{entry:a}):V&&!g?O?O():S.default.createElement(ye,null):S.default.createElement(Ae,{key:`auth-epoch-${w}-frame-${o}`,$isReady:g,ref:q,src:x,...y})};Ee.propTypes={id:k.default.string,src:k.default.string.isRequired,path:k.default.string,onInit:k.default.func,onTimeout:k.default.func,renderUnsupported:k.default.func,renderTimeout:k.default.func},m.CREDENTIAL_KIND_ACCESS_TOKEN=oe,m.EmbeddedAuthorizationContext=G,m.MMEmbeddableZone=Ee,m.MMEmbeddableZoneContext=X,m.MMEmbeddableZoneProvider=be,m.isCrossSite=ne,m.normalizeCredential=re,m.popupAuthorizationLauncher=le,m.unsupportedCopy=me,m.useEmbeddedAuthorizations=Me,m.useEmbeddedCredential=fe,m.useEmbeddedEffect=N,m.useEmbeddedOriginEpoch=de,m.useEmbeddedUnsupported=pe,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
+`,$e=()=>A.default.createElement(Oe,null,A.default.createElement("div",{style:{textAlign:"center"}},"This app couldn’t be loaded as an embeddable widget.")),ge=({id:n,src:o,path:c,onInit:f=()=>{},onTimeout:p,context:m={},params:F={},renderUnsupported:j,renderTimeout:D,...W})=>{if("isConfiguring"in W)return console.error("isConfiguring must be passed via the params prop to MMEmbeddableZone"),null;if("colorMode"in m)return console.error("colorMode must be passed via the params prop to MMEmbeddableZone"),null;if("isFullScreen"in m)return console.error("isFullScreen must be passed via the params prop to MMEmbeddableZone"),null;const T=t.useRef(),[y,O]=t.useState(),[I,z]=t.useState(0),[N,g]=t.useState(!1),[Y,v]=t.useState(!1),M=ae(o),S=fe(o),$=pe(o),[U,d]=t.useState(0),[l,u]=t.useState(null),{registerFrame:a,unregisterFrame:C,sendMessage:b,ready:x}=t.useContext(R),[k,w]=t.useState(),L=t.useRef(),B=t.useRef(p),G=t.useRef(f),H=t.useRef(!1),P=t.useCallback(()=>{H.current=!1,clearTimeout(L.current),z(0),g(!1),v(!1),u(null)},[]);t.useEffect(()=>{(M>0||U>0)&&P()},[M,U,P]),t.useEffect(()=>{B.current=p},[p]),t.useEffect(()=>{G.current=f},[f]),t.useEffect(()=>{I&&b(n,"set-context",{context:{...m}})},[m,n,I]),t.useEffect(()=>{I&&b(n,"set-params",{params:F})},[F,n,I]),t.useEffect(()=>{c!==void 0&&w((c==null?void 0:c.indexOf("/"))===0?c:`/${c}`)},[c]),t.useEffect(()=>{k===void 0||!I||b(n,"navigate",{path:k})},[k,I,n,b]),t.useEffect(()=>{if(!o||!n||!T)return;if(!x){P(),O(void 0);return}P();const r=new URL(o);return a(n,r.origin,T),G.current(),O(Ae(r.origin,n)),()=>{C(n)}},[o,n,x,a,T,P]),t.useEffect(()=>{if(!(!y||H.current))return L.current=setTimeout(()=>{g(!0),B.current&&B.current()},Ue),()=>clearTimeout(L.current)},[y,o,M,U]);const q=t.useCallback(()=>{H.current=!0,clearTimeout(L.current),g(!1)},[]);K(n,"init",r=>{q(),Array.isArray(r==null?void 0:r.acceptsCredentials)&&u(r.acceptsCredentials)}),K(n,"authorize",q),K(n,"login",q),K(n,"credential-request",()=>{q(),v(!0)}),t.useEffect(()=>{if(!Y||!S)return;const r=l;if(Array.isArray(r)&&!r.includes(S.kind))return;const s=S.kind==="access_token"?{accessToken:S.accessToken}:{};b(n,"credential",{...s,credential:S})},[Y,S,l,n,b]),K(n,"ready",()=>{q(),z(r=>r+1)});const e=t.useRef();return K(n,"heartbeat",()=>{e.current&&clearTimeout(e.current),e.current=setTimeout(()=>{d(r=>r+1)},6e3)}),t.useEffect(()=>()=>{e.current&&clearTimeout(e.current)},[]),$?j?j($):A.default.createElement(Ee,{entry:$}):N&&!I?D?D():A.default.createElement($e,null):A.default.createElement(ye,{key:`auth-epoch-${M}-frame-${U}`,$isReady:I,ref:T,src:y,...W})};ge.propTypes={id:E.default.string,src:E.default.string.isRequired,path:E.default.string,onInit:E.default.func,onTimeout:E.default.func,renderUnsupported:E.default.func,renderTimeout:E.default.func},h.CREDENTIAL_KIND_ACCESS_TOKEN=ue,h.EmbeddedAuthorizationContext=Q,h.MMEmbeddableZone=ge,h.MMEmbeddableZoneContext=R,h.MMEmbeddableZoneProvider=he,h.isCrossSite=ne,h.normalizeCredential=re,h.popupAuthorizationLauncher=le,h.unsupportedCopy=me,h.useEmbeddedAuthorizations=Se,h.useEmbeddedCredential=fe,h.useEmbeddedEffect=K,h.useEmbeddedOriginEpoch=ae,h.useEmbeddedUnsupported=pe,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@machinemetrics/mm-react-embeddable",
-  "version": "2.0.0-6",
+  "version": "2.0.0-7",
   "license": "MIT",
   "module": "dist/mm-react-embeddable.es.js",
   "main": "dist/mm-react-embeddable.cjs.js",