gpucanvas 0.4.4 → 0.4.5

package/dist/{chunk-IJ3R6X75.js → chunk-IIRGNX76.js}

@@ -219,12 +219,13 @@ var sameRect = (a, b) => !!a && !!b && Math.abs(a.x - b.x) < 0.5 && Math.abs(a.y
 // src/types.ts
 var DEFAULT_CAMERA = { x: 0, y: 0, zoom: 1 };
 var DEFAULT_SELECTION_COLOR = "#4f8cff";
+var SURFACE_Z = { marks: "1", marquee: "1", overlay: "2" };
 var SELECTION_WIDTH = 2;
 var HOVER_WIDTH = 1;
 
 // src/base.ts
 var styleNode = (element) => Object.assign(element.style, { boxSizing: "border-box", contain: "strict", overflow: "hidden" });
-function createBase(host, options, onCamera) {
+function createBase(host, options, onCamera, hooks) {
   const surface = document.createElement("div");
   markSurface(surface);
   Object.assign(surface.style, {
@@ -250,6 +251,22 @@ function createBase(host, options, onCamera) {
   };
   const api = {
     surface,
+    addNode(element, rect) {
+      if (nodes.has(element)) return api.updateNode(element, rect);
+      styleNode(element);
+      nodes.set(element, hooks.add(element, rect));
+    },
+    updateNode(element, rect) {
+      const node = nodes.get(element);
+      if (node) hooks.update(node, rect);
+    },
+    removeNode(element) {
+      const node = nodes.get(element);
+      if (!node) return;
+      hooks.remove(node);
+      nodes.delete(element);
+      element.remove();
+    },
     getNodeRect: (element) => {
       const node = nodes.get(element);
       return node ? { ...node.rect } : null;
@@ -679,7 +696,30 @@ function createDomCanvas(host, options) {
     world.style.setProperty("--gpucanvas-zoom", String(camera.zoom));
     frameMs = performance.now() - start;
   };
-  const base = createBase(host, options, apply);
+  const place = (element, rect) => {
+    element.style.left = `${rect.x}px`;
+    element.style.top = `${rect.y}px`;
+    element.style.width = `${rect.width}px`;
+    element.style.height = `${rect.height}px`;
+  };
+  const base = createBase(host, options, apply, {
+    add(element, rect) {
+      element.style.position = "absolute";
+      place(element, rect);
+      world.append(element);
+      return { element, rect };
+    },
+    update(node, rect) {
+      node.rect = rect;
+      place(node.element, rect);
+    },
+    remove({ element }) {
+      clearEffect(element);
+      selection.delete(element);
+      outlinedNodes.delete(element);
+      element.style.outline = "";
+    }
+  });
   const { surface, nodes } = base;
   surface.style.background = options.background ?? "transparent";
   const world = document.createElement("div");
@@ -779,32 +819,10 @@ function createDomCanvas(host, options) {
       element.animate(keyframes, { duration: period * 1e3, iterations: Infinity })
     );
   };
-  const updateNode = (element, rect) => {
-    nodes.set(element, { element, rect });
-    element.style.left = `${rect.x}px`;
-    element.style.top = `${rect.y}px`;
-    element.style.width = `${rect.width}px`;
-    element.style.height = `${rect.height}px`;
-  };
   apply(base.camera());
   return {
     ...base.api,
     mode: "dom",
-    addNode(element, rect) {
-      styleNode(element);
-      element.style.position = "absolute";
-      updateNode(element, rect);
-      world.append(element);
-    },
-    updateNode,
-    removeNode(element) {
-      clearEffect(element);
-      nodes.delete(element);
-      selection.delete(element);
-      outlinedNodes.delete(element);
-      element.style.outline = "";
-      element.remove();
-    },
     getElementRect: elementRect,
     setSelection(elements) {
       selection = new Set(elements);
@@ -1019,458 +1037,354 @@ var Atlas = class {
   }
 };
 
-// src/capture.ts
-function captureRegion(device, source, region, width, height) {
-  const texture = device.createTexture({
-    size: { width, height },
-    format: "rgba8unorm",
-    usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
-  });
-  try {
-    device.queue.drawElementImageToTexture(
-      {
-        source,
-        sourceX: region.x,
-        sourceY: region.y,
-        sourceWidth: region.width,
-        sourceHeight: region.height
-      },
-      { texture, size: { width, height }, premultipliedAlpha: false }
-    );
-  } catch (error) {
-    texture.destroy();
-    throw error;
-  }
-  return readTexture(device, texture, width, height);
+// src/gpu-node.ts
+var THUMBNAIL_SCALE = 1 / 16;
+var SMALL_NODE_PX = 200;
+var SMALL_REFRESH_MS = 250;
+var smallOnScreen = (node, zoom) => Math.max(node.rect.width, node.rect.height) * zoom < SMALL_NODE_PX;
+var nodeOf = (nodes, target) => {
+  const element = target instanceof Element ? target : target.parentElement;
+  const node = element && nodeOfElement(nodes, element);
+  return node ? nodes.get(node) : void 0;
+};
+var texels = (length, scale) => Math.max(1, Math.round(length * scale));
+var nodeRegion = (node) => ({
+  x: node.pageX,
+  y: node.pageY,
+  width: node.rect.width,
+  height: node.rect.height
+});
+var createGpuNode = (element, rect, at) => ({
+  element,
+  rect,
+  page: at.page,
+  pageX: at.x,
+  pageY: at.y,
+  slot: null,
+  slotScale: 0,
+  thumb: null,
+  thumbStale: false,
+  thumbAt: -Infinity,
+  shown: 0,
+  shownFrame: -1,
+  dirty: true,
+  tiles: [],
+  preview: null,
+  previewRect: null,
+  previewScale: 0,
+  previewTarget: null,
+  previewTargetScale: 0,
+  changedAt: -Infinity,
+  refreshedAt: -Infinity,
+  wholeStale: false,
+  solo: false,
+  targetScale: 0,
+  priority: 0
+});
+function placeNode(node, at) {
+  node.page = at.page;
+  node.pageX = at.x;
+  node.pageY = at.y;
+  node.slot = null;
+  node.thumb = null;
+  node.tiles = [];
+  node.preview = null;
+  node.solo = false;
+  node.dirty = true;
 }
-async function readTexture(device, texture, width, height) {
-  const bytesPerRow = Math.ceil(width * 4 / 256) * 256;
-  const buffer = device.createBuffer({
-    size: bytesPerRow * height,
-    usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
-  });
-  const encoder = device.createCommandEncoder();
-  encoder.copyTextureToBuffer({ texture }, { buffer, bytesPerRow }, { width, height });
-  device.queue.submit([encoder.finish()]);
-  try {
-    await buffer.mapAsync(GPUMapMode.READ);
-    const rows = new Uint8Array(buffer.getMappedRange());
-    const pixels = new Uint8ClampedArray(width * height * 4);
-    for (let y = 0; y < height; y++) {
-      pixels.set(rows.subarray(y * bytesPerRow, y * bytesPerRow + width * 4), y * width * 4);
-    }
-    return new ImageData(pixels, width, height);
-  } finally {
-    buffer.destroy();
-    texture.destroy();
-  }
+function translateNode(node, rect) {
+  const dx = rect.x - node.rect.x;
+  const dy = rect.y - node.rect.y;
+  const shift = (r) => ({ ...r, x: r.x + dx, y: r.y + dy });
+  for (const tile of node.tiles) tile.rect = shift(tile.rect);
+  if (node.previewRect) node.previewRect = shift(node.previewRect);
+  if (node.previewTarget) node.previewTarget = shift(node.previewTarget);
+  node.rect = rect;
 }
-
-// src/composite-shader.ts
-var KIND = { snapshot: 0, placeholder: 1, ring: 2 };
-var prelude = (
-  /* wgsl */
-  `
-struct View {
-  size: vec2f,        // canvas size in CSS pixels
-  origin: vec2f,      // camera position, world units
-  zoom: f32,
-  dpr: f32,
-  atlasSize: f32,
-  time: f32,          // seconds since the canvas started
-  placeholder: vec4f, // premultiplied color for nodes without a snapshot
-  pointer: vec4f,     // pointer and last press in world units; far away when there is none
-  pressTime: f32,     // seconds since the last press
+function setThumb(node, slot, now) {
+  node.thumb = slot;
+  node.thumbStale = false;
+  node.thumbAt = now;
 }
-
-@group(0) @binding(0) var<uniform> view: View;
-@group(0) @binding(1) var atlas: texture_2d_array<f32>;
-@group(0) @binding(2) var atlasSampler: sampler;
-
-struct Instance {
-  @location(0) rect: vec4f, // world x, y, width, height
-  @location(1) uv: vec4f,   // atlas texels x0, y0, x1, y1; for a ring, its premultiplied color
-  @location(2) info: vec4f, // layer, kind (0 snapshot, 1 placeholder, 2 ring), ring width or effect pad
-  @location(3) params: vec4f, // an effect's parameters
+function recordWhole(node, slot, scale, now) {
+  node.slot = slot;
+  node.slotScale = scale;
+  if (scale === THUMBNAIL_SCALE) setThumb(node, slot, now);
+  else if (node.dirty) node.thumbStale = true;
+  if (node.dirty) {
+    node.preview = null;
+    node.refreshedAt = now;
+  }
+  node.dirty = false;
+  node.wholeStale = false;
 }
-
-struct Varyings {
-  @builtin(position) position: vec4f,
-  @location(0) texel: vec2f,
-  @location(1) @interpolate(flat) bounds: vec4f,
-  @location(2) @interpolate(flat) info: vec2f,
-  @location(3) @interpolate(flat) color: vec4f,
-  @location(4) uv: vec2f, // 0 to 1 across the node, past that in an effect's padding
-  @location(5) @interpolate(flat) size: vec2f,
-  @location(6) @interpolate(flat) params: vec4f,
-  @location(7) @interpolate(flat) corner: vec2f, // the node's top left in world units
+function recordPartial(node, now) {
+  if (!node.dirty) return;
+  node.dirty = false;
+  node.wholeStale = true;
+  node.thumbStale = true;
+  node.refreshedAt = now;
 }
+var isCurrentTile = (tile, detailScale) => tile.scale === detailScale && !tile.stale;
+var hasFreshThumb = (atlas, node) => atlas.isValid(node.thumb) && !node.thumbStale;
 
-@vertex
-fn vs(@builtin(vertex_index) vertex: u32, instance: Instance) -> Varyings {
-  let corner = vec2f(f32(vertex & 1u), f32(vertex >> 1u));
-  // A ring's quad reaches past its element by the ring's width, an effect's by its padding.
-  let ring = instance.info.y > ${KIND.ring - 0.5};
-  let grow = select(instance.info.z, instance.info.z / view.zoom, ring);
-  let start = instance.rect.xy - grow;
-  let end = instance.rect.xy + instance.rect.zw + grow;
-  // Snap edges to device pixels so a snapshot drawn at its raster scale stays crisp.
-  let scale = view.zoom * view.dpr;
-  let topLeft = round((start - view.origin) * scale) / view.dpr;
-  let bottomRight = round((end - view.origin) * scale) / view.dpr;
-  let point = mix(topLeft, bottomRight, corner);
-  var out: Varyings;
-  out.position = vec4f(point.x / view.size.x * 2.0 - 1.0, 1.0 - point.y / view.size.y * 2.0, 0.0, 1.0);
-  if (ring) {
-    // World units from the element's top left, and the element's own edges.
-    out.texel = mix(vec2f(-grow), instance.rect.zw + grow, corner);
-    out.bounds = vec4f(0.0, 0.0, instance.rect.zw);
-    out.color = instance.uv;
-  } else {
-    let pad = grow * (instance.uv.zw - instance.uv.xy) / instance.rect.zw;
-    out.texel = mix(instance.uv.xy - pad, instance.uv.zw + pad, corner);
-    out.color = instance.uv;
-    // Half a texel inside the node's rectangle: the outermost sample center that cannot blend
-    // with whatever sits next to it in the atlas.
-    out.bounds = vec4f(instance.uv.xy + 0.5, instance.uv.zw - 0.5);
+// src/gpu-live.ts
+var USE_EVENTS = ["click", "input", "change", "keydown"];
+var USED_MS = 1e3;
+var LINGER_MS = 300;
+var CANVAS_TRANSFORM_HIT_TESTS = typeof HTMLCanvasElement !== "undefined" && "getElementImageDefaultSize" in HTMLCanvasElement.prototype;
+var FAR_AWAY = { x: -1e7, y: -1e7 };
+var Live = class {
+  constructor(o) {
+    this.o = o;
+    const { canvas, surface } = o;
+    surface.addEventListener("pointermove", this.onPointerMove);
+    surface.addEventListener("pointerleave", this.onPointerLeave);
+    surface.addEventListener("pointerdown", this.onPointerDown, true);
+    surface.addEventListener("click", this.onClick);
+    canvas.addEventListener("focusin", this.onFocusIn);
+    canvas.addEventListener("focusout", this.onFocusOut);
+    for (const type of USE_EVENTS) canvas.addEventListener(type, this.onUse, true);
+    canvas.addEventListener("transitionrun", this.onTransitionRun);
   }
-  out.info = instance.info.xy;
-  out.uv = mix(-grow / instance.rect.zw, 1.0 + grow / instance.rect.zw, corner);
-  out.size = instance.rect.zw;
-  out.corner = instance.rect.xy;
-  out.params = instance.params;
-  return out;
-}
-`
-);
-var compositeShader = (
-  /* wgsl */
-  `${prelude}
-@fragment
-fn fs(in: Varyings) -> @location(0) vec4f {
-  // Derivatives first: WGSL only allows them in uniform control flow.
-  let dx = dpdx(in.texel);
-  let dy = dpdy(in.texel);
-  if (in.info.y > ${KIND.ring - 0.5}) {
-    // The ring covers what lies outside the element; the element itself shows through.
-    let outside = max(in.bounds.xy - in.texel, in.texel - in.bounds.zw);
-    return select(vec4f(0.0), in.color, max(outside.x, outside.y) > 0.0);
+  o;
+  /** The node under the pointer. */
+  current = null;
+  /** The pointer over the surface, in surface pixels. */
+  pointer = null;
+  /** Where the last press landed, in world units, and when: effects such as shockwaves use it. */
+  press = FAR_AWAY;
+  pressedAt = -Infinity;
+  positioned = false;
+  lingering = null;
+  lingerTimer = 0;
+  focused = null;
+  /** Readable nodes in view with CSS transitions running, and when the last one ends. */
+  transitioning = /* @__PURE__ */ new Map();
+  usedAt = /* @__PURE__ */ new WeakMap();
+  /**
+   * Touch and pen press without hovering first, so the node under them is not hit-testable yet and
+   * the tap lands on the canvas or its page. The press makes the node live, and a click that did
+   * not reach inside it is handed to the element under the finger.
+   */
+  tapped = false;
+  destroyed = false;
+  /** Whether a held node keeps `page` drawable. */
+  holds(page) {
+    return this.held().some((node) => node?.page === page);
   }
-  if (in.info.y > ${KIND.placeholder - 0.5}) {
-    return view.placeholder;
+  /** Nodes kept drawable and redrawn on every paint: under the pointer, focused, transitioning. */
+  held() {
+    return [this.current, this.lingering, this.focused, ...this.transitioning.keys()];
   }
-  let layer = i32(in.info.x);
-  // Texels covered by this pixel along each screen axis.
-  let footprint = vec2f(length(vec2f(dx.x, dy.x)), length(vec2f(dx.y, dy.y)));
-  let taps = vec2u(clamp(ceil(footprint), vec2f(1.0), vec2f(4.0)));
-  var color = vec4f(0.0);
-  for (var j = 0u; j < taps.y; j++) {
-    for (var i = 0u; i < taps.x; i++) {
-      let offset = (vec2f(f32(i), f32(j)) + 0.5) / vec2f(taps) - 0.5;
-      let texel = clamp(in.texel + offset * footprint, in.bounds.xy, in.bounds.zw);
-      color += textureSampleLevel(atlas, atlasSampler, texel / view.atlasSize, layer, 0.0);
+  /** Moves the hit-test target to `node`: its page is registered and positioned under it. */
+  set(node) {
+    if (node === this.current) return;
+    const { canvas, frameNumber, schedule } = this.o;
+    const previous = this.current;
+    this.current = node;
+    if (node && node === this.lingering) {
+      clearTimeout(this.lingerTimer);
+      this.lingering = null;
+    }
+    if (previous) {
+      previous.element.style.pointerEvents = "none";
+      clearTimeout(this.lingerTimer);
+      const earlier = this.lingering;
+      this.lingering = previous;
+      if (earlier && earlier !== previous) this.letGo(earlier);
+      this.lingerTimer = window.setTimeout(() => {
+        const last = this.lingering;
+        if (!last) return;
+        this.lingering = null;
+        this.letGo(last);
+      }, LINGER_MS);
+      this.unpin(previous.page);
+    }
+    if (!node) return;
+    const { page } = node;
+    page.setDrawable(true, frameNumber());
+    if (!page.registered) {
+      canvas.updateElementGeometry(page.element, {});
+      page.registered = true;
     }
+    this.positioned = false;
+    this.position();
+    schedule();
   }
-  return color / f32(taps.x * taps.y);
-}
-`
-);
-var effectShader = (wgsl) => (
-  /* wgsl */
-  `${prelude}
-struct EffectInput {
-  uv: vec2f,
-  size: vec2f,
-  time: f32,
-  zoom: f32,
-  params: vec4f,
-  pointer: vec2f,
-  press: vec2f,
-  sincePress: f32,
-}
-
-var<private> sourceRect: vec4f;
-var<private> sourceLayer: i32;
-
-fn source(uv: vec2f) -> vec4f {
-  if (any(uv < vec2f(0.0)) || any(uv > vec2f(1.0))) {
-    return vec4f(0.0);
+  /** Makes the topmost node under the last pointer position live. */
+  pick() {
+    if (!this.pointer) return this.set(null);
+    this.set(this.o.nodeAt(screenToWorld(this.o.camera(), this.pointer)));
   }
-  let texel = clamp(mix(sourceRect.xy, sourceRect.zw, uv), sourceRect.xy + 0.5, sourceRect.zw - 0.5);
-  return textureSampleLevel(atlas, atlasSampler, texel / view.atlasSize, sourceLayer, 0.0);
-}
-
-fn hash(p: vec2f) -> f32 {
-  return fract(sin(dot(p, vec2f(127.1, 311.7))) * 43758.5453);
-}
-
-fn noise(p: vec2f) -> f32 {
-  let i = floor(p);
-  let f = fract(p);
-  let u = f * f * (3.0 - 2.0 * f);
-  return mix(
-    mix(hash(i), hash(i + vec2f(1.0, 0.0)), u.x),
-    mix(hash(i + vec2f(0.0, 1.0)), hash(i + vec2f(1.0, 1.0)), u.x),
-    u.y,
-  );
-}
-
-${wgsl}
-
-@fragment
-fn fs(in: Varyings) -> @location(0) vec4f {
-  sourceRect = in.color;
-  sourceLayer = i32(in.info.x);
-  let pointer = (view.pointer.xy - in.corner) / in.size;
-  let press = (view.pointer.zw - in.corner) / in.size;
-  return effect(
-    EffectInput(in.uv, in.size, view.time, view.zoom, in.params, pointer, press, view.pressTime),
-  );
-}
-`
-);
-
-// src/gpu-renderer.ts
-var FLOATS_PER_INSTANCE = 16;
-var CompositeRenderer = class {
-  constructor(device, context, format, atlas, background, placeholder, onEffectReady) {
-    this.device = device;
-    this.context = context;
-    this.format = format;
-    this.atlas = atlas;
-    this.background = background;
-    this.placeholder = placeholder;
-    this.onEffectReady = onEffectReady;
-    this.bindGroupLayout = device.createBindGroupLayout({
-      entries: [
-        { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: {} },
-        {
-          binding: 1,
-          visibility: GPUShaderStage.FRAGMENT,
-          texture: { viewDimension: "2d-array" }
-        },
-        { binding: 2, visibility: GPUShaderStage.FRAGMENT, sampler: {} }
-      ]
-    });
-    this.sampler = device.createSampler({ magFilter: "linear", minFilter: "linear" });
-    this.pipeline = device.createRenderPipeline(
-      this.pipelineDescriptor("gpucanvas composite", compositeShader)
-    );
-    this.uniforms = device.createBuffer({
-      size: this.uniformData.byteLength,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-    });
-    this.bindGroup = device.createBindGroup({
-      layout: this.bindGroupLayout,
-      entries: [
-        { binding: 0, resource: { buffer: this.uniforms } },
-        { binding: 1, resource: atlas.view },
-        { binding: 2, resource: this.sampler }
-      ]
-    });
-    this.instanceBuffer = this.createInstanceBuffer();
-  }
-  device;
-  context;
-  format;
-  atlas;
-  background;
-  placeholder;
-  onEffectReady;
-  instances = new Float32Array(FLOATS_PER_INSTANCE * 4096);
-  count = 0;
-  runs = [];
-  instanceBuffer;
-  uniforms;
-  uniformData = new Float32Array(20);
-  pipeline;
-  bindGroup;
-  bindGroupLayout;
-  sampler;
-  /** Effect pipelines, null while one compiles. Compiling never blocks a frame. */
-  effects = /* @__PURE__ */ new Map();
-  failed = /* @__PURE__ */ new Set();
-  pipelineDescriptor(label, code) {
-    const module = this.device.createShaderModule({ label, code });
-    return {
-      label,
-      layout: this.device.createPipelineLayout({ bindGroupLayouts: [this.bindGroupLayout] }),
-      vertex: {
-        module,
-        entryPoint: "vs",
-        buffers: [
-          {
-            arrayStride: FLOATS_PER_INSTANCE * 4,
-            stepMode: "instance",
-            attributes: [
-              { shaderLocation: 0, offset: 0, format: "float32x4" },
-              { shaderLocation: 1, offset: 16, format: "float32x4" },
-              { shaderLocation: 2, offset: 32, format: "float32x4" },
-              { shaderLocation: 3, offset: 48, format: "float32x4" }
-            ]
-          }
-        ]
-      },
-      fragment: {
-        module,
-        entryPoint: "fs",
-        targets: [
-          {
-            format: this.format,
-            // Snapshots are requested premultiplied.
-            blend: {
-              color: { srcFactor: "one", dstFactor: "one-minus-src-alpha" },
-              alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha" }
-            }
-          }
-        ]
-      },
-      primitive: { topology: "triangle-strip" }
-    };
-  }
-  /** Whether `effect` can draw this frame. The first ask starts compiling it. */
-  hasEffect(effect) {
-    if (this.effects.has(effect)) return this.effects.get(effect) !== null;
-    this.effects.set(effect, null);
-    this.device.createRenderPipelineAsync(
-      this.pipelineDescriptor(`gpucanvas effect ${effect.name}`, effectShader(effect.wgsl))
-    ).then((pipeline) => {
-      this.effects.set(effect, pipeline);
-      this.onEffectReady();
-    }).catch((error) => {
-      this.failed.add(effect);
-      console.error(`[gpucanvas] effect "${effect.name}" failed`, error);
-    });
-    return false;
-  }
-  /** Whether `effect`'s pipeline failed to compile; it never draws then. */
-  effectFailed(effect) {
-    return this.failed.has(effect);
-  }
-  /** Starts a frame with room for at least `capacity` quads. */
-  begin(capacity) {
-    const floats = capacity * FLOATS_PER_INSTANCE;
-    if (this.instances.length < floats) {
-      this.instances = new Float32Array(Math.max(floats, this.instances.length * 2));
-      this.instanceBuffer.destroy();
-      this.instanceBuffer = this.createInstanceBuffer();
+  /**
+   * Puts the live page's hit area under the live node. Chrome 157 hit tests at the canvas
+   * transform given to `updateElementGeometry`, in CSS pixels. Chrome 156 ignores it and hit
+   * tests at the CSS box, so the page gets the CSS transform `getElementTransform` derives from
+   * the draw matrix, which maps the default-size snapshot (CSS px x dpr) to canvas pixels. A page
+   * promoted this frame has no paint record there yet, so it is positioned on the next frame.
+   */
+  position() {
+    const live = this.current;
+    if (!live || this.positioned) return;
+    const { canvas } = this.o;
+    const camera = this.o.camera();
+    const { zoom } = camera;
+    const x = (live.rect.x - camera.x - live.pageX) * zoom;
+    const y = (live.rect.y - camera.y - live.pageY) * zoom;
+    try {
+      if (CANVAS_TRANSFORM_HIT_TESTS) {
+        canvas.updateElementGeometry(live.page.element, {
+          canvasTransform: new DOMMatrix([zoom, 0, 0, zoom, x, y])
+        });
+      } else {
+        const dpr = this.o.canvasDpr();
+        const drawn = new DOMMatrix([zoom, 0, 0, zoom, x * dpr, y * dpr]);
+        live.page.element.style.transform = canvas.getElementTransform(live.page.element, drawn).toString();
+      }
+      live.element.style.pointerEvents = "auto";
+      this.positioned = true;
+    } catch {
+      this.o.schedule();
     }
-    this.count = 0;
-    this.runs.length = 0;
   }
-  /** Room for the next quad, in the run of `effect`; returns its first float. */
-  next(effect) {
-    const last = this.runs.at(-1);
-    if (last && last.effect === effect) last.count++;
-    else this.runs.push({ effect, start: this.count, count: 1 });
-    return this.count++ * FLOATS_PER_INSTANCE;
+  /** Puts the hit area back under `node` after it moved, when it is the live node. */
+  moved(node) {
+    if (node !== this.current) return;
+    this.positioned = false;
+    this.position();
   }
-  writeRect(offset, rect) {
-    const data = this.instances;
-    data[offset] = rect.x;
-    data[offset + 1] = rect.y;
-    data[offset + 2] = rect.width;
-    data[offset + 3] = rect.height;
+  /** Releases a page from hit testing once nothing pins it; it parks after its next raster. */
+  unpin(page) {
+    if (this.o.isPinned(page)) return;
+    if (page.registered) this.o.canvas.clearElementGeometry(page.element);
+    page.registered = false;
+    page.element.style.transform = "";
+    this.o.schedule();
   }
-  writeSlot(offset, slot) {
-    const data = this.instances;
-    this.atlas.touch(slot.layer);
-    data[offset + 4] = slot.x;
-    data[offset + 5] = slot.y;
-    data[offset + 6] = slot.x + slot.width;
-    data[offset + 7] = slot.y + slot.height;
-    data[offset + 8] = slot.layer;
-    data[offset + 9] = KIND.snapshot;
+  /** Stops holding a removed node. */
+  forget(node) {
+    if (this.current === node) this.set(null);
+    if (this.lingering === node) this.lingering = null;
+    if (this.focused === node) this.focused = null;
+    this.transitioning.delete(node);
   }
-  /** `rect` showing the snapshot in `slot`, or the placeholder color while there is none. */
-  quad(rect, slot) {
-    const offset = this.next(null);
-    this.writeRect(offset, rect);
-    if (slot) this.writeSlot(offset, slot);
-    else this.instances[offset + 9] = KIND.placeholder;
-    this.instances[offset + 10] = 0;
+  destroy() {
+    const { canvas, surface } = this.o;
+    this.destroyed = true;
+    clearTimeout(this.lingerTimer);
+    surface.removeEventListener("pointermove", this.onPointerMove);
+    surface.removeEventListener("pointerleave", this.onPointerLeave);
+    surface.removeEventListener("pointerdown", this.onPointerDown, true);
+    surface.removeEventListener("click", this.onClick);
+    canvas.removeEventListener("focusin", this.onFocusIn);
+    canvas.removeEventListener("focusout", this.onFocusOut);
+    canvas.removeEventListener("transitionrun", this.onTransitionRun);
+    for (const type of USE_EVENTS) canvas.removeEventListener(type, this.onUse, true);
   }
-  /** `rect` drawn through `effect` from the snapshot in `slot`, reaching `pad` past its edges. */
-  effectQuad(rect, slot, effect, pad, params) {
-    const offset = this.next(effect);
-    this.writeRect(offset, rect);
-    this.writeSlot(offset, slot);
-    this.instances[offset + 10] = pad;
-    this.instances.set(params, offset + 12);
+  /** A node no longer held: redrawn once as it rests, its page released. */
+  letGo(node) {
+    node.dirty = true;
+    this.unpin(node.page);
   }
-  /** An outline `width` CSS pixels wide just outside `rect`, in a premultiplied color. */
-  ring(rect, color, width) {
-    const offset = this.next(null);
-    this.writeRect(offset, rect);
-    this.instances.set(color, offset + 4);
-    this.instances[offset + 9] = KIND.ring;
-    this.instances[offset + 10] = width;
+  nodeOf(target) {
+    return nodeOf(this.o.nodes, target);
   }
-  /** Draws the quads listed since `begin`. */
-  draw(camera, cssWidth, cssHeight, dpr, effects) {
-    const { device, count, runs } = this;
-    this.uniformData.set([
-      cssWidth,
-      cssHeight,
-      camera.x,
-      camera.y,
-      camera.zoom,
-      dpr,
-      this.atlas.size,
-      effects.time,
-      ...this.placeholder,
-      effects.pointer.x,
-      effects.pointer.y,
-      effects.press.x,
-      effects.press.y,
-      effects.sincePress
-    ]);
-    device.queue.writeBuffer(this.uniforms, 0, this.uniformData);
-    if (count > 0) {
-      device.queue.writeBuffer(
-        this.instanceBuffer,
-        0,
-        this.instances,
-        0,
-        count * FLOATS_PER_INSTANCE
-      );
-    }
-    const [r, g, b] = this.background;
-    const encoder = device.createCommandEncoder();
-    const pass = encoder.beginRenderPass({
-      colorAttachments: [
-        {
-          view: this.context.getCurrentTexture().createView(),
-          clearValue: { r, g, b, a: 1 },
-          loadOp: "clear",
-          storeOp: "store"
-        }
-      ]
-    });
-    if (count > 0) {
-      pass.setBindGroup(0, this.bindGroup);
-      pass.setVertexBuffer(0, this.instanceBuffer);
-      let current = null;
-      for (const run of runs) {
-        const pipeline = run.effect && this.effects.get(run.effect) || this.pipeline;
-        if (pipeline !== current) pass.setPipeline(current = pipeline);
-        pass.draw(4, run.count, 0, run.start);
-      }
+  onPointerMove = (event) => {
+    this.pointer = pointIn(this.o.canvas, event);
+    if (event.buttons === 0) this.pick();
+  };
+  onPointerLeave = () => {
+    this.pointer = null;
+    this.set(null);
+  };
+  onPointerDown = (event) => {
+    const at = pointIn(this.o.canvas, event);
+    this.press = screenToWorld(this.o.camera(), at);
+    this.pressedAt = performance.now();
+    if (event.pointerType !== "mouse") {
+      this.pointer = at;
+      this.pick();
+      this.tapped = true;
     }
-    pass.end();
-    device.queue.submit([encoder.finish()]);
-  }
-  destroy() {
-    this.instanceBuffer.destroy();
-    this.uniforms.destroy();
-  }
-  createInstanceBuffer() {
-    return this.device.createBuffer({
-      label: "gpucanvas instances",
-      size: this.instances.byteLength,
-      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
-    });
-  }
+    this.o.onPress();
+  };
+  onClick = (event) => {
+    if (!this.tapped) return;
+    this.tapped = false;
+    const point = screenToWorld(this.o.camera(), pointIn(this.o.canvas, event));
+    const top = this.o.nodeAt(point);
+    if (!top || top.element.contains(event.target)) return;
+    let target = elementInNode(top.element, top.rect, point);
+    while (target && !(target instanceof HTMLElement)) target = target.parentElement;
+    if (!(target instanceof HTMLElement)) return;
+    target.focus({ preventScroll: true });
+    target.dispatchEvent(
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        view: window,
+        clientX: event.clientX,
+        clientY: event.clientY
+      })
+    );
+  };
+  onFocusIn = (event) => {
+    const node = this.nodeOf(event.target) ?? null;
+    if (node === this.focused) return;
+    const previous = this.focused;
+    this.focused = node;
+    if (previous) this.letGo(previous);
+    if (node) {
+      node.page.setDrawable(true, this.o.frameNumber());
+      node.dirty = true;
+      this.o.schedule();
+    }
+  };
+  onFocusOut = (event) => {
+    if (event.relatedTarget && this.o.canvas.contains(event.relatedTarget)) return;
+    const previous = this.focused;
+    this.focused = null;
+    if (previous) this.letGo(previous);
+  };
+  // A transition paints without touching the DOM, so a click (from a person or from script)
+  // would leave a half-finished frame. A readable node in view that was just used keeps its page
+  // pinned and redrawn on every paint until its transitions are over. Content that animates on
+  // its own, like a looping indicator, keeps the cheaper refresh on mutations: pinning it would
+  // repaint its whole page every frame. A deadline ends the pin, transitions in parked pages
+  // never fire transitionend.
+  onUse = (event) => {
+    const node = this.nodeOf(event.target);
+    if (node) this.usedAt.set(node, performance.now());
+  };
+  onTransitionRun = (event) => {
+    const node = this.nodeOf(event.target);
+    const now = performance.now();
+    if (!node || now - (this.usedAt.get(node) ?? -Infinity) > USED_MS) return;
+    if (!intersects(node.rect, this.o.view())) return;
+    if (smallOnScreen(node, this.o.camera().zoom)) return;
+    const ms = transitionMs(event.target) + 32;
+    const end = now + ms;
+    if ((this.transitioning.get(node) ?? 0) >= end) return;
+    this.transitioning.set(node, end);
+    node.dirty = true;
+    this.o.schedule();
+    setTimeout(() => {
+      if (this.destroyed || this.transitioning.get(node) !== end) return;
+      this.transitioning.delete(node);
+      this.letGo(node);
+      this.o.schedule();
+    }, ms);
+  };
+};
+var transitionMs = (element) => {
+  const style = getComputedStyle(element);
+  const seconds = (list) => list.split(",").map((value) => parseFloat(value) || 0);
+  const durations = seconds(style.transitionDuration);
+  const delays = seconds(style.transitionDelay);
+  const longest = Math.max(...durations.map((d, i) => d + (delays[i % delays.length] ?? 0)));
+  return Math.min(1e3, longest * 1e3);
 };
 
 // src/page.ts
@@ -1485,6 +1399,8 @@ var Page = class {
   promotedFrame = -1;
   /** Registered for hit testing with `updateElementGeometry`. */
   registered = false;
+  /** The atlas slot of the page's last whole snapshot, reused when it is drawn again that size. */
+  wholeSlot = null;
   shelves;
   constructor(width, height) {
     this.width = width;
@@ -1527,228 +1443,172 @@ var Page = class {
   }
 };
 
-// src/gpu-backend.ts
+// src/gpu-pages.ts
+var Pages = class {
+  constructor(canvas, pageSize) {
+    this.canvas = canvas;
+    this.pageSize = pageSize;
+  }
+  canvas;
+  pageSize;
+  members = /* @__PURE__ */ new Map();
+  byElement = /* @__PURE__ */ new Map();
+  open = null;
+  get size() {
+    return this.members.size;
+  }
+  all() {
+    return this.members.keys();
+  }
+  has(page) {
+    return this.members.has(page);
+  }
+  nodesOf(page) {
+    return this.members.get(page);
+  }
+  /** The page whose element is `element`. */
+  pageOf(element) {
+    return this.byElement.get(element);
+  }
+  /** Counts a node, already placed on its page, as one of the page's nodes. */
+  join(node) {
+    this.members.get(node.page).add(node);
+  }
+  release(node) {
+    const members = this.members.get(node.page);
+    members.delete(node);
+    if (members.size === 0 && node.page !== this.open) this.drop(node.page);
+  }
+  /**
+   * Moves a node onto a page of its own and returns the page it left. Chrome rasterizes a
+   * snapshot's whole source element at the requested scale before cropping, so zoomed in, a crop
+   * from a shared page pays for every node on it: about 100 ms at 16x for two dozen app screens,
+   * under 10 ms for one. `moveBefore` keeps focus, running transitions and other DOM state across
+   * the move.
+   */
+  lift(node) {
+    const previous = node.page;
+    const page = this.newPage(Math.ceil(node.rect.width), Math.ceil(node.rect.height));
+    page.place(node.rect.width, node.rect.height);
+    const target = page.element;
+    if (target.moveBefore) target.moveBefore(node.element, null);
+    else target.append(node.element);
+    node.element.style.left = "0px";
+    node.element.style.top = "0px";
+    this.release(node);
+    node.page = page;
+    node.pageX = 0;
+    node.pageY = 0;
+    node.solo = true;
+    this.join(node);
+    return previous;
+  }
+  /** Lays out `element` on the open page, or a new one when it is full or too small. */
+  place(element, rect) {
+    const { pageSize } = this;
+    let slot = this.open?.place(rect.width, rect.height) ?? null;
+    if (!slot) {
+      const page = this.newPage(
+        Math.max(pageSize, Math.ceil(rect.width)),
+        Math.max(pageSize, Math.ceil(rect.height))
+      );
+      if (page.width === pageSize && page.height === pageSize) this.open = page;
+      slot = page.place(rect.width, rect.height);
+    }
+    Object.assign(element.style, {
+      position: "absolute",
+      left: `${slot.x}px`,
+      top: `${slot.y}px`,
+      width: `${rect.width}px`,
+      height: `${rect.height}px`
+    });
+    slot.page.element.append(element);
+    return slot;
+  }
+  /**
+   * Parks drawable pages that nothing in this frame's plan needs: a page promoted for a camera
+   * that has moved on would otherwise be painted by Chrome every frame.
+   */
+  parkIdle(plans, frameNumber, isPinned) {
+    for (const page of this.members.keys()) {
+      if (page.drawable && !plans.has(page) && page.promotedFrame < frameNumber && !isPinned(page))
+        page.setDrawable(false, frameNumber);
+    }
+  }
+  newPage(width, height) {
+    const page = new Page(width, height);
+    this.members.set(page, /* @__PURE__ */ new Set());
+    this.byElement.set(page.element, page);
+    this.canvas.append(page.element);
+    return page;
+  }
+  drop(page) {
+    this.members.delete(page);
+    this.byElement.delete(page.element);
+    page.element.remove();
+  }
+};
+
+// src/gpu-plan.ts
 var MIN_RASTER_SCALE = 1 / 64;
 var MAX_RASTER_SCALE = 2;
 var MAX_DETAIL_SCALE = 64;
 var TILE_PIXELS = 512;
 var CONTENT_SETTLE_MS = 150;
-var SMALL_NODE_PX = 200;
-var SMALL_REFRESH_MS = 250;
-var SETTLE_MS = 120;
-var USE_EVENTS = ["click", "input", "change", "keydown"];
-var USED_MS = 1e3;
-var LINGER_MS = 300;
 var MAX_OVERSAMPLING = 4;
-var DEFAULT_PAGE_SIZE = 2048;
-var THUMBNAIL_SCALE = 1 / 16;
-var THUMBNAIL_REFRESH_MS = 1e3;
-var MAX_PROMOTIONS_PER_FRAME = 8;
-var SLOW_FRAME_MS = 22;
-var FAST_FRAME_MS = 12;
-var MAX_CAPTURE_TRIES = 20;
 var MISSING = 0;
 var DIRTY = 1;
 var BLURRY = 2;
 var OVERSAMPLED = 3;
-var CANVAS_TRANSFORM_HIT_TESTS = typeof HTMLCanvasElement !== "undefined" && "getElementImageDefaultSize" in HTMLCanvasElement.prototype;
-function supportsGpuCanvas() {
-  return typeof navigator !== "undefined" && "gpu" in navigator && typeof HTMLCanvasElement !== "undefined" && "requestPaint" in HTMLCanvasElement.prototype && "getElementTransform" in HTMLCanvasElement.prototype && typeof GPUQueue !== "undefined" && "drawElementImageToTexture" in GPUQueue.prototype;
-}
 function rasterScaleFor(deviceScale) {
   const scale = 2 ** Math.ceil(Math.log2(deviceScale) - 0.14);
   return Math.min(MAX_DETAIL_SCALE, Math.max(MIN_RASTER_SCALE, scale));
 }
-function cssColorToRgba(color) {
-  const context = document.createElement("canvas").getContext("2d");
-  context.fillStyle = color;
-  context.fillRect(0, 0, 1, 1);
-  const [r, g, b, a] = context.getImageData(0, 0, 1, 1).data;
-  return [r / 255, g / 255, b / 255, a / 255];
-}
-var premultiplied = ([r, g, b, a]) => [r * a, g * a, b * a, a];
 var distanceToCenter = (rect, view) => {
   const a = center(rect);
   const b = center(view);
   return Math.hypot(a.x - b.x, a.y - b.y);
 };
-async function createGpuCanvas(host, options) {
-  const adapter = await navigator.gpu.requestAdapter({ powerPreference: "high-performance" });
-  if (!adapter) throw new Error("gpucanvas: no WebGPU adapter");
-  const device = await adapter.requestDevice();
-  const canvas = document.createElement("canvas");
-  canvas.setAttribute("content", "drawable");
-  markSurface(canvas);
-  Object.assign(canvas.style, { display: "block", width: "100%", height: "100%" });
-  const context = canvas.getContext("webgpu");
-  const format = navigator.gpu.getPreferredCanvasFormat();
-  try {
-    if (!context) throw new Error("gpucanvas: no WebGPU canvas context");
-    context.configure({ device, format, alphaMode: "opaque" });
-  } catch (error) {
-    device.destroy();
-    throw error;
+var Planner = class {
+  constructor(atlas, lift, schedule) {
+    this.atlas = atlas;
+    this.lift = lift;
+    this.schedule = schedule;
   }
-  const base = createBase(host, options, () => {
-    lastCameraChange = performance.now();
-    setLive(null);
-    clearTimeout(settleTimer);
-    settleTimer = window.setTimeout(() => {
-      pickLive();
-      schedule();
-    }, SETTLE_MS);
-    schedule();
-  });
-  const { surface, nodes } = base;
-  surface.append(canvas);
-  const atlasSize = Math.min(options.atlasSize ?? 4096, device.limits.maxTextureDimension2D);
-  const atlas = new Atlas(
-    device,
-    atlasSize,
-    Math.min(options.atlasLayers ?? 5, device.limits.maxTextureArrayLayers),
-    function* () {
-      const onScreen = (tile) => intersects(tile.rect, frameView);
-      for (const node of visible) yield node.slot;
-      for (const node of visible) {
-        for (const tile of node.tiles) {
-          if (tile.scale === detailScale && !tile.stale && onScreen(tile)) yield tile.slot;
-        }
-      }
-      for (const node of visible) {
-        yield node.preview;
-        for (const tile of node.tiles) if (onScreen(tile)) yield tile.slot;
-      }
-    }
-  );
-  const pageSize = Math.min(options.pageSize ?? DEFAULT_PAGE_SIZE, atlasSize);
-  const maxRasterCalls = options.maxRastersPerFrame ?? 12;
-  const rasterTimeBudgetMs = options.rasterTimeBudgetMs ?? 6;
-  const rasterPixelBudget = options.rasterPixelBudget ?? 24e6;
-  const colorsFor = (css) => {
-    const background = cssColorToRgba(css);
-    const shade = background[0] + background[1] + background[2] > 1.5 ? 0.92 : 1.25;
-    const placeholder = background.map(
-      (channel) => Math.min(1, channel * shade + (shade > 1 ? 0.02 : 0))
-    );
-    placeholder[3] = 1;
-    return [background, placeholder];
-  };
-  const renderer = new CompositeRenderer(
-    device,
-    context,
-    format,
-    atlas,
-    ...colorsFor(options.background ?? "#f4f4f5"),
-    () => schedule()
-  );
-  const selectionColor = premultiplied(
-    cssColorToRgba(options.selectionColor ?? DEFAULT_SELECTION_COLOR)
-  );
-  const hoverColor = options.hoverColor ? premultiplied(cssColorToRgba(options.hoverColor)) : selectionColor;
-  const effects = /* @__PURE__ */ new Map();
-  const startedAt = performance.now();
-  const FAR_AWAY = { x: -1e7, y: -1e7 };
-  let effectsMoving = false;
-  let selection = /* @__PURE__ */ new Set();
-  let hovered = null;
-  const ringRects = /* @__PURE__ */ new Map();
-  const ringRect = (element) => {
-    const own = nodes.get(element);
-    if (own) return own.rect;
-    const at = element.isConnected ? nodeOfElement(nodes, element) : null;
-    if (!at) return null;
-    const node = nodes.get(at);
-    let rect = ringRects.get(element);
-    if (!rect) ringRects.set(element, rect = rectInNode(at, node.rect, element));
-    return rect;
-  };
-  const pages = /* @__PURE__ */ new Map();
-  const pageByElement = /* @__PURE__ */ new Map();
-  let openPage = null;
-  let lastCameraChange = -Infinity;
-  let frameNumber = 0;
-  let promotionsPerFrame = 2;
-  let lastFrameAt = 0;
-  let rafId = 0;
-  let destroyed = false;
-  let live = null;
-  let livePositioned = false;
-  let lingering = null;
-  let lingerTimer = 0;
-  let focused = null;
-  let pointer = null;
-  let settleTimer = 0;
-  const stats = {
-    visible: 0,
-    pending: 0,
-    rasterizedLastFrame: 0,
-    rasterCallsLastFrame: 0,
-    rasterMs: 0,
-    frameMs: 0,
-    frames: 0,
-    lostPixels: 0,
-    lostDetail: 0,
-    onThumbnail: 0,
-    /** Last plan's nodes per need class: missing, dirty, blurry, oversampled. */
-    needs: [0, 0, 0, 0]
-  };
-  const visible = [];
-  const plans = /* @__PURE__ */ new Map();
-  const schedule = () => {
-    if (rafId || destroyed) return;
-    rafId = requestAnimationFrame(() => {
-      rafId = 0;
-      frameNumber++;
-      frame(false);
-    });
-  };
-  const canvasDpr = () => canvas.width / Math.max(1, canvas.clientWidth);
-  const resizeObserver = new ResizeObserver(([entry]) => {
-    const size = entry.devicePixelContentBoxSize?.[0];
-    canvas.width = Math.max(
-      1,
-      size ? size.inlineSize : Math.round(entry.contentRect.width * devicePixelRatio)
-    );
-    canvas.height = Math.max(
-      1,
-      size ? size.blockSize : Math.round(entry.contentRect.height * devicePixelRatio)
-    );
-    schedule();
-  });
-  resizeObserver.observe(canvas, { box: "device-pixel-content-box" });
-  const transitioning = /* @__PURE__ */ new Map();
-  const captures = [];
-  const heldNodes = () => [live, lingering, focused, ...transitioning.keys()];
-  const isPinned = (page) => captures.some((capture) => capture.node.page === page) || heldNodes().some((node) => node?.page === page);
-  let detailScale = 1;
-  let frameView = { x: 0, y: 0, width: 0, height: 0 };
-  let contentTimer = 0;
-  const scheduleAfterContentSettles = () => {
-    clearTimeout(contentTimer);
-    contentTimer = window.setTimeout(schedule, CONTENT_SETTLE_MS + 10);
-  };
-  let refreshTimer = 0;
-  let refreshAt = Infinity;
-  const smallOnScreen = (node) => Math.max(node.rect.width, node.rect.height) * base.camera().zoom < SMALL_NODE_PX;
-  const refreshWait = (node, now) => smallOnScreen(node) ? node.refreshedAt + SMALL_REFRESH_MS - now : 0;
-  const refreshLater = (wait) => {
-    const at = performance.now() + wait;
-    if (at >= refreshAt) return;
-    clearTimeout(refreshTimer);
-    refreshAt = at;
-    refreshTimer = window.setTimeout(() => {
-      refreshAt = Infinity;
-      schedule();
-    }, wait);
-  };
-  const planFrame = (view, desiredScale, deviceScale, moving) => {
+  atlas;
+  lift;
+  schedule;
+  /** This frame's texels per CSS pixel for tiles. */
+  detailScale = 1;
+  /** This frame's world rect in view. */
+  view = { x: 0, y: 0, width: 0, height: 0 };
+  visible = [];
+  plans = /* @__PURE__ */ new Map();
+  /** This frame's plans, most urgent first. */
+  ordered = [];
+  /** Last plan's nodes per need class: missing, dirty, blurry, oversampled. */
+  needs = [0, 0, 0, 0];
+  zoom = 1;
+  contentTimer = 0;
+  refreshTimer = 0;
+  refreshAt = Infinity;
+  /**
+   * Builds this frame's raster plan: which visible nodes need pixels, grouped by page. `dpr` is
+   * canvas pixels per CSS pixel; `moving` means the camera has not rested yet.
+   */
+  plan(nodes, view, zoom, dpr, moving) {
+    const { atlas, visible, plans } = this;
+    const atlasSize = atlas.size;
+    const deviceScale = zoom * dpr;
+    const desiredScale = rasterScaleFor(deviceScale);
     const now = performance.now();
-    detailScale = Math.min(deviceScale, MAX_DETAIL_SCALE);
-    frameView = view;
+    this.zoom = zoom;
+    this.detailScale = Math.min(deviceScale, MAX_DETAIL_SCALE);
+    this.view = view;
     visible.length = 0;
     plans.clear();
-    stats.needs = [0, 0, 0, 0];
-    for (const node of nodes.values()) {
+    this.needs = [0, 0, 0, 0];
+    for (const node of nodes) {
       if (!intersects(node.rect, view)) continue;
       visible.push(node);
       const scale = Math.min(
@@ -1759,14 +1619,14 @@ async function createGpuCanvas(host, options) {
       );
       if (node.dirty) node.changedAt = now;
       const thumbnailEnough = scale <= THUMBNAIL_SCALE;
-      if (thumbnailEnough && freshThumb(node) && !node.dirty && !node.wholeStale) {
+      if (thumbnailEnough && hasFreshThumb(atlas, node) && !node.dirty && !node.wholeStale) {
         node.slot = node.thumb;
         node.slotScale = THUMBNAIL_SCALE;
       }
       const animating = now - node.changedAt < CONTENT_SETTLE_MS;
       const deep = desiredScale > scale;
-      if (deep && !node.solo) lift(node);
-      const jobs = deep ? planDetail(node, view, animating, moving) : [];
+      if (deep && !node.solo) this.lift(node);
+      const jobs = deep ? this.planDetail(node, view, animating, moving) : [];
       if (!deep) {
         node.preview = null;
         node.tiles.length = 0;
@@ -1776,12 +1636,12 @@ async function createGpuCanvas(host, options) {
       if (!valid) need = atlas.isValid(node.thumb) ? DIRTY : MISSING;
       else if (deep) need = node.slotScale < scale / (moving ? 4 : 2) ? BLURRY : -1;
       else if (node.dirty || node.wholeStale) {
-        const wait = refreshWait(node, now);
-        if (wait > 0) refreshLater(wait);
+        const wait = this.refreshWait(node, now);
+        if (wait > 0) this.refreshLater(wait);
         else need = DIRTY;
       } else if (node.slotScale < (moving ? scale / 2 : scale)) need = BLURRY;
       else if (!moving && node.slotScale > scale * MAX_OVERSAMPLING) need = OVERSAMPLED;
-      if (need >= 0) stats.needs[need]++;
+      if (need >= 0) this.needs[need]++;
       if (need < 0 && !node.previewTarget && jobs.length === 0) continue;
       node.targetScale = thumbnailEnough ? THUMBNAIL_SCALE : scale;
       node.priority = (need < 0 ? BLURRY : need) * 1e12 + distanceToCenter(node.rect, view);
@@ -1796,8 +1656,33 @@ async function createGpuCanvas(host, options) {
       plan.tiles.push(...jobs);
     }
     for (const plan of plans.values()) plan.tiles.sort((a, b) => a.priority - b.priority);
-  };
-  const planDetail = (node, view, animating, moving) => {
+    this.ordered = [...plans.values()].sort((a, b) => a.priority - b.priority);
+  }
+  /** Atlas slots to keep when it is full: what is on screen, whole snapshots before sharp tiles. */
+  *keep() {
+    const { visible, detailScale, view } = this;
+    const onScreen = (tile) => intersects(tile.rect, view);
+    for (const node of visible) yield node.slot;
+    for (const node of visible) {
+      for (const tile of node.tiles) {
+        if (isCurrentTile(tile, detailScale) && onScreen(tile)) yield tile.slot;
+      }
+    }
+    for (const node of visible) {
+      yield node.preview;
+      for (const tile of node.tiles) if (onScreen(tile)) yield tile.slot;
+    }
+  }
+  destroy() {
+    clearTimeout(this.contentTimer);
+    clearTimeout(this.refreshTimer);
+  }
+  /**
+   * Plans a zoomed-in node: a preview while its content animates, otherwise the tiles in view
+   * it is missing at this frame's scale.
+   */
+  planDetail(node, view, animating, moving) {
+    const { atlas, detailScale } = this;
     const shown = intersection(node.rect, view);
     node.previewTarget = null;
     node.tiles = node.tiles.filter((tile) => atlas.isValid(tile.slot));
@@ -1807,13 +1692,13 @@ async function createGpuCanvas(host, options) {
       const scale = detailScale / 2;
       const stale = !node.preview || node.dirty || node.previewScale !== scale || !contains(node.previewRect, shown);
       if (stale) {
-        node.previewTarget = fitPreview(shown, scale);
+        node.previewTarget = this.fitPreview(shown, scale);
         node.previewTargetScale = scale;
       }
-      scheduleAfterContentSettles();
+      this.scheduleAfterContentSettles();
       return [];
     }
-    const current = node.tiles.filter((tile) => tile.scale === detailScale && !tile.stale);
+    const current = node.tiles.filter((tile) => isCurrentTile(tile, detailScale));
     if (moving && current.length === 0) return [];
     const size = Math.max(1, Math.floor(TILE_PIXELS / detailScale));
     const jobs = [];
@@ -1842,70 +1727,107 @@ async function createGpuCanvas(host, options) {
       node.preview = null;
     }
     return jobs;
-  };
-  const fitPreview = (shown, scale) => {
-    const limit = (atlasSize - 2) / scale;
+  }
+  /** The world rect a preview covers: `shown`, shrunk around its center to fit one layer. */
+  fitPreview(shown, scale) {
+    const limit = (this.atlas.size - 2) / scale;
     const fit = (start, size) => size <= limit ? [start, size] : [start + (size - limit) / 2, limit];
     const [x, width] = fit(shown.x, shown.width);
     const [y, height] = fit(shown.y, shown.height);
     return { x, y, width, height };
-  };
-  const drawSnapshot = (page, source, slot) => {
-    try {
-      device.queue.drawElementImageToTexture(
-        source ? {
-          source: page.element,
-          sourceX: source.x,
-          sourceY: source.y,
-          sourceWidth: source.width,
-          sourceHeight: source.height
-        } : { source: page.element },
-        {
-          texture: atlas.texture,
-          origin: { x: slot.x, y: slot.y, z: slot.layer },
-          size: { width: slot.width, height: slot.height },
-          premultipliedAlpha: true
-        }
-      );
-      return true;
-    } catch {
-      return false;
-    }
-  };
-  const slotFor = (previous, width, height, thumbnail = false) => atlas.isValid(previous) && atlas.isPinned(previous) === thumbnail && previous.width === width && previous.height === height && Number.isInteger(previous.x) && Number.isInteger(previous.y) ? previous : (thumbnail ? atlas.allocatePinned(width, height) : null) ?? atlas.allocate(width, height);
-  const texels = (length, scale) => Math.max(1, Math.round(length * scale));
-  const nodeRegion = (node) => ({
-    x: node.pageX,
-    y: node.pageY,
-    width: node.rect.width,
-    height: node.rect.height
-  });
-  const freshThumb = (node) => atlas.isValid(node.thumb) && !node.thumbStale;
-  const setThumb = (node, slot, now) => {
-    node.thumb = slot;
-    node.thumbStale = false;
-    node.thumbAt = now;
-  };
-  const drawn = (node, slot, scale, now) => {
-    node.slot = slot;
-    node.slotScale = scale;
-    if (scale === THUMBNAIL_SCALE) setThumb(node, slot, now);
-    else if (node.dirty) node.thumbStale = true;
-    if (node.dirty) {
-      node.preview = null;
-      node.refreshedAt = now;
+  }
+  scheduleAfterContentSettles() {
+    clearTimeout(this.contentTimer);
+    this.contentTimer = window.setTimeout(this.schedule, CONTENT_SETTLE_MS + 10);
+  }
+  /** How long a changed node waits before it is redrawn: only small ones wait. */
+  refreshWait(node, now) {
+    return smallOnScreen(node, this.zoom) ? node.refreshedAt + SMALL_REFRESH_MS - now : 0;
+  }
+  refreshLater(wait) {
+    const at = performance.now() + wait;
+    if (at >= this.refreshAt) return;
+    clearTimeout(this.refreshTimer);
+    this.refreshAt = at;
+    this.refreshTimer = window.setTimeout(() => {
+      this.refreshAt = Infinity;
+      this.schedule();
+    }, wait);
+  }
+};
+
+// src/capture.ts
+function captureRegion(device, source, region, width, height) {
+  const texture = device.createTexture({
+    size: { width, height },
+    format: "rgba8unorm",
+    usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+  });
+  try {
+    device.queue.drawElementImageToTexture(
+      {
+        source,
+        sourceX: region.x,
+        sourceY: region.y,
+        sourceWidth: region.width,
+        sourceHeight: region.height
+      },
+      { texture, size: { width, height }, premultipliedAlpha: false }
+    );
+  } catch (error) {
+    texture.destroy();
+    throw error;
+  }
+  return readTexture(device, texture, width, height);
+}
+async function readTexture(device, texture, width, height) {
+  const bytesPerRow = Math.ceil(width * 4 / 256) * 256;
+  const buffer = device.createBuffer({
+    size: bytesPerRow * height,
+    usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+  });
+  const encoder = device.createCommandEncoder();
+  encoder.copyTextureToBuffer({ texture }, { buffer, bytesPerRow }, { width, height });
+  device.queue.submit([encoder.finish()]);
+  try {
+    await buffer.mapAsync(GPUMapMode.READ);
+    const rows = new Uint8Array(buffer.getMappedRange());
+    const pixels = new Uint8ClampedArray(width * height * 4);
+    for (let y = 0; y < height; y++) {
+      pixels.set(rows.subarray(y * bytesPerRow, y * bytesPerRow + width * 4), y * width * 4);
     }
-    node.dirty = false;
-    node.wholeStale = false;
-  };
-  const pageSlots = /* @__PURE__ */ new Map();
-  const rasterize = (start) => {
+    return new ImageData(pixels, width, height);
+  } finally {
+    buffer.destroy();
+    texture.destroy();
+  }
+}
+
+// src/gpu-raster.ts
+var THUMBNAIL_REFRESH_MS = 1e3;
+var MAX_CAPTURE_TRIES = 20;
+var Rasterizer = class {
+  constructor(device, atlas, budget) {
+    this.device = device;
+    this.atlas = atlas;
+    this.budget = budget;
+  }
+  device;
+  atlas;
+  budget;
+  /**
+   * Rasterizes planned pages, most urgent first, within the frame's budget. A page where many
+   * nodes need pixels is drawn whole in one call; otherwise each node is cropped out. Pages that
+   * end up with nothing left to draw are parked unless `isPinned` holds them.
+   */
+  rasterize(ordered, pages, frameNumber, start, isPinned) {
+    const { atlas, budget } = this;
+    const atlasSize = atlas.size;
     let calls = 0;
     let pixels = 0;
     let rasterized = 0;
     let pending = 0;
-    const overBudget = () => calls > 0 && (calls >= maxRasterCalls || pixels >= rasterPixelBudget || performance.now() - start >= rasterTimeBudgetMs);
-    const ordered = [...plans.values()].sort((a, b) => a.priority - b.priority);
+    const overBudget = () => calls > 0 && (calls >= budget.calls || pixels >= budget.pixels || performance.now() - start >= budget.ms);
     for (const plan of ordered) {
       const { page } = plan;
       if (!page.drawable || page.promotedFrame >= frameNumber || overBudget()) {
@@ -1913,18 +1835,18 @@ async function createGpuCanvas(host, options) {
         continue;
       }
       const scale = plan.nodes.reduce((max, node) => Math.max(max, node.targetScale), 0);
-      const members = pages.get(page);
+      const members = pages.nodesOf(page);
       const neededArea = plan.nodes.reduce((sum, n) => sum + n.rect.width * n.rect.height, 0);
       const wholeFits = page.width * scale <= atlasSize / 2 && page.height * scale <= atlasSize / 2;
       const whole = wholeFits && (plan.nodes.length >= 6 || neededArea >= 0.25 * page.width * page.height);
-      const wholeSlot = whole ? slotFor(
-        pageSlots.get(page) ?? null,
+      const wholeSlot = whole ? this.slotFor(
+        page.wholeSlot,
         Math.ceil(page.width * scale),
         Math.ceil(page.height * scale),
         scale === THUMBNAIL_SCALE
       ) : null;
-      if (wholeSlot) pageSlots.set(page, wholeSlot);
-      if (wholeSlot && !drawSnapshot(page, null, wholeSlot)) {
+      if (wholeSlot) page.wholeSlot = wholeSlot;
+      if (wholeSlot && !this.draw(page, null, wholeSlot)) {
         pending += plan.nodes.length + plan.previews.length + plan.tiles.length;
         continue;
       }
@@ -1941,7 +1863,7 @@ async function createGpuCanvas(host, options) {
             width: node.rect.width * scale,
             height: node.rect.height * scale
           };
-          drawn(node, part, scale, start);
+          recordWhole(node, part, scale, start);
         }
         rasterized += members.size;
       } else {
@@ -1951,42 +1873,37 @@ async function createGpuCanvas(host, options) {
             continue;
           }
           const thumbnail = node.targetScale === THUMBNAIL_SCALE;
-          const slot = slotFor(
+          const slot = this.slotFor(
             thumbnail ? node.thumb : node.slot,
             texels(node.rect.width, node.targetScale),
             texels(node.rect.height, node.targetScale),
             thumbnail
           );
-          if (!slot || !drawSnapshot(page, nodeRegion(node), slot)) {
+          if (!slot || !this.draw(page, nodeRegion(node), slot)) {
             pending++;
             continue;
           }
           calls++;
           pixels += slot.width * slot.height;
-          drawn(node, slot, node.targetScale, start);
+          recordWhole(node, slot, node.targetScale, start);
           rasterized++;
         }
       }
       const warm = /* @__PURE__ */ new Set();
       const drawRegion = (node, rect, scale2, previous) => {
         if (!warm.has(scale2) && overBudget()) return null;
-        const slot = slotFor(previous, texels(rect.width, scale2), texels(rect.height, scale2));
+        const slot = this.slotFor(previous, texels(rect.width, scale2), texels(rect.height, scale2));
         const region = {
           x: node.pageX + rect.x - node.rect.x,
           y: node.pageY + rect.y - node.rect.y,
           width: rect.width,
           height: rect.height
         };
-        if (!slot || !drawSnapshot(page, region, slot)) return null;
+        if (!slot || !this.draw(page, region, slot)) return null;
         calls++;
         warm.add(scale2);
         pixels += slot.width * slot.height;
-        if (node.dirty) {
-          node.dirty = false;
-          node.wholeStale = true;
-          node.thumbStale = true;
-          node.refreshedAt = start;
-        }
+        recordPartial(node, start);
         return slot;
       };
       for (const node of plan.previews) {
@@ -2017,34 +1934,709 @@ async function createGpuCanvas(host, options) {
       }
       pending += tilesLeft;
       for (const node of members) {
-        if (freshThumb(node) || node.dirty) continue;
+        if (hasFreshThumb(atlas, node) || node.dirty) continue;
         if (atlas.isValid(node.thumb) && start - node.thumbAt < THUMBNAIL_REFRESH_MS) continue;
-        const slot = slotFor(
+        const slot = this.slotFor(
           node.thumb,
           texels(node.rect.width, THUMBNAIL_SCALE),
           texels(node.rect.height, THUMBNAIL_SCALE),
           true
         );
-        if (!slot || !drawSnapshot(page, nodeRegion(node), slot)) continue;
+        if (!slot || !this.draw(page, nodeRegion(node), slot)) continue;
         calls++;
         setThumb(node, slot, start);
       }
       const done = plan.nodes.every((node) => !node.dirty && atlas.isValid(node.slot)) && plan.previews.every((node) => node.previewTarget === null) && tilesLeft === 0;
       if (done && !isPinned(page)) page.setDrawable(false, frameNumber);
     }
-    stats.rasterizedLastFrame = rasterized;
-    stats.rasterCallsLastFrame = calls;
-    return pending;
+    return { pending, rasterized, calls };
+  }
+  /**
+   * Draws each node waiting for a snapshot into a texture of its own and reads it back, removing
+   * it from `captures`. A page that just became drawable has no snapshot until the next paint
+   * event, so a capture may wait a paint or two.
+   */
+  capture(captures) {
+    for (const capture of [...captures]) {
+      const { node, scale } = capture;
+      let image;
+      try {
+        image = captureRegion(
+          this.device,
+          node.page.element,
+          nodeRegion(node),
+          texels(node.rect.width, scale),
+          texels(node.rect.height, scale)
+        );
+      } catch (error) {
+        if (++capture.tries > MAX_CAPTURE_TRIES) {
+          captures.splice(captures.indexOf(capture), 1);
+          capture.reject(error instanceof Error ? error : new Error(String(error)));
+        }
+        continue;
+      }
+      captures.splice(captures.indexOf(capture), 1);
+      image.then(capture.resolve, capture.reject);
+    }
+  }
+  /**
+   * Atlas space for a `width` x `height` snapshot. A redraw at the same size overwrites the slot
+   * it replaces, so redraws (a hover, a click, an animation) never fill the atlas. Slots cut from
+   * a whole-page snapshot start at fractional texels and belong to the page, so they are never
+   * overwritten. Thumbnails go to the pinned layer while it has room.
+   */
+  slotFor(previous, width, height, thumbnail = false) {
+    const { atlas } = this;
+    return atlas.isValid(previous) && atlas.isPinned(previous) === thumbnail && previous.width === width && previous.height === height && Number.isInteger(previous.x) && Number.isInteger(previous.y) ? previous : (thumbnail ? atlas.allocatePinned(width, height) : null) ?? atlas.allocate(width, height);
+  }
+  /** Copies `source` of the page (all of it when null) into `slot`; false until it is recorded. */
+  draw(page, source, slot) {
+    try {
+      this.device.queue.drawElementImageToTexture(
+        source ? {
+          source: page.element,
+          sourceX: source.x,
+          sourceY: source.y,
+          sourceWidth: source.width,
+          sourceHeight: source.height
+        } : { source: page.element },
+        {
+          texture: this.atlas.texture,
+          origin: { x: slot.x, y: slot.y, z: slot.layer },
+          size: { width: slot.width, height: slot.height },
+          premultipliedAlpha: true
+        }
+      );
+      return true;
+    } catch {
+      return false;
+    }
+  }
+};
+
+// src/composite-shader.ts
+var KIND = { snapshot: 0, placeholder: 1, ring: 2 };
+var prelude = (
+  /* wgsl */
+  `
+struct View {
+  size: vec2f,        // canvas size in CSS pixels
+  origin: vec2f,      // camera position, world units
+  zoom: f32,
+  dpr: f32,
+  atlasSize: f32,
+  time: f32,          // seconds since the canvas started
+  placeholder: vec4f, // premultiplied color for nodes without a snapshot
+  pointer: vec4f,     // pointer and last press in world units; far away when there is none
+  pressTime: f32,     // seconds since the last press
+}
+
+@group(0) @binding(0) var<uniform> view: View;
+@group(0) @binding(1) var atlas: texture_2d_array<f32>;
+@group(0) @binding(2) var atlasSampler: sampler;
+
+struct Instance {
+  @location(0) rect: vec4f, // world x, y, width, height
+  @location(1) uv: vec4f,   // atlas texels x0, y0, x1, y1; for a ring, its premultiplied color
+  @location(2) info: vec4f, // layer, kind (0 snapshot, 1 placeholder, 2 ring), ring width or effect pad
+  @location(3) params: vec4f, // an effect's parameters
+}
+
+struct Varyings {
+  @builtin(position) position: vec4f,
+  @location(0) texel: vec2f,
+  @location(1) @interpolate(flat) bounds: vec4f,
+  @location(2) @interpolate(flat) info: vec2f,
+  @location(3) @interpolate(flat) color: vec4f,
+  @location(4) uv: vec2f, // 0 to 1 across the node, past that in an effect's padding
+  @location(5) @interpolate(flat) size: vec2f,
+  @location(6) @interpolate(flat) params: vec4f,
+  @location(7) @interpolate(flat) corner: vec2f, // the node's top left in world units
+}
+
+@vertex
+fn vs(@builtin(vertex_index) vertex: u32, instance: Instance) -> Varyings {
+  let corner = vec2f(f32(vertex & 1u), f32(vertex >> 1u));
+  // A ring's quad reaches past its element by the ring's width, an effect's by its padding.
+  let ring = instance.info.y > ${KIND.ring - 0.5};
+  let grow = select(instance.info.z, instance.info.z / view.zoom, ring);
+  let start = instance.rect.xy - grow;
+  let end = instance.rect.xy + instance.rect.zw + grow;
+  // Snap edges to device pixels so a snapshot drawn at its raster scale stays crisp.
+  let scale = view.zoom * view.dpr;
+  let topLeft = round((start - view.origin) * scale) / view.dpr;
+  let bottomRight = round((end - view.origin) * scale) / view.dpr;
+  let point = mix(topLeft, bottomRight, corner);
+  var out: Varyings;
+  out.position = vec4f(point.x / view.size.x * 2.0 - 1.0, 1.0 - point.y / view.size.y * 2.0, 0.0, 1.0);
+  if (ring) {
+    // World units from the element's top left, and the element's own edges.
+    out.texel = mix(vec2f(-grow), instance.rect.zw + grow, corner);
+    out.bounds = vec4f(0.0, 0.0, instance.rect.zw);
+    out.color = instance.uv;
+  } else {
+    let pad = grow * (instance.uv.zw - instance.uv.xy) / instance.rect.zw;
+    out.texel = mix(instance.uv.xy - pad, instance.uv.zw + pad, corner);
+    out.color = instance.uv;
+    // Half a texel inside the node's rectangle: the outermost sample center that cannot blend
+    // with whatever sits next to it in the atlas.
+    out.bounds = vec4f(instance.uv.xy + 0.5, instance.uv.zw - 0.5);
+  }
+  out.info = instance.info.xy;
+  out.uv = mix(-grow / instance.rect.zw, 1.0 + grow / instance.rect.zw, corner);
+  out.size = instance.rect.zw;
+  out.corner = instance.rect.xy;
+  out.params = instance.params;
+  return out;
+}
+`
+);
+var compositeShader = (
+  /* wgsl */
+  `${prelude}
+@fragment
+fn fs(in: Varyings) -> @location(0) vec4f {
+  // Derivatives first: WGSL only allows them in uniform control flow.
+  let dx = dpdx(in.texel);
+  let dy = dpdy(in.texel);
+  if (in.info.y > ${KIND.ring - 0.5}) {
+    // The ring covers what lies outside the element; the element itself shows through.
+    let outside = max(in.bounds.xy - in.texel, in.texel - in.bounds.zw);
+    return select(vec4f(0.0), in.color, max(outside.x, outside.y) > 0.0);
+  }
+  if (in.info.y > ${KIND.placeholder - 0.5}) {
+    return view.placeholder;
+  }
+  let layer = i32(in.info.x);
+  // Texels covered by this pixel along each screen axis.
+  let footprint = vec2f(length(vec2f(dx.x, dy.x)), length(vec2f(dx.y, dy.y)));
+  let taps = vec2u(clamp(ceil(footprint), vec2f(1.0), vec2f(4.0)));
+  var color = vec4f(0.0);
+  for (var j = 0u; j < taps.y; j++) {
+    for (var i = 0u; i < taps.x; i++) {
+      let offset = (vec2f(f32(i), f32(j)) + 0.5) / vec2f(taps) - 0.5;
+      let texel = clamp(in.texel + offset * footprint, in.bounds.xy, in.bounds.zw);
+      color += textureSampleLevel(atlas, atlasSampler, texel / view.atlasSize, layer, 0.0);
+    }
+  }
+  return color / f32(taps.x * taps.y);
+}
+`
+);
+var effectShader = (wgsl) => (
+  /* wgsl */
+  `${prelude}
+struct EffectInput {
+  uv: vec2f,
+  size: vec2f,
+  time: f32,
+  zoom: f32,
+  params: vec4f,
+  pointer: vec2f,
+  press: vec2f,
+  sincePress: f32,
+}
+
+var<private> sourceRect: vec4f;
+var<private> sourceLayer: i32;
+
+fn source(uv: vec2f) -> vec4f {
+  if (any(uv < vec2f(0.0)) || any(uv > vec2f(1.0))) {
+    return vec4f(0.0);
+  }
+  let texel = clamp(mix(sourceRect.xy, sourceRect.zw, uv), sourceRect.xy + 0.5, sourceRect.zw - 0.5);
+  return textureSampleLevel(atlas, atlasSampler, texel / view.atlasSize, sourceLayer, 0.0);
+}
+
+fn hash(p: vec2f) -> f32 {
+  return fract(sin(dot(p, vec2f(127.1, 311.7))) * 43758.5453);
+}
+
+fn noise(p: vec2f) -> f32 {
+  let i = floor(p);
+  let f = fract(p);
+  let u = f * f * (3.0 - 2.0 * f);
+  return mix(
+    mix(hash(i), hash(i + vec2f(1.0, 0.0)), u.x),
+    mix(hash(i + vec2f(0.0, 1.0)), hash(i + vec2f(1.0, 1.0)), u.x),
+    u.y,
+  );
+}
+
+${wgsl}
+
+@fragment
+fn fs(in: Varyings) -> @location(0) vec4f {
+  sourceRect = in.color;
+  sourceLayer = i32(in.info.x);
+  let pointer = (view.pointer.xy - in.corner) / in.size;
+  let press = (view.pointer.zw - in.corner) / in.size;
+  return effect(
+    EffectInput(in.uv, in.size, view.time, view.zoom, in.params, pointer, press, view.pressTime),
+  );
+}
+`
+);
+
+// src/gpu-renderer.ts
+var FLOATS_PER_INSTANCE = 16;
+var CompositeRenderer = class {
+  constructor(device, context, format, atlas, background, placeholder, onEffectReady) {
+    this.device = device;
+    this.context = context;
+    this.format = format;
+    this.atlas = atlas;
+    this.background = background;
+    this.placeholder = placeholder;
+    this.onEffectReady = onEffectReady;
+    this.bindGroupLayout = device.createBindGroupLayout({
+      entries: [
+        { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: {} },
+        {
+          binding: 1,
+          visibility: GPUShaderStage.FRAGMENT,
+          texture: { viewDimension: "2d-array" }
+        },
+        { binding: 2, visibility: GPUShaderStage.FRAGMENT, sampler: {} }
+      ]
+    });
+    this.sampler = device.createSampler({ magFilter: "linear", minFilter: "linear" });
+    this.pipeline = device.createRenderPipeline(
+      this.pipelineDescriptor("gpucanvas composite", compositeShader)
+    );
+    this.uniforms = device.createBuffer({
+      size: this.uniformData.byteLength,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    this.bindGroup = device.createBindGroup({
+      layout: this.bindGroupLayout,
+      entries: [
+        { binding: 0, resource: { buffer: this.uniforms } },
+        { binding: 1, resource: atlas.view },
+        { binding: 2, resource: this.sampler }
+      ]
+    });
+    this.instanceBuffer = this.createInstanceBuffer();
+  }
+  device;
+  context;
+  format;
+  atlas;
+  background;
+  placeholder;
+  onEffectReady;
+  instances = new Float32Array(FLOATS_PER_INSTANCE * 4096);
+  count = 0;
+  runs = [];
+  instanceBuffer;
+  uniforms;
+  uniformData = new Float32Array(20);
+  pipeline;
+  bindGroup;
+  bindGroupLayout;
+  sampler;
+  /** Effect pipelines, null while one compiles. Compiling never blocks a frame. */
+  effects = /* @__PURE__ */ new Map();
+  failed = /* @__PURE__ */ new Set();
+  pipelineDescriptor(label, code) {
+    const module = this.device.createShaderModule({ label, code });
+    return {
+      label,
+      layout: this.device.createPipelineLayout({ bindGroupLayouts: [this.bindGroupLayout] }),
+      vertex: {
+        module,
+        entryPoint: "vs",
+        buffers: [
+          {
+            arrayStride: FLOATS_PER_INSTANCE * 4,
+            stepMode: "instance",
+            attributes: [
+              { shaderLocation: 0, offset: 0, format: "float32x4" },
+              { shaderLocation: 1, offset: 16, format: "float32x4" },
+              { shaderLocation: 2, offset: 32, format: "float32x4" },
+              { shaderLocation: 3, offset: 48, format: "float32x4" }
+            ]
+          }
+        ]
+      },
+      fragment: {
+        module,
+        entryPoint: "fs",
+        targets: [
+          {
+            format: this.format,
+            // Snapshots are requested premultiplied.
+            blend: {
+              color: { srcFactor: "one", dstFactor: "one-minus-src-alpha" },
+              alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha" }
+            }
+          }
+        ]
+      },
+      primitive: { topology: "triangle-strip" }
+    };
+  }
+  /** Whether `effect` can draw this frame. The first ask starts compiling it. */
+  hasEffect(effect) {
+    if (this.effects.has(effect)) return this.effects.get(effect) !== null;
+    this.effects.set(effect, null);
+    this.device.createRenderPipelineAsync(
+      this.pipelineDescriptor(`gpucanvas effect ${effect.name}`, effectShader(effect.wgsl))
+    ).then((pipeline) => {
+      this.effects.set(effect, pipeline);
+      this.onEffectReady();
+    }).catch((error) => {
+      this.failed.add(effect);
+      console.error(`[gpucanvas] effect "${effect.name}" failed`, error);
+    });
+    return false;
+  }
+  /** Whether `effect`'s pipeline failed to compile; it never draws then. */
+  effectFailed(effect) {
+    return this.failed.has(effect);
+  }
+  /** Starts a frame's list of quads. */
+  begin() {
+    this.count = 0;
+    this.runs.length = 0;
+  }
+  /** Room for the next quad, in the run of `effect`; returns its first float. */
+  next(effect) {
+    if ((this.count + 1) * FLOATS_PER_INSTANCE > this.instances.length) {
+      const larger = new Float32Array(this.instances.length * 2);
+      larger.set(this.instances);
+      this.instances = larger;
+      this.instanceBuffer.destroy();
+      this.instanceBuffer = this.createInstanceBuffer();
+    }
+    const last = this.runs.at(-1);
+    if (last && last.effect === effect) last.count++;
+    else this.runs.push({ effect, start: this.count, count: 1 });
+    return this.count++ * FLOATS_PER_INSTANCE;
+  }
+  writeRect(offset, rect) {
+    const data = this.instances;
+    data[offset] = rect.x;
+    data[offset + 1] = rect.y;
+    data[offset + 2] = rect.width;
+    data[offset + 3] = rect.height;
+  }
+  writeSlot(offset, slot) {
+    const data = this.instances;
+    this.atlas.touch(slot.layer);
+    data[offset + 4] = slot.x;
+    data[offset + 5] = slot.y;
+    data[offset + 6] = slot.x + slot.width;
+    data[offset + 7] = slot.y + slot.height;
+    data[offset + 8] = slot.layer;
+    data[offset + 9] = KIND.snapshot;
+  }
+  /** `rect` showing the snapshot in `slot`, or the placeholder color while there is none. */
+  quad(rect, slot) {
+    const offset = this.next(null);
+    this.writeRect(offset, rect);
+    if (slot) this.writeSlot(offset, slot);
+    else this.instances[offset + 9] = KIND.placeholder;
+    this.instances[offset + 10] = 0;
+  }
+  /** `rect` drawn through `effect` from the snapshot in `slot`, reaching `pad` past its edges. */
+  effectQuad(rect, slot, effect, pad, params) {
+    const offset = this.next(effect);
+    this.writeRect(offset, rect);
+    this.writeSlot(offset, slot);
+    this.instances[offset + 10] = pad;
+    this.instances.set(params, offset + 12);
+  }
+  /** An outline `width` CSS pixels wide just outside `rect`, in a premultiplied color. */
+  ring(rect, color, width) {
+    const offset = this.next(null);
+    this.writeRect(offset, rect);
+    this.instances.set(color, offset + 4);
+    this.instances[offset + 9] = KIND.ring;
+    this.instances[offset + 10] = width;
+  }
+  /** Draws the quads listed since `begin`. */
+  draw(camera, cssWidth, cssHeight, dpr, effects) {
+    const { device, count, runs } = this;
+    this.uniformData.set([
+      cssWidth,
+      cssHeight,
+      camera.x,
+      camera.y,
+      camera.zoom,
+      dpr,
+      this.atlas.size,
+      effects.time,
+      ...this.placeholder,
+      effects.pointer.x,
+      effects.pointer.y,
+      effects.press.x,
+      effects.press.y,
+      effects.sincePress
+    ]);
+    device.queue.writeBuffer(this.uniforms, 0, this.uniformData);
+    if (count > 0) {
+      device.queue.writeBuffer(
+        this.instanceBuffer,
+        0,
+        this.instances,
+        0,
+        count * FLOATS_PER_INSTANCE
+      );
+    }
+    const [r, g, b] = this.background;
+    const encoder = device.createCommandEncoder();
+    const pass = encoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: this.context.getCurrentTexture().createView(),
+          clearValue: { r, g, b, a: 1 },
+          loadOp: "clear",
+          storeOp: "store"
+        }
+      ]
+    });
+    if (count > 0) {
+      pass.setBindGroup(0, this.bindGroup);
+      pass.setVertexBuffer(0, this.instanceBuffer);
+      let current = null;
+      for (const run of runs) {
+        const pipeline = run.effect && this.effects.get(run.effect) || this.pipeline;
+        if (pipeline !== current) pass.setPipeline(current = pipeline);
+        pass.draw(4, run.count, 0, run.start);
+      }
+    }
+    pass.end();
+    device.queue.submit([encoder.finish()]);
+  }
+  destroy() {
+    this.instanceBuffer.destroy();
+    this.uniforms.destroy();
+  }
+  createInstanceBuffer() {
+    return this.device.createBuffer({
+      label: "gpucanvas instances",
+      size: this.instances.byteLength,
+      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+    });
+  }
+};
+
+// src/gpu-backend.ts
+var SETTLE_MS = 120;
+var DEFAULT_PAGE_SIZE = 2048;
+var MAX_PROMOTIONS_PER_FRAME = 8;
+var SLOW_FRAME_MS = 22;
+var FAST_FRAME_MS = 12;
+function supportsGpuCanvas() {
+  return typeof navigator !== "undefined" && "gpu" in navigator && typeof HTMLCanvasElement !== "undefined" && "requestPaint" in HTMLCanvasElement.prototype && "getElementTransform" in HTMLCanvasElement.prototype && typeof GPUQueue !== "undefined" && "drawElementImageToTexture" in GPUQueue.prototype;
+}
+function cssColorToRgba(color) {
+  const context = document.createElement("canvas").getContext("2d");
+  context.fillStyle = color;
+  context.fillRect(0, 0, 1, 1);
+  const [r, g, b, a] = context.getImageData(0, 0, 1, 1).data;
+  return [r / 255, g / 255, b / 255, a / 255];
+}
+var premultiplied = ([r, g, b, a]) => [r * a, g * a, b * a, a];
+async function createGpuCanvas(host, options) {
+  const adapter = await navigator.gpu.requestAdapter({ powerPreference: "high-performance" });
+  if (!adapter) throw new Error("gpucanvas: no WebGPU adapter");
+  const device = await adapter.requestDevice();
+  const canvas = document.createElement("canvas");
+  canvas.setAttribute("content", "drawable");
+  markSurface(canvas);
+  Object.assign(canvas.style, { display: "block", width: "100%", height: "100%" });
+  const context = canvas.getContext("webgpu");
+  const format = navigator.gpu.getPreferredCanvasFormat();
+  try {
+    if (!context) throw new Error("gpucanvas: no WebGPU canvas context");
+    context.configure({ device, format, alphaMode: "opaque" });
+  } catch (error) {
+    device.destroy();
+    throw error;
+  }
+  const base = createBase(
+    host,
+    options,
+    () => {
+      lastCameraChange = performance.now();
+      live.set(null);
+      clearTimeout(settleTimer);
+      settleTimer = window.setTimeout(() => {
+        live.pick();
+        schedule();
+      }, SETTLE_MS);
+      schedule();
+    },
+    {
+      add(element, rect) {
+        element.style.pointerEvents = "none";
+        const node = createGpuNode(element, rect, pages.place(element, rect));
+        pages.join(node);
+        schedule();
+        return node;
+      },
+      update(node, rect) {
+        ringRects.clear();
+        if (node.rect.width === rect.width && node.rect.height === rect.height) {
+          translateNode(node, rect);
+          live.moved(node);
+          return schedule();
+        }
+        node.rect = rect;
+        relocate(node, () => {
+          pages.release(node);
+          placeNode(node, pages.place(node.element, rect));
+          pages.join(node);
+        });
+        schedule();
+      },
+      remove(node) {
+        live.forget(node);
+        effects.delete(node.element);
+        selection.delete(node.element);
+        pages.release(node);
+        schedule();
+      }
+    }
+  );
+  const { surface, nodes } = base;
+  surface.append(canvas);
+  const atlasSize = Math.min(options.atlasSize ?? 4096, device.limits.maxTextureDimension2D);
+  const atlas = new Atlas(
+    device,
+    atlasSize,
+    Math.min(options.atlasLayers ?? 5, device.limits.maxTextureArrayLayers),
+    () => planner.keep()
+  );
+  const pages = new Pages(canvas, Math.min(options.pageSize ?? DEFAULT_PAGE_SIZE, atlasSize));
+  const rasterizer = new Rasterizer(device, atlas, {
+    calls: options.maxRastersPerFrame ?? 12,
+    ms: options.rasterTimeBudgetMs ?? 6,
+    pixels: options.rasterPixelBudget ?? 24e6
+  });
+  const colorsFor = (css) => {
+    const background = cssColorToRgba(css);
+    const shade = background[0] + background[1] + background[2] > 1.5 ? 0.92 : 1.25;
+    const placeholder = background.map(
+      (channel) => Math.min(1, channel * shade + (shade > 1 ? 0.02 : 0))
+    );
+    placeholder[3] = 1;
+    return [background, placeholder];
+  };
+  const renderer = new CompositeRenderer(
+    device,
+    context,
+    format,
+    atlas,
+    ...colorsFor(options.background ?? "#f4f4f5"),
+    () => schedule()
+  );
+  const selectionColor = premultiplied(
+    cssColorToRgba(options.selectionColor ?? DEFAULT_SELECTION_COLOR)
+  );
+  const hoverColor = options.hoverColor ? premultiplied(cssColorToRgba(options.hoverColor)) : selectionColor;
+  const effects = /* @__PURE__ */ new Map();
+  const startedAt = performance.now();
+  let effectsMoving = false;
+  let selection = /* @__PURE__ */ new Set();
+  let hovered = null;
+  const ringRects = /* @__PURE__ */ new Map();
+  const ringRect = (element) => {
+    const own = nodes.get(element);
+    if (own) return own.rect;
+    const at = element.isConnected ? nodeOfElement(nodes, element) : null;
+    if (!at) return null;
+    const node = nodes.get(at);
+    let rect = ringRects.get(element);
+    if (!rect) ringRects.set(element, rect = rectInNode(at, node.rect, element));
+    return rect;
+  };
+  let lastCameraChange = -Infinity;
+  let frameNumber = 0;
+  let promotionsPerFrame = 2;
+  let lastFrameAt = 0;
+  let rafId = 0;
+  let destroyed = false;
+  let settleTimer = 0;
+  let awaitingPaint = false;
+  const requestPaint = () => {
+    awaitingPaint = true;
+    canvas.requestPaint();
+  };
+  const stats = {
+    visible: 0,
+    pending: 0,
+    rasterizedLastFrame: 0,
+    rasterCallsLastFrame: 0,
+    rasterMs: 0,
+    frameMs: 0,
+    frames: 0,
+    lostPixels: 0,
+    lostDetail: 0,
+    onThumbnail: 0
+  };
+  const schedule = () => {
+    if (rafId || destroyed) return;
+    rafId = requestAnimationFrame(() => {
+      rafId = 0;
+      frameNumber++;
+      frame(false);
+    });
+  };
+  const canvasDpr = () => canvas.width / Math.max(1, canvas.clientWidth);
+  const resizeObserver = new ResizeObserver(([entry]) => {
+    const size = entry.devicePixelContentBoxSize?.[0];
+    canvas.width = Math.max(
+      1,
+      size ? size.inlineSize : Math.round(entry.contentRect.width * devicePixelRatio)
+    );
+    canvas.height = Math.max(
+      1,
+      size ? size.blockSize : Math.round(entry.contentRect.height * devicePixelRatio)
+    );
+    schedule();
+  });
+  resizeObserver.observe(canvas, { box: "device-pixel-content-box" });
+  const captures = [];
+  const captured = (page) => captures.some((capture) => capture.node.page === page);
+  const isPinned = (page) => captured(page) || live.holds(page);
+  const live = new Live({
+    canvas,
+    surface,
+    nodes,
+    camera: base.camera,
+    view: base.view,
+    nodeAt: base.nodeAt,
+    frameNumber: () => frameNumber,
+    canvasDpr,
+    schedule,
+    isPinned,
+    onPress: () => {
+      if (effects.size) schedule();
+    }
+  });
+  const relocate = (node, move) => {
+    const wasLive = live.current === node;
+    if (wasLive) live.set(null);
+    const previous = node.page;
+    move();
+    if (pages.has(previous) && !isPinned(previous)) {
+      live.unpin(previous);
+      previous.setDrawable(false, frameNumber);
+    }
+    if (wasLive) live.pick();
   };
+  const lift = (node) => relocate(node, () => pages.lift(node));
+  const planner = new Planner(atlas, lift, schedule);
   const composite = () => {
-    let instances2 = visible.length;
-    for (const node of visible) instances2 += node.tiles.length + (node.preview ? 1 : 0);
-    instances2 += selection.size + 1;
-    renderer.begin(instances2);
+    const { visible, detailScale, view } = planner;
+    renderer.begin();
     effectsMoving = false;
     const pushRing = (element, color, width) => {
       const rect = ringRect(element);
-      if (rect && intersects(rect, frameView)) renderer.ring(rect, color, width);
+      if (rect && intersects(rect, view)) renderer.ring(rect, color, width);
     };
     let onThumbnail = 0;
     for (const node of visible) {
@@ -2068,7 +2660,7 @@ async function createGpuCanvas(host, options) {
         effectsMoving = true;
       }
       renderer.quad(node.rect, image);
-      const current = (tile) => tile.scale === detailScale && !tile.stale;
+      const current = (tile) => isCurrentTile(tile, detailScale);
       for (const tile of node.tiles)
         if (!current(tile) && atlas.isValid(tile.slot)) renderer.quad(tile.rect, tile.slot);
       if (node.preview && atlas.isValid(node.preview))
@@ -2085,9 +2677,9 @@ async function createGpuCanvas(host, options) {
     const camera = base.camera();
     renderer.draw(camera, cssWidth, canvas.clientHeight, dpr, {
       time: (now - startedAt) / 1e3,
-      pointer: pointer ? screenToWorld(camera, pointer) : FAR_AWAY,
-      press,
-      sincePress: Math.min((now - pressedAt) / 1e3, 1e4)
+      pointer: live.pointer ? screenToWorld(camera, live.pointer) : FAR_AWAY,
+      press: live.press,
+      sincePress: Math.min((now - live.pressedAt) / 1e3, 1e4)
     });
   };
   const frame = (inPaint) => {
@@ -2098,7 +2690,8 @@ async function createGpuCanvas(host, options) {
     const camera = base.camera();
     const view = base.view();
     const moving = start - lastCameraChange < SETTLE_MS;
-    planFrame(view, rasterScaleFor(camera.zoom * dpr), camera.zoom * dpr, moving);
+    planner.plan(nodes.values(), view, camera.zoom, dpr, moving);
+    const { plans, ordered } = planner;
     if (!inPaint && plans.size > 0) {
       const interval = start - lastFrameAt;
       if (interval < 100) {
@@ -2108,67 +2701,44 @@ async function createGpuCanvas(host, options) {
       }
       lastFrameAt = start;
       let promoted = 0;
-      for (const plan of [...plans.values()].sort((a, b) => a.priority - b.priority)) {
+      for (const plan of ordered) {
         if (plan.page.drawable) continue;
         if (promoted++ >= promotionsPerFrame) break;
         plan.page.setDrawable(true, frameNumber);
       }
-      awaitingPaint = true;
-      canvas.requestPaint();
+      requestPaint();
       return;
     }
     let pending = 0;
     stats.rasterizedLastFrame = 0;
     stats.rasterCallsLastFrame = 0;
-    if (inPaint && plans.size > 0) pending = rasterize(start);
-    for (const page of pages.keys()) {
-      if (page.drawable && !plans.has(page) && page.promotedFrame < frameNumber && !isPinned(page))
-        page.setDrawable(false, frameNumber);
+    if (inPaint && plans.size > 0) {
+      const drawn = rasterizer.rasterize(ordered, pages, frameNumber, start, isPinned);
+      pending = drawn.pending;
+      stats.rasterizedLastFrame = drawn.rasterized;
+      stats.rasterCallsLastFrame = drawn.calls;
     }
+    pages.parkIdle(plans, frameNumber, isPinned);
     stats.rasterMs = performance.now() - start;
     composite();
     stats.frames++;
-    positionLivePage();
-    stats.visible = visible.length;
+    live.position();
+    stats.visible = planner.visible.length;
     stats.pending = pending;
     stats.frameMs = performance.now() - start;
     if (pending > 0 || effectsMoving) schedule();
   };
-  let awaitingPaint = false;
-  const drawCaptures = () => {
-    for (const capture of [...captures]) {
-      const { node, scale } = capture;
-      let image;
-      try {
-        image = captureRegion(
-          device,
-          node.page.element,
-          nodeRegion(node),
-          texels(node.rect.width, scale),
-          texels(node.rect.height, scale)
-        );
-      } catch (error) {
-        if (++capture.tries > MAX_CAPTURE_TRIES) {
-          captures.splice(captures.indexOf(capture), 1);
-          capture.reject(error instanceof Error ? error : new Error(String(error)));
-        }
-        continue;
-      }
-      captures.splice(captures.indexOf(capture), 1);
-      image.then(capture.resolve, capture.reject);
-    }
-    if (captures.length) {
-      awaitingPaint = true;
-      canvas.requestPaint();
-    } else schedule();
-  };
   canvas.onpaint = (event) => {
-    if (captures.length) drawCaptures();
+    if (captures.length) {
+      rasterizer.capture(captures);
+      if (captures.length) requestPaint();
+      else schedule();
+    }
     let changed = false;
     for (const element of event.changedElements) {
-      const page = pageByElement.get(element);
+      const page = pages.pageOf(element);
       if (!page) continue;
-      for (const node of heldNodes()) {
+      for (const node of live.held()) {
         if (node?.page === page) {
           node.dirty = true;
           changed = true;
@@ -2180,20 +2750,15 @@ async function createGpuCanvas(host, options) {
     awaitingPaint = false;
     frame(true);
   };
-  const nodeOf = (target) => {
-    const element = target instanceof Element ? target : target.parentElement;
-    const node = element && nodeOfElement(nodes, element);
-    return node ? nodes.get(node) : void 0;
-  };
   const mutations = new MutationObserver((records) => {
     ringRects.clear();
     let changed = false;
     for (const record of records) {
       const target = record.target;
-      if (record.type === "attributes" && (nodes.has(target) || pageByElement.has(target) || target === canvas)) {
+      if (record.type === "attributes" && (nodes.has(target) || pages.pageOf(target) || target === canvas)) {
         continue;
       }
-      const node = nodeOf(record.target);
+      const node = nodeOf(nodes, record.target);
       if (node && !node.dirty) {
         node.dirty = true;
         if (!changed) changed = intersects(node.rect, base.view());
@@ -2207,135 +2772,8 @@ async function createGpuCanvas(host, options) {
     characterData: true,
     attributes: true
   });
-  const unpin = (page) => {
-    if (isPinned(page)) return;
-    if (page.registered) canvas.clearElementGeometry(page.element);
-    page.registered = false;
-    page.element.style.transform = "";
-    schedule();
-  };
-  const letGo = (node) => {
-    node.dirty = true;
-    unpin(node.page);
-  };
-  const positionLivePage = () => {
-    if (!live || livePositioned) return;
-    const camera = base.camera();
-    const { zoom } = camera;
-    const x = (live.rect.x - camera.x - live.pageX) * zoom;
-    const y = (live.rect.y - camera.y - live.pageY) * zoom;
-    try {
-      if (CANVAS_TRANSFORM_HIT_TESTS) {
-        canvas.updateElementGeometry(live.page.element, {
-          canvasTransform: new DOMMatrix([zoom, 0, 0, zoom, x, y])
-        });
-      } else {
-        const dpr = canvasDpr();
-        const drawn2 = new DOMMatrix([zoom, 0, 0, zoom, x * dpr, y * dpr]);
-        live.page.element.style.transform = canvas.getElementTransform(live.page.element, drawn2).toString();
-      }
-      live.element.style.pointerEvents = "auto";
-      livePositioned = true;
-    } catch {
-      schedule();
-    }
-  };
-  const setLive = (node) => {
-    if (node === live) return;
-    const previous = live;
-    live = node;
-    if (previous) {
-      previous.element.style.pointerEvents = "none";
-      clearTimeout(lingerTimer);
-      const earlier = lingering;
-      lingering = previous;
-      if (earlier && earlier !== previous) letGo(earlier);
-      lingerTimer = window.setTimeout(() => {
-        const last = lingering;
-        if (!last) return;
-        lingering = null;
-        letGo(last);
-      }, LINGER_MS);
-      unpin(previous.page);
-    }
-    if (!node) return;
-    const { page } = node;
-    page.setDrawable(true, frameNumber);
-    if (!page.registered) {
-      canvas.updateElementGeometry(page.element, {});
-      page.registered = true;
-    }
-    livePositioned = false;
-    positionLivePage();
-    schedule();
-  };
-  const pickLive = () => {
-    if (!pointer) return setLive(null);
-    setLive(base.nodeAt(screenToWorld(base.camera(), pointer)));
-  };
-  const onPointerMove = (event) => {
-    pointer = pointIn(canvas, event);
-    if (event.buttons === 0) pickLive();
-  };
-  const onPointerLeave = () => {
-    pointer = null;
-    setLive(null);
-  };
-  let press = FAR_AWAY;
-  let pressedAt = -Infinity;
-  let tapped = false;
-  const onPointerDown = (event) => {
-    const at = pointIn(canvas, event);
-    press = screenToWorld(base.camera(), at);
-    pressedAt = performance.now();
-    if (event.pointerType !== "mouse") {
-      pointer = at;
-      pickLive();
-      tapped = true;
-    }
-    if (effects.size) schedule();
-  };
-  const onClick = (event) => {
-    if (!tapped) return;
-    tapped = false;
-    const point = screenToWorld(base.camera(), pointIn(canvas, event));
-    const top = base.nodeAt(point);
-    if (!top || top.element.contains(event.target)) return;
-    let target = elementInNode(top.element, top.rect, point);
-    while (target && !(target instanceof HTMLElement)) target = target.parentElement;
-    if (!(target instanceof HTMLElement)) return;
-    target.focus({ preventScroll: true });
-    target.dispatchEvent(
-      new MouseEvent("click", {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-        view: window,
-        clientX: event.clientX,
-        clientY: event.clientY
-      })
-    );
-  };
-  const onFocusIn = (event) => {
-    const node = nodeOf(event.target) ?? null;
-    if (node === focused) return;
-    const previous = focused;
-    focused = node;
-    if (previous) letGo(previous);
-    if (node) {
-      node.page.setDrawable(true, frameNumber);
-      node.dirty = true;
-      schedule();
-    }
-  };
-  const onFocusOut = (event) => {
-    if (event.relatedTarget && canvas.contains(event.relatedTarget)) return;
-    const previous = focused;
-    focused = null;
-    if (previous) letGo(previous);
-  };
   const onResourceLoad = (event) => {
-    const node = nodeOf(event.target);
+    const node = nodeOf(nodes, event.target);
     if (!node) return;
     node.dirty = true;
     schedule();
@@ -2346,177 +2784,9 @@ async function createGpuCanvas(host, options) {
     schedule();
   };
   document.fonts.addEventListener("loadingdone", onFontsLoaded);
-  surface.addEventListener("pointermove", onPointerMove);
-  surface.addEventListener("pointerleave", onPointerLeave);
-  surface.addEventListener("pointerdown", onPointerDown, true);
-  surface.addEventListener("click", onClick);
-  canvas.addEventListener("focusin", onFocusIn);
-  canvas.addEventListener("focusout", onFocusOut);
-  const usedAt = /* @__PURE__ */ new WeakMap();
-  const onUse = (event) => {
-    const node = nodeOf(event.target);
-    if (node) usedAt.set(node, performance.now());
-  };
-  const transitionMs = (element) => {
-    const style = getComputedStyle(element);
-    const seconds = (list) => list.split(",").map((value) => parseFloat(value) || 0);
-    const durations = seconds(style.transitionDuration);
-    const delays = seconds(style.transitionDelay);
-    const longest = Math.max(...durations.map((d, i) => d + (delays[i % delays.length] ?? 0)));
-    return Math.min(1e3, longest * 1e3);
-  };
-  const onTransitionRun = (event) => {
-    const node = nodeOf(event.target);
-    const now = performance.now();
-    if (!node || now - (usedAt.get(node) ?? -Infinity) > USED_MS) return;
-    if (!intersects(node.rect, base.view())) return;
-    if (smallOnScreen(node)) return;
-    const ms = transitionMs(event.target) + 32;
-    const end = now + ms;
-    if ((transitioning.get(node) ?? 0) >= end) return;
-    transitioning.set(node, end);
-    node.dirty = true;
-    schedule();
-    setTimeout(() => {
-      if (destroyed || transitioning.get(node) !== end) return;
-      transitioning.delete(node);
-      letGo(node);
-      schedule();
-    }, ms);
-  };
-  for (const type of USE_EVENTS) canvas.addEventListener(type, onUse, true);
-  canvas.addEventListener("transitionrun", onTransitionRun);
-  const newPage = (width, height) => {
-    const page = new Page(width, height);
-    pages.set(page, /* @__PURE__ */ new Set());
-    pageByElement.set(page.element, page);
-    canvas.append(page.element);
-    return page;
-  };
-  const dropPage = (page) => {
-    pages.delete(page);
-    pageByElement.delete(page.element);
-    pageSlots.delete(page);
-    page.element.remove();
-  };
-  const placeNode = (element, rect) => {
-    let slot = openPage?.place(rect.width, rect.height) ?? null;
-    if (!slot) {
-      const page = newPage(
-        Math.max(pageSize, Math.ceil(rect.width)),
-        Math.max(pageSize, Math.ceil(rect.height))
-      );
-      if (page.width === pageSize && page.height === pageSize) openPage = page;
-      slot = page.place(rect.width, rect.height);
-    }
-    Object.assign(element.style, {
-      position: "absolute",
-      left: `${slot.x}px`,
-      top: `${slot.y}px`,
-      width: `${rect.width}px`,
-      height: `${rect.height}px`
-    });
-    slot.page.element.append(element);
-    return slot;
-  };
-  const releaseNode = (node) => {
-    const members = pages.get(node.page);
-    members.delete(node);
-    if (members.size === 0 && node.page !== openPage) dropPage(node.page);
-  };
-  const lift = (node) => {
-    const previous = node.page;
-    const wasLive = live === node;
-    if (wasLive) setLive(null);
-    const page = newPage(Math.ceil(node.rect.width), Math.ceil(node.rect.height));
-    page.place(node.rect.width, node.rect.height);
-    const target = page.element;
-    if (target.moveBefore) target.moveBefore(node.element, null);
-    else target.append(node.element);
-    node.element.style.left = "0px";
-    node.element.style.top = "0px";
-    releaseNode(node);
-    node.page = page;
-    node.pageX = 0;
-    node.pageY = 0;
-    node.solo = true;
-    pages.get(page).add(node);
-    if (pages.has(previous) && !isPinned(previous)) {
-      unpin(previous);
-      previous.setDrawable(false, frameNumber);
-    }
-    if (wasLive) pickLive();
-  };
-  const attach = (node) => {
-    const slot = placeNode(node.element, node.rect);
-    node.page = slot.page;
-    node.pageX = slot.x;
-    node.pageY = slot.y;
-    node.slot = null;
-    node.thumb = null;
-    node.solo = false;
-    node.dirty = true;
-    pages.get(slot.page).add(node);
-  };
   return {
     ...base.api,
     mode: "gpu",
-    addNode(element, rect) {
-      styleNode(element);
-      element.style.pointerEvents = "none";
-      const node = {
-        element,
-        rect,
-        slotScale: 0,
-        thumb: null,
-        thumbStale: false,
-        thumbAt: -Infinity,
-        shown: 0,
-        shownFrame: -1,
-        targetScale: 0,
-        tiles: [],
-        preview: null,
-        previewRect: null,
-        previewScale: 0,
-        previewTarget: null,
-        previewTargetScale: 0,
-        changedAt: -Infinity,
-        refreshedAt: -Infinity,
-        wholeStale: false,
-        solo: false,
-        priority: 0
-      };
-      attach(node);
-      nodes.set(element, node);
-      schedule();
-    },
-    updateNode(element, rect) {
-      const node = nodes.get(element);
-      if (!node) return;
-      const resized = node.rect.width !== rect.width || node.rect.height !== rect.height;
-      node.rect = rect;
-      ringRects.clear();
-      if (resized) {
-        if (live === node) setLive(null);
-        releaseNode(node);
-        attach(node);
-      }
-      schedule();
-    },
-    removeNode(element) {
-      const node = nodes.get(element);
-      if (!node) return;
-      if (live === node) setLive(null);
-      if (lingering === node) lingering = null;
-      if (focused === node) focused = null;
-      transitioning.delete(node);
-      effects.delete(element);
-      selection.delete(element);
-      nodes.delete(element);
-      releaseNode(node);
-      element.remove();
-      schedule();
-    },
     getElementRect(element) {
       const rect = ringRect(element);
       return rect ? { ...rect } : null;
@@ -2550,8 +2820,7 @@ async function createGpuCanvas(host, options) {
       return new Promise((resolve, reject) => {
         captures.push({ node, scale, resolve, reject, tries: 0 });
         node.page.setDrawable(true, frameNumber);
-        awaitingPaint = true;
-        canvas.requestPaint();
+        requestPaint();
       });
     },
     setBackground(color) {
@@ -2567,7 +2836,7 @@ async function createGpuCanvas(host, options) {
       rasterCallsLastFrame: stats.rasterCallsLastFrame,
       rasterMs: stats.rasterMs,
       pages: pages.size,
-      drawablePages: [...pages.keys()].filter((page) => page.drawable).length,
+      drawablePages: [...pages.all()].filter((page) => page.drawable).length,
       atlasLayersUsed: atlas.usedLayers,
       frameMs: stats.frameMs,
       frames: stats.frames,
@@ -2575,26 +2844,17 @@ async function createGpuCanvas(host, options) {
       lostDetail: stats.lostDetail,
       thumbnailFill: atlas.pinnedFill,
       onThumbnail: stats.onThumbnail,
-      needs: stats.needs
+      needs: planner.needs
     }),
     destroy() {
       destroyed = true;
       cancelAnimationFrame(rafId);
       clearTimeout(settleTimer);
-      clearTimeout(lingerTimer);
-      clearTimeout(contentTimer);
-      clearTimeout(refreshTimer);
+      live.destroy();
+      planner.destroy();
       mutations.disconnect();
       document.fonts.removeEventListener("loadingdone", onFontsLoaded);
       canvas.removeEventListener("load", onResourceLoad, true);
-      surface.removeEventListener("pointermove", onPointerMove);
-      surface.removeEventListener("pointerleave", onPointerLeave);
-      surface.removeEventListener("pointerdown", onPointerDown, true);
-      surface.removeEventListener("click", onClick);
-      canvas.removeEventListener("focusin", onFocusIn);
-      canvas.removeEventListener("focusout", onFocusOut);
-      canvas.removeEventListener("transitionrun", onTransitionRun);
-      for (const type of USE_EVENTS) canvas.removeEventListener(type, onUse, true);
       resizeObserver.disconnect();
       canvas.onpaint = null;
       base.destroy();
@@ -2662,6 +2922,7 @@ var round = (rect) => ({
   width: Math.round(rect.width),
   height: Math.round(rect.height)
 });
+var MAX_CAPTURE_PX = 8192;
 function createAgentView(canvas) {
   const ids = /* @__PURE__ */ new WeakMap();
   const elements = /* @__PURE__ */ new Map();
@@ -2725,9 +2986,9 @@ function createAgentView(canvas) {
      * `scale` texels per world unit. GPU backend only.
      */
     async capture(target, { scale = 1, background } = {}) {
-      const area = typeof target === "object" && "width" in target ? target : this.rect(target);
+      const area = typeof target === "string" || target instanceof Element ? this.rect(target) : target;
       if (!area) throw new Error("Nothing to capture");
-      const fit = Math.min(scale, 8192 / area.width, 8192 / area.height);
+      const fit = Math.min(scale, MAX_CAPTURE_PX / area.width, MAX_CAPTURE_PX / area.height);
       const width = Math.max(1, Math.round(area.width * fit));
       const height = Math.max(1, Math.round(area.height * fit));
       const out = new OffscreenCanvas(width, height);
@@ -2742,7 +3003,13 @@ function createAgentView(canvas) {
         const rect = canvas.getNodeRect(node);
         const bitmap = new OffscreenCanvas(images[i].width, images[i].height);
         bitmap.getContext("2d").putImageData(images[i], 0, 0);
-        context.drawImage(bitmap, (rect.x - area.x) * fit, (rect.y - area.y) * fit);
+        context.drawImage(
+          bitmap,
+          (rect.x - area.x) * fit,
+          (rect.y - area.y) * fit,
+          rect.width * fit,
+          rect.height * fit
+        );
       });
       return context.getImageData(0, 0, width, height);
     }
@@ -2816,6 +3083,16 @@ function createLayers(canvas, pick) {
 
 // src/overlay.ts
 var HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+var HANDLE_ANCHORS = {
+  nw: { x: 0, y: 0 },
+  n: { x: 0.5, y: 0 },
+  ne: { x: 1, y: 0 },
+  e: { x: 1, y: 0.5 },
+  se: { x: 1, y: 1 },
+  s: { x: 0.5, y: 1 },
+  sw: { x: 0, y: 1 },
+  w: { x: 0, y: 0.5 }
+};
 var HANDLE_PX = 8;
 var CURSORS = {
   nw: "nwse-resize",
@@ -2844,7 +3121,7 @@ function createOverlay(surface, color) {
     inset: "0",
     overflow: "hidden",
     pointerEvents: "none",
-    zIndex: "2"
+    zIndex: SURFACE_Z.overlay
   });
   const make = (style) => {
     const element = document.createElement("div");
@@ -2910,12 +3187,11 @@ function createOverlay(surface, color) {
         }
         if (state.handles) {
           HANDLES.forEach((handle, i) => {
-            const fx = handle.includes("w") ? 0 : handle.includes("e") ? 1 : 0.5;
-            const fy = handle.includes("n") ? 0 : handle.includes("s") ? 1 : 0.5;
+            const anchor = HANDLE_ANCHORS[handle];
             place(
               handles[i],
-              rect.x + rect.width * fx - HANDLE_PX / 2,
-              rect.y + rect.height * fy - HANDLE_PX / 2
+              rect.x + rect.width * anchor.x - HANDLE_PX / 2,
+              rect.y + rect.height * anchor.y - HANDLE_PX / 2
             );
           });
         }
@@ -3002,7 +3278,7 @@ function guidesFor(rect, targets, edges) {
 }
 
 // src/editor.ts
-function createMarquee(canvas, color = DEFAULT_SELECTION_COLOR, select = (world) => canvas.getNodesIn(world)) {
+function createMarquee(canvas, color = DEFAULT_SELECTION_COLOR) {
   const box = document.createElement("div");
   Object.assign(box.style, {
     position: "absolute",
@@ -3010,11 +3286,11 @@ function createMarquee(canvas, color = DEFAULT_SELECTION_COLOR, select = (world)
     pointerEvents: "none",
     border: `1px solid ${color}`,
     background: `color-mix(in srgb, ${color} 12%, transparent)`,
-    zIndex: "1"
+    zIndex: SURFACE_Z.marquee
   });
   canvas.surface.append(box);
   return {
-    /** Spans the box from `a` to `b` (surface pixels) and selects what it covers. */
+    /** Spans the box from `a` to `b` (surface pixels) and returns the world rect it covers. */
     update(a, b) {
       const x = Math.min(a.x, b.x);
       const y = Math.min(a.y, b.y);
@@ -3028,13 +3304,11 @@ function createMarquee(canvas, color = DEFAULT_SELECTION_COLOR, select = (world)
         height: `${height}px`
       });
       const camera = canvas.getCamera();
-      const hits = select({
+      return {
         ...screenToWorld(camera, { x, y }),
         width: width / camera.zoom,
         height: height / camera.zoom
-      });
-      canvas.setSelection(hits);
-      return hits;
+      };
     },
     hide() {
       box.style.display = "none";
@@ -3067,11 +3341,7 @@ function bindEditor(canvas, options = {}) {
   const layers = createLayers(canvas, pick);
   const transforms = !!onTransform && trigger === "click";
   const overlay = createOverlay(surface, color);
-  let marqueeLayers = [];
-  const box = marquee ? createMarquee(canvas, color, (world) => {
-    marqueeLayers = layers.layersIn(scopes.at(-1) ?? null, world);
-    return marqueeLayers.flat();
-  }) : null;
+  const box = marquee ? createMarquee(canvas, color) : null;
   let selection = [];
   let scopes = [];
   let hovered = null;
@@ -3081,7 +3351,8 @@ function bindEditor(canvas, options = {}) {
   let swallowClick = false;
   let keepFocus = false;
   const commit = (next, nextScopes = scopes) => {
-    selection = next.filter((layer, i) => next.findIndex((other) => sameLayer(layer, other)) === i);
+    const seen = /* @__PURE__ */ new Set();
+    selection = next.filter((layer) => !seen.has(layer[0]) && !!seen.add(layer[0]));
     scopes = selection.length ? nextScopes : [];
     canvas.setSelection(selection.flat());
     onChange?.(selection);
@@ -3142,14 +3413,13 @@ function bindEditor(canvas, options = {}) {
     });
     if (selection.length || hovered || gesture) draw();
   };
-  const emit = (phase) => {
-    if (gesture?.kind !== "move" && gesture?.kind !== "resize") return;
+  const emit = (transform, phase) => {
     onTransform?.({
       phase,
-      kind: gesture.kind,
-      layers: gesture.layers,
-      from: gesture.from,
-      to: phase === "cancel" ? gesture.from : gesture.to
+      kind: transform.kind,
+      layers: transform.layers,
+      from: transform.from,
+      to: phase === "cancel" ? transform.from : transform.to
     });
   };
   const snapTargets = (moving) => {
@@ -3165,7 +3435,7 @@ function bindEditor(canvas, options = {}) {
     const from = selection.map((layer) => layerRect(canvas, layer));
     if (from.some((rect) => !rect)) return;
     const rects = from;
-    gesture = {
+    const transform = {
       kind: handle ? "resize" : "move",
       start,
       handle,
@@ -3176,8 +3446,9 @@ function bindEditor(canvas, options = {}) {
       targets: snapTargets(selection),
       guides: []
     };
+    gesture = transform;
     setHovered(null);
-    emit("start");
+    emit(transform, "start");
   };
   const updateTransform = (point, keepRatio) => {
     if (gesture?.kind !== "move" && gesture?.kind !== "resize") return;
@@ -3198,27 +3469,28 @@ function bindEditor(canvas, options = {}) {
       let top = bounds.y;
       let right = bounds.x + bounds.width;
       let bottom = bounds.y + bounds.height;
-      if (handle.includes("w")) left = Math.min(left + dx, right - 1);
-      if (handle.includes("e")) right = Math.max(right + dx, left + 1);
-      if (handle.includes("n")) top = Math.min(top + dy, bottom - 1);
-      if (handle.includes("s")) bottom = Math.max(bottom + dy, top + 1);
+      const anchor = HANDLE_ANCHORS[handle];
+      if (anchor.x === 0) left = Math.min(left + dx, right - 1);
+      if (anchor.x === 1) right = Math.max(right + dx, left + 1);
+      if (anchor.y === 0) top = Math.min(top + dy, bottom - 1);
+      if (anchor.y === 1) bottom = Math.max(bottom + dy, top + 1);
       next = { x: left, y: top, width: right - left, height: bottom - top };
-      const corner = handle.length === 2;
+      const corner = anchor.x !== 0.5 && anchor.y !== 0.5;
       if (keepRatio && corner) {
         const scale = Math.max(next.width / bounds.width, next.height / bounds.height);
         const width = bounds.width * scale;
         const height = bounds.height * scale;
         next = {
-          x: handle.includes("w") ? right - width : left,
-          y: handle.includes("n") ? bottom - height : top,
+          x: anchor.x === 0 ? right - width : left,
+          y: anchor.y === 0 ? bottom - height : top,
           width,
           height
         };
         gesture.guides = [];
       } else {
         const edges = {
-          x: handle.includes("w") ? [0] : handle.includes("e") ? [1] : [],
-          y: handle.includes("n") ? [0] : handle.includes("s") ? [1] : []
+          x: anchor.x === 0.5 ? [] : [anchor.x],
+          y: anchor.y === 0.5 ? [] : [anchor.y]
         };
         const snapped = snapRect(next, gesture.targets, threshold, edges);
         if (edges.x[0] === 0)
@@ -3238,7 +3510,7 @@ function bindEditor(canvas, options = {}) {
       width: rect.width * sx,
       height: rect.height * sy
     }));
-    emit("move");
+    emit(gesture, "move");
     draw();
   };
   const onPointerDown = (event) => {
@@ -3267,7 +3539,7 @@ function bindEditor(canvas, options = {}) {
     if (!target) {
       if (event.shiftKey && box) {
         take();
-        gesture = { kind: "marquee", start: point };
+        gesture = { kind: "marquee", start: point, scopes };
         return;
       }
       if (selection.length) commit([], []);
@@ -3291,35 +3563,27 @@ function bindEditor(canvas, options = {}) {
       if (Math.hypot(pointer.x - gesture.start.x, pointer.y - gesture.start.y) <= CLICK_SLOP)
         return;
       if (gesture.inside || trigger !== "click" && box) {
-        gesture = { kind: "marquee", start: gesture.start };
+        gesture = { kind: "marquee", start: gesture.start, scopes };
       } else if (trigger === "click" && transforms) beginTransform(gesture.start, null);
       else return;
     }
     if (gesture?.kind === "marquee") {
-      box.update(gesture.start, pointer);
-      selection = marqueeLayers;
-      onChange?.(selection);
-      draw();
+      const world = box.update(gesture.start, pointer);
+      commit(layers.layersIn(gesture.scopes.at(-1) ?? null, world), gesture.scopes);
     } else updateTransform(pointer, event.shiftKey);
   };
   const onPointerUp = () => {
     const done = gesture;
     gesture = null;
     if (!done) return;
-    if (done.kind === "marquee") {
-      box.hide();
-      commit(marqueeLayers);
-    } else if (done.kind === "press") {
+    if (done.kind === "marquee") box.hide();
+    else if (done.kind === "press") {
       const { layer, scopes: inside } = done.target;
       if (!done.additive) commit([layer], inside);
       else if (layerIn(layer, selection))
         commit(selection.filter((other) => !sameLayer(other, layer)));
       else commit([...selection, layer], inside);
-    } else {
-      gesture = done;
-      emit("end");
-      gesture = null;
-    }
+    } else emit(done, "end");
     updateHover();
     draw();
   };
@@ -3383,7 +3647,7 @@ function bindEditor(canvas, options = {}) {
     }
     if (event.key === "Escape") {
       if (gesture?.kind === "move" || gesture?.kind === "resize") {
-        emit("cancel");
+        emit(gesture, "cancel");
         gesture = null;
       } else if (scopes.length) up();
       else if (selection.length) commit([], []);
@@ -3466,7 +3730,7 @@ function createMarks(canvas, { color = DEFAULT_SELECTION_COLOR } = {}) {
     inset: "0",
     overflow: "hidden",
     pointerEvents: "none",
-    zIndex: "1"
+    zIndex: SURFACE_Z.marks
   });
   const svg = document.createElementNS(SVG, "svg");
   Object.assign(svg.style, { position: "absolute", inset: "0", width: "100%", height: "100%" });
@@ -3518,21 +3782,22 @@ function createMarks(canvas, { color = DEFAULT_SELECTION_COLOR } = {}) {
     root.append(element);
     return element;
   };
-  const marks = /* @__PURE__ */ new Set();
+  const marks = /* @__PURE__ */ new Map();
   let frame = 0;
   const loop = () => {
     frame = marks.size ? requestAnimationFrame(loop) : 0;
-    for (const draw of marks) draw();
+    for (const draw of marks.keys()) draw();
   };
   const add = (draw, remove) => {
-    marks.add(draw);
-    if (!frame) frame = requestAnimationFrame(loop);
-    return {
+    const mark = {
       remove() {
         marks.delete(draw);
         remove();
       }
     };
+    marks.set(draw, mark.remove);
+    if (!frame) frame = requestAnimationFrame(loop);
+    return mark;
   };
   return {
     /** An arrow from one element (or world point) to another, with an optional label. */
@@ -3683,9 +3948,7 @@ function createMarks(canvas, { color = DEFAULT_SELECTION_COLOR } = {}) {
     },
     /** Removes every mark. */
     clear() {
-      for (const draw of [...marks]) marks.delete(draw);
-      root.querySelectorAll(":scope > div").forEach((element) => element.remove());
-      svg.querySelectorAll(":scope > path").forEach((element) => element.remove());
+      for (const remove of [...marks.values()]) remove();
     },
     destroy() {
       cancelAnimationFrame(frame);
@@ -3754,6 +4017,7 @@ function recordFilmstrip(canvas, node, {
   const frames = [];
   let stopped = false;
   let timer = 0;
+  let warned = false;
   const take = () => {
     canvas.snapshot(node, { scale }).then((image) => {
       if (stopped) return;
@@ -3761,7 +4025,10 @@ function recordFilmstrip(canvas, node, {
       frames.push(frame);
       if (frames.length > max) frames.shift();
       onFrame?.(frame, frames);
-    }).catch(() => {
+    }).catch((error) => {
+      if (warned) return;
+      warned = true;
+      console.warn("gpucanvas: filmstrip snapshot failed", error);
     });
   };
   const observer = new MutationObserver((records) => {
@@ -3834,6 +4101,7 @@ async function createGpuCanvas2(host, options = {}) {
     return await createGpuCanvas(host, options);
   } catch (error) {
     if (mode === "gpu") throw error;
+    console.warn("gpucanvas: the GPU backend failed to start, using DOM", error);
     return createDomCanvas(host, options);
   }
 }
@@ -3858,4 +4126,4 @@ export {
   swapNodes,
   createGpuCanvas2 as createGpuCanvas
 };
-//# sourceMappingURL=chunk-IJ3R6X75.js.map
+//# sourceMappingURL=chunk-IIRGNX76.js.map