[{"data":1,"prerenderedAt":2229},["ShallowReactive",2],{"navigation_docs":3,"-recipes-image-lightbox":188,"-recipes-image-lightbox-surround":2224},[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":115,"body":190,"description":2218,"extension":2219,"links":2220,"meta":2221,"navigation":283,"path":116,"seo":2222,"stem":117,"__hash__":2223},"docs\u002F5.recipes\u002F3.image-lightbox.md",{"type":191,"value":192,"toc":2210},"minimark",[193,197,201,227,232,349,512,516,2015,2019,2036,2063,2070,2074,2082,2145,2152,2156,2186,2190,2206],[194,195,115],"h1",{"id":196},"image-lightbox",[198,199,200],"p",{},"A lightbox that:",[202,203,204,208,216],"ul",{},[205,206,207],"li",{},"Closes on backdrop click and Esc (default behaviour — no extra options needed).",[205,209,210,211,215],{},"Navigates between images with ← \u002F → arrow keys, gated by ",[212,213,214],"code",{},"isTopmostGlobal"," so keyboard shortcuts don't fire when another modal (in any group) is stacked on top.",[205,217,218,219,222,223,226],{},"Uses ",[212,220,221],{},"replaceModal"," + ",[212,224,225],{},"instantEnter: true"," to swap images without the open\u002Fclose transition.",[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['lightbox']> {}\n}\n","main.ts","ts","",[212,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},"lightbox",[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  \u003C!-- Close on overlay click (default), close on Esc (default) -->\n  \u003CModalTarget group=\"lightbox\">\n    \u003CModalOverlay class=\"bg-black\u002F80\" \u002F>\n  \u003C\u002FModalTarget>\n\u003C\u002Ftemplate>\n","App.vue","vue",[212,356,357,383,408,417,421,430,442,449,470,493,503],{"__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],{"class":245,"line":444},7,[243,446,448],{"class":447},"sHwdD","  \u003C!-- Close on overlay click (default), close on Esc (default) -->\n",[243,450,452,454,457,460,462,464,466,468],{"class":245,"line":451},8,[243,453,435],{"class":256},[243,455,456],{"class":325},"ModalTarget",[243,458,459],{"class":290}," group",[243,461,372],{"class":256},[243,463,375],{"class":256},[243,465,331],{"class":273},[243,467,375],{"class":256},[243,469,382],{"class":256},[243,471,473,476,479,482,484,486,489,491],{"class":245,"line":472},9,[243,474,475],{"class":256},"    \u003C",[243,477,478],{"class":325},"ModalOverlay",[243,480,481],{"class":290}," class",[243,483,372],{"class":256},[243,485,375],{"class":256},[243,487,488],{"class":273},"bg-black\u002F80",[243,490,375],{"class":256},[243,492,441],{"class":256},[243,494,496,499,501],{"class":245,"line":495},10,[243,497,498],{"class":256},"  \u003C\u002F",[243,500,456],{"class":325},[243,502,382],{"class":256},[243,504,506,508,510],{"class":245,"line":505},11,[243,507,412],{"class":256},[243,509,427],{"class":325},[243,511,382],{"class":256},[228,513,515],{"id":514},"the-lightbox-component","The lightbox component",[517,518,519,1682],"code-group",{},[233,520,523],{"className":351,"code":521,"filename":522,"language":354,"meta":239,"style":239},"\u003Cscript setup lang=\"ts\">\nimport { onMounted, onBeforeUnmount } from 'vue'\nimport {\n  ModalRoot,\n  ModalContent,\n  replaceModal,\n  useModalContext\n} from '@kolirt\u002Fvue-modal'\n\ndefineOptions({ modalGroup: 'lightbox' })\n\nconst props = defineProps\u003C{\n  images: string[]\n  index: number\n}>()\n\nconst { close, isTopmostGlobal } = useModalContext()\n\nconst hasPrev = props.index > 0\nconst hasNext = props.index \u003C props.images.length - 1\n\nfunction go(newIndex: number) {\n  replaceModal(ImageLightbox, {\n    props: { images: props.images, index: newIndex },\n    instantEnter: true  \u002F\u002F skip enter animation — instant swap\n  })\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  \u002F\u002F Only react when this is the topmost modal across all groups\n  if (!isTopmostGlobal.value) return\n  if (e.key === 'ArrowLeft' && hasPrev) go(props.index - 1)\n  if (e.key === 'ArrowRight' && hasNext) go(props.index + 1)\n}\n\nonMounted(() => window.addEventListener('keydown', onKeydown))\nonBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CModalRoot class=\"flex items-center justify-center\">\n    \u003CModalContent class=\"relative w-full\">\n      \u003Cdiv class=\"relative z-10 flex items-center gap-4 px-4 max-w-5xl w-full\">\n        \u003C!-- Previous -->\n        \u003Cbutton\n          v-if=\"hasPrev\"\n          class=\"shrink-0 rounded-full bg-white\u002F10 hover:bg-white\u002F25 p-3 text-white transition\"\n          aria-label=\"Previous image\"\n          @click=\"go(props.index - 1)\"\n        >\n          ←\n        \u003C\u002Fbutton>\n\n        \u003C!-- Image -->\n        \u003Cdiv class=\"flex-1 flex items-center justify-center\">\n          \u003Cimg\n            :src=\"props.images[props.index]\"\n            :alt=\"`Image ${props.index + 1} of ${props.images.length}`\"\n            class=\"max-h-[80vh] max-w-full rounded-xl object-contain shadow-2xl\"\n          \u002F>\n        \u003C\u002Fdiv>\n\n        \u003C!-- Next -->\n        \u003Cbutton\n          v-if=\"hasNext\"\n          class=\"shrink-0 rounded-full bg-white\u002F10 hover:bg-white\u002F25 p-3 text-white transition\"\n          aria-label=\"Next image\"\n          @click=\"go(props.index + 1)\"\n        >\n          →\n        \u003C\u002Fbutton>\n\n        \u003C!-- Close -->\n        \u003Cbutton\n          class=\"absolute -top-10 right-0 text-white\u002F70 hover:text-white text-2xl\"\n          aria-label=\"Close\"\n          @click=\"close()\"\n        >\n          ✕\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Counter -->\n      \u003Cdiv class=\"absolute bottom-6 left-1\u002F2 -translate-x-1\u002F2 text-white\u002F60 text-sm\">\n        {{ props.index + 1 }} \u002F {{ props.images.length }}\n      \u003C\u002Fdiv>\n    \u003C\u002FModalContent>\n  \u003C\u002FModalRoot>\n\u003C\u002Ftemplate>\n","ImageLightbox.vue",[212,524,525,545,569,575,583,590,597,602,615,619,648,652,669,683,694,703,708,733,738,763,799,804,829,843,877,892,900,905,910,932,938,963,1016,1062,1067,1072,1108,1139,1148,1153,1162,1183,1204,1226,1232,1241,1257,1272,1287,1302,1308,1314,1325,1330,1336,1356,1365,1380,1395,1410,1416,1425,1430,1436,1443,1457,1470,1484,1498,1503,1509,1518,1523,1529,1536,1550,1564,1578,1583,1589,1598,1608,1613,1619,1639,1645,1654,1664,1673],{"__ignoreMap":239},[243,526,527,529,531,533,535,537,539,541,543],{"class":245,"line":246},[243,528,322],{"class":256},[243,530,363],{"class":325},[243,532,366],{"class":290},[243,534,369],{"class":290},[243,536,372],{"class":256},[243,538,375],{"class":256},[243,540,238],{"class":273},[243,542,375],{"class":256},[243,544,382],{"class":256},[243,546,547,549,551,554,556,559,561,563,565,567],{"class":245,"line":280},[243,548,250],{"class":249},[243,550,257],{"class":256},[243,552,553],{"class":260}," onMounted",[243,555,394],{"class":256},[243,557,558],{"class":260}," onBeforeUnmount",[243,560,264],{"class":256},[243,562,267],{"class":249},[243,564,270],{"class":256},[243,566,354],{"class":273},[243,568,277],{"class":256},[243,570,571,573],{"class":245,"line":287},[243,572,250],{"class":249},[243,574,304],{"class":256},[243,576,577,580],{"class":245,"line":307},[243,578,579],{"class":260},"  ModalRoot",[243,581,582],{"class":256},",\n",[243,584,585,588],{"class":245,"line":345},[243,586,587],{"class":260},"  ModalContent",[243,589,582],{"class":256},[243,591,592,595],{"class":245,"line":432},[243,593,594],{"class":260},"  replaceModal",[243,596,582],{"class":256},[243,598,599],{"class":245,"line":444},[243,600,601],{"class":260},"  useModalContext\n",[243,603,604,607,609,611,613],{"class":245,"line":451},[243,605,606],{"class":256},"}",[243,608,267],{"class":249},[243,610,270],{"class":256},[243,612,274],{"class":273},[243,614,277],{"class":256},[243,616,617],{"class":245,"line":472},[243,618,284],{"emptyLinePlaceholder":283},[243,620,621,625,628,631,634,637,639,641,643,645],{"class":245,"line":495},[243,622,624],{"class":623},"s2Zo4","defineOptions",[243,626,627],{"class":260},"(",[243,629,630],{"class":256},"{",[243,632,633],{"class":325}," modalGroup",[243,635,636],{"class":256},":",[243,638,270],{"class":256},[243,640,331],{"class":273},[243,642,301],{"class":256},[243,644,264],{"class":256},[243,646,647],{"class":260},")\n",[243,649,650],{"class":245,"line":505},[243,651,284],{"emptyLinePlaceholder":283},[243,653,655,658,661,663,666],{"class":245,"line":654},12,[243,656,657],{"class":290},"const",[243,659,660],{"class":260}," props ",[243,662,372],{"class":256},[243,664,665],{"class":623}," defineProps",[243,667,668],{"class":256},"\u003C{\n",[243,670,672,675,677,680],{"class":245,"line":671},13,[243,673,674],{"class":325},"  images",[243,676,636],{"class":256},[243,678,679],{"class":313}," string",[243,681,682],{"class":260},"[]\n",[243,684,686,689,691],{"class":245,"line":685},14,[243,687,688],{"class":325},"  index",[243,690,636],{"class":256},[243,692,693],{"class":313}," number\n",[243,695,697,700],{"class":245,"line":696},15,[243,698,699],{"class":256},"}>",[243,701,702],{"class":260},"()\n",[243,704,706],{"class":245,"line":705},16,[243,707,284],{"emptyLinePlaceholder":283},[243,709,711,713,715,718,720,723,725,728,731],{"class":245,"line":710},17,[243,712,657],{"class":290},[243,714,257],{"class":256},[243,716,717],{"class":260}," close",[243,719,394],{"class":256},[243,721,722],{"class":260}," isTopmostGlobal ",[243,724,606],{"class":256},[243,726,727],{"class":256}," =",[243,729,730],{"class":623}," useModalContext",[243,732,702],{"class":260},[243,734,736],{"class":245,"line":735},18,[243,737,284],{"emptyLinePlaceholder":283},[243,739,741,743,746,748,751,754,757,759],{"class":245,"line":740},19,[243,742,657],{"class":290},[243,744,745],{"class":260}," hasPrev ",[243,747,372],{"class":256},[243,749,750],{"class":260}," props",[243,752,753],{"class":256},".",[243,755,756],{"class":260},"index ",[243,758,339],{"class":256},[243,760,762],{"class":761},"sbssI"," 0\n",[243,764,766,768,771,773,775,777,779,781,783,785,788,790,793,796],{"class":245,"line":765},20,[243,767,657],{"class":290},[243,769,770],{"class":260}," hasNext ",[243,772,372],{"class":256},[243,774,750],{"class":260},[243,776,753],{"class":256},[243,778,756],{"class":260},[243,780,322],{"class":256},[243,782,750],{"class":260},[243,784,753],{"class":256},[243,786,787],{"class":260},"images",[243,789,753],{"class":256},[243,791,792],{"class":260},"length ",[243,794,795],{"class":256},"-",[243,797,798],{"class":761}," 1\n",[243,800,802],{"class":245,"line":801},21,[243,803,284],{"emptyLinePlaceholder":283},[243,805,807,810,813,815,819,821,824,827],{"class":245,"line":806},22,[243,808,809],{"class":290},"function",[243,811,812],{"class":623}," go",[243,814,627],{"class":256},[243,816,818],{"class":817},"sHdIc","newIndex",[243,820,636],{"class":256},[243,822,823],{"class":313}," number",[243,825,826],{"class":256},")",[243,828,304],{"class":256},[243,830,832,834,836,839,841],{"class":245,"line":831},23,[243,833,594],{"class":623},[243,835,627],{"class":325},[243,837,838],{"class":260},"ImageLightbox",[243,840,394],{"class":256},[243,842,304],{"class":256},[243,844,846,849,851,853,856,858,860,862,864,866,869,871,874],{"class":245,"line":845},24,[243,847,848],{"class":325},"    props",[243,850,636],{"class":256},[243,852,257],{"class":256},[243,854,855],{"class":325}," images",[243,857,636],{"class":256},[243,859,750],{"class":260},[243,861,753],{"class":256},[243,863,787],{"class":260},[243,865,394],{"class":256},[243,867,868],{"class":325}," index",[243,870,636],{"class":256},[243,872,873],{"class":260}," newIndex",[243,875,876],{"class":256}," },\n",[243,878,880,883,885,889],{"class":245,"line":879},25,[243,881,882],{"class":325},"    instantEnter",[243,884,636],{"class":256},[243,886,888],{"class":887},"sfNiH"," true",[243,890,891],{"class":447},"  \u002F\u002F skip enter animation — instant swap\n",[243,893,895,898],{"class":245,"line":894},26,[243,896,897],{"class":256},"  }",[243,899,647],{"class":325},[243,901,903],{"class":245,"line":902},27,[243,904,348],{"class":256},[243,906,908],{"class":245,"line":907},28,[243,909,284],{"emptyLinePlaceholder":283},[243,911,913,915,918,920,923,925,928,930],{"class":245,"line":912},29,[243,914,809],{"class":290},[243,916,917],{"class":623}," onKeydown",[243,919,627],{"class":256},[243,921,922],{"class":817},"e",[243,924,636],{"class":256},[243,926,927],{"class":313}," KeyboardEvent",[243,929,826],{"class":256},[243,931,304],{"class":256},[243,933,935],{"class":245,"line":934},30,[243,936,937],{"class":447},"  \u002F\u002F Only react when this is the topmost modal across all groups\n",[243,939,941,944,947,950,952,954,957,960],{"class":245,"line":940},31,[243,942,943],{"class":249},"  if",[243,945,946],{"class":325}," (",[243,948,949],{"class":256},"!",[243,951,214],{"class":260},[243,953,753],{"class":256},[243,955,956],{"class":260},"value",[243,958,959],{"class":325},") ",[243,961,962],{"class":249},"return\n",[243,964,966,968,970,972,974,977,980,982,985,987,990,993,995,998,1000,1003,1005,1008,1011,1014],{"class":245,"line":965},32,[243,967,943],{"class":249},[243,969,946],{"class":325},[243,971,922],{"class":260},[243,973,753],{"class":256},[243,975,976],{"class":260},"key",[243,978,979],{"class":256}," ===",[243,981,270],{"class":256},[243,983,984],{"class":273},"ArrowLeft",[243,986,301],{"class":256},[243,988,989],{"class":256}," &&",[243,991,992],{"class":260}," hasPrev",[243,994,959],{"class":325},[243,996,997],{"class":623},"go",[243,999,627],{"class":325},[243,1001,1002],{"class":260},"props",[243,1004,753],{"class":256},[243,1006,1007],{"class":260},"index",[243,1009,1010],{"class":256}," -",[243,1012,1013],{"class":761}," 1",[243,1015,647],{"class":325},[243,1017,1019,1021,1023,1025,1027,1029,1031,1033,1036,1038,1040,1043,1045,1047,1049,1051,1053,1055,1058,1060],{"class":245,"line":1018},33,[243,1020,943],{"class":249},[243,1022,946],{"class":325},[243,1024,922],{"class":260},[243,1026,753],{"class":256},[243,1028,976],{"class":260},[243,1030,979],{"class":256},[243,1032,270],{"class":256},[243,1034,1035],{"class":273},"ArrowRight",[243,1037,301],{"class":256},[243,1039,989],{"class":256},[243,1041,1042],{"class":260}," hasNext",[243,1044,959],{"class":325},[243,1046,997],{"class":623},[243,1048,627],{"class":325},[243,1050,1002],{"class":260},[243,1052,753],{"class":256},[243,1054,1007],{"class":260},[243,1056,1057],{"class":256}," +",[243,1059,1013],{"class":761},[243,1061,647],{"class":325},[243,1063,1065],{"class":245,"line":1064},34,[243,1066,348],{"class":256},[243,1068,1070],{"class":245,"line":1069},35,[243,1071,284],{"emptyLinePlaceholder":283},[243,1073,1075,1078,1080,1083,1086,1089,1091,1094,1096,1098,1101,1103,1105],{"class":245,"line":1074},36,[243,1076,1077],{"class":623},"onMounted",[243,1079,627],{"class":260},[243,1081,1082],{"class":256},"()",[243,1084,1085],{"class":290}," =>",[243,1087,1088],{"class":260}," window",[243,1090,753],{"class":256},[243,1092,1093],{"class":623},"addEventListener",[243,1095,627],{"class":260},[243,1097,301],{"class":256},[243,1099,1100],{"class":273},"keydown",[243,1102,301],{"class":256},[243,1104,394],{"class":256},[243,1106,1107],{"class":260}," onKeydown))\n",[243,1109,1111,1114,1116,1118,1120,1122,1124,1127,1129,1131,1133,1135,1137],{"class":245,"line":1110},37,[243,1112,1113],{"class":623},"onBeforeUnmount",[243,1115,627],{"class":260},[243,1117,1082],{"class":256},[243,1119,1085],{"class":290},[243,1121,1088],{"class":260},[243,1123,753],{"class":256},[243,1125,1126],{"class":623},"removeEventListener",[243,1128,627],{"class":260},[243,1130,301],{"class":256},[243,1132,1100],{"class":273},[243,1134,301],{"class":256},[243,1136,394],{"class":256},[243,1138,1107],{"class":260},[243,1140,1142,1144,1146],{"class":245,"line":1141},38,[243,1143,412],{"class":256},[243,1145,363],{"class":325},[243,1147,382],{"class":256},[243,1149,1151],{"class":245,"line":1150},39,[243,1152,284],{"emptyLinePlaceholder":283},[243,1154,1156,1158,1160],{"class":245,"line":1155},40,[243,1157,322],{"class":256},[243,1159,427],{"class":325},[243,1161,382],{"class":256},[243,1163,1165,1167,1170,1172,1174,1176,1179,1181],{"class":245,"line":1164},41,[243,1166,435],{"class":256},[243,1168,1169],{"class":325},"ModalRoot",[243,1171,481],{"class":290},[243,1173,372],{"class":256},[243,1175,375],{"class":256},[243,1177,1178],{"class":273},"flex items-center justify-center",[243,1180,375],{"class":256},[243,1182,382],{"class":256},[243,1184,1186,1188,1191,1193,1195,1197,1200,1202],{"class":245,"line":1185},42,[243,1187,475],{"class":256},[243,1189,1190],{"class":325},"ModalContent",[243,1192,481],{"class":290},[243,1194,372],{"class":256},[243,1196,375],{"class":256},[243,1198,1199],{"class":273},"relative w-full",[243,1201,375],{"class":256},[243,1203,382],{"class":256},[243,1205,1207,1210,1213,1215,1217,1219,1222,1224],{"class":245,"line":1206},43,[243,1208,1209],{"class":256},"      \u003C",[243,1211,1212],{"class":325},"div",[243,1214,481],{"class":290},[243,1216,372],{"class":256},[243,1218,375],{"class":256},[243,1220,1221],{"class":273},"relative z-10 flex items-center gap-4 px-4 max-w-5xl w-full",[243,1223,375],{"class":256},[243,1225,382],{"class":256},[243,1227,1229],{"class":245,"line":1228},44,[243,1230,1231],{"class":447},"        \u003C!-- Previous -->\n",[243,1233,1235,1238],{"class":245,"line":1234},45,[243,1236,1237],{"class":256},"        \u003C",[243,1239,1240],{"class":325},"button\n",[243,1242,1244,1247,1249,1251,1254],{"class":245,"line":1243},46,[243,1245,1246],{"class":290},"          v-if",[243,1248,372],{"class":256},[243,1250,375],{"class":256},[243,1252,1253],{"class":273},"hasPrev",[243,1255,1256],{"class":256},"\"\n",[243,1258,1260,1263,1265,1267,1270],{"class":245,"line":1259},47,[243,1261,1262],{"class":290},"          class",[243,1264,372],{"class":256},[243,1266,375],{"class":256},[243,1268,1269],{"class":273},"shrink-0 rounded-full bg-white\u002F10 hover:bg-white\u002F25 p-3 text-white transition",[243,1271,1256],{"class":256},[243,1273,1275,1278,1280,1282,1285],{"class":245,"line":1274},48,[243,1276,1277],{"class":290},"          aria-label",[243,1279,372],{"class":256},[243,1281,375],{"class":256},[243,1283,1284],{"class":273},"Previous image",[243,1286,1256],{"class":256},[243,1288,1290,1293,1295,1297,1300],{"class":245,"line":1289},49,[243,1291,1292],{"class":290},"          @click",[243,1294,372],{"class":256},[243,1296,375],{"class":256},[243,1298,1299],{"class":273},"go(props.index - 1)",[243,1301,1256],{"class":256},[243,1303,1305],{"class":245,"line":1304},50,[243,1306,1307],{"class":256},"        >\n",[243,1309,1311],{"class":245,"line":1310},51,[243,1312,1313],{"class":260},"          ←\n",[243,1315,1317,1320,1323],{"class":245,"line":1316},52,[243,1318,1319],{"class":256},"        \u003C\u002F",[243,1321,1322],{"class":325},"button",[243,1324,382],{"class":256},[243,1326,1328],{"class":245,"line":1327},53,[243,1329,284],{"emptyLinePlaceholder":283},[243,1331,1333],{"class":245,"line":1332},54,[243,1334,1335],{"class":447},"        \u003C!-- Image -->\n",[243,1337,1339,1341,1343,1345,1347,1349,1352,1354],{"class":245,"line":1338},55,[243,1340,1237],{"class":256},[243,1342,1212],{"class":325},[243,1344,481],{"class":290},[243,1346,372],{"class":256},[243,1348,375],{"class":256},[243,1350,1351],{"class":273},"flex-1 flex items-center justify-center",[243,1353,375],{"class":256},[243,1355,382],{"class":256},[243,1357,1359,1362],{"class":245,"line":1358},56,[243,1360,1361],{"class":256},"          \u003C",[243,1363,1364],{"class":325},"img\n",[243,1366,1368,1371,1373,1375,1378],{"class":245,"line":1367},57,[243,1369,1370],{"class":290},"            :src",[243,1372,372],{"class":256},[243,1374,375],{"class":256},[243,1376,1377],{"class":273},"props.images[props.index]",[243,1379,1256],{"class":256},[243,1381,1383,1386,1388,1390,1393],{"class":245,"line":1382},58,[243,1384,1385],{"class":290},"            :alt",[243,1387,372],{"class":256},[243,1389,375],{"class":256},[243,1391,1392],{"class":273},"`Image ${props.index + 1} of ${props.images.length}`",[243,1394,1256],{"class":256},[243,1396,1398,1401,1403,1405,1408],{"class":245,"line":1397},59,[243,1399,1400],{"class":290},"            class",[243,1402,372],{"class":256},[243,1404,375],{"class":256},[243,1406,1407],{"class":273},"max-h-[80vh] max-w-full rounded-xl object-contain shadow-2xl",[243,1409,1256],{"class":256},[243,1411,1413],{"class":245,"line":1412},60,[243,1414,1415],{"class":256},"          \u002F>\n",[243,1417,1419,1421,1423],{"class":245,"line":1418},61,[243,1420,1319],{"class":256},[243,1422,1212],{"class":325},[243,1424,382],{"class":256},[243,1426,1428],{"class":245,"line":1427},62,[243,1429,284],{"emptyLinePlaceholder":283},[243,1431,1433],{"class":245,"line":1432},63,[243,1434,1435],{"class":447},"        \u003C!-- Next -->\n",[243,1437,1439,1441],{"class":245,"line":1438},64,[243,1440,1237],{"class":256},[243,1442,1240],{"class":325},[243,1444,1446,1448,1450,1452,1455],{"class":245,"line":1445},65,[243,1447,1246],{"class":290},[243,1449,372],{"class":256},[243,1451,375],{"class":256},[243,1453,1454],{"class":273},"hasNext",[243,1456,1256],{"class":256},[243,1458,1460,1462,1464,1466,1468],{"class":245,"line":1459},66,[243,1461,1262],{"class":290},[243,1463,372],{"class":256},[243,1465,375],{"class":256},[243,1467,1269],{"class":273},[243,1469,1256],{"class":256},[243,1471,1473,1475,1477,1479,1482],{"class":245,"line":1472},67,[243,1474,1277],{"class":290},[243,1476,372],{"class":256},[243,1478,375],{"class":256},[243,1480,1481],{"class":273},"Next image",[243,1483,1256],{"class":256},[243,1485,1487,1489,1491,1493,1496],{"class":245,"line":1486},68,[243,1488,1292],{"class":290},[243,1490,372],{"class":256},[243,1492,375],{"class":256},[243,1494,1495],{"class":273},"go(props.index + 1)",[243,1497,1256],{"class":256},[243,1499,1501],{"class":245,"line":1500},69,[243,1502,1307],{"class":256},[243,1504,1506],{"class":245,"line":1505},70,[243,1507,1508],{"class":260},"          →\n",[243,1510,1512,1514,1516],{"class":245,"line":1511},71,[243,1513,1319],{"class":256},[243,1515,1322],{"class":325},[243,1517,382],{"class":256},[243,1519,1521],{"class":245,"line":1520},72,[243,1522,284],{"emptyLinePlaceholder":283},[243,1524,1526],{"class":245,"line":1525},73,[243,1527,1528],{"class":447},"        \u003C!-- Close -->\n",[243,1530,1532,1534],{"class":245,"line":1531},74,[243,1533,1237],{"class":256},[243,1535,1240],{"class":325},[243,1537,1539,1541,1543,1545,1548],{"class":245,"line":1538},75,[243,1540,1262],{"class":290},[243,1542,372],{"class":256},[243,1544,375],{"class":256},[243,1546,1547],{"class":273},"absolute -top-10 right-0 text-white\u002F70 hover:text-white text-2xl",[243,1549,1256],{"class":256},[243,1551,1553,1555,1557,1559,1562],{"class":245,"line":1552},76,[243,1554,1277],{"class":290},[243,1556,372],{"class":256},[243,1558,375],{"class":256},[243,1560,1561],{"class":273},"Close",[243,1563,1256],{"class":256},[243,1565,1567,1569,1571,1573,1576],{"class":245,"line":1566},77,[243,1568,1292],{"class":290},[243,1570,372],{"class":256},[243,1572,375],{"class":256},[243,1574,1575],{"class":273},"close()",[243,1577,1256],{"class":256},[243,1579,1581],{"class":245,"line":1580},78,[243,1582,1307],{"class":256},[243,1584,1586],{"class":245,"line":1585},79,[243,1587,1588],{"class":260},"          ✕\n",[243,1590,1592,1594,1596],{"class":245,"line":1591},80,[243,1593,1319],{"class":256},[243,1595,1322],{"class":325},[243,1597,382],{"class":256},[243,1599,1601,1604,1606],{"class":245,"line":1600},81,[243,1602,1603],{"class":256},"      \u003C\u002F",[243,1605,1212],{"class":325},[243,1607,382],{"class":256},[243,1609,1611],{"class":245,"line":1610},82,[243,1612,284],{"emptyLinePlaceholder":283},[243,1614,1616],{"class":245,"line":1615},83,[243,1617,1618],{"class":447},"      \u003C!-- Counter -->\n",[243,1620,1622,1624,1626,1628,1630,1632,1635,1637],{"class":245,"line":1621},84,[243,1623,1209],{"class":256},[243,1625,1212],{"class":325},[243,1627,481],{"class":290},[243,1629,372],{"class":256},[243,1631,375],{"class":256},[243,1633,1634],{"class":273},"absolute bottom-6 left-1\u002F2 -translate-x-1\u002F2 text-white\u002F60 text-sm",[243,1636,375],{"class":256},[243,1638,382],{"class":256},[243,1640,1642],{"class":245,"line":1641},85,[243,1643,1644],{"class":260},"        {{ props.index + 1 }} \u002F {{ props.images.length }}\n",[243,1646,1648,1650,1652],{"class":245,"line":1647},86,[243,1649,1603],{"class":256},[243,1651,1212],{"class":325},[243,1653,382],{"class":256},[243,1655,1657,1660,1662],{"class":245,"line":1656},87,[243,1658,1659],{"class":256},"    \u003C\u002F",[243,1661,1190],{"class":325},[243,1663,382],{"class":256},[243,1665,1667,1669,1671],{"class":245,"line":1666},88,[243,1668,498],{"class":256},[243,1670,1169],{"class":325},[243,1672,382],{"class":256},[243,1674,1676,1678,1680],{"class":245,"line":1675},89,[243,1677,412],{"class":256},[243,1679,427],{"class":325},[243,1681,382],{"class":256},[233,1683,1686],{"className":351,"code":1684,"filename":1685,"language":354,"meta":239,"style":239},"\u003Cscript setup lang=\"ts\">\nimport { openModal } from '@kolirt\u002Fvue-modal'\nimport ImageLightbox from '.\u002FImageLightbox.vue'\n\nconst images = [\n  'https:\u002F\u002Fexample.com\u002Fphoto-1.jpg',\n  'https:\u002F\u002Fexample.com\u002Fphoto-2.jpg',\n  'https:\u002F\u002Fexample.com\u002Fphoto-3.jpg'\n]\n\nfunction openLightbox(index: number) {\n  openModal(ImageLightbox, {\n    props: { images, index }\n  }).catch(() => {})  \u002F\u002F closed by user — ignore\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"grid grid-cols-3 gap-2\">\n    \u003Cimg\n      v-for=\"(src, i) in images\"\n      :key=\"src\"\n      :src=\"src\"\n      class=\"cursor-pointer rounded-lg object-cover aspect-square hover:opacity-90 transition\"\n      @click=\"openLightbox(i)\"\n    \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","Gallery.vue (caller)",[212,1687,1688,1708,1727,1744,1748,1760,1772,1783,1792,1797,1801,1820,1833,1850,1876,1880,1888,1892,1900,1919,1925,1939,1953,1966,1980,1994,1999,2007],{"__ignoreMap":239},[243,1689,1690,1692,1694,1696,1698,1700,1702,1704,1706],{"class":245,"line":246},[243,1691,322],{"class":256},[243,1693,363],{"class":325},[243,1695,366],{"class":290},[243,1697,369],{"class":290},[243,1699,372],{"class":256},[243,1701,375],{"class":256},[243,1703,238],{"class":273},[243,1705,375],{"class":256},[243,1707,382],{"class":256},[243,1709,1710,1712,1714,1717,1719,1721,1723,1725],{"class":245,"line":280},[243,1711,250],{"class":249},[243,1713,257],{"class":256},[243,1715,1716],{"class":260}," openModal",[243,1718,264],{"class":256},[243,1720,267],{"class":249},[243,1722,270],{"class":256},[243,1724,274],{"class":273},[243,1726,277],{"class":256},[243,1728,1729,1731,1734,1737,1739,1742],{"class":245,"line":287},[243,1730,250],{"class":249},[243,1732,1733],{"class":260}," ImageLightbox ",[243,1735,1736],{"class":249},"from",[243,1738,270],{"class":256},[243,1740,1741],{"class":273},".\u002FImageLightbox.vue",[243,1743,277],{"class":256},[243,1745,1746],{"class":245,"line":307},[243,1747,284],{"emptyLinePlaceholder":283},[243,1749,1750,1752,1755,1757],{"class":245,"line":345},[243,1751,657],{"class":290},[243,1753,1754],{"class":260}," images ",[243,1756,372],{"class":256},[243,1758,1759],{"class":260}," [\n",[243,1761,1762,1765,1768,1770],{"class":245,"line":432},[243,1763,1764],{"class":256},"  '",[243,1766,1767],{"class":273},"https:\u002F\u002Fexample.com\u002Fphoto-1.jpg",[243,1769,301],{"class":256},[243,1771,582],{"class":256},[243,1773,1774,1776,1779,1781],{"class":245,"line":444},[243,1775,1764],{"class":256},[243,1777,1778],{"class":273},"https:\u002F\u002Fexample.com\u002Fphoto-2.jpg",[243,1780,301],{"class":256},[243,1782,582],{"class":256},[243,1784,1785,1787,1790],{"class":245,"line":451},[243,1786,1764],{"class":256},[243,1788,1789],{"class":273},"https:\u002F\u002Fexample.com\u002Fphoto-3.jpg",[243,1791,277],{"class":256},[243,1793,1794],{"class":245,"line":472},[243,1795,1796],{"class":260},"]\n",[243,1798,1799],{"class":245,"line":495},[243,1800,284],{"emptyLinePlaceholder":283},[243,1802,1803,1805,1808,1810,1812,1814,1816,1818],{"class":245,"line":505},[243,1804,809],{"class":290},[243,1806,1807],{"class":623}," openLightbox",[243,1809,627],{"class":256},[243,1811,1007],{"class":817},[243,1813,636],{"class":256},[243,1815,823],{"class":313},[243,1817,826],{"class":256},[243,1819,304],{"class":256},[243,1821,1822,1825,1827,1829,1831],{"class":245,"line":654},[243,1823,1824],{"class":623},"  openModal",[243,1826,627],{"class":325},[243,1828,838],{"class":260},[243,1830,394],{"class":256},[243,1832,304],{"class":256},[243,1834,1835,1837,1839,1841,1843,1845,1847],{"class":245,"line":671},[243,1836,848],{"class":325},[243,1838,636],{"class":256},[243,1840,257],{"class":256},[243,1842,855],{"class":260},[243,1844,394],{"class":256},[243,1846,868],{"class":260},[243,1848,1849],{"class":256}," }\n",[243,1851,1852,1854,1856,1858,1861,1863,1865,1867,1870,1873],{"class":245,"line":685},[243,1853,897],{"class":256},[243,1855,826],{"class":325},[243,1857,753],{"class":256},[243,1859,1860],{"class":623},"catch",[243,1862,627],{"class":325},[243,1864,1082],{"class":256},[243,1866,1085],{"class":290},[243,1868,1869],{"class":256}," {}",[243,1871,1872],{"class":325},")  ",[243,1874,1875],{"class":447},"\u002F\u002F closed by user — ignore\n",[243,1877,1878],{"class":245,"line":696},[243,1879,348],{"class":256},[243,1881,1882,1884,1886],{"class":245,"line":705},[243,1883,412],{"class":256},[243,1885,363],{"class":325},[243,1887,382],{"class":256},[243,1889,1890],{"class":245,"line":710},[243,1891,284],{"emptyLinePlaceholder":283},[243,1893,1894,1896,1898],{"class":245,"line":735},[243,1895,322],{"class":256},[243,1897,427],{"class":325},[243,1899,382],{"class":256},[243,1901,1902,1904,1906,1908,1910,1912,1915,1917],{"class":245,"line":740},[243,1903,435],{"class":256},[243,1905,1212],{"class":325},[243,1907,481],{"class":290},[243,1909,372],{"class":256},[243,1911,375],{"class":256},[243,1913,1914],{"class":273},"grid grid-cols-3 gap-2",[243,1916,375],{"class":256},[243,1918,382],{"class":256},[243,1920,1921,1923],{"class":245,"line":765},[243,1922,475],{"class":256},[243,1924,1364],{"class":325},[243,1926,1927,1930,1932,1934,1937],{"class":245,"line":801},[243,1928,1929],{"class":290},"      v-for",[243,1931,372],{"class":256},[243,1933,375],{"class":256},[243,1935,1936],{"class":273},"(src, i) in images",[243,1938,1256],{"class":256},[243,1940,1941,1944,1946,1948,1951],{"class":245,"line":806},[243,1942,1943],{"class":290},"      :key",[243,1945,372],{"class":256},[243,1947,375],{"class":256},[243,1949,1950],{"class":273},"src",[243,1952,1256],{"class":256},[243,1954,1955,1958,1960,1962,1964],{"class":245,"line":831},[243,1956,1957],{"class":290},"      :src",[243,1959,372],{"class":256},[243,1961,375],{"class":256},[243,1963,1950],{"class":273},[243,1965,1256],{"class":256},[243,1967,1968,1971,1973,1975,1978],{"class":245,"line":845},[243,1969,1970],{"class":290},"      class",[243,1972,372],{"class":256},[243,1974,375],{"class":256},[243,1976,1977],{"class":273},"cursor-pointer rounded-lg object-cover aspect-square hover:opacity-90 transition",[243,1979,1256],{"class":256},[243,1981,1982,1985,1987,1989,1992],{"class":245,"line":879},[243,1983,1984],{"class":290},"      @click",[243,1986,372],{"class":256},[243,1988,375],{"class":256},[243,1990,1991],{"class":273},"openLightbox(i)",[243,1993,1256],{"class":256},[243,1995,1996],{"class":245,"line":894},[243,1997,1998],{"class":256},"    \u002F>\n",[243,2000,2001,2003,2005],{"class":245,"line":902},[243,2002,498],{"class":256},[243,2004,1212],{"class":325},[243,2006,382],{"class":256},[243,2008,2009,2011,2013],{"class":245,"line":907},[243,2010,412],{"class":256},[243,2012,427],{"class":325},[243,2014,382],{"class":256},[228,2016,2018],{"id":2017},"why-istopmostglobal-for-keyboard-navigation","Why isTopmostGlobal for keyboard navigation",[198,2020,2021,2023,2024,2027,2028,2031,2032,2035],{},[212,2022,214],{}," is ",[212,2025,2026],{},"true"," only when this specific modal instance is the highest open modal across every group. If something opens on top of the lightbox (a confirm dialog, a share sheet — even from a different group), ",[212,2029,2030],{},"isTopmostGlobal.value"," becomes ",[212,2033,2034],{},"false"," and arrow key navigation stops. It resumes automatically once the upper modal closes.",[233,2037,2039],{"className":235,"code":2038,"language":238,"meta":239,"style":239},"if (!isTopmostGlobal.value) return  \u002F\u002F another modal is above us — ignore keys\n",[212,2040,2041],{"__ignoreMap":239},[243,2042,2043,2046,2048,2050,2052,2054,2057,2060],{"class":245,"line":246},[243,2044,2045],{"class":249},"if",[243,2047,946],{"class":260},[243,2049,949],{"class":256},[243,2051,214],{"class":260},[243,2053,753],{"class":256},[243,2055,2056],{"class":260},"value) ",[243,2058,2059],{"class":249},"return",[243,2061,2062],{"class":447},"  \u002F\u002F another modal is above us — ignore keys\n",[198,2064,2065,2066,2069],{},"Use ",[212,2067,2068],{},"isTopmost"," instead if you only care about the topmost within this modal's own group.",[228,2071,2073],{"id":2072},"why-replacemodal-instantenter","Why replaceModal + instantEnter",[198,2075,2076,2078,2079,2081],{},[212,2077,221],{}," closes the current lightbox step (no exit animation, ignoring guards) and immediately opens a new one. ",[212,2080,225],{}," suppresses the enter animation on the incoming slide. The result is a seamless, instant image swap:",[233,2083,2085],{"className":235,"code":2084,"language":238,"meta":239,"style":239},"replaceModal(ImageLightbox, {\n  props: { images: props.images, index: newIndex },\n  instantEnter: true\n})\n",[212,2086,2087,2098,2129,2139],{"__ignoreMap":239},[243,2088,2089,2091,2094,2096],{"class":245,"line":246},[243,2090,221],{"class":623},[243,2092,2093],{"class":260},"(ImageLightbox",[243,2095,394],{"class":256},[243,2097,304],{"class":256},[243,2099,2100,2103,2105,2107,2109,2111,2113,2115,2117,2119,2121,2123,2126],{"class":245,"line":280},[243,2101,2102],{"class":325},"  props",[243,2104,636],{"class":256},[243,2106,257],{"class":256},[243,2108,855],{"class":325},[243,2110,636],{"class":256},[243,2112,750],{"class":260},[243,2114,753],{"class":256},[243,2116,787],{"class":260},[243,2118,394],{"class":256},[243,2120,868],{"class":325},[243,2122,636],{"class":256},[243,2124,2125],{"class":260}," newIndex ",[243,2127,2128],{"class":256},"},\n",[243,2130,2131,2134,2136],{"class":245,"line":287},[243,2132,2133],{"class":325},"  instantEnter",[243,2135,636],{"class":256},[243,2137,2138],{"class":887}," true\n",[243,2140,2141,2143],{"class":245,"line":307},[243,2142,606],{"class":256},[243,2144,647],{"class":260},[198,2146,2147,2148,2151],{},"Without ",[212,2149,2150],{},"instantEnter",", each navigation would play the full enter animation, which looks jarring in a lightbox context.",[228,2153,2155],{"id":2154},"backdrop-click-behaviour","Backdrop click behaviour",[198,2157,2158,2159,2162,2163,2166,2167,2170,2171,2174,2175,2177,2178,2181,2182,2185],{},"The default ",[212,2160,2161],{},"\u003CModalTarget>"," configuration closes on overlay interaction (",[212,2164,2165],{},"closeOnInteractOverlay: true","). No extra props are needed. The package detects pointer-down events outside ",[212,2168,2169],{},"\u003CModalContent>"," (delivered by Reka UI's ",[212,2172,2173],{},"pointer-down-outside"," hook) and calls ",[212,2176,1575],{},". ",[212,2179,2180],{},"\u003CModalOverlay>"," itself is purely visual — its ",[212,2183,2184],{},"pointer-events: none"," default means it never receives clicks.",[228,2187,2189],{"id":2188},"related","Related",[202,2191,2192,2198,2202],{},[205,2193,2194],{},[2195,2196,2197],"a",{"href":137},"API reference — functions",[205,2199,2200],{},[2195,2201,82],{"href":83},[205,2203,2204],{},[2195,2205,123],{"href":124},[2207,2208,2209],"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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":239,"searchDepth":280,"depth":280,"links":2211},[2212,2213,2214,2215,2216,2217],{"id":230,"depth":280,"text":231},{"id":514,"depth":280,"text":515},{"id":2017,"depth":280,"text":2018},{"id":2072,"depth":280,"text":2073},{"id":2154,"depth":280,"text":2155},{"id":2188,"depth":280,"text":2189},"A full-screen lightbox that navigates a list of images with arrow keys, closes on backdrop or Esc, and transitions instantly between images using replaceModal.","md",null,{},{"title":115,"description":2218},"NCrSUb-DJdona18E2A8UpYJ4B5DKvEHaVE9zIqyZTOo",[2225,2227],{"title":111,"path":112,"stem":113,"description":2226,"children":-1},"A modal that hosts a form, returns validated data via confirm(data), and guards against accidental dirty-close.",{"title":119,"path":120,"stem":121,"description":2228,"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.",1779523619859]