[{"data":1,"prerenderedAt":1283},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Fapp":406,"\u002Fcomponents\u002Fapp-surround":1278},[4,34,51,301,327,332,337],{"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",{"id":407,"title":81,"body":408,"description":1266,"extension":1267,"links":1268,"meta":1274,"navigation":1275,"package":63,"path":82,"seo":1276,"stem":83,"__hash__":1277},"docs\u002F3.components\u002Fapp.md",{"type":409,"value":410,"toc":1249},"minimark",[411,416,430,566,670,679,683,688,720,724,757,819,823,837,878,882,903,978,982,993,1042,1046,1094,1098,1101,1105,1108,1112,1115,1119,1130,1168,1172,1212,1216,1245],[412,413,415],"h2",{"id":414},"overview","Overview",[417,418,419,423,424,429],"p",{},[420,421,422],"code",{},"VyApp"," is the recommended root wrapper for a Vy UI app. It owns the dark-mode class-toggle + remount contract that ",[425,426,427],"a",{"href":319},[420,428,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.",[431,432,438],"pre",{"className":433,"code":434,"filename":435,"language":436,"meta":437,"style":437},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { VyApp } from '@vyui\u002Fkit'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVyApp>\n    \u003C!-- your screens -->\n  \u003C\u002FVyApp>\n\u003C\u002Ftemplate>\n","src\u002FApp.vue","vue","",[420,439,440,475,503,513,520,530,540,547,557],{"__ignoreMap":437},[441,442,445,449,453,457,460,463,466,470,472],"span",{"class":443,"line":444},"line",1,[441,446,448],{"class":447},"sMK4o","\u003C",[441,450,452],{"class":451},"swJcz","script",[441,454,456],{"class":455},"spNyl"," setup",[441,458,459],{"class":455}," lang",[441,461,462],{"class":447},"=",[441,464,465],{"class":447},"\"",[441,467,469],{"class":468},"sfazB","ts",[441,471,465],{"class":447},[441,473,474],{"class":447},">\n",[441,476,478,482,485,489,492,495,498,500],{"class":443,"line":477},2,[441,479,481],{"class":480},"s7zQu","import",[441,483,484],{"class":447}," {",[441,486,488],{"class":487},"sTEyZ"," VyApp",[441,490,491],{"class":447}," }",[441,493,494],{"class":480}," from",[441,496,497],{"class":447}," '",[441,499,46],{"class":468},[441,501,502],{"class":447},"'\n",[441,504,506,509,511],{"class":443,"line":505},3,[441,507,508],{"class":447},"\u003C\u002F",[441,510,452],{"class":451},[441,512,474],{"class":447},[441,514,516],{"class":443,"line":515},4,[441,517,519],{"emptyLinePlaceholder":518},true,"\n",[441,521,523,525,528],{"class":443,"line":522},5,[441,524,448],{"class":447},[441,526,527],{"class":451},"template",[441,529,474],{"class":447},[441,531,533,536,538],{"class":443,"line":532},6,[441,534,535],{"class":447},"  \u003C",[441,537,422],{"class":451},[441,539,474],{"class":447},[441,541,543],{"class":443,"line":542},7,[441,544,546],{"class":545},"sHwdD","    \u003C!-- your screens -->\n",[441,548,550,553,555],{"class":443,"line":549},8,[441,551,552],{"class":447},"  \u003C\u002F",[441,554,422],{"class":451},[441,556,474],{"class":447},[441,558,560,562,564],{"class":443,"line":559},9,[441,561,508],{"class":447},[441,563,527],{"class":451},[441,565,474],{"class":447},[431,567,571],{"className":568,"code":569,"filename":570,"language":469,"meta":437,"style":437},"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",[420,572,573,593,612,629,633],{"__ignoreMap":437},[441,574,575,577,579,582,584,586,588,591],{"class":443,"line":444},[441,576,481],{"class":480},[441,578,484],{"class":447},[441,580,581],{"class":487}," createApp",[441,583,491],{"class":447},[441,585,494],{"class":480},[441,587,497],{"class":447},[441,589,590],{"class":468},"@lynx-js\u002Fvue",[441,592,502],{"class":447},[441,594,595,597,599,602,604,606,608,610],{"class":443,"line":477},[441,596,481],{"class":480},[441,598,484],{"class":447},[441,600,601],{"class":487}," VyUI",[441,603,491],{"class":447},[441,605,494],{"class":480},[441,607,497],{"class":447},[441,609,46],{"class":468},[441,611,502],{"class":447},[441,613,614,616,619,622,624,627],{"class":443,"line":505},[441,615,481],{"class":480},[441,617,618],{"class":487}," App ",[441,620,621],{"class":480},"from",[441,623,497],{"class":447},[441,625,626],{"class":468},".\u002FApp.vue",[441,628,502],{"class":447},[441,630,631],{"class":443,"line":515},[441,632,519],{"emptyLinePlaceholder":518},[441,634,635,639,642,645,648,651,653,656,659,662,665,667],{"class":443,"line":522},[441,636,638],{"class":637},"s2Zo4","createApp",[441,640,641],{"class":487},"(App)",[441,643,644],{"class":447},".",[441,646,647],{"class":637},"use",[441,649,650],{"class":487},"(VyUI)",[441,652,644],{"class":447},[441,654,655],{"class":637},"mount",[441,657,658],{"class":487},"(",[441,660,661],{"class":447},"'",[441,663,664],{"class":468},"#app",[441,666,661],{"class":447},[441,668,669],{"class":487},")\n",[671,672,673],"callout",{"icon":44},[417,674,675,676,678],{},"Reach for ",[420,677,422],{}," 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.",[412,680,682],{"id":681},"usage","Usage",[684,685,687],"h3",{"id":686},"dark-mode","Dark mode",[417,689,690,692,693,697,698,701,702,705,706,709,710,713,714,716,717,719],{},[420,691,422],{}," reads ",[425,694,695],{"href":319},[420,696,375],{},"'s ",[420,699,700],{},"mode"," \u002F ",[420,703,704],{},"isDark"," and applies both pieces of the app-root contract: the ",[420,707,708],{},".dark"," class and a ",[420,711,712],{},":key=\"mode\""," remount. Lynx native only applies a class change to freshly mounted nodes, so toggling ",[420,715,708],{}," on an already-mounted tree would not re-skin it — keying on ",[420,718,700],{}," 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.",[684,721,723],{"id":722},"overlay-host","Overlay host",[417,725,726,727,729,730,733,734,736,737,739,740,739,742,744,745,748,749,752,753,756],{},"By default ",[420,728,422],{}," mounts ",[420,731,732],{},"OverlayRoot"," (from ",[420,735,41],{},") as its first child, so ",[420,738,174],{},", ",[420,741,297],{},[420,743,285],{},", and other teleporting components work without any hand-wiring. Set ",[420,746,747],{},"overlays"," to ",[420,750,751],{},"false"," and place your own ",[420,754,755],{},"\u003COverlayRoot \u002F>"," if you need control over where it sits in the tree.",[431,758,760],{"className":433,"code":759,"language":436,"meta":437,"style":437},"\u003Ctemplate>\n  \u003CVyApp :overlays=\"false\">\n    \u003COverlayRoot \u002F>\n    \u003C!-- your screens -->\n  \u003C\u002FVyApp>\n\u003C\u002Ftemplate>\n",[420,761,762,770,789,799,803,811],{"__ignoreMap":437},[441,763,764,766,768],{"class":443,"line":444},[441,765,448],{"class":447},[441,767,527],{"class":451},[441,769,474],{"class":447},[441,771,772,774,776,779,781,783,785,787],{"class":443,"line":477},[441,773,535],{"class":447},[441,775,422],{"class":451},[441,777,778],{"class":455}," :overlays",[441,780,462],{"class":447},[441,782,465],{"class":447},[441,784,751],{"class":468},[441,786,465],{"class":447},[441,788,474],{"class":447},[441,790,791,794,796],{"class":443,"line":505},[441,792,793],{"class":447},"    \u003C",[441,795,732],{"class":451},[441,797,798],{"class":447}," \u002F>\n",[441,800,801],{"class":443,"line":515},[441,802,546],{"class":545},[441,804,805,807,809],{"class":443,"line":522},[441,806,552],{"class":447},[441,808,422],{"class":451},[441,810,474],{"class":447},[441,812,813,815,817],{"class":443,"line":532},[441,814,508],{"class":447},[441,816,527],{"class":451},[441,818,474],{"class":447},[684,820,822],{"id":821},"radius-token","Radius token",[417,824,825,826,829,830,833,834,644],{},"Pass ",[420,827,828],{},"radius"," to set ",[420,831,832],{},"--ui-radius"," (in rem) on the root, overriding the default shipped in ",[420,835,836],{},"@vyui\u002Fkit\u002Fstyle.css",[431,838,840],{"className":433,"code":839,"language":436,"meta":437,"style":437},"\u003CVyApp :radius=\"0.75\">\n  \u003C!-- your screens -->\n\u003C\u002FVyApp>\n",[420,841,842,865,870],{"__ignoreMap":437},[441,843,844,846,848,851,853,855,857,861,863],{"class":443,"line":444},[441,845,448],{"class":447},[441,847,422],{"class":451},[441,849,850],{"class":447}," :",[441,852,828],{"class":455},[441,854,462],{"class":447},[441,856,465],{"class":447},[441,858,860],{"class":859},"sbssI","0.75",[441,862,465],{"class":447},[441,864,474],{"class":447},[441,866,867],{"class":443,"line":477},[441,868,869],{"class":487},"  \u003C!-- your screens -->\n",[441,871,872,874,876],{"class":443,"line":505},[441,873,508],{"class":447},[441,875,422],{"class":451},[441,877,474],{"class":447},[684,879,881],{"id":880},"viewport-size","Viewport size",[417,883,884,886,887,890,891,894,895,898,899,902],{},[420,885,422],{}," emits ",[420,888,889],{},"viewport-change"," with ",[420,892,893],{},"{ width, height }"," on mount and on every resize (rotation, split-screen), sourced from the background-thread ",[420,896,897],{},"layoutchange"," event. ",[420,900,901],{},"main-thread-*"," attrs do not reliably attach to this root, so this is the supported way to observe root size.",[431,904,906],{"className":433,"code":905,"language":436,"meta":437,"style":437},"\u003CVyApp @viewport-change=\"(size) => console.log(size.width, size.height)\">\n  \u003C!-- your screens -->\n\u003C\u002FVyApp>\n",[420,907,908,966,970],{"__ignoreMap":437},[441,909,910,912,914,917,919,921,923,925,929,932,935,938,940,943,946,948,951,954,957,959,962,964],{"class":443,"line":444},[441,911,448],{"class":447},[441,913,422],{"class":451},[441,915,916],{"class":447}," @",[441,918,889],{"class":455},[441,920,462],{"class":447},[441,922,465],{"class":447},[441,924,658],{"class":447},[441,926,928],{"class":927},"sHdIc","size",[441,930,931],{"class":447},")",[441,933,934],{"class":455}," =>",[441,936,937],{"class":487}," console",[441,939,644],{"class":447},[441,941,942],{"class":637},"log",[441,944,945],{"class":487},"(size",[441,947,644],{"class":447},[441,949,950],{"class":487},"width",[441,952,953],{"class":447},",",[441,955,956],{"class":487}," size",[441,958,644],{"class":447},[441,960,961],{"class":487},"height)",[441,963,465],{"class":447},[441,965,474],{"class":447},[441,967,968],{"class":443,"line":477},[441,969,869],{"class":487},[441,971,972,974,976],{"class":443,"line":505},[441,973,508],{"class":447},[441,975,422],{"class":451},[441,977,474],{"class":447},[684,979,981],{"id":980},"reading-color-mode-from-the-slot","Reading color mode from the slot",[417,983,984,985,988,989,992],{},"The default slot receives ",[420,986,987],{},"{ mode, isDark }"," — the same values ",[420,990,991],{},"useColorMode()"," returns — so a descendant can react to color mode without importing the composable itself.",[431,994,996],{"className":433,"code":995,"language":436,"meta":437,"style":437},"\u003CVyApp v-slot=\"{ mode, isDark }\">\n  \u003Ctext>Current mode: {{ mode }} ({{ isDark ? 'dark' : 'light' }})\u003C\u002Ftext>\n\u003C\u002FVyApp>\n",[420,997,998,1029,1034],{"__ignoreMap":437},[441,999,1000,1002,1004,1007,1009,1011,1014,1017,1019,1022,1025,1027],{"class":443,"line":444},[441,1001,448],{"class":447},[441,1003,422],{"class":451},[441,1005,1006],{"class":455}," v-slot",[441,1008,462],{"class":447},[441,1010,465],{"class":447},[441,1012,1013],{"class":447},"{",[441,1015,1016],{"class":487}," mode",[441,1018,953],{"class":447},[441,1020,1021],{"class":487}," isDark ",[441,1023,1024],{"class":447},"}",[441,1026,465],{"class":447},[441,1028,474],{"class":447},[441,1030,1031],{"class":443,"line":477},[441,1032,1033],{"class":487},"  \u003Ctext>Current mode: {{ mode }} ({{ isDark ? 'dark' : 'light' }})\u003C\u002Ftext>\n",[441,1035,1036,1038,1040],{"class":443,"line":505},[441,1037,508],{"class":447},[441,1039,422],{"class":451},[441,1041,474],{"class":447},[412,1043,1045],{"id":1044},"features-and-behavior","Features and behavior",[1047,1048,1049,1058,1068,1076,1085],"ul",{},[1050,1051,1052,1053,709,1055,1057],"li",{},"Applies the ",[420,1054,708],{},[420,1056,712],{}," remount together, so color mode toggles correctly on Lynx native and on web.",[1050,1059,1060,1061,1063,1064,1067],{},"Mounts ",[420,1062,732],{}," as the first child by default; opt out with ",[420,1065,1066],{},"overlays=\"false\""," to place it yourself.",[1050,1069,1070,1072,1073,1075],{},[420,1071,828],{}," sets ",[420,1074,832],{}," inline, in rem.",[1050,1077,1078,1079,1081,1082,1084],{},"Emits ",[420,1080,889],{}," on mount and resize, from the background-thread ",[420,1083,897],{}," event.",[1050,1086,1087,1088,1090,1091,1093],{},"The default slot exposes ",[420,1089,987],{}," for consumers that want color mode without calling ",[420,1092,991],{}," directly.",[412,1095,1097],{"id":1096},"props","Props",[1099,1100],"component-props",{"name":81},[412,1102,1104],{"id":1103},"emits","Emits",[1106,1107],"component-emits",{"name":81},[412,1109,1111],{"id":1110},"slots","Slots",[1113,1114],"component-slots",{"name":81},[412,1116,1118],{"id":1117},"styling-and-theming","Styling and theming",[417,1120,1121,1122,1125,1126,1129],{},"Override globally through ",[420,1123,1124],{},"appConfig.ui.app"," or locally with the ",[420,1127,1128],{},"ui"," prop.",[1131,1132,1133,1146],"table",{},[1134,1135,1136],"thead",{},[1137,1138,1139,1143],"tr",{},[1140,1141,1142],"th",{},"UI slot",[1140,1144,1145],{},"Purpose",[1147,1148,1149],"tbody",{},[1137,1150,1151,1157],{},[1152,1153,1154],"td",{},[420,1155,1156],{},"root",[1152,1158,1159,1160,1163,1164,1167],{},"The app-root element. Paints the ",[420,1161,1162],{},"bg-default"," surface token and fills the viewport (",[420,1165,1166],{},"w-full h-full",").",[412,1169,1171],{"id":1170},"platform-notes","Platform notes",[1047,1173,1174,1185,1196],{},[1050,1175,1176,1177,1179,1180,1184],{},"The dark-mode remount relies on Lynx native applying class changes only to freshly mounted nodes — ",[420,1178,712],{}," turns that into the toggle mechanism. See ",[425,1181,1182],{"href":319},[420,1183,375],{}," for the full rationale.",[1050,1186,1187,1189,1190,1192,1193,1195],{},[420,1188,889],{}," is sourced from the background-thread ",[420,1191,897],{}," event rather than a ",[420,1194,901],{}," binding, because those attrs do not reliably fall through onto this root.",[1050,1197,1198,1199,739,1201,739,1203,1205,1206,1208,1209,1211],{},"Components that teleport (",[420,1200,174],{},[420,1202,297],{},[420,1204,285],{},", …) need an ",[420,1207,732],{}," somewhere in the tree to render at all — ",[420,1210,422],{}," provides one by default so this is rarely something you need to think about.",[412,1213,1215],{"id":1214},"related-components","Related components",[1047,1217,1218,1228,1235],{},[1050,1219,1220,1224,1225,1227],{},[425,1221,1222],{"href":298},[420,1223,297],{}," for a bottom sheet mounted through the overlay host ",[420,1226,422],{}," provides.",[1050,1229,1230,1234],{},[425,1231,1232],{"href":175},[420,1233,174],{}," for a centered blocking dialog, same overlay host.",[1050,1236,1237,1240,1241,1244],{},[425,1238,1239],{"href":319},"Theming → Dark Mode"," and ",[425,1242,1243],{"href":310},"Theming → Overrides"," for runtime theme overrides.",[1246,1247,1248],"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":437,"searchDepth":444,"depth":477,"links":1250},[1251,1252,1259,1260,1261,1262,1263,1264,1265],{"id":414,"depth":477,"text":415},{"id":681,"depth":477,"text":682,"children":1253},[1254,1255,1256,1257,1258],{"id":686,"depth":505,"text":687},{"id":722,"depth":505,"text":723},{"id":821,"depth":505,"text":822},{"id":880,"depth":505,"text":881},{"id":980,"depth":505,"text":981},{"id":1044,"depth":477,"text":1045},{"id":1096,"depth":477,"text":1097},{"id":1103,"depth":477,"text":1104},{"id":1110,"depth":477,"text":1111},{"id":1117,"depth":477,"text":1118},{"id":1170,"depth":477,"text":1171},{"id":1214,"depth":477,"text":1215},"The recommended app-root wrapper — owns dark mode, mounts the overlay host, and reports viewport size.","md",[1269],{"label":1270,"icon":1271,"to":1272,"target":1273},"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":1266},"BB7M7C42Du-kNdztm4H6XiRg9B8sDXfUuCSfbLbe-c8",[1279,1281],{"title":76,"path":77,"stem":78,"description":1280,"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":1282,"icon":-1,"children":-1,"navigation":-1},"Constrain content to a fixed width-to-height ratio.",1783534406679]