feat(ui): ludic.ui is a UI framework - input, controls, render3d backend, the CSS a game needs

A game no longer writes a host:
- The runtime reads Input itself: focus and keyboard navigation (Tab, arrows, Enter/Space,
  autofocus), the pointer (hover, :active, click on release, drag), and scroll boxes with the
  wheel, a draggable scrollbar, clipping and scroll-into-view.
- HTML's controls are built in (button, checkbox, radio, range, select, text, key capture), made
  of plain parts a stylesheet styles, each reporting with on-change and event.value.
- ludic.ui/render3d.ludic draws with render3d's overlay: textures, named atlases (icon:NAME),
  nine-slice border-image, rounded rects and rings, clipping, and a scale.
- Hooks for the program's language, sounds and clock (ui_translator, ui_sounds, ui_clock).
- ui_dev: hot reload, errors on screen, LUDIC_UI_DUMP.
- CSS:
  - colours as #rgb / #rrggbbaa / rgb() / rgba() / names;
  - border-radius and outline (following the radius), box-shadow, background-image and a tinted
    border-image;
  - group opacity, @keyframes / animation, transition;
  - :focus, :focus-visible and :focus-within.
- HTML mixed content, and boolean attributes.
- render3d gains tex_width / tex_height, and the XML reader keeps text runs in order.

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

packages/ludic.ui/draw.ludic

@@ -1,37 +1,94 @@
-# draw.ludic - the laid-out nodes through the renderer: background, border, then content
+# draw.ludic - the laid-out nodes through the renderer: the background (rounded by border-radius),
+# the border, the content, the children in painting order (a scroll box's clipped to it, with its
+# bar), then the outline, which is where a focus ring is drawn
+var fr_ga: float = 1.0           # the opacity of everything around this element, which it multiplies
 function fr_draw(n: UiNode) -> void {
-  if n.kind == UI_BUTTON {
-    fr_button(n)
-    return
-  }
+  let outer = fr_ga
+  fr_ga = outer * n.alpha
+  fr_draw_in(n)
+  fr_ga = outer
+}
+function fr_draw_in(n: UiNode) -> void {
   if n.kind == UI_NATIVE {
     n.native.draw(n)
     return
   }
-  if n.bg >= 0 and ui_be.rect != null { ui_be.rect(n.x, n.y, n.cw, n.ch, n.bg, n.alpha) }
+  fr_background(n)
   fr_border(n)
   if n.kind == UI_TEXT { fr_text(n) }
-  if n.kind == UI_IMAGE and ui_be.image != null { ui_be.image(n.src, n.x + n.pl + n.border, n.y + n.pt + n.border, n.cw - ly_hin(n), n.ch - ly_vin(n), n.rfg, n.alpha) }
-  var off = 0.0
-  if n.kind == UI_SCROLL and ui_be.scroll_begin != null { off = ui_be.scroll_begin(n.key, n.x, n.y, n.cw, n.ch, n.content_h) }
-  if off != 0.0 {
-    for i in 0 .. len(n.children) { fr_shift(n.children[i], off) }
-  }
+  if n.kind == UI_IMAGE and ui_be.image != null { ui_be.image(n.src, n.x + n.pl + n.border, n.y + n.pt + n.border, n.cw - ly_hin(n), n.ch - ly_vin(n), n.rfg, fr_ga * n.rfg_a) }
+  let clipped = n.kind == UI_SCROLL and ui_be.clip != null
+  if clipped { fr_clip_push(n.x, n.y, n.cw, n.ch) }
   if n.children != null { fr_children(n) }
-  if n.kind == UI_SCROLL and ui_be.scroll_end != null { ui_be.scroll_end() }
+  if clipped { fr_clip_pop() }
+  if n.kind == UI_SCROLL { sc_bar(n) }
+  if n.outline_w > 0.0 { fr_outline(n) }
+}
+# the shadow, then the background: a nine-slice tinted by the background colour, or the colour
+# (rounded), then a picture over it
+function fr_background(n: UiNode) -> void {
+  if n.sh_c >= 0 { fr_fill(n, n.x + n.sh_x, n.y + n.sh_y, n.sh_c, fr_ga * n.sh_a) }
+  if n.bg >= 0 or n.bi_src != "" {
+    var c = n.bg
+    var a = fr_ga * n.bg_a
+    if c < 0 {
+      c = 16777215
+      a = fr_ga
+    }
+    fr_fill(n, n.x, n.y, c, a)
+  }
+  if n.bg_img != "" and ui_be.image != null { ui_be.image(n.bg_img, n.x, n.y, n.cw, n.ch, 16777215, fr_ga) }
+}
+function fr_fill(n: UiNode, x: float, y: float, c: int, a: float) -> void {
+  if n.bi_src != "" and ui_be.nine != null {
+    ui_be.nine(n.bi_src, n.bi_slice, x, y, n.cw, n.ch, Math.min(n.bi_width, Math.min(n.cw, n.ch) / 2.0), c, a)
+    return
+  }
+  fr_box(x, y, n.cw, n.ch, n.radius, c, a)
+}
+function fr_box(x: float, y: float, w: float, h: float, r: float, c: int, a: float) -> void {
+  if r > 0.0 and ui_be.round != null { ui_be.round(x, y, w, h, r, c, a) } else if ui_be.rect != null { ui_be.rect(x, y, w, h, c, a) }
+}
+function fr_border(n: UiNode) -> void {
+  if n.border <= 0.0 or ui_be.rect == null { return }
+  var c = n.border_c
+  var ca = fr_ga * n.border_a
+  if c < 0 {
+    c = n.rfg
+    ca = fr_ga * n.rfg_a
+  }
+  fr_frame(n.x, n.y, n.cw, n.ch, n.border, c, ca)
+}
+function fr_frame(x: float, y: float, w: float, h: float, b: float, c: int, a: float) -> void {
+  ui_be.rect(x, y, w, b, c, a)
+  ui_be.rect(x, y + h - b, w, b, c, a)
+  ui_be.rect(x, y + b, b, h - b * 2.0, c, a)
+  ui_be.rect(x + w - b, y + b, b, h - b * 2.0, c, a)
+}
+# an outline follows the box's corners, as CSS's does: rounded by border-radius, grown by its offset
+function fr_outline(n: UiNode) -> void {
+  var c = n.outline_c
+  if c < 0 { c = n.rfg }
+  let o = n.outline_off + n.outline_w
+  let a = fr_ga * n.outline_a
+  if n.radius > 0.0 and ui_be.ring != null {
+    ui_be.ring(n.x - o, n.y - o, n.cw + o * 2.0, n.ch + o * 2.0, n.radius + o, n.outline_w, c, a)
+    return
+  }
+  fr_frame(n.x - o, n.y - o, n.cw + o * 2.0, n.ch + o * 2.0, n.outline_w, c, a)
 }
 # a text's lines (one, or the wrapped ones), each placed by text-align, the last cut by an ellipsis
 function fr_text(n: UiNode) -> void {
   let y = n.y + n.pt + n.border
+  let a = n.rfg_a * fr_ga
   if n.lines == null {
     var s = n.text
     if n.ellipsis { s = ly_ellipsis(s, n.rsize, n.cw - ly_hin(n)) }
-    ui_be.text(fr_line_x(n, s), y, s, n.rsize, n.rfg)
+    ui_be.text(fr_line_x(n, s), y, s, n.rsize, n.rfg, a)
     return
   }
-  for i in 0 .. len(n.lines) { ui_be.text(fr_line_x(n, n.lines[i]), y + float(i) * n.rsize * 1.25, n.lines[i], n.rsize, n.rfg) }
+  for i in 0 .. len(n.lines) { ui_be.text(fr_line_x(n, n.lines[i]), y + float(i) * n.rsize * 1.25, n.lines[i], n.rsize, n.rfg, a) }
 }
