[{"data":1,"prerenderedAt":3773},["ShallowReactive",2],{"navigation_docs":3,"-recipes-nested-flows":188,"-recipes-nested-flows-surround":3768},[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":123,"body":190,"description":3762,"extension":3763,"links":3764,"meta":3765,"navigation":283,"path":124,"seo":3766,"stem":125,"__hash__":3767},"docs\u002F5.recipes\u002F5.nested-flows.md",{"type":191,"value":192,"toc":3750},"minimark",[193,197,201,227,232,349,505,509,520,2861,2865,2880,2887,2890,2899,2909,3058,3258,3523,3527,3542,3546,3549,3651,3654,3658,3726,3730,3746],[194,195,123],"h1",{"id":196},"nested-flows-wizards",[198,199,200],"p",{},"A common product pattern: a dialog that walks the user through several steps before submitting. This recipe shows two approaches:",[202,203,204,217],"ol",{},[205,206,207,211,212,216],"li",{},[208,209,210],"strong",{},"Replace"," — each step replaces the previous with ",[213,214,215],"code",{},"replaceModal + instantEnter: true",". One modal instance at a time. Best for linear wizards.",[205,218,219,222,223,226],{},[208,220,221],{},"Stack"," — each step opens on top of the previous with ",[213,224,225],{},"openModal",". Previous steps stay mounted. Best for branching flows where the user might go back.",[228,229,231],"h2",{"id":230},"group-registration","Group registration",[233,234,240],"pre",{"className":235,"code":236,"filename":237,"language":238,"meta":239,"style":239},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import type { DefineGroups } from '@kolirt\u002Fvue-modal'\n\ndeclare module '@kolirt\u002Fvue-modal' {\n  interface ModalGroupRegistry extends DefineGroups\u003C['wizard']> {}\n}\n","main.ts","ts","",[213,241,242,278,285,305,343],{"__ignoreMap":239},[243,244,247,251,254,258,262,265,268,271,275],"span",{"class":245,"line":246},"line",1,[243,248,250],{"class":249},"s7zQu","import",[243,252,253],{"class":249}," type",[243,255,257],{"class":256},"sMK4o"," {",[243,259,261],{"class":260},"sTEyZ"," DefineGroups",[243,263,264],{"class":256}," }",[243,266,267],{"class":249}," from",[243,269,270],{"class":256}," '",[243,272,274],{"class":273},"sfazB","@kolirt\u002Fvue-modal",[243,276,277],{"class":256},"'\n",[243,279,281],{"class":245,"line":280},2,[243,282,284],{"emptyLinePlaceholder":283},true,"\n",[243,286,288,292,295,297,299,302],{"class":245,"line":287},3,[243,289,291],{"class":290},"spNyl","declare",[243,293,294],{"class":290}," module",[243,296,270],{"class":256},[243,298,274],{"class":273},[243,300,301],{"class":256},"'",[243,303,304],{"class":256}," {\n",[243,306,308,311,315,318,320,323,327,329,332,334,337,340],{"class":245,"line":307},4,[243,309,310],{"class":290},"  interface",[243,312,314],{"class":313},"sBMFI"," ModalGroupRegistry",[243,316,317],{"class":290}," extends",[243,319,261],{"class":313},[243,321,322],{"class":256},"\u003C",[243,324,326],{"class":325},"swJcz","[",[243,328,301],{"class":256},[243,330,331],{"class":273},"wizard",[243,333,301],{"class":256},[243,335,336],{"class":325},"]",[243,338,339],{"class":256},">",[243,341,342],{"class":256}," {}\n",[243,344,346],{"class":245,"line":345},5,[243,347,348],{"class":256},"}\n",[233,350,355],{"className":351,"code":352,"filename":353,"language":354,"meta":239,"style":239},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ModalOverlay, ModalTarget } from '@kolirt\u002Fvue-modal'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CRouterView \u002F>\n  \u003CModalTarget group=\"wizard\">\n    \u003CModalOverlay class=\"bg-black\u002F40\" \u002F>\n  \u003C\u002FModalTarget>\n\u003C\u002Ftemplate>\n","App.vue","vue",[213,356,357,383,408,417,421,430,442,463,486,496],{"__ignoreMap":239},[243,358,359,361,364,367,370,373,376,378,380],{"class":245,"line":246},[243,360,322],{"class":256},[243,362,363],{"class":325},"script",[243,365,366],{"class":290}," setup",[243,368,369],{"class":290}," lang",[243,371,372],{"class":256},"=",[243,374,375],{"class":256},"\"",[243,377,238],{"class":273},[243,379,375],{"class":256},[243,381,382],{"class":256},">\n",[243,384,385,387,389,392,395,398,400,402,404,406],{"class":245,"line":280},[243,386,250],{"class":249},[243,388,257],{"class":256},[243,390,391],{"class":260}," ModalOverlay",[243,393,394],{"class":256},",",[243,396,397],{"class":260}," ModalTarget",[243,399,264],{"class":256},[243,401,267],{"class":249},[243,403,270],{"class":256},[243,405,274],{"class":273},[243,407,277],{"class":256},[243,409,410,413,415],{"class":245,"line":287},[243,411,412],{"class":256},"\u003C\u002F",[243,414,363],{"class":325},[243,416,382],{"class":256},[243,418,419],{"class":245,"line":307},[243,420,284],{"emptyLinePlaceholder":283},[243,422,423,425,428],{"class":245,"line":345},[243,424,322],{"class":256},[243,426,427],{"class":325},"template",[243,429,382],{"class":256},[243,431,433,436,439],{"class":245,"line":432},6,[243,434,435],{"class":256},"  \u003C",[243,437,438],{"class":325},"RouterView",[243,440,441],{"class":256}," \u002F>\n",[243,443,445,447,450,453,455,457,459,461],{"class":245,"line":444},7,[243,446,435],{"class":256},[243,448,449],{"class":325},"ModalTarget",[243,451,452],{"class":290}," group",[243,454,372],{"class":256},[243,456,375],{"class":256},[243,458,331],{"class":273},[243,460,375],{"class":256},[243,462,382],{"class":256},[243,464,466,469,472,475,477,479,482,484],{"class":245,"line":465},8,[243,467,468],{"class":256},"    \u003C",[243,470,471],{"class":325},"ModalOverlay",[243,473,474],{"class":290}," class",[243,476,372],{"class":256},[243,478,375],{"class":256},[243,480,481],{"class":273},"bg-black\u002F40",[243,483,375],{"class":256},[243,485,441],{"class":256},[243,487,489,492,494],{"class":245,"line":488},9,[243,490,491],{"class":256},"  \u003C\u002F",[243,493,449],{"class":325},[243,495,382],{"class":256},[243,497,499,501,503],{"class":245,"line":498},10,[243,500,412],{"class":256},[243,502,427],{"class":325},[243,504,382],{"class":256},[228,506,508],{"id":507},"approach-1-replace-linear-wizard","Approach 1 — Replace (linear wizard)",[198,510,511,512,515,516,519],{},"Each step component calls ",[213,513,514],{},"replaceModal(NextStep, { props: { ...collected } })"," to advance. Only the final step calls ",[213,517,518],{},"confirm(allData)",".",[521,522,523,1207,1921,2841],"code-group",{},[233,524,527],{"className":351,"code":525,"filename":526,"language":354,"meta":239,"style":239},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport {\n  ModalRoot,\n  ModalContent,\n  ModalTitle,\n  replaceModal,\n  useModalContext\n} from '@kolirt\u002Fvue-modal'\nimport WizardStep2 from '.\u002FWizardStep2.vue'\n\ndefineOptions({ modalGroup: 'wizard' })\n\nconst { close } = useModalContext()\nconst name = ref('')\n\nfunction next() {\n  if (!name.value.trim()) return\n  \u002F\u002F Instant swap to step 2 — no enter\u002Fexit animation\n  replaceModal(WizardStep2, {\n    props: { name: name.value },\n    instantEnter: true\n  })\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CModalRoot class=\"flex items-center justify-center p-4\">\n    \u003CModalContent class=\"relative w-full max-w-sm rounded-2xl bg-white shadow-xl p-8 space-y-6\">\n        \u003CModalTitle class=\"text-xl font-bold text-gray-900\">\n          Step 1 — Your name\n        \u003C\u002FModalTitle>\n        \u003Cinput\n          v-model=\"name\"\n          type=\"text\"\n          class=\"w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500\"\n          placeholder=\"Jane Doe\"\n          @keydown.enter=\"next\"\n        \u002F>\n        \u003Cdiv class=\"flex justify-between\">\n          \u003Cbutton class=\"text-sm text-gray-500 hover:text-gray-700\" @click=\"close()\">Cancel\u003C\u002Fbutton>\n          \u003Cbutton\n            class=\"rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-40\"\n            :disabled=\"!name.trim()\"\n            @click=\"next\"\n          >\n            Next →\n          \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002FModalContent>\n  \u003C\u002FModalRoot>\n\u003C\u002Ftemplate>\n","WizardStep1.vue",[213,528,529,549,568,574,582,589,596,603,608,621,638,643,673,678,700,719,724,738,769,776,790,814,826,834,839,848,853,862,883,904,926,932,942,950,965,980,995,1010,1025,1031,1052,1095,1103,1118,1133,1147,1153,1159,1169,1179,1189,1198],{"__ignoreMap":239},[243,530,531,533,535,537,539,541,543,545,547],{"class":245,"line":246},[243,532,322],{"class":256},[243,534,363],{"class":325},[243,536,366],{"class":290},[243,538,369],{"class":290},[243,540,372],{"class":256},[243,542,375],{"class":256},[243,544,238],{"class":273},[243,546,375],{"class":256},[243,548,382],{"class":256},[243,550,551,553,555,558,560,562,564,566],{"class":245,"line":280},[243,552,250],{"class":249},[243,554,257],{"class":256},[243,556,557],{"class":260}," ref",[243,559,264],{"class":256},[243,561,267],{"class":249},[243,563,270],{"class":256},[243,565,354],{"class":273},[243,567,277],{"class":256},[243,569,570,572],{"class":245,"line":287},[243,571,250],{"class":249},[243,573,304],{"class":256},[243,575,576,579],{"class":245,"line":307},[243,577,578],{"class":260},"  ModalRoot",[243,580,581],{"class":256},",\n",[243,583,584,587],{"class":245,"line":345},[243,585,586],{"class":260},"  ModalContent",[243,588,581],{"class":256},[243,590,591,594],{"class":245,"line":432},[243,592,593],{"class":260},"  ModalTitle",[243,595,581],{"class":256},[243,597,598,601],{"class":245,"line":444},[243,599,600],{"class":260},"  replaceModal",[243,602,581],{"class":256},[243,604,605],{"class":245,"line":465},[243,606,607],{"class":260},"  useModalContext\n",[243,609,610,613,615,617,619],{"class":245,"line":488},[243,611,612],{"class":256},"}",[243,614,267],{"class":249},[243,616,270],{"class":256},[243,618,274],{"class":273},[243,620,277],{"class":256},[243,622,623,625,628,631,633,636],{"class":245,"line":498},[243,624,250],{"class":249},[243,626,627],{"class":260}," WizardStep2 ",[243,629,630],{"class":249},"from",[243,632,270],{"class":256},[243,634,635],{"class":273},".\u002FWizardStep2.vue",[243,637,277],{"class":256},[243,639,641],{"class":245,"line":640},11,[243,642,284],{"emptyLinePlaceholder":283},[243,644,646,650,653,656,659,662,664,666,668,670],{"class":245,"line":645},12,[243,647,649],{"class":648},"s2Zo4","defineOptions",[243,651,652],{"class":260},"(",[243,654,655],{"class":256},"{",[243,657,658],{"class":325}," modalGroup",[243,660,661],{"class":256},":",[243,663,270],{"class":256},[243,665,331],{"class":273},[243,667,301],{"class":256},[243,669,264],{"class":256},[243,671,672],{"class":260},")\n",[243,674,676],{"class":245,"line":675},13,[243,677,284],{"emptyLinePlaceholder":283},[243,679,681,684,686,689,691,694,697],{"class":245,"line":680},14,[243,682,683],{"class":290},"const",[243,685,257],{"class":256},[243,687,688],{"class":260}," close ",[243,690,612],{"class":256},[243,692,693],{"class":256}," =",[243,695,696],{"class":648}," useModalContext",[243,698,699],{"class":260},"()\n",[243,701,703,705,708,710,712,714,717],{"class":245,"line":702},15,[243,704,683],{"class":290},[243,706,707],{"class":260}," name ",[243,709,372],{"class":256},[243,711,557],{"class":648},[243,713,652],{"class":260},[243,715,716],{"class":256},"''",[243,718,672],{"class":260},[243,720,722],{"class":245,"line":721},16,[243,723,284],{"emptyLinePlaceholder":283},[243,725,727,730,733,736],{"class":245,"line":726},17,[243,728,729],{"class":290},"function",[243,731,732],{"class":648}," next",[243,734,735],{"class":256},"()",[243,737,304],{"class":256},[243,739,741,744,747,750,753,755,758,760,763,766],{"class":245,"line":740},18,[243,742,743],{"class":249},"  if",[243,745,746],{"class":325}," (",[243,748,749],{"class":256},"!",[243,751,752],{"class":260},"name",[243,754,519],{"class":256},[243,756,757],{"class":260},"value",[243,759,519],{"class":256},[243,761,762],{"class":648},"trim",[243,764,765],{"class":325},"()) ",[243,767,768],{"class":249},"return\n",[243,770,772],{"class":245,"line":771},19,[243,773,775],{"class":774},"sHwdD","  \u002F\u002F Instant swap to step 2 — no enter\u002Fexit animation\n",[243,777,779,781,783,786,788],{"class":245,"line":778},20,[243,780,600],{"class":648},[243,782,652],{"class":325},[243,784,785],{"class":260},"WizardStep2",[243,787,394],{"class":256},[243,789,304],{"class":256},[243,791,793,796,798,800,803,805,807,809,811],{"class":245,"line":792},21,[243,794,795],{"class":325},"    props",[243,797,661],{"class":256},[243,799,257],{"class":256},[243,801,802],{"class":325}," name",[243,804,661],{"class":256},[243,806,802],{"class":260},[243,808,519],{"class":256},[243,810,757],{"class":260},[243,812,813],{"class":256}," },\n",[243,815,817,820,822],{"class":245,"line":816},22,[243,818,819],{"class":325},"    instantEnter",[243,821,661],{"class":256},[243,823,825],{"class":824},"sfNiH"," true\n",[243,827,829,832],{"class":245,"line":828},23,[243,830,831],{"class":256},"  }",[243,833,672],{"class":325},[243,835,837],{"class":245,"line":836},24,[243,838,348],{"class":256},[243,840,842,844,846],{"class":245,"line":841},25,[243,843,412],{"class":256},[243,845,363],{"class":325},[243,847,382],{"class":256},[243,849,851],{"class":245,"line":850},26,[243,852,284],{"emptyLinePlaceholder":283},[243,854,856,858,860],{"class":245,"line":855},27,[243,857,322],{"class":256},[243,859,427],{"class":325},[243,861,382],{"class":256},[243,863,865,867,870,872,874,876,879,881],{"class":245,"line":864},28,[243,866,435],{"class":256},[243,868,869],{"class":325},"ModalRoot",[243,871,474],{"class":290},[243,873,372],{"class":256},[243,875,375],{"class":256},[243,877,878],{"class":273},"flex items-center justify-center p-4",[243,880,375],{"class":256},[243,882,382],{"class":256},[243,884,886,888,891,893,895,897,900,902],{"class":245,"line":885},29,[243,887,468],{"class":256},[243,889,890],{"class":325},"ModalContent",[243,892,474],{"class":290},[243,894,372],{"class":256},[243,896,375],{"class":256},[243,898,899],{"class":273},"relative w-full max-w-sm rounded-2xl bg-white shadow-xl p-8 space-y-6",[243,901,375],{"class":256},[243,903,382],{"class":256},[243,905,907,910,913,915,917,919,922,924],{"class":245,"line":906},30,[243,908,909],{"class":256},"        \u003C",[243,911,912],{"class":325},"ModalTitle",[243,914,474],{"class":290},[243,916,372],{"class":256},[243,918,375],{"class":256},[243,920,921],{"class":273},"text-xl font-bold text-gray-900",[243,923,375],{"class":256},[243,925,382],{"class":256},[243,927,929],{"class":245,"line":928},31,[243,930,931],{"class":260},"          Step 1 — Your name\n",[243,933,935,938,940],{"class":245,"line":934},32,[243,936,937],{"class":256},"        \u003C\u002F",[243,939,912],{"class":325},[243,941,382],{"class":256},[243,943,945,947],{"class":245,"line":944},33,[243,946,909],{"class":256},[243,948,949],{"class":325},"input\n",[243,951,953,956,958,960,962],{"class":245,"line":952},34,[243,954,955],{"class":290},"          v-model",[243,957,372],{"class":256},[243,959,375],{"class":256},[243,961,752],{"class":273},[243,963,964],{"class":256},"\"\n",[243,966,968,971,973,975,978],{"class":245,"line":967},35,[243,969,970],{"class":290},"          type",[243,972,372],{"class":256},[243,974,375],{"class":256},[243,976,977],{"class":273},"text",[243,979,964],{"class":256},[243,981,983,986,988,990,993],{"class":245,"line":982},36,[243,984,985],{"class":290},"          class",[243,987,372],{"class":256},[243,989,375],{"class":256},[243,991,992],{"class":273},"w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500",[243,994,964],{"class":256},[243,996,998,1001,1003,1005,1008],{"class":245,"line":997},37,[243,999,1000],{"class":290},"          placeholder",[243,1002,372],{"class":256},[243,1004,375],{"class":256},[243,1006,1007],{"class":273},"Jane Doe",[243,1009,964],{"class":256},[243,1011,1013,1016,1018,1020,1023],{"class":245,"line":1012},38,[243,1014,1015],{"class":290},"          @keydown.enter",[243,1017,372],{"class":256},[243,1019,375],{"class":256},[243,1021,1022],{"class":273},"next",[243,1024,964],{"class":256},[243,1026,1028],{"class":245,"line":1027},39,[243,1029,1030],{"class":256},"        \u002F>\n",[243,1032,1034,1036,1039,1041,1043,1045,1048,1050],{"class":245,"line":1033},40,[243,1035,909],{"class":256},[243,1037,1038],{"class":325},"div",[243,1040,474],{"class":290},[243,1042,372],{"class":256},[243,1044,375],{"class":256},[243,1046,1047],{"class":273},"flex justify-between",[243,1049,375],{"class":256},[243,1051,382],{"class":256},[243,1053,1055,1058,1061,1063,1065,1067,1070,1072,1075,1077,1079,1082,1084,1086,1089,1091,1093],{"class":245,"line":1054},41,[243,1056,1057],{"class":256},"          \u003C",[243,1059,1060],{"class":325},"button",[243,1062,474],{"class":290},[243,1064,372],{"class":256},[243,1066,375],{"class":256},[243,1068,1069],{"class":273},"text-sm text-gray-500 hover:text-gray-700",[243,1071,375],{"class":256},[243,1073,1074],{"class":290}," @click",[243,1076,372],{"class":256},[243,1078,375],{"class":256},[243,1080,1081],{"class":273},"close()",[243,1083,375],{"class":256},[243,1085,339],{"class":256},[243,1087,1088],{"class":260},"Cancel",[243,1090,412],{"class":256},[243,1092,1060],{"class":325},[243,1094,382],{"class":256},[243,1096,1098,1100],{"class":245,"line":1097},42,[243,1099,1057],{"class":256},[243,1101,1102],{"class":325},"button\n",[243,1104,1106,1109,1111,1113,1116],{"class":245,"line":1105},43,[243,1107,1108],{"class":290},"            class",[243,1110,372],{"class":256},[243,1112,375],{"class":256},[243,1114,1115],{"class":273},"rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-40",[243,1117,964],{"class":256},[243,1119,1121,1124,1126,1128,1131],{"class":245,"line":1120},44,[243,1122,1123],{"class":290},"            :disabled",[243,1125,372],{"class":256},[243,1127,375],{"class":256},[243,1129,1130],{"class":273},"!name.trim()",[243,1132,964],{"class":256},[243,1134,1136,1139,1141,1143,1145],{"class":245,"line":1135},45,[243,1137,1138],{"class":290},"            @click",[243,1140,372],{"class":256},[243,1142,375],{"class":256},[243,1144,1022],{"class":273},[243,1146,964],{"class":256},[243,1148,1150],{"class":245,"line":1149},46,[243,1151,1152],{"class":256},"          >\n",[243,1154,1156],{"class":245,"line":1155},47,[243,1157,1158],{"class":260},"            Next →\n",[243,1160,1162,1165,1167],{"class":245,"line":1161},48,[243,1163,1164],{"class":256},"          \u003C\u002F",[243,1166,1060],{"class":325},[243,1168,382],{"class":256},[243,1170,1172,1175,1177],{"class":245,"line":1171},49,[243,1173,1174],{"class":256},"      \u003C\u002F",[243,1176,1038],{"class":325},[243,1178,382],{"class":256},[243,1180,1182,1185,1187],{"class":245,"line":1181},50,[243,1183,1184],{"class":256},"    \u003C\u002F",[243,1186,890],{"class":325},[243,1188,382],{"class":256},[243,1190,1192,1194,1196],{"class":245,"line":1191},51,[243,1193,491],{"class":256},[243,1195,869],{"class":325},[243,1197,382],{"class":256},[243,1199,1201,1203,1205],{"class":245,"line":1200},52,[243,1202,412],{"class":256},[243,1204,427],{"class":325},[243,1206,382],{"class":256},[233,1208,1211],{"className":351,"code":1209,"filename":1210,"language":354,"meta":239,"style":239},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport {\n  ModalRoot,\n  ModalContent,\n  ModalTitle,\n  replaceModal,\n  useModalContext\n} from '@kolirt\u002Fvue-modal'\nimport WizardStep1 from '.\u002FWizardStep1.vue'\nimport WizardStep3 from '.\u002FWizardStep3.vue'\n\ndefineOptions({ modalGroup: 'wizard' })\n\nexport interface WizardStep2Props { name: string }\nconst props = defineProps\u003CWizardStep2Props>()\n\nconst { close } = useModalContext()\nconst email = ref('')\n\nfunction back() {\n  replaceModal(WizardStep1, { props: {}, instantEnter: true })\n}\n\nfunction next() {\n  if (!email.value.trim()) return\n  replaceModal(WizardStep3, {\n    props: { name: props.name, email: email.value },\n    instantEnter: true\n  })\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CModalRoot class=\"flex items-center justify-center p-4\">\n    \u003CModalContent class=\"relative w-full max-w-sm rounded-2xl bg-white shadow-xl p-8 space-y-6\">\n        \u003CModalTitle class=\"text-xl font-bold text-gray-900\">\n          Step 2 — Your email\n        \u003C\u002FModalTitle>\n        \u003Cp class=\"text-sm text-gray-500\">Hi, {{ props.name }}!\u003C\u002Fp>\n        \u003Cinput\n          v-model=\"email\"\n          type=\"email\"\n          class=\"w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500\"\n          placeholder=\"jane@example.com\"\n        \u002F>\n        \u003Cdiv class=\"flex justify-between\">\n          \u003Cbutton class=\"text-sm text-gray-500 hover:text-gray-700\" @click=\"back\">← Back\u003C\u002Fbutton>\n          \u003Cbutton\n            class=\"rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-40\"\n            :disabled=\"!email.trim()\"\n            @click=\"next\"\n          >\n            Next →\n          \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002FModalContent>\n  \u003C\u002FModalRoot>\n\u003C\u002Ftemplate>\n","WizardStep2.vue",[213,1212,1213,1233,1251,1257,1263,1269,1275,1281,1285,1297,1313,1329,1333,1355,1359,1382,1403,1407,1423,1440,1444,1455,1488,1492,1496,1506,1529,1542,1575,1583,1589,1593,1601,1605,1613,1631,1649,1667,1672,1680,1708,1714,1726,1738,1750,1763,1767,1785,1823,1829,1841,1854,1866,1871,1876,1885,1894,1903,1912],{"__ignoreMap":239},[243,1214,1215,1217,1219,1221,1223,1225,1227,1229,1231],{"class":245,"line":246},[243,1216,322],{"class":256},[243,1218,363],{"class":325},[243,1220,366],{"class":290},[243,1222,369],{"class":290},[243,1224,372],{"class":256},[243,1226,375],{"class":256},[243,1228,238],{"class":273},[243,1230,375],{"class":256},[243,1232,382],{"class":256},[243,1234,1235,1237,1239,1241,1243,1245,1247,1249],{"class":245,"line":280},[243,1236,250],{"class":249},[243,1238,257],{"class":256},[243,1240,557],{"class":260},[243,1242,264],{"class":256},[243,1244,267],{"class":249},[243,1246,270],{"class":256},[243,1248,354],{"class":273},[243,1250,277],{"class":256},[243,1252,1253,1255],{"class":245,"line":287},[243,1254,250],{"class":249},[243,1256,304],{"class":256},[243,1258,1259,1261],{"class":245,"line":307},[243,1260,578],{"class":260},[243,1262,581],{"class":256},[243,1264,1265,1267],{"class":245,"line":345},[243,1266,586],{"class":260},[243,1268,581],{"class":256},[243,1270,1271,1273],{"class":245,"line":432},[243,1272,593],{"class":260},[243,1274,581],{"class":256},[243,1276,1277,1279],{"class":245,"line":444},[243,1278,600],{"class":260},[243,1280,581],{"class":256},[243,1282,1283],{"class":245,"line":465},[243,1284,607],{"class":260},[243,1286,1287,1289,1291,1293,1295],{"class":245,"line":488},[243,1288,612],{"class":256},[243,1290,267],{"class":249},[243,1292,270],{"class":256},[243,1294,274],{"class":273},[243,1296,277],{"class":256},[243,1298,1299,1301,1304,1306,1308,1311],{"class":245,"line":498},[243,1300,250],{"class":249},[243,1302,1303],{"class":260}," WizardStep1 ",[243,1305,630],{"class":249},[243,1307,270],{"class":256},[243,1309,1310],{"class":273},".\u002FWizardStep1.vue",[243,1312,277],{"class":256},[243,1314,1315,1317,1320,1322,1324,1327],{"class":245,"line":640},[243,1316,250],{"class":249},[243,1318,1319],{"class":260}," WizardStep3 ",[243,1321,630],{"class":249},[243,1323,270],{"class":256},[243,1325,1326],{"class":273},".\u002FWizardStep3.vue",[243,1328,277],{"class":256},[243,1330,1331],{"class":245,"line":645},[243,1332,284],{"emptyLinePlaceholder":283},[243,1334,1335,1337,1339,1341,1343,1345,1347,1349,1351,1353],{"class":245,"line":675},[243,1336,649],{"class":648},[243,1338,652],{"class":260},[243,1340,655],{"class":256},[243,1342,658],{"class":325},[243,1344,661],{"class":256},[243,1346,270],{"class":256},[243,1348,331],{"class":273},[243,1350,301],{"class":256},[243,1352,264],{"class":256},[243,1354,672],{"class":260},[243,1356,1357],{"class":245,"line":680},[243,1358,284],{"emptyLinePlaceholder":283},[243,1360,1361,1364,1367,1370,1372,1374,1376,1379],{"class":245,"line":702},[243,1362,1363],{"class":249},"export",[243,1365,1366],{"class":290}," interface",[243,1368,1369],{"class":313}," WizardStep2Props",[243,1371,257],{"class":256},[243,1373,802],{"class":325},[243,1375,661],{"class":256},[243,1377,1378],{"class":313}," string",[243,1380,1381],{"class":256}," }\n",[243,1383,1384,1386,1389,1391,1394,1396,1399,1401],{"class":245,"line":721},[243,1385,683],{"class":290},[243,1387,1388],{"class":260}," props ",[243,1390,372],{"class":256},[243,1392,1393],{"class":648}," defineProps",[243,1395,322],{"class":256},[243,1397,1398],{"class":313},"WizardStep2Props",[243,1400,339],{"class":256},[243,1402,699],{"class":260},[243,1404,1405],{"class":245,"line":726},[243,1406,284],{"emptyLinePlaceholder":283},[243,1408,1409,1411,1413,1415,1417,1419,1421],{"class":245,"line":740},[243,1410,683],{"class":290},[243,1412,257],{"class":256},[243,1414,688],{"class":260},[243,1416,612],{"class":256},[243,1418,693],{"class":256},[243,1420,696],{"class":648},[243,1422,699],{"class":260},[243,1424,1425,1427,1430,1432,1434,1436,1438],{"class":245,"line":771},[243,1426,683],{"class":290},[243,1428,1429],{"class":260}," email ",[243,1431,372],{"class":256},[243,1433,557],{"class":648},[243,1435,652],{"class":260},[243,1437,716],{"class":256},[243,1439,672],{"class":260},[243,1441,1442],{"class":245,"line":778},[243,1443,284],{"emptyLinePlaceholder":283},[243,1445,1446,1448,1451,1453],{"class":245,"line":792},[243,1447,729],{"class":290},[243,1449,1450],{"class":648}," back",[243,1452,735],{"class":256},[243,1454,304],{"class":256},[243,1456,1457,1459,1461,1464,1466,1468,1471,1473,1476,1479,1481,1484,1486],{"class":245,"line":816},[243,1458,600],{"class":648},[243,1460,652],{"class":325},[243,1462,1463],{"class":260},"WizardStep1",[243,1465,394],{"class":256},[243,1467,257],{"class":256},[243,1469,1470],{"class":325}," props",[243,1472,661],{"class":256},[243,1474,1475],{"class":256}," {},",[243,1477,1478],{"class":325}," instantEnter",[243,1480,661],{"class":256},[243,1482,1483],{"class":824}," true",[243,1485,264],{"class":256},[243,1487,672],{"class":325},[243,1489,1490],{"class":245,"line":828},[243,1491,348],{"class":256},[243,1493,1494],{"class":245,"line":836},[243,1495,284],{"emptyLinePlaceholder":283},[243,1497,1498,1500,1502,1504],{"class":245,"line":841},[243,1499,729],{"class":290},[243,1501,732],{"class":648},[243,1503,735],{"class":256},[243,1505,304],{"class":256},[243,1507,1508,1510,1512,1514,1517,1519,1521,1523,1525,1527],{"class":245,"line":850},[243,1509,743],{"class":249},[243,1511,746],{"class":325},[243,1513,749],{"class":256},[243,1515,1516],{"class":260},"email",[243,1518,519],{"class":256},[243,1520,757],{"class":260},[243,1522,519],{"class":256},[243,1524,762],{"class":648},[243,1526,765],{"class":325},[243,1528,768],{"class":249},[243,1530,1531,1533,1535,1538,1540],{"class":245,"line":855},[243,1532,600],{"class":648},[243,1534,652],{"class":325},[243,1536,1537],{"class":260},"WizardStep3",[243,1539,394],{"class":256},[243,1541,304],{"class":256},[243,1543,1544,1546,1548,1550,1552,1554,1556,1558,1560,1562,1565,1567,1569,1571,1573],{"class":245,"line":864},[243,1545,795],{"class":325},[243,1547,661],{"class":256},[243,1549,257],{"class":256},[243,1551,802],{"class":325},[243,1553,661],{"class":256},[243,1555,1470],{"class":260},[243,1557,519],{"class":256},[243,1559,752],{"class":260},[243,1561,394],{"class":256},[243,1563,1564],{"class":325}," email",[243,1566,661],{"class":256},[243,1568,1564],{"class":260},[243,1570,519],{"class":256},[243,1572,757],{"class":260},[243,1574,813],{"class":256},[243,1576,1577,1579,1581],{"class":245,"line":885},[243,1578,819],{"class":325},[243,1580,661],{"class":256},[243,1582,825],{"class":824},[243,1584,1585,1587],{"class":245,"line":906},[243,1586,831],{"class":256},[243,1588,672],{"class":325},[243,1590,1591],{"class":245,"line":928},[243,1592,348],{"class":256},[243,1594,1595,1597,1599],{"class":245,"line":934},[243,1596,412],{"class":256},[243,1598,363],{"class":325},[243,1600,382],{"class":256},[243,1602,1603],{"class":245,"line":944},[243,1604,284],{"emptyLinePlaceholder":283},[243,1606,1607,1609,1611],{"class":245,"line":952},[243,1608,322],{"class":256},[243,1610,427],{"class":325},[243,1612,382],{"class":256},[243,1614,1615,1617,1619,1621,1623,1625,1627,1629],{"class":245,"line":967},[243,1616,435],{"class":256},[243,1618,869],{"class":325},[243,1620,474],{"class":290},[243,1622,372],{"class":256},[243,1624,375],{"class":256},[243,1626,878],{"class":273},[243,1628,375],{"class":256},[243,1630,382],{"class":256},[243,1632,1633,1635,1637,1639,1641,1643,1645,1647],{"class":245,"line":982},[243,1634,468],{"class":256},[243,1636,890],{"class":325},[243,1638,474],{"class":290},[243,1640,372],{"class":256},[243,1642,375],{"class":256},[243,1644,899],{"class":273},[243,1646,375],{"class":256},[243,1648,382],{"class":256},[243,1650,1651,1653,1655,1657,1659,1661,1663,1665],{"class":245,"line":997},[243,1652,909],{"class":256},[243,1654,912],{"class":325},[243,1656,474],{"class":290},[243,1658,372],{"class":256},[243,1660,375],{"class":256},[243,1662,921],{"class":273},[243,1664,375],{"class":256},[243,1666,382],{"class":256},[243,1668,1669],{"class":245,"line":1012},[243,1670,1671],{"class":260},"          Step 2 — Your email\n",[243,1673,1674,1676,1678],{"class":245,"line":1027},[243,1675,937],{"class":256},[243,1677,912],{"class":325},[243,1679,382],{"class":256},[243,1681,1682,1684,1686,1688,1690,1692,1695,1697,1699,1702,1704,1706],{"class":245,"line":1033},[243,1683,909],{"class":256},[243,1685,198],{"class":325},[243,1687,474],{"class":290},[243,1689,372],{"class":256},[243,1691,375],{"class":256},[243,1693,1694],{"class":273},"text-sm text-gray-500",[243,1696,375],{"class":256},[243,1698,339],{"class":256},[243,1700,1701],{"class":260},"Hi, {{ props.name }}!",[243,1703,412],{"class":256},[243,1705,198],{"class":325},[243,1707,382],{"class":256},[243,1709,1710,1712],{"class":245,"line":1054},[243,1711,909],{"class":256},[243,1713,949],{"class":325},[243,1715,1716,1718,1720,1722,1724],{"class":245,"line":1097},[243,1717,955],{"class":290},[243,1719,372],{"class":256},[243,1721,375],{"class":256},[243,1723,1516],{"class":273},[243,1725,964],{"class":256},[243,1727,1728,1730,1732,1734,1736],{"class":245,"line":1105},[243,1729,970],{"class":290},[243,1731,372],{"class":256},[243,1733,375],{"class":256},[243,1735,1516],{"class":273},[243,1737,964],{"class":256},[243,1739,1740,1742,1744,1746,1748],{"class":245,"line":1120},[243,1741,985],{"class":290},[243,1743,372],{"class":256},[243,1745,375],{"class":256},[243,1747,992],{"class":273},[243,1749,964],{"class":256},[243,1751,1752,1754,1756,1758,1761],{"class":245,"line":1135},[243,1753,1000],{"class":290},[243,1755,372],{"class":256},[243,1757,375],{"class":256},[243,1759,1760],{"class":273},"jane@example.com",[243,1762,964],{"class":256},[243,1764,1765],{"class":245,"line":1149},[243,1766,1030],{"class":256},[243,1768,1769,1771,1773,1775,1777,1779,1781,1783],{"class":245,"line":1155},[243,1770,909],{"class":256},[243,1772,1038],{"class":325},[243,1774,474],{"class":290},[243,1776,372],{"class":256},[243,1778,375],{"class":256},[243,1780,1047],{"class":273},[243,1782,375],{"class":256},[243,1784,382],{"class":256},[243,1786,1787,1789,1791,1793,1795,1797,1799,1801,1803,1805,1807,1810,1812,1814,1817,1819,1821],{"class":245,"line":1161},[243,1788,1057],{"class":256},[243,1790,1060],{"class":325},[243,1792,474],{"class":290},[243,1794,372],{"class":256},[243,1796,375],{"class":256},[243,1798,1069],{"class":273},[243,1800,375],{"class":256},[243,1802,1074],{"class":290},[243,1804,372],{"class":256},[243,1806,375],{"class":256},[243,1808,1809],{"class":273},"back",[243,1811,375],{"class":256},[243,1813,339],{"class":256},[243,1815,1816],{"class":260},"← Back",[243,1818,412],{"class":256},[243,1820,1060],{"class":325},[243,1822,382],{"class":256},[243,1824,1825,1827],{"class":245,"line":1171},[243,1826,1057],{"class":256},[243,1828,1102],{"class":325},[243,1830,1831,1833,1835,1837,1839],{"class":245,"line":1181},[243,1832,1108],{"class":290},[243,1834,372],{"class":256},[243,1836,375],{"class":256},[243,1838,1115],{"class":273},[243,1840,964],{"class":256},[243,1842,1843,1845,1847,1849,1852],{"class":245,"line":1191},[243,1844,1123],{"class":290},[243,1846,372],{"class":256},[243,1848,375],{"class":256},[243,1850,1851],{"class":273},"!email.trim()",[243,1853,964],{"class":256},[243,1855,1856,1858,1860,1862,1864],{"class":245,"line":1200},[243,1857,1138],{"class":290},[243,1859,372],{"class":256},[243,1861,375],{"class":256},[243,1863,1022],{"class":273},[243,1865,964],{"class":256},[243,1867,1869],{"class":245,"line":1868},53,[243,1870,1152],{"class":256},[243,1872,1874],{"class":245,"line":1873},54,[243,1875,1158],{"class":260},[243,1877,1879,1881,1883],{"class":245,"line":1878},55,[243,1880,1164],{"class":256},[243,1882,1060],{"class":325},[243,1884,382],{"class":256},[243,1886,1888,1890,1892],{"class":245,"line":1887},56,[243,1889,1174],{"class":256},[243,1891,1038],{"class":325},[243,1893,382],{"class":256},[243,1895,1897,1899,1901],{"class":245,"line":1896},57,[243,1898,1184],{"class":256},[243,1900,890],{"class":325},[243,1902,382],{"class":256},[243,1904,1906,1908,1910],{"class":245,"line":1905},58,[243,1907,491],{"class":256},[243,1909,869],{"class":325},[243,1911,382],{"class":256},[243,1913,1915,1917,1919],{"class":245,"line":1914},59,[243,1916,412],{"class":256},[243,1918,427],{"class":325},[243,1920,382],{"class":256},[233,1922,1925],{"className":351,"code":1923,"filename":1924,"language":354,"meta":239,"style":239},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport {\n  ModalRoot,\n  ModalContent,\n  ModalTitle,\n  replaceModal,\n  useModalContext\n} from '@kolirt\u002Fvue-modal'\nimport WizardStep2 from '.\u002FWizardStep2.vue'\n\ndefineOptions({ modalGroup: 'wizard' })\n\nexport interface WizardResult { name: string; email: string; plan: string }\n\nconst props = defineProps\u003C{ name: string; email: string }>()\nconst { confirm } = useModalContext\u003CWizardResult>()\n\nconst plan = ref\u003C'free' | 'pro'>('free')\nconst submitting = ref(false)\n\nfunction back() {\n  replaceModal(WizardStep2, {\n    props: { name: props.name },\n    instantEnter: true\n  })\n}\n\nasync function submit() {\n  submitting.value = true\n  await api.onboarding.complete({ name: props.name, email: props.email, plan: plan.value })\n  confirm({ name: props.name, email: props.email, plan: plan.value })\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CModalRoot class=\"flex items-center justify-center p-4\">\n    \u003CModalContent class=\"relative w-full max-w-sm rounded-2xl bg-white shadow-xl p-8 space-y-6\">\n        \u003CModalTitle class=\"text-xl font-bold text-gray-900\">Step 3 — Pick a plan\u003C\u002FModalTitle>\n        \u003Cdiv class=\"flex gap-3\">\n          \u003Clabel\n            v-for=\"p in ['free', 'pro']\"\n            :key=\"p\"\n            class=\"flex-1 flex items-center gap-2 rounded-xl border-2 p-4 cursor-pointer transition\"\n            :class=\"plan === p ? 'border-indigo-600 bg-indigo-50' : 'border-gray-200'\"\n          >\n            \u003Cinput v-model=\"plan\" type=\"radio\" :value=\"p\" class=\"sr-only\" \u002F>\n            \u003Cspan class=\"font-semibold capitalize text-sm\">{{ p }}\u003C\u002Fspan>\n          \u003C\u002Flabel>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"flex justify-between\">\n          \u003Cbutton class=\"text-sm text-gray-500 hover:text-gray-700\" @click=\"back\">← Back\u003C\u002Fbutton>\n          \u003Cbutton\n            class=\"rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-40\"\n            :disabled=\"submitting\"\n            @click=\"submit\"\n          >\n            Finish\n          \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002FModalContent>\n  \u003C\u002FModalRoot>\n\u003C\u002Ftemplate>\n","WizardStep3.vue (final step)",[213,1926,1927,1947,1965,1971,1977,1983,1989,1995,1999,2011,2025,2029,2051,2055,2092,2096,2128,2152,2156,2198,2216,2220,2230,2242,2262,2270,2276,2280,2284,2299,2312,2372,2419,2423,2431,2435,2443,2461,2479,2506,2525,2532,2546,2559,2572,2586,2590,2645,2673,2682,2690,2708,2744,2750,2762,2775,2788,2792,2797,2805,2814,2823,2832],{"__ignoreMap":239},[243,1928,1929,1931,1933,1935,1937,1939,1941,1943,1945],{"class":245,"line":246},[243,1930,322],{"class":256},[243,1932,363],{"class":325},[243,1934,366],{"class":290},[243,1936,369],{"class":290},[243,1938,372],{"class":256},[243,1940,375],{"class":256},[243,1942,238],{"class":273},[243,1944,375],{"class":256},[243,1946,382],{"class":256},[243,1948,1949,1951,1953,1955,1957,1959,1961,1963],{"class":245,"line":280},[243,1950,250],{"class":249},[243,1952,257],{"class":256},[243,1954,557],{"class":260},[243,1956,264],{"class":256},[243,1958,267],{"class":249},[243,1960,270],{"class":256},[243,1962,354],{"class":273},[243,1964,277],{"class":256},[243,1966,1967,1969],{"class":245,"line":287},[243,1968,250],{"class":249},[243,1970,304],{"class":256},[243,1972,1973,1975],{"class":245,"line":307},[243,1974,578],{"class":260},[243,1976,581],{"class":256},[243,1978,1979,1981],{"class":245,"line":345},[243,1980,586],{"class":260},[243,1982,581],{"class":256},[243,1984,1985,1987],{"class":245,"line":432},[243,1986,593],{"class":260},[243,1988,581],{"class":256},[243,1990,1991,1993],{"class":245,"line":444},[243,1992,600],{"class":260},[243,1994,581],{"class":256},[243,1996,1997],{"class":245,"line":465},[243,1998,607],{"class":260},[243,2000,2001,2003,2005,2007,2009],{"class":245,"line":488},[243,2002,612],{"class":256},[243,2004,267],{"class":249},[243,2006,270],{"class":256},[243,2008,274],{"class":273},[243,2010,277],{"class":256},[243,2012,2013,2015,2017,2019,2021,2023],{"class":245,"line":498},[243,2014,250],{"class":249},[243,2016,627],{"class":260},[243,2018,630],{"class":249},[243,2020,270],{"class":256},[243,2022,635],{"class":273},[243,2024,277],{"class":256},[243,2026,2027],{"class":245,"line":640},[243,2028,284],{"emptyLinePlaceholder":283},[243,2030,2031,2033,2035,2037,2039,2041,2043,2045,2047,2049],{"class":245,"line":645},[243,2032,649],{"class":648},[243,2034,652],{"class":260},[243,2036,655],{"class":256},[243,2038,658],{"class":325},[243,2040,661],{"class":256},[243,2042,270],{"class":256},[243,2044,331],{"class":273},[243,2046,301],{"class":256},[243,2048,264],{"class":256},[243,2050,672],{"class":260},[243,2052,2053],{"class":245,"line":675},[243,2054,284],{"emptyLinePlaceholder":283},[243,2056,2057,2059,2061,2064,2066,2068,2070,2072,2075,2077,2079,2081,2083,2086,2088,2090],{"class":245,"line":680},[243,2058,1363],{"class":249},[243,2060,1366],{"class":290},[243,2062,2063],{"class":313}," WizardResult",[243,2065,257],{"class":256},[243,2067,802],{"class":325},[243,2069,661],{"class":256},[243,2071,1378],{"class":313},[243,2073,2074],{"class":256},";",[243,2076,1564],{"class":325},[243,2078,661],{"class":256},[243,2080,1378],{"class":313},[243,2082,2074],{"class":256},[243,2084,2085],{"class":325}," plan",[243,2087,661],{"class":256},[243,2089,1378],{"class":313},[243,2091,1381],{"class":256},[243,2093,2094],{"class":245,"line":702},[243,2095,284],{"emptyLinePlaceholder":283},[243,2097,2098,2100,2102,2104,2106,2109,2111,2113,2115,2117,2119,2121,2123,2126],{"class":245,"line":721},[243,2099,683],{"class":290},[243,2101,1388],{"class":260},[243,2103,372],{"class":256},[243,2105,1393],{"class":648},[243,2107,2108],{"class":256},"\u003C{",[243,2110,802],{"class":325},[243,2112,661],{"class":256},[243,2114,1378],{"class":313},[243,2116,2074],{"class":256},[243,2118,1564],{"class":325},[243,2120,661],{"class":256},[243,2122,1378],{"class":313},[243,2124,2125],{"class":256}," }>",[243,2127,699],{"class":260},[243,2129,2130,2132,2134,2137,2139,2141,2143,2145,2148,2150],{"class":245,"line":726},[243,2131,683],{"class":290},[243,2133,257],{"class":256},[243,2135,2136],{"class":260}," confirm ",[243,2138,612],{"class":256},[243,2140,693],{"class":256},[243,2142,696],{"class":648},[243,2144,322],{"class":256},[243,2146,2147],{"class":313},"WizardResult",[243,2149,339],{"class":256},[243,2151,699],{"class":260},[243,2153,2154],{"class":245,"line":740},[243,2155,284],{"emptyLinePlaceholder":283},[243,2157,2158,2160,2163,2165,2167,2169,2171,2174,2176,2179,2181,2184,2186,2188,2190,2192,2194,2196],{"class":245,"line":771},[243,2159,683],{"class":290},[243,2161,2162],{"class":260}," plan ",[243,2164,372],{"class":256},[243,2166,557],{"class":648},[243,2168,322],{"class":256},[243,2170,301],{"class":256},[243,2172,2173],{"class":273},"free",[243,2175,301],{"class":256},[243,2177,2178],{"class":256}," |",[243,2180,270],{"class":256},[243,2182,2183],{"class":273},"pro",[243,2185,301],{"class":256},[243,2187,339],{"class":256},[243,2189,652],{"class":260},[243,2191,301],{"class":256},[243,2193,2173],{"class":273},[243,2195,301],{"class":256},[243,2197,672],{"class":260},[243,2199,2200,2202,2205,2207,2209,2211,2214],{"class":245,"line":778},[243,2201,683],{"class":290},[243,2203,2204],{"class":260}," submitting ",[243,2206,372],{"class":256},[243,2208,557],{"class":648},[243,2210,652],{"class":260},[243,2212,2213],{"class":824},"false",[243,2215,672],{"class":260},[243,2217,2218],{"class":245,"line":792},[243,2219,284],{"emptyLinePlaceholder":283},[243,2221,2222,2224,2226,2228],{"class":245,"line":816},[243,2223,729],{"class":290},[243,2225,1450],{"class":648},[243,2227,735],{"class":256},[243,2229,304],{"class":256},[243,2231,2232,2234,2236,2238,2240],{"class":245,"line":828},[243,2233,600],{"class":648},[243,2235,652],{"class":325},[243,2237,785],{"class":260},[243,2239,394],{"class":256},[243,2241,304],{"class":256},[243,2243,2244,2246,2248,2250,2252,2254,2256,2258,2260],{"class":245,"line":836},[243,2245,795],{"class":325},[243,2247,661],{"class":256},[243,2249,257],{"class":256},[243,2251,802],{"class":325},[243,2253,661],{"class":256},[243,2255,1470],{"class":260},[243,2257,519],{"class":256},[243,2259,752],{"class":260},[243,2261,813],{"class":256},[243,2263,2264,2266,2268],{"class":245,"line":841},[243,2265,819],{"class":325},[243,2267,661],{"class":256},[243,2269,825],{"class":824},[243,2271,2272,2274],{"class":245,"line":850},[243,2273,831],{"class":256},[243,2275,672],{"class":325},[243,2277,2278],{"class":245,"line":855},[243,2279,348],{"class":256},[243,2281,2282],{"class":245,"line":864},[243,2283,284],{"emptyLinePlaceholder":283},[243,2285,2286,2289,2292,2295,2297],{"class":245,"line":885},[243,2287,2288],{"class":290},"async",[243,2290,2291],{"class":290}," function",[243,2293,2294],{"class":648}," submit",[243,2296,735],{"class":256},[243,2298,304],{"class":256},[243,2300,2301,2304,2306,2308,2310],{"class":245,"line":906},[243,2302,2303],{"class":260},"  submitting",[243,2305,519],{"class":256},[243,2307,757],{"class":260},[243,2309,693],{"class":256},[243,2311,825],{"class":824},[243,2313,2314,2317,2320,2322,2325,2327,2330,2332,2334,2336,2338,2340,2342,2344,2346,2348,2350,2352,2354,2356,2358,2360,2362,2364,2366,2368,2370],{"class":245,"line":928},[243,2315,2316],{"class":249},"  await",[243,2318,2319],{"class":260}," api",[243,2321,519],{"class":256},[243,2323,2324],{"class":260},"onboarding",[243,2326,519],{"class":256},[243,2328,2329],{"class":648},"complete",[243,2331,652],{"class":325},[243,2333,655],{"class":256},[243,2335,802],{"class":325},[243,2337,661],{"class":256},[243,2339,1470],{"class":260},[243,2341,519],{"class":256},[243,2343,752],{"class":260},[243,2345,394],{"class":256},[243,2347,1564],{"class":325},[243,2349,661],{"class":256},[243,2351,1470],{"class":260},[243,2353,519],{"class":256},[243,2355,1516],{"class":260},[243,2357,394],{"class":256},[243,2359,2085],{"class":325},[243,2361,661],{"class":256},[243,2363,2085],{"class":260},[243,2365,519],{"class":256},[243,2367,757],{"class":260},[243,2369,264],{"class":256},[243,2371,672],{"class":325},[243,2373,2374,2377,2379,2381,2383,2385,2387,2389,2391,2393,2395,2397,2399,2401,2403,2405,2407,2409,2411,2413,2415,2417],{"class":245,"line":934},[243,2375,2376],{"class":648},"  confirm",[243,2378,652],{"class":325},[243,2380,655],{"class":256},[243,2382,802],{"class":325},[243,2384,661],{"class":256},[243,2386,1470],{"class":260},[243,2388,519],{"class":256},[243,2390,752],{"class":260},[243,2392,394],{"class":256},[243,2394,1564],{"class":325},[243,2396,661],{"class":256},[243,2398,1470],{"class":260},[243,2400,519],{"class":256},[243,2402,1516],{"class":260},[243,2404,394],{"class":256},[243,2406,2085],{"class":325},[243,2408,661],{"class":256},[243,2410,2085],{"class":260},[243,2412,519],{"class":256},[243,2414,757],{"class":260},[243,2416,264],{"class":256},[243,2418,672],{"class":325},[243,2420,2421],{"class":245,"line":944},[243,2422,348],{"class":256},[243,2424,2425,2427,2429],{"class":245,"line":952},[243,2426,412],{"class":256},[243,2428,363],{"class":325},[243,2430,382],{"class":256},[243,2432,2433],{"class":245,"line":967},[243,2434,284],{"emptyLinePlaceholder":283},[243,2436,2437,2439,2441],{"class":245,"line":982},[243,2438,322],{"class":256},[243,2440,427],{"class":325},[243,2442,382],{"class":256},[243,2444,2445,2447,2449,2451,2453,2455,2457,2459],{"class":245,"line":997},[243,2446,435],{"class":256},[243,2448,869],{"class":325},[243,2450,474],{"class":290},[243,2452,372],{"class":256},[243,2454,375],{"class":256},[243,2456,878],{"class":273},[243,2458,375],{"class":256},[243,2460,382],{"class":256},[243,2462,2463,2465,2467,2469,2471,2473,2475,2477],{"class":245,"line":1012},[243,2464,468],{"class":256},[243,2466,890],{"class":325},[243,2468,474],{"class":290},[243,2470,372],{"class":256},[243,2472,375],{"class":256},[243,2474,899],{"class":273},[243,2476,375],{"class":256},[243,2478,382],{"class":256},[243,2480,2481,2483,2485,2487,2489,2491,2493,2495,2497,2500,2502,2504],{"class":245,"line":1027},[243,2482,909],{"class":256},[243,2484,912],{"class":325},[243,2486,474],{"class":290},[243,2488,372],{"class":256},[243,2490,375],{"class":256},[243,2492,921],{"class":273},[243,2494,375],{"class":256},[243,2496,339],{"class":256},[243,2498,2499],{"class":260},"Step 3 — Pick a plan",[243,2501,412],{"class":256},[243,2503,912],{"class":325},[243,2505,382],{"class":256},[243,2507,2508,2510,2512,2514,2516,2518,2521,2523],{"class":245,"line":1033},[243,2509,909],{"class":256},[243,2511,1038],{"class":325},[243,2513,474],{"class":290},[243,2515,372],{"class":256},[243,2517,375],{"class":256},[243,2519,2520],{"class":273},"flex gap-3",[243,2522,375],{"class":256},[243,2524,382],{"class":256},[243,2526,2527,2529],{"class":245,"line":1054},[243,2528,1057],{"class":256},[243,2530,2531],{"class":325},"label\n",[243,2533,2534,2537,2539,2541,2544],{"class":245,"line":1097},[243,2535,2536],{"class":290},"            v-for",[243,2538,372],{"class":256},[243,2540,375],{"class":256},[243,2542,2543],{"class":273},"p in ['free', 'pro']",[243,2545,964],{"class":256},[243,2547,2548,2551,2553,2555,2557],{"class":245,"line":1105},[243,2549,2550],{"class":290},"            :key",[243,2552,372],{"class":256},[243,2554,375],{"class":256},[243,2556,198],{"class":273},[243,2558,964],{"class":256},[243,2560,2561,2563,2565,2567,2570],{"class":245,"line":1120},[243,2562,1108],{"class":290},[243,2564,372],{"class":256},[243,2566,375],{"class":256},[243,2568,2569],{"class":273},"flex-1 flex items-center gap-2 rounded-xl border-2 p-4 cursor-pointer transition",[243,2571,964],{"class":256},[243,2573,2574,2577,2579,2581,2584],{"class":245,"line":1135},[243,2575,2576],{"class":290},"            :class",[243,2578,372],{"class":256},[243,2580,375],{"class":256},[243,2582,2583],{"class":273},"plan === p ? 'border-indigo-600 bg-indigo-50' : 'border-gray-200'",[243,2585,964],{"class":256},[243,2587,2588],{"class":245,"line":1149},[243,2589,1152],{"class":256},[243,2591,2592,2595,2598,2601,2603,2605,2608,2610,2612,2614,2616,2619,2621,2624,2626,2628,2630,2632,2634,2636,2638,2641,2643],{"class":245,"line":1155},[243,2593,2594],{"class":256},"            \u003C",[243,2596,2597],{"class":325},"input",[243,2599,2600],{"class":290}," v-model",[243,2602,372],{"class":256},[243,2604,375],{"class":256},[243,2606,2607],{"class":273},"plan",[243,2609,375],{"class":256},[243,2611,253],{"class":290},[243,2613,372],{"class":256},[243,2615,375],{"class":256},[243,2617,2618],{"class":273},"radio",[243,2620,375],{"class":256},[243,2622,2623],{"class":290}," :value",[243,2625,372],{"class":256},[243,2627,375],{"class":256},[243,2629,198],{"class":273},[243,2631,375],{"class":256},[243,2633,474],{"class":290},[243,2635,372],{"class":256},[243,2637,375],{"class":256},[243,2639,2640],{"class":273},"sr-only",[243,2642,375],{"class":256},[243,2644,441],{"class":256},[243,2646,2647,2649,2651,2653,2655,2657,2660,2662,2664,2667,2669,2671],{"class":245,"line":1161},[243,2648,2594],{"class":256},[243,2650,243],{"class":325},[243,2652,474],{"class":290},[243,2654,372],{"class":256},[243,2656,375],{"class":256},[243,2658,2659],{"class":273},"font-semibold capitalize text-sm",[243,2661,375],{"class":256},[243,2663,339],{"class":256},[243,2665,2666],{"class":260},"{{ p }}",[243,2668,412],{"class":256},[243,2670,243],{"class":325},[243,2672,382],{"class":256},[243,2674,2675,2677,2680],{"class":245,"line":1171},[243,2676,1164],{"class":256},[243,2678,2679],{"class":325},"label",[243,2681,382],{"class":256},[243,2683,2684,2686,2688],{"class":245,"line":1181},[243,2685,937],{"class":256},[243,2687,1038],{"class":325},[243,2689,382],{"class":256},[243,2691,2692,2694,2696,2698,2700,2702,2704,2706],{"class":245,"line":1191},[243,2693,909],{"class":256},[243,2695,1038],{"class":325},[243,2697,474],{"class":290},[243,2699,372],{"class":256},[243,2701,375],{"class":256},[243,2703,1047],{"class":273},[243,2705,375],{"class":256},[243,2707,382],{"class":256},[243,2709,2710,2712,2714,2716,2718,2720,2722,2724,2726,2728,2730,2732,2734,2736,2738,2740,2742],{"class":245,"line":1200},[243,2711,1057],{"class":256},[243,2713,1060],{"class":325},[243,2715,474],{"class":290},[243,2717,372],{"class":256},[243,2719,375],{"class":256},[243,2721,1069],{"class":273},[243,2723,375],{"class":256},[243,2725,1074],{"class":290},[243,2727,372],{"class":256},[243,2729,375],{"class":256},[243,2731,1809],{"class":273},[243,2733,375],{"class":256},[243,2735,339],{"class":256},[243,2737,1816],{"class":260},[243,2739,412],{"class":256},[243,2741,1060],{"class":325},[243,2743,382],{"class":256},[243,2745,2746,2748],{"class":245,"line":1868},[243,2747,1057],{"class":256},[243,2749,1102],{"class":325},[243,2751,2752,2754,2756,2758,2760],{"class":245,"line":1873},[243,2753,1108],{"class":290},[243,2755,372],{"class":256},[243,2757,375],{"class":256},[243,2759,1115],{"class":273},[243,2761,964],{"class":256},[243,2763,2764,2766,2768,2770,2773],{"class":245,"line":1878},[243,2765,1123],{"class":290},[243,2767,372],{"class":256},[243,2769,375],{"class":256},[243,2771,2772],{"class":273},"submitting",[243,2774,964],{"class":256},[243,2776,2777,2779,2781,2783,2786],{"class":245,"line":1887},[243,2778,1138],{"class":290},[243,2780,372],{"class":256},[243,2782,375],{"class":256},[243,2784,2785],{"class":273},"submit",[243,2787,964],{"class":256},[243,2789,2790],{"class":245,"line":1896},[243,2791,1152],{"class":256},[243,2793,2794],{"class":245,"line":1905},[243,2795,2796],{"class":260},"            Finish\n",[243,2798,2799,2801,2803],{"class":245,"line":1914},[243,2800,1164],{"class":256},[243,2802,1060],{"class":325},[243,2804,382],{"class":256},[243,2806,2808,2810,2812],{"class":245,"line":2807},60,[243,2809,1174],{"class":256},[243,2811,1038],{"class":325},[243,2813,382],{"class":256},[243,2815,2817,2819,2821],{"class":245,"line":2816},61,[243,2818,1184],{"class":256},[243,2820,890],{"class":325},[243,2822,382],{"class":256},[243,2824,2826,2828,2830],{"class":245,"line":2825},62,[243,2827,491],{"class":256},[243,2829,869],{"class":325},[243,2831,382],{"class":256},[243,2833,2835,2837,2839],{"class":245,"line":2834},63,[243,2836,412],{"class":256},[243,2838,427],{"class":325},[243,2840,382],{"class":256},[2842,2843,2844],"blockquote",{},[198,2845,2846,2847,2852,2853,2856,2857,2860],{},"Caller code is in ",[2848,2849,2851],"a",{"href":2850},"#pattern-a-pass-an-oncomplete-callback-through-props","Pattern A"," below — ",[213,2854,2855],{},"openModal(WizardStep1)"," alone won't deliver the final result, because ",[213,2858,2859],{},"replaceModal"," rejects intermediate step promises.",[228,2862,2864],{"id":2863},"how-state-flows-between-steps","How state flows between steps",[2866,2867,2870,2872,2873,2875,2876,2879],"callout",{"color":2868,"icon":2869},"warning","i-lucide-triangle-alert",[213,2871,2859],{}," rejects the previous step's promise. The handle returned by ",[213,2874,2855],{}," rejects as soon as Step 2 opens — you cannot chain a single ",[213,2877,2878],{},"await"," from the caller through to Step 3.",[233,2881,2885],{"className":2882,"code":2884,"language":977},[2883],"language-text","openModal(Step1)              ← caller awaits this\n  → replaceModal(Step2, ...)  ← Step1 promise rejects with ModalClosedError\n    → replaceModal(Step3, ...) ← Step2 promise rejects with ModalClosedError\n      → confirm({...})        ← resolves Step3's promise only\n",[213,2886,2884],{"__ignoreMap":239},[198,2888,2889],{},"Two practical patterns to deliver the final payload to the caller:",[2891,2892,2894,2895,2898],"h3",{"id":2893},"pattern-a-pass-an-oncomplete-callback-through-props","Pattern A — pass an ",[213,2896,2897],{},"onComplete"," callback through props",[198,2900,2901,2902,2904,2905,2908],{},"Each step receives an ",[213,2903,2897],{}," prop and forwards it to the next step. The final step calls it before ",[213,2906,2907],{},"confirm()",". Simple, no extra state container needed.",[233,2910,2912],{"className":351,"code":2911,"filename":526,"language":354,"meta":239,"style":239},"\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{ onComplete: (result: WizardResult) => void }>()\n\nfunction next() {\n  replaceModal(WizardStep2, {\n    props: { name: name.value, onComplete: props.onComplete },\n    instantEnter: true\n  })\n}\n\u003C\u002Fscript>\n",[213,2913,2914,2934,2974,2978,2988,3000,3032,3040,3046,3050],{"__ignoreMap":239},[243,2915,2916,2918,2920,2922,2924,2926,2928,2930,2932],{"class":245,"line":246},[243,2917,322],{"class":256},[243,2919,363],{"class":325},[243,2921,366],{"class":290},[243,2923,369],{"class":290},[243,2925,372],{"class":256},[243,2927,375],{"class":256},[243,2929,238],{"class":273},[243,2931,375],{"class":256},[243,2933,382],{"class":256},[243,2935,2936,2938,2940,2942,2944,2946,2949,2951,2953,2957,2959,2961,2964,2967,2970,2972],{"class":245,"line":280},[243,2937,683],{"class":290},[243,2939,1388],{"class":260},[243,2941,372],{"class":256},[243,2943,1393],{"class":648},[243,2945,2108],{"class":256},[243,2947,2948],{"class":325}," onComplete",[243,2950,661],{"class":256},[243,2952,746],{"class":256},[243,2954,2956],{"class":2955},"sHdIc","result",[243,2958,661],{"class":256},[243,2960,2063],{"class":313},[243,2962,2963],{"class":256},")",[243,2965,2966],{"class":290}," =>",[243,2968,2969],{"class":313}," void",[243,2971,2125],{"class":256},[243,2973,699],{"class":260},[243,2975,2976],{"class":245,"line":287},[243,2977,284],{"emptyLinePlaceholder":283},[243,2979,2980,2982,2984,2986],{"class":245,"line":307},[243,2981,729],{"class":290},[243,2983,732],{"class":648},[243,2985,735],{"class":256},[243,2987,304],{"class":256},[243,2989,2990,2992,2994,2996,2998],{"class":245,"line":345},[243,2991,600],{"class":648},[243,2993,652],{"class":325},[243,2995,785],{"class":260},[243,2997,394],{"class":256},[243,2999,304],{"class":256},[243,3001,3002,3004,3006,3008,3010,3012,3014,3016,3018,3020,3022,3024,3026,3028,3030],{"class":245,"line":432},[243,3003,795],{"class":325},[243,3005,661],{"class":256},[243,3007,257],{"class":256},[243,3009,802],{"class":325},[243,3011,661],{"class":256},[243,3013,802],{"class":260},[243,3015,519],{"class":256},[243,3017,757],{"class":260},[243,3019,394],{"class":256},[243,3021,2948],{"class":325},[243,3023,661],{"class":256},[243,3025,1470],{"class":260},[243,3027,519],{"class":256},[243,3029,2897],{"class":260},[243,3031,813],{"class":256},[243,3033,3034,3036,3038],{"class":245,"line":444},[243,3035,819],{"class":325},[243,3037,661],{"class":256},[243,3039,825],{"class":824},[243,3041,3042,3044],{"class":245,"line":465},[243,3043,831],{"class":256},[243,3045,672],{"class":325},[243,3047,3048],{"class":245,"line":488},[243,3049,348],{"class":256},[243,3051,3052,3054,3056],{"class":245,"line":498},[243,3053,412],{"class":256},[243,3055,363],{"class":325},[243,3057,382],{"class":256},[233,3059,3062],{"className":351,"code":3060,"filename":3061,"language":354,"meta":239,"style":239},"\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{ name: string; email: string; onComplete: (r: WizardResult) => void }>()\nconst { confirm } = useModalContext\u003CWizardResult>()\n\nasync function submit() {\n  const result = { name: props.name, email: props.email, plan: plan.value }\n  props.onComplete(result)\n  confirm(result)\n}\n\u003C\u002Fscript>\n","WizardStep3.vue (final)",[213,3063,3064,3084,3135,3157,3161,3173,3221,3236,3246,3250],{"__ignoreMap":239},[243,3065,3066,3068,3070,3072,3074,3076,3078,3080,3082],{"class":245,"line":246},[243,3067,322],{"class":256},[243,3069,363],{"class":325},[243,3071,366],{"class":290},[243,3073,369],{"class":290},[243,3075,372],{"class":256},[243,3077,375],{"class":256},[243,3079,238],{"class":273},[243,3081,375],{"class":256},[243,3083,382],{"class":256},[243,3085,3086,3088,3090,3092,3094,3096,3098,3100,3102,3104,3106,3108,3110,3112,3114,3116,3118,3121,3123,3125,3127,3129,3131,3133],{"class":245,"line":280},[243,3087,683],{"class":290},[243,3089,1388],{"class":260},[243,3091,372],{"class":256},[243,3093,1393],{"class":648},[243,3095,2108],{"class":256},[243,3097,802],{"class":325},[243,3099,661],{"class":256},[243,3101,1378],{"class":313},[243,3103,2074],{"class":256},[243,3105,1564],{"class":325},[243,3107,661],{"class":256},[243,3109,1378],{"class":313},[243,3111,2074],{"class":256},[243,3113,2948],{"class":325},[243,3115,661],{"class":256},[243,3117,746],{"class":256},[243,3119,3120],{"class":2955},"r",[243,3122,661],{"class":256},[243,3124,2063],{"class":313},[243,3126,2963],{"class":256},[243,3128,2966],{"class":290},[243,3130,2969],{"class":313},[243,3132,2125],{"class":256},[243,3134,699],{"class":260},[243,3136,3137,3139,3141,3143,3145,3147,3149,3151,3153,3155],{"class":245,"line":287},[243,3138,683],{"class":290},[243,3140,257],{"class":256},[243,3142,2136],{"class":260},[243,3144,612],{"class":256},[243,3146,693],{"class":256},[243,3148,696],{"class":648},[243,3150,322],{"class":256},[243,3152,2147],{"class":313},[243,3154,339],{"class":256},[243,3156,699],{"class":260},[243,3158,3159],{"class":245,"line":307},[243,3160,284],{"emptyLinePlaceholder":283},[243,3162,3163,3165,3167,3169,3171],{"class":245,"line":345},[243,3164,2288],{"class":290},[243,3166,2291],{"class":290},[243,3168,2294],{"class":648},[243,3170,735],{"class":256},[243,3172,304],{"class":256},[243,3174,3175,3178,3181,3183,3185,3187,3189,3191,3193,3195,3197,3199,3201,3203,3205,3207,3209,3211,3213,3215,3217,3219],{"class":245,"line":432},[243,3176,3177],{"class":290},"  const",[243,3179,3180],{"class":260}," result",[243,3182,693],{"class":256},[243,3184,257],{"class":256},[243,3186,802],{"class":325},[243,3188,661],{"class":256},[243,3190,1470],{"class":260},[243,3192,519],{"class":256},[243,3194,752],{"class":260},[243,3196,394],{"class":256},[243,3198,1564],{"class":325},[243,3200,661],{"class":256},[243,3202,1470],{"class":260},[243,3204,519],{"class":256},[243,3206,1516],{"class":260},[243,3208,394],{"class":256},[243,3210,2085],{"class":325},[243,3212,661],{"class":256},[243,3214,2085],{"class":260},[243,3216,519],{"class":256},[243,3218,757],{"class":260},[243,3220,1381],{"class":256},[243,3222,3223,3226,3228,3230,3232,3234],{"class":245,"line":444},[243,3224,3225],{"class":260},"  props",[243,3227,519],{"class":256},[243,3229,2897],{"class":648},[243,3231,652],{"class":325},[243,3233,2956],{"class":260},[243,3235,672],{"class":325},[243,3237,3238,3240,3242,3244],{"class":245,"line":465},[243,3239,2376],{"class":648},[243,3241,652],{"class":325},[243,3243,2956],{"class":260},[243,3245,672],{"class":325},[243,3247,3248],{"class":245,"line":488},[243,3249,348],{"class":256},[243,3251,3252,3254,3256],{"class":245,"line":498},[243,3253,412],{"class":256},[243,3255,363],{"class":325},[243,3257,382],{"class":256},[233,3259,3262],{"className":351,"code":3260,"filename":3261,"language":354,"meta":239,"style":239},"\u003Cscript setup lang=\"ts\">\nimport { ModalClosedError, openModal } from '@kolirt\u002Fvue-modal'\nimport WizardStep1 from '.\u002FWizardStep1.vue'\n\nasync function startWizard() {\n  let result: WizardResult | null = null\n  try {\n    await openModal(WizardStep1, {\n      props: { onComplete: (r) => (result = r) }\n    })\n  } catch (e) {\n    if (!(e instanceof ModalClosedError)) throw e\n  }\n  \u002F\u002F `result` is non-null only if Step 3 ran `onComplete()`\n  if (result) console.log('Onboarding complete', result)\n}\n\u003C\u002Fscript>\n","OnboardingTrigger.vue",[213,3263,3264,3284,3308,3322,3326,3339,3360,3367,3382,3417,3424,3441,3468,3473,3478,3511,3515],{"__ignoreMap":239},[243,3265,3266,3268,3270,3272,3274,3276,3278,3280,3282],{"class":245,"line":246},[243,3267,322],{"class":256},[243,3269,363],{"class":325},[243,3271,366],{"class":290},[243,3273,369],{"class":290},[243,3275,372],{"class":256},[243,3277,375],{"class":256},[243,3279,238],{"class":273},[243,3281,375],{"class":256},[243,3283,382],{"class":256},[243,3285,3286,3288,3290,3293,3295,3298,3300,3302,3304,3306],{"class":245,"line":280},[243,3287,250],{"class":249},[243,3289,257],{"class":256},[243,3291,3292],{"class":260}," ModalClosedError",[243,3294,394],{"class":256},[243,3296,3297],{"class":260}," openModal",[243,3299,264],{"class":256},[243,3301,267],{"class":249},[243,3303,270],{"class":256},[243,3305,274],{"class":273},[243,3307,277],{"class":256},[243,3309,3310,3312,3314,3316,3318,3320],{"class":245,"line":287},[243,3311,250],{"class":249},[243,3313,1303],{"class":260},[243,3315,630],{"class":249},[243,3317,270],{"class":256},[243,3319,1310],{"class":273},[243,3321,277],{"class":256},[243,3323,3324],{"class":245,"line":307},[243,3325,284],{"emptyLinePlaceholder":283},[243,3327,3328,3330,3332,3335,3337],{"class":245,"line":345},[243,3329,2288],{"class":290},[243,3331,2291],{"class":290},[243,3333,3334],{"class":648}," startWizard",[243,3336,735],{"class":256},[243,3338,304],{"class":256},[243,3340,3341,3344,3346,3348,3350,3352,3355,3357],{"class":245,"line":432},[243,3342,3343],{"class":290},"  let",[243,3345,3180],{"class":260},[243,3347,661],{"class":256},[243,3349,2063],{"class":313},[243,3351,2178],{"class":256},[243,3353,3354],{"class":313}," null",[243,3356,693],{"class":256},[243,3358,3359],{"class":256}," null\n",[243,3361,3362,3365],{"class":245,"line":444},[243,3363,3364],{"class":249},"  try",[243,3366,304],{"class":256},[243,3368,3369,3372,3374,3376,3378,3380],{"class":245,"line":465},[243,3370,3371],{"class":249},"    await",[243,3373,3297],{"class":648},[243,3375,652],{"class":325},[243,3377,1463],{"class":260},[243,3379,394],{"class":256},[243,3381,304],{"class":256},[243,3383,3384,3387,3389,3391,3393,3395,3397,3399,3401,3403,3405,3407,3409,3412,3415],{"class":245,"line":488},[243,3385,3386],{"class":325},"      props",[243,3388,661],{"class":256},[243,3390,257],{"class":256},[243,3392,2948],{"class":648},[243,3394,661],{"class":256},[243,3396,746],{"class":256},[243,3398,3120],{"class":2955},[243,3400,2963],{"class":256},[243,3402,2966],{"class":290},[243,3404,746],{"class":325},[243,3406,2956],{"class":260},[243,3408,693],{"class":256},[243,3410,3411],{"class":260}," r",[243,3413,3414],{"class":325},") ",[243,3416,348],{"class":256},[243,3418,3419,3422],{"class":245,"line":498},[243,3420,3421],{"class":256},"    }",[243,3423,672],{"class":325},[243,3425,3426,3428,3431,3433,3436,3438],{"class":245,"line":640},[243,3427,831],{"class":256},[243,3429,3430],{"class":249}," catch",[243,3432,746],{"class":325},[243,3434,3435],{"class":260},"e",[243,3437,3414],{"class":325},[243,3439,3440],{"class":256},"{\n",[243,3442,3443,3446,3448,3450,3452,3454,3457,3459,3462,3465],{"class":245,"line":645},[243,3444,3445],{"class":249},"    if",[243,3447,746],{"class":325},[243,3449,749],{"class":256},[243,3451,652],{"class":325},[243,3453,3435],{"class":260},[243,3455,3456],{"class":256}," instanceof",[243,3458,3292],{"class":313},[243,3460,3461],{"class":325},")) ",[243,3463,3464],{"class":249},"throw",[243,3466,3467],{"class":260}," e\n",[243,3469,3470],{"class":245,"line":675},[243,3471,3472],{"class":256},"  }\n",[243,3474,3475],{"class":245,"line":680},[243,3476,3477],{"class":774},"  \u002F\u002F `result` is non-null only if Step 3 ran `onComplete()`\n",[243,3479,3480,3482,3484,3486,3488,3491,3493,3496,3498,3500,3503,3505,3507,3509],{"class":245,"line":702},[243,3481,743],{"class":249},[243,3483,746],{"class":325},[243,3485,2956],{"class":260},[243,3487,3414],{"class":325},[243,3489,3490],{"class":260},"console",[243,3492,519],{"class":256},[243,3494,3495],{"class":648},"log",[243,3497,652],{"class":325},[243,3499,301],{"class":256},[243,3501,3502],{"class":273},"Onboarding complete",[243,3504,301],{"class":256},[243,3506,394],{"class":256},[243,3508,3180],{"class":260},[243,3510,672],{"class":325},[243,3512,3513],{"class":245,"line":721},[243,3514,348],{"class":256},[243,3516,3517,3519,3521],{"class":245,"line":726},[243,3518,412],{"class":256},[243,3520,363],{"class":325},[243,3522,382],{"class":256},[2891,3524,3526],{"id":3525},"pattern-b-stack-instead-of-replace","Pattern B — stack instead of replace",[198,3528,3529,3530,3534,3535,3538,3539,3541],{},"If you don't need the visual continuity of a single dialog, stacking works without any callback wiring — see ",[2848,3531,3533],{"href":3532},"#approach-2-stacking-branching-flows","Approach 2"," below. Each step's ",[213,3536,3537],{},"confirm(data)"," resolves the awaited ",[213,3540,225],{}," of that step, so the caller can chain results step-by-step.",[228,3543,3545],{"id":3544},"approach-2-stacking-branching-flows","Approach 2 — Stacking (branching flows)",[198,3547,3548],{},"When steps are non-linear or the user can meaningfully go back without losing input, stack instead of replace:",[233,3550,3552],{"className":235,"code":3551,"language":238,"meta":239,"style":239},"\u002F\u002F Inside StepA.vue\nimport { openModal } from '@kolirt\u002Fvue-modal'\nimport StepB from '.\u002FStepB.vue'\n\nconst result = await openModal(StepB, {\n  props: { fromStep: 'A' }\n})\n\u002F\u002F StepA stays mounted and visible behind StepB\n",[213,3553,3554,3559,3577,3593,3597,3618,3640,3646],{"__ignoreMap":239},[243,3555,3556],{"class":245,"line":246},[243,3557,3558],{"class":774},"\u002F\u002F Inside StepA.vue\n",[243,3560,3561,3563,3565,3567,3569,3571,3573,3575],{"class":245,"line":280},[243,3562,250],{"class":249},[243,3564,257],{"class":256},[243,3566,3297],{"class":260},[243,3568,264],{"class":256},[243,3570,267],{"class":249},[243,3572,270],{"class":256},[243,3574,274],{"class":273},[243,3576,277],{"class":256},[243,3578,3579,3581,3584,3586,3588,3591],{"class":245,"line":287},[243,3580,250],{"class":249},[243,3582,3583],{"class":260}," StepB ",[243,3585,630],{"class":249},[243,3587,270],{"class":256},[243,3589,3590],{"class":273},".\u002FStepB.vue",[243,3592,277],{"class":256},[243,3594,3595],{"class":245,"line":307},[243,3596,284],{"emptyLinePlaceholder":283},[243,3598,3599,3601,3604,3606,3609,3611,3614,3616],{"class":245,"line":345},[243,3600,683],{"class":290},[243,3602,3603],{"class":260}," result ",[243,3605,372],{"class":256},[243,3607,3608],{"class":249}," await",[243,3610,3297],{"class":648},[243,3612,3613],{"class":260},"(StepB",[243,3615,394],{"class":256},[243,3617,304],{"class":256},[243,3619,3620,3622,3624,3626,3629,3631,3633,3636,3638],{"class":245,"line":432},[243,3621,3225],{"class":325},[243,3623,661],{"class":256},[243,3625,257],{"class":256},[243,3627,3628],{"class":325}," fromStep",[243,3630,661],{"class":256},[243,3632,270],{"class":256},[243,3634,3635],{"class":273},"A",[243,3637,301],{"class":256},[243,3639,1381],{"class":256},[243,3641,3642,3644],{"class":245,"line":444},[243,3643,612],{"class":256},[243,3645,672],{"class":260},[243,3647,3648],{"class":245,"line":465},[243,3649,3650],{"class":774},"\u002F\u002F StepA stays mounted and visible behind StepB\n",[198,3652,3653],{},"The underlying modal preserves its local state (scroll position, form values) and the user experiences a layered dialog.",[228,3655,3657],{"id":3656},"when-to-choose-which","When to choose which",[3659,3660,3661,3674],"table",{},[3662,3663,3664],"thead",{},[3665,3666,3667,3670,3672],"tr",{},[3668,3669],"th",{},[3668,3671,210],{},[3668,3673,221],{},[3675,3676,3677,3688,3697,3706,3715],"tbody",{},[3665,3678,3679,3683,3686],{},[3680,3681,3682],"td",{},"Steps share one dismiss action",[3680,3684,3685],{},"✓",[3680,3687],{},[3665,3689,3690,3693,3695],{},[3680,3691,3692],{},"Each step is visually the same dialog shell",[3680,3694,3685],{},[3680,3696],{},[3665,3698,3699,3702,3704],{},[3680,3700,3701],{},"User must be able to see\u002Finteract with step N-1",[3680,3703],{},[3680,3705,3685],{},[3665,3707,3708,3711,3713],{},[3680,3709,3710],{},"Branching (step 2A vs 2B)",[3680,3712],{},[3680,3714,3685],{},[3665,3716,3717,3720,3723],{},[3680,3718,3719],{},"Memory \u002F mount cost of accumulating steps",[3680,3721,3722],{},"Better",[3680,3724,3725],{},"Worse",[228,3727,3729],{"id":3728},"related","Related",[3731,3732,3733,3738,3742],"ul",{},[205,3734,3735],{},[2848,3736,3737],{"href":137},"API reference — functions",[205,3739,3740],{},[2848,3741,82],{"href":83},[205,3743,3744],{},[2848,3745,111],{"href":112},[3747,3748,3749],"style",{},"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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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}",{"title":239,"searchDepth":280,"depth":280,"links":3751},[3752,3753,3754,3759,3760,3761],{"id":230,"depth":280,"text":231},{"id":507,"depth":280,"text":508},{"id":2863,"depth":280,"text":2864,"children":3755},[3756,3758],{"id":2893,"depth":287,"text":3757},"Pattern A — pass an onComplete callback through props",{"id":3525,"depth":287,"text":3526},{"id":3544,"depth":280,"text":3545},{"id":3656,"depth":280,"text":3657},{"id":3728,"depth":280,"text":3729},"Build a multi-step wizard using replaceModal + instantEnter so steps swap without full open\u002Fclose transitions. Compares step-replace vs. stacking.","md",null,{},{"title":123,"description":3762},"Gqy1bh0WTLK-8bfwatl2HLVmj7jkpZTAUEOAOik5PLw",[3769,3771],{"title":119,"path":120,"stem":121,"description":3770,"children":-1},"A Cmd+K command palette built as a fullscreen modal with fuzzy search, using a dedicated modal group and useModal for clean open\u002Fclose state.",{"title":127,"path":128,"stem":129,"description":3772,"children":-1},"Wire a fetch\u002Faxios interceptor to open an error modal from anywhere. Uses a dedicated high-z-index group, replaceModal to deduplicate, and closeModalsByGroup on logout.",1779523619887]