[{"data":1,"prerenderedAt":470},["ShallowReactive",2],{"navigation_docs":3,"-decisions-0011-web-target-standalone-scalajs-and-one-theme":223,"-decisions-0011-web-target-standalone-scalajs-and-one-theme-surround":465},[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":155,"body":225,"description":458,"extension":459,"links":460,"meta":461,"navigation":462,"path":156,"seo":463,"stem":157,"__hash__":464},"docs\u002F4.decisions\u002F0011-web-target-standalone-scalajs-and-one-theme.md",{"type":226,"value":227,"toc":447},"minimark",[228,233,237,241,244,248,271,275,350,354,391,395,428,432],[229,230,232],"h2",{"id":231},"status","Status",[234,235,236],"p",{},"Accepted",[229,238,240],{"id":239},"date","Date",[234,242,243],{},"2026-10-17 (D5 as changed by the user, D8). Landed on 2026-10-19 (L4).",[229,245,247],{"id":246},"context","Context",[249,250,251,255,258,261,264],"ul",{},[252,253,254],"li",{},"The user asked for \"a small Flutter\": write the app once, build a terminal app and a web app.",[252,256,257],{},"A JVM spike ran one kyo-ui value in the terminal and in headless Chromium at the same time, with live shared state (23 of 24 checks). The kyo-ui WebSocket accepts any Origin and has no auth hook (cross-site WebSocket hijacking).",[252,259,260],{},"A Scala.js spike compiled one source file in the JVM build and in the JS build; a headless tui4s test and a browser test both passed.",[252,262,263],{},"The user then said: the targets must NOT communicate (\"I just want a flutter style paradigm of coding once and generating for multiple platforms\").",[252,265,266,270],{},[267,268,269],"code",{},"px"," is one cell in tui4s and one CSS pixel in a browser. The default Scala.js bundle is 33 MB (2.9 MB gzip); the CLDR locale database is 61% of it.",[229,272,274],{"id":273},"decision","Decision",[249,276,277,292,318,321,332,347],{},[252,278,279,280,283,284,287,288,291],{},"The web target is a standalone Scala.js app (",[267,281,282],{},"examples\u002Fweb",", project ",[267,285,286],{},"assistantWeb",") built from the shared module of the assistant (a ",[267,289,290],{},"crossProject"," JVM+JS with kyo-ui, tui4s-use and tui4s-widgets only). It is static files: one page and one script. There is no server.",[252,293,294,295,298,299,302,303,302,306,309,310,313,314,317],{},"Platform services are traits with one interpreter per platform, given through layers. The browser has ",[267,296,297],{},"FetchHttp"," (streamed reader, ",[267,300,301],{},"AbortController",", ",[267,304,305],{},"redirect=error",[267,307,308],{},"credentials=omit",", no referrer), ",[267,311,312],{},"BrowserKeys"," over ",[267,315,316],{},"localStorage",", and a console log.",[252,319,320],{},"The user's own key stays in the browser (one entry per provider, masked, with Forget and a warning). The page policy (CSP) allows only the two provider hosts. The fake provider serves the docs demos.",[252,322,323,324,327,328,331],{},"One ",[267,325,326],{},"Theme"," value has two looks (terminal, web). It renders to a palette of colour variables (the terminal) and to one full ",[267,329,330],{},"Stylesheet"," (the web). The assistant has a look switch.",[252,333,334,335,338,339,342,343,346],{},"A ",[267,336,337],{},"Surface"," service gives the units: ",[267,340,341],{},"rows(n)"," and ",[267,344,345],{},"cols(n)"," are cells in a terminal and lines or characters on the web; the web has its own Alt chords.",[252,348,349],{},"The bundle uses the minimal en-US locale database: 9.74 MB (1.20 MB gzip); it mounts in about 0.9 s.",[229,351,353],{"id":352},"alternatives-considered","Alternatives considered",[249,355,356,363,369,375,381],{},[252,357,358,362],{},[359,360,361],"strong",{},"A server-rendered kyo-ui app over its WebSocket runner"," (the JVM spike). Rejected by the user: the targets must not communicate. It also needs an Origin check that kyo-ui RC7 does not have.",[252,364,365,368],{},[359,366,367],{},"A small proxy server that holds the key"," (an option of D5). Not chosen: the user approved the recommendation (the user's own key in the browser). The reason against the proxy is not recorded.",[252,370,371,374],{},[359,372,373],{},"The fake provider only on the web."," Kept for the demos, but not as the only provider.",[252,376,377,380],{},[359,378,379],{},"One look only"," (native web or terminal-like). D8 chose both from one value.",[252,382,383,386,387,390],{},[359,384,385],{},"A shared source directory for two builds"," (the spike). A hack; the repository uses ",[267,388,389],{},"sbt-crossproject",".",[229,392,394],{"id":393},"consequences","Consequences",[249,396,397,400,403,410,422],{},[252,398,399],{},"Good: the same domain, store and UI code run in the terminal and in the browser, and each target runs alone.",[252,401,402],{},"Good: the key never leaves the browser except to its provider.",[252,404,405,406,409],{},"Bad: the key is readable by extensions and other pages of the same origin. Anthropic needs the header ",[267,407,408],{},"anthropic-dangerous-direct-browser-access",". The README says so.",[252,411,412,413,416,417,421],{},"Bad: kyo-ui bugs on the web force workarounds: the composer is outside a form (any Enter submits), the key field is not bound (a bound value goes into the DOM ",[267,414,415],{},"value"," attribute), and Esc does not close the rename prompt while its field has focus (",[418,419,420],"a",{"href":188},"ADR 0019",").",[252,423,424,425,421],{},"Bad: the widgets have no unit scale for the web (",[418,426,427],{"href":148},"ADR 0009",[229,429,431],{"id":430},"references","References",[249,433,434,437],{},[252,435,436],{},"Roadmap: 2.1, 2.2, D5, D8. Decision log: fifteenth round. Handoff: L4.",[252,438,439,440,302,443,446],{},"README: \"The same app on the web\". Scripts: ",[267,441,442],{},"scripts\u002Fweb-build.sh",[267,444,445],{},"scripts\u002Fweb-smoke.mjs"," (not in CI).",{"title":448,"searchDepth":449,"depth":449,"links":450},"",2,[451,452,453,454,455,456,457],{"id":231,"depth":449,"text":232},{"id":239,"depth":449,"text":240},{"id":246,"depth":449,"text":247},{"id":273,"depth":449,"text":274},{"id":352,"depth":449,"text":353},{"id":393,"depth":449,"text":394},{"id":430,"depth":449,"text":431},"The web build of the assistant is a static Scala.js app from the shared module, with no server and no link to the terminal app; one Theme value renders both looks to one Stylesheet.","md",null,{},true,{"title":155,"description":458},"Ri54PHkjtI0c_SwIxRo6neOhkyL9zOPe2jfN8Aw8fcQ",[466,468],{"title":151,"path":152,"stem":153,"description":467,"children":-1},"One flagship example, an AI chat assistant, shows how to structure a real tui4s app: a pure domain, services as traits with interpreters, one store, Kyo layers and errors as values.",{"title":159,"path":160,"stem":161,"description":469,"children":-1},"Every public API ships with a compiled example; README and docs code blocks are regions of tested files; the docs site is Nuxt Docus on Vercel; work lands on one branch with CI on demand.",1792528756782]