feat(lang): L11 views and templates - the UI is markup, not code

A `view Name { field = x; function q(..); on e(..) }` declaration is the one bridge between a
program and its UI: it writes view_<name>() -> UiView, whose model is a Value of every field and
whose call runs a query or an event by name.

ludic.ui is a template runtime:
- HTML-shaped XML screens and components, loaded at run time;
- {expression} bindings, if/else/each, props, slots, per-instance state;
- on-press / onclick actions (event, set, emit);
- component libraries (export="true", <import src as>).

Styling:
- stylesheets in <style> or importable .lss files (@import);
- CSS selectors (#id, .class, [attr=v], descendant and > combinators, :hover, :disabled,
  :first-child, :last-child, :nth-child, :not) weighed by specificity;
- the box model and flex under CSS's property names.

Also:
- default parameters, and positional-then-named calls;
- Value gains a float kind;
- a function shadowing a runtime one is refused;
- an index is evaluated before the slice is read;
- runtime errors name the right file.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

examples/library/ui_flex.ludic

@@ -0,0 +1,25 @@
+# ui_flex.ludic — ludic.ui's flex layout and stylesheets without a renderer: grow shares the spare
+# room, justify spreads it, a row wraps, align stretches; a stylesheet file (which @imports another)
+# styles whoever imports it, a more specific rule wins, a bound class switches one on, and an attribute beats all.
+import "ludic.ui"
+program UiFlex {
+  numbers float
+  var picked: int = 1
+  view Tags {
+    picked = picked
+  }
+  const BASE: string = "/* base.lss - every text small */\ntext { size: 10 }\n"
+  const THEME: string = "/* theme.lss - the base, and a colour for what is on */\n@import \"base.lss\";\n.on { color: #ff0000 }\n"
+  const PAGE: string = "<ui>\n<import src='theme.lss'/>\n<style>\nrow.bar { gap: 10; pad: 5 }\ntext.big { size: {picked * 20} }\n</style>\n<screen name='flex' gap='8'>\n  <row class='bar' w='fill'>\n    <text grow='1'>a</text><text grow='3'>b</text>\n  </row>\n  <row w='fill' justify='between'><text>l</text><text>m</text><text>r</text></row>\n  <row w='200' wrap='true' gap='4'>\n    <each in='{range(6)}' as='i'><text w='60' class='{i == picked ? \"on\" : \"\"}'>t{i}</text></each>\n  </row>\n  <row h='40' align='stretch' w='fill'><col w='30' bg='#00ff00'/><text self='end' class='big' size='12'>x</text></row>\n</screen>\n</ui>\n"
+  entry {
+    ui_load_text(BASE, "ui/base.lss")
+    ui_load_text(THEME, "ui/theme.lss")
+    ui_load_text(PAGE, "ui/flex.xml")
+    let root: UiNode = ui_nodes("flex", view_tags())
+    ui_place(root, 0.0, 0.0, 400.0, 300.0)
+    let bar = root.children[0]
+    let wrap = root.children[2]
+    let tall = root.children[3]
+    print(`grow {int(bar.children[0].cw)}:{int(bar.children[1].cw)}; between at {int(root.children[1].children[1].x)}; wrap lines at {int(wrap.children[0].y)}, {int(wrap.children[3].y)}; red {wrap.children[1].fg}; stretched {int(tall.children[0].ch)}; own size {int(tall.children[1].rsize)}`)
+  }
+}

examples/library/ui_html.ludic

