[{"data":1,"prerenderedAt":1338},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Fapp":460,"\u002Fcomponents\u002Fapp-surround":1333},[4,34,51,301,327,332,337,406],{"title":5,"path":6,"stem":7,"children":8,"package":11,"icon":33},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,13,18,23,28],{"title":10,"path":6,"stem":7,"package":11,"icon":12},"Introduction",null,"i-lucide-house",{"title":14,"path":15,"stem":16,"package":11,"icon":17},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":19,"path":20,"stem":21,"package":11,"icon":22},"Icons","\u002Fgetting-started\u002Ficons","1.getting-started\u002F3.icons","i-lucide-sparkles",{"title":24,"path":25,"stem":26,"package":11,"icon":27},"CLI","\u002Fgetting-started\u002Fcli","1.getting-started\u002F4.cli","i-lucide-terminal",{"title":29,"path":30,"stem":31,"package":11,"icon":32},"Roadmap","\u002Fgetting-started\u002Froadmap","1.getting-started\u002F5.roadmap","i-lucide-map","i-lucide-rocket",{"title":35,"package":11,"icon":36,"path":37,"stem":38,"children":39,"page":50},"Packages","i-lucide-package","\u002Fpackages","2.packages",[40,45],{"title":41,"path":42,"stem":43,"package":11,"icon":44},"@vyui\u002Fcore","\u002Fpackages\u002Fcore","2.packages\u002F1.core","i-lucide-box",{"title":46,"path":47,"stem":48,"package":11,"icon":49},"@vyui\u002Fkit","\u002Fpackages\u002Fkit","2.packages\u002F2.kit","i-lucide-layers",false,{"title":52,"package":11,"icon":53,"path":54,"stem":55,"children":56},"Components","i-lucide-layout-grid","\u002Fcomponents","3.components",[57,59,65,70,75,80,85,90,95,100,105,110,115,120,125,130,135,140,144,149,153,158,163,168,173,178,183,188,193,198,203,208,213,218,223,228,233,238,242,246,251,256,261,266,271,276,280,284,288,292,296],{"title":52,"path":54,"stem":58,"package":11,"icon":53},"3.components\u002Findex",{"title":60,"path":61,"stem":62,"package":63,"icon":64},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion","kit","i-lucide-list-collapse",{"title":66,"path":67,"stem":68,"package":63,"icon":69},"Action Sheet","\u002Fcomponents\u002Faction-sheet","3.components\u002Faction-sheet","i-lucide-panel-bottom",{"title":71,"path":72,"stem":73,"package":63,"icon":74},"Alert","\u002Fcomponents\u002Falert","3.components\u002Falert","i-lucide-triangle-alert",{"title":76,"path":77,"stem":78,"package":79,"icon":74},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog","core",{"title":81,"path":82,"stem":83,"package":63,"icon":84},"App","\u002Fcomponents\u002Fapp","3.components\u002Fapp","i-lucide-smartphone",{"title":86,"path":87,"stem":88,"package":63,"icon":89},"Aspect Ratio","\u002Fcomponents\u002Faspect-ratio","3.components\u002Faspect-ratio","i-lucide-ratio",{"title":91,"path":92,"stem":93,"package":63,"icon":94},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar","i-lucide-circle-user-round",{"title":96,"path":97,"stem":98,"package":63,"icon":99},"Avatar Group","\u002Fcomponents\u002Favatar-group","3.components\u002Favatar-group","i-lucide-users-round",{"title":101,"path":102,"stem":103,"package":63,"icon":104},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton","i-lucide-square-mouse-pointer",{"title":106,"path":107,"stem":108,"package":63,"icon":109},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar","i-lucide-calendar-days",{"title":111,"path":112,"stem":113,"package":63,"icon":114},"Card","\u002Fcomponents\u002Fcard","3.components\u002Fcard","i-lucide-square",{"title":116,"path":117,"stem":118,"package":63,"icon":119},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox","i-lucide-square-check",{"title":121,"path":122,"stem":123,"package":79,"icon":124},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":126,"path":127,"stem":128,"package":79,"icon":129},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog","i-lucide-app-window",{"title":131,"path":132,"stem":133,"package":79,"icon":134},"Draggable","\u002Fcomponents\u002Fdraggable","3.components\u002Fdraggable","i-lucide-move",{"title":136,"path":137,"stem":138,"package":63,"icon":139},"Form","\u002Fcomponents\u002Fform","3.components\u002Fform","i-lucide-clipboard-list",{"title":141,"path":142,"stem":143,"package":79,"icon":22},"Icon","\u002Fcomponents\u002Ficon","3.components\u002Ficon",{"title":145,"path":146,"stem":147,"package":63,"icon":148},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput","i-lucide-text-cursor-input",{"title":150,"path":151,"stem":152,"package":63,"icon":69},"Island","\u002Fcomponents\u002Fisland","3.components\u002Fisland",{"title":154,"path":155,"stem":156,"package":63,"icon":157},"Island Button","\u002Fcomponents\u002Fisland-button","3.components\u002Fisland-button","i-lucide-circle-ellipsis",{"title":159,"path":160,"stem":161,"package":63,"icon":162},"Island Group","\u002Fcomponents\u002Fisland-group","3.components\u002Fisland-group","i-lucide-panels-top-left",{"title":164,"path":165,"stem":166,"package":63,"icon":167},"KeyboardAware","\u002Fcomponents\u002Fkeyboard-aware","3.components\u002Fkeyboard-aware","i-lucide-keyboard",{"title":169,"path":170,"stem":171,"package":63,"icon":172},"Label","\u002Fcomponents\u002Flabel","3.components\u002Flabel","i-lucide-tag",{"title":174,"path":175,"stem":176,"package":63,"icon":177},"Modal","\u002Fcomponents\u002Fmodal","3.components\u002Fmodal","i-lucide-gallery-vertical-end",{"title":179,"path":180,"stem":181,"package":79,"icon":182},"Navigation","\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation","i-lucide-route",{"title":184,"path":185,"stem":186,"package":63,"icon":187},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field","i-lucide-list-plus",{"title":189,"path":190,"stem":191,"package":79,"icon":192},"Pagination","\u002Fcomponents\u002Fpagination","3.components\u002Fpagination","i-lucide-ellipsis",{"title":194,"path":195,"stem":196,"package":63,"icon":197},"Pin Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input","i-lucide-key-round",{"title":199,"path":200,"stem":201,"package":63,"icon":202},"Placeholder","\u002Fcomponents\u002Fplaceholder","3.components\u002Fplaceholder","i-lucide-square-dashed",{"title":204,"path":205,"stem":206,"package":63,"icon":207},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover","i-lucide-message-square-more",{"title":209,"path":210,"stem":211,"package":63,"icon":212},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress","i-lucide-chart-no-axes-column-increasing",{"title":214,"path":215,"stem":216,"package":63,"icon":217},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group","i-lucide-circle-dot",{"title":219,"path":220,"stem":221,"package":63,"icon":222},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating","i-lucide-star",{"title":224,"path":225,"stem":226,"package":79,"icon":227},"Scroll View","\u002Fcomponents\u002Fscroll-view","3.components\u002Fscroll-view","i-lucide-scroll",{"title":229,"path":230,"stem":231,"package":63,"icon":232},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect","i-lucide-list-check",{"title":234,"path":235,"stem":236,"package":63,"icon":237},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator","i-lucide-separator-horizontal",{"title":239,"path":240,"stem":241,"package":79,"icon":69},"Sheet","\u002Fcomponents\u002Fsheet","3.components\u002Fsheet",{"title":243,"path":244,"stem":245,"package":63,"icon":162},"Skeleton","\u002Fcomponents\u002Fskeleton","3.components\u002Fskeleton",{"title":247,"path":248,"stem":249,"package":63,"icon":250},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider","i-lucide-sliders-horizontal",{"title":252,"path":253,"stem":254,"package":63,"icon":255},"Sortable","\u002Fcomponents\u002Fsortable","3.components\u002Fsortable","i-lucide-list-restart",{"title":257,"path":258,"stem":259,"package":63,"icon":260},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper","i-lucide-list-ordered",{"title":262,"path":263,"stem":264,"package":63,"icon":265},"Swipe Action","\u002Fcomponents\u002Fswipe-action","3.components\u002Fswipe-action","i-lucide-move-horizontal",{"title":267,"path":268,"stem":269,"package":63,"icon":270},"Swiper","\u002Fcomponents\u002Fswiper","3.components\u002Fswiper","i-lucide-gallery-horizontal-end",{"title":272,"path":273,"stem":274,"package":63,"icon":275},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch","i-lucide-toggle-right",{"title":277,"path":278,"stem":279,"package":63,"icon":162},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"title":281,"path":282,"stem":283,"package":63,"icon":148},"Textarea","\u002Fcomponents\u002Ftextarea","3.components\u002Ftextarea",{"title":285,"path":286,"stem":287,"package":63,"icon":207},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"title":289,"path":290,"stem":291,"package":63,"icon":275},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle",{"title":293,"path":294,"stem":295,"package":63,"icon":162},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"title":297,"path":298,"stem":299,"package":63,"icon":300},"Tray","\u002Fcomponents\u002Ftray","3.components\u002Ftray","i-lucide-square-dashed-bottom",{"title":302,"path":303,"stem":304,"children":305,"package":11,"icon":307},"Theming","\u002Ftheming","4.theming\u002F1.index",[306,308,312,317,322],{"title":302,"path":303,"stem":304,"package":11,"icon":307},"i-lucide-palette",{"title":309,"path":310,"stem":311,"package":11,"icon":250},"Overrides","\u002Ftheming\u002Foverrides","4.theming\u002F2.overrides",{"title":313,"path":314,"stem":315,"package":11,"icon":316},"Colors","\u002Ftheming\u002Fcolors","4.theming\u002F3.colors","i-lucide-swatch-book",{"title":318,"path":319,"stem":320,"package":11,"icon":321},"Dark Mode","\u002Ftheming\u002Fdark-mode","4.theming\u002F4.dark-mode","i-lucide-moon",{"title":323,"path":324,"stem":325,"package":11,"icon":326},"Fonts","\u002Ftheming\u002Ffonts","4.theming\u002F5.fonts","i-lucide-type",{"title":328,"path":329,"stem":330,"package":11,"icon":331},"Accessibility","\u002Faccessibility","5.accessibility","i-lucide-accessibility",{"title":333,"path":334,"stem":335,"package":11,"icon":336},"i18n","\u002Fi18n","6.i18n","i-lucide-languages",{"title":338,"path":339,"stem":340,"children":341,"package":11,"icon":343},"Composables","\u002Fcomposables","7.composables\u002F1.index",[342,344,349,354,359,364,369,374,378,383,387,391,396,401],{"title":338,"path":339,"stem":340,"package":11,"icon":343},"i-lucide-square-function",{"title":345,"path":346,"stem":347,"package":11,"icon":348},"useEmitAsProps","\u002Fcomposables\u002Fuse-emit-as-props","7.composables\u002F10.use-emit-as-props","i-lucide-zap",{"title":350,"path":351,"stem":352,"package":11,"icon":353},"useForwardPropsEmits","\u002Fcomposables\u002Fuse-forward-props-emits","7.composables\u002F11.use-forward-props-emits","i-lucide-merge",{"title":355,"path":356,"stem":357,"package":11,"icon":358},"useForwardExpose","\u002Fcomposables\u002Fuse-forward-expose","7.composables\u002F12.use-forward-expose","i-lucide-share-2",{"title":360,"path":361,"stem":362,"package":11,"icon":363},"useStateMachine","\u002Fcomposables\u002Fuse-state-machine","7.composables\u002F13.use-state-machine","i-lucide-workflow",{"title":365,"path":366,"stem":367,"package":11,"icon":368},"usePrimitiveElement","\u002Fcomposables\u002Fuse-primitive-element","7.composables\u002F14.use-primitive-element","i-lucide-crosshair",{"title":370,"path":371,"stem":372,"package":11,"icon":373},"useAppConfig","\u002Fcomposables\u002Fuse-app-config","7.composables\u002F2.use-app-config","i-lucide-settings",{"title":375,"path":376,"stem":377,"package":11,"icon":321},"useColorMode","\u002Fcomposables\u002Fuse-color-mode","7.composables\u002F3.use-color-mode",{"title":379,"path":380,"stem":381,"package":11,"icon":382},"useComponentIcons","\u002Fcomposables\u002Fuse-component-icons","7.composables\u002F4.use-component-icons","i-lucide-shapes",{"title":384,"path":385,"stem":386,"package":11,"icon":69},"useTray","\u002Fcomposables\u002Fuse-tray","7.composables\u002F5.use-tray",{"title":388,"path":389,"stem":390,"package":11,"icon":336},"i18n composables","\u002Fcomposables\u002Fi18n-composables","7.composables\u002F6.i18n-composables",{"title":392,"path":393,"stem":394,"package":11,"icon":395},"useId","\u002Fcomposables\u002Fuse-id","7.composables\u002F7.use-id","i-lucide-hash",{"title":397,"path":398,"stem":399,"package":11,"icon":400},"useFilter","\u002Fcomposables\u002Fuse-filter","7.composables\u002F8.use-filter","i-lucide-filter",{"title":402,"path":403,"stem":404,"package":11,"icon":405},"useForwardProps","\u002Fcomposables\u002Fuse-forward-props","7.composables\u002F9.use-forward-props","i-lucide-arrow-right-left",{"title":407,"path":408,"stem":409,"children":410,"package":11,"icon":412},"Guides","\u002Fguides","8.guides\u002F1.index",[411,413,417,422,427,432,437,441,446,450,455],{"title":407,"path":408,"stem":409,"package":11,"icon":412},"i-lucide-book-open",{"title":414,"path":415,"stem":416,"package":11,"icon":348},"Instant first-frame rendering","\u002Fguides\u002Finstant-first-frame-rendering","8.guides\u002F10.instant-first-frame-rendering",{"title":418,"path":419,"stem":420,"package":11,"icon":421},"Why use Vy UI","\u002Fguides\u002Fwhy-vy-ui","8.guides\u002F11.why-vy-ui","i-lucide-help-circle",{"title":423,"path":424,"stem":425,"package":11,"icon":426},"Lynx UI frameworks","\u002Fguides\u002Flynx-ui-frameworks","8.guides\u002F2.lynx-ui-frameworks","i-lucide-library",{"title":428,"path":429,"stem":430,"package":11,"icon":431},"What is Vue Lynx","\u002Fguides\u002Fvue-lynx","8.guides\u002F3.vue-lynx","i-lucide-component",{"title":433,"path":434,"stem":435,"package":11,"icon":436},"Lynx vs React Native","\u002Fguides\u002Flynx-vs-react-native","8.guides\u002F4.lynx-vs-react-native","i-lucide-git-compare",{"title":438,"path":439,"stem":440,"package":11,"icon":84},"Testing on your phone","\u002Fguides\u002Ftesting-on-device","8.guides\u002F5.testing-on-device",{"title":442,"path":443,"stem":444,"package":11,"icon":445},"Testing with Xcode","\u002Fguides\u002Ftesting-with-xcode","8.guides\u002F6.testing-with-xcode","i-lucide-apple",{"title":447,"path":448,"stem":449,"package":11,"icon":27},"The rspeedy dev server","\u002Fguides\u002Frspeedy-dev-server","8.guides\u002F7.rspeedy-dev-server",{"title":451,"path":452,"stem":453,"package":11,"icon":454},"Tailwind on Lynx","\u002Fguides\u002Ftailwind-on-lynx","8.guides\u002F8.tailwind-on-lynx","i-lucide-wind",{"title":456,"path":457,"stem":458,"package":11,"icon":459},"Theming on Lynx","\u002Fguides\u002Ftheming-on-lynx","8.guides\u002F9.theming-on-lynx","i-lucide-paintbrush",{"id":461,"title":81,"body":462,"description":1321,"extension":1322,"links":1323,"meta":1329,"navigation":1330,"package":63,"path":82,"seo":1331,"stem":83,"__hash__":1332},"docs\u002F3.components\u002Fapp.md",{"type":463,"value":464,"toc":1304},"minimark",[465,470,484,621,725,734,738,743,775,779,812,874,878,892,933,937,958,1033,1037,1048,1097,1101,1149,1153,1156,1160,1163,1167,1170,1174,1185,1223,1227,1267,1271,1300],[466,467,469],"h2",{"id":468},"overview","Overview",[471,472,473,477,478,483],"p",{},[474,475,476],"code",{},"VyApp"," is the recommended root wrapper for a Vy UI app. It owns the dark-mode class-toggle + remount contract that ",[479,480,481],"a",{"href":319},[474,482,375],{}," requires of an app root, mounts the shared overlay host so teleporting surfaces work with zero setup, and reports the root's size whenever it changes.",[485,486,492],"pre",{"className":487,"code":488,"filename":489,"language":490,"meta":491,"style":491},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { VyApp } from '@vyui\u002Fkit\u002Fapp'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVyApp>\n    \u003C!-- your screens -->\n  \u003C\u002FVyApp>\n\u003C\u002Ftemplate>\n","src\u002FApp.vue","vue","",[474,493,494,529,558,568,575,585,595,602,612],{"__ignoreMap":491},[495,496,499,503,507,511,514,517,520,524,526],"span",{"class":497,"line":498},"line",1,[495,500,502],{"class":501},"sMK4o","\u003C",[495,504,506],{"class":505},"swJcz","script",[495,508,510],{"class":509},"spNyl"," setup",[495,512,513],{"class":509}," lang",[495,515,516],{"class":501},"=",[495,518,519],{"class":501},"\"",[495,521,523],{"class":522},"sfazB","ts",[495,525,519],{"class":501},[495,527,528],{"class":501},">\n",[495,530,532,536,539,543,546,549,552,555],{"class":497,"line":531},2,[495,533,535],{"class":534},"s7zQu","import",[495,537,538],{"class":501}," {",[495,540,542],{"class":541},"sTEyZ"," VyApp",[495,544,545],{"class":501}," }",[495,547,548],{"class":534}," from",[495,550,551],{"class":501}," '",[495,553,554],{"class":522},"@vyui\u002Fkit\u002Fapp",[495,556,557],{"class":501},"'\n",[495,559,561,564,566],{"class":497,"line":560},3,[495,562,563],{"class":501},"\u003C\u002F",[495,565,506],{"class":505},[495,567,528],{"class":501},[495,569,571],{"class":497,"line":570},4,[495,572,574],{"emptyLinePlaceholder":573},true,"\n",[495,576,578,580,583],{"class":497,"line":577},5,[495,579,502],{"class":501},[495,581,582],{"class":505},"template",[495,584,528],{"class":501},[495,586,588,591,593],{"class":497,"line":587},6,[495,589,590],{"class":501},"  \u003C",[495,592,476],{"class":505},[495,594,528],{"class":501},[495,596,598],{"class":497,"line":597},7,[495,599,601],{"class":600},"sHwdD","    \u003C!-- your screens -->\n",[495,603,605,608,610],{"class":497,"line":604},8,[495,606,607],{"class":501},"  \u003C\u002F",[495,609,476],{"class":505},[495,611,528],{"class":501},[495,613,615,617,619],{"class":497,"line":614},9,[495,616,563],{"class":501},[495,618,582],{"class":505},[495,620,528],{"class":501},[485,622,626],{"className":623,"code":624,"filename":625,"language":523,"meta":491,"style":491},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { createApp } from '@lynx-js\u002Fvue'\nimport { VyUI } from '@vyui\u002Fkit'\nimport App from '.\u002FApp.vue'\n\ncreateApp(App).use(VyUI).mount('#app')\n","src\u002Findex.ts",[474,627,628,648,667,684,688],{"__ignoreMap":491},[495,629,630,632,634,637,639,641,643,646],{"class":497,"line":498},[495,631,535],{"class":534},[495,633,538],{"class":501},[495,635,636],{"class":541}," createApp",[495,638,545],{"class":501},[495,640,548],{"class":534},[495,642,551],{"class":501},[495,644,645],{"class":522},"@lynx-js\u002Fvue",[495,647,557],{"class":501},[495,649,650,652,654,657,659,661,663,665],{"class":497,"line":531},[495,651,535],{"class":534},[495,653,538],{"class":501},[495,655,656],{"class":541}," VyUI",[495,658,545],{"class":501},[495,660,548],{"class":534},[495,662,551],{"class":501},[495,664,46],{"class":522},[495,666,557],{"class":501},[495,668,669,671,674,677,679,682],{"class":497,"line":560},[495,670,535],{"class":534},[495,672,673],{"class":541}," App ",[495,675,676],{"class":534},"from",[495,678,551],{"class":501},[495,680,681],{"class":522},".\u002FApp.vue",[495,683,557],{"class":501},[495,685,686],{"class":497,"line":570},[495,687,574],{"emptyLinePlaceholder":573},[495,689,690,694,697,700,703,706,708,711,714,717,720,722],{"class":497,"line":577},[495,691,693],{"class":692},"s2Zo4","createApp",[495,695,696],{"class":541},"(App)",[495,698,699],{"class":501},".",[495,701,702],{"class":692},"use",[495,704,705],{"class":541},"(VyUI)",[495,707,699],{"class":501},[495,709,710],{"class":692},"mount",[495,712,713],{"class":541},"(",[495,715,716],{"class":501},"'",[495,718,719],{"class":522},"#app",[495,721,716],{"class":501},[495,723,724],{"class":541},")\n",[726,727,728],"callout",{"icon":44},[471,729,730,731,733],{},"Reach for ",[474,732,476],{}," once, at the top of the tree. Everything it wires up — the dark ramp, the overlay host, the viewport signal — applies to the whole app below it.",[466,735,737],{"id":736},"usage","Usage",[739,740,742],"h3",{"id":741},"dark-mode","Dark mode",[471,744,745,747,748,752,753,756,757,760,761,764,765,768,769,771,772,774],{},[474,746,476],{}," reads ",[479,749,750],{"href":319},[474,751,375],{},"'s ",[474,754,755],{},"mode"," \u002F ",[474,758,759],{},"isDark"," and applies both pieces of the app-root contract: the ",[474,762,763],{},".dark"," class and a ",[474,766,767],{},":key=\"mode\""," remount. Lynx native only applies a class change to freshly mounted nodes, so toggling ",[474,770,763],{}," on an already-mounted tree would not re-skin it — keying on ",[474,773,755],{}," remounts the subtree on every change, turning that platform quirk into the mechanism. You get this for free just by wrapping your app; nothing further to wire up.",[739,776,778],{"id":777},"overlay-host","Overlay host",[471,780,781,782,784,785,788,789,791,792,794,795,794,797,799,800,803,804,807,808,811],{},"By default ",[474,783,476],{}," mounts ",[474,786,787],{},"OverlayRoot"," (from ",[474,790,41],{},") as its first child, so ",[474,793,174],{},", ",[474,796,297],{},[474,798,285],{},", and other teleporting components work without any hand-wiring. Set ",[474,801,802],{},"overlays"," to ",[474,805,806],{},"false"," and place your own ",[474,809,810],{},"\u003COverlayRoot \u002F>"," if you need control over where it sits in the tree.",[485,813,815],{"className":487,"code":814,"language":490,"meta":491,"style":491},"\u003Ctemplate>\n  \u003CVyApp :overlays=\"false\">\n    \u003COverlayRoot \u002F>\n    \u003C!-- your screens -->\n  \u003C\u002FVyApp>\n\u003C\u002Ftemplate>\n",[474,816,817,825,844,854,858,866],{"__ignoreMap":491},[495,818,819,821,823],{"class":497,"line":498},[495,820,502],{"class":501},[495,822,582],{"class":505},[495,824,528],{"class":501},[495,826,827,829,831,834,836,838,840,842],{"class":497,"line":531},[495,828,590],{"class":501},[495,830,476],{"class":505},[495,832,833],{"class":509}," :overlays",[495,835,516],{"class":501},[495,837,519],{"class":501},[495,839,806],{"class":522},[495,841,519],{"class":501},[495,843,528],{"class":501},[495,845,846,849,851],{"class":497,"line":560},[495,847,848],{"class":501},"    \u003C",[495,850,787],{"class":505},[495,852,853],{"class":501}," \u002F>\n",[495,855,856],{"class":497,"line":570},[495,857,601],{"class":600},[495,859,860,862,864],{"class":497,"line":577},[495,861,607],{"class":501},[495,863,476],{"class":505},[495,865,528],{"class":501},[495,867,868,870,872],{"class":497,"line":587},[495,869,563],{"class":501},[495,871,582],{"class":505},[495,873,528],{"class":501},[739,875,877],{"id":876},"radius-token","Radius token",[471,879,880,881,884,885,888,889,699],{},"Pass ",[474,882,883],{},"radius"," to set ",[474,886,887],{},"--ui-radius"," (in rem) on the root, overriding the default shipped in ",[474,890,891],{},"@vyui\u002Fkit\u002Fstyle.css",[485,893,895],{"className":487,"code":894,"language":490,"meta":491,"style":491},"\u003CVyApp :radius=\"0.75\">\n  \u003C!-- your screens -->\n\u003C\u002FVyApp>\n",[474,896,897,920,925],{"__ignoreMap":491},[495,898,899,901,903,906,908,910,912,916,918],{"class":497,"line":498},[495,900,502],{"class":501},[495,902,476],{"class":505},[495,904,905],{"class":501}," :",[495,907,883],{"class":509},[495,909,516],{"class":501},[495,911,519],{"class":501},[495,913,915],{"class":914},"sbssI","0.75",[495,917,519],{"class":501},[495,919,528],{"class":501},[495,921,922],{"class":497,"line":531},[495,923,924],{"class":541},"  \u003C!-- your screens -->\n",[495,926,927,929,931],{"class":497,"line":560},[495,928,563],{"class":501},[495,930,476],{"class":505},[495,932,528],{"class":501},[739,934,936],{"id":935},"viewport-size","Viewport size",[471,938,939,941,942,945,946,949,950,953,954,957],{},[474,940,476],{}," emits ",[474,943,944],{},"viewport-change"," with ",[474,947,948],{},"{ width, height }"," on mount and on every resize (rotation, split-screen), sourced from the background-thread ",[474,951,952],{},"layoutchange"," event. ",[474,955,956],{},"main-thread-*"," attrs do not reliably attach to this root, so this is the supported way to observe root size.",[485,959,961],{"className":487,"code":960,"language":490,"meta":491,"style":491},"\u003CVyApp @viewport-change=\"(size) => console.log(size.width, size.height)\">\n  \u003C!-- your screens -->\n\u003C\u002FVyApp>\n",[474,962,963,1021,1025],{"__ignoreMap":491},[495,964,965,967,969,972,974,976,978,980,984,987,990,993,995,998,1001,1003,1006,1009,1012,1014,1017,1019],{"class":497,"line":498},[495,966,502],{"class":501},[495,968,476],{"class":505},[495,970,971],{"class":501}," @",[495,973,944],{"class":509},[495,975,516],{"class":501},[495,977,519],{"class":501},[495,979,713],{"class":501},[495,981,983],{"class":982},"sHdIc","size",[495,985,986],{"class":501},")",[495,988,989],{"class":509}," =>",[495,991,992],{"class":541}," console",[495,994,699],{"class":501},[495,996,997],{"class":692},"log",[495,999,1000],{"class":541},"(size",[495,1002,699],{"class":501},[495,1004,1005],{"class":541},"width",[495,1007,1008],{"class":501},",",[495,1010,1011],{"class":541}," size",[495,1013,699],{"class":501},[495,1015,1016],{"class":541},"height)",[495,1018,519],{"class":501},[495,1020,528],{"class":501},[495,1022,1023],{"class":497,"line":531},[495,1024,924],{"class":541},[495,1026,1027,1029,1031],{"class":497,"line":560},[495,1028,563],{"class":501},[495,1030,476],{"class":505},[495,1032,528],{"class":501},[739,1034,1036],{"id":1035},"reading-color-mode-from-the-slot","Reading color mode from the slot",[471,1038,1039,1040,1043,1044,1047],{},"The default slot receives ",[474,1041,1042],{},"{ mode, isDark }"," — the same values ",[474,1045,1046],{},"useColorMode()"," returns — so a descendant can react to color mode without importing the composable itself.",[485,1049,1051],{"className":487,"code":1050,"language":490,"meta":491,"style":491},"\u003CVyApp v-slot=\"{ mode, isDark }\">\n  \u003Ctext>Current mode: {{ mode }} ({{ isDark ? 'dark' : 'light' }})\u003C\u002Ftext>\n\u003C\u002FVyApp>\n",[474,1052,1053,1084,1089],{"__ignoreMap":491},[495,1054,1055,1057,1059,1062,1064,1066,1069,1072,1074,1077,1080,1082],{"class":497,"line":498},[495,1056,502],{"class":501},[495,1058,476],{"class":505},[495,1060,1061],{"class":509}," v-slot",[495,1063,516],{"class":501},[495,1065,519],{"class":501},[495,1067,1068],{"class":501},"{",[495,1070,1071],{"class":541}," mode",[495,1073,1008],{"class":501},[495,1075,1076],{"class":541}," isDark ",[495,1078,1079],{"class":501},"}",[495,1081,519],{"class":501},[495,1083,528],{"class":501},[495,1085,1086],{"class":497,"line":531},[495,1087,1088],{"class":541},"  \u003Ctext>Current mode: {{ mode }} ({{ isDark ? 'dark' : 'light' }})\u003C\u002Ftext>\n",[495,1090,1091,1093,1095],{"class":497,"line":560},[495,1092,563],{"class":501},[495,1094,476],{"class":505},[495,1096,528],{"class":501},[466,1098,1100],{"id":1099},"features-and-behavior","Features and behavior",[1102,1103,1104,1113,1123,1131,1140],"ul",{},[1105,1106,1107,1108,764,1110,1112],"li",{},"Applies the ",[474,1109,763],{},[474,1111,767],{}," remount together, so color mode toggles correctly on Lynx native and on web.",[1105,1114,1115,1116,1118,1119,1122],{},"Mounts ",[474,1117,787],{}," as the first child by default; opt out with ",[474,1120,1121],{},"overlays=\"false\""," to place it yourself.",[1105,1124,1125,1127,1128,1130],{},[474,1126,883],{}," sets ",[474,1129,887],{}," inline, in rem.",[1105,1132,1133,1134,1136,1137,1139],{},"Emits ",[474,1135,944],{}," on mount and resize, from the background-thread ",[474,1138,952],{}," event.",[1105,1141,1142,1143,1145,1146,1148],{},"The default slot exposes ",[474,1144,1042],{}," for consumers that want color mode without calling ",[474,1147,1046],{}," directly.",[466,1150,1152],{"id":1151},"props","Props",[1154,1155],"component-props",{"name":81},[466,1157,1159],{"id":1158},"emits","Emits",[1161,1162],"component-emits",{"name":81},[466,1164,1166],{"id":1165},"slots","Slots",[1168,1169],"component-slots",{"name":81},[466,1171,1173],{"id":1172},"styling-and-theming","Styling and theming",[471,1175,1176,1177,1180,1181,1184],{},"Override globally through ",[474,1178,1179],{},"appConfig.ui.app"," or locally with the ",[474,1182,1183],{},"ui"," prop.",[1186,1187,1188,1201],"table",{},[1189,1190,1191],"thead",{},[1192,1193,1194,1198],"tr",{},[1195,1196,1197],"th",{},"UI slot",[1195,1199,1200],{},"Purpose",[1202,1203,1204],"tbody",{},[1192,1205,1206,1212],{},[1207,1208,1209],"td",{},[474,1210,1211],{},"root",[1207,1213,1214,1215,1218,1219,1222],{},"The app-root element. Paints the ",[474,1216,1217],{},"bg-default"," surface token and fills the viewport (",[474,1220,1221],{},"w-full h-full",").",[466,1224,1226],{"id":1225},"platform-notes","Platform notes",[1102,1228,1229,1240,1251],{},[1105,1230,1231,1232,1234,1235,1239],{},"The dark-mode remount relies on Lynx native applying class changes only to freshly mounted nodes — ",[474,1233,767],{}," turns that into the toggle mechanism. See ",[479,1236,1237],{"href":319},[474,1238,375],{}," for the full rationale.",[1105,1241,1242,1244,1245,1247,1248,1250],{},[474,1243,944],{}," is sourced from the background-thread ",[474,1246,952],{}," event rather than a ",[474,1249,956],{}," binding, because those attrs do not reliably fall through onto this root.",[1105,1252,1253,1254,794,1256,794,1258,1260,1261,1263,1264,1266],{},"Components that teleport (",[474,1255,174],{},[474,1257,297],{},[474,1259,285],{},", …) need an ",[474,1262,787],{}," somewhere in the tree to render at all — ",[474,1265,476],{}," provides one by default so this is rarely something you need to think about.",[466,1268,1270],{"id":1269},"related-components","Related components",[1102,1272,1273,1283,1290],{},[1105,1274,1275,1279,1280,1282],{},[479,1276,1277],{"href":298},[474,1278,297],{}," for a bottom sheet mounted through the overlay host ",[474,1281,476],{}," provides.",[1105,1284,1285,1289],{},[479,1286,1287],{"href":175},[474,1288,174],{}," for a centered blocking dialog, same overlay host.",[1105,1291,1292,1295,1296,1299],{},[479,1293,1294],{"href":319},"Theming → Dark Mode"," and ",[479,1297,1298],{"href":310},"Theming → Overrides"," for runtime theme overrides.",[1301,1302,1303],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 .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}",{"title":491,"searchDepth":498,"depth":531,"links":1305},[1306,1307,1314,1315,1316,1317,1318,1319,1320],{"id":468,"depth":531,"text":469},{"id":736,"depth":531,"text":737,"children":1308},[1309,1310,1311,1312,1313],{"id":741,"depth":560,"text":742},{"id":777,"depth":560,"text":778},{"id":876,"depth":560,"text":877},{"id":935,"depth":560,"text":936},{"id":1035,"depth":560,"text":1036},{"id":1099,"depth":531,"text":1100},{"id":1151,"depth":531,"text":1152},{"id":1158,"depth":531,"text":1159},{"id":1165,"depth":531,"text":1166},{"id":1172,"depth":531,"text":1173},{"id":1225,"depth":531,"text":1226},{"id":1269,"depth":531,"text":1270},"The recommended app-root wrapper — owns dark mode, mounts the overlay host, and reports viewport size.","md",[1324],{"label":1325,"icon":1326,"to":1327,"target":1328},"Source","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002FKealanAU\u002Fvyui\u002Fblob\u002Fmain\u002Fpackages\u002Fkit\u002Fsrc\u002Fcomponents\u002FApp.vue","_blank",{},{"icon":84},{"title":81,"description":1321},"kYTo5YOIBg4fchrGH2TFCpWJCYbV6t2wpKmFUh8A-U0",[1334,1336],{"title":76,"path":77,"stem":78,"description":1335,"icon":-1,"children":-1,"navigation":-1},"Headless confirmation dialog primitive that interrupts the user with a required action or cancel.",{"title":86,"path":87,"stem":88,"description":1337,"icon":-1,"children":-1,"navigation":-1},"Constrain content to a fixed width-to-height ratio.",1785060128979]