@machinemetrics/mm-react-embeddable 1.4.0-5 → 1.4.0-7

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

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),C=require("prop-types"),v=require("styled-components"),H=t.createContext(null),D=t.createContext({pending:[],authorize:()=>{},approve:()=>{},complete:()=>{},dismiss:()=>{},originEpochs:{},credentials:{},unsupported:{}}),ee="access_token",N=s=>s?s.kind?s:s.accessToken?{kind:ee,accessToken:s.accessToken,expiresAt:s.expiresAt||null}:null:null,de=new Set(["host_not_allowed","invalid_token","provider_unavailable"]),G=typeof window!="undefined"&&window.location.protocol==="https:",fe=8e3,K=s=>{try{return new URL(s).origin}catch{return null}},Q=(s,c)=>{const u=c==null?void 0:c.origin;return!u||K(s==null?void 0:s.authUrl)!==u?null:u},X=s=>{if(!s||/^\d{1,3}(?:\.\d{1,3}){3}$/.test(s)||s.includes(":"))return s;const c=s.split(".");return c.length<=2?s:c.slice(-2).join(".")},te=(s,c)=>{try{const u=new URL(s),f=new URL(c);return u.protocol!==f.protocol?!0:X(u.hostname)!==X(f.hostname)}catch{return!0}},ne=(s,{onBlocked:c,onClosed:u})=>{const f=window.open(s.authUrl,"mm-embed-auth","popup,width=600,height=700");if(!f)return c(),()=>{};const g=setInterval(()=>{f.closed&&(clearInterval(g),u())},1e3);return()=>clearInterval(g)},re=({children:s,launcher:c,broker:u})=>{const f=t.useContext(H),[g,E]=t.useState({}),[y,w]=t.useState({}),[x,T]=t.useState({}),[I,S]=t.useState({}),$=t.useRef(x);$.current=x;const p=t.useRef(null),F=t.useRef({}),O=t.useRef({}),_=t.useRef({}),U=t.useRef(u);U.current=u;const M=t.useCallback(e=>{const n=O.current[e];if(!n)return;const r=a=>!a[e]||a[e].clientId?a:{...a,[e]:{...a[e],clientId:n}};E(r),S(r)},[]),P=t.useCallback((e,n)=>{e&&(S(r=>r[e]?r:{...r,[e]:{origin:e,reason:n,clientId:O.current[e]||null}}),M(e))},[M]),o=t.useCallback((e,{v2:n=!1,origin:r=null}={})=>{r&&(n&&$.current[r]||(E(a=>a[r]?a:{...a,[r]:{origin:r,authUrl:e.authUrl,silentUrl:e.silentUrl||null,status:n&&U.current?"broker":n&&e.silentUrl&&G?"silent":"interactive",v2:n,scope:e.scope||null,acceptsCredentials:_.current[r]||null,consent:null,error:null,clientId:e.clientId||O.current[r]||null,popupBlocked:!1}}),M(r)))},[M]),l=t.useCallback(e=>{E(n=>{if(!n[e])return n;const r={...n};return delete r[e],r})},[]),i=t.useCallback(e=>{e&&(l(e),w(n=>({...n,[e]:(n[e]||0)+1})))},[l]),d=t.useCallback(e=>{E(n=>!n[e]||n[e].status==="interactive"?n:{...n,[e]:{...n[e],status:"interactive"}})},[]),m=t.useCallback(e=>{l(e.origin)},[l]),h=t.useCallback((e,n)=>{const r=Q(e,n);if(r){if(te(r,window.location.origin)){P(r,"cross-site-legacy");return}o(e,{origin:r})}},[o,P]);t.useEffect(()=>{if(!f)return;const e=[f.addListener("*","init",(n,r)=>{r!=null&&r.origin&&(n!=null&&n.clientId)&&(O.current[r.origin]=n.clientId,M(r.origin)),r!=null&&r.origin&&Array.isArray(n==null?void 0:n.acceptsCredentials)&&(_.current[r.origin]=n.acceptsCredentials)}),f.addListener("*","authorize",h),f.addListener("*","login",h),f.addListener("*","credential-request",(n,r)=>o(n,{v2:!0,origin:Q(n,r)}))];return()=>e.forEach(n=>n())},[f,h,o,M]),t.useEffect(()=>{const e=n=>{const r=n==null?void 0:n.data;if(!r||r.type!=="authorized"&&r.type!=="authorize-failed")return;const a=K(r.authUrl);if(!(!a||n.origin!==a)){if(r.type==="authorized"){r.accessToken?(T(b=>({...b,[a]:N({accessToken:r.accessToken})})),l(a)):i(a);return}d(a)}};return window.addEventListener("message",e),()=>window.removeEventListener("message",e)},[l,i,d]);const z=t.useCallback((e,n)=>{const r=e==null?void 0:e.origin,a=N(n);!r||!a||(T(b=>({...b,[r]:a})),l(r))},[l]),k=t.useCallback((e,n)=>{E(r=>r[e]?{...r,[e]:{...r[e],...n}}:r)},[]),R=t.useCallback(async(e,{approve:n}={})=>{const r=U.current,{origin:a}=e;let b;try{b=await r({origin:a,clientId:e.clientId,scope:e.scope,authUrl:e.authUrl},{approve:n})}catch{n?k(a,{error:{reason:"broker_unavailable"}}):k(a,{status:e.silentUrl&&G?"silent":"interactive"});return}if((b==null?void 0:b.status)===200&&b.credential){z(e,b.credential);return}if((b==null?void 0:b.status)===409&&b.consentRequired){k(a,{status:"interactive",consent:{client:b.client||null,stepUp:!!b.stepUp,scope:b.scope||e.scope},error:null});return}const W=(b==null?void 0:b.error)||"broker_error";if(!n&&de.has(W)){k(a,{status:e.silentUrl&&G?"silent":"interactive"});return}if(n&&W==="consent_denied"){k(a,{error:null});return}l(a),S(J=>({...J,[a]:{origin:a,reason:`broker:${W}`,detail:b||null,clientId:e.clientId||O.current[a]||null}}))},[z,k,l]),L=t.useRef({});t.useEffect(()=>{Object.values(g).forEach(e=>{e.status!=="broker"||L.current[e.origin]||(L.current[e.origin]=!0,R(e).finally(()=>{delete L.current[e.origin]}))})},[g,R]);const q=t.useCallback(e=>!U.current||!(e!=null&&e.consent)?Promise.resolve():R(e,{approve:!0}),[R]);t.useEffect(()=>{const e=F.current;Object.values(g).forEach(n=>{n.status==="silent"&&!e[n.origin]&&(e[n.origin]=setTimeout(()=>{delete e[n.origin],d(n.origin)},fe))}),Object.keys(e).forEach(n=>{(!g[n]||g[n].status!=="silent")&&(clearTimeout(e[n]),delete e[n])})},[g,d]),t.useEffect(()=>()=>{p.current&&p.current(),Object.values(F.current).forEach(clearTimeout)},[]);const A=t.useCallback(e=>{p.current&&(p.current(),p.current=null);const n=c||ne;p.current=n(e,{onBlocked:()=>{E(r=>r[e.origin]?{...r,[e.origin]:{...r[e.origin],popupBlocked:!0}}:r)},onClosed:()=>{if(e.v2){G&&E(r=>!r[e.origin]||!r[e.origin].silentUrl?r:{...r,[e.origin]:{...r[e.origin],status:"silent"}});return}i(e.origin)}})},[c,i]),j={pending:Object.values(g).filter(e=>e.status==="interactive"),authorize:A,approve:q,complete:z,dismiss:m,originEpochs:y,credentials:x,unsupported:I},Z=Object.values(g).filter(e=>e.status==="silent"&&e.silentUrl);return t.createElement(D.Provider,{value:j},s,Z.map(e=>t.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"}})))};re.propTypes={children:C.node,launcher:C.func,broker:C.func};const se=()=>t.useContext(D),oe=s=>{const{originEpochs:c}=t.useContext(D),u=K(s);return u&&c[u]||0},ie=s=>{const{credentials:c}=t.useContext(D),u=K(s);return u&&c[u]||null},ce=s=>{const{unsupported:c}=t.useContext(D),u=K(s);return u&&c[u]||null},ue=({children:s,authorizationLauncher:c,credentialBroker:u})=>{const[f,g]=t.useState({}),[E,y]=t.useState({}),w=t.useRef({}),x=t.useRef({}),T=t.useRef({}),I=t.useCallback((o,l)=>{var i;return!!((i=T.current[o])!=null&&i.has(l))},[]),S=t.useCallback((o,l,i)=>{g(d=>({...d,[o]:{origin:l,frameRef:i}}))},[]),$=t.useCallback(o=>{g(l=>{const i={...l};return delete i[o],i}),y(l=>{const i={...l};return delete i[o],i}),delete T.current[o]},[]);t.useEffect(()=>{const o=(i=[],d,m)=>{i.forEach(h=>h(d,m))},l=i=>{var L,q,A,j,Z,e,n;if(!((L=i==null?void 0:i.data)!=null&&L.instanceId))return;const{instanceId:d,type:m}=i.data,h=f[d],z=(A=(q=h==null?void 0:h.frameRef)==null?void 0:q.current)==null?void 0:A.contentWindow;if(!z||i.source!==z||i.origin!==h.origin)return;const k={origin:i.origin},R=w.current;if(m==="response"){const{callbackId:r,response:a,error:b}=i.data,W=x.current[r];W&&(W(a,b),delete x.current[r]);return}if(m==="mark-registered"){const{requestType:r}=i.data;T.current[d]||(T.current[d]=new Set),T.current[d].add(r);return}m==="ready"&&y(r=>({...r,[d]:!0})),o((j=R[d])==null?void 0:j[m],i.data,k),o((Z=R["*"])==null?void 0:Z[m],i.data,k),o((e=R[d])==null?void 0:e["*"],i.data,k),o((n=R["*"])==null?void 0:n["*"],i.data,k)};return window.addEventListener("message",l),()=>{window.removeEventListener("message",l)}},[f]);const p=t.useCallback((o,l,i)=>{var m,h;const d=f[o];if(!d){console.warn(`Origin not set for id: ${o}. Unable to send message.`);return}(h=(m=d==null?void 0:d.frameRef)==null?void 0:m.current)!=null&&h.contentWindow&&d.frameRef.current.contentWindow.postMessage({type:l,...i,instanceId:o},d.origin)},[f]),F=t.useRef(0),O=t.useCallback(()=>`${Date.now()}-${++F.current}`,[]),_=t.useCallback(async(o,l,i={})=>new Promise((d,m)=>{const h=O(),z=(k,R)=>{delete x.current[h],R?m(R):d(k)};x.current[h]=z,p(o,"request",{callbackId:h,requestType:l,data:i})}),[p]),U=t.useCallback((o,l)=>{p(o,"load-options",l)},[p]),M=t.useCallback((o,l)=>{p(o,"validate",l)},[p]),P=t.useMemo(()=>({registerFrame:S,unregisterFrame:$,sendMessage:p,sendRequest:_,loadOptions:U,validate:M,hasHandler:I,readyFrames:E,addListener:(o,l,i)=>(w.current[o]||(w.current[o]={}),w.current[o][l]||(w.current[o][l]=[]),w.current[o][l].push(i),()=>{w.current[o][l]=w.current[o][l].filter(d=>d!==i)})}),[S,$,p,_,U,M,I,E]);return t.createElement(H.Provider,{value:P},t.createElement(re,{launcher:c,broker:u},s))},B=(s,c,u)=>{const f=t.useContext(H);if(f===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const g=t.useRef(u);t.useEffect(()=>{g.current=u},[u]),t.useEffect(()=>{if(!(!s||!c)){if(c.startsWith("key:")){const E=c.substring(4);return f.readyFrames[s]&&f.sendMessage(s,"subscribe-key",{keyChord:E}),f.addListener(s,`key-pressed:${E}`,(...w)=>g.current(...w))}return f.addListener(s,c,(...E)=>g.current(...E))}},[f,s,c])};ue.propTypes={children:C.node.isRequired,authorizationLauncher:C.func,credentialBroker:C.func};const V=v.default||v,pe=1e4,be="credentials",Y=(s,c)=>`${s}/mm-embedded-interop?id=${c}&origin=${window.location.origin}&caps=${be}`,ge=V.iframe`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),k=require("prop-types"),B=require("styled-components"),H=t.createContext(null),D=t.createContext({pending:[],authorize:()=>{},approve:()=>{},complete:()=>{},dismiss:()=>{},originEpochs:{},credentials:{},unsupported:{}}),ee="access_token",N=r=>r?r.kind?r:r.accessToken?{kind:ee,accessToken:r.accessToken,expiresAt:r.expiresAt||null}:null:null,fe=new Set(["host_not_allowed","invalid_token","provider_unavailable"]),G=typeof window!="undefined"&&window.location.protocol==="https:",pe=8e3,K=r=>{try{return new URL(r).origin}catch{return null}},Q=(r,o)=>{const i=o==null?void 0:o.origin;return!i||K(r==null?void 0:r.authUrl)!==i?null:i},X=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:X(i.hostname)!==X(f.hostname)}catch{return!0}},ne=(r,{onBlocked:o,onClosed:i})=>{const f=window.open(r.authUrl,"mm-embed-auth","popup,width=600,height=700");if(!f)return o(),()=>{};const h=setInterval(()=>{f.closed&&(clearInterval(h),i())},1e3);return()=>clearInterval(h)},re=({children:r,launcher:o,broker:i})=>{const f=t.useContext(H),[h,E]=t.useState({}),[L,w]=t.useState({}),[x,T]=t.useState({}),[z,M]=t.useState({}),P=t.useRef(x);P.current=x;const p=t.useRef(null),F=t.useRef({}),_=t.useRef({}),y=t.useRef({}),S=t.useRef(i);S.current=i;const I=t.useCallback(e=>{const n=_.current[e];if(!n)return;const s=l=>!l[e]||l[e].clientId?l:{...l,[e]:{...l[e],clientId:n}};E(s),M(s)},[]),$=t.useCallback((e,n)=>{e&&(M(s=>s[e]?s:{...s,[e]:{origin:e,reason:n,clientId:_.current[e]||null}}),I(e))},[I]),c=t.useCallback((e,{v2:n=!1,origin:s=null}={})=>{s&&(n&&P.current[s]||(E(l=>l[s]?l:{...l,[s]:{origin:s,authUrl:e.authUrl,silentUrl:e.silentUrl||null,status:n&&S.current?"broker":n&&e.silentUrl&&G?"silent":"interactive",v2:n,scope:e.scope||null,acceptsCredentials:y.current[s]||null,consent:null,error:null,clientId:e.clientId||_.current[s]||null,popupBlocked:!1}}),I(s)))},[I]),a=t.useCallback(e=>{E(n=>{if(!n[e])return n;const s={...n};return delete s[e],s})},[]),u=t.useCallback(e=>{e&&(a(e),w(n=>({...n,[e]:(n[e]||0)+1})))},[a]),d=t.useCallback(e=>{E(n=>!n[e]||n[e].status==="interactive"?n:{...n,[e]:{...n[e],status:"interactive"}})},[]),g=t.useCallback(e=>{a(e.origin)},[a]),m=t.useCallback((e,n)=>{const s=Q(e,n);if(s){if(te(s,window.location.origin)){$(s,"cross-site-legacy");return}c(e,{origin:s})}},[c,$]);t.useEffect(()=>{if(!f)return;const e=[f.addListener("*","init",(n,s)=>{s!=null&&s.origin&&(n!=null&&n.clientId)&&(_.current[s.origin]=n.clientId,I(s.origin)),s!=null&&s.origin&&Array.isArray(n==null?void 0:n.acceptsCredentials)&&(y.current[s.origin]=n.acceptsCredentials)}),f.addListener("*","authorize",m),f.addListener("*","login",m),f.addListener("*","credential-request",(n,s)=>c(n,{v2:!0,origin:Q(n,s)}))];return()=>e.forEach(n=>n())},[f,m,c,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=K(s.authUrl);if(!(!l||n.origin!==l)){if(s.type==="authorized"){s.accessToken?(T(b=>({...b,[l]:N({accessToken:s.accessToken})})),a(l)):u(l);return}d(l)}};return window.addEventListener("message",e),()=>window.removeEventListener("message",e)},[a,u,d]);const U=t.useCallback((e,n)=>{const s=e==null?void 0:e.origin,l=N(n);!s||!l||(T(b=>({...b,[s]:l})),a(s))},[a]),C=t.useCallback((e,n)=>{E(s=>s[e]?{...s,[e]:{...s[e],...n}}:s)},[]),R=t.useCallback(async(e,{approve:n}={})=>{const s=S.current,{origin:l}=e;let b;try{b=await s({origin:l,clientId:e.clientId,scope:e.scope,authUrl:e.authUrl},{approve:n})}catch{n?C(l,{error:{reason:"broker_unavailable"}}):C(l,{status:e.silentUrl&&G?"silent":"interactive"});return}if((b==null?void 0:b.status)===200&&b.credential){U(e,b.credential);return}if((b==null?void 0:b.status)===409&&b.consentRequired){C(l,{status:"interactive",consent:{client:b.client||null,stepUp:!!b.stepUp,scope:b.scope||e.scope},error:null});return}const Z=(b==null?void 0:b.error)||"broker_error";if(!n&&fe.has(Z)){C(l,{status:e.silentUrl&&G?"silent":"interactive"});return}if(n&&Z==="consent_denied"){C(l,{error:null});return}a(l),M(J=>({...J,[l]:{origin:l,reason:`broker:${Z}`,detail:b||null,clientId:e.clientId||_.current[l]||null}}))},[U,C,a]),O=t.useRef({});t.useEffect(()=>{Object.values(h).forEach(e=>{e.status!=="broker"||O.current[e.origin]||(O.current[e.origin]=!0,R(e).finally(()=>{delete O.current[e.origin]}))})},[h,R]);const v=t.useCallback(e=>!S.current||!(e!=null&&e.consent)?Promise.resolve():R(e,{approve:!0}),[R]);t.useEffect(()=>{const e=F.current;Object.values(h).forEach(n=>{n.status==="silent"&&!e[n.origin]&&(e[n.origin]=setTimeout(()=>{delete e[n.origin],d(n.origin)},pe))}),Object.keys(e).forEach(n=>{(!h[n]||h[n].status!=="silent")&&(clearTimeout(e[n]),delete e[n])})},[h,d]),t.useEffect(()=>()=>{p.current&&p.current(),Object.values(F.current).forEach(clearTimeout)},[]);const A=t.useCallback(e=>{p.current&&(p.current(),p.current=null);const n=o||ne;p.current=n(e,{onBlocked:()=>{E(s=>s[e.origin]?{...s,[e.origin]:{...s[e.origin],popupBlocked:!0}}:s)},onClosed:()=>{if(e.v2){G&&E(s=>!s[e.origin]||!s[e.origin].silentUrl?s:{...s,[e.origin]:{...s[e.origin],status:"silent"}});return}u(e.origin)}})},[o,u]),j={pending:Object.values(h).filter(e=>e.status==="interactive"),authorize:A,approve:v,complete:U,dismiss:g,originEpochs:L,credentials:x,unsupported:z},W=Object.values(h).filter(e=>e.status==="silent"&&e.silentUrl);return t.createElement(D.Provider,{value:j},r,W.map(e=>t.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"}})))};re.propTypes={children:k.node,launcher:k.func,broker:k.func};const se=()=>t.useContext(D),oe=r=>{const{originEpochs:o}=t.useContext(D),i=K(r);return i&&o[i]||0},ie=r=>{const{credentials:o}=t.useContext(D),i=K(r);return i&&o[i]||null},ce=r=>{const{unsupported:o}=t.useContext(D),i=K(r);return i&&o[i]||null},ue=({children:r,authorizationLauncher:o,credentialBroker:i})=>{const[f,h]=t.useState({}),[E,L]=t.useState({}),w=t.useRef({}),x=t.useRef({}),T=t.useRef({}),z=t.useCallback((c,a)=>{var u;return!!((u=T.current[c])!=null&&u.has(a))},[]),M=t.useCallback((c,a,u)=>{h(d=>({...d,[c]:{origin:a,frameRef:u}}))},[]),P=t.useCallback(c=>{h(a=>{const u={...a};return delete u[c],u}),L(a=>{const u={...a};return delete u[c],u}),delete T.current[c]},[]);t.useEffect(()=>{const c=(u=[],d,g)=>{u.forEach(m=>m(d,g))},a=u=>{var O,v,A,j,W,e,n;if(!((O=u==null?void 0:u.data)!=null&&O.instanceId))return;const{instanceId:d,type:g}=u.data,m=f[d],U=(A=(v=m==null?void 0:m.frameRef)==null?void 0:v.current)==null?void 0:A.contentWindow;if(!U||u.source!==U||u.origin!==m.origin)return;const C={origin:u.origin},R=w.current;if(g==="response"){const{callbackId:s,response:l,error:b}=u.data,Z=x.current[s];Z&&(Z(l,b),delete x.current[s]);return}if(g==="mark-registered"){const{requestType:s}=u.data;T.current[d]||(T.current[d]=new Set),T.current[d].add(s);return}g==="ready"&&L(s=>({...s,[d]:!0})),c((j=R[d])==null?void 0:j[g],u.data,C),c((W=R["*"])==null?void 0:W[g],u.data,C),c((e=R[d])==null?void 0:e["*"],u.data,C),c((n=R["*"])==null?void 0:n["*"],u.data,C)};return window.addEventListener("message",a),()=>{window.removeEventListener("message",a)}},[f]);const p=t.useCallback((c,a,u)=>{var g,m;const d=f[c];if(!d){console.warn(`Origin not set for id: ${c}. Unable to send message.`);return}(m=(g=d==null?void 0:d.frameRef)==null?void 0:g.current)!=null&&m.contentWindow&&d.frameRef.current.contentWindow.postMessage({type:a,...u,instanceId:c},d.origin)},[f]),F=t.useRef(0),_=t.useCallback(()=>`${Date.now()}-${++F.current}`,[]),y=t.useCallback(async(c,a,u={})=>new Promise((d,g)=>{const m=_(),U=(C,R)=>{delete x.current[m],R?g(R):d(C)};x.current[m]=U,p(c,"request",{callbackId:m,requestType:a,data:u})}),[p]),S=t.useCallback((c,a)=>{p(c,"load-options",a)},[p]),I=t.useCallback((c,a)=>{p(c,"validate",a)},[p]),$=t.useMemo(()=>({registerFrame:M,unregisterFrame:P,sendMessage:p,sendRequest:y,loadOptions:S,validate:I,hasHandler:z,readyFrames:E,addListener:(c,a,u)=>(w.current[c]||(w.current[c]={}),w.current[c][a]||(w.current[c][a]=[]),w.current[c][a].push(u),()=>{w.current[c][a]=w.current[c][a].filter(d=>d!==u)})}),[M,P,p,y,S,I,z,E]);return t.createElement(H.Provider,{value:$},t.createElement(re,{launcher:o,broker:i},r))},q=(r,o,i)=>{const f=t.useContext(H);if(f===null)throw new Error("useEmbeddedEffect must be used within a MMEmbeddableZoneProvider");const h=t.useRef(i);t.useEffect(()=>{h.current=i},[i]),t.useEffect(()=>{if(!(!r||!o)){if(o.startsWith("key:")){const E=o.substring(4);return f.readyFrames[r]&&f.sendMessage(r,"subscribe-key",{keyChord:E}),f.addListener(r,`key-pressed:${E}`,(...w)=>h.current(...w))}return f.addListener(r,o,(...E)=>h.current(...E))}},[f,r,o])};ue.propTypes={children:k.node.isRequired,authorizationLauncher:k.func,credentialBroker:k.func};const V=B.default||B,be=1e4,he="credentials",Y=(r,o)=>`${r}/mm-embedded-interop?id=${o}&origin=${window.location.origin}&caps=${he}`,ge=V.iframe`
   width: 100%;
   height: 100%;
   border: none;
-  visibility: ${s=>s.$isReady?"visible":"hidden"};
+  visibility: ${r=>r.$isReady?"visible":"hidden"};
 `,me=V.div`
   width: 100%;
   height: 100%;
@@ -16,13 +16,13 @@
   text-align: center;
   color: #555;
   font-size: 14px;
-`,le=({entry:s})=>t.createElement(me,null,t.createElement("div",{style:{fontWeight:600}},s&&s.origin||"This app"," can’t be embedded here"),t.createElement("div",{style:{fontSize:12,color:"#888"}},"It needs an update to support embedding from a different domain."));le.propTypes={entry:C.shape({origin:C.string,name:C.string,reason:C.string})};const he=V.div`
+`,ae=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."}}},le=({entry:r})=>{const o=ae(r);return t.createElement(me,{"data-reason":r&&r.reason||void 0},t.createElement("div",{style:{fontWeight:600}},o.title),t.createElement("div",{style:{fontSize:12,color:"#888"}},o.detail))};le.propTypes={entry:k.shape({origin:k.string,name:k.string,reason:k.string,detail:k.object})};const Ee=V.div`
   height: 100%;
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: center;
-`,Ee=()=>t.createElement(he,null,t.createElement("div",{style:{textAlign:"center"}},"This app couldn’t be loaded as an embeddable widget.")),ae=({id:s,src:c,path:u,onInit:f=()=>{},onTimeout:g,context:E={},params:y={},renderUnsupported:w,renderTimeout:x,...T})=>{if("isConfiguring"in T)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 I=t.useRef(),[S,$]=t.useState(),[p,F]=t.useState(0),[O,_]=t.useState(!1),[U,M]=t.useState(!1),P=oe(c),o=ie(c),l=ce(c);t.useEffect(()=>{P>0&&F(0)},[P]);const{registerFrame:i,unregisterFrame:d,sendMessage:m}=t.useContext(H),[h,z]=t.useState(),k=t.useRef(),R=t.useRef(g),L=t.useRef(f),q=t.useRef(!1);t.useEffect(()=>{R.current=g},[g]),t.useEffect(()=>{L.current=f},[f]),t.useEffect(()=>{p&&m(s,"set-context",{context:{...E}})},[E,s,p]),t.useEffect(()=>{p&&m(s,"set-params",{params:y})},[y,s,p]),t.useEffect(()=>{u!==void 0&&z((u==null?void 0:u.indexOf("/"))===0?u:`/${u}`)},[u]),t.useEffect(()=>{h===void 0||!p||m(s,"navigate",{path:h})},[h,p,s,m]),t.useEffect(()=>{if(!c||!s||!I)return;const n=new URL(c);return i(s,n.origin,I),L.current(),$(Y(n.origin,s)),()=>{d(s)}},[c,s,i,I]),t.useEffect(()=>{if(!(!S||q.current))return k.current=setTimeout(()=>{_(!0),R.current&&R.current()},pe),()=>clearTimeout(k.current)},[S]);const A=t.useCallback(()=>{q.current=!0,clearTimeout(k.current),_(!1)},[]),[j,Z]=t.useState(null);B(s,"init",n=>{A(),Array.isArray(n==null?void 0:n.acceptsCredentials)&&Z(n.acceptsCredentials)}),B(s,"authorize",A),B(s,"login",A),B(s,"credential-request",()=>{A(),M(!0)}),t.useEffect(()=>{if(!U||!o)return;const n=j;if(Array.isArray(n)&&!n.includes(o.kind))return;const r=o.kind==="access_token"?{accessToken:o.accessToken}:{};m(s,"credential",{...r,credential:o})},[U,o,j,s,m]),B(s,"ready",()=>{A(),F(n=>n+1)});const e=t.useRef();return B(s,"heartbeat",()=>{e.current&&clearTimeout(e.current),e.current=setTimeout(()=>{if(I.current){const n=new URL(c);I.current.src=Y(n.origin,s)}},6e3)}),t.useEffect(()=>()=>{e.current&&clearTimeout(e.current)},[]),l?w?w(l):t.createElement(le,{entry:l}):O&&!p?x?x():t.createElement(Ee,null):t.createElement(ge,{key:`auth-epoch-${P}`,$isReady:p,ref:I,src:S,...T})};ae.propTypes={id:C.string,src:C.string.isRequired,path:C.string,onInit:C.func,onTimeout:C.func,renderUnsupported:C.func,renderTimeout:C.func};const ke=v.div`
+`,ke=()=>t.createElement(Ee,null,t.createElement("div",{style:{textAlign:"center"}},"This app couldn’t be loaded as an embeddable widget.")),de=({id:r,src:o,path:i,onInit:f=()=>{},onTimeout:h,context:E={},params:L={},renderUnsupported:w,renderTimeout:x,...T})=>{if("isConfiguring"in T)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 z=t.useRef(),[M,P]=t.useState(),[p,F]=t.useState(0),[_,y]=t.useState(!1),[S,I]=t.useState(!1),$=oe(o),c=ie(o),a=ce(o);t.useEffect(()=>{$>0&&F(0)},[$]);const{registerFrame:u,unregisterFrame:d,sendMessage:g}=t.useContext(H),[m,U]=t.useState(),C=t.useRef(),R=t.useRef(h),O=t.useRef(f),v=t.useRef(!1);t.useEffect(()=>{R.current=h},[h]),t.useEffect(()=>{O.current=f},[f]),t.useEffect(()=>{p&&g(r,"set-context",{context:{...E}})},[E,r,p]),t.useEffect(()=>{p&&g(r,"set-params",{params:L})},[L,r,p]),t.useEffect(()=>{i!==void 0&&U((i==null?void 0:i.indexOf("/"))===0?i:`/${i}`)},[i]),t.useEffect(()=>{m===void 0||!p||g(r,"navigate",{path:m})},[m,p,r,g]),t.useEffect(()=>{if(!o||!r||!z)return;const n=new URL(o);return u(r,n.origin,z),O.current(),P(Y(n.origin,r)),()=>{d(r)}},[o,r,u,z]),t.useEffect(()=>{if(!(!M||v.current))return C.current=setTimeout(()=>{y(!0),R.current&&R.current()},be),()=>clearTimeout(C.current)},[M]);const A=t.useCallback(()=>{v.current=!0,clearTimeout(C.current),y(!1)},[]),[j,W]=t.useState(null);q(r,"init",n=>{A(),Array.isArray(n==null?void 0:n.acceptsCredentials)&&W(n.acceptsCredentials)}),q(r,"authorize",A),q(r,"login",A),q(r,"credential-request",()=>{A(),I(!0)}),t.useEffect(()=>{if(!S||!c)return;const n=j;if(Array.isArray(n)&&!n.includes(c.kind))return;const s=c.kind==="access_token"?{accessToken:c.accessToken}:{};g(r,"credential",{...s,credential:c})},[S,c,j,r,g]),q(r,"ready",()=>{A(),F(n=>n+1)});const e=t.useRef();return q(r,"heartbeat",()=>{e.current&&clearTimeout(e.current),e.current=setTimeout(()=>{if(z.current){const n=new URL(o);z.current.src=Y(n.origin,r)}},6e3)}),t.useEffect(()=>()=>{e.current&&clearTimeout(e.current)},[]),a?w?w(a):t.createElement(le,{entry:a}):_&&!p?x?x():t.createElement(ke,null):t.createElement(ge,{key:`auth-epoch-${$}`,$isReady:p,ref:z,src:M,...T})};de.propTypes={id:k.string,src:k.string.isRequired,path:k.string,onInit:k.func,onTimeout:k.func,renderUnsupported:k.func,renderTimeout:k.func};const Ce=B.div`
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.45);
@@ -30,7 +30,7 @@
   align-items: center;
   justify-content: center;
   z-index: 10000;
