gpucanvas 0.4.3 → 0.4.4

package/dist/{chunk-2EDYGRFR.js → chunk-IJ3R6X75.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,113 @@ 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 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) {
+  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,
+    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 +670,20 @@ 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 base = createBase(host, options, apply);
+  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 +695,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 +705,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 +779,33 @@ 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 updateNode = (element, rect) => {
+    nodes.set(element, { element, rect });
+    element.style.left = `${rect.x}px`;
+    element.style.top = `${rect.y}px`;
+    element.style.width = `${rect.width}px`;
+    element.style.height = `${rect.height}px`;
   };
-  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);
+      styleNode(element);
       element.style.position = "absolute";
-      nodes.set(element, rect);
-      this.updateNode(element, rect);
+      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);
-    },
+    updateNode,
     removeNode(element) {
       clearEffect(element);
       nodes.delete(element);
+      selection.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 +818,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 +825,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,17 +842,52 @@ function createDomCanvas(host, options) {
     },
     destroy() {
       cancelAnimationFrame(boxFrame);
-      unbindInput();
-      surface.remove();
+      base.destroy();
     }
   };
 }
 
+// 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) {
+  constructor(device, size, layerCount, keep) {
     this.device = device;
+    this.keep = keep;
     this.size = size;
     this.texture = device.createTexture({
       label: "gpucanvas atlas",
@@ -806,8 +897,7 @@ var Atlas = class {
     });
     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 +905,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 +995,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,7 +1019,55 @@ var Atlas = class {
   }
 };
 
+// src/capture.ts
+function captureRegion(device, source, region, width, height) {
+  const texture = device.createTexture({
+    size: { width, height },
+    format: "rgba8unorm",
+    usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+  });
+  try {
+    device.queue.drawElementImageToTexture(
+      {
+        source,
+        sourceX: region.x,
+        sourceY: region.y,
+        sourceWidth: region.width,
+        sourceHeight: region.height
+      },
+      { texture, size: { width, height }, premultipliedAlpha: false }
+    );
+  } catch (error) {
+    texture.destroy();
+    throw error;
+  }
+  return readTexture(device, texture, width, height);
+}
+async function readTexture(device, texture, width, height) {
+  const bytesPerRow = Math.ceil(width * 4 / 256) * 256;
+  const buffer = device.createBuffer({
+    size: bytesPerRow * height,
+    usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+  });
+  const encoder = device.createCommandEncoder();
+  encoder.copyTextureToBuffer({ texture }, { buffer, bytesPerRow }, { width, height });
+  device.queue.submit([encoder.finish()]);
+  try {
+    await buffer.mapAsync(GPUMapMode.READ);
+    const rows = new Uint8Array(buffer.getMappedRange());
+    const pixels = new Uint8ClampedArray(width * height * 4);
+    for (let y = 0; y < height; y++) {
+      pixels.set(rows.subarray(y * bytesPerRow, y * bytesPerRow + width * 4), y * width * 4);
+    }
+    return new ImageData(pixels, width, height);
+  } finally {
+    buffer.destroy();
+    texture.destroy();
+  }
+}
+
 // src/composite-shader.ts
+var KIND = { snapshot: 0, placeholder: 1, ring: 2 };
 var prelude = (
   /* wgsl */
   `
@@ -985,7 +1110,7 @@ struct Varyings {
 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 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;
@@ -1026,12 +1151,12 @@ 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) {
+  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 > 0.5) {
+  if (in.info.y > ${KIND.placeholder - 0.5}) {
     return view.placeholder;
   }
   let layer = i32(in.info.x);
@@ -1108,12 +1233,14 @@ fn fs(in: Varyings) -> @location(0) vec4f {
 // src/gpu-renderer.ts
 var FLOATS_PER_INSTANCE = 16;
 var CompositeRenderer = class {
-  constructor(device, context, format, atlas, background, placeholder) {
+  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: {} },
@@ -1127,9 +1254,8 @@ var CompositeRenderer = class {
     });
     this.sampler = device.createSampler({ magFilter: "linear", minFilter: "linear" });
     this.pipeline = device.createRenderPipeline(
-      this.pipelineDescriptor("gpucanvas composite", compositeShader, format)
+      this.pipelineDescriptor("gpucanvas composite", compositeShader)
     );
-    this.format = format;
     this.uniforms = device.createBuffer({
       size: this.uniformData.byteLength,
       usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
@@ -1146,10 +1272,14 @@ var CompositeRenderer = class {
   }
   device;
   context;
+  format;
   atlas;
   background;
   placeholder;
+  onEffectReady;
   instances = new Float32Array(FLOATS_PER_INSTANCE * 4096);
+  count = 0;
+  runs = [];
   instanceBuffer;
   uniforms;
   uniformData = new Float32Array(20);
@@ -1159,11 +1289,8 @@ var CompositeRenderer = class {
   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) {
+  failed = /* @__PURE__ */ new Set();
+  pipelineDescriptor(label, code) {
     const module = this.device.createShaderModule({ label, code });
     return {
       label,
@@ -1189,7 +1316,7 @@ var CompositeRenderer = class {
         entryPoint: "fs",
         targets: [
           {
-            format,
+            format: this.format,
             // Snapshots are requested premultiplied.
             blend: {
               color: { srcFactor: "one", dstFactor: "one-minus-src-alpha" },
@@ -1206,27 +1333,82 @@ var CompositeRenderer = class {
     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
-      )
+      this.pipelineDescriptor(`gpucanvas effect ${effect.name}`, effectShader(effect.wgsl))
     ).then((pipeline) => {
       this.effects.set(effect, pipeline);
       this.onEffectReady();
-    }).catch((error) => console.error(`[gpucanvas] effect "${effect.name}" failed`, error));
+    }).catch((error) => {
+      this.failed.add(effect);
+      console.error(`[gpucanvas] effect "${effect.name}" failed`, error);
+    });
     return false;
   }
-  /** 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();
+  /** Whether `effect`'s pipeline failed to compile; it never draws then. */
+  effectFailed(effect) {
+    return this.failed.has(effect);
+  }
+  /** Starts a frame with room for at least `capacity` quads. */
+  begin(capacity) {
+    const floats = capacity * FLOATS_PER_INSTANCE;
+    if (this.instances.length < floats) {
+      this.instances = new Float32Array(Math.max(floats, this.instances.length * 2));
+      this.instanceBuffer.destroy();
+      this.instanceBuffer = this.createInstanceBuffer();
+    }
+    this.count = 0;
+    this.runs.length = 0;
+  }
+  /** Room for the next quad, in the run of `effect`; returns its first float. */
+  next(effect) {
+    const last = this.runs.at(-1);
+    if (last && last.effect === effect) last.count++;
+    else this.runs.push({ effect, start: this.count, count: 1 });
+    return this.count++ * FLOATS_PER_INSTANCE;
+  }
+  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;
   }
-  draw(camera, cssWidth, cssHeight, dpr, count, runs, effects) {
-    const { device } = this;
+  /** `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,
@@ -1269,7 +1451,7 @@ var CompositeRenderer = class {
       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 }]) {
+      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);
@@ -1297,21 +1479,17 @@ 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;
+  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 +1508,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;
@@ -1374,8 +1535,6 @@ 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;
@@ -1387,6 +1546,7 @@ var THUMBNAIL_REFRESH_MS = 1e3;
 var MAX_PROMOTIONS_PER_FRAME = 8;
 var SLOW_FRAME_MS = 22;
 var FAST_FRAME_MS = 12;
