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>

packages/ludic.ui/layout.ludic

@@ -0,0 +1,96 @@
+# layout.ludic - flex layout on the CSS box model, top-down: a box is told how wide it may be,
+# measures its content at that width (so a wrapping row knows how tall it is), then places each
+# child. A size is the border box: padding and border inside it, margin outside it.
+function ly_measure(n: UiNode, avail: float, size: float, fg: int) -> void {
+  n.rsize = size
+  if n.size > 0.0 { n.rsize = n.size }
+  n.rfg = fg
+  if n.fg != UI_INHERIT { n.rfg = n.fg }
+  n.mw = ly_hin(n)
+  n.mh = ly_vin(n)
+  if n.kind == UI_TEXT or n.kind == UI_BUTTON {
+    n.mw = n.mw + ly_text_w(n.text, n.rsize)
+    n.mh = n.mh + n.rsize * 1.25
+  }
+  if n.kind == UI_IMAGE {
+    n.mw = n.mw + n.rsize
+    n.mh = n.mh + n.rsize
+  }
+  var fixed_w = n.w
+  if n.w_pct > 0.0 { fixed_w = avail * n.w_pct / 100.0 }
+  if (n.kind == UI_BOX or n.kind == UI_SCROLL) and n.children != null {
+    var inner = avail - n.ml - n.mr
+    if fixed_w > 0.0 { inner = fixed_w }
+    inner = ly_clamp(inner, n.min_w, n.max_w) - ly_hin(n)
+    if n.dir == UI_ROW and n.wrap { ly_measure_wrap(n, inner) } else { ly_measure_box(n, inner) }
+  }
+  if fixed_w > 0.0 { n.mw = fixed_w }
+  if n.h > 0.0 { n.mh = n.h }
+  n.mw = ly_clamp(n.mw, n.min_w, n.max_w)
+  n.mh = ly_clamp(n.mh, n.min_h, n.max_h)
+}
+function ly_hin(n: UiNode) -> float { return n.pl + n.pr + n.border * 2.0 }
+function ly_vin(n: UiNode) -> float { return n.pt + n.pb + n.border * 2.0 }
+function ly_clamp(v: float, lo: float, hi: float) -> float {
+  var out = v
+  if hi > 0.0 and out > hi { out = hi }
+  if out < lo { out = lo }
+  return out
+}
+function ly_measure_box(n: UiNode, inner: float) -> void {
+  var main = 0.0
+  var cross = 0.0
+  for i in 0 .. len(n.children) {
+    let c = n.children[i]
+    ly_measure(c, inner, n.rsize, n.rfg)
+    main = main + ly_main(c, n.dir)
+    if i > 0 { main = main + n.gap }
+    cross = Math.max(cross, ly_cross(c, n.dir))
+  }
+  if n.dir == UI_ROW {
+    n.mw = n.mw + main
+    n.mh = n.mh + cross
+  } else {
+    n.mw = n.mw + cross
+    n.mh = n.mh + main
+  }
+}
+# a wrapping row: children in lines no wider than `inner`, the lines stacked `gap` apart
+function ly_measure_wrap(n: UiNode, inner: float) -> void {
+  var line_w = 0.0
+  var line_h = 0.0
+  var widest = 0.0
+  var total = 0.0
+  var count = 0
+  for i in 0 .. len(n.children) {
+    let c = n.children[i]
+    ly_measure(c, inner, n.rsize, n.rfg)
+    let cw = ly_main(c, UI_ROW)
+    if count > 0 and line_w + n.gap + cw > inner {
+      widest = Math.max(widest, line_w)
+      total = total + line_h + n.gap
+      line_w = 0.0
+      line_h = 0.0
+      count = 0
+    }
+    if count > 0 { line_w = line_w + n.gap }
+    line_w = line_w + cw
+    line_h = Math.max(line_h, ly_cross(c, UI_ROW))
+    count += 1
+  }
+  n.mw = n.mw + Math.max(widest, line_w)
+  n.mh = n.mh + total + line_h
+}
+function ly_text_w(s: string, size: float) -> float {
+  if ui_be != null and ui_be.measure != null { return ui_be.measure(s, size) }
+  return float(len(s)) * size * 0.5
+}
+# a child's size along and across a direction, margins included
+function ly_main(c: UiNode, dir: int) -> float {
+  if dir == UI_ROW { return c.mw + c.ml + c.mr }
+  return c.mh + c.mt + c.mb
+}
+function ly_cross(c: UiNode, dir: int) -> float {
+  if dir == UI_ROW { return c.mh + c.mt + c.mb }
+  return c.mw + c.ml + c.mr
+}