[{"data":1,"prerenderedAt":1112},["ShallowReactive",2],{"doc-global_essentials\u002Fbuiltins\u002Fcomponent_slots":3},{"id":4,"title":5,"body":6,"description":1101,"extension":1102,"meta":1103,"navigation":1107,"path":1108,"seo":1109,"stem":1110,"__hash__":1111},"docs\u002Fdocs\u002Fglobal_essentials\u002Fbuiltins\u002Fcomponent_slots.md","Component Slots",{"type":7,"value":8,"toc":1083},"minimark",[9,14,23,32,35,40,52,149,151,155,162,169,665,667,671,674,697,699,730,747,749,790,792,845,848,930,932,1014,1016,1044,1046,1068,1070,1074],[10,11,13],"h1",{"id":12},"component-slots-reference","Component Slots Reference",[15,16,17,18,22],"p",{},"This page lists all available UI slots where you can register custom Vue components using ",[19,20,21],"code",{},"game.addComponent()",".",[15,24,25,26,31],{},"See ",[27,28,30],"a",{"href":29},"\u002Fdocs\u002Fglobal_essentials\u002Fadvanced\u002Fvue","Vue Components"," for usage examples.",[33,34],"hr",{},[36,37,39],"h2",{"id":38},"state-based-slots","State-Based Slots",[15,41,42,43,47,48,51],{},"State-based slots show ",[44,45,46],"strong",{},"one component at a time"," based on a state value. The slot renders whichever component's ",[19,49,50],{},"id"," matches the current state.",[53,54,55,71],"table",{},[56,57,58],"thead",{},[59,60,61,65,68],"tr",{},[62,63,64],"th",{},"Slot",[62,66,67],{},"State",[62,69,70],{},"Description",[72,73,74,89,104,119,134],"tbody",{},[59,75,76,82,86],{},[77,78,79],"td",{},[19,80,81],{},"game_state",[77,83,84],{},[19,85,81],{},[77,87,88],{},"Main game view (exploration, battle, custom screens)",[59,90,91,96,101],{},[77,92,93],{},[19,94,95],{},"overlay",[77,97,98],{},[19,99,100],{},"overlay_state",[77,102,103],{},"Overlay layer (navigation map, exchange UI)",[59,105,106,111,116],{},[77,107,108],{},[19,109,110],{},"popup",[77,112,113],{},[19,114,115],{},"popup_state",[77,117,118],{},"Modal popups",[59,120,121,126,131],{},[77,122,123],{},[19,124,125],{},"progression-tabs",[77,127,128],{},[19,129,130],{},"progression_state",[77,132,133],{},"Side panel tabs (quests, characters, gallery)",[59,135,136,141,146],{},[77,137,138],{},[19,139,140],{},"character-tabs",[77,142,143],{},[19,144,145],{},"progression_sub_state",[77,147,148],{},"Sub-tabs within character sheet",[33,150],{},[36,152,154],{"id":153},"injection-slots","Injection Slots",[15,156,157,158,161],{},"Injection slots render ",[44,159,160],{},"all registered components"," together. They act as extension points throughout the UI where you can inject custom content.",[15,163,164,165,168],{},"Each slot passes ",[44,166,167],{},"context props"," to registered components, giving them access to parent data.",[53,170,171,183],{},[56,172,173],{},[59,174,175,177,180],{},[62,176,64],{},[62,178,179],{},"Where it appears",[62,181,182],{},"Context Props",[72,184,185,204,220,236,251,265,279,293,311,323,335,349,363,378,393,411,425,439,454,468,483,498,512,530,542,559,573,588,602,620,635,653],{},[59,186,187,192,195],{},[77,188,189],{},[19,190,191],{},"ability-card-header",[77,193,194],{},"Inside ability card header",[77,196,197,200,201],{},[19,198,199],{},"abilityId",", ",[19,202,203],{},"characterId",[59,205,206,211,214],{},[77,207,208],{},[19,209,210],{},"ability-card-meta",[77,212,213],{},"After ability cooldown\u002Fcosts",[77,215,216,200,218],{},[19,217,199],{},[19,219,203],{},[59,221,222,227,230],{},[77,223,224],{},[19,225,226],{},"ability-card-footer",[77,228,229],{},"Bottom of ability card",[77,231,232,200,234],{},[19,233,199],{},[19,235,203],{},[59,237,238,243,246],{},[77,239,240],{},[19,241,242],{},"abilities-viewer-top",[77,244,245],{},"Before ability list",[77,247,248],{},[19,249,250],{},"character",[59,252,253,258,261],{},[77,254,255],{},[19,256,257],{},"abilities-viewer-list",[77,259,260],{},"Inside ability list",[77,262,263],{},[19,264,250],{},[59,266,267,272,275],{},[77,268,269],{},[19,270,271],{},"abilities-viewer-bottom",[77,273,274],{},"Bottom of abilities viewer",[77,276,277],{},[19,278,250],{},[59,280,281,286,289],{},[77,282,283],{},[19,284,285],{},"character-face",[77,287,288],{},"Character face display",[77,290,291],{},[19,292,250],{},[59,294,295,300,307],{},[77,296,297],{},[19,298,299],{},"character-list-item",[77,301,302,303,306],{},"Inside character face in party list (via ",[19,304,305],{},"overlaySlot",")",[77,308,309],{},[19,310,250],{},[59,312,313,318,321],{},[77,314,315],{},[19,316,317],{},"character-sheet-top",[77,319,320],{},"Top of character sheet (above stats)",[77,322],{},[59,324,325,330,333],{},[77,326,327],{},[19,328,329],{},"character-sheet-bottom",[77,331,332],{},"Bottom of character sheet (below inventory)",[77,334],{},[59,336,337,342,345],{},[77,338,339],{},[19,340,341],{},"character-statuses-top",[77,343,344],{},"Inside status list, before items\u002Fstatuses (inline)",[77,346,347],{},[19,348,250],{},[59,350,351,356,359],{},[77,352,353],{},[19,354,355],{},"character-statuses-bottom",[77,357,358],{},"Inside status list, after items\u002Fstatuses (inline)",[77,360,361],{},[19,362,250],{},[59,364,365,370,373],{},[77,366,367],{},[19,368,369],{},"debug-panel",[77,371,372],{},"Debug panel",[77,374,375],{},[19,376,377],{},"activeTabId",[59,379,380,385,388],{},[77,381,382],{},[19,383,384],{},"events-container",[77,386,387],{},"Events\u002Fdialogue area",[77,389,390],{},[19,391,392],{},"sceneSlots",[59,394,395,400,403],{},[77,396,397],{},[19,398,399],{},"exploration-state",[77,401,402],{},"Inside exploration view",[77,404,405,200,408],{},[19,406,407],{},"dungeon",[19,409,410],{},"currentRoom",[59,412,413,418,421],{},[77,414,415],{},[19,416,417],{},"inventory",[77,419,420],{},"Inside inventory component",[77,422,423],{},[19,424,417],{},[59,426,427,432,435],{},[77,428,429],{},[19,430,431],{},"inventory-header",[77,433,434],{},"Header above inventory grid",[77,436,437],{},[19,438,417],{},[59,440,441,446,449],{},[77,442,443],{},[19,444,445],{},"item-card",[77,447,448],{},"Item card display",[77,450,451],{},[19,452,453],{},"item",[59,455,456,461,464],{},[77,457,458],{},[19,459,460],{},"item-choices",[77,462,463],{},"Item choice popups",[77,465,466],{},[19,467,453],{},[59,469,470,475,478],{},[77,471,472],{},[19,473,474],{},"item-grid",[77,476,477],{},"Inventory grid area",[77,479,480],{},[19,481,482],{},"items",[59,484,485,490,493],{},[77,486,487],{},[19,488,489],{},"menu-after",[77,491,492],{},"After main menu content",[77,494,495],{},[19,496,497],{},"menuState",[59,499,500,505,508],{},[77,501,502],{},[19,503,504],{},"menu-before",[77,506,507],{},"Before main menu content",[77,509,510],{},[19,511,497],{},[59,513,514,519,522],{},[77,515,516],{},[19,517,518],{},"mod-picker",[77,520,521],{},"Inside mod picker UI",[77,523,524,200,527],{},[19,525,526],{},"availableMods",[19,528,529],{},"selectedMods",[59,531,532,537,540],{},[77,533,534],{},[19,535,536],{},"navigation-toolbar",[77,538,539],{},"Buttons in map toolbar",[77,541],{},[59,543,544,549,552],{},[77,545,546],{},[19,547,548],{},"overlay-navigation",[77,550,551],{},"Navigation map overlay",[77,553,554,200,556],{},[19,555,407],{},[19,557,558],{},"choices",[59,560,561,566,569],{},[77,562,563],{},[19,564,565],{},"overlay-navigation-side",[77,567,568],{},"Side column next to the navigation overlay (right column in text dungeons, right edge of viewport in screen dungeons)",[77,570,571],{},[19,572,407],{},[59,574,575,580,583],{},[77,576,577],{},[19,578,579],{},"scene-content-top",[77,581,582],{},"Above scene dialogue content (text dungeons)",[77,584,585],{},[19,586,587],{},"sceneId",[59,589,590,595,598],{},[77,591,592],{},[19,593,594],{},"scene-content-bottom",[77,596,597],{},"Below scene choices (text dungeons)",[77,599,600],{},[19,601,587],{},[59,603,604,609,612],{},[77,605,606],{},[19,607,608],{},"progression-container",[77,610,611],{},"Progression side panel",[77,613,614,200,617],{},[19,615,616],{},"activeTab",[19,618,619],{},"selectedCharacter",[59,621,622,627,630],{},[77,623,624],{},[19,625,626],{},"quests-tab",[77,628,629],{},"Quests panel",[77,631,632],{},[19,633,634],{},"selectedQuest",[59,636,637,642,645],{},[77,638,639],{},[19,640,641],{},"replay-custom-block",[77,643,644],{},"Custom content in replay mode",[77,646,647,200,650],{},[19,648,649],{},"replayMode",[19,651,652],{},"data",[59,654,655,660,663],{},[77,656,657],{},[19,658,659],{},"ui-container",[77,661,662],{},"Main UI layer",[77,664],{},[33,666],{},[36,668,670],{"id":669},"default-components-by-slot","Default Components by Slot",[672,673,81],"h3",{"id":81},[53,675,676,685],{},[56,677,678],{},[59,679,680,683],{},[62,681,682],{},"ID",[62,684,70],{},[72,686,687],{},[59,688,689,694],{},[77,690,691],{},[19,692,693],{},"exploration",[77,695,696],{},"Default exploration\u002Fdungeon view",[672,698,95],{"id":95},[53,700,701,709],{},[56,702,703],{},[59,704,705,707],{},[62,706,682],{},[62,708,70],{},[72,710,711,720],{},[59,712,713,717],{},[77,714,715],{},[19,716,548],{},[77,718,719],{},"Map navigation overlay",[59,721,722,727],{},[77,723,724],{},[19,725,726],{},"overlay-exchange",[77,728,729],{},"Trade\u002Floot exchange UI",[731,732,733],"blockquote",{},[15,734,735,738,739,742,743,746],{},[44,736,737],{},"Hoist:"," Overlays render below the UI layer (z-index 300 vs 400). To render an overlay ",[44,740,741],{},"above"," the UI, add the ",[19,744,745],{},"overlay-hoist"," class to its root element. This bumps the overlay wrapper to z-index 500.",[672,748,125],{"id":125},[53,750,751,759],{},[56,752,753],{},[59,754,755,757],{},[62,756,682],{},[62,758,70],{},[72,760,761,771,780],{},[59,762,763,768],{},[77,764,765],{},[19,766,767],{},"quests",[77,769,770],{},"Quest log",[59,772,773,777],{},[77,774,775],{},[19,776,250],{},[77,778,779],{},"Character sheet",[59,781,782,787],{},[77,783,784],{},[19,785,786],{},"gallery",[77,788,789],{},"Gallery tab",[672,791,140],{"id":140},[53,793,794,805],{},[56,795,796],{},[59,797,798,800,802],{},[62,799,682],{},[62,801,70],{},[62,803,804],{},"Props",[72,806,807,819,831],{},[59,808,809,814,817],{},[77,810,811],{},[19,812,813],{},"stats",[77,815,816],{},"Character stats display",[77,818],{},[59,820,821,826,829],{},[77,822,823],{},[19,824,825],{},"skill-trees",[77,827,828],{},"Skill tree interface",[77,830],{},[59,832,833,837,840],{},[77,834,835],{},[19,836,417],{},[77,838,839],{},"Party inventory",[77,841,842],{},[19,843,844],{},"inventory_id",[672,846,847],{"id":847},"debug-tabs",[53,849,850,858],{},[56,851,852],{},[59,853,854,856],{},[62,855,682],{},[62,857,70],{},[72,859,860,870,880,890,900,910,920],{},[59,861,862,867],{},[77,863,864],{},[19,865,866],{},"debug-options",[77,868,869],{},"Debug options",[59,871,872,877],{},[77,873,874],{},[19,875,876],{},"debug-dungeons",[77,878,879],{},"Dungeon debugging",[59,881,882,887],{},[77,883,884],{},[19,885,886],{},"debug-characters",[77,888,889],{},"Character debugging",[59,891,892,897],{},[77,893,894],{},[19,895,896],{},"debug-choices",[77,898,899],{},"Choice debugging",[59,901,902,907],{},[77,903,904],{},[19,905,906],{},"debug-registry",[77,908,909],{},"Registry viewer",[59,911,912,917],{},[77,913,914],{},[19,915,916],{},"debug-inventories",[77,918,919],{},"Inventory debugging",[59,921,922,927],{},[77,923,924],{},[19,925,926],{},"debug-stores",[77,928,929],{},"Store debugging",[672,931,536],{"id":536},[53,933,934,942],{},[56,935,936],{},[59,937,938,940],{},[62,939,682],{},[62,941,70],{},[72,943,944,954,964,974,984,994,1004],{},[59,945,946,951],{},[77,947,948],{},[19,949,950],{},"toolbar-back",[77,952,953],{},"Back button",[59,955,956,961],{},[77,957,958],{},[19,959,960],{},"toolbar-encounter-nav",[77,962,963],{},"Encounter navigation",[59,965,966,971],{},[77,967,968],{},[19,969,970],{},"toolbar-toggle-circles",[77,972,973],{},"Toggle interaction circles",[59,975,976,981],{},[77,977,978],{},[19,979,980],{},"toolbar-zoom-controls",[77,982,983],{},"Zoom in\u002Fout",[59,985,986,991],{},[77,987,988],{},[19,989,990],{},"toolbar-center-room",[77,992,993],{},"Center on current room",[59,995,996,1001],{},[77,997,998],{},[19,999,1000],{},"toolbar-logs",[77,1002,1003],{},"Open logs",[59,1005,1006,1011],{},[77,1007,1008],{},[19,1009,1010],{},"toolbar-minimize",[77,1012,1013],{},"Minimize toolbar",[672,1015,431],{"id":431},[53,1017,1018,1028],{},[56,1019,1020],{},[59,1021,1022,1024,1026],{},[62,1023,682],{},[62,1025,70],{},[62,1027,804],{},[72,1029,1030],{},[59,1031,1032,1037,1040],{},[77,1033,1034],{},[19,1035,1036],{},"default-inventory-header",[77,1038,1039],{},"Default inventory header with filters",[77,1041,1042],{},[19,1043,844],{},[672,1045,659],{"id":659},[53,1047,1048,1056],{},[56,1049,1050],{},[59,1051,1052,1054],{},[62,1053,682],{},[62,1055,70],{},[72,1057,1058],{},[59,1059,1060,1065],{},[77,1061,1062],{},[19,1063,1064],{},"character-list",[77,1066,1067],{},"Party character list panel",[33,1069],{},[36,1071,1073],{"id":1072},"next-steps","Next Steps",[1075,1076,1077],"ul",{},[1078,1079,1080,1082],"li",{},[27,1081,30],{"href":29}," - Vue components overview and examples",{"title":1084,"searchDepth":1085,"depth":1085,"links":1086},"",2,[1087,1088,1089,1100],{"id":38,"depth":1085,"text":39},{"id":153,"depth":1085,"text":154},{"id":669,"depth":1085,"text":670,"children":1090},[1091,1093,1094,1095,1096,1097,1098,1099],{"id":81,"depth":1092,"text":81},3,{"id":95,"depth":1092,"text":95},{"id":125,"depth":1092,"text":125},{"id":140,"depth":1092,"text":140},{"id":847,"depth":1092,"text":847},{"id":536,"depth":1092,"text":536},{"id":431,"depth":1092,"text":431},{"id":659,"depth":1092,"text":659},{"id":1072,"depth":1085,"text":1073},"This page lists all available UI slots where you can register custom Vue components using game.addComponent().","md",{"plugin":1104,"category":1105,"page":1106},"global_essentials","builtins","component_slots",true,"\u002Fdocs\u002Fglobal_essentials\u002Fbuiltins\u002Fcomponent_slots",{"title":5,"description":1101},"docs\u002Fglobal_essentials\u002Fbuiltins\u002Fcomponent_slots","RpECzz6mRcwFzq5fyvilvpAYSRi6vtWPCJIxIS7hTPQ",1779582262466]