@solidrt/core 0.0.17 → 0.0.19

package/examples/README.md

@@ -24,4 +24,10 @@ for the element/prop model see `@solidrt/core/AGENTS.md`.
 
 ## Images and GPU
 - `image.tsx` - `createImage` (async value: fetch + decode + upload) read inside a `<Loading>` boundary and shown with `<texture>`.
-- `gpu-shader.tsx` - a GLSL fragment shader rendered to a texture, animated via `setShaderParams`.
+- `gpu-shader.tsx` - a GLSL fragment shader rendered to a texture, animated via `setShaderParams`.
+
+## Vector graphics
+- `svg.tsx` - `<svg src={...}>` draws a whole SVG *document string* (not HTML/JSX children); multi-color fills vs a `currentColor` icon recolored by the `color` prop. This is how to use existing icon libraries (Lucide, Heroicons, etc.) - hand their SVG source to `src`.
+
+## Bundling assets
+- `binary-import.tsx` - `import bytes from "./file" with { type: "binary" }` inlines a file's bytes into the bundle as a `Uint8Array` (combine with `image.tsx` to display an inlined image). `with { type: "text" }` works the same way for a string.

package/examples/binary-import.tsx

@@ -0,0 +1,26 @@
+// Importing a file with `with { type: "binary" }` inlines its bytes into the
+// bundle as a Uint8Array. The data travels inside the compiled bytecode, so it
+// is available synchronously - no runtime fetch, works offline. Reach for this
+// with small assets you want baked in; for large or many assets prefer a string
+// URL source loaded at runtime instead.
+//
+// This example shows only the binary import itself: it reports the imported
+// file's length and leading bytes. What you do with the bytes afterwards is a
+// separate concern - e.g. hand them to createImage to decode and display an
+// image (see image.tsx), or to decodeImage/createTexture for manual control.
+import { render } from "@solidrt/core"
+import bytes from "./logo.png" with { type: "binary" }
+
+// The PNG magic number: 89 50 4e 47 ... - proof the real bytes are inlined.
+let head = Array.from(bytes.slice(0, 8), (b) => b.toString(16).padStart(2, "0")).join(" ")
+
+function App() {
+  return (
+    <window alignItems="center" justifyContent="center" gap={8}>
+      <text fontSize={18} color="#e6e6e6">{bytes.length} bytes inlined</text>
+      <text color="#888">starts with {head}</text>
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/svg.tsx

@@ -0,0 +1,45 @@
+// <svg> draws a whole SVG *document* passed as a STRING in the `src` prop. This
+// is not HTML: there are no per-element <rect>/<circle>/<path> JSX children to
+// nest. You hand it the SVG source text and usvg parses it (CSS, transforms,
+// defs/use, gradients, clips) into a flat path tree the element renders. So an
+// SVG is a value (a string you import, fetch, or inline), not markup you author
+// inline with JSX.
+//
+// width/height set the drawn box (percentages work too); a multi-color document
+// keeps each shape's own fill, while a monochrome icon using stroke/fill
+// "currentColor" is recolored by the host `color` prop. For per-shape authored
+// or animated vector art, compose <d-path> instead of this document layer.
+//
+// This is how you use an existing icon library (Lucide, Heroicons, Feather,
+// Material, etc.): those ship SVG source, so import/inline the icon string and
+// hand it to `src`. The `currentColor` convention they follow means the `color`
+// prop recolors them, exactly as `currentColor` would in a browser.
+import { render } from "@solidrt/core"
+
+// Multi-color document: each shape carries its own fill, no host color needed.
+const HOUSE = `
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <rect x="20" y="45" width="60" height="45" fill="#457b9d"/>
+  <path d="M10 50 L50 15 L90 50 Z" fill="#e63946"/>
+  <rect x="42" y="62" width="16" height="28" fill="#f1faee"/>
+  <circle cx="50" cy="35" r="6" fill="#ffd166"/>
+</svg>`
+
+// Monochrome icon (Lucide arrow-right) drawn with currentColor, recolored below.
+const ARROW = `
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+     stroke-linecap="round" stroke-linejoin="round">
+  <path d="M5 12h14"/>
+  <path d="M12 5l7 7-7 7"/>
+</svg>`
+
+function App() {
+  return (
+    <window justifyContent="center" alignItems="center" flexDirection="row" gap={32}>
+      <svg width={120} height={120} src={HOUSE} />
+      <svg width={120} height={120} src={ARROW} color="#4f8cff" />
+    </window>
+  )
+}
+
+render(() => <App />)

package/jsx-runtime.d.ts

@@ -8,13 +8,14 @@ import type {
   TextProps,
   TextureProps,
   AudioProps,
-  LayoutProps
+  LayoutProps,
+  Element as CoreElement,
+  ElementChildrenAttribute as CoreElementChildrenAttribute
 } from "./src/types"
-import type { JSX as SolidJSX } from "@solidjs/signals"
 
 export namespace JSX {
-  type Element = SolidJSX.Element
-  type ElementChildrenAttribute = SolidJSX.ElementChildrenAttribute
+  type Element = CoreElement
+  type ElementChildrenAttribute = CoreElementChildrenAttribute
 
   // Return type is unconstrained: a ref callback's return value is ignored, so
   // an arrow like `ref={n => (this.node = n)}` (which returns the assignment)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/core",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",

package/src/capabilities.ts

@@ -0,0 +1,48 @@
+import { env } from "./environment"
+
+// Capabilities: what interactions are possible in the current environment.
+// Derived from Environment State on every read - computed, never stored - so
+// they are reactive wherever env is. Capabilities describe what is possible,
+// not how the UI should behave; behavior lives in the policy layer on top.
+//
+// Device presence wins when the runtime reports it (so unplugging the mouse
+// drops hover); the traffic-inferred seen-flags are the fallback for runtimes
+// without device enumeration.
+
+export type WindowSizeClass = "compact" | "medium" | "expanded"
+
+export type Capabilities = {
+  /** A pointer can rest over content without pressing (mouse/trackpad). */
+  hover: boolean
+  /** Pixel-precise pointing (mouse/trackpad), as opposed to a finger. */
+  precisePointer: boolean
+  /** Direct touch input. */
+  touch: boolean
+  /** Hardware-key navigation (tab/arrow traversal, shortcuts). */
+  keyboardNav: boolean
+  /** How much horizontal room the window offers (Material breakpoints). */
+  windowSizeClass: WindowSizeClass
+}
+
+// Material 3 width breakpoints, in logical pixels.
+const MEDIUM_MIN_WIDTH = 600
+const EXPANDED_MIN_WIDTH = 840
+
+export let capabilities: Capabilities = {
+  get hover() {
+    return env.inputDevices?.mouse ?? env.mouseSeen
+  },
+  get precisePointer() {
+    return env.inputDevices?.mouse ?? env.mouseSeen
+  },
+  get touch() {
+    return env.inputDevices?.touch ?? env.touchSeen
+  },
+  get keyboardNav() {
+    return env.inputDevices?.keyboard ?? env.keyboardSeen
+  },
+  get windowSizeClass(): WindowSizeClass {
+    let w = env.windowSize.width
+    return w >= EXPANDED_MIN_WIDTH ? "expanded" : w >= MEDIUM_MIN_WIDTH ? "medium" : "compact"
+  },
+}

package/src/environment.ts

@@ -0,0 +1,155 @@
+import { createSignal } from "@solidjs/signals"
+import { on } from "srt:events"
+import { windowSize, safeArea, displayScale, windowFocused, keyboardHeight } from "./window"
+
+// Environment State: reactive facts about the current execution environment.
+//
+// Device presence comes from the runtime's sticky "inputDevices" event (init +
+// hotplug). Runtimes that do not emit it leave `inputDevices` undefined, and
+// the seen-flags below act as the fallback: a pointer type or key press has
+// been seen this session. Seen-flags only ever go from false to true, so a
+// capability derived from them can appear mid-session (e.g. the first mouse
+// move) but never flickers away.
+
+/** Connected input device classes, as reported by the runtime. */
+export interface InputDevices {
+  keyboard: boolean
+  mouse: boolean
+  touch: boolean
+}
+
+export type SystemTheme = "dark" | "light" | "unknown"
+
+export type Orientation = "portrait" | "portraitFlipped" | "landscape" | "landscapeFlipped" | "unknown"
+
+let devicesAccessor: (() => InputDevices | undefined) | undefined
+
+function ensureDevicesState() {
+  if (devicesAccessor) return
+  let [devices, setDevices] = createSignal<InputDevices | undefined>(undefined)
+  // Sticky: the current state replays on subscribe, so the first read already
+  // sees it on runtimes that report devices.
+  on("inputDevices", (d: InputDevices) => {
+    setDevices({ keyboard: !!d.keyboard, mouse: !!d.mouse, touch: !!d.touch })
+  })
+  devicesAccessor = devices
+}
+
+let systemThemeAccessor: (() => SystemTheme) | undefined
+
+function ensureSystemThemeState() {
+  if (systemThemeAccessor) return
+  let [theme, setTheme] = createSignal<SystemTheme>("unknown")
+  on("systemTheme", (e: { theme?: SystemTheme }) => setTheme(e.theme ?? "unknown"))
+  systemThemeAccessor = theme
+}
+
+let orientationAccessor: (() => Orientation) | undefined
+
+function ensureOrientationState() {
+  if (orientationAccessor) return
+  let [orientation, setOrientation] = createSignal<Orientation>("unknown")
+  on("displayOrientation", (e: { orientation?: Orientation }) => {
+    setOrientation(e.orientation ?? "unknown")
+  })
+  orientationAccessor = orientation
+}
+
+let mouseSeenAccessor: (() => boolean) | undefined
+let touchSeenAccessor: (() => boolean) | undefined
+
+function ensurePointerState() {
+  if (mouseSeenAccessor) return
+  let [mouse, setMouse] = createSignal(false)
+  let [touch, setTouch] = createSignal(false)
+  let sawMouse = false
+  let sawTouch = false
+  let unsubs: (() => void)[] = []
+  let note = (e: { pointerType?: string }) => {
+    if (e.pointerType === "mouse" && !sawMouse) {
+      sawMouse = true
+      setMouse(true)
+    } else if (e.pointerType === "touch" && !sawTouch) {
+      sawTouch = true
+      setTouch(true)
+    }
+    // Both types observed: nothing left to learn, stop listening.
+    if (sawMouse && sawTouch) for (let u of unsubs) u()
+  }
+  unsubs.push(on("pointerMove", note), on("pointerDown", note))
+  mouseSeenAccessor = mouse
+  touchSeenAccessor = touch
+}
+
+let keyboardSeenAccessor: (() => boolean) | undefined
+
+function ensureKeyboardState() {
+  if (keyboardSeenAccessor) return
+  let [keyboard, setKeyboard] = createSignal(false)
+  // Soft keyboards also deliver some keydowns (Backspace, Return), so this can
+  // read true on a touch-only device once the user types in a field. Only a
+  // fallback: capabilities prefer runtime-reported device presence.
+  let unsub = on("keydown", () => {
+    setKeyboard(true)
+    unsub()
+  })
+  keyboardSeenAccessor = keyboard
+}
+
+/**
+ * Reactive Environment State: what the framework observes about where it is
+ * running. Read properties inside a tracked scope (JSX, memo, effect) to re-run
+ * when they change. Behavior decisions should go through `capabilities` and the
+ * policy layer; read `env` directly only when the raw fact itself is needed.
+ */
+export let env = {
+  get windowSize() {
+    return windowSize()
+  },
+  get safeArea() {
+    return safeArea()
+  },
+  get displayScale() {
+    return displayScale()
+  },
+  get windowFocused() {
+    return windowFocused()
+  },
+  get keyboardHeight() {
+    return keyboardHeight()
+  },
+  /**
+   * Connected input device classes, or undefined until the runtime reports
+   * them (it does so at startup, so undefined normally means the runtime has
+   * no device enumeration).
+   */
+  get inputDevices(): InputDevices | undefined {
+    ensureDevicesState()
+    return devicesAccessor!()
+  },
+  /** The OS-level dark/light preference. */
+  get systemTheme(): SystemTheme {
+    ensureSystemThemeState()
+    return systemThemeAccessor!()
+  },
+  /** Orientation of the display the window is on. */
+  get orientation(): Orientation {
+    ensureOrientationState()
+    return orientationAccessor!()
+  },
+  /** A mouse (or trackpad) pointer has produced events this session. */
+  get mouseSeen(): boolean {
+    ensurePointerState()
+    return mouseSeenAccessor!()
+  },
+  /** A touch pointer has produced events this session. */
+  get touchSeen(): boolean {
+    ensurePointerState()
+    return touchSeenAccessor!()
+  },
+  /** A key press has been delivered this session. */
+  get keyboardSeen(): boolean {
+    ensureKeyboardState()
+    return keyboardSeenAccessor!()
+  },
+}

package/src/image.ts

@@ -56,7 +56,7 @@ export function createImage(src: ImageSource | (() => ImageSource)): () => numbe
     // If the source changed while we were loading, this run is superseded. Skip
     // the GPU upload and stay pending: a texture created here would leak, since
     // superseded async runs are not otherwise cleaned up. The newer run wins.
-    if (mine !== generation) throw new NotReadyError()
+    if (mine !== generation) throw new NotReadyError(source)
 
     let { data, width, height } = decodeImage(bytes)
     holder.id = createTexture(data, width, height)

package/src/index.ts

@@ -4,7 +4,12 @@ export type { BoundingBox } from "./core"
 export { parseColor, createLinearGradient, createRadialGradient } from "./color"
 export type { Gradient, GradientStop } from "./color"
 export { onFrame, onLayout, onResize, onWindowFocus, onWindowBlur } from "./window"
+export { setPointerCapture, releasePointerCapture } from "./window"
 export { windowSize, safeArea, displayScale, windowFocused, keyboardHeight } from "./window"
+export { env } from "./environment"
+export type { InputDevices, SystemTheme, Orientation } from "./environment"
+export { capabilities } from "./capabilities"
+export type { Capabilities, WindowSizeClass } from "./capabilities"
 export { createTexture } from "./gpu"
 export { createImage, decodeImage } from "./image"
 export type { DecodedImage, ImageSource } from "./image"

package/src/renderer.ts

@@ -30,9 +30,42 @@ function createProxyNode(elementType: ElementType): ProxyNode {
   return node
 }
 
-// Detaches `node` from `parent` and destroys it (and all descendants) on both
-// the JS and native sides. Hoisted out of the renderer config so createPortal
-// can reuse it (createRenderer does not return its removeNode hook).
+// Nodes detached this tick and awaiting the destroy sweep, keyed by id so a
+// re-insert can cancel one. See removeNode / flushDestroy.
+let pendingDestroy = new Map<number, ProxyNode>()
+let destroyScheduled = false
+
+// Frees a detached node and its subtree on both sides. Descendants that were
+// moved out (their parent no longer points here) are left alone. Clear focus
+// before dropping handlers so onBlur still fires for a focused descendant.
+function destroyNode(node: ProxyNode): void {
+  tree.destroyNode(node.id)
+  let cleanup = (n: ProxyNode) => {
+    for (let child of n.children) if (child.parent === n) cleanup(child)
+    if (n.id === getFocusedNodeId()) setFocus(null)
+    nodes.delete(n.id)
+    cleanupNodeHandlers(n.id)
+  }
+  cleanup(node)
+}
+
+// End-of-tick sweep: destroy every still-detached pending node. A node that was
+// re-inserted this tick had its entry removed by insertNode (it moved, not
+// died); one still parentless here is genuinely gone.
+function flushDestroy(): void {
+  destroyScheduled = false
+  let batch = pendingDestroy
+  pendingDestroy = new Map()
+  for (let node of batch.values()) {
+    if (node.parent === undefined) destroyNode(node)
+  }
+}
+
+// Detaches `node` from `parent`, keeping the subtree alive so it can be
+// re-inserted elsewhere (a move) - matching DOM removeChild. Destruction is
+// deferred to an end-of-tick sweep; if nothing re-attaches the node by then it
+// is freed. Hoisted out of the renderer config so createPortal can reuse it
+// (createRenderer does not return its removeNode hook).
 function removeNode(parent: ProxyNode, node: ProxyNode): void {
   if (!node || !parent) return
 
@@ -45,17 +78,13 @@ function removeNode(parent: ProxyNode, node: ProxyNode): void {
   }
   node.parent = undefined
 
-  tree.deleteNode(parent.id, node.id)
+  tree.detachNode(parent.id, node.id)
 
-  // Recursively clean up node and all descendants. Clear focus before
-  // dropping handlers so onBlur still fires for a focused descendant.
-  let cleanup = (n: ProxyNode) => {
-    for (let child of n.children) cleanup(child)
-    if (n.id === getFocusedNodeId()) setFocus(null)
-    nodes.delete(n.id)
-    cleanupNodeHandlers(n.id)
+  pendingDestroy.set(node.id, node)
+  if (!destroyScheduled) {
+    destroyScheduled = true
+    Promise.resolve().then(flushDestroy)
   }
-  cleanup(node)
 }
 
 export let {
@@ -123,6 +152,10 @@ export let {
   insertNode: (parent: ProxyNode, node: ProxyNode, anchor?: ProxyNode): void => {
     if (!node) return
 
+    // A re-inserted node is being moved, not destroyed: cancel its pending
+    // destroy so the end-of-tick sweep leaves it (and its subtree) alone.
+    pendingDestroy.delete(node.id)
+
     if (parent) {
       node.parent = parent
 

package/src/runtime-modules.d.ts

@@ -0,0 +1,52 @@
+// Lattice runner builtin modules (the "srt:*" surface). These are ambient
+// module declarations, so they live in this global-script .d.ts (no top-level
+// import/export) rather than in types.d.ts: an ambient `declare module` only
+// becomes globally visible to consumers from a non-module declaration file.
+
+declare module "*.svg" {
+  const content: string
+  export default content
+}
+
+// Binary asset imports: `import data from "./pic.png" with { type: "binary" }`.
+// The bundler inlines the file's bytes as a Uint8Array (see packages/cli
+// bundler `binaryImport`); feed it straight into createImage/decodeImage.
+declare module "*.png" {
+  const bytes: Uint8Array
+  export default bytes
+}
+declare module "*.jpg" {
+  const bytes: Uint8Array
+  export default bytes
+}
+declare module "*.jpeg" {
+  const bytes: Uint8Array
+  export default bytes
+}
+
+// UI event bus (lattice), provided by the runtime as a builtin module.
+// on/once return an unsubscribe function.
+declare module "srt:events" {
+  export function on(event: string, callback: (data: any) => void): () => void
+  export function once(event: string, callback: (data: any) => void): () => void
+}
+
+// Dev-server control surface (lattice). Present only in dev/go builds; in other
+// builds `available` is false and the functions are no-ops.
+declare module "srt:dev" {
+  export const available: boolean
+  export const canDiscover: boolean
+  export const recents: string[]
+  export function connect(address: string): void
+  export function discover(): void
+  export function stop(): void
+}
+
+// Frame draw (lattice runner). renderFrame() synchronously renders the current
+// frame: layout, the postLayout hook, paint and hover refresh, then builds and
+// submits the display list. To schedule a future frame instead, use
+// requestFrame() from "flux:rendertree". The tree-building surface itself is
+// "flux:rendertree" (from @solidrt/flux-types).
+declare module "srt:render" {
+  export function renderFrame(): void
+}

package/src/types.d.ts

@@ -1,34 +1,12 @@
 /// <reference types="@solidrt/flux-types" />
+/// <reference path="./runtime-modules.d.ts" />
 
-import type { JSX as SolidJSX } from "@solidjs/signals"
 import type { Gradient } from "./color"
+import type { Element } from "solid-js"
 
-// UI event bus (lattice), provided by the runtime as a builtin module.
-// on/once return an unsubscribe function.
-declare module "srt:events" {
-  export function on(event: string, callback: (data: any) => void): () => void
-  export function once(event: string, callback: (data: any) => void): () => void
-}
-
-// Dev-server control surface (lattice). Present only in dev/go builds; in other
-// builds `available` is false and the functions are no-ops.
-declare module "srt:dev" {
-  export const available: boolean
-  export const canDiscover: boolean
-  export const recents: string[]
-  export function connect(address: string): void
-  export function discover(): void
-  export function stop(): void
-}
-
-// Frame draw (lattice runner). renderFrame() synchronously renders the current
-// frame: layout, the postLayout hook, paint and hover refresh, then builds and
-// submits the display list. To schedule a future frame instead, use
-// requestFrame() from "flux:rendertree". The tree-building surface itself is
-// "flux:rendertree" (from @solidrt/flux-types).
-declare module "srt:render" {
-  export function renderFrame(): void
-}
+// The "srt:*" lattice runner modules are declared in ./runtime-modules.d.ts
+// (referenced above) - ambient `declare module` only reaches consumers from a
+// non-module declaration file, and this file is a module.
 
 declare global {
   let image: {
@@ -48,7 +26,16 @@ declare global {
   }
 }
 
-type Children = SolidJSX.Element
+// JSX value model. The element type is solid-js's (its control-flow components
+// like <For> return it, so JSX.Element must match). @solidjs/signals ships no
+// JSX namespace and solid-js defines no ElementChildrenAttribute, so we supply
+// that here - its single key tells TS which prop receives JSX children.
+export type { Element }
+export interface ElementChildrenAttribute {
+  children: {}
+}
+
+type Children = Element
 
 interface FlexboxProps {
   gap?: number
@@ -166,6 +153,10 @@ export interface PointerEvent {
   ctrlKey: boolean
   altKey: boolean
   metaKey: boolean
+  // Stops the event from reaching ancestor handlers. Events dispatch leaf->root
+  // (bubbling), so calling this in a child prevents the enclosing node from
+  // seeing it (e.g. a slider claiming a drag so an ancestor scroller ignores it).
+  stopPropagation: () => void
 }
 
 export interface WheelEvent extends PointerEvent {

package/src/window.ts

@@ -4,6 +4,28 @@ import { renderFrame } from "srt:render"
 import { on, once } from "srt:events"
 import { getEventHandler, getFocusedNodeId, setFocus } from "./core"
 
+// ------ Pointer capture -----------------
+
+// Active pointer captures, pointerId -> nodeId. While a pointer is captured, its
+// move/up events dispatch straight to the captured node (bypassing hit testing),
+// so a drag keeps working when the pointer drifts off the element. Modeled on the
+// web setPointerCapture; capture auto-releases on pointerUp.
+let pointerCaptures = new Map<number, number>()
+
+/**
+ * Routes all further move/up events for `pointerId` to `nodeId` until release,
+ * regardless of what is under the pointer. Call from a pointerdown handler to own
+ * a drag (e.g. a slider). Auto-releases on the matching pointerup.
+ */
+export function setPointerCapture(nodeId: number, pointerId: number) {
+  pointerCaptures.set(pointerId, nodeId)
+}
+
+/** Ends a capture early. Not needed for the common case (pointerup releases it). */
+export function releasePointerCapture(pointerId: number) {
+  pointerCaptures.delete(pointerId)
+}
+
 // ------ Animation frames ----------------
 
 let nextFrameId = 1
@@ -201,12 +223,24 @@ export function attachWindow(_nodeId: number) {
       runFrame(time * 1000, frame)
     })
 
+    // Dispatch an event to every node on the hit path, leaf->root (bubbling), so
+    // a child handler can call e.stopPropagation() to keep the event from
+    // reaching its ancestors. `targets` arrives root->leaf, hence the reverse.
+    let bubble = (targets: number[], handler: string, e: any) => {
+      let stopped = false
+      e.stopPropagation = () => {
+        stopped = true
+      }
+      for (let i = targets.length - 1; i >= 0; i--) {
+        getEventHandler(targets[i]!, handler)?.(e)
+        if (stopped) break
+      }
+    }
+
     unsubDown = on(
       "pointerDown",
       ({ targets, ...e }: { targets: number[]; [k: string]: any }) => {
-        for (let nodeId of targets) {
-          getEventHandler(nodeId, "onPointerDown")?.(e)
-        }
+        bubble(targets, "onPointerDown", e)
         // Outside-tap blur. Read focus AFTER per-node handlers so a tap that
         // moves focus to a new node is not immediately blurred again.
         let focused = getFocusedNodeId()
@@ -217,42 +251,61 @@ export function attachWindow(_nodeId: number) {
     )
 
     unsubUp = on("pointerUp", ({ targets, ...e }: { targets: number[]; [k: string]: any }) => {
-      for (let nodeId of targets) {
-        getEventHandler(nodeId, "onPointerUp")?.(e)
+      let captured = pointerCaptures.get(e.pointerId)
+      if (captured != null) {
+        // Deliver to the captured node, then release (web auto-release on up).
+        e.stopPropagation = () => {}
+        getEventHandler(captured, "onPointerUp")?.(e)
+        pointerCaptures.delete(e.pointerId)
+        return
       }
+      bubble(targets, "onPointerUp", e)
     })
 
     unsubMove = on(
       "pointerMove",
       ({ targets, ...e }: { targets: number[]; [k: string]: any }) => {
-        for (let nodeId of targets) {
-          getEventHandler(nodeId, "onPointerMove")?.(e)
+        let captured = pointerCaptures.get(e.pointerId)
+        if (captured != null) {
+          // Captured drags get moves anywhere over the window, bypassing hit test.
+          e.stopPropagation = () => {}
+          getEventHandler(captured, "onPointerMove")?.(e)
+          return
         }
+        bubble(targets, "onPointerMove", e)
       },
     )
 
+    // Enter/leave keep their hover-diff order (already leaf->root for leave,
+    // root->leaf for enter), but still honor stopPropagation for a consistent
+    // event shape.
+    let dispatchOrdered = (targets: number[], handler: string, e: any) => {
+      let stopped = false
+      e.stopPropagation = () => {
+        stopped = true
+      }
+      for (let nodeId of targets) {
+        getEventHandler(nodeId, handler)?.(e)
+        if (stopped) break
+      }
+    }
+
     unsubEnter = on(
       "pointerEnter",
       ({ targets, ...e }: { targets: number[]; [k: string]: any }) => {
-        for (let nodeId of targets) {
-          getEventHandler(nodeId, "onPointerEnter")?.(e)
-        }
+        dispatchOrdered(targets, "onPointerEnter", e)
       },
     )
 
     unsubLeave = on(
       "pointerLeave",
       ({ targets, ...e }: { targets: number[]; [k: string]: any }) => {
-        for (let nodeId of targets) {
-          getEventHandler(nodeId, "onPointerLeave")?.(e)
-        }
+        dispatchOrdered(targets, "onPointerLeave", e)
       },
     )
 
     unsubWheel = on("wheel", ({ targets, ...e }: { targets: number[]; [k: string]: any }) => {
-      for (let nodeId of targets) {
-        getEventHandler(nodeId, "onWheel")?.(e)
-      }
+      bubble(targets, "onWheel", e)
     })
 
     unsubKeyDown = on("keydown", (e: any) => {