@lerx/promise-modal 0.1.1 → 0.2.1

package/dist/index.cjs

@@ -1,2 +1,966 @@
-function _EMOTION_STRINGIFIED_CSS_ERROR__$4(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}function _EMOTION_STRINGIFIED_CSS_ERROR__$3(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}function _EMOTION_STRINGIFIED_CSS_ERROR__$2(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}var e=require("react/jsx-runtime"),n=require("react"),o=require("@winglet/common-utils/convert"),t=require("@winglet/react-utils/hook"),r=require("@winglet/common-utils/lib"),i=require("@emotion/css"),s=require("react-dom"),a=require("@winglet/common-utils/array"),l=require("@winglet/react-utils/hoc"),c=require("@winglet/common-utils/filter"),d=require("@winglet/react-utils/render"),u=require("@winglet/common-utils/console");class ModalManager{static#e=0;static activate(){return ModalManager.#e?0:ModalManager.#e=1}static#n=null;static anchor(e){if(ModalManager.#n){const e=document.getElementById(ModalManager.#n.id);if(e)return e}const{tag:n="div",prefix:o="promise-modal",root:t=document.body}=e||{},i=document.createElement(n);return i.setAttribute("id",`${o}-${r.getRandomString(36)}`),t.appendChild(i),ModalManager.#n=i,i}static#o=[];static get prerender(){return ModalManager.#o}static#t=e=>ModalManager.#o.push(e);static set openHandler(e){ModalManager.#t=e,ModalManager.#o=[]}static get unanchored(){return!ModalManager.#n}static reset(){ModalManager.#e=0,ModalManager.#n=null,ModalManager.#o=[],ModalManager.#t=e=>ModalManager.#o.push(e)}static open(e){ModalManager.#t(e)}}class AbstractNode{id;initiator;title;subtitle;background;manualDestroy;closeOnBackdropClick;dimmed;ForegroundComponent;BackgroundComponent;#r;get alive(){return this.#r}#i;get visible(){return this.#i}#s;#a=new Set;constructor({id:e,initiator:n,title:o,subtitle:t,background:r,dimmed:i=1,manualDestroy:s=0,closeOnBackdropClick:a=1,resolve:l,ForegroundComponent:c,BackgroundComponent:d}){this.id=e,this.initiator=n,this.title=o,this.subtitle=t,this.background=r,this.dimmed=i,this.manualDestroy=s,this.closeOnBackdropClick=a,this.ForegroundComponent=c,this.BackgroundComponent=d,this.#r=1,this.#i=1,this.#s=l}subscribe(e){return this.#a.add(e),()=>{this.#a.delete(e)}}publish(){for(const e of this.#a)e()}resolve(e){this.#s(e)}onDestroy(){const e=1==this.#r;this.#r=0,this.manualDestroy&&e&&this.publish()}onShow(){const e=0==this.#i;this.#i=1,e&&this.publish()}onHide(){const e=1==this.#i;this.#i=0,e&&this.publish()}}class AlertNode extends AbstractNode{type;subtype;content;footer;constructor({id:e,initiator:n,type:o,subtype:t,title:r,subtitle:i,content:s,footer:a,background:l,dimmed:c,manualDestroy:d,closeOnBackdropClick:u,resolve:m,ForegroundComponent:p,BackgroundComponent:C}){super({id:e,initiator:n,title:r,subtitle:i,background:l,dimmed:c,manualDestroy:d,closeOnBackdropClick:u,resolve:m,ForegroundComponent:p,BackgroundComponent:C}),this.type=o,this.subtype=t,this.content=s,this.footer=a}onClose(){this.resolve(null)}onConfirm(){this.resolve(null)}}class ConfirmNode extends AbstractNode{type;subtype;content;footer;constructor({id:e,initiator:n,type:o,subtype:t,title:r,subtitle:i,content:s,footer:a,background:l,dimmed:c,manualDestroy:d,closeOnBackdropClick:u,resolve:m,ForegroundComponent:p,BackgroundComponent:C}){super({id:e,initiator:n,title:r,subtitle:i,background:l,dimmed:c,manualDestroy:d,closeOnBackdropClick:u,resolve:m,ForegroundComponent:p,BackgroundComponent:C}),this.type=o,this.subtype=t,this.content=s,this.footer=a}onClose(){this.resolve(0)}onConfirm(){this.resolve(1)}}class PromptNode extends AbstractNode{type;content;defaultValue;Input;disabled;returnOnCancel;footer;#l;constructor({id:e,initiator:n,type:o,title:t,subtitle:r,content:i,defaultValue:s,Input:a,disabled:l,returnOnCancel:c,footer:d,background:u,dimmed:m,manualDestroy:p,closeOnBackdropClick:C,resolve:h,ForegroundComponent:g,BackgroundComponent:f}){super({id:e,initiator:n,title:t,subtitle:r,background:u,dimmed:m,manualDestroy:p,closeOnBackdropClick:C,resolve:h,ForegroundComponent:g,BackgroundComponent:f}),this.type=o,this.content=i,this.Input=a,this.defaultValue=s,this.#l=s,this.disabled=l,this.returnOnCancel=c,this.footer=d}onChange(e){this.#l=e}onConfirm(){this.resolve(this.#l??null)}onClose(){this.returnOnCancel?this.resolve(this.#l??null):this.resolve(null)}}const nodeFactory=e=>{switch(e.type){case"alert":return new AlertNode(e);case"confirm":return new ConfirmNode(e);case"prompt":return new PromptNode(e)}throw new Error(`Unknown modal: ${e.type}`,{modal:e})},m=n.createContext({}),p=n.memo((({usePathname:r,children:i})=>{const s=n.useRef(new Map),[a,l]=n.useState([]),c=t.useReference(a),{pathname:d}=r(),u=n.useRef(d),p=n.useRef(0),C=useConfigurationOptions(),h=n.useMemo((()=>o.convertMsFromDuration(C.duration)),[C]);t.useOnMountLayout((()=>{const{manualDestroy:e,closeOnBackdropClick:n}=C;for(const o of ModalManager.prerender){const t=nodeFactory({...o,id:p.current++,initiator:u.current,manualDestroy:void 0!==o.manualDestroy?o.manualDestroy:e,closeOnBackdropClick:void 0!==o.closeOnBackdropClick?o.closeOnBackdropClick:n});s.current.set(t.id,t),l((e=>[...e,t.id]))}return ModalManager.openHandler=o=>{const t=nodeFactory({...o,id:p.current++,initiator:u.current,manualDestroy:void 0!==o.manualDestroy?o.manualDestroy:e,closeOnBackdropClick:void 0!==o.closeOnBackdropClick?o.closeOnBackdropClick:n});s.current.set(t.id,t),l((e=>{const n=[];for(let o=0;o<e.length;o++){const t=e[o];s.current.get(t)?.alive?n.push(t):s.current.delete(t)}return[...n,t.id]}))},()=>{ModalManager.reset()}})),n.useLayoutEffect((()=>{for(const e of c.current){const n=s.current.get(e);n?.alive&&(n.initiator===d?n.onShow():n.onHide())}u.current=d}),[d]);const g=n.useCallback((e=>s.current.get(e)),[]),f=n.useCallback((e=>{const n=s.current.get(e);n&&(n.onDestroy(),b.current?.())}),[]),b=n.useRef(void 0),v=n.useCallback((e=>{const n=s.current.get(e);n&&(n.onHide(),b.current?.(),n.manualDestroy||setTimeout((()=>{n.onDestroy()}),h))}),[h]),y=n.useCallback(((e,n)=>{const o=s.current.get(e);o&&"prompt"===o.type&&o.onChange(n)}),[]),x=n.useCallback((e=>{const n=s.current.get(e);n&&(n.onConfirm(),v(e))}),[v]),k=n.useCallback((e=>{const n=s.current.get(e);n&&(n.onClose(),v(e))}),[v]),M=n.useCallback((e=>({modal:g(e),onConfirm:()=>x(e),onClose:()=>k(e),onChange:n=>y(e,n),onDestroy:()=>f(e)})),[g,x,k,y,f]),O=n.useMemo((()=>({modalIds:a,getModalNode:g,onChange:y,onConfirm:x,onClose:k,onDestroy:f,getModal:M,setUpdater:e=>{b.current=e}})),[a,M,g,y,x,k,f]);return e.jsx(m.Provider,{value:O,children:i})})),useModalManagerContext=()=>n.useContext(m),useModal=e=>{const{getModal:o}=useModalManagerContext();return n.useMemo((()=>o(e)),[e,o])},C=i.css("production"===process.env.NODE_ENV?{name:"131j9g2",styles:"margin:unset"}:{name:"1w3kbco-fallback",styles:"margin:unset;label:fallback;",toString:_EMOTION_STRINGIFIED_CSS_ERROR__$4}),h=i.css("production"===process.env.NODE_ENV?{name:"1kuk3a3",styles:"display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:white;padding:20px 80px;gap:10px;border:1px solid black"}:{name:"16dbbea-frame",styles:"display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:white;padding:20px 80px;gap:10px;border:1px solid black;label:frame;",toString:_EMOTION_STRINGIFIED_CSS_ERROR__$4}),FallbackTitle=({children:n})=>e.jsx("h2",{className:C,children:n}),FallbackSubtitle=({children:n})=>e.jsx("h3",{className:C,children:n}),FallbackContent=({children:n})=>e.jsx("div",{className:C,children:n}),FallbackFooter=({confirmLabel:n,hideConfirm:o=0,cancelLabel:t,hideCancel:r=0,disabled:i,onConfirm:s,onCancel:a})=>e.jsxs("div",{children:[!o&&e.jsx("button",{onClick:s,disabled:i,children:n||"Confirm"}),!r&&"function"==typeof a&&e.jsx("button",{onClick:a,children:t||"Cancel"})]}),defaultValidate=e=>e?.visible,useActiveModalCount=(e=defaultValidate,o=0)=>{const{modalIds:t,getModalNode:r}=useModalManagerContext();return n.useMemo((()=>{let n=0;for(const o of t)e(r(o))&&n++;return n}),[r,t,o])},g=n.forwardRef((({id:o,onChangeOrder:t,children:r},i)=>{const s=useActiveModalCount(),[a,l]=n.useMemo((()=>{const e=s>1;return[e?Math.floor(o/5)%3*100:0,e?o%5*35:0]}),[s,o]);return e.jsx("div",{ref:i,className:h,onClick:t,style:{marginBottom:`calc(25vh + ${a}px)`,marginLeft:`${a}px`,transform:`translate(${l}px, ${l}px)`},children:r})})),f=n.createContext({}),b=n.memo((({ForegroundComponent:o,BackgroundComponent:t,TitleComponent:r,SubtitleComponent:i,ContentComponent:s,FooterComponent:a,options:l,children:c})=>{const d=n.useMemo((()=>({BackgroundComponent:t,ForegroundComponent:o||g,TitleComponent:r||FallbackTitle,SubtitleComponent:i||FallbackSubtitle,ContentComponent:n.memo(s||FallbackContent),FooterComponent:n.memo(a||FallbackFooter),options:{duration:"300ms",backdrop:"rgba(0, 0, 0, 0.5)",closeOnBackdropClick:1,manualDestroy:0,...l}})),[o,t,s,a,i,r,l]);return e.jsx(f.Provider,{value:d,children:c})})),useConfigurationContext=()=>n.useContext(f),useConfigurationOptions=()=>n.useContext(f).options,v=n.createContext({}),UserDefinedContextProvider=({context:o,children:t})=>{const r=n.useMemo((()=>({context:o||{}})),[o]);return e.jsx(v.Provider,{value:r,children:t})},useUserDefinedContext=()=>n.useContext(v),usePathname=()=>{const[e,o]=n.useState(window.location.pathname);return n.useLayoutEffect((()=>{let n;const checkPathname=()=>{n&&cancelAnimationFrame(n),e!==window.location.pathname?o(window.location.pathname):n=requestAnimationFrame(checkPathname)};return n=requestAnimationFrame(checkPathname),()=>{n&&cancelAnimationFrame(n)}}),[e]),{pathname:e}},y=i.css("production"===process.env.NODE_ENV?{name:"u7uu4v",styles:"display:none;position:fixed;inset:0;z-index:-999;pointer-events:none;>*{pointer-events:none;}"}:{name:"coymdj-background",styles:"display:none;position:fixed;inset:0;z-index:-999;pointer-events:none;>*{pointer-events:none;};label:background;",toString:_EMOTION_STRINGIFIED_CSS_ERROR__$3}),x=i.css("production"===process.env.NODE_ENV?{name:"n07k1x",styles:"pointer-events:all"}:{name:"1hektcs-active",styles:"pointer-events:all;label:active;",toString:_EMOTION_STRINGIFIED_CSS_ERROR__$3}),k=i.css("production"===process.env.NODE_ENV?{name:"1wnowod",styles:"display:flex;align-items:center;justify-content:center"}:{name:"xppew7-visible",styles:"display:flex;align-items:center;justify-content:center;label:visible;",toString:_EMOTION_STRINGIFIED_CSS_ERROR__$3}),BackgroundFrame=({modalId:o,onChangeOrder:t})=>{const{BackgroundComponent:r}=useConfigurationContext(),{context:s}=useUserDefinedContext(),{modal:a,onClose:l,onChange:c,onConfirm:d,onDestroy:u}=useModal(o),m=n.useCallback((e=>{a&&a.closeOnBackdropClick&&a.visible&&l(),e.stopPropagation()}),[a,l]),p=n.useMemo((()=>a?.BackgroundComponent||r),[r,a]);return a?e.jsx("div",{className:i.cx(y,{[k]:a.manualDestroy?a.alive:a.visible,[x]:a.closeOnBackdropClick&&a.visible}),onClick:m,children:p&&e.jsx(p,{id:a.id,type:a.type,alive:a.alive,visible:a.visible,initiator:a.initiator,manualDestroy:a.manualDestroy,closeOnBackdropClick:a.closeOnBackdropClick,background:a.background,onChange:c,onConfirm:d,onClose:l,onDestroy:u,onChangeOrder:t,context:s})}):null},M=i.css("production"===process.env.NODE_ENV?{name:"12g0hx0",styles:"pointer-events:none;display:none;position:fixed;inset:0;z-index:1"}:{name:"1hcczik-foreground",styles:"pointer-events:none;display:none;position:fixed;inset:0;z-index:1;label:foreground;",toString:_EMOTION_STRINGIFIED_CSS_ERROR__$2}),O=i.css("production"===process.env.NODE_ENV?{name:"1g95xyq",styles:">*{pointer-events:all;}"}:{name:"123csva-active",styles:">*{pointer-events:all;};label:active;",toString:_EMOTION_STRINGIFIED_CSS_ERROR__$2}),_=i.css("production"===process.env.NODE_ENV?{name:"1fmljv2",styles:"display:flex!important;justify-content:center;align-items:center"}:{name:"1p4unab-visible",styles:"display:flex!important;justify-content:center;align-items:center;label:visible;",toString:_EMOTION_STRINGIFIED_CSS_ERROR__$2}),I=n.memo((({modal:o,handlers:r})=>{const{title:i,subtitle:s,content:a,footer:l}=n.useMemo((()=>o),[o]),{context:u}=useUserDefinedContext(),{onConfirm:m}=n.useMemo((()=>r),[r]),p=t.useHandle(m),{TitleComponent:C,SubtitleComponent:h,ContentComponent:g,FooterComponent:f}=useConfigurationContext();return e.jsxs(n.Fragment,{children:[i&&(c.isString(i)?e.jsx(C,{context:u,children:i}):i),s&&(c.isString(s)?e.jsx(h,{context:u,children:s}):s),a&&(c.isString(a)?e.jsx(g,{context:u,children:a}):d.renderComponent(a,{onConfirm:p})),0!=l&&("function"==typeof l?l({onConfirm:p,context:u}):e.jsx(f,{onConfirm:p,confirmLabel:l?.confirm,hideConfirm:l?.hideConfirm,context:u}))]})})),S=n.memo((({modal:o,handlers:r})=>{const{title:i,subtitle:s,content:a,footer:l}=n.useMemo((()=>o),[o]),{context:u}=useUserDefinedContext(),{onConfirm:m,onClose:p}=n.useMemo((()=>r),[r]),C=t.useHandle(m),h=t.useHandle(p),{TitleComponent:g,SubtitleComponent:f,ContentComponent:b,FooterComponent:v}=useConfigurationContext();return e.jsxs(n.Fragment,{children:[i&&(c.isString(i)?e.jsx(g,{context:u,children:i}):i),s&&(c.isString(s)?e.jsx(f,{context:u,children:s}):s),a&&(c.isString(a)?e.jsx(b,{context:u,children:a}):d.renderComponent(a,{onConfirm:C,onCancel:h,context:u})),0!=l&&("function"==typeof l?l({onConfirm:C,onCancel:h,context:u}):e.jsx(v,{onConfirm:C,onCancel:h,confirmLabel:l?.confirm,cancelLabel:l?.cancel,hideConfirm:l?.hideConfirm,hideCancel:l?.hideCancel,context:u}))]})})),D=n.memo((({modal:o,handlers:r})=>{const{Input:i,defaultValue:s,disabled:a,title:u,subtitle:m,content:p,footer:C}=n.useMemo((()=>({...o,Input:n.memo(l.withErrorBoundary(o.Input))})),[o]),{context:h}=useUserDefinedContext(),[g,f]=n.useState(s),{onChange:b,onClose:v,onConfirm:y}=n.useMemo((()=>r),[r]),x=t.useHandle(v),k=t.useHandle((e=>{const n=c.isFunction(e)?e(g):e;f(n),b(n)})),M=n.useCallback((()=>{requestAnimationFrame(y)}),[y]),O=n.useMemo((()=>g?!!a?.(g):0),[a,g]),{TitleComponent:_,SubtitleComponent:I,ContentComponent:S,FooterComponent:D}=useConfigurationContext();return e.jsxs(n.Fragment,{children:[u&&(c.isString(u)?e.jsx(_,{context:h,children:u}):u),m&&(c.isString(m)?e.jsx(I,{context:h,children:m}):m),p&&(c.isString(p)?e.jsx(S,{context:h,children:p}):d.renderComponent(p,{onConfirm:M,onCancel:x,context:h})),i&&e.jsx(i,{defaultValue:s,value:g,onChange:k,onConfirm:M,onCancel:x,context:h}),0!=C&&("function"==typeof C?C({value:g,disabled:O,onChange:k,onConfirm:M,onCancel:x,context:h}):e.jsx(D,{disabled:O,onConfirm:M,onCancel:x,confirmLabel:C?.confirm,cancelLabel:C?.cancel,hideConfirm:C?.hideConfirm,hideCancel:C?.hideCancel,context:h}))]})})),ForegroundFrame=({modalId:o,onChangeOrder:t})=>{const{ForegroundComponent:r}=useConfigurationContext(),{context:s}=useUserDefinedContext(),{modal:a,onChange:l,onConfirm:c,onClose:d,onDestroy:u}=useModal(o),m=n.useMemo((()=>a?.ForegroundComponent||r),[r,a]);return a?e.jsx("div",{className:i.cx(M,{[_]:a.manualDestroy?a.alive:a.visible,[O]:a.visible}),children:e.jsxs(m,{id:a.id,type:a.type,alive:a.alive,visible:a.visible,initiator:a.initiator,manualDestroy:a.manualDestroy,closeOnBackdropClick:a.closeOnBackdropClick,background:a.background,onChange:l,onConfirm:c,onClose:d,onDestroy:u,onChangeOrder:t,context:s,children:["alert"===a.type&&e.jsx(I,{modal:a,handlers:{onConfirm:c}}),"confirm"===a.type&&e.jsx(S,{modal:a,handlers:{onConfirm:c,onClose:d}}),"prompt"===a.type&&e.jsx(D,{modal:a,handlers:{onChange:l,onConfirm:c,onClose:d}})]})}):null},useSubscribeModal=e=>{const[o,r]=t.useVersion();return n.useEffect((()=>{if(e)return e.subscribe(r)}),[e,r]),o},N=i.css("production"===process.env.NODE_ENV?{name:"13dmkf4",styles:"position:fixed;inset:0;pointer-events:none;overflow:hidden"}:{name:"yjeu12-presenter",styles:"position:fixed;inset:0;pointer-events:none;overflow:hidden;label:presenter;",toString:function _EMOTION_STRINGIFIED_CSS_ERROR__$1(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}}),{increment:E}=r.counterFactory(1),R=n.memo((({modalId:o})=>{const r=n.useRef(null),{modal:i}=useModal(o);useSubscribeModal(i);const s=t.useHandle((()=>{r.current&&(r.current.style.zIndex=`${E()}`)}));return e.jsxs("div",{ref:r,className:N,children:[e.jsx(BackgroundFrame,{modalId:o,onChangeOrder:s}),e.jsx(ForegroundFrame,{modalId:o,onChangeOrder:s})]})})),F=i.css("production"===process.env.NODE_ENV?{name:"2hpasy",styles:"display:flex;align-items:center;justify-content:center;position:fixed;inset:0;pointer-events:none;z-index:1000;transition:background-color ease-in-out"}:{name:"lhj8co-anchor",styles:"display:flex;align-items:center;justify-content:center;position:fixed;inset:0;pointer-events:none;z-index:1000;transition:background-color ease-in-out;label:anchor;",toString:function _EMOTION_STRINGIFIED_CSS_ERROR__(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}}),validateDimmable=e=>e?.visible&&e.dimmed,j=n.memo(l.withErrorBoundary((()=>{const[o,r]=t.useVersion(),{modalIds:i,setUpdater:s}=useModalManagerContext();n.useEffect((()=>{s(r)}),[s,r]);const l=useConfigurationOptions(),c=useActiveModalCount(validateDimmable,o);return e.jsx("div",{className:F,style:{transitionDuration:l.duration,backgroundColor:c?l.backdrop:"transparent"},children:a.map(i,(n=>e.jsx(R,{modalId:n},n)))})}))),bootstrap=({ForegroundComponent:n,BackgroundComponent:o,TitleComponent:t,SubtitleComponent:r,ContentComponent:i,FooterComponent:a,usePathname:l,options:c,context:d,anchor:u})=>s.createPortal(e.jsx(UserDefinedContextProvider,{context:d,children:e.jsx(b,{ForegroundComponent:n,BackgroundComponent:o,TitleComponent:t,SubtitleComponent:r,ContentComponent:i,FooterComponent:a,options:c,children:e.jsx(p,{usePathname:l,children:e.jsx(j,{})})})}),u),useInitialize=()=>{const e=n.useRef(ModalManager.activate()),o=n.useRef(null),[,r]=t.useVersion(),i=n.useCallback((n=>{e.current?(o.current=ModalManager.anchor({root:n}),r()):u.printError("ModalProvider is already initialized",["ModalProvider can only be initialized once.","Nesting ModalProvider will be ignored..."],{info:"Something is wrong with the ModalProvider initialization..."})}),[r]);return{anchorRef:o,handleInitialize:i}},B=n.forwardRef((({usePathname:o,ForegroundComponent:r,BackgroundComponent:i,TitleComponent:s,SubtitleComponent:a,ContentComponent:l,FooterComponent:c,options:d,context:u,children:m},p)=>{const C=n.useMemo((()=>o||usePathname),[o]),{anchorRef:h,handleInitialize:g}=useInitialize();return n.useImperativeHandle(p,(()=>({initialize:g})),[g]),t.useOnMount((()=>(null===p&&g(),()=>{h.current&&h.current.remove()}))),e.jsxs(n.Fragment,{children:[m,h.current&&bootstrap({ForegroundComponent:r,BackgroundComponent:i,TitleComponent:s,SubtitleComponent:a,ContentComponent:l,FooterComponent:c,usePathname:C,options:d,context:u,anchor:h.current})]})}));exports.ModalProvider=B,exports.alert=({subtype:e,title:n,subtitle:o,content:t,background:r,footer:i,dimmed:s,manualDestroy:a,closeOnBackdropClick:l,ForegroundComponent:c,BackgroundComponent:d})=>new Promise(((u,m)=>{try{ModalManager.open({type:"alert",subtype:e,resolve:()=>u(),title:n,subtitle:o,content:t,background:r,footer:i,dimmed:s,manualDestroy:a,closeOnBackdropClick:l,ForegroundComponent:c,BackgroundComponent:d})}catch(e){m(e)}})),exports.confirm=({subtype:e,title:n,subtitle:o,content:t,background:r,footer:i,dimmed:s,manualDestroy:a,closeOnBackdropClick:l,ForegroundComponent:c,BackgroundComponent:d})=>new Promise(((u,m)=>{try{ModalManager.open({type:"confirm",subtype:e,resolve:e=>u(e??0),title:n,subtitle:o,content:t,background:r,footer:i,dimmed:s,manualDestroy:a,closeOnBackdropClick:l,ForegroundComponent:c,BackgroundComponent:d})}catch(e){m(e)}})),exports.prompt=({defaultValue:e,title:n,subtitle:o,content:t,Input:r,disabled:i,returnOnCancel:s,background:a,footer:l,dimmed:c,manualDestroy:d,closeOnBackdropClick:u,ForegroundComponent:m,BackgroundComponent:p})=>new Promise(((C,h)=>{try{ModalManager.open({type:"prompt",resolve:e=>C(e),title:n,subtitle:o,content:t,Input:r,defaultValue:e,disabled:i,returnOnCancel:s,background:a,footer:l,dimmed:c,manualDestroy:d,closeOnBackdropClick:u,ForegroundComponent:m,BackgroundComponent:p})}catch(e){h(e)}})),exports.useActiveModalCount=useActiveModalCount,exports.useDestroyAfter=(e,t)=>{const{modal:r,onDestroy:i}=useModal(e),s=useSubscribeModal(r),a=n.useRef({modal:r,onDestroy:i,milliseconds:c.isString(t)?o.convertMsFromDuration(t):t});n.useEffect((()=>{const{modal:e,onDestroy:n,milliseconds:o}=a.current;if(!e||e.visible||!e.alive)return;const t=setTimeout((()=>{n()}),o);return()=>{t&&clearTimeout(t)}}),[s])},exports.useInitializeModal=({usePathname:e,ForegroundComponent:o,BackgroundComponent:r,TitleComponent:i,SubtitleComponent:s,ContentComponent:a,FooterComponent:l,options:c,context:d,mode:u="auto"}={})=>{const m=n.useMemo((()=>e||usePathname),[e]),{anchorRef:p,handleInitialize:C}=useInitialize();t.useOnMount((()=>("auto"===u&&C(),()=>{p.current&&p.current.remove()})));const h=n.useCallback((e=>{"manual"===u&&C(e)}),[u,C]);return{portal:p.current&&bootstrap({usePathname:m,ForegroundComponent:o,BackgroundComponent:r,TitleComponent:i,SubtitleComponent:s,ContentComponent:a,FooterComponent:l,options:c,context:d,anchor:p.current}),initialize:h}},exports.useModalAnimation=(e,o)=>{const t=n.useRef(o);t.current=o,n.useLayoutEffect((()=>{if(!t.current)return;let n;return n=e?requestAnimationFrame((()=>t.current.onVisible?.())):requestAnimationFrame((()=>t.current.onHidden?.())),()=>{n&&cancelAnimationFrame(n)}}),[e])},exports.useModalBackdrop=()=>useConfigurationOptions().backdrop,exports.useModalDuration=()=>{const e=useConfigurationOptions();return{duration:e.duration,milliseconds:o.convertMsFromDuration(e.duration)}},exports.useModalOptions=useConfigurationOptions,exports.useSubscribeModal=useSubscribeModal;
-//# sourceMappingURL=index.cjs.map
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const convert = require('@winglet/common-utils/convert');
+const hook = require('@winglet/react-utils/hook');
+const lib = require('@winglet/common-utils/lib');
+const css = require('@emotion/css');
+const reactDom = require('react-dom');
+const array = require('@winglet/common-utils/array');
+const hoc = require('@winglet/react-utils/hoc');
+const filter = require('@winglet/common-utils/filter');
+const render = require('@winglet/react-utils/render');
+const console = require('@winglet/common-utils/console');
+
+class ModalManager {
+    static #active = false;
+    static activate() {
+        if (ModalManager.#active)
+            return false;
+        return (ModalManager.#active = true);
+    }
+    static #anchor = null;
+    static anchor(options) {
+        if (ModalManager.#anchor) {
+            const anchor = document.getElementById(ModalManager.#anchor.id);
+            if (anchor)
+                return anchor;
+        }
+        const { tag = 'div', prefix = 'promise-modal', root = document.body, } = options || {};
+        const node = document.createElement(tag);
+        node.setAttribute('id', `${prefix}-${lib.getRandomString(36)}`);
+        root.appendChild(node);
+        ModalManager.#anchor = node;
+        return node;
+    }
+    static #prerenderList = [];
+    static get prerender() {
+        return ModalManager.#prerenderList;
+    }
+    static #openHandler = (modal) => ModalManager.#prerenderList.push(modal);
+    static set openHandler(handler) {
+        ModalManager.#openHandler = handler;
+        ModalManager.#prerenderList = [];
+    }
+    static get unanchored() {
+        return !ModalManager.#anchor;
+    }
+    static reset() {
+        ModalManager.#active = false;
+        ModalManager.#anchor = null;
+        ModalManager.#prerenderList = [];
+        ModalManager.#openHandler = (modal) => ModalManager.#prerenderList.push(modal);
+    }
+    static open(modal) {
+        ModalManager.#openHandler(modal);
+    }
+}
+
+const alert = ({ subtype, title, subtitle, content, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
+    return new Promise((resolve, reject) => {
+        try {
+            ModalManager.open({
+                type: 'alert',
+                subtype,
+                resolve: () => resolve(),
+                title,
+                subtitle,
+                content,
+                background,
+                footer,
+                dimmed,
+                manualDestroy,
+                closeOnBackdropClick,
+                ForegroundComponent,
+                BackgroundComponent,
+            });
+        }
+        catch (error) {
+            reject(error);
+        }
+    });
+};
+
+const confirm = ({ subtype, title, subtitle, content, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
+    return new Promise((resolve, reject) => {
+        try {
+            ModalManager.open({
+                type: 'confirm',
+                subtype,
+                resolve: (result) => resolve(result ?? false),
+                title,
+                subtitle,
+                content,
+                background,
+                footer,
+                dimmed,
+                manualDestroy,
+                closeOnBackdropClick,
+                ForegroundComponent,
+                BackgroundComponent,
+            });
+        }
+        catch (error) {
+            reject(error);
+        }
+    });
+};
+
+const prompt = ({ defaultValue, title, subtitle, content, Input, disabled, returnOnCancel, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
+    return new Promise((resolve, reject) => {
+        try {
+            ModalManager.open({
+                type: 'prompt',
+                resolve: (result) => resolve(result),
+                title,
+                subtitle,
+                content,
+                Input,
+                defaultValue,
+                disabled,
+                returnOnCancel,
+                background,
+                footer,
+                dimmed,
+                manualDestroy,
+                closeOnBackdropClick,
+                ForegroundComponent,
+                BackgroundComponent,
+            });
+        }
+        catch (error) {
+            reject(error);
+        }
+    });
+};
+
+class AbstractNode {
+    id;
+    initiator;
+    title;
+    subtitle;
+    background;
+    manualDestroy;
+    closeOnBackdropClick;
+    dimmed;
+    ForegroundComponent;
+    BackgroundComponent;
+    #alive;
+    get alive() {
+        return this.#alive;
+    }
+    #visible;
+    get visible() {
+        return this.#visible;
+    }
+    #resolve;
+    #listeners = new Set();
+    constructor({ id, initiator, title, subtitle, background, dimmed = true, manualDestroy = false, closeOnBackdropClick = true, resolve, ForegroundComponent, BackgroundComponent, }) {
+        this.id = id;
+        this.initiator = initiator;
+        this.title = title;
+        this.subtitle = subtitle;
+        this.background = background;
+        this.dimmed = dimmed;
+        this.manualDestroy = manualDestroy;
+        this.closeOnBackdropClick = closeOnBackdropClick;
+        this.ForegroundComponent = ForegroundComponent;
+        this.BackgroundComponent = BackgroundComponent;
+        this.#alive = true;
+        this.#visible = true;
+        this.#resolve = resolve;
+    }
+    subscribe(listener) {
+        this.#listeners.add(listener);
+        return () => {
+            this.#listeners.delete(listener);
+        };
+    }
+    publish() {
+        for (const listener of this.#listeners)
+            listener();
+    }
+    resolve(result) {
+        this.#resolve(result);
+    }
+    onDestroy() {
+        const needPublish = this.#alive === true;
+        this.#alive = false;
+        if (this.manualDestroy && needPublish)
+            this.publish();
+    }
+    onShow() {
+        const needPublish = this.#visible === false;
+        this.#visible = true;
+        if (needPublish)
+            this.publish();
+    }
+    onHide() {
+        const needPublish = this.#visible === true;
+        this.#visible = false;
+        if (needPublish)
+            this.publish();
+    }
+}
+
+class AlertNode extends AbstractNode {
+    type;
+    subtype;
+    content;
+    footer;
+    constructor({ id, initiator, type, subtype, title, subtitle, content, footer, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }) {
+        super({
+            id,
+            initiator,
+            title,
+            subtitle,
+            background,
+            dimmed,
+            manualDestroy,
+            closeOnBackdropClick,
+            resolve,
+            ForegroundComponent,
+            BackgroundComponent,
+        });
+        this.type = type;
+        this.subtype = subtype;
+        this.content = content;
+        this.footer = footer;
+    }
+    onClose() {
+        this.resolve(null);
+    }
+    onConfirm() {
+        this.resolve(null);
+    }
+}
+
+class ConfirmNode extends AbstractNode {
+    type;
+    subtype;
+    content;
+    footer;
+    constructor({ id, initiator, type, subtype, title, subtitle, content, footer, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }) {
+        super({
+            id,
+            initiator,
+            title,
+            subtitle,
+            background,
+            dimmed,
+            manualDestroy,
+            closeOnBackdropClick,
+            resolve,
+            ForegroundComponent,
+            BackgroundComponent,
+        });
+        this.type = type;
+        this.subtype = subtype;
+        this.content = content;
+        this.footer = footer;
+    }
+    onClose() {
+        this.resolve(false);
+    }
+    onConfirm() {
+        this.resolve(true);
+    }
+}
+
+class PromptNode extends AbstractNode {
+    type;
+    content;
+    defaultValue;
+    Input;
+    disabled;
+    returnOnCancel;
+    footer;
+    #value;
+    constructor({ id, initiator, type, title, subtitle, content, defaultValue, Input, disabled, returnOnCancel, footer, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }) {
+        super({
+            id,
+            initiator,
+            title,
+            subtitle,
+            background,
+            dimmed,
+            manualDestroy,
+            closeOnBackdropClick,
+            resolve,
+            ForegroundComponent,
+            BackgroundComponent,
+        });
+        this.type = type;
+        this.content = content;
+        this.Input = Input;
+        this.defaultValue = defaultValue;
+        this.#value = defaultValue;
+        this.disabled = disabled;
+        this.returnOnCancel = returnOnCancel;
+        this.footer = footer;
+    }
+    onChange(value) {
+        this.#value = value;
+    }
+    onConfirm() {
+        this.resolve(this.#value ?? null);
+    }
+    onClose() {
+        if (this.returnOnCancel)
+            this.resolve(this.#value ?? null);
+        else
+            this.resolve(null);
+    }
+}
+
+const nodeFactory = (modal) => {
+    switch (modal.type) {
+        case 'alert':
+            return new AlertNode(modal);
+        case 'confirm':
+            return new ConfirmNode(modal);
+        case 'prompt':
+            return new PromptNode(modal);
+    }
+    throw new Error(`Unknown modal: ${modal.type}`, { modal });
+};
+
+const DEFAULT_ANIMATION_DURATION = '300ms';
+const DEFAULT_BACKDROP_COLOR = 'rgba(0, 0, 0, 0.5)';
+
+const fallback = css.css `
+  margin: unset;
+`;
+const frame = css.css `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  padding: 20px 80px;
+  gap: 10px;
+  border: 1px solid black;
+`;
+
+const FallbackTitle = ({ children }) => {
+    return jsxRuntime.jsx("h2", { className: fallback, children: children });
+};
+
+const FallbackSubtitle = ({ children }) => {
+    return jsxRuntime.jsx("h3", { className: fallback, children: children });
+};
+
+const FallbackContent = ({ children }) => {
+    return jsxRuntime.jsx("div", { className: fallback, children: children });
+};
+
+const FallbackFooter = ({ confirmLabel, hideConfirm = false, cancelLabel, hideCancel = false, disabled, onConfirm, onCancel, }) => {
+    return (jsxRuntime.jsxs("div", { children: [!hideConfirm && (jsxRuntime.jsx("button", { onClick: onConfirm, disabled: disabled, children: confirmLabel || 'Confirm' })), !hideCancel && typeof onCancel === 'function' && (jsxRuntime.jsx("button", { onClick: onCancel, children: cancelLabel || 'Cancel' }))] }));
+};
+
+const ModalManagerContext = react.createContext({});
+
+const useModalManagerContext = () => react.useContext(ModalManagerContext);
+const useModal = (id) => {
+    const { getModal } = useModalManagerContext();
+    return react.useMemo(() => getModal(id), [id, getModal]);
+};
+
+const defaultValidate = (modal) => modal?.visible;
+const useActiveModalCount = (validate = defaultValidate, refreshKey = 0) => {
+    const { modalIds, getModalNode } = useModalManagerContext();
+    return react.useMemo(() => {
+        let count = 0;
+        for (const id of modalIds) {
+            if (validate(getModalNode(id)))
+                count++;
+        }
+        return count;
+    }, [getModalNode, modalIds, refreshKey]);
+};
+
+const MAX_MODAL_COUNT = 5;
+const MAX_MODAL_LEVEL = 3;
+const FallbackForegroundFrame = react.forwardRef(({ id, onChangeOrder, children }, ref) => {
+    const activeCount = useActiveModalCount();
+    const [level, offset] = react.useMemo(() => {
+        const stacked = activeCount > 1;
+        const level = stacked
+            ? (Math.floor(id / MAX_MODAL_COUNT) % MAX_MODAL_LEVEL) * 100
+            : 0;
+        const offset = stacked ? (id % MAX_MODAL_COUNT) * 35 : 0;
+        return [level, offset];
+    }, [activeCount, id]);
+    return (jsxRuntime.jsx("div", { ref: ref, className: frame, onClick: onChangeOrder, style: {
+            marginBottom: `calc(25vh + ${level}px)`,
+            marginLeft: `${level}px`,
+            transform: `translate(${offset}px, ${offset}px)`,
+        }, children: children }));
+});
+
+const ConfigurationContext = react.createContext({});
+
+const ConfigurationContextProvider = react.memo(({ ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, children, }) => {
+    const value = react.useMemo(() => ({
+        BackgroundComponent,
+        ForegroundComponent: ForegroundComponent || FallbackForegroundFrame,
+        TitleComponent: TitleComponent || FallbackTitle,
+        SubtitleComponent: SubtitleComponent || FallbackSubtitle,
+        ContentComponent: react.memo(ContentComponent || FallbackContent),
+        FooterComponent: react.memo(FooterComponent || FallbackFooter),
+        options: {
+            duration: DEFAULT_ANIMATION_DURATION,
+            backdrop: DEFAULT_BACKDROP_COLOR,
+            closeOnBackdropClick: true,
+            manualDestroy: false,
+            ...options,
+        },
+    }), [
+        ForegroundComponent,
+        BackgroundComponent,
+        ContentComponent,
+        FooterComponent,
+        SubtitleComponent,
+        TitleComponent,
+        options,
+    ]);
+    return (jsxRuntime.jsx(ConfigurationContext.Provider, { value: value, children: children }));
+});
+
+const useConfigurationContext = () => react.useContext(ConfigurationContext);
+const useConfigurationOptions = () => {
+    const context = react.useContext(ConfigurationContext);
+    return context.options;
+};
+const useConfigurationDuration = () => {
+    const context = useConfigurationOptions();
+    return {
+        duration: context.duration,
+        milliseconds: convert.convertMsFromDuration(context.duration),
+    };
+};
+const useConfigurationBackdrop = () => {
+    const context = useConfigurationOptions();
+    return context.backdrop;
+};
+
+const ModalManagerContextProvider = react.memo(({ usePathname, children, }) => {
+    const modalDictionary = react.useRef(new Map());
+    const [modalIds, setModalIds] = react.useState([]);
+    const modalIdsRef = hook.useReference(modalIds);
+    const { pathname } = usePathname();
+    const initiator = react.useRef(pathname);
+    const modalIdSequence = react.useRef(0);
+    const options = useConfigurationOptions();
+    const duration = react.useMemo(() => convert.convertMsFromDuration(options.duration), [options]);
+    hook.useOnMountLayout(() => {
+        const { manualDestroy, closeOnBackdropClick } = options;
+        for (const data of ModalManager.prerender) {
+            const modal = nodeFactory({
+                ...data,
+                id: modalIdSequence.current++,
+                initiator: initiator.current,
+                manualDestroy: data.manualDestroy !== undefined
+                    ? data.manualDestroy
+                    : manualDestroy,
+                closeOnBackdropClick: data.closeOnBackdropClick !== undefined
+                    ? data.closeOnBackdropClick
+                    : closeOnBackdropClick,
+            });
+            modalDictionary.current.set(modal.id, modal);
+            setModalIds((ids) => [...ids, modal.id]);
+        }
+        ModalManager.openHandler = (data) => {
+            const modal = nodeFactory({
+                ...data,
+                id: modalIdSequence.current++,
+                initiator: initiator.current,
+                manualDestroy: data.manualDestroy !== undefined
+                    ? data.manualDestroy
+                    : manualDestroy,
+                closeOnBackdropClick: data.closeOnBackdropClick !== undefined
+                    ? data.closeOnBackdropClick
+                    : closeOnBackdropClick,
+            });
+            modalDictionary.current.set(modal.id, modal);
+            setModalIds((ids) => {
+                const aliveIds = [];
+                for (let index = 0; index < ids.length; index++) {
+                    const id = ids[index];
+                    const destroyed = !modalDictionary.current.get(id)?.alive;
+                    if (destroyed)
+                        modalDictionary.current.delete(id);
+                    else
+                        aliveIds.push(id);
+                }
+                return [...aliveIds, modal.id];
+            });
+        };
+        return () => {
+            ModalManager.reset();
+        };
+    });
+    react.useLayoutEffect(() => {
+        for (const id of modalIdsRef.current) {
+            const modal = modalDictionary.current.get(id);
+            if (!modal?.alive)
+                continue;
+            if (modal.initiator === pathname)
+                modal.onShow();
+            else
+                modal.onHide();
+        }
+        initiator.current = pathname;
+    }, [pathname]);
+    const getModalNode = react.useCallback((modalId) => {
+        return modalDictionary.current.get(modalId);
+    }, []);
+    const onDestroy = react.useCallback((modalId) => {
+        const modal = modalDictionary.current.get(modalId);
+        if (!modal)
+            return;
+        modal.onDestroy();
+        updaterRef.current?.();
+    }, []);
+    const updaterRef = react.useRef(undefined);
+    const hideModal = react.useCallback((modalId) => {
+        const modal = modalDictionary.current.get(modalId);
+        if (!modal)
+            return;
+        modal.onHide();
+        updaterRef.current?.();
+        if (!modal.manualDestroy)
+            setTimeout(() => {
+                modal.onDestroy();
+            }, duration);
+    }, [duration]);
+    const onChange = react.useCallback((modalId, value) => {
+        const modal = modalDictionary.current.get(modalId);
+        if (!modal)
+            return;
+        if (modal.type === 'prompt')
+            modal.onChange(value);
+    }, []);
+    const onConfirm = react.useCallback((modalId) => {
+        const modal = modalDictionary.current.get(modalId);
+        if (!modal)
+            return;
+        modal.onConfirm();
+        hideModal(modalId);
+    }, [hideModal]);
+    const onClose = react.useCallback((modalId) => {
+        const modal = modalDictionary.current.get(modalId);
+        if (!modal)
+            return;
+        modal.onClose();
+        hideModal(modalId);
+    }, [hideModal]);
+    const getModal = react.useCallback((modalId) => ({
+        modal: getModalNode(modalId),
+        onConfirm: () => onConfirm(modalId),
+        onClose: () => onClose(modalId),
+        onChange: (value) => onChange(modalId, value),
+        onDestroy: () => onDestroy(modalId),
+    }), [getModalNode, onConfirm, onClose, onChange, onDestroy]);
+    const value = react.useMemo(() => {
+        return {
+            modalIds,
+            getModalNode,
+            onChange,
+            onConfirm,
+            onClose,
+            onDestroy,
+            getModal,
+            setUpdater: (updater) => {
+                updaterRef.current = updater;
+            },
+        };
+    }, [
+        modalIds,
+        getModal,
+        getModalNode,
+        onChange,
+        onConfirm,
+        onClose,
+        onDestroy,
+    ]);
+    return (jsxRuntime.jsx(ModalManagerContext.Provider, { value: value, children: children }));
+});
+
+const UserDefinedContext = react.createContext({});
+
+const UserDefinedContextProvider = ({ context, children, }) => {
+    const contextValue = react.useMemo(() => ({ context: context || {} }), [context]);
+    return (jsxRuntime.jsx(UserDefinedContext.Provider, { value: contextValue, children: children }));
+};
+
+const useUserDefinedContext = () => {
+    return react.useContext(UserDefinedContext);
+};
+
+const usePathname = () => {
+    const [pathname, setPathname] = react.useState(window.location.pathname);
+    react.useLayoutEffect(() => {
+        let requestId;
+        const checkPathname = () => {
+            if (requestId)
+                cancelAnimationFrame(requestId);
+            if (pathname !== window.location.pathname) {
+                setPathname(window.location.pathname);
+            }
+            else {
+                requestId = requestAnimationFrame(checkPathname);
+            }
+        };
+        requestId = requestAnimationFrame(checkPathname);
+        return () => {
+            if (requestId)
+                cancelAnimationFrame(requestId);
+        };
+    }, [pathname]);
+    return { pathname };
+};
+
+const background = css.css `
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: -999;
+  pointer-events: none;
+  > * {
+    pointer-events: none;
+  }
+`;
+const active$1 = css.css `
+  pointer-events: all;
+`;
+const visible$1 = css.css `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const BackgroundFrame = ({ modalId, onChangeOrder, }) => {
+    const { BackgroundComponent } = useConfigurationContext();
+    const { context: userDefinedContext } = useUserDefinedContext();
+    const { modal, onClose, onChange, onConfirm, onDestroy } = useModal(modalId);
+    const handleClose = react.useCallback((event) => {
+        if (modal && modal.closeOnBackdropClick && modal.visible)
+            onClose();
+        event.stopPropagation();
+    }, [modal, onClose]);
+    const Background = react.useMemo(() => modal?.BackgroundComponent || BackgroundComponent, [BackgroundComponent, modal]);
+    if (!modal)
+        return null;
+    return (jsxRuntime.jsx("div", { className: css.cx(background, {
+            [visible$1]: modal.manualDestroy ? modal.alive : modal.visible,
+            [active$1]: modal.closeOnBackdropClick && modal.visible,
+        }), onClick: handleClose, children: Background && (jsxRuntime.jsx(Background, { id: modal.id, type: modal.type, alive: modal.alive, visible: modal.visible, initiator: modal.initiator, manualDestroy: modal.manualDestroy, closeOnBackdropClick: modal.closeOnBackdropClick, background: modal.background, onChange: onChange, onConfirm: onConfirm, onClose: onClose, onDestroy: onDestroy, onChangeOrder: onChangeOrder, context: userDefinedContext })) }));
+};
+
+const foreground = css.css `
+  pointer-events: none;
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 1;
+`;
+const active = css.css `
+  > * {
+    pointer-events: all;
+  }
+`;
+const visible = css.css `
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+`;
+
+const AlertInner = react.memo(({ modal, handlers }) => {
+    const { title, subtitle, content, footer } = react.useMemo(() => modal, [modal]);
+    const { context: userDefinedContext } = useUserDefinedContext();
+    const { onConfirm } = react.useMemo(() => handlers, [handlers]);
+    const handleConfirm = hook.useHandle(onConfirm);
+    const { TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, } = useConfigurationContext();
+    return (jsxRuntime.jsxs(react.Fragment, { children: [title &&
+                (filter.isString(title) ? (jsxRuntime.jsx(TitleComponent, { context: userDefinedContext, children: title })) : (title)), subtitle &&
+                (filter.isString(subtitle) ? (jsxRuntime.jsx(SubtitleComponent, { context: userDefinedContext, children: subtitle })) : (subtitle)), content &&
+                (filter.isString(content) ? (jsxRuntime.jsx(ContentComponent, { context: userDefinedContext, children: content })) : (render.renderComponent(content, {
+                    onConfirm: handleConfirm,
+                }))), footer !== false &&
+                (typeof footer === 'function' ? (footer({
+                    onConfirm: handleConfirm,
+                    context: userDefinedContext,
+                })) : (jsxRuntime.jsx(FooterComponent, { onConfirm: handleConfirm, confirmLabel: footer?.confirm, hideConfirm: footer?.hideConfirm, context: userDefinedContext })))] }));
+});
+
+const ConfirmInner = react.memo(({ modal, handlers }) => {
+    const { title, subtitle, content, footer } = react.useMemo(() => modal, [modal]);
+    const { context: userDefinedContext } = useUserDefinedContext();
+    const { onConfirm, onClose } = react.useMemo(() => handlers, [handlers]);
+    const handleConfirm = hook.useHandle(onConfirm);
+    const handleClose = hook.useHandle(onClose);
+    const { TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, } = useConfigurationContext();
+    return (jsxRuntime.jsxs(react.Fragment, { children: [title &&
+                (filter.isString(title) ? (jsxRuntime.jsx(TitleComponent, { context: userDefinedContext, children: title })) : (title)), subtitle &&
+                (filter.isString(subtitle) ? (jsxRuntime.jsx(SubtitleComponent, { context: userDefinedContext, children: subtitle })) : (subtitle)), content &&
+                (filter.isString(content) ? (jsxRuntime.jsx(ContentComponent, { context: userDefinedContext, children: content })) : (render.renderComponent(content, {
+                    onConfirm: handleConfirm,
+                    onCancel: handleClose,
+                    context: userDefinedContext,
+                }))), footer !== false &&
+                (typeof footer === 'function' ? (footer({
+                    onConfirm: handleConfirm,
+                    onCancel: handleClose,
+                    context: userDefinedContext,
+                })) : (jsxRuntime.jsx(FooterComponent, { onConfirm: handleConfirm, onCancel: handleClose, confirmLabel: footer?.confirm, cancelLabel: footer?.cancel, hideConfirm: footer?.hideConfirm, hideCancel: footer?.hideCancel, context: userDefinedContext })))] }));
+});
+
+const PromptInner = react.memo(({ modal, handlers }) => {
+    const { Input, defaultValue, disabled: checkDisabled, title, subtitle, content, footer, } = react.useMemo(() => ({
+        ...modal,
+        Input: react.memo(hoc.withErrorBoundary(modal.Input)),
+    }), [modal]);
+    const { context: userDefinedContext } = useUserDefinedContext();
+    const [value, setValue] = react.useState(defaultValue);
+    const { onChange, onClose, onConfirm } = react.useMemo(() => handlers, [handlers]);
+    const handleClose = hook.useHandle(onClose);
+    const handleChange = hook.useHandle((inputValue) => {
+        const input = filter.isFunction(inputValue) ? inputValue(value) : inputValue;
+        setValue(input);
+        onChange(input);
+    });
+    const handleConfirm = react.useCallback(() => {
+        requestAnimationFrame(onConfirm);
+    }, [onConfirm]);
+    const disabled = react.useMemo(() => (value ? !!checkDisabled?.(value) : false), [checkDisabled, value]);
+    const { TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, } = useConfigurationContext();
+    return (jsxRuntime.jsxs(react.Fragment, { children: [title &&
+                (filter.isString(title) ? (jsxRuntime.jsx(TitleComponent, { context: userDefinedContext, children: title })) : (title)), subtitle &&
+                (filter.isString(subtitle) ? (jsxRuntime.jsx(SubtitleComponent, { context: userDefinedContext, children: subtitle })) : (subtitle)), content &&
+                (filter.isString(content) ? (jsxRuntime.jsx(ContentComponent, { context: userDefinedContext, children: content })) : (render.renderComponent(content, {
+                    onConfirm: handleConfirm,
+                    onCancel: handleClose,
+                    context: userDefinedContext,
+                }))), Input && (jsxRuntime.jsx(Input, { defaultValue: defaultValue, value: value, onChange: handleChange, onConfirm: handleConfirm, onCancel: handleClose, context: userDefinedContext })), footer !== false &&
+                (typeof footer === 'function' ? (footer({
+                    value,
+                    disabled,
+                    onChange: handleChange,
+                    onConfirm: handleConfirm,
+                    onCancel: handleClose,
+                    context: userDefinedContext,
+                })) : (jsxRuntime.jsx(FooterComponent, { disabled: disabled, onConfirm: handleConfirm, onCancel: handleClose, confirmLabel: footer?.confirm, cancelLabel: footer?.cancel, hideConfirm: footer?.hideConfirm, hideCancel: footer?.hideCancel, context: userDefinedContext })))] }));
+});
+
+const ForegroundFrame = ({ modalId, onChangeOrder, }) => {
+    const { ForegroundComponent } = useConfigurationContext();
+    const { context: userDefinedContext } = useUserDefinedContext();
+    const { modal, onChange, onConfirm, onClose, onDestroy } = useModal(modalId);
+    const Foreground = react.useMemo(() => modal?.ForegroundComponent || ForegroundComponent, [ForegroundComponent, modal]);
+    if (!modal)
+        return null;
+    return (jsxRuntime.jsx("div", { className: css.cx(foreground, {
+            [visible]: modal.manualDestroy ? modal.alive : modal.visible,
+            [active]: modal.visible,
+        }), children: jsxRuntime.jsxs(Foreground, { id: modal.id, type: modal.type, alive: modal.alive, visible: modal.visible, initiator: modal.initiator, manualDestroy: modal.manualDestroy, closeOnBackdropClick: modal.closeOnBackdropClick, background: modal.background, onChange: onChange, onConfirm: onConfirm, onClose: onClose, onDestroy: onDestroy, onChangeOrder: onChangeOrder, context: userDefinedContext, children: [modal.type === 'alert' && (jsxRuntime.jsx(AlertInner, { modal: modal, handlers: { onConfirm } })), modal.type === 'confirm' && (jsxRuntime.jsx(ConfirmInner, { modal: modal, handlers: { onConfirm, onClose } })), modal.type === 'prompt' && (jsxRuntime.jsx(PromptInner, { modal: modal, handlers: { onChange, onConfirm, onClose } }))] }) }));
+};
+
+const useSubscribeModal = (modal) => {
+    const [version, update] = hook.useVersion();
+    react.useEffect(() => {
+        if (!modal)
+            return;
+        const unsubscribe = modal.subscribe(update);
+        return unsubscribe;
+    }, [modal, update]);
+    return version;
+};
+
+const presenter = css.css `
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+`;
+
+const { increment } = lib.counterFactory(1);
+const Presenter = react.memo(({ modalId }) => {
+    const ref = react.useRef(null);
+    const { modal } = useModal(modalId);
+    useSubscribeModal(modal);
+    const handleChangeOrder = hook.useHandle(() => {
+        if (ref.current) {
+            ref.current.style.zIndex = `${increment()}`;
+        }
+    });
+    return (jsxRuntime.jsxs("div", { ref: ref, className: presenter, children: [jsxRuntime.jsx(BackgroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder }), jsxRuntime.jsx(ForegroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder })] }));
+});
+
+const anchor = css.css `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1000;
+  transition: background-color ease-in-out;
+`;
+
+const AnchorInner = () => {
+    const [version, update] = hook.useVersion();
+    const { modalIds, setUpdater } = useModalManagerContext();
+    react.useEffect(() => {
+        setUpdater(update);
+    }, [setUpdater, update]);
+    const options = useConfigurationOptions();
+    const dimmed = useActiveModalCount(validateDimmable, version);
+    return (jsxRuntime.jsx("div", { className: anchor, style: {
+            transitionDuration: options.duration,
+            backgroundColor: dimmed ? options.backdrop : 'transparent',
+        }, children: array.map(modalIds, (id) => (jsxRuntime.jsx(Presenter, { modalId: id }, id))) }));
+};
+const validateDimmable = (modal) => modal?.visible && modal.dimmed;
+const Anchor = react.memo(hoc.withErrorBoundary(AnchorInner));
+
+const bootstrap = ({ ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, usePathname, options, context, anchor, }) => reactDom.createPortal(jsxRuntime.jsx(UserDefinedContextProvider, { context: context, children: jsxRuntime.jsx(ConfigurationContextProvider, { ForegroundComponent: ForegroundComponent, BackgroundComponent: BackgroundComponent, TitleComponent: TitleComponent, SubtitleComponent: SubtitleComponent, ContentComponent: ContentComponent, FooterComponent: FooterComponent, options: options, children: jsxRuntime.jsx(ModalManagerContextProvider, { usePathname: usePathname, children: jsxRuntime.jsx(Anchor, {}) }) }) }), anchor);
+
+const useInitialize = () => {
+    const permitted = react.useRef(ModalManager.activate());
+    const anchorRef = react.useRef(null);
+    const [, update] = hook.useVersion();
+    const handleInitialize = react.useCallback((root) => {
+        if (permitted.current) {
+            anchorRef.current = ModalManager.anchor({ root });
+            update();
+        }
+        else
+            console.printError('ModalProvider is already initialized', [
+                'ModalProvider can only be initialized once.',
+                'Nesting ModalProvider will be ignored...',
+            ], {
+                info: 'Something is wrong with the ModalProvider initialization...',
+            });
+    }, [update]);
+    return {
+        anchorRef,
+        handleInitialize,
+    };
+};
+
+const BootstrapProvider = react.forwardRef(({ usePathname: useExternalPathname, ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, context, children, }, handleRef) => {
+    const usePathname$1 = react.useMemo(() => useExternalPathname || usePathname, [useExternalPathname]);
+    const { anchorRef, handleInitialize } = useInitialize();
+    react.useImperativeHandle(handleRef, () => ({
+        initialize: handleInitialize,
+    }), [handleInitialize]);
+    hook.useOnMount(() => {
+        if (handleRef === null)
+            handleInitialize();
+        return () => {
+            if (anchorRef.current)
+                anchorRef.current.remove();
+        };
+    });
+    return (jsxRuntime.jsxs(react.Fragment, { children: [children, anchorRef.current &&
+                bootstrap({
+                    ForegroundComponent,
+                    BackgroundComponent,
+                    TitleComponent,
+                    SubtitleComponent,
+                    ContentComponent,
+                    FooterComponent,
+                    usePathname: usePathname$1,
+                    options,
+                    context,
+                    anchor: anchorRef.current,
+                })] }));
+});
+
+const useBootstrap = ({ usePathname: useExternalPathname, ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, context, mode = 'auto', } = {}) => {
+    const usePathname$1 = react.useMemo(() => useExternalPathname || usePathname, [useExternalPathname]);
+    const { anchorRef, handleInitialize } = useInitialize();
+    hook.useOnMount(() => {
+        if (mode === 'auto')
+            handleInitialize();
+        return () => {
+            if (anchorRef.current)
+                anchorRef.current.remove();
+        };
+    });
+    const initialize = react.useCallback((element) => {
+        if (mode === 'manual')
+            handleInitialize(element);
+    }, [mode, handleInitialize]);
+    const portal = anchorRef.current &&
+        bootstrap({
+            usePathname: usePathname$1,
+            ForegroundComponent,
+            BackgroundComponent,
+            TitleComponent,
+            SubtitleComponent,
+            ContentComponent,
+            FooterComponent,
+            options,
+            context,
+            anchor: anchorRef.current,
+        });
+    return { portal, initialize };
+};
+
+const useDestroyAfter = (modalId, duration) => {
+    const { modal, onDestroy } = useModal(modalId);
+    const tick = useSubscribeModal(modal);
+    const reference = react.useRef({
+        modal,
+        onDestroy,
+        milliseconds: filter.isString(duration)
+            ? convert.convertMsFromDuration(duration)
+            : duration,
+    });
+    react.useEffect(() => {
+        const { modal, onDestroy, milliseconds } = reference.current;
+        if (!modal || modal.visible || !modal.alive)
+            return;
+        const timer = setTimeout(() => {
+            onDestroy();
+        }, milliseconds);
+        return () => {
+            if (timer)
+                clearTimeout(timer);
+        };
+    }, [tick]);
+};
+
+const useModalAnimation = (visible, handler) => {
+    const handlerRef = react.useRef(handler);
+    handlerRef.current = handler;
+    react.useLayoutEffect(() => {
+        if (!handlerRef.current)
+            return;
+        let frame;
+        if (visible)
+            frame = requestAnimationFrame(() => handlerRef.current.onVisible?.());
+        else
+            frame = requestAnimationFrame(() => handlerRef.current.onHidden?.());
+        return () => {
+            if (frame)
+                cancelAnimationFrame(frame);
+        };
+    }, [visible]);
+};
+
+exports.ModalProvider = BootstrapProvider;
+exports.alert = alert;
+exports.confirm = confirm;
+exports.prompt = prompt;
+exports.useActiveModalCount = useActiveModalCount;
+exports.useDestroyAfter = useDestroyAfter;
+exports.useInitializeModal = useBootstrap;
+exports.useModalAnimation = useModalAnimation;
+exports.useModalBackdrop = useConfigurationBackdrop;
+exports.useModalDuration = useConfigurationDuration;
+exports.useModalOptions = useConfigurationOptions;
+exports.useSubscribeModal = useSubscribeModal;