@zenuml/core 3.35.2 → 3.36.0

package/dist/zenuml.esm.mjs

@@ -71154,7 +71154,7 @@ const t$ = (i, e) => {
       ]
     }
   );
-}, a$ = "3.35.2";
+}, a$ = "3.36.0";
 function s$(i) {
   const e = Math.floor(i / 1e3), t = Math.floor(i % 1e3), n = Math.floor((i % 1e3 - t) * 1e3);
   return e + "s " + t + "ms " + n + "μs";

package/dist/zenuml.js

@@ -3392,7 +3392,7 @@ https://github.com/highlightjs/highlight.js/issues/2277`),c4=L2,se=b2);const B1=
 `+d).trim(),this.textStyle={...f,...L,...p},this.classNames=[...h,..._,...m],this.commentStyle={...f,...L},this.messageStyle={...f,...p},this.commentClassNames=[...h,..._],this.messageClassNames=[...h,...m]}}const LH=i=>{const e=i.context.getComment()||"",t=new dH(e),n={className:G2("text-left text-sm text-skin-message",{hidden:i.collapsed&&!i.context.ret()}),context:i.context,origin:i.origin,comment:e,commentObj:t,number:i.number};switch(!0){case!!i.context.loop():return S.jsx(Zz,{...n});case!!i.context.alt():return S.jsx(Bz,{...n});case!!i.context.par():return S.jsx(Gz,{...n});case!!i.context.opt():return S.jsx(zz,{...n});case!!i.context.section():return S.jsx(Yz,{...n});case!!i.context.critical():return S.jsx(Vz,{...n});case!!i.context.tcf():return S.jsx(qz,{...n});case!!i.context.ref():return S.jsx(Wz,{...n});case!!i.context.creation():return S.jsx(Jz,{...n});case!!i.context.message():return S.jsx(tH,{...n});case!!i.context.asyncMessage():return S.jsx(iH,{...n});case!!i.context.divider():return S.jsx(lH,{...n});case!!i.context.ret():return S.jsx(cH,{...n,className:"text-left text-sm text-skin-message"})}},S3=i=>{var n;const e=((n=i.context)==null?void 0:n.stat())||[],t=s=>i.number?i.incremental?LU(i.number,s):`${i.number}.${s+1}`:String(s+1);return S.jsx("div",{className:G2("block",i.className),style:i.style,"data-origin":i.origin,children:e.map((s,l)=>S.jsx("div",{className:G2("statement-container my-4",l===e.length-1&&"[&>.return]:-mb-4 [&>.return]:bottom-[-1px]"),"data-origin":i.origin,children:S.jsx(LH,{origin:i.origin||"",context:s,collapsed:!!i.collapsed,number:t(l)})},l))})};var Bl=typeof document<"u"?v.useLayoutEffect:v.useEffect;const CH={...En}.useInsertionEffect||(i=>i());function _H(i){const e=v.useRef(()=>{});return CH(()=>{e.current=i}),v.useCallback(function(){for(var t=arguments.length,n=new Array(t),s=0;s<t;s++)n[s]=arguments[s];return e.current==null?void 0:e.current(...n)},[])}const gH={...En};let Zf=!1,pH=0;const Bf=()=>"floating-ui-"+Math.random().toString(36).slice(2,6)+pH++;function mH(){const[i,e]=v.useState(()=>Zf?Bf():void 0);return Bl(()=>{i==null&&e(Bf())},[]),v.useEffect(()=>{Zf=!0},[]),i}const hH=gH.useId||mH;function fH(){const i=new Map;return{emit(e,t){var n;(n=i.get(e))==null||n.forEach(s=>s(t))},on(e,t){i.has(e)||i.set(e,new Set),i.get(e).add(t)},off(e,t){var n;(n=i.get(e))==null||n.delete(t)}}}const EH=v.createContext(null),SH=v.createContext(null),TH=()=>{var i;return((i=v.useContext(EH))==null?void 0:i.id)||null},vH=()=>v.useContext(SH);function RH(i){const{open:e=!1,onOpenChange:t,elements:n}=i,s=hH(),l=v.useRef({}),[c]=v.useState(()=>fH()),d=TH()!=null,[L,_]=v.useState(n.reference),p=_H((h,R,b)=>{l.current.openEvent=h?R:void 0,c.emit("openchange",{open:h,event:R,reason:b,nested:d}),t==null||t(h,R,b)}),m=v.useMemo(()=>({setPositionReference:_}),[]),f=v.useMemo(()=>({reference:L||n.reference||null,floating:n.floating||null,domReference:n.reference}),[L,n.reference,n.floating]);return v.useMemo(()=>({dataRef:l,open:e,onOpenChange:p,elements:f,events:c,floatingId:s,refs:m}),[e,p,f,c,s,m])}function bH(i){i===void 0&&(i={});const{nodeId:e}=i,t=RH({...i,elements:{reference:null,floating:null,...i.elements}}),n=i.rootContext||t,s=n.elements,[l,c]=v.useState(null),[d,L]=v.useState(null),p=(s==null?void 0:s.domReference)||l,m=v.useRef(null),f=vH();Bl(()=>{p&&(m.current=p)},[p]);const h=BP({...i,elements:{...s,...d&&{reference:d}}}),R=v.useCallback(D=>{const N=Ke(D)?{getBoundingClientRect:()=>D.getBoundingClientRect(),getClientRects:()=>D.getClientRects(),contextElement:D}:D;L(N),h.refs.setReference(N)},[h.refs]),b=v.useCallback(D=>{(Ke(D)||D===null)&&(m.current=D,c(D)),(Ke(h.refs.reference.current)||h.refs.reference.current===null||D!==null&&!Ke(D))&&h.refs.setReference(D)},[h.refs]),M=v.useMemo(()=>({...h.refs,setReference:b,setPositionReference:R,domReference:m}),[h.refs,b,R]),w=v.useMemo(()=>({...h.elements,domReference:p}),[h.elements,p]),O=v.useMemo(()=>({...h,...n,refs:M,elements:w,nodeId:e}),[h,M,w,e,n]);return Bl(()=>{n.dataRef.current.floatingContext=O;const D=f==null?void 0:f.nodesRef.current.find(N=>N.id===e);D&&(D.context=O)}),v.useMemo(()=>({...h,context:O,refs:M,elements:w}),[h,M,w,O])}function xH(i){const e=v.useRef(i);return v.useEffect(()=>{e.current=i},[i]),e}function wH(i,e,t){const n=xH(e);v.useEffect(()=>{function s(l){n.current(l)}return document.addEventListener(i,s,t),()=>document.removeEventListener(i,s,t)},[i,t,n])}const MH=(i,e)=>{wH("click",t=>{i&&(i.contains(t.target)||e(t))},{capture:!0})},AH=[{name:"bold",content:"B",class:"font-bold"},{name:"italic",content:"I",class:"italic"},{name:"underline",content:"U",class:"underline"},{name:"strikethrough",content:"S",class:"line-through"}],yH=()=>{const[i,e]=t4(jt),t=Q2(K0),n=M9(Xi),[s,l]=v.useState(!1),[c,d]=v.useState([]),[L,_]=v.useState(""),p=b=>{e(b),t(b)},m=v.useRef({start:0,lineHead:0,prevLine:"",leadingSpaces:"",prevLineIsComment:!1,hasStyleBrackets:!1}),{refs:f,floatingStyles:h}=bH({open:s,onOpenChange:l}),R=b=>{var w;if(l(!1),!L)return;const M=m.current;if(M.prevLineIsComment){let O="";if(M.hasStyleBrackets){let D;c.includes(b)?D=c.filter(N=>N!==b):D=[...c,b],O=`${M.leadingSpaces}// [${D.filter(Boolean).join(", ")}] ${M.prevLine.slice(M.prevLine.indexOf("]")+1).trimStart()}`}else O=`${M.leadingSpaces}// [${b}] ${M.prevLine.slice((((w=M.prevLine.match(/\/\/*/))==null?void 0:w.index)||-2)+2).trimStart()}`;O.endsWith(`
 `)||(O+=`
 `),p(i.slice(0,ZL(i,M.start))+O+i.slice(M.lineHead))}else p(i.slice(0,M.lineHead)+`${M.leadingSpaces}// [${b}]
-`+i.slice(M.lineHead))};return MH(f.floating.current,()=>{l(!1)}),v.useEffect(()=>{n((b,M)=>{setTimeout(()=>{var O;const w=m.current;if(w.start=b.start.start,w.lineHead=Yi(i,w.start),w.prevLine=mb(i,w.start),w.leadingSpaces=((O=i.slice(w.lineHead).match(/^\s*/))==null?void 0:O[0])||"",w.prevLineIsComment=w.prevLine.trim().startsWith("//"),w.prevLineIsComment){const D=w.prevLine.trimStart().slice(2).trimStart(),N=D.indexOf("["),F=D.indexOf("]");w.hasStyleBrackets=!!(N===0&&F),w.hasStyleBrackets?d(D.slice(N+1,F).split(",").map(U=>U.trim())):d([])}f.setReference(M),_(b),l(!0)},0)})},[i,f,n]),S.jsx("div",{id:"style-panel",ref:f.setFloating,style:h,children:s&&S.jsx("div",{className:"flex bg-white shadow-md z-10 rounded-md p-1",children:AH.map(b=>S.jsx("div",{onClick:()=>R(b.class),children:S.jsx("div",{className:G2("w-6 mx-1 py-1 rounded-md text-black text-center cursor-pointer hover:bg-gray-200",[b.class,{"bg-gray-100":c.includes(b.class)}]),children:b.content})},b.name))})})},Gf=J6.child({name:"MessageLayer"}),zf=i=>{const e=Q2(B9),t=Q2(U3),n=v.useMemo(()=>{const d=Xn(e);return d.length===0?Pe:d[0].from||Pe},[e]),s=Z3(t,n)+1,[l,c]=v.useState(!1);return l&&Gf.debug("MessageLayer updated"),v.useEffect(()=>{c(!0),Gf.debug("MessageLayer mounted")},[]),S.jsxs("div",{className:"message-layer relative z-30 pt-14 pb-10",style:i.style,children:[S.jsx(S3,{context:i.context,style:{paddingLeft:`${s}px`},origin:n}),S.jsx(yH,{})]})},Hf=i=>{const e=Q2(G9),t=Q2(I4),n=Q2(B9),s=Q2(U3),l=M9(Qi),c=v.useRef(null);v.useEffect(()=>{l(c.current)}),v.useImperativeHandle(i.ref,()=>c.current);const d=v.useMemo(()=>{const _=s.orderedParticipantNames(),m=new A8(_).getFrame(n);return m?y8(m).left:0},[s,n]),L=v.useMemo(()=>bg(n,s)-d,[n,s,d]);return S.jsx("div",{className:G2("zenuml sequence-diagram relative box-border text-left overflow-visible px-2.5",e,i.className),style:i.style,ref:c,children:S.jsx("div",{style:{paddingLeft:`${d}px`},className:"relative z-container",children:t===F3.Dynamic?S.jsxs(S.Fragment,{children:[S.jsx($r,{leftGap:d,context:n==null?void 0:n.head(),renderLifeLine:!0}),S.jsx(zf,{context:n==null?void 0:n.block(),style:{width:`${L}px`}}),S.jsx($r,{leftGap:d,context:n==null?void 0:n.head(),renderParticipants:!0})]}):S.jsxs(S.Fragment,{children:[S.jsx($r,{leftGap:d,context:n==null?void 0:n.head(),renderParticipants:!0,renderLifeLine:!0}),S.jsx(zf,{context:n==null?void 0:n.block(),style:{width:`${L}px`}})]})})})},V8={backgroundColor:"white",filter:i=>{var e;return!((e=i==null?void 0:i.classList)!=null&&e.contains("hide-export"))}},NH=({ref:i,children:e})=>{const t=v.useRef(null),n=v.useRef(null),s=Q2(B9),[l,c]=t4(XL),[d,L]=t4(jL),[_,p]=t4(G9),[m,f]=t4(JL),h=Q2(QL),R=Q2(I4),b=s==null?void 0:s.title(),M=()=>{c(!0)},w=async()=>{if(t.current)return EC(t.current,V8)},O=async()=>{if(t.current)return rr(t.current,V8)},D=async()=>{if(t.current)return Ox(t.current,V8)},N=async()=>{if(t.current)return Nx(t.current,V8)},F=()=>{const K=Math.min(1,d+.1);L(K)},U=()=>{L(d-.1)},k=K=>{const X="zenuml-style";let r2;r2=document.createElement("style"),r2.id=X,document.head.append(r2),r2.textContent=K},n2=K=>{const X=new URL(K).hostname;if(X==="https://github.com"||X==="https://githubusercontent.com"){fetch(K.replace("github.com","raw.githubusercontent.com").replace("blob/","")).then(g2=>g2.text()).then(g2=>{k(g2)});return}const r2="zenuml-remote-css";let t2;t2=document.createElement("link"),t2.id=r2,t2.rel="stylesheet",document.head.append(t2),t2.href=K};return v.useImperativeHandle(i,()=>({toPng:w,toSvg:O,toBlob:D,toJpeg:N,zoomIn:F,zoomOut:U,setTheme:p,setRemoteCss:n2})),S.jsxs("div",{ref:t,className:G2("p-1 bg-skin-canvas inline-block",_),children:[S.jsx(Sw,{}),S.jsxs("div",{className:"frame text-skin-base bg-skin-frame border-skin-frame relative m-1 origin-top-left whitespace-nowrap border rounded",children:[S.jsxs("div",{ref:n,children:[S.jsxs("div",{className:"header text-skin-title bg-skin-title border-skin-frame border-b p-1 flex justify-between rounded-t",children:[S.jsx("div",{className:"left hide-export",children:e}),S.jsxs("div",{className:"right flex-grow flex justify-between",children:[S.jsx(vw,{context:b}),S.jsx(Tw,{className:"hide-export flex items-center"})]})]}),l&&S.jsx("div",{className:"fixed z-40 inset-0 overflow-y-auto","aria-labelledby":"modal-title",role:"dialog","aria-modal":"true",children:S.jsx(YD,{})}),S.jsx(Hf,{className:"origin-top-left",style:{transform:`scale(${d})`}})]}),S.jsx("div",{className:"footer rounded text-skin-control bg-skin-title px-4 py-1 flex justify-between items-center gap-3",children:R===F3.Dynamic&&S.jsxs(S.Fragment,{children:[S.jsxs("div",{className:"flex items-center gap-3 color-base",children:[S.jsx("button",{className:"bottom-1 flex items-center left-1 hide-export",onClick:M,children:S.jsx(Ce,{name:"tip",className:"filter grayscale w-4 h-4"})}),h&&S.jsx(KF,{}),S.jsxs("div",{className:"flex items-center",children:[S.jsx("input",{type:"checkbox",id:"order-display",className:"mr-1",checked:!!m,onChange:()=>f(!m)}),S.jsx("label",{htmlFor:"order-display",title:"Numbering the diagram",className:"select-none",children:S.jsx(Ce,{name:"numbering",className:"w-6 h-6"})})]})]}),S.jsxs("div",{className:"zoom-controls flex hide-export gap-1",children:[S.jsx("button",{className:"zoom-in",onClick:F,children:S.jsx(Ce,{name:"zoom-in",className:"w-4 h-4"})}),S.jsxs("label",{className:"w-12 block text-center",children:[Number(d*100).toFixed(0),"%"]}),S.jsx("button",{className:"zoom-out",onClick:U,children:S.jsx(Ce,{name:"zoom-out",className:"w-4 h-4"})})]}),S.jsx("a",{target:"_blank",href:"https://zenuml.com",className:"brand text-xs hover:underline",children:"ZenUML.com"})]})})]})]})},OH="3.35.2";function IH(i){const e=Math.floor(i/1e3),t=Math.floor(i%1e3),n=Math.floor((i%1e3-t)*1e3);return e+"s "+t+"ms "+n+"μs"}const DH=(i,e)=>{const n=Yf()-e;return console.debug(i+" cost: "+IH(n)),n},Yf=()=>performance.now();var Gl={exports:{}},S5={},zl={exports:{}},Hl={};/**
+`+i.slice(M.lineHead))};return MH(f.floating.current,()=>{l(!1)}),v.useEffect(()=>{n((b,M)=>{setTimeout(()=>{var O;const w=m.current;if(w.start=b.start.start,w.lineHead=Yi(i,w.start),w.prevLine=mb(i,w.start),w.leadingSpaces=((O=i.slice(w.lineHead).match(/^\s*/))==null?void 0:O[0])||"",w.prevLineIsComment=w.prevLine.trim().startsWith("//"),w.prevLineIsComment){const D=w.prevLine.trimStart().slice(2).trimStart(),N=D.indexOf("["),F=D.indexOf("]");w.hasStyleBrackets=!!(N===0&&F),w.hasStyleBrackets?d(D.slice(N+1,F).split(",").map(U=>U.trim())):d([])}f.setReference(M),_(b),l(!0)},0)})},[i,f,n]),S.jsx("div",{id:"style-panel",ref:f.setFloating,style:h,children:s&&S.jsx("div",{className:"flex bg-white shadow-md z-10 rounded-md p-1",children:AH.map(b=>S.jsx("div",{onClick:()=>R(b.class),children:S.jsx("div",{className:G2("w-6 mx-1 py-1 rounded-md text-black text-center cursor-pointer hover:bg-gray-200",[b.class,{"bg-gray-100":c.includes(b.class)}]),children:b.content})},b.name))})})},Gf=J6.child({name:"MessageLayer"}),zf=i=>{const e=Q2(B9),t=Q2(U3),n=v.useMemo(()=>{const d=Xn(e);return d.length===0?Pe:d[0].from||Pe},[e]),s=Z3(t,n)+1,[l,c]=v.useState(!1);return l&&Gf.debug("MessageLayer updated"),v.useEffect(()=>{c(!0),Gf.debug("MessageLayer mounted")},[]),S.jsxs("div",{className:"message-layer relative z-30 pt-14 pb-10",style:i.style,children:[S.jsx(S3,{context:i.context,style:{paddingLeft:`${s}px`},origin:n}),S.jsx(yH,{})]})},Hf=i=>{const e=Q2(G9),t=Q2(I4),n=Q2(B9),s=Q2(U3),l=M9(Qi),c=v.useRef(null);v.useEffect(()=>{l(c.current)}),v.useImperativeHandle(i.ref,()=>c.current);const d=v.useMemo(()=>{const _=s.orderedParticipantNames(),m=new A8(_).getFrame(n);return m?y8(m).left:0},[s,n]),L=v.useMemo(()=>bg(n,s)-d,[n,s,d]);return S.jsx("div",{className:G2("zenuml sequence-diagram relative box-border text-left overflow-visible px-2.5",e,i.className),style:i.style,ref:c,children:S.jsx("div",{style:{paddingLeft:`${d}px`},className:"relative z-container",children:t===F3.Dynamic?S.jsxs(S.Fragment,{children:[S.jsx($r,{leftGap:d,context:n==null?void 0:n.head(),renderLifeLine:!0}),S.jsx(zf,{context:n==null?void 0:n.block(),style:{width:`${L}px`}}),S.jsx($r,{leftGap:d,context:n==null?void 0:n.head(),renderParticipants:!0})]}):S.jsxs(S.Fragment,{children:[S.jsx($r,{leftGap:d,context:n==null?void 0:n.head(),renderParticipants:!0,renderLifeLine:!0}),S.jsx(zf,{context:n==null?void 0:n.block(),style:{width:`${L}px`}})]})})})},V8={backgroundColor:"white",filter:i=>{var e;return!((e=i==null?void 0:i.classList)!=null&&e.contains("hide-export"))}},NH=({ref:i,children:e})=>{const t=v.useRef(null),n=v.useRef(null),s=Q2(B9),[l,c]=t4(XL),[d,L]=t4(jL),[_,p]=t4(G9),[m,f]=t4(JL),h=Q2(QL),R=Q2(I4),b=s==null?void 0:s.title(),M=()=>{c(!0)},w=async()=>{if(t.current)return EC(t.current,V8)},O=async()=>{if(t.current)return rr(t.current,V8)},D=async()=>{if(t.current)return Ox(t.current,V8)},N=async()=>{if(t.current)return Nx(t.current,V8)},F=()=>{const K=Math.min(1,d+.1);L(K)},U=()=>{L(d-.1)},k=K=>{const X="zenuml-style";let r2;r2=document.createElement("style"),r2.id=X,document.head.append(r2),r2.textContent=K},n2=K=>{const X=new URL(K).hostname;if(X==="https://github.com"||X==="https://githubusercontent.com"){fetch(K.replace("github.com","raw.githubusercontent.com").replace("blob/","")).then(g2=>g2.text()).then(g2=>{k(g2)});return}const r2="zenuml-remote-css";let t2;t2=document.createElement("link"),t2.id=r2,t2.rel="stylesheet",document.head.append(t2),t2.href=K};return v.useImperativeHandle(i,()=>({toPng:w,toSvg:O,toBlob:D,toJpeg:N,zoomIn:F,zoomOut:U,setTheme:p,setRemoteCss:n2})),S.jsxs("div",{ref:t,className:G2("p-1 bg-skin-canvas inline-block",_),children:[S.jsx(Sw,{}),S.jsxs("div",{className:"frame text-skin-base bg-skin-frame border-skin-frame relative m-1 origin-top-left whitespace-nowrap border rounded",children:[S.jsxs("div",{ref:n,children:[S.jsxs("div",{className:"header text-skin-title bg-skin-title border-skin-frame border-b p-1 flex justify-between rounded-t",children:[S.jsx("div",{className:"left hide-export",children:e}),S.jsxs("div",{className:"right flex-grow flex justify-between",children:[S.jsx(vw,{context:b}),S.jsx(Tw,{className:"hide-export flex items-center"})]})]}),l&&S.jsx("div",{className:"fixed z-40 inset-0 overflow-y-auto","aria-labelledby":"modal-title",role:"dialog","aria-modal":"true",children:S.jsx(YD,{})}),S.jsx(Hf,{className:"origin-top-left",style:{transform:`scale(${d})`}})]}),S.jsx("div",{className:"footer rounded text-skin-control bg-skin-title px-4 py-1 flex justify-between items-center gap-3",children:R===F3.Dynamic&&S.jsxs(S.Fragment,{children:[S.jsxs("div",{className:"flex items-center gap-3 color-base",children:[S.jsx("button",{className:"bottom-1 flex items-center left-1 hide-export",onClick:M,children:S.jsx(Ce,{name:"tip",className:"filter grayscale w-4 h-4"})}),h&&S.jsx(KF,{}),S.jsxs("div",{className:"flex items-center",children:[S.jsx("input",{type:"checkbox",id:"order-display",className:"mr-1",checked:!!m,onChange:()=>f(!m)}),S.jsx("label",{htmlFor:"order-display",title:"Numbering the diagram",className:"select-none",children:S.jsx(Ce,{name:"numbering",className:"w-6 h-6"})})]})]}),S.jsxs("div",{className:"zoom-controls flex hide-export gap-1",children:[S.jsx("button",{className:"zoom-in",onClick:F,children:S.jsx(Ce,{name:"zoom-in",className:"w-4 h-4"})}),S.jsxs("label",{className:"w-12 block text-center",children:[Number(d*100).toFixed(0),"%"]}),S.jsx("button",{className:"zoom-out",onClick:U,children:S.jsx(Ce,{name:"zoom-out",className:"w-4 h-4"})})]}),S.jsx("a",{target:"_blank",href:"https://zenuml.com",className:"brand text-xs hover:underline",children:"ZenUML.com"})]})})]})]})},OH="3.36.0";function IH(i){const e=Math.floor(i/1e3),t=Math.floor(i%1e3),n=Math.floor((i%1e3-t)*1e3);return e+"s "+t+"ms "+n+"μs"}const DH=(i,e)=>{const n=Yf()-e;return console.debug(i+" cost: "+IH(n)),n},Yf=()=>performance.now();var Gl={exports:{}},S5={},zl={exports:{}},Hl={};/**
  * @license React
  * scheduler.production.js
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenuml/core",
-  "version": "3.35.2",
+  "version": "3.36.0",
   "private": false,
   "license": "MIT",
   "repository": {

package/test-mermaid-zenuml.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mermaid Zenuml Test Page</title>
+  </head>
+
+  <body>
+    <h1>Zenuml demos</h1>
+    <pre class="mermaid">
+        zenuml
+BookLibService.Borrow(id) {
+  User = Session.GetUser()
+  if(User.isActive) {
+    try {
+      BookRepository.Update(id, onLoan, User)
+      receipt = new Receipt(id, dueDate)
+    } catch (BookNotFoundException) {
+      ErrorService.onException(BookNotFoundException)
+    } finally {
+      Connection.close()
+    }
+  }
+  return receipt
+}
+    </pre>
+    <pre class="mermaid">
+        zenuml
+      title Async Messages (SPA Authentication)
+      // ```
+      // GET https://${account.namespace}/authorize/?
+      // response_type=token
+      // &client_id=${account.clientId}
+      // &redirect_url=YOUR_CALLBACK_URL
+      // &state=VALUE_THAT_SURVIVES_REDIRECTS
+      // &scope=openid
+      // ```
+      Browser->Auth0: 1. initiate the authentication
+      Auth0->"Identity Provider": 2. OAuth2 / SAML, etc
+      "Identity Provider"->"Identity Provider": 3. user gets authenticated
+      Auth0->Browser: 4. redirect to ${YOUR_CALLBACK_URL}/#id_token=e68...
+      Browser->Auth0: 5. validate id_token and get user profile
+      Browser->"Your API": 6. call API sending JWT in Authorization header
+      "Your API"->"Your API": 7. validate token
+    </pre>
+
+    <script type="module">
+      import mermaid from 'https://unpkg.com/mermaid/dist/mermaid.esm.mjs';
+      import zenuml from 'https://unpkg.com/@mermaid-js/mermaid-zenuml/dist/mermaid-zenuml.esm.mjs';
+      await mermaid.registerExternalDiagrams([zenuml]);
+      mermaid.initialize({
+        logLevel: 3,
+      });
+    </script>
+  </body>
+</html>