-`,Ce=v.div`
+`,Re=B.div`
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
@@ -39,13 +39,13 @@
   max-width: calc(100vw - 32px);
   font-family: sans-serif;
   color: #222;
-`,Re=v.div`
+`,we=B.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 0;
   gap: 16px;
-`,we=v.button`
+`,xe=B.button`
   background: #16a500;
   color: #fff;
   border: none;
@@ -54,8 +54,8 @@
   font-size: 14px;
   cursor: pointer;
   white-space: nowrap;
-`,xe=v.p`
+`,Te=B.p`
   color: #b3261e;
   font-size: 13px;
   margin: 4px 0 0;
-`,Te=()=>{const{pending:s,authorize:c}=se();return s.length===0?null:t.createElement(ke,null,t.createElement(Ce,null,t.createElement("h3",{style:{margin:"0 0 8px"}},"Authorization Required"),t.createElement("p",{style:{margin:"0 0 12px",fontSize:14,color:"#555"}},"The following apps need you to sign in and authorize them before they can load."),s.map(u=>t.createElement("div",{key:u.origin},t.createElement(Re,null,t.createElement("div",null,t.createElement("div",{style:{fontWeight:600}},u.origin)),t.createElement(we,{onClick:()=>c(u)},"Authorize")),u.popupBlocked&&t.createElement(xe,null,"The sign-in window was blocked. Allow popups for this site, then try again.")))))};exports.CREDENTIAL_KIND_ACCESS_TOKEN=ee;exports.EmbeddedAuthorizationContext=D;exports.EmbeddedAuthorizationPrompt=Te;exports.MMEmbeddableZone=ae;exports.MMEmbeddableZoneContext=H;exports.MMEmbeddableZoneProvider=ue;exports.isCrossSite=te;exports.normalizeCredential=N;exports.popupAuthorizationLauncher=ne;exports.useEmbeddedAuthorizations=se;exports.useEmbeddedCredential=ie;exports.useEmbeddedEffect=B;exports.useEmbeddedOriginEpoch=oe;exports.useEmbeddedUnsupported=ce;
+`,ze=()=>{const{pending:r,authorize:o}=se();return r.length===0?null:t.createElement(Ce,null,t.createElement(Re,null,t.createElement("h3",{style:{margin:"0 0 8px"}},"Authorization Required"),t.createElement("p",{style:{margin:"0 0 12px",fontSize:14,color:"#555"}},"The following apps need you to sign in and authorize them before they can load."),r.map(i=>t.createElement("div",{key:i.origin},t.createElement(we,null,t.createElement("div",null,t.createElement("div",{style:{fontWeight:600}},i.origin)),t.createElement(xe,{onClick:()=>o(i)},"Authorize")),i.popupBlocked&&t.createElement(Te,null,"The sign-in window was blocked. Allow popups for this site, then try again.")))))};exports.CREDENTIAL_KIND_ACCESS_TOKEN=ee;exports.EmbeddedAuthorizationContext=D;exports.EmbeddedAuthorizationPrompt=ze;exports.MMEmbeddableZone=de;exports.MMEmbeddableZoneContext=H;exports.MMEmbeddableZoneProvider=ue;exports.isCrossSite=te;exports.normalizeCredential=N;exports.popupAuthorizationLauncher=ne;exports.unsupportedCopy=ae;exports.useEmbeddedAuthorizations=se;exports.useEmbeddedCredential=ie;exports.useEmbeddedEffect=q;exports.useEmbeddedOriginEpoch=oe;exports.useEmbeddedUnsupported=ce;

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

@@ -1,5 +1,5 @@
-import h, { createContext as oe, useContext as H, useState as C, useRef as R, useCallback as m, useEffect as k, useMemo as ue } from "react";
-import T from "prop-types";
+import m, { createContext as oe, useContext as H, useState as U, useRef as R, useCallback as h, useEffect as k, useMemo as ue } from "react";
+import x from "prop-types";
 import D from "styled-components";
 const Y = oe(null), J = oe({
   pending: [],
@@ -24,56 +24,56 @@ const Y = oe(null), J = oe({
   } catch {
     return null;
   }
-}, ne = (r, i) => {
-  const c = i == null ? void 0 : i.origin;
-  return !c || Q(r == null ? void 0 : r.authUrl) !== c ? null : c;
-}, re = (r) => {
+}, re = (r, s) => {
+  const o = s == null ? void 0 : s.origin;
+  return !o || Q(r == null ? void 0 : r.authUrl) !== o ? null : o;
+}, ne = (r) => {
   if (!r || /^\d{1,3}(?:\.\d{1,3}){3}$/.test(r) || r.includes(":"))
     return r;
-  const i = r.split(".");
-  return i.length <= 2 ? r : i.slice(-2).join(".");
-}, fe = (r, i) => {
+  const s = r.split(".");
+  return s.length <= 2 ? r : s.slice(-2).join(".");
+}, fe = (r, s) => {
   try {
-    const c = new URL(r), d = new URL(i);
-    return c.protocol !== d.protocol ? !0 : re(c.hostname) !== re(d.hostname);
+    const o = new URL(r), d = new URL(s);
+    return o.protocol !== d.protocol ? !0 : ne(o.hostname) !== ne(d.hostname);
   } catch {
     return !0;
   }
-}, pe = (r, { onBlocked: i, onClosed: c }) => {
+}, pe = (r, { onBlocked: s, onClosed: o }) => {
   const d = window.open(
     r.authUrl,
     "mm-embed-auth",
     "popup,width=600,height=700"
   );
   if (!d)
-    return i(), () => {
+    return s(), () => {
     };
   const g = setInterval(() => {
-    d.closed && (clearInterval(g), c());
+    d.closed && (clearInterval(g), o());
   }, 1e3);
   return () => clearInterval(g);
-}, ie = ({ children: r, launcher: i, broker: c }) => {
-  const d = H(Y), [g, w] = C({}), [P, U] = C({}), [z, M] = C({}), [L, A] = C({}), q = R(z);
-  q.current = z;
-  const f = R(null), v = R({}), $ = R({}), B = R({}), y = R(c);
-  y.current = c;
-  const O = m((e) => {
-    const t = $.current[e];
+}, ie = ({ children: r, launcher: s, broker: o }) => {
+  const d = H(Y), [g, w] = U({}), [P, z] = U({}), [C, M] = U({}), [_, L] = U({}), B = R(C);
+  B.current = C;
+  const f = R(null), q = R({}), S = R({}), j = R({}), O = R(o);
+  O.current = o;
+  const A = h((e) => {
+    const t = S.current[e];
     if (!t)
       return;
     const n = (l) => !l[e] || l[e].clientId ? l : { ...l, [e]: { ...l[e], clientId: t } };
-    w(n), A(n);
-  }, []), j = m(
+    w(n), L(n);
+  }, []), v = h(
     (e, t) => {
-      e && (A((n) => n[e] ? n : {
+      e && (L((n) => n[e] ? n : {
         ...n,
-        [e]: { origin: e, reason: t, clientId: $.current[e] || null }
-      }), O(e));
+        [e]: { origin: e, reason: t, clientId: S.current[e] || null }
+      }), A(e));
     },
-    [O]
-  ), s = m(
+    [A]
+  ), i = h(
     (e, { v2: t = !1, origin: n = null } = {}) => {
-      n && (t && q.current[n] || (w((l) => l[n] ? l : {
+      n && (t && B.current[n] || (w((l) => l[n] ? l : {
         ...l,
         [n]: {
           origin: n,
@@ -82,58 +82,58 @@ const Y = oe(null), J = oe({
           // 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: t && y.current ? "broker" : t && e.silentUrl && X ? "silent" : "interactive",
+          status: t && O.current ? "broker" : t && e.silentUrl && X ? "silent" : "interactive",
           v2: t,
           // v1.9: the scope the guest asked for; forwarded verbatim to the broker.
           scope: e.scope || null,
-          acceptsCredentials: B.current[n] || null,
+          acceptsCredentials: j.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 || $.current[n] || null,
+          clientId: e.clientId || S.current[n] || null,
           popupBlocked: !1
         }
-      }), O(n)));
+      }), A(n)));
     },
-    [O]
-  ), u = m((e) => {
+    [A]
+  ), u = h((e) => {
     w((t) => {
       if (!t[e])
         return t;
       const n = { ...t };
       return delete n[e], n;
     });
-  }, []), o = m(
+  }, []), c = h(
     (e) => {
-      e && (u(e), U((t) => ({
+      e && (u(e), z((t) => ({
         ...t,
         [e]: (t[e] || 0) + 1
       })));
     },
     [u]
-  ), a = m((e) => {
+  ), a = h((e) => {
     w((t) => !t[e] || t[e].status === "interactive" ? t : {
       ...t,
       [e]: { ...t[e], status: "interactive" }
     });
-  }, []), b = m(
+  }, []), b = h(
     (e) => {
       u(e.origin);
     },
     [u]
-  ), E = m(
+  ), E = h(
     (e, t) => {
-      const n = ne(e, t);
+      const n = re(e, t);
       if (n) {
         if (fe(n, window.location.origin)) {
-          j(n, "cross-site-legacy");
+          v(n, "cross-site-legacy");
           return;
         }
-        s(e, { origin: n });
+        i(e, { origin: n });
       }
     },
-    [s, j]
+    [i, v]
   );
   k(() => {
     if (!d)
@@ -146,18 +146,18 @@ const Y = oe(null), J = oe({
       // 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", (t, n) => {
-        n != null && n.origin && (t != null && t.clientId) && ($.current[n.origin] = t.clientId, O(n.origin)), n != null && n.origin && Array.isArray(t == null ? void 0 : t.acceptsCredentials) && (B.current[n.origin] = t.acceptsCredentials);
+        n != null && n.origin && (t != null && t.clientId) && (S.current[n.origin] = t.clientId, A(n.origin)), n != null && n.origin && Array.isArray(t == null ? void 0 : t.acceptsCredentials) && (j.current[n.origin] = t.acceptsCredentials);
       }),
       d.addListener("*", "authorize", E),
       d.addListener("*", "login", E),
       d.addListener(
         "*",
         "credential-request",
-        (t, n) => s(t, { v2: !0, origin: ne(t, n) })
+        (t, n) => i(t, { v2: !0, origin: re(t, n) })
       )
     ];
     return () => e.forEach((t) => t());
-  }, [d, E, s, O]), k(() => {
+  }, [d, E, i, A]), k(() => {
     const e = (t) => {
       const n = t == null ? void 0 : t.data;
       if (!n || n.type !== "authorized" && n.type !== "authorize-failed")
@@ -168,25 +168,25 @@ const Y = oe(null), J = oe({
           n.accessToken ? (M((p) => ({
             ...p,
             [l]: te({ accessToken: n.accessToken })
-          })), u(l)) : o(l);
+          })), u(l)) : c(l);
           return;
         }
         a(l);
       }
     };
     return window.addEventListener("message", e), () => window.removeEventListener("message", e);
-  }, [u, o, a]);
-  const _ = m(
+  }, [u, c, a]);
+  const y = h(
     (e, t) => {
       const n = e == null ? void 0 : e.origin, l = te(t);
       !n || !l || (M((p) => ({ ...p, [n]: l })), u(n));
     },
     [u]
-  ), x = m((e, t) => {
+  ), T = h((e, t) => {
     w((n) => n[e] ? { ...n, [e]: { ...n[e], ...t } } : n);
-  }, []), I = m(
+  }, []), I = h(
     async (e, { approve: t } = {}) => {
-      const n = y.current, { origin: l } = e;
+      const n = O.current, { origin: l } = e;
       let p;
       try {
         p = await n(
@@ -194,17 +194,17 @@ const Y = oe(null), J = oe({
           { approve: t }
         );
       } catch {
-        t ? x(l, { error: { reason: "broker_unavailable" } }) : x(l, {
+        t ? T(l, { error: { reason: "broker_unavailable" } }) : T(l, {
           status: e.silentUrl && X ? "silent" : "interactive"
         });
         return;
       }
       if ((p == null ? void 0 : p.status) === 200 && p.credential) {
-        _(e, p.credential);
+        y(e, p.credential);
         return;
       }
       if ((p == null ? void 0 : p.status) === 409 && p.consentRequired) {
-        x(l, {
+        T(l, {
           status: "interactive",
           consent: {
             client: p.client || null,
@@ -217,26 +217,26 @@ const Y = oe(null), J = oe({
       }
       const G = (p == null ? void 0 : p.error) || "broker_error";
       if (!t && ae.has(G)) {
-        x(l, {
+        T(l, {
           status: e.silentUrl && X ? "silent" : "interactive"
         });
         return;
       }
       if (t && G === "consent_denied") {
-        x(l, { error: null });
+        T(l, { error: null });
         return;
       }
-      u(l), A((ee) => ({
+      u(l), L((ee) => ({
         ...ee,
         [l]: {
           origin: l,
           reason: `broker:${G}`,
           detail: p || null,
-          clientId: e.clientId || $.current[l] || null
+          clientId: e.clientId || S.current[l] || null
         }
       }));
     },
-    [_, x, u]
+    [y, T, u]
   ), F = R({});
   k(() => {
     Object.values(g).forEach((e) => {
@@ -245,12 +245,12 @@ const Y = oe(null), J = oe({
       }));
     });
   }, [g, I]);
-  const W = m(
-    (e) => !y.current || !(e != null && e.consent) ? Promise.resolve() : I(e, { approve: !0 }),
+  const W = h(
+    (e) => !O.current || !(e != null && e.consent) ? Promise.resolve() : I(e, { approve: !0 }),
     [I]
   );
   k(() => {
-    const e = v.current;
+    const e = q.current;
     Object.values(g).forEach((t) => {
       t.status === "silent" && !e[t.origin] && (e[t.origin] = setTimeout(() => {
         delete e[t.origin], a(t.origin);
@@ -259,12 +259,12 @@ const Y = oe(null), J = oe({
       (!g[t] || g[t].status !== "silent") && (clearTimeout(e[t]), delete e[t]);
     });
   }, [g, a]), k(() => () => {
-    f.current && f.current(), Object.values(v.current).forEach(clearTimeout);
+    f.current && f.current(), Object.values(q.current).forEach(clearTimeout);
   }, []);
-  const S = m(
+  const $ = h(
     (e) => {
       f.current && (f.current(), f.current = null);
-      const t = i || pe;
+      const t = s || pe;
       f.current = t(e, {
         onBlocked: () => {
           w((n) => n[e.origin] ? {
@@ -280,28 +280,28 @@ const Y = oe(null), J = oe({
             });
             return;
           }
-          o(e.origin);
+          c(e.origin);
         }
       });
     },
-    [i, o]
+    [s, c]
   ), Z = {
     // Hosts render UI for interactive entries only; silent resolution is
     // invisible by design.
     pending: Object.values(g).filter(
       (e) => e.status === "interactive"
     ),
-    authorize: S,
+    authorize: $,
     approve: W,
-    complete: _,
+    complete: y,
     dismiss: b,
     originEpochs: P,
-    credentials: z,
-    unsupported: L
+    credentials: C,
+    unsupported: _
   }, K = Object.values(g).filter(
     (e) => e.status === "silent" && e.silentUrl
   );
-  return /* @__PURE__ */ h.createElement(J.Provider, { value: Z }, r, K.map((e) => /* @__PURE__ */ h.createElement(
+  return /* @__PURE__ */ m.createElement(J.Provider, { value: Z }, r, K.map((e) => /* @__PURE__ */ m.createElement(
     "iframe",
     {
       key: `mm-silent-auth-${e.origin}`,
@@ -314,8 +314,8 @@ const Y = oe(null), J = oe({
   )));
 };
 ie.propTypes = {
-  children: T.node,
-  launcher: T.func,
+  children: x.node,
+  launcher: x.func,
   /**
    * `async (request, { approve }) => result` where request =
    * `{ origin, clientId, scope, authUrl }` (origin is the zone-attested frame origin) and result
@@ -323,162 +323,162 @@ ie.propTypes = {
    * client }`, `{ status: 409, consentRequired: true, client: { name, hostname }, stepUp }`, or
    * `{ status, error }`. Provided only by hosts that are themselves first-party clients.
    */