@@ -0,0 +1,28 @@
+# ui_html.ludic — ludic.ui read as HTML and CSS: HTML's elements with a browser's defaults, ids,
+# classes, style="...", hidden and disabled, onclick; selectors with ids, descendants, children,
+# attributes and pseudo-classes, weighed by specificity; CSS's own property names and the box model.
+import "ludic.ui"
+program UiHtml {
+  numbers float
+  var clicks: int = 0
+  view Page {
+    clicks = clicks
+    on clicked() { clicks += 1 }
+  }
+  const LOOK: string = "/* look.lss */\n.card { padding: 4 8 12 16; margin: 3; border: 2px solid #0000ff; width: 50% }\n#title { font-size: 40 }\nh1.big { font-size: 20 }\n.card p { color: #00ff00 }\nul > li { height: 30 }\nli:first-child { color: #ff0000 }\nli:nth-child(even) { color: #0000ff }\nli:last-child:not(.keep) { display: none }\n[kind=warn] { background-color: #ffff00 }\nbutton:disabled { opacity: 0.5 }\n"
+  const PAGE: string = "<ui>\n<import src='look.lss'/>\n<screen name='page'>\n  <h1 id='title' class='big'>Title</h1>\n  <div class='card'><p>inside</p><span kind='warn'>careful</span></div>\n  <p>outside</p>\n  <ul><li>one</li><li>two</li><li>three</li><li>gone</li></ul>\n  <hr/>\n  <p style='text-align: center; width: 200px'>mid</p>\n  <button disabled='{clicks > 0}' onclick='clicked()'>Go</button>\n  <p hidden='true'>never</p>\n</screen>\n</ui>\n"
+  entry {
+    ui_load_text(LOOK, "ui/look.lss")
+    ui_load_text(PAGE, "ui/page.ludic.xml")
+    var root: UiNode = ui_nodes("page", view_page())
+    ui_place(root, 0.0, 0.0, 400.0, 600.0)
+    let card = root.children[1]
+    let items = root.children[3].children
+    print(`id beats class: {int(root.children[0].rsize)}; card {int(card.cw)} wide at {int(card.x)},{int(card.y)} pad {int(card.pt)} {int(card.pr)} {int(card.pb)} {int(card.pl)} border {int(card.border)}`)
+    print(`inside {card.children[0].fg}, outside {root.children[2].fg}; warn bg {card.children[1].bg}; items {len(items)} of 30: {int(items[0].ch)}; colours {items[0].fg} {items[1].fg} {items[2].fg}; hr {int(root.children[4].ch)}; children {len(root.children)}`)
+    ui_press(root.children[6])
+    root = ui_nodes("page", view_page())
+    ui_place(root, 0.0, 0.0, 400.0, 600.0)
+    print(`clicks {clicks}; the button now disabled {not root.children[6].enabled} at opacity {root.children[6].alpha}; text-align {root.children[5].talign}`)
+  }
+}

examples/library/ui_templates.ludic

@@ -0,0 +1,48 @@
+# ui_templates.ludic — ludic.ui without a renderer: a shop written as a template, reading a view
+# of the program's state and answering with its events. A press is made as a pointer would make
+# it; it runs the view's event once the frame is built, and a component's own state keeps. The
+# row comes from a component library, whose unexported Price no other file can use.
+import "ludic.ui"
+program UiTemplates {
+  numbers float
+  property Item {
+    name: string = ""
+    cost: int = 0
+  }
+  var stock: []Item = new []Item
+  var purse: int = 100
+  var bought: []int = new []int
+  function add(name: string, cost: int) -> void {
+    let it = new Item
+    it.name = name
+    it.cost = cost
+    push(stock, it)
+  }
+  view Shop {
+    purse = purse
+    stock = stock
+    owned: int = len(bought)
+    function afford(i: int) -> bool { return purse >= stock[i].cost }
+    on buy(i: int) {
+      purse -= stock[i].cost
+      push(bought, i)
+    }
+  }
+  const KIT: string = "<ui>\n<component name='Price'><text>${cost}</text></component>\n<component name='Line' export='true'>\n  <state picks='{0}'/>\n  <row gap='8' w='fill' align='center'>\n    <text color='{picked ? \"#ffcc00\" : \"#eeeeee\"}'>{item.name} -</text>\n    <Price cost='{item.cost}'/>\n    <spacer w='fill'/>\n    <text>{picks}</text>\n    <button enabled='{afford(i)}' on-press='buy(i); set picks = picks + 1; emit chose'>Buy</button>\n  </row>\n</component>\n</ui>\n"
+  const PAGE: string = "<ui>\n<import src='kit.xml' as='kit'/>\n<screen name='shop' gap='4' pad='10'>\n  <state pick='{-1}'/>\n  <text size='24'>The purse: ${purse}</text>\n  <each in='{stock}' as='item' index='i'>\n    <kit:Line item='{item}' i='{i}' picked='{pick == i}' on-chose='set pick = i'/>\n  </each>\n  <if test='{owned == 0}'><text>Nothing bought yet</text></if>\n  <else><text>{owned} bought, the last {pick + 1}</text></else>\n</screen>\n</ui>\n"
+  const PRIVATE: string = "<ui><import src='kit.xml' as='kit'/><screen name='peek'><kit:Price cost='{1}'/></screen></ui>"
+  entry {
+    add("Rope", 30)
+    add("Lantern", 80)
+    ui_load_text(KIT, "ui/kit.xml")
+    ui_load_text(PAGE, "ui/shop.xml")
+    ui_load_text(PRIVATE, "ui/peek.xml")
+    var root: UiNode = ui_nodes("shop", view_shop())
+    ui_place(root, 0.0, 0.0, 600.0, 400.0)
+    let press = root.children[1].children[4]
+    ui_press(ui_hit(root, press.x + 1.0, press.y + 1.0))
+    root = ui_nodes("shop", view_shop())
+    ui_place(root, 0.0, 0.0, 600.0, 400.0)
+    print(`purse {purse}, bought {len(bought)}; the lantern is enabled: {root.children[2].children[4].enabled}`)
+  }
+}