@solidrt/core 0.0.45 → 0.0.47

package/AGENTS.md

@@ -94,7 +94,7 @@ tsconfig.json - the two load-bearing lines are jsx + jsxImportSource:
 ```
 
 Peer deps @solidjs/signals and @solidjs/universal must match (currently
-2.0.0-beta.26); bun resolves them from peerDependencies.
+2.0.0-beta.31); bun resolves them from peerDependencies.
 
 ## Element model (the parts that are easy to get wrong)
 
@@ -174,6 +174,22 @@ Peer deps @solidjs/signals and @solidjs/universal must match (currently
   app-global shortcut point; `stopPropagation()` ends the walk. `focusable`
   declares focus-navigation candidacy (enumerate via getFocusables()).
 
+- Gesture recognizers, shared by every package: `createPan` (single-pointer
+  drag, axis-aware slop, per-event dx/dy) and `createTransform` (merged
+  pan + pinch + rotate over the whole pointer set, Flutter-Scale style: streams
+  `{ dx, dy, scale, rotation, x, y, pointers }` once per FRAME - positions
+  update per event, but the cross-pointer measure waits for the
+  `pointerFrame` batch terminator, when every pointer is the same age; one
+  finger degrades to a plain pan, and `pointers` is how a consumer gives one-
+  and two-finger translation different meanings - dx/dy alone cannot tell
+  them apart).
+  Spread the returned `.handlers` onto the receiving element. They
+  arbitrate through the exported `arena` (ONE per app): a press claims its
+  pointer provisionally, movement evidence steals and resolves it, the loser's
+  `cancel()` retracts its feedback. Custom recognizers should join the arena
+  rather than track pointers ad hoc, or they will double-handle against
+  scrollers and pressables.
+
 - Reactivity is SolidJS 2.0 (`@solidjs/signals`), NOT Solid 1.x. `createSignal`
   is as you expect, but `createEffect` takes the 2.0 two-function shape: a
   TRACKED compute that reads signals and returns a value, then an UNTRACKED

package/examples/README.md

@@ -42,6 +42,8 @@ for the element/prop model see `@solidrt/core/AGENTS.md`.
 - `gpu-pipeline.tsx` - `createPipelineTexture`: a custom vertex+fragment pair drawing an interleaved vertex buffer (position and color attributes resolved by name), a depth-tested spinning cube whose `uTime` uniform is driven through `<texture params>` exactly like a fragment shader's.
 - `gpu-particles.tsx` - an additive particle field: `topology: "points"` with `blend: "add"`, so overlapping gaussian splats (`gl_PointSize` from the vertex stage, `gl_PointCoord` falloff, premultiplied output) accumulate into a glowing volume instead of overwriting. The tints are typed vec3 uniforms filled from 3-number array params.
 - `gpu-instancing.tsx` - instanced drawing: one 3-vertex triangle drawn hundreds of times via `instanceCount`, each instance placed and tinted on a phyllotaxis spiral from `gl_InstanceID` alone. `setDraw(id, { instanceCount })` merges into the draw range per frame (absent keys keep their values, like params), so the population breathes without touching the buffer.
+- `gpu-draw-list.tsx` - `createDrawTarget`: one render target holding an ordered, mutable LIST of draws - two orbiting triangles from different programs sharing one depth buffer (the target owns the depth storage, each pipeline the test/write behavior), a third entry added and removed live via its stable `DrawId`, and `setDrawParams` as the per-object channel.
+- `gpu-shared-params.tsx` - shared target state on a draw target: `setTargetParams`/`setTargetTextures` write values every entry reads - a ring of quads spins and color-cycles from ONE write per frame, and the shared sampler source swaps for the whole target at once. The spin is imperative (`setTargetParams` in `onFrame`) while the tint rides the `<texture params>` prop - the declarative channel, which on a draw target writes the same shared record. The two entries that seeded their own uTint/uMap show the precedence rule (an entry's own value beats the shared one), and mixed programs show partial coverage (a program that does not declare a shared name skips it). `createDrawTarget`'s positional `params` and `opts.textures` seed both channels before any entry exists.
 - `window-shader.tsx` - the `shader` prop on `<window>`: the finished frame drawn through a raw-linked warp program before present, click to toggle between warp and identity.
 - `window-shader-history.tsx` - the window shader's frame history: `previous` binds last frame as uPrevious, drawn as a one-frame motion echo behind an orbiting square; click toggles the echo term.
 

package/examples/gpu-draw-list.tsx

@@ -73,7 +73,7 @@ function App() {
     attributes: attrs,
   })
 
-  let target = createDrawTarget(512, 512, { depth: true, clearColor: [0.04, 0.04, 0.08, 1], label: "orbits" })
+  let target = createDrawTarget(512, 512, null, { depth: true, clearColor: [0.04, 0.04, 0.08, 1], label: "orbits" })
   let warmDraw = addDraw(target, warm, { uAngle: 0 }, { buffer: triangle })
   let coolDraw = addDraw(target, cool, { uAngle: Math.PI }, { buffer: triangle })
 

package/examples/gpu-shared-params.tsx

@@ -0,0 +1,135 @@
+// Shared target state on a draw target: values every entry reads, written
+// ONCE per target instead of once per entry. A ring of quads spins under a
+// single "camera" uniform (uView) and color-cycles under a shared tint
+// (uTint) - one target-level write per frame however many entries the
+// list holds, where per-entry setDrawParams would cost one call and one
+// value's worth of JS arithmetic per quad (the cost profile @solidrt/3d's
+// camera rides on). setTargetTextures is the sampler analog: the patterned
+// quads read one shared uMap source, swapped for the whole target every
+// two seconds.
+//
+// The rules to notice: an entry's OWN value beats the shared one - the
+// amber quad seeds uTint at addDraw and ignores the color cycle, the
+// striped quad binds its own uMap and ignores the swap - and coverage may
+// be partial: the tint program never declares uMap and the patterned
+// program never declares uTint, so each shared write simply skips entries
+// whose program does not declare the name. Shared state is target state:
+// createDrawTarget seeds it (positional params + opts.textures) before any
+// entry exists, and entry add/remove/rebuild cannot lose it.
+//
+// Two channels drive the same shared params. uView goes imperatively
+// (setTargetParams in onFrame), uTint goes declaratively: the `<texture
+// params>` prop means "the target's params" on every target kind, so on a
+// draw target it writes the shared record - a signal into the prop is all
+// the wiring a shared value needs.
+import { render, onFrame, createSignal } from "@solidrt/core"
+import {
+  addDraw,
+  compileShader,
+  createBuffer,
+  createDrawTarget,
+  createRenderPipeline,
+  createTexture,
+  glsl,
+  linkProgram,
+  setTargetParams,
+  setTargetTextures,
+} from "@solidrt/core/gpu"
+
+let VERTEX = glsl`
+  in vec2 aPos;
+  uniform float uView;
+  uniform vec2 uCenter;
+
+  void main() {
+    vec2 p = uCenter + aPos * 0.13;
+    float c = cos(uView), s = sin(uView);
+    gl_Position = vec4(c * p.x - s * p.y, s * p.x + c * p.y, 0.0, 1.0);
+  }
+`
+
+let FRAGMENT_TINT = glsl`
+  uniform vec4 uTint;
+  void main() {
+    fragColor = uTint;
+  }
+`
+
+let FRAGMENT_MAP = glsl`
+  uniform sampler2D uMap;
+  void main() {
+    fragColor = texture(uMap, gl_FragCoord.xy / 32.0);
+  }
+`
+
+function App() {
+  let quad = createBuffer(new Float32Array([-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1]), { label: "quad" })
+  let vs = compileShader("vertex", VERTEX, { header: true })
+  let attrs = [{ name: "aPos", format: "vec2" as const }]
+  let tint = createRenderPipeline(linkProgram(vs, compileShader("fragment", FRAGMENT_TINT, { header: true })), {
+    attributes: attrs,
+  })
+  let mapped = createRenderPipeline(linkProgram(vs, compileShader("fragment", FRAGMENT_MAP, { header: true })), {
+    attributes: attrs,
+  })
+
+  // 2x2 patterns, nearest + repeat, so gl_FragCoord tiling shows hard cells.
+  let pattern = (a: number[], b: number[]) =>
+    createTexture(new Uint8Array([...a, ...b, ...b, ...a]), 2, 2, { filter: "nearest", wrap: "repeat" })
+  let checker = pattern([15, 15, 20, 255], [235, 235, 235, 255])
+  let ember = pattern([250, 160, 30, 255], [45, 10, 60, 255])
+  let stripes = createTexture(new Uint8Array([220, 40, 60, 255, 245, 245, 245, 255]), 2, 1, {
+    filter: "nearest",
+    wrap: "repeat",
+  })
+
+  // The positional params argument and opts.textures seed the shared state
+  // before any entry exists; the entries added below pick it up.
+  let target = createDrawTarget(
+    512,
+    512,
+    { uView: 0, uTint: [0.3, 0.8, 0.9, 1] },
+    { textures: { uMap: checker }, clearColor: [0.05, 0.05, 0.09, 1], label: "shared-ring" },
+  )
+
+  const RING = 8
+  for (let i = 0; i < RING; i++) {
+    let a = (i / RING) * Math.PI * 2
+    let uCenter = [0.62 * Math.cos(a), 0.62 * Math.sin(a)]
+    if (i === 1 || i === 5) {
+      // Patterned entries read the shared uMap; the one at i === 5 brings
+      // its own binding and keeps its stripes through every shared swap.
+      addDraw(target, mapped, { uCenter }, i === 5 ? { buffer: quad, textures: { uMap: stripes } } : { buffer: quad })
+    } else if (i === 3) {
+      // The override quad: its own uTint beats the shared color cycle.
+      addDraw(target, tint, { uCenter, uTint: [1, 0.62, 0.1, 1] }, { buffer: quad })
+    } else {
+      addDraw(target, tint, { uCenter }, { buffer: quad })
+    }
+  }
+
+  let [sharedTint, setSharedTint] = createSignal([0.3, 0.8, 0.9, 1])
+  let mapFlip = -1
+  onFrame(tick => {
+    let t = tick / 1000
+    // The whole ring, one write: uView spins every entry. uTint takes the
+    // declarative channel instead - the signal feeds the params prop below.
+    setTargetParams(target, { uView: t * 0.5 })
+    setSharedTint([0.45 + 0.45 * Math.sin(t), 0.45 + 0.45 * Math.sin(t + 2.1), 0.45 + 0.45 * Math.sin(t + 4.2), 1])
+    // The shared sampler source swaps every two seconds; only the entry
+    // with its own uMap keeps its pattern.
+    let flip = Math.floor(t / 2) % 2
+    if (flip !== mapFlip) {
+      mapFlip = flip
+      setTargetTextures(target, { uMap: flip === 0 ? checker : ember })
+    }
+  })
+
+  return (
+    <window alignItems="center" justifyContent="center">
+      <texture src={target} width={420} height={420} params={{ uTint: sharedTint() }} />
+    </window>
+  )
+}
+
+render(() => <App />)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/core",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -27,11 +27,11 @@
     "colord": "^2.9.3"
   },
   "devDependencies": {
-    "@solidrt/flux-types": "0.0.45"
+    "@solidrt/flux-types": "0.0.47"
   },
   "peerDependencies": {
-    "@solidjs/signals": "2.0.0-beta.26",
-    "@solidjs/universal": "2.0.0-beta.26",
-    "solid-js": "2.0.0-beta.26"
+    "@solidjs/signals": "2.0.0-beta.31",
+    "@solidjs/universal": "2.0.0-beta.31",
+    "solid-js": "2.0.0-beta.31"
   }
 }

