feat(ui): number and key fields, notes, anchored popovers, text-shadow, and pictures as painted

- <input type="number" min max step>: typed digits replace its value (a minus when min allows one,
  a point when step has a fraction), Enter or leaving the field commits them held between min and
  max, the left and right arrows step it.
- <input type="key">: Enter or a click starts it listening and the next key is its value, Tab, the
  arrows and Enter included; Esc stops it listening, Backspace clears it, `shown` names the value,
  and ui_capturing() tells the host to leave its keys alone (through the frame that ended it).
- note="..." under any control's label (.ui-labels > .ui-label + .ui-note); a range's (or number's)
  value with decimals, format="percent" and a unit.
- A popover with `anchor="id"` (the nearest element of that id) or a bare `anchor` (the element
  before it) sits beside it by `placement` (right, left, bottom, top), its margin the gap, opens to
  the other side where it would leave the screen, and is kept on it.
- A tooltip's title splits into lines at a newline or a written \n.
- text-shadow, inherited, drawn sharp under the text.
- ui_opacity(): the group opacity a native's draw is at.
- border-image is drawn as painted with no background colour, tinted by one, and not at all when
  that colour is transparent (it drew a white nine-slice).
- A picture file is drawn untinted, as a browser draws one; an atlas cell (prefix:name) still takes
  the color around it, and an <img> with its own color is tinted by it.
- The render3d backend loads a picture again when its file changes or appears (a failed load was
  kept for ever), and at once after ui_image_reload(path); takes a path with a drive letter (C:/...)
  as a path rather than an atlas; and slices a nine-slice by its texture's own width and height.
- ui_inputs.ludic and ui_look.ludic; LANGUAGE.md and the changeset say all of it.

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

packages/ludic.ui/controls.ludic

@@ -1,8 +1,7 @@
 # controls.ludic - what a control does: a button (or anything with on-click) is pressed, a checkbox
 # flips, a radio chooses its value, a select steps through its options, a range moves by its step
-# (or to where the pointer is on its track), a text field takes what is typed, a key field the next
-# key. Each says so with on-change and event.value, after the frame is drawn.
-var ct_capture: string = ""
+# (or to where the pointer is on its track), a text field takes what is typed, a number field its
+# digits, a key field the next key. Each says so with on-change and event.value, after the frame is drawn.
 function ct_type(n: UiNode) -> string {
   if n.tag == "select" { return "select" }
   if n.tag != "input" { return "" }
@@ -10,7 +9,7 @@ function ct_type(n: UiNode) -> string {
   if t == "" { return "text" }
   return t
 }
-function ct_takes_arrows(n: UiNode) -> bool { return ct_type(n) == "range" or ct_type(n) == "select" }
+function ct_takes_arrows(n: UiNode) -> bool { return ct_type(n) == "range" or ct_type(n) == "select" or ct_type(n) == "number" }
 function ct_takes_space(n: UiNode) -> bool { return ct_type(n) == "text" }
 function ct_change(n: UiNode, v: Val) -> void {
   ui_sound(ct_sound(n))
@@ -24,7 +23,7 @@ function ct_sound(n: UiNode) -> string {
 function ct_activate(n: UiNode) -> void {
   if not n.enabled { return }
   let t = ct_type(n)
-  if t == "checkbox" { ct_change(n, vl_bool(not ui_attr_on(n, "checked"))) } else if t == "radio" { ct_change(n, ui_attr(n, "value")) } else if t == "select" { ct_step(n, 1) } else if t == "key" { ct_capture = n.key } else if t == "" {
+  if t == "checkbox" { ct_change(n, vl_bool(not ui_attr_on(n, "checked"))) } else if t == "radio" { ct_change(n, ui_attr(n, "value")) } else if t == "select" { ct_step(n, 1) } else if t == "key" { ct_key_start(n) } else if t == "number" { ct_num_commit(n) } else if t == "" {
     ui_sound(ct_sound(n))
     ui_fire(n, "press", Value.null())
   }
@@ -36,6 +35,7 @@ function ct_step(n: UiNode, d: int) -> void {
     let ov = ui_attr(n.opts[at], "value")
     if Value.kind(ov) == 0 { ct_change(n, Value.int(at)) } else { ct_change(n, ov) }
   }
+  if t == "number" { ct_num_step(n, d) }
   if t == "range" {
     var step = Value.as_float(ui_attr(n, "step"))
     if step <= 0.0 { step = 1.0 }
@@ -70,11 +70,8 @@ function ct_drag(root: UiNode, key: string, x: float, y: float) -> void {
 # typing into a focused text field, or the key a key field is waiting for
 function ct_typed(n: UiNode) -> void {
   let t = ct_type(n)
-  if t == "key" and ct_capture == n.key and in_now.key != 0 and not in_now.enter {
-    ct_capture = ""
-    ct_change(n, Value.int(in_now.key))
-    return
-  }
+  if t == "key" { ct_key_typed(n) }
+  if t == "number" { ct_num_typed(n) }
   if t != "text" or (in_now.typed == "" and not in_now.backspace) { return }
   var s = ui_attr_text(n, "value")
   if in_now.backspace and len(s) > 0 { s = s[0..ct_char_start(s)] }

packages/ludic.ui/controls_build.ludic

@@ -1,8 +1,9 @@
 # controls_build.ludic - a control's parts, made as plain child boxes a stylesheet can style:
 #   input[type=checkbox|radio]  .ui-label  .ui-track > .ui-knob
 #   input[type=range]           .ui-label  .ui-track > .ui-fill, .ui-thumb   .ui-value
-#   input[type=text|key]        .ui-label  .ui-field > .ui-value (+ .ui-caret while focused)
+#   input[type=text|number|key] .ui-label  .ui-field > .ui-value (+ .ui-caret while focused)
 #   select                      .ui-label  .ui-prev  .ui-value  .ui-next   (its <option>s hidden)
+# with a note="...", the label is .ui-labels > .ui-label + .ui-note
 function ct_part(n: UiNode, cls: string, text: string) -> UiNode {
   let p = new UiNode
   p.key = `{n.key}/{cls}`
@@ -39,12 +40,11 @@ function ct_build(n: UiNode) -> void {
   n.dir = UI_ROW
   n.focusable = true
   let t = ui_attr_text(n, "type")
-  let label = ui_attr_text(n, "label")
-  if label != "" { push(n.children, ct_part(n, "ui-label", ui_tr(label))) }
   if n.tag == "select" {
     ct_build_select(n)
     return
   }
+  ct_label(n)
   if t == "checkbox" or t == "radio" {
     let track = ct_part(n, "ui-track", "")
     push(track.children, ct_part(n, "ui-knob", ""))
@@ -69,13 +69,12 @@ function ct_build_range(n: UiNode) -> void {
   push(track.children, fill)
   push(track.children, ct_part(n, "ui-thumb", ""))
   push(n.children, track)
-  push(n.children, ct_part(n, "ui-value", ui_attr_text(n, "value")))
+  push(n.children, ct_part(n, "ui-value", ct_value_text(n)))
 }
 function ct_build_select(n: UiNode) -> void {
   let opts = n.children
   n.children = new []UiNode
-  let label = ui_attr_text(n, "label")
-  if label != "" { push(n.children, ct_part(n, "ui-label", ui_tr(label))) }
+  ct_label(n)
   var shown = ""
   let at = ct_option_at(n, opts)
   if at >= 0 { shown = opts[at].text }
@@ -94,7 +93,8 @@ function ct_option_at(n: UiNode, opts: []UiNode) -> int {
   return -1
 }
 function ct_field_text(n: UiNode) -> string {
-  if ui_attr_text(n, "type") != "key" { return ui_attr_text(n, "value") }
-  if ct_capture == n.key { return ui_tr("press a key...") }
-  return Input.key_label(Value.as_int(ui_attr(n, "value")))
+  let t = ui_attr_text(n, "type")
+  if t == "key" { return ct_key_text(n) }
+  if t == "number" { return ct_num_shown(n) }
+  return ui_attr_text(n, "value")
 }

packages/ludic.ui/controls_key.ludic

@@ -0,0 +1,53 @@
+# controls_key.ludic - <input type="key">, a key binding: Enter or a click starts listening, and then
+# the next key pressed is its value - Tab, the arrows and Enter included, which move nothing while it
+# listens. Esc stops listening and keeps the value; Backspace, when it is not listening, clears it (0).
+# `shown` is what it says for its value (a host's own name for the key), else the keyboard's label.
+var ct_capture: string = ""
+var ct_capture_at: int = -1       # the frame listening began, whose own key started it
+var ct_capture_seen: int = -1     # the last frame that began listening, for ui_capturing
+function ct_key_start(n: UiNode) -> void {
+  ct_capture = n.key
+  ct_capture_at = an_frame
+  ct_capture_seen = an_frame
+}
+# while it listens, the frame's keys are the field's: nothing else reads them (fc_keys)
+function ct_key_listening() -> bool { return ct_capture != "" and ct_capture_at != an_frame }
+# the field listening, given this frame's key; false when there is none to give it to
+function ct_key_capture(list: []UiNode) -> bool {
+  if ct_capture == "" { return false }
+  ct_capture_seen = an_frame
+  var n: UiNode = null
+  for i in 0 .. len(list) {
+    if list[i].key == ct_capture { n = list[i] }
+  }
+  if n == null {
+    ct_capture = ""
+    return false
+  }
+  if ct_capture_at == an_frame { return true }
+  if in_now.escape {
+    ct_capture = ""
+    return true
+  }
+  if in_now.key != 0 {
+    ct_capture = ""
+    ct_change(n, Value.int(in_now.key))
+  }
+  return true
+}
+# focused, not listening: Backspace unbinds it
+function ct_key_typed(n: UiNode) -> void {
+  if ct_capture != n.key and in_now.backspace { ct_change(n, Value.int(0)) }
+}
+# a press anywhere but the field stops it listening
+function ct_key_pressed_away(hit: UiNode) -> void {
+  if ct_capture != "" and (hit == null or hit.key != ct_capture) { ct_capture = "" }
+}
+function ct_key_text(n: UiNode) -> string {
+  if ct_capture == n.key { return ui_tr("press a key...") }
+  if Value.kind(ui_attr(n, "shown")) != 0 { return ui_tr(ui_attr_text(n, "shown")) }
+  return Input.key_label(Value.as_int(ui_attr(n, "value")))
+}
+# a key field is listening: the host should leave the keys alone until it is done (it stays true
+# for the frame in which Esc or a key ended it, so that key is not read twice)
+export function ui_capturing() -> bool { return ct_capture != "" or ct_capture_seen == an_frame }

packages/ludic.ui/controls_number.ludic

@@ -0,0 +1,73 @@
+# controls_number.ludic - <input type="number" min max step>: digits typed into it (a minus when min
+# allows one, a point when step has a fraction) replace its value with a draft, which Enter or leaving
+# the field commits, held between min and max; Backspace takes a digit back (of the value, when it is
+# the first key), and the left and right arrows step it. Each commit is one on-change with the
+# number: an int when step and the value are whole.
+var ct_num_key: string = ""
+var ct_num_text: string = ""
+function ct_num_bound(n: UiNode, key: string) -> bool { return Value.kind(ui_attr(n, key)) != 0 }
+function ct_num_step_of(n: UiNode) -> float {
+  let s = Value.as_float(ui_attr(n, "step"))
+  if s <= 0.0 { return 1.0 }
+  return s
+}
+function ct_num_clamp(n: UiNode, v0: float) -> float {
+  var v = v0
+  if ct_num_bound(n, "max") { v = Math.min(v, Value.as_float(ui_attr(n, "max"))) }
+  if ct_num_bound(n, "min") { v = Math.max(v, Value.as_float(ui_attr(n, "min"))) }
+  return v
+}
+function ct_num_set(n: UiNode, v0: float) -> void {
+  let v = ct_num_clamp(n, v0)
+  let step = ct_num_step_of(n)
+  let was = ui_attr(n, "value")
+  if Value.kind(was) != 0 and Value.as_float(was) == v { return }
+  if step == float(int(step)) and v == float(int(v)) { ct_change(n, Value.int(int(v))) } else { ct_change(n, Value.float(v)) }
+}
+# Enter, or the focus leaving it: the draft becomes the value (a draft of nothing changes nothing)
+function ct_num_commit(n: UiNode) -> void {
+  if ct_num_key != n.key { return }
+  let s = ct_num_text
+  ct_num_key = ""
+  if s == "" or s == "-" or s == "." or s == "-." { return }
+  ct_num_set(n, el_num(s))
+}
+function ct_num_step(n: UiNode, d: int) -> void {
+  var base = Value.as_float(ui_attr(n, "value"))
+  if ct_num_key == n.key and ct_num_text != "" and ct_num_text != "-" { base = el_num(ct_num_text) }
+  ct_num_key = ""
+  ct_num_set(n, base + ct_num_step_of(n) * float(d))
+}
+# what was typed this frame, the characters a number can hold; Backspace takes one back
+function ct_num_typed(n: UiNode) -> void {
+  if fc_key != n.key or (in_now.typed == "" and not in_now.backspace) { return }
+  if ct_num_key != n.key {
+    ct_num_key = n.key
+    ct_num_text = ""
+    if in_now.typed == "" { ct_num_text = ui_attr_text(n, "value") }
+  }
+  if in_now.backspace and len(ct_num_text) > 0 { ct_num_text = ct_num_text[0..len(ct_num_text) - 1] }
+  let step = ct_num_step_of(n)
+  let lo = Value.as_float(ui_attr(n, "min"))
+  for i in 0 .. len(in_now.typed) {
+    let c = in_now.typed[i]
+    let digit = c >= 48 and c <= 57
+    let minus = c == 45 and ct_num_text == "" and (not ct_num_bound(n, "min") or lo < 0.0)
+    let point = c == 46 and step != float(int(step)) and not ui_has(ct_num_text, ".")
+    if (digit or minus or point) and len(ct_num_text) < 24 { ct_num_text = ct_num_text + in_now.typed[i..i + 1] }
+  }
+}
+# the focus has gone from the field being typed in: what was typed is kept
+function ct_num_blur(root: UiNode) -> void {
+  if ct_num_key == "" or ct_num_key == fc_key { return }
+  let n = fr_node(root, ct_num_key)
+  if n == null {
+    ct_num_key = ""
+    return
+  }
+  ct_num_commit(n)
+}
+function ct_num_shown(n: UiNode) -> string {
+  if ct_num_key == n.key { return ct_num_text }
+  return ct_value_text(n)
+}

packages/ludic.ui/controls_parts.ludic

@@ -0,0 +1,46 @@
+# controls_parts.ludic - what a control shows besides its own parts: its label, with a `note` (a line
+# of help under it) in .ui-labels > .ui-label + .ui-note, and a range's or a number's value as text:
+# `decimals="1"` places, `format="percent"` its place between min and max, and a `unit` after it
+function ct_label(n: UiNode) -> void {
+  let label = ui_attr_text(n, "label")
+  let note = ui_attr_text(n, "note")
+  if note == "" {
+    if label != "" { push(n.children, ct_part(n, "ui-label", ui_tr(label))) }
+    return
+  }
+  let both = ct_part(n, "ui-labels", "")
+  if label != "" { push(both.children, ct_part(n, "ui-label", ui_tr(label))) }
+  push(both.children, ct_part(n, "ui-note", ui_tr(note)))
+  push(n.children, both)
+}
+function ct_value_text(n: UiNode) -> string {
+  let v = ui_attr(n, "value")
+  if Value.kind(v) == 0 { return "" }
+  var f = Value.as_float(v)
+  let fmt = ui_attr_text(n, "format")
+  if fmt == "percent" {
+    let lo = Value.as_float(ui_attr(n, "min"))
+    var hi = Value.as_float(ui_attr(n, "max"))
+    if hi <= lo { hi = lo + 1.0 }
+    f = (f - lo) / (hi - lo) * 100.0
+  }
+  var s = ""
+  if Value.kind(ui_attr(n, "decimals")) != 0 { s = ct_fixed(f, Value.as_int(ui_attr(n, "decimals"))) } else if fmt == "percent" { s = string(int(Math.round(f))) } else { s = vl_text(v) }
+  if fmt == "percent" { s = s + "%" }
+  return s + ui_attr_text(n, "unit")
+}
+# a number with `places` digits after the point, rounded
+function ct_fixed(f: float, places: int) -> string {
+  var k = 1
+  for i in 0 .. Math.max(places, 0) { k = k * 10 }
+  let neg = f < 0.0
+  let whole = int(Math.round(Math.abs(f) * float(k)))
+  var s = string(whole / k)
+  if places > 0 {
+    var frac = string(whole % k)
+    while len(frac) < places { frac = "0" + frac }
+    s = s + "." + frac
+  }
+  if neg and whole != 0 { s = "-" + s }
+  return s
+}

packages/ludic.ui/draw.ludic

@@ -16,7 +16,7 @@ function fr_draw_in(n: UiNode) -> void {
   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.bl, n.y + n.pt + n.bt, n.cw - ly_hin(n), n.ch - ly_vin(n), n.rfg, fr_ga * n.rfg_a) }
+  if n.kind == UI_IMAGE and ui_be.image != null { fr_image(n) }
   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) }
@@ -24,8 +24,9 @@ function fr_draw_in(n: UiNode) -> void {
   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
+# the shadow, then the background: the colour (rounded), or a border-image's nine-slice - drawn as
+# painted, as CSS draws one, or tinted by a background colour when there is one (so `transparent`,
+# or any colour with no alpha, leaves nothing to see) - 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 != "" {
@@ -35,7 +36,7 @@ function fr_background(n: UiNode) -> void {
       c = 16777215
       a = fr_ga
     }
-    fr_fill(n, n.x, n.y, c, a)
+    if a > 0.0 { 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) }
 }
@@ -80,23 +81,3 @@ function fr_outline(n: UiNode) -> void {
   }
   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.bt
-  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, 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, a) }
-}
-# 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.bl
-  if n.talign == UI_START { return x }
-  let spare = n.cw - ly_hin(n) - ly_text_w(s, n.rsize)
-  if n.talign == UI_CENTER { return x + spare / 2.0 }
-  return x + spare
-}

packages/ludic.ui/draw_content.ludic

@@ -0,0 +1,61 @@
+# draw_content.ludic - what is inside a box drawn: a text's lines, placed by text-align, each over its
+# text-shadow, and a picture
+# 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.bt
+  let a = n.rfg_a * fr_ga
+  let sh = fr_text_shadow(n)
+  if n.lines == null {
+    var s = n.text
+    if n.ellipsis { s = ly_ellipsis(s, n.rsize, n.cw - ly_hin(n)) }
+    fr_line(n, sh, fr_line_x(n, s), y, s, a)
+    return
+  }
+  for i in 0 .. len(n.lines) { fr_line(n, sh, fr_line_x(n, n.lines[i]), y + float(i) * n.rsize * 1.25, n.lines[i], a) }
+}
+# one line, over its shadow when it has one
+function fr_line(n: UiNode, sh: UiNodeX, x: float, y: float, s: string, a: float) -> void {
+  if sh != null { ui_be.text(x + sh.tsh_x, y + sh.tsh_y, s, n.rsize, sh.tsh_c, sh.tsh_a * fr_ga) }
+  ui_be.text(x, y, s, n.rsize, n.rfg, a)
+}
+# text-shadow is inherited: the nearest element that says it, or null (none)
+function fr_text_shadow(n: UiNode) -> UiNodeX {
+  var at = n
+  while at != null {
+    if at.ex != null and at.ex.tsh_set {
+      if at.ex.tsh_c < 0 { return null }
+      return at.ex
+    }
+    at = at.parent
+  }
+  return null
+}
+# the opacity a native's draw is at: every group opacity around it, its own included
+export function ui_opacity() -> float { return fr_ga }
+# 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.bl
+  if n.talign == UI_START { return x }
+  let spare = n.cw - ly_hin(n) - ly_text_w(s, n.rsize)
+  if n.talign == UI_CENTER { return x + spare / 2.0 }
+  return x + spare
+}
+# an <img>: a picture file drawn as it is, as a browser draws one (unless the img sets its own
+# color); a cell of an atlas ("icon:tent") is a glyph, and takes the color around it as text does
+function fr_image(n: UiNode) -> void {
+  var c = 16777215
+  var a = fr_ga
+  if n.fg != UI_INHERIT or fr_is_cell(n.src) {
+    c = n.rfg
+    a = fr_ga * n.rfg_a
+  }
+  ui_be.image(n.src, n.x + n.pl + n.bl, n.y + n.pt + n.bt, n.cw - ly_hin(n), n.ch - ly_vin(n), c, a)
+}
+# prefix:name, and not a path (C:/... is a drive, not an atlas)
+function fr_is_cell(src: string) -> bool {
+  for i in 0 .. len(src) {
+    if src[i] == 47 or src[i] == 92 { return false }
+    if src[i] == 58 { return i > 1 }
+  }
+  return false
+}

packages/ludic.ui/dump.ludic

@@ -24,7 +24,7 @@ function dp_style(n: UiNode) -> string {
   var s = ""
   if n.size > 0.0 { s = s + ` font {int(n.size)}` }
   if n.fg >= 0 { s = s + ` color {ui_hex(n.fg)}` }
-  if n.bg >= 0 { s = s + ` bg {ui_hex(n.bg)}` }
+  if n.bg >= 0 and n.bg_a > 0.0 { s = s + ` bg {ui_hex(n.bg)}` }
   if n.alpha < 1.0 { s = s + ` opacity {n.alpha}` }
   if n.pt + n.pr + n.pb + n.pl > 0.0 { s = s + ` pad {int(n.pt)} {int(n.pr)} {int(n.pb)} {int(n.pl)}` }
   if n.mt + n.mr + n.mb + n.ml > 0.0 { s = s + ` margin {int(n.mt)} {int(n.mr)} {int(n.mb)} {int(n.ml)}` }

packages/ludic.ui/focus.ludic

@@ -1,6 +1,6 @@
 # focus.ludic - the keyboard's place: focus moves through the controls in document order (Tab and
 # Shift+Tab, or the arrows), Enter and Space activate what has it, and a pointer press focuses what
-# it presses. A key that is gone from the screen leaves nothing focused.
+# it presses; a key field that is listening has every key to itself. A key that is gone from the screen leaves nothing focused.
 var fc_key: string = ""
 var fc_visible: bool = false    # focus came from the keyboard: :focus-visible, and the ring
 var fc_list: []UiNode = new []UiNode
@@ -28,8 +28,9 @@ function fc_move(step: int) -> void {
 function fc_keys(root: UiNode) -> void {
   fc_list = new []UiNode
   let top = pp_top(root)
-  if top != null and in_now.escape { ui_fire(top, "close", Value.null()) }
   if top != null { fc_collect(top) } else { fc_collect(root) }
+  if ct_key_capture(fc_list) { return }
+  if top != null and in_now.escape { ui_fire(top, "close", Value.null()) }
   let i = in_now
   if fc_find() < 0 { fc_autofocus() }
   let at = fc_find()
@@ -39,6 +40,7 @@ function fc_keys(root: UiNode) -> void {
   let horizontal = n != null and ct_takes_arrows(n)
   if i.up or (i.left and not horizontal) { fc_move(-1) }
   if i.down_key or (i.right and not horizontal) { fc_move(1) }
+  ct_num_blur(root)
   if n == null { return }
   if i.enter or (i.space and not ct_takes_space(n)) { ct_activate(n) }
   if horizontal and i.left { ct_step(n, -1) }

packages/ludic.ui/frame.ludic

@@ -70,6 +70,7 @@ export function ui_place(root: UiNode, x: float, y: float, w: float, h: float) -
   ly_measure(root, w, ui_px(16.0), fg)
   ly_place(root, x, y, w, h)
   sc_apply(root)
+  pp_anchor_all(root)
 }
 # a press, as if the pointer had made it
 export function ui_press(n: UiNode) -> void {

packages/ludic.ui/index.ludic

@@ -17,10 +17,14 @@ import "act.ludic"
 import "native.ludic"
 import "controls.ludic"
 import "controls_build.ludic"
+import "controls_parts.ludic"
+import "controls_key.ludic"
+import "controls_number.ludic"
 import "input.ludic"
 import "focus.ludic"
 import "scroll.ludic"
 import "popover.ludic"
+import "popover_anchor.ludic"
 import "tooltip.ludic"
 import "life.ludic"
 import "tpl.ludic"
@@ -68,5 +72,6 @@ import "frame.ludic"
 import "pointer.ludic"
 import "screen_class.ludic"
 import "draw.ludic"
+import "draw_content.ludic"
 import "draw_order.ludic"
 import "dump.ludic"

packages/ludic.ui/pointer.ludic

@@ -18,6 +18,7 @@ function fr_pointer(root: UiNode) -> void {
   if top != null and pp_pointer(top) { return }
   let hit = fr_hit(scope, i.x, i.y)
   if i.down and not in_was_down {
+    ct_key_pressed_away(hit)
     fr_press_key = ""
     if hit != null {
       fr_press_key = hit.key

packages/ludic.ui/popover_anchor.ludic

@@ -0,0 +1,76 @@
+# popover_anchor.ludic - a popover beside what it belongs to: `<div popover anchor="cell">` sits beside
+# the element with that id (the nearest one, looking out from the popover), and a bare `anchor` beside
+# the element just before it. `placement` is right (the default), left, bottom or top; its margin on
+# that side is the gap. Where it would leave the screen it goes to the other side, and it is kept on it.
+function pp_anchor_all(n: UiNode) -> void {
+  if n.children == null { return }
+  for i in 0 .. len(n.children) {
+    let c = n.children[i]
+    if c.popover and Value.kind(ui_attr(c, "anchor")) != 0 { pp_anchor(c, pp_anchor_of(n, i)) }
+    pp_anchor_all(c)
+  }
+}
+# the element a popover (the i-th child of `parent`) is anchored to, or null
+function pp_anchor_of(parent: UiNode, i: int) -> UiNode {
+  let pop = parent.children[i]
+  let id = ui_attr_text(pop, "anchor")
+  if id == "" or id == "true" {
+    var k = i - 1
+    while k >= 0 and parent.children[k].popover { k -= 1 }
+    if k < 0 { return null }
+    return parent.children[k]
+  }
+  var at = parent
+  while at != null {
+    let f = pp_by_id(at, id, pop)
+    if f != null { return f }
+    at = at.parent
+  }
+  ui_err(`anchor="{id}": no element has that id`)
+  return null
+}
+function pp_by_id(n: UiNode, id: string, skip: UiNode) -> UiNode {
+  if n == skip { return null }
+  if n.id == id { return n }
+  if n.children == null { return null }
+  for i in 0 .. len(n.children) {
+    let f = pp_by_id(n.children[i], id, skip)
+    if f != null { return f }
+  }
+  return null
+}
+function pp_anchor(p: UiNode, a: UiNode) -> void {
+  if a == null { return }
+  let side = ui_attr_text(p, "placement")
+  let w = p.cw
+  let h = p.ch
+  var x = a.x
+  var y = a.y
+  if side == "top" or side == "bottom" {
+    let below = a.y + a.ch + p.mt
+    let above = a.y - h - p.mb
+    y = pp_side(side == "top", above, below, h, ly_vp_y, ly_vp_h)
+    x = a.x + p.ml
+  } else {
+    let right = a.x + a.cw + p.ml
+    let left = a.x - w - p.mr
+    x = pp_side(side == "left", left, right, w, ly_vp_x, ly_vp_w)
+    y = a.y + p.mt
+  }
+  x = Math.max(ly_vp_x, Math.min(x, ly_vp_x + ly_vp_w - w))
+  y = Math.max(ly_vp_y, Math.min(y, ly_vp_y + ly_vp_h - h))
+  ly_place(p, x, y, w, h)
+  sc_apply(p)
+}
+# where along one axis: the side asked for (`low` first when `first_low`), else the other when the
+# first leaves the screen and the other does not
+function pp_side(first_low: bool, low: float, high: float, size: float, v0: float, vsize: float) -> float {
+  let low_fits = low >= v0
+  let high_fits = high + size <= v0 + vsize
+  if first_low {
+    if low_fits or not high_fits { return low }
+    return high
+  }
+  if high_fits or not low_fits { return high }
+  return low
+}

packages/ludic.ui/render3d.ludic

@@ -6,9 +6,12 @@
 #   border-image: url(button.png) 14     a nine-slice background
 module ludic_ui
 import "render3d_image.ludic"
+import "render3d_nine.ludic"
 var r3u_user: float = 1.0
 var r3u_tex_paths: []string = new []string
 var r3u_tex_ids: []int = new []int
+var r3u_tex_sizes: []int = new []int
+var r3u_tex_seen: []float = new []float
 var r3u_atlas: []string = new []string
 var r3u_atlas_tex: []int = new []int
 var r3u_atlas_cols: []int = new []int

packages/ludic.ui/render3d_image.ludic

@@ -1,20 +1,49 @@
-# render3d_image.ludic - pictures for the render3d backend: a texture by path (loaded once, linear as
-# the overlay wants, clamped at its edges), a cell of a named atlas, and a nine-slice for border-image
+# render3d_image.ludic - pictures for the render3d backend: a texture by path (its sRGB bytes as they
+# are, clamped at its edges, loaded again when the file changes) and a cell of a named atlas
 module ludic_ui
 function r3u_tex(path: string) -> int {
   for i in 0 .. len(r3u_tex_paths) {
-    if r3u_tex_paths[i] == path { return r3u_tex_ids[i] }
+    if r3u_tex_paths[i] == path { return r3u_tex_fresh(i) }
   }
+  push(r3u_tex_paths, path)
+  push(r3u_tex_ids, r3u_tex_load(path))
+  push(r3u_tex_sizes, Fs.size(path))
+  push(r3u_tex_seen, r3u_now())
+  return r3u_tex_ids[len(r3u_tex_ids) - 1]
+}
+# a picture is looked at again every half second: a file that has changed (or that was not there,
+# and is now) is loaded again, so an <img> of a photograph written over the old one shows the new one
+function r3u_tex_fresh(i: int) -> int {
+  let now = r3u_now()
+  if now - r3u_tex_seen[i] < 0.5 and now >= r3u_tex_seen[i] { return r3u_tex_ids[i] }
+  r3u_tex_seen[i] = now
+  let size = Fs.size(r3u_tex_paths[i])
+  if size == r3u_tex_sizes[i] and (r3u_tex_ids[i] != 0 or size < 0) { return r3u_tex_ids[i] }
+  if r3u_tex_ids[i] != 0 { gpu_tex_free(r3u_tex_ids[i]) }
+  r3u_tex_ids[i] = r3u_tex_load(r3u_tex_paths[i])
+  r3u_tex_sizes[i] = size
+  return r3u_tex_ids[i]
+}
+# the interface is drawn in sRGB, and a picture's bytes are sRGB, so they are taken as they are
+# (not decoded to linear, which would darken it); clamped at its edges
+function r3u_tex_load(path: string) -> int {
   let t = tex_load(path, false)
   if t != 0 {
     gpu_tex_bind(GPU_TEX2D, t)
     gpu_tex_param(GPU_TEX2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE)
     gpu_tex_param(GPU_TEX2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE)
   }
-  push(r3u_tex_paths, path)
-  push(r3u_tex_ids, t)
   return t
 }
+# a picture the program has written again, loaded again the next time it is drawn
+export function ui_image_reload(path: string) -> void {
+  for i in 0 .. len(r3u_tex_paths) {
+    if r3u_tex_paths[i] == path {
+      r3u_tex_seen[i] = -1000000.0
+      r3u_tex_sizes[i] = -2
+    }
+  }
+}
 function r3u_image(src: string, x: float, y: float, w: float, h: float, c: int, a: float) -> void {
   var colon = -1
   for i in 0 .. len(src) {
@@ -22,11 +51,12 @@ function r3u_image(src: string, x: float, y: float, w: float, h: float, c: int,
   }
   if colon > 0 {
     let prefix: string = src[0..colon]
-    let name: string = src[colon + 1..len(src)]
     for k in 0 .. len(r3u_atlas) {
-      if r3u_atlas[k] == prefix { r3u_cell(k, name, x, y, w, h, c, a) }
+      if r3u_atlas[k] == prefix {
+        r3u_cell(k, src[colon + 1..len(src)], x, y, w, h, c, a)
+        return
+      }
     }
-    return
   }
   let t = r3u_tex(src)
   if t != 0 { ov_sub(t, int(x), int(y), int(w), int(h), 0.0, 0.0, 1.0, 1.0, r3u_r(c), r3u_g(c), r3u_b(c), a) }
@@ -51,9 +81,3 @@ function r3u_cell(k: int, name: string, x: float, y: float, w: float, h: float,
   let s = Math.min(w, h)
   ov_sub(r3u_atlas_tex[k], int(x + (w - s) / 2.0), int(y + (h - s) / 2.0), int(s), int(s), u0, v0, u0 + 1.0 / float(cols), v0 + 1.0 / float(rows), r3u_r(c), r3u_g(c), r3u_b(c), a)
 }
-# border-image: the texture's `slice`-pixel corners kept, the rest stretched, drawn `dst` wide
-function r3u_nine(src: string, slice: float, x: float, y: float, w: float, h: float, dst: float, c: int, a: float) -> void {
-  let t = r3u_tex(src)
-  if t == 0 { return }
-  ov_nine(t, tex_width(t), int(slice), int(x), int(y), int(w), int(h), int(dst), r3u_r(c), r3u_g(c), r3u_b(c), a)
-}

packages/ludic.ui/render3d_nine.ludic

@@ -0,0 +1,29 @@
+# render3d_nine.ludic - border-image for the render3d backend: a nine-slice of a texture
+module ludic_ui
+# border-image: the texture's `slice`-pixel corners kept, the rest stretched, drawn `dst` wide; the
+# slice is a share of the texture's own width across and its own height down, so it need not be square
+function r3u_nine(src: string, slice: float, x: float, y: float, w: float, h: float, dst: float, c: int, a: float) -> void {
+  let t = r3u_tex(src)
+  if t == 0 { return }
+  let su = slice / float(Math.max(tex_width(t), 1))
+  let sv = slice / float(Math.max(tex_height(t), 1))
+  let xs = r3u_four(x, x + dst, x + w - dst, x + w)
+  let ys = r3u_four(y, y + dst, y + h - dst, y + h)
+  let us = r3u_four(0.0, su, 1.0 - su, 1.0)
+  let vs = r3u_four(0.0, sv, 1.0 - sv, 1.0)
+  for j in 0 .. 3 {
+    for i in 0 .. 3 {
+      let x0 = int(xs[i])
+      let y0 = int(ys[j])
+      ov_sub(t, x0, y0, int(xs[i + 1]) - x0, int(ys[j + 1]) - y0, us[i], vs[j], us[i + 1], vs[j + 1], r3u_r(c), r3u_g(c), r3u_b(c), a)
+    }
+  }
+}
+function r3u_four(a: float, b: float, c: float, d: float) -> []float {
+  let out = new []float
+  push(out, a)
+  push(out, b)
+  push(out, c)
+  push(out, d)
+  return out
+}

packages/ludic.ui/tooltip.ludic

@@ -1,5 +1,6 @@
 # tooltip.ludic - an element's title="..." shown beside the pointer once it has rested on the
-# element for half a second, in a box styled by .ui-tooltip (the default sheet's, or a theme's)
+# element for half a second, in a box styled by .ui-tooltip (the default sheet's, or a theme's); a
+# title of several lines (a newline, or \n) is one .ui-tooltip-text a line
 var tt_key: string = ""
 var tt_since: float = 0.0
 var tt_text: string = ""
@@ -37,7 +38,8 @@ function tt_draw(root: UiNode) -> void {
   n.tag = "div"
   n.parent = root
   n.children = new []UiNode
-  push(n.children, ct_part(root, "ui-tooltip-text", tt_text))
+  let lines = tt_lines(tt_text)
+  for i in 0 .. len(lines) { push(n.children, ct_part(root, "ui-tooltip-text", lines[i])) }
   cs_tree(n)
   ly_measure(n, ly_vp_w * 0.4, ui_px(16.0), root.rfg)
   let x = Math.min(tt_x + ui_px(16.0), ly_vp_x + ly_vp_w - n.mw)
@@ -45,3 +47,19 @@ function tt_draw(root: UiNode) -> void {
   ly_place(n, x, y, n.mw, n.mh)
   fr_draw(n)
 }
+# a title's lines: apart at a newline, or at a written \n (which an attribute cannot hold otherwise)
+function tt_lines(s: string) -> []string {
+  let out = new []string
+  var at = 0
+  var i = 0
+  while i < len(s) {
+    if s[i] == 10 or (s[i] == 92 and i + 1 < len(s) and s[i + 1] == 110) {
+      push(out, s[at..i])
+      if s[i] == 92 { i += 1 }
+      at = i + 1
+    }
+    i += 1
+  }
+  push(out, s[at..len(s)])
+  return out
+}