gpucanvas 0.0.0-stage → 0.1.0

package/dist/chunk-JQQ44OTN.js

@@ -0,0 +1,1651 @@
+// src/camera.ts
+var MIN_ZOOM = 0.02;
+var MAX_ZOOM = 16;
+var clampZoom = (zoom) => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom));
+function zoomAt(camera, screenX, screenY, factor) {
+  const zoom = clampZoom(camera.zoom * factor);
+  const worldX = camera.x + screenX / camera.zoom;
+  const worldY = camera.y + screenY / camera.zoom;
+  return { x: worldX - screenX / zoom, y: worldY - screenY / zoom, zoom };
+}
+function visibleWorldRect(camera, viewportWidth, viewportHeight) {
+  return {
+    x: camera.x,
+    y: camera.y,
+    width: viewportWidth / camera.zoom,
+    height: viewportHeight / camera.zoom
+  };
+}
+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;
+function fitCamera(bounds, viewportWidth, viewportHeight, padding = 40) {
+  const zoom = clampZoom(
+    Math.min(
+      (viewportWidth - padding * 2) / Math.max(1, bounds.width),
+      (viewportHeight - padding * 2) / Math.max(1, bounds.height)
+    )
+  );
+  return {
+    x: bounds.x + bounds.width / 2 - viewportWidth / 2 / zoom,
+    y: bounds.y + bounds.height / 2 - viewportHeight / 2 / zoom,
+    zoom
+  };
+}
+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));
+    } else {
+      onChange({
+        ...camera,
+        x: camera.x + event.deltaX / camera.zoom,
+        y: camera.y + event.deltaY / camera.zoom
+      });
+    }
+  };
+  let drag = null;
+  const onPointerDown = (event) => {
+    if (event.button !== 0 && event.button !== 1) return;
+    if (event.target !== element && !event.target.hasAttribute?.("data-gpucanvas-surface"))
+      return;
+    drag = { pointerId: event.pointerId, x: event.clientX, y: event.clientY };
+    element.setPointerCapture(event.pointerId);
+  };
+  const onPointerMove = (event) => {
+    if (!drag || event.pointerId !== drag.pointerId) return;
+    const camera = getCamera();
+    onChange({
+      ...camera,
+      x: camera.x - (event.clientX - drag.x) / camera.zoom,
+      y: camera.y - (event.clientY - drag.y) / camera.zoom
+    });
+    drag.x = event.clientX;
+    drag.y = event.clientY;
+  };
+  const onPointerUp = (event) => {
+    if (drag?.pointerId === event.pointerId) drag = null;
+  };
+  element.addEventListener("wheel", onWheel, { passive: false });
+  element.addEventListener("pointerdown", onPointerDown);
+  element.addEventListener("pointermove", onPointerMove);
+  element.addEventListener("pointerup", onPointerUp);
+  element.addEventListener("pointercancel", onPointerUp);
+  return () => {
+    element.removeEventListener("wheel", onWheel);
+    element.removeEventListener("pointerdown", onPointerDown);
+    element.removeEventListener("pointermove", onPointerMove);
+    element.removeEventListener("pointerup", onPointerUp);
+    element.removeEventListener("pointercancel", onPointerUp);
+  };
+}
+
+// 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 };
+
+// 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"
+  });
+  const world = document.createElement("div");
+  world.dataset.gpucanvasSurface = "";
+  Object.assign(world.style, {
+    position: "absolute",
+    left: "0",
+    top: "0",
+    transformOrigin: "0 0",
+    willChange: "transform"
+  });
+  surface.append(world);
+  host.append(surface);
+  const nodes = /* @__PURE__ */ new Map();
+  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)`;
+    frameMs = performance.now() - start;
+  };
+  const setCamera = (next) => {
+    camera = next;
+    apply();
+    options.onCameraChange?.(camera);
+  };
+  const unbindInput = bindCameraInput(surface, () => camera, setCamera);
+  apply();
+  return {
+    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) {
+      nodes.delete(element);
+      element.remove();
+    },
+    getNodeRect: (element) => nodes.get(element) ?? null,
+    getCamera: () => camera,
+    setCamera,
+    // The browser repaints DOM nodes itself.
+    invalidate() {
+    },
+    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);
+      let visible = 0;
+      for (const rect of nodes.values()) if (intersects(rect, view)) visible++;
+      return {
+        mode: "dom",
+        nodes: nodes.size,
+        visible,
+        pending: 0,
+        rasterizedLastFrame: 0,
+        rasterMs: 0,
+        atlasLayersUsed: 0,
+        frameMs
+      };
+    },
+    destroy() {
+      unbindInput();
+      surface.remove();
+    }
+  };
+}
+
+// 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
+    });
+    this.view = this.texture.createView({ dimension: "2d-array" });
+    this.layers = Array.from({ length: layerCount }, () => ({
+      shelves: [],
+      nextY: 0,
+      generation: 0,
+      lastUsed: -1,
+      lastAllocated: -1
+    }));
+    this.spare = layerCount - 1;
+  }
+  device;
+  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;
+  }
+  /** How much of the pinned layer is taken, 0 to 1. */
+  get pinnedFill() {
+    return this.layers[this.pinned].nextY / this.size;
+  }
+  nextFrame() {
+    this.frame++;
+  }
+  /** Marks a layer as drawn from this frame, so eviction prefers others. */
+  touch(layer) {
+    this.layers[layer].lastUsed = this.frame;
+  }
+  isValid(slot) {
+    return slot !== null && this.layers[slot.layer].generation === slot.generation;
+  }
+  allocate(width, height) {
+    const w = Math.ceil(width) + PADDING;
+    const h = Math.ceil(height) + PADDING;
+    if (w > this.size || h > this.size) return null;
+    for (let index = 0; index < this.layers.length; index++) {
+      if (index === this.spare || index === this.pinned) continue;
+      const slot = this.allocateIn(index, w, h);
+      if (slot) return slot;
+    }
+    let stalest = -1;
+    for (let index = 0; index < this.layers.length; index++) {
+      const layer = this.layers[index];
+      if (index === this.spare || index === this.pinned || layer.lastAllocated === this.frame)
+        continue;
+      if (stalest < 0 || layer.lastUsed < this.layers[stalest].lastUsed) stalest = index;
+    }
+    if (stalest < 0) return null;
+    const target = this.recycle(stalest);
+    return this.allocateIn(target, w, h);
+  }
+  /** Space in the pinned layer, or null once it is full. */
+  allocatePinned(width, height) {
+    return this.allocateIn(this.pinned, Math.ceil(width) + PADDING, Math.ceil(height) + PADDING);
+  }
+  isPinned(slot) {
+    return slot !== null && slot.layer === this.pinned;
+  }
+  /** Moves the kept slots of `index` into the spare layer, wipes `index`, and swaps the two. */
+  recycle(index) {
+    const target = this.spare;
+    const from = this.layers[index];
+    this.evict(target);
+    const encoder = this.device.createCommandEncoder({ label: "gpucanvas atlas rescue" });
+    let copies = 0;
+    const seen = /* @__PURE__ */ new Set();
+    for (const slot of this.keep()) {
+      if (!slot || seen.has(slot) || slot.layer !== index || slot.generation !== from.generation) {
+        continue;
+      }
+      seen.add(slot);
+      const x0 = Math.floor(slot.x);
+      const y0 = Math.floor(slot.y);
+      const x1 = Math.min(this.size, Math.ceil(slot.x + slot.width));
+      const y1 = Math.min(this.size, Math.ceil(slot.y + slot.height));
+      const moved = this.allocateIn(target, x1 - x0 + PADDING, y1 - y0 + PADDING);
+      if (!moved) break;
+      encoder.copyTextureToTexture(
+        { texture: this.texture, origin: { x: x0, y: y0, z: index } },
+        { texture: this.texture, origin: { x: moved.x, y: moved.y, z: target } },
+        [x1 - x0, y1 - y0, 1]
+      );
+      copies++;
+      slot.layer = target;
+      slot.x = moved.x + (slot.x - x0);
+      slot.y = moved.y + (slot.y - y0);
+      slot.generation = moved.generation;
+    }
+    if (copies > 0) this.device.queue.submit([encoder.finish()]);
+    this.evict(index);
+    this.spare = index;
+    return target;
+  }
+  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 slot = {
+      layer: index,
+      x: shelf.x,
+      y: shelf.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.generation++;
+  }
+  destroy() {
+    this.texture.destroy();
+  }
+};
+
+// src/composite-shader.ts
+var compositeShader = (
+  /* wgsl */
+  `
+struct View {
+  size: vec2f,        // canvas size in CSS pixels
+  origin: vec2f,      // camera position, world units
+  zoom: f32,
+  dpr: f32,
+  atlasSize: f32,
+  _pad: f32,
+  placeholder: vec4f, // premultiplied color for nodes without a snapshot
+}
+
+@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
+  @location(2) info: vec4f, // layer, placeholder flag
+}
+
+struct Varyings {
+  @builtin(position) position: vec4f,
+  @location(0) texel: vec2f,
+  @location(1) @interpolate(flat) bounds: vec4f,
+  @location(2) @interpolate(flat) info: vec2f,
+}
+
+@vertex
+fn vs(@builtin(vertex_index) vertex: u32, instance: Instance) -> Varyings {
+  let corner = vec2f(f32(vertex & 1u), f32(vertex >> 1u));
+  // Snap edges to device pixels so a snapshot drawn at its raster scale stays crisp.
+  let scale = view.zoom * view.dpr;
+  let topLeft = round((instance.rect.xy - view.origin) * scale) / view.dpr;
+  let bottomRight = round((instance.rect.xy + instance.rect.zw - 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);
+  out.texel = mix(instance.uv.xy, instance.uv.zw, corner);
+  // 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;
+  return out;
+}
+
+@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 > 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);
+}
+`
+);
+
+// src/gpu-renderer.ts
+var FLOATS_PER_INSTANCE = 12;
+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;
+    const module = device.createShaderModule({
+      label: "gpucanvas composite",
+      code: compositeShader
+    });
+    this.pipeline = device.createRenderPipeline({
+      label: "gpucanvas composite",
+      layout: "auto",
+      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" }
+            ]
+          }
+        ]
+      },
+      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" }
+    });
+    this.uniforms = device.createBuffer({
+      size: this.uniformData.byteLength,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    this.bindGroup = device.createBindGroup({
+      layout: this.pipeline.getBindGroupLayout(0),
+      entries: [
+        { binding: 0, resource: { buffer: this.uniforms } },
+        { binding: 1, resource: atlas.view },
+        {
+          binding: 2,
+          resource: device.createSampler({ magFilter: "linear", minFilter: "linear" })
+        }
+      ]
+    });
+    this.instanceBuffer = this.createInstanceBuffer();
+  }
+  device;
+  context;
+  atlas;
+  background;
+  placeholder;
+  instances = new Float32Array(FLOATS_PER_INSTANCE * 4096);
+  instanceBuffer;
+  uniforms;
+  uniformData = new Float32Array(12);
+  pipeline;
+  bindGroup;
+  /** 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();
+  }
+  draw(camera, cssWidth, cssHeight, dpr, count) {
+    const { device } = this;
+    this.uniformData.set([
+      cssWidth,
+      cssHeight,
+      camera.x,
+      camera.y,
+      camera.zoom,
+      dpr,
+      this.atlas.size,
+      0,
+      ...this.placeholder
+    ]);
+    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.setPipeline(this.pipeline);
+      pass.setBindGroup(0, this.bindGroup);
+      pass.setVertexBuffer(0, this.instanceBuffer);
+      pass.draw(4, count);
+    }
+    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/page.ts
+var GAP = 4;
+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;
+  constructor(width, height) {
+    this.width = width;
+    this.height = height;
+    this.element = document.createElement("div");
+    this.element.dataset.gpucanvasPage = "";
+    Object.assign(this.element.style, {
+      position: "relative",
+      width: `${width}px`,
+      height: `${height}px`,
+      // Pages share the canvas origin: each one pulls the next back up by its own height.
+      marginBottom: `${-height}px`,
+      contain: "strict",
+      overflow: "hidden",
+      // Parked pages keep their layout but skip style, layout updates and paint. Unlike
+      // `display: none`, their nodes keep their size, so components that measure themselves
+      // (charts with a ResizeObserver) don't re-render empty every time a page parks.
+      contentVisibility: "hidden"
+    });
+  }
+  /** 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--;
+  }
+  setDrawable(drawable, frame) {
+    if (this.drawable === drawable) return;
+    this.drawable = drawable;
+    this.registered = false;
+    if (drawable) {
+      this.promotedFrame = frame;
+      this.element.style.contentVisibility = "";
+      this.element.setAttribute("drawable", "");
+    } else {
+      this.element.removeAttribute("drawable");
+      this.element.style.contentVisibility = "hidden";
+      this.element.style.transform = "";
+    }
+  }
+};
+
+// src/gpu-backend.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;
+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 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 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 nodes = /* @__PURE__ */ new Map();
+  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 isPinned = (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) => {
+    const now = performance.now();
+    detailScale = Math.min(deviceScale, MAX_DETAIL_SCALE);
+    frameView = view;
+    visible.length = 0;
+    plans.clear();
+    stats.needs = [0, 0, 0, 0];
+    for (const node of nodes.values()) {
+      if (!intersects(node.rect, view)) continue;
+      visible.push(node);
+      const scale = Math.min(
+        desiredScale,
+        MAX_RASTER_SCALE,
+        (atlasSize - 1) / node.rect.width,
+        (atlasSize - 1) / node.rect.height
+      );
+      if (node.dirty) node.changedAt = now;
+      const thumbnailEnough = scale <= THUMBNAIL_SCALE;
+      if (thumbnailEnough && freshThumb(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.preview = null;
+        node.tiles.length = 0;
+      }
+      const valid = atlas.isValid(node.slot);
+      let need = -1;
+      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);
+        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 && !node.previewTarget && jobs.length === 0) continue;
+      node.targetScale = thumbnailEnough ? THUMBNAIL_SCALE : scale;
+      node.priority = (need < 0 ? BLURRY : need) * 1e12 + distanceToCenter(node.rect, view);
+      let plan = plans.get(node.page);
+      if (!plan) {
+        plan = { page: node.page, nodes: [], previews: [], tiles: [], priority: node.priority };
+        plans.set(node.page, plan);
+      }
+      plan.priority = Math.min(plan.priority, node.priority);
+      if (need >= 0) plan.nodes.push(node);
+      if (node.previewTarget) plan.previews.push(node);
+      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) => {
+    const shown = intersection(node.rect, view);
+    node.previewTarget = null;
+    node.tiles = node.tiles.filter((tile) => atlas.isValid(tile.slot));
+    if (node.dirty) for (const tile of node.tiles) tile.stale = true;
+    if (!atlas.isValid(node.preview)) node.preview = null;
+    if (animating) {
+      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.previewTargetScale = scale;
+      }
+      scheduleAfterContentSettles();
+      return [];
+    }
+    const current = node.tiles.filter((tile) => tile.scale === detailScale && !tile.stale);
+    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++) {
+        if (current.some((tile) => tile.column === column && tile.row === row)) continue;
+        const rect = intersection(node.rect, {
+          x: node.rect.x + column * size,
+          y: node.rect.y + row * size,
+          width: size,
+          height: size
+        });
+        jobs.push({
+          node,
+          rect,
+          scale: detailScale,
+          column,
+          row,
+          priority: distanceToCenter(rect, view)
+        });
+      }
+    }
+    if (jobs.length === 0) {
+      node.tiles = current;
+      node.preview = null;
+    }
+    return jobs;
+  };
+  const fitPreview = (shown, scale) => {
+    const limit = (atlasSize - 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;
+    }
+    node.dirty = false;
+    node.wholeStale = false;
+  };
+  const pageSlots = /* @__PURE__ */ new Map();
+  const rasterize = (start) => {
+    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);
+    for (const plan of ordered) {
+      const { page } = plan;
+      if (!page.drawable || page.promotedFrame >= frameNumber || overBudget()) {
+        pending += plan.nodes.length + plan.previews.length + plan.tiles.length;
+        continue;
+      }
+      const scale = plan.nodes.reduce((max, node) => Math.max(max, node.targetScale), 0);
+      const members = pages.get(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,
+        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)) {
+        pending += plan.nodes.length + plan.previews.length + plan.tiles.length;
+        continue;
+      }
+      if (wholeSlot) {
+        const slot = wholeSlot;
+        calls++;
+        pixels += slot.width * slot.height;
+        for (const node of members) {
+          const part = {
+            layer: slot.layer,
+            generation: slot.generation,
+            x: slot.x + node.pageX * scale,
+            y: slot.y + node.pageY * scale,
+            width: node.rect.width * scale,
+            height: node.rect.height * scale
+          };
+          drawn(node, part, scale, start);
+        }
+        rasterized += members.size;
+      } else {
+        for (const node of plan.nodes) {
+          if (overBudget()) {
+            pending++;
+            continue;
+          }
+          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)),
+            thumbnail
+          );
+          const region = {
+            x: node.pageX,
+            y: node.pageY,
+            width: node.rect.width,
+            height: node.rect.height
+          };
+          if (!slot || !drawSnapshot(page, region, slot)) {
+            pending++;
+            continue;
+          }
+          calls++;
+          pixels += slot.width * slot.height;
+          drawn(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 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;
+        calls++;
+        warm.add(scale2);
+        pixels += slot.width * slot.height;
+        if (node.dirty) {
+          node.dirty = false;
+          node.wholeStale = true;
+          node.thumbStale = true;
+          node.refreshedAt = start;
+        }
+        return slot;
+      };
+      for (const node of plan.previews) {
+        const slot = drawRegion(node, node.previewTarget, node.previewTargetScale, node.preview);
+        if (!slot) {
+          pending++;
+          continue;
+        }
+        node.preview = slot;
+        node.previewRect = node.previewTarget;
+        node.previewScale = node.previewTargetScale;
+        node.previewTarget = null;
+      }
+      let tilesLeft = 0;
+      for (const job of plan.tiles) {
+        const { node, column, row, scale: scale2 } = job;
+        const old = node.tiles.findIndex(
+          (tile) => tile.stale && tile.scale === scale2 && tile.column === column && tile.row === row
+        );
+        const previous = old >= 0 ? node.tiles[old].slot : null;
+        const slot = node.dirty ? null : drawRegion(node, job.rect, scale2, previous);
+        if (!slot) {
+          tilesLeft++;
+          continue;
+        }
+        if (old >= 0) node.tiles.splice(old, 1);
+        node.tiles.push({ slot, rect: job.rect, scale: scale2, column, row, stale: false });
+      }
+      pending += tilesLeft;
+      for (const node of members) {
+        if (freshThumb(node) || node.dirty) continue;
+        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)),
+          true
+        );
+        const region = {
+          x: node.pageX,
+          y: node.pageY,
+          width: node.rect.width,
+          height: node.rect.height
+        };
+        if (!slot || !drawSnapshot(page, region, slot)) continue;
+        calls++;
+        node.thumb = slot;
+        node.thumbStale = false;
+        node.thumbAt = 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;
+  };
+  const composite = () => {
+    let instances = visible.length;
+    for (const node of visible) instances += node.tiles.length + (node.preview ? 1 : 0);
+    renderer.reserve(instances);
+    const data = renderer.instances;
+    let count = 0;
+    const push = (rect, slot) => {
+      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;
+      }
+    };
+    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 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;
+      if (before >= 2 && shown === 1) stats.lostPixels++;
+      if (before === 3 && shown === 2) stats.lostDetail++;
+      node.shown = shown;
+      node.shownFrame = stats.frames;
+      push(node.rect, base);
+      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);
+      for (const tile of node.tiles)
+        if (current(tile) && atlas.isValid(tile.slot)) push(tile.rect, tile.slot);
+    }
+    stats.onThumbnail = onThumbnail;
+    const cssWidth = canvas.clientWidth;
+    const dpr = canvas.width / Math.max(1, cssWidth);
+    renderer.draw(camera, cssWidth, canvas.clientHeight, dpr, count);
+  };
+  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 moving = start - lastCameraChange < SETTLE_MS;
+    planFrame(view, rasterScaleFor(camera.zoom * dpr), camera.zoom * dpr, moving);
+    if (!inPaint && plans.size > 0) {
+      const interval = start - lastFrameAt;
+      if (interval < 100) {
+        if (interval > SLOW_FRAME_MS) promotionsPerFrame = Math.max(1, promotionsPerFrame >> 1);
+        else if (interval < FAST_FRAME_MS)
+          promotionsPerFrame = Math.min(MAX_PROMOTIONS_PER_FRAME, promotionsPerFrame + 1);
+      }
+      lastFrameAt = start;
+      let promoted = 0;
+      for (const plan of [...plans.values()].sort((a, b) => a.priority - b.priority)) {
+        if (plan.page.drawable) continue;
+        if (promoted++ >= promotionsPerFrame) break;
+        plan.page.setDrawable(true, frameNumber);
+      }
+      awaitingPaint = true;
+      canvas.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);
+    }
+    stats.rasterMs = performance.now() - start;
+    composite();
+    stats.frames++;
+    positionLivePage();
+    stats.visible = visible.length;
+    stats.pending = pending;
+    stats.frameMs = performance.now() - start;
+    if (pending > 0) schedule();
+  };
+  let awaitingPaint = false;
+  canvas.onpaint = (event) => {
+    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()]) {
+        if (node?.page === page) {
+          node.dirty = true;
+          changed = true;
+        }
+      }
+    }
+    if (!awaitingPaint && !changed) return;
+    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) => {
+    let changed = false;
+    for (const record of records) {
+      const target = record.target;
+      if (record.type === "attributes" && (nodes.has(target) || pageByElement.has(target) || target === canvas)) {
+        continue;
+      }
+      const node = nodeOf(record.target);
+      if (node && !node.dirty) {
+        node.dirty = true;
+        if (!changed) changed = intersects(node.rect, viewNow());
+      }
+    }
+    if (changed) schedule();
+  });
+  mutations.observe(canvas, {
+    subtree: true,
+    childList: true,
+    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 dpr = canvas.width / Math.max(1, canvas.clientWidth);
+    const { zoom } = camera;
+    const drawn2 = new DOMMatrix([
+      zoom,
+      0,
+      0,
+      zoom,
+      ((live.rect.x - camera.x) * zoom - live.pageX * zoom) * dpr,
+      ((live.rect.y - camera.y) * zoom - live.pageY * zoom) * dpr
+    ]);
+    try {
+      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 worldX = camera.x + pointer.x / camera.zoom;
+    const worldY = camera.y + pointer.y / camera.zoom;
+    let hit = null;
+    for (const node of nodes.values()) {
+      const { x, y, width, height } = node.rect;
+      if (worldX >= x && worldX < x + width && worldY >= y && worldY < y + height) 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);
+  };
+  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);
+    if (!node) return;
+    node.dirty = true;
+    schedule();
+  };
+  canvas.addEventListener("load", onResourceLoad, true);
+  const onFontsLoaded = () => {
+    for (const node of nodes.values()) node.dirty = true;
+    schedule();
+  };
+  document.fonts.addEventListener("loadingdone", onFontsLoaded);
+  surface.addEventListener("pointermove", onPointerMove);
+  surface.addEventListener("pointerleave", onPointerLeave);
+  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 {
+    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;
+      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);
+      nodes.delete(element);
+      releaseNode(node);
+      element.remove();
+      schedule();
+    },
+    getNodeRect: (element) => {
+      const node = nodes.get(element);
+      return node ? { ...node.rect } : null;
+    },
+    getCamera: () => camera,
+    setCamera,
+    invalidate: onFontsLoaded,
+    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,
+      visible: stats.visible,
+      pending: stats.pending,
+      rasterizedLastFrame: stats.rasterizedLastFrame,
+      rasterCallsLastFrame: stats.rasterCallsLastFrame,
+      rasterMs: stats.rasterMs,
+      pages: pages.size,
+      drawablePages: [...pages.keys()].filter((page) => page.drawable).length,
+      atlasLayersUsed: atlas.usedLayers,
+      frameMs: stats.frameMs,
+      frames: stats.frames,
+      lostPixels: stats.lostPixels,
+      lostDetail: stats.lostDetail,
+      thumbnailFill: atlas.pinnedFill,
+      onThumbnail: stats.onThumbnail,
+      needs: stats.needs
+    }),
+    destroy() {
+      destroyed = true;
+      cancelAnimationFrame(rafId);
+      clearTimeout(settleTimer);
+      clearTimeout(lingerTimer);
+      clearTimeout(contentTimer);
+      mutations.disconnect();
+      document.fonts.removeEventListener("loadingdone", onFontsLoaded);
+      canvas.removeEventListener("load", onResourceLoad, true);
+      surface.removeEventListener("pointermove", onPointerMove);
+      surface.removeEventListener("pointerleave", onPointerLeave);
+      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();
+      renderer.destroy();
+      atlas.destroy();
+      device.destroy();
+    }
+  };
+}
+
+// src/index.ts
+async function createGpuCanvas2(host, options = {}) {
+  const mode = options.mode ?? "auto";
+  if (mode === "dom" || mode === "auto" && !supportsGpuCanvas()) {
+    return createDomCanvas(host, options);
+  }
+  try {
+    return await createGpuCanvas(host, options);
+  } catch (error) {
+    if (mode === "gpu") throw error;
+    return createDomCanvas(host, options);
+  }
+}
+
+export {
+  zoomAt,
+  fitCamera,
+  supportsGpuCanvas,
+  createGpuCanvas2 as createGpuCanvas
+};
+//# sourceMappingURL=chunk-JQQ44OTN.js.map