-  broker: T.func
+  broker: x.func
 };
-const ge = () => H(J), me = (r) => {
-  const { originEpochs: i } = H(J), c = Q(r);
-  return c && i[c] || 0;
-}, he = (r) => {
-  const { credentials: i } = H(J), c = Q(r);
-  return c && i[c] || null;
+const ge = () => H(J), he = (r) => {
+  const { originEpochs: s } = H(J), o = Q(r);
+  return o && s[o] || 0;
+}, me = (r) => {
+  const { credentials: s } = H(J), o = Q(r);
+  return o && s[o] || null;
 }, be = (r) => {
-  const { unsupported: i } = H(J), c = Q(r);
-  return c && i[c] || null;
-}, Ee = ({ children: r, authorizationLauncher: i, credentialBroker: c }) => {
-  const [d, g] = C({}), [w, P] = C({}), U = R({}), z = R({}), M = R({}), L = m((s, u) => {
-    var o;
-    return !!((o = M.current[s]) != null && o.has(u));
-  }, []), A = m((s, u, o) => {
-    g((a) => ({ ...a, [s]: { origin: u, frameRef: o } }));
-  }, []), q = m((s) => {
+  const { unsupported: s } = H(J), o = Q(r);
+  return o && s[o] || null;
+}, Ee = ({ children: r, authorizationLauncher: s, credentialBroker: o }) => {
+  const [d, g] = U({}), [w, P] = U({}), z = R({}), C = R({}), M = R({}), _ = h((i, u) => {
+    var c;
+    return !!((c = M.current[i]) != null && c.has(u));
+  }, []), L = h((i, u, c) => {
+    g((a) => ({ ...a, [i]: { origin: u, frameRef: c } }));
+  }, []), B = h((i) => {
     g((u) => {
-      const o = { ...u };
-      return delete o[s], o;
+      const c = { ...u };
+      return delete c[i], c;
     }), P((u) => {
-      const o = { ...u };
-      return delete o[s], o;
-    }), delete M.current[s];
+      const c = { ...u };
+      return delete c[i], c;
+    }), delete M.current[i];
   }, []);
   k(() => {
-    const s = (o = [], a, b) => {
-      o.forEach((E) => E(a, b));
-    }, u = (o) => {
-      var F, W, S, Z, K, e, t;
-      if (!((F = o == null ? void 0 : o.data) != null && F.instanceId))
+    const i = (c = [], a, b) => {
+      c.forEach((E) => E(a, b));
+    }, u = (c) => {
+      var F, W, $, Z, K, e, t;
+      if (!((F = c == null ? void 0 : c.data) != null && F.instanceId))
         return;
-      const { instanceId: a, type: b } = o.data, E = d[a], _ = (S = (W = E == null ? void 0 : E.frameRef) == null ? void 0 : W.current) == null ? void 0 : S.contentWindow;
-      if (!_ || o.source !== _ || o.origin !== E.origin)
+      const { instanceId: a, type: b } = c.data, E = d[a], y = ($ = (W = E == null ? void 0 : E.frameRef) == null ? void 0 : W.current) == null ? void 0 : $.contentWindow;
+      if (!y || c.source !== y || c.origin !== E.origin)
         return;
-      const x = { origin: o.origin }, I = U.current;
+      const T = { origin: c.origin }, I = z.current;
       if (b === "response") {
-        const { callbackId: n, response: l, error: p } = o.data, G = z.current[n];
-        G && (G(l, p), delete z.current[n]);
+        const { callbackId: n, response: l, error: p } = c.data, G = C.current[n];
+        G && (G(l, p), delete C.current[n]);
         return;
       }
       if (b === "mark-registered") {
-        const { requestType: n } = o.data;
+        const { requestType: n } = c.data;
         M.current[a] || (M.current[a] = /* @__PURE__ */ new Set()), M.current[a].add(n);
         return;
       }
-      b === "ready" && P((n) => ({ ...n, [a]: !0 })), s((Z = I[a]) == null ? void 0 : Z[b], o.data, x), s((K = I["*"]) == null ? void 0 : K[b], o.data, x), s((e = I[a]) == null ? void 0 : e["*"], o.data, x), s((t = I["*"]) == null ? void 0 : t["*"], o.data, x);
+      b === "ready" && P((n) => ({ ...n, [a]: !0 })), i((Z = I[a]) == null ? void 0 : Z[b], c.data, T), i((K = I["*"]) == null ? void 0 : K[b], c.data, T), i((e = I[a]) == null ? void 0 : e["*"], c.data, T), i((t = I["*"]) == null ? void 0 : t["*"], c.data, T);
     };
     return window.addEventListener("message", u), () => {
       window.removeEventListener("message", u);
     };
   }, [d]);
-  const f = m(
-    (s, u, o) => {
+  const f = h(
+    (i, u, c) => {
       var b, E;
-      const a = d[s];
+      const a = d[i];
       if (!a) {
-        console.warn(`Origin not set for id: ${s}. Unable to send message.`);
+        console.warn(`Origin not set for id: ${i}. Unable to send message.`);
         return;
       }
       (E = (b = a == null ? void 0 : a.frameRef) == null ? void 0 : b.current) != null && E.contentWindow && a.frameRef.current.contentWindow.postMessage(
-        { type: u, ...o, instanceId: s },
+        { type: u, ...c, instanceId: i },
         a.origin
       );
     },
     [d]
-  ), v = R(0), $ = m(() => `${Date.now()}-${++v.current}`, []), B = m(
-    async (s, u, o = {}) => new Promise((a, b) => {
-      const E = $(), _ = (x, I) => {
-        delete z.current[E], I ? b(I) : a(x);
+  ), q = R(0), S = h(() => `${Date.now()}-${++q.current}`, []), j = h(
+    async (i, u, c = {}) => new Promise((a, b) => {
+      const E = S(), y = (T, I) => {
+        delete C.current[E], I ? b(I) : a(T);
       };
-      z.current[E] = _, f(s, "request", { callbackId: E, requestType: u, data: o });
+      C.current[E] = y, f(i, "request", { callbackId: E, requestType: u, data: c });
     }),
     [f]
-  ), y = m(
-    (s, u) => {
-      f(s, "load-options", u);
+  ), O = h(
+    (i, u) => {
+      f(i, "load-options", u);
     },
     [f]
-  ), O = m(
-    (s, u) => {
-      f(s, "validate", u);
+  ), A = h(
+    (i, u) => {
+      f(i, "validate", u);
     },
     [f]
-  ), j = ue(
+  ), v = ue(
     () => ({
-      registerFrame: A,
-      unregisterFrame: q,
+      registerFrame: L,
+      unregisterFrame: B,
       sendMessage: f,
-      sendRequest: B,
-      loadOptions: y,
-      validate: O,
-      hasHandler: L,
+      sendRequest: j,
+      loadOptions: O,
+      validate: A,
+      hasHandler: _,
       readyFrames: w,
-      addListener: (s, u, o) => (U.current[s] || (U.current[s] = {}), U.current[s][u] || (U.current[s][u] = []), U.current[s][u].push(o), () => {
-        U.current[s][u] = U.current[s][u].filter((a) => a !== o);
+      addListener: (i, u, c) => (z.current[i] || (z.current[i] = {}), z.current[i][u] || (z.current[i][u] = []), z.current[i][u].push(c), () => {
+        z.current[i][u] = z.current[i][u].filter((a) => a !== c);
       })
     }),
     [
-      A,
-      q,
-      f,
+      L,
       B,
-      y,
+      f,
+      j,
       O,
-      L,
+      A,
+      _,
       w
     ]
   );
-  return /* @__PURE__ */ h.createElement(Y.Provider, { value: j }, /* @__PURE__ */ h.createElement(ie, { launcher: i, broker: c }, r));
-}, V = (r, i, c) => {
+  return /* @__PURE__ */ m.createElement(Y.Provider, { value: v }, /* @__PURE__ */ m.createElement(ie, { launcher: s, broker: o }, r));
+}, V = (r, s, o) => {
   const d = H(Y);
   if (d === null)
     throw new Error(
       "useEmbeddedEffect must be used within a MMEmbeddableZoneProvider"
     );
-  const g = R(c);
+  const g = R(o);
   k(() => {
-    g.current = c;
-  }, [c]), k(() => {
-    if (!(!r || !i)) {
-      if (i.startsWith("key:")) {
-        const w = i.substring(4);
+    g.current = o;
+  }, [o]), k(() => {
+    if (!(!r || !s)) {
+      if (s.startsWith("key:")) {
+        const w = s.substring(4);
         return d.readyFrames[r] && d.sendMessage(r, "subscribe-key", { keyChord: w }), d.addListener(
           r,
           `key-pressed:${w}`,
-          (...U) => g.current(...U)
+          (...z) => g.current(...z)
         );
       }
       return d.addListener(
         r,
-        i,
+        s,
         (...w) => g.current(...w)
       );
     }
-  }, [d, r, i]);
+  }, [d, r, s]);
 };
 Ee.propTypes = {
-  children: T.node.isRequired,
+  children: x.node.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: T.func,
+  authorizationLauncher: x.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: T.func
+  credentialBroker: x.func
 };
-const N = D.default || D, we = 1e4, ke = "credentials", se = (r, i) => `${r}/mm-embedded-interop?id=${i}&origin=${window.location.origin}&caps=${ke}`, Re = N.iframe`
+const N = D.default || D, we = 1e4, ke = "credentials", se = (r, s) => `${r}/mm-embedded-interop?id=${s}&origin=${window.location.origin}&caps=${ke}`, Re = N.iframe`
   width: 100%;
   height: 100%;
   border: none;
@@ -496,31 +496,63 @@ const N = D.default || D, we = 1e4, ke = "credentials", se = (r, i) => `${r}/mm-
   text-align: center;
   color: #555;
   font-size: 14px;
-`, ce = ({ entry: r }) => /* @__PURE__ */ h.createElement(xe, null, /* @__PURE__ */ h.createElement("div", { style: { fontWeight: 600 } }, r && r.origin || "This app", " can’t be embedded here"), /* @__PURE__ */ h.createElement("div", { style: { fontSize: 12, color: "#888" } }, "It needs an update to support embedding from a different domain."));
+`, Te = (r) => {
+  const s = r && r.origin || "This app", o = r && r.reason || "";
+  switch (o) {
+    case "broker:scope_above_ceiling":
+      return {
+        title: `${s} 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: `${s} can’t be authorized here`,
+        detail: "It isn’t registered to run at this address."
+      };
+    case "broker:cross_company_principal":
+      return {
+        title: `${s} can’t be authorized here`,
+        detail: "It can’t be authorized for this account."
+      };
+    default:
+      return o.startsWith("broker:") ? {
+        title: `${s} can’t be authorized here`,
+        detail: "Authorization was refused."
+      } : {
+        title: `${s} can’t be embedded here`,
+        detail: "It needs an update to support embedding from a different domain."
+      };
+  }
+}, ce = ({ entry: r }) => {
+  const s = Te(r);
+  return /* @__PURE__ */ m.createElement(xe, { "data-reason": r && r.reason || void 0 }, /* @__PURE__ */ m.createElement("div", { style: { fontWeight: 600 } }, s.title), /* @__PURE__ */ m.createElement("div", { style: { fontSize: 12, color: "#888" } }, s.detail));
+};
 ce.propTypes = {
-  entry: T.shape({
-    origin: T.string,
-    name: T.string,
-    reason: T.string
+  entry: x.shape({
+    origin: x.string,
+    name: x.string,
+    reason: x.string,
+    detail: x.object
   })
 };
-const Te = N.div`
+const Ie = N.div`
   height: 100%;
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: center;
-`, Ie = () => /* @__PURE__ */ h.createElement(Te, null, /* @__PURE__ */ h.createElement("div", { style: { textAlign: "center" } }, "This app couldn’t be loaded as an embeddable widget.")), Ue = ({
+`, ze = () => /* @__PURE__ */ m.createElement(Ie, null, /* @__PURE__ */ m.createElement("div", { style: { textAlign: "center" } }, "This app couldn’t be loaded as an embeddable widget.")), Ue = ({
   id: r,
-  src: i,
-  path: c,
+  src: s,
+  path: o,
   onInit: d = () => {
   },
   onTimeout: g,
   context: w = {},
   params: P = {},
-  renderUnsupported: U,
-  renderTimeout: z,
+  renderUnsupported: z,
+  renderTimeout: C,
   ...M
 }) => {
   if ("isConfiguring" in M)
@@ -535,13 +567,13 @@ const Te = N.div`
     return console.error(
       "isFullScreen must be passed via the params prop to MMEmbeddableZone"
     ), null;
-  const L = R(), [A, q] = C(), [f, v] = C(0), [$, B] = C(!1), [y, O] = C(!1), j = me(i), s = he(i), u = be(i);
+  const _ = R(), [L, B] = U(), [f, q] = U(0), [S, j] = U(!1), [O, A] = U(!1), v = he(s), i = me(s), u = be(s);
   k(() => {
-    j > 0 && v(0);
-  }, [j]);
-  const { registerFrame: o, unregisterFrame: a, sendMessage: b } = H(
+    v > 0 && q(0);
+  }, [v]);
+  const { registerFrame: c, unregisterFrame: a, sendMessage: b } = H(
     Y
-  ), [E, _] = C(), x = R(), I = R(g), F = R(d), W = R(!1);
+  ), [E, y] = U(), T = R(), I = R(g), F = R(d), W = R(!1);
   k(() => {
     I.current = g;
   }, [g]), k(() => {
@@ -555,79 +587,79 @@ const Te = N.div`
   }, [w, r, f]), k(() => {
     f && b(r, "set-params", { params: P });
   }, [P, r, f]), k(() => {
-    c !== void 0 && _((c == null ? void 0 : c.indexOf("/")) === 0 ? c : `/${c}`);
-  }, [c]), k(() => {
+    o !== void 0 && y((o == null ? void 0 : o.indexOf("/")) === 0 ? o : `/${o}`);
+  }, [o]), k(() => {
     E === void 0 || !f || b(r, "navigate", { path: E });
   }, [E, f, r, b]), k(() => {
-    if (!i || !r || !L)
+    if (!s || !r || !_)
       return;
-    const t = new URL(i);
-    return o(r, t.origin, L), F.current(), q(se(t.origin, r)), () => {
+    const t = new URL(s);
+    return c(r, t.origin, _), F.current(), B(se(t.origin, r)), () => {
       a(r);
     };
-  }, [i, r, o, L]), k(() => {
-    if (!(!A || W.current))
-      return x.current = setTimeout(() => {
-        B(!0), I.current && I.current();
-      }, we), () => clearTimeout(x.current);
-  }, [A]);
-  const S = m(() => {
-    W.current = !0, clearTimeout(x.current), B(!1);
-  }, []), [Z, K] = C(null);
+  }, [s, r, c, _]), k(() => {
+    if (!(!L || W.current))
+      return T.current = setTimeout(() => {
+        j(!0), I.current && I.current();
+      }, we), () => clearTimeout(T.current);
+  }, [L]);
+  const $ = h(() => {
+    W.current = !0, clearTimeout(T.current), j(!1);
+  }, []), [Z, K] = U(null);
   V(r, "init", (t) => {
-    S(), Array.isArray(t == null ? void 0 : t.acceptsCredentials) && K(t.acceptsCredentials);
-  }), V(r, "authorize", S), V(r, "login", S), V(r, "credential-request", () => {
-    S(), O(!0);
+    $(), Array.isArray(t == null ? void 0 : t.acceptsCredentials) && K(t.acceptsCredentials);
+  }), V(r, "authorize", $), V(r, "login", $), V(r, "credential-request", () => {
+    $(), A(!0);
   }), k(() => {
-    if (!y || !s)
+    if (!O || !i)
       return;
     const t = Z;
-    if (Array.isArray(t) && !t.includes(s.kind))
+    if (Array.isArray(t) && !t.includes(i.kind))
       return;
-    const n = s.kind === "access_token" ? { accessToken: s.accessToken } : {};
-    b(r, "credential", { ...n, credential: s });
-  }, [y, s, Z, r, b]), V(r, "ready", () => {
-    S(), v((t) => t + 1);
+    const n = i.kind === "access_token" ? { accessToken: i.accessToken } : {};
+    b(r, "credential", { ...n, credential: i });
+  }, [O, i, Z, r, b]), V(r, "ready", () => {
+    $(), q((t) => t + 1);
   });
   const e = R();
   return V(r, "heartbeat", () => {
     e.current && clearTimeout(e.current), e.current = setTimeout(() => {
-      if (L.current) {
-        const t = new URL(i);
-        L.current.src = se(t.origin, r);
+      if (_.current) {
+        const t = new URL(s);
+        _.current.src = se(t.origin, r);
       }
     }, 6e3);
   }), k(() => () => {
     e.current && clearTimeout(e.current);
-  }, []), u ? U ? U(u) : /* @__PURE__ */ h.createElement(ce, { entry: u }) : $ && !f ? z ? z() : /* @__PURE__ */ h.createElement(Ie, null) : /* @__PURE__ */ h.createElement(
+  }, []), u ? z ? z(u) : /* @__PURE__ */ m.createElement(ce, { entry: u }) : S && !f ? C ? C() : /* @__PURE__ */ m.createElement(ze, null) : /* @__PURE__ */ m.createElement(
     Re,
     {
-      key: `auth-epoch-${j}`,
+      key: `auth-epoch-${v}`,
       $isReady: f,
-      ref: L,
-      src: A,
+      ref: _,
+      src: L,
       ...M
     }
   );
 };
 Ue.propTypes = {
-  id: T.string,
-  src: T.string.isRequired,
-  path: T.string,
-  onInit: T.func,
-  onTimeout: T.func,
+  id: x.string,
+  src: x.string.isRequired,
+  path: x.string,
+  onInit: x.func,
+  onTimeout: x.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: T.func,
+  renderUnsupported: x.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: T.func
+  renderTimeout: x.func
 };
 const Ce = D.div`
   position: fixed;
@@ -637,7 +669,7 @@ const Ce = D.div`
   align-items: center;
   justify-content: center;
   z-index: 10000;
-`, ze = D.div`
+`, Me = D.div`
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
@@ -646,13 +678,13 @@ const Ce = D.div`
   max-width: calc(100vw - 32px);
   font-family: sans-serif;
   color: #222;
-`, Me = D.div`
+`, _e = D.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 0;
   gap: 16px;
-`, Le = D.button`
+`, Ae = D.button`
   background: #16a500;
   color: #fff;
   border: none;
@@ -661,13 +693,13 @@ const Ce = D.div`
   font-size: 14px;
   cursor: pointer;
   white-space: nowrap;
-`, Oe = D.p`
+`, Le = D.p`
   color: #b3261e;
   font-size: 13px;
   margin: 4px 0 0;
 `, Se = () => {
-  const { pending: r, authorize: i } = ge();
-  return r.length === 0 ? null : /* @__PURE__ */ h.createElement(Ce, null, /* @__PURE__ */ h.createElement(ze, null, /* @__PURE__ */ h.createElement("h3", { style: { margin: "0 0 8px" } }, "Authorization Required"), /* @__PURE__ */ h.createElement("p", { style: { margin: "0 0 12px", fontSize: 14, color: "#555" } }, "The following apps need you to sign in and authorize them before they can load."), r.map((c) => /* @__PURE__ */ h.createElement("div", { key: c.origin }, /* @__PURE__ */ h.createElement(Me, null, /* @__PURE__ */ h.createElement("div", null, /* @__PURE__ */ h.createElement("div", { style: { fontWeight: 600 } }, c.origin)), /* @__PURE__ */ h.createElement(Le, { onClick: () => i(c) }, "Authorize")), c.popupBlocked && /* @__PURE__ */ h.createElement(Oe, null, "The sign-in window was blocked. Allow popups for this site, then try again.")))));
+  const { pending: r, authorize: s } = ge();
+  return r.length === 0 ? null : /* @__PURE__ */ m.createElement(Ce, null, /* @__PURE__ */ m.createElement(Me, null, /* @__PURE__ */ m.createElement("h3", { style: { margin: "0 0 8px" } }, "Authorization Required"), /* @__PURE__ */ m.createElement("p", { style: { margin: "0 0 12px", fontSize: 14, color: "#555" } }, "The following apps need you to sign in and authorize them before they can load."), r.map((o) => /* @__PURE__ */ m.createElement("div", { key: o.origin }, /* @__PURE__ */ m.createElement(_e, null, /* @__PURE__ */ m.createElement("div", null, /* @__PURE__ */ m.createElement("div", { style: { fontWeight: 600 } }, o.origin)), /* @__PURE__ */ m.createElement(Ae, { onClick: () => s(o) }, "Authorize")), o.popupBlocked && /* @__PURE__ */ m.createElement(Le, null, "The sign-in window was blocked. Allow popups for this site, then try again.")))));
 };
 export {
   le as CREDENTIAL_KIND_ACCESS_TOKEN,
@@ -679,9 +711,10 @@ export {
   fe as isCrossSite,
   te as normalizeCredential,
   pe as popupAuthorizationLauncher,
+  Te as unsupportedCopy,
   ge as useEmbeddedAuthorizations,
-  he as useEmbeddedCredential,
+  me as useEmbeddedCredential,
   V as useEmbeddedEffect,
-  me as useEmbeddedOriginEpoch,
+  he as useEmbeddedOriginEpoch,
   be as useEmbeddedUnsupported
 };

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

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

package/package.json

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