package/src/arena.ts

@@ -0,0 +1,60 @@
+// The gesture arena: per-pointer ownership arbitration between recognizers.
+// Raw pointer events keep bubbling along the frozen down path regardless; the
+// arena only decides which recognizer's gesture a pointer belongs to. It lives
+// in core beside that routing (window.ts) because arbitration only works with
+// exactly ONE claims map per app: recognizers from every package (components'
+// press and pan, 3d's orbit transform, future runtime-level recognizers) must
+// see each other's claims, and two arenas cannot arbitrate against each other.
+//
+// Two claim strengths mirror how gestures resolve. A press claims its pointer
+// provisionally on the down: it is the presumed winner (innermost-wins falls
+// out of leaf-to-root dispatch, first claim sticks) but a later recognizer
+// with positive evidence of a different gesture (a pan crossing its movement
+// slop) may steal the pointer, cancelling the press. A steal resolves the
+// arena: the pointer is won outright and cannot be stolen again, so e.g. the
+// outer axis of two nested scrollers cannot take a drag the inner one already
+// owns. Plain state on purpose: claims must be visible across recognizers
+// within one synchronous bubble dispatch, before any signal flush.
+
+export type ArenaOwner = {
+  /** Retract the gesture without firing; invoked when the pointer is stolen. */
+  cancel(): void
+}
+
+type Claim = { owner: ArenaOwner; resolved: boolean }
+
+let claims = new Map<number, Claim>()
+
+export let arena = {
+  /**
+   * Provisionally claim an unowned pointer. Returns false (claim refused) when
+   * any recognizer already owns it. The claim is stealable until the owner
+   * releases it or a steal resolves the arena.
+   */
+  claim(pointerId: number, owner: ArenaOwner): boolean {
+    if (claims.has(pointerId)) return false
+    claims.set(pointerId, { owner, resolved: false })
+    return true
+  },
+
+  /**
+   * Take the pointer on positive evidence of a gesture, cancelling the current
+   * provisional owner (if any), and resolve the arena: the resulting claim
+   * cannot be stolen. Returns false when the arena is already resolved, in
+   * which case the caller lost and must stand down.
+   */
+  steal(pointerId: number, owner: ArenaOwner): boolean {
+    let current = claims.get(pointerId)
+    if (current) {
+      if (current.resolved) return false
+      current.owner.cancel()
+    }
+    claims.set(pointerId, { owner, resolved: true })
+    return true
+  },
+
+  /** Release the claim on a pointer, if `owner` still holds it. */
+  release(pointerId: number, owner: ArenaOwner): void {
+    if (claims.get(pointerId)?.owner === owner) claims.delete(pointerId)
+  },
+}

package/src/color.ts

@@ -7,10 +7,13 @@ extend([namesPlugin, mixPlugin])
  * Parses a CSS color string (named, hex, `rgb()`, `hsl()`, ...) into a packed
  * `0xRRGGBBAA` u32: red in the high byte, alpha in the low byte. Alpha is scaled
  * from colord's 0..1 to 0..255. This is the wire format the runtime expects for
- * the `color` property.
+ * the `color` property. Throws on a string that is not a valid CSS color, so a
+ * typo fails on the line that wrote it instead of silently painting black.
  */
 export function parseColor(color: string): number {
-  let { r, g, b, a } = colord(color).toRgb()
+  let c = colord(color)
+  if (!c.isValid()) throw new Error(`Invalid color "${color}"`)
+  let { r, g, b, a } = c.toRgb()
   return (((r & 0xFF) << 24) | ((g & 0xFF) << 16) | ((b & 0xFF) << 8) | ((a * 255) & 0xFF)) >>> 0
 }
 

package/src/gpu.ts

@@ -1,12 +1,14 @@
 // GPU textures and shaders, reactive (SolidJS) layer: the create* helpers free
 // their texture automatically when the reactive owner is disposed. Drive a
