[{"data":1,"prerenderedAt":1719},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Fnative-host-integration":483,"\u002Fguides\u002Fnative-host-integration-surround":1714},[4,34,51,301,327,332,337,420],{"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,373,378,383,388,392,397,401,405,410,415],{"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":84},"useSafeArea","\u002Fcomposables\u002Fuse-safe-area","7.composables\u002F15.use-safe-area",{"title":374,"path":375,"stem":376,"package":11,"icon":377},"useGlobalEvent","\u002Fcomposables\u002Fuse-global-event","7.composables\u002F16.use-global-event","i-lucide-radio",{"title":379,"path":380,"stem":381,"package":11,"icon":382},"getViewportSize","\u002Fcomposables\u002Fget-viewport-size","7.composables\u002F17.get-viewport-size","i-lucide-scaling",{"title":384,"path":385,"stem":386,"package":11,"icon":387},"useAppConfig","\u002Fcomposables\u002Fuse-app-config","7.composables\u002F2.use-app-config","i-lucide-settings",{"title":389,"path":390,"stem":391,"package":11,"icon":321},"useColorMode","\u002Fcomposables\u002Fuse-color-mode","7.composables\u002F3.use-color-mode",{"title":393,"path":394,"stem":395,"package":11,"icon":396},"useComponentIcons","\u002Fcomposables\u002Fuse-component-icons","7.composables\u002F4.use-component-icons","i-lucide-shapes",{"title":398,"path":399,"stem":400,"package":11,"icon":69},"useTray","\u002Fcomposables\u002Fuse-tray","7.composables\u002F5.use-tray",{"title":402,"path":403,"stem":404,"package":11,"icon":336},"i18n composables","\u002Fcomposables\u002Fi18n-composables","7.composables\u002F6.i18n-composables",{"title":406,"path":407,"stem":408,"package":11,"icon":409},"useId","\u002Fcomposables\u002Fuse-id","7.composables\u002F7.use-id","i-lucide-hash",{"title":411,"path":412,"stem":413,"package":11,"icon":414},"useFilter","\u002Fcomposables\u002Fuse-filter","7.composables\u002F8.use-filter","i-lucide-filter",{"title":416,"path":417,"stem":418,"package":11,"icon":419},"useForwardProps","\u002Fcomposables\u002Fuse-forward-props","7.composables\u002F9.use-forward-props","i-lucide-arrow-right-left",{"title":421,"path":422,"stem":423,"children":424,"package":11,"icon":426},"Guides","\u002Fguides","8.guides\u002F1.index",[425,427,431,436,440,445,450,455,460,464,469,473,478],{"title":421,"path":422,"stem":423,"package":11,"icon":426},"i-lucide-book-open",{"title":428,"path":429,"stem":430,"package":11,"icon":348},"Instant first frame","\u002Fguides\u002Finstant-first-frame-rendering","8.guides\u002F10.instant-first-frame-rendering",{"title":432,"path":433,"stem":434,"package":11,"icon":435},"Why Vy UI","\u002Fguides\u002Fwhy-vy-ui","8.guides\u002F11.why-vy-ui","i-lucide-help-circle",{"title":437,"path":438,"stem":439,"package":11,"icon":22},"Sparkling","\u002Fguides\u002Fsparkling","8.guides\u002F12.sparkling",{"title":441,"path":442,"stem":443,"package":11,"icon":444},"Native host integration","\u002Fguides\u002Fnative-host-integration","8.guides\u002F13.native-host-integration","i-lucide-cable",{"title":446,"path":447,"stem":448,"package":11,"icon":449},"Lynx UI frameworks","\u002Fguides\u002Flynx-ui-frameworks","8.guides\u002F2.lynx-ui-frameworks","i-lucide-library",{"title":451,"path":452,"stem":453,"package":11,"icon":454},"Vue Lynx","\u002Fguides\u002Fvue-lynx","8.guides\u002F3.vue-lynx","i-lucide-component",{"title":456,"path":457,"stem":458,"package":11,"icon":459},"Lynx vs React Native","\u002Fguides\u002Flynx-vs-react-native","8.guides\u002F4.lynx-vs-react-native","i-lucide-git-compare",{"title":461,"path":462,"stem":463,"package":11,"icon":84},"Testing on device","\u002Fguides\u002Ftesting-on-device","8.guides\u002F5.testing-on-device",{"title":465,"path":466,"stem":467,"package":11,"icon":468},"Testing with Xcode","\u002Fguides\u002Ftesting-with-xcode","8.guides\u002F6.testing-with-xcode","i-lucide-apple",{"title":470,"path":471,"stem":472,"package":11,"icon":27},"rspeedy dev server","\u002Fguides\u002Frspeedy-dev-server","8.guides\u002F7.rspeedy-dev-server",{"title":474,"path":475,"stem":476,"package":11,"icon":477},"Tailwind on Lynx","\u002Fguides\u002Ftailwind-on-lynx","8.guides\u002F8.tailwind-on-lynx","i-lucide-wind",{"title":479,"path":480,"stem":481,"package":11,"icon":482},"Theming on Lynx","\u002Fguides\u002Ftheming-on-lynx","8.guides\u002F9.theming-on-lynx","i-lucide-paintbrush",{"id":484,"title":441,"body":485,"description":1706,"extension":1707,"links":11,"meta":1708,"navigation":1709,"package":11,"path":442,"seo":1710,"stem":443,"__hash__":1713},"docs\u002F8.guides\u002F13.native-host-integration.md",{"type":486,"value":487,"toc":1697},"minimark",[488,520,523,556,561,720,723,771,775,782,872,878,898,909,943,957,961,967,1019,1024,1067,1070,1074,1083,1246,1253,1257,1267,1278,1287,1290,1349,1356,1580,1599,1603,1626,1630,1693],[489,490,491,492,496,497,500,501,500,504,507,508,512,513,515,516,519],"p",{},"A ",[493,494,495],"code",{},"LynxView"," knows nothing about the device around it. There is no ",[493,498,499],{},"env(safe-area-inset-*)",", no ",[493,502,503],{},"prefers-color-scheme",[493,505,506],{},"window"," — the bundle only knows what the host application tells it. Container apps like ",[509,510,511],"a",{"href":462},"Lynx Go"," and ",[509,514,437],{"href":438}," inject that context for you; the moment you ",[509,517,518],{"href":466},"build your own host",", injecting it becomes your job.",[489,521,522],{},"Lynx gives a host two channels:",[524,525,526,542],"ul",{},[527,528,529,533,534,537,538,541],"li",{},[530,531,532],"strong",{},"Global props"," — a dictionary the host pushes onto the view, readable from the bundle as ",[493,535,536],{},"lynx.__globalProps",". Vy UI treats these as a boot-time snapshot: push them ",[530,539,540],{},"before"," the template loads.",[527,543,544,547,548,551,552,555],{},[530,545,546],{},"Global events"," — named events sent through ",[493,549,550],{},"sendGlobalEvent",", received in the bundle via the ",[493,553,554],{},"GlobalEventEmitter"," module. These are live, so they carry anything that changes after boot.",[557,558,560],"h2",{"id":559},"what-vy-ui-reads","What Vy UI reads",[562,563,564,583],"table",{},[565,566,567],"thead",{},[568,569,570,574,577,580],"tr",{},[571,572,573],"th",{},"Signal",[571,575,576],{},"Channel",[571,578,579],{},"Contract",[571,581,582],{},"Consumed by",[584,585,586,627,650,681,704],"tbody",{},[568,587,588,592,595,615],{},[589,590,591],"td",{},"Safe-area insets",[589,593,594],{},"global props",[589,596,597,600,601,604,605,600,608,611,612],{},[493,598,599],{},"safeAreaTop"," \u002F ",[493,602,603],{},"safeAreaBottom"," (logical px), or Sparkling's ",[493,606,607],{},"topHeight",[493,609,610],{},"bottomHeight"," + ",[493,613,614],{},"os",[589,616,617,621,622],{},[509,618,619],{"href":371},[493,620,370],{},", ",[509,623,624],{"href":82},[493,625,626],{},"VyApp",[568,628,629,632,634,639],{},[589,630,631],{},"Device theme at boot",[589,633,594],{},[589,635,636],{},[493,637,638],{},"theme: \"light\" | \"dark\"",[589,640,641,645,646,649],{},[509,642,643],{"href":390},[493,644,389],{}," in ",[493,647,648],{},"'system'"," mode",[568,651,652,655,658,675],{},[589,653,654],{},"Theme changes",[589,656,657],{},"global event",[589,659,660,663,664,600,667,670,671,674],{},[493,661,662],{},"themechanged"," with ",[493,665,666],{},"\"light\"",[493,668,669],{},"\"dark\""," (or ",[493,672,673],{},"{ theme }",")",[589,676,677],{},[509,678,679],{"href":390},[493,680,389],{},[568,682,683,686,688,694],{},[589,684,685],{},"Keyboard show\u002Fhide",[589,687,657],{},[589,689,690,693],{},[493,691,692],{},"keyboardstatuschanged"," — Lynx emits this itself",[589,695,696,621,701],{},[509,697,698],{"href":165},[493,699,700],{},"VyKeyboardAware",[493,702,703],{},"VyInput",[568,705,706,709,711,714],{},[589,707,708],{},"Anything of yours",[589,710,657],{},[589,712,713],{},"your event name",[589,715,716],{},[509,717,718],{"href":375},[493,719,374],{},[489,721,722],{},"Two details worth internalizing before the snippets:",[524,724,725,744],{},[527,726,727,734,735,512,737,739,740,743],{},[530,728,729,730,733],{},"Push global props before ",[493,731,732],{},"loadTemplate","."," ",[493,736,370],{},[493,738,389],{}," snapshot ",[493,741,742],{},"__globalProps"," when the tree mounts. Pushing after load means the first render sees nothing, and there is no re-render on prop updates in Vue Lynx today. Changes that must land live — theme flips, mainly — go through global events instead.",[527,745,746,749,750,752,753,756,757,759,760,763,764,767,768,733],{},[530,747,748],{},"Android insets are normalized to zero on purpose."," Android containers conventionally inset the ",[493,751,495],{}," itself (",[493,754,755],{},"fitsSystemWindows",", window insets applied to the view), so ",[493,758,370],{}," folds ",[493,761,762],{},"os: \"android\""," to ",[493,765,766],{},"{ top: 0, bottom: 0 }"," rather than double-padding. Inset the view natively on Android and let the props stay zero. If your Android host goes edge-to-edge instead, override from app code with ",[493,769,770],{},"provideSafeAreaInsets",[557,772,774],{"id":773},"ios","iOS",[489,776,777,778,781],{},"Push props right after creating the view, before the template loads. Read the insets from the key window, not the view controller's own view — ",[493,779,780],{},"view.safeAreaInsets"," is zero until the first layout pass, which is after you want to push:",[783,784,790],"pre",{"className":785,"code":786,"filename":787,"language":788,"meta":789,"style":789},"language-swift shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","private func pushGlobalProps() {\n    let window = UIApplication.shared.connectedScenes\n        .compactMap { ($0 as? UIWindowScene)?.keyWindow }\n        .first\n    let insets = window?.safeAreaInsets ?? .zero\n    lynxView?.updateGlobalPropsWithDictionary([\n        \u002F\u002F Lynx Explorer's key names — the convention for a bare host.\n        \"safeAreaTop\": insets.top,      \u002F\u002F 59 on a Dynamic Island phone\n        \"safeAreaBottom\": insets.bottom, \u002F\u002F 34 with a home indicator\n        \"theme\": traitCollection.userInterfaceStyle == .dark ? \"dark\" : \"light\",\n    ])\n}\n","ViewController.swift","swift","",[493,791,792,800,806,812,818,824,830,836,845,854,860,866],{"__ignoreMap":789},[793,794,797],"span",{"class":795,"line":796},"line",1,[793,798,799],{},"private func pushGlobalProps() {\n",[793,801,803],{"class":795,"line":802},2,[793,804,805],{},"    let window = UIApplication.shared.connectedScenes\n",[793,807,809],{"class":795,"line":808},3,[793,810,811],{},"        .compactMap { ($0 as? UIWindowScene)?.keyWindow }\n",[793,813,815],{"class":795,"line":814},4,[793,816,817],{},"        .first\n",[793,819,821],{"class":795,"line":820},5,[793,822,823],{},"    let insets = window?.safeAreaInsets ?? .zero\n",[793,825,827],{"class":795,"line":826},6,[793,828,829],{},"    lynxView?.updateGlobalPropsWithDictionary([\n",[793,831,833],{"class":795,"line":832},7,[793,834,835],{},"        \u002F\u002F Lynx Explorer's key names — the convention for a bare host.\n",[793,837,839,842],{"class":795,"line":838},8,[793,840,841],{},"        \"safeAreaTop\": insets.top,",[793,843,844],{},"      \u002F\u002F 59 on a Dynamic Island phone\n",[793,846,848,851],{"class":795,"line":847},9,[793,849,850],{},"        \"safeAreaBottom\": insets.bottom,",[793,852,853],{}," \u002F\u002F 34 with a home indicator\n",[793,855,857],{"class":795,"line":856},10,[793,858,859],{},"        \"theme\": traitCollection.userInterfaceStyle == .dark ? \"dark\" : \"light\",\n",[793,861,863],{"class":795,"line":862},11,[793,864,865],{},"    ])\n",[793,867,869],{"class":795,"line":868},12,[793,870,871],{},"}\n",[489,873,874,875,877],{},"Call it before ",[493,876,732],{},":",[783,879,881],{"className":785,"code":880,"language":788,"meta":789,"style":789},"view.addSubview(lynxView)\npushGlobalProps()\nlynxView.loadTemplate(fromURL: bundleURL)\n",[493,882,883,888,893],{"__ignoreMap":789},[793,884,885],{"class":795,"line":796},[793,886,887],{},"view.addSubview(lynxView)\n",[793,889,890],{"class":795,"line":802},[793,891,892],{},"pushGlobalProps()\n",[793,894,895],{"class":795,"line":808},[793,896,897],{},"lynxView.loadTemplate(fromURL: bundleURL)\n",[489,899,900,901,903,904,908],{},"For live appearance changes, forward the trait change as a global event. The dictionary push is optional here — it keeps ",[493,902,742],{}," honest for the ",[905,906,907],"em",{},"next"," page load — but the event is what flips the running page:",[783,910,912],{"className":785,"code":911,"language":788,"meta":789,"style":789},"override func traitCollectionDidChange(_ previous: UITraitCollection?) {\n    super.traitCollectionDidChange(previous)\n    guard traitCollection.userInterfaceStyle != previous?.userInterfaceStyle else { return }\n    let theme = traitCollection.userInterfaceStyle == .dark ? \"dark\" : \"light\"\n    lynxView?.sendGlobalEvent(\"themechanged\", withParams: [theme])\n}\n",[493,913,914,919,924,929,934,939],{"__ignoreMap":789},[793,915,916],{"class":795,"line":796},[793,917,918],{},"override func traitCollectionDidChange(_ previous: UITraitCollection?) {\n",[793,920,921],{"class":795,"line":802},[793,922,923],{},"    super.traitCollectionDidChange(previous)\n",[793,925,926],{"class":795,"line":808},[793,927,928],{},"    guard traitCollection.userInterfaceStyle != previous?.userInterfaceStyle else { return }\n",[793,930,931],{"class":795,"line":814},[793,932,933],{},"    let theme = traitCollection.userInterfaceStyle == .dark ? \"dark\" : \"light\"\n",[793,935,936],{"class":795,"line":820},[793,937,938],{},"    lynxView?.sendGlobalEvent(\"themechanged\", withParams: [theme])\n",[793,940,941],{"class":795,"line":826},[793,942,871],{},[489,944,945,946,645,949,951,952,956],{},"With that in place, ",[493,947,948],{},"useColorMode()",[493,950,648],{}," mode boots on the device appearance and follows it live — ",[509,953,954],{"href":82},[493,955,626],{}," re-skins the tree through its existing remount contract, nothing extra to wire in the bundle.",[557,958,960],{"id":959},"android","Android",[489,962,963,964,877],{},"Same contract, Kotlin spelling. Global props ride on ",[493,965,966],{},"TemplateData",[783,968,973],{"className":969,"code":970,"filename":971,"language":972,"meta":789,"style":789},"language-kotlin shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","private fun pushGlobalProps(lynxView: LynxView) {\n    val dark = resources.configuration.uiMode and\n        Configuration.UI_MODE_NIGHT_MASK == Configuration.UI_MODE_NIGHT_YES\n    lynxView.updateGlobalProps(TemplateData.fromMap(mapOf(\n        \u002F\u002F Insets stay zero: inset the LynxView natively instead (see above).\n        \"os\" to \"android\",\n        \"theme\" to if (dark) \"dark\" else \"light\",\n    )))\n}\n","MainActivity.kt","kotlin",[493,974,975,980,985,990,995,1000,1005,1010,1015],{"__ignoreMap":789},[793,976,977],{"class":795,"line":796},[793,978,979],{},"private fun pushGlobalProps(lynxView: LynxView) {\n",[793,981,982],{"class":795,"line":802},[793,983,984],{},"    val dark = resources.configuration.uiMode and\n",[793,986,987],{"class":795,"line":808},[793,988,989],{},"        Configuration.UI_MODE_NIGHT_MASK == Configuration.UI_MODE_NIGHT_YES\n",[793,991,992],{"class":795,"line":814},[793,993,994],{},"    lynxView.updateGlobalProps(TemplateData.fromMap(mapOf(\n",[793,996,997],{"class":795,"line":820},[793,998,999],{},"        \u002F\u002F Insets stay zero: inset the LynxView natively instead (see above).\n",[793,1001,1002],{"class":795,"line":826},[793,1003,1004],{},"        \"os\" to \"android\",\n",[793,1006,1007],{"class":795,"line":832},[793,1008,1009],{},"        \"theme\" to if (dark) \"dark\" else \"light\",\n",[793,1011,1012],{"class":795,"line":838},[793,1013,1014],{},"    )))\n",[793,1016,1017],{"class":795,"line":847},[793,1018,871],{},[489,1020,1021,1022,877],{},"And theme changes forward through ",[493,1023,550],{},[783,1025,1027],{"className":969,"code":1026,"language":972,"meta":789,"style":789},"override fun onConfigurationChanged(newConfig: Configuration) {\n    super.onConfigurationChanged(newConfig)\n    val dark = newConfig.uiMode and\n        Configuration.UI_MODE_NIGHT_MASK == Configuration.UI_MODE_NIGHT_YES\n    lynxView.sendGlobalEvent(\"themechanged\", JavaOnlyArray().apply {\n        pushString(if (dark) \"dark\" else \"light\")\n    })\n}\n",[493,1028,1029,1034,1039,1044,1048,1053,1058,1063],{"__ignoreMap":789},[793,1030,1031],{"class":795,"line":796},[793,1032,1033],{},"override fun onConfigurationChanged(newConfig: Configuration) {\n",[793,1035,1036],{"class":795,"line":802},[793,1037,1038],{},"    super.onConfigurationChanged(newConfig)\n",[793,1040,1041],{"class":795,"line":808},[793,1042,1043],{},"    val dark = newConfig.uiMode and\n",[793,1045,1046],{"class":795,"line":814},[793,1047,989],{},[793,1049,1050],{"class":795,"line":820},[793,1051,1052],{},"    lynxView.sendGlobalEvent(\"themechanged\", JavaOnlyArray().apply {\n",[793,1054,1055],{"class":795,"line":826},[793,1056,1057],{},"        pushString(if (dark) \"dark\" else \"light\")\n",[793,1059,1060],{"class":795,"line":832},[793,1061,1062],{},"    })\n",[793,1064,1065],{"class":795,"line":838},[793,1066,871],{},[489,1068,1069],{},"Exact signatures move between Lynx SDK versions — check the headers your Podfile or Gradle pin resolves to if the compiler disagrees.",[557,1071,1073],{"id":1072},"your-own-signals","Your own signals",[489,1075,1076,1078,1079,877],{},[493,1077,662],{}," is nothing special — it is one name Vy UI happens to listen for. Your host can send anything through the same channel (connectivity, deep links, push payloads), and the bundle subscribes with ",[509,1080,1081],{"href":375},[493,1082,374],{},[783,1084,1088],{"className":1085,"code":1086,"language":1087,"meta":789,"style":789},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { useGlobalEvent } from '@vyui\u002Fcore'\n\nuseGlobalEvent('connectivitychanged', (...args) => {\n  const online = args[0] === 'online'\n  \u002F\u002F ...\n})\n\u003C\u002Fscript>\n","vue",[493,1089,1090,1122,1149,1155,1189,1223,1229,1237],{"__ignoreMap":789},[793,1091,1092,1096,1100,1104,1107,1110,1113,1117,1119],{"class":795,"line":796},[793,1093,1095],{"class":1094},"sMK4o","\u003C",[793,1097,1099],{"class":1098},"swJcz","script",[793,1101,1103],{"class":1102},"spNyl"," setup",[793,1105,1106],{"class":1102}," lang",[793,1108,1109],{"class":1094},"=",[793,1111,1112],{"class":1094},"\"",[793,1114,1116],{"class":1115},"sfazB","ts",[793,1118,1112],{"class":1094},[793,1120,1121],{"class":1094},">\n",[793,1123,1124,1128,1131,1135,1138,1141,1144,1146],{"class":795,"line":802},[793,1125,1127],{"class":1126},"s7zQu","import",[793,1129,1130],{"class":1094}," {",[793,1132,1134],{"class":1133},"sTEyZ"," useGlobalEvent",[793,1136,1137],{"class":1094}," }",[793,1139,1140],{"class":1126}," from",[793,1142,1143],{"class":1094}," '",[793,1145,41],{"class":1115},[793,1147,1148],{"class":1094},"'\n",[793,1150,1151],{"class":795,"line":808},[793,1152,1154],{"emptyLinePlaceholder":1153},true,"\n",[793,1156,1157,1160,1163,1166,1169,1171,1174,1177,1181,1183,1186],{"class":795,"line":814},[793,1158,374],{"class":1159},"s2Zo4",[793,1161,1162],{"class":1133},"(",[793,1164,1165],{"class":1094},"'",[793,1167,1168],{"class":1115},"connectivitychanged",[793,1170,1165],{"class":1094},[793,1172,1173],{"class":1094},",",[793,1175,1176],{"class":1094}," (...",[793,1178,1180],{"class":1179},"sHdIc","args",[793,1182,674],{"class":1094},[793,1184,1185],{"class":1102}," =>",[793,1187,1188],{"class":1094}," {\n",[793,1190,1191,1194,1197,1200,1203,1206,1210,1213,1216,1218,1221],{"class":795,"line":820},[793,1192,1193],{"class":1102},"  const",[793,1195,1196],{"class":1133}," online",[793,1198,1199],{"class":1094}," =",[793,1201,1202],{"class":1133}," args",[793,1204,1205],{"class":1098},"[",[793,1207,1209],{"class":1208},"sbssI","0",[793,1211,1212],{"class":1098},"] ",[793,1214,1215],{"class":1094},"===",[793,1217,1143],{"class":1094},[793,1219,1220],{"class":1115},"online",[793,1222,1148],{"class":1094},[793,1224,1225],{"class":795,"line":826},[793,1226,1228],{"class":1227},"sHwdD","  \u002F\u002F ...\n",[793,1230,1231,1234],{"class":795,"line":832},[793,1232,1233],{"class":1094},"}",[793,1235,1236],{"class":1133},")\n",[793,1238,1239,1242,1244],{"class":795,"line":838},[793,1240,1241],{"class":1094},"\u003C\u002F",[793,1243,1099],{"class":1098},[793,1245,1121],{"class":1094},[489,1247,1248,1249,1252],{},"The listener attaches on mount and detaches on unmount; on web and in vitest there is no ",[493,1250,1251],{},"lynx"," global and the call is a no-op, so components using it stay portable.",[557,1254,1256],{"id":1255},"persisting-state","Persisting state",[489,1258,1259,1260,1263,1264,1266],{},"Lynx leaves storage to the host. There is no ",[493,1261,1262],{},"localStorage"," inside a ",[493,1265,495],{},", and the SDK's type definitions declare no storage module, so anything that has to survive an app restart round-trips through the two channels above.",[489,1268,1269,1270,1273,1274,1277],{},"Reading at boot is just another global prop. The host reads its own store — ",[493,1271,1272],{},"UserDefaults"," on iOS, ",[493,1275,1276],{},"SharedPreferences"," on Android — and adds the value to the dictionary it already pushes:",[783,1279,1281],{"className":785,"code":1280,"language":788,"meta":789,"style":789},"\"savedTheme\": UserDefaults.standard.string(forKey: \"theme\") ?? \"system\",\n",[493,1282,1283],{"__ignoreMap":789},[793,1284,1285],{"class":795,"line":796},[793,1286,1280],{},[489,1288,1289],{},"Writing goes the other way, through a native module the host registers and the bundle calls on the background thread. Container apps each register their own, so the module name and its methods are yours to choose and yours to document:",[783,1291,1294],{"className":1292,"code":1293,"language":1116,"meta":789,"style":789},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","NativeModules.bridge.call('setPref', { theme: 'dark' }, () => {})\n",[493,1295,1296],{"__ignoreMap":789},[793,1297,1298,1301,1303,1306,1308,1311,1313,1315,1318,1320,1322,1324,1327,1329,1331,1334,1336,1339,1342,1344,1347],{"class":795,"line":796},[793,1299,1300],{"class":1133},"NativeModules",[793,1302,733],{"class":1094},[793,1304,1305],{"class":1133},"bridge",[793,1307,733],{"class":1094},[793,1309,1310],{"class":1159},"call",[793,1312,1162],{"class":1133},[793,1314,1165],{"class":1094},[793,1316,1317],{"class":1115},"setPref",[793,1319,1165],{"class":1094},[793,1321,1173],{"class":1094},[793,1323,1130],{"class":1094},[793,1325,1326],{"class":1098}," theme",[793,1328,877],{"class":1094},[793,1330,1143],{"class":1094},[793,1332,1333],{"class":1115},"dark",[793,1335,1165],{"class":1094},[793,1337,1338],{"class":1094}," },",[793,1340,1341],{"class":1094}," ()",[793,1343,1185],{"class":1102},[793,1345,1346],{"class":1094}," {}",[793,1348,1236],{"class":1133},[489,1350,1351,1352,1355],{},"Vy UI ships no storage composable, deliberately. The module name, its signatures, and the store behind it are all host-defined, so a wrapper in the library would be a rename of the call you already wrote. The one piece of Vy UI state worth persisting is the color mode, and its ",[493,1353,1354],{},"mode"," ref is writable — restore it at setup, save it on change:",[783,1357,1359],{"className":1085,"code":1358,"language":1087,"meta":789,"style":789},"\u003Cscript setup lang=\"ts\">\nimport { watch } from 'vue'\nimport { useColorMode } from '@vyui\u002Fkit'\n\nconst { mode } = useColorMode()\n\nconst saved = lynx.__globalProps?.savedTheme\nif (saved === 'light' || saved === 'dark') mode.value = saved\n\nwatch(mode, m => NativeModules.bridge.call('setPref', { theme: m }, () => {}))\n\u003C\u002Fscript>\n",[493,1360,1361,1381,1400,1419,1423,1442,1446,1468,1511,1515,1572],{"__ignoreMap":789},[793,1362,1363,1365,1367,1369,1371,1373,1375,1377,1379],{"class":795,"line":796},[793,1364,1095],{"class":1094},[793,1366,1099],{"class":1098},[793,1368,1103],{"class":1102},[793,1370,1106],{"class":1102},[793,1372,1109],{"class":1094},[793,1374,1112],{"class":1094},[793,1376,1116],{"class":1115},[793,1378,1112],{"class":1094},[793,1380,1121],{"class":1094},[793,1382,1383,1385,1387,1390,1392,1394,1396,1398],{"class":795,"line":802},[793,1384,1127],{"class":1126},[793,1386,1130],{"class":1094},[793,1388,1389],{"class":1133}," watch",[793,1391,1137],{"class":1094},[793,1393,1140],{"class":1126},[793,1395,1143],{"class":1094},[793,1397,1087],{"class":1115},[793,1399,1148],{"class":1094},[793,1401,1402,1404,1406,1409,1411,1413,1415,1417],{"class":795,"line":808},[793,1403,1127],{"class":1126},[793,1405,1130],{"class":1094},[793,1407,1408],{"class":1133}," useColorMode",[793,1410,1137],{"class":1094},[793,1412,1140],{"class":1126},[793,1414,1143],{"class":1094},[793,1416,46],{"class":1115},[793,1418,1148],{"class":1094},[793,1420,1421],{"class":795,"line":814},[793,1422,1154],{"emptyLinePlaceholder":1153},[793,1424,1425,1428,1430,1433,1435,1437,1439],{"class":795,"line":820},[793,1426,1427],{"class":1102},"const",[793,1429,1130],{"class":1094},[793,1431,1432],{"class":1133}," mode ",[793,1434,1233],{"class":1094},[793,1436,1199],{"class":1094},[793,1438,1408],{"class":1159},[793,1440,1441],{"class":1133},"()\n",[793,1443,1444],{"class":795,"line":826},[793,1445,1154],{"emptyLinePlaceholder":1153},[793,1447,1448,1450,1453,1455,1458,1460,1462,1465],{"class":795,"line":832},[793,1449,1427],{"class":1102},[793,1451,1452],{"class":1133}," saved ",[793,1454,1109],{"class":1094},[793,1456,1457],{"class":1133}," lynx",[793,1459,733],{"class":1094},[793,1461,742],{"class":1133},[793,1463,1464],{"class":1094},"?.",[793,1466,1467],{"class":1133},"savedTheme\n",[793,1469,1470,1473,1476,1478,1480,1483,1485,1488,1490,1492,1494,1496,1498,1501,1503,1506,1508],{"class":795,"line":838},[793,1471,1472],{"class":1126},"if",[793,1474,1475],{"class":1133}," (saved ",[793,1477,1215],{"class":1094},[793,1479,1143],{"class":1094},[793,1481,1482],{"class":1115},"light",[793,1484,1165],{"class":1094},[793,1486,1487],{"class":1094}," ||",[793,1489,1452],{"class":1133},[793,1491,1215],{"class":1094},[793,1493,1143],{"class":1094},[793,1495,1333],{"class":1115},[793,1497,1165],{"class":1094},[793,1499,1500],{"class":1133},") mode",[793,1502,733],{"class":1094},[793,1504,1505],{"class":1133},"value ",[793,1507,1109],{"class":1094},[793,1509,1510],{"class":1133}," saved\n",[793,1512,1513],{"class":795,"line":847},[793,1514,1154],{"emptyLinePlaceholder":1153},[793,1516,1517,1520,1523,1525,1528,1530,1533,1535,1537,1539,1541,1543,1545,1547,1549,1551,1553,1555,1557,1560,1563,1565,1567,1569],{"class":795,"line":856},[793,1518,1519],{"class":1159},"watch",[793,1521,1522],{"class":1133},"(mode",[793,1524,1173],{"class":1094},[793,1526,1527],{"class":1179}," m",[793,1529,1185],{"class":1102},[793,1531,1532],{"class":1133}," NativeModules",[793,1534,733],{"class":1094},[793,1536,1305],{"class":1133},[793,1538,733],{"class":1094},[793,1540,1310],{"class":1159},[793,1542,1162],{"class":1133},[793,1544,1165],{"class":1094},[793,1546,1317],{"class":1115},[793,1548,1165],{"class":1094},[793,1550,1173],{"class":1094},[793,1552,1130],{"class":1094},[793,1554,1326],{"class":1098},[793,1556,877],{"class":1094},[793,1558,1559],{"class":1133}," m ",[793,1561,1562],{"class":1094},"},",[793,1564,1341],{"class":1094},[793,1566,1185],{"class":1102},[793,1568,1346],{"class":1094},[793,1570,1571],{"class":1133},"))\n",[793,1573,1574,1576,1578],{"class":795,"line":862},[793,1575,1241],{"class":1094},[793,1577,1099],{"class":1098},[793,1579,1121],{"class":1094},[489,1581,1582,1585,1586,1589,1590,1592,1593,1595,1596,1598],{},[493,1583,1584],{},"savedTheme"," is a different signal from ",[493,1587,1588],{},"theme",": ",[493,1591,1588],{}," is the device appearance the host observes, ",[493,1594,1584],{}," is the choice the user made in a previous session. Leaving the saved value at ",[493,1597,648],{}," folds one into the other.",[557,1600,1602],{"id":1601},"viewport-size","Viewport size",[489,1604,1605,1606,1608,1609,1612,1613,1618,1619,1621,1622,1625],{},"Not host-injected, but part of the same \"no ",[493,1607,506],{},"\" story: the bundle reads its size from ",[493,1610,1611],{},"SystemInfo"," in physical pixels. ",[509,1614,1615],{"href":380},[493,1616,1617],{},"getViewportSize()"," converts that to logical px, and ",[493,1620,626],{},"'s ",[493,1623,1624],{},"viewport-change"," emit tells you when it changes (rotation, split screen).",[557,1627,1629],{"id":1628},"checklist","Checklist",[524,1631,1634,1650,1661,1670,1681,1687],{"className":1632},[1633],"contains-task-list",[527,1635,1638,734,1642,1645,1646,734,1648],{"className":1636},[1637],"task-list-item",[1639,1640],"input",{"disabled":1153,"type":1641},"checkbox",[493,1643,1644],{},"updateGlobalProps"," pushed ",[530,1647,540],{},[493,1649,732],{},[527,1651,1653,1655,1656,600,1658,1660],{"className":1652},[1637],[1639,1654],{"disabled":1153,"type":1641}," iOS: ",[493,1657,599],{},[493,1659,603],{}," from the key window",[527,1662,1664,1666,1667,1669],{"className":1663},[1637],[1639,1665],{"disabled":1153,"type":1641}," Android: ",[493,1668,762],{},", insets handled on the native view",[527,1671,1673,734,1675,1677,1678,1680],{"className":1672},[1637],[1639,1674],{"disabled":1153,"type":1641},[493,1676,1588],{}," prop at boot, ",[493,1679,662],{}," event on change",[527,1682,1684,1686],{"className":1683},[1637],[1639,1685],{"disabled":1153,"type":1641}," Custom host events named and documented next to the native code that sends them",[527,1688,1690,1692],{"className":1689},[1637],[1639,1691],{"disabled":1153,"type":1641}," Persisted preferences read into global props at boot, written back through a host module",[1694,1695,1696],"style",{},"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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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}",{"title":789,"searchDepth":796,"depth":802,"links":1698},[1699,1700,1701,1702,1703,1704,1705],{"id":559,"depth":802,"text":560},{"id":773,"depth":802,"text":774},{"id":959,"depth":802,"text":960},{"id":1072,"depth":802,"text":1073},{"id":1255,"depth":802,"text":1256},{"id":1601,"depth":802,"text":1602},{"id":1628,"depth":802,"text":1629},"What an iOS or Android host app has to inject — safe-area insets, theme, and global events — for Vy UI to behave like a native citizen on device.","md",{},{"icon":444},{"title":1711,"description":1712},"Wiring an iOS or Android host app for Vy UI","The global props and global events a Lynx host app should inject — safe-area insets for the notch and Dynamic Island, the device theme, and live appearance changes — with Swift and Kotlin snippets.","BG_uynWELK_6igCXMxC5EWtBYo5M7Brra6tk-xefleg",[1715,1717],{"title":437,"path":438,"stem":439,"description":1716,"icon":-1,"children":-1,"navigation":-1},"TikTok's open-source native shell for Lynx, covering containers, scheme routing, the typed native bridge, and where a Vue Lynx app fits into it.",{"title":446,"path":447,"stem":448,"description":1718,"icon":-1,"children":-1,"navigation":-1},"A comparison of the UI component libraries available for Lynx today, covering what each one ships, which framework it targets, and how mature it is.",1785824884779]