gpucanvas 0.4.3 → 0.4.5

package/dist/{chunk-2EDYGRFR.js → chunk-IIRGNX76.js}

@@ -7,6 +7,11 @@ var worldToScreen = (camera, point) => ({
   x: (point.x - camera.x) * camera.zoom,
   y: (point.y - camera.y) * camera.zoom
 });
+var rectToScreen = (camera, rect) => ({
+  ...worldToScreen(camera, rect),
+  width: rect.width * camera.zoom,
+  height: rect.height * camera.zoom
+});
 var MIN_ZOOM = 0.02;
 var MAX_ZOOM = 16;
 var clampZoom = (zoom) => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom));
@@ -24,8 +29,7 @@ function visibleWorldRect(camera, viewportWidth, viewportHeight) {
     height: viewportHeight / camera.zoom
   };
 }
-var containsPoint = (rect, point) => point.x >= rect.x && point.x < rect.x + rect.width && point.y >= rect.y && point.y < rect.y + rect.height;
-var intersects = (a, b) => a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;
+var viewOf = (canvas) => visibleWorldRect(canvas.getCamera(), canvas.surface.clientWidth, canvas.surface.clientHeight);
 function fitCamera(bounds, viewportWidth, viewportHeight, padding = 40) {
   const zoom = clampZoom(
     Math.min(
@@ -39,14 +43,61 @@ function fitCamera(bounds, viewportWidth, viewportHeight, padding = 40) {
     zoom
   };
 }
+
+// src/elements.ts
+function rectInNode(node, nodeRect, element) {
+  if (element === node) return { ...nodeRect };
+  const outer = node.getBoundingClientRect();
+  const inner = element.getBoundingClientRect();
+  const scale = outer.width > 0 ? nodeRect.width / outer.width : 1;
+  return {
+    x: nodeRect.x + (inner.left - outer.left) * scale,
+    y: nodeRect.y + (inner.top - outer.top) * scale,
+    width: inner.width * scale,
+    height: inner.height * scale
+  };
+}
+function elementInNode(node, nodeRect, point) {
+  const outer = node.getBoundingClientRect();
+  const scale = nodeRect.width > 0 ? outer.width / nodeRect.width : 1;
+  const x = outer.left + (point.x - nodeRect.x) * scale;
+  const y = outer.top + (point.y - nodeRect.y) * scale;
+  let hit = node;
+  descend: for (; ; ) {
+    for (let child = hit.lastElementChild; child; child = child.previousElementSibling) {
+      const box = child.getBoundingClientRect();
+      if (box.width > 0 && box.height > 0 && x >= box.left && x < box.right && y >= box.top && y < box.bottom) {
+        hit = child;
+        continue descend;
+      }
+    }
+    return hit;
+  }
+}
+function nodeOfElement(nodes, element) {
+  for (let at = element; at; at = at.parentElement) {
+    if (nodes.has(at)) return at;
+  }
+  return null;
+}
+
+// src/input.ts
+var markSurface = (element) => {
+  element.dataset.gpucanvasSurface = "";
+};
+var isSurface = (target) => target instanceof Element && target.hasAttribute("data-gpucanvas-surface");
+var pointIn = (element, event) => {
+  const bounds = element.getBoundingClientRect();
+  return { x: event.clientX - bounds.left, y: event.clientY - bounds.top };
+};
 function bindCameraInput(element, getCamera, onChange) {
   const onWheel = (event) => {
     event.preventDefault();
-    const bounds = element.getBoundingClientRect();
     const camera = getCamera();
     if (event.ctrlKey || event.metaKey) {
       const factor = Math.exp(-event.deltaY * (event.deltaMode === 1 ? 0.05 : 0.01));
-      onChange(zoomAt(camera, event.clientX - bounds.left, event.clientY - bounds.top, factor));
+      const at = pointIn(element, event);
+      onChange(zoomAt(camera, at.x, at.y, factor));
     } else {
       onChange({
         ...camera,
@@ -76,8 +127,7 @@ function bindCameraInput(element, getCamera, onChange) {
       }
     }
     if (event.button !== 0 && event.button !== 1 || event.shiftKey) return;
-    if (event.target !== element && !event.target.hasAttribute?.("data-gpucanvas-surface"))
-      return;
+    if (!isSurface(event.target)) return;
     drag = { pointerId: event.pointerId, x: event.clientX, y: event.clientY };
     element.setPointerCapture(event.pointerId);
   };
@@ -89,13 +139,8 @@ function bindCameraInput(element, getCamera, onChange) {
       touch.y = event.clientY;
       const after = pinch();
       if (!before.distance) return;
-      const bounds = element.getBoundingClientRect();
-      const zoomed = zoomAt(
-        getCamera(),
-        before.x - bounds.left,
-        before.y - bounds.top,
-        after.distance / before.distance
-      );
+      const at = pointIn(element, { clientX: before.x, clientY: before.y });
+      const zoomed = zoomAt(getCamera(), at.x, at.y, after.distance / before.distance);
       onChange({
         ...zoomed,
         x: zoomed.x - (after.x - before.x) / zoomed.zoom,
@@ -135,6 +180,130 @@ function bindCameraInput(element, getCamera, onChange) {
   };
 }
 
+// src/rect.ts
+var center = (rect) => ({
+  x: rect.x + rect.width / 2,
+  y: rect.y + rect.height / 2
+});
+var containsPoint = (rect, point) => point.x >= rect.x && point.x < rect.x + rect.width && point.y >= rect.y && point.y < rect.y + rect.height;
+var intersects = (a, b) => a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;
+var intersection = (a, b) => {
+  const x = Math.max(a.x, b.x);
+  const y = Math.max(a.y, b.y);
+  const right = Math.min(a.x + a.width, b.x + b.width);
+  const bottom = Math.min(a.y + a.height, b.y + b.height);
+  return right > x && bottom > y ? { x, y, width: right - x, height: bottom - y } : null;
+};
+var contains = (outer, inner) => inner.x >= outer.x && inner.y >= outer.y && inner.x + inner.width <= outer.x + outer.width && inner.y + inner.height <= outer.y + outer.height;
+function unionOf(rects) {
+  let only = null;
+  let count = 0;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const rect of rects) {
+    if (!rect) continue;
+    only = rect;
+    count++;
+    minX = Math.min(minX, rect.x);
+    minY = Math.min(minY, rect.y);
+    maxX = Math.max(maxX, rect.x + rect.width);
+    maxY = Math.max(maxY, rect.y + rect.height);
+  }
+  if (count < 2) return only;
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+var sameRect = (a, b) => !!a && !!b && Math.abs(a.x - b.x) < 0.5 && Math.abs(a.y - b.y) < 0.5 && Math.abs(a.width - b.width) < 0.5 && Math.abs(a.height - b.height) < 0.5;
+
+// 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, hooks) {
+  const surface = document.createElement("div");
+  markSurface(surface);
+  Object.assign(surface.style, {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    touchAction: "none"
+  });
+  host.append(surface);
+  const nodes = /* @__PURE__ */ new Map();
+  let camera = options.camera ?? DEFAULT_CAMERA;
+  const setCamera = (next) => {
+    camera = next;
+    onCamera(camera);
+    options.onCameraChange?.(camera);
+  };
+  const unbindInput = bindCameraInput(surface, () => camera, setCamera);
+  const nodeAt = (point) => {
+    let top = null;
+    for (const node of nodes.values()) if (containsPoint(node.rect, point)) top = node;
+    return top;
+  };
+  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;
+    },
+    getNodesIn(rect) {
+      const hits = [];
+      for (const node of nodes.values()) if (intersects(node.rect, rect)) hits.push(node.element);
+      return hits;
+    },
+    getNodeOf: (element) => nodeOfElement(nodes, element),
+    getElementAt(point) {
+      const top = nodeAt(point);
+      return top ? elementInNode(top.element, top.rect, point) : null;
+    },
+    getCamera: () => camera,
+    setCamera,
+    screenToWorld: (point) => screenToWorld(camera, point),
+    worldToScreen: (point) => worldToScreen(camera, point),
+    fit(padding) {
+      const bounds = unionOf([...nodes.values()].map((node) => node.rect));
+      if (bounds) setCamera(fitCamera(bounds, surface.clientWidth, surface.clientHeight, padding));
+    }
+  };
+  return {
+    surface,
+    nodes,
+    camera: () => camera,
+    view: () => viewOf(api),
+    nodeAt,
+    api,
+    destroy() {
+      unbindInput();
+      surface.remove();
+    }
+  };
+}
+
 // src/effects.ts
 var defineEffect = (definition) => Object.freeze({
   animated: false,
@@ -518,84 +687,43 @@ var EFFECTS = {
   grayscale
 };
 
-// src/elements.ts
-function rectInNode(node, nodeRect, element) {
-  if (element === node) return { ...nodeRect };
-  const outer = node.getBoundingClientRect();
-  const inner = element.getBoundingClientRect();
-  const scale = outer.width > 0 ? nodeRect.width / outer.width : 1;
-  return {
-    x: nodeRect.x + (inner.left - outer.left) * scale,
-    y: nodeRect.y + (inner.top - outer.top) * scale,
-    width: inner.width * scale,
-    height: inner.height * scale
-  };
-}
-function elementInNode(node, nodeRect, point) {
-  const outer = node.getBoundingClientRect();
-  const scale = nodeRect.width > 0 ? outer.width / nodeRect.width : 1;
-  const x = outer.left + (point.x - nodeRect.x) * scale;
-  const y = outer.top + (point.y - nodeRect.y) * scale;
-  let hit = node;
-  descend: for (; ; ) {
-    for (let child = hit.lastElementChild; child; child = child.previousElementSibling) {
-      const box = child.getBoundingClientRect();
-      if (box.width > 0 && box.height > 0 && x >= box.left && x < box.right && y >= box.top && y < box.bottom) {
-        hit = child;
-        continue descend;
-      }
-    }
-    return hit;
-  }
-}
-function nodeOfElement(nodes, element) {
-  for (let at = element; at; at = at.parentElement) {
-    if (nodes.has(at)) return at;
-  }
-  return null;
-}
-
-// src/node-style.ts
-function applyNodeSize(element, rect) {
-  element.style.width = `${rect.width}px`;
-  element.style.height = `${rect.height}px`;
-}
-function applyNodeBase(element) {
-  element.style.boxSizing = "border-box";
-  element.style.contain = "strict";
-  element.style.overflow = "hidden";
-}
-function boundsOf(rects) {
-  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-  for (const rect of rects) {
-    minX = Math.min(minX, rect.x);
-    minY = Math.min(minY, rect.y);
-    maxX = Math.max(maxX, rect.x + rect.width);
-    maxY = Math.max(maxY, rect.y + rect.height);
-  }
-  return minX === Infinity ? null : { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
-}
-
-// src/types.ts
-var DEFAULT_CAMERA = { x: 0, y: 0, zoom: 1 };
-var DEFAULT_SELECTION_COLOR = "#4f8cff";
-var SELECTION_WIDTH = 2;
-var HOVER_WIDTH = 1;
-
 // src/dom-backend.ts
 function createDomCanvas(host, options) {
-  const surface = document.createElement("div");
-  surface.dataset.gpucanvasSurface = "";
-  Object.assign(surface.style, {
-    position: "relative",
-    width: "100%",
-    height: "100%",
-    overflow: "hidden",
-    touchAction: "none",
-    background: options.background ?? "transparent"
+  let frameMs = 0;
+  const apply = (camera) => {
+    const start = performance.now();
+    world.style.transform = `scale(${camera.zoom}) translate(${-camera.x}px, ${-camera.y}px)`;
+    world.style.setProperty("--gpucanvas-zoom", String(camera.zoom));
+    frameMs = performance.now() - start;
+  };
+  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");
-  world.dataset.gpucanvasSurface = "";
+  markSurface(world);
   Object.assign(world.style, {
     position: "absolute",
     left: "0",
@@ -607,8 +735,6 @@ function createDomCanvas(host, options) {
   Object.assign(overlay.style, { position: "absolute", left: "0", top: "0", zIndex: "1" });
   world.append(overlay);
   surface.append(world);
-  host.append(surface);
-  const nodes = /* @__PURE__ */ new Map();
   const ring = (color, width) => `calc(${width}px / var(--gpucanvas-zoom)) solid ${color}`;
   const selectionColor = options.selectionColor ?? DEFAULT_SELECTION_COLOR;
   const selectionRing = ring(selectionColor, SELECTION_WIDTH);
@@ -619,7 +745,7 @@ function createDomCanvas(host, options) {
   const boxes = /* @__PURE__ */ new Map();
   const elementRect = (element) => {
     const node = element.isConnected ? nodeOfElement(nodes, element) : null;
-    return node ? rectInNode(node, nodes.get(node), element) : null;
+    return node ? rectInNode(node, nodes.get(node).rect, element) : null;
   };
   let boxFrame = 0;
   const placeBoxes = () => {
@@ -693,55 +819,11 @@ function createDomCanvas(host, options) {
       element.animate(keyframes, { duration: period * 1e3, iterations: Infinity })
     );
   };
-  let camera = options.camera ?? DEFAULT_CAMERA;
-  let frameMs = 0;
-  const apply = () => {
-    const start = performance.now();
-    world.style.transform = `scale(${camera.zoom}) translate(${-camera.x}px, ${-camera.y}px)`;
-    world.style.setProperty("--gpucanvas-zoom", String(camera.zoom));
-    frameMs = performance.now() - start;
-  };
-  const setCamera = (next) => {
-    camera = next;
-    apply();
-    options.onCameraChange?.(camera);
-  };
-  const unbindInput = bindCameraInput(surface, () => camera, setCamera);
-  apply();
+  apply(base.camera());
   return {
+    ...base.api,
     mode: "dom",
-    surface,
-    addNode(element, rect) {
-      applyNodeBase(element);
-      element.style.position = "absolute";
-      nodes.set(element, rect);
-      this.updateNode(element, rect);
-      world.append(element);
-    },
-    updateNode(element, rect) {
-      nodes.set(element, rect);
-      element.style.left = `${rect.x}px`;
-      element.style.top = `${rect.y}px`;
-      applyNodeSize(element, rect);
-    },
-    removeNode(element) {
-      clearEffect(element);
-      nodes.delete(element);
-      outlinedNodes.delete(element);
-      element.style.outline = "";
-      element.remove();
-    },
-    getNodeRect: (element) => nodes.get(element) ?? null,
-    getNodesIn(rect) {
-      return [...nodes].filter(([, node]) => intersects(node, rect)).map(([element]) => element);
-    },
-    getNodeOf: (element) => nodeOfElement(nodes, element),
     getElementRect: elementRect,
-    getElementAt(point) {
-      let top = null;
-      for (const [element, rect] of nodes) if (containsPoint(rect, point)) top = element;
-      return top ? elementInNode(top, nodes.get(top), point) : null;
-    },
     setSelection(elements) {
       selection = new Set(elements);
       drawOutlines();
@@ -754,10 +836,6 @@ function createDomCanvas(host, options) {
     setEffect(element, effect, params) {
       if (nodes.has(element)) applyEffect(element, effect, params);
     },
-    getCamera: () => camera,
-    setCamera,
-    screenToWorld: (point) => screenToWorld(camera, point),
-    worldToScreen: (point) => worldToScreen(camera, point),
     // The browser repaints DOM nodes itself.
     invalidate() {
     },
@@ -765,14 +843,10 @@ function createDomCanvas(host, options) {
     setBackground(color) {
       surface.style.background = color;
     },
-    fit(padding) {
-      const bounds = boundsOf(nodes.values());
-      if (bounds) setCamera(fitCamera(bounds, surface.clientWidth, surface.clientHeight, padding));
-    },
     getStats() {
-      const view = visibleWorldRect(camera, surface.clientWidth, surface.clientHeight);
+      const view = base.view();
       let visible = 0;
-      for (const rect of nodes.values()) if (intersects(rect, view)) visible++;
+      for (const node of nodes.values()) if (intersects(node.rect, view)) visible++;
       return {
         mode: "dom",
         nodes: nodes.size,
@@ -786,28 +860,62 @@ function createDomCanvas(host, options) {
     },
     destroy() {
       cancelAnimationFrame(boxFrame);
-      unbindInput();
-      surface.remove();
+      base.destroy();
     }
   };
 }
 
-// src/atlas.ts
-var PADDING = 1;
-var Atlas = class {
-  constructor(device, size, layerCount) {
-    this.device = device;
-    this.size = size;
-    this.texture = device.createTexture({
-      label: "gpucanvas atlas",
-      size: [size, size, layerCount],
-      format: "rgba8unorm",
-      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+// src/shelves.ts
+var Shelves = class {
+  constructor(width, height, tolerance) {
+    this.width = width;
+    this.height = height;
+    this.tolerance = tolerance;
+  }
+  width;
+  height;
+  tolerance;
+  shelves = [];
+  /** Height taken by rows so far. */
+  filled = 0;
+  /** Top left corner of a free `w` x `h` box, or null when it does not fit. */
+  place(w, h) {
+    if (w > this.width || h > this.height) return null;
+    let shelf = this.shelves.find(
+      (candidate) => candidate.height >= h && candidate.height <= h * this.tolerance && candidate.x + w <= this.width
+    );
+    if (!shelf) {
+      if (this.filled + h > this.height) return null;
+      shelf = { x: 0, y: this.filled, height: h };
+      this.shelves.push(shelf);
+      this.filled += h;
+    }
+    const at = { x: shelf.x, y: shelf.y };
+    shelf.x += w;
+    return at;
+  }
+  clear() {
+    this.shelves = [];
+    this.filled = 0;
+  }
+};
+
+// src/atlas.ts
+var PADDING = 1;
+var Atlas = class {
+  constructor(device, size, layerCount, keep) {
+    this.device = device;
+    this.keep = keep;
+    this.size = size;
+    this.texture = device.createTexture({
+      label: "gpucanvas atlas",
+      size: [size, size, layerCount],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
     });
     this.view = this.texture.createView({ dimension: "2d-array" });
     this.layers = Array.from({ length: layerCount }, () => ({
-      shelves: [],
-      nextY: 0,
+      shelves: new Shelves(size, size, 1.5),
       generation: 0,
       lastUsed: -1,
       lastAllocated: -1
@@ -815,25 +923,21 @@ var Atlas = class {
     this.spare = layerCount - 1;
   }
   device;
+  keep;
   texture;
   view;
   size;
-  /** Slots to rescue when their layer is recycled, most important first. */
-  keep = () => [];
   layers;
   spare;
   frame = 0;
   /** The layer `allocatePinned` fills; it is never recycled. */
   pinned = 0;
-  get layerCount() {
-    return this.layers.length;
-  }
   get usedLayers() {
-    return this.layers.filter((layer, index) => index !== this.spare && layer.nextY > 0).length;
+    return this.layers.filter((layer, index) => index !== this.spare && layer.shelves.filled > 0).length;
   }
   /** How much of the pinned layer is taken, 0 to 1. */
   get pinnedFill() {
-    return this.layers[this.pinned].nextY / this.size;
+    return this.layers[this.pinned].shelves.filled / this.size;
   }
   nextFrame() {
     this.frame++;
@@ -909,32 +1013,23 @@ var Atlas = class {
   }
   allocateIn(index, w, h) {
     const layer = this.layers[index];
-    let shelf = layer.shelves.find(
-      (candidate) => candidate.height >= h && candidate.height <= h * 1.5 && candidate.x + w <= this.size
-    );
-    if (!shelf) {
-      if (layer.nextY + h > this.size) return null;
-      shelf = { y: layer.nextY, height: h, x: 0 };
-      layer.shelves.push(shelf);
-      layer.nextY += h;
-    }
+    const at = layer.shelves.place(w, h);
+    if (!at) return null;
     const slot = {
       layer: index,
-      x: shelf.x,
-      y: shelf.y,
+      x: at.x,
+      y: at.y,
       width: w - PADDING,
       height: h - PADDING,
       generation: layer.generation
     };
-    shelf.x += w;
     layer.lastUsed = this.frame;
     layer.lastAllocated = this.frame;
     return slot;
   }
   evict(index) {
     const layer = this.layers[index];
-    layer.shelves = [];
-    layer.nextY = 0;
+    layer.shelves.clear();
     layer.generation++;
   }
   destroy() {
@@ -942,353 +1037,354 @@ var Atlas = class {
   }
 };
 
-// src/composite-shader.ts
-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
+// 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;
 }
-
-@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 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;
 }
-
-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 setThumb(node, slot, now) {
+  node.thumb = slot;
+  node.thumbStale = false;
+  node.thumbAt = now;
 }
-
-@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 > 1.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);
+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;
   }
-  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;
+  node.dirty = false;
+  node.wholeStale = false;
 }
-`
-);
-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 > 1.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);
+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;
+
+// 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);
   }
-  if (in.info.y > 0.5) {
-    return view.placeholder;
+  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);
   }
-  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);
+  /** Nodes kept drawable and redrawn on every paint: under the pointer, focused, transitioning. */
+  held() {
+    return [this.current, this.lingering, this.focused, ...this.transitioning.keys()];
+  }
+  /** 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) {
-    this.device = device;
-    this.context = context;
-    this.atlas = atlas;
-    this.background = background;
-    this.placeholder = placeholder;
-    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, format)
-    );
-    this.format = format;
-    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();
+  /**
+   * 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();
+    }
   }
-  device;
-  context;
-  atlas;
-  background;
-  placeholder;
-  instances = new Float32Array(FLOATS_PER_INSTANCE * 4096);
-  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();
-  /** Called when an effect pipeline is ready, so the caller can draw it. */
-  onEffectReady = () => {
-  };
-  format;
-  pipelineDescriptor(label, code, format) {
-    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,
-            // 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),
-        this.format
-      )
-    ).then((pipeline) => {
-      this.effects.set(effect, pipeline);
-      this.onEffectReady();
-    }).catch((error) => console.error(`[gpucanvas] effect "${effect.name}" failed`, error));
-    return false;
+  /** 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();
   }
-  /** Grows the CPU and GPU instance storage to hold at least `count` instances. */
-  reserve(count) {
-    const floats = count * FLOATS_PER_INSTANCE;
-    if (this.instances.length >= floats) return;
-    this.instances = new Float32Array(Math.max(floats, this.instances.length * 2));
-    this.instanceBuffer.destroy();
-    this.instanceBuffer = this.createInstanceBuffer();
+  /** 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();
   }
-  draw(camera, cssWidth, cssHeight, dpr, count, runs, effects) {
-    const { device } = 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.length ? runs : [{ effect: null, start: 0, count }]) {
-        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()]);
+  /** 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);
   }
   destroy() {
-    this.instanceBuffer.destroy();
-    this.uniforms.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);
   }
-  createInstanceBuffer() {
-    return this.device.createBuffer({
-      label: "gpucanvas instances",
-      size: this.instances.byteLength,
-      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
-    });
+  /** A node no longer held: redrawn once as it rests, its page released. */
+  letGo(node) {
+    node.dirty = true;
+    this.unpin(node.page);
   }
+  nodeOf(target) {
+    return nodeOf(this.o.nodes, target);
+  }
+  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;
+    }
+    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
@@ -1297,21 +1393,19 @@ var Page = class {
   element;
   width;
   height;
-  /** Nodes currently placed on this page. */
-  count = 0;
   /** Has the `drawable` attribute and is rendered; parked pages use `content-visibility: hidden`. */
   drawable = false;
   /** Frame in which the page became drawable. Its snapshot exists from that frame's paint on. */
   promotedFrame = -1;
-  /** Kept drawable for the live (hit-testable) or focused node. */
-  pinned = false;
   /** Registered for hit testing with `updateElementGeometry`. */
   registered = false;
-  shelves = [];
-  nextY = 0;
+  /** 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;
     this.height = height;
+    this.shelves = new Shelves(width + GAP, height + GAP, 1.25);
     this.element = document.createElement("div");
     this.element.dataset.gpucanvasPage = "";
     Object.assign(this.element.style, {
@@ -1330,25 +1424,8 @@ var Page = class {
   }
   /** Reserves a spot for a `width` x `height` node, or returns null when the page is full. */
   place(width, height) {
-    const w = Math.ceil(width) + GAP;
-    const h = Math.ceil(height) + GAP;
-    if (w > this.width + GAP || h > this.height + GAP) return null;
-    let shelf = this.shelves.find(
-      (candidate) => candidate.height >= h && candidate.height <= h * 1.25 && candidate.x + w <= this.width + GAP
-    );
-    if (!shelf) {
-      if (this.nextY + h > this.height + GAP) return null;
-      shelf = { y: this.nextY, height: h, x: 0 };
-      this.shelves.push(shelf);
-      this.nextY += h;
-    }
-    const slot = { page: this, x: shelf.x, y: shelf.y };
-    shelf.x += w;
-    this.count++;
-    return slot;
-  }
-  release() {
-    this.count--;
+    const at = this.shelves.place(Math.ceil(width) + GAP, Math.ceil(height) + GAP);
+    return at && { page: this, ...at };
   }
   setDrawable(drawable, frame) {
     if (this.drawable === drawable) return;
@@ -1366,229 +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 right = (rect) => rect.x + rect.width;
-var bottom = (rect) => rect.y + rect.height;
-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 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));
 }
-var intersection = (a, b) => {
-  const x = Math.max(a.x, b.x);
-  const y = Math.max(a.y, b.y);
-  const right2 = Math.min(a.x + a.width, b.x + b.width);
-  const bottom2 = Math.min(a.y + a.height, b.y + b.height);
-  return right2 > x && bottom2 > y ? { x, y, width: right2 - x, height: bottom2 - y } : null;
+var distanceToCenter = (rect, view) => {
+  const a = center(rect);
+  const b = center(view);
+  return Math.hypot(a.x - b.x, a.y - b.y);
 };
-var contains = (outer, inner) => inner.x >= outer.x && inner.y >= outer.y && inner.x + inner.width <= outer.x + outer.width && inner.y + inner.height <= outer.y + outer.height;
-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) => Math.hypot(
-  rect.x + rect.width / 2 - (view.x + view.width / 2),
-  rect.y + rect.height / 2 - (view.y + view.height / 2)
-);
-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 surface = document.createElement("div");
-  surface.dataset.gpucanvasSurface = "";
-  Object.assign(surface.style, {
-    position: "relative",
-    width: "100%",
-    height: "100%",
-    overflow: "hidden",
-    touchAction: "none"
-  });
-  const canvas = document.createElement("canvas");
-  canvas.setAttribute("content", "drawable");
-  canvas.dataset.gpucanvasSurface = "";
-  Object.assign(canvas.style, { display: "block", width: "100%", height: "100%" });
-  surface.append(canvas);
-  host.append(surface);
-  const context = canvas.getContext("webgpu");
-  const format = navigator.gpu.getPreferredCanvasFormat();
-  context.configure({ device, format, alphaMode: "opaque" });
-  const atlasSize = Math.min(options.atlasSize ?? 4096, device.limits.maxTextureDimension2D);
-  const atlas = new Atlas(
-    device,
-    atlasSize,
-    Math.min(options.atlasLayers ?? 5, device.limits.maxTextureArrayLayers)
-  );
-  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")
-  );
-  const selectionColor = premultiplied(
-    cssColorToRgba(options.selectionColor ?? DEFAULT_SELECTION_COLOR)
-  );
-  const hoverColor = options.hoverColor ? premultiplied(cssColorToRgba(options.hoverColor)) : selectionColor;
-  const nodes = /* @__PURE__ */ new Map();
-  const effects = /* @__PURE__ */ new Map();
-  const startedAt = performance.now();
-  const FAR_AWAY = { x: -1e7, y: -1e7 };
-  renderer.onEffectReady = () => schedule();
-  const runs = [];
-  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();
-  atlas.keep = 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 pageByElement = /* @__PURE__ */ new Map();
-  let openPage = null;
-  let camera = options.camera ?? DEFAULT_CAMERA;
-  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 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 isPinned = (page) => captures.some((capture) => capture.node.page === page) || live?.page === page || lingering?.page === page || focused?.page === page || [...transitioning.keys()].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 refreshWait = (node, now) => Math.max(node.rect.width, node.rect.height) * camera.zoom < SMALL_NODE_PX ? 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) => {
+var Planner = class {
+  constructor(atlas, lift, schedule) {
+    this.atlas = atlas;
+    this.lift = lift;
+    this.schedule = schedule;
+  }
+  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(
@@ -1599,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;
@@ -1616,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);
@@ -1636,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));
@@ -1647,19 +1692,19 @@ 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 = [];
     const first = (edge, origin) => Math.floor((edge - origin) / size);
-    for (let row = first(shown.y, node.rect.y); row <= first(bottom(shown) - 1e-6, node.rect.y); row++) {
-      for (let column = first(shown.x, node.rect.x); column <= first(right(shown) - 1e-6, node.rect.x); column++) {
+    for (let row = first(shown.y, node.rect.y); row <= first(shown.y + shown.height - 1e-6, node.rect.y); row++) {
+      for (let column = first(shown.x, node.rect.x); column <= first(shown.x + shown.width - 1e-6, node.rect.x); column++) {
         if (current.some((tile) => tile.column === column && tile.row === row)) continue;
         const rect = intersection(node.rect, {
           x: node.rect.x + column * size,
@@ -1682,61 +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 freshThumb = (node) => atlas.isValid(node.thumb) && !node.thumbStale;
-  const drawn = (node, slot, scale, now) => {
-    node.slot = slot;
-    node.slotScale = scale;
-    if (scale === THUMBNAIL_SCALE) {
-      node.thumb = slot;
-      node.thumbStale = false;
-      node.thumbAt = 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()) {
@@ -1744,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;
       }
@@ -1772,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 {
@@ -1782,52 +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,
-            Math.max(1, Math.round(node.rect.width * node.targetScale)),
-            Math.max(1, Math.round(node.rect.height * node.targetScale)),
+            texels(node.rect.width, node.targetScale),
+            texels(node.rect.height, node.targetScale),
             thumbnail
           );
-          const region = {
-            x: node.pageX,
-            y: node.pageY,
-            width: node.rect.width,
-            height: node.rect.height
-          };
-          if (!slot || !drawSnapshot(page, region, 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,
-          Math.max(1, Math.round(rect.width * scale2)),
-          Math.max(1, Math.round(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) {
@@ -1858,107 +1934,715 @@ 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,
-          Math.max(1, Math.round(node.rect.width * THUMBNAIL_SCALE)),
-          Math.max(1, Math.round(node.rect.height * THUMBNAIL_SCALE)),
+          texels(node.rect.width, THUMBNAIL_SCALE),
+          texels(node.rect.height, THUMBNAIL_SCALE),
           true
         );
-        const region = {
-          x: node.pageX,
-          y: node.pageY,
-          width: node.rect.width,
-          height: node.rect.height
-        };
-        if (!slot || !drawSnapshot(page, region, slot)) continue;
+        if (!slot || !this.draw(page, nodeRegion(node), slot)) continue;
         calls++;
-        node.thumb = slot;
-        node.thumbStale = false;
-        node.thumbAt = start;
+        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.reserve(instances2);
-    const data = renderer.instances;
-    let count = 0;
-    runs.length = 0;
+    const { visible, detailScale, view } = planner;
+    renderer.begin();
     effectsMoving = false;
-    let runEffect = null;
-    const startRun = (effect) => {
-      if (runs.length && runEffect === effect) return;
-      runEffect = effect;
-      runs.push({ effect, start: count, count: 0 });
-    };
-    const push = (rect, slot) => {
-      startRun(null);
-      runs[runs.length - 1].count++;
-      const offset = count++ * FLOATS_PER_INSTANCE;
-      data[offset] = rect.x;
-      data[offset + 1] = rect.y;
-      data[offset + 2] = rect.width;
-      data[offset + 3] = rect.height;
-      if (slot) {
-        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] = 0;
-      } else {
-        data[offset + 9] = 1;
-      }
-      data[offset + 10] = 0;
-    };
-    const pushEffect = (node, slot, worn) => {
-      startRun(worn.effect);
-      runs[runs.length - 1].count++;
-      const offset = count++ * FLOATS_PER_INSTANCE;
-      const { rect } = node;
-      data[offset] = rect.x;
-      data[offset + 1] = rect.y;
-      data[offset + 2] = rect.width;
-      data[offset + 3] = rect.height;
-      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] = 0;
-      data[offset + 10] = worn.pad;
-      data.set(worn.params, offset + 12);
-    };
     const pushRing = (element, color, width) => {
       const rect = ringRect(element);
-      if (!rect || !intersects(rect, frameView)) return;
-      startRun(null);
-      runs[runs.length - 1].count++;
-      const offset = count++ * FLOATS_PER_INSTANCE;
-      data[offset] = rect.x;
-      data[offset + 1] = rect.y;
-      data[offset + 2] = rect.width;
-      data[offset + 3] = rect.height;
-      data.set(color, offset + 4);
-      data[offset + 9] = 2;
-      data[offset + 10] = width;
+      if (rect && intersects(rect, view)) renderer.ring(rect, color, width);
     };
     let onThumbnail = 0;
     for (const node of visible) {
-      const base = atlas.isValid(node.slot) ? node.slot : atlas.isValid(node.thumb) ? node.thumb : null;
-      if (base && base !== node.slot) onThumbnail++;
-      const hasSlot = base !== null;
+      const image = atlas.isValid(node.slot) ? node.slot : atlas.isValid(node.thumb) ? node.thumb : null;
+      if (image && image !== node.slot) onThumbnail++;
+      const hasSlot = image !== null;
       const sharp = node.tiles.length > 0 || node.preview !== null && atlas.isValid(node.preview);
       const shown = sharp ? 3 : hasSlot ? 2 : 1;
       const before = node.shownFrame === stats.frames - 1 ? node.shown : 0;
@@ -1967,44 +2651,47 @@ async function createGpuCanvas(host, options) {
       node.shown = shown;
       node.shownFrame = stats.frames;
       const worn = effects.size ? effects.get(node.element) : void 0;
-      if (worn) {
+      if (worn && !renderer.effectFailed(worn.effect)) {
         if (worn.effect.animated) effectsMoving = true;
-        if (base && renderer.hasEffect(worn.effect)) {
-          pushEffect(node, base, worn);
+        if (image && renderer.hasEffect(worn.effect)) {
+          renderer.effectQuad(node.rect, image, worn.effect, worn.pad, worn.params);
           continue;
         }
         effectsMoving = true;
       }
-      push(node.rect, base);
-      const current = (tile) => tile.scale === detailScale && !tile.stale;
+      renderer.quad(node.rect, image);
+      const current = (tile) => isCurrentTile(tile, detailScale);
       for (const tile of node.tiles)
-        if (!current(tile) && atlas.isValid(tile.slot)) push(tile.rect, tile.slot);
-      if (node.preview && atlas.isValid(node.preview)) push(node.previewRect, node.preview);
+        if (!current(tile) && atlas.isValid(tile.slot)) renderer.quad(tile.rect, tile.slot);
+      if (node.preview && atlas.isValid(node.preview))
+        renderer.quad(node.previewRect, node.preview);
       for (const tile of node.tiles)
-        if (current(tile) && atlas.isValid(tile.slot)) push(tile.rect, tile.slot);
+        if (current(tile) && atlas.isValid(tile.slot)) renderer.quad(tile.rect, tile.slot);
     }
     stats.onThumbnail = onThumbnail;
     for (const element of selection) pushRing(element, selectionColor, SELECTION_WIDTH);
     if (hovered && !selection.has(hovered)) pushRing(hovered, hoverColor, HOVER_WIDTH);
     const cssWidth = canvas.clientWidth;
-    const dpr = canvas.width / Math.max(1, cssWidth);
+    const dpr = canvasDpr();
     const now = performance.now();
-    renderer.draw(camera, cssWidth, canvas.clientHeight, dpr, count, runs, {
+    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) => {
     if (destroyed) return;
     const start = performance.now();
     atlas.nextFrame();
-    const cssWidth = canvas.clientWidth;
-    const dpr = canvas.width / Math.max(1, cssWidth);
-    const view = visibleWorldRect(camera, cssWidth, canvas.clientHeight);
+    const dpr = canvasDpr();
+    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) {
@@ -2014,99 +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;
-      const width = Math.max(1, Math.round(node.rect.width * scale));
-      const height = Math.max(1, Math.round(node.rect.height * scale));
-      const texture = device.createTexture({
-        size: { width, height },
-        format: "rgba8unorm",
-        usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
-      });
-      try {
-        device.queue.drawElementImageToTexture(
-          {
-            source: node.page.element,
-            sourceX: node.pageX,
-            sourceY: node.pageY,
-            sourceWidth: node.rect.width,
-            sourceHeight: node.rect.height
-          },
-          { texture, size: { width, height }, premultipliedAlpha: false }
-        );
-      } catch (error) {
-        texture.destroy();
-        if (++capture.tries > 20) {
-          captures.splice(captures.indexOf(capture), 1);
-          capture.reject(error instanceof Error ? error : new Error(String(error)));
-        }
-        continue;
-      }
-      captures.splice(captures.indexOf(capture), 1);
-      readTexture(texture, width, height).then(capture.resolve, capture.reject);
-    }
+  canvas.onpaint = (event) => {
     if (captures.length) {
-      awaitingPaint = true;
-      canvas.requestPaint();
-    } else schedule();
-  };
-  const readTexture = async (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();
+      rasterizer.capture(captures);
+      if (captures.length) requestPaint();
+      else schedule();
     }
-  };
-  canvas.onpaint = (event) => {
-    if (captures.length) drawCaptures();
     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 [live, lingering, focused, ...transitioning.keys()]) {
+      for (const node of live.held()) {
         if (node?.page === page) {
           node.dirty = true;
           changed = true;
@@ -2118,26 +2750,18 @@ async function createGpuCanvas(host, options) {
     awaitingPaint = false;
     frame(true);
   };
-  const viewNow = () => visibleWorldRect(camera, canvas.clientWidth, canvas.clientHeight);
-  const nodeOf = (target) => {
-    let element = target instanceof HTMLElement ? target : target.parentElement;
-    while (element?.parentElement && !pageByElement.has(element.parentElement)) {
-      element = element.parentElement;
-    }
-    return element ? nodes.get(element) : 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, viewNow());
+        if (!changed) changed = intersects(node.rect, base.view());
       }
     }
     if (changed) schedule();
@@ -2148,150 +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 positionLivePage = () => {
-    if (!live || livePositioned) return;
-    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 = canvas.width / Math.max(1, canvas.clientWidth);
-        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) {
-        earlier.dirty = true;
-        unpin(earlier.page);
-      }
-      lingerTimer = window.setTimeout(() => {
-        const last = lingering;
-        if (!last) return;
-        lingering = null;
-        last.dirty = true;
-        unpin(last.page);
-      }, 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);
-    const point = screenToWorld(camera, pointer);
-    let hit = null;
-    for (const node of nodes.values()) if (containsPoint(node.rect, point)) hit = node;
-    setLive(hit);
-  };
-  const onPointerMove = (event) => {
-    const bounds = canvas.getBoundingClientRect();
-    pointer = { x: event.clientX - bounds.left, y: event.clientY - bounds.top };
-    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 bounds = canvas.getBoundingClientRect();
-    const at = { x: event.clientX - bounds.left, y: event.clientY - bounds.top };
-    press = screenToWorld(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 bounds = canvas.getBoundingClientRect();
-    const point = screenToWorld(camera, {
-      x: event.clientX - bounds.left,
-      y: event.clientY - bounds.top
-    });
-    let top = null;
-    for (const node of nodes.values()) if (containsPoint(node.rect, point)) top = node;
-    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) {
-      previous.dirty = true;
-      unpin(previous.page);
-    }
-    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) {
-      previous.dirty = true;
-      unpin(previous.page);
-    }
-  };
   const onResourceLoad = (event) => {
-    const node = nodeOf(event.target);
+    const node = nodeOf(nodes, event.target);
     if (!node) return;
     node.dirty = true;
     schedule();
@@ -2302,212 +2784,13 @@ 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, viewNow())) return;
-    if (Math.max(node.rect.width, node.rect.height) * camera.zoom < SMALL_NODE_PX) 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 (transitioning.get(node) !== end) return;
-      transitioning.delete(node);
-      node.dirty = true;
-      unpin(node.page);
-      schedule();
-    }, ms);
-  };
-  for (const type of USE_EVENTS) canvas.addEventListener(type, onUse, true);
-  canvas.addEventListener("transitionrun", onTransitionRun);
-  const setCamera = (next) => {
-    camera = next;
-    lastCameraChange = performance.now();
-    setLive(null);
-    clearTimeout(settleTimer);
-    settleTimer = window.setTimeout(() => {
-      pickLive();
-      schedule();
-    }, SETTLE_MS);
-    schedule();
-    options.onCameraChange?.(camera);
-  };
-  const unbindInput = bindCameraInput(surface, () => camera, setCamera);
-  const placeNode = (element, rect) => {
-    let slot = openPage?.place(rect.width, rect.height) ?? null;
-    if (!slot) {
-      const page = new Page(
-        Math.max(pageSize, Math.ceil(rect.width)),
-        Math.max(pageSize, Math.ceil(rect.height))
-      );
-      pages.set(page, /* @__PURE__ */ new Set());
-      pageByElement.set(page.element, page);
-      canvas.append(page.element);
-      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);
-    node.page.release();
-    if (members.size === 0 && node.page !== openPage) {
-      pages.delete(node.page);
-      pageByElement.delete(node.page.element);
-      node.page.element.remove();
-    }
-  };
-  const lift = (node) => {
-    const previous = node.page;
-    const wasLive = live === node;
-    if (wasLive) setLive(null);
-    const page = new Page(Math.ceil(node.rect.width), Math.ceil(node.rect.height));
-    pages.set(page, /* @__PURE__ */ new Set());
-    pageByElement.set(page.element, page);
-    canvas.append(page.element);
-    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",
-    surface,
-    addNode(element, rect) {
-      Object.assign(element.style, {
-        boxSizing: "border-box",
-        contain: "strict",
-        overflow: "hidden",
-        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();
-    },
-    getNodeRect: (element) => {
-      const node = nodes.get(element);
-      return node ? { ...node.rect } : null;
-    },
-    getNodesIn(rect) {
-      const hits = [];
-      for (const node of nodes.values()) if (intersects(node.rect, rect)) hits.push(node.element);
-      return hits;
-    },
-    getNodeOf: (element) => nodeOfElement(nodes, element),
     getElementRect(element) {
       const rect = ringRect(element);
       return rect ? { ...rect } : null;
     },
-    getElementAt(point) {
-      let top = null;
-      for (const node of nodes.values()) if (containsPoint(node.rect, point)) top = node;
-      return top ? elementInNode(top.element, top.rect, point) : null;
-    },
     setSelection(elements) {
       selection = new Set(elements);
       ringRects.clear();
@@ -2527,10 +2810,6 @@ async function createGpuCanvas(host, options) {
       } else effects.delete(element);
       schedule();
     },
-    screenToWorld: (point) => screenToWorld(camera, point),
-    worldToScreen: (point) => worldToScreen(camera, point),
-    getCamera: () => camera,
-    setCamera,
     invalidate: onFontsLoaded,
     snapshot(element, options2 = {}) {
       const node = nodes.get(element);
@@ -2541,18 +2820,13 @@ 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) {
       [renderer.background, renderer.placeholder] = colorsFor(color);
       schedule();
     },
-    fit(padding) {
-      const bounds = boundsOf([...nodes.values()].map((node) => node.rect));
-      if (bounds) setCamera(fitCamera(bounds, canvas.clientWidth, canvas.clientHeight, padding));
-    },
     getStats: () => ({
       mode: "gpu",
       nodes: nodes.size,
@@ -2562,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,
@@ -2570,29 +2844,20 @@ 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);
+      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);
-      unbindInput();
       resizeObserver.disconnect();
       canvas.onpaint = null;
-      surface.remove();
+      base.destroy();
       renderer.destroy();
       atlas.destroy();
       device.destroy();
@@ -2651,13 +2916,13 @@ var labelText = (element) => {
   }
   return text.replace(/\s+/g, " ").trim();
 };
-var sameRect = (a, b) => Math.abs(a.x - b.x) < 0.5 && Math.abs(a.y - b.y) < 0.5 && Math.abs(a.width - b.width) < 0.5 && Math.abs(a.height - b.height) < 0.5;
 var round = (rect) => ({
   x: Math.round(rect.x),
   y: Math.round(rect.y),
   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();
@@ -2703,11 +2968,7 @@ function createAgentView(canvas) {
   return {
     /** What is in `rect` (default: the view), node by node, as plain JSON. */
     describe(options = {}) {
-      const area = options.rect ?? visibleWorldRect(
-        canvas.getCamera(),
-        canvas.surface.clientWidth,
-        canvas.surface.clientHeight
-      );
+      const area = options.rect ?? viewOf(canvas);
       return canvas.getNodesIn(area).flatMap((node) => read(node, options.depth ?? 6, options));
     },
     /** The element behind an id from `describe`, or null once it is gone. */
@@ -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);
     }
@@ -2752,25 +3019,7 @@ function createAgentView(canvas) {
 // src/layers.ts
 var sameLayer = (a, b) => !!a && !!b && a[0] === b[0];
 var layerIn = (layer, list) => list.some((other) => sameLayer(layer, other));
-function layerRect(canvas, layer) {
-  let union = null;
-  for (const element of layer) {
-    const rect = canvas.getElementRect(element);
-    if (rect) union = union ? unionRect(union, rect) : rect;
-  }
-  return union;
-}
-function unionRect(a, b) {
-  const x = Math.min(a.x, b.x);
-  const y = Math.min(a.y, b.y);
-  return {
-    x,
-    y,
-    width: Math.max(a.x + a.width, b.x + b.width) - x,
-    height: Math.max(a.y + a.height, b.y + b.height) - y
-  };
-}
-var sameRect2 = (a, b) => !!a && !!b && Math.abs(a.x - b.x) < 0.5 && Math.abs(a.y - b.y) < 0.5 && Math.abs(a.width - b.width) < 0.5 && Math.abs(a.height - b.height) < 0.5;
+var layerRect = (canvas, layer) => unionOf(layer.map((element) => canvas.getElementRect(element)));
 function createLayers(canvas, pick) {
   const chainOf = (element) => {
     const node = canvas.getNodeOf(element);
@@ -2789,7 +3038,7 @@ function createLayers(canvas, pick) {
     let previous = canvas.getNodeRect(node);
     for (const layer of inner) {
       const rect = layerRect(canvas, layer);
-      if (sameRect2(rect, previous)) continue;
+      if (sameRect(rect, previous)) continue;
       chain.push(layer);
       previous = rect;
     }
@@ -2807,7 +3056,7 @@ function createLayers(canvas, pick) {
         for (const child of element.children) {
           const rect = canvas.getElementRect(child);
           if (!rect || rect.width <= 0 || rect.height <= 0) continue;
-          if (sameRect2(rect, outer)) visit(child, outer);
+          if (sameRect(rect, outer)) visit(child, outer);
           else children.push([child]);
         }
       };
@@ -2834,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",
@@ -2855,14 +3114,14 @@ var pill = (color) => ({
   whiteSpace: "nowrap",
   pointerEvents: "none"
 });
-function createOverlay(surface, color, hoverColor) {
+function createOverlay(surface, color) {
   const root = document.createElement("div");
   Object.assign(root.style, {
     position: "absolute",
     inset: "0",
     overflow: "hidden",
     pointerEvents: "none",
-    zIndex: "2"
+    zIndex: SURFACE_Z.overlay
   });
   const make = (style) => {
     const element = document.createElement("div");
@@ -2870,7 +3129,7 @@ function createOverlay(surface, color, hoverColor) {
     root.append(element);
     return element;
   };
-  const hoverName = make(pill(hoverColor));
+  const hoverName = make(pill(color));
   const name = make(pill(color));
   const size = make(pill(color));
   const bounds = make({ position: "absolute", border: `1px solid ${color}` });
@@ -2928,12 +3187,11 @@ function createOverlay(surface, color, hoverColor) {
         }
         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
             );
           });
         }
@@ -2955,9 +3213,10 @@ function createOverlay(surface, color, hoverColor) {
     }
   };
 }
-var guideRect = (guide, toScreen) => {
-  const a = toScreen(guide.x1, guide.y1);
-  const b = toScreen(guide.x2, guide.y2);
+var handleAt = (target) => target instanceof Element ? target.closest("[data-gpucanvas-handle]")?.dataset.gpucanvasHandle ?? null : null;
+var guideRect = (guide, camera) => {
+  const a = worldToScreen(camera, { x: guide.x1, y: guide.y1 });
+  const b = worldToScreen(camera, { x: guide.x2, y: guide.y2 });
   return {
     x: Math.min(a.x, b.x),
     y: Math.min(a.y, b.y),
@@ -3004,22 +3263,22 @@ function guidesFor(rect, targets, edges) {
     const hits = targets.filter((target) => anchorsX(target).some((at) => close(at, x)));
     if (!hits.length) continue;
     const top = Math.min(rect.y, ...hits.map((t) => t.y));
-    const bottom2 = Math.max(rect.y + rect.height, ...hits.map((t) => t.y + t.height));
-    guides.push({ x1: x, y1: top, x2: x, y2: bottom2 });
+    const bottom = Math.max(rect.y + rect.height, ...hits.map((t) => t.y + t.height));
+    guides.push({ x1: x, y1: top, x2: x, y2: bottom });
   }
   for (const f of edges.y) {
     const y = rect.y + rect.height * f;
     const hits = targets.filter((target) => anchorsY(target).some((at) => close(at, y)));
     if (!hits.length) continue;
     const left = Math.min(rect.x, ...hits.map((t) => t.x));
-    const right2 = Math.max(rect.x + rect.width, ...hits.map((t) => t.x + t.width));
-    guides.push({ x1: left, y1: y, x2: right2, y2: y });
+    const right = Math.max(rect.x + rect.width, ...hits.map((t) => t.x + t.width));
+    guides.push({ x1: left, y1: y, x2: right, y2: y });
   }
   return guides;
 }
 
 // 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",
@@ -3027,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);
@@ -3045,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";
@@ -3061,9 +3318,11 @@ function createMarquee(canvas, color = DEFAULT_SELECTION_COLOR, select = (world)
     }
   };
 }
+var defaultLabel = (canvas) => (layer) => canvas.getNodeOf(layer[0]) === layer[0] ? null : layer[0].localName;
 var CLICK_SLOP = 4;
 var SNAP_PX = 6;
 var MAX_NAMED = 1;
+var EVERYWHERE = { x: -1e9, y: -1e9, width: 2e9, height: 2e9 };
 var isEditable = (element) => !!element && (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement || element.isContentEditable);
 function bindEditor(canvas, options = {}) {
   const {
@@ -3077,16 +3336,12 @@ function bindEditor(canvas, options = {}) {
     onChange,
     onTransform
   } = options;
-  const label = options.label ?? ((layer) => canvas.getNodeOf(layer[0]) === layer[0] ? null : layer[0].localName);
+  const label = options.label ?? defaultLabel(canvas);
   const { surface } = canvas;
   const layers = createLayers(canvas, pick);
   const transforms = !!onTransform && trigger === "click";
-  const overlay = createOverlay(surface, color, color);
-  let marqueeLayers = [];
-  const box = marquee ? createMarquee(canvas, color, (world) => {
-    marqueeLayers = layers.layersIn(scopes.at(-1) ?? null, world);
-    return marqueeLayers.flat();
-  }) : null;
+  const overlay = createOverlay(surface, color);
+  const box = marquee ? createMarquee(canvas, color) : null;
   let selection = [];
   let scopes = [];
   let hovered = null;
@@ -3096,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);
@@ -3108,10 +3364,7 @@ function bindEditor(canvas, options = {}) {
     canvas.setHover(layer?.[0] ?? null);
     draw();
   };
-  const at = (event) => {
-    const bounds = surface.getBoundingClientRect();
-    return { x: event.clientX - bounds.left, y: event.clientY - bounds.top };
-  };
+  const at = (event) => pointIn(surface, event);
   const chainAt = (point) => layers.chainAt(canvas.screenToWorld(point));
   const fieldAt = (point) => {
     const element = canvas.getElementAt(canvas.screenToWorld(point));
@@ -3140,15 +3393,7 @@ function bindEditor(canvas, options = {}) {
   const draw = () => {
     if (!frame) frame = requestAnimationFrame(render);
   };
-  const toScreen = (rect) => {
-    const { x, y } = canvas.worldToScreen(rect);
-    const zoom = canvas.getCamera().zoom;
-    return { x, y, width: rect.width * zoom, height: rect.height * zoom };
-  };
-  const unionOf = (rects) => rects.reduce(
-    (union, rect) => !rect ? union : union ? unionRect(union, rect) : rect,
-    null
-  );
+  const toScreen = (rect) => rectToScreen(canvas.getCamera(), rect);
   const render = () => {
     frame = 0;
     const transforming = gesture?.kind === "move" || gesture?.kind === "resize" ? gesture : null;
@@ -3164,28 +3409,24 @@ function bindEditor(canvas, options = {}) {
       } : null,
       bounds: selection.length > 1 || !!transforming,
       handles: transforms && selection.length > 0 && gesture?.kind !== "marquee",
-      guides: transforming ? transforming.guides.map(
-        (guide) => guideRect(guide, (x, y) => canvas.worldToScreen({ x, y }))
-      ) : []
+      guides: transforming ? transforming.guides.map((guide) => guideRect(guide, canvas.getCamera())) : []
     });
     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) => {
     if (!snap) return [];
     const scope = scopes.at(-1);
     if (!scope) {
-      const view = visibleWorldRect(canvas.getCamera(), surface.clientWidth, surface.clientHeight);
-      return canvas.getNodesIn(view).filter((node) => !moving.some((layer) => layer[0] === node)).map((node) => canvas.getNodeRect(node));
+      return canvas.getNodesIn(viewOf(canvas)).filter((node) => !moving.some((layer) => layer[0] === node)).map((node) => canvas.getNodeRect(node));
     }
     const rects = layers.childrenOf(scope).filter((layer) => !layerIn(layer, moving)).map((layer) => layerRect(canvas, layer));
     return [layerRect(canvas, scope), ...rects].filter((rect) => !!rect);
@@ -3194,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,
@@ -3205,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;
@@ -3225,29 +3467,30 @@ function bindEditor(canvas, options = {}) {
     } else {
       let left = bounds.x;
       let top = bounds.y;
-      let right2 = bounds.x + bounds.width;
-      let bottom2 = bounds.y + bounds.height;
-      if (handle.includes("w")) left = Math.min(left + dx, right2 - 1);
-      if (handle.includes("e")) right2 = Math.max(right2 + dx, left + 1);
-      if (handle.includes("n")) top = Math.min(top + dy, bottom2 - 1);
-      if (handle.includes("s")) bottom2 = Math.max(bottom2 + dy, top + 1);
-      next = { x: left, y: top, width: right2 - left, height: bottom2 - top };
-      const corner = handle.length === 2;
+      let right = bounds.x + bounds.width;
+      let bottom = bounds.y + bounds.height;
+      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 = 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") ? right2 - width : left,
-          y: handle.includes("n") ? bottom2 - 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)
@@ -3267,7 +3510,7 @@ function bindEditor(canvas, options = {}) {
       width: rect.width * sx,
       height: rect.height * sy
     }));
-    emit("move");
+    emit(gesture, "move");
     draw();
   };
   const onPointerDown = (event) => {
@@ -3287,16 +3530,16 @@ function bindEditor(canvas, options = {}) {
       swallowClick = true;
       surface.setPointerCapture(event.pointerId);
     };
-    const handle = event.target.closest?.("[data-gpucanvas-handle]");
+    const handle = handleAt(event.target);
     if (handle && transforms) {
       take();
-      return beginTransform(point, handle.dataset.gpucanvasHandle);
+      return beginTransform(point, handle);
     }
     const target = targetIn(chainAt(point));
     if (!target) {
       if (event.shiftKey && box) {
         take();
-        gesture = { kind: "marquee", start: point };
+        gesture = { kind: "marquee", start: point, scopes };
         return;
       }
       if (selection.length) commit([], []);
@@ -3320,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();
   };
@@ -3412,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([], []);
@@ -3427,7 +3662,7 @@ function bindEditor(canvas, options = {}) {
     } else if (event.key === "Tab") {
       event.preventDefault();
       const scope = scopes.at(-1);
-      const siblings = scope ? layers.childrenOf(scope) : canvas.getNodesIn({ x: -1e9, y: -1e9, width: 2e9, height: 2e9 }).map((node) => [node]);
+      const siblings = scope ? layers.childrenOf(scope) : canvas.getNodesIn(EVERYWHERE).map((node) => [node]);
       const index = siblings.findIndex((layer) => sameLayer(layer, selection[0]));
       const step = event.shiftKey ? -1 : 1;
       const next = siblings[(index + step + siblings.length) % siblings.length];
@@ -3487,7 +3722,7 @@ var pillStyle = (color) => ({
   whiteSpace: "nowrap",
   pointerEvents: "none"
 });
-function createMarks(canvas, { color = "#4f8cff" } = {}) {
+function createMarks(canvas, { color = DEFAULT_SELECTION_COLOR } = {}) {
   const id = `gpucanvas-marks-${++instances}`;
   const root = document.createElement("div");
   Object.assign(root.style, {
@@ -3495,7 +3730,7 @@ function createMarks(canvas, { color = "#4f8cff" } = {}) {
     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%" });
@@ -3530,11 +3765,7 @@ function createMarks(canvas, { color = "#4f8cff" } = {}) {
     return ref;
   };
   const toScreen = (point) => canvas.worldToScreen(point);
-  const screenRect = (rect) => {
-    const a = toScreen(rect);
-    const b = toScreen({ x: rect.x + rect.width, y: rect.y + rect.height });
-    return { x: a.x, y: a.y, width: b.x - a.x, height: b.y - a.y };
-  };
+  const screenRect = (rect) => rectToScreen(canvas.getCamera(), rect);
   const worldRect = (target) => target instanceof Element ? canvas.getElementRect(target) : { x: target.x, y: target.y, width: 0, height: 0 };
   const place = (element, x, y) => {
     const transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;
@@ -3551,21 +3782,22 @@ function createMarks(canvas, { color = "#4f8cff" } = {}) {
     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. */
@@ -3716,9 +3948,7 @@ function createMarks(canvas, { color = "#4f8cff" } = {}) {
     },
     /** 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);
@@ -3787,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;
@@ -3794,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) => {
@@ -3867,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);
   }
 }
@@ -3880,6 +4115,7 @@ export {
   EFFECTS,
   supportsGpuCanvas,
   createAgentView,
+  defaultLabel,
   bindEditor,
   createMarks,
   toBlob,
@@ -3890,4 +4126,4 @@ export {
   swapNodes,
   createGpuCanvas2 as createGpuCanvas
 };
-//# sourceMappingURL=chunk-2EDYGRFR.js.map
+//# sourceMappingURL=chunk-IIRGNX76.js.map