feat(ui): pointer events for natives and elements, with capture; on-down and on-up; hits in painting order

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

examples/library/ui_pointer.ludic

@@ -0,0 +1,60 @@
+# ui_pointer.ludic — pointer events: a native map takes presses, drags (still its own when the
+# pointer leaves it, until let go), the wheel and the release, but not a press on the button over it;
+# a pad takes the same in markup; a hold button says on-down and on-up, and is :active while held.
+import "ludic.ui"
+import "ui_pointer_parts/Chart.ludic"
+program UiPointer {
+  numbers float
+  var log: string = ""
+  var dragged: float = 0.0
+  function map_measure(n: UiNode, avail: float) -> void { }
+  function map_draw(n: UiNode) -> void { }
+  function map_input(n: UiNode, e: UiPointer) -> bool {
+    if e.kind == "drag" { dragged = dragged + e.dx } else if e.kind != "pointermove" { log = log + `{e.kind} {int(e.x)},{int(e.y)} {e.button} {int(e.wheel)}; ` }
+    return true
+  }
+  function frame(x: float, y: float, down: bool, wheel: float, enter: bool) -> UiNode {
+    let i = new UiInput
+    i.x = x
+    i.y = y
+    i.down = down
+    i.wheel = wheel
+    i.held_enter = enter
+    ui_input(i)
+    ui_show("Chart", null, 0.0, 0.0, 400.0, 400.0)
+    let root: UiNode = ui_nodes("Chart", null)
+    ui_place(root, 0.0, 0.0, 400.0, 400.0)
+    return root.children[0]
+  }
+  function said(page: UiNode) -> string { return page.children[len(page.children) - 1].text }
+  entry {
+    ui_backend(new UiBackend)
+    ui_native("chartmap", fn map_measure, fn map_draw)
+    ui_native_input("chartmap", fn map_input)
+    let page = frame(-1.0, -1.0, false, 0.0, false)
+    let box = page.children[0]
+    let pad = page.children[1]
+    let hold = page.children[2]
+    frame(box.x + 20.0, box.y + 20.0, true, 0.0, false)
+    frame(box.x + 20.0, box.y + 20.0, false, 0.0, false)
+    frame(box.x + 100.0, box.y + 80.0, true, 0.0, false)
+    frame(box.x + 130.0, box.y + 60.0, true, 0.0, false)
+    frame(box.x + 300.0, box.y + 300.0, true, 0.0, false)
+    frame(box.x + 300.0, box.y + 300.0, false, 0.0, false)
+    frame(box.x + 50.0, box.y + 50.0, false, 1.0, false)
+    frame(pad.x + 7.0, pad.y + 9.0, true, 0.0, false)
+    frame(pad.x + 17.0, pad.y + 9.0, true, 0.0, false)
+    frame(pad.x + 17.0, pad.y + 9.0, false, 0.0, false)
+    frame(pad.x + 17.0, pad.y + 9.0, false, 2.0, false)
+    frame(hold.x + 5.0, hold.y + 5.0, true, 0.0, false)
+    let down = frame(hold.x + 5.0, hold.y + 5.0, true, 0.0, false)
+    let active = down.children[2].bg
+    let mid = said(down)
+    frame(hold.x + 5.0, hold.y + 90.0, false, 0.0, false)
+    let off = frame(-1.0, -1.0, false, 0.0, false)
+    frame(-1.0, -1.0, false, 0.0, true)
+    let keyed = said(frame(-1.0, -1.0, false, 0.0, true))
+    let up = frame(-1.0, -1.0, false, 0.0, false)
+    print(`{log}dragged {int(dragged)} | {mid} active {active} | {said(off)} | {keyed} | {said(up)} {up.children[2].bg}`)
+  }
+}

examples/library/ui_pointer_parts/Chart.lss

@@ -0,0 +1,7 @@
+.page { width: 400px; gap: 4px }
+.box { width: 200px; height: 100px; position: relative }
+.map { width: 200px; height: 100px }
+.zoom { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; padding: 0 }
+.pad { width: 100px; height: 50px }
+.hold { width: 80px; height: 30px }
+.hold:active { background: #ff0000 }

examples/library/ui_pointer_parts/Chart.ludic

@@ -0,0 +1,12 @@
+# Chart.ludic - a native map with a zoom button over it, a pad that takes pointer events in markup,
+# and a hold button that says when it goes down and comes up
+component Chart {
+  state zoomed: int = 0
+  state px: float = -1.0
+  state dragx: float = 0.0
+  state ups: int = 0
+  state wh: float = 0.0
+  state holding: bool = false
+  state held: int = 0
+  state clicked: int = 0
+}

examples/library/ui_pointer_parts/Chart.xml

@@ -0,0 +1,9 @@
+<div class="page">
+  <div class="box">
+    <chartmap class="map"/>
+    <button class="zoom" on-click="set zoomed = zoomed + 1">+</button>
+  </div>
+  <div class="pad" on-pointerdown="set px = event.x" on-drag="set dragx = dragx + event.dx" on-pointerup="set ups = ups + 1" on-wheel="set wh = wh + event.wheel"></div>
+  <button class="hold" on-down="set holding = true" on-up="set holding = false; set held = held + 1" on-click="set clicked = clicked + 1">Hold</button>
+  <p>zoomed {zoomed} pad {px} {dragx} {ups} {wh} hold {holding} {held} {clicked}</p>
+</div>