gpucanvas 0.3.1 → 0.4.0

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

@@ -245,6 +245,38 @@ fn effect(input: EffectInput) -> vec4f {
   ),
   css: ([progress]) => `opacity(${1 - progress})`
 });
+var fade = defineEffect({
+  name: "fade",
+  params: [0.5],
+  wgsl: (
+    /* wgsl */
+    `
+fn effect(input: EffectInput) -> vec4f {
+  return source(input.uv) * (1.0 - input.params.x);
+}`
+  ),
+  css: ([progress]) => `opacity(${1 - progress})`
+});
+var wipe = defineEffect({
+  name: "wipe",
+  params: [0.5, 0, 32],
+  wgsl: (
+    /* wgsl */
+    `
+fn effect(input: EffectInput) -> vec4f {
+  let angle = radians(input.params.y);
+  let toward = vec2f(cos(angle), sin(angle));
+  let half = input.size * 0.5;
+  let extent = abs(toward.x) * half.x + abs(toward.y) * half.y;
+  // 0 where the wipe starts, 1 where it ends.
+  let along = (dot(input.uv * input.size - half, toward) / extent + 1.0) * 0.5;
+  let soft = max(input.params.z, 0.5) / (2.0 * extent);
+  let edge = input.params.x * (1.0 + soft);
+  return source(input.uv) * smoothstep(edge - soft, edge, along);
+}`
+  ),
+  css: ([progress]) => `opacity(${1 - progress})`
+});
 var glass = defineEffect({
   name: "glass",
   animated: true,
@@ -437,6 +469,8 @@ var EFFECTS = {
   blur,
   pixelate,
   dissolve,
+  fade,
+  wipe,
   grayscale
 };
 
@@ -683,6 +717,7 @@ function createDomCanvas(host, options) {
     // The browser repaints DOM nodes itself.
     invalidate() {
     },
+    snapshot: () => Promise.reject(new Error("snapshot needs the GPU backend (WebGPU and HTML-in-Canvas)")),
     setBackground(color) {
       surface.style.background = color;
     },
@@ -1479,7 +1514,8 @@ async function createGpuCanvas(host, options) {
   });
   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);
+  const captures = [];
+  const isPinned = (page) => captures.some((capture) => capture.node.page === page) || live?.page === page || lingering?.page === page || focused?.page === page || [...transitioning.keys()].some((node) => node.page === page);
   let detailScale = 1;
   let frameView = { x: 0, y: 0, width: 0, height: 0 };
   let contentTimer = 0;
@@ -1805,10 +1841,10 @@ async function createGpuCanvas(host, options) {
     return pending;
   };
   const composite = () => {
-    let instances = visible.length;
-    for (const node of visible) instances += node.tiles.length + (node.preview ? 1 : 0);
-    instances += selection.size + 1;
-    renderer.reserve(instances);
+    let instances2 = visible.length;
+    for (const node of visible) instances2 += node.tiles.length + (node.preview ? 1 : 0);
+    instances2 += selection.size + 1;
+    renderer.reserve(instances2);
     const data = renderer.instances;
     let count = 0;
     runs.length = 0;
@@ -1960,7 +1996,67 @@ async function createGpuCanvas(host, options) {
     if (pending > 0 || effectsMoving) schedule();
   };
   let awaitingPaint = false;
+  const drawCaptures = () => {
+    for (const capture of [...captures]) {
+      const { node, scale } = capture;
+      const width = Math.max(1, Math.round(node.rect.width * scale));
+      const height = Math.max(1, Math.round(node.rect.height * scale));
+      const texture = device.createTexture({
+        size: { width, height },
+        format: "rgba8unorm",
+        usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+      });
+      try {
+        device.queue.drawElementImageToTexture(
+          {
+            source: node.page.element,
+            sourceX: node.pageX,
+            sourceY: node.pageY,
+            sourceWidth: node.rect.width,
+            sourceHeight: node.rect.height
+          },
+          { texture, size: { width, height }, premultipliedAlpha: false }
+        );
+      } catch (error) {
+        texture.destroy();
+        if (++capture.tries > 20) {
+          captures.splice(captures.indexOf(capture), 1);
+          capture.reject(error instanceof Error ? error : new Error(String(error)));
+        }
+        continue;
+      }
+      captures.splice(captures.indexOf(capture), 1);
+      readTexture(texture, width, height).then(capture.resolve, capture.reject);
+    }
+    if (captures.length) {
+      awaitingPaint = true;
+      canvas.requestPaint();
+    } else schedule();
+  };
+  const readTexture = async (texture, width, height) => {
+    const bytesPerRow = Math.ceil(width * 4 / 256) * 256;
+    const buffer = device.createBuffer({
+      size: bytesPerRow * height,
+      usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+    });
+    const encoder = device.createCommandEncoder();
+    encoder.copyTextureToBuffer({ texture }, { buffer, bytesPerRow }, { width, height });
+    device.queue.submit([encoder.finish()]);
+    try {
+      await buffer.mapAsync(GPUMapMode.READ);
+      const rows = new Uint8Array(buffer.getMappedRange());
+      const pixels = new Uint8ClampedArray(width * height * 4);
+      for (let y = 0; y < height; y++) {
+        pixels.set(rows.subarray(y * bytesPerRow, y * bytesPerRow + width * 4), y * width * 4);
+      }
+      return new ImageData(pixels, width, height);
+    } finally {
+      buffer.destroy();
+      texture.destroy();
+    }
+  };
   canvas.onpaint = (event) => {
+    if (captures.length) drawCaptures();
     let changed = false;
     for (const element of event.changedElements) {
       const page = pageByElement.get(element);
@@ -2359,6 +2455,19 @@ async function createGpuCanvas(host, options) {
     getCamera: () => camera,
     setCamera,
     invalidate: onFontsLoaded,
+    snapshot(element, options2 = {}) {
+      const node = nodes.get(element);
+      if (!node) return Promise.reject(new Error("Not a node on this canvas"));
+      const largest = device.limits.maxTextureDimension2D;
+      const wanted = options2.scale ?? devicePixelRatio;
+      const scale = Math.min(wanted, largest / node.rect.width, largest / node.rect.height);
+      return new Promise((resolve, reject) => {
+        captures.push({ node, scale, resolve, reject, tries: 0 });
+        node.page.setDrawable(true, frameNumber);
+        awaitingPaint = true;
+        canvas.requestPaint();
+      });
+    },
     setBackground(color) {
       [renderer.background, renderer.placeholder] = colorsFor(color);
       schedule();
@@ -2413,6 +2522,155 @@ async function createGpuCanvas(host, options) {
   };
 }
 
+// src/agent.ts
+var IMPLICIT_ROLES = {
+  a: "link",
+  button: "button",
+  img: "img",
+  input: "textbox",
+  textarea: "textbox",
+  select: "combobox",
+  h1: "heading",
+  h2: "heading",
+  h3: "heading",
+  h4: "heading",
+  h5: "heading",
+  h6: "heading",
+  nav: "navigation",
+  ul: "list",
+  ol: "list",
+  li: "listitem",
+  table: "table",
+  dialog: "dialog"
+};
+var INPUT_ROLES = {
+  checkbox: "checkbox",
+  radio: "radio",
+  range: "slider",
+  button: "button",
+  submit: "button",
+  reset: "button",
+  search: "searchbox"
+};
+var SKIP = /* @__PURE__ */ new Set(["script", "style", "template", "noscript"]);
+var MAX_TEXT = 120;
+var ownText = (element) => {
+  let text = "";
+  for (const child of element.childNodes) {
+    if (child.nodeType === Node.TEXT_NODE) text += child.textContent;
+  }
+  text = text.replace(/\s+/g, " ").trim();
+  return text.length > MAX_TEXT ? `${text.slice(0, MAX_TEXT - 1)}\u2026` : text;
+};
+var labelText = (element) => {
+  const label = element.labels?.[0];
+  if (!label) return "";
+  let text = "";
+  for (const node of label.childNodes) {
+    if (node !== element && !(node instanceof Element && node.contains(element))) {
+      text += node.textContent;
+    }
+  }
+  return text.replace(/\s+/g, " ").trim();
+};
+var sameRect = (a, b) => Math.abs(a.x - b.x) < 0.5 && Math.abs(a.y - b.y) < 0.5 && Math.abs(a.width - b.width) < 0.5 && Math.abs(a.height - b.height) < 0.5;
+var round = (rect) => ({
+  x: Math.round(rect.x),
+  y: Math.round(rect.y),
+  width: Math.round(rect.width),
+  height: Math.round(rect.height)
+});
+function createAgentView(canvas) {
+  const ids = /* @__PURE__ */ new WeakMap();
+  const elements = /* @__PURE__ */ new Map();
+  let next = 1;
+  const idOf = (element) => {
+    let id = ids.get(element);
+    if (!id) {
+      id = `e${next++}`;
+      ids.set(element, id);
+      elements.set(id, new WeakRef(element));
+    }
+    return id;
+  };
+  const read = (element, depth, options) => {
+    const tag = element.localName;
+    if (SKIP.has(tag)) return [];
+    const rect = canvas.getElementRect(element);
+    if (!rect || rect.width <= 0 || rect.height <= 0) return [];
+    const field = element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement ? element : null;
+    const input = element instanceof HTMLInputElement ? element : null;
+    const toggles = input?.type === "checkbox" || input?.type === "radio";
+    const role = element.getAttribute("role") ?? (input ? INPUT_ROLES[input.type] ?? "textbox" : IMPLICIT_ROLES[tag]);
+    const name = element.getAttribute("aria-label") ?? element.getAttribute("alt") ?? element.getAttribute("title") ?? (field && (labelText(field) || field.getAttribute("placeholder")) || options.name?.(element) || void 0);
+    const text = ownText(element) || void 0;
+    const value = field && !toggles ? field.value || void 0 : void 0;
+    const checked = toggles ? input.checked : void 0;
+    const meaningful = !!(role || name || text || value);
+    const below = meaningful ? depth - 1 : depth;
+    const children = below >= 0 && tag !== "svg" ? [...element.children].flatMap((child) => read(child, below, options)) : [];
+    if (!meaningful && tag !== "svg") {
+      if (children.length === 0) return [];
+      if (children.length === 1 && sameRect(children[0].rect, rect)) return children;
+    }
+    const described = { id: idOf(element), tag, rect: round(rect) };
+    if (role ?? tag === "svg") described.role = role ?? "img";
+    if (name) described.name = name;
+    if (text) described.text = text;
+    if (value) described.value = value;
+    if (checked !== void 0) described.checked = checked;
+    if (children.length) described.children = children;
+    return [described];
+  };
+  return {
+    /** What is in `rect` (default: the view), node by node, as plain JSON. */
+    describe(options = {}) {
+      const area = options.rect ?? visibleWorldRect(
+        canvas.getCamera(),
+        canvas.surface.clientWidth,
+        canvas.surface.clientHeight
+      );
+      return canvas.getNodesIn(area).flatMap((node) => read(node, options.depth ?? 6, options));
+    },
+    /** The element behind an id from `describe`, or null once it is gone. */
+    element(id) {
+      const element = elements.get(id)?.deref();
+      return element?.isConnected ? element : null;
+    },
+    /** Where an element (or the element behind an id) sits, in world units. */
+    rect(target) {
+      const element = typeof target === "string" ? this.element(target) : target;
+      return element ? canvas.getElementRect(element) : null;
+    },
+    /**
+     * An image of a world rect (an element's box when given one) as the nodes look now, at
+     * `scale` texels per world unit. GPU backend only.
+     */
+    async capture(target, { scale = 1, background } = {}) {
+      const area = typeof target === "object" && "width" in target ? target : this.rect(target);
+      if (!area) throw new Error("Nothing to capture");
+      const fit = Math.min(scale, 8192 / area.width, 8192 / area.height);
+      const width = Math.max(1, Math.round(area.width * fit));
+      const height = Math.max(1, Math.round(area.height * fit));
+      const out = new OffscreenCanvas(width, height);
+      const context = out.getContext("2d");
+      if (background) {
+        context.fillStyle = background;
+        context.fillRect(0, 0, width, height);
+      }
+      const nodes = canvas.getNodesIn(area);
+      const images = await Promise.all(nodes.map((node) => canvas.snapshot(node, { scale: fit })));
+      nodes.forEach((node, i) => {
+        const rect = canvas.getNodeRect(node);
+        const bitmap = new OffscreenCanvas(images[i].width, images[i].height);
+        bitmap.getContext("2d").putImageData(images[i], 0, 0);
+        context.drawImage(bitmap, (rect.x - area.x) * fit, (rect.y - area.y) * fit);
+      });
+      return context.getImageData(0, 0, width, height);
+    }
+  };
+}
+
 // src/layers.ts
 var sameLayer = (a, b) => !!a && !!b && a[0] === b[0];
 var layerIn = (layer, list) => list.some((other) => sameLayer(layer, other));
@@ -2434,7 +2692,7 @@ function unionRect(a, b) {
     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;
+var sameRect2 = (a, b) => !!a && !!b && Math.abs(a.x - b.x) < 0.5 && Math.abs(a.y - b.y) < 0.5 && Math.abs(a.width - b.width) < 0.5 && Math.abs(a.height - b.height) < 0.5;
 function createLayers(canvas, pick) {
   const chainOf = (element) => {
     const node = canvas.getNodeOf(element);
@@ -2453,7 +2711,7 @@ function createLayers(canvas, pick) {
     let previous = canvas.getNodeRect(node);
     for (const layer of inner) {
       const rect = layerRect(canvas, layer);
-      if (sameRect(rect, previous)) continue;
+      if (sameRect2(rect, previous)) continue;
       chain.push(layer);
       previous = rect;
     }
@@ -2471,7 +2729,7 @@ function createLayers(canvas, pick) {
         for (const child of element.children) {
           const rect = canvas.getElementRect(child);
           if (!rect || rect.width <= 0 || rect.height <= 0) continue;
-          if (sameRect(rect, outer)) visit(child, outer);
+          if (sameRect2(rect, outer)) visit(child, outer);
           else children.push([child]);
         }
       };
@@ -3096,6 +3354,392 @@ function bindEditor(canvas, options = {}) {
   };
 }
 
+// src/marks.ts
+var SVG = "http://www.w3.org/2000/svg";
+var FONT = "500 11px/16px system-ui, sans-serif";
+var instances = 0;
+var pillStyle = (color) => ({
+  position: "absolute",
+  left: "0",
+  top: "0",
+  font: FONT,
+  padding: "0 6px",
+  borderRadius: "4px",
+  color: "#fff",
+  background: color,
+  whiteSpace: "nowrap",
+  pointerEvents: "none"
+});
+function createMarks(canvas, { color = "#4f8cff" } = {}) {
+  const id = `gpucanvas-marks-${++instances}`;
+  const root = document.createElement("div");
+  Object.assign(root.style, {
+    position: "absolute",
+    inset: "0",
+    overflow: "hidden",
+    pointerEvents: "none",
+    zIndex: "1"
+  });
+  const svg = document.createElementNS(SVG, "svg");
+  Object.assign(svg.style, { position: "absolute", inset: "0", width: "100%", height: "100%" });
+  const defs = document.createElementNS(SVG, "defs");
+  svg.append(defs);
+  root.append(svg);
+  canvas.surface.append(root);
+  const arrows = /* @__PURE__ */ new Map();
+  const arrowFor = (stroke) => {
+    let ref = arrows.get(stroke);
+    if (!ref) {
+      ref = `${id}-arrow-${arrows.size}`;
+      const marker = document.createElementNS(SVG, "marker");
+      for (const [key, value] of Object.entries({
+        id: ref,
+        viewBox: "0 0 10 10",
+        refX: "8",
+        refY: "5",
+        markerWidth: "7",
+        markerHeight: "7",
+        orient: "auto"
+      })) {
+        marker.setAttribute(key, value);
+      }
+      const head = document.createElementNS(SVG, "path");
+      head.setAttribute("d", "M0,1 L9,5 L0,9 z");
+      head.setAttribute("fill", stroke);
+      marker.append(head);
+      defs.append(marker);
+      arrows.set(stroke, ref);
+    }
+    return ref;
+  };
+  const toScreen = (point) => canvas.worldToScreen(point);
+  const screenRect = (rect) => {
+    const a = toScreen(rect);
+    const b = toScreen({ x: rect.x + rect.width, y: rect.y + rect.height });
+    return { x: a.x, y: a.y, width: b.x - a.x, height: b.y - a.y };
+  };
+  const worldRect = (target) => target instanceof Element ? canvas.getElementRect(target) : { x: target.x, y: target.y, width: 0, height: 0 };
+  const place = (element, x, y) => {
+    const transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;
+    if (element.style.transform !== transform) element.style.transform = transform;
+  };
+  const show = (element, visible) => {
+    const display = visible ? "" : "none";
+    if (element.style.display !== display) element.style.display = display;
+  };
+  const div = (style, text) => {
+    const element = document.createElement("div");
+    Object.assign(element.style, style);
+    if (text) element.textContent = text;
+    root.append(element);
+    return element;
+  };
+  const marks = /* @__PURE__ */ new Set();
+  let frame = 0;
+  const loop = () => {
+    frame = marks.size ? requestAnimationFrame(loop) : 0;
+    for (const draw of marks) draw();
+  };
+  const add = (draw, remove) => {
+    marks.add(draw);
+    if (!frame) frame = requestAnimationFrame(loop);
+    return {
+      remove() {
+        marks.delete(draw);
+        remove();
+      }
+    };
+  };
+  return {
+    /** An arrow from one element (or world point) to another, with an optional label. */
+    connect(from, to, options = {}) {
+      const stroke = options.color ?? color;
+      const path = document.createElementNS(SVG, "path");
+      path.setAttribute("fill", "none");
+      path.setAttribute("stroke", stroke);
+      path.setAttribute("stroke-width", "2");
+      path.setAttribute("stroke-linecap", "round");
+      if (options.dashed) path.setAttribute("stroke-dasharray", "6 5");
+      path.setAttribute("marker-end", `url(#${arrowFor(stroke)})`);
+      svg.append(path);
+      const label = options.label ? div(pillStyle(stroke), options.label) : null;
+      return add(
+        () => {
+          const a = worldRect(from);
+          const b = worldRect(to);
+          show(path, !!a && !!b);
+          if (label) show(label, !!a && !!b);
+          if (!a || !b) return;
+          const p = screenRect(a);
+          const q = screenRect(b);
+          const dx = q.x + q.width / 2 - (p.x + p.width / 2);
+          const dy = q.y + q.height / 2 - (p.y + p.height / 2);
+          const across = Math.abs(dx) >= Math.abs(dy);
+          const start = across ? { x: dx > 0 ? p.x + p.width : p.x, y: p.y + p.height / 2 } : { x: p.x + p.width / 2, y: dy > 0 ? p.y + p.height : p.y };
+          const end = across ? { x: dx > 0 ? q.x - 2 : q.x + q.width + 2, y: q.y + q.height / 2 } : { x: q.x + q.width / 2, y: dy > 0 ? q.y - 2 : q.y + q.height + 2 };
+          const bend = Math.max(
+            30,
+            (across ? Math.abs(end.x - start.x) : Math.abs(end.y - start.y)) / 2
+          );
+          const c1 = across ? { x: start.x + Math.sign(dx) * bend, y: start.y } : { x: start.x, y: start.y + Math.sign(dy) * bend };
+          const c2 = across ? { x: end.x - Math.sign(dx) * bend, y: end.y } : { x: end.x, y: end.y - Math.sign(dy) * bend };
+          const d = `M${start.x.toFixed(1)},${start.y.toFixed(1)} C${c1.x.toFixed(1)},${c1.y.toFixed(1)} ${c2.x.toFixed(1)},${c2.y.toFixed(1)} ${end.x.toFixed(1)},${end.y.toFixed(1)}`;
+          if (path.getAttribute("d") !== d) path.setAttribute("d", d);
+          if (label) {
+            const mx = (start.x + 3 * c1.x + 3 * c2.x + end.x) / 8;
+            const my = (start.y + 3 * c1.y + 3 * c2.y + end.y) / 8;
+            place(label, mx - label.offsetWidth / 2, my - 8);
+          }
+        },
+        () => {
+          path.remove();
+          label?.remove();
+        }
+      );
+    },
+    /**
+     * A comment pin at an element's top right corner, or at a world point. Its text shows on
+     * hover; `onClick` makes it a button.
+     */
+    pin(target, options = {}) {
+      const fill = options.color ?? color;
+      const dot = div(
+        {
+          position: "absolute",
+          left: "0",
+          top: "0",
+          width: "24px",
+          height: "24px",
+          borderRadius: "12px 12px 12px 2px",
+          background: fill,
+          border: "2px solid #fff",
+          boxShadow: "0 1px 4px rgb(0 0 0 / 0.25)",
+          color: "#fff",
+          font: "600 11px/20px system-ui, sans-serif",
+          textAlign: "center",
+          boxSizing: "border-box",
+          pointerEvents: "auto",
+          cursor: options.onClick ? "pointer" : "default"
+        },
+        options.label ?? ""
+      );
+      if (options.text) dot.title = options.text;
+      if (options.onClick) dot.addEventListener("click", options.onClick);
+      return add(
+        () => {
+          const rect = worldRect(target);
+          show(dot, !!rect);
+          if (!rect) return;
+          const r = screenRect(rect);
+          place(dot, r.x + r.width - 4, r.y - 20);
+        },
+        () => dot.remove()
+      );
+    },
+    /** A dashed frame around an element with a note above it: what someone is pointing at. */
+    note(target, text, options = {}) {
+      const stroke = options.color ?? "#f59e0b";
+      const frameBox = div({
+        position: "absolute",
+        left: "0",
+        top: "0",
+        border: `2px dashed ${stroke}`,
+        borderRadius: "6px",
+        boxSizing: "border-box"
+      });
+      const label = div({ ...pillStyle(stroke), maxWidth: "320px", whiteSpace: "normal" }, text);
+      return add(
+        () => {
+          const rect = worldRect(target);
+          show(frameBox, !!rect);
+          show(label, !!rect);
+          if (!rect) return;
+          const r = screenRect(rect);
+          place(frameBox, r.x - 4, r.y - 4);
+          const width = `${Math.round(r.width + 8)}px`;
+          const height = `${Math.round(r.height + 8)}px`;
+          if (frameBox.style.width !== width) frameBox.style.width = width;
+          if (frameBox.style.height !== height) frameBox.style.height = height;
+          place(label, r.x - 4, r.y - 8 - label.offsetHeight);
+        },
+        () => {
+          frameBox.remove();
+          label.remove();
+        }
+      );
+    },
+    /** Someone's cursor, with their name. It glides to each point given to `move`. */
+    cursor(name, options = {}) {
+      const fill = options.color ?? color;
+      const box = div({ position: "absolute", left: "0", top: "0", display: "none" });
+      box.innerHTML = `<svg width="18" height="20" viewBox="0 0 18 20" style="display:block"><path d="M1 1 L1 16 L5 12 L8 19 L11 18 L8 11 L14 11 Z" fill="${fill}" stroke="#fff" stroke-width="1.5" stroke-linejoin="round"/></svg>`;
+      const tag = document.createElement("div");
+      Object.assign(tag.style, pillStyle(fill), { position: "relative", marginLeft: "12px" });
+      tag.textContent = name;
+      box.append(tag);
+      let target = null;
+      let at = null;
+      const mark = add(
+        () => {
+          show(box, !!target);
+          if (!target) return;
+          at = at ? { x: at.x + (target.x - at.x) * 0.25, y: at.y + (target.y - at.y) * 0.25 } : target;
+          const p = toScreen(at);
+          place(box, p.x, p.y);
+        },
+        () => box.remove()
+      );
+      return {
+        move(point) {
+          target = point;
+          if (!point) at = null;
+        },
+        remove: mark.remove
+      };
+    },
+    /** Removes every mark. */
+    clear() {
+      for (const draw of [...marks]) marks.delete(draw);
+      root.querySelectorAll(":scope > div").forEach((element) => element.remove());
+      svg.querySelectorAll(":scope > path").forEach((element) => element.remove());
+    },
+    destroy() {
+      cancelAnimationFrame(frame);
+      marks.clear();
+      root.remove();
+    }
+  };
+}
+
+// src/snapshots.ts
+function toBlob(image, type = "image/png", quality) {
+  const canvas = new OffscreenCanvas(image.width, image.height);
+  canvas.getContext("2d").putImageData(image, 0, 0);
+  return canvas.convertToBlob({ type, quality });
+}
+function diffImages(before, after, { threshold = 24, color = [255, 64, 96] } = {}) {
+  const width = Math.max(before.width, after.width);
+  const height = Math.max(before.height, after.height);
+  const out = new Uint8ClampedArray(width * height * 4);
+  let changed = 0;
+  let minX = width;
+  let minY = height;
+  let maxX = -1;
+  let maxY = -1;
+  const read = (image, x, y) => x < image.width && y < image.height ? (y * image.width + x) * 4 : -1;
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const a = read(before, x, y);
+      const b = read(after, x, y);
+      const o = (y * width + x) * 4;
+      let differs = a < 0 || b < 0;
+      if (!differs) {
+        for (let c = 0; c < 4 && !differs; c++) {
+          differs = Math.abs(before.data[a + c] - after.data[b + c]) > threshold;
+        }
+      }
+      if (differs) {
+        changed++;
+        if (x < minX) minX = x;
+        if (y < minY) minY = y;
+        if (x > maxX) maxX = x;
+        if (y > maxY) maxY = y;
+        out[o] = color[0];
+        out[o + 1] = color[1];
+        out[o + 2] = color[2];
+        out[o + 3] = 255;
+      } else {
+        for (let c = 0; c < 3; c++) out[o + c] = 255 - (255 - after.data[b + c]) * 0.25;
+        out[o + 3] = after.data[b + 3];
+      }
+    }
+  }
+  return {
+    changed,
+    total: width * height,
+    bounds: maxX < 0 ? null : { x: minX, y: minY, width: maxX - minX + 1, height: maxY - minY + 1 },
+    image: new ImageData(out, width, height)
+  };
+}
+function recordFilmstrip(canvas, node, {
+  scale = 0.25,
+  max = 30,
+  settleMs = 400,
+  onFrame
+} = {}) {
+  const frames = [];
+  let stopped = false;
+  let timer = 0;
+  const take = () => {
+    canvas.snapshot(node, { scale }).then((image) => {
+      if (stopped) return;
+      const frame = { at: performance.now(), image };
+      frames.push(frame);
+      if (frames.length > max) frames.shift();
+      onFrame?.(frame, frames);
+    }).catch(() => {
+    });
+  };
+  const observer = new MutationObserver((records) => {
+    if (records.every((record) => record.type === "attributes" && record.target === node)) return;
+    clearTimeout(timer);
+    timer = window.setTimeout(take, settleMs);
+  });
+  observer.observe(node, { subtree: true, childList: true, characterData: true, attributes: true });
+  take();
+  return {
+    frames,
+    stop() {
+      stopped = true;
+      clearTimeout(timer);
+      observer.disconnect();
+    }
+  };
+}
+
+// src/transitions.ts
+var easeInOut = (t) => t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+var running = /* @__PURE__ */ new WeakMap();
+function animateEffect(canvas, node, effect, { from = 0, to = 1, duration = 500, easing = easeInOut, params = [] } = {}) {
+  running.get(node)?.();
+  return new Promise((resolve) => {
+    const start = performance.now();
+    let frame = 0;
+    const set = (progress) => canvas.setEffect(node, effect, [progress, ...params]);
+    const stop = () => {
+      cancelAnimationFrame(frame);
+      running.delete(node);
+      resolve(false);
+    };
+    running.set(node, stop);
+    const step = (now) => {
+      const t = duration > 0 ? Math.min(1, (now - start) / duration) : 1;
+      const progress = from + (to - from) * easing(t);
+      if (t < 1) {
+        set(progress);
+        frame = requestAnimationFrame(step);
+        return;
+      }
+      running.delete(node);
+      if (to === 0) canvas.setEffect(node, null);
+      else set(to);
+      resolve(true);
+    };
+    set(from);
+    frame = requestAnimationFrame(step);
+  });
+}
+async function swapNodes(canvas, outgoing, incoming, {
+  effect = dissolve,
+  ...options
+} = {}) {
+  const done = await Promise.all([
+    animateEffect(canvas, outgoing, effect, { ...options, from: 0, to: 1 }),
+    animateEffect(canvas, incoming, effect, { ...options, from: 1, to: 0 })
+  ]);
+  return done.every(Boolean);
+}
+
 // src/index.ts
 async function createGpuCanvas2(host, options = {}) {
   const mode = options.mode ?? "auto";
@@ -3118,7 +3762,15 @@ export {
   defineEffect,
   EFFECTS,
   supportsGpuCanvas,
+  createAgentView,
   bindEditor,
+  createMarks,
+  toBlob,
+  diffImages,
+  recordFilmstrip,
+  easeInOut,
+  animateEffect,
+  swapNodes,
   createGpuCanvas2 as createGpuCanvas
 };
-//# sourceMappingURL=chunk-RBXGH44N.js.map
+//# sourceMappingURL=chunk-BQQVSR4B.js.map