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>

examples/library/ui_inputs.ludic

@@ -0,0 +1,83 @@
+# ui_inputs.ludic — more of ludic.ui's controls, driven by the keys: a number field takes typed digits
+# (Enter or leaving it commits them, held between min and max) and steps with the arrows; a key field
+# listens for the next key (Tab included), Esc stops it listening and Backspace unbinds it; a range
+# shows its value as a percentage or with decimals and a unit; a label carries a note; an action may
+# call an event named set; and a string prop given a number reads it as text.
+import "ludic.ui"
+import "ui_inputs_parts/Form.ludic"
+import "ui_inputs_parts/Tag.ludic"
+program UiInputs {
+  numbers float
+  function frame(i: UiInput) -> UiNode {
+    ui_input(i)
+    ui_show("Form", null, 0.0, 0.0, 400.0, 400.0)
+    let root: UiNode = ui_nodes("Form", null)
+    ui_place(root, 0.0, 0.0, 400.0, 400.0)
+    return root.children[0]
+  }
+  function keys(tab: bool, shift: bool, enter: bool, left: bool) -> UiInput {
+    let i = new UiInput
+    i.tab = tab
+    i.shift = shift
+    i.enter = enter
+    i.left = left
+    if tab { i.key = Key.Tab }
+    if enter { i.key = Key.Enter }
+    return i
+  }
+  function typed(s: string) -> UiInput {
+    let i = new UiInput
+    i.typed = s
+    return i
+  }
+  function shown_state(page: UiNode) -> string { return page.children[len(page.children) - 1].text }
+  function last(n: UiNode) -> string { return n.children[len(n.children) - 1].text }
+  entry {
+    ui_backend(new UiBackend)
+    var page = frame(new UiInput)
+    frame(keys(true, false, false, false))
+    frame(typed("12"))
+    page = frame(keys(false, false, true, false))
+    let shown = page.children[0].children[1].children[0].text
+    let a = shown_state(page)
+    frame(typed("99"))
+    page = frame(keys(true, false, false, false))
+    let b = shown_state(page)
+    frame(keys(true, true, false, false))
+    page = frame(keys(false, false, false, true))
+    let c = shown_state(page)
+    let note = page.children[0].children[0].children[1].text
+    frame(keys(true, false, false, false))
+    let space = page.children[1].children[1].children[0].text
+    frame(keys(false, false, true, false))
+    let cap = ui_capturing()
+    page = frame(keys(true, false, false, false))
+    let d = shown_state(page)
+    frame(keys(false, false, true, false))
+    let esc = new UiInput
+    esc.escape = true
+    esc.key = Key.Escape
+    page = frame(esc)
+    let e = shown_state(page)
+    let back = new UiInput
+    back.backspace = true
+    page = frame(back)
+    let f = shown_state(page)
+    frame(keys(true, false, false, false))
+    let right = new UiInput
+    right.right = true
+    page = frame(right)
+    page = frame(new UiInput)
+    let button = page.children[4]
+    let click = new UiInput
+    click.x = button.x + 2.0
+    click.y = button.y + 2.0
+    click.down = true
+    frame(click)
+    let up = new UiInput
+    up.x = click.x
+    up.y = click.y
+    page = frame(up)
+    print(`count {shown} {a} | {b} | {c} | {note} | {space} listening {cap} {d} | {e} | {f} | {last(page.children[2])} {last(page.children[3])} | {shown_state(page)} | {page.children[5].text}`)
+  }
+}

examples/library/ui_inputs_parts/Form.lss

@@ -0,0 +1,2 @@
+.page { width: 400px; gap: 4px }
+input { width: fill }

examples/library/ui_inputs_parts/Form.ludic

@@ -0,0 +1,9 @@
+# Form.ludic - a number, a key binding, two ranges with their values formatted, a note under a label,
+# and an event called set
+component Form {
+  state count: int = 5
+  state bind: int = 32
+  state vol: float = 0.5
+  state said: int = 0
+  on set(v: int) { said = v }
+}

examples/library/ui_inputs_parts/Form.xml