-// shader's uniforms declaratively with `<texture src={id} params={{...}} />`
+// target's uniforms declaratively with `<texture src={id} params={{...}} />`
 // (see TextureProps) - the preferred way, deferred to the next real repaint so
-// a fast-changing signal stays paced to actual frames. setShaderParams is the
-// imperative exception: reach for it only when there is no `<texture>` element
-// to hold a params prop, e.g. a shader that only feeds another shader as a
-// sampler2D input. The imperative primitives (uploadTexture, setShaderParams,
-// destroyTexture, ...) live in the `flux:gpu` module.
+// a fast-changing signal stays paced to actual frames; the prop means "the
+// target's params" on every kind (on a draw target, its shared params).
+// setTargetParams is the imperative exception: reach for it only when there
+// is no `<texture>` element to hold a params prop, e.g. a target that only
+// feeds another shader as a sampler2D input. The imperative primitives
+// (uploadTexture, setTargetParams, destroyTexture, ...) live in the
+// `flux:gpu` module.
 //
 // Sampling is a per-texture property declared at creation: `filter`
 // ("linear" default | "nearest") and `wrap` ("clamp" default | "repeat") on
@@ -45,15 +47,16 @@
 import { createEffect, createSignal, getOwner, onCleanup, untrack } from "@solidjs/signals"
 import * as gpu from "flux:gpu"
 
-// The create* helpers accept { manual: true } to opt out of the owner-scoped
-// auto-free, for resources whose lifetime is managed by hand (rebuilt on
-// signal changes inside a long-lived component, handed across owners, ...).
-// Without it, each rebuild would stack another onCleanup on the component
-// owner: a leak until unmount, then a double-free against manual destroys.
+// The create* helpers accept { autoFree: false } to opt out of the
+// owner-scoped auto-free, for resources whose lifetime is managed by hand
+// (rebuilt on signal changes inside a long-lived component, handed across
+// owners, ...). Without the opt-out, each rebuild would stack another
+// onCleanup on the component owner: a leak until unmount, then a double-free
+// against the by-hand destroys.
 // `label` is a free-form debug name (WebGPU's label): surfaced by the dev
 // tooling's GPU inventory and engine log messages, never interpreted, kept
 // across id-stable resizes.
-export type CreateOptions = { manual?: boolean; label?: string }
+export type CreateOptions = { autoFree?: boolean; label?: string }
 
 // Sampling options every texture-producing create* helper accepts, applied at
 // creation as a property of the texture id (there is no set-sampler-later).