-function fr_text_x(n: UiNode) -> float { return fr_line_x(n, n.text) }
 # where a line starts: text-align within the room the box gives it
 function fr_line_x(n: UiNode, s: string) -> float {
   let x = n.x + n.pl + n.border
@@ -40,52 +97,3 @@ function fr_line_x(n: UiNode, s: string) -> float {
   if n.talign == UI_CENTER { return x + spare / 2.0 }
   return x + spare
 }
-# the children in painting order: those in the flow first, then positioned ones by z-index
-function fr_children(n: UiNode) -> void {
-  var positioned = 0
-  for i in 0 .. len(n.children) {
-    if n.children[i].pos == 0 { fr_draw(n.children[i]) } else { positioned += 1 }
-  }
-  if positioned == 0 { return }
-  var lo = 1000000
-  var hi = -1000000
-  for i in 0 .. len(n.children) {
-    if n.children[i].pos != 0 {
-      lo = Math.min(lo, n.children[i].z)
-      hi = Math.max(hi, n.children[i].z)
-    }
-  }
-  for z in lo .. hi + 1 {
-    for i in 0 .. len(n.children) {
-      if n.children[i].pos != 0 and n.children[i].z == z { fr_draw(n.children[i]) }
-    }
-  }
-}
-function fr_border(n: UiNode) -> void {
-  if n.border <= 0.0 or ui_be.rect == null { return }
-  var c = n.border_c
-  if c < 0 { c = n.rfg }
-  let b = n.border
-  ui_be.rect(n.x, n.y, n.cw, b, c, n.alpha)
-  ui_be.rect(n.x, n.y + n.ch - b, n.cw, b, c, n.alpha)
-  ui_be.rect(n.x, n.y, b, n.ch, c, n.alpha)
-  ui_be.rect(n.x + n.cw - b, n.y, b, n.ch, c, n.alpha)
-}
-# the renderer's own button when it has one: it draws, focuses and answers the press
-function fr_button(n: UiNode) -> void {
-  if ui_be.button != null {
-    if ui_be.button(n.x, n.y, n.cw, n.ch, n.text, n.enabled) and n.enabled { ui_fire(n, "press", Value.null()) }
-    return
-  }
-  var bg = n.bg
-  if bg < 0 { bg = 4210752 }
-  if ui_be.rect != null { ui_be.rect(n.x, n.y, n.cw, n.ch, bg, n.alpha) }
-  fr_border(n)
-  ui_be.text(fr_text_x(n), n.y + n.pt + n.border, n.text, n.rsize, n.rfg)
-}
-function fr_shift(n: UiNode, off: float) -> void {
-  n.y = n.y - off
-  if n.children != null {
-    for i in 0 .. len(n.children) { fr_shift(n.children[i], off) }
-  }
-}