@@ -0,0 +1,9 @@
+<div class="page">
+  <input type="number" label="Count" note="How many to carry" min="{0}" max="{20}" value="{count}" on-change="set count = event.value"/>
+  <input type="key" label="Jump" value="{bind}" shown="{bind == 32 ? 'Space bar' : ''}" on-change="set bind = event.value"/>
+  <input type="range" label="Volume" min="{0}" max="{1}" step="{0.1}" value="{vol}" format="percent" on-change="set vol = event.value"/>
+  <input type="range" label="Delay" min="{0}" max="{2}" step="{0.25}" value="{0.5}" decimals="{2}" unit=" s"/>
+  <button on-click="set(9)">Nine</button>
+  <Tag text="{7}"/>
+  <p>{count} {bind} {vol} {said}</p>
+</div>

examples/library/ui_inputs_parts/Tag.ludic

@@ -0,0 +1,4 @@
+# Tag.ludic - a string prop, which a number given to it arrives in as text
+component Tag {
+  prop text: string = "none"
+}

examples/library/ui_inputs_parts/Tag.xml

@@ -0,0 +1 @@
+<p>{text}!</p>

examples/library/ui_look.ludic

@@ -0,0 +1,65 @@
+# ui_look.ludic — what ludic.ui draws, through a backend that writes each call down: a component
+# whose root is another component, styled by every sheet above it by specificity; text-shadow under
+# text; a native reading the opacity it is drawn at (ui_opacity); border-image as painted, tinted by
+# a background colour, and gone under `transparent`; a picture drawn as it is and an atlas cell in
+# the text's colour; a tooltip of two lines; and popovers placed beside their anchors, one flipped.
+import "ludic.ui"
+import "ui_look_parts/Look.ludic"
+import "ui_look_parts/Middle.ludic"
+import "ui_look_parts/Inner.ludic"
+import "ui_look_parts/Menu.ludic"
+program UiLook {
+  numbers float
+  var said: []string = new []string
+  var seen: float = 0.0
+  function rec_rect(x: float, y: float, w: float, h: float, c: int, a: float) -> void { }
+  function rec_text(x: float, y: float, s: string, size: float, c: int, a: float) -> void { push(said, `text {s} {int(x)},{int(y)} {ui_hex(c)}`) }
+  function rec_image(src: string, x: float, y: float, w: float, h: float, c: int, a: float) -> void { push(said, `image {src} {ui_hex(c)}`) }
+  function rec_nine(src: string, slice: float, x: float, y: float, w: float, h: float, dst: float, c: int, a: float) -> void { push(said, `nine {int(w)} {ui_hex(c)}`) }
+  function gauge_measure(n: UiNode, avail: float) -> void { }
+  function gauge_draw(n: UiNode) -> void { seen = ui_opacity() }
+  function count(s: string) -> int {
+    var n = 0
+    for i in 0 .. len(said) {
+      if Text.starts_with(said[i], s) { n += 1 }
+    }
+    return n
+  }
+  function has(s: string) -> string {
+    for i in 0 .. len(said) {
+      if Text.starts_with(said[i], s) { return said[i] }
+    }
+    return "-"
+  }
+  function show(name: string, i: UiInput) -> UiNode {
+    ui_input(i)
+    said = new []string
+    ui_show(name, null, 0.0, 0.0, 400.0, 300.0)
+    let root: UiNode = ui_nodes(name, null)
+    ui_place(root, 0.0, 0.0, 400.0, 300.0)
+    return root.children[0]
+  }
+  entry {
+    let b = new UiBackend
+    b.rect = fn rec_rect
+    b.text = fn rec_text
+    b.image = fn rec_image
+    b.nine = fn rec_nine
+    ui_backend(b)
+    ui_native("gauge", fn gauge_measure, fn gauge_draw)
+    var page = show("Look", new UiInput)
+    let inner = page.children[0]
+    let tip = page.children[7]
+    let rest = new UiInput
+    rest.x = tip.x + 2.0
+    rest.y = tip.y + 2.0
+    for f in 0 .. 40 { page = show("Look", rest) }
+    print(`root {inner.tag}.{inner.classes[0]}.{inner.classes[1]}.{inner.classes[2]} pad {int(inner.pt)} margin {int(inner.mt)} color {ui_hex(inner.fg)}`)
+    print(`{has("text Hi")} | {has("text Hi 0")} | opacity {seen} | {has("nine 40 #ffffff")} {has("nine 40 #ff0000")} of {count("nine")}`)
+    print(`{has("image photo")} | {has("image icon")} | {has("text first")} | {has("text second")}`)
+    let menu = show("Menu", new UiInput)
+    let a = menu.children[1]
+    let c = menu.children[3]
+    print(`by id at {int(a.x)},{int(a.y)} | flipped at {int(c.x)},{int(c.y)} {int(c.cw)}x{int(c.ch)}`)
+  }
+}