+var MAX_CAPTURE_TRIES = 20;
 var MISSING = 0;
 var DIRTY = 1;
 var BLURRY = 2;
@@ -1399,14 +1559,6 @@ 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 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;
@@ -1415,37 +1567,58 @@ function cssColorToRgba(color) {
   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)
-);
+var distanceToCenter = (rect, view) => {
+  const a = center(rect);
+  const b = center(view);
+  return Math.hypot(a.x - b.x, a.y - b.y);
+};
 async function createGpuCanvas(host, options) {
   const adapter = await navigator.gpu.requestAdapter({ powerPreference: "high-performance" });
   if (!adapter) throw new Error("gpucanvas: no WebGPU adapter");
   const device = await adapter.requestDevice();
-  const 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 = "";
+  markSurface(canvas);
   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" });
+  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();
+    setLive(null);
+    clearTimeout(settleTimer);
+    settleTimer = window.setTimeout(() => {
+      pickLive();
+      schedule();
+    }, SETTLE_MS);
+    schedule();
+  });
+  const { surface, nodes } = base;
+  surface.append(canvas);
   const atlasSize = Math.min(options.atlasSize ?? 4096, device.limits.maxTextureDimension2D);
   const atlas = new Atlas(
     device,
     atlasSize,
-    Math.min(options.atlasLayers ?? 5, device.limits.maxTextureArrayLayers)
+    Math.min(options.atlasLayers ?? 5, device.limits.maxTextureArrayLayers),
+    function* () {
+      const onScreen = (tile) => intersects(tile.rect, frameView);
+      for (const node of visible) yield node.slot;
+      for (const node of visible) {
+        for (const tile of node.tiles) {
+          if (tile.scale === detailScale && !tile.stale && onScreen(tile)) yield tile.slot;
+        }
+      }
+      for (const node of visible) {
+        yield node.preview;
+        for (const tile of node.tiles) if (onScreen(tile)) yield tile.slot;
+      }
+    }
   );
   const pageSize = Math.min(options.pageSize ?? DEFAULT_PAGE_SIZE, atlasSize);
   const maxRasterCalls = options.maxRastersPerFrame ?? 12;
