@weasel-js/labkit 1.4.0 → 1.4.1

package/dist/{chunk-7VW3S44V.js → chunk-DG2IFMLA.js}

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import earcut from 'earcut';
 import polygonClipping from 'polygon-clipping';
 
-// ../core/dist/chunk-UTIFY2UU.js
+// ../core/dist/chunk-TORKRNFY.js
 
 // ../gestures/dist/index.js
 var GESTURE_DESCRIPTORS = [
@@ -287,7 +287,7 @@ function matchSpec(e, spec, isMac, phaseCtx) {
 }
 var EMPTY_ENGAGED = /* @__PURE__ */ new Set();
 
-// ../core/dist/chunk-UTIFY2UU.js
+// ../core/dist/chunk-TORKRNFY.js
 var DepRegistryContext = createContext(null);
 function DepRegistryProvider({ children }) {
   const sourcesRef = useRef(/* @__PURE__ */ new Map());
@@ -437,6 +437,7 @@ function warnSharedScope() {
 var ActionsContext = createContext(null);
 function ActionsProvider({ children }) {
   const actionsRef = useRef(/* @__PURE__ */ new Map());
+  const liveAction = (id) => actionsRef.current.get(id)?.at(-1);
   const versionRef = useRef(0);
   const cachedRef = useRef([]);
   const cachedVerRef = useRef(-1);
@@ -451,7 +452,9 @@ function ActionsProvider({ children }) {
     const snapshot = () => {
       const v = versionRef.current;
       if (cachedVerRef.current === v) return cachedRef.current;
-      const out = Object.freeze(Array.from(actionsRef.current.values()));
+      const out = Object.freeze(
+        Array.from(actionsRef.current.values(), (stack) => stack[stack.length - 1])
+      );
       cachedRef.current = out;
       cachedVerRef.current = v;
       return out;
@@ -469,16 +472,23 @@ function ActionsProvider({ children }) {
       register: (action) => {
         validateActionId(action.id);
         validateActionDefaultBinding(action);
-        actionsRef.current.set(action.id, action);
+        const stack = actionsRef.current.get(action.id);
+        if (stack) stack.push(action);
+        else actionsRef.current.set(action.id, [action]);
         versionRef.current++;
         notify2();
+        let released = false;
         return () => {
+          if (released) return;
+          released = true;
           const cur = actionsRef.current.get(action.id);
-          if (cur === action) {
-            actionsRef.current.delete(action.id);
-            versionRef.current++;
-            notify2();
-          }
+          if (!cur) return;
+          const i = cur.lastIndexOf(action);
+          if (i === -1) return;
+          cur.splice(i, 1);
+          if (cur.length === 0) actionsRef.current.delete(action.id);
+          versionRef.current++;
+          notify2();
         };
       },
       unregister: (id) => {
@@ -489,7 +499,7 @@ function ActionsProvider({ children }) {
       },
       list: () => snapshot(),
       trigger: (id, params) => {
-        const a = actionsRef.current.get(id);
+        const a = liveAction(id);
         if (!a) return false;
         try {
           if (a.invoker && a.invoker.timing === "immediate") {
@@ -536,7 +546,7 @@ function ActionsProvider({ children }) {
         const disp = dispatcherRef.current;
         if (!disp) return null;
         const r = wiredDepRegRef.current ?? depRegRef.current;
-        const a = actionsRef.current.get(id);
+        const a = liveAction(id);
         const deps = !r ? {} : a?.requires ? buildDepsFromRequires(a, r) : {
           selection: r.get("selection"),
           scene: r.get("scene"),
@@ -4660,7 +4670,7 @@ function serialToEntry(se, custom, logger) {
   };
 }
 
-// ../core/dist/chunk-HYJL7OOJ.js
+// ../core/dist/chunk-NU7D64RL.js
 function worldToScreen(worldX, worldY, view) {
   return [view.panX + worldX * view.zoom.x, view.panY + worldY * view.zoom.y];
 }
@@ -4833,6 +4843,44 @@ void main() {
 }
 `
 );
+var IMAGE_VOPACITY_VERT_SRC = (
+  /* glsl */
+  `#version 300 es
+in vec2 a_position;
+in vec2 a_uv;
+in float a_opacity;
+uniform mat3 u_proj;
+uniform mat3 u_model;
+out vec2 v_uv;
+out float v_opacity;
+void main() {
+  vec3 screen = u_model * vec3(a_position, 1.0);
+  vec3 clip   = u_proj  * vec3(screen.xy, 1.0);
+  gl_Position = vec4(clip.xy, 0.0, 1.0);
+  v_uv = a_uv;
+  v_opacity = a_opacity;
+}
+`
+);
+var IMAGE_VOPACITY_FRAG_SRC = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec2 v_uv;
+in float v_opacity;
+uniform sampler2D u_sampler;
+uniform float u_alpha;
+uniform mat4 u_colorMatrix;
+uniform vec4 u_colorBias;
+out vec4 outColor;
+void main() {
+  vec4 texel = texture(u_sampler, v_uv);
+  vec4 mapped = clamp(u_colorMatrix * texel + u_colorBias, 0.0, 1.0);
+  float a = mapped.a * v_opacity * u_alpha;
+  outColor = vec4(mapped.rgb * a, a);
+}
+`
+);
 var IMAGE_FILL_UNIFORMS = [
   "u_proj",
   "u_model",
@@ -4843,6 +4891,15 @@ var IMAGE_FILL_UNIFORMS = [
   "u_colorBias"
 ];
 var IMAGE_FILL_ATTRIBUTES = ["a_position", "a_uv"];
+var IMAGE_VOPACITY_UNIFORMS = [
+  "u_proj",
+  "u_model",
+  "u_sampler",
+  "u_alpha",
+  "u_colorMatrix",
+  "u_colorBias"
+];
+var IMAGE_VOPACITY_ATTRIBUTES = ["a_position", "a_uv", "a_opacity"];
 var GRAD_VERT_SRC = (
   /* glsl */
   `#version 300 es
@@ -5963,6 +6020,7 @@ seedBuiltins();
 function getPaintKind(kind) {
   return KINDS.get(kind ?? "solid");
 }
+var SPRITE_STRIDE = 9;
 function tessellate(path, opts = {}) {
   if (path.kind === "rect") return tessellateRect(path);
   return tessellatePolygon(path, opts);
@@ -7645,6 +7703,208 @@ var SolidBatch = class {
     gl.deleteVertexArray(set.vao);
   }
 };
+var MAX_IMAGE_VERTICES_PER_BATCH = 32768;
+var FLOATS_PER_VERTEX2 = 5;
+var INITIAL_QUADS = 64;
+var TIERS = [
+  { quads: 1, slots: 64 },
+  { quads: 16, slots: 64 },
+  { quads: 256, slots: 16 }
+];
+TIERS[0].slots;
+var IMAGE_LARGE_RING_SIZE = 4;
+function doubledTo2(from, need) {
+  let capacity = from;
+  while (capacity < need) capacity *= 2;
+  return capacity;
+}
+function quadIndices(quads) {
+  const out = new Uint32Array(quads * 6);
+  for (let q = 0; q < quads; q++) {
+    const b = q * 4;
+    const j = q * 6;
+    out[j] = b;
+    out[j + 1] = b + 1;
+    out[j + 2] = b + 2;
+    out[j + 3] = b;
+    out[j + 4] = b + 2;
+    out[j + 5] = b + 3;
+  }
+  return out;
+}
+var ImageBatch = class {
+  gl;
+  aPos;
+  aUv;
+  aOpacity;
+  /** One ring per tier, cycled per flush. Slots are created on first use, so a
+   *  renderer that flushes rarely allocates as few as it flushes. */
+  rings = TIERS.map((t) => new Array(t.slots).fill(void 0));
+  nextInRing = TIERS.map(() => 0);
+  /** For flushes past the largest tier; these sets grow to fit. */
+  largeRing = new Array(IMAGE_LARGE_RING_SIZE).fill(void 0);
+  nextLarge = 0;
+  verts = new Float32Array(INITIAL_QUADS * 4 * FLOATS_PER_VERTEX2);
+  nQuads = 0;
+  constructor(gl, prog) {
+    const aPos = prog.attribute("a_position");
+    const aUv = prog.attribute("a_uv");
+    const aOpacity = prog.attribute("a_opacity");
+    if (aPos === void 0 || aUv === void 0 || aOpacity === void 0) {
+      throw new Error(
+        "ImageBatch: vertex-opacity program is missing a_position / a_uv / a_opacity"
+      );
+    }
+    this.gl = gl;
+    this.aPos = aPos;
+    this.aUv = aUv;
+    this.aOpacity = aOpacity;
+  }
+  /** Indices staged — what a caller passes to `drawElements`. */
+  get length() {
+    return this.nQuads * 6;
+  }
+  get quads() {
+    return this.nQuads;
+  }
+  /** Whether staging one more quad would put the run past the per-flush cap. */
+  wouldOverflow() {
+    return (this.nQuads + 1) * 4 > MAX_IMAGE_VERTICES_PER_BATCH;
+  }
+  /**
+   * Append one image quad: the destination rect `(x, y, w, h)` mapped through
+   * `m`, sampling `(u0, v0)`-`(u1, v1)`, every corner carrying `opacity`.
+   *
+   * An affine maps a rect to a parallelogram, so two triangles still cover it
+   * and the batch draws at `u_model` identity. Corners wind top-left,
+   * top-right, bottom-right, bottom-left, with UVs following — the flips a
+   * command asks for are already in the `u`/`v` the caller passes.
+   */
+  pushQuad(x, y, w, h, m, u0, v0, u1, v1, opacity) {
+    this.reserve();
+    const v = this.verts;
+    let i = this.nQuads * 4 * FLOATS_PER_VERTEX2;
+    const ma = m[0], mb = m[1], mc = m[3], md = m[4], mtx = m[6], mty = m[7];
+    const x1 = x + w;
+    const y1 = y + h;
+    const ax = ma * x + mc * y + mtx, ay = mb * x + md * y + mty;
+    const bx = ma * x1 + mc * y + mtx, by = mb * x1 + md * y + mty;
+    const cx = ma * x1 + mc * y1 + mtx, cy = mb * x1 + md * y1 + mty;
+    const dx = ma * x + mc * y1 + mtx, dy = mb * x + md * y1 + mty;
+    v[i++] = ax;
+    v[i++] = ay;
+    v[i++] = u0;
+    v[i++] = v0;
+    v[i++] = opacity;
+    v[i++] = bx;
+    v[i++] = by;
+    v[i++] = u1;
+    v[i++] = v0;
+    v[i++] = opacity;
+    v[i++] = cx;
+    v[i++] = cy;
+    v[i++] = u1;
+    v[i++] = v1;
+    v[i++] = opacity;
+    v[i++] = dx;
+    v[i++] = dy;
+    v[i++] = u0;
+    v[i++] = v1;
+    v[i++] = opacity;
+    this.nQuads += 1;
+  }
+  /** Upload the staged geometry into the next set of buffers and bind its VAO.
+   *  Returns the index count for the caller's `drawElements`. */
+  uploadAndBind() {
+    const gl = this.gl;
+    const tier = TIERS.findIndex((t) => this.nQuads <= t.quads);
+    const set = tier < 0 ? this.nextLargeSlot() : this.nextRingSlot(tier);
+    gl.bindVertexArray(set.vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, set.vbo);
+    gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verts, 0, this.nQuads * 4 * FLOATS_PER_VERTEX2);
+    return this.nQuads * 6;
+  }
+  reset() {
+    this.nQuads = 0;
+  }
+  dispose() {
+    for (const set of [...this.rings.flat(), ...this.largeRing]) {
+      if (set) this.deleteSet(set);
+    }
+    for (const ring of this.rings) ring.fill(void 0);
+    this.largeRing.fill(void 0);
+  }
+  /** Grow the CPU arrays so one more quad fits. */
+  reserve() {
+    const need = (this.nQuads + 1) * 4 * FLOATS_PER_VERTEX2;
+    if (need <= this.verts.length) return;
+    const grown = new Float32Array(doubledTo2(this.verts.length, need));
+    grown.set(this.verts);
+    this.verts = grown;
+  }
+  nextRingSlot(tier) {
+    const ring = this.rings[tier];
+    const slot = this.nextInRing[tier];
+    this.nextInRing[tier] = (slot + 1) % ring.length;
+    const existing = ring[slot];
+    if (existing) return existing;
+    const set = this.createSet(TIERS[tier].quads);
+    ring[slot] = set;
+    return set;
+  }
+  nextLargeSlot() {
+    const gl = this.gl;
+    const slot = this.nextLarge;
+    this.nextLarge = (slot + 1) % IMAGE_LARGE_RING_SIZE;
+    let set = this.largeRing[slot];
+    if (!set) {
+      set = this.createSet(doubledTo2(TIERS[TIERS.length - 1].quads, this.nQuads));
+      this.largeRing[slot] = set;
+      return set;
+    }
+    if (this.nQuads > set.quadCapacity) {
+      set.quadCapacity = doubledTo2(set.quadCapacity, this.nQuads);
+      gl.bindVertexArray(set.vao);
+      gl.bindBuffer(gl.ARRAY_BUFFER, set.vbo);
+      gl.bufferData(
+        gl.ARRAY_BUFFER,
+        set.quadCapacity * 4 * FLOATS_PER_VERTEX2 * 4,
+        gl.DYNAMIC_DRAW
+      );
+      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, set.ibo);
+      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, quadIndices(set.quadCapacity), gl.STATIC_DRAW);
+      gl.bindVertexArray(null);
+    }
+    return set;
+  }
+  createSet(quads) {
+    const gl = this.gl;
+    const vao = gl.createVertexArray();
+    const vbo = gl.createBuffer();
+    const ibo = gl.createBuffer();
+    if (!vao || !vbo || !ibo) throw new Error("ImageBatch: failed to create GL objects");
+    const stride = FLOATS_PER_VERTEX2 * 4;
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+    gl.bufferData(gl.ARRAY_BUFFER, quads * 4 * stride, gl.DYNAMIC_DRAW);
+    gl.enableVertexAttribArray(this.aPos);
+    gl.vertexAttribPointer(this.aPos, 2, gl.FLOAT, false, stride, 0);
+    gl.enableVertexAttribArray(this.aUv);
+    gl.vertexAttribPointer(this.aUv, 2, gl.FLOAT, false, stride, 8);
+    gl.enableVertexAttribArray(this.aOpacity);
+    gl.vertexAttribPointer(this.aOpacity, 1, gl.FLOAT, false, stride, 16);
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, quadIndices(quads), gl.STATIC_DRAW);
+    gl.bindVertexArray(null);
+    return { vao, vbo, ibo, quadCapacity: quads };
+  }
+  deleteSet(set) {
+    const gl = this.gl;
+    gl.deleteBuffer(set.vbo);
+    gl.deleteBuffer(set.ibo);
+    gl.deleteVertexArray(set.vao);
+  }
+};
 var FRAME_UPLOADS = /* @__PURE__ */ new WeakMap();
 var FRAME_PROJ = /* @__PURE__ */ new WeakMap();
 function uploadedFor(ctx, prog) {
@@ -7738,13 +7998,14 @@ function dispatch(ctx, cmd) {
     case "path":
       return drawPath(ctx, cmd);
     case "text":
-      flushSolids(ctx);
+      flushBatches(ctx);
       return drawText(ctx, cmd);
     case "image":
-      flushSolids(ctx);
       return drawImage(ctx, cmd);
+    case "sprites":
+      return drawSprites(ctx, cmd);
     case "shader":
-      flushSolids(ctx);
+      flushBatches(ctx);
       return drawShader(ctx, cmd);
   }
 }
@@ -7921,6 +8182,7 @@ function canBatchMesh(mesh) {
   return !mesh.requiresStencil && mesh.vertices.length >> 1 <= MAX_BATCHED_MESH_VERTICES;
 }
 function stageSolid(ctx, vertices) {
+  flushImages(ctx);
   if (ctx.solidState !== void 0 && !stagedStateIsLive(ctx, ctx.solidState)) flushSolids(ctx);
   if (ctx.solidBatch.wouldOverflow(vertices)) flushSolids(ctx);
   if (ctx.solidState === void 0) {
@@ -7964,7 +8226,7 @@ function tryStageSolid(ctx, mesh, paint) {
     pushMesh(ctx, mesh, paint);
     return true;
   }
-  flushSolids(ctx);
+  flushBatches(ctx);
   return false;
 }
 function flushSolids(ctx) {
@@ -7985,6 +8247,56 @@ function flushSolids(ctx) {
   batch.reset();
   ctx.solidState = void 0;
 }
+function stagedImageStateIsLive(ctx, staged, image, sampling) {
+  if (staged.image !== image) return false;
+  if (staged.sampling !== sampling) return false;
+  if (staged.clipDepth !== ctx.clipDepth) return false;
+  const colorMatrix = ctx.state.colorMatrix;
+  return staged.colorMatrix === colorMatrix || sameValues(staged.colorMatrix, colorMatrix);
+}
+function stageImage(ctx, image, sampling) {
+  flushSolids(ctx);
+  if (ctx.imageState !== void 0 && !stagedImageStateIsLive(ctx, ctx.imageState, image, sampling)) {
+    flushImages(ctx);
+  }
+  if (ctx.imageBatch.wouldOverflow()) flushImages(ctx);
+  if (ctx.imageState === void 0) {
+    ctx.imageState = {
+      image,
+      sampling,
+      colorMatrix: ctx.state.colorMatrix,
+      clipDepth: ctx.clipDepth
+    };
+  }
+}
+function flushImages(ctx) {
+  const batch = ctx.imageBatch;
+  const staged = ctx.imageState;
+  if (batch.length === 0 || staged === void 0) return;
+  const gl = ctx.gl;
+  const prog = ctx.imageFillVOpacity;
+  gl.useProgram(prog.handle);
+  const indexCount = batch.uploadAndBind();
+  setProjAndModel(ctx, prog, BATCH_MODEL);
+  setAlphaUniform(ctx, prog, 1);
+  setColorMatrixUniforms(ctx, prog, staged.colorMatrix);
+  ctx.imageCache.bind(staged.image, 0);
+  gl.texParameteri(
+    gl.TEXTURE_2D,
+    gl.TEXTURE_MAG_FILTER,
+    staged.sampling === "nearest" ? gl.NEAREST : gl.LINEAR
+  );
+  gl.uniform1i(prog.uniform("u_sampler"), 0);
+  applyClipTest(ctx, staged.clipDepth);
+  gl.drawElements(gl.TRIANGLES, indexCount, gl.UNSIGNED_INT, 0);
+  gl.bindVertexArray(null);
+  batch.reset();
+  ctx.imageState = void 0;
+}
+function flushBatches(ctx) {
+  flushSolids(ctx);
+  flushImages(ctx);
+}
 function expandAnchorColors(perAnchor, handle) {
   const aA = handle.anchorA;
   const aB = handle.anchorB;
@@ -8188,7 +8500,7 @@ function rasterizePathToStencil(ctx, path) {
   gl.bindVertexArray(null);
 }
 function pushClip(ctx, path, newDepth) {
-  flushSolids(ctx);
+  flushBatches(ctx);
   const gl = ctx.gl;
   const ancestors = ancestorMask(newDepth - 1);
   const newBit = 1 << newDepth;
@@ -8203,7 +8515,7 @@ function pushClip(ctx, path, newDepth) {
   gl.stencilMask(255);
 }
 function popClip(ctx, path, oldDepth) {
-  flushSolids(ctx);
+  flushBatches(ctx);
   const gl = ctx.gl;
   gl.enable(gl.STENCIL_TEST);
   const oldBit = 1 << oldDepth + 1;
@@ -8250,7 +8562,7 @@ function drawPathStroke(ctx, rawCmd) {
   const stroke = cmd.stroke;
   const align = stroke.align ?? "center";
   if (cmd.path.kind === "polygon" && align !== "center") {
-    flushSolids(ctx);
+    flushBatches(ctx);
     drawPathStrokeStenciled(ctx, cmd, align);
     return;
   }
@@ -8598,45 +8910,6 @@ function drawTextGroup(ctx, group, prog, dx, dy) {
   gl.drawElements(gl.TRIANGLES, group.quads.length * 6, gl.UNSIGNED_INT, 0);
   gl.bindVertexArray(null);
 }
-var IMAGE_QUAD_RING_SIZE = 64;
-var IMAGE_QUAD_RINGS = /* @__PURE__ */ new WeakMap();
-var IMAGE_QUAD_INDICES = new Uint32Array([0, 1, 2, 1, 3, 2]);
-var IMAGE_QUAD_STRIDE = 16;
-function imageQuadRing(gl, prog) {
-  const existing = IMAGE_QUAD_RINGS.get(prog);
-  if (existing) return existing;
-  const aPosLoc = prog.attribute("a_position");
-  const aUvLoc = prog.attribute("a_uv");
-  const ibo = gl.createBuffer();
-  if (!ibo) throw new Error("drawImage: createBuffer (IBO) returned null");
-  const vaos = [];
-  const vbos = [];
-  for (let slot = 0; slot < IMAGE_QUAD_RING_SIZE; slot++) {
-    const vao = gl.createVertexArray();
-    const vbo = gl.createBuffer();
-    if (!vao) throw new Error("drawImage: createVertexArray returned null");
-    if (!vbo) throw new Error("drawImage: createBuffer returned null");
-    gl.bindVertexArray(vao);
-    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
-    gl.bufferData(gl.ARRAY_BUFFER, 4 * IMAGE_QUAD_STRIDE, gl.DYNAMIC_DRAW);
-    if (aPosLoc !== void 0) {
-      gl.enableVertexAttribArray(aPosLoc);
-      gl.vertexAttribPointer(aPosLoc, 2, gl.FLOAT, false, IMAGE_QUAD_STRIDE, 0);
-    }
-    if (aUvLoc !== void 0) {
-      gl.enableVertexAttribArray(aUvLoc);
-      gl.vertexAttribPointer(aUvLoc, 2, gl.FLOAT, false, IMAGE_QUAD_STRIDE, 8);
-    }
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
-    if (slot === 0) gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, IMAGE_QUAD_INDICES, gl.STATIC_DRAW);
-    gl.bindVertexArray(null);
-    vaos.push(vao);
-    vbos.push(vbo);
-  }
-  const ring = { vaos, vbos, ibo, next: 0 };
-  IMAGE_QUAD_RINGS.set(prog, ring);
-  return ring;
-}
 var TEXT_QUAD_RING_SIZE = 64;
 var TEXT_QUAD_RINGS = /* @__PURE__ */ new WeakMap();
 function grownTo(need) {
@@ -8714,22 +8987,9 @@ function disposeTextQuads(gl, prog) {
   gl.deleteBuffer(ring.ibo);
   TEXT_QUAD_RINGS.delete(prog);
 }
-function disposeImageQuads(gl, prog) {
-  const ring = IMAGE_QUAD_RINGS.get(prog);
-  if (!ring) return;
-  for (const vao of ring.vaos) gl.deleteVertexArray(vao);
-  for (const vbo of ring.vbos) gl.deleteBuffer(vbo);
-  gl.deleteBuffer(ring.ibo);
-  IMAGE_QUAD_RINGS.delete(prog);
-}
-var IMAGE_QUAD_VERTICES = new Float32Array(16);
 function drawImage(ctx, cmd) {
   ctx.imageCache.upload(cmd.image, cmd.image);
-  const gl = ctx.gl;
-  const prog = ctx.imageFill;
-  gl.useProgram(prog.handle);
-  const x0 = cmd.x, y0 = cmd.y;
-  const x1 = cmd.x + cmd.w, y1 = cmd.y + cmd.h;
+  stageImage(ctx, cmd.image, cmd.sampling ?? "linear");
   const src = cmd.source;
   let u0 = 0, v0 = 0, u1 = 1, v1 = 1;
   if (src) {
@@ -8749,43 +9009,50 @@ function drawImage(ctx, cmd) {
     v0 = v1;
     v1 = t;
   }
-  const v = IMAGE_QUAD_VERTICES;
-  v[0] = x0;
-  v[1] = y0;
-  v[2] = u0;
-  v[3] = v0;
-  v[4] = x1;
-  v[5] = y0;
-  v[6] = u1;
-  v[7] = v0;
-  v[8] = x0;
-  v[9] = y1;
-  v[10] = u0;
-  v[11] = v1;
-  v[12] = x1;
-  v[13] = y1;
-  v[14] = u1;
-  v[15] = v1;
-  const ring = imageQuadRing(gl, prog);
-  const slot = ring.next;
-  ring.next = (slot + 1) % IMAGE_QUAD_RING_SIZE;
-  gl.bindVertexArray(ring.vaos[slot]);
-  gl.bindBuffer(gl.ARRAY_BUFFER, ring.vbos[slot]);
-  gl.bufferSubData(gl.ARRAY_BUFFER, 0, v);
-  setProjAndModel(ctx, prog);
-  setColorMatrixUniforms(ctx, prog);
-  ctx.imageCache.bind(cmd.image, 0);
-  gl.texParameteri(
-    gl.TEXTURE_2D,
-    gl.TEXTURE_MAG_FILTER,
-    cmd.sampling === "nearest" ? gl.NEAREST : gl.LINEAR
+  ctx.imageBatch.pushQuad(
+    cmd.x,
+    cmd.y,
+    cmd.w,
+    cmd.h,
+    ctx.state.transform,
+    u0,
+    v0,
+    u1,
+    v1,
+    (cmd.opacity ?? 1) * ctx.state.alpha
   );
-  gl.uniform1i(prog.uniform("u_sampler"), 0);
-  gl.uniform1f(prog.uniform("u_opacity"), cmd.opacity ?? 1);
-  setAlphaUniform(ctx, prog, ctx.state.alpha);
-  applyClipTest(ctx);
-  gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_INT, 0);
-  gl.bindVertexArray(null);
+}
+function drawSprites(ctx, cmd) {
+  const data = cmd.sprites;
+  const count = Math.floor(data.length / SPRITE_STRIDE);
+  if (count === 0) return;
+  ctx.imageCache.upload(cmd.image, cmd.image);
+  const sampling = cmd.sampling ?? "linear";
+  stageImage(ctx, cmd.image, sampling);
+  const batch = ctx.imageBatch;
+  const m = ctx.state.transform;
+  const groupAlpha = ctx.state.alpha;
+  const tw = cmd.image.width;
+  const th = cmd.image.height;
+  for (let s = 0, i = 0; s < count; s++, i += SPRITE_STRIDE) {
+    if (batch.wouldOverflow()) {
+      flushImages(ctx);
+      stageImage(ctx, cmd.image, sampling);
+    }
+    const sx = data[i + 4], sy = data[i + 5], sw = data[i + 6], sh = data[i + 7];
+    batch.pushQuad(
+      data[i],
+      data[i + 1],
+      data[i + 2],
+      data[i + 3],
+      m,
+      sx / tw,
+      sy / th,
+      (sx + sw) / tw,
+      (sy + sh) / th,
+      data[i + 8] * groupAlpha
+    );
+  }
 }
 var CUSTOM_VERT_SRC = (
   /* glsl */
@@ -8874,6 +9141,7 @@ var WeaselRenderer = class {
   textSdf;
   textSdfR8;
   imageFill;
+  imageFillVOpacity;
   gradFill;
   patternFill;
   meshCache;
@@ -8884,6 +9152,7 @@ var WeaselRenderer = class {
   quadVbo = null;
   quadIbo = null;
   solidBatch;
+  imageBatch;
   groupState = new GroupState();
   widthCss;
   heightCss;
@@ -8948,6 +9217,13 @@ var WeaselRenderer = class {
     this.imageFill = new ShaderProgram(this.gl, IMAGE_VERT_SRC, IMAGE_FRAG_SRC);
     this.imageFill.lookupUniforms(IMAGE_FILL_UNIFORMS);
     this.imageFill.lookupAttributes(IMAGE_FILL_ATTRIBUTES);
+    this.imageFillVOpacity = new ShaderProgram(
+      this.gl,
+      IMAGE_VOPACITY_VERT_SRC,
+      IMAGE_VOPACITY_FRAG_SRC
+    );
+    this.imageFillVOpacity.lookupUniforms(IMAGE_VOPACITY_UNIFORMS);
+    this.imageFillVOpacity.lookupAttributes(IMAGE_VOPACITY_ATTRIBUTES);
     this.gradFill = new ShaderProgram(this.gl, GRAD_VERT_SRC, GRAD_FRAG_SRC);
     this.gradFill.lookupUniforms(GRAD_FILL_UNIFORMS);
     this.gradFill.lookupAttributes(GRAD_FILL_ATTRIBUTES);
@@ -8962,6 +9238,7 @@ var WeaselRenderer = class {
     this.gradRampCache = new GradientRampCache(this.gl);
     this.uploadQuadGeometry();
     this.solidBatch = new SolidBatch(this.gl, this.pathFillVColor);
+    this.imageBatch = new ImageBatch(this.gl, this.imageFillVOpacity);
   }
   uploadQuadGeometry() {
     const gl = this.gl;
@@ -9085,6 +9362,13 @@ var WeaselRenderer = class {
     this.imageFill = new ShaderProgram(this.gl, IMAGE_VERT_SRC, IMAGE_FRAG_SRC);
     this.imageFill.lookupUniforms(IMAGE_FILL_UNIFORMS);
     this.imageFill.lookupAttributes(IMAGE_FILL_ATTRIBUTES);
+    this.imageFillVOpacity = new ShaderProgram(
+      this.gl,
+      IMAGE_VOPACITY_VERT_SRC,
+      IMAGE_VOPACITY_FRAG_SRC
+    );
+    this.imageFillVOpacity.lookupUniforms(IMAGE_VOPACITY_UNIFORMS);
+    this.imageFillVOpacity.lookupAttributes(IMAGE_VOPACITY_ATTRIBUTES);
     this.gradFill = new ShaderProgram(this.gl, GRAD_VERT_SRC, GRAD_FRAG_SRC);
     this.gradFill.lookupUniforms(GRAD_FILL_UNIFORMS);
     this.gradFill.lookupAttributes(GRAD_FILL_ATTRIBUTES);
@@ -9099,6 +9383,7 @@ var WeaselRenderer = class {
     this.gradRampCache = new GradientRampCache(this.gl);
     this.uploadQuadGeometry();
     this.solidBatch = new SolidBatch(this.gl, this.pathFillVColor);
+    this.imageBatch = new ImageBatch(this.gl, this.imageFillVOpacity);
     for (const id of this.programRegistry.keys()) {
       const src = getProgramSource(id);
       if (!src) continue;
@@ -9147,7 +9432,7 @@ var WeaselRenderer = class {
     }
     this.meshCache.freeTransient();
     this.meshCache.drainPendingDeletes();
-    for (const prog of [this.pathFill, this.pathFillVColor, this.textSdf, this.textSdfR8, this.imageFill, this.gradFill, this.patternFill]) {
+    for (const prog of [this.pathFill, this.pathFillVColor, this.textSdf, this.textSdfR8, this.imageFill, this.imageFillVOpacity, this.gradFill, this.patternFill]) {
       gl.deleteProgram(prog.handle);
     }
     for (const prog of this.programRegistry.values()) {
@@ -9158,9 +9443,9 @@ var WeaselRenderer = class {
     this.gradRampCache.free();
     if (this.quadVbo) gl.deleteBuffer(this.quadVbo);
     if (this.quadIbo) gl.deleteBuffer(this.quadIbo);
-    disposeImageQuads(gl, this.imageFill);
     for (const prog of [this.textSdf, this.textSdfR8, this.pathFill]) disposeTextQuads(gl, prog);
     this.solidBatch.dispose();
+    this.imageBatch.dispose();
   }
   /**
    * Draw one frame.
@@ -9189,6 +9474,7 @@ var WeaselRenderer = class {
       textSdf: this.textSdf,
       textSdfR8: this.textSdfR8,
       imageFill: this.imageFill,
+      imageFillVOpacity: this.imageFillVOpacity,
       gradFill: this.gradFill,
       patternFill: this.patternFill,
       meshCache: this.meshCache,
@@ -9200,6 +9486,7 @@ var WeaselRenderer = class {
       quadVbo: this.quadVbo,
       quadIbo: this.quadIbo,
       solidBatch: this.solidBatch,
+      imageBatch: this.imageBatch,
       state: this.groupState,
       widthCss: this.widthCss,
       heightCss: this.heightCss,
@@ -9209,7 +9496,7 @@ var WeaselRenderer = class {
       viewMatrix: viewMatrix2
     };
     for (const cmd of commands) dispatch(ctx, cmd);
-    flushSolids(ctx);
+    flushBatches(ctx);
     this.meshCache.freeTransient();
   }
   resize(dims) {
@@ -9243,6 +9530,10 @@ var WeaselRenderer = class {
     return this.solidBatch;
   }
   /** @internal */
+  _imageBatch() {
+    return this.imageBatch;
+  }
+  /** @internal */
   _textSdf() {
     return this.textSdf;
   }
@@ -9255,6 +9546,10 @@ var WeaselRenderer = class {
     return this.imageFill;
   }
   /** @internal */
+  _imageFillVOpacity() {
+    return this.imageFillVOpacity;
+  }
+  /** @internal */
   _gradFill() {
     return this.gradFill;
   }
@@ -9850,6 +10145,82 @@ function clientToCanvas(canvas, clientX, clientY) {
 function clientToCanvasRect(rect, clientX, clientY) {
   return [clientX - rect.left, clientY - rect.top];
 }
+var LOST_CAPTURE_EVENT = "lostpointercapture";
+function reportsButtons(down) {
+  return !!down.buttons;
+}
+function isMissedRelease(move) {
+  return move.buttons === 0;
+}
+function openPointerSession(origin, down, cb, opts = {}) {
+  const pointerId = down.pointerId;
+  const doc = origin.ownerDocument ?? document;
+  const buttonsReported = reportsButtons(down);
+  let active = true;
+  const teardown = () => {
+    active = false;
+    doc.removeEventListener("pointermove", onMove, true);
+    doc.removeEventListener("pointerup", onUp, true);
+    doc.removeEventListener("pointercancel", onPointerCancel, true);
+    doc.removeEventListener("pointerdown", onRepress, true);
+    origin.removeEventListener(LOST_CAPTURE_EVENT, onLostCapture);
+    if (opts.capture !== false) {
+      try {
+        origin.releasePointerCapture?.(pointerId);
+      } catch {
+      }
+    }
+  };
+  const mine = (e) => e.pointerId === pointerId;
+  const end = (e) => {
+    if (!active) return;
+    teardown();
+    cb.onEnd?.(e);
+  };
+  const abort = (reason) => {
+    if (!active) return;
+    teardown();
+    cb.onCancel?.(reason);
+  };
+  function onMove(e) {
+    if (!active || !mine(e)) return;
+    if (buttonsReported && isMissedRelease(e)) {
+      end(e);
+      return;
+    }
+    cb.onMove?.(e);
+  }
+  function onUp(e) {
+    if (mine(e)) end(e);
+  }
+  function onPointerCancel(e) {
+    if (mine(e)) abort("pointercancel");
+  }
+  function onRepress(e) {
+    if (mine(e)) abort("superseded");
+  }
+  function onLostCapture(e) {
+    if (e.pointerId === pointerId) abort("lostcapture");
+  }
+  if (opts.capture !== false) {
+    try {
+      origin.setPointerCapture?.(pointerId);
+    } catch {
+    }
+  }
+  doc.addEventListener("pointermove", onMove, true);
+  doc.addEventListener("pointerup", onUp, true);
+  doc.addEventListener("pointercancel", onPointerCancel, true);
+  doc.addEventListener("pointerdown", onRepress, true);
+  origin.addEventListener(LOST_CAPTURE_EVENT, onLostCapture);
+  return {
+    pointerId,
+    get active() {
+      return active;
+    },
+    cancel: () => abort("aborted")
+  };
+}
 var BASE_PX = {
   handle: 8,
   anchor: 8,
@@ -11609,6 +11980,28 @@ var cloneAction = {
   },
   enabled: () => true
 };
+function createVelocityTracker() {
+  let samples = [];
+  return {
+    record(dx, dy, t) {
+      samples.push({ dx, dy, t });
+      const cutoff = t - 100;
+      samples = samples.filter((s) => s.t >= cutoff);
+    },
+    getVelocity() {
+      const s = samples;
+      if (s.length < 2) return { vx: 0, vy: 0 };
+      const dt = s[s.length - 1].t - s[0].t;
+      if (dt === 0) return { vx: 0, vy: 0 };
+      const totalDx = s.slice(1).reduce((acc, p) => acc + p.dx, 0);
+      const totalDy = s.slice(1).reduce((acc, p) => acc + p.dy, 0);
+      return { vx: totalDx / dt, vy: totalDy / dt };
+    },
+    reset() {
+      samples = [];
+    }
+  };
+}
 var viewportDragPanAction = {
   id: "viewport.dragPan",
   label: "Drag to pan viewport",
@@ -11626,17 +12019,37 @@ var viewportDragPanAction = {
   requires: ["view"],
   invoker: {
     timing: "ongoing",
-    start(ctx) {
+    start(ctx, opts) {
       const view = ctx.deps.view;
       if (!view) return {};
       const startView = view.get();
-      const scratch = { startView, view };
+      const params = resolveParams(opts?.params) ?? {};
+      const inertia = params.inertia === false ? void 0 : params.inertia;
+      const scratch = {
+        startView,
+        view,
+        axis: params.axis ?? "both",
+        inertia,
+        // Only track when a coast could actually happen, so the common
+        // no-inertia drag does no per-move work.
+        tracker: inertia && view.decay ? createVelocityTracker() : void 0,
+        lastScreen: { x: 0, y: 0 }
+      };
       return {
         kind: "pan",
         onMove(moveCtx) {
           if (!moveCtx.drag) return;
           const screen = moveCtx.drag.screenDelta ?? moveCtx.drag.delta;
-          const { x: screenDx, y: screenDy } = screen;
+          const screenDx = scratch.axis === "y" ? 0 : screen.x;
+          const screenDy = scratch.axis === "x" ? 0 : screen.y;
+          if (scratch.tracker) {
+            scratch.tracker.record(
+              screenDx - scratch.lastScreen.x,
+              screenDy - scratch.lastScreen.y,
+              performance.now()
+            );
+            scratch.lastScreen = { x: screenDx, y: screenDy };
+          }
           const sv = scratch.startView;
           scratch.view.set({
             ...sv,
@@ -11644,7 +12057,24 @@ var viewportDragPanAction = {
             y: sv.y - screenDy / sv.scale.y
           });
         },
-        onEnd() {
+        onEnd(_endCtx, reason) {
+          const { tracker, inertia: inertia2, view: v } = scratch;
+          if (reason === "cancel" || !tracker || !inertia2 || !v.decay) return;
+          const { vx, vy } = tracker.getVelocity();
+          const scale2 = scratch.startView.scale;
+          v.decay({
+            // Screen px/ms → world units/ms, matching the onMove conversion.
+            velocity: { vx: -vx / scale2.x, vy: -vy / scale2.y },
+            friction: inertia2.friction,
+            minSpeed: inertia2.minSpeed,
+            boundary: inertia2.boundary,
+            viewBounds: inertia2.bounds,
+            initialPosition: { x: v.get().x, y: v.get().y },
+            onTick: (dx, dy) => {
+              const cur = v.get();
+              v.set({ ...cur, x: cur.x + dx, y: cur.y + dy });
+            }
+          });
         }
       };
     }
@@ -11745,6 +12175,52 @@ function makeViewportZoomAction(opts = {}) {
   };
 }
 makeViewportZoomAction();
+var viewportWheelPanAction = {
+  id: "viewport.wheelPan",
+  label: "Pan (wheel)",
+  group: "viewport",
+  /**
+   * Plain wheel → pan; Shift+wheel → horizontal pan (axis swap).
+   * Cmd+wheel is claimed by `viewportZoomAction`. The matcher's strict
+   * modifier check keeps the bindings exclusive: omitting `mods` forbids
+   * any modifier, and `mods: { shift: true }` forbids the others.
+   */
+  defaultBinding: [
+    { spec: { kind: "wheel" }, opts: {} },
+    { spec: { kind: "wheel", mods: { shift: true } }, opts: { params: { swapAxis: true } } }
+  ],
+  requires: ["view"],
+  invoker: {
+    timing: "immediate",
+    run(deps, params) {
+      const view = deps.view;
+      if (!view) return;
+      const axis = params?.axis ?? "both";
+      const deltaX = params?.deltaX ?? 0;
+      const deltaY = params?.deltaY ?? 0;
+      const current = view.get();
+      const swap = params?.swapAxis === true;
+      const dx = swap ? (deltaX !== 0 ? deltaX : deltaY) / current.scale.x : deltaX / current.scale.x;
+      const dy = swap ? 0 : deltaY / current.scale.y;
+      view.set({
+        ...current,
+        x: current.x + (axis === "y" ? 0 : dx),
+        y: current.y + (axis === "x" ? 0 : dy)
+      });
+    }
+  },
+  enabled: () => true
+};
+function makeViewportWheelPanAction(opts = {}) {
+  const axis = opts.axis ?? "both";
+  return {
+    ...viewportWheelPanAction,
+    defaultBinding: [
+      { spec: { kind: "wheel" }, opts: { params: { axis } } },
+      { spec: { kind: "wheel", mods: { shift: true } }, opts: { params: { swapAxis: true, axis } } }
+    ]
+  };
+}
 function bodyPredicate(fn) {
   return Object.assign(fn, { readsAffordance: false });
 }
@@ -16248,6 +16724,7 @@ function useGestureDispatcher(opts) {
     };
     const heldKeys = /* @__PURE__ */ new Set();
     const activePointers = /* @__PURE__ */ new Set();
+    const buttonsReportedFor = /* @__PURE__ */ new Set();
     const pointerPositions = /* @__PURE__ */ new Map();
     let multiTouchStart = null;
     const TAP_THRESHOLD_PX = 8;
@@ -16390,8 +16867,10 @@ function useGestureDispatcher(opts) {
     };
     const onPointerDown = (e) => {
       if ((e.button ?? 0) !== 0) return;
+      if (activePointers.has(e.pointerId)) onPointerUp(e);
       routeDown(e.pointerId, e.clientX, e.clientY);
       activePointers.add(e.pointerId);
+      if (reportsButtons(e)) buttonsReportedFor.add(e.pointerId);
       pointerPositions.set(e.pointerId, { x: e.clientX, y: e.clientY });
       try {
         canvas?.setPointerCapture?.(e.pointerId);
@@ -16470,6 +16949,10 @@ function useGestureDispatcher(opts) {
       }
     };
     const onPointerMove = (e) => {
+      if (activePointers.has(e.pointerId) && buttonsReportedFor.has(e.pointerId) && isMissedRelease(e)) {
+        onPointerUp(e);
+        return;
+      }
       routeAt(e.pointerId, e.clientX, e.clientY);
       if (activePointers.has(e.pointerId)) {
         pointerPositions.set(e.pointerId, { x: e.clientX, y: e.clientY });
@@ -16619,6 +17102,7 @@ function useGestureDispatcher(opts) {
       cancelLongPress(e.pointerId);
       const prevSize = activePointers.size;
       activePointers.delete(e.pointerId);
+      buttonsReportedFor.delete(e.pointerId);
       pointerPositions.delete(e.pointerId);
       const staysUnderThreshold = bufferedDown.delete(e.pointerId);
       if (prevSize >= 2 && activePointers.size < 2) {
@@ -16726,6 +17210,7 @@ function useGestureDispatcher(opts) {
       routeAt(e.pointerId, e.clientX, e.clientY);
       cancelLongPress(e.pointerId);
       activePointers.delete(e.pointerId);
+      buttonsReportedFor.delete(e.pointerId);
       pointerPositions.delete(e.pointerId);
       lastPointerDown.delete(e.pointerId);
       bufferedDown.delete(e.pointerId);
@@ -16741,6 +17226,11 @@ function useGestureDispatcher(opts) {
       dispatch2(ev);
       routeRelease(e.pointerId);
     };
+    const onLostCapture = (e) => {
+      const pe = e;
+      if (!activePointers.has(pe.pointerId)) return;
+      onPointerCancel(pe);
+    };
     const onContextMenu = (e) => {
       e.preventDefault();
       routeAt(null, e.clientX, e.clientY);
@@ -16830,6 +17320,7 @@ function useGestureDispatcher(opts) {
     canvas?.addEventListener("pointermove", onPointerMove);
     canvas?.addEventListener("pointerup", onPointerUp);
     canvas?.addEventListener("pointercancel", onPointerCancel);
+    canvas?.addEventListener(LOST_CAPTURE_EVENT, onLostCapture);
     canvas?.addEventListener("contextmenu", onContextMenu);
     canvas?.addEventListener("dragenter", onDragOver);
     canvas?.addEventListener("dragover", onDragOver);
@@ -16850,6 +17341,7 @@ function useGestureDispatcher(opts) {
       canvas?.removeEventListener("pointermove", onPointerMove);
       canvas?.removeEventListener("pointerup", onPointerUp);
       canvas?.removeEventListener("pointercancel", onPointerCancel);
+      canvas?.removeEventListener(LOST_CAPTURE_EVENT, onLostCapture);
       canvas?.removeEventListener("contextmenu", onContextMenu);
       canvas?.removeEventListener("dragenter", onDragOver);
       canvas?.removeEventListener("dragover", onDragOver);
@@ -16864,6 +17356,132 @@ function useGestureDispatcher(opts) {
     };
   }, [enabled, keyboard, canvasRef]);
 }
+var SPRING_DAMPING = 0.5;
+function useDecayLoop() {
+  const stateRef = useRef(null);
+  const frameLoop = useVisibleRaf(
+    (now) => {
+      tick(now);
+    },
+    {
+      // Coasting does not continue while suspended: dropping `lastTime` makes
+      // the resuming frame seed a fresh interval instead of applying an hour of
+      // friction at once, which would end the decay before it was seen.
+      onResume: useCallback(() => {
+        if (stateRef.current) stateRef.current.lastTime = null;
+      }, [])
+    }
+  );
+  const cancel = useCallback(() => {
+    frameLoop.cancel();
+    stateRef.current = null;
+  }, [frameLoop]);
+  const tick = useCallback((now) => {
+    const s = stateRef.current;
+    if (!s) return;
+    if (s.lastTime === null) {
+      s.lastTime = now;
+      frameLoop.request();
+      return;
+    }
+    const dt = Math.min(now - s.lastTime, 64);
+    s.lastTime = now;
+    const f = Math.pow(s.friction, dt / 16.67);
+    s.vx *= f;
+    s.vy *= f;
+    const speed = Math.sqrt(s.vx * s.vx + s.vy * s.vy);
+    if (speed < s.minSpeed) {
+      stateRef.current = null;
+      frameLoop.cancel();
+      s.onEnd?.();
+      return;
+    }
+    let dx = s.vx * dt;
+    let dy = s.vy * dt;
+    if (s.viewBounds && s.boundary) {
+      const { minX, maxX, minY, maxY } = s.viewBounds;
+      const newX = s.posX + dx;
+      const newY = s.posY + dy;
+      if (s.boundary === "stop") {
+        if (minX !== void 0 && newX < minX) {
+          dx = minX - s.posX;
+          s.vx = 0;
+        } else if (maxX !== void 0 && newX > maxX) {
+          dx = maxX - s.posX;
+          s.vx = 0;
+        }
+        if (minY !== void 0 && newY < minY) {
+          dy = minY - s.posY;
+          s.vy = 0;
+        } else if (maxY !== void 0 && newY > maxY) {
+          dy = maxY - s.posY;
+          s.vy = 0;
+        }
+      } else if (s.boundary === "spring") {
+        if (minX !== void 0 && newX < minX) {
+          dx = minX - s.posX;
+          s.vx = Math.abs(s.vx) * SPRING_DAMPING;
+        } else if (maxX !== void 0 && newX > maxX) {
+          dx = maxX - s.posX;
+          s.vx = -Math.abs(s.vx) * SPRING_DAMPING;
+        }
+        if (minY !== void 0 && newY < minY) {
+          dy = minY - s.posY;
+          s.vy = Math.abs(s.vy) * SPRING_DAMPING;
+        } else if (maxY !== void 0 && newY > maxY) {
+          dy = maxY - s.posY;
+          s.vy = -Math.abs(s.vy) * SPRING_DAMPING;
+        }
+      } else {
+        if (minX !== void 0 && newX < minX) {
+          dx = minX - s.posX;
+          s.vx = Math.abs(s.vx);
+        } else if (maxX !== void 0 && newX > maxX) {
+          dx = maxX - s.posX;
+          s.vx = -Math.abs(s.vx);
+        }
+        if (minY !== void 0 && newY < minY) {
+          dy = minY - s.posY;
+          s.vy = Math.abs(s.vy);
+        } else if (maxY !== void 0 && newY > maxY) {
+          dy = maxY - s.posY;
+          s.vy = -Math.abs(s.vy);
+        }
+      }
+      s.posX += dx;
+      s.posY += dy;
+    }
+    s.onTick(dx, dy);
+    frameLoop.request();
+  }, [frameLoop]);
+  const start = useCallback((config) => {
+    cancel();
+    const { velocity, friction = 0.92, minSpeed = 0.01, viewBounds, boundary, initialPosition, onTick, onEnd } = config;
+    const speed = Math.sqrt(velocity.vx ** 2 + velocity.vy ** 2);
+    if (speed < minSpeed) {
+      onEnd?.();
+      return;
+    }
+    stateRef.current = {
+      vx: velocity.vx,
+      vy: velocity.vy,
+      friction,
+      minSpeed,
+      lastTime: null,
+      posX: initialPosition?.x ?? 0,
+      posY: initialPosition?.y ?? 0,
+      viewBounds,
+      boundary,
+      onTick,
+      onEnd
+    };
+    frameLoop.request();
+  }, [cancel, frameLoop]);
+  useEffect(() => () => {
+    cancel();
+  }, [cancel]);
+  return { start, cancel };
+}
 function dist(a, b) {
   return Math.hypot(b.x - a.x, b.y - a.y);
 }
@@ -20485,7 +21103,9 @@ function useRotateTool(adapter, options) {
     [overlay]
   );
 }
-function useHandTool(_opts = {}) {
+function useHandTool(opts = {}) {
+  const optsRef = useRef(opts);
+  optsRef.current = opts;
   return useMemo(
     () => Object.assign(defineViewportTool({
       id: "hand",
@@ -20503,7 +21123,16 @@ function useHandTool(_opts = {}) {
       // viewportDragPanAction, which also owns the grabbing cursor
       // (`Action.activeCursor`) the tool used to declare as an `engaged`
       // phase entry.
-      bindings: [{ spec: { kind: "drag" }, actionId: "viewport.dragPan" }]
+      bindings: [{
+        spec: { kind: "drag" },
+        actionId: "viewport.dragPan",
+        opts: {
+          params: () => ({
+            axis: optsRef.current.axis ?? "both",
+            inertia: optsRef.current.inertia
+          })
+        }
+      }]
     }),
     []
   );
@@ -21764,6 +22393,20 @@ function projectBounds(b, view) {
   const [sx, sy] = worldToScreen(b.x, b.y, t);
   return { ...b, x: sx, y: sy, width: b.width * view.scale.x, height: b.height * view.scale.y };
 }
+function leavesOf(id, getChildren, isContainer) {
+  if (!isContainer(id)) return [id];
+  const out = [];
+  const visit = (nid) => {
+    const kids = getChildren(nid);
+    if (kids.length === 0) {
+      if (!isContainer(nid)) out.push(nid);
+      return;
+    }
+    for (const k of kids) visit(k);
+  };
+  visit(id);
+  return out;
+}
 function makeContainerAwareBoundsResolver(getPose, getBounds, getChildren, isContainer) {
   if (getChildren === void 0 || isContainer === void 0) {
     return (id) => {
@@ -21771,26 +22414,12 @@ function makeContainerAwareBoundsResolver(getPose, getBounds, getChildren, isCon
       return p === null ? null : getBounds(p);
     };
   }
-  const leavesOf = (id) => {
-    if (!isContainer(id)) return [id];
-    const out = [];
-    const visit = (nid) => {
-      const kids = getChildren(nid);
-      if (kids.length === 0) {
-        if (!isContainer(nid)) out.push(nid);
-        return;
-      }
-      for (const k of kids) visit(k);
-    };
-    visit(id);
-    return out;
-  };
   return (id) => {
     if (!isContainer(id)) {
       const p = getPose(id);
       return p === null ? null : getBounds(p);
     }
-    const leaves = leavesOf(id);
+    const leaves = leavesOf(id, getChildren, isContainer);
     if (leaves.length === 0) return null;
     const leafBounds = [];
     for (const leafId of leaves) {
@@ -22923,7 +23552,7 @@ function CanvasInner(props, ref) {
       return {
         worldX,
         worldY,
-        modifiers: m ? { alt: m.alt, shift: m.shift, meta: m.meta, ctrl: m.ctrl, space: false } : { alt: false, shift: false, meta: false, ctrl: false, space: false },
+        modifiers: m ? { alt: m.alt, shift: m.shift, meta: m.meta, ctrl: m.ctrl } : { alt: false, shift: false, meta: false, ctrl: false },
         selection: effectiveSelectionRefForCtx.current,
         adapter: effectiveAdapterRefForCtx.current,
         applyOps: (ops, label) => {
@@ -26567,10 +27196,10 @@ function boundsOf(coords) {
   }
   return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
 }
-function useViewDepSource(currentViewRef, onViewChange, recenter, hostSize, animation) {
-  const wiring = useRef({ currentViewRef, onViewChange, recenter, hostSize, animation });
-  wiring.current = { currentViewRef, onViewChange, recenter, hostSize, animation };
-  const shape = `${recenter ? "r" : ""}${hostSize ? "h" : ""}${animation ? "a" : ""}`;
+function useViewDepSource(currentViewRef, onViewChange, recenter, hostSize, animation, decay) {
+  const wiring = useRef({ currentViewRef, onViewChange, recenter, hostSize, animation, decay });
+  wiring.current = { currentViewRef, onViewChange, recenter, hostSize, animation, decay };
+  const shape = `${recenter ? "r" : ""}${hostSize ? "h" : ""}${animation ? "a" : ""}${decay ? "d" : ""}`;
   const shapeRef = useRef(null);
   const viewApiRef = useRef(null);
   if (viewApiRef.current === null || shapeRef.current !== shape) {
@@ -26589,6 +27218,10 @@ function useViewDepSource(currentViewRef, onViewChange, recenter, hostSize, anim
         animate: (to, opts) => wiring.current.animation.animate(to, opts),
         stopAnimation: () => wiring.current.animation.stop(),
         animationTarget: () => wiring.current.animation.target()
+      } : {},
+      ...decay ? {
+        decay: (config) => wiring.current.decay.start(config),
+        stopDecay: () => wiring.current.decay.cancel()
       } : {}
     };
   }
@@ -27321,7 +27954,6 @@ function useActionsPropResolver(actions) {
     }
     if (!prop) return;
     const unregisters = [];
-    const restores = [];
     const warnedIds = /* @__PURE__ */ new Set();
     for (const [slotId, entry] of Object.entries(prop)) {
       if (entry === null) {
@@ -27349,60 +27981,30 @@ function useActionsPropResolver(actions) {
       }
       const { id: _drop, ...rest } = entry;
       const merged = { ...existing, ...rest };
-      restores.push(() => {
-        reg.register(existing);
-      });
       unregisters.push(reg.register(merged));
     }
     return () => {
       for (const u of unregisters) u();
-      for (const r of restores) r();
     };
   }, [reg, actions]);
 }
-var viewportWheelPanAction = {
-  id: "viewport.wheelPan",
-  label: "Pan (wheel)",
-  group: "viewport",
-  /**
-   * Plain wheel → pan; Shift+wheel → horizontal pan (axis swap).
-   * Cmd+wheel is claimed by `viewportZoomAction`. The matcher's strict
-   * modifier check keeps the bindings exclusive: omitting `mods` forbids
-   * any modifier, and `mods: { shift: true }` forbids the others.
-   */
-  defaultBinding: [
-    { spec: { kind: "wheel" }, opts: {} },
-    { spec: { kind: "wheel", mods: { shift: true } }, opts: { params: { swapAxis: true } } }
-  ],
-  requires: ["view"],
-  invoker: {
-    timing: "immediate",
-    run(deps, params) {
-      const view = deps.view;
-      if (!view) return;
-      const deltaX = params?.deltaX ?? 0;
-      const deltaY = params?.deltaY ?? 0;
-      const current = view.get();
-      const swap = params?.swapAxis === true;
-      const dx = swap ? (deltaX !== 0 ? deltaX : deltaY) / current.scale.x : deltaX / current.scale.x;
-      const dy = swap ? 0 : deltaY / current.scale.y;
-      view.set({ ...current, x: current.x + dx, y: current.y + dy });
-    }
-  },
-  enabled: () => true
-};
 function useViewportActions(args) {
   const { pan, zoom, pinchZoom } = args;
   const reg = useActionsRegistry();
   const regRef = useRef(reg);
   regRef.current = reg;
+  const panKey = typeof pan === "object" ? JSON.stringify(pan) : String(pan);
   const zoomKey = typeof zoom === "object" ? JSON.stringify(zoom) : String(zoom);
   const pinchKey = typeof pinchZoom === "object" ? JSON.stringify(pinchZoom) : String(pinchZoom);
   useEffect(() => {
     const r = regRef.current;
     if (!r) return;
     const unregisters = [];
-    if (pan) unregisters.push(r.register(viewportWheelPanAction));
+    if (pan) {
+      unregisters.push(
+        r.register(makeViewportWheelPanAction(typeof pan === "object" ? pan : {}))
+      );
+    }
     if (zoom) {
       const zoomAction = typeof zoom === "object" ? makeViewportZoomAction(zoom) : makeViewportZoomAction();
       unregisters.push(r.register(zoomAction));
@@ -27417,7 +28019,7 @@ function useViewportActions(args) {
     return () => {
       for (const u of unregisters) u();
     };
-  }, [pan, zoomKey, pinchKey]);
+  }, [panKey, zoomKey, pinchKey]);
 }
 function createNodeRouting() {
   const entries = [];
@@ -27841,13 +28443,13 @@ function SceneCanvasInner(props, ref) {
   const viewportRegistered = !!viewport;
   const inertiaEnabled = !!viewport?.inertia;
   const inertiaObj = typeof viewport?.inertia === "object" ? viewport.inertia : void 0;
-  const handToolInertia = inertiaEnabled && inertiaObj ? {
-    friction: inertiaObj.friction,
-    minSpeed: inertiaObj.minSpeed,
-    boundary: inertiaObj.boundary,
-    bounds: inertiaObj.bounds
+  const handToolInertia = inertiaEnabled ? {
+    friction: inertiaObj?.friction,
+    minSpeed: inertiaObj?.minSpeed,
+    boundary: inertiaObj?.boundary,
+    bounds: inertiaObj?.bounds
   } : void 0;
-  const handTool = useHandTool(handToolInertia ? {} : {});
+  const handTool = useHandTool(handToolInertia ? { inertia: handToolInertia } : {});
   const viewportAmbient = [];
   const baseRequestedTools = defaultTools ?? (toolBundle ? BUNDLE_TOOLS[toolBundle] : null) ?? (viewportRegistered ? ["select", "rotate", "hand"] : ["select", "rotate"]);
   const KNOWN_BUILTIN_IDS = /* @__PURE__ */ new Set([
@@ -28300,7 +28902,7 @@ function SceneCanvasInner(props, ref) {
         dispatcher,
         getActionRef,
         pickEvery: internalPickEvery,
-        viewportPanEnabled: viewport?.pan !== false,
+        viewportPanEnabled: viewport?.pan ?? true,
         viewportZoom: resolvedViewportZoom,
         viewportPinchZoom: viewport?.pinchZoom ?? true,
         viewportRecenter: viewport?.recenter,
@@ -28591,6 +29193,7 @@ function StandardActionsRegistrar({
       getActionRef.current = null;
     };
   }, [registry22, getActionRef]);
+  const decayLoop = useDecayLoop();
   const view = useViewDepSource(
     currentViewRef,
     onViewChange,
@@ -28599,7 +29202,8 @@ function StandardActionsRegistrar({
       const el = canvasRef.current;
       return el ? { width: el.clientWidth, height: el.clientHeight } : null;
     },
-    viewAnimation
+    viewAnimation,
+    decayLoop
   );
   const sceneAsHistory = scene;
   useStandardActions({ selection, scene, view, history: sceneAsHistory });
@@ -29032,8 +29636,7 @@ function MinimapCanvasInner(props) {
   }, [mainView, mainViewDims, indicatorStyle]);
   const extraCommands = useMemo(() => [indicatorCmd], [indicatorCmd]);
   const localCanvasRef = useRef(null);
-  const dragActiveRef = useRef(false);
-  const capturedPointerIdRef = useRef(null);
+  const sessionRef = useRef(null);
   const mainViewRef = useRef(mainView);
   const mainViewDimsRef = useRef(mainViewDims);
   const onMainViewChangeRef = useRef(onMainViewChange);
@@ -29062,36 +29665,18 @@ function MinimapCanvasInner(props) {
   }, []);
   const handlePointerDown = useCallback((ev) => {
     const canvas = localCanvasRef.current;
-    if (!canvas) return;
+    if (!canvas || sessionRef.current) return;
     if (ev.pointerType === "mouse" && ev.button !== 0) return;
-    try {
-      canvas.setPointerCapture(ev.pointerId);
-    } catch {
-    }
-    dragActiveRef.current = true;
-    capturedPointerIdRef.current = ev.pointerId;
-    recenterFromPointer(ev);
-  }, [recenterFromPointer]);
-  const handlePointerMove = useCallback((ev) => {
-    if (!dragActiveRef.current) return;
-    if (capturedPointerIdRef.current !== null && ev.pointerId !== capturedPointerIdRef.current) {
-      return;
-    }
+    const done = () => {
+      sessionRef.current = null;
+    };
+    sessionRef.current = openPointerSession(canvas, ev, {
+      onMove: recenterFromPointer,
+      onEnd: done,
+      onCancel: done
+    });
     recenterFromPointer(ev);
   }, [recenterFromPointer]);
-  const releaseCapture = useCallback((ev) => {
-    const canvas = localCanvasRef.current;
-    if (canvas) {
-      try {
-        if (canvas.hasPointerCapture?.(ev.pointerId)) {
-          canvas.releasePointerCapture(ev.pointerId);
-        }
-      } catch {
-      }
-    }
-    dragActiveRef.current = false;
-    capturedPointerIdRef.current = null;
-  }, []);
   const setCanvasRef = useCallback((el) => {
     localCanvasRef.current = el;
     if (typeof canvasRef === "function") {
@@ -29104,16 +29689,11 @@ function MinimapCanvasInner(props) {
     const canvas = localCanvasRef.current;
     if (!canvas) return;
     canvas.addEventListener("pointerdown", handlePointerDown);
-    canvas.addEventListener("pointermove", handlePointerMove);
-    canvas.addEventListener("pointerup", releaseCapture);
-    canvas.addEventListener("pointercancel", releaseCapture);
     return () => {
       canvas.removeEventListener("pointerdown", handlePointerDown);
-      canvas.removeEventListener("pointermove", handlePointerMove);
-      canvas.removeEventListener("pointerup", releaseCapture);
-      canvas.removeEventListener("pointercancel", releaseCapture);
+      sessionRef.current?.cancel();
     };
-  }, [handlePointerDown, handlePointerMove, releaseCapture]);
+  }, [handlePointerDown]);
   return /* @__PURE__ */ jsx(
     SceneViewCanvas,
     {
@@ -29385,6 +29965,6 @@ function oklchToOklab(L, C, h) {
   return [L, C * Math.cos(h), C * Math.sin(h)];
 }
 
-export { ArrowIcon, EllipseIcon, FALLBACK_FIT_VIEW, LineIcon, MinimapCanvas, PATH_C, PATH_L, PATH_M, PATH_Q, PATH_Z, PathBuilder, PencilIcon, RectIcon, SCRIPT_METRICS, SceneCanvas, SceneViewCanvas, SelectIcon, TextIcon, UnknownIcon, WeaselProvider, asNodeId, boundsOfPath, buildSceneViewCommands, computeFitView, computeIndicatorCommand, createScene, eligibleContribution, ellipsePath, evaluateEnabled, getMarker, getPaintKind, isBuiltinToolPref, linePath, markerDrawCommands, oklabToSrgbU8, oklchToOklab, rectPath, renderSceneToCanvas, renderSceneToPixels, resolveStrokeWidth, rgbaToHex, sceneFromJSON, textCommand, tileGeometry, useActionsRegistry, useActiveToolContext, useOptionalDepRegistry, useVisibleRaf };
-//# sourceMappingURL=chunk-7VW3S44V.js.map
-//# sourceMappingURL=chunk-7VW3S44V.js.map
+export { ArrowIcon, EllipseIcon, FALLBACK_FIT_VIEW, LineIcon, MinimapCanvas, PATH_C, PATH_L, PATH_M, PATH_Q, PATH_Z, PathBuilder, PencilIcon, RectIcon, SCRIPT_METRICS, SceneCanvas, SceneViewCanvas, SelectIcon, TextIcon, UnknownIcon, WeaselProvider, asNodeId, boundsOfPath, buildSceneViewCommands, computeFitView, computeIndicatorCommand, createScene, eligibleContribution, ellipsePath, evaluateEnabled, getMarker, getPaintKind, isBuiltinToolPref, linePath, markerDrawCommands, oklabToSrgbU8, oklchToOklab, openPointerSession, rectPath, renderSceneToCanvas, renderSceneToPixels, resolveStrokeWidth, rgbaToHex, sceneFromJSON, textCommand, tileGeometry, useActionsRegistry, useActiveToolContext, useOptionalDepRegistry, useVisibleRaf };
+//# sourceMappingURL=chunk-DG2IFMLA.js.map
+//# sourceMappingURL=chunk-DG2IFMLA.js.map