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_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"/>