gpucanvas 0.2.0 → 0.3.0

package/dist/{chunk-VOFDBN5J.js → chunk-RBXGH44N.js}

@@ -1,4 +1,12 @@
 // src/camera.ts
+var screenToWorld = (camera, point) => ({
+  x: camera.x + point.x / camera.zoom,
+  y: camera.y + point.y / camera.zoom
+});
+var worldToScreen = (camera, point) => ({
+  x: (point.x - camera.x) * camera.zoom,
+  y: (point.y - camera.y) * camera.zoom
+});
 var MIN_ZOOM = 0.02;
 var MAX_ZOOM = 16;
 var clampZoom = (zoom) => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom));
@@ -16,6 +24,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;
 function fitCamera(bounds, viewportWidth, viewportHeight, padding = 40) {
   const zoom = clampZoom(
@@ -82,6 +91,392 @@ function bindCameraInput(element, getCamera, onChange) {
   };
 }
 
+// src/effects.ts
+var defineEffect = (definition) => Object.freeze({
+  animated: false,
+  params: [],
+  pad: 0,
+  ...definition
+});
+var effectParams = (effect, params) => [0, 1, 2, 3].map((i) => params?.[i] ?? effect.params[i] ?? 0);
+var effectPad = (effect, params) => typeof effect.pad === "function" ? effect.pad(params) : effect.pad;
+var HUE_ROTATE = (
+  /* wgsl */
+  `
+fn hueRotate(color: vec3f, degrees: f32) -> vec3f {
+  let c = cos(radians(degrees));
+  let s = sin(radians(degrees));
+  let m = mat3x3f(
+    vec3f(0.213 + 0.787 * c - 0.213 * s, 0.213 - 0.213 * c + 0.143 * s, 0.213 - 0.213 * c - 0.787 * s),
+    vec3f(0.715 - 0.715 * c - 0.715 * s, 0.715 + 0.285 * c + 0.140 * s, 0.715 - 0.715 * c + 0.715 * s),
+    vec3f(0.072 - 0.072 * c + 0.928 * s, 0.072 - 0.072 * c - 0.283 * s, 0.072 + 0.928 * c + 0.072 * s),
+  );
+  return m * color;
+}
+`
+);
+var hue = defineEffect({
+  name: "hue",
+  animated: true,
+  params: [90],
+  wgsl: (
+    /* wgsl */
+    `${HUE_ROTATE}
+fn effect(input: EffectInput) -> vec4f {
+  let color = source(input.uv);
+  return vec4f(clamp(hueRotate(color.rgb, input.time * input.params.x), vec3f(0.0), vec3f(color.a)), color.a);
+}`
+  ),
+  css: ([speed], time) => `hue-rotate(${(time * speed % 360).toFixed(1)}deg)`
+});
+var grayscale = defineEffect({
+  name: "grayscale",
+  params: [1],
+  wgsl: (
+    /* wgsl */
+    `
+fn effect(input: EffectInput) -> vec4f {
+  let color = source(input.uv);
+  let gray = dot(color.rgb, vec3f(0.2126, 0.7152, 0.0722));
+  return vec4f(mix(color.rgb, vec3f(gray), input.params.x), color.a);
+}`
+  ),
+  css: ([amount]) => `grayscale(${amount})`
+});
+var blur = defineEffect({
+  name: "blur",
+  params: [6],
+  pad: ([radius]) => radius,
+  wgsl: (
+    /* wgsl */
+    `
+fn effect(input: EffectInput) -> vec4f {
+  let radius = input.params.x / input.size;
+  var color = vec4f(0.0);
+  var weight = 0.0;
+  // A Vogel spiral: even coverage of the disk with few taps.
+  for (var i = 0u; i < 32u; i++) {
+    let r = sqrt((f32(i) + 0.5) / 32.0);
+    let a = f32(i) * 2.39996;
+    let w = exp(-2.0 * r * r);
+    color += source(input.uv + vec2f(cos(a), sin(a)) * r * radius) * w;
+    weight += w;
+  }
+  return color / weight;
+}`
+  ),
+  css: ([radius]) => `blur(${radius / 2}px)`
+});
+var glow = defineEffect({
+  name: "glow",
+  animated: true,
+  params: [0.31, 0.55, 1, 24],
+  pad: (params) => params[3],
+  period: Math.PI,
+  wgsl: (
+    /* wgsl */
+    `
+fn effect(input: EffectInput) -> vec4f {
+  let color = source(input.uv);
+  let reach = input.params.w * (0.65 + 0.35 * sin(input.time * 2.0));
+  // How much of the shape lies within reach, sampled on two rings.
+  var cover = 0.0;
+  for (var i = 0u; i < 24u; i++) {
+    let a = f32(i) * 0.2618;
+    let r = select(0.5, 1.0, i % 2u == 0u);
+    cover += source(input.uv + vec2f(cos(a), sin(a)) * r * reach / input.size).a;
+  }
+  let alpha = smoothstep(0.0, 1.0, cover / 24.0) * 0.9;
+  return color + vec4f(input.params.rgb * alpha, alpha) * (1.0 - color.a);
+}`
+  ),
+  css: ([r, g, b, reach], time) => {
+    const radius = reach * (0.65 + 0.35 * Math.sin(time * 2));
+    const rgb = [r, g, b].map((v) => Math.round(v * 255)).join(" ");
+    return `drop-shadow(0 0 ${(radius / 2).toFixed(1)}px rgb(${rgb} / 0.9))`;
+  }
+});
+var ripple = defineEffect({
+  name: "ripple",
+  animated: true,
+  params: [6, 90],
+  pad: ([amplitude]) => amplitude,
+  wgsl: (
+    /* wgsl */
+    `
+fn effect(input: EffectInput) -> vec4f {
+  let p = (input.uv - 0.5) * input.size;
+  let d = length(p);
+  let wave = sin(d / input.params.y * 6.2832 - input.time * 4.0);
+  let push = select(vec2f(0.0), p / d, d > 0.001) * wave * input.params.x;
+  let color = source(input.uv + push / input.size);
+  return vec4f(color.rgb * (1.0 + 0.06 * wave), color.a);
+}`
+  )
+});
+var pixelate = defineEffect({
+  name: "pixelate",
+  params: [8],
+  wgsl: (
+    /* wgsl */
+    `
+fn effect(input: EffectInput) -> vec4f {
+  let block = max(input.params.x, 1.0);
+  let cell = (floor(input.uv * input.size / block) + 0.5) * block;
+  return source(cell / input.size);
+}`
+  )
+});
+var dissolve = defineEffect({
+  name: "dissolve",
+  params: [0.5],
+  wgsl: (
+    /* wgsl */
+    `
+fn effect(input: EffectInput) -> vec4f {
+  let color = source(input.uv);
+  let p = input.uv * input.size / 24.0;
+  let n = noise(p) * 0.65 + noise(p * 2.7) * 0.35;
+  let edge = n - (input.params.x * 1.2 - 0.1);
+  let keep = smoothstep(0.0, 0.02, edge);
+  let burn = (1.0 - smoothstep(0.0, 0.08, edge)) * keep;
+  return color * keep + vec4f(1.0, 0.45, 0.1, 1.0) * burn * color.a;
+}`
+  ),
+  css: ([progress]) => `opacity(${1 - progress})`
+});
+var glass = defineEffect({
+  name: "glass",
+  animated: true,
+  params: [110, 1.8],
+  wgsl: (
+    /* wgsl */
+    `
+fn effect(input: EffectInput) -> vec4f {
+  let d = (input.uv - input.pointer) * input.size;
+  let radius = input.params.x;
+  let t = length(d) / radius;
+  if (t >= 1.0) {
+    let shadow = (1.0 - smoothstep(1.0, 1.12, t)) * 0.18;
+    let under = source(input.uv);
+    return vec4f(under.rgb * (1.0 - shadow), under.a);
+  }
+  // A dome: strongest at the center, flattening to no change at the rim.
+  let scale = mix(1.0 / input.params.y, 1.0, t * t * t);
+  let bent = input.pointer + d * scale / input.size;
+  let fringe = d / radius * (t * t * 6.0) / input.size;
+  let middle = source(bent);
+  var color = vec4f(source(bent + fringe).r, middle.g, source(bent - fringe).b, middle.a);
+  // A bright rim and a highlight up and to the left.
+  let rim = smoothstep(0.86, 0.97, t) * (1.0 - smoothstep(0.985, 1.0, t));
+  let shine = pow(max(0.0, 1.0 - length(d / radius - vec2f(-0.38, -0.42)) / 0.42), 2.0);
+  // Light catches the upper left of the rim, and the lower right falls into shade.
+  let side = dot(normalize(d + vec2f(0.0001)), vec2f(-0.7071, -0.7071));
+  let light = rim * (0.25 + 0.35 * side) + shine * 0.3;
+  let shade = rim * max(0.0, -side) * 0.25;
+  color = vec4f(color.rgb * (1.0 - shade), color.a);
+  color = color + vec4f(light, light, light, light) * (1.0 - color.a * 0.4);
+  return min(color, vec4f(1.0));
+}`
+  )
+});
+var shockwave = defineEffect({
+  name: "shockwave",
+  animated: true,
+  params: [900, 60, 18],
+  wgsl: (
+    /* wgsl */
+    `
+fn effect(input: EffectInput) -> vec4f {
+  let fade = exp(-input.sincePress * 1.6);
+  if (fade < 0.01) {
+    return source(input.uv);
+  }
+  let d = (input.uv - input.press) * input.size;
+  let dist = length(d);
+  let x = (dist - input.sincePress * input.params.x) / input.params.y;
+  let ring = exp(-x * x);
+  let push = select(vec2f(0.0), d / dist, dist > 0.001) * sin(x * 2.5) * ring * input.params.z * fade;
+  let offset = push / input.size;
+  let middle = source(input.uv - offset);
+  let color = vec4f(source(input.uv - offset * 1.4).r, middle.g, source(input.uv - offset * 0.6).b, middle.a);
+  return color + vec4f(0.45, 0.65, 1.0, 1.0) * ring * fade * 0.25 * middle.a;
+}`
+  )
+});
+var glitch = defineEffect({
+  name: "glitch",
+  animated: true,
+  wgsl: (
+    /* wgsl */
+    `
+fn effect(input: EffectInput) -> vec4f {
+  // Every node glitches on its own schedule.
+  let own = hash(input.size);
+  let tick = floor(input.time * 12.0 + own * 50.0);
+  let burst = step(0.82, hash(vec2f(floor(tick / 3.0), own)));
+  if (burst == 0.0) {
+    return source(input.uv);
+  }
+  let row = floor(input.uv.y * mix(12.0, 40.0, hash(vec2f(tick, 1.0))));
+  let tear = step(0.6, hash(vec2f(row, tick))) * (hash(vec2f(row, tick + 7.0)) - 0.5) * 0.06;
+  let uv = vec2f(input.uv.x + tear, input.uv.y);
+  let split = vec2f(0.012 * hash(vec2f(tick, 3.0)), 0.0);
+  let middle = source(uv);
+  var color = vec4f(source(uv + split).r, middle.g, source(uv - split).b, middle.a);
+  // A few blocks show pixels from elsewhere, with their channels swapped.
+  let block = floor(input.uv * vec2f(14.0, 8.0));
+  if (hash(block + vec2f(tick)) > 0.975) {
+    let moved = source(fract(input.uv + vec2f(hash(block), hash(block + 9.0)) * 0.3));
+    color = vec4f(moved.brg, moved.a);
+  }
+  return color;
+}`
+  )
+});
+var vhs = defineEffect({
+  name: "vhs",
+  animated: true,
+  wgsl: (
+    /* wgsl */
+    `
+fn effect(input: EffectInput) -> vec4f {
+  let y = input.uv.y;
+  let t = input.time;
+  var wave = sin(y * 38.0 + t * 3.0) * 0.0012 + sin(y * 6.0 - t * 1.3) * 0.002;
+  // Head-switching noise along the bottom.
+  let bottom = smoothstep(0.93, 1.0, y);
+  wave += bottom * (hash(vec2f(floor(y * 180.0), floor(t * 30.0))) - 0.5) * 0.04;
+  let uv = vec2f(input.uv.x + wave, y);
+  let bleed = vec2f(3.0 / input.size.x, 0.0);
+  let middle = source(uv);
+  var color = vec4f(source(uv + bleed).r, middle.g, source(uv - bleed * 1.5).b, middle.a);
+  // Softer, warmer and a little washed out.
+  let gray = dot(color.rgb, vec3f(0.299, 0.587, 0.114));
+  color = vec4f(mix(vec3f(gray), color.rgb, 0.8) * vec3f(1.04, 1.0, 0.92), color.a);
+  let band = smoothstep(0.08, 0.0, abs(fract(y * 0.6 - t * 0.12) - 0.5));
+  let lines = 0.94 + 0.06 * sin(y * input.size.y * 3.1416);
+  let grain = (hash(input.uv * input.size + vec2f(t * 97.0, t * 61.0)) - 0.5) * 0.12;
+  return vec4f(clamp(color.rgb * lines + (band * 0.08 + grain) * color.a, vec3f(0.0), vec3f(color.a)), color.a);
+}`
+  )
+});
+var frost = defineEffect({
+  name: "frost",
+  animated: true,
+  params: [140],
+  wgsl: (
+    /* wgsl */
+    `
+fn effect(input: EffectInput) -> vec4f {
+  let p = input.uv * input.size;
+  let dist = length((input.uv - input.pointer) * input.size);
+  let edge = noise(p / 40.0) * 50.0;
+  let ice = smoothstep(input.params.x * 0.55, input.params.x * 1.2, dist + edge);
+  if (ice <= 0.0) {
+    return source(input.uv);
+  }
+  // Frosted glass: the node seen blurred and bent through uneven ice.
+  let thick = noise(p / 90.0) * 0.6 + noise(p / 23.0) * 0.4;
+  let bend = (vec2f(noise(p / 14.0), noise(p / 14.0 + 31.0)) - 0.5) * 6.0 * ice;
+  var color = vec4f(0.0);
+  for (var i = 0u; i < 8u; i++) {
+    let a = f32(i) * 0.7854 + 0.4;
+    let r = select(3.0, 6.0, i % 2u == 0u) * ice;
+    color += source((p + bend + vec2f(cos(a), sin(a)) * r) / input.size);
+  }
+  color /= 8.0;
+  let white = vec4f(0.9, 0.95, 1.0, 1.0) * color.a;
+  // Feathery crystals and a few glints.
+  let crystals = smoothstep(0.7, 0.95, noise(p / 12.0 + noise(p / 40.0) * 2.0)) * 0.1;
+  let glint = step(0.997, hash(floor(p / 1.5))) * 0.8;
+  let frosted = mix(color, white, (0.3 + thick * 0.25) * ice);
+  return min(frosted + vec4f((crystals + glint) * ice) * color.a, vec4f(color.a));
+}`
+  )
+});
+var dither = defineEffect({
+  name: "dither",
+  animated: true,
+  params: [130, 4],
+  wgsl: (
+    /* wgsl */
+    `
+fn effect(input: EffectInput) -> vec4f {
+  let p = input.uv * input.size;
+  let dist = length((input.uv - input.pointer) * input.size);
+  let radius = input.params.x;
+  if (dist > radius + 1.5) {
+    return source(input.uv);
+  }
+  let block = max(input.params.y, 1.0);
+  let cell = floor(p / block);
+  let base = source((cell + 0.5) * block / input.size);
+  var bayer = array<f32, 16>(0.0, 8.0, 2.0, 10.0, 12.0, 4.0, 14.0, 6.0, 3.0, 11.0, 1.0, 9.0, 15.0, 7.0, 13.0, 5.0);
+  let index = u32(cell.x) % 4u + (u32(cell.y) % 4u) * 4u;
+  let threshold = (bayer[index] + 0.5) / 16.0 - 0.5;
+  // Two levels per channel: eight colors, mixed by the pattern.
+  let straight = base.rgb / max(base.a, 0.0001);
+  let levels = floor(clamp(straight + threshold * 0.6, vec3f(0.0), vec3f(1.0)) + 0.5);
+  let dithered = vec4f(levels * base.a, base.a);
+  let ring = 1.0 - smoothstep(0.0, 1.5, abs(dist - radius));
+  return mix(dithered, vec4f(0.1, 0.1, 0.12, 1.0), ring * 0.8);
+}`
+  )
+});
+var EFFECTS = {
+  glass,
+  shockwave,
+  glitch,
+  vhs,
+  frost,
+  dither,
+  glow,
+  hue,
+  ripple,
+  blur,
+  pixelate,
+  dissolve,
+  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`;
@@ -107,6 +502,7 @@ function boundsOf(rects) {
 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) {
@@ -129,11 +525,96 @@ function createDomCanvas(host, options) {
     transformOrigin: "0 0",
     willChange: "transform"
   });
+  const overlay = document.createElement("div");
+  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();
-  let selected = /* @__PURE__ */ new Set();
-  const outline = `calc(${SELECTION_WIDTH}px / var(--gpucanvas-zoom)) solid ${options.selectionColor ?? DEFAULT_SELECTION_COLOR}`;
+  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);
+  const hoverRing = ring(options.hoverColor ?? selectionColor, HOVER_WIDTH);
+  let selection = /* @__PURE__ */ new Set();
+  let hovered = null;
+  let outlinedNodes = /* @__PURE__ */ new Set();
+  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;
+  };
+  let boxFrame = 0;
+  const placeBoxes = () => {
+    boxFrame = boxes.size ? requestAnimationFrame(placeBoxes) : 0;
+    for (const [element, box] of boxes) {
+      const rect = elementRect(element);
+      box.style.display = rect ? "block" : "none";
+      if (rect) {
+        box.style.transform = `translate(${rect.x}px, ${rect.y}px)`;
+        box.style.width = `${rect.width}px`;
+        box.style.height = `${rect.height}px`;
+      }
+    }
+  };
+  const drawOutlines = () => {
+    const wanted = /* @__PURE__ */ new Map();
+    for (const element of selection) wanted.set(element, selectionRing);
+    if (hovered && !wanted.has(hovered)) wanted.set(hovered, hoverRing);
+    const nextNodes = /* @__PURE__ */ new Set();
+    for (const [element, outline] of wanted) {
+      if (!nodes.has(element)) continue;
+      element.style.outline = outline;
+      nextNodes.add(element);
+    }
+    for (const node of outlinedNodes) if (!nextNodes.has(node)) node.style.outline = "";
+    outlinedNodes = nextNodes;
+    for (const [element, box] of boxes) {
+      if (wanted.has(element)) continue;
+      box.remove();
+      boxes.delete(element);
+    }
+    for (const [element, outline] of wanted) {
+      if (nodes.has(element)) continue;
+      let box = boxes.get(element);
+      if (!box) {
+        box = document.createElement("div");
+        Object.assign(box.style, {
+          position: "absolute",
+          left: "0",
+          top: "0",
+          pointerEvents: "none"
+        });
+        overlay.append(box);
+        boxes.set(element, box);
+      }
+      box.style.outline = outline;
+    }
+    if (boxes.size && !boxFrame) placeBoxes();
+  };
+  const animations = /* @__PURE__ */ new Map();
+  const KEYFRAMES = 24;
+  const clearEffect = (element) => {
+    animations.get(element)?.cancel();
+    animations.delete(element);
+    element.style.filter = "";
+  };
+  const applyEffect = (element, effect, params) => {
+    clearEffect(element);
+    if (!effect?.css) return;
+    const values = effectParams(effect, params);
+    if (!effect.animated) {
+      element.style.filter = effect.css(values, 0);
+      return;
+    }
+    const period = effect.period ?? 4;
+    const keyframes = Array.from({ length: KEYFRAMES + 1 }, (_, i) => ({
+      filter: effect.css(values, i / KEYFRAMES * period)
+    }));
+    animations.set(
+      element,
+      element.animate(keyframes, { duration: period * 1e3, iterations: Infinity })
+    );
+  };
   let camera = options.camera ?? DEFAULT_CAMERA;
   let frameMs = 0;
   const apply = () => {
@@ -166,22 +647,39 @@ function createDomCanvas(host, options) {
       applyNodeSize(element, rect);
     },
     removeNode(element) {
+      clearEffect(element);
       nodes.delete(element);
-      selected.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) {
-      const next = new Set([...elements].filter((element) => nodes.has(element)));
-      for (const element of selected) if (!next.has(element)) element.style.outline = "";
-      for (const element of next) if (!selected.has(element)) element.style.outline = outline;
-      selected = next;
+      selection = new Set(elements);
+      drawOutlines();
+    },
+    setHover(element) {
+      if (element === hovered) return;
+      hovered = element;
+      drawOutlines();
+    },
+    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() {
     },
@@ -208,6 +706,7 @@ function createDomCanvas(host, options) {
       };
     },
     destroy() {
+      cancelAnimationFrame(boxFrame);
       unbindInput();
       surface.remove();
     }
@@ -365,7 +864,7 @@ var Atlas = class {
 };
 
 // src/composite-shader.ts
-var compositeShader = (
+var prelude = (
   /* wgsl */
   `
 struct View {
@@ -374,9 +873,10 @@ struct View {
   zoom: f32,
   dpr: f32,
   atlasSize: f32,
-  outline: f32,       // selection ring width, CSS pixels
+  time: f32,          // seconds since the canvas started
   placeholder: vec4f, // premultiplied color for nodes without a snapshot
-  selection: vec4f,   // premultiplied selection ring color
+  pointer: vec4f,     // pointer and last press in world units; far away when there is none
+  pressTime: f32,     // seconds since the last press
 }
 
 @group(0) @binding(0) var<uniform> view: View;
@@ -385,8 +885,9 @@ struct View {
 
 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, kind: 0 snapshot, 1 placeholder, 2 selection ring
+  @location(1) uv: vec4f,   // atlas texels x0, y0, x1, y1; for a ring, its premultiplied color
+  @location(2) info: vec4f, // layer, kind (0 snapshot, 1 placeholder, 2 ring), ring width or effect pad
+  @location(3) params: vec4f, // an effect's parameters
 }
 
 struct Varyings {
@@ -394,14 +895,19 @@ struct Varyings {
   @location(0) texel: vec2f,
   @location(1) @interpolate(flat) bounds: vec4f,
   @location(2) @interpolate(flat) info: vec2f,
+  @location(3) @interpolate(flat) color: vec4f,
+  @location(4) uv: vec2f, // 0 to 1 across the node, past that in an effect's padding
+  @location(5) @interpolate(flat) size: vec2f,
+  @location(6) @interpolate(flat) params: vec4f,
+  @location(7) @interpolate(flat) corner: vec2f, // the node's top left in world units
 }
 
 @vertex
 fn vs(@builtin(vertex_index) vertex: u32, instance: Instance) -> Varyings {
   let corner = vec2f(f32(vertex & 1u), f32(vertex >> 1u));
-  // A selection ring's quad reaches past the node by the ring's width.
+  // A ring's quad reaches past its element by the ring's width, an effect's by its padding.
   let ring = instance.info.y > 1.5;
-  let grow = select(0.0, view.outline / view.zoom, ring);
+  let grow = select(instance.info.z, instance.info.z / view.zoom, ring);
   let start = instance.rect.xy - grow;
   let end = instance.rect.xy + instance.rect.zw + grow;
   // Snap edges to device pixels so a snapshot drawn at its raster scale stays crisp.
@@ -412,28 +918,39 @@ fn vs(@builtin(vertex_index) vertex: u32, instance: Instance) -> Varyings {
   var out: Varyings;
   out.position = vec4f(point.x / view.size.x * 2.0 - 1.0, 1.0 - point.y / view.size.y * 2.0, 0.0, 1.0);
   if (ring) {
-    // World units from the node's top left, and the node's own edges.
+    // World units from the element's top left, and the element's own edges.
     out.texel = mix(vec2f(-grow), instance.rect.zw + grow, corner);
     out.bounds = vec4f(0.0, 0.0, instance.rect.zw);
+    out.color = instance.uv;
   } else {
-    out.texel = mix(instance.uv.xy, instance.uv.zw, corner);
+    let pad = grow * (instance.uv.zw - instance.uv.xy) / instance.rect.zw;
+    out.texel = mix(instance.uv.xy - pad, instance.uv.zw + pad, corner);
+    out.color = instance.uv;
     // Half a texel inside the node's rectangle: the outermost sample center that cannot blend
     // with whatever sits next to it in the atlas.
     out.bounds = vec4f(instance.uv.xy + 0.5, instance.uv.zw - 0.5);
   }
   out.info = instance.info.xy;
+  out.uv = mix(-grow / instance.rect.zw, 1.0 + grow / instance.rect.zw, corner);
+  out.size = instance.rect.zw;
+  out.corner = instance.rect.xy;
+  out.params = instance.params;
   return out;
 }
-
+`
+);
+var compositeShader = (
+  /* wgsl */
+  `${prelude}
 @fragment
 fn fs(in: Varyings) -> @location(0) vec4f {
   // Derivatives first: WGSL only allows them in uniform control flow.
   let dx = dpdx(in.texel);
   let dy = dpdy(in.texel);
   if (in.info.y > 1.5) {
-    // The ring covers what lies outside the node; the node itself shows through.
+    // 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), view.selection, max(outside.x, outside.y) > 0.0);
+    return select(vec4f(0.0), in.color, max(outside.x, outside.y) > 0.0);
   }
   if (in.info.y > 0.5) {
     return view.placeholder;
@@ -454,25 +971,124 @@ fn fs(in: Varyings) -> @location(0) vec4f {
 }
 `
 );
+var effectShader = (wgsl) => (
+  /* wgsl */
+  `${prelude}
+struct EffectInput {
+  uv: vec2f,
+  size: vec2f,
+  time: f32,
+  zoom: f32,
+  params: vec4f,
+  pointer: vec2f,
+  press: vec2f,
+  sincePress: f32,
+}
+
+var<private> sourceRect: vec4f;
+var<private> sourceLayer: i32;
+
+fn source(uv: vec2f) -> vec4f {
+  if (any(uv < vec2f(0.0)) || any(uv > vec2f(1.0))) {
+    return vec4f(0.0);
+  }
+  let texel = clamp(mix(sourceRect.xy, sourceRect.zw, uv), sourceRect.xy + 0.5, sourceRect.zw - 0.5);
+  return textureSampleLevel(atlas, atlasSampler, texel / view.atlasSize, sourceLayer, 0.0);
+}
+
+fn hash(p: vec2f) -> f32 {
+  return fract(sin(dot(p, vec2f(127.1, 311.7))) * 43758.5453);
+}
+
+fn noise(p: vec2f) -> f32 {
+  let i = floor(p);
+  let f = fract(p);
+  let u = f * f * (3.0 - 2.0 * f);
+  return mix(
+    mix(hash(i), hash(i + vec2f(1.0, 0.0)), u.x),
+    mix(hash(i + vec2f(0.0, 1.0)), hash(i + vec2f(1.0, 1.0)), u.x),
+    u.y,
+  );
+}
+
+${wgsl}
+
+@fragment
+fn fs(in: Varyings) -> @location(0) vec4f {
+  sourceRect = in.color;
+  sourceLayer = i32(in.info.x);
+  let pointer = (view.pointer.xy - in.corner) / in.size;
+  let press = (view.pointer.zw - in.corner) / in.size;
+  return effect(
+    EffectInput(in.uv, in.size, view.time, view.zoom, in.params, pointer, press, view.pressTime),
+  );
+}
+`
+);
 
 // src/gpu-renderer.ts
-var FLOATS_PER_INSTANCE = 12;
+var FLOATS_PER_INSTANCE = 16;
 var CompositeRenderer = class {
-  constructor(device, context, format, atlas, background, placeholder, selection, outline) {
+  constructor(device, context, format, atlas, background, placeholder) {
     this.device = device;
     this.context = context;
     this.atlas = atlas;
     this.background = background;
     this.placeholder = placeholder;
-    this.selection = selection;
-    this.outline = outline;
-    const module = device.createShaderModule({
-      label: "gpucanvas composite",
-      code: compositeShader
+    this.bindGroupLayout = device.createBindGroupLayout({
+      entries: [
+        { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: {} },
+        {
+          binding: 1,
+          visibility: GPUShaderStage.FRAGMENT,
+          texture: { viewDimension: "2d-array" }
+        },
+        { binding: 2, visibility: GPUShaderStage.FRAGMENT, sampler: {} }
+      ]
+    });
+    this.sampler = device.createSampler({ magFilter: "linear", minFilter: "linear" });
+    this.pipeline = device.createRenderPipeline(
+      this.pipelineDescriptor("gpucanvas composite", compositeShader, format)
+    );
+    this.format = format;
+    this.uniforms = device.createBuffer({
+      size: this.uniformData.byteLength,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
     });
-    this.pipeline = device.createRenderPipeline({
-      label: "gpucanvas composite",
-      layout: "auto",
+    this.bindGroup = device.createBindGroup({
+      layout: this.bindGroupLayout,
+      entries: [
+        { binding: 0, resource: { buffer: this.uniforms } },
+        { binding: 1, resource: atlas.view },
+        { binding: 2, resource: this.sampler }
+      ]
+    });
+    this.instanceBuffer = this.createInstanceBuffer();
+  }
+  device;
+  context;
+  atlas;
+  background;
+  placeholder;
+  instances = new Float32Array(FLOATS_PER_INSTANCE * 4096);
+  instanceBuffer;
+  uniforms;
+  uniformData = new Float32Array(20);
+  pipeline;
+  bindGroup;
+  bindGroupLayout;
+  sampler;
+  /** Effect pipelines, null while one compiles. Compiling never blocks a frame. */
+  effects = /* @__PURE__ */ new Map();
+  /** Called when an effect pipeline is ready, so the caller can draw it. */
+  onEffectReady = () => {
+  };
+  format;
+  pipelineDescriptor(label, code, format) {
+    const module = this.device.createShaderModule({ label, code });
+    return {
+      label,
+      layout: this.device.createPipelineLayout({ bindGroupLayouts: [this.bindGroupLayout] }),
       vertex: {
         module,
         entryPoint: "vs",
@@ -483,7 +1099,8 @@ var CompositeRenderer = class {
             attributes: [
               { shaderLocation: 0, offset: 0, format: "float32x4" },
               { shaderLocation: 1, offset: 16, format: "float32x4" },
-              { shaderLocation: 2, offset: 32, format: "float32x4" }
+              { shaderLocation: 2, offset: 32, format: "float32x4" },
+              { shaderLocation: 3, offset: 48, format: "float32x4" }
             ]
           }
         ]
@@ -503,37 +1120,24 @@ var CompositeRenderer = class {
         ]
       },
       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();
+    };
+  }
+  /** Whether `effect` can draw this frame. The first ask starts compiling it. */
+  hasEffect(effect) {
+    if (this.effects.has(effect)) return this.effects.get(effect) !== null;
+    this.effects.set(effect, null);
+    this.device.createRenderPipelineAsync(
+      this.pipelineDescriptor(
+        `gpucanvas effect ${effect.name}`,
+        effectShader(effect.wgsl),
+        this.format
+      )
+    ).then((pipeline) => {
+      this.effects.set(effect, pipeline);
+      this.onEffectReady();
+    }).catch((error) => console.error(`[gpucanvas] effect "${effect.name}" failed`, error));
+    return false;
   }
-  device;
-  context;
-  atlas;
-  background;
-  placeholder;
-  selection;
-  outline;
-  instances = new Float32Array(FLOATS_PER_INSTANCE * 4096);
-  instanceBuffer;
-  uniforms;
-  uniformData = new Float32Array(16);
-  pipeline;
-  bindGroup;
   /** Grows the CPU and GPU instance storage to hold at least `count` instances. */
   reserve(count) {
     const floats = count * FLOATS_PER_INSTANCE;
@@ -542,7 +1146,7 @@ var CompositeRenderer = class {
     this.instanceBuffer.destroy();
     this.instanceBuffer = this.createInstanceBuffer();
   }
-  draw(camera, cssWidth, cssHeight, dpr, count) {
+  draw(camera, cssWidth, cssHeight, dpr, count, runs, effects) {
     const { device } = this;
     this.uniformData.set([
       cssWidth,
@@ -552,9 +1156,13 @@ var CompositeRenderer = class {
       camera.zoom,
       dpr,
       this.atlas.size,
-      this.outline,
+      effects.time,
       ...this.placeholder,
-      ...this.selection
+      effects.pointer.x,
+      effects.pointer.y,
+      effects.press.x,
+      effects.press.y,
+      effects.sincePress
     ]);
     device.queue.writeBuffer(this.uniforms, 0, this.uniformData);
     if (count > 0) {
@@ -579,10 +1187,14 @@ var CompositeRenderer = class {
       ]
     });
     if (count > 0) {
-      pass.setPipeline(this.pipeline);
       pass.setBindGroup(0, this.bindGroup);
       pass.setVertexBuffer(0, this.instanceBuffer);
-      pass.draw(4, count);
+      let current = null;
+      for (const run of runs.length ? runs : [{ effect: null, start: 0, count }]) {
+        const pipeline = run.effect && this.effects.get(run.effect) || this.pipeline;
+        if (pipeline !== current) pass.setPipeline(current = pipeline);
+        pass.draw(4, run.count, 0, run.start);
+      }
     }
     pass.end();
     device.queue.submit([encoder.finish()]);
@@ -773,12 +1385,32 @@ async function createGpuCanvas(host, options) {
     context,
     format,
     atlas,
-    ...colorsFor(options.background ?? "#f4f4f5"),
-    premultiplied(cssColorToRgba(options.selectionColor ?? DEFAULT_SELECTION_COLOR)),
-    SELECTION_WIDTH
+    ...colorsFor(options.background ?? "#f4f4f5")
   );
+  const selectionColor = premultiplied(
+    cssColorToRgba(options.selectionColor ?? DEFAULT_SELECTION_COLOR)
+  );
+  const hoverColor = options.hoverColor ? premultiplied(cssColorToRgba(options.hoverColor)) : selectionColor;
   const nodes = /* @__PURE__ */ new Map();
-  const selected = /* @__PURE__ */ new Set();
+  const effects = /* @__PURE__ */ new Map();
+  const startedAt = performance.now();
+  const FAR_AWAY = { x: -1e7, y: -1e7 };
+  renderer.onEffectReady = () => schedule();
+  const runs = [];
+  let effectsMoving = false;
+  let selection = /* @__PURE__ */ new Set();
+  let hovered = null;
+  const ringRects = /* @__PURE__ */ new Map();
+  const ringRect = (element) => {
+    const own = nodes.get(element);
+    if (own) return own.rect;
+    const at = element.isConnected ? nodeOfElement(nodes, element) : null;
+    if (!at) return null;
+    const node = nodes.get(at);
+    let rect = ringRects.get(element);
+    if (!rect) ringRects.set(element, rect = rectInNode(at, node.rect, element));
+    return rect;
+  };
   const pages = /* @__PURE__ */ new Map();
   atlas.keep = function* () {
     const onScreen = (tile) => intersects(tile.rect, frameView);
@@ -1174,12 +1806,22 @@ async function createGpuCanvas(host, options) {
   };
   const composite = () => {
     let instances = visible.length;
-    for (const node of visible)
-      instances += node.tiles.length + (node.preview ? 1 : 0) + (selected.has(node) ? 1 : 0);
+    for (const node of visible) instances += node.tiles.length + (node.preview ? 1 : 0);
+    instances += selection.size + 1;
     renderer.reserve(instances);
     const data = renderer.instances;
     let count = 0;
+    runs.length = 0;
+    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;
@@ -1196,11 +1838,40 @@ async function createGpuCanvas(host, options) {
       } 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 = (rect) => {
+    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.set([rect.x, rect.y, rect.width, rect.height], offset);
+      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;
     };
     let onThumbnail = 0;
     for (const node of visible) {
@@ -1214,6 +1885,15 @@ async function createGpuCanvas(host, options) {
       if (before === 3 && shown === 2) stats.lostDetail++;
       node.shown = shown;
       node.shownFrame = stats.frames;
+      const worn = effects.size ? effects.get(node.element) : void 0;
+      if (worn) {
+        if (worn.effect.animated) effectsMoving = true;
+        if (base && renderer.hasEffect(worn.effect)) {
+          pushEffect(node, base, worn);
+          continue;
+        }
+        effectsMoving = true;
+      }
       push(node.rect, base);
       const current = (tile) => tile.scale === detailScale && !tile.stale;
       for (const tile of node.tiles)
@@ -1223,12 +1903,17 @@ async function createGpuCanvas(host, options) {
         if (current(tile) && atlas.isValid(tile.slot)) push(tile.rect, tile.slot);
     }
     stats.onThumbnail = onThumbnail;
-    if (selected.size) {
-      for (const node of visible) if (selected.has(node)) pushRing(node.rect);
-    }
+    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);
-    renderer.draw(camera, cssWidth, canvas.clientHeight, dpr, count);
+    const now = performance.now();
+    renderer.draw(camera, cssWidth, canvas.clientHeight, dpr, count, runs, {
+      time: (now - startedAt) / 1e3,
+      pointer: pointer ? screenToWorld(camera, pointer) : FAR_AWAY,
+      press,
+      sincePress: Math.min((now - pressedAt) / 1e3, 1e4)
+    });
   };
   const frame = (inPaint) => {
     if (destroyed) return;
@@ -1272,7 +1957,7 @@ async function createGpuCanvas(host, options) {
     stats.visible = visible.length;
     stats.pending = pending;
     stats.frameMs = performance.now() - start;
-    if (pending > 0) schedule();
+    if (pending > 0 || effectsMoving) schedule();
   };
   let awaitingPaint = false;
   canvas.onpaint = (event) => {
@@ -1287,6 +1972,7 @@ async function createGpuCanvas(host, options) {
         }
       }
     }
+    if (changed) ringRects.clear();
     if (!awaitingPaint && !changed) return;
     awaitingPaint = false;
     frame(true);
@@ -1300,6 +1986,7 @@ async function createGpuCanvas(host, options) {
     return element ? nodes.get(element) : void 0;
   };
   const mutations = new MutationObserver((records) => {
+    ringRects.clear();
     let changed = false;
     for (const record of records) {
       const target = record.target;
@@ -1382,13 +2069,9 @@ async function createGpuCanvas(host, options) {
   };
   const pickLive = () => {
     if (!pointer) return setLive(null);
-    const worldX = camera.x + pointer.x / camera.zoom;
-    const worldY = camera.y + pointer.y / camera.zoom;
+    const point = screenToWorld(camera, pointer);
     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;
-    }
+    for (const node of nodes.values()) if (containsPoint(node.rect, point)) hit = node;
     setLive(hit);
   };
   const onPointerMove = (event) => {
@@ -1400,6 +2083,17 @@ async function createGpuCanvas(host, options) {
     pointer = null;
     setLive(null);
   };
+  let press = FAR_AWAY;
+  let pressedAt = -Infinity;
+  const onPointerDown = (event) => {
+    const bounds = canvas.getBoundingClientRect();
+    press = screenToWorld(camera, {
+      x: event.clientX - bounds.left,
+      y: event.clientY - bounds.top
+    });
+    pressedAt = performance.now();
+    if (effects.size) schedule();
+  };
   const onFocusIn = (event) => {
     const node = nodeOf(event.target) ?? null;
     if (node === focused) return;
@@ -1438,6 +2132,7 @@ async function createGpuCanvas(host, options) {
   document.fonts.addEventListener("loadingdone", onFontsLoaded);
   surface.addEventListener("pointermove", onPointerMove);
   surface.addEventListener("pointerleave", onPointerLeave);
+  surface.addEventListener("pointerdown", onPointerDown, true);
   canvas.addEventListener("focusin", onFocusIn);
   canvas.addEventListener("focusout", onFocusOut);
   const usedAt = /* @__PURE__ */ new WeakMap();
@@ -1599,6 +2294,7 @@ async function createGpuCanvas(host, options) {
       if (!node) return;
       const resized = node.rect.width !== rect.width || node.rect.height !== rect.height;
       node.rect = rect;
+      ringRects.clear();
       if (resized) {
         if (live === node) setLive(null);
         releaseNode(node);
@@ -1613,7 +2309,8 @@ async function createGpuCanvas(host, options) {
       if (lingering === node) lingering = null;
       if (focused === node) focused = null;
       transitioning.delete(node);
-      selected.delete(node);
+      effects.delete(element);
+      selection.delete(element);
       nodes.delete(element);
       releaseNode(node);
       element.remove();
@@ -1628,14 +2325,37 @@ async function createGpuCanvas(host, options) {
       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) {
-      selected.clear();
-      for (const element of elements) {
-        const node = nodes.get(element);
-        if (node) selected.add(node);
-      }
+      selection = new Set(elements);
+      ringRects.clear();
       schedule();
     },
+    setHover(element) {
+      if (element === hovered) return;
+      hovered = element;
+      ringRects.clear();
+      schedule();
+    },
+    setEffect(element, effect, params) {
+      if (!nodes.has(element)) return;
+      if (effect) {
+        const values = effectParams(effect, params);
+        effects.set(element, { effect, params: values, pad: effectPad(effect, values) });
+      } else effects.delete(element);
+      schedule();
+    },
+    screenToWorld: (point) => screenToWorld(camera, point),
+    worldToScreen: (point) => worldToScreen(camera, point),
     getCamera: () => camera,
     setCamera,
     invalidate: onFontsLoaded,
@@ -1677,6 +2397,7 @@ async function createGpuCanvas(host, options) {
       canvas.removeEventListener("load", onResourceLoad, true);
       surface.removeEventListener("pointermove", onPointerMove);
       surface.removeEventListener("pointerleave", onPointerLeave);
+      surface.removeEventListener("pointerdown", onPointerDown, true);
       canvas.removeEventListener("focusin", onFocusIn);
       canvas.removeEventListener("focusout", onFocusOut);
       canvas.removeEventListener("transitionrun", onTransitionRun);
@@ -1692,6 +2413,689 @@ async function createGpuCanvas(host, options) {
   };
 }
 
+// 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 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;
+function createLayers(canvas, pick) {
+  const chainOf = (element) => {
+    const node = canvas.getNodeOf(element);
+    if (!node) return [];
+    let inner;
+    if (pick === "node") inner = [];
+    else if (pick === "element") {
+      inner = [];
+      for (let at = element; at && at !== node; at = at.parentElement) {
+        inner.unshift([at]);
+      }
+    } else {
+      inner = pick(element, canvas).map((layer) => [layer].flat()).filter((layer) => layer.length > 0 && layer[0] !== node);
+    }
+    const chain = [[node]];
+    let previous = canvas.getNodeRect(node);
+    for (const layer of inner) {
+      const rect = layerRect(canvas, layer);
+      if (sameRect(rect, previous)) continue;
+      chain.push(layer);
+      previous = rect;
+    }
+    return chain;
+  };
+  const chainAt = (world) => {
+    const element = canvas.getElementAt(world);
+    return element ? chainOf(element) : [];
+  };
+  const childrenOf = (parent) => {
+    if (pick === "node") return [];
+    const children = [];
+    if (pick === "element") {
+      const visit = (element, outer) => {
+        for (const child of element.children) {
+          const rect = canvas.getElementRect(child);
+          if (!rect || rect.width <= 0 || rect.height <= 0) continue;
+          if (sameRect(rect, outer)) visit(child, outer);
+          else children.push([child]);
+        }
+      };
+      for (const root of parent) visit(root, layerRect(canvas, parent));
+      return children;
+    }
+    for (const root of parent) {
+      for (const element of root.querySelectorAll("*")) {
+        if (children.some((child2) => child2.some((held) => held.contains(element)))) continue;
+        const chain = chainOf(element);
+        const index = chain.findIndex((layer) => sameLayer(layer, parent));
+        const child = index >= 0 ? chain[index + 1] : void 0;
+        if (child && !layerIn(child, children)) children.push(child);
+      }
+    }
+    return children;
+  };
+  const layersIn = (scope, rect) => scope ? childrenOf(scope).filter((layer) => {
+    const box = layerRect(canvas, layer);
+    return !!box && intersects(box, rect);
+  }) : canvas.getNodesIn(rect).map((node) => [node]);
+  return { chainOf, chainAt, childrenOf, layersIn };
+}
+
+// src/overlay.ts
+var HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+var HANDLE_PX = 8;
+var CURSORS = {
+  nw: "nwse-resize",
+  se: "nwse-resize",
+  ne: "nesw-resize",
+  sw: "nesw-resize",
+  n: "ns-resize",
+  s: "ns-resize",
+  e: "ew-resize",
+  w: "ew-resize"
+};
+var pill = (color) => ({
+  position: "absolute",
+  font: "500 11px/16px system-ui, sans-serif",
+  padding: "0 5px",
+  borderRadius: "3px",
+  color: "#fff",
+  background: color,
+  whiteSpace: "nowrap",
+  pointerEvents: "none"
+});
+function createOverlay(surface, color, hoverColor) {
+  const root = document.createElement("div");
+  Object.assign(root.style, {
+    position: "absolute",
+    inset: "0",
+    overflow: "hidden",
+    pointerEvents: "none",
+    zIndex: "2"
+  });
+  const make = (style) => {
+    const element = document.createElement("div");
+    Object.assign(element.style, { left: "0", top: "0" }, style, { display: "none" });
+    root.append(element);
+    return element;
+  };
+  const hoverName = make(pill(hoverColor));
+  const name = make(pill(color));
+  const size = make(pill(color));
+  const bounds = make({ position: "absolute", border: `1px solid ${color}` });
+  const handles = HANDLES.map((handle) => {
+    const element = make({
+      position: "absolute",
+      width: `${HANDLE_PX}px`,
+      height: `${HANDLE_PX}px`,
+      boxSizing: "border-box",
+      background: "#fff",
+      border: `1px solid ${color}`,
+      pointerEvents: "auto",
+      cursor: CURSORS[handle]
+    });
+    element.dataset.gpucanvasHandle = handle;
+    return element;
+  });
+  const guides = [];
+  surface.append(root);
+  const show = (element, visible) => {
+    element.style.display = visible ? "block" : "none";
+  };
+  const place = (element, x, y) => {
+    element.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;
+  };
+  const text = (element, value) => {
+    if (element.textContent !== value) element.textContent = value;
+  };
+  return {
+    render(state) {
+      const { hover, selection } = state;
+      show(hoverName, !!hover?.name);
+      if (hover?.name) {
+        text(hoverName, hover.name);
+        place(hoverName, hover.rect.x - 1, hover.rect.y - 19);
+      }
+      show(name, !!selection?.name);
+      show(size, !!selection);
+      show(bounds, !!selection && state.bounds);
+      for (const handle of handles) show(handle, !!selection && state.handles);
+      if (selection) {
+        const { rect } = selection;
+        if (selection.name) {
+          text(name, selection.name);
+          place(name, rect.x - 1, rect.y - 19);
+        }
+        const { width, height } = selection.size;
+        const label = `${Math.round(width)} \xD7 ${Math.round(height)}`;
+        text(size, selection.count > 1 ? `${selection.count} layers \xB7 ${label}` : label);
+        place(size, rect.x + rect.width / 2 - size.offsetWidth / 2, rect.y + rect.height + 6);
+        if (state.bounds) {
+          place(bounds, rect.x, rect.y);
+          bounds.style.width = `${rect.width}px`;
+          bounds.style.height = `${rect.height}px`;
+        }
+        if (state.handles) {
+          HANDLES.forEach((handle, i) => {
+            const fx = handle.includes("w") ? 0 : handle.includes("e") ? 1 : 0.5;
+            const fy = handle.includes("n") ? 0 : handle.includes("s") ? 1 : 0.5;
+            place(
+              handles[i],
+              rect.x + rect.width * fx - HANDLE_PX / 2,
+              rect.y + rect.height * fy - HANDLE_PX / 2
+            );
+          });
+        }
+      }
+      while (guides.length < state.guides.length) {
+        guides.push(make({ position: "absolute", background: "#f43f5e" }));
+      }
+      guides.forEach((line, i) => {
+        const guide = state.guides[i];
+        show(line, !!guide);
+        if (!guide) return;
+        place(line, guide.x, guide.y);
+        line.style.width = `${Math.max(1, guide.width)}px`;
+        line.style.height = `${Math.max(1, guide.height)}px`;
+      });
+    },
+    remove() {
+      root.remove();
+    }
+  };
+}
+var guideRect = (guide, toScreen) => {
+  const a = toScreen(guide.x1, guide.y1);
+  const b = toScreen(guide.x2, guide.y2);
+  return {
+    x: Math.min(a.x, b.x),
+    y: Math.min(a.y, b.y),
+    width: Math.abs(b.x - a.x),
+    height: Math.abs(b.y - a.y)
+  };
+};
+
+// src/snap.ts
+var ALL_ANCHORS = [0, 0.5, 1];
+var anchorsX = (rect) => ALL_ANCHORS.map((f) => rect.x + rect.width * f);
+var anchorsY = (rect) => ALL_ANCHORS.map((f) => rect.y + rect.height * f);
+function nearest(moving, lines, threshold) {
+  let best = Infinity;
+  for (const from of moving) {
+    for (const to of lines) {
+      const delta = to - from;
+      if (Math.abs(delta) <= threshold && Math.abs(delta) < Math.abs(best)) best = delta;
+    }
+  }
+  return best === Infinity ? 0 : best;
+}
+function snapRect(rect, targets, threshold, edges = { x: ALL_ANCHORS, y: ALL_ANCHORS }) {
+  const xs = targets.flatMap(anchorsX);
+  const ys = targets.flatMap(anchorsY);
+  const dx = nearest(
+    edges.x.map((f) => rect.x + rect.width * f),
+    xs,
+    threshold
+  );
+  const dy = nearest(
+    edges.y.map((f) => rect.y + rect.height * f),
+    ys,
+    threshold
+  );
+  const moved = { ...rect, x: rect.x + dx, y: rect.y + dy };
+  return { dx, dy, guides: guidesFor(moved, targets, edges) };
+}
+function guidesFor(rect, targets, edges) {
+  const guides = [];
+  const close = (a, b) => Math.abs(a - b) < 0.01;
+  for (const f of edges.x) {
+    const x = rect.x + rect.width * f;
+    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 });
+  }
+  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 });
+  }
+  return guides;
+}
+
+// src/editor.ts
+function createMarquee(canvas, color = DEFAULT_SELECTION_COLOR, select = (world) => canvas.getNodesIn(world)) {
+  const box = document.createElement("div");
+  Object.assign(box.style, {
+    position: "absolute",
+    display: "none",
+    pointerEvents: "none",
+    border: `1px solid ${color}`,
+    background: `color-mix(in srgb, ${color} 12%, transparent)`,
+    zIndex: "1"
+  });
+  canvas.surface.append(box);
+  return {
+    /** Spans the box from `a` to `b` (surface pixels) and selects what it covers. */
+    update(a, b) {
+      const x = Math.min(a.x, b.x);
+      const y = Math.min(a.y, b.y);
+      const width = Math.abs(b.x - a.x);
+      const height = Math.abs(b.y - a.y);
+      Object.assign(box.style, {
+        display: "block",
+        left: `${x}px`,
+        top: `${y}px`,
+        width: `${width}px`,
+        height: `${height}px`
+      });
+      const camera = canvas.getCamera();
+      const hits = select({
+        ...screenToWorld(camera, { x, y }),
+        width: width / camera.zoom,
+        height: height / camera.zoom
+      });
+      canvas.setSelection(hits);
+      return hits;
+    },
+    hide() {
+      box.style.display = "none";
+    },
+    remove() {
+      box.remove();
+    }
+  };
+}
+var CLICK_SLOP = 4;
+var SNAP_PX = 6;
+var MAX_NAMED = 1;
+var isEditable = (element) => !!element && (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement || element.isContentEditable);
+function bindEditor(canvas, options = {}) {
+  const {
+    pick = "node",
+    trigger = "shift-click",
+    hover = true,
+    marquee = true,
+    labels = true,
+    snap = true,
+    color = DEFAULT_SELECTION_COLOR,
+    onChange,
+    onTransform
+  } = options;
+  const label = options.label ?? ((layer) => canvas.getNodeOf(layer[0]) === layer[0] ? null : layer[0].localName);
+  const { surface } = canvas;
+  const layers = createLayers(canvas, pick);
+  const transforms = !!onTransform && trigger === "click";
+  const overlay = createOverlay(surface, color, color);
+  let marqueeLayers = [];
+  const box = marquee ? createMarquee(canvas, color, (world) => {
+    marqueeLayers = layers.layersIn(scopes.at(-1) ?? null, world);
+    return marqueeLayers.flat();
+  }) : null;
+  let selection = [];
+  let scopes = [];
+  let hovered = null;
+  let gesture = null;
+  let pointer = null;
+  let shift = false;
+  let swallowClick = false;
+  const commit = (next, nextScopes = scopes) => {
+    selection = next.filter((layer, i) => next.findIndex((other) => sameLayer(layer, other)) === i);
+    scopes = selection.length ? nextScopes : [];
+    canvas.setSelection(selection.flat());
+    onChange?.(selection);
+    draw();
+  };
+  const setHovered = (layer) => {
+    if (sameLayer(layer, hovered) || layer === hovered) return;
+    hovered = layer;
+    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 chainAt = (point) => layers.chainAt(canvas.screenToWorld(point));
+  const targetIn = (chain) => {
+    if (!chain.length) return null;
+    for (let i = scopes.length - 1; i >= 0; i--) {
+      const k = chain.findIndex((layer) => sameLayer(layer, scopes[i]));
+      if (k < 0) continue;
+      return k + 1 < chain.length ? { layer: chain[k + 1], scopes: chain.slice(0, k + 1) } : { layer: chain[k], scopes: chain.slice(0, k) };
+    }
+    return { layer: chain[0], scopes: [] };
+  };
+  const selecting = (withShift) => trigger === "click" || withShift;
+  const updateHover = () => {
+    const show = hover && pointer && !gesture && selecting(shift);
+    setHovered(show ? targetIn(chainAt(pointer))?.layer ?? null : null);
+  };
+  let frame = 0;
+  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 render = () => {
+    frame = 0;
+    const transforming = gesture?.kind === "move" || gesture?.kind === "resize" ? gesture : null;
+    const world = transforming ? unionOf(transforming.to) : selection.length ? unionOf(selection.map((layer) => layerRect(canvas, layer))) : null;
+    const hoverRect = hovered && !layerIn(hovered, selection) ? layerRect(canvas, hovered) : null;
+    overlay.render({
+      hover: labels && hoverRect ? { rect: toScreen(hoverRect), name: label(hovered) } : null,
+      selection: labels && world ? {
+        rect: toScreen(world),
+        size: world,
+        name: selection.length <= MAX_NAMED ? label(selection[0]) : null,
+        count: selection.length
+      } : 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 }))
+      ) : []
+    });
+    if (selection.length || hovered || gesture) draw();
+  };
+  const emit = (phase) => {
+    if (gesture?.kind !== "move" && gesture?.kind !== "resize") return;
+    onTransform?.({
+      phase,
+      kind: gesture.kind,
+      layers: gesture.layers,
+      from: gesture.from,
+      to: phase === "cancel" ? gesture.from : gesture.to
+    });
+  };
+  const snapTargets = (moving) => {
+    if (!snap) return [];
+    const scope = scopes.at(-1);
+    if (!scope) {
+      const view = visibleWorldRect(canvas.getCamera(), surface.clientWidth, surface.clientHeight);
+      return canvas.getNodesIn(view).filter((node) => !moving.some((layer) => layer[0] === node)).map((node) => canvas.getNodeRect(node));
+    }
+    const rects = layers.childrenOf(scope).filter((layer) => !layerIn(layer, moving)).map((layer) => layerRect(canvas, layer));
+    return [layerRect(canvas, scope), ...rects].filter((rect) => !!rect);
+  };
+  const beginTransform = (start, handle) => {
+    const from = selection.map((layer) => layerRect(canvas, layer));
+    if (from.some((rect) => !rect)) return;
+    const rects = from;
+    gesture = {
+      kind: handle ? "resize" : "move",
+      start,
+      handle,
+      layers: selection,
+      from: rects,
+      bounds: unionOf(rects),
+      to: rects,
+      targets: snapTargets(selection),
+      guides: []
+    };
+    setHovered(null);
+    emit("start");
+  };
+  const updateTransform = (point, keepRatio) => {
+    if (gesture?.kind !== "move" && gesture?.kind !== "resize") return;
+    const zoom = canvas.getCamera().zoom;
+    let dx = (point.x - gesture.start.x) / zoom;
+    let dy = (point.y - gesture.start.y) / zoom;
+    const { bounds, handle } = gesture;
+    const threshold = SNAP_PX / zoom;
+    let next;
+    if (!handle) {
+      if (keepRatio) Math.abs(dx) > Math.abs(dy) ? dy = 0 : dx = 0;
+      next = { ...bounds, x: bounds.x + dx, y: bounds.y + dy };
+      const snapped = snapRect(next, gesture.targets, threshold);
+      next = { ...next, x: next.x + snapped.dx, y: next.y + snapped.dy };
+      gesture.guides = snapped.guides;
+    } else {
+      let left = bounds.x;
+      let top = bounds.y;
+      let right2 = bounds.x + bounds.width;
+      let bottom2 = bounds.y + bounds.height;
+      if (handle.includes("w")) left = Math.min(left + dx, right2 - 1);
+      if (handle.includes("e")) right2 = Math.max(right2 + dx, left + 1);
+      if (handle.includes("n")) top = Math.min(top + dy, bottom2 - 1);
+      if (handle.includes("s")) bottom2 = Math.max(bottom2 + dy, top + 1);
+      next = { x: left, y: top, width: right2 - left, height: bottom2 - top };
+      const corner = handle.length === 2;
+      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,
+          width,
+          height
+        };
+        gesture.guides = [];
+      } else {
+        const edges = {
+          x: handle.includes("w") ? [0] : handle.includes("e") ? [1] : [],
+          y: handle.includes("n") ? [0] : handle.includes("s") ? [1] : []
+        };
+        const snapped = snapRect(next, gesture.targets, threshold, edges);
+        if (edges.x[0] === 0)
+          next = { ...next, x: next.x + snapped.dx, width: next.width - snapped.dx };
+        if (edges.x[0] === 1) next = { ...next, width: next.width + snapped.dx };
+        if (edges.y[0] === 0)
+          next = { ...next, y: next.y + snapped.dy, height: next.height - snapped.dy };
+        if (edges.y[0] === 1) next = { ...next, height: next.height + snapped.dy };
+        gesture.guides = snapped.guides;
+      }
+    }
+    const sx = next.width / bounds.width;
+    const sy = next.height / bounds.height;
+    gesture.to = gesture.from.map((rect) => ({
+      x: next.x + (rect.x - bounds.x) * sx,
+      y: next.y + (rect.y - bounds.y) * sy,
+      width: rect.width * sx,
+      height: rect.height * sy
+    }));
+    emit("move");
+    draw();
+  };
+  const onPointerDown = (event) => {
+    shift = event.shiftKey;
+    swallowClick = false;
+    if (event.button !== 0) return;
+    const point = at(event);
+    const take = () => {
+      event.stopPropagation();
+      swallowClick = true;
+      surface.setPointerCapture(event.pointerId);
+    };
+    const handle = event.target.closest?.("[data-gpucanvas-handle]");
+    if (handle && transforms) {
+      take();
+      return beginTransform(point, handle.dataset.gpucanvasHandle);
+    }
+    const target = targetIn(chainAt(point));
+    if (!target) {
+      if (event.shiftKey && box) {
+        take();
+        gesture = { kind: "marquee", start: point };
+        return;
+      }
+      if (selection.length) commit([], []);
+      return;
+    }
+    if (!selecting(event.shiftKey)) return;
+    take();
+    const additive = trigger === "click" ? event.shiftKey : event.shiftKey && (event.metaKey || event.ctrlKey);
+    const inside = !!box && sameLayer(target.layer, scopes.at(-1));
+    if (!additive && !inside && !layerIn(target.layer, selection)) {
+      commit([target.layer], target.scopes);
+    }
+    gesture = { kind: "press", start: point, additive, target, inside };
+    setHovered(null);
+  };
+  const onPointerMove = (event) => {
+    shift = event.shiftKey;
+    pointer = at(event);
+    if (!gesture) return updateHover();
+    if (gesture.kind === "press") {
+      if (Math.hypot(pointer.x - gesture.start.x, pointer.y - gesture.start.y) <= CLICK_SLOP)
+        return;
+      if (gesture.inside || trigger !== "click" && box) {
+        gesture = { kind: "marquee", start: gesture.start };
+      } else if (trigger === "click" && transforms) beginTransform(gesture.start, null);
+      else return;
+    }
+    if (gesture?.kind === "marquee") {
+      box.update(gesture.start, pointer);
+      selection = marqueeLayers;
+      onChange?.(selection);
+      draw();
+    } else updateTransform(pointer, event.shiftKey);
+  };
+  const onPointerUp = () => {
+    const done = gesture;
+    gesture = null;
+    if (!done) return;
+    if (done.kind === "marquee") {
+      box.hide();
+      commit(marqueeLayers);
+    } else if (done.kind === "press") {
+      const { layer, scopes: inside } = done.target;
+      if (!done.additive) commit([layer], inside);
+      else if (layerIn(layer, selection))
+        commit(selection.filter((other) => !sameLayer(other, layer)));
+      else commit([...selection, layer], inside);
+    } else {
+      gesture = done;
+      emit("end");
+      gesture = null;
+    }
+    updateHover();
+    draw();
+  };
+  const onDoubleClick = (event) => {
+    if (!selecting(event.shiftKey)) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const chain = chainAt(at(event));
+    let depth = -1;
+    chain.forEach((layer, i) => {
+      if (layerIn(layer, selection)) depth = i;
+    });
+    if (depth >= 0 && chain[depth + 1]) commit([chain[depth + 1]], chain.slice(0, depth + 1));
+  };
+  const onPointerLeave = () => {
+    pointer = null;
+    setHovered(null);
+  };
+  const onMouseDown = (event) => {
+    if (!swallowClick) return;
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const onClick = (event) => {
+    if (!swallowClick) return;
+    swallowClick = false;
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const up = () => {
+    const parent = scopes.at(-1);
+    if (parent) commit([parent], scopes.slice(0, -1));
+  };
+  const onKey = (event) => {
+    if (event.key === "Shift") {
+      shift = event.type === "keydown";
+      return updateHover();
+    }
+    if (event.type !== "keydown" || isEditable(document.activeElement)) return;
+    if (event.key === "Escape") {
+      if (gesture?.kind === "move" || gesture?.kind === "resize") {
+        emit("cancel");
+        gesture = null;
+      } else if (scopes.length) up();
+      else if (selection.length) commit([], []);
+      return;
+    }
+    if (!selection.length) return;
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (event.shiftKey) return up();
+      const first = layers.childrenOf(selection[0])[0];
+      if (first) commit([first], [...scopes, selection[0]]);
+    } 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 index = siblings.findIndex((layer) => sameLayer(layer, selection[0]));
+      const step = event.shiftKey ? -1 : 1;
+      const next = siblings[(index + step + siblings.length) % siblings.length];
+      if (next) commit([next]);
+    }
+  };
+  surface.addEventListener("pointerdown", onPointerDown, true);
+  surface.addEventListener("mousedown", onMouseDown, true);
+  surface.addEventListener("click", onClick, true);
+  surface.addEventListener("dblclick", onDoubleClick, true);
+  surface.addEventListener("pointermove", onPointerMove);
+  surface.addEventListener("pointerup", onPointerUp);
+  surface.addEventListener("pointercancel", onPointerUp);
+  surface.addEventListener("pointerleave", onPointerLeave);
+  window.addEventListener("keydown", onKey);
+  window.addEventListener("keyup", onKey);
+  return {
+    get: () => selection,
+    set: (next) => commit(
+      [...next].map((layer) => [layer].flat()),
+      []
+    ),
+    clear: () => commit([], []),
+    destroy() {
+      surface.removeEventListener("pointerdown", onPointerDown, true);
+      surface.removeEventListener("mousedown", onMouseDown, true);
+      surface.removeEventListener("click", onClick, true);
+      surface.removeEventListener("dblclick", onDoubleClick, true);
+      surface.removeEventListener("pointermove", onPointerMove);
+      surface.removeEventListener("pointerup", onPointerUp);
+      surface.removeEventListener("pointercancel", onPointerUp);
+      surface.removeEventListener("pointerleave", onPointerLeave);
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("keyup", onKey);
+      cancelAnimationFrame(frame);
+      box?.remove();
+      overlay.remove();
+      canvas.setHover(null);
+      canvas.setSelection([]);
+    }
+  };
+}
+
 // src/index.ts
 async function createGpuCanvas2(host, options = {}) {
   const mode = options.mode ?? "auto";
@@ -1707,9 +3111,14 @@ async function createGpuCanvas2(host, options = {}) {
 }
 
 export {
+  screenToWorld,
+  worldToScreen,
   zoomAt,
   fitCamera,
+  defineEffect,
+  EFFECTS,
   supportsGpuCanvas,
+  bindEditor,
   createGpuCanvas2 as createGpuCanvas
 };
-//# sourceMappingURL=chunk-VOFDBN5J.js.map
+//# sourceMappingURL=chunk-RBXGH44N.js.map