@@ -77,19 +80,28 @@ export type { BufferId, DrawId, ProgramId, RenderPipelineId, ShaderStageId, Text
 // -- need not import flux directly: destroyTexture for the manual-cleanup path
 // (textures made outside a reactive scope, e.g. after an await, are not
 // auto-freed), uploadTexture to push new pixels into a mutable texture, and
-// setShaderParams as the non-reactive exception described above - prefer
-// `<texture params={...}>` when a `<texture>` element is already in the tree.
-// resizeTexture and setShaderSize resize in place at a stable id (so
-// `<texture src>` and sampler bindings stay valid); because the id survives,
-// the owner-scoped auto-free registered at creation keeps working and no
-// re-registration is needed. setShaderTextures is the sampler analog of
-// setShaderParams: retarget a shader's sampler2D inputs without recompiling.
+// the target-level verbs. setTargetParams writes a target's params on ANY
+// target kind - the non-reactive exception described above, so prefer
+// `<texture params={...}>` when a `<texture>` element is already in the
+// tree. On a single-program target (fragment texture, pipeline target) the
+// names validate strictly against its one program; on a draw target they are
+// the SHARED params every entry reads (a camera's view-projection: one write
+// per camera move instead of one per mesh), applied before each entry's own
+// params so an entry naming the same uniform overrides the shared value, and
+// a name only some entries' programs declare applies where declared.
+// setTargetTextures is its sampler analog: retarget sampler2D inputs without
+// recompiling (on a draw target, shared sources every entry reads - an
+// environment map, a LUT - bound where an entry's program declares the name
+// and its own bindings do not override it). resizeTexture and setTargetSize
+// resize in place at a stable id (so `<texture src>` and sampler bindings
+// stay valid); because the id survives, the owner-scoped auto-free
+// registered at creation keeps working and no re-registration is needed.
 export {
   destroyTexture,
   resizeTexture,
-  setShaderParams,
-  setShaderSize,
-  setShaderTextures,
+  setTargetParams,
+  setTargetSize,
+  setTargetTextures,
   uploadTexture,
 } from "flux:gpu"
 
@@ -102,8 +114,7 @@ export {
 // the explicit render verb for `render: "manual"` targets - targets whose
 // pass is state (accumulation, feedback) rather than a pure function of its
 // inputs, which the runtime therefore never renders on its own; the app
-// steps them, usually from onFrame. (`render: "manual"` is the render mode;
-// the unrelated `manual: true` create option is the lifetime opt-out above.)
+// steps them, usually from onFrame.
 // copyTexture overwrites a manual target with another texture's pixels
 // GPU-side (exact, same size): seed a loadOp "load" accumulator, snapshot a
 // ping-pong buffer, reset state to a known image.
@@ -114,10 +125,12 @@ export type { BlendMode, CullMode, DrawRange, IndexBinding, IndexFormat, IndexRa
 // target (see createDrawTarget below), so there is no per-entry lifetime to
 // wrap. addDraw adds an entry (appended, or inserted via opts.before) and
 // returns its stable DrawId; removeDraw drops one; setDrawParams /
-// setDrawTextures / setDrawRange are the per-entry forms of setShaderParams /
-// setShaderTextures / setDraw, taking (target, draw, value) with identical
+// setDrawTextures / setDrawRange are the per-entry forms of setTargetParams /
+// setTargetTextures / setDraw, taking (target, draw, value) with identical
 // merge and validation semantics. The per-object hot path is setDrawParams (a
-// moved mesh = one call with its new matrix). setDrawOrder replaces the whole
+// moved mesh = one call with its new matrix); the per-target one is
+// setTargetParams (exported above), which on a draw target writes the SHARED
+// params every entry reads. setDrawOrder replaces the whole
 // list order with a full permutation of the live ids - the sorting verb
 // (opaque front-to-back, transparent back-to-front, re-issued when the
 // camera moves).
@@ -165,24 +178,22 @@ export {
  */
 export let glsl = String.raw
 
-// captureSnapshot renders a node to a texture and readTexture reads any
-// texture's bytes back. A laid-out node captures its layout box; a `d-*` node
-// captures its painted box - its own w/h when set, else the nearest laid-out
-// ancestor's box, its x/y offset mapped to the texture origin. Re-exported raw
-// (no reactive auto-cleanup wrapper):
-// captureSnapshot resolves asynchronously, by which point the reactive owner is
-// no longer current, so the caller owns the returned id and frees it with
-// destroyTexture (as with any texture created after an await).
+// captureSnapshot renders a node to pixels and readTexture reads any
+// texture's bytes back; both resolve the same { width, height, data } shape.
+// A laid-out node captures its layout box; a `d-*` node captures its painted
+// box - its own w/h when set, else the nearest laid-out ancestor's box, its
+// x/y offset mapped to the texture origin. A capture creates no texture and
+// nothing needs freeing; to display or sample the result, upload it with
+// createTexture.
 //
-// Together they are the one-shot bake path: draw something only the engine can
-// produce (shaped text, an SVG, a themed view), capture it, read the pixels and
-// process them on the CPU - baking a glyph atlas is the worked example. Not a
-// rendering path: a capture rasterizes the subtree offscreen, reads it back to
-// the CPU and re-uploads it, costing a full GPU -> CPU -> GPU round trip and a
-// paint pass of latency every call. Batch captures (one paint pass services
-// many), never run them per frame, and do not use them to feed live screen
-// content into a shader - for that the source has to update in place (another
-// pipeline's target, a camera texture).
+// This is the one-shot bake path: draw something only the engine can produce
+// (shaped text, an SVG, a themed view), capture it and process the pixels on
+// the CPU - baking a glyph atlas is the worked example. Not a rendering path:
+// a capture rasterizes the subtree offscreen and reads it back to the CPU,
+// costing a readback stall and a paint pass of latency every call. Batch
+// captures (one paint pass services many), never run them per frame, and do
+// not use them to feed live screen content into a shader - for that the
+// source has to update in place (another pipeline's target, a camera texture).
 export { captureSnapshot, readTexture } from "flux:gpu"
 
 /**
@@ -194,8 +205,9 @@ export { captureSnapshot, readTexture } from "flux:gpu"
  * reactive scope the texture is freed automatically once that owner is
  * disposed; when called outside one (e.g. after an `await`, where the owner
  * is no longer current) nothing is registered and you must call
- * `destroyTexture` (from flux:gpu) yourself. Pass `{ manual: true }` to skip
- * the auto-free and own the disposal yourself even inside a reactive scope.
+ * `destroyTexture` (from flux:gpu) yourself. Pass `{ autoFree: false }` to
+ * skip the auto-free and own the disposal yourself even inside a reactive
+ * scope.
  */
 export function createTexture(
   data: Uint8Array,
@@ -204,7 +216,7 @@ export function createTexture(
   opts?: CreateOptions & SamplerOptions & TextureFormatOptions,
 ): gpu.TextureId {
   let id = gpu.createTexture(data, width, height, opts)
-  if (!opts?.manual && getOwner()) onCleanup(() => gpu.destroyTexture(id))
+  if (opts?.autoFree !== false && getOwner()) onCleanup(() => gpu.destroyTexture(id))
   return id
 }
 
@@ -214,7 +226,7 @@ export function createTexture(
  * `data` must hold at least `width * height` pixels at the declared format's
  * size (`* 4` bytes for the default "rgba8", `* 1` for "r8"; it may hold
  * several frames). Like `createTexture`, the texture is freed automatically
- * when the reactive owner is disposed (opt out with `{ manual: true }`);
+ * when the reactive owner is disposed (opt out with `{ autoFree: false }`);
  * created outside a reactive scope you must call `destroyTexture` (from
  * flux:gpu) yourself.
  */
@@ -225,7 +237,7 @@ export function createMutableTexture(
   opts?: CreateOptions & SamplerOptions & TextureFormatOptions,
 ): gpu.TextureId {
   let id = gpu.createMutableTexture(data, width, height, opts)
-  if (!opts?.manual && getOwner()) onCleanup(() => gpu.destroyTexture(id))
+  if (opts?.autoFree !== false && getOwner()) onCleanup(() => gpu.destroyTexture(id))
   return id
 }
 
@@ -238,7 +250,7 @@ export function createMutableTexture(
  * scalars from a number, `vec2`/`vec3`/`vec4`/`mat4` from a flat number
  * array); drive their values with `<texture src={id} params={{...}} />`
  * (preferred) or, when there is no `<texture>` element for it, imperatively
- * with `setShaderParams`. `params` is its own argument - it seeds the same
+ * with `setTargetParams`. `params` is its own argument - it seeds the same
  * live channel those two drive - and takes `null` (or nothing) for a shader
  * without uniforms. A time-driven shader declares its own time uniform
  * (`uniform float uTime;`) and the app drives it like any other value.
@@ -248,7 +260,7 @@ export function createMutableTexture(
  * re-renders whenever a source changes - including a sampled target
  * re-rendering, transitively through chains. Frees the
  * texture and shader program when the reactive owner is disposed (opt out
- * with `{ manual: true }`); create outside any reactive scope for
+ * with `{ autoFree: false }`); create outside any reactive scope for
  * app-lifetime shaders. For a shader whose source or inputs change
  * reactively, use {@link createShaderTextureMemo} instead.
  *
@@ -271,15 +283,15 @@ export function createShaderTexture(
   opts?: CreateOptions & SamplerOptions & { textures?: Record<string, gpu.TextureId> },
 ): gpu.TextureId {
   let id = gpu.createShaderTexture(fragmentSrc, width, height, params, opts)
-  if (!opts?.manual && getOwner()) onCleanup(() => gpu.destroyTexture(id))
+  if (opts?.autoFree !== false && getOwner()) onCleanup(() => gpu.destroyTexture(id))
   return id
 }
 
 /**
  * Creates a render target over a pipeline from `createRenderPipeline` and
  * renders it once, returning the texture id (usable anywhere a normal
- * texture id is, e.g. `<texture src>`; resize with `setShaderSize`, drive
- * uniforms with `<texture params>` or `setShaderParams`). Many targets may
+ * texture id is, e.g. `<texture src>`; resize with `setTargetSize`, drive
+ * uniforms with `<texture params>` or `setTargetParams`). Many targets may
  * share one pipeline, and creating a target compiles nothing. The target
  * brings the per-target half: size, the concrete vertex `buffer` the
  * pipeline's attribute layout describes, the `instanceBuffer` its
@@ -295,7 +307,7 @@ export function createShaderTexture(
  * `instanceAttributes`, `topology`, `blend`, `cull`, `depth`, `depthWrite`)
  * lives on the pipeline
  * and throws here. Frees the target when the reactive owner is disposed (opt
- * out with `opts.manual`); the pipeline is yours and outlives it.
+ * out with `autoFree: false`); the pipeline is yours and outlives it.
  *
  * `render: "manual"` makes it a manual target: the runtime never renders it
  * (it starts cleared to `clearColor`), only an explicit `renderTarget(id)`
@@ -304,8 +316,7 @@ export function createShaderTexture(
  * previous contents under each draw - single-target accumulation - while
  * the default `"clear"` clears to `clearColor` per render; state that must
  * read its own pixels (decay, blur, simulation) still ping-pongs across two
- * manual targets, and `copyTexture` seeds either shape. Distinct from the
- * `manual` lifetime option: `render` is who renders, `manual` is who frees.
+ * manual targets, and `copyTexture` seeds either shape.
  */
 export function createShaderTarget(
   pipeline: gpu.RenderPipelineId,
@@ -324,7 +335,7 @@ export function createShaderTarget(
     SamplerOptions,
 ): gpu.TextureId {
   let id = gpu.createShaderTarget(pipeline, width, height, params, opts)
-  if (!opts?.manual && getOwner()) onCleanup(() => gpu.destroyTexture(id))
+  if (opts?.autoFree !== false && getOwner()) onCleanup(() => gpu.destroyTexture(id))
   return id
 }
 
@@ -340,27 +351,41 @@ export function createShaderTarget(
  * whether an entry tests/writes it stays pipeline state, and a depth-testing
  * pipeline into a depthless target throws at `addDraw`.
  *
+ * `params` seeds the target's SHARED params - values every entry reads,
+ * written once per target instead of once per entry (a camera's
+ * view-projection is the motivating case: one `setTargetParams` per camera
+ * move instead of one `setDrawParams` per mesh). Shared values apply before
+ * each entry's own params, so an entry naming the same uniform overrides
+ * the shared value; a name only some entries' programs declare is applied
+ * where declared and skipped elsewhere. They are target state: entry
+ * add/remove/rebuild cannot lose them. `opts.textures` is the sampler
+ * analog - shared sources every entry reads (an environment map, a LUT),
+ * driven later with `setTargetTextures`, same precedence and coverage
+ * rules.
+ *
  * The render contract is unchanged: the list is input data, so an ordinary
  * (`render: "auto"`) draw target re-renders exactly when its entries or
  * their inputs change - a static scene costs zero passes, and one render is
  * one pass regardless of entry count. `render: "manual"` and `loadOp` work
  * as on `createShaderTarget`. Returns the texture id; frees on owner
- * disposal (opt out with `opts.manual`), taking its entries with it - the
+ * disposal (opt out with `autoFree: false`), taking its entries with it - the
  * entries' pipelines and buffers are yours and outlive it.
  */
 export function createDrawTarget(
   width: number,
   height: number,
+  params?: gpu.ShaderParams | null,
   opts?: {
     depth?: boolean
+    textures?: Record<string, gpu.TextureId>
     clearColor?: [number, number, number, number]
     render?: "auto" | "manual"
     loadOp?: "clear" | "load"
   } & CreateOptions &
     SamplerOptions,
 ): gpu.TextureId {
-  let id = gpu.createDrawTarget(width, height, opts)
-  if (!opts?.manual && getOwner()) onCleanup(() => gpu.destroyTexture(id))
+  let id = gpu.createDrawTarget(width, height, params, opts)
+  if (opts?.autoFree !== false && getOwner()) onCleanup(() => gpu.destroyTexture(id))
   return id
 }
 
@@ -399,7 +424,7 @@ function sameRecord(
  * current texture id (use it as `<texture src={id()} />`) and keeps the GPU
  * resource in step with `spec` from then on. Changes that keep the compiled
  * program valid mutate in place at a stable id - a size change routes to
- * `setShaderSize`, a params change to `setShaderParams` - while a change to
+ * `setTargetSize`, a params change to `setTargetParams` - while a change to
  * the fragment source or the sampler bindings rebuilds at a fresh id, updates
  * the accessor, and destroys the old id. That destroy is frame-safe (the
  * runtime reclaims an id only once the render tree no longer references it),
@@ -436,10 +461,10 @@ export function createShaderTextureMemo(
       ) {
         // Program and inputs unchanged: mutate in place, the id stays stable.
         if (next.width !== current.width || next.height !== current.height) {
-          gpu.setShaderSize(currentId, next.width, next.height)
+          gpu.setTargetSize(currentId, next.width, next.height)
         }
         if (!sameRecord(next.params, current.params) && next.params) {
-          gpu.setShaderParams(currentId, next.params)
+          gpu.setTargetParams(currentId, next.params)
         }
         current = next
         return
@@ -483,7 +508,7 @@ function toUint8(data: ArrayBuffer | ArrayBufferView): Uint8Array {
  * reference `iResolution` and any uniform they declare (`float`/`int`
  * scalars from a number, `vec2`/`vec3`/`vec4`/`mat4` from a flat number
  * array); drive values with `<texture src={id} params={{...}} />` or
- * `setShaderParams`, exactly like a fragment shader.
+ * `setTargetParams`, exactly like a fragment shader.
  * `opts.depth` attaches a private depth buffer (cleared + tested per render);
  * `opts.depthWrite: false` (requires depth) keeps the test but stops the
  * draw from writing depth. `opts.blend: "add"` makes the draw accumulate
@@ -505,7 +530,7 @@ function toUint8(data: ArrayBuffer | ArrayBufferView): Uint8Array {
  * `opts.loadOp` behave exactly as on {@link createShaderTarget}: step the
  * target with `renderTarget(id)`, and `loadOp: "load"` (manual-only) keeps
  * the previous contents under each draw. Frees the texture and GL program when the reactive
- * owner is disposed (opt out with `opts.manual`); create outside any reactive
+ * owner is disposed (opt out with `autoFree: false`); create outside any reactive
  * scope for app-lifetime pipelines.
  */
 export function createPipelineTexture(
@@ -533,7 +558,7 @@ export function createPipelineTexture(
     SamplerOptions,
 ): gpu.TextureId {
   let id = gpu.createPipelineTexture(vertexSrc, fragmentSrc, width, height, params, opts)
-  if (!opts?.manual && getOwner()) onCleanup(() => gpu.destroyTexture(id))
+  if (opts?.autoFree !== false && getOwner()) onCleanup(() => gpu.destroyTexture(id))
   return id
 }
 
@@ -542,13 +567,13 @@ export function createPipelineTexture(
  * Float32Array laid out to match the pipeline's interleaved attribute list).
  * Update it later with {@link writeBuffer}; the buffer's byte size is fixed at
  * creation, so reserve room up front for dynamic geometry. Freed automatically
- * when the reactive owner is disposed (opt out with `{ manual: true }`);
+ * when the reactive owner is disposed (opt out with `{ autoFree: false }`);
  * created outside a reactive scope you must call `destroyBuffer` yourself.
  * (Destruction order relative to pipelines does not matter.)
  */
 export function createBuffer(data: ArrayBuffer | ArrayBufferView, opts?: CreateOptions): gpu.BufferId {
   let id = gpu.createBuffer(toUint8(data), opts)
-  if (!opts?.manual && getOwner()) onCleanup(() => gpu.destroyBuffer(id))
+  if (opts?.autoFree !== false && getOwner()) onCleanup(() => gpu.destroyBuffer(id))
   return id
 }
 

package/src/image.ts

@@ -1,27 +1,15 @@
-// CPU image codec plus the reactive load-and-upload convenience. decodeImage is
-// the raw primitive (no GPU involved); createImage is the owner-aware layer on
-// top that fetches/decodes/uploads for you and swaps the texture when the source
-// changes - the same relationship createTexture/createShaderTexture have to
-// flux:gpu.
+// CPU image codec plus the reactive load-and-upload convenience. The codec is
+// flux:image, re-exported here (like the flux:gpu re-exports in gpu.ts) so
+// applications import everything image-shaped from one place; createImage is
+// the owner-aware layer on top that fetches/decodes/uploads for you and swaps
+// the texture when the source changes.
 
 import { createMemo, onCleanup } from "@solidjs/signals"
+import { decodeImage, type DecodedImage } from "flux:image"
 import { createTexture, destroyTexture, type TextureId } from "./gpu"
 
-export type DecodedImage = {
-  data: Uint8Array
-  width: number
-  height: number
-}
-
-/**
- * Decodes encoded image bytes (PNG, JPEG, and the other formats the runtime's
- * image decoder supports) into raw, tightly-packed RGBA8 pixels plus the
- * decoded dimensions. Feed the result straight into `createTexture`. Use this
- * when you want manual control; for the common case reach for `createImage`.
- */
-export function decodeImage(bytes: Uint8Array): DecodedImage {
-  return image.decodeImage(bytes)
-}
+export { decodeImage, encodeImage } from "flux:image"
+export type { DecodedImage } from "flux:image"
 
 export type ImageSource = string | Uint8Array
 

package/src/index.ts

@@ -14,13 +14,20 @@ export { capabilities } from "./capabilities"
 export type { Capabilities, WindowSizeClass } from "./capabilities"
 export { createTexture } from "./gpu"
 export type { TextureId } from "./gpu"
-export { createImage, decodeImage } from "./image"
+export { createImage, decodeImage, encodeImage } from "./image"
 export type { DecodedImage, ImageSource } from "./image"
 export { parseSvg, svg } from "./svg"
 export type { SvgDocument, SvgDraw } from "./svg"
 export { createScroll } from "./scroll"
 export type { Scroll, ScrollAxis, ScrollOffset, ScrollOptions } from "./scroll"
+export { arena } from "./arena"
+export type { ArenaOwner } from "./arena"
+export { createPan } from "./pan"
+export type { PanAxis, PanOptions } from "./pan"
+export { createTransform } from "./transform"
+export type { TransformDelta, TransformOptions } from "./transform"
 export type {
+  Element,
   LayoutProps,
   TransformProps,
   PointerProps,

package/src/pan.ts

@@ -0,0 +1,105 @@
+import { onSettled } from "@solidjs/signals"
+import type { PointerEvent } from "./types"
+import { arena } from "./arena"
+
+// Movement in logical pixels before a pan activates. Below this a drag still
+// reads as a press (tap wiggle); crossing it is the positive evidence that the
+// gesture is a pan, at which point the pan steals the pointer in the arena.
+const PAN_SLOP = 8
+
+export type PanAxis = "vertical" | "horizontal" | "both"
+
+export interface PanOptions {
+  /**
+   * Which movement direction activates the pan. Slop is axis-aware: a
+   * "vertical" pan only activates once vertical travel crosses the threshold,
+   * so nested cross-axis scrollers each take only drags along their own axis.
+   * Default "both" (straight-line distance).
+   */
+  axis?: PanAxis
+  onPanStart?: () => void
+  /** Pointer movement since the previous event; positive dx is rightward, positive dy downward. */
+  onPanMove?: (dx: number, dy: number) => void
+  onPanEnd?: () => void
+}
+
+// The pan recognizer: turns a drag into a movement-delta stream. On a down it
+// arms and starts measuring; when travel from the down point crosses the slop
+// along the enabled axis it activates, stealing the pointer in the arena (a
+// press that provisionally owned it is cancelled - its feedback retracts) and
+// resolving it so no other recognizer can take the drag over. If the arena is
+// already resolved (an inner pan won first) the recognizer disarms and stays
+// out. The slop distance itself is swallowed: deltas stream from the
+// activation point on. Moves and the up arrive on the frozen down path, so an
+// active pan keeps streaming when the pointer leaves the node or the window.
+// cancel() is the external-cancel hook; it ends an active pan without
+// onPanEnd. Options are read at event time. Single-pointer by design; for
+// multi-pointer pinch/rotate compose createTransform instead.
+export function createPan(options: PanOptions) {
+  // Down position while armed; last delivered position while active.
+  let origin: { x: number; y: number } | null = null
+  let active: number | null = null
+  let armed: number | null = null
+
+  let past = (e: PointerEvent) => {
+    if (!origin) return false
+    let dx = Math.abs(e.clientX - origin.x)
+    let dy = Math.abs(e.clientY - origin.y)
+    let axis = options.axis ?? "both"
+    if (axis === "vertical") return dy >= PAN_SLOP
+    if (axis === "horizontal") return dx >= PAN_SLOP
+    return dx * dx + dy * dy >= PAN_SLOP * PAN_SLOP
+  }
+
+  let reset = () => {
+    if (active != null) {
+      arena.release(active, owner)
+      active = null
+    }
+    armed = null
+    origin = null
+  }
+  let cancel = reset
+  let owner = { cancel }
+
+  // An unmount mid-drag must not leave a resolved claim behind.
+  onSettled(() => reset)
+
+  let handlers = {
+    onPointerDown: (e: PointerEvent) => {
+      if (e.button != null && e.button !== 0) return
+      if (armed == null && active == null) {
+        armed = e.pointerId
+        origin = { x: e.clientX, y: e.clientY }
+      }
+    },
+    onPointerMove: (e: PointerEvent) => {
+      if (armed === e.pointerId && past(e)) {
+        if (arena.steal(e.pointerId, owner)) {
+          active = e.pointerId
+          armed = null
+          origin = { x: e.clientX, y: e.clientY }
+          options.onPanStart?.()
+        } else {
+          // The arena is resolved against us; the drag belongs elsewhere.
+          reset()
+        }
+        return
+      }
+      if (active === e.pointerId && origin) {
+        options.onPanMove?.(e.clientX - origin.x, e.clientY - origin.y)
+        origin = { x: e.clientX, y: e.clientY }
+      }
+    },
+    onPointerUp: (e: PointerEvent) => {
+      if (active === e.pointerId) {
+        reset()
+        options.onPanEnd?.()
+      } else if (armed === e.pointerId) {
+        reset()
+      }
+    },
+  }
+
+  return { handlers, cancel }
+}

package/src/renderer.ts

@@ -148,8 +148,11 @@ function setTreeProperty(node: ProxyNode, name: string, value: unknown): void {
   try {
     tree.setProperty(node.id, name, value)
   } catch (e) {
+    // Name-level rejections (the exact prefixes apply_jsx in flux emits) are
+    // warn-and-continue so a stale prop does not kill the app; a bad VALUE for
+    // a known property rethrows, per the throw-in-dev validation policy.
     let message = String(e)
-    if (!message.includes("unknown property") && !message.includes("detached-only")) throw e
+    if (!message.includes("Unknown property") && !message.includes("Detached-only")) throw e
     let key = node.elementType + "." + name
     if (warnedRejectedProps.has(key)) return
     warnedRejectedProps.add(key)

package/src/runtime-modules.d.ts

@@ -49,7 +49,11 @@ declare module "*.ogg" {
 }
 
 // UI event bus (lattice), provided by the runtime as a builtin module.
-// on/once return an unsubscribe function.
+// on/once return an unsubscribe function. Notable events: the routed pointer
+// stream ("pointerMove"/"pointerDown"/... consumed by window.ts),
+// "pointerFrame" (the move-batch terminator: fires after all of a frame's
+// pointer moves have dispatched, every pointer the same age - multi-pointer
+// recognizers measure there), and "render" (the per-frame signal).
 declare module "srt:events" {
   export function on(event: string, callback: (data: any) => void): () => void
   export function once(event: string, callback: (data: any) => void): () => void

package/src/transform.ts

@@ -0,0 +1,300 @@
+import { onSettled } from "@solidjs/signals"
+import { on } from "srt:events"
+import type { PointerEvent } from "./types"
+import { arena, type ArenaOwner } from "./arena"
+
+// Focal travel or span change in logical pixels before the transform
+// activates; the same threshold createPan uses, so the two race fairly.
+const SLOP = 8
+// Per-frame EMA weight for the span that feeds `scale` (~50ms time constant
+// at a 65Hz frame rate - see the zoom-noise note below). The pre-batching
+// weight was 0.15 stepped per event at ~130Hz combined; steps now come once
+// per frame, so the weight compounds: 1 - (1 - 0.15)^2.
+const SPAN_SMOOTH = 0.28
+// Pinch-vs-hold discrimination on the span RATE, an EMA (QUIET_SMOOTH
+// weight) of the smoothed span's per-frame change. Engaging needs both a
+// SLOP excursion and rate >= ENGAGE (~40px/s at 65Hz); an engaged pinch
+// re-locks when rate falls under QUIET (~20px/s). Creep sits near 0.14
+// px/frame, deliberate pinches at 1.5+ - the 2x gap between the two
+// thresholds is the hysteresis that keeps the gate from chattering.
+// All three step-based constants assume a ~65Hz frame rate (the captured
+// tablet); a 120Hz panel halves per-step deltas. If that ever bites,
+// convert the thresholds to px/s with performance.now() read at the
+// pointerFrame terminator.
+const QUIET = 0.3
+const ENGAGE = 0.6
+const QUIET_SMOOTH = 0.19
+
+export type TransformDelta = {
+  /** Focal-point movement since the previous frame, logical px. */
+  dx: number
+  dy: number
+  /** Multiplicative span change since the previous frame (1 = unchanged, >1 = fingers spreading). */
+  scale: number
+  /** Rotation of the pointer pair since the previous frame, radians (0 with a single pointer). */
+  rotation: number
+  /** Current focal point in window coordinates (the clientX/clientY frame) - the zoom-about anchor. */
+  x: number
+  y: number
+  /** How many pointers are down right now. Consumers that give one- and
+   * two-finger translation different meanings (rotate vs pan) route on this;
+   * dx/dy alone cannot tell them apart, both are focal movement. */
+  pointers: number
+}
+
+export interface TransformOptions {
+  onTransformStart?: () => void
+  /** Streams one delta per frame; compose them multiplicatively (scale) / additively (dx, dy, rotation). */
+  onTransformMove?: (t: TransformDelta) => void
+  onTransformEnd?: () => void
+}
+
+// The merged transform recognizer: pan + pinch + rotate as ONE gesture over
+// the set of pointers down on the node (Flutter's Scale model). Splitting
+// them into separate recognizers would make them fight in the arena over the
+// same fingers, so the genuinely-simultaneous case (drag while pinching a
+// photo, one-finger orbit vs two-finger zoom) is a single recognizer that
+// streams focal-point translation, span scale, and pair rotation together;
+// consumers use the components they care about (an orbit camera reads dx/dy
+// and scale, ignores rotation).
+//
+// Pointers arm silently on their down (no arena claim); when focal travel or
+// span change from the armed configuration crosses the slop, that is positive
+// evidence and the recognizer steals EVERY tracked pointer, all or nothing:
+// if any is already resolved elsewhere (an inner pan won that finger) the
+// whole gesture stands down. The slop is swallowed - deltas stream from the
+// activation configuration on. With one finger it degrades to a plain pan
+// (scale 1, rotation 0), so a drag on the node gets arena arbitration too.
+//
+// Measurement is per FRAME, not per event. Move events update pointer
+// positions and arena state as they bubble (claims must stay visible
+// synchronously within the dispatch walk), but the cross-pointer measure -
+// centroid, span, angle - waits for the "pointerFrame" terminator the
+// runtime emits after all of a frame's moves have dispatched. At that point
+// every pointer is the same age, so the per-event scissor is gone by
+// construction (measuring on each event paired one fresh position with the
+// other pointers' frame-stale ones, and the span oscillated around its true
+// value under perfectly smooth motion), and one delta emits per frame - the
+// cadence anything painting consumes anyway. Anchors defer to the same
+// terminator for the same reason: a mid-batch anchor would bake one
+// mixed-age jolt into the first delta after it.
+//
+// Residual span noise survives batching, tuned against a captured tablet
+// stream (sensor dither +-1-3px/event - and a resting pair's span WANDERS
+// 28-76px over seconds, human fingers cannot hold separation, so no
+// threshold alone can stay closed):
+//   - a slop gate: scale is 1 until the span leaves its gesture baseline by
+//     SLOP, so a pan or hold that never really pinches never zooms;
+//   - a low-pass: once engaged, scale comes from an EMA of the span
+//     (SPAN_SMOOTH). Zero-mean dither averages out; deliberate pinching - a
+//     sustained signed drift - passes with ~50ms lag. With the scissor gone
+//     this is belt-and-braces; a retirement candidate after an on-device
+//     A/B against the raw batched span.
+//   - a re-lock: pressed fingertips that HOLD still slowly flatten and roll
+//     toward each other, which the sensor reports as a genuine ~9px/s span
+//     shrink - a held pinch would zoom out forever. Deliberate pinches
+//     measured 100-160px/s, an order of magnitude above creep, so when the
+//     smoothed span rate stays under QUIET the gate re-locks and rebases;
+//     crossing SLOP from the new base re-engages instantly. No amount of
+//     batching removes creep: it is real reported motion.
+// dx/dy have no gate or filter: their noise term is a fraction of a pixel.
+//
+// Set changes rebase: a finger joining (stolen outright - the gesture is
+// already established) or lifting mid-gesture re-anchors the reference
+// configuration, so the change itself never emits a jump delta. The gesture
+// ends when the last finger lifts. Moves and ups arrive on the frozen down
+// path, so an active transform survives leaving the node or the window.
+// cancel() is the external-cancel hook; it ends an active gesture without
+// onTransformEnd. Options are read at event time.
+export function createTransform(options: TransformOptions) {
+  // All tracked pointers, in down order (the first two define the rotation pair).
+  let pointers = new Map<number, { x: number; y: number }>()
+  let active = false
+  // Slop baseline while armed; last delivered configuration while active.
+  let ref: { x: number; y: number; span: number; angle: number } | null = null
+  // The zoom gate and filter (see the zoom-noise note above): scale stays 1
+  // until the SMOOTHED span leaves spanBase by SLOP, then streams smoothed
+  // ratios for the rest of the gesture.
+  let pinch = false
+  let spanBase = 0
+  let smoothSpan = 0
+  // Warm-started at each engage so a fresh pinch cannot instantly re-lock.
+  let spanRate = 0
+  // Motion arrived this frame; measured and emitted at the terminator.
+  let dirty = false
+  // The anchor must be retaken at the terminator (activation and set-change
+  // rebases): mid-batch the pointer map is mixed-age, so anchoring
+  // immediately would bake a jolt into the next delta. A rebase frame
+  // emits nothing.
+  let rebase = false
+
+  let measure = () => {
+    let n = pointers.size
+    let x = 0
+    let y = 0
+    for (let p of pointers.values()) {
+      x += p.x
+      y += p.y
+    }
+    x /= n
+    y /= n
+    let span = 0
+    for (let p of pointers.values()) span += Math.hypot(p.x - x, p.y - y)
+    span /= n
+    let angle = 0
+    if (n >= 2) {
+      let pair = pointers.values()
+      let a = pair.next().value!
+      let b = pair.next().value!
+      angle = Math.atan2(b.y - a.y, b.x - a.x)
+    }
+    return { x, y, span, angle }
+  }
+
+  let reset = () => {
+    if (active) for (let id of pointers.keys()) arena.release(id, owner)
+    pointers.clear()
+    active = false
+    ref = null
+    pinch = false
+    dirty = false
+    rebase = false
+  }
+  let cancel = reset
+  let owner: ArenaOwner = { cancel }
+
+  // The per-frame measure point: runs at the pointerFrame terminator, when
+  // every tracked pointer's position is the same age.
+  let flush = () => {
+    if (!active) return
+    if (rebase) {
+      // Anchor from same-age positions; emits nothing - an activation or
+      // set change must not produce a jump delta. Motion that arrived in
+      // the same batch folds into the anchor.
+      ref = measure()
+      spanBase = ref.span
+      smoothSpan = ref.span
+      rebase = false
+      dirty = false
+      return
+    }
+    if (!dirty || !ref) return
+    dirty = false
+    let m = measure()
+    let prevSpan = smoothSpan
+    smoothSpan += (m.span - smoothSpan) * SPAN_SMOOTH
+    spanRate += (Math.abs(smoothSpan - prevSpan) - spanRate) * QUIET_SMOOTH
+    if (!pinch && Math.abs(smoothSpan - spanBase) >= SLOP) {
+      // A slop excursion at speed is a pinch; at creep speed the base
+      // just follows, so drift can wander forever without engaging.
+      if (spanRate >= ENGAGE) pinch = true
+      else spanBase = smoothSpan
+    }
+    let scale = pinch && prevSpan > 0 && smoothSpan > 0 ? smoothSpan / prevSpan : 1
+    if (pinch && spanRate < QUIET) {
+      // Holding, not pinching (see the re-lock note above).
+      pinch = false
+      spanBase = smoothSpan
+    }
+    let rotation = 0
+    if (pointers.size >= 2) {
+      rotation = m.angle - ref.angle
+      if (rotation > Math.PI) rotation -= 2 * Math.PI
+      else if (rotation < -Math.PI) rotation += 2 * Math.PI
+    }
+    let dx = m.x - ref.x
+    let dy = m.y - ref.y
+    ref = m
+    options.onTransformMove?.({ dx, dy, scale, rotation, x: m.x, y: m.y, pointers: pointers.size })
+  }
+
+  // An unmount mid-gesture must not leave resolved claims behind (or a live
+  // terminator subscription).
+  onSettled(() => {
+    let unsub = on("pointerFrame", flush)
+    return () => {
+      unsub()
+      reset()
+    }
+  })
+
+  let handlers = {
+    onPointerDown: (e: PointerEvent) => {
+      if (e.button != null && e.button !== 0) return
+      if (pointers.has(e.pointerId)) return
+      if (active) {
+        // A finger joining an established gesture belongs to it outright; if
+        // the arena refuses (resolved elsewhere) the finger stays out.
+        if (!arena.steal(e.pointerId, owner)) return
+        pointers.set(e.pointerId, { x: e.clientX, y: e.clientY })
+        rebase = true
+        return
+      }
+      pointers.set(e.pointerId, { x: e.clientX, y: e.clientY })
+      ref = measure()
+    },
+    onPointerMove: (e: PointerEvent) => {
+      let p = pointers.get(e.pointerId)
+      if (!p || !ref) return
+      p.x = e.clientX
+      p.y = e.clientY
+      if (!active) {
+        // Arming runs per event: the slop test tolerates a mixed-age
+        // measure (8px against <=1 frame of staleness), and the arena
+        // steal must happen synchronously inside the dispatch walk.
+        let m = measure()
+        let travel = Math.hypot(m.x - ref.x, m.y - ref.y)
+        if (travel < SLOP && Math.abs(m.span - ref.span) < SLOP) return
+        let taken: number[] = []
+        let refused = false
+        for (let id of pointers.keys()) {
+          if (arena.steal(id, owner)) taken.push(id)
+          else {
+            refused = true
+            break
+          }
+        }
+        if (refused) {
+          // The gesture belongs elsewhere; hand back what we took and disarm.
+          for (let id of taken) arena.release(id, owner)
+          pointers.clear()
+          ref = null
+          return
+        }
+        active = true
+        // A span-driven activation IS a deliberate pinch - engaging the
+        // zoom gate now avoids demanding a second slop-crossing from it.
+        pinch = Math.abs(m.span - ref.span) >= SLOP
+        spanRate = pinch ? 1 : 0
+        rebase = true
+        options.onTransformStart?.()
+        return
+      }
+      dirty = true
+    },
+    onPointerUp: (e: PointerEvent) => {
+      if (!pointers.has(e.pointerId)) return
+      if (active) {
+        arena.release(e.pointerId, owner)
+        pointers.delete(e.pointerId)
+        if (pointers.size === 0) {
+          active = false
+          ref = null
+          pinch = false
+          dirty = false
+          rebase = false
+          options.onTransformEnd?.()
+        } else {
+          rebase = true
+          pinch = pinch && pointers.size >= 2
+          spanRate = 1
+        }
+        return
+      }
+      pointers.delete(e.pointerId)
+      ref = pointers.size > 0 ? measure() : null
+    },
+  }
+
+  return { handlers, cancel }
+}

package/src/types.d.ts

@@ -23,10 +23,6 @@ declare global {
     readonly env: { readonly DEV: boolean }
   }
 
-  let image: {
-    decodeImage(bytes: Uint8Array): { data: Uint8Array, width: number, height: number }
-  }
-
   let speech: {
     start(options: {
       model: Uint8Array, vadModel: Uint8Array, lang?: string, microphone?: number,
@@ -419,8 +415,10 @@ export interface ViewOwnProps extends TransformProps, PointerProps {
    * transform - it never sizes the element, so give the box its size with
    * layout props. Composed innermost: the transform props still operate in
    * box space, and pointer events on children arrive in design coordinates.
-   * The natural wrapper for parseSvg draws, or any d-* subtree authored in
-   * fixed design units.
+   * The overflow clip and scrollX/scrollY stay box properties too: the clip
+   * rect is the layout box and scroll offsets are box pixels, regardless of
+   * fit scale. The natural wrapper for parseSvg draws, or any d-* subtree
+   * authored in fixed design units.
    */
   viewBox?: [number, number]
   /**
@@ -586,11 +584,13 @@ export interface TextureProps extends PaintProps, PointerProps {
   srcY?: number
   srcW?: number
   srcH?: number
-  // Shader uniform values, when src names a shader texture. Applied at the
-  // next repaint (not synchronously), so a fast-changing signal stays paced
-  // to real frames rather than triggering a GL render pass per write. A
-  // number drives a scalar (`float`/`int`); a flat number array drives the
-  // declared GLSL type: 2/3/4 for `vec2`/`vec3`/`vec4`, 16 (column-major)
-  // for `mat4`.
+  // Shader uniform values, when src names a render target: the same channel
+  // setTargetParams drives, written through it directly - prop and
+  // imperative writes validate and error identically (an unknown name
+  // throws, and set src before params: a write with no src to route to
+  // throws). However often a signal writes, the target renders once per
+  // frame at the raster flush. A number drives a scalar (`float`/`int`); a
+  // flat number array drives the declared GLSL type: 2/3/4 for
+  // `vec2`/`vec3`/`vec4`, 16 (column-major) for `mat4`.
   params?: Record<string, number | number[]>
 }

package/src/window.ts

@@ -38,26 +38,42 @@ let refreshRate = 60
  * the present count, and `rate` is the current refresh rate in Hz. `tick` is paced
  * by the runtime (one refresh period per present, slow-corrected toward the wall
  * clock) so animations driven off it stay smooth even when swap-return times
- * jitter. For raw, continuous wall-clock time (e.g. measuring code), use
- * performance.now() instead.
+ * jitter. performance.now() and timers report/march on this same paced timeline
+ * (so the whole time surface freezes together under the dev tools' clock
+ * control); for real wall-clock time use Date.now().
  * Returns a cleanup function; also auto-cleans within a reactive scope.
  */
 export function onFrame(fn: (tick: number, frame: number, rate: number) => void) {
   let frameId: number = null!
+  // Cancellation is a flag, not map membership: while a frame runs the whole
+  // callback map is swapped out, so a cleanup() called from another onFrame
+  // callback in the same tick could not reach this entry through the map.
+  let cancelled = false
 
   let extendedFn = (tick: number, frame: number, rate: number) => {
-    fn(tick, frame, rate)
+    if (cancelled) return
+    // Re-register BEFORE running fn, so a throwing callback stays subscribed
+    // (event-listener semantics: the error is reported, the subscription
+    // lives) and a cleanup() from inside fn sees the current frameId. A
+    // pending onFrame callback is a standing request for the next frame.
     frameId = nextFrameId++
     animationFrames.set(frameId, extendedFn)
-    // A pending onFrame callback is a standing request for the next frame.
     requestFrame()
+    try {
+      fn(tick, frame, rate)
+    } catch (err) {
+      console.error("Error in onFrame callback:", err)
+    }
   }
 
   frameId = nextFrameId++
   animationFrames.set(frameId, extendedFn)
   requestFrame()
 
-  let cleanup = () => animationFrames.delete(frameId)
+  let cleanup = () => {
+    cancelled = true
+    animationFrames.delete(frameId)
+  }
   onCleanup(cleanup)
   return cleanup
 }
@@ -253,7 +269,13 @@ export function attachWindow(nodeId: number) {
       animationFrames = new Map()
       for (let fn of frames.values()) fn(t, frame, refreshRate)
     }
-    flush()
+    try {
+      // A throwing effect must not skip renderFrame: the frame still paints
+      // whatever state committed before the throw.
+      flush()
+    } catch (err) {
+      console.error("Error in reactive flush:", err)
+    }
     scanForOrphans(t)
     renderFrame()
   }
@@ -298,7 +320,13 @@ export function attachWindow(nodeId: number) {
         e.localY = localY[i]!
         e.parentX = parentX[i]!
         e.parentY = parentY[i]!
-        getEventHandler(targets[i]!, handler)?.(e)
+        try {
+          getEventHandler(targets[i]!, handler)?.(e)
+        } catch (err) {
+          // One throwing handler must not suppress delivery to the rest of
+          // the path (or the focus/blur step that follows the loop).
+          console.error(`Error in ${handler} handler:`, err)
+        }
         if (stopped) break
       }
     }