examples/library/ui_look_parts/Inner.lss

@@ -0,0 +1 @@
+div.in { padding: 5px }

examples/library/ui_look_parts/Inner.ludic

@@ -0,0 +1,4 @@
+# Inner.ludic - the innermost root: its own rule is more specific than Middle's, so it holds
+component Inner {
+  state n: int = 0
+}

examples/library/ui_look_parts/Inner.xml

@@ -0,0 +1 @@
+<div class="in"><p>in</p></div>

examples/library/ui_look_parts/Look.lss

@@ -0,0 +1,9 @@
+.page { width: 400px; gap: 2px }
+.m { margin: 9px }
+.shade { text-shadow: 2px 3px 4px #102030 }
+.dim { opacity: 0.5 }
+gauge { width: 10px; height: 10px }
+.chip { width: 40px; height: 20px; border-image: url(chip.png) 8 }
+.clear { background: transparent }
+.red { background: #ff0000 }
+.pics { flex-direction: row; color: #00ff00 }

examples/library/ui_look_parts/Look.ludic

@@ -0,0 +1,5 @@
+# Look.ludic - what is drawn: a nested component's root styled by every sheet above it, a shadow
+# under text, a native at its group's opacity, border-images, pictures, and a tooltip of two lines
+component Look {
+  state n: int = 0
+}

examples/library/ui_look_parts/Look.xml

@@ -0,0 +1,10 @@
+<div class="page">
+  <Middle class="m"/>
+  <div class="shade"><p>Hi</p></div>
+  <div class="dim"><gauge class="dim"/></div>
+  <div class="chip clear"></div>
+  <div class="chip"></div>
+  <div class="chip red"></div>
+  <div class="pics"><img src="photo.png"/><img src="icon:tent"/></div>
+  <p class="tip" title="first line\nsecond line">rest here</p>
+</div>

examples/library/ui_look_parts/Menu.lss

@@ -0,0 +1,4 @@
+.page { width: 400px; height: 300px }
+.cell { position: absolute; left: 20px; top: 50px; width: 60px; height: 30px }
+.edge { position: absolute; left: 350px; top: 280px; width: 50px; height: 30px }
+.verbs { width: 100px; margin-left: 4px; margin-right: 4px }

examples/library/ui_look_parts/Menu.ludic

@@ -0,0 +1,5 @@
+# Menu.ludic - popovers beside what they belong to: one by the anchor's id, one beside the element
+# before it, which has no room on its right and opens to the left
+component Menu {
+  state n: int = 0
+}

examples/library/ui_look_parts/Menu.xml

@@ -0,0 +1,6 @@
+<div class="page">
+  <button id="cell" class="cell">Axe</button>
+  <div popover anchor="cell" class="verbs"><button>Drop</button></div>
+  <button class="edge">Rope</button>
+  <div popover anchor placement="right" class="verbs"><button>Give</button></div>
+</div>

examples/library/ui_look_parts/Middle.lss

@@ -0,0 +1 @@
+.i { padding: 3px; color: #ff0000 }

examples/library/ui_look_parts/Middle.ludic

@@ -0,0 +1,4 @@
+# Middle.ludic - a component whose root is another component
+component Middle {
+  state n: int = 0
+}

examples/library/ui_look_parts/Middle.xml

@@ -0,0 +1 @@
+<Inner class="i"/>