[{"data":1,"prerenderedAt":1177},["ShallowReactive",2],{"navigation_docs":3,"-guide-overlays":223,"-guide-overlays-surround":1172},[4,26,96,105,202],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":25},"Getting started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20],{"title":11,"path":12,"stem":13,"icon":14},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F1.installation","i-lucide-download",{"title":16,"path":17,"stem":18,"icon":19},"The first app","\u002Fgetting-started\u002Ffirst-app","1.getting-started\u002F2.first-app","i-lucide-play",{"title":21,"path":22,"stem":23,"icon":24},"The first test","\u002Fgetting-started\u002Ffirst-test","1.getting-started\u002F3.first-test","i-lucide-flask-conical",false,{"title":27,"icon":28,"path":29,"stem":30,"children":31,"page":25},"Guide","i-lucide-book-open","\u002Fguide","2.guide",[32,37,42,47,52,57,62,67,72,77,81,86,91],{"title":33,"path":34,"stem":35,"icon":36},"Components","\u002Fguide\u002Fcomponents","2.guide\u002F01.components","i-lucide-component",{"title":38,"path":39,"stem":40,"icon":41},"Inputs and forms","\u002Fguide\u002Finputs-and-forms","2.guide\u002F02.inputs-and-forms","i-lucide-text-cursor-input",{"title":43,"path":44,"stem":45,"icon":46},"Scrolling and viewports","\u002Fguide\u002Fscrolling","2.guide\u002F03.scrolling","i-lucide-scroll-text",{"title":48,"path":49,"stem":50,"icon":51},"Overlays and layers","\u002Fguide\u002Foverlays","2.guide\u002F04.overlays","i-lucide-layers",{"title":53,"path":54,"stem":55,"icon":56},"Styles and theme","\u002Fguide\u002Fstyles","2.guide\u002F05.styles","i-lucide-palette",{"title":58,"path":59,"stem":60,"icon":61},"Composables","\u002Fguide\u002Fcomposables","2.guide\u002F06.composables","i-lucide-puzzle",{"title":63,"path":64,"stem":65,"icon":66},"Widgets","\u002Fguide\u002Fwidgets","2.guide\u002F07.widgets","i-lucide-blocks",{"title":68,"path":69,"stem":70,"icon":71},"The assistant","\u002Fguide\u002Fassistant","2.guide\u002F08.assistant","i-lucide-message-square",{"title":73,"path":74,"stem":75,"icon":76},"The same app on the web","\u002Fguide\u002Fweb","2.guide\u002F09.web","i-lucide-globe",{"title":78,"path":79,"stem":80,"icon":24},"Testing","\u002Fguide\u002Ftesting","2.guide\u002F10.testing",{"title":82,"path":83,"stem":84,"icon":85},"Running and packaging","\u002Fguide\u002Fpackaging","2.guide\u002F11.packaging","i-lucide-package",{"title":87,"path":88,"stem":89,"icon":90},"The terminal contract","\u002Fguide\u002Fterminal","2.guide\u002F12.terminal","i-lucide-square-terminal",{"title":92,"path":93,"stem":94,"icon":95},"Benchmarks","\u002Fguide\u002Fbenchmarks","2.guide\u002F13.benchmarks","i-lucide-gauge",{"title":97,"icon":98,"path":99,"stem":100,"children":101,"page":25},"AI and agents","i-lucide-bot","\u002Fai","3.ai",[102],{"title":97,"path":103,"stem":104,"icon":98},"\u002Fai\u002Fagents","3.ai\u002F1.agents",{"title":106,"icon":107,"path":108,"stem":109,"children":110},"Decisions","i-lucide-scale","\u002Fdecisions","4.decisions",[111,114,118,122,126,130,134,138,142,146,150,154,158,162,166,170,174,178,182,186,190,194,198],{"title":112,"path":108,"stem":113,"icon":46},"All decisions","4.decisions\u002Findex",{"title":115,"path":116,"stem":117},"0001. kyo-ui is the DSL","\u002Fdecisions\u002F0001-kyo-ui-is-the-dsl","4.decisions\u002F0001-kyo-ui-is-the-dsl",{"title":119,"path":120,"stem":121},"0002. jatatui renders the cells","\u002Fdecisions\u002F0002-jatatui-renders-the-cells","4.decisions\u002F0002-jatatui-renders-the-cells",{"title":123,"path":124,"stem":125},"0003. Pin Kyo 1.0.0-RC7 and JDK 25","\u002Fdecisions\u002F0003-pin-kyo-rc7-and-jdk-25","4.decisions\u002F0003-pin-kyo-rc7-and-jdk-25",{"title":127,"path":128,"stem":129},"0004. Public Kyo APIs only","\u002Fdecisions\u002F0004-public-kyo-apis-only","4.decisions\u002F0004-public-kyo-apis-only",{"title":131,"path":132,"stem":133},"0005. A SOFT frame contract and an own watcher loop","\u002Fdecisions\u002F0005-soft-frame-contract-and-own-watcher-loop","4.decisions\u002F0005-soft-frame-contract-and-own-watcher-loop",{"title":135,"path":136,"stem":137},"0006. Purity: edge files, lint and a pure painter","\u002Fdecisions\u002F0006-purity-edge-files-and-lint","4.decisions\u002F0006-purity-edge-files-and-lint",{"title":139,"path":140,"stem":141},"0007. Compiler flags from sbt-tpolecat","\u002Fdecisions\u002F0007-compiler-flags-from-sbt-tpolecat","4.decisions\u002F0007-compiler-flags-from-sbt-tpolecat",{"title":143,"path":144,"stem":145},"0008. The artifact split: runner, app, testkit and core","\u002Fdecisions\u002F0008-artifact-split-runner-app-testkit-core","4.decisions\u002F0008-artifact-split-runner-app-testkit-core",{"title":147,"path":148,"stem":149},"0009. tui4s-use and tui4s-widgets, cross-built","\u002Fdecisions\u002F0009-use-and-widgets-cross-built","4.decisions\u002F0009-use-and-widgets-cross-built",{"title":151,"path":152,"stem":153},"0010. The flagship assistant is the blueprint of a real app","\u002Fdecisions\u002F0010-the-flagship-assistant-as-blueprint","4.decisions\u002F0010-the-flagship-assistant-as-blueprint",{"title":155,"path":156,"stem":157},"0011. The web target: a standalone Scala.js app and one theme","\u002Fdecisions\u002F0011-web-target-standalone-scalajs-and-one-theme","4.decisions\u002F0011-web-target-standalone-scalajs-and-one-theme",{"title":159,"path":160,"stem":161},"0012. The documentation is example-first","\u002Fdecisions\u002F0012-documentation-is-example-first","4.decisions\u002F0012-documentation-is-example-first",{"title":163,"path":164,"stem":165},"0013. Benchmarks in the repository, with their own build","\u002Fdecisions\u002F0013-benchmarks-in-repo-with-own-build","4.decisions\u002F0013-benchmarks-in-repo-with-own-build",{"title":167,"path":168,"stem":169},"0014. Release per module, by tag, as 0.1.0-RC1","\u002Fdecisions\u002F0014-release-per-module-tags-and-rc1","4.decisions\u002F0014-release-per-module-tags-and-rc1",{"title":171,"path":172,"stem":173},"0015. Packaging: the AOT cache in the start scripts, native-image as an option","\u002Fdecisions\u002F0015-packaging-aot-cache-and-native-image","4.decisions\u002F0015-packaging-aot-cache-and-native-image",{"title":175,"path":176,"stem":177},"0016. Process: lean mode and agent roles","\u002Fdecisions\u002F0016-process-lean-mode-and-agent-roles","4.decisions\u002F0016-process-lean-mode-and-agent-roles",{"title":179,"path":180,"stem":181},"0017. Deferred: templates, mouse, the kitty keyboard protocol and Windows","\u002Fdecisions\u002F0017-deferred-templates-mouse-and-kitty","4.decisions\u002F0017-deferred-templates-mouse-and-kitty",{"title":183,"path":184,"stem":185},"0018. pini4s is a vendored Git submodule","\u002Fdecisions\u002F0018-pini4s-as-a-vendored-submodule","4.decisions\u002F0018-pini4s-as-a-vendored-submodule",{"title":187,"path":188,"stem":189},"0019. Upstream issues are drafts that the user posts","\u002Fdecisions\u002F0019-upstream-kyo-issues-as-drafts","4.decisions\u002F0019-upstream-kyo-issues-as-drafts",{"title":191,"path":192,"stem":193},"0020. Release from the Actions form","\u002Fdecisions\u002F0020-release-from-the-actions-form","4.decisions\u002F0020-release-from-the-actions-form",{"title":195,"path":196,"stem":197},"0021. The rulebook is CONTRIBUTING.md","\u002Fdecisions\u002F0021-the-rulebook-is-contributing-md","4.decisions\u002F0021-the-rulebook-is-contributing-md",{"title":199,"path":200,"stem":201},"0022. The logo is text","\u002Fdecisions\u002F0022-the-logo-is-text","4.decisions\u002F0022-the-logo-is-text",{"title":203,"icon":204,"path":205,"stem":206,"children":207,"page":25},"Project","i-lucide-compass","\u002Fproject","5.project",[208,213,218],{"title":209,"path":210,"stem":211,"icon":212},"Roadmap","\u002Fproject\u002Froadmap","5.project\u002F1.roadmap","i-lucide-map",{"title":214,"path":215,"stem":216,"icon":217},"Contributing","\u002Fproject\u002Fcontributing","5.project\u002F2.contributing","i-lucide-git-pull-request",{"title":219,"path":220,"stem":221,"icon":222},"Security","\u002Fproject\u002Fsecurity","5.project\u002F3.security","i-lucide-shield",{"id":224,"title":48,"body":225,"description":1165,"extension":1166,"links":1167,"meta":1168,"navigation":1169,"path":49,"seo":1170,"stem":50,"__hash__":1171},"docs\u002F2.guide\u002F04.overlays.md",{"type":226,"value":227,"toc":1160},"minimark",[228,1045,1049,1060,1065,1098,1105,1109,1128,1132,1146,1156],[229,230,236],"pre",{"className":231,"code":232,"filename":233,"language":234,"meta":235,"style":235},"language-scala shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","    \u002F** The terminal width from which the tabs and the log are side by side. *\u002F\n    val wideFrom: Int = 120\n\n    \u002F** The tabs and the log side by side in a terminal of `wideFrom` columns or\n      * more, else one above the other. `Tui.size` is the size of the terminal\n      * as a signal (kyo-ui has no such signal on the JVM), and a signal of\n      * styles restyles the box when the size changes.\n      *\u002F\n    def body(tabs: UI, log: UI, size: Signal[TerminalSize]): UI =\n      div(div(tabs).style(_.flexGrow(1)), div(log).style(_.flexGrow(1)))\n        .style(\n          size.map(t =>\n            if t.width >= wideFrom then Style.row.gap(2.px) else Style.column,\n          ),\n        )\n\n    \u002F** The help: a box in the middle of the screen, over the rest (a\n      * `position(_.overlay)` layer that centers it), with a row for each key of\n      * `keys`. Its `focusTrap` keeps Tab inside it; its Close button takes the\n      * focus when it appears (`focusAuto`) and gives it back when it goes\n      * (`focusRestore`). Esc does nothing by itself in a focus trap: the\n      * `onKeyDown` of the box closes it.\n      *\u002F\n    def help(s: State, keys: Keymap): UI =\n      when(s.help)(\n        div.style(_.position(_.overlay).justify(_.center).align(_.center))(\n          div\n            .id(\"help\")\n            .focusTrap(true)\n            .onKeyDown {\n              case KeyboardEvent(Keyboard.Escape, _, _) => s.help.set(false)\n              case _                                    => ()\n            }\n            .style(\n              _.border(1.px, Style.Color.blue)\n                .bg(Style.Color.black)\n                .padding(0.px, 1.px),\n            )(\n              h2(\"Keys\"),\n              span(\"←\u002F→  change the tab\"),\n              UI.fragment(keys.help.map((k, h) => span(f\"$k%-4s $h\"))*),\n              button(\"Close\")\n                .id(\"help-close\")\n                .focusAuto(true)\n                .focusRestore(true)\n                .onClick(s.help.set(false))\n                .style(_.alignSelf(_.center)),\n            ),\n        ),\n      )\n\n    \u002F** The toast: a box at the bottom right (`position(_.fixed)` with `bottom`\n      * and `right`), over the rest, while a message is shown.\n      *\u002F\n    def toast(s: State): UI =\n      s.toast.map {\n        case None    => UI.empty\n        case Some(t) =>\n          div.style(\n            _.position(_.fixed)\n              .bottom(1.px)\n              .right(2.px)\n              .border(1.px, Style.Color.green)\n              .bg(Style.Color.black)\n              .padding(0.px, 1.px),\n          )(t.text)\n      }\n","Dashboard.scala","scala","",[237,238,239,248,273,280,286,292,298,304,310,370,387,393,402,441,447,453,458,464,470,476,482,488,494,499,536,542,548,554,572,583,592,626,639,645,651,673,688,704,710,726,741,784,799,814,824,834,845,851,857,863,869,874,880,886,891,915,923,940,953,959,965,976,986,1005,1019,1033,1039],"code",{"__ignoreMap":235},[240,241,244],"span",{"class":242,"line":243},"line",1,[240,245,247],{"class":246},"sHwdD","    \u002F** The terminal width from which the tabs and the log are side by side. *\u002F\n",[240,249,251,255,259,262,266,269],{"class":242,"line":250},2,[240,252,254],{"class":253},"sMK4o","    val",[240,256,258],{"class":257},"sTEyZ"," wideFrom",[240,260,261],{"class":253},":",[240,263,265],{"class":264},"sBMFI"," Int",[240,267,268],{"class":253}," =",[240,270,272],{"class":271},"sbssI"," 120\n",[240,274,276],{"class":242,"line":275},3,[240,277,279],{"emptyLinePlaceholder":278},true,"\n",[240,281,283],{"class":242,"line":282},4,[240,284,285],{"class":246},"    \u002F** The tabs and the log side by side in a terminal of `wideFrom` columns or\n",[240,287,289],{"class":242,"line":288},5,[240,290,291],{"class":246},"      * more, else one above the other. `Tui.size` is the size of the terminal\n",[240,293,295],{"class":242,"line":294},6,[240,296,297],{"class":246},"      * as a signal (kyo-ui has no such signal on the JVM), and a signal of\n",[240,299,301],{"class":242,"line":300},7,[240,302,303],{"class":246},"      * styles restyles the box when the size changes.\n",[240,305,307],{"class":242,"line":306},8,[240,308,309],{"class":246},"      *\u002F\n",[240,311,313,316,320,323,327,330,333,336,339,341,343,345,348,350,353,356,359,362,364,367],{"class":242,"line":312},9,[240,314,315],{"class":253},"    def",[240,317,319],{"class":318},"s2Zo4"," body",[240,321,322],{"class":257},"(",[240,324,326],{"class":325},"sHdIc","tabs",[240,328,329],{"class":257},": ",[240,331,332],{"class":264},"UI",[240,334,335],{"class":257},", ",[240,337,338],{"class":325},"log",[240,340,329],{"class":257},[240,342,332],{"class":264},[240,344,335],{"class":257},[240,346,347],{"class":325},"size",[240,349,329],{"class":257},[240,351,352],{"class":264},"Signal",[240,354,355],{"class":257},"[",[240,357,358],{"class":264},"TerminalSize",[240,360,361],{"class":257},"])",[240,363,261],{"class":253},[240,365,366],{"class":264}," UI",[240,368,369],{"class":253}," =\n",[240,371,373,376,379,382,384],{"class":242,"line":372},10,[240,374,375],{"class":257},"      div(div(tabs).style(_.flexGrow(",[240,377,378],{"class":271},"1",[240,380,381],{"class":257},")), div(log).style(_.flexGrow(",[240,383,378],{"class":271},[240,385,386],{"class":257},")))\n",[240,388,390],{"class":242,"line":389},11,[240,391,392],{"class":257},"        .style(\n",[240,394,396,399],{"class":242,"line":395},12,[240,397,398],{"class":257},"          size.map(t ",[240,400,401],{"class":253},"=>\n",[240,403,405,409,412,415,418,421,424,427,430,433,436,438],{"class":242,"line":404},13,[240,406,408],{"class":407},"s7zQu","            if",[240,410,411],{"class":257}," t.width ",[240,413,414],{"class":253},">=",[240,416,417],{"class":257}," wideFrom ",[240,419,420],{"class":407},"then",[240,422,423],{"class":264}," Style",[240,425,426],{"class":257},".row.gap(",[240,428,429],{"class":271},"2",[240,431,432],{"class":257},".px) ",[240,434,435],{"class":407},"else",[240,437,423],{"class":264},[240,439,440],{"class":257},".column,\n",[240,442,444],{"class":242,"line":443},14,[240,445,446],{"class":257},"          ),\n",[240,448,450],{"class":242,"line":449},15,[240,451,452],{"class":257},"        )\n",[240,454,456],{"class":242,"line":455},16,[240,457,279],{"emptyLinePlaceholder":278},[240,459,461],{"class":242,"line":460},17,[240,462,463],{"class":246},"    \u002F** The help: a box in the middle of the screen, over the rest (a\n",[240,465,467],{"class":242,"line":466},18,[240,468,469],{"class":246},"      * `position(_.overlay)` layer that centers it), with a row for each key of\n",[240,471,473],{"class":242,"line":472},19,[240,474,475],{"class":246},"      * `keys`. Its `focusTrap` keeps Tab inside it; its Close button takes the\n",[240,477,479],{"class":242,"line":478},20,[240,480,481],{"class":246},"      * focus when it appears (`focusAuto`) and gives it back when it goes\n",[240,483,485],{"class":242,"line":484},21,[240,486,487],{"class":246},"      * (`focusRestore`). Esc does nothing by itself in a focus trap: the\n",[240,489,491],{"class":242,"line":490},22,[240,492,493],{"class":246},"      * `onKeyDown` of the box closes it.\n",[240,495,497],{"class":242,"line":496},23,[240,498,309],{"class":246},[240,500,502,504,507,509,512,514,517,519,522,524,527,530,532,534],{"class":242,"line":501},24,[240,503,315],{"class":253},[240,505,506],{"class":318}," help",[240,508,322],{"class":257},[240,510,511],{"class":325},"s",[240,513,329],{"class":257},[240,515,516],{"class":264},"State",[240,518,335],{"class":257},[240,520,521],{"class":325},"keys",[240,523,329],{"class":257},[240,525,526],{"class":264},"Keymap",[240,528,529],{"class":257},")",[240,531,261],{"class":253},[240,533,366],{"class":264},[240,535,369],{"class":253},[240,537,539],{"class":242,"line":538},25,[240,540,541],{"class":257},"      when(s.help)(\n",[240,543,545],{"class":242,"line":544},26,[240,546,547],{"class":257},"        div.style(_.position(_.overlay).justify(_.center).align(_.center))(\n",[240,549,551],{"class":242,"line":550},27,[240,552,553],{"class":257},"          div\n",[240,555,557,560,563,567,569],{"class":242,"line":556},28,[240,558,559],{"class":257},"            .id(",[240,561,562],{"class":253},"\"",[240,564,566],{"class":565},"sfazB","help",[240,568,562],{"class":253},[240,570,571],{"class":257},")\n",[240,573,575,578,581],{"class":242,"line":574},29,[240,576,577],{"class":257},"            .focusTrap(",[240,579,580],{"class":253},"true",[240,582,571],{"class":257},[240,584,586,589],{"class":242,"line":585},30,[240,587,588],{"class":257},"            .onKeyDown ",[240,590,591],{"class":253},"{\n",[240,593,595,598,601,603,606,609,612,615,618,621,624],{"class":242,"line":594},31,[240,596,597],{"class":407},"              case",[240,599,600],{"class":264}," KeyboardEvent",[240,602,322],{"class":257},[240,604,605],{"class":264},"Keyboard",[240,607,608],{"class":257},".",[240,610,611],{"class":264},"Escape",[240,613,614],{"class":257},", _, _) ",[240,616,617],{"class":253},"=>",[240,619,620],{"class":257}," s.help.set(",[240,622,623],{"class":253},"false",[240,625,571],{"class":257},[240,627,629,631,634,636],{"class":242,"line":628},32,[240,630,597],{"class":407},[240,632,633],{"class":257}," _                                    ",[240,635,617],{"class":253},[240,637,638],{"class":257}," ()\n",[240,640,642],{"class":242,"line":641},33,[240,643,644],{"class":253},"            }\n",[240,646,648],{"class":242,"line":647},34,[240,649,650],{"class":257},"            .style(\n",[240,652,654,657,659,662,665,667,670],{"class":242,"line":653},35,[240,655,656],{"class":257},"              _.border(",[240,658,378],{"class":271},[240,660,661],{"class":257},".px, ",[240,663,664],{"class":264},"Style",[240,666,608],{"class":257},[240,668,669],{"class":264},"Color",[240,671,672],{"class":257},".blue)\n",[240,674,676,679,681,683,685],{"class":242,"line":675},36,[240,677,678],{"class":257},"                .bg(",[240,680,664],{"class":264},[240,682,608],{"class":257},[240,684,669],{"class":264},[240,686,687],{"class":257},".black)\n",[240,689,691,694,697,699,701],{"class":242,"line":690},37,[240,692,693],{"class":257},"                .padding(",[240,695,696],{"class":271},"0",[240,698,661],{"class":257},[240,700,378],{"class":271},[240,702,703],{"class":257},".px),\n",[240,705,707],{"class":242,"line":706},38,[240,708,709],{"class":257},"            )(\n",[240,711,713,716,718,721,723],{"class":242,"line":712},39,[240,714,715],{"class":257},"              h2(",[240,717,562],{"class":253},[240,719,720],{"class":565},"Keys",[240,722,562],{"class":253},[240,724,725],{"class":257},"),\n",[240,727,729,732,734,737,739],{"class":242,"line":728},40,[240,730,731],{"class":257},"              span(",[240,733,562],{"class":253},[240,735,736],{"class":565},"←\u002F→  change the tab",[240,738,562],{"class":253},[240,740,725],{"class":257},[240,742,744,747,750,752,755,758,760,763,766,769,771,774,776,779,782],{"class":242,"line":743},41,[240,745,746],{"class":264},"              UI",[240,748,749],{"class":257},".fragment(keys.help.map((k, h) ",[240,751,617],{"class":253},[240,753,754],{"class":257}," span(",[240,756,757],{"class":253},"f",[240,759,562],{"class":253},[240,761,762],{"class":253},"$",[240,764,765],{"class":257},"k",[240,767,768],{"class":565},"%-4s ",[240,770,762],{"class":253},[240,772,773],{"class":257},"h",[240,775,562],{"class":253},[240,777,778],{"class":257},"))",[240,780,781],{"class":253},"*",[240,783,725],{"class":257},[240,785,787,790,792,795,797],{"class":242,"line":786},42,[240,788,789],{"class":257},"              button(",[240,791,562],{"class":253},[240,793,794],{"class":565},"Close",[240,796,562],{"class":253},[240,798,571],{"class":257},[240,800,802,805,807,810,812],{"class":242,"line":801},43,[240,803,804],{"class":257},"                .id(",[240,806,562],{"class":253},[240,808,809],{"class":565},"help-close",[240,811,562],{"class":253},[240,813,571],{"class":257},[240,815,817,820,822],{"class":242,"line":816},44,[240,818,819],{"class":257},"                .focusAuto(",[240,821,580],{"class":253},[240,823,571],{"class":257},[240,825,827,830,832],{"class":242,"line":826},45,[240,828,829],{"class":257},"                .focusRestore(",[240,831,580],{"class":253},[240,833,571],{"class":257},[240,835,837,840,842],{"class":242,"line":836},46,[240,838,839],{"class":257},"                .onClick(s.help.set(",[240,841,623],{"class":253},[240,843,844],{"class":257},"))\n",[240,846,848],{"class":242,"line":847},47,[240,849,850],{"class":257},"                .style(_.alignSelf(_.center)),\n",[240,852,854],{"class":242,"line":853},48,[240,855,856],{"class":257},"            ),\n",[240,858,860],{"class":242,"line":859},49,[240,861,862],{"class":257},"        ),\n",[240,864,866],{"class":242,"line":865},50,[240,867,868],{"class":257},"      )\n",[240,870,872],{"class":242,"line":871},51,[240,873,279],{"emptyLinePlaceholder":278},[240,875,877],{"class":242,"line":876},52,[240,878,879],{"class":246},"    \u002F** The toast: a box at the bottom right (`position(_.fixed)` with `bottom`\n",[240,881,883],{"class":242,"line":882},53,[240,884,885],{"class":246},"      * and `right`), over the rest, while a message is shown.\n",[240,887,889],{"class":242,"line":888},54,[240,890,309],{"class":246},[240,892,894,896,899,901,903,905,907,909,911,913],{"class":242,"line":893},55,[240,895,315],{"class":253},[240,897,898],{"class":318}," toast",[240,900,322],{"class":257},[240,902,511],{"class":325},[240,904,329],{"class":257},[240,906,516],{"class":264},[240,908,529],{"class":257},[240,910,261],{"class":253},[240,912,366],{"class":264},[240,914,369],{"class":253},[240,916,918,921],{"class":242,"line":917},56,[240,919,920],{"class":257},"      s.toast.map ",[240,922,591],{"class":253},[240,924,926,929,932,935,937],{"class":242,"line":925},57,[240,927,928],{"class":407},"        case",[240,930,931],{"class":264}," None",[240,933,934],{"class":253},"    =>",[240,936,366],{"class":264},[240,938,939],{"class":257},".empty\n",[240,941,943,945,948,951],{"class":242,"line":942},58,[240,944,928],{"class":407},[240,946,947],{"class":264}," Some",[240,949,950],{"class":257},"(t) ",[240,952,401],{"class":253},[240,954,956],{"class":242,"line":955},59,[240,957,958],{"class":257},"          div.style(\n",[240,960,962],{"class":242,"line":961},60,[240,963,964],{"class":257},"            _.position(_.fixed)\n",[240,966,968,971,973],{"class":242,"line":967},61,[240,969,970],{"class":257},"              .bottom(",[240,972,378],{"class":271},[240,974,975],{"class":257},".px)\n",[240,977,979,982,984],{"class":242,"line":978},62,[240,980,981],{"class":257},"              .right(",[240,983,429],{"class":271},[240,985,975],{"class":257},[240,987,989,992,994,996,998,1000,1002],{"class":242,"line":988},63,[240,990,991],{"class":257},"              .border(",[240,993,378],{"class":271},[240,995,661],{"class":257},[240,997,664],{"class":264},[240,999,608],{"class":257},[240,1001,669],{"class":264},[240,1003,1004],{"class":257},".green)\n",[240,1006,1008,1011,1013,1015,1017],{"class":242,"line":1007},64,[240,1009,1010],{"class":257},"              .bg(",[240,1012,664],{"class":264},[240,1014,608],{"class":257},[240,1016,669],{"class":264},[240,1018,687],{"class":257},[240,1020,1022,1025,1027,1029,1031],{"class":242,"line":1021},65,[240,1023,1024],{"class":257},"              .padding(",[240,1026,696],{"class":271},[240,1028,661],{"class":257},[240,1030,378],{"class":271},[240,1032,703],{"class":257},[240,1034,1036],{"class":242,"line":1035},66,[240,1037,1038],{"class":257},"          )(t.text)\n",[240,1040,1042],{"class":242,"line":1041},67,[240,1043,1044],{"class":253},"      }\n",[1046,1047],"cast",{"src":1048},"\u002Fcasts\u002Fdashboard.cast",[1050,1051,1052,1053,1056,1057,1059],"p",{},"In the Dashboard, ",[237,1054,1055],{},"?"," opens the help box over the screen, and ",[237,1058,1050],{}," shows a toast at the bottom right. In a terminal of 120 columns or more, the tabs and the log are side by side.",[1061,1062,1064],"h2",{"id":1063},"layers","Layers",[1050,1066,1067,1068,1071,1072,1075,1076,1079,1080,1083,1084,335,1087,335,1090,1093,1094,1097],{},"A positioned element is a layer. ",[237,1069,1070],{},"position(_.absolute)"," takes the element out of the flex flow and places it in its containing block: the padding box of the nearest positioned ancestor, else the screen. ",[237,1073,1074],{},"position(_.fixed)"," places it in the screen. kyo-ui's ",[237,1077,1078],{},"overlay"," is a fixed box over the whole screen. Its ",[237,1081,1082],{},"dropdown"," is an absolute box under the right edge of its positioned ancestor. ",[237,1085,1086],{},"top",[237,1088,1089],{},"right",[237,1091,1092],{},"bottom"," and ",[237,1095,1096],{},"left"," place the box from an edge.",[1050,1099,1100,1101,1104],{},"The flow paints first. Then the layers paint in the order of their ",[237,1102,1103],{},"zIndex"," (0 when none), and the equal ones in document order. In a layer, a background hides what is under it. When a frame changes cells under a layer, the runner paints those rows again, so nothing shows through the layer.",[1061,1106,1108],{"id":1107},"modals","Modals",[1050,1110,1111,1112,1115,1116,1119,1120,1123,1124,1127],{},"A modal is a layer with kyo-ui's ",[237,1113,1114],{},"focusTrap",": Tab stays inside it. Its first focusable element with ",[237,1117,1118],{},"focusAuto(true)"," takes the focus when it appears. With ",[237,1121,1122],{},"focusRestore(true)",", the focus goes back to the element that had it before. Esc does nothing by itself in a focus trap: the ",[237,1125,1126],{},"onKeyDown"," of the app closes the modal, as the help box does.",[1061,1129,1131],{"id":1130},"the-size-of-the-terminal","The size of the terminal",[1050,1133,1134,1137,1138,1141,1142,1145],{},[237,1135,1136],{},"Tui.size"," is the size of the terminal in cells, as a ",[237,1139,1140],{},"Signal[TerminalSize]",". kyo-ui has no signal of the window size on the JVM. A resize writes it in the frame of the resize, so the layout that comes from it is in the same frame. ",[237,1143,1144],{},"body"," in the example restyles the box when the size changes.",[1050,1147,1148,1151,1152,1155],{},[237,1149,1150],{},"flexWrap(_.wrap)"," breaks the items of a row into lines. ",[237,1153,1154],{},"displayNone"," removes an element from the layout and the paint, and its components keep their state.",[1157,1158,1159],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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);}",{"title":235,"searchDepth":250,"depth":250,"links":1161},[1162,1163,1164],{"id":1063,"depth":250,"text":1064},{"id":1107,"depth":250,"text":1108},{"id":1130,"depth":250,"text":1131},"Positioned elements, modals with a focus trap, toasts, and the size of the terminal.","md",null,{},{"icon":51},{"title":48,"description":1165},"R02I7l_MYqWNHXkPzOJKBdd05UhNMcIjh8PT9h7fRYw",[1173,1175],{"title":43,"path":44,"stem":45,"description":1174,"icon":46,"children":-1},"An element with overflow is a viewport that clips and scrolls; the text flow, the wrap and the ellipsis.",{"title":53,"path":54,"stem":55,"description":1176,"icon":56,"children":-1},"kyo-ui styles in the terminal, custom colour properties and the two built-in looks.",1792528754705]