From 637d07400ea3da9f98a871014e49b9f265c71d93 Mon Sep 17 00:00:00 2001 From: Orkuncakilkaya Date: Thu, 24 Sep 2026 16:17:25 +0300 Subject: [PATCH] feat(ui): ludic.ui grows toward HTML, CSS and React (Phase 0.U1-U4) - Natives: ui_native(tag, measure, draw) makes an element the program draws itself; ui_fire runs its on- with event.value. input, select and textarea have simple defaults. - React: - keyed , , context through components, ; - named slots, default props on ; - on-mount / on-unmount; - inline text inside text elements. - CSS: - custom properties and var(); - position relative/absolute/fixed with insets and z-index; - em/rem/vw/vh and @media; - wrapping text and ellipsis, overflow; - + and ~ combinators, :nth-child(an+b), :checked, :active. - Developing: errors with file:line, ui_errors(), ui_reload() keeping state, and an inspector-style ui_dump. - view fields infer the type of a literal or a named function's result. Co-Authored-By: Claude Opus 5.5 --- LANGUAGE.md | 31 + changes/defaults-views-templates.md | 9 + examples/library/ui_css.ludic | 26 + examples/library/ui_react.ludic | 59 + examples/library/ui_reload.ludic | 27 + packages/ludic.ui/attr.ludic | 15 +- packages/ludic.ui/attr_box.ludic | 6 +- packages/ludic.ui/attr_place.ludic | 23 + packages/ludic.ui/build.ludic | 42 +- packages/ludic.ui/build_more.ludic | 41 + packages/ludic.ui/cascade.ludic | 11 +- packages/ludic.ui/draw.ludic | 63 +- packages/ludic.ui/dump.ludic | 36 + packages/ludic.ui/elem.ludic | 18 +- packages/ludic.ui/env.ludic | 30 +- packages/ludic.ui/forms.ludic | 49 + packages/ludic.ui/frame.ludic | 33 +- packages/ludic.ui/index.ludic | 10 + packages/ludic.ui/layout.ludic | 37 +- packages/ludic.ui/layout_run.ludic | 40 +- packages/ludic.ui/layout_text.ludic | 55 + packages/ludic.ui/layout_wrap.ludic | 57 +- packages/ludic.ui/lib.ludic | 10 +- packages/ludic.ui/life.ludic | 64 + packages/ludic.ui/link.ludic | 6 +- packages/ludic.ui/media.ludic | 36 + packages/ludic.ui/native.ludic | 77 + packages/ludic.ui/node.ludic | 19 +- packages/ludic.ui/reload.ludic | 27 + packages/ludic.ui/select.ludic | 10 +- packages/ludic.ui/select_match.ludic | 39 +- packages/ludic.ui/style.ludic | 18 +- packages/ludic.ui/tpl.ludic | 21 +- packages/ludic.ui/units.ludic | 88 + runtime/native/xml.ludic | 3 + selfhost/frontend/view_finish.ludic | 10 +- selfhost/ludicc.seed.ll | 40828 +++++++++++++------------ selfhost/ludicc.win.seed.ll | 40828 +++++++++++++------------ tools/ludic-cli/test.ludic | 5 +- 39 files changed, 42012 insertions(+), 40795 deletions(-) create mode 100644 examples/library/ui_css.ludic create mode 100644 examples/library/ui_react.ludic create mode 100644 examples/library/ui_reload.ludic create mode 100644 packages/ludic.ui/attr_place.ludic create mode 100644 packages/ludic.ui/build_more.ludic create mode 100644 packages/ludic.ui/dump.ludic create mode 100644 packages/ludic.ui/forms.ludic create mode 100644 packages/ludic.ui/layout_text.ludic create mode 100644 packages/ludic.ui/life.ludic create mode 100644 packages/ludic.ui/media.ludic create mode 100644 packages/ludic.ui/native.ludic create mode 100644 packages/ludic.ui/reload.ludic create mode 100644 packages/ludic.ui/units.ludic diff --git a/LANGUAGE.md b/LANGUAGE.md index e5852cd4..dbdc76dc 100644 --- a/LANGUAGE.md +++ b/LANGUAGE.md @@ -388,6 +388,37 @@ string. - A file's cascade is its imports' rules, then its own. `` brings a stylesheet in, and one stylesheet can `@import` another, so a look is a file others can use. A library's components keep the styles of the file they were written in. +- **More CSS.** + - Custom properties: `--accent: #fc0` on any element or `:root`, read with `var(--accent)` or + `var(--accent, gold)`, and inherited by what is inside. + - `position: relative|absolute|fixed` with `top`, `right`, `bottom`, `left` and `inset`, and + `z-index`. An absolute element sits in its parent's box, a fixed one in the screen's, and + neither takes room in the flow. + - Units: `em`, `rem`, `vw` and `vh`. + - `@media (min-width: ..) and (max-height: ..) { ... }`. + - Text wraps between words to fit its box; `white-space: nowrap` keeps one line and + `text-overflow: ellipsis` cuts it. + - `overflow: auto|scroll|hidden` makes a box scroll. + - Selectors also take `+` and `~`, `:nth-child(2n+1)`, `:checked` and `:active`. +- **More React.** + - `` keeps an item's state when the list is reordered. + - `` names a value for the siblings after it. + - `` gives a value to everything inside, components included. + - `` groups without a box. + - `` takes the user's `