[{"data":1,"prerenderedAt":1682},["ShallowReactive",2],{"navigation_docs":3,"-guide-usemodal-composable":188,"-guide-usemodal-composable-surround":1677},[4,9,27,52,101,130,163],{"title":5,"path":6,"stem":7,"icon":8},"Playground","\u002Fplayground","1.playground","i-lucide-flask-conical",{"title":10,"path":11,"stem":12,"children":13,"page":26},"Getting Started","\u002Fgetting-started","2.getting-started",[14,18,22],{"title":15,"path":16,"stem":17},"Introduction","\u002Fgetting-started\u002Fintroduction","2.getting-started\u002F1.introduction",{"title":19,"path":20,"stem":21},"Installation","\u002Fgetting-started\u002Finstallation","2.getting-started\u002F2.installation",{"title":23,"path":24,"stem":25},"First modal","\u002Fgetting-started\u002Ffirst-modal","2.getting-started\u002F3.first-modal",false,{"title":28,"path":29,"stem":30,"children":31,"page":26},"Concepts","\u002Fconcepts","3.concepts",[32,36,40,44,48],{"title":33,"path":34,"stem":35},"Architecture","\u002Fconcepts\u002Farchitecture","3.concepts\u002F1.architecture",{"title":37,"path":38,"stem":39},"Imperative flow","\u002Fconcepts\u002Fimperative-flow","3.concepts\u002F2.imperative-flow",{"title":41,"path":42,"stem":43},"Stacking","\u002Fconcepts\u002Fstacking","3.concepts\u002F3.stacking",{"title":45,"path":46,"stem":47},"Groups","\u002Fconcepts\u002Fgroups","3.concepts\u002F4.groups",{"title":49,"path":50,"stem":51},"Headless primitives","\u002Fconcepts\u002Fheadless-primitives","3.concepts\u002F5.headless-primitives",{"title":53,"path":54,"stem":55,"children":56,"page":26},"Guide","\u002Fguide","4.guide",[57,61,65,69,73,77,81,85,89,93,97],{"title":58,"path":59,"stem":60},"Writing a modal","\u002Fguide\u002Fwriting-a-modal","4.guide\u002F01.writing-a-modal",{"title":62,"path":63,"stem":64},"Opening & closing","\u002Fguide\u002Fopening-and-closing","4.guide\u002F02.opening-and-closing",{"title":66,"path":67,"stem":68},"Props & results","\u002Fguide\u002Fpassing-props-and-results","4.guide\u002F03.passing-props-and-results",{"title":70,"path":71,"stem":72},"Behavior options","\u002Fguide\u002Fbehavior-options","4.guide\u002F04.behavior-options",{"title":74,"path":75,"stem":76},"Animations & styling","\u002Fguide\u002Fstyling-and-animations","4.guide\u002F05.styling-and-animations",{"title":78,"path":79,"stem":80},"useModal composable","\u002Fguide\u002Fusemodal-composable","4.guide\u002F06.usemodal-composable",{"title":82,"path":83,"stem":84},"Modal context","\u002Fguide\u002Fmodal-context","4.guide\u002F07.modal-context",{"title":86,"path":87,"stem":88},"Multiple targets","\u002Fguide\u002Fmultiple-targets","4.guide\u002F08.multiple-targets",{"title":90,"path":91,"stem":92},"Overlay","\u002Fguide\u002Foverlay","4.guide\u002F09.overlay",{"title":94,"path":95,"stem":96},"Async components","\u002Fguide\u002Fasync-components","4.guide\u002F10.async-components",{"title":98,"path":99,"stem":100},"TypeScript","\u002Fguide\u002Ftypescript","4.guide\u002F11.typescript",{"title":102,"path":103,"stem":104,"children":105,"page":26},"Recipes","\u002Frecipes","5.recipes",[106,110,114,118,122,126],{"title":107,"path":108,"stem":109},"Confirm dialog","\u002Frecipes\u002Fconfirm-dialog","5.recipes\u002F1.confirm-dialog",{"title":111,"path":112,"stem":113},"Form modal with validation","\u002Frecipes\u002Fform-modal-with-validation","5.recipes\u002F2.form-modal-with-validation",{"title":115,"path":116,"stem":117},"Image lightbox","\u002Frecipes\u002Fimage-lightbox","5.recipes\u002F3.image-lightbox",{"title":119,"path":120,"stem":121},"Command palette","\u002Frecipes\u002Fcommand-palette","5.recipes\u002F4.command-palette",{"title":123,"path":124,"stem":125},"Nested flows \u002F wizards","\u002Frecipes\u002Fnested-flows","5.recipes\u002F5.nested-flows",{"title":127,"path":128,"stem":129},"Global error modal","\u002Frecipes\u002Fglobal-error-modal","5.recipes\u002F6.global-error-modal",{"title":131,"path":132,"stem":133,"children":134,"page":26},"Api","\u002Fapi","6.api",[135,139,143,147,151,155,159],{"title":136,"path":137,"stem":138},"Functions","\u002Fapi\u002Ffunctions","6.api\u002F1.functions",{"title":140,"path":141,"stem":142},"Components","\u002Fapi\u002Fcomponents","6.api\u002F2.components",{"title":144,"path":145,"stem":146},"Composables","\u002Fapi\u002Fcomposables","6.api\u002F3.composables",{"title":148,"path":149,"stem":150},"Plugin","\u002Fapi\u002Fplugin","6.api\u002F4.plugin",{"title":152,"path":153,"stem":154},"State helpers","\u002Fapi\u002Fstate","6.api\u002F5.state",{"title":156,"path":157,"stem":158},"Global events","\u002Fapi\u002Fevents","6.api\u002F6.events",{"title":160,"path":161,"stem":162},"Types","\u002Fapi\u002Ftypes","6.api\u002F7.types",{"title":164,"path":165,"stem":166,"children":167,"page":26},"Resources","\u002Fresources","7.resources",[168,172,176,180,184],{"title":169,"path":170,"stem":171},"Migration from v1","\u002Fresources\u002Fmigration-from-v1","7.resources\u002F1.migration-from-v1",{"title":173,"path":174,"stem":175},"FAQ","\u002Fresources\u002Ffaq","7.resources\u002F2.faq",{"title":177,"path":178,"stem":179},"Troubleshooting","\u002Fresources\u002Ftroubleshooting","7.resources\u002F3.troubleshooting",{"title":181,"path":182,"stem":183},"Comparison","\u002Fresources\u002Fcomparison","7.resources\u002F4.comparison",{"title":185,"path":186,"stem":187},"Changelog","\u002Fresources\u002Fchangelog","7.resources\u002F5.changelog",{"id":189,"title":78,"body":190,"description":1671,"extension":1672,"links":1673,"meta":1674,"navigation":722,"path":79,"seo":1675,"stem":80,"__hash__":1676},"docs\u002F4.guide\u002F06.usemodal-composable.md",{"type":191,"value":192,"toc":1661},"minimark",[193,197,213,218,546,556,601,619,623,642,1054,1066,1070,1082,1237,1241,1246,1290,1296,1360,1370,1437,1441,1447,1480,1484,1489,1587,1595,1657],[194,195,78],"h1",{"id":196},"usemodal-composable",[198,199,200,204,205,208,209,212],"p",{},[201,202,203],"code",{},"useModal"," wraps ",[201,206,207],{},"openModal"," with a persistent controller. Use it when you open the same component multiple times from one place, want a reactive ",[201,210,211],{},"isOpen",", or need event listeners that survive across re-opens.",[214,215,217],"h2",{"id":216},"signature","Signature",[219,220,225],"pre",{"className":221,"code":222,"language":223,"meta":224,"style":224},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function useModal\u003CT = unknown, C extends Component = Component>(\n  component: C,\n  defaults?: UseModalDefaults\u003CC>\n): {\n  open(options?: OpenModalOptions\u003CC>): Promise\u003CT>\n  close(opts?: { ignoreGuard?: boolean; instantExit?: boolean }): void\n  on(event: string, handler: (...args: any[]) => void): void\n  off(event: string, handler: (...args: any[]) => void): void\n  isOpen: ComputedRef\u003Cboolean>\n  isTop: ComputedRef\u003Cboolean>\n  instanceId: Ref\u003Cnumber | null>\n}\n","ts","",[201,226,227,273,288,308,317,351,391,442,482,500,516,540],{"__ignoreMap":224},[228,229,232,236,240,244,248,251,254,257,260,263,266,268,270],"span",{"class":230,"line":231},"line",1,[228,233,235],{"class":234},"spNyl","function",[228,237,239],{"class":238},"s2Zo4"," useModal",[228,241,243],{"class":242},"sMK4o","\u003C",[228,245,247],{"class":246},"sBMFI","T",[228,249,250],{"class":242}," =",[228,252,253],{"class":246}," unknown",[228,255,256],{"class":242},",",[228,258,259],{"class":246}," C",[228,261,262],{"class":234}," extends",[228,264,265],{"class":246}," Component",[228,267,250],{"class":242},[228,269,265],{"class":246},[228,271,272],{"class":242},">(\n",[228,274,276,280,283,285],{"class":230,"line":275},2,[228,277,279],{"class":278},"sHdIc","  component",[228,281,282],{"class":242},":",[228,284,259],{"class":246},[228,286,287],{"class":242},",\n",[228,289,291,294,297,300,302,305],{"class":230,"line":290},3,[228,292,293],{"class":278},"  defaults",[228,295,296],{"class":242},"?:",[228,298,299],{"class":246}," UseModalDefaults",[228,301,243],{"class":242},[228,303,304],{"class":246},"C",[228,306,307],{"class":242},">\n",[228,309,311,314],{"class":230,"line":310},4,[228,312,313],{"class":242},"):",[228,315,316],{"class":242}," {\n",[228,318,320,324,327,330,332,335,337,339,342,345,347,349],{"class":230,"line":319},5,[228,321,323],{"class":322},"swJcz","  open",[228,325,326],{"class":242},"(",[228,328,329],{"class":278},"options",[228,331,296],{"class":242},[228,333,334],{"class":246}," OpenModalOptions",[228,336,243],{"class":242},[228,338,304],{"class":246},[228,340,341],{"class":242},">):",[228,343,344],{"class":246}," Promise",[228,346,243],{"class":242},[228,348,247],{"class":246},[228,350,307],{"class":242},[228,352,354,357,359,362,364,367,370,372,375,378,381,383,385,388],{"class":230,"line":353},6,[228,355,356],{"class":322},"  close",[228,358,326],{"class":242},[228,360,361],{"class":278},"opts",[228,363,296],{"class":242},[228,365,366],{"class":242}," {",[228,368,369],{"class":322}," ignoreGuard",[228,371,296],{"class":242},[228,373,374],{"class":246}," boolean",[228,376,377],{"class":242},";",[228,379,380],{"class":322}," instantExit",[228,382,296],{"class":242},[228,384,374],{"class":246},[228,386,387],{"class":242}," }):",[228,389,390],{"class":246}," void\n",[228,392,394,397,399,402,404,407,409,412,414,417,420,422,425,429,432,435,438,440],{"class":230,"line":393},7,[228,395,396],{"class":322},"  on",[228,398,326],{"class":242},[228,400,401],{"class":278},"event",[228,403,282],{"class":242},[228,405,406],{"class":246}," string",[228,408,256],{"class":242},[228,410,411],{"class":238}," handler",[228,413,282],{"class":242},[228,415,416],{"class":242}," (...",[228,418,419],{"class":278},"args",[228,421,282],{"class":242},[228,423,424],{"class":246}," any",[228,426,428],{"class":427},"sTEyZ","[]",[228,430,431],{"class":242},")",[228,433,434],{"class":234}," =>",[228,436,437],{"class":246}," void",[228,439,313],{"class":242},[228,441,390],{"class":246},[228,443,445,448,450,452,454,456,458,460,462,464,466,468,470,472,474,476,478,480],{"class":230,"line":444},8,[228,446,447],{"class":322},"  off",[228,449,326],{"class":242},[228,451,401],{"class":278},[228,453,282],{"class":242},[228,455,406],{"class":246},[228,457,256],{"class":242},[228,459,411],{"class":238},[228,461,282],{"class":242},[228,463,416],{"class":242},[228,465,419],{"class":278},[228,467,282],{"class":242},[228,469,424],{"class":246},[228,471,428],{"class":427},[228,473,431],{"class":242},[228,475,434],{"class":234},[228,477,437],{"class":246},[228,479,313],{"class":242},[228,481,390],{"class":246},[228,483,485,488,490,493,495,498],{"class":230,"line":484},9,[228,486,487],{"class":322},"  isOpen",[228,489,282],{"class":242},[228,491,492],{"class":246}," ComputedRef",[228,494,243],{"class":242},[228,496,497],{"class":246},"boolean",[228,499,307],{"class":242},[228,501,503,506,508,510,512,514],{"class":230,"line":502},10,[228,504,505],{"class":322},"  isTop",[228,507,282],{"class":242},[228,509,492],{"class":246},[228,511,243],{"class":242},[228,513,497],{"class":246},[228,515,307],{"class":242},[228,517,519,522,524,527,529,532,535,538],{"class":230,"line":518},11,[228,520,521],{"class":322},"  instanceId",[228,523,282],{"class":242},[228,525,526],{"class":246}," Ref",[228,528,243],{"class":242},[228,530,531],{"class":246},"number",[228,533,534],{"class":242}," |",[228,536,537],{"class":246}," null",[228,539,307],{"class":242},[228,541,543],{"class":230,"line":542},12,[228,544,545],{"class":242},"}\n",[198,547,548,551,552,555],{},[201,549,550],{},"UseModalDefaults\u003CC>"," extends ",[201,553,554],{},"OpenModalOptions\u003CC>"," with one extra flag:",[557,558,559,578],"table",{},[560,561,562],"thead",{},[563,564,565,569,572,575],"tr",{},[566,567,568],"th",{},"Property",[566,570,571],{},"Type",[566,573,574],{},"Default",[566,576,577],{},"Description",[579,580,581],"tbody",{},[563,582,583,589,593,598],{},[584,585,586],"td",{},[201,587,588],{},"closeOnUnmount",[584,590,591],{},[201,592,497],{},[584,594,595],{},[201,596,597],{},"true",[584,599,600],{},"Force-close the modal when the owning scope unmounts.",[198,602,603,606,607,610,611,614,615,618],{},[201,604,605],{},"props"," and ",[201,608,609],{},"on"," from ",[201,612,613],{},"defaults"," merge into every ",[201,616,617],{},".open()"," call.",[214,620,622],{"id":621},"persistent-listeners","Persistent listeners",[198,624,625,626,628,629,632,633,636,637,641],{},"The main reason to reach for ",[201,627,203],{},". Listeners registered via ",[201,630,631],{},"defaults.on"," or ",[201,634,635],{},"controller.on()"," fire on ",[638,639,640],"strong",{},"every"," open — register once, react every time:",[219,643,648],{"className":644,"code":645,"filename":646,"language":647,"meta":224,"style":224},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { useModal } from '@kolirt\u002Fvue-modal'\nimport EditDialog from '.\u002FEditDialog.vue'\n\nconst editor = useModal\u003C{ name: string }>(EditDialog, {\n  on: {\n    progress: (pct: number) => updateProgressBar(pct)\n  }\n})\n\neditor.on('save', (data) => store.update(data))\n\nasync function edit(id: number) {\n  await editor.open({ props: { id } }).catch(() => null)\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton :disabled=\"editor.isOpen.value\" @click=\"edit(42)\">Edit\u003C\u002Fbutton>\n  \u003Cbutton :disabled=\"editor.isOpen.value\" @click=\"edit(99)\">Edit other\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n","Dashboard.vue","vue",[201,649,650,676,701,718,724,756,764,792,797,805,809,851,855,880,931,936,946,951,961,1006,1045],{"__ignoreMap":224},[228,651,652,654,657,660,663,666,669,672,674],{"class":230,"line":231},[228,653,243],{"class":242},[228,655,656],{"class":322},"script",[228,658,659],{"class":234}," setup",[228,661,662],{"class":234}," lang",[228,664,665],{"class":242},"=",[228,667,668],{"class":242},"\"",[228,670,223],{"class":671},"sfazB",[228,673,668],{"class":242},[228,675,307],{"class":242},[228,677,678,682,684,686,689,692,695,698],{"class":230,"line":275},[228,679,681],{"class":680},"s7zQu","import",[228,683,366],{"class":242},[228,685,239],{"class":427},[228,687,688],{"class":242}," }",[228,690,691],{"class":680}," from",[228,693,694],{"class":242}," '",[228,696,697],{"class":671},"@kolirt\u002Fvue-modal",[228,699,700],{"class":242},"'\n",[228,702,703,705,708,711,713,716],{"class":230,"line":290},[228,704,681],{"class":680},[228,706,707],{"class":427}," EditDialog ",[228,709,710],{"class":680},"from",[228,712,694],{"class":242},[228,714,715],{"class":671},".\u002FEditDialog.vue",[228,717,700],{"class":242},[228,719,720],{"class":230,"line":310},[228,721,723],{"emptyLinePlaceholder":722},true,"\n",[228,725,726,729,732,734,736,739,742,744,746,749,752,754],{"class":230,"line":319},[228,727,728],{"class":234},"const",[228,730,731],{"class":427}," editor ",[228,733,665],{"class":242},[228,735,239],{"class":238},[228,737,738],{"class":242},"\u003C{",[228,740,741],{"class":322}," name",[228,743,282],{"class":242},[228,745,406],{"class":246},[228,747,748],{"class":242}," }>",[228,750,751],{"class":427},"(EditDialog",[228,753,256],{"class":242},[228,755,316],{"class":242},[228,757,758,760,762],{"class":230,"line":353},[228,759,396],{"class":322},[228,761,282],{"class":242},[228,763,316],{"class":242},[228,765,766,769,771,774,777,779,782,784,786,789],{"class":230,"line":393},[228,767,768],{"class":238},"    progress",[228,770,282],{"class":242},[228,772,773],{"class":242}," (",[228,775,776],{"class":278},"pct",[228,778,282],{"class":242},[228,780,781],{"class":246}," number",[228,783,431],{"class":242},[228,785,434],{"class":234},[228,787,788],{"class":238}," updateProgressBar",[228,790,791],{"class":427},"(pct)\n",[228,793,794],{"class":230,"line":444},[228,795,796],{"class":242},"  }\n",[228,798,799,802],{"class":230,"line":484},[228,800,801],{"class":242},"}",[228,803,804],{"class":427},")\n",[228,806,807],{"class":230,"line":502},[228,808,723],{"emptyLinePlaceholder":722},[228,810,811,814,817,819,821,824,827,829,831,833,836,838,840,843,845,848],{"class":230,"line":518},[228,812,813],{"class":427},"editor",[228,815,816],{"class":242},".",[228,818,609],{"class":238},[228,820,326],{"class":427},[228,822,823],{"class":242},"'",[228,825,826],{"class":671},"save",[228,828,823],{"class":242},[228,830,256],{"class":242},[228,832,773],{"class":242},[228,834,835],{"class":278},"data",[228,837,431],{"class":242},[228,839,434],{"class":234},[228,841,842],{"class":427}," store",[228,844,816],{"class":242},[228,846,847],{"class":238},"update",[228,849,850],{"class":427},"(data))\n",[228,852,853],{"class":230,"line":542},[228,854,723],{"emptyLinePlaceholder":722},[228,856,858,861,864,867,869,872,874,876,878],{"class":230,"line":857},13,[228,859,860],{"class":234},"async",[228,862,863],{"class":234}," function",[228,865,866],{"class":238}," edit",[228,868,326],{"class":242},[228,870,871],{"class":278},"id",[228,873,282],{"class":242},[228,875,781],{"class":246},[228,877,431],{"class":242},[228,879,316],{"class":242},[228,881,883,886,889,891,894,896,899,902,904,906,909,911,913,915,917,920,922,925,927,929],{"class":230,"line":882},14,[228,884,885],{"class":680},"  await",[228,887,888],{"class":427}," editor",[228,890,816],{"class":242},[228,892,893],{"class":238},"open",[228,895,326],{"class":322},[228,897,898],{"class":242},"{",[228,900,901],{"class":322}," props",[228,903,282],{"class":242},[228,905,366],{"class":242},[228,907,908],{"class":427}," id",[228,910,688],{"class":242},[228,912,688],{"class":242},[228,914,431],{"class":322},[228,916,816],{"class":242},[228,918,919],{"class":238},"catch",[228,921,326],{"class":322},[228,923,924],{"class":242},"()",[228,926,434],{"class":234},[228,928,537],{"class":242},[228,930,804],{"class":322},[228,932,934],{"class":230,"line":933},15,[228,935,545],{"class":242},[228,937,939,942,944],{"class":230,"line":938},16,[228,940,941],{"class":242},"\u003C\u002F",[228,943,656],{"class":322},[228,945,307],{"class":242},[228,947,949],{"class":230,"line":948},17,[228,950,723],{"emptyLinePlaceholder":722},[228,952,954,956,959],{"class":230,"line":953},18,[228,955,243],{"class":242},[228,957,958],{"class":322},"template",[228,960,307],{"class":242},[228,962,964,967,970,973,975,977,980,982,985,987,989,992,994,997,1000,1002,1004],{"class":230,"line":963},19,[228,965,966],{"class":242},"  \u003C",[228,968,969],{"class":322},"button",[228,971,972],{"class":234}," :disabled",[228,974,665],{"class":242},[228,976,668],{"class":242},[228,978,979],{"class":671},"editor.isOpen.value",[228,981,668],{"class":242},[228,983,984],{"class":234}," @click",[228,986,665],{"class":242},[228,988,668],{"class":242},[228,990,991],{"class":671},"edit(42)",[228,993,668],{"class":242},[228,995,996],{"class":242},">",[228,998,999],{"class":427},"Edit",[228,1001,941],{"class":242},[228,1003,969],{"class":322},[228,1005,307],{"class":242},[228,1007,1009,1011,1013,1015,1017,1019,1021,1023,1025,1027,1029,1032,1034,1036,1039,1041,1043],{"class":230,"line":1008},20,[228,1010,966],{"class":242},[228,1012,969],{"class":322},[228,1014,972],{"class":234},[228,1016,665],{"class":242},[228,1018,668],{"class":242},[228,1020,979],{"class":671},[228,1022,668],{"class":242},[228,1024,984],{"class":234},[228,1026,665],{"class":242},[228,1028,668],{"class":242},[228,1030,1031],{"class":671},"edit(99)",[228,1033,668],{"class":242},[228,1035,996],{"class":242},[228,1037,1038],{"class":427},"Edit other",[228,1040,941],{"class":242},[228,1042,969],{"class":322},[228,1044,307],{"class":242},[228,1046,1048,1050,1052],{"class":230,"line":1047},21,[228,1049,941],{"class":242},[228,1051,958],{"class":322},[228,1053,307],{"class":242},[198,1055,1056,1057,606,1060,1062,1063,816],{},"Both ",[201,1058,1059],{},"progress",[201,1061,826],{}," fire for every open, no re-registration. Remove with ",[201,1064,1065],{},"editor.off(event, handler)",[214,1067,1069],{"id":1068},"default-props-merging","Default props merging",[198,1071,1072,610,1074,606,1076,1078,1079,1081],{},[201,1073,605],{},[201,1075,613],{},[201,1077,605],{}," from each ",[201,1080,617],{}," call merge shallowly:",[219,1083,1085],{"className":221,"code":1084,"language":223,"meta":224,"style":224},"const modal = useModal(EditDialog, {\n  props: { mode: 'edit', readOnly: false }\n})\n\nmodal.open({ props: { id: 42 } })\n\u002F\u002F effective props: { mode: 'edit', readOnly: false, id: 42 }\n\nmodal.open({ props: { id: 99, readOnly: true } })\n\u002F\u002F effective props: { mode: 'edit', readOnly: true, id: 99 }\n",[201,1086,1087,1104,1139,1145,1149,1182,1188,1192,1232],{"__ignoreMap":224},[228,1088,1089,1091,1094,1096,1098,1100,1102],{"class":230,"line":231},[228,1090,728],{"class":234},[228,1092,1093],{"class":427}," modal ",[228,1095,665],{"class":242},[228,1097,239],{"class":238},[228,1099,751],{"class":427},[228,1101,256],{"class":242},[228,1103,316],{"class":242},[228,1105,1106,1109,1111,1113,1116,1118,1120,1123,1125,1127,1130,1132,1136],{"class":230,"line":275},[228,1107,1108],{"class":322},"  props",[228,1110,282],{"class":242},[228,1112,366],{"class":242},[228,1114,1115],{"class":322}," mode",[228,1117,282],{"class":242},[228,1119,694],{"class":242},[228,1121,1122],{"class":671},"edit",[228,1124,823],{"class":242},[228,1126,256],{"class":242},[228,1128,1129],{"class":322}," readOnly",[228,1131,282],{"class":242},[228,1133,1135],{"class":1134},"sfNiH"," false",[228,1137,1138],{"class":242}," }\n",[228,1140,1141,1143],{"class":230,"line":290},[228,1142,801],{"class":242},[228,1144,804],{"class":427},[228,1146,1147],{"class":230,"line":310},[228,1148,723],{"emptyLinePlaceholder":722},[228,1150,1151,1154,1156,1158,1160,1162,1164,1166,1168,1170,1172,1176,1178,1180],{"class":230,"line":319},[228,1152,1153],{"class":427},"modal",[228,1155,816],{"class":242},[228,1157,893],{"class":238},[228,1159,326],{"class":427},[228,1161,898],{"class":242},[228,1163,901],{"class":322},[228,1165,282],{"class":242},[228,1167,366],{"class":242},[228,1169,908],{"class":322},[228,1171,282],{"class":242},[228,1173,1175],{"class":1174},"sbssI"," 42",[228,1177,688],{"class":242},[228,1179,688],{"class":242},[228,1181,804],{"class":427},[228,1183,1184],{"class":230,"line":353},[228,1185,1187],{"class":1186},"sHwdD","\u002F\u002F effective props: { mode: 'edit', readOnly: false, id: 42 }\n",[228,1189,1190],{"class":230,"line":393},[228,1191,723],{"emptyLinePlaceholder":722},[228,1193,1194,1196,1198,1200,1202,1204,1206,1208,1210,1212,1214,1217,1219,1221,1223,1226,1228,1230],{"class":230,"line":444},[228,1195,1153],{"class":427},[228,1197,816],{"class":242},[228,1199,893],{"class":238},[228,1201,326],{"class":427},[228,1203,898],{"class":242},[228,1205,901],{"class":322},[228,1207,282],{"class":242},[228,1209,366],{"class":242},[228,1211,908],{"class":322},[228,1213,282],{"class":242},[228,1215,1216],{"class":1174}," 99",[228,1218,256],{"class":242},[228,1220,1129],{"class":322},[228,1222,282],{"class":242},[228,1224,1225],{"class":1134}," true",[228,1227,688],{"class":242},[228,1229,688],{"class":242},[228,1231,804],{"class":427},[228,1233,1234],{"class":230,"line":484},[228,1235,1236],{"class":1186},"\u002F\u002F effective props: { mode: 'edit', readOnly: true, id: 99 }\n",[214,1238,1240],{"id":1239},"reactive-open-state","Reactive open state",[198,1242,1243,1245],{},[201,1244,211],{}," is a computed ref — true while this instance is mounted in the stack, regardless of whether another modal is on top. Bind it to UI:",[219,1247,1249],{"className":644,"code":1248,"language":647,"meta":224,"style":224},"\u003Cbutton :disabled=\"editor.isOpen.value\">Edit\u003C\u002Fbutton>\n",[201,1250,1251],{"__ignoreMap":224},[228,1252,1253,1255,1257,1260,1263,1265,1267,1269,1271,1273,1275,1278,1280,1282,1284,1286,1288],{"class":230,"line":231},[228,1254,243],{"class":242},[228,1256,969],{"class":322},[228,1258,1259],{"class":242}," :",[228,1261,1262],{"class":234},"disabled",[228,1264,665],{"class":242},[228,1266,668],{"class":242},[228,1268,813],{"class":427},[228,1270,816],{"class":242},[228,1272,211],{"class":427},[228,1274,816],{"class":242},[228,1276,1277],{"class":427},"value",[228,1279,668],{"class":242},[228,1281,996],{"class":242},[228,1283,999],{"class":427},[228,1285,941],{"class":242},[228,1287,969],{"class":322},[228,1289,307],{"class":242},[198,1291,1292,1295],{},[201,1293,1294],{},"isTop"," is true only when this instance is the topmost modal in the global stack. Use it to gate behavior that should only apply to the active modal (e.g. global key handlers):",[219,1297,1299],{"className":221,"code":1298,"language":223,"meta":224,"style":224},"watch(editor.isTop, (top) => {\n  if (top) attachShortcuts()\n  else detachShortcuts()\n})\n",[201,1300,1301,1326,1344,1354],{"__ignoreMap":224},[228,1302,1303,1306,1309,1311,1313,1315,1317,1320,1322,1324],{"class":230,"line":231},[228,1304,1305],{"class":238},"watch",[228,1307,1308],{"class":427},"(editor",[228,1310,816],{"class":242},[228,1312,1294],{"class":427},[228,1314,256],{"class":242},[228,1316,773],{"class":242},[228,1318,1319],{"class":278},"top",[228,1321,431],{"class":242},[228,1323,434],{"class":234},[228,1325,316],{"class":242},[228,1327,1328,1331,1333,1335,1338,1341],{"class":230,"line":275},[228,1329,1330],{"class":680},"  if",[228,1332,773],{"class":322},[228,1334,1319],{"class":427},[228,1336,1337],{"class":322},") ",[228,1339,1340],{"class":238},"attachShortcuts",[228,1342,1343],{"class":322},"()\n",[228,1345,1346,1349,1352],{"class":230,"line":290},[228,1347,1348],{"class":680},"  else",[228,1350,1351],{"class":238}," detachShortcuts",[228,1353,1343],{"class":322},[228,1355,1356,1358],{"class":230,"line":310},[228,1357,801],{"class":242},[228,1359,804],{"class":427},[198,1361,1362,1365,1366,1369],{},[201,1363,1364],{},"instanceId"," exposes the live modal's id, or ",[201,1367,1368],{},"null"," when closed:",[219,1371,1373],{"className":221,"code":1372,"language":223,"meta":224,"style":224},"if (editor.instanceId.value !== null) {\n  closeModalById(editor.instanceId.value, { ignoreGuard: true })\n}\n",[201,1374,1375,1402,1433],{"__ignoreMap":224},[228,1376,1377,1380,1383,1385,1387,1389,1392,1395,1397,1399],{"class":230,"line":231},[228,1378,1379],{"class":680},"if",[228,1381,1382],{"class":427}," (editor",[228,1384,816],{"class":242},[228,1386,1364],{"class":427},[228,1388,816],{"class":242},[228,1390,1391],{"class":427},"value ",[228,1393,1394],{"class":242},"!==",[228,1396,537],{"class":242},[228,1398,1337],{"class":427},[228,1400,1401],{"class":242},"{\n",[228,1403,1404,1407,1409,1411,1413,1415,1417,1419,1421,1423,1425,1427,1429,1431],{"class":230,"line":275},[228,1405,1406],{"class":238},"  closeModalById",[228,1408,326],{"class":322},[228,1410,813],{"class":427},[228,1412,816],{"class":242},[228,1414,1364],{"class":427},[228,1416,816],{"class":242},[228,1418,1277],{"class":427},[228,1420,256],{"class":242},[228,1422,366],{"class":242},[228,1424,369],{"class":322},[228,1426,282],{"class":242},[228,1428,1225],{"class":1134},[228,1430,688],{"class":242},[228,1432,804],{"class":322},[228,1434,1435],{"class":230,"line":290},[228,1436,545],{"class":242},[214,1438,1440],{"id":1439},"auto-close-on-unmount","Auto-close on unmount",[198,1442,1443,1444,1446],{},"By default, when the component that called ",[201,1445,203],{}," unmounts, the modal is force-closed (guards skipped, animation skipped). Disable this if you want the modal to outlive its parent:",[219,1448,1450],{"className":221,"code":1449,"language":223,"meta":224,"style":224},"const modal = useModal(HeavyDialog, { closeOnUnmount: false })\n",[201,1451,1452],{"__ignoreMap":224},[228,1453,1454,1456,1458,1460,1462,1465,1467,1469,1472,1474,1476,1478],{"class":230,"line":231},[228,1455,728],{"class":234},[228,1457,1093],{"class":427},[228,1459,665],{"class":242},[228,1461,239],{"class":238},[228,1463,1464],{"class":427},"(HeavyDialog",[228,1466,256],{"class":242},[228,1468,366],{"class":242},[228,1470,1471],{"class":322}," closeOnUnmount",[228,1473,282],{"class":242},[228,1475,1135],{"class":1134},[228,1477,688],{"class":242},[228,1479,804],{"class":427},[214,1481,1483],{"id":1482},"call-at-setup-top-level","Call at setup top-level",[198,1485,1486,1488],{},[201,1487,203],{}," registers a scope dispose hook. Call it once at setup time, not inside event handlers:",[219,1490,1492],{"className":221,"code":1491,"language":223,"meta":224,"style":224},"\u002F\u002F ✓ good\nconst modal = useModal(MyDialog)\nfunction onClick() { modal.open() }\n\n\u002F\u002F ✗ bad — new instance and dispose hook on every click\nfunction onClick() {\n  const modal = useModal(MyDialog)\n  modal.open()\n}\n",[201,1493,1494,1499,1512,1535,1539,1544,1554,1572,1583],{"__ignoreMap":224},[228,1495,1496],{"class":230,"line":231},[228,1497,1498],{"class":1186},"\u002F\u002F ✓ good\n",[228,1500,1501,1503,1505,1507,1509],{"class":230,"line":275},[228,1502,728],{"class":234},[228,1504,1093],{"class":427},[228,1506,665],{"class":242},[228,1508,239],{"class":238},[228,1510,1511],{"class":427},"(MyDialog)\n",[228,1513,1514,1516,1519,1521,1523,1526,1528,1530,1533],{"class":230,"line":290},[228,1515,235],{"class":234},[228,1517,1518],{"class":238}," onClick",[228,1520,924],{"class":242},[228,1522,366],{"class":242},[228,1524,1525],{"class":427}," modal",[228,1527,816],{"class":242},[228,1529,893],{"class":238},[228,1531,1532],{"class":322},"() ",[228,1534,545],{"class":242},[228,1536,1537],{"class":230,"line":310},[228,1538,723],{"emptyLinePlaceholder":722},[228,1540,1541],{"class":230,"line":319},[228,1542,1543],{"class":1186},"\u002F\u002F ✗ bad — new instance and dispose hook on every click\n",[228,1545,1546,1548,1550,1552],{"class":230,"line":353},[228,1547,235],{"class":234},[228,1549,1518],{"class":238},[228,1551,924],{"class":242},[228,1553,316],{"class":242},[228,1555,1556,1559,1561,1563,1565,1567,1570],{"class":230,"line":393},[228,1557,1558],{"class":234},"  const",[228,1560,1525],{"class":427},[228,1562,250],{"class":242},[228,1564,239],{"class":238},[228,1566,326],{"class":322},[228,1568,1569],{"class":427},"MyDialog",[228,1571,804],{"class":322},[228,1573,1574,1577,1579,1581],{"class":230,"line":444},[228,1575,1576],{"class":427},"  modal",[228,1578,816],{"class":242},[228,1580,893],{"class":238},[228,1582,1343],{"class":322},[228,1584,1585],{"class":230,"line":484},[228,1586,545],{"class":242},[214,1588,1590,1592,1593],{"id":1589},"usemodal-vs-openmodal",[201,1591,203],{}," vs ",[201,1594,207],{},[557,1596,1597,1607],{},[560,1598,1599],{},[563,1600,1601,1604],{},[566,1602,1603],{},"Scenario",[566,1605,1606],{},"Prefer",[579,1608,1609,1618,1627,1639,1648],{},[563,1610,1611,1614],{},[584,1612,1613],{},"One-off modal, single call site",[584,1615,1616],{},[201,1617,207],{},[563,1619,1620,1623],{},[584,1621,1622],{},"Same modal opened multiple times from one place",[584,1624,1625],{},[201,1626,203],{},[563,1628,1629,1635],{},[584,1630,1631,1632,1634],{},"Reactive ",[201,1633,211],{}," to disable a button",[584,1636,1637],{},[201,1638,203],{},[563,1640,1641,1644],{},[584,1642,1643],{},"Listeners that survive across re-opens",[584,1645,1646],{},[201,1647,203],{},[563,1649,1650,1653],{},[584,1651,1652],{},"Route guard \u002F utility outside a component",[584,1654,1655],{},[201,1656,207],{},[1658,1659,1660],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":224,"searchDepth":275,"depth":275,"links":1662},[1663,1664,1665,1666,1667,1668,1669],{"id":216,"depth":275,"text":217},{"id":621,"depth":275,"text":622},{"id":1068,"depth":275,"text":1069},{"id":1239,"depth":275,"text":1240},{"id":1439,"depth":275,"text":1440},{"id":1482,"depth":275,"text":1483},{"id":1589,"depth":275,"text":1670},"useModal vs openModal","Bind a modal component to a reactive controller — persistent listeners, reactive isOpen, auto-cleanup.","md",null,{},{"title":78,"description":1671},"KEG-_rW7wE0ZcImhnCkauXAczIABIUpnt42JE2MCTRs",[1678,1680],{"title":74,"path":75,"stem":76,"description":1679,"children":-1},"Headless data-state hooks, Tailwind utilities, custom keyframes.",{"title":82,"path":83,"stem":84,"description":1681,"children":-1},"Full reference for useModalContext — id, group, isTopmost, effectiveOptions, close, confirm, onBeforeClose.",1779523617515]