playground · KofJS no browser · 100% estático (GitHub Pages)
Playground Kof
Escreva Kof à esquerda, veja a saída à direita — execução via KofJS (kof-runtime.mjs browser-safe, sem servidor). Abaixo, os 11 módulos de kof-ui-widgets com código ao lado do preview real (mesma estética Dracula do runtime).
Kof é compilado (JVM/Native/KofJS). No playground estático o compilador oficial não está no bundle; a execução é subset JS fiel ao KofJS para println, coleções, kof.ui e 11 intenções. Gaps reportam DB001/CONC001 igual ao kof check.
Dois quadrados: código → saída
Copie, edite e clique em Executar. O runtime é o mesmo do KofJS (console.log → painel).
/* clique em Executar */$ kof run app.kf --target js # local: GraalJS embarcado$ kof build app.kf --target js # gera Default.mjs + kof-runtime.mjsOficial é Java; aqui o println e a lógica pura são interpretados no browser com a mesma semântica do backend JS. Para fidelidade 100% com kof check, rode local: bin/kof check app.kf.
Cada intenção com nome, código ao lado do que renderiza
Copiado direto de github.com/KofLang/kof-ui-widgets/src/*.kf (ordem numérica). Preview usa a mesma estética e helpers puros do runtime — sem CSS, sem DOM ids.
// 00-core.kf — fundação: App, tema, e helpers puros de texto/número.//// Tudo aqui é composição dos primitivos do kof.ui ou funções puras.// As funções puras são o coração testável da biblioteca: cada componente// interativo delega a transição de estado para uma delas.// ---- App --------------------------------------------------------------------// "abra o app" — janela pronta: tema escuro do Kof, tamanho civilizado.App(String title): Int { var w = Window(title) w.size(960, 640) w.theme = Theme.dark() Int wh = w return wh}// ---- Cores semânticas (atalhos do tema escuro) ------------------------------SurfaceColor(): Int { Int c = Theme.dark().surface() return c}ErrorColor(): Int { Int c = Theme.dark().error() return c}PrimaryColor(): Int { Int c = Theme.dark().primary() return c}TextColor(): Int { Int c = Theme.dark().text() return c}// ---- Texto puro -------------------------------------------------------------// repete `piece` n vezes — base de barras, skeletons e grids.repeat(String piece, Int n): String { var out = "" var i = 0 while (i < n) { out = out + piece i = i + 1 } return out}// completa com espaços à direita até `width` (tabelas, colunas).padEnd(String s, Int width): String { var out = s while (out.length < width) { out = out + " " } return out}// completa com espaços à esquerda até `width` (números alinhados).padStart(String s, Int width): String { var out = s while (out.length < width) { out = " " + out } return out}// trunca com reticências quando passa de `width`.ellipsis(String s, Int width): String { if (s.length <= width) { return s } if (width < 2) { return substringN(s, 0, width) } return substringN(s, 0, width - 1) + "…"}// substring segura: corta nos limites, nunca estoura.substringN(String s, Int start, Int end): String { if (s.length == 0) { return "" } var a = clamp(start, 0, s.length) var b = clamp(end, 0, s.length) if (b <= a) { return "" } return s.substring(a, b)}// conta ocorrências de um caractere (um char = string de 1).countChar(String s, String ch): Int { var n = 0 var i = 0 while (i < s.length) { if (s.charAt(i) == ch.charAt(0)) { n = n + 1 } i = i + 1 } return n}// junta uma lista com separador (breadcrumbs, menus).join(List<String> parts, String sep): String { if (parts.size == 0) { return "" } var out = parts.get(0) var i = 1 while (i < parts.size) { out = out + sep + parts.get(i) i = i + 1 } return out}// ---- Números puros ------------------------------------------------------------clamp(Int v, Int min, Int max): Int { if (v < min) { return min } if (v > max) { return max } return v}// wrap-around: avança voltando ao início (carrosséis, relógios).wrapNext(Int i, Int n): Int { if (n <= 0) { return 0 } return (i + 1) % n}wrapPrev(Int i, Int n): Int { if (n <= 0) { return 0 } return (i - 1 + n) % n}Fundação: App (Window+Theme), cores semânticas e helpers puros repeat/pad/ellipsis.
De hello a dashboard — o mesmo app, vários mundos
Cada exemplo é cat src/*.kf + examples/*.kf → kof run --target js (scripts/build.sh). No Pages o preview é React fiel; o código é o oficial.
// hello.kf — o menor app com kof-ui-widgets//// scripts/run-example.sh hello//// ou, na mão:// cat src/kof-ui-widgets.kf examples/hello.kf > .build/hello.kf// kof run .build/hello.kf --target=jsmain() { var w = App("Olá") w.bind(Column(listOf( Heading("Olá, Kof"), Text("Este app é feito de intenções, não de mecanismos."), Badge("alpha") ))) w.show()}App + Heading + Text + Badge
Ver no GitHub →como rodar local com o oficial
git clone https://github.com/KofLang/kof-ui-widgets && cd kof-ui-widgetskof run "$(scripts/build.sh examples/dashboard.kf)" --target=js # webview nativokof run "$(scripts/build.sh examples/hello.kf)" --target=jvm # JVMO que o playground Pages faz e o que não faz
Faz (browser)
- println, vars, if/while/for, funções
- 11 intenções UI com preview fiel
- Funções puras (sparkline, pager, calendar)
Gap no JS
- kof.io → DB001 / FilePicker reporta erro no preview
- kof.db / kof.orm → ORM001
- spawn → CONC003 no JS
Oficial local
kof check app.kf e kof run --target js com GraalJS embarcado (SEM021, pkg, etc) — Pages é estático por design.