@@ -1465,18 +1638,16 @@ async function createGpuCanvas(host, options) {
     context,
     format,
     atlas,
-    ...colorsFor(options.background ?? "#f4f4f5")
+    ...colorsFor(options.background ?? "#f4f4f5"),
+    () => schedule()
   );
   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;
@@ -1492,22 +1663,8 @@ async function createGpuCanvas(host, options) {
     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;
@@ -1545,6 +1702,7 @@ async function createGpuCanvas(host, options) {
       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(
@@ -1560,7 +1718,8 @@ async function createGpuCanvas(host, options) {
   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);
+  const heldNodes = () => [live, lingering, focused, ...transitioning.keys()];
+  const isPinned = (page) => captures.some((capture) => capture.node.page === page) || heldNodes().some((node) => node?.page === page);
   let detailScale = 1;
   let frameView = { x: 0, y: 0, width: 0, height: 0 };
   let contentTimer = 0;
@@ -1570,7 +1729,8 @@ async function createGpuCanvas(host, options) {
   };
   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 smallOnScreen = (node) => Math.max(node.rect.width, node.rect.height) * base.camera().zoom < SMALL_NODE_PX;
+  const refreshWait = (node, now) => smallOnScreen(node) ? node.refreshedAt + SMALL_REFRESH_MS - now : 0;
   const refreshLater = (wait) => {
     const at = performance.now() + wait;
     if (at >= refreshAt) return;
@@ -1658,8 +1818,8 @@ async function createGpuCanvas(host, options) {
     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,
@@ -1713,15 +1873,24 @@ async function createGpuCanvas(host, options) {
     }
   };
   const slotFor = (previous, width, height, thumbnail = false) => atlas.isValid(previous) && atlas.isPinned(previous) === thumbnail && previous.width === width && previous.height === height && Number.isInteger(previous.x) && Number.isInteger(previous.y) ? previous : (thumbnail ? atlas.allocatePinned(width, height) : null) ?? atlas.allocate(width, height);
+  const texels = (length, scale) => Math.max(1, Math.round(length * scale));
+  const nodeRegion = (node) => ({
+    x: node.pageX,
+    y: node.pageY,
+    width: node.rect.width,
+    height: node.rect.height
+  });
   const freshThumb = (node) => atlas.isValid(node.thumb) && !node.thumbStale;
+  const setThumb = (node, slot, now) => {
+    node.thumb = slot;
+    node.thumbStale = false;
+    node.thumbAt = now;
+  };
   const drawn = (node, slot, scale, now) => {
     node.slot = slot;
     node.slotScale = scale;
-    if (scale === THUMBNAIL_SCALE) {
-      node.thumb = slot;
-      node.thumbStale = false;
-      node.thumbAt = now;
-    } else if (node.dirty) node.thumbStale = true;
+    if (scale === THUMBNAIL_SCALE) setThumb(node, slot, now);
+    else if (node.dirty) node.thumbStale = true;
     if (node.dirty) {
       node.preview = null;
       node.refreshedAt = now;
@@ -1784,17 +1953,11 @@ async function createGpuCanvas(host, options) {
           const thumbnail = node.targetScale === THUMBNAIL_SCALE;
           const slot = 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 || !drawSnapshot(page, nodeRegion(node), slot)) {
             pending++;
             continue;
           }
@@ -1807,11 +1970,7 @@ async function createGpuCanvas(host, options) {
       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 = 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,
@@ -1862,21 +2021,13 @@ async function createGpuCanvas(host, options) {
         if (atlas.isValid(node.thumb) && start - node.thumbAt < THUMBNAIL_REFRESH_MS) continue;
         const slot = 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 || !drawSnapshot(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);
@@ -1889,76 +2040,17 @@ async function createGpuCanvas(host, options) {
     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;
+    renderer.begin(instances2);
     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, frameView)) 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,29 +2059,31 @@ 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);
+      renderer.quad(node.rect, image);
       const current = (tile) => tile.scale === detailScale && !tile.stale;
       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,
@@ -2000,9 +2094,9 @@ async function createGpuCanvas(host, options) {
     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);
     if (!inPaint && plans.size > 0) {
@@ -2044,69 +2138,37 @@ async function createGpuCanvas(host, options) {
   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
-      });
+      let image;
       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 }
+        image = captureRegion(
+          device,
+          node.page.element,
+          nodeRegion(node),
+          texels(node.rect.width, scale),
+          texels(node.rect.height, scale)
         );
       } catch (error) {
-        texture.destroy();
-        if (++capture.tries > 20) {
+        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);
-      readTexture(texture, width, height).then(capture.resolve, capture.reject);
+      image.then(capture.resolve, capture.reject);
     }
     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();
-    }
-  };
   canvas.onpaint = (event) => {
     if (captures.length) drawCaptures();
     let changed = false;
     for (const element of event.changedElements) {
       const page = pageByElement.get(element);
       if (!page) continue;
-      for (const node of [live, lingering, focused, ...transitioning.keys()]) {
+      for (const node of heldNodes()) {
         if (node?.page === page) {
           node.dirty = true;
           changed = true;
@@ -2118,13 +2180,10 @@ 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 element = target instanceof Element ? target : target.parentElement;
+    const node = element && nodeOfElement(nodes, element);
+    return node ? nodes.get(node) : void 0;
   };
   const mutations = new MutationObserver((records) => {
     ringRects.clear();
@@ -2137,7 +2196,7 @@ async function createGpuCanvas(host, options) {
       const node = nodeOf(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();
@@ -2155,8 +2214,13 @@ async function createGpuCanvas(host, options) {
     page.element.style.transform = "";
     schedule();
   };
+  const letGo = (node) => {
+    node.dirty = true;
+    unpin(node.page);
+  };
   const positionLivePage = () => {
     if (!live || livePositioned) return;
+    const camera = base.camera();
     const { zoom } = camera;
     const x = (live.rect.x - camera.x - live.pageX) * zoom;
     const y = (live.rect.y - camera.y - live.pageY) * zoom;
@@ -2166,7 +2230,7 @@ async function createGpuCanvas(host, options) {
           canvasTransform: new DOMMatrix([zoom, 0, 0, zoom, x, y])
         });
       } else {
-        const dpr = canvas.width / Math.max(1, canvas.clientWidth);
+        const dpr = canvasDpr();
         const drawn2 = new DOMMatrix([zoom, 0, 0, zoom, x * dpr, y * dpr]);
         live.page.element.style.transform = canvas.getElementTransform(live.page.element, drawn2).toString();
       }
@@ -2185,16 +2249,12 @@ async function createGpuCanvas(host, options) {
       clearTimeout(lingerTimer);
       const earlier = lingering;
       lingering = previous;
-      if (earlier && earlier !== previous) {
-        earlier.dirty = true;
-        unpin(earlier.page);
-      }
+      if (earlier && earlier !== previous) letGo(earlier);
       lingerTimer = window.setTimeout(() => {
         const last = lingering;
         if (!last) return;
         lingering = null;
-        last.dirty = true;
-        unpin(last.page);
+        letGo(last);
       }, LINGER_MS);
       unpin(previous.page);
     }
@@ -2211,14 +2271,10 @@ async function createGpuCanvas(host, options) {
   };
   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);
+    setLive(base.nodeAt(screenToWorld(base.camera(), pointer)));
   };
   const onPointerMove = (event) => {
-    const bounds = canvas.getBoundingClientRect();
-    pointer = { x: event.clientX - bounds.left, y: event.clientY - bounds.top };
+    pointer = pointIn(canvas, event);
     if (event.buttons === 0) pickLive();
   };
   const onPointerLeave = () => {
@@ -2229,9 +2285,8 @@ async function createGpuCanvas(host, options) {
   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);
+    const at = pointIn(canvas, event);
+    press = screenToWorld(base.camera(), at);
     pressedAt = performance.now();
     if (event.pointerType !== "mouse") {
       pointer = at;
@@ -2243,13 +2298,8 @@ async function createGpuCanvas(host, options) {
   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;
+    const point = screenToWorld(base.camera(), pointIn(canvas, event));
+    const top = base.nodeAt(point);
     if (!top || top.element.contains(event.target)) return;
     let target = elementInNode(top.element, top.rect, point);
     while (target && !(target instanceof HTMLElement)) target = target.parentElement;
@@ -2271,10 +2321,7 @@ async function createGpuCanvas(host, options) {
     if (node === focused) return;
     const previous = focused;
     focused = node;
-    if (previous) {
-      previous.dirty = true;
-      unpin(previous.page);
-    }
+    if (previous) letGo(previous);
     if (node) {
       node.page.setDrawable(true, frameNumber);
       node.dirty = true;
@@ -2285,10 +2332,7 @@ async function createGpuCanvas(host, options) {
     if (event.relatedTarget && canvas.contains(event.relatedTarget)) return;
     const previous = focused;
     focused = null;
-    if (previous) {
-      previous.dirty = true;
-      unpin(previous.page);
-    }
+    if (previous) letGo(previous);
   };
   const onResourceLoad = (event) => {
     const node = nodeOf(event.target);
@@ -2325,8 +2369,8 @@ async function createGpuCanvas(host, options) {
     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;
+    if (!intersects(node.rect, base.view())) return;
+    if (smallOnScreen(node)) return;
     const ms = transitionMs(event.target) + 32;
     const end = now + ms;
     if ((transitioning.get(node) ?? 0) >= end) return;
@@ -2334,38 +2378,34 @@ async function createGpuCanvas(host, options) {
     node.dirty = true;
     schedule();
     setTimeout(() => {
-      if (transitioning.get(node) !== end) return;
+      if (destroyed || transitioning.get(node) !== end) return;
       transitioning.delete(node);
-      node.dirty = true;
-      unpin(node.page);
+      letGo(node);
       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 newPage = (width, height) => {
+    const page = new Page(width, height);
+    pages.set(page, /* @__PURE__ */ new Set());
+    pageByElement.set(page.element, page);
+    canvas.append(page.element);
+    return page;
+  };
+  const dropPage = (page) => {
+    pages.delete(page);
+    pageByElement.delete(page.element);
+    pageSlots.delete(page);
+    page.element.remove();
   };
-  const unbindInput = bindCameraInput(surface, () => camera, setCamera);
   const placeNode = (element, rect) => {
     let slot = openPage?.place(rect.width, rect.height) ?? null;
     if (!slot) {
-      const page = new Page(
+      const page = newPage(
         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);
     }
@@ -2382,21 +2422,13 @@ async function createGpuCanvas(host, options) {
   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();
-    }
+    if (members.size === 0 && node.page !== openPage) dropPage(node.page);
   };
   const lift = (node) => {
     const previous = node.page;
     const wasLive = live === node;
     if (wasLive) setLive(null);
-    const page = 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);
+    const page = newPage(Math.ceil(node.rect.width), Math.ceil(node.rect.height));
     page.place(node.rect.width, node.rect.height);
     const target = page.element;
     if (target.moveBefore) target.moveBefore(node.element, null);
@@ -2427,15 +2459,11 @@ async function createGpuCanvas(host, options) {
     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"
-      });
+      styleNode(element);
+      element.style.pointerEvents = "none";
       const node = {
         element,
         rect,
@@ -2489,25 +2517,10 @@ async function createGpuCanvas(host, options) {
       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 +2540,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);
@@ -2549,10 +2558,6 @@ async function createGpuCanvas(host, options) {
       [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,
@@ -2578,6 +2583,7 @@ async function createGpuCanvas(host, options) {
       clearTimeout(settleTimer);
       clearTimeout(lingerTimer);
       clearTimeout(contentTimer);
+      clearTimeout(refreshTimer);
       mutations.disconnect();
       document.fonts.removeEventListener("loadingdone", onFontsLoaded);
       canvas.removeEventListener("load", onResourceLoad, true);
@@ -2589,10 +2595,9 @@ async function createGpuCanvas(host, options) {
       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,7 +2656,6 @@ 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),
@@ -2703,11 +2707,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. */
@@ -2752,25 +2752,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 +2771,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 +2789,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]);
         }
       };
@@ -2855,7 +2837,7 @@ 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",
@@ -2870,7 +2852,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}` });
@@ -2955,9 +2937,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,16 +2987,16 @@ 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;
 }
@@ -3061,9 +3044,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,11 +3062,11 @@ 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);
+  const overlay = createOverlay(surface, color);
   let marqueeLayers = [];
   const box = marquee ? createMarquee(canvas, color, (world) => {
     marqueeLayers = layers.layersIn(scopes.at(-1) ?? null, world);
@@ -3108,10 +3093,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 +3122,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,9 +3138,7 @@ 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();
   };
@@ -3184,8 +3156,7 @@ function bindEditor(canvas, options = {}) {
     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);
@@ -3225,21 +3196,21 @@ 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 };
+      let right = bounds.x + bounds.width;
+      let bottom = bounds.y + bounds.height;
+      if (handle.includes("w")) left = Math.min(left + dx, right - 1);
+      if (handle.includes("e")) right = Math.max(right + dx, left + 1);
+      if (handle.includes("n")) top = Math.min(top + dy, bottom - 1);
+      if (handle.includes("s")) bottom = Math.max(bottom + dy, top + 1);
+      next = { x: left, y: top, width: right - left, height: bottom - top };
       const corner = handle.length === 2;
       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: handle.includes("w") ? right - width : left,
+          y: handle.includes("n") ? bottom - height : top,
           width,
           height
         };
@@ -3287,10 +3258,10 @@ 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) {
@@ -3427,7 +3398,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 +3458,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, {
@@ -3530,11 +3501,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)`;
@@ -3880,6 +3847,7 @@ export {
   EFFECTS,
   supportsGpuCanvas,
   createAgentView,
+  defaultLabel,
   bindEditor,
   createMarks,
   toBlob,
@@ -3890,4 +3858,4 @@ export {
   swapNodes,
   createGpuCanvas2 as createGpuCanvas
 };
-//# sourceMappingURL=chunk-2EDYGRFR.js.map
+//# sourceMappingURL=chunk-IJ3R6X75.js.map