[{"data":1,"prerenderedAt":3562},["ShallowReactive",2],{"$5v-20jFCds":3},[4,33],{"id":5,"title":6,"body":7,"cover":18,"date":19,"description":20,"extension":21,"image":18,"meta":22,"navigation":23,"ogImage":24,"path":27,"readTime":28,"robots":18,"schemaOrg":18,"seo":29,"sitemap":30,"stem":31,"tags":18,"__hash__":32},"blog\u002Fblog\u002Ffirst-blog.md","My First Blog Post",{"type":8,"value":9,"toc":14},"minimark",[10],[11,12,13],"p",{},"Welcome to my first blog post! I'm excited to share my journey into web development and the technologies I've been exploring. In this post, I'll talk about my experiences, challenges, and insights as I learn and grow in the field.",{"title":15,"searchDepth":16,"depth":16,"links":17},"",2,[],null,"2024-06-01","Hello world! This is my first blog post where I share my thoughts and experiences on web development, programming, and technology.","md",{},true,{"component":25,"props":26},"OgImageBlogPostTakumi",{"title":6,"description":20},"\u002Fblog\u002Ffirst-blog",1,{"title":6,"description":20},{"loc":27},"blog\u002Ffirst-blog","wm1tkkKxtg8XhJBjQl3T628g8XdIrbLNQpXqcPMeLrw",{"id":34,"title":35,"body":36,"cover":18,"date":3549,"description":3550,"extension":21,"image":3551,"meta":3552,"navigation":23,"ogImage":18,"path":3554,"readTime":201,"robots":18,"schemaOrg":18,"seo":3555,"sitemap":3556,"stem":3557,"tags":3558,"__hash__":3561},"blog\u002Fblog\u002Freusable-alert-dialog-vue-react.md","Reusable alert dialog in Vue and React",{"type":8,"value":37,"toc":3547},[38,41,48,77,88,91,94,3535,3544],[11,39,40],{},"Every app eventually needs one of those \"Are you sure?\" dialogs. You click delete, and a little box pops up asking you to confirm. Simple enough, but if you've ever wired up that modal state by hand more than twice, you know how tedious it gets. A boolean to track visibility, a callback for confirm, another for cancel, and suddenly your component is drowning in dialog plumbing.",[11,42,43],{},[44,45],"img",{"alt":46,"src":47},"Alert Dialog","\u002Fimages\u002Falert-dialog.webp",[11,49,50,51,55,56,60,61,64,65,68,69,72,73,76],{},"A better approach would be a ",[52,53,54],"strong",{},"Promise-based"," ",[57,58,59],"code",{},"useAlert"," composable (Vue) or hook (React) that you can call like a regular async function. Call ",[57,62,63],{},"show(...)",", ",[57,66,67],{},"await"," the result, and get back ",[57,70,71],{},"true"," or ",[57,74,75],{},"false",". No state management, no prop drilling, just a clean one-liner wherever you need confirmation.",[11,78,79,80,83,84,87],{},"The idea is simple. We create a single alert dialog component that lives at the root of our app. A shared piece of state holds the current dialog data and a ",[57,81,82],{},"resolve"," function. When you call ",[57,85,86],{},"useAlert().show(...)",", it sets that state and returns a Promise. The dialog appears, the user clicks OK or Cancel, and the Promise resolves. That's it.",[11,89,90],{},"The focus of this post is entirely on the logic, not the styling. We're using plain HTML and basic CSS here for clarity, but you could easily swap in any UI library (like Radix, Headless UI, shadcn\u002Fui, etc.) for the modal itself and the underlying logic would stay exactly the same.",[11,92,93],{},"Below is the full implementation in both Vue and React.",[95,96,97,1767],"tabs",{},[98,99,101],"tabs-item",{"label":100},"Vue 3",[102,103,105,478,1413,1503],"code-tree",{"default-value":104},"composables\u002FuseAlert.ts",[106,107,111],"pre",{"className":108,"code":109,"filename":104,"language":110,"meta":15,"style":15},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { ref } from \"vue\";\n\nexport type AlertDialogProps = {\n  data: {\n    title?: string;\n    message: string;\n    confirmText?: string;\n    cancelText?: string;\n  };\n  resolve: (value: boolean) => void;\n};\n\nconst current = ref\u003CAlertDialogProps>();\n\nconst show = (data: AlertDialogProps[\"data\"]): Promise\u003Cboolean> => {\n  return new Promise((resolve) => {\n    current.value = { data, resolve };\n  });\n};\n\nexport const useAlert = () => {\n  return { current, show };\n};\n","ts",[57,112,113,148,153,173,185,199,211,223,235,241,272,278,283,312,317,365,389,416,426,431,436,456,473],{"__ignoreMap":15},[114,115,117,121,125,129,132,135,138,142,145],"span",{"class":116,"line":28},"line",[114,118,120],{"class":119},"s7zQu","import",[114,122,124],{"class":123},"sMK4o"," {",[114,126,128],{"class":127},"sTEyZ"," ref",[114,130,131],{"class":123}," }",[114,133,134],{"class":119}," from",[114,136,137],{"class":123}," \"",[114,139,141],{"class":140},"sfazB","vue",[114,143,144],{"class":123},"\"",[114,146,147],{"class":123},";\n",[114,149,150],{"class":116,"line":16},[114,151,152],{"emptyLinePlaceholder":23},"\n",[114,154,156,159,163,167,170],{"class":116,"line":155},3,[114,157,158],{"class":119},"export",[114,160,162],{"class":161},"spNyl"," type",[114,164,166],{"class":165},"sBMFI"," AlertDialogProps",[114,168,169],{"class":123}," =",[114,171,172],{"class":123}," {\n",[114,174,176,180,183],{"class":116,"line":175},4,[114,177,179],{"class":178},"swJcz","  data",[114,181,182],{"class":123},":",[114,184,172],{"class":123},[114,186,188,191,194,197],{"class":116,"line":187},5,[114,189,190],{"class":178},"    title",[114,192,193],{"class":123},"?:",[114,195,196],{"class":165}," string",[114,198,147],{"class":123},[114,200,202,205,207,209],{"class":116,"line":201},6,[114,203,204],{"class":178},"    message",[114,206,182],{"class":123},[114,208,196],{"class":165},[114,210,147],{"class":123},[114,212,214,217,219,221],{"class":116,"line":213},7,[114,215,216],{"class":178},"    confirmText",[114,218,193],{"class":123},[114,220,196],{"class":165},[114,222,147],{"class":123},[114,224,226,229,231,233],{"class":116,"line":225},8,[114,227,228],{"class":178},"    cancelText",[114,230,193],{"class":123},[114,232,196],{"class":165},[114,234,147],{"class":123},[114,236,238],{"class":116,"line":237},9,[114,239,240],{"class":123},"  };\n",[114,242,244,247,249,252,256,258,261,264,267,270],{"class":116,"line":243},10,[114,245,246],{"class":178},"  resolve",[114,248,182],{"class":123},[114,250,251],{"class":123}," (",[114,253,255],{"class":254},"sHdIc","value",[114,257,182],{"class":123},[114,259,260],{"class":165}," boolean",[114,262,263],{"class":123},")",[114,265,266],{"class":161}," =>",[114,268,269],{"class":165}," void",[114,271,147],{"class":123},[114,273,275],{"class":116,"line":274},11,[114,276,277],{"class":123},"};\n",[114,279,281],{"class":116,"line":280},12,[114,282,152],{"emptyLinePlaceholder":23},[114,284,286,289,292,295,298,301,304,307,310],{"class":116,"line":285},13,[114,287,288],{"class":161},"const",[114,290,291],{"class":127}," current ",[114,293,294],{"class":123},"=",[114,296,128],{"class":297},"s2Zo4",[114,299,300],{"class":123},"\u003C",[114,302,303],{"class":165},"AlertDialogProps",[114,305,306],{"class":123},">",[114,308,309],{"class":127},"()",[114,311,147],{"class":123},[114,313,315],{"class":116,"line":314},14,[114,316,152],{"emptyLinePlaceholder":23},[114,318,320,322,325,327,329,332,334,336,339,341,343,345,348,351,354,356,359,361,363],{"class":116,"line":319},15,[114,321,288],{"class":161},[114,323,324],{"class":127}," show ",[114,326,294],{"class":123},[114,328,251],{"class":123},[114,330,331],{"class":254},"data",[114,333,182],{"class":123},[114,335,166],{"class":165},[114,337,338],{"class":127},"[",[114,340,144],{"class":123},[114,342,331],{"class":140},[114,344,144],{"class":123},[114,346,347],{"class":127},"]",[114,349,350],{"class":123},"):",[114,352,353],{"class":165}," Promise",[114,355,300],{"class":123},[114,357,358],{"class":165},"boolean",[114,360,306],{"class":123},[114,362,266],{"class":161},[114,364,172],{"class":123},[114,366,368,371,374,376,379,381,383,385,387],{"class":116,"line":367},16,[114,369,370],{"class":119},"  return",[114,372,373],{"class":123}," new",[114,375,353],{"class":165},[114,377,378],{"class":178},"(",[114,380,378],{"class":123},[114,382,82],{"class":254},[114,384,263],{"class":123},[114,386,266],{"class":161},[114,388,172],{"class":123},[114,390,392,395,398,400,402,404,407,410,413],{"class":116,"line":391},17,[114,393,394],{"class":127},"    current",[114,396,397],{"class":123},".",[114,399,255],{"class":127},[114,401,169],{"class":123},[114,403,124],{"class":123},[114,405,406],{"class":127}," data",[114,408,409],{"class":123},",",[114,411,412],{"class":127}," resolve",[114,414,415],{"class":123}," };\n",[114,417,419,422,424],{"class":116,"line":418},18,[114,420,421],{"class":123},"  }",[114,423,263],{"class":178},[114,425,147],{"class":123},[114,427,429],{"class":116,"line":428},19,[114,430,277],{"class":123},[114,432,434],{"class":116,"line":433},20,[114,435,152],{"emptyLinePlaceholder":23},[114,437,439,441,444,447,449,452,454],{"class":116,"line":438},21,[114,440,158],{"class":119},[114,442,443],{"class":161}," const",[114,445,446],{"class":127}," useAlert ",[114,448,294],{"class":123},[114,450,451],{"class":123}," ()",[114,453,266],{"class":161},[114,455,172],{"class":123},[114,457,459,461,463,466,468,471],{"class":116,"line":458},22,[114,460,370],{"class":119},[114,462,124],{"class":123},[114,464,465],{"class":127}," current",[114,467,409],{"class":123},[114,469,470],{"class":127}," show",[114,472,415],{"class":123},[114,474,476],{"class":116,"line":475},23,[114,477,277],{"class":123},[106,479,483],{"className":480,"code":481,"filename":482,"language":141,"meta":15,"style":15},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { useAlert } from \"@\u002Fcomposables\u002FuseAlert\";\n\nconst { current } = useAlert();\n\nconst handleConfirm = () => {\n  current.value?.resolve(true);\n  current.value = undefined;\n};\n\nconst handleCancel = () => {\n  current.value?.resolve(false);\n  current.value = undefined;\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-if=\"current !== undefined\" class=\"dialog-backdrop\">\n    \u003Cdiv class=\"dialog\">\n      \u003Ch3 v-if=\"current.data.title\">{{ current.data.title }}\u003C\u002Fh3>\n      \u003Cp>{{ current.data.message }}\u003C\u002Fp>\n      \u003Cdiv class=\"dialog-actions\">\n        \u003Cbutton class=\"dialog-btn\" @click=\"handleCancel\">\n          {{ current.data.cancelText || \"Cancel\" }}\n        \u003C\u002Fbutton>\n        \u003Cbutton class=\"dialog-btn dialog-btn-primary\" @click=\"handleConfirm\">\n          {{ current.data.confirmText || \"OK\" }}\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.dialog-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n.dialog {\n  background: #fff;\n  border-radius: 8px;\n  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);\n  padding: 2rem;\n  min-width: 320px;\n  max-width: 90vw;\n}\n.dialog-actions {\n  display: flex;\n  gap: 1rem;\n  margin-top: 2rem;\n  justify-content: flex-end;\n}\n.dialog-btn {\n  padding: 0.5rem 1.5rem;\n  border-radius: 4px;\n  border: none;\n  background: #eee;\n  cursor: pointer;\n  font-size: 1rem;\n}\n.dialog-btn-primary {\n  background: #007bff;\n  color: #fff;\n}\n\u003C\u002Fstyle>\n","components\u002FAlertDialog.vue",[57,484,485,509,531,535,554,558,573,596,609,613,617,632,652,664,668,677,681,690,724,744,774,791,810,843,849,859,890,896,905,915,925,935,944,949,962,971,985,999,1031,1044,1057,1069,1082,1088,1097,1112,1125,1162,1175,1188,1201,1206,1215,1226,1239,1251,1263,1268,1277,1292,1304,1317,1331,1344,1356,1361,1371,1385,1399,1404],{"__ignoreMap":15},[114,486,487,489,492,495,498,500,502,504,506],{"class":116,"line":28},[114,488,300],{"class":123},[114,490,491],{"class":178},"script",[114,493,494],{"class":161}," setup",[114,496,497],{"class":161}," lang",[114,499,294],{"class":123},[114,501,144],{"class":123},[114,503,110],{"class":140},[114,505,144],{"class":123},[114,507,508],{"class":123},">\n",[114,510,511,513,515,518,520,522,524,527,529],{"class":116,"line":16},[114,512,120],{"class":119},[114,514,124],{"class":123},[114,516,517],{"class":127}," useAlert",[114,519,131],{"class":123},[114,521,134],{"class":119},[114,523,137],{"class":123},[114,525,526],{"class":140},"@\u002Fcomposables\u002FuseAlert",[114,528,144],{"class":123},[114,530,147],{"class":123},[114,532,533],{"class":116,"line":155},[114,534,152],{"emptyLinePlaceholder":23},[114,536,537,539,541,543,546,548,550,552],{"class":116,"line":175},[114,538,288],{"class":161},[114,540,124],{"class":123},[114,542,291],{"class":127},[114,544,545],{"class":123},"}",[114,547,169],{"class":123},[114,549,517],{"class":297},[114,551,309],{"class":127},[114,553,147],{"class":123},[114,555,556],{"class":116,"line":187},[114,557,152],{"emptyLinePlaceholder":23},[114,559,560,562,565,567,569,571],{"class":116,"line":201},[114,561,288],{"class":161},[114,563,564],{"class":127}," handleConfirm ",[114,566,294],{"class":123},[114,568,451],{"class":123},[114,570,266],{"class":161},[114,572,172],{"class":123},[114,574,575,578,580,582,585,587,589,592,594],{"class":116,"line":213},[114,576,577],{"class":127},"  current",[114,579,397],{"class":123},[114,581,255],{"class":127},[114,583,584],{"class":123},"?.",[114,586,82],{"class":297},[114,588,378],{"class":178},[114,590,71],{"class":591},"sfNiH",[114,593,263],{"class":178},[114,595,147],{"class":123},[114,597,598,600,602,604,606],{"class":116,"line":225},[114,599,577],{"class":127},[114,601,397],{"class":123},[114,603,255],{"class":127},[114,605,169],{"class":123},[114,607,608],{"class":123}," undefined;\n",[114,610,611],{"class":116,"line":237},[114,612,277],{"class":123},[114,614,615],{"class":116,"line":243},[114,616,152],{"emptyLinePlaceholder":23},[114,618,619,621,624,626,628,630],{"class":116,"line":274},[114,620,288],{"class":161},[114,622,623],{"class":127}," handleCancel ",[114,625,294],{"class":123},[114,627,451],{"class":123},[114,629,266],{"class":161},[114,631,172],{"class":123},[114,633,634,636,638,640,642,644,646,648,650],{"class":116,"line":280},[114,635,577],{"class":127},[114,637,397],{"class":123},[114,639,255],{"class":127},[114,641,584],{"class":123},[114,643,82],{"class":297},[114,645,378],{"class":178},[114,647,75],{"class":591},[114,649,263],{"class":178},[114,651,147],{"class":123},[114,653,654,656,658,660,662],{"class":116,"line":285},[114,655,577],{"class":127},[114,657,397],{"class":123},[114,659,255],{"class":127},[114,661,169],{"class":123},[114,663,608],{"class":123},[114,665,666],{"class":116,"line":314},[114,667,277],{"class":123},[114,669,670,673,675],{"class":116,"line":319},[114,671,672],{"class":123},"\u003C\u002F",[114,674,491],{"class":178},[114,676,508],{"class":123},[114,678,679],{"class":116,"line":367},[114,680,152],{"emptyLinePlaceholder":23},[114,682,683,685,688],{"class":116,"line":391},[114,684,300],{"class":123},[114,686,687],{"class":178},"template",[114,689,508],{"class":123},[114,691,692,695,698,701,703,705,708,710,713,715,717,720,722],{"class":116,"line":418},[114,693,694],{"class":123},"  \u003C",[114,696,697],{"class":178},"div",[114,699,700],{"class":161}," v-if",[114,702,294],{"class":123},[114,704,144],{"class":123},[114,706,707],{"class":140},"current !== undefined",[114,709,144],{"class":123},[114,711,712],{"class":161}," class",[114,714,294],{"class":123},[114,716,144],{"class":123},[114,718,719],{"class":140},"dialog-backdrop",[114,721,144],{"class":123},[114,723,508],{"class":123},[114,725,726,729,731,733,735,737,740,742],{"class":116,"line":428},[114,727,728],{"class":123},"    \u003C",[114,730,697],{"class":178},[114,732,712],{"class":161},[114,734,294],{"class":123},[114,736,144],{"class":123},[114,738,739],{"class":140},"dialog",[114,741,144],{"class":123},[114,743,508],{"class":123},[114,745,746,749,752,754,756,758,761,763,765,768,770,772],{"class":116,"line":433},[114,747,748],{"class":123},"      \u003C",[114,750,751],{"class":178},"h3",[114,753,700],{"class":161},[114,755,294],{"class":123},[114,757,144],{"class":123},[114,759,760],{"class":140},"current.data.title",[114,762,144],{"class":123},[114,764,306],{"class":123},[114,766,767],{"class":127},"{{ current.data.title }}",[114,769,672],{"class":123},[114,771,751],{"class":178},[114,773,508],{"class":123},[114,775,776,778,780,782,785,787,789],{"class":116,"line":438},[114,777,748],{"class":123},[114,779,11],{"class":178},[114,781,306],{"class":123},[114,783,784],{"class":127},"{{ current.data.message }}",[114,786,672],{"class":123},[114,788,11],{"class":178},[114,790,508],{"class":123},[114,792,793,795,797,799,801,803,806,808],{"class":116,"line":458},[114,794,748],{"class":123},[114,796,697],{"class":178},[114,798,712],{"class":161},[114,800,294],{"class":123},[114,802,144],{"class":123},[114,804,805],{"class":140},"dialog-actions",[114,807,144],{"class":123},[114,809,508],{"class":123},[114,811,812,815,818,820,822,824,827,829,832,834,836,839,841],{"class":116,"line":475},[114,813,814],{"class":123},"        \u003C",[114,816,817],{"class":178},"button",[114,819,712],{"class":161},[114,821,294],{"class":123},[114,823,144],{"class":123},[114,825,826],{"class":140},"dialog-btn",[114,828,144],{"class":123},[114,830,831],{"class":161}," @click",[114,833,294],{"class":123},[114,835,144],{"class":123},[114,837,838],{"class":140},"handleCancel",[114,840,144],{"class":123},[114,842,508],{"class":123},[114,844,846],{"class":116,"line":845},24,[114,847,848],{"class":127},"          {{ current.data.cancelText || \"Cancel\" }}\n",[114,850,852,855,857],{"class":116,"line":851},25,[114,853,854],{"class":123},"        \u003C\u002F",[114,856,817],{"class":178},[114,858,508],{"class":123},[114,860,862,864,866,868,870,872,875,877,879,881,883,886,888],{"class":116,"line":861},26,[114,863,814],{"class":123},[114,865,817],{"class":178},[114,867,712],{"class":161},[114,869,294],{"class":123},[114,871,144],{"class":123},[114,873,874],{"class":140},"dialog-btn dialog-btn-primary",[114,876,144],{"class":123},[114,878,831],{"class":161},[114,880,294],{"class":123},[114,882,144],{"class":123},[114,884,885],{"class":140},"handleConfirm",[114,887,144],{"class":123},[114,889,508],{"class":123},[114,891,893],{"class":116,"line":892},27,[114,894,895],{"class":127},"          {{ current.data.confirmText || \"OK\" }}\n",[114,897,899,901,903],{"class":116,"line":898},28,[114,900,854],{"class":123},[114,902,817],{"class":178},[114,904,508],{"class":123},[114,906,908,911,913],{"class":116,"line":907},29,[114,909,910],{"class":123},"      \u003C\u002F",[114,912,697],{"class":178},[114,914,508],{"class":123},[114,916,918,921,923],{"class":116,"line":917},30,[114,919,920],{"class":123},"    \u003C\u002F",[114,922,697],{"class":178},[114,924,508],{"class":123},[114,926,928,931,933],{"class":116,"line":927},31,[114,929,930],{"class":123},"  \u003C\u002F",[114,932,697],{"class":178},[114,934,508],{"class":123},[114,936,938,940,942],{"class":116,"line":937},32,[114,939,672],{"class":123},[114,941,687],{"class":178},[114,943,508],{"class":123},[114,945,947],{"class":116,"line":946},33,[114,948,152],{"emptyLinePlaceholder":23},[114,950,952,954,957,960],{"class":116,"line":951},34,[114,953,300],{"class":123},[114,955,956],{"class":178},"style",[114,958,959],{"class":161}," scoped",[114,961,508],{"class":123},[114,963,965,967,969],{"class":116,"line":964},35,[114,966,397],{"class":123},[114,968,719],{"class":165},[114,970,172],{"class":123},[114,972,974,978,980,983],{"class":116,"line":973},36,[114,975,977],{"class":976},"sqsOY","  position",[114,979,182],{"class":123},[114,981,982],{"class":127}," fixed",[114,984,147],{"class":123},[114,986,988,991,993,997],{"class":116,"line":987},37,[114,989,990],{"class":976},"  inset",[114,992,182],{"class":123},[114,994,996],{"class":995},"sbssI"," 0",[114,998,147],{"class":123},[114,1000,1002,1005,1007,1010,1012,1015,1017,1019,1021,1023,1025,1028],{"class":116,"line":1001},38,[114,1003,1004],{"class":976},"  background",[114,1006,182],{"class":123},[114,1008,1009],{"class":297}," rgba",[114,1011,378],{"class":123},[114,1013,1014],{"class":995},"0",[114,1016,409],{"class":123},[114,1018,996],{"class":995},[114,1020,409],{"class":123},[114,1022,996],{"class":995},[114,1024,409],{"class":123},[114,1026,1027],{"class":995}," 0.4",[114,1029,1030],{"class":123},");\n",[114,1032,1034,1037,1039,1042],{"class":116,"line":1033},39,[114,1035,1036],{"class":976},"  display",[114,1038,182],{"class":123},[114,1040,1041],{"class":127}," flex",[114,1043,147],{"class":123},[114,1045,1047,1050,1052,1055],{"class":116,"line":1046},40,[114,1048,1049],{"class":976},"  align-items",[114,1051,182],{"class":123},[114,1053,1054],{"class":127}," center",[114,1056,147],{"class":123},[114,1058,1060,1063,1065,1067],{"class":116,"line":1059},41,[114,1061,1062],{"class":976},"  justify-content",[114,1064,182],{"class":123},[114,1066,1054],{"class":127},[114,1068,147],{"class":123},[114,1070,1072,1075,1077,1080],{"class":116,"line":1071},42,[114,1073,1074],{"class":976},"  z-index",[114,1076,182],{"class":123},[114,1078,1079],{"class":995}," 1000",[114,1081,147],{"class":123},[114,1083,1085],{"class":116,"line":1084},43,[114,1086,1087],{"class":123},"}\n",[114,1089,1091,1093,1095],{"class":116,"line":1090},44,[114,1092,397],{"class":123},[114,1094,739],{"class":165},[114,1096,172],{"class":123},[114,1098,1100,1102,1104,1107,1110],{"class":116,"line":1099},45,[114,1101,1004],{"class":976},[114,1103,182],{"class":123},[114,1105,1106],{"class":123}," #",[114,1108,1109],{"class":127},"fff",[114,1111,147],{"class":123},[114,1113,1115,1118,1120,1123],{"class":116,"line":1114},46,[114,1116,1117],{"class":976},"  border-radius",[114,1119,182],{"class":123},[114,1121,1122],{"class":995}," 8px",[114,1124,147],{"class":123},[114,1126,1128,1131,1133,1135,1138,1141,1143,1145,1147,1149,1151,1153,1155,1157,1160],{"class":116,"line":1127},47,[114,1129,1130],{"class":976},"  box-shadow",[114,1132,182],{"class":123},[114,1134,996],{"class":995},[114,1136,1137],{"class":995}," 2px",[114,1139,1140],{"class":995}," 16px",[114,1142,1009],{"class":297},[114,1144,378],{"class":123},[114,1146,1014],{"class":995},[114,1148,409],{"class":123},[114,1150,996],{"class":995},[114,1152,409],{"class":123},[114,1154,996],{"class":995},[114,1156,409],{"class":123},[114,1158,1159],{"class":995}," 0.2",[114,1161,1030],{"class":123},[114,1163,1165,1168,1170,1173],{"class":116,"line":1164},48,[114,1166,1167],{"class":976},"  padding",[114,1169,182],{"class":123},[114,1171,1172],{"class":995}," 2rem",[114,1174,147],{"class":123},[114,1176,1178,1181,1183,1186],{"class":116,"line":1177},49,[114,1179,1180],{"class":976},"  min-width",[114,1182,182],{"class":123},[114,1184,1185],{"class":995}," 320px",[114,1187,147],{"class":123},[114,1189,1191,1194,1196,1199],{"class":116,"line":1190},50,[114,1192,1193],{"class":976},"  max-width",[114,1195,182],{"class":123},[114,1197,1198],{"class":995}," 90vw",[114,1200,147],{"class":123},[114,1202,1204],{"class":116,"line":1203},51,[114,1205,1087],{"class":123},[114,1207,1209,1211,1213],{"class":116,"line":1208},52,[114,1210,397],{"class":123},[114,1212,805],{"class":165},[114,1214,172],{"class":123},[114,1216,1218,1220,1222,1224],{"class":116,"line":1217},53,[114,1219,1036],{"class":976},[114,1221,182],{"class":123},[114,1223,1041],{"class":127},[114,1225,147],{"class":123},[114,1227,1229,1232,1234,1237],{"class":116,"line":1228},54,[114,1230,1231],{"class":976},"  gap",[114,1233,182],{"class":123},[114,1235,1236],{"class":995}," 1rem",[114,1238,147],{"class":123},[114,1240,1242,1245,1247,1249],{"class":116,"line":1241},55,[114,1243,1244],{"class":976},"  margin-top",[114,1246,182],{"class":123},[114,1248,1172],{"class":995},[114,1250,147],{"class":123},[114,1252,1254,1256,1258,1261],{"class":116,"line":1253},56,[114,1255,1062],{"class":976},[114,1257,182],{"class":123},[114,1259,1260],{"class":127}," flex-end",[114,1262,147],{"class":123},[114,1264,1266],{"class":116,"line":1265},57,[114,1267,1087],{"class":123},[114,1269,1271,1273,1275],{"class":116,"line":1270},58,[114,1272,397],{"class":123},[114,1274,826],{"class":165},[114,1276,172],{"class":123},[114,1278,1280,1282,1284,1287,1290],{"class":116,"line":1279},59,[114,1281,1167],{"class":976},[114,1283,182],{"class":123},[114,1285,1286],{"class":995}," 0.5rem",[114,1288,1289],{"class":995}," 1.5rem",[114,1291,147],{"class":123},[114,1293,1295,1297,1299,1302],{"class":116,"line":1294},60,[114,1296,1117],{"class":976},[114,1298,182],{"class":123},[114,1300,1301],{"class":995}," 4px",[114,1303,147],{"class":123},[114,1305,1307,1310,1312,1315],{"class":116,"line":1306},61,[114,1308,1309],{"class":976},"  border",[114,1311,182],{"class":123},[114,1313,1314],{"class":127}," none",[114,1316,147],{"class":123},[114,1318,1320,1322,1324,1326,1329],{"class":116,"line":1319},62,[114,1321,1004],{"class":976},[114,1323,182],{"class":123},[114,1325,1106],{"class":123},[114,1327,1328],{"class":127},"eee",[114,1330,147],{"class":123},[114,1332,1334,1337,1339,1342],{"class":116,"line":1333},63,[114,1335,1336],{"class":976},"  cursor",[114,1338,182],{"class":123},[114,1340,1341],{"class":127}," pointer",[114,1343,147],{"class":123},[114,1345,1347,1350,1352,1354],{"class":116,"line":1346},64,[114,1348,1349],{"class":976},"  font-size",[114,1351,182],{"class":123},[114,1353,1236],{"class":995},[114,1355,147],{"class":123},[114,1357,1359],{"class":116,"line":1358},65,[114,1360,1087],{"class":123},[114,1362,1364,1366,1369],{"class":116,"line":1363},66,[114,1365,397],{"class":123},[114,1367,1368],{"class":165},"dialog-btn-primary",[114,1370,172],{"class":123},[114,1372,1374,1376,1378,1380,1383],{"class":116,"line":1373},67,[114,1375,1004],{"class":976},[114,1377,182],{"class":123},[114,1379,1106],{"class":123},[114,1381,1382],{"class":127},"007bff",[114,1384,147],{"class":123},[114,1386,1388,1391,1393,1395,1397],{"class":116,"line":1387},68,[114,1389,1390],{"class":976},"  color",[114,1392,182],{"class":123},[114,1394,1106],{"class":123},[114,1396,1109],{"class":127},[114,1398,147],{"class":123},[114,1400,1402],{"class":116,"line":1401},69,[114,1403,1087],{"class":123},[114,1405,1407,1409,1411],{"class":116,"line":1406},70,[114,1408,672],{"class":123},[114,1410,956],{"class":178},[114,1412,508],{"class":123},[106,1414,1417],{"className":480,"code":1415,"filename":1416,"language":141,"meta":15,"style":15},"\u003Cscript setup lang=\"ts\">\n  import AlertDialog from \"@\u002Fcomponents\u002FAlertDialog.vue\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!-- Rest of your app -->\n  \u003CAlertDialog \u002F>\n\u003C\u002Ftemplate>\n","app.vue",[57,1418,1419,1439,1459,1467,1471,1479,1485,1495],{"__ignoreMap":15},[114,1420,1421,1423,1425,1427,1429,1431,1433,1435,1437],{"class":116,"line":28},[114,1422,300],{"class":123},[114,1424,491],{"class":178},[114,1426,494],{"class":161},[114,1428,497],{"class":161},[114,1430,294],{"class":123},[114,1432,144],{"class":123},[114,1434,110],{"class":140},[114,1436,144],{"class":123},[114,1438,508],{"class":123},[114,1440,1441,1444,1447,1450,1452,1455,1457],{"class":116,"line":16},[114,1442,1443],{"class":119},"  import",[114,1445,1446],{"class":127}," AlertDialog ",[114,1448,1449],{"class":119},"from",[114,1451,137],{"class":123},[114,1453,1454],{"class":140},"@\u002Fcomponents\u002FAlertDialog.vue",[114,1456,144],{"class":123},[114,1458,147],{"class":123},[114,1460,1461,1463,1465],{"class":116,"line":155},[114,1462,672],{"class":123},[114,1464,491],{"class":178},[114,1466,508],{"class":123},[114,1468,1469],{"class":116,"line":175},[114,1470,152],{"emptyLinePlaceholder":23},[114,1472,1473,1475,1477],{"class":116,"line":187},[114,1474,300],{"class":123},[114,1476,687],{"class":178},[114,1478,508],{"class":123},[114,1480,1481],{"class":116,"line":201},[114,1482,1484],{"class":1483},"sHwdD","  \u003C!-- Rest of your app -->\n",[114,1486,1487,1489,1492],{"class":116,"line":213},[114,1488,694],{"class":123},[114,1490,1491],{"class":178},"AlertDialog",[114,1493,1494],{"class":123}," \u002F>\n",[114,1496,1497,1499,1501],{"class":116,"line":225},[114,1498,672],{"class":123},[114,1500,687],{"class":178},[114,1502,508],{"class":123},[106,1504,1507],{"className":480,"code":1505,"filename":1506,"language":141,"meta":15,"style":15},"\u003Cscript setup lang=\"ts\">\nimport { useAlert } from \"@\u002Fcomposables\u002FuseAlert\";\n\nconst { show } = useAlert();\n\nconst handleDelete = async () => {\n  const result = await show({\n    title: \"Confirm Deletion\",\n    message: \"Are you sure you want to delete this item?\",\n    confirmText: \"Delete\",\n    cancelText: \"Cancel\",\n  });\n  if (result) {\n    \u002F\u002F Perform deletion\n  }\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"handleDelete\">Delete Item\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n","components\u002FSomeComponent.vue",[57,1508,1509,1529,1549,1553,1571,1575,1593,1613,1629,1644,1659,1674,1682,1697,1702,1707,1711,1719,1723,1731,1759],{"__ignoreMap":15},[114,1510,1511,1513,1515,1517,1519,1521,1523,1525,1527],{"class":116,"line":28},[114,1512,300],{"class":123},[114,1514,491],{"class":178},[114,1516,494],{"class":161},[114,1518,497],{"class":161},[114,1520,294],{"class":123},[114,1522,144],{"class":123},[114,1524,110],{"class":140},[114,1526,144],{"class":123},[114,1528,508],{"class":123},[114,1530,1531,1533,1535,1537,1539,1541,1543,1545,1547],{"class":116,"line":16},[114,1532,120],{"class":119},[114,1534,124],{"class":123},[114,1536,517],{"class":127},[114,1538,131],{"class":123},[114,1540,134],{"class":119},[114,1542,137],{"class":123},[114,1544,526],{"class":140},[114,1546,144],{"class":123},[114,1548,147],{"class":123},[114,1550,1551],{"class":116,"line":155},[114,1552,152],{"emptyLinePlaceholder":23},[114,1554,1555,1557,1559,1561,1563,1565,1567,1569],{"class":116,"line":175},[114,1556,288],{"class":161},[114,1558,124],{"class":123},[114,1560,324],{"class":127},[114,1562,545],{"class":123},[114,1564,169],{"class":123},[114,1566,517],{"class":297},[114,1568,309],{"class":127},[114,1570,147],{"class":123},[114,1572,1573],{"class":116,"line":187},[114,1574,152],{"emptyLinePlaceholder":23},[114,1576,1577,1579,1582,1584,1587,1589,1591],{"class":116,"line":201},[114,1578,288],{"class":161},[114,1580,1581],{"class":127}," handleDelete ",[114,1583,294],{"class":123},[114,1585,1586],{"class":161}," async",[114,1588,451],{"class":123},[114,1590,266],{"class":161},[114,1592,172],{"class":123},[114,1594,1595,1598,1601,1603,1606,1608,1610],{"class":116,"line":213},[114,1596,1597],{"class":161},"  const",[114,1599,1600],{"class":127}," result",[114,1602,169],{"class":123},[114,1604,1605],{"class":119}," await",[114,1607,470],{"class":297},[114,1609,378],{"class":178},[114,1611,1612],{"class":123},"{\n",[114,1614,1615,1617,1619,1621,1624,1626],{"class":116,"line":225},[114,1616,190],{"class":178},[114,1618,182],{"class":123},[114,1620,137],{"class":123},[114,1622,1623],{"class":140},"Confirm Deletion",[114,1625,144],{"class":123},[114,1627,1628],{"class":123},",\n",[114,1630,1631,1633,1635,1637,1640,1642],{"class":116,"line":237},[114,1632,204],{"class":178},[114,1634,182],{"class":123},[114,1636,137],{"class":123},[114,1638,1639],{"class":140},"Are you sure you want to delete this item?",[114,1641,144],{"class":123},[114,1643,1628],{"class":123},[114,1645,1646,1648,1650,1652,1655,1657],{"class":116,"line":243},[114,1647,216],{"class":178},[114,1649,182],{"class":123},[114,1651,137],{"class":123},[114,1653,1654],{"class":140},"Delete",[114,1656,144],{"class":123},[114,1658,1628],{"class":123},[114,1660,1661,1663,1665,1667,1670,1672],{"class":116,"line":274},[114,1662,228],{"class":178},[114,1664,182],{"class":123},[114,1666,137],{"class":123},[114,1668,1669],{"class":140},"Cancel",[114,1671,144],{"class":123},[114,1673,1628],{"class":123},[114,1675,1676,1678,1680],{"class":116,"line":280},[114,1677,421],{"class":123},[114,1679,263],{"class":178},[114,1681,147],{"class":123},[114,1683,1684,1687,1689,1692,1695],{"class":116,"line":285},[114,1685,1686],{"class":119},"  if",[114,1688,251],{"class":178},[114,1690,1691],{"class":127},"result",[114,1693,1694],{"class":178},") ",[114,1696,1612],{"class":123},[114,1698,1699],{"class":116,"line":314},[114,1700,1701],{"class":1483},"    \u002F\u002F Perform deletion\n",[114,1703,1704],{"class":116,"line":319},[114,1705,1706],{"class":123},"  }\n",[114,1708,1709],{"class":116,"line":367},[114,1710,277],{"class":123},[114,1712,1713,1715,1717],{"class":116,"line":391},[114,1714,672],{"class":123},[114,1716,491],{"class":178},[114,1718,508],{"class":123},[114,1720,1721],{"class":116,"line":418},[114,1722,152],{"emptyLinePlaceholder":23},[114,1724,1725,1727,1729],{"class":116,"line":428},[114,1726,300],{"class":123},[114,1728,687],{"class":178},[114,1730,508],{"class":123},[114,1732,1733,1735,1737,1739,1741,1743,1746,1748,1750,1753,1755,1757],{"class":116,"line":433},[114,1734,694],{"class":123},[114,1736,817],{"class":178},[114,1738,831],{"class":161},[114,1740,294],{"class":123},[114,1742,144],{"class":123},[114,1744,1745],{"class":140},"handleDelete",[114,1747,144],{"class":123},[114,1749,306],{"class":123},[114,1751,1752],{"class":127},"Delete Item",[114,1754,672],{"class":123},[114,1756,817],{"class":178},[114,1758,508],{"class":123},[114,1760,1761,1763,1765],{"class":116,"line":438},[114,1762,672],{"class":123},[114,1764,687],{"class":178},[114,1766,508],{"class":123},[98,1768,1770],{"label":1769},"React",[102,1771,1773,1988,2132,2838,3204,3290],{"default-value":1772},"context\u002Falert.tsx",[106,1774,1778],{"className":1775,"code":1776,"filename":1772,"language":1777,"meta":15,"style":15},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { createContext } from \"react\";\n\nexport type AlertDialogProps = {\n  data: {\n    title: string;\n    message: string;\n    confirmText?: string;\n    cancelText?: string;\n  };\n  resolve: (result: boolean) => void;\n};\n\nexport const AlertContext = createContext\u003C{\n  show: (data: AlertDialogProps[\"data\"]) => Promise\u003Cboolean>;\n}>({\n  show: async () => false,\n});\n","tsx",[57,1779,1780,1802,1806,1818,1826,1836,1846,1856,1866,1870,1892,1896,1900,1916,1954,1963,1980],{"__ignoreMap":15},[114,1781,1782,1784,1786,1789,1791,1793,1795,1798,1800],{"class":116,"line":28},[114,1783,120],{"class":119},[114,1785,124],{"class":123},[114,1787,1788],{"class":127}," createContext",[114,1790,131],{"class":123},[114,1792,134],{"class":119},[114,1794,137],{"class":123},[114,1796,1797],{"class":140},"react",[114,1799,144],{"class":123},[114,1801,147],{"class":123},[114,1803,1804],{"class":116,"line":16},[114,1805,152],{"emptyLinePlaceholder":23},[114,1807,1808,1810,1812,1814,1816],{"class":116,"line":155},[114,1809,158],{"class":119},[114,1811,162],{"class":161},[114,1813,166],{"class":165},[114,1815,169],{"class":123},[114,1817,172],{"class":123},[114,1819,1820,1822,1824],{"class":116,"line":175},[114,1821,179],{"class":178},[114,1823,182],{"class":123},[114,1825,172],{"class":123},[114,1827,1828,1830,1832,1834],{"class":116,"line":187},[114,1829,190],{"class":178},[114,1831,182],{"class":123},[114,1833,196],{"class":165},[114,1835,147],{"class":123},[114,1837,1838,1840,1842,1844],{"class":116,"line":201},[114,1839,204],{"class":178},[114,1841,182],{"class":123},[114,1843,196],{"class":165},[114,1845,147],{"class":123},[114,1847,1848,1850,1852,1854],{"class":116,"line":213},[114,1849,216],{"class":178},[114,1851,193],{"class":123},[114,1853,196],{"class":165},[114,1855,147],{"class":123},[114,1857,1858,1860,1862,1864],{"class":116,"line":225},[114,1859,228],{"class":178},[114,1861,193],{"class":123},[114,1863,196],{"class":165},[114,1865,147],{"class":123},[114,1867,1868],{"class":116,"line":237},[114,1869,240],{"class":123},[114,1871,1872,1874,1876,1878,1880,1882,1884,1886,1888,1890],{"class":116,"line":243},[114,1873,246],{"class":178},[114,1875,182],{"class":123},[114,1877,251],{"class":123},[114,1879,1691],{"class":254},[114,1881,182],{"class":123},[114,1883,260],{"class":165},[114,1885,263],{"class":123},[114,1887,266],{"class":161},[114,1889,269],{"class":165},[114,1891,147],{"class":123},[114,1893,1894],{"class":116,"line":274},[114,1895,277],{"class":123},[114,1897,1898],{"class":116,"line":280},[114,1899,152],{"emptyLinePlaceholder":23},[114,1901,1902,1904,1906,1909,1911,1913],{"class":116,"line":285},[114,1903,158],{"class":119},[114,1905,443],{"class":161},[114,1907,1908],{"class":127}," AlertContext ",[114,1910,294],{"class":123},[114,1912,1788],{"class":297},[114,1914,1915],{"class":123},"\u003C{\n",[114,1917,1918,1921,1923,1925,1927,1929,1931,1933,1935,1937,1939,1941,1943,1945,1947,1949,1951],{"class":116,"line":314},[114,1919,1920],{"class":178},"  show",[114,1922,182],{"class":123},[114,1924,251],{"class":123},[114,1926,331],{"class":254},[114,1928,182],{"class":123},[114,1930,166],{"class":165},[114,1932,338],{"class":127},[114,1934,144],{"class":123},[114,1936,331],{"class":140},[114,1938,144],{"class":123},[114,1940,347],{"class":127},[114,1942,263],{"class":123},[114,1944,266],{"class":161},[114,1946,353],{"class":165},[114,1948,300],{"class":123},[114,1950,358],{"class":165},[114,1952,1953],{"class":123},">;\n",[114,1955,1956,1959,1961],{"class":116,"line":319},[114,1957,1958],{"class":123},"}>",[114,1960,378],{"class":127},[114,1962,1612],{"class":123},[114,1964,1965,1967,1969,1971,1973,1975,1978],{"class":116,"line":367},[114,1966,1920],{"class":297},[114,1968,182],{"class":123},[114,1970,1586],{"class":161},[114,1972,451],{"class":123},[114,1974,266],{"class":161},[114,1976,1977],{"class":591}," false",[114,1979,1628],{"class":123},[114,1981,1982,1984,1986],{"class":116,"line":391},[114,1983,545],{"class":123},[114,1985,263],{"class":127},[114,1987,147],{"class":123},[106,1989,1992],{"className":108,"code":1990,"filename":1991,"language":110,"meta":15,"style":15},"import { AlertContext } from \"@\u002Fcontext\u002Falert\";\nimport { useContext } from \"react\";\n\nexport const useAlert = () => {\n  const ctx = useContext(AlertContext);\n  if (!ctx) {\n    throw new Error(\"useAlert must be used within an AlertProvider\");\n  }\n  return ctx;\n};\n","hooks\u002FuseAlert.ts",[57,1993,1994,2016,2037,2041,2057,2077,2093,2116,2120,2128],{"__ignoreMap":15},[114,1995,1996,1998,2000,2003,2005,2007,2009,2012,2014],{"class":116,"line":28},[114,1997,120],{"class":119},[114,1999,124],{"class":123},[114,2001,2002],{"class":127}," AlertContext",[114,2004,131],{"class":123},[114,2006,134],{"class":119},[114,2008,137],{"class":123},[114,2010,2011],{"class":140},"@\u002Fcontext\u002Falert",[114,2013,144],{"class":123},[114,2015,147],{"class":123},[114,2017,2018,2020,2022,2025,2027,2029,2031,2033,2035],{"class":116,"line":16},[114,2019,120],{"class":119},[114,2021,124],{"class":123},[114,2023,2024],{"class":127}," useContext",[114,2026,131],{"class":123},[114,2028,134],{"class":119},[114,2030,137],{"class":123},[114,2032,1797],{"class":140},[114,2034,144],{"class":123},[114,2036,147],{"class":123},[114,2038,2039],{"class":116,"line":155},[114,2040,152],{"emptyLinePlaceholder":23},[114,2042,2043,2045,2047,2049,2051,2053,2055],{"class":116,"line":175},[114,2044,158],{"class":119},[114,2046,443],{"class":161},[114,2048,446],{"class":127},[114,2050,294],{"class":123},[114,2052,451],{"class":123},[114,2054,266],{"class":161},[114,2056,172],{"class":123},[114,2058,2059,2061,2064,2066,2068,2070,2073,2075],{"class":116,"line":187},[114,2060,1597],{"class":161},[114,2062,2063],{"class":127}," ctx",[114,2065,169],{"class":123},[114,2067,2024],{"class":297},[114,2069,378],{"class":178},[114,2071,2072],{"class":127},"AlertContext",[114,2074,263],{"class":178},[114,2076,147],{"class":123},[114,2078,2079,2081,2083,2086,2089,2091],{"class":116,"line":201},[114,2080,1686],{"class":119},[114,2082,251],{"class":178},[114,2084,2085],{"class":123},"!",[114,2087,2088],{"class":127},"ctx",[114,2090,1694],{"class":178},[114,2092,1612],{"class":123},[114,2094,2095,2098,2100,2103,2105,2107,2110,2112,2114],{"class":116,"line":213},[114,2096,2097],{"class":119},"    throw",[114,2099,373],{"class":123},[114,2101,2102],{"class":297}," Error",[114,2104,378],{"class":178},[114,2106,144],{"class":123},[114,2108,2109],{"class":140},"useAlert must be used within an AlertProvider",[114,2111,144],{"class":123},[114,2113,263],{"class":178},[114,2115,147],{"class":123},[114,2117,2118],{"class":116,"line":225},[114,2119,1706],{"class":123},[114,2121,2122,2124,2126],{"class":116,"line":237},[114,2123,370],{"class":119},[114,2125,2063],{"class":127},[114,2127,147],{"class":123},[114,2129,2130],{"class":116,"line":243},[114,2131,277],{"class":123},[106,2133,2136],{"className":1775,"code":2134,"filename":2135,"language":1777,"meta":15,"style":15},"import { AlertContext, type AlertDialogProps } from \"@\u002Fcontext\u002Falert\";\nimport { useState } from \"react\";\nimport \".\u002FAlertDialog.css\";\n\nexport const AlertProvider = ({ children }: { children: React.ReactNode }) => {\n  const [current, setCurrent] = useState\u003CAlertDialogProps | null>(null);\n\n  const show = (data: AlertDialogProps[\"data\"]) => {\n    return new Promise\u003Cboolean>((resolve) => {\n      setCurrent({ data, resolve });\n    });\n  };\n\n  const handleCancel = () => {\n    current?.resolve(false);\n    setCurrent(null);\n  };\n\n  const handleConfirm = () => {\n    current?.resolve(true);\n    setCurrent(null);\n  };\n\n  return (\n    \u003CAlertContext.Provider value={{ show }}>\n      {children}\n      {current && (\n        \u003Cdiv className=\"dialog-backdrop\">\n          \u003Cdiv className=\"dialog\">\n            {current.data.title && \u003Ch3>{current.data.title}\u003C\u002Fh3>}\n            \u003Cp>{current.data.message}\u003C\u002Fp>\n            \u003Cdiv className=\"dialog-actions\">\n              \u003Cbutton className=\"dialog-btn\" onClick={handleCancel}>\n                {current.data.cancelText || \"Cancel\"}\n              \u003C\u002Fbutton>\n              \u003Cbutton className=\"dialog-btn dialog-btn-primary\" onClick={handleConfirm}>\n                {current.data.confirmText || \"OK\"}\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      )}\n    \u003C\u002FAlertContext.Provider>\n  );\n};\n","providers\u002FAlertProvider.tsx",[57,2137,2138,2164,2185,2198,2202,2243,2285,2289,2321,2348,2370,2379,2383,2387,2402,2418,2431,2435,2439,2454,2470,2482,2486,2490,2497,2515,2525,2537,2556,2575,2620,2646,2664,2692,2719,2728,2752,2778,2786,2795,2804,2812,2819,2827,2834],{"__ignoreMap":15},[114,2139,2140,2142,2144,2146,2148,2150,2152,2154,2156,2158,2160,2162],{"class":116,"line":28},[114,2141,120],{"class":119},[114,2143,124],{"class":123},[114,2145,2002],{"class":127},[114,2147,409],{"class":123},[114,2149,162],{"class":119},[114,2151,166],{"class":127},[114,2153,131],{"class":123},[114,2155,134],{"class":119},[114,2157,137],{"class":123},[114,2159,2011],{"class":140},[114,2161,144],{"class":123},[114,2163,147],{"class":123},[114,2165,2166,2168,2170,2173,2175,2177,2179,2181,2183],{"class":116,"line":16},[114,2167,120],{"class":119},[114,2169,124],{"class":123},[114,2171,2172],{"class":127}," useState",[114,2174,131],{"class":123},[114,2176,134],{"class":119},[114,2178,137],{"class":123},[114,2180,1797],{"class":140},[114,2182,144],{"class":123},[114,2184,147],{"class":123},[114,2186,2187,2189,2191,2194,2196],{"class":116,"line":155},[114,2188,120],{"class":119},[114,2190,137],{"class":123},[114,2192,2193],{"class":140},".\u002FAlertDialog.css",[114,2195,144],{"class":123},[114,2197,147],{"class":123},[114,2199,2200],{"class":116,"line":175},[114,2201,152],{"emptyLinePlaceholder":23},[114,2203,2204,2206,2208,2211,2213,2216,2219,2222,2224,2226,2228,2231,2233,2236,2239,2241],{"class":116,"line":187},[114,2205,158],{"class":119},[114,2207,443],{"class":161},[114,2209,2210],{"class":127}," AlertProvider ",[114,2212,294],{"class":123},[114,2214,2215],{"class":123}," ({",[114,2217,2218],{"class":254}," children",[114,2220,2221],{"class":123}," }:",[114,2223,124],{"class":123},[114,2225,2218],{"class":178},[114,2227,182],{"class":123},[114,2229,2230],{"class":165}," React",[114,2232,397],{"class":123},[114,2234,2235],{"class":165},"ReactNode",[114,2237,2238],{"class":123}," })",[114,2240,266],{"class":161},[114,2242,172],{"class":123},[114,2244,2245,2247,2250,2253,2255,2258,2260,2262,2264,2266,2268,2271,2274,2276,2278,2281,2283],{"class":116,"line":201},[114,2246,1597],{"class":161},[114,2248,2249],{"class":123}," [",[114,2251,2252],{"class":127},"current",[114,2254,409],{"class":123},[114,2256,2257],{"class":127}," setCurrent",[114,2259,347],{"class":123},[114,2261,169],{"class":123},[114,2263,2172],{"class":297},[114,2265,300],{"class":123},[114,2267,303],{"class":165},[114,2269,2270],{"class":123}," |",[114,2272,2273],{"class":165}," null",[114,2275,306],{"class":123},[114,2277,378],{"class":178},[114,2279,2280],{"class":123},"null",[114,2282,263],{"class":178},[114,2284,147],{"class":123},[114,2286,2287],{"class":116,"line":213},[114,2288,152],{"emptyLinePlaceholder":23},[114,2290,2291,2293,2295,2297,2299,2301,2303,2305,2307,2309,2311,2313,2315,2317,2319],{"class":116,"line":225},[114,2292,1597],{"class":161},[114,2294,470],{"class":127},[114,2296,169],{"class":123},[114,2298,251],{"class":123},[114,2300,331],{"class":254},[114,2302,182],{"class":123},[114,2304,166],{"class":165},[114,2306,338],{"class":178},[114,2308,144],{"class":123},[114,2310,331],{"class":140},[114,2312,144],{"class":123},[114,2314,347],{"class":178},[114,2316,263],{"class":123},[114,2318,266],{"class":161},[114,2320,172],{"class":123},[114,2322,2323,2326,2328,2330,2332,2334,2336,2338,2340,2342,2344,2346],{"class":116,"line":237},[114,2324,2325],{"class":119},"    return",[114,2327,373],{"class":123},[114,2329,353],{"class":165},[114,2331,300],{"class":123},[114,2333,358],{"class":165},[114,2335,306],{"class":123},[114,2337,378],{"class":178},[114,2339,378],{"class":123},[114,2341,82],{"class":254},[114,2343,263],{"class":123},[114,2345,266],{"class":161},[114,2347,172],{"class":123},[114,2349,2350,2353,2355,2358,2360,2362,2364,2366,2368],{"class":116,"line":243},[114,2351,2352],{"class":297},"      setCurrent",[114,2354,378],{"class":178},[114,2356,2357],{"class":123},"{",[114,2359,406],{"class":127},[114,2361,409],{"class":123},[114,2363,412],{"class":127},[114,2365,131],{"class":123},[114,2367,263],{"class":178},[114,2369,147],{"class":123},[114,2371,2372,2375,2377],{"class":116,"line":274},[114,2373,2374],{"class":123},"    }",[114,2376,263],{"class":178},[114,2378,147],{"class":123},[114,2380,2381],{"class":116,"line":280},[114,2382,240],{"class":123},[114,2384,2385],{"class":116,"line":285},[114,2386,152],{"emptyLinePlaceholder":23},[114,2388,2389,2391,2394,2396,2398,2400],{"class":116,"line":314},[114,2390,1597],{"class":161},[114,2392,2393],{"class":127}," handleCancel",[114,2395,169],{"class":123},[114,2397,451],{"class":123},[114,2399,266],{"class":161},[114,2401,172],{"class":123},[114,2403,2404,2406,2408,2410,2412,2414,2416],{"class":116,"line":319},[114,2405,394],{"class":127},[114,2407,584],{"class":123},[114,2409,82],{"class":297},[114,2411,378],{"class":178},[114,2413,75],{"class":591},[114,2415,263],{"class":178},[114,2417,147],{"class":123},[114,2419,2420,2423,2425,2427,2429],{"class":116,"line":367},[114,2421,2422],{"class":297},"    setCurrent",[114,2424,378],{"class":178},[114,2426,2280],{"class":123},[114,2428,263],{"class":178},[114,2430,147],{"class":123},[114,2432,2433],{"class":116,"line":391},[114,2434,240],{"class":123},[114,2436,2437],{"class":116,"line":418},[114,2438,152],{"emptyLinePlaceholder":23},[114,2440,2441,2443,2446,2448,2450,2452],{"class":116,"line":428},[114,2442,1597],{"class":161},[114,2444,2445],{"class":127}," handleConfirm",[114,2447,169],{"class":123},[114,2449,451],{"class":123},[114,2451,266],{"class":161},[114,2453,172],{"class":123},[114,2455,2456,2458,2460,2462,2464,2466,2468],{"class":116,"line":433},[114,2457,394],{"class":127},[114,2459,584],{"class":123},[114,2461,82],{"class":297},[114,2463,378],{"class":178},[114,2465,71],{"class":591},[114,2467,263],{"class":178},[114,2469,147],{"class":123},[114,2471,2472,2474,2476,2478,2480],{"class":116,"line":438},[114,2473,2422],{"class":297},[114,2475,378],{"class":178},[114,2477,2280],{"class":123},[114,2479,263],{"class":178},[114,2481,147],{"class":123},[114,2483,2484],{"class":116,"line":458},[114,2485,240],{"class":123},[114,2487,2488],{"class":116,"line":475},[114,2489,152],{"emptyLinePlaceholder":23},[114,2491,2492,2494],{"class":116,"line":845},[114,2493,370],{"class":119},[114,2495,2496],{"class":178}," (\n",[114,2498,2499,2501,2504,2507,2510,2512],{"class":116,"line":851},[114,2500,728],{"class":123},[114,2502,2503],{"class":165},"AlertContext.Provider",[114,2505,2506],{"class":161}," value",[114,2508,2509],{"class":123},"={{",[114,2511,324],{"class":127},[114,2513,2514],{"class":123},"}}>\n",[114,2516,2517,2520,2523],{"class":116,"line":861},[114,2518,2519],{"class":123},"      {",[114,2521,2522],{"class":127},"children",[114,2524,1087],{"class":123},[114,2526,2527,2529,2532,2535],{"class":116,"line":892},[114,2528,2519],{"class":123},[114,2530,2531],{"class":127},"current ",[114,2533,2534],{"class":123},"&&",[114,2536,2496],{"class":127},[114,2538,2539,2541,2543,2546,2548,2550,2552,2554],{"class":116,"line":898},[114,2540,814],{"class":123},[114,2542,697],{"class":178},[114,2544,2545],{"class":161}," className",[114,2547,294],{"class":123},[114,2549,144],{"class":123},[114,2551,719],{"class":140},[114,2553,144],{"class":123},[114,2555,508],{"class":123},[114,2557,2558,2561,2563,2565,2567,2569,2571,2573],{"class":116,"line":907},[114,2559,2560],{"class":123},"          \u003C",[114,2562,697],{"class":178},[114,2564,2545],{"class":161},[114,2566,294],{"class":123},[114,2568,144],{"class":123},[114,2570,739],{"class":140},[114,2572,144],{"class":123},[114,2574,508],{"class":123},[114,2576,2577,2580,2582,2584,2586,2588,2591,2593,2596,2598,2601,2603,2605,2607,2609,2612,2615,2617],{"class":116,"line":917},[114,2578,2579],{"class":123},"            {",[114,2581,2252],{"class":127},[114,2583,397],{"class":123},[114,2585,331],{"class":127},[114,2587,397],{"class":123},[114,2589,2590],{"class":127},"title ",[114,2592,2534],{"class":123},[114,2594,2595],{"class":123}," \u003C",[114,2597,751],{"class":178},[114,2599,2600],{"class":123},">{",[114,2602,2252],{"class":127},[114,2604,397],{"class":123},[114,2606,331],{"class":127},[114,2608,397],{"class":123},[114,2610,2611],{"class":127},"title",[114,2613,2614],{"class":123},"}\u003C\u002F",[114,2616,751],{"class":178},[114,2618,2619],{"class":123},">}\n",[114,2621,2622,2625,2627,2629,2631,2633,2635,2637,2640,2642,2644],{"class":116,"line":927},[114,2623,2624],{"class":123},"            \u003C",[114,2626,11],{"class":178},[114,2628,2600],{"class":123},[114,2630,2252],{"class":127},[114,2632,397],{"class":123},[114,2634,331],{"class":127},[114,2636,397],{"class":123},[114,2638,2639],{"class":127},"message",[114,2641,2614],{"class":123},[114,2643,11],{"class":178},[114,2645,508],{"class":123},[114,2647,2648,2650,2652,2654,2656,2658,2660,2662],{"class":116,"line":937},[114,2649,2624],{"class":123},[114,2651,697],{"class":178},[114,2653,2545],{"class":161},[114,2655,294],{"class":123},[114,2657,144],{"class":123},[114,2659,805],{"class":140},[114,2661,144],{"class":123},[114,2663,508],{"class":123},[114,2665,2666,2669,2671,2673,2675,2677,2679,2681,2684,2687,2689],{"class":116,"line":946},[114,2667,2668],{"class":123},"              \u003C",[114,2670,817],{"class":178},[114,2672,2545],{"class":161},[114,2674,294],{"class":123},[114,2676,144],{"class":123},[114,2678,826],{"class":140},[114,2680,144],{"class":123},[114,2682,2683],{"class":161}," onClick",[114,2685,2686],{"class":123},"={",[114,2688,838],{"class":127},[114,2690,2691],{"class":123},"}>\n",[114,2693,2694,2697,2699,2701,2703,2705,2708,2711,2713,2715,2717],{"class":116,"line":951},[114,2695,2696],{"class":123},"                {",[114,2698,2252],{"class":127},[114,2700,397],{"class":123},[114,2702,331],{"class":127},[114,2704,397],{"class":123},[114,2706,2707],{"class":127},"cancelText ",[114,2709,2710],{"class":123},"||",[114,2712,137],{"class":123},[114,2714,1669],{"class":140},[114,2716,144],{"class":123},[114,2718,1087],{"class":123},[114,2720,2721,2724,2726],{"class":116,"line":964},[114,2722,2723],{"class":123},"              \u003C\u002F",[114,2725,817],{"class":178},[114,2727,508],{"class":123},[114,2729,2730,2732,2734,2736,2738,2740,2742,2744,2746,2748,2750],{"class":116,"line":973},[114,2731,2668],{"class":123},[114,2733,817],{"class":178},[114,2735,2545],{"class":161},[114,2737,294],{"class":123},[114,2739,144],{"class":123},[114,2741,874],{"class":140},[114,2743,144],{"class":123},[114,2745,2683],{"class":161},[114,2747,2686],{"class":123},[114,2749,885],{"class":127},[114,2751,2691],{"class":123},[114,2753,2754,2756,2758,2760,2762,2764,2767,2769,2771,2774,2776],{"class":116,"line":987},[114,2755,2696],{"class":123},[114,2757,2252],{"class":127},[114,2759,397],{"class":123},[114,2761,331],{"class":127},[114,2763,397],{"class":123},[114,2765,2766],{"class":127},"confirmText ",[114,2768,2710],{"class":123},[114,2770,137],{"class":123},[114,2772,2773],{"class":140},"OK",[114,2775,144],{"class":123},[114,2777,1087],{"class":123},[114,2779,2780,2782,2784],{"class":116,"line":1001},[114,2781,2723],{"class":123},[114,2783,817],{"class":178},[114,2785,508],{"class":123},[114,2787,2788,2791,2793],{"class":116,"line":1033},[114,2789,2790],{"class":123},"            \u003C\u002F",[114,2792,697],{"class":178},[114,2794,508],{"class":123},[114,2796,2797,2800,2802],{"class":116,"line":1046},[114,2798,2799],{"class":123},"          \u003C\u002F",[114,2801,697],{"class":178},[114,2803,508],{"class":123},[114,2805,2806,2808,2810],{"class":116,"line":1059},[114,2807,854],{"class":123},[114,2809,697],{"class":178},[114,2811,508],{"class":123},[114,2813,2814,2817],{"class":116,"line":1071},[114,2815,2816],{"class":127},"      )",[114,2818,1087],{"class":123},[114,2820,2821,2823,2825],{"class":116,"line":1084},[114,2822,920],{"class":123},[114,2824,2503],{"class":165},[114,2826,508],{"class":123},[114,2828,2829,2832],{"class":116,"line":1090},[114,2830,2831],{"class":178},"  )",[114,2833,147],{"class":123},[114,2835,2836],{"class":116,"line":1099},[114,2837,277],{"class":123},[106,2839,2844],{"className":2840,"code":2841,"filename":2842,"language":2843,"meta":15,"style":15},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".dialog-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n.dialog {\n  background: #fff;\n  border-radius: 8px;\n  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);\n  padding: 2rem;\n  min-width: 320px;\n  max-width: 90vw;\n}\n.dialog-actions {\n  display: flex;\n  gap: 1rem;\n  margin-top: 2rem;\n  justify-content: flex-end;\n}\n.dialog-btn {\n  padding: 0.5rem 1.5rem;\n  border-radius: 4px;\n  border: none;\n  background: #eee;\n  cursor: pointer;\n  font-size: 1rem;\n}\n.dialog-btn-primary {\n  background: #007bff;\n  color: #fff;\n}\n","providers\u002FAlertDialog.css","css",[57,2845,2846,2854,2864,2874,2900,2910,2920,2930,2940,2944,2952,2964,2974,3006,3016,3026,3036,3040,3048,3058,3068,3078,3088,3092,3100,3112,3122,3132,3144,3154,3164,3168,3176,3188,3200],{"__ignoreMap":15},[114,2847,2848,2850,2852],{"class":116,"line":28},[114,2849,397],{"class":123},[114,2851,719],{"class":165},[114,2853,172],{"class":123},[114,2855,2856,2858,2860,2862],{"class":116,"line":16},[114,2857,977],{"class":976},[114,2859,182],{"class":123},[114,2861,982],{"class":127},[114,2863,147],{"class":123},[114,2865,2866,2868,2870,2872],{"class":116,"line":155},[114,2867,990],{"class":976},[114,2869,182],{"class":123},[114,2871,996],{"class":995},[114,2873,147],{"class":123},[114,2875,2876,2878,2880,2882,2884,2886,2888,2890,2892,2894,2896,2898],{"class":116,"line":175},[114,2877,1004],{"class":976},[114,2879,182],{"class":123},[114,2881,1009],{"class":297},[114,2883,378],{"class":123},[114,2885,1014],{"class":995},[114,2887,409],{"class":123},[114,2889,996],{"class":995},[114,2891,409],{"class":123},[114,2893,996],{"class":995},[114,2895,409],{"class":123},[114,2897,1027],{"class":995},[114,2899,1030],{"class":123},[114,2901,2902,2904,2906,2908],{"class":116,"line":187},[114,2903,1036],{"class":976},[114,2905,182],{"class":123},[114,2907,1041],{"class":127},[114,2909,147],{"class":123},[114,2911,2912,2914,2916,2918],{"class":116,"line":201},[114,2913,1049],{"class":976},[114,2915,182],{"class":123},[114,2917,1054],{"class":127},[114,2919,147],{"class":123},[114,2921,2922,2924,2926,2928],{"class":116,"line":213},[114,2923,1062],{"class":976},[114,2925,182],{"class":123},[114,2927,1054],{"class":127},[114,2929,147],{"class":123},[114,2931,2932,2934,2936,2938],{"class":116,"line":225},[114,2933,1074],{"class":976},[114,2935,182],{"class":123},[114,2937,1079],{"class":995},[114,2939,147],{"class":123},[114,2941,2942],{"class":116,"line":237},[114,2943,1087],{"class":123},[114,2945,2946,2948,2950],{"class":116,"line":243},[114,2947,397],{"class":123},[114,2949,739],{"class":165},[114,2951,172],{"class":123},[114,2953,2954,2956,2958,2960,2962],{"class":116,"line":274},[114,2955,1004],{"class":976},[114,2957,182],{"class":123},[114,2959,1106],{"class":123},[114,2961,1109],{"class":127},[114,2963,147],{"class":123},[114,2965,2966,2968,2970,2972],{"class":116,"line":280},[114,2967,1117],{"class":976},[114,2969,182],{"class":123},[114,2971,1122],{"class":995},[114,2973,147],{"class":123},[114,2975,2976,2978,2980,2982,2984,2986,2988,2990,2992,2994,2996,2998,3000,3002,3004],{"class":116,"line":285},[114,2977,1130],{"class":976},[114,2979,182],{"class":123},[114,2981,996],{"class":995},[114,2983,1137],{"class":995},[114,2985,1140],{"class":995},[114,2987,1009],{"class":297},[114,2989,378],{"class":123},[114,2991,1014],{"class":995},[114,2993,409],{"class":123},[114,2995,996],{"class":995},[114,2997,409],{"class":123},[114,2999,996],{"class":995},[114,3001,409],{"class":123},[114,3003,1159],{"class":995},[114,3005,1030],{"class":123},[114,3007,3008,3010,3012,3014],{"class":116,"line":314},[114,3009,1167],{"class":976},[114,3011,182],{"class":123},[114,3013,1172],{"class":995},[114,3015,147],{"class":123},[114,3017,3018,3020,3022,3024],{"class":116,"line":319},[114,3019,1180],{"class":976},[114,3021,182],{"class":123},[114,3023,1185],{"class":995},[114,3025,147],{"class":123},[114,3027,3028,3030,3032,3034],{"class":116,"line":367},[114,3029,1193],{"class":976},[114,3031,182],{"class":123},[114,3033,1198],{"class":995},[114,3035,147],{"class":123},[114,3037,3038],{"class":116,"line":391},[114,3039,1087],{"class":123},[114,3041,3042,3044,3046],{"class":116,"line":418},[114,3043,397],{"class":123},[114,3045,805],{"class":165},[114,3047,172],{"class":123},[114,3049,3050,3052,3054,3056],{"class":116,"line":428},[114,3051,1036],{"class":976},[114,3053,182],{"class":123},[114,3055,1041],{"class":127},[114,3057,147],{"class":123},[114,3059,3060,3062,3064,3066],{"class":116,"line":433},[114,3061,1231],{"class":976},[114,3063,182],{"class":123},[114,3065,1236],{"class":995},[114,3067,147],{"class":123},[114,3069,3070,3072,3074,3076],{"class":116,"line":438},[114,3071,1244],{"class":976},[114,3073,182],{"class":123},[114,3075,1172],{"class":995},[114,3077,147],{"class":123},[114,3079,3080,3082,3084,3086],{"class":116,"line":458},[114,3081,1062],{"class":976},[114,3083,182],{"class":123},[114,3085,1260],{"class":127},[114,3087,147],{"class":123},[114,3089,3090],{"class":116,"line":475},[114,3091,1087],{"class":123},[114,3093,3094,3096,3098],{"class":116,"line":845},[114,3095,397],{"class":123},[114,3097,826],{"class":165},[114,3099,172],{"class":123},[114,3101,3102,3104,3106,3108,3110],{"class":116,"line":851},[114,3103,1167],{"class":976},[114,3105,182],{"class":123},[114,3107,1286],{"class":995},[114,3109,1289],{"class":995},[114,3111,147],{"class":123},[114,3113,3114,3116,3118,3120],{"class":116,"line":861},[114,3115,1117],{"class":976},[114,3117,182],{"class":123},[114,3119,1301],{"class":995},[114,3121,147],{"class":123},[114,3123,3124,3126,3128,3130],{"class":116,"line":892},[114,3125,1309],{"class":976},[114,3127,182],{"class":123},[114,3129,1314],{"class":127},[114,3131,147],{"class":123},[114,3133,3134,3136,3138,3140,3142],{"class":116,"line":898},[114,3135,1004],{"class":976},[114,3137,182],{"class":123},[114,3139,1106],{"class":123},[114,3141,1328],{"class":127},[114,3143,147],{"class":123},[114,3145,3146,3148,3150,3152],{"class":116,"line":907},[114,3147,1336],{"class":976},[114,3149,182],{"class":123},[114,3151,1341],{"class":127},[114,3153,147],{"class":123},[114,3155,3156,3158,3160,3162],{"class":116,"line":917},[114,3157,1349],{"class":976},[114,3159,182],{"class":123},[114,3161,1236],{"class":995},[114,3163,147],{"class":123},[114,3165,3166],{"class":116,"line":927},[114,3167,1087],{"class":123},[114,3169,3170,3172,3174],{"class":116,"line":937},[114,3171,397],{"class":123},[114,3173,1368],{"class":165},[114,3175,172],{"class":123},[114,3177,3178,3180,3182,3184,3186],{"class":116,"line":946},[114,3179,1004],{"class":976},[114,3181,182],{"class":123},[114,3183,1106],{"class":123},[114,3185,1382],{"class":127},[114,3187,147],{"class":123},[114,3189,3190,3192,3194,3196,3198],{"class":116,"line":951},[114,3191,1390],{"class":976},[114,3193,182],{"class":123},[114,3195,1106],{"class":123},[114,3197,1109],{"class":127},[114,3199,147],{"class":123},[114,3201,3202],{"class":116,"line":964},[114,3203,1087],{"class":123},[106,3205,3208],{"className":1775,"code":3206,"filename":3207,"language":1777,"meta":15,"style":15},"import { AlertProvider } from \"@\u002Fproviders\u002FAlertProvider\";\n\nfunction App() {\n  return (\n    \u003CAlertProvider>\n      {\u002F* Rest of your app *\u002F}\n    \u003C\u002FAlertProvider>\n  );\n}\n","app.tsx",[57,3209,3210,3232,3236,3248,3254,3263,3272,3280,3286],{"__ignoreMap":15},[114,3211,3212,3214,3216,3219,3221,3223,3225,3228,3230],{"class":116,"line":28},[114,3213,120],{"class":119},[114,3215,124],{"class":123},[114,3217,3218],{"class":127}," AlertProvider",[114,3220,131],{"class":123},[114,3222,134],{"class":119},[114,3224,137],{"class":123},[114,3226,3227],{"class":140},"@\u002Fproviders\u002FAlertProvider",[114,3229,144],{"class":123},[114,3231,147],{"class":123},[114,3233,3234],{"class":116,"line":16},[114,3235,152],{"emptyLinePlaceholder":23},[114,3237,3238,3241,3244,3246],{"class":116,"line":155},[114,3239,3240],{"class":161},"function",[114,3242,3243],{"class":297}," App",[114,3245,309],{"class":123},[114,3247,172],{"class":123},[114,3249,3250,3252],{"class":116,"line":175},[114,3251,370],{"class":119},[114,3253,2496],{"class":178},[114,3255,3256,3258,3261],{"class":116,"line":187},[114,3257,728],{"class":123},[114,3259,3260],{"class":165},"AlertProvider",[114,3262,508],{"class":123},[114,3264,3265,3267,3270],{"class":116,"line":201},[114,3266,2519],{"class":123},[114,3268,3269],{"class":1483},"\u002F* Rest of your app *\u002F",[114,3271,1087],{"class":123},[114,3273,3274,3276,3278],{"class":116,"line":213},[114,3275,920],{"class":123},[114,3277,3260],{"class":165},[114,3279,508],{"class":123},[114,3281,3282,3284],{"class":116,"line":225},[114,3283,2831],{"class":178},[114,3285,147],{"class":123},[114,3287,3288],{"class":116,"line":237},[114,3289,1087],{"class":123},[106,3291,3294],{"className":1775,"code":3292,"filename":3293,"language":1777,"meta":15,"style":15},"import { useAlert } from \"@\u002Fhooks\u002FuseAlert\";\n\nconst SomeComponent = () => {\n  const { show } = useAlert();\n\n  const handleDelete = async () => {\n    const result = await show({\n      title: \"Confirm Deletion\",\n      message: \"Are you sure you want to delete this item?\",\n      confirmText: \"Delete\",\n      cancelText: \"Cancel\",\n    });\n    if (result) {\n      \u002F\u002F Perform deletion\n    }\n  };\n\n  return \u003Cbutton onClick={handleDelete}>Delete Item\u003C\u002Fbutton>;\n};\n\nexport default SomeComponent;\n","components\u002FSomeComponent.tsx",[57,3295,3296,3317,3321,3336,3354,3358,3375,3392,3407,3422,3437,3452,3460,3473,3478,3483,3487,3491,3515,3519,3523],{"__ignoreMap":15},[114,3297,3298,3300,3302,3304,3306,3308,3310,3313,3315],{"class":116,"line":28},[114,3299,120],{"class":119},[114,3301,124],{"class":123},[114,3303,517],{"class":127},[114,3305,131],{"class":123},[114,3307,134],{"class":119},[114,3309,137],{"class":123},[114,3311,3312],{"class":140},"@\u002Fhooks\u002FuseAlert",[114,3314,144],{"class":123},[114,3316,147],{"class":123},[114,3318,3319],{"class":116,"line":16},[114,3320,152],{"emptyLinePlaceholder":23},[114,3322,3323,3325,3328,3330,3332,3334],{"class":116,"line":155},[114,3324,288],{"class":161},[114,3326,3327],{"class":127}," SomeComponent ",[114,3329,294],{"class":123},[114,3331,451],{"class":123},[114,3333,266],{"class":161},[114,3335,172],{"class":123},[114,3337,3338,3340,3342,3344,3346,3348,3350,3352],{"class":116,"line":175},[114,3339,1597],{"class":161},[114,3341,124],{"class":123},[114,3343,470],{"class":127},[114,3345,131],{"class":123},[114,3347,169],{"class":123},[114,3349,517],{"class":297},[114,3351,309],{"class":178},[114,3353,147],{"class":123},[114,3355,3356],{"class":116,"line":187},[114,3357,152],{"emptyLinePlaceholder":23},[114,3359,3360,3362,3365,3367,3369,3371,3373],{"class":116,"line":201},[114,3361,1597],{"class":161},[114,3363,3364],{"class":127}," handleDelete",[114,3366,169],{"class":123},[114,3368,1586],{"class":161},[114,3370,451],{"class":123},[114,3372,266],{"class":161},[114,3374,172],{"class":123},[114,3376,3377,3380,3382,3384,3386,3388,3390],{"class":116,"line":213},[114,3378,3379],{"class":161},"    const",[114,3381,1600],{"class":127},[114,3383,169],{"class":123},[114,3385,1605],{"class":119},[114,3387,470],{"class":297},[114,3389,378],{"class":178},[114,3391,1612],{"class":123},[114,3393,3394,3397,3399,3401,3403,3405],{"class":116,"line":225},[114,3395,3396],{"class":178},"      title",[114,3398,182],{"class":123},[114,3400,137],{"class":123},[114,3402,1623],{"class":140},[114,3404,144],{"class":123},[114,3406,1628],{"class":123},[114,3408,3409,3412,3414,3416,3418,3420],{"class":116,"line":237},[114,3410,3411],{"class":178},"      message",[114,3413,182],{"class":123},[114,3415,137],{"class":123},[114,3417,1639],{"class":140},[114,3419,144],{"class":123},[114,3421,1628],{"class":123},[114,3423,3424,3427,3429,3431,3433,3435],{"class":116,"line":243},[114,3425,3426],{"class":178},"      confirmText",[114,3428,182],{"class":123},[114,3430,137],{"class":123},[114,3432,1654],{"class":140},[114,3434,144],{"class":123},[114,3436,1628],{"class":123},[114,3438,3439,3442,3444,3446,3448,3450],{"class":116,"line":274},[114,3440,3441],{"class":178},"      cancelText",[114,3443,182],{"class":123},[114,3445,137],{"class":123},[114,3447,1669],{"class":140},[114,3449,144],{"class":123},[114,3451,1628],{"class":123},[114,3453,3454,3456,3458],{"class":116,"line":280},[114,3455,2374],{"class":123},[114,3457,263],{"class":178},[114,3459,147],{"class":123},[114,3461,3462,3465,3467,3469,3471],{"class":116,"line":285},[114,3463,3464],{"class":119},"    if",[114,3466,251],{"class":178},[114,3468,1691],{"class":127},[114,3470,1694],{"class":178},[114,3472,1612],{"class":123},[114,3474,3475],{"class":116,"line":314},[114,3476,3477],{"class":1483},"      \u002F\u002F Perform deletion\n",[114,3479,3480],{"class":116,"line":319},[114,3481,3482],{"class":123},"    }\n",[114,3484,3485],{"class":116,"line":367},[114,3486,240],{"class":123},[114,3488,3489],{"class":116,"line":391},[114,3490,152],{"emptyLinePlaceholder":23},[114,3492,3493,3495,3497,3499,3501,3503,3505,3507,3509,3511,3513],{"class":116,"line":418},[114,3494,370],{"class":119},[114,3496,2595],{"class":123},[114,3498,817],{"class":178},[114,3500,2683],{"class":161},[114,3502,2686],{"class":123},[114,3504,1745],{"class":127},[114,3506,1958],{"class":123},[114,3508,1752],{"class":127},[114,3510,672],{"class":123},[114,3512,817],{"class":178},[114,3514,1953],{"class":123},[114,3516,3517],{"class":116,"line":428},[114,3518,277],{"class":123},[114,3520,3521],{"class":116,"line":433},[114,3522,152],{"emptyLinePlaceholder":23},[114,3524,3525,3527,3530,3533],{"class":116,"line":438},[114,3526,158],{"class":119},[114,3528,3529],{"class":119}," default",[114,3531,3532],{"class":127}," SomeComponent",[114,3534,147],{"class":123},[11,3536,3537,3538,3540,3541],{},"And that's it. One shared piece of state, one Promise, and you've got a reusable confirmation dialog you can call from anywhere in your app with a single await.\nThe pattern scales well too, you can extend ",[57,3539,303],{}," to support different dialog types (info, warning, destructive) or custom actions, without changing how you call it. The API stays the same: ",[57,3542,3543],{},"await show(...)",[956,3545,3546],{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}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":15,"searchDepth":16,"depth":16,"links":3548},[],"2026-01-05","A reusable alert dialog implementation in both Vue and React using a Promise-based approach for easy integration across your app.","..\u002F..\u002Fassets\u002Fimages\u002Falert-dialog.webp",{"slug":3553},"reusable-alert-dialog-vue-react","\u002Fblog\u002Freusable-alert-dialog-vue-react",{"title":35,"description":3550},{"loc":3554},"blog\u002Freusable-alert-dialog-vue-react",[3559,1769,3560],"Vue","Patterns","uLJdIpzcSia3cWEZnugMnZeykbONJ0DfOQ_xd3SobL0",1782856825835]