[{"data":1,"prerenderedAt":2468},["ShallowReactive",2],{"navigation_docs":3,"-guide-inputs-and-forms":223,"-guide-inputs-and-forms-surround":2463},[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":38,"body":225,"description":2456,"extension":2457,"links":2458,"meta":2459,"navigation":2460,"path":39,"seo":2461,"stem":40,"__hash__":2462},"docs\u002F2.guide\u002F02.inputs-and-forms.md",{"type":226,"value":227,"toc":2451},"minimark",[228,2144,2148,2170,2175,2319,2323,2330,2400,2406,2410,2447],[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","import kyo.*\nimport kyo.UI.*\nimport tui4s.{Tui, TuiApp, maxLength}\n\n\u002F** A sign-up form with the native inputs of kyo-ui: a text input, a password, a\n  * number, a range, two checkboxes, two radios, a select, a dropdown, a\n  * textarea of 3 rows, a read-only and a disabled field, and the Submit and\n  * Reset buttons. Tab moves between the fields. Enter in a field submits the\n  * form (also in the textarea: Alt-Enter or Ctrl-J there gives a new line). The\n  * result shows under the form. Esc quits.\n  *\u002F\nobject Forms:\n\n    \u002F** One row of the form: a label of 9 cells and its input (a `fragment` puts\n      * more inputs side by side).\n      *\u002F\n    def field(label: String, input: UI): UI =\n      div.style(_.row.gap(1.px).align(_.start))(\n        span(label).style(_.width(9.px)),\n        input,\n      )\n\n    \u002F** The form; `quit` ends the run. *\u002F\n    def ui(quit: Unit \u003C Sync): UI \u003C Sync =\n      for\n          name    \u003C- Signal.initRef(\"\")\n          secret  \u003C- Signal.initRef(\"\")\n          age     \u003C- Signal.initRef(\"30\")\n          volume  \u003C- Signal.initRef(50.0)\n          news    \u003C- Signal.initRef(true)\n          updates \u003C- Signal.initRef(false)\n          plan    \u003C- Signal.initRef(\"free\")\n          colour  \u003C- Signal.initRef(\"blue\")\n          size    \u003C- Signal.initRef(\"m\")\n          message \u003C- Signal.initRef(\"\")\n          result  \u003C- Signal.initRef(\"Fill the form, then press Enter.\")\n      yield\n          def yesNo(on: Boolean, what: String): String =\n            if on then what else s\"no $what\"\n          val submit: Unit \u003C Sync                      =\n            for\n                n \u003C- name.get\n                s \u003C- secret.get\n                a \u003C- age.get\n                v \u003C- volume.get\n                l \u003C- news.get\n                u \u003C- updates.get\n                p \u003C- plan.get\n                c \u003C- colour.get\n                z \u003C- size.get\n                m \u003C- message.get\n                _ \u003C- result.set(\n                       s\"Sent: $n, ${yesNo(s.nonEmpty, \"secret\")}, age $a, \" +\n                         s\"volume ${v.toInt}, ${yesNo(l, \"news\")}, \" +\n                         s\"${yesNo(u, \"updates\")}, $p, $c, size $z, \" +\n                         s\"${m.linesIterator.size} message lines\",\n                     )\n            yield ()\n          \u002F\u002F Reset gives every field its first value\n          val reset: Unit \u003C Sync                       =\n            Kyo\n              .foreach(Seq(name, secret, message))(_.set(\"\"))\n              .andThen(age.set(\"30\"))\n              .andThen(volume.set(50.0))\n              .andThen(news.set(true))\n              .andThen(updates.set(false))\n              .andThen(plan.set(\"free\"))\n              .andThen(colour.set(\"blue\"))\n              .andThen(size.set(\"m\"))\n              .andThen(result.set(\"The form has its first values again.\"))\n          \u002F\u002F two radios of one group: the plan is the state; each radio shows\n          \u002F\u002F it and asks to change it\n          def choice(value: String, label: String): UI =\n            div.style(_.row.gap(1.px))(\n              radio\n                .onChange(_ => plan.set(value))\n                .checked(plan.map(_ == value)),\n              span(label),\n            )\n          div.onKeyDown {\n            case KeyboardEvent(Keyboard.Escape, _, _) => quit\n            case _                                    => ()\n          }(\n            h1(\"Sign up\"),\n            form.onSubmit(submit)(\n              field(\"Name\", input.value(name).placeholder(\"Ada\").maxLength(20)),\n              field(\"Secret\", passwordInput.value(secret)),\n              field(\"Age\", numberInput.value(age).min(0).max(130).step(1)),\n              field(\"Volume\", rangeInput.value(volume).min(0).max(100).step(5)),\n              field(\n                \"Mail\",\n                fragment(\n                  checkbox.checked(news),\n                  span(\"news\"),\n                  checkbox.checked(updates),\n                  span(\"updates\"),\n                ),\n              ),\n              field(\n                \"Plan\",\n                fragment(choice(\"free\", \"Free\"), choice(\"pro\", \"Pro\")),\n              ),\n              field(\n                \"Colour\",\n                select.value(colour)(\n                  option.value(\"blue\")(\"Blue\"),\n                  option.value(\"green\")(\"Green\"),\n                ),\n              ),\n              field(\n                \"Size\",\n                dropdown(\"s\" -> \"Small\", \"m\" -> \"Medium\", \"l\" -> \"Large\")\n                  .value(size),\n              ),\n              field(\n                \"Message\",\n                textarea.value(message).style(_.width(30.px).height(3.px)),\n              ),\n              field(\"Account\", input.value(\"ada-01\").readOnly(true)),\n              field(\"Team\", input.value(\"core\").disabled(true)),\n              div.style(_.row.gap(1.px))(\n                button(\"Submit\"),\n                \u002F\u002F kyo-ui has no button type: a button in a form submits it,\n                \u002F\u002F so Reset stops its click before the form\n                button(\"Reset\").onClick(reset).stopPropagation(true),\n              ),\n            ),\n            p(result).id(\"result\"),\n          )\nend Forms\n\n\u002F** Runs the form in the real terminal: `examples\u002Ftarget\u002Fbin\u002Fforms`. *\u002F\nobject FormsApp extends TuiApp:\n    def ui: UI \u003C (Async & Scope) = Forms.ui(Tui.quit)\n","Forms.scala","scala","",[237,238,239,259,275,306,313,320,326,332,338,344,350,356,368,373,379,385,391,435,447,459,465,471,476,482,518,525,546,562,585,602,619,636,657,678,699,715,736,742,779,813,834,840,851,862,873,884,895,906,917,928,939,950,961,1012,1054,1105,1127,1133,1142,1148,1167,1173,1190,1204,1214,1224,1234,1248,1262,1276,1291,1297,1303,1336,1347,1353,1365,1377,1383,1389,1398,1425,1437,1446,1462,1468,1500,1515,1546,1575,1581,1594,1600,1606,1620,1626,1639,1645,1651,1656,1668,1710,1715,1720,1732,1738,1762,1785,1790,1795,1800,1812,1873,1879,1884,1889,1901,1917,1922,1951,1979,1989,2004,2010,2016,2035,2040,2046,2061,2067,2076,2081,2087,2103],"code",{"__ignoreMap":235},[240,241,244,248,252,256],"span",{"class":242,"line":243},"line",1,[240,245,247],{"class":246},"sbssI","import",[240,249,251],{"class":250},"sBMFI"," kyo",[240,253,255],{"class":254},"sMK4o",".",[240,257,258],{"class":250},"*\n",[240,260,262,264,266,268,271,273],{"class":242,"line":261},2,[240,263,247],{"class":246},[240,265,251],{"class":250},[240,267,255],{"class":254},[240,269,270],{"class":250},"UI",[240,272,255],{"class":254},[240,274,258],{"class":250},[240,276,278,280,283,285,289,292,295,298,300,303],{"class":242,"line":277},3,[240,279,247],{"class":246},[240,281,282],{"class":250}," tui4s",[240,284,255],{"class":254},[240,286,288],{"class":287},"sTEyZ","{",[240,290,291],{"class":250},"Tui",[240,293,294],{"class":287},", ",[240,296,297],{"class":250},"TuiApp",[240,299,294],{"class":287},[240,301,302],{"class":250},"maxLength",[240,304,305],{"class":287},"}\n",[240,307,309],{"class":242,"line":308},4,[240,310,312],{"emptyLinePlaceholder":311},true,"\n",[240,314,316],{"class":242,"line":315},5,[240,317,319],{"class":318},"sHwdD","\u002F** A sign-up form with the native inputs of kyo-ui: a text input, a password, a\n",[240,321,323],{"class":242,"line":322},6,[240,324,325],{"class":318},"  * number, a range, two checkboxes, two radios, a select, a dropdown, a\n",[240,327,329],{"class":242,"line":328},7,[240,330,331],{"class":318},"  * textarea of 3 rows, a read-only and a disabled field, and the Submit and\n",[240,333,335],{"class":242,"line":334},8,[240,336,337],{"class":318},"  * Reset buttons. Tab moves between the fields. Enter in a field submits the\n",[240,339,341],{"class":242,"line":340},9,[240,342,343],{"class":318},"  * form (also in the textarea: Alt-Enter or Ctrl-J there gives a new line). The\n",[240,345,347],{"class":242,"line":346},10,[240,348,349],{"class":318},"  * result shows under the form. Esc quits.\n",[240,351,353],{"class":242,"line":352},11,[240,354,355],{"class":318},"  *\u002F\n",[240,357,359,362,365],{"class":242,"line":358},12,[240,360,361],{"class":254},"object",[240,363,364],{"class":250}," Forms",[240,366,367],{"class":254},":\n",[240,369,371],{"class":242,"line":370},13,[240,372,312],{"emptyLinePlaceholder":311},[240,374,376],{"class":242,"line":375},14,[240,377,378],{"class":318},"    \u002F** One row of the form: a label of 9 cells and its input (a `fragment` puts\n",[240,380,382],{"class":242,"line":381},15,[240,383,384],{"class":318},"      * more inputs side by side).\n",[240,386,388],{"class":242,"line":387},16,[240,389,390],{"class":318},"      *\u002F\n",[240,392,394,397,401,404,408,411,414,416,419,421,423,426,429,432],{"class":242,"line":393},17,[240,395,396],{"class":254},"    def",[240,398,400],{"class":399},"s2Zo4"," field",[240,402,403],{"class":287},"(",[240,405,407],{"class":406},"sHdIc","label",[240,409,410],{"class":287},": ",[240,412,413],{"class":250},"String",[240,415,294],{"class":287},[240,417,418],{"class":406},"input",[240,420,410],{"class":287},[240,422,270],{"class":250},[240,424,425],{"class":287},")",[240,427,428],{"class":254},":",[240,430,431],{"class":250}," UI",[240,433,434],{"class":254}," =\n",[240,436,438,441,444],{"class":242,"line":437},18,[240,439,440],{"class":287},"      div.style(_.row.gap(",[240,442,443],{"class":246},"1",[240,445,446],{"class":287},".px).align(_.start))(\n",[240,448,450,453,456],{"class":242,"line":449},19,[240,451,452],{"class":287},"        span(label).style(_.width(",[240,454,455],{"class":246},"9",[240,457,458],{"class":287},".px)),\n",[240,460,462],{"class":242,"line":461},20,[240,463,464],{"class":287},"        input,\n",[240,466,468],{"class":242,"line":467},21,[240,469,470],{"class":287},"      )\n",[240,472,474],{"class":242,"line":473},22,[240,475,312],{"emptyLinePlaceholder":311},[240,477,479],{"class":242,"line":478},23,[240,480,481],{"class":318},"    \u002F** The form; `quit` ends the run. *\u002F\n",[240,483,485,487,490,492,495,497,500,503,506,508,510,512,514,516],{"class":242,"line":484},24,[240,486,396],{"class":254},[240,488,489],{"class":399}," ui",[240,491,403],{"class":287},[240,493,494],{"class":406},"quit",[240,496,410],{"class":287},[240,498,499],{"class":250},"Unit",[240,501,502],{"class":254}," \u003C",[240,504,505],{"class":250}," Sync",[240,507,425],{"class":287},[240,509,428],{"class":254},[240,511,431],{"class":250},[240,513,502],{"class":254},[240,515,505],{"class":250},[240,517,434],{"class":254},[240,519,521],{"class":242,"line":520},25,[240,522,524],{"class":523},"s7zQu","      for\n",[240,526,528,531,534,537,540,543],{"class":242,"line":527},26,[240,529,530],{"class":287},"          name    ",[240,532,533],{"class":254},"\u003C-",[240,535,536],{"class":250}," Signal",[240,538,539],{"class":287},".initRef(",[240,541,542],{"class":254},"\"\"",[240,544,545],{"class":287},")\n",[240,547,549,552,554,556,558,560],{"class":242,"line":548},27,[240,550,551],{"class":287},"          secret  ",[240,553,533],{"class":254},[240,555,536],{"class":250},[240,557,539],{"class":287},[240,559,542],{"class":254},[240,561,545],{"class":287},[240,563,565,568,570,572,574,577,581,583],{"class":242,"line":564},28,[240,566,567],{"class":287},"          age     ",[240,569,533],{"class":254},[240,571,536],{"class":250},[240,573,539],{"class":287},[240,575,576],{"class":254},"\"",[240,578,580],{"class":579},"sfazB","30",[240,582,576],{"class":254},[240,584,545],{"class":287},[240,586,588,591,593,595,597,600],{"class":242,"line":587},29,[240,589,590],{"class":287},"          volume  ",[240,592,533],{"class":254},[240,594,536],{"class":250},[240,596,539],{"class":287},[240,598,599],{"class":246},"50.0",[240,601,545],{"class":287},[240,603,605,608,610,612,614,617],{"class":242,"line":604},30,[240,606,607],{"class":287},"          news    ",[240,609,533],{"class":254},[240,611,536],{"class":250},[240,613,539],{"class":287},[240,615,616],{"class":254},"true",[240,618,545],{"class":287},[240,620,622,625,627,629,631,634],{"class":242,"line":621},31,[240,623,624],{"class":287},"          updates ",[240,626,533],{"class":254},[240,628,536],{"class":250},[240,630,539],{"class":287},[240,632,633],{"class":254},"false",[240,635,545],{"class":287},[240,637,639,642,644,646,648,650,653,655],{"class":242,"line":638},32,[240,640,641],{"class":287},"          plan    ",[240,643,533],{"class":254},[240,645,536],{"class":250},[240,647,539],{"class":287},[240,649,576],{"class":254},[240,651,652],{"class":579},"free",[240,654,576],{"class":254},[240,656,545],{"class":287},[240,658,660,663,665,667,669,671,674,676],{"class":242,"line":659},33,[240,661,662],{"class":287},"          colour  ",[240,664,533],{"class":254},[240,666,536],{"class":250},[240,668,539],{"class":287},[240,670,576],{"class":254},[240,672,673],{"class":579},"blue",[240,675,576],{"class":254},[240,677,545],{"class":287},[240,679,681,684,686,688,690,692,695,697],{"class":242,"line":680},34,[240,682,683],{"class":287},"          size    ",[240,685,533],{"class":254},[240,687,536],{"class":250},[240,689,539],{"class":287},[240,691,576],{"class":254},[240,693,694],{"class":579},"m",[240,696,576],{"class":254},[240,698,545],{"class":287},[240,700,702,705,707,709,711,713],{"class":242,"line":701},35,[240,703,704],{"class":287},"          message ",[240,706,533],{"class":254},[240,708,536],{"class":250},[240,710,539],{"class":287},[240,712,542],{"class":254},[240,714,545],{"class":287},[240,716,718,721,723,725,727,729,732,734],{"class":242,"line":717},36,[240,719,720],{"class":287},"          result  ",[240,722,533],{"class":254},[240,724,536],{"class":250},[240,726,539],{"class":287},[240,728,576],{"class":254},[240,730,731],{"class":579},"Fill the form, then press Enter.",[240,733,576],{"class":254},[240,735,545],{"class":287},[240,737,739],{"class":242,"line":738},37,[240,740,741],{"class":523},"      yield\n",[240,743,745,748,751,753,756,758,761,763,766,768,770,772,774,777],{"class":242,"line":744},38,[240,746,747],{"class":254},"          def",[240,749,750],{"class":399}," yesNo",[240,752,403],{"class":287},[240,754,755],{"class":406},"on",[240,757,410],{"class":287},[240,759,760],{"class":250},"Boolean",[240,762,294],{"class":287},[240,764,765],{"class":406},"what",[240,767,410],{"class":287},[240,769,413],{"class":250},[240,771,425],{"class":287},[240,773,428],{"class":254},[240,775,776],{"class":250}," String",[240,778,434],{"class":254},[240,780,782,785,788,791,794,797,800,802,805,808,810],{"class":242,"line":781},39,[240,783,784],{"class":523},"            if",[240,786,787],{"class":287}," on ",[240,789,790],{"class":523},"then",[240,792,793],{"class":287}," what ",[240,795,796],{"class":523},"else",[240,798,799],{"class":254}," s",[240,801,576],{"class":254},[240,803,804],{"class":579},"no ",[240,806,807],{"class":254},"$",[240,809,765],{"class":287},[240,811,812],{"class":254},"\"\n",[240,814,816,819,822,824,827,829,831],{"class":242,"line":815},40,[240,817,818],{"class":254},"          val",[240,820,821],{"class":287}," submit",[240,823,428],{"class":254},[240,825,826],{"class":250}," Unit",[240,828,502],{"class":254},[240,830,505],{"class":250},[240,832,833],{"class":254},"                      =\n",[240,835,837],{"class":242,"line":836},41,[240,838,839],{"class":523},"            for\n",[240,841,843,846,848],{"class":242,"line":842},42,[240,844,845],{"class":287},"                n ",[240,847,533],{"class":254},[240,849,850],{"class":287}," name.get\n",[240,852,854,857,859],{"class":242,"line":853},43,[240,855,856],{"class":287},"                s ",[240,858,533],{"class":254},[240,860,861],{"class":287}," secret.get\n",[240,863,865,868,870],{"class":242,"line":864},44,[240,866,867],{"class":287},"                a ",[240,869,533],{"class":254},[240,871,872],{"class":287}," age.get\n",[240,874,876,879,881],{"class":242,"line":875},45,[240,877,878],{"class":287},"                v ",[240,880,533],{"class":254},[240,882,883],{"class":287}," volume.get\n",[240,885,887,890,892],{"class":242,"line":886},46,[240,888,889],{"class":287},"                l ",[240,891,533],{"class":254},[240,893,894],{"class":287}," news.get\n",[240,896,898,901,903],{"class":242,"line":897},47,[240,899,900],{"class":287},"                u ",[240,902,533],{"class":254},[240,904,905],{"class":287}," updates.get\n",[240,907,909,912,914],{"class":242,"line":908},48,[240,910,911],{"class":287},"                p ",[240,913,533],{"class":254},[240,915,916],{"class":287}," plan.get\n",[240,918,920,923,925],{"class":242,"line":919},49,[240,921,922],{"class":287},"                c ",[240,924,533],{"class":254},[240,926,927],{"class":287}," colour.get\n",[240,929,931,934,936],{"class":242,"line":930},50,[240,932,933],{"class":287},"                z ",[240,935,533],{"class":254},[240,937,938],{"class":287}," size.get\n",[240,940,942,945,947],{"class":242,"line":941},51,[240,943,944],{"class":287},"                m ",[240,946,533],{"class":254},[240,948,949],{"class":287}," message.get\n",[240,951,953,956,958],{"class":242,"line":952},52,[240,954,955],{"class":287},"                _ ",[240,957,533],{"class":254},[240,959,960],{"class":287}," result.set(\n",[240,962,964,967,969,972,974,977,979,982,985,987,990,992,994,997,1000,1002,1005,1007,1009],{"class":242,"line":963},53,[240,965,966],{"class":254},"                       s",[240,968,576],{"class":254},[240,970,971],{"class":579},"Sent: ",[240,973,807],{"class":254},[240,975,976],{"class":287},"n",[240,978,294],{"class":579},[240,980,981],{"class":254},"${",[240,983,984],{"class":287},"yesNo(s.nonEmpty, ",[240,986,576],{"class":254},[240,988,989],{"class":579},"secret",[240,991,576],{"class":254},[240,993,425],{"class":287},[240,995,996],{"class":254},"}",[240,998,999],{"class":579},", age ",[240,1001,807],{"class":254},[240,1003,1004],{"class":287},"a",[240,1006,294],{"class":579},[240,1008,576],{"class":254},[240,1010,1011],{"class":254}," +\n",[240,1013,1015,1018,1020,1023,1025,1028,1030,1032,1034,1037,1039,1042,1044,1046,1048,1050,1052],{"class":242,"line":1014},54,[240,1016,1017],{"class":254},"                         s",[240,1019,576],{"class":254},[240,1021,1022],{"class":579},"volume ",[240,1024,981],{"class":254},[240,1026,1027],{"class":287},"v.toInt",[240,1029,996],{"class":254},[240,1031,294],{"class":579},[240,1033,981],{"class":254},[240,1035,1036],{"class":287},"yesNo(l, ",[240,1038,576],{"class":254},[240,1040,1041],{"class":579},"news",[240,1043,576],{"class":254},[240,1045,425],{"class":287},[240,1047,996],{"class":254},[240,1049,294],{"class":579},[240,1051,576],{"class":254},[240,1053,1011],{"class":254},[240,1055,1057,1059,1061,1063,1066,1068,1071,1073,1075,1077,1079,1081,1084,1086,1088,1091,1094,1096,1099,1101,1103],{"class":242,"line":1056},55,[240,1058,1017],{"class":254},[240,1060,576],{"class":254},[240,1062,981],{"class":254},[240,1064,1065],{"class":287},"yesNo(u, ",[240,1067,576],{"class":254},[240,1069,1070],{"class":579},"updates",[240,1072,576],{"class":254},[240,1074,425],{"class":287},[240,1076,996],{"class":254},[240,1078,294],{"class":579},[240,1080,807],{"class":254},[240,1082,1083],{"class":287},"p",[240,1085,294],{"class":579},[240,1087,807],{"class":254},[240,1089,1090],{"class":287},"c",[240,1092,1093],{"class":579},", size ",[240,1095,807],{"class":254},[240,1097,1098],{"class":287},"z",[240,1100,294],{"class":579},[240,1102,576],{"class":254},[240,1104,1011],{"class":254},[240,1106,1108,1110,1112,1114,1117,1119,1122,1124],{"class":242,"line":1107},56,[240,1109,1017],{"class":254},[240,1111,576],{"class":254},[240,1113,981],{"class":254},[240,1115,1116],{"class":287},"m.linesIterator.size",[240,1118,996],{"class":254},[240,1120,1121],{"class":579}," message lines",[240,1123,576],{"class":254},[240,1125,1126],{"class":287},",\n",[240,1128,1130],{"class":242,"line":1129},57,[240,1131,1132],{"class":287},"                     )\n",[240,1134,1136,1139],{"class":242,"line":1135},58,[240,1137,1138],{"class":523},"            yield",[240,1140,1141],{"class":287}," ()\n",[240,1143,1145],{"class":242,"line":1144},59,[240,1146,1147],{"class":318},"          \u002F\u002F Reset gives every field its first value\n",[240,1149,1151,1153,1156,1158,1160,1162,1164],{"class":242,"line":1150},60,[240,1152,818],{"class":254},[240,1154,1155],{"class":287}," reset",[240,1157,428],{"class":254},[240,1159,826],{"class":250},[240,1161,502],{"class":254},[240,1163,505],{"class":250},[240,1165,1166],{"class":254},"                       =\n",[240,1168,1170],{"class":242,"line":1169},61,[240,1171,1172],{"class":250},"            Kyo\n",[240,1174,1176,1179,1182,1185,1187],{"class":242,"line":1175},62,[240,1177,1178],{"class":287},"              .foreach(",[240,1180,1181],{"class":250},"Seq",[240,1183,1184],{"class":287},"(name, secret, message))(_.set(",[240,1186,542],{"class":254},[240,1188,1189],{"class":287},"))\n",[240,1191,1193,1196,1198,1200,1202],{"class":242,"line":1192},63,[240,1194,1195],{"class":287},"              .andThen(age.set(",[240,1197,576],{"class":254},[240,1199,580],{"class":579},[240,1201,576],{"class":254},[240,1203,1189],{"class":287},[240,1205,1207,1210,1212],{"class":242,"line":1206},64,[240,1208,1209],{"class":287},"              .andThen(volume.set(",[240,1211,599],{"class":246},[240,1213,1189],{"class":287},[240,1215,1217,1220,1222],{"class":242,"line":1216},65,[240,1218,1219],{"class":287},"              .andThen(news.set(",[240,1221,616],{"class":254},[240,1223,1189],{"class":287},[240,1225,1227,1230,1232],{"class":242,"line":1226},66,[240,1228,1229],{"class":287},"              .andThen(updates.set(",[240,1231,633],{"class":254},[240,1233,1189],{"class":287},[240,1235,1237,1240,1242,1244,1246],{"class":242,"line":1236},67,[240,1238,1239],{"class":287},"              .andThen(plan.set(",[240,1241,576],{"class":254},[240,1243,652],{"class":579},[240,1245,576],{"class":254},[240,1247,1189],{"class":287},[240,1249,1251,1254,1256,1258,1260],{"class":242,"line":1250},68,[240,1252,1253],{"class":287},"              .andThen(colour.set(",[240,1255,576],{"class":254},[240,1257,673],{"class":579},[240,1259,576],{"class":254},[240,1261,1189],{"class":287},[240,1263,1265,1268,1270,1272,1274],{"class":242,"line":1264},69,[240,1266,1267],{"class":287},"              .andThen(size.set(",[240,1269,576],{"class":254},[240,1271,694],{"class":579},[240,1273,576],{"class":254},[240,1275,1189],{"class":287},[240,1277,1279,1282,1284,1287,1289],{"class":242,"line":1278},70,[240,1280,1281],{"class":287},"              .andThen(result.set(",[240,1283,576],{"class":254},[240,1285,1286],{"class":579},"The form has its first values again.",[240,1288,576],{"class":254},[240,1290,1189],{"class":287},[240,1292,1294],{"class":242,"line":1293},71,[240,1295,1296],{"class":318},"          \u002F\u002F two radios of one group: the plan is the state; each radio shows\n",[240,1298,1300],{"class":242,"line":1299},72,[240,1301,1302],{"class":318},"          \u002F\u002F it and asks to change it\n",[240,1304,1306,1308,1311,1313,1316,1318,1320,1322,1324,1326,1328,1330,1332,1334],{"class":242,"line":1305},73,[240,1307,747],{"class":254},[240,1309,1310],{"class":399}," choice",[240,1312,403],{"class":287},[240,1314,1315],{"class":406},"value",[240,1317,410],{"class":287},[240,1319,413],{"class":250},[240,1321,294],{"class":287},[240,1323,407],{"class":406},[240,1325,410],{"class":287},[240,1327,413],{"class":250},[240,1329,425],{"class":287},[240,1331,428],{"class":254},[240,1333,431],{"class":250},[240,1335,434],{"class":254},[240,1337,1339,1342,1344],{"class":242,"line":1338},74,[240,1340,1341],{"class":287},"            div.style(_.row.gap(",[240,1343,443],{"class":246},[240,1345,1346],{"class":287},".px))(\n",[240,1348,1350],{"class":242,"line":1349},75,[240,1351,1352],{"class":287},"              radio\n",[240,1354,1356,1359,1362],{"class":242,"line":1355},76,[240,1357,1358],{"class":287},"                .onChange(_ ",[240,1360,1361],{"class":254},"=>",[240,1363,1364],{"class":287}," plan.set(value))\n",[240,1366,1368,1371,1374],{"class":242,"line":1367},77,[240,1369,1370],{"class":287},"                .checked(plan.map(_ ",[240,1372,1373],{"class":254},"==",[240,1375,1376],{"class":287}," value)),\n",[240,1378,1380],{"class":242,"line":1379},78,[240,1381,1382],{"class":287},"              span(label),\n",[240,1384,1386],{"class":242,"line":1385},79,[240,1387,1388],{"class":287},"            )\n",[240,1390,1392,1395],{"class":242,"line":1391},80,[240,1393,1394],{"class":287},"          div.onKeyDown ",[240,1396,1397],{"class":254},"{\n",[240,1399,1401,1404,1407,1409,1412,1414,1417,1420,1422],{"class":242,"line":1400},81,[240,1402,1403],{"class":523},"            case",[240,1405,1406],{"class":250}," KeyboardEvent",[240,1408,403],{"class":287},[240,1410,1411],{"class":250},"Keyboard",[240,1413,255],{"class":287},[240,1415,1416],{"class":250},"Escape",[240,1418,1419],{"class":287},", _, _) ",[240,1421,1361],{"class":254},[240,1423,1424],{"class":287}," quit\n",[240,1426,1428,1430,1433,1435],{"class":242,"line":1427},82,[240,1429,1403],{"class":523},[240,1431,1432],{"class":287}," _                                    ",[240,1434,1361],{"class":254},[240,1436,1141],{"class":287},[240,1438,1440,1443],{"class":242,"line":1439},83,[240,1441,1442],{"class":254},"          }",[240,1444,1445],{"class":287},"(\n",[240,1447,1449,1452,1454,1457,1459],{"class":242,"line":1448},84,[240,1450,1451],{"class":287},"            h1(",[240,1453,576],{"class":254},[240,1455,1456],{"class":579},"Sign up",[240,1458,576],{"class":254},[240,1460,1461],{"class":287},"),\n",[240,1463,1465],{"class":242,"line":1464},85,[240,1466,1467],{"class":287},"            form.onSubmit(submit)(\n",[240,1469,1471,1474,1476,1479,1481,1484,1486,1489,1491,1494,1497],{"class":242,"line":1470},86,[240,1472,1473],{"class":287},"              field(",[240,1475,576],{"class":254},[240,1477,1478],{"class":579},"Name",[240,1480,576],{"class":254},[240,1482,1483],{"class":287},", input.value(name).placeholder(",[240,1485,576],{"class":254},[240,1487,1488],{"class":579},"Ada",[240,1490,576],{"class":254},[240,1492,1493],{"class":287},").maxLength(",[240,1495,1496],{"class":246},"20",[240,1498,1499],{"class":287},")),\n",[240,1501,1503,1505,1507,1510,1512],{"class":242,"line":1502},87,[240,1504,1473],{"class":287},[240,1506,576],{"class":254},[240,1508,1509],{"class":579},"Secret",[240,1511,576],{"class":254},[240,1513,1514],{"class":287},", passwordInput.value(secret)),\n",[240,1516,1518,1520,1522,1525,1527,1530,1533,1536,1539,1542,1544],{"class":242,"line":1517},88,[240,1519,1473],{"class":287},[240,1521,576],{"class":254},[240,1523,1524],{"class":579},"Age",[240,1526,576],{"class":254},[240,1528,1529],{"class":287},", numberInput.value(age).min(",[240,1531,1532],{"class":246},"0",[240,1534,1535],{"class":287},").max(",[240,1537,1538],{"class":246},"130",[240,1540,1541],{"class":287},").step(",[240,1543,443],{"class":246},[240,1545,1499],{"class":287},[240,1547,1549,1551,1553,1556,1558,1561,1563,1565,1568,1570,1573],{"class":242,"line":1548},89,[240,1550,1473],{"class":287},[240,1552,576],{"class":254},[240,1554,1555],{"class":579},"Volume",[240,1557,576],{"class":254},[240,1559,1560],{"class":287},", rangeInput.value(volume).min(",[240,1562,1532],{"class":246},[240,1564,1535],{"class":287},[240,1566,1567],{"class":246},"100",[240,1569,1541],{"class":287},[240,1571,1572],{"class":246},"5",[240,1574,1499],{"class":287},[240,1576,1578],{"class":242,"line":1577},90,[240,1579,1580],{"class":287},"              field(\n",[240,1582,1584,1587,1590,1592],{"class":242,"line":1583},91,[240,1585,1586],{"class":254},"                \"",[240,1588,1589],{"class":579},"Mail",[240,1591,576],{"class":254},[240,1593,1126],{"class":287},[240,1595,1597],{"class":242,"line":1596},92,[240,1598,1599],{"class":287},"                fragment(\n",[240,1601,1603],{"class":242,"line":1602},93,[240,1604,1605],{"class":287},"                  checkbox.checked(news),\n",[240,1607,1609,1612,1614,1616,1618],{"class":242,"line":1608},94,[240,1610,1611],{"class":287},"                  span(",[240,1613,576],{"class":254},[240,1615,1041],{"class":579},[240,1617,576],{"class":254},[240,1619,1461],{"class":287},[240,1621,1623],{"class":242,"line":1622},95,[240,1624,1625],{"class":287},"                  checkbox.checked(updates),\n",[240,1627,1629,1631,1633,1635,1637],{"class":242,"line":1628},96,[240,1630,1611],{"class":287},[240,1632,576],{"class":254},[240,1634,1070],{"class":579},[240,1636,576],{"class":254},[240,1638,1461],{"class":287},[240,1640,1642],{"class":242,"line":1641},97,[240,1643,1644],{"class":287},"                ),\n",[240,1646,1648],{"class":242,"line":1647},98,[240,1649,1650],{"class":287},"              ),\n",[240,1652,1654],{"class":242,"line":1653},99,[240,1655,1580],{"class":287},[240,1657,1659,1661,1664,1666],{"class":242,"line":1658},100,[240,1660,1586],{"class":254},[240,1662,1663],{"class":579},"Plan",[240,1665,576],{"class":254},[240,1667,1126],{"class":287},[240,1669,1671,1674,1676,1678,1680,1682,1684,1687,1689,1692,1694,1697,1699,1701,1703,1706,1708],{"class":242,"line":1670},101,[240,1672,1673],{"class":287},"                fragment(choice(",[240,1675,576],{"class":254},[240,1677,652],{"class":579},[240,1679,576],{"class":254},[240,1681,294],{"class":287},[240,1683,576],{"class":254},[240,1685,1686],{"class":579},"Free",[240,1688,576],{"class":254},[240,1690,1691],{"class":287},"), choice(",[240,1693,576],{"class":254},[240,1695,1696],{"class":579},"pro",[240,1698,576],{"class":254},[240,1700,294],{"class":287},[240,1702,576],{"class":254},[240,1704,1705],{"class":579},"Pro",[240,1707,576],{"class":254},[240,1709,1499],{"class":287},[240,1711,1713],{"class":242,"line":1712},102,[240,1714,1650],{"class":287},[240,1716,1718],{"class":242,"line":1717},103,[240,1719,1580],{"class":287},[240,1721,1723,1725,1728,1730],{"class":242,"line":1722},104,[240,1724,1586],{"class":254},[240,1726,1727],{"class":579},"Colour",[240,1729,576],{"class":254},[240,1731,1126],{"class":287},[240,1733,1735],{"class":242,"line":1734},105,[240,1736,1737],{"class":287},"                select.value(colour)(\n",[240,1739,1741,1744,1746,1748,1750,1753,1755,1758,1760],{"class":242,"line":1740},106,[240,1742,1743],{"class":287},"                  option.value(",[240,1745,576],{"class":254},[240,1747,673],{"class":579},[240,1749,576],{"class":254},[240,1751,1752],{"class":287},")(",[240,1754,576],{"class":254},[240,1756,1757],{"class":579},"Blue",[240,1759,576],{"class":254},[240,1761,1461],{"class":287},[240,1763,1765,1767,1769,1772,1774,1776,1778,1781,1783],{"class":242,"line":1764},107,[240,1766,1743],{"class":287},[240,1768,576],{"class":254},[240,1770,1771],{"class":579},"green",[240,1773,576],{"class":254},[240,1775,1752],{"class":287},[240,1777,576],{"class":254},[240,1779,1780],{"class":579},"Green",[240,1782,576],{"class":254},[240,1784,1461],{"class":287},[240,1786,1788],{"class":242,"line":1787},108,[240,1789,1644],{"class":287},[240,1791,1793],{"class":242,"line":1792},109,[240,1794,1650],{"class":287},[240,1796,1798],{"class":242,"line":1797},110,[240,1799,1580],{"class":287},[240,1801,1803,1805,1808,1810],{"class":242,"line":1802},111,[240,1804,1586],{"class":254},[240,1806,1807],{"class":579},"Size",[240,1809,576],{"class":254},[240,1811,1126],{"class":287},[240,1813,1815,1818,1820,1823,1825,1828,1831,1834,1836,1838,1840,1842,1844,1846,1848,1851,1853,1855,1857,1860,1862,1864,1866,1869,1871],{"class":242,"line":1814},112,[240,1816,1817],{"class":287},"                dropdown(",[240,1819,576],{"class":254},[240,1821,1822],{"class":579},"s",[240,1824,576],{"class":254},[240,1826,1827],{"class":254}," ->",[240,1829,1830],{"class":254}," \"",[240,1832,1833],{"class":579},"Small",[240,1835,576],{"class":254},[240,1837,294],{"class":287},[240,1839,576],{"class":254},[240,1841,694],{"class":579},[240,1843,576],{"class":254},[240,1845,1827],{"class":254},[240,1847,1830],{"class":254},[240,1849,1850],{"class":579},"Medium",[240,1852,576],{"class":254},[240,1854,294],{"class":287},[240,1856,576],{"class":254},[240,1858,1859],{"class":579},"l",[240,1861,576],{"class":254},[240,1863,1827],{"class":254},[240,1865,1830],{"class":254},[240,1867,1868],{"class":579},"Large",[240,1870,576],{"class":254},[240,1872,545],{"class":287},[240,1874,1876],{"class":242,"line":1875},113,[240,1877,1878],{"class":287},"                  .value(size),\n",[240,1880,1882],{"class":242,"line":1881},114,[240,1883,1650],{"class":287},[240,1885,1887],{"class":242,"line":1886},115,[240,1888,1580],{"class":287},[240,1890,1892,1894,1897,1899],{"class":242,"line":1891},116,[240,1893,1586],{"class":254},[240,1895,1896],{"class":579},"Message",[240,1898,576],{"class":254},[240,1900,1126],{"class":287},[240,1902,1904,1907,1909,1912,1915],{"class":242,"line":1903},117,[240,1905,1906],{"class":287},"                textarea.value(message).style(_.width(",[240,1908,580],{"class":246},[240,1910,1911],{"class":287},".px).height(",[240,1913,1914],{"class":246},"3",[240,1916,458],{"class":287},[240,1918,1920],{"class":242,"line":1919},118,[240,1921,1650],{"class":287},[240,1923,1925,1927,1929,1932,1934,1937,1939,1942,1944,1947,1949],{"class":242,"line":1924},119,[240,1926,1473],{"class":287},[240,1928,576],{"class":254},[240,1930,1931],{"class":579},"Account",[240,1933,576],{"class":254},[240,1935,1936],{"class":287},", input.value(",[240,1938,576],{"class":254},[240,1940,1941],{"class":579},"ada-01",[240,1943,576],{"class":254},[240,1945,1946],{"class":287},").readOnly(",[240,1948,616],{"class":254},[240,1950,1499],{"class":287},[240,1952,1954,1956,1958,1961,1963,1965,1967,1970,1972,1975,1977],{"class":242,"line":1953},120,[240,1955,1473],{"class":287},[240,1957,576],{"class":254},[240,1959,1960],{"class":579},"Team",[240,1962,576],{"class":254},[240,1964,1936],{"class":287},[240,1966,576],{"class":254},[240,1968,1969],{"class":579},"core",[240,1971,576],{"class":254},[240,1973,1974],{"class":287},").disabled(",[240,1976,616],{"class":254},[240,1978,1499],{"class":287},[240,1980,1982,1985,1987],{"class":242,"line":1981},121,[240,1983,1984],{"class":287},"              div.style(_.row.gap(",[240,1986,443],{"class":246},[240,1988,1346],{"class":287},[240,1990,1992,1995,1997,2000,2002],{"class":242,"line":1991},122,[240,1993,1994],{"class":287},"                button(",[240,1996,576],{"class":254},[240,1998,1999],{"class":579},"Submit",[240,2001,576],{"class":254},[240,2003,1461],{"class":287},[240,2005,2007],{"class":242,"line":2006},123,[240,2008,2009],{"class":318},"                \u002F\u002F kyo-ui has no button type: a button in a form submits it,\n",[240,2011,2013],{"class":242,"line":2012},124,[240,2014,2015],{"class":318},"                \u002F\u002F so Reset stops its click before the form\n",[240,2017,2019,2021,2023,2026,2028,2031,2033],{"class":242,"line":2018},125,[240,2020,1994],{"class":287},[240,2022,576],{"class":254},[240,2024,2025],{"class":579},"Reset",[240,2027,576],{"class":254},[240,2029,2030],{"class":287},").onClick(reset).stopPropagation(",[240,2032,616],{"class":254},[240,2034,1461],{"class":287},[240,2036,2038],{"class":242,"line":2037},126,[240,2039,1650],{"class":287},[240,2041,2043],{"class":242,"line":2042},127,[240,2044,2045],{"class":287},"            ),\n",[240,2047,2049,2052,2054,2057,2059],{"class":242,"line":2048},128,[240,2050,2051],{"class":287},"            p(result).id(",[240,2053,576],{"class":254},[240,2055,2056],{"class":579},"result",[240,2058,576],{"class":254},[240,2060,1461],{"class":287},[240,2062,2064],{"class":242,"line":2063},129,[240,2065,2066],{"class":287},"          )\n",[240,2068,2070,2073],{"class":242,"line":2069},130,[240,2071,2072],{"class":254},"end",[240,2074,2075],{"class":250}," Forms\n",[240,2077,2079],{"class":242,"line":2078},131,[240,2080,312],{"emptyLinePlaceholder":311},[240,2082,2084],{"class":242,"line":2083},132,[240,2085,2086],{"class":318},"\u002F** Runs the form in the real terminal: `examples\u002Ftarget\u002Fbin\u002Fforms`. *\u002F\n",[240,2088,2090,2092,2095,2098,2101],{"class":242,"line":2089},133,[240,2091,361],{"class":254},[240,2093,2094],{"class":250}," FormsApp",[240,2096,2097],{"class":254}," extends",[240,2099,2100],{"class":250}," TuiApp",[240,2102,367],{"class":254},[240,2104,2106,2108,2110,2112,2114,2116,2119,2122,2125,2128,2131,2134,2136,2139,2141],{"class":242,"line":2105},134,[240,2107,396],{"class":254},[240,2109,489],{"class":399},[240,2111,428],{"class":254},[240,2113,431],{"class":250},[240,2115,502],{"class":254},[240,2117,2118],{"class":287}," (",[240,2120,2121],{"class":250},"Async",[240,2123,2124],{"class":254}," &",[240,2126,2127],{"class":250}," Scope",[240,2129,2130],{"class":287},") ",[240,2132,2133],{"class":254},"=",[240,2135,364],{"class":250},[240,2137,2138],{"class":287},".ui(",[240,2140,291],{"class":250},[240,2142,2143],{"class":287},".quit)\n",[2145,2146],"cast",{"src":2147},"\u002Fcasts\u002Fforms.cast",[1083,2149,2150,2151,2154,2155,2158,2159,2161,2162,2165,2166,2169],{},"The inputs are plain kyo-ui elements with their ",[237,2152,2153],{},".value(ref)"," and ",[237,2156,2157],{},".checked(ref)"," bindings. The only tui4s name is ",[237,2160,302],{},". Each input writes its bound ref before its ",[237,2163,2164],{},"onInput"," or ",[237,2167,2168],{},"onChange"," runs. Tab and Shift-Tab move between the inputs. Enter in a field submits the form.",[2171,2172,2174],"h2",{"id":2173},"the-keys-of-each-input","The keys of each input",[2176,2177,2178,2191],"table",{},[2179,2180,2181],"thead",{},[2182,2183,2184,2188],"tr",{},[2185,2186,2187],"th",{},"Input",[2185,2189,2190],{},"Keys",[2192,2193,2194,2219,2232,2252,2262,2279,2296,2309],"tbody",{},[2182,2195,2196,2213],{},[2197,2198,2199,294,2201,294,2204,294,2207,294,2210],"td",{},[237,2200,418],{},[237,2202,2203],{},"emailInput",[237,2205,2206],{},"telInput",[237,2208,2209],{},"urlInput",[237,2211,2212],{},"searchInput",[2197,2214,2215,2216,2218],{},"Type, Backspace, Delete, ArrowLeft, ArrowRight, Home, End, Ctrl-A, Ctrl-E, Ctrl-U, Ctrl-K, Ctrl-W, by grapheme clusters. A paste is one edit. A line break in a paste becomes a space. Enter runs ",[237,2217,2168],{}," and submits the form.",[2182,2220,2221,2226],{},[2197,2222,2223],{},[237,2224,2225],{},"passwordInput",[2197,2227,2228,2229,2231],{},"As ",[237,2230,418],{},". Each grapheme cluster shows as one \"•\". The text does not go to the screen.",[2182,2233,2234,2239],{},[2197,2235,2236],{},[237,2237,2238],{},"numberInput",[2197,2240,2241,2242,2245,2246,2154,2249,255],{},"Digits, one minus sign first and one decimal point. ArrowUp and ArrowDown change the value by ",[237,2243,2244],{},"step"," (1 when none), between ",[237,2247,2248],{},"min",[237,2250,2251],{},"max",[2182,2253,2254,2259],{},[2197,2255,2256],{},[237,2257,2258],{},"textarea",[2197,2260,2261],{},"See the next table.",[2182,2263,2264,2269],{},[2197,2265,2266],{},[237,2267,2268],{},"rangeInput",[2197,2270,2271,2272,2274,2275,2154,2277,255],{},"ArrowLeft and ArrowDown, ArrowRight and ArrowUp move by ",[237,2273,2244],{},". PageDown and PageUp move by 10 steps. Home and End go to ",[237,2276,2248],{},[237,2278,2251],{},[2182,2280,2281,2289],{},[2197,2282,2283,294,2286],{},[237,2284,2285],{},"checkbox",[237,2287,2288],{},"radio",[2197,2290,2291,2292,2295],{},"Space and Enter toggle a checkbox and check a radio. A group of radios is one ref of the app (the ",[237,2293,2294],{},"plan"," of the example).",[2182,2297,2298,2306],{},[2197,2299,2300,294,2303],{},[237,2301,2302],{},"select",[237,2304,2305],{},"dropdown",[2197,2307,2308],{},"Space, Enter, ArrowDown and ArrowUp go to the next or the previous option. Enter does not submit the form.",[2182,2310,2311,2316],{},[2197,2312,2313],{},[237,2314,2315],{},"button",[2197,2317,2318],{},"Space and Enter press it: a click that submits the form that holds it.",[2171,2320,2322],{"id":2321},"the-keys-of-a-textarea","The keys of a textarea",[1083,2324,2325,2326,2329],{},"A textarea edits lines that wrap at the spaces, by cells. Its height is the ",[237,2327,2328],{},"height"," of its style (3 rows when none).",[2176,2331,2332,2342],{},[2179,2333,2334],{},[2182,2335,2336,2339],{},[2185,2337,2338],{},"Key",[2185,2340,2341],{},"What it does",[2192,2343,2344,2352,2360,2368,2376,2384,2392],{},[2182,2345,2346,2349],{},[2197,2347,2348],{},"ArrowUp, ArrowDown",[2197,2350,2351],{},"Moves one line and keeps the column.",[2182,2353,2354,2357],{},[2197,2355,2356],{},"PageUp, PageDown",[2197,2358,2359],{},"Moves by the height of the textarea.",[2182,2361,2362,2365],{},[2197,2363,2364],{},"Home, End",[2197,2366,2367],{},"Goes to the start or the end of the line.",[2182,2369,2370,2373],{},[2197,2371,2372],{},"Ctrl-A, Ctrl-E",[2197,2374,2375],{},"Goes to the start or the end of the text line between two line breaks.",[2182,2377,2378,2381],{},[2197,2379,2380],{},"Alt-Enter, Ctrl-J",[2197,2382,2383],{},"Inserts a line break. Shift-Enter does too, when the terminal reports Shift with Enter.",[2182,2385,2386,2389],{},[2197,2387,2388],{},"Enter",[2197,2390,2391],{},"Submits the form that holds the textarea. Outside a form, it inserts a line break.",[2182,2393,2394,2397],{},[2197,2395,2396],{},"A paste",[2197,2398,2399],{},"Keeps its line breaks.",[1083,2401,2402,2403,2405],{},"When the focus leaves the textarea after an edit that changed its text, ",[237,2404,2168],{}," runs with the text.",[2171,2407,2409],{"id":2408},"limits","Limits",[2411,2412,2413,2424,2438,2441,2444],"ul",{},[2414,2415,2416,2419,2420,2423],"li",{},[237,2417,2418],{},"readOnly(true)"," keeps the focus and the moves of the caret, and stops each edit. ",[237,2421,2422],{},"disabled(true)"," takes the input out of the Tab order and dims it.",[2414,2425,2426,2427,2429,2430,2433,2434,2437],{},"kyo-ui has no ",[237,2428,302],{}," attribute. ",[237,2431,2432],{},"maxLength(n)"," from ",[237,2435,2436],{},"tui4s"," limits the grapheme clusters that the keys and a paste give. A browser does not read it.",[2414,2439,2440],{},"The terminal cursor shows the caret of the focused text input or textarea.",[2414,2442,2443],{},"The date, time, colour and file inputs show an empty box. The log of the run has one warning for each of them.",[2414,2445,2446],{},"A typed character outside the Basic Multilingual Plane (an emoji) arrives wrong: jatatui 0.31.0 cuts it to 16 bits. A paste keeps it.",[2448,2449,2450],"style",{},"html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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 .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":261,"depth":261,"links":2452},[2453,2454,2455],{"id":2173,"depth":261,"text":2174},{"id":2321,"depth":261,"text":2322},{"id":2408,"depth":261,"text":2409},"The native inputs of kyo-ui in the terminal, their bindings and their keys.","md",null,{},{"icon":41},{"title":38,"description":2456},"xjRrbgeak3j7wUa0P-wD6AGdZG9nWiBH_tqFnLsf_6I",[2464,2466],{"title":33,"path":34,"stem":35,"description":2465,"icon":36,"children":-1},"Two styles of components, hooks and a class, and how long their state lives.",{"title":43,"path":44,"stem":45,"description":2467,"icon":46,"children":-1},"An element with overflow is a viewport that clips and scrolls; the text flow, the wrap and the ellipsis.",1792528754546]